/* lesson-player.css - FINAL VERSION (MODIFIED) */

/* --- 1. CORE SETUP & VARIABLES --- */
:root {
    --primary-color: #3b82f6; --primary-hover: #2563eb;
    --correct-color: #22c55e; --incorrect-color: #ef4444;
    --bg-light: #f3f4f6; --bg-white: #ffffff;
    --border-color: #e5e7eb; --text-dark: #1f2937; --text-light: #6b7280;
    --highlight-yellow: #fde68a;
    /* Default theme: Spring Pastels */
    --color-blob-1: #F7D9E3;
    --color-blob-2: #D6F2E2;
    --color-blob-3: #FCF0C8;
    --color-blob-4: #a8e6cf; /* Fallback for the 4th blob */
}

/* --- NEW: EDITOR MODAL STYLES --- */
#editor-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s;
}
#editor-modal.show {
    opacity: 1;
    visibility: visible;
}
.editor-modal-content {
    background-color: var(--bg-light);
    width: 95%;
    height: 95%;
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    overflow: hidden;
    transform: scale(0.95);
    transition: transform 0.3s ease;
}
#editor-modal.show .editor-modal-content {
    transform: scale(1);
}
#editor-iframe {
    width: 100%;
    height: 100%;
    border: none;
}
/* --- END: EDITOR MODAL STYLES --- */

html, body {
    margin: 0;
    padding: 0;
    /* 1. Use the dynamic --vh variable from your JS instead of standard percentages */
    height: 100dvh; /* Modern native fallback */
    height: calc(var(--vh, 1vh) * 100);
    
    /* 2. Stop mobile browsers from rubber-banding (pulling the canvas up) */
    overscroll-behavior-y: none;
    overscroll-behavior-x: none;
    
    font-family: 'Inter', sans-serif;
}

/* --- 2. LAYOUT --- */
body {
    max-width: 65rem;
    margin: 0 auto;
    background-color: white;
    background-repeat: repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    /* 3. Physically lock the body to the exact dimensions of the screen */
    position: fixed;
    inset: 0; 
    width: 100%;
    overflow: hidden;
    
    padding-top: 0;
    padding-bottom: 0;
}
@media (min-width: 768px) {
    body {
        background-image: url('paperboard-texture.jpg');
    }
}
.lesson-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    box-sizing: border-box;
    min-height: 0;
    width: 100%;
    padding-bottom: 0; 
}
#passage-container {
    display: flex;
    flex-direction: column;
    background-color: var(--bg-white);
    /* REMOVED: border-radius: 1rem; */
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    padding: 1rem;
    width: 100%;
    margin: 0 auto;
    flex: 1 1 auto;
    min-height: 0;
    box-sizing: border-box;
    transition: flex 0.4s ease-in-out !important;
}

/* --- DESKTOP PASSAGE CONTAINER BORDER (MIN-WIDTH 768px) --- */
@media (min-width: 768px) {
    #passage-container {
        border-radius: 0; /* No radius on desktop */
        border: 1px solid var(--border-color); /* Added solid border */
        box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* Slightly reduced shadow */
    }
}
/* --- MOBILE PASSAGE CONTAINER (MAX-WIDTH 768px) --- */
@media (max-width: 768px) {
    #passage-container {
        border-radius: 0; /* No radius on mobile */
        border: none; /* No border on mobile */
        box-shadow: 0 4px 8px rgba(0,0,0,0.05); /* Lighter shadow */
    }
}


.passage-content-wrapper {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow-y: auto;
    min-height: 0;
    align-items: stretch;
    justify-content: flex-start;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.passage-content-wrapper::-webkit-scrollbar {
    display: none;
}
.passage-content-wrapper.center-content,
#passage-container.center-content {
    
    align-items: center;
}

/* --- SOLUTION: VIDEO LESSON STYLES FIXES --- */
#video-lesson-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    overflow: hidden;
    justify-content: flex-start;
    min-height: 0;
}
.video-wrapper {
    position: relative;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.2), 0 8px 10px -6px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
#video-player-container {
    width: 100%;
    background-color: #000;
    flex: 0 0 auto;
    min-height: auto;
}
#youtube-player {
    width: 100%;
    aspect-ratio: 16 / 9;
}
#transcript-container {
    flex-grow: 0;
    flex-shrink: 0;
    overflow: visible;
    padding: 0;
    background-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: white;
    text-align: center;
    min-height: auto;
    display: block;
    transition: height 0.3s ease;
    }
.transcript-line {
    display: none;
}
/* --- END OF FIX --- */


.exercise-card {
    background-color: var(--bg-white);
    /* REMOVED: border-radius: 1rem; */
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    padding: 2rem 2.5rem;
    width: 95%;
    margin: 0 auto;
    box-sizing: border-box;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* --- DESKTOP EXERCISE CARD BORDER (MIN-WIDTH 768px) --- */
@media (min-width: 768px) {
    .exercise-card {
        border-radius: 0; /* No radius on desktop */
        border: 1px solid var(--border-color); /* Added solid border */
        box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* Slightly reduced shadow */
    }
}
/* --- MOBILE EXERCISE CARD (MAX-WIDTH 768px) --- */
@media (max-width: 768px) {
    .exercise-card {
        border-radius: 0; /* No radius on mobile */
        border: none; /* No border on mobile */
        box-shadow: 0 4px 8px rgba(0,0,0,0.05); /* Lighter shadow */
    }
}


#carousel-container {
    flex-shrink: 0;
    position: relative;
    z-index: 100 !important; /* Forces it above the audio bar */
    width: 100%;
    margin: 0 auto;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 -4px 20px -1px rgba(0,0,0,0.15);
    overflow: visible !important;
    /* CRITICAL FIX: Stops the menu from being chopped off */
    overflow: visible !important; 
    
    box-sizing: border-box;
    transition: background 0.5s ease, flex 0.4s ease-in-out !important;
}

/* --- DESKTOP CAROUSEL CONTAINER BORDER (MIN-WIDTH 768px) --- */
@media (min-width: 768px) {
    #carousel-container {
        border-radius: 0; /* No radius on desktop */
        border: 1px solid var(--border-color); /* Added solid border */
        box-shadow: 0 0 15px rgba(0,0,0,0.1); /* Adjusted shadow */
    }
}
/* --- MOBILE CAROUSEL CONTAINER (MAX-WIDTH 768px) --- */
@media (max-width: 768px) {
    #carousel-container {
        border-radius: 0; /* No radius on mobile */
        border: none; /* No border on mobile */
        box-shadow: 0 -4px 10px rgba(0,0,0,0.05); /* Lighter shadow */
    }
}

.carousel-container {
  border-radius: 15px 15px 0 0;
}
.carousel-box {
    width: 100%;
    max-width: 56rem;
    margin: auto;
    position: relative;
    z-index: 1;
    border-radius: 1rem;
    background-color: transparent;
}

/* --- 3. AURORA BACKGROUND --- */
.aurora-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    filter: blur(20px);
    opacity: 0.5;
    pointer-events: none;
    border-radius: inherit;
}

/* 3a. DEFAULT (MOBILE): global hidden, local visible */
.aurora-global {
    display: none;
}
#carousel-container .aurora-background {
    display: block;
}

/* 3b. DESKTOP OVERRIDE + CUSTOM LESSON BG */
@media (min-width: 768px) {

    /* Base desktop: show fixed aurora behind content */
    body {
        background-color: transparent !important;
        background-image: none !important;
    }

    .aurora-global {
        display: block !important;
        position: fixed;
        inset: 0;
        width: 100vw;
        height: 100vh;
        z-index: -1;
        opacity: 0.8;
        border-radius: 0;
    }

    .lesson-wrapper {
        position: relative;
        z-index: 1;
    }

    #carousel-container .aurora-background {
        display: none !important;
    }

    /* When user enables profile background in lesson settings */
    body.custom-lesson-bg {
        background-color: #020617 !important;           /* fallback */
        background-image: var(--lesson-custom-bg-image) !important;
        background-size: cover;
        background-position: center center;
        background-attachment: fixed;
    }

    body.custom-lesson-bg .aurora-global {
        display: none !important; /* hide aurora when custom image is on */
    }
}

/* Small UI styles for the upload area in the settings modal */
.lesson-bg-section {
    margin-bottom: 1.25rem;
    padding: 0.5rem 0;
    border-bottom: 1px dashed rgba(148, 163, 184, 0.5);
}

.lesson-bg-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.lesson-bg-toggle-label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: #585858;
}

.lesson-bg-preview-wrapper {
    margin-top: 0.5rem;
}

.lesson-bg-preview {
    width: 100%;
    max-width: 260px;
    height: 80px;
    border-radius: 0.75rem;
    border: 1px solid rgba(148, 163, 184, 0.6);
    background-size: cover;
    background-position: center;
    background-color: #0f172a;
    position: relative;
    overflow: hidden;
}

.lesson-bg-preview-label {
    position: absolute;
    bottom: 4px;
    left: 8px;
    font-size: 0.7rem;
    color: #e5e7eb;
    text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}

.lesson-bg-hint {
    margin-top: 0.35rem;
    font-size: 0.75rem;
    color: #9ca3af;
}


    /* 2. ALWAYS Show Global Aurora (Fixed to Viewport) */
    .aurora-global {
        display: block !important; /* Force visible */
        position: fixed;
        inset: 0;
        width: 100vw;
        height: 100vh;
        z-index: -1; /* Behind content */
        opacity: 0.8; 
        border-radius: 0;
    }
    
    /* 3. Ensure content sits ABOVE the background */
    .lesson-wrapper {
        position: relative;
        z-index: 1;
    }

    /* 4. Hide Local Aurora (Container) on desktop to avoid duplication */
    #carousel-container .aurora-background {
        display: none !important;
    }
}

/* --- 4. GENERAL COMPONENTS & TEXT STYLES --- */
.lesson-title {
    color: var(--text-dark);
    font-size: 1.2rem;
    font-weight: 700;
    margin-top: 4rem;
}
#passage-container .lesson-title {
    margin-top: 0;
}
.lesson-subtitle {
    color: var(--text-light);
    font-size: 1.1rem;
    margin-bottom: 0;
}
.prose {
    color: var(--text-dark);
    line-height: 1.7;
    font-size: 1.2rem; /* <-- Changed to 1.2rem and added the missing semicolon */
}
.prose strong {
    font-weight: 700;
}
.prose span.correct { background-color: rgba(34, 197, 94, 0.2); }
.prose span.incorrect { background-color: rgba(239, 68, 68, 0.2); }
.answer-btn {
    background-color: var(--bg-white);
    border: 1px solid var(--border-color);
    padding: 0.75rem;
    border-radius: 0.5rem;
    font-size: 1.2rem;
    cursor: pointer;
}
.answer-btn.correct {
    background-color: var(--correct-color);
    color: white;
    border-color: var(--correct-color);
}
.answer-btn.incorrect {
    background-color: var(--incorrect-color);
    color: white;
    border-color: var(--incorrect-color);
}
.nav-btn {
    background-color: var(--primary-color);
    color: white;
    padding: 0.6rem 1.5rem;
    border: none;
    border-radius: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: 500;
    transition: background-color: 0.2s ease, transform 0.1s ease;
}
.nav-btn:hover { transform: translateY(-1px); }
.nav-btn:active { transform: translateY(0); }
.nav-btn.secondary {
    background-color: #d1d5db;
    color: var(--text-dark);
}
.nav-btn:disabled {
    background-color: #9ca3af;
    cursor: not-allowed;
}

/* --- UPDATED ICON STYLES (Modern) --- */
.btn-icon {
    background-color: transparent;
    border: none;
    cursor: pointer;
    color: #6b7280; /* Default Grey */
    padding: 0.5rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    width: 44px; /* Slightly larger touch target */
    height: 44px;
}

.btn-icon:hover {
    background-color: #f3f4f6;
    color: #1f2937; /* Darker on hover */
}

/* Ensure SVGs scale nicely */
.btn-icon svg, 
#close-btn svg {
    width: 26px;
    height: 26px;
    /* Important: Use stroke, not fill for modern look */
    fill: none;
   }

/* 2. Fix the Close Button (Remove "Drabness") */
#close-btn.btn-icon-only {
    /* Make it look like the other icons on mobile, text hidden via font-size 0 */
    background-color: transparent;
    color: #ef4444; /* Red color for 'Close' action */
    border: 1px solid #fee2e2; /* Subtle red border */
    
    
    
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
#close-btn.btn-icon-only:hover {
    background-color: #fef2f2;
    color: #dc2626;
}

/* 3. Fix the AI Chat Button Color & Style */
#ai-chat-btn.ai-trigger-btn {
    /* Gradient Background for modern AI look */
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    color: white; /* White icon */
    box-shadow: 0 4px 10px rgba(168, 85, 247, 0.3); /* Soft purple glow */
    border: 1px solid rgba(255,255,255,0.2);
}

#ai-chat-btn.ai-trigger-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(168, 85, 247, 0.4);
}

.passage-controls {
    position: static; /* Let it flow naturally in the layout */
    transform: none;  /* Remove centering transform */
    width: 100%;
    max-width: 100%;  /* Fill the container it is placed in */
    z-index: 1;       /* Standard z-index */
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 0.1rem 1rem;
    border: transparent; /* Ensure border is visible */
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    transition: opacity 0.3s ease;
}
/* --- UPDATED GRAMMAR MODE LOGIC --- */
/* Don't hide the whole container, just modify layout for centering */
body.grammar-mode .passage-controls {
    display: flex !important;
    opacity: 1 !important;
    justify-content: center !important; /* Center the font group */
}

