/* general stuff */

[data-webchat-root] {
    /* placement and size */
    --base-width: 420px;
    --base-height: 640px;
    --button-bottom: 70px;
    --button-right: 70px;
    --widget-bottom: 20px;
    --widget-right: 90px;

    /* fonts and colours */
    --base-color: rgba(255, 255, 255, 1);
    --base-black: rgba(22, 22, 22, 1);
    --base-color-link :  rgba(22, 22, 22, 1);
    --font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    --font-size-base: 14px;
    --font-color-base: var(--base-black);
    --font-color-link: var(--base-color-link);
    --font-weight-base: 400;
    --font-color-text : rgb(214, 211, 211);
    --font-headertext-color-base: rgb(227 6 19);

    --brand-color: rgb(129, 129, 129, 1); /* Yellow */
    --brand-color-light: rgb(227 6 19); /* Yellow */
    --border-color: rgba(220, 220, 220, 1);
    --bot-box-background-color: rgb(255 223 225);

    /* header */
    --chat-header-background-color: var(--base-color);
    --chat-header-text-color: var(--font-color-base);
    --chat-header-close-icon-color: var(--font-color-base);

    /* chat body */
    --message-box-width: 90%;
    --bot-message-background: var(--bot-box-background-color);
    --bot-message-font-color: var(--font-color-base);
    --user-message-background: var(--base-black);
    --user-message-font-color: var(--base-color);

       /* misc */
    --engagement-message-font-color: var(--font-color-text);
    --footer-font-color: rgba(129, 129, 129, 1);
    --footer-background-color: var(--border-color);
}

/* general tag styles for webchat */
[data-webchat-root] *, [data-webchat-root] ::before {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: 120%;
    /*color: var( --font-color-text);*/
    box-sizing: border-box;
     
}

[data-webchat-root] a {
    color: var(--font-color-link);
    text-decoration: underline;
    font-weight: 500;
}

[data-webchat-root] #window {
    border-top: 1px solid var(--base-black);
    box-shadow: 0px 8px 12px 0px rgba(0, 0, 0, 0.25);
    border-radius: 4px;
    overflow: visible;
    z-index: 10;

}

[data-webchat-root] .window {
    position: fixed;
    height: 89%;
    max-height: var(--base-height);
    width: 100%;
    bottom: 0;
    right: 0;
    display: none;
    animation: popIn 0.15s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
}

[data-webchat-root] #chatWindow {
    height: 470px;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 8px 10px;
    
    z-index: 8;
}

[data-webchat-root] #chatbot-footer {
    height: 30px;
    position: relative;
}

@media (min-width: 578px) {
    
    [data-webchat-root] #window {
        border-top: none;
    }

    [data-webchat-root] .window {
        height: var(--base-height);
        width: var(--base-width);
        bottom: var(--widget-bottom);
        right: var(--widget-right);
    }
    
}

@media (min-width: 1180px) {
    [data-webchat-root] .window {
        bottom: var(--widget-bottom);
        right: var(--widget-right);
    }
    
    [data-webchat-root] .window.expandedWindow {
        width: 90vw;
        height: 95vh;
    }
    
    [data-webchat-root] #expand {
        display: block;
    }
    
}

@media (max-height: 600px) {

}

@keyframes popIn {
    from {
        transform: scale(0);
    }

    to {
        transform: scale(1);
    }
}

[data-webchat-root] #expand {
    display: none;
}

[data-webchat-root] .expanded {
    height: 80vh;
}

[data-webchat-root] .hide {
    display: none;
}

[data-webchat-root] .not-allowed {
    cursor: not-allowed;
}

[data-webchat-root] .small-text {
    font-size: 0.75rem;
    padding-left: 3%;
}

[data-webchat-root] .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

[data-webchat-root] .close:hover, .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

[data-webchat-root] #chatbotContainer {
    position: relative;
    width: 100%;
    height: 100vh;
}

/* header */
[data-webchat-root] #banner {
    display: flex;
    justify-content: space-between; 
    align-items: center;

    position: relative;
    padding: 8px 4px;
    
    height: 45px; 
    border-bottom: 1px solid;
    border-bottom-color: var(--border-color);
}

[data-webchat-root] .header-root {
    background-color: var(--chat-header-background-color);
}

