/* S4-Connect AI palette. Loaded after app.css so it is the visual authority. */
:root {
  --ai-primary: #6d28d9;
  --ai-primary-strong: #4c1d95;
  --ai-violet: #8b5cf6;
  --ai-cyan: #c4b5fd;
  --ai-ink: #19162c;
  --ai-soft: #f2edff;
  --ai-border: #ddd5ee;
}

/* Calm AI typography: use weight for hierarchy without heavy bold text. */
body,
button,
input,
select,
textarea {
  font-weight: 400;
}
h1,
h2,
h3,
h4,
h5,
h6,
strong,
b {
  font-weight: 550;
}
.navigation-view .panel > header h2,
.settings-profile-card strong,
.settings-hub-row b,
.settings-toggle-row b,
.settings-select-row b,
.linked-device-row b,
.chat strong,
.conversation > header strong,
.profile-hero h2,
.group-info-hero h2 {
  font-weight: 500;
}
.settings-profile-card > i,
.status-form label,
.settings-form label,
.status-form button,
.primary,
#new-chat,
.settings-back,
.settings-info-card button,
.linked-device-row button {
  font-weight: 500;
}
#app-rail button,
#app-rail button span,
.navigation-view .panel header small,
.settings-profile-card small,
.settings-hub-row small,
.settings-toggle-row small,
.linked-device-row small {
  font-weight: 400;
}