/* Fix font group style when it is the only visible child */
body.grammar-mode .passage-controls .font-resizer-group {
    border-left: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* Adjust the wrapper padding */
body.grammar-mode .lesson-with-passage .passage-content-wrapper {
    padding-top: 0rem;
}
/* --- END GRAMMAR MODE LOGIC --- */
/* Adjust the wrapper padding when controls are hidden (e.g., in grammar mode) */
body.grammar-mode .lesson-with-passage .passage-content-wrapper {
    padding-top: 0rem;
}
/* Ensure the title inside passage container still has top margin if the wrapper padding isn't enough */
#passage-container .lesson-title {
    margin-top: 0; 
}
#passage-audio-player-container {
    flex-grow: 1;
    margin: 0.5rem 0;
}
#passage-audio-player { width: 100%; }

/* --- 5. EXERCISE-SPECIFIC STYLES --- */
.word-bank, .terms-bank {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}
.open-ended-textarea[readonly] {
    background-color: #f0f0f0;
    cursor: not-allowed;
    color: #555;
}
#question-container {
   
    text-align: center;
}
#question-text {
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.6;
}
#answers-container {
    padding: 0 1.5rem 0.5rem 1.5rem;
    gap: 0.5rem;
    border-bottom: solid wheat;
}

/* --- 6. MOBILE & RESPONSIVE STYLES (General) --- */
@media (max-width: 768px) {
    .lesson-wrapper {
        padding-top: 0;
    }
    .prose {
        padding-top: 0rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .exercise-card {
        padding: 1.5rem 1rem;
    }
    .exercise-card .fib-question {
        font-size: 1.4rem;
        line-height: 2.2;
    }
    .lesson-title { font-size: 1.2rem; }
    .lesson-subtitle { font-size: 1rem; }
    .prose, .sample-answer { font-size: 0.9rem; }
    #question-text { font-size: 1.3rem; }
    .answer-btn { font-size: 0.8rem; }
    .definition-text { font-size: 0.9rem !important;}
    .show-answer-btn { font-size: 0.9rem; }
    .subtitle-line { font-size: 0.85rem; }

    /* --- UPDATED: Overlay Layout for Mobile --- */
     .media-overlay-content {
         padding-left: 5px;
         padding-right: 5px;
         gap: 0;
    }

    .media-overlay-audio {
        height: 18vh; 
        display: flex; 
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        z-index: 10;
    }
    .media-overlay-audio #passage-audio-player-container,
    .media-overlay-audio #fetch-audio-btn {
         max-height: 100%;
    }

    .media-overlay-viewer {
        height: 38vh;
        flex-shrink: 0;
    }
   .media-overlay-viewer img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        display: block;
        margin: 0 auto;
        transition: transform 0.25s ease;
        will-change: transform;
        z-index: 1000;    
    }

    .media-overlay-viewer img.zoomed {
        transform: scale(1);
        cursor: default;
    }
    
     .media-overlay-arrow-container {
         padding: 2px 0;
         height: 4vh; 
         flex-shrink: 0;
     }

    .media-overlay-caption { 
        height: 40vh; 
        font-size: 1.2rem;
        flex-shrink: 0;
    }
    .media-overlay-nav {
         width: 40px;
         height: 40px;
    }
     .media-overlay-close {
          width: 32px;
          height: 32px;
          font-size: 1.3rem;
     }
} 


/* --- 7. UNIFIED NAVIGATION STYLES --- */

/* Shared Style for Chat and Settings buttons (Green Gradient) */
.styled-nav-btn {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); /* Success Green */
    color: white; 
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 10px rgba(34, 197, 94, 0.3);
    
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    transition: all 0.2s ease;
}

.styled-nav-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(34, 197, 94, 0.4);
    filter: brightness(1.05);
}

.styled-nav-btn svg {
    stroke: white; /* Force white icon */
    fill: none;
    width: 24px;
    height: 24px;
}

/* Container Layout (Desktop) */
/* --- 7. UNIFIED NAVIGATION STYLES (REPLACEMENT) --- */

/* Shared Green Gradient for Chat & Settings */
.styled-nav-btn {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 10px rgba(34, 197, 94, 0.3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    transition: all 0.2s ease;
}
.styled-nav-btn svg {
    stroke: white;
    fill: none;
    width: 24px;
    height: 24px;
}

/* Desktop Grid */
#navigation-container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0.5rem;
    
    /* FIX 1: Add 1.5rem horizontal padding so buttons don't touch the screen edges */
    padding: 0.5rem 1.5rem; 
    
    /* FIX 2: Force font-size to 0 to make the stray ')' character instantly vanish */
    font-size: 0; 
    color: transparent;
}

/* Restore normal text rendering for items inside the navigation bar */
#navigation-container > * {
    font-size: 1rem;
    color: initial;
}
#close-btn { justify-self: start; }
#feedback-btn-wrapper { justify-self: end; display: flex; gap: 0.5rem; }

/* Mobile Grid (5 Columns) */
@media (max-width: 768px) {
    #navigation-container {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important;
        padding: 10px 0 !important;
        width: 100% !important;
        background-color: rgba(255, 255, 255, 0.85);
        border-top: 1px solid var(--border-color);
        z-index: 20;
    }
    #feedback-btn-wrapper { display: contents !important; }

    /* 1. Close */
    #close-btn {
        grid-column: 1 !important; grid-row: 1 !important;
        position: static !important; width: 44px; height: 44px;
        background: transparent !important; color: #ef4444 !important;
    }
    
    /* 2. Chat (Green) */
    #ai-chat-btn {
        grid-column: 2 !important; grid-row: 1 !important;
        position: static !important; margin: 0 auto !important;
        width: 48px !important; height: 48px !important;
        /* Force Gradient */
        background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
        box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3) !important;
    }

    /* 3. Next */
    #next-btn {
        grid-column: 3 !important; grid-row: 1 !important;
        width: 56px; height: 56px;
    }

    /* 4. Settings (Green) */
    #settings-btn {
        grid-column: 4 !important; grid-row: 1 !important;
        position: static !important; margin: 0 auto !important;
        width: 48px !important; height: 48px !important;
        /* Force Gradient */
        background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
        box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3) !important;
    }

    /* 5. Edit/Feedback */
    #edit-mode-btn, #feedback-btn {
        grid-column: 5 !important; grid-row: 1 !important;
    }
}
#close-btn { justify-self: start; }
#feedback-btn-wrapper { justify-self: end; display: flex; gap: 0.5rem; }

/* === MOBILE NAVBAR REDESIGN (5-Column Grid) === */
@media (max-width: 768px) {
    #navigation-container {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important; /* 5 Equal Columns */
        grid-template-rows: 1fr !important;
        align-items: center !important;
        justify-items: center !important;
        padding: 10px 0 !important;
        width: 100% !important;
        position: relative;
        background-color: #ffffff; 
        border-top: 1px solid var(--border-color);
        /* REMOVED BORDER-RADIUS: border-radius: 0 0 1rem 1rem; */
        border-radius: 0;
        z-index: 20; 
    }

    #feedback-btn-wrapper { display: contents !important; }

    /* COL 1: Close */
    #close-btn {
        grid-column: 1 !important; grid-row: 1 !important;
        font-size: 0 !important;
        background: transparent !important; border: none !important;
        color: #ef4444 !important;
        width: 44px; height: 44px; padding: 0;
        display: flex !important; align-items: center; justify-content: center;
        position: static !important;
    }
    #close-btn svg { width: 24px; height: 24px; stroke: currentColor; }

    /* COL 2: AI Chat (Green) */
    #ai-chat-btn {
        grid-column: 2 !important; grid-row: 1 !important;
        position: static !important; margin: 0 auto !important; transform: none !important;
        width: 48px !important; height: 48px !important;
    }

    /* COL 3: Next (Big Arrow) */
    #next-btn {
        grid-column: 3 !important; grid-row: 1 !important;
        font-size: 0 !important;
        width: 56px; height: 56px;
        border-radius: 50%; padding: 0; margin: 0;
        background-color: var(--primary-color) !important;
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='32px' viewBox='0 0 24 24' width='32px' fill='%23ffffff'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6-6-6z'/%3E%3C/svg%3E");
        background-repeat: no-repeat; background-position: center; border: none !important;
    }
    #next-btn.btn-success {
        background-color: var(--correct-color) !important;
        box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='32px' viewBox='0 0 24 24' width='32px' fill='%23ffffff'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E");
    }

    /* COL 4: Settings (Green) */
    #settings-btn {
        grid-column: 4 !important; grid-row: 1 !important;
        position: static !important; margin: 0 auto !important; transform: none !important;
        width: 48px !important; height: 48px !important;
    }

    /* COL 5: Edit / Feedback */
    #edit-mode-btn, #feedback-btn {
        grid-column: 5 !important; grid-row: 1 !important;
        width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
    }
}
/* --- MISCELLANEOUS & MODAL STYLES --- */
#settings-modal {
    position: fixed;
    inset: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
#settings-modal.hidden {
    display: none;
}

.settings-modal-content {
    background-color: #fff;
    border-radius: 1rem;
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
    width: 100%;
    max-width: 24rem;
}
.settings-modal-header {
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.settings-modal-header h3 {
    font-size: 1.25rem;
    font-weight: bold;
    color: var(--text-dark);
    margin: 0;
}
.settings-modal-header button {
    color: #9ca3af;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 2rem;
    line-height: 1;
    padding: 0;
}
.settings-modal-header button:hover {
    color: #4b5563;
}
.settings-modal-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.theme-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem;
    border-radius: 0.5rem;
    cursor: pointer;
}
.theme-label:hover {
    background-color: #f9fafb;
}
.theme-label .theme-name {
    font-weight: 600;
    color: #374151;
}
.theme-details {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.theme-color-swatch {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 9999px;
}
.theme-label input[type="radio"] {
    margin-left: 0.5rem;
    -webkit-appearance: none;
    appearance: none;
    width: 1.25em;
    height: 1.25em;
    border: 2px solid #ccc;
    border-radius: 50%;
    display: grid;
    place-content: center;
}
.theme-label input[type="radio"]::before {
    content: "";
    width: 0.75em;
    height: 0.75em;
    border-radius: 50%;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em var(--primary-color);
}
.theme-label input[type="radio"]:checked {
    border-color: var(--primary-color);
}
.theme-label input[type="radio"]:checked::before {
    transform: scale(1);
}
/* ... rest of exercise-specific styles ... */
.gapped-text-passage {
    width: 100%;
    font-size: clamp(0.7rem, 0.8rem + 0.5vw, 1.3rem);
    line-height: 2.8;
    text-align: center;
    margin-top: auto;
    margin-bottom: auto;
    font-size: 1.1rem;
}
.gap-dropzone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 100px;
    height: 30px;
    background-color: var(--bg-light);
    border: 1px solid #1554d3;
    border-radius: 0.375rem;
    vertical-align: middle;
    margin: 0 4px;
    padding: 0 0.5rem;
    cursor: pointer;
}
.gap-dropzone.active {
    border-style: dashed;
}
.word-bank-btn {
    padding: 0.5rem 1rem;
    background-color: #e0e7ff;
    border: 1px solid #c7d2fe;
    border-radius: 0.375rem;
    cursor: pointer;
    user-select: none;
}
.word-bank-btn.active {
    box-shadow: 0 0 0 2px var(--primary-color);
    background-color: #c7d2fe;
}
.word-bank-btn:disabled {
    background-color: #e5e7eb;
    color: var(--text-light);
    cursor: not-allowed;
    text-decoration: line-through;
}
.placed-word {
    font-weight: 600;
    color: var(--primary-color);
    cursor: pointer;
    font-size: 1.1rem;
}
.placed-word.correct {
    color: var(--correct-color);
}
.placed-word.incorrect {
    color: var(--incorrect-color);
    text-decoration: line-through;
}
.term-btn {
    background-color: #e0e7ff;
    border: 1px solid #c7d2fe;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    cursor: pointer;
    user-select: none;
    font-weight: 500;
}
.term-btn.active {
    box-shadow: 0 0 0 2px var(--primary-color);
    background-color: #c7d2fe;
}
.term-btn:disabled {
    background-color: #e5e7eb;
    color: var(--text-light);
    cursor: not-allowed;
    text-decoration: line-through;
}
.definitions-column {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: auto;
    margin-bottom: auto;
}
.definition-box {
    background-color: var(--bg-white);
    padding: 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.definition-box:has(.placed-term) {
    flex-wrap: wrap;
}
.definition-dropzone {
    flex-shrink: 0;
    min-width: 60px;
    height: 32px;
    background-color: var(--bg-light);
    border: 1px dashed var(--border-color);
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.definition-text {
    flex-grow: 1;
    color: var(--text-dark);
   }
.placed-term {
    font-weight: 500;
    color: var(--primary-color);
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0.25rem 0.5rem;
    background-color: #e0e7ff;
    border-radius: 0.375rem;
    white-space: normal;
    word-break: break-word;
    line-height: 1.4;
}
.placed-term.correct {
    color: var(--correct-color);
    background-color: #dcfce7;
}
.placed-term.incorrect {
    color: var(--incorrect-color);
    background-color: #fee2e2;
    text-decoration: line-through;
}
.open-ended-question {
    margin-bottom: 1.5rem;
    padding: 1rem;
    font-family: 'Inter', sans-serif;
    font-size: 1.3rem;
    line-height: 1.6;
}
.open-ended-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem;
    border-radius: 0.5rem;
    border: 1px solid var(--border-color);
    font-family: inherit;
    font-size: 1rem;
    margin-top: 0.75rem;
}
.open-ended-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.75rem;
    align-items: center;
}
.media-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.media-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.media-btn:disabled {
    background-color: #e5e7eb !important;
    cursor: not-allowed;
    transform: scale(1);
    box-shadow: none;
}
.media-btn svg {
    width: 24px;
    height: 24px;
    fill: white;
}
.record-btn { background-color: var(--incorrect-color); }
.record-btn.record-btn-pulsing-green {
    background-color: var(--correct-color);
    animation: pulse 1.5s infinite;
}
.stop-btn {
    background-color: var(--text-light);
    display: none;
}
.submit-open-btn { background-color: var(--primary-color); }
.play-audio-btn {
    background-color: #1e90ff;
    display: none;
}
.re-record-btn {
    background-color: #ff8c00;
    display: none;
}
.sample-audio-btn { background-color: #1e90ff; }
.recording-indicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: var(--incorrect-color);
    border-radius: 50%;
    margin-right: 5px;
    animation: pulse 1.5s infinite;
}
#fetch-audio-btn {
    background-color: var(--primary-color);
    flex-shrink: 0;
}
#fetch-audio-btn.loading svg {
    animation: spin 1s linear infinite;
}
.feedback-container {
    margin-top: 1rem;
    padding: 1rem;
    background-color: var(--bg-light);
    border-radius: 0.5rem;
    display: none;
}
.feedback-score { font-weight: bold; }
.feedback-text { margin-top: 0.5rem; }
.final-score-container {
    margin-top: 1.5rem;
    padding: 1rem;
    background-color: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    width: 100%;
    max-width: 300px;
}
.final-score-container h3 {
    margin: 0 0 0.5rem 0;
    color: var(--text-dark);
    font-size: 1.1rem;
}
.final-score-container .score-display {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color);
}
.show-answer-btn {
    background-color: var(--primary-color);
    color: white;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background-color 0.2s ease;
    margin-top: 0.75rem;
}
.show-answer-btn:hover {
    background-color: var(--primary-hover);
}
.sample-answer {
    display: none;
    margin-top: 0.75rem;
    padding: 0.75rem;
    background-color: #f0f9ff;
    border-left: 4px solid #3b82f6;
    border-radius: 4px;
    color: #1e40af;
}
.sample-answer.visible { display: block; }
.example-answer-reveal-area { display: block; }
body.preview-mode .student-interaction-area { display: none; }
.translatable { cursor: pointer; }
.translatable:hover { background-color: #e0e7ff; }
#translation-tooltip, #info-tooltip {
    position: fixed;
    display: none;
    background-color: #1e293b;
    color: white;
    padding: 0.75rem;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.15);
    z-index: 1000;
    max-width: 300px;
    font-size: inherit;
    pointer-events: auto;
}
#info-tooltip { pointer-events: none; }
.sample-answer-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
}
.feedback-modal {
    position: fixed;
    z-index: 1050;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}
