/* Hide pause button from recordings (users can still use Space key to pause) */
body.video-mode .video-pause-button,
body.revision-mode .video-pause-button {
    display: none !important;
}

/* ===== TIER-BASED INTELLIGENT SIZING (VIDEO MODE) ===== */
/* Progressive enhancement: tier-based + container queries */

/* Enable container queries on card content */
body.video-mode .card-front .card-content {
    container-type: inline-size !important;
    container-name: card-content;
}

/* TIER 1: Short text (1-8 chars) - Full cinematic experience */
body.video-mode .flashcard[data-text-tier="short"] {
    --text-size-ja: clamp(64px, 8vh, 108px);
    --text-size-en: clamp(48px, 5vh, 76px);
    --text-size-roma: clamp(22px, 2.2vh, 32px);
    --image-size-phase1: min(850px, 62vh);
    --image-size-phase2-4: min(700px, 52vh);
    --image-size-phase5: min(750px, 55vh);
}

/* TIER 2: Medium text (9-15 chars) - Balanced layout */
body.video-mode .flashcard[data-text-tier="medium"] {
    --text-size-ja: clamp(52px, 6.5vh, 88px);
    --text-size-en: clamp(40px, 4.5vh, 64px);
    --text-size-roma: clamp(20px, 2vh, 28px);
    --image-size-phase1: min(750px, 58vh);
    --image-size-phase2-4: min(620px, 48vh);
    --image-size-phase5: min(680px, 52vh);
}

/* TIER 3: Long text (16+ chars) - Readability priority */
body.video-mode .flashcard[data-text-tier="long"] {
    --text-size-ja: clamp(42px, 5.5vh, 72px);
    --text-size-en: clamp(32px, 4vh, 52px);
    --text-size-roma: clamp(18px, 1.8vh, 24px);
    --image-size-phase1: min(680px, 54vh);
    --image-size-phase2-4: min(550px, 44vh);
    --image-size-phase5: min(600px, 48vh);
}

/* Apply tier-based sizing to text elements */
/* Container query enhancement: use min() to combine tier size with container-based limit */
body.video-mode .japanese-text {
    font-size: min(var(--text-size-ja, clamp(64px, 8vh, 108px)), 90cqw);
}

body.video-mode .english-text,
body.video-mode #video-mode-english {
    font-size: min(var(--text-size-en, clamp(48px, 5vh, 76px)), 90cqw);
}

body.video-mode .romanization,
body.video-mode .front-romanization {
    font-size: min(var(--text-size-roma, clamp(22px, 2.2vh, 32px)), 90cqw);
}

/* Apply tier-based sizing to images (phase-specific) */
body.video-mode .flashcard[data-text-tier] .vocabulary-image {
    max-height: var(--image-size-phase2-4);
    max-width: 76vw;
    /* Smooth transitions between tiers */
    transition:
        max-height 1.0s cubic-bezier(0.4, 0, 0.2, 1),
        max-width 1.0s cubic-bezier(0.4, 0, 0.2, 1),
        transform 1.0s cubic-bezier(0.4, 0, 0.2, 1),
        filter 1.0s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 1.0s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Phase 1 always gets full-size image (image-only phase, no text competition) */
body.video-mode .flashcard[data-text-tier].video-phase-1 .vocabulary-image {
    max-height: min(850px, 62vh);  /* Full cinematic size for all tiers */
    max-width: 82vw;
}

body.video-mode .flashcard[data-text-tier].video-phase-5 .vocabulary-image {
    max-height: var(--image-size-phase5);
    max-width: 80vw;
}

/* ========================================
   FURIGANA COMPENSATION
   Ruby annotations add ~4-5vh of vertical height.
   Distribute the reduction proportionally across
   image, text margin, and gaps to keep balance.
   ======================================== */
body.video-mode .flashcard[data-text-tier][data-has-furigana] .vocabulary-image {
    max-height: calc(var(--image-size-phase2-4) - 3vh);
}
body.video-mode .flashcard[data-text-tier][data-has-furigana].video-phase-1 .vocabulary-image {
    max-height: calc(var(--image-size-phase1) - 2vh);
}
body.video-mode .flashcard[data-text-tier][data-has-furigana].video-phase-5 .vocabulary-image {
    max-height: calc(var(--image-size-phase5) - 3vh);
}
body.video-mode .flashcard[data-has-furigana] .card-content {
    gap: clamp(6px, 1vh, 12px);  /* reduced from 1.5vh */
}
body.video-mode .flashcard[data-has-furigana] .japanese-text {
    margin-top: clamp(15px, 2vh, 30px);  /* reduced from 4vh */
}

/* Video mode specific spacing */
body.video-mode .japanese-text {
    margin-top: clamp(30px, 4vh, 50px);
}

/* ===== VIDEO MODE VERB DISPLAY (TWO-COLUMN LAYOUT) ===== */

/* Verb forms container - larger for video mode */
body.video-mode .japanese-text .verb-forms {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    font-size: min(var(--text-size-ja, clamp(64px, 8vh, 108px)), 85cqw);
}

/* Dictionary form - larger emphasis */
body.video-mode .verb-dictionary {
    font-size: 1em;
    font-weight: 600;
}

/* Separator - subtle vertical bar */
body.video-mode .verb-separator {
    font-size: 0.5em;
    font-weight: 400;
    opacity: 0.4;
    margin: 0 0.1em;
    transition: opacity 0.2s ease-out;
}

/* Derived forms stack */
body.video-mode .verb-derived-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.08em;
    line-height: 1.4;
    transition: opacity 0.15s ease-out;
}

