:root {
  --canvas: #f6f6fa;
  --surface: #ffffff;
  --ink: #14121f;
  --ink-dim: #6c6980;
  --line: #e3e2ec;
  --blue: #3355ff;
  --violet: #8b3fe8;
  --claude: #d97757;
  --codex: #12a594;
  --font-display: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --space-2: 10px; --space-3: 15px; --space-4: 20px; --space-5: 30px; --space-6: 40px;
}

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

/* A class like `.session { display: flex }` outranks the UA's [hidden] rule, so
   hidden panels keep reserving their full height and leave a screen of dead
   space. This has to win over every display rule in the file. */
[hidden] { display: none !important; }

html, body { height: 100%; overflow-x: hidden; }

body {
  min-height: 100vh;
  font-size: 17px;
  font-family: var(--font-body);
  color: var(--ink);
  background-color: var(--canvas);
  background-image: radial-gradient(rgba(20, 18, 31, 0.07) 1px, transparent 1px);
  background-size: 26px 26px;
  position: relative;
}

/* Ambient glow */
.glow-blob {
  position: fixed;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
}

.glow-blob-a {
  width: 42vmax; height: 42vmax;
  top: -16vmax; right: -14vmax;
  background: var(--blue);
  animation: driftA 24s ease-in-out infinite;
}

.glow-blob-b {
  width: 34vmax; height: 34vmax;
  bottom: -14vmax; left: -12vmax;
  background: var(--violet);
  animation: driftB 28s ease-in-out infinite;
}

@keyframes driftA {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-3vmax, 3vmax); }
}

@keyframes driftB {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(3vmax, -3vmax); }
}

/* Top bar */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5);
  z-index: 20;
  /* Cards scroll beneath this, so it needs its own ground to sit on. */
  background: rgba(246, 246, 250, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.01em;
}

.menu-toggle {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.menu-toggle:hover {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(51, 85, 255, 0.12);
}

.menu-toggle span {
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--ink);
}

/* Sliding drawer.
   It stays in the DOM and slides on transform so the open/close is animated —
   [hidden] would snap. The scrim is what actually gets hidden. */
.drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 29;
  background: rgba(20, 18, 31, 0.35);
  backdrop-filter: blur(3px);
  animation: fadeIn 0.2s ease both;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 30;
  width: min(360px, 86vw);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--line);
  box-shadow: 24px 0 60px rgba(20, 18, 31, 0.12);
  transform: translateX(-102%);
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.drawer.is-open { transform: translateX(0); }

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5);
  border-bottom: 1px solid var(--line);
}

.drawer-brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}

.drawer-close {
  border: none;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--ink-dim);
  cursor: pointer;
  padding: 0 4px;
}

.drawer-close:hover { color: var(--ink); }

.drawer-new {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-4) var(--space-4) var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--ink);
  color: var(--surface);
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.drawer-new:hover { transform: translateY(-1px); }
.drawer-new-icon { font-size: 1.1rem; line-height: 1; }

.drawer-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5) var(--space-2);
}

.drawer-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.drawer-mini {
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--blue);
  cursor: pointer;
  padding: 0;
}

/* The list is the only scrolling region, so the header and footer stay put. */
.history {
  flex: 1;
  overflow-y: auto;
  padding: 0 var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.history-empty {
  padding: var(--space-4) var(--space-4);
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--ink-dim);
}

.history-item {
  display: flex;
  align-items: stretch;
  gap: 2px;
  border-radius: 10px;
  transition: background 0.15s ease;
}

.history-item:hover { background: var(--canvas); }

.history-open {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-3) var(--space-3);
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-body);
}

.history-top { display: flex; align-items: center; gap: var(--space-2); }

.history-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.history-dot-claude { background: var(--claude); }
.history-dot-codex { background: var(--codex); }

.history-when {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--ink-dim);
}

/* Two lines then ellipsis: enough to recognise a prompt, never enough to
   push the rest of the list off screen. */
