import { globalStyle } from '@vanilla-extract/css';
import { color } from 'folds';

// Android edge-to-edge top inset exposed as a plain CSS var so the
// top-anchored UIs that need it (PageNav inner column,
// `RoomViewProfilePanel.headerViewportInner` / `.panelContent`,
// `BotShell.Shell`, `AuthLayout`, `ThreadDrawerMobile`) can pad
// themselves down by exactly the status-bar height without
// re-evaluating `env(...)` at each call site. `#root` no longer
// reserves this inset itself (`src/index.css`); the chat surface /
// chat-list shell extend their own bg through the status-bar zone and
// push visible content below the system icons via this var. `Modal500`
// resets the var to `0px` inside the dialog subtree so internal
// headers don't double-pad. On web `env()` resolves to `0px`, so the
// var is a no-op there.
//
// Bottom inset is owned by `MainActivity.java::onCreate`'s
// `OnApplyWindowInsetsListener` — it reads
// `WindowInsetsCompat.Type.tappableElement()` (= 0 in gesture mode,
// = nav-bar height in 3-button mode) and applies it as bottom
// padding on the activity's content root (NOT on the WebView; that
// would replace WebView's internal listener and break
// `env(safe-area-inset-top)`). The web side stays unaware: in
// gesture mode the WebView extends edge-to-edge, in 3-button mode
// it is sized above the nav bar and the activity windowBackground
// strip below paints the system icons over a tone-matched bg.
// Don't add `padding-bottom: env(safe-area-inset-bottom)` to any
// component — Chromium maps that env() to `systemBars()` which is
// non-zero in gesture mode too, and it stacks on top of the native
// padding, double-lifting the UI.
globalStyle(':root', {
  vars: {
    '--vojo-safe-top': 'env(safe-area-inset-top, 0px)',
  },
});

// Vojo-owned safe-area background. Used by `body { background-color: ... }`
// in `src/index.css` to paint the body region behind any `env()` cut-out
// zone (display notch, left/right inset) — defended in depth even though
// `#root` covers most of the layout edge-to-edge now.
//
// Bound to the folds `Background.Container` token (Dawn `#0d0e11` in
// dark, Vojo `#f2f2f7` in light — reshades automatically on theme
// switch). The var lives on `body` rather than `:root` because the
// theme class (`.dark-theme` / `.light-theme`) is attached to
// `document.body` —
// `var(--folds-token)` only resolves at scopes the theme class
// dominates. A `:root` host would freeze the var at the folds token's
// initial value (`transparent` in dark / `#fff` in light) and the
// safe-area would flash unpainted before `ThemeManager` mounts. Hosting
// on body keeps the var resolution in lockstep with whatever theme
// `ThemeManager` has applied; the literal `#0d0e11` fallback in
// `index.css`'s `body { background-color }` declaration covers the
// cold-start window before this stylesheet parses.
globalStyle('body', {
  vars: {
    '--vojo-safe-area-bg': color.Background.Container,
  },
});
