/* Installed apps may draw behind system bars. Insets are supplied by the
   browser, not guessed from the device model. Zero insets preserve the layout. */
html[data-pwa-standalone] {
    --app-safe-top: env(safe-area-inset-top, 0px);
    --app-safe-right: env(safe-area-inset-right, 0px);
    --app-safe-bottom: env(safe-area-inset-bottom, 0px);
    --app-safe-left: env(safe-area-inset-left, 0px);
    scroll-padding-top: calc(160px + var(--app-safe-top));
}

/* Native theme-color hint only. Painting the HTML canvas with this color does
   not recolor Android's separate status bar and can create a second visible bar. */
html[data-pwa-android] {
    /* Confirmed on Android: native background stays at its startup color.
       Keep the hint fixed too, so theme changes do not change only the icons. */
    --app-system-bar-color: #0f1115;
}

html[data-pwa-standalone] body {
    box-sizing: border-box;
    padding: var(--app-safe-top) var(--app-safe-right) var(--app-safe-bottom) var(--app-safe-left);
}

/* Fill reported safe areas with the content background, so scrolled content
   cannot show through these gaps. This does not recolor native Android bars. */
html[data-pwa-standalone] body::before,
html[data-pwa-standalone] body::after {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    z-index: 10000;
    background: var(--bg);
    pointer-events: none;
}
html[data-pwa-standalone] body::before { top: 0; height: var(--app-safe-top); }
html[data-pwa-standalone] body::after { bottom: 0; height: var(--app-safe-bottom); }

html[data-pwa-standalone] .topBar { top: var(--app-safe-top); }
html[data-pwa-standalone] .filter { top: calc(80px + var(--app-safe-top)); }
html[data-pwa-standalone] .panelWrapper { top: calc(81px + var(--app-safe-top)); }
html[data-pwa-standalone] .panelWrapper .panelBox {
    max-height: calc(100dvh - 81px - var(--app-safe-top) - var(--app-safe-bottom) - 2rem);
    overflow-y: auto;
}
html[data-pwa-standalone] footer {
    bottom: var(--app-safe-bottom);
    left: var(--app-safe-left);
    width: calc(100% - var(--app-safe-left) - var(--app-safe-right));
}
html[data-pwa-standalone] .toast-container { bottom: calc(5rem + var(--app-safe-bottom)); }

/* Full-screen overlays have their own fixed positioning; body padding cannot
   protect their close buttons or scrollable contents. */
html[data-pwa-standalone] .popupBox,
html[data-pwa-standalone] #carousel-container,
html[data-pwa-standalone] .lightbox {
    top: var(--app-safe-top);
    left: var(--app-safe-left);
    width: calc(100% - var(--app-safe-left) - var(--app-safe-right));
    height: calc(100% - var(--app-safe-top) - var(--app-safe-bottom));
}
html[data-pwa-standalone] .cookieConsentBanner {
    inset: var(--app-safe-top) var(--app-safe-right) var(--app-safe-bottom) var(--app-safe-left);
}
html[data-pwa-standalone] .cookieConsentPanel {
    box-sizing: border-box;
    max-height: calc(100dvh - var(--app-safe-top) - var(--app-safe-bottom) - 2rem);
}
html[data-pwa-standalone] .contentCoverDialog {
    max-width: calc(100% - var(--app-safe-left) - var(--app-safe-right) - 2rem);
    max-height: calc(100dvh - var(--app-safe-top) - var(--app-safe-bottom) - 2rem);
    top: var(--app-safe-top);
    bottom: var(--app-safe-bottom);
}

@media only screen and (max-width: 1023px) {
    html[data-pwa-standalone] { scroll-padding-top: calc(165px + var(--app-safe-top)); }
    html[data-pwa-standalone] .smartTopbar {
        top: var(--app-safe-top);
        left: var(--app-safe-left);
        width: calc(100% - var(--app-safe-left) - var(--app-safe-right));
    }
    html[data-pwa-standalone] .filter,
    html[data-pwa-standalone] .panelWrapper { top: calc(90px + var(--app-safe-top)); }
    html[data-pwa-standalone] .panelWrapper .panelBox {
        max-height: calc(100dvh - var(--app-safe-top) - var(--app-safe-bottom) - 2rem);
    }
    html[data-pwa-standalone] .bg_btt {
        top: calc(50px + var(--app-safe-top));
        left: var(--app-safe-left);
        width: calc(100% - var(--app-safe-left) - var(--app-safe-right));
    }
    html[data-pwa-standalone] .btt { top: calc(53px + var(--app-safe-top)); }
}