/* Fenix web console — black, white, JetBrainsMono NF (same face as the phone
   app and the dashboard). No framework, no external fetches beyond YouTube. */

@font-face {
  font-family: "JetBrainsMono NF";
  src: url("fonts/JetBrainsMonoNerdFont-Regular.ttf") format("truetype");
  font-weight: 400;
}
@font-face {
  font-family: "JetBrainsMono NF";
  src: url("fonts/JetBrainsMonoNerdFont-Bold.ttf") format("truetype");
  font-weight: 700;
}

:root {
  --bg: #000;
  --fg: #fff;
  --dim: #9a9a9a;
  --line: #222;
  --accent: #b688ff;
  --me: rgba(255, 165, 0, 0.28);
  --fenix: rgba(255, 255, 255, 0.08);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: "JetBrainsMono NF", ui-monospace, monospace;
  font-size: 14px;
}

#app { display: flex; height: 100vh; }
#app[hidden] { display: none; } /* [hidden] must beat the flex rule above */

/* ── sidebar ─────────────────────────────────────────────────────────── */
#sidebar {
  width: 180px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: 18px 12px;
  gap: 6px;
  flex-shrink: 0;
}
#brand { font-weight: 700; letter-spacing: 0.3em; margin-bottom: 18px; color: var(--accent); }
.nav-item {
  background: none;
  border: none;
  color: var(--dim);
  font: inherit;
  text-align: left;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.nav-item:hover { color: var(--fg); background: #111; }
.nav-item.active { color: var(--fg); background: #161616; }
#conn { margin-top: auto; color: #444; font-size: 11px; }
#conn.on { color: #4fce74; }

/* ── main views ──────────────────────────────────────────────────────── */
#main { flex: 1; min-width: 0; display: flex; }
.view { display: none; flex: 1; min-width: 0; }
.view.active { display: flex; flex-direction: column; }

/* dashboard — a horizontal tile STRIP across the top (brown noise, health,
   whatever lands next, scrolling sideways if they overflow); chat owns all
   the space below it. */
#view-dashboard.active { flex-direction: column; }
#tile-rail {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}
#chat-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.video-wrap { flex: 0 0 auto; }
#noise { width: 300px; aspect-ratio: 16 / 9; border-radius: 10px; background: #050505; border: 1px solid var(--line); display: block; }
.tile { flex: 0 0 auto; width: 280px; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; background: #070707; overflow-y: auto; }
.tile-head { font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.tile-body { display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
#health-dot { color: #444; }
#health-dot.green { color: #4fce74; }
#health-dot.red { color: #e06c5b; }
.dep { display: flex; align-items: baseline; gap: 8px; }
.dep .d { font-size: 9px; line-height: 1.6; }
.dep .d.green { color: #4fce74; }
.dep .d.red { color: #e06c5b; }
.dep .n { color: var(--fg); }
.dep .x { color: var(--dim); }
.dim { color: var(--dim); }

/* chat */
#messages { flex: 1; overflow-y: auto; padding: 20px 24px; display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 72ch; padding: 8px 14px; border-radius: 12px; white-space: pre-wrap; overflow-wrap: break-word; line-height: 1.45; }
.msg.me { background: var(--me); align-self: flex-end; }
.msg.fenix { background: var(--fenix); align-self: flex-start; }
.msg.streaming { opacity: 0.85; }
.msg .meta { display: block; margin-top: 6px; color: var(--dim); font-size: 10px; white-space: pre-wrap; }
#progress { min-height: 18px; padding: 0 26px 6px; color: var(--dim); font-size: 11px; white-space: pre-line; line-height: 1.5; }
#composer { display: flex; gap: 8px; padding: 12px 20px 18px; border-top: 1px solid var(--line); }
#input {
  flex: 1;
  background: #0c0c0c;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--fg);
  font: inherit;
  padding: 10px 12px;
  outline: none;
}
#input:focus { border-color: #444; }
#composer button, #pair-form button {
  background: #161616;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--fg);
  font: inherit;
  padding: 10px 16px;
  cursor: pointer;
}
#composer button:hover, #pair-form button:hover { background: #222; }

/* ── pairing overlay ─────────────────────────────────────────────────── */
#pair-overlay {
  position: fixed;
  inset: 0;
  /* Fully opaque: an unpaired viewer sees the pairing box and NOTHING else —
     not even the dashboard's layout ghosting through. */
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
#pair-overlay.hidden { display: none; }
#pair-box { width: min(92vw, 460px); border: 1px solid var(--line); border-radius: 12px; padding: 28px; text-align: center; }
#pair-box h1 { font-size: 16px; margin-bottom: 14px; letter-spacing: 0.1em; }
#pair-box p { color: var(--dim); font-size: 12px; line-height: 1.6; margin-bottom: 14px; }
#pair-box code { color: var(--fg); }
#pair-form { display: flex; gap: 8px; }
#pair-code { flex: 1; background: #0c0c0c; border: 1px solid var(--line); border-radius: 8px; color: var(--fg); font: inherit; padding: 10px 12px; outline: none; }
#pair-status { min-height: 16px; margin-top: 10px; color: var(--accent); }