/* Marginalia — margin-book aesthetic.
 *
 * The page is shaped like a printed page with its left margin
 * reserved for annotations. The chat thread sits in the main text
 * column. Past graphs live in the margin.
 */

* {
  box-sizing: border-box;
}

:root {
  --serif: "Crimson Pro", Georgia, "Times New Roman", serif;
  --ink:   #1c1815;
  --paper: #faf6ef;
  --rule:  #d4c8ad;
  --margin-ink: #6a5d44;
  --accent: #7a3a1c;
  --quiet: #8b7e63;
  --error: #a63a1a;
  --max-width: 36rem;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.55;
}

body {
  display: block;
  min-height: 100vh;
}

/* Caps strip — full-width across the top of the viewport so the
   visitor sees current spend at a glance before they even start
   reading the chat. Sticky so it follows scroll on desktop.
   Mobile collapses it behind a toggle. */
#caps-strip {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  padding: 0.4rem 1.25rem;
}
.caps-toggle {
  display: none;
  background: none;
  border: 1px solid var(--rule);
  color: var(--margin-ink);
  font: inherit;
  font-size: 0.8rem;
  padding: 0.15rem 0.55rem;
  border-radius: 4px;
  cursor: pointer;
}
.caps-toggle:hover {
  background: rgba(212, 200, 173, 0.18);
  color: var(--accent);
}

/* 3-column margin-book layout: past graphs | thread | insights.
   Each margin holds its own annotation column; the thread fills
   the centre. */
.page-grid {
  display: grid;
  grid-template-columns: 14rem 1fr 18rem;
  min-height: calc(100vh - 3rem);
}

/* ---------- margin ---------- */

#margin {
  border-right: 1px solid var(--rule);
  padding: 2rem 1.25rem;
  color: var(--margin-ink);
  font-size: 0.92rem;
  /* Sticky annotations: stay glued to the viewport while the centre
     column scrolls. Now that the page itself is the scroller (not
     the .thread), both side margins behave like a printed book's
     marginalia — fixed against the running text. */
  position: sticky;
  top: 0;
  align-self: start;
  max-height: 100vh;
  overflow-y: auto;
}

#margin h2 {
  font-weight: 500;
  font-style: italic;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  margin: 0 0 1rem;
  color: var(--quiet);
}

#margin ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#margin li {
  margin: 0.6rem 0;
}

#margin a {
  color: var(--margin-ink);
  text-decoration: none;
  border-bottom: 1px dotted var(--rule);
}

#margin a:hover { color: var(--accent); }

#margin .meta {
  display: block;
  font-size: 0.8rem;
  color: var(--quiet);
  font-style: italic;
}

#margin .empty {
  color: var(--quiet);
  font-style: italic;
}

/* ---------- main ---------- */

#surface {
  /* Fills the centre grid column; the inner wrapper caps reading
     width so the central chat column stays calm and ChatGPT-shaped
     while the side margins (margin-book aesthetic) fill the gutters. */
  padding: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100vh;
}

#surface-inner {
  width: 100%;
  max-width: 52rem; /* ~820px reading column per central UI brief */
  margin: 0 auto;
  padding: 2rem 1.75rem 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

#surface header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem 1rem;
  margin-bottom: 2rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--rule);
}

.brand {
  font-size: 1.6rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.identity {
  font-size: 0.78rem;
  color: var(--quiet);
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  cursor: pointer;
  letter-spacing: -0.02em;
}

.identity:hover { color: var(--accent); }

.budget {
  display: flex;
  gap: 0.35rem;
  align-items: baseline;
}
.budget-pill {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 0.7rem;
  padding: 0.1rem 0.45rem;
  border-radius: 10px;
  background: rgba(212, 200, 173, 0.18);
  color: var(--quiet);
  border: 1px solid var(--rule);
  letter-spacing: -0.02em;
  cursor: help;
}
.budget-pill.budget-amber {
  background: rgba(212, 150, 60, 0.18);
  color: #a96b1f;
  border-color: rgba(212, 150, 60, 0.5);
}
.budget-pill.budget-red {
  background: rgba(200, 64, 64, 0.18);
  color: #a02525;
  border-color: rgba(200, 64, 64, 0.6);
}

/* ---------- centre-of-page caps bar (Phase 9) ---------- */

/* Single-line layout at desktop widths: model badge + three meters
   inline across the top strip. Wraps to multi-line on narrower
   viewports via flex-wrap. The grid version of this had auto-fit
   columns collapsing weirdly and stacking everything vertically;
   flex is more predictable here. */
#caps.caps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.5rem;
  margin: 0;
  padding: 0;
}
/* The id+class `#caps.caps` rule above out-specifies the bare [hidden]
   attribute, which would otherwise leave the strip visible when hidden.
   This rule restores the hidden behaviour (the JS toggle owns visibility). */