.feedback-modal-content {
    background-color: #fff;
    padding: 25px;
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    position: relative;
    display: flex;
    flex-direction: column;
    max-height: 85vh;
    overflow-y: auto;
}
.feedback-close-btn {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}
.feedback-section { margin-bottom: 15px; }
#bug-report-text {
    width: 100%;
    min-height: 80px;
    margin: 5px 0 10px 0;
    padding: 8px;
    box-sizing: border-box;
}
.btn {
    padding: 8px 15px;
    border-radius: 5px;
    border: 1px solid transparent;
    cursor: pointer;
}
.btn-primary {
    background-color: var(--primary-color);
    color: white;
}
.btn-secondary {
    background-color: var(--text-light);
    color: white;
}
#ai-explanation-box {
    display: none;
    margin-top: 15px;
    padding: 10px;
    border-radius: 5px;
    background-color: #f0f9ff;
    border-left: 4px solid #3b82f6;
}
#ai-explanation-controls { margin-top: 10px; }
#play-explanation-audio {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 5px;
    cursor: pointer;
}
#listening-challenge-row {
    display: flex;
    justify-content: center;
    padding: 1rem 0 0 0;
}
/* === LISTENING CHALLENGE "POWER UP" BUTTON === */
#listening-challenge-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.6rem 1.2rem;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 0.5rem;
    color: #000000;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, rgb(34 197 94 / 29%) 0%, rgb(34 197 94 / 44%) 100%);
    background-size: 200% auto;
    border: none;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
    cursor: pointer;
    transition: all 0.3s 
cubic-bezier(0.25, 0.8, 0.25, 1);
    animation: challengePulse 3s;
}

#listening-challenge-btn svg {
    /* Make icon slightly transparent to emphasize text */
    opacity: 0.9;
    width: 18px;
    height: 18px;
}

/* Hover State: Lift and Shine */
#listening-challenge-btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.6);
    background-position: right center; /* Shifts gradient */
    filter: brightness(1.1);
}

/* Active/Click State */
#listening-challenge-btn:active {
    transform: translateY(1px) scale(0.98);
    box-shadow: 0 2px 10px rgba(99, 102, 241, 0.3);
}

/* Disabled State */
#listening-challenge-btn:disabled {
    background: #e2e8f0;
    color: #94a3b8;
    box-shadow: none;
    cursor: not-allowed;
    animation: none;
    transform: none;
}

/* The Pulse Animation */
@keyframes challengePulse {
    0% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(139, 92, 246, 0); }
    100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0); }
}
.info-icon {
    cursor: help;
    position: relative;
    color: var(--text-light);
    display: inline-flex;
    align-items: center;
}
.info-icon .tooltip-text { display: none !important; }
.fib-input-container {
    display: inline-block;
    position: relative;
    vertical-align: baseline;
    margin: 0 4px;
    padding-bottom: 24px;
}
.cloze-dropzone {
    display: inline-block;
    min-width: 120px;
    padding: 0 8px;
    line-height: 1.5;
    background-color: var(--bg-light);
    border: 1px dashed #ced4da;
    border-radius: 6px;
    font-weight: 500;
    text-align: center;
    color: var(--primary-color);
    cursor: text;
    transition: all 0.2s ease-in-out;
}
.cloze-dropzone:focus {
    outline: none;
    border-style: solid;
    border-color: var(--primary-color);
    background-color: var(--bg-white);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}
.cloze-dropzone.incorrect {
    color: var(--incorrect-color);
    text-decoration: line-through;
    background-color: #fee2e2;
    border-color: transparent;
}
.correct-answer-display {
    top: 100%;
    left: 0;
    margin-top: -22px;
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--correct-color);
    background-color: #f0fdf4;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: normal !important;
    z-index: 1;
}
.fib-question {
    margin-bottom: 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 1rem;
    font-size: 1.4rem;
    line-height: 2;
}
.fib-question-instruction {
    font-weight: 500;
    margin-bottom: 1rem;
    font-size: 1rem;
    color: var(--text-dark);
}
.fib-sentence-part { display: inline; }
.cloze-dropzone.correct {
    color: #166534;
    border-color: var(--correct-color);
    background-color: #dcfce7;
    text-align: center;
}
.cloze-sentence-hidden { display: none !important; }
.cloze-footer {
    display:flex;
    gap:.75rem;
    align-items:center;
    justify-content:flex-end;
    margin-top:1rem;
}
.cloze-progress {
    font-size:.9rem;
    opacity:.7;
    margin-right:auto;
}
.exercise-card .fib-question {
    font-size: 1.5rem;
    line-height: 2.5;
    font-weight: 500;
    margin: 0;
    padding: 0;
    border: none;
}
.progress-bar-container {
    width: 100%;
    max-width: 200px;
    margin: 0 auto 0.75rem auto;
    background-color: var(--border-color);
    border-radius: 9999px;
    height: 8px;
    overflow: hidden;
}
.progress-bar-fill {
    height: 100%;
    background-color: var(--primary-color);
    border-radius: 9999px;
    transition: width 0.4s ease-in-out;
}
.feedback-btn.pulse-red { animation: pulseRed 1s ease-out; }
.answer-btn.pulse-correct { animation: pulseGreen 1.2s ease-in-out 2; }
.flipping-out { animation: card-flip-out 0s forwards; }
.flipping-in { animation: card-flip-in 0.9s forwards; }
@keyframes pulseRed {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
}
@keyframes pulseGreen {
    0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
    50% { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0.4); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
@keyframes card-flip-out {
    from { transform: rotateY(0deg); opacity: 1; }
    to { transform: rotateY(90deg); opacity: 0; }
}
@keyframes card-flip-in {
    from { transform: rotateY(-90deg); opacity: 0; }
    to { transform: rotateY(0deg); opacity: 1; }
}
@keyframes pulse {
    0% { transform: scale(0.8); opacity: 0.7; }
    50% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0.8); opacity: 0.7; }
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Styles for Manual Lesson Media Carousel */
.media-carousel-container {
    width: 100%;
    max-width: 56rem;
    margin: 0 auto 1.5rem auto;
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.media-carousel-slides {
    display: flex;
    transition: transform 0.5s ease-in-out;
}
.media-carousel-slide {
    min-width: 100%;
    box-sizing: border-box;
}
.media-carousel-slide img,
.media-carousel-slide video {
    width: 100%;
    height: auto;
    display: block;
    max-height: 60vh;
    object-fit: contain;
    background-color: #f0f0f0;
}
/* This rule was for the carousel nav, not the overlay */
.media-carousel-container .media-carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.4);
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.media-carousel-container .media-carousel-nav.prev {
    left: 10px;
}
.media-carousel-container .media-carousel-nav.next {
    right: 10px;
}

.manual-question-container {
    padding: 1rem;
    background-color: var(--bg-light);
    border-radius: 1rem;
    margin-top: 1rem;
}

/* --- START OF MEDIA OVERLAY REDESIGN --- */
#media-overlay-modal {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.99);
    z-index: 2500;
    display: none;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

#media-overlay-modal.visible {
    display: flex;
}

.media-overlay-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column; /* Stacks children vertically */
    align-items: center;
    justify-content: flex-start; /* Aligns children to the top */
    color: white;
    padding: 0; /* Remove padding, handled by children */
    box-sizing: border-box;
    gap: 0; /* Remove gap, height properties control layout */
}

.media-overlay-audio {
    width: 100%;
    max-width: 600px;
    margin: 0 auto; /* Center audio player */
    flex-shrink: 0;
    order: 1; /* Audio at the top */
    z-index: 10; /* Make sure audio is on top of content */
    padding: 0 1rem; /* Add horizontal padding */
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- START: MODIFIED AUDIO PLAYER RULES --- */
.media-overlay-audio #modal-passage-audio-player-container {
     width: 100%;
}
.media-overlay-audio #modal-passage-audio-player {
     width: 100%;
     vertical-align: middle;
}
#modal-passage-audio-player-container-reveal {
    width: 100%;
}
#modal-passage-audio-player-reveal {
    width: 100%;
}
.media-overlay-audio #modal-fetch-audio-btn {
    margin: 0 auto;
}
/* --- END: MODIFIED AUDIO PLAYER RULES --- */

.media-overlay-viewer {
    width: 100%;
    flex-grow: 0; /* DO NOT GROW */
    flex-shrink: 0; /* DO NOT SHRINK */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0; 
    position: relative;
    order: 2; /* Viewer in the middle */
}

.media-overlay-viewer img,
.media-overlay-viewer video {
    max-width: 100%; /* Constrain to container width */
    height: 100%; /* CHANGED: Constrain to container height */
    object-fit: contain;
    border-radius: 0.5rem;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
    transition: transform 0.25s ease;
    will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
    .media-overlay-viewer img {
        cursor: zoom-in;
    }

    .media-overlay-viewer img.zoomed {
        cursor: zoom-out;
        transform: scale(1.6);
	z-index: 1000;
    }
}

/* Container for Arrows */
.media-overlay-arrow-container {
    display: flex;
    flex-direction: row; 
    justify-content: center;
    align-items: center;
    gap: 1rem; 
    width: 100%;
    flex-shrink: 0; 
    box-sizing: border-box;
    order: 3; /* Position between viewer and caption */
}

.media-overlay-caption {
    width: 100%;
    max-width: 65rem; /* Match body max-width */
    margin-left: auto; 
    margin-right: auto;
    flex-shrink: 0; /* DO NOT SHRINK */
    text-align: center;
    padding: 0.75rem 1.2rem;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 0.5rem;
    font-size: 1rem; /* Base font size */
    line-height: 1.5;
    overflow-y: auto;
    box-sizing: border-box;
    order: 4; /* Position after arrows */
}

/* Arrows are now normal flex items within their container */
.media-overlay-nav {
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px; /* Base size */
    height: 40px; /* Base size */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: background-color 0.2s;
    z-index: 2501; 
    flex-shrink: 0; 
}
.media-overlay-nav:hover {
    background-color: rgba(0, 0, 0, 0.8);
}
.media-overlay-nav:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.media-overlay-close { /* Still positioned absolutely relative to whole modal */
    position: absolute;
    top: 1rem;
    right: 1rem;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    line-height: 1;
    transition: background-color 0.2s;
    z-index: 2501;
}
.media-overlay-close:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/* Style for the passage media preview area */
#passage-media-preview {
    margin: 1rem auto 1.5rem auto;
    width: 100%;
    max-width: 56rem; /* keep centered with your content */
    text-align: center;
}

#passage-media-preview img,
#passage-media-preview video {
    display: block;
    width: 100%;
    height: auto;
    max-width: 480px;
    max-height: 400px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 0.5rem;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    background-color: var(--bg-light);
    object-fit: cover; 
}

/* Hover effect (desktop) */
#passage-media-preview img:hover,
#passage-media-preview video:hover {
     transform: scale(1.03);
     box-shadow: 0 16px 40px rgba(0,0,0,0.3);
}

/* Mobile: let the preview basically fill the viewport width nicely */
@media (max-width: 600px) {
    #passage-media-preview img,
    #passage-media-preview video {
        max-width: 92vw;   /* nearly full width on phone */
    }
}

