/* ==========================================================================
   Grandpa AI — Tolbert Innovation Hub
   A calm, readable chat surface. Brand palette from the project dossier:
   navy #1b2a6b, gold #f5a623, red #c62828, on warm paper.
   ========================================================================== */

:root {
  /* Daylight — the reference palette: linen, terracotta, palm gold, wood brown */
  --linen: #faf3e0;
  --terracotta: #c62828;
  --palm: #ff8f00;
  --wood: #4e342e;

  --navy: #4e342e;          /* kept as a token name; now wood brown */
  --navy-deep: #3a251f;
  --gold: #ff8f00;
  --gold-deep: #d97800;
  --red: #c62828;
  --green: #4e7d3f;

  --bg: #faf3e0;
  --bg-sidebar: #3a251f;
  --bg-raised: #fffdf7;
  --bg-hover: #f2e7cd;
  --bg-active: #ead9b8;
  --bg-code: #f4ecd8;

  --text: #2e1f1a;
  --text-soft: #6b5346;
  --text-faint: #9a8574;

  --border: #e6d8bc;
  --border-strong: #d3c09c;

  --user-bubble: #f3e6c9;

  --radius: 16px;
  --radius-sm: 10px;
  --sidebar-w: 268px;
  --measure: 46rem;

  --shadow-sm: 0 1px 2px rgba(78, 52, 46, .07);
  --shadow-md: 0 6px 20px rgba(78, 52, 46, .10);
  --shadow-lg: 0 18px 50px rgba(78, 52, 46, .20);

  --font: "Avenir Next", Avenir, "Segoe UI", system-ui, sans-serif;
  --font-display: "Iowan Old Style", Baskerville, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

[data-theme="dark"] {
  /* Twilight — low contrast for evening storytelling */
  --bg: #140c0b;
  --bg-sidebar: #0d0706;
  --bg-raised: #221715;
  --bg-hover: #2c1e1b;
  --bg-active: #382723;
  --bg-code: #1a100f;

  --text: #f2e4d0;
  --text-soft: #c4ab95;
  --text-faint: #947c6a;

  --border: #35231f;
  --border-strong: #4a322c;

  --user-bubble: #2c1e1b;
  --gold: #ffb340;
  --navy: #d8a06a;
  --green: #7fa86a;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, .45);
  --shadow-lg: 0 18px 50px rgba(0, 0, 0, .6);
}

* { box-sizing: border-box; }

/* Every `display` rule below would otherwise beat the `hidden` attribute's
   default `display: none`, so state the intent once, loudly. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
}

/* Text size setting. Everything else is in rem, so moving the root scales the
   whole layout the way browser zoom does, not just the letters. */
:root { font-size: 16px; }
:root[data-size="sm"] { font-size: 15px; }
:root[data-size="lg"] { font-size: 18px; }

body {
  background-color: var(--bg);
  /* A faint woven texture, like linen or country cloth */
  background-image:
    repeating-linear-gradient(90deg, rgba(78, 52, 46, .035) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(0deg, rgba(78, 52, 46, .035) 0 1px, transparent 1px 9px);
  color: var(--text);
  font-family: var(--font);
  font-size: 0.9375rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--navy); color: #fff; padding: .6rem 1rem; border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Generic icon strokes. Fills are set explicitly where a shape needs one. */
.icon-btn svg, .new-chat svg, .round-btn svg, .search-icon, .chat-row svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.stop-btn svg rect { fill: currentColor; stroke: none; }

/* ============================ Layout ==================================== */

.app {
  display: flex;
  height: 100dvh;
  overflow: hidden;
}

/* ============================ Sidebar =================================== */

.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-height: 0;
  color: #f3f0e6;
  transition: width .2s ease, flex-basis .2s ease;
}

/* Folded away on a wide screen. Width rather than a transform, so the reading
   column actually takes the space back instead of the panel sliding under it.
   visibility keeps it out of the tab order and the accessibility tree, which
   width alone does not. */
.app.nav-hidden .sidebar {
  width: 0;
  flex-basis: 0;
  overflow: hidden;
  visibility: hidden;
  border-right-width: 0;
  transition: width .2s ease, flex-basis .2s ease, visibility 0s linear .2s;
}

@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
}

.sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .875rem .875rem .5rem;
}

