/* Theme for chat */

:root {
    /* Primary Colours */
    --chat-theme-btn-emphasis-background: #FBE3D6;
    --chat-theme-btn-emphasis-foreground: black;
    --chat-theme-btn-normal-background: #E97132;
    --chat-theme-btn-normal-foreground: black;
    --chat-theme-btn-normal-foreground-reverse: white;
    --chat-theme-header-background: #00263A;
    --chat-theme-header-foreground: white;
    --chat-theme-footer-background: #C04F15;
    --chat-theme-footer-foreground: white;
    --chat-theme-sidebar-width: 380px;
    /* Buttons - Input/Actions area  */
    --chat-theme-light-input-action-btn-background: var(--chat-theme-btn-emphasis-background);
    --chat-theme-dark-input-action-btn-background: var(--chat-theme-btn-emphasis-background);
    --chat-theme-light-input-action-btn-foreground: var(--chat-theme-btn-emphasis-foreground);
    --chat-theme-dark-input-action-btn-foreground: var(--chat-theme-btn-emphasis-foreground);
    --chat-theme-light-input-action-btn-hover-background: var(--chat-theme-btn-normal-background);
    --chat-theme-dark-input-action-btn-hover-background: var(--chat-theme-btn-normal-background);
    --chat-theme-light-input-action-btn-hover-foreground: var(--chat-theme-btn-normal-foreground);
    --chat-theme-dark-input-action-btn-hover-foreground: var(--chat-theme-btn-normal-foreground);
    --chat-theme-light-input-action-btn-active-background: var(--chat-theme-btn-emphasis-background);
    --chat-theme-dark-input-action-btn-active-background: var(--chat-theme-btn-emphasis-background);
    --chat-theme-light-input-action-btn-active-foreground: var(--chat-theme-btn-emphasis-foreground);
    --chat-theme-dark-input-action-btn-active-foreground: var(--chat-theme-btn-normal-foreground-reverse);
    --chat-theme-all-input-action-btn-border-radius: 50%;
    /* Buttons - Header area */
    --chat-theme-light-header-btn-background: var(--chat-theme-btn-normal-background);
    --chat-theme-dark-header-btn-background: var(--chat-theme-btn-normal-background);
    --chat-theme-light-header-btn-foreground: var(--chat-theme-btn-normal-foreground);
    --chat-theme-dark-header-btn-foreground: var(--chat-theme-btn-normal-foreground);
    --chat-theme-light-header-btn-hover-background: var(--chat-theme-btn-emphasis-background);
    --chat-theme-dark-header-btn-hover-background: var(--chat-theme-btn-emphasis-background);
    --chat-theme-light-header-btn-hover-foreground: var(--chat-theme-btn-normal-foreground);
    --chat-theme-dark-header-btn-hover-foreground: var(--chat-theme-btn-normal-foreground);
    --chat-theme-light-header-btn-active-background: var(--chat-theme-btn-normal-background);
    --chat-theme-dark-header-btn-active-background: var(--chat-theme-btn-normal-background);
    --chat-theme-light-header-btn-active-foreground: var(--chat-theme-btn-normal-foreground-reverse);
    --chat-theme-dark-header-btn-active-foreground: var(--chat-theme-btn-normal-foreground-reverse);
    --chat-theme-all-header-btn-border-radius: 50%;
    /* Buttons - SEND */
    --chat-theme-light-send-btn-background: var(--chat-theme-btn-normal-background);
    --chat-theme-dark-send-btn-background: var(--chat-theme-btn-normal-background);
    --chat-theme-light-send-btn-foreground: var(--chat-theme-btn-normal-foreground);
    --chat-theme-dark-send-btn-foreground: var(--chat-theme-btn-normal-foreground);
    --chat-theme-light-send-btn-hover-background: var(--chat-theme-btn-emphasis-background);
    --chat-theme-dark-send-btn-hover-background: var(--chat-theme-btn-emphasis-background);
    --chat-theme-light-send-btn-hover-foreground: var(--chat-theme-btn-normal-foreground);
    --chat-theme-dark-send-btn-hover-foreground: var(--chat-theme-btn-normal-foreground);
    --chat-theme-all-send-btn-border-radius: 50%;
    /* Header */
    --chat-theme-light-header-bottom-border-color: #dee2e6;
    --chat-theme-dark-header-bottom-border-color: #dee2e6;
    --chat-theme-light-header-background: var(--chat-theme-header-background);
    --chat-theme-dark-header-background: transparent;
    --chat-theme-light-header-foreground: var(--chat-theme-header-foreground);
    --chat-theme-dark-header-foreground: var(--chat-theme-header-foreground);
    --chat-theme-light-header-height: 75px;
    --chat-theme-dark-header-height: 75px;
    /* Footer */
    --chat-theme-light-footer-top-border-color: transparent;
    --chat-theme-dark-footer-top-border-color: transparent;
    --chat-theme-light-footer-background: var(--chat-theme-footer-background);
    --chat-theme-dark-footer-background: var(--chat-theme-footer-background);
    --chat-theme-light-footer-foreground: var(--chat-theme-footer-foreground);
    --chat-theme-dark-footer-foreground: var(--chat-theme-footer-foreground);
    --chat-theme-light-footer-height: 45px;
    --chat-theme-dark-footer-height: 45px;
    /* Content */
    /* Note: this should equal the header height + the footer height.*/
    --chat-theme-light-content-height: 120px;
    --chat-theme-dark-content-height: 120px;
    --chat-theme-light-content-background-gradient-from: #fff1ec;
    --chat-theme-light-content-background-gradient-to: #fffefe;
    --chat-theme-dark-content-background-gradient-from: #5b3b30;
    --chat-theme-dark-content-background-gradient-to: #000000;
    /* Input Seperator */
    --chat-theme-light-input-seperator-background: var(--chat-theme-btn-normal-background);
    --chat-theme-dark-input-seperator-background: var(--chat-theme-btn-normal-background);
    --chat-theme-light-input-seperator-height: 3px;
    --chat-theme-dark-input-seperator-height: 3px;
    /* Message - Assistant*/
    --chat-theme-light-message-assistant-background: #F2F2F2;
    --chat-theme-light-message-assistant-foreground: black;
    --chat-theme-light-message-assistant-border-color: transparent;
    --chat-theme-light-message-assistant-border-thickness: 1;
    --chat-theme-light-message-assistant-border-radius: 35px;
    --chat-theme-light-message-assistant-padding: 15px 15px 15px 15px;
    --chat-theme-light-message-assistant-margin: 15px;
    --chat-theme-light-message-assistant-font-size: 1.0em;
    --chat-theme-light-message-assistant-box-shadow: 0 2px 4px #00000024, 0 0 2px #0000001f;
    --chat-theme-dark-message-assistant-background: #f5f5f52e;
    --chat-theme-dark-message-assistant-foreground: white;
    --chat-theme-dark-message-assistant-border-color: transparent;
    --chat-theme-dark-message-assistant-border-thickness: 1;
    --chat-theme-dark-message-assistant-border-radius: 35px;
    --chat-theme-dark-message-assistant-padding: 15px 15px 15px 15px;
    --chat-theme-dark-message-assistant-margin: 15px;
    --chat-theme-dark-message-assistant-font-size: 1.0em;
    --chat-theme-dark-message-assistant-box-shadow: 0 2px 4px #00000024, 0 0 2px #0000001f;
    /* Message - User*/
    --chat-theme-light-message-user-background: #F6C6AD;
    --chat-theme-light-message-user-foreground: black;
    --chat-theme-light-message-user-border-color: transparent;
    --chat-theme-light-message-user-border-thickness: 1;
    --chat-theme-light-message-user-border-radius: 35px;
    --chat-theme-light-message-user-padding: 18px 15px 15px 15px;
    --chat-theme-light-message-user-margin: 15px;
    --chat-theme-light-message-user-font-size: 1.0em;
    --chat-theme-light-message-user-box-shadow: 0 2px 4px #00000024, 0 0 2px #0000001f;
    --chat-theme-dark-message-user-background: #f6c6ada3;
    --chat-theme-dark-message-user-foreground: white;
    --chat-theme-dark-message-user-border-color: transparent;
    --chat-theme-dark-message-user-border-thickness: 1;
    --chat-theme-dark-message-user-border-radius: 35px;
    --chat-theme-dark-message-user-padding: 18px 15px 15px 15px;
    --chat-theme-dark-message-user-margin: 15px;
    --chat-theme-dark-message-user-font-size: 1.0em;
    --chat-theme-dark-message-user-box-shadow: 0 2px 4px #00000024, 0 0 2px #0000001f;
    /* Drop down Menus */
    --chat-theme-light-dropdown-item-active: var(--chat-theme-btn-normal-background);
    --chat-theme-dark-dropdown-item-active: var(--chat-theme-btn-normal-background);
    /* Input entry */
    --chat-theme-light-textarea-box-shadow: 0 0 0 .25rem rgba(192,79,21,.25);
    --chat-theme-dark-textarea-box-shadow: 0 0 0 .25rem rgba(192,79,21,.25);
    /* History */
    --chat-theme-light-history-background-gradient-from: var(--chat-theme-light-content-background-gradient-from);
    --chat-theme-light-history-background-gradient-to: var(--chat-theme-light-content-background-gradient-to);
    --chat-theme-dark-history-background-gradient-from: var(--chat-theme-dark-content-background-gradient-from);
    --chat-theme-dark-history-background-gradient-to: var(--chat-theme-dark-content-background-gradient-to);
    /* History Items*/
    --chat-theme-light-message-history-background: var(--chat-theme-light-message-assistant-background);
    --chat-theme-light-message-history-foreground: var(--chat-theme-light-message-assistant-foreground);
    --chat-theme-light-message-history-border-color: var(--chat-theme-light-message-assistant-border-color);
    --chat-theme-light-message-history-border-thickness: var(--chat-theme-light-message-assistant-border-thickness);
    --chat-theme-light-message-history-border-radius: var(--chat-theme-light-message-assistant-border-radius);
    --chat-theme-light-message-history-padding: 10px 5px 3px 12px;
    --chat-theme-light-message-history-margin: 15px 15px 15px 30px;
    --chat-theme-light-message-history-font-size: 0.85em;
    --chat-theme-light-message-history-box-shadow: var(--chat-theme-light-message-assistant-box-shadow);
    --chat-theme-dark-message-history-background: var(--chat-theme-dark-message-assistant-background);
    --chat-theme-dark-message-history-foreground: var(--chat-theme-dark-message-assistant-foreground);
    --chat-theme-dark-message-history-border-color: var(--chat-theme-dark-message-assistant-border-color);
    --chat-theme-dark-message-history-border-thickness: var(--chat-theme-dark-message-assistant-border-thickness);
    --chat-theme-dark-message-history-border-radius: var(--chat-theme-dark-message-assistant-border-radius);
    --chat-theme-dark-message-history-padding: 10px 5px 3px 12px;
    --chat-theme-dark-message-history-margin: 15px 15px 15px 30px;
    --chat-theme-dark-message-history-font-size: 0.85em;
    --chat-theme-dark-message-history-box-shadow: var(--chat-theme-dark-message-assistant-box-shadow);
    /* Header Title*/
    --chat-theme-light-header-title-color: white;
    --chat-theme-light-header-title-font-size: 1.9em;
    --chat-theme-light-header-title-font-weight: 400;
    --chat-theme-dark-header-title-color: white;
    --chat-theme-dark-header-title-font-size: 1.9em;
    --chat-theme-dark-header-title-font-weight: 400;
    /* Windows */
    --chat-theme-light-window-background: linear-gradient(360deg, var(--chat-theme-light-content-background-gradient-from) 0%, var(--chat-theme-light-content-background-gradient-to) 100%);
    --chat-theme-dark-window-background: linear-gradient(360deg, var(--chat-theme-dark-history-background-gradient-from) 0%, var(--chat-theme-dark-history-background-gradient-to) 100%);
}