/* Desktop large screens: */
@media (min-width: 1024px) {
    #passage-media-preview img,
    #passage-media-preview video {
        max-width: 300px;
    }
}
/* --- END: MEDIA OVERLAY STYLES --- */

/* --- START: DESKTOP OVERLAY LAYOUT (VH-BASED) --- */
@media (min-width: 769px) {
    .media-overlay-content {
        padding: 0; /* Remove padding */
        gap: 0; /* Remove gap */
    }

    .media-overlay-audio {
        height: 10vh; /* 10% */
        flex-basis: 10vh; 
        flex-grow: 0; 
        flex-shrink: 0; 
        max-height: none;
        padding: 2.5rem 1rem 0.5rem 1rem; /* Padding for close btn */
        box-sizing: border-box;
    }

    .media-overlay-viewer {
        height: auto; /* CHANGED: Let it be flexible */
        flex-grow: 1; /* CHANGED: Make this container grow */
        flex-basis: 0; /* CHANGED: Start from 0 and grow */
        padding-top: 1rem; /* ADDED: Separation from audio player */
        box-sizing: border-box; /* ADDED: Include padding in height calc */
    }
     .media-overlay-arrow-container {
         height: 5vh; /* 5% */
         padding: 0;
         flex-shrink: 0; /* ADDED: Don't let it shrink */
     }

    .media-overlay-caption {
        height: 30vh; /* 30% - CHANGED */
        flex-basis: 30vh; /* CHANGED */
        flex-grow: 0; 
        flex-shrink: 0; 
        max-height: 30vh; /* Enforce height - CHANGED */
        font-size: 1.3rem;
        padding: 1rem 1rem;
    }

     /* Restore arrow sizes on desktop */
     .media-overlay-nav {
         width: 44px;
         height: 44px;
    }
     .media-overlay-close {
          width: 36px;
          height: 36px;
          font-size: 1.5rem;
     }
}
/* --- END: DESKTOP OVERLAY LAYOUT --- */


  /* --- SOLUTION: SUBTITLE STYLE FIXES --- */
  .subtitle-tray{
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius:12px;
    padding:10px 12px;
  }
  .subtitle-line{
    /* Replaced 'all: unset' with specific properties for better control */
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    box-sizing: border-box;
    
    
    /* Custom styles */
    font-size:1rem;
    line-height:1.4;
    color: var(--text-dark); /* Changed to black text */
    text-align: center;
    cursor:pointer;
    text-shadow: none; /* Removed shadow for light background */
    
    /* Wrapping and Scrolling logic */
    white-space: normal;
    word-wrap: break-word;
   height: calc(1.05rem * 1.4 * 3); /* Set a steady height for 3 lines */
  max-height: calc(1.05rem * 1.4 * 2); /* Allow up to 2 lines before scrolling */
  overflow-y: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  }
  /* --- END OF FIX --- */
  .subtitle-line:hover{opacity:.95}.subtitle-line strong{font-weight:700}

/* === FLOATING CONTROLS (CONTAINER) === */
#floating-controls {
    position: fixed;
    z-index: 3000;
    
    /* DEFAULT MOBILE POSITION: Bottom Right */
    top: auto;
    left: auto;
    bottom: 20px;
    right: 20px;
    
    /* Layout */
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
    
    /* Enable pointer events for buttons */
    pointer-events: auto;
    
    /* Prevent selection during drag */
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    
    /* Transition for initial appearance, but removed during drag via JS */
    transition: transform 0.2s ease;
}

/* SHARED STYLES FOR BOTH BUTTONS */
#show-passage-btn, #ai-chat-btn {
    position: relative !important; 
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;

    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;

    background-color: var(--primary-color) !important;
    color: rgb(119, 183, 243) !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
    
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    
    /* Re-enable clicks on the buttons themselves */
    pointer-events: auto; 
}

/* Specific Colors */
#ai-chat-btn {
    background-color: #8b5cf6 !important; /* Purple for AI */
}

#show-passage-btn:hover, #ai-chat-btn:hover {
    transform: scale(1.06) !important;
    filter: brightness(1.1);
}
#show-passage-btn:active, #ai-chat-btn:active {
    transform: scale(0.95) !important;
}

/* Handle visibility */
#show-passage-btn { display: none !important; }
#show-passage-btn.visible { display: flex !important; }

/* === RESUME MODAL (RESTART/CONTINUE) — FORCE CENTER IN VIEWPORT === */
html, body {
  height: 100%;
}
/* Backdrop container fills the viewport and centers its child */
#resumeModal {
  position: fixed !important;
  inset: 0 !important;              /* top/right/bottom/left = 0 */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0,0,0,0.45) !important;
  z-index: 5000 !important;
  visibility: hidden !important;
  opacity: 0 !important;
  transition: opacity .25s ease !important;
}
#resumeModal.show {
  visibility: visible !important;
  opacity: 1 !important;
}
/* The dialog box */
#resumeModal .modal-content {
  max-width: 480px !important;
  width: calc(100% - 2rem) !important;
  background: #ffffff !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 40px rgba(0,0,0,.25) !important;
  padding: 20px 24px !important;
  text-align: center !important;
}
#resumeModal .modal-actions {
  margin-top: 12px !important;
  display: flex !important;
  gap: 10px !important;
  justify-content: center !important;
}
#resumeModal .btn {
  padding: 8px 16px !important;
  border-radius: 10px !important;
  border: none !important;
  cursor: pointer !important;
  font-weight: 600 !important;
}
#resumeModal .btn.continue {
  background: var(--primary-color, #3b82f6) !important;
  color: #fff !important;
}
#resumeModal .btn.restart {
  background: #e5e7eb !important;
  color: #111827 !important;
}
/* Ensure any accidental relative parents do not affect fixed modal */
.lesson-wrapper, #passage-container, .exercise-card, body {
  transform: none !important;
}


/* ============================================================
   === MODERN GLASSMORPHISM CHAT STYLES ===
   ============================================================ */

:root {
    --glass-bg: rgba(255, 255, 255, 0.75);
    --glass-border: rgba(255, 255, 255, 0.5);
    --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
    --accent-color: #667eea;
    --bot-msg-bg: #ffffff;
    --user-msg-bg: #667eea;
    --user-msg-text: #ffffff;
    --text-main: #2d3748;
    --text-secondary: #718096;
}

/* Overlay Wrapper */
.chat-modal-overlay {
    position: fixed; inset: 0; z-index: 5000;
    background: rgba(0, 0, 0, 0.3);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; backdrop-filter: blur(4px);
}

/* Animated Blobs */
.chat-blob {
    position: absolute; filter: blur(60px); z-index: 0; opacity: 0.6;
    animation: chatFloat 10s infinite ease-in-out alternate; pointer-events: none;
}
.blob-1 { top: 10%; left: 20%; width: 300px; height: 300px; background: #c3dbff; animation-delay: 0s; }
.blob-2 { bottom: 10%; right: 20%; width: 300px; height: 300px; background: #e8dff5; animation-delay: -5s; }
@keyframes chatFloat { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(20px, 40px) scale(1.1); } }

/* Main Modal Card */
.chat-modal-card {
    position: relative; z-index: 1;
    width: 90%; max-width: 480px; height: 85vh; max-height: 700px;
    background: var(--glass-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border); border-radius: 24px; box-shadow: var(--glass-shadow);
    display: flex; flex-direction: column; overflow: hidden;
    animation: modalZoomIn 0.3s ease-out;
}
@keyframes modalZoomIn { from { opacity: 0; transform: scale(0.95) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } }

/* Header */
.chat-header-modern {
    padding: 16px 24px; display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.4);
}
.header-info { display: flex; align-items: center; gap: 12px; }
.bot-avatar-modern {
    width: 40px; height: 40px; background: linear-gradient(135deg, #E0F7FA 0%, #E1BEE7 100%);
    border-radius: 12px; display: flex; align-items: center; justify-content: center;
    font-size: 20px; color: var(--accent-color); box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.header-text h2 { font-size: 16px; font-weight: 600; color: var(--text-main); margin: 0; }
.header-text p { font-size: 12px; color: var(--text-secondary); margin: 0; display: flex; align-items: center; gap: 4px; }
.status-dot { width: 6px; height: 6px; background: #48bb78; border-radius: 50%; display: inline-block; }
.close-btn-modern {
    background: none; border: none; color: var(--text-secondary); cursor: pointer;
    font-size: 20px; padding: 6px; border-radius: 50%; transition: background 0.2s; display: flex;
}
.close-btn-modern:hover { background: rgba(0,0,0,0.05); color: var(--text-main); }

/* Content Area */
.chat-content-modern {
    flex: 1; padding: 20px; overflow-y: auto;
    display: flex; flex-direction: column; gap: 16px; scroll-behavior: smooth;
}

/* Messages */
.message-row { display: flex; align-items: flex-end; gap: 8px; animation: msgFadeIn 0.3s forwards; }
.message-row.user { flex-direction: row-reverse; }
@keyframes msgFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.message-bubble {
    max-width: 75%; padding: 12px 16px; border-radius: 18px;
    font-size: 14px; line-height: 1.5; position: relative;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02); word-wrap: break-word;
}
.message-row.bot .message-bubble { background: var(--bot-msg-bg); color: var(--text-main); border-bottom-left-radius: 4px; }
.message-row.user .message-bubble { background: var(--user-msg-bg); color: var(--user-msg-text); border-bottom-right-radius: 4px; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.25); }
.timestamp { font-size: 10px; margin-top: 4px; opacity: 0.7; text-align: right; }

/* Typing Indicator */
.typing-indicator-modern {
    display: flex; gap: 4px; padding: 12px 16px; background: var(--bot-msg-bg);
    border-radius: 18px; border-bottom-left-radius: 4px; width: fit-content; margin-bottom: 10px;
}
.typing-dot {
    width: 6px; height: 6px; background: #90cdf4; border-radius: 50%;
    animation: typing 1.4s infinite ease-in-out both;
}
.typing-dot:nth-child(1) { animation-delay: -0.32s; }
.typing-dot:nth-child(2) { animation-delay: -0.16s; }
@keyframes typing { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }

/* Input Area */
.input-area-modern {
    padding: 16px; background: rgba(255, 255, 255, 0.4); border-top: 1px solid rgba(255, 255, 255, 0.4);
    display: flex; gap: 10px; align-items: center;
}
.input-wrapper-modern {
    flex: 1; position: relative; background: rgba(255, 255, 255, 0.8);
    border-radius: 24px; transition: box-shadow 0.2s; display: flex; align-items: center;
}
.input-wrapper-modern:focus-within { box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.3); background: #fff; }
#ai-chat-input {
    width: 100%; padding: 12px 40px 12px 16px; border: none; background: transparent;
    outline: none; font-family: 'Inter', sans-serif; font-size: 14px; color: var(--text-main);
}
.icon-upload { position: absolute; right: 12px; color: var(--text-secondary); cursor: pointer; font-size: 18px; }

/* Screenshot Attachment Badge */
.attachment-badge {
    display: flex; align-items: center; gap: 6px;
    background: #e0e7ff; color: var(--accent-color);
    padding: 4px 10px; border-radius: 12px;
    font-size: 11px; font-weight: 600;
    margin-left: 8px; white-space: nowrap;
    animation: popIn 0.2s ease;
}
.attachment-badge i { font-size: 14px; }
.remove-attach { cursor: pointer; font-size: 14px; margin-left: 4px; opacity: 0.6; }
.remove-attach:hover { opacity: 1; }
@keyframes popIn { from { transform: scale(0); } to { transform: scale(1); } }

/* Send Button */
.send-btn-modern {
    width: 42px; height: 42px; border: none; border-radius: 50%; background: var(--accent-color);
    color: white; display: flex; align-items: center; justify-content: center; cursor: pointer;
    font-size: 18px; transition: transform 0.2s, background 0.2s; box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}
.send-btn-modern:hover:not(:disabled) { transform: scale(1.05); background: #5a67d8; }
.send-btn-modern:active:not(:disabled) { transform: scale(0.95); }
.send-btn-modern:disabled { background: #cbd5e1; cursor: default; box-shadow: none; }
.chat-disclaimer-modern { font-size: 10px; text-align: center; color: rgba(0,0,0,0.3); padding-bottom: 5px; }

/* Mobile Responsiveness for Chat */
@media (max-width: 768px) {
    .chat-modal-card {
        width: 100% !important; max-width: none !important;
        height: 100% !important; max-height: none !important;
        border-radius: 0 !important;
    }
    .chat-header-modern {
        padding-top: calc(1rem + env(safe-area-inset-top));
    }
}
/* === SETTINGS DROPDOWN MENU === */
.settings-dropdown {
    position: absolute;
    top: 100%; /* Position below the settings button */
    right: 0;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    min-width: 180px;
    display: none; /* Hidden by default */
    flex-direction: column;
    padding: 6px 0;
    z-index: 2000;
    margin-top: 8px;
}
.settings-dropdown.active {
    display: flex;
}
.dropdown-item {
    padding: 10px 16px;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background-color 0.2s;
}
.dropdown-item:hover {
    background-color: var(--bg-light);
    color: var(--primary-color);
}

/* === RELOCATED AI CHAT BUTTON (Navbar Style) === */
#feedback-btn-wrapper {
    position: relative; /* Anchor for the dropdown */
    display: flex;
    align-items: center;
    gap: 12px; /* Space between AI button and Settings */
}

/* Override floating styles for the chat button when in navbar */
#feedback-btn-wrapper #ai-chat-btn {
    position: static !important;
    transform: none !important;
    margin: 0 !important;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    display: flex !important; /* FORCE SHOW UNCONDITIONALLY */
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.4);
    cursor: pointer;
    transition: transform 0.2s ease;
}
#feedback-btn-wrapper #ai-chat-btn:hover {
    transform: scale(1.08) !important;
}