#caps.caps[hidden] {
  display: none;
}

/* Each meter (and the link wrapper around it) flexes to share the
   strip evenly, with a sensible minimum so the label + value stay
   legible. Anchor wrappers from linkMeter inherit the same sizing. */
.cap-meter,
#caps a.cap-link {
  flex: 1 1 220px;
  min-width: 200px;
}

/* Current chat model badge, leading the cap strip. Short label
   ("model") + the model's short name. Hover for the full id. */
.cap-model {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 0.72rem;
  line-height: 1.2;
  color: var(--quiet);
  padding-right: 0.6rem;
  border-right: 1px solid var(--rule);
  white-space: nowrap;
}
.cap-model-label {
  font-style: italic;
  color: var(--quiet);
}
.cap-model-value {
  color: var(--accent);
  font-weight: 500;
  cursor: help;
}
/* Tier-3c corner: the agent-card path (top) + "developers" (beneath). */
.cap-model-card {
  color: var(--accent);
  text-decoration: underline;
  white-space: normal;
  word-break: break-all;
  max-width: 13rem;
  font-size: 0.62rem;
}
.cap-model-dev {
  font-style: italic;
  color: var(--quiet);
  text-decoration: underline;
}
.cap-model-card:hover,
.cap-model-dev:hover {
  color: var(--accent);
}

.cap-meter {
  font-size: 0.75rem;
  color: var(--quiet);
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
}

.cap-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.25rem;
}

.cap-label {
  letter-spacing: -0.01em;
}

.cap-value {
  font-size: 0.7rem;
  opacity: 0.85;
}

.cap-bar {
  height: 4px;
  background: rgba(212, 200, 173, 0.25);
  border-radius: 2px;
  overflow: hidden;
}