/* BUTTONS - INPUT AREA */
.chat-footers > * .btn {
    border-radius: var(--chat-theme-all-input-action-btn-border-radius);
}

.theme-light > * .chat-footers > * .btn {
    background: var(--chat-theme-light-input-action-btn-background);
    color: var(--chat-theme-light-input-action-btn-foreground);
}

    .theme-light > * .chat-footers > * .btn:hover {
        background: var(--chat-theme-light-input-action-btn-hover-background);
        color: var(--chat-theme-light-input-action-btn-hover-foreground);
    }

    .theme-light > * .chat-footers > * .btn.active {
        background: var(--chat-theme-light-input-action-btn-active-background);
        color: var(--chat-theme-light-input-action-btn-active-foreground);
    }


.theme-dark > * .chat-footers > * .btn {
    background: var(--chat-theme-dark-input-action-btn-background);
    color: var(--chat-theme-dark-input-action-btn-foreground);
}

    .theme-dark > * .chat-footers > * .btn:hover {
        background: var(--chat-theme-dark-input-action-btn-hover-background);
        color: var(--chat-theme-dark-input-action-btn-hover-foreground);
    }

    .theme-dark > * .chat-footers > * .btn.active {
        background: var(--chat-theme-dark-input-action-btn-active-background);
        color: var(--chat-theme-dark-input-action-btn-active-foreground);
    }


