/* ============================================================
   assistant.components.css · ถามผู้ช่วย drawer

   REUSES the shipped .drawer / .drawerscrim / .dr-head / .dr-eyebrow /
   .panelclose / .btn grammar from the notification centre and the trade
   sheets. Everything below is scoped under .asdrawer so it can only affect
   this sheet.

   🎨 Colours come from tokens only. The provenance chips reuse the PROVENANCE
   ramp the rest of the app already uses for "official / estimate / withheld",
   because that is exactly what 🔵-vs-⚪ is: where a number came from. Those
   pairs are already contrast-checked; inventing a new pair here would be a
   fresh unmeasured claim, which is how the brass fill shipped at 3.92:1.

   ⚠️ No comment ever sits BETWEEN two selectors in a list here. A comment in
   that position welds them into one descendant selector — `.a, /*x*​/ .b {}`
   silently becomes `.a .b` — which is how a live input shipped unstyled at
   13.3px on production.
   ============================================================ */

.drawer.asdrawer {
  width: min(520px, 100%);
  display: flex;
  flex-direction: column;
}

.asdrawer .as-wrap {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

.asdrawer .dr-head {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s4);
  border-bottom: 1px solid var(--line);
}

.asdrawer .dr-eyebrow {
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  font-weight: var(--fw-bold);
}

.asdrawer .dr-head h2 {
  margin: .15rem 0 0;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: -.01em;
}

.asdrawer .as-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

/* ---- empty state: examples, not an empty box ---- */

.asdrawer .as-empty {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.asdrawer .as-sub {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
}

.asdrawer .as-ex {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.asdrawer .as-chip {
  border: 1px solid var(--line2);
  background: var(--surface2);
  color: var(--ink2);
  border-radius: var(--r-pill);
  padding: var(--s2) var(--s3);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
}

.asdrawer .as-chip:hover {
  border-color: var(--brand);
  color: var(--brand-ink);
}

/* ---- messages ---- */

.asdrawer .as-msg {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  max-width: 92%;
}

.asdrawer .as-me {
  align-self: flex-end;
  align-items: flex-end;
}

.asdrawer .as-them {
  align-self: flex-start;
}

.asdrawer .as-b {
  border-radius: var(--r);
  padding: var(--s3);
  line-height: var(--lh-base);
  font-size: var(--fs-sm);
  white-space: normal;
}

.asdrawer .as-me .as-b {
  background: var(--brand-soft);
  color: var(--brand-ink);
  border: 1px solid var(--line2);
}

.asdrawer .as-them .as-b {
  background: var(--surface2);
  color: var(--ink);
  border: 1px solid var(--line);
}

.asdrawer .as-wait {
  color: var(--muted);
  font-style: italic;
}

/* ---- the wait, said out loud ----
   The elapsed count and the "still looking" note only appear after 5 s and 20 s
   (assistant.view.js). Nothing here animates: a spinner next to a number that
   is already ticking is two things saying the same thing, and a moving element
   held for 55 seconds is its own kind of unpleasant. */
.asdrawer .as-waitnote {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.asdrawer .as-stop {
  margin-top: 8px;
  padding: 6px 12px;
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.asdrawer .as-stop:hover,
.asdrawer .as-stop:focus-visible {
  color: var(--ink);
  border-color: var(--ink);
}

/* ---- provenance: the dot AND the word ----
   A coloured dot on its own explains nothing the first time it is seen, and
   this is the one label the platform cannot afford to have misread. */

.asdrawer .as-prov {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semi);
  letter-spacing: .02em;
  padding: 2px var(--s2);
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  align-self: flex-start;
}

.asdrawer .as-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 8px;
}

.asdrawer .as-tool {
  color: var(--pv-official);
  background: var(--pv-official-bg);
  border-color: var(--pv-official-ln);
}

.asdrawer .as-gen {
  color: var(--pv-stale);
  background: var(--pv-stale-bg);
  border-color: var(--pv-stale-ln);
}

.asdrawer .as-un {
  color: var(--warn);
  background: var(--warn-bg);
  border-color: var(--pv-est-ln);
}

.asdrawer .as-err {
  color: var(--bad);
  background: var(--bad-bg);
  border: 1px solid var(--bad);
  border-radius: var(--r-sm);
  padding: var(--s2) var(--s3);
  font-size: var(--fs-sm);
}

/* ---- composer ---- */

.asdrawer .as-foot {
  border-top: 1px solid var(--line);
  padding: var(--s3) var(--s4) var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  background: var(--surface);
}

.asdrawer .as-rules {
  font-size: var(--fs-2xs);
  color: var(--muted);
  line-height: var(--lh-base);
}

.asdrawer .as-compose {
  display: flex;
  gap: var(--s2);
}

/* 🔴 16px minimum, explicitly. Anything under it makes iOS Safari zoom the
   whole page on focus, and the shipped recovery input was 13.3px on production
   because a stray comment had welded its selector into one that matched
   nothing. Stated here in absolute units rather than inherited. */
.asdrawer .as-in {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 16px;
  padding: var(--s3);
  border: 1px solid var(--line2);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
}

.asdrawer .as-in:focus {
  outline: 2px solid var(--ring);
  outline-offset: 1px;
}

.asdrawer .as-send {
  background: var(--brand-fill);
  color: var(--brand-fill-ink);
  border: 1px solid var(--brand-fill);
  border-radius: var(--r-sm);
  padding: var(--s3) var(--s4);
  font: inherit;
  font-weight: var(--fw-semi);
  cursor: pointer;
}

.asdrawer .as-send:hover {
  background: var(--brand-fill-hov);
  border-color: var(--brand-fill-hov);
}

.asdrawer .as-clearbtn {
  align-self: flex-start;
  background: none;
  border: none;
  padding: 0;
  color: var(--muted);
  font: inherit;
  font-size: var(--fs-2xs);
  text-decoration: underline;
  cursor: pointer;
}