/* Feature shortcuts share the conversation drawer's existing colors. */
.sidebar-body { flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; scrollbar-width:thin; }
.sidebar-body .chat-list { overflow:visible; }
.sidebar-head,.sidebar > .new-chat,.sidebar-foot { flex-shrink:0; }
.sidebar-tools { margin:.65rem .75rem .9rem; }
.sidebar-tools details { margin-bottom:.45rem; border:1px solid rgba(255,255,255,.13); border-radius:var(--radius-sm); }
.sidebar-tools summary { display:flex; align-items:center; gap:.55rem; padding:.55rem .65rem; min-height:44px; list-style:none; color:#f3f0e6; font-size:.85rem; font-weight:600; cursor:pointer; }
.sidebar-tools summary::-webkit-details-marker { display:none; }
.sidebar-tools svg { width:17px; height:17px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.sidebar-tools .sidebar-chevron { width:15px; height:15px; margin-left:auto; }
.sidebar-tools details[open] .sidebar-chevron { transform:rotate(180deg); }
.sidebar-shortcuts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.2rem; padding:0 .35rem .4rem; }
.sidebar-shortcut { display:flex; align-items:center; gap:.45rem; min-width:0; min-height:44px; padding:.45rem .4rem; border:0; border-radius:var(--radius-sm); background:transparent; color:#d6c2a8; font:inherit; font-size:.76rem; line-height:1.35; text-align:left; cursor:pointer; }
.sidebar-shortcut:hover { background:rgba(255,255,255,.08); color:#fffaf0; }
.sidebar-shortcut[aria-pressed="true"] { background:rgba(255,143,0,.16); color:#fffaf0; }
.sidebar-shortcut:disabled { opacity:.45; cursor:not-allowed; }
.sidebar-shortcut span { min-width:0; overflow-wrap:anywhere; }

.brand { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.brand-seal { display: flex; flex: 0 0 auto; }
/* The badge carries its own white ring, so it needs no border of ours. */
.brand-seal img { width: 34px; height: auto; display: block; }
.brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.brand-text strong {
  font-family: var(--font-display);
  font-size: 1.02rem;
  letter-spacing: .01em;
  color: #fffaf0;
}
.brand-text small { color: #cbb79c; font-size: .72rem; }

.new-chat {
  margin: .25rem .875rem .75rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem .8rem;
  background: var(--gold);
  color: var(--navy-deep);
  border: none;
  border-radius: var(--radius-sm);
  font: inherit;
  font-weight: 550;
  font-size: .875rem;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background .15s, transform .1s;
}
.new-chat:hover { background: var(--gold-deep); }
.new-chat:active { transform: translateY(1px); }
[data-theme="dark"] .new-chat { background: var(--gold); color: #201412; }
[data-theme="dark"] .new-chat:hover { background: #ffc266; }

.search-wrap { position: relative; margin: 0 .875rem .5rem; }
.search-icon {
  position: absolute; left: .6rem; top: 50%; transform: translateY(-50%);
  color: var(--text-faint); pointer-events: none;
}
#chat-search {
  width: 100%;
  padding: .45rem .6rem .45rem 1.9rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .11);
  color: #fffaf0;
  font: inherit;
  font-size: .84rem;
}
#chat-search::placeholder { color: #bda88c; }
#chat-search:focus { border-color: var(--gold); background: rgba(255, 255, 255, .16); outline: none; }

.chat-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 .5rem .5rem;
  scrollbar-width: thin;
}

.chat-group-label {
  padding: 1rem .55rem .35rem;
  font-size: .68rem;
  font-weight: 650;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #a08a6e;
}
.chat-group-label:first-child { padding-top: .35rem; }

/* A conversation in the list.
 *
 * Two lines, not one. Ask about scholarships twice and both conversations come
 * back named "Liberia Student Scholarships" — the line underneath, with the
 * time and the question that started it, is the only thing that tells them
 * apart. A list you cannot navigate is not a list. */
.chat-row {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: .15rem;
  width: 100%;
  border-radius: var(--radius-sm);
  color: #d6c2a8;
  transition: background .12s ease;
}
.chat-row:hover { background: rgba(255, 255, 255, .07); }
.chat-row.is-active { background: rgba(255, 143, 0, .16); color: #fffaf0; }

/* The mark of the one you are reading. A bar rather than a wash of colour:
   it says "this one" without turning a quiet list into a warning. */
.chat-row.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 1.7rem;
  border-radius: 0 3px 3px 0;
  background: var(--gold);
}

.chat-row-open {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: .5rem .35rem .55rem .6rem;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.chat-row-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .855rem;
  line-height: 1.35;
}
.chat-row.is-active .chat-row-title { font-weight: 600; }

/* The second line: what was actually asked, and when.
 *
 * Both of them down here so the name gets the whole width of the first line.
 * A name cut to "Liberia Student …" to make room for a clock is the worst of
 * both — you can read neither. */
.chat-row-sub {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  font-size: .755rem;
  line-height: 1.35;
  color: #9d876b;
}
.chat-row.is-active .chat-row-sub { color: #bda78a; }

.chat-row-opening {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Never wraps and never shrinks — a time squeezed to "10:4…" is worse than no
   time at all. */
.chat-row-when {
  flex: 0 0 auto;
  font-size: .715rem;
  font-variant-numeric: tabular-nums;
  color: #8d7860;
}
.chat-row.is-active .chat-row-when { color: #c7ab84; }

/* Rename and delete.
 *
 * They take no width until they are wanted. Hidden-but-still-in-the-layout
 * cost every name 52 pixels for buttons nobody could see — in a 268px panel
 * that is the difference between "Liberia Student Scholarships" and "Liberia
 * Student Schol…". */
.chat-row-tools {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: .1rem;
  width: 0;
  overflow: hidden;
  transition: width .12s ease;
}
.chat-row:hover .chat-row-tools,
.chat-row:focus-within .chat-row-tools,
.chat-row.is-active .chat-row-tools {
  width: 58px;
  padding-right: .3rem;
}
.chat-row-del {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border: none; border-radius: 6px;
  background: transparent;
  color: #a08a6e;
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s ease, background .12s ease, color .12s ease;
}
.chat-row:hover .chat-row-del,
.chat-row:focus-within .chat-row-del { opacity: 1; }
.chat-row.is-active .chat-row-del { opacity: .9; }
.chat-row-del:hover { background: rgba(255, 255, 255, .14); color: #fffaf0; }
.chat-row-del[data-del]:hover { color: #ff8a80; }

/* A finger has no hover, so on a touch screen these would have to sit there
   permanently — and two 26px buttons on every row is 52px taken off every
   name, in a list whose whole job is being read. So they appear on the
   conversation you are actually in: tap a row, then rename or delete it.
   Scanning happens constantly; deleting happens rarely. */
@media (hover: none) {
  .chat-row.is-active .chat-row-del { opacity: .85; }
  /* Only the open conversation gives up the width. */
  .chat-row:not(.is-active) .chat-row-tools { width: 0; padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .chat-row, .chat-row-del, .chat-row-tools { transition: none; }
}

.empty-hint {
  padding: 1.5rem .75rem;
  color: #c0aa8e;
  font-size: .82rem;
  text-align: center;
}

.sidebar-foot {
  border-top: 1px solid rgba(255, 255, 255, .13);
  padding: .5rem;
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
.foot-btn {
  display: flex;
  align-items: center;
  gap: .6rem;
  /* A row a thumb can hit without aiming. */
  min-height: 40px;
  padding: .4rem .55rem;
  border: none; border-radius: var(--radius-sm);
  background: transparent;
  color: #d6c2a8;
  font: inherit;
  font-size: .82rem;
  text-decoration: none;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.foot-btn:hover { background: rgba(255, 255, 255, .08); color: #fffaf0; }
/* Every icon down here is now a drawn one at the same size and weight — the
   moon and the arrow used to be typed characters, which sat differently and
   rendered differently on every phone. */
.foot-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 1.1rem;
  height: 1.1rem;
  opacity: .75;
}
.foot-icon svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.foot-btn:hover .foot-icon { opacity: 1; }

/* The link out is the one thing here that leaves the app, so it is quieter
   and sits a little apart from the two that do not. */
.sidebar-foot a.foot-btn {
  margin-top: .15rem;
  color: #a08a6e;
  font-size: .76rem;
}
.sidebar-foot a.foot-btn:hover { color: #dcc9b0; }

@media (prefers-reduced-motion: reduce) {
  .foot-btn { transition: none; }
}

/* ============================ Main ====================================== */

.main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}

.topbar {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem 1rem;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 20;
}

.chat-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: .9rem;
  font-weight: 550;
  color: var(--text-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-right { display: flex; align-items: center; gap: .4rem; }

.icon-btn {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  padding: 0;
  border: none; border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
}
.icon-btn:hover { background: var(--bg-hover); color: var(--text); }

/* The menu button is not only for phones. On a wide screen it folds the
   conversation list away, which is what anyone reading a long answer wants —
   and what every other tool of this kind offers. */
.menu-btn { display: grid; }
.sidebar-close { display: none; }

.select-wrap { position: relative; }
.topbar select {
  appearance: none;
  padding: .32rem 1.5rem .32rem .6rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: transparent;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-size: 4px 4px, 4px 4px;
  background-position: right .7rem center, right calc(.7rem - 4px) center;
  background-repeat: no-repeat;
  color: var(--text-soft);
  font: inherit;
  font-size: .78rem;
  cursor: pointer;
  max-width: 10rem;
}
.topbar select:hover { background-color: var(--bg-hover); }
.topbar select option { background: var(--bg-raised); color: var(--text); }

.banner {
  margin: .75rem auto 0;
  max-width: var(--measure);
  width: calc(100% - 2rem);
  padding: .7rem .9rem;
  border: 1px solid color-mix(in srgb, var(--gold) 55%, var(--border));
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  color: var(--text);
  font-size: .84rem;
}
.banner strong { margin-right: .35rem; }
.banner code {
  font-family: var(--font-mono);
  font-size: .92em;
  background: var(--bg-code);
  padding: .05rem .3rem;
  border-radius: 4px;
}

/* ============================ Welcome =================================== */

.welcome {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 2.25rem 1rem 7rem;
}
.welcome-inner {
  width: 100%;
  max-width: var(--measure);
  margin: auto 0;
  text-align: center;
}
.welcome-kicker {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin: 0 0 1rem;
  color: var(--red);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.welcome-kicker span { width: 22px; height: 2px; background: var(--gold); }
.welcome-seal { margin-bottom: 1.1rem; }
.welcome-title {
  margin: 0 0 .35rem;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  font-weight: 600;
  letter-spacing: -.01em;
}
.welcome-sub {
  margin: 0 0 2rem;
  color: var(--text-soft);
  font-size: .95rem;
}

.persona-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: .6rem;
  margin-bottom: 1.75rem;
}
.persona-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .15rem;
  padding: .85rem .9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg-raised) 92%, var(--gold));
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, transform .1s, box-shadow .15s;
}
.persona-card:hover {
  border-color: var(--gold);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.persona-card.is-active {
  border-color: var(--navy);
  box-shadow: inset 0 0 0 1px var(--navy);
}
.persona-emoji { font-size: 1.15rem; line-height: 1.4; }
.persona-name { font-weight: 600; font-size: .875rem; }
.persona-blurb { color: var(--text-faint); font-size: .755rem; line-height: 1.35; }

.starters { display: flex; flex-direction: column; gap: .45rem; }
.starter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .65rem .9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-soft);
  font: inherit;
  font-size: .875rem;
  text-align: left;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.starter:hover {
  background: var(--bg-raised);
  border-color: var(--border-strong);
  color: var(--text);
}
.starter::after {
  content: "→";
  color: var(--text-faint);
  flex: 0 0 auto;
}

/* ============================ Thread ==================================== */

.thread {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 1.75rem 1rem 1rem;
  scroll-behavior: smooth;
}

.turn {
  max-width: var(--measure);
  margin: 0 auto 1.75rem;
}

.turn-user { display: flex; justify-content: flex-end; }
.bubble {
  max-width: min(85%, 34rem);
  padding: .7rem 1rem;
  border-radius: 16px 16px 4px 16px;
  background: var(--user-bubble);
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.turn-ai { display: flex; gap: .85rem; }
/* The badge beside every answer. It was a letter in a circle, drawn before
   there was a logo — the same stand-in the access gate had. The artwork
   carries its own ring, so it needs no circle or border of ours. */
.avatar {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  margin-top: .1rem;
  display: grid;
  place-items: center;
  user-select: none;
}
.avatar img {
  width: 100%;
  height: auto;
  display: block;
}
.ai-body { flex: 1; min-width: 0; }

/* Marks an answer he went and read, rather than one he remembered. Small and
   quiet — it is a provenance note, not a badge of honour. */
.looked-up {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin: 0 0 .5rem;
  padding: .15rem .55rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-raised);
  color: var(--text-soft);
  font-size: .78rem;
  line-height: 1.5;
}
.looked-up span { color: var(--green); }

/* Said above an answer whose conversation had to be shortened. Quieter than
   the looked-up mark: it is a footnote about the thread, not a claim about
   the answer. */
.turn-note {
  margin: 0 0 .5rem;
  color: var(--text-faint);
  font-size: .78rem;
  line-height: 1.5;
}

/* The papers under a news answer. The site name, not the headline: a row of
   long titles is a wall on a small screen. */
.sources {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  margin: .7rem 0 0;
  font-size: .8rem;
}
.sources-label { color: var(--text-faint); }
.sources a {
  padding: .1rem .5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-soft);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.sources a:hover, .sources a:focus-visible { background: var(--bg-hover); color: var(--text); }

.thinking-note { color: var(--text-faint); font-size: .9rem; }

/* Who speaks for each topic */
.settings-cast { margin: .2rem 0 .4rem; }
.settings-cast > summary { cursor: pointer; list-style: none; padding: .55rem 0; }
.settings-cast > summary::-webkit-details-marker { display: none; }
.settings-cast > summary small { display: block; color: var(--text-faint); font-size: .8rem; }
.settings-cast-list { display: grid; gap: .5rem; padding: .2rem 0 .4rem; }
.cast-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: .5rem; }
.cast-row strong { display: block; font-size: .92rem; }
.cast-row small { display: block; color: var(--text-faint); font-size: .78rem; }
.cast-row select { min-height: 44px; max-width: 9.5rem; font: inherit; font-size: .88rem; }
.cast-play { min-width: 44px; min-height: 44px; border-radius: 10px; border: 1px solid var(--border); background: transparent; color: var(--text); font: inherit; cursor: pointer; }

/* Sync across devices */
.sync-code { font: 600 1.15rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; overflow-wrap: anywhere; padding: .6rem .75rem; border: 1px dashed var(--border); border-radius: 10px; margin: .3rem 0 .6rem; user-select: all; }
.sync-join { display: grid; gap: .4rem; }
.sync-code-input { font: inherit; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; min-height: 44px; padding: .5rem .7rem; border: 1px solid var(--border); border-radius: 10px; background: transparent; color: var(--text); width: 100%; box-sizing: border-box; }

/* Questions to ask next, and Grandpa's offer to remember something: one tap
   each, big enough for a thumb. */
.followups { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; margin: .8rem 0 0; }
.followup {
  min-height: 44px; max-width: 100%;
  padding: .45rem .85rem;
  border: 1px solid var(--border); border-radius: 18px;
  background: var(--bg-elevated, transparent); color: var(--text);
  font: inherit; font-size: .9rem; text-align: left; cursor: pointer;
  overflow-wrap: anywhere;
}
.followup:hover, .followup:focus-visible { background: var(--bg-hover); }
.followups-lead { margin: 0 0 .1rem; color: var(--text-soft); font-size: .9rem; font-weight: 600; }
.memory-offer {
  margin: .8rem 0 0; padding: .75rem .85rem;
  border: 1px solid var(--border); border-radius: 12px;
  font-size: .9rem;
}
.memory-offer p { margin: 0 0 .6rem; overflow-wrap: anywhere; }
.memory-offer-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.memory-offer-actions button {
  min-height: 44px; padding: .4rem .9rem; border-radius: 10px;
  border: 1px solid var(--border); background: transparent; color: var(--text);
  font: inherit; font-weight: 600; cursor: pointer;
}
.memory-offer-actions .memory-offer-yes { background: var(--accent, #1b2a63); border-color: var(--accent, #1b2a63); color: #fff; }

/* Rendered markdown */
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose p { margin: 0 0 .9rem; overflow-wrap: anywhere; }
.prose h1, .prose h2, .prose h3, .prose h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.3;
  margin: 1.5rem 0 .6rem;
}
.prose h1 { font-size: 1.35rem; }
.prose h2 { font-size: 1.2rem; }
.prose h3 { font-size: 1.05rem; }
.prose h4 { font-size: .95rem; }
.prose ul, .prose ol { margin: 0 0 .9rem; padding-left: 1.35rem; }
.prose li { margin-bottom: .3rem; }
.prose li::marker { color: var(--text-faint); }
.prose a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }
[data-theme="dark"] .prose a { color: #8fa3e8; }
.prose strong { font-weight: 650; }
.prose blockquote {
  margin: 0 0 .9rem;
  padding: .1rem 0 .1rem 1rem;
  border-left: 3px solid var(--gold);
  color: var(--text-soft);
  font-style: italic;
}
.prose blockquote p { margin-bottom: .4rem; }
.prose hr { border: none; border-top: 1px solid var(--border); margin: 1.4rem 0; }
.prose code {
  font-family: var(--font-mono);
  font-size: .875em;
  background: var(--bg-code);
  border: 1px solid var(--border);
  padding: .08rem .32rem;
  border-radius: 5px;
}
.prose img { max-width: 100%; border-radius: var(--radius-sm); }

.code-block {
  margin: 0 0 .9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-code);
}
.code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .35rem .5rem .35rem .75rem;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-code) 60%, var(--bg-hover));
}
.code-lang { font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; color: var(--text-faint); }
.code-copy {
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--text-faint);
  font: inherit;
  font-size: .72rem;
  padding: .15rem .45rem;
  cursor: pointer;
}
.code-copy:hover { background: var(--bg-hover); color: var(--text); border-color: var(--border); }
.code-block pre {
  margin: 0;
  padding: .75rem;
  overflow-x: auto;
}
.code-block code {
  background: none;
  border: none;
  padding: 0;
  font-size: .82rem;
  line-height: 1.55;
}

.table-wrap { overflow-x: auto; margin-bottom: .9rem; }
.prose table { border-collapse: collapse; width: 100%; font-size: .875rem; }
.prose th, .prose td {
  border: 1px solid var(--border);
  padding: .45rem .6rem;
  text-align: left;
  vertical-align: top;
}
.prose th { background: var(--bg-hover); font-weight: 600; }

/* Streaming caret */
.cursor::after {
  content: "";
  display: inline-block;
  width: .5em; height: 1em;
  margin-left: .1em;
  background: var(--gold);
  vertical-align: text-bottom;
  animation: blink 1s steps(2, start) infinite;
}
@keyframes blink { to { visibility: hidden; } }

.thinking {
  display: inline-flex;
  gap: .28rem;
  align-items: center;
  color: var(--text-faint);
  font-size: .85rem;
}
.thinking span {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  animation: bounce 1.3s ease-in-out infinite;
}
.thinking span:nth-child(2) { animation-delay: .18s; }
.thinking span:nth-child(3) { animation-delay: .36s; }
@keyframes bounce {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

.turn-error {
  max-width: var(--measure);
  margin: 0 auto 1.75rem;
  padding: .7rem .9rem;
  border: 1px solid color-mix(in srgb, var(--red) 45%, var(--border));
  border-left: 3px solid var(--red);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--red) 8%, transparent);
  font-size: .875rem;
  color: var(--text);
}

/* Message toolbar */
.msg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .15rem;
  margin-top: .5rem;
  opacity: 0;
  transition: opacity .15s;
}
.turn:hover .msg-actions,
.turn:focus-within .msg-actions,
.msg-actions.is-pinned { opacity: 1; }
.msg-action {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .25rem .5rem;
  border: none; border-radius: 6px;
  background: transparent;
  color: var(--text-faint);
  font: inherit;
  font-size: .75rem;
  cursor: pointer;
}
.msg-action:hover { background: var(--bg-hover); color: var(--text); }
.msg-action.is-on { color: var(--green); }

/* ============================ Composer ================================== */

.composer-zone {
  padding: .75rem 1rem 1.15rem;
  background: linear-gradient(to top, var(--bg) 60%, transparent);
}

/* Anything that is not the question sits above the box, outside it, so the box
   itself stays one clean line. */
.composer-extras {
  max-width: var(--measure);
  margin: 0 auto;
}

/* A pill. The radius is half the resting height, so at one line it is a true
   pill and when the text grows it becomes a soft rectangle rather than a
   lozenge — which is what happens in every app that gets this right. */
.composer {
  max-width: var(--measure);
  margin: 0 auto;
  border: 1px solid color-mix(in srgb, var(--navy) 28%, var(--border-strong));
  border-radius: 26px;
  background: var(--bg-raised);
  box-shadow: 0 10px 30px rgba(23, 37, 85, .12);
  padding: .3rem .35rem .3rem .4rem;
  display: flex;
  align-items: flex-end;
  gap: .15rem;
  transition: border-color .15s, box-shadow .15s;
}
.composer:focus-within {
  border-color: var(--navy);
  box-shadow: var(--shadow-md), 0 0 0 3px color-mix(in srgb, var(--navy) 14%, transparent);
}

.composer-persona {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: 0 .9rem .4rem;
  font-size: .74rem;
  color: var(--navy);
  font-weight: 600;
}
[data-theme="dark"] .composer-persona { color: var(--gold); }

#composer-input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  line-height: 1.5;
  /* The left padding is what keeps the words off the plus, and the vertical
     padding is what centres one line inside the pill. */
  padding: .6rem .3rem .6rem .45rem;
  resize: none;
  max-height: 40vh;
  outline: none;
}
#composer-input::placeholder { color: var(--text-faint); }

.composer-actions {
  display: flex;
  align-items: center;
  gap: .1rem;
  /* Held against the bottom of a box that has grown, so the buttons stay on
     the last line with the cursor rather than floating beside the middle. */
  padding-bottom: 1px;
}

/* ---- the plus, and what lives behind it ---- */
.composer-more { position: relative; display: flex; align-items: center; padding-bottom: 1px; }

.more-menu {
  position: absolute;
  bottom: calc(100% + .5rem);
  left: 0;
  z-index: 40;
  min-width: 15.5rem;
  padding: .35rem;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: var(--bg-raised);
  box-shadow: var(--shadow-lg, 0 16px 40px rgba(23, 37, 85, .22));
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
.more-item {
  display: flex;
  align-items: center;
  gap: .7rem;
  width: 100%;
  padding: .4rem .55rem;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: .94rem;
  text-align: left;
  cursor: pointer;
}
.more-item:hover { background: var(--bg-hover); }
.more-item > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* The icon sits in its own soft disc, the way it does in the app people are
   comparing this with. It is what makes a list of rows read as a set of
   things you can do rather than as a paragraph with pictures. */
.more-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  /* Mixed against the text rather than set to a background token, so the disc
     is visibly a disc in both themes instead of dissolving into the panel. */
  background: color-mix(in srgb, var(--text) 11%, transparent);
  color: var(--text-soft);
}
.more-item:hover .more-icon { color: var(--text); }
.more-icon svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* A row that is switched ON for the next turn. Both of these spend more than
   an ordinary answer, so neither is allowed to be subtle about it. */
.more-item[aria-pressed="true"] { font-weight: 600; }
.more-item[aria-pressed="true"] .more-icon {
  background: color-mix(in srgb, var(--gold) 26%, transparent);
  color: var(--gold-deep);
}
[data-theme="dark"] .more-item[aria-pressed="true"] .more-icon { color: var(--gold); }
.more-btn[aria-expanded="true"] { background: var(--bg-hover); color: var(--text); }

/* ---- the one filled circle on the right ---- */
.round-btn {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 36px; height: 36px;
  border: none;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  cursor: pointer;
  transition: background .15s, opacity .15s, transform .12s;
}
.round-btn:hover:not(:disabled) { background: var(--navy-deep); }
.round-btn:active:not(:disabled) { transform: scale(.94); }
.round-btn:disabled { opacity: .35; cursor: not-allowed; }
.round-btn svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[data-theme="dark"] .round-btn { background: var(--gold); color: #201412; }
[data-theme="dark"] .round-btn:hover:not(:disabled) { background: var(--gold-deep); }

.mic-btn.is-listening {
  background: color-mix(in srgb, var(--red) 15%, transparent);
  color: var(--red);
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--red) 40%, transparent); }
  50% { box-shadow: 0 0 0 6px transparent; }
}

/* Kept for the look-it-up row, which the app also marks with a class. */
.look-btn.is-on { font-weight: 600; }

.stop-btn { background: var(--red); }
.stop-btn:hover { background: #a91f1f; }

.composer-foot {
  max-width: var(--measure);
  margin: .5rem auto 0;
  min-height: 1.1em;      /* holds its place, so the composer never jumps */
  text-align: center;
  font-size: .72rem;
  color: var(--text-faint);
  transition: opacity .25s ease;
}
.composer-foot.is-fading { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .composer-foot { transition: none; }
}

/* ============================ Toast ===================================== */

.toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  z-index: 60;
  padding: .55rem .95rem;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font-size: .82rem;
  box-shadow: var(--shadow-lg);
  animation: rise .2s ease-out;
}
@keyframes rise {
  from { opacity: 0; transform: translate(-50%, 6px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

.scrim {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(20, 18, 15, .45);
}

/* ============================ Responsive ================================ */

@media (max-width: 820px) {
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 40;
    transform: translateX(-100%);
    /* Off-canvas must also be out of the tab order and the accessibility
       tree — visibility does that; transform alone does not. */
    visibility: hidden;
    transition: transform .22s ease, visibility 0s linear .22s;
    box-shadow: var(--shadow-lg);
  }
  .app.nav-open .sidebar {
    transform: translateX(0);
    visibility: visible;
    transition: transform .22s ease, visibility 0s;
  }
  .sidebar-close { display: grid; }
  /* Off-canvas already: there is nothing to fold away. */
  .app.nav-hidden .sidebar { width: var(--sidebar-w); flex-basis: var(--sidebar-w); }
  .topbar-right .select-wrap:last-child { display: none; } /* model picker moves out of the way */
  .chat-title { font-size: .84rem; }
  .thread { padding-top: 1.25rem; }
  .turn { margin-bottom: 1.4rem; }
  .composer-zone { padding: .4rem .6rem .7rem; }
}

@media (max-width: 480px) {
  /* The label stays: an unlabelled dot means nothing to a first-time user,
     and `display: none` would hide it from screen readers too. */
  .topbar { padding: .6rem .7rem; gap: .4rem; }
  .persona-grid { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
}

@media (max-height: 620px) {
  .welcome { padding-top: 1rem; }
  .welcome-kicker { margin-bottom: .55rem; }
  .welcome-seal { margin-bottom: .55rem; }
  .welcome-seal svg { width: 56px; height: 56px; }
  .welcome-sub { margin-bottom: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Scrollbars — unobtrusive, matching the paper */
.chat-list::-webkit-scrollbar, .thread::-webkit-scrollbar,
.welcome::-webkit-scrollbar, .code-block pre::-webkit-scrollbar { width: 10px; height: 10px; }
.chat-list::-webkit-scrollbar-thumb, .thread::-webkit-scrollbar-thumb,
.welcome::-webkit-scrollbar-thumb, .code-block pre::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 999px;
}
.chat-list::-webkit-scrollbar-track, .thread::-webkit-scrollbar-track { background: transparent; }

/* ============================ Access gate =============================== */
/* Shown only when the deployment sets ACCESS_CODE — a public URL spends real
   money on every message. */

/* ============================ The access gate ===========================
 * For anyone given a code, this page IS the app until they type — it is the
 * whole of what they see, and it has to look like somewhere worth entering
 * rather than a lock on an empty room. So it carries the same warmth as the
 * welcome screen behind it: the sunrise glow, the woven texture, the badge.
 */
.gate {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: var(--bg);
}

/* A low sunrise behind the card, the same one the welcome screen has under
   the badge. Drawn, not downloaded — nothing here costs a byte of data. */
.gate::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 40% at 50% 26%, color-mix(in srgb, var(--palm) 16%, transparent), transparent 70%),
    repeating-linear-gradient(90deg, rgba(78, 52, 46, .035) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(0deg, rgba(78, 52, 46, .035) 0 1px, transparent 1px 9px);
  pointer-events: none;
}

.gate-card {
  position: relative;
  width: 100%;
  max-width: 23rem;
  padding: 2rem 1.6rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-raised);
  box-shadow: var(--shadow-lg);
  text-align: center;
}

/* The real badge, the same one the welcome screen shows — smaller, because a
   gate card is narrow, and this is the first thing anyone sees of the app. */
.gate-seal.brand-logo {
  width: min(128px, 36vw);
  margin: 0 auto 1rem;
}

.gate-card h2 {
  margin: 0 0 .4rem;
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: -.01em;
}

.gate-blurb {
  margin: 0 auto 1.4rem;
  max-width: 19rem;
  color: var(--text-soft);
  font-size: .85rem;
  line-height: 1.55;
}

/* A label rather than a placeholder. A placeholder disappears the moment
   somebody starts typing, which is exactly when they might want to check
   what the box was asking for. */
.gate-label {
  display: block;
  margin-bottom: .35rem;
  text-align: left;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--text-soft);
}

.gate-field { position: relative; }

.gate-card input {
  width: 100%;
  padding: .7rem 2.9rem .7rem .9rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 1rem;          /* 16px or more, or the phone zooms on focus */
  letter-spacing: .04em;
  text-align: left;
}
.gate-card input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent);
}

