/* ==========================================================================
   ASK BAIOND — the engine's chat surfaces (D19)
   One message renderer (partials/ask/conversation.php), one surface wrapper
   (partials/ask/surface.php), two variants:

     .ask--messenger   the CEO's visual: sender bar, lime user bubble right,
                       filled assistant bubbles left with the avatar, quick-
                       reply pills, composer. Chat surface / floating
                       assistant / mobile.
     .ask--workspace   ChatGPT-with-tools: wide, no bubble fill on the
                       assistant side, the "reading sensors" step is the
                       visible pipeline, empty state with prompt pills. Home
                       showcase.
     .ask--split       chat + live data panel: the messenger thread on the
                       left, a location panel on the right (status, readings
                       with trend line + threshold band, data path lighting
                       up as the answer arrives). Collapses to the messenger
                       below 56em — the readings card returns into the bubble.

   Surfaces (Phase 4.1, surface.php): showcase = split, block / card / chat
   = messenger with a size modifier (.ask--block, .ask--card, .ask--chat).

   No tinted surface inside the frame (operator, 2026-09-11): assistant
   bubbles, the readings card and the live data panel sit on the frame's
   own ground and separate with hairlines; dark mode adds the raised step
   (--color-bg-raised). Nothing above weight 500.
   ========================================================================== */

