/* Matchbox — Evolve visual language (Lexend, tokens, palettes, chrome). */
:root{
  --font:'Lexend',system-ui,sans-serif;
  --bg:#0a1016;
  --bg-2:#0f1720;
  --surface:#121b25;
  --surface-2:#182431;
  --surface-3:#1f2d3c;
  --surface-4:#28384a;
  --border:rgba(255,255,255,.10);
  --divider:rgba(255,255,255,.06);
  --text:#eaf1f8;
  --text-muted:#95a4b3;
  --text-faint:#66717d;
  --blue:#63b5ff;
  --blue-strong:#3297ff;
  --blue-bg:rgba(99,181,255,.14);
  --blue-glow:rgba(99,181,255,.34);
  --blue-glow-strong:rgba(99,181,255,.56);
  --teal:#2fd8c6;
  --green:#3fb950;
  --green-bg:rgba(63,185,80,.14);
  --green-glow:rgba(63,185,80,.34);
  --gold:#e0a92e;
  --amber:#e3b341;
  --amber-bg:rgba(227,179,65,.14);
  --red:#f85149;
  --red-bg:rgba(248,81,73,.14);
  --shadow-sm:0 3px 8px rgba(0,0,0,.28);
  --shadow-md:0 14px 34px rgba(0,0,0,.28);
  --shadow-lg:0 24px 80px rgba(0,0,0,.45);
  --r-sm:8px;--r-md:12px;--r-lg:18px;--r-xl:24px;--r-full:999px;
  --s1:.25rem;--s2:.5rem;--s3:.75rem;--s4:1rem;--s5:1.25rem;--s6:1.5rem;--s8:2rem;--s10:2.5rem;--s12:3rem;
  --xs:clamp(.74rem,.72rem + .16vw,.83rem);
  --sm:clamp(.88rem,.85rem + .18vw,.97rem);
  --base:clamp(1rem,.96rem + .2vw,1.06rem);
  --lg:clamp(1.12rem,1.04rem + .36vw,1.3rem);
  --xl:clamp(1.35rem,1.23rem + .74vw,1.78rem);
  --xxl:clamp(1.8rem,1.5rem + 1.5vw,2.6rem);
  --t:180ms cubic-bezier(.16,1,.3,1);
  --topbar-h:78px;
  --tabs-strip-height:64px;
  --app-chrome-bottom:calc(var(--tabs-strip-height) + env(safe-area-inset-bottom, 0px));
  --overlay-backdrop:rgba(6,10,18,.1);
}
[data-theme="light"]{
  --bg:#eef3f8;
  --bg-2:#f6f8fb;
  --surface:#ffffff;
  --surface-2:#f4f7fb;
  --surface-3:#ebf0f6;
  --surface-4:#dde7f1;
  --border:rgba(17,24,39,.10);
  --divider:rgba(17,24,39,.06);
  --text:#16202b;
  --text-muted:#61707f;
  --text-faint:#91a0ae;
  --blue:#0d73df;
  --blue-strong:#0a5fcc;
  --blue-bg:rgba(13,115,223,.12);
  --blue-glow:rgba(13,115,223,.22);
  --blue-glow-strong:rgba(13,115,223,.34);
  --teal:#0b9a8a;
  --green:#1f8f3d;
  --green-bg:rgba(31,143,61,.12);
  --green-glow:rgba(31,143,61,.22);
  --amber:#a87300;
  --amber-bg:rgba(168,115,0,.14);
  --red:#cf3030;
  --red-bg:rgba(207,48,48,.12);
  --shadow-sm:0 3px 10px rgba(0,0,0,.08);
  --shadow-md:0 14px 34px rgba(0,0,0,.12);
  --shadow-lg:0 24px 80px rgba(0,0,0,.18);
  --overlay-backdrop:rgba(238,243,248,.1);
}
[data-theme="dark"][data-palette="purple"]{
  --bg:#0e0c14;--bg-2:#15121c;--surface:#18152a;--surface-2:#1f1a32;--surface-3:#2a2440;--surface-4:#342c4e;
  --blue:#a78bfa;--blue-strong:#8b6cf0;--blue-bg:rgba(167,139,250,.16);--blue-glow:rgba(167,139,250,.38);--blue-glow-strong:rgba(167,139,250,.55);
  --teal:#5eead4;
}
[data-theme="light"][data-palette="purple"]{
  --bg:#f4f2fb;--bg-2:#faf8ff;--surface:#fff;--surface-2:#f3f0fa;--surface-3:#e8e2f4;--surface-4:#dcd4ee;
  --blue:#6d4bd3;--blue-strong:#5530c7;--blue-bg:rgba(109,75,211,.12);--blue-glow:rgba(109,75,211,.22);--blue-glow-strong:rgba(109,75,211,.34);
  --teal:#0d9488;
}
[data-theme="dark"][data-palette="burgundy"]{
  --bg:#120c10;--bg-2:#1a1216;--surface:#1c1418;--surface-2:#241a1f;--surface-3:#302428;--surface-4:#3d2e32;
  --blue:#e8a0a8;--blue-strong:#d47884;--blue-bg:rgba(232,160,168,.14);--blue-glow:rgba(212,120,132,.36);--blue-glow-strong:rgba(212,120,132,.52);
  --teal:#7dd3c0;--green:#6cbf7a;
}
[data-theme="light"][data-palette="burgundy"]{
  --bg:#faf4f5;--bg-2:#fff8f8;--surface:#fff;--surface-2:#f8f0f1;--surface-3:#efe4e6;--surface-4:#e2d4d8;
  --blue:#a94455;--blue-strong:#8e3242;--blue-bg:rgba(169,68,85,.12);--blue-glow:rgba(169,68,85,.2);--blue-glow-strong:rgba(169,68,85,.32);
  --teal:#0f766e;
}
[data-theme="dark"][data-palette="navy"]{
  --bg:#060d18;--bg-2:#0a1424;--surface:#0c1828;--surface-2:#102030;--surface-3:#162a3d;--surface-4:#1c344a;
  --blue:#7eb8ff;--blue-strong:#4e9dff;--blue-bg:rgba(126,184,255,.14);--blue-glow:rgba(78,157,255,.34);--blue-glow-strong:rgba(78,157,255,.5);
  --teal:#5ec8d6;
}
[data-theme="light"][data-palette="navy"]{
  --bg:#eef3f9;--bg-2:#f6f9fc;--surface:#fff;--surface-2:#eef4fb;--surface-3:#e2ebf5;--surface-4:#d3e0ef;
  --blue:#1e5a9e;--blue-strong:#164a86;--blue-bg:rgba(30,90,158,.12);--blue-glow:rgba(30,90,158,.2);--blue-glow-strong:rgba(30,90,158,.3);
  --teal:#0e7490;
}
[data-theme="dark"][data-palette="graphite"]{
  --bg:#0a0a0c;--bg-2:#101012;--surface:#141416;--surface-2:#1a1a1d;--surface-3:#222226;--surface-4:#2c2c31;
  --text:#ececf0;--text-muted:#9898a3;--text-faint:#6b6b76;
  --blue:#8ec5ff;--blue-strong:#6ab0ff;--blue-bg:rgba(142,197,255,.12);--blue-glow:rgba(106,176,255,.32);--blue-glow-strong:rgba(106,176,255,.48);
  --teal:#7dd3fc;
}
[data-theme="light"][data-palette="graphite"]{
  --bg:#f0f0f2;--bg-2:#f7f7f9;--surface:#fff;--surface-2:#f2f2f4;--surface-3:#e8e8ec;--surface-4:#dcdce2;
  --blue:#2563eb;--blue-strong:#1d4ed8;--blue-bg:rgba(37,99,235,.1);--blue-glow:rgba(37,99,235,.18);--blue-glow-strong:rgba(37,99,235,.28);
  --teal:#0e7490;
}
[data-theme="dark"][data-palette="greyscale"]{
  --bg:#070707;--bg-2:#0c0c0c;--surface:#111;--surface-2:#171717;--surface-3:#212121;--surface-4:#2b2b2b;
  --text:#f5f5f5;--text-muted:#a3a3a3;--text-faint:#737373;
  --blue:#d4d4d4;--blue-strong:#fafafa;--blue-bg:rgba(255,255,255,.08);--blue-glow:rgba(255,255,255,.16);--blue-glow-strong:rgba(255,255,255,.26);
  --teal:#b5b5b5;--green:#e5e5e5;--green-bg:rgba(255,255,255,.10);--green-glow:rgba(255,255,255,.18);
  --gold:#c4c4c4;--amber:#a3a3a3;--amber-bg:rgba(163,163,163,.12);
  --red:#737373;--red-bg:rgba(115,115,115,.14);
}
[data-theme="light"][data-palette="greyscale"]{
  --bg:#f5f5f5;--bg-2:#fafafa;--surface:#fff;--surface-2:#f0f0f0;--surface-3:#e5e5e5;--surface-4:#d4d4d4;
  --text:#171717;--text-muted:#525252;--text-faint:#737373;
  --blue:#404040;--blue-strong:#171717;--blue-bg:rgba(23,23,23,.08);--blue-glow:rgba(23,23,23,.12);--blue-glow-strong:rgba(23,23,23,.2);
  --teal:#525252;--green:#262626;--green-bg:rgba(38,38,38,.10);--green-glow:rgba(38,38,38,.14);
  --gold:#525252;--amber:#525252;--amber-bg:rgba(82,82,82,.10);
  --red:#737373;--red-bg:rgba(115,115,115,.10);
}
[data-theme="dark"][data-palette="teal"]{
  --bg:#071416;--bg-2:#0c1c1f;--surface:#0f2226;--surface-2:#132a2f;--surface-3:#1a363c;--surface-4:#22424a;
  --blue:#5eead4;--blue-strong:#2dd4bf;--blue-bg:rgba(94,234,212,.14);--blue-glow:rgba(45,212,191,.34);--blue-glow-strong:rgba(45,212,191,.5);
  --teal:#7dd3fc;--green:#4ade80;
}
[data-theme="light"][data-palette="teal"]{
  --bg:#eef9f7;--bg-2:#f6fcfb;--surface:#fff;--surface-2:#e8f5f2;--surface-3:#d9efea;--surface-4:#c8e8e1;
  --blue:#0d9488;--blue-strong:#0f766e;--blue-bg:rgba(13,148,136,.12);--blue-glow:rgba(13,148,136,.2);--blue-glow-strong:rgba(13,148,136,.3);
  --teal:#0369a1;
}
[data-theme="dark"][data-palette="sage"]{
  --bg:#0c100e;--bg-2:#111815;--surface:#141c18;--surface-2:#1a241f;--surface-3:#223028;--surface-4:#2a3d32;
  --blue:#86b89a;--blue-strong:#6aa382;--blue-bg:rgba(134,184,154,.14);--blue-glow:rgba(106,163,130,.32);--blue-glow-strong:rgba(106,163,130,.48);
  --teal:#6ee7d8;--green:#7ccf8f;
}
[data-theme="light"][data-palette="sage"]{
  --bg:#f2f6f3;--bg-2:#f9fbf9;--surface:#fff;--surface-2:#eef3ef;--surface-3:#e0eae3;--surface-4:#d0dfd5;
  --blue:#3f6f52;--blue-strong:#2d5a3f;--blue-bg:rgba(63,111,82,.12);--blue-glow:rgba(63,111,82,.18);--blue-glow-strong:rgba(63,111,82,.28);
  --teal:#0f766e;
}
[data-theme="dark"][data-palette="rose"]{
  --bg:#100d10;--bg-2:#161216;--surface:#1a161a;--surface-2:#221c22;--surface-3:#2d262e;--surface-4:#3a313a;
  --blue:#d4a5c9;--blue-strong:#c084b8;--blue-bg:rgba(212,165,201,.14);--blue-glow:rgba(192,132,184,.34);--blue-glow-strong:rgba(192,132,184,.5);
  --teal:#7dd3c0;
}
[data-theme="light"][data-palette="rose"]{
  --bg:#faf5f8;--bg-2:#fffafd;--surface:#fff;--surface-2:#f5eef3;--surface-3:#ebe3ea;--surface-4:#dfd3de;
  --blue:#9d4a8c;--blue-strong:#833c75;--blue-bg:rgba(157,74,140,.1);--blue-glow:rgba(157,74,140,.18);--blue-glow-strong:rgba(157,74,140,.28);
  --teal:#0d9488;
}