/* Show the code. Typing one blind on a phone keyboard is how a right code
   becomes a wrong one. */
.gate-peek {
  position: absolute;
  right: .3rem;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
}
.gate-peek svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gate-peek:hover { color: var(--text-soft); }
.gate-peek[aria-pressed="true"] { color: var(--gold-deep); }

.gate-error {
  margin: .7rem 0 0 !important;
  padding: .5rem .65rem;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--red) 10%, transparent);
  color: var(--red) !important;
  font-size: .82rem;
  text-align: left;
}

.gate-card button[type="submit"] {
  width: 100%;
  margin-top: 1rem;
  padding: .75rem;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--navy);
  color: #fff;
  font: inherit;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background .15s ease, transform .08s ease;
}
.gate-card button[type="submit"]:hover { background: var(--navy-deep); }
.gate-card button[type="submit"]:active { transform: translateY(1px); }
.gate-card button[type="submit"]:disabled { opacity: .6; cursor: progress; }
[data-theme="dark"] .gate-card button[type="submit"] { background: var(--gold); color: #201412; }
[data-theme="dark"] .gate-card button[type="submit"]:hover { background: var(--gold-deep); }

/* Who is behind this, and what to do if you have no code — the two questions
   somebody stopped at a door actually has. */
.gate-foot {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  margin: 1.3rem 0 0 !important;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-size: .73rem !important;
  color: var(--text-faint) !important;
}
.gate-foot-quiet { opacity: .85; }

@media (prefers-reduced-motion: reduce) {
  .gate-card button[type="submit"] { transition: none; }
}

/* ==========================================================================
   Settings panel — styling for the markup added in the design pass
   ========================================================================== */

.settings-modal {
  position: fixed;
  inset: 0;
  z-index: 65;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.settings-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 18, 42, .5);
  backdrop-filter: blur(2px);
}

.settings-panel {
  position: relative;
  width: 100%;
  max-width: 30rem;
  max-height: min(86dvh, 46rem);
  overflow-y: auto;
  padding: 1.25rem 1.35rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-raised);
  box-shadow: var(--shadow-lg);
}

.settings-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--border);
}
.settings-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
}
.settings-kicker {
  margin: 0 0 .1rem;
  font-size: .68rem;
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.settings-group { padding: 1.1rem 0 .3rem; }
.settings-group + .settings-group { border-top: 1px solid var(--border); }
.settings-label {
  margin: 0 0 .5rem;
  font-size: .7rem;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .55rem 0;
  cursor: pointer;
}
.setting-row > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.setting-row strong { font-size: .875rem; font-weight: 600; }
.setting-row small {
  color: var(--text-faint);
  font-size: .76rem;
  line-height: 1.35;
  margin-top: .1rem;
}

.settings-panel select {
  flex: 0 0 auto;
  max-width: 11rem;
  appearance: none;
  padding: .4rem 1.7rem .4rem .65rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-size: 4px 4px, 4px 4px;
  background-position: right .8rem center, right calc(.8rem - 4px) center;
  background-repeat: no-repeat;
  color: var(--text);
  font: inherit;
  font-size: .82rem;
  cursor: pointer;
}
.settings-panel select option { background: var(--bg-raised); color: var(--text); }

.settings-panel input[type="text"] {
  flex: 0 0 auto;
  max-width: 11rem;
  padding: .4rem .65rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: .82rem;
}

.settings-panel input[type="range"] {
  flex: 0 0 auto;
  width: 9rem;
  accent-color: var(--navy);
  cursor: pointer;
}

/* Toggle: the checkbox itself is hidden and the track is the control */
.setting-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-track {
  flex: 0 0 auto;
  position: relative;
  width: 40px; height: 23px;
  border-radius: 999px;
  background: var(--border-strong);
  transition: background .18s;
}
.toggle-track::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform .18s;
}
.setting-toggle input:checked ~ .toggle-track { background: var(--green); }
.setting-toggle input:checked ~ .toggle-track::after { transform: translateX(17px); }
.setting-toggle input:focus-visible ~ .toggle-track { outline: 2px solid var(--gold); outline-offset: 2px; }

.setting-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin: .5rem 0 .2rem; }

/* What the phone said when the microphone was checked. Monospaced and small,
   because it is a log to be read line by line and then sent to somebody. */
.mic-report {
  margin: .5rem 0;
  padding: .6rem .7rem;
  max-height: 14rem;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 10px);
  background: var(--bg-code);
  color: var(--text-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .72rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.setting-btn {
  padding: .45rem .8rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: .82rem;
  cursor: pointer;
}
.setting-btn:hover { background: var(--bg-hover); }
.setting-btn.danger { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, var(--border-strong)); }
.setting-btn.danger:hover { background: color-mix(in srgb, var(--red) 10%, transparent); }
.setting-btn.is-confirming { background: var(--red); border-color: var(--red); color: #fff; font-weight: 550; }

#support-modal { z-index: 140; }
.support-form { display: grid; gap: .65rem; padding-top: 1rem; }
.support-form > label { font-weight: 600; font-size: .875rem; }
.support-form select { width: 100%; max-width: none; }
.support-form textarea {
  width: 100%; min-height: 8rem; resize: vertical; padding: .65rem;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--text); font: inherit;
}
.support-checkbox { display: flex; align-items: center; gap: .6rem; }
.support-report {
  white-space: pre-wrap; overflow-wrap: anywhere; font: .8rem/1.6 var(--font-mono, monospace);
  padding: .75rem; border: 1px solid var(--border); border-radius: var(--radius-sm);
  max-height: 45dvh; overflow-y: auto;
}
.support-status:empty { display: none; }

.settings-note {
  margin: .5rem 0 0;
  color: var(--text-faint);
  font-size: .76rem;
  line-height: 1.45;
}

@media (max-width: 480px) {
  .settings-modal { padding: 0; place-items: end stretch; }
  .settings-panel {
    max-width: none;
    max-height: 92dvh;
    border-radius: var(--radius) var(--radius) 0 0;
  }
  .setting-row { flex-wrap: wrap; }
  .settings-panel select,
  .settings-panel input[type="text"],
  .settings-panel input[type="range"] { width: 100%; max-width: none; }
}

/* ==================== Speaking / listening bars ========================= */

.speaking-bar,
.listening-bar {
  max-width: var(--measure);
  margin: 0 auto .5rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem .5rem .45rem .8rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--bg-raised);
  box-shadow: var(--shadow-sm);
  font-size: .82rem;
  color: var(--text-soft);
}

.speaking-text, #listening-text { flex: 1; min-width: 0; }

.speaking-btn {
  flex: 0 0 auto;
  padding: .25rem .7rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: .78rem;
  cursor: pointer;
}
.speaking-btn:hover { background: var(--bg-hover); }

.speaking-wave { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.speaking-wave i {
  width: 3px;
  height: 5px;
  border-radius: 2px;
  background: var(--navy);
  animation: wave 1s ease-in-out infinite;
}
.speaking-wave i:nth-child(2) { animation-delay: .15s; }
.speaking-wave i:nth-child(3) { animation-delay: .3s; }
.speaking-wave i:nth-child(4) { animation-delay: .45s; }
@keyframes wave {
  0%, 100% { height: 5px; opacity: .5; }
  50% { height: 14px; opacity: 1; }
}
.speaking-bar.is-paused .speaking-wave i { animation-play-state: paused; opacity: .4; }
[data-theme="dark"] .speaking-wave i { background: var(--gold); }

.listening-bar { border-color: color-mix(in srgb, var(--red) 45%, var(--border-strong)); }
.listening-dot {
  flex: 0 0 auto;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--red);
  animation: pulse-dot 1.2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .45; transform: scale(.75); }
}

/* While a recording is running, the dot answers the voice rather than a
   timer. A microphone that is working and one that is dead look exactly alike
   otherwise — which is what left somebody staring at "Listening…" wondering
   which they had. A ring that grows when they speak is proof the phone can
   hear them, before any words come back. */
.listening-bar[style*="--heard"] .listening-dot {
  animation: none;
  box-shadow: 0 0 0 calc(var(--heard, 0) * 9px)
    color-mix(in srgb, var(--red) 28%, transparent);
  transform: scale(calc(1 + var(--heard, 0) * .45));
  transition: box-shadow .09s linear, transform .09s linear;
}

#composer-input.is-hearing { color: var(--text-soft); font-style: italic; }

/* ---- A picture waiting to be sent ----
   Above the box, with its weight in kilobytes on it. Somebody paying by the
   megabyte should be able to see what a photograph costs them BEFORE they
   send it, not after. */
.photo-waiting {
  /* The composer is a wrapping flex row, so this has to claim the whole of
     its own line — otherwise it sits beside the text box and squeezes it. */
  flex: 0 0 100%;
  order: -1;
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0 0 .15rem;
  padding: .45rem .5rem;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--bg-soft, var(--bg-hover));
}
/* A document waiting to be sent. Same shape as a waiting picture, with a mark
   where the thumbnail would be — there is nothing to show of a PDF. */
.paper-waiting {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0 0 .15rem;
  padding: .45rem .5rem;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--bg-soft, var(--bg-hover));
}
.paper-mark {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 8px;
  background: var(--bg-hover);
  color: var(--text-soft);
}
.paper-mark svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* The chip in the bubble, standing in for a paper nobody wants pasted into a
   conversation. */
.bubble-paper {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin: 0 0 .4rem;
  padding: .25rem .55rem;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 14%, transparent);
  font-size: .8rem;
  font-weight: 600;
}
.bubble-paper svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.photo-waiting img {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  object-fit: cover;
  border-radius: 8px;
  background: var(--bg-hover);
}
.photo-waiting-said {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
.photo-waiting-said strong {
  font-size: .82rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.photo-waiting-said small { font-size: .72rem; color: var(--text-soft); }

/* A picture already waiting. */
.photo-btn.is-on, .camera-btn.is-on { color: var(--red); font-weight: 600; }

/* The picture in the conversation, above the words — the way it sits in every
   other messaging app on the phone this is read on. */
.bubble-photo {
  display: block;
  width: 100%;
  max-width: 260px;
  margin: 0 0 .45rem;
  border-radius: 10px;
}

.banner.offline {
  border-color: color-mix(in srgb, var(--red) 45%, var(--border));
  border-left-color: var(--red);
  background: color-mix(in srgb, var(--red) 9%, transparent);
}

.turn-error .retry {
  display: inline-block;
  margin-top: .5rem;
  padding: .3rem .7rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-raised);
  color: var(--text);
  font: inherit;
  font-size: .8rem;
  cursor: pointer;
}
.turn-error .retry:hover { background: var(--bg-hover); }

.chat-row-rename {
  flex: 1;
  min-width: 0;
  padding: .1rem .3rem;
  border: 1px solid var(--gold);
  border-radius: 5px;
  background: var(--bg-raised);
  color: var(--text);
  font: inherit;
  font-size: .855rem;
}

/* ==========================================================================
   The hearth — welcome screen in the reference design's language
   ========================================================================== */

/* ---- Header: elder mark, name, quiet icon row ---- */
.topbar-brand {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-width: 0;
}
.topbar-brand .elder-mark { flex: 0 0 auto; display: flex; }
.topbar-brand .elder-mark img { width: 32px; height: auto; display: block; }
.topbar-brand strong {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

/* ---- The seal on the welcome screen ---- */
.brand-logo {
  position: relative;
  width: min(168px, 46vw);
  margin: 0 auto 1.4rem;
}
/* The glow behind it — sunrise through a doorway */
.brand-logo::before {
  content: "";
  position: absolute;
  inset: -12%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--palm) 0%, rgba(255, 143, 0, .35) 45%, transparent 70%);
  animation: hearth-glow 5s ease-in-out infinite;
}
@keyframes hearth-glow {
  0%, 100% { opacity: .55; transform: scale(1); }
  50% { opacity: .85; transform: scale(1.04); }
}
.brand-logo img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  /* The ribbon is not round, so the shadow follows the artwork itself
     rather than a box drawn around it. */
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .18));
}
@media (prefers-reduced-motion: reduce) {
  .brand-logo::before { animation: none; }
}

/* ---- Welcome line ---- */
.welcome-title {
  margin: 0 0 .5rem;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 5vw, 2.5rem);
  font-weight: 400;
  letter-spacing: -.01em;
  color: var(--text);
}
.welcome-name {
  /* A button so it is reachable by keyboard, but it must read as prose. */
  appearance: none;
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-style: italic;
  font-weight: 600;
  color: var(--terracotta);
  cursor: pointer;
  border-bottom: 1px dashed transparent;
}
.welcome-name:hover { border-bottom-color: currentColor; }
[data-theme="dark"] .welcome-name { color: #ff8a80; }

.welcome-proverb {
  max-width: 32rem;
  margin: 0 auto 1.6rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--text-soft);
}

/* ---- The two pills under the proverb ---- */
.hearth-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .7rem;
  margin-bottom: 2.2rem;
}
.hearth-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .7rem 1.5rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--bg-raised);
  color: var(--text);
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform .12s, box-shadow .15s, border-color .15s;
}
.hearth-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  border-color: var(--gold);
}
.hearth-btn.is-muted { background: transparent; font-weight: 500; color: var(--text-soft); }
.hearth-btn svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* ---- Topic cards ---- */
.persona-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .85rem;
  margin-bottom: 1.75rem;
  text-align: left;
}
.persona-card {
  position: relative;
  display: flex;
  flex-direction: row;      /* overrides the earlier stacked-card rule */
  align-items: center;
  gap: .9rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-raised);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .14s, box-shadow .18s, border-color .18s;
}
.persona-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--gold);
}
.persona-card.is-active { border-color: var(--terracotta); }