[data-webchat-root] .reset-container {
    margin: 0 0 0 1rem;
    width: 10%;
    background-color: var(--chat-header-background-color); 
}

[data-webchat-root] .reset-button {
    /*border: none;
    background-color: var(--chat-header-background-color); 
    color: var(--brand-color);
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;*/
    border: none;
    background-color: var(--brand-color-light);
    color: var(--base-color);
    font-size: 11px;
    /* font-weight: 700; */
    cursor: pointer;
    padding: 5px;
    border-radius: 22px;
    width: 54px;


}

[data-webchat-root] .header-content-container {
    flex-grow: 4;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 0.5rem;
    position: relative;
    overflow: visible;
}

[data-webchat-root] .header-content-title-before {
    background-image: url(img/Marie_Punk_trans.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 221px;
    height: 111px;
    margin: 0px 0px 0px 0px;
    position: absolute;
    top: -65px;
    z-index: 99999;
    left: 45%;
    transform: translateX(-50%);
}

[data-webchat-root] .header-content-title {
    color: var(--font-headertext-color-base);
    font-weight: 700;
    font-size: xx-large;
    margin: 8px 0.5rem;
    font-family: sans-serif;
    margin: 8px 0.5px 0px 100px;
}    


[data-webchat-root] .header-content-title-after {
    /* margin-left: 0.5rem;
     padding: 4px 12px;
     border-radius: 16px;
     text-align: left;
     font-size: 0.75rem;
     font-weight: 700;
     background: var(--brand-color-light);
     color: var(--font-color-text)
     */
     margin-left: 1px;
     /* padding: 4px 12px; */
     /* border-radius: 16px; */
     /* text-align: left; */
     font-size: 0.75rem;
     font-weight: 700;
     /* background: var(--brand-color-light); */
     color: rgb(0 158 224);
 }  

[data-webchat-root] .icon-container {
    display: flex; 
    width: 10%;
    margin: 0rem;
}

[data-webchat-root] #chevronDown {
    margin: 0px;
    background-color: transparent;
    background-image: none;
    cursor: pointer;
    border: none;
}

[data-webchat-root] #expand svg, 
[data-webchat-root] #chevronDown svg {
    width: 1.5rem; 
    height: 1.5rem;
    transition: color 0.3s;
}

[data-webchat-root] #chevronDown svg path {
    color: var(--chat-header-close-icon-color);
}

/* header on mobile */
@media (max-width: 577px) {

}


/* something other */
[data-webchat-root] #send-svg {
    height: 1.5rem;
}

[data-webchat-root] #chatWindow {
    overflow-y: auto; 
    scroll-behavior: smooth; 
    overflow-x: hidden; 
    background-color: var(--base-color); 
}

[data-webchat-root] #start {
    align-self: center; 
    width: 100%;
}

[data-webchat-root] .start-container {
    margin-top: 0.5rem;
    margin-left: 1rem;
    margin-right: 1rem;
}

/* greeting message styling */
[data-webchat-root] .greeting-msg {
    font-size: 12px;
    font-style: normal;
    line-height: 120%; 
    padding-bottom: 16px;
    margin-right: 24px;
    color: var(--base-black);
}

[data-webchat-root] .beginning-text {
    font-size: var(--font-size-base); 
    font-weight: 400;
    line-height: 120%; 
    padding: 12px;
    background: var(--bot-message-background);
    border-radius: 8px 8px 8px 2px;
    color: var(--bot-message-font-color);
}


[data-webchat-root] .question-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    justify-items: center;
    margin: 0 1rem 1rem 1rem;
    border-radius: 20px;
    /*background-color: rgb(229 229 229 / 29%);*/
    padding: 10px;
}

[data-webchat-root] .question-container > * {
    width: 100%;
    max-width: 260px;
}

[data-webchat-root] .question {
    color: rgb(30 50 75 / 94%);
    text-align: center;
    /* background-color: var(--base-color); */
/*    border-radius: 25px;*/
    padding: 8px 14px;
    border: 1px solid rgb(217 210 210 / 46%);
    max-width: 260px;
    transition: background-color 0.15s ease;
    justify-self: end;
    border-radius: 8px 8px 8px 2px;
}
[data-webchat-root] .question:hover {
    background-color: var(--bot-box-background-color);
    color: var(--font-color-base);
    border: 1px solid var(--bot-box-background-color); 
    cursor: pointer;
}

