/* ===== Near u – design tokens ===== */
:root{
  --acc1:#22D3EE; --acc2:#A78BFA; --grad:linear-gradient(135deg,var(--acc1),var(--acc2));
  --gold:#fbbf24; --green:#22C55E; --danger:#f43f5e;
  --r-sm:12px; --r:16px; --r-lg:20px; --r-xl:26px;
  --st:env(safe-area-inset-top,0px); --sb:env(safe-area-inset-bottom,0px); --nav:64px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Noto Sans Hebrew","Noto Sans Arabic","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Heebo,Arial,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
}
/* dark: near-black, cyan primary (dark text on cyan), violet accent */
html[data-theme=dark]{
  --acc1:#22D3EE; --acc2:#A78BFA; --acc-rgb:34,211,238; --acc2-rgb:167,139,250;
  --grad:linear-gradient(135deg,#22D3EE,#38BDF8); --on-grad:#0B0B0C; --accent:#A78BFA; --on-accent:#0B0B0C;
  --me-grad:conic-gradient(from 210deg,#22D3EE,#A78BFA,#22D3EE); --me-glow:rgba(var(--acc-rgb),.55);
  --bg:#0B0B0C; --bg2:#121212; --surface:rgba(24,24,27,.8); --surface-2:rgba(39,39,42,.8); --solid:#18181B; --field:rgba(9,9,11,.8);
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.17); --txt:#E5E7EB; --mut:#A1A1AA; --soft:#D4D4D8;
  --shadow:0 12px 34px rgba(0,0,0,.5); --glow:rgba(var(--acc-rgb),.45); --ring-bg:rgba(var(--acc-rgb),.06); --ring-line:rgba(var(--acc-rgb),.32);
  --map-dim:none; --sweep:34,211,238; --chip:rgba(255,255,255,.06); --me-bubble:var(--grad); --them-bubble:#1F1F23;
  --pin-chip:#18181B; --pin-chip-txt:#E5E7EB; --pin-ring:#FFFFFF;
  color-scheme:dark;
}
/* light: soft grey, blue primary (white text), yellow accent (dark text), white glass */
html[data-theme=light]{
  --acc1:#2563EB; --acc2:#1D4ED8; --acc-rgb:37,99,235; --acc2-rgb:29,78,216;
  --grad:linear-gradient(135deg,#2563EB,#1D4ED8); --on-grad:#FFFFFF; --accent:#FFD60A; --on-accent:#111111;
  --me-grad:conic-gradient(from 210deg,#2563EB,#FFD60A,#2563EB); --me-glow:rgba(37,99,235,.5);
  --bg:#F3F4F6; --bg2:#F2F3F0; --surface:rgba(255,255,255,.82); --surface-2:rgba(255,255,255,.92); --solid:#FFFFFF; --field:#FFFFFF;
  --line:rgba(15,23,42,.10); --line-2:rgba(15,23,42,.20); --txt:#0F172A; --mut:#4B5563; --soft:#334155;
  --shadow:0 12px 30px rgba(15,23,42,.14); --glow:rgba(37,99,235,.35); --ring-bg:rgba(37,99,235,.05); --ring-line:rgba(37,99,235,.30);
  --map-dim:none; --sweep:37,99,235; --chip:rgba(15,23,42,.05); --me-bubble:var(--grad); --them-bubble:#FFFFFF;
  --pin-chip:#FFFFFF; --pin-chip-txt:#0F172A; --pin-ring:#FFFFFF;
  color-scheme:light;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--txt);font-family:var(--font);overscroll-behavior:none;-webkit-font-smoothing:antialiased;transition:background .3s}
body{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;font-size:15px}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;touch-action:manipulation}
input,textarea{font:inherit;color:var(--txt);background:var(--field);border:1px solid var(--line);border-radius:var(--r);padding:13px 15px;width:100%;outline:none;font-size:16px;transition:border-color .2s,box-shadow .2s}
input:focus,textarea:focus{border-color:var(--acc1);box-shadow:0 0 0 3px rgba(var(--acc-rgb),.18)}
input::placeholder,textarea::placeholder{color:var(--mut);opacity:.8}
input[type=date]{min-height:50px;-webkit-appearance:none;text-align:start}
svg.ic{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;display:block}
[dir=rtl] .flip svg.ic,[dir=rtl] svg.ic.flip{transform:scaleX(-1)}
.hidden{display:none!important}
.muted{color:var(--mut);font-size:14px;line-height:1.55}
.glass{background:var(--surface);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border:1px solid var(--line)}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:52px;padding:14px;border-radius:var(--r);font-weight:700;font-size:16px;margin-top:12px;transition:transform .15s var(--ease),filter .2s,opacity .2s}
.btn:active,.icon-btn:active,.fab:active,.hi-btn:active,.chip-btn:active,.send:active{transform:scale(.96)}
.btn.primary{background:var(--grad);color:var(--on-grad);box-shadow:0 10px 26px rgba(var(--acc-rgb),.35)}
.btn.ghost{background:var(--surface-2);border:1px solid var(--line)}
.btn.danger{background:rgba(244,63,94,.12);color:var(--danger);border:1px solid rgba(244,63,94,.25)}
.btn.link{color:var(--mut);font-weight:500;font-size:14px;min-height:44px}
.btn:disabled{opacity:.5}
#toast{position:fixed;top:calc(var(--st) + 10px);left:50%;transform:translate(-50%,-140%);transition:transform .35s var(--ease);z-index:9999;padding:12px 18px;border-radius:var(--r);max-width:92%;box-shadow:var(--shadow);font-size:14px;background:var(--solid);border:1px solid var(--line-2);text-align:center}
#toast.show{transform:translate(-50%,0)}
.brand{font-weight:800;font-size:25px;letter-spacing:-.3px;display:flex;align-items:center;gap:3px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 10px var(--glow))}
.brand .brand-pin svg{width:16px;height:16px;stroke:var(--acc1);margin-top:-12px}
.brand.big{font-size:52px;justify-content:center;margin:20px 0 6px}

