.Twilio-MainContainer {
    max-height: calc(100% - 75px);
    max-width: calc(100% - 22px);
    height: 640px;
    width: 360px;
}
.Twilio-MessageListItem-BubbleContainer {
    margin-inline-end: 0;
    font-size: 12px;
}
.Twilio-MessageBubble-Body {
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
}
.Twilio-MessageInputArea-TextArea > textarea {
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    max-height: 136px;
}
.Twilio-WelcomeMessage {
    order: 1;
}
.Twilio-InlineMessage {
    order: 2;
    margin-top: 0px;
    margin-bottom: 0px;
}
.Twilio-MessageListItem {
    order: 2;
}
.rtl .Twilio-MessageBubble-UserName {
    margin-inline: 0 8px;
}
.rtl .Twilio-EntryPoint {
    padding-left: 16px;
    left: 24px;
    right: unset;
    padding-right: 11px;
}
.rtl .Twilio-ChatItem-Avatar {
    margin-right: unset;
    margin-inline-end: 12px;
}
.Twilio-MainContainer-default, 
.Twilio-MessagingCanvas {
    background: var(--twilio-chat-bg-color);
}
.Twilio-MessageList {
    padding-bottom: 23px;
    height: 100svh;
    align-content: flex-start;
}
.Twilio-MessageListItem-BubbleContainer > .Twilio-MessageBubble {
    overflow: visible;
}
.Twilio-MessageList::-webkit-scrollbar {
    width: 5px;
}
.Twilio-MessageList::-webkit-scrollbar-track {
    background-color: var(--twilio-chat-scrollbar-track-bg-color);
    border: 1px solid var(--twilio-chat-scrollbar-track-border-color);
}
.Twilio-MessageList::-webkit-scrollbar-thumb {
    border-radius: 100px;
    background-color: var(--twilio-chat-scrollbar-thumb-bg-color);
}
.Twilio-InlineDateSeparator > hr {
    border-color: var(--separator-line-color);
}
.Twilio-InlineDateSeparator > div {
    color: var(--separator-text-color);
}
.Twilio-MessageBubble-Header {
    justify-content: flex-start;
    margin-right: 0px;
}
.Twilio-MessageBubble-UserName:after {
    content: '•';
    margin-inline-start: 5px;
}

button.Twilio.Twilio-EntryPoint:focus > div::before {
    content: 't' / '';
    position: absolute;
    left: -2px;
    top: -2px;
    width: 100%;
    height: calc(100% - 4px);
    z-index: -1;
    background-color: var(--twilio-chat-icon-hover-circle-border-color);
    border: var(--twilio-chat-icon-focus-border-color);
    border-radius: 50%;
}

button.Twilio.Twilio-EntryPoint:hover > div > svg > circle:nth-of-type(2) {
    fill: var(--twilio-chat-icon-hover-bg-color) !important;
}
button.Twilio.Twilio-EntryPoint:hover > div > svg > circle:nth-of-type(1) {
    fill: var(--twilio-chat-icon-hover-circle-border-color) !important;
}
button.Twilio.Twilio-EntryPoint:hover svg > path{
    stroke: var(--twilio-chat-icon-hover-inner-icon-color) !important;
}
.Twilio-MainHeader-default > button:focus,
.Twilio-MainHeader-default > button:focus-visible {
    outline: var(--close-button-focus-border-color) !important;
}
.Twilio-MainHeader-default > button:hover > svg > g > path {
    stroke: var(--close-button-hover-color) !important;
}
button.Twilio-Media-MessageBubble {
    background: var(--attach-file-link-buble-bg-color) !important;
    padding: 7px 12px 12px 0px;
    border: 2px solid var(--attach-file-link-buble-bg-color);
}
button.Twilio-Media-MessageBubble div { 
    color: var(--attach-file-link-buble-color);
    
}

button.Twilio-Media-MessageBubble > div > div{ 
    height: auto;
}
button.Twilio-Media-MessageBubble > div > div:first-of-type{
    width: 35px;
}