.history-text {
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.history-del {
  border: none;
  background: transparent;
  color: var(--ink-dim);
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 var(--space-3);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease;
}

.history-item:hover .history-del { opacity: 1; }
.history-del:hover { color: #b4544f; }

.drawer-foot {
  border-top: 1px solid var(--line);
  padding: var(--space-3);
}

.drawer-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
}

.drawer-item:hover { background: var(--canvas); }

.drawer-item-icon {
  font-size: 0.95rem;
  color: var(--ink-dim);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  flex-shrink: 0;
}

/* The one drawer entry that leaves the app, so it says so. */
.drawer-item-discord { text-decoration: none; }
.drawer-item-discord:hover { background: rgba(88, 101, 242, 0.08); }
.drawer-item-discord:hover .drawer-item-icon { color: #5865f2; }

.drawer-item-out {
  margin-left: auto;
  font-size: 0.78rem;
  color: var(--ink-dim);
  transition: transform 0.18s ease;
}

.drawer-item-discord:hover .drawer-item-out { transform: translate(2px, -2px); }

.drawer-account {
  padding: var(--space-2) var(--space-4) 0;
  font-size: 0.76rem;
  color: var(--ink-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Hero */
.screen {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-6) var(--space-5) calc(var(--space-6) * 4);
  gap: var(--space-3);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--blue);
  margin-bottom: var(--space-2);
}

.headline {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 7.5vw, 5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--ink);
}

.subline {
  font-family: var(--font-body);
  font-size: clamp(1rem, 2vw, 1.15rem);
  color: var(--ink-dim);
  max-width: 38ch;
  margin-top: var(--space-2);
}

/* Session (conversation area) */
.session {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  padding: 96px var(--space-5) 220px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-height: 100vh;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: var(--space-5);
  box-shadow: 0 4px 20px rgba(20, 18, 31, 0.05);
  animation: cardIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
  /* clears the fixed top bar (88px) when scrolled into view */
  scroll-margin-top: 108px;
}

@keyframes cardIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.card-user { background: transparent; border-style: dashed; box-shadow: none; }
.card-error { border-color: #e5b4b4; background: #fdf6f6; }

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.card-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.card-sublabel {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: var(--space-5) 0 var(--space-3);
}

.card-target { font-family: var(--font-mono); font-size: 0.7rem; color: var(--blue); }
.card-body { font-size: 0.95rem; line-height: 1.55; white-space: pre-wrap; }

.card-assessment {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink);
  padding-left: var(--space-4);
  border-left: 2px solid var(--violet);
  margin-bottom: var(--space-5);
}

/* Questions */
.qlist { display: flex; flex-direction: column; gap: var(--space-5); }

.qlabel { display: flex; gap: var(--space-3); align-items: baseline; }

.qnum {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--blue);
  flex-shrink: 0;
}

.qtext {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.15rem;
  line-height: 1.4;
}

.qwhy {
  font-size: 0.9rem;
  color: var(--ink-dim);
  line-height: 1.5;
  margin: var(--space-2) 0 var(--space-4) 26px;
}

/* One question at a time — the stage swaps its contents per step. */
.qstage { animation: cardIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) both; }

.qprogress {
  margin-left: auto;
  align-self: center;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-dim);
}

/* Ready-made answers */
.qoptions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0 0 var(--space-4) 26px;
}

.qoption {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.qoption:hover { border-color: var(--ink-dim); }

.qoption-radio {
  appearance: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  flex-shrink: 0;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Ring plus centred dot: unmistakable next to the unchecked outline. */
.qoption-radio:checked {
  border-color: var(--blue);
  background: radial-gradient(circle at center, var(--blue) 0 4px, transparent 4.5px);
}

.qoption-radio:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(51, 85, 255, 0.2);
}

/* :has lets the whole row react to its own radio without extra JS. */
.qoption:has(.qoption-radio:checked) {
  border-color: var(--blue);
  background: rgba(51, 85, 255, 0.06);
  box-shadow: 0 0 0 1px var(--blue);
}

.qoption-body { display: flex; flex-direction: column; gap: 4px; }

.qoption-top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.qoption-label {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.35;
}

.qoption-desc {
  font-size: 0.89rem;
  color: var(--ink-dim);
  line-height: 1.5;
}

/* The recommended answer reads as a suggestion, not a pre-made decision: it is
   marked but never pre-selected, so the user still chooses. */
.qoption-badge {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}

.qoption.is-recommended { border-color: rgba(51, 85, 255, 0.35); }

.qinput {
  width: calc(100% - 26px);
  margin-left: 26px;
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--canvas);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.qinput:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(51, 85, 255, 0.12);
  background: var(--surface);
}