.cap-fill {
  height: 100%;
  background: var(--accent, #7d6b3f);
  transition: width 0.5s ease;
}
.cap-fill.budget-amber { background: #c89043; }
.cap-fill.budget-red { background: #b53939; }

.header-nav {
  display: flex;
  gap: 1rem;
  font-size: 0.85rem;
}

.header-nav .nav-link {
  color: var(--quiet);
  text-decoration: none;
}
.header-nav .nav-link:hover { color: var(--accent); }
.header-nav .nav-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

/* ---------- sessions search page ---------- */

.sessions-page {
  max-width: 38rem;
  margin: 0 auto;
}

.sessions-page h2 {
  font-size: 1.4rem;
  margin: 0 0 0.5rem 0;
}

.sessions-blurb {
  color: var(--quiet);
  font-size: 0.92rem;
  margin: 0 0 1.2rem 0;
}

.sessions-search-form {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.sessions-search-form input[type="search"] {
  flex: 1;
  padding: 0.5rem 0.7rem;
  font-size: 1rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
}

.sessions-search-form button {
  padding: 0.5rem 1rem;
}

.sessions-status {
  color: var(--quiet);
  font-size: 0.85rem;
  min-height: 1.2em;
  margin: 0 0 0.5rem 0;
}

.sessions-results {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.6rem;
}

.session-result a {
  display: block;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  text-decoration: none;
  color: var(--ink);
  background: var(--paper);
}

.session-result a:hover {
  border-color: var(--accent);
}

.session-intro {
  font-size: 1rem;
  margin-bottom: 0.2rem;
}

.session-meta {
  font-size: 0.78rem;
  color: var(--quiet);
}

/* ---------- welcome ---------- */

#welcome {
  background: rgba(212, 200, 173, 0.18);
  border: 1px solid var(--rule);
  padding: 1.25rem;
  margin-bottom: 2rem;
  font-size: 0.95rem;
}

#welcome p { margin: 0 0 1rem; }

#welcome a { color: var(--accent); }

/* ---------- activity feed ---------- */

/* The front-page "what this is" line. Sits between the header and
   the activity feed. One sentence + a link into the Privacy popup.
   Subtle styling so it doesn't compete with the chat thread for
   attention; just there so a first-time visitor knows what they're
   looking at. */
.nature-line {
  font-size: 0.92rem;
  color: var(--margin-ink);
  font-style: italic;
  line-height: 1.55;
  border-left: 2px solid var(--rule);
  padding: 0.3rem 0 0.3rem 0.8rem;
  margin: 0 0 1.25rem 0;
}
.nature-line em {
  color: var(--ink);
  font-style: italic;
  margin-right: 0.25rem;
}
.nature-line .legal-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-style: italic;
  color: var(--accent);
  cursor: pointer;
  border-bottom: 1px dotted var(--rule);
}
.nature-line .legal-link:hover {
  border-bottom-color: var(--accent);
  background: none;
}

.feed:empty { display: none; }

.feed {
  margin-bottom: 1.25rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px dashed var(--rule);
}

.feed .heading {
  font-size: 0.8rem;
  font-style: italic;
  color: var(--quiet);
  margin-bottom: 0.3rem;
}

/* Compact activity-feed turns — half-line of "Prompted: …" + 1–2
   lines of response with click-to-reveal "more". Much tighter than
   the full chat-turn grid. */
.turn.activity-turn {
  grid-template-columns: 4.5rem 1fr;
  gap: 0.6rem;
  margin: 0;
  padding: 0.15rem 0;
  align-items: baseline;
  font-size: 0.92rem;
  line-height: 1.45;
}
.turn.activity-turn .who {
  font-size: 0.72rem;
  padding-top: 0.1rem;
}
.turn.activity-turn .body p {
  margin: 0;
}
.turn.activity-turn .activity-prompt {
  font-size: 0.78rem;
  color: var(--quiet);
  font-style: italic;
  margin-bottom: 0.15rem;
}
.turn.activity-turn .activity-response {
  color: var(--ink);
}
.activity-more {
  background: none;
  border: none;
  padding: 0 0 0 0.25rem;
  font: inherit;
  font-size: 0.82rem;
  color: var(--accent);
  cursor: pointer;
  font-style: italic;
}
.activity-more:hover { background: none; color: var(--accent); }

/* ---------- chat thread ---------- */

.thread {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  /* No internal scroll cap — the whole page scrolls. The composer
     sticks to the viewport bottom (below), so long threads keep the
     input reachable without trapping the user in a nested scroller.
     Extra bottom padding leaves room for the sticky composer + the
     terms block to slide under without overlapping content. */
  padding: 0 0.25rem 0 0;
  margin: 0 0 1rem 0;
  scroll-padding-bottom: 12rem;
  /* Smooth scroll for jump-to-latest button. */
  scroll-behavior: smooth;
}

.turn {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 1rem;
  align-items: baseline;
  line-height: 1.65;
  font-size: 1.02rem;
}

.turn .who {
  font-size: 0.78rem;
  text-align: right;
  color: var(--quiet);
  font-style: italic;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  padding-top: 0.3rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.turn.user .who { color: var(--ink); }
.turn.synth .who { color: var(--accent); font-style: normal; }
.turn.graph .who { color: var(--margin-ink); }

.turn .body { white-space: pre-wrap; word-wrap: break-word; }
.turn.user .body { font-weight: 500; }

.turn.memory-hint {
  font-size: 0.85rem;
  color: var(--quiet);
  font-style: italic;
}

.turn .flag {
  margin-left: 0.5rem;
  background: none;
  border: none;
  color: var(--quiet);
  font-size: 0.75rem;
  cursor: pointer;
}
.turn .flag:hover { color: var(--error); }

/* Connection banner reconnect link — make the call-to-action obviously
   clickable inside the (red) closed-connection notice. */
.conn-banner .conn-reconnect {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

/* ---------- composer ---------- */

/* Sticky bottom composer. Stays glued to the viewport while the
   page scrolls — the chat thread + activity feed flow above; the
   privacy/terms block sits below and only appears when the visitor
   scrolls past the composer. The translucent backdrop keeps the
   paper texture visible behind streaming text but stops the
   composer looking like floating glass. */
#composer {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.9rem 0 0.5rem 0;
  margin-top: auto;
  background:
    linear-gradient(
      to top,
      var(--paper) 0%,
      var(--paper) 65%,
      rgba(250, 246, 239, 0.92) 95%,
      rgba(250, 246, 239, 0) 100%
    );
  backdrop-filter: blur(2px);
}

.composer-row {
  /* Taller input on its own line; Send sits below-and-to-the-right. */
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--paper);
  padding: 0.6rem 0.75rem;
  transition: border-color 0.15s ease;
}

.composer-row:focus-within {
  border-color: var(--accent);
}

#input {
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.45;
  padding: 0.2rem 0;
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: none;
  color: var(--ink);
  resize: none;
  /* ~3 visible rows by default; auto-grows up to the max via resizeTextarea. */
  min-height: 5rem;
  max-height: 14rem;
  overflow-y: auto;
}

#input:focus {
  outline: none;
}

