/* ============================================================================
   Responsive Root — Shared design tokens, safe-area, viewport height, z-index
   ============================================================================
   Filename begins with underscore so it loads before other assets alphabetically
   in Dash's static file serving order. Defines the coordinate system every
   other responsive rule reads from:

     --player-h       Audio player bar height (56px)
     --vc-h           Verse controller bar height (52px)
     --safe-bottom    env(safe-area-inset-bottom) with 0 fallback
     --safe-top       env(safe-area-inset-top) with 0 fallback
     --safe-left      env(safe-area-inset-left) with 0 fallback
     --safe-right     env(safe-area-inset-right) with 0 fallback
     --bottom-bars    Total height currently occupied by fixed bottom bars
     --bar-pad        Body bottom padding — bars + safe-area + breathing room

   Z-index scale (documented, used as vars to prevent collisions):
     --z-sticky-header   50
     --z-sticky-tool     100
     --z-tooltip         300
     --z-smartbook-tip   500
     --z-companion       990
     --z-fab             995   (was 991, now above the vc bar)
     --z-vc              9998
     --z-player          9999
     --z-slideout        10000
     --z-modal           10001
     --z-toast           10100
   ============================================================================ */

:root {
    /* Bottom-bar heights (override at body.player-active / body.vc-active) */
    --player-h: 0px;
    --vc-h: 0px;

    /* Safe area insets with 0 fallback (requires viewport-fit=cover in meta) */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);

    /* Total fixed bottom-bar occupation */
    --bottom-bars: calc(var(--player-h) + var(--vc-h));

    /* Body bottom padding (includes safe area) */
    --bar-pad: calc(var(--bottom-bars) + var(--safe-bottom) + 12px);

    /* Z-index scale */
    --z-sticky-header: 50;
    --z-sticky-tool: 100;
    --z-tooltip: 300;
    --z-smartbook-tip: 500;
    --z-companion: 990;
    --z-fab: 995;
    --z-vc: 9998;
    --z-player: 9999;
    --z-slideout: 10000;
    --z-modal: 10001;
    --z-toast: 10100;
}

/* When the audio player bar is visible (body.player-active set by JS),
   bump --player-h so everything downstream shifts up. */
body.player-active {
    --player-h: 56px;
}

/* When the verse controller bar is visible (body.vc-active) */
body.vc-active {
    --vc-h: 52px;
}

/* ============================================================================
   1. GLOBAL SAFETY NET
   ============================================================================ */

/* Prevent accidental horizontal scrollbars at the page level.
   Individual scrollable regions that need x-scroll set overflow-x: auto locally. */
html,
body {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Prevent any image / media from forcing its parent wider than viewport */
img, video, canvas, svg {
    max-width: 100%;
    height: auto;
}

/* Long unbreakable strings (URLs, Arabic without spaces, transliterations)
   should wrap rather than overflow */
p, li, blockquote, td, th, label, a {
    overflow-wrap: anywhere;
    word-break: normal;  /* keep natural breaks; anywhere kicks in only when needed */
}

/* Arabic-specific: allow break anywhere if a long token would overflow.
   Uses :is() for compact rule. Targets known Arabic container classes. */
:is(
    .arabic-verse-text,
    .bismillah-text,
    .wbw-arabic,
    .feed-card-arabic,
    .feed-card-arabic-text,
    .drawer-wbw-ar,
    .feed-card-bismillah,
    .am-arabic,
    .juz-card-arabic,
    .center-arabic,
    .juz-node-verse,
    .tt-verse,
    .acc-arabic,
    .slideout-verse-arabic
) {
    word-break: normal;
    overflow-wrap: anywhere;
    /* unicode-bidi: plaintext lets Arabic + Western digits (e.g. "2:255") render correctly */
    unicode-bidi: plaintext;
}

/* ============================================================================
   2. BODY PADDING TO CLEAR FIXED BOTTOM BARS
   ============================================================================ */

/* Any combination of player + vc bars results in correct body padding */
body.player-active,
body.vc-active,
body.player-active.vc-active {
    padding-bottom: var(--bar-pad);
}

/* ============================================================================
   3. SAFE AREA for iPhone notch / home indicator
   ============================================================================ */

/* Fixed bottom bars: add safe-area to their padding so controls aren't covered
   by the home indicator. Applied at the bar level, not repeated per-component. */
.quran-player-bar {
    padding-bottom: var(--safe-bottom) !important;
    height: calc(56px + var(--safe-bottom)) !important;
}

.verse-controller-bar {
    padding-bottom: var(--safe-bottom);
    height: calc(52px + var(--safe-bottom));
}

/* Any left/right side-notch content */
.tafsir-reading-companion,
.quran-player-bar,
.verse-controller-bar,
.ask-muslim-panel,
#ask-muslim-bubble,
.tafsir-slideout-panel {
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
}

/* ============================================================================
   4. UNIFIED BOTTOM-BAR STACK — everything positions against CSS vars
   ============================================================================ */

/* Verse controller sits directly above audio player (if any) */
.verse-controller-bar {
    bottom: var(--player-h) !important;
    z-index: var(--z-vc) !important;
}

/* Audio player at ground level */
.quran-player-bar {
    bottom: 0 !important;
    z-index: var(--z-player) !important;
}

/* Desktop reading companion — top-aligned right rail, unaffected */
.tafsir-reading-companion {
    z-index: var(--z-companion) !important;
}

/* Companion FAB (mobile bottom sheet trigger) — sits above BOTH bars */
.tafsir-companion-fab {
    bottom: calc(var(--bottom-bars) + var(--safe-bottom) + 16px) !important;
    z-index: var(--z-fab) !important;
}

/* Chatbot FAB bubble — same stacking as companion FAB */
#ask-muslim-bubble {
    bottom: calc(var(--bottom-bars) + var(--safe-bottom) + 16px) !important;
    z-index: var(--z-fab) !important;
}