/* Account + modals */
.topbar-right { display: flex; align-items: center; gap: var(--space-3); }

.auth-btn {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  padding: 7px var(--space-4);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.auth-btn:hover { border-color: var(--blue); }

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(20, 18, 31, 0.45);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}

.modal {
  position: relative;
  width: min(460px, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: var(--space-6);
  box-shadow: 0 30px 80px rgba(20, 18, 31, 0.25);
  animation: cardIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.modal-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  border: none;
  background: transparent;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--ink-dim);
  cursor: pointer;
}

.modal-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.modal-sub { margin-top: var(--space-2); font-size: 0.92rem; color: var(--ink-dim); line-height: 1.5; }
.modal-body { margin-top: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.modal-actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

.modal-error {
  margin-top: var(--space-4);
  padding: var(--space-3);
  border-radius: 10px;
  background: #fdf6f6;
  border: 1px solid #e5b4b4;
  color: #a2423d;
  font-size: 0.85rem;
  line-height: 1.5;
}

.modal-help { font-size: 0.8rem; color: var(--ink-dim); line-height: 1.55; }
.modal-link { color: var(--blue); }

.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field-label { font-size: 0.82rem; font-weight: 500; color: var(--ink-dim); }

.field-input {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--canvas);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field-input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(51, 85, 255, 0.12);
  background: var(--surface);
}

.link-btn {
  border: none;
  background: transparent;
  color: var(--blue);
  font-family: var(--font-body);
  font-size: 0.84rem;
  cursor: pointer;
  padding: 0;
}

/* Settings is a taller, sectioned modal — it scrolls internally so the header
   and the error line stay visible while you work down it. */
.modal:has(.settings) { width: min(560px, 100%); }

.settings {
  max-height: min(70vh, 620px);
  overflow-y: auto;
  gap: 0;
  padding-right: var(--space-2);
}

.settings-section {
  padding: var(--space-5) 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.settings-section:first-child { border-top: none; padding-top: 0; }

.settings-title {
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 600;
}

.settings-desc {
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--ink-dim);
}

.settings-section.is-danger .settings-title { color: #a2423d; }

.btn-danger {
  background: #a2423d;
  color: #fff;
}

.btn-danger:not(:disabled):hover { background: #8d3a35; }
.btn-danger:disabled { opacity: 0.45; cursor: not-allowed; }

.danger-confirm {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid #e5b4b4;
  border-radius: 12px;
  background: #fdf6f6;
}

.provider-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.provider-chip {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-dim);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  padding: 7px var(--space-3);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.provider-chip:hover { border-color: var(--ink-dim); color: var(--ink); }

.provider-chip.is-on {
  border-color: var(--blue);
  background: rgba(51, 85, 255, 0.08);
  color: var(--blue);
}

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--canvas);
}

.setting-label { font-size: 0.88rem; font-weight: 500; }
.setting-value { font-family: var(--font-mono); font-size: 0.82rem; color: var(--ink-dim); }

/* Recommended toolkit */
.kit { display: flex; flex-direction: column; gap: var(--space-3); }

.kit-item {
  padding: var(--space-4);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--canvas);
}

.kit-head { display: flex; align-items: center; gap: var(--space-3); }

.kit-name {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 500;
}

.kit-kind {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid currentColor;
}

.kit-kind-plugin { color: var(--violet); }
.kit-kind-mcp { color: var(--codex); }