/* BUTTONS - HEADER AREA */
.bb-top-row > * .btn {
    border-radius: var(--chat-theme-all-header-btn-border-radius);
}

.theme-light > * .bb-top-row > * .btn {
    background: var(--chat-theme-light-header-btn-background);
    color: var(--chat-theme-light-header-btn-foreground);
}

    .theme-light > * .bb-top-row > * .btn:hover {
        background: var(--chat-theme-light-header-btn-hover-background);
        color: var(--chat-theme-light-header-btn-hover-foreground);
    }

    .theme-light > * .bb-top-row > * .btn.active {
        background: var(--chat-theme-light-header-btn-active-background);
        color: var(--chat-theme-light-header-btn-active-foreground);
    }


.theme-dark > * .bb-top-row > * .btn {
    background: var(--chat-theme-dark-header-btn-background);
    color: var(--chat-theme-dark-header-btn-foreground);
}

    .theme-dark > * .bb-top-row > * .btn:hover {
        background: var(--chat-theme-dark-header-btn-hover-background);
        color: var(--chat-theme-dark-header-btn-hover-foreground);
    }

    .theme-dark > * .bb-top-row > * .btn.active {
        background: var(--chat-theme-dark-header-btn-active-background);
        color: var(--chat-theme-dark-header-btn-active-foreground);
    }

