/*
 * PWA-only: iOS standalone draws under the status bar / Dynamic Island.
 * Android Chrome already paints a system status bar above the page —
 * extra env(safe-area-inset-top) double-pads the header down.
 * Regular Safari already has its own chrome — never key off
 * display-mode here (it can match in-browser on iPhone).
 */
html.is-pwa {
    --pwa-safe-top: 0px;
    --pwa-nav-shift: 0px;
    background-color: #121421;
}

html.is-pwa.is-pwa-ios {
    --pwa-safe-top: env(safe-area-inset-top, 0px);
}

/*
 * Flash toasts (promo, rakeback, form errors) are position:fixed; top:0.
 * The header already clears the island via --pwa-safe-top; keep the
 * alerts on the same inset so they are not drawn under the clock.
 * Android PWA keeps --pwa-safe-top at 0px, so this is a no-op there.
 */
html.is-pwa .notifications-module-scss-module__nhjefa__container {
    top: var(--pwa-safe-top, 0px);
}

/*
 * iOS PWA: 100dvh is shorter than the screen, so the layout column
 * must use the measured visual height. The bottom nav is position:fixed
 * on body — do not change Side-main to height:auto (the size container
 * collapses and the page goes black).
 */
html.is-pwa,
html.is-pwa body {
    height: var(--app-height, 100%);
    min-height: var(--app-height, 100%);
    min-height: 100dvh;
    min-height: -webkit-fill-available;
}

html.is-pwa .Side-module-scss-module__k4S51q__main {
    height: var(--app-height, 100%);
    min-height: var(--app-height, 100%);
    min-height: -webkit-fill-available;
}

html.is-pwa .Side-module-scss-module__k4S51q__content {
    min-height: 100%;
}

@media (max-width: 799px) {
    /*
     * In-browser iPhone: pin the floating header to the visual top.
     * Safari chrome already accounts for the status bar — do not add
     * env(safe-area-inset-top) here (that leftover 59px gap on SE).
     */
    html:not(.is-pwa) .HomeHeader-module-scss-module__oQBdCa__mainOver,
    html:not(.is-pwa) .HomeHeader-module-scss-module__oQBdCa__mainOver2 {
        top: 0 !important;
        padding-top: 10px !important;
    }

    /*
     * Flush to the physical bottom. Do not add the home-indicator
     * inset as padding — that left an empty strip under the labels.
     */
    html.is-pwa .MobileMenu-module-scss-module__AzYADW__main {
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        transform: none !important;
        height: 64px !important;
        min-height: 64px !important;
        padding-bottom: 8px !important;
        box-sizing: content-box;
        overflow: visible;
        box-shadow: 0 80px 0 0 #121421;
    }

    html.is-pwa .HomeHeader-module-scss-module__oQBdCa__mainOver,
    html.is-pwa .HomeHeader-module-scss-module__oQBdCa__mainOver2 {
        padding-top: calc(10px + var(--pwa-safe-top, 0px)) !important;
    }

    /*
     * Slide-in sidebar is position:fixed; top:0. Keep the dark sheet
     * under the island so the clock stays readable, but pad the rakeback
     * card the same way the site header does. Android keeps
     * --pwa-safe-top at 0px, so this is a no-op there.
     */
    html.is-pwa .MobileMenu-module-scss-module__AzYADW__menu {
        padding-top: calc(10px * var(--zoom, 1) + var(--pwa-safe-top, 0px));
        height: var(--app-height, 100dvh);
        box-sizing: border-box;
    }

    html.is-pwa .HomeHeader-module-scss-module__oQBdCa__mainFiller {
        height: calc(10px + 60px * var(--zoom, 1) + var(--pwa-safe-top, 0px));
    }

    html.is-pwa.is-pwa-android .HomeHeader-module-scss-module__oQBdCa__mainOver,
    html.is-pwa.is-pwa-android .HomeHeader-module-scss-module__oQBdCa__mainOver2 {
        padding-top: 10px !important;
    }

    html.is-pwa.is-pwa-android .HomeHeader-module-scss-module__oQBdCa__mainFiller {
        height: calc(10px + 60px * var(--zoom, 1));
    }

    /*
     * Support chat is a full-screen overlay. Use the same top inset as
     * the site header and the same bottom shift as the tab bar so Alice
     * and the composer clear the island / home indicator.
     */
    html.is-pwa .chat-module-scss-module__Sli-kG__overChat {
        position: fixed !important;
        inset: 0 !important;
        width: 100% !important;
        height: var(--app-height, 100%) !important;
        right: auto !important;
        bottom: auto !important;
    }

    html.is-pwa .chat-module-scss-module__Sli-kG__top {
        height: calc(222px * var(--zoom, 1) + var(--pwa-safe-top, 0px));
    }

    html.is-pwa .chat-module-scss-module__Sli-kG__topInNo {
        height: calc(222px * var(--zoom, 1) + var(--pwa-safe-top, 0px));
        min-height: calc(222px * var(--zoom, 1) + var(--pwa-safe-top, 0px));
        padding-top: calc(20px * var(--zoom, 1) + var(--pwa-safe-top, 0px));
        box-sizing: border-box;
    }

    html.is-pwa .chat-module-scss-module__Sli-kG__cross1 {
        top: calc(10px * var(--zoom, 1) + var(--pwa-safe-top, 0px));
    }

    html.is-pwa .chat-module-scss-module__Sli-kG__showSupports {
        height: calc(64px * var(--zoom, 1) + var(--pwa-safe-top, 0px));
    }

    html.is-pwa .chat-module-scss-module__Sli-kG__topInYes {
        height: calc(64px * var(--zoom, 1) + var(--pwa-safe-top, 0px));
        padding-top: var(--pwa-safe-top, 0px);
        box-sizing: border-box;
    }

    html.is-pwa .chat-module-scss-module__Sli-kG__bottom {
        height: calc(84px * var(--zoom, 1) + var(--pwa-nav-shift, 0px));
        padding-bottom: var(--pwa-nav-shift, 0px);
        box-sizing: border-box;
    }

    html.is-pwa .chat-module-scss-module__Sli-kG__messages {
        height: calc(100% - (84px * var(--zoom, 1)) - (64px * var(--zoom, 1)) - var(--pwa-safe-top, 0px) - var(--pwa-nav-shift, 0px));
    }

    html.is-pwa :not(.chat-module-scss-module__Sli-kG__showSupports) + .chat-module-scss-module__Sli-kG__messages {
        height: calc(100% - (84px * var(--zoom, 1)) - (222px * var(--zoom, 1)) - var(--pwa-safe-top, 0px) - var(--pwa-nav-shift, 0px));
    }
}