/* ===== Vibogram design system ===== */
:root{
  --brand:#7c5cff; --brand2:#22d3ee; --brand3:#4f7bff; --danger:#ff5a6a; --ok:#37d67a;
  --r-lg:20px; --r-md:16px; --r-sm:11px;
  --sp: cubic-bezier(.34,1.56,.64,1);
  --ease: cubic-bezier(.22,.61,.36,1);
  --shadow:0 10px 30px rgba(8,12,25,.28);
  --grad: linear-gradient(135deg,#7c5cff 0%,#5b8cff 55%,#22d3ee 100%);
}
:root[data-theme="dark"]{
  --bg:#0b0f1a; --panel:#121828; --panel2:#1a2236; --panel3:#222c44; --panel-solid:#121828;
  --text:#e9eefb; --muted:#8d97b0; --line:rgba(255,255,255,.07);
  --bubble-in:#1b2439; --bubble-out:linear-gradient(135deg,#7c5cff,#4f7bff);
  --out-text:#fff; --hover:rgba(255,255,255,.05); --chip:rgba(255,255,255,.06);
}
:root[data-theme="light"]{
  --bg:#eef1f8; --panel:#ffffff; --panel2:#f5f7fc; --panel3:#e9edf7; --panel-solid:#ffffff;
  --text:#101728; --muted:#6b7488; --line:rgba(16,23,40,.08);
  --bubble-in:#ffffff; --bubble-out:linear-gradient(135deg,#7c5cff,#4f7bff);
  --out-text:#fff; --hover:rgba(16,23,40,.05); --chip:rgba(16,23,40,.05);
  --shadow:0 10px 30px rgba(30,45,90,.12);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden}
body{
  margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg);color:var(--text);overflow:hidden;
  font-size:15px;line-height:1.45;letter-spacing:-.01em;
  transition:background .5s var(--ease),color .3s var(--ease);
}
button,input,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.hidden{display:none!important}
b,strong{font-weight:650}

/* ---------- фон ---------- */
.bg-layer{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;mix-blend-mode:screen;
  animation:float 26s ease-in-out infinite}
