/* Forge chat shell. Tokens drive light and dark; agent accent colors appear only in dots and markers. */

:root {
  /* canvas + surface: a cool blue-grey canvas so white cards read as distinct sections */
  --bg: #EDF1F7;
  --bg-elev: #FFFFFF;
  --surface: #FFFFFF;
  --hairline: #D5DEEA;
  --shadow: 0 1px 2px rgba(15, 40, 90, .06), 0 10px 26px rgba(15, 40, 90, .10);
  --shadow-soft: 0 1px 2px rgba(15, 40, 90, .05), 0 4px 14px rgba(15, 40, 90, .07);
  /* text */
  --text: #1F2430;
  --muted: #5B6472;
  --faint: #9AA4B2;
  /* brand */
  --brand: #00558C;
  --brand-int: #007AC9;
  --brand-soft: #E1EFFA;
  --success: #2E9E5B;
  --success-soft: #E7F5ED;
  --warn: #B45309;
  --warn-soft: #FCF0E4;
  /* form */
  --radius-bubble: 16px;
  --radius-card: 12px;
  --radius-pill: 999px;
  /* The conversation column scales with the window up to --read-cap. --read-cap is the dial; --maxw is derived.
     Prose fills the column; the width mostly serves tables, code and the answer foot. */
  --read-cap: 1440px;

  --maxw: min(var(--read-cap), 97%);

  /* Derived from the accent alone, so both stops stay one hue whatever a door declares. Every use sets a flat
     var(--brand-int) first for browsers without color-mix. */
  --brand-grad: linear-gradient(180deg, var(--brand-int), color-mix(in oklab, var(--brand-int) 76%, #000));
  --font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  /* One type scale in rem, so sizes honor the user's browser font size. Do not add off-scale values. */
  --fs-2xs: max(12px, 0.6875rem); /* the floor: kickers, badges, counts. Never below 12px on any root */
  --fs-xs: 0.75rem;    /* 12px: labels, chips, meta, captions, step trace */
  --fs-sm: 0.875rem;   /* 14px: rail items, card body, secondary text */
  --fs-base: 1rem;     /* 16px: conversation text, inputs, buttons */
  --fs-lg: 1.125rem;   /* 18px: card / section titles */
  --fs-xl: 1.375rem;   /* 22px: hero heading */
  --motion: 180ms cubic-bezier(.2, .6, .2, 1);
  --motion-slow: 320ms cubic-bezier(.2, .6, .2, 1);
}

[data-theme="dark"] {
  --bg: #0E1116;
  --bg-elev: #161A20;
  --surface: #161A20;
  --hairline: #252A32;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .28);
  --text: #E7EAF0;
  --muted: #9AA4B2;
  --faint: #6B7480;
  --brand: #2E86C4;        /* lift navy for contrast on dark */
  --brand-int: #3FA0DC;
  --brand-soft: #12324A;
  --success: #4FB87A;
  --success-soft: #14241B;
  --warn: #E9A23B;         /* lift amber for contrast on dark */
  --warn-soft: #2A1E0C;
}

/* A collapsed rail can widen the column. Set on the root because --maxw resolves var(--read-cap) at :root. */
:root.rails-roomy { --read-cap: 1440px; }

@media (prefers-reduced-motion: reduce) {
  :root { --motion: 0ms; --motion-slow: 0ms; }
}

* { box-sizing: border-box; }

html, body { height: 100%; }
/* The root is the one dial for the whole UI. A percentage so the user's browser font setting still multiplies
   through. Not `zoom`: it does not scale viewport units, which breaks 100dvh and fixed inset: 0 overlays. */
html { font-size: 110%; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  height: 100dvh;
}

/* ---------- header ---------- */
header.app {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 22px;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--hairline);
}
/* min-width: 0 so the lockup can shrink; without it a long door name grows the header instead. */
.brand-lockup { display: flex; align-items: center; gap: 13px; min-width: 0; }
.brand-logo { height: 27px; width: auto; display: block; }
/* The page's only way out, so it takes a real focus ring even though it is quiet at rest. */
.brand-home { display: inline-flex; align-items: center; border-radius: 6px; padding: 2px; margin: -2px;
  transition: opacity var(--motion); }
.brand-home:hover { opacity: .7; }
.brand-home:focus-visible { outline: 2px solid var(--brand-int); outline-offset: 2px; }
.brand-div { width: 1px; height: 21px; background: var(--hairline); flex: none; }
/* One line always: a two-line header pushes the composer and log down. */
.brand-name { font-weight: 650; letter-spacing: -.005em; font-size: var(--fs-base); color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.brand-name .soft { color: var(--muted); font-weight: 500; }
.brand-platform {
  font-size: var(--fs-2xs); letter-spacing: .1em; text-transform: uppercase; font-weight: 650;
  color: var(--faint); border: 1px solid var(--hairline); border-radius: var(--radius-pill);
  padding: 2px 7px; margin-left: 10px; white-space: nowrap;
}
.theme-toggle {
  border: 1px solid var(--hairline); background: var(--surface); color: var(--muted);
  width: 34px; height: 34px; border-radius: var(--radius-pill); cursor: pointer;
  display: grid; place-items: center; transition: background var(--motion), color var(--motion);
}
.theme-toggle:hover { color: var(--text); background: var(--brand-soft); }

/* ---------- profile ----------
   Deliberately identical to landing.css, so the same control looks the same on both pages. */
.header-actions { display: flex; align-items: center; gap: 10px; }
.profile-btn {
  display: flex; align-items: center; gap: 9px; background: var(--surface);
  border: 1px solid var(--hairline); border-radius: var(--radius-pill);
  padding: 4px 13px 4px 4px; cursor: pointer; color: inherit; font: inherit;
  transition: background var(--motion), border-color var(--motion);
}
.profile-btn:hover { background: var(--brand-soft); border-color: var(--brand-int); }
.profile-name { font-size: var(--fs-sm); font-weight: 580; }
.avatar {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none;
  font-size: 10px; font-weight: 700; letter-spacing: .02em; color: #fff;
  background: linear-gradient(180deg, var(--brand-int), color-mix(in oklab, var(--brand-int) 76%, #000));
}
.avatar.lg { width: 42px; height: 42px; font-size: 13px; }

/* z-index outranks the header (10) and the rails, and sits under the palette's modal layer. */
.profile-panel {
  position: fixed; top: 62px; right: 22px; z-index: 30; width: min(340px, calc(100vw - 32px));
  background: var(--bg-elev); border: 1px solid var(--hairline); border-radius: var(--radius-card);
  box-shadow: 0 20px 56px rgba(10, 25, 55, .26); padding: 17px;
}
.pp-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; }
.pp-name { font-weight: 650; letter-spacing: -.01em; }
.pp-title { color: var(--muted); font-size: var(--fs-xs); margin-top: 2px; }
.pp-rows { margin: 0; padding: 14px 0 4px; border-top: 1px solid var(--hairline); display: grid; gap: 10px; }
.pp-rows dt {
  font-size: var(--fs-2xs); letter-spacing: .1em; text-transform: uppercase; font-weight: 650; color: var(--faint);
}
.pp-rows dd { margin: 2px 0 0; font-size: var(--fs-sm); }
.pp-rows dd.unset { color: var(--faint); font-style: italic; }
.pp-signout {
  margin-top: 15px; width: 100%; padding: 9px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--hairline); background: var(--surface); color: var(--text); font: inherit;
  font-size: var(--fs-sm); transition: background var(--motion), border-color var(--motion);
}
.pp-signout:hover { border-color: var(--brand-int); background: var(--brand-soft); }

/* The name goes first when the header runs out of room; the avatar still says who you are. */
@media (max-width: 620px) {
  .profile-name { display: none; }
  .profile-btn { padding: 4px; }
  /* Then the platform mark, then the door name's trailing word. The pre-resolve placeholder is exempt, or
     the header goes blank until /me/door lands. */
  .brand-platform { display: none; }
  .brand-name .soft:not(.brand-neutral) { display: none; }
}

/* ---------- two-zone shell: single left sidebar (tasks/links/status) | center chat ---------- */
.shell { flex: 1; display: flex; min-height: 0; }
/* Framed inside a Foundry challenge (chat.js EMBED): the conversation only. */
html.embed header.app, html.embed .rail { display: none !important; }
/* A lesson's chat is the composer and the conversation only. !important because the page un-hides several of these. */
html.embed #empty, html.embed #askBtn, html.embed .tl-wrap, html.embed #gdChip, html.embed #gdNote, html.embed #capacity, html.embed .aud-wrap, html.embed #verdictSheet,
html.embed #outages { display: none !important; }
/* In a lesson the page scrolls, not the chat: the chat reports its natural height (chat.js forge:height). */
html.embed, html.embed body { height: auto !important; min-height: 0 !important; }
html.embed body { background: transparent; }
html.embed .shell, html.embed .center, html.embed main { display: block !important; flex: none !important; min-height: 0 !important; overflow: visible !important; }
html.embed #log { max-width: none; padding: 4px 0 8px; }
html.embed form.composer-wrap { padding: 8px 0 2px; }
/* A Foundry lesson's spotlight (chat.js FOUNDRY_SPOT). Embed only. */
html.embed .is-spot { color: var(--brand-int); border-color: var(--brand-int); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-int) 28%, transparent); animation: forge-spot 1.6s ease-in-out infinite; }
@keyframes forge-spot { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand-int) 12%, transparent); } }
@media (prefers-reduced-motion: reduce) { html.embed .is-spot { animation: none; } }
.center { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }

/* The rail frame resizes; padding and scrolling live on .rail-full, whose fixed px width keeps labels from
   re-wrapping on every frame of the collapse. */
.rail {
  width: 320px; flex: none; overflow: hidden;
  display: flex; flex-direction: column;
  border-right: 1px solid var(--hairline);
  transition: width var(--motion-slow);
}
.rail.is-collapsed { width: 56px; }
.rail-full {
  /* 320px: the rail is fixed px while its contents are rem, so narrower would wrap long link labels. */
  width: 320px; flex: 1; min-height: 0; overflow-y: auto; padding: 22px 18px;
  display: flex; flex-direction: column; gap: 26px;
}

/* Each rail's collapse control points outward, toward the edge it travels to. */
.rail-head { display: flex; align-items: center; gap: 2px; min-height: 30px; margin-bottom: 8px; }
.rail-head .rail-label {
  flex: 1; min-width: 0; padding-left: 5px; font-size: var(--fs-sm); font-weight: 600;
  color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rail-head .rail-head-icon { width: 28px; height: 28px; }
.rail-head .rail-collapse { margin-left: 0; }
.rail-head-out .rail-collapse { margin-left: 0; margin-right: auto; }
.rail-collapse, .rail-icon {
  border: 1px solid transparent; background: none; color: var(--faint); cursor: pointer;
  border-radius: 9px; display: inline-grid; place-items: center; padding: 0;
  transition: background var(--motion), color var(--motion), border-color var(--motion);
}
.rail-collapse { width: 28px; height: 28px; }
.rail-collapse svg, .rail-icon svg { width: 18px; height: 18px; }
.rail-collapse:hover, .rail-icon:hover { color: var(--brand-int); background: var(--brand-soft); }

/* Same 56px as the frame it sits in, so nothing shifts sideways at the swap. */
.rail-strip {
  width: 56px; flex: 1; min-height: 0; overflow-y: auto; padding: 22px 0;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.rail-strip .rail-icon { width: 36px; height: 36px; position: relative; }
.rail-strip .rail-expand { margin-bottom: 8px; }
.rail-badge {
  position: absolute; top: -2px; right: -2px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: var(--radius-pill); background: var(--brand-int); color: #fff;
  font-size: var(--fs-2xs); font-weight: 700; line-height: 16px; text-align: center;
  font-variant-numeric: tabular-nums;
}

.rail-actions { display: flex; flex-direction: column; gap: 8px; }
.rail-group { display: flex; flex-direction: column; gap: 8px; }
.rail-title {
  font-size: var(--fs-xs); font-weight: 650; letter-spacing: .05em; text-transform: uppercase;
  color: var(--faint); padding: 0 8px;
}
.rail-links { display: flex; flex-direction: column; gap: 1px; }
.rail-link {
  text-decoration: none; color: var(--muted); font-size: var(--fs-sm); padding: 8px 10px; border-radius: 9px;
  display: flex; align-items: center; gap: 8px; transition: background var(--motion), color var(--motion);
}
.rail-link:hover { background: var(--brand-soft); color: var(--text); }
.rail-link .ext { margin-left: auto; color: var(--faint); width: 13px; height: 13px; flex: none; display: inline-grid; place-items: center; }
.rail-tickets { display: flex; flex-direction: column; gap: 6px; }
.rail-ticket {
  display: flex; flex-direction: column; gap: 1px; padding: 9px 11px;
  border: 1px solid var(--hairline); border-radius: 10px; text-decoration: none; background: var(--surface);
  transition: border-color var(--motion);
}
.rail-ticket:hover { border-color: var(--brand-int); }
.rail-ticket .rt-top { display: flex; align-items: center; gap: 8px; }
.rail-ticket .num { font-size: var(--fs-sm); font-weight: 650; color: var(--brand-int); }
.rail-ticket .desc { font-size: var(--fs-sm); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-ticket .state {
  margin-left: auto; flex: none; white-space: nowrap;
  font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 7px; border-radius: var(--radius-pill);
  color: var(--muted); background: color-mix(in srgb, var(--text) 8%, transparent);
}
.rail-ticket .state.is-warn { color: var(--warn); background: var(--warn-soft); }
.rail-ticket .state.is-open { color: var(--success); background: var(--success-soft); }
.rail-empty { font-size: var(--fs-sm); color: var(--faint); padding: 2px 10px; }

/* Fixed-width rail: keep labels to one word; truncation is the backstop. */
.rail-right { border-right: none; border-left: 1px solid var(--hairline); }

/* "New chat": the primary rail action */
.rail-newchat {
  width: 100%; cursor: pointer; font: inherit; font-size: var(--fs-sm); font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 11px; border-radius: 10px;
  color: var(--text); background: var(--surface); border: 1px solid var(--hairline);
  transition: border-color var(--motion), color var(--motion), background var(--motion);
}
.rail-newchat:hover { border-color: var(--brand-int); color: var(--brand-int); }
.rail-newchat .nc-ico { flex: none; }

/* Answer marker, next to the citations. */
.ansmark {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 12px;
  padding: 4px 11px; border-radius: var(--radius-pill);
  background: var(--warn-soft); color: var(--warn); font-size: var(--fs-xs); font-weight: 600;
}
/* Said once more before the first question, so a customer-safe chat announces itself rather than being
   discovered from the first answer. */
.empty-audience {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 12px;
  padding: 5px 12px; border-radius: var(--radius-pill);
  background: var(--warn-soft); color: var(--warn); font-size: var(--fs-xs); font-weight: 600;
}
/* And on the row, so you can tell which past chats were customer-scoped before reusing their output. */
.thread-item .t-cs {
  font-size: var(--fs-2xs); letter-spacing: .06em; text-transform: uppercase; font-weight: 700;
  color: var(--warn); background: var(--warn-soft); border-radius: var(--radius-pill);
  padding: 1px 6px; flex: none;
}

kbd {
  font: inherit; font-size: var(--fs-xs); color: var(--faint); line-height: 1.4;
  background: color-mix(in srgb, var(--text) 8%, transparent); border-radius: 5px; padding: 1px 5px;
}

/* The HTML hidden attribute must always win over any display rule. */
[hidden] { display: none !important; }

/* ---------- command palette (⌘K) ---------- */
.palette {
  position: fixed; inset: 0; z-index: 60; display: flex; justify-content: center; align-items: flex-start;
  padding-top: 14vh; background: color-mix(in srgb, var(--bg) 55%, transparent);
  backdrop-filter: blur(3px); animation: fade var(--motion) both;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.palette-box {
  width: min(560px, 92vw); max-height: 66vh; display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 14px;
  box-shadow: 0 24px 60px color-mix(in srgb, var(--text) 30%, transparent); animation: rise var(--motion-slow) both;
}
.palette-search { display: flex; align-items: center; gap: 10px; padding: 13px 15px; border-bottom: 1px solid var(--hairline); }
.palette-search .ps-ico { color: var(--faint); flex: none; }
.palette-search input { flex: 1; border: none; background: none; outline: none; color: var(--text); font: inherit; font-size: 15px; }
.palette-list { overflow-y: auto; padding: 6px; }
.palette-group {
  font-size: var(--fs-xs); font-weight: 650; letter-spacing: .05em; text-transform: uppercase;
  color: var(--faint); padding: 10px 10px 4px;
}
.palette-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; text-decoration: none;
  padding: 9px 10px; border-radius: 9px; cursor: pointer; border: none; background: none;
  color: var(--text); font: inherit; font-size: var(--fs-sm);
}
.palette-item .pi-ico { width: 15px; height: 15px; color: var(--brand-int); flex: none; display: inline-grid; place-items: center; }
.palette-item .pi-ext { margin-left: auto; color: var(--faint); flex: none; display: inline-grid; place-items: center; }
/* Which segment a door belongs to, so "Packaging" and "Product Assembly" are told apart at a glance
   without the row growing a second line. */
.palette-item .pi-sub { margin-left: auto; color: var(--faint); font-size: var(--fs-xs); flex: none;
  padding-left: 14px; white-space: nowrap; }
.palette-item:hover, .palette-item.active { background: var(--brand-soft); }
.palette-empty { color: var(--faint); font-size: var(--fs-sm); padding: 16px 12px; text-align: center; }

/* Responsive floor: drop the right rail first, then the left; the palette still reaches links and help.
   Above these widths, rail visibility is the user's remembered choice. */
@media (max-width: 1100px) { .rail-right { display: none; } }
@media (max-width: 900px)  { .rail-left { display: none; } }

/* ---------- transcript ---------- */
main {
  flex: 1; overflow-y: auto; scroll-behavior: smooth;
  /* Positioned so this scroller is the containing block for absolutely positioned descendants (#srAnnounce).
     Without it they escape the overflow and stretch the document, giving the page a second scrollbar. */
  position: relative;
}
#log { max-width: var(--maxw); margin: 0 auto; padding: 24px 20px 8px; }

.row { display: flex; margin: 14px 0; }
.row.user { justify-content: flex-end; }
/* The user's turn is the seam between unboxed answers. */
.row.user:not(:first-child) { margin-top: 32px; }
.bubble {
  max-width: 80%; padding: 12px 16px; border-radius: var(--radius-bubble); line-height: 1.55;
  animation: rise var(--motion-slow) both;
  /* Long unbroken URLs. `anywhere`, not `break-word`, because only `anywhere` also lets the flex item shrink. */
  overflow-wrap: anywhere;
  min-width: 0;
}
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.user .bubble {
  /* Flat fallback for browsers without color-mix. */
  background: var(--brand-int);
  background: var(--brand-grad);
  color: #fff; border-bottom-right-radius: 6px;
  white-space: pre-wrap; /* keep the user's own line breaks / spacing */
  /* Compact even on a wide column. */
  max-width: min(80%, 680px);
}
/* An answer is open on the page, not a card. Prose, the status line and the foot share one left edge. */
.ai .bubble {
  --answer-ground: var(--bg);
  max-width: 100%; flex: 1 1 auto; padding: 2px 0 0;
  background: none; border: 0; border-radius: 0; box-shadow: none;
}
/* Keyed on the .answer child, so a reopened chat gets the panel with no JS. */
.ai .bubble:has(> .answer) {
  --answer-ground: var(--surface);
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 14px;
  padding: 18px 22px 14px; box-shadow: var(--shadow-soft);
}
/* revealAnswer pins the bubble at the working card's width, then lets it widen to the column. */
.ai .bubble.is-growing { flex: none; overflow: hidden; transition: width 420ms cubic-bezier(.2, .6, .2, 1); }
@media (prefers-reduced-motion: reduce) { .ai .bubble.is-growing { transition: none; } }
.answer .atext > :is(p, ul, ol, blockquote, dl) { max-width: none; }
/* Rhythm: one step between paragraphs, a little more before a heading, lists tucked under their lead-in. */
.answer .atext > p { margin: 0 0 12px; }
/* Top-level lists only; a list in a table cell or a nested list stays plain. */
.answer .atext > :is(ul, ol) {
  margin: 6px 0 14px; padding-inline-start: 22px;
  border-left: 2px solid color-mix(in srgb, var(--brand-int) 22%, transparent);
}
.answer .atext > ul { list-style: none; padding-inline-start: 18px; }
.answer .atext > ul > li { position: relative; }
.answer .atext > ul > li::before {
  content: ""; position: absolute; left: -12px; top: .72em; width: 5px; height: 5px; border-radius: 50%;
  background: var(--brand-int);
}
.answer .atext > ol { padding-inline-start: 34px; }
.answer .atext > ol > li::marker { color: var(--brand-int); font-weight: 650; font-variant-numeric: tabular-nums; }
.answer .atext li { margin: 4px 0; }
.answer .atext > :last-child { margin-bottom: 0; }
.row.ai + .row.user { margin-top: 36px; }
/* A pinned table column paints the panel's ground so scrolled cells do not show through. */
.ai .tbl-wrap.is-wide thead th:first-child,
.ai .tbl-wrap.is-wide tbody td:first-child { background: var(--answer-ground); }
.ai .tbl-wrap.is-wide tbody tr:nth-child(even) td:first-child {
  background: color-mix(in srgb, var(--brand-soft) 45%, var(--answer-ground));
}
.bubble p { margin: 6px 0; }
.bubble p:first-child { margin-top: 0; }
.bubble p:last-child { margin-bottom: 0; }
.bubble ol, .bubble ul { margin: 8px 0 8px 20px; }
.bubble li { margin: 3px 0; }
/* Once it is an anchor, its text is still one long word. */
.bubble a { color: var(--brand-int); overflow-wrap: anywhere; }
/* A pulled quote is evidence the answer rests on. Scoped to .answer, not .bubble: a drafted document body
   is not evidence. */
.answer blockquote {
  margin: 12px 0; padding: 2px 0 2px 13px;
  border-left: 3px solid var(--hairline);
  color: var(--muted); font-style: italic;
}
.answer blockquote p { margin: 0; }
.answer blockquote p + p { margin-top: 6px; }
/* Markdown section headings (used by multi-agent answers to separate each topic): a modest bold header
   with a hairline divider above, so combined answers read as distinct sections rather than one wall. */
.bubble h1, .bubble h2, .bubble h3, .bubble h4 {
  font-size: var(--fs-base); font-weight: 650; color: var(--text); line-height: 1.3;
  margin: 18px 0 6px; padding-top: 14px; border-top: 1px solid var(--hairline);
}
.bubble h1:first-child, .bubble h2:first-child, .bubble h3:first-child, .bubble h4:first-child {
  margin-top: 0; padding-top: 0; border-top: 0;
}
/* A heading that names a specialist (multi-agent answers) is badged with that agent's glyph + color. */
.bubble h1.spec-head, .bubble h2.spec-head, .bubble h3.spec-head, .bubble h4.spec-head {
  display: flex; align-items: center; gap: 8px; color: var(--spec-color, var(--text));
  border-top-color: color-mix(in srgb, var(--spec-color, var(--brand-int)) 30%, var(--hairline));
}
.bubble .spec-glyph { display: inline-flex; flex: none; color: var(--spec-color, var(--brand-int)); }
.bubble .spec-glyph svg { width: 16px; height: 16px; }
.bubble code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em;
  background: color-mix(in srgb, var(--text) 7%, transparent); padding: 1px 5px; border-radius: 5px;
}
.bubble pre { background: color-mix(in srgb, var(--text) 6%, transparent); padding: 12px; border-radius: 8px; overflow:auto; }
/* The inline-code chip must not paint inside a code block. */
.bubble pre code { background: none; padding: 0; border-radius: 0; font-size: inherit; }
.bubble img.att { max-width: 220px; border-radius: 10px; margin-top: 8px; display: block; }
.bubble .att-file { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--text) 6%, transparent); font-size: 13px; }
.bubble .att-file svg { width: 18px; height: 18px; opacity: .8; flex: 0 0 auto; }