/* Polite and te-form - smaller than dictionary */
body.video-mode .verb-polite,
body.video-mode .verb-te {
    font-size: 0.5em;
    font-weight: 400;
    opacity: 0.8;
    white-space: nowrap;
}

/* Character animation within verb structure */
body.video-mode .verb-dictionary .char,
body.video-mode .verb-polite .char,
body.video-mode .verb-te .char {
    animation: japaneseCharacterDraw 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    transform-origin: center bottom;
}

/* ===== VIDEO MODE VERB ROMANIZATION ===== */

/* Verb romanization container (single line) */
body.video-mode .romanization .verb-forms.verb-romanization {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
}

/* Verb romanization dictionary */
body.video-mode .verb-romanization .verb-dictionary {
    font-size: 1em;
    font-weight: 600;
}

/* Verb romanization separator */
body.video-mode .verb-romanization .verb-separator {
    font-size: 0.8em;
    font-weight: 400;
    opacity: 0.5;
    margin: 0 0.2em;
}

/* Verb romanization derived forms */
body.video-mode .verb-romanization .verb-derived {
    font-size: 0.85em;
    font-weight: 400;
    opacity: 0.8;
    white-space: nowrap;
}

/* Letter animation within verb romanization */
body.video-mode .verb-romanization .letter {
    animation: romanizationLetterType 0.15s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

body.video-mode .verb-romanization .letter.space {
    width: 0.25em;
    animation: none;
    opacity: 1;
}

/* ===== TEXT EFFECTS WHEN AUDIO PLAYS (VIDEO MODE) ===== */

/* Japanese text - sumi ink stays — no color shift (和の感性: ink stays ink) */
body.video-mode .flashcard.audio-playing .japanese-text {
    color: #332F2B;
}

/* Romanization in video mode - simple highlight on audio play */
body.video-mode .flashcard.audio-playing .romanization {
    background: rgba(61, 90, 128, 0.18) !important;
    border-color: rgba(61, 90, 128, 0.35) !important;
    color: #3D5A80 !important;
    transition: background 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* English text - neutral shadow */
body.video-mode .flashcard .english-text {
    color: #57534e;
    text-shadow: 0 1px 4px rgba(44, 44, 44, 0.08);
    /* No color transition — prevents flash during cascade */
    transition: text-shadow 0.8s ease, opacity 0.3s ease;
}

/* ===== LOWER THIRD UI (SHARED BASE — loads before revision-mode.css) ===== */
/* Revision-mode overrides live in revision-mode.css */

.lower-third {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 70px;
    background: linear-gradient(180deg,
                                rgba(44, 44, 44, 0.0) 0%,
                                rgba(44, 44, 44, 0.4) 40%,
                                rgba(44, 44, 44, 0.6) 100%);
    backdrop-filter: blur(7px);
    z-index: 200;
    display: none;
    justify-content: center; /* Center the entire content */
    align-items: center;
    padding: 0;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

/* Subtle category color tint on lower-third */
.lower-third::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
                                transparent 0%,
                                var(--category-primary) 40%,
                                var(--category-secondary) 100%);
    opacity: 0.12;
    pointer-events: none;
    transition: opacity 0.6s ease;
}

body.video-mode .lower-third {
    display: flex;
}

body.video-mode .lower-third.visible {
    opacity: 1;
}

/* Lower third sections - SCOPED TO VIDEO MODE */
body.video-mode .lower-third-left {
    flex: 0 0 280px; /* Match right side for symmetric centering */
    display: flex;
    visibility: hidden; /* Hide content but preserve space */
}

body.video-mode .lower-third-center {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px; /* Space between progress bar and percentage */
    position: relative;
    z-index: 1;
    padding: 0 20px; /* Breathing room from edges */
}

body.video-mode .lower-third-right {
    flex: 0 0 280px; /* Match left side for symmetric centering */
    visibility: hidden; /* Preserve space, content unused */
}

/* Progress bar container - NOW CENTER FEATURE */
.progress-track {
    flex: 0 0 600px; /* Fixed width, no grow/shrink - ensures precise centering */
    height: 8px; /* Slightly taller for mobile visibility */
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--category-primary) 0%, var(--category-secondary) 100%);
    border-radius: 3px;
    width: 0%;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