/* Btns for Offcanvas */
.theme-light > .offcanvas > * .btn {
    background: var(--chat-theme-light-header-btn-background);
    color: var(--chat-theme-light-header-btn-foreground);
    border-color: transparent;
}

    .theme-light > .offcanvas > * .btn:hover {
        background: var(--chat-theme-light-header-btn-hover-background);
        color: var(--chat-theme-light-header-btn-hover-foreground);
    }

    .theme-light > .offcanvas > * .btn.active {
        background: var(--chat-theme-light-header-btn-active-background);
        color: var(--chat-theme-light-header-btn-active-foreground);
    }


.theme-dark > .offcanvas > * .btn {
    background: var(--chat-theme-dark-header-btn-background);
    color: var(--chat-theme-dark-header-btn-foreground);
    border-color: transparent;
}

    .theme-dark > .offcanvas > * .btn:hover {
        background: var(--chat-theme-dark-header-btn-hover-background);
        color: var(--chat-theme-dark-header-btn-hover-foreground);
    }

    .theme-dark > .offcanvas > * .btn.active {
        background: var(--chat-theme-dark-header-btn-active-background);
        color: var(--chat-theme-dark-header-btn-active-foreground);
    }



/* BUTTONS - SEND */
.chat-input-send > .btn {
    border-radius: var(--chat-theme-all-send-btn-border-radius);
    width: 60px;
    height: 60px;
    padding-left: 10px;
    transform: rotate(45deg);
}