*{box-sizing:border-box;margin:0;padding:0;scrollbar-width:none;-ms-overflow-style:none;-webkit-tap-highlight-color:transparent}
*::-webkit-scrollbar{display:none}
html{-webkit-font-smoothing:antialiased;overflow-x:clip;color-scheme:dark light}
html[data-theme="light"]{color-scheme:light}
html[data-theme="dark"]{color-scheme:dark}
body{
  min-height:100dvh;font-family:var(--font);font-size:var(--base);line-height:1.5;color:var(--text);
  background:radial-gradient(circle at top, color-mix(in srgb,var(--surface-3) 88%, transparent), transparent 35%),linear-gradient(180deg,var(--bg),var(--bg-2));
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
input,select,textarea{border:none}
input,textarea,[contenteditable="true"]{user-select:text;-webkit-user-select:text}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:var(--r-sm)}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

.app{min-height:100dvh;display:flex;flex-direction:column;position:relative}
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:space-between;align-items:center;gap:var(--s3);
  padding:calc(env(safe-area-inset-top,0px) + var(--s3)) var(--s5) var(--s3);
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 92%, transparent),color-mix(in srgb,var(--surface) 80%, transparent));
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);box-shadow:0 10px 30px rgba(0,0,0,.12);
}
.brand{display:flex;align-items:center;gap:var(--s3);min-width:0}
.brand-mark{
  width:42px;height:42px;border-radius:14px;display:grid;place-items:center;flex-shrink:0;
  background:#fff;border:1px solid var(--border);box-shadow:var(--shadow-sm),inset 0 1px 0 rgba(255,255,255,.5);overflow:hidden;
}
[data-theme="dark"] .brand-mark{background:var(--surface-3)}
.brand-mark svg{width:78%;height:78%}
.brand-title{font-size:var(--lg);font-weight:800;letter-spacing:-.03em}
.brand-sub{font-size:var(--xs);color:var(--text-muted)}
.top-actions{display:flex;gap:var(--s2);align-items:center}
.main{width:min(720px,100%);margin:0 auto;padding:calc(var(--topbar-h) + env(safe-area-inset-top,0px)) var(--s4) calc(var(--app-chrome-bottom) + var(--s8));min-width:0}