@layer components {

  /* ----- Frame ------------------------------------------------------------ */

  .ask {
    --ask-max: 40rem;
    --ask-bubble: var(--color-bg-raised);
    --ask-bubble-border: var(--color-border);
    /* scheme-dependent pairs: light ground first, inverted on dark + panels */
    --ask-mark-bg: var(--black);
    --ask-mark-fg: var(--lime);
    --ask-send-bg: var(--black);
    --ask-send-fg: var(--white);
    --ask-accent:  var(--lime-deep);
    --ask-thread-max: 36rem;
    --ask-pad: var(--space-4);
    position: relative;
    display: flex;
    flex-direction: column;
    max-width: var(--ask-max);
    margin-inline: auto;
    border-radius: var(--radius-xl);
    color: var(--color-text);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
  }

  [data-theme="dark"] .ask,
  .panel .ask,
  .band--panel .ask {
    --ask-mark-bg: var(--lime);
    --ask-mark-fg: var(--black);
    --ask-send-bg: var(--white);
    --ask-send-fg: var(--black);
    --ask-accent:  var(--lime);
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .ask {
      --ask-mark-bg: var(--lime);
      --ask-mark-fg: var(--black);
      --ask-send-bg: var(--white);
      --ask-send-fg: var(--black);
      --ask-accent:  var(--lime);
    }
  }

  .ask--workspace {
    --ask-max: 56rem;
    --ask-thread-max: 40rem;
    --ask-pad: var(--space-5);
  }

  /* Surface size modifiers (surface.php) */
  .ask--block { --ask-max: 48rem; --ask-thread-max: 38rem; }
  .ask--card  { --ask-max: 36rem; --ask-thread-max: 30rem; }
  .ask--showcase { --ask-max: 70rem; }
  .ask--card .ask__bar { padding-block: var(--space-2); }
  .ask--card .ask__thread { padding-block: var(--space-4); }

  @media (min-width: 48em) {
    .ask--workspace { --ask-pad: var(--space-6); }
  }

  .ask__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
  }

  .ask__main {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  /* the thread takes the slack so the composer stays at the bottom when a
     side panel is taller than the conversation */
  .ask__main .ask__thread { flex: 1 1 auto; }

  .ask strong { font-weight: var(--font-medium); }

  /* `hidden` must win over the component display values */
  .ask [hidden] { display: none !important; }

  /* Header bar */
  .ask__bar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--ask-pad);
    border-bottom: 1px solid var(--color-border);
  }

  .ask__identity {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
  }

  .ask__name {
    font-weight: var(--font-medium);
    font-size: var(--text-base);
    line-height: var(--leading-snug);
    color: var(--color-text);
  }

  .ask__status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
  }

  .ask__dot {
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: var(--radius-full);
    background: var(--lime);
    box-shadow: 0 0 0 0 color-mix(in oklab, var(--lime) 60%, transparent);
    animation: ask-pulse 2.4s var(--ease-standard) infinite;
  }

  @keyframes ask-pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--lime) 55%, transparent); }
    70%  { box-shadow: 0 0 0 6px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
  }

  .ask__demo {
    margin-inline-start: auto;
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
    white-space: nowrap;
  }

  .ask__demo-long { display: none; }
  @media (min-width: 40em) {
    .ask__demo-long  { display: inline; }
    .ask__demo-short { display: none; }
  }

  .ask__reset {
    display: inline-grid;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
  }

  .ask__reset:hover { color: var(--color-text); border-color: var(--color-border-strong); }
  .ask__reset .icon { --icon-size: 0.95rem; }

  /* Avatar — the mark */
  .ask-avatar {
    flex: none;
    display: inline-grid;
    place-items: center;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    border-radius: var(--radius-full);
    background: var(--ask-mark-bg);
    color: var(--ask-mark-fg);
  }

  .ask-avatar .icon { --icon-size: 0.95rem; }
  .ask-avatar--lg { inline-size: 2.25rem; block-size: 2.25rem; }
  .ask-avatar--lg .icon { --icon-size: 1.15rem; }
  .ask-avatar--xl { inline-size: 3rem; block-size: 3rem; }
  .ask-avatar--xl .icon { --icon-size: 1.4rem; }

  /* ----- Thread ------------------------------------------------------------ */

  .ask__thread {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-5) var(--ask-pad);
    max-block-size: var(--ask-thread-max);
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-strong) transparent;
  }

  .ask-scn {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .ask-scn + .ask-scn { margin-block-start: var(--space-3); }

  /* Message */
  .ask-msg {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--space-3);
    row-gap: var(--space-1);
    align-items: start;
    max-width: 88%;
  }

  .ask-msg--user {
    grid-template-columns: minmax(0, 1fr);
    justify-self: end;
    justify-items: end;
    max-width: 82%;
  }

  .ask-msg__bubble {
    grid-column: 2;
    display: grid;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    border-end-start-radius: var(--radius-sm);
    border: 1px solid var(--ask-bubble-border);
    background: var(--ask-bubble);
    color: var(--color-text);
  }

  .ask-msg--user .ask-msg__bubble {
    grid-column: 1;
    border-radius: var(--radius-lg);
    border-end-end-radius: var(--radius-sm);
    border-color: var(--lime);
    background: var(--lime);
    color: var(--black);
  }

  .ask-msg__meta {
    grid-column: 2;
    display: flex;
    gap: var(--space-2);
    padding-inline: var(--space-1);
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
  }

  .ask-msg--user .ask-msg__meta { grid-column: 1; }

  .ask-msg__time { font-variant-numeric: tabular-nums; }

  .ask-msg__text > :last-child { margin-block-end: 0; }
  .ask-msg__text p + p { margin-block-start: var(--space-2); }

  .ask-msg__label {
    display: block;
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-block-end: calc(var(--space-2) * -1);
  }

  .ask-msg__list {
    display: grid;
    gap: var(--space-2);
    padding-inline-start: 1.1em;
    list-style: disc;
  }

  .ask-msg--reco .ask-msg__bubble {
    box-shadow: inset 3px 0 0 var(--lime);
  }

  /* Live answers (Phase 10): the model's Markdown subset */
  .ask-msg--live .ask-msg__text > * + * { margin-block-start: var(--space-2); }
  .ask-msg--live .ask-msg__text :is(ul, ol) {
    display: grid;
    gap: var(--space-1);
    padding-inline-start: 1.1em;
  }
  .ask-msg--live .ask-msg__text ul { list-style: disc; }
  .ask-msg--live .ask-msg__text ol { list-style: decimal; }
  .ask-msg--live .ask-msg__text strong { font-weight: var(--font-semibold); }
  .ask-msg--live .ask-msg__text a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--color-accent-ink);
    text-underline-offset: 0.2em;
  }

  /* A live answer that couldn't run: quiet, dashed, before the scripted one */
  .ask-msg--note .ask-msg__bubble {
    border-style: dashed;
    background: transparent;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
  }

  /* Visitor notice under the composer (AI + privacy) */
  .ask__notice {
    margin: 0;
    padding-inline: var(--space-2);
    font-size: var(--text-xs);
    line-height: 1.45;
    color: var(--color-text-subtle);
  }
  .ask__notice a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }
  .ask__notice a:hover { color: var(--color-text); }

  /* Highlighted value inside the answer */
  .ask-hl {
    padding: 0 0.3em;
    border-radius: var(--radius-sm);
    background: var(--lime);
    color: var(--black);
    font-weight: var(--font-medium);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  /* Readings card inside the answer bubble */
  .ask-readings {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    overflow: hidden;
  }

  .ask-reading {
    display: grid;
    gap: 0.15rem;
    padding: var(--space-3);
    min-width: 0;
  }

  .ask-reading + .ask-reading { border-inline-start: 1px solid var(--color-border); }

  .ask-reading__label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .ask-reading__label::before {
    content: "";
    flex: none;
    inline-size: 0.45rem;
    block-size: 0.45rem;
    border-radius: var(--radius-full);
    background: var(--reading-state, var(--color-border-strong));
  }

  .ask-reading[data-state="ok"]   { --reading-state: var(--color-ok); }
  .ask-reading[data-state="warn"] { --reading-state: var(--color-warn); }
  .ask-reading[data-state="bad"]  { --reading-state: var(--color-bad); }

  .ask-reading__value {
    font-size: var(--text-xl);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-tight);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .ask-reading__unit {
    font-size: 0.6em;
    font-weight: var(--font-normal);
    color: var(--color-text-muted);
    margin-inline-start: 0.15em;
  }

  .ask-reading[data-state="bad"] .ask-reading__value { color: var(--color-bad); }

  @container (max-width: 26rem) {
    .ask-readings { grid-template-columns: 1fr; }
    .ask-reading + .ask-reading { border-inline-start: 0; border-block-start: 1px solid var(--color-border); }
    .ask-reading { grid-template-columns: 1fr auto; align-items: baseline; }
  }

  /* Containment sits on the message row (a stretched flex item with a
     definite width), never on the bubble — a size container that is also a
     shrink-to-fit grid item collapses to its padding. */
  .ask-msg--ai { container-type: inline-size; }

  /* ----- Reading step / "How did baiond know?" ---------------------------- */

  .ask-step {
    max-width: 88%;
    margin-inline-start: calc(1.75rem + var(--space-3));
    font-size: var(--text-xs);
    color: var(--color-text-muted);
  }

  .ask-step__row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) 0;
    list-style: none;
    cursor: pointer;
  }

  .ask-step__row::-webkit-details-marker { display: none; }

  .ask-step__spinner {
    flex: none;
    inline-size: 0.85rem;
    block-size: 0.85rem;
    border-radius: var(--radius-full);
    border: 1.5px solid var(--color-border-strong);
    border-block-start-color: var(--ask-accent);
    animation: ask-spin 0.9s linear infinite;
  }

  .ask-step[data-done] .ask-step__spinner {
    animation: none;
    border: 0;
    background: var(--lime);
    inline-size: 0.5rem;
    block-size: 0.5rem;
    margin-inline: 0.175rem;
  }

  @keyframes ask-spin { to { rotate: 360deg; } }

  .ask-step__text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ask-step__how {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin-inline-start: var(--space-2);
    color: var(--color-text);
    text-decoration: underline;
    text-decoration-color: var(--lime);
    text-underline-offset: 0.2em;
    white-space: nowrap;
  }

  .ask-step__how .icon { --icon-size: 0.85rem; transition: rotate var(--duration-fast) var(--ease-standard); }
  .ask-step[open] .ask-step__how .icon { rotate: 180deg; }

  /* While reading: hide the "how" link */
  .ask-step:not([data-done]) .ask-step__how { display: none; }

  .ask-step__body {
    display: grid;
    gap: var(--space-3);
    margin-block-start: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
  }

  /* Pipeline: sensor → gateway → space system → agent */
  .ask-pipeline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-xs);
  }

  .ask-pipeline__stage {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    color: var(--color-text);
    background: var(--color-bg);
    animation: ask-stage var(--duration-slow) var(--ease-emphasized) both;
    animation-delay: calc(var(--i, 0) * 160ms);
  }

  .ask-pipeline__stage:last-child {
    background: var(--lime);
    border-color: var(--lime);
    color: var(--black);
  }

  .ask-pipeline__stage + .ask-pipeline__stage {
    position: relative;
    margin-inline-start: 1.1rem;
  }

  .ask-pipeline__stage + .ask-pipeline__stage::before {
    content: "";
    position: absolute;
    inset-inline-start: calc(-1.1rem - var(--space-1));
    inset-block-start: 50%;
    inline-size: calc(1.1rem + var(--space-1));
    block-size: 1px;
    background: var(--color-border-strong);
  }

  @keyframes ask-stage {
    from { opacity: 0; translate: -6px 0; }
    to   { opacity: 1; translate: 0 0; }
  }

  .ask-pipeline__note { margin: 0; }
  .ask-pipeline__source { margin: 0; font-size: var(--text-xs); color: var(--color-text-subtle); }

  /* ----- Quick replies ----------------------------------------------------- */

  .ask-replies {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-inline-start: calc(1.75rem + var(--space-3));
  }

  .ask-reply {
    padding: 0.5rem 0.95rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-text);
    font: inherit;
    font-size: var(--text-sm);
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-standard),
                background-color var(--duration-fast) var(--ease-standard),
                opacity var(--duration-fast) var(--ease-standard);
  }

  .ask-reply--primary {
    background: var(--lime);
    border-color: var(--lime);
    color: var(--black);
    font-weight: var(--font-medium);
  }

  .ask-reply:hover { border-color: var(--color-text); }
  .ask-reply--primary:hover { background: var(--lime-bright); border-color: var(--lime-bright); }
  .ask-reply[disabled] { opacity: 0.4; cursor: default; }
  .ask-reply[disabled]:hover { border-color: var(--color-border-strong); }
  .ask-reply--primary[disabled]:hover { background: var(--lime); border-color: var(--lime); }
  .ask-replies[data-answered] { display: none; }

  /* Typing indicator */
  .ask-typing {
    display: inline-flex;
    gap: 0.3rem;
    padding-block: 0.15rem;
  }

  .ask-typing i {
    inline-size: 0.45rem;
    block-size: 0.45rem;
    border-radius: var(--radius-full);
    background: var(--color-text-muted);
    animation: ask-typing 1.2s ease-in-out infinite;
  }

  .ask-typing i:nth-child(2) { animation-delay: 0.15s; }
  .ask-typing i:nth-child(3) { animation-delay: 0.3s; }

  @keyframes ask-typing {
    0%, 60%, 100% { opacity: 0.35; translate: 0 0; }
    30%           { opacity: 1;    translate: 0 -3px; }
  }

  /* ----- Foot: prompts + composer ----------------------------------------- */

  .ask__foot {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-3) var(--ask-pad) var(--space-4);
    border-top: 1px solid var(--color-border);
  }

  .ask__prompts {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    scrollbar-width: none;
    padding-block: 2px;
    margin-inline: calc(var(--ask-pad) * -1);
    padding-inline: var(--ask-pad);
  }

  .ask__prompts::-webkit-scrollbar { display: none; }

  .ask-prompt {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    max-width: 18rem;
    padding: 0.45rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-text-muted);
    font: inherit;
    font-size: var(--text-xs);
    text-align: start;
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-standard),
                border-color var(--duration-fast) var(--ease-standard);
  }

  .ask-prompt span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ask-prompt .icon { --icon-size: 0.9rem; flex: none; }
  .ask-prompt:hover { color: var(--color-text); border-color: var(--color-border-strong); }
  .ask-prompt[aria-pressed="true"] { color: var(--color-text); border-color: var(--color-text); }
  .ask-prompt[aria-pressed="true"] .icon { color: var(--ask-accent); }

  .ask__composer {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.3rem 0.3rem 0.3rem var(--space-4);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    background: var(--color-bg-inset);
    transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
  }

  .ask__composer:focus-within {
    border-color: var(--color-text);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--lime) 35%, transparent);
  }

  .ask__composer-icon { --icon-size: 1rem; color: var(--ask-accent); flex: none; }

  .ask__input {
    flex: 1;
    min-width: 0;
    padding: 0.45rem 0;
    border: 0;
    background: transparent;
    color: var(--color-text);
    font: inherit;
    font-size: var(--text-sm);
  }

  .ask__input::placeholder { color: var(--color-text-subtle); }
  .ask__input:focus { outline: none; }

  .ask__send {
    flex: none;
    display: inline-grid;
    place-items: center;
    inline-size: 2.1rem;
    block-size: 2.1rem;
    border: 0;
    border-radius: var(--radius-full);
    background: var(--ask-send-bg);
    color: var(--ask-send-fg);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
  }

  .ask__send .icon { --icon-size: 1rem; }
  .ask__send:hover,
  .ask__composer:focus-within .ask__send { background: var(--lime); color: var(--black); }

  /* ----- Workspace variant ------------------------------------------------- */

  .ask--workspace .ask__bar { padding-block: var(--space-3); }

  .ask--workspace .ask__thread {
    gap: var(--space-5);
    padding-block: var(--space-6);
  }

  .ask--workspace .ask-scn { gap: var(--space-5); }

  /* Assistant messages lose the bubble fill — text on the ground, like ChatGPT */
  .ask--workspace .ask-msg--ai { max-width: 100%; }
  .ask--workspace .ask-msg--ai .ask-msg__bubble {
    padding: 0.2rem 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    gap: var(--space-4);
    font-size: var(--text-base);
    max-width: 44rem;
  }

  .ask--workspace .ask-msg--ai .ask-msg__meta { display: none; }
  .ask--workspace .ask-msg--ai { align-items: start; }
  .ask--workspace .ask-msg--user { max-width: 70%; }
  .ask--workspace .ask-msg--user .ask-msg__bubble { font-size: var(--text-base); }
  .ask--workspace .ask-msg--user .ask-msg__meta { display: none; }

  .ask--workspace .ask-readings {
    background: var(--color-bg-raised);
  }

  .ask--workspace .ask-reading { padding: var(--space-4); }
  .ask--workspace .ask-reading__value { font-size: var(--text-2xl); }

  .ask--workspace .ask-msg--reco .ask-msg__bubble {
    box-shadow: none;
    padding-inline-start: var(--space-4);
    border-inline-start: 2px solid var(--lime);
  }

  .ask--workspace .ask-msg--typing .ask-msg__bubble { padding: 0.3rem 0; border: 0; }

  .ask--workspace .ask-step {
    max-width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
  }

  .ask--workspace .ask-step__body { border: 0; padding: var(--space-3) 0 var(--space-1); margin: 0; }

  .ask--workspace .ask-replies { font-size: var(--text-sm); }

  /* Empty state */
  .ask__empty {
    display: grid;
    justify-items: center;
    gap: var(--space-2);
    padding: var(--space-6) var(--space-4) var(--space-4);
    text-align: center;
  }

  .ask__empty-title {
    font-size: var(--text-2xl);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-snug);
    margin-block-start: var(--space-2);
  }

  .ask__empty-lead {
    max-width: 30rem;
    color: var(--color-text-muted);
    font-size: var(--text-base);
  }

  .ask--workspace .ask__foot { gap: var(--space-3); }
  .ask--workspace .ask__prompts { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }
  .ask--workspace .ask-prompt { max-width: 100%; font-size: var(--text-sm); }
  .ask--workspace .ask__composer { padding: 0.4rem 0.4rem 0.4rem var(--space-5); }
  .ask--workspace .ask__input { font-size: var(--text-base); padding-block: 0.6rem; }
  .ask--workspace .ask__send { inline-size: 2.4rem; block-size: 2.4rem; }

  /* ----- Split variant: chat + live data panel ---------------------------- */

  .ask--split {
    --ask-max: 66rem;
    --ask-thread-max: 36rem;
    container: ask / inline-size;
  }

  .ask__panel {
    display: none;
    min-width: 0;
    border-block-start: 1px solid var(--color-border);
    background: var(--color-bg-muted);
  }

  @container ask (min-width: 56em) {
    .ask--split .ask__body { grid-template-columns: minmax(0, 1fr) 19.5rem; }
    .ask--split .ask__panel {
      display: block;
      border-block-start: 0;
      border-inline-start: 1px solid var(--color-border);
    }
    /* the panel carries the readings — the bubble keeps only the words */
    .ask--split .ask-readings { display: none; }
  }

  .ask-panel__scene {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    padding: var(--space-4);
    animation: ask-in var(--duration-normal) var(--ease-emphasized) both;
  }

  .ask-panel__head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }

  .ask-panel__icon {
    flex: none;
    display: inline-grid;
    place-items: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border-radius: var(--radius-md);
    background: var(--lime);
    color: var(--black);
  }

  .ask-panel__icon svg { inline-size: 1.1rem; block-size: 1.1rem; }

  .ask-panel__where {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .ask-panel__label {
    font-weight: var(--font-medium);
    line-height: var(--leading-snug);
  }

  .ask-panel__site {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .ask-panel__live {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
  }

  /* Status pill — reading vs live text, switched by data-phase */
  .ask-panel__status {
    display: flex;
    align-items: center;
    min-block-size: 2rem;
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    font-size: var(--text-xs);
  }

  .ask-panel__status-reading,
  .ask-panel__status-live {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
  }

  .ask-panel__status-reading { color: var(--color-text-muted); }
  .ask-panel__status-reading .ask-step__spinner { inline-size: 0.75rem; block-size: 0.75rem; }

  .ask-panel__state-dot {
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: var(--radius-full);
    background: var(--panel-state, var(--color-border-strong));
  }

  .ask-panel__scene[data-state="ok"]   { --panel-state: var(--color-ok); }
  .ask-panel__scene[data-state="warn"] { --panel-state: var(--color-warn); }
  .ask-panel__scene[data-state="bad"]  { --panel-state: var(--color-bad); }

  .ask-panel__scene[data-phase="reading"] .ask-panel__status-live,
  .ask-panel__scene[data-phase="idle"] .ask-panel__status-live { display: none; }
  .ask-panel__scene[data-phase="live"] .ask-panel__status-reading { display: none; }
  .ask-panel__scene[data-phase="idle"] .ask-panel__status-reading .ask-step__spinner { animation: none; border-color: var(--color-border-strong); }

  /* Metrics */
  .ask-panel__metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
  }

  .ask-panel__metric {
    display: grid;
    gap: 0.15rem;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    min-width: 0;
    transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
  }

  .ask-panel__metric--hero { grid-column: 1 / -1; }

  .ask-panel__metric[data-hot] {
    border-color: var(--lime);
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--lime) 45%, transparent);
  }

  .ask-panel__metric-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .ask-panel__metric-label::before {
    content: "";
    flex: none;
    inline-size: 0.45rem;
    block-size: 0.45rem;
    border-radius: var(--radius-full);
    background: var(--metric-state, var(--color-border-strong));
  }

  .ask-panel__metric[data-state="ok"]   { --metric-state: var(--color-ok); }
  .ask-panel__metric[data-state="warn"] { --metric-state: var(--color-warn); }
  .ask-panel__metric[data-state="bad"]  { --metric-state: var(--color-bad); }

  .ask-panel__metric-value {
    font-size: var(--text-xl);
    letter-spacing: var(--tracking-tight);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    transition: opacity var(--duration-normal) var(--ease-standard);
  }

  .ask-panel__metric--hero .ask-panel__metric-value { font-size: var(--text-3xl); }
  .ask-panel__metric[data-state="bad"] .ask-panel__metric-value { color: var(--color-bad); }

  .ask-panel__metric-unit {
    font-size: 0.5em;
    color: var(--color-text-muted);
    margin-inline-start: 0.2em;
    font-family: var(--font-sans);
  }

  /* Values are dimmed while the sensors are being read */
  .ask-panel__scene[data-phase="reading"] .ask-panel__metric-value,
  .ask-panel__scene[data-phase="reading"] .ask-panel__trend { opacity: 0.25; }

  .ask-panel__trend {
    display: grid;
    gap: 0.15rem;
    margin-block-start: var(--space-2);
    transition: opacity var(--duration-normal) var(--ease-standard);
  }

  .ask-panel__trend-label {
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
  }

  .ask-spark {
    inline-size: 100%;
    block-size: auto;
    overflow: visible;
    color: var(--color-text);
  }

  .ask-spark__band { fill: var(--lime); opacity: 0.22; }
  .ask-spark__line { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
  .ask-spark__dot  { fill: var(--color-text); }
  .ask-spark[data-state="bad"]  .ask-spark__dot { fill: var(--color-bad); }
  .ask-spark[data-state="warn"] .ask-spark__dot { fill: var(--color-warn); }
  .ask-spark[data-state="ok"]   .ask-spark__dot { fill: var(--color-ok); }

  /* Draw-in on phase change */
  .ask-panel__scene[data-phase="live"] .ask-spark__line {
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    animation: ask-draw 900ms var(--ease-standard) forwards;
  }

  @keyframes ask-draw { to { stroke-dashoffset: 0; } }

  /* Data path */
  .ask-panel__path { display: grid; gap: var(--space-2); }

  .ask-panel__title {
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-text-muted);
  }

  .ask-panel__stages {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ask-panel__stage {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-block: 0.3rem;
    font-size: var(--text-sm);
    color: var(--color-text-subtle);
    animation-delay: calc(var(--i, 0) * 280ms + 150ms);
  }

  .ask-panel__stage-dot {
    flex: none;
    inline-size: 0.6rem;
    block-size: 0.6rem;
    border-radius: var(--radius-full);
    border: 1.5px solid var(--color-border-strong);
    background: transparent;
  }

  /* connector between the dots */
  .ask-panel__stage + .ask-panel__stage::before {
    content: "";
    position: absolute;
    inset-inline-start: calc(0.3rem - 0.5px);
    inset-block-start: calc(-50% + 0.3rem);
    inline-size: 1px;
    block-size: calc(100% - 0.6rem);
    background: var(--color-border-strong);
  }

  .ask-panel__scene[data-phase="reading"] .ask-panel__stage,
  .ask-panel__scene[data-phase="live"] .ask-panel__stage {
    animation: ask-stage-on var(--duration-normal) var(--ease-standard) forwards;
  }

  .ask-panel__scene[data-phase="live"] .ask-panel__stage { animation-delay: calc(var(--i, 0) * 60ms); }

  @keyframes ask-stage-on {
    to { color: var(--color-text); }
  }

  .ask-panel__scene[data-phase="reading"] .ask-panel__stage-dot,
  .ask-panel__scene[data-phase="live"] .ask-panel__stage-dot {
    animation: ask-dot-on var(--duration-normal) var(--ease-standard) forwards;
    animation-delay: inherit;
  }

  @keyframes ask-dot-on {
    to { background: var(--lime); border-color: var(--lime); }
  }

  .ask-panel__source {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
  }

  /* ----- Play-through states (ask.js) ------------------------------------- */

  .ask[data-ask-ready] [data-step][data-pending] { display: none; }
  .ask[data-ask-busy] .ask-prompt { pointer-events: none; }

  .ask[data-ask-ready] [data-step] {
    animation: ask-in var(--duration-normal) var(--ease-emphasized) both;
  }

  @keyframes ask-in {
    from { opacity: 0; translate: 0 6px; }
    to   { opacity: 1; translate: 0 0; }
  }

  .ask-w { opacity: 0; transition: opacity 180ms ease-out; }
  .ask-w[data-on] { opacity: 1; }

  /* ----- Floating assistant (Phase 3) -------------------------------------
     Launcher pill in the corner + a <dialog> sheet holding the Messenger
     surface. Desktop: bottom-right card over a transparent backdrop.
     Small screens: full viewport. */

  .assistant-launcher {
    position: fixed;
    inset-inline-end: max(var(--space-5), env(safe-area-inset-right));
    inset-block-end: max(var(--space-5), env(safe-area-inset-bottom));
    z-index: 60;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    padding-inline-end: var(--space-4);
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border-strong);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    text-decoration: none;
    box-shadow: 0 8px 30px rgb(0 0 0 / 0.18), 0 0 0 0 color-mix(in oklab, var(--lime) 40%, transparent);
    transition: box-shadow var(--duration-normal) var(--ease-standard),
                translate var(--duration-fast) var(--ease-standard),
                border-color var(--duration-fast) var(--ease-standard);
  }

  .assistant-launcher:hover {
    border-color: var(--hover-border);
    box-shadow: 0 10px 34px rgb(0 0 0 / 0.22), var(--hover-shadow);
    translate: 0 -2px;
  }

  .assistant-launcher__mark {
    display: grid;
    place-items: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border-radius: var(--radius-full);
    background: var(--ask-mark-bg, var(--black));
    color: var(--ask-mark-fg, var(--lime));
  }

  [data-theme="dark"] .assistant-launcher__mark {
    background: var(--lime);
    color: var(--black);
  }

  .assistant-launcher__mark .icon { --icon-size: 1.1rem; }

  @media (max-width: 40em) {
    .assistant-launcher { padding-inline-end: var(--space-2); }
    .assistant-launcher__label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  }

  /* Hidden while the sheet (or the mobile drawer) is open. */
  html[data-assistant-open] .assistant-launcher,
  html[data-drawer-open] .assistant-launcher { visibility: hidden; }

  .assistant {
    position: fixed;
    inset: auto;
    inset-inline-end: max(var(--space-5), env(safe-area-inset-right));
    inset-block-end: max(var(--space-5), env(safe-area-inset-bottom));
    margin: 0;
    padding: 0;
    inline-size: min(26rem, calc(100vw - var(--space-5) * 2));
    max-inline-size: 100vw;
    block-size: min(40rem, calc(100dvh - var(--space-5) * 2));
    max-block-size: 100dvh;
    border: 0;
    background: transparent;
    color: var(--color-text);
    overflow: visible;
  }

  .assistant:not([open]) { display: none; }

  .assistant::backdrop { background: transparent; }

  .assistant[open] { animation: assistant-in var(--duration-slow) var(--ease-emphasized); }

  @keyframes assistant-in {
    from { opacity: 0; translate: 0 12px; scale: 0.98; }
    to   { opacity: 1; translate: 0 0;   scale: 1; }
  }

  .assistant__frame {
    position: relative;
    block-size: 100%;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border-strong);
    background: var(--color-bg);
    box-shadow: 0 24px 60px rgb(0 0 0 / 0.28);
    overflow: hidden;
  }

  .assistant__close {
    position: absolute;
    inset-inline-end: var(--space-3);
    inset-block-start: var(--space-3);
    z-index: 3;
    inline-size: 2.1rem;
    block-size: 2.1rem;
    background: var(--color-bg);
  }

  .assistant__body {
    flex: 1;
    min-block-size: 0;
    min-inline-size: 0;
    inline-size: 100%;
    display: flex;
    flex-direction: column;
  }

  .assistant__loading {
    flex: 1;
    display: grid;
    place-items: center;
  }

  /* The Messenger surface fills the sheet: no outer frame or orbit (the
     sheet is the frame), the thread takes the remaining height. */
  .assistant .ask {
    --ask-max: none;
    flex: 1;
    min-block-size: 0;
    min-inline-size: 0;
    inline-size: 100%;
    max-width: none;
    border: 0;
    border-radius: 0;
  }

  .assistant .ask::before { display: none; }          /* orbit ring off */
  .assistant .ask__bar { padding-inline-end: 3.5rem; } /* room for the close button */
  .assistant .ask__demo-long  { display: none; }        /* narrow sheet: short demo label */
  .assistant .ask__demo-short { display: inline; }
  .assistant .ask__name,
  .assistant .ask__status { white-space: nowrap; }
  .assistant .ask__reset { flex-shrink: 0; }
  .assistant .ask__body,
  .assistant .ask__main { flex: 1; min-block-size: 0; min-inline-size: 0; display: flex; flex-direction: column; }
  .assistant .ask__thread { flex: 1; max-block-size: none; }

  @media (max-width: 40em) {
    .assistant {
      inset: 0;
      inline-size: 100vw;
      block-size: 100dvh;
    }
    .assistant__frame { border-radius: 0; border: 0; }
  }

  /* ----- Reduced motion --------------------------------------------------- */

  @media (prefers-reduced-motion: reduce) {
    .assistant[open] { animation: none; }
    .ask__dot, .ask-step__spinner, .ask-typing i, .ask-pipeline__stage, .ask-panel__scene { animation: none; }
    .ask-panel__scene[data-phase="live"] .ask-spark__line { animation: none; stroke-dashoffset: 0; }
    .ask-panel__stage, .ask-panel__stage-dot { animation-duration: 1ms !important; animation-delay: 0s !important; }
    .ask[data-ask-ready] [data-step] { animation: none; }
    .ask-w { opacity: 1; transition: none; }
    .ask__thread { scroll-behavior: auto; }
  }
}

@layer utilities {
  .sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}