/* FollowUp — a conversational interface onto a private archive.

   The palette is Bastidor's own, taken from bastidor.co: the indigo #221F43,
   the warm greige #E6E0DB, and the pale blue of the drafting lines in the
   logo. The website sets indigo type on greige paper. This inverts it --
   greige on indigo -- because a tool is read for an hour at a stretch where a
   website is read for a minute, and the dark ground was asked for and kept.

   Two rules govern the whole file. Hierarchy comes from spacing and type,
   not from borders and cards. The drafting blue means something is
   interactive or active -- it is never decoration.

   Legibility stays the first constraint: body text is never lighter than
   400, secondary text never smaller than 12.5px, and every pairing below is
   measured against the ground rather than eyeballed.
*/

:root {
  /* Bastidor, as published */
  --indigo:      #221F43;   /* the brand colour, and this app's ground */
  --greige:      #E6E0DB;   /* the paper bastidor.co prints on */
  --drafting:    #A4D5EE;   /* the construction lines in the logo */

  --bg:          #221F43;   /* the indigo itself */
  --bg-raised:   #1A1836;   /* sidebar and panels: the same hue, set back */
  --bg-hover:    #2E2A57;
  --bg-active:   #383264;

  /* Contrast against --bg, measured: 12.0 : 1, 8.1 : 1, 4.9 : 1 */
  --ink:         #E6E0DB;
  --ink-2:       #BDB7CE;
  --ink-3:       #928DAA;

  --rule:        #322F55;
  --rule-strong: #46426E;

  --accent:      #A4D5EE;   /* 9.9 : 1 on the ground */
  --accent-dim:  #7FB4D4;
  --accent-wash: #2A2C55;
  --accent-ink:  #1A1836;   /* type placed on top of the accent */

  --danger:      #E4785F;

  --brand: "Poppins", "IBM Plex Sans", system-ui, sans-serif;
  --serif: "Newsreader", Georgia, serif;
  --sans:  "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, monospace;

  --side:    272px;
  --panel:   360px;
  --column:  720px;
  --radius:  12px;

  color-scheme: dark;
}

/* Light: the same three Bastidor colours the other way up -- the greige
   becomes the paper and the indigo becomes the ink, which is how bastidor.co
   itself is set. Only the tokens change; nothing below this block knows which
   theme is running.

   The accent cannot simply invert. #A4D5EE is a pale blue built to glow on a
   dark ground and it disappears on paper, so light mode uses a deeper draw of
   the same hue. Every pairing is measured against its own background. */
:root[data-theme="light"] {
  color-scheme: light;

  --bg:          #EFEBE6;   /* the reading surface */
  --bg-raised:   #E2DBD3;   /* sidebar and panels: the greige, set back */
  --bg-hover:    #D8D0C7;
  --bg-active:   #CCC3B8;

  /* Contrast on --bg: 13.3 : 1, 7.4 : 1, 5.5 : 1 */
  --ink:         #221F43;
  --ink-2:       #4A4670;
  --ink-3:       #5F5B80;

  --rule:        #D3CCC3;
  --rule-strong: #B9B0A5;

  --accent:      #2A5D80;   /* 5.9 : 1 on the ground */
  --accent-dim:  #1F4763;
  --accent-wash: #D8E5EE;
  --accent-ink:  #F3F0EC;

  --danger:      #A8412B;
}

*, *::before, *::after { box-sizing: border-box; }

/* Several regions below set `display`, which would otherwise beat the
   `hidden` attribute the interface uses to switch views. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

button, input, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--accent-wash); color: var(--ink); }

/* ─────────────────────────── shell ─────────────────────────── */

.app {
  display: grid;
  grid-template-columns: var(--side) minmax(0, 1fr);
  height: 100dvh;
  overflow: hidden;
  transition: grid-template-columns .22s ease;
}

.app.side-collapsed { grid-template-columns: 64px minmax(0, 1fr); }
.app.has-panel      { grid-template-columns: var(--side) minmax(0, 1fr) var(--panel); }
.app.side-collapsed.has-panel { grid-template-columns: 64px minmax(0, 1fr) var(--panel); }

.scrim {
  position: fixed;
  inset: 0;
  z-index: 40;
  border: 0;
  background: rgba(0, 0, 0, .55);
}