.tabs{
  position:fixed;bottom:0;left:0;right:0;z-index:90;display:flex;justify-content:space-around;
  padding:6px var(--s2) calc(8px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(0deg,color-mix(in srgb,var(--surface) 80%, transparent),color-mix(in srgb,var(--surface) 92%, transparent));
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--border);box-shadow:0 -10px 30px rgba(0,0,0,.12);
}
.tab{
  flex:1 1 0;min-width:3.4rem;max-width:5.75rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:6px 4px 4px;border-radius:var(--r-md);color:var(--text-muted);font-size:.68rem;font-weight:600;letter-spacing:.01em;line-height:1.1;
  transition:color var(--t);
}
.tab.active{color:var(--blue)}
.tab-icon-wrap{position:relative;display:grid;place-items:center;width:28px;height:28px}
.tab-icon{width:22px;height:22px}
.tab-notify-dot{position:absolute;top:1px;right:-2px;width:7px;height:7px;border-radius:50%;background:var(--amber);border:1.5px solid var(--surface)}

.panel{display:none;animation:fade .18s ease;padding-top:var(--s4)}
.panel.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse-ring{0%{transform:scale(.85);opacity:.55}70%{transform:scale(1.15);opacity:0}100%{opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}

.card{
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 97%, transparent),color-mix(in srgb,var(--surface-2) 92%, var(--surface) 8%));
  border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-sm);position:relative;overflow:hidden;
}
.card::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);pointer-events:none}
.card-pad{padding:var(--s5)}
.glow-blue{box-shadow:0 0 0 1px color-mix(in srgb,var(--blue) 55%,transparent),0 0 36px var(--blue-glow),var(--shadow-sm)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);padding:var(--s2) var(--s4);border-radius:var(--r-md);border:1px solid transparent;transition:all var(--t);font-weight:600}
.btn-primary{background:linear-gradient(135deg,var(--blue-strong),var(--blue));color:#fff;box-shadow:0 0 18px var(--blue-glow)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 0 24px var(--blue-glow-strong)}
.btn-ghost{background:var(--surface);border-color:var(--border);color:var(--text-muted)}
.btn-ghost:hover{color:var(--text);border-color:var(--blue)}
.btn-danger{background:var(--red-bg);border-color:color-mix(in srgb,var(--red) 60%, transparent);color:var(--red)}
.btn-sm{padding:var(--s2) var(--s3);font-size:var(--xs)}
.btn:disabled{opacity:.42;cursor:not-allowed;box-shadow:none;transform:none}
.btn-block{width:100%}
.btn-icon{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--border);
  background:var(--surface);color:var(--text-muted);transition:all var(--t);
}
.btn-icon:hover{color:var(--text);border-color:var(--blue);box-shadow:0 0 14px var(--blue-glow)}
.btn-icon svg{width:22px;height:22px}

