/*
 * chat-contrast-floor.css — WCAG AA floor for chat elements.
 *
 * Loaded after theme CSS + platform CSS + chat-layout CSS + chat-ethos CSS.
 * Bumps any text that was using `var(--muted)` (rgba .4) and failing AA to
 * use `var(--text)` or an explicit higher-contrast value.
 *
 * Also forces explicit foreground color on FAB buttons that would otherwise
 * inherit the user-agent black and fail badly against the accent gradient.
 */

/* ── Muted meta text → raise to --text for AA (4.5:1) ────────────── */
/* Specificity note: 2 attributes + class = (0,3,0) — beats ethos selectors
   like [data-chat-ethos="boomer"] .msg-ts which are only (0,2,0). */
[data-theme][data-mode] .msg-system,
[data-theme][data-mode] .msg-role,
[data-theme][data-mode] .msg-ts,
[data-theme][data-mode] .msg-act,
[data-theme][data-mode] .mib-btn,
[data-theme][data-mode] .tc-args,
[data-theme][data-mode] .ch-header .hdr-btn,
[data-theme][data-mode] .op-mode-btn,
[data-theme][data-mode] .bank-tab,
[data-theme][data-mode] .sess-meta,
[data-theme][data-mode] .sess-time {
  color: var(--text) !important;
  opacity: 1 !important;
}

/* Timestamps: readable size, no opacity (opacity reduces contrast below AA) */
[data-theme][data-mode] .msg-ts,
[data-theme][data-mode] .sess-time {
  font-size: 10px !important;  /* lift from 7px — was too tiny to read */
}

/* ── .upload-btn + .boomer-plus-btn sit on the composer — use --text ── */
[data-theme][data-mode] .upload-btn,
[data-theme][data-mode] .boomer-plus-btn {
  color: var(--text) !important;
}

/* ── .voice-fab has accent gradient bg, .ch-send has solid accent bg.
   --text-invert is engineered per theme to contrast with --accent, so
   that's the right default. SVG icon qualifies under WCAG 1.4.11 (3:1). */
