/* Ask page and answer rendering: empty state and examples, composer, thread, streaming, answers,
   blocks, records, jobs. The answer rules apply under .page-ask and under .answer-view, the shared
   wrapper the saved answer page and the report reader put around render.js output. */

.page-ask { display: flex; flex-direction: column; min-height: calc(100dvh - var(--header-height) - 2.6rem); }

:is(.page-ask, .answer-view) {
  /* conversation bar */
  & .conversation-bar { border-bottom: 1px solid color-mix(in oklab, var(--border) 60%, transparent); background: color-mix(in oklab, var(--background) 60%, transparent); font-size: var(--text-sm); }
  & .conversation-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; max-width: 64rem; margin-inline: auto; padding: 0.5rem 1rem; }
  & .conversation-inner code { color: var(--muted-foreground); }
  & .subjects { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0; padding: 0; list-style: none; }

  /* column and empty state */
  & .ask-column { flex: 1; width: 100%; max-width: 64rem; margin-inline: auto; padding: 1.5rem 1rem; }
  & .ask-empty { display: grid; justify-items: center; max-width: 56rem; margin-inline: auto; padding-top: 8vh; text-align: center; }
  @media (min-width: 768px) { & .ask-empty { padding-top: 11vh; } }
  & .ask-empty > * { animation: enter-up 300ms ease both; }
  & .hero-badge {
    display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.75rem; border-radius: var(--radius-full);
    font-size: var(--text-xs); font-weight: 500; color: var(--accent-text);
    border: 1px solid color-mix(in oklab, var(--primary-accent) 20%, transparent); background: color-mix(in oklab, var(--primary-accent) 5%, transparent);
  }
  & .hero-badge svg { width: 0.875rem; height: 0.875rem; }
  & .ask-title { margin-top: 1.25rem; font-size: var(--text-4xl); line-height: 1.1; font-weight: 600; letter-spacing: -0.025em; text-wrap: balance; outline: none; }
  @media (min-width: 768px) { & .ask-title { font-size: var(--text-5xl); } }
  & .ask-subline { margin-top: 0.5rem; font-size: var(--text-lg); font-weight: 500; color: color-mix(in oklab, var(--foreground) 80%, transparent); }
  & .ask-lede { max-width: 36rem; margin: 0.75rem auto 2rem; color: var(--muted-foreground); line-height: 1.625; text-wrap: balance; }
  & .composer-slot { position: relative; width: 100%; max-width: 56rem; text-align: left; }
  & .trust-line { display: flex; align-items: flex-start; justify-content: center; gap: 0.5rem; max-width: 40rem; margin-top: 1.25rem; font-size: var(--text-xs); line-height: 1.5; color: var(--muted-foreground); }
  & .trust-line svg { flex: none; width: 0.875rem; height: 0.875rem; margin-top: 0.125rem; }

  /* examples panel */
  & .examples-panel {
    display: grid; gap: 0.75rem; margin-top: 0.75rem; padding: 1rem; max-height: min(60vh, 32rem); overflow-y: auto;
    border: 1px solid color-mix(in oklab, var(--border) 70%, transparent); border-radius: var(--radius-xl);
    background: color-mix(in oklab, var(--card) 85%, transparent); box-shadow: var(--shadow-md); backdrop-filter: blur(var(--blur));
    animation: enter-up 300ms ease;
  }
  & .examples-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
  & .examples-head h2 { font-size: var(--text-sm); font-weight: 600; }
  & .example-tabs .chip { padding: 0.25rem 0.75rem; font-size: var(--text-xs); }
  & .example-group { display: grid; gap: 0.5rem; }
  & .example-blurb { font-size: var(--text-sm); color: var(--muted-foreground); }
  & .example-list { display: grid; gap: 0.125rem; margin: 0; padding: 0; list-style: none; }
  & .example {
    display: flex; align-items: flex-start; gap: 0.75rem; width: 100%; padding: 0.5rem; border-radius: var(--radius-lg);
    font-size: var(--text-sm); text-align: left; color: color-mix(in oklab, var(--foreground) 90%, transparent);
    transition: background-color var(--duration) var(--ease);
  }
  & .example svg { flex: none; margin-top: 0.125rem; width: 1rem; height: 1rem; color: var(--muted-foreground); }
  & .example:hover { background: var(--muted); }
  & .example:hover svg { color: var(--accent-text); }
  & :is(.example, .examples-toggle, .followup, .candidate):focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; box-shadow: var(--accent-ring); }
  & .example-note { padding-top: 0.5rem; border-top: 1px solid var(--border); font-size: var(--text-xs); color: var(--muted-foreground); }

  /* thread */
  & .thread { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
  & .thread-status:not(:empty) { margin-top: 1rem; }
  & .turn { display: grid; gap: 0.75rem; scroll-margin-top: calc(var(--header-height) + 1rem); }
  & .question { display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; }
  & .question p {
    max-width: min(80%, 40rem); padding: 0.75rem 1rem; border-radius: var(--radius-2xl); border-top-right-radius: 0;
    background: var(--primary); color: var(--primary-foreground); white-space: pre-wrap; overflow-wrap: anywhere;
  }
  & .question p.muted { background: var(--muted); color: var(--muted-foreground); font-style: italic; }
  & .question-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: var(--text-xs); color: var(--muted-foreground); }
  & .depth-chip { text-transform: uppercase; letter-spacing: 0.05em; }

  & .answer {
    display: grid; gap: 0.875rem; min-width: 0; padding: 1rem 1.125rem;
    background: var(--card); color: var(--card-foreground);
    border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm);
  }
  & .answer:empty { display: none; }
  & .live-body { display: grid; gap: 0.875rem; min-width: 0; }
  & .live-body:empty { display: none; }

  /* progress and streaming status */
  & .progress { display: flex; flex-wrap: wrap; gap: 0.375rem; list-style: none; margin: 0; padding: 0; font-size: var(--text-xs); }
  & .progress li { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0.625rem; border-radius: var(--radius-full); background: var(--muted); color: var(--muted-foreground); }
  & .progress svg { width: 0.75rem; height: 0.75rem; }
  & .progress li.done { color: var(--success); background: color-mix(in oklab, var(--success) 12%, transparent); }
  & .progress li.current { color: var(--accent-text); background: color-mix(in oklab, var(--primary-accent) 8%, transparent); animation: pulse 1.4s ease-in-out infinite; }
  & .stream-status { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: var(--text-sm); color: var(--muted-foreground); }
  & .stream-status .spinner { color: var(--accent-text); }
  & .partial-note { font-size: var(--text-xs); font-style: italic; color: var(--muted-foreground); }

  /* narrative: Markdown subset and citations */
  & .narrative { display: grid; gap: 0.75rem; overflow-wrap: anywhere; font-size: var(--text-sm); line-height: 1.714; color: color-mix(in oklab, var(--foreground) 90%, transparent); }
  & .narrative :is(h3, h4, h5, h6) { font-weight: 600; line-height: 1.4; color: var(--foreground); }
  & .narrative h3 { font-size: var(--text-lg); }
  & .narrative h4 { font-size: var(--text-base); }
  & .narrative :is(h5, h6) { font-size: var(--text-sm); }
  & .narrative :is(ul, ol) { display: grid; gap: 0.25rem; margin: 0; padding-left: 1.25rem; }
  & .narrative ul { list-style: disc; }
  & .narrative ol { list-style: decimal; }
  & .narrative strong { font-weight: 600; color: var(--foreground); }
  & .narrative a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
  & .narrative code { padding: 0.0625rem 0.3rem; border-radius: var(--radius-sm); background: var(--muted); font-family: var(--font-mono); font-size: 0.857em; }
  & .narrative pre { overflow-x: auto; padding: 0.75rem; border-radius: var(--radius-md); background: var(--muted); }
  & .narrative pre code { padding: 0; background: none; }
  & .narrative blockquote { padding-left: 0.75rem; border-left: 3px solid var(--border); color: var(--muted-foreground); }
  & .narrative .table-wrap :is(th, td) { min-width: 10rem; max-width: 28rem; white-space: normal; overflow-wrap: anywhere; }
  & .narrative.streaming > :last-child::after {
    content: ""; display: inline-block; width: 7px; height: 1em; margin-left: 2px; vertical-align: -2px;
    background: var(--primary-accent); animation: pulse 1s steps(2) infinite;
  }
  & .cite {
    display: inline-block; font-size: 0.72em; vertical-align: super; line-height: 1; padding: 1px 5px; margin: 0 1px;
    border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--muted); color: var(--accent-text);
  }
  & .cite:hover { border-color: var(--primary-accent); }
  & .cite:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; box-shadow: var(--accent-ring); }
  & .sources { font-size: var(--text-xs); color: var(--muted-foreground); }

  /* key insight */
  & .insights { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0.75rem; }
  & .insight { display: grid; align-content: start; gap: 0.25rem; min-width: 0; padding: 0.875rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--card); box-shadow: var(--shadow-xs); }
  & .insight-metric { font-size: var(--text-xs); font-weight: 500; color: var(--muted-foreground); }
  & .insight-value { font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
  & .insight-date { font-size: var(--text-xs); color: var(--muted-foreground); }
  & .insight-context { font-size: var(--text-sm); color: color-mix(in oklab, var(--foreground) 85%, transparent); }
  & .qty[tabindex] { border-radius: var(--radius-sm); text-decoration: underline dotted color-mix(in oklab, var(--muted-foreground) 60%, transparent); text-underline-offset: 3px; cursor: help; }
  & .qty[tabindex]:focus-visible { outline: none; box-shadow: var(--ring-shadow); }
  & .insight .tooltip { font-size: var(--text-xs); font-weight: 400; letter-spacing: 0; }

  /* tables and charts */
  & .block-body { display: grid; gap: 0.875rem; min-width: 0; }
  & .table-wrap:focus-visible { outline: none; box-shadow: var(--ring-shadow); }
  & .table-wrap .table td { white-space: nowrap; }
  & figcaption { font-size: var(--text-xs); margin-top: 0.25rem; }
  & .chart { padding: 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-xl); min-width: 0; }
  & .chart-title { font-weight: 600; font-size: var(--text-sm); margin: 0 0 0.25rem; }
  & .chart-svg { width: 100%; height: auto; min-height: 180px; }
  & .chart-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; margin-top: 0.5rem; font-size: var(--text-xs); color: var(--muted-foreground); }
  & .grid-line { stroke: var(--border); stroke-width: 1; }
  & .axis-label { fill: var(--muted-foreground); font-size: 11px; font-family: var(--font-sans); }
  & .mark, & .dot { stroke: none; }
  & .line { fill: none; stroke-width: 2.2; }
  & .area { stroke: none; opacity: 0.18; }
  & .series-0 { --series: var(--chart-1); }
  & .series-1 { --series: var(--chart-2); }
  & .series-2 { --series: var(--chart-3); }
  & .series-3 { --series: var(--chart-4); }
  & .series-4 { --series: var(--chart-5); }
  & .series-5 { --series: var(--primary-accent); }
  & [class*="series-"] { fill: var(--series); stroke: var(--series); color: var(--series); }
  & .line[class*="series-"] { fill: none; }
  & .legend { display: flex; flex-wrap: wrap; gap: 0.75rem; list-style: none; padding: 0; margin: 0.375rem 0 0; font-size: var(--text-xs); }
  & .swatch { display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 2px; background: currentColor; }
  & .chart-data summary { margin-top: 0.375rem; font-size: var(--text-xs); color: var(--muted-foreground); cursor: pointer; }

  /* caveats, references, follow ups */
  & .caveat {
    display: grid; gap: 0.125rem; padding: 0.5rem 0.75rem; font-size: var(--text-sm);
    border-left: 3px solid var(--warning); border-radius: 0 var(--radius-md) var(--radius-md) 0;
    background: color-mix(in oklab, var(--warning) 10%, transparent);
  }
  & .references { padding-top: 0.75rem; border-top: 1px solid var(--border); }
  & .references h3 { margin: 0 0 0.375rem; font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); }
  & .references ul { display: grid; gap: 0.375rem; margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); }
  & .references li { display: flex; align-items: flex-start; gap: 0.5rem; }
  & .references li > svg { flex: none; width: 0.875rem; height: 0.875rem; margin-top: 0.1875rem; color: var(--muted-foreground); }
  & .references a { color: var(--accent-text); }
  & :is(.references, .basis) a svg { display: inline; width: 0.75rem; height: 0.75rem; margin-left: 0.25rem; vertical-align: -1px; }
  & .followups { display: grid; gap: 0.5rem; }
  & .followup {
    display: flex; align-items: center; gap: 0.625rem; width: 100%; padding: 0.625rem 0.75rem; text-align: left; font-size: var(--text-sm);
    border: 1px solid color-mix(in oklab, var(--chart-2) 35%, var(--border)); border-radius: var(--radius-lg);
    background: color-mix(in oklab, var(--chart-2) 5%, transparent); transition: border-color var(--duration) var(--ease), background-color var(--duration) var(--ease);
  }
  & .followup svg { flex: none; width: 1rem; height: 1rem; color: var(--muted-foreground); }
  & .followup:hover { border-color: var(--primary-accent); background: color-mix(in oklab, var(--primary-accent) 5%, transparent); }

  /* clarification */
  & .clarification { display: grid; gap: 0.5rem; min-width: 0; margin: 0; padding: 0; border: 0; }
  & .clarification :is(legend, p) { margin: 0 0 0.5rem; padding: 0; font-weight: 500; }
  & .candidates { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); }
  & .candidate {
    display: grid; gap: 0.125rem; padding: 0.625rem 0.75rem; text-align: left; color: var(--foreground);
    border: 1px solid var(--border); border-radius: var(--radius-lg); background: color-mix(in oklab, var(--muted) 50%, transparent);
    transition: border-color var(--duration) var(--ease);
  }
  & .candidate:hover:not(:disabled) { border-color: var(--primary-accent); }
  & .candidate:disabled { cursor: default; opacity: 0.6; }
  & .candidate.chosen { opacity: 1; border-color: var(--primary-accent); background: color-mix(in oklab, var(--primary-accent) 6%, transparent); }
  & .candidate .muted { font-size: var(--text-xs); font-family: var(--font-mono); }

  /* records */
  & .records summary { display: flex; align-items: center; gap: 0.375rem; cursor: pointer; font-size: var(--text-sm); color: var(--muted-foreground); list-style: none; }
  & .records summary::-webkit-details-marker { display: none; }
  & .records summary svg { width: 1rem; height: 1rem; transition: rotate var(--duration) var(--ease); }
  & .records[open] summary svg { rotate: 90deg; }
  & .records summary:focus-visible { outline: none; border-radius: var(--radius-sm); box-shadow: var(--ring-shadow); }
  & .records-list { display: grid; gap: 0.5rem; margin-top: 0.625rem; }
  & .record { padding: 0.625rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-md); scroll-margin: 90px 0 180px; }
  & .record:focus-visible { outline: none; box-shadow: var(--ring-shadow); }
  & .record.flash { animation: record-flash 1.6s ease-out; }
  & .record header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.625rem; margin-bottom: 0.375rem; font-size: var(--text-sm); }
  & .record-number { font-size: var(--text-xs); font-weight: 600; padding: 1px 6px; border-radius: var(--radius-sm); color: var(--accent-text); background: color-mix(in oklab, var(--primary-accent) 8%, transparent); }
  & .record dl { display: grid; grid-template-columns: minmax(7rem, max-content) 1fr; gap: 0.125rem 0.875rem; font-size: var(--text-sm); }
  & .record dt { color: var(--muted-foreground); }
  & .record dd { overflow-wrap: anywhere; }
  & .not-reported { margin-top: 0.375rem; font-size: var(--text-xs); color: var(--muted-foreground); }
  & .basis { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.25rem; font-size: var(--text-xs); }
  & .basis li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.5rem; color: var(--muted-foreground); }
  & .basis q { flex-basis: 100%; font-style: italic; }
  & .basis a { color: var(--accent-text); }
  & .kind { font-weight: 600; padding: 0 6px; border-radius: var(--radius-sm); }
  & :is(.kind-licensed, .kind-first_party) { color: var(--success); background: color-mix(in oklab, var(--success) 12%, transparent); }
  & .kind-public_record { color: var(--public-record-text); background: color-mix(in oklab, var(--alpha-3-accent) 12%, transparent); }
  & .kind-web { color: var(--warning); background: color-mix(in oklab, var(--warning) 12%, transparent); }

  /* actions, meta, errors */
  & .answer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.125rem; margin: -0.25rem 0 0 -0.375rem; }
  & .answer-actions .btn { color: var(--muted-foreground); }
  & .answer-actions .btn:hover { color: var(--foreground); }
  & .menu-host { position: relative; display: inline-flex; }
  & .menu-anchor-start { right: auto; left: 0; min-width: 12rem; }
  & .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.875rem; padding-top: 0.625rem; border-top: 1px solid var(--border); font-size: var(--text-xs); color: var(--muted-foreground); }
  & .warn-text { color: var(--warning); }
  & .request-id { margin-left: auto; font-size: var(--text-xs); color: var(--muted-foreground); }
  & .alert .actions { margin-top: 0.5rem; }
  & .alert-detail { flex-basis: 100%; font-size: var(--text-xs); color: var(--muted-foreground); }
  & .error-card {
    display: grid; gap: 0.375rem; padding: 1rem; border-radius: var(--radius-xl); font-size: var(--text-sm);
    border: 1px solid color-mix(in oklab, var(--destructive) 50%, transparent);
    background: color-mix(in oklab, var(--destructive) 10%, transparent);
  }
  & .error-card h3 { font-size: var(--text-sm); font-weight: 600; color: var(--destructive); }
  & .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }

  /* research jobs */
  & .job { display: grid; gap: 0.5rem; padding: 0.875rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: color-mix(in oklab, var(--muted) 50%, transparent); font-size: var(--text-sm); }
  & :is(.job-head, .job-row) { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
  & .job-head .spinner { color: var(--accent-text); }
  & .job-hints { display: grid; gap: 0.125rem; font-size: var(--text-xs); color: var(--muted-foreground); }
  & .job-message:empty { display: none; }
  & .job-row code { color: var(--muted-foreground); overflow-wrap: anywhere; }
  & .job[data-state="done"] .job-title { color: var(--success); }
  & .job:is([data-state="failed"], [data-state="cancelled"]) .job-title { color: var(--destructive); }

  /* composer */
  & .composer { display: grid; gap: 0.375rem; }
  & .composer-dock {
    position: sticky; bottom: 0; z-index: 10; padding: 1rem;
    border-top: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
    background: color-mix(in oklab, var(--background) 60%, transparent); backdrop-filter: blur(var(--blur));
  }
  & .dock-inner { display: grid; gap: 0.25rem; max-width: 64rem; margin-inline: auto; }
  & .dock-hint { order: 2; font-size: var(--text-xs); color: var(--muted-foreground); }
  @media (max-width: 640px) { & .dock-hint { display: none; } }
  & .composer-box {
    overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--background); box-shadow: var(--shadow-sm);
    transition: border-color var(--duration-slow) var(--ease), box-shadow var(--duration-slow) var(--ease);
  }
  & .composer-box:focus-within {
    border-color: color-mix(in oklab, var(--primary-accent) 50%, transparent);
    box-shadow: var(--shadow-sm), 0 0 0 4px color-mix(in oklab, var(--primary-accent) 10%, transparent);
  }
  & .composer.is-hero .composer-box {
    border-color: color-mix(in oklab, var(--primary-accent) 25%, transparent);
    box-shadow: 0 10px 15px -3px color-mix(in oklab, var(--primary-accent) 5%, transparent), 0 4px 6px -4px color-mix(in oklab, var(--primary-accent) 5%, transparent);
  }
  & .composer.is-hero .composer-box:focus-within { border-color: color-mix(in oklab, var(--primary-accent) 60%, transparent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary-accent) 10%, transparent); }
  & .composer-input {
    display: block; width: 100%; min-height: 3rem; max-height: 8rem; padding: 1rem; resize: none;
    border: 0; background: transparent; outline: none; field-sizing: content; font-size: var(--text-base);
  }
  & .composer.is-hero .composer-input { min-height: 5rem; max-height: 12rem; }
  @media (min-width: 768px) { & .composer-input { font-size: var(--text-lg); } }
  & .composer-input::placeholder { color: var(--muted-foreground); }
  & .composer-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; padding: 0.5rem; border-top: 1px solid var(--border); }
  & .examples-toggle {
    display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.5rem; border-radius: var(--radius-md);
    font-size: var(--text-sm); color: var(--muted-foreground);
  }
  & .examples-toggle svg { width: 1rem; height: 1rem; }
  & .examples-toggle:hover, & .examples-toggle[aria-expanded="true"] { background: var(--muted); color: var(--foreground); }
  & .depth { display: inline-flex; flex-wrap: wrap; margin: 0; padding: 3px; border: 0; border-radius: var(--radius-lg); background: var(--muted); }
  & .depth-option { position: relative; }
  & .depth-option input { position: absolute; opacity: 0; pointer-events: none; }
  & .depth-option span { display: inline-block; padding: 0.125rem 0.625rem; border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 500; cursor: pointer; color: var(--muted-foreground); }
  & .depth-option input:checked + span { background: var(--background); color: var(--foreground); box-shadow: var(--shadow-sm); }
  & .depth-option input:focus-visible + span { box-shadow: var(--ring-shadow); }
  & .depth-option input:disabled + span { cursor: default; opacity: 0.6; }
  & .stream-toggle.is-disabled { color: var(--muted-foreground); }
  & .composer-note { font-size: var(--text-xs); color: var(--warning); }
  & .composer-note:empty { display: none; }
  & .depth-note { padding-inline: 0.25rem; font-size: var(--text-xs); color: var(--muted-foreground); }
  & .composer-submit { margin-left: auto; min-width: 2.5rem; gap: 0.375rem; border-radius: var(--radius-lg); }
  & .composer-submit.is-stop { background: var(--primary); color: var(--primary-foreground); }
  @media (max-width: 639px) { & .composer-submit-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } }

  @media (max-width: 560px) {
    & .answer { padding: 0.75rem; }
    & .request-id { margin-left: 0; }
    & .record dl { grid-template-columns: 1fr; }
    & .ask-title { font-size: var(--text-3xl); }
    & .question p { max-width: 100%; }
    & .composer-dock { padding: 0.75rem; }
  }

  @media (prefers-reduced-motion: reduce) {
    & .ask-empty > *, & .examples-panel, & .record.flash, & .progress li.current,
    & .narrative.streaming > :last-child::after { animation: none; }
  }
}

@keyframes record-flash {
  0% { background: color-mix(in oklab, var(--primary-accent) 10%, transparent); border-color: var(--primary-accent); }
  100% { background: transparent; }
}