/* theme.css — the workstation's own layer over the design system (2026-09-03).
 *
 * The system gives us tokens; this gives the product a feel. Three ideas, applied everywhere:
 *
 *   1. GROUND AND PAPER. The app sits on a quiet ground and the things you work on are paper laid on it. Before this
 *      every surface was #FFFFFF on #FFFFFF, so nothing had an edge and the eye had nothing to hold.
 *   2. ONE ACCENT, EARNED. Brand green marks what is live — the active tab, focus, the send button, a selected row —
 *      and nothing else. Colour that appears everywhere stops meaning anything.
 *   3. EDGES OVER BOXES. A hairline and a breath of shadow separate regions; heavy borders and drop shadows do not.
 *
 * Nothing here changes a token's value for other projects: it is scoped to this app's own classes.
 */

:root {
  /* the ground the app sits on, and the paper on top of it */
  --ws-ground: #F4F6FA;
  --ws-ground-2: #EDF1F7;
  --ws-paper: #FFFFFF;
  --ws-hairline: color-mix(in srgb, var(--ink) 9%, transparent);
  --ws-hairline-soft: color-mix(in srgb, var(--ink) 6%, transparent);
  /* one shadow vocabulary: a resting card, a raised control, a floating layer */
  --ws-rest: 0 1px 0 rgba(11, 18, 32, .03);
  --ws-raise: 0 1px 2px rgba(11, 18, 32, .05), 0 4px 12px -6px rgba(11, 18, 32, .10);
  --ws-float: 0 2px 4px rgba(11, 18, 32, .05), 0 14px 40px -18px rgba(11, 18, 32, .22);
  --ws-focus: 0 0 0 3px color-mix(in srgb, var(--brand) 26%, transparent);
  /* chrome gradient used by every top bar and toolbar so they read as one family */
  --ws-chrome: linear-gradient(180deg, color-mix(in srgb, #fff 82%, var(--ws-ground)), var(--ws-ground));
  --ws-reading: 0.95rem;   /* the transcript is for reading, not for scanning a dense table */
}

/* The design system changes its surface tokens with the theme. Keep this workstation layer tied to those roles too;
 * otherwise its light-only paper values win the cascade while the text tokens turn light. */
[data-theme="dark"] {
  --ws-ground: var(--surface-2);
  --ws-ground-2: var(--surface-3);
  --ws-paper: var(--surface);
  --ws-hairline: color-mix(in srgb, var(--ink) 14%, transparent);
  --ws-hairline-soft: color-mix(in srgb, var(--ink) 9%, transparent);
  --ws-chrome: linear-gradient(180deg, color-mix(in srgb, var(--surface-3) 82%, var(--ws-ground)), var(--ws-ground));
}

body { background: var(--ws-ground); }

/* ---- the rail: invisible at rest, a floating panel once it expands ----------------------------------------------
 * By design the rail is not a chrome bar — collapsed it is just icons on the ground. It only becomes a surface when
 * it expands over the content, and then it needs an edge so the text underneath does not show through. */
body aly-rail-shell { background: var(--ws-ground); border-right-color: transparent; }
body aly-rail-shell:hover, body aly-rail-shell[data-expanded="true"] {
  background: var(--ws-paper);
  border-right-color: var(--ws-hairline-soft);
  box-shadow: var(--ws-float);
}
body .rail .rail-btn { border-radius: var(--radius-md, 6px); }
body .rail .rail-btn:hover { background: color-mix(in srgb, var(--brand) 9%, transparent); color: var(--brand-deep); }
body .rail .rail-btn.new { color: var(--brand-deep); font-weight: var(--fw-semibold); }
body .rail .rail-btn.new:hover { background: color-mix(in srgb, var(--brand) 14%, transparent); }
body .rail .rail-chat:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
body .rail .rail-chat.active { background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand-deep); font-weight: var(--fw-semibold); box-shadow: inset 2px 0 0 var(--brand); }
body .rail .rail-search-input:focus { outline: none; box-shadow: var(--ws-focus); border-color: var(--brand); }
body .rail-user:hover, body .rail-user.is-open { background: color-mix(in srgb, var(--ink) 6%, transparent); }

/* ---- the chat page: paper on the ground ------------------------------------------------------------------------- */
body .chat-page { background: var(--ws-ground); }
body .chat-page-main { background: var(--ws-paper); }
body .chat-page-topbar {
  background: var(--ws-chrome);
  border-bottom: 1px solid var(--ws-hairline);
  backdrop-filter: saturate(1.1);
}
body .chat-page-title-text { font-size: var(--type-body); letter-spacing: -0.006em; }
body .chat-page-transcript { background: var(--ws-paper); }

/* the transcript reads at a reading size; the UI around it stays dense */
body .chat-page-scroll .msg.a .lede.body.prose,
body .chat-page-scroll .msg.u .bubble { font-size: var(--ws-reading); line-height: 1.62; }
body .chat-page-scroll .msg.a .prose :is(h1, h2, h3, h4) { font-size: 1.02rem; letter-spacing: -0.01em; margin-top: var(--space-4); }
body .chat-page-scroll .msg.a .prose > :first-child { margin-top: 0; }
body .chat-page-scroll .msg.a .prose li { line-height: 1.6; }

/* ---- what the agent writes, inline ------------------------------------------------------------------------------
 * This is most of what anyone will look at all day, so it gets the same care as a document. The rules the transcript
 * was missing: a heading needs air above it and none below, a list needs a marker you can see, inline code needs to
 * read as code without shouting, a link needs to look like a link, and a number in a table should line up. */
body .chat-page-scroll .msg.a .prose :is(h1, h2, h3, h4) + * { margin-top: 0; }
body .chat-page-scroll .msg.a .prose h1 { font-size: 1.12rem; }
body .chat-page-scroll .msg.a .prose :is(ul, ol) { padding-left: 1.35em; }
body .chat-page-scroll .msg.a .prose ul { list-style: none; }
body .chat-page-scroll .msg.a .prose ul > li { position: relative; }
body .chat-page-scroll .msg.a .prose ul > li::before {
  content: ''; position: absolute; left: -0.95em; top: 0.62em;
  width: 5px; height: 5px; border-radius: 50%;
  background: color-mix(in srgb, var(--brand) 55%, var(--text-4));
}
body .chat-page-scroll .msg.a .prose ul ul > li::before { background: none; border: 1px solid var(--text-4); }
body .chat-page-scroll .msg.a .prose ol > li::marker { color: var(--text-3); font-variant-numeric: tabular-nums; }
body .chat-page-scroll .msg.a .prose :is(ul, ol) :is(ul, ol) { margin-top: var(--space-1); margin-bottom: 0; }

body .chat-page-scroll .msg.a .prose :not(pre) > code {
  padding: 0.1em 0.34em;
  border-radius: var(--radius-xs, 3px);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  font-family: var(--font-mono);
  color: var(--text);
  word-break: break-word;
}
body .chat-page-scroll .msg.a .prose pre {
  background: var(--ws-ground);
  border-color: var(--ws-hairline);
  border-radius: var(--radius-md, 6px);
  padding: var(--space-3);
  line-height: 1.5;
  font-size: 0.86rem;
}
body .chat-page-scroll .msg.a .prose pre code { background: none; padding: 0; }

body .chat-page-scroll .msg.a .prose a {
  color: var(--brand-deep);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--brand) 38%, transparent);
  text-underline-offset: 2px;
}
body .chat-page-scroll .msg.a .prose a:hover { text-decoration-color: var(--brand); }

