.chatbot {
    display        : flex;
    flex-direction : column;
    gap            : 1.875em;
    color          : var(--darkgray);
}

.chatbot-row {
    display     : flex;
    align-items : flex-start;
    gap         : 20px;
}

.chatbot-row.is-user {
    flex-direction : row-reverse;
}

.chatbot-avatar {
    width           : 40px;
    height          : 40px;
    border-radius   : 50%;
    flex-shrink     : 0;
    display         : flex;
    align-items     : center;
    justify-content : center;
}

.chatbot-avatar.bot {
    background : url('/gfx/Chatbot/icon_itrk.png') center / contain no-repeat,
    radial-gradient(closest-side at 50% 50%, #f7f7f7 0%, #ffffff 19%, #e6e6e6 100%);
    border     : 2px solid var(--primary-color);
}

.chatbot-avatar.user {
    border     : 1px solid var(--lightgray-4);
    background : #ffffff;
    color      : var(--darkgray);
}

.chatbot-bubble {
    max-width   : 75%;
    line-height : 1.875;
}

.chatbot-bubble p:last-of-type {
    margin-bottom : 0 !important;
}

.is-user .chatbot-bubble {
    background    : var(--lightgray-1);
    border-radius : 20px 0px 20px 20px;
    padding       : 1em;
}

@media (max-width : 500px) {
    .chatbot-bubble {
        max-width : 100%;
        hyphens   : auto;
    }
}

.chatbot #conversation .empty-message {
    font-size   : 1.75rem;
    line-height : 1.4;
}

.chatbot #conversation > div {
    margin-bottom : 30px;
}

.chatbot #conversation > div:last-of-type {
    margin-bottom : 0px;
}

.chatbot #conversation .references {
    margin-top      : 20px;
    padding-top     : 20px;
    border-top      : 1px solid var(--lightgray-border);
    font            : var(--font-xs);
    margin-bottom   : 0;
    border-spacing  : 10px 5px;
    border-collapse : separate;
    width           : 100%;
}

.chatbot .message-input {
    border           : 1px solid var(--lightgray-border);
    border-radius    : var(--itrk-border-radius);
    background-color : white;
    display          : flex;
    align-items      : center;
    position         : relative;
}

.chatbot .message-input textarea {
    border-radius : 20px;
    padding       : 10px 15px;
    resize        : none;
    outline       : none;
    border        : none;
    flex          : auto 1 1;
    overflow      : visible;
}

.chatbot .message-input .itrk-button {
    font-size : 19px;
    position  : absolute;
    top       : 0;
    bottom    : 0;
    right     : 0px;
}

.chatbot .message-input i {
    align-self : center;
    font-size  : inherit;
}

.chatbot .message-input .button-loading i {
    color : transparent !important;
}

.chatbot .message-errors {
    margin-top : 1em;
    color      : var(--color-error);
}

.chatbot #input-length {
    text-align : right;
    color      : var(--lightgray-4);
}

#send-message-form textarea[name=message] {
    resize     : none;
    overflow-y : auto;
    max-height : 150px;
}

.chatbot #send-message-form {
    margin : .5em 0 1em;
}

#chatbot #send-message-form {
    margin : 2.5em 0 1em;
}

.chatbot .chatbot-note {
    font         : var(--font-xs);
    color        : var(--lightgray-4);
    text-align   : center;
    margin-left  : -10px;
    margin-right : -10px;
}

#chatbot-global-link {
    cursor     : pointer;
    border     : none;
    background : none;
}

#chatbot-global-link .name-badge {
    z-index          : 1;
    background-color : var(--primary-color);
    color            : white;
    height           : 33px;
    width            : 100px;
    border-radius    : 20px;
    align-content    : center;
    text-align       : center;
    opacity          : 1;
    transition       : opacity ease 0.2s;
    position         : relative;
}

#chatbot-global-link .link-icon {
    position      : relative;
    width         : 70px;
    height        : 70px;
    border-radius : 50%;
    text-align    : center;
    align-content : center;
    border        : 2px solid var(--primary-color);
    background    : radial-gradient(closest-side at 50% 50%, #f7f7f7 0%, #ffffff 19%, #e6e6e6 100%);
    margin        : 0 auto -8px auto;
    z-index       : 1001;
}

#chatbot-global-link .link-icon {
    transition : transform 0.25s ease, box-shadow 0.3s ease;
}

