/* The assistant's stylesheet.
 *
 * Lifted verbatim out of the site this component came from — the rules are
 * unchanged; only the custom-property NAMES differ, and they differ for a
 * reason worth stating.
 *
 * The originals were that site's own design tokens: --brand-accent,
 * --brand-sand, --ink-2. A component used by applications under two
 * deliberately separate brands cannot ship a stylesheet that reaches for one
 * brand's token names, so every one of them is now a package-owned --sa-*
 * name, and the consumer maps its own tokens onto them in one small block.
 * See README.md, "The token contract".
 *
 * EVERY --sa-* reference carries a literal fallback, and that is not tidiness.
 * A consumer that defines none of these gets a plain but coherent panel; a
 * consumer missing ONE gets a panel with one wrong colour. Without the
 * fallbacks an undefined token resolves to nothing at all, silently, with no
 * error in the console and no failing test — the same way retrieval fails, in
 * a second place. The fallbacks are deliberately neutral greys and a plain
 * blue: they are what an unconfigured panel looks like, and they are nobody's
 * brand on purpose.
 *
 * The form fields inside the panel (.btn, .field, .fineprint and .honeypot)
 * are NOT styled here. They are ordinary site classes that the markup borrows,
 * on the assumption that a site with forms already has them. If yours does
 * not, assist-forms.css is a minimal set. See the README.
 *
 * .sr-only is the exception, and is hidden below, inside the panel only. The
 * template's own labels depend on it, and the second consumer, which has its
 * own form styles and never loaded assist-forms.css, showed "Ask a question"
 * printed above the question box (A16). Scoped to .assist so a site's own
 * .sr-only elsewhere is never overridden.
 */
.assist .sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================
   ASSIST DOCK — ask a question or request a call back.
   Deliberately not a third-party widget: no external script,
   no tracking, no iframe, and it costs nothing to run.
   ============================================================ */
.assist { position: fixed; right: 20px; bottom: 20px; z-index: 50; }

/* Two entrances, stacked. FAQ sits above Ask and is the quieter of the two:
   browsing is the lower-intent act, and the button that starts a conversation
   should be the one that reads as the primary. */