/* ===== onboarding ===== */
#onboard{position:fixed;top:0;right:0;bottom:0;left:0;overflow-y:auto;background:radial-gradient(120% 60% at 50% 0%,rgba(var(--acc2-rgb),.22),transparent 60%),radial-gradient(90% 50% at 50% 100%,rgba(var(--acc-rgb),.12),transparent 70%),var(--bg)}
.lang-pill{position:absolute;top:calc(var(--st) + 12px);inset-inline-end:16px;z-index:5;display:flex;align-items:center;gap:6px;min-height:40px;padding:8px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:14px;font-weight:600;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.lang-pill svg.ic{width:18px;height:18px}
.ob-screen{max-width:460px;margin:0 auto;padding:calc(var(--st) + 64px) 24px calc(var(--sb) + 30px);animation:fadeUp .4s var(--ease)}
.ob-screen h2{font-size:28px;margin:12px 0 8px;letter-spacing:-.3px}
.back-btn{position:absolute;top:calc(var(--st) + 12px);inset-inline-start:14px;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--surface);border:1px solid var(--line)}
.ob-icon{width:64px;height:64px;border-radius:20px;background:var(--grad);display:flex;align-items:center;justify-content:center;color:var(--on-grad);box-shadow:0 10px 30px rgba(var(--acc-rgb),.4)}
.ob-icon svg.ic{width:30px;height:30px}
.fld{display:block;margin-top:16px;font-size:13px;color:var(--mut);font-weight:600}
.fld>input,.fld>textarea,.fld>.seg,.fld>div{margin-top:7px}
.ob-hero{text-align:center;padding-top:10px}
.ob-hero .tag{color:var(--soft);line-height:1.65;white-space:pre-line;font-size:16px}
.ob-points{list-style:none;padding:0;margin:26px 0;display:grid;gap:10px}
.ob-points li{background:var(--surface);border:1px solid var(--line);padding:14px 16px;border-radius:var(--r);font-size:15px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.ob-radar{position:relative;width:180px;height:180px;margin:0 auto;border-radius:50%;overflow:hidden}
.ob-radar span{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;border:2px solid var(--ring-line);animation:pulse 3s infinite var(--ease)}
.ob-radar span:nth-child(2){animation-delay:1s}.ob-radar span:nth-child(3){animation-delay:2s}
.ob-radar .ob-sweep{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 290deg,rgba(var(--sweep),.08) 310deg,rgba(var(--sweep),.55) 359deg,rgba(var(--sweep),.9) 360deg);animation:spin 3.2s linear 2 both}
.ob-radar i{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px;border-radius:50%;background:#fff;border:9px solid var(--acc1);box-shadow:0 0 30px var(--acc1)}
@keyframes pulse{0%{transform:scale(.2);opacity:1}100%{transform:scale(1);opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
#in-phone,#in-code{font-size:22px;text-align:center;letter-spacing:2px;margin-top:18px}
.code-in{letter-spacing:12px!important}
.testbox{background:rgba(var(--acc-rgb),.1);border:1px dashed var(--acc1);border-radius:var(--r);padding:12px;margin-top:14px;text-align:center;font-size:13px;color:var(--soft)}
.testbox b{display:block;font-size:32px;letter-spacing:8px;margin-top:4px;direction:ltr;color:var(--txt)}
.seg{display:flex;background:var(--field);border:1px solid var(--line);border-radius:var(--r);padding:4px;gap:4px}
.seg button{flex:1;min-height:42px;padding:8px;border-radius:12px;color:var(--mut);font-weight:600;font-size:14px;transition:background .2s,color .2s}
.seg button.on{background:var(--grad);color:var(--on-grad);box-shadow:0 4px 14px rgba(var(--acc-rgb),.35)}
.photo-pick{display:flex;align-items:center;gap:14px;margin-top:14px;cursor:pointer;color:var(--acc1);font-size:14px;font-weight:600}
.photo-pick>span{display:flex;align-items:center;gap:6px}

/* interests */
.chips-wrap{display:flex;flex-wrap:wrap;gap:8px}
.chip-btn{min-height:38px;padding:7px 13px;border-radius:999px;background:var(--chip);border:1px solid var(--line);font-size:14px;color:var(--soft);transition:all .2s var(--ease);display:inline-flex;align-items:center;gap:6px}
.chip-btn.on{background:var(--grad);border-color:transparent;color:var(--on-grad);box-shadow:0 4px 14px rgba(var(--acc-rgb),.3)}
.chip-btn.custom{background:rgba(var(--acc-rgb),.1);border-color:rgba(var(--acc-rgb),.35);color:var(--txt)}
.chip-btn.custom svg.ic{width:15px;height:15px;opacity:.7}
.add-row{display:flex;gap:8px;margin-top:10px}
.add-row input{flex:1}
.add-row button{flex:none;min-width:84px;border-radius:var(--r);background:var(--surface-2);border:1px solid var(--line-2);font-weight:700;display:flex;align-items:center;justify-content:center;gap:4px;padding:0 12px}
.hint{font-size:12px;color:var(--mut);margin-top:6px;line-height:1.5}
.sub-t{font-size:13px;color:var(--mut);font-weight:700;margin:14px 0 8px}

/* ===== location gate ===== */
#gate{position:fixed;top:0;right:0;bottom:0;left:0;z-index:5000;overflow-y:auto;background:radial-gradient(100% 60% at 50% 0%,rgba(var(--acc2-rgb),.25),transparent 60%),var(--bg);animation:gateIn .35s var(--ease) .35s both}
#gate.instant{animation-delay:0s}
@keyframes gateIn{from{opacity:0}to{opacity:1}}
.gate-inner{max-width:480px;margin:0 auto;padding:calc(var(--st) + 50px) 24px calc(var(--sb) + 30px);text-align:center}
.gate-icon{position:relative;width:120px;height:120px;margin:0 auto 10px;display:flex;align-items:center;justify-content:center}
.gate-icon span{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;border:2px solid var(--ring-line);animation:pulse 2.8s infinite}
.gate-icon span:nth-child(2){animation-delay:1.4s}
.gate-icon>i{width:72px;height:72px;border-radius:24px;background:var(--grad);display:flex;align-items:center;justify-content:center;color:var(--on-grad);box-shadow:0 12px 34px rgba(var(--acc-rgb),.45)}
.gate-icon svg.ic{width:34px;height:34px}
.gate-inner h2{font-size:26px;margin:12px 0 8px}
.gate-reason{margin:14px 0 0;padding:11px 14px;border-radius:var(--r);background:rgba(244,63,94,.1);border:1px solid rgba(244,63,94,.28);color:var(--danger);font-size:14px;font-weight:600}
.gate-checking{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--mut);margin-top:16px;font-size:14px}
.spinner{width:18px;height:18px;border-radius:50%;border:2.5px solid var(--line-2);border-top-color:var(--acc1);animation:spin .8s linear infinite}
.help-card{text-align:start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;margin-top:14px}
.help-card h4{margin:0 0 6px;display:flex;align-items:center;gap:8px;font-size:15px}
.help-card ol{margin:0;padding-inline-start:20px;color:var(--soft);font-size:14px;line-height:1.6}
.help-card li{margin:4px 0}

/* ===== avatars ===== */
.avatar{position:relative;width:52px;height:52px;border-radius:50%;background:var(--solid);flex:none;border:3px solid var(--rc,var(--acc1));overflow:hidden;display:flex;align-items:center;justify-content:center;color:var(--rc,var(--acc1))}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.avatar svg.fig{width:60%;height:60%;fill:currentColor;stroke:none}
.avatar.xl{width:88px;height:88px}
.avatar.sq{border-radius:22px}
.r-near{--rc:var(--acc1)}.r-fav{--rc:var(--gold)}.r-acq{--rc:var(--green)}

/* ===== main / near ===== */
#app{position:fixed;top:0;right:0;bottom:0;left:0}
.view{position:absolute;top:0;right:0;bottom:0;left:0;bottom:calc(var(--nav) + var(--sb))}
#view-near{overflow:hidden}
#map{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--bg2);transition:filter .5s;isolation:isolate}   /* own stacking context: map panes stay below the radar overlay */
.radar-mode #map{filter:var(--map-dim)}
.leaflet-container{background:var(--bg2);font-family:inherit}
.leaflet-control-attribution{background:var(--surface)!important;color:var(--mut)!important;font-size:9px!important;border-radius:8px 0 0 0}
.leaflet-control-attribution a{color:var(--mut)!important}
#radar{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;display:none}
.radar-mode #radar{display:block}
#radar .rings span{position:absolute;left:0;top:0;border-radius:50%;border:1.5px solid var(--ring-line);background:radial-gradient(circle,var(--ring-bg),transparent 72%);box-shadow:0 0 34px var(--ring-bg) inset;will-change:transform}
#radar .rings span:nth-child(3){animation:ringPulse 4s ease-in-out infinite}
@keyframes ringPulse{50%{box-shadow:0 0 46px rgba(var(--sweep),.22) inset,0 0 18px rgba(var(--sweep),.12)}}
.sweep{position:absolute;left:0;top:0;border-radius:50%;will-change:transform,opacity;opacity:0;
  background:conic-gradient(from 0deg,transparent 0deg 285deg,rgba(var(--sweep),.04) 300deg,rgba(var(--sweep),.22) 340deg,rgba(var(--sweep),.55) 358deg,rgba(var(--sweep),.95) 360deg);
  -webkit-mask:radial-gradient(circle,#000 0 69%,transparent 70.5%);mask:radial-gradient(circle,#000 0 69%,transparent 70.5%);transition:opacity .6s}
.sweep.on{opacity:1}.sweep.idle{opacity:.38}
.scan-label{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:13px;font-weight:700;letter-spacing:.3px;opacity:0;transition:opacity .4s;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.scan-label.on{opacity:1}
.scan-label .dot{width:8px;height:8px;border-radius:50%;background:var(--acc1);box-shadow:0 0 10px var(--acc1);animation:blink 1s infinite}
@keyframes blink{50%{opacity:.3}}
#radar-people,#radar-me{position:absolute;top:0;right:0;bottom:0;left:0}
.rp{position:absolute;left:0;top:0;pointer-events:auto;cursor:pointer;transition:transform .9s var(--ease);will-change:transform}
.rp-in{display:flex;flex-direction:column;align-items:center;transform:translate(-50%,-50%) scale(.3);opacity:0}
.rp.shown .rp-in{animation:pop .55s var(--ease) forwards}
.rp.static .rp-in{animation:none;opacity:1;transform:translate(-50%,-50%)}
@keyframes pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.3);filter:brightness(2.2)}55%{opacity:1;transform:translate(-50%,-50%) scale(1.18);filter:brightness(1.5)}100%{opacity:1;transform:translate(-50%,-50%) scale(1);filter:none}}
.demo-tag{position:absolute;top:-4px;inset-inline-start:-8px;background:var(--solid);border:1px solid var(--line-2);font-size:9px;padding:1px 5px;border-radius:7px;color:var(--mut);font-weight:700}
.rp .demo-tag{top:-6px}
#radar-me .meav{position:absolute;left:0;top:0;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center}

.topbar{position:absolute;top:0;left:0;right:0;padding:calc(var(--st) + 8px) 16px 0;display:flex;align-items:center;justify-content:space-between;z-index:500;pointer-events:none}
.topbar>*{pointer-events:auto}
.icon-btn{position:relative;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:transform .15s var(--ease)}
.icon-btn.on{background:rgba(251,191,36,.16);border-color:var(--gold);color:var(--gold)}
.dot-badge{position:absolute;top:8px;inset-inline-end:8px;width:9px;height:9px;border-radius:50%;background:var(--acc1);box-shadow:0 0 8px var(--acc1)}
.tabs{position:absolute;top:calc(var(--st) + 64px);left:14px;right:14px;z-index:500;display:flex;border-radius:22px;padding:4px;box-shadow:var(--shadow)}
.tabs button{flex:1;min-height:40px;padding:6px 4px;border-radius:18px;font-size:13.5px;color:var(--soft);display:flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;font-weight:600;transition:background .25s,color .25s;overflow:hidden}
.tabs button svg.ic{width:17px;height:17px}
.tabs button.on{background:var(--grad);color:var(--on-grad);box-shadow:0 4px 16px rgba(var(--acc-rgb),.35)}
.filter-chip{position:absolute;top:calc(var(--st) + 118px);left:50%;transform:translateX(-50%);z-index:500;display:flex;align-items:center;gap:6px;padding:6px 6px 6px 12px;padding-inline-start:12px;padding-inline-end:6px;border-radius:999px;font-size:13px;font-weight:600}
.filter-chip button{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--chip)}
.filter-chip svg.ic{width:15px;height:15px}
.fabs{position:absolute;right:14px;bottom:160px;z-index:500;display:flex;flex-direction:column;gap:12px;transition:bottom .3s var(--ease)}
.fab{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);transition:transform .15s var(--ease)}
.fab.light{background:#fff;color:#2563eb;border:0}
.fab.light svg.ic{fill:#2563eb;stroke:#2563eb}
.no-card .fabs{bottom:24px}
.map-mode #btn-rescan{display:none}

.card{position:absolute;left:0;right:0;bottom:0;z-index:600;border-bottom:0;border-radius:var(--r-xl) var(--r-xl) 0 0;padding:14px 16px 14px;display:flex;align-items:center;gap:14px;box-shadow:0 -10px 30px rgba(0,0,0,.25);animation:sheetUp .35s var(--ease)}
.card:before{content:"";position:absolute;top:7px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:var(--line-2)}
.card .avatar{width:92px;height:92px;border-radius:22px}
.card-x{position:absolute;top:-19px;inset-inline-end:14px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--solid);border:1px solid var(--line-2);color:var(--txt);box-shadow:0 6px 18px rgba(0,0,0,.25);z-index:2;transition:transform .15s var(--ease)}
.card-x:active{transform:scale(.92)}.card-x svg.ic{width:18px;height:18px}
.card .info{flex:1;min-width:0;padding-top:6px;cursor:pointer}
.card .nm{font-size:20px;font-weight:800;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.card .sub{color:var(--mut);font-size:13.5px;margin:3px 0 6px}
.status-line{font-size:13px;color:var(--soft);margin:2px 0 7px;display:flex;gap:6px;align-items:baseline;overflow:hidden}
.status-line q{font-style:italic;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;quotes:"“" "”"}
.status-line small{color:var(--mut);white-space:nowrap}
.chips{display:flex;gap:6px;flex-wrap:nowrap;overflow:hidden}
.chip{border:1px solid var(--line);background:var(--chip);border-radius:10px;padding:4px 9px;font-size:12px;white-space:nowrap;color:var(--soft)}
.chip.custom{border-color:rgba(var(--acc-rgb),.35);background:rgba(var(--acc-rgb),.08)}
.hi-btn{width:68px;height:68px;border-radius:50%;flex:none;background:var(--accent);color:var(--on-accent);box-shadow:0 10px 26px rgba(0,0,0,.18);display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:800;font-size:12.5px;gap:2px;transition:transform .15s var(--ease)}
.hi-btn svg.ic{width:24px;height:24px}
.badge-demo{font-size:10px;background:var(--chip);border:1px solid var(--line-2);color:var(--mut);border-radius:8px;padding:2px 6px;font-weight:700}
.star{color:var(--gold)}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}

/* map pins */
.radius-circle{stroke:var(--acc1);stroke-width:1.5;fill:var(--acc1);fill-opacity:.04;stroke-dasharray:6 6}

/* ===== pages ===== */
.page{overflow-y:auto;padding:calc(var(--st) + 16px) 16px 24px;background:var(--bg)}
.page-title{font-size:30px;margin:4px 0 14px;letter-spacing:-.4px}
.search-wrap{position:relative;margin-bottom:12px}
.search-wrap svg.ic{position:absolute;top:50%;inset-inline-start:14px;transform:translateY(-50%);color:var(--mut);width:19px;height:19px}
.search-wrap input{padding-inline-start:42px}
.list{display:flex;flex-direction:column;gap:8px}
.row{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:11px 12px;cursor:pointer;min-height:64px;transition:transform .15s var(--ease),background .2s;animation:fadeUp .3s var(--ease) both}
.row:active{transform:scale(.985)}
.row .mid{flex:1;min-width:0}
.row .t{font-weight:700;display:flex;align-items:center;gap:6px}
.row .s{color:var(--mut);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.row .end{font-size:12px;color:var(--mut);display:flex;flex-direction:column;align-items:flex-end;gap:5px;white-space:nowrap}
.row.unread{border-color:rgba(var(--acc-rgb),.35)}
.row.unread .s{color:var(--txt);font-weight:600}
.cnt{background:var(--grad);color:var(--on-grad);font-weight:800;border-radius:10px;min-width:20px;padding:1px 6px;text-align:center;font-size:12px}
.empty{text-align:center;color:var(--mut);padding:44px 20px;line-height:1.7;white-space:pre-line}
.online-dot{width:9px;height:9px;border-radius:50%;background:var(--green);display:inline-block;box-shadow:0 0 6px var(--green)}

/* ===== chat ===== */
.chat{display:flex;flex-direction:column;padding:0}
.chat-head{display:flex;align-items:center;gap:8px;padding:calc(var(--st) + 8px) 10px 10px;border-width:0 0 1px}
#chat-who{display:flex;align-items:center;gap:10px;font-weight:700;cursor:pointer;min-height:44px}
#chat-who .avatar{width:40px;height:40px;border-width:2px}
#chat-msgs{flex:1;overflow-y:auto;padding:14px 12px;display:flex;flex-direction:column;gap:6px}
.msg{max-width:78%;padding:9px 13px;border-radius:20px;line-height:1.45;font-size:15px;word-wrap:break-word;white-space:pre-wrap;animation:msgIn .25s var(--ease)}
.msg.me{align-self:flex-end;background:var(--me-bubble);color:var(--on-grad);border-end-end-radius:6px}
.msg.them{align-self:flex-start;background:var(--them-bubble);border:1px solid var(--line);border-end-start-radius:6px}
.msg time{display:block;font-size:10px;opacity:.65;margin-top:3px;text-align:end}
@keyframes msgIn{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
#chat-typing{padding:0 16px 6px;color:var(--mut);font-size:13px;display:flex;align-items:center;gap:6px}
.typing-dots{display:inline-flex;gap:3px}.typing-dots i{width:5px;height:5px;border-radius:50%;background:var(--mut);animation:blink 1s infinite}
.typing-dots i:nth-child(2){animation-delay:.2s}.typing-dots i:nth-child(3){animation-delay:.4s}
#chat-form{display:flex;gap:8px;padding:10px 12px;border-width:1px 0 0}
#chat-form input{border-radius:24px;padding:11px 16px}
.send{width:46px;height:46px;border-radius:50%;background:var(--grad);color:var(--on-grad);display:flex;align-items:center;justify-content:center;flex:none;transition:transform .15s var(--ease)}
.chat-note{text-align:center;color:var(--mut);font-size:12px;margin:6px 0}

/* ===== bottom nav ===== */
.bottomnav{position:fixed;left:0;right:0;bottom:0;height:calc(var(--nav) + var(--sb));padding-bottom:var(--sb);border-width:1px 0 0;display:flex;z-index:900}
.bottomnav button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--mut);font-size:11.5px;position:relative;min-height:44px;transition:color .2s}
.bottomnav button.on{color:var(--txt);font-weight:700}
.bottomnav button.on svg.ic{stroke:var(--acc1);filter:drop-shadow(0 0 8px var(--glow))}
.bottomnav button.on:after{content:"";position:absolute;top:0;width:28px;height:3px;border-radius:0 0 3px 3px;background:var(--grad)}
.badge{position:absolute;top:6px;left:calc(50% + 6px);background:var(--danger);color:#fff;border-radius:10px;font-size:11px;padding:1px 6px;font-weight:800;box-shadow:0 2px 8px rgba(244,63,94,.5)}

/* ===== sheet ===== */
#sheet-bg{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(3,6,20,.5);z-index:1000;animation:gateIn .25s both;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
#sheet{position:fixed;left:0;right:0;bottom:0;max-height:90%;overflow-y:auto;z-index:1001;background:var(--solid);border-radius:var(--r-xl) var(--r-xl) 0 0;border-top:1px solid var(--line);padding:22px 18px calc(var(--sb) + 22px);animation:sheetUp .35s var(--ease);box-shadow:0 -20px 50px rgba(0,0,0,.3)}
#sheet:before{content:"";position:absolute;top:8px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:var(--line-2)}
#sheet h3{margin:4px 0 12px;font-size:21px}
.prof-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.prof-head .avatar{width:120px;height:120px;border-width:4px;box-shadow:0 0 30px var(--glow)}
.prof-head .nm{font-size:24px;font-weight:800}
.bio{background:var(--chip);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;line-height:1.55;margin:12px 0;color:var(--soft);white-space:pre-wrap}
.btn-row{display:flex;gap:8px}.btn-row .btn{flex:1}
.set{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 2px;border-bottom:1px solid var(--line);min-height:56px}
.set .l{flex:1}.set .l small{display:block;color:var(--mut);font-size:12px;margin-top:2px}
.set .val{color:var(--mut);font-size:14px;display:flex;align-items:center;gap:4px}
.sw{position:relative;width:52px;height:32px;border-radius:16px;background:var(--line-2);flex:none;transition:background .25s}
.sw:after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:26px;height:26px;border-radius:50%;background:#fff;transition:inset-inline-start .25s var(--ease);box-shadow:0 2px 6px rgba(0,0,0,.25)}
.sw.on{background:var(--grad)}.sw.on:after{inset-inline-start:23px}
.radios{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.radios button{min-height:40px;padding:8px 13px;border-radius:12px;background:var(--chip);border:1px solid var(--line);font-size:14px;font-weight:600}
.radios button.on{background:var(--grad);border-color:transparent;color:var(--on-grad)}
.section-t{color:var(--mut);font-size:12.5px;margin:24px 0 6px;font-weight:800;text-transform:uppercase;letter-spacing:.6px}
.card-block{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:4px 14px}
.my-head{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.my-head .avatar{width:84px;height:84px;box-shadow:0 0 24px var(--glow)}
.pform .fld{margin-top:12px}
.pushcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px;margin-bottom:14px;font-size:14px;line-height:1.55}
.lang-list{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.lang-list button{min-height:50px;border-radius:var(--r);background:var(--chip);border:1px solid var(--line);font-size:15px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:6px}
.lang-list button.on{background:var(--grad);color:var(--on-grad);border-color:transparent}
.sugg{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}

@media (prefers-reduced-motion: reduce){
  *,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .sweep{display:none}
}

/* ===== calls ===== */
#toast{z-index:6000}
.chat-call{margin-inline-start:auto;display:flex;gap:4px}
.chat-call .icon-btn{width:44px;height:44px;border-radius:14px;color:var(--acc1);display:grid;place-items:center}
.chat-call.demo .icon-btn{opacity:.4}
.msg-call{display:flex;align-items:center;gap:10px;padding:8px 10px 8px 12px;border-radius:18px;max-width:82%;border:1px solid var(--line);background:var(--surface-2);animation:msgIn .25s var(--ease)}
.msg-call.me{align-self:flex-end}.msg-call.them{align-self:flex-start}
.msg-call .ci{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--chip);color:var(--acc1)}
.msg-call.missed .ci{color:var(--danger)}
.msg-call b{display:block;font-size:14px;font-weight:600}
.msg-call time{display:block;font-size:11px;color:var(--mut);margin-top:2px}
.msg-call .call-back{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--acc1);margin-inline-start:4px}
.msg-call .call-back svg.ic{width:19px;height:19px}

#call{position:fixed;top:0;right:0;bottom:0;left:0;z-index:4000;background:#050915;color:#fff;overflow:hidden;animation:callIn .3s var(--ease) both;touch-action:none}
#call.leaving{animation:callOut .26s var(--ease) both}
@keyframes callIn{from{opacity:0;transform:scale(1.04)}}
@keyframes callOut{to{opacity:0;transform:scale(.98)}}
.call-bg{position:absolute;top:-40px;right:-40px;bottom:-40px;left:-40px;background:radial-gradient(90% 60% at 50% 20%,rgba(var(--acc2-rgb),.45),transparent 70%),radial-gradient(80% 50% at 50% 100%,rgba(var(--acc-rgb),.28),transparent 70%),#060b1e;background-size:cover;background-position:center;filter:blur(0)}
.call-bg[style*="url"]{filter:blur(38px) brightness(.45) saturate(1.2)}
#call-remote{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s;background:#000}
#call.has-remote #call-remote{opacity:1}
.call-top{position:absolute;left:0;right:0;top:0;padding:calc(var(--st) + 56px) 20px 0;display:flex;justify-content:center;text-align:center;transition:all .35s var(--ease)}
.call-peer{display:flex;flex-direction:column;align-items:center;gap:8px}
.call-av{position:relative}
.call-av .avatar{width:124px;height:124px;border-width:3px;box-shadow:0 0 0 10px rgba(255,255,255,.04),0 20px 50px rgba(0,0,0,.5)}
#call.pre .call-av::before,#call.pre .call-av::after{content:"";position:absolute;top:-6px;right:-6px;bottom:-6px;left:-6px;border-radius:50%;border:2px solid rgba(var(--acc-rgb),.55);animation:callPulse 2s var(--ease) infinite}
#call.pre .call-av::after{animation-delay:1s;border-color:rgba(var(--acc2-rgb),.55)}
@keyframes callPulse{from{transform:scale(1);opacity:.9}to{transform:scale(1.55);opacity:0}}
.call-name{margin:6px 0 0;font-size:26px;font-weight:700;letter-spacing:-.01em;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.call-status{font-size:15px;color:rgba(255,255,255,.78);font-variant-numeric:tabular-nums;min-height:20px;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.call-flags{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.call-flags span{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:rgba(0,0,0,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:12.5px}
.call-flags svg.ic{width:15px;height:15px}
/* active video call: compact header over the remote video */
#call.has-remote .call-top{padding-top:calc(var(--st) + 14px);background:linear-gradient(rgba(0,0,0,.45),transparent);padding-bottom:30px}
#call.has-remote .call-av{display:none}
#call.has-remote .call-name{font-size:18px;margin:0}
#call-local{position:absolute;width:108px;height:156px;object-fit:cover;border-radius:18px;border:2px solid rgba(255,255,255,.7);box-shadow:0 10px 30px rgba(0,0,0,.5);
  left:var(--lx,calc(100% - 122px));top:var(--ly,calc(var(--st) + 84px));z-index:3;display:none;touch-action:none;cursor:grab;transform:scaleX(-1);transition:left .25s var(--ease),top .25s var(--ease),opacity .3s;background:#111}
#call-local.drag{transition:none;cursor:grabbing}
#call.local-on #call-local{display:block}
#call.pre.local-on #call-local{opacity:.95}
.call-controls,.call-incoming{position:absolute;left:0;right:0;bottom:0;padding:18px 14px calc(var(--sb) + 26px);display:flex;justify-content:center;gap:12px;z-index:4}
.call-controls{background:linear-gradient(transparent,rgba(0,0,0,.55))}
#call[data-state=incoming] .call-controls{display:none}
#call:not([data-state=incoming]) .call-incoming{display:none}
.call-incoming{gap:76px;padding-bottom:calc(var(--sb) + 60px)}
.cbtn{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:58px;color:#fff}
.cbtn .ci{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.16);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.18);transition:transform .15s var(--ease),background .2s}
.cbtn:active .ci{transform:scale(.92)}
.cbtn.on .ci{background:#fff;color:#0b1433}
.cbtn small{font-size:11.5px;color:rgba(255,255,255,.85);max-width:72px;text-align:center;line-height:1.2}
.cbtn.end .ci{background:var(--danger);border-color:transparent;box-shadow:0 10px 26px rgba(244,63,94,.45)}
.cbtn.end .ci svg{transform:rotate(135deg)}
.cbtn.accept .ci{background:#22c55e;border-color:transparent;box-shadow:0 10px 26px rgba(34,197,94,.45);animation:acceptBounce 1.4s var(--ease) infinite}
.cbtn.big .ci{width:72px;height:72px}.cbtn.big svg.ic{width:30px;height:30px}
@keyframes acceptBounce{0%,100%{transform:translateY(0)}30%{transform:translateY(-6px)}60%{transform:translateY(0)}}
.call-tapaudio{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;padding:14px 22px;border-radius:999px;background:var(--grad);color:var(--on-grad);font-weight:700;box-shadow:0 10px 30px rgba(0,0,0,.4)}
@media (prefers-reduced-motion:reduce){#call,#call.leaving,.cbtn.accept .ci,#call.pre .call-av::before,#call.pre .call-av::after{animation:none!important}}
#call.rear #call-local{transform:none}
/* dark map: keyless OSM tiles re-colored */
/* raster fallback (no WebGL / vector tiles unavailable): grey OSM, inverted for dark */
#map.tiles-gray .leaflet-tile-pane{filter:grayscale(1) contrast(.9) brightness(1.04)}
#map.tiles-gray-dark .leaflet-tile-pane{filter:grayscale(1) invert(1) brightness(.78) contrast(.85)}
html[data-theme=dark] .leaflet-container{background:#0c1430}
.fabs{bottom:calc(var(--card-h,146px) + 14px)}
.no-card .fabs{bottom:24px}
.bottomnav button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;padding-inline-start:2px;padding-inline-end:2px}
/* guest mode */
.signup-pill{display:flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:999px;background:var(--grad);color:var(--on-grad);font-weight:700;font-size:14px;box-shadow:0 8px 22px rgba(var(--acc-rgb),.35)}
.signup-pill svg.ic{width:18px;height:18px}
.guest-sheet{text-align:center;padding:6px 4px 4px}
.guest-sheet h3{margin:12px 0 6px;font-size:21px}
.gs-icon{width:64px;height:64px;margin:4px auto 0;border-radius:20px;display:grid;place-items:center;background:var(--grad);color:var(--on-grad);box-shadow:0 12px 30px rgba(var(--acc-rgb),.4)}
.gs-icon svg.ic{width:30px;height:30px}
.guest-card .avatar{width:64px;height:64px}
body.guest #chat-call{display:none}
/* ===== chat media: attach / voice / photos / videos ===== */
#chat-form{align-items:center}
.attach-btn{width:40px;height:46px;flex:none;display:grid;place-items:center;color:var(--mut);border-radius:50%;transition:transform .15s var(--ease),color .2s}
.attach-btn:active{transform:scale(.92)}.attach-btn svg.ic{width:22px;height:22px}
#chat-send{display:none}
#chat-form.has-text #chat-send{display:flex}#chat-form.has-text #chat-mic{display:none}
#chat-form.recording .attach-btn,#chat-form.recording #chat-in,#chat-form.recording #chat-send{display:none!important}
#chat-form.recording #chat-mic{display:flex!important;box-shadow:0 0 0 4px rgba(var(--acc2-rgb),.18),0 8px 22px rgba(var(--acc-rgb),.4)}
#chat-rec{flex:1;min-width:0;display:flex;align-items:center;gap:10px;min-height:46px;padding-inline-start:4px;padding-inline-end:14px;border-radius:24px;background:var(--field);border:1px solid var(--line);animation:msgIn .2s var(--ease)}
.rec-del{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;color:var(--danger)}
.rec-del svg.ic{width:20px;height:20px}
.rec-dot{width:10px;height:10px;border-radius:50%;flex:none;background:var(--danger);box-shadow:0 0 10px var(--danger);animation:blink 1s infinite}
#rec-time{font-variant-numeric:tabular-nums;font-weight:700;font-size:15px}
.rec-lbl{color:var(--mut);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg-voice{display:flex;align-items:center;gap:10px;padding:8px 14px 6px 8px;padding-inline-start:8px;padding-inline-end:14px;border-radius:20px;width:min(270px,76%);animation:msgIn .25s var(--ease)}
.msg-voice.me{align-self:flex-end;background:var(--me-bubble);color:var(--on-grad);border-end-end-radius:6px}
.msg-voice.them{align-self:flex-start;background:var(--them-bubble);border:1px solid var(--line);border-end-start-radius:6px}
.vp-btn{width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;transition:transform .15s var(--ease)}
.vp-btn:active{transform:scale(.92)}
.msg-voice.me .vp-btn{background:rgba(255,255,255,.24);color:var(--on-grad)}
.msg-voice.them .vp-btn{background:var(--grad);color:var(--on-grad);box-shadow:0 4px 14px rgba(var(--acc-rgb),.35)}
.vp-btn svg.ic,.play-ov svg.ic{width:18px;height:18px;fill:currentColor;stroke-width:1.5}
.vp-btn svg.ic polygon,.play-ov svg.ic polygon{transform:translateX(1.5px)}
.vp-body{flex:1;min-width:0}
.wave{display:flex;align-items:center;gap:2px;height:30px;cursor:pointer}
.wave i{flex:1;min-width:2px;border-radius:2px;background:currentColor;opacity:.42;transition:opacity .15s,background .15s}
.wave i.on{opacity:1}
.msg-voice.them .wave i{background:var(--mut);opacity:.5}
.msg-voice.them .wave i.on{background:var(--acc1);opacity:1}
.vp-meta{display:flex;justify-content:space-between;align-items:center;font-size:11px;margin-top:2px}
.vp-time{font-variant-numeric:tabular-nums;opacity:.85}
.vp-meta time{font-size:10px;opacity:.65}
.msg-media{position:relative;width:min(240px,66vw);max-height:340px;border-radius:18px;overflow:hidden;background:var(--surface-2);border:1px solid var(--line);cursor:pointer;flex:none;animation:msgIn .25s var(--ease)}
.msg-media.me{align-self:flex-end;border-end-end-radius:6px}.msg-media.them{align-self:flex-start;border-end-start-radius:6px}
.msg-media img,.msg-media video{display:block;width:100%;height:100%;object-fit:cover}
.msg-media video{object-fit:contain;background:#000}
.msg-media time,.msg-media .dur{position:absolute;bottom:6px;font-size:10.5px;color:#fff;background:rgba(5,10,30,.5);padding:2px 8px;border-radius:999px;pointer-events:none;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.msg-media time{inset-inline-end:8px}
.msg-media .dur{inset-inline-start:8px;display:flex;align-items:center;gap:4px;font-variant-numeric:tabular-nums}
.msg-media .dur svg.ic{width:13px;height:13px}
.msg-media.playing time{display:none}
.play-ov{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(10,16,40,.5);border:1.5px solid rgba(255,255,255,.65);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 8px 24px rgba(0,0,0,.35)}
.play-ov svg.ic{width:24px;height:24px}
.msg-media.pending{width:min(200px,58vw);cursor:default}
.msg-media.pending.pend-voice{height:56px;width:min(220px,62%);background:var(--me-bubble);border:0}
.pend-ov{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:rgba(7,13,36,.45);color:#fff;font-size:12.5px;font-weight:600}
.pend-voice .pend-ov{flex-direction:row;background:transparent}
.pend-ov .spinner{border-color:rgba(255,255,255,.35);border-top-color:#fff}
#media-viewer{position:fixed;top:0;right:0;bottom:0;left:0;z-index:4000;background:rgba(0,0,0,.94);display:flex;align-items:center;justify-content:center;animation:gateIn .2s both;padding:calc(var(--st) + 8px) 0 calc(var(--sb) + 8px)}
#media-viewer img{max-width:100%;max-height:100%;object-fit:contain}
.mv-x{position:absolute;top:calc(var(--st) + 12px);inset-inline-end:14px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;z-index:2}
/* photo/video confirmation preview */
#media-preview{position:fixed;top:0;right:0;bottom:0;left:0;z-index:4000;display:flex;flex-direction:column;background:radial-gradient(120% 60% at 50% 0%,rgba(var(--acc2-rgb),.18),transparent 60%),var(--bg);animation:gateIn .2s both}
.mp-top{display:flex;align-items:center;gap:10px;padding:calc(var(--st) + 10px) 14px 8px}
.mp-x{width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);color:var(--txt);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:transform .15s var(--ease)}
.mp-x:active{transform:scale(.92)}
.mp-title{font-weight:700;font-size:16px;color:var(--soft)}
.mp-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:6px 12px 12px}
.mp-stage img,.mp-stage video{max-width:100%;max-height:100%;object-fit:contain;border-radius:var(--r-lg);box-shadow:var(--shadow);background:#000}
.mp-bar{display:flex;gap:10px;padding:12px 16px calc(var(--sb) + 12px);border-width:1px 0 0}
.mp-bar .btn{margin-top:0;flex:1}
.mp-bar .btn.primary{flex:1.4}
/* voice: record → stop → send */
.rec-play{display:none;width:36px;height:36px;border-radius:50%;flex:none;place-items:center;background:var(--chip);border:1px solid var(--line);color:var(--acc1)}
.rec-play svg.ic{width:16px;height:16px;fill:currentColor;stroke-width:1.5}
#chat-form.rec-review .rec-play{display:grid}
#chat-form.rec-review .rec-dot{display:none}
#chat-form.rec-live #chat-mic{background:var(--danger);color:#fff;box-shadow:0 0 0 5px rgba(244,63,94,.18),0 8px 22px rgba(244,63,94,.4)}
#chat-form.rec-live #chat-mic svg.ic{fill:currentColor;width:18px;height:18px}
#chat-form.rec-review #chat-mic{width:52px;height:52px;box-shadow:0 0 0 5px rgba(var(--acc2-rgb),.2),0 10px 26px rgba(var(--acc-rgb),.5);animation:sendPop .35s var(--ease)}
@keyframes sendPop{from{transform:scale(.7)}to{transform:none}}

/* ===== design v2: people pins + own marker (radar & map) ===== */
.pin-av{position:relative;flex:none}
.pin-av .avatar{width:54px;height:54px;border:3px solid var(--pin-ring);background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.22),0 1px 3px rgba(0,0,0,.18);transition:transform .25s var(--ease),box-shadow .25s}
.pin-av .avatar img{background:#fff}
.r-fav .pin-av .avatar,.r-acq .pin-av .avatar{box-shadow:0 0 0 2.5px var(--rc),0 4px 14px rgba(0,0,0,.22)}
.on-dot{position:absolute;bottom:1px;inset-inline-end:1px;width:14px;height:14px;border-radius:50%;background:#22C55E;border:2.5px solid var(--pin-ring);box-shadow:0 1px 3px rgba(0,0,0,.25)}
.rp.sel .pin-av .avatar{transform:scale(1.14);box-shadow:0 0 0 3px var(--acc1),0 8px 22px rgba(0,0,0,.28)}
.rp .d,.pin-d{font-size:11px;font-weight:700;margin-top:5px;display:flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;background:var(--pin-chip);color:var(--pin-chip-txt);white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.16);font-variant-numeric:tabular-nums}
.rp .d i,.pin-d i{display:none;width:7px;height:7px;border-radius:50%;background:var(--rc)}
.r-fav .d i,.r-acq .d i,.r-fav .pin-d i,.r-acq .pin-d i{display:block}
.pinwrap{position:relative;width:64px;height:76px;display:flex;flex-direction:column;align-items:center}
.pinwrap .pin-av .avatar{width:46px;height:46px}
.pinwrap .on-dot{width:12px;height:12px}
.pinwrap .pin-d{font-size:10.5px;padding:1px 7px;margin-top:4px}
/* own marker */
#radar-me .meav{position:absolute;left:0;top:0;transform:translate(-50%,-50%)}
.me-mk{position:relative;width:76px;height:76px;pointer-events:none}
.me-ring{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;padding:4px;background:var(--me-grad);box-shadow:0 0 0 2px rgba(255,255,255,.9),0 0 22px 2px var(--me-glow),0 6px 18px rgba(0,0,0,.25)}
.me-ph{width:100%;height:100%;border-radius:50%;overflow:hidden;background:#fff;border:2px solid #fff;display:flex;align-items:center;justify-content:center;color:var(--acc1)}
.me-ph img{width:100%;height:100%;object-fit:cover;display:block}
.me-ph svg.fig{width:60%;height:60%;fill:currentColor;stroke:none}
.me-halo{position:absolute;left:50%;top:50%;width:100%;height:100%;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(var(--acc-rgb),.28),rgba(var(--acc-rgb),0) 70%);border:1.5px solid rgba(var(--acc-rgb),.35);animation:meHalo 3.6s ease-out infinite}
.me-halo.h2{animation-delay:1.8s}
@keyframes meHalo{0%{width:100%;height:100%;opacity:.9}100%{width:260%;height:260%;opacity:0}}
.me-chip{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:6px;padding:2px 10px;border-radius:999px;background:#111827;color:#fff;font-size:11.5px;font-weight:800;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.3);line-height:1.5}
.me-pin .me-mk{width:56px;height:56px}
.me-pin .me-ring{padding:3.5px}
.me-pin .me-chip{font-size:10.5px;margin-top:5px;padding:1px 8px}
.radar-mode .me-pin{display:none}   /* the radar draws its own (larger) "me" in the centre */
@media (prefers-reduced-motion:reduce){.me-halo{animation:none;opacity:.5}}

/* ===== who appears on the map (residency / languages) ===== */
.who-chip{cursor:pointer;max-width:calc(100% - 32px);white-space:nowrap}
.who-chip>span{overflow:hidden;text-overflow:ellipsis}
.who-chip button{flex:none}
.who-chip.stacked{top:calc(var(--st) + 162px)}
.radios.who button.on{background:var(--grad);border-color:transparent;color:var(--on-grad)}
.cflag{font-size:.95em;line-height:1;vertical-align:baseline;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.langs-line{margin-top:6px;font-size:13px}
.pick-btn{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;margin-top:7px;min-height:48px;padding:12px 15px;border-radius:var(--r);background:var(--field);border:1px solid var(--line);color:var(--txt);font-size:16px;font-weight:500;text-align:start}
.pick-btn>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pick-btn svg.ic{width:18px;height:18px;color:var(--mut);flex:none}
.picker{display:flex;flex-direction:column;gap:10px;min-height:60vh}
.pk-head{display:flex;align-items:center;gap:8px}
.pk-head h3{margin:0!important}
.pk-back{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--chip);flex:none}
.pk-list{display:flex;flex-direction:column;max-height:52vh;overflow-y:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--field)}
.pk-row{display:flex;align-items:center;gap:12px;min-height:48px;padding:10px 14px;border-bottom:1px solid var(--line);text-align:start;font-size:15.5px}
.pk-row:last-child{border-bottom:0}
.pk-ic{width:24px;font-size:20px;line-height:1;flex:none;text-align:center;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.pk-nm{flex:1}
.pk-ck{opacity:0;color:var(--acc1);display:grid;place-items:center}
.pk-ck svg.ic{width:20px;height:20px;stroke-width:3}
.pk-row.on{background:rgba(var(--acc-rgb),.10);font-weight:700}
.pk-row.on .pk-ck{opacity:1}

/* failed media send: reason + retry stay in the chat */
.msg-media.failed{cursor:default}
.msg-media.failed .pend-ov{background:rgba(69,10,10,.62);padding:10px;text-align:center}
.msg-media.pending.pend-voice.failed{height:auto;min-height:56px;width:min(290px,82%);background:var(--surface-2);border:1.5px solid var(--danger)}
.pend-voice.failed .pend-ov{position:relative;flex-direction:column;background:transparent;color:var(--txt);gap:8px}
.fail-t{display:flex;align-items:center;justify-content:center;gap:6px;line-height:1.35}
.fail-t svg.ic{width:16px;height:16px;flex:none;color:#fca5a5}
.pend-voice.failed .fail-t svg.ic{color:var(--danger)}
.fail-btns{display:flex;align-items:center;gap:6px}
.fail-retry{display:flex;align-items:center;gap:5px;min-height:34px;padding:0 13px;border-radius:999px;background:#fff;color:#111;font-weight:700;font-size:12.5px;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.fail-retry svg.ic{width:14px;height:14px}
.fail-x{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.18);color:inherit}
.pend-voice.failed .fail-x{background:var(--chip)}
.fail-x svg.ic{width:15px;height:15px}


/* Safari < 14.1 (e.g. macOS 10.15 / Safari 14.0) has no inset-inline-start/end → physical fallback by page direction (generated by fixcss.js) */
@supports not (inset-inline-start:0){
html[dir=ltr] .lang-pill{right:16px}
html[dir=rtl] .lang-pill{left:16px}
html[dir=ltr] .back-btn{left:14px}
html[dir=rtl] .back-btn{right:14px}
html[dir=ltr] .demo-tag{left:-8px}
html[dir=rtl] .demo-tag{right:-8px}
html[dir=ltr] .dot-badge{right:8px}
html[dir=rtl] .dot-badge{left:8px}
html[dir=ltr] .card-x{right:14px}
html[dir=rtl] .card-x{left:14px}
html[dir=ltr] .search-wrap svg.ic{left:14px}
html[dir=rtl] .search-wrap svg.ic{right:14px}
html[dir=ltr] .sw:after{left:3px}
html[dir=rtl] .sw:after{right:3px}
.sw:after{transition:left .25s var(--ease),right .25s var(--ease)}
html[dir=ltr] .sw.on:after{left:23px}
html[dir=rtl] .sw.on:after{right:23px}
html[dir=ltr] .msg-media time{right:8px}
html[dir=rtl] .msg-media time{left:8px}
html[dir=ltr] .msg-media .dur{left:8px}
html[dir=rtl] .msg-media .dur{right:8px}
html[dir=ltr] .mv-x{right:14px}
html[dir=rtl] .mv-x{left:14px}
html[dir=ltr] .on-dot{right:1px}
html[dir=rtl] .on-dot{left:1px}
}

/* ---------- verified badge, report, safety center (Safari 14.0-safe: no flex gap / inset) ---------- */
.vbadge{display:inline-block;vertical-align:-3px;width:17px;height:17px;margin-inline-start:4px;cursor:help;line-height:0}
.vbadge svg{width:100%;height:100%}
.nm .vbadge,.my-head .vbadge{width:19px;height:19px;vertical-align:-3px}
.report-reasons{display:grid;grid-template-columns:1fr 1fr;grid-gap:8px;gap:8px;margin-top:6px}
.report-reasons button{padding:11px 10px;border-radius:14px;background:var(--chip);border:1px solid var(--line);font-weight:600;font-size:14px;color:var(--txt);text-align:center}
.report-reasons button.on{background:rgba(244,63,94,.12);border-color:rgba(244,63,94,.55);color:var(--danger)}
#rp-text{width:100%;box-sizing:border-box}
.rp-block{display:flex;align-items:flex-start;margin:12px 0 4px;padding:10px 12px;border-radius:14px;background:var(--chip);border:1px solid var(--line);cursor:pointer}
.rp-block input{width:20px;height:20px;margin:2px 0 0;flex:none;accent-color:var(--danger)}
.rp-block span{margin-inline-start:10px;display:block}.rp-block small{display:block;color:var(--mut);font-size:12.5px;margin-top:2px}
.report-btn{color:var(--danger)}
.sos-row{display:grid;grid-template-columns:1fr 1fr;grid-gap:10px;gap:10px}
.sos{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px 8px;border-radius:16px;background:rgba(244,63,94,.1);border:1px solid rgba(244,63,94,.35);color:var(--danger);text-decoration:none}
.sos b{font-size:26px;line-height:1.1;margin-top:2px}.sos span{font-size:13px;font-weight:600}.sos svg.ic{width:18px;height:18px}
.safety-card{padding:12px 14px}
.safety-list{margin:0;padding-inline-start:20px}.safety-list li{margin:6px 0;line-height:1.45}
.mail-link{font-weight:700;color:var(--acc1);word-break:break-all}
.safety-row svg.ic{width:20px;height:20px}
#chat-more{flex:none}
.na-tail{white-space:nowrap}
/* terms acceptance (signup) */
.terms-ck{display:flex;gap:10px;align-items:flex-start;text-align:start;font-size:14px;color:var(--soft);margin:12px 2px 2px;line-height:1.45;cursor:pointer}
.terms-ck input{width:20px;height:20px;flex:0 0 20px;margin:1px 0 0;accent-color:var(--acc1)}
.terms-ck a{color:var(--acc1);text-decoration:underline}
#sms-off .btn{margin-top:10px;width:100%}
body.limited #bottomnav button:not([data-view="profile"]){opacity:.45}

/* phase 2 (2026-10-08): sample (demo) profiles note, back-office announcement banner */
.demo-note{display:flex;gap:8px;align-items:flex-start;background:var(--chip);border:1px solid var(--line-2);border-radius:12px;padding:8px 10px;margin:10px 0 4px;font-size:13px;line-height:1.4;color:var(--mut)}
.demo-note svg.ic{width:18px;height:18px;flex:none;margin-top:1px}
.hi-btn.demo-hi{background:var(--chip);color:var(--mut);border:1px solid var(--line-2);box-shadow:none}
#media-viewer .mv-cap{position:absolute;left:16px;right:16px;bottom:calc(18px + env(safe-area-inset-bottom));text-align:center;color:#fff;background:rgba(0,0,0,.6);padding:8px 12px;border-radius:12px;font-size:13px;line-height:1.4}
#sys-banner{position:fixed;top:0;left:0;right:0;z-index:9999;display:flex;align-items:center;justify-content:center;gap:8px;background:#fde68a;color:#78350f;font-size:13px;font-weight:600;line-height:1.35;padding:calc(6px + env(safe-area-inset-top)) 12px 6px;box-shadow:0 2px 8px rgba(0,0,0,.12)}
#sys-banner span{flex:1;text-align:center}
#sys-banner button{background:none;border:0;color:inherit;padding:2px;display:flex}#sys-banner svg.ic{width:18px;height:18px}
/* "Languages I speak" picker: shortcut to the single app language */
.pk-top{display:flex;align-items:center;gap:10px;min-height:46px;padding:10px 14px;border-radius:var(--r);background:var(--chip);border:1px solid var(--line);font-size:15px;text-align:start}
.pk-top span{flex:1}.pk-top svg.ic{width:20px;height:20px}
.pk-hint{margin:-2px 2px 0;font-size:13px}
/* store app: attachment source chooser (camera / video / gallery) */
.att-list{display:flex;flex-direction:column;gap:10px}
.att-list .btn{justify-content:flex-start;gap:12px}
#gate-settings{margin-top:12px;width:100%}
/* ---------- sign-in options (2026-10-08): phone · Google · Apple · email · passkey · guest ---------- */
.fld-lbl{display:block;font-size:14px;font-weight:600;color:var(--soft);margin:18px 2px 8px;text-align:start}
.auth-or{display:flex;align-items:center;gap:12px;margin:22px 0 4px;color:var(--mut);font-size:13px}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--line)}
.auth-list{display:flex;flex-direction:column}
.btn.social{background:var(--surface-2);border:1px solid var(--line);font-weight:600;font-size:15px;gap:10px}
.btn.social svg,.btn.social i svg{width:20px;height:20px;flex:0 0 20px}
/* Google branding: white button, grey border, Google "G" logo (Roboto-like weight) */
.btn.social.google{background:#fff;color:#1f1f1f;border:1px solid #747775;font-family:Roboto,system-ui,-apple-system,"Segoe UI",Arial,sans-serif}
/* Apple branding: black button, white logo + text (white on light theme would vanish) */
.btn.social.apple{background:#000;color:#fff;border:1px solid #000}
.gsi-wrap{display:flex;justify-content:center;margin-top:12px;min-height:44px;color-scheme:light}
#ob-email input{margin-top:12px}
#ob-email .seg{margin-top:14px}
.pk-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.pk-row:last-child{border-bottom:0}.pk-row .mid{flex:1;min-width:0;font-size:14px}.pk-row small{display:block;color:var(--mut);font-size:12px}
.auth-methods .set:last-child{border:0}