/* The light palette remains in styles.css. Theme changes affect colour only. */
:root {
  color-scheme: light;
}

.sidebar-theme-icon {
  width: 21px;
  height: 21px;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #10171f;
  --paper: #18222d;
  --ink: #e7edf3;
  --muted: #a6b6c5;
  --line: #344454;
  --accent: #67c9ed;
  --accent-strong: #8edcfa;
  --accent-soft: #1e3b4d;
  --warm: #ff9ba3;
  --warn: #ff9ba3;
  --success: #6ddca0;
  --shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
  --theme-surface: #202e3b;
  --theme-raised: #273a49;
  --theme-chat: #121d27;
  --theme-outbound: #1c4050;
  --theme-danger: #402630;
  --theme-warning: #393322;
  --theme-purple: #302940;
  background: var(--bg);
  scrollbar-color: #4a6275 var(--paper);
}

html[data-theme="dark"] body {
  color: var(--ink);
  background: var(--bg);
}

html[data-theme="dark"] ::selection {
  color: #fff;
  background: #286583;
}

html[data-theme="dark"] :is(.topbar, .panel, .metric-card, .info-card,
  .visit-card, .details-summary-block, .sidebar-parameters-panel,
  .service-launchpad-card, .reply-template-dialog-root, .reply-template-dialog,
  .reply-template-dialog-head, .reply-template-mobile-controls, .reply-template-sticky-actions) {
  color: var(--ink);
  background: var(--paper);
  border-color: var(--line);
  box-shadow: var(--shadow);
}

html[data-theme="dark"] :is(.chat-scroll, .conversation-list) {
  background: var(--theme-chat);
  border-color: var(--line);
}

html[data-theme="dark"] :is(.conversation-list-note, .conversation-pull-refresh-indicator) {
  color: var(--muted);
  background: var(--paper);
  border-color: var(--line);
  box-shadow: none;
}

html[data-theme="dark"] :is(.chat-composer, .details-summary-row + .details-summary-row,
  .operator-assist-draft, .reply-template-dialog-head, .reply-template-context-sheet-head) {
  border-color: var(--line);
}

html[data-theme="dark"] .chat-composer,
html[data-theme="dark"] body.is-pwa-standalone .workspace.mobile-chat-view .chat-composer {
  /* Cover the standalone footer's full safe-area padding as well as its controls. */
  color: var(--ink);
  background: var(--paper);
  border-color: var(--line);
  box-shadow: none;
}

html[data-theme="dark"] :is(input:not([type="checkbox"]):not([type="radio"]),
  textarea, select, .conversation-search-input, .chat-composer-input,
  .reply-template-search input, .reply-template-draft-step textarea,
  .auth-field input, .conversation-create-field input, .conversation-create-field select) {
  color: var(--ink);
  background: var(--theme-chat);
  border-color: var(--line);
  caret-color: var(--accent-strong);
}

html[data-theme="dark"] :is(input, textarea)::placeholder {
  color: #94a7b9;
  opacity: 1;
}

html[data-theme="dark"] :is(button, input, textarea, select, a):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

html[data-theme="dark"] :is(.sidebar-controls-toggle, .sidebar-parameter-button,
  .sidebar-language-button, .sidebar-language-option, .channel-filter-toggle,
  .channel-filter-chip, .conversation-search-button, .sidebar-create-button,
  .sidebar-inline-settings-button, .sidebar-hidden-chats-button, .chat-attachment-button,
  .chat-channel-tabs-trigger, .chat-channel-tab, .chat-channel-tab-add,
  .pwa-install-button, .pwa-install-dismiss, .app-version-badge,
  .conversation-create-channel-toggle, .conversation-create-channel-option,
  .message-help-action, .message-audio-button, .message-forward-contact,
  .reply-template-filter-chip, .reply-template-favorite-button,
  .reply-template-preview-back, .reply-template-close-button,
  .reply-template-view-toggle, .auth-language-button) {
  color: var(--ink);
  background: var(--theme-surface);
  border-color: var(--line);
  box-shadow: none;
}