/* The round tinted icon at the left of each card */
.persona-emoji {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg-hover);
  font-size: 1.2rem;
  line-height: 1;
}
.persona-card:nth-child(1) .persona-emoji { background: rgba(198, 40, 40, .12); }
.persona-card:nth-child(2) .persona-emoji { background: rgba(255, 143, 0, .16); }
.persona-card:nth-child(3) .persona-emoji { background: rgba(78, 125, 63, .14); }
.persona-card:nth-child(4) .persona-emoji { background: rgba(78, 52, 46, .12); }
.persona-card:nth-child(5) .persona-emoji { background: rgba(198, 40, 40, .10); }

.persona-body { display: flex; flex-direction: column; min-width: 0; }
.persona-name {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.25;
}
.persona-blurb {
  margin-top: .15rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: .84rem;
  color: var(--text-faint);
}

/* A large watermark glyph bleeding off the right edge, as in the reference */
.persona-mark {
  position: absolute;
  right: -.4rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 4.2rem;
  line-height: 1;
  opacity: .07;
  pointer-events: none;
  user-select: none;
}

@media (min-width: 700px) {
  .persona-grid { grid-template-columns: 1fr 1fr; }
}

/* ---- Chip row above the composer ---- */
.chip-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .45rem;
  max-width: var(--measure);
  margin: 0 auto .5rem;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .8rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-raised);
  color: var(--text-soft);
  font: inherit;
  font-size: .78rem;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: border-color .15s, color .15s;
}
.chip:hover { border-color: var(--gold); color: var(--text); }

/* ---- Glossary terms ---- */
.glossary-term {
  border: none;
  border-bottom: 1px dotted var(--gold-deep);
  background: transparent;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: help;
}
.glossary-term:hover { background: rgba(255, 143, 0, .14); }

.glossary-pop {
  position: fixed;
  z-index: 80;
  max-width: 17rem;
  padding: .55rem .7rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-raised);
  color: var(--text);
  font-size: .8rem;
  line-height: 1.45;
  box-shadow: var(--shadow-lg);
}
.glossary-pop strong {
  display: block;
  font-family: var(--font-display);
  margin-bottom: .15rem;
  color: var(--terracotta);
}
[data-theme="dark"] .glossary-pop strong { color: var(--gold); }

/* ---- Name prompt ---- */
.name-row { display: flex; gap: .5rem; margin-top: .6rem; }
.name-row input {
  flex: 1;
  padding: .55rem .7rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font: inherit;
}

/* The reference design's small maker credit */
.hub-credit {
  margin-top: .35rem;
  text-align: right;
  font-size: .66rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ============================ The Library =============================== */

.library-panel { max-width: 34rem; }

.library-tabs {
  display: flex;
  gap: .3rem;
  overflow-x: auto;
  padding: .8rem 0 .6rem;
  border-bottom: 1px solid var(--border);
  scrollbar-width: none;
}
.library-tabs::-webkit-scrollbar { display: none; }
.library-tabs button {
  flex: 0 0 auto;
  padding: .4rem .8rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--text-soft);
  font: inherit;
  font-size: .82rem;
  cursor: pointer;
  white-space: nowrap;
}
.library-tabs button:hover { background: var(--bg-hover); color: var(--text); }
.library-tabs button[aria-selected="true"] {
  background: var(--wood);
  border-color: var(--wood);
  color: #fff8ec;
  font-weight: 600;
}
[data-theme="dark"] .library-tabs button[aria-selected="true"] {
  background: var(--gold); border-color: var(--gold); color: #201412;
}

.library-body { padding: 1rem 0 .5rem; }

.lib-form { display: flex; flex-direction: column; gap: .7rem; }
.lib-field { display: flex; flex-direction: column; gap: .25rem; }
.lib-field label { font-size: .78rem; font-weight: 600; color: var(--text-soft); }
.lib-field select,
.lib-field input[type="text"],
.lib-field input[type="search"] {
  padding: .5rem .65rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: .875rem;
}
.lib-row { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }

.lib-go {
  padding: .65rem 1rem;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--wood);
  color: #fff8ec;
  font: inherit;
  font-weight: 600;
  font-size: .9rem;
  cursor: pointer;
}
.lib-go:hover { background: var(--navy-deep); }
.lib-go:disabled { opacity: .55; cursor: progress; }
[data-theme="dark"] .lib-go { background: var(--gold); color: #201412; }

.lib-result { margin-top: 1.1rem; }
.lib-title {
  margin: 0 0 .5rem;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--terracotta);
}
[data-theme="dark"] .lib-title { color: var(--gold); }
.lib-result p { margin: 0 0 .8rem; line-height: 1.7; }
.lib-result ul, .lib-result ol { margin: 0 0 .9rem; padding-left: 1.3rem; }
.lib-result li { margin-bottom: .35rem; }

.lib-note {
  padding: .7rem .85rem;
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--bg-hover);
  font-size: .85rem;
  margin-bottom: .9rem;
}

.lib-moral {
  padding: .85rem 1rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--terracotta);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--bg-hover);
  margin-bottom: .9rem;
}
.lib-moral em {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  margin-bottom: .35rem;
}

.lib-choices { display: flex; flex-direction: column; gap: .6rem; margin-top: 1rem; }
.lib-choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .15rem;
  padding: .8rem .95rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-raised);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, transform .12s;
}
.lib-choice:hover { border-color: var(--gold); transform: translateY(-1px); }
.lib-choice strong { font-size: .93rem; }
.lib-choice small { color: var(--text-faint); font-size: .8rem; }

.lib-name {
  padding: .8rem .9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-raised);
  margin-bottom: .6rem;
}
.lib-name strong {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--terracotta);
}
[data-theme="dark"] .lib-name strong { color: var(--gold); }
.lib-name p { margin: .2rem 0 0; font-size: .85rem; }

.quiz-options { display: flex; flex-direction: column; gap: .5rem; margin: .9rem 0; }
.quiz-option {
  padding: .7rem .9rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-raised);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.quiz-option:hover:not(:disabled) { border-color: var(--gold); }
.quiz-option.is-right { border-color: var(--green); background: color-mix(in srgb, var(--green) 14%, transparent); font-weight: 600; }
.quiz-option.is-wrong { border-color: var(--red); background: color-mix(in srgb, var(--red) 10%, transparent); }
.quiz-option:disabled { cursor: default; }

.quiz-streak {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .7rem;
  border-radius: 999px;
  background: var(--bg-hover);
  font-size: .8rem;
  font-weight: 600;
}

.lib-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }

.lib-empty {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--text-faint);
  font-size: .87rem;
}

.journal-item {
  padding: .8rem .9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-raised);
  margin-bottom: .6rem;
}
.journal-item h4 {
  margin: 0 0 .2rem;
  font-family: var(--font-display);
  font-size: 1rem;
}
.journal-item p { margin: 0; font-size: .82rem; color: var(--text-soft); }
.journal-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  margin-top: .5rem;
  font-size: .74rem;
  color: var(--text-faint);
}

.lib-loading {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 1.5rem 0;
  color: var(--text-soft);
  font-size: .88rem;
}

@media (max-width: 480px) {
  .lib-row { grid-template-columns: 1fr; }
}

/* ---- The Cultural Album ---- */

.album-figure { margin: 1.1rem 0 0; }
.album-figure img {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  display: block;
  background: var(--bg-hover);
}
.album-caption {
  margin: .6rem 0 .3rem;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
}

/* Always visible on a generated picture: it is a drawing, not a record. */
.album-stamp {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .5rem;
  padding: .25rem .6rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: .72rem;
  color: var(--text-soft);
  background: var(--bg-hover);
}

.album-cost {
  margin: .5rem 0 0;
  font-size: .74rem;
  color: var(--text-faint);
}

/* ========================================================================
   Talking with Grandpa — the hands-free conversation
   ========================================================================
   A full screen on purpose. This mode is for someone holding the phone at
   arm's length, or not holding it at all: everything that matters has to be
   readable across a room and tappable without aiming. */

.talk {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 1rem) 1.25rem
           calc(env(safe-area-inset-bottom, 0px) + 1.25rem);
  background:
    radial-gradient(ellipse at 50% 22%, rgba(255, 143, 0, .22), transparent 62%),
    var(--bg);
  animation: talk-in .28s ease-out;
}
@keyframes talk-in {
  from { opacity: 0; transform: scale(.98); }
  to { opacity: 1; transform: none; }
}

.talk-top {
  width: 100%;
  max-width: 34rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.talk-badge {
  font-family: var(--font-display);
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.talk-duration {
  display: inline-block;
  margin-left: .45rem;
  padding: .2rem .5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-faint);
  font: 600 .72rem/1 var(--font-body);
  letter-spacing: .04em;
  vertical-align: .08em;
}

.talk-stage {
  flex: 1;
  width: 100%;
  max-width: 34rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  text-align: center;
  min-height: 0;
}

/* ---- the seal, which is also the interrupt button ---- */
.talk-orb {
  position: relative;
  width: min(210px, 44vh);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  margin-bottom: 1.1rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.talk-orb img {
  position: relative;
  width: 78%;
  height: auto;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .2));
  transition: transform .3s ease;
}
.talk-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--palm);
  opacity: 0;
}

/* Listening: two rings breathe outward, like someone leaning in — and the
   seal itself swells with whatever the microphone is really hearing, so the
   screen answers your voice rather than a timer. */
.talk-orb img {
  transform: scale(calc(1 + var(--voice, 0) * 0.07));
}
.talk[data-state="listening"] .talk-ring {
  animation: talk-listen 2.4s ease-out infinite;
  opacity: 1;
}
.talk[data-state="listening"] .talk-ring {
  border-width: calc(2px + var(--voice, 0) * 3px);
}
.talk[data-state="listening"] .talk-ring-2 { animation-delay: 1.2s; }
@keyframes talk-listen {
  0% { transform: scale(.82); opacity: .55; }
  100% { transform: scale(1.12); opacity: 0; }
}
/* A word just landed — the ring answers it, so the screen proves it heard. */
.talk-orb.is-hearing .talk-ring { animation-duration: 1s; }

/* Thinking: a slow turn of the whole seal. */
.talk[data-state="thinking"] .talk-orb img { animation: talk-think 2.6s ease-in-out infinite; }
@keyframes talk-think {
  0%, 100% { transform: scale(1); opacity: .82; }
  50% { transform: scale(.965); opacity: 1; }
}

/* Speaking: a steady pulse in the brand red. */
.talk[data-state="speaking"] .talk-ring {
  border-color: var(--terracotta);
  opacity: 1;
  animation: talk-speak 1.5s ease-out infinite;
}
.talk[data-state="speaking"] .talk-ring-2 { animation-delay: .75s; }
@keyframes talk-speak {
  0% { transform: scale(.9); opacity: .5; }
  100% { transform: scale(1.06); opacity: 0; }
}

.talk[data-state="paused"] .talk-orb img,
.talk[data-state="trouble"] .talk-orb img { filter: grayscale(.6) opacity(.75); }

@media (prefers-reduced-motion: reduce) {
  .talk, .talk-ring, .talk-orb img { animation: none !important; }
  .talk[data-state="listening"] .talk-ring { opacity: .5; }
  .talk-orb img { transform: none; }
}

/* ---- words ---- */
.talk-state {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 5vw, 1.8rem);
  color: var(--text);
}
.talk-hint {
  margin: 0 0 .5rem;
  font-size: .92rem;
  color: var(--text-faint);
}
.talk-heard {
  margin: 0;
  max-width: 30rem;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--text);
  min-height: 1.5em;
}
.talk-heard:not(:empty)::before,
.talk-said:not(:empty)::before {
  display: block;
  margin-bottom: .12rem;
  color: var(--text-faint);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.talk-heard:not(:empty)::before { content: "You"; }
.talk-said:not(:empty)::before { content: "Grandpa"; }
.talk-said {
  margin: .35rem 0 0;
  max-width: 32rem;
  max-height: 7.5rem;
  overflow: hidden;
  font-size: .96rem;
  line-height: 1.55;
  color: var(--text-soft);
  /* The tail of a long answer fades out rather than being cut mid-letter. */
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent);
  mask-image: linear-gradient(to bottom, #000 60%, transparent);
}

/* ---- controls ---- */
.talk-controls {
  display: flex;
  gap: .75rem;
  width: 100%;
  max-width: 24rem;
}
.talk-btn-big {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 3.25rem;
  padding: .5rem 1rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--bg-raised);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.talk-btn-big svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.talk-btn-big:hover { background: var(--bg-hover); }
.talk-btn-big.is-end {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: #fff;
}
.talk-btn-big.is-end:hover { filter: brightness(1.06); }

.talk-foot {
  margin: .85rem 0 0;
  font-size: .78rem;
  color: var(--text-faint);
  text-align: center;
  max-width: 26rem;
}

/* ---- the ways in ---- */
.talk-btn svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.hearth-btn.is-talk {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: #fff;
}
.hearth-btn.is-talk svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.hearth-btn.is-talk:hover { filter: brightness(1.06); }

/* Short screens — a phone in landscape, or a small laptop. */
@media (max-height: 600px) {
  .talk-orb { width: min(130px, 30vh); margin-bottom: .6rem; }
  .talk-said { display: none; }
  .talk-foot { display: none; }
}

/* Nothing behind the conversation should scroll while it is open. */
body.is-talking { overflow: hidden; }

/* An answer that ran out of room is not a fault — it is a long answer. It
   should not wear the red of a failure. */
.turn-error.is-unfinished {
  border-color: color-mix(in srgb, var(--palm) 55%, var(--border));
  border-left-color: var(--palm);
  background: color-mix(in srgb, var(--palm) 10%, transparent);
  color: var(--text);
}

/* A Library result being read aloud. The same green the thread's Listen
   buttons use, so "this is the one talking" reads the same everywhere. */
.lib-read.is-on {
  border-color: var(--green);
  background: color-mix(in srgb, var(--green) 12%, transparent);
  color: var(--green);
  font-weight: 600;
}

/* Voice conversation controls keep the existing Grandpa palette and seal. */
.talk-tools { display: flex; flex-shrink: 0; justify-content: center; gap: .6rem; margin: .6rem 0 1rem; }
.talk-tools .hearth-btn { min-height: 44px; padding: .5rem 1rem; font-size: .85rem; }
.talk-tools [aria-pressed="true"] { border-color: var(--terracotta); background: var(--bg-active); }
.talk-tools button:disabled { opacity: .45; cursor: default; }
.talk-orb:disabled { cursor: default; }
.talk-controls, .talk-top { flex-shrink: 0; }
.talk-hint { max-width: 32rem; color: var(--text-soft); }
.talk-heard { max-height: 5rem; overflow-y: auto; flex-shrink: 0; }
.talk-said { overflow-y: auto; -webkit-mask-image: none; mask-image: none; flex-shrink: 0; }
@media (max-height: 700px) {
  .talk-stage { justify-content: flex-start; }
  .talk-orb { width: min(100px, 20vh); margin: .5rem auto; }
  .talk-tools { margin: .3rem 0 .6rem; }
  .talk-said:not([hidden]) { display: block; max-height: 4rem; }
}

/* ==========================================================================
   Ritual Coding
   --------------------------------------------------------------------------
   The same paper, the same gold, the same serif for headings. Only the code
   itself gets a surface of its own, because code wants a tighter line and a
   background that says "this is not prose".

   Everything is sized for a phone held in one hand: the panes are tabs, the
   targets are 44px, and nothing needs a horizontal scroll except code, which
   genuinely does.
   ========================================================================== */

/* ---- the mode switch ----------------------------------------------------
   The top bar holds four things on a 400px phone: the menu, the brand, this,
   and two round buttons. That is more than fits, and what it did instead was
   let the wordmark run under the switch — "Grandpa AI" reading as "Grandpa A"
   with a pill sitting on top of the rest of it.

   So the wordmark gives way first. The seal stays, which is the part that
   says whose app this is at a glance; the name comes back as soon as there is
   room for it. Nothing else on the bar can be dropped: the menu and the mode
   switch are the only ways to get anywhere. */
.modes {
  display: flex;
  flex: 0 0 auto;
  gap: 2px;
  margin: 0 auto;
  padding: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-hover) 70%, transparent);
}