[data-theme][data-mode] .voice-fab,
[data-theme][data-mode] .ch-send,
[data-theme][data-mode] .ch-send svg {
  color: var(--text-invert, #000) !important;
}

/* ── Medium-luminance-accent themes need explicit overrides ───────── */
/* Dark themes where --accent is bright → white text-invert is wrong, use #000 */
[data-theme="default"][data-mode="dark"] .voice-fab,
[data-theme="tron"][data-mode="dark"] .voice-fab,
[data-theme="miami"][data-mode="dark"] .voice-fab,
[data-theme="starry"][data-mode="dark"] .voice-fab,
[data-theme="galaxy"][data-mode="dark"] .voice-fab,
[data-theme="retro"][data-mode="dark"] .voice-fab,
[data-theme="midnight-dev"][data-mode="dark"] .voice-fab,
[data-theme="rainbow"][data-mode="dark"] .voice-fab,
[data-theme="gold-luxury"][data-mode="dark"] .voice-fab,
[data-theme="bling"][data-mode="dark"] .voice-fab,
[data-theme="evening"][data-mode="dark"] .voice-fab,
[data-theme="summer-beach"][data-mode="dark"] .voice-fab,
[data-theme="beach"][data-mode="dark"] .voice-fab {
  color: #000 !important;
}
/* Light themes where --accent is medium-luminance — pick the opposite:
   orange/rose need #fff, teal/gold/navy need #000. */
[data-theme="evening"][data-mode="light"] .ch-send,
[data-theme="evening"][data-mode="light"] .ch-send svg {
  color: #000 !important;  /* black on orange = ~7.7:1 */
}
[data-theme="rolex"][data-mode="light"] .voice-fab,
[data-theme="starry"][data-mode="light"] .voice-fab,
[data-theme="galaxy"][data-mode="light"] .voice-fab {
  color:var(--text) !important;
}
/* Soft-indigo dark accent (blurple) needs white icon not graphite */
[data-theme="soft-indigo"][data-mode="dark"] .ch-send,
[data-theme="soft-indigo"][data-mode="dark"] .ch-send svg,
[data-theme="soft-indigo"][data-mode="dark"] .voice-fab,
[data-theme="soft-indigo"][data-mode="light"] .voice-fab {
  color:var(--text) !important;
}
[data-theme="soft-indigo"][data-mode="dark"] .bank-tab,
[data-theme="soft-indigo"][data-mode="dark"] .bank-tab.active {
  color: #e2e8f0 !important;  /* light slate for contrast on dark surface */
}
[data-theme="rolex"][data-mode="dark"] .bank-tab,
[data-theme="rolex"][data-mode="dark"] .bank-tab.active,
[data-theme="rolex"][data-mode="dark"] .voice-fab {
  color: #d4e8dc !important;  /* pale mint for contrast on rolex deep-green bg */
}

/* ── Boomer ethos voice-fab has --bg background (not the accent), so the
   invert-color rule above is wrong there. Boomer intentionally uses --text. */
[data-theme][data-mode][data-chat-ethos="boomer"] .voice-fab,
[data-theme][data-mode][data-chat-ethos="boomer"] .upload-btn {
  color: var(--text) !important;
}
[data-theme="bw"][data-mode="dark"][data-chat-ethos="boomer"] .voice-fab,
[data-theme="monotone"][data-mode="dark"][data-chat-ethos="boomer"] .voice-fab,
[data-theme="grey"][data-mode="dark"][data-chat-ethos="boomer"] .voice-fab,
[data-theme="white-gold"][data-mode="dark"][data-chat-ethos="boomer"] .voice-fab,
[data-theme="soft-indigo"][data-mode="dark"][data-chat-ethos="boomer"] .voice-fab {
  color:var(--text) !important;
}
[data-theme="bw"][data-mode="light"][data-chat-ethos="boomer"] .voice-fab,
[data-theme="monotone"][data-mode="light"][data-chat-ethos="boomer"] .voice-fab,
[data-theme="grey"][data-mode="light"][data-chat-ethos="boomer"] .voice-fab,
[data-theme="white-gold"][data-mode="light"][data-chat-ethos="boomer"] .voice-fab,
[data-theme="soft-indigo"][data-mode="light"][data-chat-ethos="boomer"] .voice-fab {
  color: #000 !important;
}

/* ── Op-mode buttons: readable even on light themes ──────────────── */
[data-theme][data-mode] .op-mode-btn {
  color: var(--text) !important;
  border-color: var(--border) !important;
  background: var(--bg-surface, transparent) !important;
}
[data-theme][data-mode] .op-mode-btn.active {
  color: var(--accent) !important;
  border-color: var(--accent) !important;
  background: var(--accent-dim, transparent) !important;
}

/* ── .msg-act: always-visible + legible (no opacity reducer) ─────── */
[data-theme][data-mode] .msg-act {
  color: var(--text) !important;
}

/* ── Bank tab inactive — full contrast, active uses accent ───────── */
[data-theme][data-mode] .bank-tab {
  color: var(--text) !important;
}
[data-theme][data-mode] .bank-tab.active {
  color: var(--accent) !important;
}

/* ── Welcome glow h2 on light themes: keep visible even without gradient ── */
[data-theme][data-mode="light"] .welcome-glow .msg-text h2 {
  color: var(--accent) !important;
  -webkit-text-fill-color: var(--accent) !important;
}

/* ── Tool-call card secondary text: no "muted" values ────────────── */
[data-theme][data-mode] .tc-args,
[data-theme][data-mode] .tc-name {
  color: var(--text) !important;
}

/* ── Reduce-motion still honored everywhere ────────────────────── */
@media (prefers-reduced-motion: reduce) {
  [data-theme] * {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ── Final per-theme bank-tab overrides (last wins on equal specificity) ── */
html[data-theme="soft-indigo"][data-mode="dark"] .bank-tab,
html[data-theme="soft-indigo"][data-mode="dark"] .bank-tab.active {
  color: #a5b4fc !important;  /* light blurple on dark surface */
}
html[data-theme="rolex"][data-mode="dark"] .bank-tab,
html[data-theme="rolex"][data-mode="dark"] .bank-tab.active {
  color: #d4e8dc !important;  /* pale mint on deep-green surface */
}