/* Palette contract. Loaded after component CSS; layout and media are untouched.
   body[data-palette] selects a hue; body.dark independently selects brightness.
   Missing/unknown palette attributes retain the green default. */
:root, body, body:not(.dark) {
  color-scheme:light;
  --chrome-bg:#124b3b; --chrome-text:#f4faf7; --rail-bg:#124b3b;
  --sidebar-bg:#e5eee8; --bg:#f8f7f3; --panel:#ffffff;
  --text:#172b28; --muted:#5e706a; --line:#d1ded7;
  --accent:#146447; --accent-soft:#d6e8dc; --hover:#eaf1ec; --on-accent:#ffffff;
  --field-bg:#f7faf8; --field-line:#8b9f95;
  --danger:#a62c38; --danger-soft:#fff0f1; --danger-fill:#b3303b;
  --warning:#77500b; --warning-soft:#fff2d7;
  --success:#226345; --success-soft:#e2f2e7; --info:#285a86; --info-soft:#e6effb;
  --overlay:rgba(11,20,17,.48); --shadow:0 18px 60px rgba(14,30,23,.16);
}
body.dark {
  color-scheme:dark;
  --chrome-bg:#0c271f; --chrome-text:#e8f5ef; --rail-bg:#0c271f;
  --sidebar-bg:#142923; --bg:#242d35; --panel:#303b44;
  --text:#f1f4f7; --muted:#becbd5; --line:#4a5965;
  --accent:#9dd8b5; --accent-soft:#284c40; --hover:#394852; --on-accent:#12291c;
  --field-bg:#26323a; --field-line:#8297a3;
  --danger:#ffabb1; --danger-soft:#40252b;
  --warning:#f3ce86; --warning-soft:#3d3320;
  --success:#9ee0b2; --success-soft:#223c2c; --info:#aed0ff; --info-soft:#22344d;
  --overlay:rgba(3,8,5,.68); --shadow:0 18px 60px rgba(0,0,0,.34);
}
body[data-palette="graphite"] {
  --chrome-bg:#282b30; --chrome-text:#f6f7f9; --rail-bg:#282b30;
  --sidebar-bg:#e9eaec; --bg:#f6f6f5; --panel:#ffffff;
  --text:#252a30; --muted:#616870; --line:#d5d9dd;
  --accent:#414b58; --accent-soft:#dce1e7; --hover:#edf0f3; --on-accent:#ffffff;
  --field-bg:#f7f8f9; --field-line:#929aa4;
}
body[data-palette="graphite"].dark {
  --chrome-bg:#17191d; --chrome-text:#eef0f4; --rail-bg:#17191d;
  --sidebar-bg:#22272d; --bg:#252c34; --panel:#343d47;
  --text:#edf0f4; --muted:#b8bfc9; --line:#47505c;
  --accent:#c8d0db; --accent-soft:#3d4857; --hover:#363e49; --on-accent:#20262d;
  --field-bg:#29313a; --field-line:#8795a5;
}
body[data-palette="violet"] {
  --chrome-bg:#413355; --chrome-text:#fbf7ff; --rail-bg:#413355;
  --sidebar-bg:#ece7f2; --bg:#f8f6fa; --panel:#ffffff;
  --text:#2c2536; --muted:#70647b; --line:#ded4e6;
  --accent:#704789; --accent-soft:#e9ddf2; --hover:#f0e9f5; --on-accent:#ffffff;
  --field-bg:#fbf8fd; --field-line:#a08cad;
}
body[data-palette="violet"].dark {
  --chrome-bg:#241c33; --chrome-text:#f2ebfa; --rail-bg:#241c33;
  --sidebar-bg:#2b2338; --bg:#2d2937; --panel:#393343;
  --text:#f2ebf8; --muted:#c7b8d6; --line:#564465;
  --accent:#d5b4ee; --accent-soft:#4b355d; --hover:#41314f; --on-accent:#30203d;
  --field-bg:#302a3b; --field-line:#aa93bc;
}
body[data-palette="blue"] {
  --chrome-bg:#173e63; --chrome-text:#f4f8ff; --rail-bg:#173e63;
  --sidebar-bg:#e4ecf4; --bg:#f5f8fb; --panel:#ffffff;
  --text:#223247; --muted:#5d7087; --line:#d0ddea;
  --accent:#285f94; --accent-soft:#d8e7f6; --hover:#e9f0f8; --on-accent:#ffffff;
  --field-bg:#f7faff; --field-line:#879db6;
}
body[data-palette="blue"].dark {
  --chrome-bg:#11253a; --chrome-text:#eaf3ff; --rail-bg:#11253a;
  --sidebar-bg:#192d43; --bg:#202e3e; --panel:#2c3d51;
  --text:#edf3fc; --muted:#b5c7dd; --line:#3e5673;
  --accent:#acd0f5; --accent-soft:#2c4b6c; --hover:#2b425e; --on-accent:#162d46;
  --field-bg:#25354a; --field-line:#879fbc;
}
/* Existing modules read these aliases. Keep them on body so palette changes
   resolve there rather than inheriting a pre-resolved value from :root. */
