/* GENERATED from shared/caa-ai/caa-ai.css by scripts/sync-shared.mjs — do not edit here. */
/* CAA AI — shared styles for CAA Bot, insight cards and AI settings (both apps).
   Canonical copy: shared/caa-ai/caa-ai.css (synced by scripts/sync-shared.mjs). Edit the shared file only.
   Colours come from each app's own tokens (audit: --bg-1/--text-1/--border-1…; pipeline: --surface/--ink/--hairline…),
   so both apps and both themes match without per-app forks. Flat, ruled, no glow or gradients (pipeline rule). */

:root {
  --cai-surface: var(--bg-1, var(--surface, #ffffff));
  --cai-surface-2: var(--bg-2, var(--surface-2, #f6f7fb));
  --cai-surface-3: var(--bg-3, var(--surface-3, #eef1f6));
  --cai-border: var(--border-1, var(--hairline, #e3e7ee));
  --cai-border-2: var(--border-2, var(--hairline-2, #d5dbe5));
  --cai-ink: var(--text-1, var(--ink, #0f172a));
  --cai-ink-2: var(--text-2, var(--ink-2, #475569));
  --cai-ink-3: var(--text-3, var(--ink-3, #7a8699));
  --cai-accent: var(--accent, #2a78d6);
  --cai-brand: var(--brand-red, #c8102e);
  --cai-brand-ink: var(--cai-brand);          /* red TEXT; lighter in dark mode for ≥4.5:1 */
  --cai-good: #15803d;
  --cai-warn: #b45309;
  --cai-bad: #b91c1c;
  --cai-violet: #6d28d9;
  --cai-font: var(--font-sans, var(--font, Inter, system-ui, -apple-system, "Segoe UI", sans-serif));
  --cai-mono: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  --cai-r: 12px;
  /* Form-field outline: ≥3:1 against the surface in both apps and themes (the hairline token alone vanished in the pipeline's dark theme). */
  --cai-field-border: color-mix(in srgb, var(--cai-ink-3) 45%, var(--cai-border-2));
  --cai-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 12px 32px -12px rgba(15, 23, 42, .18);
}
[data-theme="dark"] {
  --cai-brand-ink: #ff8595;
  --cai-good: #4ade80;
  --cai-warn: #fbbf24;
  --cai-bad: #f87171;
  --cai-violet: #a78bfa;
  --cai-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 16px 40px -12px rgba(0, 0, 0, .6);
}

/* Visually hidden, still read aloud. Pinned to the top-left of its box and clipped to nothing, so it can never
   add scrollable area to the page (it used to sit far down the AI settings page and scroll it ~350px). */
.cai-sr { position: absolute !important; left: 0; top: 0; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
th:has(> .cai-sr), td:has(> .cai-sr), label:has(> .cai-sr) { position: relative; }
.cai-muted { color: var(--cai-ink-3); }
.cai-pad { padding: 16px; }
.cai-ok-t { color: var(--cai-good); }
.cai-warn-t { color: var(--cai-warn); }
.cai-err-t { color: var(--cai-bad); }

.cai-mark { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 7px;
  color: #fff; background: var(--cai-brand); flex: none; }
.cai-mark svg { width: 14px; height: 14px; }
.cai-mark.lg { width: 40px; height: 40px; border-radius: 12px; }
.cai-mark.lg svg { width: 24px; height: 24px; }

/* ── buttons ─────────────────────────────────────────────────────────────── */
.cai-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: var(--r-btn, 9px); border: 1px solid transparent;
  background: var(--cai-brand); color: #fff; font: 600 13px/1 var(--cai-font); cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: opacity .15s ease, transform .15s ease; }
.cai-btn:hover { opacity: .9; }
.cai-btn:active { transform: translateY(1px); }
.cai-btn:disabled { opacity: .5; cursor: default; }
.cai-btn svg { width: 14px; height: 14px; }
.cai-btn.sm { height: 28px; padding: 0 10px; font-size: 12px; }
.cai-btn.ghost { background: transparent; color: var(--cai-ink); border-color: var(--cai-border-2); }
.cai-btn.ghost:hover { background: var(--cai-surface-2); opacity: 1; }
.cai-btn.danger { color: var(--cai-bad); }
.cai-ib { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; border: 0;
  background: transparent; color: var(--cai-ink-2); cursor: pointer; flex: none; }
.cai-ib:hover { background: var(--cai-surface-2); color: var(--cai-ink); }
.cai-ib svg { width: 16px; height: 16px; }
/* Doubled class: both apps style bare links/buttons, and the link must look the same everywhere. */
.cai-link.cai-link { background: none; border: 0; padding: 0; color: var(--cai-accent); font: 600 12.5px/1.2 var(--cai-font); cursor: pointer;
  text-decoration: none; white-space: nowrap; box-shadow: none; }
.cai-link.cai-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.cai-btn:focus-visible, .cai-ib:focus-visible, .cai-link:focus-visible, .cai-launch:focus-visible,
.cai-suggest button:focus-visible, .cai-copen:focus-visible, .cai-newchat:focus-visible, .cai-more:focus-visible, .cai-msg-actions button:focus-visible {
  outline: 2px solid var(--cai-accent); outline-offset: 2px; }

/* ── launcher ────────────────────────────────────────────────────────────── */
/* The primary action in both top bars: solid CAA red (#c8102e, the audit brand red, in both apps and both themes),
   white label and sparkle. Flat: no gradient, no glow (pipeline rule). */
.cai-launch { --cai-launch: #c8102e; position: relative; display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px 0 10px;
  border-radius: var(--r-btn, 9px); border: 1px solid var(--cai-launch); background: var(--cai-launch); color: #fff; font: 600 12.5px/1 var(--cai-font);
  cursor: pointer; white-space: nowrap; box-shadow: 0 1px 2px rgba(15, 23, 42, .12); transition: background-color .15s ease, border-color .15s ease, transform .15s ease; }
.cai-launch svg { width: 15px; height: 15px; color: #fff; }
.cai-launch:hover { background: color-mix(in srgb, var(--cai-launch) 88%, black); border-color: color-mix(in srgb, var(--cai-launch) 88%, black); }
.cai-launch:active { transform: translateY(1px); }
.cai-launch[hidden] { display: none; }
/* One-time attention cue per browser session (caa-ai.js adds .cai-attn): a thin ring that grows and fades, three times.
   Animates transform + opacity only; nothing under reduced motion. */
.cai-launch::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 2px solid var(--cai-launch);
  opacity: 0; pointer-events: none; }
.cai-launch.cai-attn::after { animation: cai-ring 1.7s cubic-bezier(.2, .7, .3, 1) .6s 3; }
@keyframes cai-ring { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(1.18, 1.45); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cai-launch.cai-attn::after { animation: none; } }
/* Icon-only below 1280px so the launcher never pushes a top bar onto a second line; the name stays in the
   tooltip and aria-label. (The old rule hid the icon span too, leaving an empty button.) */
@media (max-width: 1279.98px) { .cai-launch > span:not(.cai-ai-ico) { display: none; } .cai-launch { width: 32px; padding: 0; justify-content: center; flex: none; } }

/* ── drawer ──────────────────────────────────────────────────────────────── */
/* Width: ~640px on wide screens (420px floor), a remembered drag width (--cai-dw), or wide mode; never more than
   70% of the screen. Phones get the whole screen (below). */
.cai-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: var(--cai-dw, clamp(420px, 42vw, 640px)); max-width: max(380px, 70vw);
  z-index: 1150; display: flex; flex-direction: column;
  background: var(--cai-surface); color: var(--cai-ink); border-left: 1px solid var(--cai-border); box-shadow: var(--cai-shadow);
  font: 14px/1.55 var(--cai-font); transform: translateX(104%); visibility: hidden;
  transition: transform .26s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .26s; }
.cai-drawer.open { transform: none; visibility: visible; transition: transform .26s cubic-bezier(.2, .8, .2, 1), visibility 0s; }
@media (prefers-reduced-motion: reduce) { .cai-drawer, .cai-drawer.open { transition: none; } }
.cai-drawer.wide { width: min(960px, 70vw); }
.cai-drawer.resizing { transition: none; user-select: none; }
/* Slim drag handle on the left edge: a hairline that thickens on hover/focus; 8px hit area. */
.cai-resize { position: absolute; left: -4px; top: 0; bottom: 0; width: 8px; z-index: 2; cursor: col-resize; touch-action: none; outline: 0; }
.cai-resize::after { content: ""; position: absolute; left: 3px; top: 0; bottom: 0; width: 2px; background: transparent; transition: background .15s ease; }
.cai-resize:hover::after, .cai-drawer.resizing .cai-resize::after { background: var(--cai-border-2); }
.cai-resize:focus-visible::after { background: var(--cai-accent); }
.cai-dh, .cai-composer, .cai-foot { flex: none; }
.cai-dh { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 12px 12px 16px; border-bottom: 1px solid var(--cai-border); }
.cai-dh-t { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cai-dh-t b { display: block; font-size: 14px; }
.cai-dh-t small { display: block; font-size: 11.5px; color: var(--cai-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cai-dh-a { display: flex; gap: 2px; }
.cai-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 16px 18px; overscroll-behavior: contain; }
.cai-foot { padding: 0 16px 10px; font-size: 11px; color: var(--cai-ink-3); text-align: center; }

.cai-empty { text-align: center; padding: 28px 8px 8px; }
.cai-empty h3 { margin: 14px 0 6px; font-size: 17px; font-weight: 650; letter-spacing: -.01em; }
.cai-empty p { margin: 0 auto 18px; max-width: 46ch; color: var(--cai-ink-2); font-size: 13.5px; }
.cai-suggest { display: grid; gap: 8px; text-align: left; }
.cai-suggest button { border: 1px solid var(--cai-border); background: var(--cai-surface); color: var(--cai-ink); border-radius: 10px;
  padding: 10px 12px; font: 500 13px/1.4 var(--cai-font); cursor: pointer; text-align: left; transition: border-color .15s ease, background .15s ease; }
.cai-suggest button:hover { border-color: var(--cai-border-2); background: var(--cai-surface-2); }

.cai-msg { margin: 0 0 18px; }
.cai-msg.user { display: flex; justify-content: flex-end; }
.cai-bubble { max-width: 85%; background: var(--cai-surface-3); border-radius: 14px 14px 4px 14px; padding: 9px 13px; font-size: 13.5px; overflow-wrap: anywhere; }
.cai-content { font-size: 13.5px; overflow-wrap: anywhere; }
.cai-content p { margin: 0 0 10px; }
.cai-content h3, .cai-content h4, .cai-content h5 { margin: 16px 0 6px; font-size: 14px; font-weight: 650; }
.cai-content h3 { font-size: 15.5px; }
.cai-content ul, .cai-content ol { margin: 0 0 10px; padding-left: 20px; }
.cai-content li { margin: 2px 0; }
.cai-content code { font: 12px var(--cai-mono); background: var(--cai-surface-2); border: 1px solid var(--cai-border); border-radius: 5px; padding: 0 4px; }
.cai-content pre { background: var(--cai-surface-2); border: 1px solid var(--cai-border); border-radius: 8px; padding: 10px; overflow: auto; }
.cai-content pre code { border: 0; padding: 0; background: none; }
.cai-content a { color: var(--cai-accent); }
.cai-content hr { border: 0; border-top: 1px solid var(--cai-border); margin: 14px 0; }
.cai-tablewrap { overflow-x: auto; margin: 6px 0 12px; }
.cai-content table, .cai-admin table { border-collapse: collapse; width: 100%; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.cai-content th, .cai-content td, .cai-admin th, .cai-admin td { padding: 6px 8px; border-bottom: 1px solid var(--cai-border); text-align: left; white-space: nowrap; }
.cai-content th, .cai-admin th { color: var(--cai-ink-2); font-weight: 600; font-size: 11.5px; }
.cai-content td.n, .cai-content .al-r { text-align: right; }
.cai-content .al-c { text-align: center; }
/* Prose keeps a readable measure however wide the panel is; tables, charts and code use the full width. */
.cai-content > p, .cai-content > ul, .cai-content > ol, .cai-content > h3, .cai-content > h4, .cai-content > h5 { max-width: 78ch; }
.cai-empty .cai-suggest { max-width: 560px; margin: 0 auto; }
/* Fresh chat: greeting, what the bot does, whose data, then "Ask" / "Build a report" / "Recent conversations". */
.cai-empty p.cai-scope { display: inline-flex; align-items: center; gap: 6px; margin: -6px auto 22px; padding: 4px 10px; max-width: none;
  border-radius: 999px; background: var(--cai-surface-2); border: 1px solid var(--cai-border); font-size: 12px; color: var(--cai-ink-2); }
.cai-empty .cai-scope svg { width: 13px; height: 13px; flex: none; }
.cai-egroup { max-width: 560px; margin: 0 auto 18px; text-align: left; }
.cai-egroup h4 { margin: 0 0 8px; font: 600 12px/1.2 var(--cai-font); letter-spacing: 0; text-transform: none; color: var(--cai-ink-3); }
.cai-egroup .cai-suggest { max-width: none; }
.cai-suggest button { display: flex; align-items: center; gap: 9px; }
.cai-reports { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.cai-suggest .cai-rchip { font-weight: 600; }
.cai-suggest .cai-rchip svg { width: 16px; height: 16px; flex: none; color: var(--cai-brand-ink); }
.cai-recent .cai-clist { overflow: visible; margin: 0; padding: 0; gap: 0; border: 1px solid var(--cai-border); border-radius: 10px; }
.cai-recent .cai-crow { border-radius: 0; border-top: 1px solid var(--cai-border); }
.cai-recent .cai-crow:first-child { border-top: 0; border-radius: 10px 10px 0 0; }
.cai-recent .cai-crow:last-child { border-radius: 0 0 10px 10px; }
.cai-recent .cai-crow:only-child { border-radius: 10px; }
.cai-recent .cai-cmore { display: none; }
.cai-bubble { max-width: min(85%, 68ch); }
.cai-tablewrap > table { width: auto; min-width: 100%; }

.cai-tools { font-size: 12px; color: var(--cai-ink-3); margin-bottom: 6px; }
.cai-tools summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.cai-tools summary::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cai-good); }
.cai-tools summary::-webkit-details-marker { display: none; }
.cai-tools ul { margin: 6px 0 0; padding-left: 16px; }
.cai-tools li.err { color: var(--cai-warn); }
.cai-working { display: flex; flex-wrap: wrap; gap: 6px; }
.cai-working span { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; background: var(--cai-surface-2); border: 1px solid var(--cai-border); }
.cai-working span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cai-accent); animation: cai-pulse 1s ease-in-out infinite; }
.cai-typing { display: inline-flex; gap: 4px; padding: 6px 0; }
.cai-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--cai-ink-3); animation: cai-pulse 1s ease-in-out infinite; }
.cai-typing i:nth-child(2) { animation-delay: .15s; } .cai-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes cai-pulse { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cai-typing i, .cai-working span::before, .cai-skel i { animation: none; } }
.cai-error { margin-top: 6px; padding: 8px 10px; border-radius: 8px; background: color-mix(in srgb, var(--cai-bad) 10%, transparent); color: var(--cai-bad); font-size: 13px; }
.cai-msg-actions { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.cai-msg-actions button { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px; border: 0; border-radius: 7px; background: transparent;
  color: var(--cai-ink-3); font: 500 12px var(--cai-font); cursor: pointer; }
.cai-msg-actions button:hover { background: var(--cai-surface-2); color: var(--cai-ink); }
.cai-msg-actions svg { width: 13px; height: 13px; }
/* Copy and "Export PDF" are labelled, bordered buttons; on a report-length answer "Export PDF" is the strong one. */
.cai-msg-actions .cai-act { border: 1px solid var(--cai-border); color: var(--cai-ink-2); font-weight: 600; }
.cai-msg-actions .cai-act:hover { border-color: var(--cai-field-border); }
.cai-msg-actions .cai-act-strong { background: var(--cai-brand); border-color: var(--cai-brand); color: #fff; }  /* brand red + white in both themes (was ink → white in dark) */
.cai-msg-actions .cai-act-strong:hover { background: var(--cai-brand); border-color: var(--cai-brand); color: #fff; opacity: .9; }
.cai-meta { margin-left: auto; font-size: 11px; color: var(--cai-ink-3); }

.cai-charts:empty { display: none; }
.cai-model:empty { display: none; }
.cai-chart { margin: 8px 0 12px; padding: 12px; border: 1px solid var(--cai-border); border-radius: 10px; }
.cai-chart figcaption { font-weight: 600; font-size: 13px; margin-bottom: 8px; }
.cai-chart-canvas { position: relative; height: 220px; }
.cai-chart-note { margin-top: 6px; font-size: 11.5px; color: var(--cai-ink-3); }

.cai-composer { display: flex; align-items: flex-end; gap: 8px; margin: 0 12px 8px; padding: 6px 6px 6px 12px; border: 1px solid var(--cai-field-border);
  border-radius: 14px; background: var(--cai-surface); transition: border-color .15s ease; }
.cai-composer:focus-within { border-color: var(--cai-accent); }
.cai-composer textarea { flex: 1; border: 0; outline: 0; resize: none; background: transparent; color: var(--cai-ink); font: 14px/1.5 var(--cai-font);
  padding: 6px 0; max-height: 180px; }
.cai-composer textarea:disabled { opacity: .5; }
.cai-send { width: 34px; height: 34px; border-radius: 10px; border: 0; background: var(--cai-brand); color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; flex: none; }
.cai-send svg { width: 16px; height: 16px; }
.cai-drawer.busy .cai-send { background: var(--cai-bad); color: #fff; }

/* ── two columns when the panel is wide: past conversations | chat ───────────────────────────────── */
.cai-drawer { container: caibot / inline-size; }
.cai-split { flex: 1 1 auto; min-height: 0; display: flex; }
.cai-chat { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.cai-side { display: none; flex: 0 0 264px; min-width: 0; max-width: 264px; min-height: 0; flex-direction: column; gap: 8px; padding: 12px 10px 10px;
  border-right: 1px solid var(--cai-border); background: var(--cai-surface-2); }
@container caibot (min-width: 760px) {
  .cai-side { display: flex; }
  .cai-hist-btn { display: none; }
}
.cai-newchat { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 9px;
  border: 1px solid var(--cai-field-border); background: var(--cai-surface); color: var(--cai-ink); font: 600 13px/1 var(--cai-font); cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease; }
.cai-newchat svg { width: 14px; height: 14px; }
.cai-newchat:hover { border-color: var(--cai-accent); }
.cai-newchat.sm { height: 28px; font-size: 12px; padding: 0 10px; }
.cai-search { position: relative; display: block; }
.cai-search input { width: 100%; box-sizing: border-box; height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--cai-field-border);
  background: var(--cai-surface); color: var(--cai-ink); font: 13px var(--cai-font); }
.cai-search input::placeholder { color: var(--cai-ink-3); }
.cai-search input:focus { outline: 2px solid var(--cai-accent); outline-offset: 0; border-color: transparent; }
.cai-clist { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; margin: 0 -4px; padding: 0 4px; }
.cai-cgroup { margin: 12px 6px 4px; font: 600 12px/1.2 var(--cai-font); letter-spacing: 0; text-transform: none; color: var(--cai-ink-3); }
.cai-cgroup:first-child { margin-top: 2px; }
.cai-crow { position: relative; display: flex; align-items: center; gap: 2px; border-radius: 8px; min-height: 44px; flex: none; }
.cai-crow:hover { background: color-mix(in srgb, var(--cai-ink) 5%, transparent); }
.cai-crow.on { background: color-mix(in srgb, var(--cai-accent) 12%, transparent); }
.cai-crow.on::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--cai-accent); }
.cai-copen { flex: 1; min-width: 0; text-align: left; border: 0; background: none; padding: 7px 4px 7px 10px; cursor: pointer; color: var(--cai-ink); border-radius: 8px; }
.cai-copen b { display: block; font: 600 13px/1.35 var(--cai-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cai-copen small { display: block; font-size: 11.5px; color: var(--cai-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cai-cmore { width: 28px; height: 28px; opacity: 0; transition: opacity .12s ease; }
.cai-crow:hover .cai-cmore, .cai-crow.on .cai-cmore, .cai-cmore:focus-visible, .cai-cmore[aria-expanded=true] { opacity: 1; }
.cai-cmenu { position: absolute; right: 4px; top: calc(100% - 4px); z-index: 5; min-width: 140px; padding: 4px; display: grid; gap: 1px;
  background: var(--cai-surface); border: 1px solid var(--cai-border); border-radius: 10px; box-shadow: var(--cai-shadow); }
.cai-cmenu button { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border: 0; border-radius: 7px; background: none;
  color: var(--cai-ink); font: 500 13px var(--cai-font); cursor: pointer; text-align: left; }
.cai-cmenu button svg { width: 14px; height: 14px; }
.cai-cmenu button:hover, .cai-cmenu button:focus-visible { background: var(--cai-surface-2); outline: 0; }
.cai-cmenu button.danger { color: var(--cai-bad); }
.cai-crow.renaming, .cai-crow.confirming { flex-wrap: wrap; gap: 6px; padding: 8px; background: var(--cai-surface); border: 1px solid var(--cai-border); }
.cai-crename { flex: 1 1 100%; height: 30px; padding: 0 8px; border-radius: 7px; border: 1px solid var(--cai-field-border); background: var(--cai-surface);
  color: var(--cai-ink); font: 13px var(--cai-font); box-sizing: border-box; }
.cai-crename:focus { outline: 2px solid var(--cai-accent); outline-offset: 0; border-color: transparent; }
.cai-cconfirm { flex: 1 1 100%; font-size: 12.5px; color: var(--cai-ink); overflow-wrap: anywhere; }
.cai-crow.renaming .cai-btn, .cai-crow.confirming .cai-btn { flex: 1 1 0; justify-content: center; }
.cai-btn.cai-danger-btn { background: #b91c1c; border-color: #b91c1c; color: #fff; }   /* fixed dark red: white text stays ≥4.5:1 in both themes */
.cai-cempty { margin: 8px 6px; font-size: 12.5px; color: var(--cai-ink-3); }
.cai-owner { margin: 4px 6px 0; padding-top: 8px; border-top: 1px solid var(--cai-border); font-size: 11.5px; color: var(--cai-ink-3); }
/* Narrow panel: the same list as a full view (header button "Past conversations"). */
.cai-history { display: flex; flex-direction: column; gap: 10px; }
.cai-hhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cai-history h4 { margin: 0; font-size: 14px; color: var(--cai-ink); font-weight: 650; }
.cai-history .cai-clist { overflow: visible; }

@media (max-width: 719.98px) {
  .cai-drawer, .cai-drawer.wide { width: 100vw; max-width: 100vw; border-left: 0; }
  .cai-resize, .cai-wide-btn { display: none; }
}

/* ── insight card ────────────────────────────────────────────────────────── */
.cai-insight-host { display: block; }
.cai-insight-host:empty { display: none; }
.cai-insight { position: relative; margin: 0 0 16px; padding: 14px 16px 12px; background: var(--cai-surface); color: var(--cai-ink);
  border: 1px solid var(--cai-border); border-radius: var(--cai-r); font: 13.5px/1.5 var(--cai-font); }
.cai-insight::before { content: ""; position: absolute; left: -1px; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--cai-brand); }
.cai-insight.compact { padding: 10px 14px; }
.cai-insight:empty { display: none; }   /* nothing to show yet (checking the cache) — no empty frame */
.cai-ih { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 28px; }
.cai-it { font-weight: 650; font-size: 13.5px; }
.cai-ih .cai-muted, .cai-ih .cai-err-t { font-size: 12.5px; }
.cai-ih .cai-btn, .cai-ih > .cai-link { margin-left: auto; }
.cai-ih-a { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.cai-headline { margin: 8px 0 10px; font-size: 15px; font-weight: 600; letter-spacing: -.005em; }
.cai-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.cai-items li { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 8px 0; border-top: 1px solid var(--cai-border); }
.cai-items li:first-child { border-top: 0; }
.cai-items.collapsed li:nth-child(n+4) { display: none; }
.cai-items b { display: block; font-weight: 600; font-size: 13.5px; }
.cai-items span:not(.cai-kind) { display: block; color: var(--cai-ink-2); font-size: 13px; }
.cai-items em { display: block; font-style: normal; color: var(--cai-ink); font-size: 12.5px; margin-top: 2px; }
.cai-kind { align-self: start; justify-self: start; font: 600 11px/1 var(--cai-font); padding: 4px 8px; border-radius: 999px; letter-spacing: .01em;
  color: var(--cai-ink-2); background: var(--cai-surface-2); border: 1px solid var(--cai-border); }
.k-risk .cai-kind { color: var(--cai-bad); border-color: color-mix(in srgb, var(--cai-bad) 35%, transparent); }
.k-anomaly .cai-kind { color: var(--cai-violet); border-color: color-mix(in srgb, var(--cai-violet) 35%, transparent); }
.k-attention .cai-kind { color: var(--cai-warn); border-color: color-mix(in srgb, var(--cai-warn) 35%, transparent); }
.k-win .cai-kind, .k-opportunity .cai-kind { color: var(--cai-good); border-color: color-mix(in srgb, var(--cai-good) 35%, transparent); }
.k-trend .cai-kind { color: var(--cai-accent); border-color: color-mix(in srgb, var(--cai-accent) 35%, transparent); }
.s-high b::after { content: " · high"; color: var(--cai-bad); font-weight: 500; font-size: 11.5px; }
.cai-more { margin-top: 6px; border: 0; background: none; color: var(--cai-accent); font: 600 12.5px var(--cai-font); cursor: pointer; padding: 0; }
.cai-ifoot { margin-top: 8px; font-size: 11px; color: var(--cai-ink-3); }
.cai-skel { display: grid; gap: 8px; margin-top: 12px; }
.cai-skel i { display: block; height: 12px; border-radius: 6px; background: var(--cai-surface-2); animation: cai-pulse 1.2s ease-in-out infinite; }
.cai-skel i:nth-child(2) { width: 85%; } .cai-skel i:nth-child(3) { width: 60%; }
@media (max-width: 640px) { .cai-items li { grid-template-columns: 1fr; gap: 4px; } }

/* ── AI settings (admin) ─────────────────────────────────────────────────── */
.cai-admin { font: 13.5px/1.5 var(--cai-font); color: var(--cai-ink); width: 100%; }
.cai-banner { padding: 12px 14px; border-radius: 10px; border: 1px solid var(--cai-border); background: var(--cai-surface-2); }
.cai-banner.err { border-color: color-mix(in srgb, var(--cai-bad) 35%, transparent); }
.cai-a-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 12px; margin-bottom: 16px; }
.cai-kpi { padding: 14px 16px; border: 1px solid var(--cai-border); border-radius: var(--cai-r); background: var(--cai-surface); display: grid; gap: 4px; }
.cai-kpi > span { font-size: 12px; color: var(--cai-ink-2); font-weight: 600; }
.cai-kpi b { font-size: 20px; font-weight: 650; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.cai-kpi small { font-size: 12px; color: var(--cai-ink-3); }
.cai-meter { height: 6px; border-radius: 3px; background: var(--cai-surface-3); overflow: hidden; margin-top: 4px; }
.cai-meter i { display: block; height: 100%; background: var(--cai-good); }
.cai-meter i.warn { background: var(--cai-warn); } .cai-meter i.bad { background: var(--cai-bad); }
.cai-pill { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font: 600 12px/1 var(--cai-font);
  border: 1px solid var(--cai-border); color: var(--cai-ink-2); background: var(--cai-surface-2); }
.cai-pill.ok { color: var(--cai-good); border-color: color-mix(in srgb, var(--cai-good) 35%, transparent); }
.cai-pill.warn { color: var(--cai-warn); border-color: color-mix(in srgb, var(--cai-warn) 35%, transparent); }
.cai-pill.bad { color: var(--cai-bad); border-color: color-mix(in srgb, var(--cai-bad) 35%, transparent); }
.cai-sec { padding: 18px 20px; border: 1px solid var(--cai-border); border-radius: var(--cai-r); background: var(--cai-surface); margin-bottom: 14px; }
.cai-sec h3 { margin: 0 0 2px; font-size: 15px; font-weight: 650; }
.cai-help { margin: 0 0 14px; font-size: 12.5px; color: var(--cai-ink-3); }
.cai-sec .cai-help:last-child { margin-bottom: 0; margin-top: 10px; }
.cai-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 16px; }
.cai-field { display: grid; gap: 5px; }
.cai-field > span { font-size: 12px; font-weight: 600; color: var(--cai-ink-2); }
.cai-field > span + select, .cai-field > span + input { margin-top: auto; }
.cai-admin input:not([type=checkbox]):not([type=radio]):not([type=range]), .cai-admin select {
  height: 36px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--cai-field-border); background: var(--cai-surface); color: var(--cai-ink);
  font: 13.5px var(--cai-font); min-width: 0; width: 100%; box-sizing: border-box; }
.cai-admin input::placeholder { color: var(--cai-ink-3); opacity: 1; }
.cai-admin input:focus, .cai-admin select:focus { outline: 2px solid var(--cai-accent); outline-offset: 1px; border-color: transparent; }
.cai-keyrow { display: grid; grid-template-columns: minmax(180px, 260px) 1fr; gap: 16px; align-items: start; }
.cai-keycur { display: grid; gap: 4px; }
.cai-keycur code { font: 600 14px var(--cai-mono); color: var(--cai-ink); background: none; padding: 0; }
.cai-keycur small { font-size: 12px; color: var(--cai-ink-3); }
.cai-keyset { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* The key box gets its own full-width line and the buttons sit together under it, so "Remove" never wraps alone. */
.cai-keyset input { flex: 1 1 100%; width: auto !important; font-family: var(--cai-mono) !important; text-overflow: ellipsis; }
.cai-keyset .cai-btn { height: 36px; flex: none; }
@media (max-width: 760px) { .cai-keyrow { grid-template-columns: 1fr; } }
.cai-toggles { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 8px 16px; margin: 12px 0; }
.cai-toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 12px; border: 1px solid var(--cai-border); border-radius: 10px; cursor: pointer; }
.cai-toggle b { display: block; font-weight: 600; font-size: 13px; }
.cai-toggle small { display: block; font-size: 12px; color: var(--cai-ink-3); }
.cai-switch { position: relative; display: inline-block; width: 36px; height: 20px; flex: none; }
.cai-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; width: 100%; height: 100%; }
.cai-switch span { position: absolute; inset: 0; border-radius: 999px; background: color-mix(in srgb, var(--cai-ink-3) 45%, transparent); transition: background .15s ease; }
.cai-switch span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s ease; }
.cai-switch input:checked + span { background: var(--cai-good); }
.cai-switch input:checked + span::after { transform: translateX(16px); }
.cai-switch input:focus-visible + span { outline: 2px solid var(--cai-accent); outline-offset: 2px; }
.cai-matrix td { text-align: center; } .cai-matrix th:first-child { text-align: left; }
.cai-pricing input { height: 32px !important; }
.cai-pricing td { padding: 4px 6px; }
/* In the page flow normally; it floats at the bottom of the screen ONLY while there are unsaved changes,
   so it never sits on top of a table for no reason. */
.cai-savebar { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin: 0 0 14px;
  padding: 10px 12px; border: 1px solid var(--cai-border); border-radius: var(--cai-r); background: var(--cai-surface); }
.cai-savebar.dirty { position: sticky; bottom: 12px; z-index: 5; box-shadow: var(--cai-shadow); border-color: var(--cai-warn); }
.cai-usage-h { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.cai-usage-h label { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--cai-ink-2); }
.cai-usage-h select { width: auto !important; }
.cai-bars { display: flex; align-items: flex-end; gap: 3px; height: 120px; padding: 0 0 18px; border-bottom: 1px solid var(--cai-border); margin-bottom: 14px; overflow-x: auto; }
.cai-bar { flex: 1 0 14px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; }
.cai-bar i { display: block; width: 100%; max-width: 22px; background: var(--cai-accent); border-radius: 3px 3px 0 0; }
.cai-bar span { position: absolute; bottom: -17px; font-size: 9.5px; color: var(--cai-ink-3); white-space: nowrap; }
.cai-bar:not(:nth-child(4n+1)) span { visibility: hidden; }
.cai-usage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.cai-mini h4 { margin: 0 0 4px; font-size: 13px; }
/* Usage tables: headers may wrap and cells sit a little tighter, so "By model" fits its column instead of scrolling. */
.cai-mini th { white-space: normal; vertical-align: bottom; }
.cai-mini th, .cai-mini td { padding: 6px 6px; }
.cai-mini th:first-child, .cai-mini td:first-child { padding-left: 0; }
.cai-mini td:first-child { white-space: normal; overflow-wrap: anywhere; min-width: 9ch; }
.cai-mini.wide { margin-top: 14px; }

/* Settings: full width; on wide screens the sections flow into two balanced columns (order kept). */
.cai-cols > .cai-sec { break-inside: avoid; }
@media (min-width: 1400px) {
  .cai-cols { column-count: 2; column-gap: 14px; }
  .cai-cols > .cai-sec { display: inline-block; width: 100%; }
  .cai-cols .cai-toggles { grid-template-columns: 1fr; }
}
/* The API key field: a plain text box masked by CSS, so browsers never treat it as a login form. */
.cai-secret { -webkit-text-security: disc; font-family: var(--cai-mono) !important; letter-spacing: .06em; }
.cai-secret::placeholder { letter-spacing: normal; }

/* ── the AI badge (everything AI-generated carries it) ─────────────────────────────────────────── */
.cai-ai { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px 0 5px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--cai-brand) 40%, transparent); color: var(--cai-brand-ink);
  background: color-mix(in srgb, var(--cai-brand) 8%, var(--cai-surface)); font: 700 10.5px/1 var(--cai-font);
  letter-spacing: .04em; white-space: nowrap; vertical-align: middle; flex: none; }
.cai-ai svg { width: 12px; height: 12px; transform-origin: 50% 55%; animation: cai-ai-shake 4.5s ease-in-out infinite; }
.cai-ai b { font-weight: 700; }
.cai-launch .cai-ai-ico { display: inline-flex; }
.cai-launch .cai-ai-ico svg { transform-origin: 50% 55%; animation: cai-ai-shake 4.5s ease-in-out infinite; }
.cai-dh-t b { display: inline-flex; align-items: center; gap: 8px; }
.cai-msg-actions .cai-ai { margin-right: 4px; }
/* A short shake, then rest — noticeable, not distracting (requested by the user, 21 Oct 2026). */
@keyframes cai-ai-shake {
  0%, 82%, 100% { transform: rotate(0) scale(1); }
  85% { transform: rotate(-16deg) scale(1.15); }
  88% { transform: rotate(14deg) scale(1.15); }
  91% { transform: rotate(-10deg) scale(1.1); }
  94% { transform: rotate(6deg) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) { .cai-ai svg, .cai-launch .cai-ai-ico svg { animation: none; } }

/* ── Advanced · Model prices (read-only list; editing is a deliberate step) ─────────────────────── */
.cai-adv > summary { list-style: none; cursor: pointer; display: grid; gap: 2px; padding-right: 28px; position: relative; }
.cai-adv > summary::-webkit-details-marker { display: none; }
.cai-adv > summary::after { content: ""; position: absolute; right: 4px; top: 6px; width: 8px; height: 8px; border-right: 2px solid var(--cai-ink-3);
  border-bottom: 2px solid var(--cai-ink-3); transform: rotate(45deg); transition: transform .15s ease; }
.cai-adv[open] > summary::after { transform: rotate(225deg); top: 10px; }
.cai-adv > summary .cai-help { margin: 0; }
.cai-adv[open] > summary { margin-bottom: 14px; }
.cai-prices { display: grid; gap: 8px; }
.cai-price { padding: 10px 12px; border: 1px solid var(--cai-border); border-radius: 10px; }
.cai-price-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cai-price-h b { font-weight: 600; }
.cai-price-h code { font: 11.5px var(--cai-mono); color: var(--cai-ink-3); }
.cai-price-h .cai-pill { height: 20px; font-size: 11px; }
.cai-price-v { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 4px; font-size: 12.5px; color: var(--cai-ink-2); }
.cai-price-v b { color: var(--cai-ink); font-variant-numeric: tabular-nums; }
.cai-price-e { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin-top: 8px; }
.cai-price-e .cai-field { min-width: 180px; flex: 1 1 200px; }
.cai-money { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 4px; font-size: 12px; color: var(--cai-ink-2); }
.cai-money > span { grid-column: 1 / -1; font-weight: 600; margin-bottom: 4px; }
.cai-money > i { font-style: normal; color: var(--cai-ink-3); }
.cai-money input { width: 96px !important; }
.cai-price-lock { font-size: 12px; }
.cai-price-add { margin-top: 12px; padding: 12px; border: 1px dashed var(--cai-border-2); border-radius: 10px; }
.cai-price-add .cai-help { margin: 2px 0 0; }
.cai-price-bar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.cai-price-bar > span { margin-right: auto; font-size: 12.5px; }

/* ── progress (bot answers and insight cards) ───────────────────────────────────────────────────── */
.cai-progress { padding: 10px 12px; border: 1px solid var(--cai-border); border-radius: 10px; background: var(--cai-surface-2); margin-bottom: 8px; }
.cai-progress.flat { background: none; border: 0; padding: 8px 0 2px; margin: 0; }
.cai-prog-top { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--cai-ink-2); margin-bottom: 6px; }
.cai-prog-top b { color: var(--cai-ink); }
.cai-prog-time { font: 12px var(--cai-mono); color: var(--cai-ink-3); font-variant-numeric: tabular-nums; }
.cai-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cai-steps li { position: relative; padding-left: 20px; font-size: 12.5px; color: var(--cai-ink-3); }
.cai-steps li::before { content: ""; position: absolute; left: 3px; top: 5px; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--cai-border-2); }
.cai-steps li.on { color: var(--cai-ink); font-weight: 600; }
.cai-steps li.on::before { border-color: var(--cai-accent); background: var(--cai-accent); animation: cai-pulse 1s ease-in-out infinite; }
.cai-steps li.done { color: var(--cai-ink-2); }
.cai-steps li.done::before { border-color: var(--cai-good); background: var(--cai-good); }
.cai-prog-src { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.cai-prog-src:empty { display: none; }
.cai-prog-src em { font-style: normal; font-weight: 500; font-size: 11.5px; padding: 1px 7px; border-radius: 999px; background: var(--cai-surface); border: 1px solid var(--cai-border); color: var(--cai-ink-2); }
.cai-prog-bar { position: relative; height: 3px; border-radius: 2px; overflow: hidden; background: var(--cai-surface-3); margin-top: 8px; }
.cai-prog-bar i { position: absolute; top: 0; bottom: 0; left: 0; width: 35%; border-radius: 2px; background: var(--cai-brand); animation: cai-prog-run 1.3s ease-in-out infinite; }
/* transform only (was animating left), per the pipeline's motion rule. */
@keyframes cai-prog-run { 0% { transform: translateX(-100%); } 100% { transform: translateX(286%); } }
.cai-how { font-size: 11.5px; color: var(--cai-ink-3); margin-bottom: 4px; }
@media (prefers-reduced-motion: reduce) { .cai-prog-bar i { animation: none; transform: none; width: 100%; opacity: .5; } .cai-steps li.on::before { animation: none; } }

/* ── AI explain: the sparkle button beside an ⓘ, and its popover ───────────────────────────────── */
/* Hidden until caa-ai.js confirms the account may use AI insights and AI is on (html.cai-x-on). */
.cai-xbtn { display: none; width: 22px; height: 22px; padding: 0; border-radius: 50%; flex: 0 0 auto; place-items: center; cursor: pointer;
  border: 1px solid var(--cai-border); background: var(--cai-surface); color: var(--cai-ink-3);
  transition: color .15s ease, border-color .15s ease, background-color .15s ease; vertical-align: middle; }
html.cai-x-on .cai-xbtn { display: inline-grid; }
.cai-xbtn svg { width: 12px; height: 12px; }
.cai-xbtn:hover, .cai-xbtn:focus-visible, .cai-xbtn[aria-expanded=true] { color: var(--cai-brand-ink); outline: none;
  border-color: color-mix(in srgb, var(--cai-brand) 45%, transparent); background: color-mix(in srgb, var(--cai-brand) 8%, var(--cai-surface)); }
.cai-xbtn:focus-visible { box-shadow: 0 0 0 2px color-mix(in srgb, var(--cai-brand) 35%, transparent); }
/* Inline (beside a section heading or a record tile's label): the size of an inline ⓘ, no ring. */
.cai-xbtn.inl { width: 18px; height: 18px; margin-left: 4px; border-color: transparent; background: transparent; vertical-align: -3px; }
.cai-xbtn.inl svg { width: 12px; height: 12px; }

.cai-xpop { position: fixed; z-index: 1300; display: flex; flex-direction: column; max-height: calc(100vh - 24px); overflow: hidden;
  background: var(--cai-surface); color: var(--cai-ink); border: 1px solid var(--cai-border); border-radius: var(--cai-r);
  box-shadow: var(--cai-shadow); font: 13px/1.5 var(--cai-font); outline: none; animation: cai-xp-in .14s ease-out; }
.cai-xpop.up { animation-name: cai-xp-in-up; }
@keyframes cai-xp-in { from { opacity: 0; transform: translateY(-4px); } }
@keyframes cai-xp-in-up { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .cai-xpop { animation: none; } }
.cai-xp-h { display: flex; align-items: flex-start; gap: 8px; padding: 10px 8px 10px 12px; border-bottom: 1px solid var(--cai-border); flex: none; }
.cai-xp-h .cai-ai { margin-top: 1px; }
.cai-xp-t { flex: 1; min-width: 0; }
.cai-xp-t b { display: block; font-size: 13.5px; font-weight: 650; line-height: 1.35; overflow-wrap: anywhere; }
.cai-xp-t small { display: block; font-size: 11.5px; color: var(--cai-ink-3); }
.cai-xp-x { width: 26px; height: 26px; margin: -2px 0 0; }
.cai-xp-b { padding: 10px 14px 12px; overflow-y: auto; overscroll-behavior: contain; }
.cai-xp-b .cai-progress.flat { padding-top: 2px; }
.cai-xp-head { margin: 0 0 8px; font-weight: 650; font-size: 13.5px; line-height: 1.45; }
.cai-xp-pts { margin: 0 0 10px; padding-left: 18px; }
.cai-xp-pts li { margin: 3px 0; color: var(--cai-ink-2); }
.cai-xp-note { display: grid; gap: 1px; margin: 0 0 8px; padding: 7px 10px; border-radius: 8px; background: var(--cai-surface-2); border: 1px solid var(--cai-border); font-size: 12.5px; }
.cai-xp-note b { font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--cai-ink-3); }
.cai-xp-note.warn b { color: var(--cai-warn); }
.cai-xp-acts { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.cai-xp-acts .cai-btn svg { width: 13px; height: 13px; }
.cai-xp-foot { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--cai-border); font-size: 11px; color: var(--cai-ink-3); }
@media print { .cai-xbtn, .cai-xpop { display: none !important; } }

/* ── "Save my AI history to my account" (Admin / Supervisor, 22 Oct 2026) ── */
.cai-owner .cai-link { font-size: 11.5px; margin-left: 2px; }
.cai-ident { display: flex; flex-direction: column; gap: 12px; padding: 4px 2px; max-width: 520px; }
.cai-ident h4 { margin: 0; font-size: 14px; color: var(--cai-ink); font-weight: 650; }
.cai-ident p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--cai-ink-2, var(--cai-ink)); }
.cai-ident-step { display: flex; flex-direction: column; gap: 10px; }
.cai-ident-step[hidden] { display: none; }
.cai-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--cai-ink-2, var(--cai-ink)); }
.cai-field input { height: 36px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--cai-field-border); background: var(--cai-surface);
  color: var(--cai-ink); font: 14px var(--cai-font); box-sizing: border-box; width: 100%; }
.cai-field input[name=code] { letter-spacing: 6px; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; max-width: 160px; }
.cai-field input:focus { outline: 2px solid var(--cai-accent); outline-offset: 0; border-color: transparent; }
.cai-ident-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cai-ident-msg:empty { display: none; }

/* ── AI settings sub-tabs · friendly Usage report · Conversations (Admin monitoring) — 22 Oct 2026 ── */
.cai-atabs { display: flex; gap: 2px; margin: 0 0 16px; border-bottom: 1px solid var(--cai-border); overflow-x: auto; }
.cai-atab { appearance: none; border: 0; background: none; padding: 10px 14px 9px; margin-bottom: -1px; border-bottom: 2px solid transparent;
  font: 600 13.5px/1.2 var(--cai-font); color: var(--cai-ink-2); cursor: pointer; white-space: nowrap; }
.cai-atab:hover { color: var(--cai-ink); }
.cai-atab[aria-selected="true"] { color: var(--cai-ink); border-bottom-color: var(--cai-brand); }
.cai-atab:focus-visible { outline: 2px solid var(--cai-accent); outline-offset: -2px; border-radius: 6px 6px 0 0; }
.cai-apane[hidden] { display: none; }
.cai-loading { opacity: .55; transition: opacity .15s ease; pointer-events: none; }
.cai-admin td.n, .cai-admin th.n { text-align: right; }
.cai-admin td.cai-wrap { white-space: normal; overflow-wrap: anywhere; }
.cai-sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cai-sec-h h3 { display: inline-flex; align-items: center; gap: 2px; }
.cai-mon-intro { margin: -6px 0 12px; }

/* filters */
.cai-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; margin: 0 0 14px; padding: 12px 14px;
  border: 1px solid var(--cai-border); border-radius: var(--cai-r); background: var(--cai-surface); }
.cai-f { display: grid; gap: 4px; min-width: 130px; }
.cai-f > span { font-size: 11.5px; font-weight: 600; color: var(--cai-ink-2); }
.cai-admin .cai-f select, .cai-admin .cai-f input[type=date], .cai-admin .cai-f input[type=search] { height: 32px; font-size: 13px; }
.cai-f-person { min-width: 200px; }
.cai-f-q { flex: 1 1 220px; }
.cai-f-custom { display: flex; gap: 10px; }
.cai-f-custom[hidden] { display: none; }
.cai-f-chk { display: inline-flex; align-items: center; gap: 7px; min-width: 0; height: 32px; cursor: pointer; }
.cai-f-chk > span { font-size: 13px; font-weight: 500; color: var(--cai-ink); }
.cai-f-chk input { width: 16px; height: 16px; accent-color: var(--cai-brand); margin: 0; }
.cai-f-acts { display: flex; gap: 8px; margin-left: auto; }
.cai-f-acts .cai-btn { height: 32px; }

/* the "i" explanation next to a number */
.cai-i { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; margin: 0 3px; padding: 0;
  border-radius: 50%; border: 1px solid var(--cai-border-2); background: var(--cai-surface); color: var(--cai-ink-3);
  font: italic 700 9.5px/1 Georgia, serif; cursor: help; vertical-align: 2px; flex: none; }
.cai-i:hover, .cai-i:focus-visible, .cai-i.open { color: var(--cai-ink); border-color: var(--cai-ink-3); }
.cai-i:focus-visible { outline: 2px solid var(--cai-accent); outline-offset: 1px; }
.cai-i-pop { position: absolute; z-index: 30; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: max-content; max-width: 280px;
  padding: 8px 10px; border-radius: 8px; background: var(--cai-ink); color: var(--cai-surface); box-shadow: var(--cai-shadow);
  font: normal 400 12px/1.45 var(--cai-font); text-align: left; letter-spacing: 0; text-transform: none; white-space: normal;
  display: none; pointer-events: none; }
.cai-i:hover .cai-i-pop, .cai-i:focus-visible .cai-i-pop, .cai-i.open .cai-i-pop { display: block; }

/* summary + budget gauge */
.cai-usum { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 360px); gap: 18px; align-items: start; margin: 0 0 14px; padding: 18px 20px;
  border: 1px solid var(--cai-border); border-radius: var(--cai-r); background: var(--cai-surface); }
.cai-usum-lead { margin: 0 0 8px; font-size: 16px; line-height: 1.6; }
.cai-usum-sub { margin: 0 0 4px; font-size: 13.5px; color: var(--cai-ink-2); }
.cai-num { font-weight: 700; color: var(--cai-ink); font-variant-numeric: tabular-nums; }
.cai-gauge { padding: 12px 14px; border: 1px solid var(--cai-border); border-radius: 10px; background: var(--cai-surface-2); }
.cai-gauge-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; font-size: 13px; }
.cai-gbar { position: relative; height: 12px; border-radius: 6px; background: var(--cai-surface-3); }
.cai-gbar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; }
.cai-gauge i.used, .cai-gauge .sw.used { background: var(--cai-good); }
.cai-gauge i.proj, .cai-gauge .sw.proj { background: color-mix(in srgb, var(--cai-good) 32%, var(--cai-surface-3)); }
.cai-gauge.g-warn i.used, .cai-gauge.g-warn .sw.used { background: var(--cai-warn); }
.cai-gauge.g-warn i.proj, .cai-gauge.g-warn .sw.proj { background: color-mix(in srgb, var(--cai-warn) 32%, var(--cai-surface-3)); }
.cai-gauge.g-bad i.used, .cai-gauge.g-bad .sw.used { background: var(--cai-bad); }
.cai-gauge.g-bad i.proj, .cai-gauge.g-bad .sw.proj { background: color-mix(in srgb, var(--cai-bad) 32%, var(--cai-surface-3)); }
.cai-gmark { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--cai-ink); border-radius: 1px; }
.cai-gauge .sw { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: 0; }
.cai-gauge .sw.mark { width: 2px; background: var(--cai-ink); border-radius: 1px; }
.cai-gnums { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 12.5px; color: var(--cai-ink-2); }
.cai-gnums b { color: var(--cai-ink); font-variant-numeric: tabular-nums; }
.cai-gauge .cai-help { margin: 8px 0 0; }
.cai-pill.off { color: var(--cai-ink-2); }
.cai-kpi > span { display: flex; align-items: center; }
.cai-kpi.warn b { color: var(--cai-warn); }
.cai-kpi.bad b { color: var(--cai-bad); }

/* charts */
.cai-ugrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 14px; margin: 0 0 14px; }
.cai-ucard { margin: 0; padding: 14px 16px; border: 1px solid var(--cai-border); border-radius: var(--cai-r); background: var(--cai-surface); min-width: 0; }
.cai-ucard figcaption { display: grid; gap: 2px; margin-bottom: 10px; }
.cai-uc-t { display: inline-flex; align-items: center; font-weight: 650; font-size: 14px; }
.cai-take { font-size: 12.5px; color: var(--cai-ink-2); }
.cai-uchart { position: relative; height: 240px; }
.cai-uchart.tall { height: 280px; }
.cai-ucard h4 { display: flex; align-items: center; gap: 2px; margin: 0 0 10px; font-size: 14px; font-weight: 650; }
.cai-ucard h4 .cai-muted { margin-left: auto; font-weight: 500; font-size: 12px; }

/* topics + flags */
.cai-topic { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px 0 7px; border-radius: 999px; border: 1px solid var(--cai-border);
  background: var(--cai-surface); color: var(--cai-ink-2); font: 600 11px/1 var(--cai-font); white-space: nowrap; vertical-align: middle; }
.cai-topic::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--tc, #94a3b8); flex: none; }
button.cai-topic { cursor: pointer; }
button.cai-topic:hover { border-color: var(--cai-border-2); color: var(--cai-ink); }
.cai-topic.t-pipeline_deals { --tc: #2a78d6; }
.cai-topic.t-forecast { --tc: #7c3aed; }
.cai-topic.t-activity_calls { --tc: #0891b2; }
.cai-topic.t-meetings_calendar { --tc: #16a34a; }
.cai-topic.t-emails { --tc: #d97706; }
.cai-topic.t-team_targets { --tc: #db2777; }
.cai-topic.t-reports { --tc: #4f46e5; }
.cai-topic.t-brainstorming { --tc: #65a30d; }
.cai-topic.t-platform { --tc: #64748b; }
.cai-topic.t-security_probing { --tc: #c8102e; color: var(--cai-bad); border-color: color-mix(in srgb, var(--cai-bad) 40%, transparent); }
.cai-topic.t-other { --tc: #94a3b8; }
.cai-topic-keys { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cai-ctopics { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.cai-ctitle .cai-link { text-align: left; font-size: 13px; }
.cai-lk { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font: 700 11px/1 var(--cai-font); white-space: nowrap;
  border: 1px solid var(--cai-border); color: var(--cai-ink-2); background: var(--cai-surface-2); vertical-align: middle; }
.cai-lk.k-probing, .cai-lk.k-error { color: var(--cai-bad); border-color: color-mix(in srgb, var(--cai-bad) 40%, transparent); background: color-mix(in srgb, var(--cai-bad) 8%, var(--cai-surface)); }
.cai-lk.k-refused, .cai-lk.k-limit { color: var(--cai-warn); border-color: color-mix(in srgb, var(--cai-warn) 40%, transparent); background: color-mix(in srgb, var(--cai-warn) 8%, var(--cai-surface)); }
.cai-look { display: flex; flex-direction: column; }
.cai-looks { list-style: none; margin: 0; padding: 0; max-height: 330px; overflow: auto; display: grid; }
.cai-looks li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 9px 0; border-top: 1px solid var(--cai-border); }
.cai-looks li:first-child { border-top: 0; padding-top: 0; }
.cai-lk-b p { margin: 0; font-size: 13px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cai-lk-b small { font-size: 11.5px; color: var(--cai-ink-3); }
.cai-look-empty { margin: 0; }
.cai-pager { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 10px; font-size: 12.5px; }
.cai-people td:first-child, .cai-convs td:first-child { min-width: 14ch; }
.cai-convs td.cai-ctitle { min-width: 24ch; max-width: 46ch; }

/* transcript sheet (read-only) */
.cai-tvwrap { position: fixed; inset: 0; z-index: 1400; font: 14px/1.55 var(--cai-font); color: var(--cai-ink); }
.cai-tv-back { position: absolute; inset: 0; background: rgba(15, 23, 42, .38); }
.cai-tv { position: absolute; top: 0; right: 0; bottom: 0; width: min(980px, 94vw); display: flex; flex-direction: column; background: var(--cai-surface);
  border-left: 1px solid var(--cai-border); box-shadow: var(--cai-shadow); outline: 0; }
.cai-tv-h { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px 12px 20px; border-bottom: 1px solid var(--cai-border); }
.cai-tv-ht { flex: 1; min-width: 0; display: grid; gap: 2px; }
.cai-tv-ht b { font-size: 15.5px; font-weight: 650; overflow-wrap: anywhere; }
.cai-tv-ht small { font-size: 12px; color: var(--cai-ink-3); }
.cai-tv-acts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.cai-tv-acts .cai-btn svg { width: 13px; height: 13px; }
.cai-tv-b { flex: 1; overflow: auto; padding: 14px 24px 28px; }
.cai-tv-note { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 16px; padding: 9px 12px; border-radius: 9px; background: var(--cai-surface-2);
  border: 1px solid var(--cai-border); font-size: 12.5px; color: var(--cai-ink-2); }
.cai-tv-note svg { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.cai-tv-qw { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; max-width: min(85%, 68ch); }
.cai-tv-qw .cai-bubble { max-width: 100%; }
.cai-tv-meta { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--cai-ink-3); }
.cai-tv-am { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--cai-border);
  font-size: 12px; color: var(--cai-ink-3); }
.cai-tv-look .cai-err-t { font-weight: 600; }
.cai-tv-confirm { margin: 12px 20px 0; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--cai-bad) 45%, transparent); border-radius: 10px;
  background: color-mix(in srgb, var(--cai-bad) 6%, var(--cai-surface)); }
.cai-tv-confirm b { font-size: 14px; }
.cai-tv-confirm p { margin: 4px 0 10px; font-size: 13px; color: var(--cai-ink-2); }
.cai-tv-cacts { display: flex; gap: 8px; justify-content: flex-end; }
.cai-btn.cai-danger { background: #b91c1c; border-color: #b91c1c; color: #fff; }
[data-theme="dark"] .cai-tv-back { background: rgba(0, 0, 0, .55); }
@media (max-width: 900px) {
  .cai-usum { grid-template-columns: 1fr; }
  .cai-f-acts { margin-left: 0; }
  .cai-tv { width: 100vw; }
  .cai-tv-h { flex-wrap: wrap; }
  .cai-tv-acts { order: 3; width: 100%; justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .cai-loading { transition: none; } }
.cai-usum-main, .cai-tv-msgs { min-width: 0; }
.cai-mon-top { align-items: start; }
.cai-u-kpis { margin-bottom: 14px; }