body .chat-page-scroll .msg.a .prose blockquote {
  border-left-color: color-mix(in srgb, var(--brand) 40%, transparent);
  background: color-mix(in srgb, var(--brand) 4%, transparent);
  padding: var(--space-2) var(--space-3);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
body .chat-page-scroll .msg.a .prose blockquote > :last-child { margin-bottom: 0; }
body .chat-page-scroll .msg.a .prose hr { margin: var(--space-4) 0; border: 0; border-top: 1px solid var(--ws-hairline); }
body .chat-page-scroll .msg.a .prose :is(strong, b) { font-weight: var(--fw-semibold); color: var(--text); }
body .chat-page-scroll .msg.a .prose thead th { background: var(--ws-ground); }
body .chat-page-scroll .msg.a .prose td { font-variant-numeric: tabular-nums; }

/* the user's own message: quiet, and clearly theirs */
body .chat-page-scroll .msg.u .bubble {
  background: var(--ws-ground-2);
  border: 1px solid var(--ws-hairline-soft);
  border-radius: var(--radius-lg, 12px);
}

/* ---- the composer: the one raised control on the page ----------------------------------------------------------- */
body .chat-page-composer { background: linear-gradient(180deg, transparent, var(--ws-paper) 40%); }
body .composer {
  background: var(--ws-paper);
  border: 1px solid var(--ws-hairline);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--ws-raise);
  transition: box-shadow var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease);
}
/* One ring, not two. chat.css puts a full-brand border AND a 3px brand-soft halo on focus, and with the theme's own
   border underneath it read as a heavy green double box around the whole composer. Same specificity, quieter answer. */
