/* Shared semantic colors keep every page, dialog and message on the same theme. */
:root {
  --wa-accent: #008069;
  --wa-accent-hover: #006b58;
  --wa-bright: #25d366;
  --wa-on-accent: #fff;
  --wa-brand: #075e54;
  --wa-bg: #f0f2f5;
  --wa-surface: #fff;
  --wa-subtle: #f0f2f5;
  --wa-selected: #e7f6ef;
  --wa-text: #111b21;
  --wa-muted: #54656f;
  --wa-soft: #647780;
  --wa-line: #dce3e6;
  --wa-chat: #efeae2;
  --wa-pattern: #a69c8d22;
  --wa-in: #fff;
  --wa-out: #d9fdd3;
  --wa-bubble-text: #111b21;
  --wa-note: #fff2c6;
  --wa-note-text: #705210;
  --wa-note-line: #e4cb85;
  --wa-avatar: #e4f4ec;
  --wa-avatar-text: #23614b;
  --wa-shadow: #163a2610;
  --green: var(--wa-accent);
  --muted: var(--wa-muted);
  --line: var(--wa-line);
}
:root[data-theme="dark"] {
  --wa-accent: #00a884;
  --wa-accent-hover: #06bf98;
  --wa-on-accent: #071c16;
  --wa-brand: #25d366;
  --wa-bg: #0b141a;
  --wa-surface: #111b21;
  --wa-subtle: #202c33;
  --wa-selected: #203b36;
  --wa-text: #e9edef;
  --wa-muted: #aebac1;
  --wa-soft: #9babb4;
  --wa-line: #304049;
  --wa-chat: #0b141a;
  --wa-pattern: #7e949e13;
  --wa-in: #202c33;
  --wa-out: #005c4b;
  --wa-bubble-text: #e9edef;
  --wa-note: #3d3520;
  --wa-note-text: #f6dfa0;
  --wa-note-line: #66532b;
  --wa-avatar: #233d36;
  --wa-avatar-text: #9be5c6;
  --wa-shadow: #0003;
}
:root[data-theme="mint"] {
  --wa-accent: #087b57;
  --wa-accent-hover: #056343;
  --wa-brand: #075e54;
  --wa-bg: #e6f5ee;
  --wa-surface: #fafffc;
  --wa-subtle: #edf8f2;
  --wa-selected: #d1f0df;
  --wa-text: #153f31;
  --wa-muted: #446b5a;
  --wa-soft: #557965;
  --wa-line: #c8e1d3;
  --wa-chat: #e0f0e7;
  --wa-pattern: #44977520;
  --wa-in: #fafffc;
  --wa-out: #c5f3d5;
  --wa-bubble-text: #153f31;
}
:root[data-theme="midnight"] {
  --wa-accent: #28d994;
  --wa-accent-hover: #65e9b5;
  --wa-on-accent: #072219;
  --wa-brand: #49e3ac;
  --wa-bg: #060d14;
  --wa-surface: #0e1b28;
  --wa-subtle: #172a39;
  --wa-selected: #163c3b;
  --wa-text: #e6f2f8;
  --wa-muted: #b3c7d4;
  --wa-soft: #9fb7c6;
  --wa-line: #294252;
  --wa-chat: #09131d;
  --wa-pattern: #7399b01a;
  --wa-in: #172a39;
  --wa-out: #124d42;
  --wa-bubble-text: #e6f2f8;
  --wa-note: #3b3426;
  --wa-note-text: #f4dba0;
  --wa-note-line: #6d5838;
  --wa-avatar: #1b3d38;
  --wa-avatar-text: #92e8c6;
  --wa-shadow: #0004;
}
:root,body { background:var(--wa-bg); color:var(--wa-text) }
main { background:var(--wa-bg) }
.sidebar,.inbox-layout,.conversation,.chat-header,.composer,.contact-panel,.account-card,.info-card,.table-wrap,dialog { background:var(--wa-surface);color:var(--wa-text) }
.inbox-layout,dialog { border-color:var(--wa-line);box-shadow:0 6px 25px var(--wa-shadow) }
.brand,h1,.contact-summary h3,td strong { color:var(--wa-text) }
.brandmark,.workspace-icon { background:var(--wa-accent);color:var(--wa-on-accent) }
.brandmark span { color:var(--wa-on-accent) }
.branddot,h1 span { color:var(--wa-brand) }
.brand { letter-spacing:-1.5px }
.brandmark { font-size:22px;letter-spacing:-1px }
.sidebar { border-top:4px solid var(--wa-accent) }
.primary,.send { background:var(--wa-accent);color:var(--wa-on-accent);box-shadow:none }
.primary:hover,.send:hover { background:var(--wa-accent-hover) }
.nav-item.active,.conversation.selected { background:var(--wa-selected);color:var(--wa-text) }
.conversation.selected { border-left-color:var(--wa-accent) }
.nav-item.active>span,.account-tag,.mode-banner button,.tabs button.active { color:var(--wa-brand) }
.nav-item b,.list-heading h2 span,.pill { background:var(--wa-selected);color:var(--wa-brand) }
.nav-item:not(.active) b { background:var(--wa-subtle);color:var(--wa-muted) }
.unread,.status-dot { background:var(--wa-bright);color:#073b20 }
.dot { background:var(--wa-accent) }
.tabs button.active { border-color:var(--wa-accent) }
.workspace,.profile,.topbar,.conversation-list,.tabs,.conversation,.list-footer,.chat-header,.chat-context,.contact-panel,.contact-summary,.detail-section,td { border-color:var(--wa-line) }
.privacy,.search,.chat-context,.feature-icon,th { background:var(--wa-subtle);border-color:var(--wa-line) }
.privacy>span,.feature-icon { color:var(--wa-brand) }
.mode-banner { background:var(--wa-selected);border-color:var(--wa-line);color:var(--wa-muted) }
.mode-banner strong { color:var(--wa-text) }
.chat-panel,.messages { background-color:var(--wa-chat) }
.messages { background-image:radial-gradient(var(--wa-pattern) .8px,transparent .8px) }
.message { background:var(--wa-in);border-color:var(--wa-line);color:var(--wa-bubble-text);box-shadow:0 1px 2px var(--wa-shadow) }
.out .message { background:var(--wa-out);border-color:transparent;color:var(--wa-bubble-text) }
.message-row.note .message { background:var(--wa-note);color:var(--wa-note-text);border-color:var(--wa-note-line) }
.message-meta,.day-divider { color:var(--wa-muted) }
.day-divider { width:fit-content;margin:2px auto 21px;background:var(--wa-surface);padding:5px 10px;border-radius:5px }
.composer,.search { border-color:var(--wa-line) }
.composer textarea,.search input { color:var(--wa-text) }
.composer textarea::placeholder,.search input::placeholder { color:var(--wa-soft);opacity:1 }
.note-toggle.active,.pill.orange { background:var(--wa-note);color:var(--wa-note-text) }
.avatar,.avatar.green,.avatar.blue,.avatar.purple,.avatar.sand { background:var(--wa-avatar);color:var(--wa-avatar-text) }
.nav-item,.nav-label,.side-account,.side-account small,.workspace small,.profile small,.workspace>span:last-child,.privacy small,.breadcrumb,.slash,.today,.eyebrow,.page-heading p,.icon-btn,.conversation time,.conversation p,.list-footer,.tabs button,.chat-header small,.chat-actions button,.note-toggle,#send-hint,.contact-summary p,.detail-section label,.detail-section h4,.detail-section p,.detail-note,.under-grid,.account-card p,.info-card p,th,td,td small,.empty,#modal-body label,#modal-body p { color:var(--wa-muted) }
.detail-section p.detail-note { color:var(--wa-muted) }
.privacy strong,.workspace strong,.profile strong,.conversation strong,.chat-header strong { color:var(--wa-text) }
.secondary,.detail-section select,#modal-body input:not([type=checkbox]),#modal-body select { background:var(--wa-surface);border-color:var(--wa-line);color:var(--wa-text) }
.icon-btn:hover,.conversation:hover { background:var(--wa-subtle) }
.conversation.selected:hover { background:var(--wa-selected) }
#attachment-info { color:var(--wa-brand) }
#toast { background:var(--wa-accent);color:var(--wa-on-accent) }
.message a,#modal-body a { color:var(--wa-brand);text-decoration:underline }
.topbar-tools { display:flex;align-items:center;gap:18px;min-width:0 }
.theme-control { display:flex;align-items:center;gap:7px;flex-shrink:0;color:var(--wa-muted);background:var(--wa-surface);border:1px solid var(--wa-line);padding:7px 9px;border-radius:8px;font-size:10px }
.theme-control>span:first-child { color:var(--wa-brand);font-size:18px }
.theme-control select { border:0;background:var(--wa-surface);color:var(--wa-text);font-size:11px;max-width:155px;cursor:pointer;padding:3px 0 }
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible { outline:2px solid var(--wa-accent);outline-offset:3px }
.composer:focus-within,.search:focus-within { border-color:var(--wa-accent) }
::selection { background:var(--wa-accent);color:var(--wa-on-accent) }
* { scrollbar-color:var(--wa-line) transparent;scrollbar-width:thin }
@media(max-width:1000px) { .topbar-tools .today { display:none } }
@media(max-width:640px) { .theme-label,.breadcrumb-trail .breadcrumb,.breadcrumb-trail .slash { display:none }.topbar { gap:8px }.theme-control { padding:4px 6px;gap:4px }.theme-control select { font-size:10px;max-width:130px }.breadcrumb-trail { font-size:9px;min-width:0 }.topbar-tools { flex-shrink:0;gap:0 } }