.composer-send-row {
  display: flex;
  justify-content: flex-end;
}

.composer-row #send {
  padding: 0.5rem 1.4rem;
  border-radius: 4px;
}

/* Volatile info affordance: tooltip on hover (desktop), popup on tap. */
.volatile .info-btn {
  background: none;
  border: none;
  color: var(--quiet);
  font-size: 0.95rem;
  line-height: 1;
  padding: 0 0.1rem;
  cursor: pointer;
}
.volatile .info-btn:hover {
  color: var(--accent);
}

.composer-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-size: 0.78rem;
  color: var(--quiet);
  padding: 0 0.25rem;
}

.send-terms {
  margin: 0;
  font-style: italic;
  text-align: right;
  font-size: 0.78rem;
  color: var(--quiet);
}
.send-terms .legal-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--accent);
  cursor: pointer;
  border-bottom: 1px dotted var(--rule);
}
.send-terms .legal-link:hover {
  border-bottom-color: var(--accent);
  background: none;
  color: var(--accent);
}

/* Legal popup dialog — Privacy / Disclaimer / Terms each open here. */
dialog.legal-dialog {
  max-width: 32rem;
}
dialog.legal-dialog h3 {
  font-style: italic;
  font-weight: 500;
  margin: 0 0 0.75rem;
}
.legal-dialog-body p {
  margin: 0 0 0.8rem;
  font-size: 0.92rem;
  line-height: 1.55;
}
.legal-dialog-body em { font-style: italic; }
.legal-dialog-body a { color: var(--accent); }
.legal-dialog-body .legal-meta {
  font-size: 0.78rem;
  color: var(--quiet);
  font-style: italic;
}

.volatile {
  font-size: 0.8rem;
  color: var(--quiet);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.volatile small { color: var(--quiet); }

/* ---------- jump to latest ---------- */
.jump-to-latest {
  position: sticky;
  bottom: 7rem;
  align-self: center;
  background: var(--paper);
  color: var(--margin-ink);
  border: 1px solid var(--rule);
  font: inherit;
  font-size: 0.8rem;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(28, 24, 21, 0.08);
  cursor: pointer;
  z-index: 6;
  margin-bottom: -2rem;
}
.jump-to-latest:hover { color: var(--accent); border-color: var(--accent); }

/* legacy inline legal block removed — see dialog.legal-dialog above */

/* ---------- cap-bar pills are clickable into /usage ---------- */
a.cap-link {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
  transition: background 0.12s ease;
}
a.cap-link:hover {
  background: rgba(212, 200, 173, 0.18);
}
a.cap-link:hover .cap-label {
  color: var(--accent);
}

/* ---------- /usage page ---------- */
.usage-page {
  max-width: 64rem;
  margin: 0 auto;
  padding: 1rem 1.5rem 3rem;
  color: var(--ink);
}
.usage-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 0.6rem;
  margin-bottom: 1.2rem;
  border-bottom: 1px solid var(--rule);
}
.usage-page h2 {
  font-size: 1.4rem;
  margin: 0 0 0.5rem 0;
  font-weight: 600;
}
.usage-scope-id {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  color: var(--quiet);
  font-size: 0.85rem;
  font-weight: 400;
}
.usage-status {
  color: var(--quiet);
  font-size: 0.9rem;
  margin: 0 0 1.4rem;
}
.usage-status strong { color: var(--ink); font-weight: 500; }
.usage-tables {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.usage-table-block h3 {
  font-size: 1rem;
  font-style: italic;
  font-weight: 500;
  color: var(--quiet);
  margin: 0 0 0.5rem;
}
.usage-view-all {
  font-style: normal;
  font-size: 0.82rem;
  margin-left: 0.75rem;
  color: var(--accent);
  text-decoration: none;
}
.usage-table .usage-query { max-width: 28rem; overflow-wrap: anywhere; }
.usage-table .usage-origin { color: var(--quiet); }
.usage-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
}
.usage-table thead th {
  text-align: left;
  font-weight: 500;
  font-style: italic;
  color: var(--quiet);
  border-bottom: 1px solid var(--rule);
  padding: 0.4rem 0.5rem;
}
.usage-table tbody td {
  padding: 0.35rem 0.5rem;
  border-bottom: 1px dashed var(--rule);
  vertical-align: top;
}
.usage-table .usage-cost { color: var(--accent); font-weight: 500; }
.usage-table .usage-stamp { color: var(--margin-ink); }
.usage-table .usage-tokens { white-space: nowrap; }
.usage-table .usage-ids { color: var(--quiet); white-space: nowrap; }
.usage-empty {
  color: var(--quiet);
  font-style: italic;
  margin: 0.5rem 0 0;
}