/* no notice in the start containers */
[data-webchat-root] #notice {
    display: none;
}

/* //bot and user message styling */
[data-webchat-root] .message-wrapper {
    margin: 0.5rem 1rem;
    max-width: var(--message-box-width);
    overflow-wrap: break-word;
}

[data-webchat-root] .message-wrapper.bot {
    align-self: flex-start;
}

[data-webchat-root] .message {
    padding: 8px 24px;
    text-wrap: wrap;
    animation: popIn 0.15s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
}

/* bot messages */
[data-webchat-root] .message-avatar {
    display: inline-block;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    [data-webchat-root] .message-avatar.bot .icon {
        /*background-image: url('data:image/svg+xml,<svg fill="%23e30613" width="25px" height="25px" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M 26.6875 12.6602 C 26.9687 12.6602 27.1094 12.4961 27.1797 12.2383 C 27.9062 8.3242 27.8594 8.2305 31.9375 7.4570 C 32.2187 7.4102 32.3828 7.2461 32.3828 6.9648 C 32.3828 6.6836 32.2187 6.5195 31.9375 6.4726 C 27.8828 5.6524 28.0000 5.5586 27.1797 1.6914 C 27.1094 1.4336 26.9687 1.2695 26.6875 1.2695 C 26.4062 1.2695 26.2656 1.4336 26.1953 1.6914 C 25.3750 5.5586 25.5156 5.6524 21.4375 6.4726 C 21.1797 6.5195 20.9922 6.6836 20.9922 6.9648 C 20.9922 7.2461 21.1797 7.4102 21.4375 7.4570 C 25.5156 8.2774 25.4687 8.3242 26.1953 12.2383 C 26.2656 12.4961 26.4062 12.6602 26.6875 12.6602 Z M 15.3438 28.7852 C 15.7891 28.7852 16.0938 28.5039 16.1406 28.0821 C 16.9844 21.8242 17.1953 21.8242 23.6641 20.5821 C 24.0860 20.5117 24.3906 20.2305 24.3906 19.7852 C 24.3906 19.3633 24.0860 19.0586 23.6641 18.9883 C 17.1953 18.0977 16.9609 17.8867 16.1406 11.5117 C 16.0938 11.0899 15.7891 10.7852 15.3438 10.7852 C 14.9219 10.7852 14.6172 11.0899 14.5703 11.5352 C 13.7969 17.8164 13.4687 17.7930 7.0469 18.9883 C 6.6250 19.0821 6.3203 19.3633 6.3203 19.7852 C 6.3203 20.2539 6.6250 20.5117 7.1406 20.5821 C 13.5156 21.6133 13.7969 21.7774 14.5703 28.0352 C 14.6172 28.5039 14.9219 28.7852 15.3438 28.7852 Z M 31.2344 54.7305 C 31.8438 54.7305 32.2891 54.2852 32.4062 53.6524 C 34.0703 40.8086 35.8750 38.8633 48.5781 37.4570 C 49.2344 37.3867 49.6797 36.8945 49.6797 36.2852 C 49.6797 35.6758 49.2344 35.2070 48.5781 35.1133 C 35.8750 33.7070 34.0703 31.7617 32.4062 18.9180 C 32.2891 18.2852 31.8438 17.8633 31.2344 17.8633 C 30.6250 17.8633 30.1797 18.2852 30.0860 18.9180 C 28.4219 31.7617 26.5938 33.7070 13.9140 35.1133 C 13.2344 35.2070 12.7891 35.6758 12.7891 36.2852 C 12.7891 36.8945 13.2344 37.3867 13.9140 37.4570 C 26.5703 39.1211 28.3281 40.8321 30.0860 53.6524 C 30.1797 54.2852 30.6250 54.7305 31.2344 54.7305 Z"></path></g></svg>');*/
        content: url('img/Marie_Punk.jpg');
        background-repeat: round;
        background-position: center;
        width: 1.5rem;
        height: 1.5rem;
        margin-block: 0px;
        border-radius: 19px;
    }

[data-webchat-root] .message-avatar.bot .text {
    font-weight: 700;
}

[data-webchat-root] .message.bot {
    color: var(--bot-message-font-color);
    background: var(--bot-message-background);
    margin-right: 36px;
    border-radius: 8px 8px 8px 2px;
}

/* user messages */
[data-webchat-root] .message.user {
    align-self: flex-end;
    color: var(--user-message-font-color);
    background: var(--user-message-background);
    margin-left: 36px;
    border-radius: 8px 8px 2px 8px;
}

/** input area with disclaimer*/
[data-webchat-root] .input-area {
    position: relative; 
    padding: 8px 26px;
    background-color: var(--base-color);
    
}

/* input row with form field and send button */
[data-webchat-root] .input-container {
    border-radius: 8px;
    border: 1px solid var(--border-color);
    display: flex; 
    align-items: center;
}    

/* input field */
[data-webchat-root] #message-input {
    color: var(--footer-font-color);
    padding: 4px 4px 4px 16px;
    display: flex;
    align-self: stretch;
    align-items: center;
    max-width: 100%;
    width: 100%;
    border: 0px;
    outline: none;
}

