/**
 * Sivar native-feel baseline (CONVENTIONS §25 "Native-feel baseline").
 *
 * Import once from the app's web/src/main entry, AFTER the app's token/index
 * stylesheet:
 *     import "./index.css";
 *     import "@sivar-ui/native-feel.css";
 *
 * Every rule is harmless in the browser, so it lives in web/ (never mobile/).
 * This is the layer that separates "an app" from "a webpage in a box".
 * Assumes the §19 tokens (--sivar-paper, --safe-* insets) are already declared.
 */

/* Scroll model — works on BOTH desktop AND the iOS/Android WebView.
   html = fixed 100% (gives the WebView a real height context; mobile scroll
   breaks without it). body = MIN-height 100% (a floor that STILL grows with
   content, so tall pages extend the document instead of overflowing under the
   fixed bars). #root = min-height 100dvh flex column (drives the sticky footer).
   NEVER put height:100% on body or #root — that caps the document and is the
   desktop-overflow bug. */
html { height: 100%; }
html, body, #root { margin: 0; }
body { min-height: 100%; }
#root { min-height: 100dvh; display: flex; flex-direction: column; }

/* Horizontal-overflow clamp — a stray over-wide element (an edge-bleeding chip/
   stories rail, a wide card) must NEVER make the PAGE scroll/rubber-band SIDEWAYS
   on a phone. `clip` (not `hidden`) kills horizontal page-scroll WITHOUT creating
   a scroll container that would break position:sticky; vertical scroll is untouched.
   `!important` + clamping #root/its children too: on the iOS WebView the clamp must
   hold across SPA navigation (return-to-page reintroduced the drift), so no re-mount,
   inline scroll-lock style, or wide re-rendered rail can undo it; max-width caps the
   layout so the visual viewport can never become pannable in the first place. */
html, body { overflow-x: clip !important; }
#root { overflow-x: clip; max-width: 100%; }
#root > * { max-width: 100%; }

/* Kill the grey iOS/Android tap-flash — render explicit :active feedback instead. */
* {
  -webkit-tap-highlight-color: transparent;
}

/* No page-level rubber-band; inner scrollers opt back in below. */
html,
body {
  overscroll-behavior: none;
}

/* Mobile safe area (CONVENTIONS §25). On a Capacitor edge-to-edge WebView the OS
   status bar (clock/wifi/battery) and the gesture bar OVERLAY the page, so inset
   the whole app: every top bar / bottom nav then clears them regardless of its own
   sizing. env() is ~52px top on device and 0 on the web, so this is inert in the
   browser. Requires viewport-fit=cover in index.html. The inset strip inherits the
   page background, so set body's bg to the app surface for a seamless status bar. */
body {
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Chrome (headers, tab bars, buttons) must NOT be selectable — a dead web tell.
   Content (chat bubbles, captions, body copy) stays selectable on its own. */
button,
.no-select,
[role="tab"],
[role="button"] {
  -webkit-user-select: none;
  user-select: none;
}

/* 16px minimum on form controls — anything smaller triggers iOS zoom-on-focus. */
input,
select,
textarea {
  font-size: 16px;
}

/* Momentum scroll + contained overscroll on any scrollable region.
   Add `class="native-scroll"` to scroll containers. */
.native-scroll {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Safe-area helpers — apply to the root shell / fixed top & bottom bars.
   Requires `viewport-fit=cover` in the index.html viewport meta. */
.safe-top {
  padding-top: var(--safe-top, env(safe-area-inset-top, 0px));
}
.safe-bottom {
  padding-bottom: var(--safe-bottom, env(safe-area-inset-bottom, 0px));
}

/* Generic press feedback for tappable surfaces. Add `class="pressable"`.
   Editorial mode scales; sticker mode can override to collapse its offset shadow. */
.pressable {
  transition: transform 0.08s ease;
}
.pressable:active {
  transform: scale(0.94);
}