/* The status fades out while the answer arrives underneath it. */
.steps-live.is-spent, .coord.is-spent, .coord-intro.is-spent {
  opacity: 0; max-height: 0 !important; margin: 0; padding: 0; border-width: 0; box-shadow: none;
  overflow: hidden; pointer-events: none;
  transition: opacity var(--motion) linear, max-height var(--motion-slow) var(--ease-collapse, cubic-bezier(.2,.6,.2,1));
}
.answer { animation: rise var(--motion-slow) both; }
@media (prefers-reduced-motion: reduce) {
  .steps-live.is-spent, .coord.is-spent, .coord-intro.is-spent { transition: none; }
}

/* Caret on the content's last block, not the container: an ::after on .atext lands on its own line.
   :empty keeps a caret between reveal and the first token. */
.cursor:empty::after,
.cursor > :last-child::after {
  content: "\258B"; margin-left: 1px; color: var(--brand-int);
  animation: blink 1s steps(2, start) infinite;
}
@media (prefers-reduced-motion: reduce) { .cursor:empty::after, .cursor > :last-child::after { animation: none; } }
@keyframes blink { to { opacity: 0; } }

/* ---------- agent switch marker (persists in scrollback, change-only) ---------- */
.switch {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 22px auto 8px; color: var(--muted); font-size: var(--fs-xs);
  animation: rise var(--motion-slow) both;
}
.switch::before, .switch::after { content: ""; height: 1px; width: 40px; background: var(--hairline); }
.handoff {
  max-width: var(--maxw); margin: 18px auto 0; padding: 0 20px;
  color: var(--muted); font-size: var(--fs-sm); font-style: italic; text-align: center;
  animation: rise var(--motion-slow) both;
}
.switch .tag {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px;
  border-radius: var(--radius-pill); border: 1px solid var(--hairline); background: var(--surface);
  font-weight: 550; color: var(--text);
}
.adot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.aglyph { width: 14px; height: 14px; display: inline-grid; place-items: center; }
.aglyph svg { width: 14px; height: 14px; }

/* ---------- step trace (live -> collapsible) ----------
   A card that shrinks to its content; when the answer arrives the bubble grows from it (revealAnswer). */
.steps-live {
  color: var(--muted); font-size: var(--fs-sm);
  width: fit-content; max-width: 100%; padding: 10px 16px 10px 14px; box-sizing: border-box;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px;
  box-shadow: var(--shadow-soft);
}
.sl-head { display: flex; align-items: center; gap: 9px; }
.steps-live .spinner {
  /* Lifted 1px: flex centers it on the line box, which includes descender space. `top`, not transform,
     because the transform is the spin. */
  position: relative; top: -1px;
  width: 14px; height: 14px; border-radius: 50%; flex: none;
  border: 2px solid var(--hairline); border-top-color: var(--brand-int);
  animation: spin .8s linear infinite;
}
/* A small spinner keeps spinning under prefers-reduced-motion: a frozen ring reads as broken. */
@keyframes spin { to { transform: rotate(360deg); } }
.steps-live .label { animation: shimmer 1.8s ease-in-out infinite; }

/* Falls back to the plain muted color wherever background-clip: text is unsupported. */
@keyframes shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .steps-live .label {
    background: linear-gradient(100deg,
      var(--muted) 0%, var(--muted) 35%, var(--text) 50%, var(--muted) 65%, var(--muted) 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: shimmer 2.4s linear infinite;
  }
}
@media (prefers-reduced-motion: reduce) {
  .steps-live .label { animation: none; -webkit-text-fill-color: var(--muted); color: var(--muted); }
}

/* One continuous rail with a dot centered on each row. Finished steps are filled dots in the past tense
   (chat.js pastTense); the running one is hollow and breathes. */
.sl-steps {
  list-style: none; margin: 8px 0 2px 6px; padding: 0;
  border-left: 2px solid color-mix(in srgb, var(--brand-int) 22%, transparent);
  display: flex; flex-direction: column; gap: 1px;
}
/* Rows are built every turn but shown only once the turn is promoted to a checklist. */
.steps-live:not(.is-promoted) .sl-steps { display: none; }
.sl-step {
  position: relative; display: flex; align-items: center; gap: 8px;
  padding: 3px 0 3px 14px; line-height: 1.5;
  animation: rise var(--motion-slow) both;
}
/* The dot is drawn here, centered at any line height; the span stays as the JS hook. */
.sl-mark {
  position: absolute; left: -6px; top: 50%; width: 10px; height: 10px; margin-top: -5px;
  border-radius: 50%; box-sizing: border-box; background: var(--brand-int);
  box-shadow: 0 0 0 3px var(--surface);       /* masks the rail behind the dot */
}
.sl-mark svg { display: none; }
.sl-step.is-live .sl-mark { background: var(--surface); border: 2px solid var(--brand-int); animation: boxpulse 1.6s ease-in-out infinite; }
@keyframes boxpulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sl-step.is-live .sl-mark { animation: none; } }
.sl-step.is-done .sl-mark { animation: settle var(--motion) both; }
@keyframes settle { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
.sl-step.is-done .sl-text { color: var(--muted); }
.sl-step.is-live .sl-text { color: var(--text); }
.sl-text { min-width: 0; overflow-wrap: anywhere; }
/* Repeats are a small count beside the step, not a stutter of identical rows. */
.sl-rep {
  font-size: var(--fs-2xs); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--text) 6%, transparent); border-radius: var(--radius-pill); padding: 0 7px;
}
/* Beside the label, not pushed to the trailing edge. */
.elapsed { margin-left: 10px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; opacity: .7; }

/* ---------- the foot of an answer ----------
   One row: what the answer stands on (left) and what you can do (right). Panels share one slot below. */
.turn-foot { padding-top: 10px; margin-top: 12px; border-top: 1px solid var(--hairline); }
/* The row never wraps; the left group shrinks and the filename ellipsizes. */
.foot-row { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; font-size: var(--fs-xs); }
.foot-left {
  display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1 1 auto; overflow: hidden;
}
/* The safety badge must not shrink. */
.foot-left .ans-safe { flex: none; }
/* Below this the row wraps deliberately, tools first. */
@media (max-width: 560px) {
  .foot-row { flex-wrap: wrap; }
  .foot-left { flex: 1 1 100%; order: 2; }
  .foot-tools { order: 1; margin-left: auto; }
}