[data-webchat-root] #send-button {
    cursor: pointer;
    width: 40px; 
    height: 40px; 
    border: none;
    margin: 3px;
    border-radius: 32px;
    box-shadow: 0px 0px 10px 1px rgba(198, 178, 163, 0.3);
    background: var(--base-color);
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23.6718 0.534454C23.475 0.243838 23.0953 0.121942 22.7662 0.256006L0.67038 9.16697C0.3657 9.28978 0.181932 9.58135 0.201636 9.90948C0.221323 10.2376 0.439762 10.5048 0.757572 10.5901L10.2321 13.1259C10.5452 13.2094 10.7917 13.4559 10.8752 13.7691L13.411 23.2435C13.5001 23.5764 13.7926 23.8004 14.1376 23.8004C14.4498 23.8004 14.716 23.6204 14.8332 23.3298L23.7442 1.23396C23.8388 0.998646 23.8125 0.743518 23.6718 0.534454ZM10.335 12.7389L0.860556 10.2031C0.680556 10.1553 0.608364 10.0072 0.600876 9.88529C0.593388 9.76342 0.646814 9.6078 0.82025 9.53841L22.9161 0.627454C22.9602 0.609642 23.0052 0.600267 23.0502 0.600267C23.0689 0.600267 23.0858 0.61058 23.1036 0.61433L10.7623 12.9556C10.6329 12.8609 10.4932 12.7812 10.3348 12.739L10.335 12.7389ZM23.3728 1.08477L14.4618 23.1806C14.4065 23.3184 14.2856 23.4 14.1375 23.4C14.0128 23.4 13.8478 23.3316 13.7962 23.1403L11.2604 13.6658C11.2182 13.5074 11.1385 13.3668 11.0438 13.2383L23.3944 0.888661C23.4048 0.943974 23.4028 1.00977 23.3728 1.08477Z" fill="%23E3D9D1" stroke="%23E3D9D1" stroke-width="0.25"/></svg>');
}

[data-webchat-root] .inputDisclaimer {
    /*color: var(--footer-font-color);*/
    letter-spacing: -0.132px;
    font-size: 0.68rem;
    text-align: center;
    padding: 4px 0px;
}

[data-webchat-root] .input-limitation-container {
    display: none;
}

/* ----------- COLORS -----------*/
[data-webchat-root] .bg-red-700 {
    background-color: rgb(230, 222, 222);
}

[data-webchat-root] .bg-red-100 {
	--tw-bg-opacity: 1;
	background-color: rgb(254 226 226 / var(--tw-bg-opacity));
}

[data-webchat-root] .bg-red-200 {
	--tw-bg-opacity: 1;
	background-color: rgb(254 202 202 / var(--tw-bg-opacity));
}

[data-webchat-root] .fill-red-700 {
	fill: #0a66c2;
}

[data-webchat-root] .fill-red-600 {
	fill: var(--brand-color);
}

/** footer row */
[data-webchat-root] .footer {
    color: var(--footer-font-color);
    font-size: 0.68rem;
    letter-spacing: -0.132px;
    text-align: center;
    padding: 5px 24px;
    background: var(--footer-background-color);
    box-shadow: 0px 8px var(--footer-background-color);
}

