/* Theme control stays visible on desktop and mobile. */
.topbar-start { flex: 1; }
.topbar-actions { display: flex; align-items: center; gap: 16px; flex-shrink: 0; margin-left: 16px; }
.theme-toggle { width: 44px; height: 44px; padding: 11px; border: 1px solid var(--line); border-radius: 12px; color: var(--teal); background: var(--surface); }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle:hover { background: var(--teal-soft); }
.theme-toggle:active { transform: scale(.95); }
.welcome-symbol circle:first-of-type { fill: var(--page); }

:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #111916;
  --sidebar: #16211d;
  --surface: #1b2822;
  --ink: #e1ece5;
  --body: #c3d3c9;
  --muted: #a1b5a8;
  --faint: #849a8c;
  --line: #304238;
  --teal: #8acdb0;
  --teal-dark: #a1ddc1;
  --teal-soft: #243d31;
}

:root[data-theme="dark"] ::selection { background: #365d49; color: #f1fff6; }
:root[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #415749; }
:root[data-theme="dark"] .brand-mark { background: #0d5b4b; }
:root[data-theme="dark"] .brand-period { color: var(--teal); }
:root[data-theme="dark"] :is(.new-chat, .send-button) { background: #267455; color: #f3fff7; }
:root[data-theme="dark"] :is(.new-chat, .send-button):hover { background: #318466; }
:root[data-theme="dark"] .new-chat-shortcut { color: #cee6d8; }
:root[data-theme="dark"] .send-button:disabled { background: #293c31; color: #8aa492; }

:root[data-theme="dark"] :is(.composer-form, .settings-panel, .scroll-bottom, .media-card, .about-dialog) {
  background: var(--surface); border-color: var(--line); box-shadow: 0 8px 30px #0002;
}
:root[data-theme="dark"] .composer-form:focus-within { border-color: #5f9678; box-shadow: 0 0 0 3px #8acdb012; }
:root[data-theme="dark"] .suggestion-card { background: var(--surface); border-color: var(--line); }
:root[data-theme="dark"] .suggestion-card:hover { background: #23352a; border-color: #52705d; }
:root[data-theme="dark"] :is(.history-heading-line, .topbar-divider, .toolbar-divider) { background: var(--line); }
:root[data-theme="dark"] :is(.history-item:hover, .action-button:hover, .icon-button:hover, .attachment-chip button:hover, .mode-button:hover) { background: #263a2e; color: var(--ink); }
:root[data-theme="dark"] .history-item.active { background: #284434; color: #d4efdf; }
:root[data-theme="dark"] .history-delete:hover { background: #49382f; color: #f0b2a1; }
:root[data-theme="dark"] .history-search:focus-within { background: var(--surface); border-color: #52705d; }
:root[data-theme="dark"] .empty-history-icon { background: var(--surface); border-color: var(--line); color: var(--muted); }
:root[data-theme="dark"] .connection-indicator { background: #1c2c23; border-color: var(--line); }
:root[data-theme="dark"] .connection-indicator:hover { background: #24392c; }
:root[data-theme="dark"] .connection-avatar { background: #304c3b; color: #c0e2cc; }
:root[data-theme="dark"] .connection-dot { border-color: #1c2c23; }
:root[data-theme="dark"] .sidebar-overlay { background: #0009; }

:root[data-theme="dark"] :is(.welcome h2, .about-dialog h2, .suggestion-copy strong, .connection-copy strong, .model-list-item strong, .settings-panel-heading, .message-body h1, .message-body h2, .message-body h3, .message-body h4, .message-body strong) { color: var(--ink); }
:root[data-theme="dark"] :is(.message-body, .code-block pre, .conversation-title, .sidebar-about, .history-item, .user-bubble) { color: var(--body); }
:root[data-theme="dark"] #prompt { color: var(--ink); }
:root[data-theme="dark"] #prompt::placeholder { color: #8da696; }
:root[data-theme="dark"] .history-search input::placeholder { color: #8da696; }
:root[data-theme="dark"] :is(.history-search, .history-heading, .history-icon, .history-icon svg, .history-delete, .empty-history, .empty-history p, .connection-copy > span, .connection-info, .topbar-note, .status-tick, .welcome-eyebrow, .welcome-description, .suggestion-copy > span, .suggestion-arrow, .welcome-footnote, .composer-enter-hint, .icon-button, .settings-button, .char-count, .composer-hint, .settings-option-group > label, .range-label label, .range-label output, .range-endpoints, .settings-note, .attachment-chip, .attachment-chip button, .message-label, .user .message-label, .action-button, .media-caption, .progress-note, .dialog-description, .model-list-item p, .dialog-note p, .dialog-note > [data-icon]) { color: var(--muted); }

:root[data-theme="dark"] :is(.mode-buttons, .attachment-chip, .settings-option-group select) { background: #17221c; border-color: var(--line); }
:root[data-theme="dark"] .mode-button { color: var(--muted); }
:root[data-theme="dark"] :is(.mode-button.active, .mode-button[aria-pressed="true"]) { background: #2b4434; color: #c3f0d7; box-shadow: none; }
:root[data-theme="dark"] :is(.settings-button:hover, .settings-button[aria-expanded="true"]) { background: #2b4434; color: var(--teal); }
:root[data-theme="dark"] .settings-option-group select { color: var(--body); }
:root[data-theme="dark"] :is(.model-chip, .message-avatar, .dialog-symbol, .model-list-item > [data-icon]) { background: #233b2c; border-color: #385342; color: var(--teal); }
:root[data-theme="dark"] .suggestion-icon { background: #294333; color: #a2d7b5; }
:root[data-theme="dark"] .suggestion-icon-image { background: #413a28; color: #e0c283; }
:root[data-theme="dark"] .suggestion-icon-code { background: #2b3348; color: #b7c4ed; }
:root[data-theme="dark"] .suggestion-icon-voice { background: #41303e; color: #dfb6d0; }
:root[data-theme="dark"] :is(.user-bubble, .inline-code, .dialog-note, .message-body th) { background: #263e2f; }
:root[data-theme="dark"] .inline-code { color: #c0e3ca; }
:root[data-theme="dark"] .message-body blockquote { border-color: #557c60; color: #a8c2af; }
:root[data-theme="dark"] :is(.message-image, .media-card img, .media-card video) { background: #111c16; border-color: var(--line); }
:root[data-theme="dark"] .progress-card { background: #1d3124; border-color: #395442; }
:root[data-theme="dark"] .progress-title { color: #bbdfc7; }
:root[data-theme="dark"] .progress-spinner { border-color: #3a5945; border-top-color: #9dd6af; }
:root[data-theme="dark"] .error-card { background: #30241e; border-color: #654735; color: #dfbda7; }
:root[data-theme="dark"] .error-title { color: #f0c3a6; }
:root[data-theme="dark"] .code-block { background: #152219; border-color: var(--line); }
:root[data-theme="dark"] :is(.code-block > header, .code-block > div:first-child) { background: #22372a; border-color: var(--line); color: #a6c0ad; }
:root[data-theme="dark"] :is(.code-block > header button, .code-block > div:first-child button) { color: #bed8c5; }
:root[data-theme="dark"] .toast { background: #b8dfc7; color: #183724; }
:root[data-theme="dark"] .toast .action-button { color: #214c31; }
:root[data-theme="dark"] .about-dialog::backdrop { background: #0009; }

@media (max-width: 760px) {
  .topbar-start { width: auto; }
  .topbar-actions { margin-left: 10px; gap: 0; }
  .theme-toggle { width: 40px; height: 40px; padding: 9px; border-radius: 11px; }
  .conversation-title { max-width: 30vw; }
}