.foot-disc {
  display: inline-flex; align-items: center; gap: 7px; max-width: 100%;
  font: inherit; font-size: var(--fs-xs); color: var(--muted); cursor: pointer;
  border: 1px solid transparent; background: none; border-radius: 7px; padding: 4px 8px;
  transition: color var(--motion), border-color var(--motion), background var(--motion);
}
.foot-disc:hover, .foot-disc[aria-expanded="true"] { color: var(--text); border-color: var(--hairline); background: var(--surface); }
/* Focus ring drawn inside: .foot-left clips its overflow, which cut off an outer outline. */
.foot-disc:focus-visible { outline: 2px solid var(--brand-int); outline-offset: -2px; }
.foot-disc .fd-lead { width: 13px; height: 13px; flex: none; opacity: .75; display: inline-grid; place-items: center; }
.foot-disc .fd-lead svg { width: 13px; height: 13px; display: block; }
.foot-disc b { font-weight: 600; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.foot-disc .fd-meta { color: var(--faint); font-variant-numeric: tabular-nums; flex: none; }
/* The trace control shrinks last; the sources control holds a filename of any length. */
.foot-disc { min-width: 0; flex: 0 1 auto; }
.foot-disc[data-pane="how"] { flex: none; }

/* Icon-only; the titles carry the names. */
.foot-tools { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.foot-tool {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 26px; padding: 0; border-radius: 7px;
  border: 1px solid transparent; background: none; color: var(--muted); cursor: pointer;
  transition: color var(--motion), border-color var(--motion), background var(--motion);
}
.foot-tool svg { width: 15px; height: 15px; display: block; }
.foot-tool:hover { color: var(--text); border-color: var(--hairline); background: var(--surface); }
.foot-tool:focus-visible { outline: 2px solid var(--brand-int); outline-offset: 2px; }
.foot-tool.is-done { color: var(--brand-int); }
/* Two thumbs, not one scale: green and amber, so they do not read as a slider. */
.foot-tool.up:hover, .foot-tool.up.is-set { color: var(--success); border-color: var(--success-soft); background: var(--success-soft); }
.foot-tool.down:hover, .foot-tool.down.is-set { color: var(--warn); border-color: var(--warn-soft); background: var(--warn-soft); }
.foot-tool.is-set svg { fill: currentColor; }
.foot-div { width: 1px; height: 16px; background: var(--hairline); margin: 0 6px; flex: none; }

/* ---------- the panels ---------- */
.foot-pane { display: none; padding: 13px 2px 2px; }
.foot-pane.is-open { display: block; }
.foot-pane > h4 {
  font-size: var(--fs-2xs); letter-spacing: .09em; text-transform: uppercase; font-weight: 700;
  color: var(--muted); margin: 0 0 8px;
}
.trace-list { list-style: none; margin: 0; padding: 0; max-width: 520px; }
.trace-list li { color: var(--muted); font-size: var(--fs-xs); padding: 3px 0 3px 18px; position: relative; }
.trace-list li::before { content: "\2713"; position: absolute; left: 0; color: var(--success); }
.trace-list li .rep {
  margin-left: 6px; padding: 0 5px; border-radius: 999px; background: var(--hairline);
  color: var(--faint); font-size: var(--fs-2xs); font-variant-numeric: tabular-nums; vertical-align: 1px;
}

/* ---------- the feedback panel ---------- */
.fb-lead { font-size: var(--fs-xs); color: var(--text); margin: 0 0 9px; }
.fb-lead .fb-q { color: var(--muted); }
.fb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
/* A pill posts the report in one press, colored by the panel's direction. */
.fb-chip {
  font: inherit; font-size: var(--fs-xs); cursor: pointer; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--hairline); background: var(--bg-elev); color: var(--muted);
  transition: color var(--motion), border-color var(--motion), background var(--motion);
}
.fb-chip:focus-visible { outline: 2px solid var(--brand-int); outline-offset: 2px; }
.foot-fb.is-up .fb-chip:hover, .foot-fb.is-up .fb-chip.is-picked { color: var(--success); border-color: var(--success); background: var(--success-soft); }
.foot-fb.is-down .fb-chip:hover, .foot-fb.is-down .fb-chip.is-picked { color: var(--warn); border-color: var(--warn); background: var(--warn-soft); }
/* Dashed: the one pill that opens a box instead of reporting. */
.fb-other { border-style: dashed; }
/* Hidden until "Other" is pressed. */
.fb-row { display: none; gap: 8px; align-items: center; max-width: 560px; margin-top: 9px; }
.fb-row.is-shown { display: flex; }
.fb-box {
  flex: 1 1 auto; min-width: 0; font: inherit; font-size: var(--fs-xs); padding: 7px 11px;
  border: 1px solid var(--hairline); border-radius: 9px; background: var(--bg-elev); color: var(--text);
}
.fb-box::placeholder { color: var(--muted); }
.fb-box:focus { outline: none; border-color: var(--brand-int); }
.fb-send {
  font: inherit; font-size: var(--fs-xs); font-weight: 600; cursor: pointer; white-space: nowrap; flex: none;
  padding: 7px 14px; border-radius: 9px; border: 1px solid var(--brand-int);
  background: var(--brand-int); color: #fff;
}
.fb-foot { font-size: var(--fs-2xs); color: var(--muted); margin: 9px 0 0; }
.fb-thanks { font-size: var(--fs-xs); color: var(--muted); margin: 0; }

/* ---------- share ---------- */
.share-choices { display: flex; flex-wrap: wrap; gap: 8px; }
/* Share > Teams asks who first (chat.js shareChoices). */
.share-to { flex-basis: 100%; display: grid; gap: 6px; margin-top: 8px; }
.share-to label { display: grid; gap: 4px; font-size: var(--fs-sm); color: var(--muted); }
.share-to input { font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--hairline); border-radius: 8px; padding: 6px 10px; }
.share-people { display: grid; gap: 2px; }
.share-person { display: flex; gap: 8px; align-items: baseline; text-align: left; font: inherit; color: var(--text); background: none; border: 1px solid transparent; border-radius: 8px; padding: 6px 8px; cursor: pointer; }
.share-person:hover, .share-person:focus-visible { border-color: var(--hairline); background: var(--surface); }
.share-person span { color: var(--muted); font-size: var(--fs-sm); }
.share-none, .share-note { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.share-go {
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-size: var(--fs-xs); cursor: pointer; padding: 7px 13px 7px 10px;
  border: 1px solid var(--hairline); border-radius: var(--radius-card);
  background: var(--bg-elev); color: var(--text);
  transition: border-color var(--motion), background var(--motion);
}
.share-go:hover { border-color: var(--brand-int); background: var(--brand-soft); }
.share-go svg { width: 15px; height: 15px; flex: none; color: var(--muted); }
.share-go:focus-visible { outline: 2px solid var(--brand-int); outline-offset: 2px; }

/* ---------- job plan (long-running work): the focus card ----------
   Shows the current step and the next, with the rest behind "Show all". Collapses to its header when done. */
.pcard {
  border: 1px solid var(--hairline); border-radius: var(--radius-card); background: var(--bg-elev);
  box-shadow: var(--shadow); padding: 12px 14px; margin: 2px 0 12px; font-size: var(--fs-sm); color: var(--text);
}
.pc-head { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.pc-glyph { width: 18px; height: 18px; color: var(--brand-int); flex: none; display: inline-grid; }
.pc-glyph svg { width: 18px; height: 18px; }
.pc-titles { min-width: 0; flex: 1; }
.pc-label { font-size: var(--fs-xs); font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.pc-goal { font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.pc-count { flex: none; color: var(--muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.pc-chev { flex: none; width: 16px; height: 16px; color: var(--muted); display: inline-grid; transition: transform var(--motion); }
.pc-chev svg { width: 16px; height: 16px; }
.pcard.is-open .pc-chev { transform: rotate(90deg); }
.pc-bar { height: 3px; border-radius: 3px; background: var(--hairline); margin: 10px 0 2px; overflow: hidden; }
.pc-bar span { display: block; height: 100%; background: var(--brand-int); border-radius: 3px; transition: width var(--motion-slow); }
.pc-focus { display: flex; gap: 10px; align-items: flex-start; padding: 10px 2px 4px; }
.pc-lead { font-size: var(--fs-xs); font-weight: 650; color: var(--brand-int); text-transform: uppercase; letter-spacing: .04em; }
.pc-focus.is-blocked .pc-lead { color: var(--warn); }
.pc-text { min-width: 0; flex: 1; line-height: 1.4; overflow-wrap: anywhere; }
.pc-focus .pc-title { font-weight: 600; }
.pc-activity { color: var(--muted); font-size: var(--fs-xs); margin-top: 2px; }
.pc-next { color: var(--muted); padding: 2px 2px 2px 30px; }
.pc-toggle { border: none; background: none; color: var(--brand-int); font: inherit; font-size: var(--fs-xs); font-weight: 600;
  padding: 6px 2px 0 30px; cursor: pointer; }
.pc-toggle:focus-visible, .pc-head:focus-visible { outline: 2px solid var(--brand-int); outline-offset: 2px; border-radius: 4px; }
.pc-rows { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; }
.pc-row { display: flex; align-items: flex-start; gap: 10px; padding: 7px 2px; border-top: 1px solid var(--hairline); }
.pc-row:first-child { border-top: none; }
.pc-row.is-done .pc-title { color: var(--muted); }
.pc-row.is-in_progress .pc-title, .pc-row.is-blocked .pc-title { font-weight: 600; }
.pc-mark { flex: none; width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center;
  margin-top: 1px; box-sizing: border-box; }
.pc-mark svg { width: 11px; height: 11px; }
.pc-mark.is-done { background: var(--brand-int); color: #fff; }
.pc-mark.is-pending { border: 1.5px solid var(--hairline); }
.pc-mark.is-in_progress { border: 1.5px solid color-mix(in srgb, var(--brand-int) 35%, transparent); }
.pc-spin { width: 10px; height: 10px; border-radius: 50%; border: 2px solid transparent;
  border-top-color: var(--brand-int); border-right-color: var(--brand-int); animation: spin .8s linear infinite; }
.pc-mark.is-blocked { background: var(--warn); color: #fff; font-weight: 800; font-size: 12px; }
/* A planned turn's progress lives in the card; the separate status line would be a second clock. */
.steps-live.is-planned { display: none; }

/* ---------- card width: every outlined card sizes to its content, left-aligned with the text ----------
   A card with an editable description takes the ceiling so its text box is not squeezed to 20 columns. */
.approval, .pcard { width: fit-content; min-width: min(100%, 340px); max-width: min(100%, 560px); box-sizing: border-box; }
.approval:has(.card-edit) { width: min(100%, 560px); }
/* A drafted project or spec carries document sections; the confirm-card ceiling would squeeze them. */
.approval.project { max-width: min(100%, 680px); }
.approval .card-edit { width: 100%; box-sizing: border-box; }
.reviewset { max-width: min(100%, 640px); }
.reviewset .approval { width: auto; min-width: 0; max-width: none; }

/* ---------- live coordination panel (collaborate turns: manager delegating to specialists) ---------- */
.coord {
  border: 1px solid var(--hairline); border-radius: var(--radius-card); background: var(--surface);
  padding: 12px 14px; margin: 2px 0; box-shadow: var(--shadow);
}
.coord-head {
  display: flex; align-items: center; gap: 9px; font-size: var(--fs-sm); font-weight: 600; color: var(--text);
  padding-bottom: 8px; border-bottom: 1px solid var(--hairline); margin-bottom: 8px;
}
.coord-head .spinner {
  width: 14px; height: 14px; border-radius: 50%; flex: none;
  border: 2px solid var(--hairline); border-top-color: var(--brand-int); animation: spin .8s linear infinite;
}
.coord-rows { display: flex; flex-direction: column; gap: 8px; }
.coord-row {
  display: grid; grid-template-columns: 18px auto 1fr; align-items: baseline; gap: 8px;
  font-size: var(--fs-sm); animation: rise var(--motion-slow) both;
}
.coord-row .cd-mark { display: inline-flex; align-items: center; justify-content: center; }
.coord-row .cd-mark svg { width: 13px; height: 13px; color: var(--success); }
.coord-row .cd-mark .spinner.sm {
  width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--hairline);
  border-top-color: var(--brand-int); animation: spin .8s linear infinite;
}
.coord-row .cd-agent { font-weight: 600; color: var(--text); white-space: nowrap; }
.coord-row .cd-task { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.coord-row.done .cd-agent { color: var(--muted); font-weight: 550; }
.coord-done summary { color: var(--brand); opacity: .85; }

/* Multi-agent answers: one attributed block per specialist. */
.agent-sections { display: flex; flex-direction: column; gap: 12px; }
.as-turnhead {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 2px;
}
.agent-section {
  border-left: 3px solid var(--spec-color, var(--brand-int));
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--spec-color, var(--brand-int)) 4%, var(--surface));
  padding: 10px 14px;
}
.agent-section .as-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
  font-weight: 600; color: var(--spec-color, var(--text)); font-size: var(--fs-sm);
}
.agent-section .as-glyph { display: inline-flex; flex: none; color: var(--spec-color, var(--brand-int)); }
.agent-section .as-glyph svg { width: 16px; height: 16px; }
.agent-section .as-body { color: var(--text); }
.agent-section .as-body > :first-child { margin-top: 0; }
.agent-section .as-body > :last-child { margin-bottom: 0; }

/* Multi-agent intro: one header naming the specialists. Reuses .coord-head for the spinner and title. */
.coord-intro {
  border: 1px solid var(--hairline); border-radius: var(--radius-card); background: var(--surface);
  padding: 12px 14px; margin: 2px 0; box-shadow: var(--shadow);
}
.coord-intro .coord-head { border-bottom: 1px solid var(--hairline); padding-bottom: 8px; margin-bottom: 8px; }
.coord-intro .coord-list { color: var(--muted); font-size: var(--fs-sm); }

/* The send button becomes a Stop button while a turn streams (icon swaps to a square in chat.js). */
#send.stopping { color: var(--brand-int); }

/* ---------- inline citation reference [n] ---------- */
.cref {
  font-size: .66em; font-weight: 700; line-height: 0; vertical-align: super;
  color: var(--brand-int); cursor: pointer; padding: 0 1px;
}
.cref::before { content: "["; opacity: .55; }
.cref::after  { content: "]"; opacity: .55; }
.cref:hover { text-decoration: underline; }

/* ---------- sources block ---------- */
.cites-list { display: flex; flex-wrap: wrap; gap: 8px; }
.cite {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  padding: 6px 12px 6px 7px; border: 1px solid var(--hairline); border-radius: var(--radius-card);
  background: var(--bg-elev); color: var(--text); font-size: var(--fs-xs); text-decoration: none;
  transition: border-color var(--motion), background var(--motion);
}
a.cite:hover { border-color: var(--brand-int); background: var(--brand-soft); }
.cite .cnums { display: inline-flex; gap: 3px; flex: none; }
.cite .cnum {
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 5px;
  display: inline-grid; place-items: center; font-weight: 650; font-size: var(--fs-2xs);
  background: color-mix(in srgb, var(--brand-int) 15%, transparent); color: var(--brand-int);
}
.cite .csys { width: 15px; height: 15px; flex: none; color: var(--muted); display: inline-grid; place-items: center; }
.cite .ctitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.cite .cmeta { color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; }
.cite .cmeta:empty { display: none; }   /* no date, one citation: no empty separator dot */
/* Only Public and tiers above Internal are badged; Internal is the default for nearly everything. */
.cite .csens {
  font-size: var(--fs-2xs); letter-spacing: .06em; text-transform: uppercase; font-weight: 700;
  padding: 1px 6px; border-radius: var(--radius-pill); flex: none; white-space: nowrap;
}
.cite .csens.public { color: var(--success); background: var(--success-soft); }
.cite .csens.high   { color: var(--warn);    background: var(--warn-soft); }
.cite-flash { animation: citeflash 1.2s ease; }
@keyframes citeflash {
  0%, 100% { border-color: var(--hairline); background: var(--bg-elev); }
  25%      { border-color: var(--brand-int); background: var(--brand-soft); }
}

/* ---------- approval card ---------- */
.approval {
  margin-top: 12px; border: 1px solid var(--hairline); border-radius: var(--radius-card);
  background: var(--bg-elev); padding: 14px; box-shadow: var(--shadow);
}
.answer .approval + .approval { margin-top: 18px; }

/* ---------- review set: high-level list of a turn's pending actions, each expanding to its full card --- */
.reviewset {
  margin-top: 12px; border: 1px solid var(--hairline); border-radius: var(--radius-card);
  background: var(--bg-elev); box-shadow: var(--shadow); overflow: hidden;
}
.rs-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid var(--hairline);
}
.rs-count { font-weight: 600; font-size: var(--fs-base); color: var(--text); }
.rs-prog { font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.rs-item + .rs-item { border-top: 1px solid var(--hairline); }
.rs-bar {
  width: 100%; display: grid; grid-template-columns: 20px auto 1fr auto auto; align-items: center; gap: 10px;
  padding: 12px 14px; background: none; border: 0; cursor: pointer; text-align: left; color: var(--text);
  transition: background var(--motion);
}
.rs-bar:hover { background: color-mix(in srgb, var(--text) 3%, transparent); }
.rs-bar:focus-visible { outline: 2px solid var(--brand-int); outline-offset: -2px; }
.rs-idx {
  width: 20px; height: 20px; border-radius: 50%; background: var(--brand-soft); color: var(--brand);
  font-size: var(--fs-2xs); font-weight: 700; display: grid; place-items: center;
}
.rs-glyph { color: var(--muted); display: inline-flex; }
.rs-glyph svg { width: 17px; height: 17px; }
.rs-titles { display: flex; flex-direction: column; min-width: 0; }
.rs-title { font-weight: 600; font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-sum { font-size: var(--fs-xs); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-status { display: inline-flex; }
.rs-status svg { width: 16px; height: 16px; color: var(--success); }
.rs-chev { color: var(--faint); display: inline-flex; transition: transform var(--motion); }
.rs-chev svg { width: 14px; height: 14px; }
.rs-item.open .rs-chev { transform: rotate(90deg); }
.rs-item.resolved .rs-title { color: var(--muted); }
.rs-item.resolved .rs-idx { background: var(--success-soft); color: var(--success); }
.rs-body { padding: 2px 14px 14px 44px; }
.rs-body .approval { margin-top: 0; box-shadow: none; border: 0; background: none; padding: 0; }
.approval .atitle { font-size: var(--fs-lg); font-weight: 600; display: flex; align-items: center; gap: 8px; }
.approval .adesc { color: var(--muted); font-size: var(--fs-sm); margin: 4px 0 12px; }
.btn-primary {
  background: var(--brand-int); background: var(--brand-grad); color: #fff; border: 0;
  border-radius: var(--radius-pill); padding: 9px 18px; font-size: var(--fs-sm); font-weight: 550; cursor: pointer;
  transition: filter var(--motion), transform var(--motion);
}
.btn-primary:hover { filter: brightness(1.06); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:disabled { opacity: .5; cursor: default; }
.approval .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-ghost {
  background: transparent; color: var(--muted); border: 1px solid var(--hairline);
  border-radius: var(--radius-pill); padding: 9px 16px; font-size: var(--fs-sm); font-weight: 550; cursor: pointer;
  transition: background var(--motion), color var(--motion);
}
.btn-ghost:hover { background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text); }
.btn-ghost:disabled { opacity: .5; cursor: default; }
.approval.done { border-color: var(--success); background: var(--success-soft); }

/* meeting outcomes: batch plan-review checklist card */
.approval.plan .plan-rows { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.approval.plan .plan-row { display: grid; grid-template-columns: auto auto 1fr; gap: 8px; align-items: start; cursor: pointer; }
.approval.plan .plan-kind { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding-top: 2px; }
.approval.plan .plan-text { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-sm); }
.approval.plan .plan-why { font-size: var(--fs-xs); color: var(--muted); font-style: italic; }

.approval.plan .choice-groups { display: flex; flex-direction: column; gap: 14px; margin: 10px 0; }
.approval.plan .choice-group { display: flex; flex-direction: column; gap: 6px; }
.approval.plan .choice-label { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
/* One bordered list divided by hairlines. Radios stay: these groups post together on Continue through the
   SelectedActionIds side channel planCard uses, so rows must not commit on click. */
.approval.plan .choice-rows {
  border: 1px solid var(--hairline); border-radius: 10px; overflow: hidden;
}
.approval.plan .choice-row {
  display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center;
  padding: 10px 12px; cursor: pointer; transition: background var(--motion);
}
.approval.plan .choice-row + .choice-row { border-top: 1px solid var(--hairline); }
.approval.plan .choice-row:hover { background: var(--brand-soft); }
/* Degrades to hover-only where :has() is unsupported; the radio is still checked. */
.approval.plan .choice-row:has(input:checked) { background: var(--brand-soft); }
.approval.plan .choice-text { font-size: var(--fs-sm); }

/* editable field on a confirm card (edit-to-reveal) */
.approval .card-edit-wrap { margin: 0 0 12px; }
.approval .card-edit-label { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.approval textarea.card-edit {
  width: 100%; box-sizing: border-box; margin-top: 4px; resize: vertical; min-height: 76px;
  border: 1px solid var(--hairline); border-radius: 10px; background: var(--surface);
  color: var(--text); font: inherit; font-size: var(--fs-sm); line-height: 1.5; padding: 8px 10px;
}
.approval textarea.card-edit:focus { outline: none; border-color: var(--brand-int); }

/* project spec review card */
.approval.project .proj-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.approval.project .proj-chip {
  font-size: var(--fs-xs); color: var(--muted); background: var(--brand-soft);
  border-radius: var(--radius-pill); padding: 3px 10px;
}
.approval.project .proj-sections { margin: 8px 0 4px; display: grid; gap: 10px; }
.approval.project .proj-sec .proj-h,
.approval.project .proj-todo .proj-h {
  font-size: var(--fs-xs); font-weight: 650; letter-spacing: .03em; text-transform: uppercase; color: var(--faint);
}
.approval.project .proj-sec .proj-b { font-size: var(--fs-sm); color: var(--text); line-height: 1.5; white-space: pre-wrap; margin-top: 2px; }
.approval.project .proj-todo {
  margin: 8px 0 12px; padding: 10px 12px; border: 1px dashed var(--hairline);
  border-radius: 10px; background: color-mix(in srgb, var(--text) 3%, transparent);
}
.approval.project .proj-todo ul { margin: 4px 0 0; padding-left: 18px; }
.approval.project .proj-todo li { font-size: var(--fs-xs); color: var(--muted); line-height: 1.6; }
.approval.project .proj-done { color: var(--success); font-size: var(--fs-sm); font-weight: 550; display: inline-flex; align-items: center; }
.approval.project .proj-note {
  margin: 2px 0 12px; padding: 8px 12px; border-radius: 10px; font-size: var(--fs-xs); color: var(--muted);
  background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand-int) 20%, transparent);
}
.approval.project .proj-note strong { color: var(--brand); font-weight: 600; }
/* HR draft: read-only Markdown-rendered preview of the draft body (mirrors the project-card skin). */
.approval.project .hr-body { font-size: var(--fs-sm); color: var(--text); line-height: 1.55; margin: 8px 0 4px; max-height: 340px; overflow-y: auto; }
.approval.project .hr-body > :first-child { margin-top: 0; }
.approval.project .hr-body h1, .approval.project .hr-body h2, .approval.project .hr-body h3, .approval.project .hr-body h4 {
  color: var(--brand); font-size: var(--fs-sm); font-weight: 650; margin: 12px 0 4px;
}
.approval.project .hr-body p { margin: 4px 0; }
.approval.project .hr-body ul, .approval.project .hr-body ol { margin: 4px 0; padding-left: 18px; }
.approval.project .hr-body li { margin: 2px 0; }
/* editable project spec: title + classification chips (narrative sections reuse textarea.card-edit) */
.approval.project .proj-title-in {
  flex: 1; min-width: 0; border: 0; border-bottom: 1px solid transparent; background: none;
  color: var(--text); font: inherit; font-weight: 650; padding: 0 0 2px;
}
.approval.project .proj-title-in:focus { outline: none; border-bottom-color: var(--brand-int); }
.approval.project .proj-chip-edit { display: inline-flex; align-items: center; gap: 4px; }
.approval.project .proj-chip-in {
  border: 0; background: none; color: var(--text); font: inherit; font-size: var(--fs-xs);
  width: 12ch; min-width: 6ch; padding: 0; border-bottom: 1px solid transparent;
}
.approval.project .proj-chip-in:focus { outline: none; border-bottom-color: var(--brand-int); }
.approval.project .proj-sec .proj-edit { min-height: 60px; }

/* result receipt (done-state card, no confirm buttons) */
.approval.receipt .receipt-fields { display: grid; gap: 5px; margin: 8px 0 4px; }
.approval.receipt .receipt-row { display: flex; gap: 10px; font-size: var(--fs-sm); line-height: 1.4; }
.approval.receipt .receipt-k { color: var(--muted); min-width: 82px; }
.approval.receipt .receipt-v { color: var(--text); font-weight: 550; }
.approval.receipt .actions { margin-top: 10px; }

/* directory person card */
.approval.person .pc-head { display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.approval.person .pc-avatar { width:38px; height:38px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:color-mix(in srgb, var(--brand-int) 14%, transparent); color:var(--brand-int); }
.approval.person .pc-avatar svg { width:19px; height:19px; }
.approval.person .pc-name { font-weight:650; font-size:16px; color:var(--text); }
.approval.person .pc-title { font-size:13px; color:var(--muted); }
.approval.person .pc-sub { font-size:13px; color:var(--muted); margin:0 0 12px; }
.approval.person .pc-rows { display:grid; gap:8px; }
.approval.person .pc-row { display:grid; grid-template-columns:118px 1fr; gap:12px; font-size:14px; align-items:baseline; }
.approval.person .pc-k { color:var(--muted); }
.approval.person .pc-v { color:var(--text); }
.approval.person .pc-cc { display:inline-block; padding:2px 9px; border-radius:7px; font-size:12.5px; font-weight:600; }
.approval.person .pc-cc.ok { background:color-mix(in srgb, var(--brand-int) 12%, transparent); color:var(--brand-int);
  border:1px solid color-mix(in srgb, var(--brand-int) 30%, transparent); }
.approval.person .pc-cc.restricted { background:color-mix(in srgb, var(--muted) 12%, transparent); color:var(--muted);
  border:1px dashed var(--hairline); }

/* ---------- empty state + starter chips ---------- */
#empty { max-width: var(--maxw); margin: 0 auto; padding: 40px 20px; }
#empty .hello { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -.01em; }
#empty .ask { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.01em; margin-top: 10px; }
#empty .sub { color: var(--muted); margin-top: 6px; max-width: 60ch; }
/* Empty-state suggestion chips. Two columns, capped so the grid never outgrows the conversation measure. */
.chip-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 9px;
  width: 100%; max-width: 520px; margin: 18px auto 0;
}
.chip-card {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  padding: 13px 14px; border: 1px solid var(--hairline); border-radius: 9px;
  background: var(--surface); color: var(--text); cursor: pointer;
  transition: border-color var(--motion), background var(--motion);
}
.chip-card:hover { border-color: var(--brand-int); background: var(--brand-soft); }
.chip-label { font-weight: 580; }
.chip-eg { color: var(--muted); font-size: 12px; }
@media (max-width: 560px) { .chip-grid { grid-template-columns: 1fr; } }
.resumebtn { margin-top: 10px; }

/* ---------- composer ---------- */
form.composer-wrap { padding: 6px 20px 18px; }
#pending { max-width: var(--maxw); margin: 0 auto 8px; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.chip { position: relative; }
.chip img { height: 56px; width: 56px; object-fit: cover; border-radius: 8px; border: 1px solid var(--hairline); }
.chip .filechip { display: inline-flex; align-items: center; gap: 8px; height: 56px; padding: 0 13px; max-width: 190px; border-radius: 8px; border: 1px solid var(--hairline); background: var(--surface); }
.chip .filechip svg { width: 18px; height: 18px; color: var(--muted); flex: 0 0 auto; }
.chip .filechip .fname { font-size: 12.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip button {
  position: absolute; top: -6px; right: -6px; background: var(--brand); color: #fff; border: 0;
  border-radius: 50%; width: 18px; height: 18px; font-size: var(--fs-xs); line-height: 1; padding: 0; cursor: pointer;
}
/* A column: the text row above the tool row. Send's flex-end alignment lives on .composer-top. */
.composer {
  max-width: var(--maxw); margin: 0 auto; display: flex; flex-direction: column; gap: 2px;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 22px; padding: 6px 8px;
  box-shadow: var(--shadow); transition: border-color var(--motion);
}
.composer:focus-within { border-color: var(--brand-int); }
#msg {
  flex: 1; border: 0; outline: none; padding: 9px 8px; font: inherit; font-size: var(--fs-base);
  background: transparent; color: var(--text); resize: none; max-height: 160px; line-height: 1.5;
  overflow-y: hidden; /* autosize() flips to auto only once content exceeds max-height */
}
.iconbtn {
  background: transparent; color: var(--muted); border: 0; cursor: pointer;
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: none;
  transition: background var(--motion), color var(--motion);
}
/* :not(.send) because .iconbtn:hover and .send:hover tie on specificity, and the pale background would win
   over the filled send button. */
.iconbtn:hover:not(.send) { background: var(--brand-soft); color: var(--brand-int); }
.iconbtn svg { width: 19px; height: 19px; }
.send { color: #fff; background: var(--brand-int); background: var(--brand-grad); }
/* Restated so no other hover rule can reach the fill. */
.send:hover { color: #fff; background: var(--brand-int); background: var(--brand-grad); filter: brightness(1.06); }
.send:disabled { opacity: .45; cursor: default; filter: none; }
.composer-hint { max-width: var(--maxw); margin: 8px auto 0; color: var(--faint); font-size: var(--fs-xs); text-align: center; }
/* Returning-user resume card; the whole card is the resume button. */
.resume-card {
  display: flex; align-items: center; gap: 12px;
  width: 100%; max-width: 440px; margin: 14px 0 4px;
  padding: 13px 15px; text-align: left; cursor: pointer;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius-card); box-shadow: var(--shadow);
  transition: transform var(--motion), border-color var(--motion), box-shadow var(--motion);
}
.resume-card:hover { transform: translateY(-1px); border-color: var(--brand-int); }
.resume-card:focus-visible { outline: 2px solid var(--brand-int); outline-offset: 2px; }
.resume-icn {
  display: grid; place-items: center; flex: none;
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--brand-soft); color: var(--brand);
}
.resume-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.resume-eyebrow { font-size: var(--fs-xs); font-weight: 600; color: var(--faint); }
.resume-title {
  font-size: var(--fs-base); font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.resume-chev { flex: none; color: var(--faint); transition: transform var(--motion), color var(--motion); }
.resume-card:hover .resume-chev { color: var(--brand-int); transform: translateX(3px); }

/* Two-door variant: the buttons inside carry the affordances, not the card. */
.resume-card.two-door { display: block; max-width: 520px; cursor: default; }
.resume-card.two-door:hover { transform: none; border-color: var(--hairline); }
.resume-head { display: flex; align-items: center; gap: 12px; }
.resume-paths { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 13px; }
.resume-go, .resume-tell {
  font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; white-space: nowrap;
  padding: 8px 15px; border-radius: var(--radius-pill); border: 1px solid var(--hairline);
  transition: border-color var(--motion), background var(--motion), color var(--motion);
}
.resume-go { background: var(--brand-int); border-color: var(--brand-int); color: #fff; }
.resume-go:hover { background: var(--brand); border-color: var(--brand); }
.resume-tell { background: var(--surface); color: var(--text); }
.resume-tell:hover { border-color: var(--brand-int); background: var(--brand-soft); color: var(--brand-int); }
.resume-go:focus-visible, .resume-tell:focus-visible { outline: 2px solid var(--brand-int); outline-offset: 2px; }

/* ---------- gate / preview banner ---------- */
#gate { max-width: var(--maxw); margin: 60px auto; text-align: center; color: var(--muted); }
/* A spinner, an escalating line, then a reload button, so a cold start does not read as broken. */
.gate-wait {
  max-width: var(--maxw); margin: 72px auto; display: flex; flex-direction: column;
  align-items: center; gap: 13px; color: var(--muted); font-size: var(--fs-sm); text-align: center;
}
.gate-spinner {
  width: 19px; height: 19px; border-radius: 50%; flex: none;
  border: 2px solid var(--hairline); border-top-color: var(--brand-int);
  animation: gate-spin 760ms linear infinite;
}
@keyframes gate-spin { to { transform: rotate(360deg); } }
/* Under reduced motion the spinner slows to a pulse instead of stopping: it is the only sign the page is working. */
@media (prefers-reduced-motion: reduce) {
  .gate-spinner { animation: gate-pulse 1.6s ease-in-out infinite; border-top-color: var(--brand-int); }
  @keyframes gate-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
}
.gate-msg { max-width: 46ch; line-height: 1.55; }
.gate-reload {
  font: inherit; font-size: var(--fs-sm); font-weight: 620; cursor: pointer;
  background: var(--brand); color: #fff; border: 0; border-radius: var(--radius-pill); padding: 8px 16px;
}
.gate-reload:hover { filter: brightness(1.08); }

/* The landing page's version: a veil over the map rather than a replacement. */
.signin-veil {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  background: color-mix(in oklab, var(--bg) 78%, transparent);
  backdrop-filter: blur(2px);
}
.signin-veil-box {
  display: flex; align-items: center; gap: 11px;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-pill);
  box-shadow: var(--shadow); padding: 12px 20px; color: var(--text); font-size: var(--fs-sm);
}
.preview-badge {
  position: fixed; bottom: 14px; right: 14px; z-index: 20;
  background: var(--brand); color: #fff; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em;
  padding: 5px 10px; border-radius: var(--radius-pill); box-shadow: var(--shadow); text-transform: uppercase;
}

/* focus visibility */
:focus-visible { outline: 2px solid var(--brand-int); outline-offset: 2px; border-radius: 6px; }

/* Subtle, theme-aware scrollbars everywhere, including the dark-mode sidebar. */
* { scrollbar-width: thin; scrollbar-color: var(--hairline) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--hairline); border-radius: 8px;
  border: 3px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--faint); background-clip: padding-box; }

/* Markdown tables in answers, streamed sections and the HR draft card. The wrapper scrolls; the table stays
   a table (display: block on a table ignores width and breaks sticky cells). */
.tbl-wrap { overflow-x: auto; }
.answer table, .as-body table, .hr-body table {
  border-collapse: collapse;
  width: 100%;
  margin: 0;
  font-size: 0.92em;
}
/* A floor under each column, so a wide table scrolls instead of wrapping cells into slivers. */
.tbl-wrap th, .tbl-wrap td { min-width: 7rem; }

/* ---- and when it genuinely does not fit ----
   The first column is the row's identity: sticky and opaque, repeating the stripe tint since a sticky cell
   paints over its row. */
.tbl-wrap.is-wide thead th:first-child,
.tbl-wrap.is-wide tbody td:first-child {
  position: sticky; inset-inline-start: 0; z-index: 1;
  background: var(--surface);
  box-shadow: 1px 0 0 var(--hairline);
}
.tbl-wrap.is-wide tbody tr:nth-child(even) td:first-child {
  background: color-mix(in srgb, var(--brand-soft) 45%, var(--surface));
}
/* ---- the scroll box: wide tables and code blocks, framed (frameScroller in chat.js) ----
   An overflowing scroller gets a frame, an always-drawn track, and edge fades. The fades live on the frame
   because anything inside a scroll container scrolls with it. */
.xs { position: relative; margin: 10px 0; --fade: var(--bg); --track: color-mix(in srgb, var(--text) 8%, transparent); }
.doc-body .xs { --fade: var(--surface); }
.xs.is-wide.xs-table { border: 1px solid var(--hairline); border-radius: 10px; overflow: hidden; }
/* Since Chromium 121, setting scrollbar-color/scrollbar-width disables ::-webkit-scrollbar rules, and `*` sets
   both above. Where the webkit pseudo-elements exist, reset the standard pair to auto; Firefox uses the pair. */
.xs.is-wide > .xs-scroll { scrollbar-width: thin; scrollbar-color: var(--faint) var(--track); }
@supports selector(::-webkit-scrollbar) {
  .xs.is-wide > .xs-scroll { scrollbar-width: auto; scrollbar-color: auto; }
}
.xs.is-wide > .xs-scroll::-webkit-scrollbar { height: 10px; }
/* No stepper arrows: at this size they read as stray glyphs at the corners of the table, not as controls. */
.xs.is-wide > .xs-scroll::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.xs.is-wide > .xs-scroll::-webkit-scrollbar-track { background: var(--track); border-radius: 0 0 8px 8px; }
.xs.is-wide > .xs-scroll::-webkit-scrollbar-thumb {
  background: var(--faint); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box;
}
.xs.is-wide > .xs-scroll::-webkit-scrollbar-thumb:hover { background: var(--muted, var(--faint)); background-clip: padding-box; }
.xs-scroll:focus-visible { outline: 2px solid var(--brand-int); outline-offset: -2px; }
/* Each fade stops short of the track, so the bar stays readable under it. */
.xs::before, .xs::after {
  content: ""; position: absolute; top: 0; bottom: 10px; width: 36px; z-index: 2;
  pointer-events: none; opacity: 0; transition: opacity .15s ease;
}
.xs::before { inset-inline-start: 0; background: linear-gradient(to right, var(--fade), transparent); }
.xs::after { inset-inline-end: 0; background: linear-gradient(to left, var(--fade), transparent); }
[dir="rtl"] .xs::before { background: linear-gradient(to left, var(--fade), transparent); }
[dir="rtl"] .xs::after { background: linear-gradient(to right, var(--fade), transparent); }
.xs.more-start::before, .xs.more-end::after { opacity: 1; }
/* No start fade on a table: the pinned first column marks that edge. */
.xs-table::before { display: none; }

/* The wrapper carries the tint: a scrolling pre paints its background only across the visible width. */
.xs-code { --fade: color-mix(in srgb, var(--text) 6%, var(--bg)); border-radius: 8px; overflow: hidden; }
.doc-body .xs-code { --fade: color-mix(in srgb, var(--text) 6%, var(--surface)); }
.code-wrap { overflow-x: auto; background: color-mix(in srgb, var(--text) 6%, transparent); border-radius: 8px; }
.code-wrap pre, .bubble .code-wrap pre {
  margin: 0; overflow: visible; background: none; border-radius: 0;
  width: max-content; min-width: 100%; box-sizing: border-box;
}
.answer thead th, .as-body thead th, .hr-body thead th {
  text-align: left;
  font-weight: 650;
  color: var(--brand);
  border-bottom: 2px solid var(--hairline);
  padding: 7px 12px;
  white-space: nowrap;
}
.answer tbody td, .as-body tbody td, .hr-body tbody td {
  padding: 7px 12px;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}
.answer tbody tr:last-child td, .as-body tbody tr:last-child td, .hr-body tbody tr:last-child td {
  border-bottom: none;
}
.answer tbody tr:nth-child(even), .as-body tbody tr:nth-child(even), .hr-body tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--brand-soft) 45%, transparent);
}

/* forge-viz inline charts (enhanceViz in chat.js), themed through the shared tokens. */
.forge-viz { margin: 12px 0; max-width: 600px; }
.forge-viz .viz-title { font-weight: 650; color: var(--brand); font-size: 0.92em; margin-bottom: 6px; }
.forge-viz svg { overflow: visible; }
.forge-viz .viz-lbl { fill: var(--muted); font-size: 12px; }
.forge-viz .viz-val { fill: var(--text); font-size: 12px; font-weight: 650; }
.forge-viz .viz-tickval { fill: var(--muted); font-size: var(--fs-2xs); }
.forge-viz .viz-track { fill: var(--hairline); }
.forge-viz .viz-tick { stroke: var(--muted); stroke-width: 1.5; }
.forge-viz .viz-dot { fill: var(--brand-int); stroke: var(--surface); stroke-width: 2.5; }
.viz-donut-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.forge-viz .viz-total { fill: var(--text); font-size: 15px; font-weight: 700; }
.forge-viz .viz-legend { display: flex; flex-direction: column; gap: 4px; }
.forge-viz .viz-leg { font-size: 0.9em; color: var(--text); }
.forge-viz .viz-sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.forge-viz .viz-grid { stroke: var(--hairline); stroke-width: 1; }
.forge-viz .viz-legend-row { flex-direction: row; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; }
/* Copy-as-image, one per chart: faint until the chart is hovered, always reachable by keyboard and touch. */
.forge-viz { position: relative; }
.forge-viz .viz-copy { position: absolute; top: -2px; right: 0; opacity: 0.45; }
.forge-viz:hover .viz-copy, .forge-viz .viz-copy:focus-visible, .forge-viz .viz-copy.is-done { opacity: 1; }

/* ---------- active outage banner ----------
   Collapsible, never dismissible. Zero outages renders nothing. */
.outages {
  display: flex; flex-direction: column; gap: 8px;
  max-width: var(--maxw); margin: 0 auto 12px;
}
.outage {
  border: 1px solid var(--warn);
  background: var(--warn-soft);
  border-radius: var(--radius-card);
  padding: 10px 12px;
}
.outage-head { display: flex; align-items: baseline; gap: 8px; }
.outage-label {
  font-weight: 650; font-size: var(--fs-xs); letter-spacing: .04em; text-transform: uppercase;
  color: var(--warn); white-space: nowrap;
}
.outage-desc { font-weight: 600; color: var(--text); }
.outage-meta { font-size: var(--fs-sm); color: var(--muted); margin-top: 2px; }
.outage-meta a { color: inherit; }
.outage-toggle {
  margin-left: auto; background: none; border: 0; cursor: pointer;
  font-size: var(--fs-sm); color: var(--muted); line-height: 1; padding: 2px 4px;
  border-radius: var(--radius-pill);
}
.outage-toggle:hover { color: var(--text); }
.outage.collapsed .outage-meta { display: none; }

/* ---------- the Chats rail (Multi doors only) ----------
   Tokens, not literals: a door's Branding.Tokens overrides them at :root. */
.rail-threads { display: flex; flex-direction: column; gap: 8px; margin-bottom: 26px; }
/* Empty at a Single door, or at a Multi door before the first thread. */
.rail-threads:empty { display: none; }

.thread-search {
  width: 100%; font: inherit; font-size: var(--fs-sm);
  padding: 8px 11px; border-radius: 10px;
  color: var(--text); background: var(--surface); border: 1px solid var(--hairline);
  transition: border-color var(--motion);
}
.thread-search::placeholder { color: var(--faint); }
.thread-search:focus { outline: none; border-color: var(--brand-int); }

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

.thread-item {
  text-align: left; border: none; background: none; color: var(--text); font: inherit; font-size: var(--fs-sm);
  padding: 9px 10px; border-radius: 9px; cursor: pointer; display: flex; align-items: center; gap: 9px;
  transition: background var(--motion);
}
.thread-item:hover { background: var(--brand-soft); }

/* ---------- the round trip, made visible ---------- */

/* A new chat has no title until the model writes one. */
.thread-topic.is-titling {
  display: inline-block; min-width: 118px; height: 11px; border-radius: 4px; vertical-align: middle;
  background: linear-gradient(90deg, var(--hairline) 25%,
    color-mix(in srgb, var(--hairline) 40%, transparent) 37%, var(--hairline) 63%);
  background-size: 400% 100%; animation: thread-shimmer 1.3s ease-in-out infinite;
}
@keyframes thread-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* Removing dims the row while the call is in flight; it collapses only once the server answers. */
.thread-row.is-removing, .thread-item.is-removing { pointer-events: none; opacity: .45; }
.thread-row.is-gone, .thread-item.is-gone {
  animation: thread-collapse 260ms cubic-bezier(.4, 0, .2, 1) forwards; overflow: hidden;
}
@keyframes thread-collapse {
  from { opacity: .45; max-height: 44px; }
  to   { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; margin: 0; }
}

/* ---------- the modal ---------- */
.modal-scrim {
  position: fixed; inset: 0; z-index: 65; background: rgba(15, 25, 45, .44); backdrop-filter: blur(3px);
  display: flex; align-items: flex-start; justify-content: center; padding-top: 15vh;
  animation: modal-fade var(--motion) both;
}
[data-theme="dark"] .modal-scrim { background: rgba(0, 0, 0, .62); }
@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
.modal {
  width: min(440px, 92vw); background: var(--bg-elev); border: 1px solid var(--hairline);
  border-radius: 14px; box-shadow: 0 26px 74px rgba(10, 25, 55, .32); padding: 22px 22px 18px;
  animation: modal-pop var(--motion-slow) cubic-bezier(.2, .6, .2, 1) both;
}
@keyframes modal-pop { from { opacity: 0; transform: translateY(-10px) scale(.985); } to { opacity: 1; transform: none; } }
.modal-title { margin: 0 0 8px; font-size: var(--fs-lg); font-weight: 650; letter-spacing: -.012em; }
.modal-body { margin: 0; color: var(--muted); font-size: var(--fs-sm); line-height: 1.55; }
.modal-quote {
  display: block; margin-top: 10px; padding: 9px 11px; background: var(--bg); border-radius: 8px;
  color: var(--text); font-weight: 550; font-size: var(--fs-sm);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.modal-keeps { margin: 12px 0 0; font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; }
.modal-acts { display: flex; justify-content: flex-end; gap: 9px; margin-top: 20px; }
.modal-btn {
  padding: 9px 16px; border-radius: 9px; border: 1px solid var(--hairline); background: var(--surface);
  color: var(--text); font: inherit; font-size: var(--fs-sm); font-weight: 580; cursor: pointer;
  transition: background var(--motion), border-color var(--motion);
}
.modal-btn:hover { background: var(--brand-soft); border-color: var(--brand-int); }
.modal-btn.danger { background: var(--warn); border-color: var(--warn); color: #fff; }
.modal-btn.danger:hover { filter: brightness(1.08); }
.modal-btn[disabled] { opacity: .6; cursor: default; }
@media (prefers-reduced-motion: reduce) {
  /* The states still apply; only the movement goes. */
  .thread-topic.is-titling, .modal-scrim, .modal { animation: none; }
  .thread-row.is-gone, .thread-item.is-gone { animation: none; display: none; }
}
.thread-item.is-active { background: var(--brand-soft); font-weight: 600; }

/* One line: a topic is model-written and can run long. */
.thread-topic { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Siblings, not nested: a button inside a button is invalid HTML. */
.thread-row { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.thread-row > .thread-item { flex: 1; min-width: 0; }
/* The last week before deletion, under the row; Kept is a quiet mark on the row itself. */
.thread-sub { flex-basis: 100%; display: flex; align-items: center; gap: 6px; padding: 0 10px 6px; margin-top: -4px; }
.thread-expiry { font-size: var(--fs-xs); color: var(--warn); white-space: nowrap; }
.thread-keep { border: 0; background: none; color: var(--brand); font: inherit; font-size: var(--fs-xs); font-weight: 600;
  padding: 1px 6px; border-radius: 6px; cursor: pointer; }
.thread-keep:hover { background: var(--brand-soft); }
.thread-kept { margin-left: auto; font-size: var(--fs-xs); color: var(--faint); flex: none; }
/* A document past its 90 days, before anyone clicks it, and the action under a tile near the end. */
.doc-tile.is-expired { opacity: .6; }
.dt-save { display: inline-flex; align-items: center; margin-top: 6px; font: inherit; font-size: var(--fs-xs); color: var(--brand);
  background: none; border: 1px solid var(--hairline); border-radius: var(--radius-pill); padding: 4px 10px; cursor: pointer; }
.dt-save:hover { background: var(--brand-soft); }
.dt-save:disabled { cursor: default; color: var(--muted); }
/* A link to a chat or schedule that no longer exists. */
.gone-card { max-width: 460px; margin: 30px auto; text-align: center; padding: 20px; border-radius: 14px; background: var(--surface);
  border: 1px solid var(--hairline); color: var(--muted); font-size: var(--fs-sm); }
.gone-card b { display: block; color: var(--text); font-size: var(--fs-base); margin-bottom: 4px; }
.gone-card p { margin: 0 0 12px; line-height: 1.5; }
.gone-card .gone-go { background: var(--brand); color: #fff; border-color: var(--brand); }
.gone-card .gone-go:hover { background: var(--brand); color: #fff; filter: brightness(1.08); }
/* Hidden until hover or focus; keyboard users reach it via :focus-visible. */
.thread-remove {
  flex: none; width: 22px; height: 22px; border: 0; background: none; cursor: pointer;
  color: var(--faint); border-radius: 6px; line-height: 1; font-size: 16px;
  opacity: 0; transition: opacity var(--motion), color var(--motion), background var(--motion);
}
.thread-row:hover .thread-remove,
.thread-remove:focus-visible { opacity: 1; }
.thread-remove:hover { color: var(--warn); background: var(--warn-soft); }

.thread-closed { flex: none; display: inline-grid; place-items: center; color: var(--faint); }


/* ---------- whole-window drop target (attachments) ----------
   pointer-events: none; the drop lands on the document handler. */
#drop {
  position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center;
  background: color-mix(in oklab, var(--bg) 55%, transparent); backdrop-filter: blur(2px);
  pointer-events: none;
}
#drop[hidden] { display: none; }
.drop-ring {
  display: flex; align-items: center; gap: 10px; padding: 18px 26px;
  border: 2px dashed var(--brand-int); border-radius: var(--radius-card);
  background: var(--bg-elev); color: var(--brand-int); box-shadow: var(--shadow);
  font-size: var(--fs-base); font-weight: 600;
  animation: rise var(--motion-slow) both;
}
.drop-ring svg { width: 20px; height: 20px; }
@media (prefers-reduced-motion: reduce) { .drop-ring { animation: none; } }

/* ---------- citation hover preview ----------
   A fixed, non-interactive echo of the source card. */
#citepop {
  position: fixed; z-index: 80; max-width: 320px; pointer-events: none;
  display: flex; flex-direction: column; gap: 3px;
  padding: 8px 12px; border: 1px solid var(--hairline); border-radius: var(--radius-card);
  background: var(--bg-elev); box-shadow: var(--shadow);
  animation: rise var(--motion) both;
}
#citepop[hidden] { display: none; }
.cp-head { display: flex; align-items: center; gap: 7px; min-width: 0; }
.cp-head svg { width: 14px; height: 14px; flex: none; color: var(--muted); }
.cp-title { font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.cp-meta { font-size: var(--fs-xs); color: var(--muted); }
@media (prefers-reduced-motion: reduce) { #citepop { animation: none; } }

/* ---------- the verdict (one per conversation) ----------
   Joined to the composer: it shares the border, squares the corners where they meet, and has no shadow. */
.verdict-sheet {
  max-width: var(--maxw); margin: 0 auto;
  padding: 11px 15px 12px;
  background: var(--bg-elev);
  border: 1px solid var(--hairline); border-bottom: 0;
  border-radius: 20px 20px 0 0;
  animation: rise var(--motion) both;
}
.composer-wrap.rating .composer { border-top-left-radius: 0; border-top-right-radius: 0; }

.verdict-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* min-width so the question keeps a readable line before the controls wrap under it rather than one word
   per line beside them. */
.verdict-q { flex: 1; min-width: 150px; font-size: var(--fs-sm); color: var(--muted); }

.verdict-opt {
  font: inherit; font-size: var(--fs-xs); font-weight: 600; cursor: pointer; white-space: nowrap;
  padding: 6px 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--hairline); background: var(--surface); color: var(--text);
  transition: border-color var(--motion), background var(--motion), color var(--motion);
}
.verdict-opt:hover { border-color: var(--brand-int); background: var(--brand-soft); color: var(--brand-int); }
.verdict-opt:focus-visible { outline: 2px solid var(--brand-int); outline-offset: 2px; }

.verdict-dim {
  font: inherit; font-size: var(--fs-xs); cursor: pointer;
  background: none; border: 0; padding: 6px 8px; color: var(--faint);
}
.verdict-dim:hover { color: var(--muted); }

.verdict-reasons { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.verdict-chip {
  font: inherit; font-size: var(--fs-xs); font-weight: 560; cursor: pointer;
  padding: 6px 11px; border-radius: var(--radius-pill);
  border: 1px solid var(--hairline); background: var(--surface); color: var(--text);
  transition: border-color var(--motion), background var(--motion), color var(--motion);
}
.verdict-chip:hover { border-color: var(--brand-int); color: var(--brand-int); }
/* Border, background and color, never color alone, so the selection is obvious without color vision. */
.verdict-chip.on { background: var(--brand-soft); border-color: var(--brand-int); color: var(--brand-int); }

.verdict-send { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.verdict-input {
  flex: 1; min-width: 0; font: inherit; font-size: var(--fs-sm); color: var(--text);
  padding: 7px 10px; border: 1px solid var(--hairline); border-radius: var(--radius-card);
  background: var(--surface);
}
.verdict-input:focus { outline: none; border-color: var(--brand-int); }
.verdict-go, .verdict-skip {
  font: inherit; font-size: var(--fs-xs); font-weight: 600; cursor: pointer; white-space: nowrap;
  padding: 7px 12px; border-radius: var(--radius-pill); border: 1px solid var(--hairline);
  transition: border-color var(--motion), background var(--motion);
}
.verdict-go { background: var(--brand-int); border-color: var(--brand-int); color: #fff; }
.verdict-skip { background: none; color: var(--muted); }
.verdict-skip:hover { color: var(--text); border-color: var(--muted); }

.verdict-acts { flex-wrap: wrap; }
.verdict-what {
  font: inherit; font-size: var(--fs-xs); font-weight: 600; cursor: pointer;
  background: none; border: 0; padding: 7px 4px; color: var(--faint);
  text-decoration: underline; text-underline-offset: 3px;
}
.verdict-what:hover { color: var(--brand-int); }
/* What handing the conversation over actually means, in the three facts somebody needs to decide: how much,
   what is excluded, and how long it lives. */
.verdict-note {
  margin-top: 9px; padding: 9px 11px; font-size: var(--fs-xs); color: var(--muted);
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-card);
}

.verdict-thanks { font-size: var(--fs-sm); color: var(--muted); }

/* The re-entry mount: the verdict opens INSIDE the resume card, under its own rule, rather than replacing
   the card or navigating anywhere. */
.resume-verdict { border-top: 1px solid var(--hairline); margin: 12px -15px 0; padding: 12px 15px 0; }

@media (prefers-reduced-motion: reduce) { .verdict-sheet { animation: none; } }

/* ---------- upload-size notice + chip size label ---------- */
.pending-note {
  font-size: var(--fs-xs); color: var(--text); background: var(--warn-soft);
  border: 1px solid var(--warn); border-radius: var(--radius-card); padding: 7px 11px;
  animation: rise var(--motion) both; max-width: 100%;
}
.pending-note.note-fade { opacity: 0; transition: opacity 400ms ease; }
.filechip .fsize { color: var(--faint); font-size: var(--fs-xs); margin-left: 6px; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .pending-note { animation: none; } .pending-note.note-fade { transition: none; } }
/* The sign-in gate (signin.js renderSignInGate). */
.signin-gate { max-width: var(--maxw); margin: 60px auto; display: flex; justify-content: center; }
.signin-card {
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-card);
  box-shadow: var(--shadow); padding: 28px 30px; max-width: 460px; text-align: left;
}
.signin-title { margin: 0 0 10px; font-size: var(--fs-lg); font-weight: 700; color: var(--text); }
.signin-detail { margin: 0 0 18px; font-size: var(--fs-sm); color: var(--muted); line-height: 1.55; }
.signin-btn {
  appearance: none; border: 0; cursor: pointer; font: inherit; font-weight: 650;
  background: var(--brand); color: #fff; padding: 10px 18px; border-radius: var(--radius-pill);
}
.signin-btn:hover:not(:disabled) { filter: brightness(1.08); }
.signin-btn:disabled { opacity: .6; cursor: default; }
/* chat.css names this --warn and audit.css names it --danger; the fallback lets one block serve both. */
.signin-error { margin: 14px 0 0; color: var(--danger, var(--warn)); }

/* Language picker, in the profile panel between the directory rows and Sign out. */
.pp-lang {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 0 12px; margin-top: 2px; border-top: 1px solid var(--hairline);
}
.pp-lang-label { font-size: var(--fs-xs); color: var(--faint); }
.pp-lang-select {
  font: inherit; font-size: var(--fs-sm); color: var(--text);
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius-pill); padding: 5px 10px; cursor: pointer; max-width: 60%;
}
.pp-lang-select:hover { border-color: var(--brand-int); }
.pp-lang-select:focus-visible { outline: 2px solid var(--brand-int); outline-offset: 1px; }

/* Visually hidden, not hidden: display: none and visibility: hidden also remove the node from the
   accessibility tree. white-space: nowrap stops engines collapsing a long announcement in the 1px box. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* ---------- rail destinations + workspace ----------
   The workspace is a launcher; the composer stays put underneath. */
.rail-nav {
  width: 100%; display: flex; align-items: center; gap: 9px; font: inherit; font-size: var(--fs-sm);
  color: var(--muted); background: none; border: 0; border-radius: 8px; padding: 8px 10px;
  cursor: pointer; text-align: left; transition: background var(--motion), color var(--motion);
}
.rail-nav svg { flex: none; opacity: .9; }
.rail-nav:hover { background: var(--brand-soft); color: var(--brand); }
.rail-nav[aria-current="true"] { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.rail-nav:focus-visible { outline: 2px solid var(--brand-int); outline-offset: -2px; }

.workspace { padding: 2px 10px 30px 26px; }
.ws-sub { color: var(--muted); font-size: var(--fs-sm); margin: 0 0 18px; max-width: 62ch; line-height: 1.55; }

.ws-drop {
  border: 1.5px dashed var(--hairline); border-radius: var(--radius-card); padding: 22px 18px;
  text-align: center; background: var(--surface); color: var(--muted); font-size: var(--fs-sm);
  cursor: pointer; margin-bottom: 22px; transition: border-color var(--motion), background var(--motion);
}
.ws-drop:hover, .ws-drop.over { border-color: var(--brand-int); background: var(--brand-soft); }
.ws-drop b { display: block; color: var(--text); font-size: var(--fs-base); font-weight: 600; margin-bottom: 3px; }
.ws-drop span { font-size: var(--fs-xs); color: var(--faint); }

.ws-group {
  font-size: var(--fs-xs); letter-spacing: .085em; text-transform: uppercase; color: var(--faint);
  font-weight: 700; margin: 0 0 9px;
}
/* One definition only: a later duplicate at equal specificity would override the narrow-screen media query. */
.ws-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 9px; margin-bottom: 22px; }
.ws-card {
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-card);
  padding: 11px 13px; cursor: pointer; text-align: left; font: inherit; color: var(--text);
  transition: border-color var(--motion), transform var(--motion);
}
.ws-card:hover { border-color: var(--brand-int); transform: translateY(-1px); }
.ws-card:focus-visible { outline: 2px solid var(--brand-int); outline-offset: 2px; }
.ws-card .ws-lbl { display: block; font-size: var(--fs-sm); font-weight: 600; line-height: 1.3; }
.ws-card .ws-eg { display: block; font-size: var(--fs-xs); color: var(--faint); margin-top: 3px; line-height: 1.35; }

.ws-doc {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--surface);
  border: 1px solid var(--hairline); border-radius: 10px; margin-bottom: 6px; font-size: var(--fs-sm);
  width: 100%; text-align: left; font-family: inherit; color: var(--text); cursor: pointer;
}
.ws-doc:hover { border-color: var(--brand-int); }
.ws-doc .ws-ic {
  width: 23px; height: 23px; border-radius: 5px; background: var(--brand-soft); color: var(--brand);
  display: grid; place-items: center; font-size: 10px; font-weight: 700; flex: none;
}
.ws-doc .ws-nm { flex: 1; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-doc .ws-go { color: var(--brand-int); font-size: var(--fs-xs); font-weight: 600; }
.ws-empty { color: var(--faint); font-size: var(--fs-sm); }

@media (max-width: 640px) {
  .workspace { padding: 2px 12px 26px; }
  .ws-grid { grid-template-columns: 1fr; }
}

/* ---------- document canvas ---------- */
.cv-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.cv-back {
  font: inherit; font-size: var(--fs-sm); background: none; border: 0; color: var(--brand-int);
  cursor: pointer; padding: 4px 2px; font-weight: 600;
}
.cv-back:hover { text-decoration: underline; }
.cv-title { font-size: var(--fs-lg); font-weight: 600; flex: 1; min-width: 180px; }
.cv-pill {
  font-size: var(--fs-xs); padding: 2px 9px; border-radius: var(--radius-pill); font-weight: 700;
  background: var(--warn-soft); color: var(--warn);
}
/* A textarea, not a rich editor: generate_document takes plain title and paragraphs. */
.cv-body {
  width: 100%; min-height: 320px; resize: vertical; font: inherit; font-size: var(--fs-sm);
  line-height: 1.62; padding: 16px 18px; border: 1px solid var(--hairline);
  border-radius: var(--radius-card); background: var(--surface); color: var(--text);
}
.cv-body:focus { outline: none; border-color: var(--brand-int); }
.cv-echo { font-size: var(--fs-xs); color: var(--faint); margin: 7px 2px 16px; }
.cv-revise { display: flex; gap: 9px; align-items: center; }
.cv-in {
  flex: 1; font: inherit; font-size: var(--fs-sm); padding: 9px 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--brand-int); background: var(--surface); color: var(--text);
}
.cv-in:focus { outline: none; box-shadow: 0 0 0 3px var(--brand-soft); }
.cv-hint { font-size: var(--fs-xs); color: var(--faint); margin: 8px 2px 0; max-width: 68ch; line-height: 1.5; }

.cv-pill.cv-edited { background: var(--brand-soft); color: var(--brand); }

/* A revision that produced no document: warn-toned, since nothing failed. */
.cv-missed {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px;
  padding: 10px 13px; border-radius: 10px; background: var(--warn-soft); color: var(--warn);
  font-size: var(--fs-sm); line-height: 1.5;
}
.cv-missed span { flex: 1; min-width: 200px; }
.cv-missed .btn-ghost { flex: none; }

/* The result of a forge-edit block: green when it landed, warn-toned when it did not match. */
.cv-applied {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 10px 0;
  padding: 10px 13px; border-radius: 10px; font-size: var(--fs-sm); line-height: 1.5;
}
.cv-applied span { flex: 1; min-width: 200px; }
.cv-applied.ok { background: var(--success-soft); color: var(--success); }
.cv-applied.bad { background: var(--warn-soft); color: var(--warn); }
.cv-applied .btn-ghost { flex: none; }

.cv-versions { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 14px; }
.cv-ver {
  font: inherit; font-size: var(--fs-xs); padding: 4px 11px; border-radius: var(--radius-pill);
  border: 1px solid var(--hairline); background: var(--surface); color: var(--muted); cursor: pointer;
}
.cv-ver:hover { border-color: var(--brand-int); color: var(--brand); }
.ws-doc .ws-ver { font-size: var(--fs-xs); color: var(--faint); flex: none; }

/* ---------- launcher cards: icon, title, what it does ---------------------------- */
.ws-searchwrap {
  display: flex; align-items: center; gap: 9px; max-width: 430px; margin: 0 0 20px;
  border: 1px solid var(--hairline); border-radius: 10px; padding: 0 12px; background: var(--surface);
  color: var(--faint);
}
.ws-searchwrap:focus-within { border-color: var(--brand-int); }
.ws-searchwrap svg { width: 16px; height: 16px; flex: none; }
.ws-search {
  flex: 1; border: 0; background: none; font: inherit; font-size: var(--fs-sm); color: var(--text);
  padding: 9px 0; outline: none;
}
.ws-search::-webkit-search-cancel-button { cursor: pointer; }
.ws-none { color: var(--faint); font-size: var(--fs-sm); margin: 0 0 18px; }

.ws-card {
  display: flex; align-items: flex-start; gap: 11px;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-card);
  padding: 12px 13px; cursor: pointer; text-align: left; font: inherit; color: var(--text);
  transition: border-color var(--motion), transform var(--motion);
}
.ws-card:hover { border-color: var(--brand-int); transform: translateY(-1px); }
.ws-card .ws-icn {
  width: 32px; height: 32px; border-radius: 8px; flex: none; display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand);
}
.ws-card .ws-icn svg { width: 17px; height: 17px; }
.ws-card .ws-txt { display: block; min-width: 0; }
.ws-card .ws-lbl { display: block; font-size: var(--fs-sm); font-weight: 600; line-height: 1.3; }
/* Two lines, then ellipsis: a description that wraps to four turns a tidy grid into a ragged one, and the
   sentence was written to fit. */
.ws-card .ws-desc {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: var(--fs-xs); color: var(--muted); margin-top: 3px; line-height: 1.4;
}

/* ---------- rail: a destination with weight, and a list that admits it is empty ---------- */

/* Start a task is a destination: a tinted rest state and a rule set it apart from the quick links. */
.rail-nav-primary {
  background: var(--brand-soft); color: var(--brand); font-weight: 600;
  margin-bottom: 10px; padding-top: 9px; padding-bottom: 9px;
}
.rail-nav-primary::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: -6px; height: 1px;
  background: var(--hairline);
}
.rail-nav-primary { position: relative; }
.rail-nav-primary:hover { background: var(--brand-soft); color: var(--brand); }

.rail-skel { padding: 2px 4px; }
.rail-skel span {
  display: block; height: 13px; border-radius: 5px; margin: 0 6px 9px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--text) 7%, transparent) 25%,
    color-mix(in srgb, var(--text) 12%, transparent) 37%,
    color-mix(in srgb, var(--text) 7%, transparent) 63%);
  background-size: 400% 100%;
  animation: rail-shimmer 1.4s ease-in-out infinite;
}
.rail-skel span:nth-child(2) { width: 78%; }
.rail-skel span:nth-child(3) { width: 61%; }
@keyframes rail-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
/* --motion is zeroed under reduced motion, but a shimmer has to opt out itself. */
@media (prefers-reduced-motion: reduce) { .rail-skel span { animation: none; } }

