:root {
    --bg-dark: #131314;
    --input-bg: #1e1f20;
    --text-main: #e3e3e3;
    --bot-msg-bg: transparent;
    --user-msg-bg: #1e1f20;
}

ul, li {
    margin: 0;
    padding: 0;
}

/* Allow bullets and proper spacing specifically inside chat messages */
.bot-message .text ul, 
.bot-message .text ol {
    margin-left: 25px; /* Pushes the list inward */
    margin-bottom: 10px;
    margin-top: 5px;
}

.bot-message .text li {
    list-style-type: disc; /* Restores the actual bullet points */
    margin-bottom: 6px;    /* Adds breathing room between list items */
}

/* ========================================= */
/* LIGHT THEME OVERRIDES                     */
/* ========================================= */

body.light-theme {
    /* Base color overrides */
    --bg-dark: #f0f4f9;       /* Google-style light background */
    --input-bg: #ffffff;      /* Pure white input box */
    --text-main: #1f1f1f;     /* Dark gray/black text */
    --bot-msg-bg: transparent;
    --user-msg-bg: #e3e8f0;   /* Light blue/gray for user bubbles */
    --neon-cyan: #4285f4;     /* Switch glow to solid blue */
    
    /* Background gradient for light mode */
    background-image: radial-gradient(circle at 50% 0%, rgba(66, 133, 244, 0.15), transparent 50%);
}
body.light-theme .footer-credit {
    color: #5f6368;
}
body.light-theme .footer-credit {
    color: #5f6368;
}
/* Keeps the text links solid and easy to read on bright light backgrounds */
body.light-theme .link-kms {
    color: #e2a100; 
}
body.light-theme .link-author {
    color: #d93025; 
}

