/* Shared DeskSMS identity: burgundy/plum surfaces, orange accent, rounded cards. */
:root {
 color-scheme: light;
 --ink:#341a30; --muted:#796675; --accent:#b64d12; --on-accent:#ffffff;
 --brand:#542744; --line:#e7dae3; --bg:#f8f4f7; --surface:#ffffff; --raised:#f3ebf1;
 --incoming:#f3ebf1; --outgoing:#f3e6f0; --selected:#f3e6f0;
 --badge:#ecdce8; --on-badge:#653555; --soft-accent:#fff0e4; --warning:#864416;
 --error:#ad343a; --shadow:#341a3010; --backdrop:#21132388;
}
:root[data-theme="dark"] {
 color-scheme: dark;
 --ink:#f5ecf3; --muted:#beabbc; --accent:#ffac70; --on-accent:#321a21;
 --brand:#42263e; --line:#4a334b; --bg:#1b111d; --surface:#291a2b; --raised:#342237;
 --incoming:#342237; --outgoing:#42263e; --selected:#42263e;
 --badge:#4a2f46; --on-badge:#f1dceb; --soft-accent:#462c30; --warning:#ffc69c;
 --error:#ffabb1; --shadow:#00000022; --backdrop:#110a14b3;
}
@media (prefers-color-scheme: dark) {
 :root:not([data-theme]) {
  color-scheme:dark;
  --ink:#f5ecf3; --muted:#beabbc; --accent:#ffac70; --on-accent:#321a21;
  --brand:#42263e; --line:#4a334b; --bg:#1b111d; --surface:#291a2b; --raised:#342237;
  --incoming:#342237; --outgoing:#42263e; --selected:#42263e;
  --badge:#4a2f46; --on-badge:#f1dceb; --soft-accent:#462c30; --warning:#ffc69c;
  --error:#ffabb1; --shadow:#00000022; --backdrop:#110a14b3;
 }
}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px system-ui,-apple-system,'Segoe UI',sans-serif}button,input,textarea,select{font:inherit}button{cursor:pointer;border:0;background:none;color:inherit}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}button:disabled{opacity:.5;cursor:wait}input,select{padding:11px 12px;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--ink)}button:hover{filter:brightness(.95)}[hidden]{display:none!important}.primary{background:var(--accent);color:var(--on-accent);padding:12px 19px;border-radius:7px;font-size:13px;font-weight:600}.brand{font-size:24px;font-weight:750;letter-spacing:-1px;display:flex;gap:10px;align-items:center;white-space:nowrap}.brand-icon{display:grid;place-items:center;background:var(--brand);color:white;border-radius:10px;width:35px;height:35px;font-size:23px}.dot{color:var(--accent);margin-left:-10px}.count{letter-spacing:0;font-size:11px;color:var(--on-badge);background:var(--badge);border-radius:7px;padding:3px 7px;margin-left:4px}header{display:flex;justify-content:space-between;align-items:center;padding:22px 30px;border-bottom:1px solid var(--line);background:var(--surface)}.toolbar{display:flex;align-items:center;gap:12px;font-size:12px}.toolbar button{padding:9px 11px;border:1px solid var(--line);border-radius:7px}.connection{font-size:11px;color:var(--muted);margin-right:8px}.connection:before{content:'●';font-size:8px;margin-right:6px}#workspace{height:100vh;display:flex;flex-direction:column}.desk{display:grid;grid-template-columns:320px 1fr;margin:22px 26px;flex:1;min-height:0;border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden;box-shadow:0 5px 24px var(--shadow)}.list{border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}.list-heading{display:flex;align-items:center;justify-content:space-between;padding:24px 23px 18px}h2{font-size:14px;font-weight:650;margin:0}.list-heading span{font-size:11px;color:var(--muted)}.search{display:flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--bg);border-radius:7px;margin:0 19px 18px;padding:3px 10px}.search span{font-size:25px;color:var(--muted)}.search input{border:0;width:100%;background:transparent;outline:0;padding:9px 0;font-size:12px}.filters{display:flex;gap:23px;padding:0 22px;border-bottom:1px solid var(--line)}.filters button{font-size:12px;padding:0 0 12px;color:var(--muted);border-bottom:2px solid transparent}.filters button.selected{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}#threads{overflow:auto;flex:1}.thread{display:flex;width:100%;gap:12px;text-align:left;padding:20px 20px;border-bottom:1px solid var(--incoming);position:relative}.thread.selected{background:var(--selected)}.thread.selected:before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)}.avatar{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;font-size:12px;font-weight:600;flex-shrink:0;background:var(--raised);color:var(--muted)}.thread-content{min-width:0;flex:1}.thread-top{display:flex;justify-content:space-between;align-items:center;gap:5px}.thread-name{font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.thread time{font-size:10px;color:var(--muted);white-space:nowrap}.thread-preview{font-size:11px;line-height:1.6;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:6px}.thread-unread{float:right;border-radius:8px;background:var(--badge);color:var(--on-badge);font-size:9px;min-width:17px;height:17px;text-align:center;padding:2px}.list-foot{padding:16px;text-align:center;font-size:10px;color:var(--muted);border-top:1px solid var(--line)}.conversation{display:flex;flex-direction:column;min-height:0;background:var(--surface)}#chat-header{display:flex;justify-content:space-between;align-items:center;min-height:84px;padding:20px 26px;border-bottom:1px solid var(--line)}#chat-header p{font-size:11px;color:var(--muted);margin:5px 0 0}#chat-header button{font-size:11px;border:1px solid var(--line);border-radius:6px;padding:8px 11px}#messages{flex:1;min-height:0;overflow:auto;padding:28px 32px;display:flex;flex-direction:column}.empty{margin:auto;text-align:center;color:var(--muted);padding:35px}.empty>span{display:block;font-size:44px;color:var(--accent);margin-bottom:18px}.empty h2{font-size:18px;color:var(--ink)}.empty p{font-size:12px;line-height:1.7}.message{max-width:78%;margin-bottom:19px;align-self:flex-start}.message.out{align-self:flex-end}.bubble{font-size:13px;line-height:1.75;white-space:pre-wrap;overflow-wrap:anywhere;padding:13px 18px;border-radius:0 11px 11px 11px;background:var(--incoming)}.out .bubble{background:var(--outgoing);border-radius:11px 0 11px 11px}.message small{display:block;color:var(--muted);font-size:9px;margin-top:6px}.out small{text-align:right}.load-older{align-self:center;font-size:11px;color:var(--accent);margin-bottom:24px;padding:8px;border:1px solid var(--line);border-radius:5px}#reply-form{padding:10px 24px 12px}.composer{padding:15px;border:1px solid var(--line);border-radius:9px;background:var(--surface)}.composer textarea{border:0;resize:vertical;background:none;width:100%;min-height:58px;max-height:200px;outline:0;color:var(--ink);font-size:13px;line-height:1.65}.composer textarea::placeholder{color:var(--muted)}.composer-bottom{display:flex;gap:12px;align-items:center}.composer select{font-size:11px;padding:7px;max-width:50%}#chars{color:var(--muted);font-size:10px;margin-left:auto}.composer-bottom .primary{padding:10px 14px;font-size:12px;white-space:nowrap}.send-note{text-align:center;color:var(--muted);font-size:10px;margin-top:10px}#send-status{font-size:11px;color:var(--muted);text-align:center;padding:0 16px 14px;white-space:pre-line}#sync-banner{font-size:11px;text-align:center;background:var(--soft-accent);color:var(--warning);padding:9px 15px}#login{display:grid;place-items:center;min-height:100vh;padding:25px}.login-card{max-width:470px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:44px;box-shadow:0 20px 70px var(--shadow)}.login-card h1{font-size:29px;letter-spacing:-1px;line-height:1.35;margin:30px 0 15px}.login-card p{color:var(--muted);font-size:13px;line-height:1.9}.login-card form{margin:27px 0 20px}.login-card .primary{width:100%;margin-top:16px}label{display:block;font-size:12px;color:var(--muted)}label input{display:block;width:100%;margin-top:7px}.small{font-size:11px!important}#login-error{color:var(--error);font-size:12px}dialog{border:1px solid var(--line);border-radius:14px;padding:28px;width:470px;max-width:95vw;color:var(--ink);box-shadow:0 25px 70px var(--shadow)}dialog::backdrop{background:var(--backdrop)}.dialog-heading{display:flex;justify-content:space-between;align-items:center}.dialog-heading h2{font-size:18px}.dialog-heading button{font-size:26px}dialog p{font-size:12px;line-height:1.8;color:var(--muted)}dialog label{margin:15px 0}#name-form .primary{margin-bottom:20px}#names-list{max-height:250px;overflow:auto}.name-row{display:flex;justify-content:space-between;text-align:left;width:100%;padding:13px 0;border-top:1px solid var(--line);gap:10px}.name-row small{font-size:10px;color:var(--muted)}#name-status{font-size:12px;color:var(--muted);line-height:1.8}#notice{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:var(--brand);color:white;padding:13px 23px;border-radius:8px;opacity:0;pointer-events:none;max-width:90vw;transition:opacity .2s;z-index:5}.notice-visible{opacity:1!important}@media(max-width:850px){header{padding:15px 18px}.toolbar{gap:6px}.toolbar .connection{display:none}.desk{grid-template-columns:260px 1fr;margin:14px}.brand{font-size:20px}.composer-bottom{flex-wrap:wrap}#chars{margin-right:0}.composer-bottom .primary{margin-left:auto}.message{max-width:90%}#messages{padding:22px 20px}}@media(max-width:600px){header{gap:10px;flex-wrap:wrap}.toolbar{width:100%;justify-content:space-between}.desk{grid-template-columns:180px 1fr;margin:9px;border-radius:8px}.thread{padding:16px 11px}.thread .avatar{display:none}.thread-top{display:block}.thread time{display:block;margin-top:4px}.list-heading{padding:18px 12px}.search{margin:0 10px 15px}.list-foot{display:none}#messages{padding:17px 12px}.message{max-width:96%}.bubble{font-size:12px;padding:10px 12px}#chat-header{padding:15px 12px;display:block}#chat-header button{margin-top:8px}#reply-form{padding:9px}.composer{padding:10px}.composer select{max-width:100%;width:100%}.send-note{font-size:8px}.login-card{padding:30px}.login-card h1{font-size:26px}}

