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

:root {
  --c-text: #d8d4cd;
  --c-accent: #e9d49a;
  color-scheme: dark;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --face-bg: #000;
  --face-fg: var(--c-text);
  --face-muted: rgba(216,212,205,0.35);
  --face-dim: rgba(216,212,205,0.18);
  --face-soft: rgba(216,212,205,0.08);
  --face-bar-height: 36px;
  --face-particle-size: 0.017;
  --face-glow-scale: 1.18;
  --face-phosphor-decay: 0.80;
  --transition-fast: 180ms;
  --transition-normal: 300ms;
  --ease-out: cubic-bezier(0.25,0.1,0.25,1);
  --z-ui: 90;
  --z-modal: 1000;
}

html, body {
  height: 100%;
  background: var(--face-bg);
  color: var(--face-fg);
  font: 16px/1.42 "Inter",-apple-system,system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-feature-settings: "ss01","cv05","kern" 1;
  text-rendering: optimizeLegibility;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  user-select: none;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Crect x='7' y='0' width='2' height='6' fill='%23f5f0e8'/%3E%3Crect x='7' y='10' width='2' height='6' fill='%23f5f0e8'/%3E%3Crect x='0' y='7' width='6' height='2' fill='%23f5f0e8'/%3E%3Crect x='10' y='7' width='6' height='2' fill='%23f5f0e8'/%3E%3C/svg%3E") 8 8, crosshair;
}

body.font-mono {
  font-family: "JetBrains Mono","Cascadia Code","Fira Code",ui-monospace,"SFMono-Regular",Menlo,Monaco,Consolas,monospace;
}

body[data-high-contrast="1"] {
  --face-fg: #fff;
  --face-muted: #fff;
  --face-dim: #fff;
  --face-soft: #fff;
}
body[data-high-contrast="1"] .msg-body { color: #fff; }
body[data-high-contrast="1"] .enhance-text { color: #fff; }

body[data-runtime-visible="false"] canvas { filter: brightness(0.45) contrast(0.85); }
body[data-runtime-profile="battery"] canvas { filter: grayscale(0.25) brightness(0.72); }
body[data-runtime-profile="full"] canvas { filter: none; }

canvas {
  position: fixed;
  inset: 0;
  display: block;
  width: 100dvw;
  height: 100dvh;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  touch-action: none;
  transition: filter var(--transition-fast) var(--ease-out);
}

body.face-loading::before, body.face-ready::before { display: none; }

body[data-tts-loading="true"] .ui-status {
  opacity: .9;
  animation: ttsPulse 620ms steps(4,end) infinite;
}

@keyframes faceBootPulse {
  0%, 100% { opacity: .42; }
  50% { opacity: .78; }
}

@keyframes ttsPulse {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1px); }
}

/* Top-left logo — Radio Bergen style */
.top-left-logo {
  position: fixed;
  top: calc(14px + var(--safe-top));
  left: calc(14px + var(--safe-left));
  z-index: var(--z-ui);
  font: 700 clamp(15px,3.8vw,24px)/1 "Inter",Helvetica,sans-serif;
  letter-spacing: -.03em;
  color: #fff !important;
  opacity: 1;
  pointer-events: none;
  user-select: none;
  text-rendering: optimizeLegibility;
  transition: opacity 1.2s var(--ease-out);
}

/* Mic indicator — top-right, visible only during STT */
#mic-dot {
  position: fixed;
  top: calc(12px + var(--safe-top));
  right: calc(12px + var(--safe-right));
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e05252;
  opacity: 0;
  pointer-events: none;
  z-index: var(--z-ui);
  transition: opacity 120ms ease;
}
body[data-mode="listening"] #mic-dot {
  opacity: 1;
  animation: micPulse 1.4s cubic-bezier(0.4,0,0.6,1) infinite;
}
@keyframes micPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(224,82,82,.5); }
  50% { transform: scale(1.12); box-shadow: 0 0 0 5px rgba(224,82,82,0); }
}