.theme-light > * .chat-input-send > .btn {
    background: var(--chat-theme-light-send-btn-background);
    color: var(--chat-theme-light-send-btn-foreground);
}

    .theme-light > * .chat-input-send > .btn:hover {
        background: var(--chat-theme-light-send-btn-hover-background);
        color: var(--chat-theme-light-send-btn-hover-foreground);
    }


.theme-dark > * .chat-input-send > .btn {
    background: var(--chat-theme-dark-send-btn-background);
    color: var(--chat-theme-dark-send-btn-foreground);
}

    .theme-dark > * .chat-input-send > .btn:hover {
        background: var(--chat-theme-dark-send-btn-hover-background);
        color: var(--chat-theme-dark-send-btn-hover-foreground);
    }

.theme-light > * .modal-dialog > * .btn {
    background: var(--chat-theme-light-input-action-btn-background);
    color: var(--chat-theme-light-input-action-btn-foreground);
    font-size: 0.9em;
    border-color: silver;
}

.theme-dark > * .modal-dialog > * .btn {
    background: var(--chat-theme-dark-input-action-btn-background);
    color: var(--chat-theme-dark-input-action-btn-foreground);
    font-size: 0.9em;
    border-color: silver;
}


/* TOP ROW */
.theme-light > * .bb-top-row {
    border-color: var(--chat-theme-light-header-bottom-border-color);
    background: var(--chat-theme-light-header-background);
    height: var(--chat-theme-light-header-height);
    color: var(--chat-theme-light-header-foreground);
}

.theme-dark > * .bb-top-row {
    border-color: var(--chat-theme-dark-header-bottom-border-color);
    background: var(--chat-theme-dark-header-background);
    height: var(--chat-theme-dark-header-height);
    color: var(--chat-theme-dark-header-foreground);
}

/* FOOTER */
.theme-light > * .bb-footer {
    border: 1px solid var(--chat-theme-light-footer-top-border-color);
    background-color: var(--chat-theme-light-footer-background) !important;
    height: var(--chat-theme-light-footer-height);
    color: var(--chat-theme-light-footer-foreground);
}

.theme-dark > * .bb-footer {
    border: 1px solid var(--chat-theme-dark-footer-top-border-color);
    background-color: var(--chat-theme-dark-footer-background) !important;
    height: var(--chat-theme-dark-footer-height);
    color: var(--chat-theme-dark-footer-foreground);
}

/* CONTENT */
.theme-light > * article.p-4 {
    height: calc(100% - var(--chat-theme-light-content-height));
    background: linear-gradient(360deg, var(--chat-theme-light-content-background-gradient-from) 0%, var(--chat-theme-light-content-background-gradient-to) 100%);
}

.theme-dark > * article.p-4 {
    height: calc(100% - var(--chat-theme-dark-content-height));
    background: linear-gradient(360deg, var(--chat-theme-dark-content-background-gradient-from) 0%, var(--chat-theme-dark-content-background-gradient-to) 100%);
}

.theme-light > * .chat-input-seperator {
    background-color: var(--chat-theme-light-input-seperator-background);
    border-color: var(--chat-theme-light-input-seperator-background);
    height: var(--chat-theme-light-input-seperator-height);
}