@media (max-width: 720px) {
  .usage-table { font-size: 0.78rem; }
  .usage-table thead th,
  .usage-table tbody td { padding: 0.25rem 0.3rem; }
  .usage-table .usage-latency,
  .usage-table .usage-tokens { display: none; }
}

button {
  font-family: var(--serif);
  font-size: 0.95rem;
  background: var(--ink);
  color: var(--paper);
  border: none;
  padding: 0.55rem 1.2rem;
  cursor: pointer;
}

button:hover { background: var(--accent); }
button:disabled { background: var(--quiet); cursor: progress; }

/* ---------- dialogs ---------- */

dialog {
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  max-width: 28rem;
  padding: 1.5rem;
}

dialog::backdrop { background: rgba(28, 24, 21, 0.4); }

dialog h3 {
  margin: 0 0 0.75rem;
  font-weight: 600;
}

dialog p {
  margin: 0 0 1rem;
  font-size: 0.95rem;
}

dialog label {
  display: block;
  margin: 0.75rem 0;
}

dialog label span {
  display: block;
  font-size: 0.85rem;
  color: var(--quiet);
  margin-bottom: 0.3rem;
}

dialog input, dialog textarea, dialog select {
  width: 100%;
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: 0.9rem;
  padding: 0.5rem;
  border: 1px solid var(--rule);
  background: transparent;
}

dialog menu {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin: 1rem 0 0;
  padding: 0;
}

dialog menu button[value="cancel"] {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--rule);
}

.error {
  color: var(--error);
  font-size: 0.85rem;
  margin: 0.4rem 0;
}

/* ---------- right margin (insights) ---------- */

#margin-right {
  border-left: 1px solid var(--rule);
  padding: 2rem 1.25rem;
  color: var(--margin-ink);
  font-size: 0.9rem;
  /* Stick to the viewport top while the centre scrolls. */
  position: sticky;
  top: 0;
  align-self: start;
  max-height: 100vh;
  overflow-y: auto;
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .page-grid {
    grid-template-columns: 1fr;
  }
  /* Mobile: caps strip is collapsed by default. The toggle button
     reveals the meters when the visitor taps it. */
  .caps-toggle { display: inline-block; }
  #caps-strip {
    padding: 0.35rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  #caps-strip #caps {
    flex: 1;
    min-width: 0;
  }
  /* Mobile: collapse the printed-book side margins into compact
     scrollable strips. Past graphs at top, insights below the chat.
     Both capped at ~28vh so they don't dominate the page; the chat
     surface remains the focus. */
  #margin, #margin-right {
    position: static;
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
  }
  #margin {
    order: 0;
    border-right: none;
    border-bottom: 1px dashed var(--rule);
    max-height: 28vh;
    overflow-y: auto;
  }
  #margin h2 { margin: 0 0 0.4rem; }
  #margin li { margin: 0.35rem 0; }
  #surface {
    order: 1;
  }
  #surface-inner {
    padding: 0.75rem 1rem 0;
    max-width: none;
  }
  #margin-right {
    order: 2;
    border-left: none;
    border-top: 1px dashed var(--rule);
    max-height: 32vh;
    overflow-y: auto;
  }
  #surface header {
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
  }
  /* Tighten cap bar labels on mobile so each meter fits two
     columns (or one when really narrow). */
  .cap-meter { font-size: 0.72rem; }
  .cap-head { gap: 0.4rem; }
  /* Sticky composer on mobile too — sits above the on-screen
     keyboard via standard viewport-fit behaviour. */
  #composer {
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
  }
  .composer-actions {
    flex-wrap: wrap;
    gap: 0.3rem 0.75rem;
  }
  .send-terms { text-align: left; }
  .turn {
    grid-template-columns: 3.5rem 1fr;
    gap: 0.5rem;
    font-size: 0.95rem;
  }
  .turn .who { font-size: 0.7rem; }
}