/* ─────────────────────────── sidebar ─────────────────────────── */

.side {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 20px 12px 14px;
  background: var(--bg-raised);
  border-right: 1px solid var(--rule);
}

.side__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px 18px;
}

.wordmark {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.05;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark__name {
  font-family: var(--brand);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: .015em;
}
.wordmark__tail { color: var(--accent); }

/* The byline is set in the serif italic rather than the geometric sans: it is
   a signature, not a second brand, and it should read as one. */
.wordmark__by {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 12.5px;
  letter-spacing: .02em;
  color: var(--ink-3);
  padding-left: .1em;
}

.wordmark--lg { align-items: center; gap: 3px; }
.wordmark--lg .wordmark__name { font-size: 36px; letter-spacing: .01em; }
.wordmark--lg .wordmark__by { font-size: 15px; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.icon-btn:hover { background: var(--bg-hover); color: var(--ink); }

.new-chat {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 22px;
  border: 1px solid var(--rule-strong);
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.new-chat:hover {
  border-color: var(--accent-dim);
  background: var(--accent-wash);
  color: var(--accent);
}
.new-chat svg { flex: none; }

.nav { display: flex; flex-direction: column; gap: 2px; }

.nav__item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-2);
  font-size: 14.5px;
  text-align: left;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.nav__item svg { flex: none; opacity: .8; }
.nav__item:hover { background: var(--bg-hover); color: var(--ink); }
.nav__item.is-active { color: var(--accent); background: var(--accent-wash); }
.nav__item.is-active svg { opacity: 1; }

.recents {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin-top: 24px;
  padding-right: 2px;
  scrollbar-width: thin;
  scrollbar-color: var(--rule-strong) transparent;
}
.recents::-webkit-scrollbar { width: 8px; }
.recents::-webkit-scrollbar-thumb {
  background: var(--rule-strong);
  border-radius: 4px;
}

.recents__group + .recents__group { margin-top: 18px; }

.recents__label {
  display: block;
  padding: 0 12px 6px;
  color: var(--ink-3);
  font-size: 12.5px;
  font-weight: 500;
}

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

.recents__item {
  display: flex;
  align-items: center;
  border-radius: 8px;
  transition: background .15s ease;
}
.recents__item:hover { background: var(--bg-hover); }
.recents__item.is-active { background: var(--bg-active); }
.recents__item.is-active .recents__open { color: var(--accent); }

.recents__open {
  flex: 1;
  min-width: 0;
  padding: 7px 4px 7px 12px;
  border: 0;
  background: none;
  color: var(--ink-2);
  font-size: 14px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.recents__delete {
  flex: none;
  width: 26px;
  height: 26px;
  margin-right: 5px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--ink-3);
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s ease, color .15s ease;
}
.recents__item:hover .recents__delete { opacity: 1; }
.recents__delete:hover { color: var(--danger); }
.recents__delete:focus-visible { opacity: 1; }

.recents__empty {
  margin: 8px 12px;
  color: var(--ink-3);
  font-size: 13.5px;
}

.side__foot { padding-top: 12px; border-top: 1px solid var(--rule); }

.who {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--ink-2);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: background .15s ease;
}
.who:hover { background: var(--bg-hover); color: var(--ink); }

.who__mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: var(--accent-wash);
  color: var(--accent);
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 500;
}

/* collapsed sidebar keeps the icons and hides the words */
.side-collapsed .side__top { justify-content: center; }
.side-collapsed .wordmark,
.side-collapsed .new-chat span,
.side-collapsed .nav__item span,
.side-collapsed .recents,
.side-collapsed .who__name,
.side-collapsed .wordmark__by,
.side-collapsed .client__text { display: none; }
.side-collapsed .client { justify-content: center; padding-inline: 0; }
.side-collapsed .new-chat,
.side-collapsed .nav__item,
.side-collapsed .who { justify-content: center; padding-inline: 0; }
.side-collapsed .side { padding-inline: 8px; }

/* ─────────────────────────── main ─────────────────────────── */