/* A link, styled as a sibling of Sign out rather than a button, because it navigates. */
.pp-admin {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 9px 12px; margin-top: 4px; border-radius: 9px;
  font-size: var(--fs-sm); color: var(--muted); text-decoration: none;
  transition: background var(--motion), color var(--motion);
}
.pp-admin:hover { background: var(--brand-soft); color: var(--brand); }
.pp-admin svg { flex: none; opacity: .9; }

/* ---------- the empty state is a centered page, not a blank one ----------
   .composer-wrap is a sibling of main, so it rides up without moving in the DOM and keeps focus and attachments. */
.center.is-empty { justify-content: center; }
.center.is-empty main { flex: 0 1 auto; overflow: visible; }
.center.is-empty #empty { padding-bottom: 4px; }
/* The hint under the composer is noise on a page with nothing in it yet; it earns its place once somebody
   is actually composing a follow-up. */
.center.is-empty .composer-hint { opacity: 0; transition: opacity var(--motion); }
.center.is-empty .composer-wrap:focus-within .composer-hint { opacity: 1; }

.center.is-empty #empty { max-width: var(--maxw); margin: 0 auto; padding-left: 20px; padding-right: 20px; }
.center.is-empty .hello { margin-top: 0; }

.center.is-empty .chip-grid { margin-bottom: 4px; }

