/* ══════════════════════════════════════════════════════════════════════════
   Build Informed · bi-ask.css                    STAGING — not in deploy/

   Every colour, size, and spacing value here is a bi.css custom property.
   Nothing is hardcoded: this widget is meant to land on the dashboard and
   look like it was always there, and a hardcoded hex is how that stops being
   true the next time the palette moves.

   Scoped under .bi-ask so this can be dropped onto any page without
   colliding with a tool's own styles.

   v2, 31 July 2026: rebuilt as an actual multi-turn thread. v1 was a form
   that replaced its one answer area on every question — closer to a search
   box than a chat, and it read that way. This borrows the app's OWN existing
   visual vocabulary for the redesign rather than a generic SaaS chat-bubble
   look, which would be the first thing on this app to use rounded colour
   bubbles with drop shadows — nothing else here does:
     - the assistant's answer reuses read.html's `.read__sample` idiom (a
       tinted block with a coloured top rule), the same pattern already used
       for a pull-quote or worked example — this is Build Informed's own
       shape for "a passage worth setting apart," not a new one.
     - the user's own question is right-aligned plain text with an eyebrow
       label above it, the same label convention used everywhere else
       (`.eyebrow-label`, `.gterm__meta`) rather than a coloured bubble.
     - the composer is a pill input + a circular fill button, matching
       `.btn`'s pill radius and the module accent fill already used for
       primary actions everywhere else.
   ══════════════════════════════════════════════════════════════════════ */

.bi-ask {
  font-family: var(--font-sans);
  color: var(--ink);
  max-width: 720px;
  display: flex;
  flex-direction: column;
  /* A dashboard card, not a page: bounded height with its own scroll, like
     any chat panel. Override --bi-ask-h on the host element if a different
     slot needs a different height (e.g. a full-height panel on its own
     screen rather than a dashboard card). */
  height: var(--bi-ask-h, 480px);
  border: var(--line-w) solid var(--ink);
}

/* ── slim persistent header ───────────────────────────────────────────────
   Small on purpose: this sits above a thread that will usually already have
   messages in it, and the app's own header conventions (.appbar) are this
   compact for the same reason — a heading you only need to glance at once
   shouldn't keep taking full-title space forever. */

.bi-ask__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-3) var(--space-2);
  border-bottom: var(--line-bold) solid var(--ink);
  flex: none;
}

.bi-ask__label {
  font-size: var(--t-label);
  font-weight: var(--fw-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--label);
}

.bi-ask__title {
  font-family: var(--font-serif);
  font-weight: var(--fw-serif);
  font-size: var(--t-h4);
  line-height: 1;
  letter-spacing: var(--ls-tight);
  color: var(--ink);
}

/* ── the thread ────────────────────────────────────────────────────────── */