/* Add inside LIGHT THEME OVERRIDES */
body.light-theme .apps-popup { background: #f0f4f9; border: 1px solid rgba(0,0,0,0.1); box-shadow: 0 10px 30px rgba(0,0,0,0.15); }
body.light-theme .app-item { color: #1f1f1f; }
body.light-theme .app-item:hover { background: rgba(0, 0, 0, 0.05); }

/* Adjust text colors for light mode */
body.light-theme .header-title h2 { color: #1f1f1f; text-shadow: none; }
body.light-theme .icon-btn { color: #5f6368; }
body.light-theme .icon-btn:hover { background: rgba(0, 0, 0, 0.08); color: #1f1f1f; }
body.light-theme #user-input::placeholder { color: #888; }
body.light-theme #send-btn { color: #888; }
body.light-theme #send-btn:hover { background: rgba(0, 0, 0, 0.08); color: #4285f4; }

/* Adjust Side Menu & Modals for light mode */
body.light-theme .side-menu,
body.light-theme .modal-content {
    background: #f0f4f9;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.15);
}
body.light-theme .menu-header h3,
body.light-theme .modal-header h3,
body.light-theme .history-item { color: #1f1f1f; }
body.light-theme .history-item:hover { background: rgba(0, 0, 0, 0.05); }
body.light-theme .menu-header, body.light-theme .menu-footer { border-color: rgba(0,0,0,0.1); }

* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
}

body {
    background-color: var(--bg-dark);
    /* Subtle blue glow at the top center like Gemini */
    background-image: radial-gradient(circle at 50% 0%, rgba(30, 60, 110, 0.4), transparent 50%);
    color: var(--text-main);
    height: 100vh;
    overflow: hidden;
}
/* Parent container takes total browser size */
.app-fullscreen {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.header-brand {
    display: flex;
    align-items: center;
}

/* Full Width Header */
.chat-header { 
    width: 100%;
    padding: 15px 25px; 
    display: flex; 
    justify-content: space-between;
    align-items: center; 
    background: transparent;
    border-bottom: none;
    z-index: 10;
}
.header-logo {
    width: 60px !important;  /* Increase this number if you want it even bigger */
    height: 60px !important; /* Keep it the same as width to maintain a perfect square */
    object-fit: contain;     /* Ensures the GIF does not stretch or squish */
    border-radius: 5px;      /* Optional: gives the GIF slightly smooth corners */
}

/* ========================================= */
/* 9-DOTS APPS MENU HOVER POPUP              */
/* ========================================= */
.apps-menu-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.apps-popup {
    position: absolute;
    top: 45px; /* Drops it right below the header */
    right: -20px; 
    width: 280px;
    background: rgba(16, 16, 26, 0.95);
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
    border-radius: 16px;
    padding: 16px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
    
    /* Animation defaults (Hidden) */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 200;
}

/* Trigger animation on hover */
.apps-menu-container:hover .apps-popup {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.app-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--text-main);
    padding: 12px 5px;
    border-radius: 12px;
    transition: background 0.2s;
}

.app-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.app-icon {
    font-size: 22px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-bottom: 8px;
}
.app-icon-img {
    width: 40px;
    height: 40px;
    object-fit: contain; /* Ensures the PNG doesn't stretch or warp */
    margin-bottom: 8px;
    border-radius: 8px; /* Gives the image slightly rounded, smooth corners */
}

.app-label {
    font-size: 0.75rem;
    text-align: center;
    font-weight: 500;
}

/* New Greeting Style */
.zero-state-greeting {
    text-align: center;
    margin-top: 15vh;
    animation: fadeIn 0.5s ease-out;
}
.zero-state-greeting h1 {
    font-size: 2.5rem;
    font-weight: 500;
    background: linear-gradient(90deg, #4285f4, #ea4335, #fbbc05, #34a853);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.status-indicator { margin-right: 15px; }
.glow-orb { width: 12px; height: 12px; background-color: var(--neon-cyan); border-radius: 50%; box-shadow: 0 0 10px var(--neon-cyan), 0 0 20px var(--neon-cyan); animation: pulse 2s infinite; }
.header-title h2 { font-size: 1.3rem; letter-spacing: 3px; color: #fff; text-shadow: 0 0 8px var(--neon-cyan); }
.subtitle { font-size: 0.75rem; color: var(--neon-cyan); letter-spacing: 1.5px; text-transform: uppercase; }

/* Expanded Chat Box streaming directly onto background */
.chat-box { 
    flex: 1; 
    padding: 40px 15% 120px 15%; /* Broad centered padding for professional feel */
    overflow-y: auto; 
    display: flex; 
    flex-direction: column; 
    gap: 24px; 
}

/* Adaptive layout for smaller screens */
@media (max-width: 768px) {
    .chat-box { padding: 30px 20px 120px 20px; }
}

.chat-box::-webkit-scrollbar { width: 8px; }
.chat-box::-webkit-scrollbar-track { background: transparent; }
.chat-box::-webkit-scrollbar-thumb { background: rgba(0, 243, 255, 0.1); border-radius: 4px; }
.chat-box::-webkit-scrollbar-thumb:hover { background: rgba(0, 243, 255, 0.2); }

/* Message structures */
.message { display: flex; max-width: 75%; animation: fadeIn 0.3s ease-out; }
.message.bot-message { align-self: flex-start; }
.message.user-message { align-self: flex-end; flex-direction: row-reverse; }

.avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 0.8rem; font-weight: bold; flex-shrink: 0; }
.bot-message .avatar { border: none; color: #4285f4; box-shadow: none; font-size: 1.2rem; }
.user-message .avatar { display: none; /* Hide user avatar for cleaner look */ }

.text { padding: 12px 20px; border-radius: 20px; font-size: 1rem; line-height: 1.6; }
.bot-message .text {
    background: var(--bot-msg-bg);
    color: var(--text-main);
    padding-left: 0; 
    padding-right: 15px; 
    font-size: 1.05rem;
    line-height: 1.6;
    max-width: 100%; 
    width: 100%;  
    white-space: pre-wrap;   
}

.bot-message {
    display: flex;
    flex-direction: column; /* Forces the feedback buttons to drop BELOW the text container */
    align-items: flex-start;
    margin-bottom: 20px;
    width: 100%;
}
.user-message .text { background: var(--user-msg-bg); border: none; box-shadow: none; border-bottom-right-radius: 4px; }

/* Float bottom Input Section spanning across bottom space */
.chat-input-area { 
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
    max-width: 850px; /* Limits width on desktop */
    padding: 0;
    background: transparent;
    z-index: 10;
}

@media (max-width: 768px) {
    .chat-input-area { padding: 20px; }
}

/* ========================================= */
/* HIDE BROWSER DEFAULT 'X' CLEAR BUTTONS    */
/* ========================================= */
input[type="text"]::-ms-clear,
input[type="text"]::-ms-reveal,
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    display: none !important;
    -webkit-appearance: none !important;
}

/* Fix any weird margins in the input box container */
.chat-input-area form {
    display: flex;
    align-items: center;
    width: 100%;
}

/* ========================================= */
/* BEAUTIFUL SEND BUTTON STYLES              */
/* ========================================= */
.send-btn {
    background: transparent;
    border: none;
    color: #a8a8a8; /* Sleek grey default color */
    cursor: pointer;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease; /* Smooth animation */
    margin-left: 8px;
}

.send-btn:hover {
    color: #ff7b00; /* Glows orange/brand color on hover */
    background: rgba(255, 123, 0, 0.15); /* Soft background glow */
    transform: scale(1.1); /* Slightly pops up */
}

/* Optional: Active state when clicking */
.send-btn:active {
    transform: scale(0.95);
}

.input-wrapper {
    display: flex;
    background: var(--input-bg);
    padding: 12px 16px 12px 24px;
    border-radius: 50px; /* Makes it a pill shape */
    align-items: center;
    width: 100%;
}

#user-input { 
    flex: 1; 
    background: transparent; 
    border: none; 
    color: var(--text-main); 
    font-size: 1.05rem; 
    outline: none; 
    padding: 10px 0; 
}
#user-input::placeholder { color: #a0a0a0; }

#send-btn { 
    width: 44px; height: 44px; 
    border-radius: 50%; 
    border: none; 
    background: transparent; 
    color: #a0a0a0; 
    cursor: pointer; 
    display: flex; justify-content: center; align-items: center; 
    transition: 0.2s ease; 
}
#send-btn:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse { 0% { opacity: 0.6; } 50% { opacity: 1; } 100% { opacity: 0.6; } }

/* Top Right Navigation Settings Button Styling */
.icon-btn {
    background: transparent;
    border: none;
    color: #e3e3e3;
    cursor: pointer;
    padding: 10px;
    border-radius: 50%;
    transition: 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Modal Window Layout Overlays */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(4, 4, 6, 0.75);
    backdrop-filter: blur(8px);
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}
.modal-content {
    background: rgba(16, 16, 26, 0.95);
    border: 1px solid var(--glass-border);
    box-shadow: 0 20px 50px rgba(0,0,0,0.6), 0 0 30px rgba(0, 243, 255, 0.05);
    width: 90%; max-width: 400px;
    border-radius: 16px;
    overflow: hidden;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}
.modal-overlay.active .modal-content {
    transform: scale(1);
}
.modal-header {
    padding: 20px;
    border-bottom: 1px solid var(--glass-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.modal-header h3 {
    font-size: 1.1rem; letter-spacing: 1px; color: #fff; text-shadow: 0 0 5px var(--neon-cyan);
}
.close-btn {
    background: transparent; border: none; color: #888; font-size: 1.5rem; cursor: pointer;
}
.close-btn:hover { color: #fff; }

/* Form Components */
.modal-body { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-size: 0.8rem; color: #888; letter-spacing: 0.5px; text-transform: uppercase; }
.form-group input {
    background: rgba(0, 0, 0, 0.3); border: 1px solid var(--glass-border);
    padding: 12px; border-radius: 8px; color: #fff; outline: none; font-size: 0.95rem;
}
.form-group input:focus { border-color: var(--neon-cyan); box-shadow: 0 0 8px rgba(0, 243, 255, 0.15); }
.action-btn {
    width: 100%; padding: 14px; background: transparent; border: 1px solid var(--neon-cyan);
    color: var(--neon-cyan); font-weight: bold; border-radius: 8px; cursor: pointer; transition: 0.2s ease;
    letter-spacing: 1px; text-transform: uppercase; font-size: 0.85rem; margin-top: 10px;
}
.action-btn:hover { background: rgba(0, 243, 255, 0.1); box-shadow: 0 0 15px rgba(0, 243, 255, 0.2); }
.status-message { font-size: 0.85rem; text-align: center; min-height: 20px; }

/* Admin Log Dashboard Styles */
        .log-container { margin-top: 20px; max-width: 800px; width: 90%; }
        .logs-grid { 
            display: flex; flex-direction: column; gap: 15px; 
            margin-top: 20px; max-height: 400px; overflow-y: auto; padding-right: 5px;
        }
        .logs-grid::-webkit-scrollbar { width: 6px; }
        .logs-grid::-webkit-scrollbar-thumb { background: rgba(255, 76, 76, 0.3); border-radius: 4px; }
        
        .log-card { 
            background: rgba(255, 76, 76, 0.05); 
            border: 1px solid rgba(255, 76, 76, 0.2); 
            padding: 16px; 
            border-radius: 8px; 
            border-left: 4px solid #ff4c4c;
            animation: fadeIn 0.3s ease-out;
        }
        .log-q { color: #fff; font-weight: 600; margin-bottom: 8px; font-size: 1.05rem; }
        .log-r { color: #ff4c4c; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; }
        .success-card { border-left-color: #00ff7f; background: rgba(0, 255, 127, 0.05); border-color: rgba(0, 255, 127, 0.2); text-align: center; color: #00ff7f; }

/* Complete fix for the animated dots */
.dot {
    display: inline-block;
    color: #fbbc05 !important; /* Forces the color to be bright gold */
    -webkit-text-fill-color: #fbbc05 !important; /* Overrides the transparency bug from the h1 */
    background: none !important; /* Removes the gradient inheritance */
    font-weight: bold;
    font-size: 2.5rem;
    animation: dotBounce 1.4s infinite ease-in-out both;
}

/* Stagger the animation delays for the wave effect */
.dot:nth-child(1) { animation-delay: -0.32s; }
.dot:nth-child(2) { animation-delay: -0.16s; }
.dot:nth-child(3) { animation-delay: 0s; }

/* The up and down animation keyframes */
@keyframes dotBounce {
    0%, 80%, 100% { 
        transform: translateY(0); 
    }
    40% { 
        transform: translateY(-12px); /* Makes the bounce slightly more visible */
    }
}

/* AI Feedback Buttons */
.feedback-actions {
    display: flex;
    gap: 10px;
    margin-top: 12px; /* Adds a nice margin break directly under the text */
    align-self: flex-start; /* Ensures buttons stick to the left side under the answer */
}

.feedback-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #a0a0a0;
    border-radius: 6px;
    padding: 4px 10px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.feedback-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* Colors when a user clicks them */
.feedback-btn.active.like { 
    border-color: #00ff7f; color: #00ff7f; background: rgba(0, 255, 127, 0.1); 
}
.feedback-btn.active.dislike { 
    border-color: #ff4c4c; color: #ff4c4c; background: rgba(255, 76, 76, 0.1); 
}

/* ----------------------------------- */
/* SLIDING SIDE MENU STYLES            */
/* ----------------------------------- */
.side-menu {
    position: fixed;
    top: 0;
    right: -320px; /* Hidden completely off-screen by default */
    width: 300px;
    height: 100vh;
    background: var(--bg-dark); /* Blends perfectly with your theme */
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.6);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    /* This creates the beautiful smooth bounce sliding effect */
    transition: right 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1); 
}

/* Class triggered by JavaScript to slide it in */
.side-menu.active {
    right: 0;
}

.menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.menu-header h3 {
    margin: 0;
    color: var(--text-main);
    font-size: 1.2rem;
    font-weight: 500;
}

.menu-content {
    flex: 1; /* Forces the content to take up available space, pushing footer to the bottom */
    padding: 20px;
}

.menu-footer {
    padding: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.footer-credit {
    font-size: 0.75rem;
    color: #888;
    text-align: left; /* CHANGED TO LEFT ALIGNED */
    line-height: 1.6;
    margin: 0;
    font-weight: 400;
    letter-spacing: 0.5px;
}

/* Base Hyperlink formatting */
.credit-link {
    text-decoration: none;
    font-weight: 500;
    transition: opacity 0.2s ease;
}

.credit-link:hover {
    opacity: 0.8;
}

/* Matching the App's Gold / Orange / Yellow theme accents */
.link-kms {
    color: #fbbc05; /* Bright Gold/Yellow dot color accent */
}

.link-author {
    color: #ea4335; /* Orange/Red header gradient color accent */
}

.admin-login-btn {
    width: 100%;
    padding: 12px;
    background: transparent;
    border: 1px solid #4285f4; /* Subtle blue border */
    color: #4285f4;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    transition: all 0.2s ease;
}

.admin-login-btn:hover {
    background: #4285f4;
    color: #fff;
}

/* User Chat History Items in Side Menu */
.history-header {
    font-size: 0.75rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.history-item {
    padding: 12px;
    border-radius: 8px;
    color: var(--text-main);
    font-size: 0.95rem;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.2s;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.history-item:hover {
    background: rgba(255, 255, 255, 0.08);
}


/* ========================================= */
/* GEMINI-STYLE MOBILE LAYOUT (KEYBOARD FIX) */
/* ========================================= */
@media (max-width: 768px) {
    /* 1. STRICT VIEWPORT LOCK: Prevents the browser from pushing the page up */
    html, body {
        height: 100% !important;
        width: 100% !important;
        overflow: hidden !important;
        position: fixed !important; /* This is the magic bullet for the keyboard glitch */
        top: 0 !important;
        left: 0 !important;
    }

    /* 2. FLEXBOX APP FRAME: Adapts naturally when keyboard resizes the screen */
    .app-fullscreen {
        display: flex !important;
        flex-direction: column !important;
        height: 100dvh !important; /* Dynamic viewport height */
        width: 100% !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
    }

  /* 3. HEADER: Gemini-style Frosted Glass Blur */
    .chat-header {
        position: fixed !important; 
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 9999 !important;
        padding: 10px 15px !important;
        
        /* --- THE BLUR MAGIC --- */
        
        -webkit-backdrop-filter: blur(12px) !important; /* Required for iPhones/Safari */
        backdrop-filter: blur(12px) !important;
        
        /* Note: If you use dark mode, you might want to use a CSS variable for the background color here, 
           or change the rgba to rgba(19, 19, 20, 0.6) for a dark tint. */
    }
   

    /* 2. CHAT BOX: Added top padding to push text down below the header */
    .chat-box {
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important; 
        width: 100% !important;
        padding: 70px 15px 1px 15px !important; /* The 70px top padding fixes the overlap */
        position: relative !important;
    }

    /* CENTER "Ask ESIC AI..." GREETING */
    .zero-state-greeting {
        position: absolute !important;
        top: 40% !important; /* Slightly above exact center avoids keyboard overlap */
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 100% !important;
        text-align: center !important;
        margin: 0 !important;
    }

    /* 5. INPUT AREA: Stays locked to the bottom of the flex container */
    .chat-input-area {
        grid-row: 3 !important;
        width: 100% !important;
        position: relative !important;
        /* Tightened padding: 5px top, 15px sides, and only 2px bottom gap */
        padding: 5px 15px 0px 15px !important; 
        background: var(--bg-dark, #131314) !important;
        border-top: none !important; 
        margin-top: 0 !important;
        z-index: 1000 !important;
    }

    /* Remove any hidden default form margins that might cause spacing issues */
    .chat-input-area form {
        margin: 0 !important;
        padding: 0 !important;
    }

    #user-input {
        padding: 12px 15px !important; 
    }

    /* 6. SIDE MENU FIX: Ensures footer is always visible */
    #side-menu {
        height: 100dvh !important;
        display: flex !important;
        flex-direction: column !important;
        z-index: 10000 !important; /* HIGHER than chat-header so it goes over it */
        padding-top: 0 !important;  /* Reset padding so our new row aligns at the top */
    }
    
    .menu-content {
        flex: 1 !important;
        overflow-y: auto !important;
        padding: 0 20px 20px 20px !important;
    }

    .admin-login-btn {
        margin-top: auto !important;
        margin-bottom: 20px !important; 
    }

    /* 7. Message width */
    .message {
        max-width: 95% !important; 
    }

    /* 8. Tighten header buttons */
    .header-actions {
        gap: 0px !important;
    }

    .header-actions .icon-btn {
        padding: 10px 10px !important; 
    }

    .apps-popup {
        right: 0 !important;
        width: 260px !important;
    }
}

/* ========================================= */
/* AI TYPING ANIMATION CURSOR                */
/* ========================================= */
.typing-cursor::after {
    content: '▋'; /* A solid block like a terminal cursor */
    display: inline-block;
    color: #ff7b00; /* ESIC Brand color */
    margin-left: 4px;
    animation: blink-cursor 1s step-end infinite;
}

@keyframes blink-cursor {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* ========================================= */
/* MOBILE INPUT FIELD & SEND BUTTON FIXES    */
/* ========================================= */

/* 1. Totally remove the native cross (x) icon injected by mobile browsers */
input::-webkit-search-cancel-button,
input::-webkit-clear-button,
textarea::-webkit-search-cancel-button,
textarea::-webkit-clear-button {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: none !important;
}

/* 2. Setup the wrapper so the button can sit inside it */
.chat-input-area form {
    position: relative !important;
    display: flex !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

#user-input {
    width: 100% !important;
    /* Changed first value (top) and third value (bottom) from 12px to 18px */
    padding: 18px 50px 18px 20px !important;
    border-radius: 30px !important; /* Slightly increased border-radius to match height */
    outline: none !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    
    background: #202124 !important; 
    color: #ffffff !important;
}

/* 2. Light Theme Overrides */
body.light-theme #user-input {
    background: #ffffff !important;
    color: #131314 !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
}

/* 3. Send button icon color */
#send-btn {
    color: #ffffff !important; /* White arrow */
}

body.light-theme #send-btn {
    color: #131314 !important; /* Dark arrow */
}

/* 4. The Send Arrow: Positioned absolutely INSIDE the right edge of the text box */
#send-btn, .send-btn {
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: transparent !important; /* Removes any white background */
    border: none !important;
    box-shadow: none !important;
    padding: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10 !important;
}

/* ========================================= */
/* DESKTOP-SPECIFIC INPUT SPACING            */
/* ========================================= */
@media (min-width: 1201px) {
    .chat-input-area {
        /* Adjust 60px to whatever height you prefer for the desktop gap */
        margin-bottom: 60px !important; 
    }
}