@media (max-height: 620px) {
  /* Short viewport: stop centring or the chips get pushed under the fold. */
  .center.is-empty { justify-content: flex-start; }
  .center.is-empty main { flex: 1; overflow-y: auto; }
}

.empty-task { display: flex; justify-content: center; margin-top: 14px; }
.empty-task-link {
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-size: var(--fs-sm); font-weight: 600;
  color: var(--muted); background: var(--surface);
  border: 1px solid var(--hairline); border-radius: var(--radius-pill);
  padding: 8px 16px; cursor: pointer;
  transition: border-color var(--motion), color var(--motion);
}
.empty-task-link:hover { border-color: var(--brand-int); color: var(--brand); }
.empty-task-link:focus-visible { outline: 2px solid var(--brand-int); outline-offset: 2px; }
.empty-task-link svg { width: 16px; height: 16px; flex: none; }

/* ---------- the document panel ----------
   A third column shown only while a document exists; the tickets rail steps aside. */
.doc-panel {
  width: 430px; flex: none; display: flex; flex-direction: column; min-height: 0;
  background: var(--bg-elev); border-left: 1px solid var(--hairline);
  position: relative;
}
/* The grip sits on the border, with a hit area wider than the visible line. */
.doc-grip {
  position: absolute; top: 0; bottom: 0; left: -3px; width: 7px; z-index: 2;
  cursor: col-resize; background: transparent;
}
.doc-grip::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 3px; width: 1px;
  background: transparent; transition: background var(--motion);
}
.doc-grip:hover::after, .doc-grip:focus-visible::after { background: var(--brand-int); }
.doc-grip:focus-visible { outline: none; }
/* While dragging, stop the pointer selecting text. */
body.doc-resizing { cursor: col-resize; user-select: none; }
/* Folded, the panel is a 52px strip and the tickets rail keeps its place beside it. */
.shell:has(.doc-panel:not([hidden]):not(.is-folded)) .rail-right { display: none; }