.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.topbar {
  display: none;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 14px;
  border-bottom: 1px solid var(--rule);
}
.topbar__title {
  font-size: 14.5px;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─────────────────────────── welcome ─────────────────────────── */

.welcome {
  display: grid;
  place-items: center;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 32px 24px 64px;
}

.welcome__inner { width: 100%; max-width: var(--column); }

.welcome__greet {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(30px, 4.4vw, 42px);
  font-weight: 400;
  letter-spacing: -.015em;
  line-height: 1.2;
}

.welcome__sub {
  margin: 6px 0 34px;
  font-family: var(--serif);
  font-size: clamp(21px, 2.6vw, 27px);
  font-weight: 400;
  color: var(--ink-3);
  line-height: 1.3;
}

.examples { margin-top: 26px; }

.examples__label {
  display: block;
  margin-bottom: 12px;
  color: var(--ink-3);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.examples__list { display: flex; flex-wrap: wrap; gap: 8px; }

.examples__list button {
  padding: 8px 14px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.examples__list button:hover {
  border-color: var(--accent-dim);
  background: var(--accent-wash);
  color: var(--accent);
}

/* ─────────────────────────── conversation ─────────────────────────── */

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

.chat__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--rule-strong) transparent;
}
.chat__scroll::-webkit-scrollbar { width: 10px; }
.chat__scroll::-webkit-scrollbar-thumb {
  background: var(--rule-strong);
  border-radius: 5px;
}

.chat__column {
  max-width: var(--column);
  margin: 0 auto;
  padding: 40px 24px 8px;
}

.chat__foot {
  padding: 10px 24px 22px;
  background: linear-gradient(to top, var(--bg) 62%, transparent);
}
.chat__foot .composer-slot { max-width: var(--column); margin: 0 auto; }

.msg { animation: rise .24s ease both; }
.msg + .msg { margin-top: 30px; }

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

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

/* the question: contained and right-aligned, so the eye finds it quickly */
.msg--user { display: flex; justify-content: flex-end; }

.msg__bubble {
  max-width: 82%;
  padding: 11px 16px;
  border-radius: 14px 14px 4px 14px;
  background: var(--bg-active);
  color: var(--ink);
  font-size: 15.5px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* the answer: an open document, not a bubble */
.msg__who {
  margin-bottom: 9px;
  font-family: var(--serif);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: .01em;
}

.msg__body { overflow-wrap: anywhere; }

.prose { color: var(--ink); }
.prose > :first-child { margin-top: 0; }
.prose > :last-child  { margin-bottom: 0; }
.prose p { margin: 0 0 14px; }
.prose strong { font-weight: 600; color: var(--ink); }
.prose em { font-style: italic; color: var(--ink-2); }

.prose h2, .prose h3, .prose h4, .prose h5 {
  margin: 26px 0 10px;
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -.005em;
  line-height: 1.28;
}
.prose h2 { font-size: 23px; }
.prose h3 { font-size: 20px; }
.prose h4, .prose h5 { font-size: 17.5px; }

.prose ul, .prose ol { margin: 0 0 14px; padding-left: 22px; }
.prose li { margin-bottom: 6px; }
.prose li::marker { color: var(--ink-3); }

.prose code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--bg-raised);
  font-family: var(--mono);
  font-size: .88em;
}

/* waiting */
.stage {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: var(--ink-3);
  font-size: 14.5px;
}

.stage__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 1.25s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: .3; transform: scale(.8); }
  50%      { opacity: 1;  transform: scale(1); }
}

/* sources */
.sources { margin-top: 20px; }

.sources__toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px 5px 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink-3);
  font-size: 13.5px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.sources__toggle:hover { background: var(--bg-hover); color: var(--ink-2); }
.sources__toggle .chev { transition: transform .18s ease; }
.sources__toggle[aria-expanded="true"] .chev { transform: rotate(90deg); }
.sources__toggle[aria-expanded="true"] { color: var(--accent); }

.sources__list { margin: 8px 0 0; padding: 0; list-style: none; }
.sources__list li + li { margin-top: 2px; }

.source {
  display: flex;
  gap: 11px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background .15s ease;
}
.source:hover { background: var(--bg-hover); }

.source__n {
  flex: none;
  min-width: 19px;
  height: 19px;
  border-radius: 5px;
  background: var(--accent-wash);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 19px;
  text-align: center;
}

.source__text { min-width: 0; }

