/* css/base.css — v2 reset + root chrome layers (foundation-owned). B&W only here; no color.
   Positions every fixed layer per the v2 z-index map from design-tokens.css and ships the
   ONE reusable liquid-glass recipe (.glass) that every glass surface in the app reuses. */

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: var(--text-md);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--fg);
  color: var(--bg);
}

/* ---- Background grid (z:0) ---- */
/* Two 1px repeating-linear-gradients draw the line grid; a radial vignette
   darkens the edges so the avatar reads brighter in the center. */
#grid-bg {
  position: fixed;
  inset: 0;
  z-index: var(--z-grid);
  pointer-events: none;
  background-image:
    radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.5) 100%),
    repeating-linear-gradient(to right,  var(--grid-line) 0, var(--grid-line) 1px, transparent 1px, transparent var(--grid-size)),
    repeating-linear-gradient(to bottom, var(--grid-line) 0, var(--grid-line) 1px, transparent 1px, transparent var(--grid-size));
  background-position: center center;
}

/* ---- Theme scenery layer (z:1) — above the grid, behind the avatar. Holds the
   per-theme animated backdrop (particles on #scene-canvas + static CSS decor).
   Never eats pointer events; hidden entirely for mono/blueprint (clean default). ---- */
#theme-scene {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
#scene-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* No scenery on the two monochrome defaults. */
[data-theme="mono"] #theme-scene,
[data-theme="blueprint"] #theme-scene { display: none; }

/* ---- Avatar canvas (z:10) — fullscreen 2D canvas, never eats pointer events ---- */
#avatar-canvas {
  position: fixed;
  inset: 0;
  /* Explicit CSS size is REQUIRED: a canvas is a replaced element, so inset:0
     alone does NOT stretch it — it renders at its intrinsic (backing-store) size,
     i.e. dpr× the viewport → avatar drawn 1.5× too big and off toward
     bottom-right. 100%/100% pins the CSS box to the viewport; the dpr-scaled
     backing store then maps 1:1 onto it. */
  width: 100%;
  height: 100%;
  z-index: var(--z-avatar);
  pointer-events: none;
  display: block;
}

/* ---- Widget layer (z:20) — layout engine's territory ---- */
/* The layer itself is transparent to clicks; each widget re-enables pointer-events. */
#widget-layer {
  position: fixed;
  inset: 0;
  z-index: var(--z-widgets);
  pointer-events: none;
}
#widget-layer .widget { pointer-events: auto; }

/* ---- Chat bubble (z:25) — floating glass bubble beside the avatar ---- */
/* chat.js positions it purely via transform; foundation only fixes position + z. */
#chat-bubble {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-bubble);
}
#chat-bubble[hidden] { display: none; }

/* ---- Islands (z:30) — two levitating pills, bottom-center ---- */
/* Bar is click-through; each pill re-enables pointer-events. */
#islands {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--islands-bottom);
  display: flex;
  justify-content: center;
  gap: var(--islands-gap);
  z-index: var(--z-islands);
  pointer-events: none;
}
#islands > * { pointer-events: auto; }

/* ---- Trash corner (z:32) — pop-up disc, bottom-right, on throw only ---- */
#trash-corner {
  position: fixed;
  right: var(--trash-margin);
  bottom: var(--trash-margin);
  width: var(--trash-size);
  height: var(--trash-size);
  z-index: var(--z-trash);
  pointer-events: none;
}

/* ---- Settings layer (z:60) — centered glass card, voice-only entry ---- */
#settings-layer {
  position: fixed;
  inset: 0;
  z-index: var(--z-settings);
}
#settings-layer[hidden] { display: none; }

/* ---- Toast layer (z:70) — sits above the islands clearance ---- */
#toast-layer {
  position: fixed;
  bottom: var(--islands-clearance);
  left: 0;
  right: 0;
  z-index: var(--z-toast);
  pointer-events: none;
}

/* ---- Auth layer (z:100) — full-screen gate until login/session restore ---- */
#auth-layer {
  position: fixed;
  inset: 0;
  z-index: var(--z-auth);
  background: var(--bg);
}
#auth-layer[hidden] { display: none; }

/* ============================================================================
   Liquid-glass recipe — THE single glass surface. Islands, TRYBY panel, chat
   bubble, settings card, auth card and the trash disc all just add class="glass".
   ============================================================================ */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.15);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.15);
  position: relative;
  overflow: hidden;
}
.glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--glass-highlight);
  pointer-events: none;
}

/* ---- Scrollbars — thin, monochrome ---- */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--line-bright) transparent;
}
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--line-bright);
  border-radius: 3px;
}
*::-webkit-scrollbar-thumb:hover { background: var(--fg-faint); }

/* ---- A11y helpers ---- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 1px solid var(--fg-dim);
  outline-offset: 2px;
}