/* Google Fonts - Inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Inter", sans-serif;
}


#chatbot-toggler {
    position: fixed;
    bottom: 30px;
    right: 35px;
    border: none;
    height: 50px;
    width: 50px;
    display: flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #1E90FF;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    z-index: 1500;
}

body.show-chatbot #chatbot-toggler {
    transform: rotate(90deg);
}

#chatbot-toggler span {
    color: #fff;
    position: absolute;
}

#chatbot-toggler span:last-child,
body.show-chatbot #chatbot-toggler span:first-child {
    opacity: 0;
}

body.show-chatbot #chatbot-toggler span:last-child {
    opacity: 1;
}

.chatbot-popup {
    position: fixed;
    right: 35px;
    bottom: 90px;
    width: 420px;
    overflow: hidden;
    background: #fff;
    border-radius: 15px;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.2);
    transform-origin: bottom right;
    box-shadow: 0 0 128px 0 rgba(0, 0, 0, 0.1),
        0 32px 64px -48px rgba(0, 0, 0, 0.5);
    transition: all 0.1s ease;
    z-index: 2000;
}

body.show-chatbot .chatbot-popup {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}

.chat-header {
    display: flex;
    align-items: center;
    padding: 15px 22px;
    background: #1E90FF;
    justify-content: space-between;
}

.chat-header .header-info {
    display: flex;
    gap: 10px;
    align-items: center;
}

.header-info .chatbot-logo {
    width: 35px;
    height: 35px;
    padding: 6px;
    fill: #1E90FF;
    flex-shrink: 0;
    background: #fff;
    border-radius: 50%;
}

.header-info .logo-text {
    color: #fff;
    font-weight: 600;
    font-size: 1.31rem;
    letter-spacing: 0.02rem;
}

.chat-header #close-chatbot {
    border: none;
    color: #fff;
    height: 40px;
    width: 40px;
    font-size: 1.9rem;
    margin-right: -10px;
    padding-top: 2px;
    cursor: pointer;
    border-radius: 50%;
    background: none;
    transition: 0.2s ease;
}

.chat-header #close-chatbot:hover {
    background: #4169E1;
}

.chat-body {
    padding: 25px 22px;
    gap: 20px;
    display: flex;
    height: 460px;
    overflow-y: auto;
    margin-bottom: 82px;
    flex-direction: column;
    scrollbar-width: thin;
    scrollbar-color: #F0FFFF transparent;
    z-index: 2000;
}

.chat-body,
.chat-form .message-input:hover {
    scrollbar-color: #F0FFFF transparent;
}

.chat-body .message {
    display: flex;
    gap: 11px;
    align-items: center;
}

.chat-body .message .bot-avatar {
    width: 35px;
    height: 35px;
    padding: 6px;
    fill: #fff;
    flex-shrink: 0;
    margin-bottom: 2px;
    align-self: flex-end;
    border-radius: 50%;
    background: #1E90FF;
}

.chat-body .message .message-text {
    padding: 12px 16px;
    max-width: 75%;
    font-size: 0.95rem;
}

.chat-body .bot-message.thinking .message-text {
    padding: 2px 16px;
}

.chat-body .bot-message .message-text {
    background: #F2F2FF;
    color:black;
    border-radius: 13px 13px 13px 3px;
}

.chat-body .user-message {
    flex-direction: column;
    align-items: flex-end;
}

.chat-body .user-message .message-text {
    color: #fff;
    background: #1E90FF;
    border-radius: 13px 13px 3px 13px;
}

.chat-body .user-message .attachment {
    width: 50%;
    margin-top: -7px;
    border-radius: 13px 3px 13px 13px;
}

.chat-body .bot-message .thinking-indicator {
    display: flex;
    gap: 4px;
    padding-block: 15px;
}

.chat-body .bot-message .thinking-indicator .dot {
    height: 7px;
    width: 7px;
    opacity: 0.7;
    border-radius: 50%;
    background: #6F6BC2;
    animation: dotPulse 1.8s ease-in-out infinite;
}

.chat-body .bot-message .thinking-indicator .dot:nth-child(1) {
    animation-delay: 0.2s;
}

.chat-body .bot-message .thinking-indicator .dot:nth-child(2) {
    animation-delay: 0.3s;
}

.chat-body .bot-message .thinking-indicator .dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes dotPulse {
    0%, 44% { transform: translateY(0); }
    28% { opacity: 0.4; transform: translateY(-4px); }
    44% { opacity: 0.2; }
}

.chat-footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: #fff;
    padding: 15px 22px 20px;
}

.chat-footer .chat-form {
    display: flex;
    align-items: center;
    position: relative;
    background: #fff;
    border-radius: 32px;
    outline: 1px solid #CCCCE5;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.06);
    transition: 0s ease, border-radius 0s;
}

.chat-form:focus-within {
    outline: 2px solid #1E90FF;
}

.chat-form .message-input {
    width: 100%;
    height: 47px;
    outline: none;
    resize: none;
    border: none;
    max-height: 180px;
    scrollbar-width: thin;
    border-radius: inherit;
    font-size: 0.95rem;
    padding: 14px 0 12px 18px;
    scrollbar-color: transparent transparent;
    background-color: white;
    color:black;
}

.chat-form .chat-controls {
    gap: 3px;
    height: 47px;
    display: flex;
    padding-right: 6px;
    align-items: center;
    align-self: flex-end;
}

.chat-form .chat-controls button {
    height: 35px;
    width: 35px;
    border: none;
    cursor: pointer;
    color: #706DB0;
    border-radius: 50%;
    font-size: 1.15rem;
    background: none;
    transition: 0.2s ease;
}

.chat-form .chat-controls button:hover,
body.show-emoji-picker .chat-controls #emoji-picker {
    color: #4169E1;
    background: #f1f1ff;
}

.chat-form .chat-controls #send-message {
    color: #fff;
    display: none;
    background: #1E90FF;
}

.chat-form .chat-controls #send-message:hover {
    background: #4169E1;
}

.chat-form .message-input:valid~.chat-controls #send-message {
    display: block;
}

.chat-form .file-upload-wrapper {
    position: relative;
    height: 35px;
    width: 35px;
}

.chat-form .file-upload-wrapper :where(button, img) {
    position: absolute;
}

.chat-form .file-upload-wrapper img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.chat-form .file-upload-wrapper #file-cancel {
    color: #ff0000;
    background: #fff;
}

.chat-form .file-upload-wrapper :where(img, #file-cancel),
.chat-form .file-upload-wrapper.file-uploaded #file-upload {
    display: none;
}

.chat-form .file-upload-wrapper.file-uploaded img,
.chat-form .file-upload-wrapper.file-uploaded:hover #file-cancel {
    display: block;
}

em-emoji-picker {
    position: absolute;
    left: 50%;
    top: -337px;
    width: 100%;
    max-width: 350px;
    visibility: hidden;
    max-height: 330px;
    transform: translateX(-50%);
}

body.show-emoji-picker em-emoji-picker {
    visibility: visible;
}


/* Responsive media query for mobile screens */
@media (max-width: 520px) {

    #chatbot-toggler {
        right: 20px;
        bottom: 20px;
    }
    .chatbot-popup {
        right: 0;
        bottom: 0;
        height: 100%;
        border-radius: 0;
        width: 100%;
    }
    .chatbot-popup .chat-header {
        padding: 12px 15px;
    }
    .chat-body {
        height: calc(90% - 55px);
        padding: 25px 15px;
    }
    .chat-footer {
        padding: 10px 15px 15px;
    }
    .chat-form .file-upload-wrapper.file-uploaded #file-cancel {
        opacity: 0;
    }
}