body { color: var(--ai-ink); background: #0d0a19; }
.app { background: #faf9fd; }
#app-rail {
  border-color: #352e50;
  color: #d8d2ee;
  background: radial-gradient(circle at 50% 4%, #7135e755, transparent 24%), linear-gradient(180deg, #171229, #100e1c 72%);
}
#app-rail button { color: #aaa3c2; }
#app-rail button:hover,
#app-rail button.active {
  color: #fff;
  background: linear-gradient(145deg, #342858, #26203f);
  box-shadow: inset 0 0 0 1px #8b5cf633;
}
#app-rail button.active span { color: var(--ai-cyan); filter: drop-shadow(0 0 5px #c4b5fd88); }
#sidebar,
#sidebar > header,
.conversation > header,
.navigation-view .panel > header { border-color: var(--ai-border); background: #f7f5fc; }
.chat:hover,
.chat.active { background: var(--ai-soft); }
.chat.active { box-shadow: inset 3px 0 var(--ai-primary); }
.search,
.settings-search,
.inside-search input { background: #eeebf5; }
.primary,
#new-chat,
#workspace-bar button,
#composer .send,
.status-form button,
.workspace-form button,
.workspace-invite button,
.company-directory .workspace-team-list button,
.navigation-view :is(.primary, form > button, .call-actions button) {
  background: linear-gradient(135deg, var(--ai-primary), var(--ai-violet));
  box-shadow: 0 7px 18px #6d28d92b;
}
.quick #new-chat {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--ai-primary), var(--ai-violet));
  box-shadow: 0 7px 18px #6d28d92b;
}
.quick #new-chat:hover {
  background: linear-gradient(135deg, #5b21b6, #7c3aed);
}
#workspace-bar button {
  color: var(--ai-primary);
  border-color: #d4c6fa;
  background: #eee8ff;
  box-shadow: none;
}
#workspace-bar button:hover {
  color: #fff;
  background: linear-gradient(135deg, var(--ai-primary), var(--ai-violet));
}
.eyebrow,
.navigation-view .panel header small,
.settings-hub-row > span,
.settings-toggle-row > span,
.settings-select-row > span,
.linked-device-row > span,
.message strong { color: var(--ai-primary); }
.tabs,
.workspace-tabs,
.group-info-tabs,
.chat-type,
.navigation-view :is(.workspace-tabs, .group-info-tabs, .chat-type) {
  color: var(--ai-primary-strong);
  border-color: var(--ai-border);
  background: var(--ai-soft);
}
.navigation-view :is(.workspace-tabs, .group-info-tabs, .chat-type) button {
  color: #4a425f;
}
.tabs button.active,
.navigation-view :is(.workspace-tabs, .group-info-tabs, .chat-type) button.active { color: var(--ai-primary); background: #fff; }
.message.mine { border: 1px solid #d8c9ff; background: #ebe3ff; }
.group-profile {
  background: radial-gradient(circle at 20% 0%, #c4b5fd2e, transparent 36%), linear-gradient(145deg, #241445, #6425c8 72%, #7c3aed);
  box-shadow: 0 18px 45px #4c1d9529;
}
.group-profile p,
.group-profile > small { color: #e5dcff; }
.group-avatar,
.avatar { background: linear-gradient(135deg, var(--ai-violet), #4338ca); }
.group-avatar-editor > button { background: linear-gradient(135deg, var(--ai-primary), var(--ai-cyan)); }
.settings-profile-card,
.settings-hub-card,
.settings-stack,
.group-settings-card,
.group-edit-card { border-color: var(--ai-border); }
.settings-profile-card { background: radial-gradient(circle at 90% 20%, #c4b5fd24, transparent 28%), linear-gradient(140deg, #191329, #302052); }
input:focus,
select:focus,
textarea:focus,
.navigation-view :is(input, select, textarea):focus { border-color: var(--ai-violet); box-shadow: 0 0 0 3px #8b5cf622; }
.auth-page { background: radial-gradient(circle at 18% 18%, #7c3aed66, transparent 31%), radial-gradient(circle at 82% 78%, #c4b5fd24, transparent 28%), #100c20; }
.auth-card { border: 1px solid #a78bfa33; box-shadow: 0 30px 100px #05020caa, 0 0 50px #6d28d91f; }
.logo { background: linear-gradient(135deg, var(--ai-primary), var(--ai-cyan)); }
.encryption { border: 1px solid #c4b5fd; color: #59349a; background: #f2edff; }

/* Platform-native typography: clean, compact and deliberately undecorative. */
:root {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.35;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body,
button,
input,
select,
textarea { font-family: inherit; }

/* Status image editor uses a dark surface and must not inherit light-form text. */
.navigation-view #status-overlay-text,
.app #status-overlay-text {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #ffffff !important;
  opacity: 1;
}
.navigation-view #status-overlay-text::placeholder,
.app #status-overlay-text::placeholder {
  color: #bdb3d6 !important;
  -webkit-text-fill-color: #bdb3d6 !important;
  opacity: 1;
}
.navigation-view #status-overlay-text:-webkit-autofill,
.navigation-view #status-overlay-text:-webkit-autofill:hover,
.navigation-view #status-overlay-text:-webkit-autofill:focus,
.app #status-overlay-text:autofill {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  -webkit-box-shadow: 0 0 0 1000px #171225 inset !important;
  box-shadow: 0 0 0 1000px #171225 inset !important;
  caret-color: #ffffff !important;
  border-color: #7056b8 !important;
}
.app input:not([type="color"]):not([type="checkbox"]):not([type="radio"]),
.app select,
.app textarea,
.navigation-view input:not([type="color"]):not([type="checkbox"]):not([type="radio"]),
.navigation-view select,
.navigation-view textarea {
  color: #19162c;
  caret-color: #6d28d9;
}
.app input::placeholder,
.app textarea::placeholder,
.navigation-view input::placeholder,
.navigation-view textarea::placeholder {
  color: #756e83;
  opacity: 1;
}
.app select option,
.navigation-view select option {
  color: #19162c;
  background: #fff;
}
.status-person,
.status-person strong { color: #f1f4f5; }
.status-person small { color: #aebac1; }
.navigation-view .panel-content .status-card {
  color: #fff;
  background: var(--status, #6d28d9);
}
.receipt.read { color: #2563a8; }
:root:not([data-theme="dark"]) .advanced-settings .settings-profile-card,
:root:not([data-theme="dark"]) .advanced-settings .settings-hub-card,
:root:not([data-theme="dark"]) .advanced-settings .settings-stack,
:root:not([data-theme="dark"]) .advanced-settings .settings-hub-row,
:root:not([data-theme="dark"]) .advanced-settings .settings-toggle-row,
:root:not([data-theme="dark"]) .advanced-settings .settings-select-row,
:root:not([data-theme="dark"]) .advanced-settings .linked-device-row,
:root:not([data-theme="dark"]) .advanced-settings .settings-info-card,
:root:not([data-theme="dark"]) .advanced-settings .settings-danger-row {
  color: #19162c;
  border-color: #ddd5ee;
  background: #fff;
}
:root:not([data-theme="dark"]) .advanced-settings .settings-search {
  color: #6f6880;
  background: #eeebf5;
}
.navigation-view .advanced-settings .settings-search {
  box-sizing: border-box;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 12px;
  line-height: 1;
}
.navigation-view .advanced-settings .settings-search:focus-within {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px #8b5cf61f;
}
.navigation-view .advanced-settings .settings-search input,
.navigation-view .advanced-settings .settings-search input:focus {
  width: 100%;
  min-width: 0;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
}

/* The Status directory follows the app theme; media viewing stays dark. */
:root:not([data-theme="dark"]) #overlay.navigation-view[data-panel="status"] #panel-body {
  color: #19162c;
  background: #f4f6f7;
}
:root:not([data-theme="dark"]) #overlay.navigation-view[data-panel="status"] .panel > header {
  color: #19162c;
  border-color: #dce3e6;
  background: #f7f5fc;
}
:root:not([data-theme="dark"]) #overlay.navigation-view[data-panel="status"] .panel > header > button {
  color: #40545b;
}
:root:not([data-theme="dark"]) #overlay[data-panel="status"] .status-directory {
  border-color: #dce3e6;
}
:root:not([data-theme="dark"]) #overlay[data-panel="status"] .status-people,
:root:not([data-theme="dark"]) #overlay[data-panel="status"] .my-status-row,
:root:not([data-theme="dark"]) #overlay[data-panel="status"] .status-person {
  color: #19162c;
  border-color: #e4e9eb;
  background: #fff;
}
:root:not([data-theme="dark"]) #overlay[data-panel="status"] .status-person strong {
  color: #19162c;
}
:root:not([data-theme="dark"]) #overlay[data-panel="status"] .my-status-row small,
:root:not([data-theme="dark"]) #overlay[data-panel="status"] .status-person small,
:root:not([data-theme="dark"]) #overlay[data-panel="status"] .status-people > header,
:root:not([data-theme="dark"]) #overlay[data-panel="status"] .status-people > header span {
  color: #667781;
}
:root:not([data-theme="dark"]) #overlay[data-panel="status"] .status-person:hover,
:root:not([data-theme="dark"]) #overlay[data-panel="status"] .status-person.active {
  background: #eee9fa;
}
:root:not([data-theme="dark"]) #overlay[data-panel="status"] .status-avatar-ring {
  background: #fff;
}
:root:not([data-theme="dark"]) #overlay[data-panel="status"] .status-viewer {
  background: #f4f6f7;
}
:root:not([data-theme="dark"]) #overlay[data-panel="status"] .status-viewer:not(.active) .status-empty-state {
  color: #24323a;
}
:root:not([data-theme="dark"]) #overlay[data-panel="status"] .status-viewer:not(.active) .status-empty-state p {
  color: #667781;
}
:root:not([data-theme="dark"]) #overlay[data-panel="status"] .status-viewer:not(.active) .status-empty-mark {
  border-color: #aeb9bf;
}
:root:not([data-theme="dark"]) #overlay[data-panel="status"] .status-viewer:not(.active) .status-empty-mark::before,
:root:not([data-theme="dark"]) #overlay[data-panel="status"] .status-viewer:not(.active) .status-empty-mark::after {
  background: #f4f6f7;
}
:root:not([data-theme="dark"]) #overlay[data-panel="status"] .status-viewer:not(.active) .status-empty-mark i {
  background: #aeb9bf;
}
:root:not([data-theme="dark"]) #overlay[data-panel="status"] .status-create-menu {
  border-color: #d5dde0;
  background: #fff;
  box-shadow: 0 16px 38px #21313a24;
}
:root:not([data-theme="dark"]) #overlay[data-panel="status"] .status-create-menu button {
  color: #24323a;
}
:root:not([data-theme="dark"]) #overlay[data-panel="status"] .status-create-menu button:hover {
  background: #f0edf8;
}

