/* ═══════════════════════════════════════════════════════════
   CIEL NEXUS — v0.5.1-T4.5 (crystal glass pass)
   Design language: Solo Leveling System windows, 2026 execution.
   T1: canvas, state readout, access gate.
   T2: glass header, activity panel, response cards, input bar.
   T3: mic control bar + recording pulse ring.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Shadow Monarch palette (S30) */
  --void:          rgb(var(--bg0));
  --panel:         rgba(var(--bg2), 0.55);
  --panel-border:  rgba(var(--acc-hi), 0.20);
  --violet-core:   rgb(var(--acc-deep));
  --violet-bright: rgb(var(--acc));
  --text-accent:   rgb(var(--acc-hi2));
  --cyan:          rgb(var(--acc2b));
  --domain-red:    #D63636;
  --text:          #E7E2F5;
  --text-dim:      #8B84A3;
  --ease-spring:   cubic-bezier(0.16, 1, 0.3, 1);
  /* crystal glass: blur + amplify whatever light passes through the pane */
  --glass:         blur(20px) saturate(1.9) brightness(1.4);
  --glass-sheen:   inset 0 1px 0 rgba(255, 255, 255, 0.09);
  /* S77 THEMES — every accent / surface colour below is one of these r,g,b tokens.
     These are MONARCH's values (the pre-theme literals, unchanged); nexus-theme.js
     re-points them for other themes. */
  --acc-vivid: 123, 47, 255;
  --acc: 138, 79, 216;
  --acc-magenta: 180, 79, 255;
  --acc-hi: 196, 132, 255;
  --acc-hi2: 192, 132, 255;
  --acc-soft: 160, 140, 255;
  --acc-deep: 91, 42, 133;
  --acc-line: 150, 130, 200;
  --acc-violet2: 124, 92, 255;
  --acc-mute: 139, 123, 216;
  --acc-line2: 170, 145, 225;
  --acc2: 111, 224, 255;
  --acc2b: 102, 252, 241;
  --acc2c: 0, 212, 255;
  --acc2d: 0, 173, 181;
  --bg: 13, 8, 24;
  --bg2: 15, 13, 24;
  --bg3: 20, 16, 32;
  --bg0: 11, 12, 16;
  --bg-void: 5, 4, 10;
  --bg4: 40, 32, 64;
  --bg-dark: 13, 11, 20;
  --bg-surf0: 8, 9, 13;
  --bg-surf1: 18, 16, 28;
  --bg-surf2: 26, 23, 40;
  --bg-surf3: 34, 30, 52;
  /* S77 THEMES — every accent / surface colour below is one of these r,g,b tokens.
     These are MONARCH's values (the pre-theme literals, unchanged); nexus-theme.js
     re-points them for other themes. */
  --acc-vivid: 123, 47, 255;
  --acc: 138, 79, 216;
  --acc-magenta: 180, 79, 255;
  --acc-hi: 196, 132, 255;
  --acc-hi2: 192, 132, 255;
  --acc-soft: 160, 140, 255;
  --acc-deep: 91, 42, 133;
  --acc-line: 150, 130, 200;
  --acc-violet2: 124, 92, 255;
  --acc-mute: 139, 123, 216;
  --acc-line2: 170, 145, 225;
  --acc2: 111, 224, 255;
  --acc2b: 102, 252, 241;
  --acc2c: 0, 212, 255;
  --acc2d: 0, 173, 181;
  --bg: 13, 8, 24;
  --bg2: 15, 13, 24;
  --bg3: 20, 16, 32;
  --bg0: 11, 12, 16;
  --bg-void: 5, 4, 10;
  --bg4: 40, 32, 64;
  --bg-dark: 13, 11, 20;
  --bg-surf0: 8, 9, 13;
  --bg-surf1: 18, 16, 28;
  --bg-surf2: 26, 23, 40;
  --bg-surf3: 34, 30, 52;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--void);
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

/* ─── Scene canvas: the living backdrop ─── */
#nexus-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: block;
}

/* ─── State readout (bottom-left, System-window style) ─── */
#nexus-state-label {
  position: fixed;
  left: 20px;
  bottom: 18px;
  z-index: 10;
  font-family: 'Space Grotesk', 'Inter', monospace;
  font-size: 11px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-shadow: 0 0 12px currentColor;
  transition: color 0.6s var(--ease-spring);
  pointer-events: none;
  user-select: none;
}

/* ─── Access-key gate (shown only when no token stored) ─── */
#nexus-token-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;               /* JS flips to flex when needed */
  align-items: center;
  justify-content: center;
  background: rgba(7, 2, 15, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.nexus-gate {
  position: relative;
  width: min(320px, 86vw);
  padding: 28px 24px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow:
    0 0 32px rgba(var(--acc-vivid), 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  animation: gate-in 0.35s var(--ease-spring);
}

/* System-window corner brackets */
.nexus-gate::before,
.nexus-gate::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: var(--violet-bright);
  border-style: solid;
  opacity: 0.85;
}
.nexus-gate::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; border-radius: 10px 0 0 0; }
.nexus-gate::after  { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; border-radius: 0 0 10px 0; }

@keyframes gate-in {
  from { transform: scale(0.96); filter: blur(8px); opacity: 0; }
  to   { transform: scale(1);    filter: blur(0);   opacity: 1; }
}

.nexus-gate h1 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--text-accent);
  text-align: center;
  margin-bottom: 20px;
  text-shadow: 0 0 16px rgba(var(--acc-magenta), 0.6);
}

#nexus-token-input {
  width: 100%;
  padding: 11px 14px;
  background: rgba(10, 6, 24, 0.8);
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  color: var(--text);
  font-family: 'Space Grotesk', monospace;
  font-size: 14px;
  letter-spacing: 0.1em;
  outline: none;
  transition: border-color 0.25s, box-shadow 0.25s;
}
#nexus-token-input:focus {
  border-color: var(--violet-bright);
  box-shadow: 0 0 14px rgba(var(--acc-vivid), 0.35);
}

#nexus-token-submit {
  width: 100%;
  margin-top: 12px;
  padding: 11px;
  background: linear-gradient(135deg, rgba(var(--acc-vivid), 0.85), rgba(var(--acc-magenta), 0.85));
  border: none;
  border-radius: 6px;
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.15s var(--ease-spring), box-shadow 0.25s;
}
#nexus-token-submit:hover { box-shadow: 0 0 20px rgba(var(--acc-vivid), 0.5); }
#nexus-token-submit:active { transform: scale(0.97); }

/* ═══════════════ T2 — GLASS SHELL ═══════════════ */

/* ─── Header ─── */
#nexus-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 56px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  background: rgba(var(--bg), 0.20);
  backdrop-filter: var(--glass);
  -webkit-backdrop-filter: var(--glass);
  border-bottom: 1px solid var(--panel-border);
}
.hdr-left { display: flex; align-items: center; gap: 12px; }
.wordmark {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.5em;
  color: var(--text-accent);
  text-shadow: 0 0 18px rgba(var(--acc-magenta), 0.7);
  user-select: none;
}
#nexus-dot-label {
  font-family: 'Space Grotesk', monospace;
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--text-dim);
  user-select: none;
}
.nexus-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--text-dim);
  transition: background 0.5s, box-shadow 0.5s;
}
.nexus-dot.breathe { animation: dot-breathe 2.4s ease-in-out infinite; }
.nexus-dot.fast    { animation: dot-breathe 0.8s ease-in-out infinite; }
.nexus-dot.still   { animation: none; opacity: 0.6; }
@keyframes dot-breathe {
  0%, 100% { transform: scale(1);   opacity: 0.75; }
  50%      { transform: scale(1.3); opacity: 1; }
}
.hdr-right { display: flex; gap: 6px; }
.ghost-btn {
  width: 34px; height: 34px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text-dim);
  font-size: 15px;
  cursor: pointer;
  transition: all 0.2s var(--ease-spring);
}
.ghost-btn:hover {
  color: var(--text-accent);
  border-color: var(--panel-border);
  box-shadow: 0 0 12px rgba(var(--acc-vivid), 0.25);
}
.ghost-btn:active { transform: scale(0.94); }

/* ─── Conversation stream ─── */
#nexus-stream {
  position: fixed;
  top: 64px;
  bottom: 86px;
  left: 50%;
  transform: translateX(-50%);
  width: min(620px, calc(100vw - 32px));
  z-index: 10;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--acc-vivid), 0.35) transparent;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, transparent, black 28px);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 28px);
}
#nexus-stream::-webkit-scrollbar { width: 4px; }
#nexus-stream::-webkit-scrollbar-thumb { background: rgba(var(--acc-vivid), 0.35); border-radius: 2px; }

.nexus-card {
  position: relative;
  pointer-events: auto;
  max-width: 82%;
  padding: 12px 16px 13px;
  background: rgba(var(--bg), 0.48);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  backdrop-filter: var(--glass);
  -webkit-backdrop-filter: var(--glass);
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.35), var(--glass-sheen);
  animation: card-in 0.4s var(--ease-spring);
  transform-origin: bottom center;
}
.nexus-card::before {           /* top accent bar */
  content: '';
  position: absolute;
  top: -1px; left: 12px; right: 12px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--violet-bright), transparent);
  opacity: 0.9;
}
.nexus-card.user {
  align-self: flex-end;
  background: rgba(30, 16, 52, 0.46);
}
.nexus-card.user::before {
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
}
.nexus-card.ciel { align-self: flex-start; }
@keyframes card-in {
  from { transform: rotateX(8deg) scale(0.96); filter: blur(6px); opacity: 0; }
  to   { transform: rotateX(0)    scale(1);    filter: blur(0);   opacity: 1; }
}
.card-role {
  font-family: 'Space Grotesk', monospace;
  font-size: 11px;
  letter-spacing: 0.35em;
  color: var(--text-dim);
  margin-bottom: 5px;
  user-select: none;
}
.nexus-card.user .card-role { color: rgba(var(--acc2c), 0.75); }
.nexus-card.ciel .card-role { color: var(--text-accent); }
.card-text {
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.card-text.shimmer {
  background: linear-gradient(90deg, var(--text-dim) 25%, var(--text-accent) 50%, var(--text-dim) 75%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ─── Activity panel ─── */
#nexus-activity {
  position: fixed;
  top: 56px; right: 0; bottom: 0;
  width: 260px;
  z-index: 15;
  background: rgba(10, 6, 20, 0.26);
  backdrop-filter: var(--glass);
  -webkit-backdrop-filter: var(--glass);
  border-left: 1px solid var(--panel-border);
  transition: width 0.35s var(--ease-spring);
  overflow: hidden;
}
#nexus-activity.collapsed { width: 0; border-left: none; }
.act-inner {
  width: 260px;
  height: 100%;
  overflow-y: auto;
  padding: 16px 14px 90px;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--acc-vivid), 0.35) transparent;
}
#nexus-activity section { margin-bottom: 20px; }
#nexus-activity h2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(var(--acc-hi), 0.10);
  margin-bottom: 8px;
}
.act-badge {
  font-size: 10px;
  min-width: 18px;
  text-align: center;
  padding: 2px 5px;
  border-radius: 9px;
  background: rgba(var(--acc-vivid), 0.22);
  color: var(--text-accent);
  letter-spacing: 0;
}
#nexus-activity ul { list-style: none; }
.act-entry {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text);
  opacity: 0.85;
  padding: 5px 8px;
  margin-bottom: 4px;
  border-radius: 6px;
  background: rgba(var(--acc-vivid), 0.07);
  border-left: 2px solid rgba(var(--acc-vivid), 0.45);
  animation: entry-in 0.3s var(--ease-spring);
  word-break: break-word;
}
.act-entry.live { border-left-color: var(--cyan); }
@keyframes entry-in {
  from { transform: translateX(24px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 0.85; }
}

/* ─── Input bar ─── */
/* ── Context meter (S43) ──────────────────────────────────────────────
   Sits directly above the input bar. Deliberately quiet: glow is a STATE,
   so it stays a hairline until history actually starts being dropped. */
#nexus-ctx {
  position: fixed;
  bottom: 76px;
  left: 50%;
  transform: translateX(-50%);
  width: min(560px, calc(100vw - 32px));
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--text-dim, rgba(226, 222, 245, .55));
  font-variant-numeric: tabular-nums;
}
#nexus-ctx[hidden] { display: none; }
#nexus-ctx-bar {
  flex: 0 0 110px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .10);
  overflow: hidden;
}
#nexus-ctx-fill {
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: var(--accent, rgb(var(--acc-violet2)));
  transition: width .25s var(--ease, ease);
}
#nexus-ctx-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#nexus-ctx-sum {
  flex: 0 0 auto;
  padding: 2px 8px;
  font-size: 11px;
  letter-spacing: .06em;
  color: inherit;
  background: transparent;
  border: 1px solid var(--panel-border);
  border-radius: 7px;
  cursor: pointer;
}
#nexus-ctx-sum:hover { color: var(--text, #e8e5f7); border-color: var(--accent, rgb(var(--acc-violet2))); }
#nexus-ctx[data-state="tight"] #nexus-ctx-fill { background: #e0a33c; }
#nexus-ctx[data-state="forgetting"] #nexus-ctx-fill,
#nexus-ctx[data-state="full"] #nexus-ctx-fill { background: #e0603c; }
#nexus-ctx[data-state="forgetting"] #nexus-ctx-label,
#nexus-ctx[data-state="full"] #nexus-ctx-label { color: #f0b8a8; }

#nexus-inputbar {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: min(560px, calc(100vw - 32px));
  z-index: 20;
  display: flex;
  gap: 8px;
  padding: 8px;
  background: rgba(var(--bg), 0.36);
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  backdrop-filter: var(--glass);
  -webkit-backdrop-filter: var(--glass);
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.4), 0 0 24px rgba(var(--acc-vivid), 0.10);
}
#nexus-input {
  flex: 1;
  padding: 10px 14px;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
}
#nexus-input::placeholder { color: var(--text-dim); }
#nexus-send {
  width: 42px; height: 42px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(var(--acc-vivid), 0.9), rgba(var(--acc-magenta), 0.9));
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  transition: transform 0.15s var(--ease-spring), box-shadow 0.25s;
}
#nexus-send:hover  { box-shadow: 0 0 18px rgba(var(--acc-vivid), 0.55); }
#nexus-send:active { transform: scale(0.94); }

/* ─── Voice gender toggle (S31 — Kokoro female/male) ─── */
#nexus-voice-toggle {
  width: 42px; height: 42px;
  flex-shrink: 0;
  border: 1px solid rgba(var(--acc-hi), 0.25);
  border-radius: 12px;
  background: rgba(19, 13, 34, 0.9);
  color: var(--cyan, rgb(var(--acc2b)));
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.15s var(--ease-spring), box-shadow 0.25s, color 0.2s;
}
#nexus-voice-toggle:hover  { box-shadow: 0 0 16px rgba(var(--acc-vivid), 0.4); }
#nexus-voice-toggle:active { transform: scale(0.94); }
#nexus-voice-toggle.male   { color: #7BC4FF; }

/* ─── Mic button (T3, Prompt-3 spec adapted to System palette) ─── */
#nexus-mic {
  position: relative;
  width: 64px; height: 64px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  background: #130D22;                  /* dark idle circle, violet-tinged */
  color: #fff;
  cursor: pointer;
  transition: transform 0.15s var(--ease-spring),
              box-shadow 0.3s, border-color 0.3s, background 0.3s;
}
#nexus-mic:hover {
  border-color: rgba(var(--acc-hi), 0.35);
  box-shadow: 0 0 18px rgba(var(--acc-vivid), 0.30);
}
#nexus-mic:active { transform: scale(0.93); }
#nexus-mic.disabled { opacity: 0.4; }
#nexus-mic.recording {
  border-color: var(--cyan);            /* listening state color */
  background: #10202B;
  box-shadow: 0 0 24px rgba(var(--acc2c), 0.5);
}
#nexus-mic.recording::after {           /* expanding pulse ring */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(var(--acc2c), 0.8);
  animation: mic-ring 1.4s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
@keyframes mic-ring {
  from { box-shadow: 0 0 0 0    rgba(var(--acc2c), 0.8); opacity: 1; }
  to   { box-shadow: 0 0 0 10px rgba(var(--acc2c), 0);   opacity: 0; }
}

/* hint text below the bar */
#nexus-mic-hint {
  position: fixed;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  pointer-events: none;
  user-select: none;
}

/* ─── Avatar status chip (T4) ─── */
.nexus-chip {
  position: fixed;
  z-index: 55;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 14px;
  background: rgba(var(--bg), 0.88);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  backdrop-filter: blur(12px);
  box-shadow: 0 0 18px rgba(var(--acc-vivid), 0.25);
  animation: gate-in 0.25s var(--ease-spring);
  pointer-events: none;
}
.chip-name {
  font-family: 'Space Grotesk', monospace;
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--text-accent);
}
.chip-status {
  font-size: 11px;
  color: var(--text-dim);
}

/* S79: a sub-agent's name beside its star while it works (black-hole home) */
.nexus-agent-label { position: fixed; left: 0; top: 0; z-index: 3; pointer-events: none; opacity: 0;
  font-size: 11px; letter-spacing: .22em; font-weight: 600; white-space: nowrap;
  text-shadow: 0 0 6px rgba(0,0,0,.9), 0 0 12px currentColor; transition: opacity .3s; will-change: transform; }

/* ─── Toast ─── */
.nexus-toast {
  position: fixed;
  top: 68px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;   /* S79 (his report): a message must sit ABOVE every dialog — at 60 it hid behind BUILD THE BODY (70) */
  padding: 8px 18px;
  background: rgba(var(--bg), 0.85);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  backdrop-filter: blur(12px);
  font-family: 'Space Grotesk', monospace;
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--text-accent);
  animation: entry-in 0.3s var(--ease-spring);
  transition: opacity 0.4s;
}
.nexus-toast.out { opacity: 0; }

/* stream dodges the open activity panel (desktop only) */
body.panel-open #nexus-stream { left: calc(50% - 130px); }

/* When the left PANELS rail is open, the viewport-centred stream would slide under
   it (worse when the right activity panel is ALSO open and pushes the stream left).
   Anchor the stream BETWEEN the rail and the right edge / activity panel instead of
   centring on the viewport, so it always clears both — and adapts to any width. */
@media (min-width: 701px) {
  body.rail-open #nexus-stream {
    left: 244px;              /* clear the 214px rail (+ gap) */
    right: 20px;
    transform: none;          /* cancel the -50% centring translate */
    width: min(620px, calc(100vw - 284px));
    margin-left: auto;        /* centre within the left..right band */
    margin-right: auto;
  }
  /* rail AND right activity panel open → also clear the 260px panel on the right */
  body.rail-open.panel-open #nexus-stream {
    right: 280px;
    width: min(620px, calc(100vw - 544px));
  }
}

/* ─── Mobile ─── */
@media (max-width: 700px) {
  body.panel-open #nexus-stream { left: 50%; }  /* panel overlays on mobile */
  #nexus-stream { width: calc(100vw - 20px); }
  .nexus-card { max-width: 94%; }
  #nexus-activity { width: min(260px, 78vw); }
  #nexus-activity.collapsed { width: 0; }
  .wordmark { letter-spacing: 0.35em; font-size: 13px; }
}

/* ─── Tool activity chips (T4.5) ─── */
#nexus-toolchips {
  position: fixed;
  bottom: 96px;                 /* clear the input bar (bottom:18 + ~64 tall) */
  left: 50%;
  transform: translateX(-50%);
  width: min(560px, calc(100vw - 32px));
  z-index: 21;                  /* above the input bar, not tucked behind it */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  pointer-events: none;
}
.tool-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  background: rgba(var(--bg), 0.45);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  backdrop-filter: var(--glass);
  animation: gate-in 0.25s var(--ease-spring);
  transition: opacity 0.5s ease;
}
.tool-chip .chip-tool { color: var(--text-accent); font-weight: 600; }
.tool-chip.running .chip-detail {
  background: linear-gradient(90deg, var(--text-dim) 25%, var(--text-accent) 50%, var(--text-dim) 75%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 1.4s linear infinite;
}
.tool-chip.done  { border-color: rgba(79, 255, 180, 0.45); }
.tool-chip.done  .chip-icon { color: #4FFFB4; }
.tool-chip.error { border-color: rgba(255, 90, 90, 0.5); }
.tool-chip.error .chip-icon { color: #FF5A5A; }
.tool-chip.out   { opacity: 0; }

/* ─── System windows (T5 panels) ─── */
.nexus-window {
  position: fixed;
  top: 76px; right: 20px; bottom: 96px;
  width: min(480px, calc(100vw - 40px));
  z-index: 40;
  display: flex;
  flex-direction: column;
  background: rgba(var(--bg0), 0.55);
  border: 1px solid var(--panel-border);
  border-radius: 14px;
  backdrop-filter: var(--glass);
  -webkit-backdrop-filter: var(--glass);
  box-shadow: 0 0 34px rgba(var(--acc-deep), 0.35), var(--glass-sheen);
  animation: gate-in 0.3s var(--ease-spring);
  transition: opacity 0.25s ease, transform 0.25s ease;
  /* Own compositing layer + isolation → stops the backdrop-filter from
     re-sampling/repainting against the animating orb every frame (flicker). */
  transform: translateZ(0);
  backface-visibility: hidden;
  isolation: isolate;
}
.nexus-window.out { opacity: 0; transform: translateY(12px) scale(0.98); }
.win-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--panel-border);
}
.win-title {
  font-family: 'Space Grotesk', monospace;
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--text-accent);
}
.win-close {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 14px;
  cursor: pointer;
  padding: 2px 6px;
}
.win-close:hover { color: var(--text); }
.win-body {
  flex: 1;
  display: flex;
  min-height: 0;
  padding: 10px;
  gap: 10px;
  overflow: hidden;
  font-size: 13px;
  color: var(--text);
}
.win-loading { color: var(--text-dim); padding: 8px; }
.win-list {
  flex: 0 0 165px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.win-item {
  text-align: left;
  padding: 8px 10px;
  font-size: 12px;
  color: var(--text);
  background: rgba(var(--acc-deep), 0.14);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}
.win-item:hover { background: rgba(var(--acc-deep), 0.30); }
.win-item.sel {
  background: rgba(var(--acc-deep), 0.45);
  border-color: var(--text-accent);
}
.win-msgs {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.win-msg {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(var(--bg2), 0.55);
  border: 1px solid rgba(var(--acc-hi), 0.10);
}
.win-msg.user { border-left: 2px solid var(--cyan); }
.win-msg.ciel { border-left: 2px solid var(--violet-bright); }
.msg-role { font-size: 11px; letter-spacing: 0.25em; color: var(--text-dim); }
.msg-text { white-space: pre-wrap; word-break: break-word; }
.msg-ts   { font-size: 11px; color: var(--text-dim); align-self: flex-end; }
.win-list::-webkit-scrollbar, .win-msgs::-webkit-scrollbar { width: 3px; }
.win-list::-webkit-scrollbar-thumb, .win-msgs::-webkit-scrollbar-thumb {
  background: rgba(var(--acc), 0.35); border-radius: 2px;
}

/* ── Permanent left rail (☰ shows/hides): vertical stacked panel nav ──
   Opaque background (NO backdrop-filter) so it never flickers against the
   animating orb canvas behind it. */
.nexus-rail {
  position: fixed;
  top: 76px; left: 14px; bottom: 96px;
  width: 214px;
  z-index: 41;
  /* Hidden via display (NOT opacity/transform): Chromium 87 (the launcher's
     QtWebEngine) skips compositor repaints of opacity/transform toggles, so
     the rail appeared "stuck". display is a layout property it always
     repaints — ☰ now reliably shows/hides it. */
  display: none;
  flex-direction: column;
  background: rgba(9, 10, 16, 0.94);
  border: 1px solid var(--panel-border);
  border-radius: 14px;
  box-shadow: 0 0 26px rgba(var(--acc-deep), 0.28), var(--glass-sheen);
  overflow: hidden;
}
.nexus-rail.open { display: flex; }
.rail-head {
  padding: 13px 16px;
  font-family: 'Space Grotesk', monospace;
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--text-accent);
  border-bottom: 1px solid var(--panel-border);
}
.rail-body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
}
/* S77: the rail is grouped (nexus-panels.js RAIL_GROUPS) */
.rail-group { font-family: 'Space Grotesk', monospace; font-size: 11px; letter-spacing: 0.25em;
  color: var(--text-dim); padding: 8px 6px 0; margin-top: 2px; }
