/* =========================================================================
   1. GLOBAL LLM THEME VARIABLES (Default: Modern Notebook Dot Grid)
   ========================================================================= */
:root {
    /* 1. main_background_style */
    --llm-css-theme-main-bg: #f8f9fa radial-gradient(#d1d5db 1px, transparent 1px) 0 0 / 20px 20px repeat; 
    
    /* 2. universal_text_color */
    --llm-css-theme-text-color: #333333; 
    
    /* 3 & 4. chat_input_bg & chat_input_text_color */
    --llm-css-theme-input-bg: #ffffff; 
    --llm-css-theme-input-text: #333333;
    
    /* 5, 6, & 7. bot_bubble_bg, bot_bubble_border & bot_text */
    --llm-css-theme-bot-bg: #ffffff;
    --llm-css-theme-bot-border: 1px solid #e5e7eb;
    --llm-css-theme-bot-text: #333333; /* NEW DEFAULT */
    
    /* 8, 9, & 10. user_bubble_bg, user_bubble_border & user_text */
    --llm-css-theme-user-bg: #f1aa3b;
    --llm-css-theme-user-border: none;
    --llm-css-theme-user-text: #333333; /* NEW DEFAULT */
    
    /* 11. practice_button_hover */
    --llm-css-theme-practice-hover: #d9952b; 
    
    /* 12. ui_border_radius */
    --llm-css-theme-border-radius: 12px; 
}

/* =========================================================================
   2. MAP LLM VARIABLES TO UI ELEMENTS
   ========================================================================= */

/* Outer Area AND Chat Area */
.wrapper.chatbot-home,
.chatbot-bg {
    background: var(--llm-css-theme-main-bg) !important;
    transition: background 0.8s ease;
}

/* Bot Chat Bubbles */
.message-sent:not(.message-received) .comment-box {
    background: var(--llm-css-theme-bot-bg) !important;
    /* Updated to use bot-text explicitly */
    color: var(--llm-css-theme-bot-text, var(--llm-css-theme-text-color)) !important; 
    border: var(--llm-css-theme-bot-border) !important;
    border-radius: var(--llm-css-theme-border-radius) !important;
    transition: all 0.5s ease;
}

/* User Chat Bubbles */
.message-received .comment-box {
    background: var(--llm-css-theme-user-bg) !important;
    /* Updated to use user-text explicitly */
    color: var(--llm-css-theme-user-text, var(--llm-css-theme-text-color)) !important; 
    border: var(--llm-css-theme-user-border) !important;
    border-radius: var(--llm-css-theme-border-radius) !important;
    transition: all 0.5s ease;
}

/* CRITICAL: Force paragraphs and links inside bubbles to inherit the assigned color */
.comment-box p, 
.comment-box a, 
.comment-box code {
    color: inherit !important;
}

/* Practice Option Buttons */
.choose-options .option-btn {
    background: var(--llm-css-theme-user-bg) !important; 
    color: var(--llm-css-theme-text-color) !important; 
    border: var(--llm-css-theme-user-border) !important;
    border-radius: var(--llm-css-theme-border-radius) !important; 
    transition: all 0.3s ease;
}

.choose-options .option-btn:hover {
    background: var(--llm-css-theme-practice-hover) !important;
}

/* Fix the Timestamp Color */
.time {
    color: var(--llm-css-theme-text-color) !important;
    opacity: 0.6 !important; 
    transition: color 0.5s ease;
}

/* Utility Icons (Like/Dislike) - AUTOMATED SOFT CONTRAST */
.icon-main .like-icons img, 
.icon-main .up-icons img {
    background: color-mix(in srgb, var(--llm-css-theme-text-color) 8%, transparent) !important;
    border-radius: 50% !important; 
    padding: 6px !important;       
    transition: all 0.2s ease;
}

.icon-main .like-icons img:hover, 
.icon-main .up-icons img:hover {
    background: var(--llm-css-theme-practice-hover) !important;
    transform: scale(1.05);
}


/* =========================================================================
   FIX FOR QUICK REPLY BUTTONS (.choose-options) DESKTOP VISIBILITY
   ========================================================================= */



   /* 1. The Container: Fixed to the screen, floating above the chat. */
   div.choose-options, 
   div#list_user_responses {
       position: fixed !important;
       bottom: 80px !important; /* Floats safely above the chat bar area */
       left: 0 !important;
       right: 0 !important;
       width: 100% !important;
       margin: 0 auto !important;
       display: flex !important;
       flex-direction: column !important;
       align-items: center !important;
       justify-content: flex-end !important;
       padding: 0 15px !important;
       box-sizing: border-box !important;
       z-index: 9990 !important; /* High z-index to stay visible over everything */
       
       /* CRITICAL: Allows the user to still scroll the chat by swiping 
          on the invisible space between buttons */
       pointer-events: none !important; 
       transform: none !important;
       background: transparent !important;
   }

   /* 2. The Buttons: Restore clicking and constrain width for Desktop */
   div.choose-options .option-btn {
       pointer-events: auto !important; /* Restores clickability to the buttons themselves */
       width: 100% !important;
       max-width: 450px !important; /* Perfect width so they don't stretch forever on Desktop */
       margin: 5px auto !important;
       display: block !important;
       text-align: center !important;
       box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
   }

   /* 3. Mobile Tweak: Drop it slightly lower since mobile screens are tight */
   @media (max-width: 767px) {
       div.choose-options, 
       div#list_user_responses {
           bottom: 70px !important; 
       }
   }

/* =========================================================================
   3. MODERN CHAT INPUT BAR STYLING
   ========================================================================= */

/* The Input Wrapper */
.modern-chat-bar {
    background: var(--llm-css-theme-input-bg) !important;
    display: flex;
    align-items: flex-end; 
    gap: 8px;
    border-radius: 24px; 
    padding: 8px 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    border: 1px solid #e0e0e0;
    margin: 10px 0; 
    width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 100;
}





/* The Text Area (Updated to use the new input text color with fallback) */
.modern-textarea {
    flex: 1;
    border: none !important;
    outline: none !important;
    background: transparent;
    padding: 10px 4px;
    margin: 0;
    font-size: 15px;
    font-family: 'Inter', sans-serif;
    max-height: 120px;
    line-height: 1.4;
    resize: none;
    box-shadow: none !important;
    align-self: center;
    overflow-y: auto;
    color: var(--llm-css-theme-input-text, var(--llm-css-theme-text-color)) !important;
}

/* Placeholder (Mixes the new input text color with transparency) */
.modern-textarea::placeholder {
    color: color-mix(in srgb, var(--llm-css-theme-input-text, var(--llm-css-theme-text-color)) 50%, transparent) !important;
}



/* Shared Icon Button Styles */
.modern-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    padding: 0;
}

