/* Bright mode keeps app.css unchanged. Never invert content, images or previews. */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b1220;
  --panel: #141e2e;
  --panel-muted: #1b293d;
  --line: #34445c;
  --line-strong: #536782;
  --text: #e6edf5;
  --text-muted: #acbdd1;
  --primary: #93c5fd;
  --primary-hover: #bfdbfe;
  --primary-soft: #1c3554;
  --sidebar: #0e1726;
  --sidebar-muted: #a0b1c7;
  --success: #86efac;
  --success-soft: #14392d;
  --warning: #fcd38d;
  --warning-soft: #3b2d18;
  --danger: #ffb4ab;
  --danger-soft: #48232b;
  --shadow: 0 1px 2px rgb(0 0 0 / 25%);
  --shadow-lg: 0 18px 40px rgb(0 0 0 / 45%);
  --cio-button: #245d9c;
  --cio-button-hover: #1e4e84;
}

/* Low specificity preserves the existing secondary/ghost/skill button variants. */
:where(html[data-theme="dark"]) a { color: var(--primary); }
:where(html[data-theme="dark"]) button {
  background: var(--cio-button);
  border-color: #4b83c7;
}
:where(html[data-theme="dark"]) button:hover:not(:disabled) {
  background: var(--cio-button-hover);
}
html[data-theme="dark"] .secondary-button:hover:not(:disabled),
html[data-theme="dark"] .copy-chip:hover:not(:disabled) {
  background: var(--primary-soft);
  color: var(--text);
  border-color: var(--line-strong);
}
html[data-theme="dark"] .danger-button:hover:not(:disabled) {
  background: #963030;
  color: #fff;
}
html[data-theme="dark"] :is(input, textarea)::placeholder {
  color: var(--text-muted);
  opacity: 1;
}
html[data-theme="dark"] :is(input, select, textarea) {
  accent-color: var(--primary);
}
html[data-theme="dark"] :is(input, select, textarea):autofill {
  color: var(--text);
  -webkit-text-fill-color: var(--text);
  box-shadow: 0 0 0 1000px var(--panel-muted) inset;
}

/* Light-only surfaces in session boards, conversations, files and run history. */
html[data-theme="dark"] :is(.session-lineage-link, .session-summary-block,
  .conversation-file-item, .run-history-item, .dropzone) {
  background: var(--panel-muted);
  border-color: var(--line-strong);
}
html[data-theme="dark"] .run-history-content { background: var(--panel); }
html[data-theme="dark"] :is(.subnav-link.is-active, .page-chip-active,
  .session-row.is-active, .conversation-box-user, .dropzone.is-dragging),
html[data-theme="dark"] .is-selected-row td {
  background: var(--primary-soft);
  border-color: var(--line-strong);
}
html[data-theme="dark"] .log-box:not(.rich-output-terminal) {
  background: var(--panel-muted);
  color: var(--text);
}
html[data-theme="dark"] .tab-bar { background: var(--panel-muted); }
html[data-theme="dark"] :is(.count, .badge-subtle) {
  background: var(--panel-muted);
  color: var(--text-muted);
}
html[data-theme="dark"] :is(.count-attention, .notice-recovery, .migration-state-legacy_only) {
  background: var(--warning-soft);
  color: var(--warning);
}
html[data-theme="dark"] :is(.notice-warning, .notice-recovery, .codex-account-device-panel.is-active) {
  border-color: #94703d;
}
html[data-theme="dark"] :is(.notice-success, .flash) { border-color: #397d59; }
html[data-theme="dark"] .migration-state-session_issued {
  background: #34284e;
  color: #d8b4fe;
}
html[data-theme="dark"] .codex-auth-view-switch button[aria-selected="true"] {
  background: var(--primary-soft);
  color: var(--text);
}
html[data-theme="dark"] .rich-output blockquote {
  border-color: var(--line-strong);
  color: var(--text-muted);
}
html[data-theme="dark"] .rich-output :not(pre) > code { background: var(--panel-muted); }
html[data-theme="dark"] .rich-output > code { background: var(--panel-muted); }
html[data-theme="dark"] .rich-output pre code { background: transparent; }
html[data-theme="dark"] .rich-output-terminal :is(a, .text-link) { color: var(--primary); }
html[data-theme="dark"] .ansi-fg-0 { color: #a0b1c7; }
html[data-theme="dark"] .ansi-bg-7 { color: #111827; }

/* A native keyboard-operable switch; rows stay in normal document flow. */
.cio-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.cio-theme-toggle::before {
  content: "☀";
  font-size: 1.1rem;
  line-height: 1;
}
.cio-theme-toggle[aria-checked="true"]::before { content: "☾"; }
.cio-theme-toggle:hover:not(:disabled) {
  background: var(--primary-soft);
  color: var(--text);
}
.cio-theme-toggle:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}
.cio-theme-row { display: flex; justify-content: flex-end; }
.login-card .cio-theme-row { margin-bottom: 12px; }
:is(.sidebar, .topbar, .codex-auth-actions) .cio-theme-toggle {
  background: transparent;
  border-color: #718198;
  color: var(--sidebar-text);
}
:is(.sidebar, .topbar, .codex-auth-actions) .cio-theme-toggle:hover:not(:disabled) {
  background: #263b55;
  color: #fff;
}
:is(.sidebar, .topbar, .codex-auth-actions) .cio-theme-toggle:focus-visible {
  outline-color: #93c5fd;
}
@media (max-width: 640px) {
  .topbar:has(.cio-theme-toggle) { flex-wrap: wrap; }
  .topbar:has(.cio-theme-toggle) .topbar-actions {
    flex-basis: 100%;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}
@media (forced-colors: active) {
  .cio-theme-toggle { border: 1px solid ButtonText; }
}