/* Hide the old feedback button as it's now in the menu */
#feedback-btn {
    display: none !important;
}

/* ============================================================
   === MOBILE NAVBAR REDESIGN (SPLIT FLOATING BUTTONS) ===
   ============================================================ */

@media (max-width: 768px) {

    /* 1. FORCE 5 EQUAL COLUMNS IN ONE ROW */
    #navigation-container {
        display: grid !important;
        /* 5 equal columns: 20% width each */
        grid-template-columns: repeat(5, 1fr) !important;
        grid-template-rows: 1fr !important;
        align-items: center !important;
        justify-items: center !important;
        padding: 10px 0 !important;
        width: 100% !important;
        position: relative;
        
        /* NEW: Solid background to hide aurora (Option 2) */
        background-color: #ffffff 
        border-top: 1px solid var(--border-color);
        /* REMOVED: border-radius: 0 0 1rem 1rem; */
        border-radius: 0;
        z-index: 20; /* Above aurora */
    }

    /* 2. UNWRAP NESTED WRAPPER */
    #feedback-btn-wrapper {
        display: contents !important;
    }

    /* 3. ASSIGN NAVBAR ITEMS */

    /* COLUMN 1: CLOSE */
    #close-btn {
        grid-column: 1 !important;
        grid-row: 1 !important;
        font-size: 0 !important;
        width: 44px; height: 44px;
        padding: 0; border: none; border-radius: 50%;
        background-color: transparent !important;
        /* New Mobile Style for Close */
        color: #ef4444 !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        position: static !important;
    }
    #close-btn svg { width: 24px; height: 24px; }

    /* COLUMN 3: NEXT (Middle) */
    #next-btn {
        grid-column: 3 !important;
        grid-row: 1 !important;
        font-size: 0 !important;
        width: 66px; height: 66px;
        border-radius: 50%; padding: 0; margin: 0;
        background-color: var(--primary-color) !important;
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='32px' viewBox='0 0 24 24' width='32px' fill='%23ffffff'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6-6-6z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
    }
    #next-btn.btn-success {
        background-color: var(--correct-color) !important;
        box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='32px' viewBox='0 0 24 24' width='32px' fill='%23ffffff'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E");
    }

    /* COLUMN 4: THEME */
    #settings-btn {
        grid-column: 4 !important;
        grid-row: 1 !important;
        width: 44px; height: 44px;
        display: flex; align-items: center; justify-content: center;
    }

    /* COLUMN 5: FEEDBACK / EDIT */
    #edit-mode-btn, #feedback-btn {
        grid-column: 5 !important;
        grid-row: 1 !important;
        display: flex !important; /* Override JS hiding */
        width: 44px; height: 44px;
        align-items: center; justify-content: center;
        visibility: visible !important; /* Force visibility */
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* 4. RESTORE DRAGGABLE LOGIC (For Top Button) */
    /* We apply positioning to the CONTAINER, not the button. */
    #floating-controls {
        display: flex !important; /* Ensure flex so button centers */
        position: fixed !important;
        
        /* Initial Positions - JS will override these on drag */
        bottom: 90px;
        right: 20px;
        top: auto; 
        left: auto; 
        
        z-index: 3000 !important;
        width: auto !important;
        height: auto !important;
        
        /* Enable pointer events so JS touchstart works */
        pointer-events: none !important;
        touch-action: none; 
    }

    /* The Passage Button sits INSIDE the draggable container */
    #show-passage-btn {
        /* CHANGED: Remove 'position: fixed' here too */
        position: relative !important; 
        
        /* Reset coordinates so it sits inside the flex container */
        top: auto !important; 
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        
        width: 56px !important;
        height: 56px !important;
    }

    /* The Passage Button sits INSIDE the draggable container */
    /* === FLOATING CONTROLS (CONTAINER) === */
#floating-controls {
    position: fixed;
    z-index: 3000;
    
    /* DEFAULT MOBILE POSITION: Bottom Right */
    top: auto;
    left: auto;
    bottom: 20px;
    right: 20px;
    
    /* Layout */
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
    
    /* Enable pointer events for buttons */
    pointer-events: auto;
    
    /* Prevent selection during drag */
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    
    /* Transition for initial appearance, but removed during drag via JS */
    transition: transform 0.2s ease;
}

/* === FLOATING BUTTON FIX === */
#show-passage-btn {
    /* CHANGED: Must be relative/static so it moves WITH the container */
    position: relative !important; 
    
    /* Reset coordinates so it sits inside the flex container */
    top: auto !important; 
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    
    z-index: 2000;
    
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--primary-color);
    color: white;
    border: none;
    display: none !important    
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
    
    /* Dragging Fixes */
    touch-action: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    cursor: grab;
}

#show-passage-btn:active {
    cursor: grabbing;
}

#show-passage-btn svg {
    width: 28px;
    height: 28px;
    fill: currentColor;
}

/* Ensure the draggable container is what handles the fixed positioning */
#floating-controls {
    position: fixed !important;
    z-index: 3000;
    /* Default starting position */
    bottom: 90px;
    right: 20px;
    /* Ensure it has size */
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none;
}
/* DESKTOP OVERRIDE: Center button at the top of the content area */
@media (min-width: 769px) {

    /* 1. Make the wrapper the anchor point */
    .lesson-wrapper {
        position: relative !important;
    }

    /* 2. Position the button absolutely within the wrapper */
    #floating-controls {
        position: absolute !important;
  
        
        transform: translateX(-50%) !important; /* Perfect centering correction */
        
        right: auto !important;
        bottom: auto !important;
        
        z-index: 100 !important; 
        
        /* Ensure it's visible */
        width: auto !important;
        height: auto !important;
        display: flex !important;
        pointer-events: auto !important;
    }

    /* 3. Style the button */
    #show-passage-btn {
        width: 44px !important; 
        height: 44px !important;
        box-shadow: 0 4px 10px rgba(0,0,0,0.15) !important;
        background-color: var(--primary-color);
        border: 2px solid white !important; /* Adds a nice separation border */
    }
}

    /* 6. PIN CHAT BUTTON TO NAVBAR GRID (Ignoring Drag) */
    #ai-chat-btn {
        display: flex !important;
        /* Put into column 2 of the grid */
        grid-column: 2 !important;
        grid-row: 1 !important;
        
        position: static !important;
        margin: 0 auto !important;
        transform: none !important;

        /* Visual Style: Modern Gradient */
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
        box-shadow: 0 2px 6px rgba(102, 126, 234, 0.4) !important;
        color: white !important;
        
        align-items: center;
        justify-content: center;
        pointer-events: auto !important;
    }
    
    #ai-chat-btn svg {
        width: 24px !important;
        height: 24px !important;
    }
}
/* === FLOATING BUTTON FIX (Top Left Mobile) === */

/* 1. The Container */
#floating-controls {
    position: fixed !important;
    z-index: 3000;
    
    /* NEW MOBILE POSITION: Top Left */
    top: 15px;
    left: 15px;
    bottom: auto;
    right: auto;
    
    /* Sizing */
    width: auto;
    height: auto;
    
    /* Allow clicks to pass through the empty container area */
    pointer-events: none !important; 
    touch-action: none; 
}

/* 2. The Button */
#show-passage-btn {
    position: relative !important;
    top: auto !important; bottom: auto !important; left: auto !important; right: auto !important;
    
    /* Hidden by default */
    display: none !important;
    
    /* Visuals */
    width: 56px; height: 56px; border-radius: 50%;
    background-color: var(--primary-color); color: white; border: none;
    align-items: center; justify-content: center;
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
    
    /* Allow clicks on the button */
    pointer-events: auto !important; 
    cursor: grab;
    user-select: none; -webkit-user-select: none;
}

/* 3. The Toggle */
#show-passage-btn.visible {
    display: flex !important;
}

#show-passage-btn:active {
    cursor: grabbing;
}

#show-passage-btn svg {
    width: 28px; height: 28px; fill: currentColor;
}

/* --- 1. FLOATING CONTROLS (Top-Left Mobile, Draggable) --- */
#floating-controls {
    position: fixed !important;
    z-index: 3000;
    
    /* Mobile: Top Left */
    top: 25px;
    left: 50%;
    bottom: auto;
    right: auto;
    
    /* Sizing */
    width: auto;
    height: auto;
    
    /* Layout */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* CRITICAL FIX: Allow clicks to pass through empty space to the navbar */
    pointer-events: none !important; 
    touch-action: none; 
}

/* The Toggle Button inside the container */
#show-passage-btn {
    position: relative !important;
    top: auto !important; bottom: auto !important; left: auto !important; right: auto !important;
    
    /* Hidden by default */
    display: none !important;
    
    /* Visuals */
    width: 56px; height: 56px; border-radius: 50%;
    background-color: var(--primary-color); 
    color: white; 
    border: none;
    align-items: center; justify-content: center;
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
    
    /* Enable clicks on the button itself */
    pointer-events: auto !important; 
    cursor: grab;
    user-select: none; -webkit-user-select: none;
}

#show-passage-btn.visible { display: flex !important; }
#show-passage-btn:active { cursor: grabbing; }
#show-passage-btn svg { width: 28px; height: 28px; fill: currentColor; }


/* --- 2. CHAT & SETTINGS BUTTONS (Green Border, Blue Icon) --- */
#ai-chat-btn, 
#ai-chat-btn.ai-trigger-btn,
#feedback-btn-wrapper #ai-chat-btn,
#settings-btn {
    /* Layout */
    display: flex !important;
    width: 44px; height: 44px;
    align-items: center; justify-content: center;
    visibility: visible !important; opacity: 1 !important;
    pointer-events: auto !important;
    
    /* 1. Light Gray Background */
    background: #f3f4f6 !important; 
    
    /* 2. Blue Icon Color */
    color: #3b82f6 !important; 
    
    /* 3. Green Circle Border */
    border: 2px solid #22c55e !important;
    border-radius: 50% !important;
    
    /* Clean up */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important; 
    background-image: none !important;
    transition: transform 0.2s ease, background-color 0.2s;
}

#ai-chat-btn svg,
#settings-btn svg {
    stroke: currentColor !important;
    fill: none !important;
    width: 24px; height: 24px;
}

/* --- 3. FEEDBACK BUTTON (Red Question Mark) --- */
#feedback-btn {
    /* Layout */
    display: flex !important;
    width: 44px; height: 44px;
    align-items: center; justify-content: center;
    visibility: visible !important; opacity: 1 !important;
    pointer-events: auto !important;
    border-radius: 50% !important;

    /* Red Style */
    background: transparent !important;
    color: #ef4444 !important;            
    border: 1px solid #fee2e2 !important; 
    box-shadow: none !important;
    
    /* Grid Position */
    grid-column: 5; grid-row: 1;
}

#feedback-btn svg {
    stroke: currentColor !important;
    fill: none !important;
    width: 24px; height: 24px;
}

/* --- 4. HOVER EFFECTS --- */
#ai-chat-btn:hover,
#settings-btn:hover {
    background: #e5e7eb !important; 
    transform: scale(1.05);
}

#feedback-btn:hover {
    background-color: #fef2f2 !important;
    color: #dc2626 !important;
}
@media (max-width: 768px) {
    #edit-mode-btn {
        display: none !important;
    }
}
/* === TEACHER MENU DROPDOWN === */
.teacher-menu-popup {
    display: none; /* Hidden by default */
    position: absolute;
    bottom: 140%; /* Pop up above the button */
    right: 0;
    min-width: 140px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    border: 1px solid #e5e7eb;
    flex-direction: column;
    overflow: hidden;
    z-index: 5000;
}

.teacher-menu-popup.active {
    display: flex;
    animation: popUp 0.2s ease-out forwards;
}

.tm-item {
    padding: 12px 16px;
    border: none;
    background: transparent;
    text-align: left;
    font-size: 0.95rem;
    color: #374151;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.tm-item:hover {
    background-color: #f3f4f6;
    color: var(--primary-color);
}

.tm-divider {
    height: 1px;
    background-color: #e5e7eb;
    width: 100%;
}

@keyframes popUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 1. Container: Forces Aurora to fill the screen behind everything */
.aurora-global {
    display: block !important;
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw !important;
    height: 100vh !important;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background-color: transparent; /* Ensure it doesn't block background color if needed */
    /* The original file had blur on the container, we restore it here */
    filter: blur(20px); 
}

/* 2. Blob Definition: Restored from original file */
.blob {
    position: absolute;
    border-radius: 50%;
    mix-blend-mode: multiply; /* Crucial for the watercolor effect */
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
    will-change: transform;
    opacity: 0.7; /* Slight transparency for layering */
}

/* 3. Animations: Restored Keyframes so they actually move */
@keyframes move-1 {
    from { top: 10%; left: 90%; transform: translate(-50%, -50%) scale(1.2); }
    to { top: 90%; left: 20%; transform: translate(-50%, -50%) scale(0.9); }
}
@keyframes move-2 {
    from { top: 20%; left: 10%; transform: translate(-50%, -50%) scale(1); }
    to { top: 80%; left: 80%; transform: translate(-50%, -50%) scale(1.3); }
}
@keyframes move-3 {
    from { top: 90%; left: 90%; transform: translate(-50%, -50%) scale(1.1); }
    to { top: 10%; left: 10%; transform: translate(-50%, -50%) scale(1); }
}

/* 4. Settings Modal Body Fix (Keep this to ensure modal isn't empty) */
.settings-modal-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 1.5rem;
    min-height: 200px; 
}