/* Custom Camera Class */
.modern_chat_camera {
    width: 42px;
    height: 42px;
    margin-bottom: 2px;
    position: relative; 
}
.modern_chat_camera:hover { background: #f0f2f5; }
.modern_chat_camera img {
    width: 32px !important; 
    height: 32px !important;
    opacity: 0.7;
    object-fit: contain;
}

/* Notification Badge for Uploads */
.camera-badge {
    position: absolute;
    top: -4px;
    right: -12px;
    background: #ff4d4f; 
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    padding: 2px 6px;
    border-radius: 10px;
    line-height: 1.2;
    white-space: nowrap; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    pointer-events: none; 
}
.camera-badge:empty { display: none; }

/* Action Container (holds mic and send) */
.modern-action-container {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1px;
}

/* Mic Button */
.mic-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}
.modern-icon-btn.mic-btn {
    background: #f0f2f5;
    width: 42px;
    height: 42px;
}
.modern-icon-btn.mic-btn:hover { background: #e4e6eb; }
.modern-icon-btn.mic-btn img {
    height: 22px; 
    width: auto;  
    object-fit: contain;
}

/* The Send Button */
.modern-icon-btn.send-btn {
    width: 42px;
    height: 42px;
    background: var(--llm-css-theme-user-bg) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.modern-icon-btn.send-btn:hover {
    transform: translateY(-2px);
    filter: brightness(0.9);
}
.modern-icon-btn.send-btn img {
    width: 18px;
    height: 18px;
    filter: brightness(0) invert(1);
    margin-right: 2px;
}

/* Mobile Tweaks */
@media (max-width: 480px) {
    .modern-chat-bar {
        margin: 5px 10px;
        width: calc(100% - 20px);
        padding: 6px 10px;
    }
    .modern-textarea { font-size: 14px; }
}

/* =========================================================================
   CUSTOM FONT SIZE FOR USER TYPING AREA
   ========================================================================= */

/* Desktop & Tablet Size */
textarea#user_query,
textarea.modern-textarea {
    font-size: 18px !important;
}

/* Mobile Size (Keeps it slightly smaller so it doesn't break the layout on small screens) */
@media (max-width: 480px) {
    textarea#user_query,
    textarea.modern-textarea {
        font-size: 16px !important;
    }
}


/* =========================================================================
   4. CLEANUP LEGACY ARTIFACTS (Triangles & Wrapper Backgrounds)
   ========================================================================= */

/* Hide the pointy triangles from all chat bubbles */
.comment-box::before,
.comment-box::after,
.comment-outer::before,
.comment-outer::after {
    display: none !important;
    content: none !important;
    border: none !important;
}

/* Remove the semi-transparent/light boxes around the input bar and options */
.choose-options,
#list_user_responses,
.type-here {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Ensure bottom-level wrappers let the LLM theme shine through */
.question-body,
.question-main,
.question-section {
    background-color: transparent !important;
}


/* =========================================================
   THE ULTIMATE SCROLL UNLOCK (Protects Bot, Frees Teacher)
   ========================================================= */

/* 1. Global Unlock for HTML & Body. 
   (The Bot is safe because enableAlfieStyles() injects inline !important styles that override this) */
html, body {
    height: auto !important; 
    min-height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important; 
    overscroll-behavior: auto !important;
    -webkit-overflow-scrolling: touch !important; 
}

/* 2. Destroy the 100% height traps on Teacher View wrappers specifically */
#teacher_content_body,
#content_body_mindmap {
    height: auto !important; 
    min-height: 100vh !important;
    overflow: visible !important; 
}

/* 3. Specifically fix the .wrapper, but EXCLUDE the chatbot's wrapper */
.wrapper:not(.chatbot-home) {
    height: auto !important; 
    min-height: 100vh !important;
    overflow: visible !important; 
}

/* NOTICE: We completely removed any overrides for .container
   This is why the bot broke last time. By leaving .container alone, 
   Alfie keeps his internal chat scrollbox! */
   
   

   
   
   
/* CSS injected with theme */   
   
  
/* =========================================================================
   5. LEGACY UI OVERRIDES: LIST OF CHAPTERS & TOPICS
   ========================================================================= */

/* 1. Main Page Background */
.wrapper.chapter-list,
.wrapper.list-of-topics {
    background: var(--llm-css-theme-main-bg) !important;
}

/* 2. Chapter/Topic Option Bars */
.chapter-list .question-main .question-section .question-body .question-list ol li,
.list-of-topics .question-main .question-section .question-body .question-list ol li {
    background: var(--llm-css-theme-user-bg) !important;
    background-image: none !important; /* Kills legacy background image */
    border: var(--llm-css-theme-user-border) !important;
    border-radius: var(--llm-css-theme-border-radius) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important; 
    transition: all 0.3s ease !important;
    height: auto !important; /* Overrides the hardcoded 88px */
    min-height: 80px !important;
    padding: 15px 25px !important;
    font-family: inherit !important; /* Overrides the cursive Skranji font */
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
}

/* Option Hover State */
.chapter-list .question-main .question-section .question-body .question-list ol li:hover:not(.disabled-option),
.list-of-topics .question-main .question-section .question-body .question-list ol li:hover:not(.disabled-option) {
    background: var(--llm-css-theme-practice-hover) !important;
    transform: translateY(-2px); 
}

/* 3. Text inside the Bars */
.chapter-list .question-main .question-section .question-body .question-list ol li h3,
.chapter-list .question-main .question-section .question-body .question-list ol li span,
.list-of-topics .question-main .question-section .question-body .question-list ol li h3,
.list-of-topics .question-main .question-section .question-body .question-list ol li span {
    color: var(--llm-css-theme-text-color) !important;
    text-shadow: none !important; 
    margin: 0 !important; /* Removes default heading margins */
    line-height: 1.4 !important;
}

/* The Number Badge (Circle) on the left */
.chapter-list .question-main .question-section .question-body .question-list ol li span,
.list-of-topics .question-main .question-section .question-body .question-list ol li span {
    background: var(--llm-css-theme-main-bg) !important; 
    border-radius: 50% !important;
    border: var(--llm-css-theme-user-border) !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 600 !important;
    margin-right: 15px !important;
    flex-shrink: 0 !important; /* Prevents the circle from squishing */
}

/* 4. Main Page Titles */
#heading-question-title,
.list-of-topics .question-title h2,
.list-of-topics .question-title p {
    color: var(--llm-css-theme-input-text, #333) !important; 
    text-shadow: none !important;
}

/* 5. Disabled/Locked Options */
.chapter-list .question-main .question-section .question-body .question-list ol li.disabled-option {
    background: color-mix(in srgb, var(--llm-css-theme-main-bg) 60%, #888) !important;
    border: none !important;
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

.chapter-list .question-main .question-section .question-body .question-list ol li.disabled-option h3 {
    color: color-mix(in srgb, var(--llm-css-theme-text-color) 40%, #000) !important;
}

/* 6. Clean up inner wrappers */
.chapter-list .question-main .question-section,
.list-of-topics .question-main .question-section {
    background: transparent !important;
    box-shadow: none !important;
}
   
   
   /* =========================================================================
      6. LEGACY UI OVERRIDES: MATCH THE FOLLOWING (Question 8a)
      ========================================================================= */

   /* 1. Main Page Background */
   .wrapper.question-8a-pg {
       background: var(--llm-css-theme-main-bg) !important;
   }

   /* 2. Main Titles & Headers */
   .question-8a-pg #question-title h2,
   .question-8a-pg #question-title p,
   .question-8a-pg .match-head,
   .question-8a-pg #slide-mascot h3 {
       color: var(--llm-css-theme-input-text, #333) !important; 
       text-shadow: none !important;
   }

   /* 3. The Interactive Matching Cards (Base State) */
   .question-8a-pg .table-match .match-text > div {
       background: var(--llm-css-theme-user-bg) !important;
       border: var(--llm-css-theme-user-border) !important;
       border-radius: var(--llm-css-theme-border-radius) !important;
       box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
       padding: 10px 15px !important;
       margin-bottom: 10px !important;
       color: var(--llm-css-theme-text-color) !important;
       font-weight: 500 !important;
       transition: all 0.3s ease !important;
       cursor: pointer !important;
   }

   /* Ensure any nested spans inherit the color correctly */
   .question-8a-pg .table-match .match-text > div span {
       color: inherit !important; 
   }

   /* Hover State */
   .question-8a-pg .table-match .match-text:hover > div {
       background: var(--llm-css-theme-practice-hover) !important;
       transform: scale(1.02); 
   }

   /* Draggable Cursors (For versions using drag-and-drop) */
   .question-8a-pg .table-match .match-text > div[draggable="true"]:hover {
       cursor: grab !important;
   }
   .question-8a-pg .table-match .match-text > div[draggable="true"]:active {
       cursor: grabbing !important;
   }

   /* 4. INTERACTIVE STATES (Active, Correct, Wrong) */

   /* Active / Selected State (When a student clicks a word to match it) */
   .question-8a-pg .table-match .match-text.active > div {
       background: color-mix(in srgb, var(--llm-css-theme-user-bg) 80%, var(--llm-css-theme-text-color)) !important;
       border: 2px solid var(--llm-css-theme-text-color) !important; 
       transform: scale(0.98) !important; 
       box-shadow: inset 0 2px 5px rgba(0,0,0,0.1) !important;
   }

   /* Wrong Match State (Soft Red) */
   .question-8a-pg .table-match .match-text.wrong-option > div,
   .question-8a-pg .table-match .match-text.wrong > div,
   .question-8a-pg .table-match .match-text > div.wrong {
       background: #ef4444 !important; 
       color: #ffffff !important;
       border: 1px solid #dc2626 !important;
       box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3) !important;
   }

   /* Correct Match State (Soft Green) */
   .question-8a-pg .table-match .match-text.correct-option > div,
   .question-8a-pg .table-match .match-text.correct > div,
   .question-8a-pg .table-match .match-text > div.correct {
       background: #22c55e !important; 
       color: #ffffff !important;
       border: 1px solid #16a34a !important;
       box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3) !important;
   }

   /* 5. Clean up transparent wrappers */
   .question-8a-pg .question-main .question-section,
   .question-8a-pg .answer-body {
       background: transparent !important;
       box-shadow: none !important;
       border: none !important;
   }
   

   /* =========================================================================
      7. LEGACY UI OVERRIDES: MCQ & FILL-IN OPTIONS (Question 2a, 2b, 2c)
      ========================================================================= */

   /* 1. Main Page Background */
   .wrapper.question-2a-pg {
       background: var(--llm-css-theme-main-bg) !important;
   }

   /* 2. Page Headers and Mascot Instructions */
   .question-2a-pg #question-title h2,
   .question-2a-pg #question-title p,
   .question-2a-pg #slide-mascot h3 {
       color: var(--llm-css-theme-input-text, #333) !important; 
       text-shadow: none !important;
   }

   /* 3. The Main Question Text (Stem) */
   .question-2a-pg .blank-questions .fill-section span {
       color: var(--llm-css-theme-input-text, #333) !important;
       font-size: 20px !important; 
       font-weight: 500 !important;
       text-shadow: none !important;
       line-height: 1.8 !important; /* Breathing room for the inline box */
   }

   /* 3.5 The Inline Answer Box */
   .question-2a-pg .blank-questions .fill-section .answer-box {
       background: var(--llm-css-theme-input-bg) !important;
       color: var(--llm-css-theme-input-text, #333) !important;
       border: 2px solid color-mix(in srgb, var(--llm-css-theme-input-text, #333) 20%, transparent) !important;
       border-radius: 8px !important; 
       padding: 5px 15px !important;
       font-size: 20px !important;
       font-weight: 600 !important;
       display: inline-block !important;
       min-width: 80px !important;
       margin: 0 10px !important;
       text-align: center !important;
       box-shadow: inset 0 2px 4px rgba(0,0,0,0.05) !important;
       vertical-align: middle !important;
   }

   /* 4. MCQ Option Buttons (Default State) */
   .question-2a-pg .fill-option button {
       background: var(--llm-css-theme-user-bg) !important;
       border: var(--llm-css-theme-user-border) !important;
       border-radius: var(--llm-css-theme-border-radius) !important;
       color: var(--llm-css-theme-text-color) !important;
       box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
       padding: 15px 20px !important;
       margin-bottom: 12px !important;
       transition: all 0.3s ease !important;
       font-weight: 500 !important;
       cursor: pointer !important;
   }

   /* Force full width if the .full-options layout is applied */
   .question-2a-pg .fill-option.full-options button {
       width: 100% !important;
   }

   /* Bold prefix inside MCQ Buttons ("A:", "B:") */
   .question-2a-pg .fill-option button b {
       color: inherit !important;
       margin-right: 5px !important;
   }

   /* Hover State */
   .question-2a-pg .fill-option button:hover {
       background: var(--llm-css-theme-practice-hover) !important;
       transform: translateY(-2px);
   }

   /* 5. INTERACTIVE STATES (Selected, Correct, Wrong) */

   /* Selected / Active State */
   .question-2a-pg .fill-option button.selected,
   .question-2a-pg .fill-option button.active {
       background: color-mix(in srgb, var(--llm-css-theme-user-bg) 80%, var(--llm-css-theme-text-color)) !important;
       border: 2px solid var(--llm-css-theme-text-color) !important; 
       transform: scale(0.98) !important; 
       box-shadow: inset 0 2px 5px rgba(0,0,0,0.1) !important;
   }

   /* Wrong Answer State (Soft Red) */
   .question-2a-pg .fill-option button.wrong,
   .question-2a-pg .fill-option button.wrong-option,
   .question-2a-pg .blank-questions .fill-section .answer-box.wrong {
       background: #ef4444 !important; 
       color: #ffffff !important;
       border: 1px solid #dc2626 !important;
       box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3) !important;
   }

   /* Correct Answer State (Soft Green) */
   .question-2a-pg .fill-option button.correct,
   .question-2a-pg .fill-option button.correct-option,
   .question-2a-pg .blank-questions .fill-section .answer-box.correct {
       background: #22c55e !important; 
       color: #ffffff !important;
       border: 1px solid #16a34a !important;
       box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3) !important;
   }

   /* 6. Clean up transparent wrappers */
   .question-2a-pg .question-main .question-section,
   .question-2a-pg .blank-questions {
       background: transparent !important;
       box-shadow: none !important;
       border: none !important;
   }
   
   /* =========================================================================
      8. LEGACY UI OVERRIDES: CHOOSE GROUP / BUCKET SORT (Question 9a & 9b)
      ========================================================================= */

   /* 1. Main Page Background */
   .wrapper.question-9a-pg {
       background: var(--llm-css-theme-main-bg) !important;
   }

   /* 2. Page Headers and Bucket Titles */
   .question-9a-pg #question-title h2,
   .question-9a-pg #question-title p,
   .question-9a-pg #slide-mascot h3,
   .question-9a-pg .answer-body h3 { 
       color: var(--llm-css-theme-input-text, #333) !important; 
       text-shadow: none !important;
   }

   /* 3. The Draggable/Clickable Word "Pills" (Default State) */
   .question-9a-pg .question-body .option {
       background: var(--llm-css-theme-user-bg) !important;
       border: var(--llm-css-theme-user-border) !important;
       border-radius: 25px !important; 
       color: var(--llm-css-theme-text-color) !important;
       box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
       padding: 10px 25px !important;
       margin: 5px !important;
       font-size: 16px !important;
       font-weight: 500 !important;
       transition: all 0.3s ease !important;
       cursor: pointer !important;
       display: inline-block !important; /* Keeps them flowing nicely */
   }

   /* Hover State */
   .question-9a-pg .question-body .option:hover {
       background: var(--llm-css-theme-practice-hover) !important;
       transform: translateY(-2px);
   }

   /* 4. INTERACTIVE STATES (Active, Wrong, Correct) */

   /* Active / Selected State */
   .question-9a-pg .question-body .option.active,
   .question-9a-pg .answer-area-box .option.active {
       /* Mixes the theme background with the text color to make a distinct 'selected' shade */
       background: color-mix(in srgb, var(--llm-css-theme-user-bg) 80%, var(--llm-css-theme-text-color)) !important;
       border: 2px solid var(--llm-css-theme-text-color) !important; /* Bold border to show selection */
       transform: scale(0.98) !important; /* Pushes in slightly when active */
       box-shadow: inset 0 2px 5px rgba(0,0,0,0.1) !important;
   }

   /* Wrong Answer State (Soft Red) */
   .question-9a-pg .question-body .option.wrong-option,
   .question-9a-pg .answer-area-box .option.wrong-option,
   .question-9a-pg .option.wrong-option {
       background: #ef4444 !important; 
       color: #ffffff !important;
       border: 1px solid #dc2626 !important;
       box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3) !important;
   }

   /* Correct Answer State (Soft Green - Proactive fallback) */
   .question-9a-pg .question-body .option.correct-option,
   .question-9a-pg .answer-area-box .option.correct-option,
   .question-9a-pg .option.correct-option,
   .question-9a-pg .option.correct {
       background: #22c55e !important; 
       color: #ffffff !important;
       border: 1px solid #16a34a !important;
       box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3) !important;
   }

   /* 5. The Drop Zone Box / Bucket */
   .question-9a-pg .answer-area-box {
       background: color-mix(in srgb, var(--llm-css-theme-input-bg) 60%, transparent) !important;
       border: 2px dashed color-mix(in srgb, var(--llm-css-theme-text-color) 30%, transparent) !important;
       border-radius: var(--llm-css-theme-border-radius) !important;
       min-height: 160px !important;
       padding: 15px !important;
       box-shadow: inset 0 2px 8px rgba(0,0,0,0.02) !important; 
       text-align: center !important; /* Centers dropped items */
   }

   /* Ensure pills dropped INSIDE the bucket retain their shape */
   .question-9a-pg .answer-area-box .option {
       border-radius: 25px !important;
       padding: 10px 25px !important;
       margin: 5px !important;
       display: inline-block !important;
       font-size: 16px !important;
       font-weight: 500 !important;
   }

   /* 6. Clean up transparent wrappers */
   .question-9a-pg .question-main .question-section,
   .question-9a-pg .answer-body {
       background: transparent !important;
       box-shadow: none !important;
       border: none !important;
   }
   
   
   /* =========================================================================
      9. LEGACY UI OVERRIDES: TEXT INPUTS, LONG ANSWERS & INLINE BLANKS (Question 4a)
      ========================================================================= */

   /* 1. Main Page Background */
   .wrapper.question-4a-pg {
       background: var(--llm-css-theme-main-bg) !important;
   }

   /* 2. Page Headers and Mascot Instructions */
   .question-4a-pg #question-title h2,
   .question-4a-pg #question-title p,
   .question-4a-pg #slide-mascot h3 {
       color: var(--llm-css-theme-input-text, #333) !important; 
       text-shadow: none !important;
   }

   /* 3. The Question Text (Sentence flow) */
   .question-4a-pg .complete-sentance h3,
   .question-4a-pg #question-head h3,
   .question-4a-pg #txt_of_question {
       color: var(--llm-css-theme-input-text, #333) !important;
       font-size: 22px !important; 
       font-weight: 500 !important;
       text-shadow: none !important;
       line-height: 1.8 !important; /* Gives breathing room for inline boxes */
   }

   /* 4. Text Input Fields, Textareas, AND Inline Boxes (.box) */
   .question-4a-pg .complete-sentance input[type="text"],
   .question-4a-pg .complete-sentance textarea,
   .question-4a-pg .complete-sentance .box {
       background: var(--llm-css-theme-input-bg) !important;
       color: var(--llm-css-theme-input-text, #333) !important;
       border: 2px solid color-mix(in srgb, var(--llm-css-theme-input-text, #333) 20%, transparent) !important;
       border-radius: 8px !important; 
       padding: 8px 15px !important;
       font-size: 18px !important;
       box-shadow: inset 0 2px 4px rgba(0,0,0,0.05) !important;
       transition: all 0.3s ease !important;
       outline: none !important;
       font-family: inherit !important;
       box-sizing: border-box !important;
   }

   /* Specific alignments */
   .question-4a-pg .complete-sentance input[type="text"] {
       text-align: center !important;
       max-width: 180px !important;
   }
   .question-4a-pg .complete-sentance textarea {
       text-align: left !important;
       resize: vertical !important; 
   }
   .question-4a-pg .complete-sentance .box {
       display: inline-block !important; /* Keeps it flowing with the text */
       min-width: 60px !important;
       text-align: center !important;
       margin: 0 5px !important;
       vertical-align: middle !important;
   }

   /* Modern Focus State when typing */
   .question-4a-pg .complete-sentance input[type="text"]:focus,
   .question-4a-pg .complete-sentance textarea:focus {
       border-color: var(--llm-css-theme-user-bg) !important; 
       box-shadow: 0 0 0 3px color-mix(in srgb, var(--llm-css-theme-user-bg) 30%, transparent) !important;
   }

   /* 5. INTERACTIVE STATES (Correct & Wrong Feedback) */

   /* Wrong Answer State (Soft Red) */
   .question-4a-pg .complete-sentance input.wrong,
   .question-4a-pg .complete-sentance input.wrong-option,
   .question-4a-pg .complete-sentance .box.wrong,
   .question-4a-pg .complete-sentance .box.wrong-option {
       background: #ef4444 !important; 
       color: #ffffff !important;
       border-color: #dc2626 !important;
       box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3) !important;
   }

   /* Correct Answer State (Soft Green) */
   .question-4a-pg .complete-sentance input.correct,
   .question-4a-pg .complete-sentance input.correct-option,
   .question-4a-pg .complete-sentance .box.correct,
   .question-4a-pg .complete-sentance .box.correct-option {
       background: #22c55e !important; 
       color: #ffffff !important;
       border-color: #16a34a !important;
       box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3) !important;
   }

   /* 6. Clean up transparent wrappers */
   .question-4a-pg .question-main .question-section,
   .question-4a-pg #question-head {
       background: transparent !important;
       box-shadow: none !important;
       border: none !important;
   }
   
   
 
   /* =========================================================================
      10. LEGACY UI OVERRIDES: QUESTION BANK / ACCORDION (Question 9c)
      ========================================================================= */

   /* 1. Main Page Background */
   .wrapper.question-9c-pg {
       background: var(--llm-css-theme-main-bg) !important;
   }

   /* 2. Page Headers and Mascot Instructions */
   .question-9c-pg #question-title h2,
   .question-9c-pg #question-title p,
   .question-9c-pg #slide-mascot h3 {
       color: var(--llm-css-theme-input-text, #333) !important; 
       text-shadow: none !important;
   }

   /* 3. The Unified Q&A Card Container */
   .question-9c-pg #question-body > .width-100 {
       margin-bottom: 20px !important;
       border-radius: var(--llm-css-theme-border-radius) !important;
       overflow: hidden !important; 
       box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
       border: none !important; /* BOUNDARY REMOVED */
       background: transparent !important;
   }

   /* 4. The Question Header (Clickable Accordion Bar) */
   .question-9c-pg .option_2 {
       background: var(--llm-css-theme-user-bg) !important;
       color: var(--llm-css-theme-text-color) !important;
       padding: 15px 20px !important;
       cursor: pointer !important;
       display: flex !important;
       align-items: center !important;
       justify-content: space-between !important;
       transition: all 0.3s ease !important;
       border: none !important;
       margin: 0 !important; 
   }

   .question-9c-pg .option_2 span {
       color: var(--llm-css-theme-text-color) !important;
       font-weight: 500 !important;
       font-size: 16px !important;
       flex: 1 !important;
       text-shadow: none !important;
   }

   /* Accordion Arrow Animation */
   .question-9c-pg .option_2 img {
       transition: transform 0.3s ease !important;
   }

   /* INTERACTIVE STATE: Accordion Hover & Active */
   .question-9c-pg .option_2:hover {
       background: var(--llm-css-theme-practice-hover) !important;
   }
   .question-9c-pg .option_2.active {
       background: color-mix(in srgb, var(--llm-css-theme-user-bg) 80%, var(--llm-css-theme-text-color)) !important;
   }
   .question-9c-pg .option_2.active img,
   .question-9c-pg .option_2[aria-expanded="true"] img {
       transform: rotate(180deg) !important; 
   }

   /* 5. The Answer Body (Expanded text) */
   .question-9c-pg .answer {
       background: var(--llm-css-theme-input-bg) !important; 
       padding: 20px !important;
       border: none !important; /* BOUNDARY REMOVED */
       margin: 0 !important; 
   }

   .question-9c-pg .answer_text,
   .question-9c-pg .panel-collapse.collapse {
       color: var(--llm-css-theme-input-text, #333) !important;
       font-size: 16px !important;
       line-height: 1.6 !important;
       text-shadow: none !important;
       margin-top: 10px !important;
   }

   
   /* 6. Media Pills (Hindi, Image, Video options inside the answer) */
   .question-9c-pg .wrapper_objects {
       display: flex !important;
       gap: 12px !important;
       margin-top: 20px !important;
       flex-wrap: wrap !important;
   }

   .question-9c-pg .wrapper_objects span {
       /* Changed to bot-bg so it looks like a clean button instead of pulling the yellow main background */
       background: var(--llm-css-theme-bot-bg) !important; 
       border: none !important; /* BOUNDARY REMOVED */
       border-radius: 30px !important;
       padding: 8px 18px !important;
       color: var(--llm-css-theme-text-color) !important;
       cursor: pointer !important;
       transition: all 0.2s ease !important;
       font-size: 14px !important;
       font-weight: 500 !important;
       display: inline-flex !important;
       align-items: center !important;
       box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important; /* Soft shadow instead of hard line */
   }

   /* INTERACTIVE STATE: Media Pills Hover & Active */
   .question-9c-pg .wrapper_objects span:hover {
       transform: translateY(-2px) !important;
       box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
   }
   .question-9c-pg .wrapper_objects span.active {
       /* Mixes the button color with the text color to show it is selected */
       background: color-mix(in srgb, var(--llm-css-theme-bot-bg) 80%, var(--llm-css-theme-text-color)) !important;
       box-shadow: inset 0 2px 4px rgba(0,0,0,0.05) !important;
       transform: scale(0.95) !important;
   }

   /* Ensure expanded media (iframe/images) scales correctly */
   .question-9c-pg .panel-collapse iframe,
   .question-9c-pg .panel-collapse img {
       max-width: 100% !important;
       border-radius: 8px !important;
       margin-top: 15px !important;
   }
   
   /* 7. The Bottom Search/Ask Bar */
   .question-9c-pg .search_question {
       display: flex !important;
       align-items: center !important;
       gap: 10px !important;
       background: var(--llm-css-theme-input-bg) !important;
       border-radius: 24px !important;
       padding: 8px 15px !important;
       border: none !important; /* BOUNDARY REMOVED */
       margin-top: 30px !important;
       box-shadow: 0 4px 15px rgba(0,0,0,0.08) !important;
   }

   .question-9c-pg .search_question textarea {
       flex: 1 !important;
       background: transparent !important;
       border: none !important;
       color: var(--llm-css-theme-input-text, #333) !important;
       resize: none !important;
       height: 40px !important;
       outline: none !important;
       font-family: inherit !important;
       padding-top: 10px !important;
   }

   /* Search Bar Action Buttons */
   .question-9c-pg .search_question button,
   .question-9c-pg .search_question a {
       background: transparent !important;
       border: none !important;
       box-shadow: none !important;
       transition: transform 0.2s ease !important;
       cursor: pointer !important;
       padding: 0 !important;
   }

   .question-9c-pg .search_question button:hover,
   .question-9c-pg .search_question a:hover {
       transform: scale(1.1) !important;
   }

   /* 8. Fix for this specific page's "Next" Button outside the search bar */
   .question-9c-pg #chk_answer_div_for_qna_long button {
       background: transparent !important; 
       border: none !important; 
       box-shadow: none !important; 
       transition: all 0.3s ease !important;
       border-radius: var(--llm-css-theme-border-radius) !important;
       float: right !important; 
   }

   .question-9c-pg #chk_answer_div_for_qna_long button p {
       color: var(--llm-css-theme-input-text, #333) !important;
       margin: 0 !important;
       padding-top: 5px !important;
       font-weight: 500 !important;
   }

   .question-9c-pg #chk_answer_div_for_qna_long button:hover {
       background: var(--llm-css-theme-practice-hover) !important;
       transform: translateY(-2px);
   }

   /* 9. Clean up transparent wrappers */
   .question-9c-pg .question-main .question-section {
       background: transparent !important;
       box-shadow: none !important;
       border: none !important;
   }

   
   
   
   
   /* =========================================================================
      11. LEGACY UI OVERRIDES: MEDIA GALLERY (Video & Image)
      ========================================================================= */

   /* 1. Page Headers */
   .chatbot-home #question-title h2,
   .chatbot-home #question-title p {
       color: var(--llm-css-theme-input-text, #333) !important; 
       text-shadow: none !important;
   }

   /* 2. The Media Player/Viewer Container (Color Only) */
   .chatbot-home .video-home .carousel-inner {
       background-color: var(--llm-css-theme-input-bg) !important; 
   }

   /* 3. The Playlist / Thumbnail Cards below (Color Only) */
   .chatbot-home .video-home .carousel-indicators li {
       background-color: transparent !important; /* REMOVES THE ORANGE BACKGROUND */
       border-color: transparent !important;
   }

   /* Hover state for playlist items (Color Only) */
   .chatbot-home .video-home .carousel-indicators li:hover {
       background-color: var(--llm-css-theme-practice-hover) !important;
   }

   /* Text inside the Playlist items (Color Only) */
   .chatbot-home .video-home .carousel-indicators li p {
       background-color: transparent !important; /* GUARANTEES NO CAPTION BACKGROUND */
       color: var(--llm-css-theme-input-text, #333) !important; /* Ensures text is readable against main bg */
   }

   /* 4. Clean up wrappers (Color Only) */
   .chatbot-home .question-main .question-section,
   .chatbot-home .video-home .message-sent {
       background-color: transparent !important;
       box-shadow: none !important;
   }
   
   /* =========================================================================
      15. LEGACY UI OVERRIDES: ADD RESOURCE FORM
      ========================================================================= */

   /* 1. Breadcrumbs & Main Titles */
   .chapter-list-box .resource-breadcrumb a,
   .chapter-list-box .question-title h2 {
       color: var(--llm-css-theme-input-text, #333) !important;
       text-shadow: none !important;
       text-decoration: none !important;
   }

   .chapter-list-box .resource-breadcrumb a:hover {
       opacity: 0.7 !important;
   }

   /* 2. The Main Form Card Container */
   .add-resource {
       background: var(--llm-css-theme-input-bg) !important;
       border-radius: var(--llm-css-theme-border-radius) !important;
       box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08) !important;
       padding: 30px !important;
       margin-top: 15px !important;
       border: var(--llm-css-theme-bot-border) !important;
   }

   /* 3. Form Labels */
   .add-resource .resource-field label,
   .add-resource .resource-field-full label,
   .add-resource .single-check label,
   .add-resource .button-title {
       color: var(--llm-css-theme-input-text, #333) !important;
       font-size: 15px !important;
       font-weight: 500 !important;
       margin-bottom: 8px !important;
       display: inline-block !important;
   }

   /* 4. All Input Fields, Selects, and Textareas */
   .add-resource .resource-field input[type="text"],
   .add-resource .resource-field input[type="date"],
   .add-resource .resource-field input[type="file"],
   .add-resource .resource-field select,
   .add-resource .resource-field-full input[type="text"],
   .add-resource .resource-field-full textarea {
       background: var(--llm-css-theme-main-bg) !important; /* Inverts for contrast */
       color: var(--llm-css-theme-input-text, #333) !important; 
       border: 2px solid color-mix(in srgb, var(--llm-css-theme-input-text, #333) 15%, transparent) !important;
       border-radius: 8px !important;
       padding: 10px 15px !important;
       font-size: 15px !important;
       width: 100% !important;
       box-shadow: inset 0 2px 4px rgba(0,0,0,0.02) !important;
       transition: all 0.3s ease !important;
       outline: none !important;
       box-sizing: border-box !important;
       font-family: inherit !important;
   }

   /* Allow textareas to be resized cleanly */
   .add-resource .resource-field-full textarea {
       resize: vertical !important;
       min-height: 100px !important;
   }

   /* Input Focus States */
   .add-resource .resource-field input:focus,
   .add-resource .resource-field select:focus,
   .add-resource .resource-field-full input:focus,
   .add-resource .resource-field-full textarea:focus {
       border-color: var(--llm-css-theme-user-bg) !important;
       box-shadow: 0 0 0 3px color-mix(in srgb, var(--llm-css-theme-user-bg) 30%, transparent) !important;
   }

   /* 5. Checkboxes (Section A, B, C, D) */
   .add-resource .sel-section {
       display: flex !important;
       gap: 15px !important;
       flex-wrap: wrap !important;
       margin-top: 10px !important;
   }
   .add-resource .single-check {
       display: flex !important;
       align-items: center !important;
       gap: 5px !important;
   }
   .add-resource .single-check input[type="checkbox"] {
       width: 18px !important;
       height: 18px !important;
       cursor: pointer !important;
   }

   /* 6. Image Buttons (Submit, Video Part, Complete Video) */
   .add-resource button,
   .resource-button button,
   .resource-footer a {
       background: transparent !important;
       border: none !important;
       box-shadow: none !important;
       transition: transform 0.2s ease !important;
       cursor: pointer !important;
       padding: 0 !important;
   }

   .add-resource button:hover,
   .resource-button button:hover,
   .resource-footer a:hover {
       transform: translateY(-2px) scale(1.02) !important;
   }

   .add-resource button img,
   .resource-button button img {
       border-radius: 8px !important;
       box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
   }

   /* Video Thumbnail before modal */
   .add-resource .resource-video img {
       border-radius: var(--llm-css-theme-border-radius) !important;
       box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
       cursor: pointer !important;
       transition: transform 0.2s ease !important;
   }
   .add-resource .resource-video img:hover {
       transform: scale(1.02) !important;
   }

   /* 7. The Video Trimmer Modal Overrides */
   .resource-video-modal .modal-content {
       background: var(--llm-css-theme-main-bg) !important;
       border-radius: var(--llm-css-theme-border-radius) !important;
       border: var(--llm-css-theme-bot-border) !important;
       box-shadow: 0 10px 40px rgba(0,0,0,0.2) !important;
   }

   .resource-video-modal .modal-header {
       border-bottom: 1px solid color-mix(in srgb, var(--llm-css-theme-input-text, #333) 10%, transparent) !important;
   }

   .resource-video-modal .modal-footer {
       border-top: 1px solid color-mix(in srgb, var(--llm-css-theme-input-text, #333) 10%, transparent) !important;
   }

   .resource-video-modal .time-outer label {
       color: var(--llm-css-theme-input-text, #333) !important;
       font-weight: 500 !important;
   }

   /* Start/End Time small inputs */
   .resource-video-modal .time-sec input {
       background: var(--llm-css-theme-input-bg) !important;
       color: var(--llm-css-theme-input-text, #333) !important;
       border: 2px solid color-mix(in srgb, var(--llm-css-theme-input-text, #333) 15%, transparent) !important;
       border-radius: 6px !important;
       padding: 5px 10px !important;
       width: 50px !important;
       text-align: center !important;
       outline: none !important;
       transition: border-color 0.2s ease !important;
   }

   .resource-video-modal .time-sec input:focus {
       border-color: var(--llm-css-theme-user-bg) !important;
   }

   /* Embedded YouTube Video in Modal */
   .resource-video-modal .modal-video iframe {
       border-radius: 8px !important;
       box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
       width: 100% !important;
   }
      
   /* =========================================================================
      13. LEGACY UI OVERRIDES: UPDATE PROFILE (Question 1a)
      ========================================================================= */

   /* 1. Main Page Background */
   .wrapper.question-1a-pg {
       background: var(--llm-css-theme-main-bg) !important;
   }

   /* 2. Page Headers and Mascot Instructions */
   .question-1a-pg #question-title h2,
   .question-1a-pg #question-title p,
   .question-1a-pg #slide-mascot h3 {
       color: var(--llm-css-theme-input-text, #333) !important; 
       text-shadow: none !important;
   }

   /* 3. The Main Form Card Container */
   .question-1a-pg .children-info-form {
       background: var(--llm-css-theme-input-bg) !important;
       border-radius: var(--llm-css-theme-border-radius) !important;
       box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08) !important;
       padding: 30px !important;
       margin-top: 15px !important;
       border: var(--llm-css-theme-bot-border) !important;
   }

   /* 4. Form Labels and Helper Text */
   .question-1a-pg .children-info-form .label,
   .question-1a-pg .children-info-form span {
       color: var(--llm-css-theme-input-text, #333) !important;
       font-size: 14px !important;
       font-weight: 500 !important;
       opacity: 0.9 !important;
       margin-bottom: 8px !important;
       display: inline-block !important;
   }

   /* 5. All Input Fields, Select Dropdowns, and Date Pickers */
   .question-1a-pg .children-info-form .form-control {
       background: var(--llm-css-theme-main-bg) !important; /* Inverts background for contrast */
       color: var(--llm-css-theme-text-color) !important;
       border: 2px solid color-mix(in srgb, var(--llm-css-theme-input-text, #333) 15%, transparent) !important;
       border-radius: 8px !important;
       padding: 10px 15px !important;
       font-size: 16px !important;
       box-shadow: inset 0 2px 4px rgba(0,0,0,0.02) !important;
       transition: all 0.3s ease !important;
       width: 100% !important;
       height: auto !important; /* Overrides legacy fixed heights */
   }

   /* Specific fix for the Secret Code inputs (Overrides inline dashed styles safely) */
   .question-1a-pg .children-info-form #scratch_input,
   .question-1a-pg .children-info-form #srno_input,
   .question-1a-pg .children-info-form #otp_input_field {
       background-image: none !important; /* Kills the inline repeating line */
       letter-spacing: 5px !important;
       text-align: center !important;
       font-family: inherit !important;
   }

   /* Input Focus States */
   .question-1a-pg .children-info-form .form-control:focus {
       border-color: var(--llm-css-theme-user-bg) !important;
       box-shadow: 0 0 0 3px color-mix(in srgb, var(--llm-css-theme-user-bg) 30%, transparent) !important;
       outline: none !important;
   }

   /* Readonly/Disabled Input States */
   .question-1a-pg .children-info-form .form-control[readonly],
   .question-1a-pg .children-info-form .form-control[disabled] {
       opacity: 0.7 !important;
       cursor: not-allowed !important;
       background: color-mix(in srgb, var(--llm-css-theme-main-bg) 70%, #888) !important;
   }

   /* 6. Profile Picture Selector */
   .question-1a-pg .profile-pic {
       cursor: pointer !important;
       transition: transform 0.2s ease, box-shadow 0.2s ease !important;
       display: inline-block !important;
       border-radius: 50% !important;
       box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
   }

   .question-1a-pg .profile-pic:hover {
       transform: scale(1.05) !important;
       box-shadow: 0 6px 20px rgba(0,0,0,0.15) !important;
   }

   .question-1a-pg .profile-pic img {
       border-radius: 50% !important;
       border: 3px solid var(--llm-css-theme-user-bg) !important;
   }

   /* 7. The Update Profile Button */
   .question-1a-pg #save_btn_profile {
       background: transparent !important;
       border: none !important;
       box-shadow: none !important;
       padding: 0 !important;
       margin-top: 20px !important;
       transition: transform 0.2s ease !important;
       cursor: pointer !important;
       display: block !important;
       width: 100% !important;
       text-align: right !important; /* Aligns to the right */
   }

   .question-1a-pg #save_btn_profile:hover {
       transform: translateY(-2px) scale(1.02) !important;
   }

   .question-1a-pg #save_btn_profile img {
       border-radius: var(--llm-css-theme-border-radius) !important;
       box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
       max-width: 150px !important;
   }

   /* 8. Clean up legacy transparent wrappers */
   .question-1a-pg .question-main .question-section,
   .question-1a-pg .mobile-profile-textarea {
       background: transparent !important;
       box-shadow: none !important;
       border: none !important;
   }
   
   
   /* =========================================================================
      14. LEGACY UI OVERRIDES: FAVOURITE BOOKS
      ========================================================================= */

   /* 1. Main Page Background */
   .wrapper.chapter-list-box {
       background: var(--llm-css-theme-main-bg) !important;
   }

   /* 2. Page Headers */
   .chapter-list-box #question-title h2,
   .chapter-list-box #question-title h2 span,
   .chapter-list-box #slide-mascot h3 {
       color: var(--llm-css-theme-input-text, #333) !important; 
       text-shadow: none !important;
   }

   /* 3. The Book Cards */
   .chapter-list-box .chapter-box {
       background: var(--llm-css-theme-user-bg) !important;
       border: var(--llm-css-theme-user-border) !important;
       border-radius: var(--llm-css-theme-border-radius) !important;
       box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08) !important;
       transition: all 0.3s ease !important;
       overflow: hidden !important; /* Crucial: Keeps the image safely inside the rounded corners */
       cursor: pointer !important;
       margin-bottom: 25px !important;
       padding-bottom: 15px !important; /* Space for the title text at the bottom */
   }

   /* Hover state for the Book Cards */
   .chapter-list-box .chapter-box:hover {
       background: var(--llm-css-theme-practice-hover) !important;
       transform: translateY(-4px) !important;
       box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12) !important;
   }

   /* 4. Book Cover Images */
   .chapter-list-box .chapter-box-image {
       width: 100% !important;
       height: 220px !important; /* Forces a uniform height for the grid */
       overflow: hidden !important;
       background: var(--llm-css-theme-input-bg) !important; /* Fallback background while loading */
       border-bottom: 1px solid rgba(0,0,0,0.05) !important;
   }

   .chapter-list-box .chapter-box-image img {
       width: 100% !important;
       height: 100% !important;
       object-fit: cover !important; /* Ensures the image fills the space without stretching */
   }

   /* 5. Book Title Text */
   .chapter-list-box .chapter-box h3 {
       color: var(--llm-css-theme-text-color) !important;
       font-size: 16px !important;
       font-weight: 600 !important;
       text-align: center !important;
       margin: 15px 10px 0 10px !important;
       text-shadow: none !important;
       line-height: 1.3 !important;
   }

   /* 6. Top Action Buttons (Update Profile) */
   .chapter-list-box #question-title button {
       background: transparent !important;
       border: none !important;
       box-shadow: none !important;
       padding: 0 !important;
       margin-left: 10px !important;
       transition: transform 0.2s ease !important;
   }

   .chapter-list-box #question-title button:hover {
       transform: scale(1.05) !important;
   }

   .chapter-list-box #question-title button img {
       border-radius: var(--llm-css-theme-border-radius) !important;
       box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
       max-height: 40px !important; /* Keeps the buttons proportional */
   }

   /* 7. Clean up transparent wrappers */
   .chapter-list-box .question-main .question-section {
       background: transparent !important;
       box-shadow: none !important;
       border: none !important;
   }
   
   
   /* =========================================================================
      16. GLOBAL UI OVERRIDES: FULLSCREEN LOADER
      ========================================================================= */

   #loader.loader {
       position: fixed !important; 
       top: 0 !important;
       left: 0 !important;
       width: 100vw !important;
       height: 100vh !important;
       background: rgba(255, 255, 255, 0.9) !important; 
       z-index: 999999 !important; 
       
       /* CRITICAL FIX: Kills the legacy translate(-50%, -50%) that was 
          pushing the whole container into the top-left quadrant */
       transform: none !important; 
   }

   /* Uses the attribute selector to inject Flexbox centering 
      ONLY when JavaScript sets it to 'display: block' */
   #loader.loader[style*="block"] {
       display: flex !important;
       justify-content: center !important;
       align-items: center !important;
   }

   #loader.loader img {
       max-width: 120px !important; 
       height: auto !important;
       position: static !important; 
       transform: none !important;
       margin: 0 !important;
   }

   /* Fixes the JS target so the scroll lock clears correctly */
   #mainbody.loader-circle,
   body.loader-circle {
       height: auto !important;
       overflow: auto !important;
   }
   
   
   /* =========================================================================
      17. Alfie voice
      ========================================================================= */

   .alfie-voice-playable {
       transition: background-color 0.2s ease, outline 0.2s ease;
       border-radius: 4px;
       padding: 2px 4px; /* Slight padding so the highlight looks nice */
       margin: -2px -4px;
       cursor: pointer;
   }

   /* Hover: Dynamically uses 8% of the bot's text color. 
      Adapts perfectly to both light and dark themes! */
   .alfie-voice-playable:hover {
       background-color: color-mix(in srgb, var(--llm-css-theme-bot-text) 8%, transparent);
   }

   /* Highlight: Dynamically uses 25% of the user bubble color (primary brand color). 
      Creates a beautiful, on-theme reading highlight without hardcoding blue. */
   .alfie-voice-highlight {
       background-color: color-mix(in srgb, var(--llm-css-theme-user-bg) 25%, transparent);
   }
   
   

   /* =========================================================================
      18. Pre login image gloe when  Alfie speaks
      ========================================================================= */

   
	  /* Smooth, breathing glow for the active image */
	  .alfie-speaking-glow {
	      /* Mixes the solid theme accent color with 40% transparency for a soft glow */
	      box-shadow: 0 0 20px 5px color-mix(in srgb, var(--llm-css-theme-user-bg) 60%, transparent);
	      
	      transform: scale(1.02); /* Slight pop out effect */
	      
	      /* Inherit the exact border-radius from the active dynamic theme */
	      border-radius: var(--llm-css-theme-border-radius, 12px); 
	      
	      transition: all 0.4s ease-in-out;
	      z-index: 10;
	      position: relative;
	  }

	  /* Ensure the parent box allows the scale effect without clipping */
	  .home_page_pre_login_media_box {
	      overflow: visible; 
	  }