html[data-theme="dark"] :is(.sidebar-controls-toggle, .sidebar-parameter-button,
  .sidebar-language-button, .sidebar-language-option, .channel-filter-chip,
  .chat-channel-tabs-trigger, .chat-channel-tab, .chat-channel-tab-add,
  .conversation-search-button, .message-help-action, .message-forward-contact,
  .conversation-create-channel-option, .reply-template-row-open,
  .auth-language-button):is(:hover, :focus-visible) {
  color: var(--ink);
  background: var(--theme-raised);
  border-color: #55829a;
}

html[data-theme="dark"] :is(.sidebar-parameter-button[aria-checked="true"],
  .sidebar-controls-toggle[aria-expanded="true"], .sidebar-language-button[aria-expanded="true"],
  .sidebar-language-option.active, .channel-filter-chip.active, .channel-filter-toggle.open,
  .chat-channel-tabs-trigger, .chat-channel-tab.active, .message-forward-contact.selected,
  .conversation-create-channel-option.selected, .details-visit-card.active,
  .auth-language-button.active) {
  color: var(--accent-strong);
  background: var(--accent-soft);
  border-color: #4a8198;
}

html[data-theme="dark"] .sidebar-parameter-switch {
  border-color: #617384;
  background: #3a4b5b;
}

html[data-theme="dark"] .sidebar-parameter-button[aria-checked="true"] .sidebar-parameter-switch {
  background: #3389a9;
  border-color: #67c9ed;
}

html[data-theme="dark"] :is(.sidebar-language-label, .sidebar-language-current,
  .sidebar-parameter-label, .sidebar-hidden-chats-label, .sidebar-language-name) {
  color: inherit;
}

