.typing {
    width: 2px;
    aspect-ratio: 1;
    border-radius: 50%;
    box-shadow: 9.5px 0 0 3.5px, 19px 0 0 1.5px, 28.5px 0 0 0;
    animation: l21 .5s infinite alternate linear;
}

@keyframes l21 {
    50% {
        box-shadow: 9.5px 0 0 1.5px, 19px 0 0 3.5px, 28.5px 0 0 1.5px;
    }

    100% {
        box-shadow: 9.5px 0 0 0, 19px 0 0 1.5px, 28.5px 0 0 3.5px;
    }
}

div.chat-container-card {
    margin: 0;
    height: 100%;
}

div.chat-body {
    height: 100%;
    padding: 0px 5px 5px 5px;
}

    div.chat-body.has-status {
        height: calc(100% - 30px);
    }

.conversation-list .conversation-actions {
    float: right;
    display: none;
}

.conversation-list .odd .conversation-actions {
    float: left;
    display: none;
}

.conversation-list .conversation-item:hover .conversation-actions {
    display: block;
}

.scroller.scroller-full {
    height: calc(100% - 50px);
    width: 100%;
}

.scroller.scroller-rich {
    height: calc(100% - 195px);
    width: 100%;
}

.scroller-status {
    height: calc(100% - 50px);
}

.scroller.scoller-rich-status {
    height: calc(100% - 223px);
}

.scroller {    
    scrollbar-width: thin;
    overflow-y: scroll;
    display: flex;
    flex-direction: column-reverse;
    overflow-anchor: auto !important;
}
    .scroller .scroller-content {
        align-self: stretch;
    }

        .scroller .scroller-content .conversation-item {
            /* transform: translateZ(-1em);  fixes a bug in Safari iOS where the scroller doesn't update */
        }

            .scroller .scroller-content .conversation-item:before {
                /*transform: translateZ(-1em);*/ /* fixes a bug in Safari iOS where the scroller doesn't update */
            }

_::-webkit-full-page-media, _:future, :root .scroller .scroller-content .conversation-item {
    -webkit-transform: scale(1); 
}

.scrollachor {
    overflow-anchor: auto;
    height: 1px;
}

div#chatDialog_dialog-content {
    padding: 0px
}

    div#chatDialog_dialog-content div.chat-container-card {
        border: none;
    }

    div#chatDialog_dialog-content div.card-body.chat-body {
        padding: 0px 5px 5px 5px;
    }


.e-richtexteditor .e-rte-content .e-content, .e-richtexteditor .e-source-content .e-content {
    min-height: 60px;
    padding: 10px;
}

.conversation-text img {
    max-width: 100%;
}

span.math {
    display: block;
    margin-top:10px;
    margin-bottom:15px;
}

    span.math svg {
        max-width: 100%;
        font-family: MJXZERO, MJXTEX !important;
    }

    span.math [class*='mjx-'] {
        font-family: MJXZERO, MJXTEX !important;
    }

[class*='mjx-'] [class^="e-"] *:not([class*="e-icon"]):not([class*="fas"]):not([class*="far"]):not([class*="mdi-"]):not([class*="bx-"]):not([class*="ri-"]):not([class*="wi-"]):not([class*="fe-"]):not([class*="mjx-"]) {
    font-family: MJXZERO, MJXTEX !important;
}

.full-width {     
    width: 100%;
}

    .full-width .e-rte-content {
        text-align: left;
    }

div.flagged-answer {
    position: absolute;
    width: 15px;
    height: 15px;
    margin-top: auto;
    margin-bottom: auto;
    top: 0;
    bottom: 0;
}

:not(.odd) div.flagged-answer {
    right: -25px;
}

.odd div.flagged-answer {
    left: -25px;
}

@keyframes quick-pop {
    0% {
        opacity: 0;
        transform: scale(0.1);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.03);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slide-in-left {
    0% {
        -webkit-transform: translateX(-50px);
        transform: translateX(-50px);
        opacity: 0;
    }

    99% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }

    100% {
        -webkit-transform: none;
        transform: none;
        opacity: unset;
    }
}