.b1{width:44vw;height:44vw;left:-8vw;top:-10vw;background:#7c5cff}
.b2{width:38vw;height:38vw;right:-6vw;top:6vh;background:#22d3ee;animation-duration:32s;animation-delay:-6s}
.b3{width:36vw;height:36vw;left:22vw;bottom:-16vw;background:#ff5fa2;opacity:.35;animation-duration:29s;animation-delay:-12s}
.b4{width:26vw;height:26vw;right:16vw;bottom:-8vw;background:#5b8cff;opacity:.4;animation-duration:36s;animation-delay:-18s}
:root[data-theme="light"] .blob{opacity:.28;mix-blend-mode:normal}
:root[data-theme="light"] .b1{background:#a99bff}:root[data-theme="light"] .b3{background:#ffb0d0}
@keyframes float{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  33%{transform:translate3d(6vw,4vh,0) scale(1.12)}
  66%{transform:translate3d(-5vw,-3vh,0) scale(.94)}
}
.bg-noise{position:absolute;inset:0;opacity:.35;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:22px 22px}

/* ---------- авторизация ---------- */
.auth{position:relative;z-index:2;height:100%;display:grid;place-items:center;padding:20px;overflow:auto}
.auth-card{width:min(430px,100%);background:color-mix(in srgb,var(--panel) 82%,transparent);
  backdrop-filter:blur(26px) saturate(160%);border:1px solid var(--line);border-radius:26px;
  padding:28px;box-shadow:var(--shadow);animation:cardIn .7s var(--sp) both}
@keyframes cardIn{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}}
.auth-brand{display:flex;gap:14px;align-items:center;margin-bottom:22px}
.auth-logo{width:56px;height:56px;border-radius:16px;box-shadow:0 8px 24px rgba(124,92,255,.45);animation:logoIn 1s var(--sp) both}
@keyframes logoIn{from{opacity:0;transform:scale(.5) rotate(-25deg)}to{opacity:1;transform:none}}
.auth-brand h1{margin:0;font-size:25px;letter-spacing:-.03em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.auth-brand p{margin:2px 0 0;color:var(--muted);font-size:12.5px}

.tabs{position:relative;display:flex;gap:4px;background:var(--chip);padding:4px;border-radius:14px;margin-bottom:20px}
.tab{position:relative;z-index:2;flex:1;padding:9px;border-radius:10px;color:var(--muted);font-size:13.5px;font-weight:600;transition:color .25s}
.tab.active{color:var(--text)}
.tab-pill{position:absolute;top:4px;left:4px;height:calc(100% - 8px);width:calc(50% - 4px);border-radius:10px;
  background:var(--panel3);box-shadow:0 4px 14px rgba(0,0,0,.18);transition:transform .42s var(--sp)}
.tabs[data-i="1"] .tab-pill{transform:translateX(100%)}

.auth-form{display:none;flex-direction:column;gap:14px}
.auth-form.active{display:flex;animation:fadeUp .45s var(--ease) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.field{display:flex;flex-direction:column;gap:6px}
.field span{font-size:12px;color:var(--muted);font-weight:600;padding-left:4px}
.field input,.ep-head input,.search input,.modal input,.modal textarea{
  background:var(--panel2);border:1.5px solid transparent;border-radius:13px;padding:12px 14px;outline:none;
  transition:border-color .25s,background .25s,box-shadow .25s;width:100%}
.field input:focus,.ep-head input:focus,.modal input:focus{border-color:var(--brand);background:var(--panel3);box-shadow:0 0 0 4px rgba(124,92,255,.14)}
.btn{border-radius:13px;padding:11px 18px;font-weight:650;transition:transform .18s var(--sp),filter .25s,background .25s}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--grad);color:#fff;box-shadow:0 8px 22px rgba(124,92,255,.35)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.lg{padding:14px;font-size:15.5px}
.btn.ghost{background:var(--chip);color:var(--text)}
.btn.danger{background:rgba(255,90,106,.14);color:var(--danger)}
.hint{font-size:12px;color:var(--muted);margin:2px 0 0;text-align:center}
.hint .lock{color:var(--ok)}
.auth-foot{margin-top:18px;text-align:center;font-size:11.5px;color:var(--muted);display:flex;gap:8px;align-items:center;justify-content:center}
.dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(55,214,122,.6);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(55,214,122,0)}100%{box-shadow:0 0 0 0 rgba(55,214,122,0)}}
.avatar-pick{display:flex;align-items:center;gap:14px;background:var(--panel2);padding:12px;border-radius:16px}
.avatar{border-radius:50%;display:grid;place-items:center;font-size:20px;flex:none;
  background:var(--grad);color:#fff;width:44px;height:44px;box-shadow:0 4px 14px rgba(0,0,0,.2)}
.avatar.has-media{overflow:hidden;position:relative}
.avatar.has-media img,.avatar.has-media video{
  width:100%;height:100%;object-fit:cover;display:block;border-radius:50%;
  transform:translate(calc(var(--ax,0) * 100%),calc(var(--ay,0) * 100%)) scale(var(--as,1));
  transform-origin:center center;will-change:transform;
  animation:avin .45s var(--sp) both;background:transparent}
@keyframes avin{from{opacity:0;transform:scale(1.06)}to{opacity:1}}
.avatar.xl{width:64px;height:64px;font-size:32px;animation:pop .5s var(--sp) both}
@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}
.avatar.sm{width:34px;height:34px;font-size:15px}
.emoji-mini{display:flex;flex-wrap:wrap;gap:6px;flex:1}
.emoji-mini button{width:34px;height:34px;border-radius:10px;font-size:18px;transition:transform .2s var(--sp),background .2s}
.emoji-mini button:hover{transform:scale(1.18);background:var(--chip)}
.emoji-mini button.sel{background:var(--brand);transform:scale(1.1)}

/* ---------- каркас ---------- */
.app{position:relative;z-index:2;height:100%;display:grid;grid-template-columns:352px 1fr 0px;
  background:color-mix(in srgb,var(--panel) 70%,transparent);backdrop-filter:blur(18px);
  animation:appIn .6s var(--ease) both}
@keyframes appIn{from{opacity:0;transform:scale(1.02)}to{opacity:1;transform:none}}
.app.info-open{grid-template-columns:352px 1fr 340px}
.sidebar{display:flex;flex-direction:column;border-right:1px solid var(--line);min-width:0;background:color-mix(in srgb,var(--panel) 92%,transparent)}
.side-head{display:flex;align-items:center;gap:10px;padding:12px 12px 8px}
.icon-btn{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:var(--muted);
  transition:background .22s,color .22s,transform .18s var(--sp);flex:none}
.icon-btn:hover{background:var(--hover);color:var(--text)}
.icon-btn:active{transform:scale(.9)}
.icon-btn.sm{width:28px;height:28px;border-radius:9px}
.icon-btn.sm svg{width:16px;height:16px}
.icon-btn svg{width:21px;height:21px}
.search{position:relative;flex:1}
.search input{background:var(--panel2);padding:11px 34px 11px 38px;border-radius:13px;border:1.5px solid transparent;font-size:14px}
.search .si{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--muted)}
.clear-search{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:22px;height:22px;border-radius:50%;color:var(--muted);font-size:18px;line-height:1}
.filters{display:flex;gap:7px;padding:0 12px 10px;overflow-x:auto;scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.chip{padding:6px 13px;border-radius:20px;background:var(--chip);font-size:12.5px;font-weight:600;color:var(--muted);white-space:nowrap;
  transition:background .25s,color .25s,transform .2s var(--sp)}
.chip:hover{transform:translateY(-1px)}
.chip.active{background:var(--grad);color:#fff;box-shadow:0 4px 14px rgba(124,92,255,.3)}
.chat-list{flex:1;overflow-y:auto;padding:0 8px 90px;scroll-behavior:smooth}
.fab{position:absolute;left:290px;bottom:22px;width:52px;height:52px;border-radius:18px;background:var(--grad);color:#fff;
  display:grid;place-items:center;box-shadow:0 10px 26px rgba(124,92,255,.45);z-index:5;
  transition:transform .25s var(--sp),box-shadow .25s}
.fab:hover{transform:scale(1.09) rotate(90deg)}
.fab svg{width:24px;height:24px;stroke-width:2.4}

/* ---------- элемент чата ---------- */
.ci{display:flex;gap:12px;padding:10px;border-radius:16px;cursor:pointer;position:relative;
  transition:background .22s var(--ease),transform .18s var(--ease);animation:ciIn .4s var(--ease) both}
@keyframes ciIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
.ci:hover{background:var(--hover)}
.ci.active{background:color-mix(in srgb,var(--brand) 22%,transparent)}
.ci.active::before{content:'';position:absolute;left:-8px;top:12px;bottom:12px;width:3px;border-radius:0 3px 3px 0;background:var(--grad);animation:barIn .35s var(--sp) both}
@keyframes barIn{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.ci-body{flex:1;min-width:0}
.ci-top{display:flex;align-items:baseline;gap:8px}
.ci-name{font-weight:640;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.ci-time{font-size:11.5px;color:var(--muted);flex:none}
.ci-bot{display:flex;align-items:center;gap:8px;margin-top:1px}
.ci-last{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.ci-last.typing{color:var(--brand2);font-weight:600}
.ci-last .lock{font-size:11px}
.badge{min-width:20px;height:20px;border-radius:10px;background:var(--grad);color:#fff;font-size:11.5px;font-weight:700;
  display:grid;place-items:center;padding:0 6px;flex:none;animation:pop .35s var(--sp) both}
.badge.mute{background:var(--panel3);color:var(--muted)}
.check{width:15px;height:15px;flex:none;color:var(--brand2)}
.check svg{width:15px;height:15px;stroke-width:2.4}
.check.read{color:var(--ok)}
.skeleton{padding:10px;display:flex;gap:12px}
.sk{border-radius:50%;width:44px;height:44px;flex:none}
.sk-l{height:11px;border-radius:6px;margin:6px 0}
.skeleton .sk,.sk-l{background:linear-gradient(90deg,var(--panel2) 25%,var(--panel3) 37%,var(--panel2) 63%);background-size:400% 100%;animation:shimmer 1.4s infinite}
@keyframes shimmer{from{background-position:100% 0}to{background-position:0 0}}

/* ---------- чат ---------- */
.chat{position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden}
.chat::before{content:'';position:absolute;inset:0;z-index:0;transition:opacity .6s;
  background:
    radial-gradient(900px 500px at 12% 8%,rgba(124,92,255,.30),transparent 60%),
    radial-gradient(760px 520px at 92% 92%,rgba(34,211,238,.24),transparent 60%),
    radial-gradient(600px 400px at 70% 10%,rgba(255,95,162,.16),transparent 60%);
  animation:hue 22s ease-in-out infinite}
@keyframes hue{0%,100%{filter:hue-rotate(0)}50%{filter:hue-rotate(22deg)}}
:root[data-wall="dawn"] .chat::before{background:
  radial-gradient(900px 500px at 10% 10%,rgba(255,183,77,.42),transparent 60%),
  radial-gradient(800px 520px at 90% 90%,rgba(255,138,174,.38),transparent 60%);animation:none}
:root[data-wall="deep"] .chat::before{background:
  radial-gradient(1000px 600px at 50% 0%,rgba(30,54,120,.6),transparent 65%),
  radial-gradient(700px 500px at 80% 100%,rgba(60,40,120,.5),transparent 60%);animation:none}
:root[data-wall="plain"] .chat::before{background:transparent;animation:none}
.chat > *{position:relative;z-index:1}
.chat-view{flex:1;display:flex;flex-direction:column;min-height:0;animation:fadeUp .35s var(--ease)}
.chat-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:30px;animation:fadeUp .5s var(--ease) both}
.empty-art img{width:110px;height:110px;border-radius:28px;box-shadow:0 18px 50px rgba(124,92,255,.4);animation:bob 4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-12px) rotate(3deg)}}
.chat-empty h2{margin:6px 0 0;font-size:26px;letter-spacing:-.03em}
.chat-empty p{margin:0;color:var(--muted);max-width:340px}

.chat-head{display:flex;align-items:center;gap:10px;padding:10px 14px;background:color-mix(in srgb,var(--panel) 80%,transparent);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.peer{display:flex;gap:11px;align-items:center;cursor:pointer;flex:1;min-width:0;padding:4px;border-radius:12px;transition:background .2s}
.peer:hover{background:var(--hover)}
.peer-name{font-weight:660;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.peer-sub{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.peer-sub.online{color:var(--ok)}
.head-actions{display:flex;gap:2px}
.secure-strip{text-align:center;font-size:11.5px;color:var(--muted);padding:6px;background:color-mix(in srgb,var(--ok) 8%,transparent);
  border-bottom:1px solid var(--line);animation:fadeUp .4s var(--ease)}
.secure-strip .lock{color:var(--ok)}
.link{color:var(--brand2);font-weight:600;text-decoration:underline;text-underline-offset:2px}

.messages{flex:1;overflow-y:auto;padding:18px 16px 8px;display:flex;flex-direction:column;gap:3px;scroll-behavior:smooth}
.messages::-webkit-scrollbar,.chat-list::-webkit-scrollbar,.infopanel::-webkit-scrollbar,.ep-grid::-webkit-scrollbar{width:8px}
.messages::-webkit-scrollbar-thumb,.chat-list::-webkit-scrollbar-thumb,.infopanel::-webkit-scrollbar-thumb,.ep-grid::-webkit-scrollbar-thumb{background:var(--panel3);border-radius:8px}
.date-sep{align-self:center;margin:14px 0 10px;font-size:11.5px;font-weight:650;color:var(--muted);
  background:color-mix(in srgb,var(--panel) 65%,transparent);padding:5px 14px;border-radius:20px;backdrop-filter:blur(8px);
  animation:popIn .35s var(--sp) both}
@keyframes popIn{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}

.row{display:flex;margin-top:2px;animation:msgIn .42s var(--sp) both;max-width:100%}
@keyframes msgIn{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:none}}
.row.out{justify-content:flex-end}
.row.grouped{margin-top:1px}
.bubble{position:relative;max-width:min(560px,74%);padding:8px 12px 7px;border-radius:18px;
  background:var(--bubble-in);box-shadow:0 2px 10px rgba(8,12,25,.22);word-wrap:break-word;overflow-wrap:anywhere;
  transition:transform .22s var(--sp)}
.row.in .bubble{border-bottom-left-radius:6px}
.row.out .bubble{background:var(--bubble-out);color:var(--out-text);border-bottom-right-radius:6px}
.row.grouped.in .bubble{border-top-left-radius:8px}
.row.grouped.out .bubble{border-top-right-radius:8px}
.row:not(.grouped) .bubble::after{content:'';position:absolute;bottom:0;width:20px;height:20px}
.row.in:not(.grouped) .bubble::after{left:-8px;background:radial-gradient(circle at 0 100%,transparent 68%,var(--bubble-in) 69%)}
.row.out:not(.grouped) .bubble::after{right:-8px;background:radial-gradient(circle at 100% 100%,transparent 68%,#4f7bff 69%)}
.bubble:hover{transform:translateY(-1px)}
.bubble.jumbo{font-size:34px;line-height:1.25;padding:2px 8px}
.quote{border-left:3px solid var(--brand2);padding:3px 0 3px 9px;margin:0 0 5px;font-size:12.5px;opacity:.9;
  background:rgba(255,255,255,.06);border-radius:0 8px 8px 0}
.row.out .quote{background:rgba(255,255,255,.16);border-color:#fff}
.quote b{display:block;font-size:12px;color:var(--brand2)}
.row.out .quote b{color:#fff}
.msg-name{font-size:12.5px;font-weight:680;color:var(--brand2);margin-bottom:2px}
.meta{display:flex;align-items:center;gap:5px;justify-content:flex-end;margin-top:2px;font-size:11px;opacity:.75}
.bubble .txt{white-space:pre-wrap}
.reactions{display:flex;gap:4px;margin-top:4px;flex-wrap:wrap}
.rc{display:flex;align-items:center;gap:3px;padding:1px 7px;border-radius:12px;font-size:12.5px;
  background:var(--panel3);border:1px solid var(--line);animation:popIn .3s var(--sp) both;transition:transform .2s var(--sp)}
.row.out .rc{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.25)}
.rc.mine{background:color-mix(in srgb,var(--brand) 45%,transparent)}
.rc:hover{transform:scale(1.12)}
.unenc{font-size:11px;opacity:.7;display:inline-flex;gap:4px;align-items:center}

/* typing */
.typing-bar{display:flex;align-items:center;gap:4px;padding:2px 26px 6px;font-size:12.5px;color:var(--muted);animation:fadeUp .3s}
.typing-bar span{width:6px;height:6px;border-radius:50%;background:var(--brand2);animation:tdot 1.2s infinite}
.typing-bar span:nth-child(2){animation-delay:.15s}.typing-bar span:nth-child(3){animation-delay:.3s}
.typing-bar i{font-style:normal;margin-left:6px}
@keyframes tdot{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-5px);opacity:1}}

/* композер */
.reply-preview{display:flex;align-items:center;gap:10px;margin:0 14px;padding:8px 10px;border-radius:12px;
  background:var(--panel2);border:1px solid var(--line);animation:slideUp .28s var(--ease) both}
@keyframes slideUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.rp-line{width:3px;align-self:stretch;border-radius:3px;background:var(--grad)}
.rp-body{flex:1;min-width:0}
.rp-body b{display:block;font-size:12.5px;color:var(--brand2)}
.rp-body span{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.composer{display:flex;align-items:flex-end;gap:6px;padding:10px 14px 14px}
.composer textarea{flex:1;background:var(--panel2);border:1.5px solid transparent;border-radius:20px;padding:11px 16px;
  resize:none;outline:none;max-height:140px;min-height:44px;transition:border-color .25s,box-shadow .25s;font-size:14.5px}
.composer textarea:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(124,92,255,.14)}
.send{width:44px;height:44px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;flex:none;
  box-shadow:0 6px 18px rgba(124,92,255,.4);transition:transform .3s var(--sp),opacity .25s,box-shadow .25s}
.send svg{width:20px;height:20px;transform:translateX(-1px)}
.send:hover{transform:scale(1.08)}
.send:active{transform:scale(.9)}

/* эмодзи */
.emoji-panel{position:absolute;bottom:0;left:0;right:0;background:var(--panel);border-top:1px solid var(--line);
  border-radius:20px 20px 0 0;box-shadow:0 -12px 40px rgba(0,0,0,.3);padding:12px;transform:translateY(110%);
  transition:transform .38s var(--sp);z-index:20;max-height:52vh;display:flex;flex-direction:column}
.emoji-panel.open{transform:none}
.ep-head{display:flex;gap:10px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.ep-head input{flex:1;min-width:120px;padding:8px 12px;font-size:13.5px}
.ep-tabs{display:flex;gap:4px}
.ep-tabs button{width:32px;height:32px;border-radius:9px;font-size:17px;transition:background .2s,transform .2s var(--sp)}
.ep-tabs button:hover{background:var(--chip);transform:scale(1.12)}
.ep-tabs button.sel{background:var(--brand)}
.ep-grid{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(38px,1fr));gap:2px}
.ep-grid button{height:38px;border-radius:9px;font-size:22px;transition:transform .18s var(--sp),background .18s}
.ep-grid button:hover{transform:scale(1.28);background:var(--chip)}

/* инфо-панель */
.infopanel{overflow-y:auto;background:var(--panel-solid);border-left:1px solid var(--line);
  background-image:linear-gradient(180deg,color-mix(in srgb,var(--brand) 9%,transparent),transparent 320px);
  transition:padding .3s,background .3s}
.app:not(.info-open) .infopanel{display:none}
.app.info-open .infopanel{animation:slideL .38s var(--ease) both}
@keyframes slideL{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
.ip-hero{padding:26px 18px 18px;text-align:center;border-bottom:1px solid var(--line)}
.ip-hero .avatar{width:88px;height:88px;font-size:40px;margin:0 auto 12px;animation:pop .5s var(--sp) both}
.ip-hero h3{margin:0;font-size:19px}
.ip-hero p{margin:3px 0 0;font-size:13px;color:var(--muted)}
.ip-sec{padding:14px 16px;border-bottom:1px solid var(--line)}
.ip-sec h4{margin:0 0 10px;font-size:11.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted)}
.ip-row{display:flex;align-items:center;gap:12px;padding:9px 0;font-size:14px}
.ip-row .k{color:var(--muted);flex:1}
.ip-row .v{font-weight:600}
.ip-row:not(:last-child){border-bottom:1px solid var(--line)}
.switch{width:44px;height:26px;border-radius:15px;background:var(--panel3);position:relative;transition:background .3s;flex:none}
.switch::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;
  transition:transform .32s var(--sp);box-shadow:0 2px 6px rgba(0,0,0,.3)}
.switch.on{background:var(--grad)}
.switch.on::after{transform:translateX(18px)}
.finger{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;word-break:break-all;color:var(--muted);
  background:var(--panel2);padding:10px;border-radius:12px;line-height:1.7}
.finger-emoji{font-size:22px;letter-spacing:2px;background:var(--panel2);padding:10px;border-radius:12px;text-align:center;margin-bottom:8px}
.shield{width:64px;height:64px;margin:0 auto 10px;display:grid;place-items:center;border-radius:20px;
  background:linear-gradient(135deg,rgba(55,214,122,.18),rgba(34,211,238,.18));font-size:30px;animation:pop .5s var(--sp) both}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.btn-row .btn{flex:1;font-size:13.5px;padding:10px}

/* модалки */
.modal-root{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:18px}
.modal-back{position:absolute;inset:0;background:rgba(6,9,18,.6);backdrop-filter:blur(6px);animation:fade .3s both}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{position:relative;width:min(460px,100%);max-height:86vh;overflow-y:auto;background:var(--panel);
  border:1px solid var(--line);border-radius:24px;padding:22px;box-shadow:0 30px 80px rgba(0,0,0,.5);
  animation:modalIn .45s var(--sp) both}
@keyframes modalIn{from{opacity:0;transform:translateY(30px) scale(.94)}to{opacity:1;transform:none}}
.modal h3{margin:0 0 4px;font-size:19px}
.modal .sub{margin:0 0 16px;font-size:13px;color:var(--muted)}
.modal .field{margin-bottom:12px}
.user-row{display:flex;align-items:center;gap:12px;padding:9px;border-radius:14px;cursor:pointer;transition:background .2s;animation:ciIn .3s var(--ease) both}
.user-row:hover{background:var(--hover)}
.user-row.sel{background:color-mix(in srgb,var(--brand) 18%,transparent)}
.user-row .avatar{width:42px;height:42px}
.user-row .nm{flex:1;min-width:0}
.user-row .nm b{display:block;font-size:14.5px}
.user-row .nm span{font-size:12.5px;color:var(--muted)}
.tick{width:22px;height:22px;border-radius:50%;border:2px solid var(--panel3);display:grid;place-items:center;flex:none;transition:all .25s var(--sp)}
.tick svg{width:13px;height:13px;stroke-width:3;color:#fff;opacity:0;transform:scale(.4);transition:all .25s var(--sp)}
.user-row.sel .tick{background:var(--grad);border-color:transparent}
.user-row.sel .tick svg{opacity:1;transform:none}
.wall-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(58px,1fr));gap:10px}
.wall{border-radius:16px;height:66px;border:2.5px solid transparent;transition:transform .22s var(--sp),border-color .2s;position:relative;overflow:hidden}
.wall:hover{transform:scale(1.06)}
.wall.sel{border-color:var(--brand);transform:scale(1.06)}
.wall.aurora{background:linear-gradient(135deg,#7c5cff,#22d3ee)}
.wall.dawn{background:linear-gradient(135deg,#ffb74d,#ff8aae)}
.wall.deep{background:linear-gradient(135deg,#1e3678,#3c2878)}
.wall.plain{background:var(--panel3);box-shadow:inset 0 0 0 1px var(--line)}
.themes{display:flex;gap:8px}
.themes .btn{flex:1}
.themes .btn.on{background:var(--grad);color:#fff}
.emoji-big-row{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.emoji-big-row button{width:40px;height:40px;border-radius:12px;font-size:22px;transition:transform .2s var(--sp),background .2s}
.emoji-big-row button:hover{transform:scale(1.2);background:var(--chip)}
.emoji-big-row button.sel{background:var(--brand)}

/* контекстное меню */
.ctx-menu{position:fixed;z-index:200;background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:6px;box-shadow:0 20px 50px rgba(0,0,0,.45);min-width:180px;animation:popIn .22s var(--sp) both;overflow:hidden}
.ctx-menu button{display:block;width:100%;text-align:left;padding:10px 12px;border-radius:10px;font-size:14px;transition:background .18s}
.ctx-menu button:hover{background:var(--hover)}
.ctx-menu button.danger{color:var(--danger)}
.quick-react{display:flex;gap:2px;justify-content:space-around;padding:4px 2px;border-bottom:1px solid var(--line);margin-bottom:4px}
.quick-react button{flex:1;text-align:center;font-size:20px;padding:6px 0}

/* тосты */
.toasts{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:300;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:11px 18px;font-size:13.5px;
  box-shadow:var(--shadow);animation:toastIn .4s var(--sp) both;display:flex;gap:8px;align-items:center}
.toast.err{border-color:rgba(255,90,106,.5);color:var(--danger)}
.toast.ok{border-color:rgba(55,214,122,.45)}
@keyframes toastIn{from{opacity:0;transform:translateY(20px) scale(.9)}to{opacity:1;transform:none}}
.toast.out{animation:toastOut .3s var(--ease) forwards}
@keyframes toastOut{to{opacity:0;transform:translateY(10px) scale(.95)}}

/* ---------- адаптив ---------- */
@media (max-width:1100px){
  .app{grid-template-columns:340px 1fr}
  .app.info-open{grid-template-columns:340px 1fr}
  .infopanel{position:absolute;right:0;top:0;bottom:0;width:340px;z-index:30;box-shadow:-20px 0 50px rgba(0,0,0,.3)}
}
@media (max-width:760px){
  .app{grid-template-columns:100%}
  .app.info-open{grid-template-columns:100%}
  .sidebar{position:absolute;inset:0;z-index:10;transform:translateX(0);transition:transform .34s var(--ease)}
  body.mobile-chat .sidebar{transform:translateX(-102%)}
  .chat{position:absolute;inset:0;transform:translateX(100%);transition:transform .34s var(--ease);background:var(--bg)}
  body.mobile-chat .chat{transform:none}
  .chat-head .back{display:grid}
  .fab{left:auto;right:18px}
  .bubble{max-width:82%}
  .infopanel{width:100%;max-width:100%}
  .messages{padding:14px 10px 6px}
}
@media (min-width:761px){.chat-head .back{display:none}}

/* сохранённые аккаунты на экране входа */
.saved-accounts{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:18px;
  background:var(--panel2);padding:10px;border-radius:16px;animation:fadeUp .4s var(--ease) both}
.sa-label{width:100%;font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);padding-left:4px}
.sa-chip{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:22px;background:var(--panel3);
  font-size:13px;font-weight:600;transition:transform .2s var(--sp),background .2s}
.sa-chip:hover{transform:translateY(-2px);background:var(--brand);color:#fff}

/* ============================ МЕДИА ============================ */
/* композер: морфинг микрофон/камера ↔ отправить */
.composer .mic-trigger, .composer .cam-btn-trigger{
  transition:width .3s var(--sp),opacity .25s,transform .3s var(--sp),margin .3s var(--sp)}
.composer.has-text .mic-trigger, .composer.has-text .cam-btn-trigger{
  width:0;opacity:0;transform:scale(.3);margin:0;overflow:hidden;padding:0}
.composer #btn-send{width:0;opacity:0;transform:scale(.3);margin:0;overflow:hidden;
  transition:width .3s var(--sp),opacity .25s,transform .34s var(--sp),margin .3s var(--sp)}
.composer.has-text #btn-send{width:44px;opacity:1;transform:none;margin-left:2px}

/* меню вложения */
.attach-menu{position:absolute;right:12px;bottom:74px;z-index:25;min-width:226px;padding:7px;
  background:color-mix(in srgb,var(--panel) 94%,transparent);backdrop-filter:blur(22px) saturate(160%);
  border:1px solid var(--line);border-radius:18px;box-shadow:0 20px 50px rgba(0,0,0,.45);
  opacity:0;transform:translateY(12px) scale(.96);pointer-events:none;
  transition:opacity .26s var(--ease),transform .34s var(--sp)}
.attach-menu.open{opacity:1;transform:none;pointer-events:auto}
.attach-menu button{display:flex;align-items:center;gap:11px;width:100%;padding:11px 13px;border-radius:13px;
  font-size:14px;text-align:left;transition:background .2s,transform .2s var(--ease);
  opacity:0;transform:translateY(8px)}
.attach-menu.open button{animation:mi .4s var(--sp) forwards}
.attach-menu.open button:nth-child(1){animation-delay:.02s}
.attach-menu.open button:nth-child(2){animation-delay:.06s}
.attach-menu.open button:nth-child(3){animation-delay:.1s}
.attach-menu.open button:nth-child(4){animation-delay:.14s}
@keyframes mi{to{opacity:1;transform:none}}
.attach-menu button:hover{background:var(--hover)}
.attach-menu button span{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;font-size:17px;
  background:linear-gradient(135deg,rgba(124,92,255,.22),rgba(34,211,238,.18))}

/* карточка загрузки */
.upload-card{display:flex;gap:12px;align-items:center;width:min(340px,92vw);background:color-mix(in srgb,var(--panel) 96%,transparent);
  border:1px solid var(--line);border-radius:16px;padding:12px 14px;box-shadow:0 16px 40px rgba(0,0,0,.4);
  transform:translateY(24px) scale(.94);opacity:0;transition:transform .45s var(--sp),opacity .3s}
.upload-card.in{transform:none;opacity:1}
.upload-card.out{transform:translateY(14px) scale(.96);opacity:0}
.uc-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:20px;flex:none;
  background:linear-gradient(135deg,rgba(124,92,255,.25),rgba(34,211,238,.2))}
.uc-body{flex:1;min-width:0}
.uc-body b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uc-bar{height:5px;border-radius:4px;background:var(--panel3);overflow:hidden;margin:6px 0 4px}
.uc-bar i{display:block;height:100%;width:0;border-radius:4px;background:var(--grad);transition:width .3s var(--ease)}
.uc-sub{font-size:11.5px;color:var(--muted)}
.upload-card.done .uc-ic{background:linear-gradient(135deg,rgba(55,214,122,.3),rgba(34,211,238,.2))}
.upload-card.err .uc-bar i{background:var(--danger)}

/* запись голосового */
.recorder{display:flex;align-items:center;gap:10px;padding:10px 14px 14px;
  transform:translateX(var(--dx,0px));transition:transform .18s var(--ease),opacity .25s}
.recorder.in{animation:recIn .34s var(--sp) both}
@keyframes recIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.recorder.will-cancel .rec-wave,.recorder.will-cancel .rec-hint{opacity:.4}
.rec-dot{width:9px;height:9px;border-radius:50%;background:var(--danger);flex:none;animation:recPulse 1.1s infinite}
@keyframes recPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,90,106,.55);opacity:1}70%{box-shadow:0 0 0 10px rgba(255,90,106,0);opacity:.75}}
.rec-time{font-style:normal;font-size:13.5px;font-weight:650;font-variant-numeric:tabular-nums;min-width:38px}
.rec-wave{flex:1;display:flex;align-items:center;gap:2px;height:30px;min-width:60px}
.rec-wave i{flex:1;min-width:2px;border-radius:2px;height:var(--h,6%);background:linear-gradient(180deg,var(--brand),var(--cyan));
  transition:height .09s linear;opacity:.9}
.rec-hint{font-size:11.5px;color:var(--muted);flex:none}
.rec-send{width:42px;height:42px;flex:none;background:linear-gradient(135deg,#37d67a,#22d3ee)}
.rec-send svg{width:20px;height:20px;stroke-width:2.6}

/* медиа-бабл */
.bubble.has-media{padding:4px;overflow:hidden;background:var(--bubble-in)}
.row.out .bubble.has-media{background:var(--bubble-out)}
.row .bubble.has-media::after{display:none}
.bubble.has-circle{background:transparent!important;box-shadow:none;padding:0}
.media{position:relative;border-radius:15px;overflow:hidden;background:var(--panel3);min-width:210px}
.media.photo{width:min(340px,74vw);aspect-ratio:1/var(--ratio,.7);max-height:56vh}
.media.video{width:min(400px,78vw);aspect-ratio:16/10}
.ph-blur{position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(16px) saturate(1.5);transform:scale(1.15);opacity:.9}
.ph-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.05);
  transition:opacity .55s var(--ease),transform .65s var(--ease)}
.media.ready .ph-img{opacity:1;transform:none}
.media.ready .ph-blur{opacity:0;transition:opacity .5s var(--ease)}
.media .vd{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;opacity:0;transition:opacity .5s}
.media.ready .vd{opacity:1}
.media.video.ready .ph-blur{opacity:0}
.vd-play{position:absolute;inset:0;display:grid;place-items:center;z-index:4;background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.3))}
.vd-play svg{width:30px;height:30px;fill:rgba(255,255,255,.95);stroke:rgba(255,255,255,.95);
  background:rgba(0,0,0,.28);border-radius:50%;padding:16px;width:60px;height:60px;
  backdrop-filter:blur(6px);box-shadow:0 8px 26px rgba(0,0,0,.35);transition:transform .3s var(--sp)}
.vd-play:hover svg{transform:scale(1.09)}
.media.playing .vd-play{opacity:0;pointer-events:none}
.ph-zoom{position:absolute;right:8px;top:8px;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;
  font-size:14px;background:rgba(10,14,25,.5);backdrop-filter:blur(8px);opacity:0;transform:scale(.8);
  transition:opacity .25s,transform .3s var(--sp);z-index:5}
.media:hover .ph-zoom{opacity:1;transform:none}
.m-badge{position:absolute;left:8px;bottom:8px;z-index:5;padding:3px 9px;border-radius:10px;font-size:11px;font-weight:600;
  background:rgba(10,14,25,.55);color:#fff;backdrop-filter:blur(8px)}
.bubble.has-media .meta{position:absolute;right:9px;bottom:7px;z-index:5;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.55);opacity:.95}
.bubble.has-media::before{content:'';position:absolute;left:0;right:0;bottom:0;height:46px;pointer-events:none;z-index:4;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.38))}
.bubble.has-circle::before{display:none}
.m-load{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:rgba(10,14,25,.45);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .3s}
.media.loading .m-load,.voice.loading .v-load,.circle-note.loading .m-load{opacity:1}
.m-load b{font-size:11.5px;font-weight:700;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.ring-svg{width:38px;height:38px;transform:rotate(-90deg)}
.ring-svg circle{fill:none;stroke-width:3.4;stroke-linecap:round}
.ring-svg .r-bg{stroke:rgba(255,255,255,.22)}
.ring-svg .r-fg{stroke:#fff;transition:stroke-dashoffset .25s linear}
.media.error::after,.file-card.error::after{content:'⚠️ не удалось загрузить';position:absolute;inset:0;display:grid;place-items:center;
  font-size:12px;color:#fff;background:rgba(10,14,25,.6);z-index:7}
.media.needtap{cursor:pointer}

/* файл */
.file-card{display:flex;align-items:center;gap:12px;padding:8px;min-width:250px;position:relative;cursor:pointer}
.fc-ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:23px;flex:none;
  background:linear-gradient(135deg,rgba(124,92,255,.28),rgba(34,211,238,.2))}
.fc-meta{flex:1;min-width:0}
.fc-meta b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fc-meta span{font-size:12px;color:var(--muted)}
.fc-dl{position:relative;width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--panel3);transition:transform .25s var(--sp),background .25s}
.fc-dl:hover{transform:scale(1.08);background:var(--brand)}
.fc-dl svg{width:20px;height:20px;position:absolute}
.fc-dl .ring-svg{width:42px;height:42px;opacity:0;transition:opacity .25s}
.fc-dl .ring-svg circle{stroke-width:3}
.fc-dl .ring-svg .r-fg{stroke:var(--cyan)}
.fc-dl .i-dl{opacity:1;transition:opacity .25s}
.fc-dl .i-ok{opacity:0;transform:scale(.4);transition:all .3s var(--sp)}
.file-card.loading .fc-dl .ring-svg{opacity:1}
.file-card.loading .fc-dl .i-dl{opacity:0}
.file-card.ready .fc-dl .i-dl{opacity:0}
.file-card.ready .fc-dl .i-ok{opacity:1;transform:none;color:var(--ok)}
.file-card.ready .fc-dl{background:color-mix(in srgb,var(--ok) 22%,transparent)}

/* аудио-карточка */
.audio-card{display:flex;align-items:center;gap:12px;padding:10px;min-width:250px}
.a-play{width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--grad);color:#fff;
  transition:transform .25s var(--sp)}
.a-play:hover{transform:scale(1.08)}
.a-play svg{width:18px;height:18px;fill:currentColor;stroke:currentColor}
.a-body{flex:1;min-width:0}
.a-body b{display:block;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.a-body span{font-size:11.5px;color:var(--muted)}
.a-track{height:4px;border-radius:3px;background:rgba(255,255,255,.2);margin-top:6px;overflow:hidden}
.a-track i{display:block;height:100%;width:0;background:#fff;border-radius:3px;transition:width .2s linear}
.row.out .a-track{background:rgba(255,255,255,.3)}

/* голосовое */
.voice{position:relative;display:flex;align-items:center;gap:11px;padding:6px 4px 6px 6px;min-width:236px}
.v-av{width:38px;height:38px;flex:none}
.v-av .avatar{width:38px;height:38px;font-size:17px}
.v-play{width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--grad);color:#fff;
  box-shadow:0 6px 18px rgba(124,92,255,.35);transition:transform .26s var(--sp)}
.v-play:hover{transform:scale(1.08)}
.v-play svg{width:19px;height:19px;fill:currentColor;stroke:currentColor;position:absolute}
.v-play .i-pause{opacity:0;transform:scale(.5)}
.voice.playing .v-play .i-play{opacity:0;transform:scale(.5)}
.voice.playing .v-play .i-pause{opacity:1;transform:none}
.v-body{flex:1;min-width:0}
.v-wave{display:flex;align-items:center;gap:2.5px;height:30px;cursor:pointer}
.v-wave i{flex:1;min-width:2px;max-width:4px;border-radius:2px;height:var(--h,30%);background:var(--panel3);
  transition:background .18s,transform .2s var(--ease),box-shadow .2s}
.row.out .v-wave i{background:rgba(255,255,255,.35)}
.v-wave i.on{background:linear-gradient(180deg,var(--brand),var(--cyan));box-shadow:0 0 8px rgba(124,92,255,.35)}
.row.out .v-wave i.on{background:#fff;box-shadow:0 0 8px rgba(255,255,255,.4)}
.v-foot{display:flex;align-items:center;gap:8px;margin-top:2px}
.v-time{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.row.out .v-time{color:rgba(255,255,255,.75)}
.v-rate{font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:8px;background:var(--chip);color:var(--muted);
  transition:transform .2s var(--sp),background .2s}
.v-rate:hover{transform:scale(1.08);background:var(--brand);color:#fff}
.v-load{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:transparent;opacity:0;
  pointer-events:none;transition:opacity .3s}
.voice.loading .v-load{opacity:1;pointer-events:auto}
.voice.loading .v-wave{opacity:.35}
.v-load .m-load{position:static;background:transparent;backdrop-filter:none;opacity:1}
.v-load .ring-svg .r-fg{stroke:var(--brand)}

/* кружочек */
.circle-note{display:flex;flex-direction:column;align-items:center;gap:6px;padding:2px}
.cn-circle{position:relative;width:216px;height:216px;border-radius:50%;overflow:hidden;background:#0c1120;
  box-shadow:0 10px 30px rgba(0,0,0,.35);animation:cnIn .5s var(--sp) both}
@keyframes cnIn{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
.cn-circle .ph-blur{filter:blur(18px)}
.cn-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s}
.circle-note.ready .cn-vid{opacity:1}
.cn-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);z-index:3;pointer-events:none}
.cn-ring circle{fill:none;stroke-width:2.6;stroke-linecap:round}
.cn-ring .r-bg{stroke:rgba(255,255,255,.22)}
.cn-ring .r-fg{stroke:var(--cyan);filter:drop-shadow(0 0 5px rgba(34,211,238,.7));transition:stroke-dashoffset .2s linear}
.cn-tap{position:absolute;inset:0;z-index:4;display:grid;place-items:center;background:rgba(0,0,0,.18)}
.cn-tap svg{width:26px;height:26px;fill:#fff;stroke:#fff;background:rgba(0,0,0,.35);border-radius:50%;padding:15px;
  width:56px;height:56px;backdrop-filter:blur(6px);transition:transform .3s var(--sp),opacity .25s}
.circle-note.playing .cn-tap{opacity:0;pointer-events:none}
.cn-foot{display:flex;align-items:center;gap:8px;justify-content:center}
.cn-time{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.cn-mute{width:26px;height:26px;border-radius:9px;font-size:13px;display:grid;place-items:center;background:var(--chip);
  transition:transform .2s var(--sp),background .2s}
.cn-mute:hover{transform:scale(1.1)}
.cn-mute.on{background:var(--brand)}

/* лайтбокс */
.lightbox{position:fixed;inset:0;z-index:400;display:grid;place-items:center}
.lb-back{position:absolute;inset:0;background:rgba(5,8,16,.9);backdrop-filter:blur(10px);opacity:0;transition:opacity .3s}
.lightbox.in .lb-back{opacity:1}
#lb-img{position:relative;max-width:92vw;max-height:84vh;border-radius:18px;box-shadow:0 40px 100px rgba(0,0,0,.7);
  opacity:0;transform:scale(.9);transition:opacity .35s var(--ease),transform .5s var(--sp)}
.lightbox.in #lb-img{opacity:1;transform:none}
.lb-bar{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:14px;padding:16px 20px;
  background:linear-gradient(180deg,rgba(0,0,0,.6),transparent);color:#fff;opacity:0;transition:opacity .3s}
.lightbox.in .lb-bar{opacity:1}
.lb-bar span{flex:1;font-size:13.5px;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.lb-bar .btn{text-decoration:none;font-size:13.5px;padding:9px 18px}
.lb-bar .icon-btn{color:#fff}
.lb-bar .icon-btn:hover{background:rgba(255,255,255,.15)}

/* камера / кружочки */
.cam-overlay{position:fixed;inset:0;z-index:350;display:grid;place-items:center;
  background:rgba(5,8,16,.82);backdrop-filter:blur(16px);opacity:0;transition:opacity .3s}
.cam-overlay.in{opacity:1}
.cam-card{display:flex;flex-direction:column;align-items:center;gap:20px;padding:26px;transform:scale(.94) translateY(14px);
  transition:transform .5s var(--sp)}
.cam-overlay.in .cam-card{transform:none}
.cam-stage{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px}
.cam-circle{position:relative;width:270px;height:270px;border-radius:50%;overflow:hidden;background:#0b1020;
  box-shadow:0 24px 70px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08);cursor:pointer}
.cam-circle video{width:100%;height:100%;object-fit:cover}
.cam-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);z-index:3;pointer-events:none;opacity:0;transition:opacity .3s}
.cam-overlay.recording .cam-ring{opacity:1}
.cam-ring circle{fill:none;stroke-width:2.4;stroke-linecap:round}
.cam-ring .bg{stroke:rgba(255,255,255,.16)}
.cam-ring .prog{stroke:var(--danger);filter:drop-shadow(0 0 6px rgba(255,90,106,.8));transition:stroke-dashoffset .15s linear}
.cam-rec{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:4;display:flex;align-items:center;gap:6px;
  padding:4px 11px;border-radius:12px;background:rgba(0,0,0,.5);backdrop-filter:blur(8px);color:#fff;font-size:11px;
  font-weight:700;letter-spacing:.08em;animation:recBadge .5s var(--sp) both}
.cam-rec span{width:7px;height:7px;border-radius:50%;background:var(--danger);animation:recPulse 1s infinite}
@keyframes recBadge{from{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translate(-50%,0)}}
.cam-time{font-size:15px;font-weight:650;font-variant-numeric:tabular-nums;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.cam-controls{display:flex;align-items:center;gap:26px}
.cam-btn{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:rgba(255,255,255,.1);backdrop-filter:blur(10px);transition:transform .25s var(--sp),background .25s}
.cam-btn:hover{transform:scale(1.08);background:rgba(255,255,255,.2)}
.cam-btn svg{width:22px;height:22px}
.cam-shutter{position:relative;width:78px;height:78px;border-radius:50%;display:grid;place-items:center;flex:none;
  border:3px solid rgba(255,255,255,.9);transition:transform .25s var(--sp),border-color .3s}
.cam-shutter:hover{transform:scale(1.06)}
.cam-shutter i{width:56px;height:56px;border-radius:50%;background:var(--danger);display:block;
  transition:border-radius .35s var(--sp),transform .35s var(--sp),background .3s;
  box-shadow:0 8px 24px rgba(255,90,106,.45)}
.cam-overlay.recording .cam-shutter i{border-radius:14px;transform:scale(.66)}
.cam-overlay.review .cam-shutter i{background:var(--ok);box-shadow:0 8px 24px rgba(55,214,122,.45)}
.cam-overlay.review .cam-shutter::after{content:'';position:absolute;width:26px;height:26px;
  border-left:3px solid #fff;border-bottom:3px solid #fff;transform:rotate(-45deg) scale(.9);margin-top:-4px}
.cam-overlay.review .cam-shutter i{opacity:0}
.cam-hint{font-size:12.5px;color:rgba(255,255,255,.65);text-align:center;max-width:300px}

/* drag & drop */
.drop-overlay{position:absolute;inset:0;z-index:60;display:grid;place-items:center;
  background:rgba(8,12,24,.6);backdrop-filter:blur(8px);opacity:0;transition:opacity .25s}
.drop-overlay.in{opacity:1}
.drop-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:38px 54px;border-radius:24px;
  border:2.5px dashed rgba(124,92,255,.7);background:rgba(124,92,255,.08);animation:dropIn .35s var(--sp) both}
@keyframes dropIn{from{transform:scale(.9);opacity:0}to{transform:none;opacity:1}}
.drop-ic{font-size:38px;animation:bob 2s ease-in-out infinite}
.drop-card b{font-size:15.5px}
.drop-card i{font-size:12.5px;color:var(--muted);font-style:normal}

@media (max-width:760px){
  .media.photo{width:min(280px,72vw)}
  .cn-circle{width:190px;height:190px}
  .cam-circle{width:230px;height:230px}
  .attach-menu{right:10px;bottom:70px}
  .rec-hint{display:none}
}

/* подсветка найденного сообщения */
.row.flash .bubble{animation:flash 1.8s var(--ease)}
@keyframes flash{
  0%{box-shadow:0 0 0 0 rgba(124,92,255,.55)}
  25%{box-shadow:0 0 0 8px rgba(124,92,255,.28)}
  100%{box-shadow:0 2px 10px rgba(8,12,25,.22)}
}
.user-row .ci-time{font-size:11.5px;color:var(--muted);flex:none}

/* ============================ НОВЫЙ ВХОД ============================ */
.auth-card{width:min(432px,100%);position:relative;overflow:visible}
.auth-card::before{content:'';position:absolute;top:0;left:26px;right:26px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(124,92,255,.9),rgba(34,211,238,.9),transparent)}

/* сцена с артом */
.art-stage{position:relative;height:196px;display:grid;place-items:center;margin:4px 0 10px}
.art-glow{position:absolute;width:210px;height:210px;border-radius:50%;
  background:radial-gradient(circle,rgba(124,92,255,.5),rgba(34,211,238,.18) 55%,transparent 70%);
  filter:blur(6px);animation:artGlow 4.2s ease-in-out infinite}
@keyframes artGlow{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.12);opacity:1}}
.art-ring{position:absolute;border-radius:50%;border:1.5px solid rgba(124,92,255,.35);
  animation:ringOut 4.6s cubic-bezier(.2,.6,.3,1) infinite}
.art-ring.r1{width:150px;height:150px}
.art-ring.r2{width:150px;height:150px;animation-delay:1.5s;border-color:rgba(34,211,238,.3)}
.art-ring.r3{width:150px;height:150px;animation-delay:3s;border-color:rgba(255,95,162,.25)}
@keyframes ringOut{0%{transform:scale(.62);opacity:.8}70%{opacity:.12}100%{transform:scale(1.5);opacity:0}}
.art-img{position:relative;width:172px;height:172px;object-fit:contain;
  mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(circle at 50% 48%,#000 62%,transparent 86%);
  mask-image:radial-gradient(circle at 50% 48%,#000 62%,transparent 86%);
  filter:drop-shadow(0 16px 26px rgba(0,0,0,.55));
  opacity:0;transform:scale(.72) translateY(16px) rotate(-10deg);
  transition:opacity .55s var(--ease),transform .75s var(--sp);pointer-events:none}
.art-img.show{opacity:1;transform:none;animation:artFloat 5.5s ease-in-out infinite}
@keyframes artFloat{0%,100%{transform:translateY(0) rotate(-2.5deg)}50%{transform:translateY(-11px) rotate(2.5deg)}}
.spark{position:absolute;width:5px;height:5px;border-radius:50%;background:#fff;opacity:0;
  box-shadow:0 0 10px 2px rgba(124,92,255,.8);animation:sparkUp 5.5s ease-in-out infinite}
.spark.s1{left:16%;top:70%;animation-delay:.2s}
.spark.s2{left:78%;top:64%;background:var(--cyan);box-shadow:0 0 10px 2px rgba(34,211,238,.8);animation-delay:1.4s}
.spark.s3{left:30%;top:24%;background:var(--pink);box-shadow:0 0 10px 2px rgba(255,95,162,.8);animation-delay:2.6s}
.spark.s4{left:68%;top:30%;animation-delay:3.6s}
.spark.s5{left:50%;top:82%;background:var(--cyan);animation-delay:4.4s}
@keyframes sparkUp{0%{opacity:0;transform:translateY(10px) scale(.4)}
  25%{opacity:.95;transform:translateY(-4px) scale(1)}
  70%{opacity:.5}100%{opacity:0;transform:translateY(-34px) scale(.5)}}

/* шаги */
.steps{position:relative;transition:height .55s var(--sp)}
.step{position:absolute;left:0;right:0;top:0;opacity:0;pointer-events:none;
  transform:translateX(46px) scale(.97);transition:opacity .35s var(--ease),transform .55s var(--sp)}
.step.active{opacity:1;transform:none;pointer-events:auto}
.step h1{margin:0 0 5px;font-size:26px;letter-spacing:-.035em;text-align:center}
.step .sub{margin:0 0 16px;font-size:13.5px;color:var(--muted);text-align:center}
.step .sub b{color:var(--text);font-weight:640}
.fine{margin:12px 0 0;font-size:11.5px;color:var(--muted);text-align:center;line-height:1.6}
.fine .lock{color:var(--ok)}
.link-btn{display:block;width:100%;margin-top:12px;font-size:13px;color:var(--brand2);font-weight:600;
  transition:opacity .2s}
.link-btn:hover{opacity:.75}
.back-link{display:inline-flex;align-items:center;font-size:12.5px;color:var(--muted);margin-bottom:8px;
  padding:5px 10px 5px 4px;border-radius:9px;transition:background .2s,color .2s,transform .2s var(--ease)}
.back-link:hover{background:var(--hover);color:var(--text);transform:translateX(-2px)}

/* выбор страны */
.cc-row{position:relative;display:flex;justify-content:center}
.cc{display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:13px;background:var(--panel2);
  border:1.5px solid var(--line);font-size:14.5px;font-weight:620;transition:border-color .25s,background .25s,transform .2s var(--sp)}
.cc:hover{border-color:var(--brand);background:var(--panel3);transform:translateY(-1px)}
.cc span{font-size:19px;line-height:1}
.cc b{font-variant-numeric:tabular-nums}
.cc svg{width:16px;height:16px;color:var(--muted)}
.cc-menu{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(-8px) scale(.97);
  width:290px;max-height:250px;overflow-y:auto;z-index:30;padding:7px;border-radius:18px;
  background:color-mix(in srgb,var(--panel) 97%,transparent);backdrop-filter:blur(20px);
  border:1px solid var(--line);box-shadow:0 22px 50px rgba(0,0,0,.5);
  opacity:0;pointer-events:none;transition:opacity .25s,transform .35s var(--sp)}
.cc-menu.open{opacity:1;transform:translateX(-50%);pointer-events:auto}
.cc-menu button{display:flex;align-items:center;gap:11px;width:100%;padding:9px 11px;border-radius:12px;
  font-size:14px;text-align:left;transition:background .18s}
.cc-menu button:hover{background:var(--hover)}
.cc-menu .fl{font-size:19px}
.cc-menu .nm{flex:1}
.cc-menu .cd{color:var(--muted);font-variant-numeric:tabular-nums}

/* предпросмотр номера */
.phone-preview{text-align:center;font-size:15px;font-weight:650;letter-spacing:.5px;margin:14px 0 10px;
  font-variant-numeric:tabular-nums;transition:opacity .3s,color .3s;color:var(--text)}
.phone-preview.dim{opacity:.4;color:var(--muted)}

/* цифровые ячейки */
.digits{position:relative;display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-bottom:16px}
.digits-input{position:absolute;opacity:0;width:1px;height:1px;border:0;padding:0;left:50%;top:50%}
.db{position:relative;width:35px;height:46px;border-radius:13px;background:var(--panel2);
  border:1.5px solid transparent;display:grid;place-items:center;overflow:hidden;
  font-size:21px;font-weight:660;font-variant-numeric:tabular-nums;
  transition:border-color .25s,background .25s,box-shadow .3s,transform .2s var(--sp)}
.db.filled{background:var(--panel3);box-shadow:inset 0 -2px 0 rgba(124,92,255,.35)}
.db.current{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 14%,var(--panel2));
  box-shadow:0 0 0 4px rgba(124,92,255,.14);transform:translateY(-2px)}
.db.current:not(.filled)::after{content:'';position:absolute;width:2px;height:22px;border-radius:2px;
  background:linear-gradient(180deg,var(--brand),var(--cyan));animation:caret 1.1s steps(2,end) infinite}
@keyframes caret{0%,49%{opacity:1}50%,100%{opacity:0}}
.db span{display:block;transform-origin:center}
.db span.in{animation:digitIn .34s var(--sp) both}
@keyframes digitIn{0%{transform:translateY(-70%) scale(.5) rotateX(60deg);opacity:0}
  60%{transform:translateY(6%) scale(1.12)}100%{transform:none;opacity:1}}
.digits.code{gap:8px;margin:18px 0 12px}
.digits.code .db{width:46px;height:56px;border-radius:15px;font-size:25px}
.digits.shake{animation:shake .5s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}
  30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}}
.digits.error .db{border-color:var(--danger);box-shadow:0 0 0 4px rgba(255,90,106,.14)}
.digits.error .db.filled{background:rgba(255,90,106,.12)}

/* демо-код */
.demo-code{display:flex;align-items:center;gap:10px;justify-content:center;padding:9px 14px;margin-bottom:4px;
  border-radius:15px;background:linear-gradient(135deg,rgba(55,214,122,.16),rgba(34,211,238,.1));
  border:1px solid rgba(55,214,122,.32);animation:popIn .45s var(--sp) both}
.demo-code .dc-ic{font-size:17px;animation:bob 2.4s ease-in-out infinite}
.demo-code .dc-t{font-size:11.5px;color:var(--muted)}
.demo-code b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:18px;letter-spacing:.2em;
  color:var(--ok);font-weight:700}

/* таймер */
.timer{text-align:center;font-size:12.5px;color:var(--muted);min-height:20px;margin-bottom:12px}
.timer-link{font-size:12.5px;color:var(--brand2);font-weight:620;animation:fadeUp .35s var(--ease) both}
.timer-link:hover{text-decoration:underline;text-underline-offset:2px}

/* строка e-mail */
.email-line{display:flex;align-items:center;gap:11px;width:100%;padding:12px 14px;border-radius:15px;
  background:var(--panel2);border:1.5px dashed transparent;color:var(--muted);font-size:13.5px;text-align:left;
  opacity:.5;pointer-events:none;transition:opacity .45s var(--ease),background .45s,border-color .45s,transform .25s var(--sp)}
.email-line .el-ic{width:32px;height:32px;border-radius:11px;display:grid;place-items:center;font-size:16px;flex:none;
  background:linear-gradient(135deg,rgba(124,92,255,.22),rgba(34,211,238,.16))}
.email-line .el-t{flex:1;font-weight:600}
.email-line i{font-style:normal;font-size:11.5px;opacity:.8;font-variant-numeric:tabular-nums}
.email-line.ready{opacity:1;pointer-events:auto;color:var(--text);cursor:pointer;
  border-color:rgba(124,92,255,.55);
  background:linear-gradient(135deg,rgba(124,92,255,.16),rgba(34,211,238,.1));
  animation:emailReady 2.6s ease-in-out infinite}
.email-line.ready:hover{transform:translateY(-2px);border-color:var(--brand)}
.email-line.ready i{color:var(--brand2);font-weight:700}
@keyframes emailReady{0%,100%{box-shadow:0 0 0 0 rgba(124,92,255,.28)}50%{box-shadow:0 0 0 9px rgba(124,92,255,0)}}

/* восстановление */
.rec-list{display:flex;flex-direction:column;gap:10px}
.rec{display:flex;align-items:center;gap:13px;width:100%;padding:14px;border-radius:16px;text-align:left;
  background:var(--panel2);border:1.5px solid var(--line);transition:transform .25s var(--sp),border-color .25s,background .25s}
.rec:hover{transform:translateY(-2px);border-color:var(--brand);background:var(--panel3)}
.rec span{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-size:20px;flex:none;
  background:linear-gradient(135deg,rgba(124,92,255,.24),rgba(34,211,238,.18))}
.rec b{font-size:14.5px}
.rec i{font-style:normal;font-size:12px;color:var(--muted);display:block;margin-top:2px}
.rec b,.rec i{display:block}

/* блеск на главной кнопке */
.step .btn.primary{position:relative;overflow:hidden}
.step .btn.primary::after{content:'';position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-18deg);transition:left .7s var(--ease)}
.step .btn.primary:hover::after{left:130%}
.step .btn.primary:disabled{opacity:.5;filter:grayscale(.3);cursor:not-allowed}
.step .btn.primary:disabled::after{display:none}

@media (max-width:480px){
  .art-stage{height:168px}
  .art-img{width:136px;height:136px}
  .db{width:31px;height:43px;font-size:19px}
  .digits.code .db{width:41px;height:52px;font-size:23px}
  .step h1{font-size:23px}
}

/* ═════════════ 2FA · УСТРОЙСТВА · QR-ВХОД ═════════════ */
/* кнопка «Войти по QR-коду» под полем телефона */
.qr-entry{display:flex;align-items:center;gap:10px;justify-content:center;width:100%;
  margin-top:16px;padding:13px 16px;border-radius:15px;
  background:var(--chip);color:var(--muted);font-size:13.5px;font-weight:600;
  border:1px dashed var(--line);transition:.28s var(--ease)}
.qr-entry svg{width:18px;height:18px;opacity:.8}
.qr-entry:hover{color:var(--text);background:var(--hover);border-color:var(--brand);transform:translateY(-1px)}
@media (pointer:coarse){.qr-entry{display:none}}

/* показать пароль */
.check-row{display:flex;align-items:center;gap:8px;margin-top:12px;
  font-size:12.5px;color:var(--muted);cursor:pointer;user-select:none}
.check-row input{width:16px;height:16px;accent-color:var(--brand);margin:0}
.check-row:hover{color:var(--text)}
.show-pass{display:flex;align-items:center;gap:8px;margin-top:11px;font-size:12.5px;color:var(--muted);cursor:pointer;user-select:none}
.show-pass input{width:16px;height:16px;accent-color:var(--brand);margin:0}
.show-pass:hover{color:var(--text)}

/* QR-код на экране входа */
.qr-box{position:relative;width:240px;height:240px;margin:2px auto 16px}
.qr-corner{position:absolute;width:28px;height:28px;border:2.5px solid var(--brand);opacity:.85;
  animation:qrcorner 3.2s var(--ease) infinite}
.qr-corner.tl{top:-6px;left:-6px;border-right:0;border-bottom:0;border-radius:8px 0 0 0}
.qr-corner.tr{top:-6px;right:-6px;border-left:0;border-bottom:0;border-radius:0 8px 0 0}
.qr-corner.bl{bottom:-6px;left:-6px;border-right:0;border-top:0;border-radius:0 0 0 8px}
.qr-corner.br{bottom:-6px;right:-6px;border-left:0;border-top:0;border-radius:0 0 8px 0}
@keyframes qrcorner{0%,100%{opacity:.35;transform:scale(.92)}50%{opacity:1;transform:scale(1)}}
.qr-frame{position:relative;width:228px;height:228px;margin:auto;border-radius:18px;overflow:hidden;
  background:#fff;box-shadow:0 14px 40px rgba(124,92,255,.28);
  display:grid;place-items:center;transition:.35s var(--sp)}
.qr-frame svg{width:100%;height:100%;display:block;animation:qrin .55s var(--sp) both}
@keyframes qrin{from{opacity:0;transform:scale(.86) rotate(-4deg)}to{opacity:1;transform:none}}
.qr-logo{position:absolute;width:46px;height:46px;border-radius:13px;
  background:var(--grad);box-shadow:0 0 0 4px #fff,0 8px 20px rgba(124,92,255,.4);
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:19px;
  top:50%;left:50%;transform:translate(-50%,-50%);padding:5px}
.qr-logo img{width:100%;height:100%;display:block;border-radius:8px}
.qr-line{position:absolute;left:8px;right:8px;height:2.5px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--brand2),transparent);
  box-shadow:0 0 14px var(--brand2);animation:qrscan 2.6s var(--ease) infinite}
