:root { color-scheme: light; }
html { background: var(--bg); }
.theme-toggle { flex-shrink: 0; width: 38px; height: 38px; border: 1px solid var(--line); }
.theme-toggle svg { width: 19px; height: 19px; }
.auth-page > .theme-toggle { position: absolute; top: 24px; right: 24px; z-index: 2; background: var(--bg); }
.topbar .crumb { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #10151f;
  --ink: #e3e9f4;
  --muted: #a2aec1;
  --line: #2b3649;
  --blue: #91aaff;
  --blue-light: #263553;
  --green: #6bd5ae;
  --nav: #111927;
  --shadow: 0 10px 35px #00000018;
  --surface: #181f2d;
  --surface-raised: #202a3b;
  --surface-soft: #141b27;
}

[data-theme="dark"] :is(.topbar, .metric, .inbox, .chat-header, .composer, .composer-box, .contact, .channel-card, .section-card, dialog, .auth-page) {
  background: var(--surface);
  border-color: var(--line);
}
[data-theme="dark"] :is(.btn, .form-field input, .form-field select, .contact select, .note-input, .chat-header .status-select) {
  color: var(--ink);
  background: var(--surface-raised);
  border-color: var(--line);
}
[data-theme="dark"] :is(input, textarea, select) { color: var(--ink); }
[data-theme="dark"] :is(textarea, select option) { background: var(--surface-raised); }
[data-theme="dark"] :is(.btn:hover, .icon-btn:hover) { background: #2a3851; color: var(--ink); }
[data-theme="dark"] :is(.btn.primary, .send-btn) { background: #536de4; border-color: #536de4; color: #fff; }
[data-theme="dark"] :is(.btn.primary:hover, .send-btn:hover) { background: #627dec; border-color: #627dec; }
[data-theme="dark"] .btn.subtle { background: transparent; border-color: transparent; color: var(--muted); }
[data-theme="dark"] .btn.danger { color: #ff9c9c; }
[data-theme="dark"] .theme-toggle { color: #c0cde4; }
[data-theme="dark"] .theme-toggle[aria-pressed="true"] { background: var(--blue-light); color: #b6c8ff; }
[data-theme="dark"] :is(button, a):focus-visible { outline-color: #91aaff; }
[data-theme="dark"] :is(input, textarea, select):focus { outline-color: #6e88d9; border-color: #91aaff; }
[data-theme="dark"] .composer-box:focus-within { border-color: #7897ed; box-shadow: 0 0 0 2px #91aaff1a; }
[data-theme="dark"] ::selection { background: #4564a8; color: #fff; }

[data-theme="dark"] :is(.label, .topbar .crumb, .topbar .server-status, .metric-label, .channel-state, .channel-card .channel-detail, .section-card p, .form-field label, .form-field small, .modal-body p, .modal-status, .qr-wait, .history-state, .integration-steps, .telegram-guide-content, .telegram-guide-content p, .section-card .telegram-guide-content p, .auth-form > p, .auth-form .label, .auth-note, .contact-section .field-title) {
  color: var(--muted);
}
[data-theme="dark"] .topbar .crumb strong { color: var(--ink); }
[data-theme="dark"] .topbar .crumb span { color: #697a96; }
[data-theme="dark"] :is(.metric:hover, .thread) { border-color: var(--line); }
[data-theme="dark"] :is(.chat, .search input) { background-color: var(--surface-soft); border-color: var(--line); }
[data-theme="dark"] :is(.thread:hover, .attachment, .telegram-guide, .modal-body .integration-note, .telegram-safety) {
  background: var(--surface-raised);
  border-color: var(--line);
  color: var(--muted);
}
[data-theme="dark"] .thread.active { background: #23324d; }
[data-theme="dark"] .thread.active::before { background: #91aaff; }
[data-theme="dark"] .thread-avatar .platform-icon { border-color: var(--surface); }
[data-theme="dark"] .thread.active .thread-avatar .platform-icon { border-color: #23324d; }
[data-theme="dark"] :is(.thread-preview, .list-filter select, .channel-small, .list-filter .total, .thread-title time, .date-line, .empty-list, .contact-top p, .composer-note, .composer-bottom span, .contact .conversation-id) { color: var(--muted); }
[data-theme="dark"] :is(input, textarea)::placeholder { color: #8998af; }
[data-theme="dark"] .chat-empty { background: linear-gradient(145deg, #182131, #141b27); }
[data-theme="dark"] .empty { color: var(--muted); }
[data-theme="dark"] .empty h3 { color: #cad7ee; }
[data-theme="dark"] .messages { background-image: radial-gradient(#65769817 .8px, transparent .8px); }
[data-theme="dark"] .message { background: var(--surface-raised); border-color: #303d53; box-shadow: none; }
[data-theme="dark"] .message-row.out .message { background: #253758; border-color: #334a72; }
[data-theme="dark"] .message-meta { color: #a4b4ce; }
[data-theme="dark"] .message-meta .author { color: #afbfdb; }
[data-theme="dark"] .message .send-error { color: #eaba84; }
[data-theme="dark"] .composer textarea { background: transparent; }
[data-theme="dark"] .connection-note { background: #362d20; color: #e5bf83; }
[data-theme="dark"] .demo-banner { background: #342c1f; color: #e4c38b; }
[data-theme="dark"] dialog::backdrop { background: #060b14b3; }
/* Keep authentication QR codes white for reliable scanning. */
[data-theme="dark"] .qr-image { background: #fff; border-color: #fff; }
[data-theme="dark"] .auth-intro { background: #111927; }
[data-theme="dark"] .auth-page > .theme-toggle { background: var(--surface-raised); }

[data-theme="dark"] :is(.metric-icon, .help-number) { background: #283754; color: #abc0ff; }
[data-theme="dark"] .metric:nth-child(2) .metric-icon { background: #213d36; color: #8fd6b2; }
[data-theme="dark"] .metric:nth-child(3) .metric-icon { background: #362d4b; color: #c4acef; }
[data-theme="dark"] .metric:nth-child(4) .metric-icon { background: #3e3427; color: #e5c08b; }
[data-theme="dark"] .pill.new { background: #283754; color: #adc1ff; }
[data-theme="dark"] .pill.working { background: #362d4b; color: #cfb7fa; }
[data-theme="dark"] .pill.waiting { background: #3e3427; color: #edc48a; }
[data-theme="dark"] .pill.closed { background: #213d36; color: #91dcbd; }
[data-theme="dark"] .pill.neutral { background: #2a3548; color: #b4c2d8; }
[data-theme="dark"] .avatar { background: #2c3754; color: #b3c4ef; }
[data-theme="dark"] .avatar.tone-1 { background: #423048; color: #e0b4e7; }
[data-theme="dark"] .avatar.tone-2 { background: #284038; color: #add7bd; }
[data-theme="dark"] .avatar.tone-3 { background: #473c2e; color: #e2c59f; }
[data-theme="dark"] .avatar.tone-4 { background: #2b3c54; color: #b3ceee; }
[data-theme="dark"] .topbar .avatar { background: #2c3d62; color: #b9ceff; }
[data-theme="dark"] :is(.live-label, .channel-state.connected, .form-success, .status-dot) { color: #73d4ad; }
[data-theme="dark"] :is(.channel-state.error, .history-state.error, .form-error, .inline-error) { color: #f3ab9d; }
[data-theme="dark"] :is(.channel-state.qr, .channel-state.connecting, .channel-state.password) { color: #dec387; }
[data-theme="dark"] .history-state.running { color: #adc1ff; }
[data-theme="dark"] .contact.drawer { border-color: var(--line); }

@media (max-width: 700px) {
  .topbar { gap: 10px; }
  .topbar .user-info { margin-left: 0; }
  .theme-toggle { width: 34px; height: 34px; }
  .auth-page > .theme-toggle { top: 20px; right: 20px; }
}