.doc-head {
  display: flex; align-items: center; gap: 8px; padding: 11px 12px 11px 16px;
  border-bottom: 1px solid var(--hairline);
}
.doc-title {
  flex: 1; min-width: 0; font-size: var(--fs-sm); font-weight: 650; letter-spacing: -.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.doc-views { display: flex; gap: 4px; padding: 8px 12px 0 16px; }
.doc-view {
  font: inherit; font-size: var(--fs-xs); font-weight: 600; padding: 5px 12px; cursor: pointer;
  border: 1px solid var(--hairline); background: transparent; color: var(--muted);
  border-radius: var(--radius-pill); transition: background var(--motion), color var(--motion);
}
.doc-view:hover { color: var(--text); }
.doc-view.on { background: var(--brand-int); border-color: var(--brand-int); color: #fff; }

.doc-render { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 10px 12px 12px; }
/* No border: the PDF brings its own page. */
.doc-frame { flex: 1; width: 100%; border: 0; border-radius: 8px; background: var(--surface); }
.doc-render-note {
  margin: 8px 4px; font-size: var(--fs-xs); color: var(--muted); line-height: 1.5;
}

.doc-pill:empty { display: none; }
.doc-pill {
  font-size: var(--fs-2xs); font-weight: 700; padding: 2px 8px; border-radius: var(--radius-pill);
  background: var(--warn-soft); color: var(--warn); flex: none; white-space: nowrap;
}
.doc-btn {
  font: inherit; font-size: var(--fs-xs); font-weight: 600; padding: 6px 12px; border-radius: 8px;
  border: 1px solid var(--hairline); background: var(--surface); color: var(--muted); cursor: pointer;
  flex: none;
}
.doc-btn:hover { border-color: var(--brand-int); color: var(--brand); }
.doc-x {
  width: 28px; height: 28px; border: 0; background: none; color: var(--faint); cursor: pointer;
  border-radius: 7px; display: grid; place-items: center; flex: none;
}
.doc-x:hover { color: var(--text); background: var(--brand-soft); }

.doc-body {
  flex: 1; overflow-y: auto; padding: 20px 22px 8px;
  font-size: var(--fs-sm); line-height: 1.62; color: var(--text); background: var(--surface);
}
.doc-body h1, .doc-body h2, .doc-body h3 {
  font-size: var(--fs-base); font-weight: 650; letter-spacing: -.005em; margin: 20px 0 7px;
}
.doc-body h1:first-child, .doc-body h2:first-child, .doc-body h3:first-child { margin-top: 0; }
.doc-body p { margin: 0 0 11px; }
.doc-body .doc-image { display: block; max-width: 100%; height: auto; margin: 0 auto 11px; border-radius: 6px; }
.doc-body ul, .doc-body ol { margin: 0 0 11px; padding-left: 20px; }
.doc-body li { margin-bottom: 4px; }
.doc-body table { border-collapse: collapse; width: 100%; margin: 0; font-size: var(--fs-xs); }
/* A spreadsheet opens here as a markdown table; a tighter column floor than an answer's. */
.doc-body .tbl-wrap { margin: 0 0 12px; }
.doc-body .tbl-wrap th, .doc-body .tbl-wrap td { min-width: 6rem; }
.doc-body .tbl-wrap.is-wide thead th:first-child,
.doc-body .tbl-wrap.is-wide tbody td:first-child { background: var(--surface); }
.doc-body th, .doc-body td { border: 1px solid var(--hairline); padding: 5px 8px; text-align: left; }
.doc-body th { background: var(--brand-soft); color: var(--brand); font-weight: 650; }
/* The blanks the model left for a human, made obvious rather than buried in a paragraph. */
.doc-body .ph { background: var(--warn-soft); color: var(--warn); border-radius: 4px; padding: 0 4px; font-weight: 600; }
.doc-hint {
  margin: 0; padding: 9px 16px 12px; font-size: var(--fs-xs); color: var(--faint);
  border-top: 1px solid var(--hairline); background: var(--bg-elev);
}

/* Only when the reader has not dragged a width; the grip's inline style wins. */
@media (max-width: 1280px) { .doc-panel:not([style*="width"]) { width: 360px; } }
@media (max-width: 1000px) { .doc-panel { display: none; } }

/* ---------- the audience chip ---------- */
.aud-wrap { position: relative; }
.aud-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-int); flex: none; }
/* Customer-safe is a state that stays visible without opening anything. */
.aud-btn.cust { border-color: var(--warn); color: var(--warn); background: var(--warn-soft); }
.aud-btn.cust .aud-dot { background: var(--warn); }
.composer.cust { border-color: var(--warn); }