/* AI-Chatbox.css - Enhancements and Dark Mode */

/* General Enhancements */
.chatbot-popup {
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15),
        0 10px 40px -10px rgba(0, 0, 0, 0.2);
    border: 1px solid #e0e0e0; /* Subtle border for light mode */
}

.chat-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05); /* Subtle separator */
}

.chat-header .logo-text {
    font-weight: 500; /* Slightly less bold for a cleaner look */
}

.chat-body .message .message-text {
    box-shadow: 0 1px 3px rgba(0,0,0,0.05); /* Subtle shadow for messages */
}

.chat-footer {
    border-top: 1px solid #e0e0e0; /* Subtle separator */
    background-color: #f9f9f9; /* Slightly different background for footer in light mode */
}

.chat-form .message-input {
    background-color: #fff; /* Ensure input is white in light mode */
    color: #333;
}

.chat-form .chat-controls button:hover,
body:not(.dark-theme) .chat-form .chat-controls #emoji-picker:hover { /* Specificity for light theme hover */
    background: #e9e9ff; /* Lighter hover for controls */
}


/* Dark Theme Styles for Chatbox */
body.dark-theme .chatbot-popup {
    background: #1C1C1E; /* Dark panel background */
    border: 1px solid #333; /* Darker border */
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.3),
        0 10px 40px -10px rgba(0, 0, 0, 0.4);
}