@keyframes qrscan{0%{top:6px;opacity:0}10%{opacity:1}90%{opacity:1}100%{top:calc(100% - 8px);opacity:0}}
.qr-loading{position:absolute;inset:0;display:grid;place-items:center;gap:12px;
  font-size:13px;color:var(--muted)}
.spin{width:34px;height:34px;border-radius:50%;border:2.5px solid var(--chip);
  border-top-color:var(--brand);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.qr-timer{margin:0 0 6px;font-size:13px;color:var(--muted);text-align:center}
.qr-manual{margin:0 0 8px;font-size:12px;color:var(--muted);text-align:center}
.qr-manual b{display:block;margin-top:5px;font-size:13px;color:var(--brand2);font-weight:650;
  letter-spacing:.1em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-all}
.qr-waiting{display:flex;align-items:center;gap:9px;justify-content:center;
  font-size:13px;color:var(--muted)}
.qr-waiting .spin{width:15px;height:15px;border-width:2px}
.qr-waiting .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);
  animation:qrblink 1.4s ease-in-out infinite;box-shadow:0 0 0 0 rgba(55,214,122,.5)}
@keyframes qrblink{0%,100%{transform:scale(.8);opacity:.5}50%{transform:scale(1.15);opacity:1}}

/* варианты восстановления */
.rec-list{display:flex;flex-direction:column;gap:8px;margin:6px 0 4px}
.rec{display:flex;flex-direction:column;gap:3px;text-align:left;padding:12px 13px;border-radius:14px;
  background:var(--chip);transition:.22s var(--ease);border:1px solid transparent}
