/* One narrow column laid out like a call screen: the other person's tile, chat, Beep / Hold to talk, files, Leave. */

:root{
  --bg:#EEF2F7; --surface:#FFFFFF; --surface2:#F1F4F8; --line:#DFE4EC; --ink:#0F172A; --muted:#556070;
  --accent:#2563EB; --accent-ink:#FFFFFF; --link:#1D4ED8; --dash:#B8C2D0; --dropbg:#F7F9FC;
  --live:#34D399; --live-ink:#052E1F; --danger:#E5484D; --warn:#B42318; --ok:#047857; --signal:#B45309;
  --shadow:0 1px 2px rgba(15,23,42,.06),0 4px 16px rgba(15,23,42,.06);
  --n0:#047857; --n1:#B45309; --n2:#1D4ED8; --n3:#BE185D; --n4:#6D28D9;
  --font:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0B0E13; --surface:#151A21; --surface2:#1D232C; --line:#262D38; --ink:#F3F5F8; --muted:#A3ADBB;
  --accent:#2F64EA; --accent-ink:#FFFFFF; --link:#8AB0FF; --dash:#3A4556; --dropbg:#11151B;
  --live:#34D399; --live-ink:#052E1F; --danger:#E5484D; --warn:#FF8A66; --ok:#5FD18E; --signal:#F2B63A;
  --shadow:none;
  --n0:#7FD8B6; --n1:#F5B97A; --n2:#8AB0FF; --n3:#F49AC1; --n4:#C3A6FF;
  color-scheme:dark;
}}
*{box-sizing:border-box}
html,body{margin:0}
/* Keep the page from sliding sideways or zooming on a double tap. */
html{overflow-x:hidden;touch-action:manipulation}
@supports (overflow:clip){html{overflow-x:clip}}
body{background:var(--bg);color:var(--ink);font:16px/1.45 var(--font);-webkit-text-size-adjust:100%;
  padding:env(safe-area-inset-top,0px) max(16px,env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) max(16px,env(safe-area-inset-left,0px))}
.wrap{max-width:520px;margin:0 auto;padding-block:16px 32px;display:flex;flex-direction:column;gap:16px}
.stack{display:flex;flex-direction:column;gap:16px}
[hidden],.stack[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
:focus-visible{outline:3px solid var(--link);outline-offset:3px}

/* buttons */
button,.btn{font:700 16px/1 var(--font);border:0;border-radius:16px;padding:14px 20px;cursor:pointer;background:var(--accent);color:var(--accent-ink);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;min-height:52px}
button.quiet,.btn.quiet{background:transparent;color:var(--link);border:1px solid var(--line);min-height:44px;padding:10px 14px;font-size:14px;border-radius:12px}
button.link{background:none;border:0;min-height:36px;padding:6px 10px;color:var(--link);font-size:14px;font-weight:600}
button:disabled{opacity:.5;cursor:default}
.actions button,.actions .btn{min-height:40px;padding:8px 16px;font-size:14px;border-radius:12px}

.note{margin:0;padding:12px 14px;border-radius:14px;font-size:15px;border:1px solid var(--line);background:var(--surface)}
.note.warn{color:var(--warn);border-color:currentColor}
.note.ok{color:var(--ok);border-color:currentColor}
.waiting{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;padding:14px;border-radius:16px;border:2px solid var(--signal);background:var(--surface)}
.waiting strong{flex:1 1 100%}
.waiting span{flex:1 1 200px;color:var(--muted);font-size:15px}

/* start screen */
.start .me,div.me{display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:16px}
.avatar{position:relative;width:120px;height:120px;border-radius:50%;border:2px dashed var(--dash);background:var(--surface);color:var(--muted);
  display:flex;align-items:center;justify-content:center;cursor:pointer;margin-bottom:6px}
.avatar.has{border:0}
.avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.avatar.has .ph{display:none}
.avatar .cam{position:absolute;right:0;bottom:4px;width:36px;height:36px;border-radius:50%;background:var(--accent);color:var(--accent-ink);
  display:flex;align-items:center;justify-content:center;border:3px solid var(--bg)}
.avatar input,.pip input,.drop input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.avatar:focus-within{outline:3px solid var(--link);outline-offset:3px}
.lbl{font-size:13px;color:var(--muted)}
#myname,.langsel{width:220px;height:46px;border-radius:14px;border:1px solid var(--line);background:var(--surface);color:var(--ink);
  font:700 17px var(--font);text-align:center}