/* Progress percentage - LARGER for mobile */
.progress-percentage {
    color: rgba(255, 255, 255, 0.95);
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 2rem; /* Much bigger for mobile visibility */
    font-weight: 700;
    min-width: 80px;
    text-align: right;
    transition: transform 0.2s ease-out;
    font-variant-numeric: tabular-nums;
}

/* ========================================
   VIDEO MODE: FROSTED GLASS CARD EFFECT
   Three states: base (phase 1) → text-visible (phases 2-4) → settled (phase 5)
   Aligned with revision-mode.css values
   ======================================== */

/* Base frosted glass state */
body.video-mode .card-face {
    background: rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 8px 32px rgba(44, 44, 44, 0.06) !important;
    transition: background 0.8s ease-out,
                backdrop-filter 0.8s ease-out,
                border 0.8s ease-out,
                box-shadow 0.8s ease-out;
}

/* Text-visible phases 2-4: stronger blur for readability */
body.video-mode .flashcard.video-phase-2 .card-face,
body.video-mode .flashcard.video-phase-3 .card-face,
body.video-mode .flashcard.video-phase-4 .card-face {
    background: rgba(255, 255, 255, 0.35) !important;
    backdrop-filter: blur(18px) saturate(125%);
    -webkit-backdrop-filter: blur(18px) saturate(125%);
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 8px 32px rgba(44, 44, 44, 0.06) !important;
}

/* Settled phase 5: between base and text-visible (consolidation) */
body.video-mode .flashcard.video-phase-5 .card-face {
    background: rgba(255, 255, 255, 0.18) !important;
    backdrop-filter: blur(10px) saturate(115%);
    -webkit-backdrop-filter: blur(10px) saturate(115%);
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 8px 32px rgba(44, 44, 44, 0.05) !important;
}

/* Text readability — single-layer shadow (和の感性: printed, not floating) */
body.video-mode .japanese-text,
body.video-mode .front-romanization,
body.video-mode #video-mode-english {
    text-shadow: 0 1px 4px rgba(44, 44, 44, 0.08);
}

/* Romanization — warm gray with subtle frosted backing for readability */
body.video-mode .romanization,
body.video-mode .front-romanization {
    color: #4A4642 !important;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 4px 12px;
    display: inline-block;
}

/* Image drop-shadow - lightened */
/* animation: none overrides Ken Burns from focus-mode.css (和の感性: static images for study) */
body.video-mode .vocabulary-image {
    filter: drop-shadow(0 2px 6px rgba(44, 44, 44, 0.10));
    animation: none !important;
}

/* Ensure content stays above card background */
body.video-mode .card-content {
    position: relative;
    z-index: 2;
}

/* ========================================
   BREATHING BACKGROUNDS (static, no animation)
   ======================================== */

/* Background layer - sits behind everything */
body.video-mode::after {
    content: '';
    position: fixed;
    inset: 0;
    background-image: var(--category-background);
    background-size: cover;
    background-position: center;
    z-index: -1; /* Behind everything including tint overlay */
    filter: saturate(90%);
}