.source__subject {
  display: block;
  color: var(--ink-2);
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.source__meta {
  display: block;
  margin-top: 1px;
  color: var(--ink-3);
  font-size: 12.5px;
}

/* actions under an answer — copy, mostly for pasting into mail to the client */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 18px;
}

.action {
  padding: 5px 11px;
  border: 1px solid var(--rule);
  border-radius: 7px;
  background: transparent;
  color: var(--ink-3);
  font-size: 13px;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.action:hover { border-color: var(--rule-strong); color: var(--ink-2); }
.action.is-done { border-color: var(--accent-dim); color: var(--accent); }
.action.is-failed { border-color: var(--danger); color: var(--danger); }

/* a conversation still waiting for its answer */
.recents__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: middle;
  animation: pulse 1.25s ease-in-out infinite;
}
.recents__item.is-waiting .recents__open { color: var(--ink); }

/* follow-ups */
.followups { margin-top: 22px; }

.followups__label {
  display: block;
  margin-bottom: 9px;
  color: var(--ink-3);
  font-size: 12.5px;
  font-weight: 500;
}

.followups__list { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }

.followup {
  max-width: 100%;
  padding: 7px 13px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.followup:hover {
  border-color: var(--accent-dim);
  background: var(--accent-wash);
  color: var(--accent);
}

/* failure, attached to the message that failed */
.failure { margin: 0 0 10px; color: var(--danger); font-size: 15px; }

.failure__actions { display: flex; gap: 8px; }

.failure__actions button {
  padding: 6px 12px;
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  background: transparent;
  color: var(--ink-2);
  font-size: 13.5px;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.failure__actions button:hover { border-color: var(--accent-dim); color: var(--accent); }

.failure__trace {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--bg-raised);
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 12.5px;
  white-space: pre-wrap;
  overflow-x: auto;
}

.limit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 30px;
  padding: 14px 16px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.limit p { margin: 0; color: var(--ink-2); font-size: 14.5px; }
.limit button {
  padding: 7px 14px;
  border: 1px solid var(--accent-dim);
  border-radius: 8px;
  background: var(--accent-wash);
  color: var(--accent);
  font-size: 14px;
  cursor: pointer;
}

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

.composer {
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--bg-raised);
  transition: border-color .16s ease;
}
.composer:focus-within { border-color: var(--accent-dim); }

.composer__input {
  display: block;
  width: 100%;
  min-height: 26px;
  max-height: 220px;
  padding: 15px 16px 4px;
  border: 0;
  background: none;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.55;
  resize: none;
  overflow-y: auto;
}
.composer__input:focus { outline: none; }
.composer__input::placeholder { color: var(--ink-3); }

.composer__bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  padding: 4px 8px 8px;
}

.composer__mic.is-listening { color: var(--accent); background: var(--accent-wash); }

.composer__send {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 9px;
  background: var(--accent);
  color: var(--accent-ink);
  cursor: pointer;
  transition: background .15s ease, opacity .15s ease;
}
.composer__send:disabled {
  background: var(--bg-active);
  color: var(--ink-3);
  cursor: default;
}
.composer__send:not(:disabled):hover { background: var(--accent-dim); }

/* while answering, the send control becomes a stop control */
.composer.is-busy .composer__send { background: var(--bg-active); color: var(--ink); }
.composer.is-busy .composer__send svg { display: none; }
.composer.is-busy .composer__send::after {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 2px;
  background: currentColor;
}

/* ─────────────────────────── history view ─────────────────────────── */

.history { flex: 1; min-height: 0; overflow-y: auto; padding: 40px 24px 60px; }

.history__inner { max-width: var(--column); margin: 0 auto; }

.history__title {
  margin: 0 0 18px;
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 400;
  letter-spacing: -.015em;
}

.history__search {
  width: 100%;
  padding: 11px 14px;
  margin-bottom: 30px;
  border: 1px solid var(--rule-strong);
  border-radius: 10px;
  background: var(--bg-raised);
  color: var(--ink);
  font-size: 15px;
}
.history__search:focus { outline: none; border-color: var(--accent-dim); }
.history__search::placeholder { color: var(--ink-3); }

.history__group + .history__group { margin-top: 30px; }

.history__label {
  margin: 0 0 8px;
  color: var(--ink-3);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
}

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

.history__item {
  display: flex;
  align-items: center;
  border-radius: 9px;
  transition: background .15s ease;
}
.history__item:hover { background: var(--bg-hover); }