.section-title{font-size:var(--lg);font-weight:800;letter-spacing:-.03em}
.muted{color:var(--text-muted)}
.small-note{font-size:var(--xs);color:var(--text-muted);line-height:1.55}
.flabel{display:block;font-size:var(--xs);font-weight:700;color:var(--text-muted);margin-bottom:var(--s2);letter-spacing:.02em}
.finput{
  width:100%;padding:var(--s3) var(--s4);border-radius:var(--r-md);border:1.5px solid var(--border);
  background:var(--surface-2);color:var(--text);
}
.finput:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-bg)}

.row{
  display:flex;align-items:center;gap:var(--s3);padding:var(--s3) 0;border-bottom:1px solid var(--divider);
}
.row:last-child{border-bottom:none}
.row .grow{flex:1;min-width:0}
.row .name{font-weight:700}
.row .desc{font-size:var(--xs);color:var(--text-muted);margin-top:2px}

.toggle{
  --w:48px;--h:28px;width:var(--w);height:var(--h);border-radius:var(--r-full);border:1px solid var(--border);
  background:var(--surface-3);position:relative;flex-shrink:0;transition:background var(--t);
}
.toggle::after{
  content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:var(--shadow-sm);transition:transform var(--t);
}
.toggle.on{background:var(--blue);border-color:transparent}
.toggle.on::after{transform:translateX(20px)}