.rec span{font-size:19px}
.rec b{font-size:14px}
.rec i{font-style:normal;font-size:12px;color:var(--muted)}
.rec:hover{background:var(--hover);border-color:var(--brand);transform:translateX(3px)}

/* подсказка к паролю */
.hint-box{display:flex;gap:11px;align-items:flex-start;text-align:left;
  padding:13px 14px;border-radius:15px;margin:4px 0 18px;
  background:linear-gradient(135deg,rgba(34,211,238,.12),rgba(124,92,255,.1));
  border:1px solid rgba(124,92,255,.22);animation:hintin .5s var(--sp) both .1s}
@keyframes hintin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hint-box .hb-ic{font-size:20px;line-height:1.1}
.hint-box b{display:block;font-size:11px;text-transform:uppercase;
  letter-spacing:.09em;color:var(--muted);font-weight:700;margin-bottom:3px}
.hint-box i{display:block;font-style:normal;font-size:14.5px;font-weight:650;
  color:var(--text);word-break:break-word}

/* список настроек */
.sec-list{display:flex;flex-direction:column;gap:6px}
.sec-row{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:14px;
  background:var(--chip);text-align:left;transition:.22s var(--ease)}
.sec-row:hover{background:var(--hover);transform:translateX(3px)}
.sec-row .sr-ic{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  background:var(--panel2);font-size:16px;flex:0 0 auto}
.sec-row .sr-t{flex:1;display:flex;flex-direction:column;gap:1px;font-size:14px;font-weight:600}
.sec-row .sr-t i{font-style:normal;font-size:11.5px;color:var(--muted);font-weight:500}
.sec-row .sr-t i.on{color:var(--ok)}
.sec-row .sr-arrow{color:var(--muted);font-size:19px}