.history__open {
  flex: 1;
  min-width: 0;
  padding: 11px 12px;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}

.history__name {
  display: block;
  color: var(--ink);
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.history__meta {
  display: block;
  margin-top: 2px;
  color: var(--ink-3);
  font-size: 12.5px;
}

.history__delete {
  flex: none;
  width: 30px;
  height: 30px;
  margin-right: 8px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--ink-3);
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s ease, color .15s ease;
}
.history__item:hover .history__delete { opacity: 1; }
.history__delete:hover { color: var(--danger); }
.history__delete:focus-visible { opacity: 1; }

.history__empty { color: var(--ink-3); font-size: 14.5px; }

/* ─────────────────────────── source panel ─────────────────────────── */

.panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg-raised);
  border-left: 1px solid var(--rule);
  animation: slide .2s ease both;
}

@keyframes slide {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: none; }
}

.panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 14px 12px 20px;
  border-bottom: 1px solid var(--rule);
}

.panel__label {
  color: var(--ink-3);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.panel__body { flex: 1; min-height: 0; overflow-y: auto; padding: 20px; }

.panel__rows { margin: 0; }

.panel__row + .panel__row { margin-top: 15px; }

.panel__row dt {
  margin-bottom: 2px;
  color: var(--ink-3);
  font-size: 12.5px;
  font-weight: 500;
}

.panel__row dd {
  margin: 0;
  color: var(--ink);
  font-size: 14.5px;
  overflow-wrap: anywhere;
}

.panel__summary { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--rule); }
.panel__summary p { margin: 6px 0 0; color: var(--ink-2); font-size: 14.5px; }

.panel__open {
  display: inline-block;
  margin-top: 22px;
  padding: 8px 14px;
  border: 1px solid var(--accent-dim);
  border-radius: 8px;
  color: var(--accent);
  font-size: 14px;
  text-decoration: none;
  transition: background .15s ease;
}
.panel__open:hover { background: var(--accent-wash); }

.panel__note { margin: 22px 0 0; color: var(--ink-3); font-size: 13px; }

/* ─────────────────────────── responsive ─────────────────────────── */

@media (max-width: 1180px) {
  .app.has-panel { grid-template-columns: var(--side) minmax(0, 1fr); }
  .app.side-collapsed.has-panel { grid-template-columns: 64px minmax(0, 1fr); }
  .panel {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 50;
    width: min(var(--panel), 92vw);
    height: 100dvh;
    box-shadow: -18px 0 48px rgba(0, 0, 0, .5);
  }
}

@media (max-width: 860px) {
  .app,
  .app.side-collapsed,
  .app.has-panel { grid-template-columns: minmax(0, 1fr); }

  .side {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 45;
    width: min(300px, 84vw);
    height: 100dvh;
    transform: translateX(-100%);
    transition: transform .22s ease;
  }
  .app.side-open .side { transform: none; }
  .side-collapsed .side { padding-inline: 12px; }
  .side-collapsed .wordmark,
  .side-collapsed .new-chat span,
  .side-collapsed .nav__item span,
  .side-collapsed .recents,
  .side-collapsed .who__name { display: revert; }
  .side__collapse { display: none; }

  .topbar { display: flex; }

  .welcome { padding: 24px 18px 48px; place-items: start center; padding-top: 12vh; }
  .chat__column { padding: 26px 18px 8px; }
  .chat__foot { padding: 8px 14px 14px; }
  .history { padding: 26px 18px 48px; }

  .msg__bubble { max-width: 92%; }
  .followups__list { align-items: stretch; }
}

@media (max-width: 520px) {
  body { font-size: 16px; }
  .welcome__greet { font-size: 27px; }
  .welcome__sub { font-size: 19px; margin-bottom: 26px; }
  .examples__list { flex-direction: column; }
  .examples__list button { width: 100%; }
}

/* ─────────────────────────── login ─────────────────────────── */

.gate {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: 24px;
}

.gate__panel { width: 100%; max-width: 380px; text-align: center; }

.gate__mark { font-size: 34px; }

.gate__sub {
  margin: 8px 0 34px;
  color: var(--ink-3);
  font-size: 14px;
}

.gate__form { display: flex; flex-direction: column; gap: 10px; text-align: left; }