body, body:not(.dark), body.dark {
  --rail:var(--rail-bg); --sidebar:var(--sidebar-bg); --surface:var(--panel);
  --focus-ring:var(--accent); --scroll-thumb:var(--field-line);
  background:var(--bg); color:var(--text);
}

/* Main surfaces and the older settings/auth components. No geometry changes. */
body:is(.dark,:not(.dark)) :is(dialog,.login-card,.auth-shell,.settings-main,.approval-content,
  .home-card,.home-tools,.tool-card,.feedback-item,.details-panel,.search-results,.message-file,
  .emoji-picker,.secondary-button,.integration-button,.approval-actions button,.reaction) {
  background-color:var(--panel); color:var(--text); border-color:var(--line);
}
body:is(.dark,:not(.dark)) :is(.home-view,.chat-panel,.composer-wrap) { background:var(--bg); }
body:is(.dark,:not(.dark)) :is(.home-header,.chat-header,.details-panel>header) { background:var(--panel); border-color:var(--line); }
body:is(.dark,:not(.dark)) :is(.sidebar,.settings-nav) { background:var(--sidebar-bg); border-color:var(--line); }
body:is(.dark,:not(.dark)) :is(.workspace-rail) { background:var(--rail-bg); color:var(--chrome-text); }
body:is(.dark,:not(.dark)) :is(.login-screen) { background:radial-gradient(ellipse at 15% 10%,var(--accent-soft),transparent 55%),var(--bg); }
body:is(.dark,:not(.dark)) .register-card { background:var(--bg)!important; }
body:is(.dark,:not(.dark)) :is(.auth-login,.settings-header,.profile-card,.file-item,.result-item) { border-color:var(--line)!important; }
body:is(.dark,:not(.dark)) .home-hero { background:transparent; border-color:var(--line); }
body:is(.dark,:not(.dark)) :is(.home-stats button,.integration-card,.settings-note,.member-option,.busy-item,.file-thumb,.file-tabs,.upload-preview,.format-toolbar,.format-toolbar-toggle) { background:var(--field-bg); border-color:var(--line); color:var(--text); }
body:is(.dark,:not(.dark)) :is(.home-list-item:hover,.result-item:hover,.settings-nav-item:hover,.member-option:hover,.file-tabs .selected) { background:var(--hover); border-color:var(--line); color:var(--text); }
body:is(.dark,:not(.dark)) :is(.settings-nav-item,.file-tabs button,.channel-pref,.composer button,.more-button,.password-toggle) { color:var(--muted); }
body:is(.dark,:not(.dark)) :is(.settings-nav-item.selected,.theme-option.selected,.format-toolbar button[aria-pressed="true"],.register-mode-switch button.selected) { background:var(--accent-soft); color:var(--accent); border-color:var(--accent); }
body:is(.dark,:not(.dark)) :is(.format-toolbar-toggle:hover,.format-toolbar-toggle[aria-expanded=true],.format-toolbar-toggle.has-format) { background:var(--accent-soft); color:var(--accent); border-color:var(--accent); }
body:is(.dark,:not(.dark)) .register-mode-switch button:not(.selected) { color:var(--muted); }
body:is(.dark,:not(.dark)) :is(.settings-header h2,.settings-nav-brand strong,.dialog-header h2,.approval-item strong,.settings-panel label,.settings-panel legend,.profile-editor-head strong,.login-card h1,.login-card label,.search-results h3,.result-item strong,.sidebar-header h2,#workspaceName) { color:var(--text); }
body:is(.dark,:not(.dark)) :is(.eyebrow,.empty,.login-card small,.login-card>p,.settings-lead,.dialog-description,.profile-editor-head span,.settings-note p,.integration-card p,.register-entry,.result-item span,.member-option small,.channel-section-title,.channel-copy span,.channel-item.selected .channel-copy span,.details-profile p,.group-danger-zone p,.date-divider,.message-meta time,.composer-wrap>p) { color:var(--muted); }
body:is(.dark,:not(.dark)) :is(.theme-option,.register-mode-switch,.message-retracted,.announcement-item.retracted) { background:var(--field-bg); border-color:var(--line); color:var(--text); }
body:is(.dark,:not(.dark)) :is(.workspace-confirm-card,.workspace-invite-card,.notification-permission-card) { background:var(--accent-soft); border-color:var(--accent); color:var(--text); }
body:is(.dark,:not(.dark)) :is(.workspace-confirm-card strong,.workspace-invite-card code) { color:var(--text); }
body:is(.dark,:not(.dark)) .workspace-invite-card code { background:var(--panel); border-color:var(--line); }
body:is(.dark,:not(.dark)) :is(.avatar,.brand-mark,.workspace-logo,.home-list-icon,.tool-icon,.tool-preview-icon) { background-color:var(--accent-soft); color:var(--accent); }
body:is(.dark,:not(.dark)) :is(.home-list-icon.schedule,.tool-icon.secretary,.tool-icon.codex,.tool-icon.feedback,.tool-icon.schedule) { background:var(--accent-soft); color:var(--accent); }
body:is(.dark,:not(.dark)) #workspaceEditor { background:var(--field-bg); color:var(--text); border-color:var(--line); }
body:is(.dark,:not(.dark)) .avatar-current { border-color:var(--accent); }
body:is(.dark,:not(.dark)) :is(.toast) { background:var(--chrome-bg); color:var(--chrome-text); }
body:is(.dark,:not(.dark)) dialog::backdrop { background:var(--overlay); }
body:is(.dark,:not(.dark)) .sidebar-backdrop { background:var(--overlay); }

/* Inputs have a few legacy !important declarations; the bounded override is
   limited to forms, and never touches video, canvas, images or avatar images. */
body:is(.dark,:not(.dark)) :is(#profileNameInput,#workspaceNameInput,
  .settings-panel input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
  .settings-panel textarea,.settings-panel select,.login-card input,.login-card select,
  dialog input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
  dialog textarea,dialog select,.member-picker-toolbar input,.format-toolbar select) {
  background-color:var(--field-bg)!important; color:var(--text)!important; border-color:var(--field-line)!important;
}
body:is(.dark,:not(.dark)) :is(input,textarea)::placeholder { color:var(--muted); opacity:1; }
body:is(.dark,:not(.dark)) :is(.profile-dialog input,.profile-dialog textarea,.login-card input,dialog input,dialog textarea)::placeholder { color:var(--muted); opacity:1; }
body:is(.dark,:not(.dark)) :is(input[type=checkbox],input[type=radio]) { accent-color:var(--accent); }
body:is(.dark,:not(.dark)) :is(button,a,input,textarea,select):focus-visible { outline-color:var(--focus-ring); }
body:is(.dark,:not(.dark)) :is(.icon-button,.action-button,.password-toggle) { color:var(--muted)!important; border-color:var(--line)!important; background-color:var(--panel)!important; }
body:is(.dark,:not(.dark)) :is(.icon-button,.action-button,.password-toggle):hover { color:var(--accent)!important; background-color:var(--accent-soft)!important; }

/* Brand actions use the matching foreground in both modes. */
body:is(.dark,:not(.dark)) :is(.primary-button,.approval-actions .approve,
  .app-shell .composer .send-button,.ai-button.ai-primary,.mw-primary,
  .mw-event-confirm [data-mw-action=create-event],.mw-calendar-toolbar [data-mw-action=prepare-event],
  .wm-primary,.call-accept,#clientUpdates .client-update-actions button.primary) {
  background:var(--accent); border-color:var(--accent); color:var(--on-accent);
}
body:is(.dark,:not(.dark)) :is(.primary-button,.approval-actions .approve,.app-shell .composer .send-button,
  .ai-button.ai-primary,.wm-primary,.call-accept,#clientUpdates .client-update-actions button.primary):hover:not(:disabled) {
  background:var(--accent); color:var(--on-accent); filter:brightness(.94);
}
body:is(.dark,:not(.dark)) :is(.unread,.home-list-item>b,.workspace-confirm-card:before) { background:var(--accent); color:var(--on-accent); }
body:is(.dark,:not(.dark)) :is(.ai-status-connected,.ai-status-created,.ai-text-success,.ai-inline-status,.call-control[aria-pressed=true]) { color:var(--accent); }
body:is(.dark,:not(.dark)) :is(.ai-status-connected,.ai-status-created,.call-control[aria-pressed=true]) { background:var(--accent-soft); border-color:var(--accent); }
body:is(.dark,:not(.dark)) :is(.calendar-prefs-grid select,.calendar-prefs-auto) { border-color:var(--line); }

/* Desktop and mobile navigation share the same palette without changing their
   different layout/visibility rules. */
body:is(.dark,:not(.dark)) .workspace-list button { background:color-mix(in srgb,var(--chrome-text) 12%,var(--rail-bg)); border-color:color-mix(in srgb,var(--chrome-text) 35%,var(--rail-bg)); color:var(--chrome-text); }
body:is(.dark,:not(.dark)) .workspace-list button:hover { background:color-mix(in srgb,var(--chrome-text) 22%,var(--rail-bg)); }
body:is(.dark,:not(.dark)) .workspace-list button:is(.selected,[aria-current=true],[aria-current=page]) { background:var(--accent-soft); color:var(--text); border-color:var(--accent-soft); box-shadow:0 0 0 2px var(--rail-bg),0 0 0 4px color-mix(in srgb,var(--chrome-text) 60%,var(--rail-bg)); }
body:is(.dark,:not(.dark)) :is(.workspace-add-button,.workspace-manager-button,.rail-button,.rail-brand) { color:var(--chrome-text); border-color:color-mix(in srgb,var(--chrome-text) 45%,var(--rail-bg)); }
body:is(.dark,:not(.dark)) .workspace-add-button:hover { background:color-mix(in srgb,var(--chrome-text) 12%,var(--rail-bg)); }
body:is(.dark,:not(.dark)) .workspace-startup::before { border-color:var(--line); border-top-color:var(--accent); }
body:is(.dark,:not(.dark)) .app-shell .workspace-tools .rail-nav-button.selected,
body:is(.dark,:not(.dark)) .app-shell .channel-item.selected,
body:is(.dark,:not(.dark)) .app-shell .channel-item.selected .channel-pref-actions { background:var(--accent-soft); color:var(--accent); }
body:is(.dark,:not(.dark)) .app-shell .channel-item.selected .channel-copy strong { color:var(--text); }
body:is(.dark,:not(.dark)) .app-shell .search-wrap { background:var(--field-bg); border-color:var(--line); }
body:is(.dark,:not(.dark)) .search-wrap kbd { background:var(--hover); border-color:var(--line); color:var(--muted); }
body:is(.dark,:not(.dark)) .composer { background:var(--panel); border-color:var(--field-line); }
body:is(.dark,:not(.dark)) .composer:focus-within { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft); }
body:is(.dark,:not(.dark)) :is(.message-actions,.message-actions button,.format-toolbar button) { background:var(--panel); border-color:var(--line); color:var(--text); }
body:is(.dark,:not(.dark)) .messages::-webkit-scrollbar-thumb { background:var(--scroll-thumb); }
@media(max-width:720px) {
  body:is(.dark,:not(.dark)) .bubble { background:var(--panel); border-color:var(--line); }
  body:is(.dark,:not(.dark)) .message-row.mine .bubble { background:var(--accent-soft); border-color:var(--line); }
}

