/* MDriven wiki assistant — dark console.
   Two panes: the orb and the conversation on the left, whatever the assistant
   put on screen on the right. Before anything is on screen the orb takes the
   whole width, because an empty two-pane layout looks broken. */

:root {
  color-scheme: dark;
  --bg: #07080d;
  --bg-soft: #0d0f18;
  --panel: #11131e;
  --line: #1e2233;
  --line-soft: #171a28;
  --ink: #e8ebf5;
  --ink-dim: #949bb5;
  --ink-faint: #626a85;
  --user: #45d9ff;
  --agent: #b98cff;
  --warm: #ffb457;
  --good: #4ade80;
  --bad: #ff6b81;
  --add-bg: #0f2a1a;
  --add-ink: #8ef0b0;
  --del-bg: #2c1219;
  --del-ink: #ff9aa8;
  --radius: 14px;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

/* `.gate` and `main` set display, and an author rule beats the UA stylesheet's
   [hidden] { display: none }. Without this the gate overlay stays painted over
   the app after a successful login and swallows every click. */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  background:
    radial-gradient(1200px 700px at 18% -10%, #14182b 0%, transparent 60%),
    radial-gradient(900px 600px at 105% 110%, #191227 0%, transparent 55%),
    var(--bg);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* ---------------------------------------------------------------- gate -- */

.gate {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  background: rgba(7, 8, 13, .92);
  backdrop-filter: blur(14px);
}
.gate form {
  width: min(380px, 88vw);
  display: grid; gap: 14px;
  padding: 30px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
}
.gate h1 { margin: 0; font-size: 19px; letter-spacing: -.01em; }
.gate p { margin: 0; color: var(--ink-dim); font-size: 13.5px; line-height: 1.5; }
.gate input, .gate button {
  font: inherit; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--line);
}
.gate input { background: var(--bg-soft); color: var(--ink); }
.gate input:focus { outline: 2px solid var(--agent); outline-offset: 1px; }
.gate button { background: var(--agent); color: #10061f; border: 0; font-weight: 620; cursor: pointer; }
.gate-error { color: var(--bad); font-size: 13px; min-height: 1em; }

/* --------------------------------------------------------------- layout -- */

main {
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 0fr;
  transition: grid-template-columns .7s cubic-bezier(.22, 1, .36, 1);
}
body.has-content main { grid-template-columns: 420px minmax(0, 1fr); }

.orb-pane {
  min-width: 0;
  display: flex; flex-direction: column; align-items: center;
  padding: 26px 24px 20px;
  border-right: 1px solid transparent;
  transition: border-color .5s ease, padding .5s ease;
}
body.has-content .orb-pane { border-right-color: var(--line-soft); }

/* ------------------------------------------------------------------ orb -- */

.orb-wrap {
  position: relative;
  width: min(64vh, 460px); aspect-ratio: 1;
  display: grid; place-items: center;
  transition: width .7s cubic-bezier(.22, 1, .36, 1);
  flex: 0 0 auto;
}
body.has-content .orb-wrap { width: 240px; }

#orb { width: 100%; height: 100%; display: block; }

.orb-halo {
  position: absolute; inset: 8%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%,
              color-mix(in oklab, var(--agent) 22%, transparent) 0%,
              transparent 68%);
  filter: blur(26px);
  opacity: .5;
  transition: opacity .4s ease, background .6s ease;
}
body[data-speaker="user"] .orb-halo {
  background: radial-gradient(circle at 50% 50%,
              color-mix(in oklab, var(--user) 26%, transparent) 0%, transparent 68%);
  opacity: .85;
}
body[data-speaker="agent"] .orb-halo { opacity: .95; }

/* --------------------------------------------------------------- status -- */

.status {
  display: flex; align-items: center; gap: 9px;
  margin-top: 6px; font-size: 13.5px; color: var(--ink-dim);
  letter-spacing: .01em;
}
.dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ink-faint);
  box-shadow: 0 0 0 0 currentColor;
}
body[data-state="live"] .dot { background: var(--good); animation: pulse 2.4s infinite; }
body[data-state="connecting"] .dot { background: var(--warm); animation: pulse 1s infinite; }
body[data-state="error"] .dot { background: var(--bad); }
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }

.controls { display: flex; gap: 10px; margin-top: 16px; }
button {
  font: inherit; font-size: 14px; padding: 10px 20px;
  border-radius: 999px; cursor: pointer; border: 1px solid var(--line);
  background: var(--panel); color: var(--ink);
  transition: transform .12s ease, background .2s ease, border-color .2s ease;
}
button:hover { transform: translateY(-1px); border-color: #2c3350; }
button:active { transform: translateY(0); }
button.primary {
  background: linear-gradient(135deg, var(--agent), var(--user));
  color: #0a0616; border: 0; font-weight: 650; padding: 11px 26px;
}
button.ghost { background: transparent; color: var(--ink-dim); }

.hint {
  margin: 16px 4px 0; max-width: 40ch;
  text-align: center; font-size: 13px; line-height: 1.65; color: var(--ink-faint);
  transition: opacity .4s ease;
}
body[data-state="live"] .hint { opacity: 0; height: 0; margin: 0; overflow: hidden; }

/* ----------------------------------------------------------- transcript -- */

.transcript {
  width: 100%; margin-top: 18px;
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px;
  padding-right: 6px;
  mask-image: linear-gradient(to bottom, transparent 0, #000 22px);
}
.line {
  font-size: 13.5px; line-height: 1.6;
  padding: 9px 13px; border-radius: 12px;
  animation: rise .3s cubic-bezier(.22, 1, .36, 1);
}
@keyframes rise { from { opacity: 0; transform: translateY(6px) } }
.line.user {
  align-self: flex-end; max-width: 92%;
  background: color-mix(in oklab, var(--user) 14%, var(--panel));
  border: 1px solid color-mix(in oklab, var(--user) 22%, transparent);
}
.line.agent {
  align-self: flex-start; max-width: 96%;
  background: var(--panel); border: 1px solid var(--line);
}
.line.tool {
  align-self: flex-start;
  font-family: var(--mono); font-size: 11.5px; color: var(--ink-faint);
  background: transparent; border: 1px dashed var(--line); padding: 6px 11px;
}
.line.err { align-self: stretch; color: var(--bad); border: 1px solid var(--bad); background: transparent; }

.meta {
  width: 100%; display: flex; justify-content: space-between; gap: 10px;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-soft);
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint);
  text-transform: uppercase; letter-spacing: .06em;
}

/* -------------------------------------------------------------- content -- */

.content-pane {
  min-width: 0; overflow-y: auto;
  padding: 0; opacity: 0;
  transition: opacity .5s ease .15s;
}
body.has-content .content-pane { opacity: 1; padding: 26px 30px 60px; }
.content-empty { display: none; }

#content { display: grid; gap: 20px; max-width: 900px; }

.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  animation: rise .45s cubic-bezier(.22, 1, .36, 1);
}
.card > header {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 15px 18px; border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(180deg, rgba(255,255,255,.025), transparent);
}
.card h2 { margin: 0; font-size: 15.5px; letter-spacing: -.01em; }
.card .sub {
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint);
  text-transform: uppercase; letter-spacing: .07em;
}
.card .body { padding: 16px 18px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font-size: 11px; padding: 3px 9px; border-radius: 999px;
  background: var(--bg-soft); border: 1px solid var(--line); color: var(--ink-dim);
}
.chip.good { color: var(--good); border-color: color-mix(in oklab, var(--good) 35%, transparent); }
.chip.bad { color: var(--bad); border-color: color-mix(in oklab, var(--bad) 35%, transparent); }
.chip.warm { color: var(--warm); border-color: color-mix(in oklab, var(--warm) 35%, transparent); }

/* search results */
.hit {
  display: block; padding: 13px 18px; border-bottom: 1px solid var(--line-soft);
  text-decoration: none; color: inherit; cursor: pointer;
  transition: background .15s ease;
}
.hit:last-child { border-bottom: 0; }
.hit:hover { background: rgba(255,255,255,.03); }
.hit b { display: block; font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.hit span { font-size: 12.5px; line-height: 1.6; color: var(--ink-dim); }
.hit em { font-style: normal; color: var(--ink-faint); font-family: var(--mono); font-size: 10.5px; }

/* rendered wikitext */
.wiki { font-size: 14px; line-height: 1.72; color: var(--ink); }
.wiki h3 { font-size: 15px; margin: 22px 0 8px; letter-spacing: -.01em; }
.wiki h4 { font-size: 13.5px; margin: 18px 0 6px; color: var(--ink-dim); }
.wiki p { margin: 0 0 12px; }
.wiki ul, .wiki ol { margin: 0 0 12px; padding-left: 20px; }
.wiki li { margin: 3px 0; }
.wiki a { color: var(--user); text-decoration: none; border-bottom: 1px solid rgba(69,217,255,.3); }
.wiki a:hover { border-bottom-color: var(--user); }
.wiki code { font-family: var(--mono); font-size: 12.5px; background: var(--bg-soft);
             padding: 1px 5px; border-radius: 5px; }
.wiki pre {
  font-family: var(--mono); font-size: 12px; line-height: 1.6;
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; overflow-x: auto; margin: 0 0 14px;
}
.wiki table { border-collapse: collapse; width: 100%; margin: 0 0 14px; font-size: 12.5px; display: block; overflow-x: auto; }
.wiki th, .wiki td { border: 1px solid var(--line); padding: 7px 10px; text-align: left; vertical-align: top; }
.wiki th { background: var(--bg-soft); font-weight: 600; }

/* diff */
.diff { font-family: var(--mono); font-size: 12px; line-height: 1.62; overflow-x: auto; }
.diff div { padding: 1px 18px; white-space: pre-wrap; word-break: break-word; }
.diff .add { background: var(--add-bg); color: var(--add-ink); }
.diff .add::before { content: "+ "; opacity: .5; }
.diff .del { background: var(--del-bg); color: var(--del-ink); }
.diff .del::before { content: "− "; opacity: .5; }
.diff .same { color: var(--ink-faint); }
.diff .same::before { content: "  "; }
.diff .gap {
  color: var(--ink-faint); background: var(--bg-soft); font-style: italic;
  text-align: center; padding: 4px 18px; margin: 4px 0;
  border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
}

.actions {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 14px 18px; border-top: 1px solid var(--line-soft); background: var(--bg-soft);
}
.actions .grow { flex: 1; }
.actions .note { font-size: 12px; color: var(--ink-dim); }
button.apply { background: var(--good); color: #04140a; border: 0; font-weight: 650; }
button.applied { background: transparent; color: var(--good); border: 1px solid var(--good); cursor: default; }
button.applied:hover { transform: none; }

.concerns {
  margin: 0; padding: 11px 18px; font-size: 12.5px; line-height: 1.6;
  color: var(--warm); background: color-mix(in oklab, var(--warm) 8%, transparent);
  border-bottom: 1px solid var(--line-soft);
}

@media (max-width: 860px) {
  body.has-content main { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  body.has-content .orb-wrap { width: 130px; }
  .transcript { max-height: 22vh; }
}

/* the wait while a page is being drafted */
.pending { display: flex; gap: 7px; align-items: center; height: 26px; }
.pending span {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--agent); opacity: .35;
  animation: bounce 1.25s infinite ease-in-out;
}
.pending span:nth-child(2) { animation-delay: .16s; }
.pending span:nth-child(3) { animation-delay: .32s; }
@keyframes bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: .3 }
  40% { transform: translateY(-7px); opacity: 1 }
}