/* Bottom-right status label */
.ui-status {
  position: fixed;
  right: calc(12px + var(--safe-right));
  bottom: calc(var(--face-bar-height) + var(--safe-bottom) + 8px);
  z-index: var(--z-ui);
  font: 9px/1.1 "JetBrains Mono","Cascadia Code",ui-monospace,"SFMono-Regular",Menlo,monospace;
  text-transform: uppercase;
  letter-spacing: .28em;
  color: rgba(245,240,232,.38);
  opacity: 1;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

/* SR-only for a11y live announcements (mood changes etc) — screen readers only, no visual */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Primer overlay — Radio Bergen dialog style */
#primer {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: var(--z-modal);
  background: #000;
  cursor: pointer;
  text-align: center;
  padding: 16px;
  transition: opacity var(--transition-fast) ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

#primer:focus-visible { outline: 1px solid var(--face-fg); outline-offset: -8px; }

#face:focus-visible { outline: 2px solid white; outline-offset: 2px; }

#primer h1 {
  margin: 0;
  font: 200 clamp(1rem,3.2vw,1.5rem)/1 "Inter",Helvetica,Arial,sans-serif;
  letter-spacing: -.04em;
  color: var(--face-fg);
  transition: transform var(--transition-fast) var(--ease-out);
}

#primer:active h1 { transform: scale(1.03); }

/* Tap ripple */
@keyframes ripple { to { transform: translate(var(--x),var(--y)) translate(-50%,-50%) scale(22); opacity: 0; } }
.tap-ripple {
  position: fixed;
  left: 0;
  top: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(var(--x),var(--y)) translate(-50%,-50%) scale(.4);
  opacity: .7;
  background: radial-gradient(circle,rgba(220,220,220,.3) 0%,rgba(220,220,220,.12) 40%,rgba(220,220,220,0) 70%);
  mix-blend-mode: screen;
  animation: ripple 680ms ease-out forwards;
  z-index: 999;
}

#chat-shell {
  position: fixed;
  inset-inline: 0;
  inset-block-end: calc(var(--face-bar-height) + var(--safe-bottom));
  z-index: 10;
  pointer-events: none;
}

#chat-log {
  max-height: 40dvh;
  overflow-y: auto;
  padding: 8px 16px;
  font: 11.5px/1.42 "JetBrains Mono","Cascadia Code",ui-monospace,"SFMono-Regular",Menlo,monospace;
  font-variant-numeric: tabular-nums;
  scroll-behavior: smooth;
  color: var(--face-fg);
  pointer-events: none;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
}

#chat-log:not(:empty) { pointer-events: auto; }
.message { position:relative; margin-bottom: 8px; white-space: pre-wrap; word-break: break-word; scroll-snap-align: start; }
.message:focus-visible { outline: 1px solid var(--face-fg); outline-offset: 1px; }
.msg-prompt { font-weight: 700; margin-right: 0.35em; }
.message.user .msg-prompt { color: var(--face-fg); }
.message.assistant .msg-prompt { color: var(--face-muted); }
.msg-body { color: rgba(210,205,198,.82); }
.cursor { display:inline-block; width:7px; height:1em; background:currentColor; vertical-align:text-bottom; animation:cursorBlink 900ms steps(2,end) infinite; margin-left:1px; }
.enhance-confirm { margin-bottom: 8px; white-space: pre-wrap; word-break: break-word; }
.enhance-arrow { color: rgba(220,220,220,.22); animation: blink .5s step-end 4; }
.enhance-text { color: rgba(220,220,220,.32); font-style: italic; }
.enhance-yn { color: var(--face-dim); }
.dmesg-line { font: 11px/1.5 ui-monospace,monospace; color: var(--face-dim); margin-bottom: 1px; white-space: pre-wrap; word-break: break-all; transition: opacity .8s steps(4,end); }
.dmesg-fade { opacity: 0; }
.thought-trace { font: 11px/1.45 ui-monospace,monospace; color: var(--face-dim); opacity: 0.55; margin: 0 0 6px 0; padding: 0 0 4px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.thought-line { font-style: italic; white-space: pre-wrap; margin: 0; padding: 1px 0; }
.thought-line::before { content: '~ '; opacity: 0.45; }
@keyframes blink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }

/* Action menu for keyboard nav on messages (FA138) */
.action-menu {
  position: absolute;
  background: var(--face-bg);
  border: 1px solid var(--face-muted);
  font: 10px/1.2 ui-monospace,monospace;
  color: var(--face-fg);
  padding: 2px;
  z-index: 100;
  white-space: nowrap;
}
.action-menu button {
  background: none;
  border: 0;
  color: inherit;
  padding: 2px 6px;
  cursor: pointer;
  font: inherit;
}
.action-menu button:hover, .action-menu button:focus { background: rgba(255,255,255,.1); }

#zsh {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  display: flex;
  align-items: center;
  height: calc(var(--face-bar-height) + var(--safe-bottom));
  padding: 0 16px var(--safe-bottom);
  font: 13px ui-monospace,"SFMono-Regular",Menlo,Monaco,Consolas,monospace;
  color: var(--face-fg);
  border: 0;
  background: #000;
  z-index: 11;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s steps(4,end), transform .2s ease;
  transform: translateY(30%);
}

