/* Owner AI assistant (R8 §2.13, §4.6, §2.14) — the "Ask AI" entry field and the chat (.ai-*). Tokens only (app.css).
 * Patterns (research/erp-r8/appllama/FINDINGS.md): the entry is a field, not a banner (Expensify home); header New ·
 * title · Close (Trust); a scope chip + timestamp line (Notee); full-width suggestion rows (iScanner); answer = lead →
 * figures → scope → caveats → action links → follow-up chips (Expensify Concierge); disclaimer under the composer.
 * Motion (Emil Kowalski): transform/opacity only. Panel and phone chat enter over --d-panel-in on --ease-drawer and
 * leave over --d-panel-out on --ease-out (exit faster). A message fades + rises 8 px over --d-msg. Thinking dots pulse
 * opacity. No motion on chips, scope changes or typing. Press scale(.97). Hover only for fine pointers. */

/* ------------------------------------------------------------------ entry: a field-like button on the owner's dashboard */
.ai-entry {
  width: 100%; display: flex; align-items: center; gap: var(--s-3); min-height: 56px; padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4);
  border: 1px solid var(--line-strong); border-radius: var(--r-input); background: var(--surface); color: var(--ink);
  font: var(--t-body); text-align: left; cursor: pointer;
  transition: background-color var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out), transform var(--d-press) var(--ease-out);
}
.ai-entry:active { transform: scale(.97); }
.ai-entry__ic { flex: none; display: inline-grid; place-items: center; color: var(--accent-text); }
.ai-entry__txt { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: var(--s-2); overflow: hidden; }
.ai-entry__k { flex: none; font-weight: 600; color: var(--accent-text); }
.ai-entry__ph { min-width: 0; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-entry__go { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); }
@media (hover: hover) and (pointer: fine) { .ai-entry:hover { background: var(--surface-3); border-color: var(--accent); } }

/* ------------------------------------------------------------------ the chat container (#ai-root, next to #app) */
.ai { position: fixed; z-index: 70; display: flex; flex-direction: column; }
.ai[data-mode="full"] { inset: 0; height: 100dvh; }
.ai[data-mode="panel"] { top: 0; right: 0; height: 100dvh; width: 400px; max-width: 100vw; }   /* top + height follow the top bar (assistant.js) */
/* R8 AI-06: while the desktop panel is open the page keeps its content left of it (no overlap on the screen an answer
   links to). A layout change, not an animation: it follows the panel instantly. */
@media (min-width: 1280px) {   /* 1024–1279: too narrow for both, so an answer's link closes the panel (assistant.js) */
  html.has-ai-panel .view { padding-right: calc(400px + var(--gutter-r)); }
  /* beside the panel a 7-column table no longer fits, so Sales and Expenses use the list rows the phone uses (every
     row keeps its total and its Approve button in view) */
  html.has-ai-panel .exp-table, html.has-ai-panel .sale-table { display: none; }
  html.has-ai-panel .exp-rows { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
  html.has-ai-panel .sale-rows { display: grid; gap: var(--s-4); }
  html.has-ai-panel .cl-split { grid-template-columns: minmax(0, 1fr); }   /* Decide: the queue above the case */
  /* the owner dashboard reads as one column beside the panel (its DOM is already in reading order) */
  html.has-ai-panel .dash--owner { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: none; }
  html.has-ai-panel .dash--owner > * { grid-area: auto; }
  html.has-ai-panel .cl-detail { position: static; }
}
.ai__panel {
  flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--surface); color: var(--ink);
}
.ai[data-mode="panel"] .ai__panel { border-left: 1px solid var(--line); box-shadow: var(--shadow-2); }

/* enter / leave: the panel slides from the right, the phone chat rises from the bottom */
.ai[data-mode="panel"] { transform: translateX(100%); }
.ai[data-mode="full"] { transform: translateY(100%); }
.ai[data-state="open"] { transform: none; transition: transform var(--d-panel-in) var(--ease-drawer); }
.ai[data-mode="panel"][data-state="leave"] { transform: translateX(100%); transition: transform var(--d-panel-out) var(--ease-out); }
.ai[data-mode="full"][data-state="leave"] { transform: translateY(100%); transition: transform var(--d-panel-out) var(--ease-out); }