.kit-why {
  margin: var(--space-2) 0 var(--space-3);
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink-dim);
}

.kit-cmd {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.kit-cmd-text {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  overflow-x: auto;
  white-space: nowrap;
}

/* Preview */
.preview { margin-top: var(--space-5); }

.preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.preview-head .card-sublabel { margin: 0; }

.preview-frame {
  width: 100%;
  height: 520px;
  margin-top: var(--space-3);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 8px 30px rgba(20, 18, 31, 0.07);
  display: block;
}

.preview-note {
  margin-top: var(--space-3);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ink-dim);
}

/* Explanations */
.explain { margin-left: 26px; }

.explain-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: 6px var(--space-3);
  border: 1px dashed var(--line);
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--ink-dim);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.explain-btn::before { content: "?"; font-family: var(--font-mono); color: var(--violet); }
.explain-btn:hover { color: var(--ink); border-color: var(--violet); }

.explain-panel {
  margin-top: var(--space-3);
  padding: var(--space-4);
  border-left: 2px solid var(--violet);
  background: var(--canvas);
  border-radius: 0 12px 12px 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.explain-summary { font-size: 0.92rem; line-height: 1.55; font-weight: 500; }
.explain-point { display: flex; flex-direction: column; gap: 2px; }

.explain-point-title {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--blue);
}

.explain-point-body { font-size: 0.88rem; line-height: 1.55; color: var(--ink-dim); }

.explain-bottom {
  font-size: 0.9rem;
  line-height: 1.55;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}

.explain-loading { font-size: 0.88rem; color: var(--ink-dim); }
.explain-error { font-size: 0.88rem; color: #b4544f; }

/* At the foot of the result card it is a section, not an inline aside. */
.card-result .explain { margin-left: 0; margin-top: var(--space-5); }

.card-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
  flex-wrap: wrap;
}

.btn {
  border: 1px solid transparent;
  border-radius: 10px;
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.9rem;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}

.btn:disabled { opacity: 0.5; cursor: default; transform: none; }
.btn-primary { background: var(--ink); color: var(--surface); }
.btn-primary:not(:disabled):hover { transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ink-dim); border-color: var(--line); }
.btn-ghost:not(:disabled):hover { color: var(--ink); border-color: var(--ink-dim); }

/* Result */
.result-body {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.65;
  white-space: pre-wrap;
  word-wrap: break-word;
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: var(--space-4);
  overflow-x: auto;
}

.copy-btn {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  padding: 6px var(--space-3);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.copy-btn:hover { border-color: var(--blue); }

/* Session cost calculator */
.cost {
  width: 100%;
  border-collapse: collapse;
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}

.cost th, .cost td {
  padding: 8px var(--space-4);
  text-align: right;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 400;
}

.cost tr:first-child th {
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  border-bottom: 1px solid var(--line);
}

.cost-rowkey {
  text-align: left;
  font-family: var(--font-body);
  font-size: 0.84rem;
  color: var(--ink-dim);
  white-space: nowrap;
}

.cost-total th, .cost-total td {
  border-top: 1px solid var(--line);
  font-weight: 500;
  font-size: 0.95rem;
}

.cost-total .cost-rowkey { color: var(--ink); }
.cost-total td:last-child { color: var(--blue); }

.cost-verdict {
  margin-top: var(--space-3);
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.45;
}

.cost-verdict.is-saving { color: var(--blue); }
.cost-verdict.is-costing { color: var(--ink-dim); }

.cost-note {
  margin-top: var(--space-2);
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--ink-dim);
}

.change-list, .gap-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }

.change-list li { display: flex; flex-direction: column; gap: 2px; }
.change-what { font-size: 0.88rem; font-weight: 500; }
.change-why { font-size: 0.82rem; color: var(--ink-dim); line-height: 1.45; }

.gap-list li {
  font-size: 0.86rem;
  color: var(--ink-dim);
  padding-left: var(--space-4);
  position: relative;
}

.gap-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--violet);
}