body .chat-page-composer .composer:focus-within {
  border-color: color-mix(in srgb, var(--brand) 45%, transparent);
  background: var(--ws-paper);
  box-shadow: var(--ws-raise), var(--ws-focus);
}
/* the rule that divides the text from the buttons is furniture, not an edge */
body .chat-page-composer .composer-bar { border-top-color: var(--ws-hairline-soft); }
/* The blanket focus rule below gives every focusable a ring, and the textarea got one INSIDE the composer's own —
   a green box drawn around the text with a second green box around the whole control. The container carries it. */
body .chat-page-composer .composer textarea:focus-visible,
body .chat-page-composer .composer textarea:focus { box-shadow: none; outline: none; }
/* a floor no inline height can undercut: min-height beats height, so a stale measurement cannot clip the placeholder */
body .chat-page-composer .composer textarea { font-size: var(--ws-reading); line-height: 1.55; min-height: calc(1.55em + var(--space-3-5) + var(--space-1-5)); }
body .chat-page-composer .composer textarea::placeholder { color: var(--text-4); }
body .send-btn[data-state="ready"], body .send-btn[data-state="generating"] { box-shadow: 0 1px 2px rgba(11, 18, 32, .18); }

/* ---- the composer's own furniture --------------------------------------------------------------------------------
 * The textarea's max-height is 200px but autosize now caps at eight lines and only then turns scrolling on, so an
 * empty composer no longer shows scrollbar arrows over nothing. These are the parts around it. */
body .chat-page-composer .composer .cm-btn {
  width: 1.9rem; height: 1.9rem;
  border-radius: var(--radius-md, 6px);
  color: var(--text-4);
  transition: background var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease);
}
body .chat-page-composer .composer .cm-btn:hover { background: color-mix(in srgb, var(--brand) 10%, transparent); color: var(--brand-deep); }
body .chat-page-composer .composer .cm-btn svg { width: 1.05rem; height: 1.05rem; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body .chat-page-composer .composer .cm-btn[aria-expanded="true"] { background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand-deep); }
body .chat-page-composer .composer-hint { color: var(--text-4); font-size: var(--type-caption); }

/* ---- the model chip and its menu --------------------------------------------------------------------------------
 * The chip is a quiet pill like the project switcher, not a square icon button: the 1.9rem cm-btn rule above was
 * clipping "Default" to "D" and hiding the caret. The menu is placed from the chip's rect (model-menu.js) and opens
 * ABOVE it, because the composer is the bottom of the page. */
body .chat-page-composer .composer .cm-btn.cm-model {
  width: auto; height: 1.75rem; max-width: 12rem;
  padding: 0 var(--space-1-5) 0 var(--space-2);
  gap: var(--space-1);
  border: 1px solid transparent; border-radius: var(--radius-pill);
  color: var(--text-2); font-size: var(--type-body-sm); font-weight: var(--fw-semibold);
  transition: background var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease);
}
body .chat-page-composer .composer .cm-btn.cm-model:hover,
body .chat-page-composer .composer .cm-btn.cm-model[aria-expanded="true"] {
  background: var(--ws-paper); border-color: var(--ws-hairline); color: var(--text); box-shadow: var(--ws-rest);
}
body .chat-page-composer .composer .cm-btn.cm-model .cm-model-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body .chat-page-composer .composer .cm-btn.cm-model svg.cm-model-caret { width: 0.85rem; height: 0.85rem; flex-shrink: 0; color: var(--text-4); stroke-width: 2; }
body .model-menu {
  z-index: 200; width: min(22rem, calc(100vw - 2rem));
  max-height: calc(100vh - 1rem); overflow-y: auto; overscroll-behavior: contain;
  padding: var(--space-2);
  background: var(--ws-paper); border: 1px solid var(--ws-hairline); border-radius: var(--radius-lg, 12px);
  box-shadow: var(--ws-float);
}
body .model-menu .model-item { padding: var(--space-2); border-radius: var(--radius-md, 6px); font: inherit; }
body .model-menu .model-item { grid-template-columns: 1rem minmax(0, 1fr); }  /* no cost column (operator, 2026-09-04) */
body .model-menu .model-item:hover:not(:disabled), body .model-menu .model-item:focus-visible { background: color-mix(in srgb, var(--brand) 9%, transparent); }
body .model-menu .model-item[aria-selected="true"] .model-label { color: var(--brand-deep); }
body .model-menu .model-check { display: inline-flex; justify-content: center; font-weight: var(--fw-semibold); }
body .model-menu .model-cost { font-variant-numeric: tabular-nums; }
body .model-menu .model-foot { margin-top: var(--space-1); padding: var(--space-2) var(--space-2) var(--space-1); }