body.dark-theme #chatbot-toggler {
    background: #008060; /* Using a site accent color for dark mode */
    box-shadow: 0 0 20px rgba(0, 128, 96, 0.3);
}
body.dark-theme #chatbot-toggler:hover {
    background: #00995c;
}


body.dark-theme .chat-header {
    background: #003366; /* Dark blue header */
    border-bottom: 1px solid #2a2a2d; /* Separator for dark header */
}

body.dark-theme .chat-header .header-info .logo-text {
    color: #EAEAEA;
}

body.dark-theme .header-info .chatbot-logo {
    background: #EAEAEA; /* Light background for logo */
    fill: #003366; /* Dark blue fill for logo on light bg */
}


body.dark-theme .chat-header #close-chatbot {
    color: #EAEAEA;
}

body.dark-theme .chat-header #close-chatbot:hover {
    background: #004C99; /* Darker blue for hover */
}

body.dark-theme .chat-body {
    scrollbar-color: #555 #1C1C1E; /* Darker scrollbar */
}

body.dark-theme .chat-body .message .bot-avatar {
    background: #0059b3; /* Darker blue for bot avatar */
    fill: #EAEAEA;
}

body.dark-theme .chat-body .bot-message .message-text {
    background: #2A2A2F; /* Dark grey for bot messages */
    color: #DCDCDC;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

body.dark-theme .chat-body .user-message .message-text {
    background: #008060; /* Site accent for user messages */
    color: #FFFFFF;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

body.dark-theme .chat-footer {
    background: #1A1A1A; /* Slightly different from chatbox bg for depth */
    border-top: 1px solid #2a2a2d;
}

body.dark-theme .chat-form {
    outline: 1px solid #444444;
    background: #252528; /* Background for the form area */
}

body.dark-theme .chat-form:focus-within {
    outline: 2px solid #00ff9d; /* Site accent for focus */
}

body.dark-theme .chat-form .message-input {
    background-color: #252528; /* Dark input background */
    color: #E0E0E0;
}

body.dark-theme .chat-form .message-input:hover {
    scrollbar-color: #555 #252528;
}

body.dark-theme .chat-form .chat-controls button {
    color: #B0B0B0;
}

body.dark-theme .chat-form .chat-controls button:hover,
body.dark-theme .chat-form .chat-controls #emoji-picker:hover {
    color: #00ff9d; /* Site accent for hover */
    background: #2E2E2E;
}

body.dark-theme .chat-form .chat-controls #send-message {
    background: #00995c; /* Darker accent for send button */
    color: #FFFFFF;
}

body.dark-theme .chat-form .chat-controls #send-message:hover {
    background: #00B36B; /* Lighter accent for hover */
}

body.dark-theme .chat-form .file-upload-wrapper #file-cancel {
    color: #ff6666; /* Lighter red for cancel in dark mode */
    background: #333;
}

/* Styling for em-emoji-picker when theme is auto/dark */
/* This assumes the emoji picker uses CSS variables or classes internally that we can override,
   or that `theme: "auto"` correctly adapts it. If not, these are generic overrides. */
body.dark-theme em-emoji-picker {
    /* If the picker has specific CSS variables for theming, use them here.
       Example: --emoji-mart-background: #2D2D2D;
                --emoji-mart-text-color: #E0E0E0;
                --emoji-mart-border-color: #444;
       This is a common pattern for web components.
       For now, we rely on theme: "auto" to handle most of it.
       If specific parts are still light, you might need to inspect the component's shadow DOM
       and apply more targeted styles if possible (though shadow DOM styling from outside is limited).
    */
}

/* Minor adjustment for message thinking indicator in dark mode */
body.dark-theme .chat-body .bot-message .thinking-indicator .dot {
    background: #888BCB; /* Lighter dots for dark background */
}

/* Ensure consistent background for the chat-form area within the footer */
body.dark-theme .chat-footer .chat-form {
    background: #252528; /* Explicitly set form background */
}