/* Force Modal Body to be visible */
.settings-modal-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 1.5rem;
    min-height: 200px; /* Force minimum height so it's not empty */
}
/* =========================================
   === DARK THEME FORCED OVERRIDES (FINAL) ===
   ========================================= */

/* 1. Base Text Color (Set on Container Root) */
/* This is the nuclear option to force all inherited text to white */
#carousel-container.dark-theme {
    color: #ffffff !important; 
}

/* 2. Explicit Text Elements (Targets h3, p, span, and the specific ID) */
#carousel-container.dark-theme h3,
#carousel-container.dark-theme p,
#carousel-container.dark-theme span,
#carousel-container.dark-theme strong,
#carousel-container.dark-theme #question-text,
#carousel-container.dark-theme .lesson-title,
#carousel-container.dark-theme .lesson-subtitle,
#carousel-container.dark-theme .fib-question-instruction {
    color: #ffffff !important;
}
#carousel-container.dark-theme #question-container {
    /* Force color on the parent element to stop dark inheritance */
    color: #ffffff !important; 
}
/* 3. Glass Cards (Exercise & Manual Containers) */
#carousel-container.dark-theme .exercise-card,
#carousel-container.dark-theme .manual-question-container {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: none !important;
}

/* 4. Buttons & Inputs (Term Buttons, Cloze Dropzones, Text Areas) */
#carousel-container.dark-theme .answer-btn,
#carousel-container.dark-theme .term-btn,
#carousel-container.dark-theme .word-bank-btn,
#carousel-container.dark-theme .cloze-dropzone, 
#carousel-container.dark-theme .open-ended-textarea {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important; /* Forces white text inside these input elements */
}
/* CRITICAL FIX: Ensure question text is explicitly white in dark theme */
#carousel-container.dark-theme #question-text {
    color: #ffffff !important;
}
/* 5. Hover/Secondary Styles */
#carousel-container.dark-theme .answer-btn:hover,
#carousel-container.dark-theme .term-btn:hover,
#carousel-container.dark-theme .word-bank-btn:hover {
    background-color: rgba(255, 255, 255, 0.3) !important;
}

#carousel-container.dark-theme .nav-btn.secondary {
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

/* 6. Icon Strokes (Ensure icons are white) */
#carousel-container.dark-theme .btn-icon svg,
#carousel-container.dark-theme #close-btn svg {
     fill: transparent !important;
}
/* === FINAL GAMER VISUALS (NO LAYOUT JUMP) === */

#carousel-container {
    /* Smooth transition for the glow effects */
    transition: box-shadow 0.2s ease;
    /* We DO NOT touch the border property here. 
       We let the JS theme handle the physical border. */
}

/* 1. CORRECT: Green Energy Pulse */
.frame-correct {
    /* Use !important to ensure we override any default shadows */
    /* "inset 0 0 0 4px" simulates a 4px border INSIDE the padding area */
    box-shadow: 
        inset 0 0 0 4px #22c55e,       /* Fake Border */
        inset 0 0 20px #22c55e,        /* Inner Glow */
        0 0 40px rgba(34, 197, 94, 0.8) !important; /* Outer Glow */
        
    animation: successPulse 0.8s ease-out forwards;
}

@keyframes successPulse {
    0% { transform: scale(1); box-shadow: inset 0 0 0 0 #fff; }
    40% { transform: scale(1.02); box-shadow: inset 0 0 0 4px #22c55e, 0 0 30px #22c55e; }
    100% { transform: scale(1); box-shadow: inset 0 0 0 4px #22c55e, 0 0 10px #22c55e; }
}

/* 2. INCORRECT: Red Glitch Shake */
.frame-incorrect {
    /* Fake Red Border using Shadow */
    box-shadow: 
        inset 0 0 0 4px #ef4444, 
        inset 0 0 30px #ef4444 !important;
        
    animation: glitchShake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes glitchShake {
    0% { transform: translate(0); }
    20% { transform: translate(-4px, 4px); }
    40% { transform: translate(4px, -4px); }
    60% { transform: translate(-4px, 4px); }
    80% { transform: translate(4px, -4px); }
    100% { transform: translate(0); }
}

/* 3. THINKING: Blue Pulsing Ring */
.frame-led-thinking {
    /* Fake Blue Border using Shadow */
    box-shadow: 0 0 10px #3b82f6 !important;
    animation: breatheBlue 2s infinite ease-in-out;
}

@keyframes breatheBlue {
    /* We animate the inset shadow size to make it look like it's breathing */
    0%, 100% { 
        box-shadow: inset 0 0 0 2px #3b82f6, 0 0 5px #3b82f6 !important; 
    }
    50% { 
        box-shadow: inset 0 0 0 5px #3b82f6, 0 0 25px #3b82f6 !important; 
    }
}

/* 4. RGB: Rainbow Flow */
.frame-led-rgb {
    /* Fake Border initialized to Red */
    box-shadow: inset 0 0 0 4px #ff0000, 0 0 20px #ff0000 !important;
    animation: shadowRainbow 4s linear infinite;
}

/* Manually cycling shadow colors prevents affecting the text inside */
@keyframes shadowRainbow {
    0% { box-shadow: inset 0 0 0 4px #ff0000, 0 0 20px #ff0000 !important; }
    20% { box-shadow: inset 0 0 0 4px #ffff00, 0 0 20px #ffff00 !important; }
    40% { box-shadow: inset 0 0 0 4px #00ff00, 0 0 20px #00ff00 !important; }
    60% { box-shadow: inset 0 0 0 4px #00ffff, 0 0 20px #00ffff !important; }
    80% { box-shadow: inset 0 0 0 4px #0000ff, 0 0 20px #0000ff !important; }
    100% { box-shadow: inset 0 0 0 4px #ff00ff, 0 0 20px #ff00ff !important; }
}
body.aurora-disabled .aurora-background {
    display: none !important;
}
/* In aurora mode, let blobs shine through behind the question/answers */
body.aurora-active .exercise-card {
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}
@media (max-width: 768px) {
    .blob {
        opacity: 0.40 !important;   /* Very battery-friendly */
    }
}

/* Symmetric padding for the whole bottom bar on mobile */
@media (max-width: 768px) {
    #navigation-container {
        padding: 8px 13px !important; /* same inset from left & right */
    }
}

/* Close button specific tweaks */
@media (max-width: 768px) {
    #close-btn.nav-btn.btn-icon-only {
        justify-self: flex-start !important;
        margin-left: 0 !important;
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
        padding: 0 !important;
        background: transparent !important;
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        border: 1px solid #fee2e2 !important;
    }

    /* Icon color inside the close button */
    #navigation-container:not(.dark-theme) #close-btn.nav-btn.btn-icon-only svg {
        stroke: red !important;
        fill:   #1f2937 !important;
    }
    #navigation-container.dark-theme #close-btn.nav-btn.btn-icon-only svg {
        stroke: #f9fafb !important;
        fill:   #f9fafb !important;
    }
}
/* === MOBILE NAV: CHAT + SETTINGS BUTTONS === */
@media (max-width: 768px) {

  /* Base shape for the two main icon buttons */
  #ai-chat-btn,
  #settings-btn {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
  }

  /* LIGHT THEME: light circle, dark outline icon */
  #navigation-container:not(.dark-theme) #ai-chat-btn,
  #navigation-container:not(.dark-theme) #settings-btn {
    background: rgba(255, 255, 255, 0.96) !important;
    border: 1px solid rgba(148, 163, 184, 0.8) !important;
  }

  #navigation-container:not(.dark-theme) #ai-chat-btn svg,
  #navigation-container:not(.dark-theme) #settings-btn svg {
    fill: none !important;               /* <-- outline only */
    stroke: #111827 !important;          /* dark gray */
    stroke-width: 1.9 !important;
  }

  /* DARK THEME: dark circle, white outline icon */
  #navigation-container.dark-theme #ai-chat-btn,
  #navigation-container.dark-theme #settings-btn {
    background: rgba(15, 23, 42, 0.92) !important;   /* dark navy */
    border: 1px solid rgba(248, 250, 252, 0.75) !important;
  }

  #navigation-container.dark-theme #ai-chat-btn svg,
  #navigation-container.dark-theme #settings-btn svg {
    fill: none !important;               /* <-- outline only */
    stroke: #f9fafb !important;          /* almost white */
    stroke-width: 1.9 !important;
  }
}
/* --- FLASHCARD MODAL & TOOLTIP STYLES (Responsive Fix) --- */

/* 1. Modal Body Grid Layout */
#fcsets-body {
    display: grid;
    /* Desktop: Two columns if space permits, otherwise one. Stretches to fill width. */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
    padding: 0.5rem;
    width: 100%;
    box-sizing: border-box; /* Prevents padding from breaking width */
}

/* 2. Card Styling */
.flashcard-set-card {
    display: flex;
    align-items: center;
    background-color: #f8f9fa;
    padding: 1rem;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    transition: background-color 0.2s ease, transform 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    min-width: 0; /* Critical for text-overflow to work in Flexbox */
}

.flashcard-set-card:hover {
    background-color: #ffffff;
    border-color: var(--primary-color);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}

/* 3. Avatar */
.flashcard-set-card .avatar, 
.flashcard-set-card .initials-placeholder {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    margin-right: 1rem;
    flex-shrink: 0;
    object-fit: cover;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.flashcard-set-card .initials-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 1rem;
    text-transform: uppercase;
}

/* 4. Details (Text Area) */
.flashcard-set-details {
    flex-grow: 1;
    min-width: 0; /* Allows text truncation */
    margin-right: 0.75rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.flashcard-set-details .creator-name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-dark);
    font-size: 0.95rem;
    margin-bottom: 0.2rem;
}

.flashcard-set-details .card-count {
    font-size: 0.8rem;
    color: var(--text-light);
}

/* 5. Actions (Buttons) */
.flashcard-set-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
    align-items: center;
}

/* Button Container Styling */
.flashcard-set-actions .btn-icon {
    background-color: white;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    color: #4b5563;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    padding: 0;
    border: 1px solid var(--border-color); /* The outer circle border */
    cursor: pointer;
    text-decoration: none;
}

.flashcard-set-actions .btn-icon:hover {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    transform: scale(1.05);
}

/* --- FIX: REMOVE SQUARE BORDER FROM ICONS --- */
/* This specifically targets the SVG inside the button to remove any inherited borders */
.flashcard-set-actions .btn-icon svg {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    width: 20px;
    height: 20px;
    fill: currentColor;
    display: block; /* Removes minimal line-height gaps */
}

/* 6. Tooltip Styling */
#info-tooltip {
    position: fixed; 
    display: none;
    background: #1f2937; /* Darker grey */
    color: #f9fafb;
    padding: 12px 16px;
    border-radius: 8px;
    z-index: 10001;
    max-width: 280px;
    pointer-events: none;
    line-height: 1.5;
    font-size: 0.85rem;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.1);
}

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 600px) {
    #fcsets-body {
        grid-template-columns: 1fr; /* Force single column stack */
        padding: 0;
        gap: 0.75rem;
    }

    .flashcard-set-card {
        padding: 0.75rem;
    }

    .flashcard-set-card .avatar {
        width: 36px;
        height: 36px;
        margin-right: 0.75rem;
    }

    .flashcard-set-details .creator-name {
        font-size: 0.9rem;
    }
    
    .flashcard-set-actions .btn-icon {
        width: 34px;
        height: 34px;
    }
}
#passage-reveal-modal .media-carousel-slide img, 
#passage-reveal-modal .media-carousel-slide video {
    max-height: 300px; /* Limit height so text remains visible */
    object-fit: contain;
}
/* Mobile: Hide the desktop button */
@media (max-width: 768px) {
    .desktop-only { display: none !important; }
    .mobile-only { display: block; }
}

/* Desktop: Hide the floating wrapper */
@media (min-width: 769px) {
    .mobile-only { display: none !important; }
    .desktop-only { display: inline-flex; }
}
/* FORCE HIDE on Mobile */
@media (max-width: 768px) {
    .desktop-only {
        display: none !important;
    }
    .mobile-only {
        display: block !important;
    }
}

/* FORCE HIDE on Desktop */
@media (min-width: 769px) {
    .mobile-only {
        display: none !important;
    }
    .desktop-only {
        display: inline-flex !important;
    }
}
/* ============================================== */
/* === CRITICAL FIX: FORCE HIDE DESKTOP BTN === */
/* ============================================== */

@media (max-width: 768px) {
    /* We use the ID (#) here to be 'stronger' than the conflicting rule above */
    #show-passage-btn.desktop-only {
        display: none !important;
    }
    
    /* Ensure the Navbar Grid doesn't try to reserve space for it */
    #show-passage-btn {
        position: absolute; 
        visibility: hidden;
        pointer-events: none;
    }
}
/* ========================================================= */
/* === FIX: MAKE DESKTOP PASSAGE BUTTON MATCH NAVBAR === */
/* ========================================================= */

@media (min-width: 769px) {
    #show-passage-btn.desktop-only {
        /* Reset positioning just in case */
        position: static !important;
        transform: none !important;
        margin: 0 !important;
        
        /* Match Size */
        width: 44px !important;
        height: 44px !important;
        
        /* Match Colors (Light Gray BG, Green Border, Blue Icon) */
        background: #f3f4f6 !important; 
        color: #ffffff !important; 
        border: 2px solid #22c55e !important;
        border-radius: 50% !important;
        
        /* Match Shadow */
        box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important; 
        
        /* Layout */
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        transition: transform 0.2s ease, background-color 0.2s;
    }

    /* Hover Effect */
    #show-passage-btn.desktop-only:hover {
        background: #e5e7eb !important; 
        transform: scale(1.05) !important;
    }

    /* Icon Sizing */
    #show-passage-btn.desktop-only svg {
        width: 24px !important;
        height: 24px !important;
        fill: currentColor !important; /* Uses the Blue color defined above */
    }
}
/* ================================================= */
/* === CRITICAL FIX: ENABLE CLICKS ON MOBILE BTN === */
/* ================================================= */