.chip{
  display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--r-full);
  font-size:var(--xs);font-weight:700;border:1px solid var(--border);background:var(--surface-2);color:var(--text-muted);
}
.chip.on{background:var(--green-bg);color:var(--green);border-color:color-mix(in srgb,var(--green) 40%, var(--border))}
.chip.warn{background:var(--amber-bg);color:var(--amber);border-color:color-mix(in srgb,var(--amber) 40%, var(--border))}
.chip.cloud{background:var(--blue-bg);color:var(--blue);border-color:color-mix(in srgb,var(--blue) 40%, var(--border))}

/* Splash */
#splash{
  position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s4);
  background:linear-gradient(180deg,var(--bg-2),var(--bg));transition:opacity 500ms ease;
}
#splash.hide{opacity:0;pointer-events:none}
.splash-mark{width:92px;height:92px;opacity:0;animation:rise 1s ease .4s forwards}
.splash-name{font-size:var(--xxl);font-weight:800;letter-spacing:-.04em;opacity:0;animation:rise 1s ease .65s forwards}
.splash-line{font-size:var(--base);color:var(--text-muted);opacity:0;animation:rise 1s ease .9s forwards}
.splash-lab{position:absolute;bottom:calc(env(safe-area-inset-bottom,0px) + 28px);font-size:var(--sm);letter-spacing:.22em;text-transform:uppercase;color:var(--text-faint);opacity:0;animation:rise .9s ease 1.3s forwards}

/* Gates */
.gate{
  position:fixed;inset:0;z-index:180;background:var(--bg);display:none;align-items:center;justify-content:center;
  padding:var(--s4);overflow-y:auto;
}
.gate.show{display:flex}
.gate-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--s6);
  width:min(420px,100%);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;gap:var(--s3);text-align:center;
}
.gate-heading{font-size:var(--xl);font-weight:800;line-height:1.2}
.gate-sub{font-size:var(--sm);color:var(--text-muted);line-height:1.55}
.gate-view[hidden]{display:none}
.gate-divider{display:flex;align-items:center;gap:var(--s2);color:var(--text-muted);font-size:var(--sm);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.gate-divider span{flex:1;height:1px;background:var(--divider)}
.pin-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);margin-top:var(--s3)}
.pin-pad button{
  height:56px;border-radius:var(--r-lg);background:var(--surface-2);border:1px solid var(--border);font-size:var(--lg);font-weight:700;
}
.pin-pad button:active{background:var(--blue-bg)}
.pin-dots{display:flex;justify-content:center;gap:10px;margin:var(--s2) 0}
.pin-dot{width:12px;height:12px;border-radius:50%;border:2px solid var(--border);background:transparent}
.pin-dot.filled{background:var(--blue);border-color:var(--blue)}