/* Semantic colors are independent of the brand palette. */
body:is(.dark,:not(.dark)) :is(.auth-alert,.ai-inline-error,.ai-status-failed,.ai-status-reauthorization_required,.ai-button.ai-danger,.danger-button,.settings-logout,.member-option-removing .member-option-membership,.busy-item button) { color:var(--danger); }
body:is(.dark,:not(.dark)) :is(.auth-alert,.ai-status-failed,.ai-status-reauthorization_required,.ai-button.ai-danger,.danger-button,.settings-logout,.mw-error,.wm-error,.ai-notice-error,.member-option.member-option-removing) { background:var(--danger-soft); border-color:color-mix(in srgb,var(--danger) 45%,var(--line)); }
body:is(.dark,:not(.dark)) :is(.danger-button,.settings-logout):hover { background:var(--danger-soft); }
body:is(.dark,:not(.dark)) .call-hangup { background:var(--danger-fill); color:#fff; border-color:var(--danger-fill); }
body:is(.dark,:not(.dark)) :is(.mw-review,.mw-uncertain,.ai-text-warning,.ai-review-note,.ai-status-needs_review,.ai-status-reconciliation_required,.ai-status-disconnecting) { color:var(--warning); }
body:is(.dark,:not(.dark)) .home-list-icon.notice { background:var(--warning-soft); color:var(--warning); }
body:is(.dark,:not(.dark)) :is(.mw-warning,.ai-confirm,.ai-notice-warning,.call-warning,.ai-status-needs_review,.ai-status-reconciliation_required,.ai-status-disconnecting,.announcement-item,.announcement-banner,.home-notice-item.is-unread,.feedback-status.open) { background:var(--warning-soft); border-color:color-mix(in srgb,var(--warning) 35%,var(--line)); color:var(--warning); }
body:is(.dark,:not(.dark)) :is(.announcement-banner-heading time,.announcement-banner-excerpt,.announcement-actions button,.announcement-banner-view) { color:var(--warning); }
body:is(.dark,:not(.dark)) :is(.announcement-actions button,.announcement-banner-view,.announcement-banner-icon) { background:var(--warning-soft); border-color:var(--warning); }
body:is(.dark,:not(.dark)) .auth-alert.success { background:var(--success-soft); color:var(--success); border-color:var(--success); }
body:is(.dark,:not(.dark)) :is(.ai-status-pending,.ai-status-processing) { background:var(--info-soft); color:var(--info); border-color:var(--info); }
/* Personal mentions and starred items retain their amber attention meaning. */
body:is(.dark,:not(.dark)) :is(.mention-name.mention-self,.channel-pref.active,.channel-pref:hover) { background:var(--warning-soft); color:var(--warning); }
body:is(.dark,:not(.dark)) .message-row.mentioned { background:color-mix(in srgb,var(--warning) 9%,transparent); box-shadow:inset 3px 0 var(--warning); }

/* Personal preferences: four always-recognizable previews, independent of the
   active palette. Markup: button.palette-option[data-palette][aria-pressed],
   span.palette-preview > i + i + i, followed by a visible localized label. */
#appearancePreferences { min-width:0; color:var(--text); }
#appearancePreferences h3 { font-size:17px; line-height:1.4; margin:0 0 10px; }
#appearancePreferences h3:not(:first-child) { margin-top:26px; }
.appearance-hint,.appearance-status { color:var(--muted); font-size:13px; line-height:1.65; overflow-wrap:anywhere; }
.appearance-status { min-height:22px; margin:15px 0 0; }
.palette-options { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:20px 0 24px; }
.palette-option { --preview-chrome:#124b3b; --preview-side:#e5eee8; --preview-page:#f8f7f3; display:flex; flex-direction:column; align-items:stretch; gap:11px; min-width:0; min-height:44px; padding:9px; border:1px solid var(--field-line); border-radius:11px; background:var(--panel); color:var(--text); text-align:left; font:inherit; font-size:13px; line-height:1.45; font-weight:600; overflow-wrap:anywhere; cursor:pointer; }
.palette-option[data-palette=graphite] { --preview-chrome:#282b30; --preview-side:#e9eaec; --preview-page:#f6f6f5; }
.palette-option[data-palette=violet] { --preview-chrome:#413355; --preview-side:#ece7f2; --preview-page:#f8f6fa; }
.palette-option[data-palette=blue] { --preview-chrome:#173e63; --preview-side:#e4ecf4; --preview-page:#f5f8fb; }
.palette-option:hover { background:var(--hover); border-color:var(--accent); }
.palette-option[aria-pressed=true] { background:var(--accent-soft); border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.palette-option[aria-pressed=true]::after { content:'✓'; align-self:flex-end; font-weight:800; color:var(--accent); margin-top:-28px; padding:3px; background:var(--accent-soft); border-radius:5px; }
.palette-option>strong,.palette-option>span:not(.palette-preview) { padding-right:21px; }
.palette-preview { position:relative; display:grid; grid-template-columns:12% 30% 1fr; height:68px; width:100%; min-width:0; border-radius:5px; overflow:hidden; border:1px solid #00000014; padding-top:10px; background:var(--preview-chrome); }
.palette-preview>i:nth-child(1) { background:var(--preview-chrome); }
.palette-preview>i:nth-child(2) { background:var(--preview-side); }
.palette-preview>i:nth-child(3) { background:var(--preview-page); }
.palette-preview>i:nth-child(3)::after { content:''; display:block; margin:12px 8px; height:3px; background:#61736a40; box-shadow:0 8px #61736a25,0 16px #61736a25; }
body.dark .palette-option { --preview-chrome:#0c271f; --preview-side:#142923; --preview-page:#242d35; }
body.dark .palette-option[data-palette=graphite] { --preview-chrome:#17191d; --preview-side:#22272d; --preview-page:#252c34; }
body.dark .palette-option[data-palette=violet] { --preview-chrome:#241c33; --preview-side:#2b2338; --preview-page:#2d2937; }
body.dark .palette-option[data-palette=blue] { --preview-chrome:#11253a; --preview-side:#192d43; --preview-page:#202e3e; }
#appearancePreferences .theme-option { color:var(--text); }
#appearancePreferences .theme-option[aria-pressed=true] { background:var(--accent-soft); border-color:var(--accent); }
#appearanceRetry { min-height:44px; margin-top:12px; }
@media(max-width:640px) { .palette-options { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .palette-option { padding:10px; font-size:14px; } }
@media(forced-colors:active) { .palette-option[aria-pressed=true] { outline:2px solid Highlight; } .palette-preview { forced-color-adjust:none; } }