/* ---- the slash menu ---------------------------------------------------------------------------------------------
 * Sits ON the composer, not under it: the composer is the bottom of the page, so a menu below it would be off screen.
 * It is a completion, never an interpreter — picking one only types `/name ` for you. */
body .composer { position: relative; }
.cmd-menu {
  position: absolute; left: 0; right: 0; bottom: calc(100% + var(--space-2));
  z-index: 30;
  max-height: 17rem; overflow-y: auto; overscroll-behavior: contain;
  padding: var(--space-1);
  background: var(--ws-paper);
  border: 1px solid var(--ws-hairline);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--ws-float);
}
.cmd-menu[hidden] { display: none; }
.cmd-item {
  display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); align-items: baseline; gap: var(--space-3);
  width: 100%; padding: var(--space-2) var(--space-3);
  border: 0; border-radius: var(--radius-md, 6px);
  background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.cmd-item[aria-selected="true"], .cmd-item:hover { background: color-mix(in srgb, var(--brand) 10%, transparent); }
.cmd-name { font-family: var(--font-mono); font-size: var(--type-body-sm); font-weight: var(--fw-semibold); color: var(--brand-deep); white-space: nowrap; }
.cmd-hint { font-size: var(--type-body-sm); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmd-empty { margin: 0; padding: var(--space-3); color: var(--text-3); font-size: var(--type-body-sm); text-align: center; }

/* ---- the project switcher ---------------------------------------------------------------------------------------
 * A quiet chip in the top bar. Home is the default and is a real row in the list, not an absent state. */
/* The transcript is painted after the header and covered the project menu completely — the menu was never clipped,
   just underneath. A stacking context on the header puts everything it opens above the page. */
body .chat-page-topbar { position: relative; z-index: 20; }
.chat-proj {
  display: inline-flex; align-items: center; gap: var(--space-1-5);
  height: 1.75rem; padding: 0 var(--space-2);
  margin-right: var(--space-3);
  border: 1px solid transparent; border-radius: var(--radius-pill);
  background: transparent; color: var(--text-2); font: inherit; font-size: var(--type-body-sm); cursor: pointer;
  max-width: 12rem;
  transition: background var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease);
}
.chat-proj:hover, .chat-proj[aria-expanded="true"] { background: var(--ws-paper); border-color: var(--ws-hairline); color: var(--text); box-shadow: var(--ws-rest); }
.chat-proj svg { width: 0.95rem; height: 0.95rem; flex-shrink: 0; }
.chat-proj .chat-proj-caret { width: 0.85rem; height: 0.85rem; color: var(--text-4); }
.chat-proj-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--fw-semibold); }
.proj-menu {
  position: fixed;                      /* placed from the button's rect — see project-menu.js */
  z-index: 200; width: min(22rem, calc(100vw - 2rem));
  padding: var(--space-2);
  background: var(--ws-paper); border: 1px solid var(--ws-hairline); border-radius: var(--radius-lg, 12px);
  box-shadow: var(--ws-float);
}
.proj-menu[hidden] { display: none; }
.proj-head { margin: 0 0 var(--space-1); padding: 0 var(--space-2); font-size: var(--type-micro); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-eyebrow-sm); text-transform: uppercase; color: var(--text-4); }
.proj-item {
  display: flex; align-items: center; gap: var(--space-2);
  width: 100%; padding: var(--space-2); border: 0; border-radius: var(--radius-md, 6px);
  background: transparent; color: var(--text); font: inherit; font-size: var(--type-body-sm); text-align: left; cursor: pointer;
}
.proj-item:hover { background: color-mix(in srgb, var(--brand) 9%, transparent); }
.proj-item[aria-checked="true"] { color: var(--brand-deep); font-weight: var(--fw-semibold); }
.proj-tick { display: inline-flex; width: 1rem; flex-shrink: 0; }
.proj-tick svg { width: 1rem; height: 1rem; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.proj-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-tag { margin-left: auto; font-size: var(--type-micro); color: var(--text-4); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow-sm); }
.proj-sep { height: 1px; margin: var(--space-2) var(--space-1); background: var(--ws-hairline); }
.proj-new { display: flex; gap: var(--space-2); padding: 0 var(--space-1); }
.proj-new button {
  flex-shrink: 0;
  height: auto; padding: var(--space-1-5) var(--space-3);
  border: 1px solid transparent; border-radius: var(--radius-md, 6px);
  background: var(--brand); color: #fff;
  font: inherit; font-size: var(--type-body-sm); font-weight: var(--fw-semibold); cursor: pointer;
}
.proj-new button:hover { background: var(--brand-deep); }
.proj-new button:focus-visible { outline: none; box-shadow: var(--ws-focus); }
.proj-new input {
  flex: 1; min-width: 0; font: inherit; font-size: var(--type-body-sm);
  padding: var(--space-1-5) var(--space-2-5);
  border: 1px solid var(--ws-hairline); border-radius: var(--radius-md, 6px);
  background: var(--ws-ground); color: var(--text);
}
.proj-new input:focus { outline: none; border-color: color-mix(in srgb, var(--brand) 42%, transparent); box-shadow: var(--ws-focus); background: var(--ws-paper); }
.proj-foot { margin: var(--space-2) 0 0; padding: 0 var(--space-2); font-size: var(--type-caption); line-height: 1.45; color: var(--text-4); }

