@font-face { font-family: "Michroma"; src: url("fonts/michroma-latin-400-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Plex Sans"; src: url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Sans"; src: url("fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-display: swap; }

:root {
  --hull: #1c2329;
  --recess: #12181d;
  --face: #232c33;
  --edge: #36444e;
  --glass: #070c10;
  --teal: #6fe0d2;
  --amber: #f4b740;
  --readout: #e6e1d3;
  --muted: #8d9ca5;
  --alert: #e46a4f;
  --live: #7bd389;
  --diagnostic: #b6a6f2;
  --voice: "Michroma", "Eurostile", "Microgramma", sans-serif;
  --body: "Plex Sans", "Segoe UI", system-ui, sans-serif;
  --code: "Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--hull);
  color: var(--readout);
  font: 400 16px/1.55 var(--body);
}
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* Layout: status strip / Zen panel + Display / command bar across the bottom */
.console {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "status status" "zen display" "command command";
  gap: 16px;
  height: 100vh;
  padding: 16px 20px 20px;
}

/* Status strip */
.status {
  grid-area: status;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 14px;
}
.nameplate { font: 400 15px var(--voice); letter-spacing: .3em; text-transform: uppercase; color: var(--readout); margin-right: 14px; }
.indicator { width: 9px; height: 9px; border-radius: 50%; background: var(--alert); }
.indicator.live { background: var(--live); }
.mode { margin-left: auto; }
body.diagnostic .mode { color: var(--diagnostic); }
.security-link { color: var(--muted); font-size: 13px; text-decoration: none; border-bottom: 1px dotted var(--edge); }
.security-link:hover { color: var(--teal); }
.notice { color: var(--amber); font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Sound and microphone switches */
.audio-controls { display: flex; align-items: center; gap: 6px; margin-left: 14px; }
button.toggle {
  display: inline-flex; align-items: center; gap: 7px;
  background: transparent; color: var(--muted); border: 1px solid var(--edge);
  border-radius: 8px; padding: 5px 11px; font: 400 11px var(--voice); letter-spacing: .14em;
}
button.toggle[aria-pressed="true"] { color: var(--amber); border-color: rgba(244, 183, 64, .55); }
button.toggle:disabled { opacity: .35; }
.indicator.mic { width: 7px; height: 7px; background: var(--edge); }
.indicator.mic.wake { background: var(--live); }
.indicator.mic.follow { background: var(--teal); box-shadow: 0 0 8px rgba(111, 224, 210, .7); }
.indicator.mic.hearing, .indicator.mic.talk { background: var(--amber); box-shadow: 0 0 8px rgba(244, 183, 64, .7); }
.indicator.mic.checking { background: var(--amber); animation: blink .6s steps(2) infinite; }
@keyframes blink { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .indicator.mic.checking { animation: none; } }
.ear-text { font-size: 13px; min-width: 11em; }
.ear-text.follow { color: var(--teal); }
.ear-text.hearing, .ear-text.talk, .ear-text.checking { color: var(--amber); }

/* Zen's panel: the glass lattice above the conversation */
.zen-panel {
  grid-area: zen;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--face);
  border: 1px solid var(--edge);
  border-radius: 14px;
  overflow: hidden;
}
.glass {
  position: relative;
  flex: 0 0 52%;
  margin: 14px 14px 0;
  border-radius: 10px;
  background: var(--glass);
  box-shadow: inset 0 0 0 1px rgba(111, 224, 210, .10), inset 0 18px 40px rgba(255, 255, 255, .025), inset 0 -24px 50px rgba(0, 0, 0, .55);
  overflow: hidden;
}
.bank {
  position: absolute;
  inset: 14px 16px 32px;
  display: grid;
  gap: 7px;
  align-content: center;
  justify-content: center;
}
/* Lamps are invisible until lit; size, colour and glow match the original console */
.lamp {
  width: 21px;
  height: 21px;
  border-radius: 5px;
  background: transparent;
  transition: background-color .18s linear, box-shadow .18s linear;
}
.lamp.on { background: var(--amber); box-shadow: 0 0 12px rgba(244, 183, 64, .45); }
.lamp.mouth { transition-duration: .06s; }
.lamp.mouth.on { box-shadow: 0 0 14px rgba(244, 183, 64, .6); }
.lamp.mouth.alert.on { background: #ffd27a; box-shadow: 0 0 16px rgba(255, 210, 122, .7); }
body.diagnostic .lamp.on { background: var(--diagnostic); box-shadow: 0 0 12px rgba(182, 166, 242, .45); }
@media (prefers-reduced-motion: reduce) { .lamp { transition: none; } }
.glass-state {
  position: absolute;
  left: 14px;
  bottom: 10px;
  font: 400 11px var(--voice);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(111, 224, 210, .55);
}

.transcript {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 18px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.line { max-width: 62ch; }
.line .who { display: block; font-size: 13px; color: var(--muted); margin-bottom: 3px; }
.line.zen p {
  margin: 0;
  font-family: var(--voice);
  font-size: 15px;
  line-height: 1.75;
  letter-spacing: .01em;
}
.line.operator { align-self: flex-end; text-align: right; }
.line.operator p { margin: 0; color: var(--teal); }
.line.alert { border-left: 3px solid var(--amber); padding-left: 14px; }
.line.alert.silent { border-left-color: var(--muted); }
.line.alert.silent p { color: var(--muted); }
.line .shown { font-size: 13px; color: var(--muted); margin-top: 4px; display: block; }
.line-actions { display: flex; gap: 6px; margin-top: 6px; opacity: .55; transition: opacity .15s; }
.line:hover .line-actions, .line-actions:focus-within { opacity: 1; }
button.mini {
  background: transparent; color: var(--muted); border: 1px solid var(--edge); border-radius: 6px;
  padding: 2px 9px; font: 400 12px var(--body); letter-spacing: 0; text-transform: none;
}
button.mini:hover:not(:disabled) { color: var(--amber); border-color: rgba(244, 183, 64, .55); }

/* Display */
.display {
  grid-area: display;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--recess);
  border: 1px solid var(--edge);
  border-radius: 14px;
  padding: 18px 22px;
}
.display h2 { margin: 0 0 12px; font: 400 13px var(--voice); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.display-body { flex: 1; overflow-y: auto; font-size: 15px; }
.display-body .empty { color: var(--muted); max-width: 46ch; }
.display-body h1, .display-body h2, .display-body h3 { font: 500 16px var(--body); color: var(--readout); margin: 18px 0 8px; }
.display-body p { margin: 0 0 12px; max-width: 72ch; }
.display-body table { border-collapse: collapse; margin: 6px 0 16px; font-size: 14px; }
.display-body th, .display-body td { text-align: left; padding: 6px 14px 6px 0; border-bottom: 1px solid var(--edge); }
.display-body th { color: var(--muted); font-weight: 500; }
.display-body code { font-family: var(--code); font-size: 13px; color: var(--teal); }
.display-body pre { background: var(--hull); padding: 12px 14px; border-radius: 8px; overflow-x: auto; }
.display-body pre code { color: var(--readout); }
.display-body a { color: var(--teal); }

/* Command bar across the bottom */
.command {
  grid-area: command;
  display: flex;
  gap: 12px;
}
.command input {
  flex: 1;
  min-width: 0;
  background: var(--recess);
  color: var(--readout);
  border: 1px solid var(--edge);
  border-radius: 10px;
  padding: 15px 18px;
  font: inherit;
  font-size: 17px;
}
.command input::placeholder { color: var(--muted); }
button {
  background: var(--amber);
  color: #2a1e08;
  border: 0;
  border-radius: 10px;
  padding: 0 34px;
  font: 400 14px var(--voice);
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
}
button:disabled { opacity: .4; cursor: default; }
button.talk { background: var(--face); color: var(--readout); border: 1px solid var(--edge); padding: 0 26px; touch-action: none; user-select: none; }
button.talk.held { background: var(--teal); color: #072320; border-color: var(--teal); }

/* Access dialog */
.access {
  background: var(--face);
  color: var(--readout);
  border: 1px solid var(--edge);
  border-radius: 14px;
  padding: 24px;
  max-width: 380px;
}
.access::backdrop { background: rgba(8, 12, 16, .75); }
.access h2 { margin: 0 0 8px; font: 400 16px var(--voice); }
.access p { color: var(--muted); font-size: 14px; }
.access input { width: 100%; margin: 4px 0 14px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--edge); background: var(--recess); color: var(--readout); font: inherit; }
.access button { padding: 12px 22px; }
.access .error { color: var(--alert); }

/* Narrow screens: everything stacks, command bar stays at the bottom */
@media (max-width: 900px) {
  .console {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) minmax(0, .8fr) auto;
    grid-template-areas: "status" "zen" "display" "command";
    gap: 12px;
    padding: 12px 16px 16px;
  }
  .glass { flex-basis: 50%; min-height: 214px; }
  button { padding: 0 20px; }
  .status { flex-wrap: wrap; row-gap: 8px; }
  .audio-controls { margin-left: 0; width: 100%; flex-wrap: wrap; row-gap: 6px; }
  .ear-text { min-width: 0; flex: 1 1 100%; }
  .command { flex-wrap: wrap; gap: 8px; }
  .command input { flex: 1 1 100%; }
  .command button { flex: 1 1 0; min-height: 48px; }
}