#show-passage-btn-mobile {
    /* Reset pointer events so the button can be clicked/dragged */
    pointer-events: auto !important; 
    touch-action: none; /* Prevents browser scrolling while dragging */
    cursor: pointer;
    
    /* Ensure visual styling matches if not already set */
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color:#E0F7FA
    color: rgb(239, 246, 255);
    border: none;
    
    /* Flex alignment for the icon */
    display: none; /* JS toggles 'visible' class to make this 'flex' */
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
}

/* When JS adds the .visible class, make it appear */
#show-passage-btn-mobile.visible {
    display: flex !important;
}

#show-passage-btn-mobile:active {
    transform: scale(0.95);
}
#show-passage-btn-mobile svg {
    width: 32px !important;
    height: 32px !important;
    /* Ensure it centers perfectly */
    display: block; 
    margin: auto;
}
/* --- 1. VIDEO LAYOUT (Zoom-Safe) --- */
#video-lesson-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    overflow: hidden;
    justify-content: flex-start;
}

.video-wrapper {
    display: flex;
    flex-direction: column;
    background: #000;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    margin: 0 auto 10px auto; /* Center horizontally */
    flex-shrink: 0; /* Prevent squashing */
}

#video-player-container {
    width: 100%;
    aspect-ratio: 16 / 9;   /* or whatever ratio you use */
    display: flex;
    justify-content: center;
    background-color: #000;
}

#youtube-player {
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
}

/* DESKTOP SPECIFIC: Reduce Video Size */
@media (min-width: 769px) {
    .video-wrapper {
        width: 70% !important;        /* Reduce width by 30% */
        max-width: 800px;             /* Hard limit */
        max-height: 53vh !important;  /* Never taller than half screen */
    }
}

/* --- 2. SUBTITLE TRAY (The Scrolling Text Box) --- */

/* HIDE the old list view so it doesn't duplicate */
.transcript-line {
    display: none !important;
}

/* SHOW the Tray container */
.subtitle-tray {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 10px 12px;
    width: 100%;
    box-sizing: border-box;
    display: block !important; /* Force visible */
}

/* The Text Line itself */
.subtitle-line {
    display: block !important;
    width: 100%;
    margin: 0;
    border: none;
    background: transparent;
    color: var(--text-dark);
    font-size: 1.1rem;
    line-height: 1.5;
    text-align: center;
    cursor: pointer;
    
    white-space: normal !important; /* Allow wrapping */
    overflow-y: auto;               /* Allow scrolling inside */
}

/* DESKTOP: 3 Lines of text */
@media (min-width: 769px) {
    .subtitle-line {
        height: calc(1.1rem * 1.5 * 3); /* Exact height for 3 lines */
    }
}

/* MOBILE: 4 Lines of text (Expanded) */
@media (max-width: 768px) {
    .subtitle-line {
        height: calc(1.1rem * 1.5 * 4) !important; /* Exact height for 4 lines */
        text-align: left; /* Better for reading on phone */
    }
    
    /* Ensure video doesn't eat mobile screen */
    .video-wrapper {
        width: 100% !important;
        max-height: 40vh !important;
    }
}
#transcript-container {
    text-align: center;
    color: #fff;
    font-size: 1.1rem;
}


.transcript-line {
    display: none;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.transcript-line.active {
    display: block;
    opacity: 1;
}
/* === FORCE VIDEO TRANSCRIPT TRAY BEHAVIOUR === */
#transcript-container .transcript-line {
    display: none !important;
    opacity: 0;
}

#transcript-container .transcript-line.active {
    display: block !important;
    opacity: 1;
}
/* === VIDEO CAPTIONS VISIBILITY FIX === */
#transcript-container {
    color: #ffffff;
    z-index: 10;
}
#transcript-container {
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.8);
    font-size: 1.2rem;
    min-height: 3rem;
}

/* === FIX: captions were hidden behind video iframe === */

.video-wrapper {
    position: relative;
}

#transcript-container {
    position: relative;
    z-index: 20;
    pointer-events: auto;
}
/* --- 5. EXERCISE-SPECIFIC STYLES (Responsive Font Sizes) --- */

/* 1. BASE STYLES (Default / Mobile) - Keep them compact */
.word-bank-btn, .term-btn {
    background-color: #e0e7ff;
    border: 1px solid #c7d2fe;
    border-radius: 9999px;
    cursor: pointer;
    user-select: none;
    font-weight: 500;
    
    /* Mobile Size: Readable but fits on small screens */
    padding: 0.5rem 1rem;
    font-size: 0.95rem; 
    line-height: 1.3;
}

/* 2. DESKTOP OVERRIDE (Big Fonts) - Applies only to screens wider than 768px */
@media (min-width: 769px) {
    .word-bank-btn, .term-btn {
        /* Make them much bigger on computer screens */
        font-size: 1.15rem !important; 
        padding: 0.8rem 1.5rem;       
    }
}

/* Active/Selected State */
.word-bank-btn.active, .term-btn.active {
    box-shadow: 0 0 0 2px var(--primary-color);
    background-color: #c7d2fe;
}

/* Disabled State */
.word-bank-btn:disabled, .term-btn:disabled {
    background-color: #e5e7eb;
    color: var(--text-light);
    cursor: not-allowed;
    text-decoration: line-through;
}
/* --- DESKTOP GAPPED TEXT FONT SIZE --- */
@media (min-width: 769px) {
    .gapped-text-passage {
        font-size: 1.4rem !important;
        line-height: 2.2; /* Slightly increased line height for readability */
    }
.definition-text {
    flex-grow: 1;
    color: var(--text-dark);
    font-size: 1.3rem;
}
}
/* --- FIX: Professional Audio Fetch Button (White Theme) --- */
#fetch-audio-btn {
    /* Override circular .media-btn styles */
    width: auto !important;          
    border-radius: 8px !important;   
    padding: 0 16px !important;      
    
    /* Layout: No !important on display so JS can hide it */
    display: inline-flex;            
    align-items: center;
    justify-content: center;
    gap: 8px;                        
    
    /* White Background & Black Text */
    background-color: #ffffff;
    color: #000000;
    border: 1px solid #e5e7eb; /* Subtle border for definition */
    
    font-weight: 600;
    font-size: 0.9rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    transition: all 0.2s ease;
    text-transform: uppercase;       
    letter-spacing: 0.5px;
    margin: 0;
}

/* Hover Effect: Light Grey */
#fetch-audio-btn:hover {
    background-color: #f9fafb;
    border-color: #d1d5db;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

/* Active/Click Effect */
#fetch-audio-btn:active {
    transform: translateY(0);
    box-shadow: none;
    background-color: #f3f4f6;
}

/* Fix Icon Size inside the button */
#fetch-audio-btn svg {
    width: 20px !important;
    height: 20px !important;
    fill: currentColor; /* Matches the black text */
    margin: 0 !important;
}

/* Ensure text is clearly visible */
#fetch-audio-btn span {
    display: inline-block;
    white-space: nowrap;
}
/* ============================================================
   === ORB BUTTON & PARTICLE SYSTEM (Final Version) ===
   ============================================================ */

/* 1. Base Button Container */
#next-btn.orb-btn {
    /* Base Color Variables (Default) */
    --orb-c1: #3b82f6; 
    --orb-c2: #1d4ed8; 
    
    position: relative;
    /* Force dimensions and reset old styles */
    width: 80px !important; 
    height: 60px !important;
    border-radius: 50%;
    border: none !important;
    padding: 0 !important;
    margin: 0 auto !important;
    background-image: none !important;
    background-color: var(--orb-c2) !important;
    
    /* Living Blob Animation */
    animation: orbAlive 8s linear infinite;
    
    /* Sharp internal volume only */
    box-shadow: 
        inset 4px 4px 12px rgba(255,255,255,0.4),  
        inset -4px -4px 12px rgba(0,0,0,0.2) !important;
        
    cursor: pointer;
    overflow: hidden; 
    display: flex !important;
    align-items: center;
    justify-content: center;
    z-index: 100;
    
    /* Heavy press feel */
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important; 
    -webkit-tap-highlight-color: transparent;

    /* --- IPAD GHOSTING FIX START --- */
    /* Forces the iPad graphics card to redraw the button cleanly every frame */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    
    /* Forces strict clipping of the background to the rounded edges */
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    
    /* Prevents background color from bleeding outside the border */
    background-clip: padding-box;
    /* --- IPAD GHOSTING FIX END --- */
}

#next-btn.orb-btn:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
}

#next-btn.orb-btn:active {
    transform: scale(0.92);
}

/* 2. Internal Moving Glare */
.orb-glare {
    position: absolute;
    width: 160%;
    height: 160%;
    background: radial-gradient(circle, var(--orb-c1) 0%, transparent 65%);
    top: -30%;
    left: -30%;
    z-index: 1;
    animation: glareMove 7s ease-in-out infinite alternate;
    opacity: 0.9;
    pointer-events: none;
}

/* 3. Texture Layer */
.orb-texture {
    position: absolute;
    inset: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(from 0deg, transparent 0deg, rgba(255,255,255,0.15) 120deg, transparent 180deg);
    mix-blend-mode: overlay;
    z-index: 2;
    animation: orbSpin 12s linear infinite;
    pointer-events: none;
}

/* 4. Icon Layer */
.orb-icon-layer {
    position: relative;
    z-index: 5;
    color: white;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.25));
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.orb-icon {
    width: 32px;
    height: 32px;
    fill: currentColor;
    display: block;
    transition: transform 0.3s ease;
}

/* 5. Fixed Particle Physics (Zero Gravity) */
.orb-particle {
    position: fixed; /* Fixed prevents scrolling issues and clipping */
    border-radius: 50%;
    pointer-events: none; 
    z-index: 9999; 
    background: white;
    box-shadow: 0 0 6px var(--p-color); 
}

@keyframes particleFloat {
    0% {
        transform: translate(-50%, -50%) translate(0px, 0px) scale(1);
        opacity: 1;
    }
    80% {
        opacity: 1; /* Stay visible longer */
    }
    100% {
        transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) scale(0);
        opacity: 0;
    }
}

/* 6. Animations */
@keyframes orbAlive {
    0% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; transform: rotate(0deg); }
    25% { border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%; transform: rotate(5deg); }
    50% { border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%; transform: rotate(0deg); }
    75% { border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%; transform: rotate(-5deg); }
    100% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; transform: rotate(0deg); }
}
@keyframes glareMove {
    0% { transform: translate(-10%, -10%); }
    100% { transform: translate(10%, 10%); }
}
@keyframes orbSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 7. Color States */
#next-btn.orb-btn.state-start { --orb-c1: #22d3ee; --orb-c2: #0891b2; } /* Cyan */
#next-btn.orb-btn.state-check { --orb-c1: #818cf8; --orb-c2: #4f46e5; } /* Indigo */
#next-btn.orb-btn.state-next  { --orb-c1: #4ade80; --orb-c2: #16a34a; } /* Green */
#next-btn.orb-btn.state-finish{ --orb-c1: #fbbf24; --orb-c2: #d97706; } /* Gold */

/* Mobile Sizing */
@media (max-width: 768px) {
    #next-btn.orb-btn {
        width: 64px !important;
        height: 64px !important;
    }
}
/* FORCE FIX: Ensure Passage Button Icon is ALWAYS Visible (even in Dark Mode) */
#show-passage-btn svg,
#show-passage-btn.desktop-only svg,
#show-passage-btn-mobile svg {
    fill: currentColor !important;       /* Uses the text color (Blue #3b82f6) */
    stroke: none !important;             /* Remove conflicting strokes */
    color: #599ffa !important;           /* Enforce Blue Color */
}

/* Specific override if the theme tries to force white strokes on icons */
body.dark-theme #show-passage-btn svg,
.dark-theme #show-passage-btn svg,
#carousel-container.dark-theme #show-passage-btn svg {
    fill: #3b82f6 !important;
    stroke: none !important;
}
/* --- PAPER TEXTURE OVERLAY SUPPORT --- */

:root {
    --paper-texture-url: none; /* Default */
}

/* Apply to Upper Section Containers */
#passage-container,
.exercise-card {
    /* Layer the texture ON TOP of the existing background-color/gradient */
    background-image: var(--paper-texture-url) !important;
    
    /* Ensure it covers the whole area */
    background-size: 100% auto !important;
    background-position: top center;
    background-repeat: repeat-y;
    background-blend-mode: multiply;
    
    /* MULTIPLY allows the underlying color (e.g., Blue, Mint) to show through the paper texture */
    background-blend-mode: multiply; 
}
/* Add to lesson-player.css */

/* Visual feedback when selected */
.texture-option input:checked + .texture-preview {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 2px var(--primary-color) inset;
    opacity: 1;
}

/* Hover effect */
.texture-option:hover .texture-preview {
    border-color: #9ca3af;
    opacity: 0.9;
}

/* The Overlay Logic */
#passage-container,
.exercise-card {
    background-image: var(--paper-texture-url, none) !important;
    background-size: cover;
    background-position: center;
    background-repeat: repeat-y;
    background-blend-mode: multiply; /* Blends texture with background color */
}
@media (min-width: 769px) {
    /* Increases padding for the entire white box area on desktop */
    #passage-container {
        padding-left: 3rem !important;  /* Adjust size as needed */
        padding-right: 3rem !important;
    }
}
/* Apply texture to Carousel ONLY if checkbox is checked AND texture is not 'none' */
body.texture-on-carousel.has-paper-texture #carousel-container {
    background-image: var(--paper-texture-url) !important;
    background-size: 100% auto !important;
    background-position: top center;
    background-blend-mode: multiply;
    /* Optional: Remove backdrop blur if you want a crisp paper look */
    /* backdrop-filter: none; */
}
.passage-content-wrapper {
    position: relative; /* Required for absolute positioning of buttons */
}