button.Twilio-Media-MessageBubble:hover div{
    color: var(--attach-file-link-buble-hover-color);
}
button.Twilio-Media-MessageBubble:hover .Twilio-Icon.Twilio-Icon-GenericImage{
    background-image: var(--attach-file-icon-svg-hover-color);
}
button.Twilio-Media-MessageBubble:focus {
    border: var(--attach-file-link-buble-focus-border);
    border-radius: 12px 12px 0px 10px !important;
}
button.Twilio-Media-MessageBubble:focus div {
    color: var(--attach-file-link-buble-focus-color); 
}
button.Twilio-Media-MessageBubble:focus .Twilio-Icon.Twilio-Icon-GenericImage {
    background-image: var(--attach-file-icon-svg-focus-color);
}

button.Twilio-Media-MessageBubble > div > div:nth-of-type(2) > div:nth-of-type(2),
button.Twilio-Media-MessageBubble .Twilio-Icon > svg,
.Twilio-WelcomeMessage-IconContainer > .Twilio-Icon > svg,
.Twilio-Media-MessageBubble-Action,
.Twilio-ChatItem-Avatar > .Twilio-Icon > svg,
.Twilio-AttachFileButton > .Twilio-Icon > svg,
.Twilio-Icon.Twilio-Icon-SendLarge > svg {
    display: none;
}
.Twilio-Icon.Twilio-Icon-SendLarge {
    background-image: var(--send-button-icon-svg);
    background-size: cover;
    height: 16px;
    width: 16px;
    margin: auto;
}
.Twilio-AttachFileButton > .Twilio-Icon {
    background-image: url('data:image/svg+xml,<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.62915 3.66656L4.29582 7.99989C4.0306 8.26511 3.8816 8.62482 3.8816 8.99989C3.8816 9.37497 4.0306 9.73468 4.29582 9.99989C4.56103 10.2651 4.92075 10.4141 5.29582 10.4141C5.67089 10.4141 6.0306 10.2651 6.29582 9.99989L10.6292 5.66656C11.1596 5.13613 11.4576 4.41671 11.4576 3.66656C11.4576 2.91642 11.1596 2.19699 10.6292 1.66656C10.0987 1.13613 9.3793 0.838135 8.62915 0.838135C7.87901 0.838135 7.15958 1.13613 6.62915 1.66656L2.29582 5.99989C1.50017 6.79554 1.05318 7.87468 1.05318 8.99989C1.05318 10.1251 1.50017 11.2042 2.29582 11.9999C3.09147 12.7955 4.1706 13.2425 5.29582 13.2425C6.42104 13.2425 7.50017 12.7955 8.29582 11.9999L12.6292 7.66656" stroke="%231F6075" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-size: cover;
    height: 16px;
    width: 16px;
    margin: auto;
}
button.Twilio-Media-MessageBubble .Twilio-Icon {
    background-image: var(--attach-file-icon-svg-color);
    background-size: cover;
    height: 16px;
    width: 16px;
}
.Twilio-WelcomeMessage-IconContainer {
    background-image: url('data:image/svg+xml,<svg width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M24.7971 31.274C23.6178 30.6652 22.7452 29.6521 22.3678 28.4535C19.9819 29.3095 17.4073 29.6198 14.8635 29.358C12.3197 29.0961 9.88211 28.2699 7.75848 26.9498C0.494025 22.4342 -1.44009 13.2997 3.44697 6.58737C8.33403 -0.124937 18.2201 -1.91187 25.4845 2.6036C32.7307 7.10791 34.6732 16.2083 29.8324 22.9157C30.4335 23.2233 30.9627 23.6378 31.3894 24.1353C31.8162 24.6329 32.132 25.2036 32.3188 25.8145C32.5022 26.4194 32.5548 27.0516 32.4737 27.6753C32.3927 28.2989 32.1795 28.9017 31.8463 29.4491C31.5131 29.9966 31.0665 30.4781 30.5319 30.8661C29.9973 31.2541 29.3853 31.5411 28.7307 31.7105C28.0764 31.8815 27.3918 31.931 26.7166 31.8561C26.0415 31.7812 25.3891 31.5833 24.7971 31.274Z" fill="white"/><path d="M25.3748 30.0579C24.5503 29.5808 23.9524 28.8325 23.7017 27.964C23.653 27.8033 23.5683 27.6538 23.4532 27.5252C23.338 27.3966 23.1949 27.2917 23.0332 27.2174C22.8714 27.143 22.6946 27.1008 22.5141 27.0936C22.3336 27.0863 22.1535 27.1141 21.9853 27.1751L21.9066 27.2037C18.6903 28.3715 15.1276 28.4357 11.8644 27.3846C8.60134 26.3335 5.85394 24.2366 4.12048 21.4744C2.38702 18.7121 1.78228 15.4673 2.41593 12.3284C3.04958 9.18951 4.87965 6.36435 7.57428 4.36525C10.2689 2.36615 13.6497 1.3255 17.1035 1.43199C20.5573 1.53849 23.8554 2.7851 26.3998 4.94575C28.9442 7.10639 30.5663 10.038 30.9721 13.209C31.3778 16.3799 30.5403 19.5802 28.6114 22.2296L28.5644 22.2941C28.4636 22.4326 28.3953 22.5892 28.3639 22.7537C28.3326 22.9181 28.339 23.0868 28.3826 23.2489C28.4262 23.4109 28.5062 23.5627 28.6172 23.6944C28.7283 23.8261 28.8681 23.9349 29.0274 24.0136C29.4874 24.2361 29.8941 24.5418 30.2235 24.9126C30.5528 25.2834 30.798 25.7117 30.9444 26.1719C31.0966 26.6744 31.124 27.2022 31.0246 27.7159C30.9251 28.2295 30.7014 28.7158 30.37 29.1384C29.9445 29.6864 29.3525 30.1053 28.669 30.3421C28.2413 30.4918 27.7877 30.5688 27.3303 30.5693C26.6399 30.5688 25.9631 30.3918 25.3748 30.0579Z" fill="%23F0F0F0"/><path d="M24.7388 31.3699C24.5583 31.2761 24.3838 31.1727 24.216 31.0604C22.4131 29.8519 20.2859 29.2921 18.2266 29.4838C14.5145 29.8269 10.789 28.963 7.69211 27.041C0.373253 22.4916 -1.57539 13.2886 3.34828 6.52608C8.27191 -0.23642 18.232 -2.03699 25.5509 2.51246C28.5825 4.40214 30.8234 7.19306 31.9016 10.4218C32.9798 13.6506 32.8304 17.123 31.4782 20.2625C31.1747 20.9529 31.0496 21.6991 31.1129 22.442C31.1763 23.1849 31.4262 23.9038 31.8429 24.5418C32.2709 25.1838 32.5324 25.9086 32.607 26.6594C32.6816 27.4103 32.5673 28.1669 32.273 28.8702C31.9788 29.5735 31.5125 30.2044 30.9107 30.7136C30.3089 31.2228 29.5878 31.5966 28.8037 31.8057C28.3236 31.9342 27.8263 31.9996 27.3264 32C26.4197 31.9982 25.5287 31.7812 24.7388 31.3699ZM3.64443 6.7102C1.7828 9.26711 0.854496 12.3069 0.995065 15.3858C1.13563 18.4648 2.33772 21.4216 4.4258 23.8245C6.51388 26.2275 9.37862 27.9507 12.6018 28.7428C15.8249 29.5348 19.2377 29.3541 22.3418 28.227L22.5257 28.1601L22.5789 28.336C22.9323 29.5013 23.7721 30.4892 24.9138 31.0824C26.0555 31.6755 27.4054 31.8254 28.6666 31.4989C29.9278 31.1724 30.997 30.3963 31.6389 29.3414C32.2809 28.2866 32.443 27.0393 32.0897 25.8739C31.9087 25.2817 31.6005 24.7291 31.1835 24.2493C30.7665 23.7694 30.2492 23.372 29.6625 23.0808L29.4884 22.9948L29.5986 22.8433C31.9124 19.6631 32.7645 15.7641 31.9675 12.0036C31.1706 8.24302 28.7898 4.9289 25.3488 2.78997C21.9078 0.651041 17.6883 -0.137555 13.6181 0.597595C9.54797 1.33274 5.96043 3.53145 3.64443 6.7102Z" fill="%233F3D56"/><path d="M23.1459 16.4998C24.1694 16.4998 24.9991 15.7332 24.9991 14.7875C24.9991 13.8418 24.1694 13.0752 23.1459 13.0752C22.1224 13.0752 21.2927 13.8418 21.2927 14.7875C21.2927 15.7332 22.1224 16.4998 23.1459 16.4998Z" fill="%233DBFEA"/><path d="M16.8231 16.4998C17.8466 16.4998 18.6763 15.7332 18.6763 14.7875C18.6763 13.8418 17.8466 13.0752 16.8231 13.0752C15.7997 13.0752 14.97 13.8418 14.97 14.7875C14.97 15.7332 15.7997 16.4998 16.8231 16.4998Z" fill="%233DBFEA"/><path d="M10.5006 16.4998C11.5241 16.4998 12.3538 15.7332 12.3538 14.7875C12.3538 13.8418 11.5241 13.0752 10.5006 13.0752C9.47715 13.0752 8.64746 13.8418 8.64746 14.7875C8.64746 15.7332 9.47715 16.4998 10.5006 16.4998Z" fill="%233DBFEA"/></svg>');
    background-size: cover;
    height: 32px;
    width: 33px;
}
.Twilio-ChatItem-Avatar > .Twilio-Icon {
    background-size: cover;
    height: 24px;
    width: 32px;
    background-image: url('data:image/svg+xml,<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="0.000244141" width="32" height="32" rx="16" fill="%23E8E8E9"/><circle cx="16.287" cy="11" r="3.4" stroke="%23454751" stroke-width="1.2"/><rect x="8.60024" y="17.6" width="14.8" height="5.8" rx="2.9" stroke="%23454751" stroke-width="1.2"/></svg> ');
}
.Twilio-MessageInput-default > div {
    align-items: center;
}
.Twilio-MessageInput-default > div > div {
    padding-top: 0;
}
button.Twilio-AttachFileButton.Twilio-MessageInputArea-AttachFileButton,
button.Twilio-IconButton.Twilio-MessageInput-SendButton {
    width: 32px;
    height: 32px;
}

button.Twilio-AttachFileButton.Twilio-MessageInputArea-AttachFileButton {
    background: var(--attach-file-button-bg-color);
    border: solid 1px var(--attach-file-button-bg-color);
}

button.Twilio-AttachFileButton.Twilio-MessageInputArea-AttachFileButton:focus:not(:disabled) {
    background: var(--attach-file-button-focus-bg-color);
    border: var(--attach-file-button-focus-border-color);
}

button.Twilio-AttachFileButton.Twilio-MessageInputArea-AttachFileButton:active {
    background: var(--attach-file-button-active-bg-color);
    border: solid 1px var(--attach-file-button-active-bg-color);
}

button.Twilio-AttachFileButton.Twilio-MessageInputArea-AttachFileButton:hover:not(:disabled) {
    background: var(--attach-file-button-hover-bg-color);
    border: var(--attach-file-button-hover-border-color);
}

button.Twilio-AttachFileButton.Twilio-MessageInputArea-AttachFileButton:disabled {
    background: var(--attach-file-button-disabled-bg-color);
}

button.Twilio-IconButton.Twilio-MessageInput-SendButton {
    background: var(--send-button-bg-color);
}

button.Twilio-IconButton.Twilio-MessageInput-SendButton:focus:not(:disabled) {
    background: var(--send-button-focus-bg-color);
    border: var(--send-button-focus-border-color);
}

button.Twilio-IconButton.Twilio-MessageInput-SendButton:active {
    background: var(--send-button-active-bg-color);
}

button.Twilio-IconButton.Twilio-MessageInput-SendButton:hover {
    background: var(--send-button-hover-bg-color);
    border: var(--send-button-hover-border-color);
}

button.Twilio-IconButton.Twilio-MessageInput-SendButton:disabled {
    background: var(--send-button-disabled-bg-color);
}
.Twilio-MessageInput {
    border-top: 1px solid var(--twilio-chat-separator-input-line-color);
}
.desktopView {
    border-radius: 25px;
}
.mobileView {
    border-radius: 0;
}