/* 
   ==================================================
      CUSTOM CSS FOR AEVOLUTA CHATBOT
   ================================================== 
*/

/* ================ Custom CSS for autocomplete suggestions ================= */

.autocomplete-suggestions {
    list-style-type: none;
    padding: 0;
    margin: 0;
    max-height: 200px;
    overflow-y: auto;
}
.autocomplete-suggestions li {
    padding: 8px;
    cursor: pointer;
}

/* Common hover styles */
.autocomplete-suggestions li:hover {
    cursor: pointer;
}

/* Theme-specific hover colors */
html.light .autocomplete-suggestions li:hover {
    color: #DAA520;
}

html.dark .autocomplete-suggestions li:hover {
    color: gold;
}
/* ================ End of custom CSS for autocomplete suggestions ================= */



/* Hide theme toggle button */
/* #theme-toggle {
    display: none !important;
} */
/* End of hide theme toggle button */


/* ================ Theme-specific CSS variables ================= */
html.light * {
    --aev-shadow-color: none;
    --aev-text-shadow-color: none;
}

html.dark * {
    --aev-shadow-color: #000000;
    --aev-text-shadow-color: #000000;
}
/* ================ End of theme-specific CSS variables ================= */


.flex:has(.logo) {
    justify-content: center !important;
    margin-top: 30px;
}

.logo {
    width: 180px !important;
}

/* Theme-specific background images for main area */
main.bg-background, #root {
    background-size: cover;
    background-repeat: no-repeat;
}

html.dark main.bg-background, #root {
    background-image: url('/public/images/bg_dark.png');
}

html.light main.bg-background, #root {
    background-image: url('/public/images/bg_light.png');
}

html.light .text-sidebar-foreground {
    background-color: #5EACAC !important;
}


html.light #user-nav-button .bg-primary {
    background-color: #951B81;
}


/* Theme-specific colors for .bg-accent */
html.light .bg-accent {
    background-color: #2A235C;
    color: #D7F8FD;
}

html.dark .bg-accent {
    background-color: transparent !important;
    box-shadow: 2px 2px 20px var(--aev-shadow-color);
    background-image: linear-gradient(to top right, #FEFEFE, #D7F8FD);
    color: #29235C;
}

/* Common styles for .bg-card */
html.dark .bg-card {
    background-color: #7F2A4F !important;
    box-shadow: 2px 2px 20px var(--aev-shadow-color) !important;
}

/* Theme-specific colors for .bg-card */
html.light .bg-card {
    background-color: #CA3F7F !important;
}




/* Theme-specific styles for .text-muted-foreground */
.text-muted-foreground {
    text-shadow: 2px 2px 20px var(--aev-shadow-color) !important;
}

/* Theme-specific colors for .text-muted-foreground */
html.light .text-muted-foreground {
    color: #2A235C !important;
}

html.dark .text-muted-foreground {
    color: #FFFFFF !important;
}

html.light #message-composer {
    background-color: lightgray !important;
    color: #2A235C !important;
}

html.light input[name="email"], html.light input[name="password"] {
    background-color: lightgray !important;
}




html.light .ai-message button {
    background-image: none !important;
    background-color: #FFFFFF !important;
    color: #2A235C !important;
}

html.light .ai-message .items-center.flex-wrap > button[id] {
    background-image: none !important;
    color: #FFFFFF !important;
    background-color: #2A235C !important;
    margin-left: 0.5rem !important;
}


html.light .ai-message button:hover {
    background-image: inherit !important;
    color: #CD37A5 !important;
}

/* ---- Quick-reply action buttons — match feedback button appearance ---- */
button:not([id]):not([data-sidebar]):not(.positive-feedback-off):not(.negative-feedback-off) {
    background: none !important;
    background-image: none !important;
    border: none !important;
    padding: 0.25rem 0.5rem !important;
    font-size: 0.8125rem !important;
    font-weight: 400 !important;
    cursor: pointer !important;
}

html.light button:not([id]):not([data-sidebar]):not(.positive-feedback-off):not(.negative-feedback-off) {
    color: #2A235C !important;
}

html.light button:not([id]):not([data-sidebar]):not(.positive-feedback-off):not(.negative-feedback-off):hover {
    color: #CD37A5 !important;
}