.toolbar select { font-size:11px; padding:8px; max-width:135px; }
.login-theme { display:flex; justify-content:flex-end; margin-top:18px; }
.login-theme select { font-size:11px; }
.thread { border:1px solid var(--line); border-radius:14px; margin:8px; width:calc(100% - 16px); }
.thread:hover { background:var(--raised); }
.thread.selected:before { top:12px; bottom:12px; border-radius:4px; }
.thread-unread { padding:2px 5px; height:auto; }
.count { border-radius:9px; }
.bubble { border-radius:4px 16px 16px 16px; border:1px solid var(--line); }
.out .bubble { border-radius:16px 4px 16px 16px; }
.composer, .desk { border-radius:16px; }
::selection { background:var(--soft-accent); color:var(--ink); }
@media(max-width:850px) { header { flex-wrap:wrap; gap:12px; } .toolbar { flex-wrap:wrap; } }

/* 2026-10-12 DeskSMS visual refresh: graphite + warm orange, clearer sender separation. */
:root{
 --ink:#1f2937;--muted:#6b7280;--accent:#e58a3a;--on-accent:#ffffff;
 --brand:#374151;--line:#d7dce2;--bg:#eef1f4;--surface:#ffffff;--raised:#f5f6f8;
 --incoming:#e8eef4;--outgoing:#ffe0bd;--selected:#fff1e2;
 --badge:#f4b36a;--on-badge:#3a2618;--soft-accent:#fff3e6;--warning:#9a5b21;
 --error:#c2414b;--shadow:#11182714;--backdrop:#11182766;
}
:root[data-theme="dark"]{
 --ink:#f7f8fa;--muted:#aeb7c3;--accent:#f4a261;--on-accent:#25170c;
 --brand:#27313d;--line:#394554;--bg:#111821;--surface:#18222d;--raised:#222e3b;
 --incoming:#2b3948;--outgoing:#6b472b;--selected:#2a3542;
 --badge:#f4a261;--on-badge:#24170d;--soft-accent:#33271d;--warning:#ffc48f;
 --error:#ff9ca5;--shadow:#00000033;--backdrop:#080c12b8;
}
@media (prefers-color-scheme: dark){
 :root:not([data-theme]){
  --ink:#f7f8fa;--muted:#aeb7c3;--accent:#f4a261;--on-accent:#25170c;
  --brand:#27313d;--line:#394554;--bg:#111821;--surface:#18222d;--raised:#222e3b;
  --incoming:#2b3948;--outgoing:#6b472b;--selected:#2a3542;
  --badge:#f4a261;--on-badge:#24170d;--soft-accent:#33271d;--warning:#ffc48f;
  --error:#ff9ca5;--shadow:#00000033;--backdrop:#080c12b8;
 }
}
header{padding:14px 22px;background:var(--surface)}
.brand{font-size:21px}
.brand-icon{background:var(--brand)}
.connection:before{color:#39b56a}
.desk{margin:14px 18px;border-radius:14px}
.list-heading{padding:18px 18px 12px}
.search{margin:0 14px 12px;background:var(--raised)}
.filters{padding:0 16px}
.thread{margin:6px 8px;padding:14px 14px;border:1px solid var(--line);border-radius:12px;width:calc(100% - 16px);background:transparent}
.thread:hover{background:var(--raised)}
.thread.selected{background:var(--selected)}
.thread.selected:before{top:8px;bottom:8px;width:4px;border-radius:5px}
.thread-name{font-size:12.5px;font-weight:700;color:var(--ink)}
.thread-preview{font-size:11px;line-height:1.45;color:var(--muted);margin-top:4px}
.thread-unread{font-weight:700}
#chat-header{min-height:68px;padding:14px 20px}
#messages{padding:22px 26px}
.message{margin-bottom:16px;max-width:76%}
.bubble{background:var(--incoming);border:1px solid color-mix(in srgb,var(--incoming) 75%,var(--line));border-radius:5px 16px 16px 16px;padding:12px 15px;box-shadow:0 1px 2px var(--shadow)}
.out .bubble{background:var(--outgoing);border-color:color-mix(in srgb,var(--outgoing) 75%,var(--line));border-radius:16px 5px 16px 16px;color:var(--ink)}
.message small{font-size:9.5px}
#reply-form{padding:8px 18px 10px}
.composer{background:var(--raised);border-radius:14px;padding:12px}
.composer textarea{min-height:52px}
.toolbar button,.toolbar select,#chat-header button{background:var(--raised)}
.primary{background:var(--accent)}
#notice{background:var(--brand)}

/* Mäklarapp-inspired orange + teal palette for DeskSMS. */
:root{
 --ink:#173b3d;--muted:#52777a;--accent:#ef873a;--on-accent:#ffffff;
 --brand:#087d82;--line:#c5dedd;--bg:#e9f4f2;--surface:#ffffff;--raised:#edf8f6;
 --incoming:#d9f0ed;--outgoing:#ffe0c2;--selected:#d7f2ee;
 --badge:#f59b4c;--on-badge:#402008;--soft-accent:#fff0df;
 --warning:#ae6326;--shadow:#0b616118;--backdrop:#143f4266;
}
:root[data-theme="dark"]{
 --ink:#ecfaf7;--muted:#a5c8c5;--accent:#f39b51;--on-accent:#291607;
 --brand:#2aa5a5;--line:#315d60;--bg:#102628;--surface:#183638;--raised:#204345;
 --incoming:#235052;--outgoing:#754728;--selected:#215356;
 --badge:#f39b51;--on-badge:#291607;--soft-accent:#59351e;
}
@media(prefers-color-scheme:dark){
 :root:not([data-theme]){
 --ink:#ecfaf7;--muted:#a5c8c5;--accent:#f39b51;--on-accent:#291607;
 --brand:#2aa5a5;--line:#315d60;--bg:#102628;--surface:#183638;--raised:#204345;
 --incoming:#235052;--outgoing:#754728;--selected:#215356;
 --badge:#f39b51;--on-badge:#291607;--soft-accent:#59351e;
 }
}
header{border-bottom:2px solid var(--brand)}
.brand-icon{background:var(--brand);color:#fff}
.brand{color:var(--ink)}
.brand::after{color:var(--accent)}
.thread.selected{background:var(--selected);border-color:var(--brand)}
.thread.selected:before{background:var(--accent)}
.thread:hover{border-color:var(--brand)}
.thread-unread,#unread{background:var(--accent);color:var(--on-accent)}
.filters .selected{color:var(--brand);border-color:var(--accent)}
#chat-header{border-bottom:1px solid var(--line)}
.bubble{border-color:var(--line)}
.out .bubble{border-color:var(--accent)}
#reply-form .composer{border:1px solid var(--line)}
.primary,#send{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
#send:hover,.primary:hover{filter:brightness(.96)}
#chat-header button,.toolbar button,.toolbar select{border-color:var(--line)}
#notice{background:var(--brand);color:#fff}

/* Dark theme: neutral charcoal surfaces and high-contrast teal/orange message bubbles. */
:root[data-theme="dark"]{
 --bg:#0f141a;--surface:#151c24;--raised:#1c2530;--line:#2b3643;
 --ink:#edf3f7;--muted:#aab7c4;--brand:#21a2a6;--accent:#f19a4b;
 --on-accent:#231407;--selected:#223140;--incoming:#1f777c;--outgoing:#ad652c;
 --badge:#f19a4b;--on-badge:#231407;--soft-accent:#44301f;
 --warning:#ffbe83;--shadow:#00000035;--backdrop:#070a0ec7;
}
@media (prefers-color-scheme:dark){
 :root:not([data-theme]){
 --bg:#0f141a;--surface:#151c24;--raised:#1c2530;--line:#2b3643;
 --ink:#edf3f7;--muted:#aab7c4;--brand:#21a2a6;--accent:#f19a4b;
 --on-accent:#231407;--selected:#223140;--incoming:#1f777c;--outgoing:#ad652c;
 --badge:#f19a4b;--on-badge:#231407;--soft-accent:#44301f;
 --warning:#ffbe83;--shadow:#00000035;--backdrop:#070a0ec7;
 }
}
:root[data-theme="dark"] .bubble{color:#fff;border-color:#309197}
:root[data-theme="dark"] .out .bubble{color:#fff;border-color:#df914f}
@media(prefers-color-scheme:dark){
 :root:not([data-theme]) .bubble{color:#fff;border-color:#309197}
 :root:not([data-theme]) .out .bubble{color:#fff;border-color:#df914f}
}