:root{
  color-scheme:dark;
  --bg:#07111b;
  --panel:rgba(10,29,43,.82);
  --panel-solid:#0d202e;
  --surface:#122838;
  --border:rgba(88,214,241,.13);
  --border-strong:rgba(86,222,247,.3);
  --text:#e6f5f9;
  --muted:#80a3b3;
  --cyan:#58dcef;
  --cyan-bright:#6bebff;
  --mint:#6feaaf;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{min-height:100%;margin:0;background:var(--bg);color:var(--text)}
body{background:radial-gradient(circle at 82% 10%,rgba(16,113,129,.15),transparent 29%),linear-gradient(160deg,#07111b,#091722 57%,#07111b)}
button,input{font:inherit}
button{cursor:pointer}
button:disabled{opacity:.5;cursor:not-allowed}
button:focus-visible,input:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.shell{position:relative;max-width:640px;margin:0 auto;min-height:100dvh;padding:calc(22px + env(safe-area-inset-top)) 15px calc(20px + env(safe-area-inset-bottom));isolation:isolate}
.layout{position:relative;z-index:1}
.radar{pointer-events:none;position:absolute;inset:0;overflow:hidden;opacity:.34;z-index:0}
.radar:before{content:"";position:absolute;right:-112px;top:-125px;width:440px;height:440px;border-radius:50%;
  background:
  radial-gradient(circle at center,transparent 0 34px,rgba(90,224,241,.12) 35px 36px,transparent 37px 73px,rgba(90,224,241,.11) 74px 75px,transparent 76px 114px,rgba(90,224,241,.12) 115px 116px,transparent 117px 160px,rgba(90,224,241,.10) 161px 162px,transparent 163px),
  linear-gradient(90deg,transparent 49.85%,rgba(90,224,241,.13) 50%,transparent 50.15%),
  linear-gradient(0deg,transparent 49.85%,rgba(90,224,241,.13) 50%,transparent 50.15%),
  radial-gradient(circle at 35% 48%,rgba(105,237,176,.34) 0 2px,transparent 3px),
  radial-gradient(circle at 72% 38%,rgba(88,220,239,.36) 0 2px,transparent 3px),
  radial-gradient(circle at 64% 79%,rgba(88,220,239,.32) 0 1.5px,transparent 2.5px),
  radial-gradient(circle at center,rgba(14,74,85,.22),transparent 70%);
  animation:radarPulse 8s ease-in-out infinite}
.radar-sweep{position:absolute;right:-72px;top:-85px;width:360px;height:360px;border-radius:50%;
  background:conic-gradient(from 12deg,transparent 0deg 305deg,rgba(100,239,174,.015) 315deg,rgba(100,239,174,.13) 353deg,rgba(100,239,174,.28) 360deg);
  animation:radarRotate 17s linear infinite;mix-blend-mode:screen}
.radar-blip{position:absolute;display:block;width:5px;height:5px;border-radius:50%;background:#76f8b8;box-shadow:0 0 11px rgba(105,255,180,.42);opacity:0;animation:blipFade 10s infinite}
.blip-1{right:112px;top:86px;animation-delay:-1s}
.blip-2{right:215px;top:170px;animation-delay:-6s}
.blip-3{right:70px;top:244px;animation-delay:-3.4s}
@keyframes blipFade{0%,72%,100%{opacity:0}76%,87%{opacity:.65}95%{opacity:0}}
@keyframes radarRotate{to{transform:rotate(360deg)}}
@keyframes radarPulse{50%{opacity:.64}}
.topbar{display:grid;grid-template-columns:38px minmax(0,1fr) 38px;gap:8px;align-items:center;min-height:56px;margin:-6px 0 18px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.top-titles{min-width:0}
.top-titles h1{font-size:17px;font-weight:650;letter-spacing:-.3px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-titles p{font-size:12px;color:var(--muted);margin:3px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-back,.icon-btn{border:0;background:transparent;color:var(--cyan);height:38px;border-radius:11px;font-size:23px}
.icon-btn{color:var(--muted)}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:0 0 17px}
.stat-card{display:grid;gap:9px;min-height:90px;padding:14px 10px;background:var(--panel);border:1px solid var(--border);border-radius:16px;backdrop-filter:blur(14px)}
.stat-card span{font-size:11px;color:var(--muted);font-weight:520;white-space:nowrap}
.stat-card b{font-size:clamp(19px,5.6vw,26px);color:var(--text);font-weight:680;letter-spacing:-.8px;overflow:hidden;text-overflow:ellipsis;align-self:end}
.stat-card:first-child b{color:var(--cyan-bright)}
.stat-card:last-child b{color:var(--mint)}
.tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;padding:4px;background:rgba(9,26,40,.84);border:1px solid var(--border);border-radius:13px;margin-bottom:13px}
.tab{font-size:13px;font-weight:610;color:var(--muted);border:none;border-radius:10px;padding:12px 10px;background:none}
.tab.active{background:rgba(47,149,167,.19);color:var(--cyan-bright);box-shadow:inset 0 0 0 1px rgba(87,225,245,.15)}
.tab #counter{font-weight:540}
.search-wrap{margin:0 0 12px}
.search-wrap input{width:100%;border:1px solid var(--border);background:rgba(12,30,43,.7);color:var(--text);border-radius:12px;padding:12px 13px;font-size:13px;outline:0}
.search-wrap input::placeholder{color:#648394}
.search-wrap input:focus{border-color:var(--border-strong)}
.chat-list{display:grid;gap:8px;align-content:start;min-height:180px}
.chat-row{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:12px;width:100%;text-align:left;border:1px solid var(--border);border-radius:14px;padding:13px 12px;background:rgba(12,31,45,.75);color:var(--text);transition:background .15s,border-color .15s}
.chat-row:hover,.chat-row:active{background:rgba(18,53,68,.87);border-color:rgba(92,219,237,.27)}
.avatar{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:linear-gradient(140deg,rgba(41,110,138,.48),rgba(19,68,83,.58));color:var(--cyan-bright);font-size:15px;font-weight:720}
.chat-info{min-width:0}
.chat-name-line{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center}
.chat-name{font-size:14px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-date{font-size:10px;color:var(--muted)}
.chat-sub{font-size:12px;color:#9cb7c2;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-bottom{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;margin-top:7px;gap:7px}
.chat-handle{font-size:11px;color:#638b9d;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.count{display:grid;place-items:center;min-width:23px;height:22px;padding:0 7px;background:rgba(105,234,176,.15);border:1px solid rgba(105,234,176,.25);border-radius:999px;color:var(--mint);font-size:11px;font-weight:670}
.thread{display:flex;flex-direction:column;height:calc(100dvh - 117px - env(safe-area-inset-top) - env(safe-area-inset-bottom));min-height:320px}
.thread[hidden]{display:none}
.conversation{display:flex;flex-direction:column;gap:12px;overflow-y:auto;overscroll-behavior:contain;padding:4px 1px 16px;min-height:0;flex:1}
.bubble-row{display:flex}
.bubble-row.in{justify-content:flex-start}.bubble-row.out{justify-content:flex-end}
.bubble{min-width:90px;max-width:90%;background:rgba(16,42,58,.93);border:1px solid var(--border);border-radius:14px 14px 14px 5px;padding:11px 12px;overflow-wrap:anywhere}
.bubble-row.out .bubble{background:rgba(15,66,81,.76);border-color:rgba(96,212,226,.19);border-radius:14px 14px 5px 14px}
.bubble-content{white-space:pre-wrap;line-height:1.5;font-size:13px}
.bubble-meta{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:9px;font-size:10px;color:var(--muted)}
.media-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-bottom:8px}
.media-link{display:grid;place-items:center;border:1px solid var(--border-strong);background:rgba(80,216,236,.07);color:var(--cyan-bright);border-radius:10px;padding:10px 8px;font-size:11px;text-align:center;text-decoration:none;line-height:1.3}
.media-link:disabled{opacity:.5}
.media{display:block;max-width:100%;max-height:275px;border-radius:9px;margin-bottom:10px}
video.media{width:100%;background:rgba(0,0,0,.4)}
audio.media{height:42px;width:250px;max-width:100%}
.composer{display:grid;grid-template-columns:minmax(0,1fr) 46px;gap:9px;padding-top:10px;border-top:1px solid var(--border)}
.composer input{width:100%;border:1px solid var(--border);border-radius:13px;background:var(--panel-solid);color:var(--text);font-size:13px;padding:13px 12px;outline:0}
.composer input:focus{border-color:var(--border-strong)}
.composer button{border:0;border-radius:13px;background:linear-gradient(135deg,#14889e,#3db2c7);color:white;font-size:20px}
.composer-hint{text-align:center;font-size:10px;color:#658698;margin:9px 0 0}
.notice{padding:12px 14px;border-radius:11px;border:1px solid rgba(239,150,140,.4);background:rgba(136,44,38,.14);color:#f8ada4;line-height:1.5;white-space:pre-wrap;font-size:12px;margin-bottom:14px}
.empty{display:grid;place-items:center;text-align:center;gap:10px;padding:46px 20px;color:var(--muted)}
.empty .glyph{font-size:27px;color:var(--cyan)}
.empty strong{font-size:14px;color:var(--text);font-weight:600}
.empty p{max-width:280px;font-size:12px;line-height:1.6;margin:0}
.footnote{font-size:10px;color:#5e7b8d;line-height:1.5;margin:14px 2px 0}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){.radar:before,.radar-sweep,.radar-blip{animation:none!important}}
@media (min-width:760px){.shell{border-inline:1px solid rgba(75,203,226,.08);padding-left:22px;padding-right:22px}}
@media (max-width:350px){.stat-card{padding:12px 7px;min-height:83px}.stat-card span{font-size:10px}.chat-row{padding:11px 9px}.bubble{max-width:95%}}