/* ---------- insights panel ---------- */

.insights {
  color: var(--margin-ink);
}

.insights-head {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.insights-head h3 {
  font-style: italic;
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  margin: 0;
  color: var(--quiet);
}

.insights-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.78rem;
}

.insights-stamp {
  color: var(--quiet);
  font-style: italic;
  width: 100%;
}

.insights-actions button {
  background: none;
  border: 1px solid var(--rule);
  color: var(--margin-ink);
  padding: 0.1rem 0.45rem;
  border-radius: 2px;
  cursor: pointer;
  font: inherit;
}
.insights-actions button:hover { color: var(--accent); border-color: var(--accent); }

.insights-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.5rem 0 1rem;
}

.insights-tag {
  border: 1px solid var(--rule);
  padding: 0.05rem 0.4rem;
  border-radius: 2px;
  font-size: 0.82rem;
  color: var(--margin-ink);
  /* Chips are now buttons (clickable — ask the graph about a theme). */
  background: none;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}
.insights-tag:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.insights-tag.insights-more {
  color: var(--quiet);
  font-style: italic;
}

/* Developers page (Task 3). */
.developers-page { padding: 0 0.5rem; }
.dev-facts {
  display: grid; grid-template-columns: 7rem 1fr; gap: 0.35rem 1rem;
  margin: 1rem 0 1.5rem; font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 0.9rem;
}
.dev-facts dt { color: var(--quiet); }
.dev-facts dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.dev-links { list-style: none; padding: 0; margin: 0; }
.dev-links li { padding: 0.35rem 0; border-bottom: 1px solid var(--rule); }
.dev-links .dev-link { color: var(--accent); text-decoration: none; }
.dev-links .dev-link:hover { text-decoration: underline; }
.swagger-ui-container { margin-top: 1rem; }