/* ---- the empty state: four things to try, sized to their content ------------------------------------------------ */
body .chat-empty { padding: var(--space-10) var(--space-6) var(--space-6); align-content: center; }
body .chat-empty-title { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); letter-spacing: -0.018em; margin-bottom: var(--space-6); }
body .chat-empty-title .soft { display: block; margin-top: var(--space-2); font-size: 0.95rem; font-weight: var(--fw-medium); color: var(--text-3); letter-spacing: 0; }
body .chat-empty-suggestions[data-layout="quadrant"] { width: min(100%, 36rem); max-width: 36rem; gap: var(--space-2-5); }
/* the quadrant layout made each card a SQUARE (aspect-ratio 1/1), which is why they were tall boxes with a line of
   text stranded at the top. A launcher card should be the size of what it says. */
body .chat-empty-suggestions[data-layout="quadrant"] .chat-empty-sg {
  aspect-ratio: auto;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "icon label" "icon body";
  align-content: start;
  gap: 2px var(--space-3);
  padding: var(--space-3-5, 14px);
  background: var(--ws-paper);
  border: 1px solid var(--ws-hairline);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--ws-rest);
  transition: transform var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease);
}
body .chat-empty-suggestions[data-layout="quadrant"] .chat-empty-sg:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--brand) 34%, transparent); box-shadow: var(--ws-raise); }
body .chat-empty-sg:focus-visible { outline: none; box-shadow: var(--ws-focus); }
body .chat-empty-ic { grid-area: icon; align-self: start; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--radius-md, 6px); background: color-mix(in srgb, var(--brand) 10%, transparent); color: var(--brand-deep); }
body .chat-empty-ic svg { width: 1.05rem; height: 1.05rem; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
body .chat-empty-sg:hover .chat-empty-ic { background: color-mix(in srgb, var(--brand) 16%, transparent); }
body .chat-empty-k { grid-area: label; align-self: center; color: var(--text); font-size: var(--type-body-sm); font-weight: var(--fw-semibold); letter-spacing: 0; text-transform: none; }
body .chat-empty-suggestions[data-layout="quadrant"] .chat-empty-v { grid-area: body; max-width: none; color: var(--text-3); font-size: var(--type-body-sm); line-height: 1.45; }

/* the answer's own actions: present, but not shouting until you look at the message.
 * The copy control is a quiet icon + label pill in the same family as the project switcher and the model chip; it
 * sits in the uppercase eyebrow row, so it resets the eyebrow's transform and tracking. It fades in on hover of the
 * message (always visible where there is no hover), and turns brand-tinted with a check while it says "Copied". */
body .chat-page-scroll .msg.a .head { display: flex; align-items: center; gap: var(--space-2); }
body .chat-page-scroll .msg.a .head .msg-copy {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: var(--space-1);
  height: 1.5rem; padding: 0 var(--space-1-5) 0 var(--space-1);
  border: 1px solid transparent; border-radius: var(--radius-pill);
  background: transparent; color: var(--text-3);
  font: inherit; font-size: var(--type-caption); font-weight: var(--fw-semibold);
  letter-spacing: 0; text-transform: none; line-height: 1; cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur-hover) var(--ease), background var(--dur-hover) var(--ease),
    border-color var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease);
}
body .chat-page-scroll .msg.a:hover .head .msg-copy,
body .chat-page-scroll .msg.a .head .msg-copy:focus-visible,
body .chat-page-scroll .msg.a .head .msg-copy[data-state="copied"] { opacity: 1; }
@media (hover: none) { body .chat-page-scroll .msg.a .head .msg-copy { opacity: 1; } }
body .chat-page-scroll .msg.a .head .msg-copy:hover,
body .chat-page-scroll .msg.a .head .msg-copy:focus-visible {
  background: var(--ws-paper); border-color: var(--ws-hairline); color: var(--text); box-shadow: var(--ws-rest);
}
body .chat-page-scroll .msg.a .head .msg-copy:focus-visible { outline: 2px solid color-mix(in srgb, var(--brand) 55%, transparent); outline-offset: 1px; }
body .chat-page-scroll .msg.a .head .msg-copy .msg-copy-ic { width: .9rem; height: .9rem; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
body .chat-page-scroll .msg.a .head .msg-copy .ic-check { display: none; }
body .chat-page-scroll .msg.a .head .msg-copy[data-state="copied"] {
  color: var(--brand-deep);
  border-color: color-mix(in srgb, var(--brand) 30%, transparent);
  background: color-mix(in srgb, var(--brand) 10%, transparent);
}
body .chat-page-scroll .msg.a .head .msg-copy[data-state="copied"] .ic-copy { display: none; }
body .chat-page-scroll .msg.a .head .msg-copy[data-state="copied"] .ic-check { display: inline; }
body .chat-page-scroll .msg.a.streaming .head .msg-copy { display: none; }

/* ---- notices, cards, chips: one family --------------------------------------------------------------------------- */
body body .chat-notice { box-shadow: var(--ws-raise); border-radius: var(--radius-pill); }
body body .chat-page-scroll .artifact-callout { border-radius: var(--radius-md, 6px); box-shadow: var(--ws-rest); }
body body .chat-page-scroll .artifact-callout:hover { border-color: color-mix(in srgb, var(--brand) 34%, transparent); box-shadow: var(--ws-raise); }
body body .chat-page-scroll .work-group { border-radius: var(--radius-md, 6px); background: var(--ws-ground); border-color: var(--ws-hairline); }
body body .chat-page-scroll .work-group[open] { background: var(--ws-paper); box-shadow: var(--ws-rest); }
body body .attachment-chip { border-radius: var(--radius-pill); }

/* ---- .sr-only actually hides things ------------------------------------------------------------------------------
 * Two places label a control for a screen reader with `<span class="sr-only">`, and the class was never defined
 * anywhere in the shell — the design system's own helper is `th-`prefixed and its utilities sheet is not loaded here.
 * So both labels rendered as plain visible text: "Search artifacts" sat on top of the search box in the Artifacts
 * gallery. One rule fixes the label and the layout at the same time. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* one accent, earned: the KIND pills are colour-coded because the cards are (report amber, interactive green, page
   blue). The place pills carry no such meaning — they were tinted `--chart-7`, which lands as a purple that belongs
   to nothing else on the screen. A selected place is just a selected thing: ink. */
body .wb-artifacts-facets .pills.places .pill { --k: var(--text-2); }

/* ---- focus, everywhere, once ------------------------------------------------------------------------------------- */
body .chat-page :is(button, a, input, textarea, select, [tabindex]):focus-visible,
body .rail :is(button, a, input, [tabindex]):focus-visible { outline: none; box-shadow: var(--ws-focus); border-radius: var(--radius-sm); }

/* ---- sign-in ------------------------------------------------------------------------------------------------------ */
body[data-route="sign-in"] { background: radial-gradient(120% 90% at 50% -10%, color-mix(in srgb, var(--brand) 10%, var(--ws-ground)), var(--ws-ground) 60%); }

/* ---- nothing may make the chat column wider than its slot -------------------------------------------------------
 * Measured with the workbench open: an assistant table wanted 802px inside a 720px message, which pushed the grid's
 * single column to 985px inside an 815px pane. Everything then hung 170px under the workbench and was clipped —
 * mid-word in the paragraphs, and the top bar's own tab buttons off the edge. A grid column is sized by its content
 * unless it is told otherwise, and `min-width: 0` on the container does not reach it.
 *
 * So: pin the column, and let a wide table scroll on its own rather than dragging the page out with it. */
body .chat-page-main { grid-template-columns: minmax(0, 1fr); }
body .chat-page-topbar { min-width: 0; }
body .chat-page-title { min-width: 0; }
body .chat-page-title-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* `.msg.a` is two classes, so chat.css's `overflow: hidden` out-specifies a `.msg` selector — match it exactly */
body .chat-page-scroll .msg .prose table,
body .chat-page-scroll .msg.a .prose table {
  display: block;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  /* A cut-off column with no cue reads as broken rather than scrollable. The covering gradient scrolls WITH the
     content (`local`) and the shadow does not (`scroll`), so the shadow is uncovered only while there is more table
     to the right, and disappears at the end. No script, no resize listener. */
  background-image:
    linear-gradient(to left, var(--ws-paper), color-mix(in srgb, var(--ws-paper) 0%, transparent)),
    radial-gradient(farthest-side at 100% 50%, rgba(11, 18, 32, .16), transparent);
  background-position: right center, right center;
  background-repeat: no-repeat;
  background-size: 28px 100%, 10px 100%;
  background-attachment: local, scroll;
}

/* ---- the workbench: the same ground and the same paper --------------------------------------------------------
 * The panel had its own near-miss of the page's ground (#F8FAFC beside #F4F6FA). Two greys four points apart, side by
 * side, do not read as a deliberate pair — they read as a mistake. One ground, one paper, one hairline, everywhere. */
.workbench { --wb-chrome: var(--ws-chrome); --wb-focus: var(--ws-focus); }
body .workbench { background: var(--ws-ground); box-shadow: inset 1px 0 0 var(--ws-hairline); }
body .wb-pane { background: var(--ws-paper); }
body .wb-tab[aria-selected="true"] { background: var(--ws-paper); border-color: var(--ws-hairline); box-shadow: 0 1px 0 var(--ws-paper), 0 -6px 14px -10px rgba(11, 18, 32, .16); }
body .wb-files, body .wb-web, body .wb-map { background: var(--ws-paper); }
body .wb-pane-head, body .wb-files-bar, body .wb-web-bar { border-bottom-color: var(--ws-hairline); }
body .wb-divider, body .chat-page-divider { background: var(--ws-hairline); }
body .wb-tool:hover { box-shadow: var(--ws-rest); border-color: var(--ws-hairline); }

/* the Web tab: the address bar is the one control that matters, so it gets the composer's treatment */
body .wb-web-bar input {
  border: 1px solid var(--ws-hairline);
  border-radius: var(--radius-pill);
  background: var(--ws-paper);
  box-shadow: var(--ws-rest);
  transition: box-shadow var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease);
}
body .wb-web-bar input:focus { outline: none; border-color: color-mix(in srgb, var(--brand) 42%, transparent); box-shadow: var(--ws-focus); }
body .wb-web-view { background: var(--ws-ground-2); }

@media (prefers-reduced-motion: reduce) {
body .chat-empty-sg, body .composer { transition: none; }
body .chat-empty-sg:hover { transform: none; }
}