/* Prism AI — chat-style stylesheet */

:root {
  --bg: #f8f7f2;
  --fg: #1f1f1f;
  --muted: #6c6c6c;
  --line: #e1e0db;
  --accent: #c4451c;
  --accent-soft: #f6dfd5;
  --user-bubble-bg: #ece9e2;
  --code-bg: #f0efea;
  --warn-bg: #fff4d6;
  --warn-fg: #735300;
  --ok-bg: #e0f2dc;
  --ok-fg: #2a5a18;
  --beg: #d8efd6;
  --int: #fce6c5;
  --adv: #f3cdcd;
  --max-col: 760px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--fg);
  background: var(--bg);
  /* Make room for the sticky composer at the bottom. JS keeps
     --composer-h synced to the composer's actual rendered height. */
  padding-bottom: var(--composer-h, 360px);
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

code, pre {
  font-family: ui-monospace, SF Mono, Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--code-bg);
  border-radius: 3px;
}
code { padding: 1px 4px; }
pre { padding: 12px; overflow-x: auto; position: relative; }

/* Per-code-block copy button. Hidden until the user hovers the block (or
   focuses the button via keyboard) so it stays out of the reading flow. */
.code-copy-btn {
  position: absolute;
  top: 6px; right: 6px;
  padding: 3px 8px;
  font: inherit; font-size: 0.72em;
  background: white; color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 4px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s;
}
pre:hover .code-copy-btn,
.code-copy-btn:focus { opacity: 1; }
.code-copy-btn:hover { color: var(--accent); border-color: var(--accent); }
.code-copy-btn.copied {
  color: var(--ok-fg); border-color: var(--ok-fg); opacity: 1;
}

.muted { color: var(--muted); }
.small { font-size: 0.85em; }

/* Header */
.site-header {
  display: flex; align-items: center; gap: 16px;
  padding: 8px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  position: sticky; top: 0; z-index: 5;
}
.brand { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; text-decoration: none; }
img.prism-wordmark { height: 32px; width: auto; display: block; }
img.prism-icon { width: 24px; height: 24px; vertical-align: middle; display: inline-block; }
.brand strong { font-size: 1.05em; }
.tagline { color: #F59E0B; font-family: sans-serif; font-size: 0.82em; align-self: flex-end; }
nav a { margin-left: 14px; }

main { padding: 0; }
.site-footer { display: none; }   /* footer is now absorbed into the composer */

/* ===== Chat page layout ===== */

.chat-page {
  max-width: var(--max-col);
  margin: 0 auto;
  /* Bottom padding clears the fixed .composer-wrap. body's padding-bottom
     can't do this because html, body are pinned to 100% height, so it sits
     inside the viewport instead of extending the scroll. Split into
     longhand because var() in the 4-value padding shorthand was being
     dropped by the browser's CSS parser. */
  padding: 24px 16px 0 16px;
  padding-bottom: var(--composer-h, 360px);
  min-height: 60vh;
}

/* ----- Welcome (initial empty state) ----- */
.welcome {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 48px 0 24px 0;
}
body.chatting .welcome { display: none; }   /* hidden once first turn lands */

.welcome-inner { width: 100%; }
img.big-icon {
  width: 67px; height: 67px;
  display: block; margin: 0 auto 8px;
  object-fit: contain;
}
.welcome h1 { margin: 0 0 6px 0; font-size: 1.8em; font-weight: 600; }
.welcome .lede { color: var(--muted); margin: 0 0 24px 0; }
.welcome .trial-banner {
  display: inline-block;
  background: var(--warn-bg); color: var(--warn-fg);
  border: 1px solid var(--warn-fg); border-radius: 6px;
  padding: 6px 12px; margin: 0 0 24px 0;
  font-size: 0.85em;
}

.samples {
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
  margin-bottom: 32px;
}
button.sample {
  background: white; border: 1px solid var(--line); color: var(--fg);
  padding: 8px 14px; font: inherit; font-size: 0.9em; border-radius: 9999px;
  cursor: pointer;
}
button.sample:hover { border-color: var(--accent); color: var(--accent); }
button.sample[disabled] { opacity: 0.5; pointer-events: none; }

/* Two-tier department chooser: top row shows engineering departments;
   clicking one expands a subchip row of concrete starter questions for
   that department. Subchips re-use the .sample class so the existing
   click handler fires. */
.depts {
  position: relative;  /* anchor for the full-width dropdown below */
  display: flex; gap: 6px; flex-wrap: wrap; justify-content: center;
  margin-bottom: 10px;
}
.dept-chip {
  background: white; border: 1px solid var(--line); color: var(--fg);
  padding: 4px 10px; font: inherit; font-size: 0.78em;
  border-radius: 9999px; cursor: pointer; font-weight: 500;
}
.dept-chip:hover { border-color: var(--accent); color: var(--accent); }
.dept-chip.active {
  background: var(--accent-soft); color: var(--accent);
  border-color: var(--accent);
}
.subchips { display: none; }
/* Dropdown spans the full width of the .depts row (= the welcome column)
   so long question subtitles fit on one line without ellipsis-truncating. */
.subchips.open {
  display: flex; flex-direction: column;
  position: absolute; top: calc(100% + 6px);
  left: 0; right: 0;
  background: white; border: 1px solid var(--line);
  border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10);
  padding: 4px; z-index: 5;
  text-align: left;
}