/* special changes for small screens */
@media (max-height: 600px) {

    [data-webchat-root] #chatWindow {
        height: 400px;
    }

    [data-webchat-root] .window {
        height: 570px;
    }
    
    [data-webchat-root] .header-content-title {
        font-weight: 700;
        font-size: 0.8rem;
    }    
    
    
    [data-webchat-root] .footer {
        padding: 7px 24px 8px 24px;
        background: var(--footer-background-color);
        box-shadow: 0px 8px var(--footer-background-color);
    }

    [data-webchat-root] .inputDisclaimer {
        color: var(--footer-font-color);
        letter-spacing: -0.132px;
        font-size: 0.68rem;
        text-align: center;
        padding: 0px 0px;
    }
    
}


/** open/close button styling */
[data-webchat-root] .open-btn {
  position: fixed;
    width: 100px;
    height: 100px;
    border: none;
    /* border-radius: 50%; */
    right: 12px;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(img/Marie_Punk_trans.png);
    background-size: contain;
    /* color: transparent; */
    bottom: -4px;
    background-color: transparent;
}

[data-webchat-root] .dynamic-icon.open .open-btn {
    background-size: 60%;
    /* background-color: #e30613; */
    background-image: url('data:image/svg+xml,<svg width="70%" height="70%" viewBox="0 0 315 198" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;"><g transform="matrix(1,0,0,1,-398.67,-774.778)"><g id="Vector-8" serif:id="Vector 8" transform="matrix(9.74424,0,0,9.74424,166.008,483.651)"><path d="M28,34L40,46L52,34" style="fill:none;fill-rule:nonzero;stroke:white;stroke-width:2px;"/></g></g></svg>');
}

[data-webchat-root] .dynamic-image-container {
    position: absolute;
    display: inline-block;
    bottom: 10px;
    right: 10px;
}

[data-webchat-root] .dynamic-icon {
    position: fixed;
    bottom: var(--button-bottom);
    right: var(--button-right);
    text-decoration: none;
    z-index: 6;
}

[data-webchat-root] .dynamic-icon.inactive {
    display: none;
}

[data-webchat-root] .dynamic-icon-text {
    font-size: 100px;
}

[data-webchat-root] .chatBot-display-on {
    display: block;
}
.msg-display-on {
    display: block;
}
.msg-display-off {
    display: none;
}
[data-webchat-root] .chatBot-display-off {
    display: none;
}

[data-webchat-root] .widget-position {
    z-index: 7;
}

[data-webchat-root] .engagement-message {
    position: fixed;
    bottom: 90px;
    right: 20px;
    width: 212px;
    padding: 0px 12px;
    z-index: 6;
    font-weight: 400;
    line-height: 120%; /* 16.8px */
    letter-spacing: -0.154px;
    border-radius: 8px 8px 2px 8px;
    background-color: rgb(227 6 19);    
    color: var(--font-color-text);
}

[data-webchat-root] .engagement-message > p {
    margin-block: 14px;
}

/* Close button for the engagement message */
[data-webchat-root] .close-engagement-message {
    position: absolute;
    top: 9px;
    right: 9px;
    cursor: pointer;
    font-weight: bold;
    color: var(--engagement-message-font-color);
}


[data-webchat-root] .feedback-btn-container {
    display: flex;
    gap: 10px;
    margin: 5px;
}

[data-webchat-root] .input-area {
    position: relative; 
    padding: 8px 12px 0px 12px;
    background-color: rgba(255, 255, 255);
   
    
}

/* input row with form field and send button */
[data-webchat-root] .input-container {
    background-color: var(--base-color);
    border-radius: 100px;
    border: 1px solid var(--base-color);
    display: flex; 
    align-items: center;
}    

