/* ===========================================================
   COOPEN · Base Styles
   Page chrome, layout regions, and global elements.
=========================================================== */
* { box-sizing: border-box; }
html, body {
  height: 100%;
  margin: 0;
  background: var(--c-bg);
  color: var(--c-white);
  font-family: var(--ff-mono);
  -webkit-font-smoothing: antialiased;
}
body { overflow: hidden; }
body[data-page="admin"], body[data-page="docs"] { overflow: auto; }

a { color: var(--c-cyan-soft); text-decoration: none; }
a:hover { color: var(--c-cyan); text-shadow: var(--glow-cyan-soft); }

/* ----- HUD frame ----- */
.hud {
  position: relative;
  width: 100vw;
  height: 100vh;
}
.hud .bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(11, 31, 74, .6) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11, 31, 74, .6) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: .32;
  pointer-events: none;
}
.hud .bg-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 45%, transparent 38%, rgba(3, 7, 18, .65) 72%, var(--c-bg) 92%);
  pointer-events: none;
}

/* ----- HUD region anchors -----
   Each region is bounded vertically (top + bottom) so it never bleeds into
   the next one. Horizontal widths use min() with a hard cap. The HUD assumes
   ≥1100px width — narrower viewports switch to a stacked layout below. */
.region-top    { position: absolute; top: 2.4vh; left: 2.4vw; right: 2.4vw; z-index: 30; display: flex; justify-content: space-between; align-items: flex-start; gap: 2vw; pointer-events: none; }
.region-top > * { pointer-events: auto; }
.region-top .top-left  { max-width: 46vw; min-width: 0; }
.region-top .top-right { max-width: 32vw; min-width: 0; text-align: right; }

.region-left   { position: absolute; left: 2.4vw; top: 22vh; bottom: 14vh; width: min(22vw, 420px); z-index: 20; overflow: hidden; }
.region-right  { position: absolute; right: 2.4vw; top: 24vh; bottom: 14vh; width: min(20vw, 370px); z-index: 20; display: flex; flex-direction: column; align-items: flex-end; gap: 1.5vh; overflow: hidden; }
.region-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(44vw, 70vh); aspect-ratio: 1; z-index: 5; pointer-events: none; }
.region-center > * { pointer-events: auto; }

.region-bottom-left   { position: absolute; left: 2.4vw; bottom: 3.1vh; display: flex; gap: 1vw; align-items: center; z-index: 25; max-width: 22vw; }
.region-bottom-center { position: absolute; left: 50%; bottom: 4.2vh; transform: translateX(-50%); width: min(34vw, 520px); z-index: 25; }
.region-bottom-right  { position: absolute; right: 2.4vw; bottom: 3.1vh; z-index: 25; display: flex; gap: .6vw; align-items: center; flex-wrap: wrap; justify-content: flex-end; max-width: 20vw; }

/* ----- Bracket framing reused everywhere ----- */
.bracket { position: relative; }
.bracket > .corner { position: absolute; width: 14px; height: 14px; pointer-events: none; filter: drop-shadow(0 0 5px rgba(0, 229, 255, .6)); }
.bracket > .corner.tl { top: -5px; left: -5px;  border-top: 1.5px solid var(--c-cyan); border-left: 1.5px solid var(--c-cyan); }
.bracket > .corner.tr { top: -5px; right: -5px; border-top: 1.5px solid var(--c-cyan); border-right: 1.5px solid var(--c-cyan); }
.bracket > .corner.bl { bottom: -5px; left: -5px; border-bottom: 1.5px solid var(--c-cyan); border-left: 1.5px solid var(--c-cyan); }
.bracket > .corner.br { bottom: -5px; right: -5px; border-bottom: 1.5px solid var(--c-cyan); border-right: 1.5px solid var(--c-cyan); }