/* устройства */
.dev-list{display:flex;flex-direction:column;gap:8px;margin:6px 0 14px;max-height:46vh;overflow:auto}
.dev-skel{height:58px;border-radius:15px;background:var(--chip);position:relative;overflow:hidden}
.dev-skel::after{content:'';position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);animation:skim 1.2s infinite}
@keyframes skim{to{transform:translateX(100%)}}
.dev-row{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:15px;
  background:var(--chip);transition:.28s var(--ease);animation:devin .38s var(--sp) both}
.dev-row:nth-child(2){animation-delay:.05s}.dev-row:nth-child(3){animation-delay:.1s}
.dev-row:nth-child(4){animation-delay:.15s}.dev-row:nth-child(5){animation-delay:.2s}
@keyframes devin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.dev-row:hover{background:var(--hover)}
.dev-row.cur{border:1px solid rgba(124,92,255,.35);background:linear-gradient(135deg,rgba(124,92,255,.12),transparent)}
.dev-row.removing{opacity:0;transform:translateX(40px) scale(.94);height:0;padding:0;margin-top:-8px}
.dev-ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:var(--panel2);font-size:18px;flex:0 0 auto}
.dev-m{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.dev-m b{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dev-m b em{font-style:normal;font-size:10.5px;color:var(--brand2);font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;margin-left:6px}
.dev-m i{font-style:normal;font-size:11.5px;color:var(--muted)}
.dev-live{font-size:10.5px;font-weight:700;color:var(--ok);text-transform:uppercase;letter-spacing:.06em;
  display:flex;align-items:center;gap:5px}
.dev-live::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 0 0 rgba(55,214,122,.6);animation:pulse 1.8s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(55,214,122,0)}100%{box-shadow:0 0 0 0 rgba(55,214,122,0)}}
.dev-kill{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  background:var(--panel2);color:var(--muted);flex:0 0 auto;transition:.22s var(--sp)}
.dev-kill svg{width:17px;height:17px}
.dev-kill:hover{background:rgba(255,90,106,.16);color:var(--danger);transform:scale(1.12) rotate(90deg)}

/* запрос входа по QR */
.qr-ask,.qr-ok{text-align:center}
.qa-art{width:88px;height:88px;margin:4px auto 12px;border-radius:26px;display:grid;place-items:center;
  font-size:40px;background:var(--grad);color:#fff;
  box-shadow:0 14px 34px rgba(124,92,255,.42);animation:qabob 2.6s var(--ease) infinite}
@keyframes qabob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-7px) rotate(3deg)}}
.qa-card{display:flex;flex-direction:column;gap:1px;border-radius:15px;overflow:hidden;
  background:var(--chip);margin:6px 0 12px;text-align:left}
.qa-row{display:flex;justify-content:space-between;gap:12px;padding:10px 13px;background:var(--panel2);font-size:13px}
.qa-row span{color:var(--muted)}
.qa-row b{font-weight:650;text-align:right;word-break:break-word}
.qa-row b.ok-t{color:var(--ok)}
.ok-check{width:80px;height:80px;margin:6px auto 12px;border-radius:50%;
  background:radial-gradient(circle at 50% 120%,rgba(55,214,122,.35),transparent 70%),rgba(55,214,122,.12);
  display:grid;place-items:center;animation:okin .6s var(--sp) both}
@keyframes okin{from{transform:scale(.5);opacity:0}to{transform:none;opacity:1}}
.ok-check svg{width:40px;height:40px;stroke:var(--ok);stroke-width:2.6;
  stroke-dasharray:30;stroke-dashoffset:30;animation:okdraw .5s var(--ease) .25s forwards}
@keyframes okdraw{to{stroke-dashoffset:0}}

/* сканер камеры */
.qrscan{position:fixed;inset:0;z-index:90;display:grid;place-items:center;
  background:rgba(6,9,18,.72);backdrop-filter:blur(10px);
  opacity:0;transition:opacity .3s var(--ease)}
.qrscan.in{opacity:1}
.qs-card{width:min(420px,calc(100vw - 32px));border-radius:22px;padding:18px;
  background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);
  transform:translateY(18px) scale(.96);transition:transform .38s var(--sp)}
.qrscan.in .qs-card{transform:none}
.qs-card header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.qs-card header b{font-size:16px}
.qs-stage{display:flex;flex-direction:column;align-items:center;gap:12px}
.qs-view{position:relative;width:min(320px,calc(100vw - 76px));aspect-ratio:1;border-radius:20px;
  overflow:hidden;background:#0b1220;border:1px solid var(--line)}
.qs-view video{width:100%;height:100%;object-fit:cover;display:block}
.qs-corner{position:absolute;width:26px;height:26px;border:3px solid var(--brand2);z-index:2}
.qs-corner.tl{top:10px;left:10px;border-right:0;border-bottom:0;border-radius:9px 0 0 0}
.qs-corner.tr{top:10px;right:10px;border-left:0;border-bottom:0;border-radius:0 9px 0 0}
.qs-corner.bl{bottom:10px;left:10px;border-right:0;border-top:0;border-radius:0 0 0 9px}
.qs-corner.br{bottom:10px;right:10px;border-left:0;border-top:0;border-radius:0 0 9px 0}
.qs-line{position:absolute;left:14px;right:14px;height:2px;z-index:2;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--brand2),transparent);
  box-shadow:0 0 16px var(--brand2);animation:qrscan 2.4s var(--ease) infinite}
.qs-hint{font-size:12.5px;color:var(--muted);text-align:center}
.qs-actions{margin-top:14px}
.qs-actions .btn{width:100%}
.qs-form{display:flex;flex-direction:column;gap:10px}
.qs-input{width:100%;padding:13px 14px;border-radius:14px;border:1px solid var(--line);
  background:var(--panel2);color:var(--text);font-size:14px;outline:none;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;transition:.2s var(--ease)}
.qs-input:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(124,92,255,.14);background:var(--panel3)}

/* ═══════════ КАДРИРОВАНИЕ АВАТАРКИ ═══════════ */
.cropper{position:fixed;inset:0;z-index:130;display:grid;place-items:center;padding:16px;
  background:rgba(6,9,18,.82);backdrop-filter:blur(10px);opacity:0;transition:opacity .3s var(--ease)}
.cropper.in{opacity:1}
.cp-card{width:min(400px,100%);background:var(--panel);border:1px solid var(--line);border-radius:22px;
  padding:18px;box-shadow:var(--shadow);transform:translateY(18px) scale(.96);transition:transform .4s var(--sp)}
.cropper.in .cp-card{transform:none}
.cp-card header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.cp-card header b{font-size:17px}
.cp-stage{position:relative;width:100%;aspect-ratio:1;border-radius:20px;overflow:hidden;
  background:#0b1220;touch-action:none;cursor:grab;user-select:none}
.cp-stage.drag{cursor:grabbing}
.cp-stage img,.cp-stage video{width:100%;height:100%;object-fit:cover;display:block;
  transform-origin:center center;will-change:transform;pointer-events:none}
.cp-mask{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,transparent 0 49.5%,rgba(6,9,18,.66) 50%)}
.cp-ring{position:absolute;inset:0;pointer-events:none;border-radius:50%;
  border:2px solid rgba(255,255,255,.9);box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.cp-stage.drag .cp-ring{border-color:var(--brand2)}
.cp-row{display:flex;align-items:center;gap:10px;margin-top:14px}
.cp-row input[type=range]{flex:1;accent-color:var(--brand);height:4px}
.cp-ic{font-size:15px;flex:none}
.cp-reset{flex:none;font-size:12px;color:var(--muted);padding:6px 10px;border-radius:10px;background:var(--chip)}
.cp-reset:hover{color:var(--text);background:var(--hover)}
.cp-row.trim b{flex:none;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.cp-hint{margin:10px 0 0;font-size:12px;color:var(--muted);text-align:center}

/* ═══════════ ЭКРАН ПРОФИЛЯ (премиальный) ═══════════ */
.prof{
  position:relative;text-align:center;
  --h1:#7c5cff; --h2:#22d3ee; --rx:0deg; --ry:0deg; --sx:50%; --sy:50%;
}
.prof.tinted .pf-halo{opacity:.55}
/* мягкие световые пятна под цвет аватарки */
.prof-aura{position:absolute;left:0;right:0;top:-30px;height:330px;pointer-events:none;z-index:0;
  filter:blur(44px);opacity:0;transition:opacity .8s var(--ease)}
.prof.tinted .prof-aura{opacity:.55}
.prof-aura span{position:absolute;border-radius:50%;display:block;
  background:radial-gradient(circle at 42% 42%,var(--h1),transparent 68%)}
.prof-aura span:nth-child(1){width:230px;height:230px;left:2%;top:20px;animation:auraA 12s ease-in-out infinite}
.prof-aura span:nth-child(2){width:200px;height:200px;right:2%;top:0;background:radial-gradient(circle at 50% 50%,var(--h2),transparent 68%);animation:auraA 15s ease-in-out infinite reverse}
.prof-aura span:nth-child(3){width:170px;height:170px;left:38%;top:110px;opacity:.7;animation:auraB 18s ease-in-out infinite}
@keyframes auraA{50%{transform:translate(26px,22px) scale(1.14)}}
@keyframes auraB{50%{transform:translate(-30px,-16px) scale(1.1)}}

/* герой: аватарка в объёмном ореоле */
.prof-hero{position:relative;width:min(296px,72vw);aspect-ratio:1;margin:2px auto 20px;
  perspective:900px;z-index:1;animation:pfRise .7s var(--sp) both}
.pf-halo{position:absolute;inset:-8%;border-radius:50%;opacity:.42;filter:blur(22px);
  background:conic-gradient(from 0deg,var(--h1),var(--h2),var(--h1));animation:pfSpin 11s linear infinite}
.pf-orbit{position:absolute;inset:-3%;border-radius:50%;
  box-shadow:0 0 46px rgba(0,0,0,.42), inset 0 0 26px rgba(255,255,255,.06);
  border:1px solid var(--line)}
.pf-orbit::after{content:"";position:absolute;inset:-1px;border-radius:50%;
  background:conic-gradient(from 210deg,transparent 0 60%,rgba(255,255,255,.85) 73%,transparent 84%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));
  animation:pfSpin 7s linear infinite}
@keyframes pfSpin{to{transform:rotate(360deg)}}

.prof-av{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:#0d1424;
  transform:rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .4s var(--ease);
  box-shadow:0 30px 60px rgba(4,7,16,.55), 0 8px 22px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.12)}
.pf-track{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;position:relative;z-index:2}
.pf-track::-webkit-scrollbar{display:none}
.pf-slide{flex:0 0 100%;height:100%;scroll-snap-align:center;position:relative;overflow:hidden;background:var(--panel2)}
.pf-slide.empty{display:grid;place-items:center}
.avatar.xxl{width:132px;height:132px;font-size:62px}
.pf-slide img,.pf-slide video{width:100%;height:100%;object-fit:cover;display:block;
  transform:translate(calc(var(--ax,0) * 100%),calc(var(--ay,0) * 100%)) scale(var(--as,1));
  transform-origin:center center;background:var(--panel2)}
.prof.switch .pf-slide img,.prof.switch .pf-slide video{animation:pfFade .5s var(--ease) both}
@keyframes pfFade{from{opacity:.35}to{opacity:1}}
/* стеклянный блик и объём поверх кадра */
.pf-glass{position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:50%;
  background:
    radial-gradient(120% 90% at var(--sx) var(--sy),rgba(255,255,255,.20),transparent 52%),
    linear-gradient(180deg,rgba(255,255,255,.12),transparent 40%,rgba(0,0,0,.42))}
.pf-shine{position:absolute;top:-60%;left:-40%;width:55%;height:220%;z-index:4;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:rotate(16deg);filter:blur(3px);animation:pfShine 1.6s .45s var(--ease) both}
@keyframes pfShine{from{left:-40%;opacity:0}20%{opacity:1}to{left:120%;opacity:0}}

.pf-nav{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;
  z-index:5;background:rgba(10,14,24,.42);color:#fff;font-size:21px;line-height:1;
  display:grid;place-items:center;backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.14);
  opacity:.75;transition:opacity .25s,transform .25s var(--sp)}
