/**
 * iOS PWA / mobile Safari shell — loaded LAST in production index.html so it
 * overrides Expo's #expo-reset.
 *
 * Ownership split (do not reunify):
 * - Document (html): permanent felt wallpaper + tint — fills the browser paint surface
 * - Environment layer (#ps-felt-layer): enhancement only (lighting / vignette / crest / decor)
 * - Application shell (#root + portals): --app-height / --app-shell-top for keyboard/chrome
 *
 * Chin-gap root cause (Reddit r/PWA "fighting the chin gap"):
 *   standalone + viewport-fit=cover + black-translucent + height:100%
 *   → body is offset behind the status bar WITHOUT expanding height → bottom gap.
 * Confirmed fix: height:100vh on html/body/#root. Keep black-translucent.
 *
 * Dynamic Island / top:
 * The document element itself owns the wallpaper under the status region.
 * Do not add a second full-display html::before plane — separate geometry
 * creates a seam / tint band at the safe-area transition.
 *
 * What must be underneath: html’s felt stack (background-color + texture).
 * - html background-color MUST stay var(--ps-felt-tint) forever. Transparent
 *   here → iOS falls back to a dark frosted band (v1.1.17 regression).
 * - body MUST stay transparent so that felt is visible under the icons. This
 *   is a deliberate choice: iOS 26+ dropped theme-color support and paints
 *   the status bar from the nearest opaque `position: fixed` element instead
 *   (falling back to html, with a scroll-triggered gradient bug on iOS
 *   26.2.1 when no opaque fixed element exists). Painting body opaque would
 *   "fix" that gradient bug but is intentionally NOT done here — keep body
 *   transparent per product preference; accept the iOS 26.2.1 fallback
 *   behavior instead of introducing a second opaque paint plate.
 * - Strip theme-color always — no separate toolbar/status paint plate. iOS 26
 *   dropped support for <meta name="theme-color"> (and manifest theme_color)
 *   entirely, so it can no longer be used to paint the status bar anyway.
 *
 * Chin: paint shell at calc(100vh + 2px) and seal the bottom edge so a 1px UA
 * white line cannot show. Safe-area pads interactive chrome only.
 */
:root {
  --ps-felt-tint: #0f5132;
  --ps-felt-tint-overlay: transparent;
  --ps-felt-texture: none;
  --ps-shell-paint-h: calc(100vh + 2px);
  --app-shell-h: calc(100vh + 2px);
  --app-height: calc(100vh + 2px);
  --app-shell-top: 0px;
  color-scheme: dark;
}

/* Document owns wallpaper permanently — never cleared after env ready.
 *
 * Height uses 100vh + 2px to cover subpixel chin gaps. background-color MUST
 * stay a real felt tint — that keeps black-translucent from falling back to a
 * dark band.
 */
html {
  position: relative !important;
  width: 100% !important;
  height: var(--ps-shell-paint-h) !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  overscroll-behavior: none !important;
  touch-action: manipulation !important;
  max-height: none !important;
  min-height: var(--ps-shell-paint-h) !important;
  background-color: var(--ps-felt-tint) !important;
  background-image:
    linear-gradient(
      var(--ps-felt-tint-overlay),
      var(--ps-felt-tint-overlay)
    ),
    var(--ps-felt-texture) !important;
  background-size: 100% 100%, cover !important;
  background-position: center center, center center !important;
  background-repeat: no-repeat, no-repeat !important;
  background-attachment: scroll, scroll !important;
}

/* No second wallpaper plane — html alone owns paint (avoids safe-area seams). */
html::before {
  content: none !important;
  display: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  width: 100% !important;
  height: var(--ps-shell-paint-h) !important;
  min-height: var(--ps-shell-paint-h) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
  touch-action: manipulation !important;
  max-height: none !important;
  /* Transparent so html felt shows under status icons (no solid band).
     Deliberate: keeps body transparent even though iOS 26+ prefers an
     opaque fixed element as the status-bar color anchor (see file header
     for the iOS 26 / 26.2.1 tradeoff this accepts). */
  background-color: transparent !important;
  background-image: none !important;
}

