/* ============================================
   SAFE AREA / DYNAMIC ISLAND PATCH
   Add this block immediately after :root {} in styles.css
   Requires: <meta name="viewport" content="..., viewport-fit=cover">
             <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
   Both are already present in your index.html ✅
   ============================================ */

/* ── 1. Expose safe-area values as CSS custom properties ── */
:root {
    --sat: env(safe-area-inset-top);       /* Dynamic Island / notch height */
    --sar: env(safe-area-inset-right);
    --sab: env(safe-area-inset-bottom);    /* Home indicator bar height */
    --sal: env(safe-area-inset-left);
}

/* ── 2. TOP NAV — push below Dynamic Island / notch ──
   Your nav is fixed at top:0 with height:70px.
   We keep the 70px visual area but add the safe-area gap above it. */
.top-nav {
    /* Shift the bar down by the safe-area inset */
    top: env(safe-area-inset-top);

    /* Also expand its total box so the background fills
       all the way to the physical top edge (no gap behind the island) */
    padding-top: 0;                        /* nav already vertically-centers its children */
    margin-top: 0;

    /* Extend the background colour/blur up behind the island */
    /* This pseudo-element covers the gap above the bar */
}

/* Cover the status-bar strip above the nav with the same background */
.top-nav::before {
    content: '';
    position: absolute;
    top: calc(-1 * env(safe-area-inset-top));
    left: 0;
    right: 0;
    height: env(safe-area-inset-top);
    background: rgba(26, 27, 46, 0.95);   /* Match .top-nav background */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: -1;
    pointer-events: none;
}

/* Main content nav + safe-area clearance is already handled:
     1. `.main-content { margin-top: 70px }` in styles.css reserves space
        for the fixed 70px top-nav.
     2. `body.mode-standalone { padding-top: env(safe-area-inset-top) }`
        (below, section 9) pushes everything down past the notch in PWA.
   Previously this block added `padding-top: calc(70px + env())` on top
   of those two — double-counting nav clearance AND the safe-area inset
   in PWA, producing ~100px of excess padding above the dashboard. The
   default `padding: var(--spacing-2xl)` from styles.css is the only
   extra breathing room needed. */

/* ── 3. SIDEBAR — starts below the nav (already offset by top:70px) ──
   Extend it to also account for the safe-area inset */
.sidebar {
    top: calc(70px + env(safe-area-inset-top));
    height: calc(100vh - 70px - env(safe-area-inset-top));
}

/* ── 4. NOTIFICATION / BROADCAST BANNER ──
   Your banner slides in from the top. Make sure it clears the island. */
#broadcastBanner,
.broadcast-banner,
.notification-banner,
[id*="Banner"][style*="top"],
[class*="banner"][style*="top"] {
    top: calc(env(safe-area-inset-top) + 8px) !important;
}

/* ── 5. MODALS — keep them inside the safe area ──
   Fixed modals that sit at top:0 need top padding */
.modal-overlay,
.modal-backdrop,
#broadcastModal,
[id*="Modal"],
[class*="modal"] {
    padding-top: env(safe-area-inset-top);
}

/* ── 6. PLUGIN FULLSCREEN OVERLAY ──
   Overlay now uses `top: env(safe-area-inset-top); bottom:
   env(safe-area-inset-bottom)` directly (see app.js inline style), so
   it already clears the notch and home indicator at the
   container level. No extra overrides needed here — games + loaders
   can't escape the overlay because it also has
   `transform: translate(0)` creating a containing block for
   position:fixed descendants. Leaving the block as a no-op for now
   so the file structure / numbering matches the rest of the patch. */

/* Cancel the extra safe-area padding that plugins/appDetection/ios-safe-area-fix.css
   adds to #pluginContent when it lives inside the fullscreen overlay —
   the leave bar already clears the inset, and that rule would otherwise
   push game content down by an additional inset. Two IDs gives us the
   specificity to beat that file's !important. */
#pluginFullscreenOverlay #pluginContent {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ── 7. LOADING SCREEN ──
   Centres content but status bar overlaps it on iOS PWA */
.loading-screen {
    padding-top: env(safe-area-inset-top);
}

/* ── 8. BOTTOM HOME INDICATOR CLEARANCE ──
   Any fixed bottom elements need padding-bottom too */
.bottom-nav,
.tab-bar,
#pwaBanner,
[id*="bottomBar"],
[class*="bottom-bar"],
[class*="tab-bar"] {
    padding-bottom: env(safe-area-inset-bottom);
    /* Also extend background to the physical bottom edge */
    margin-bottom: 0;
}

/* ── 9. SCROLLABLE CONTENT AREAS ──
   Scrollable containers should also not clip behind the home indicator */
.main-content,
.dashboard-content,
.plugin-content,
#pluginFullscreenContent {
    padding-bottom: env(safe-area-inset-bottom);
}

/* ── 10. iOS PWA ONLY — body-level safe area so nothing ever bleeds ──
   Only applied when running as standalone PWA or TWA */
body.mode-standalone,
body.mode-twa {
    /* These classes are added by your appDetection.js automatically ✅ */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

/* Compensate: nav is already positioned relative to body,
   so un-offset its top when body padding is active */
body.mode-standalone .top-nav,
body.mode-twa .top-nav {
    top: 0;   /* body padding already handles the gap */
}

body.mode-standalone .top-nav::before,
body.mode-twa .top-nav::before {
    display: none; /* Not needed — body absorbs the safe area */
}

body.mode-standalone .sidebar,
body.mode-twa .sidebar {
    top: 70px;
    height: calc(100vh - 70px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}