body.zen #zsh,
body.zen .face-plate,
body.zen #chat-log { opacity: .08; }

body.zen #zsh.revealed { opacity: .96; pointer-events: auto; transform: none; }

body #zsh.live { opacity: 1; pointer-events: auto; transform: none; }
#zsh .pp { color: rgba(180,80,80,.82); font-weight: 700; }
#zsh .sep, #zsh .sep2 { color: var(--face-muted); margin-right: 0.4ch; }
#zsh input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--face-fg); font: inherit; caret-color: var(--face-fg); padding: 2px 0; }
#zsh input::placeholder { color: rgba(220,220,220,.22); }

/* Closed-caption strip (FA141) */
#tts-live {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--face-bar-height) + var(--safe-bottom) + 22px);
  z-index: 12;
  background: transparent;
  color: #fff;
  font: 10px/1.25 ui-monospace,"SFMono-Regular",Menlo,Monaco,Consolas,monospace;
  padding: 1px 6px;
  text-align: center;
  white-space: pre-wrap;
  pointer-events: none;
  max-height: 2.5em;
  overflow: hidden;
}

/* Inline status text — shows thinking/speaking inside the prompt bar */
#zsh-status {
  font: inherit;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--face-muted);
  opacity: 0;
  transition: opacity .2s;
  white-space: nowrap;
  pointer-events: none;
  margin-left: 4px;
}
body[data-mode="thinking"] #zsh-status { opacity: .7; }
body[data-mode="speaking"] #zsh-status { opacity: 1; }
body[data-tts-error="true"] #zsh-status { opacity: 1; color: #c44; }

/* Cancel button — appears during thinking/speaking */
#spin-btn {
  display: none;
  background: none;
  border: none;
  color: var(--face-muted);
  font: inherit;
  cursor: pointer;
  padding: 0 0 0 8px;
  opacity: .45;
  transition: opacity .1s;
}
#spin-btn:hover { opacity: 1; color: var(--face-fg); }
body[data-mode="thinking"] #spin-btn,
body[data-mode="speaking"] #spin-btn { display: block; }

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none;
    scroll-behavior: auto;
    transition: none;
  }

}

@media (min-width: 48rem) {
  #chat-log { padding-inline: 24px; }
  #zsh { padding-inline: 24px; }
}

/* #34 Message fade-in slide */
.message { animation: msgIn 220ms cubic-bezier(0.32,0.72,0,1) both; }
@keyframes msgIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }

/* #35 User message right-align */
.message.user { flex-direction:row-reverse; text-align:right; border:0; padding-right:8px; padding-left:0; }

/* #36 Streaming cursor blink */
@keyframes cursorBlink { 0%,100%{opacity:1} 50%{opacity:0} }

/* #37 Code block */
.msg-body pre, .msg-body code { background:transparent; border-bottom:1px dotted rgba(126,179,255,.18); font-family:ui-monospace,monospace; padding:2px 5px; font-size:.88em; }
.msg-body pre { display:block; padding:8px 10px; margin:4px 0; white-space:pre-wrap; }

/* #38 dmesg accent */
.dmesg-line { color:var(--c-accent); }

/* #39 Message timestamp on hover */
.message[data-ts]::after { content:attr(data-ts); font-size:9px; color:var(--face-muted); opacity:0; transition:opacity .15s; margin-left:8px; display:inline-block; vertical-align:middle; }
.message[data-ts]:hover::after { opacity:1; }

/* #40 Confidence band */
.message.assistant { border-left:2px solid rgba(126,179,255,var(--conf-alpha,0.14)); padding-left:8px; }

/* #41 Scroll momentum */
#chat-log { scroll-behavior:smooth; overscroll-behavior:contain; }

/* #42 Enhance confirm */
.enhance-confirm { padding:4px 0; font-size:.88em; }
.enhance-text { font-style:italic; opacity:.75; }
.enhance-yn { color:var(--face-muted); letter-spacing:.08em; }
.enhance-arrow { opacity:.5; }

/* #43 Empty state ghost */
#chat-log:empty::after { content:'no history'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:var(--face-dim); font-size:11px; text-transform:uppercase; letter-spacing:.2em; pointer-events:none; }

/* #44 Thinking-mode input dim */
body[data-mode="thinking"] #zin { opacity:.38; }
body[data-mode="speaking"] #zin { opacity:.75; }

/* #46 Char count */
#char-count { font: inherit; color:var(--face-muted); opacity:0; transition:opacity .15s; white-space:nowrap; margin-left:4px; }

/* #47 Focus border brighten */