/* header: New conversation · Ask AI / Demo AI assistant · Close */
.ai__head {
  flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--s-1);
  min-height: 60px; padding: var(--s-1) var(--s-2) var(--s-1) var(--s-4); padding-top: max(var(--s-1), env(safe-area-inset-top)); border-bottom: 1px solid var(--line);
}
.ai__title { min-width: 0; }
.ai__title h2 { margin: 0; font: var(--t-h3); }
.ai__title h2:focus { outline: none; }
.ai__title h2:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.ai__sub { margin: 0; font: var(--t-meta); color: var(--ink-3); }
@media (max-width: 379px) { .ai__new-long { display: none; } }

/* scope chips + timestamp: inputs for the next question (each answer states its own scope) */
.ai__scopewrap { flex: none; border-bottom: 1px solid var(--line); }
.ai__scope { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-4); }
.ai-chip { position: relative; min-height: 44px; padding: 0 var(--s-3); color: var(--ink); cursor: pointer; transition: transform var(--d-press) var(--ease-out); }
.ai-chip:active { transform: scale(.97); }
.ai-chip > .ic:first-child { color: var(--ink-3); }
.ai-chip__sel {
  appearance: none; -webkit-appearance: none; border: 0; background: transparent; color: inherit; font: 600 14px/20px var(--font);
  padding: 0 var(--s-5) 0 0; margin: 0; min-height: 42px; cursor: pointer;
}
.ai-chip__sel:focus { outline: none; }
.ai-chip:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.ai-chip__chev { position: absolute; right: var(--s-3); pointer-events: none; color: var(--ink-3); }
.ai__asof { font: var(--t-meta); color: var(--ink-3); }

/* the conversation */
.ai__log {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; gap: var(--s-5); padding: var(--s-4) var(--s-4) var(--s-6);
}
.ai__log:focus { outline: none; }
.ai-in { animation: q-rise var(--d-msg) var(--ease-out) both; }