@keyframes slide-in-right {
    0% {
        -webkit-transform: translateX(50px);
        transform: translateX(50px);
        opacity: 0;
    }

    99% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }

    100% {
        -webkit-transform: none;
        transform: none;
        opacity: unset;
    }
}

.slide-in-right, div.odd .slide-in {
    -webkit-animation: slide-in-right 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-in-right 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    will-change: transform, opacity;
}

.slide-in-left, div:not(.odd) .slide-in {
    -webkit-animation: slide-in-left 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-in-left 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    will-change: transform, opacity;
}

.slide-in, .slide-in-left, .slide-in-right {
    z-index: 1;
}

.quick-pop {
    animation: pop-in 0.1s ease 1;
    animation-delay: 0s;
    -webkit-animation-fill-mode: initial;
    animation-fill-mode: initial;
}

.dropdown-menu dropdown-menu-start show {
    z-index: 1050;
}

/* Fix for the chat bubbles triangle position  */
:root {
    --eddie-chat-text-color: #fff;
    --eddie-chat-background-color: rgb(251, 230, 241);
    --user-response-background-color: rgb(238, 252, 230);
    --user-background-color: rgb(205, 223, 254);
    /*  
        Blue = rgba(89, 147, 253, 1),
		Purple = rgba(101, 89, 204, 1),
		Pink = rgb(248, 224, 238),
		EcoDriverGreen = rgba(91, 203, 24, 1),*/
}

.conversation-item {
    position: relative;
    z-index:1;
}

    .conversation-item .chat-avatar {
        position: relative;
        z-index: 2;
    }

    .conversation-item .conversation-text {
        position: relative;
        z-index: 2;
    }

    .conversation-item .conversation-text {
        position: relative;
        z-index: 2;
    }

    .conversation-item .conversation-actions.dropdown {
        position: relative;
        z-index: 3;
    }

    .conversation-item .conversation-actions .dropdown-menu {
        position: absolute; /* Ensure it can use z-index */
        z-index: 1050; /* Ensure dropdown menu is above slide-in elements */
    }

.conversation-list .ctext-wrap {
    border-radius: 0;
    background-color: var(--user-response-background-color);
}

.conversation-list .odd .ctext-wrap {
    border-radius: 0;
    background-color: var(--user-background-color);
}

.conversation-list .conversation-item {
    position: relative;
    z-index: 1;
}

.chat-app-conversation.conversation-list .conversation-item:not(.odd) .ctext-wrap:after {
    left: -11px;
}

.chat-app-conversation.chat-app-conversation .eddie-msg .ctext-wrap {
    /*    color: var(--eddie-chat-text-color);*/
    background-color: var(--eddie-chat-background-color);
}

.chat-app-conversation.conversation-list .eddie-msg .ctext-wrap:after {
    border-top-color: var(--eddie-chat-background-color);
    border-right-color: var(--eddie-chat-background-color);
}

.chat-app-conversation.conversation-list .conversation-item.odd .user-msg .ctext-wrap:after {
    border-top-color: var(--user-background-color);
    border-left-color: var(--user-background-color);
    right: -11px !important;
}

.chat-app-conversation.conversation-list .conversation-item:not(.odd) .user-msg .ctext-wrap:after {
    border-top-color: var(--user-response-background-color);
    border-right-color: var(--user-response-background-color);
}

.chat-app-conversation .eddie-msg .table > :not(caption) > * > * {
/*    color: var(--eddie-chat-text-color);*/
}

.conversation-list .conversation-text {
    border-radius: 8px;
    filter: drop-shadow(1px 1px 2px rgba(0,0,0, 0.2));
}

.conversation-list .conversation-item:not(.odd) .ctext-wrap {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border-top-right-radius: 8px;
    border-top-left-radius: 0px;
}

.conversation-list .conversation-item.odd .ctext-wrap {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border-top-right-radius: 0px;
    border-top-left-radius: 8px;
}


.attachmentUploader .e-icons.e-file-delete-btn {
    display: none !important;
}

.e-file-upload-btn:disabled {
    opacity: 0.5;
}