/* Neutral background roles. Keep brand, text, icons and message roles intact. */
html[data-theme="dark"] {
  --web-surface:#111111;
  --web-background:#000000;
  --panel:#111111;
  --cream:#000000;
  --composer:#111111;
  --chat-bg:#000000;
  --their-bubble:#0e1524;
}
html[data-theme="dark"] body {background:#000000}
html[data-theme="dark"] #loginView.web-auth-layout {background:#000000}
html[data-theme="dark"] .web-auth-brand {background:#111111}
html[data-theme="dark"] .web-auth-note {background:#202020}
html[data-theme="dark"] #appView .chat-row.active {background:#202020}
html[data-theme="dark"] .conversation {background-image:none}
html[data-theme="dark"] .call-overlay {background:linear-gradient(180deg,#111111,#000000)}
html[data-theme="dark"] .conference-tile {background:#181818}
html[data-theme="dark"] .call-minimized .call-control-panel {background:#161616df}
/* Dense rows and aligned columns, while retaining full interactive targets. */
#appView .sidebar-header {padding:14px 16px 4px}
#appView .search-wrap {padding:6px 16px 10px}
#appView .search-wrap .search-icon {left:29px}
#appView .search-wrap input {min-height:38px;padding-block:8px;border-radius:20px}
#appView .chat-filter-chips {padding:0 12px 8px;overflow-x:auto;flex-shrink:0}
#appView .chat-filter-chip {flex:0 0 auto;min-height:32px;padding:6px 10px}
#appView .chat-row {min-height:70px;padding:9px 12px 9px 14px;border-bottom-color:transparent}
#appView .chat-row>.avatar {width:43px;height:43px}
#appView .chat-name {margin-bottom:0}
#appView .chat-preview {margin-top:2px}
#appView .chat-meta {max-width:82px}
#appView .chat-meta .favourite-toggle {min-width:28px;min-height:28px}
body .settings-page-content>.settings-section {padding:18px}
body .settings-section h2 {margin-bottom:12px}
body .social-list .social-row {padding-block:9px}
.refinement-dialog {width:min(520px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0;overflow:hidden;display:flex;flex-direction:column;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:12px}
.refinement-dialog:not([open]) {display:none}
.refinement-dialog::backdrop {background:#0008}
.refinement-dialog header {display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);flex-shrink:0}
.refinement-dialog h2 {flex:1;margin:0;font-size:18px}
.refinement-scroll {min-height:0;overflow:auto;padding:12px 16px}
.refinement-dialog input:not([type="checkbox"]),.refinement-dialog textarea {width:100%;padding:10px 12px;background:var(--cream);color:var(--ink);border:1px solid var(--line);border-radius:8px;font:inherit;margin:6px 0}
.refinement-row {display:flex;align-items:center;gap:12px;min-height:48px;padding:6px 0}
.refinement-row>span {flex:1;min-width:0;overflow-wrap:anywhere}
.refinement-row small {display:block;color:var(--muted);margin-top:3px}
.refinement-row button {flex-shrink:0}
.refinement-dialog .refinement-hint {color:var(--muted);font-size:12px;line-height:1.5}
.refinement-save {margin-left:auto}
.refinement-error {color:var(--danger);font-size:12px;min-height:16px}
html[data-reduce-motion="true"] *,html[data-reduce-motion="true"] *::before,html[data-reduce-motion="true"] *::after {animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
@media(prefers-reduced-motion:reduce) {*,*::before,*::after {animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

html[data-theme="dark"] body {background-image:none}
html[data-theme="dark"] .call-more-menu {background:#111111}
html[data-theme="dark"] .media-gallery-viewer {background:#000000}
html[data-theme="dark"] .social-dialog,html[data-theme="dark"] .social-form-dialog {background:#111111}
.refinement-row {flex-wrap:wrap}
.refinement-row>input[type="checkbox"] {flex:0 0 auto}
.refinement-dialog,.refinement-dialog * {box-sizing:border-box}
body .settings-section label:has(input[type="checkbox"]) {display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:38px;padding:3px 0;margin:0}
body .settings-section label:has(input[type="checkbox"]) input {width:16px;height:16px;min-height:0;flex:0 0 16px;margin:0}
body .settings-section label:has(input[type="checkbox"]) small {flex-basis:100%;margin-inline-start:24px}
body #autoDownloadSettings {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
body #autoDownloadSettings fieldset {margin:0;padding:8px 12px}
body .refinement-settings-actions {display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
body .refinement-storage-actions {display:flex;flex-wrap:wrap;gap:8px}
@media(max-width:760px) {body #autoDownloadSettings {grid-template-columns:1fr}}
.refinement-storage-line {display:block;margin-block:8px}

/* Secondary action paint is an existing control colour, not a canvas role. */
html[data-theme="dark"] body .secondary {background:#182235}