/* The bar never spills, whatever is in it. */
.topbar { overflow: hidden; }
.topbar-brand { overflow: hidden; flex: 0 1 auto; }
.topbar-brand strong { overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 560px) {
  .topbar-brand strong { display: none; }
  .topbar { gap: .35rem; padding-left: .6rem; padding-right: .6rem; }
}

.mode {
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  font-size: .92rem;
  color: var(--text-faint);
  padding: 7px 16px;
  min-height: 34px;
  border-radius: 999px;
  transition: color .15s, background .15s;
}

.mode:hover { color: var(--text-soft); }

.mode[aria-selected="true"] {
  color: var(--text);
  background: var(--bg-raised);
  box-shadow: var(--shadow-sm);
}

/* On the dark theme the raised surface and the bar are nearly the same brown,
   so the chosen mode was carried by the underline alone. A border gives it an
   edge to sit on without making it glow. */
[data-theme="dark"] .modes { background: rgba(255, 255, 255, .06); }

[data-theme="dark"] .mode[aria-selected="true"] {
  background: color-mix(in srgb, var(--bg-raised) 70%, #fff 6%);
  border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
  padding: 6px 15px;
}

/* The current mode is also underlined, so it does not rest on colour alone. */
.mode[aria-selected="true"]::after {
  content: "";
  display: block;
  width: 18px;
  height: 2px;
  margin: 3px auto -5px;
  border-radius: 2px;
  background: var(--gold);
}

/* ---- the workbench ------------------------------------------------------ */
.build {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.build-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-raised);
}

.build-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  color: var(--text);
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  max-width: 34vw;
  min-height: 34px;
}

.build-name span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.build-name:hover { background: var(--bg-hover); }
.build-name svg { fill: none; stroke: currentColor; stroke-width: 1.8; opacity: .5; flex: none; }

.build-views {
  display: flex;
  gap: 2px;
  margin-left: auto;
  padding: 3px;
  border-radius: 999px;
  background: var(--bg-hover);
}

.build-view {
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  color: var(--text-soft);
  padding: 6px 12px;
  min-height: 32px;
  border-radius: 999px;
}

.build-view.is-on {
  background: var(--bg-raised);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.build-menu {
  position: absolute;
  top: 100%;
  right: 12px;
  z-index: 40;
  min-width: 230px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-raised);
  box-shadow: var(--shadow-md);
}

.build-bar { position: relative; }

.build-item {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  color: var(--text);
  padding: 11px 12px;
  min-height: 44px;
  border-radius: var(--radius-sm);
}

.build-item:hover { background: var(--bg-hover); }
.build-item[disabled] { color: var(--text-faint); cursor: not-allowed; }
.build-sep { height: 1px; margin: 5px 8px; background: var(--border); }

.build-body {
  flex: 1;
  min-height: 0;
  display: flex;
}

.build-pane {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: none;
  flex-direction: column;
  overflow: hidden;
}

.build-pane.is-on { display: flex; }

/* ---- talking about the build -------------------------------------------- */
.build-thread {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.build-empty {
  padding: 8vh 18px 24px;
  text-align: center;
  max-width: 34rem;
  margin: 0 auto;
}

.build-empty h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin: 0 0 8px;
  color: var(--text);
}

.build-empty p { color: var(--text-soft); margin: 0 0 18px; line-height: 1.6; }

.build-starters { display: grid; gap: 8px; }

.build-starter {
  border: 1px solid var(--border);
  background: var(--bg-raised);
  border-radius: var(--radius);
  padding: 13px 15px;
  text-align: left;
  font: inherit;
  color: var(--text);
  cursor: pointer;
  min-height: 46px;
}

.build-starter:hover { border-color: var(--gold); background: var(--bg-hover); }

.build-turn { max-width: 100%; }
.build-turn-you {
  align-self: flex-end;
  max-width: 85%;
  background: var(--user-bubble);
  border-radius: var(--radius);
  padding: 10px 14px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.build-turn-ai { align-self: stretch; }
.build-turn-ai .prose { overflow-wrap: anywhere; }

/* ---- talking a project through before building -------------------------- */
.build-brief { margin-top: 10px; display: grid; gap: 10px; }
.build-brief details { border: 1px solid var(--border, rgba(127,127,127,.3)); border-radius: var(--radius); padding: 8px 12px; background: var(--bg-hover); }
.build-brief summary { cursor: pointer; font-weight: 600; }
.build-brief-text { white-space: pre-wrap; margin: 8px 0 0; font-size: .85rem; overflow-wrap: anywhere; }
.build-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.build-chip { border: 1px solid var(--border, rgba(127,127,127,.35)); border-radius: 999px; background: transparent; color: inherit; padding: 6px 12px; font: inherit; font-size: .82rem; cursor: pointer; min-height: 36px; }
.build-chip:hover { border-color: var(--gold); }
.build-brief-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.build-start { border: 0; border-radius: 999px; background: var(--gold); color: #1b1408; font: inherit; font-weight: 700; padding: 10px 18px; min-height: 44px; cursor: pointer; }
.build-start.is-quiet { background: transparent; color: inherit; border: 1px solid var(--border, rgba(127,127,127,.35)); font-weight: 500; }
.build-brief-note { font-size: .82rem; opacity: .75; }

/* ---- a proposal, before it is applied ----------------------------------- */
.proposal {
  border: 1px solid color-mix(in srgb, var(--gold) 55%, var(--border));
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--gold) 8%, var(--bg-raised));
  padding: 12px 14px;
  margin-top: 10px;
}

.proposal h4 {
  margin: 0 0 8px;
  font-size: .95rem;
  font-weight: 700;
  color: var(--text);
}

.proposal-file {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-family: var(--font-mono);
  font-size: .82rem;
  overflow-wrap: anywhere;
}

.proposal-kind {
  flex: none;
  font-family: var(--font);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
}

.proposal-kind.is-new { background: color-mix(in srgb, var(--green) 20%, transparent); color: var(--green); }
.proposal-kind.is-changed { background: color-mix(in srgb, var(--gold) 26%, transparent); color: var(--gold-deep); }
.proposal-kind.is-same { background: var(--bg-hover); color: var(--text-faint); }

.proposal-delta { margin-left: auto; color: var(--text-soft); flex: none; font-size: .78rem; }
.proposal-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

.proposal-apply, .proposal-look {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-raised);
  font: inherit;
  font-weight: 600;
  padding: 9px 14px;
  min-height: 42px;
  cursor: pointer;
  color: var(--text);
}

.proposal-apply { background: var(--gold); border-color: var(--gold); color: #2e1f1a; }
.proposal-apply:hover { background: var(--gold-deep); }
.proposal-look:hover { background: var(--bg-hover); }
.proposal.is-applied { border-color: var(--border); background: var(--bg-raised); }
.proposal-done { color: var(--green); font-weight: 600; font-size: .88rem; }

/* ---- files and the editor ----------------------------------------------- */
#pane-files { flex-direction: column; }

.build-tree {
  flex: none;
  max-height: 34%;
  overflow-y: auto;
  padding: 8px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-raised);
}

.tree-file {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  font-family: var(--font-mono);
  font-size: .84rem;
  color: var(--text);
  padding: 9px 10px;
  min-height: 40px;
  border-radius: var(--radius-sm);
  text-align: left;
  overflow-wrap: anywhere;
}

.tree-file:hover { background: var(--bg-hover); }
.tree-file.is-on { background: var(--bg-active); font-weight: 700; }
.tree-empty { padding: 14px; color: var(--text-soft); font-size: .9rem; }

.build-editor { flex: 1; min-height: 0; display: flex; flex-direction: column; }

.editor-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--text-soft);
}

.editor-saved { margin-left: auto; color: var(--green); font-family: var(--font); font-weight: 600; }

/* The painted copy sits exactly under the textarea, and the textarea's own
   text is transparent. Every property that decides where a glyph lands has to
   match in both, or the colours drift away from the letters as you type. */
.editor-wrap { position: relative; flex: 1; min-height: 0; background: var(--bg-code); }

.editor-paint,
.editor-input {
  margin: 0;
  border: 0;
  padding: 12px;
  font-family: var(--font-mono);
  font-size: .84rem;
  line-height: 1.55;
  tab-size: 2;
  white-space: pre;
  overflow-wrap: normal;
  word-break: normal;
}

.editor-paint {
  position: absolute;
  inset: 0;
  overflow: auto;
  pointer-events: none;
  color: var(--text);
}

.editor-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  resize: none;
  overflow: auto;
  background: transparent;
  color: transparent;
  caret-color: var(--text);
  outline: none;
}

.editor-input::selection { background: color-mix(in srgb, var(--gold) 40%, transparent); }