body::before,
body::after {
  content: none !important;
  display: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/**
 * Environment Layer — enhancement planes only (lighting / vignette / crest / decor).
 * Does not own wallpaper. Fixed to the viewport; independent of shell geometry.
 */
#ps-felt-layer,
.ps-environment-layer {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  width: 100% !important;
  height: var(--ps-shell-paint-h) !important;
  max-height: none !important;
  min-height: var(--ps-shell-paint-h) !important;
  z-index: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  background: transparent !important;
}

#ps-felt-layer .ps-env-plane,
#ps-felt-layer .ps-felt-layer-texture,
#ps-felt-layer .ps-felt-layer-tint,
.ps-environment-layer .ps-env-plane {
  position: absolute;
  inset: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

/* Legacy wallpaper planes — document owns wallpaper; keep nodes inert if present. */
#ps-felt-layer .ps-felt-layer-texture,
#ps-felt-layer .ps-felt-layer-tint {
  display: none !important;
}

/* Reserved stacking planes for future ambience (unused until content ships). */
#ps-felt-layer .ps-env-lighting,
#ps-felt-layer .ps-env-vignette,
#ps-felt-layer .ps-env-crest,
#ps-felt-layer .ps-env-decor {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#root {
  position: fixed !important;
  top: var(--app-shell-top, 0px) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  /* Oversized with --ps-shell-paint-h so a 1px chin cannot flash white. */
  height: var(--app-height, var(--ps-shell-paint-h)) !important;
  max-height: none !important;
  min-height: 0 !important;
  background-color: transparent !important;
  z-index: 1 !important;
}

#ps-body-portal {
  position: fixed !important;
  top: var(--app-shell-top, 0px) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  width: 100% !important;
  height: var(--app-height, var(--ps-shell-paint-h)) !important;
  max-height: none !important;
  min-height: 0 !important;
  pointer-events: none !important;
  z-index: 50 !important;
  overflow: hidden !important;
}

#ps-body-portal > * {
  pointer-events: auto;
}

#ps-overlay-portal {
  position: fixed !important;
  top: var(--app-shell-top, 0px) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  width: 100% !important;
  height: var(--app-height, var(--ps-shell-paint-h)) !important;
  max-height: none !important;
  min-height: 0 !important;
  pointer-events: none !important;
  z-index: 300 !important;
  overflow: hidden !important;
}

#ps-overlay-portal > * {
  pointer-events: auto;
}

/* Desktop / non-mobile RN wallpaper helper — also viewport-owned, not shell-sized. */
.ps-felt-fixed {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  width: 100% !important;
  height: var(--ps-shell-paint-h) !important;
  max-height: none !important;
  min-height: var(--ps-shell-paint-h) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* In-flow content horizontal safe area (SwiftDev .safe-area — not on html/body). */
.ps-safe-area-h {
  margin-left: constant(safe-area-inset-left) !important;
  margin-left: env(safe-area-inset-left, 0px) !important;
  margin-right: constant(safe-area-inset-right) !important;
  margin-right: env(safe-area-inset-right, 0px) !important;
}

/* Bottom bar ≈ SwiftDev footer: full-bleed over felt, controls lifted by env(). */
.ps-bottom-bar-shell {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  bottom: 0 !important;
  box-sizing: border-box !important;
  background: transparent !important;
  overflow: visible !important;
  padding-bottom: constant(safe-area-inset-bottom) !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}

/* Themed scrollbars — accent via --scroll-thumb / --scroll-track on the element */
.ps-themed-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb, #5b9fd4) var(--scroll-track, rgba(255, 255, 255, 0.08));
}
.ps-themed-scrollbar::-webkit-scrollbar {
  width: 8px;
}
.ps-themed-scrollbar::-webkit-scrollbar-track {
  background: var(--scroll-track, rgba(255, 255, 255, 0.08));
  border-radius: 999px;
  margin: 6px 0;
}
.ps-themed-scrollbar::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb, #5b9fd4);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.ps-themed-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--scroll-thumb-hover, var(--scroll-thumb, #5b9fd4));
}

/* Shimmer text — accent gradient sweep; colors via --shimmer-* on the element */
.ps-shimmer-text {
  display: inline-block;
  background-repeat: no-repeat;
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  background-image: linear-gradient(
    90deg,
    var(--shimmer-base) 0%,
    var(--shimmer-base) 38%,
    var(--shimmer-soft) 44%,
    var(--shimmer-mid) 48%,
    var(--shimmer-hot) 50%,
    var(--shimmer-mid) 52%,
    var(--shimmer-soft) 56%,
    var(--shimmer-base) 62%,
    var(--shimmer-base) 100%
  );
  animation-name: ps-shimmer-text-sweep;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
@keyframes ps-shimmer-text-sweep {
  0% {
    background-position: 130% 50%;
  }
  12% {
    background-position: -30% 50%;
  }
  100% {
    background-position: -30% 50%;
  }
}