#chatbot-global-link:hover .link-icon {
    transform  : scale(1.02);
    box-shadow : 0 0 20px rgba(239, 125, 0, 0.3);
}

.chatbot-loading {
    text-align : center;
    padding    : 2rem;
    color      : var(--lightgray-4);
}

#chatbot-overlay {
    display         : none;
    position        : fixed;
    inset           : 0;
    z-index         : 10000;
    background      : rgba(0, 0, 0, 0.3);
    backdrop-filter : blur(3px);
}

#chatbot-overlay.active {
    display         : flex;
    align-items     : center;
    justify-content : center;
}

.chatbot-overlay-panel {
    background     : #ffffff;
    border-radius  : var(--itrk-border-radius-outer);
    box-shadow     : 2px 2px 4px #00000029;
    width          : 90%;
    max-width      : 960px;
    height         : 100%;
    max-height     : 92vh;
    display        : flex;
    flex-direction : column;
    overflow       : hidden;
}

.chatbot-overlay-header {
    padding         : 20px;
    flex-shrink     : 0;
    display         : flex;
    box-shadow      : 0 3px 6px #00000029;
    align-items     : center;
    justify-content : space-between;
    border-bottom   : 1px solid var(--lightgray-border);
    position        : relative;
    z-index         : 10;
}

.chatbot-overlay-header-title {
    color       : var(--darkgray);
    text-align  : center;
    width       : 100%;
    font-size   : 1rem;
    line-height : 1.25;
}

.chatbot-overlay-header-title > span {
    white-space   : nowrap;
    hyphens       : manual;
    word-break    : normal;
    overflow-wrap : break-word;
}

.chatbot-overlay-close {
    background : none;
    border     : none;
    font-size  : 2.5rem;
    cursor     : pointer;
    color      : var(--darkgray);
    padding    : 0 0 0 20px;
}

.chatbot-overlay-body {
    flex       : 1;
    overflow-y : auto;
    padding    : 40px;
}

.chatbot-overlay-header {
    padding     : 20px 40px;
    flex-shrink : 0;
}

.chatbot-overlay-footer {
    box-shadow  : 0 -8px 16px rgba(255, 255, 255, 0.9);
    padding     : 10px 40px 20px 40px;
    flex-shrink : 0;
    position    : relative;
}

.chatbot-restart {
    margin-top : 20px;
}

.chatbot-restart-btn {
    padding        : 9px 11px 9px 5px;
    text-transform : none;
}

body.chatbot-overlay-open {
    overflow : hidden;
}

.chatbot-scroll-hint {
    position       : absolute;
    top            : -50px;
    left           : 50%;
    transform      : translateX(-50%);
    box-shadow     : 0 2px 8px rgba(0, 0, 0, 0.25);
    cursor         : pointer;
    opacity        : 0;
    transition     : opacity 0.3s;
    pointer-events : none;
    z-index        : 10;
}

.chatbot-scroll-hint.visible {
    opacity        : 1;
    pointer-events : auto;
}

@media all and (max-width : 1300px) {
    #chatbot-global-link .link-icon {
        width  : 57px;
        height : 57px;
    }

    #chatbot-global-link .name-badge {
        width : 85px;
    }
}

@media all and (max-width : 767px) {
    .chatbot-overlay-header {
        padding : 20px;
    }

    .chatbot-overlay-footer {
        padding : 10px 20px 20px 20px;
    }

    .chatbot-overlay-body {
        flex       : 1;
        overflow-y : auto;
        padding    : 20px;
    }

    .chatbot-overlay-panel {
        width         : 100%;
        max-width     : 100%;
        height        : 100vh;
        max-height    : 100vh;
        border-radius : 0;
    }
}

@media all and (max-width : 576px) {
    .chatbot-overlay-header-title {
        font-size : 16px;
    }

    .chatbot-row {
        gap : 10px;
    }

    .chatbot-restart {
        margin-top : 10px;
    }

    .chatbot .chatbot-note {
        margin-left  : -15px;
        margin-right : -15px;
    }

    .chatbot .message-input textarea {
        padding : 10px 25px;
    }
}

@media all and (max-width : 320px) {
    .chatbot-overlay-header-title > span {
        white-space   : wrap;
        hyphens       : manual;
        word-break    : normal;
        overflow-wrap : break-word;
    }

}