/* ============================================
   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;
}

/* Push main content so it starts BELOW the nav + the safe area */
.main-content,
.dashboard-content,
.content-wrapper {
    /* Your nav is 70px; add the safe-area inset on top of that */
    padding-top: calc(70px + env(safe-area-inset-top));
}

/* ── 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 ──
   The leave bar is the topmost element in the overlay */
#pluginFullscreenOverlay {
    /* Overlay itself fills inset: 0, which is fine.
       The leave bar inside needs to sit below the island. */
}

#pluginLeaveBar {
    padding-top: calc(env(safe-area-inset-top) + 8px);
    /* Increase the bar height to accommodate the extra padding */
    min-height: calc(52px + env(safe-area-inset-top));
    height: auto;
}

/* ── 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));
}