/* AI features (F4 settings tab + F5 authoring bar). Loaded after aboo.css so it can lean on the
   brand tokens (--brand / --brand-faint / --ink / --muted / --line / --ok / --bad / --warn /
   --surface / --radius). No inline styles anywhere in the app — all AI styling lives here.
   (Kept OUT of aboo.css deliberately; add it via a <link> in index.html or an @import at the top
   of aboo.css — see the build report.) Desktop-first but wraps cleanly on narrow widths. */

/* ── F5: the natural-language / voice authoring bar (document editor, above the line grid) ── */
.ai-authoring {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0 12px;
  padding: 8px 10px;
  background: var(--brand-faint);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.ai-bar-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-ink);
  white-space: nowrap;
}
.ai-bar-mic { white-space: nowrap; }
.ai-bar-cmd {
  flex: 1 1 260px;
  min-width: 180px;
}
.ai-bar-go { white-space: nowrap; }
.ai-bar-status {
  flex: 1 1 100%;
  font-size: 12px;
  color: var(--muted);
  min-height: 1em;
}
/* one row on comfortable widths: let the status sit inline once there's room */
@media (min-width: 720px) {
  .ai-bar-status { flex: 0 1 auto; }
}
.ai-bar-status.ai-bar-ok { color: var(--ok); }
.ai-bar-status.ai-bar-err { color: var(--bad); }
.ai-bar-status.ai-bar-warn { color: var(--warn); }

/* ── F4: the AI settings tab (Settings → AI) ── */
.ai-key-status {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
}
.ai-key-set { color: var(--ok); font-weight: 600; }
.ai-key-set .mono { color: var(--ink); font-weight: 400; }
.ai-key-none { color: var(--muted); }
.ai-key-server { color: var(--muted); font-size: 12px; }