/* ----- Top-level nav (admin / docs pages) ----- */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.2vh 2.4vw;
  background: rgba(3, 7, 18, .82);
  border-bottom: var(--b-cyan-soft);
  backdrop-filter: blur(4px);
}
.nav .brand { color: var(--c-cyan-soft); letter-spacing: var(--ls-wide); font-size: var(--fs-md); text-shadow: var(--glow-cyan-soft); }
.nav .links { display: flex; gap: 1.2vw; }
.nav .links a { font-size: var(--fs-sm); letter-spacing: var(--ls-norm); padding: .4vh .8vw; border: 1px solid transparent; border-radius: var(--radius-md); }
.nav .links a[aria-current="page"] { border-color: var(--c-cyan); color: var(--c-cyan); box-shadow: inset 0 0 12px rgba(0,229,255,.18); }

/* ----- Document layout (admin/docs) ----- */
.page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 3vh 3vw 8vh;
}
.page h1, .docs-content h1 { color: var(--c-cyan-soft); font-size: clamp(20px, 2vw, 30px); letter-spacing: var(--ls-wide); text-shadow: var(--glow-cyan-soft); margin: 0 0 .6em; }
.page h2, .docs-content h2 { color: var(--c-cyan); font-size: clamp(15px, 1.3vw, 19px); letter-spacing: var(--ls-wide); margin-top: 2.4em; }
.page h3, .docs-content h3 { color: var(--c-cyan-soft); font-size: var(--fs-lg); letter-spacing: var(--ls-norm); margin-top: 1.6em; }
.page p, .page li, .docs-content p, .docs-content li { font-size: var(--fs-md); line-height: 1.6; color: var(--c-gray-2); }
.page code, .page pre, .docs-content code, .docs-content pre {
  font-family: var(--ff-mono);
  background: rgba(11, 31, 74, .35);
  border: var(--b-cyan-soft);
  padding: 2px 6px;
  border-radius: var(--radius-md);
  color: var(--c-cyan-soft);
  font-size: .92em;
}
.page pre, .docs-content pre { padding: 12px 14px; overflow: auto; }
.docs-content strong { color: var(--c-white); font-weight: 400; text-shadow: 0 0 8px rgba(255, 255, 255, .15); }
.docs-content em { color: var(--c-cyan-soft); font-style: normal; opacity: .9; }

/* ----- /docs page shell — sticky sidebar + content ----- */
.docs-shell {
  display: grid;
  grid-template-columns: minmax(180px, 220px) 1fr;
  gap: 3vw;
  max-width: 1400px;
  margin: 0 auto;
  padding: 3vh 3vw 8vh;
  align-items: start;
}
.docs-toc {
  position: sticky;
  top: 6.5vh;
  font-size: var(--fs-sm);
  max-height: calc(100vh - 8vh);
  overflow-y: auto;
  padding-right: 6px;
}
.docs-toc::-webkit-scrollbar { width: 4px; }
.docs-toc::-webkit-scrollbar-thumb { background: rgba(0, 229, 255, .3); border-radius: 2px; }
.docs-toc h4 {
  color: var(--c-cyan);
  letter-spacing: var(--ls-wide);
  margin: 1.2em 0 .4em;
  font-size: var(--fs-md);
  text-shadow: var(--glow-cyan-soft);
  text-transform: uppercase;
}
.docs-toc h4:first-child { margin-top: 0; }
.docs-toc h4 a { color: inherit; text-decoration: none; }
.docs-toc ul { list-style: none; padding: 0; margin: 0 0 .6em; }
.docs-toc li { margin: 2px 0; }
.docs-toc ul a {
  display: block;
  padding: 4px 10px;
  border-left: 2px solid transparent;
  color: var(--c-gray-2);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-norm);
  transition: all .15s ease;
  text-decoration: none;
}
.docs-toc ul a:hover {
  background: rgba(0, 229, 255, .06);
  color: var(--c-cyan-soft);
  border-color: rgba(0, 229, 255, .3);
}
.docs-toc ul a[data-active="true"] {
  border-color: var(--c-cyan);
  color: var(--c-cyan);
  background: rgba(0, 229, 255, .08);
}