/* ========================================
   TABLET/IPAD ADJUSTMENTS (769px - 1024px)
   Full video mode experience (like desktop)
   ======================================== */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Tier-based text sizing - Tablet optimized */
    body.video-mode .flashcard[data-text-tier="short"] {
        --text-size-ja: clamp(56px, 7.5vh, 96px);
        --text-size-en: clamp(42px, 4.8vh, 68px);
        --text-size-roma: clamp(20px, 2.1vh, 30px);
    }

    body.video-mode .flashcard[data-text-tier="medium"] {
        --text-size-ja: clamp(46px, 6.2vh, 80px);
        --text-size-en: clamp(36px, 4.2vh, 58px);
        --text-size-roma: clamp(18px, 1.9vh, 26px);
    }

    body.video-mode .flashcard[data-text-tier="long"] {
        --text-size-ja: clamp(38px, 5.2vh, 66px);
        --text-size-en: clamp(28px, 3.8vh, 48px);
        --text-size-roma: clamp(16px, 1.7vh, 22px);
    }

    /* Progress track - Tablet width */
    .progress-track {
        max-width: 520px;
    }

    /* Progress percentage - Slightly smaller */
    .progress-percentage {
        font-size: 1.8rem;
    }

    /* Card number badge - Tablet sizing (aligned with focus mode) */
    body.video-mode .card-number {
        padding: 8px 18px !important;
        font-size: 1rem !important;
    }

    /* POS badge - Tablet sizing (aligned with focus mode) */
    body.video-mode .class-badge {
        padding: 8px 18px !important;
        font-size: 1rem !important;
    }

    /* Logo watermark - Tablet sizing */
    body.video-mode .logo-watermark img {
        width: 70px;
        height: 70px;
    }
}

/* ========================================
   SMALLER DESKTOP SCREENS (13-inch MacBooks, etc.)
   Height-based responsive adjustments for Video Mode
   ======================================== */

/* Screens with limited vertical height (13-inch displays typically 800-960px) */
@media (max-height: 900px) {
    /* Tier-based text sizing - Compact desktop */
    body.video-mode .flashcard[data-text-tier="short"] {
        --text-size-ja: clamp(52px, 7vh, 88px);
        --text-size-en: clamp(40px, 4.5vh, 64px);
        --text-size-roma: clamp(18px, 2vh, 28px);
        --image-size-phase1: min(650px, 52vh);
        --image-size-phase2-4: min(520px, 44vh);
        --image-size-phase5: min(580px, 48vh);
    }

    body.video-mode .flashcard[data-text-tier="medium"] {
        --text-size-ja: clamp(44px, 6vh, 76px);
        --text-size-en: clamp(34px, 4vh, 56px);
        --text-size-roma: clamp(16px, 1.8vh, 24px);
        --image-size-phase1: min(580px, 48vh);
        --image-size-phase2-4: min(460px, 40vh);
        --image-size-phase5: min(520px, 44vh);
    }

    body.video-mode .flashcard[data-text-tier="long"] {
        --text-size-ja: clamp(36px, 5vh, 64px);
        --text-size-en: clamp(28px, 3.5vh, 46px);
        --text-size-roma: clamp(14px, 1.6vh, 22px);
        --image-size-phase1: min(520px, 44vh);
        --image-size-phase2-4: min(400px, 36vh);
        --image-size-phase5: min(460px, 40vh);
    }

    /* Reduce Phase 1 image max size */
    body.video-mode .flashcard[data-text-tier].video-phase-1 .vocabulary-image {
        max-height: min(650px, 52vh);
        max-width: 78vw;
    }

    body.video-mode .vocabulary-image {
        max-height: min(520px, 44vh);
    }

    body.video-mode .japanese-text {
        margin-top: clamp(15px, 2vh, 30px);
    }

    /* Progress bar - slightly smaller */
    .progress-track {
        flex: 0 0 500px;
    }

    .progress-percentage {
        font-size: 1.6rem;
    }
}