/* Thinking indicator */
.thinking { display: flex; align-items: center; gap: var(--space-3); }

.thinking-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue);
  animation: pulse 1.2s ease-in-out infinite;
}

.thinking-label { font-size: 0.9rem; color: var(--ink-dim); }

@keyframes pulse {
  0%, 100% { opacity: 0.25; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1); }
}


/* Console (chat input) */
.console-wrap {
  position: fixed;
  left: 50%;
  bottom: var(--space-6);
  transform: translateX(-50%);
  width: min(1080px, calc(100vw - var(--space-5) * 2));
  border-radius: 20px;
  z-index: 10;
}

.console-wrap::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(120deg, var(--blue), var(--violet), var(--blue));
  background-size: 200% 200%;
  animation: glowShift 5s ease infinite;
  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: 0;
}

.console-wrap:focus-within::before { opacity: 1; }

@keyframes glowShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.console {
  position: relative;
  z-index: 1;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: inherit;
  box-shadow: 0 20px 50px rgba(20, 18, 31, 0.08);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: box-shadow 0.25s ease;
}

.console-wrap:focus-within .console {
  box-shadow: 0 24px 60px rgba(51, 85, 255, 0.16);
}

.prompt-input {
  width: 100%;
  min-height: 92px;
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.55;
}

.prompt-input::placeholder { color: #a7a4b8; }

.console-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.model-select {
  display: flex;
  gap: 2px;
  background: var(--canvas);
  border-radius: 999px;
  padding: 3px;
}

.model-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border: none;
  background: transparent;
  color: var(--ink-dim);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.82rem;
  padding: var(--space-2) var(--space-4);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.model-btn.is-active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 4px rgba(20, 18, 31, 0.12);
}

.model-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.model-dot-claude { background: var(--claude); }
.model-dot-codex { background: var(--codex); }

.send-btn {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--ink);
  color: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}

.send-btn:hover { transform: scale(1.06); }
.send-btn:disabled { cursor: default; transform: none; background: var(--ink-dim); }

.send-icon { width: 18px; height: 18px; }

.send-spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: var(--surface);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.send-btn.is-loading .send-icon { display: none; }
.send-btn.is-loading .send-spinner { display: block; }

@keyframes spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 560px) {
  .topbar { padding: var(--space-4); }
  .console-wrap { bottom: var(--space-4); border-radius: 18px; }
  .console-footer { flex-wrap: wrap; }
  .session { padding: 84px var(--space-4) 200px; }
  .card { padding: var(--space-4); }
  .model-btn { padding: var(--space-2) var(--space-3); font-size: 0.78rem; }
}

@media (prefers-reduced-motion: reduce) {
  .glow-blob, .console-wrap::before, .send-spinner,
  .thinking-dot, .card { animation: none; }
}

/* Brand lockup, sized by height so the 4:1 ratio holds everywhere. */
.wordmark img { display: block; height: 30px; width: auto; }
.drawer-brand img { display: block; height: 30px; width: auto; }

/* ===================================================================
   The mascot.
   One flat PNG, so he is split into a body with the right shoe erased
   and that shoe as its own sprite. Drawn back at the same offset they
   reconstruct the artwork exactly (verified pixel-for-pixel), which is
   what lets the foot tap without the static shoe showing underneath.
   =================================================================== */

.mascot { position: relative; display: block; width: 100%; aspect-ratio: 925 / 832; }
.mascot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

/* Measured from the source art. */
.mascot-shoe {
  left: 65.51% !important; top: 89.90% !important;
  width: 16.43% !important; height: 10.10% !important;
  transform-origin: 20% 30%;   /* the ankle, so it pivots like a foot */
}

/* Idle: he breathes. */
@keyframes pm-mascot-breathe {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-2.5%) rotate(-1.2deg); }
}
/* Impatience: heel down, toe up, heel down. */
@keyframes pm-mascot-tap {
  0%, 62%, 100% { transform: rotate(0deg) translateY(0); }
  74%           { transform: rotate(-17deg) translateY(-11%); }
  86%           { transform: rotate(0deg) translateY(0); }
}