.ai-msg { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.ai-msg--user {
  align-self: flex-end; max-width: 85%; padding: var(--s-2) var(--s-4); border-radius: var(--r-card);
  background: var(--accent-soft); color: var(--ink); font: var(--t-body);
}
.ai-msg--user p { margin: 0; }
.ai-msg--bot { align-self: stretch; display: grid; gap: var(--s-3); }
.ai-msg--note { align-self: center; font: var(--t-meta); color: var(--ink-3); }

.ai-a__lead { margin: 0; font: var(--t-body); font-weight: 600; text-wrap: pretty; }
.ai-a__lic { vertical-align: -3px; margin-inline-end: var(--s-2); color: var(--ink-3); }
.ai-msg--error .ai-a__lic { color: var(--danger); }
.ai-a__change { display: flex; gap: var(--s-2); align-items: flex-start; margin: 0; font: var(--t-meta); color: var(--accent-text); }
.ai-a__change .ic { flex: none; margin-top: 2px; }

/* figures: one hairline list, label + kind tag on the left, the figure on the right (tabular) */
.ai-figs { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-input); }
.ai-figs__g { margin: var(--s-1) 0 calc(var(--s-2) * -1); font: var(--t-label); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.ai-fig { display: flex; align-items: center; gap: var(--s-3); min-height: 52px; padding: var(--s-2) var(--s-3); }
.ai-fig + .ai-fig { border-top: 1px solid var(--line); }
.ai-fig__l { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ai-fig__label { font: var(--t-body); }
.ai-fig--row .ai-fig__label { font-weight: 600; }
.ai-fig__note { font: var(--t-meta); color: var(--ink-3); }
.ai-fig__v { flex: none; font: var(--t-h3); white-space: nowrap; }
.ai-kind { font-weight: 600; color: var(--ink-2); }
.ai-kind--confirmed, .ai-kind--approved, .ai-kind--payment { color: var(--ok); }
.ai-kind--pending, .ai-kind--blocking, .ai-kind--overdue { color: var(--warn); }
.ai-fig--pending .ai-fig__v { color: var(--ink-2); }

.ai-a__scope { display: flex; gap: var(--s-2); align-items: flex-start; margin: 0; font: var(--t-meta); color: var(--ink-3); }
.ai-a__scope .ic { flex: none; margin-top: 3px; }
.ai-a__cav { margin: 0; padding-inline-start: var(--s-5); list-style: disc; display: grid; gap: var(--s-1); font: var(--t-meta); color: var(--ink-2); }
.ai-a__ev { font: var(--t-meta); color: var(--ink-2); }
.ai-a__ev summary { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent-text); font-weight: 600; cursor: pointer; }
.ai-a__cav li::marker, .ai-a__ev li::marker { color: var(--ink-3); }
.ai-a__ev ul { margin: 0; padding-inline-start: var(--s-5); list-style: disc; display: grid; gap: var(--s-1); }
.ai-a__acts { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.ai-a__act { white-space: normal; text-align: left; }
.ai-a__fu { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.ai-chipbtn { min-height: 44px; cursor: pointer; color: var(--accent-text); white-space: normal; text-align: left; transition: transform var(--d-press) var(--ease-out), background-color var(--d-fast) var(--ease-out); }
.ai-chipbtn:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .ai-chipbtn:hover { background: var(--accent-soft); } }

/* thinking: three calm dots in the reply position (opacity only), removed the instant an answer or Stop arrives */
.ai-msg--thinking { display: flex; align-items: center; min-height: 32px; }
.ai-dots { display: inline-flex; gap: 6px; }
/* R10 A8: no infinite loop. The pulse runs 11 times (about 10 s, the loader's limit) and then rests; an answer lands in
   600 ms, so in practice it is removed long before that */
.ai-dots i { width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--ink-3); animation: ai-pulse 900ms linear 11 both; }
.ai-dots i:nth-child(2) { animation-delay: 150ms; }
.ai-dots i:nth-child(3) { animation-delay: 300ms; }
@keyframes ai-pulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* welcome: "How can I help?" + one sentence + the 8 suggestions as full-width rows */
.ai-welcome { display: grid; gap: var(--s-2); }
.ai-welcome__t { margin: 0; font: var(--t-h2); }
.ai-welcome__p { margin: 0 0 var(--s-3); font: var(--t-body); color: var(--ink-2); }
.ai-sugg .lrow { min-height: 52px; }
.ai-sugg .lrow__title { font: var(--t-body); font-weight: 500; -webkit-line-clamp: unset; display: block; }
.ai-sugg .lrow__lead { color: var(--accent-text); }

/* composer: pinned at the bottom of the panel; on phones the panel follows visualViewport, so it sits above the keyboard */
.ai__composer { flex: none; padding: var(--s-3) var(--s-4) max(var(--s-2), env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--surface); }
.ai__field {
  display: flex; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-1) var(--s-1) var(--s-4);
  border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface);
}
.ai__field:focus-within { outline: 3px solid var(--focus); outline-offset: 0; border-color: var(--focus); }
.ai__input { flex: 1; min-width: 0; min-height: 44px; border: 0; padding: 0; background: transparent; font: var(--t-body); }
.ai__input:focus, .ai__input:focus-visible { outline: none; border: 0; }
.ai__send {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-1); min-width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); font: 600 15px/20px var(--font); cursor: pointer;
  transition: transform var(--d-press) var(--ease-out), background-color var(--d-fast) var(--ease-out);
}
.ai__send:active { transform: scale(.97); }
.ai__send--stop { padding: 0 var(--s-4) 0 var(--s-3); background: var(--surface-2); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .ai__send:not(.ai__send--stop):hover { background: var(--accent-hover); } }
.ai__disc { margin: var(--s-2) 0 0; text-align: center; font: 500 13px/16px var(--font); color: var(--ink-3); }

/* reduced motion: no movement; the panel and messages fade instead (opacity only). R10: keyed on html.no-motion, which
   core sets for the system setting AND Settings > This device > Reduce motion */