html[data-theme="dark"] :is(.sidebar-language-menu, .channel-filter-panel,
  .chat-channel-tabs-menu, .chat-attachment-menu, .message-help-popover,
  .conversation-create-channel-list) {
  color: var(--ink);
  background: var(--paper);
  border-color: var(--line);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .conversation-card {
  color: var(--ink);
  background: var(--paper);
  border-color: var(--line);
  box-shadow: none;
}

html[data-theme="dark"] .conversation-card:hover {
  background: var(--theme-surface);
}

html[data-theme="dark"] .conversation-card-top strong {
  color: var(--ink);
}

html[data-theme="dark"] .conversation-card.active {
  background: #223c4d;
  border-left-color: var(--accent);
}

html[data-theme="dark"] .conversation-card.active .conversation-card-top strong {
  color: var(--accent-strong);
}

html[data-theme="dark"] :is(.conversation-card.active .conversation-time,
  .conversation-card.active .conversation-card-bottom p) {
  color: #c1d5e3;
}

html[data-theme="dark"] .conversation-avatar-circle {
  background: radial-gradient(circle at 50% 28%, #708494 0 26%, #415466 27% 100%);
}

html[data-theme="dark"] .conversation-avatar-fallback {
  color: #bbcad5;
}

html[data-theme="dark"] .conversation-avatar-channel .channel-badge {
  border-color: var(--paper);
}

html[data-theme="dark"] .bubble {
  color: var(--ink);
  background: var(--theme-surface);
  border-color: #344b5b;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.15);
}

html[data-theme="dark"] .bubble-row.outbound .bubble {
  background: var(--theme-outbound);
  border-color: #31596b;
}

html[data-theme="dark"] :is(.bubble.search-current, .bubble-row.outbound .bubble.search-current) {
  background: #284d62;
  border-color: var(--accent);
}

html[data-theme="dark"] .day-divider span {
  color: #9bdfff;
  background: #263c4b;
  border-color: #426075;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .visit-event-card {
  color: #ffbdc6;
  background: var(--theme-danger);
  border-color: #a15568;
  box-shadow: var(--shadow);
}

html[data-theme="dark"] :is(.chat-location-strip, .chat-title-location-badge),
html[data-theme="dark"] body.is-mobile-keyboard-open .workspace.mobile-chat-view .chat-location-strip {
  color: #ffdda6;
  background: linear-gradient(135deg, #3b2e20, #2c251d);
  border-color: #a17b47;
  box-shadow: inset 0 1px 0 rgba(255, 221, 166, 0.08);
}

html[data-theme="dark"] :is(.chat-location-strip-value, .chat-location-strip-kicker,
  .chat-location-strip-source) {
  color: inherit;
}

html[data-theme="dark"] :is(.details-visit-card,
  .reader-read-only-notice, .operator-assist-panel, .operator-assist-field,
  .message-origin-chip, .message-forward-preview, .message-help-ai-message,
  .conversation-create-client, .reply-template-context, .reply-template-mobile-context,
  .reply-template-preference-notice, .reply-template-step, .reply-template-draft-step) {
  color: var(--ink);
  background: var(--theme-surface);
  border-color: var(--line);
  box-shadow: none;
}

html[data-theme="dark"] :is(.message-audio-copy strong, .message-attachment-placeholder-caption,
  .message-help-ai-message strong, .message-forward-preview p,
  .conversation-create-client strong, .chat-attachment-menu button) {
  color: var(--ink);
}

html[data-theme="dark"] :is(.message-text-link, .message-attachment-link,
  .message-sticker-link, .message-inline-translate-button, .message-attachment-placeholder-icon,
  .call-event-bubble .bubble-meta strong, .reply-template-step-body a) {
  color: var(--accent-strong);
}

html[data-theme="dark"] :is(.message-help-action-icon, .message-help-button-icon) {
  color: var(--accent-strong);
  background: var(--accent-soft);
}

html[data-theme="dark"] :is(.primary-button, .scroll-to-bottom-button,
  .mobile-chat-back-button, .operator-assist-insert,
  .reply-template-filter-chip.is-active, .reply-template-favorite-button.is-active,
  .reply-template-view-toggle button.is-active, .reply-template-step-number,
  .reply-template-draft-step legend span) {
  color: #fff;
  background: linear-gradient(135deg, #237593, #16556d);
  border-color: #478da6;
}

html[data-theme="dark"] :is(.bubble.translated, .bubble-row.outbound .bubble.translated,
  .message-translation-marker, .pwa-install-note) {
  color: #f3dfaf;
  background: var(--theme-warning);
  border-color: #89753e;
}

html[data-theme="dark"] :is(.bubble.audio-dialog-bubble,
  .bubble-row.outbound .bubble.audio-dialog-bubble, .message-origin-audio,
  .chat-channel-tab-audio, .chat-channel-tab-audio.active) {
  color: #dfc5ff;
  background: var(--theme-purple);
  border-color: #766092;
}

html[data-theme="dark"] :is(.bubble.call-event-bubble, .bubble-row.outbound .bubble.call-event-bubble) {
  color: var(--ink);
  background: var(--theme-surface);
  border-color: #42677b;
}

html[data-theme="dark"] :is(.bubble-row.outbound .bubble.send-error,
  .missed-call-reply-required-row .missed-call-reply-required-bubble,
  .no-reply-marker, .operator-assist-error, .operator-assist-review-note,
  .conversation-create-error, .conversation-create-conflicts, .message-help-ai-error,
  .message-help-ai-warning, .reply-template-error, .reply-template-preview-note,
  .auth-error, .pwa-install-confirm-hide) {
  color: #ffb9bd;
  background: var(--theme-danger);
  border-color: #a15568;
  box-shadow: none;
}

html[data-theme="dark"] :is(.missed-call-reply-readonly,
  .call-message-notice--missed .call-message-text, .message-inline-translate-button.is-error,
  .reply-template-load-error) {
  color: #ffb9bd;
}

html[data-theme="dark"] :is(.message-forward-panel, .message-help-ai-draft,
  .conversation-create-panel, .pwa-install-sheet, .auth-card,
  .reply-template-card, .reply-template-row, .reply-template-preview,
  .reply-template-desktop-sidebar, .reply-template-context-sheet,
  .reply-template-context-sheet-head, .reply-template-confirm,
  .reply-template-result, .reply-template-loading, .reply-template-empty,
  .reply-template-draft-editor) {
  color: var(--ink);
  background: var(--paper);
  border-color: var(--line);
  box-shadow: var(--shadow);
}

html[data-theme="dark"] .reply-template-dialog-root {
  --muted: #a6b6c5;
}

html[data-theme="dark"] :is(.conversation-create-close, .message-forward-close,
  .pwa-install-close, .message-audio-modal-close) {
  color: var(--ink);
  background: var(--theme-raised);
  border-color: var(--line);
}

html[data-theme="dark"] :is(.auth-overlay, .conversation-create-backdrop,
  .message-forward-sheet-backdrop, .pwa-install-backdrop, .reply-template-context-overlay) {
  background: rgba(5, 10, 17, 0.78);
}

html[data-theme="dark"] :is(.app-tooltip, .app-tooltip::after) {
  color: var(--ink);
  background: #29495e;
}

html[data-theme="dark"] :is(.message-search-mark, mark) {
  color: #f2e6b4;
  background: #655020;
}

html[data-theme="dark"] :is(.message-help-action:disabled,
  .message-help-action[aria-disabled="true"]) {
  color: #8495a5;
  background: #1a2631;
}

/* Mobile styles also contain literal black labels; cover the same UI surfaces. */
html[data-theme="dark"] .sidebar-automation-toggles,
html[data-theme="dark"] .sidebar-automation-toggles * {
  /* The mobile stylesheet forces black on every settings descendant. */
  color: var(--ink) !important;
}

html[data-theme="dark"] #chat-title,
html[data-theme="dark"] #chat-subtitle,
html[data-theme="dark"] :is(.chat-title-copy, .chat-subtitle-copy, .message-author-label,
  .bubble-body, .bubble-meta, .bubble-meta strong, .details-panel h3,
  .details-summary-value, .details-visit-head strong, .details-visit-salon,
  .details-visit-body, .details-visit-body p, .details-visit-body strong,
  .info-card strong, .visit-card strong, .info-card span, .visit-card span, .visit-card p,
  .message-sticker-copy strong, .call-message-text, .message-service-notice) {
  color: var(--ink);
}

html[data-theme="dark"] :is(.history-cap, .empty-chat, .empty-list, .bubble-time,
  .conversation-card-bottom, .conversation-card p, .conversation-time,
  .conversation-phone, .conversation-inline-number, .channel-filter-toggle-meta,
  .conversation-search-status, .panel-kicker,
  .details-summary-label, .details-visit-address, .visit-empty,
  .chat-toolbar-meta, .chat-search-nav-meta,
  .message-attachment-placeholder, .message-media-caption,
  .message-audio-copy span, .reply-template-row-excerpt) {
  color: var(--muted);
}

html[data-theme="dark"] :is(.badge, .badge-soft, .chat-id-button, .details-visit-amount) {
  color: var(--accent-strong);
}

html[data-theme="dark"] :is(.badge.client-existing, .conversation-client-badge.existing) {
  color: var(--success);
}

html[data-theme="dark"] :is(.badge.client-new, .badge.warn, .badge-warn,
  .badge.suppressed, .conversation-client-badge.new) {
  color: var(--warn);
}

html[data-theme="dark"] .workspace .chat-panel.is-transitioning::after,
html[data-theme="dark"] .workspace.mobile-chat-view .chat-panel.is-mobile-opening-conversation.is-transitioning::after {
  background: var(--paper);
}