.docs-content { min-width: 0; }   /* allows children with overflow:auto to size correctly inside grid */
.docs-section { margin-bottom: 6vh; padding-top: 1vh; scroll-margin-top: 8vh; }
.docs-section h1 {
  color: var(--c-cyan);
  font-size: clamp(22px, 2.4vw, 36px);
  letter-spacing: var(--ls-wide);
  text-shadow: var(--glow-cyan-soft);
  border-bottom: 1px solid rgba(0, 229, 255, .25);
  padding-bottom: .35em;
  margin: 0 0 .9em;
}
.docs-section h2 { scroll-margin-top: 8vh; }
.docs-section h3 { scroll-margin-top: 8vh; }

/* ----- Callouts ----- */
.callout {
  border: 1px solid rgba(0, 229, 255, .35);
  border-left: 3px solid var(--c-cyan);
  background: rgba(0, 229, 255, .05);
  padding: 14px 18px;
  margin: 1.4em 0;
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--c-white);
  letter-spacing: var(--ls-norm);
}
.callout.mission { border-left-color: var(--c-amber);   background: rgba(251, 191, 36, .07); }
.callout.vision  { border-left-color: var(--c-violet);  background: rgba(167, 139, 250, .07); }
.callout.warn    { border-left-color: var(--c-status-warn); background: rgba(251, 191, 36, .06); }
.callout.info    { /* default cyan */ }

/* ----- Doc tables ----- */
.docs-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.4em 0;
  font-size: var(--fs-sm);
}
.docs-table th, .docs-table td {
  border: 1px solid rgba(0, 229, 255, .18);
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
  color: var(--c-gray-2);
  line-height: 1.5;
}
.docs-table th {
  background: rgba(0, 229, 255, .08);
  color: var(--c-cyan-soft);
  letter-spacing: var(--ls-norm);
  font-weight: 400;
  text-transform: uppercase;
  font-size: var(--fs-xs);
}
.docs-table td code,
.docs-content code {
  font-size: .9em;
  padding: 1px 6px;
}
.docs-table tr:nth-child(odd) td { background: rgba(11, 31, 74, .12); }

/* ----- Mobile docs ----- */
@media (max-width: 900px) {
  .docs-shell {
    grid-template-columns: 1fr;
    padding: 3vh 4vw 6vh;
    gap: 2vh;
  }
  .docs-toc {
    position: relative;
    top: 0;
    max-height: none;
    border-bottom: 1px dashed rgba(0, 229, 255, .25);
    padding-bottom: 2vh;
  }
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.4vw;
}
.card {
  position: relative;
  border: var(--b-cyan);
  background: var(--c-surface);
  padding: 14px 16px 12px;
  box-shadow: inset 0 0 26px rgba(0, 229, 255, .07), 0 0 26px rgba(0, 0, 0, .55);
}
.card .head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .8em; }
.card .head .tag { color: var(--c-cyan-soft); letter-spacing: var(--ls-wide); font-size: var(--fs-sm); }
.card .head .meta { color: var(--c-gray); font-size: var(--fs-xs); }
.card pre { margin: 0; }

/* ----- HUD inline helpers (reusable, no inline styles in HTML) ----- */
.session-row    { display: flex; justify-content: space-between; align-items: flex-start; gap: 1vw; flex-wrap: wrap; }
.session-meta   { text-align: right; line-height: 1.1; min-width: 0; }
.session-meta .v1 { color: var(--c-amber); font-size: clamp(15px, 1.3vw, 21px); text-shadow: var(--glow-amber); white-space: nowrap; }
.session-meta .v2 { color: var(--c-amber); font-size: clamp(11px, 1vw, 14.5px); opacity: .92; margin-top: 2px; white-space: nowrap; }
.session-tags   { display: flex; justify-content: space-between; gap: 1vw; flex-wrap: wrap; font-size: var(--fs-xs); color: var(--c-cyan-soft); letter-spacing: .085em; opacity: .86; }