html.no-motion .ai[data-mode] { transform: none !important; opacity: 0; }
html.no-motion .ai[data-state="open"] { opacity: 1; transition: opacity var(--d-panel-in) var(--ease-out); }
html.no-motion .ai[data-state="leave"] { opacity: 0; transition: opacity var(--d-panel-out) var(--ease-out); }
html.no-motion .ai-in { animation-name: q-fade; }
html.no-motion .ai-entry:active, html.no-motion .ai-chip:active, html.no-motion .ai-chipbtn:active, html.no-motion .ai__send:active { transform: none; }
html.no-motion .ai-dots i { animation: none; opacity: .6; }

/* ================================================================== R11.1 concept A "Control Room" (html[data-concept="a"] only)
 * A command panel: graphite header and composer rail, a live pulse with today's two figures on the welcome, the
 * suggested questions as chips, answers as a card with mini KPI tiles (mono figures) and 14-day sparklines. */
html[data-concept="a"] .ai__panel { background: var(--bg); }
html[data-concept="a"] .ai[data-mode="panel"] .ai__panel { border-left: 1px solid var(--ca-chrome-line); }
html[data-concept="a"] .ai__head { background: var(--ca-chrome); color: var(--ca-chrome-ink); border-bottom: 1px solid var(--ca-chrome-line); }
html[data-concept="a"] .ai__title h2 { color: var(--ca-white); font: 600 16px/22px var(--font); letter-spacing: -.01em; display: flex; align-items: center; gap: var(--s-2); }
html[data-concept="a"] .ai__title h2::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--ca-chrome-accent); box-shadow: 0 0 12px var(--ca-chrome-accent); }
html[data-concept="a"] .ai__title h2:focus-visible { outline-color: var(--ca-chrome-accent); }
html[data-concept="a"] .ai__sub { color: var(--ca-chrome-ink-2); font: 500 11px/16px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
html[data-concept="a"] .ai__head .btn--quiet, html[data-concept="a"] .ai__head .icon-btn { color: var(--ca-chrome-ink); background: transparent; }
html[data-concept="a"] .ai__head .btn--quiet:focus-visible, html[data-concept="a"] .ai__head .icon-btn:focus-visible { outline-color: var(--ca-chrome-accent); }
@media (hover: hover) and (pointer: fine) { html[data-concept="a"] .ai__head .btn--quiet:hover { background: var(--ca-white-08); color: var(--ca-white); } }
@media (hover: hover) and (pointer: fine) { html[data-concept="a"] .ai__head .icon-btn:hover { background: var(--ca-white-08); color: var(--ca-white); } }
html[data-concept="a"] .ai__scopewrap { background: var(--surface); border-bottom: 1px solid var(--line); }
html[data-concept="a"] .ai-chip { border-radius: 8px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-1); min-height: 40px; }
@media (pointer: coarse) { html[data-concept="a"] .ai-chip { min-height: 44px; } }
html[data-concept="a"] .ai-chip__sel { font: 500 13px/18px var(--font); min-height: 38px; }
html[data-concept="a"] .ai__asof { font: 500 11px/16px var(--font-mono); letter-spacing: .02em; }
html[data-concept="a"] .ai__log { gap: var(--s-4); }

/* messages */
html[data-concept="a"] .ai-msg--user { background: var(--ca-chrome); color: var(--ca-chrome-ink); border-radius: 12px 12px 4px 12px; font-size: 15px; }
html[data-concept="a"] .ai-msg--bot:not(.ai-msg--thinking) { background: var(--surface); border: 1px solid var(--line); border-radius: 4px 12px 12px 12px; box-shadow: var(--shadow-1); padding: var(--s-4); position: relative; }
html[data-concept="a"] .ai-msg--bot:not(.ai-msg--thinking)::before { content: "ANSWER"; font: 500 11px/14px var(--font-mono); letter-spacing: .12em; color: var(--accent-text); margin-bottom: calc(-1 * var(--s-1)); }
html[data-concept="a"] .ai-msg--error::before { content: "ERROR" !important; color: var(--danger) !important; }
html[data-concept="a"] .ai-msg--limit::before { content: "OUT OF SCOPE" !important; color: var(--ink-3) !important; }
html[data-concept="a"] .ai-a__lead { font: 600 15px/22px var(--font); letter-spacing: -.005em; }
html[data-concept="a"] .ai-a__scope { font: 500 11px/16px var(--font-mono); letter-spacing: .01em; padding-top: var(--s-2); border-top: 1px dashed var(--line); }
html[data-concept="a"] .ai-a__cav { font-size: 13px; line-height: 18px; }
html[data-concept="a"] .ai-figs__g { font: 500 11px/16px var(--font-mono); letter-spacing: .1em; display: flex; align-items: center; gap: var(--s-2); }
html[data-concept="a"] .ai-figs__g::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); }