/* Copilot-style command-picker rows: title on top, full prompt below
   as muted subtitle. Higher specificity than `button.sample` so the pill
   styling from the welcome row doesn't bleed in here. */
.subchips .sample {
  display: flex; flex-direction: column; gap: 2px;
  background: transparent; border: 0; color: var(--fg);
  padding: 8px 10px; border-radius: 6px;
  text-align: left; width: 100%;
  font: inherit; cursor: pointer;
}
.subchips .sample:hover { background: var(--accent-soft); }
.subchips .opt-title {
  font-size: 0.88em; font-weight: 500; color: var(--fg);
  line-height: 1.25;
}
.subchips .sample:hover .opt-title { color: var(--accent); }
.subchips .opt-desc {
  font-size: 0.78em; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%; line-height: 1.3;
}

.projects-collapsible {
  text-align: left; margin-top: 14px;
  border-top: 1px solid var(--line); padding-top: 14px;
}
.projects-collapsible summary {
  cursor: pointer; color: var(--muted); padding: 4px 0;
  text-align: center;
}
.project-grid {
  list-style: none; padding: 14px 0 0 0;
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.project-card {
  background: white; border: 1px solid var(--line);
  border-radius: 6px; padding: 10px 12px;
}
.project-card a { color: var(--fg); }
.project-card .meta {
  display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0; font-size: 0.85em;
}

/* Pills & badges */
.badge {
  display: inline-block; padding: 1px 7px;
  border: 1px solid var(--line); background: white; border-radius: 3px;
  font-size: 0.78em; color: var(--muted); vertical-align: 2px;
}
.badge.ok { background: var(--ok-bg); color: var(--ok-fg); border-color: var(--ok-fg); }
.badge.warn { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-fg); }
.pill {
  display: inline-block; padding: 1px 8px;
  border-radius: 9999px; font-size: 0.78em; font-weight: 500;
}
.pill.beginner { background: var(--beg); }
.pill.intermediate { background: var(--int); }
.pill.advanced { background: var(--adv); }

/* ----- Chat thread ----- */
.chat-thread { display: flex; flex-direction: column; gap: 6px; padding: 8px 0 32px 0; }