.nav-btn {
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-wide);
  padding: .55vh .9vw;
  border: 1px solid var(--c-cyan-soft);
  border-radius: var(--radius-md);
  color: var(--c-cyan-soft);
  white-space: nowrap;
  background: rgba(3, 7, 18, .6);
}
.nav-btn:hover { border-color: var(--c-cyan); color: var(--c-cyan); box-shadow: 0 0 12px rgba(0,229,255,.35); }

.region-block-margin { margin-top: 3vh; }
@media (max-height: 880px) {
  .region-block-margin { margin-top: 1.6vh; }
}

.full-w { width: 100%; }

/* Stage that hosts radar + orb in the center region */
.radar-stage { position: relative; width: 100%; height: 100%; }

/* ===========================================================
   Docs page — live preview stages.
   Each card hosts ONE example as a real custom-element. The
   stage gives it room to anchor (position:relative) plus a
   visual frame so the user knows it's a demo, not chrome.
=========================================================== */
.card .preview-stage {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  margin: 10px 0 14px;
  padding: 14px 12px;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(11, 31, 74, .35), rgba(3, 7, 18, .55) 70%),
    repeating-linear-gradient(45deg, rgba(0, 229, 255, .04) 0 6px, transparent 6px 14px);
  border: 1px dashed rgba(0, 229, 255, .28);
  border-radius: var(--radius-md);
  overflow: hidden;
  font-size: var(--fs-md);
}
.card .preview-stage::before {
  content: 'demo';
  position: absolute; top: 4px; right: 8px;
  font-size: 9px;
  letter-spacing: var(--ls-wide);
  color: var(--c-cyan-soft);
  opacity: .55;
  pointer-events: none;
}
/* Widgets that anchor with position:absolute need explicit dimensions */
.card .preview-stage[data-mode="canvas"] {
  height: 200px;
  width: 100%;
}
/* Specific widgets that need a sane visible size in the stage */
.card .preview-stage[data-tag="ag-bg-grid"]   { height: 120px; }
.card .preview-stage[data-tag="ag-voice-orb"] { height: 220px; }
.card .preview-stage[data-tag="ag-radar"]     { height: 240px; }

/* Voice-status badge looks tiny by itself — give it some breathing room */
.card .preview-stage[data-tag="ag-voice-status"] { padding: 22px; }

/* Mic button shouldn't claim the whole stage */
.card .preview-stage ag-mic-button { transform: scale(.9); }

/* Telemetry stream is wide; constrain so columns don't blow out */
.card .preview-stage[data-tag="ag-telemetry"] { padding: 10px; }

/* Bracket card example contains slotted content — keep it readable */
.card .preview-stage[data-tag="ag-bracket-card"] { padding: 18px; }

/* Hide non-essential blocks on short laptops to free vertical space */
.hide-on-short { display: block; }
@media (max-height: 760px) and (min-width: 900px) {
  .hide-on-short { display: none; }
}