/* Small info popup (e.g. the volatile explanation on mobile). */
.info-dialog {
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 1.25rem 1.5rem;
  max-width: 26rem;
  background: var(--bg, #faf6ee);
  color: var(--ink);
}
.info-dialog::backdrop { background: rgba(0, 0, 0, 0.25); }
.info-dialog h3 { margin: 0 0 0.6rem; font-style: italic; font-weight: 500; }
.info-dialog p { margin: 0 0 1rem; font-size: 0.92rem; line-height: 1.55; }
.info-dialog .dialog-close {
  background: none; border: 1px solid var(--rule); border-radius: 3px;
  padding: 0.25rem 0.75rem; cursor: pointer; color: var(--ink); font-family: inherit;
}

/* Visitor identity + browser-memory popup (Tasks 12/13). */
.visitor-dialog {
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 1.25rem 1.5rem;
  max-width: 30rem;
  background: var(--bg, #faf6ee);
  color: var(--ink);
}
.visitor-dialog::backdrop { background: rgba(0, 0, 0, 0.25); }
.visitor-dialog h3 { margin: 0 0 0.75rem; }
.visitor-dialog .muted { color: var(--quiet); font-size: 0.85rem; }
.visitor-dialog code { font-family: ui-monospace, Menlo, monospace; }
.visitor-label-form { display: flex; gap: 0.5rem; margin: 0.75rem 0 0.25rem; }
.visitor-label-form input {
  flex: 1; padding: 0.3rem 0.5rem; border: 1px solid var(--rule); border-radius: 3px;
  font-family: inherit;
}
.visitor-label-form button,
.visitor-mode-opt,
.visitor-clear,
.visitor-dialog .dialog-close {
  background: none; border: 1px solid var(--rule); border-radius: 3px;
  padding: 0.3rem 0.7rem; cursor: pointer; color: var(--ink); font-family: inherit;
}
.visitor-error { color: var(--error); font-size: 0.85rem; margin: 0.25rem 0; }
.visitor-mode { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; margin: 1rem 0 0.25rem; font-size: 0.88rem; }
.visitor-mode-opt.active { border-color: var(--accent); color: var(--accent); }
.visitor-note { margin: 0.75rem 0; }
.visitor-actions { display: flex; justify-content: space-between; gap: 0.5rem; margin-top: 0.75rem; }
.visitor-clear { color: var(--error); border-color: var(--error); }

/* Full-themes popup (the "+N more" set). */
.insights-all-dialog {
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 1.25rem 1.5rem;
  max-width: 32rem;
  background: var(--bg, #faf6ee);
  color: var(--ink);
}
.insights-all-dialog::backdrop { background: rgba(0, 0, 0, 0.25); }
.insights-all-dialog h3 { margin: 0 0 0.75rem; }
.insights-all-dialog .dialog-close {
  margin-top: 1rem;
  background: none;
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 0.25rem 0.75rem;
  cursor: pointer;
  color: var(--ink);
}

.insights-memories {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.insights-memory {
  border-left: 2px solid var(--rule);
  padding: 0.2rem 0 0.2rem 0.65rem;
}
.insights-memory .body {
  color: var(--ink);
  font-style: italic;
  font-size: 0.88rem;
  line-height: 1.4;
  /* Truncate to ~3 lines by default; click to expand. */
  max-height: 3.8em;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.insights-memory .body:not(.expanded)::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1.2em;
  background: linear-gradient(to bottom, transparent, var(--paper));
  pointer-events: none;
}
.insights-memory .body.expanded {
  max-height: none;
  cursor: default;
}
.insights-memory .body.expanded::after { display: none; }
.insights-memory .footer {
  margin-top: 0.3rem;
  font-size: 0.75rem;
  color: var(--quiet);
}
.src-placeholder { text-decoration: dotted underline; cursor: help; }

/* ---------- tool pills ---------- */

.tool-pill .body {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.85em;
  color: var(--margin-ink);
}

/* ---------- turn-view page (/graph/<g>/turn/<id>) ---------- */

.turn-view-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 2rem;
}

.turn-view-stamp {
  font-size: 0.85rem;
  font-style: italic;
  color: var(--quiet);
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
}

.turn-view-article {
  max-width: 42rem;
  margin: 0 auto;
}

.turn-view-user, .turn-view-graph {
  margin-bottom: 1.5rem;
}

.turn-view-sources {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px dotted var(--rule);
}
.turn-view-sources h3 {
  font-style: italic;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--quiet);
  margin: 0 0 0.5rem;
}
.turn-view-sources ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.turn-view-sources li {
  margin: 0.3rem 0;
}
.turn-view-sources a {
  color: var(--accent);
  word-break: break-all;
}

.turn-view-footer {
  margin-top: 2rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--rule);
  font-size: 0.85rem;
  color: var(--quiet);
}
.turn-view-footer a {
  color: var(--accent);
  text-decoration: none;
}
.turn-view-footer a:hover { text-decoration: underline; }

a.view-source {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dotted var(--rule);
}
a.view-source:hover { border-bottom-color: var(--accent); }

/* Projects — the studio. Panel in the chat surface + the /projects pages. */
#projects-panel { margin: 1rem 0 1.5rem; }
/* Studio CTA in the left margin (above past graphs). */
#margin-projects { margin-bottom: 1.5rem; }
#margin-projects .projects-panel { display: block; }
.projects-panel .heading { font-style: italic; color: var(--ink-soft, #6b6256); margin-bottom: 0.35rem; }
.projects-panel .heading a { color: var(--accent); text-decoration: none; }
.projects-panel .projects-all { font-size: 0.9rem; display: inline-block; margin-top: 0.15rem; }
.show-all a, .projects-panel .projects-all { color: var(--accent); text-decoration: none; }
li.show-all { margin-top: 0.5rem; opacity: 0.85; }
li.current-graph > a { font-weight: 600; }
.projects-list { list-style: none; padding: 0; }
.project-card { padding: 0.6rem 0; border-bottom: 1px solid var(--rule); }
.project-card .project-name { font-size: 1.05rem; color: var(--accent); text-decoration: none; }
.project-card .project-meta { display: block; font-size: 0.85rem; color: var(--ink-soft, #6b6256); }
/* Status pills. Archived reads distinctly so a set-aside project is obvious. */
.project-status {
  display: inline-block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em;
  padding: 0.05em 0.45em; border-radius: 3px; border: 1px solid var(--rule); color: var(--quiet);
}
.project-status.status-exploring { color: var(--accent); border-color: var(--accent); }
.project-status.status-archived { color: #8a6d3b; border-color: #c9a86a; background: rgba(201,168,106,0.12); }
.project-status.status-concluded { color: var(--ink-soft, #6b6256); }
/* File shelf — one clearly separated row per file (relpath + size),
   not a run-together paragraph. */
.project-files { list-style: none; padding: 0; margin: 0.5rem 0 1rem; }
.project-file-row { border-bottom: 1px solid var(--rule); }
.project-files a.project-file {
  display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  padding: 0.5rem 0; color: var(--accent); text-decoration: none;
}
.project-files a.project-file:hover .project-file-name { text-decoration: underline; }
.project-file-name { font-weight: 500; }
.project-file-size { color: var(--quiet); font-size: 0.85rem; white-space: nowrap; }

/* The BRIEF, rendered as Markdown, sits up top as the work's front matter. */
.project-brief { margin: 0.5rem 0 1.5rem; }
.project-brief-body { color: var(--ink); }

/* Inline file reader — full width of the reading column; Markdown pretty,
   other text monospaced. */
.project-reader {
  width: 100%; box-sizing: border-box;
  background: rgba(0,0,0,0.03);
  border: 1px solid var(--rule); border-radius: 4px; padding: 0.75rem 1rem;
  max-height: 70vh; overflow: auto;
}
.project-reader-pre {
  white-space: pre-wrap; word-break: break-word; margin: 0;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.85rem;
}

/* Rendered Markdown (project briefs + .md files). */
.markdown { line-height: 1.55; }
.markdown h1, .markdown h2, .markdown h3 { line-height: 1.2; margin: 1rem 0 0.5rem; }
.markdown h1 { font-size: 1.4rem; }
.markdown h2 { font-size: 1.15rem; }
.markdown h3 { font-size: 1rem; }
.markdown p { margin: 0.6rem 0; }
.markdown ul, .markdown ol { margin: 0.5rem 0; padding-left: 1.4rem; }
.markdown li { margin: 0.2rem 0; }
.markdown a { color: var(--accent); }
.markdown blockquote {
  border-left: 3px solid var(--rule); margin: 0.6rem 0; padding-left: 0.8rem;
  color: var(--ink-soft, #6b6256); font-style: italic;
}
.markdown code {
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.88em; background: rgba(0,0,0,0.05); padding: 0.05em 0.3em; border-radius: 3px;
}
.markdown pre.md-code {
  background: rgba(0,0,0,0.05); border: 1px solid var(--rule); border-radius: 4px;
  padding: 0.6rem 0.8rem; overflow: auto;
}
.markdown pre.md-code code { background: none; padding: 0; }
.back-link { display: inline-block; margin-bottom: 0.5rem; color: var(--accent); text-decoration: none; }
.retirement-note { font-style: italic; border-left: 3px solid var(--rule); padding-left: 0.75rem; }

/* Project log — timestamped record of how the work took shape. */
.project-log { list-style: none; padding: 0; margin: 0.5rem 0; }
.project-log-entry {
  display: grid; grid-template-columns: 7rem 1fr; gap: 0.5rem 1rem; align-items: baseline;
  padding: 0.4rem 0; border-bottom: 1px solid var(--rule);
}
.project-log-entry .log-when { color: var(--quiet); font-size: 0.82rem; white-space: nowrap; }
.project-log-entry .log-what { font-size: 0.92rem; }
.project-log-entry .log-note {
  grid-column: 2; color: var(--ink-soft, #6b6256); font-size: 0.88rem; font-style: italic;
}