.msg { display: flex; scroll-margin-bottom: var(--composer-h, 360px); }
.msg.user { justify-content: flex-end; padding: 8px 0; }
.msg.assistant {
  justify-content: flex-start; align-items: flex-start;
  gap: 12px; padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.msg.assistant:last-child { border-bottom: none; }

/* User: compact bubble on the right */
.msg.user .msg-bubble {
  max-width: 78%;
  background: var(--user-bubble-bg);
  padding: 10px 14px;
  border-radius: 16px 16px 4px 16px;
  white-space: pre-wrap;
}

/* Assistant message avatar: hidden — answers flow as plain prose without
   the prism logo on the side. Markup is left in the templates (and JS
   keeps emitting it) so this can be flipped back to `display: flex` if
   we want it back. */
.avatar {
  display: none;
  flex: 0 0 28px; width: 28px; height: 28px;
  align-items: center; justify-content: center;
  border-radius: 6px; background: transparent;
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: contain; display: block; }
.msg-content { flex: 1; min-width: 0; }
.msg-content p { margin: 0 0 10px 0; }
.msg-content p:last-child { margin-bottom: 0; }
/* Qwen3 sprinkles `---` section separators all over its answers; the
   browser default <hr> is a heavy black line that fights with the
   reading flow. Render it as a faint dashed spacer instead. */
.msg-content hr {
  border: 0;
  border-top: 1px dashed var(--line);
  margin: 16px 0;
  height: 0;
}
.msg-content .error-text {
  background: var(--warn-bg); color: var(--warn-fg); padding: 8px 12px; border-radius: 4px;
}

/* Per-assistant-message action row — currently just a "copy" pill. */
.msg-actions {
  margin-top: 10px;
  display: flex; gap: 8px;
}
.msg-copy-btn {
  background: none;
  border: 1px solid var(--line);
  color: var(--muted);
  font: inherit; font-size: 0.78em;
  padding: 2px 12px;
  border-radius: 9999px;
  cursor: pointer;
}
.msg-copy-btn:hover { color: var(--accent); border-color: var(--accent); }
.msg-copy-btn.copied { color: var(--ok-fg); border-color: var(--ok-fg); }

/* Export pills — same shape as .msg-copy-btn so they sit in a single row. */
.msg-pdf-btn, .msg-docx-btn {
  background: none;
  border: 1px solid var(--line);
  color: var(--muted);
  font: inherit; font-size: 0.78em;
  padding: 2px 12px;
  border-radius: 9999px;
  cursor: pointer;
  letter-spacing: 0.02em;
}
.msg-pdf-btn:hover, .msg-docx-btn:hover {
  color: var(--accent); border-color: var(--accent);
}
.msg-pdf-btn.copied, .msg-docx-btn.copied {
  color: var(--ok-fg); border-color: var(--ok-fg);
}
.msg-pdf-btn[disabled], .msg-docx-btn[disabled] {
  opacity: 0.5; cursor: wait;
}

/* Image gallery inside an assistant message */
.msg-assets {
  margin-top: 12px; padding-top: 8px;
  border-top: 1px dashed var(--line);
  font-size: 0.92em;
}
.msg-asset-group { margin-bottom: 4px; }
.msg-asset-group summary { cursor: pointer; padding: 4px 0; color: var(--muted); }
.msg-asset-group summary a { color: var(--fg); }
.asset-tiles {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 5px; padding: 6px 0;
}
.asset-tile img {
  width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 3px;
  background: white; border: 1px solid var(--line);
}
.asset-more { padding: 4px; }

/* Qwen3 thinking-mode reasoning trace. Open while streaming so the user sees
   the reasoning unfold; auto-collapses once </think> arrives so the answer
   below it dominates. Visually subdued — not the headline content. */
.thinking-block {
  margin: 0 0 12px 0;
  border-left: 2px solid var(--line);
  padding: 4px 0 4px 12px;
  font-size: 0.92em;
  color: var(--muted);
}
.thinking-block > summary {
  cursor: pointer;
  list-style: none;
  display: inline-block;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.04);
  color: var(--muted);
  font-weight: 500;
  user-select: none;
}
.thinking-block > summary::-webkit-details-marker { display: none; }
.thinking-block > summary::before {
  content: "▸ ";
  display: inline-block;
  transition: transform 0.15s ease;
}
.thinking-block[open] > summary::before { content: "▾ "; }
.thinking-block:hover > summary { background: rgba(0, 0, 0, 0.08); }
.thinking-body {
  margin-top: 8px;
  padding-right: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  line-height: 1.5;
  white-space: pre-wrap;
  color: var(--muted);
}
.thinking-body p { margin: 0 0 8px 0; }
.thinking-body p:last-child { margin-bottom: 0; }

/* ----- Composer (sticky bottom) ----- */
.composer-wrap {
  position: fixed; bottom: 0; left: 0; right: 0;
  /* Solid background with a thin fade strip above so the composer never
     overlaps message text behind it. The previous transparent->bg gradient
     across the whole wrap left ~28px of see-through area where the last
     line of an answer would visibly bleed through. */
  background: var(--bg);
  padding: 14px 16px 14px 16px;
  z-index: 4;
}
/* Thin fade strip just above the wrap, so content scrolling under it
   eases out instead of meeting a hard edge. */
