/* Nearby Connect (Nov 2026, the glass direction): everything that floats is glass over a wallpaper.
   One island at the top says what the link is doing and unfolds for whatever needs a hand; the
   cards are frosted glass; the composer and the walkie-talkie are bars that float over what
   scrolls under them; buttons squash, rows drop in, the code pops. Both appearances through the
   site's tokens (dark glass over a navy aurora, light glass over pastels); the island is deep
   glass in both. The content security policy allows no inline styles: anything that varies per
   element (blip positions, bars, the beacon's arc) is set from script. Works from the offline
   shell (the wallpaper is gradients, never an image). */
.nb-page{
  --nb-accent:var(--theme-accent,var(--teal-700));--nb-accent-2:#5fe3cf;--nb-glow:#5fe3cf;--nb-accent-ink:#06302a;
  --nb-warm:#4cc2ff;--nb-warm-dark:#2a8fd6;--nb-warm-ink:#fff;
  --nb-ink:var(--ink);--nb-muted:var(--muted);--nb-faint:#7e8f9c;
  --nb-wall:#e6f0f3;--nb-wall-a:#9fe3d6;--nb-wall-b:#cfe3ff;--nb-wall-c:#c9dbff;--nb-wall-d:#eaf4f1;
  --nb-glass:rgba(255,255,255,.5);--nb-glass-2:rgba(255,255,255,.66);--nb-deep:rgba(255,255,255,.74);--nb-rim:rgba(255,255,255,.95);--nb-edge:rgba(255,255,255,.72);
  --nb-shadow:0 18px 44px rgba(30,50,70,.16);--nb-shadow-sm:0 8px 22px rgba(30,50,70,.12);
  --nb-ok:#1f9d55;--nb-ok-soft:rgba(70,196,122,.22);--nb-rose:#e0506b;--nb-rose-soft:rgba(251,113,133,.22);--nb-amber:#c47a0e;--nb-amber-soft:rgba(245,176,65,.26);
  --nb-spring:cubic-bezier(.34,1.56,.64,1);--nb-settle:cubic-bezier(.2,.8,.2,1);
  --nb-island-top:84px;
  position:relative;isolation:isolate;z-index:0;padding:18px 18px 60px;border-radius:28px;color:var(--nb-ink);overflow:clip
}
:root[data-theme=dark] .nb-page{
  --nb-faint:#7c8a98;
  --nb-wall:#0b121c;--nb-wall-a:#0e9f88;--nb-wall-b:#2b6fd4;--nb-wall-c:#4c63ff;--nb-wall-d:#1a3a5c;
  --nb-glass:rgba(255,255,255,.075);--nb-glass-2:rgba(255,255,255,.12);--nb-deep:rgba(14,22,34,.66);--nb-rim:rgba(255,255,255,.28);--nb-edge:rgba(255,255,255,.13);
  --nb-shadow:0 20px 50px rgba(0,0,0,.42);--nb-shadow-sm:0 10px 24px rgba(0,0,0,.34);
  --nb-ok:#7ee2a6;--nb-rose:#ffb3c0;--nb-amber:#ffd58a
}
/* The wallpaper: what the glass refracts. Three soft auroras in the site's colours, no image, no motion. */
.nb-page::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:
  radial-gradient(60% 42% at 8% 0%,var(--nb-wall-a),transparent 70%),
  radial-gradient(50% 40% at 100% 30%,var(--nb-wall-b),transparent 70%),
  radial-gradient(70% 50% at 25% 110%,var(--nb-wall-c),transparent 70%),
  radial-gradient(45% 35% at 60% 55%,var(--nb-wall-d),transparent 70%),var(--nb-wall)}
:root[data-theme=dark] .nb-page::before{background:
  radial-gradient(60% 42% at 8% 0%,color-mix(in srgb,var(--nb-wall-a) 70%,transparent),transparent 70%),
  radial-gradient(50% 40% at 100% 30%,color-mix(in srgb,var(--nb-wall-b) 48%,transparent),transparent 70%),
  radial-gradient(70% 50% at 25% 110%,color-mix(in srgb,var(--nb-wall-c) 36%,transparent),transparent 70%),
  radial-gradient(45% 35% at 60% 55%,color-mix(in srgb,var(--nb-wall-d) 60%,transparent),transparent 70%),var(--nb-wall)}
.nb-page[data-shell]{--nb-island-top:10px;width:100%;max-width:none;min-height:100vh;margin:0;border-radius:0;padding:14px 14px 60px}
.nb-page svg{flex:0 0 auto}
.nb-page *:focus-visible{outline:2px solid var(--nb-accent-2);outline-offset:2px}
.nb-page .eyebrow{color:var(--nb-accent)}:root[data-theme=dark] .nb-page .eyebrow{color:var(--nb-accent-2)}
/* ---- Glass ---- */
.nb-card,.nb-notice,.nb-conv-head,.nb-composer,.nb-walkie,.nb-record,.nb-menu-list,.nb-person,.nb-island,.nb-dialog,.nb-msg.is-in,.nb-platform{
  position:relative;background:var(--nb-glass);border:1px solid var(--nb-edge);
  backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);
  box-shadow:inset 0 1px 0 var(--nb-rim),var(--nb-shadow-sm)}