/* input field */
[data-webchat-root] #message-input {
    color: var(--footer-font-color);
    padding: 4px 4px 4px 40px;
    display: flex;
    align-self: stretch;
    align-items: center;
    max-width: 100%;
    width: 100%;
    border: solid 1px #aaa;
    border-radius: 1000px;
    outline: none;
    background-image: url('data:image/svg+xml,<svg width="25px" height="25px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"/><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/><g id="SVGRepo_iconCarrier"><path opacity="0.5" d="M13 15.4C13 13.3258 13 12.2887 13.659 11.6444C14.318 11 15.3787 11 17.5 11C19.6213 11 20.682 11 21.341 11.6444C22 12.2887 22 13.3258 22 15.4V17.6C22 19.6742 22 20.7113 21.341 21.3556C20.682 22 19.6213 22 17.5 22C15.3787 22 14.318 22 13.659 21.3556C13 20.7113 13 19.6742 13 17.6V15.4Z" fill="%23e30613"/><path d="M2 8.6C2 10.6742 2 11.7113 2.65901 12.3556C3.31802 13 4.37868 13 6.5 13C8.62132 13 9.68198 13 10.341 12.3556C11 11.7113 11 10.6742 11 8.6V6.4C11 4.32582 11 3.28873 10.341 2.64437C9.68198 2 8.62132 2 6.5 2C4.37868 2 3.31802 2 2.65901 2.64437C2 3.28873 2 4.32582 2 6.4V8.6Z" fill="%23e30613"/><path d="M13 5.5C13 4.4128 13 3.8692 13.1713 3.44041C13.3996 2.86867 13.8376 2.41443 14.389 2.17761C14.8024 2 15.3266 2 16.375 2H18.625C19.6734 2 20.1976 2 20.611 2.17761C21.1624 2.41443 21.6004 2.86867 21.8287 3.44041C22 3.8692 22 4.4128 22 5.5C22 6.5872 22 7.1308 21.8287 7.55959C21.6004 8.13133 21.1624 8.58557 20.611 8.82239C20.1976 9 19.6734 9 18.625 9H16.375C15.3266 9 14.8024 9 14.389 8.82239C13.8376 8.58557 13.3996 8.13133 13.1713 7.55959C13 7.1308 13 6.5872 13 5.5Z" fill="%23e30613"/><path opacity="0.5" d="M2 18.5C2 19.5872 2 20.1308 2.17127 20.5596C2.39963 21.1313 2.83765 21.5856 3.38896 21.8224C3.80245 22 4.32663 22 5.375 22H7.625C8.67337 22 9.19755 22 9.61104 21.8224C10.1624 21.5856 10.6004 21.1313 10.8287 20.5596C11 20.1308 11 19.5872 11 18.5C11 17.4128 11 16.8692 10.8287 16.4404C10.6004 15.8687 10.1624 15.4144 9.61104 15.1776C9.19755 15 8.67337 15 7.625 15H5.375C4.32663 15 3.80245 15 3.38896 15.1776C2.83765 15.4144 2.39963 15.8687 2.17127 16.4404C2 16.8692 2 17.4128 2 18.5Z" fill="%23e30613"/></g></svg>');    
    background-repeat: no-repeat;
    background-position: left;
    background: #7073751a;
}

[data-webchat-root] #send-button {
    cursor: pointer;
    width: 37px;
    height: 34px;
    border: none;
    margin: 3px;
    margin: 0 0 0 10px;
    border-radius: 32px;
    box-shadow: 0px 0px 10px 1px rgba(198, 178, 163, 0.3);
    /* background: var(--base-color); */
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('data:image/svg+xml,<svg fill="%23000000" width="25px" height="25px" viewBox="0 0 24 24" id="send" xmlns="http://www.w3.org/2000/svg" class="icon multi-color" transform="rotate(-45)"><g id="SVGRepo_bgCarrier" stroke-width="0"/><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/><g id="SVGRepo_iconCarrier"><title style="stroke-width: 2;">send</title><path id="secondary-fill" d="M18.5,13.66,5.44,19.85A1,1,0,0,1,4.1,18.54l2.72-6.13a1.06,1.06,0,0,0,0-.82L4.71,6.84l13,6.16A1.93,1.93,0,0,1,18.5,13.66Z" style="fill: %23d0171f; stroke-width: 2;"/><path id="primary-stroke" d="M20.09,12.9l-1.59.76L5.44,19.85A1,1,0,0,1,4.1,18.54l2.72-6.13a1.06,1.06,0,0,0,0-.82L4.71,6.84,4.1,5.46A1,1,0,0,1,5.44,4.15l14.65,7A1,1,0,0,1,20.09,12.9ZM7,12h4" style="fill: none; stroke: %23000000; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"/></g></svg>');
}



[data-webchat-root] .thumbs-icon {
    width: 29.5px;
    height: 29.5px;
    padding: 7px 8px 9px 8px;
}