.pf-nav:hover{opacity:1;transform:translateY(-50%) scale(1.08)}
.pf-nav.prev{left:-6px}.pf-nav.next{right:-6px}
.pf-dots{position:absolute;bottom:-15px;left:0;right:0;display:flex;justify-content:center;gap:5px;z-index:5}
.pf-dots span{width:22px;height:3px;border-radius:3px;background:var(--chip);overflow:hidden;position:relative;
  transition:background .3s var(--ease),box-shadow .3s}
.pf-dots span.on{background:linear-gradient(90deg,var(--h1),var(--h2));box-shadow:0 0 12px var(--h1)}
.pf-dots span.on::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);animation:pfDot 1.7s linear infinite}
@keyframes pfDot{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

.pf-add,.pf-eye{position:absolute;bottom:10px;width:42px;height:42px;border-radius:50%;z-index:5;
  display:grid;place-items:center;color:#fff;transition:transform .3s var(--sp),box-shadow .3s}
.pf-add{right:14px;background:var(--grad);box-shadow:0 12px 26px rgba(124,92,255,.5)}
.pf-add::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid rgba(124,92,255,.55);
  animation:pfPulse 2.6s ease-out infinite}
@keyframes pfPulse{0%{transform:scale(.92);opacity:.9}70%{transform:scale(1.25);opacity:0}100%{opacity:0}}
.pf-eye{left:14px;background:rgba(10,14,24,.5);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.16);box-shadow:none}
.pf-add:hover,.pf-eye:hover{transform:scale(1.1)}
.pf-add svg,.pf-eye svg{width:20px;height:20px;stroke-width:2.2}

/* имя, ник, теги */
.prof-name{margin:0 0 4px;animation:pfRise .7s .08s var(--sp) both}
.prof-name h3{margin:0;font-size:24px;font-weight:800;letter-spacing:-.028em}
.prof-name p{margin:5px 0 0;font-size:13.5px;color:var(--muted)}
.prof-tags{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;margin-top:11px;
  animation:pfRise .7s .14s var(--sp) both}
.tag{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:99px;
  font-size:11.5px;font-weight:650;color:var(--muted);background:var(--chip);border:1px solid var(--line)}
.tag.live{color:var(--ok)}
.tag.live i{width:6px;height:6px;border-radius:50%;background:var(--ok);animation:livePulse 2.2s infinite}
@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(55,214,122,.55)}70%{box-shadow:0 0 0 7px rgba(55,214,122,0)}100%{box-shadow:0 0 0 0 rgba(55,214,122,0)}}

.prof-actions{display:flex;gap:9px;margin:15px 0 0;flex-wrap:wrap;animation:pfRise .7s .2s var(--sp) both}
.pbtn{position:relative;flex:1;min-width:118px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 14px;border-radius:15px;font-size:13.5px;font-weight:650;color:var(--text);
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.015)),var(--panel2);
  border:1px solid var(--line);
  box-shadow:0 8px 20px rgba(6,10,22,.28), inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .3s var(--sp),box-shadow .3s,border-color .3s}
.pbtn:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(6,10,22,.34), inset 0 1px 0 rgba(255,255,255,.12);border-color:rgba(124,92,255,.45)}
.pbtn:active{transform:translateY(0) scale(.985)}
.pbtn span{font-size:14px;line-height:1}
.pbtn.danger{color:#ff9db0}
.pbtn.danger:hover{border-color:rgba(255,90,106,.45)}

.prof-card{margin-top:15px;padding:15px;border-radius:20px;text-align:left;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.012)),var(--panel2);
  border:1px solid var(--line);
  box-shadow:0 18px 44px rgba(4,7,16,.34), inset 0 1px 0 rgba(255,255,255,.07);
  animation:pfRise .7s .26s var(--sp) both}
.prof-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.prof-card-head b{font-size:11.5px;text-transform:uppercase;letter-spacing:.11em;color:var(--muted)}
.prof-card-head i{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.prof-hint{margin:12px 0 0;font-size:12px;color:var(--muted)}

.pf-thumbs{display:flex;gap:10px;flex-wrap:wrap}
.pf-thumb{position:relative;width:60px;height:60px;border-radius:50%;flex:none;overflow:hidden;
  background:var(--chip);border:1px solid var(--line);
  box-shadow:0 10px 22px rgba(4,7,16,.3);
  transition:transform .32s var(--sp),box-shadow .32s,border-color .32s}
.pf-thumb:hover{transform:translateY(-3px) scale(1.06);box-shadow:0 16px 30px rgba(4,7,16,.4)}
.pf-thumb.sel{box-shadow:0 0 0 3px var(--h1), 0 14px 28px rgba(4,7,16,.4)}
.pf-thumb.main{border-color:transparent}
.pf-thumb.main::after{content:"";position:absolute;inset:-1px;border-radius:50%;padding:1.5px;
  background:conic-gradient(from 0deg,var(--h1),var(--h2),var(--h1));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.pf-thumb .pf-slide{position:absolute;inset:0;width:100%;height:100%}
.pf-thumb .pf-slide video{pointer-events:none}
.pf-crown{position:absolute;bottom:0;right:0;width:18px;height:18px;border-radius:50%;
  background:var(--grad);color:#fff;font-size:9px;display:grid;place-items:center;
  box-shadow:0 3px 8px rgba(0,0,0,.45)}
.pf-kind{position:absolute;top:1px;left:1px;font-size:10px;line-height:15px;padding:0 4px;border-radius:8px;
  background:rgba(4,7,16,.55);backdrop-filter:blur(4px)}
.pf-thumb.add{display:grid;place-items:center;gap:1px;border-style:dashed;border-color:var(--muted);color:var(--muted)}
.pf-thumb.add svg{width:19px;height:19px}
.pf-thumb.add span{font-size:9.5px;font-weight:650}
.pf-thumb.add:hover{border-color:var(--brand);color:var(--text)}

@keyframes pfRise{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
[data-theme="light"] .pf-glass{background:
  radial-gradient(120% 90% at var(--sx) var(--sy),rgba(255,255,255,.5),transparent 55%),
  linear-gradient(180deg,rgba(255,255,255,.25),transparent 45%,rgba(16,23,40,.16))}
[data-theme="light"] .pbtn{background:linear-gradient(180deg,#fff,rgba(255,255,255,.6)),var(--panel2)}
[data-theme="light"] .pf-nav{background:rgba(255,255,255,.72);color:#101728}
[data-theme="light"] .pf-eye{background:rgba(255,255,255,.72);color:#101728}

/* ═══════════ ПРОСМОТР АВАТАРКИ НА ВЕСЬ ЭКРАН ═══════════ */
.avview{position:fixed;inset:0;z-index:300;display:grid;place-items:center;
  background:rgba(4,7,15,.9);backdrop-filter:blur(14px);opacity:0;transition:opacity .35s var(--ease);
  --h1:#7c5cff;--h2:#22d3ee}
.avview.in{opacity:1}
.avv-aura{position:absolute;width:min(120vw,900px);aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,var(--h1),transparent 62%);opacity:0;filter:blur(60px);
  transition:opacity .6s var(--ease)}
.avview.tinted .avv-aura{opacity:.4}
.avv-stage{position:relative;width:min(84vw,440px);aspect-ratio:1;border-radius:50%;overflow:hidden;
  background:#000;box-shadow:0 40px 90px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.12),
    inset 0 0 0 1px rgba(255,255,255,.08);
  animation:avvPop .45s var(--sp) both}
@keyframes avvPop{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
.avv-stage img,.avv-stage video{width:100%;height:100%;object-fit:cover;display:block;
  transform:translate(calc(var(--ax,0) * 100%),calc(var(--ay,0) * 100%)) scale(var(--as,1))}
.avv-glass{position:absolute;inset:0;pointer-events:none;border-radius:50%;
  background:radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.16),transparent 50%),
    linear-gradient(180deg,rgba(255,255,255,.08),transparent 45%,rgba(0,0,0,.4))}
.avv-x{position:absolute;top:16px;right:16px;width:42px;height:42px;border-radius:50%;z-index:5;
  background:rgba(255,255,255,.12);color:#fff;font-size:16px;backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.16);transition:transform .25s var(--sp),background .25s}
.avv-x:hover{transform:scale(1.08);background:rgba(255,255,255,.2)}
.avv-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;
  z-index:5;background:rgba(255,255,255,.12);color:#fff;font-size:26px;line-height:1;
  display:grid;place-items:center;backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.14);
  transition:transform .25s var(--sp),background .25s}
.avv-nav:hover{background:rgba(255,255,255,.2);transform:translateY(-50%) scale(1.06)}
.avv-nav.prev{left:14px}.avv-nav.next{right:14px}
.avv-dots{position:absolute;bottom:52px;left:0;right:0;display:flex;justify-content:center;gap:6px}
.avv-dots span{width:24px;height:3px;border-radius:3px;background:rgba(255,255,255,.25);transition:background .3s}
.avv-dots span.on{background:linear-gradient(90deg,var(--h1),var(--h2))}
.avv-count{position:absolute;bottom:24px;left:0;right:0;text-align:center;
  color:rgba(255,255,255,.72);font-size:13px;letter-spacing:.02em}

@media (prefers-reduced-motion:reduce){
  .pf-halo,.pf-orbit::after,.prof-aura span,.pf-add::after,.pf-dots span.on::after,.tag.live i{animation:none!important}
  .prof-hero,.prof-name,.prof-tags,.prof-actions,.prof-card{animation-duration:.01s!important}
}

/* ═══════════ ПОЛЕ @НИКА ═══════════ */
.handle-inp{display:flex;align-items:center;gap:7px;background:var(--panel2);
  border:1px solid var(--line);border-radius:13px;padding:0 13px;transition:.2s var(--ease)}
.handle-inp:focus-within{border-color:var(--brand);box-shadow:0 0 0 4px rgba(124,92,255,.14)}
.handle-inp b{color:var(--muted);font-size:15.5px;font-weight:600}
.handle-inp input{flex:1;background:none;border:0;padding:13px 0;outline:none;font-size:15px;min-width:0}
.h-status{margin:9px 0 0;font-size:12.5px;color:var(--muted);min-height:18px}
.h-status.ok{color:var(--ok)}
.h-status.err{color:var(--danger)}

/* ============================================================
   ЗАКРЕПЛЁННЫЕ ЧАТЫ
   ============================================================ */
.pin-block{margin:6px 8px 2px;position:relative}
.pin-head{display:flex;align-items:center;gap:8px;padding:6px 10px 8px;color:var(--muted);
  font-size:11.5px;font-weight:650;letter-spacing:.06em;text-transform:uppercase}
.pin-head .pin-count{margin-left:auto;font-size:11px;opacity:.7;letter-spacing:0;
  background:var(--chip);padding:2px 8px;border-radius:20px}
.pin-head svg{width:14px;height:14px;stroke-width:2.2}

.ci{position:relative;overflow:hidden}
.ci .pin-ic{position:absolute;right:10px;top:8px;opacity:.5;transition:opacity .25s,transform .3s var(--sp)}
.ci .pin-ic svg{width:13px;height:13px;stroke-width:2.3;fill:currentColor}
.ci:hover .pin-ic{opacity:.95}
.ci.pinned{background:linear-gradient(90deg,color-mix(in srgb,var(--brand) 12%,transparent),transparent 70%)}
.ci.pinned::before{content:'';position:absolute;left:0;top:10%;height:80%;width:3px;border-radius:0 4px 4px 0;
  background:var(--grad);box-shadow:0 0 12px rgba(124,92,255,.6)}
.ci.dragging{opacity:.55;transform:scale(.98)}

/* подгруппы: вложенный уровень с деревом */
.ci.sub{margin-left:16px;position:relative}
.ci.sub::after{content:'';position:absolute;left:-9px;top:0;bottom:0;width:2px;border-radius:2px;
  background:linear-gradient(180deg,transparent,var(--line) 20%,var(--line) 80%,transparent)}
.ci .ci-tree{margin-left:auto;display:flex;align-items:center;gap:4px;color:var(--muted)}
.ci-tag{font-size:10px;font-weight:700;letter-spacing:.03em;padding:1.5px 6px;border-radius:6px;
  background:var(--chip);color:var(--muted);text-transform:uppercase}
.ci-tag.ch{background:color-mix(in srgb,var(--brand2) 18%,transparent);color:#8be6f7}
.ci-tag.grp{background:color-mix(in srgb,var(--brand) 18%,transparent);color:#b9a6ff}

/* ============================================================
   СВАЙП ВНИЗ → ПОИСК
   ============================================================ */
.swipe-search{position:relative;height:0;overflow:hidden;z-index:5;
  transition:height .34s var(--sp);will-change:height}
.swipe-search.open{height:60px}
.ss-pull{height:26px;display:grid;place-items:center}
.ss-pull span{width:52px;height:4px;border-radius:4px;background:var(--line);display:block;
  transition:transform .3s var(--sp),background .3s,width .3s}
.swipe-search.pulling .ss-pull span{background:var(--brand);width:70px}
.swipe-search.armed .ss-pull span{background:var(--grad);box-shadow:0 0 14px rgba(124,92,255,.7)}
.ss-bar{margin:0 12px;display:flex;align-items:center;gap:8px;transform:translateY(-14px);opacity:0;
  transition:transform .34s var(--sp),opacity .3s var(--ease)}
.swipe-search.open .ss-bar{transform:none;opacity:1}
.ss-bar .clear-search,.ss-cancel{opacity:0;pointer-events:none;transition:opacity .3s .05s}
.swipe-search.open .ss-bar .clear-search,.swipe-search.open .ss-cancel{opacity:1;pointer-events:auto}
.ss-cancel{position:absolute;right:12px;bottom:14px;font-size:13.5px;color:var(--brand);font-weight:650;
  padding:6px 10px;border-radius:10px;background:var(--chip)}
.ss-hint{position:absolute;left:0;right:0;bottom:6px;text-align:center;font-size:11.5px;color:var(--muted);
  opacity:0;transition:opacity .25s}
.swipe-search.pulling .ss-hint{opacity:1}

/* ============================================================
   ШАПКА КАНАЛА: НАЗВАНИЕ ПО ЦЕНТРУ, ПОД НИМ ПОДПИСЧИКИ
   ============================================================ */
.chat-head.center-head{position:relative;justify-content:center}
.chat-head.center-head .ch-center{text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px;
  cursor:pointer;padding:2px 10px;border-radius:14px;transition:background .25s}
.chat-head.center-head .ch-center:hover{background:var(--hover)}
.chat-head.center-head .ch-title{font-size:16px;font-weight:700;letter-spacing:-.02em;display:flex;align-items:center;gap:6px}
.chat-head.center-head .ch-sub{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:5px}
.chat-head.center-head .ch-verified{width:15px;height:15px;color:var(--brand2)}
.chat-head.center-head .head-actions{position:absolute;right:12px;display:flex;gap:4px}
.chat-head.center-head .back{position:absolute;left:8px}
.ch-subs .dotlive{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok);
  display:inline-block;animation:pulseDot 2.2s infinite}
@keyframes pulseDot{0%,100%{opacity:1}50%{opacity:.45}}

/* пост канала */
.msg.post .bubble{max-width:min(560px,86vw);border-radius:18px}
.msg.post .post-foot{display:flex;align-items:center;gap:6px;margin-top:8px;padding-top:7px;border-top:1px solid var(--line)}
.pf-btn{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--muted);
  padding:4px 10px;border-radius:10px;background:var(--chip);transition:transform .2s var(--sp),color .25s,background .25s}
.pf-btn:hover{color:var(--text);background:var(--panel3);transform:translateY(-1px)}
.pf-btn:active{transform:scale(.95)}
.pf-btn svg{width:15px;height:15px;stroke-width:2}
.pf-btn.on{color:var(--brand2)}
.views-badge{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--muted);margin-left:auto}
.views-badge svg{width:15px;height:15px}

/* ============================================================
   ПАНЕЛЬ КОММЕНТАРИЕВ
   ============================================================ */
.comments{position:absolute;inset:auto 0 0 0;height:78%;z-index:30;display:flex;flex-direction:column;
  background:color-mix(in srgb,var(--panel) 94%,transparent);backdrop-filter:blur(24px) saturate(150%);
  border-top:1px solid var(--line);border-radius:22px 22px 0 0;box-shadow:0 -20px 50px rgba(5,8,18,.45);
  animation:sheetUp .42s var(--sp) both}
@keyframes sheetUp{from{transform:translateY(30px);opacity:.4}to{transform:none;opacity:1}}
.cm-head{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}
.cm-title{flex:1;text-align:center;display:flex;flex-direction:column}
.cm-title b{font-size:15px}
.cm-title i{font-size:11.5px;color:var(--muted);font-style:normal}
.cm-post{margin:10px 14px 4px;padding:11px 13px;border-radius:14px;background:var(--panel2);
  border:1px solid var(--line);font-size:13.5px;max-height:96px;overflow:hidden;position:relative}
.cm-post::after{content:'';position:absolute;inset:auto 0 0 0;height:34px;
  background:linear-gradient(transparent,var(--panel2))}
.cm-post b{display:block;font-size:12px;color:var(--muted);margin-bottom:3px}
.cm-list{flex:1;overflow:auto;padding:8px 14px 12px;display:flex;flex-direction:column;gap:10px}
.cm-item{display:flex;gap:9px;animation:cmIn .35s var(--sp) both}
@keyframes cmIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.cm-item .avatar{width:32px;height:32px;font-size:15px;flex:0 0 32px}
.cm-body{background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:8px 11px;max-width:82%}
.cm-body .cm-name{font-size:12.5px;font-weight:650;margin-bottom:2px;display:block}
.cm-body .cm-text{font-size:13.8px;white-space:pre-wrap;word-break:break-word}
.cm-body .cm-time{font-size:11px;color:var(--muted);margin-top:3px;display:block;text-align:right}
.cm-composer{display:flex;gap:8px;align-items:center;padding:10px 12px 14px;border-top:1px solid var(--line)}
.cm-composer input{flex:1;background:var(--panel2);border:1.5px solid transparent;border-radius:14px;padding:11px 14px;outline:none}
.cm-composer input:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(124,92,255,.14)}
.cm-empty{text-align:center;color:var(--muted);font-size:13px;padding:26px 10px}

/* ============================================================
   ЭКРАН НАСТРОЕК
   ============================================================ */
.settings-screen{position:fixed;inset:0;z-index:60;display:grid;grid-template-columns:322px 1fr;
  background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(26px) saturate(150%);
  animation:setIn .4s var(--ease) both}
@keyframes setIn{from{opacity:0;transform:translateY(14px) scale(.99)}to{opacity:1;transform:none}}
.set-side{border-right:1px solid var(--line);display:flex;flex-direction:column;background:color-mix(in srgb,var(--panel) 70%,transparent)}
.set-side-head{padding:18px 16px 12px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.set-me{display:flex;gap:12px;align-items:center;width:100%;padding:10px;border-radius:16px;cursor:pointer;
  background:var(--panel2);border:1px solid var(--line);transition:transform .25s var(--sp),box-shadow .3s}
.set-me:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.set-me .avatar{width:54px;height:54px;font-size:24px}
.set-me .sm-meta{min-width:0}
.set-me .sm-name{font-weight:700;font-size:15.5px;display:flex;align-items:center;gap:5px}
.set-me .sm-sub{font-size:12.5px;color:var(--muted)}
.premium-badge{align-self:flex-start;background:linear-gradient(135deg,#ffd479,#ff9f43 60%,#ff6ec7);
  color:#20130a;font-weight:750;font-size:12.5px;padding:7px 14px;border-radius:12px;
  box-shadow:0 8px 22px rgba(255,159,67,.35);transition:transform .25s var(--sp)}
.premium-badge:hover{transform:translateY(-1px) scale(1.02)}
.set-menu{flex:1;overflow:auto;padding:6px 10px 14px}
.set-row{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:14px;cursor:pointer;
  transition:background .22s,transform .22s var(--sp);position:relative}
.set-row:hover{background:var(--hover);transform:translateX(2px)}
.set-row.active{background:linear-gradient(90deg,color-mix(in srgb,var(--brand) 22%,transparent),transparent)}
.set-row.active::before{content:'';position:absolute;left:0;top:22%;height:56%;width:3px;border-radius:3px;background:var(--grad)}
.set-row .sr-ic{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex:0 0 36px;
  background:var(--panel3);border:1px solid var(--line)}
.set-row .sr-ic svg{width:18px;height:18px}
.set-row .sr-t{flex:1;min-width:0}
.set-row .sr-t b{display:block;font-size:14.2px;font-weight:600}
.set-row .sr-t i{font-size:11.8px;color:var(--muted);font-style:normal}
.set-row .sr-arrow{color:var(--muted);opacity:.6}
.set-side-foot{padding:10px 16px 16px;border-top:1px solid var(--line)}
.set-ver{font-size:11.5px;color:var(--muted)}
.set-main{display:flex;flex-direction:column;min-width:0}
.set-head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line)}
.set-head b{font-size:16.5px}
.set-body{flex:1;overflow:auto;padding:20px 22px 40px;max-width:820px;width:100%;
  animation:fadeUp .35s var(--ease) both}
.set-section{margin-bottom:26px}
.set-section>h3{margin:0 0 10px;font-size:12.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.card{background:var(--panel2);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}
.card+.card{margin-top:12px}
.opt{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line);cursor:pointer;
  transition:background .2s}
.opt:last-child{border-bottom:0}
.opt:hover{background:var(--hover)}
.opt .op-t{flex:1;min-width:0}
.opt .op-t b{display:block;font-size:14.3px;font-weight:600}
.opt .op-t i{font-size:12.2px;color:var(--muted);font-style:normal}
.opt .op-hint{font-size:12.5px;color:var(--muted)}

/* переключатель */
.switch{width:50px;height:29px;border-radius:20px;background:var(--panel3);position:relative;flex:0 0 50px;
  border:1px solid var(--line);transition:background .3s var(--ease),box-shadow .3s}
.switch i{position:absolute;top:2.5px;left:2.5px;width:22px;height:22px;border-radius:50%;background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.3);transition:transform .34s var(--sp)}
.switch.on{background:var(--grad);box-shadow:0 0 16px rgba(124,92,255,.45)}
.switch.on i{transform:translateX(21px)}

/* выбор из вариантов */
.seg{display:inline-flex;background:var(--panel3);border-radius:12px;padding:3px;gap:2px;border:1px solid var(--line)}
.seg button{padding:7px 13px;border-radius:9px;font-size:12.8px;color:var(--muted);font-weight:600;transition:all .28s var(--sp)}
.seg button.on{background:var(--panel);color:var(--text);box-shadow:0 3px 10px rgba(0,0,0,.22)}
.radio{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;flex:0 0 22px;
  transition:border-color .25s,box-shadow .25s}
.opt.on .radio{border-color:var(--brand);box-shadow:0 0 12px rgba(124,92,255,.4)}
.opt.on .radio::after{content:'';width:11px;height:11px;border-radius:50%;background:var(--grad);
  animation:radioIn .3s var(--sp) both}
@keyframes radioIn{from{transform:scale(0)}to{transform:scale(1)}}
.slider{-webkit-appearance:none;width:190px;height:5px;border-radius:5px;background:var(--panel3);outline:none}
.slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--grad);
  box-shadow:0 3px 12px rgba(124,92,255,.5);cursor:pointer;transition:transform .2s var(--sp)}