html.dark button:not([id]):not([data-sidebar]):not(.positive-feedback-off):not(.negative-feedback-off) {
    color: #FFFFFF !important;
}

html.dark button:not([id]):not([data-sidebar]):not(.positive-feedback-off):not(.negative-feedback-off):hover {
    color: #FFC966 !important;
}




html.light .text-sidebar-foreground button {
    background-image: inherit !important;
    color: inherit !important;
}

html.light .text-sidebar-foreground button:hover {
    background-image: inherit !important;
    color: inherit !important;
}


#message-composer button#chat-submit {
    background-image: linear-gradient(to right, #EF593E, #CF39A2);
}

button[type="submit"] {
    background-image: linear-gradient(to right, #EF593E, #CF39A2);
}

button[type="submit"]:hover {
    background-image: linear-gradient(to right, #CF39A2, #EF593E) !important;
}


div[data-step-type="assistant_message"], div[data-step-type="system_message"], div[data-step-type="tool"]{
    text-shadow: 1px 1px 8px var(--aev-shadow-color);
}

/* Common styles for system messages */
div[data-step-type="system_message"] {
    font-variant: small-caps;
    font-style: italic;
}

/* Theme-specific colors for system messages */
html.light div[data-step-type="system_message"] {
    color: #CD37A5 !important;
}

html.dark div[data-step-type="system_message"] {
    color: #87CEEB !important;
}

/* Common styles for tool buttons */
div[data-step-type="tool"] button {
    font-variant: small-caps;
    font-style: italic;
}

/* Theme-specific colors for tool buttons */
html.light div[data-step-type="tool"] button {
    color: #6AC6BF !important;
}

html.dark div[data-step-type="tool"] button {
    color: #90EE90 !important;
}

/* Common styles for tool articles */
div[data-step-type="tool"] div[role="article"] {
    font-family: 'Courier New', Courier, monospace;
    line-height: 1rem;
}

div[data-step-type="system_message"] img[alt^="Avatar"], div[data-step-type="tool"] img[alt^="Avatar"] {
    display: none;
}


div[data-step-type="user_message"] .bg-accent:has(>textarea){
    box-shadow: none !important;
}

div[id^="step-"] {
    text-shadow: inherit;
}

    div[id^="step-"] .w-5 {
        width: 24px;
    }

    div[id^="step-"] .h-5 {
        height: 24px;
    }

    /* Common styles for step images */
    div[id^="step-"] img {
        width: 24px;
        height: 24px;
    }

    /* Theme-specific background for step images */
    html.light div[id^="step-"] img {
        background-color: white;
    }

    html.dark div[id^="step-"] img {
        background-color: #333333;
    }

/* Theme-specific link colors */
html.light a {
    color: #2A235C !important;
}

html.dark a {
    color: #FFC966 !important;
}

html.light a:hover {
    color: #DC755E !important;
    text-decoration: underline !important;
}

html.dark a:hover {
    color: #FF8A5B !important;
    text-decoration: underline !important;
}

/* Theme-specific dialog colors */
html.light div[role="dialog"] {
    background-color: #DEDEE6;
}

html.dark div[role="dialog"] {
    background-color: #2A235C;
}

html.light div[role="dialog"] button.bg-background {
    background-color: inherit;
}

html.dark div[role="dialog"] button.bg-background {
    background-color: #CC9933 !important;
}

/* Theme-specific sidebar colors */
html.light .bg-sidebar {
    background-color: inherit;
}

html.dark .bg-sidebar {
    background-color: #2A235C !important;
}

html.light div[data-sidebar="group-label"] span {
    color: #DEDEE6 !important;
}

/* Common styles for sidebar menu items */
li[data-sidebar="menu-item"] {
    background-color: transparent !important;
    border: none !important;
}

.bg-gradient-to-l {
    background-image: none !important;
}



/* Theme-specific table styles */
html.light th.text-muted-foreground {
    color: #FFFFFF !important;
}

html.light tr:not(:has(th)):nth-child(odd) {
    background-color: #F6F6F9 !important;
}
html.light tr:not(:has(th)):nth-child(even) {
    background-color: #DEDEE6 !important;
}

html.light #attachments .bg-card {
    background-color: dimgray !important;
    color: white !important;
}