.mascot.is-thinking .mascot-body { animation: pm-mascot-breathe 2.6s ease-in-out infinite; }
.mascot.is-thinking .mascot-shoe { animation: pm-mascot-tap 1.15s cubic-bezier(0.3, 0, 0.2, 1) infinite; }

/* The thinking cloud: three puffs that grow out of his head, then the dots. */
.think-cloud { position: absolute; left: 62%; top: -26%; width: 66%; pointer-events: none; }
.think-cloud svg { display: block; width: 100%; height: auto; overflow: visible; }
.think-puff { transform-box: fill-box; transform-origin: center; }
.think-dot { transform-box: fill-box; transform-origin: center; }

/* The thinking card. This is what replaces the old line of large text. */
.thinking-stage {
  display: flex; align-items: center; gap: 26px;
  padding: 22px 4px 10px;
}
.thinking-mascot { position: relative; width: 132px; flex-shrink: 0; margin-top: 12px; }
@media (max-width: 560px) { .thinking-mascot { width: 96px; } .thinking-stage { gap: 16px; } }

.thinking-copy { min-width: 0; }
.thinking-label {
  font-family: var(--font-display); font-size: 1.02rem; font-weight: 600;
  letter-spacing: -0.01em; color: var(--ink);
}
.thinking-sub {
  margin-top: 5px; font-size: 0.84rem; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* The card must not clip the cloud, which sits above the mascot's head. */
.card-agent:has(.thinking-stage) { overflow: visible; }

/* Hero mascot: he greets you on the empty console. */
.hero-mascot { width: 132px; margin: 0 auto 26px; }
.hero-mascot .mascot { animation: pm-mascot-breathe 3.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .hero-mascot .mascot,
  .mascot.is-thinking .mascot-body,
  .mascot.is-thinking .mascot-shoe { animation: none; }
}

/* ===================================================================
   Console empty state, rebuilt.
   The old screen was a headline floating in a void with the input
   pinned far below it. Space is not the problem — unused space is. The
   column below now carries real starting points and the shape of what
   happens next, so the emptiness reads as calm rather than unfinished.
   =================================================================== */

.screen {
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(48px, 9vh, 104px) 24px 34px;
  text-align: center;
}

.hero-head { display: flex; flex-direction: column; align-items: center; }
.hero-mascot { width: 118px; margin: 0 0 22px; }

.headline {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 5.4vw, 3.1rem);
  font-weight: 600; letter-spacing: -0.035em; line-height: 1.05;
}
.subline {
  margin-top: 16px; max-width: 46ch;
  font-size: 1.02rem; line-height: 1.6; color: var(--ink-dim);
}

/* Starting points. The single biggest usability win on this screen: a blank
   box teaches nobody what the tool is for. */
.starters { margin-top: 46px; }
.starters-label {
  font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.16em; color: var(--ink-dim); margin-bottom: 14px;
}
.starter-grid { display: grid; gap: 10px; }
@media (min-width: 620px) { .starter-grid { grid-template-columns: 1fr 1fr; } }

.starter {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 18px; text-align: left; cursor: pointer;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface); color: var(--ink);
  font-family: var(--font-body); font-size: 0.95rem;
  transition: border-color 0.18s ease, transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s ease;
}
.starter:hover {
  border-color: var(--blue);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(51, 85, 255, 0.12);
}
.starter-tag {
  flex-shrink: 0; font-family: var(--font-mono); font-size: 0.6rem;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--blue);
  background: rgba(51, 85, 255, 0.08); border-radius: 999px; padding: 5px 9px;
}
.starter-text { color: var(--ink-dim); }
.starter:hover .starter-text { color: var(--ink); }