.composer-wrap::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 100%;
  height: 24px;
  background: linear-gradient(to bottom, transparent, var(--bg));
  pointer-events: none;
}
.composer {
  display: flex; align-items: flex-end; gap: 8px;
  max-width: var(--max-col); margin: 0 auto;
  background: white;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 6px 6px 6px 14px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.06);
}
.composer textarea {
  flex: 1; border: 0; outline: 0;
  font: inherit; resize: none;
  min-height: 28px; max-height: 200px;
  padding: 8px 0; line-height: 1.5;
  background: transparent;
  overflow-y: auto;
}
.composer button {
  flex: 0 0 36px; width: 36px; height: 36px;
  background: var(--accent); color: white; border: 0;
  border-radius: 50%; cursor: pointer;
  font-size: 1.1em; display: inline-flex; align-items: center; justify-content: center;
}
.composer button:hover { background: #a73716; }
.composer button[disabled] { opacity: 0.5; cursor: wait; }
.composer-foot {
  text-align: center; max-width: var(--max-col); margin: 8px auto 0 auto;
}

/* Secondary "thinking mode" send button — sits next to the primary ↑ send.
   Outlined accent so the primary button stays visually dominant. */
.composer .send-thinking {
  background: white;
  color: var(--accent);
  border: 1px solid var(--accent);
}
.composer .send-thinking:hover { background: var(--accent-soft); }

/* Primary send button repurposed as Stop while a stream is in flight.
   Darker neutral so it reads as a halt action, not a CTA. */
.composer .send-direct.is-stop {
  background: #2a2a2a;
  color: white;
  font-size: 0.95em;
}
.composer .send-direct.is-stop:hover { background: #444; }

.stopped-mark { margin-top: 6px; font-style: italic; }

/* Attachment chips that render above the composer once files are picked. */
.attach-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  max-width: var(--max-col); margin: 0 auto 6px auto;
  padding: 0 4px;
}
.attach-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px 4px 10px;
  background: var(--accent-soft, #fbeae3);
  border: 1px solid var(--accent, #c8421f);
  border-radius: 999px;
  font-size: 0.88em;
  color: #4a2415;
  max-width: 280px;
}
.attach-chip-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 180px;
}
.attach-chip-size { font-size: 0.85em; }
.attach-chip-x {
  flex: 0 0 18px; width: 18px; height: 18px;
  background: transparent; color: inherit;
  border: 0; border-radius: 50%;
  cursor: pointer;
  font-size: 1.1em; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.attach-chip-x:hover { background: rgba(0,0,0,0.08); }

/* Paperclip — outlined neutral so it doesn't compete with the accent
   send button. Same circular footprint as the other composer buttons. */
.composer .composer-attach {
  background: white;
  color: #555;
  border: 1px solid var(--line, #ddd);
  font-size: 1.0em;
}
.composer .composer-attach:hover {
  background: #f4f4f4;
  color: #222;
}

/* User-bubble attachment line — small "📎 file.pdf (200 KB)" beneath the
   user's question text. */
.msg-attach-line {
  margin-top: 6px;
  opacity: 0.85;
}

/* HTMX indicator (we let the composer-button "spin" via opacity instead) */
.htmx-indicator { display: none; }
.htmx-request button[type=submit] { opacity: 0.5; cursor: wait; }
.htmx-request button.sample { opacity: 0.5; pointer-events: none; }

/* ============================================================ */
/*  Project detail page                                         */
/* ============================================================ */
.project-detail {
  max-width: 920px;
  margin: 0 auto;
  padding: 24px 16px;
}
.project-detail header h1 { margin: 8px 0 6px 0; }
.meta-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.back { display: inline-block; margin-bottom: 4px; }

.struct { margin: 36px 0; }
.struct h2 {
  margin: 0 0 8px 0;
  font-size: 1.25em;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}

/* ----- System block diagram (Mermaid) ----- */
.mermaid {
  background: white;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 14px;
  text-align: center;
  overflow-x: auto;
  margin-top: 8px;
}
.mermaid svg { max-width: 100%; height: auto; }

/* ----- Component cards ----- */
.component-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  margin-top: 8px;
}
.component-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.component-card header h3 { margin: 0; font-size: 1.05em; }
.component-card .role { margin: 0; font-size: 0.9em; }
.component-card .pinout-wrap { background: #fafaf7; border-radius: 4px; padding: 6px; }
.component-card .pinout { width: 100%; min-height: 200px; }
.component-card .component-photo { margin: 0; }
.component-card .component-photo img {
  width: 100%; max-width: 240px;
  border: 1px solid var(--line); border-radius: 4px;
  display: block; margin: 0 auto;
}
.component-card .component-photo figcaption { text-align: center; margin-top: 4px; }
.component-card details.specs summary { cursor: pointer; padding: 4px 0; }
.component-card details.specs dl {
  margin: 6px 0 0 0;
  display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px;
  font-size: 0.88em;
}
.component-card details.specs dt { color: var(--muted); }
.component-card details.specs dd { margin: 0; }

/* ----- Algorithm state diagram + table ----- */
.algorithm-diagram { margin-bottom: 14px; }
.states-table { width: 100%; border-collapse: collapse; font-size: 0.9em; }
.states-table th, .states-table td {
  padding: 6px 10px; text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.states-table th { background: var(--code-bg); font-weight: 500; }
.states-table code { font-size: 0.9em; }

/* ----- Wiring table ----- */
.wiring-table { width: 100%; border-collapse: collapse; font-size: 0.9em; }
.wiring-table th, .wiring-table td {
  padding: 4px 8px; text-align: left;
  border-bottom: 1px solid var(--line);
}
.wiring-table th { background: var(--code-bg); font-weight: 500; }
.wiring-table code { font-size: 0.85em; padding: 1px 4px; }

.wire-chip {
  display: inline-block;
  padding: 0 8px; border-radius: 9999px;
  font-size: 0.78em; font-weight: 500;
  border: 1px solid currentColor;
}
.wire-chip.wire-red    { color: #b13a1a; background: #fcdcd1; border-color: #b13a1a; }
.wire-chip.wire-black  { color: #1f1f1f; background: #d8d8d4; border-color: #1f1f1f; }
.wire-chip.wire-yellow { color: #735300; background: #fff3c4; border-color: #735300; }
.wire-chip.wire-white  { color: #5a5a5a; background: white; border-color: var(--line); }
.wire-chip.wire-green  { color: #1e5b1a; background: #d4ecd1; border-color: #1e5b1a; }
.wire-chip.wire-blue   { color: #1d4caa; background: #dde7fa; border-color: #1d4caa; }

/* ----- Power table ----- */
.power-table { width: 100%; border-collapse: collapse; font-size: 0.9em; }
.power-table th, .power-table td {
  padding: 4px 8px; text-align: left;
  border-bottom: 1px solid var(--line);
}
.power-table th { background: var(--code-bg); font-weight: 500; }
.power-table tr.totals { background: var(--accent-soft); font-weight: 500; }
.warnings { padding-left: 18px; margin-top: 10px; color: var(--warn-fg); }
.warnings li { margin-bottom: 4px; }

/* ----- Build steps ----- */
.build-steps { padding-left: 0; counter-reset: step; }
.build-steps li {
  list-style: none; margin: 0 0 8px 0;
}
.build-steps details {
  background: white; border: 1px solid var(--line);
  border-radius: 4px;
}
.build-steps summary {
  cursor: pointer; padding: 8px 12px;
  display: flex; gap: 12px; align-items: center;
}
.build-steps summary::marker { content: ""; }
.build-steps .step-n {
  display: inline-block;
  width: 26px; height: 26px; line-height: 26px; text-align: center;
  background: var(--accent-soft); color: var(--accent); border-radius: 50%;
  font-weight: 600; font-size: 0.85em;
  flex: 0 0 26px;
}
.build-steps details[open] { border-color: var(--accent); }
.build-steps details > p { margin: 6px 12px 8px 50px; font-size: 0.92em; }
.build-steps .verify  { color: #1e5b1a; }
.build-steps .mistake { color: #735300; }

/* ----- BOM, troubleshooting, readme, sources (existing) ----- */
.bom { width: 100%; border-collapse: collapse; }
.bom th, .bom td { padding: 4px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.bom th { background: var(--code-bg); font-size: 0.85em; }
.bom td:first-child { width: 50px; text-align: right; color: var(--muted); }
.bom td:last-child { text-align: right; width: 60px; }
.readme { white-space: pre-wrap; font-size: 0.85em; max-height: 600px; overflow: auto; }
.sources { padding-left: 18px; }
.sources li { margin-bottom: 8px; }

/* Streaming-chat citation panel (rendered by renderCitations in index.html). */
.msg-sources { margin-top: 10px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--code-bg); font-size: 0.92em; }
.msg-sources > summary { cursor: pointer; color: var(--muted); }
.msg-sources[open] > summary { color: var(--text); margin-bottom: 6px; }
.msg-sources .src-head { font-weight: 500; }
.msg-sources .src-snippet { margin-top: 2px; }
.trouble dt { font-weight: 500; margin-top: 8px; }
.trouble dd { margin: 0 0 0 16px; color: var(--muted); }

@media (max-width: 700px) {
  .component-grid { grid-template-columns: 1fr; }
  /* Same dynamic clearance on narrow viewports — JS sets --composer-h. */
  body { padding-bottom: var(--composer-h, 360px); }

  /* Header: tagline pushes nav/user-bar off-screen on phones. Hide it,
     and let the row wrap so a long display name + history dropdown can
     spill onto a second line instead of clipping. */
  .site-header { flex-wrap: wrap; padding: 8px 12px; }
  .tagline { display: none; }

  /* Tables: data tables in answers (wiring, power, BOM, states, router
     tables) are wider than a phone viewport. Let the table itself scroll
     horizontally instead of blowing out page width. display:block on the
     <table> keeps internal cell alignment because thead/tbody/tr/td
     retain their table-* display values. */
  .bom, .wiring-table, .power-table, .states-table, table.rt {
    display: block;
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }
}

/* ----- Routing-gate badge (debug; toggleable via gate.yaml ui.show_route_label) ----- */
.route-badge {
  display: inline-block;
  margin: 0 0 8px 0;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 0.74em;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.route-badge .route-reason {
  font-weight: 400;
  text-transform: none;
  opacity: 0.75;
  margin-left: 4px;
}
.route-local  { background: #e6f0ff; color: #1a4480; }
.route-cloud  { background: #fff4e0; color: #8a4b00; }
.route-shadow { background: #f0e6ff; color: #4a1a80; }

/* ----- Rule-router answer fragments ----- */
.router-tag { margin: 0 0 10px 0; }
.router-tag .badge.ok { background: var(--ok-bg); color: var(--ok-fg); padding: 1px 6px; border-radius: 3px; font-size: 0.78em; font-weight: 600; }
table.rt { width: 100%; border-collapse: collapse; margin: 6px 0 12px 0; font-size: 0.92em; }
table.rt th, table.rt td { padding: 4px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
table.rt th { background: var(--code-bg); font-size: 0.82em; }
.wire-legend ul { margin: 4px 0; padding-left: 18px; }
.rt-steps { padding-left: 22px; }
.rt-steps li { margin-bottom: 12px; }
.rt-steps li > p { margin: 4px 0; }
.rt-steps .warn { color: var(--warn-fg); }
.msg-content .pinout-wrap { background: white; border: 1px solid var(--line); border-radius: 6px; padding: 14px; max-width: 720px; margin-top: 8px; }
.msg-content .pinout { width: 100%; min-height: 360px; height: auto; display: block; }
.msg-content .photo-wrap { background: white; border: 1px solid var(--line); border-radius: 6px; padding: 14px; max-width: 720px; margin: 8px 0 0 0; }
.msg-content .photo { width: 100%; height: auto; display: block; border-radius: 4px; }
.msg-content .photo-wrap figcaption { margin-top: 10px; font-size: 0.92em; color: var(--fg); }
.msg-content .structured-anchors { margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--line); }
.msg-content .anchors-tag { margin: 0 0 8px 0; }
.msg-content .anchor { margin-top: 12px; }
.msg-content .anchor:first-of-type { margin-top: 4px; }
.msg-content .mermaid { background: white; border: 1px solid var(--line); border-radius: 4px; padding: 12px; }

/* ---- Per-user identity bar (Tier-2: name + history dropdown + switch) ---- */
/* Lives in the page header now; flex layout pushes it to the right edge,
   between brand (margin-right: auto) and nav. */
.user-bar { font-size: 0.85em; color: var(--muted); }
.user-bar a { color: var(--accent); }

/* History dropdown using <details> for native toggle behavior */
.history-dd { display: inline-block; vertical-align: baseline; position: relative; }
.history-dd summary {
  cursor: pointer; color: var(--accent); list-style: none;
  display: inline; padding: 0 2px;
}
.history-dd summary::-webkit-details-marker { display: none; }
.history-dd summary::after { content: ' \25BE'; font-size: 0.85em; }
.history-dd[open] summary::after { content: ' \25B4'; }

.history-panel {
  position: absolute; right: 0; top: 100%;
  background: white; border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  min-width: 280px; max-width: 360px;
  max-height: 320px; overflow-y: auto;
  z-index: 10; margin-top: 6px;
  text-align: left;
}
.conv-list { list-style: none; padding: 4px 0; margin: 0; }
.conv-list li {
  padding: 6px 12px; cursor: pointer;
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 0.92em; color: var(--fg);
}
.conv-list li:hover { background: var(--user-bubble-bg); }
.conv-list li.active { background: var(--accent-soft); color: var(--accent); }
.conv-list li.empty { color: var(--muted); cursor: default; font-style: italic; }
.conv-list li.empty:hover { background: transparent; }
.conv-list .conv-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-list .conv-meta { color: var(--muted); font-size: 0.85em; flex-shrink: 0; }

/* ---- Name-prompt modal ---- */
.name-modal {
  position: fixed; inset: 0;
  background: rgba(31, 31, 31, 0.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
}
.name-modal[hidden] { display: none; }
.name-modal-inner {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 22px 24px;
  max-width: 420px; width: 90%;
  box-shadow: 0 12px 40px rgba(0,0,0,0.18);
}
.name-modal-inner h2 { margin: 0 0 4px 0; font-size: 1.2em; font-weight: 600; }
.name-modal-inner form { display: flex; gap: 8px; }
.name-modal-inner input[type=text] {
  flex: 1; padding: 8px 12px; font: inherit;
  border: 1px solid var(--line); border-radius: 4px; background: white;
}
.name-modal-inner button {
  padding: 8px 18px; background: var(--accent); color: white;
  border: 0; border-radius: 4px; font: inherit; cursor: pointer;
}
.name-modal-inner button:hover { background: #a73716; }

/* ---- "New chat" button — only visible after the first turn lands ---- */
.new-chat-btn {
  display: none;
  margin-left: 14px;
  background: none;
  border: 1px solid var(--line);
  color: var(--muted);
  padding: 2px 10px;
  border-radius: 9999px;
  font: inherit; font-size: 0.85em;
  cursor: pointer;
}
.new-chat-btn:hover { color: var(--accent); border-color: var(--accent); }
body.chatting .new-chat-btn { display: inline-block; }

/* ---- Composer "thinking" indicator (pulses while LLM is generating) ---- */
.composer-status.busy { display: none; }
body.loading .composer-status.idle { display: none; }
body.loading .composer-status.busy { display: inline; color: var(--accent); }
.prism-icon.pulsing {
  display: inline-block;
  animation: prism-pulse 1.1s ease-in-out infinite;
}
@keyframes prism-pulse {
  0%, 100% { opacity: 1;    transform: scale(1);    }
  50%      { opacity: 0.35; transform: scale(0.92); }
}

/* ============================================================ */
/*  Print stylesheet — used by the "print / save as PDF" button */
/* ============================================================ */
.print-header { display: none; }   /* hidden on screen, shown only in print */

@media print {
  /* Hide all interactive chrome */
  .site-header, .composer-wrap, .welcome, .name-modal,
  .new-chat-btn, .user-bar, .composer-status,
  .htmx-indicator, .projects-collapsible, .code-copy-btn,
  .msg-actions {
    display: none !important;
  }

  /* Reset page background and clear the body padding the composer needed */
  html, body { background: white !important; color: black; padding: 0; }
  main { padding: 0; }

  /* Print-only header: user name + timestamp */
  .print-header {
    display: block; font-size: 0.85em; color: #444;
    border-bottom: 1px solid #999;
    padding-bottom: 6px; margin-bottom: 14px;
  }

  /* Give the chat thread the full page width with comfortable margins */
  .chat-page { max-width: none; padding: 0; }
  .chat-thread { padding: 0; gap: 4px; }

  /* Each message tries to stay on one page rather than splitting */
  .msg { page-break-inside: avoid; padding: 6px 0; }
  .msg.assistant { border-bottom: 1px solid #ccc; }
  .msg.user .msg-bubble {
    background: #f2f2f2; border: 1px solid #ddd;
    box-shadow: none; max-width: 100%;
  }

  /* Code blocks and headings shouldn't orphan-break */
  pre, code, .mermaid { page-break-inside: avoid; background: #f6f6f6 !important; }
  .msg-content h1, .msg-content h2, .msg-content h3 { page-break-after: avoid; }

  /* Hide the avatar bubble — saves space and ink */
  .avatar { display: none; }

  /* Drop link colors / underlines — paper readers don't click */
  a { color: inherit; text-decoration: none; }
}