/* figures as KPI tiles: label · big mono figure · note · sparkline */
html[data-concept="a"] .ai-figs--a { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); border: 0; border-radius: 0; }
html[data-concept="a"] .ai-figs--one { grid-template-columns: minmax(0, 1fr); }
html[data-concept="a"] .ai-figs--a > .ai-fig { border: 1px solid var(--line); border-radius: 10px; background: var(--surface-3); }
html[data-concept="a"] .ai-figs--a > .ai-fig + .ai-fig { border-top: 1px solid var(--line); }
html[data-concept="a"] .ai-figs--a > .ai-fig:not(.ai-fig--kpi) { grid-column: 1 / -1; }
html[data-concept="a"] .ai-fig--kpi { display: grid; align-content: start; gap: 2px; min-height: 0; padding: 10px var(--s-3) var(--s-2); position: relative; overflow: hidden; min-width: 0; }
html[data-concept="a"] .ai-fig--kpi .ai-fig__l { display: contents; }
html[data-concept="a"] .ai-fig--kpi .ai-fig__label { order: 1; font: 500 12px/16px var(--font); color: var(--ink-2); }
html[data-concept="a"] .ai-fig--kpi .ai-fig__v { order: 2; font: 500 17px/24px var(--font-mono); letter-spacing: -.03em; color: var(--ink); white-space: nowrap; }
html[data-concept="a"] .ai-fig--kpi .ai-fig__note { order: 3; font-size: 12px; line-height: 16px; }
html[data-concept="a"] .ai-fig--kpi .ai-fig__spark { order: 4; }
html[data-concept="a"] .ai-figs--one > .ai-fig--kpi .ai-fig__v { font-size: 22px; line-height: 28px; }
html[data-concept="a"] .ai-fig--kpi.ai-fig--pending { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn-bar) 35%, var(--line)); }
html[data-concept="a"] .ai-fig--kpi.ai-fig--pending .ai-fig__v { color: var(--ink-2); }
html[data-concept="a"] .ai-fig--up .ai-fig__v { color: var(--ok); }
html[data-concept="a"] .ai-fig--down .ai-fig__v { color: var(--danger); }
html[data-concept="a"] .ai-fig__spark { display: grid; gap: 0; margin: var(--s-1) calc(-1 * var(--s-3)) calc(-1 * var(--s-2)); position: relative; }
html[data-concept="a"] .ai-fig__spark .ca-spark { display: block; width: 100%; height: 34px; }
html[data-concept="a"] .ai-fig__spark .ca-spark__line { fill: none; stroke: currentColor; stroke-width: 1.75; }
html[data-concept="a"] .ai-fig__sk { position: absolute; right: var(--s-3); top: -2px; font: 500 11px/13px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
html[data-concept="a"] .ai-figs:not(.ai-figs--a) { background: var(--surface); }

/* actions and follow-ups */
html[data-concept="a"] .ai-a__act { border-radius: 8px; }
html[data-concept="a"] .ai-a__fu .ai-chipbtn { border-radius: 8px; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); background: var(--accent-soft); font: 500 13px/18px var(--font); padding: 0 var(--s-3); }