#myname::placeholder{color:var(--muted);font-weight:500}
.card{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:18px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow)}
.label{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0}
.coderow{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.code{font:800 clamp(36px,11vw,48px)/1 var(--font);letter-spacing:.04em;font-variant-numeric:tabular-nums;margin:0}
.code.wait{color:var(--muted)}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.qr{background:#fff;padding:8px;border-radius:12px;line-height:0;flex:none}
.qr img,.qr canvas{width:96px;height:96px;image-rendering:pixelated}
.hint{color:var(--muted);font-size:14px;margin:0}
.or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:13px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
input[type=tel]{font:800 28px/1 var(--font);letter-spacing:.14em;font-variant-numeric:tabular-nums;width:100%;height:60px;padding:0 16px;border-radius:16px;
  border:1px solid var(--line);background:var(--surface2);color:var(--ink);text-align:center}
input[type=tel]::placeholder{color:var(--muted);opacity:.6}
.fineprint{margin:0;font-size:12px;line-height:1.5;color:var(--muted);text-align:center}

/* connected: status + the call stage */
.peer{display:flex;align-items:center;gap:12px;min-height:44px}
.pill{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px;min-width:0;background:var(--surface);border:1px solid var(--line);
  border-radius:999px;padding:8px 14px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--live);flex:none}
.dot.wait{background:var(--signal)}
.stage{position:relative;aspect-ratio:16/17;max-height:38vh;max-height:38dvh;width:100%;border-radius:28px;overflow:hidden;color:#fff;
  background:linear-gradient(160deg,#3A4A6B 0%,#23304A 55%,#161E2E 100%);transition:box-shadow .2s}
.stage>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:40%;background:linear-gradient(0deg,rgba(11,14,19,.78),rgba(11,14,19,0));pointer-events:none}
.initials{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding-bottom:12%}
.initials span{width:132px;height:132px;border-radius:50%;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;
  font-size:48px;font-weight:800;letter-spacing:.02em}
.initials svg{width:132px;height:132px;opacity:.5}
.badge{position:absolute;top:14px;z-index:2;display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:6px 12px;font-size:13px;font-weight:700}
.trbadge{left:14px;background:rgba(11,14,19,.62);color:#fff}
.talkbadge{right:14px;background:var(--live);color:var(--live-ink)}
.stage.trshown .talkbadge{top:52px;left:14px;right:auto}
.who{position:absolute;left:20px;bottom:20px;right:130px;z-index:2;display:flex;flex-direction:column;gap:2px;min-width:0}
.who strong{font-size:24px;font-weight:800;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who span{font-size:14px;color:#E2E8F0}
.pip{position:absolute;right:14px;bottom:14px;z-index:3;width:96px;height:128px;border-radius:18px;overflow:hidden;cursor:pointer;color:#fff;
  border:2px solid rgba(255,255,255,.85);background:linear-gradient(160deg,#5B6B4A 0%,#34402B 100%);transition:box-shadow .2s,border-color .2s}
.pip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pip .ph{position:absolute;inset:0;width:100%;height:100%}
.pip.has .ph{display:none}
.pip span{position:absolute;left:8px;bottom:6px;font-size:12px;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.pip:focus-within{outline:3px solid #fff;outline-offset:2px}
.stage.talking{box-shadow:0 0 0 3px var(--live),0 0 0 8px color-mix(in srgb,var(--live) 25%,transparent)}
.pip.live{border-color:var(--live);box-shadow:0 0 0 4px color-mix(in srgb,var(--live) 35%,transparent)}
.stage.beeped{animation:beep 1.1s ease-out}
@keyframes beep{0%,30%{box-shadow:0 0 0 4px var(--signal),0 0 0 14px color-mix(in srgb,var(--signal) 30%,transparent)}100%{box-shadow:0 0 0 0 transparent}}

/* chat */
.chat{position:relative;min-height:240px;background:var(--surface);border:1px solid var(--line);border-radius:22px;display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow)}
.chathead{display:flex;flex-direction:column;gap:6px;padding:8px 12px;border-bottom:1px solid var(--line)}
.langrow{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted)}
.langrow label{display:flex;align-items:center;gap:6px;white-space:nowrap}
.langrow select{font:inherit;font-size:16px;color:var(--ink);background:var(--surface2);border:1px solid var(--line);border-radius:10px;padding:0 10px;min-height:36px;min-width:0;width:0;flex:1 1 auto}
.privacy{margin:0;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.privacy svg{flex:none}
.msgs{list-style:none;margin:0;padding:8px 12px;display:flex;flex-direction:column;gap:6px;min-height:0;flex:1 1 auto;height:auto;overflow-y:auto;overscroll-behavior:contain;transition:height .25s ease;cursor:pointer}
.msgs{cursor:auto}
.newmsgs{position:absolute;left:50%;transform:translateX(-50%);bottom:72px;z-index:3;min-height:0;padding:7px 14px;border-radius:999px;border:0;background:var(--accent);color:var(--accent-ink);font:700 13px var(--font);box-shadow:0 4px 14px rgba(0,0,0,.25);cursor:pointer}
.msg{position:relative;max-width:82%;padding:10px 14px;-webkit-touch-callout:none;border-radius:18px;font-size:15px;line-height:1.4;white-space:pre-wrap;overflow-wrap:anywhere;user-select:none;-webkit-user-select:none}
.msg.me{align-self:flex-end;background:var(--accent);color:var(--accent-ink);border-bottom-right-radius:6px}
.msg.them{align-self:flex-start;background:var(--surface2);color:var(--ink);border-bottom-left-radius:6px}
.msg a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.msg-meta{align-self:flex-end;margin-top:-4px;font-size:12px;color:var(--muted)}
.sys{align-self:center;text-align:center;max-width:90%;font-size:13px;color:var(--muted)}
.typing{margin:0;padding:0 14px 8px;font-size:13px;color:var(--muted)}
.composer{display:flex;align-items:flex-end;gap:8px;padding:8px;border-top:1px solid var(--line)}
.composer textarea{flex:1;min-width:0;resize:none;font:16px/1.4 var(--font);padding:11px 16px;border-radius:22px;border:1px solid var(--line);background:var(--surface2);color:var(--ink);max-height:120px;min-height:44px;overflow-y:hidden;scrollbar-width:thin}
.composer textarea:focus{outline:none;border-color:var(--accent)}
.composer textarea:disabled{opacity:.7}
.icon-btn{position:relative;flex:none;width:44px;height:44px;min-height:44px;padding:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.attach{color:var(--ink);border:1px solid var(--line);background:transparent}
.attach:focus-within{outline:3px solid var(--link);outline-offset:2px}
.attach input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.send,.mic{background:var(--accent);color:var(--accent-ink)}
/* voice notes */
.rec{flex:1;min-width:0;display:flex;align-items:center;gap:10px;min-height:44px;flex-wrap:wrap}
.rec-dot{width:12px;height:12px;border-radius:50%;background:var(--danger);flex:none;animation:recpulse 1s ease-in-out infinite}
@keyframes recpulse{50%{opacity:.3}}
.rec-time{font-weight:700;font-size:17px;font-variant-numeric:tabular-nums}
.rec-label{color:var(--muted);font-size:13px;min-width:0}
.reccancel{color:var(--danger);background:transparent;border:1px solid var(--line)}
.msg.voice{display:flex;flex-direction:column;gap:6px;width:min(300px,82%);white-space:normal}
.msg.voice .dir,.msg.voice .name,.msg.voice .ctrls{display:none}
.msg.voice .meta{color:inherit;opacity:.85;font-size:13px}
.msg.voice .bar{height:4px;background:color-mix(in srgb,currentColor 25%,transparent)}
.msg.voice .bar i{background:currentColor}
.msg.voice.done .bar{display:none}
.msg.voice .actions{display:flex;flex-direction:column;gap:6px;align-items:stretch}
.msg.voice audio{width:100%;height:40px;display:block}
.msg.voice .btn{align-self:flex-start}
.msg.trwait{opacity:.6}
.msg.tr{-webkit-touch-callout:none;user-select:none;-webkit-user-select:none;cursor:default}
.msg.tr .trmark{display:inline-block;width:13px;height:13px;margin-left:6px;vertical-align:-2px;opacity:.55;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5h8M8 3v2M6 5c0 4 2.5 7 5 8M10 5c-.5 4-3 7.5-6 9' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M12 21l4-10 4 10M13.5 17.5h5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5h8M8 3v2M6 5c0 4 2.5 7 5 8M10 5c-.5 4-3 7.5-6 9' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M12 21l4-10 4 10M13.5 17.5h5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.msg.tr.orig{outline:2px dashed var(--accent);outline-offset:2px}

/* Beep + Hold to talk */
.talkbar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:12px}
.talkbar button{height:64px;border-radius:20px;font-size:17px;gap:10px}
.chirp{background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow)}
.chirp.sent{background:var(--signal);color:#1A1205;border-color:var(--signal)}
.ptt{background:var(--accent);color:var(--accent-ink);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none}
.ptt.live{background:var(--live);color:var(--live-ink);animation:pttpulse 1.2s ease-in-out infinite}
@keyframes pttpulse{50%{box-shadow:0 0 0 8px color-mix(in srgb,var(--live) 30%,transparent)}}
#remoteaudio{display:none}

/* files */
.drop{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:22px 16px;border:1.5px dashed var(--dash);border-radius:22px;
  cursor:pointer;background:var(--dropbg);color:var(--ink)}
.drop svg{color:var(--link)}
.drop strong{font-size:17px;font-weight:700}
.drop span{color:var(--muted);font-size:13px}
.drop.over{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--dropbg))}
.drop:focus-within{outline:3px solid var(--link);outline-offset:3px}
.listhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 2px -4px}
.listhead h2{margin:0;font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
.listhead button{min-height:36px;padding:6px 12px;font-size:13px}
#clearhist.armed{color:var(--warn);border-color:var(--warn)}
ul.list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.item{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:14px;display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:center;box-shadow:var(--shadow)}
.dir{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border-radius:8px;grid-row:span 2}
.dir.in{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--link)}
.dir.out{background:color-mix(in srgb,var(--signal) 18%,transparent);color:var(--signal)}
.name{font-weight:700;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.meta{color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums;min-width:0}
.bar{grid-column:1/-1;height:6px;border-radius:3px;background:var(--line);overflow:hidden;margin-top:4px}
.bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .15s linear}
.item.done .bar i{background:var(--live)}
.item.fail .bar i{background:var(--warn)}
.actions,.ctrls{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.ctrls button{min-height:40px;padding:8px 16px;font-size:14px;border-radius:12px}
.ctrls button.ghost{background:transparent;color:var(--link);border:1.5px solid var(--accent)}
.ctrls button.quiet{color:var(--ink)}

/* leave */
.leave{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:8px}
.endcall{width:64px;height:64px;min-height:64px;border-radius:50%;padding:0;background:var(--danger);color:#fff}
.leave span{font-size:14px;font-weight:600;color:var(--muted)}

footer{color:var(--muted);font-size:13px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;margin-top:8px}
footer p{margin:0}
.ver{opacity:.7}
@media (prefers-reduced-motion:reduce){.msgs{transition:none}.bar i{transition:none}.ptt.live,.stage.beeped,.rec-dot{animation:none}}

/* settings */
.gear{width:44px;height:44px;min-height:44px;padding:0;border-radius:50%;background:var(--surface);color:var(--ink);border:1px solid var(--line);flex:none}
.peer .gear{margin-left:8px}
.peer .pill{margin-right:auto}
.toprow{display:flex;justify-content:space-between;align-items:center;margin-bottom:-28px}
.brand{display:inline-flex;align-items:center;gap:9px;font:800 22px/1 var(--font);letter-spacing:-.01em;color:var(--ink)}
.brand img{border-radius:9px;display:block}
.sheetwrap{position:fixed;inset:0;z-index:50;background:rgba(5,7,10,.55);display:flex;align-items:flex-end;justify-content:center;
  padding:0 max(0px,env(safe-area-inset-right,0px)) 0 max(0px,env(safe-area-inset-left,0px))}
.sheet{width:100%;max-width:520px;background:var(--surface);border:1px solid var(--line);border-radius:28px 28px 0 0;
  padding:18px 20px calc(24px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:6px;box-shadow:0 -8px 30px rgba(0,0,0,.25)}
.sheethead{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.sheethead h2{margin:0;font-size:20px;font-weight:800;letter-spacing:-.01em}
.switchrow{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);cursor:pointer}
.switchrow span{display:flex;flex-direction:column;gap:2px}
.switchrow strong{font-size:16px}
.switchrow small{font-size:13px;color:var(--muted)}
.switchrow input{appearance:none;-webkit-appearance:none;flex:none;width:52px;height:32px;border-radius:999px;background:var(--line);position:relative;cursor:pointer;margin:0;transition:background .15s}
.switchrow input::after{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .15s}
.switchrow input:checked{background:var(--accent)}
.switchrow input:checked::after{transform:translateX(20px)}
.switchrow input:disabled{opacity:.45;cursor:default}
.switchrow input:focus-visible{outline:3px solid var(--link);outline-offset:2px}
.sheet .row{margin-top:10px}
@media (prefers-reduced-motion:reduce){.switchrow input,.switchrow input::after{transition:none}}

/* group: grid of tiles */
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tiles.n3,.tiles.n5,.tiles.n6{grid-template-columns:repeat(3,minmax(0,1fr))}
.tile{position:relative;aspect-ratio:4/5;border-radius:22px;overflow:hidden;color:#fff;background:linear-gradient(160deg,#3A4A6B 0%,#161E2E 100%);transition:box-shadow .2s}
.tiles.n4 .tile{aspect-ratio:4/3}
.tiles.n3 .tile{aspect-ratio:3/4;border-radius:18px}
.tiles.n5 .tile,.tiles.n6 .tile{aspect-ratio:1/1;border-radius:18px}
.tile.me{background:linear-gradient(160deg,#5B6B4A 0%,#23291C 100%)}
.tile>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile::after{content:"";position:absolute;left:0;right:0;bottom:0;height:45%;background:linear-gradient(0deg,rgba(11,14,19,.75),rgba(11,14,19,0));pointer-events:none}
.tile .initials{padding-bottom:10%}
.tile .initials span{width:68px;height:68px;font-size:26px}
.tiles.n3 .tile .initials span,.tiles.n5 .tile .initials span,.tiles.n6 .tile .initials span{width:52px;height:52px;font-size:20px}
.tile .initials svg{width:64px;height:64px}
.tile .tname{position:absolute;left:10px;right:10px;bottom:8px;z-index:2;font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.tile .badge{top:8px;padding:4px 9px;font-size:11px}
.tile .talkbadge{left:8px;right:auto}
.tile .langchip{right:8px;left:auto;background:rgba(11,14,19,.62);color:#fff}
.tile.talking{box-shadow:0 0 0 3px var(--live),0 0 0 7px color-mix(in srgb,var(--live) 25%,transparent)}
.tile.beeped{animation:beep 1.1s ease-out}
.tile.away>img,.tile.away .initials{opacity:.45}
.sender{list-style:none;align-self:flex-start;font-size:12px;font-weight:700;padding:4px 4px 0;padding-inline-start:38px;margin-bottom:-2px}
.addbtn{margin-left:8px}
.sheetsub{margin:0;color:var(--muted);font-size:14px}
.addcode{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.picklist{display:flex;flex-direction:column;background:var(--surface2);border-radius:18px;overflow:hidden;margin:6px 0 8px}
.pickrow{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);font-size:16px;font-weight:600;cursor:pointer}
.pickrow:last-child{border-bottom:0}
.pickav{width:40px;height:40px;border-radius:50%;background:var(--line);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;overflow:hidden;flex:none}
.pickav img{width:100%;height:100%;object-fit:cover}
.pickname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pickrow input{width:22px;height:22px;accent-color:var(--accent);flex:none}
#sendto .sheet>button{width:100%}
@media (prefers-reduced-motion:reduce){.tile.beeped{animation:none}}
.sender.c0{color:var(--n0)}.sender.c1{color:var(--n1)}.sender.c2{color:var(--n2)}.sender.c3{color:var(--n3)}.sender.c4{color:var(--n4)}

/* photos in the chat */
.msg.photo{display:flex;flex-direction:column;gap:4px;padding:4px;white-space:normal;max-width:72%;width:fit-content}
.msg.photo .dir,.msg.photo .name,.msg.photo .ctrls{display:none}
.msg.photo .meta{font-size:12px;opacity:.85;padding:0 8px 2px;color:inherit;text-align:right}
.msg.photo.them.done .meta{display:none}
.msg.photo .bar{height:4px;margin:6px 8px;background:color-mix(in srgb,currentColor 25%,transparent)}
.msg.photo .bar i{background:currentColor}
.msg.photo.done .bar{display:none}
.msg.photo:not(.done) .meta{padding:8px 10px 0}
.msg.photo .actions{display:block;margin:0;order:-1}
.actions .chatimg,.chatimg{display:block;padding:0;min-height:0;border:0;background:none;border-radius:14px;overflow:hidden;cursor:zoom-in}
.chatimg img{display:block;max-width:100%;height:auto;border-radius:14px}
.viewer{position:fixed;inset:0;z-index:60;background:rgba(5,7,10,.94);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px 16px calc(16px + env(safe-area-inset-bottom))}
.viewer[hidden]{display:none}
.viewer img{max-width:100%;max-height:calc(100% - 76px);object-fit:contain;border-radius:10px}
.viewer-bar{display:flex;gap:10px;margin-top:16px}
.vbtn{min-width:96px;padding:12px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;font:inherit;font-weight:700;cursor:pointer}
.vbtn.primary{background:#fff;color:#0B0E13;border-color:#fff}

/* reactions and replies */
.msg .body{display:block}
.msg.has-reacts{margin-bottom:14px}
.reacts{position:absolute;bottom:-15px;right:10px;z-index:1;min-height:0;padding:2px 8px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:13px/1.4 var(--font);box-shadow:var(--shadow);cursor:pointer;white-space:nowrap}
.msg.me .reacts{right:auto;left:10px}
.reacts.mine{border-color:var(--accent)}
.msg.picked{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 45%,transparent)}
.msg.pop{animation:msgpop .35s ease-out}
@keyframes msgpop{40%{transform:scale(1.04)}}
.msg.flash{animation:msgflash 1.4s ease-out}
@keyframes msgflash{0%,40%{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 55%,transparent)}100%{box-shadow:0 0 0 0 transparent}}
.quote{display:block;margin:-2px -4px 6px;padding:5px 9px;border-left:3px solid currentColor;border-radius:8px;background:color-mix(in srgb,currentColor 12%,transparent);font-size:13px;line-height:1.35;white-space:normal;cursor:pointer;opacity:.92}
.quote b{display:block;font-size:12px}
.quote span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.reactmenu{position:fixed;z-index:55;display:flex;flex-direction:column;gap:6px;padding:8px;border-radius:20px;background:var(--surface);border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.28)}
.reactmenu .emojis{display:flex;gap:2px}
.reactmenu .emojis button{width:44px;height:44px;min-height:0;padding:0;border:0;border-radius:50%;background:none;font-size:26px;line-height:1;cursor:pointer;transition:transform .12s}
.reactmenu .emojis button:hover,.reactmenu .emojis button:focus-visible{transform:scale(1.18);background:var(--surface2)}
.reactmenu .emojis button.on{background:color-mix(in srgb,var(--accent) 22%,transparent)}
.reactmenu .mactions{display:flex;gap:6px;border-top:1px solid var(--line);padding-top:6px}
.reactmenu .mactions button{flex:1;min-height:38px;padding:6px 10px;border-radius:12px;border:0;background:var(--surface2);color:var(--ink);font:600 14px var(--font);cursor:pointer}
.replybar{display:flex;align-items:center;gap:8px;margin:0 8px 6px;padding:6px 6px 6px 12px;border-left:3px solid var(--accent);border-radius:10px;background:var(--surface2)}
.replybar[hidden]{display:none}
.replyinfo{flex:1;min-width:0;display:flex;flex-direction:column;font-size:13px}
.replyinfo b{color:var(--accent);font-size:12px}
.replyinfo span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.replyclose{width:34px;height:34px;min-height:34px}
@media (prefers-reduced-motion:reduce){.msg.pop,.msg.flash{animation:none}.reactmenu .emojis button{transition:none}}

/* small photo beside the last message of each run from someone */
.msg.them[data-from]{margin-inline-start:34px}
.mav{cursor:pointer;position:absolute;inset-inline-start:-34px;bottom:0;width:28px;height:28px;border-radius:50%;overflow:hidden;display:grid;place-items:center;font:800 12px/1 var(--font);color:var(--surface);background:var(--muted);white-space:nowrap}
.mav[data-i]::before{content:attr(data-i)}
.msg.them:not(.tail)>.mav{display:none}
.mav img{width:100%;height:100%;object-fit:cover;display:block}
.mav.c0{background:var(--n0)}.mav.c1{background:var(--n1)}.mav.c2{background:var(--n2)}.mav.c3{background:var(--n3)}.mav.c4{background:var(--n4)}
.msg.them[data-from] + .msg.them[data-from]{margin-top:-3px}

.langpick select{flex:none;max-width:55%;min-height:40px;padding:6px 10px;border-radius:12px;border:1px solid var(--line);background:var(--surface2);color:var(--ink);font:16px var(--font)}
.langsel{height:46px;border-radius:14px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:16px var(--font);padding:0 12px;text-align:center;text-align-last:center}

/* 1-to-1 video */
#theirvideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;z-index:1}
.stage::after{z-index:1}
.pip video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;background:#000}
.pip video.mirror{transform:scaleX(-1)}
.vidstart{position:absolute;top:14px;right:14px;z-index:4;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 14px;border-radius:999px;border:0;background:rgba(11,14,19,.62);color:#fff;font:700 14px var(--font);cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.vidstart:focus-visible,.vbtn2:focus-visible,.vidask button:focus-visible{outline:3px solid #fff;outline-offset:2px}
.stage .vidstart:not([hidden]) ~ .talkbadge,.stage.trshown .vidstart:not([hidden]) ~ .talkbadge{top:56px}
.vidbar{position:absolute;left:12px;bottom:12px;z-index:4;display:flex;gap:6px;flex-wrap:wrap;max-width:calc(100% - 112px)}
.stage.invideo .pip{width:84px;height:112px;right:12px;bottom:12px}
.stage.full.invideo .pip{width:110px;height:150px}
.vbtn2{width:40px;height:40px;min-height:0;padding:0;border-radius:50%;border:0;display:grid;place-items:center;background:rgba(11,14,19,.62);color:#fff;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.vbtn2[aria-pressed="false"]{background:#fff;color:#0B0E13}
.vbtn2[aria-pressed="false"] svg{opacity:.55}
.vbtn2.vend{background:#E5484D;color:#fff}
.stage.invideo .who{top:14px;bottom:auto;right:110px}
.stage.invideo.trshown .who{top:56px}
.stage.invideo .who strong{font-size:18px}
.stage.invideo .initials{z-index:0}
.vidask{position:absolute;left:12px;right:12px;bottom:12px;z-index:5;padding:12px;border-radius:18px;background:rgba(11,14,19,.82);color:#fff;display:flex;flex-direction:column;gap:10px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.vidask p{margin:0;font-weight:700}
.vidaskrow{display:flex;gap:8px;flex-wrap:wrap}
.vidaskrow button{flex:1 1 auto;min-height:40px;padding:8px 12px;border-radius:12px;border:0;font:700 14px var(--font);background:var(--accent);color:var(--accent-ink);cursor:pointer}
.vidaskrow button.ghost{background:rgba(255,255,255,.14);color:#fff}
.stage.full{position:fixed;inset:0;z-index:50;max-height:none;height:auto;aspect-ratio:auto;border-radius:0;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
.stage.full .pip{bottom:calc(14px + env(safe-area-inset-bottom,0px));right:calc(14px + env(safe-area-inset-right,0px));width:110px;height:150px}
.stage.full .vidbar{bottom:calc(14px + env(safe-area-inset-bottom,0px))}
body.vfull{overflow:hidden}
.vidtoast{position:fixed;left:50%;transform:translateX(-50%);top:calc(14px + env(safe-area-inset-top,0px));z-index:60;max-width:min(92vw,480px);padding:10px 16px;border-radius:16px;border:0;background:rgba(255,255,255,.95);color:#0B0E13;font:600 15px var(--font);text-align:start;box-shadow:0 8px 24px rgba(0,0,0,.35);cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* accept, person, report sheets */
.asksheet{display:flex;flex-direction:column;gap:14px}
.askwho{display:flex;align-items:center;gap:14px}
.askav{flex:none;width:64px;height:64px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--surface2);font:800 22px var(--font);color:var(--ink)}
.askav img{width:100%;height:100%;object-fit:cover}
.askwho h2{margin:0;font-size:19px;line-height:1.3}
.askwho p{margin:2px 0 0;color:var(--muted);font-size:14px}
.askbtns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.askblock{align-self:center;color:var(--muted)}
.safety{display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:16px;background:var(--surface2)}
.safety .code{margin:0;font:800 26px/1.2 var(--font);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.safety small{color:var(--muted);font-size:13px}
.psbtns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.danger{color:#E5484D}
.rpintro{margin:0 0 10px;color:var(--muted);font-size:14px}
.rpreasons{border:0;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:8px}
.rpreasons legend{font-weight:700;margin-bottom:6px}
.rpreasons label,.rpcheck{display:flex;align-items:center;gap:10px;font-size:15px}
#rpnote{width:100%;box-sizing:border-box;margin:6px 0 10px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--surface2);color:var(--ink);font:16px var(--font);resize:vertical}
.rpcheck{margin-bottom:8px}
#rpsend{width:100%;margin-top:6px}
.who{cursor:pointer}
.who strong::after{content:"";display:inline-block;width:16px;height:16px;margin-left:6px;vertical-align:-2px;opacity:.75;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M12 11v6M12 7.5v.5' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M12 11v6M12 7.5v.5' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.tile:not(.me){cursor:pointer}
.askbtns .ghost{background:var(--surface2);color:var(--ink);border:1px solid var(--line)}
.psbtns .danger,.psbtns button.danger{color:#E5484D}
.maint{margin:0;padding:10px 14px;border-radius:14px;background:color-mix(in srgb,#F5B83D 22%,var(--surface));border:1px solid color-mix(in srgb,#F5B83D 55%,var(--line));color:var(--ink);font-size:14px;font-weight:600}
.askvpn{margin:6px 0 0;display:inline-block;padding:3px 10px;border-radius:999px;background:color-mix(in srgb,#F5B83D 25%,transparent);color:var(--ink);font-size:12px;font-weight:700}
.talkbar.one{grid-template-columns:1fr}

/* Keyboard mode: while the keyboard is open the call becomes a live-stream style view.
   The picture fills the space above the keyboard and messages float over its lower part. */
body.live #session{position:fixed;left:0;right:0;top:var(--vvtop,0px);height:var(--vvh,100vh);z-index:20;max-width:552px;margin:0 auto;padding:0;gap:0;display:block;background:#0B0E13;overflow:hidden;animation:kbin .18s ease-out}
@keyframes kbin{from{opacity:.4}to{opacity:1}}
body.live #session>.drop{display:none!important}
body.live .stage{position:absolute;inset:0;height:auto;max-height:none;aspect-ratio:auto;border-radius:0;box-shadow:none}
body.live .stage>img,body.live .tile>img{object-position:50% 18%}
body.live .stage::after{height:55%;background:linear-gradient(0deg,rgba(11,14,19,.85) 0%,rgba(11,14,19,.45) 55%,rgba(11,14,19,0) 100%)}
body.live .stage::before{content:"";position:absolute;left:0;right:0;top:0;height:90px;z-index:1;background:linear-gradient(180deg,rgba(11,14,19,.55),rgba(11,14,19,0));pointer-events:none}
body.live .stage .initials{align-items:flex-start;padding:16% 0 0}
body.live .stage .who{top:calc(66px + env(safe-area-inset-top,0px));left:16px;bottom:auto;right:100px}
body.live .stage .who strong{font-size:18px;text-shadow:0 1px 4px rgba(0,0,0,.5)}
body.live .stage .who span{display:none}
body.live .stage .badge{top:calc(104px + env(safe-area-inset-top,0px))}
body.live .stage .talkbadge{left:16px;right:auto}
body.live .stage.trshown .talkbadge{top:calc(140px + env(safe-area-inset-top,0px))}
body.live .stage .pip{top:calc(64px + env(safe-area-inset-top,0px));bottom:auto;right:12px;width:56px;height:74px;border-radius:14px}
body.live .stage .pip span{display:none}
body.live .stage .vidstart{top:calc(148px + env(safe-area-inset-top,0px));right:12px}
body.live .stage .vidbar{top:calc(104px + env(safe-area-inset-top,0px));bottom:auto;left:12px;max-width:calc(100% - 100px)}
body.live .stage .vidask{top:38%;bottom:auto}
body.live.kbmode .stage .vidbar,body.live.kbmode .stage .vidask,body.live.kbmode .stage .vidstart,body.live.kbmode #gvid{display:none!important}
body.live .tiles{position:absolute;inset:calc(58px + env(safe-area-inset-top,0px)) 0 0 0;gap:2px;grid-auto-rows:1fr;align-content:stretch;background:#0B0E13}
body.live .tiles .tile{aspect-ratio:auto;height:auto;border-radius:0}
body.live .tiles .tile::after{display:none}
body.live .tiles::after{content:"";position:absolute;left:0;right:0;bottom:0;height:70%;z-index:1;background:linear-gradient(0deg,rgba(11,14,19,.85) 0%,rgba(11,14,19,.45) 55%,rgba(11,14,19,0) 100%);pointer-events:none}
body.live .tiles .tile .initials{align-items:flex-start;padding:18% 0 0}
body.live .tiles .tile .initials span,body.live .tiles .tile .initials svg{width:44px;height:44px;font-size:17px}
body.live .tiles .tile .tname{top:8px;bottom:auto;left:8px;right:8px;font-size:12px}
body.live .tiles .tile .badge{display:none}
/* the floating chat */
body.live .chat{position:absolute;left:0;right:0;bottom:0;height:max(220px,46%)!important;min-height:0;z-index:5;background:none;border:0;border-radius:0;box-shadow:none;color:#fff}
body.live .chathead{display:none}
body.live .msgs{padding:8px 14px 4px;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30%);mask-image:linear-gradient(180deg,transparent 0,#000 30%)}
body.live .msg{max-width:78%;box-shadow:0 1px 6px rgba(0,0,0,.25)}
body.live .msg.them{background:rgba(20,24,32,.62);color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
body.live .msg.me{background:color-mix(in srgb,var(--accent) 88%,transparent)}
body.live .msg-meta,body.live .sys,body.live .typing{color:rgba(255,255,255,.85);text-shadow:0 1px 3px rgba(0,0,0,.6)}
body.live .sender{text-shadow:0 1px 3px rgba(0,0,0,.6);filter:brightness(1.6)}
body.live .reacts{background:rgba(20,24,32,.85);border-color:rgba(255,255,255,.25);color:#fff}
body.live .replybar{background:rgba(20,24,32,.75);color:#fff}
body.live .replyinfo span{color:rgba(255,255,255,.75)}
body.live .composer{border-top:0;padding:6px 10px calc(8px + env(safe-area-inset-bottom,0px))}
body.live .composer textarea{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28);color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
body.live .composer textarea::placeholder{color:rgba(255,255,255,.7)}
body.live .composer textarea:focus{border-color:rgba(255,255,255,.6)}
body.live .attach{color:#fff;border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.08)}
body.live .rec-label{color:rgba(255,255,255,.8)}
@media (prefers-reduced-motion:reduce){body.live #session{animation:none}}

/* group video: live pictures in the tiles, buttons under them */
.tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;z-index:1}
.tile video.mirror,#myvideo.mirror{transform:scaleX(-1)}
.tile.vidon .initials,.tile.vidon>img{visibility:hidden}
.tile .tname,.tile .badge{z-index:3}
.gvid{display:flex;flex-direction:column;align-items:stretch;gap:8px}
.gvid .vidstart{position:static;align-self:center;background:var(--surface);color:var(--ink);border:1px solid var(--line);min-height:44px;padding:8px 18px;-webkit-backdrop-filter:none;backdrop-filter:none}
.gvid .vidbar{position:static;max-width:none;justify-content:center;gap:10px}
.gvid .vbtn2{width:46px;height:46px;background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.gvid .vbtn2[aria-pressed="false"]{background:var(--ink);color:var(--surface)}
.gvid .vbtn2.vend{background:#E5484D;color:#fff;border-color:#E5484D}
.gvid .vidask{position:static;left:auto;right:auto;bottom:auto}
body.live .tiles .tile video{z-index:0}

/* Floating view: live-stream chat. Everyone's messages on the left, stacked, name over the text, no bubbles. */
body.live .msgs{gap:8px;padding-inline-start:52px}
body.live .msg,body.live .msg.me,body.live .msg.them{align-self:flex-start;max-width:92%;margin-inline-start:0;padding:0 2px;border-radius:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;
  color:#fff;font-size:15px;text-shadow:0 1px 3px rgba(0,0,0,.85),0 0 1px rgba(0,0,0,.6)}
body.live .msg[data-name]::before{content:attr(data-name);display:block;font-weight:800;font-size:13px;letter-spacing:.01em;opacity:.92;margin-bottom:1px}
body.live .msg.me[data-name]::before{color:#A9C7FF}
body.live .msg.them>.mav{display:grid;top:2px;bottom:auto;inset-inline-start:-40px;width:32px;height:32px;box-shadow:0 1px 4px rgba(0,0,0,.4)}
body.live .msg.photo,body.live .msg.voice{padding:0}
body.live .msg .quote{background:rgba(0,0,0,.35)}
body.live .msg-meta{align-self:flex-start;margin-top:-6px;font-size:11px}
body.live .sender{display:none}
body.live .reacts{position:static;display:inline-flex;margin-top:3px;width:fit-content;text-shadow:none}
body.live .msg.has-reacts{margin-bottom:0}
body.live .msg.tr.orig{outline-color:#fff}

/* ---------- Active (going live) ---------- */
.actcard{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.goactive{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:10px 26px;border-radius:999px;border:0;
  background:linear-gradient(135deg,#F43F5E,#E11D48);color:#fff;font:800 17px var(--font);letter-spacing:.01em;cursor:pointer;box-shadow:0 6px 18px rgba(225,29,72,.35)}
.goactive:focus-visible{outline:3px solid var(--link);outline-offset:3px}
.goactive:disabled{opacity:.6;cursor:default}
.livedot{width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.35);animation:livepulse 1.6s ease-in-out infinite}
@keyframes livepulse{50%{box-shadow:0 0 0 6px rgba(255,255,255,0)}}
.actcard .hint{margin:0;max-width:340px}
.actview{position:fixed;left:0;right:0;top:var(--vvtop,0px);height:var(--vvh,100vh);height:var(--vvh,100dvh);z-index:40;max-width:560px;margin:0 auto;background:#05070A;color:#fff;overflow:hidden;
  font-family:var(--font)}
#actvideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
#actvideo.mirror{transform:scaleX(-1)}
.actnovideo{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:0 24px 30%;text-align:center;
  background:linear-gradient(160deg,#3A4A6B 0%,#23304A 55%,#161E2E 100%);color:#E2E8F0;font-size:15px}
.actbig{width:96px;height:96px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:rgba(255,255,255,.16);font:800 36px var(--font)}
.actbig img{width:100%;height:100%;object-fit:cover}
.actshade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.5) 0,rgba(0,0,0,0) 110px),linear-gradient(0deg,rgba(0,0,0,.72) 0,rgba(0,0,0,.35) 32%,rgba(0,0,0,0) 52%)}
.acttop{position:absolute;left:0;right:0;top:0;z-index:3;display:flex;align-items:center;gap:8px;padding:calc(12px + env(safe-area-inset-top,0px)) 12px 8px 12px}
.actwho{display:flex;align-items:center;gap:8px;min-width:0;flex:0 1 auto;padding:0;border:0;background:none;color:#fff;font:800 15px var(--font);cursor:default;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.actav{flex:none;width:34px;height:34px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:#E11D48;font:800 13px var(--font);border:2px solid #fff}
.actav img{width:100%;height:100%;object-fit:cover}
.actname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.actbadge{flex:none;padding:3px 9px;border-radius:6px;background:#E11D48;color:#fff;font:800 12px var(--font);letter-spacing:.06em;text-transform:uppercase}
.actcount{flex:none;display:inline-flex;align-items:center;gap:5px;min-height:28px;padding:3px 10px;border-radius:8px;border:0;background:rgba(0,0,0,.45);color:#fff;font:700 13px var(--font);cursor:pointer}
.actx{margin-inline-start:auto;flex:none;width:40px;height:40px;min-height:0;padding:0;border-radius:50%;border:0;display:grid;place-items:center;background:rgba(0,0,0,.35);color:#fff;cursor:pointer}
.actinvite{position:absolute;left:16px;right:16px;top:calc(96px + env(safe-area-inset-top,0px));z-index:4;padding:14px 16px;border-radius:18px;background:rgba(10,12,16,.78);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-align:center}
.actinvh{margin:0;font-size:14px;color:#CBD5E1}
.actcode{margin:4px 0 10px;font:800 34px/1.1 var(--font);letter-spacing:.12em;font-variant-numeric:tabular-nums}
.actinvrow{display:flex;gap:8px;justify-content:center}
.actinvrow button{min-height:40px;padding:8px 16px;border-radius:12px;border:0;background:#fff;color:#0B0E13;font:700 14px var(--font);cursor:pointer}
.actinvrow button.ghost{background:rgba(255,255,255,.14);color:#fff}
.actsound{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);z-index:4;min-height:44px;padding:10px 18px;border-radius:999px;border:0;background:#fff;color:#0B0E13;font:700 15px var(--font);cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.4)}
.actmsgs{position:absolute;left:0;right:64px;bottom:calc(66px + env(safe-area-inset-bottom,0px));z-index:3;max-height:42%;margin:0;padding:6px 12px 4px 12px;list-style:none;display:flex;flex-direction:column;gap:8px;
  overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 26%);mask-image:linear-gradient(180deg,transparent 0,#000 26%)}
.actmsgs::-webkit-scrollbar{display:none}
.actmsg{display:flex;align-items:flex-start;gap:10px;font-size:15px;line-height:1.35;text-shadow:0 1px 3px rgba(0,0,0,.85);animation:actin .22s ease-out}
@keyframes actin{from{opacity:0;transform:translateY(6px)}}
.actmsg .aav{flex:none;width:32px;height:32px;border-radius:50%;overflow:hidden;display:grid;place-items:center;font:800 12px var(--font);color:#0B0E13;background:#CBD5E1;text-shadow:none;cursor:pointer}
.actmsg .aav img{width:100%;height:100%;object-fit:cover}
.actmsg .atext{min-width:0;overflow-wrap:anywhere;white-space:pre-wrap}
.actmsg .atext b{display:block;font-size:13px;font-weight:800;opacity:.92}
.actmsg.host .atext b::after{content:"";display:inline-block;width:7px;height:7px;margin-inline-start:6px;border-radius:50%;background:#F43F5E;vertical-align:1px}
.actmsg.me .atext b{color:#A9C7FF}
.actmsg.sys{font-size:13px;color:rgba(255,255,255,.82);padding-inline-start:4px}
.actmsg.trwait{opacity:.65}
.acthearts{position:absolute;right:6px;bottom:calc(66px + env(safe-area-inset-bottom,0px));z-index:3;width:60px;height:46%;pointer-events:none}
.aheart{position:absolute;bottom:0;left:50%;width:30px;height:30px;margin-left:-15px;animation:floatheart 2.6s ease-out forwards}
.aheart svg{width:100%;height:100%;filter:drop-shadow(0 1px 3px rgba(0,0,0,.4))}
@keyframes floatheart{0%{transform:translate(0,0) scale(.5);opacity:0}12%{opacity:1;transform:translate(0,-12px) scale(1)}
  100%{transform:translate(var(--dx,0px),-260px) scale(.9);opacity:0}}
.actbar{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:center;gap:8px;padding:8px 12px calc(10px + env(safe-area-inset-bottom,0px))}
#actbox{flex:1;min-width:0;height:46px;padding:0 16px;border-radius:23px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.12);color:#fff;font:16px var(--font);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#actbox::placeholder{color:rgba(255,255,255,.72)}
#actbox:focus{outline:none;border-color:rgba(255,255,255,.75)}
.actbtn{flex:none;width:46px;height:46px;min-height:0;padding:0;border-radius:50%;border:0;display:grid;place-items:center;background:rgba(255,255,255,.14);color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.actbtn[aria-pressed="false"]{background:#fff;color:#0B0E13}
.actheart{color:#F43F5E;background:rgba(255,255,255,.92)}
.actheart:active{transform:scale(.9)}
.actbtn:focus-visible,.actx:focus-visible,.actcount:focus-visible{outline:3px solid #fff;outline-offset:2px}
.actended{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;text-align:center;background:rgba(5,7,10,.88);font-size:18px;font-weight:700}
.actended button{min-height:46px;padding:10px 28px;border-radius:999px;border:0;background:#fff;color:#0B0E13;font:800 16px var(--font);cursor:pointer}
body.acting{overflow:hidden}
@media (prefers-reduced-motion:reduce){.livedot,.actmsg,.aheart{animation:none}.aheart{display:none}}
.actmsg.sys{align-self:flex-start;text-align:start;max-width:none}
.actcount:disabled{opacity:1;cursor:default}
.actcodechip{position:absolute;left:12px;top:calc(56px + env(safe-area-inset-top,0px));z-index:3;min-height:30px;padding:4px 12px;border-radius:999px;border:0;background:rgba(0,0,0,.45);color:#fff;font:700 13px var(--font);letter-spacing:.04em;font-variant-numeric:tabular-nums;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.actcodechip:focus-visible{outline:3px solid #fff;outline-offset:2px}
.actasklbl{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;font-size:14px;color:#E2E8F0;cursor:pointer}
.actasklbl input{width:20px;height:20px;accent-color:#F43F5E;margin:0}

/* ---------- your number and contacts ---------- */
.numrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.numlbl{font-size:13px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
#mynum{font:800 22px/1 var(--font);letter-spacing:.08em;font-variant-numeric:tabular-nums;margin-inline-end:auto}
.cardhead{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cardhead .label{margin:0}
.contacts{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column}
.contact{display:flex;align-items:center;gap:12px;padding:8px 0;border-top:1px solid var(--line)}
.contact:first-child{border-top:0}
.cav{flex:none;width:44px;height:44px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--surface2);font:800 16px var(--font);color:var(--ink)}
.cav img{width:100%;height:100%;object-fit:cover}
.cwho{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:4px 0;border:0;background:none;color:var(--ink);font:inherit;text-align:start;cursor:pointer;min-height:44px;justify-content:center}
.cwho strong{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px}
.cwho small{color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
.ccall{flex:none;width:44px;height:44px;min-height:0;padding:0;border-radius:50%;border:0;display:grid;place-items:center;background:#16A34A;color:#fff;cursor:pointer}
.ccall:focus-visible{outline:3px solid var(--link);outline-offset:2px}
.savecard{display:flex;flex-direction:column;gap:8px;padding:14px 16px;border-radius:18px;background:var(--surface);border:1px solid var(--accent);box-shadow:var(--shadow);font-weight:600}
.savecard .row{margin:0}
.psnumrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.psnumrow span{color:var(--muted);font-size:13px}
#psnum{font-variant-numeric:tabular-nums;letter-spacing:.06em;margin-inline-end:auto}
.ctinput{width:100%;height:46px;padding:0 14px;border-radius:12px;border:1px solid var(--line);background:var(--surface2);color:var(--ink);font:16px var(--font);margin:4px 0 12px}
.ctbtns{display:flex;gap:8px;flex-wrap:wrap}
.ctbtns button{flex:1 1 auto}
.hangup{width:100%;min-height:50px;border-radius:999px;border:0;background:#E5484D;color:#fff;font:800 16px var(--font);cursor:pointer;margin-top:6px}
#callstatus,#ringnum{margin:2px 0 0;color:var(--muted)}
#ringsheet .askbtns #ringyes{background:#16A34A}
.sethead{margin:18px 0 4px;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
#ringrows .langpick{flex-wrap:wrap}
#ringrows .langpick select{max-width:none;width:100%}

.sys,.actmsg.sys{transition:opacity .5s ease,max-height .5s ease}
#msgs .sys.gone,.actmsg.sys.gone{opacity:0}

/* ---------- the call screen: pictures fill the screen, everything floats on top ---------- */
body.live{overflow:hidden}
body.live #session{animation:none}
body.live .peer{position:absolute;top:calc(8px + env(safe-area-inset-top,0px));left:12px;right:12px;z-index:7;min-height:44px}
body.live .peer .pill{background:rgba(11,14,19,.55);color:#fff;border:0;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
body.live .peer .gear{background:rgba(11,14,19,.55);color:#fff;border:0;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
body.live .msgs{padding-inline-end:72px}
body.live #soundon{position:absolute;left:50%;top:34%;transform:translateX(-50%);z-index:8;background:#fff;color:#0B0E13;border:0;box-shadow:0 6px 20px rgba(0,0,0,.4)}
body.live #gvid{position:absolute;top:calc(64px + env(safe-area-inset-top,0px));left:12px;right:12px;z-index:6;align-items:center}
body.live #gvid .vidstart{background:rgba(11,14,19,.62);color:#fff;border:0}
body.live #gvid .vbtn2{background:rgba(11,14,19,.62);color:#fff;border:0}
body.live #gvid .vbtn2[aria-pressed="false"]{background:#fff;color:#0B0E13}
body.live #gvid .vbtn2.vend{background:#E5484D;color:#fff}
body.live #gvid .vidask{width:100%}
/* round buttons down the right side: leave, files, beep, hold to talk */
.livecol{display:none}
body.live .livecol{position:absolute;right:10px;bottom:calc(70px + env(safe-area-inset-bottom,0px));z-index:6;display:flex;flex-direction:column;align-items:center;gap:10px}
.lbtn{position:relative;width:50px;height:50px;min-height:0;padding:0;border-radius:50%;border:0;display:grid;place-items:center;background:rgba(11,14,19,.6);color:#fff;cursor:pointer;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 2px 10px rgba(0,0,0,.3)}
.lbtn:focus-visible{outline:3px solid #fff;outline-offset:2px}
.lbtn.lleave{background:#E5484D}
.lbtn .ldot{position:absolute;top:6px;right:6px;width:11px;height:11px;border-radius:50%;background:#F43F5E;border:2px solid #fff}
body.live .talkbar{display:flex;flex-direction:column;align-items:center;gap:10px;grid-template-columns:none}
body.live .talkbar button{width:50px;height:50px;min-height:0;padding:0;border-radius:50%;gap:0;display:grid;place-items:center;font-size:0;box-shadow:0 2px 10px rgba(0,0,0,.3)}
body.live .talkbar .chirp{background:rgba(11,14,19,.6);color:#fff;border:0;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
body.live .talkbar .ptt{width:64px;height:64px}
body.live .talkbar .ptt svg{width:28px;height:28px}
body.live .talkbar span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body.live .talkbar button:disabled{opacity:.55}
body.live.kbmode .livecol{display:none}
body.live.kbmode .chat{height:62%!important}
body.live.kbmode .msgs{padding-inline-end:14px}
/* notices and the maintenance message stay visible above the call */
body.live #note,body.live #maint{position:fixed;top:calc(60px + env(safe-area-inset-top,0px));left:12px;right:12px;z-index:30;max-width:536px;margin:0 auto}
/* files open as a sheet during a call */
.filesbody{display:flex;flex-direction:column;gap:12px;max-height:60vh;overflow-y:auto}
.filesbody .listhead{display:flex}
body.live #leavewrap{display:none!important}
body.live.gvidbar .tiles{top:calc(112px + env(safe-area-inset-top,0px))}
body.live #gvid{top:calc(60px + env(safe-area-inset-top,0px))}
body.live #gvid .vidstart{min-height:44px}
/* the floating chat only catches taps on its messages and buttons; elsewhere you can tap the pictures behind it */
body.live .chat,body.live .msgs{pointer-events:none}
body.live .msgs>li,body.live .composer,body.live .replybar,body.live .newmsgs,body.live .typing{pointer-events:auto}
/* While typing, the messages use the whole left side: from just under the name down to the message box. */
body.live.kbmode .chat{top:calc(100px + env(safe-area-inset-top,0px));height:auto!important}
body.live.kbmode #tiles:not([hidden]) ~ .chat{top:calc(88px + env(safe-area-inset-top,0px))}
body.live.kbmode.gvidbar #tiles:not([hidden]) ~ .chat{top:calc(142px + env(safe-area-inset-top,0px))}
body.live.kbmode .msgs{padding-inline-end:84px;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 36px);mask-image:linear-gradient(180deg,transparent 0,#000 36px)}
body.live.kbmode #tiles:not([hidden]) ~ .chat .msgs{padding-inline-end:14px}
body.live.kbmode.gvidbar .tiles{top:calc(58px + env(safe-area-inset-top,0px))}
body.live.kbmode.gvidbar #tiles:not([hidden]) ~ .chat{top:calc(88px + env(safe-area-inset-top,0px))}
body.live .msgs .sys{align-self:flex-start;text-align:start;max-width:none}
/* Full-screen video inside a call: the video fills the screen, the side buttons and top bar step aside,
   and the messages use the whole left side from just under the name, with the message box at the bottom. */
body.live .stage.full{position:absolute;inset:0;z-index:auto;padding:0}
body.live.vfull .peer,body.live.vfull .livecol{display:none}
body.live.vfull .stage .who{top:calc(14px + env(safe-area-inset-top,0px))}
body.live.vfull .stage .pip{top:calc(12px + env(safe-area-inset-top,0px));bottom:auto}
body.live.vfull .stage .vidbar{top:calc(52px + env(safe-area-inset-top,0px));bottom:auto}
body.live.vfull .chat{top:calc(104px + env(safe-area-inset-top,0px));height:auto!important}
body.live.vfull .msgs{padding-inline-end:84px}
body.live.vfull.kbmode .stage .vidbar{display:flex!important}
body.live .msgs>:first-child{margin-top:auto}

/* ---------- your number: protection, moving, restoring ---------- */
.numlinks{flex-basis:100%;display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:2px}
.numlinks .link{font-size:14px;padding:4px 0;min-height:32px}
.warnlink{color:var(--warn)!important;font-weight:700}
.oklink{color:var(--ok)!important;font-weight:700}
.tipcard{border-color:var(--line)}
.nsnum{margin:0;font:800 34px/1.1 var(--font);letter-spacing:.08em;font-variant-numeric:tabular-nums;text-align:center}
.nsstatus{margin:6px 0 12px;text-align:center;color:var(--warn);font-size:14px}
.nsstatus.ok{color:var(--ok);font-weight:700}
.nsnote{margin:0 0 10px;padding:10px 12px;border-radius:12px;background:var(--surface2);font-size:14px}
.nsnote.warn{color:var(--warn)}
.nsbtns{display:flex;flex-direction:column;gap:8px}
.nsbtns button{width:100%}
.nsbox{margin-top:12px;padding:14px;border-radius:16px;background:var(--surface2);display:flex;flex-direction:column;gap:10px}
.nsbox p{margin:0;font-size:14px}
.nscode{font:800 20px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace!important;letter-spacing:.06em;text-align:center;user-select:all;-webkit-user-select:all;word-break:break-all}
.nsqr{align-self:center;background:#fff;padding:8px;border-radius:12px}
.warnbox{border:1px solid var(--warn)}
.dangerbtn{background:var(--danger)!important;color:#fff!important}
#ns-codein{text-transform:uppercase;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em;margin:0}
.setlink{width:100%;display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:10px 0;border:0;border-bottom:1px solid var(--line);background:none;color:var(--ink);font:600 16px var(--font);text-align:start;cursor:pointer}
.setlink span{font-size:22px;color:var(--muted)}
/* Full-screen video and typing: the first message sits right under the name; new ones fill downward. */
body.live.vfull .msgs>:first-child,body.live.kbmode .msgs>:first-child{margin-top:0}
body.live.vfull .msgs:not(.scrolled),body.live.kbmode .msgs:not(.scrolled){-webkit-mask-image:none;mask-image:none}
/* The floating chat always uses the whole left side: from just under the name (or the top row of pictures)
   down to the message box. The first message starts at the top; older ones fade only once scrolled up. */
body.live .chat{top:calc(100px + env(safe-area-inset-top,0px));height:auto!important}
body.live .stage.invideo:not([hidden]) ~ .chat{top:calc(152px + env(safe-area-inset-top,0px))}
body.live #tiles:not([hidden]) ~ .chat{top:calc(88px + env(safe-area-inset-top,0px))}
body.live.gvidbar #tiles:not([hidden]) ~ .chat{top:calc(142px + env(safe-area-inset-top,0px))}
body.live .msgs>:first-child{margin-top:0}
body.live .msgs:not(.scrolled){-webkit-mask-image:none;mask-image:none}
body.live .stage .trbadge{display:none}
body.live .stage .talkbadge,body.live .stage.trshown .talkbadge{top:calc(68px + env(safe-area-inset-top,0px));left:auto;right:96px}
/* Active: comments use the whole left side too, from under the header down to the comment box. */
.actmsgs{top:calc(100px + env(safe-area-inset-top,0px));max-height:none}
.actmsgs:not(.scrolled){-webkit-mask-image:none;mask-image:none}
body.live .stage .vidstart{width:50px;height:50px;min-height:0;padding:0;justify-content:center;border-radius:50%;font-size:0;gap:0;right:10px}
body.live .stage .vidstart svg{width:22px;height:22px}
.sheet{max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}