:root{--bg:#0b0f1e;--card:#151a2e;--card2:#1c2340;--txt:#eef1ff;--mut:#8b93b8;--acc:#7c5cff;--acc2:#22d3ee;--ok:#22c55e;--bad:#f43f5e}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--txt);font-family:-apple-system,"Segoe UI","Rubik","Noto Sans Hebrew",Arial,sans-serif}
#app{max-width:560px;margin:0 auto;height:100%;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top)}
button{font:inherit;border:0;cursor:pointer;color:inherit}
.btn{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff;padding:14px 20px;border-radius:14px;font-weight:700;font-size:16px;width:100%}
.btn.ghost{background:var(--card2)}
.btn:disabled{opacity:.4}
input,textarea{font:inherit;background:var(--card2);color:var(--txt);border:1px solid #2a335a;border-radius:14px;padding:13px 14px;width:100%;outline:none}
input:focus{border-color:var(--acc)}
header{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid #1c2340}
header h1{font-size:20px;margin:0;flex:1}
.logo{width:34px;height:34px}
.icon{background:var(--card2);width:40px;height:40px;border-radius:12px;font-size:19px;display:grid;place-items:center}
.center{flex:1;display:flex;flex-direction:column;justify-content:center;padding:28px;gap:16px;text-align:center}
.center h2{margin:0;font-size:28px}.mut{color:var(--mut);font-size:14px;line-height:1.6}
.list{flex:1;overflow:auto;padding:8px}
.friend{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;background:var(--card);margin-bottom:8px;cursor:pointer}
.av{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:19px;position:relative;flex:none}
.dot{position:absolute;bottom:0;left:0;width:13px;height:13px;border-radius:50%;border:2px solid var(--card);background:#555c7a}
.dot.on{background:var(--ok)}
.fname{font-weight:700}.fsub{font-size:13px;color:var(--mut)}
.badge{margin-inline-start:auto;background:var(--acc);border-radius:20px;padding:2px 9px;font-size:13px;font-weight:700}
.empty{text-align:center;color:var(--mut);padding:50px 20px;line-height:1.7}
.fab{margin:12px 16px calc(12px + env(safe-area-inset-bottom))}
.msgs{flex:1;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:8px}
.b{max-width:78%;padding:11px 14px;border-radius:18px;font-size:15px;line-height:1.4}
.b.in{align-self:flex-start;background:linear-gradient(135deg,#2b2160,#163a4a);cursor:pointer;border:1px solid #3b3290}
.b.in b{display:block}.b.in small{color:var(--mut)}
.b.out{align-self:flex-end;background:var(--card);color:var(--mut);font-size:13px}
.sys{align-self:center;font-size:12px;color:var(--mut);background:var(--card);padding:5px 12px;border-radius:20px}
.typing{font-size:13px;color:var(--acc2);padding:0 16px;height:18px}
.comp{display:flex;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));border-top:1px solid #1c2340;align-items:center}
.comp input{flex:1}
.comp .icon.rec{background:var(--bad);animation:p 1s infinite}@keyframes p{50%{opacity:.5}}
.off{background:#2a1530;color:#ffb4c6;text-align:center;padding:10px;font-size:13px}
.sheet{position:fixed;inset:0;background:#000a;display:flex;align-items:flex-end;justify-content:center;z-index:5}
.sheet>div{background:var(--card);width:100%;max-width:560px;border-radius:24px 24px 0 0;padding:22px 20px calc(22px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px;text-align:center}
.qr{background:#fff;border-radius:16px;padding:12px;width:220px;margin:0 auto}.qr img,.qr svg{width:100%;display:block}
.link{font-size:12px;color:var(--mut);word-break:break-all;direction:ltr}
.viewer{position:fixed;inset:0;background:#000;z-index:9;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;user-select:none;-webkit-user-select:none}
.viewer img,.viewer video{max-width:100%;max-height:75vh;border-radius:12px}
.viewer .vt{font-size:22px;line-height:1.5;white-space:pre-wrap;max-width:600px;text-align:center}
.viewer .bar{position:absolute;top:calc(14px + env(safe-area-inset-top));inset-inline:16px;display:flex;justify-content:space-between;align-items:center;color:var(--mut);font-size:13px}
.viewer .close{background:#ffffff22;padding:9px 16px;border-radius:20px;color:#fff}
#toast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%);background:#fff;color:#000;padding:10px 18px;border-radius:20px;font-size:14px;opacity:0;transition:.3s;pointer-events:none;z-index:20;max-width:90%;text-align:center}
#toast.show{opacity:1}
.lock{font-size:12px;color:var(--mut);text-align:center;padding:6px}
.chip{background:var(--card2);border-radius:20px;padding:4px 10px;font-size:13px;margin:2px}a{color:var(--acc2)}
input,textarea,select{font-size:16px;-webkit-user-select:text;user-select:text;touch-action:manipulation}
input{-webkit-appearance:none;appearance:none}
.sel{-webkit-appearance:none;appearance:none;background:var(--card2);color:var(--txt);border-radius:14px;padding:12px 14px;border:1px solid #2a335a;font:inherit;font-size:16px;width:100%}
.fx{position:fixed;pointer-events:none;z-index:30;overflow:visible}
.fx .shard{position:absolute;display:block;border-radius:3px;box-shadow:0 0 8px #fff4}
.fx .puff{position:absolute;display:block;border-radius:50%;background:radial-gradient(circle,#e8e9ff 0,#b9bde0aa 40%,#0000 70%);filter:blur(2px)}
.viewer.hid>*:not(.bar):not(.vbot){filter:blur(40px);opacity:.05}
.viewer.wh .vt,.viewer.wh img,.viewer.wh video{filter:blur(22px);transition:filter .12s}
.viewer.wh.rv .vt,.viewer.wh.rv img,.viewer.wh.rv video{filter:none}
.viewer .wtip{position:absolute;bottom:calc(24px + env(safe-area-inset-bottom));color:var(--mut);font-size:13px}
.viewer img,.viewer video,.viewer .vt{-webkit-touch-callout:none;-webkit-user-drag:none;user-select:none;-webkit-user-select:none}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:start}
.snds{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}.snds .chip.sel1{background:var(--acc);color:#fff}
.tg{flex:none;min-width:56px;padding:6px 12px}.tg::after{content:"OFF"}.tg[aria-pressed=true]{background:var(--acc);color:#fff}.tg[aria-pressed=true]::after{content:"ON"}
.viewer.wh{touch-action:none}
.howto{position:fixed;inset:0;z-index:60;background:var(--bg) radial-gradient(120% 80% at 50% 0%,#24205a 0%,var(--bg) 60%);display:flex;flex-direction:column;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);animation:hwIn .3s ease}
@keyframes hwIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.hw-top{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;max-width:560px;width:100%;margin:0 auto}
.hw-skip{background:none;color:var(--mut);font-size:15px;padding:8px}
.hw-track{flex:1;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;max-width:560px;width:100%;margin:0 auto}
.hw-track::-webkit-scrollbar{display:none}
.hw-card{flex:0 0 100%;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px 30px;gap:10px;overflow:auto}
.hw-emo{font-size:64px;width:120px;height:120px;border-radius:36px;display:grid;place-items:center;background:linear-gradient(135deg,#7c5cff33,#22d3ee33);border:1px solid #3b3290;box-shadow:0 10px 40px #7c5cff33;margin-bottom:8px}
.hw-n{color:var(--acc2);font-weight:700;font-size:13px;letter-spacing:1px}
.hw-card h2{margin:0;font-size:24px}.hw-card p{margin:0;color:#c7cdf0;font-size:16px;line-height:1.65;max-width:400px}
.hw-dots{display:flex;justify-content:center;gap:8px;padding:10px}
.hw-dots i{width:8px;height:8px;border-radius:8px;background:#3a4270;transition:all .25s;cursor:pointer}
.hw-dots i.on{width:24px;background:linear-gradient(90deg,var(--acc),var(--acc2))}
.hw-bot{padding:8px 20px 20px;max-width:560px;width:100%;margin:0 auto}
.chip.bye{white-space:nowrap;font-size:13px;padding:6px 10px}
/* scheduled chats */
.schs{display:flex;flex-direction:column;gap:6px;padding:8px 12px 0}
.sch{display:flex;flex-wrap:wrap;align-items:center;gap:6px;background:rgba(124,92,255,.14);border:1px solid rgba(124,92,255,.35);border-radius:14px;padding:8px 10px;font-size:14px}
.sch span{flex:1 1 160px}
#sdt{direction:ltr}

/* long text viewer fix: scroll inside, close always visible */
.viewer .bar{z-index:3}
.viewer .vt{max-height:calc(100vh - 150px - env(safe-area-inset-top) - env(safe-area-inset-bottom));max-height:calc(100dvh - 150px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;overflow-wrap:anywhere;word-break:break-word;width:100%;margin-top:calc(40px + env(safe-area-inset-top));touch-action:pan-y}
.viewer .vt.long{font-size:18px;text-align:start}
.viewer.wh .vt{touch-action:pan-y}
.msgs *{overflow-wrap:anywhere}
/* clear end-chat button in chat header */
.endc{flex:none;white-space:nowrap;font-size:13px;font-weight:600;padding:6px 12px;border-radius:18px;border:1.5px solid #ef4444;color:#ef4444;background:transparent}
.endc:active{background:#ef444422}
#toast.show{pointer-events:auto;cursor:pointer}
/* quick invite 👋 */
.friend .inv{margin-inline-start:auto;flex:none;width:42px;height:42px;border-radius:50%;border:1px solid rgba(124,92,255,.45);background:rgba(124,92,255,.14);font-size:20px;cursor:pointer;display:grid;place-items:center;padding:0}
.friend .inv:active{transform:scale(.92)}
.friend .badge+.inv{margin-inline-start:6px}
.invb{position:fixed;top:calc(env(safe-area-inset-top) + 10px);left:50%;transform:translateX(-50%);z-index:25;width:min(92%,460px);display:flex;align-items:center;gap:10px;background:linear-gradient(135deg,#7c5cff,#22d3ee);color:#fff;font-weight:700;padding:12px 14px;border-radius:16px;box-shadow:0 8px 28px #0008;cursor:pointer;animation:invIn .35s ease}
.invb span{flex:1}.invb .x{background:#0003;border:0;color:#fff;border-radius:50%;width:28px;height:28px;font-size:14px;cursor:pointer;flex:none}
@keyframes invIn{from{opacity:0;transform:translate(-50%,-14px)}to{opacity:1;transform:translate(-50%,0)}}
.getapp{display:flex;flex-direction:column;gap:6px;align-items:stretch;text-align:center;background:var(--card2);border-radius:14px;padding:10px 12px;margin-top:6px}.getapp .ga-t{font-weight:700;font-size:14px}.getapp .ga-b{display:block;text-decoration:none;text-align:center;padding:10px 14px;font-size:15px}.getapp small{font-size:12px;line-height:1.4}

/* 2026-10-17: whisper voice (hold to play) + confirm-before-send preview */
.viewer.whv{cursor:pointer;user-select:none;-webkit-user-select:none}.viewer.whv.rv>div[style]{transform:scale(1.15);transition:transform .2s}
.viewer.wh video{pointer-events:none}
.sheet.cfm img,.sheet.cfm video{box-shadow:0 8px 30px #0006}
.repb .btn{flex:none}
/* chat header (2026-10-17): long friend name / status stay on one line with "…", buttons never squeeze them into one word per line */
header #who{flex:1 1 auto;min-width:0;overflow:hidden}
header #who .fname,header #who .fsub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
header>.icon,header>.av,header>.endc{flex:none}
@media (max-width:430px){header{gap:6px;padding:12px 10px}header .av{width:38px;height:38px;font-size:16px}header>.icon{width:36px;height:36px;font-size:17px}
  header .endc{padding:5px 8px;font-size:12px;max-width:96px;overflow:hidden;text-overflow:ellipsis}}
.lsteps{margin:4px 0;padding-inline-start:22px;text-align:start;font-size:14px;line-height:1.5;color:var(--mut,#9aa3c0)}.lsteps li{margin:3px 0}
.lgw{position:relative;display:flex;align-items:center;gap:8px;width:100%}.lgw>span{font-size:20px}.lgw .sel{flex:1;padding-inline-end:36px;cursor:pointer}.lgw::after{content:"▾";position:absolute;inset-inline-end:14px;pointer-events:none;color:var(--mut);font-size:14px}.center>.lgw:first-child{max-width:260px;margin:0 auto 4px}.center>.lgw:first-child .sel{padding:8px 12px;padding-inline-end:36px;font-size:15px}.sheet .lgw .sel{padding:8px 12px;padding-inline-end:36px;font-size:14px}
.sheet>div{max-height:94vh;max-height:94dvh;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.lnkr .qr{width:170px}
.pend{margin:10px 12px 0;background:var(--card2);border:1px solid #2a335a;border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;gap:8px}.pendh{font-weight:700;font-size:15px}.prow{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:14px;color:var(--txt)}.prow>span:first-child{flex:1}.pbtns{display:flex;gap:6px;flex-shrink:0}

.whrow{display:flex;justify-content:center;padding:2px 12px 0}.whq{background:transparent;border:1px solid #2a3358;color:var(--mut,#9aa3c7);border-radius:999px;padding:4px 12px;font-size:13px;cursor:pointer}.whq::after{content:" OFF";font-weight:700}.whq[aria-pressed=true]{background:var(--acc);border-color:var(--acc);color:#fff}.whq[aria-pressed=true]::after{content:" ON"}

/* 2026-10-18 sendfix: compose stays during away/securing; reason shown in place, overlaying (no layout jump); sits above the whisper toggle so it stays reachable */
.comp.tx{position:relative}
.comp.tx .cnote{position:absolute;bottom:100%;inset-inline:10px;margin-bottom:40px;box-shadow:0 4px 14px #0008;background:#2a1530;color:#ffd0dc;border:1px solid #5a2a48;border-radius:12px;padding:7px 12px;font-size:13px;line-height:1.4;text-align:center;opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s;pointer-events:none;z-index:2}
.comp.tx .cnote.show{opacity:1;transform:none}
.comp.tx .cnote.flash{animation:cnf .5s}@keyframes cnf{30%{transform:translateX(-5px)}60%{transform:translateX(5px)}}
#snd[aria-disabled="true"]{opacity:.45}
#app.noted .msgs{padding-bottom:46px}
.comp.tx .icon:disabled{opacity:.45}

/* 2026-10-18 vclose: viewer above banners (.invb z25); big ✕ always reachable below the notch / Dynamic Island; custom video controls (no native fullscreen) */
.viewer{z-index:40}
.viewer .bar{top:max(14px,calc(8px + env(safe-area-inset-top)));z-index:5}
.viewer .vbtns{display:flex;gap:8px;align-items:center}
.viewer .vx{width:44px;height:44px;border-radius:50%;background:#ffffff2e;color:#fff;font-size:20px;line-height:44px;padding:0;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.viewer video{max-height:calc(100vh - 170px - env(safe-area-inset-top) - env(safe-area-inset-bottom));max-height:calc(100dvh - 170px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
.viewer video:has(~ .vpp){max-height:calc(100vh - 300px - env(safe-area-inset-top) - env(safe-area-inset-bottom));max-height:calc(100dvh - 300px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
.viewer .vpp{margin-top:14px;width:56px;height:56px;border-radius:50%;background:#ffffff26;color:#fff;font-size:22px;padding:0;display:flex;align-items:center;justify-content:center}
.viewer .vprog{width:min(90%,520px);height:18px;margin-top:10px;display:flex;align-items:center;cursor:pointer}
.viewer .vprog i{display:block;height:4px;width:0;background:#7c5cff;border-radius:2px}
.viewer .vprog{background:linear-gradient(#ffffff33,#ffffff33) center/100% 4px no-repeat}

/* 2026-10-18 noshot: blur chat content while the window is not focused / capture is on (best effort, browsers cannot block screenshots) */
body.shield .msgs,body.capturing .msgs,body.capturing .viewer>*:not(.bar):not(.vbot){filter:blur(18px);transition:filter .1s}
/* 2026-10-18 ttl + bottom close bar */
.ttq{background:transparent;border:1px solid #2a3358;color:var(--mut,#9aa3c7);border-radius:999px;padding:4px 12px;font-size:13px;cursor:pointer;margin-inline-start:8px}.ttq[aria-pressed=true]{background:var(--acc,#7c5cff);border-color:var(--acc,#7c5cff);color:#fff}
.ttlg{display:grid;grid-template-columns:1fr 1fr;gap:8px}.ttlg .btn:first-child{grid-column:1/-1}
.viewer .vbot{position:absolute;bottom:calc(18px + env(safe-area-inset-bottom));inset-inline:16px;display:flex;gap:10px;justify-content:center;align-items:center;z-index:2}
.viewer .vbot .close{flex:1;max-width:340px;min-height:50px;font-size:16px;font-weight:600}
.viewer .vbot .vx{width:50px;height:50px}
.viewer .wtip{bottom:calc(82px + env(safe-area-inset-bottom))}
.viewer .vttl{background:#ffffff1f;border-radius:999px;padding:4px 12px;color:#fff;font-variant-numeric:tabular-nums}
.viewer.ttlend .vttl{background:#ff4d6d;animation:ttlp 1s infinite}@keyframes ttlp{50%{opacity:.6}}
.viewer.hasttl,.viewer{padding-bottom:calc(90px + env(safe-area-inset-bottom))}
/* 2026-10-18 voice calls */
.callbtn{font-size:18px}
.callui{position:fixed;inset:0;z-index:40;background:linear-gradient(160deg,#141033,#0b0f1e 70%);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:calc(env(safe-area-inset-top) + 40px) 24px calc(env(safe-area-inset-bottom) + 40px);color:#fff;animation:callin .25s ease}
@keyframes callin{from{opacity:0}to{opacity:1}}
.callui.ring .callav{animation:callpulse 1.3s infinite}
@keyframes callpulse{0%{box-shadow:0 0 0 0 #7c5cff88}70%{box-shadow:0 0 0 26px #7c5cff00}100%{box-shadow:0 0 0 0 #7c5cff00}}
.callhead{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:8vh}
.callav{width:120px;height:120px;border-radius:50%;background:linear-gradient(135deg,#7c5cff,#22d3ee);display:flex;align-items:center;justify-content:center;font-size:52px;font-weight:700;color:#fff}
.callname{font-size:26px;font-weight:700}
.callsub,.calls{font-size:16px;color:#aab}
.callt{font-size:22px;font-variant-numeric:tabular-nums;color:#cfe}
.calle2e{margin-top:10px;font-size:13px;color:#8ad;background:#ffffff14;padding:6px 14px;border-radius:999px}
.callbtns{display:flex;gap:28px;align-items:center;justify-content:center;width:100%;max-width:420px}
.cbtn{width:70px;height:70px;border-radius:50%;border:0;font-size:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff}
.cbtn.accept{background:#22c55e}.cbtn.decline,.cbtn.hang{background:#ef4444}
.cbtn.tog{background:#ffffff22}.cbtn.tog.on{background:#7c5cff}
.cbtn:active{transform:scale(.92)}
/* 2026-10-18 privacy screen */
.privscr{position:fixed;inset:0;z-index:45;background:rgba(8,10,22,.72);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:20px;animation:privfade .2s ease}
@keyframes privfade{from{opacity:0}to{opacity:1}}
.privcard{width:100%;max-width:440px;background:linear-gradient(170deg,#171433,#0e1226);border:1px solid #ffffff14;border-radius:24px;padding:26px 22px calc(env(safe-area-inset-bottom) + 22px);box-shadow:0 20px 60px #0008;animation:privup .28s cubic-bezier(.2,.8,.2,1)}
@keyframes privup{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
.privhero{position:relative;height:96px;display:flex;align-items:center;justify-content:center;margin-bottom:6px}
.privshield{font-size:62px;z-index:1;animation:privpulse 2.6s ease-in-out infinite}
@keyframes privpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.privglow{position:absolute;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,#7c5cff66,transparent 68%);animation:privglow 2.6s ease-in-out infinite}
@keyframes privglow{0%,100%{opacity:.5;transform:scale(.9)}50%{opacity:1;transform:scale(1.15)}}
.privttl{text-align:center;font-size:22px;font-weight:800;color:#fff;margin:4px 0 18px}
.privrows{display:flex;flex-direction:column;gap:12px;margin-bottom:22px}
.privrow{display:flex;align-items:center;gap:14px;background:#ffffff0a;border:1px solid #ffffff10;border-radius:16px;padding:13px 14px;opacity:0;animation:privrow .4s ease forwards}
@keyframes privrow{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
.privic{font-size:26px;flex:0 0 auto;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:#7c5cff22;border-radius:12px}
.privtx{font-size:15px;line-height:1.4;color:#dfe3f2}
.privcard .btn{width:100%}
/* 2026-10-18 auto-growing textarea composer (grows upward; bar stays anchored at bottom) */
.comp.tx{align-items:flex-end}
.comp textarea#tx{flex:1;resize:none;line-height:20px;max-height:120px;overflow-y:hidden;min-height:0;scrollbar-width:thin}
.comp.tx .icon{flex:0 0 auto}
.cbw{display:flex;flex-direction:column;align-items:center;gap:6px}.cbl{font-size:12px;color:#ffffffcc}
.icon.callbtn{background:#22c55e;color:#fff}