.theme-dark > * .chat-input-seperator {
    background-color: var(--chat-theme-dark-input-seperator-background);
    border-color: var(--chat-theme-dark-input-seperator-background);
    height: var(--chat-theme-dark-input-seperator-height);
}

/* Messages - Assistant */

.theme-light > * .message-content.message-assistant {
    background-color: var(--chat-theme-light-message-assistant-background);
    color: var(--chat-theme-light-message-assistant-foreground);
    font-size: var(--chat-theme-light-message-assistant-font-size);
    border-color: var(--chat-theme-light-message-assistant-border-color);
    border-width: var(--chat-theme-light-message-assistant-border-thickness);
    border-radius: var(--chat-theme-light-message-assistant-border-radius);
    padding: var(--chat-theme-light-message-assistant-padding);
    margin: var(--chat-theme-light-message-assistant-margin);
    box-shadow: var(--chat-theme-light-message-assistant-box-shadow);
}

.theme-dark > * .message-content.message-assistant {
    background-color: var(--chat-theme-dark-message-assistant-background);
    color: var(--chat-theme-dark-message-assistant-foreground);
    font-size: var(--chat-theme-dark-message-assistant-font-size);
    border-color: var(--chat-theme-dark-message-assistant-border-color);
    border-width: var(--chat-theme-dark-message-assistant-border-thickness);
    border-radius: var(--chat-theme-dark-message-assistant-border-radius);
    padding: var(--chat-theme-dark-message-assistant-padding);
    margin: var(--chat-theme-dark-message-assistant-margin);
    box-shadow: var(--chat-theme-dark-message-assistant-box-shadow);
}

/* Messages - User */

.theme-light > * .message-content.message-user {
    background-color: var(--chat-theme-light-message-user-background);
    color: var(--chat-theme-light-message-user-foreground);
    font-size: var(--chat-theme-light-message-user-font-size);
    border-color: var(--chat-theme-light-message-user-border-color);
    border-width: var(--chat-theme-light-message-user-border-thickness);
    border-radius: var(--chat-theme-light-message-user-border-radius);
    padding: var(--chat-theme-light-message-user-padding);
    margin: var(--chat-theme-light-message-user-margin);
    box-shadow: var(--chat-theme-light-message-user-box-shadow);
}

.theme-dark > * .message-content.message-user {
    background-color: var(--chat-theme-dark-message-user-background);
    color: var(--chat-theme-dark-message-user-foreground);
    font-size: var(--chat-theme-dark-message-user-font-size);
    border-color: var(--chat-theme-dark-message-user-border-color);
    border-width: var(--chat-theme-dark-message-user-border-thickness);
    border-radius: var(--chat-theme-dark-message-user-border-radius);
    padding: var(--chat-theme-dark-message-user-padding);
    margin: var(--chat-theme-dark-message-user-margin);
    box-shadow: var(--chat-theme-dark-message-user-box-shadow);
}


/* Messages - History */

.theme-light > * .history-row-content {
    background-color: var(--chat-theme-light-message-history-background);
    color: var(--chat-theme-light-message-history-foreground);
    font-size: var(--chat-theme-light-message-history-font-size);
    border-color: var(--chat-theme-light-message-history-border-color);
    border-width: var(--chat-theme-light-message-history-border-thickness);
    border-radius: var(--chat-theme-light-message-history-border-radius);
    padding: var(--chat-theme-light-message-history-padding);
    margin: var(--chat-theme-light-message-history-margin);
    box-shadow: var(--chat-theme-light-message-history-box-shadow);
}

.theme-dark > * .history-row-content {
    background-color: var(--chat-theme-dark-message-history-background);
    color: var(--chat-theme-dark-message-history-foreground);
    font-size: var(--chat-theme-dark-message-history-font-size);
    border-color: var(--chat-theme-dark-message-history-border-color);
    border-width: var(--chat-theme-dark-message-history-border-thickness);
    border-radius: var(--chat-theme-dark-message-history-border-radius);
    padding: var(--chat-theme-dark-message-history-padding);
    margin: var(--chat-theme-dark-message-history-margin);
    box-shadow: var(--chat-theme-dark-message-history-box-shadow);
}