/* welcome: eyebrow, pulse cards, chips */
html[data-concept="a"] .ai-welcome--a { gap: var(--s-2); }
html[data-concept="a"] .ai-welcome__eye { display: inline-flex; align-items: center; gap: var(--s-2); margin: 0; font: 500 11px/16px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
html[data-concept="a"] .ai-welcome--a .ai-welcome__t { font: 600 22px/28px var(--font); letter-spacing: -.025em; }
html[data-concept="a"] .ai-welcome--a .ai-welcome__p { font-size: 14px; line-height: 20px; margin-bottom: var(--s-2); }
html[data-concept="a"] .ai-pulse { list-style: none; margin: 0 0 var(--s-2); padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
html[data-concept="a"] .ai-pulse__c { display: grid; align-content: start; gap: 2px; min-width: 0; padding: 10px var(--s-3) var(--s-2); border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-1); overflow: hidden; }
html[data-concept="a"] .ai-pulse__c:first-child { background: var(--ca-chrome); border-color: var(--ca-chrome); color: var(--ca-chrome-ink); }
html[data-concept="a"] .ai-pulse__k { font: 500 12px/16px var(--font); color: var(--ink-2); }
html[data-concept="a"] .ai-pulse__c:first-child .ai-pulse__k, html[data-concept="a"] .ai-pulse__c:first-child .ai-pulse__m { color: var(--ca-chrome-ink-2); }
html[data-concept="a"] .ai-pulse__v { font: 500 17px/24px var(--font-mono); letter-spacing: -.03em; white-space: nowrap; }
html[data-concept="a"] .ai-pulse__c:first-child .ai-pulse__v { color: var(--ca-white); }
html[data-concept="a"] .ai-pulse__m { font-size: 12px; line-height: 16px; color: var(--ink-3); }
html[data-concept="a"] .ai-pulse__c:first-child .ca-spark { color: var(--ca-chrome-accent); }
html[data-concept="a"] .ai-welcome__g { margin: var(--s-1) 0 0; font: 500 11px/16px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
html[data-concept="a"] .ai-sugg--chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
html[data-concept="a"] .ai-sugg__chip {
  display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: var(--s-2) var(--s-3); text-align: left;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-1); color: var(--ink); font: 500 14px/18px var(--font); cursor: pointer;
  transition: transform var(--d-press) var(--ease-out), border-color var(--d-fast) var(--ease-out), background-color var(--d-fast) var(--ease-out);
}
html[data-concept="a"] .ai-sugg__chip .ic { flex: none; color: var(--accent-text); }
html[data-concept="a"] .ai-sugg__chip:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { html[data-concept="a"] .ai-sugg__chip:hover { border-color: var(--accent); background: var(--accent-soft); } }

/* composer: a command bar */
html[data-concept="a"] .ai__composer { background: var(--surface); border-top: 1px solid var(--line); }
html[data-concept="a"] .ai__field { border-radius: 12px; border-color: var(--line); background: var(--surface-3); box-shadow: inset 0 1px 2px var(--ca-shade-04); }
html[data-concept="a"] .ai__field:focus-within { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ca-glow); background: var(--surface); }
html[data-concept="a"] .ai__send { border-radius: 9px; box-shadow: 0 1px 2px var(--ca-shade-20), inset 0 1px 0 var(--ca-white-18); }
html[data-concept="a"] .ai__send--stop { box-shadow: inset 0 0 0 1px var(--line); }
html[data-concept="a"] .ai__disc { font: 500 11px/16px var(--font-mono); letter-spacing: .02em; }
html[data-concept="a"] .ai-dots i { background: var(--accent); }
html[data-concept="a"].no-motion .ai-sugg__chip:active { transform: none; }
html[data-concept="a"].no-motion .ai-sugg__chip { transition: none; }
html[data-concept="a"] .ai__field .ai__input, html[data-concept="a"] .ai__field .ai__input:focus-visible { border: 0; box-shadow: none; background: transparent; border-radius: 0; }
html[data-concept="a"] .ai-figs--a > .ai-fig--kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
html[data-concept="a"] .ai-figs__g--b2::before { background: var(--ca-b2); }
@media (max-width: 399px) { html[data-concept="a"] .ai-figs--a:not(.ai-figs--one) .ai-fig--kpi .ai-fig__v { font-size: 15px; letter-spacing: -.04em; } }