.tok-comment { color: var(--text-faint); font-style: italic; }
.tok-key { color: #9a4f00; font-weight: 600; }
.tok-string { color: #3f6f2f; }
.tok-number { color: #8a4b8a; }
.tok-atom { color: #a33; }
.tok-tag { color: #1b5a8a; font-weight: 600; }
.tok-attr { color: #9a4f00; }
.tok-call { color: #1b5a8a; }

[data-theme="dark"] .tok-key { color: #ffb86b; }
[data-theme="dark"] .tok-string { color: #9ed07a; }
[data-theme="dark"] .tok-number { color: #d9a2e0; }
[data-theme="dark"] .tok-atom { color: #ff8f8f; }
[data-theme="dark"] .tok-tag { color: #79c0ff; }
[data-theme="dark"] .tok-attr { color: #ffb86b; }
[data-theme="dark"] .tok-call { color: #79c0ff; }

/* ---- the preview -------------------------------------------------------- */
#pane-preview { background: #fff; }
[data-theme="dark"] #pane-preview { background: #1b1210; }

.preview-note {
  flex: none;
  padding: 10px 14px;
  font-size: .86rem;
  line-height: 1.5;
  color: var(--text);
  background: color-mix(in srgb, var(--gold) 14%, var(--bg-raised));
  border-bottom: 1px solid var(--border);
}

.preview-frame { flex: 1; width: 100%; border: 0; background: #fff; min-height: 0; }

/* ---- the sheet ---------------------------------------------------------- */
.sheet-body { padding: 4px 4px 12px; overflow-y: auto; overflow-wrap: anywhere; min-width: 0; }

.sheet-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  font: inherit;
  color: var(--text);
  text-align: left;
  padding: 12px;
  min-height: 48px;
  cursor: pointer;
}

.sheet-row:hover { background: var(--bg-hover); }
.sheet-row small { display: block; color: var(--text-soft); font-size: .82rem; margin-top: 2px; }
.sheet-row strong { font-weight: 600; overflow-wrap: anywhere; }
.sheet-row .sheet-when { margin-left: auto; color: var(--text-faint); font-size: .8rem; flex: none; }
.sheet-note { padding: 12px; color: var(--text-soft); line-height: 1.6; }
.sheet-note code {
  font-family: var(--font-mono);
  font-size: .85em;
  background: var(--bg-code);
  padding: 1px 5px;
  border-radius: 4px;
  overflow-wrap: anywhere;
}

.sheet-go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 8px 12px;
  padding: 11px 16px;
  min-height: 46px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--gold);
  color: #2e1f1a;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}

.sheet-go:hover { background: var(--gold-deep); }
.sheet-danger { color: var(--red); }

/* ---- bigger screens: the file list keeps room for the editor ---- */
@media (min-width: 900px) {
  .build-tree { max-height: 30%; }
}

@media (max-width: 380px) {
  .build-name { max-width: 26vw; }
  .build-view { padding: 6px 9px; font-size: .8rem; }
}

/* In Build, the conversation and the welcome step aside for the workbench. */
.app[data-mode="build"] #welcome,
.app[data-mode="build"] #thread,
.app[data-mode="build"] .composer-extras { display: none !important; }
.app[data-mode="build"] .build { display: flex; }

/* ---- the build checklist ------------------------------------------------
   Progress as a list of real things, ticked off. A spinner says "wait"; this
   says what is being made and how much of it is left, which is the only kind
   of waiting anybody can judge. */
.build-plan {
  flex: none;
  margin: 12px 14px 0;
  padding: 13px 15px;
  border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--border));
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--gold) 8%, var(--bg-raised));
}

.build-plan h4 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--text);
}

.build-plan > p { margin: 0 0 10px; color: var(--text-soft); line-height: 1.5; font-size: .9rem; }

.plan-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }

.plan-step {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 5px 0;
  color: var(--text-faint);
  line-height: 1.45;
  font-size: .92rem;
}

.plan-tick {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  display: grid;
  place-items: center;
  font-size: .72rem;
  font-weight: 700;
}

.plan-step.is-doing { color: var(--gold-deep); font-weight: 600; }
[data-theme="dark"] .plan-step.is-doing { color: var(--gold); }
.plan-step.is-done { color: var(--text); }
.plan-step.is-done .plan-tick { background: var(--green); border-color: var(--green); color: #fff; }
.plan-step.is-failed { color: var(--red); }
.plan-step.is-failed .plan-tick { border-color: var(--red); }

/* The one that is running breathes, so a long step does not read as a stuck
   one. */
.plan-step.is-doing .plan-tick { animation: plan-pulse 1.4s ease-in-out infinite; }

@keyframes plan-pulse {
  0%, 100% { opacity: .45; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .plan-step.is-doing .plan-tick { animation: none; opacity: 1; }
}

.plan-note {
  margin: 10px 0 0;
  padding-top: 9px;
  border-top: 1px solid var(--border);
  color: var(--text-soft);
  font-size: .88rem;
  line-height: 1.5;
}

.build-plan .proposal-look { margin-top: 10px; }

/* The frame a build is checked in. Off screen, not display:none — a frame
   that is not displayed is not guaranteed to run its scripts, and running
   them is the entire point of it. */
.check-frame {
  position: absolute;
  left: -9999px;
  top: 0;
  width: 420px;
  height: 640px;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

/* ---- taking the work away -----------------------------------------------
   These were only in the three-dot menu, which on a phone is where things go
   to be never found again. They sit above the files now, where somebody
   looking at their work can see that it can be taken. */
.build-take {
  flex: none;
  display: flex;
  gap: 8px;
  padding: 9px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-raised);
  overflow-x: auto;
  scrollbar-width: none;
}

.build-take::-webkit-scrollbar { display: none; }

.take-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--bg);
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  color: var(--text);
  padding: 8px 14px;
  min-height: 40px;
  cursor: pointer;
  white-space: nowrap;
}

.take-btn:hover { background: var(--bg-hover); border-color: var(--gold); }
.take-btn svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; flex: none; }

/* The open file's own download, in the header beside its name. */
.take-one { margin-left: auto; flex: none; }
.take-one svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.editor-saved { margin-left: auto; }
/* Only when Saved is actually showing. An adjacent-sibling rule still applies
   to a hidden sibling, so this was overriding the auto margin every time and
   leaving the arrow stranded in the middle of the header. */
.editor-saved:not([hidden]) + .take-one { margin-left: 8px; }

/* What the check found after a save. Saying only "Saved" is what let a build
   go on reporting success while its pages pointed at files that were never
   written — three times over, while somebody kept saying it was still wrong. */
.proposal-checking {
  margin: 10px 0 0;
  padding-top: 9px;
  border-top: 1px solid var(--border);
  color: var(--text-soft);
  font-size: .88rem;
}

.proposal-faults {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.proposal-faults strong { display: block; color: var(--red); font-size: .9rem; }

.proposal-faults ul {
  margin: 6px 0 10px;
  padding-left: 20px;
  color: var(--text);
  font-size: .88rem;
  line-height: 1.5;
}

.proposal-faults li { margin: 3px 0; overflow-wrap: anywhere; }

/* Something moving while a turn is in flight. The only sign of life during a
   build used to be the words "Writing the files…" sitting perfectly still,
   which on a slow line is indistinguishable from a screen that has stopped. */
.build-live {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: var(--text-soft);
  font-size: .92rem;
}

.build-live .thinking { flex: none; }


/* Images live in the conversation, with a composer that fits a phone. */
.chat-image {margin:1rem 0;max-width:640px;}
.chat-image-open {display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;}
.chat-image img {display:block;width:100%;max-height:640px;object-fit:contain;border-radius:var(--radius);background:var(--bg-hover);}
.chat-image figcaption {font-size:.78rem;color:var(--text-soft);margin:.45rem 0;}
.image-composer,.image-viewer {color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:1.2rem;width:min(640px,calc(100vw - 1.5rem));max-height:90dvh;overflow:auto;box-sizing:border-box;}
.image-composer::backdrop,.image-viewer::backdrop {background:rgba(0,0,0,.55);}
.image-form {display:flex;flex-direction:column;gap:.8rem;}
.image-heading {display:flex;align-items:center;justify-content:space-between;gap:1rem;}
.image-heading h2 {margin:0;}
.image-heading button {background:transparent;color:inherit;border:0;font-size:1.2rem;padding:.5rem;cursor:pointer;}
.image-form textarea,.image-form select {box-sizing:border-box;width:100%;font:inherit;background:var(--bg);color:var(--text);border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:.65rem;}
.image-form textarea {resize:vertical;min-height:120px;}
.image-options {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;}
.image-options label {display:flex;flex-direction:column;gap:.35rem;font-size:.85rem;}
.image-viewer {width:min(1100px,calc(100vw - 1rem));}
.image-viewer img {display:block;width:100%;max-height:78dvh;object-fit:contain;}
.image-viewer button {font:inherit;padding:.6rem .8rem;border-radius:var(--radius-sm);margin-bottom:.7rem;}
@media(max-width:480px) {.image-options {grid-template-columns:1fr;}.image-composer {padding:1rem;}}

.image-generation-status {width:min(420px,100%);padding:.8rem 0;}
.image-generation-heading {display:flex;align-items:center;gap:.65rem;}
.image-generation-spinner {width:1.2rem;height:1.2rem;border:3px solid var(--border);border-top-color:var(--text);border-radius:50%;animation:image-spin 1s linear infinite;flex-shrink:0;}
.image-generation-preview {height:180px;margin:.8rem 0;border-radius:var(--radius);background:linear-gradient(110deg,var(--bg-hover) 25%,var(--border) 45%,var(--bg-hover) 65%);background-size:250% 100%;animation:image-shimmer 2s ease-in-out infinite;}
.image-generation-status progress {display:block;width:100%;height:.5rem;accent-color:var(--text);}
.image-generation-status p {font-size:.85rem;color:var(--text-soft);margin-top:.7rem;}
@keyframes image-spin {to {transform:rotate(360deg);}}
@keyframes image-shimmer {from {background-position:100% 0;}to {background-position:0 0;}}
@media(prefers-reduced-motion:reduce) {.image-generation-spinner,.image-generation-preview {animation:none;}}


/* A calmer workspace and settings with progressive disclosure. */
body {
  background-image:
    repeating-linear-gradient(90deg, rgba(78,52,46,.018) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(0deg, rgba(78,52,46,.018) 0 1px, transparent 1px 12px);
}
.topbar { min-height: 64px; background: color-mix(in srgb, var(--bg-raised) 92%, transparent); }
.persona-card { padding: 1rem; background: var(--bg-raised); box-shadow: var(--shadow-sm); }
.persona-card.is-active { border-color: var(--gold-deep); box-shadow: inset 0 0 0 1px var(--gold-deep); }
.persona-blurb, .composer-foot { color: var(--text-soft); }
.composer { border-color: var(--border-strong); box-shadow: 0 6px 24px rgba(78,52,46,.08); }
.brand-logo::before { animation: none; opacity: .42; }

#settings-modal .settings-panel {
  max-width: 42rem; padding: 0; border-radius: 24px;
  overscroll-behavior: contain; scrollbar-gutter: stable;
}
#settings-modal .settings-head {
  position: sticky; top: 0; z-index: 2; align-items: center;
  padding: 1.1rem 1.35rem; background: var(--bg-raised);
}
#settings-modal .settings-head h2 { font: 650 1.45rem/1.3 var(--font); letter-spacing: -.025em; }
#settings-modal .settings-close { width: 44px; height: 44px; border-radius: 50%; background: var(--bg-hover); }
.settings-content { padding: 1.1rem 1.35rem 1.35rem; }
.settings-intro { margin: 0; font-weight: 600; color: var(--text); }
.settings-save-note { margin: .15rem 0 1.15rem; font-size: .78rem; color: var(--text-soft); }
.settings-basics { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .85rem; }
#settings-modal .settings-group { border: 0; padding: 1rem; border-radius: 16px; background: var(--bg); min-width: 0; }
#settings-modal .settings-label { margin-bottom: .65rem; color: var(--text-soft); font-size: .72rem; letter-spacing: .055em; }
#settings-modal .setting-row { padding: .65rem 0; gap: .75rem; }
#settings-modal .setting-row + .setting-row { border-top: 1px solid var(--border); }
#settings-modal .setting-row strong { font-size: .87rem; }
#settings-modal .setting-row small { color: var(--text-soft); font-size: .75rem; }
.settings-basics > .settings-group:not(.settings-voice-basics) .setting-row { flex-wrap: wrap; }
#settings-modal .settings-basics > .settings-group:not(.settings-voice-basics) select,
#settings-modal .settings-basics > .settings-group:not(.settings-voice-basics) input { width: 100%; max-width: none; }
.settings-voice-basics { grid-column: 1 / -1; }
#settings-modal select, #settings-modal input[type="text"] { min-height: 44px; background-color: var(--bg-raised); border-color: var(--border-strong); }
#settings-modal input[type="range"] { min-height: 44px; }
#settings-modal .setting-btn { min-height: 44px; padding: .55rem .9rem; border-radius: 12px; background: var(--bg-raised); }
#settings-modal .setting-btn:hover { background: var(--bg-hover); }
#settings-modal .setting-btn.is-confirming { background: var(--red); }
#settings-modal select:focus-visible, #settings-modal input:focus-visible, .settings-advanced summary:focus-visible {
  outline: 2px solid var(--gold-deep); outline-offset: 3px;
}
.settings-advanced { margin-top: 1rem; border: 1px solid var(--border-strong); border-radius: 16px; overflow: clip; }
.settings-advanced summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  list-style: none; padding: 1rem; cursor: pointer; min-height: 64px;
}
.settings-advanced summary::-webkit-details-marker { display: none; }
.settings-advanced summary strong { display: block; font-size: .9rem; font-weight: 600; }
.settings-advanced summary small { display: block; margin-top: .15rem; color: var(--text-soft); font-size: .75rem; }
.settings-advanced summary:hover { background: var(--bg-hover); }
.settings-chevron { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); flex: 0 0 auto; margin-right: .3rem; }
.settings-advanced[open] .settings-chevron { transform: rotate(225deg); }
.settings-advanced-body { padding: 0 .75rem .75rem; display: grid; gap: .75rem; }
#settings-modal .settings-support { background: transparent; padding: 1.1rem 0 0; }
#settings-modal .settings-support .settings-label { margin-bottom: .35rem; }
@media (max-width: 600px) {
  .settings-basics { grid-template-columns: minmax(0,1fr); gap: .7rem; }
  #settings-modal .settings-panel { max-height: 94dvh; border-radius: 24px 24px 0 0; scrollbar-gutter: auto; }
  #settings-modal .settings-head { padding: .9rem 1rem; }
  .settings-content { padding: .9rem 1rem calc(1rem + env(safe-area-inset-bottom)); }
  #settings-modal .setting-row { flex-wrap: wrap; }
  #settings-modal .setting-toggle { flex-wrap: nowrap; }
  #settings-modal select, #settings-modal input[type="text"], #settings-modal input[type="range"] { width: 100%; max-width: none; }
  #settings-modal .settings-group { padding: .85rem; }
}

/* Documents are work inside the conversation, with a readable paper preview. */
.document-card { margin:18px 0; border:1px solid var(--document-accent,#1b2a63); border-radius:20px; padding:20px; background:var(--bg-raised,#fffdf7); overflow:hidden; }
.document-card-top { display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.document-card-top strong { display:block; font-size:1.08rem; }
.document-card-top small { display:block; margin-top:5px; opacity:.7; font-size:.8rem; }
.document-file-icon { flex:none; width:44px; height:52px; display:grid; place-items:center; background:var(--document-accent); color:white; border-radius:8px; font-size:28px; }
.document-template-label { display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-size:.86rem; margin-bottom:15px; }
.document-template-label select,.document-mode select { max-width:100%; border:1px solid #d4d8dd; border-radius:8px; background:#fff; color:#20242a; padding:9px; font:inherit; }
.document-downloads { display:flex; flex-wrap:wrap; gap:9px; margin:12px 0; }
.document-downloads a { display:inline-flex; align-items:center; justify-content:center; padding:11px 14px; background:var(--document-accent); color:#fff; text-decoration:none; font-size:.85rem; font-weight:600; border-radius:10px; min-height:44px; }
.document-downloads a:focus-visible,.document-revise:focus-visible { outline:3px solid #e9ae2b; outline-offset:3px; }
.document-extra summary,.document-preview summary { cursor:pointer; padding:10px 0; font-weight:600; font-size:.88rem; }
.document-extra small { display:block; font-size:.75rem; line-height:1.5; opacity:.75; }
.document-missing { padding:12px 0; font-size:.85rem; }
.document-missing ul { margin:6px 0; padding-left:22px; }
.document-page { margin:12px 0; padding:28px; background:#fff; color:#20242a; font:14px/1.65 Arial,sans-serif; border-top:5px solid var(--document-accent); box-shadow:0 4px 20px #0000000a; overflow-wrap:anywhere; }
.document-page h2 { font-size:24px; line-height:1.25; margin:0 0 14px; color:var(--document-accent); }
.document-page h3 { font-size:17px; margin:24px 0 8px; color:var(--document-accent); }
.document-page h4 { font-size:15px; margin:20px 0 8px; color:var(--document-accent); }
.document-page-letter,.document-page-certificate { font-family:Georgia,serif; }
.document-page-letter { border-top:0; }
.document-page-certificate { text-align:center; border:6px double var(--document-accent); }
.document-page p { margin:0 0 14px; }
.document-page .document-meta { font-size:12px; color:#626975; }
.document-table { overflow-x:auto; margin:18px 0; }
.document-page table { min-width:100%; border-collapse:collapse; font-size:12px; }
.document-page th,.document-page td { padding:9px; border:1px solid #d9d9d9; text-align:left; vertical-align:middle; min-width:80px; }
.document-page th { background:var(--document-accent); color:#fff; }
.document-page .document-signature { margin-top:30px; }
.document-figure { margin:24px 0; padding:12px; border:1px solid #d9dfe7; border-radius:8px; }
.document-figure svg { width:100%; height:auto; display:block; }
.document-figure figcaption,.document-page caption { color:#626975; font-size:12px; line-height:1.5; text-align:left; padding:8px 0; }
.document-page tfoot { font-weight:bold; background:#f0f3f6; }
.document-brief { margin:16px 0; padding:18px; border:1px solid var(--border,#d4d8dd); border-radius:16px; background:var(--bg-raised,#fffdf7); font-size:.9rem; }
.document-brief p { line-height:1.55; margin:12px 0; }
.document-brief summary { cursor:pointer; padding:10px 0; font-weight:600; }
.document-brief dt { font-weight:600; margin-top:12px; }
.document-brief dd { margin:4px 0 12px; white-space:pre-wrap; overflow-wrap:anywhere; }
.document-task-actions { display:flex; flex-wrap:wrap; gap:10px; }
.document-task-actions button { min-height:44px; padding:10px 14px; border:1px solid #b9bdc3; border-radius:9px; background:transparent; color:inherit; font:inherit; cursor:pointer; }
.document-task-actions button:first-child { background:var(--accent,#1b2a63); color:#fff; }
.document-revise { margin-top:14px; padding:10px 14px; border:1px solid #b9bdc3; border-radius:9px; background:transparent; color:inherit; font:inherit; cursor:pointer; min-height:44px; }
.document-download-status { font-size:.8rem; margin:12px 0 0; }
.document-mode { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:12px 16px; margin-bottom:10px; border:1px solid #d4d8dd; border-radius:14px; font-size:.85rem; }
.document-mode[hidden] { display:none; }
.document-design-option[hidden] { display:none; }
.talk-tools { flex-wrap:wrap; max-width:100%; }
.recipe-images-choice { display:flex; gap:9px; align-items:center; margin:12px 0; }
.cooking-picture { margin:16px 0; }
.cooking-picture img { width:100%; height:auto; border-radius:14px; display:block; }
.cooking-picture figcaption { font-size:.82rem; line-height:1.5; margin:8px 0; overflow-wrap:anywhere; }
.cooking-steps li { padding:12px 0; border-bottom:1px solid var(--border); }
.cooking-cue,.cooking-safety { padding:12px; border-radius:10px; background:var(--bg-active); line-height:1.6; }
.cooking-progress { padding:14px; border:1px solid var(--border); border-radius:12px; margin:16px 0; }
.cooking-progress progress { width:100%; }
.cooking-stage-button { display:inline-flex; align-items:center; gap:9px; }
.cooking-stage-button[aria-busy="true"] { opacity:1; cursor:wait; }
.cooking-stage-spinner { width:16px; height:16px; flex-shrink:0; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:cooking-stage-spin .8s linear infinite; }
.cooking-stage-loading { padding:8px 0; font-size:.85rem; line-height:1.5; }
@keyframes cooking-stage-spin { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { .cooking-stage-spinner { animation:none; } }
.talk-input-mode { display:flex; flex-basis:100%; justify-content:center; align-items:center; gap:8px; font-size:.85rem; }
.talk-input-mode select { padding:8px 10px; border-radius:10px; border:1px solid #bda789; background:#fffdf7; color:#34261f; font:inherit; }
.artwork-gallery { margin-top:20px; padding-top:16px; border-top:1px solid #d9dfe7; }
.artwork-gallery h3,.artwork-item h4 { margin:12px 0; overflow-wrap:anywhere; }
.artwork-item { padding:12px; margin:14px 0; border:1px solid #d9dfe7; border-radius:14px; }
.artwork-image { border-radius:10px; overflow:hidden; background:repeating-conic-gradient(#edf0f2 0% 25%,#fff 0% 50%) 50% / 20px 20px; }
.artwork-image svg { display:block; width:100%; height:auto; max-height:520px; }
.artwork-dimensions,.artwork-gallery small { font-size:.78rem; line-height:1.5; overflow-wrap:anywhere; }
.document-mode label { display:flex; align-items:center; gap:8px; }
.document-mode button { margin-left:auto; font-size:24px; background:none; border:0; color:inherit; cursor:pointer; }
@media(max-width:600px) { .document-card { padding:14px; border-radius:14px; } .document-page { padding:18px; } .document-card-top { align-items:flex-start; } .document-downloads a { flex:1 1 95px; } }

/* Ritual team uses the app's existing palette and readable mobile layout. */
.team-steps small { display:block; font-weight:400; color:var(--text-soft); font-size:.8rem; }
.team-round { font-size:.8rem; color:var(--text-soft); }
.team-issues { margin:12px 0; color:var(--text-soft); overflow-wrap:anywhere; }
.team-issues summary { cursor:pointer; min-height:44px; display:flex; align-items:center; }
.team-issues ul { padding-left:20px; font-size:.85rem; }
.team-issues li { margin-bottom:6px; }
.team-steps .is-doing .plan-tick { border-right-color:transparent; animation:team-spin 1s linear infinite; }
@keyframes team-spin {to {transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce) {.team-steps .is-doing .plan-tick {animation:none;}}

/* Keep team errors, controls and the conversation reachable on short phones. */
#pane-chat {overflow-y:auto;overscroll-behavior:contain;}
#pane-chat .build-thread {flex:none;overflow:visible;}
.team-status {display:flex;gap:10px;align-items:flex-start;color:var(--text-soft);line-height:1.5;margin:10px 0;overflow-wrap:anywhere;}
.team-spinner {flex:none;width:19px;height:19px;border:2px solid var(--border-strong);border-top-color:var(--gold-deep);border-radius:50%;animation:team-spin .8s linear infinite;margin-top:3px;}
.team-elapsed {font-size:.8rem;color:var(--text-faint);margin:6px 0 12px;}
.team-controls {display:flex;gap:8px;margin:12px 0;}
.team-controls button {min-height:44px;}
.team-error {padding:12px;border-left:3px solid var(--red);background:color-mix(in srgb,var(--red) 6%,var(--bg-raised));border-radius:var(--radius-sm);color:var(--text);font-size:.85rem;line-height:1.5;overflow-wrap:anywhere;}
.team-error summary {padding:8px 0;cursor:pointer;}
.team-error ul {padding-left:18px;}
@media (prefers-reduced-motion:reduce){.team-spinner{animation:none;border-right-color:transparent;}}

/* An atomic approved upload uses the existing action circle as a loader. */
.publish-loading {position:relative;}
.publish-loading>svg {visibility:hidden;}
.publish-loading::after {content:"";position:absolute;inset:50% auto auto 50%;margin:-10px 0 0 -10px;width:20px;height:20px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:team-spin .8s linear infinite;}
@media (prefers-reduced-motion:reduce){.publish-loading::after{animation:none;}}

/* User-owned memory notebook */
.memory-intro { font-size: .95rem; line-height: 1.6; margin: .75rem 0 1rem; }
.memory-switch { padding: .85rem; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); font-weight: 600; }
.memory-switch input { width: 1.15rem; height: 1.15rem; accent-color: var(--text); flex-shrink: 0; }
#memory-text { min-height: 6rem; }
.memory-form-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .7rem; }
.memory-form-footer small { color: var(--text-faint); font-size: .76rem; }
.memory-save { font-weight: 600; }
.memory-list-head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-top: 1.7rem; }
.memory-list-head h3 { margin: 0; font-size: .95rem; }
.memory-list-head h3 span { color: var(--text-faint); font-weight: 400; font-size: .8rem; margin-left: .4rem; }
.memory-list { list-style: none; padding: 0; display: grid; gap: .7rem; }
.memory-list li { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .9rem; }
.memory-list p { margin: 0 0 .65rem; font-size: .9rem; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.memory-list .setting-actions { margin: 0; }
.memory-empty { border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); padding: 1rem; margin: 1rem 0; }
.memory-empty p { margin: .5rem 0 0; color: var(--text-faint); font-size: .85rem; line-height: 1.6; }

/* Grandpa AI coding workspace: compact task controls and a full-height workbench. */
.app[data-mode="build"] #chip-row,
.app[data-mode="build"] .composer-foot {display:none!important;}
.app[data-mode="build"] .composer-zone {padding-top:.6rem;padding-bottom:.65rem;}
.app[data-mode="build"] .build {background:var(--bg-raised);min-height:0;overflow:hidden;}
.build-bar {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.55rem;padding:.65rem .9rem;border-bottom:1px solid var(--border);flex:none;}
.build-name {max-width:none;min-width:0;font-size:.92rem;text-align:left;}
#build-name-text {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.build-views {grid-row:2;grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;border-radius:9px;padding:3px;gap:3px;background:var(--bg);}
.build-view {border-radius:7px;padding:.5rem .35rem;min-height:38px;font-size:.8rem;font-weight:600;white-space:nowrap;}
.build-view.is-on {box-shadow:0 1px 4px #0000000e;border:1px solid var(--border);background:var(--bg-raised);color:var(--text);}
#changes-count {font-size:.67rem;opacity:.7;margin-left:2px;}
#build-menu-btn {grid-column:2;grid-row:1;}
.build-body {min-height:0;overflow:hidden;flex:1;}
.build-plan {position:relative;z-index:4;margin:0;padding:.75rem .9rem;border:0;border-bottom:1px solid var(--border);border-radius:0;background:var(--bg-raised);}
.task-heading {display:flex;align-items:center;gap:.5rem;justify-content:space-between;}
.task-title {display:flex;align-items:center;gap:.45rem;min-width:0;flex-wrap:wrap;}
.task-title strong {max-width:clamp(110px,40vw,380px);font-size:.88rem;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.task-state {font-size:.68rem;color:var(--text-soft);background:var(--bg);padding:3px 7px;border:1px solid var(--border);border-radius:5px;}
.task-dot {height:7px;width:7px;border-radius:50%;background:var(--gold);flex:none;}
.task-dot.is-approved {background:var(--green);}
.task-dot.is-needs_attention,.task-dot.is-interrupted {background:var(--red);}
.task-actions button,.task-detail-row>button {font:inherit;font-size:.76rem;cursor:pointer;border:1px solid var(--border);background:var(--bg);color:var(--text);padding:.4rem .65rem;border-radius:6px;min-height:34px;}
.task-actions #plan-stop {background:transparent;color:var(--red);border-color:color-mix(in srgb,var(--red) 25%,var(--border));}
.task-meter {height:3px;border-radius:4px;background:var(--border);overflow:hidden;margin:.65rem 0 .4rem;}
.task-meter>span {display:block;height:100%;background:var(--gold-deep);transition:width .3s ease;}
.task-meta {display:flex;gap:.65rem;align-items:center;flex-wrap:wrap;font-size:.67rem;color:var(--text-faint);}
.task-meta>span+span:before {content:'·';margin-right:.65rem;}
.build-plan .task-note {font-size:.72rem;line-height:1.4;color:var(--text-soft);margin:.35rem 0 .25rem;}
.task-detail-row {display:flex;align-items:center;gap:.8rem;margin-top:.3rem;font-size:.72rem;}
.task-detail-row details>summary {cursor:pointer;min-height:28px;display:flex;align-items:center;gap:.35rem;color:var(--text-soft);list-style:none;}
.task-detail-row details>summary:before {content:'›';font-size:1rem;}
.task-detail-row details[open]>summary:before {transform:rotate(90deg);}
.task-detail-row details>summary span {font-size:.65rem;color:var(--text-faint);}
.task-detail-row>button {background:none;border:0;padding:2px;min-height:28px;color:var(--text-soft);}
.task-details>ol,.activity-details>ol {position:absolute;top:calc(100% - 1px);left:.75rem;right:.75rem;max-height:min(320px,44dvh);overflow:auto;padding:.75rem;margin:0;background:var(--bg-raised);border:1px solid var(--border-strong);box-shadow:0 12px 28px #0002;border-radius:0 0 9px 9px;}
.task-details .plan-step {padding:.45rem .25rem;gap:.6rem;}
.task-details .plan-step strong {font-size:.77rem;font-weight:600;}
.task-details .plan-step small {font-size:.68rem;}
.task-details .plan-tick {height:17px;width:17px;font-size:.65rem;border-width:1.5px;}
.task-activity {list-style:none;}
.task-activity li {display:flex;gap:.8rem;padding:.5rem .15rem;border-bottom:1px solid var(--border);font-size:.74rem;line-height:1.5;}
.task-activity time {font-family:var(--font-mono);color:var(--text-faint);white-space:nowrap;font-size:.65rem;}
.build-plan .team-error {margin:.55rem 0;padding:.65rem .8rem;font-size:.76rem;max-height:100px;overflow:auto;}
#pane-chat {background:var(--bg);}
.build-empty {padding:2rem 1.2rem;}
.build-empty h2 {font-family:var(--font);font-size:1.4rem;letter-spacing:-.035em;line-height:1.2;}
.build-empty p {font-size:.87rem;max-width:440px;line-height:1.65;}
.build-starter {font-size:.8rem;line-height:1.5;padding:.85rem;}
.build-thread {padding:1rem;}
.build-turn {font-size:.88rem;line-height:1.6;}
.build-turn-you {border-radius:10px;background:var(--bg-raised);border:1px solid var(--border);padding:.75rem .9rem;}
.workspace-footer {display:flex;align-items:center;gap:.75rem;justify-content:space-between;flex:none;padding:.35rem .8rem;border-top:1px solid var(--border);font-size:.64rem;color:var(--text-faint);background:var(--bg-raised);}
.workspace-footer span:nth-child(2) {margin-right:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.workspace-footer button {border:0;background:none;font:inherit;color:var(--text-soft);cursor:pointer;min-height:28px;white-space:nowrap;}
.workspace-footer kbd {font:inherit;opacity:.6;}
.file-filter {display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;border-bottom:1px solid var(--border);background:var(--bg-raised);font-size:.66rem;color:var(--text-faint);}
.file-filter span {font-weight:700;letter-spacing:.06em;text-transform:uppercase;}
.file-filter input,.command-search {border:1px solid var(--border);background:var(--bg);color:var(--text);font:inherit;border-radius:6px;padding:.5rem .6rem;min-width:0;flex:1;}
.build-tree {padding:.35rem;max-height:100px;font-size:.75rem;}
.tree-file {font-size:.73rem;padding:.4rem .6rem;min-height:32px;border-radius:5px;}
.tree-file:before {content:'◇';opacity:.5;font-size:.7rem;}
.tree-file.is-on {color:var(--text);background:var(--bg-active);border-left:2px solid var(--gold);}
.editor-head {padding:.5rem .7rem;font-size:.69rem;min-height:35px;background:var(--bg-raised);}
.editor-wrap .editor-paint,.editor-wrap .editor-input {padding-left:48px;font-size:.77rem;line-height:1.65;}
.editor-lines {position:absolute;inset:0 auto 0 0;width:40px;padding:12px 7px 12px 0;margin:0;overflow:hidden;text-align:right;z-index:2;pointer-events:none;background:var(--bg-code);border-right:1px solid var(--border);color:var(--text-faint);font: .77rem/1.65 var(--font-mono);}
.preview-tools {display:flex;gap:.5rem;align-items:center;padding:.5rem .65rem;flex:none;border-bottom:1px solid var(--border);background:var(--bg-raised);}
.preview-tools select {min-width:0;max-width:50%;flex:1;border:0;background:var(--bg);color:var(--text);font: .72rem var(--font-mono);padding:.5rem;border-radius:5px;}
.preview-tools button {font: .7rem var(--font);border:1px solid var(--border);background:var(--bg-raised);color:var(--text-soft);padding:.5rem;border-radius:5px;cursor:pointer;}
.preview-devices {display:flex;gap:3px;}
.preview-devices [aria-pressed="true"] {color:var(--text);border-color:var(--gold);background:var(--bg);}
#pane-preview {overflow:auto;background:var(--border);align-items:stretch;}
.preview-note {font-size:.76rem;flex:none;}
.preview-frame {width:100%;min-height:200px;flex:1;border:0;background:white;}
.preview-frame.is-phone {width:min(390px,100%);max-width:390px;align-self:center;box-shadow:0 4px 18px #0002;}
#pane-changes {overflow:auto;flex-direction:column;background:var(--bg-code);}
.changes-head {padding:1rem;border-bottom:1px solid var(--border);}
.changes-head h3 {font:600 .95rem var(--font);margin:0 0 .3rem;}
.changes-head p {font-size:.75rem;color:var(--text-soft);margin:0;}
.file-change {border-bottom:1px solid var(--border);}
.file-change summary {display:flex;gap:.65rem;align-items:center;list-style:none;cursor:pointer;padding:.85rem;font-size:.76rem;}
.file-change summary strong {font-family:var(--font-mono);font-weight:500;overflow-wrap:anywhere;min-width:0;}
.change-kind {font-size:.65rem;font-weight:700;border:1px solid var(--border);border-radius:3px;padding:2px 4px;}
.change-kind.is-added {color:var(--green);}.change-kind.is-modified {color:var(--gold-deep);}.change-kind.is-deleted {color:var(--red);}
.change-stats {margin-left:auto;font-family:var(--font-mono);color:var(--text-faint);white-space:nowrap;font-size:.7rem;}
.change-code {overflow:auto;max-height:60dvh;padding-bottom:.75rem;}
.change-code pre {margin:0;font: .72rem/1.65 var(--font-mono);white-space:pre;padding:0 .85rem;min-width:max-content;}
.diff-removed {background:color-mix(in srgb,var(--red) 8%,transparent);color:var(--red);}
.diff-added {background:color-mix(in srgb,var(--green) 8%,transparent);color:var(--text);}
.diff-location {font: .68rem var(--font-mono);color:var(--text-faint);padding:.6rem .85rem;}
.workspace-empty {padding:2rem 1.25rem;color:var(--text-soft);font-size:.85rem;line-height:1.6;}
.command-search {width:100%;margin:0 0 .9rem;box-sizing:border-box;}
.workspace-command {display:block;width:100%;text-align:left;margin:.4rem 0;padding:.8rem;}
@media (min-width:900px){
 .build-bar {grid-template-columns:minmax(150px,1fr) auto auto;padding:.6rem 1rem;}
 .build-views {grid-row:1;grid-column:2;width:auto;min-width:270px;}
 #build-menu-btn {grid-column:3;}
 .build-views {grid-template-columns:repeat(4,minmax(0,1fr));min-width:360px;}
 .build-plan {padding:.65rem 1rem;}
 .task-details>ol,.activity-details>ol {right:auto;width:min(500px,calc(100% - 2rem));}
 .build-pane#pane-files.is-on {display:grid;grid-template-areas:'take take' 'filter editor' 'tree editor';grid-template-columns:175px minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);}
 #build-take {grid-area:take;}.file-filter {grid-area:filter;flex-wrap:wrap;gap:.4rem;padding:.7rem;}.file-filter input {width:100%;flex-basis:100%;}
 .build-tree {grid-area:tree;max-height:none;border-right:1px solid var(--border);border-bottom:0;}
 .build-editor {grid-area:editor;overflow:hidden;}
}
@media (max-width:380px){.task-title strong{max-width:140px;}.task-state{display:none;}.workspace-footer kbd{display:none;}.workspace-footer{gap:.4rem;}.build-view{font-size:.73rem;}.task-meta{font-size:.62rem;}}
@media (prefers-reduced-motion:reduce){.task-meter>span{transition:none;}}

.workspace-footer>span:first-child {white-space:nowrap;flex:none;}

/* Keep the work visible. Agent details expand only when requested. */
.build-plan {padding:.45rem .8rem;}
.agent-strip {display:flex;align-items:center;gap:.55rem;min-height:36px;}
.agent-spark {color:var(--gold-deep);font-size:1.1rem;flex:none;}
.agent-spark.is-working {animation:agent-breathe 1.8s ease-in-out infinite;}
.agent-caption {display:flex;gap:.5rem;align-items:center;min-width:0;flex:1;font-size:.72rem;}
.agent-caption strong {font-weight:600;white-space:nowrap;}
.agent-caption>span {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-faint);font-size:.68rem;}
.agent-details>summary {cursor:pointer;list-style:none;font-size:.7rem;color:var(--text-soft);min-height:36px;display:flex;align-items:center;gap:.3rem;}
.agent-details>summary:after {content:'⌄';}
.agent-details[open]>summary:after {content:'⌃';}
.agent-panel {position:absolute;top:100%;left:.6rem;right:.6rem;max-height:55dvh;overflow:auto;border:1px solid var(--border);border-radius:10px;padding:.9rem;background:var(--bg-raised);box-shadow:0 12px 32px #0003;}
.agent-panel .task-details>ol,.agent-panel .activity-details>ol {position:static;max-height:210px;width:auto;box-shadow:none;margin-top:.4rem;border-radius:7px;}
.agent-panel .task-detail-row {flex-wrap:wrap;align-items:flex-start;}
.agent-quick-action button {font:inherit;font-size:.7rem;padding:.35rem .6rem;border:1px solid var(--border);border-radius:6px;background:var(--bg-raised);color:var(--text-soft);min-height:34px;cursor:pointer;}
.preview-live-bar {display:flex;align-items:center;justify-content:space-between;gap:.5rem;background:var(--bg-raised);border-bottom:1px solid var(--border);padding:.3rem .65rem;font-size:.64rem;color:var(--text-soft);flex:none;}
#preview-live {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#preview-follow {font:inherit;white-space:nowrap;border:0;border-radius:4px;padding:.3rem .45rem;background:transparent;color:var(--text-soft);cursor:pointer;}
#preview-follow[aria-pressed="true"] {background:var(--bg-active);color:var(--text);}
@keyframes agent-breathe {50%{opacity:.35;transform:scale(.85);}}
@media(max-width:899px){
 .app[data-mode="build"] .topbar {min-height:52px;padding-top:.3rem;padding-bottom:.3rem;}
 .build-bar {padding:.35rem .7rem;gap:.3rem;}
 .build-view {min-height:34px;padding:.35rem .25rem;}
 .app[data-mode="build"] .composer-zone {padding:.35rem .6rem;}
 .app[data-mode="build"] .composer {min-height:48px;}
 .app[data-mode="build"] .hub-credit {display:none;}
 .workspace-footer {padding:.15rem .65rem;}
 .workspace-footer button {font-size:0;}
 .workspace-footer kbd {font-size:.65rem;}
 .preview-tools {padding:.35rem .5rem;gap:.3rem;}
 .preview-tools button {padding:.4rem;}
}
@media(prefers-reduced-motion:reduce){.agent-spark.is-working{animation:none;}}
.agent-editing {color:var(--gold-deep);}
.agent-editing:after {content:' • Agent';font:600 .62rem var(--font);margin-left:.4rem;}

/* Live Talk listens continuously and decides turns itself, so the relay's
   listening-mode choice and Send button have nothing to do there. */
.talk[data-mode="live"] .talk-input-mode,
.talk[data-mode="live"] #talk-send { display: none; }
.preview-safety {display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex-wrap:wrap;padding:.4rem .65rem;border-bottom:1px solid var(--border);font-size:.72rem;}
.preview-safety label {display:flex;align-items:center;gap:.35rem;min-width:0;}
.preview-safety button {font:inherit;color:var(--text);background:var(--bg-raised);border:1px solid var(--border);border-radius:5px;padding:.4rem;}
/* Verification is a disclosure, not a success badge or execution progress. */
#build-verification {flex:none;min-width:0;}
.verification-status {padding:.45rem .7rem;border-bottom:1px solid var(--border);font-size:.75rem;}
.verification-status summary {cursor:pointer;font-weight:600;}
.verification-status dl {display:grid;grid-template-columns:minmax(5rem,1fr) minmax(0,2fr);gap:.4rem .65rem;max-height:13rem;overflow:auto;}
.verification-status dt {font-weight:600;}
.verification-status dd {margin:0;overflow-wrap:anywhere;}
.verification-status p {margin:.5rem 0;overflow-wrap:anywhere;}
@media(max-width:420px){.verification-status dl {grid-template-columns:1fr;gap:.2rem;}.verification-status dd {margin-bottom:.35rem;}}

/* Compact, keyboard-accessible task controls and durable file status. */
.agent-quick-action {display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;justify-content:flex-end;}
.agent-quick-action button {min-height:44px;min-width:44px;}
.agent-quick-action button:disabled {opacity:.55;cursor:wait;}
.file-progress {margin:.6rem 0;font-size:.8rem;}
.file-progress summary {cursor:pointer;padding:.4rem 0;}
.file-progress ul {list-style:none;padding:0;max-height:14rem;overflow:auto;}
.file-progress li {display:flex;flex-wrap:wrap;gap:.3rem .7rem;justify-content:space-between;padding:.4rem 0;border-bottom:1px solid var(--border);}
.file-progress code {overflow-wrap:anywhere;min-width:0;}
.file-progress span {color:var(--text-soft);}
@media(max-width:420px){.agent-strip {flex-wrap:wrap;}.agent-quick-action {margin-left:auto;}.agent-caption {min-width:0;}.agent-quick-action button {font-size:.75rem;}}

/* Recovery information must remain readable on small screens, not ellipsized. */
#workspace-save-state {white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;line-height:1.4;min-width:0;}
@media(max-width:600px){
 .workspace-footer {flex-wrap:wrap;font-size:.75rem;align-items:flex-start;}
 #workspace-save-state {flex:1 1 65%;}
 .agent-caption {flex-wrap:wrap;gap:.2rem .5rem;}
 .agent-caption>span {white-space:normal;overflow-wrap:anywhere;font-size:.75rem;}
 .agent-details>summary {min-height:44px;}
}
.agent-quick-action button:focus-visible,.agent-details>summary:focus-visible {outline:2px solid var(--gold-deep);outline-offset:2px;}

.workspace-footer #workspace-reconnect {font-size:.75rem;min-height:44px;min-width:44px;text-decoration:underline;white-space:normal;}

/* Keep the mobile filename separate from actions; full text remains in the DOM. */
@media(max-width:600px){
 .agent-strip {display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:.35rem .5rem;}
 .agent-spark {grid-area:1/1;align-self:start;justify-self:start;margin-top:.15rem;}
 .agent-caption {grid-area:1/1/2/3;display:block;padding-left:1.65rem;min-width:0;}
 .agent-caption strong {display:block;}
 .agent-caption>span {display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;white-space:normal;overflow-wrap:anywhere;line-height:1.4;margin-top:.2rem;}
 .agent-details {grid-area:2/1;min-width:0;}
 .agent-quick-action {grid-area:2/2;margin-left:0;justify-self:end;}
 .tree-file.agent-editing:after {white-space:nowrap;flex-shrink:0;}
}

/* ---- focused Build layout (every screen) -----------------------------------
   Preview takes the whole screen with one slim bar; Chat shows the conversation,
   the progress strip and the message box. Rarely used controls sit behind ⋯. */
@media all {
  .app[data-mode="build"][data-build-view="preview"] .topbar,
  .app[data-mode="build"][data-build-view="preview"] .build-bar,
  .app[data-mode="build"][data-build-view="preview"] #build-plan,
  .app[data-mode="build"][data-build-view="preview"] #build-verification,
  .app[data-mode="build"][data-build-view="preview"] .workspace-footer,
  .app[data-mode="build"][data-build-view="preview"] .composer-zone,
  .app[data-mode="build"][data-build-view="preview"] .sidebar { display: none !important; }
  .app[data-mode="build"][data-build-view="chat"] #build-verification { display: none; }
  .app[data-mode="build"] .workspace-footer.is-quiet { display: none; }
  .preview-tools { gap: 6px; padding: 6px 8px; }
  .preview-tools .preview-exit, .preview-tools .preview-more { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 12px; font-weight: 600; font-size: .85rem; color: var(--text); }
  .preview-tools select { max-width: none; min-height: 44px; }
  .preview-tools #preview-refresh { min-height: 44px; min-width: 44px; }
  #pane-preview:not(.options-open) .preview-devices,
  #pane-preview:not(.options-open) .preview-live-bar,
  #pane-preview:not(.options-open) .preview-safety { display: none; }
}

/* ---- voice screen: just the circle, Mute and Done ------------------------- */
.talk-tools #talk-send:disabled { display: none; }
.talk-tools:not(:has(#talk-send:not(:disabled))) { margin: 0; }
.talk-options { flex-shrink: 0; text-align: center; margin: .25rem 0 .5rem; color: var(--text-soft); font-size: .85rem; }
.talk-options summary { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; cursor: pointer; list-style: none; text-decoration: underline; text-underline-offset: 3px; }
.talk-options summary::-webkit-details-marker { display: none; }
.talk-options[open] { display: grid; justify-items: center; gap: .6rem; }
.talk-options .talk-foot { margin: 0; max-width: 34rem; }

@media (min-width: 900px) {
  #build-thread, #build-empty { width: 100%; max-width: var(--measure, 760px); margin-left: auto; margin-right: auto; }
}

/* ---- Build: adding pictures and files through the chat ------------------ */
#app:not([data-mode="build"]) #build-add-btn { display: none; }
#app[data-mode="build"] .more-menu .more-item:not(#build-add-btn) { display: none; }
#app[data-mode="build"] #more-btn { display: inline-flex; }
.build-attached-note { display: block; font-size: .82rem; opacity: .8; margin-bottom: 6px; }
.build-attached-list { display: flex; flex-wrap: wrap; gap: 6px; }
.build-attached { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; font-size: .78rem; background: var(--bg-hover); border-radius: 10px; padding: 4px 8px 4px 4px; overflow-wrap: anywhere; }
.build-attached img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; flex: none; }
.build-attached-icon { width: 32px; height: 32px; display: grid; place-items: center; font-size: 1rem; }

/* ---- Build Phase 2: plan, steps and undo -------------------------------- */
.build-todo { list-style: none; margin: 10px 0; padding: 10px 12px; border: 1px solid var(--border, rgba(127,127,127,.3)); border-radius: var(--radius); background: var(--bg-hover); display: grid; gap: 6px; }
.build-todo-step { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; }
.build-todo-icon { width: 1.2em; flex: none; text-align: center; font-weight: 700; }
.build-todo-step.is-done { opacity: .8; }
.build-todo-step.is-done .build-todo-icon { color: #2e7d32; }
.build-todo-step.is-failed .build-todo-icon { color: #c62828; }
.build-todo-step.is-working { font-weight: 600; }
.build-todo-step.is-working .build-todo-icon { animation: build-spin 1.2s linear infinite; display: inline-block; }
.build-todo-step.is-skipped { opacity: .55; }
@keyframes build-spin { to { transform: rotate(360deg); } }
.build-step-label { margin: 0 0 4px; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; opacity: .7; }

/* ---- Build Phase 5: versions and compare -------------------------------- */
.history-row { align-items: center; gap: 10px; cursor: default; flex-wrap: wrap; }
.history-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-left: auto; }
.history-actions .sheet-go { margin: 0; }
.diff-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 14px 0 6px; font-size: .88rem; overflow-wrap: anywhere; }
.diff-kind { font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; padding: 2px 6px; border-radius: 6px; background: var(--bg-hover); }
.diff-count { margin-left: auto; font-size: .8rem; }
.diff-plus { color: #2e7d32; }
.diff-minus { color: #c62828; }
.diff-lines { font: .76rem/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; border: 1px solid var(--border, rgba(127,127,127,.3)); border-radius: 8px; overflow-x: auto; max-height: 50vh; overflow-y: auto; }
.diff-line { white-space: pre; padding: 0 8px; min-width: max-content; }
.diff-line.is-add { background: rgba(46,125,50,.14); }
.diff-line.is-del { background: rgba(198,40,40,.12); }
.diff-line.is-gap { color: var(--text-faint); text-align: center; }
.diff-sign { display: inline-block; width: 1.2em; opacity: .8; }

/* ---- Editing the page by hand ------------------------------------------- */
.preview-edit { font-weight: 700; }
.preview-edit[aria-pressed="true"] { background: #1a73e8; color: #fff; border-color: #1a73e8; }
.pic-current { display: block; max-width: 100%; max-height: 180px; margin: 0 auto 12px; border-radius: 10px; object-fit: contain; }
.pic-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; margin-bottom: 10px; }
.pic-choice { border: 1px solid var(--border, rgba(127,127,127,.35)); border-radius: 10px; padding: 0; background: var(--bg-hover); aspect-ratio: 1; overflow: hidden; cursor: pointer; font-size: .7rem; color: inherit; }
.pic-choice img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pic-alt { flex: 1; min-width: 0; font: inherit; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border, rgba(127,127,127,.35)); background: transparent; color: inherit; }
.pic-remove { margin-top: 12px; color: #c62828; }

/* ---- Publishing on Grandpa ---------------------------------------------- */
.publish-url { font-weight: 700; overflow-wrap: anywhere; font-size: 1.05rem; }
.publish-qr { display: block; margin: 8px auto 14px; width: 200px; height: 200px; background: #fff; border-radius: 12px; padding: 6px; }
.publish-address { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: .9rem; }
.publish-address span { opacity: .75; }
.build-chip.is-primary { background: var(--gold); color: #1b1408; border-color: var(--gold); font-weight: 700; }

/* Quality check in the publish sheet (Phase G) */
.quality-check { margin: 12px; border: 1px solid var(--line, #e6d8bb); border-radius: 12px; padding: 10px 12px; }
.quality-check summary { cursor: pointer; font-weight: 700; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.quality-scores { display: inline-flex; flex-wrap: wrap; gap: 4px; font-weight: 600; }
.quality-score { font-size: .78rem; padding: 2px 8px; border-radius: 999px; background: #e8f5ec; color: #1e6b3a; }
.quality-score.is-ok { background: #fff4d6; color: #7a5200; }
.quality-score.is-low { background: #fde7e5; color: #9b1c13; }
.quality-list { margin: 10px 0 4px; padding-left: 18px; display: grid; gap: 6px; font-size: .92rem; }
.quality-list li.is-fix strong { color: #b3261e; }
.quality-list li.is-warn strong { color: #8a5a00; }
.quality-list li.is-info strong { color: var(--muted, #6b5346); }

/* Video places waiting for a YouTube link */
.video-places { display: grid; gap: 10px; margin: 8px 0 0; }
.video-place { border: 1px dashed var(--line, #e6d8bb); border-radius: 12px; padding: 10px 12px; display: grid; gap: 8px; justify-items: start; }
.video-place p { margin: 0; }
.video-place .history-actions { width: 100%; }
.video-place input { flex: 1 1 220px; min-width: 0; }

/* Type of project in the conversation card */
.build-recipe { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 8px 0; font-weight: 600; font-size: .92rem; }
.build-recipe select { font: inherit; font-weight: 500; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line, #e6d8bb); background: var(--raised, #fffdf7); color: inherit; max-width: 100%; }

/* Text to speech switched off for now (ENABLE_READ_ALOUD): no speaking controls anywhere */
.no-speech [data-speak], .no-speech .lib-read, .no-speech #speaking-bar, .no-speech #talk-btn,
.no-speech .settings-voice-basics, .no-speech label[for="settings-realvoice"], .no-speech label[for="settings-spoken-accent"],
.no-speech .settings-group:has(#settings-accent) { display: none !important; }

/* Video window: preview videos play here (the preview's sandbox blocks YouTube) */
.video-window { position: fixed; inset: 0; z-index: 1000; background: rgba(10, 6, 4, .82); display: grid; place-content: center; gap: 10px; padding: 16px; }
.video-window-frame { width: min(960px, calc(100vw - 32px)); aspect-ratio: 16 / 9; background: #000; border-radius: 12px; overflow: hidden; }
.video-window-frame iframe { width: 100%; height: 100%; border: 0; }
.video-window-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: #fff; font-weight: 600; }
.video-choices { display: grid; gap: 10px; margin: 8px 0 0; }
.video-choice { display: grid; grid-template-columns: 120px 1fr; gap: 10px; align-items: start; border: 1px solid var(--line, #e6d8bb); border-radius: 12px; padding: 10px; }
.video-choice img { width: 120px; height: 68px; object-fit: cover; border-radius: 8px; background: #000; }
.video-choice strong { display: block; line-height: 1.3; }
.video-choice small { display: block; opacity: .75; margin: 2px 0 6px; }

/* Publishing an app (Phase A1): the "Installable app" choice and the Get the app card */
.publish-app{display:flex;gap:12px;align-items:flex-start;margin:14px 0;padding:12px 14px;border:1px solid var(--line,#d6d3cd);border-radius:14px;cursor:pointer}
.publish-app input{width:22px;height:22px;margin:2px 0 0;flex:none;accent-color:var(--accent,#b45309)}
.publish-app span{display:grid;gap:2px}.publish-app small{opacity:.8;line-height:1.4}
.publish-app-box{margin:14px 0;padding:14px;border-radius:14px;background:var(--tint,rgba(0,0,0,.04))}

/* Phase D4: "Your app's data" on the conversation card */
.build-data-plan{margin:10px 0;padding:10px 12px;border:1px solid var(--line,#d6d3cd);border-radius:12px}
.build-data-plan summary{font-weight:700;cursor:pointer}
.build-data-table{margin:10px 0 0}.build-data-table ul{margin:4px 0;padding-left:20px}.build-data-table small{opacity:.8}