/* ------------------------------------------------------------- caption -- */
/* Live speech recognition, shown large. The scrolling transcript is history;
   this is the sentence in flight, and it is the thing you glance at to check
   the microphone heard you correctly. */

.caption {
  width: 100%; max-width: 46ch;
  min-height: 74px;
  margin: 14px 0 2px;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 7px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: transparent;
  transition: background .3s ease, border-color .3s ease, opacity .3s ease;
  opacity: .45;
}
.caption.active {
  opacity: 1;
  background: color-mix(in oklab, var(--user) 10%, var(--panel));
  border-color: color-mix(in oklab, var(--user) 30%, transparent);
}
.caption-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--user); opacity: .75;
}
.caption-text {
  font-size: 17px; line-height: 1.5; letter-spacing: -.01em;
  color: var(--ink); min-height: 1.5em;
}
.caption-text:empty::after {
  content: "listening…";
  color: var(--ink-faint); font-size: 15px;
}
/* the cursor only blinks while words are actually arriving */
.caption.active .caption-text::after {
  content: "";
  display: inline-block; width: 2px; height: 1em;
  margin-left: 3px; vertical-align: -2px;
  background: var(--user);
  animation: blink 1s steps(2, start) infinite;
}
@keyframes blink { 50% { opacity: 0 } }

/* speaker labels on the history lines */
.line { position: relative; }
.line.user::before, .line.agent::before {
  content: attr(data-who);
  display: block;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; opacity: .5; margin-bottom: 4px;
}
.line.user::before { color: var(--user); text-align: right; }
.line.agent::before { color: var(--agent); }

body:not([data-state="live"]) .caption { display: none; }

/* --------------------------------------------- multi-page and compare -- */

.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
  gap: 0;
}
.grid .col {
  min-width: 0;
  padding: 16px 18px;
  border-right: 1px solid var(--line-soft);
  max-height: 62vh; overflow-y: auto;
}
.grid .col:last-child { border-right: 0; }
.grid .col h3 { margin: 0 0 3px; font-size: 14px; }
.grid .col h3 a { color: var(--ink); text-decoration: none; }
.grid .col h3 a:hover { color: var(--user); }
.grid .col > .sub { margin-bottom: 12px; display: block; }

.compare-heads {
  display: grid; grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--line-soft);
}
.compare-head { padding: 14px 18px; min-width: 0; }
.compare-head.a { border-right: 1px solid var(--line-soft); }
.compare-head a {
  font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none;
  display: block; margin-bottom: 3px;
}
.compare-head a:hover { color: var(--user); }
.compare-head.a a { border-left: 3px solid var(--del-ink); padding-left: 9px; }
.compare-head.b a { border-left: 3px solid var(--add-ink); padding-left: 9px; }

.card .diff { max-height: 58vh; overflow-y: auto; }

/* what scroll_view highlights when it finds a phrase */
mark {
  background: color-mix(in oklab, var(--warm) 40%, transparent);
  color: var(--ink); border-radius: 3px; padding: 0 2px;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--warm) 18%, transparent);
}

@media (max-width: 1100px) {
  .grid { grid-template-columns: 1fr; }
  .grid .col { border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .compare-heads { grid-template-columns: 1fr; }
  .compare-head.a { border-right: 0; border-bottom: 1px solid var(--line-soft); }
}