/* ----- Status dot helper ----- */
.dot { display:inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: middle; box-shadow: 0 0 8px currentColor; }
.dot.ok    { color: var(--c-status-ok); background: currentColor; }
.dot.warn  { color: var(--c-status-warn); background: currentColor; }
.dot.err   { color: var(--c-status-err); background: currentColor; }
.dot.idle  { color: var(--c-status-idle); background: currentColor; }
.dot.live  { color: var(--c-status-listen); background: currentColor; animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

/* ===========================================================
   Responsive ladder — keep widgets from overlapping at every size.
   1) ≥1400px : the canonical HUD experience.
   2) 1100–1399 : tighten panel widths and bottom card.
   3) 900–1099  : shrink further; bottom card narrower.
   4)  600–899  : SWITCH to stacked column layout (scrollable).
   5)   <600    : same column, denser typography, full-width regions.
=========================================================== */

/* (2) tighten everything so panels don't crowd the radar */
@media (max-width: 1399px) {
  .region-top    { left: 2vw; right: 2vw; }
  .region-left   { width: min(24vw, 360px); top: 22vh; }
  .region-right  { width: min(22vw, 320px); top: 24vh; }
  .region-bottom-center { width: min(36vw, 440px); }
  .region-bottom-left   { max-width: 20vw; }
  .region-bottom-right  { max-width: 22vw; }
  .region-center { width: min(40vw, 64vh); }
}

/* (3) constrain hard so the HUD still fits */
@media (max-width: 1099px) {
  .region-left   { width: min(26vw, 300px); top: 24vh; }
  .region-right  { width: min(26vw, 300px); top: 26vh; }
  .region-bottom-center { width: min(38vw, 380px); }
  .region-bottom-left   { max-width: 22vw; gap: .7vw; }
  .region-bottom-right  { max-width: 22vw; }
  .region-center { width: min(36vw, 60vh); }
}

/* (4) ≤899px → leave HUD layout, become a vertical scrollable column */
@media (max-width: 899px) {
  body[data-page="hud"] { overflow-y: auto; overflow-x: hidden; }
  .hud { height: auto; min-height: 100vh; padding: 0 0 4vh; display: flex; flex-direction: column; }
  .hud .bg-vignette { display: none; }   /* vignette ruins readability when stacked */

  /* Mobile reading order:
       1. top bar (clock + title)
       2. orb (voice agent visual)
       3. mic / session card (controls)
       4. system status
       5. waveform / event stream / skills (right panel)
       6. voice pipeline info
       7. nav (admin / docs)
  */
  .region-top           { order: 1; }
  .region-center        { order: 2; }
  .region-bottom-center { order: 3; }
  .region-left          { order: 4; }
  .region-right         { order: 5; }
  .region-bottom-left   { order: 6; }
  .region-bottom-right  { order: 7; }

  .region-top {
    position: relative; inset: auto;
    flex-direction: column; align-items: flex-start; gap: 1.5vh;
    padding: 2.4vh 4vw 0;
  }
  .region-top .top-left, .region-top .top-right { max-width: 100%; width: 100%; text-align: left; }

  .region-left, .region-right, .region-center,
  .region-bottom-left, .region-bottom-center, .region-bottom-right {
    position: relative; inset: auto; transform: none;
    left: auto; right: auto; top: auto; bottom: auto;
    width: auto; max-width: 100%;
    margin: 2.2vh 4vw;
    align-items: stretch; justify-content: flex-start;
    overflow: visible;
  }
  .region-center {
    width: min(86vw, 460px); aspect-ratio: 1;
    margin: 2.4vh auto;
  }
  .region-right { display: flex; flex-direction: column; gap: 2vh; }
  .region-bottom-right { flex-direction: row; flex-wrap: wrap; gap: 2vw; }
}

/* (5) phones */
@media (max-width: 599px) {
  :root { --fs-3xl: clamp(24px, 8vw, 40px); }
  .region-top { padding: 2vh 4vw 0; }
  .region-center { width: min(92vw, 380px); }
  .region-bottom-center, .region-bottom-left, .region-bottom-right {
    margin-left: 4vw; margin-right: 4vw;
  }
}

/* When height is short (laptops, landscape phones) */
@media (max-height: 880px) and (min-width: 900px) {
  .region-left  { top: 24vh; bottom: 12vh; }
  .region-right { top: 26vh; bottom: 12vh; gap: 1.1vh; }
  .region-bottom-center { bottom: 3vh; }
  .region-bottom-left   { bottom: 2.5vh; }
  .region-bottom-right  { bottom: 2.5vh; }
}
@media (max-height: 720px) and (min-width: 900px) {
  .region-left  { top: 22vh; bottom: 11vh; }
  .region-right { top: 24vh; bottom: 11vh; gap: .8vh; }
}