/* Thumbs-up default */
[data-webchat-root] .thumbs-up-default {
    background-image: url('data:image/svg+xml,<svg width="29" height="29" viewBox="0 0 30 29" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="0.5" y="0.5" width="28.5" height="28" rx="14" stroke="%23A62139"/><path d="M10.5 13H8V20H10.5V13Z" fill="%23A62139"/><path d="M10.5 13L12.9827 7.04154C12.9932 7.01639 13.0178 7 13.045 7V7C14.1548 7 15.0841 7.84097 15.1945 8.94529L15.5 12H21.5L18 20H10.5M10.5 13H8V20H10.5M10.5 13V20" stroke="%23A62139"/></svg>');
    width: 25px;
    height: 24px;
    background-size: cover;
}

/* Thumbs-up active */
[data-webchat-root] .thumbs-up-active {
    background-image: url('data:image/svg+xml,<svg width="29" height="29" viewBox="0 0 30 29" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="0.5" y="0.5" width="28.5" height="28" rx="14" fill="%23A62139"/><rect x="0.5" y="0.5" width="28.5" height="28" rx="14" stroke="%23A62139"/><path d="M10.5 13H8V20H10.5V13Z" fill="white"/><path d="M10.5 13L12.9827 7.04154C12.9932 7.01639 13.0178 7 13.045 7V7C14.1548 7 15.0841 7.84097 15.1945 8.94529L15.5 12H21.5L18 20H10.5M10.5 13H8V20H10.5M10.5 13V20" stroke="white"/></svg>');
    width: 25px;
    height: 24px;
    background-size: cover;
}

/* Thumbs-down default */
[data-webchat-root] .thumbs-down-default {
    background-image: url('data:image/svg+xml,<svg width="29" height="29" viewBox="0 0 30 29" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="1" y="0.5" width="28.5" height="28" rx="14" stroke="%23A62139"/><path d="M19.5 16L22 16L22 9L19.5 9L19.5 16Z" fill="%23A62139"/><path d="M19.5 16L17.0173 21.9585C17.0068 21.9836 16.9822 22 16.955 22V22C15.8452 22 14.9159 21.159 14.8055 20.0547L14.5 17L8.5 17L12 9L19.5 9M19.5 16L22 16L22 9L19.5 9M19.5 16L19.5 9" stroke="%23A62139"/></svg>');
    width: 25px;
    height: 25px;
    background-size: cover;
}

/* Thumbs-down active */
[data-webchat-root] .thumbs-down-active {
    background-image: url('data:image/svg+xml,<svg width="29" height="29" viewBox="0 0 30 29" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="1" y="0.5" width="28.5" height="28" rx="14" fill="%23A62139"/><rect x="1" y="0.5" width="28.5" height="28" rx="14" stroke="%23A62139"/><path d="M19.5 16L22 16L22 9L19.5 9L19.5 16Z" fill="white"/><path d="M19.5 16L17.0173 21.9585C17.0068 21.9836 16.9822 22 16.955 22V22C15.8452 22 14.9159 21.159 14.8055 20.0547L14.5 17L8.5 17L12 9L19.5 9M19.5 16L22 16L22 9L19.5 9M19.5 16L19.5 9" stroke="white"/></svg>');
    width: 25px;
    height: 24px;
    background-size: cover;
}

/* Voice recording styles */
[data-webchat-root] .mic-button {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid #ccc;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    transition: all 0.3s ease;
    position: relative;
    z-index: 99999999;
}

    [data-webchat-root] .mic-button:hover {
        background-color: #f5f5f5;
        transform: scale(1.05);
    }

    [data-webchat-root] .mic-button.recording {
        background-color: #ff5252;
        border-color: #ff5252;
    }

[data-webchat-root] .mic-icon {
    width: 23px;
    height: 18px;
    fill: #555;
    transition: fill 0.3s ease;
}

[data-webchat-root] .mic-button.recording .mic-icon {
    fill: #fff;
}

[data-webchat-root] .mic-pulsate {
    animation: mic-pulse 1.5s infinite;
}

@keyframes mic-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(255, 82, 82, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 82, 82, 0);
    }
}

[data-webchat-root] .recording-indicator {
    position: absolute;
    top: -24px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #555;
    color: white;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 12px;
    display: none;
    white-space: nowrap;
}

[data-webchat-root] .processing-indicator {
    position: absolute;
    top: -24px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #3498db;
    color: white;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 12px;
    display: none;
    white-space: nowrap;
}

/* For better UX during recording */
[data-webchat-root] .input-container.recording #message-input {
    border-color: #ff5252;
    box-shadow: 0 0 0 1px rgba(255, 82, 82, 0.3);
}