/* ============================================================================
   Eternal Evals — Native-feel layer
   ----------------------------------------------------------------------------
   Makes the web surfaces read as a native app on phones: safe-area awareness,
   no tap-flash, contained overscroll, true viewport height, momentum scroll,
   and a small set of opt-in native primitives (bottom sheet, swipe deck,
   tab bar, install chip). Built entirely on tokens.css.

   Loaded after tokens.css + style.css so it can layer on top. Globals here are
   deliberately conservative (improvements that can't break layout); anything
   structural is an OPT-IN class.
   ========================================================================== */

:root {
  /* Safe-area insets (notch / home indicator). 0 on devices without them. */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);

  /* Address-bar-aware viewport height. dvh where supported, fallback below. */
  --app-height: 100vh;
  --app-height: 100dvh;

  /* Native touch target floor (Apple HIG / Material both ~44–48px). */
  --tap-min: 44px;
}

/* ---- Global native resets (safe, non-structural) ------------------------- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;   /* kill the grey/blue tap flash */
}

body {
  /* Stop scroll-chaining / browser pull-to-refresh leaking through. */
  overscroll-behavior-y: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Snappy taps: remove the 300ms delay on interactive chrome (NOT on the
   3D canvas or scrollers, which need pinch/pan gestures). */
button, a, [role="button"], .tab, .btn, summary, label {
  touch-action: manipulation;
}

/* Smooth momentum scrolling for any scroll region. */
.scroll-y, .chat-body, .chat-messages, #view-tabs, .swipe-deck {
  -webkit-overflow-scrolling: touch;
}

/* Accessible focus — only on keyboard, never a mouse/touch ring. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* App chrome shouldn't be text-selectable like a document; content stays
   selectable. Opt in by adding .ui-chrome to nav/toolbars/tab bars. */
.ui-chrome { -webkit-user-select: none; user-select: none; }

/* ---- Utilities ----------------------------------------------------------- */
.safe-t  { padding-top:    var(--safe-top); }
.safe-b  { padding-bottom: var(--safe-bottom); }
.safe-x  { padding-left:   var(--safe-left); padding-right: var(--safe-right); }
.app-h   { height: var(--app-height); }
.min-app-h { min-height: var(--app-height); }
.no-select { -webkit-user-select: none; user-select: none; }

/* ============================================================================
   NATIVE PRIMITIVE · bottom sheet
   A draggable panel that snaps. Pair with JS that toggles [data-sheet] states
   (peek / half / full) and translates on drag. The chat dock's peek/snap
   language is the same idea — this generalises it.
   ========================================================================== */
.sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-drawer);
  background: var(--surface-panel);
  backdrop-filter: blur(var(--blur-lg));
  -webkit-backdrop-filter: blur(var(--blur-lg));
  border-top: 1px solid var(--border-soft);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: var(--shadow-lg);
  padding-bottom: var(--safe-bottom);
  transform: translateY(0);
  transition: transform var(--dur-slow) var(--ease-out);
  will-change: transform;
  touch-action: none;        /* JS owns the drag gesture */
}
.sheet[data-state="closed"] { transform: translateY(100%); }
.sheet-grip {
  display: block;
  width: 36px; height: 4px;
  margin: var(--space-2) auto var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--text-muted);
  opacity: 0.5;
}
.sheet-scrim {
  position: fixed; inset: 0;
  z-index: var(--z-overlay);
  background: rgba(0,0,0,0.5);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur) var(--ease-out);
}
.sheet-scrim[data-open="1"] { opacity: 1; pointer-events: auto; }

/* ============================================================================
   NATIVE PRIMITIVE · swipe deck
   Horizontal, snap-per-page panels — swipe left/right to move between views
   like a native pager. Each child is one full-width page.
   ========================================================================== */
.swipe-deck {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.swipe-deck::-webkit-scrollbar { display: none; }
.swipe-deck > * {
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
/* Page-dots indicator for a swipe deck. */
.deck-dots { display: flex; gap: var(--space-2); justify-content: center; padding: var(--space-3) 0; }
.deck-dot {
  width: 6px; height: 6px; border-radius: var(--radius-circle);
  background: var(--text-muted); opacity: 0.4;
  transition: opacity var(--dur), transform var(--dur);
}
.deck-dot[data-active="1"] { opacity: 1; transform: scale(1.4); background: var(--accent-gold); }

/* ============================================================================
   NATIVE PRIMITIVE · bottom tab bar
   Fixed, safe-area-aware, blurred — the iOS/Android home bar. (The workspace
   #view-tabs can adopt .tabbar; kept generic here.)
   ========================================================================== */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: var(--z-sticky);
  display: flex; align-items: stretch;
  background: rgba(2, 2, 5, 0.92);
  backdrop-filter: blur(var(--blur-lg));
  -webkit-backdrop-filter: blur(var(--blur-lg));
  border-top: 1px solid var(--border-soft);
  padding-bottom: var(--safe-bottom);
}
.tabbar-item {
  flex: 1; min-height: var(--tap-min);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
  background: none; border: none; cursor: pointer;
  transition: color var(--dur) var(--ease-out);
}
.tabbar-item[aria-selected="true"] { color: var(--accent-gold); }

/* ============================================================================
   NATIVE PRIMITIVE · Add-to-Home-Screen chip
   ========================================================================== */
.a2hs {
  position: fixed;
  left: var(--space-4); right: var(--space-4);
  bottom: calc(var(--safe-bottom) + var(--space-4));
  z-index: var(--z-toast);
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-panel);
  backdrop-filter: blur(var(--blur-lg));
  -webkit-backdrop-filter: blur(var(--blur-lg));
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  transform: translateY(calc(100% + var(--space-6)));
  transition: transform var(--dur-slow) var(--ease-spring);
}
.a2hs[data-show="1"] { transform: translateY(0); }
.a2hs-text { flex: 1; font-size: var(--text-sm); color: var(--text-primary); line-height: var(--leading-snug); }
.a2hs-text small { display: block; color: var(--text-muted); font-size: var(--text-xs); }
.a2hs-cta {
  font-family: var(--font-mono); font-size: var(--text-xs);
  padding: var(--space-2) var(--space-3);
  background: var(--accent-gold); color: #2a1a00;
  border: none; border-radius: var(--radius-sm); font-weight: var(--weight-semibold);
  cursor: pointer; white-space: nowrap;
}
.a2hs-close { background: none; border: none; color: var(--text-muted); font-size: var(--text-lg); cursor: pointer; line-height: 1; }

/* ---- Respect reduced motion globally ------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sheet, .a2hs, .deck-dot, .tabbar-item { transition: none; }
}