/* ask.css — the ASK DAY CONVERSATION SURFACE (renamed from "QubitOS Ask" to "Ask Day" on 2026-09-18).
   Loaded by BOTH pages that mount it:
   `site/products/ask.html` (the published-pages ground) and `site/account.html` (the account ground).
   One stylesheet because it is one chat language — see assets/ask.js's header for the grounds.
   Originally extracted from ask.html's page-scoped <style> block (site-hardening round 3,
   2026-09-12: CSP style-src drops 'unsafe-inline' — every page-scoped stylesheet moves to
   assets/ the same way round 2 moved page-scoped <script> blocks). Extended 2026-09-12
   (task/qubitos-chatbot) with the product-question half: starters, page-cited answers.

   REWORKED 2026-09-13 (the request: professional chat bot interfaces on the website) into ONE
   conversational language used by both halves of the page — a chat panel with a
   composer, a thread of speaker-identified turns, citation cards, and refusals that read as sentences.
   EVERY colour here is a site.css token, so light and dark both come from the one brand system and
   neither is hand-painted; nothing is colour-only (every state carries a border or a label too). */

  /* scoped to this page */
  .ask-wrap { max-width: 44rem; }

  /* ⚠️ EVERY ELEMENT THIS PAGE TOGGLES WITH [hidden] AND ALSO GIVES A `display` NEEDS THIS RESET.
     The HTML spec's `[hidden] { display: none }` lives in the UA stylesheet and ANY author `display`
     declaration beats it at equal specificity — measured on trunk, where the widget's "closed" panel
     rendered open on every page of both sites because its rule said `display: flex`
     (see ask-widget.css's own note). `.starters` and `.confirm` are flex containers that the page hides;
     without the line below, "the suggestions disappear after the first turn" would be a no-op.
     Browser-pinned: mind/test_site_hygiene.py::TestNothingMarkedHiddenIsActuallyRendered. */
  .starters[hidden], .confirm[hidden], .turn-foot[hidden], .composer[hidden],
  .chat-acts[hidden], .cited[hidden], .settle[hidden], .hero-acts[hidden] { display: none; }

  /* ── the chat panel: one card that holds the composer, the suggestions and the thread ───────────── */
  .chat-panel {
    margin: 1.1rem 0 0;
    padding: 1rem;
    background: var(--bg-alt);
    border: 1px solid var(--line-strong);
    border-radius: 10px;
  }

  /* ── the composer ───────────────────────────────────────────────────────────────────────────────── */
  .composer { display: flex; gap: .6rem; align-items: flex-end; margin: 0; }
  .composer textarea {
    flex: 1; min-width: 0; padding: .7rem .8rem; font: inherit; line-height: 1.5;
    background: var(--surface); color: var(--ink);
    border: 1px solid var(--line-strong); border-radius: 8px; resize: vertical;
    max-height: 14rem;
  }
  .composer textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
  .composer .btn { flex: 0 0 auto; }
  .composer-hint {
    margin: .45rem 0 0; font-size: .8125rem; color: var(--muted); max-width: var(--measure);
  }

  /* ── starter prompts. They vanish for good once a thread exists (JS toggles [hidden]) — a row of
       suggestions over a live conversation is clutter, not help. ────────────────────────────────── */
  .starters { list-style: none; padding: 0; margin: .35rem 0 1.1rem;
              display: flex; flex-wrap: wrap; gap: .4rem; }
  .starter { font: inherit; font-size: .875rem; cursor: pointer; color: var(--ink-soft);
             background: var(--surface); border: 1px solid var(--line-strong); border-radius: 999px;
             padding: .3rem .8rem; text-align: left; }
  .starter:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
  .starter:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

  /* ── the thread ─────────────────────────────────────────────────────────────────────────────────── */
  .thread { padding: .15rem .1rem; margin: .9rem 0 0; }
  #transcript { min-height: 9rem; max-height: 58vh; overflow-y: auto; margin: .4rem 0 1rem; }
  #transcript:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

  .turn {
    margin: 0 0 .85rem; padding: .8rem .95rem; border-radius: 10px;
    border: 1px solid var(--line); background: var(--surface);
    border-left: 3px solid var(--accent);
  }
  /* the visitor's own words: the same card, unfilled and neutrally edged — the two speakers are told
     apart by their label, their edge and their fill, never by colour alone. */
  .turn.you { background: transparent; border-color: var(--line-strong); border-left-width: 3px; }
  .turn-head { display: flex; align-items: baseline; gap: .5rem; margin: 0 0 .35rem; }
  .turn .who { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  .turn .when { margin-left: auto; font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
  .turn .prose { margin: 0; white-space: pre-wrap; overflow-wrap: break-word; }
  /* what a refusal MEANS and what to do about it, under the server's own words rather than instead of them */
  .turn-why { margin: .5rem 0 0; font-size: .9375rem; color: var(--ink-soft); }
  .turn-cta { margin: .65rem 0 0; }

  /* a divider, not a turn: restored turns carry no clock because no timestamp is persisted with them. */
  .thread-note {
    margin: 0 0 .7rem; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase;
    color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: .35rem;
  }
  .chat-empty { margin: .8rem 0 0; color: var(--ink-soft); max-width: var(--measure); }

  /* ── waiting. An HONEST indicator: it says a question is in flight, not that an answer is arriving
       piece by piece (streaming is labelled "coming soon" on the page and is not faked here). ────── */
  .typing { display: flex; gap: .3rem; margin: .15rem 0 0; }
  .typing span {
    width: .45rem; height: .45rem; border-radius: 50%; background: var(--accent); opacity: .45;
  }
  @media (prefers-reduced-motion: no-preference) {
    .typing span { animation: ask-pulse 1s ease-in-out infinite; }
    .typing span:nth-child(2) { animation-delay: .15s; }
    .typing span:nth-child(3) { animation-delay: .3s; }
    @keyframes ask-pulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
  }

  /* ── citations. A card when the server gave us a url (title + one line + the link to the section);
       a labelled chip when it did not. ─────────────────────────────────────────────────────────── */
  .cited-label { margin: .85rem 0 .35rem; font-size: .75rem; letter-spacing: .06em;
                 text-transform: uppercase; color: var(--muted); }
  .cited { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
  .cited li { margin: 0; }
  .cite-chip { font-size: .8125rem; color: var(--ink-soft); border: 1px solid var(--line-strong);
               border-radius: 999px; padding: .15rem .6rem; }
  .cite-chip b { color: var(--ink); font-weight: 650; }
  /* ⚠️ `min-width: 0` IS LOAD-BEARING. A flex item's default `min-width: auto` refuses to shrink below
     its content, and the excerpt line below is `white-space: nowrap` — so without this the card grew to
     the width of the longest passage and ran out of the turn (measured in a real Chromium at 1280 px:
     the cards clipped at the panel edge). */
  .cite-card { flex: 1 1 15rem; min-width: 0; }
  .cite-card a {
    display: block; padding: .5rem .6rem; border-radius: 8px; text-decoration: none;
    color: var(--ink); border: 1px solid var(--line-strong); background: var(--surface);
    overflow: hidden;
  }
  .cite-card b, .cite-card i { overflow-wrap: anywhere; }
  .cite-card a:hover { border-color: var(--accent); }
  .cite-card a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
  .cite-card b { display: block; font-size: .875rem; font-weight: 650; }
  /* the SECTION the passage sits under — the difference between "that page" and "that heading" */
  .cite-card i {
    display: block; margin-top: .1rem; font-style: normal; font-size: .75rem;
    letter-spacing: .03em; text-transform: uppercase; color: var(--accent);
  }
  .cite-card span {
    display: block; margin-top: .15rem; font-size: .8125rem; color: var(--muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* ── THE ONE NEXT STEP (2026-09-18, lane ASK-DAY-1). The sales-agent close: one action, chosen by
       what was asked, under the sources and above the settle strip. Deliberately ONE row that cannot
       become a button bar — `gap` and `flex-wrap` let the reason wrap under the action on a narrow
       screen, and there is no styling here for a second `.btn`, because there is never a second one.
       Uses the r24 tokens only (--accent-bg / --line-strong / --ink-soft), like every other block. ── */
  .next-step {
    display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .7rem;
    margin: .85rem 0 0; padding: .55rem .65rem;
    background: var(--accent-bg); border: 1px solid var(--line-strong); border-radius: 8px;
  }
  .next-label {
    font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink);
  }
  .next-why { font-size: .8125rem; color: var(--ink-soft); }

  /* ── the settle strip. What the answer was settled over, under the sources. Every field is optional and
       is rendered only when the envelope carries it — see settleStrip() in ask.js. ────────────────── */
  .settle {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .85rem;
    margin: .7rem 0 0; padding: .45rem .6rem;
    font-size: .8125rem; color: var(--muted);
    background: var(--bg-alt); border: 1px solid var(--line); border-radius: 8px;
  }
  .settle > span { display: inline-block; }
  .settle b { color: var(--ink); font-weight: 650; }
  .settle-label {
    font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase;
    color: var(--ink); border-right: 1px solid var(--line-strong); padding-right: .7rem;
  }
  .settle-n { font-variant-numeric: tabular-nums; }
  .settle-trail {
    flex: 1 1 100%; font-family: var(--mono); font-size: .75rem; color: var(--ink-soft);
  }

  /* ── per-turn actions. The audit link is the ONLY anchor allowed in here (the reload acceptance
       counts them); copy and retry are buttons. ─────────────────────────────────────────────────── */
  .turn-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem;
               margin: .7rem 0 0; font-size: .8125rem; }
  .turn-foot a { color: var(--accent); }
  .turn-act {
    font: inherit; font-size: .8125rem; cursor: pointer; padding: 0; border: 0; background: none;
    color: var(--accent); text-decoration: underline; text-underline-offset: .18em;
  }
  .turn-act:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .turn-act.done { text-decoration: none; font-weight: 650; }
  .turn-act.done::before { content: "\2713\00a0"; }

  /* ── the page itself: a deliberate type scale, restrained accent, no template look ──────────────── */
  .ask-hero h1 { max-width: 22ch; line-height: 1.08; letter-spacing: -.015em; }
  .hero-acts { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.4rem 0 0; }

  /* the three grounds — numbered, because they are a set and not a menu */
  .grounds .card { display: flex; flex-direction: column; }
  .ground-no {
    margin: 0 0 .55rem; font-family: var(--mono); font-size: .75rem; letter-spacing: .14em;
    color: var(--accent);
  }
  .ground-line { margin-top: auto; padding-top: .7rem; font-size: .875rem; color: var(--ink-soft);
                 border-top: 1px solid var(--line); }
  .ground-line b { color: var(--ink); }
  /* which ground a live chat panel is pointed at, said once at the top of the panel */
  .ground-tag {
    display: inline-block; margin-right: .4rem; font-size: .6875rem; letter-spacing: .08em;
    text-transform: uppercase; color: var(--ink); background: var(--accent-bg);
    border: 1px solid var(--line-strong); border-radius: 999px; padding: .02rem .5rem;
  }

  /* the one link card that replaces the second chat box on the product page */
  .handoff { display: block; text-decoration: none; color: var(--ink); margin-top: 1.1rem;
             border-left: 3px solid var(--accent); }
  .handoff:hover { border-color: var(--accent); }
  .handoff:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
  .handoff h3 { color: var(--accent); }
  .handoff-tag {
    margin: 0 0 .5rem; font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase;
    color: var(--ink);
  }
  .handoff-tag::before {
    content: ""; display: inline-block; width: .45rem; height: .45rem; border-radius: 50%;
    background: var(--accent); margin-right: .45rem; vertical-align: .05em;
  }

  /* available today / coming soon — a ledger, so the honest half is as legible as the live half */
  .ledger { list-style: none; padding: 0; margin: 1rem 0 0; max-width: var(--measure); }
  .ledger li { display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: baseline;
               padding: .6rem 0; border-top: 1px solid var(--line); }
  .ledger li:last-child { border-bottom: 1px solid var(--line); }
  .ledger span:last-child { flex: 1 1 18rem; color: var(--ink-soft); }
  .state {
    flex: 0 0 auto; min-width: 7.5rem; font-size: .6875rem; letter-spacing: .08em;
    text-transform: uppercase; border-radius: 999px; padding: .1rem .6rem; text-align: center;
    border: 1px solid var(--line-strong); color: var(--ink);
  }
  .state.on { background: var(--accent-bg); }
  .state.soon { background: transparent; color: var(--muted); border-style: dashed; }

  /* ── the key gate, dressed as the sign-in it is ─────────────────────────────────────────────────── */
  .two-col { display: grid; gap: 1.4rem; }
  @media (min-width: 46rem) { .two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .signin { border-color: var(--line-strong); }
  .signin-title { display: flex; align-items: center; gap: .5rem; margin: 0 0 .8rem; font-size: 1.0625rem; }
  .signin-mark { flex: 0 0 auto; color: var(--accent); }
  .gate-note { font-size: .9375rem; }
  .keyrow input[type="password"], .keyrow input[type="text"] {
    flex: 1 1 20rem; padding: .6rem .7rem; font-size: 1rem; font-family: var(--mono);
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: 6px; color: var(--ink);
  }

  /* ── the signed-in bar, and clearing a conversation (a confirm step in markup, not a browser dialog) ── */
  .chat-bar { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem 1rem;
              margin: 0 0 .5rem; }
  .chat-id { margin: 0; font-size: .875rem; color: var(--muted); }
  .chat-acts { margin: 0 0 0 auto; display: flex; gap: 1rem; }
  .changekey { background: none; border: 0; padding: 0; color: var(--accent); text-decoration: underline;
               text-underline-offset: .18em; cursor: pointer; font: inherit; font-size: .875rem; }
  .changekey:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .confirm {
    display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
    margin: 0 0 .8rem; padding: .7rem .85rem; font-size: .9375rem; color: var(--ink);
    background: var(--bg-alt); border: 1px solid var(--line-strong); border-radius: 8px;
  }
  .confirm span { flex: 1 1 16rem; }
  .btn--small { padding: .35rem .8rem; font-size: .875rem; }

  /* ── mobile: the composer stays within reach at the bottom of the panel while the thread scrolls ── */
  @media (max-width: 46rem) {
    /* a Tab-focused control scrolls clear of the sticky composer (WCAG 2.2 SC 2.4.11, HARDEN-r74) */
    html { scroll-padding-bottom: 6rem; }
    .chat-panel { padding: .8rem .7rem; }
    #transcript { max-height: 52vh; }
    .composer {
      position: sticky; bottom: 0; z-index: 1;
      padding: .6rem 0 .2rem; background: var(--surface);
      border-top: 1px solid var(--line);
    }
    .chat-acts { margin-left: 0; }
    .ask-hero h1 { font-size: 1.9rem; }
  }

  /* ── 360 px. Nothing may push the page sideways: the composer stacks, the citation cards go full
       width, and every horizontal run (the settle strip, the turn foot) is allowed to wrap. ─────── */
  @media (max-width: 26rem) {
    html { scroll-padding-bottom: 10rem; }
    .ask-wrap { max-width: 100%; }
    .composer { flex-direction: column; align-items: stretch; gap: .45rem; }
    .composer .btn { width: 100%; }
    .cite-card { flex: 1 1 100%; }
    .cite-card span { white-space: normal; }
    .turn { padding: .7rem .7rem; }
    .settle-label { border-right: 0; padding-right: 0; }
    .next-step .btn { width: 100%; text-align: center; }
    .next-why { flex: 1 1 100%; }
    .state { min-width: 0; }
    .hero-acts .btn { width: 100%; text-align: center; }
    .starters { gap: .35rem; }
  }

  /* the honest note about streaming: a small badge and a sentence, not a paragraph shouted in caps. */
  .soon { margin: .7rem 0 0; font-size: 0.9375rem; color: var(--ink-soft); max-width: var(--measure); }
  .soon-tag { display: inline-block; margin-right: 0.4rem; font-size: 0.75rem; letter-spacing: 0.05em;
              text-transform: uppercase; color: var(--ink); background: var(--accent-bg);
              border: 1px solid var(--line-strong); border-radius: 999px; padding: 0.05rem 0.55rem; }