/* ==========================================================================
   MOBILE RESPONSIVE STYLES FOR MAP STORYTELLING MODAL
   Designed specifically for Smartphones (iOS & Android) & Tablets (<768px)
   ========================================================================== */

@media screen and (max-width: 768px) {

    /* 1. MAIN MODAL CONTAINER & MAP */
    #storytellingModal.story-overlay-modal,
    #storytellingModal {
        width: 100vw !important;
        height: 100dvh !important;
        inset: 0 !important;
        overflow: hidden !important;
        z-index: 999999 !important;
    }

    #storytellingModal #storyMap {
        width: 100% !important;
        height: 100% !important;
    }

    /* 2. TOP BAR CONTROLS (SOLID ONYX BLACK CAPSULE - MAXIMUM SHARP CONTRAST) */
    #storytellingModal .story-top-bar {
        top: 6px !important;
        left: 6px !important;
        right: 6px !important;
        padding: 6px 10px !important;
        border-radius: 16px !important;
        background: #0f172a !important; /* 100% Solid Onyx Black, zero blur fading */
        border: 2px solid #7c3aed !important; /* Crisp purple neon border */
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
        z-index: 90 !important;
        opacity: 1 !important;
    }

    #storytellingModal .story-header-branding {
        gap: 8px !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    #storytellingModal .story-header-logo {
        font-size: 1.1rem !important;
        width: 32px !important;
        height: 32px !important;
        border-radius: 10px !important;
        background: linear-gradient(135deg, #7c3aed, #4f46e5) !important;
    }

    #storytellingModal .story-header-text h1 {
        font-size: 0.78rem !important;
        line-height: 1.25 !important;
        max-width: 170px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        color: #ffffff !important; /* Razor-sharp solid white */
        font-weight: 900 !important;
        text-shadow: 0 1px 2px rgba(0,0,0,0.8) !important;
    }

    #storytellingModal .story-header-text p,
    #storytellingModal #storyPhaseLabel {
        font-size: 0.64rem !important;
        max-width: 160px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        color: #fbbf24 !important; /* Bright Gold/Yellow on Black for maximum legibility */
        font-weight: 800 !important;
    }

    #storytellingModal .story-btn-skip {
        padding: 6px 12px !important;
        font-size: 0.7rem !important;
        border-radius: 12px !important;
        background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%) !important;
        color: #ffffff !important;
        border: none !important;
        font-weight: 900 !important;
        box-shadow: 0 4px 15px rgba(124, 58, 237, 0.5) !important;
    }

    /* 3. TIMELINE SIDEBAR -> TOP HORIZONTAL CHIP BAR */
    #storytellingModal .story-timeline-sidebar {
        position: absolute !important;
        top: 56px !important;
        left: 6px !important;
        right: 6px !important;
        width: auto !important;
        height: 42px !important;
        max-height: 42px !important;
        padding: 4px 6px !important;
        border-radius: 12px !important;
        background: rgba(15, 23, 42, 0.85) !important;
        backdrop-filter: blur(14px) !important;
        -webkit-backdrop-filter: blur(14px) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        z-index: 85 !important;
    }

    #storytellingModal .story-timeline-title {
        display: none !important;
    }

    #storytellingModal .story-timeline-list {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 6px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;
        scrollbar-width: none !important;
    }

    #storytellingModal .story-timeline-list::-webkit-scrollbar {
        display: none !important;
    }

    #storytellingModal .story-timeline-item {
        flex-shrink: 0 !important;
        padding: 3px 8px !important;
        border-radius: 16px !important;
        font-size: 0.68rem !important;
        margin: 0 !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        color: #cbd5e1 !important;
    }

    #storytellingModal .story-timeline-item.active {
        background: linear-gradient(135deg, #7c3aed, #4f46e5) !important;
        color: #ffffff !important;
        font-weight: 700 !important;
    }

    #storytellingModal .story-timeline-num {
        width: 16px !important;
        height: 16px !important;
        font-size: 0.6rem !important;
    }

    /* 4. NARRATIVE TYPING BOX AT BOTTOM (HIGH CONTRAST BRIGHT TEXT) */
    #storytellingModal .story-narrative-box {
        position: absolute !important;
        bottom: 24px !important;
        left: 6px !important;
        right: 6px !important;
        width: auto !important;
        padding: 8px 12px !important;
        border-radius: 14px !important;
        background: rgba(15, 23, 42, 0.94) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border: 1.5px solid rgba(168, 85, 247, 0.45) !important;
        box-shadow: 0 4px 25px rgba(0, 0, 0, 0.6) !important;
        z-index: 80 !important;
        max-height: 85px !important;
        overflow-y: auto !important;
    }

    #storytellingModal .story-narrative-header {
        margin-bottom: 2px !important;
    }

    #storytellingModal .story-narrative-phase {
        font-size: 0.65rem !important;
        color: #c084fc !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }

    #storytellingModal .story-narrative-text,
    #storytellingModal #storyNarrativeText {
        font-size: 0.78rem !important;
        line-height: 1.35 !important;
        color: #ffffff !important; /* Pure crisp bright white text */
        font-weight: 600 !important;
        text-shadow: 0 1px 3px rgba(0,0,0,0.8) !important;
    }

    #storytellingModal .story-typing-cursor {
        background-color: #a855f7 !important;
    }

    /* 5. GLASS CARD UI -> COMPACT BOTTOM SHEET (HIGH SPECIFICITY OVERRIDE) */
    #storytellingModal .story-card-container {
        position: absolute !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        z-index: 95 !important;
        padding: 0 !important;
        pointer-events: none !important;
        display: block !important;
    }

    #storytellingModal .story-glass-card,
    #storytellingModal #storyGlassCard,
    #storytellingModal .story-glass-card.show {
        pointer-events: auto !important;
        width: 100% !important;
        max-height: 38vh !important; /* Compact Bottom Sheet on mobile! */
        overflow-y: auto !important;
        border-radius: 20px 20px 0 0 !important;
        padding: 10px 12px 28px 12px !important;
        background: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: blur(24px) !important;
        -webkit-backdrop-filter: blur(24px) !important;
        box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.35) !important;
        border-top: 2px solid rgba(124, 58, 237, 0.4) !important;
        transform: translateY(0) scale(1) !important;
    }

    #storytellingModal .story-card-image-wrap {
        height: 75px !important;
        border-radius: 10px !important;
        margin-bottom: 6px !important;
    }

    #storytellingModal .story-card-badge {
        font-size: 0.65rem !important;
        padding: 2px 6px !important;
        top: 6px !important;
        left: 6px !important;
    }

    #storytellingModal .story-card-title {
        font-size: 0.95rem !important;
        line-height: 1.2 !important;
        margin-bottom: 2px !important;
        color: #1e1b4b !important;
    }

    #storytellingModal .story-card-address {
        font-size: 0.72rem !important;
        margin-bottom: 6px !important;
        color: #64748b !important;
    }

    #storytellingModal .story-stats-grid {
        gap: 6px !important;
        margin-bottom: 6px !important;
    }

    #storytellingModal .story-stat-box {
        padding: 5px 8px !important;
        border-radius: 8px !important;
        background: #f1f5f9 !important;
    }

    #storytellingModal .story-stat-val {
        font-size: 0.85rem !important;
        color: #4338ca !important;
    }

    #storytellingModal .story-stat-lbl {
        font-size: 0.6rem !important;
        color: #64748b !important;
    }

    #storytellingModal .story-board-section {
        padding: 6px 8px !important;
        border-radius: 8px !important;
        margin-bottom: 6px !important;
        background: #f8fafc !important;
    }

    #storytellingModal .story-board-title {
        font-size: 0.68rem !important;
        margin-bottom: 4px !important;
    }

    #storytellingModal .story-board-item {
        padding: 4px 6px !important;
        font-size: 0.7rem !important;
    }

    #storytellingModal .story-card-action-btn {
        padding: 8px 12px !important;
        font-size: 0.78rem !important;
        border-radius: 10px !important;
        margin-top: 4px !important;
    }

    /* 6. FLOATING DISTANCE ROUTE BADGES ON MOBILE (TIẾP CẬN & KẾT NỐI GIAO THÔNG) */
    #storytellingModal .story-distance-box,
    #storytellingModal #storyDistanceBox {
        display: none !important;
    }

    #storytellingModal .custom-story-distance-icon {
        background: transparent !important;
        border: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        height: auto !important;
        z-index: 9999 !important;
    }

    #storytellingModal .story-distance-box-badge {
        background: rgba(15, 23, 42, 0.94) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        border: 2px solid #38bdf8 !important;
        border-radius: 16px !important;
        padding: 6px 12px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        box-shadow: 0 8px 30px rgba(2, 132, 199, 0.5), 0 0 15px rgba(56, 189, 248, 0.4) !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
        animation: storyBadgeFloat 3s ease-in-out infinite alternate !important;
    }

    #storytellingModal .story-dist-item,
    #storytellingModal .story-dist-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    #storytellingModal .story-dist-lbl {
        font-size: 0.58rem !important;
        font-weight: 800 !important;
        color: #38bdf8 !important;
        letter-spacing: 0.5px !important;
        text-transform: uppercase !important;
        line-height: 1.1 !important;
        margin-bottom: 2px !important;
    }

    #storytellingModal .story-dist-val {
        font-family: 'Be Vietnam Pro', sans-serif !important;
        font-size: 0.85rem !important;
        font-weight: 900 !important;
        color: #ffffff !important;
        line-height: 1.1 !important;
    }

    #storytellingModal .story-dist-divider,
    #storytellingModal .story-dist-sep {
        width: 1.5px !important;
        height: 22px !important;
        background: rgba(56, 189, 248, 0.4) !important;
    }

    /* Route polyline styling on mobile */
    #storytellingModal .leaflet-overlay-pane path {
        stroke-linecap: round !important;
        stroke-linejoin: round !important;
    }

    /* 7. FLASH ANNOUNCEMENT OVERLAY */
    #storytellingModal .story-announcement-card,
    #storytellingModal #storyAnnouncementCard {
        width: 88vw !important;
        max-width: 310px !important;
        padding: 16px 12px !important;
        border-radius: 20px !important;
    }

    #storytellingModal .story-announcement-icon {
        font-size: 1.8rem !important;
    }

    #storytellingModal .story-announcement-school-name {
        font-size: 1rem !important;
        line-height: 1.25 !important;
    }

    /* 8. INTRO SCREEN TITLE & WRAPPING FIX ON MOBILE */
    #storytellingModal .story-intro-card {
        width: 90vw !important;
        max-width: 330px !important;
        padding: 24px 16px !important;
        border-radius: 24px !important;
        box-sizing: border-box !important;
    }

    #storytellingModal .story-intro-badge {
        padding: 7px 14px !important;
        font-size: 0.76rem !important;
        letter-spacing: 0.3px !important;
        white-space: nowrap !important;
        max-width: 98% !important;
        box-sizing: border-box !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #storytellingModal .story-intro-title {
        font-size: 1.1rem !important;
        line-height: 1.35 !important;
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        text-align: center !important;
        max-width: 100% !important;
    }

    #storytellingModal .story-intro-highlight {
        font-size: 1.25rem !important;
        line-height: 1.35 !important;
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        display: block !important;
        text-align: center !important;
        max-width: 100% !important;
        padding: 6px 0 !important;
    }

    #storytellingModal .story-intro-top-heading {
        font-size: 0.8rem !important;
        display: block !important;
        margin-bottom: 6px !important;
        white-space: normal !important;
    }

    #storytellingModal .story-intro-subtitle {
        font-size: 0.78rem !important;
        line-height: 1.4 !important;
        white-space: normal !important;
        max-width: 100% !important;
        margin-top: 14px !important;
    }

    /* 9. BOTTOM PROGRESS DOTS (Positioned under top header bar on mobile) */
    #storytellingModal .story-progress-bar-wrap {
        top: 66px !important;
        bottom: auto !important;
        gap: 6px !important;
        z-index: 100 !important;
        background: rgba(15, 23, 42, 0.65) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        padding: 4px 10px !important;
        border-radius: 12px !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
    }

    #storytellingModal .story-progress-dot {
        width: 6px !important;
        height: 6px !important;
    }

    #storytellingModal .story-progress-dot.active {
        width: 18px !important;
    }

    /* 10. OPEN BOOK MAP OVERLAY & PERFECT CONCENTRIC CENTERING FIX ON MOBILE */
    #storytellingModal .story-ai-book-marker {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 260px !important;
        height: 195px !important;
        pointer-events: none !important;
    }

    #storytellingModal .story-bright-book-wrapper {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
        position: relative !important;
        transform-origin: 50% 45.33% !important;
    }

    #storytellingModal .story-bright-book-svg {
        position: absolute !important;
        top: 45.33% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 86% !important;
        height: 86% !important;
    }

    #storytellingModal .story-bright-book-aura {
        width: 240px !important;
        height: 180px !important;
        position: absolute !important;
        left: 50% !important;
        top: 45.33% !important;
        transform: translate(-50%, -50%) !important;
    }

    #storytellingModal .story-bright-book-aura.ring-2 {
        width: 280px !important;
        height: 210px !important;
        position: absolute !important;
        left: 50% !important;
        top: 45.33% !important;
        transform: translate(-50%, -50%) !important;
    }

    /* Map Tooltips horizontal pill badge layout - SOLID SHARP CONTRAST */
    .leaflet-tooltip.story-tooltip-custom,
    #storytellingModal .leaflet-tooltip,
    #storytellingModal .story-tooltip-comp {
        font-size: 0.78rem !important;
        padding: 7px 14px !important;
        border-radius: 16px !important;
        width: auto !important;
        max-width: 88vw !important;
        white-space: nowrap !important;
        text-align: center !important;
        line-height: 1.3 !important;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25) !important;
        border: 2px solid #7c3aed !important;
        background: #ffffff !important; /* 100% Solid Pure White background, zero blur transparency fading */
        color: #1e1b4b !important; /* Deep Midnight Navy for 100% sharp legibility */
        font-weight: 900 !important;
        opacity: 1 !important;
    }

    #storytellingModal .leaflet-tooltip b,
    #storytellingModal .story-tooltip-comp b {
        color: #2e1065 !important;
        font-weight: 900 !important;
    }

    #storytellingModal .leaflet-tooltip small,
    #storytellingModal .leaflet-tooltip .story-tooltip-sublabel,
    #storytellingModal .story-tooltip-sub {
        display: block !important;
        font-size: 0.65rem !important;
        font-weight: 800 !important;
        color: #6b21a8 !important; /* Deep Purple sublabel for high contrast */
        margin-top: 2px !important;
        white-space: nowrap !important;
    }

    #storytellingModal .story-merged-hero-label b {
        font-size: 0.75rem !important;
        white-space: nowrap !important;
    }
}

/* Extra Small Smartphones (<400px screen width) */
@media screen and (max-width: 400px) {
    #storytellingModal .story-header-text h1 {
        max-width: 130px !important;
        font-size: 0.72rem !important;
    }

    #storytellingModal .story-narrative-box {
        bottom: 20px !important;
        padding: 6px 10px !important;
    }

    #storytellingModal .story-narrative-text,
    #storytellingModal #storyNarrativeText {
        font-size: 0.72rem !important;
    }

    #storytellingModal .story-glass-card,
    #storytellingModal #storyGlassCard {
        max-height: 35vh !important;
    }

    #storytellingModal .story-bright-book-svg {
        position: absolute !important;
        top: 45.33% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 86% !important;
        height: 86% !important;
    }
}