/* Themes change appearance only: grid, spacing, typography and element sizes stay in app.css. */
:root,[data-theme="light"]{
 color-scheme:light;--page:#f2f3fb;--surface:#ffffff;--surface-soft:#f7f7fd;--text:#30334f;--muted:#6c708a;--line:#e0e2f1;
 --primary:#6554e8;--primary-end:#8875fb;--primary-ink:#fff;--tint:#eeeaff;--sidebar:#fff;--nav-text:#636680;--nav-active:#fff;
 --green:var(--primary);--accent:var(--tint);--shadow:0 5px 22px #30335b08;--focus:#8b78fb;--hover:#f3f0ff;
 --ok:#087b59;--ok-bg:#e2f8ef;--busy:#c9324d;--busy-bg:#ffebee;--ring:#916100;--ring-bg:#fff3d6;--pause:#8553ba;--pause-bg:#f1e8fc;--blue:#2869c5;--blue-bg:#e7f0ff;--off:#777d92;--off-bg:#eef0f5;
 --metric1:#e4f8f0;--metric2:#ffebf0;--metric3:#fff3d8;--metric4:#ede9ff;--login-bg:linear-gradient(145deg,#5143b8,#7660d9 65%,#ad7acb);--login-text:#fff;--login-muted:#e1dbff;--dock:#393266;--backdrop:#17132b77;
}
[data-theme="dark"]{
 color-scheme:dark;--page:#121523;--surface:#1c2033;--surface-soft:#242940;--text:#edf0ff;--muted:#afb6d2;--line:#343b58;
 --primary:#a898ff;--primary-end:#c4abff;--primary-ink:#21183f;--tint:#343052;--sidebar:#181b2c;--nav-text:#b7bfdb;--nav-active:#21183f;
 --shadow:0 5px 22px #0002;--focus:#c4b5ff;--hover:#2b2b49;
 --ok:#6ae6b8;--ok-bg:#193c35;--busy:#ff8da3;--busy-bg:#452936;--ring:#ffd17d;--ring-bg:#423820;--pause:#d2a2ff;--pause-bg:#3b2c50;--blue:#8ab9ff;--blue-bg:#233854;--off:#a7b0c8;--off-bg:#2b3145;
 --metric1:#1b3834;--metric2:#3e2837;--metric3:#3c3425;--metric4:#322c4d;--login-bg:linear-gradient(145deg,#201f45,#342855 70%,#543457);--login-text:#f1edff;--login-muted:#c8bfdf;--dock:#29243e;--backdrop:#050711aa;
}
[data-theme="aurora"]{
 color-scheme:light;--page:#fcf3f4;--surface:#fffdfb;--surface-soft:#fff3f2;--text:#493547;--muted:#816775;--line:#eedce4;
 --primary:#a73971;--primary-end:#be537e;--primary-ink:#fff;--tint:#f9e4ee;--sidebar:#fffaf7;--nav-text:#82667b;--nav-active:#fff;
 --shadow:0 5px 22px #71325509;--focus:#b6447a;--hover:#fcebf1;
 --ok:#087960;--ok-bg:#ddf6ed;--busy:#c53854;--busy-bg:#ffe8ee;--ring:#916100;--ring-bg:#fff1d6;--pause:#8d4daf;--pause-bg:#f3e6fa;--blue:#3268b6;--blue-bg:#e7efff;--off:#83737f;--off-bg:#f1e9ef;
 --metric1:#ddf6ed;--metric2:#ffe6ef;--metric3:#fff0d5;--metric4:#eee3fb;--login-bg:linear-gradient(140deg,#813565,#b15582 65%,#ca858f);--login-text:#fff8fc;--login-muted:#fce1ee;--dock:#59334f;--backdrop:#46233c77;
}
:root{color:var(--text);background:var(--page)}body{background:var(--page);color:var(--text)}
button{background:linear-gradient(120deg,var(--primary),var(--primary-end));color:var(--primary-ink);box-shadow:0 3px 10px color-mix(in srgb,var(--primary) 16%,transparent)}
button.quiet{background:transparent;box-shadow:none;border-color:var(--line)}button.quiet:hover{background:var(--hover)}button.danger{background:var(--busy);color:var(--surface)}
button:disabled{cursor:not-allowed;filter:none;box-shadow:none}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
a{color:var(--primary)}aside{background:var(--sidebar);color:var(--text);box-shadow:1px 0 0 var(--line)}
.brand{color:var(--primary)}.nav-label,nav button,.sidebar-bottom{color:var(--nav-text)}nav button{background:transparent;box-shadow:none}nav button:hover{background:var(--hover)}nav button.active{background:linear-gradient(110deg,var(--primary),var(--primary-end));color:var(--nav-active);box-shadow:0 5px 14px color-mix(in srgb,var(--primary) 22%,transparent)}
.sidebar-bottom button{color:var(--text);border-color:var(--line)}.status-dot{background:var(--ok)}.eyebrow{color:var(--muted)}
.metric,.agent-card,.panel,.empty,dialog{background:var(--surface);color:var(--text);border-color:var(--line);box-shadow:var(--shadow)}
.metric:nth-child(1){background:var(--metric1)}.metric:nth-child(2){background:var(--metric2)}.metric:nth-child(3){background:var(--metric3)}.metric:nth-child(4){background:var(--metric4)}
.metric:nth-child(1) strong{color:var(--ok)}.metric:nth-child(2) strong{color:var(--busy)}.metric:nth-child(3) strong{color:var(--ring)}.metric:nth-child(4) strong{color:var(--primary)}
.metric span,.metric small,.agent-head small,.agent-foot,.legend,.message small,label,th,.empty{color:var(--muted)}
.badge{background:var(--ok-bg);color:var(--ok);border-color:color-mix(in srgb,var(--ok) 25%,var(--line))}.badge.bad{background:var(--busy-bg);color:var(--busy);border-color:var(--busy)}
.dot.free{background:var(--ok)}.dot.busy{background:var(--busy)}.dot.ringing{background:var(--ring)}.dot.paused{background:var(--pause)}.dot.blue{background:var(--blue)}.dot.offline,.dot{background:var(--off)}
.agent-card{--state:var(--off);--state-bg:var(--off-bg);background:linear-gradient(130deg,var(--state-bg),var(--surface) 58%);box-shadow:inset 3px 0 var(--state),var(--shadow)}
.agent-card:has(.dot.free){--state:var(--ok);--state-bg:var(--ok-bg)}.agent-card:has(.dot.busy){--state:var(--busy);--state-bg:var(--busy-bg)}.agent-card:has(.dot.ringing){--state:var(--ring);--state-bg:var(--ring-bg)}.agent-card:has(.dot.paused){--state:var(--pause);--state-bg:var(--pause-bg)}.agent-card:has(.dot.blue){--state:var(--blue);--state-bg:var(--blue-bg)}
.avatar{background:var(--state-bg);color:var(--state);box-shadow:0 0 0 1px color-mix(in srgb,var(--state) 22%,transparent)}.agent-state{color:var(--state)}.agent-foot,td{border-color:var(--line)}
.filters{background:var(--surface-soft);box-shadow:inset 0 0 0 1px var(--line)}input,select,textarea{background:var(--surface);color:var(--text);border-color:var(--line)}input::placeholder,textarea::placeholder{color:var(--muted)}input:focus,select:focus,textarea:focus{outline-color:var(--focus)}input[type=checkbox]{accent-color:var(--primary)}
thead{background:var(--surface-soft)}tbody tr:hover{background:var(--hover)}th button{background:none;box-shadow:none;color:inherit}.bar{background:var(--tint)}.bar i{background:linear-gradient(90deg,var(--primary),var(--primary-end))}
.notice{background:var(--ok-bg);color:var(--ok);border-color:color-mix(in srgb,var(--ok) 30%,var(--line))}.notice.error{background:var(--busy-bg);color:var(--busy);border-color:var(--busy)}
dialog::backdrop{background:var(--backdrop)}.close{background:var(--surface-soft);color:var(--text);box-shadow:none}.message{border-color:var(--line)}
.login-art{background:var(--login-bg);color:var(--login-text)}.login-art .brand{color:var(--login-text)}.login-art p{color:var(--login-muted)}.orbit,.orbit:before,.orbit:after{border-color:color-mix(in srgb,var(--login-text) 25%,transparent)}#login-error{color:var(--busy)}
#phone-dock{background:var(--dock);color:#fff;border:0;box-shadow:0 8px 28px #0003}#phone-answer{background:var(--ok-bg);color:var(--ok)}#phone-hangup{background:#c9324d;color:#fff}
/* Compact appearance menu occupies unused sidebar space, without moving existing controls. */
.theme-control{position:fixed;left:24px;bottom:130px;width:187px;z-index:4;font-size:11px;color:var(--muted)}
.theme-control summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--text);box-shadow:var(--shadow)}.theme-control summary::-webkit-details-marker{display:none}
.theme-control summary::after{content:'⌄';color:var(--primary)}.theme-options{position:absolute;bottom:calc(100% + 8px);width:100%;padding:6px;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:0 10px 30px #0002;display:grid;gap:4px}
.theme-options button{text-align:left;background:transparent;color:var(--text);box-shadow:none;padding:10px;border-radius:8px;display:flex;gap:10px;align-items:center}.theme-options button[aria-pressed=true]{background:var(--tint);color:var(--primary)}.theme-options button:hover{background:var(--hover)}.theme-swatch{width:15px;height:15px;border-radius:50%;border:1px solid #87839b;flex-shrink:0}.swatch-light{background:linear-gradient(135deg,#fff 45%,#7865ed 46%)}.swatch-dark{background:linear-gradient(135deg,#171b2c 45%,#b19afa 46%)}.swatch-aurora{background:linear-gradient(135deg,#f5b5d0 45%,#31af98 46%)}
body:has(#shell.hidden) .theme-control{left:auto;right:24px;top:24px;bottom:auto}body:has(#shell.hidden) .theme-options{top:calc(100% + 8px);bottom:auto}
@media(min-width:721px) and (max-width:1050px){.theme-control{left:15px;width:155px}}
@media(max-width:720px){.theme-control{left:auto;right:18px;top:12px;bottom:auto;width:140px}.theme-control summary{padding:6px 10px}.theme-options{top:calc(100% + 8px);bottom:auto}}
@media(min-width:721px) and (max-height:760px){.theme-control{bottom:20px;left:88px;width:125px}.theme-control summary{padding:6px 8px}}
@media(prefers-reduced-motion:no-preference){.theme-control button{transition:background-color .15s}}

@media(min-width:721px) and (max-width:1050px) and (max-height:760px){.theme-control{left:76px;width:100px}}

.agent-card{position:relative;padding-bottom:48px}.connection-signal{position:absolute;right:14px;bottom:10px;display:flex;align-items:center;gap:5px}.connection-signal.good{color:var(--ok)}.connection-signal.lagged{color:#d69b00}.connection-signal.lost{color:#ef4444}.connection-signal.unknown{color:var(--off)}.agent-card:has(.dot.no_line){--state:var(--off);--state-bg:var(--off-bg)}.dot.no_line{background:var(--off)}

.theme-editor{width:min(640px,95vw)}.theme-colors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.theme-colors input[type=color]{width:100%;height:44px;padding:3px;cursor:pointer}.theme-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}.theme-error{color:var(--busy)}[data-custom-theme] body{color:var(--page-text)}[data-custom-theme] aside,[data-custom-theme] .sidebar-bottom button{color:var(--sidebar-text)}[data-custom-theme] .theme-options button[aria-pressed=true]{background:var(--primary);color:var(--primary-ink)}@media(max-width:480px){.theme-colors{grid-template-columns:1fr}}

[data-custom-theme] a,[data-custom-theme] .metric:nth-child(4) strong{color:var(--link-ink)}

/* Inside the sidebar the theme picker is part of normal, scrollable flow. */
#shell .sidebar-bottom .theme-control{position:static;inset:auto;width:100%;max-width:none;flex-basis:100%;margin:0 0 16px;font-size:11px}
#shell .sidebar-bottom .theme-options{position:static;inset:auto;width:100%;margin-top:8px}
#shell .sidebar-bottom .theme-options button{margin:0}