/* ==========================================================================
   Pico — design tokens, glass surfaces, per-phase accents
   Phase names mirror the C# AgentPhase/OverlayPhase enums exactly.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* --- Mascot geometry, measured from the real pico.png (1254x1254) --------
     Opaque bbox   x 208-1063, y 163-1036
     Face screen   x 415-840,  y 458-739   -> 33.09% 36.52% 33.97% 22.49%
     Forehead dot  centre 49.64% 32.06%, diameter 3.99%                     */
  --pet-screen-left: 33.09%;
  --pet-screen-top: 36.52%;
  --pet-screen-width: 33.97%;
  --pet-screen-height: 22.49%;

  /* --- Neutral ramp (cool navy, tuned to the mascot's own body) ----------- */
  --ink-0:  #05070d;
  --ink-1:  #0a0e18;
  --ink-2:  #111726;
  --ink-3:  #182033;
  --ink-4:  #222c44;
  --ink-5:  #2f3b57;

  --text-hi:  #eef2fb;
  --text-mid: #a9b4cc;
  --text-lo:  #6b7793;
  --text-dim: #4a5470;

  /* --- Glass ------------------------------------------------------------- */
  --glass-bg: color-mix(in oklab, var(--ink-2) 72%, transparent);
  --glass-bg-strong: color-mix(in oklab, var(--ink-2) 88%, transparent);
  --glass-blur: blur(40px) saturate(180%);
  --glass-border: color-mix(in oklab, #ffffff 10%, transparent);
  --glass-border-hi: color-mix(in oklab, #ffffff 18%, transparent);
  --glass-inner: inset 0 1px 0 color-mix(in oklab, #ffffff 12%, transparent);

  --shadow-lift:
    0 24px 60px -14px rgba(3, 6, 16, .72),
    0 8px 20px -8px rgba(5, 10, 26, .55);
  --shadow-pet: 0 18px 40px -14px rgba(3, 6, 16, .78);

  /* --- Radii & rhythm ---------------------------------------------------- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
  --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;

  /* --- Type -------------------------------------------------------------- */
  --font: "Geist", ui-sans-serif, system-ui, "Segoe UI Variable Display", "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "Cascadia Code", Consolas, monospace;

  /* --- Default accent (overridden per phase) ----------------------------- */
  --accent: #8b97a8;
  --accent-soft: color-mix(in oklab, var(--accent) 22%, transparent);
  --accent-glow: color-mix(in oklab, var(--accent) 45%, transparent);
  --accent-text: color-mix(in oklab, var(--accent) 88%, white 12%);

  /* Face screen colours, re-derived per phase */
  --screen-a: #2ee6f6;
  --screen-b: #12a8d8;

  /* Fractal-noise tile used to stop large glass fields from banding */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Phase accents — one source of truth. Every surface reads --accent.
   Set data-phase on any container to re-tint everything inside it.
   ========================================================================== */
[data-phase="Idle"]              { --accent: #8b97a8; --screen-a: #35d6ea; --screen-b: #1490c4; }
[data-phase="Starting"]          { --accent: #38bdf8; --screen-a: #57e2f7; --screen-b: #1b9ad4; }
[data-phase="Observing"]         { --accent: #22d3ee; --screen-a: #5ef0ff; --screen-b: #0e9fc9; }
[data-phase="Thinking"]          { --accent: #a78bfa; --screen-a: #c3aeff; --screen-b: #6d54d6; }
[data-phase="Acting"]            { --accent: #34d399; --screen-a: #6ef2c2; --screen-b: #14a37a; }
[data-phase="Paused"]            { --accent: #fbbf24; --screen-a: #ffd97a; --screen-b: #d08a06; }
[data-phase="AwaitingApproval"]  { --accent: #fb923c; --screen-a: #ffbc85; --screen-b: #d1600f; }
[data-phase="AwaitingTakeover"]  { --accent: #60a5fa; --screen-a: #9ac8ff; --screen-b: #2b6fd4; }
[data-phase="Completed"]         { --accent: #4ade80; --screen-a: #8cf5ae; --screen-b: #1ca858; }
[data-phase="Stopped"]           { --accent: #94a3b8; --screen-a: #b9c6d6; --screen-b: #5b6b82; }
[data-phase="Failed"]            { --accent: #f87171; --screen-a: #ffa3a3; --screen-b: #cf3b3b; }

/* ==========================================================================
   Base
   ========================================================================== */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text-hi);
  -webkit-font-smoothing: antialiased;
}

/* Shared glass panel */
.glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-lift), var(--glass-inner);
  border-radius: var(--r-xl);
  position: relative;
}

/* Faint noise so large glass fields don't band */
.glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: .04;
  mix-blend-mode: overlay;
  background-image: var(--noise);
}

/* A hairline that picks up the phase accent along the panel's top edge */
.glass-accent-edge::before {
  content: "";
  position: absolute;
  inset-inline: 12%;
  top: -1px;
  height: 1px;
  border-radius: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: .85;
  pointer-events: none;
}

/* ==========================================================================
   Small shared atoms
   ========================================================================== */
.kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1;
  color: var(--text-mid);
  background: color-mix(in oklab, var(--ink-4) 70%, transparent);
  border: 1px solid var(--glass-border);
  border-bottom-width: 2px;
  border-radius: 6px;
  transition: color .18s, background .18s, border-color .18s, opacity .18s, transform .18s;
}
.kbd[data-held="true"] {
  color: var(--ink-0);
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 14px var(--accent-glow);
}
.kbd[data-held="false"] { opacity: .35; transform: translateY(1px); border-bottom-width: 1px; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--accent-text);
  background: var(--accent-soft);
  border: 1px solid color-mix(in oklab, var(--accent) 32%, transparent);
  white-space: nowrap;
}
.pill--risk   { color: #ffd9c2; background: color-mix(in oklab, #fb923c 20%, transparent); border-color: color-mix(in oklab, #fb923c 40%, transparent); }
.pill--danger { color: #ffd2d2; background: color-mix(in oklab, #f87171 20%, transparent); border-color: color-mix(in oklab, #f87171 40%, transparent); }

.dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent-glow);
  flex: none;
}

button { font-family: inherit; }

/* One focus treatment for everything interactive. */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  padding: 0 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--glass-border);
  background: color-mix(in oklab, var(--ink-4) 60%, transparent);
  color: var(--text-hi);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .16s, border-color .16s, transform .12s, box-shadow .16s;
}
.btn:hover  { background: color-mix(in oklab, var(--ink-5) 70%, transparent); border-color: var(--glass-border-hi); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.btn--primary {
  background: var(--accent);
  border-color: transparent;
  color: var(--ink-0);
  box-shadow: 0 6px 20px -6px var(--accent-glow);
}
.btn--primary:hover { background: color-mix(in oklab, var(--accent) 88%, white); }

.btn--danger {
  background: color-mix(in oklab, #f87171 18%, transparent);
  border-color: color-mix(in oklab, #f87171 42%, transparent);
  color: #ffd2d2;
}
.btn--danger:hover { background: color-mix(in oklab, #f87171 28%, transparent); }

.btn--ghost { background: transparent; }
.btn--ghost:hover { background: color-mix(in oklab, var(--ink-4) 50%, transparent); }

.section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 0 var(--sp-4);
  margin: var(--sp-3) 0 var(--sp-2);
}

.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;
}