.rail-group:first-child { padding-top: 0; margin-top: 0; }
.rail-item {
  width: 100%;
  text-align: left;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  letter-spacing: 0.06em;
  padding: 12px 14px;
  color: var(--text);
  background: rgba(var(--acc-deep), 0.14);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.rail-item:hover { background: rgba(var(--acc-deep), 0.30); }
.rail-item.sel {
  background: rgba(var(--acc-vivid), 0.32);
  border-color: var(--text-accent);
  color: var(--text);
}
.rail-body::-webkit-scrollbar { width: 3px; }
.rail-body::-webkit-scrollbar-thumb {
  background: rgba(var(--acc), 0.35); border-radius: 2px;
}
/* When the rail is open on desktop, dock the panel window beside it. */
@media (min-width: 701px) {
  body.rail-open .nexus-window { left: 244px; right: auto; width: min(480px, calc(100vw - 280px)); }
}

/* ── Settings: segmented controls ── */
.seg-row { display: flex; gap: 6px; margin: 2px 0 6px; }
.seg-btn {
  flex: 1;
  padding: 9px 6px;
  font-size: 12px;
  color: var(--text-dim);
  background: rgba(var(--acc-deep), 0.14);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.seg-btn:hover { background: rgba(var(--acc-deep), 0.30); }
.seg-btn.on {
  color: var(--text);
  background: rgba(var(--acc-vivid), 0.35);
  border-color: var(--text-accent);
}

/* ── Text-size preference (scales text surfaces, not the orb) ── */
body[data-fontsize="large"] .nexus-window,
body[data-fontsize="large"] #nexus-stream,
body[data-fontsize="large"] #nexus-inputbar { zoom: 1.15; }
body[data-fontsize="small"] .nexus-window,
body[data-fontsize="small"] #nexus-stream,
body[data-fontsize="small"] #nexus-inputbar { zoom: 0.9; }

/* ── Web terminal panel (#4b) ── */
.term-out {
  flex: 1;
  min-height: 220px;
  max-height: 46vh;
  overflow-y: auto;
  margin: 4px 0;
  padding: 10px 12px;
  background: rgba(4, 6, 10, 0.72);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  font-family: 'Consolas', 'Cascadia Code', monospace;
  font-size: 12px;
  line-height: 1.45;
  color: #C9F5E4;
  white-space: pre-wrap;
  word-break: break-word;
}
.term-input { font-family: 'Consolas', 'Cascadia Code', monospace; flex: 1; }

/* T5b agent panel */
.win-body.col { flex-direction: column; overflow-y: auto; }
.win-sub {
  font-family: 'Space Grotesk', monospace;
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--text-dim);
  margin: 8px 0 2px;
}
.agent-strip {
  font-size: 11px;
  color: var(--text-accent);
  padding: 6px 10px;
  background: rgba(var(--acc-deep), 0.16);
  border-radius: 8px;
}
.agent-card {
  padding: 8px 10px;
  border: 1px solid rgba(var(--acc-hi), 0.12);
  border-radius: 8px;
  background: rgba(var(--bg2), 0.5);
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex-shrink: 0;
}
.agent-card.approval { border-color: rgba(255, 180, 84, 0.45); }
.agent-head { display: flex; justify-content: space-between; gap: 8px; }
.agent-title { font-size: 12px; font-weight: 600; }
.agent-status { font-size: 11px; letter-spacing: 0.15em; font-weight: 700; }
.agent-meta { font-size: 11px; color: var(--text-dim); word-break: break-all; }
.agent-btns { display: flex; gap: 6px; margin-top: 3px; }
.win-btn {
  background: none;
  border: 1px solid var(--panel-border);
  color: var(--text-dim);
  font-size: 11px;
  letter-spacing: 0.1em;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.win-btn.approve { border-color: rgba(79, 255, 180, 0.5);  color: #4FFFB4; }
.win-btn.dismiss { border-color: rgba(214, 54, 54, 0.55);  color: #D63636; }
.win-btn:hover { background: rgba(var(--acc-deep), 0.25); }
.agent-form { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.win-input {
  background: rgba(var(--bg2), 0.6);
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  color: var(--text);
  font-size: 12px;
  padding: 7px 10px;
  outline: none;
}
.win-input:focus { border-color: var(--text-accent); }
.agent-log {
  font-size: 11px;
  color: var(--text-dim);
  white-space: pre-wrap;
  word-break: break-word;
  background: rgba(var(--bg0), 0.6);
  border-radius: 6px;
  padding: 6px 8px;
  margin-top: 4px;
}
.email-draft {
  margin: 4px 0;
  border: 1px solid rgba(var(--acc2b), 0.25);
  border-radius: 6px;
  background: rgba(var(--bg0), 0.55);
  padding: 8px 10px;
}
.email-hdr { font-size: 11px; color: var(--text-accent); margin-bottom: 2px; }
.email-body {
  font-size: 12px;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  margin-top: 6px;
  font-family: inherit;
  max-height: 220px;
  overflow-y: auto;
}
.mail-row { cursor: pointer; }
.mail-row.unread .agent-title { color: var(--cyan); }
.mail-from { font-size: 11px; color: var(--text-dim); }

@media (max-width: 700px) {
  .nexus-window {
    top: auto; right: 0; left: 0; bottom: 0;
    width: 100vw;
    height: 72vh;
    border-radius: 14px 14px 0 0;
  }
  .win-list { flex: 0 0 130px; }
}

/* ─── Motion accessibility ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.15s !important;
  }
}

/* ─── SYSTEM panel (S42) — host vitals from /api/system ─────────────── */
.sys-wrap { display: flex; flex-direction: column; gap: 14px; }
.sys-section {
  border: 1px solid var(--panel-border); border-radius: 10px;
  padding: 10px 12px; background: rgba(var(--bg2), 0.35);
}
.sys-head {
  font-size: 11px; letter-spacing: 2px; color: var(--text-accent);
  margin-bottom: 8px; font-weight: 600;
}
.sys-row {
  display: grid; grid-template-columns: 96px 1fr; gap: 4px 10px;
  align-items: baseline; margin: 5px 0;
}
.sys-label { color: var(--text-dim); font-size: 11px; letter-spacing: 1px; }
.sys-value { color: var(--text); font-size: 12.5px; word-break: break-word; }
/* the bar spans both columns on its own line */
.sys-bar {
  grid-column: 1 / -1; height: 5px; border-radius: 3px;
  background: rgba(255, 255, 255, 0.07); overflow: hidden; margin-top: 2px;
}
.sys-bar-fill { height: 100%; border-radius: 3px; transition: width 0.4s var(--ease-spring); }
.sys-note {
  margin-top: 8px; font-size: 11px; color: var(--cyan);
  opacity: 0.85; line-height: 1.4;
}
.sys-foot, .sys-loading { font-size: 11px; color: var(--text-dim); letter-spacing: 1px; }
.sys-err { color: #FF6B8A; font-size: 12px; }
@media (max-width: 700px) {
  .sys-row { grid-template-columns: 84px 1fr; }
}

/* ─── Trailer conversion progress (S42) ─────────────────────────────── */
.trailer-prog {
  display: flex; flex-direction: column; justify-content: center;
  gap: 8px; padding: 0 18px; width: 100%;
}
.tp-label { font-size: 12px; color: var(--text-accent); letter-spacing: 1px; }
.tp-bar {
  height: 6px; border-radius: 3px; overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
}
.tp-fill {
  height: 100%; border-radius: 3px; width: 0;
  background: linear-gradient(90deg, var(--violet-bright), var(--cyan));
  transition: width 0.5s var(--ease-spring);
}
/* Before ffmpeg reports a first timestamp there is no real % — sweep instead of
   showing a bar frozen at zero, which reads as "stuck". */
.tp-fill.indeterminate {
  width: 35%; animation: tp-sweep 1.4s ease-in-out infinite;
}
@keyframes tp-sweep {
  0%   { margin-left: -35%; }
  100% { margin-left: 100%; }
}
.tp-hint { font-size: 11px; color: var(--text-dim); }

/* ═══════════════════════════════════════════════════════════════════════════
   S42 — PRECISION INSTRUMENT design layer
   Agreed direction: dark, high-contrast, RESTRAINED glow, dense readable data,
   sharp typography. "Technically advanced" through craft and quietness — NOT
   more neon. Shadow Monarch violet/cyan identity is kept and elevated.

   Appended deliberately so it wins the cascade: the tokens below re-point the
   existing variables, and the component rules refine the shared vocabulary
   (win-btn / agent-card / agent-meta / win-sub / win-input) that every panel
   already uses — so the whole app moves together instead of drifting panel by
   panel while a rollout is half-done.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  /* ── elevation: three real surfaces instead of ad-hoc rgba everywhere ── */
  --surface-0: rgb(var(--bg-surf0));                     /* app void */
  --surface-1: rgba(var(--bg-surf1), 0.72);      /* panel body */
  --surface-2: rgba(var(--bg-surf2), 0.86);      /* raised card */
  --surface-3: rgba(var(--bg-surf3), 0.94);      /* hover / active */

  /* ── hairlines: one border language, low alpha, never heavy ── */
  --line:        rgba(var(--acc-line), 0.14);
  --line-strong: rgba(var(--acc-line2), 0.28);

  /* ── text: lifted contrast. The old --text-dim was too faint on glass ── */
  --text:      #EDEAF7;
  --text-mid:  #A9A2C4;
  --text-dim:  #7E7799;

  /* ── spacing: 4px rhythm ── */
  --s1: 4px;  --s2: 8px;  --s3: 12px;  --s4: 16px;  --s5: 24px;

  /* ── radius ── */
  --r1: 6px;  --r2: 10px;  --r3: 14px;

  /* ── motion: ONE easing, fast. Precision reads as immediate ── */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --t-fast: 120ms;  --t-mid: 180ms;

  /* ── glow is a STATE, not decoration ── */
  --glow-focus: 0 0 0 1px rgba(var(--acc), 0.55), 0 0 16px rgba(var(--acc), 0.22);
  --glow-live:  0 0 12px rgba(var(--acc2b), 0.30);

  /* ── semantic state (S43). These three hexes were being retyped by hand in
     the sentinel CSS, the study panel and the vault gauges, which is how three
     "greens" drift apart. Named once, used everywhere. ── */
  --state-ok:   #4FFFB4;
  --state-warn: #FFC46B;
  --state-bad:  #FF6B8A;
}

/* Data must line up. Tabular numerals stop values jittering as they refresh. */
.sys-value, .agent-meta, .win-input, .tp-label, .tp-hint,
.sys-foot, .agent-status { font-variant-numeric: tabular-nums; }

/* ── shared vocabulary ─────────────────────────────────────────────────── */
.win-sub {
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--text-mid);
  margin: var(--s4) 0 var(--s2);
  padding-bottom: var(--s1);
  border-bottom: 1px solid var(--line);
}
.agent-card {
  padding: var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  background: var(--surface-2);
  gap: var(--s1);
  transition: border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}
.agent-card:hover { border-color: var(--line-strong); background: var(--surface-3); }
.agent-title { font-size: 12.5px; font-weight: 600; color: var(--text); letter-spacing: 0.01em; }
.agent-meta {
  font-size: 11px;
  color: var(--text-mid);
  line-height: 1.5;
  /* break-all split words mid-character; only break where it must. */
  word-break: normal;
  overflow-wrap: anywhere;
}
.agent-strip {
  font-size: 11px;
  color: var(--text-mid);
  padding: var(--s2) var(--s3);
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r2);
}
.win-btn {
  font-size: 11px;
  letter-spacing: 0.12em;
  padding: var(--s2) var(--s3);
  border-radius: var(--r1);
  border: 1px solid var(--line);
  color: var(--text-mid);
  background: var(--surface-1);
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.win-btn:hover { background: var(--surface-3); border-color: var(--line-strong); color: var(--text); }
.win-btn:focus-visible { outline: none; box-shadow: var(--glow-focus); }
.win-btn.approve { border-color: rgba(79, 255, 180, 0.42); color: var(--state-ok); }
.win-btn.approve:hover { background: rgba(79, 255, 180, 0.10); }
.win-input {
  border-radius: var(--r1);
  border: 1px solid var(--line);
  background: var(--surface-1);
  padding: var(--s2) var(--s3);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.win-input:focus { outline: none; border-color: var(--line-strong); box-shadow: var(--glow-focus); }

/* ── FLAGSHIP: the SYSTEM panel, converted first because it is the densest ── */
.sys-wrap { gap: var(--s3); }
.sys-section {
  border: 1px solid var(--line);
  border-radius: var(--r2);
  background: var(--surface-1);
  padding: var(--s3);
}
.sys-head {
  font-size: 11px;
  letter-spacing: 0.26em;
  color: var(--text-dim);
  font-weight: 600;
  margin-bottom: var(--s2);
  padding-bottom: var(--s1);
  border-bottom: 1px solid var(--line);
}
.sys-row {
  grid-template-columns: 92px 1fr;
  gap: var(--s1) var(--s3);
  margin: 0;
  padding: 5px 0;
  border-bottom: 1px solid rgba(var(--acc-line), 0.06);
}
.sys-row:last-child { border-bottom: none; }
.sys-label {
  font-size: 11px;
  letter-spacing: 0.10em;
  color: var(--text-dim);
  text-transform: uppercase;
}
.sys-value { font-size: 12px; color: var(--text); }
.sys-bar {
  height: 3px;                      /* thinner: a gauge, not a progress bar */
  background: rgba(var(--acc-line), 0.10);
  border-radius: 2px;
  margin-top: var(--s1);
}
.sys-bar-fill { border-radius: 2px; transition: width var(--t-mid) var(--ease);
                background: var(--state-ok); }
.sys-bar-fill.is-ok   { background: var(--state-ok); }
.sys-bar-fill.is-warn { background: var(--state-warn); }
.sys-bar-fill.is-bad  { background: var(--state-bad); }
.sys-note {
  margin-top: var(--s2);
  padding: var(--s2) var(--s3);
  font-size: 11px;
  color: var(--cyan);
  background: rgba(var(--acc2b), 0.06);
  border: 1px solid rgba(var(--acc2b), 0.16);
  border-radius: var(--r1);
  opacity: 1;
}
.sys-foot {
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  text-transform: uppercase;
}

/* ─── SENTINEL — Ciel's judgement about the machine (S42) ───────────────── */
.sentinel { display: flex; flex-direction: column; gap: var(--s2); }
.sen-verdict {
  display: grid;
  grid-template-columns: 10px auto 1fr;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  background: var(--surface-1);
}
.sen-dot { width: 7px; height: 7px; border-radius: 50%; }
.sen-word { font-size: 11px; letter-spacing: 0.24em; font-weight: 700; }
.sen-head { font-size: 11.5px; color: var(--text-mid); font-variant-numeric: tabular-nums; }
/* Colour is the STATE, not decoration — calm stays quiet on purpose. */
.sen-calm     .sen-dot { background: var(--state-ok); }
.sen-calm     .sen-word { color: var(--state-ok); }
.sen-watch    .sen-dot { background: var(--state-warn); box-shadow: 0 0 10px rgba(255,196,107,.45); }
.sen-watch    .sen-word { color: var(--state-warn); }
.sen-watch    { border-color: rgba(255,196,107,.28); }
.sen-pressure .sen-dot { background: var(--state-bad); box-shadow: 0 0 12px rgba(255,107,138,.55); }
.sen-pressure .sen-word { color: var(--state-bad); }
.sen-pressure { border-color: rgba(255,107,138,.34); background: rgba(255,107,138,.05); }

.sen-list { display: flex; flex-direction: column; }
.sen-row {
  display: grid;
  grid-template-columns: 1fr 72px 56px;
  gap: var(--s2);
  padding: 5px var(--s3);
  border-bottom: 1px solid rgba(var(--acc-line), .06);
  align-items: baseline;
}
.sen-row:last-child { border-bottom: none; }
.sen-name {
  font-size: 11.5px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sen-num {
  font-size: 11px; color: var(--text-mid);
  text-align: right; font-variant-numeric: tabular-nums;
}
/* Things Ciel considers background noise read dimmer than what Nawar opened. */
.sen-row.is-noise .sen-name { color: var(--text-dim); font-style: italic; }

.sen-suggest {
  display: flex; flex-direction: column; gap: var(--s2);
  padding: var(--s3);
  border: 1px solid rgba(255,196,107,.30);
  border-radius: var(--r2);
  background: rgba(255,196,107,.06);
}
.sen-sug-text { font-size: 11.5px; color: var(--text); line-height: 1.5; }
.sen-suggest .win-btn { align-self: flex-start; }

/* ─── Panels behave like real windows (S42) ─────────────────────────────── */
.win-head { cursor: move; user-select: none; }
.win-head .win-close { cursor: pointer; }
/* Bottom-LEFT grip: the window docks to the right edge, so the bottom-right
   corner is the one you can least reach. */
/* S43: BOTH bottom corners are grabbable. With the rail open the window docks
   on the LEFT, so a left-only grip resized into the rail and the panel felt
   welded in place. */
.win-grip {
  position: absolute;
  bottom: 0;
  width: 18px; height: 18px;
  opacity: 0.55;
  transition: opacity var(--t-fast, 120ms) var(--ease, ease);
  touch-action: none;
}
.win-grip-left {
  left: 0;
  cursor: nesw-resize;
  border-bottom-left-radius: var(--r3, 14px);
  background:
    linear-gradient(45deg, transparent 0 42%, var(--line-strong) 42% 50%, transparent 50% 70%,
                    var(--line-strong) 70% 78%, transparent 78%);
}
.win-grip-right {
  right: 0;
  cursor: nwse-resize;
  border-bottom-right-radius: var(--r3, 14px);
  background:
    linear-gradient(-45deg, transparent 0 42%, var(--line-strong) 42% 50%, transparent 50% 70%,
                    var(--line-strong) 70% 78%, transparent 78%);
}
.win-grip:hover { opacity: 1; }

/* ══════════════════════════════════════════════════════════════════════════
   RE-SKIN STEP 3 (S43) — SHARED COMPONENT LAYER
   ──────────────────────────────────────────────────────────────────────────
   Step 2 proved the language on the SYSTEM panel. Rolling it out by editing
   inline cssText in 14 files would have been hundreds of hand-written values
   drifting apart the moment anyone touched one. Instead the RECURRING SHAPES
   get real classes here — media cards, list rows, tiles, strips, gauges — and
   the panels just name them. A future panel inherits the language for free,
   which is the whole point of doing the vocabulary before the rollout.

   Everything below is built from the tokens above: no raw hex, no ad-hoc
   radius, one easing, glow only for state.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   RE-SKIN STEP 4 (S43) — CHROME: HEADER · RAIL · PANEL SHELL
   ──────────────────────────────────────────────────────────────────────────
   The agreed aesthetic is "PRECISION INSTRUMENT": technically advanced comes
   from CRAFT and quietness, not from more glow. So this step mostly REMOVES
   things — ambient text-shadow on the wordmark, glow on button hover, the big
   violet fills in the rail — and tightens what is left onto the type scale,
   the 4px rhythm and the single easing.

   ⚠ The .nexus-window compositing properties (transform/backface/isolation)
   are the S35 FLICKER FIX. Nothing here touches them, and nothing here may.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── header ───────────────────────────────────────────────────────────────── */
#nexus-header {
  height: 52px;
  padding: 0 var(--s4);
  background: var(--surface-1);
  border-bottom: 1px solid var(--line);
}
.hdr-left  { gap: var(--s3); }
.hdr-right { gap: var(--s1); }
/* The wordmark carried a permanent 18px violet halo. An always-on glow is
   decoration, and decoration is what the brief rules out — the mark holds up
   on letterspacing and weight alone. */
.wordmark {
  font-size: 14px;
  letter-spacing: 0.42em;
  color: var(--text);
  text-shadow: none;
}
#nexus-dot-label {
  font-size: 11px;
  letter-spacing: 0.26em;
  color: var(--text-dim);
}
.nexus-dot { width: 7px; height: 7px; }      /* a status LED, not a bauble */
.ghost-btn {
  width: 32px; height: 32px;
  border-radius: var(--r1);
  color: var(--text-dim);
  font-size: 14px;
  transition: color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
/* Hover is a surface change, not a light show. */
.ghost-btn:hover {
  color: var(--text);
  background: var(--surface-2);
  border-color: var(--line);
  box-shadow: none;
}
.ghost-btn:active { transform: none; background: var(--surface-3); }
.ghost-btn:focus-visible { outline: none; box-shadow: var(--glow-focus); }

/* ── rail ─────────────────────────────────────────────────────────────────── */
.nexus-rail {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r3);
  /* Depth from a real shadow instead of a violet halo. */
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55), var(--glass-sheen);
  /* ⚠ The rail was opaque (0.94) and had NO backdrop-filter. Moving it onto
     --surface-1 made it 0.72 translucent — translucent WITHOUT blur means the
     animating orb shows through raw behind the labels, which reads as muddy,
     not as glass. It now gets the same treatment as the header and window so
     the three pieces of chrome are one material. */
  backdrop-filter: var(--glass);
  -webkit-backdrop-filter: var(--glass);
}
.rail-head {
  padding: var(--s3) var(--s4);
  font-size: 11px;
  letter-spacing: 0.26em;
  color: var(--text-dim);
  border-bottom: 1px solid var(--line);
}
.rail-body { gap: var(--s1); padding: var(--s2); }
.rail-item {
  position: relative;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  padding: var(--s2) var(--s3);
  color: var(--text-mid);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r1);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.rail-item:hover { background: var(--surface-2); color: var(--text); }
/* Selection reads as a precise marker + contrast, NOT a 32%-opacity violet
   wash across the whole row. */
.rail-item.sel {
  background: var(--surface-3);
  border-color: var(--line);
  color: var(--text);
  font-weight: 600;
}
.rail-item.sel::before {
  content: '';
  position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 2px; border-radius: 0 2px 2px 0;
  background: var(--text-accent);
}
.rail-item:focus-visible { outline: none; box-shadow: var(--glow-focus); }

/* ── panel shell ──────────────────────────────────────────────────────────── */
/* ⚠ Only the LOOK is touched here. The compositing trio above stays untouched. */
.nexus-window {
  background: var(--surface-1);
  border: 1px solid var(--line);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.60), var(--glass-sheen);
  /* S77: snappier — the entrance used gate-in (a blur(8px) filter on top of the glass
     backdrop-filter: expensive, and it stuttered). A plain lift-and-fade, 160 ms. */
  animation: win-in 160ms var(--ease) both;
  transition: opacity 160ms var(--ease), transform 160ms var(--ease);
}
@keyframes win-in {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to   { opacity: 1; transform: translateZ(0); }
}
.nexus-window.out { opacity: 0; transform: translateY(6px) scale(0.99); }
@media (prefers-reduced-motion: reduce) { .nexus-window { animation: none; transition: none; } }

/* Scrollbars: hairlines, same language as the borders. */
#nexus-stream::-webkit-scrollbar-thumb,
.rail-body::-webkit-scrollbar-thumb { background: var(--line-strong); }

/* ══════════════════════════════════════════════════════════════════════════
   S43 — PHONE LAYOUT FIXES (from Nawar's screenshots)
   ══════════════════════════════════════════════════════════════════════════ */

/* ⚠ THE SEND BUTTON WAS BEING PUSHED OFF-SCREEN. Two causes, both needed:
   1. #nexus-send never had flex-shrink:0 (mic and voice-toggle both did), so it
      was the only control the flexbox was allowed to squeeze.
   2. `zoom` on the input bar multiplies its RENDERED size. The bar is fixed,
      centred, and sized from the viewport — so at zoom 1.15 a 544px bar becomes
      ~625px on a 576px screen and the right end simply leaves the display.
      Scale the TEXT on phones, never the box. */
#nexus-send  { flex-shrink: 0; }
#nexus-input { min-width: 0; }

/* ⚠ The shared button row never wrapped, so any row whose buttons exceeded the
   panel width ran off the right edge instead of flowing to a second line —
   found on the vault gaps alert ("⟳ CHECK AGAIN" + "last checked …"). Wrapping
   it here fixes every panel at once, which is the point of a shared class. */
.agent-btns { flex-wrap: wrap; align-items: center; row-gap: var(--s2); }

@media (max-width: 700px) {
  body[data-fontsize="large"] #nexus-inputbar { zoom: 1; font-size: 1.06em; }
  body[data-fontsize="small"] #nexus-inputbar { zoom: 1; }
  #nexus-inputbar {
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
    padding: 6px;
    gap: 6px;
  }
  /* A 64px circle is a third of the remaining width on a phone. */
  #nexus-mic { width: 50px; height: 50px; }
  #nexus-send, #nexus-voice-toggle { width: 40px; height: 40px; }

  /* Header: the wordmark + state label + identity chip + four buttons do not
     fit at 576px. The dot already carries the state, so the word is redundant
     first, and the chip loses its padding before anything gets clipped. */
  #nexus-header { padding: 0 var(--s2); }
  .hdr-left { gap: var(--s2); min-width: 0; }
  #nexus-dot-label { display: none; }
  .wordmark { letter-spacing: 0.24em; font-size: 12px; }
  .nx-idchip {
    font-size: 11px;
    padding: 2px var(--s2);
    margin-right: 0;
    max-width: 34vw;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .ghost-btn { width: 30px; height: 30px; font-size: 13px; }
  .hdr-right { gap: 2px; }
}

/* ── grids: one rhythm for every "wall of things" ─────────────────────────── */
.nx-grid        { display: grid; gap: var(--s3); }
.nx-grid-posters{ grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.nx-grid-tiles  { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }

/* ── a horizontal shelf that scrolls itself, never the panel ──────────────── */
.nx-shelf {
  display: flex;
  gap: var(--s3);
  overflow-x: auto;
  padding-bottom: var(--s2);
  scrollbar-width: thin;
}
.nx-shelf > * { flex: 0 0 auto; }

/* ── poster / media card ──────────────────────────────────────────────────── */
.nx-poster {
  aspect-ratio: 2 / 3;
  border-radius: var(--r2);
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.nx-poster img { width: 100%; height: 100%; object-fit: cover; }
.nx-card:hover .nx-poster { border-color: var(--line-strong); }
/* The badge sits ON the artwork, so it needs its own contrast floor rather
   than a surface token — artwork is not a predictable background. */
.nx-badge {
  position: absolute; right: var(--s1); bottom: var(--s1);
  padding: 1px var(--s2);
  border-radius: var(--r1);
  background: rgba(6, 5, 12, 0.78);
  color: var(--text);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.nx-card       { cursor: pointer; display: flex; flex-direction: column; gap: var(--s1); }
.nx-card-title {
  font-size: 12px; color: var(--text); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ── list row: the compact alternative to a card grid ─────────────────────── */
.nx-row {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s2);
  border-radius: var(--r1);
  background: var(--surface-1);
  border: 1px solid transparent;      /* reserved, so hover doesn't shift layout */
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.nx-row + .nx-row { margin-top: var(--s1); }
.nx-row:hover     { background: var(--surface-3); border-color: var(--line); }
.nx-row-main      { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nx-row-title     {
  font-size: 12.5px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nx-row.is-clickable { cursor: pointer; }
.nx-row.is-muted     { opacity: 0.62; }

/* ── tile: a folder / category / destination ──────────────────────────────── */
.nx-tile {
  cursor: pointer;
  padding: var(--s4) var(--s3);
  border-radius: var(--r2);
  text-align: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: var(--s1);
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.nx-tile:hover { background: var(--surface-3); border-color: var(--line-strong); transform: translateY(-1px); }
.nx-tile-icon  { font-size: 18px; line-height: 1; }

/* ── notice: an alert strip that stays quiet unless it is a real state ────── */
.nx-notice {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s2) var(--s3);
  border-radius: var(--r2);
  border: 1px solid var(--line);
  background: var(--surface-1);
  font-size: 11.5px;
  color: var(--text-mid);
}
.nx-notice-main { flex: 1; min-width: 0; }
.nx-notice.is-clickable { cursor: pointer; }
/* Severity is the ONLY thing that adds colour. Default has none on purpose. */
.nx-notice.is-warn   { border-color: rgba(255, 196, 107, 0.30); background: rgba(255, 196, 107, 0.06); }
.nx-notice.is-warn   .nx-notice-title { color: #FFC46B; }
.nx-notice.is-alert  { border-color: rgba(255, 107, 138, 0.34); background: rgba(255, 107, 138, 0.05); }
.nx-notice.is-alert  .nx-notice-title { color: #FF6B8A; }
.nx-notice-title { font-size: 12px; color: var(--text); font-weight: 600; }

/* ── gauge: reuse the SYSTEM panel's hairline bar everywhere ──────────────── */
.nx-gauge      { height: 3px; border-radius: 2px; background: rgba(var(--acc-line), .10); overflow: hidden; }
.nx-gauge-fill { height: 100%; border-radius: 2px; background: var(--violet-bright);
                 transition: width var(--t-mid) var(--ease); }
.nx-gauge-fill.is-warn  { background: #FFC46B; }
.nx-gauge-fill.is-alert { background: #FF6B8A; }

/* ── section: a labelled block, same shell as .sys-section ────────────────── */
.nx-block {
  border: 1px solid var(--line);
  border-radius: var(--r2);
  background: var(--surface-1);
  padding: var(--s3);
  display: flex; flex-direction: column; gap: var(--s2);
}

/* ── stat tile: one big number + its label. The study panel's core unit ───── */
.nx-stat {
  flex: 1; min-width: 96px;
  padding: var(--s3);
  border-radius: var(--r2);
  background: var(--surface-2);
  border: 1px solid var(--line);
  transition: border-color var(--t-fast) var(--ease);
}
.nx-stat:hover { border-color: var(--line-strong); }
.nx-stat-value {
  font: 700 22px 'Space Grotesk', sans-serif;
  line-height: 1;
  color: var(--cyan);
  font-variant-numeric: tabular-nums;
}
.nx-stat-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--text-dim); margin-top: var(--s1);
}
.nx-stat-sub { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.nx-stat-value.is-ok   { color: var(--state-ok); }
.nx-stat-value.is-warn { color: var(--state-warn); }
.nx-stat-value.is-bad  { color: var(--state-bad); }

/* ── labelled meter: a gauge with a caption line above it ─────────────────── */
.nx-meter      { margin: var(--s2) 0; }
.nx-meter-top  {
  display: flex; justify-content: space-between;
  font-size: 11.5px; color: var(--text-mid);
  margin-bottom: var(--s1);
  font-variant-numeric: tabular-nums;
}
.nx-meter-right { color: var(--text-dim); }

/* ── sparkline: 30-day activity, height = volume, tint = quality ──────────── */
.nx-spark      { display: flex; align-items: flex-end; gap: 2px; height: 44px; margin: var(--s2) 0; }
.nx-spark-bar  { flex: 1; min-width: 3px; border-radius: 2px 2px 0 0; background: var(--text-dim); }
.nx-spark-bar.is-ok   { background: var(--state-ok); }
.nx-spark-bar.is-warn { background: var(--state-warn); }
.nx-spark-bar.is-bad  { background: var(--state-bad); }

/* ── STUDY: the readiness banner ──────────────────────────────────────────
   The band IS the state, so it drives every colour here through one
   --band variable. Previously five hexes were mixed inline with '55'/'22'
   alpha suffixes that no other panel used. */
.nx-readiness {
  --band: var(--cyan);
  padding: var(--s4);
  margin-bottom: var(--s3);
  border-radius: var(--r3);
  background: var(--surface-2);
  /* Fallback FIRST: color-mix needs Chromium 111+. The desktop shell is 150,
     but the phone PWA can be older, and an unsupported colour would drop the
     declaration entirely and leave the card with no border at all. */
  border: 1px solid var(--line-strong);
  border-color: color-mix(in srgb, var(--band) 42%, transparent);
  display: flex; flex-direction: column; gap: var(--s2);
}
.nx-readiness[data-band="strong"]     { --band: var(--state-ok); }
.nx-readiness[data-band="on-track"]   { --band: #8FE388; }
.nx-readiness[data-band="borderline"] { --band: var(--state-warn); }
.nx-readiness[data-band="not-ready"]  { --band: var(--state-bad); }
.nx-readiness[data-band="warming-up"] { --band: #B9A6FF; }
.nx-readiness-top { display: flex; align-items: baseline; gap: var(--s2); }
.nx-readiness-marks {
  font: 700 34px 'Space Grotesk', sans-serif;
  color: var(--band);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.nx-band-badge {
  align-self: flex-start;
  font: 600 10px sans-serif; letter-spacing: 0.16em;
  padding: 3px var(--s3);
  border-radius: 999px;
  color: var(--band);
  /* Same fallback-first pattern as the card above. */
  background: var(--surface-3);
  background: color-mix(in srgb, var(--band) 13%, transparent);
  border: 1px solid var(--line-strong);
  border-color: color-mix(in srgb, var(--band) 42%, transparent);
}
.nx-readiness-line {
  position: relative; height: 6px; border-radius: 3px;
  background: rgba(var(--acc-line), 0.12);
}
.nx-readiness-fill {
  height: 100%; border-radius: 3px; background: var(--band);
  transition: width var(--t-mid) var(--ease);
}
/* The pass mark is a hard threshold — it stays pure white so it reads as a
   fixed reference, never as part of the band's colour story. */
.nx-readiness-tick {
  position: absolute; top: -3px; bottom: -3px; width: 2px; background: #fff;
}

/* Highlight for "this row is you" in head-to-head. */
.nx-row.is-self  { background: rgba(var(--acc2b), 0.07); border-color: rgba(var(--acc2b), 0.24); }
.nx-h2h-name     { flex: 0 0 90px; font-weight: 600; font-size: 12px; color: var(--text); }
.nx-row.is-self .nx-h2h-name { color: var(--cyan); }
.nx-row > .nx-meter { flex: 1; }

/* IBQ marker — a solid chip, so it needs a dark ink rather than a text token. */
.nx-ibq-badge {
  display: inline-block; margin-left: var(--s2);
  font: 700 10px sans-serif; letter-spacing: 0.14em;
  padding: 2px var(--s2);
  border-radius: var(--r1);
  color: #0A0612;
  background: var(--cyan);
}
/* Scanned figures keep a white backing — they are crops of printed pages and
   read wrong on a dark surface. */
.nx-figure { max-width: 100%; border-radius: var(--r1); margin: var(--s2) 0; background: #fff; }

.nx-grid-cards  { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.nx-cardtile {
  cursor: pointer; border-radius: var(--r2); overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--line);
  transition: border-color var(--t-fast) var(--ease);
}
.nx-cardtile:hover { border-color: var(--line-strong); }
.nx-cardtile img   { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
.nx-cardtile-cap   {
  font-size: 11px; padding: var(--s1) var(--s2); color: var(--text-mid);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.nx-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(3, 2, 10, 0.92);
  display: flex; align-items: center; justify-content: center;
  padding: var(--s5); cursor: zoom-out;
}
.nx-lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--r2);
                   box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6); }

/* ── left-accent note: cyber / social / terminal all hand-wrote
   `borderLeft = '3px solid <hex>'`. One class, severity as a modifier. ────── */
.nx-lead            { border-left: 3px solid var(--line-strong); }
.nx-lead.is-ok      { border-left-color: var(--state-ok); }
.nx-lead.is-bad     { border-left-color: var(--state-bad); }
.nx-lead.is-warn    { border-left-color: var(--state-warn); }
.nx-lead.is-info    { border-left-color: var(--cyan); }
.nx-lead.is-accent  { border-left-color: var(--violet-bright); }

/* ── status text: one vocabulary for every job/goal/queue state ──────────── */
.nx-status              { font-variant-numeric: tabular-nums; }
.nx-status.is-pending   { color: var(--state-warn); }
.nx-status.is-running   { color: var(--cyan); }
.nx-status.is-done      { color: var(--state-ok); }
.nx-status.is-failed    { color: var(--domain-red); }
.nx-status.is-cancelled { color: var(--text-dim); }

/* ── console / raw-output surface (log boxes, sandbox stdout) ────────────── */
.nx-console {
  max-height: 240px; overflow: auto;
  background: var(--surface-0);
  color: #C9F5E4;                    /* terminal ink — deliberately not --text */
  border: 1px solid var(--line);
  border-radius: var(--r1);
  padding: var(--s2);
  margin-top: var(--s2);
  font-family: 'Consolas', 'Cascadia Code', monospace;
  font-size: 12px;
  white-space: pre-wrap;
}

/* ── chip: a small labelled pill (identity, tags) ─────────────────────────── */
.nx-chip {
  display: inline-block;
  padding: 1px var(--s2);
  border-radius: var(--r1);
  font-size: 11px;
  color: var(--text-dim);
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.nx-chip.is-known { color: var(--cyan); background: rgba(var(--acc2b), .10); border-color: rgba(var(--acc2b), .25); }

/* Identity chip in the header — larger than .nx-chip, same idea. */
.nx-idchip {
  font: 600 12px 'Space Grotesk', sans-serif; letter-spacing: 0.04em;
  padding: 3px var(--s3); border-radius: 999px; margin-right: var(--s2);
  white-space: nowrap;
  color: var(--text-mid);
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.nx-idchip.is-known {
  color: var(--cyan);
  background: rgba(var(--acc2b), 0.10);
  border-color: rgba(var(--acc2b), 0.25);
}

/* ── HUD legibility (S43) ─────────────────────────────────────────────────
   At high glass the panel fill is GONE, so contrast has to come from the
   glyphs themselves. --hud-shadow is 'none' at low settings, so this costs
   nothing until it is needed. */
.nexus-window, .nexus-rail, #nexus-header, #nexus-inputbar { text-shadow: var(--hud-shadow, none); }

/* ── settings slider (S43 — the GLASS control) ────────────────────────────── */
.set-slider     { display: flex; flex-direction: column; gap: var(--s2); }
.set-slider-top {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11px; letter-spacing: 0.18em; color: var(--text-dim);
  text-transform: uppercase;
}
.set-slider-val { color: var(--text); font-size: 12px; font-variant-numeric: tabular-nums; }
.set-slider .win-btn { align-self: flex-start; }
.set-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 3px; border-radius: 2px;
  background: var(--line-strong);
  outline: none; cursor: pointer;
}
/* The thumb is the one place a little glow earns its keep — it is the thing
   being grabbed, so it reads as a control rather than decoration. */
.set-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--text-accent);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 0 10px rgba(var(--acc), 0.55);
  transition: transform var(--t-fast) var(--ease);
}
.set-range::-webkit-slider-thumb:hover { transform: scale(1.15); }
.set-range::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%; border: none;
  background: var(--text-accent);
  box-shadow: 0 0 10px rgba(var(--acc), 0.55);
}
.set-range:focus-visible { box-shadow: var(--glow-focus); }

.nx-statrow     { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s2); }
.nx-accent      { color: var(--cyan); }
.nx-tile-left   { text-align: left; }
.nx-plain-list  { list-style: none; padding: 0; margin: 0; }

/* Episode designator — fixed width so S01E01…S09E328 stay in one column. */
.nx-ep-tag {
  flex: 0 0 60px;
  font-size: 11.5px; font-weight: 600;
  color: var(--text-accent);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

/* ── key/value line for dense readouts ────────────────────────────────────── */
.nx-kv {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s3);
  padding: var(--s1) 0;
  border-bottom: 1px solid rgba(var(--acc-line), .06);
  font-size: 11.5px;
}
.nx-kv:last-child { border-bottom: none; }
.nx-kv-k { color: var(--text-dim); }
.nx-kv-v { color: var(--text); font-variant-numeric: tabular-nums; }

/* ── S58 — CODER PANEL ─────────────────────────────────────────────────────
   The agentic coding session that replaced PROJECTS + SANDBOX. Reuses the
   existing panel primitives (.win-input, .win-btn, .agent-*) on purpose so it
   looks like the rest of the Nexus rather than a bolted-on console.
   ⚠ The transcript is the tall element and must be the ONLY thing that
   scrolls: the input has to stay reachable while a long turn is running, and a
   panel that scrolls as a whole pushes it off the bottom exactly when work is
   happening. Hence flex:1 + min-height:0 on the log, flex-shrink:0 elsewhere. */
.coder-log {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 2px;
}
.coder-status { flex-shrink: 0; padding: 2px 0 4px; }
.coder-msg {
  border: 1px solid rgba(var(--acc-hi), 0.12);
  border-left-width: 2px;
  border-radius: 8px;
  background: rgba(var(--bg2), 0.5);
  padding: 6px 9px;
  flex-shrink: 0;
}
.coder-msg-head {
  font-size: 11px;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--text-dim);
  margin-bottom: 3px;
}
.coder-msg-body {
  font-size: 11px;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  font-family: inherit;
  max-height: 260px;      /* a 2,000-line file must not become the panel */
  overflow-y: auto;
}
.coder-msg.user      { border-left-color: rgba(var(--acc-hi), 0.75); }
.coder-msg.assistant { border-left-color: rgba(120, 200, 255, 0.65); }
.coder-msg.tool      { border-left-color: rgba(255, 180, 84, 0.65); }
.coder-msg.ok        { border-left-color: rgba(79, 255, 180, 0.55); }
.coder-msg.bad       { border-left-color: rgba(214, 54, 54, 0.7); }
.coder-msg.result .coder-msg-body { font-family: ui-monospace, Consolas, monospace;
                                    font-size: 11px; color: var(--text-dim); }
/* ⚠ The permission card is the one thing in this panel that must never be
   mistaken for log noise — it is the moment Nawar decides what leaves the
   machine, so it is the only amber-filled element here. */
.coder-msg.gate {
  border: 1px solid rgba(255, 180, 84, 0.55);
  border-left-width: 3px;
  background: rgba(255, 180, 84, 0.07);
}
.coder-input { resize: vertical; min-height: 56px; font-family: inherit; }
.coder-modal {
  border: 1px solid rgba(var(--acc-hi), 0.25);
  border-radius: 8px;
  padding: 8px 10px;
  margin-top: 8px;
  background: rgba(var(--bg2), 0.75);
  flex-shrink: 0;
}
.coder-models { display: flex; flex-direction: column; gap: 6px; }

/* ═══ S73 — HOME LAYOUT FIXES + IMAGE ATTACH (from Nawar's screenshot) ═══════
   ⚠ Measured problems, each fixed below:
   1. "LISTENING" shown twice — header label + a floating bottom-left readout.
   2. Input bar controls not vertically centred (64px mic, 42px buttons, no
      align-items) → ♀ and ➤ hugged the top edge.
   3. The context meter (bottom:76) and tool chips (bottom:96) sat INSIDE the
      80px-tall bar, so they overlapped it the moment they appeared.
   4. "TAP TO SPEAK" jammed against the window edge (bottom:2px).
   5. PANELS rail started 24px lower than the activity panel and stopped 96px
      short of the bottom, clipping its list. */
#nexus-state-label { display: none; }            /* the header already carries state */
#nexus-mic-hint    { display: none; }            /* the placeholder + mic tooltip say it */

#nexus-inputbar {
  bottom: 16px;
  align-items: center;
  gap: 6px;
  padding: 6px;
}
#nexus-mic { width: 48px; height: 48px; }        /* bar = 48 + 12 = 60px tall */
#nexus-voice-toggle, #nexus-send, #nexus-attach, #nexus-camera { width: 40px; height: 40px; }
#nexus-ctx       { bottom: 86px; }               /* bar top is at 76px */
#nexus-toolchips { bottom: 108px; }
#nexus-stream    { bottom: 104px; }
#nexus-activity  { top: 52px; }                  /* header is 52px since the S43 re-skin */

.nexus-rail { top: 64px; bottom: 92px; }
/* Wide enough that the centred input bar can't reach the rail → use full height. */
@media (min-width: 1000px) { .nexus-rail { bottom: 16px; } }

#nexus-attach, #nexus-camera {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line, rgba(var(--acc-hi), 0.25));
  border-radius: 12px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: color var(--t-fast, .15s) var(--ease, ease),
              background var(--t-fast, .15s) var(--ease, ease),
              border-color var(--t-fast, .15s) var(--ease, ease);
}
#nexus-attach:hover { color: var(--text); background: var(--surface-2, rgba(255,255,255,.05)); }
#nexus-attach.on    { color: var(--cyan); border-color: rgba(var(--acc2b), 0.35); }
#nexus-attach:focus-visible { outline: none; box-shadow: var(--glow-focus); }

#nexus-camera:hover { color: var(--emerald, #44cf6e); background: rgba(68,207,110,0.08); border-color: rgba(68,207,110,0.35); }
#nexus-camera.glancing { color: #fff; background: rgba(68,207,110,0.35); border-color: var(--emerald, #44cf6e); animation: pulse 1s infinite; }
#nexus-camera:focus-visible { outline: none; box-shadow: var(--glow-focus); }

.nexus-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 7, 14, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: fadeIn 0.18s ease-out;
}
.nexus-modal-overlay[hidden] {
  display: none !important;
}

/* ── Universal Lightbox ────────────────────────────────────────── */
.nexus-lightbox-content {
  position: relative;
  max-width: 92vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--surface-1, #10141f);
  border: 1px solid rgba(var(--acc2b, 45, 175, 235), 0.35);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.75);
  border-radius: 16px;
  overflow: hidden;
  animation: scaleUp 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.nexus-lightbox-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background 0.15s, transform 0.15s;
}
.nexus-lightbox-close:hover {
  background: rgba(230, 50, 50, 0.85);
  transform: scale(1.08);
}
#nexus-lightbox-img {
  max-width: 88vw;
  max-height: 78vh;
  object-fit: contain;
  display: block;
  border-radius: 4px;
}
.nexus-lightbox-bar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  background: var(--surface-2, #181d2c);
  font-size: 13px;
  color: var(--text-dim, #a0aec0);
  box-sizing: border-box;
}
.nexus-lightbox-btn {
  padding: 5px 14px;
  background: rgba(var(--acc2b, 45, 175, 235), 0.18);
  border: 1px solid rgba(var(--acc2b, 45, 175, 235), 0.45);
  color: var(--text, #fff);
  border-radius: 8px;
  text-decoration: none;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s;
}
.nexus-lightbox-btn:hover {
  background: rgba(var(--acc2b, 45, 175, 235), 0.35);
}

/* ── Ciel Eye Studio Space ──────────────────────────────────────── */
.ciel-eye-card {
  width: 900px;
  max-width: 95vw;
  max-height: 92vh;
  background: var(--surface-1, #10141f);
  border: 1px solid rgba(68, 207, 110, 0.35);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.75), 0 0 30px rgba(68, 207, 110, 0.12);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: scaleUp 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.ciel-eye-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: rgba(16, 20, 31, 0.95);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.ciel-eye-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ciel-eye-icon {
  font-size: 20px;
}
.ciel-eye-title h2 {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  color: #fff;
  letter-spacing: 0.5px;
}
.ciel-eye-badge {
  font-size: 11px;
  padding: 2px 8px;
  background: rgba(68, 207, 110, 0.15);
  border: 1px solid rgba(68, 207, 110, 0.35);
  color: var(--emerald, #44cf6e);
  border-radius: 12px;
  font-weight: 500;
}
.nexus-modal-close {
  background: transparent;
  border: none;
  color: var(--text-dim, #888);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  transition: color 0.15s, background 0.15s;
}
.nexus-modal-close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.ciel-eye-body {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 18px;
  padding: 18px 20px;
  overflow-y: auto;
  align-items: start;
}
@media (max-width: 768px) {
  .ciel-eye-body {
    grid-template-columns: 1fr;
  }
}

.ciel-eye-viewfinder-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ciel-eye-viewfinder {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #080a10;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
#ciel-eye-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}
#ciel-eye-img.visible {
  display: block;
  z-index: 2;
}
#ciel-eye-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
}
#ciel-eye-video[hidden],
#ciel-eye-img[hidden] {
  display: none !important;
}
#ciel-eye-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
}
.ciel-eye-laser {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--emerald, #44cf6e), transparent);
  box-shadow: 0 0 12px var(--emerald, #44cf6e);
  opacity: 0.7;
  animation: laserScan 2.6s ease-in-out infinite;
  pointer-events: none;
  z-index: 4;
}
@keyframes laserScan {
  0% { top: 4%; opacity: 0; }
  15% { opacity: 0.85; }
  85% { opacity: 0.85; }
  100% { top: 96%; opacity: 0; }
}
.ciel-eye-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--text-dim, #718096);
  font-size: 13px;
  padding: 20px;
  text-align: center;
  background: #080a10;
  z-index: 10;
}
.ciel-eye-placeholder[hidden] {
  display: none !important;
}
.ciel-eye-radar {
  width: 44px;
  height: 44px;
  border: 2px solid rgba(68, 207, 110, 0.25);
  border-top-color: var(--emerald, #44cf6e);
  border-radius: 50%;
  animation: spin 1.2s linear infinite;
}
.ciel-eye-hud-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(8, 10, 16, 0.88);
  border: 1px solid rgba(68, 207, 110, 0.5);
  color: var(--emerald, #44cf6e);
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  backdrop-filter: blur(4px);
}

.ciel-eye-viewfinder-controls {
  display: flex;
  gap: 10px;
}
.ciel-eye-action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 14px;
  background: var(--surface-2, rgba(255, 255, 255, 0.06));
  border: 1px solid var(--line, rgba(255, 255, 255, 0.12));
  color: #fff;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.ciel-eye-action-btn:hover {
  background: var(--surface-3, rgba(255, 255, 255, 0.12));
}
.ciel-eye-action-btn.primary {
  background: rgba(68, 207, 110, 0.18);
  border-color: rgba(68, 207, 110, 0.5);
  color: var(--emerald, #44cf6e);
}
.ciel-eye-action-btn.primary:hover {
  background: rgba(68, 207, 110, 0.28);
}
.ciel-eye-action-btn:active {
  transform: scale(0.98);
}

.ciel-eye-sidebar {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ciel-eye-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ciel-eye-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-dim, #718096);
}
.ciel-eye-bio-card {
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ciel-eye-bio-name {
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
}
.ciel-eye-bio-score {
  font-size: 12px;
  color: var(--emerald, #44cf6e);
}

.ciel-eye-modes {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ciel-eye-mode-btn {
  width: 100%;
  text-align: left;
  padding: 7px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: var(--text, #e2e8f0);
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ciel-eye-mode-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}
.ciel-eye-mode-btn.active {
  background: rgba(68, 207, 110, 0.14);
  border-color: rgba(68, 207, 110, 0.5);
  color: #fff;
  font-weight: 500;
}

.ciel-eye-input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #fff;
  font-size: 12px;
  outline: none;
  transition: border-color 0.15s;
}
.ciel-eye-input:focus {
  border-color: var(--emerald, #44cf6e);
}

.ciel-eye-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
.ciel-eye-btn {
  flex: 1;
  padding: 9px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.ciel-eye-btn.accent {
  background: var(--emerald, #44cf6e);
  color: #080a10;
  border-color: var(--emerald, #44cf6e);
  font-weight: 600;
}
.ciel-eye-btn.accent:hover {
  background: #50e47d;
}
.ciel-eye-btn:active {
  transform: scale(0.98);
}

.ciel-eye-output-drawer {
  padding: 14px 20px;
  background: rgba(8, 10, 16, 0.95);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  max-height: 180px;
  overflow-y: auto;
}
.ciel-eye-output-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-dim, #718096);
  font-weight: 600;
  margin-bottom: 6px;
}
.ciel-eye-mini-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 6px;
  cursor: pointer;
}
.ciel-eye-output-text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text, #e2e8f0);
  white-space: pre-wrap;
}

#nexus-attach-thumb {
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
#nexus-attach-thumb:hover {
  transform: scale(1.08);
  box-shadow: 0 0 10px rgba(var(--acc2b, 45, 175, 235), 0.5);
}
.card-img {
  cursor: pointer;
  transition: opacity 0.15s, transform 0.15s;
}
.card-img:hover {
  opacity: 0.95;
  transform: scale(1.01);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes scaleUp {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

#nexus-attach-preview {
  position: relative;
  flex-shrink: 0;
  width: 40px; height: 40px;
}
#nexus-attach-preview[hidden] { display: none; }
#nexus-attach-thumb {
  width: 40px; height: 40px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(var(--acc2b), 0.35);
  display: block;
}
#nexus-attach-clear {
  position: absolute; top: -6px; right: -6px;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1px solid var(--line, rgba(var(--acc-hi), 0.25));
  background: var(--void);
  color: var(--text);
  font-size: 11px; line-height: 1;
  cursor: pointer;
}
.card-img {
  display: block;
  max-width: min(240px, 100%);
  max-height: 200px;
  border-radius: 8px;
  margin: 2px 0 6px;
  border: 1px solid var(--line, rgba(var(--acc-hi), 0.2));
}
.relay-card { border-color: rgba(var(--acc2b), 0.30); }
.relay-card .card-role { color: var(--cyan); }
.relay-btns { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; align-items: center; }
body.drop-hover #nexus-inputbar {
  border-color: var(--cyan);
  box-shadow: 0 0 0 1px rgba(var(--acc2b), 0.35), 0 6px 28px rgba(0, 0, 0, 0.4);
}

@media (max-width: 700px) {
  #nexus-mic { width: 44px; height: 44px; }
  #nexus-send, #nexus-voice-toggle, #nexus-attach { width: 38px; height: 38px; }
  #nexus-attach-preview, #nexus-attach-thumb { width: 38px; height: 38px; }
  #nexus-ctx { bottom: 80px; }
  #nexus-stream { bottom: 98px; }
}

/* ═══ S73 — "GOOD", the room (nexus-room.js) ═══════════════════
   Docked on the HOME view's left. Glass like the activity panel, so it
   reads as part of the shell, not another pop-up window. */
.room-btn { position: relative; }
.room-badge {
  position: absolute; top: -3px; right: -4px;
  min-width: 15px; padding: 1px 4px; border-radius: 8px;
  font-size: 10px; line-height: 13px; text-align: center;
  background: var(--cyan); color: var(--void);
}
.room-panel {
  position: fixed; left: 16px; top: 64px; bottom: 96px;
  width: min(360px, calc(100vw - 32px));
  z-index: 16;
  display: flex; flex-direction: column;
  background: var(--panel);
  backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass);
  border: 1px solid var(--panel-border); border-radius: 14px;
  box-shadow: var(--glass-sheen), 0 12px 40px rgba(0, 0, 0, 0.35);
  animation: entry-in 0.35s var(--ease-spring);
}
.room-panel[hidden] { display: none !important; }
@media (min-width: 701px) { body.rail-open .room-panel { left: 244px; } }
.room-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px 8px; border-bottom: 1px solid var(--panel-border);
}
.room-name {
  font-family: 'Space Grotesk', sans-serif; font-weight: 600;
  letter-spacing: 0.3em; color: var(--text-accent); margin-right: 10px;
}
.room-sub { font-size: 11px; color: var(--text-dim); }
.room-note { font-size: 11px; line-height: 1.4; color: var(--text-dim); padding: 8px 14px 4px; }
.room-feed { flex: 1; overflow-y: auto; padding: 8px 12px; scrollbar-width: thin; }
.room-empty { font-size: 12px; color: var(--text-dim); padding: 18px 6px; text-align: center; }
.room-msg {
  margin: 6px 0; padding: 7px 10px 8px; border-radius: 10px;
  border-left: 2px solid var(--text-dim); background: rgba(255, 255, 255, 0.03);
}
.room-msg.nawar  { border-left-color: var(--cyan); }
.room-msg.ciel   { border-left-color: var(--violet-bright); background: rgba(var(--acc), 0.10); }
.room-msg.claude { border-left-color: #E8A45C; background: rgba(232, 164, 92, 0.08); }
.room-who {
  display: flex; gap: 8px; align-items: baseline;
  font-family: 'Space Grotesk', sans-serif; font-size: 11px;
  letter-spacing: 0.18em; color: var(--text-dim); margin-bottom: 3px;
}
.room-msg.claude .room-who { color: #E8A45C; }
/* S84: the helper agents (Antigravity) hand work over in this room too */
.room-msg.antigravity { border-left-color: #6FB7E8; background: rgba(111, 183, 232, 0.08); }
.room-msg.antigravity .room-who { color: #6FB7E8; }
.room-msg.ciel .room-who   { color: var(--text-accent); }
.room-kind { letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.8; }
.room-time { margin-left: auto; letter-spacing: 0; }
.room-text { font-size: 12.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.room-trace { font-size: 11px; color: var(--text-dim); margin-top: 4px; }
.room-input { display: flex; gap: 6px; padding: 10px 12px 12px; border-top: 1px solid var(--panel-border); }
.room-input .win-input { flex: 1; }
@media (max-width: 700px) {
  .room-panel { left: 8px; right: 8px; width: auto; top: 60px; bottom: 90px; }
}

/* ═══ S73 — FAMILY inbox (nexus-family.js) ═════════════════════
   Same glass as the GOOD room, docked on the RIGHT so both can be open. */
.family-panel { left: auto; right: 16px; }
@media (min-width: 701px) { body.rail-open .family-panel { left: auto; } }
@media (max-width: 700px) { .family-panel { left: 8px; right: 8px; } }
.fam-msg {
  margin: 8px 0; padding: 8px 10px 9px; border-radius: 10px; max-width: 92%;
  border-left: 2px solid var(--text-dim); background: rgba(255, 255, 255, 0.03);
}
.fam-msg.mine   { margin-left: auto; border-left-color: var(--cyan); background: rgba(var(--acc2b), 0.05); }
.fam-msg.theirs { border-left-color: #F4A6C8; background: rgba(244, 166, 200, 0.08); }
.fam-msg.theirs .room-who { color: #F4A6C8; }
.fam-msg.cancelled .fam-text { opacity: 0.5; text-decoration: line-through; }
.fam-msg.draft { border-left-style: dashed; }
.fam-status { font-size: 11px; letter-spacing: 0.12em; opacity: 0.85; }
.fam-msg.sent .fam-status   { color: #4FFFB4; }
.fam-msg.failed .fam-status { color: var(--domain-red); }
.fam-msg.draft .fam-status  { color: var(--cyan); }
.fam-text { font-size: 13px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.fam-btns { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.fam-btns .win-btn { padding: 4px 10px; font-size: 11px; }
.fam-edit { width: 100%; resize: vertical; font: inherit; font-size: 13px; line-height: 1.5; }
.fam-reply {
  display: flex; align-items: center; gap: 8px; padding: 6px 12px;
  border-top: 1px solid var(--panel-border); font-size: 11px; color: var(--text-dim);
}
.fam-reply[hidden] { display: none; }
.fam-reply-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ═══ S73 — chat polish (nexus-shell.js v0.8.0) ════════════════
   Header row with time, markdown for Ciel's replies, copy/retry actions. */
.card-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 5px; }
.card-head .card-role { margin-bottom: 0; }
.card-time {
  margin-left: auto; font-family: 'Space Grotesk', monospace; font-size: 11px;
  color: var(--text-dim); letter-spacing: 0.05em; user-select: none;
}
.card-text.md { white-space: normal; }
.card-text.md p { margin: 0 0 0.6em; }
.card-text.md p:last-child { margin-bottom: 0; }
.card-text.md ul, .card-text.md ol { margin: 0.2em 0 0.6em 1.3em; }
.card-text.md li { margin: 0.15em 0; }
.card-text.md .md-h { font-weight: 600; color: var(--text-accent); margin: 0.5em 0 0.3em; }
.card-text.md strong { color: #fff; font-weight: 600; }
.card-text.md a { color: var(--cyan); text-decoration: underline; text-underline-offset: 2px; }
.card-text.md code {
  font-family: 'JetBrains Mono', Consolas, monospace; font-size: 0.88em;
  padding: 1px 5px; border-radius: 4px; background: rgba(255, 255, 255, 0.08);
}
.md-code {
  position: relative; margin: 0.4em 0 0.7em; border-radius: 8px;
  background: rgba(0, 0, 0, 0.35); border: 1px solid var(--panel-border);
}
.md-code pre { margin: 0; padding: 10px 12px; overflow-x: auto; white-space: pre; }
.card-text.md .md-code pre code { padding: 0; background: none; font-size: 12.5px; }  /* must out-rank .card-text.md code */
.md-copy {
  position: absolute; top: 5px; right: 6px; padding: 2px 7px; border-radius: 5px;
  font-size: 11px; letter-spacing: 0.1em; cursor: pointer;
  color: var(--text-dim); background: rgba(var(--bg2), 0.8); border: 1px solid var(--panel-border);
}
.md-copy:hover { color: var(--text); }
.card-actions {
  display: flex; gap: 4px; margin-top: 6px; justify-content: flex-end;
  opacity: 0; transition: opacity 0.15s ease;
}
.nexus-card:hover .card-actions, .card-actions:focus-within { opacity: 1; }
@media (hover: none) { .card-actions { opacity: 0.7; } }
.card-act {
  padding: 2px 8px; border-radius: 6px; cursor: pointer; font-size: 11px;
  color: var(--text-dim); background: transparent; border: 1px solid transparent;
}
.card-act:hover { color: var(--text); border-color: var(--panel-border); background: rgba(255, 255, 255, 0.04); }
.nexus-card.error { border-color: rgba(214, 54, 54, 0.45); }
.nexus-card.error .card-role { color: var(--domain-red); }
.relay-edit { width: 100%; resize: vertical; font: inherit; font-size: 14px; line-height: 1.5; }
/* WO-086: inline edit in chat bubble */
.card-edit-wrap { margin-top: 6px; }
.card-edit-textarea {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: rgba(var(--bg2), 0.6);
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  padding: 8px 10px;
  outline: none;
}
.card-edit-textarea:focus { border-color: var(--text-accent); }
.card-edit-actions { display: flex; gap: 6px; margin-top: 6px; justify-content: flex-end; }
/* audit fixes (S73 live screenshot): a reply with code shrank the card to its prose width,
   clipping the code and putting COPY on top of it; family panel covered the activity column. */
.nexus-card:has(.md-code) { min-width: min(440px, 100%); }
.md-code pre { padding-top: 26px; }
body.panel-open .family-panel { right: 276px; }
@media (max-width: 1100px) { body.panel-open .family-panel { right: 16px; z-index: 17; } }

/* ═══ S73 — CONNECTORS panel (nexus-connectors.js) + chat Allow/Deny card ═══ */
.conn-note { font-size: 11px; line-height: 1.45; color: var(--text-dim); margin: 2px 0 8px; }
.conn-note.warn { color: #FFB454; }
.conn-card.off { opacity: 0.6; }
.conn-card.err { border-color: rgba(214, 54, 54, 0.45); }
.conn-state { font-size: 11px; letter-spacing: 0.12em; padding: 2px 6px; border-radius: 6px; white-space: nowrap; }
.conn-state.ok  { color: #4FFFB4; border: 1px solid rgba(79, 255, 180, 0.35); }
.conn-state.err { color: var(--domain-red); border: 1px solid rgba(214, 54, 54, 0.45); }
.conn-state.off { color: var(--text-dim); border: 1px solid var(--panel-border); }
.conn-state.ask { color: #FFB454; border: 1px solid rgba(255, 180, 84, 0.45); }
.conn-tools { margin: 6px 0 2px; }
.conn-tools summary { cursor: pointer; font-size: 11px; color: var(--text-accent); padding: 3px 0; }
.conn-tool {
  display: flex; gap: 10px; align-items: flex-start; justify-content: space-between;
  padding: 7px 0; border-top: 1px solid var(--panel-border);
}
.conn-tool-info { min-width: 0; flex: 1; }
.conn-tool-name { font-family: 'JetBrains Mono', Consolas, monospace; font-size: 11px; word-break: break-all; }
.conn-tool-desc { font-size: 11px; color: var(--text-dim); line-height: 1.4; margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.conn-modes { display: flex; flex-shrink: 0; border: 1px solid var(--panel-border); border-radius: 7px; overflow: hidden; }
.conn-mode {
  padding: 3px 8px; font-size: 11px; letter-spacing: 0.08em; cursor: pointer;
  background: transparent; color: var(--text-dim); border: 0;
}
.conn-mode + .conn-mode { border-left: 1px solid var(--panel-border); }
.conn-mode.on { color: var(--void); background: var(--text-accent); }
.conn-mode.on:nth-child(2) { background: #FFB454; }
.conn-mode.on:nth-child(3) { background: #4FFFB4; }
.conn-form textarea { resize: vertical; font-family: 'JetBrains Mono', Consolas, monospace; font-size: 11px; }
.conn-fields { display: flex; flex-direction: column; gap: 6px; }
.conn-fields[hidden] { display: none; }
.conn-args, .mcp-args {
  margin: 4px 0; padding: 6px 8px; border-radius: 6px; max-height: 160px; overflow: auto;
  background: rgba(0, 0, 0, 0.3); font-family: 'JetBrains Mono', Consolas, monospace; font-size: 11px;
  white-space: pre-wrap; word-break: break-word;
}
.conn-log-row { padding: 5px 0; border-top: 1px solid var(--panel-border); font-size: 11px; }
.conn-log-when { color: var(--text-dim); margin-right: 8px; }
.conn-log-row.error .conn-log-what, .conn-log-row.denied .conn-log-what { color: var(--domain-red); }
.conn-log-row.done .conn-log-what { color: #4FFFB4; }
.mcp-card { border-color: rgba(255, 180, 84, 0.40); }
.mcp-card .card-role { color: #FFB454; }

/* ═══ S73 — PEOPLE & DATES panel (nexus-people.js) ═══ */
.people-card.near { border-color: rgba(255, 180, 84, 0.45); }
.people-when { font-size: 11px; letter-spacing: 0.06em; color: #FFB454; white-space: nowrap; }
.people-detail { font-size: 12px; margin: 2px 0; }
.people-date-row { display: flex; gap: 10px; align-items: center; }
.people-date-row .win-input { flex: 1; color-scheme: dark; }
.people-yearly { font-size: 11px; color: var(--text-dim); white-space: nowrap; display: flex; gap: 5px; align-items: center; }

/* ═══ S73 — SCAM tab helpers (nexus-cyber.js) ═══ */
.nx-note { font-size: 11px; line-height: 1.45; color: var(--text-dim); margin: 6px 0; padding: 7px 9px;
  border-left: 2px solid var(--panel-border); background: rgba(255,255,255,0.03); border-radius: 6px; }
.nx-link { color: var(--cyan); text-decoration: underline; text-underline-offset: 2px; word-break: break-all; }
.agent-card.is-bad { border-color: rgba(214, 54, 54, 0.5); }
.agent-card.is-ok  { border-color: rgba(79, 255, 180, 0.35); }

/* ═══ S73 — FACES panel (nexus-faces.js) ═══ */
.face-strip { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.face-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--panel-border); background: rgba(255,255,255,0.04); }
.face-thumb:hover { border-color: var(--text-accent); }

.face-contact { display: flex; flex-wrap: wrap; gap: 5px; margin: 5px 0; }
.face-contact .win-input { flex: 1; min-width: 110px; font-size: 11px; padding: 4px 7px; }

/* ═══ S73 — GALLERY (nexus-gallery.js) — the memories vault ═══ */
.gal-bar { flex-wrap: wrap; padding-bottom: 4px; }   /* S74: no longer sticky — it pinned itself
   to the same spot as the tab bar and the two piled on top of each other */
.gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 4px; margin-bottom: 10px; }
.gal-cell { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; cursor: pointer;
  background: rgba(255,255,255,0.04); border: 1px solid var(--panel-border); }
.gal-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gal-cell:hover { border-color: var(--text-accent); }
.gal-nothumb { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 26px; opacity: 0.5; }
.gal-badge { position: absolute; right: 4px; bottom: 4px; font-size: 10px; padding: 1px 5px; border-radius: 6px;
  background: rgba(0,0,0,0.65); color: #fff; }
.gal-people { position: absolute; left: 0; right: 0; bottom: 0; font-size: 11px; padding: 2px 4px;
  background: linear-gradient(transparent, rgba(0,0,0,0.75)); color: #fff; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.gal-pending { position: absolute; left: 4px; top: 4px; font-size: 11px; }
.gal-overlay { position: fixed; inset: 0; z-index: 60; background: rgba(var(--bg-void), 0.82);
  backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 20px; }
.gal-detail { position: relative; max-width: 560px; width: 100%; max-height: 88vh; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--panel-border); border-radius: 14px; padding: 16px; }
.gal-close { position: absolute; right: 10px; top: 8px; }
.gal-big { width: 100%; max-height: 40vh; object-fit: contain; border-radius: 10px; margin-bottom: 10px;
  background: rgba(0,0,0,0.35); }
/* ─── upload progress (S74) ─── */
.up-prog { margin-top: 8px; padding: 10px 12px; border-radius: 10px;
  background: rgba(20,16,36,0.7); border: 1px solid rgba(var(--acc-soft), 0.35); }
.up-head { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.up-bar { height: 8px; border-radius: 4px; background: rgba(255,255,255,0.08); overflow: hidden; margin-bottom: 6px; }
.up-fill { height: 100%; border-radius: 4px; transition: width .6s ease;
  background: linear-gradient(90deg, #7b61ff, #4fd1c5); }

/* ─── gallery smoothness + new features (S74) ─── */
/* thumbnails fade in instead of popping; the cell shows a soft placeholder until then */
.gal-cell, .otd-cell { background: linear-gradient(110deg, #15111f 30%, #1d1830 50%, #15111f 70%);
  background-size: 200% 100%; animation: galShimmer 1.4s linear 8; }
/* S76 smoothness:
   - the shimmer ran `infinite`, so a cell whose thumbnail never arrives (a video with no
     frame grabbed) kept a compositor animation alive for as long as the gallery was open,
     alongside the 3D orb. 8 iterations is ~11 s: long enough to cover a slow load, then still.
   - content-visibility lets the browser skip layout, paint and image decode for cells that
     are scrolled out of view. With 705 files today and thousands coming off the phone, that
     is the difference between scrolling a screenful and scrolling the whole library. */
.gal-cell { content-visibility: auto; contain-intrinsic-size: 150px 150px; }
.gal-img { opacity: 0; transition: opacity .28s ease; }
.gal-img.is-in { opacity: 1; }
.gal-cell:has(.gal-img.is-in), .otd-cell:has(.gal-img.is-in) { animation: none; background: rgb(var(--bg-dark)); }
@keyframes galShimmer { to { background-position: -200% 0; } }
.gal-cell { transition: transform .15s ease; }
.gal-cell:hover { transform: scale(1.025); }
.gal-fav { position: absolute; right: 5px; top: 3px; color: #ff6b9a; font-size: 14px;
  text-shadow: 0 1px 3px rgba(0,0,0,.7); }
/* S76 — search, year jump and SELECT MANY in the gallery */
/* the search bar is a ROW. .agent-form is a COLUMN flex, so `flex: 1 1 260px` on the input
   made it grow down the whole card instead of across it — a search box the height of the
   gallery (Nawar, S76: "why is the search box unnaturally big"). */
.gal-searchbar { flex-direction: row; align-items: center; flex-wrap: wrap; margin: 6px 0 2px; }
.gal-searchbar .win-input { flex: 1 1 260px; min-width: 160px; height: 34px; }
.gal-searchbar .win-btn { flex: 0 0 auto; }
.gal-yearbar { flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.gal-yearbar .win-btn { font-size: 11px; padding: 3px 7px; }
.gal-pickbar { flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 8px;
  background: rgba(var(--acc-soft), 0.08); border: 1px solid rgba(var(--acc-soft), 0.35); margin-bottom: 4px; }
.gal-pickbar .agent-meta { margin-right: auto; }
.gal-cell.is-picked { outline: 2px solid var(--text-accent); outline-offset: -2px; }
.gal-cell.is-picked::after { content: '¹3'; position: absolute; left: 4px; bottom: 4px; z-index: 2;
  width: 18px; height: 18px; line-height: 18px; text-align: center; border-radius: 50%;
  background: var(--text-accent); color: #14101f; font-size: 12px; font-weight: 700; }
.gal-save { display: inline-flex; align-items: center; text-decoration: none; }
/* S76 — FAMILY: the people graph */
.rel-canvas { overflow: auto; max-height: 62vh; border-radius: 10px; padding: 6px;
  background: rgba(12,10,20,0.6); border: 1px solid var(--panel-border); }
.rel-svg { display: block; }
.rel-edge { stroke: rgba(var(--acc-soft), 0.55); stroke-width: 1.6; }
.rel-edge.is-soft { stroke: rgba(var(--acc-soft), 0.22); stroke-dasharray: 4 4; }
.rel-edge-label { fill: var(--text-dim); font-size: 11px; }
.rel-node { cursor: pointer; }
.rel-node .rel-ring { fill: none; stroke: var(--panel-border); stroke-width: 2; }
.rel-node:hover .rel-ring { stroke: var(--text-accent); }
.rel-node.is-me .rel-ring { stroke: #ff6b9a; stroke-width: 3; }
.rel-blank { fill: rgba(255,255,255,0.08); }
.rel-name { fill: var(--text); font-size: 11px; }
.rel-sub { fill: var(--text-dim); font-size: 11px; }
.rel-links { gap: 6px; margin: 4px 0 8px; }
/* S76 (Sep 25) — the grouped relation dropdown */
.rel-form { flex-direction: row; }
.rel-select { width: 100%; max-width: 420px; height: 34px; }
.rel-select optgroup { font-style: normal; color: var(--text-dim); }
.rel-select option { color: var(--text); }
/* a native dropdown list is drawn by the OS — without its own dark background the light
   text would sit on a white list */
.rel-select optgroup, .rel-select option { background: #1a1528; }
/* S76 — PETS */
.pet-form { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 6px; }
.pet-form .win-input { flex: 1 1 180px; height: 34px; }
.pet-form .win-btn { flex: 0 0 auto; }
.gal-refresh { margin-left: auto; min-width: 34px; }
/* S76 #4 — PETS: a menu per picture, and the suspects outlined */
.pet-menu { position: fixed; z-index: 95; display: flex; flex-direction: column; gap: 4px;
  padding: 6px; border-radius: 10px; background: rgba(var(--bg3), 0.97);
  border: 1px solid rgba(var(--acc-soft), 0.45); box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  max-height: 60vh; overflow-y: auto; }
.pet-menu .win-btn { text-align: left; white-space: nowrap; }
.pet-suspect { outline: 2px solid #ffb347; outline-offset: -2px; border-radius: 8px; }
/* S76 #3 — the PEOPLE card shows whole photos: cover-crop them into the same square */
.id-photo .id-face-img { object-fit: cover; }
/* S76 #2 — BACKGROUND work in the right-hand column */
.act-job { display: flex; flex-direction: column; gap: 4px; }
.act-job-title { font-weight: 600; }
.act-job-bar { height: 4px; border-radius: 3px; background: rgba(255,255,255,0.08); overflow: hidden; }
.act-job-fill { height: 100%; background: linear-gradient(90deg, rgb(var(--acc-violet2)), #3ee0c5);
  transition: width .6s ease; }
.act-job-bar.indeterminate .act-job-fill { animation: actSlide 1.4s ease-in-out infinite; }
@keyframes actSlide { 0% { transform: translateX(-100%); } 100% { transform: translateX(340%); } }
.act-job-detail { font-size: 11px; opacity: .75; word-break: break-word; }
.act-done { opacity: .6; }
.act-idle { opacity: .45; font-style: italic; }
/* the viewer: each picture fades in; tools sit in one bar */
.gal-enter { animation: galIn .22s ease; }
@keyframes galIn { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
.gal-full { transition: filter .25s ease; }
.gal-tools { position: absolute; right: 14px; bottom: 10px; z-index: 2; display: flex; gap: 6px; }
.gal-heart { min-width: 40px; font-size: 16px; }
.gal-heart.is-on { color: #ff6b9a; border-color: #ff6b9a; }
.gal-answer { position: absolute; left: 50%; bottom: 52px; transform: translateX(-50%); z-index: 2;
  width: min(620px, calc(100% - 32px)); padding: 10px 14px; border-radius: 10px;
  background: rgba(var(--bg3), 0.92); border: 1px solid rgba(var(--acc-soft), 0.5);
  color: var(--text); font-size: 13px; line-height: 1.45; animation: galIn .22s ease; }
/* on this day */
.otd-card { border-color: rgba(var(--acc-soft), 0.45); }
.otd-row { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 6px; scroll-snap-type: x mandatory; }
.otd-cell { position: relative; flex: none; width: 92px; height: 92px; border-radius: 10px; overflow: hidden;
  cursor: zoom-in; scroll-snap-align: start; }
.otd-cell img { width: 100%; height: 100%; object-fit: cover; }
/* people chips above the grid */
.gal-people-chips { margin: 2px 0 6px; }
.id-chip.is-on { border-color: rgb(var(--acc-soft)); background: rgba(90,72,150,0.75); }
.chip-more { color: var(--text-dim); border-style: dashed; }
/* tab content fades in when switching */
.gal-pane > .col { animation: galIn .18s ease; }

/* ─── IDENTIFY + PEOPLE (S74) — naming faces fast; people as a grid ─── */
.id-list { gap: 10px; }
.id-card { transition: opacity .25s, transform .25s; }
.id-card.id-done { opacity: 0; transform: translateX(24px); }
.id-faces { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
/* flex: none is load-bearing (S74): without it these cells shrink in the flex row — measured
   1.9px wide — and a zero-width lazy image never enters the viewport, so the crop is never
   fetched and every face shows as an empty box. */
.id-face { flex: none; width: 76px; height: 76px; border-radius: 10px; overflow: hidden;
  cursor: zoom-in; border: 1px solid var(--panel-border); background: rgb(var(--bg-dark)); position: relative; }
.id-face-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.id-face:hover { outline: 2px solid rgb(var(--acc-soft)); outline-offset: -2px; }
.id-more { width: 76px; height: 76px; border-radius: 10px; display: flex; align-items: center;
  justify-content: center; color: var(--text-dim); border: 1px dashed var(--panel-border); }
button.id-more { background: transparent; font: inherit; cursor: pointer; }   /* S77: opens the rest */
button.id-more:hover { color: var(--text); border-color: var(--accent, var(--text-dim)); }
.id-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 8px; }
.id-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px;
  border-radius: 20px; border: 1px solid var(--panel-border); background: rgba(30,24,48,0.6);
  color: var(--text); font-size: 12px; cursor: pointer; }
.id-chip:hover { border-color: rgb(var(--acc-soft)); background: rgba(60,48,96,0.7); }
.id-chip-img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.id-row { flex-wrap: wrap; }
.id-row .win-input { flex: 1; min-width: 180px; }
.people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.person-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px;
  border-radius: 12px; border: 1px solid var(--panel-border); background: rgba(var(--bg3), 0.5);
  color: var(--text); cursor: pointer; text-align: center; }
.person-tile:hover { border-color: rgb(var(--acc-soft)); background: rgba(var(--bg4), 0.6); }
.person-tile.is-owner { border-color: rgba(var(--acc-soft), 0.6); }
.person-cover { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; background: rgb(var(--bg-dark)); }
.person-cover.big { width: 72px; height: 72px; flex: none; }
.person-blank { display: flex; align-items: center; justify-content: center; font-size: 28px; color: var(--text-dim); }
.person-name { font-size: 13px; font-weight: 600; line-height: 1.2; word-break: break-word; }
.person-meta { font-size: 11px; color: var(--text-dim); }
.person-box { max-width: 620px; }
.person-top { display: flex; gap: 14px; align-items: center; margin-bottom: 6px; }
.ctx-box { max-width: 760px; }
.ctx-frame { position: relative; display: inline-block; max-width: 100%; }
.ctx-photo { display: block; max-width: 100%; max-height: 64vh; border-radius: 8px; }
.ctx-mark { position: absolute; border: 2px solid rgb(var(--acc-soft)); border-radius: 6px;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.35); pointer-events: none; }
.ctx-crop { width: 160px; height: 160px; border-radius: 10px; }

/* ─── maps (S74) — Leaflet + OpenStreetMap, dark to match Nexus ─── */
.nx-map { width: 100%; min-height: 160px; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--panel-border); background: rgb(var(--bg-dark)); }
/* Nexus is dark-only; OSM tiles are light. Inverting the TILES (not the markers or photos)
   gives a dark map without a second tile provider. */
.nx-map .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(0.9) contrast(0.9) saturate(0.6); }
.nx-map .leaflet-control-attribution { background: rgba(10,8,18,0.7); color: var(--text-dim); font-size: 11px; }
.nx-map .leaflet-control-attribution a { color: var(--text-dim); }
.nx-map .leaflet-bar a { background: rgba(var(--bg3), 0.9); color: var(--text); border-color: var(--panel-border); }
.nx-map .leaflet-popup-content-wrapper, .nx-map .leaflet-popup-tip { background: #17131f; color: var(--text); }
.nx-map-sub { color: var(--text-dim); font-size: 11px; }
.nx-map-card { display: flex; flex-direction: column; gap: 6px; }
.nx-map-box { height: 240px; }
.nx-map-note { font-size: 12px; color: var(--text-dim); }
.map-card .card-text { width: 100%; }
.gal-minimap { height: 200px; margin: 8px 0; }
.gal-bigmap { height: 62vh; min-height: 320px; }
.gal-mapbar { display: flex; gap: 8px; }
.gal-mapbar .win-input { flex: 1; }
/* a photo pin: the picture itself */
.nx-photo-pin { background: none; border: none; }
.nx-photo-pin img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px;
  border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.6); cursor: pointer; }
.nx-pin-count { position: absolute; right: -6px; top: -6px; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 9px; background: rgb(var(--acc-soft)); color: #fff; font-size: 11px; line-height: 18px;
  text-align: center; font-weight: 600; box-shadow: 0 1px 4px rgba(0,0,0,0.5); }

/* ─── the review pile: see the picture, pick individual files (S74) ─── */
.rev-grid { margin: 8px 0; }
.rev-cell { position: relative; cursor: zoom-in; }
.rev-tick { position: absolute; right: 4px; top: 4px; width: 20px; height: 20px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1;
  border-radius: 5px; color: transparent; background: rgba(10,8,18,0.55);
  border: 1px solid var(--panel-border); }
.rev-tick:hover { color: var(--text-dim); background: rgba(30,24,48,0.9); }
.rev-cell.is-picked { outline: 2px solid var(--accent, rgb(var(--acc-mute))); outline-offset: -2px; }
.rev-cell.is-picked .rev-tick { color: #fff; background: var(--accent, rgb(var(--acc-mute))); }
/* a setting that must not be edited by accident */
.win-input.is-locked { opacity: 0.65; cursor: not-allowed; }

/* ─── the viewer: looking at the actual picture, full size (S74) ─── */
.gal-clickable { cursor: zoom-in; }
.gal-viewer { padding: 0; background: rgba(3,2,7,0.94); }
.gal-stage { position: relative; display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; padding: 46px 58px 62px; box-sizing: border-box; }
.gal-full { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.6); }
.gal-blur { filter: blur(6px); }          /* the thumbnail, until the original lands */
.gal-viewer .gal-close { right: 14px; top: 12px; z-index: 2; }
.gal-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 42px; height: 68px; font-size: 30px; line-height: 1; cursor: pointer;
  color: var(--text); background: rgba(var(--bg3), 0.55); border: 1px solid var(--panel-border);
  border-radius: 10px; }
.gal-nav:hover { background: rgba(var(--bg4), 0.85); }
.gal-prev { left: 10px; }
.gal-next { right: 10px; }
.gal-cap { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font-size: 12px;
  color: var(--text-dim); padding: 0 16px; pointer-events: none; }
.gal-info { position: absolute; right: 14px; bottom: 10px; z-index: 2; }
@media (max-width: 640px) {
  .gal-stage { padding: 42px 10px 58px; }
  .gal-nav { width: 34px; height: 56px; font-size: 24px; }
}

.gal-facts { margin: 8px 0; }
.gal-fact { display: flex; gap: 10px; padding: 3px 0; border-top: 1px solid var(--panel-border); font-size: 12px; }
.gal-k { width: 76px; flex-shrink: 0; color: var(--text-dim); }
.gal-v { flex: 1; word-break: break-word; }
.gal-raw { max-height: 240px; overflow: auto; font-size: 11px; white-space: pre-wrap;
  background: rgba(0,0,0,0.3); padding: 8px; border-radius: 6px; }

/* ask() — the prompt replacement (Electron has no window.prompt) */
.ask-overlay { z-index: 70; }
.ask-box { background: var(--panel); border: 1px solid var(--panel-border); border-radius: 12px;
  padding: 16px; width: min(420px, 92vw); display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 16px 50px rgba(0,0,0,0.5); }
.ask-box .win-input { width: 100%; }
.ask-suggestions { display: flex; flex-direction: column; gap: 3px; max-height: 180px; overflow-y: auto; background: rgba(14, 12, 24, 0.96); border: 1px solid var(--panel-border); border-radius: 8px; padding: 4px; margin-top: -4px; box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
.ask-sugg-item { padding: 6px 10px; border-radius: 6px; font-size: 13px; cursor: pointer; color: var(--text-dim, #ccc); transition: background 0.15s, color 0.15s; }
.ask-sugg-item:hover, .ask-sugg-item.active { background: rgba(138, 77, 245, 0.4); color: #fff; }
.vault-season-hdr:hover { background: rgba(255, 255, 255, 0.06) !important; }

/* ═══ S73 — GALLERY as one browser: tabs + contacts ═══ */
.gal-tabs { flex-wrap: wrap; position: sticky; z-index: 5; padding: 14px 0 8px;
  /* the window body has 10px top padding: stick 10px HIGHER so that strip is covered too */
  top: -10px; margin-top: -10px;
  border-bottom: 1px solid var(--panel-border); margin-bottom: 8px;
  /* S74: a pinned bar needs a SOLID background, or everything scrolls visibly through it
     (Nawar: "the headers are colliding") */
  background: rgba(14, 12, 22, 0.97); backdrop-filter: blur(8px);
  box-shadow: 0 6px 12px -8px rgba(0,0,0,0.8); }
.gal-pane { min-height: 120px; }
.contact-card { display: flex; gap: 10px; align-items: center; }
.contact-info { min-width: 0; flex: 1; }
.contact-info .agent-meta { word-break: break-word; }
.role-row { flex-wrap: wrap; margin-top: 4px; }
.role-row .win-btn { padding: 3px 9px; font-size: 11px; }

/* ═══ S73 — contact suggestions (nexus-faces.js) ═══ */
.sug-box { position: fixed; z-index: 90; max-height: 300px; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--panel-border); border-radius: 10px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.5); backdrop-filter: var(--glass); }
.sug-box[hidden] { display: none; }
.sug-inline { max-height: 320px; overflow-y: auto; margin: 6px 0; }
.sug-row { display: flex; gap: 9px; align-items: center; padding: 6px 9px; cursor: pointer;
  border-bottom: 1px solid var(--panel-border); }
.sug-row:last-child { border-bottom: 0; }
.sug-row:hover { background: rgba(255,255,255,0.06); }
.sug-photo { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  border: 1px solid var(--panel-border); }
.sug-blank { display: flex; align-items: center; justify-content: center; font-size: 13px;
  color: var(--text-dim); background: rgba(255,255,255,0.05); }
.sug-text { min-width: 0; flex: 1; }
.sug-name { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sug-meta { font-size: 11px; color: var(--text-dim); }
/* S77: IDENTIFY's scan box takes a dragged photo */
.agent-form.drop-on { outline: 2px dashed var(--accent, #9b7bff); outline-offset: 4px; border-radius: 10px; }

/* ── S77 HEALTH panel v2 (nexus-health.js + nexus-health-3d.js) — the holo redesign ── */
.hl-root { --hl-cyan: rgb(var(--acc2)); --hl-violet: rgb(var(--acc-hi2)); --hl-pink: #ff7fb0; --hl-glass: rgba(18,12,34,0.55);
  --hl-edge: rgba(var(--acc2), 0.22); }
.hl-people { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.hl-person { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 7px 14px 6px; border-radius: 12px; cursor: pointer; font-family: 'Space Grotesk', sans-serif;
  color: var(--text); background: linear-gradient(180deg, rgba(40,30,70,0.55), rgba(15,10,30,0.55));
  border: 1px solid var(--hl-edge); transition: border-color .2s, box-shadow .2s; }
.hl-person:hover { border-color: var(--hl-cyan); }
.hl-person.sel { border-color: var(--hl-cyan); box-shadow: 0 0 14px rgba(var(--acc2), 0.35), inset 0 0 12px rgba(var(--acc2), 0.12); }
.hl-person-name { font-size: 14px; letter-spacing: .04em; }
.hl-person-rel { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); }
.hl-badge { position: absolute; top: -6px; right: -6px; min-width: 18px; padding: 0 5px; border-radius: 9px;
  font-size: 11px; line-height: 18px; background: #ff5d7a; color: #fff; text-align: center;
  box-shadow: 0 0 10px rgba(255,93,122,0.7); }

/* S77: the body and the tabs need room — a wider default for this one panel (a size he drags
   it to still wins: that is written inline), and the layout follows the PANEL width, not the screen */
@media (min-width: 701px) {
  .nexus-window[data-panel="health"] { width: min(1120px, calc(100vw - 40px)); }
  body.rail-open .nexus-window[data-panel="health"] { width: min(1120px, calc(100vw - 280px)); }
  .nexus-window[data-panel="browser"] { width: min(1180px, calc(100vw - 40px)); }
  body.rail-open .nexus-window[data-panel="browser"] { width: min(1180px, calc(100vw - 280px)); }
}
.nexus-window[data-panel="browser"] .win-body {
  padding: 4px 6px 6px 6px;
  overflow: hidden;
  height: 100%;
}
.nexus-window[data-panel="browser"] .nx-pane,
.nexus-window[data-panel="browser"] .nx-pane > .col {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.hl-root { container-type: inline-size; }
.hl-grid { display: grid; grid-template-columns: minmax(260px, 0.9fr) minmax(300px, 1.1fr); gap: 12px; align-items: start; }
@container (max-width: 700px) { .hl-grid { grid-template-columns: 1fr; } .hl3d { height: 360px; } }

.hl-stage { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--hl-edge);
  background:
    radial-gradient(ellipse at 50% 85%, rgba(var(--acc2), 0.14), transparent 55%),
    radial-gradient(ellipse at 50% 30%, rgba(var(--acc-hi2), 0.10), transparent 60%),
    repeating-linear-gradient(0deg, rgba(var(--acc2), 0.05) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(var(--acc2), 0.05) 0 1px, transparent 1px 28px),
    #07040f;
  padding-bottom: 10px; }
.hl3d { position: relative; height: 430px; cursor: grab; }
.hl3d:active { cursor: grabbing; }
.hl3d canvas { display: block; }
.hl3d-label { position: absolute; left: 0; top: 0; pointer-events: none; white-space: nowrap;
  font: 600 11px 'Space Grotesk', sans-serif; letter-spacing: .12em; color: var(--hl-cyan);
  text-shadow: 0 0 6px rgba(var(--acc2), 0.8); padding-left: 6px; margin-top: -7px;
  border-left: 1px solid rgba(var(--acc2), 0.6); }
.hl3d-label.hot { color: #fff; text-shadow: 0 0 10px #fff, 0 0 18px var(--hl-cyan); }
.hl-hud { position: absolute; top: 10px; left: 12px; pointer-events: none; font-family: 'Space Grotesk', sans-serif; }
.hl-hud-name { font-size: 18px; letter-spacing: .22em; color: #fff; text-shadow: 0 0 12px rgba(var(--acc-hi2), 0.8); }
.hl-hud-sub { font-size: 11px; letter-spacing: .1em; color: var(--text-dim); max-width: 230px; }
.hl-legend { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 10px; margin-top: -6px; }
.hl-organ { font: 11px 'Space Grotesk', sans-serif; padding: 3px 9px; border-radius: 999px; cursor: pointer;
  color: var(--text); background: rgba(10,6,20,0.7); border: 1px solid var(--hl-edge); }
.hl-organ::before { content: '●'; margin-right: 5px; }
.hl-organ.ok::before { color: #6fd39a; }
.hl-organ.warn::before { color: #ffb86b; }
.hl-organ.alert::before { color: #ff5d7a; }
.hl-organ.cycle::before { color: var(--hl-pink); }
.hl-organ.sel { border-color: var(--hl-cyan); box-shadow: 0 0 10px rgba(var(--acc2), 0.4); }
.hl-metrics { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 10px 0; }
.hl-metric { flex: 1 1 70px; padding: 6px 8px; border-radius: 10px; background: var(--hl-glass);
  border: 1px solid var(--hl-edge); }
.hl-metric.warn { border-color: rgba(255,184,107,0.55); }
.hl-metric-v { font: 600 18px 'Space Grotesk', sans-serif; color: #fff; }
.hl-metric.warn .hl-metric-v { color: #ffb86b; }
.hl-metric-k { font-size: 11px; letter-spacing: .1em; color: var(--text-dim); text-transform: uppercase; }
.hl-build { display: block; margin: 10px 10px 0; width: calc(100% - 20px); padding: 9px; border-radius: 10px;
  font: 600 12px 'Space Grotesk', sans-serif; letter-spacing: .14em; color: #06131a; cursor: pointer;
  background: linear-gradient(90deg, var(--hl-cyan), var(--hl-violet)); border: 0;
  box-shadow: 0 0 18px rgba(var(--acc2), 0.35); }
.hl-build:hover { filter: brightness(1.12); }

.hl-side { border-radius: 16px; border: 1px solid var(--hl-edge); background: var(--hl-glass);
  backdrop-filter: blur(6px); min-width: 0; }
.hl-tabs { display: flex; gap: 2px; padding: 6px 6px 0; border-bottom: 1px solid var(--hl-edge); overflow-x: auto; }
.hl-tab { font: 600 11px 'Space Grotesk', sans-serif; letter-spacing: .12em; padding: 8px 11px; cursor: pointer;
  color: var(--text-dim); background: transparent; border: 0; border-bottom: 2px solid transparent; white-space: nowrap; }
.hl-tab:hover { color: var(--text); }
.hl-tab.sel { color: #fff; border-bottom-color: var(--hl-cyan); text-shadow: 0 0 8px rgba(var(--acc2), 0.6); }
.hl-pane { padding: 10px 12px 12px; }
.hl-status-line { font-size: 11px; color: var(--text-dim); margin-bottom: 4px; }
.hl-status-line.warn { color: #ffb86b; }
.hl-section { margin-top: 6px; }
.hl-section > .win-sub { display: flex; align-items: center; gap: 8px; letter-spacing: .14em; }
.hl-inline { margin-left: auto; padding: 2px 10px; font-size: 11px; }
.hl-inline + .hl-inline { margin-left: 4px; }
.hl-dose { display: flex; align-items: center; gap: 8px; padding: 7px 9px; margin: 4px 0; border-radius: 10px;
  border: 1px solid rgba(var(--acc2), 0.14); background: linear-gradient(90deg, rgba(var(--acc2), 0.06), rgba(20,14,40,0.4)); }
.hl-time { font: 600 13px 'Space Grotesk', sans-serif; min-width: 46px; color: var(--hl-cyan); font-variant-numeric: tabular-nums; }
.hl-time.hl-guess { color: #e0a84a; }
.hl-time.hl-guess::after { content: '?'; }
.hl-dose-text { flex: 1; min-width: 0; }
.hl-name { color: var(--text); font-size: 13px; }
.hl-body-k { min-width: 110px; color: var(--text-dim); }
.hl-status { font-size: 11px; letter-spacing: .08em; padding: 2px 8px; border-radius: 10px; color: var(--text-dim);
  border: 1px solid var(--panel-border); white-space: nowrap; text-transform: uppercase; }
.hl-status.hl-ok { color: #6fd39a; border-color: rgba(111,211,154,0.45); }
.hl-status.hl-due { color: #ffb86b; border-color: rgba(255,184,107,0.55); box-shadow: 0 0 8px rgba(255,184,107,0.25); }
.hl-status.hl-miss { color: #ff7b7b; border-color: rgba(255,123,123,0.5); }
.hl-med, .hl-appt { background: linear-gradient(135deg, rgba(40,28,80,0.45), rgba(12,8,24,0.5)) !important;
  border-color: rgba(var(--acc2), 0.16) !important; }
.hl-med.hl-low { border-color: rgba(255,184,107,0.6) !important; }
.hl-warn { color: #ffb86b; }
.hl-notes { font-style: italic; }
.hl-form .hl-field { display: grid; grid-template-columns: 140px 1fr; align-items: center; gap: 8px; margin: 4px 0; }
.hl-slot { flex-wrap: wrap; }
.hl-slot .win-input { flex: 1 1 110px; min-width: 0; }
.hl-days { display: flex; gap: 4px; flex-basis: 100%; }
.hl-day { min-width: 30px; padding: 3px 0; opacity: .45; }
/* S79: the calorie counter */
.hl-food-meter { margin: 4px 0; }
.hl-food-mlabel { font-size: 11px; letter-spacing: .08em; color: var(--text-dim); margin-bottom: 3px; }
.hl-food-bar { height: 8px; border-radius: 6px; background: rgba(var(--acc2), 0.10); overflow: hidden; }
.hl-food-fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, rgb(var(--r-indigo, 70, 44, 214)), var(--hl-cyan));
  box-shadow: 0 0 8px rgba(var(--acc2), 0.45); transition: width .4s; }
.hl-food-fill.over { background: linear-gradient(90deg, #e08a00, #ff7b7b); box-shadow: 0 0 8px rgba(255,123,123,.45); }
.hl-food-advice { font-size: 12px; margin: 3px 0; padding-left: 8px; border-left: 2px solid rgba(var(--acc2), 0.45); }
.hl-food-add { flex-wrap: wrap; }
.hl-food-add > input.win-input { flex: 3 1 220px; min-width: 0; }
.hl-food-add > select.win-input { flex: 1 1 100px; }
.hl-food-item { flex-wrap: nowrap; }
.hl-food-item select.win-input { flex: 3 1 150px; min-width: 0; }
.hl-food-item input.win-input { flex: 1 1 60px; min-width: 0; }
.hl-meal .agent-title { display: flex; justify-content: space-between; align-items: center; }
.hl-food-week { position: relative; display: flex; gap: 6px; height: 90px; margin: 4px 0 6px; }
.hl-food-day { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; }
.hl-food-well { height: 72px; width: 100%; max-width: 26px; display: flex; align-items: flex-end;
  background: rgba(var(--acc2), 0.05); border-radius: 4px; }
.hl-food-col { width: 100%; border-radius: 4px; min-height: 1px;
  background: linear-gradient(0deg, rgb(var(--r-indigo, 70, 44, 214)), var(--hl-cyan)); }
.hl-food-col.over { background: linear-gradient(0deg, #e08a00, #ff7b7b); }
.hl-food-target { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed rgba(var(--r-core, 246, 240, 255), 0.55); pointer-events: none; }
.hl-food-weight { display: flex; align-items: center; gap: 10px; font-size: 12px; margin: 6px 0; }
.hl-food-quick { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 8px; }
.hl-food-same { border-style: dashed; }
.hl-backup { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 2px 0 8px; }
.hl-lab-every { font-size: 11px; padding: 1px 4px; height: auto; grid-column: 1 / 2; width: auto; justify-self: start; }
/* S79: lab results + visits */
.hl-labs { display: flex; flex-direction: column; gap: 2px; margin: 6px 0 10px; }
.hl-lab-panel { font-size: 11px; letter-spacing: .14em; color: rgb(var(--r-lav, 200, 172, 255)); margin-top: 8px;
  border-bottom: 1px solid rgba(var(--r-vivid, 138, 52, 255), 0.3); padding-bottom: 2px; }
.hl-lab-row { display: grid; grid-template-columns: minmax(90px, 1fr) auto auto minmax(36px, 80px); gap: 2px 10px;
  align-items: center; padding: 3px 0; font-size: 12px; }
.hl-lab-row .agent-meta { grid-column: 1 / 4; font-size: 11px; }
.hl-lab-row .hl-labspark { grid-column: 4; grid-row: 1 / 3; }
.hl-lab-row.off .hl-lab-val { color: #ffb86b; font-weight: 600; }
.hl-lab-val { font-variant-numeric: tabular-nums; white-space: nowrap; }
.hl-labspark { width: 100%; max-width: 80px; height: 22px; overflow: visible; justify-self: end; }
.hl-labspark polyline { fill: none; stroke: var(--hl-cyan); stroke-width: 1.4; }
.hl-labspark circle { fill: rgb(var(--r-core, 246, 240, 255)); }
.hl-labspark-band { fill: rgba(111, 211, 154, .12); }
.hl-visit-meds { font-size: 12px; margin: 3px 0; color: var(--text); }
.hl-paper { max-width: 760px; }
.hl-found-card { display: flex; gap: var(--s2, 8px); align-items: flex-start; }
.hl-found-thumb { width: 72px; height: 96px; object-fit: cover; border-radius: 6px; cursor: zoom-in; flex: none; }
.hl-lab-edit { display: grid !important; grid-template-columns: minmax(0, 2.2fr) repeat(4, minmax(0, 1fr)) 34px; gap: 6px; }
.hl-lab-edit > * { min-width: 0; }
.hl-lab-edit .win-input { padding-left: 7px; padding-right: 4px; }
.hl-lab-head { margin-bottom: -4px; }
.hl-lab-head .agent-meta { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 520px) { .hl-lab-row { grid-template-columns: 1fr auto; } .hl-lab-row .hl-labspark { display: none; } }
.hl-day.on { opacity: 1; color: rgb(var(--r-core, 246, 240, 255)); border-color: rgb(var(--r-vivid, 138, 52, 255));
  box-shadow: inset 0 0 8px rgba(var(--r-vivid, 138, 52, 255), 0.45); }
.hl-spark { width: 90px; height: 24px; color: var(--hl-cyan); flex: none; }
@media (max-width: 560px) { .hl-form .hl-field { grid-template-columns: 1fr; gap: 2px; } }

/* the measurement wizard — light backdrop so the body stays visible behind it */
.hl-wiz { max-width: 420px; border: 1px solid var(--hl-cyan); box-shadow: 0 0 30px rgba(var(--acc2), 0.25); }
.hl-wiz-back { background: rgba(var(--bg-void), 0.35) !important; }
.hl-wiz-step { font: 600 11px 'Space Grotesk', sans-serif; letter-spacing: .2em; color: var(--hl-cyan); }
.hl-wiz-input { font-size: 22px; text-align: center; margin: 8px 0; }
.hl-wiz-dots { display: flex; gap: 6px; justify-content: center; margin: 4px 0 8px; }
.hl-dot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--hl-edge); cursor: pointer; }
.hl-dot.done { background: var(--hl-cyan); box-shadow: 0 0 6px var(--hl-cyan); }
.hl-dot.cur { outline: 2px solid #fff; outline-offset: 2px; }

/* the cycle dial */
.hl-cycle { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.hl-dial { width: 180px; height: 180px; flex: none; }
.hl-dial path { fill: none; stroke-width: 8; stroke-linecap: round; }
.hl-dial-track { fill: none; stroke: rgba(var(--acc2), 0.14); stroke-width: 8; }
.hl-arc-period { stroke: #ff5d7a; filter: drop-shadow(0 0 4px #ff5d7a); }
.hl-arc-fertile { stroke: rgb(var(--acc2)); opacity: .55; }
.hl-arc-ovu { stroke: #fff; stroke-width: 4 !important; opacity: .9; }
.hl-arc-next { stroke: #ff7fb0; stroke-width: 3 !important; stroke-dasharray: 3 4; }
.hl-dial-today { fill: #fff; filter: drop-shadow(0 0 6px #fff); }
.hl-dial-big { font: 600 36px 'Space Grotesk', sans-serif; fill: #fff; }
.hl-dial-txt { font: 11px 'Space Grotesk', sans-serif; fill: var(--text-dim); letter-spacing: .08em; }
.hl-cycle-facts { flex: 1; min-width: 180px; }
.hl-cycle-day { font: 600 12px 'Space Grotesk', sans-serif; letter-spacing: .2em; color: var(--hl-pink); }
.hl-pick { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin: 5px 0; }
.hl-pick > .agent-meta { min-width: 72px; }
.hl-chip { font-size: 11px; padding: 3px 9px; border-radius: 999px; cursor: pointer; color: var(--text);
  background: rgba(20,14,40,0.6); border: 1px solid var(--hl-edge); }
.hl-chip.sel { border-color: var(--hl-pink); background: rgba(255,127,176,0.18); box-shadow: 0 0 8px rgba(255,127,176,0.35); }

/* S77 — Health: ingredients, interactions, pane swaps */
.hl-fade { animation: hl-fade 140ms var(--ease, ease) both; }
@keyframes hl-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hl-fade { animation: none; } }
.hl-tab-badge { margin-left: 6px; padding: 0 5px; border-radius: 8px; font-size: 10px; background: #ff3b5c; color: #fff; }
.hl-ix-row { display: flex; align-items: center; gap: 9px; padding: 7px 9px; margin: 4px 0; border-radius: 10px;
  border: 1px solid rgba(var(--acc2), 0.14); background: rgba(14,9,28,0.55); }
.hl-ix-level { font: 600 11px 'Space Grotesk', sans-serif; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 6px; min-width: 64px; text-align: center; border: 1px solid; }
.hl-ix-major { color: #ff5d7a; border-color: #ff3b5c; background: rgba(255,59,92,0.12); box-shadow: 0 0 10px rgba(255,59,92,0.35); }
.hl-ix-mod { color: #ffb86b; border-color: rgba(255,176,59,0.7); background: rgba(255,176,59,0.08); }
.hl-ix-min { color: rgb(var(--acc2)); border-color: rgba(var(--acc2), 0.5); }
.hl-ix-unk { color: var(--text-dim); border-color: var(--panel-border); }
.hl-ix-dup { color: rgb(var(--acc-hi2)); border-color: rgba(var(--acc-hi2), 0.6); }
.hl-credit { font-size: 11px; color: var(--text-dim); margin-top: 10px; letter-spacing: .04em; }
.hl-ingr-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 5px 0 2px; }
.hl-ingr-chip { font-size: 11px; padding: 2px 8px; border-radius: 999px; color: #d8f6ff;
  border: 1px solid rgba(var(--acc2), 0.35); background: rgba(var(--acc2), 0.08); }
.hl-ingr-chip.unknown { color: var(--text-dim); border-style: dashed; background: transparent; }
.hl-ingr-chip.known { color: var(--text); border-style: dotted; background: transparent; opacity: .85; }  /* S78: known supplement, no interaction data */
.hl-ingr { max-width: 560px; width: calc(100vw - 32px); border: 1px solid rgba(var(--acc2), 0.45); }
.hl-ingr-rows .hl-slot .win-input:first-child { flex: 3 1 160px; }
.hl-ingr-rows .hl-amt { flex: 1 1 70px; }
.hl-ingr-rows .hl-unit { flex: 0 1 56px; }
.hl-ocr { white-space: pre-wrap; font-size: 11px; max-height: 140px; overflow: auto; color: var(--text-dim); margin: 4px 0 0; }

/* ══════════════════════════════════════════════════════════════════════════
   S77 THEMES — the "realistic light" layer (html.fx-real; every theme except Monarch Classic)
   From his five poster references: true black, ONE colour of light with a white-hot core and a
   fast fall-off, fine filaments rather than soft haze, horizontal light streaks, a wet floor,
   grain. All colours come from the theme tokens (nexus-theme.js).
   ══════════════════════════════════════════════════════════════════════════ */
#nexus-fx { position: fixed; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
#nexus-fx .fx-streaks { position: absolute; left: -2%; top: 0; height: 100%; width: 55%;
  opacity: 0.7; mix-blend-mode: screen;   /* S78: 0.55 → 0.7 and no blur — sharp filaments */
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 45%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 0%, #000 45%, transparent 100%);
  animation: fx-drift 18s ease-in-out infinite alternate; }
@keyframes fx-drift { from { transform: translateX(-1.5%); } to { transform: translateX(1.5%); } }
#nexus-fx .fx-floor { position: absolute; left: 10%; right: 10%; bottom: -12vh; height: 34vh;
  background: radial-gradient(ellipse at 50% 30%, rgba(var(--acc-vivid), 0.22), rgba(var(--acc-deep), 0.10) 38%, transparent 70%);
  filter: blur(6px); }
#nexus-fx .fx-grain { position: absolute; inset: -50%; opacity: 0.07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
#nexus-fx .fx-vignette { position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 45%, transparent 50%, rgba(0, 0, 0, 0.72) 100%); }   /* S78: deeper edges → the light reads hotter */
@media (prefers-reduced-motion: reduce) { #nexus-fx .fx-streaks { animation: none; } }

/* light, not haze: a hot core, then the colour, then a fast fall-off */
html.fx-real {
  --glow-focus: 0 0 0 1px rgba(var(--acc-hi), 0.75), 0 0 3px rgba(var(--acc-hot), 0.9),
                0 0 12px rgba(var(--acc-vivid), 0.55), 0 0 34px rgba(var(--acc-deep), 0.45);
  --glow-live:  0 0 2px rgba(var(--acc-hot), 0.8), 0 0 10px rgba(var(--acc2), 0.45);
  --glass: blur(10px) saturate(1.3) brightness(1.05);     /* lighter blur: sharper + cheaper */
  --line: rgba(var(--acc-line), 0.16);
  --line-strong: rgba(var(--acc-hi), 0.34);
}
html.fx-real .nexus-window {
  background: linear-gradient(180deg, rgba(var(--bg-surf2), 0.78), rgba(var(--bg-surf1), 0.86));
  border: 1px solid rgba(var(--acc-hi), 0.22);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(var(--acc-hot), 0.10),
              0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 26px rgba(var(--acc-deep), 0.35);
}
/* poster type: display face for titles, wide-tracked small caps for labels */
html.fx-real .win-title, html.fx-real .rail-head, html.fx-real .hl-hud-name, html.fx-real .hl-person-name,
html.fx-real .hl-dial-big, html.fx-real .hl-metric-v {
  font-family: var(--font-display, 'Oswald', sans-serif); }
html.fx-real .win-title { letter-spacing: 0.32em; color: rgb(var(--acc-hot));
  text-shadow: 0 0 1px rgba(var(--acc-hot), 0.9), 0 0 10px rgba(var(--acc-vivid), 0.55); }
html.fx-real .win-sub { letter-spacing: 0.28em; color: rgb(var(--acc-hi));
  text-shadow: 0 0 8px rgba(var(--acc-vivid), 0.35); }
html.fx-real .hl-hud-name { font-size: 26px; letter-spacing: 0.18em; color: rgb(var(--acc-hot));
  text-shadow: 0 0 1px #fff, 0 0 8px rgba(var(--acc-vivid), 0.9), 0 0 28px rgba(var(--acc-deep), 0.8); }
html.fx-real .rail-item.sel, html.fx-real .hl-tab.sel, html.fx-real .hl-person.sel {
  box-shadow: var(--glow-focus); }
html.fx-real .win-btn.approve, html.fx-real .hl-build {
  background: linear-gradient(90deg, rgb(var(--acc-vivid)), rgb(var(--acc-hi)));
  color: #07030f; border-color: rgba(var(--acc-hot), 0.6);
  box-shadow: 0 0 2px rgba(var(--acc-hot), 0.9), 0 0 16px rgba(var(--acc-vivid), 0.5); }
/* hairline rule with a lit centre — the posters' dividers */
html.fx-real .win-sub::after { content: ''; display: block; height: 1px; margin-top: 6px;
  background: linear-gradient(90deg, transparent, rgba(var(--acc-hi), 0.7), transparent); }
html.fx-real .hl-section > .win-sub::after { flex: 1; margin: 0 0 0 10px; }

/* ══════════════════════════════════════════════════════════════════════════
   S78 — SHADOW MONARCH v2: light made of COLOUR COMBINATIONS (every fx-real theme; Monarch's ramp
   is hand-set in nexus-theme.js). Nawar: "sharper, brighter … depth, hue shifts, metallic gloss".
   The ramp tokens: --r-core (white-hot) → --r-lav → --r-vivid → --r-indigo → --r-abyss.
   ⚠ The .nexus-window compositing trio (transform/backface/isolation) is NOT touched — only its
   background, border and shadows; the sheen sits in ::before at z-index -1, which the existing
   `isolation: isolate` keeps inside the window, under its content.
   ══════════════════════════════════════════════════════════════════════════ */
html.fx-real .nexus-window {
  border: 1px solid transparent;
  /* a machined metal edge: the light runs round the frame and changes hue as it goes */
  background:
    linear-gradient(180deg, rgba(var(--bg-surf2), 0.80), rgba(var(--bg-surf1), 0.90) 55%, rgba(var(--r-abyss), 0.92)) padding-box,
    linear-gradient(135deg, rgba(var(--r-core), 0.75), rgba(var(--r-lav), 0.35) 14%, rgba(var(--r-indigo), 0.30) 42%,
                    rgba(var(--r-vivid), 0.55) 78%, rgba(var(--r-core), 0.45)) border-box;
  /* rim light: bright from the top-left, cool indigo on the shadow side; a two-hue halo */
  box-shadow: inset 1px 1px 0 rgba(var(--r-core), 0.16), inset -1px -1px 0 rgba(var(--r-indigo), 0.40),
              0 0 18px rgba(var(--r-vivid), 0.30), 0 0 60px rgba(var(--r-indigo), 0.28),
              0 30px 70px rgba(0, 0, 0, 0.78);
}
/* specular sheen: one glossy diagonal band + a hot spot where the light hits the top corner */
html.fx-real .nexus-window::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background:
    radial-gradient(120% 60% at 0% 0%, rgba(var(--r-lav), 0.16), transparent 45%),
    linear-gradient(112deg, transparent 18%, rgba(var(--r-core), 0.07) 30%, rgba(var(--r-core), 0.015) 36%, transparent 44%),
    radial-gradient(90% 50% at 100% 100%, rgba(var(--r-indigo), 0.20), transparent 60%);
}
/* chrome titles: a hard horizon in the middle of the letters — the look of polished metal */
html.fx-real .win-title, html.fx-real .hl-hud-name {
  background: linear-gradient(180deg, rgb(var(--r-core)) 0%, rgb(var(--r-core)) 40%, rgb(var(--r-lav)) 52%,
                              rgb(var(--r-vivid)) 70%, rgb(var(--r-indigo)) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 1px rgba(var(--r-core), 0.55)) drop-shadow(0 0 8px rgba(var(--r-vivid), 0.55));
}
/* the small window title: its line box is taller than its caps, so the horizon sits lower —
   the letters stay white-hot and only their feet take the colour (measured: at 11 px the full
   ramp read as dim grey) */
html.fx-real .win-title {
  background: linear-gradient(180deg, rgb(var(--r-core)) 0%, rgb(var(--r-core)) 55%, rgb(var(--r-lav)) 68%, rgb(var(--r-vivid)) 100%);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 1px rgba(var(--r-core), 0.8)) drop-shadow(0 0 6px rgba(var(--r-vivid), 0.8));
}
html.fx-real .win-sub { color: rgb(var(--r-lav)); }
/* glossy buttons: metal body, a wet highlight on the top half, a coloured glow */
html.fx-real .win-btn.approve, html.fx-real .hl-build {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.10) 48%, transparent 52%),
    linear-gradient(180deg, rgb(var(--r-lav)), rgb(var(--r-vivid)) 55%, rgb(var(--r-indigo)));
  color: #fff; text-shadow: 0 1px 2px rgba(var(--r-abyss), 0.9);
  border-color: rgba(var(--r-core), 0.7);
  box-shadow: inset 0 -1px 0 rgba(var(--r-abyss), 0.5), 0 0 2px rgba(var(--r-core), 0.9),
              0 0 14px rgba(var(--r-vivid), 0.55), 0 0 30px rgba(var(--r-indigo), 0.35);
}
html.fx-real .win-btn:not(.approve):hover {
  border-color: rgba(var(--r-lav), 0.6);
  box-shadow: inset 0 1px 0 rgba(var(--r-core), 0.18), 0 0 12px rgba(var(--r-vivid), 0.35);
}
/* the lit divider: hot centre, hue-shifting to indigo at the ends */
html.fx-real .win-sub::after {
  background: linear-gradient(90deg, transparent, rgba(var(--r-indigo), 0.8) 20%, rgba(var(--r-core), 0.95) 50%,
                              rgba(var(--r-vivid), 0.8) 78%, transparent);
}
html.fx-real .rail-item.sel {
  background: linear-gradient(90deg, rgba(var(--r-vivid), 0.30), rgba(var(--r-indigo), 0.10) 60%, transparent);
  box-shadow: inset 2px 0 0 rgb(var(--r-core)), inset 3px 0 8px rgba(var(--r-vivid), 0.6), var(--glow-focus);
}
html.fx-real #nexus-fx .fx-floor {
  background: radial-gradient(ellipse at 50% 30%, rgba(var(--r-lav), 0.20), rgba(var(--r-vivid), 0.14) 22%,
                              rgba(var(--r-indigo), 0.10) 45%, transparent 70%);
}

/* THEME picker (Settings) */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin: 6px 0 10px; }
.theme-card { position: relative; height: 92px; border-radius: 10px; overflow: hidden; cursor: pointer; text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.08); background: #000; color: #fff; padding: 0; }
.theme-card canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.theme-card .tc-name { position: absolute; left: 9px; bottom: 20px; font: 600 12px 'Oswald', sans-serif; letter-spacing: 0.14em; text-transform: uppercase; }
.theme-card .tc-note { position: absolute; left: 9px; bottom: 7px; font-size: 11px; letter-spacing: 0.1em; opacity: 0.7; }
.theme-card.sel { outline: 2px solid #fff; outline-offset: 2px; }
/* S78 HOME STYLE cards: a small drawing of each style, in the theme's ramp */
.home-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin: 6px 0 10px; }
.home-card { position: relative; height: 92px; border-radius: 10px; overflow: hidden; cursor: pointer; text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.08); color: #fff; padding: 0; background: #000; }
.home-card::before { content: ''; position: absolute; left: 50%; top: 38%; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; }
.home-card[data-home="mana"]::before { background: radial-gradient(circle at 40% 35%, rgb(var(--r-core, 248,242,255)), rgb(var(--r-vivid, 138,52,255)) 45%, rgb(var(--r-indigo, 70,44,214)) 80%);
  box-shadow: 0 0 18px rgba(var(--r-vivid, 138,52,255), 0.8), 0 0 40px rgba(var(--r-indigo, 70,44,214), 0.6); }
.home-card[data-home="eclipse"]::before { background: #030108;
  box-shadow: 0 0 0 1.5px rgb(var(--r-core, 248,242,255)), 0 0 8px 2px rgba(var(--r-lav, 200,172,255), 0.9), 0 0 30px 6px rgba(var(--r-vivid, 138,52,255), 0.6); }
.home-card[data-home="gate"]::before { width: 22px; height: 22px; margin: -11px 0 0 -11px;
  background: radial-gradient(circle, rgb(var(--r-core, 248,242,255)), rgb(var(--r-vivid, 138,52,255)) 60%);
  box-shadow: 0 0 0 9px transparent, 0 0 0 10px rgba(var(--r-lav, 200,172,255), 0.8), 0 0 0 17px transparent, 0 0 0 18px rgba(var(--r-indigo, 70,44,214), 0.9), 0 0 24px rgba(var(--r-vivid, 138,52,255), 0.7); }
.home-card[data-home="arise"]::before { background: radial-gradient(circle at 40% 35%, rgb(var(--r-core, 248,242,255)), rgb(var(--r-vivid, 138,52,255)) 55%);
  box-shadow: 0 0 20px rgba(var(--r-vivid, 138,52,255), 0.8); }
.home-card[data-home="arise"]::after { content: ''; position: absolute; left: 12%; right: 12%; bottom: 30px; height: 12px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(var(--r-vivid, 138,52,255), 0.8), transparent 70%); }
.home-card .tc-name { position: absolute; left: 9px; bottom: 20px; font: 600 12px 'Oswald', sans-serif; letter-spacing: 0.14em; text-transform: uppercase; }
.home-card .tc-note { position: absolute; left: 9px; bottom: 7px; font-size: 11px; letter-spacing: 0.1em; opacity: 0.7; }
.home-card.sel { outline: 2px solid #fff; outline-offset: 2px; }
.theme-hue { width: 100%; margin: 2px 0 8px; accent-color: rgb(var(--acc-vivid)); }

/* S77 — Health: basics facts on the HUD, menopause view, past-periods editor */
.hl-hud-facts { font: 600 11px 'Space Grotesk', sans-serif; letter-spacing: 0.2em; color: var(--text-mid, #a9a2c4); margin-top: 2px; }
.hl-meno-alert { border-color: rgba(255, 93, 122, 0.7) !important; color: #ffb3c1 !important; font-weight: 600; }
.hl-count { min-width: 28px; text-align: center; font: 600 16px 'Space Grotesk', sans-serif; }
.hl-paste { width: 100%; font-family: ui-monospace, Consolas, monospace; font-size: 12px; margin: 6px 0 4px; resize: vertical; }
/* S77 fix (his screenshot: 'why would it ask a male if he has periods'): .hl-field is display:grid,
   which beat the [hidden] attribute — so the rows meant to hide for men still showed */
.hl-field[hidden], .hl-form [hidden] { display: none !important; }

/* S78 — anatomy: tools under the body, procedure list, labels inside the body */
.hl-anat-tools { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.hl-anat-tools .win-btn { font-size: 11px; padding: 4px 9px; }
.hl-procs { margin-top: 8px; }
.hl-proc-h { font: 600 11px 'Space Grotesk', sans-serif; letter-spacing: .2em; color: var(--text-dim); margin-bottom: 4px; }
.hl-proc { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.hl-proc-t { font-weight: 600; color: var(--text); }
.hl-proc-d { color: var(--text-dim); flex: 1 1 200px; }
.hl-proc.draft .hl-proc-t::after { content: ' · DRAFT'; color: #ffb86b; font-weight: 500; }
.hl-proc .win-btn { font-size: 11px; padding: 2px 7px; }
.hl3d-label.hl3d-anat { color: #e9e2f5; border-left-color: rgba(255, 255, 255, 0.35); text-shadow: 0 0 4px #000, 0 0 8px #000; }
.hl3d-label.hl3d-anat.proc { color: #fff; border-left-color: #fff; font-size: 11px; }
.hl3d-label.hl3d-anat.vessel { color: #ff9aa4; letter-spacing: .2em; }
.hl3d-label.hl3d-anat.site { color: #ffd98a; border-left-color: #ffd98a; }
.hl-where { font-size: 11px !important; padding: 2px 8px !important; margin: 4px 0; }

/* S78 — interaction outcome */
.hl-ix-what { font-size: 12px; color: var(--text); margin-top: 2px; line-height: 1.35; }
.hl-ix-watch { font-size: 11px; color: #ffcf8a; margin-top: 2px; line-height: 1.35; }
.hl-ingr-chip.clickable { cursor: pointer; }
.hl-ingr-chip.clickable:hover { border-color: #ffd98a; color: #ffd98a; }

/* S78 (his ask: "give more room to the model — flexible to the window / panel size"): the body
   grows with the window (and shrinks on small ones), and takes the larger share of the panel */
.hl-grid { grid-template-columns: minmax(300px, 1.15fr) minmax(300px, 0.85fr); }
.hl3d { height: clamp(420px, calc(100vh - 300px), 1150px); }
@container (max-width: 700px) { .hl-grid { grid-template-columns: 1fr; } .hl3d { height: clamp(360px, 70vh, 700px); } }
.hl-where { display: inline-flex !important; width: auto !important; align-self: flex-start; }

/* S78 — view switch + anatomy layers */
.hl-seg { display: inline-flex; gap: 0; }
.hl-seg .win-btn { border-radius: 0; margin: 0; }
.hl-seg .win-btn:first-child { border-radius: 8px 0 0 8px; }
.hl-seg .win-btn:last-child { border-radius: 0 8px 8px 0; }
.hl-layers { display: flex; flex-wrap: wrap; gap: 4px; width: 100%; }
.hl-layers[hidden] { display: none !important; }
.hl-layer { font: 600 11px 'Space Grotesk', sans-serif; letter-spacing: .14em; padding: 3px 8px; border-radius: 999px;
  border: 1px solid var(--line); background: transparent; color: var(--text-dim); cursor: pointer; }
.hl-layer.on { color: #fff; border-color: rgba(var(--r-lav, 200,172,255), .7); background: rgba(var(--r-vivid, 138,52,255), .22); }

/* S78 — the body report */
.hl-report { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; margin: 6px 0; }
.hl-rep { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: rgba(0, 0, 0, 0.18); }
.hl-rep.warn { border-color: rgba(255, 184, 107, 0.55); }
.hl-rep.info { border-style: dashed; }
.hl-rep-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.hl-rep-t { font: 600 11px 'Space Grotesk', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim); }
.hl-rep.warn .hl-rep-t { color: #ffcf8a; }
.hl-rep-v { font: 600 15px var(--font-display, 'Oswald', sans-serif); color: var(--text); white-space: nowrap; }
.hl-rep-x { font-size: 12px; line-height: 1.4; color: var(--text); margin-top: 3px; }
.hl-sub2 { margin-top: 10px; }

/* S78 (his screenshot: the organ chips "getting pulled into the 3D blackness"): the legend had a
   negative top margin that slid it up over the canvas. Its own band below the body, an even grid. */
.hl-legend { margin-top: 0; padding: 10px 12px 6px; display: grid; gap: 6px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.15));
  border-top: 1px solid var(--line); position: relative; z-index: 1; }
.hl-legend .hl-organ { text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hl-anat-tools { padding: 6px 12px 2px; margin: 0; }

/* S78 — the tape toggle: a small dot in the corner of the 3D view */
.hl3d-tape { position: absolute; top: 10px; right: 10px; z-index: 3; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35); background: transparent; cursor: pointer; padding: 0; }
.hl3d-tape::after { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.25); }
.hl3d-tape.on { border-color: rgba(var(--acc2, 182,196,255), 0.9); box-shadow: 0 0 8px rgba(var(--acc2, 182,196,255), 0.6); }
.hl3d-tape.on::after { background: rgb(var(--acc2, 182,196,255)); }

/* ─── S80 — CHAT LOG (System) ─── */
.cl-bar { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.cl-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cl-row .win-input { flex: 1 1 140px; min-width: 0; }
.cl-chip { font-size: 11px; letter-spacing: 0.12em; padding: 4px 9px; opacity: 0.65; }
.cl-chip.on { opacity: 1; border-color: var(--text-accent); background: rgba(var(--acc-deep), 0.45); }
.cl-main { display: flex; gap: 10px; flex: 1; min-height: 0; }
.cl-list { flex: 0 0 240px; }
.cl-day { font-size: 11px; letter-spacing: 0.2em; color: var(--text-dim); padding: 8px 2px 2px; text-transform: uppercase; }
.cl-item-top { font-size: 11px; color: var(--text-accent); }
.cl-item-pv { font-size: 11px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.cl-head { font-size: 11px; letter-spacing: 0.08em; color: var(--text-dim); padding: 2px 2px 6px; border-bottom: 1px solid var(--panel-border); }
@media (max-width: 700px) {
  .cl-main { flex-direction: column; }
  .cl-list { flex: 0 0 auto; max-height: 38vh; }
}

/* ─── S80 — MISSIONS (the agent crew) ─── */
.agent-card.mission { border-left: 2px solid var(--violet-bright); }
.mission-step { display: flex; gap: 8px; align-items: flex-start; padding: 3px 0; font-size: 12px; }
.mission-step .nx-status { min-width: 18px; text-align: center; }
.mission-step.has-out { cursor: pointer; }
.mission-step.has-out:hover .mission-step-txt { color: var(--text-accent); }
.mission-step-txt { flex: 1; word-break: break-word; }

/* ══════════════════════════════════════════════════════════════════════════
   S84 — SHELL POLISH (his ask: "improve the whole UI"; header · rail · activity · composer)
   A refinement of the Shadow Monarch world, not a new look: same tokens, same light.
   What it fixes: text glyphs standing in for icons (◎ ✉ ☰ ▤ ◐ ⚙ ➤) → one drawn icon family;
   an 18-row all-caps rail with no anchors → icon + name rows on a tighter rhythm; an activity
   column that gave empty sections the same weight as live ones and printed raw field names;
   browser defaults nobody themed (selection, caret, scrollbars, keyboard focus).
   ⚠ Nothing here touches the .nexus-window compositing trio (the S35 flicker fix).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── browser surfaces ─────────────────────────────────────────────────────── */
::selection { background: rgba(var(--acc-vivid), 0.45); color: #fff; }
html { caret-color: rgb(var(--acc-hi)); }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(var(--acc-line2), 0.22); border-radius: 8px;
  border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background-color: rgba(var(--acc-line2), 0.42); }
button:focus-visible, [role="button"]:focus-visible, summary:focus-visible {
  outline: 1px solid rgba(var(--acc-hi), 0.85); outline-offset: 2px; }

/* ── one icon family ──────────────────────────────────────────────────────── */
.ghost-btn svg, .rail-item svg, #nexus-send svg {
  width: 17px; height: 17px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

/* ── header ───────────────────────────────────────────────────────────────── */
.hdr-right { gap: 2px; align-items: center; }
.ghost-btn {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-mid);                 /* was --text-dim: the row read as disabled */
}
.hdr-sep { width: 1px; height: 18px; margin: 0 8px; background: var(--line-strong); }
#nexus-user-chip { margin-right: 8px; }
#nexus-dot-label { font-size: 11px; letter-spacing: 0.22em; }

/* ── rail: icon + name, tight rows, clear groups ──────────────────────────── */
.rail-body { gap: 1px; padding: 4px 8px 12px; }
.rail-group {
  font-size: 11px; letter-spacing: 0.16em; color: var(--text-dim);
  padding: 16px 10px 6px; margin: 0;
}
.rail-group:first-child { padding-top: 8px; }
.rail-item {
  display: flex; align-items: center; gap: 11px;
  padding: 7px 10px;
  font-family: 'Space Grotesk', sans-serif;      /* his call: keep the rail's own face, not Inter */
  font-size: 13px; letter-spacing: 0.03em;
}
.rail-item svg { color: var(--text-dim); transition: color var(--t-fast) var(--ease); }
.rail-item:hover svg, .rail-item.sel svg { color: rgb(var(--acc-hi)); }
.rail-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── activity column: live things carry weight, empty ones recede ─────────── */
.act-inner { padding: 10px 12px 90px; }
#nexus-activity section { margin-bottom: 0; padding: 6px 0 10px; }
#nexus-activity section + section { border-top: 1px solid var(--line); }
#nexus-activity h2 {
  font-size: 11px; letter-spacing: 0.16em;
  padding: 6px 4px; margin: 0; border-bottom: none;
}
#nexus-activity section:has(> ul:empty) { padding-bottom: 2px; }
#nexus-activity section:has(> ul:empty) h2 { opacity: 0.5; }
.act-badge { display: none; font-variant-numeric: tabular-nums;
  background: rgba(var(--acc-vivid), 0.18); border: 1px solid rgba(var(--acc-hi), 0.25); }
.act-badge[data-n] { display: inline-block; }
.act-entry {
  font-size: 12px; line-height: 1.45; opacity: 1;
  color: var(--text-mid);
  padding: 7px 9px; margin: 4px 0 0;
  border: 1px solid var(--line); border-left-width: 1px; border-radius: var(--r1);
  background: rgba(255, 255, 255, 0.025);
}
.act-entry.live { color: var(--text); border-color: var(--line-strong); border-left-color: var(--line-strong); }
.act-entry.warn { color: #ffcf8a; border-color: rgba(255, 184, 107, 0.45); }
.act-idle { font-style: normal; opacity: 0.55; border-style: dashed; background: transparent; }
@keyframes entry-in { from { transform: translateX(12px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── composer ─────────────────────────────────────────────────────────────── */
#nexus-inputbar {
  width: min(640px, calc(100vw - 32px));
  border-radius: 18px;
  transition: border-color var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
}
/* room for the rail on the left and the activity column on the right, whichever is wider */
@media (min-width: 1000px) { #nexus-inputbar { max-width: calc(100vw - 552px); } }
#nexus-inputbar:focus-within {
  border-color: rgba(var(--acc-hi), 0.55);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(var(--acc-vivid), 0.28);
}
#nexus-send { display: flex; align-items: center; justify-content: center; }
#nexus-send svg { width: 18px; height: 18px; stroke-width: 2; }
#nexus-input { font-size: 14.5px; }

@media (prefers-reduced-motion: reduce) { .act-entry { animation: none; } }
/* phone: the header row is full already - no separator, the old 32px buttons */
@media (max-width: 700px) {
  .hdr-sep { display: none; }
  .ghost-btn { width: 32px; height: 32px; }
  #nexus-user-chip { margin-right: 2px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   S84 — PANEL SKELETON (P.ui in nexus-panels.js): one tab bar, one loading / empty / error look.
   Why: seven home-made tab mechanisms, and the ACTIVE TAB was marked with .win-btn.approve - the green "confirm"
   style - so a tab read as a button waiting to be pressed. A tab is not an action: it gets its own component.
   Same tokens and light as the rest of Shadow Monarch; fonts unchanged (his call).
   ══════════════════════════════════════════════════════════════════════════ */
.nx-tabs {
  display: flex; gap: 2px; flex-wrap: wrap;
  margin: 0 0 var(--s3);
  border-bottom: 1px solid var(--line);
}
.nx-tab {
  position: relative;
  padding: 8px 14px 9px;
  font: var(--ty-tab); letter-spacing: var(--ty-tab-track); text-transform: uppercase;   /* S85 type scale */
  color: var(--text-dim);
  background: transparent; border: 0; border-radius: var(--r1) var(--r1) 0 0;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.nx-tab:hover { color: var(--text); background: var(--surface-2); }
.nx-tab.on { color: var(--text); }
/* the lit underline sits ON the bar's hairline, so the active tab reads as part of the page below it */
.nx-tab.on::after {
  content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px;
  background: rgb(var(--acc-hi));
}
html.fx-real .nx-tab.on::after {
  background: linear-gradient(90deg, rgba(var(--r-indigo), 0.9), rgb(var(--r-core)) 50%, rgba(var(--r-vivid), 0.9));
  box-shadow: 0 0 8px rgba(var(--r-vivid), 0.7);
}
.nx-tab:focus-visible { outline: none; box-shadow: var(--glow-focus); }
.nx-pane { min-height: 0; }

.nx-state {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2);
  padding: var(--s4);
  border: 1px dashed var(--line); border-radius: var(--r2);
  color: var(--text-mid);
}
.nx-state-text { font-size: 13px; color: var(--text); }
.nx-state-hint { font-size: 12px; color: var(--text-dim); line-height: 1.5; word-break: break-word; }
.nx-state.is-loading { border-style: solid; border-color: transparent; padding-left: 0; flex-direction: row; align-items: center; }
.nx-state.is-loading .nx-state-text { color: var(--text-dim); }
.nx-state.is-loading::before {
  content: ''; width: 12px; height: 12px; flex: none; border-radius: 50%;
  border: 2px solid var(--line-strong); border-top-color: rgb(var(--acc-hi));
  animation: nx-spin 0.8s linear infinite;
}
@keyframes nx-spin { to { transform: rotate(360deg); } }
.nx-state.is-error { border-style: solid; border-color: rgba(255, 107, 138, 0.34); background: rgba(255, 107, 138, 0.05); }
.nx-state.is-error .nx-state-text { color: #FF9DB1; }
@media (prefers-reduced-motion: reduce) { .nx-state.is-loading::before { animation: none; } }

/* S84 — GALLERY's tab bar on the skeleton LOOK (his screenshot: "something appeared like black").
   The pinned bar had a near-black fill (S74, so photos do not scroll through it) that read as a black strip on the
   lighter Shadow Monarch window, and its active tab was the glossy "confirm" button. The gallery keeps its own tab
   MECHANISM (each tab stays alive in the background, S76) - only the look changes, so this is CSS only. */
.gal-tabs {
  gap: 2px; padding: 12px 0 0; margin-bottom: var(--s3);
  /* any OPAQUE fill reads as a dark strip, because the window itself is tinted glass over the scene. So the bar is
     the same glass: a light tint + a strong blur. What scrolls underneath turns to a soft smear, not legible text -
     which is what "the headers are colliding" (S74) needed, without the black band. */
  background: rgba(var(--bg-surf2), 0.55);
  border-bottom: 1px solid var(--line);
  box-shadow: none;
  backdrop-filter: blur(22px) saturate(1.2); -webkit-backdrop-filter: blur(22px) saturate(1.2);
}
html.fx-real .gal-tabs { background: rgba(var(--bg-surf2), 0.55); }
/* S85 — third time he pointed at the same band ("the abnormal blackness is still there", circle on the bar's left
   edge). A blur nested inside the window's own blur cannot see the scene, so the "glass" was just a darker tint.
   Real fix: the bar is no longer pinned OVER the scrolling content - the pane below it scrolls instead - so the bar
   needs no fill at all and is simply the window. */
.win-body.gal-body { overflow: hidden; }
.gal-body > .gal-tabs,
html.fx-real .gal-body > .gal-tabs {
  position: static; top: auto; margin-top: 0; padding-top: 0; flex: none;
  background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.gal-body > .gal-pane { flex: 1; min-height: 0; overflow-y: auto; }
.gal-body > .gal-pane > * { flex-shrink: 0; }
.gal-tabs .win-btn[data-tab],
html.fx-real .gal-tabs .win-btn[data-tab],
html.fx-real .gal-tabs .win-btn[data-tab].approve {
  position: relative;
  padding: 8px 14px 9px;
  font: var(--ty-tab); letter-spacing: var(--ty-tab-track); text-transform: uppercase;   /* S85 type scale */
  color: var(--text-dim); text-shadow: none;
  background: transparent; border: 0; border-radius: var(--r1) var(--r1) 0 0; box-shadow: none;
}
.gal-tabs .win-btn[data-tab]:hover,
html.fx-real .gal-tabs .win-btn[data-tab]:hover { color: var(--text); background: var(--surface-2); box-shadow: none; }
.gal-tabs .win-btn[data-tab].approve,
html.fx-real .gal-tabs .win-btn[data-tab].approve { color: var(--text); }
.gal-tabs .win-btn[data-tab].approve::after {
  content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px;
  background: rgb(var(--acc-hi));
}
html.fx-real .gal-tabs .win-btn[data-tab].approve::after {
  background: linear-gradient(90deg, rgba(var(--r-indigo), 0.9), rgb(var(--r-core)) 50%, rgba(var(--r-vivid), 0.9));
  box-shadow: 0 0 8px rgba(var(--r-vivid), 0.7);
}

/* ══════════════════════════════════════════════════════════════════════════
   S85 — TYPE SCALE. His words: "font size mismatches and font all across".
   Measured on Gallery: 8 different text styles on one screen, sizes 10 / 11 / 12 / 12.5 / 14px - and every button,
   the search box and the people chips were in ARIAL: form controls do not inherit a font, and none was ever set.
   Five roles, ONE font + size + weight + tracking each. His fonts stay (Space Grotesk / Inter); only the weights the
   font files really carry are used (Space Grotesk 400 / 500 / 700, Inter 400 / 500 / 600 - a "600" Space Grotesk was
   silently drawn as 700).
     title    window title            Space Grotesk 14 / 700 / wide caps   (all panels)
     tab      a panel's tabs          Space Grotesk 13 / 700 / caps        (all panels)
     label    section labels          Space Grotesk 11 / 700 / caps
     control  buttons, filter chips   Space Grotesk 11 / 500 / caps
     body     what he reads / types   Inter 13 / 400   (strong = 600 for a card heading)
     meta     counts, captions, hints Inter 11 / 400
   Judged by him on Gallery first ("now it's corrected, apply to all"), then widened to every window body (.win-body).
   A panel-specific class that is still off the scale gets added to the role lists below - never a new size.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  /* his verdict on the first sample: "85% okay" - the window title and the tabs are HEADINGS and must carry the
     weight, so they step up in size (14 / 13) instead of sharing 11px with everything under them */
  /* SCREEN-AWARE (his ask): fixed px read right on a small screen and small on a big one. The three sizes hold their
     base up to a ~1600px-wide screen, then grow with it, capped. 1920 wide = about +9 %; 2560 = about +25 %. */
  --ty-s11: clamp(11px, 0.30vw + 6.2px, 14px);
  --ty-s13: clamp(13px, 0.36vw + 7.3px, 16.5px);
  --ty-s14: clamp(14px, 0.38vw + 7.9px, 18px);
  /* S88 (11 Oct, his, on a screenshot of Health): "panels headings are now mismatched its suppose to be bigger since
     its a heading" - the window title was 14 against 13 for the tabs under it, one pixel is not a step. The title
     takes its own size, 17: title 17 > tabs 13 > labels 11. */
  --ty-s17: clamp(17px, 0.46vw + 9.6px, 22px);
  --ty-title:   700 var(--ty-s17)/1.2 'Space Grotesk', sans-serif;   --ty-title-track:   0.3em;
  --ty-tab:     700 var(--ty-s13)/1.3 'Space Grotesk', sans-serif;   --ty-tab-track:     0.16em;
  --ty-label:   700 var(--ty-s11)/1.3 'Space Grotesk', sans-serif;   --ty-label-track:   0.18em;
  --ty-control: 500 var(--ty-s11)/1.2 'Space Grotesk', sans-serif;   --ty-control-track: 0.12em;
  --ty-body:    400 var(--ty-s13)/1.45 'Inter', system-ui, sans-serif;
  --ty-strong:  600 var(--ty-s13)/1.35 'Inter', system-ui, sans-serif;
  --ty-meta:    400 var(--ty-s11)/1.45 'Inter', system-ui, sans-serif;
}
/* the Arial leak, everywhere: a control with no font of its own takes the page's font, not the browser's */
button, input, select, textarea { font-family: inherit; }
html .win-title, html.fx-real .win-title { font: var(--ty-title); letter-spacing: var(--ty-title-track); }

html .win-body .win-sub { font: var(--ty-label); letter-spacing: var(--ty-label-track); text-transform: uppercase; }
html .win-body .win-btn:not([data-tab]) { font: var(--ty-control); letter-spacing: var(--ty-control-track); text-transform: uppercase; }
html .win-body .win-input:not(.term-input),
html .win-body .id-chip,
html .win-body .people-detail { font: var(--ty-body); letter-spacing: 0; }
/* a bare field with no class: body text - at zero weight, so a field that sets its own font (terminal, code) keeps it */
:where(.win-body) :where(input, select, textarea) { font: var(--ty-body); }
html .win-body .agent-title { font: var(--ty-strong); letter-spacing: 0; }
html .win-body .agent-meta,
html .win-body .agent-strip,
html .win-body .nx-note,
html .win-body .nx-state-hint,
html .win-body .gal-people,
html .win-body .people-when,
html .win-body .nx-pin-count,
html .win-body summary { font: var(--ty-meta); letter-spacing: 0; }
html .win-body .nx-state-text { font: var(--ty-body); }
/* `font:` resets numeral style - numbers that refresh must still line up */
html .win-body .agent-meta, html .win-body .win-input, html .win-body .id-chip { font-variant-numeric: tabular-nums; }
/* leftovers found by measuring every panel and tab on screen (S85). Tracked small words = label / control;
   half-pixel sizes (11.5 / 12 / 12.5) fold into meta or body. Left alone on purpose: Health's HUD (Cinzel, its own
   design), code fonts (terminal, console, tool names), the big stat numbers, icons, the map library's credit line. */
html .win-body .nx-status,
html .win-body .sen-word { font: var(--ty-label); letter-spacing: var(--ty-label-track); text-transform: uppercase; }
html .win-body .conn-state,
html .win-body .nx-stat-label,
html .win-body .sys-loading,
html .win-body .cl-day,
html .win-body .msg-role { font: var(--ty-control); letter-spacing: var(--ty-control-track); text-transform: uppercase; }
html .win-body .nx-band-badge { font-family: 'Space Grotesk', sans-serif; }
html .win-body .conn-mode,
html .win-body .cl-head,
html .win-body .sen-head,
html .win-body .sen-name,
html .win-body .nx-meter-right,
html .win-body .nx-kv-k,
html .win-body .nx-kv-v { font: var(--ty-meta); letter-spacing: 0; font-variant-numeric: tabular-nums; }
html .win-body .nx-row-title,
html .win-body .mission-step-txt { font: var(--ty-body); letter-spacing: 0; }
html .win-body .sys-head { font: var(--ty-label); letter-spacing: var(--ty-label-track); text-transform: uppercase; }
html .win-body .sys-label,
html .win-body .sys-foot { font: var(--ty-control); letter-spacing: var(--ty-control-track); text-transform: uppercase; }
html .win-body .sys-value,
html .win-body .nx-card-title { font: var(--ty-body); letter-spacing: 0; font-variant-numeric: tabular-nums; }
html .win-body .nx-notice-title { font: var(--ty-strong); letter-spacing: 0; }
html .win-body .nx-notice,
html .win-body .nx-meter-top,
html .win-body .nx-ep-tag,
html .win-body .nx-kv,
html .win-body .sen-sug-text { font: var(--ty-meta); letter-spacing: 0; font-variant-numeric: tabular-nums; }
html .win-body .room-text,
html .win-body .sug-name { font: var(--ty-body); letter-spacing: 0; }
/* text the on-screen measuring could not reach (dialogs, an open photo, forms behind a button, rarely-shown rows):
   taken from the stylesheet itself - every rule that still carried 11.5 / 12 / 12.5px. No .win-body scope here, because
   some of these live in overlays outside a window (the photo viewer). */
html .win-item, html .email-body, html .sys-err, html .tp-label, html .nx-h2h-name, html .room-empty,
html .nx-map-note, html .gal-cap, html .gal-fact, html .mission-step, html .set-slider-val,
html .hl-food-advice, html .hl-food-weight, html .hl-lab-row, html .hl-visit-meds, html .hl-proc, html .hl-ix-what {
  font-size: var(--ty-s13); }
html .seg-btn { font: var(--ty-control); letter-spacing: var(--ty-control-track); text-transform: uppercase; }
html .tool-chip { font-size: var(--ty-s11); }

/* ══════════════════════════════════════════════════════════════════════════
   S85 — HOME "TODAY" STRIP (nexus-today.js) + COMMAND BAR (nexus-cmdk.js) + HELPER screen bits.
   Same glass, hairlines and type roles as the rest; nothing new invented.
   ══════════════════════════════════════════════════════════════════════════ */
#nexus-today {
  position: fixed; top: 62px; left: 50%; transform: translateX(-50%);
  z-index: 14;                                   /* under the activity column, the rail and every window */
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2);
  max-width: min(980px, calc(100vw - 560px));
}
#nexus-today[hidden] { display: none; }
.td-chip {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: baseline; gap: var(--s2);
  padding: 6px 12px 7px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface-1);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  color: var(--text); cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.td-chip:hover { border-color: var(--line-strong); background: var(--surface-2); }
.td-chip:focus-visible { outline: none; box-shadow: var(--glow-focus); }
.td-k { font: var(--ty-control); letter-spacing: var(--ty-control-track); text-transform: uppercase; color: var(--text-dim); }
.td-v { font: var(--ty-body); font-variant-numeric: tabular-nums; white-space: nowrap; }
.td-chip.is-ok .td-v   { color: var(--state-ok); }
.td-chip.is-warn .td-v { color: var(--state-warn); }
.td-chip.is-live .td-k::before {
  content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 6px;
  background: var(--state-ok); vertical-align: 1px; animation: td-pulse 1.6s ease-in-out infinite;
}
@keyframes td-pulse { 50% { opacity: 0.25; } }
.td-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--line); }
.td-bar > span { display: block; height: 100%; background: rgb(var(--acc-hi)); }
.td-chip.is-ok .td-bar > span { background: var(--state-ok); }
@media (max-width: 1100px) { #nexus-today { max-width: calc(100vw - 24px); } }
@media (max-width: 700px)  { #nexus-today { position: static; transform: none; margin: 60px 12px 0; } }
@media (prefers-reduced-motion: reduce) { .td-chip.is-live .td-k::before { animation: none; } }

.ck-overlay {
  position: fixed; inset: 0; z-index: 95;        /* above the photo viewer (60 / 70 / 90) */
  display: flex; justify-content: center; align-items: flex-start; padding-top: 16vh;
  background: rgba(var(--bg-void), 0.55);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.ck-box {
  width: min(560px, 92vw);
  border: 1px solid var(--line-strong); border-radius: var(--r3);
  background: var(--surface-3);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6), var(--glow-focus);
  overflow: hidden;
}
.ck-input {
  width: 100%; padding: 14px var(--s4);
  border: 0; border-bottom: 1px solid var(--line); outline: none;
  background: transparent; color: var(--text);
  font: var(--ty-body); font-size: calc(var(--ty-s13) + 2px);
}
.ck-input::placeholder { color: var(--text-dim); }
.ck-list { max-height: 46vh; overflow-y: auto; padding: var(--s1); }
.ck-row {
  width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
  padding: 9px var(--s3); border: 0; border-radius: var(--r1);
  background: transparent; color: var(--text-mid); cursor: pointer; text-align: left;
}
.ck-row.sel { background: var(--surface-2); color: var(--text); box-shadow: inset 2px 0 0 rgb(var(--acc-hi)); }
.ck-label { font: var(--ty-body); }
.ck-kind  { font: var(--ty-control); letter-spacing: var(--ty-control-track); text-transform: uppercase; color: var(--text-dim); }
.ck-foot  { padding: 7px var(--s4); border-top: 1px solid var(--line); font: var(--ty-meta); color: var(--text-dim); }

html .win-body details > .nx-console { margin-top: var(--s2); max-height: 320px; white-space: pre-wrap; }

/* S86 — the GOOD room and FAMILY panel are movable windows now: their header is the handle */
.room-panel > .room-head { cursor: move; touch-action: none; user-select: none; }
.room-panel .win-grip { z-index: 2; }
@media (max-width: 700px) { .room-panel > .room-head { cursor: default; touch-action: auto; } .room-panel .win-grip { display: none; } }

/* ══════════════════════════════════════════════════════════════════════════
   S86 — WEATHER IN THE ACTIVITY COLUMN (nexus-weather.js). The canvas sits behind the column's contents; the card
   is the column's first section. Type from the S85 roles only.
   ══════════════════════════════════════════════════════════════════════════ */
#act-wx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
#nexus-activity .act-inner { position: relative; z-index: 1; }
#act-wx-card { padding: 4px 2px 14px; border-bottom: 1px solid var(--line); margin-bottom: 4px; cursor: default; }
#act-wx-card .wx-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
#act-wx-card .wx-day { font: var(--ty-label); letter-spacing: var(--ty-label-track); text-transform: uppercase; color: var(--text-mid); }
#act-wx-card .wx-date { font: var(--ty-strong); color: var(--text); margin-top: 2px; }
#act-wx-card .wx-temp { display: flex; align-items: center; gap: 6px; color: var(--text); }
#act-wx-card .wx-temp span { font: 500 calc(var(--ty-s14) * 1.7)/1 'Space Grotesk', sans-serif; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
#act-wx-card .wx-temp svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; }
#act-wx-card .wx-line { font: var(--ty-meta); color: var(--text-mid); margin-top: 6px; text-transform: none; }
#act-wx-card .wx-line::first-letter { text-transform: uppercase; }
#act-wx-card.is-stale .wx-line, #act-wx-card .cu-wx.is-stale .wx-line { color: var(--text-dim); font-style: italic; }   /* S90: the island puts is-stale on its own root */
/* S86 — weather card v1.1: details always visible, Hijri + Malayalam, a date look-up; the comet layer */
#act-wx-card .wx-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; margin: 10px 0 0; }
#act-wx-card .wx-facts dt { font: var(--ty-control); letter-spacing: var(--ty-control-track); text-transform: uppercase; color: var(--text-dim); }
#act-wx-card .wx-facts dd { font: var(--ty-body); color: var(--text); margin: 1px 0 0; font-variant-numeric: tabular-nums; }
#act-wx-card .wx-cal { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); display: grid; gap: 4px; }
#act-wx-card .wx-cal > div, #act-wx-card .wx-look-out > div, #act-wx-card .wx-mal { display: flex; align-items: baseline; gap: 8px; }
#act-wx-card .wx-look .wx-mal { margin-top: 6px; }
#act-wx-card .wx-k { flex: none; width: 88px; font: var(--ty-control); letter-spacing: var(--ty-control-track); text-transform: uppercase; color: var(--text-dim); }
#act-wx-card .wx-v { font: var(--ty-meta); color: var(--text); min-width: 0; }
#act-wx-card .wx-off { margin-left: auto; flex: none; padding: 0 6px; border: 1px solid var(--line); border-radius: var(--r1);
  background: transparent; color: var(--text-dim); font: var(--ty-meta); cursor: pointer; }
#act-wx-card .wx-off:hover { color: var(--text); border-color: var(--line-strong); }
#act-wx-card .wx-look { margin-top: 8px; }
#act-wx-card .wx-look summary { font: var(--ty-meta); color: var(--text-mid); cursor: pointer; }
#act-wx-card .wx-look-in { width: 100%; margin: 6px 0; color-scheme: dark; }
#act-wx-card .wx-look-out { display: grid; gap: 4px; }
#act-wx-card .wx-note { font: var(--ty-meta); color: var(--text-dim); font-style: italic; margin-top: 2px; }
#wx-comets { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 2; pointer-events: none; }

/* S86 — phones in the top bar (nexus-phones.js): cyan while a phone is live, a violet ring when one can update */
.phones-btn.phones-live svg { stroke: rgb(var(--acc2b)); filter: drop-shadow(0 0 6px rgba(var(--acc2b), .55)); }
.phones-btn.phones-behind::after { content: ''; position: absolute; inset: 3px; border-radius: 50%;
  border: 1px solid rgba(var(--acc-hi), .55); pointer-events: none; }
.phones-btn { position: relative; }