.nb-card::before,.nb-island::before,.nb-dialog::before,.nb-conv-head::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,0) 38%,rgba(255,255,255,0) 62%,rgba(255,255,255,.07))}
@supports not (backdrop-filter:blur(1px)){.nb-page{--nb-glass:rgba(255,255,255,.86);--nb-glass-2:rgba(255,255,255,.94);--nb-deep:rgba(255,255,255,.96)}:root[data-theme=dark] .nb-page{--nb-glass:rgba(22,32,46,.9);--nb-glass-2:rgba(30,42,58,.94);--nb-deep:rgba(14,22,34,.97)}}
/* ---- The island ---- */
.nb-island{position:sticky;top:var(--nb-island-top);z-index:30;display:flex;align-items:center;gap:10px;width:max-content;max-width:100%;margin:0 auto 14px;padding:7px 14px 7px 9px;border-radius:999px;background:var(--nb-deep);backdrop-filter:blur(26px) saturate(1.7);-webkit-backdrop-filter:blur(26px) saturate(1.7);box-shadow:inset 0 1px 0 var(--nb-rim),var(--nb-shadow);animation:nb-pop .7s var(--nb-spring) both;will-change:transform}
.nb-live{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center;min-width:0}
.nb-scope{position:relative;width:28px;height:28px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--nb-accent-2) 35%,transparent),color-mix(in srgb,var(--nb-accent-2) 5%,transparent) 70%,transparent 72%);border:1px solid color-mix(in srgb,var(--nb-accent-2) 60%,transparent)}
.nb-scope::after{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--nb-accent-2);box-shadow:0 0 10px var(--nb-accent-2)}
:root:not([data-theme=dark]) .nb-scope::after{background:var(--nb-accent);box-shadow:0 0 8px var(--nb-accent)}
.nb-scope-sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,color-mix(in srgb,var(--nb-accent-2) 60%,transparent),color-mix(in srgb,var(--nb-accent-2) 8%,transparent) 80deg,transparent 110deg);opacity:0;transition:opacity .3s}
.nb-live[data-mode=searching] .nb-scope-sweep,.nb-live[data-mode=visible] .nb-scope-sweep,.nb-live[data-mode=busy] .nb-scope-sweep{opacity:1;animation:nb-sweep 2.4s linear infinite}
.nb-live[data-mode=connected] .nb-scope::after{animation:nb-beat 1.6s ease-in-out infinite}
.nb-live[data-mode=connected] .nb-scope{box-shadow:0 0 0 4px color-mix(in srgb,var(--nb-accent-2) 18%,transparent)}
.nb-live[data-mode=lost] .nb-scope{border-color:rgba(255,120,110,.7)}.nb-live[data-mode=lost] .nb-scope::after{background:#ff8a80;box-shadow:0 0 10px #ff8a80}
@keyframes nb-sweep{to{transform:rotate(360deg)}}
@keyframes nb-beat{0%,100%{transform:scale(1)}50%{transform:scale(1.7)}}
@keyframes nb-pop{from{transform:scale(.7);opacity:0}to{transform:none;opacity:1}}
.nb-live-text{display:grid;min-width:0;line-height:1.2}
.nb-live-text small{display:none}
.nb-live-text strong{font-size:.92rem;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nb-live-text span{font-size:.76rem;color:var(--nb-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* The four steps as dots; the current one is named on wide screens. */
.nb-steps{display:flex;align-items:center;gap:6px;margin:0;padding:0 0 0 12px;list-style:none;border-left:1px solid var(--nb-edge)}
.nb-step{display:flex;align-items:center;gap:7px}
.nb-step i{display:block;width:7px;height:7px;border-radius:50%;border:0;background:var(--nb-edge);font-size:0;color:transparent;transition:background .3s,box-shadow .3s}
.nb-step span{display:none;font-size:.78rem;line-height:1.2;white-space:nowrap}.nb-step span b{font-weight:650}.nb-step span small{display:none}
.nb-step.is-done i{background:var(--nb-accent-2)}:root:not([data-theme=dark]) .nb-step.is-done i{background:var(--nb-accent)}
.nb-step.is-now i{width:9px;height:9px;background:var(--nb-ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--nb-accent-2) 40%,transparent)}
:root:not([data-theme=dark]) .nb-step.is-now i{background:var(--nb-accent)}
@media(min-width:721px){.nb-step.is-now span{display:block}}
.nb-page.is-attention .nb-island{opacity:0;pointer-events:none;transition:opacity .2s}
.nb-page.is-attention{z-index:60}
/* ---- The head: title, tagline, platform and Settings ---- */
.nb-hero{display:grid;gap:4px;padding:6px 6px 0}
.nb-hero .eyebrow{margin:0 0 6px}.nb-hero .eyebrow a{color:inherit;text-decoration:none}.nb-hero .eyebrow a:hover{text-decoration:underline}
.nb-hero h1{margin:0 0 6px;font-weight:400;font-size:clamp(1.9rem,4.4vw,2.8rem);line-height:1.05;letter-spacing:-.025em}
.nb-tagline{margin:0;max-width:56ch;color:var(--nb-muted);font-size:1rem}
.nb-head-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px}
.nb-platform{display:inline-flex;align-items:center;gap:7px;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:6px 12px;border-radius:999px;color:var(--nb-ink)}
.nb-platform::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--nb-accent);box-shadow:0 0 10px var(--nb-accent-2)}
html:is(:lang(mr),:lang(hi)) .nb-platform{letter-spacing:0;text-transform:none}
.nb-page:not([data-view=home]) .nb-hero{display:none}
/* ---- Buttons: capsules that squash ---- */
.nb-page .button{min-height:40px;padding:8px 16px;border-radius:999px;font-weight:650;font-size:.92rem;border:1px solid color-mix(in srgb,var(--nb-accent-2) 55%,transparent);background:var(--nb-accent);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 8px 20px color-mix(in srgb,var(--nb-accent) 35%,transparent);transition:transform .35s var(--nb-spring),background .2s,box-shadow .2s}
.nb-page .button:hover{background:var(--nb-accent);transform:translateY(-1px)}
.nb-page .button:active{transform:scale(.95)}
.nb-page .button.button-small{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 13px;font-size:.86rem}
.nb-page .button.button-ghost{background:var(--nb-glass-2);color:var(--nb-ink);border-color:var(--nb-edge);box-shadow:inset 0 1px 0 var(--nb-rim);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.nb-page .button.button-ghost:hover{background:var(--nb-glass-2);transform:translateY(-1px)}
.nb-page .button.is-on{background:var(--nb-glass-2);color:var(--nb-ink);border-color:var(--nb-edge);box-shadow:inset 0 1px 0 var(--nb-rim),0 0 0 3px color-mix(in srgb,var(--nb-accent-2) 30%,transparent)}
.nb-page .button.button-danger{background:var(--nb-rose);color:#fff;border-color:#fda4af}:root[data-theme=dark] .nb-page .button.button-danger{background:#fb7185;color:#2a0410}
/* ---- Notices and feedback ---- */
.nb-notices{display:grid;gap:10px;margin:14px 0 0}
.nb-notice{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;border-radius:18px;margin:0}
.nb-notice>svg{margin-top:2px;color:var(--nb-accent)}:root[data-theme=dark] .nb-notice>svg{color:var(--nb-accent-2)}
.nb-notice p{margin:0 0 6px}.nb-notice p:last-child{margin:0}.nb-notice strong{display:block;margin-bottom:2px}
.nb-notice-demo{font-size:.92rem}.nb-notice-demo strong{font-size:.95rem}
.nb-notice-perm>svg,.nb-notice-unsupported>svg{color:var(--nb-amber)}
.nb-notice-app{align-items:center;border:0;color:#fff;background:radial-gradient(500px 200px at 100% 0%,rgba(255,255,255,.22),transparent 60%),linear-gradient(120deg,#d9641b,#ff8a5c);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 18px 44px rgba(217,100,27,.3)}
.nb-notice-app>svg{color:#fff;width:34px;height:34px;padding:7px;border-radius:12px;background:rgba(255,255,255,.18)}
.nb-notice-app strong{font-size:1.12rem;margin-bottom:4px}.nb-notice-app p{color:#fff6ee}
.nb-notice-app .button{display:inline-flex;align-items:center;gap:8px;margin-top:10px;background:#fff;color:#8a3a0c;border-color:#fff;box-shadow:0 8px 20px rgba(0,0,0,.18)}.nb-notice-app .button:hover{background:#fff6ee}
.nb-app-missing{margin:10px 0 0;padding:10px 12px;border-radius:12px;background:rgba(0,0,0,.22);color:#fff;font-size:.92rem}.nb-app-missing a{color:inherit;font-weight:700}
.nb-feedback{display:flex;align-items:center;gap:8px;min-height:1.6em;margin:12px 0 4px;color:var(--nb-muted);font-size:.95rem}
.nb-feedback:not(:empty)::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--nb-accent);box-shadow:0 0 8px var(--nb-accent-2)}
.nb-feedback.is-error{color:var(--nb-rose)}.nb-feedback.is-error::before{background:var(--nb-rose);box-shadow:0 0 8px var(--nb-rose)}
/* ---- Cards ---- */
.nb-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px;align-items:start;margin-top:14px}
.nb-main,.nb-aside{display:grid;gap:14px}
.nb-card{border-radius:24px;padding:18px 20px}
.nb-card h2{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-size:1.02rem;font-weight:650}
.nb-card h2 svg{width:32px;height:32px;padding:7px;border-radius:50%;background:var(--nb-glass-2);color:var(--nb-accent);box-shadow:inset 0 1px 0 var(--nb-rim)}:root[data-theme=dark] .nb-card h2 svg{color:var(--nb-accent-2)}
.nb-card h3{margin:16px 0 6px;font-size:.95rem}
.nb-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.nb-card-head h2{margin:0}.nb-card-head small{color:var(--nb-muted)}
.nb-help{margin:6px 0 0;color:var(--nb-muted);font-size:.88rem}
.nb-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:10px}
/* ---- The beacon: being visible is a colour card ---- */
.nb-visibility{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 18px;align-items:start;overflow:hidden;color:#fff;border-color:rgba(255,255,255,.4);background:linear-gradient(135deg,color-mix(in srgb,var(--nb-accent) 72%,#032c27),color-mix(in srgb,var(--nb-accent-2) 55%,#0b6b5c) 55%,#7fe9d7)}
:root:not([data-theme=dark]) .nb-visibility{background:linear-gradient(135deg,#19a78e,#5fe3cf 60%,#b9f3e8);color:#063a33}
.nb-visibility::after{content:"";position:absolute;right:-40px;top:-70px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.5),rgba(255,255,255,0) 65%);pointer-events:none}
.nb-visibility>h2{grid-column:1/-1;color:inherit}.nb-visibility>h2 svg{background:rgba(255,255,255,.2);color:inherit;box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.nb-visibility .nb-help{color:inherit;opacity:.85}
.nb-beacon{position:relative;display:grid;place-items:center;width:110px;height:110px;margin:4px 0 0;grid-column:2;grid-row:2/span 2;align-self:center}
.nb-beacon-ring{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(255,255,255,.6);opacity:0}
.nb-beacon-core{position:relative;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.2);color:inherit;border:1px solid rgba(255,255,255,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.6);transition:background .3s,box-shadow .3s}
.nb-beacon-core svg{width:26px;height:26px}
.nb-beacon-arc{position:absolute;inset:0;transform:rotate(-90deg)}
.nb-beacon-arc circle{fill:none;stroke-width:3;stroke-linecap:round}
.nb-beacon-arc .track{stroke:rgba(255,255,255,.25)}.nb-beacon-arc .fill{stroke:#fff;stroke-dasharray:340;stroke-dashoffset:calc(340 - 340*var(--nb-left,0));transition:stroke-dashoffset 1s linear}
.nb-visibility.is-on .nb-beacon-core{background:rgba(255,255,255,.9);color:var(--nb-accent-ink);box-shadow:0 0 0 8px rgba(255,255,255,.18),0 0 40px rgba(255,255,255,.45)}
.nb-visibility.is-on .nb-beacon-ring{animation:nb-ripple 2.8s ease-out infinite}.nb-visibility.is-on .nb-beacon-ring:nth-child(2){animation-delay:.9s}.nb-visibility.is-on .nb-beacon-ring:nth-child(3){animation-delay:1.8s}
@keyframes nb-ripple{0%{transform:scale(.55);opacity:.9}100%{transform:scale(1.25);opacity:0}}
.nb-visibility-body{display:grid;gap:8px;min-width:0;grid-column:1}
.nb-switch{display:flex;align-items:center;gap:12px;cursor:pointer;margin:2px 0 4px;font-weight:650;font-size:1.15rem}
.nb-switch input{position:absolute;opacity:0;width:1px;height:1px}
.nb-switch-track{position:relative;width:52px;height:30px;border-radius:999px;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.45);box-shadow:inset 0 1px 2px rgba(0,0,0,.18);transition:background .25s,box-shadow .25s;flex:0 0 auto}
.nb-switch-track::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.3);transition:transform .45s var(--nb-spring),background .2s}
.nb-switch input:checked+.nb-switch-track{background:rgba(255,255,255,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
.nb-switch input:checked+.nb-switch-track::after{transform:translateX(22px);background:rgba(255,255,255,.92);box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),0 2px 8px rgba(0,0,0,.3)}
.nb-switch input:focus-visible+.nb-switch-track{outline:2px solid #fff;outline-offset:2px}
.nb-switch input:disabled+.nb-switch-track{opacity:.5}
.nb-chips{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);justify-self:start}
.nb-chip{position:relative}.nb-chip input{position:absolute;opacity:0;width:1px;height:1px}
.nb-chip span{display:inline-block;padding:6px 13px;border-radius:999px;font-size:.84rem;font-weight:600;cursor:pointer;color:inherit;opacity:.85;transition:background .2s,color .2s,opacity .2s}
.nb-chip input:checked+span{opacity:1;background:rgba(255,255,255,.92);color:#063a33;box-shadow:inset 0 1px 0 #fff,0 4px 10px rgba(0,0,0,.18)}.nb-chip input:focus-visible+span{outline:2px solid #fff;outline-offset:2px}
.nb-visible-status{display:inline-flex;align-items:center;gap:8px;margin:2px 0 0;padding:5px 12px;border-radius:999px;font-weight:600;font-size:.86rem;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);justify-self:start}
.nb-visible-status::before{content:"";width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.6);flex:0 0 auto}
.nb-visibility.is-on .nb-visible-status::before{background:#fff;box-shadow:0 0 10px #fff}
.nb-name{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 8px;align-items:end;margin-top:6px;padding-top:12px;border-top:1px solid rgba(255,255,255,.3)}
.nb-name label{display:grid;gap:4px;font-size:.82rem;font-weight:600;color:inherit;opacity:.9}
.nb-name input{min-height:40px;padding:8px 14px;border:1px solid rgba(255,255,255,.45);border-radius:999px;background:rgba(255,255,255,.2);color:inherit;font-weight:500;transition:border-color .2s,box-shadow .2s,background .2s}
.nb-name input::placeholder{color:inherit;opacity:.7}
.nb-name input:focus{border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.25);outline:none;background:rgba(255,255,255,.3)}
.nb-name small{grid-column:1/-1;color:inherit;opacity:.85}
.nb-visibility .button.button-ghost{background:rgba(255,255,255,.22);color:inherit;border-color:rgba(255,255,255,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
/* ---- Radar: people found ---- */
.nb-people{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 18px;align-items:start}
.nb-people .nb-card-head{grid-column:1/-1}
.nb-search-status{margin:0;color:var(--nb-muted);font-size:.9rem;min-height:1.4em}
.nb-radar{position:relative;grid-column:2;grid-row:2/span 3;width:min(190px,40vw);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--nb-accent-2) 16%,transparent),transparent 72%);border:1px solid color-mix(in srgb,var(--nb-accent-2) 45%,transparent);isolation:isolate}
.nb-radar svg{position:absolute;inset:0;width:100%;height:100%;color:var(--nb-accent)}:root[data-theme=dark] .nb-radar svg{color:var(--nb-accent-2)}
.nb-radar svg circle{fill:none;stroke:currentColor;stroke-opacity:.35;stroke-width:1}
.nb-radar svg line{stroke:currentColor;stroke-opacity:.15;stroke-width:1}
.nb-radar-sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,color-mix(in srgb,var(--nb-accent-2) 50%,transparent),color-mix(in srgb,var(--nb-accent-2) 8%,transparent) 60deg,transparent 90deg);opacity:0;transition:opacity .4s}
.nb-radar.is-on .nb-radar-sweep{opacity:1;animation:nb-sweep 3s linear infinite}
.nb-radar-me{position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--nb-accent-2);box-shadow:0 0 12px var(--nb-accent-2)}
:root:not([data-theme=dark]) .nb-radar-me{background:var(--nb-accent);box-shadow:0 0 10px var(--nb-accent)}
.nb-blip{position:absolute;left:calc(50% + var(--x)*1%);top:calc(50% + var(--y)*1%);display:grid;place-items:center;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:var(--nb-accent);color:#fff;font-size:.72rem;font-weight:800;box-shadow:0 0 0 3px color-mix(in srgb,var(--nb-accent-2) 30%,transparent),0 4px 10px rgba(0,0,0,.3);animation:nb-drop .7s var(--nb-spring) both}
.nb-blip::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid var(--nb-accent-2);animation:nb-ripple 2.2s ease-out infinite}
@keyframes nb-drop{from{transform:translateY(-14px) scale(.9);opacity:0}to{transform:none;opacity:1}}
.nb-radar-empty{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:26px;font-size:.76rem;color:var(--nb-muted)}
.nb-person-list,.nb-recent-list,.nb-messages,.nb-kv{list-style:none;margin:0;padding:0}
.nb-person-list{min-width:0;display:grid;gap:8px;grid-column:1/-1}
.nb-person{display:flex;align-items:center;gap:12px;padding:10px 10px 10px 12px;border-radius:22px;background:var(--nb-glass-2);animation:nb-drop .75s var(--nb-spring) both}
.nb-person:nth-child(2){animation-delay:.1s}.nb-person:nth-child(3){animation-delay:.2s}
.nb-person-text{min-width:0;flex:1}.nb-person-text strong{display:block;font-size:.98rem}.nb-person-text small{color:var(--nb-muted);font-size:.78rem;line-height:1.3}
.nb-chip-found{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--nb-ok-soft);color:var(--nb-ok)}
.nb-chip-found::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;animation:nb-blink 1.4s infinite}
.nb-chip-found.is-linked{background:color-mix(in srgb,var(--nb-accent) 22%,transparent);color:var(--nb-accent)}:root[data-theme=dark] .nb-chip-found.is-linked{color:var(--nb-accent-2)}.nb-chip-found.is-linked::before{animation:none}
.nb-avatar{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--nb-accent),#0d7f6f);color:#fff;font-weight:700;flex:0 0 auto;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 6px 14px rgba(0,0,0,.25)}
.nb-avatar-big{width:80px;height:80px;font-size:1.9rem;margin:0 auto 12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 0 8px color-mix(in srgb,var(--nb-accent-2) 16%,transparent)}
.nb-empty{grid-column:1;padding:10px 0 2px;color:var(--nb-muted)}.nb-empty strong{display:block;color:var(--nb-ink)}.nb-empty p{margin:4px 0 0}
.nb-empty-line{margin:8px 0 0;color:var(--nb-muted)}
/* ---- Recent conversations ---- */
.nb-recent-row{display:flex;align-items:center;gap:12px;width:calc(100% + 16px);padding:10px 8px;margin:0 -8px;border:0;border-radius:16px;background:transparent;color:inherit;text-align:left;cursor:pointer;font:inherit;transition:background .2s}
.nb-recent-row:hover,.nb-recent-row:focus-visible{background:var(--nb-glass-2)}
.nb-recent-list li+li .nb-recent-row{border-top:1px solid var(--nb-edge);border-radius:0 0 16px 16px}
.nb-recent-text{flex:1;min-width:0}.nb-recent-text strong{display:flex;align-items:center;gap:6px}.nb-recent-text small{display:block;color:var(--nb-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nb-recent-meta{display:grid;justify-items:end;gap:4px;font-size:.78rem;color:var(--nb-muted)}
.nb-unread{min-width:22px;padding:2px 7px;border-radius:999px;background:var(--nb-warm);color:#fff;font-weight:800;text-align:center;box-shadow:0 0 12px rgba(255,107,90,.5)}
.nb-badge{display:inline-flex;align-items:center;gap:4px;font-size:.72rem;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--nb-ok-soft);color:var(--nb-ok)}
.nb-badge-live::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor;animation:nb-blink 1.6s infinite}
.nb-recent-row .nb-conv-avatar-wrap{position:relative;flex:0 0 auto}
.nb-presence.is-live{background:var(--nb-ok);box-shadow:0 0 8px var(--nb-ok)}
.nb-recent-row.is-live{background:color-mix(in srgb,var(--nb-ok) 8%,transparent)}
.nb-dialog-who{margin:-4px 0 4px;color:var(--nb-muted);font-weight:600}
.nb-more-waiting{margin:12px 0 0;font-size:.82rem;color:var(--nb-muted)}
/* ---- Aside: how it works, privacy ---- */
.nb-how ol{margin:0;padding:0;list-style:none;display:grid;gap:10px;counter-reset:how}
.nb-how li{position:relative;padding-left:38px;counter-increment:how;font-size:.92rem}
.nb-how li::before{content:counter(how);position:absolute;left:0;top:0;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--nb-glass-2);box-shadow:inset 0 1px 0 var(--nb-rim);color:var(--nb-accent);font-weight:800;font-size:.8rem}:root[data-theme=dark] .nb-how li::before{color:var(--nb-accent-2)}
.nb-privacy p{margin:0 0 8px;font-size:.92rem;padding-left:12px;border-left:2px solid color-mix(in srgb,var(--nb-accent-2) 50%,transparent)}
/* ---- Conversation ---- */
/* The header is glass, so it is a stacking context of its own: it sits above the messages so its menu drops over them. */
.nb-conv-head{display:flex;align-items:center;gap:8px;padding:8px 8px 8px 6px;margin:0 0 10px;border-radius:999px;z-index:5}
.nb-conv-avatar-wrap{position:relative;flex:0 0 auto}
.nb-conv-head .nb-avatar{width:38px;height:38px}
.nb-presence{position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;border-radius:50%;background:var(--nb-faint);border:2px solid var(--nb-wall)}
.nb-conv-who{flex:1;min-width:0;display:grid;gap:1px}.nb-conv-who strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.98rem}.nb-conv-who small{color:var(--nb-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.76rem}
.nb-conv-who small.is-verified{color:var(--nb-ok);font-weight:600}
.nb-state-chip{display:inline-flex;align-items:center;gap:6px;justify-self:start;margin-top:2px;font-size:.7rem;font-weight:700;padding:2px 9px;border-radius:999px;background:var(--nb-glass-2);box-shadow:inset 0 1px 0 var(--nb-rim)}
.nb-state-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.nb-state-chip[data-state=connected]{background:var(--nb-ok-soft);color:var(--nb-ok)}.nb-state-chip[data-state=connected]::before{animation:nb-blink 1.6s infinite}
.nb-state-chip[data-state=disconnected],.nb-state-chip[data-state=permission-required],.nb-state-chip[data-state=unsupported]{background:var(--nb-rose-soft);color:var(--nb-rose)}
.nb-state-chip[data-state=reconnecting],.nb-state-chip[data-state=connecting],.nb-state-chip[data-state=verifying]{background:var(--nb-amber-soft);color:var(--nb-amber)}
.nb-conv-head:has([data-state=connected]) .nb-presence{background:var(--nb-ok);box-shadow:0 0 8px var(--nb-ok)}
.nb-conv-head:has([data-state=disconnected]) .nb-presence{background:var(--nb-rose)}
.nb-conv-actions{display:flex;align-items:center;gap:3px}
.nb-icon-button{display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--nb-edge);border-radius:50%;background:var(--nb-glass);color:inherit;cursor:pointer;box-shadow:inset 0 1px 0 var(--nb-rim);transition:background .2s,color .2s,transform .35s var(--nb-spring)}
.nb-icon-button:hover,.nb-icon-button:focus-visible{background:var(--nb-glass-2);color:var(--nb-accent)}:root[data-theme=dark] .nb-icon-button:hover,:root[data-theme=dark] .nb-icon-button:focus-visible{color:var(--nb-accent-2)}
.nb-icon-button:active{transform:scale(.92)}
.nb-icon-button[aria-pressed=true]{background:var(--nb-accent);color:#fff;border-color:color-mix(in srgb,var(--nb-accent-2) 55%,transparent)}
.nb-icon-button:disabled{opacity:.4;cursor:not-allowed}.nb-icon-button.is-off{opacity:.45}
.nb-menu{position:relative}.nb-menu summary{list-style:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--nb-edge);background:var(--nb-glass);box-shadow:inset 0 1px 0 var(--nb-rim);cursor:pointer}.nb-menu summary::-webkit-details-marker{display:none}.nb-menu summary:hover{background:var(--nb-glass-2)}
.nb-menu-list{position:absolute;right:0;top:44px;z-index:20;display:grid;min-width:230px;padding:6px;border-radius:18px;background:var(--nb-deep);backdrop-filter:blur(26px) saturate(1.7);-webkit-backdrop-filter:blur(26px) saturate(1.7);box-shadow:inset 0 1px 0 var(--nb-rim),var(--nb-shadow)}
.nb-menu-list button{display:flex;align-items:center;gap:10px;padding:10px 12px;border:0;border-radius:12px;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}.nb-menu-list button:hover{background:var(--nb-glass-2)}
.nb-conv-note{display:flex;align-items:center;gap:8px;margin:0 0 10px;padding:9px 14px;border-radius:999px;background:var(--nb-amber-soft);color:var(--nb-ink);font-size:.88rem}
.nb-conv-note::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--nb-amber);flex:0 0 auto}
/* The messages scroll in their own column; the composer floats over their foot. */
.nb-messages{display:grid;gap:8px;min-height:260px;max-height:min(58vh,560px);overflow:auto;padding:6px 4px 72px;border-radius:18px;scrollbar-width:thin}
.nb-day{justify-self:center;margin:8px 0 4px;padding:3px 10px;border-radius:999px;background:var(--nb-glass);border:1px solid var(--nb-edge);font-size:.7rem;font-weight:700;color:var(--nb-muted);text-transform:uppercase;letter-spacing:.08em}
html:is(:lang(mr),:lang(hi)) .nb-day{letter-spacing:0;text-transform:none}
.nb-msg{position:relative;max-width:min(78%,520px);padding:10px 13px 7px;border-radius:20px 20px 20px 8px;animation:nb-drop .5s var(--nb-spring) both}
.nb-msg.is-in{background:var(--nb-glass-2)}
.nb-msg p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.35}
.nb-msg small{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap;margin-top:4px;font-size:.7rem;color:var(--nb-muted)}
.nb-msg.is-out{justify-self:end;border-radius:20px 20px 8px 20px;color:#fff;background:color-mix(in srgb,var(--nb-accent) 64%,transparent);border:1px solid color-mix(in srgb,var(--nb-accent-2) 50%,transparent);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 22px color-mix(in srgb,var(--nb-accent) 28%,transparent)}
.nb-msg.is-out small{color:rgba(255,255,255,.82)}.nb-msg.is-out .nb-link{color:#fff}
.nb-status{display:inline-flex;align-items:center;gap:4px}
.nb-status svg{width:15px;height:15px;stroke-width:2.2}
.nb-status[data-status=read]{color:#fff;font-weight:700}.nb-status[data-status=failed]{color:#ffd0cc;font-weight:700}
.nb-status[data-status=queued] svg,.nb-status[data-status=sending] svg{animation:nb-spin 2.4s linear infinite}
.nb-link{border:0;background:transparent;color:var(--nb-accent);font:inherit;text-decoration:underline;cursor:pointer;padding:0}:root[data-theme=dark] .nb-link{color:var(--nb-accent-2)}
.nb-voice{display:inline-flex;align-items:center;gap:10px;min-width:200px;padding:5px 12px 5px 5px;border:0;border-radius:999px;background:var(--nb-glass);color:inherit;font:inherit;cursor:pointer}
.nb-msg.is-out .nb-voice{background:rgba(255,255,255,.16);color:#fff}
.nb-voice>svg{width:34px;height:34px;padding:9px;border-radius:50%;background:var(--nb-accent);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}.nb-msg.is-out .nb-voice>svg{background:#fff;color:var(--nb-accent)}
.nb-wave{display:flex;align-items:center;gap:2px;flex:1;height:22px}
.nb-wave i{flex:1;min-width:2px;height:calc(var(--h)*1%);border-radius:2px;background:currentColor;opacity:.75}
.nb-voice.is-playing .nb-wave i{animation:nb-wave .8s ease-in-out infinite alternate;animation-delay:calc(var(--i)*.06s)}
@keyframes nb-wave{from{transform:scaleY(.6)}to{transform:scaleY(1.2)}}
.nb-voice .nb-voice-len{font-variant-numeric:tabular-nums;font-size:.85rem}
.nb-composer{position:relative;z-index:2;display:flex;flex-wrap:wrap;align-items:flex-end;gap:6px;margin:-62px 0 0;padding:6px;border-radius:28px;background:var(--nb-deep);backdrop-filter:blur(22px) saturate(1.6);-webkit-backdrop-filter:blur(22px) saturate(1.6);box-shadow:inset 0 1px 0 var(--nb-rim),var(--nb-shadow);transition:box-shadow .2s}
.nb-composer:focus-within{box-shadow:inset 0 1px 0 var(--nb-rim),0 0 0 3px color-mix(in srgb,var(--nb-accent-2) 30%,transparent),var(--nb-shadow)}
#main-content .nb-composer textarea{flex:1 1 160px;min-width:0;min-height:40px;max-height:140px;margin:0;padding:9px 6px;border:0;border-radius:0;box-shadow:none;background:transparent;color:inherit;font:inherit;resize:none;outline:none}
/* The site's writing tools (script, keyboard, dictation) sit inside the bar; on a phone they take their own row. */
#main-content .nb-composer .jt-tools{flex:none;flex-wrap:nowrap;gap:1px;margin:0}
#main-content .nb-composer .jt-status{order:6;flex:1 0 100%;margin:0;padding:0 10px 4px}
.nb-composer .nb-icon-button{border-radius:50%;width:40px;height:40px}
.nb-send{display:grid;place-items:center;width:44px;height:44px;border:1px solid color-mix(in srgb,var(--nb-accent-2) 55%,transparent);border-radius:50%;background:var(--nb-accent);color:#fff;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 6px 16px color-mix(in srgb,var(--nb-accent) 40%,transparent);transition:transform .35s var(--nb-spring)}
.nb-send:hover{transform:translateY(-1px)}.nb-send:active{transform:scale(.92)}
/* ---- Recording and the walkie-talkie ---- */
.nb-record{margin-top:10px;padding:14px 16px;border-radius:22px}
.nb-rec-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--nb-rose);margin-right:8px;box-shadow:0 0 10px var(--nb-rose);animation:nb-blink 1s infinite}
@keyframes nb-blink{50%{opacity:.25}}
.nb-walkie{display:grid;justify-items:center;gap:12px;margin-top:10px;padding:18px 16px 22px;border-radius:30px;text-align:center;background:var(--nb-deep);backdrop-filter:blur(26px) saturate(1.7);-webkit-backdrop-filter:blur(26px) saturate(1.7);box-shadow:inset 0 1px 0 var(--nb-rim),var(--nb-shadow);animation:nb-unfold-up .8s var(--nb-spring) both}
@keyframes nb-unfold-up{from{transform:translateY(30px) scaleY(.7);opacity:0}to{transform:none;opacity:1}}
.nb-walkie-state{margin:0;font-weight:650;min-height:1.4em;color:var(--nb-ink)}
.nb-walkie .nb-help{color:var(--nb-muted)}
.nb-talk-wrap{position:relative;display:grid;place-items:center;width:170px;height:170px}
.nb-talk-ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,107,90,.65);opacity:0;pointer-events:none}
.nb-talk{position:relative;display:grid;place-items:center;gap:4px;width:134px;height:134px;border-radius:50%;border:0;background:radial-gradient(circle at 35% 30%,#ff9a86,var(--nb-warm) 45%,var(--nb-warm-dark));color:#fff;font:inherit;font-weight:800;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;box-shadow:inset 0 2px 0 rgba(255,255,255,.55),0 14px 34px rgba(255,107,90,.45);transition:transform .35s var(--nb-spring),box-shadow .2s}
.nb-talk.is-on{transform:scale(1.06);box-shadow:inset 0 2px 0 rgba(255,255,255,.55),0 0 0 12px rgba(255,107,90,.26),0 14px 34px rgba(255,107,90,.5)}
.nb-talk.is-on~.nb-talk-ring,.nb-talk[data-state=transmitting]~.nb-talk-ring{animation:nb-ripple 1.4s ease-out infinite}.nb-talk-wrap .nb-talk-ring:nth-of-type(2){animation-delay:.7s}
.nb-talk[data-state=listening]{background:radial-gradient(circle at 35% 30%,#8af0dc,var(--nb-accent-2) 55%,#1ba592);color:#05302e;box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 0 0 12px rgba(95,227,207,.22),0 14px 34px rgba(27,165,146,.5)}
.nb-talk[data-state=busy],.nb-talk[data-state=connection-lost]{background:#3a4c58;color:#b9c7ce;box-shadow:none}
/* ---- Find this person: a sonar ---- */
.nb-find-grid,.nb-settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.nb-prox{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 22px;align-items:center}
.nb-prox>h2,.nb-prox>.nb-estimate{grid-column:1/-1}
.nb-sonar{position:relative;grid-column:1;grid-row:2/span 3;width:min(200px,44vw);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--nb-accent-2) 14%,transparent),transparent 72%)}
.nb-sonar svg{position:absolute;inset:0;width:100%;height:100%;color:var(--nb-accent)}:root[data-theme=dark] .nb-sonar svg{color:var(--nb-accent-2)}
.nb-sonar svg circle{fill:none;stroke:currentColor;stroke-opacity:.4;stroke-width:1}
.nb-sonar svg circle.is-band{stroke-opacity:.95;stroke-width:2.5;filter:drop-shadow(0 0 6px currentColor)}
.nb-sonar svg text{fill:var(--nb-muted);font-size:7px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.nb-sonar-me{position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px color-mix(in srgb,var(--nb-accent-2) 35%,transparent)}
.nb-sonar-ping{position:absolute;inset:0;border-radius:50%;border:2px solid color-mix(in srgb,var(--nb-accent-2) 70%,transparent);opacity:0}
.nb-sonar.is-on .nb-sonar-ping{animation:nb-ripple 2.4s ease-out infinite}
.nb-sonar-them{position:absolute;left:50%;top:calc(50% - var(--r,0)*1%);display:grid;place-items:center;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:linear-gradient(135deg,#ff8a65,#e0533b);color:#fff;font-weight:800;box-shadow:0 0 0 4px rgba(255,138,101,.25),0 8px 18px rgba(0,0,0,.3);transition:top .7s var(--nb-settle),opacity .4s;opacity:0}
.nb-sonar[data-sonar-band=immediate] .nb-sonar-them{--r:15;opacity:1}.nb-sonar[data-sonar-band=near] .nb-sonar-them{--r:31;opacity:1}.nb-sonar[data-sonar-band=far] .nb-sonar-them{--r:46;opacity:1}
.nb-band{margin:4px 0 0;font-size:1.9rem;font-weight:400;letter-spacing:-.02em;line-height:1.1}
.nb-band[data-band=immediate]{color:var(--nb-ok)}.nb-band[data-band=near]{color:var(--nb-accent)}:root[data-theme=dark] .nb-band[data-band=near]{color:var(--nb-accent-2)}.nb-band[data-band=far]{color:var(--nb-muted)}
.nb-signal{display:flex;align-items:center;gap:10px;margin:4px 0 0;color:var(--nb-muted);font-size:.88rem}
.nb-bars{display:inline-flex;align-items:flex-end;gap:3px;height:20px}
.nb-bars i{width:5px;border-radius:2px;background:var(--nb-edge)}
.nb-bars i:nth-child(1){height:35%}.nb-bars i:nth-child(2){height:55%}.nb-bars i:nth-child(3){height:78%}.nb-bars i:nth-child(4){height:100%}
.nb-bars[data-level="1"] i:nth-child(-n+1),.nb-bars[data-level="2"] i:nth-child(-n+2),.nb-bars[data-level="3"] i:nth-child(-n+3),.nb-bars[data-level="4"] i:nth-child(-n+4){background:var(--nb-accent-2);box-shadow:0 0 6px var(--nb-accent-2)}
.nb-estimate{display:flex;gap:8px;align-items:flex-start;margin:12px 0 0;padding:10px 12px;border-radius:14px;background:var(--nb-amber-soft);font-size:.86rem}
.nb-estimate svg{color:var(--nb-amber)}
.nb-precise-body{display:grid;justify-items:center;gap:8px;padding:8px 0 4px}
.nb-dial-wrap{position:relative;display:grid;place-items:center;width:150px;height:150px;border-radius:50%;border:1px solid var(--nb-edge);background:radial-gradient(circle,color-mix(in srgb,var(--nb-accent-2) 12%,transparent),transparent 70%)}
.nb-dial-wrap::before{content:"";position:absolute;inset:4px;border-radius:50%;background:repeating-conic-gradient(from -1deg,color-mix(in srgb,var(--nb-ink) 35%,transparent) 0 2deg,transparent 2deg 30deg);-webkit-mask:radial-gradient(circle,transparent 60%,#000 61%);mask:radial-gradient(circle,transparent 60%,#000 61%)}
.nb-dial-wrap[hidden]{display:none}
.nb-arrow{color:var(--nb-accent);transition:transform .3s;filter:drop-shadow(0 0 8px color-mix(in srgb,var(--nb-accent-2) 60%,transparent))}:root[data-theme=dark] .nb-arrow{color:var(--nb-accent-2)}
.nb-distance{margin:0;font-size:2.6rem;font-weight:300;letter-spacing:-.03em;color:var(--nb-ink);font-variant-numeric:tabular-nums}
.nb-distance:empty{display:none}
/* ---- Settings ---- */
.nb-kv li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--nb-edge)}
.nb-kv li:first-child{border-top:0}
.nb-kv strong{font-size:.74rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:var(--nb-glass-2);border:1px solid var(--nb-edge);box-shadow:inset 0 1px 0 var(--nb-rim);white-space:nowrap;color:var(--nb-muted)}
html:is(:lang(mr),:lang(hi)) .nb-kv strong{letter-spacing:0;text-transform:none}
.nb-kv strong[data-perm=granted],.nb-kv strong[data-yes=true]{background:var(--nb-ok-soft);color:var(--nb-ok);border-color:color-mix(in srgb,var(--nb-ok) 50%,transparent)}
.nb-kv strong[data-perm=denied],.nb-kv strong[data-yes=false]{background:var(--nb-rose-soft);color:var(--nb-rose);border-color:color-mix(in srgb,var(--nb-rose) 50%,transparent)}
.nb-kv strong[data-perm=prompt]{background:var(--nb-amber-soft);color:var(--nb-amber);border-color:color-mix(in srgb,var(--nb-amber) 50%,transparent)}
.nb-kv strong:not([data-perm]):not([data-yes]){text-transform:none;letter-spacing:0;font-size:.84rem;color:var(--nb-ink)}
.nb-stat{display:inline-block;margin:4px 0 2px;padding:10px 16px;border-radius:999px;background:var(--nb-glass-2);border:1px solid var(--nb-edge);box-shadow:inset 0 1px 0 var(--nb-rim);color:var(--nb-ink);font-weight:700;font-variant-numeric:tabular-nums}
.nb-identity-status{display:flex;align-items:flex-start;gap:10px;margin:0;padding:12px 14px;border-radius:16px;background:var(--nb-glass-2);border:1px solid var(--nb-edge);box-shadow:inset 0 1px 0 var(--nb-rim)}
.nb-identity-status svg{margin-top:2px;color:var(--nb-accent)}:root[data-theme=dark] .nb-identity-status svg{color:var(--nb-accent-2)}
/* ---- The island unfolds: a request, the code, a call, a consent ---- */
.nb-overlay{position:fixed;inset:0;z-index:1900;display:grid;align-content:start;justify-items:center;padding:calc(var(--nb-island-top) + env(safe-area-inset-top,0px)) 14px 20px;background:rgba(5,12,20,.28);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.nb-dialog{overflow:hidden;width:min(520px,100%);padding:22px 22px 22px;border-radius:30px;background:var(--nb-deep);backdrop-filter:blur(26px) saturate(1.7);-webkit-backdrop-filter:blur(26px) saturate(1.7);color:var(--nb-ink);text-align:center;box-shadow:inset 0 1px 0 var(--nb-rim),var(--nb-shadow);animation:nb-unfold .8s var(--nb-spring) both;transform-origin:top center}
@keyframes nb-unfold{from{transform:scaleY(.25) scaleX(.6);opacity:0}to{transform:none;opacity:1}}
.nb-dialog h2{margin:0 0 8px;font-size:1.35rem;font-weight:650;letter-spacing:-.01em}
.nb-dialog p{margin:0 0 10px}
.nb-dialog-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:16px}
.nb-code{display:flex;justify-content:center;gap:7px;margin:14px 0}
.nb-code span{display:grid;place-items:center;width:46px;height:60px;border-radius:14px;background:var(--nb-glass-2);border:1px solid var(--nb-edge);color:var(--nb-ink);font-size:1.7rem;font-weight:700;font-variant-numeric:tabular-nums;box-shadow:inset 0 1px 0 var(--nb-rim),inset 0 -8px 16px rgba(255,255,255,.05),0 8px 18px rgba(0,0,0,.18);animation:nb-pop .6s var(--nb-spring) both}
.nb-code span:nth-child(2){animation-delay:.06s}.nb-code span:nth-child(3){animation-delay:.12s}.nb-code span:nth-child(4){animation-delay:.18s}.nb-code span:nth-child(5){animation-delay:.24s}.nb-code span:nth-child(6){animation-delay:.3s}
.nb-code span:nth-child(3){margin-right:10px}
.nb-identity{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--nb-amber-soft);color:var(--nb-amber);font-size:.85rem;font-weight:600}
.nb-identity.is-verified{background:color-mix(in srgb,var(--nb-accent) 25%,transparent);color:var(--nb-accent);border:1px solid color-mix(in srgb,var(--nb-accent-2) 50%,transparent)}:root[data-theme=dark] .nb-identity.is-verified{color:var(--nb-accent-2)}
.nb-spinner{position:relative;width:56px;height:56px;margin:12px auto;border-radius:50%;border:1px solid color-mix(in srgb,var(--nb-accent-2) 45%,transparent)}
.nb-spinner::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,color-mix(in srgb,var(--nb-accent-2) 60%,transparent),transparent 90deg);animation:nb-sweep 1.4s linear infinite}
.nb-spinner::after{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--nb-accent-2);box-shadow:0 0 12px var(--nb-accent-2)}
@keyframes nb-spin{to{transform:rotate(360deg)}}
.nb-waiting{display:inline-flex;align-items:center;gap:8px;margin:12px 0 0;color:var(--nb-muted);font-size:.88rem}
.nb-waiting::before{content:"";width:14px;height:14px;border-radius:50%;border:2px solid var(--nb-edge);border-top-color:var(--nb-accent-2);animation:nb-spin .9s linear infinite}
.nb-call-buttons{display:flex;justify-content:center;gap:18px;margin-top:18px}
.nb-round{display:grid;justify-items:center;gap:6px;border:0;background:transparent;color:inherit;font:inherit;font-size:.78rem;cursor:pointer}
.nb-round svg{width:58px;height:58px;padding:16px;border-radius:50%;background:var(--nb-glass-2);border:1px solid var(--nb-edge);box-shadow:inset 0 1px 0 var(--nb-rim);transition:transform .35s var(--nb-spring)}.nb-round:hover svg{transform:translateY(-2px)}.nb-round:active svg{transform:scale(.92)}
.nb-round[aria-pressed=true] svg{background:var(--nb-accent);color:#fff}
.nb-round.is-end svg{background:#fb7185;color:#fff;border-color:#fda4af;box-shadow:0 8px 20px rgba(251,113,133,.35)}
.nb-call-wave{display:flex;justify-content:center;gap:4px;height:28px;align-items:center;margin:4px 0 8px}
.nb-call-wave i{width:4px;height:8px;border-radius:2px;background:var(--nb-accent-2);animation:nb-wave .7s ease-in-out infinite alternate}
.nb-call-wave i:nth-child(2){animation-delay:.09s}.nb-call-wave i:nth-child(3){animation-delay:.18s}.nb-call-wave i:nth-child(4){animation-delay:.27s}.nb-call-wave i:nth-child(5){animation-delay:.36s}.nb-call-wave i:nth-child(6){animation-delay:.45s}.nb-call-wave i:nth-child(7){animation-delay:.54s}
/* ---- Phones, motion ---- */
@media(max-width:900px){.nb-grid{grid-template-columns:1fr}}
@media(max-width:720px){
  .nb-page{--nb-island-top:70px;width:100%;max-width:none;margin:0;border-radius:0;padding:12px 14px 60px}
  .nb-island{padding:6px 12px 6px 8px}.nb-steps{padding-left:10px}
  .nb-hero h1{font-size:1.9rem}
  .nb-card{padding:16px 16px;border-radius:22px}
  .nb-visibility{grid-template-columns:minmax(0,1fr) auto}.nb-beacon{width:84px;height:84px;grid-row:2}.nb-beacon-core{width:48px;height:48px}.nb-beacon-core svg{width:22px;height:22px}
  .nb-people{grid-template-columns:1fr}.nb-radar{grid-column:auto;grid-row:auto;width:min(170px,54vw);margin:0 auto 6px}
  .nb-prox{grid-template-columns:1fr}.nb-sonar{grid-column:auto;grid-row:auto;margin:0 auto 6px}
  .nb-msg{max-width:88%}
  .nb-conv-head{flex-wrap:nowrap}.nb-conv-who strong,.nb-conv-who small{white-space:nowrap}
  .nb-conv-head .nb-icon-button,.nb-menu summary{width:34px;height:34px}
  #main-content .nb-composer .jt-tools{order:5;flex:1 0 100%;justify-content:flex-end;padding:0 4px}
  .nb-person{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 12px;align-items:center}
  .nb-person .nb-avatar{grid-row:1/span 2}.nb-person .nb-chip-found{grid-column:2;justify-self:start}.nb-person [data-connect]{grid-column:3;grid-row:1/span 2}
  .nb-code span{width:40px;height:54px;font-size:1.5rem}.nb-code span:nth-child(3){margin-right:6px}
  .nb-overlay{padding-left:10px;padding-right:10px}.nb-dialog{padding:18px 16px}
}
@media(prefers-reduced-motion:reduce){.nb-page *,.nb-page *::before,.nb-page *::after,.nb-overlay,.nb-dialog{animation:none!important;transition:none!important}.nb-scope-sweep,.nb-radar-sweep{opacity:0!important}}