/* Telegram + Apple look: frosted glass, gradients, springy motion. Loaded after the base styles in index.html. */
:root {
  --bg:#f2f2f7; --side:rgba(255,255,255,.72); --card:rgba(255,255,255,.94); --line:rgba(60,60,67,.14);
  --theirs:rgba(255,255,255,.95); --text:#111; --muted:#8e8e93; --blue:#2f8bf0; --dot-border:#fff;
  --chatbg:linear-gradient(160deg,#d6e6ff 0%,#e4ecff 40%,#eaf5e4 100%);
  --hover:rgba(120,120,128,.12); --shadow:0 1px 2px rgba(0,0,0,.06),0 6px 18px rgba(0,0,0,.06);
  --spring:cubic-bezier(.2,.9,.25,1.15); --smooth:cubic-bezier(.2,.8,.2,1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#000; --side:rgba(28,28,30,.72); --card:rgba(44,44,46,.94); --line:rgba(84,84,88,.45);
    --theirs:rgba(44,44,46,.95); --text:#f5f5f7; --muted:#98989f; --dot-border:#1c1c1e;
    --chatbg:linear-gradient(160deg,#0b1524 0%,#101b2e 50%,#15122a 100%);
    --hover:rgba(235,235,245,.1); --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
  }
}
html { -webkit-font-smoothing:antialiased; }
body {
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI Variable','Segoe UI',Roboto,'Noto Color Emoji',sans-serif;
  background:
    radial-gradient(900px 520px at 8% -8%, rgba(120,180,255,.45), transparent 60%),
    radial-gradient(800px 480px at 100% 0%, rgba(190,160,255,.35), transparent 55%),
    var(--bg);
  background-attachment:fixed;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body { background:
    radial-gradient(900px 520px at 8% -8%, rgba(30,90,190,.4), transparent 60%),
    radial-gradient(800px 480px at 100% 0%, rgba(110,60,190,.3), transparent 55%), var(--bg); background-attachment:fixed; }
}
* { scrollbar-width:thin; scrollbar-color:rgba(128,128,128,.35) transparent; }

/* ---- sidebar ---- */
#side { background:var(--side); -webkit-backdrop-filter:blur(28px) saturate(180%); backdrop-filter:blur(28px) saturate(180%); border-right:1px solid var(--line); }
#side header { padding:14px 14px 8px; gap:10px; }
#search {
  padding:11px 16px 11px 40px; border-radius:14px; font-size:15px; background-color:var(--hover);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7.5'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:14px center; color:var(--text);
  transition:box-shadow .25s var(--smooth), background-color .25s, transform .25s var(--spring);
}
#search::placeholder { color:var(--muted); }
#search:focus { background-color:var(--card); box-shadow:0 0 0 2px var(--blue), 0 6px 20px rgba(47,139,240,.18); transform:scale(1.015); }
#newGroup { background:var(--hover); border-radius:14px; width:44px; height:44px; color:var(--blue); transition:transform .2s var(--spring), background .2s; }
#newGroup:hover { transform:scale(1.08) rotate(-4deg); background:rgba(47,139,240,.16); }
#newGroup:active { transform:scale(.92); }

#list { padding:4px 0 12px; }
.row {
  position:relative; margin:2px 8px; padding:10px 12px; border-radius:16px; gap:13px;
  transition:background .2s, transform .25s var(--spring), box-shadow .25s, color .2s;
}
.row:hover { background:var(--hover); transform:translateX(2px); }
.row:active { transform:scale(.975); background:var(--hover); }
.row.active, .row.active:hover {
  background:linear-gradient(135deg,#3da2ff,#2f7ff0); color:#fff; transform:none;
  box-shadow:0 8px 22px rgba(47,127,240,.38);
}
.row.active .last, .row.active .time { color:rgba(255,255,255,.82); }
.row.active .badge { background:#fff; color:#2f7ff0; }
.row.active .avatar.on::after { border-color:#2f7ff0; }
.row.enter { animation:rowIn .5s var(--spring) both; animation-delay:calc(min(var(--i,0),9) * 45ms); }
@keyframes rowIn { from { opacity:0; transform:translateY(14px) scale(.96); } to { opacity:1; transform:none; } }
.name { font-size:15.5px; letter-spacing:-.01em; }
.last { font-size:14px; }
.time { font-size:12px; font-variant-numeric:tabular-nums; }
.badge {
  background:linear-gradient(135deg,#3da2ff,#2f7ff0); box-shadow:0 2px 8px rgba(47,127,240,.4);
  font-weight:600; line-height:22px; min-width:22px; padding:0 7px;
}
.badge.pop { animation:pop .5s var(--spring); }
@keyframes pop { 0% { transform:scale(.3); opacity:0; } 60% { transform:scale(1.25); } 100% { transform:scale(1); opacity:1; } }

.avatar { background-image:none; box-shadow:0 2px 8px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.18); transition:transform .3s var(--spring); }
.row:hover .avatar { transform:scale(1.06); }
.avatar.on::after { background:#34c759; border-color:var(--dot-border); animation:presence 2.4s ease-in-out infinite; }
@keyframes presence { 0%,100% { box-shadow:0 0 0 0 rgba(52,199,89,.55); } 50% { box-shadow:0 0 0 5px rgba(52,199,89,0); } }

/* ---- conversation ---- */
#main { background:var(--chatbg); }
#chat.swap { animation:none; }
@keyframes chatIn { from { opacity:0; transform:translateX(18px); } to { opacity:1; transform:none; } }
#chat header, #form { background:var(--side); -webkit-backdrop-filter:blur(28px) saturate(180%); backdrop-filter:blur(28px) saturate(180%); }
#chat header { border-bottom:1px solid var(--line); }
#form { border-top:1px solid var(--line); padding:10px 14px; }
#text { background:var(--hover); color:var(--text); transition:box-shadow .25s, background .25s; }
#text:focus { background:var(--card); box-shadow:0 0 0 2px var(--blue); }
#send { background:linear-gradient(135deg,#3da2ff,#2f7ff0); box-shadow:0 4px 14px rgba(47,127,240,.45); transition:transform .2s var(--spring); }
#send:not(.hidden) { animation:pop .35s var(--spring); }
#send:hover { transform:scale(1.08); }
#send:active { transform:scale(.9); }
.icon:active { transform:scale(.88); }

.msg { border-radius:18px 18px 18px 6px; padding:8px 12px 5px; box-shadow:var(--shadow); background:var(--theirs); }
.msg.mine { border-radius:18px 18px 6px 18px; background:linear-gradient(135deg,#3da2ff,#2f7ff0); color:#fff; }
.msg.mine small { color:rgba(255,255,255,.75); }
.msg.note { background:none; box-shadow:none; }
.msg.enter { animation:msgIn .38s var(--spring) both; transform-origin:bottom left; }
.msg.mine.enter { transform-origin:bottom right; }
@keyframes msgIn { from { opacity:0; transform:translateY(12px) scale(.9); } to { opacity:1; transform:none; } }

/* ---- voice message (Telegram-style) ---- */
.vm { display:flex; align-items:center; gap:11px; width:250px; max-width:100%; padding:3px 2px 1px; white-space:normal; }
.vm-play {
  width:46px; height:46px; flex:none; border:0; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#3da2ff,#2f7ff0); color:#fff; box-shadow:0 4px 12px rgba(47,127,240,.35);
  transition:transform .2s var(--spring);
}
.vm-play:hover { transform:scale(1.07); }
.vm-play:active { transform:scale(.9); }
.vm.playing .vm-play { animation:vmPulse 1.6s ease-in-out infinite; }
@keyframes vmPulse { 0%,100% { box-shadow:0 0 0 0 rgba(47,127,240,.45); } 50% { box-shadow:0 0 0 7px rgba(47,127,240,0); } }
.msg.mine .vm-play { background:#fff; color:#2f7ff0; box-shadow:0 4px 12px rgba(0,0,0,.15); }
.msg.mine .vm.playing .vm-play { animation-name:vmPulseW; }
@keyframes vmPulseW { 0%,100% { box-shadow:0 0 0 0 rgba(255,255,255,.55); } 50% { box-shadow:0 0 0 7px rgba(255,255,255,0); } }
.vm-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.vm-wave { display:flex; align-items:center; gap:2px; height:26px; cursor:pointer; }
.vm-wave i { flex:1; min-width:2px; max-width:3px; border-radius:2px; background:rgba(120,120,128,.38); transition:background .12s; }
.vm-wave i.on { background:var(--blue); }
.msg.mine .vm-wave i { background:rgba(255,255,255,.42); }
.msg.mine .vm-wave i.on { background:#fff; }
.vm-meta { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
.msg.mine .vm-meta { color:rgba(255,255,255,.85); }
.vm-speed { display:none; border:0; border-radius:8px; padding:0 6px; font-size:11px; font-weight:700; line-height:18px; background:rgba(120,120,128,.18); color:inherit; }
.vm.playing .vm-speed { display:inline-block; animation:pop .3s var(--spring); }
.msg.mine .vm-speed { background:rgba(255,255,255,.25); }

/* ---- login (Telegram-style: clean page, round logo, outlined fields) ---- */
#auth {
  position:fixed; inset:0; overflow:auto; padding:24px 16px; display:flex; align-items:center; justify-content:center;
  background:#fff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #auth { background:#1c1c1e; }
}
#auth .auth-card {
  width:min(392px,100%); background:none; padding:8px 0 18px; text-align:center;
  display:flex; flex-direction:column; align-items:stretch; gap:14px; box-shadow:none;
  animation:sheetIn .5s var(--spring) both;
}
.auth-logo { margin:0 auto 14px; width:112px; height:112px; border-radius:26px; overflow:hidden; }
.auth-logo img { width:100%; height:100%; display:block; object-fit:contain; }
.qr-box { width:240px; height:240px; margin:0 auto; border-radius:22px; background:#edf4ff; padding:18px; display:flex; align-items:center; justify-content:center; }
#qr { width:100%; height:100%; }
#qr svg { width:100%; height:100%; display:block; }
#qr svg .qr-dots { animation:fade .5s ease both; }
.qr-loading { border-radius:12px; background:linear-gradient(90deg,#dfe9f7 0%,#f4f8ff 50%,#dfe9f7 100%); background-size:200% 100%; animation:shimmer 1.2s linear infinite; }
@keyframes shimmer { to { background-position:-200% 0; } }
.qr-code-line { font-size:13px; color:var(--muted); letter-spacing:.5px; }
.qr-code-line b { color:var(--text); font-family:ui-monospace,Consolas,monospace; font-size:15px; letter-spacing:2px; }
.auth-h { margin:6px 0 0; font-size:23px; font-weight:600; letter-spacing:-.01em; }
.auth-sub { margin:0; color:var(--muted); font-size:15px; }
.steps { list-style:none; counter-reset:step; padding:0; margin:12px 0 6px; text-align:left; display:flex; flex-direction:column; gap:12px; font-size:15px; }
.steps li { counter-increment:step; display:flex; gap:12px; align-items:flex-start; line-height:1.4; }
.steps li::before { content:counter(step); flex:none; width:22px; height:22px; border-radius:50%; background:#e6f0fd; color:var(--blue); font-size:12px; font-weight:600; display:flex; align-items:center; justify-content:center; margin-top:1px; }
.chev { color:var(--muted); font-weight:400; }
.auth-link { background:none; border:0; color:var(--blue); font-size:14.5px; font-weight:500; letter-spacing:.3px; padding:12px; border-radius:12px; transition:background .2s; }
.auth-link:hover { background:rgba(47,139,240,.08); }
.auth-link .chev { color:var(--blue); margin:0 2px; }
.qr-err { color:#e53935; font-size:13px; min-height:0; }
.google-btn { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; margin-top:6px; padding:12px 16px; border-radius:12px; border:1px solid var(--line); background:#fff; color:#1f1f1f; font-size:15px; font-weight:600; cursor:pointer; transition:background .2s, box-shadow .2s; }
.google-btn:hover { background:#f6f8fb; box-shadow:0 1px 4px rgba(0,0,0,.08); }
#authForm .primary { padding:15px; border-radius:12px; background:var(--blue); font-size:15px; font-weight:600; letter-spacing:.5px; box-shadow:none; }
#authForm .auth-h { margin-top:0; }
#authForm .auth-sub { margin-bottom:10px; }
#authForm #authMail { color:var(--text); font-weight:500; }
#authForm #err { color:#e53935; font-size:13px; }
#authForm #err:empty { display:none; }
#qrView .auth-h { margin-top:0; }
#qrView .auth-sub { margin-bottom:8px; }
#qrView .qr-err:empty { display:none; }

/* outlined field with the label sitting on its border */
.fld { position:relative; border:1px solid var(--line); border-radius:12px; text-align:left; transition:border-color .2s, box-shadow .2s; }
.fld label { position:absolute; top:-9px; left:12px; padding:0 5px; background:#fff; color:var(--muted); font-size:12.5px; line-height:16px; transition:color .2s; pointer-events:none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fld label { background:#1c1c1e; } }
.fld:focus-within { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }
.fld:focus-within label { color:var(--blue); }
#authForm select { width:100%; padding:17px 44px 15px 16px; border:0; background:none; color:var(--text); font:inherit; font-size:16px; appearance:none; -webkit-appearance:none; border-radius:12px; cursor:pointer; }
#authForm select:focus { outline:none; }
#authForm select option { color:#111; background:#fff; }
.fld-chev { position:absolute; right:14px; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none; transition:transform .25s var(--spring); }
.fld-sel:focus-within .fld-chev { transform:translateY(-50%) rotate(180deg); }

/* phone: a real (invisible) digit input sits on top of the grouped view */
.fld-phone { min-height:56px; cursor:text; }
#authForm .ph-real { position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; background:none; opacity:0; font-size:16px; cursor:text; }
#authForm .ph-real:focus { outline:none; box-shadow:none; }
.ph-view { padding:18px 16px 16px; font-size:17px; line-height:22px; display:flex; flex-wrap:wrap; align-items:center; gap:0 7px; font-variant-numeric:tabular-nums; min-height:56px; box-sizing:border-box; }
.ph-code { font-weight:500; margin-right:2px; }
.ph-g { display:inline-flex; align-items:center; color:var(--muted); transition:color .25s; }
.ph-g i { font-style:normal; opacity:.55; }
.ph-g b { font-weight:500; color:var(--text); }
.ph-g s { text-decoration:none; opacity:.55; letter-spacing:1px; }

/* login polish: soft background, one raised card, bigger Google button */
#auth {
  --auth-card:#fff;
  background:radial-gradient(900px 500px at 12% -10%, #d6e8ff, transparent 60%), radial-gradient(800px 480px at 100% 100%, #e4dbff, transparent 55%), #f3f6fb;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #auth {
    --auth-card:#2c2c2e;
    background:radial-gradient(900px 500px at 12% -10%, rgba(30,90,190,.38), transparent 60%), radial-gradient(800px 480px at 100% 100%, rgba(110,60,190,.28), transparent 55%), #0f1115;
  }
}
:root[data-theme="dark"] #auth { --auth-card:#2c2c2e; }
#auth .auth-card { width:min(400px,100%); padding:34px 28px 18px; background:var(--auth-card); border-radius:26px; gap:12px; box-shadow:0 1px 2px rgba(0,0,0,.05), 0 20px 50px rgba(30,60,120,.16); }
#auth .auth-logo { width:92px; height:92px; margin:0 auto 8px; border-radius:22px; box-shadow:0 8px 22px rgba(28,138,220,.3); }
#auth .auth-h { font-size:22px; line-height:1.25; }
#auth .auth-sub { font-size:14.5px; line-height:1.45; }
#auth .fld label { background:var(--auth-card); }
#auth .google-btn { margin-top:12px; padding:14px 16px; border-radius:14px; box-shadow:0 1px 2px rgba(0,0,0,.06); transition:background .2s, box-shadow .2s, transform .2s var(--spring); }
#auth .google-btn:hover { transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.12); }
#auth .google-btn:active { transform:scale(.98); }
#auth #langBtn { align-self:center; margin-top:6px; padding:7px 16px; border:1px solid var(--line); font-size:13.5px; border-radius:20px; }
@media (max-width:420px) { #auth .auth-card { padding:26px 20px 14px; border-radius:22px; } }

/* ---- login: drifting colour blobs, floating logo, staggered entrance ---- */
#auth::before, #auth::after { content:''; position:fixed; border-radius:50%; filter:blur(70px); opacity:.55; pointer-events:none; }
#auth::before { width:380px; height:380px; left:-90px; top:-70px; background:#7db8ff; animation:blobA 14s ease-in-out infinite alternate; }
#auth::after { width:420px; height:420px; right:-110px; bottom:-100px; background:#b79cff; animation:blobB 17s ease-in-out infinite alternate; }
@keyframes blobA { to { transform:translate(120px,90px) scale(1.15); } }
@keyframes blobB { to { transform:translate(-110px,-80px) scale(1.2); } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #auth::before, :root:not([data-theme="light"]) #auth::after { opacity:.28; } }
:root[data-theme="dark"] #auth::before, :root[data-theme="dark"] #auth::after { opacity:.28; }
#auth .auth-card { position:relative; z-index:1; }
#auth .auth-logo { animation:logoFloat 4.5s ease-in-out infinite; }
@keyframes logoFloat { 50% { transform:translateY(-6px); } }
@keyframes riseIn { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
#qrView > *, #authForm > * { animation:riseIn .6s var(--spring) both; }
#qrView > :nth-child(2), #authForm > :nth-child(2) { animation-delay:.07s; }
#qrView > :nth-child(3), #authForm > :nth-child(3) { animation-delay:.14s; }
#qrView > :nth-child(4), #authForm > :nth-child(4) { animation-delay:.21s; }
#qrView > :nth-child(5), #authForm > :nth-child(5) { animation-delay:.28s; }
#authForm > :nth-child(6) { animation-delay:.35s; }
#authForm > :nth-child(7) { animation-delay:.42s; }
#authForm > :nth-child(8) { animation-delay:.49s; }
#authForm > :nth-child(9) { animation-delay:.56s; }
#auth .google-btn { position:relative; overflow:hidden; }
#auth .google-btn::after { content:''; position:absolute; inset:0; background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.75) 50%, transparent 65%); transform:translateX(-120%); animation:shine 3.8s ease-in-out 1.2s infinite; pointer-events:none; }
@keyframes shine { 0%, 60% { transform:translateX(-120%); } 100% { transform:translateX(120%); } }

/* ---- after Google: phone step ---- */
.sgn-steps { display:flex; align-items:center; justify-content:center; gap:0; margin:0 auto 2px; }
.sgn-steps .st i { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; font-style:normal; font-size:13px; font-weight:700; background:var(--hover); color:var(--muted); }
.sgn-steps .st.done i { background:#34c759; color:#fff; animation:pop .55s var(--spring) .2s both; }
.sgn-steps .st.on i { background:var(--blue); color:#fff; box-shadow:0 0 0 0 rgba(51,144,236,.5); animation:ping 2s ease-out 1s infinite; }
.sgn-steps .stline { width:64px; height:3px; margin:0 8px; border-radius:2px; background:var(--hover); position:relative; overflow:hidden; }
.sgn-steps .stline::after { content:''; position:absolute; inset:0; background:#34c759; transform-origin:left; animation:lineFill .8s var(--smooth) .35s both; }
@keyframes lineFill { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes ping { 0% { box-shadow:0 0 0 0 rgba(51,144,236,.45); } 70%, 100% { box-shadow:0 0 0 10px rgba(51,144,236,0); } }
.acc-chip { display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:16px; background:var(--hover); text-align:left; }
.acc-ava { flex:none; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:18px; color:#fff; background:linear-gradient(135deg,#3da2ff,#7a6cff) center / cover no-repeat; box-shadow:0 3px 10px rgba(0,0,0,.2); }
.acc-ava[style*="url"] { color:transparent; }
.acc-t { flex:1; min-width:0; display:flex; flex-direction:column; }
.acc-t b { font-size:15px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.acc-t small { color:var(--muted); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.acc-ok { flex:none; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; background:#34c759; color:#fff; font-size:12px; font-weight:700; animation:pop .55s var(--spring) .5s both; }
#authForm .auth-h { font-size:25px; }
#authForm .primary { transition:opacity .3s, transform .2s var(--spring), box-shadow .3s, background .3s; opacity:.6; }
#authForm.ready .primary { opacity:1; background:linear-gradient(135deg,#3da2ff,#2f7ff0); box-shadow:0 8px 22px rgba(47,127,240,.45); animation:readyPulse 1.8s ease-in-out infinite; }
@keyframes readyPulse { 50% { transform:scale(1.025); } }
#authForm.shake { animation:shake .45s; }
@keyframes shake { 20%, 60% { transform:translateX(-8px); } 40%, 80% { transform:translateX(8px); } }
.fld-phone:focus-within { animation:fieldGlow 1.6s ease-in-out infinite; }
@keyframes fieldGlow { 50% { box-shadow:0 0 0 1px var(--blue), 0 0 18px rgba(51,144,236,.35); } }
/* ---- login: stronger look ---- */
#auth .auth-card {
  border:1.5px solid transparent;
  background:linear-gradient(var(--auth-card), var(--auth-card)) padding-box, linear-gradient(120deg,#6db3ff,#b79cff,#ff9ecb,#6db3ff) border-box;
  background-size:100% 100%, 300% 300%;
  animation:sheetIn .5s var(--spring) both, borderFlow 8s linear infinite;
  box-shadow:0 2px 4px rgba(0,0,0,.05), 0 30px 70px rgba(60,80,200,.22);
}
@keyframes borderFlow { to { background-position:0 0, 300% 0; } }
#auth #authForm.shake { animation:shake .45s, borderFlow 8s linear infinite; }
#qrView .auth-h { font-size:25px; font-weight:700; background:linear-gradient(90deg,var(--text) 30%,#3390ec); -webkit-background-clip:text; background-clip:text; color:transparent; }
#auth .auth-logo { width:100px; height:100px; border-radius:26px; animation:logoFloat 4.5s ease-in-out infinite, logoGlow 3s ease-in-out infinite; }
@keyframes logoGlow { 0%, 100% { box-shadow:0 8px 22px rgba(28,138,220,.3); } 50% { box-shadow:0 12px 40px rgba(28,138,220,.6), 0 0 0 8px rgba(28,138,220,.08); } }
#auth .google-btn { margin-top:14px; padding:15px 18px; border-radius:16px; font-size:16px; border:1.5px solid var(--line); }
#auth .google-btn:hover { border-color:var(--blue); }
#auth .google-btn svg { width:22px; height:22px; }
#authForm .acc-chip { background:linear-gradient(135deg, rgba(61,162,255,.14), rgba(122,108,255,.14)); }
#authForm .fld { transition:border-color .2s, box-shadow .2s, transform .25s var(--spring); }
#authForm .fld:focus-within { transform:translateY(-1px); }
/* ---- login: split layout (picture on the left, sign-in on the right) over a sky ---- */
#auth { flex-direction:row; align-items:stretch; padding:0; background:linear-gradient(180deg,#6fb2f2 0%,#a9d3fb 55%,#dcedff 100%); }
#auth::before, #auth::after { background:#fff; opacity:.7; filter:blur(55px); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body #auth { background:linear-gradient(180deg,#0a1630 0%,#142a50 60%,#1c3a64 100%); }
  :root:not([data-theme="light"]) #auth::before, :root:not([data-theme="light"]) #auth::after { opacity:.1; }
}
:root[data-theme="dark"] body #auth { background:linear-gradient(180deg,#0a1630 0%,#142a50 60%,#1c3a64 100%); }
:root[data-theme="dark"] #auth::before, :root[data-theme="dark"] #auth::after { opacity:.1; }
.auth-shell { position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; width:100%; min-height:100vh; margin:0; padding:14px; gap:14px; border-radius:0; background:var(--auth-card); box-shadow:none; animation:shellIn .7s var(--spring) both; }
@keyframes shellIn { from { opacity:0; transform:translateY(24px) scale(.97); } to { opacity:1; transform:none; } }
.auth-art { position:relative; min-height:440px; border-radius:20px; overflow:hidden; background:#9cc9f3; }
.auth-art img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; user-select:none; pointer-events:none; }

/* full screen shell; the picture is inset with rounded corners on all four sides */
#auth .auth-shell { min-height:100vh; min-height:100dvh; height:100%; padding:14px; gap:0; box-sizing:border-box; }
#auth .auth-art { border-radius:24px; min-height:100%; }
.auth-side { display:flex; align-items:center; justify-content:center; padding:20px 30px; }
#auth .auth-side .auth-card { width:100%; max-width:360px; padding:0; border:0; border-radius:0; background:none; box-shadow:none; animation:none; }
#auth .auth-logo { width:56px; height:56px; border-radius:14px; margin:0 auto 4px; animation:none; box-shadow:0 4px 12px rgba(0,0,0,.18); }
#qrView .auth-h { background:none; color:var(--text); text-transform:uppercase; font-size:27px; font-weight:800; letter-spacing:.01em; white-space:nowrap; margin-bottom:8px; }
#authForm .auth-h { text-transform:none; }
#auth .google-btn { background:#0b0b0c; color:#fff; border:0; border-radius:12px; padding:15px 18px; font-size:15.5px; box-shadow:0 8px 20px rgba(0,0,0,.22); }
#auth .google-btn:hover { background:#1c1c1e; box-shadow:0 12px 26px rgba(0,0,0,.32); }
#auth .google-btn svg { box-sizing:content-box; width:20px; height:20px; padding:3px; border-radius:50%; background:#fff; }
:root[data-theme="dark"] #auth .google-btn { background:#fff; color:#111; }
:root[data-theme="dark"] #auth .google-btn:hover { background:#f1f1f3; }
#authForm:not(.ready) .primary { background:#0b0b0c; border-radius:12px; }
:root[data-theme="dark"] #authForm:not(.ready) .primary { background:#fff; color:#111; }
/* "or" divider + phone sign-in button + SMS code form */
.auth-or { display:flex; align-items:center; gap:12px; margin:2px 0; color:var(--muted); font-size:13px; }
.auth-or::before, .auth-or::after { content:''; flex:1; height:1px; background:var(--line); }
#auth .phone-btn { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:14px 18px; border:1.5px solid var(--line); border-radius:12px; background:transparent; color:var(--text); font-size:15.5px; font-weight:600; cursor:pointer; transition:border-color .2s, background .2s, transform .2s var(--spring); }
#auth .phone-btn:hover { border-color:var(--blue); background:rgba(51,144,236,.07); }
#auth .phone-btn:active { transform:scale(.98); }
#codeForm > * { animation:riseIn .6s var(--spring) both; }
#codeForm .auth-h { font-size:25px; }
#codeForm .auth-sub b { color:var(--text); font-weight:600; }
.code-in { width:100%; padding:17px 16px 15px; border:0; background:none; color:var(--text); font-size:26px; font-weight:600; letter-spacing:10px; text-align:center; font-variant-numeric:tabular-nums; outline:none; }
#codeForm .primary { padding:15px; border-radius:12px; background:#0b0b0c; color:#fff; font-size:15px; font-weight:600; letter-spacing:.5px; box-shadow:none; }
:root[data-theme="dark"] #codeForm .primary { background:#fff; color:#111; }
#codeErr, #authForm #err { color:#e53935; font-size:13px; }
#codeErr:empty { display:none; }
#auth #codeForm.shake { animation:shake .45s; }
#resendBtn:disabled { color:var(--muted); cursor:default; }
#resendBtn:disabled:hover { background:none; }
@media (max-width:860px) {
  #auth { padding:0; }
  #auth .auth-shell { grid-template-columns:1fr; grid-template-rows:auto 1fr; padding:10px; }
  #auth .auth-art { min-height:0; height:270px; border-radius:22px; }
  .auth-side { padding:16px 8px 12px; }
}
/* phone: full-screen picture, sign-in card centred on top */
@media (max-width:860px) {
  #auth, :root[data-theme="dark"] body #auth, :root:not([data-theme="light"]) body #auth {
    background:linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.28) 40%, rgba(0,0,0,.62) 100%), #2a4d63 url(img/art-m.jpg) center top / cover no-repeat;
    min-height:100dvh;
  }
  #auth .auth-logo { width:76px; height:76px; border-radius:20px; margin-bottom:10px; box-shadow:0 10px 28px rgba(0,0,0,.4); }
  #auth #qrView .auth-h { font-size:25px; letter-spacing:.04em; margin-bottom:18px; }
  #auth .google-btn, #auth .phone-btn { padding:17px 8px; font-weight:700; }
  #auth .google-btn { background:#fff; color:#111; }
  #auth .google-btn:hover { background:#f1f1f3; }
  #auth .phone-btn { background:rgba(255,255,255,.16); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1.5px solid rgba(255,255,255,.7); border-left:0; }
  #auth .phone-btn:hover { background:rgba(255,255,255,.26); }
  #auth::before, #auth::after { display:none; }
  #auth .auth-shell { display:flex; align-items:center; justify-content:center; background:none; padding:20px 16px; }
  #auth .auth-art { display:none; }
  #auth .auth-side { padding:0; width:100%; flex:none; max-width:380px; }
  #auth .auth-side .auth-card { padding:28px 22px 24px; background:none !important; -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none; }
  #auth #qrView .auth-h, #auth .auth-or { color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.6); }
  #auth .auth-or::before, #auth .auth-or::after { background:rgba(255,255,255,.6); }
  #auth .phone-btn { color:#fff; border-color:rgba(255,255,255,.8); background:rgba(0,0,0,.25); }
  #auth .phone-btn:hover { background:rgba(0,0,0,.4); border-color:#fff; }
  /* both sign-in buttons joined into one block */
  #auth .auth-or { display:none; }
  /* ...side by side (left / right) */
  #auth .auth-side { max-width:420px; }
  #auth #qrView { display:grid; grid-template-columns:1fr 1fr; column-gap:0; row-gap:12px; }
  #auth #qrView > :not(.google-btn):not(.phone-btn) { grid-column:1 / -1; }
  #auth .google-btn, #auth .phone-btn { margin:6px 0 0; gap:7px; padding:15px 8px; font-size:14px; white-space:nowrap; }
  #auth .google-btn { border-radius:14px 0 0 14px; box-shadow:none; background:#fff; color:#111; }
  #auth .google-btn:hover { background:#f1f1f3; }
  #auth .phone-btn { border-radius:0 14px 14px 0; }
  /* identical look for both buttons: solid white, one shared card with a hairline between */
  #auth .google-btn, #auth .phone-btn, :root[data-theme="dark"] #auth .google-btn {
    background:#fff; color:#111; border:0; font-size:13.5px; font-weight:700; letter-spacing:.01em; padding:18px 6px; gap:8px;
    box-shadow:0 10px 28px rgba(0,0,0,.35); -webkit-backdrop-filter:none; backdrop-filter:none;
  }
  /* ...but as two separate buttons with a gap */
  #auth #qrView { column-gap:10px; }
  #auth .google-btn, #auth .phone-btn { border-radius:14px; }
  #auth .google-btn:hover, #auth .phone-btn:hover, :root[data-theme="dark"] #auth .google-btn:hover { background:#f3f5f8; transform:none; }
  #auth .google-btn:active, #auth .phone-btn:active { background:#e9edf2; }
  #auth .google-btn svg { width:20px; height:20px; padding:0; background:none; border-radius:0; flex:none; display:block; box-sizing:border-box; }
  #auth .phone-btn svg { width:20px; height:20px; color:#111; flex:none; }
  #auth .google-btn::after { display:none; }
  /* labels: centred, wrap to a second line instead of being cut off */
  #auth .auth-side .auth-card#qrView { max-width:none; width:100%; }
  #auth .google-btn, #auth .phone-btn { white-space:nowrap; text-align:center; line-height:1; min-height:56px; padding:0 8px; gap:8px; font-size:clamp(11.5px, 3.5vw, 14px); }
  #auth .google-btn span, #auth .phone-btn span { display:block; min-width:0; white-space:nowrap; }
  #auth .google-btn svg, #auth .phone-btn svg { width:22px; height:22px; flex:none; }
  #auth .phone-btn svg { stroke-width:1.8; }
}
@media (prefers-reduced-motion: reduce) { #auth *, #auth::before, #auth::after { animation:none !important; } }
.ph-g.on { color:var(--text); }
.ph-g.on i { opacity:1; color:var(--blue); }
.ph-g.pop { animation:phPop .45s var(--spring) both; }
@keyframes phPop { 0% { opacity:0; transform:translateY(8px) scale(.7); } 100% { opacity:1; transform:none; } }
.ph-caret { display:none; width:2px; height:22px; margin:0 1px; background:var(--blue); border-radius:1px; text-decoration:none; }
.fld-phone:focus-within .ph-caret { display:inline-block; animation:phBlink 1s steps(1) infinite; }
@keyframes phBlink { 50% { opacity:0; } }

/* approve-device dialog */
.scan-box { position:relative; width:100%; aspect-ratio:1; border-radius:18px; overflow:hidden; background:#000; }
.scan-box video { width:100%; height:100%; object-fit:cover; display:block; }
.scan-frame { position:absolute; inset:18%; border:3px solid rgba(255,255,255,.85); border-radius:22px; box-shadow:0 0 0 999px rgba(0,0,0,.35); animation:scanPulse 1.8s ease-in-out infinite; }
@keyframes scanPulse { 50% { transform:scale(.96); border-color:#3da2ff; } }
.scan-msg { position:absolute; inset:auto 0 14px; color:#fff; font-size:13px; text-align:center; }
#devCode { font-family:ui-monospace,Consolas,monospace; letter-spacing:3px; text-transform:uppercase; text-align:center; font-size:18px; }
.dev-btn { display:flex; align-items:center; justify-content:center; gap:8px; padding:12px; border:0; border-radius:12px; background:rgba(47,139,240,.1); color:var(--blue); font-weight:600; transition:transform .2s var(--spring), background .2s; }
.dev-btn:hover { background:rgba(47,139,240,.18); }
.dev-btn:active { transform:scale(.96); }
.toast { position:fixed; left:50%; bottom:28px; transform:translateX(-50%); z-index:40; background:rgba(30,30,32,.92); color:#fff; padding:12px 18px; border-radius:14px; font-weight:500; box-shadow:0 10px 30px rgba(0,0,0,.3); animation:sheetIn .35s var(--spring) both; }

/* ---- dialogs ---- */
.overlay { -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); background:rgba(0,0,0,.4); animation:fade .25s ease both; }
.overlay > .card, .overlay > form.card { animation:sheetIn .4s var(--spring) both; }
@keyframes fade { from { opacity:0; } }
@keyframes sheetIn { from { opacity:0; transform:translateY(24px) scale(.94); } to { opacity:1; transform:none; } }
.card { background:var(--card); color:var(--text); border-radius:22px; box-shadow:0 24px 60px rgba(0,0,0,.35); -webkit-backdrop-filter:blur(30px); backdrop-filter:blur(30px); }
.card input { color:var(--text); }
.primary, .psave, .pcancel, .ghost, .pbtn, .logout-btn { transition:transform .2s var(--spring), filter .2s; }
.primary:hover, .psave:hover { filter:brightness(1.05); transform:translateY(-1px); }
.primary:active, .psave:active, .pcancel:active, .ghost:active, .pbtn:active, .logout-btn:active { transform:scale(.96); }

@media (max-width:700px) { .row { margin:2px 6px; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}
/* ---- creating a group/channel: steps 2 (public/private) and 3 (add members) ---- */
.wiz { width:min(400px,94vw); gap:12px; }
.wiz h3 { margin:0; font-size:19px; }
/* step 2: Telegram-like radio list with the explanation under each option */
.wiz .access-pick { flex-direction:column; gap:2px; padding:0; background:none; }
.wiz .access-pick .ap { justify-content:flex-start; align-items:flex-start; gap:14px; padding:10px 8px; border-radius:12px; background:none; color:var(--text); font-weight:400; box-shadow:none; }
.wiz .access-pick .ap:hover { background:var(--hover); }
.wiz .access-pick .ap input { position:static; opacity:1; pointer-events:auto; flex:none; width:20px; height:20px; margin:2px 0 0; }
.wiz .access-pick .ap > span { align-items:flex-start; }
.wiz .access-pick .ap b { font-weight:600; }
.wiz .access-pick .ap small { display:block; margin-top:2px; }
.wiz .access-pick .ap:has(input:checked) { outline:none; background:none; box-shadow:none; color:var(--text); }.wiz-lbl { font-size:14px; font-weight:600; color:var(--blue); margin-top:4px; }
.wiz-err { color:#e53935; font-size:13px; }
.wiz-err:empty { display:none; }
.wiz .btns { justify-content:flex-end; gap:8px; }
.wiz .mi-invite { background:none; padding:0; }
.wiz .mi-invite code { display:block; padding:12px 14px; border-radius:12px; background:var(--hover); color:var(--blue); font-size:14px; overflow-wrap:anywhere; user-select:all; }
.wiz-members { max-height:min(86vh,720px); }
.wiz-members .g-pick { flex:1; min-height:200px; max-height:46vh; overflow-y:auto; }
.wiz-invite { display:flex; align-items:center; gap:12px; width:100%; padding:11px 8px; border:0; border-radius:12px; background:none; color:var(--blue); font-size:15px; font-weight:600; text-align:left; cursor:pointer; }
.wiz-invite:hover { background:var(--hover); }

/* ---- call screen: status line, avatar for voice calls ---- */
#callStatus { position:absolute; top:46px; left:16px; color:rgba(255,255,255,.85); font-size:15px; text-shadow:0 1px 3px #000; font-variant-numeric:tabular-nums; }
/* calls: no blur layers over a live video (they are recomputed every frame and make the page stutter) */
#call, #callBtns button, html.in-call * { -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
#call { animation:none; }
/* voice call: the contact's name and the status sit centred under the avatar */
#call.audio-only #callName, #call.audio-only #callStatus { left:0; right:0; text-align:center; }
#call.audio-only #callName { top:calc(50% + 100px); font-size:22px; font-weight:600; }
#call.audio-only #callStatus { top:calc(50% + 134px); }
#callAva { position:absolute; inset:0; display:none; align-items:center; justify-content:center; pointer-events:none; }
#callAva .avatar { width:132px; height:132px; font-size:54px; box-shadow:0 0 0 10px rgba(255,255,255,.08), 0 0 0 22px rgba(255,255,255,.04); }
#callBg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:none; pointer-events:none; }
#call.audio-only #callBg { display:block; }
#call.audio-only #callAva { display:flex; }
#call.audio-only #remote { visibility:hidden; }
#callBtns button { cursor:pointer; transition:transform .2s var(--spring), background .2s; }
#callBtns button:hover { background:rgba(255,255,255,.3); }
#callBtns .off:hover { background:#fff; }
#callBtns button:active { transform:scale(.92); }
#callShare { position:absolute; top:16px; left:50%; transform:translateX(-50%); padding:7px 16px; border-radius:20px; background:rgba(47,139,240,.92); color:#fff; font-size:14px; font-weight:600; box-shadow:0 6px 18px rgba(0,0,0,.35); }
/* the small preview is mirrored for the camera, but a shared screen must read normally */
#local.sharing { transform:none; object-fit:contain; background:#111; width:min(240px,34vw); }

/* upload progress: green line bar */
#upBar { position:fixed; left:50%; bottom:24px; transform:translate(-50%,20px); width:min(320px,calc(100% - 32px)); padding:10px 14px; border-radius:14px; background:var(--side,#fff); color:var(--text,#222); box-shadow:0 6px 24px rgba(0,0,0,.25); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:9999; }
#upBar.on { opacity:1; transform:translate(-50%,0); }
#upBar .up-name { font-size:13px; margin-bottom:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#upBar .up-track { height:6px; border-radius:3px; background:rgba(128,128,128,.25); overflow:hidden; }
#upBar .up-fill { height:100%; width:0; border-radius:3px; background:#34c759; transition:width .15s linear; }