.slider::-webkit-slider-thumb:hover{transform:scale(1.12)}

/* тема оформления */
.themes{display:flex;gap:12px;flex-wrap:wrap;padding:14px 16px}
.theme-card{width:104px;border-radius:14px;overflow:hidden;border:2px solid transparent;cursor:pointer;
  transition:transform .3s var(--sp),border-color .3s,box-shadow .3s}
.theme-card:hover{transform:translateY(-3px) scale(1.02)}
.theme-card.on{border-color:var(--brand);box-shadow:0 8px 26px rgba(124,92,255,.35)}
.tc-prev{height:64px;position:relative;display:flex;flex-direction:column;gap:5px;padding:8px}
.tc-prev span{height:8px;border-radius:5px;display:block}
.tc-name{font-size:11.5px;text-align:center;padding:6px 0;background:var(--panel3);font-weight:600}
.tc-premium{position:absolute;right:5px;top:5px;font-size:10px}

/* премиум-экран */
.prem-hero{border-radius:22px;padding:24px;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#2a1c46,#3a2470 45%,#1d2b52);border:1px solid rgba(255,255,255,.12)}
.prem-hero::before{content:'';position:absolute;width:280px;height:280px;border-radius:50%;right:-70px;top:-90px;
  background:radial-gradient(circle,rgba(255,212,121,.45),transparent 65%);filter:blur(14px);animation:float 18s ease-in-out infinite}
.prem-hero::after{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.12) 1px,transparent 1px);
  background-size:18px 18px;opacity:.4}