.bi-ask__thread {
  flex: 1;
  min-height: 0;               /* the flex-scroll trick: without this, the
                                   child refuses to shrink below its content
                                   height and the panel grows instead of
                                   scrolling */
  overflow-y: auto;
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Empty-state dek. Only rendered before the first turn; the thread carries
   real messages after that, same as any chat app's placeholder screen. */
.bi-ask__empty {
  margin: auto 0;
  max-width: 46ch;
  font-size: var(--t-body-sm);
  line-height: var(--lh-body);
  color: var(--ink-mid);
  text-wrap: pretty;
}

.bi-ask__turn { display: flex; flex-direction: column; }

/* The buyer's own question: right-aligned plain text, not a bubble. The
   eyebrow label is the only speaker marker, same convention as every other
   metadata label in the app. */
.bi-ask__turn--user { align-items: flex-end; text-align: right; }

.bi-ask__q-label {
  font-size: var(--t-label-sm);
  font-weight: var(--fw-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--space-1);
}

.bi-ask__q {
  font-size: var(--t-body-sm);
  line-height: var(--lh-body);
  color: var(--ink-mid);
  max-width: 85%;
  text-wrap: pretty;
}

/* The assistant's turn: read.html's "read__sample" idiom — a tinted block
   with a coloured top rule — carried over so an answer looks like a passage
   Build Informed set apart, not an invented chat-bubble shape. The tint is
   built from the same rgba family as --rule/--track rather than the
   page-level --wash token, which isn't guaranteed to be defined wherever
   this widget is embedded. */
.bi-ask__turn--assistant {
  align-items: stretch;
  padding: var(--space-3);
  background: rgba(90, 78, 45, .05);
  border-top: var(--line-bold) solid var(--fill);
}

.bi-ask__badge {
  font-size: var(--t-label-sm);
  font-weight: var(--fw-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 var(--space-2);
}

.bi-ask__answer {
  font-size: var(--t-body-sm);
  line-height: var(--lh-body);
}

.bi-ask__answer p { margin: 0 0 var(--space-2); }
.bi-ask__answer p:last-child { margin-bottom: 0; }

.bi-ask__answer a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(var(--underline), var(--underline));
  background-size: 100% var(--underline-w);
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 1px;
  transition: background-color var(--dur) var(--ease);
}

.bi-ask__answer a:hover { background-color: var(--highlight-marigold); }

/* Pending turn: same assistant-block shape, filled with the pulse instead of
   text, so the "typing" state occupies exactly where the real answer is
   about to land rather than appearing somewhere else and jumping. */
.bi-ask__status {
  font-size: var(--t-body-sm);
  color: var(--ink-mid);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.bi-ask__pulse {
  width: 7px; height: 7px;
  border-radius: var(--radius-pill);
  background: var(--fill);
  animation: bi-ask-pulse 1.4s var(--ease) infinite;
  flex: none;
}

@keyframes bi-ask-pulse {
  0%, 100% { opacity: .25; transform: scale(.8); }
  50%      { opacity: 1;   transform: scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  .bi-ask__pulse { animation: none; opacity: .7; }
}

.bi-ask__turn--error {
  padding-left: var(--space-2);
  border-left: var(--line-bold) solid var(--signal-stop);
}

.bi-ask__error-text {
  font-size: var(--t-body-sm);
  line-height: var(--lh-body);
  color: var(--ink);
}

.bi-ask__cites {
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: var(--hair) solid var(--rule);
}

.bi-ask__cites-label {
  font-size: var(--t-label-sm);
  font-weight: var(--fw-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-soft);
  display: block;
  margin-bottom: var(--space-1);
}

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

.bi-ask__cites li { margin-bottom: var(--space-1); }

.bi-ask__cites a {
  font-size: var(--t-body-sm);
  line-height: var(--lh-snug);
  color: var(--ink);
  text-decoration: none;
  border-bottom: var(--hair) solid var(--rule);
}

.bi-ask__cites a:hover { border-bottom-color: var(--line); }

.bi-ask__cites .bi-ask__cite-ctx {
  font-size: var(--t-label-sm);
  color: var(--ink-soft);
  border: none;
  margin-left: var(--space-1);
}

/* ── the composer ──────────────────────────────────────────────────────────
   Pill input + circular send button, matching .btn's pill radius and the
   module accent fill already used for every primary action in the app. */

.bi-ask__composer {
  flex: none;
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-top: var(--line-bold) solid var(--ink);
}

.bi-ask__input {
  flex: 1;
  font-family: inherit;
  font-size: var(--t-body-sm);
  line-height: var(--lh-snug);
  color: var(--ink);
  background: var(--paper);
  border: var(--line-w) solid var(--rule);
  border-radius: var(--radius-pill);
  padding: 11px var(--space-3);
  resize: none;
  max-height: 96px;              /* ~4 lines before it scrolls internally */
  overflow-y: auto;
  transition: border-color var(--dur) var(--ease);
}

.bi-ask__input:focus {
  outline: none;
  border-color: var(--line);
}

.bi-ask__input::placeholder { color: var(--ink-soft); }

/* Transient pre-submit validation only (empty / too-long) — NOT a failed
   send, which renders inside the thread as its own turn instead so the
   question that failed stays visible in history. Empty and invisible until
   set; cleared as soon as the reader starts typing again. */
.bi-ask__validation {
  flex: none;
  margin: 0;
  padding: 0 var(--space-3);
  min-height: 1em;
  font-size: var(--t-label-sm);
  color: var(--signal-stop);
}
.bi-ask__validation:empty { padding: 0; min-height: 0; }

.bi-ask__count {
  align-self: center;
  font-size: var(--t-label-sm);
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bi-ask__count--over { color: var(--signal-stop); }

.bi-ask__send {
  flex: none;
  width: var(--touch);
  height: var(--touch);
  display: grid;
  place-items: center;
  color: var(--on-fill);
  background: var(--fill);
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: opacity var(--dur) var(--ease);
}

.bi-ask__send:hover:not(:disabled) { opacity: .88; }
.bi-ask__send:disabled { opacity: .4; cursor: default; }
.bi-ask__send svg { width: 18px; height: 18px; }

/* The standing disclosure. Shown once, under the composer, not repeated per
   turn: a chat with real history repeating a disclaimer after every message
   is exactly the "disclaims so heavily the content loses its usefulness"
   pattern the Voice Card warns against. One instance, always visible,
   covers it. */
.bi-ask__foot {
  flex: none;
  padding: var(--space-2) var(--space-3) var(--space-3);
  font-size: var(--t-label-sm);
  line-height: var(--lh-snug);
  color: var(--ink-soft);
}