.aud-menu {
  position: absolute; bottom: calc(100% + 8px); right: 0; z-index: 40; width: 262px;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px;
  box-shadow: var(--shadow); padding: 6px; text-align: left;
}
.aud-opt {
  display: flex; gap: 9px; align-items: flex-start; width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; border-radius: 9px; padding: 8px 9px; font: inherit;
  transition: background var(--motion);
}
.aud-opt:hover { background: var(--brand-soft); }
.aud-opt .d { width: 8px; height: 8px; border-radius: 50%; flex: none; margin-top: 5px; }
.aud-opt .t { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.aud-opt .s { display: block; font-size: var(--fs-xs); color: var(--faint); margin-top: 1px; }
.aud-note {
  margin: 4px 6px 3px; font-size: var(--fs-xs); color: var(--faint); line-height: 1.45;
  border-top: 1px solid var(--hairline); padding-top: 7px;
}

/* ---------- HR "Preview as" ----------
   Brand color, not warning: nothing is narrowed, the tester sees through someone else's eyes. */
.pv-btn.on { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.pv-btn.on .aud-dot { background: var(--brand); }
.composer.pv { border-color: var(--brand); }
.pv-banner {
  margin: 0 0 6px; padding: 6px 12px; border-radius: 9px;
  font-size: var(--fs-xs); line-height: 1.45; color: var(--brand); background: var(--brand-soft);
}
/* ---------- your assistants (assistants.js) ---------- */
.as-edit {
  border: 0; background: none; color: var(--faint); cursor: pointer; border-radius: 7px;
  width: 24px; height: 24px; display: inline-grid; place-items: center; font-size: var(--fs-sm);
  transition: background var(--motion), color var(--motion);
}
.as-edit:hover { background: var(--brand-soft); color: var(--brand-int); }
.as-edit:focus-visible { outline: 2px solid var(--brand-int); outline-offset: 1px; }
.as-row { display: flex; align-items: center; gap: 2px; }
.as-row .as-go { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-row .as-edit { opacity: 0; }
.as-row:hover .as-edit, .as-row:focus-within .as-edit { opacity: 1; }
.as-go { border: 0; background: none; font: inherit; text-align: left; cursor: pointer; width: 100%; }
.as-banner { display: block; }
.as-hero { margin: 18px auto 0; max-width: 560px; text-align: center; }
.as-hero-name { font-size: var(--fs-lg); font-weight: 650; color: var(--text); }
.as-hero-desc { margin-top: 4px; font-size: var(--fs-sm); color: var(--muted); }
.as-starters-row { margin-top: 14px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.as-starter {
  border: 1px solid var(--hairline); background: var(--surface); color: var(--text); font: inherit;
  font-size: var(--fs-sm); padding: 8px 14px; border-radius: var(--radius-pill); cursor: pointer;
  transition: border-color var(--motion), background var(--motion);
}
.as-starter:hover { border-color: var(--brand-int); background: var(--brand-soft); }
.as-dialog {
  width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; overflow: auto;
  color: var(--text); background: var(--surface); border: 1px solid var(--hairline); border-radius: 14px;
  box-shadow: var(--shadow);
}
.sc-dialog { width: min(820px, calc(100vw - 32px)); }
.sc-dialog .as-field textarea { min-height: 220px; border-top-left-radius: 0; border-top-right-radius: 0; }
.sc-format {
  display: flex; gap: 2px; padding: 4px; margin-bottom: -5px; border: 1px solid var(--hairline); border-bottom: 0;
  border-radius: 9px 9px 0 0; background: var(--bg);
}
.sc-fmt {
  min-width: 30px; height: 28px; padding: 0 8px; border: 0; border-radius: 6px; background: none; color: var(--muted);
  font: inherit; font-size: var(--fs-sm); cursor: pointer;
}
.sc-fmt:hover { background: var(--brand-soft); color: var(--text); }
.sc-fmt:focus-visible { outline: 2px solid var(--brand-int); outline-offset: -2px; }
.sc-fmt-bold { font-weight: 800; }
.as-dialog::backdrop { background: color-mix(in srgb, var(--bg) 55%, transparent); backdrop-filter: blur(3px); }
.as-form { display: flex; flex-direction: column; gap: 12px; padding: 20px 22px; }
.as-title { margin: 0; font-size: var(--fs-lg); font-weight: 650; }
.as-intro { margin: -4px 0 2px; font-size: var(--fs-sm); color: var(--muted); }
.as-field { display: flex; flex-direction: column; gap: 4px; }
.as-label { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); padding: 0; }
.as-hint { font-size: var(--fs-xs); color: var(--faint); }
.as-field input, .as-field textarea, .as-starters input {
  width: 100%; padding: 8px 10px; font: inherit; font-size: var(--fs-sm); color: var(--text);
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 8px; box-sizing: border-box;
}
.as-field textarea { resize: vertical; min-height: 120px; line-height: 1.5; }
.as-field input:focus, .as-field textarea:focus, .as-starters input:focus { outline: 2px solid var(--brand-int); outline-offset: -1px; }
.as-abilities, .as-starters { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; }
.as-abilities { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.as-abilities legend, .as-starters legend { margin-bottom: 6px; }
.as-check { display: flex; gap: 8px; align-items: center; font-size: var(--fs-sm); }
/* Start from: the builder's templates. Picking one fills the form below; Blank empties it. */
.as-tp-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.as-tp {
  display: flex; flex-direction: column; gap: 3px; padding: 9px 11px; text-align: left; cursor: pointer;
  font: inherit; font-size: var(--fs-sm); color: var(--text);
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 10px;
  transition: border-color var(--motion), background var(--motion);
}
.as-tp b { font-weight: 600; }
.as-tp span { font-size: var(--fs-xs); color: var(--faint); line-height: 1.35; }
.as-tp:hover, .as-tp.on { border-color: var(--brand-int); background: var(--brand-soft); }
.as-tp:focus-visible { outline: 2px solid var(--brand-int); outline-offset: 1px; }
.as-tp-blank { border-style: dashed; }
.as-error { margin: 0; font-size: var(--fs-sm); color: var(--warn); }
.as-actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; margin-top: 4px; }
.as-cancel, .as-delete {
  border: 1px solid var(--hairline); background: var(--surface); color: var(--text); font: inherit;
  font-size: var(--fs-sm); padding: 8px 16px; border-radius: var(--radius-pill); cursor: pointer;
}
.as-delete { margin-right: auto; color: var(--warn); }
.as-cancel:hover { border-color: var(--brand-int); }
.as-delete:hover { border-color: var(--warn); }
.pv-menu { width: 288px; padding: 10px 12px; }
.pv-title { margin: 0 0 8px; font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.pv-field { display: block; margin: 0 0 8px; font-size: var(--fs-xs); color: var(--faint); }
.pv-field select, .pv-field input {
  display: block; width: 100%; margin-top: 3px; padding: 6px 8px; font: inherit; font-size: var(--fs-sm);
  color: var(--text); background: var(--surface); border: 1px solid var(--hairline); border-radius: 8px;
}
.pv-check { display: flex; gap: 7px; align-items: center; margin: 0 0 6px; font-size: var(--fs-sm); color: var(--text); }
.pv-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.pv-go { border-color: var(--brand); color: var(--brand); }

/* ---------- the standing caveat under the composer ---------- */
.policy-link {
  color: var(--muted); text-decoration: underline; text-underline-offset: 2px;
  text-decoration-thickness: 1px; white-space: nowrap;
}
.policy-link:hover { color: var(--brand-int); text-decoration-thickness: 2px; }
.policy-link:focus-visible { outline: 2px solid var(--brand-int); outline-offset: 2px; border-radius: 3px; }
/* The caveat stays visible on an empty page, unlike the hint this line used to hold. */
.center.is-empty .composer-hint { opacity: 1; }

/* The landing page's copy of the same line, which has no composer to sit under. */
.policy-foot {
  max-width: var(--maxw); margin: 40px auto 0; text-align: center;
  color: var(--faint); font-size: var(--fs-xs);
}

/* ---------- what an answer stands on ----------
   The only green in the transcript, so it reads as a clearance, not a usage state. */
.ans-safe {
  display: inline-flex; align-items: center; gap: 5px; margin-left: 10px;
  font-size: var(--fs-xs); font-weight: 600; color: var(--success);
  border: 1px solid color-mix(in oklab, var(--success) 45%, transparent);
  background: var(--success-soft); border-radius: var(--radius-pill); padding: 1px 8px 1px 6px;
  white-space: nowrap; flex: none;
}
.ans-safe svg { flex: none; }
/* The preview text gives way first: the badge is a fact and the preview is a convenience. */
.cites summary .cites-preview { min-width: 0; }

/* ---------- the composer tool row ---------- */
.composer-top { display: flex; align-items: flex-end; gap: 8px; }
/* min-width: 0 on the spacer so it collapses before the controls do. */
.composer-tools { display: flex; align-items: center; gap: 4px; padding: 2px 2px 0; min-width: 0; flex-wrap: wrap; row-gap: 4px; }
/* Moves to a second row whole when the row runs out of room, rather than dropping words. */
.tools-right { display: flex; align-items: center; gap: inherit; margin-left: auto; flex: none; max-width: 100%; }
.ctool-gap { flex: 1 1 auto; min-width: 0; }

.ctool {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font: inherit; font-size: var(--fs-xs); color: var(--muted);
  background: none; border: 1px solid transparent; border-radius: var(--radius-pill);
  padding: 4px 9px;
  /* A toolbar control never wraps or shrinks; the media queries below decide which labels go. */
  white-space: nowrap; flex: none;
  transition: background var(--motion), border-color var(--motion), color var(--motion);
}
.ctool:hover { background: var(--brand-soft); color: var(--brand); }
.ctool:focus-visible { outline: 2px solid var(--brand-int); outline-offset: 1px; }
/* Open is a STATE, not a hover. Without this the trigger looks identical whether the sheet above it is
   open or shut, which is the one thing a disclosure control has to say. */
.ctool.on { border-color: var(--brand-int); color: var(--brand); background: var(--brand-soft); }
/* Sized here: the I.* glyphs in chat.js are bare 24-unit viewBox SVGs with no width or height. */
.ctool svg { flex: none; width: 15px; height: 15px; }

/* ---------- Tools and guided starts (guided.js) ----------
   Opens upward, over the conversation: the box being typed in must not change shape. */
.tl-wrap { position: relative; display: inline-flex; flex: none; }
.tl-menu {
  position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 30;
  width: 300px; max-width: calc(100vw - 32px); padding: 6px;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px; box-shadow: var(--shadow);
}
.tl-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px;
  background: none; font: inherit; font-size: var(--fs-sm); color: var(--text); text-align: left; cursor: pointer;
}
.tl-item:hover, .tl-item:focus-visible { background: var(--brand-soft); outline: none; }
.tl-item .gd-ic {
  width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex: none;
  color: var(--brand-int); background: color-mix(in srgb, var(--brand-int) 10%, transparent);
}
.tl-item .gd-ic svg { width: 15px; height: 15px; }
.tl-item .tl-chev { width: auto; height: auto; background: none; color: var(--faint); }
.tl-tx { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.tl-tx b { font-weight: 600; }
.tl-tx span { font-size: var(--fs-xs); color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-sep { height: 1px; background: var(--hairline); margin: 5px 8px; }
.tl-none { margin: 6px 10px; font-size: var(--fs-xs); color: var(--faint); }

/* What Forge is about to do, over the box while a task is in it. */
.gd-note {
  display: block; max-width: var(--maxw); margin: 0 auto 6px; padding: 8px 12px; border-radius: 10px;
  font-size: var(--fs-xs); line-height: 1.5; color: var(--muted); background: var(--brand-soft);
}
.gd-note b { color: var(--text); font-weight: 600; }
/* The task in the box now. The label truncates first. */
.gd-chip {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 0; max-width: 260px;
  padding: 3px 4px 3px 9px; border-radius: var(--radius-pill); white-space: nowrap;
  font-size: var(--fs-xs); font-weight: 600; color: var(--brand-int); background: var(--brand-soft);
  border: 1px solid color-mix(in srgb, var(--brand-int) 35%, transparent);
}
.gd-chip .gd-ic { display: inline-grid; flex: none; }
.gd-chip .gd-ic svg { width: 13px; height: 13px; }
.gd-chip-lbl { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.gd-x {
  width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; flex: none; cursor: pointer;
  display: grid; place-items: center; background: none; color: var(--brand-int);
}
.gd-x:hover { background: color-mix(in srgb, var(--brand-int) 14%, transparent); }
.gd-x:focus-visible { outline: 2px solid var(--brand-int); outline-offset: 1px; }
.gd-x svg { width: 12px; height: 12px; }
/* The mirror copies #msg's box exactly (padding, font, line height, wrapping); change both together or the
   marks drift off the words. */
.gd-field { position: relative; flex: 1; min-width: 0; display: flex; }
.gd-field #msg { position: relative; z-index: 1; width: 100%; }
.gd-mirror {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  padding: 9px 8px; font: inherit; font-size: var(--fs-base); line-height: 1.5;
  white-space: pre-wrap; overflow-wrap: break-word; color: transparent;
}
.gd-mark {
  color: transparent; border-radius: 4px;
  background: color-mix(in srgb, var(--brand-int) 13%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-int) 35%, transparent);
}
/* A document the content screen held back from this answer. */
.withheld-note { margin: 10px 0 0; padding: 8px 12px; border-radius: 10px; font-size: var(--fs-xs); line-height: 1.5;
  color: var(--muted); background: var(--warn-soft); border-left: 3px solid var(--warn); }
/* The prompt coach (coach.js): in the composer's column, like the guide note, so its edges line up with the box. */
.coach-card {
  max-width: var(--maxw); margin: 0 auto 8px; padding: 12px 14px; border-radius: 14px; box-sizing: border-box;
  background: var(--surface); border: 1px solid var(--hairline); box-shadow: var(--shadow); font-size: var(--fs-sm);
}
.coach-card[hidden] { display: none; }
.coach-head { display: flex; align-items: center; gap: 8px; }
.coach-head b { flex: 1; min-width: 0; font-weight: 600; color: var(--text); }
.coach-card .coach-head:not(:last-child) { margin-bottom: 8px; }
.coach-ic {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; flex: none;
  background: var(--brand-soft); color: var(--brand);
}
.coach-ic svg { width: 15px; height: 15px; }
.coach-pulse svg { animation: coach-pulse 1.2s ease-in-out infinite; }
@keyframes coach-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .coach-pulse svg { animation: none; } }
.coach-close {
  border: 0; background: none; padding: 2px; width: 24px; height: 24px; display: inline-grid; place-items: center;
  color: var(--faint); border-radius: 6px; cursor: pointer;
}
.coach-close svg { width: 14px; height: 14px; }
.coach-close:hover { color: var(--text); background: var(--brand-soft); }
.coach-rewrite {
  margin: 0 0 10px; padding: 10px 12px; border-radius: 10px; background: var(--brand-soft);
  color: var(--text); line-height: 1.55; overflow-wrap: anywhere;
}
.coach-blank {
  border-radius: 4px; padding: 0 2px;
  background: color-mix(in srgb, var(--brand-int) 13%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-int) 35%, transparent);
}
.coach-adds { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; }
.coach-adds li { display: flex; gap: 8px; align-items: baseline; color: var(--muted); font-size: var(--fs-xs); }
.coach-adds li::before { content: "+"; color: var(--brand); font-weight: 700; }
.coach-adds b { color: var(--text); font-weight: 600; min-width: 112px; }
.coach-hint, .coach-why { margin: 0 0 10px; color: var(--muted); font-size: var(--fs-xs); line-height: 1.5; }
.coach-actions { display: flex; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.coach-go { background: var(--brand); color: #fff; border-color: var(--brand); }
.coach-go:hover { background: var(--brand); color: #fff; filter: brightness(1.08); }
/* What a guided task still needs. Inside the box, under the text, because it is about what you send. */
.gd-needs-wrap { display: flex; flex-direction: column; gap: 6px; padding: 2px 6px 4px; }
.gd-drop {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; cursor: pointer;
  border: 1.5px dashed var(--hairline); border-radius: 10px; background: none;
  font: inherit; font-size: var(--fs-sm); color: var(--muted); text-align: left;
}
.gd-drop:hover { border-color: var(--brand-int); background: var(--brand-soft); }
.gd-drop .gd-ic { display: inline-grid; color: var(--brand-int); }
.gd-drop .gd-ic svg { width: 15px; height: 15px; }
.gd-drop b { color: var(--brand-int); font-weight: 600; }
.gd-needs { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: var(--fs-xs); color: var(--faint); }
.gd-needs span { display: inline-flex; align-items: center; gap: 6px; }
.gd-needs .bx {
  width: 14px; height: 14px; box-sizing: border-box; border-radius: 4px; border: 1.5px solid var(--hairline);
  display: grid; place-items: center; font-style: normal;
}
.gd-needs .bx svg { width: 10px; height: 10px; }
.gd-needs .ok { color: var(--text); }
.gd-needs .ok .bx { background: var(--success); border-color: var(--success); color: #fff; }

/* The Start a task page's way back to the chat, and what Forge can look at for this caller. */
.ws-back {
  display: inline-flex; align-items: center; gap: 4px; margin: 0 0 8px; padding: 4px 0; border: 0;
  background: none; font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--brand-int); cursor: pointer;
}
.ws-back:focus-visible { outline: 2px solid var(--brand-int); outline-offset: 2px; border-radius: 4px; }
.ws-back svg { width: 14px; height: 14px; }
.ws-reach { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: -8px 0 18px; font-size: var(--fs-xs); color: var(--muted); }
.ws-reach-lbl { color: var(--faint); font-weight: 600; }
.ws-src { display: inline-flex; align-items: center; gap: 6px; }
.ws-src::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--success); }

/* ---------- the capacity element ----------
   The tooltip hangs off the host, not the pill, because the pill changes width between states. */
.cap-host { position: relative; display: inline-flex; }

/* Calm at .75 opacity; full opacity arrives with the warning color. Opacity is never the only carrier: the
   word, color and aria-label change at the same threshold. */
.cap {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--hairline); background: var(--surface);
  border-radius: var(--radius-pill); overflow: hidden;
  opacity: .75;
  transition: opacity var(--motion), border-color var(--motion), background var(--motion);
}
.cap:hover, .cap:focus-within { opacity: 1; border-color: var(--muted); }

/* The readout opens the profile panel. */
.cap-read {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: var(--fs-xs); color: var(--muted); cursor: pointer;
  background: none; border: 0; padding: 4px 9px;
}
.cap-read:focus-visible { outline: 2px solid var(--brand-int); outline-offset: -2px; }
.cap-lbl { white-space: nowrap; color: var(--faint); }
.cap-val { white-space: nowrap; font-weight: 650; color: var(--text); font-variant-numeric: tabular-nums; }

.cap-track {
  width: 34px; height: 4px; border-radius: 3px; overflow: hidden; flex: none;
  background: var(--hairline);
}
.cap-track > i {
  display: block; height: 100%; border-radius: 3px; background: var(--muted);
  transition: width var(--motion), background var(--motion);
}

/* One border divided by a seam; inner corners are square. */
.cap-act {
  font: inherit; font-size: var(--fs-xs); font-weight: 620; cursor: pointer; white-space: nowrap;
  background: var(--danger, #b42318); color: #fff; border: 0;
  border-left: 1px solid var(--danger, #b42318); padding: 4px 11px;
  transition: filter var(--motion);
}
.cap-act:hover { filter: brightness(1.12); }
.cap-act:focus-visible { outline: 2px solid var(--brand-int); outline-offset: -2px; }

/* renderCapacity returns `warm` only for a door that will actually stop somebody. */
.cap.warm { opacity: 1; border-color: var(--warn); background: var(--warn-soft); }
.cap.warm .cap-lbl, .cap.warm .cap-val, .cap.warm .cap-read { color: var(--warn); }
.cap.warm .cap-track { background: color-mix(in oklab, var(--warn) 22%, transparent); }
.cap.warm .cap-track > i { background: var(--warn); }
.cap.out { opacity: 1; border-color: var(--danger, #b42318); background: var(--danger-soft, #fef3f2); }
.cap.out .cap-lbl, .cap.out .cap-val, .cap.out .cap-read { color: var(--danger, #b42318); }
.cap.out .cap-track { background: color-mix(in oklab, var(--danger, #b42318) 22%, transparent); }
.cap.out .cap-track > i { background: var(--danger, #b42318); }

/* One pulse, fired by renderCapacity when the band changes, never on first paint. */
@keyframes cap-cross { 0% { transform: scale(1); } 35% { transform: scale(1.07); } 100% { transform: scale(1); } }
.cap-cross { animation: cap-cross 420ms cubic-bezier(.2, .7, .3, 1) both; }
@media (prefers-reduced-motion: reduce) { .cap-cross { animation: none; } }

/* ---------- asking for more ----------
   A dialog, not the tooltip: the tooltip closes on every outside click. */
.cap-modal {
  position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 22px;
  background: color-mix(in oklab, var(--bg) 62%, transparent);
  animation: cap-fade var(--motion) both;
}
@keyframes cap-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cap-modal { animation: none; } }
.cap-dlg {
  width: min(430px, 100%); background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 14px; box-shadow: var(--shadow); padding: 20px 22px;
}
.cap-dlg h3 { margin: 0 0 6px; font-size: var(--fs-base); font-weight: 650; color: var(--text); }
.cap-dlg p { margin: 0 0 14px; font-size: var(--fs-sm); color: var(--muted); line-height: 1.55; }
.cap-dlg p b { color: var(--text); font-weight: 650; }
.cap-dlg label { display: block; font-size: var(--fs-xs); color: var(--faint); margin-bottom: 5px; }
.cap-opt { color: var(--faint); }
.cap-dlg textarea {
  width: 100%; font: inherit; font-size: var(--fs-sm); color: var(--text); background: var(--bg);
  border: 1px solid var(--hairline); border-radius: 9px; padding: 9px 11px; resize: vertical; outline: 0;
}
.cap-dlg textarea:focus { border-color: var(--brand-int); }
.cap-why { font-size: var(--fs-xs); color: var(--faint); margin: 7px 0 0 !important; line-height: 1.5; }
.cap-dlg-acts { display: flex; gap: 9px; justify-content: flex-end; margin-top: 16px; align-items: center; }
.cap-wait { margin-right: auto; font-size: var(--fs-xs); color: var(--faint); }
.cap-dlg-ghost {
  font: inherit; font-size: var(--fs-sm); cursor: pointer; background: none;
  border: 1px solid var(--hairline); border-radius: var(--radius-pill); padding: 7px 14px; color: var(--muted);
}
.cap-dlg-ghost:hover { border-color: var(--muted); color: var(--text); }
.cap-dlg-send {
  font: inherit; font-size: var(--fs-sm); font-weight: 620; cursor: pointer;
  background: var(--brand); color: #fff; border: 0; border-radius: var(--radius-pill); padding: 8px 16px;
}
.cap-dlg-send:hover:not(:disabled) { filter: brightness(1.08); }
.cap-dlg-send:disabled { opacity: .6; cursor: default; }

/* ---------- the tooltip, ours ----------
   Not `title`, which is unstyled, delayed, absent on keyboard focus and touch, and cannot hold a button.
   Opens on hover and focus-within, upward because the row is at the bottom of the window. */
.cap-tip {
  position: absolute; bottom: calc(100% + 9px); right: 0; z-index: 40; width: 286px;
  display: block; text-align: left; white-space: normal;
  background: var(--surface); color: var(--muted);
  border: 1px solid var(--hairline); border-radius: 10px; box-shadow: var(--shadow);
  padding: 12px 13px; font-size: var(--fs-xs); line-height: 1.55;
  opacity: 0; visibility: hidden; transform: translateY(3px);
  transition: opacity var(--motion), transform var(--motion), visibility var(--motion);
}
.cap-host:hover .cap-tip, .cap-host:focus-within .cap-tip {
  opacity: 1; visibility: visible; transform: none;
}
/* A rotated square, so it inherits the surface and hairline in both themes. */
.cap-tip::before {
  content: ""; position: absolute; bottom: -5px; right: 22px; width: 9px; height: 9px;
  background: var(--surface);
  border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  transform: rotate(45deg);
}
.cap-tip-head { display: block; margin-bottom: 5px; font-weight: 650; color: var(--text); }
.cap-tip.warm .cap-tip-head { color: var(--warn); }
.cap-tip.out .cap-tip-head { color: var(--danger, #b42318); }
.cap-tip-p { display: block; }
.cap-tip-p + .cap-tip-p { margin-top: 7px; }
.cap-tip b { color: var(--text); font-weight: 650; }
.cap-tip-figures {
  display: flex; align-items: center; gap: 8px; margin-top: 9px; padding-top: 9px;
  border-top: 1px solid var(--hairline); color: var(--faint);
}
.cap-tip-figures .cap-track { flex: 1; width: auto; }
.cap-tip.warm .cap-tip-figures .cap-track > i { background: var(--warn); }
.cap-tip.out .cap-tip-figures .cap-track > i { background: var(--danger, #b42318); }
.cap-tip-acts { display: flex; align-items: center; gap: 9px; margin-top: 11px; flex-wrap: wrap; }
/* Brand, not danger: this is the way out of the red state. */
.cap-tip-ask {
  font: inherit; font-size: var(--fs-xs); font-weight: 620; cursor: pointer;
  background: var(--brand); color: #fff; border: 0;
  border-radius: var(--radius-pill); padding: 5px 12px;
}
.cap-tip-ask:hover:not(:disabled) { filter: brightness(1.08); }
.cap-tip-ask:disabled { opacity: .6; cursor: default; }
.cap-or { color: var(--faint); }
.cap-done { color: var(--success); font-weight: 580; }

/* ---------- thinking (thinking.js): in place of the usage pill for people given a raised level ---------- */
.th-wrap { position: relative; display: inline-flex; }
.th-wrap[hidden] { display: none; }
.th-btn { border-color: var(--hairline); background: var(--surface); }
.th-btn:hover, .th-btn[aria-expanded="true"] { border-color: var(--muted); }
.th-name { font-weight: 650; color: var(--text); }
.th-fam-name { color: var(--muted); }
.th-sep { color: var(--faint); }
.th-left { font-variant-numeric: tabular-nums; }
.th-btn.raised { border-color: color-mix(in srgb, var(--brand-int) 45%, transparent); background: var(--brand-soft); }
.th-btn.raised .th-bars, .th-btn.raised .th-name { color: var(--brand); }
.th-btn.warm { border-color: var(--warn); }
.th-btn.warm .th-left { color: var(--warn); font-weight: 650; }
.th-btn.out { border-color: var(--danger, #b42318); }
.th-btn.out .th-left { color: var(--danger, #b42318); font-weight: 650; }
.th-pop {
  position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 40; width: 300px; max-width: calc(100vw - 32px);
  box-sizing: border-box; padding: 12px; text-align: left; font-size: var(--fs-xs); color: var(--muted);
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px; box-shadow: var(--shadow);
}
.th-pop-head { margin: 0 0 6px; font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.th-fams { display: flex; gap: 2px; padding: 2px; margin: 4px 0 8px; border-radius: var(--radius-pill); background: var(--hairline); }
.th-fam {
  flex: 1; font: inherit; font-weight: 600; cursor: pointer; border: 0; border-radius: var(--radius-pill);
  padding: 5px 10px; background: none; color: var(--muted);
}
.th-fam.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.th-fam:focus-visible { outline: 2px solid var(--brand-int); outline-offset: 1px; }
.th-range { width: 100%; margin: 6px 0 4px; accent-color: var(--brand-int); cursor: pointer; }
.th-labels { display: flex; justify-content: space-between; color: var(--faint); }
.th-labels .on { color: var(--brand); font-weight: 600; }
.th-desc { margin: 10px 0 0; line-height: 1.5; }
.th-desc b { color: var(--text); }
.th-use { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--hairline); }
.th-use span:first-child { flex: 1; }
.th-use .cap-track { width: 60px; }
.th-use b { color: var(--text); font-weight: 600; white-space: nowrap; }
.th-ask {
  margin-top: 8px; font: inherit; font-weight: 620; cursor: pointer; border: 0; border-radius: var(--radius-pill);
  padding: 4px 11px; background: var(--danger, #b42318); color: #fff;
}
.th-foot { margin: 8px 0 0; color: var(--faint); }
/* Too narrow to hang off the pill: the panel spans the tool row instead of running off the left edge. */
@media (max-width: 600px) {
  .composer-tools { position: relative; }
  .th-wrap { position: static; }
  .th-pop { left: 0; right: 0; width: auto; max-width: none; }
}
.th-notice {
  display: flex; align-items: center; gap: 8px; max-width: var(--maxw); margin: 0 auto 6px; padding: 7px 12px;
  box-sizing: border-box; border-radius: 10px; font-size: var(--fs-xs); line-height: 1.45; color: var(--text);
  background: var(--brand-soft);
}
.th-notice[hidden] { display: none; }
.th-notice svg { color: var(--brand); flex: none; }
.th-notice span { flex: 1; }
.th-reset { border: 0; background: none; color: var(--brand); font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; }

/* Labels go before controls as the window narrows; nothing is removed outright. */
@media (max-width: 900px) {
  .ctool { padding: 3px 7px; gap: 5px; }
  .composer-tools { gap: 2px; }
  .cap-read { padding: 3px 7px; gap: 5px; }
  .cap-track { width: 28px; }
}
@media (max-width: 860px) { #askBtn span { display: none; } }
@media (max-width: 720px) { .cap-host .cap-lbl { display: none; } }
@media (max-width: 600px) {
  #attach span, #toolsBtn span { display: none; }
  /* Last resort: the word stays and the meter goes. */
  .cap-host .cap-track { display: none; }
}

/* The same fact in the profile panel, reusing .cap-track. No bar where no limit is set. */
.pp-usage { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.pp-usage .cap-track { width: 100%; max-width: 180px; height: 5px; }
.pp-usage.warm .cap-track > i { background: var(--warn); }
.pp-usage.out .cap-track > i { background: var(--danger, #b42318); }
.pp-usage-text { font-size: var(--fs-sm); color: var(--muted); }
.pp-usage-text strong { color: var(--text); font-weight: 650; }
.pp-usage.warm .pp-usage-text strong { color: var(--warn); }
.pp-usage.out .pp-usage-text strong { color: var(--danger, #b42318); }


/* ---------- the tooltip, ours ----------
   Same surface and rise as the citation preview. */
#tippop {
  position: fixed; z-index: 80; max-width: 280px; pointer-events: none;
  padding: 6px 10px; border: 1px solid var(--hairline); border-radius: var(--radius-card);
  background: var(--bg-elev); box-shadow: var(--shadow);
  font-size: var(--fs-xs); color: var(--text); line-height: 1.35;
  animation: rise var(--motion) both;
}
#tippop[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { #tippop { animation: none; } }


/* ---------- share a win ----------
   One form in two places: the home page dialog and the pane under an answer (wins.js). */
.win-form { display: flex; flex-direction: column; gap: 10px; max-width: 560px; color: var(--text); font-size: var(--fs-sm); }
.win-form .wf-title { font-size: var(--fs-lg); font-weight: 600; }
.win-form .wf-sub { color: var(--brand-int); font-size: var(--fs-xs); margin-top: 2px; }
.win-form .wf { display: flex; flex-direction: column; gap: 4px; }
.win-form .wf-l { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
.win-form input, .win-form textarea, .win-form select {
  font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 8px; padding: 7px 10px; width: 100%; box-sizing: border-box;
}
.win-form textarea { resize: vertical; line-height: 1.45; min-height: 5.5em; }
.win-form input:focus, .win-form textarea:focus, .win-form select:focus { outline: none; border-color: var(--brand-int); }
.win-form .wf-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.win-form .wf-where { color: var(--muted); font-size: var(--fs-xs); }
.win-form .wf-err { color: var(--warn); font-size: var(--fs-xs); }
.win-form .wf-actions { display: flex; gap: 8px; }
.win-form .wf-posted { color: var(--success); font-weight: 600; padding: 6px 0; }
@media (max-width: 560px) { .win-form .wf-2 { grid-template-columns: minmax(0, 1fr); } }

/* scroll-margin keeps the bottom edge clear of the composer when revealPane scrolls them in. */
.foot-pane[data-pane="win"].is-open, .foot-pane.foot-fb.is-open {
  border: 1px solid var(--hairline); border-radius: var(--radius-card); background: var(--bg-elev);
  box-shadow: var(--shadow); padding: 14px 16px; margin-top: 10px; max-width: 640px;
}
.foot-pane { scroll-margin: 16px 0 96px; }
.foot-pane.foot-fb.is-up { border-left: 3px solid var(--success); }
.foot-pane.foot-fb.is-down { border-left: 3px solid var(--warn); }
.foot-pane[data-pane="win"].is-open > h4 { margin-top: 0; }

/* ---------- the documents this chat made ----------
   The whole tile opens the panel. Icon colors are the Office apps' own. */
.answer-figure { margin: 12px 0 8px; }
.answer-plot { display: block; width: 100%; height: 480px; margin: 12px 0 8px; border: 1px solid var(--hairline); border-radius: var(--radius-card); background: var(--surface); }
.answer-figure img { display: block; max-width: 100%; height: auto; border-radius: var(--radius-card); border: 1px solid var(--hairline); cursor: zoom-in; }
.doc-tile {
  display: flex; align-items: center; gap: 12px; width: min(100%, 420px); margin-top: 14px; padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-card);
  font: inherit; color: var(--text); text-align: left; cursor: pointer;
  transition: border-color var(--motion), box-shadow var(--motion), background var(--motion);
}
.doc-tile:hover { border-color: var(--brand-int); box-shadow: var(--shadow-soft); }
.doc-tile:focus-visible { outline: 2px solid var(--brand-int); outline-offset: 2px; }
.doc-tile.is-showing { border-color: var(--brand-int); background: var(--brand-soft); }
.doc-tile + .doc-tile { margin-top: 8px; }
.dt-icon {
  flex: none; width: 34px; height: 40px; border-radius: 6px; display: grid; place-items: center;
  font-weight: 700; font-size: var(--fs-sm); color: #fff; background: var(--muted);
}
.dt-icon.is-p { background: #C43E1C; }
.dt-icon.is-w { background: #185ABD; }
.dt-icon.is-x { background: #107C41; }
.dt-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dt-name { font-weight: 600; font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-meta { font-size: var(--fs-xs); color: var(--muted); }
.dt-ver {
  margin-left: 8px; padding: 1px 7px; border-radius: var(--radius-pill); border: 1px solid var(--hairline);
  background: var(--bg); color: var(--muted); font-size: var(--fs-2xs); font-weight: 600;
}
.dt-state { flex: none; display: inline-grid; color: var(--faint); font-size: var(--fs-xs); }
.dt-state svg { width: 16px; height: 16px; }
.doc-tile.is-showing .dt-state { color: var(--brand); font-weight: 600; }

/* The panel title as the switcher. Disabled with one document, and then it looks like the title it was. */
.doc-head { position: relative; }
.doc-switch {
  display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--text);
  font-family: inherit; padding: 4px 6px; margin-left: -6px; border-radius: 8px; cursor: pointer; text-align: left;
}
.doc-switch:hover:not(:disabled), .doc-switch[aria-expanded="true"] { background: var(--bg); }
.doc-switch:disabled { cursor: default; }
.doc-switch:disabled .ds-chev { display: none; }
.ds-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ds-chev { flex: none; color: var(--muted); }
.docs-n {
  flex: none; min-width: 20px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--brand-soft);
  color: var(--brand); font-size: var(--fs-xs); font-weight: 700; text-align: center;
}
.docs-menu {
  position: absolute; top: calc(100% - 4px); left: 10px; right: 10px; z-index: 20; padding: 6px;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-card);
  box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 2px; max-height: 60vh; overflow-y: auto;
}
.docs-menu[hidden] { display: none; }
.dm-cap {
  padding: 6px 8px 4px; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted);
}
.dm-item {
  display: flex; align-items: center; gap: 10px; padding: 7px 8px; border: 0; border-radius: 8px;
  background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.dm-item:hover, .dm-item:focus-visible { background: var(--bg); outline: none; }
.dm-item.is-on { background: var(--brand-soft); }
.dm-item .dt-icon { width: 26px; height: 30px; font-size: var(--fs-xs); }
/* A plan that went round again: the line between passes, and the count of passes beside the goal. */
.pc-pass {
  margin: 10px 0 6px; padding: 7px 10px; border-left: 3px solid var(--brand-int); border-radius: 0 8px 8px 0;
  background: var(--brand-soft); color: var(--text); font-size: var(--fs-sm);
}
.pc-passes {
  display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: var(--radius-pill);
  background: var(--brand-soft); color: var(--brand); font-size: var(--fs-2xs); font-weight: 600; vertical-align: 1px;
  text-transform: none; letter-spacing: 0;
}

/* !important because the drag-to-resize width is an inline style. */
.doc-panel.is-folded { width: 52px !important; }
.doc-panel.is-folded > :not(.doc-strip) { display: none; }
.doc-strip { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 0; }
.doc-strip[hidden] { display: none; }
.dstrip-open {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px; border: 0;
  border-radius: 8px; background: none; color: var(--brand); cursor: pointer;
}
.dstrip-open:hover, .dstrip-open:focus-visible { background: var(--bg); outline: none; }
.dstrip-files { display: flex; flex-direction: column; gap: 8px; }
.dstrip-file { border: 0; background: none; padding: 2px; border-radius: 6px; cursor: pointer; }
.dstrip-file:hover, .dstrip-file:focus-visible { outline: 2px solid var(--brand-int); outline-offset: 1px; }
.dstrip-file .dt-icon { width: 26px; height: 30px; font-size: var(--fs-xs); }

/* A deck read as slides in the Text view. */
.dk-slide { padding: 12px 0 14px; border-bottom: 1px solid var(--hairline); }
.dk-slide:last-child { border-bottom: 0; }
.dk-n { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.dk-t { font-size: var(--fs-lg); font-weight: 650; margin: 2px 0 4px; }
.dk-s { color: var(--muted); }
.dk-stat { display: flex; align-items: baseline; gap: 8px; margin: 8px 0; color: var(--muted); }
.dk-stat span { font-size: 28px; font-weight: 700; color: var(--brand); }
.dk-chart { margin: 8px 0; padding: 10px 12px; border: 1px solid var(--hairline); border-radius: 10px; }
.dk-cap { font-size: var(--fs-xs); color: var(--muted); margin-bottom: 8px; }
.dk-bar { display: grid; grid-template-columns: minmax(90px, 38%) 1fr auto; gap: 8px; align-items: center; font-size: var(--fs-sm); margin: 4px 0; }
.dk-trk { height: 10px; background: var(--bg); border-radius: 5px; overflow: hidden; }
.dk-trk i { display: block; height: 100%; background: var(--brand-int); }
.dk-v { font-variant-numeric: tabular-nums; }
.dk-center { font-weight: 600; margin: 6px 0; }
.dk-by { margin-top: 4px; font-size: var(--fs-sm); color: var(--muted); }
.dk-notes { margin-top: 8px; padding: 8px 10px; background: var(--bg); border-radius: 8px; font-size: var(--fs-sm); color: var(--muted); }
.dk-notes b { color: var(--text); margin-right: 4px; }

/* ---------- folding rail sections (railsec.js) ---------- */
.rsec-toggle {
  display: flex; align-items: center; gap: 6px; width: 100%; border: 0; background: none; cursor: pointer;
  font-family: inherit; text-align: left; padding-top: 2px; padding-bottom: 2px; border-radius: 6px;
}
.rsec-toggle:hover { color: var(--muted); }
.rsec-toggle:focus-visible { outline: 2px solid var(--brand-int); outline-offset: 1px; }
.rsec-chev { display: inline-grid; place-items: center; width: 12px; height: 12px; transition: transform var(--motion); }
.rsec-group.is-collapsed .rsec-chev { transform: rotate(-90deg); }
.rsec-body { display: flex; flex-direction: column; gap: 8px; }
.rsec-group.is-collapsed .rsec-body { display: none; }
.rsec-group.is-collapsed { gap: 0; }
.rsec-count { font-weight: 600; letter-spacing: 0; color: var(--faint); font-variant-numeric: tabular-nums; }
.rsec-count:not(:empty)::before { content: "\00b7"; margin-right: 5px; }
.rsec-marks { display: inline-flex; gap: 4px; }
.rsec-new {
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--brand-int); color: #fff;
  font-size: var(--fs-2xs); font-weight: 700; line-height: 16px; text-align: center; letter-spacing: 0;
}
.rsec-warn {
  width: 16px; height: 16px; border-radius: 50%; background: var(--warn-soft); color: var(--warn);
  border: 1px solid var(--warn); box-sizing: border-box; font-size: 11px; font-weight: 800; line-height: 14px;
  text-align: center; letter-spacing: 0;
}
.rsec-create {
  display: flex; align-items: center; gap: 6px; border: 0; background: none; font: inherit; font-size: var(--fs-sm);
  width: 100%; text-align: left; cursor: pointer; color: var(--faint);
}
.rsec-create:hover { color: var(--brand-int); }
.rsec-plus { display: inline-grid; place-items: center; width: 15px; }

/* ---------- scheduled tasks (schedules.js) ---------- */
.sc-go { display: flex; align-items: flex-start; gap: 9px; }
.sc-tx { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.sc-name { color: var(--text); white-space: normal; }
.sc-line { font-size: var(--fs-xs); color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-line.paused, .sc-line.failed, .sc-line.ending { color: var(--warn); }
/* A schedule's lease, its cost and what it remembers, in the form. */
.sc-lease { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: 10px;
  background: var(--brand-soft); font-size: var(--fs-sm); color: var(--muted); }
.sc-lease .sp { flex: 1; }
.sc-cost { margin: 0; font-size: var(--fs-xs); color: var(--muted); }
.sc-memory { border: 1px solid var(--hairline); border-radius: 10px; padding: 8px 12px; margin-top: 6px; font-size: var(--fs-sm); color: var(--muted); }
.sc-memory-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sc-memory-head b { color: var(--text); font-weight: 600; font-size: var(--fs-xs); }
.sc-memory p { margin: 4px 0 0; line-height: 1.5; white-space: pre-wrap; }
/* The renewal above the box, in the composer's column. */
.sc-renew {
  max-width: var(--maxw); margin: 0 auto 8px; padding: 10px 14px; border-radius: 14px; box-sizing: border-box;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--surface);
  border: 1px solid var(--hairline); box-shadow: var(--shadow); font-size: var(--fs-sm); color: var(--muted);
}
.sc-renew[hidden] { display: none; }
.sc-renew .sp { flex: 1; }
.sc-renew-go { background: var(--brand); color: #fff; border-color: var(--brand); }
.sc-renew-go:hover { background: var(--brand); color: #fff; filter: brightness(1.08); }
.sc-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; margin-top: 6px; background: var(--success); }
.sc-dot.paused { background: transparent; border: 2px solid var(--warn); width: 6px; height: 6px; }
.sc-dot.failed { background: var(--warn); }
.sc-dot.running { background: var(--brand-int); animation: sc-pulse 1.4s ease-in-out infinite; }
.sc-line.running { color: var(--brand-int); }
@keyframes sc-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .sc-dot.running { animation: none; } }
.sc-unread {
  flex: none; align-self: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--brand-int); color: #fff; font-size: var(--fs-2xs); font-weight: 700; line-height: 18px; text-align: center;
}
.sc-select {
  font: inherit; font-size: var(--fs-sm); padding: 8px 10px; border: 1px solid var(--hairline); border-radius: 9px;
  background: var(--surface); color: var(--text);
}
.sc-seg {
  display: inline-flex; flex-wrap: wrap; border: 1px solid var(--hairline); border-radius: 999px; padding: 3px; gap: 2px;
  width: fit-content; background: var(--surface);
}
.sc-opt {
  font: inherit; font-size: var(--fs-sm); border: 0; background: none; color: var(--muted); padding: 5px 14px;
  border-radius: 999px; cursor: pointer;
}
.sc-opt.on { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.sc-opt:focus-visible, .sc-day:focus-visible { outline: 2px solid var(--brand-int); outline-offset: 1px; }
.sc-days { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.sc-days[hidden], .sc-inline[hidden] { display: none; }
.sc-day {
  font: inherit; font-size: var(--fs-xs); width: 44px; padding: 6px 0; border: 1px solid var(--hairline);
  border-radius: 8px; background: var(--surface); color: var(--muted); cursor: pointer;
}
.sc-day.on { border-color: var(--brand-int); background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.sc-inline { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: var(--fs-sm); color: var(--muted); }
.as-field .sc-num { width: 64px; }
.sc-two { display: grid; grid-template-columns: 140px 1fr; gap: 12px; }
.sc-deliver { grid-template-columns: 1fr; }
.sc-note.sc-warn { margin: 0; color: var(--warn); }
.sc-summary {
  margin: 2px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--brand-soft); color: var(--text);
  font-size: var(--fs-sm); font-weight: 550;
}
.sc-note { margin: -4px 0 0; font-size: var(--fs-xs); color: var(--muted); }
.sc-banner {
  display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--brand-int); background: var(--brand-soft); font-size: var(--fs-sm);
}
.sc-banner span { color: var(--muted); font-size: var(--fs-xs); }
.sc-banner.warn { border-color: var(--warn); background: var(--warn-soft); }
.sc-banner.warn b { color: var(--warn); }
.sc-life { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--hairline); }
.sc-life .as-delete { margin-left: auto; margin-right: 0; }
.sc-act { white-space: nowrap; }
.sc-act:disabled { opacity: .45; cursor: default; }
.sc-runhead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--hairline); }
.sc-runhead .sc-dot { margin-top: 0; }
.sc-meta { font-size: var(--fs-xs); color: var(--faint); margin-left: auto; }
.sc-edit { border: 0; background: none; padding: 0; font: inherit; color: var(--brand-int); cursor: pointer; }
.sc-edit:hover { text-decoration: underline; }
.sc-edit + .sc-edit { margin-left: 12px; }
.sc-edit:disabled { color: var(--faint); cursor: default; text-decoration: none; }
.sc-run { display: flex; align-items: center; gap: 8px; margin: 22px 0 -4px; }
.sc-when { font-size: var(--fs-xs); font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.sc-new { font-size: var(--fs-2xs); font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--brand-int); color: #fff; }
.sc-wait { margin: 14px 0 0; font-size: var(--fs-sm); color: var(--muted); }
@media (max-width: 560px) { .sc-two { grid-template-columns: 1fr; } }