.assist-dock { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
/* The container takes no taps; only what is inside it does.
   The dock is as wide as its widest child. Above 560px that is the labelled
   FAB, 111px, so anything narrower stacked in the column — a 40px back-to-top
   chevron, say — leaves the rest of its row as dead space, plus the gap above
   the button. Measured: 4,414 dead pixels at 1280px and at 768px, where a tap
   beside the chevron did nothing.
   Turning off the dock alone is not enough, and was measured: .assist is the
   same size underneath it and catches every one of the same 4,414 taps. So
   both containers are turned off, and the panel and the dock's children turned
   back on. Measured afterwards: 0 dead pixels at 1280 and 768, 0 of 6,875
   bottom-strip probes at 375, and the FAB, the chevron, the panel's close
   button, input and chips all still take their taps.
   Anything added to .assist or .assist-dock later is interactive because it is
   a child of the panel or the dock — not because its container happened to be. */
.assist, .assist-dock { pointer-events: none; }
.assist-panel, .assist-dock > * { pointer-events: auto; }
/* The dock goes away while the panel is open. It is two rows tall now, and the
   panel is positioned off the bottom of this corner — so the upper button sat
   behind the panel, present to a screen reader and to the tab order but
   invisible and unclickable. Switching modes is done from inside the panel,
   where the choice is in front of you rather than hidden underneath it. */
.assist.is-open .assist-dock { display: none; }
/* ---- browse mode ---- */
.assist-faq { display: flex; flex-direction: column; min-height: 0; }
.assist-filter { padding: 12px 16px 10px; border-bottom: 1px solid var(--sa-hair, #e0e0e0); }
/* Every field here is 16px at least (A61): iOS Safari zooms the page into a
   field under 16px when it takes focus, and leaves it zoomed. */
.assist-filter input {
  font: inherit; font-size: max(16px, var(--sa-fs-base, 15px)); width: 100%;
  padding: 9px 12px; border-radius: 4px;
  border: 1px solid var(--sa-hair, #e0e0e0); background: var(--sa-surface, #ffffff); color: var(--sa-ink, #1b1b1f);
}
.assist-filter input:focus { outline: 2px solid var(--sa-accent, #4a6fa5); outline-offset: 1px; border-color: transparent; }
/* Room for a focused row's outline where the keyboard scrolls it to an edge
   (batch 39, IAM Tech's Chennai_53 Validator: cut by up to 1.4 px). */
.assist-faq-list { padding: 6px 16px 10px; overflow-y: auto; scroll-padding-block: 8px; }
.assist-faq-list.is-empty::after {
  content: 'Nothing matches that. Try the Ask tab and write it in your own words.';
  display: block; padding: 14px 2px; font-size: var(--sa-fs-sm, 13px); color: var(--sa-ink-3, #6a6a72); line-height: 1.5;
}
.assist-faq-group h3 {
  font-size: var(--sa-fs-xs, 11px); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sa-ink-3, #6a6a72); margin: 14px 0 4px;
}
.assist-qa { border-bottom: 1px solid var(--sa-hair, #e0e0e0); }
.assist-qa summary {
  cursor: pointer; padding: 10px 2px; font-size: var(--sa-fs-base, 15px); font-weight: 600;
  color: var(--sa-ink, #1b1b1f); line-height: 1.4;
}
.assist-qa summary:hover { color: var(--sa-accent-ink, #2f4c73); }
.assist-qa p { font-size: var(--sa-fs-sm, 13px); line-height: 1.55; color: var(--sa-ink-2, #4a4a52); margin: 0 0 8px; }
.assist-faq-more {
  padding: 10px 16px 14px; margin: 0; border-top: 1px solid var(--sa-hair, #e0e0e0);
  font-size: var(--sa-fs-sm, 13px); color: var(--sa-ink-3, #6a6a72);
}
.assist-link {
  font: inherit; font-size: inherit; font-weight: 700; cursor: pointer;
  background: none; border: 0; padding: 0;
  color: var(--sa-accent-ink, #2f4c73); text-decoration: underline; text-underline-offset: 2px;
}
.assist-copyout {
  /* Focused when copying fails, so 16px at least, as every field here (A61 review). */
  width: 100%; margin-top: 8px; font: inherit; font-size: max(16px, var(--sa-fs-sm, 13px));
  padding: 10px 12px; border-radius: 4px; border: 1px solid var(--sa-accent-deep, #3a5a87);
  background: #fff; color: var(--sa-ink, #1b1b1f); resize: vertical;
}
.assist-tail { margin: 10px 0 2px; display: flex; gap: 8px; }
.assist-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: none; cursor: pointer;
  border-radius: 8px; border: 1px solid var(--sa-hair, #e0e0e0);
  background: var(--sa-surface-2, #f5f5f5); color: var(--sa-ink-2, #4a4a52);
  transition: color .16s ease, border-color .16s ease, background-color .16s ease, transform .16s ease-out;
}
.assist-ico:hover {
  color: var(--sa-accent-ink, #2f4c73); border-color: var(--sa-accent-deep, #3a5a87);
  background: #fff; transform: translateY(-1px);
}
.assist-ico:active { transform: translateY(1px); }
/* A chip is spent by its first click: assist.js disables every chip on offer
   when one is chosen, so a double-click cannot run a step twice. Shown as
   spent rather than hidden, so the choices just made stay readable. */
.assist-opt:disabled { cursor: default; opacity: .55; }
/* The way back from an open form to typing. assist.js adds it to each form. */
.assist-formback { align-self: flex-start; margin-top: 2px; font-size: var(--sa-fs-sm, 13px); }
/* A chip that has been ticked stays ticked. These are the only chips in the
   panel that toggle rather than consume, because somebody picking what hurts
   about their job has more than one answer. */
.assist-opt.is-on {
  background: var(--sa-ink, #1b1b1f); color: var(--sa-surface, #ffffff); border-color: var(--sa-ink, #1b1b1f);
}
.assist-opt.is-on::after { content: ' ✓'; }

/* ---- answers ---- */
.assist-ask-mode { display: flex; flex-direction: column; min-height: 0; }
/* The heading of the passage that answered, so it is obvious WHAT was matched
   and not only what it said. */
.assist-qa-h { font-weight: 700; color: var(--sa-ink, #1b1b1f) !important; }
.assist-hedge { font-size: var(--sa-fs-sm, 13px); color: var(--sa-ink-3, #6a6a72) !important; font-style: italic; }
.assist-src { font-size: var(--sa-fs-sm, 13px); margin-top: 6px; }

/* A34: a passage's line breaks are its list items; show them as lines. */
.assist-passage { white-space: pre-line; }

/* A32: an approved natural answer, and the exact words behind it. */
.assist-natural { margin: 0; }
.assist-exact { margin-top: 6px; font-size: var(--sa-fs-sm, 13px); }
.assist-exact > summary { cursor: pointer; color: var(--sa-accent-deep, #3a5a87); }
.assist-exact > summary:focus-visible { outline: 2px solid var(--sa-accent, #4a6fa5); outline-offset: 2px; }
.assist-exact[open] > summary { margin-bottom: 4px; }

/* Three dots while it looks something up. */
.assist-typing { display: flex; gap: 5px; align-items: center; padding: 6px 2px; }
.assist-typing span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--sa-ink-3, #6a6a72); opacity: .35;
  animation: assistDot 1.05s ease-in-out infinite;
}
.assist-typing span:nth-child(2) { animation-delay: .16s; }
.assist-typing span:nth-child(3) { animation-delay: .32s; }
@keyframes assistDot {
  0%, 70%, 100% { opacity: .28; transform: translateY(0); }
  35%           { opacity: .9;  transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) { .assist-typing span { animation: none; } }

.assist-fab {
  display: inline-flex; align-items: center; gap: 9px;
  font: inherit; font-size: var(--sa-fs-base, 15px); font-weight: 700; cursor: pointer;
  padding: 12px 18px; border-radius: 99px; border: 0;
  background: var(--sa-ink, #1b1b1f); color: var(--sa-surface, #ffffff);
  box-shadow: 0 6px 22px -8px rgba(29,28,33,.55);
}
.assist-fab:hover { background: #2C2A31; }
.assist-fab svg { color: var(--sa-accent, #4a6fa5); }

.assist-panel {
  position: absolute; right: 0; bottom: 58px; width: min(360px, calc(100vw - 40px));
  background: var(--sa-surface, #ffffff); border: 1px solid var(--sa-hair, #e0e0e0); border-radius: 8px;
  box-shadow: 0 20px 50px -22px rgba(29,28,33,.6);
  display: flex; flex-direction: column; max-height: min(560px, calc(100vh - 120px));
  overflow: hidden;
  /* A26: a short fade and rise in, the reverse out, instead of a hard cut.
     `hidden` stays the only switch, so script and style cannot disagree:
     allow-discrete keeps display until the way out has faded, and
     @starting-style below gives the way in somewhere to start from. A
     browser without either simply cuts, as before. */
  transition: opacity .18s ease, transform .18s ease, display .18s allow-discrete;
}
/* Hidden by its own rule: display: flex above would otherwise beat the
   browser's own [hidden] rule, and the sites only cover that with a global
   rule of their own. Not clickable while it fades out. */
.assist-panel[hidden] { display: none; opacity: 0; transform: translateY(8px); pointer-events: none; }
@starting-style {
  .assist-panel:not([hidden]) { opacity: 0; transform: translateY(8px); }
}
@media (prefers-reduced-motion: reduce) {
  .assist-panel { transition: none; }
}
/* The capture notice under the question box (capture design, section 3). */
.assist-notice { flex: 0 0 100%; margin: 0; font-size: var(--sa-fs-xs, 12px); line-height: 1.4; color: var(--sa-muted, #6b6b6b); }
.assist-notice a { color: inherit; text-decoration: underline; }
.assist-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--sa-hair, #e0e0e0);
}
/* No margin of its own: a site's h2 margin set the title about 6px above
   the controls (batch 34, Chennai_50 QA D-1). */
.assist-head h2 { font-size: var(--sa-fs-md, 17px); letter-spacing: -.015em; margin: 0; margin-right: auto; padding: 0; line-height: 1.3; }
/* A long name wraps rather than running under the buttons (S-2). */
#assistTitle { overflow-wrap: break-word; }
#assistTitle.is-live { position: relative; padding-left: 18px; }
/* A78: an assistant with a name of its own may show a small avatar beside it. */
.assist-avatar { width: 28px; height: 28px; border-radius: 50%; flex: none; margin-right: 10px; }
/* 44x44: the glyph is small but the target must not be. The first version was
   19x22, which works with a mouse and is genuinely hard to hit otherwise. */
.assist-x {
  font: inherit; font-size: 24px; line-height: 1; cursor: pointer;
  background: none; border: 0; color: var(--sa-ink-3, #6a6a72);
  width: 44px; height: 44px; margin: -10px -12px -10px 0; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px;
}
.assist-x:hover { color: var(--sa-ink, #1b1b1f); background: var(--sa-surface-2, #f5f5f5); }
/* End chat, beside the close button while a chat is open (batch 33). */
.assist-end {
  font: inherit; font-size: var(--sa-fs-sm, 13px); line-height: 1.2; cursor: pointer;
  background: none; color: var(--sa-ink, #1b1b1f);
  border: 1px solid var(--sa-hair, #e0e0e0); border-radius: 6px;
  padding: 0 12px; min-height: 32px; margin: 0 14px 0 8px; white-space: nowrap; flex: none;
}
.assist-end:hover { background: var(--sa-surface-2, #f5f5f5); }
.assist-end:focus-visible { outline: 2px solid var(--sa-accent, #4a6fa5); outline-offset: 2px; }
.assist-end[hidden] { display: none; }
/* The narrowest phones (a 290px panel): a little more room for the title,
   so "Chatting with Naveen" wraps between words, not inside them (batch 34). */
@media (max-width: 359px) {
  .assist-head h2 { font-size: 15px; }
  #assistTitle.is-live { padding-left: 16px; }
  .assist-end { padding: 0 8px; margin: 0 10px 0 6px; }
}
/* Live, with a person (batch 33): a green dot on the title's first line
   (batch 34). */
#assistTitle.is-live::before {
  content: ''; position: absolute; left: 0; top: calc(.65em - 5px);
  width: 10px; height: 10px; border-radius: 50%; margin-right: 8px;
  background: #22c55e; box-shadow: 0 0 0 0 rgba(34, 197, 94, .6);
  animation: assist-live-glow 2s ease-out infinite;
}
@keyframes assist-live-glow {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .6); }
  70% { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
@media (prefers-reduced-motion: reduce) {
  #assistTitle.is-live::before { animation: none; }
}
/* A title wrapped by the site's markup takes the free space, so End live
   chat sits beside the close button (batch 33 review). */
.assist-head > h2, .assist-head > .assist-titles { flex: 1 1 auto; min-width: 0; }

.assist-body { padding: 16px; overflow-y: auto; scroll-padding-block: 8px; display: flex; flex-direction: column; gap: 12px; }
.assist-msg p { font-size: var(--sa-fs-base, 15px); line-height: 1.55; margin: 0; max-width: none; }
.assist-msg.bot p { color: var(--sa-ink-2, #4a4a52); }
.assist-msg.you {
  align-self: flex-end; background: var(--sa-ink, #1b1b1f); border-radius: 10px 10px 2px 10px;
  padding: 9px 13px; max-width: 85%;
}
.assist-msg.you p { color: var(--sa-surface, #ffffff); font-weight: 600; }
.assist-msg.bot.answer {
  background: var(--sa-surface-2, #f5f5f5); border-radius: 10px 10px 10px 2px; padding: 11px 13px;
}
.assist-msg.bot.answer p + p { margin-top: 8px; }
/* A57: a person's message in a live chat, under their name and set apart
   from the assistant's answers; and the panel's own lines saying who the
   visitor is talking to. */
.assist-msg.person {
  align-self: flex-start; max-width: 85%; padding: 9px 13px;
  background: var(--sa-surface, #ffffff); border: 1px solid var(--sa-accent-deep, #3a5a87); border-radius: 10px 10px 10px 2px;
}
.assist-msg.person p { color: var(--sa-ink, #1b1b1f); }
.assist-msg.person .assist-who { font-size: var(--sa-fs-xs, 12px); font-weight: 700; color: var(--sa-accent-ink, #2f4c73); margin-bottom: 3px; }
.assist-live-note { margin: 0; font-size: var(--sa-fs-sm, 13px); line-height: 1.45; color: var(--sa-ink-3, #6a6a72); text-align: center; }
/* A live chat open (batch 25): a ring on the launcher, its words for screen
   readers. By id and unscoped: a site's own launcher may sit outside .assist
   (iam-tech.co.uk's), where neither .assist .sr-only nor .assist-fab reach. */
#assistFab.is-live { box-shadow: 0 0 0 3px var(--sa-live, #2e7d4f), 0 6px 22px -8px rgba(29, 28, 33, .55); }
.assist-live-mark, #assistFab .assist-unread .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; padding: 0; border: 0; }
/* The person typing (batch 24): beside the conversation, never in it. */
.assist-live-typing { margin: 0; padding: 4px 16px; font-size: var(--sa-fs-xs, 12px); font-style: italic; color: var(--sa-ink-3, #6a6a72); }
.assist-live-typing[hidden] { display: none; }
/* "Show the rest" by keyboard focuses the passage it opened: one ring round
   the block (batch 32). */
.assist-passage:focus { outline: 2px solid var(--sa-accent, #4a6fa5); outline-offset: 2px; }
/* A line that did not reach the person, said under it; and the mark on the
   button when a person writes while the panel is closed (A57 review). */
.assist-msg.you .assist-not-sent { margin-top: 4px; font-size: var(--sa-fs-xs, 12px); font-weight: 400; opacity: .85; }
.assist-unread { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--sa-accent, #4a6fa5); flex: 0 0 auto; }
.assist-msg a { color: var(--sa-accent-ink, #2f4c73); font-weight: 700; }  /* 5.65:1; --brand-accent is 4.02:1 here */

.assist-opts { display: flex; flex-direction: column; gap: 7px; }
.assist-opt {
  font: inherit; font-size: var(--sa-fs-base, 15px); text-align: left; cursor: pointer;
  min-height: 44px; display: flex; align-items: center; padding: 10px 13px; border-radius: 8px;
  background: none; border: 1px solid var(--sa-hair, #e0e0e0); color: var(--sa-ink, #1b1b1f);
}
/* Hover is for devices that have a pointer. A touch screen leaves :hover stuck
   on the last thing tapped, and this rule used to win over `.assist-opt.is-on`
   — same specificity (0,2,0), declared later — so the chip a visitor had just
   ticked rendered sand-on-white at about 1.1:1 and became unreadable. Reported
   on a phone: "it selects but nothing happens" (Madurai_2, Naveen).

   Both halves below are needed, and they guard different things: the media
   query stops a touch screen inheriting hover at all, and `.is-on:hover` stops
   a real mouse hover washing out a selection. Either alone leaves one of the
   two cases broken. `.assist-opt` is the class for EVERY chip the panel
   renders, not just the toggles, so this is worth holding centrally. */
@media (hover: hover) {
  .assist-opt:hover { border-color: var(--sa-accent-deep, #3a5a87); background: var(--sa-surface-2, #f5f5f5); }
  .assist-opt.is-on:hover {
    background: var(--sa-ink, #1b1b1f); color: var(--sa-surface, #ffffff); border-color: var(--sa-ink, #1b1b1f);
  }
}
.assist-opt.primary { border-color: var(--sa-accent-deep, #3a5a87); color: var(--sa-accent-ink, #2f4c73); font-weight: 700; }  /* was 3.69:1 */

.assist-call { padding: 16px; display: flex; flex-direction: column; gap: 13px; overflow-y: auto; scroll-padding-block: 8px; }
/* A82: the form's status region, empty until the site's sending code writes
   its line, takes no room: its share of the gap is cancelled. */
.assist-call > .assist-form-status:empty { margin-top: -13px; }
/* While a form is open the panel scrolls as one (A17). The panel is a
   fixed-height column that clips, so an open form and the conversation used to
   share that height as two scroll boxes: on the second consumer the form kept
   281px of its 715, Send sat hidden inside the form's own scroll, and the
   conversation was a sliver. Now nothing inside shrinks or scrolls on its own;
   the panel does, with its header pinned. assist.js sets .has-form exactly
   where a form opens and clears it where forms close. */
.assist-panel.has-form { overflow-y: auto; scroll-padding-block: 8px; }
.assist-panel.has-form > .assist-ask-mode,
.assist-panel.has-form .assist-body,
.assist-panel.has-form > .assist-call { flex: none; overflow: visible; }
.assist-panel.has-form .assist-head {
  position: sticky; top: 0; z-index: 1; background: var(--sa-surface, #ffffff);
}
/* With nothing between them, the call-back and FAQ icons at the end of the
   conversation read as the form's own header ("tight under the icon row",
   Naveen). A hairline says where the conversation stops and the form starts. */
.assist-panel.has-form > .assist-call { border-top: 1px solid var(--sa-hair, #e0e0e0); }
.assist-call .field label { font-size: var(--sa-fs-sm, 13px); }
.assist-call select {
  font: inherit; font-size: max(16px, var(--sa-fs-base, 15px)); width: 100%; padding: 11px 13px; border-radius: 4px;
  border: 1px solid var(--sa-hair, #e0e0e0); background: var(--sa-surface, #ffffff); color: var(--sa-ink, #1b1b1f);
}

@media (max-width: 560px) {
  .assist { right: 14px; bottom: 14px; left: 14px; }
  /* Hidden from sight only (A58): display: none took the label out of the
     accessibility tree too, and with the icon aria-hidden, screen readers on
     phones announced a nameless button. */
  .assist-fab span {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .assist-fab { padding: 14px; position: absolute; right: 0; bottom: 0; }
  .assist-panel {
    right: 0; left: 0; bottom: 62px;
    width: auto; max-height: min(70vh, 520px);
  }
}
@media print { .assist { display: none; } }


/* ---------------------------------------------------------------------------
 * Rules that were NOT in the one block this component was lifted from.
 *
 * The assistant's styles were assumed to be one contiguous section of the
 * site's stylesheet. They were not: measured, they occupied SIX separate
 * regions of it. The question box, the send button, the follow-up label, the
 * could-not-load note and one touch-target override sat in four of them, up to
 * 1,300 lines from the main block, under headings of their own; the sixth was a
 * single selector inside the site's own sitewide reduced-motion rule, which is
 * the site's motion policy and stayed there.
 * Moving "the block" produced a panel with an unstyled input and an invisible
 * send button, and nothing failed — the build was green and the tests passed,
 * because none of them look at CSS.
 *
 * Worth stating plainly for the next person: grep for the component's class
 * PREFIX across the whole stylesheet before believing you have found all of
 * it. A section heading in a stylesheet is a note, not a boundary.
 * ------------------------------------------------------------------------- */

/* The question box and its send button. */
.assist-ask {
  /* wrap: the capture notice takes its own line under the input (review #1) */
  display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px 14px;
  border-top: 1px solid var(--sa-hair, #e0e0e0); background: var(--sa-surface, #ffffff);
}
.assist-ask input {
  font: inherit; font-size: max(16px, var(--sa-fs-base, 15px)); flex: 1; min-width: 0;
  padding: 10px 13px; border-radius: 99px;
  border: 1px solid var(--sa-hair, #e0e0e0); background: #fff; color: var(--sa-ink, #1b1b1f);
}
.assist-ask input:focus { outline: 2px solid var(--sa-accent, #4a6fa5); outline-offset: 1px; border-color: transparent; }
.assist-send {
  flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--sa-accent-deep, #3a5a87); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.assist-send:hover { background: var(--sa-accent-hover, #35527b); }

/* The line above a set of follow-ups, so they read as "here is what people
   ask next" rather than as a menu that reappeared. */
.assist-lead {
  margin: 2px 0 2px; font-size: var(--sa-fs-xs, 11px); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--sa-ink-3, #6a6a72);
}

/* Shown when the index itself failed to load. */
.assist-done { font-size: var(--sa-fs-sm, 13px); color: var(--sa-ink-3, #6a6a72); margin: 4px 0 0; line-height: 1.5; }

/* Where the pointer is coarse, the 44px guidance applies. Grown only there
   rather than inflated for everyone. */
@media (pointer: coarse) {
  .assist-opt { min-height: 48px; }
}

/* The site this came from disables transitions under reduced motion sitewide,
   .assist-fab among them. That rule is the SITE's motion policy applied to one
   of our elements, so it stayed there rather than moving here — but a consumer
   with no such policy should know this button transitions. */
@media (prefers-reduced-motion: reduce) {
  .assist-fab { transition: none !important; }
}