/* Slideout + modals above all bars */
.tafsir-slideout { z-index: var(--z-slideout) !important; }
.tafsir-prefs-panel, .tafsir-prefs-backdrop { z-index: var(--z-modal) !important; }

/* ============================================================================
   5. DYNAMIC VIEWPORT HEIGHT — replace 100vh with safer alternatives
   ============================================================================ */

/* On browsers that support dvh, sidebar/companion should use it.
   Fallback to 100vh for older browsers (which exhibit the iOS URL bar bug, but
   at least render). */
@supports (height: 100dvh) {
    .tafsir-reading-companion {
        max-height: calc(100dvh - 110px - var(--bottom-bars) - var(--safe-bottom));
    }
    .tafsir-companion-panel {
        max-height: calc(100dvh - 120px - var(--bottom-bars) - var(--safe-bottom));
    }
    .sura-sidebar {
        max-height: calc(100dvh - 200px);
    }
    .tafsir-prefs-panel {
        max-height: calc(80dvh - var(--bottom-bars));
    }
}

/* Mobile bottom sheet for companion — account for bars */
@media (max-width: 1200px) {
    .tafsir-reading-companion[data-open="true"] .tafsir-companion-panel {
        max-height: calc(72dvh - var(--bottom-bars) - var(--safe-bottom));
        bottom: calc(var(--bottom-bars) + var(--safe-bottom));
    }
}

@supports not (height: 100dvh) {
    .tafsir-reading-companion[data-open="true"] .tafsir-companion-panel {
        /* Fallback: subtract conservative estimate */
        max-height: calc(72vh - 108px);
    }
}

/* ============================================================================
   6. TOUCH TARGET MINIMUM — invisible hit area expansion
   ============================================================================ */

/* For any button/link with visual size < 44px, use ::before to expand hit area.
   Only on touch devices (pointer: coarse) so desktops keep precise targets. */

@media (pointer: coarse) {
    /* Apply to a broad set of small controls. The ::before overlay is a
       transparent 44x44 centered box that receives the tap. */
    :is(
        .feed-card-btn,
        .vc-nav-btn,
        .vc-action-btn,
        .vc-audio-btn,
        .qp-btn,
        .nav-action-btn,
        .reader-nav-btn,
        .tafsir-slideout-btn,
        .tafsir-comp-verse-play,
        .tafsir-bookmark-btn,
        .tafsir-search-close,
        .tafsir-prefs-close,
        .tafsir-companion-close,
        .tafsir-companion-icon-btn,
        .tafsir-comp-tab,
        .meanings-card-num,
        .feed-card-ref,
        .vc-ref-pill
    ) {
        position: relative;
    }

    :is(
        .feed-card-btn,
        .vc-nav-btn,
        .vc-action-btn,
        .qp-btn,
        .nav-action-btn,
        .reader-nav-btn,
        .tafsir-slideout-btn,
        .tafsir-comp-verse-play,
        .tafsir-bookmark-btn,
        .tafsir-search-close,
        .tafsir-prefs-close,
        .tafsir-companion-close,
        .tafsir-companion-icon-btn
    )::before {
        content: "";
        position: absolute;
        inset: 50% 50% 50% 50%;
        width: 44px;
        height: 44px;
        transform: translate(-50%, -50%);
        /* Invisible overlay; captures taps */
        background: transparent;
        /* Don't block other pointer events on desktop */
        pointer-events: auto;
    }
}

/* ============================================================================
   7. BREAKPOINT TOKENS (for reference — use these in new code)
   ============================================================================
     xs: <= 479.98px   (small phones)
     sm: 480 - 767.98  (phones)
     md: 768 - 991.98  (small tablets)
     lg: 992 - 1199.98 (large tablets / small desktops)
     xl: >= 1200       (desktops)
   ============================================================================ */

/* ============================================================================
   8. PRINT-SAFE BASE
   ============================================================================ */

@media print {
    html, body { overflow: visible !important; }
    .quran-player-bar,
    .verse-controller-bar,
    .tafsir-reading-companion,
    .tafsir-companion-fab,
    #ask-muslim-bubble,
    .tafsir-slideout {
        display: none !important;
    }
    body {
        padding-bottom: 0 !important;
    }
}