/* Chats */
.chat-list{display:flex;flex-direction:column;gap:var(--s2)}
.chat-item{
  display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);text-align:left;width:100%;
}
.avatar{
  width:48px;height:48px;border-radius:16px;display:grid;place-items:center;font-weight:800;font-size:var(--lg);
  background:var(--blue-bg);color:var(--blue);flex-shrink:0;position:relative;
}
.avatar .presence{position:absolute;bottom:2px;right:2px;width:10px;height:10px;border-radius:50%;border:2px solid var(--surface);background:var(--text-faint)}
.avatar .presence.near{background:var(--green)}
.avatar .presence.cloud{background:var(--blue)}
.chat-item .meta{flex:1;min-width:0}
.chat-item .who{display:flex;justify-content:space-between;gap:var(--s2);align-items:baseline}
.chat-item .who strong{font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-item .when{font-size:var(--xs);color:var(--text-faint);flex-shrink:0}
.chat-item .preview{font-size:var(--sm);color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.empty{
  text-align:center;padding:var(--s10) var(--s5);color:var(--text-muted);
}
.empty h3{color:var(--text);margin-bottom:var(--s2);font-weight:800}

/* Thread */
#thread{
  position:fixed;inset:0;z-index:110;display:none;flex-direction:column;
  background:var(--bg);padding-top:env(safe-area-inset-top,0px);
}
#thread.open{display:flex}
.thread-bar{
  display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);
  border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--surface) 90%, transparent);backdrop-filter:blur(12px);
}
.thread-msgs{
  flex:1;overflow-y:auto;padding:var(--s4);display:flex;flex-direction:column;gap:var(--s2);
  -webkit-overflow-scrolling:touch;
}
.bubble{
  max-width:82%;padding:var(--s2) var(--s3);border-radius:18px;font-size:var(--sm);line-height:1.45;word-break:break-word;
}
.bubble.me{align-self:flex-end;background:linear-gradient(135deg,var(--blue-strong),var(--blue));color:#fff;border-bottom-right-radius:6px}
.bubble.them{align-self:flex-start;background:var(--surface-3);border-bottom-left-radius:6px}
.bubble .path{display:block;margin-top:4px;font-size:10px;opacity:.75;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.bubble img,.bubble audio{display:block;max-width:100%;border-radius:12px;margin-top:4px}
.thread-compose{
  display:flex;align-items:flex-end;gap:var(--s2);padding:var(--s2) var(--s3) calc(var(--s3) + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--border);background:var(--surface);
}
.thread-compose textarea{
  flex:1;min-height:42px;max-height:120px;resize:none;padding:10px 14px;border-radius:20px;
  background:var(--surface-2);border:1px solid var(--border);line-height:1.4;
}
.compose-tools{display:flex;gap:4px}

/* Radar */
.radar-wrap{display:flex;flex-direction:column;align-items:center;gap:var(--s4);padding:var(--s2) 0 var(--s5)}
.radar{
  width:min(86vw,420px);aspect-ratio:1;border-radius:50%;position:relative;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb,var(--blue) 16%, transparent) 0 8%, transparent 9%),
    repeating-radial-gradient(circle at 50% 50%, transparent 0 18%, color-mix(in srgb,var(--border) 80%, transparent) 18% 18.6%);
  border:1px solid var(--border);box-shadow:var(--shadow-md),inset 0 0 40px var(--blue-bg);
}
.radar-sweep{
  position:absolute;inset:8%;border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0 70%, color-mix(in srgb,var(--blue) 35%, transparent) 85%, transparent 100%);
  animation:spin 4.5s linear infinite;pointer-events:none;
}
.radar-you{
  position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;
  background:var(--blue);box-shadow:0 0 0 6px var(--blue-bg),0 0 18px var(--blue-glow);z-index:2;
}
.radar-blip{
  position:absolute;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;
  background:var(--surface);border:2px solid var(--green);color:var(--text);font-size:11px;font-weight:800;
  display:grid;place-items:center;transform-origin:center;z-index:3;box-shadow:var(--shadow-sm);
}
.radar-blip.closed{border-color:var(--text-faint);opacity:.7}
.radar-legend{display:flex;flex-wrap:wrap;gap:var(--s2);justify-content:center}