/* #48 Cancel button pulse during thinking */
body[data-mode="thinking"] #spin-btn { animation:cancelPulse 1.1s ease-in-out infinite; }
@keyframes cancelPulse { 0%,100%{opacity:.45} 50%{opacity:.85} }

/* #50 Speaking rainbow prompt */
body[data-mode="speaking"] #zsh .pp { color:var(--mood-accent,var(--face-fg)); transition:color .8s ease; }

/* #51 Disabled state during boot */
body:not(.face-ready) #zsh { opacity:.3; pointer-events:none; }

/* #53 Primer pulse ring */
#primer::before { content:''; position:absolute; inset:-20px; border:1px solid rgba(220,220,220,.12); border-radius:50%; animation:primerRing 2.2s ease-out infinite; }
@keyframes primerRing { 0%{transform:scale(.85);opacity:.5} 100%{transform:scale(1.35);opacity:0} }

/* #55 Primer .gone fade */
#primer.gone { opacity: 0; transform: scale(0.96); pointer-events: none; transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out); }

.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.chip { font: 10px/1 "JetBrains Mono",ui-monospace,monospace; letter-spacing: .08em; padding: 5px 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 2px; color: rgba(216,212,205,.62); transition: background 120ms var(--ease-out); }
#primer .tagline { opacity: .42; font-size: .88em; margin-top: 10px; letter-spacing: .04em; }
#primer .hint { display: none; }

/* #57 Cancel button uses mood color */
#spin-btn { color:var(--mood-accent,var(--face-muted)); }

/* #58 TTS loading shimmer */
body[data-tts-loading="true"] #zsh-status { animation:ttsShimmer 700ms steps(4,end) infinite; }
@keyframes ttsShimmer { 0%,100%{opacity:.4} 50%{opacity:1} }

/* #60 Error flash border */

/* #61 Council persona badge */
body[data-council-persona]::after { content:attr(data-council-persona); position:fixed; top:calc(10px + var(--safe-top)); right:calc(10px + var(--safe-right)); font:9px/1.4 ui-monospace,monospace; text-transform:uppercase; letter-spacing:.14em; color:var(--face-muted); opacity:.6; z-index:var(--z-ui); pointer-events:none; }

/* #62 Model name in ui-status on hover */
.ui-status { cursor:default; }

/* #63 Variable font weight with RMS */

/* #64 Ligatures on body, off on prompt */
.msg-body { font-feature-settings:'liga' 1,'kern' 1; }
#zsh input,#zsh .pp,#zsh .sep,#zsh .sep2 { font-feature-settings:'liga' 0; }

/* #65 Line-height breathe during speaking */
body[data-mode="speaking"] .msg-body { line-height:1.62; transition:line-height .6s ease; }

/* #66 Letter-spacing expand during thinking */
body[data-mode="thinking"] #zsh-status { letter-spacing:.32em; transition:letter-spacing .4s ease; }

/* #80 Safe-area gradient behind prompt bar */
#zsh::after { content:''; position:absolute; inset-block-end:100%; inset-inline:0; height:32px; background:linear-gradient(to bottom,transparent,var(--face-bg)); pointer-events:none; }

/* Hidden scrollbar — no grey bar */
#chat-log { scrollbar-width:none; }
#chat-log::-webkit-scrollbar { display:none; }

/* #29 Mood saturation filter on canvas */
body[data-runtime-profile="full"] canvas { filter:saturate(var(--mood-sat, 0.7)) brightness(1); }
body[data-tts-loading="true"] canvas { filter:saturate(var(--mood-sat, 0.7)) brightness(1.04); }

/* FA75 copy button */
.message.assistant .msg-copy { position:absolute; top:4px; right:6px; background:none; border:none; color:var(--face-dim); cursor:pointer; font:9px ui-monospace,monospace; opacity:0; transition:opacity .15s; padding:2px 4px; }
.message.assistant:hover .msg-copy { opacity:1; }
.message.assistant .msg-copy:hover { color:var(--c-text); }

::selection { background: rgba(208,72,72,.22); color: inherit; }

.tool { background:none; border:0; color:var(--face-muted); font:inherit; padding:0; margin-right:10px; cursor:pointer; letter-spacing:.02em; opacity:.6; transition:opacity .15s,color .15s; }
.tool:hover, .tool:focus { opacity:1; color:var(--face-fg); }
.tool.active { color:var(--c-accent); opacity:1; }

#ascii-star { position: fixed; top: 14px; left: 14px; font: 600 22px/1 ui-monospace, monospace; color: #fff; mix-blend-mode: difference; pointer-events: none; z-index: 9; transition: color 220ms linear; }