/* Even smaller screens (very compact displays, ~800px height) */
@media (max-height: 800px) {
    body.video-mode .flashcard[data-text-tier="short"] {
        --text-size-ja: clamp(44px, 6vh, 72px);
        --text-size-en: clamp(34px, 4vh, 54px);
        --text-size-roma: clamp(16px, 1.8vh, 24px);
        --image-size-phase1: min(500px, 46vh);
        --image-size-phase2-4: min(400px, 38vh);
        --image-size-phase5: min(450px, 42vh);
    }

    body.video-mode .flashcard[data-text-tier="medium"] {
        --text-size-ja: clamp(38px, 5.5vh, 64px);
        --text-size-en: clamp(28px, 3.5vh, 48px);
        --text-size-roma: clamp(14px, 1.6vh, 22px);
        --image-size-phase1: min(450px, 42vh);
        --image-size-phase2-4: min(360px, 34vh);
        --image-size-phase5: min(400px, 38vh);
    }

    body.video-mode .flashcard[data-text-tier="long"] {
        --text-size-ja: clamp(32px, 4.5vh, 56px);
        --text-size-en: clamp(24px, 3vh, 42px);
        --text-size-roma: clamp(12px, 1.4vh, 20px);
        --image-size-phase1: min(400px, 38vh);
        --image-size-phase2-4: min(320px, 30vh);
        --image-size-phase5: min(360px, 34vh);
    }

    body.video-mode .flashcard[data-text-tier].video-phase-1 .vocabulary-image {
        max-height: min(500px, 46vh);
        max-width: 75vw;
    }

    body.video-mode .vocabulary-image {
        max-height: min(400px, 38vh);
    }

    body.video-mode .japanese-text {
        margin-top: clamp(10px, 1.5vh, 20px);
    }

    .progress-track {
        flex: 0 0 400px;
    }

    .progress-percentage {
        font-size: 1.4rem;
    }

    .lower-third {
        height: 55px;
    }
}

/* ========================================
   VIDEO STORY OVERLAY
   On-demand word story panel for video mode
   ======================================== */

/* --- Trigger Button (frosted pill with label) --- */
.video-story-trigger {
    position: fixed;
    bottom: 90px;
    right: 24px;
    z-index: 2150;
    height: 42px;
    padding: 0 16px 0 14px;
    border-radius: 21px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.85rem;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.2s ease,
                transform 0.2s ease,
                box-shadow 0.2s ease;
}

.video-story-trigger:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}

.video-story-trigger .vso-trigger-icon {
    font-size: 1.1rem;
    line-height: 1;
}

.video-story-trigger .vso-trigger-key {
    font-size: 0.65rem;
    background: rgba(255, 255, 255, 0.12);
    padding: 2px 6px;
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.5);
    margin-left: 2px;
}

/* --- Overlay Backdrop --- */
.video-story-overlay {
    position: fixed;
    inset: 0;
    z-index: 2250;
    background: rgba(44, 44, 44, 0.3);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.video-story-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

/* --- Panel --- */
.video-story-panel {
    position: fixed;
    right: 0;
    top: 0;
    height: 100vh;
    height: 100dvh;
    width: 380px;
    background: rgba(15, 15, 20, 0.85);
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: -8px 0 40px rgba(44, 44, 44, 0.24);
    z-index: 2300;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
    transition: none;
    overflow: hidden;
}

.video-story-panel.open {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
    animation: videoStorySlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.video-story-panel.closing {
    animation: videoStorySlideOut 0.35s cubic-bezier(0.4, 0, 1, 1) forwards;
    pointer-events: none;
}

@keyframes videoStorySlideIn {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

@keyframes videoStorySlideOut {
    from { transform: translateX(0);    opacity: 1; }
    to   { transform: translateX(100%); opacity: 0; }
}

/* --- Close Button --- */
.video-story-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 10;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
}

.video-story-close:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* --- Header --- */
.video-story-header {
    padding: 24px 24px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
    z-index: 1;
}

.vso-word {
    font-family: 'Klee One', 'Noto Sans JP', sans-serif;
    font-size: 1.6rem;
    font-weight: 600;
    color: #f0f0f0;
    line-height: 1.3;
}

.vso-english {
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 4px;
}

/* --- Body (scrollable bubbles) --- */
.video-story-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px 24px;
    position: relative;
    z-index: 1;
}

.video-story-body::-webkit-scrollbar { width: 4px; }
.video-story-body::-webkit-scrollbar-track { background: transparent; }
.video-story-body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 2px; }