.gate__label {
  color: var(--ink-3);
  font-size: 12.5px;
  font-weight: 500;
}

.gate__input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--rule-strong);
  border-radius: 10px;
  background: var(--bg-raised);
  color: var(--ink);
  font-size: 16px;
}
.gate__input:focus { outline: none; border-color: var(--accent-dim); }

.gate__submit {
  margin-top: 4px;
  padding: 12px 16px;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s ease;
}
.gate__submit:hover { background: var(--accent-dim); }

.gate__error {
  margin: 0 0 18px;
  padding: 10px 14px;
  border: 1px solid var(--danger);
  border-radius: 9px;
  color: var(--danger);
  font-size: 14px;
}

.gate__note {
  margin-top: 28px;
  color: var(--ink-3);
  font-size: 12.5px;
  line-height: 1.5;
}

/* sign-out sits with the profile control rather than in the conversation */
.who__out {
  flex: none;
  padding: 4px 8px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--ink-3);
  font-size: 12.5px;
  cursor: pointer;
}
.who__out:hover { color: var(--danger); }

.side__foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.side-collapsed .who__out { display: none; }

/* ─────────────────────── Bastidor mark ─────────────────────── */

/* Drawn, not embedded, so it takes the interface colour. Strokes do not scale
   with the artwork: the published mark's hairlines work at 200px and vanish at
   30px, and this sits at 30px in the sidebar. */
.bastidor { display: block; width: 100%; height: 100%; }
.bastidor path,
.bastidor rect { vector-effect: non-scaling-stroke; }
/* Monochrome by default. At 30px the pale blue on nine crossing lines turns
   to fuzz, so the small mark keeps the single ink it always had. */
.bastidor__guides { stroke: currentColor; opacity: .6; stroke-width: .7px; }

/* Large mark only. Here the construction lines carry the pale blue, which is
   what gives the mark its depth and where the light blue in the rest of the
   palette comes from. A fixed brand colour rather than a themed token: the
   same blue on the indigo ground and on the greige, as published. */
.gate__client .bastidor__guides { stroke: var(--drafting); opacity: 1; }
.bastidor__frame  { stroke: currentColor; stroke-width: 1px; }
.bastidor__word text {
  fill: currentColor;
  font-family: var(--brand);
  font-weight: 600;
  font-size: 404px;
  letter-spacing: 0;
}

/* Whose archive this is. Sits above the account row, always visible. */
.client {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  margin: 0 0 12px;
  padding: 0 8px 14px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-2);
}
.client .bastidor { flex: none; width: 30px; height: 30px; }
.client__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.client__name {
  font-family: var(--brand);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.client__sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 12.5px;
  color: var(--ink-3);
}

/* ─────────────────────── archive tally ─────────────────────── */

/* The size of the archive, on the welcome screen rather than behind a click.
   It is a quiet line, but it is the one number worth seeing every time. */
.tally {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 28px;
  padding: 6px 12px 6px 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--ink-3);
  font-family: var(--sans);
  font-size: 13.5px;
  cursor: pointer;
  transition: color .15s ease;
}
.tally:hover { color: var(--ink-2); }
.tally:hover .tally__n { color: var(--accent); }
.tally__n {
  font-family: var(--brand);
  font-size: 21px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  transition: color .15s ease;
}
.tally__word { font-size: 14px; color: var(--ink-2); }
.tally__sep {
  align-self: center;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--rule-strong);
}
.tally__span { font-variant-numeric: tabular-nums; }

/* ─────────────────────────── modal ─────────────────────────── */

.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 24px;
}
.modal__scrim {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(10, 9, 24, .74);
}
.modal__box {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 640px;
  max-height: min(86dvh, 800px);
  overflow: hidden;
  background: var(--bg-raised);
  border: 1px solid var(--rule);
  border-radius: 16px;
  box-shadow: 0 26px 70px rgba(0, 0, 0, .55);
}
.modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 17px 18px 14px 22px;
  border-bottom: 1px solid var(--rule);
}
.modal__title {
  margin: 0;
  font-family: var(--brand);
  font-size: 17px;
  font-weight: 600;
}
.modal__body { padding: 22px; overflow-y: auto; }

/* ─────────────────── the archive, in numbers ─────────────────── */

.figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 3px;
}
.figure { padding: 13px 15px; background: var(--bg); border-radius: 10px; }
.figure__n {
  display: block;
  font-family: var(--brand);
  font-size: 25px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.figure__l { display: block; margin-top: 4px; font-size: 12.5px; color: var(--ink-3); }

.arch-sec { margin-top: 28px; }
.arch-h {
  margin: 0 0 13px;
  font-family: var(--brand);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.arch-note { margin: 18px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }

.years { display: flex; flex-direction: column; gap: 6px; }
.year {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 66px;
  align-items: center;
  gap: 12px;
}
.year__y {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.year__track { height: 10px; background: var(--bg); border-radius: 5px; overflow: hidden; }
.year__bar {
  height: 100%;
  min-width: 2px;
  border-radius: 5px;
  background: var(--accent);
  opacity: .85;
}
.year__n {
  text-align: right;
  font-size: 13px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.boxes { display: flex; flex-direction: column; gap: 3px; }
.box {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 15px;
  background: var(--bg);
  border-radius: 10px;
}
.box__text { min-width: 0; }
.box__name { font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }
.box__meta { margin-top: 2px; font-size: 12.5px; color: var(--ink-3); }
.box__n {
  flex: none;
  font-family: var(--brand);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ─────────────────────── login page ─────────────────────── */

.gate__client { display: flex; justify-content: center; margin-bottom: 24px; }
.gate__client .bastidor { width: 92px; height: 92px; color: var(--ink); }

@media (max-width: 560px) {
  .modal { padding: 0; place-items: end stretch; }
  .modal__box { max-width: none; max-height: 92dvh; border-radius: 16px 16px 0 0; }
  .year { grid-template-columns: 38px minmax(0, 1fr) 58px; gap: 9px; }
  .box { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ─────────────────────── theme toggle ─────────────────────── */

.theme-toggle { flex: none; color: var(--ink-3); }
.theme-toggle:hover { color: var(--accent); background: var(--bg-hover); }
/* Each icon shows the theme you would switch *to*, which is the convention
   people already expect from every other tool they use. */
:root:not([data-theme="light"]) .theme-toggle__moon,
:root[data-theme="light"] .theme-toggle__sun { display: none; }

.gate__theme {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 5;
}

@media (prefers-reduced-motion: no-preference) {
  body { transition: background-color .18s ease, color .18s ease; }
}

/* ─────────────────────── memory ─────────────────────── */

/* An offer, not an alert. It sits after the sources because it belongs to what
   was just said, and it has to be easy to decline -- a prompt that nags gets
   answered carelessly, and a carelessly filled memory is worse than none. */
.memo {
  margin-top: 22px;
  padding: 14px 16px;
  background: var(--accent-wash);
  border-radius: 12px;
}
.memo__lead { margin: 0 0 6px; font-size: 13px; color: var(--ink-2); }
.memo__fact {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.45;
  color: var(--ink);
}
.memo__row { display: flex; align-items: center; gap: 8px; }
.memo__yes {
  padding: 7px 16px;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
}
.memo__yes:hover { background: var(--accent-dim); }
.memo__yes[disabled] { opacity: .6; cursor: default; }
.memo__no {
  padding: 7px 12px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--ink-3);
  font-size: 13.5px;
  cursor: pointer;
}
.memo__no:hover { color: var(--ink-2); background: var(--bg-hover); }
.memo__note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-3); }

/* Once answered it stops being a card and becomes a quiet line of record. */
.memo--saved {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 12px 0 0;
  background: none;
}
.memo__tick { color: var(--accent); }
.memo__saved { font-size: 13.5px; color: var(--ink-3); }

.facts { display: flex; flex-direction: column; gap: 3px; }
.fact {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 15px;
  background: var(--bg);
  border-radius: 10px;
}
.fact__text { display: flex; flex-direction: column; min-width: 0; }
.fact__body { font-size: 14px; line-height: 1.45; color: var(--ink); }
.fact__meta { margin-top: 3px; font-size: 12.5px; color: var(--ink-3); }
.fact__forget {
  flex: none;
  padding: 4px 9px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--ink-3);
  font-size: 12.5px;
  cursor: pointer;
}
.fact__forget:hover { color: var(--danger); background: var(--bg-hover); }