/*
 * iOS PWA — paint safe areas (Dynamic Island ears) with app background, not system black.
 * Needs viewport-fit=cover + apple-mobile-web-app-status-bar-style: black-translucent.
 */

html {
    background-color: var(--bg-main);
    min-height: 100%;
    min-height: -webkit-fill-available;
}

body {
    min-height: 100vh;
    min-height: -webkit-fill-available;
    position: relative;
}

/* Full-bleed layer behind everything — covers notch / island side ears */
html::before {
    content: "";
    position: fixed;
    z-index: -2;
    top: calc(-1 * env(safe-area-inset-top, 0px));
    right: calc(-1 * env(safe-area-inset-right, 0px));
    bottom: calc(-1 * env(safe-area-inset-bottom, 0px));
    left: calc(-1 * env(safe-area-inset-left, 0px));
    pointer-events: none;
    background:
        radial-gradient(ellipse 82% 54% at 50% -10%, var(--brand-fuchsia-glow) 0%, transparent 54%),
        radial-gradient(ellipse 36% 28% at 8% 92%, var(--brand-gold-dark-glow) 0%, transparent 48%),
        radial-gradient(ellipse 40% 32% at 92% 8%, var(--brand-cyan-glow) 0%, transparent 50%),
        radial-gradient(circle at top, var(--bg-ambient-warm) 0%, var(--bg-main) 42%, var(--bg-deep) 100%);
    background-color: var(--bg-main);
}

/* Shell pages — match page ambient so island ears don't show a different gradient */
html:has(.filmparty-home),
html:has(.catalog-page),
html:has(.profile-modern-page),
html:has(.search-results-page),
html:has(.actor-profile-page),
html:has(.director-profile-page) {
    background: var(--fp-shell-ambient-bg);
    background-color: var(--bg-main);
}

html:has(.filmparty-home)::before,
html:has(.catalog-page)::before,
html:has(.profile-modern-page)::before,
html:has(.search-results-page)::before,
html:has(.actor-profile-page)::before,
html:has(.director-profile-page)::before {
    background: var(--fp-shell-ambient-bg);
    background-color: var(--bg-main);
}

html:has(.filmparty-home) body,
html:has(.catalog-page) body,
html:has(.profile-modern-page) body,
html:has(.search-results-page) body,
html:has(.actor-profile-page) body,
html:has(.director-profile-page) body {
    background: var(--fp-shell-ambient-bg);
    background-color: var(--bg-main);
}

.filmparty-home,
.catalog-page,
.profile-modern-page,
.search-results-page,
.actor-profile-page,
.director-profile-page,
.movie-floating-page {
    min-height: 100vh;
    min-height: -webkit-fill-available;
}

@supports (padding-top: env(safe-area-inset-top)) {
    :root {
        --fp-safe-area-top: env(safe-area-inset-top, 0px);
        --fp-safe-area-bottom: env(safe-area-inset-bottom, 0px);
        --fp-topbar-gap: var(--fp-safe-area-top);
    }

    /*
     * Reserve the iPhone status-bar / Dynamic Island strip on every page.
     * Page-specific topbar/content offsets stay at their base values — no double safe-area math.
     */
    body {
        padding-top: var(--fp-safe-area-top);
        box-sizing: border-box;
        min-height: 100dvh;
    }

    /* Immersive watch / fullscreen manage safe areas in their own layout */
    html.fp-stream-watch-page body,
    html.fp-watch-party-active body,
    html.fp-player-fs-lock body {
        padding-top: 0;
    }

    .filmparty-home,
    .catalog-page,
    .profile-modern-page,
    .search-results-page,
    .actor-profile-page,
    .director-profile-page,
    .movie-floating-page {
        min-height: calc(100dvh - var(--fp-safe-area-top));
    }

    html.fp-stream-watch-page .filmparty-home,
    html.fp-stream-watch-page .catalog-page,
    html.fp-stream-watch-page .profile-modern-page,
    html.fp-stream-watch-page .movie-floating-page {
        min-height: 100dvh;
    }

    /* Fixed shell topbars — below the reserved safe zone (not the in-flow watch bar) */
    html body .topbar-glass:not(.fp-watch-topbar) {
        top: var(--fp-safe-area-top) !important;
        inset-block-start: var(--fp-safe-area-top) !important;
    }

    /* Movie detail — back button only, below status bar */
    .movie-floating-page .movie-back-btn {
        top: calc(var(--fp-safe-area-top) + 22px) !important;
    }

    @media (max-width: 520px) {
        .movie-floating-page .movie-back-btn {
            top: calc(var(--fp-safe-area-top) + 18px) !important;
        }
    }

    /* Profile modals (edit, settings, lists…) — clear topbar header overlap on iOS */
    .glass-modal-card {
        margin-top: max(6vh, calc(var(--fp-safe-area-top) + 12px));
    }

    /*
     * Profile/user pages pin topbar at top:0 in step116 CSS — pull it below the status bar.
     * Keeps the notification portal anchor (topbar bottom) correct on iPhone PWA.
     */
    html body .profile-modern-page > .topbar-glass {
        top: var(--fp-safe-area-top) !important;
        inset-block-start: var(--fp-safe-area-top) !important;
    }
}

/* Side panels / modals must sit above fixed topbar (z-index 1200) */
.glass-modal {
    z-index: 1400;
}