.chat-list-header .brand strong,
.navigation-view .panel > header h2,
.advanced-settings #settings-detail > h2 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.chat strong,
#conversation-info-trigger strong {
  color: #19162c;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
}
.chat small {
  color: #6f6880;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
}
.chat time,
.message small,
#conversation-info-trigger small {
  color: #756e83;
  font-size: 11px;
  font-weight: 400;
}
.chat:hover strong,
.chat.active strong { color: #19162c; }
.chat:hover small,
.chat.active small { color: #625b70; }
.message p {
  font-size: 14.2px;
  font-weight: 400;
  line-height: 1.35;
}
#composer input,
#composer textarea {
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.35;
}
.chat-filters button,
.workspace-tabs button,
.group-info-tabs button,
.chat-type button,
.sidebar-menu button,
.settings-hub-row b,
.settings-toggle-row b,
.settings-select-row b {
  font-size: 14px;
  font-weight: 500;
}
.sidebar-menu button { font-weight: 500; }
.panel-content h2,
.panel-content > h3,
.productivity-intro h2,
.profile-hero h2 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.settings-hub-row small,
.settings-toggle-row small,
.linked-device-row small { font-size: 12px; font-weight: 400; }

@media (max-width: 760px) {
  .chat-list-header .brand strong { font-size: 24px; }
  .chat { min-height: 72px; }
  .message p { font-size: 15px; }
  #composer input,
  #composer textarea { font-size: 16px; }
  .native-mobile #native-mobile-nav button small { font-size: 11px; font-weight: 500; }
}

/* Persistent day/night appearance --------------------------------------- */
:root[data-theme="dark"] body,
:root[data-theme="dark"] .app { color: #e9edef; background: #0b141a; }
:root[data-theme="dark"] #app-rail { border-color: #313d45; background: #111b21; }
:root[data-theme="dark"] #app-rail button { color: #aebac1; }
:root[data-theme="dark"] #app-rail button:hover,
:root[data-theme="dark"] #app-rail button.active { color: #fff; background: #2a243d; }
:root[data-theme="dark"] #sidebar,
:root[data-theme="dark"] #sidebar > header,
:root[data-theme="dark"] .conversation,
:root[data-theme="dark"] .conversation > header { color: #e9edef; border-color: #2f3b43; background: #111b21; }
:root[data-theme="dark"] .conversation > header { background: #202c33; }
:root[data-theme="dark"] .chat-list-header .brand strong,
:root[data-theme="dark"] .chat strong,
:root[data-theme="dark"] #conversation-info-trigger strong { color: #f1f4f5; }
:root[data-theme="dark"] .chat small,
:root[data-theme="dark"] .chat time,
:root[data-theme="dark"] #conversation-info-trigger small { color: #aebac1; }
:root[data-theme="dark"] .chat,
:root[data-theme="dark"] .workspace-card,
:root[data-theme="dark"] #company-shortcuts { border-color: #2f3b43; background: #111b21; }
:root[data-theme="dark"] .chat:hover,
:root[data-theme="dark"] .chat.active { background: #2a243d; }
:root[data-theme="dark"] .chat:hover strong,
:root[data-theme="dark"] .chat.active strong { color: #fff; }
:root[data-theme="dark"] .chat-search,
:root[data-theme="dark"] #chat-search,
:root[data-theme="dark"] .inside-search,
:root[data-theme="dark"] .chat-filters button { color: #d8dee1; border-color: #35424a; background: #202c33; }
:root[data-theme="dark"] .messages {
  background-color: #0b141a;
  background-image: none;
  filter: none;
}
:root[data-theme="dark"] .message { color: #e9edef; border-color: #344149; background: #202c33; box-shadow: 0 1px 2px #0005; }
:root[data-theme="dark"] .message.mine { color: #f7f3ff; border-color: #6f51aa; background: #3b245f; }
:root[data-theme="dark"] .message strong { color: #c4b5fd; }
:root[data-theme="dark"] .message small { color: #aebac1; }
:root[data-theme="dark"] .encryption { color: #d8ccff; border-color: #7257b5; background: #241b3b; }
:root[data-theme="dark"] .language,
:root[data-theme="dark"] .ai-assistant-bar,
:root[data-theme="dark"] #composer { color: #d7dee1; border-color: #2f3b43; background: #202c33; }
:root[data-theme="dark"] #composer input,
:root[data-theme="dark"] #composer textarea,
:root[data-theme="dark"] .language select { color: #e9edef; border-color: #3a474f; background: #2a3942; }
:root[data-theme="dark"] #workspace-bar { border-color: #2f3b43; background: #182229; }
:root[data-theme="dark"] #workspace-bar select,
:root[data-theme="dark"] #workspace-bar button { color: #edf2f4; border-color: #3a474f; background: #202c33; }
:root[data-theme="dark"] #workspace-bar select option { color: #edf2f4; background: #202c33; }
:root[data-theme="dark"] #chat-search-wrap,
:root[data-theme="dark"] .search-wrap { color: #aebac1; background: #202c33; }
:root[data-theme="dark"] #chat-search { color: #edf2f4; background: transparent; }
:root[data-theme="dark"] #chat-search::placeholder,
:root[data-theme="dark"] #composer textarea::placeholder { color: #9ca9af; }
:root[data-theme="dark"] .ai-assistant-bar b { color: #f1f4f5; }
:root[data-theme="dark"] .ai-assistant-bar small { color: #aebac1; }
:root[data-theme="dark"] .emoji-picker,
:root[data-theme="dark"] .sidebar-menu { color: #e9edef; border-color: #3a474f; background: #202c33; }
:root[data-theme="dark"] .sidebar-menu button { color: #e9edef; }
:root[data-theme="dark"] .sidebar-menu button:hover { background: #2a3942; }
:root[data-theme="dark"] .overlay.navigation-view { background: #0b141a; }
:root[data-theme="dark"] .navigation-view .panel,
:root[data-theme="dark"] .navigation-view .panel > header,
:root[data-theme="dark"] .navigation-view #panel-body { color: #e9edef; border-color: #2f3b43; background: #111b21; }
:root[data-theme="dark"] .navigation-view .panel > header > button { color: #dce3e6; background: #2a3942; }
:root[data-theme="dark"] .navigation-view .panel-content :is(.feature, .invoice-card, .productivity-card, .settings-hub-card, .settings-stack, .settings-info-card, .group-settings-card, .communities-intro, article) { color: #e9edef; border-color: #344149; background: #182229; }
:root[data-theme="dark"] .navigation-view :is(input, select, textarea) { color: #edf2f4; border-color: #3a474f; background: #202c33; }
:root[data-theme="dark"] .navigation-view :is(input, textarea)::placeholder { color: #9ca9af; }
:root[data-theme="dark"] .navigation-view select option { color: #edf2f4; background: #202c33; }
:root[data-theme="dark"] .calls-directory { color: #e9edef; border-color: #2f3b43; background: #111b21; }
:root[data-theme="dark"] .calls-dialpad { color: #e9edef; }
:root[data-theme="dark"] .calls-number-field { border-color: #86969e; }
:root[data-theme="dark"] .calls-number-field:focus-within { border-color: #a78bfa; }
:root[data-theme="dark"] .calls-number-field input { color: #f1f4f5; background: transparent; box-shadow: none; }
:root[data-theme="dark"] #overlay[data-panel="calls"] #calls-number-input {
  color: #f1f4f5 !important;
  -webkit-text-fill-color: #f1f4f5 !important;
  caret-color: #a78bfa !important;
  background: transparent !important;
  opacity: 1;
}
:root[data-theme="dark"] #overlay[data-panel="calls"] #calls-number-input::selection {
  color: #fff;
  -webkit-text-fill-color: #fff;
  background: #7c3aed;
}
:root[data-theme="dark"] .calls-dialpad-header button:hover,
:root[data-theme="dark"] .calls-keypad button:hover,
:root[data-theme="dark"] .calls-contact-picker-header button:hover,
:root[data-theme="dark"] .new-call-contact > div button:hover { background: #202c33; }
:root[data-theme="dark"] .calls-number-field + p,
:root[data-theme="dark"] .calls-keypad small,
:root[data-theme="dark"] .new-call-contact small { color: #aebac1; }
:root[data-theme="dark"] .new-call-search { color: #aebac1; border-color: #3a474f; }
:root[data-theme="dark"] .new-call-search:focus-within { border-color: #a78bfa; }
:root[data-theme="dark"] .new-call-search input { color: #e9edef; background: transparent; box-shadow: none; }
:root[data-theme="dark"] #overlay[data-panel="calls"] #new-call-search-input {
  color: #e9edef !important;
  -webkit-text-fill-color: #e9edef !important;
  caret-color: #a78bfa !important;
}
:root[data-theme="dark"] .new-call-contact > div button { color: #e9edef; }
:root[data-theme="dark"] .calls-launchpad { color: #e9edef; background: #151f25; }
:root[data-theme="dark"] .calls-directory-header button,
:root[data-theme="dark"] .call-contact-row button,
:root[data-theme="dark"] .call-history-row > button { color: #e9edef; }
:root[data-theme="dark"] .calls-directory-header button:hover,
:root[data-theme="dark"] .call-contact-row button:hover,
:root[data-theme="dark"] .call-history-row > button:hover { color: #fff; background: #2a3942; }
:root[data-theme="dark"] .calls-search,
:root[data-theme="dark"] .calls-launchpad-grid > button > span { color: #c4b5fd; background: #26333b; }
:root[data-theme="dark"] .calls-search input { color: #e9edef; background: transparent; box-shadow: none; }
:root[data-theme="dark"] .calls-search input::placeholder { color: #aebac1; }
:root[data-theme="dark"] #overlay[data-panel="calls"] #calls-search-input {
  color: #e9edef !important;
  -webkit-text-fill-color: #e9edef !important;
  caret-color: #a78bfa !important;
  background: transparent !important;
  opacity: 1;
}
:root[data-theme="dark"] #overlay[data-panel="calls"] #calls-search-input::selection {
  color: #fff;
  -webkit-text-fill-color: #fff;
  background: #7c3aed;
}
:root[data-theme="dark"] .calls-launchpad-grid > button { color: #e9edef; }
:root[data-theme="dark"] .call-contact-row,
:root[data-theme="dark"] .call-history-row { border-color: #2f3b43; }
:root[data-theme="dark"] .navigation-view .panel-content :is(.call-contact-row, .call-history-row) { background: transparent; }
:root[data-theme="dark"] #overlay[data-panel="calls"] .call-row {
  color: #e9edef;
  border-color: #2f3b43;
  background: #18242a;
}
:root[data-theme="dark"] #overlay[data-panel="calls"] .call-row strong { color: #f1f4f5; }
:root[data-theme="dark"] #overlay[data-panel="calls"] .call-row small { color: #aebac1; }
:root[data-theme="dark"] #overlay[data-panel="calls"] .network-readiness.warning {
  color: #f4d58a;
  border: 1px solid #665324;
  background: #302a1b;
}
:root[data-theme="dark"] #overlay[data-panel="calls"] .network-readiness.ready {
  color: #8fe1c2;
  border: 1px solid #235f4c;
  background: #17352c;
}
:root[data-theme="dark"] #overlay[data-panel="calls"] .network-readiness small { color: inherit; opacity: .82; }
:root[data-theme="dark"] .calls-section-title button { color: #d8ccff; background: #38255b; }
:root[data-theme="dark"] .status-person,
:root[data-theme="dark"] .status-person strong { color: #f1f4f5; }
:root[data-theme="dark"] .status-person small { color: #aebac1; }
:root[data-theme="dark"] .productivity-page,
:root[data-theme="dark"] .communities-panel,
:root[data-theme="dark"] .workspace-panel { color: #e9edef; background: #111b21; }
:root[data-theme="dark"] .settings-hub-row,
:root[data-theme="dark"] .settings-toggle-row,
:root[data-theme="dark"] .settings-select-row,
:root[data-theme="dark"] .linked-device-row { color: #e9edef; border-color: #344149; background: #182229; }
:root[data-theme="dark"] ::selection { color: #fff; background: #7c3aed; }

:root[data-theme="dark"] #overlay[data-panel="calls"] .calls-schedule-panel{border-color:#2f3d44;background:#151f25;color:#e9edef;box-shadow:0 18px 50px rgba(0,0,0,.5)}
:root[data-theme="dark"] #overlay[data-panel="calls"] .calls-schedule-panel>header button:hover{background:#26343b}
:root[data-theme="dark"] #overlay[data-panel="calls"] .calls-schedule-panel>label,:root[data-theme="dark"] #overlay[data-panel="calls"] .schedule-time-grid label,:root[data-theme="dark"] #overlay[data-panel="calls"] .calls-schedule-panel>p{color:#aebac1}
:root[data-theme="dark"] #overlay[data-panel="calls"] .calls-schedule-panel :is(input,textarea,select){color:#f1f4f5!important;-webkit-text-fill-color:#f1f4f5!important;background:#202c33!important;border-color:#52616a}
:root[data-theme="dark"] #overlay[data-panel="calls"] .schedule-option{border-color:#2f3d44}
:root[data-theme="dark"] #overlay[data-panel="calls"] .schedule-type{border-color:#3a474f;background:#202c33}
:root[data-theme="dark"] #overlay[data-panel="calls"] .calls-schedule-panel .schedule-remove-end{color:#aebac1!important;background:transparent!important}
:root[data-theme="dark"] #overlay[data-panel="calls"] .calls-schedule-panel .schedule-remove-end:hover{color:#c4a7ff!important;background:#202c33!important}

/* Business tools split view */
:root[data-theme="dark"] #overlay[data-panel="tools"] .tools-panel,
:root[data-theme="dark"] #overlay[data-panel="tools"] #tools-detail {
  color: #e9edef;
  background: #111b21;
}
:root[data-theme="dark"] #overlay[data-panel="tools"] #tools-home {
  color: #e9edef;
  border-color: #2a3942;
  background: #111b21;
}
:root[data-theme="dark"] #overlay[data-panel="tools"] .business-tools-group,
:root[data-theme="dark"] #overlay[data-panel="tools"] .business-tool-detail-header {
  border-color: #2a3942;
}
:root[data-theme="dark"] #overlay[data-panel="tools"] :is(.business-tools-heading h2, .business-tools-group h3, .business-tool-row, .business-tools-empty h3, .business-tool-detail-header h3, .business-tool-card h4) {
  color: #f1f4f5;
}
:root[data-theme="dark"] #overlay[data-panel="tools"] :is(.business-tool-row small, .business-tool-icon, .business-tool-chevron, .business-tools-empty, .business-tool-card > p, .business-tool-switch small, .business-tool-placeholder) {
  color: #aebac1;
}
:root[data-theme="dark"] #overlay[data-panel="tools"] .business-tool-row:hover {
  background: #202c33;
}
:root[data-theme="dark"] #overlay[data-panel="tools"] .business-tool-detail-header,
:root[data-theme="dark"] #overlay[data-panel="tools"] .business-tool-card {
  color: #e9edef;
  border-color: #2a3942;
  background: #202c33;
  box-shadow: none;
}
:root[data-theme="dark"] #overlay[data-panel="tools"] :is(.business-tool-switch, .business-tool-placeholder) {
  border-color: #2a3942;
}
:root[data-theme="dark"] #overlay[data-panel="tools"] .business-tool-card :is(input, textarea, select) {
  color: #edf2f4;
  border-color: #3b4a54;
  background: #2a3942;
}
:root[data-theme="dark"] #overlay[data-panel="tools"] .business-tool-card :is(input, textarea)::placeholder {
  color: #8e9ba1;
}
:root[data-theme="dark"] #overlay[data-panel="tools"] :is(.tool-chat-select label, #chat-lists article, .starred-list article) {
  color: #e9edef;
  border-color: #2a3942;
  background: #202c33;
}
:root[data-theme="dark"] #overlay[data-panel="tools"] .tool-bulk-actions {
  background: #202c33;
}
:root[data-theme="dark"] #overlay[data-panel="tools"] .storage-summary {
  color: #e9edef;
  border: 1px solid #2a3942;
  background: #202c33;
}
:root[data-theme="dark"] #overlay[data-panel="tools"] .storage-summary p { color: #aebac1; }

/* Keep entered search text legible throughout every dark-theme surface. */
:root[data-theme="dark"] :is(
  #chat-search,
  #search-bar input,
  .inside-search input,
  .settings-search input,
  .contact-search input,
  .calls-search input,
  .new-call-search input,
  .attachment-search input,
  .group-member-search input,
  #group-member-search,
  #group-member-search-v2,
  #admin-user-search,
  input[type="search"]
) {
  color: #e9edef !important;
  -webkit-text-fill-color: #e9edef !important;
  caret-color: #a78bfa !important;
  opacity: 1;
}
:root[data-theme="dark"] :is(
  #chat-search,
  #search-bar input,
  .inside-search input,
  .settings-search input,
  .contact-search input,
  .calls-search input,
  .new-call-search input,
  .attachment-search input,
  .group-member-search input,
  #group-member-search,
  #group-member-search-v2,
  #admin-user-search,
  input[type="search"]
)::placeholder {
  color: #9ca9af !important;
  -webkit-text-fill-color: #9ca9af !important;
  opacity: 1;
}
:root[data-theme="dark"] :is(
  #chat-search,
  #search-bar input,
  .inside-search input,
  .settings-search input,
  .contact-search input,
  .calls-search input,
  .new-call-search input,
  .attachment-search input,
  .group-member-search input,
  #group-member-search,
  #group-member-search-v2,
  #admin-user-search,
  input[type="search"]
)::selection {
  color: #fff;
  -webkit-text-fill-color: #fff;
  background: #7c3aed;
}
:root[data-theme="dark"] .search,
:root[data-theme="dark"] .inside-search,
:root[data-theme="dark"] .settings-search,
:root[data-theme="dark"] .contact-search,
:root[data-theme="dark"] .calls-search,
:root[data-theme="dark"] .new-call-search {
  color: #aebac1;
  border-color: #3a474f;
  background: #202c33;
}
:root[data-theme="dark"] .voice-recording { color:#e9edef; background:#2a3942; }

/* Dark-mode text entry must not depend on page-specific input class names. */
:root[data-theme="dark"] :is(
  input:not([type]),
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  input[type="password"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  textarea,
  [contenteditable="true"]
):not(:disabled) {
  color: #e9edef !important;
  -webkit-text-fill-color: #e9edef !important;
  caret-color: #a78bfa !important;
}
:root[data-theme="dark"] :is(
  input:not([type]),
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  input[type="password"],
  textarea
)::placeholder {
  color: #9ca9af !important;
  -webkit-text-fill-color: #9ca9af !important;
  opacity: 1;
}

/* Keep verified/read-only values legible on dark application surfaces. */
:root[data-theme="dark"] .navigation-view :is(input, select, textarea):disabled {
  color: #c7d0d5 !important;
  -webkit-text-fill-color: #c7d0d5 !important;
  border-color: #3a474f;
  background: #1b272e;
  opacity: 1;
}
:root[data-theme="dark"] .profile-panel .settings-form,
:root[data-theme="dark"] .profile-panel .profile-security {
  color: #e9edef;
  border-color: #344149;
  background: #182229;
}
:root[data-theme="dark"] .profile-panel .privacy-note,
:root[data-theme="dark"] .profile-panel .profile-security span {
  color: #aebac1;
}

/* Authentication remains a light card even when the saved app theme is dark. */
:root[data-theme="dark"] .auth-card {
  color: #101828;
  background: #fff;
}
:root[data-theme="dark"] .auth-card h1,
:root[data-theme="dark"] .auth-card #auth-help {
  color: #101828;
}
:root[data-theme="dark"] .auth-card label {
  color: #344741;
}
:root[data-theme="dark"] #auth.auth-page .auth-card :is(input, select) {
  color: #17211f !important;
  -webkit-text-fill-color: #17211f !important;
  caret-color: #6d28d9 !important;
  border-color: #d5dfdc;
  background: #fff;
  opacity: 1;
}
:root[data-theme="dark"] #auth.auth-page .auth-card :is(input, select)::placeholder {
  color: #71807b !important;
  -webkit-text-fill-color: #71807b !important;
}
:root[data-theme="dark"] .auth-card .tabs {
  color: #4c1d95;
  background: #f1ebff;
}
:root[data-theme="dark"] .auth-card .tabs button {
  color: #4c1d95;
}
:root[data-theme="dark"] .auth-card .tabs button.active {
  color: #6d28d9;
  background: #fff;
}