:root {
  --bg: #07080c;
  --panel: #0e1017;
  --line: #1b1f2b;
  --ink: #dfe3ee;
  --dim: #7a8299;
  --hot: #ff5c8a;
  --warm: #ffb469;
  --cool: #6ea8ff;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --display: "Helvetica Neue", Inter, system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--display);
  min-height: 100%;
}

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  background-image:
    radial-gradient(1200px 600px at 15% -10%, rgba(110,168,255,.07), transparent 60%),
    radial-gradient(900px 500px at 85% 0%, rgba(255,92,138,.06), transparent 60%);
}

.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;
}

/* ── masthead ─────────────────────────────────────────────────────────── */

.masthead {
  padding: 2.2rem 2rem 1.4rem;
  border-bottom: 1px solid var(--line);
}

.wordmark {
  margin: 0;
  font-size: clamp(2.4rem, 7vw, 4.2rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: .92;
}

.heart {
  color: var(--hot);
  margin-left: .35rem;
  font-weight: 500;
}

.edition {
  margin: .5rem 0 0;
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--dim);
}

.field {
  margin-top: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  font-family: var(--mono);
  font-size: .7rem;
}

.chip {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .25rem .7rem;
  color: var(--dim);
  background: var(--panel);
  white-space: nowrap;
}

.chip b { color: var(--ink); font-weight: 600; }
.chip.dominant { border-color: var(--hot); color: var(--hot); }
.chip.affect { border-color: var(--hot); color: var(--hot); background: rgba(255, 92, 138, 0.09); }
.chip.affect b { color: var(--hot); }

/* ── layout ───────────────────────────────────────────────────────────── */

main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 1px;
  background: var(--line);
  min-height: 0;
}

@media (max-width: 900px) {
  main { grid-template-columns: 1fr; }
}

.panel { background: var(--bg); padding: 1.4rem 2rem; min-height: 0; }

.side { display: grid; gap: 1.6rem; align-content: start; }

/* ── transcript ───────────────────────────────────────────────────────── */

.transcript {
  display: grid;
  gap: 1rem;
  align-content: start;
  min-height: 40vh;
  margin-bottom: 1.4rem;
}

.empty { color: var(--dim); font-family: var(--mono); font-size: .85rem; }

.turn { border-left: 2px solid var(--line); padding-left: 1rem; }
.turn.user, .turn.you { border-color: var(--cool); }
.turn.assistant, .turn.alexiai { border-color: var(--hot); }

.turn .who {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dim);
  display: block;
  margin-bottom: .35rem;
}

.turn .body { white-space: pre-wrap; line-height: 1.6; }

.turn .grain {
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--warm);
  margin-top: .5rem;
}

.turn .mcp-trace {
  margin-top: .45rem;
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--cool);
}

.turn .mcp-trace summary {
  cursor: pointer;
  user-select: none;
}

.turn .mcp-trace pre {
  margin: .4rem 0 0;
  padding: .65rem .8rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: .5rem;
  color: var(--ink);
  overflow-x: auto;
  max-height: 260px;
  white-space: pre-wrap;
}

/* ── composer ─────────────────────────────────────────────────────────── */

.composer { display: flex; gap: .7rem; align-items: flex-end; }

textarea {
  flex: 1;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: .7rem;
  padding: .85rem 1rem;
  font-family: var(--display);
  font-size: 1rem;
  line-height: 1.5;
  resize: vertical;
  outline: none;
}

textarea:focus { border-color: var(--hot); }

button {
  background: var(--hot);
  color: #12060a;
  border: 0;
  border-radius: .7rem;
  padding: .9rem 1.6rem;
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
}

button:disabled { opacity: .45; cursor: progress; }

/* ── side blocks ──────────────────────────────────────────────────────── */

.block h2 {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 0 0 .6rem;
  font-weight: 500;
}

.block dl { margin: 0; display: grid; gap: .35rem; }

.block dl > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--mono);
  font-size: .76rem;
  border-bottom: 1px dotted var(--line);
  padding-bottom: .3rem;
}

.block dt { color: var(--dim); }
.block dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.pending { color: var(--dim); }
.ok { color: var(--cool); }
.bad { color: var(--hot); }

/* ── footer ───────────────────────────────────────────────────────────── */

footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1rem 2rem;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--dim);
}

.sign { color: var(--warm); }