/**
 * Installed PWA shell — standalone / fullscreen / minimal-ui.
 * Pairs with viewport-fit=cover. --ttb-safe-top is env() plus a JS fallback
 * when the OS reports 0 (common on Android overlay / older iOS).
 * Selectors are extra-specific so they win over page CSS loaded earlier or later.
 */

:root {
  --ttb-safe-top-env: env(safe-area-inset-top, 0px);
  --ttb-safe-top-fallback: 0px;
  --ttb-safe-bottom-env: env(safe-area-inset-bottom, 0px);
  --ttb-safe-left-env: env(safe-area-inset-left, 0px);
  --ttb-safe-right-env: env(safe-area-inset-right, 0px);
  --ttb-safe-top: max(var(--ttb-safe-top-env), var(--ttb-safe-top-fallback));
  --ttb-safe-bottom: var(--ttb-safe-bottom-env);
  --ttb-safe-left: var(--ttb-safe-left-env);
  --ttb-safe-right: var(--ttb-safe-right-env);
}

@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
  html {
    height: 100%;
    height: 100dvh;
    overscroll-behavior: none;
  }

  html body {
    overscroll-behavior: none;
  }

  /* Home + Studio: lock the document; inner .home-main scrolls */
  html body.home-body {
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
  }

  html body.home-body .home-app,
  html body.home-body .home-main {
    height: 100%;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: none;
  }
}

/* iOS navigator.standalone sometimes misses display-mode — same lock via class. */
html.ttb-standalone {
  height: 100%;
  height: 100dvh;
  overscroll-behavior: none;
}

html.ttb-standalone body {
  overscroll-behavior: none;
}

html.ttb-standalone body.home-body {
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}

html.ttb-standalone body.home-body .home-app,
html.ttb-standalone body.home-body .home-main {
  height: 100%;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: none;
}

/* Top chrome: pad on phones even if display-mode is not reported. */
@media (max-width: 900px) {
  html body.home-body .home-app {
    --home-topbar-height: calc(3.5rem + var(--ttb-safe-top));
  }

  html body.home-body .home-topbar {
    padding-top: calc(0.55rem + var(--ttb-safe-top));
    padding-left: calc(0.85rem + var(--ttb-safe-left));
    padding-right: calc(0.85rem + var(--ttb-safe-right));
  }

  html:has(header.sb-header) {
    --sb-header-height: calc(3.25rem + var(--ttb-safe-top));
  }

  html body header.sb-header {
    padding-top: calc(0.45rem + var(--ttb-safe-top));
    padding-left: calc(0.85rem + var(--ttb-safe-left));
    padding-right: calc(0.85rem + var(--ttb-safe-right));
    max-height: none;
    min-height: var(--sb-header-height);
  }

  html body.sc-page .sc-topbar,
  html body.admin-page .admin-topbar {
    padding-top: calc(0.65rem + var(--ttb-safe-top));
    padding-left: calc(0.75rem + var(--ttb-safe-left));
    padding-right: calc(0.75rem + var(--ttb-safe-right));
  }

  html body.ov-body .ov-app {
    height: 100dvh;
    max-height: 100dvh;
  }

  html body.ov-body .ov-topbar {
    padding-top: calc(0.7rem + var(--ttb-safe-top));
    padding-left: calc(1.25rem + var(--ttb-safe-left));
    padding-right: calc(1.25rem + var(--ttb-safe-right));
  }

  html body:not(.home-body):not(.sc-page):not(.ov-body):not(.admin-page):not(:has(header.sb-header)) {
    padding-top: max(1rem, var(--ttb-safe-top));
    padding-bottom: max(1rem, var(--ttb-safe-bottom));
    padding-left: max(1rem, var(--ttb-safe-left));
    padding-right: max(1rem, var(--ttb-safe-right));
  }
}

/* Browser-tab mode: notch/home-indicator padding for fullscreen sheets */
@media (max-width: 900px) {
  html body.remote-body,
  html body.remote-pair-page,
  html body.sc-page,
  html body.admin-page {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  html body:has(header.sb-header) {
    --sb-safe-bottom: env(safe-area-inset-bottom, 0px);
  }
}