web/src/assistant/assistant.css

/* ---------------------------------------------------------------------------
   assistant/assistant.css — the AI assistant's own stylesheet (owner item 2,
   2026-08-14).

   ⭐ THESE RULES ARE `query.css`'s ASK/ANSWER/LIST RULES, MOVED — not copied and
   not re-invented. The ask box left the Query module when Query became the
   database frame the owner asked for, and the styling went with the markup it
   styles. `query.css` keeps only what the new Query page still draws. A copy in
   both files would be two places for one look to drift.

   Shipped BESIDE its component (the `FormInterface.css` / `query.css`
   precedent) rather than added to `index.css`. Vite carries the import;
   `verify_ui`'s node shim already stubs the CSS require for exactly this shape.

   ⛔ EVERY FONT SIZE IS A `--lp-fs-*` TOKEN AND EVERY COLOUR A `--lp-*` TOKEN.
   Wave-21 R5 is gated app-wide over every CSS file under src, and a literal
   here reds `web_ui` for the whole tree. No emojis, no ALL-CAPS chrome
   (DESIGN.md R6).

   ⛔⛔ AND DO NOT WRITE A GLOB IN THIS COMMENT. A star-star followed by a slash
   spells the CSS COMMENT TERMINATOR, so the comment would end mid-sentence,
   every line after it would become stray tokens, and `lightningcss` dies on the
   first backtick it then meets. `tsc` passes and `vite` transforms every module
   — the build fails in the MINIFIER, nowhere near the sentence that caused it.
   That cost wave 32 a deploy.
--------------------------------------------------------------------------- */

.as-page {
  height: 100%;
  overflow-y: auto;
  padding: 34px 44px 56px;
  box-sizing: border-box;
  background: var(--lp-wash);
}

.as-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 6px;
  font-size: var(--lp-fs-lg);
  font-weight: 650;
  color: var(--lp-ink);
}

.as-lede {
  margin: 0 0 22px;
  max-width: 62ch;
  font-size: var(--lp-fs-sm);
  line-height: var(--lp-lh);
  color: var(--lp-muted);
}

.as-sub {
  margin: 30px 0 12px;
  font-size: var(--lp-fs-md);
  font-weight: 650;
  color: var(--lp-ink);
}

/* ── the ask row ─────────────────────────────────────────────────────────── */

.as-ask {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  max-width: 940px;
}

.as-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 180px;
}

.as-field--grow {
  flex: 1 1 380px;
}

.as-label {
  font-size: var(--lp-fs-2xs);
  font-weight: 600;
  color: var(--lp-muted);
}

.as-select,
.as-input {
  box-sizing: border-box;
  width: 100%;
  padding: 8px 11px;
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-md);
  background: var(--lp-surface);
  color: var(--lp-ink);
  font-size: var(--lp-fs-sm);
  font-family: inherit;
}

.as-select:focus-visible,
.as-input:focus-visible {
  outline: 2px solid var(--lp-blue-solid);
  outline-offset: 1px;
}

/* ── buttons ─────────────────────────────────────────────────────────────── */

.as-btn {
  padding: 8px 14px;
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-md);
  background: var(--lp-surface);
  color: var(--lp-ink);
  font-size: var(--lp-fs-sm);
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
}

.as-btn:hover:not(:disabled) {
  background: var(--lp-surface-2);
}

.as-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

.as-btn--primary {
  border-color: transparent;
  background: var(--lp-blue-solid);
  color: var(--lp-surface);
}

.as-btn--primary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--lp-blue-solid) 82%, #000);
}

.as-btn--quiet {
  border-color: transparent;
  background: transparent;
  color: var(--lp-muted);
  font-weight: 500;
}

.as-btn--quiet:hover {
  color: var(--lp-red-deep);
  background: transparent;
}

/* ── the answer, and the read-back that is the point of it ───────────────── */

.as-answer {
  max-width: 940px;
  margin: 20px 0 0;
  padding: 16px 18px;
  border: 1px solid var(--lp-line);
  border-left: 3px solid var(--lp-blue-solid);
  border-radius: var(--lp-r-md);
  background: var(--lp-surface);
}

.as-answer.is-refused {
  border-left-color: var(--lp-yellow-deep);
}

.as-answer-head {
  margin: 0 0 6px;
  font-size: var(--lp-fs-2xs);
  font-weight: 650;
  color: var(--lp-muted);
}

.as-answer-body {
  margin: 0;
  max-width: 78ch;
  font-size: var(--lp-fs-sm);
  line-height: var(--lp-lh);
  color: var(--lp-ink);
}

/* The backup-model notice (W33-T50). ⚠ Deliberately a CAUTION and not an alarm: the answer is
   usable, it just deserves a closer read, and `is-refused` one rule up already owns the stronger
   voice with the same yellow. Sized down and muted so it reads as a footnote to the read-back
   rather than competing with it — DESIGN.md's "never over-explain" applied to a warning. */
.as-answer-note {
  margin: 8px 0 0;
  max-width: 78ch;
  font-size: var(--lp-fs-2xs);
  line-height: var(--lp-lh);
  color: var(--lp-yellow-deep);
}

.as-answer-acts {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

/* ── the list of what the assistant has built ────────────────────────────── */

.as-note {
  max-width: 62ch;
  margin: 14px 0 0;
  font-size: var(--lp-fs-sm);
  line-height: var(--lp-lh);
  color: var(--lp-muted);
}

.as-note.is-warn {
  color: var(--lp-red-deep);
}

.as-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 940px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.as-row {
  padding: 14px 16px;
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-md);
  background: var(--lp-surface);
}

.as-row-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}

.as-row-open {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--lp-blue-solid);
  font-size: var(--lp-fs-md);
  font-family: inherit;
  font-weight: 650;
  cursor: pointer;
  text-align: left;
}

.as-row-open:hover {
  text-decoration: underline;
}

.as-row-meta {
  font-size: var(--lp-fs-2xs);
  color: var(--lp-muted);
}

.as-row-q {
  margin: 6px 0 0;
  max-width: 78ch;
  font-size: var(--lp-fs-sm);
  font-style: italic;
  color: var(--lp-ink);
}

.as-row-explain {
  margin: 4px 0 0;
  max-width: 78ch;
  font-size: var(--lp-fs-2xs);
  line-height: var(--lp-lh);
  color: var(--lp-muted);
}

.as-row-acts {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}