.prem-hero h2{margin:0 0 6px;font-size:25px;position:relative;
  background:linear-gradient(135deg,#ffd479,#ff9f43 50%,#ff6ec7);-webkit-background-clip:text;background-clip:text;color:transparent}
.prem-hero p{margin:0 0 18px;color:#e7dcff;font-size:13.8px;max-width:460px;position:relative}
.prem-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin-top:16px}
.prem-card{background:var(--panel2);border:1px solid var(--line);border-radius:16px;padding:14px;
  display:flex;gap:11px;align-items:flex-start;transition:transform .3s var(--sp),box-shadow .3s}
.prem-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.prem-card .pc-ic{font-size:22px;line-height:1}
.prem-card b{display:block;font-size:13.8px;margin-bottom:3px}
.prem-card i{font-size:12.2px;color:var(--muted);font-style:normal}
.prem-star{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:750;padding:1.5px 7px;border-radius:20px;
  background:linear-gradient(135deg,#ffd479,#ff9f43);color:#241606;vertical-align:middle}
.hero-prem{position:relative;z-index:2;display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,#ffd479,#ff9f43 60%,#ff6ec7);
  color:#20130a;font-weight:750;padding:12px 20px;border-radius:14px;box-shadow:0 10px 30px rgba(255,159,67,.35);
  transition:transform .25s var(--sp)}
.hero-prem:hover{transform:translateY(-2px) scale(1.02)}
.hero-prem.off{background:var(--chip);color:var(--text);box-shadow:none}

/* заметки-подсказки в настройках */
.note{display:flex;gap:10px;padding:13px 16px;font-size:12.8px;color:var(--muted);line-height:1.5}
.note b{color:var(--text)}
.badge-new{font-size:10px;font-weight:750;padding:2px 7px;border-radius:20px;background:var(--danger);color:#fff;
  letter-spacing:.02em}

@media (max-width:900px){
  .settings-screen{grid-template-columns:1fr}
  .set-side{position:absolute;inset:0;z-index:2;transform:translateX(0);transition:transform .38s var(--sp)}
  .settings-screen.detail .set-side{transform:translateX(-16%);opacity:0;pointer-events:none}
  .set-main{position:absolute;inset:0;background:var(--bg);transform:translateX(100%);transition:transform .38s var(--sp)}
  .settings-screen.detail .set-main{transform:none}
  .set-body{padding:16px 14px 40px}
  .comments{height:86%}
}

/* ---------- выбор вида чата (новый чат) ---------- */
.kind-row{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:6px 0 14px}
.kind-card{display:flex;flex-direction:column;align-items:center;gap:3px;padding:13px 8px;border-radius:16px;
  background:var(--panel2);border:1.6px solid var(--line);transition:transform .28s var(--sp),border-color .28s,box-shadow .3s}
.kind-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.kind-card.on{border-color:transparent;background:linear-gradient(var(--panel2),var(--panel2)) padding-box,
  var(--grad) border-box;box-shadow:0 8px 24px rgba(124,92,255,.28)}
.kind-card .kc-ic{font-size:21px;line-height:1}
.kind-card b{font-size:13.5px}
.kind-card i{font-size:10.8px;color:var(--muted);font-style:normal;text-align:center;line-height:1.25}
.switch-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ip-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 0;font-size:13.5px}
.ip-row .k{color:var(--muted)}

/* обои чата (выбор) */
.wall-aurora{background:linear-gradient(160deg,#7c5cff,#22d3ee 60%,#0b0f1a)}
/* «сетка» как обои — только для превью в настройках, а не для плитки выбора обоев */
.tc-prev.wall-grid{background:var(--panel3);background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:12px 12px}
.wall-stars{background:radial-gradient(circle at 30% 30%,#fff 1px,transparent 1.6px),radial-gradient(circle at 70% 60%,#fff 1px,transparent 1.6px),#0f1424;
  background-size:38px 38px,52px 52px,auto}
.wall-plain{background:var(--panel2)}
.wall-dawn{background:linear-gradient(150deg,#ffb74d,#ff8aae 58%,#7c5cff)}
.wall-deep{background:linear-gradient(150deg,#1e3678,#3c2878 60%,#0d1024)}
.wall-dawn::after,.wall-deep::after{content:'';position:absolute;inset:0;
  background:radial-gradient(70% 50% at 20% 15%,rgba(255,255,255,.28),transparent 70%);pointer-events:none}

/* вариации формы пузырей */
body.bubbles-corners .msg .bubble{border-radius:14px 14px 14px 4px}
body.bubbles-corners .msg.out .bubble{border-radius:14px 14px 4px 14px}
body.bubbles-flat .msg .bubble{border-radius:8px;box-shadow:none;border:1px solid var(--line)}
body.no-anim *{animation:none!important;transition:none!important}
html{font-size:calc(15px * var(--font-scale,1))}

/* иконки внутри меню чата (закрепить/прочитано/очистить) */
#ctx-menu button svg{width:15px;height:15px;stroke-width:2;vertical-align:-3px;margin-right:7px;opacity:.85}
.pin-head .pin-count{background:color-mix(in srgb,var(--brand) 16%,transparent);border-radius:20px;padding:1px 7px}

/* ============================================================
   СВАЙПЫ И МЕНЮ ЧАТА (как в Telegram) · премиальное оформление
   ============================================================ */

/* ---- строка списка с панелями действий ---- */
.ci-wrap{position:relative;border-radius:18px;overflow:hidden;animation:ciIn .42s var(--sp) both}
.ci-wrap .ci{position:relative;z-index:2;background:var(--panel-solid,var(--panel));
  box-shadow:0 1px 0 rgba(255,255,255,.028) inset;will-change:transform}
.ci-wrap .ci.pinned{background:
  linear-gradient(90deg,color-mix(in srgb,var(--brand) 15%,var(--panel)),var(--panel) 72%)}
.ci-wrap .ci.active{background:linear-gradient(90deg,color-mix(in srgb,var(--brand) 26%,var(--panel)),color-mix(in srgb,var(--brand) 12%,var(--panel)))}
.row-act{position:absolute;top:0;bottom:0;display:flex;align-items:center;z-index:1}
.row-act-left{left:0;width:120px;justify-content:flex-start;padding-left:20px;
  background:linear-gradient(90deg,color-mix(in srgb,#22c55e 34%,transparent),transparent);
  opacity:0;transition:opacity .2s var(--ease)}
.row-act-right{right:0;gap:6px;padding-right:8px;justify-content:flex-end;
  background:linear-gradient(270deg,color-mix(in srgb,#ef4444 26%,transparent),transparent 78%);
  opacity:0;transition:opacity .2s var(--ease)}
.ra-ic{width:30px;height:30px;display:grid;place-items:center;border-radius:12px;color:#c7f9dc;
  background:rgba(34,197,94,.22);box-shadow:0 4px 14px rgba(34,197,94,.25)}
.ra-ic svg{width:17px;height:17px}
.row-btn{width:62px;height:calc(100% - 10px);border:0;border-radius:16px;cursor:pointer;color:#fff;
  display:grid;place-items:center;transition:transform .18s var(--sp),filter .2s var(--ease);
  background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.04));backdrop-filter:blur(6px)}
.row-btn svg{width:21px;height:21px}
.row-btn:hover{transform:translateY(-2px) scale(1.04);filter:brightness(1.15)}
.row-btn:active{transform:scale(.95)}
.row-btn.rb-read{background:linear-gradient(160deg,#22c55e,#15803d);box-shadow:0 8px 22px rgba(34,197,94,.36)}
.row-btn.rb-unread{background:linear-gradient(160deg,#38bdf8,#0369a1);box-shadow:0 8px 22px rgba(56,189,248,.34)}
.row-btn.rb-pin{background:linear-gradient(160deg,#7c5cff,#4f46e5);box-shadow:0 8px 22px rgba(124,92,255,.42)}
.row-btn.rb-mute{background:linear-gradient(160deg,#f59e0b,#d97706);box-shadow:0 8px 22px rgba(245,158,11,.34)}
.row-btn.rb-del{background:linear-gradient(160deg,#ef4444,#b91c1c);box-shadow:0 8px 22px rgba(239,68,68,.36)}
.ci-marks{display:flex;align-items:center;gap:5px;flex:none}
.ci-marks .mark{display:grid;place-items:center;color:var(--muted);opacity:.85}
.ci-marks .mark svg{width:13px;height:13px}
.pin-flag{display:inline-grid;place-items:center;margin-left:6px;vertical-align:-2px;color:var(--brand2)}
.pin-flag svg{width:12px;height:12px;transform:rotate(0deg)}
.badge.mute{background:color-mix(in srgb,var(--muted) 40%,transparent);box-shadow:none;opacity:.85}

/* ---- нижнее меню (bottom sheet) ---- */
.sheet{position:fixed;inset:0;z-index:120;display:flex;align-items:flex-end;justify-content:center}
.sheet.hidden{display:none!important}
.sheet-back{position:absolute;inset:0;background:rgba(6,8,18,.5);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .28s var(--ease)}
.sheet.open .sheet-back{opacity:1}
.sheet-card{position:relative;width:min(460px,100%);margin:0 10px 10px;padding:6px 8px 14px;border-radius:26px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 92%,#fff 3%),var(--panel));
  border:1px solid color-mix(in srgb,var(--brand) 22%,var(--line));
  box-shadow:0 -20px 60px rgba(0,0,0,.55),0 30px 70px rgba(0,0,0,.45),0 1px 0 rgba(255,255,255,.07) inset;
  transform:translateY(102%);will-change:transform;touch-action:none;
  transition:transform .34s var(--sp)}
.sheet.open .sheet-card{transform:translateY(0)}
.sheet-grip{width:44px;height:4px;border-radius:4px;margin:8px auto 2px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--text) 30%,transparent),transparent)}
.sh-head{display:flex;align-items:center;gap:12px;padding:10px 12px 14px;margin-bottom:4px;
  border-bottom:1px solid var(--line)}
.sh-avatar .avatar{width:46px;height:46px;font-size:21px;border-radius:16px}
.sh-t{min-width:0;display:flex;flex-direction:column}
.sh-t b{font-size:15.5px;font-weight:680;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sh-t span{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.sh-item{display:flex;align-items:center;gap:14px;width:100%;padding:13px 14px;margin:2px 0;border:0;cursor:pointer;
  border-radius:18px;background:transparent;color:var(--text);font:inherit;font-size:14.5px;font-weight:560;
  transition:background .2s var(--ease),transform .18s var(--sp)}
.sh-item svg{width:21px;height:21px;flex:none;opacity:.92}
.sh-item:hover{background:var(--hover);transform:translateX(3px)}
.sh-item:active{transform:scale(.985)}
.sh-item.danger{color:#ff7b7b}
.sh-item.danger:hover{background:color-mix(in srgb,#ef4444 14%,transparent)}

/* ---- свайп по сообщению ---- */
.swipe-hint{position:absolute;top:50%;translate:0 -50%;display:grid;place-items:center;color:var(--muted);
  pointer-events:none;transition:opacity .18s var(--ease)}
.swipe-hint svg{width:20px;height:20px}
.swipe-hint[data-side="left"]{left:6px}
.swipe-hint[data-side="right"]{right:6px;rotate:180deg}
.row .bubble{will-change:transform}
.bubble[data-armed="1"]{filter:drop-shadow(0 0 12px color-mix(in srgb,var(--brand) 55%,transparent))}

/* ---- карточка чата (Telegram-стиль) ---- */
.ip-bar{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:10px;padding:12px 14px;
  background:color-mix(in srgb,var(--panel) 88%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.ip-bar b{font-size:15.5px;font-weight:680}
.ip-back{width:34px;height:34px;border:0;border-radius:12px;cursor:pointer;display:grid;place-items:center;
  background:var(--panel2);color:var(--text);transition:transform .18s var(--sp)}
.ip-back svg{width:18px;height:18px}
.ip-back:hover{transform:translateX(-2px)}
.ip-hero2{padding:22px 18px 16px;text-align:center;position:relative;overflow:hidden}
.ip-hero2::before{content:'';position:absolute;inset:-40% -20% auto;height:150%;pointer-events:none;
  background:radial-gradient(60% 60% at 50% 0%,color-mix(in srgb,var(--brand) 26%,transparent),transparent 70%)}
.ip-av2{position:relative;width:96px;height:96px;margin:0 auto 12px;border-radius:32px;padding:3px;
  background:linear-gradient(140deg,var(--brand),var(--brand2));box-shadow:0 18px 40px rgba(0,0,0,.4);
  animation:avPop .5s var(--sp) both}
.ip-av2 .avatar{width:100%;height:100%;font-size:40px;border-radius:29px;cursor:pointer}
@keyframes avPop{from{opacity:0;transform:scale(.86) translateY(8px)}to{opacity:1;transform:none}}
.ip-hero2 h3{font-size:19px;font-weight:720;letter-spacing:-.02em;display:flex;align-items:center;justify-content:center;gap:6px}
.ip-hero2 p{margin-top:4px;font-size:13px;color:var(--muted)}
.ip-quick{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:6px 12px 14px}
.ip-quick button{display:flex;flex-direction:column;align-items:center;gap:7px;padding:11px 4px;border:1px solid var(--line);
  border-radius:18px;background:linear-gradient(180deg,color-mix(in srgb,var(--panel2) 90%,#fff 2%),var(--panel2));
  color:var(--text);cursor:pointer;font:inherit;transition:transform .18s var(--sp),box-shadow .25s var(--ease),border-color .25s}
.ip-quick button:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--brand) 40%,var(--line));
  box-shadow:0 12px 26px rgba(0,0,0,.34)}
.ip-quick button:active{transform:scale(.96)}
.ip-quick span{width:34px;height:34px;display:grid;place-items:center;border-radius:12px;color:#fff;
  background:linear-gradient(140deg,var(--brand),var(--brand2));box-shadow:0 8px 20px color-mix(in srgb,var(--brand) 40%,transparent)}
.ip-quick span svg{width:18px;height:18px}
.ip-quick b{font-size:11px;font-weight:600;color:var(--muted)}
.ip-list{padding:2px 10px 12px;display:flex;flex-direction:column;gap:2px}
.ip-row-btn{display:flex;align-items:center;gap:12px;width:100%;padding:12px 12px;border:0;cursor:pointer;
  border-radius:16px;background:transparent;color:var(--text);font:inherit;text-align:left;
  transition:background .2s var(--ease),transform .18s var(--sp)}
.ip-row-btn:hover{background:var(--hover);transform:translateX(2px)}
.ip-row-btn .ip-ic{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:12px;
  background:linear-gradient(150deg,color-mix(in srgb,var(--brand) 20%,transparent),color-mix(in srgb,var(--brand2) 16%,transparent));
  color:var(--brand2)}
.ip-row-btn .ip-ic svg{width:17px;height:17px}
.ip-lb{flex:1;min-width:0;font-size:14.2px;font-weight:560;display:flex;flex-direction:column;gap:1px}
.ip-lb i{font-style:normal;font-size:12px;color:var(--muted);font-weight:480;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ip-chev{color:var(--muted);opacity:.6}
.ip-chev svg{width:15px;height:15px}
.ip-section{padding:12px 14px 18px;display:flex;flex-direction:column;gap:2px}
.ip-note{padding:12px 6px;font-size:12.8px;line-height:1.45;color:var(--muted)}
.ip-kv{display:flex;align-items:baseline;gap:12px;padding:11px 6px;border-bottom:1px solid var(--line)}
.ip-kv:last-of-type{border-bottom:0}
.ip-kv span{font-size:13px;color:var(--muted);flex:none;min-width:96px}
.ip-kv b{font-size:13.5px;font-weight:600;word-break:break-word}
.ip-kv b.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;color:var(--brand2)}
.ip-you{color:var(--muted);font-weight:400}
.ip-choice{display:flex;align-items:center;gap:10px;width:100%;padding:13px 14px;margin:2px 0;border:1px solid transparent;
  border-radius:16px;background:var(--panel2);color:var(--text);font:inherit;font-size:14px;cursor:pointer;
  transition:background .2s var(--ease),border-color .2s,transform .18s var(--sp)}
.ip-choice:hover{transform:translateX(2px);border-color:color-mix(in srgb,var(--brand) 34%,transparent)}
.ip-choice.on{border-color:color-mix(in srgb,var(--brand) 55%,transparent);
  background:linear-gradient(90deg,color-mix(in srgb,var(--brand) 18%,var(--panel2)),var(--panel2))}
.tick-ok{margin-left:auto;color:var(--brand2);font-weight:700}
.ip-mini{margin-left:auto;width:32px;height:32px;flex:none;border:1px solid var(--line);border-radius:11px;cursor:pointer;
  background:var(--panel2);color:var(--muted);display:grid;place-items:center;transition:all .2s var(--ease)}
.ip-mini svg{width:15px;height:15px}
.ip-mini.on{color:#fff;background:linear-gradient(150deg,var(--brand),var(--brand2));border-color:transparent}
.ip-danger{display:block;width:calc(100% - 28px);margin:6px 14px 20px;padding:13px;border:1px solid color-mix(in srgb,#ef4444 34%,transparent);
  border-radius:18px;background:color-mix(in srgb,#ef4444 12%,transparent);color:#ff8f8f;font:inherit;font-size:14px;font-weight:600;
  cursor:pointer;transition:transform .18s var(--sp),background .2s}
.ip-danger:hover{transform:translateY(-2px);background:color-mix(in srgb,#ef4444 20%,transparent)}
.media-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:10px;padding:4px 0 12px}
.media-cell{display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px 6px;border-radius:18px;
  background:linear-gradient(180deg,var(--panel2),color-mix(in srgb,var(--panel2) 80%,transparent));border:1px solid var(--line)}
.media-cell span{font-size:20px}
.media-cell b{font-size:17px;font-weight:700}
.media-cell i{font-size:11.5px;color:var(--muted);font-style:normal}
.wall-grid.big{grid-template-columns:repeat(3,1fr);gap:12px;padding:6px 4px 12px}
.tc-prev.wall-dawn,.tc-prev.wall-deep,.tc-prev.wall-aurora,.tc-prev.wall-stars,.tc-prev.wall-grid,.tc-prev.wall-plain{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 6px 18px rgba(6,9,18,.35)}
.wall-grid.big .wall{height:76px;border-radius:18px}

/* ---- новые обои: звёзды и сетка ---- */
:root[data-wall="stars"] .chat::before{background:
  radial-gradient(1.6px 1.6px at 22% 28%,rgba(255,255,255,.85),transparent 60%),
  radial-gradient(1.4px 1.4px at 68% 14%,rgba(255,255,255,.7),transparent 60%),
  radial-gradient(1.2px 1.2px at 41% 72%,rgba(255,255,255,.6),transparent 60%),
  radial-gradient(1.8px 1.8px at 82% 62%,rgba(255,255,255,.75),transparent 60%),
  radial-gradient(120% 90% at 20% 0%,#1b1440 0%,#0b0f1e 55%,#080b16 100%);
  animation:twinkle 7s ease-in-out infinite alternate}
@keyframes twinkle{from{filter:brightness(.96)}to{filter:brightness(1.12)}}
:root[data-wall="grid"] .chat::before{background:
  linear-gradient(color-mix(in srgb,var(--brand) 12%,transparent) 1px,transparent 1px) 0 0/38px 38px,
  linear-gradient(90deg,color-mix(in srgb,var(--brand) 12%,transparent) 1px,transparent 1px) 0 0/38px 38px,
  radial-gradient(90% 70% at 60% 10%,#221a4d,#0b0f1e 70%)}
.wall.stars{background:radial-gradient(circle at 30% 30%,#2a1f5c,#0b0f1e 70%),radial-gradient(1.6px 1.6px at 60% 40%,#fff,transparent 60%)}
.wall.grid{background:linear-gradient(rgba(124,92,255,.25) 1px,transparent 1px) 0 0/12px 12px,linear-gradient(90deg,rgba(124,92,255,.25) 1px,transparent 1px) 0 0/12px 12px,#141a2e}

/* ---- приятные мелочи: светлый режим и «без анимаций» ---- */
:root[data-theme="light"] .ci-wrap .ci{background:#fff}
:root[data-theme="light"] .sheet-card{background:linear-gradient(180deg,#fff,#f5f6fb)}
body.no-anim .ci-wrap,body.no-anim .ip-av2,body.no-anim .sheet-card{animation:none!important;transition:none!important}

/* ── жестовые элементы ──────────────────────────────────────────────────
   Анимация появления с fill-mode both «залипает» на элементе и перекрывает
   transform, который ставит свайп (строка уезжала, но визуально стояла).
   backwards — то же появление, но после него элемент снова слушается свайпа. */
.ci-wrap,.ci,.row,.infopanel,.comments,.lightbox,.settings-screen,.sheet-card,.sheet,.ip-card,.media-cell{
  animation-fill-mode:backwards}

/* свайп по полосе фильтров делает приложение, а не прокрутка страницы:
   вертикаль по-прежнему у браузера, горизонталь — у жеста */
#filters{overscroll-behavior-x:contain;touch-action:pan-y}
#filters .chip{touch-action:pan-y}

/* карточка чата и лайтбокс — плотная поверхность, чат за ними не просвечивает */
:root[data-theme="light"] .infopanel{background:#f4f5fa;background-image:linear-gradient(180deg,color-mix(in srgb,var(--brand) 8%,transparent),transparent 320px)}

/* счётчик в просмотрщике фото: «3 / 12» */
.lb-count{flex:none!important;font-size:13px;font-weight:650;letter-spacing:.02em;color:#fff;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:5px 12px;
  backdrop-filter:blur(8px);font-variant-numeric:tabular-nums}
.lb-count:empty{display:none}
/* просмотрщик фото листается — курсор и подсказка */
#lightbox{cursor:grab}
#lightbox:active{cursor:grabbing}

/* панель действий выезжает волной — по кнопке за раз */
.ci-wrap.swiped-left .row-act-right .row-btn{animation:rbIn .34s var(--sp) backwards both}
.ci-wrap.swiped-left .row-act-right .row-btn:nth-child(2){animation-delay:.035s}
.ci-wrap.swiped-left .row-act-right .row-btn:nth-child(3){animation-delay:.07s}
.ci-wrap.swiped-left .row-act-right .row-btn:nth-child(4){animation-delay:.105s}
@keyframes rbIn{from{opacity:0;transform:translateX(14px) scale(.9)}to{opacity:1;transform:none}}
/* за краем строки — мягкая тень, чтобы сдвиг читался как в Telegram */
.ci-wrap.swiped-left .ci{box-shadow:18px 0 34px -18px rgba(0,0,0,.65)}

/* картинки внутри жестовых зон не должны «перетаскиваться» мышью */
#lb-img,.bubble img,.media img,.media video,.ip-av2 img,.pf-slide img{-webkit-user-drag:none;user-drag:none}
.bubble,.media,#lb-img{user-select:none;-webkit-user-select:none}