/* --- Bubble Container (staggered animation) --- */
.vso-bubble {
    opacity: 0;
    transform: translateY(12px);
    animation: vsoBubbleIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    margin-bottom: 10px;
}

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

/* --- Dark-Mode Bubble Variants --- */
.vso-chat-bubble {
    padding: 12px 16px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.vso-bubble-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.vso-bubble-text {
    font-size: 0.88rem;
    line-height: 1.55;
}

.vso-bubble-text strong { font-weight: 600; }

/* Tip (yellow) - darkened */
.vso-chat-bubble.bubble-tip {
    background: linear-gradient(135deg, rgba(253, 224, 71, 0.12), rgba(250, 204, 21, 0.08));
    color: #fef08a;
    border-color: rgba(253, 224, 71, 0.15);
}
.vso-chat-bubble.bubble-tip .vso-bubble-label { color: rgba(250, 204, 21, 0.7); }
.vso-chat-bubble.bubble-tip strong { color: #fbbf24; }

/* Warn (red) - darkened */
.vso-chat-bubble.bubble-warn {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.12), rgba(220, 38, 38, 0.08));
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.15);
}
.vso-chat-bubble.bubble-warn .vso-bubble-label { color: rgba(248, 113, 113, 0.7); }
.vso-chat-bubble.bubble-warn strong { color: #f87171; }

/* Culture (green) - darkened */
.vso-chat-bubble.bubble-culture {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(5, 150, 105, 0.08));
    color: #6ee7b7;
    border-color: rgba(16, 185, 129, 0.15);
}
.vso-chat-bubble.bubble-culture .vso-bubble-label { color: rgba(52, 211, 153, 0.7); }
.vso-chat-bubble.bubble-culture strong { color: #34d399; }

/* Memory (indigo) - darkened */
.vso-chat-bubble.bubble-memory {
    background: linear-gradient(135deg, rgba(61, 90, 128, 0.12), rgba(44, 74, 110, 0.08));
    color: #8AA4C0;
    border-color: rgba(61, 90, 128, 0.2);
}
.vso-chat-bubble.bubble-memory .vso-bubble-label { color: rgba(138, 164, 192, 0.7); }
.vso-chat-bubble.bubble-memory strong { color: #8AA4C0; }

/* --- Examples (sentences) --- */
.vso-examples {
    opacity: 0;
    transform: translateY(12px);
    animation: vsoBubbleIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    margin-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 14px;
}

.vso-examples-label {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 10px;
}

.vso-example {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}

.vso-example-num {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(61, 90, 128, 0.3);
    color: #8AA4C0;
    font-size: 0.72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}

.vso-example-content {
    flex: 1;
    background: rgba(255, 255, 255, 0.04);
    border-left: 3px solid rgba(61, 90, 128, 0.4);
    border-radius: 0 10px 10px 0;
    padding: 10px 14px;
}

.vso-example-jp {
    font-family: 'Klee One', 'Noto Sans JP', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: #e0e7ff;
    line-height: 1.4;
}

.vso-example-romaji {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-style: italic;
    color: rgba(196, 181, 253, 0.5);
    margin-top: 3px;
}

.vso-example-en {
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 4px;
}

/* --- Inline text formatting in dark mode --- */
.vso-bubble-text .kanji-term {
    color: #e0e7ff;
    font-weight: 500;
    font-size: 1.05em;
}

.vso-bubble-text .story-romaji {
    color: rgba(196, 181, 253, 0.9);
    font-style: italic;
}

.vso-bubble-text .story-gloss {
    color: rgba(180, 200, 235, 0.9);
    font-style: italic;
}

.vso-bubble-text .pitch-drop {
    color: #f87171;
    font-weight: 700;
}

.vso-bubble-text .bullet-item {
    padding-left: 12px;
    position: relative;
    margin-top: 4px;
}

.vso-bubble-text .bullet-item::before {
    content: '\2022';
    position: absolute;
    left: 0;
    opacity: 0.5;
}

/* --- Mobile: hide overlay and trigger --- */
@media (max-width: 768px) {
    .video-story-overlay,
    .video-story-trigger {
        display: none !important;
    }
}

/* --- Compact screens: narrower panel --- */
@media (max-height: 800px) {
    .video-story-panel {
        bottom: 55px; /* match compact lower-third */
    }
}