/* What happens after you press send. Expectation-setting, not decoration. */
.flow {
  list-style: none; margin-top: 40px;
  display: grid; gap: 12px; text-align: left;
}
@media (min-width: 620px) { .flow { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
.flow li {
  display: flex; align-items: center; gap: 11px;
  font-size: 0.86rem; color: var(--ink-dim);
}
.flow-n {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 0.66rem;
  color: var(--blue); border: 1px solid rgba(51, 85, 255, 0.28);
}

/* The console sits closer to the column it belongs to. */
.console-wrap { max-width: 780px; }

/* The console is pinned to the bottom of the viewport, so the column above it
   has to end above it. Without this the starters and the flow strip sit
   underneath the input where nobody can read or click them. */
.screen { padding-bottom: 250px; }
@media (max-width: 620px) { .screen { padding-bottom: 230px; } }

/* The console is fixed to the bottom, so the conversation column has to end
   above it — otherwise every new question renders underneath the input box
   instead of above it. Same reason .screen reserves space. */
.session { padding-bottom: 250px; }
@media (max-width: 620px) { .session { padding-bottom: 230px; } }

/* ===================================================================
   Colour.
   The screen was near-monochrome: one blue, a lot of grey. Each thing
   that means something different now looks different — the two target
   agents keep their own hues, question cards read cool, results read
   warm-positive, and the starter tags are colour-coded by kind.
   =================================================================== */

.headline {
  background: linear-gradient(96deg, var(--ink) 30%, var(--blue) 65%, var(--violet) 95%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--blue);
}

/* Starters, colour-coded by the kind of work. */
.starter:nth-child(1) .starter-tag { color: #c2410c; background: rgba(217, 119, 87, 0.13); }
.starter:nth-child(2) .starter-tag { color: #0f766e; background: rgba(18, 165, 148, 0.13); }
.starter:nth-child(3) .starter-tag { color: var(--violet); background: rgba(139, 63, 232, 0.11); }
.starter:nth-child(4) .starter-tag { color: var(--blue); background: rgba(51, 85, 255, 0.10); }
.starter:nth-child(1):hover { border-color: var(--claude); box-shadow: 0 10px 26px rgba(217, 119, 87, 0.16); }
.starter:nth-child(2):hover { border-color: var(--codex); box-shadow: 0 10px 26px rgba(18, 165, 148, 0.16); }
.starter:nth-child(3):hover { border-color: var(--violet); box-shadow: 0 10px 26px rgba(139, 63, 232, 0.16); }

.flow li:nth-child(1) .flow-n { color: var(--claude); border-color: rgba(217, 119, 87, 0.4); }
.flow li:nth-child(2) .flow-n { color: var(--violet); border-color: rgba(139, 63, 232, 0.4); }
.flow li:nth-child(3) .flow-n { color: var(--codex); border-color: rgba(18, 165, 148, 0.4); }

/* Cards carry a colour edge for what they are, so a scrolled-back session is
   scannable without reading every label. */
.card { position: relative; overflow: hidden; }
.card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--line);
}
.card-user::before { background: linear-gradient(180deg, var(--blue), var(--violet)); }
.card-agent::before { background: linear-gradient(180deg, var(--violet), var(--blue)); }
.card-result::before { background: linear-gradient(180deg, var(--codex), #6ee7c8); }
.card-error::before { background: linear-gradient(180deg, #d64545, #f08a8a); }

.card-label { color: var(--blue); }
.card-error .card-label { color: #d64545; }
.card-result .card-label { color: #0f766e; }

/* The thinking state stands alone — no card, no border, no surface. It occupies
   the space the hero just vacated, so the screen reads as one thing becoming
   another rather than a box appearing under a headline. */
.thinking-solo {
  display: flex; justify-content: center;
  padding: clamp(60px, 14vh, 130px) 24px 40px;
}
.thinking-solo .thinking-stage { padding: 0; }
.thinking-solo .thinking-label { font-size: 1.22rem; }
.thinking-solo .thinking-mascot { width: 152px; }
@media (max-width: 560px) {
  .thinking-solo { padding-top: 56px; }
  .thinking-solo .thinking-mascot { width: 110px; }
  .thinking-solo .thinking-label { font-size: 1.05rem; }
}