.theme-light > * .dropdown-item.active,
.theme-light > * .dropdown-item:active {
    background-color: var(--chat-theme-light-dropdown-item-active);
}

.theme-dark > * .dropdown-item.active,
.theme-dark > * .dropdown-item:active {
    background-color: var(--chat-theme-dark-dropdown-item-active);
}

.theme-light > * .form-control:focus {
    box-shadow: var(--chat-theme-light-textarea-box-shadow);
}
.theme-dark > * .form-control:focus {
    box-shadow: var(--chat-theme-dark-textarea-box-shadow);
}

.theme-light > * .history-items-container {
    background: linear-gradient(360deg, var(--chat-theme-light-history-background-gradient-from) 0%, var(--chat-theme-light-history-background-gradient-to) 100%);
}
.theme-dark > * .history-items-container {
    background: linear-gradient(360deg, var(--chat-theme-dark-history-background-gradient-from) 0%, var(--chat-theme-dark-history-background-gradient-to) 100%);
}

/* Header Title */

.theme-light > * .header-title {
    color: var(--chat-theme-light-header-title-color);
    font-size: var(--chat-theme-light-header-title-font-size);
    font-weight: var(--chat-theme-light-header-title-font-weight);
}

.theme-dark > * .header-title {
    color: var(--chat-theme-dark-header-title-color);
    font-size: var(--chat-theme-dark-header-title-font-size);
    font-weight: var(--chat-theme-dark-header-title-font-weight);
}


.side-bar-area {
    width: var(--chat-theme-sidebar-width);
}

.history-items-search > .history-items-search-entry {
    width: calc(var(--chat-theme-sidebar-width) - 105px);
}

.history-items-search > .history-items-search-clear {
    left: calc(var(--chat-theme-sidebar-width) - 100px);
}

.history-items-search > .history-items-close-icon {
    left: calc(var(--chat-theme-sidebar-width) - 40px);
}

.theme-light > * .offcanvas {
    background: var(--chat-theme-light-window-background);
}

.theme-dark > * .offcanvas {
    background: var(--chat-theme-dark-window-background);
}

.offcanvas.theme-light.show {
    background: var(--chat-theme-light-window-background);
}

.offcanvas.theme-dark.show {
    background: var(--chat-theme-dark-window-background);
}

.offcanvas > * .card {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: var(--chat-theme-footer-background);
    border-radius: 39px;
}

::-webkit-scrollbar {
    width: 8px;
}

/*::-webkit-scrollbar:hover {
    width: 10px;
}*/

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: var(--chat-theme-footer-background);
}

.bb-scrollbar {
    scrollbar-color: unset;
}


.theme-dark > * .history-items-search {
    background: var(--chat-theme-dark-header-background);
}

.theme-light > * .history-items-search {
    background: var(--chat-theme-light-header-background);
}


.theme-dark > * .side-bar-footer {
    border: 1px solid var(--chat-theme-dark-footer-top-border-color);
    background-color: var(--chat-theme-dark-footer-background) !important;
    height: var(--chat-theme-dark-footer-height);
    color: var(--chat-theme-dark-footer-foreground);
}

.theme-light > * .side-bar-footer {
    border: 1px solid var(--chat-theme-light-footer-top-border-color);
    background-color: var(--chat-theme-light-footer-background) !important;
    height: var(--chat-theme-light-footer-height);
    color: var(--chat-theme-light-footer-foreground);
}

.theme-light > * .history-items-search > .history-items-close-icon {
    color: var(--chat-theme-light-header-foreground);
    border-bottom-color: var(--chat-theme-light-header-background);
}

.theme-dark > * .history-items-search > .history-items-close-icon {
    color: var(--chat-theme-dark-header-foreground);
    border-bottom-color: var(--chat-theme-dark-header-background);
}