/* --- FONT RESIZER BUTTONS (Right Side) --- */
.font-resizer-group {
    display: flex;
    align-items: center;
    gap: 6px;
    /* Changed from Right to Left for positioning */
    margin-left: 8px;
    padding-left: 8px;
    border-left: 1px solid #e5e7eb; 
    /* Remove right-side spacing */
    margin-right: 0;
    padding-right: 0;
    border-right: none;
}

.media-btn.small-btn {
    width: 22px !important;  /* Slightly smaller to save height */
    height: 22px !important; /* Slightly smaller to save height */
    padding: 0 !important;
    background-color: #f9fafb !important;
    color: #4b5563 !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    margin: 0.2rem;
}

.media-btn.small-btn:hover {
    background-color: #e5e7eb !important;
    color: #111827 !important;
    transform: translateY(-1px);
}

.media-btn.small-btn:active {
    transform: scale(0.95);
}

.media-btn.small-btn svg {
    width: 16px !important;
    height: 16px !important;
    fill: currentColor !important;
    pointer-events: none;
}
/* 1. Make the Handle Visible and Grabbable */
#drag-handle {
    width: 100%;
    height: 5px; /* Slightly taller hit-area for fat fingers */
    display: none; /* Hidden on desktop by default */
    cursor: grab;
    touch-action: none; /* Prevents page scroll while dragging */
    z-index: 105;
   }

#drag-handle:active {
    cursor: grabbing;
}

/* --- The Slim Rectangle --- */
.drag-pill {
    width: 54px;
    height: 10px;
    background-color: #f8fafc; /* Very light grey/white background */
    border: 1px solid #e2e8f0; /* Subtle border for the rectangle */
    border-radius: 6px;
    margin: 0 auto;
    position: relative;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    transition: all 0.2s ease;
}

/* --- The Three Lines (Using a box-shadow trick) --- */
.drag-pill::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px; /* Width of the inner lines */
    height: 2px; /* Thickness of the lines */
    background-color: #94a3b8; /* Middle line */
    border-radius: 2px;
    
    /* Box shadow draws the Top and Bottom lines perfectly spaced */
    box-shadow: 
        0 -5px 0 #94a3b8, /* Top line (5px up) */
        0 5px 0 #94a3b8;  /* Bottom line (5px down) */
        
    transition: all 0.2s ease;
}

/* --- Visual feedback when the user grabs it --- */
#drag-handle:active .drag-pill {
    background-color: #f1f5f9;
    border-color: #cbd5e1;
    transform: scale(1.05); /* Slight pop out effect */
}

#drag-handle:active .drag-pill::after {
    /* Darken the lines when pressed */
    background-color: #64748b;
    box-shadow: 
        0 -5px 0 #64748b, 
        0 5px 0 #64748b;
}

/* 2. Apply the Squish Math on Mobile */
@media (max-width: 768px) {
    #drag-handle {
        /* Force flex to vertically center the pill inside the 28px hit area */
        display: flex !important; 
        align-items: center;
    }
    
    .carousel-box {
        /* Safely defaults to 1 if JS hasn't acted yet */
        --squish: var(--squish-factor, 1);
    }

    /* Dynamically scale font sizes and paddings based on the drag */
    .carousel-box #question-text {
        font-size: calc(1.3rem * var(--squish)) !important;
        margin-bottom: calc(0.5rem * var(--squish)) !important;
    }

    .carousel-box .answer-btn {
        font-size: calc(0.8rem * var(--squish)) !important;
        padding: calc(0.75rem * var(--squish)) !important;
    }

    .carousel-box .term-btn,
    .carousel-box .word-bank-btn {
        font-size: calc(0.95rem * var(--squish)) !important;
        padding: calc(0.5rem * var(--squish)) calc(1rem * var(--squish)) !important;
    }

    .carousel-box .fib-question {
        font-size: calc(1.8rem * var(--squish)) !important;
        line-height: calc(2.2 * var(--squish)) !important;
    }

    .carousel-box #answers-container,
    .carousel-box .word-bank, 
    .carousel-box .terms-bank {
        gap: calc(0.5rem * var(--squish)) !important;
    }
}
/* ====================================================
   FIX: MINI-PRZYCISK BEZ DODAWANIA MIEJSCA NA DOLE
   ==================================================== */
@media (max-width: 768px) {
    /* Wyjmujemy kontener z przepływu, aby nie dodawał pustego miejsca */
    #floating-controls {
        position: absolute !important;
        height: 0 !important;
        width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    #show-passage-btn-mobile.visible:not(.hidden),
    #show-passage-btn.visible:not(.hidden) {
        /* Wymiary przycisku */
        width: 32px !important;
        height: 32px !important;
        
        /* Pozycjonowanie względem lewego górnego rogu */
        position: absolute !important;
        top: 15px !important;
        left: 15px !important;
        
        display: flex !important;
        align-items: center;
        justify-content: center;
        padding: 0 !important;
        border-radius: 50% !important;
        border: 1px solid #d1d5db !important;
        background-color: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(4px);
        box-shadow: 0 4px 10px rgba(0,0,0,0.15) !important;
        z-index: 9999 !important;
    }

    /* Ukrywanie */
    #show-passage-btn-mobile.hidden,
    #show-passage-btn-mobile:not(.visible) {
        display: none !important;
    }

    #show-passage-btn svg, 
    #show-passage-btn-mobile svg {
        width: 18px !important;
        height: 18px !important;
        margin: 0 !important;
    }
}
/* Style for the revealed correct answers */
/* 1. Allow dropzones to expand vertically and stack the text */
.gap-dropzone, 
.definition-dropzone {
    height: auto !important; /* Override the fixed 30px height */
    min-height: 15px;
    flex-direction: column; /* Stack the wrong answer and the correction */
    padding: 4px 8px !important;
    vertical-align: middle;
    line-height: 1.2;
}

/* 2. The clean, solid-background correction badge */
.correction-reveal {
    position: static; /* Removes absolute positioning to stop clipping/overlapping */
    display: inline-block;
    font-size: 0.75rem;
    color: #065f46; /* Dark, readable green */
    background-color: #d1fae5; /* Solid light green to block text behind it */
    font-weight: 700;
    margin-top: 4px;
    padding: 2px 6px;
    border-radius: 4px;
    border: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* Subtle shadow for depth */
    white-space: nowrap;
    transform: none; /* Removes the centering shift */
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-3px); }
    to { opacity: 1; transform: translateY(0); }
}
/* Stack the wrong answer and the correction vertically */
.wrong-answer-wrapper {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    vertical-align: middle;
    margin: 0 4px;
    position: relative;
}

/* The new, clean correction badge */
.correction-badge {
    font-size: 0.75rem;
    font-weight: 600;
    background-color: #ecfdf5; /* Light green background */
    color: #059669; /* Dark green text */
    border: 1px solid #34d399;
    border-radius: 4px;
    padding: 2px 6px;
    margin-top: 4px;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    line-height: 1.2;
}
/* ====================================================
   FINAL FIX: PERFECTLY CENTERED NAV & STRICT CIRCLES
   ==================================================== */
@media (max-width: 768px) {
    /* 1. Force the container to span full width to ensure true center */
    #navigation-container {
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        grid-template-rows: 1fr !important;
        grid-auto-rows: 0px !important; /* ZABEZPIECZENIE: Każdy nadprogramowy rząd ma 0px wysokości! */
        align-items: center !important;
        justify-items: center !important; 
        width: 100% !important;
        padding: 8px 16px max(8px, env(safe-area-inset-bottom)) 16px !important; 
        box-sizing: border-box !important;
    }

    /* 2. Override any rogue left/right alignments pushing things off-center */
    #navigation-container > *,
    #feedback-btn-wrapper > * {
        justify-self: center !important;
        margin: 0 !important;
        grid-row: 1 !important; /* SREBRNA KULA: Wpycha wszystko na siłę do pierwszego rzędu */
    }

    /* ZABÓJCA ZBĘDNEGO PRZYCISKU: Całkowicie blokuje przycisk desktopowy na mobile, ignorując klasę .visible z JS */
    #navigation-container #show-passage-btn,
    #navigation-container #show-passage-btn.visible {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        position: absolute !important;
        pointer-events: none !important;
    }
    /* 3. Strict Circle for Close (X) button */
    #close-btn, 
    #close-btn.nav-btn.btn-icon-only {
        grid-column: 1 !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        max-width: 44px !important;
        max-height: 44px !important;
        aspect-ratio: 1 / 1 !important;
        border-radius: 50% !important;
        padding: 0 !important; /* Kills the oval stretch */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        flex-shrink: 0 !important;
        overflow: hidden !important;
    }

    /* 4. Strict Circle for Orb (Next) button */
    #next-btn,
    #next-btn.orb-btn {
        grid-column: 3 !important;
        width: 64px !important;
        height: 64px !important;
        min-width: 64px !important;
        min-height: 64px !important;
        max-width: 64px !important;
        max-height: 64px !important;
        aspect-ratio: 1 / 1 !important;
        border-radius: 50% !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
    }
    
    /* 5. Ensure other icons are properly locked to their columns */
    #ai-chat-btn, #feedback-btn-wrapper #ai-chat-btn { grid-column: 2 !important; }
    #settings-btn, #feedback-btn-wrapper #settings-btn { grid-column: 4 !important; }
    #navigation-container > div[style*="grid-column"], #edit-mode-btn, #feedback-btn { grid-column: 5 !important; }
}
/* ============================================================ */
/* === FIX: DESKTOP CLOSE BUTTON MATCHES SETTINGS ICON      === */
/* ============================================================ */

@media (min-width: 769px) {
    #close-btn,
    #close-btn.nav-btn.btn-icon-only {
        /* 1. Wymuszenie idealnego koła (nadpisanie paddingu z .nav-btn) */
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        
        /* 2. Centrowanie ikony */
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        
        /* 3. Wygląd spójny z ikoną ustawień (szare tło, cień, 2px ramka), ale w kolorze czerwonym */
        background: #f3f4f6 !important; 
        color: #ef4444 !important; 
        border: 2px solid #ef4444 !important; 
        box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important; 
        
        /* 4. Zachowanie przy najeździe (płynne powiększenie) */
        transition: transform 0.2s ease, background-color 0.2s !important;
        box-sizing: border-box !important;
    }

    /* Efekt Hover (najechanie myszką) */
    #close-btn:hover,
    #close-btn.nav-btn.btn-icon-only:hover {
        background: #fee2e2 !important; /* Lekko czerwone tło */
        transform: scale(1.05) !important; /* Dokładnie to samo powiększenie co w ustawieniach */
    }

    /* Wymuszenie proporcji ikony SVG */
    #close-btn svg {
        width: 24px !important;
        height: 24px !important;
        stroke: currentColor !important;
        fill: none !important;
    }
}
/* ============================================================ */
/* === FIX: AUTO-SQUISH ON SMALL SCREENS (NO SCROLLING)     === */
/* ============================================================ */

@media (max-height: 750px) and (max-width: 768px) {
    /* 1. Domyślnie zmniejszamy wszystko do 65% na małych ekranach.
       Bez !important, aby skrypt JS (uchwyt) mógł to nadpisać przy przeciąganiu. */
    .carousel-box {
        --squish-factor: 0.65;
    }

    /* 2. Sztywny limit panelu do 50% ekranu (zgodnie z życzeniem) */
    #carousel-container {
        max-height: 50vh !important;
    }

    /* 3. Pomniejszamy też same przyciski nawigacji, by zaoszczędzić cenne piksele! */
    #navigation-container {
        padding: calc(8px * var(--squish)) calc(16px * var(--squish)) max(8px, env(safe-area-inset-bottom)) calc(16px * var(--squish)) !important;
    }
    
    #next-btn, #next-btn.orb-btn {
        width: calc(64px * var(--squish)) !important;
        height: calc(64px * var(--squish)) !important;
        /* Nadpisujemy sztywne limity z poprzednich fixów */
        min-width: 0 !important; 
        min-height: 0 !important;
    }

    #close-btn, .btn-icon, #settings-btn, #ai-chat-btn {
        width: calc(44px * var(--squish)) !important;
        height: calc(44px * var(--squish)) !important;
        min-width: 0 !important;
        min-height: 0 !important;
    }

    #navigation-container svg {
        width: calc(24px * var(--squish)) !important;
        height: calc(24px * var(--squish)) !important;
    }
}
/* Steady pastel green for the RECORD button (Waiting) */
.open-ended-controls .record-btn {
    background-color: #dcfce7 !important; /* Pastel Green */
    color: #166534 !important; /* Dark Green Icon */
    border: 1px solid #86efac !important;
    animation: none !important; /* Forces it to stay steady */
    transition: background-color 0.2s;
}

.open-ended-controls .record-btn:hover {
    background-color: #bbf7d0 !important; /* Slightly darker green on hover */
}

/* Pulsating red for the STOP button (Actively Recording) */
.open-ended-controls .stop-btn {
    background-color: #fee2e2 !important; /* Pastel Red */
    color: #dc2626 !important; /* Red Icon */
    border: 1px solid #fca5a5 !important;
    animation: pulse-recording-red 1.5s infinite !important; /* The Red Pulse */
}

/* The red pulse animation */
@keyframes pulse-recording-red {
    0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.5); }
    70% { box-shadow: 0 0 0 10px rgba(220, 38, 38, 0); }
    100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}