/* Compass / sweep */
.compass{
  width:min(72vw,320px);aspect-ratio:1;margin:0 auto;border-radius:50%;position:relative;
  border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow-md);
}
.compass-n{position:absolute;top:12px;left:50%;transform:translateX(-50%);font-weight:800;font-size:var(--xs);color:var(--red)}
.compass-needle{
  position:absolute;left:50%;top:12%;width:4px;height:38%;margin-left:-2px;border-radius:4px;
  background:linear-gradient(var(--blue), transparent);transform-origin:bottom center;transition:transform .4s ease;
}
.sweep-track{
  height:8px;border-radius:var(--r-full);background:var(--surface-3);overflow:hidden;margin:var(--s3) 0;
}
.sweep-fill{height:100%;width:0;background:linear-gradient(90deg,var(--blue-strong),var(--blue));transition:width .2s}
.figure8{
  width:min(220px,70vw);height:110px;margin:var(--s3) auto;opacity:.55;
}

/* Settings overlay */
.overlay{
  position:fixed;inset:0;z-index:140;display:none;align-items:flex-end;justify-content:center;
  background:color-mix(in srgb,var(--bg) 55%, transparent);backdrop-filter:blur(8px);
}
.overlay.open,.overlay.show{display:flex}
.sheet{
  width:min(560px,100%);max-height:92dvh;overflow-y:auto;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-xl) var(--r-xl) 0 0;padding:var(--s5);
  padding-bottom:calc(var(--s8) + env(safe-area-inset-bottom,0px));box-shadow:var(--shadow-lg);
}
.pal-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s2);margin-top:var(--s2)}
.pal-swatch{height:36px;border-radius:var(--r-md);border:2px solid transparent;cursor:pointer}
.pal-swatch.active{border-color:var(--text);box-shadow:0 0 0 2px var(--blue)}

.emoji-sheet{display:flex;flex-direction:column;gap:var(--s2);max-height:50dvh}
.emoji-cats{display:flex;gap:4px;overflow-x:auto}
.emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;overflow-y:auto;max-height:36dvh}
.emoji-grid button{height:40px;font-size:1.35rem;border-radius:var(--r-sm)}
.emoji-grid button:active{background:var(--blue-bg)}

.toast{
  position:fixed;left:50%;bottom:calc(var(--app-chrome-bottom) + 16px);transform:translateX(-50%) translateY(120%);
  z-index:160;padding:var(--s3) var(--s5);border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--border);
  box-shadow:var(--shadow-md);font-size:var(--sm);font-weight:600;transition:transform .35s ease;pointer-events:none;
}
.toast.show{transform:translateX(-50%) translateY(0)}

html[dir="rtl"] .bubble.me{align-self:flex-start;border-radius:18px;border-bottom-left-radius:6px}
html[dir="rtl"] .bubble.them{align-self:flex-end;border-radius:18px;border-bottom-right-radius:6px}

#thread.nearby-tint{background:color-mix(in srgb, var(--blue) 14%, var(--bg))}
#thread.nearby-tint .thread-msgs{background:transparent}
.select-bar,.reply-bar{
  display:flex;align-items:center;gap:var(--s2);padding:8px var(--s4);
  background:var(--surface-2);border-bottom:1px solid var(--border);font-size:var(--sm);
}
.select-bar[hidden],.reply-bar[hidden]{display:none}
.reply-bar{color:var(--text-muted)}
.bubble.selected{outline:2px solid var(--blue);outline-offset:2px}
.bubble.deleted{opacity:.45;font-style:italic}
.bubble .reply{display:block;font-size:11px;opacity:.8;margin-bottom:4px;border-left:2px solid currentColor;padding-left:8px}
.bubble .edited{font-size:10px;opacity:.7;margin-left:6px}
.seg{display:flex;gap:6px;margin-bottom:var(--s4)}
.seg-btn{
  flex:1;border-radius:var(--r-full);padding:8px 12px;font-weight:700;font-size:var(--sm);
  background:var(--surface-2);border:1px solid var(--border);
}
.seg-btn.on{background:var(--blue);color:#fff;border-color:transparent}
.row-input{display:flex;gap:var(--s2);align-items:center;margin-bottom:var(--s3)}
.row-input .finput{flex:1}
.profile-chip{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
  padding:10px 0;border-bottom:1px solid var(--border);
}
.profile-chip.active-prof .name{color:var(--blue)}
.chat-item .preview .tint-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--blue);margin-right:6px;vertical-align:middle}
.request-row{display:flex;gap:var(--s2);margin-top:var(--s2)}

@media(min-width:720px){
  .main{padding-left:var(--s8);padding-right:var(--s8)}
  .radar{width:min(64vw,480px)}
}