/* Protected Channel — свой мессенджер GIANT4. Вид — как Telegram, гамма — как чат CRM (графит + фирменный оранжевый).
   Две темы: ночь (по умолчанию) и день; переключатель в меню профиля, выбор помнит устройство. */
:root,[data-theme="night"]{
  --bg:#0E1117; --panel:#161A21; --panel2:#1D222B; --panel3:#252B36; --line:#272D38; --line2:#1f242d;
  --ink:#EDEEF2; --mut:#8B8E98; --mut2:#7A7E8A; --hover:#1B2029; --sel:#FF66001f;
  --accent:#FF6600; --accent-ink:#FF8127; --accent-soft:#FF660022; --glow:#FF8A3D; --on-accent:#fff;
  --ok:#3ECF8E; --red:#FF5D5D; --red-soft:#FF5D5D22; --blue:#5AA7FF;
  --chat-bg:#0B0E13; --pattern:rgba(255,255,255,.035);
  --b-in:#1D222B; --b-in-line:#272D38; --b-out:#3A2410; --b-out-line:#FF66004d;
  --meta:#8B8E98; --meta-out:#D0A47D; --quote-bg:#ffffff0d;
  --shadow:0 14px 40px #000a; --shadow-sm:0 4px 14px #0007;
  --scrim:rgba(6,8,11,.55);
  color-scheme:dark;
}
[data-theme="day"]{
  --bg:#EEF0F3; --panel:#FFFFFF; --panel2:#F3F4F6; --panel3:#E7E9ED; --line:#E1E4E9; --line2:#EDEFF2;
  --ink:#15171C; --mut:#6B707C; --mut2:#8A8F9A; --hover:#F2F3F5; --sel:#FF660017;
  --accent:#FF6600; --accent-ink:#D24E00; --accent-soft:#FF66001a; --glow:#FF7A1F; --on-accent:#fff;
  --ok:#17A06A; --red:#E5484D; --red-soft:#E5484D18; --blue:#2F80ED;
  --chat-bg:#E7E4DE; --pattern:rgba(60,45,30,.07);
  --b-in:#FFFFFF; --b-in-line:#E4E6EA; --b-out:#FFE4CF; --b-out-line:#FFC89E;
  --meta:#8A8F9A; --meta-out:#B56A2E; --quote-bg:#0000000a;
  --shadow:0 14px 40px rgba(20,22,26,.18); --shadow-sm:0 4px 14px rgba(20,22,26,.12);
  --scrim:rgba(20,22,26,.35);
  color-scheme:light;
}
:root{--r:14px;--font:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;--safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px)}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font:15px/1.42 var(--font);-webkit-font-smoothing:antialiased;overflow:hidden;
  -webkit-tap-highlight-color:transparent;overscroll-behavior:none}
button,input,textarea,select{font:inherit;color:inherit}
a{color:var(--accent-ink);text-decoration:none}
a:hover{text-decoration:underline}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--panel3);border-radius:5px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-track{background:transparent}
.hidden{display:none!important}
.sp{flex:1}
.mut{color:var(--mut)}
.small{font-size:12.5px}
svg.i{width:22px;height:22px;flex:none;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
svg.i.fill{fill:currentColor;stroke:none}

/* ── кнопки и поля ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);background:var(--panel2);
  border-radius:12px;padding:10px 16px;cursor:pointer;font-weight:600;font-size:14.5px;transition:background .12s,border-color .12s,transform .08s;
  text-decoration:none!important;color:var(--ink);white-space:nowrap}
.btn:hover{background:var(--panel3)}
.btn:active{transform:scale(.97)}
.btn.acc{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.acc:hover{background:var(--glow);border-color:var(--glow)}
.btn.red{background:var(--red);border-color:var(--red);color:#fff}
.btn.ghost{background:transparent;border-color:transparent}
.btn.ghost:hover{background:var(--hover)}
.btn.block{width:100%}
.btn[disabled]{opacity:.5;pointer-events:none}
.ibtn{width:40px;height:40px;border-radius:50%;border:none;background:transparent;color:var(--mut);display:inline-flex;align-items:center;
  justify-content:center;cursor:pointer;flex:none;transition:background .12s,color .12s,transform .08s;position:relative}
.ibtn:hover{background:var(--hover);color:var(--ink)}
.ibtn:active{transform:scale(.92)}
.ibtn.acc{color:var(--accent)}
.inp{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:11px 14px;outline:none;transition:border-color .12s,background .12s}
.inp:focus{border-color:var(--accent);background:var(--panel)}
label.f{display:block;margin-bottom:12px}
label.f>span{display:block;font-size:12.5px;color:var(--mut);margin:0 0 5px 2px}
.switch{position:relative;width:40px;height:24px;flex:none}
.switch input{opacity:0;position:absolute;inset:0;cursor:pointer;z-index:1;margin:0}
.switch i{position:absolute;inset:0;background:var(--panel3);border-radius:12px;transition:background .15s}
.switch i::after{content:'';position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .15s;box-shadow:0 1px 3px #0005}
.switch input:checked+i{background:var(--accent)}
.switch input:checked+i::after{transform:translateX(16px)}

/* ── аватарки ── */
.ava{width:48px;height:48px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;
  font-size:17px;overflow:hidden;position:relative;user-select:none;letter-spacing:.02em}
.ava img{width:100%;height:100%;object-fit:cover;display:block}
.ava.c1{background:linear-gradient(180deg,#FF885E,#FF516A)}
.ava.c2{background:linear-gradient(180deg,#FFCD6A,#FFA85C)}
.ava.c3{background:linear-gradient(180deg,#82B1FF,#665FFF)}
.ava.c4{background:linear-gradient(180deg,#A0DE7E,#54CB68)}
.ava.c5{background:linear-gradient(180deg,#53EDD6,#28C9B7)}
.ava.c6{background:linear-gradient(180deg,#72D5FD,#2A9EF1)}
.ava.c7{background:linear-gradient(180deg,#E0A2F3,#D669ED)}
.ava.emo-ava img.emo,.ava.emo-ava span{width:58%;height:58%;font-size:1.5em;line-height:1;display:flex;align-items:center;justify-content:center;object-fit:contain}
.ava-wrap{position:relative;flex:none}
.ava-wrap .dot{position:absolute;right:1px;bottom:1px;width:13px;height:13px;border-radius:50%;background:var(--ok);border:2.5px solid var(--panel)}

/* ── тосты, окна, меню ── */
#toasts{position:fixed;left:50%;bottom:calc(24px + var(--safe-b));transform:translateX(-50%);z-index:400;display:flex;flex-direction:column;gap:8px;
  align-items:center;pointer-events:none;width:min(420px,calc(100vw - 32px))}
.toast{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:11px 16px;box-shadow:var(--shadow-sm);
  font-size:14px;animation:tIn .18s ease-out;pointer-events:auto;max-width:100%;text-align:center}
.toast.err{border-color:var(--red);color:var(--red)}
.toast.ok{border-color:var(--ok)}
@keyframes tIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.modal-w{position:fixed;inset:0;background:var(--scrim);z-index:200;display:flex;align-items:center;justify-content:center;padding:16px;
  animation:fadeIn .15s ease-out;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:18px;width:min(440px,100%);max-height:calc(100dvh - 32px);display:flex;
  flex-direction:column;box-shadow:var(--shadow);animation:popIn .16s cubic-bezier(.2,.9,.3,1.1)}
.modal.wide{width:min(560px,100%)}
.modal .mh{display:flex;align-items:center;gap:8px;padding:14px 12px 10px 20px}
.modal .mh h2{font-size:17px;font-weight:700;flex:1;min-width:0}
.modal .mb{padding:4px 20px 16px;overflow:auto;overscroll-behavior:contain}
.modal .mf{padding:12px 20px 16px;display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:none}}
.menu{position:fixed;z-index:260;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:6px;min-width:220px;
  animation:popIn .13s ease-out;transform-origin:top left}
.menu .mi{display:flex;align-items:center;gap:14px;padding:10px 12px;border-radius:9px;cursor:pointer;font-size:14.5px;white-space:nowrap}
.menu .mi:hover{background:var(--hover)}
.menu .mi svg.i{width:20px;height:20px;color:var(--mut)}
.menu .mi.red,.menu .mi.red svg.i{color:var(--red)}
.menu .sep{height:1px;background:var(--line);margin:5px 6px}
.menu .mi .switch{margin-left:auto}

/* ── вход и регистрация ── */
.auth{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:20px 16px;overflow:auto;background:
  radial-gradient(1200px 600px at 50% -10%,var(--accent-soft),transparent 60%),var(--bg)}
.auth-card{width:min(400px,100%);background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:30px 26px 24px;box-shadow:var(--shadow);text-align:center;
  animation:popIn .2s ease-out;margin:auto}
.auth-logo{width:78px;height:78px;margin:0 auto 14px;border-radius:24px;background:linear-gradient(145deg,#FF8A3D,#E85500);display:flex;align-items:center;
  justify-content:center;color:#fff;box-shadow:0 10px 30px #FF660044}
.auth-logo svg.i{width:44px;height:44px;stroke-width:1.6}
.auth h1{font-size:23px;font-weight:800;letter-spacing:-.01em}
.auth .sub{color:var(--mut);margin:6px 0 22px;font-size:14.5px}
.auth .inp{text-align:center;font-size:18px;letter-spacing:.02em;padding:13px 14px}
.auth .btn.block{margin-top:12px;padding:13px 16px;font-size:15.5px;white-space:normal;text-align:center;line-height:1.25}   /* узкий телефон: длинная надпись переносится, а не обрезается */
.auth .or{display:flex;align-items:center;gap:10px;color:var(--mut2);font-size:12.5px;margin:18px 0 6px}
.auth .or::before,.auth .or::after{content:'';flex:1;height:1px;background:var(--line)}
.auth .foot{margin-top:18px;color:var(--mut2);font-size:12.5px}
.auth .who{display:flex;align-items:center;gap:12px;background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin:0 0 16px;text-align:left}
.auth .who b{display:block;font-size:15px}
.auth .steps{text-align:left;margin:4px 0 6px;color:var(--mut);font-size:14px;counter-reset:st}
.auth .steps li{list-style:none;position:relative;padding:5px 0 5px 32px}
.auth .steps li::before{counter-increment:st;content:counter(st);position:absolute;left:0;top:4px;width:22px;height:22px;border-radius:50%;background:var(--accent-soft);
  color:var(--accent-ink);font-weight:700;font-size:12.5px;display:flex;align-items:center;justify-content:center}
.wait{display:flex;flex-direction:column;align-items:center;gap:12px;margin:8px 0 4px;color:var(--mut)}
.spinner{width:34px;height:34px;border-radius:50%;border:3px solid var(--panel3);border-top-color:var(--accent);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.tg-btn{background:#2AABEE!important;border-color:#2AABEE!important;color:#fff!important}
.tg-btn:hover{background:#229ED9!important}

/* ── каркас приложения ── */
.app{position:fixed;left:0;right:0;top:var(--app-top,0px);height:var(--app-h,100%);display:grid;grid-template-columns:minmax(300px,380px) 1fr;background:var(--bg)}
.side{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--panel);border-right:1px solid var(--line)}
.main{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--chat-bg)}
.main::before{content:'';position:absolute;inset:0;background-image:radial-gradient(var(--pattern) 1.1px,transparent 1.4px);background-size:24px 24px;pointer-events:none}
.main>*{position:relative}
.side-head{display:flex;align-items:center;gap:4px;padding:calc(8px + var(--safe-t)) 8px 4px}
.side-head .title{flex:1;min-width:0;text-align:center;font-weight:800;font-size:17px;letter-spacing:-.01em;display:flex;align-items:center;justify-content:center;gap:7px}
.side-head .title svg.i{width:19px;height:19px;color:var(--accent)}
.side-search{display:flex;align-items:center;gap:8px;padding:6px 12px 10px}
.me-btn{border:none;background:none;padding:0;cursor:pointer;border-radius:50%;flex:none}
.me-btn .ava{width:38px;height:38px;font-size:14px}
.sbox{flex:1;position:relative}
.sbox svg.i{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--mut2);pointer-events:none}
.sbox input{width:100%;background:var(--panel2);border:1.5px solid transparent;border-radius:22px;padding:9px 36px 9px 38px;outline:none;font-size:14.5px;transition:border-color .12s,background .12s}
.sbox input:focus{border-color:var(--accent);background:var(--panel)}
.sbox .clr{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:30px;height:30px}
.sbox .clr svg.i{position:static;transform:none;width:16px;height:16px}
.list{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:0 6px 12px}
.grp{padding:12px 12px 6px;color:var(--mut2);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.it{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:12px;cursor:pointer;min-height:64px;user-select:none;-webkit-user-select:none}
.it:hover{background:var(--hover)}
.it.on{background:var(--accent)}
.it.on,.it.on .it-sub,.it.on .it-time,.it.on .it-sub b{color:#fff!important}
.it.on .badge{background:#fff;color:var(--accent)}
.it .ava{width:52px;height:52px;font-size:18px}
.it-body{flex:1;min-width:0}
.it-top{display:flex;align-items:center;gap:6px}
.it-name{font-weight:650;font-size:15.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.it-time{color:var(--mut2);font-size:12.5px;flex:none;display:flex;align-items:center;gap:3px}
.it-time svg.i{width:16px;height:16px;color:var(--accent)}
.it-bot{display:flex;align-items:center;gap:6px;margin-top:2px}
.it-sub{flex:1;min-width:0;color:var(--mut);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.it-sub b{color:var(--ink);font-weight:500}
.it-sub .typing{color:var(--accent-ink)}
.it-sub img.emo{width:18px;height:18px;vertical-align:-4px}
.it-sub mark,.hl{background:var(--accent-soft);color:var(--accent-ink);border-radius:3px;padding:0 1px}
.badge{min-width:22px;height:22px;border-radius:11px;background:var(--accent);color:#fff;font-size:12.5px;font-weight:700;display:flex;align-items:center;
  justify-content:center;padding:0 7px;flex:none}
.it .ficon{width:52px;height:52px;border-radius:12px;font-size:12px}
.empty{margin:auto;text-align:center;color:var(--mut);padding:30px 20px;max-width:340px}
.empty b{display:block;color:var(--ink);font-size:16px;margin-bottom:6px}
.empty .auth-logo{width:88px;height:88px;border-radius:28px;margin-bottom:18px}
.empty-pane{flex:1;display:flex}
.empty-pane .pill{display:inline-block;background:var(--scrim);color:#fff;border-radius:16px;padding:6px 14px;font-size:14px;backdrop-filter:blur(4px)}

/* ── шапка чата ── */
.chead{display:flex;align-items:center;gap:6px;padding:calc(6px + var(--safe-t)) 8px 6px;background:var(--panel);border-bottom:1px solid var(--line);min-height:58px;z-index:3}
.chead .back{display:none}
.chead .who{flex:1;min-width:0;display:flex;align-items:center;gap:11px;cursor:pointer;padding:2px 6px;border-radius:10px}
.chead .ava{width:42px;height:42px;font-size:15px}
.chead .nm{font-weight:700;font-size:15.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chead .st{font-size:13px;color:var(--mut)}
.chead .st.on{color:var(--accent-ink)}
.chead .ibtn{color:var(--mut)}
.chead .ibtn:hover{color:var(--accent)}
.dots i{display:inline-block;width:4px;height:4px;border-radius:50%;background:currentColor;margin:0 1px;animation:dotB 1.2s infinite;vertical-align:2px}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes dotB{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-2px)}}

/* ── лента сообщений ── */
.thread{flex:1;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:10px 0 8px;display:flex;flex-direction:column}
.thread-in{width:100%;max-width:780px;margin:auto auto 0;padding:0 12px;display:flex;flex-direction:column}
.thread .more{align-self:center;margin:6px 0}
.day{position:sticky;top:6px;z-index:2;align-self:center;margin:10px 0 8px;background:var(--scrim);color:#fff;font-size:13px;font-weight:600;
  border-radius:14px;padding:4px 12px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);user-select:none}
[data-theme="day"] .day{background:rgba(90,80,70,.35)}
.unread-sep{align-self:stretch;text-align:center;margin:8px -12px;padding:5px;background:var(--panel);color:var(--mut);font-size:13px;font-weight:600;opacity:.92}
.row{display:flex;margin-top:8px;position:relative}
.row.cont{margin-top:2px}
.row.mine{justify-content:flex-end}
.bubble{position:relative;max-width:min(520px,82%);background:var(--b-in);border:1px solid var(--b-in-line);border-radius:16px;padding:6px 10px 7px;
  box-shadow:0 1px 1.5px #0000001a;word-wrap:break-word;overflow-wrap:anywhere;min-width:64px;transition:transform .16s,box-shadow .16s;
  -webkit-user-select:text;user-select:text}
.row:not(.mine) .bubble{border-bottom-left-radius:6px}
.row.mine .bubble{background:var(--b-out);border-color:var(--b-out-line);border-bottom-right-radius:6px}
.row.cont:not(.mine) .bubble{border-top-left-radius:6px}
.row.cont.mine .bubble{border-top-right-radius:6px}
.row.next:not(.mine) .bubble{border-bottom-left-radius:6px}
.row.next.mine .bubble{border-bottom-right-radius:6px}
.bubble .txt{white-space:pre-wrap;font-size:15px;line-height:1.4}
.bubble .txt a{color:var(--accent-ink);text-decoration:underline;text-decoration-color:var(--accent-soft)}
.bubble .txt code{font-family:ui-monospace,Consolas,monospace;font-size:13.5px;background:var(--quote-bg);border-radius:5px;padding:1px 4px}
.bubble .txt .spoiler{background:var(--panel3);color:transparent;border-radius:4px;cursor:pointer;transition:all .15s}
.bubble .txt .spoiler img{visibility:hidden}
.bubble .txt .spoiler.open{background:transparent;color:inherit;cursor:text}
.bubble .txt .spoiler.open img{visibility:visible}
.meta-sp{display:inline-block;width:var(--mw,52px);height:10px}
.meta{position:absolute;right:9px;bottom:5px;display:flex;align-items:center;gap:3px;font-size:11.5px;color:var(--meta);white-space:nowrap;user-select:none;line-height:1}
.row.mine .meta{color:var(--meta-out)}
.meta svg.i{width:16px;height:16px;stroke-width:2}
.meta .tick.read{color:var(--accent)}
.meta .tick.wait{animation:pulse 1.2s infinite}
.meta .tick.err{color:var(--red)}
@keyframes pulse{50%{opacity:.35}}
.bubble.media{padding:3px;overflow:hidden}
.bubble.media .meta{background:rgba(0,0,0,.45);color:#fff;border-radius:10px;padding:3px 7px;bottom:8px;right:8px}
.bubble.media .meta .tick.read{color:#fff}
.bubble.media.cap{padding-bottom:7px}
.bubble.media.cap .meta{background:none;color:var(--meta);padding:0;bottom:5px;right:9px}
.row.mine .bubble.media.cap .meta{color:var(--meta-out)}
.bubble.media.cap .txt{padding:5px 8px 0}
.bubble.emo-only{background:none!important;border:none!important;box-shadow:none;padding:0 0 18px}
.bubble.emo-only .txt{font-size:44px;line-height:1.1}
.bubble.emo-only .txt img.emo{width:62px;height:62px;vertical-align:-6px}
.bubble.emo-only .meta{background:var(--scrim);color:#fff;border-radius:10px;padding:3px 7px;bottom:0}
.bubble.deleted .txt{color:var(--mut);font-style:italic}
.b-name{font-size:13.5px;font-weight:700;margin-bottom:1px}
img.emo{width:22px;height:22px;vertical-align:-5px;display:inline-block}
.bubble.hl,.bubble.found{animation:found 1.8s ease-out}
@keyframes found{0%,40%{box-shadow:0 0 0 3px var(--accent),0 0 0 8px var(--accent-soft)}100%{box-shadow:0 1px 1.5px #0000001a}}
/* цитата ответа */
.q{display:block;border-left:3px solid var(--accent);background:var(--quote-bg);border-radius:6px;padding:4px 9px 5px;margin:2px 0 5px;cursor:pointer;min-width:0;
  font-size:13.5px;line-height:1.3;max-width:100%}
.bubble.media .q{margin:4px 5px 5px}
.q b{display:block;color:var(--accent-ink);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.q span{display:block;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row.mine .q span{color:var(--meta-out)}
/* реакции */
.reacts{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0 1px}
.rc{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 9px 0 6px;border-radius:14px;background:var(--accent-soft);color:var(--accent-ink);
  font-size:13.5px;font-weight:700;cursor:pointer;border:1.5px solid transparent;transition:transform .1s;user-select:none}
.rc:active{transform:scale(.92)}
.rc img{width:20px;height:20px}
.rc.mine{background:var(--accent);color:#fff}
.rc .rava{display:flex}
.rc .rava .ava{width:20px;height:20px;font-size:9px;margin-left:-4px;border:1.5px solid var(--accent)}
.rc .rava .ava:first-child{margin-left:0}
.bubble.media .reacts{margin:6px 6px 2px}
.rc.pop{animation:rcPop .35s cubic-bezier(.2,1.6,.4,1)}
@keyframes rcPop{0%{transform:scale(.4)}100%{transform:scale(1)}}
/* медиа в пузыре */
.m-img{display:block;border-radius:13px;cursor:pointer;background:var(--panel3);object-fit:cover;max-width:100%}
.m-vid{position:relative;display:block;border-radius:13px;overflow:hidden;cursor:pointer;background:#000;line-height:0;max-width:100%}
.m-vid img{display:block;width:100%;height:100%;object-fit:cover}
.m-vid .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.m-vid .play span{width:52px;height:52px;border-radius:50%;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;color:#fff;backdrop-filter:blur(4px)}
.m-vid .play svg.i{width:26px;height:26px;margin-left:3px}
.m-vid .dur{position:absolute;left:8px;top:8px;background:rgba(0,0,0,.5);color:#fff;font-size:12px;border-radius:9px;padding:2px 7px;line-height:1.4}
.m-file{display:flex;align-items:center;gap:12px;padding:4px 2px 2px;cursor:pointer;min-width:220px;max-width:340px;text-decoration:none!important;color:inherit}
.ficon{width:46px;height:46px;border-radius:12px;flex:none;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:11.5px;
  background:linear-gradient(145deg,#5AA7FF,#3D7BD9);letter-spacing:.02em;position:relative}
.ficon.pdf{background:linear-gradient(145deg,#FF7A6B,#E5484D)}
.ficon.doc{background:linear-gradient(145deg,#5AA7FF,#2F6FD6)}
.ficon.xls{background:linear-gradient(145deg,#3ECF8E,#1E9D66)}
.ficon.zip{background:linear-gradient(145deg,#C58AFF,#8C4FE0)}
.ficon.aud{background:linear-gradient(145deg,#FF8A3D,#FF6600)}
.ficon svg.i{width:22px;height:22px}
.m-file .fn{font-weight:600;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-file .fs{font-size:12.5px;color:var(--mut)}
.row.mine .m-file .fs{color:var(--meta-out)}
.m-file .fb{min-width:0;flex:1}
.m-aud{min-width:240px}
.m-aud audio{width:100%;height:38px;margin-top:4px;display:block}
/* кружок в ленте */
.bubble.round-b{background:none!important;border:none!important;box-shadow:none!important;padding:0;min-width:0}
.bubble.round-b .meta{background:var(--scrim);color:#fff;border-radius:10px;padding:3px 7px;bottom:2px;right:0}
.bubble.round-b .meta .tick.read{color:#fff}
.bubble.round-b .reacts{margin:6px 0 22px}
.bubble.round-b .up .ring{border-radius:50%}
.m-round{position:relative;border-radius:50%;cursor:pointer;user-select:none;-webkit-user-select:none;background:var(--panel3)}
.m-round img,.m-round video{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.m-round video{opacity:0;transition:opacity .15s}
.m-round.playing video{opacity:1}
.m-round.mir video{transform:scaleX(-1)}
.m-round .rnd-ring{opacity:0;transition:opacity .15s}
.m-round.playing .rnd-ring{opacity:1}
.m-round .rnd-ring .bg{display:none}
.m-round .rnd-ring circle{stroke-width:2.2}
.m-round .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.m-round.playing .play{display:none}
.m-round .dur{position:absolute;left:10px;bottom:2px;background:var(--scrim);color:#fff;font-size:12px;border-radius:10px;padding:2px 8px;line-height:1.4;font-variant-numeric:tabular-nums}
/* звонок в ленте */
.m-call{display:flex;align-items:center;gap:12px;padding:3px 2px;min-width:210px;cursor:pointer}
.m-call .ci{width:42px;height:42px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;flex:none}
.m-call .ci.miss{background:var(--red-soft);color:var(--red)}
.m-call b{display:block;font-size:14.5px}
.m-call .cs{font-size:13px;color:var(--mut);display:flex;align-items:center;gap:4px}
.row.mine .m-call .cs{color:var(--meta-out)}
.m-call .join{margin-left:auto;padding:7px 12px;font-size:13.5px}
/* загрузка файла */
.up{position:relative}
.up .ring{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.25);border-radius:13px}
.ring-c{width:48px;height:48px;border-radius:50%;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;position:relative}
.ring-c svg.pr{position:absolute;inset:0;width:48px;height:48px;transform:rotate(-90deg)}
.ring-c svg.pr circle{fill:none;stroke:#fff;stroke-width:2.5;stroke-linecap:round;transition:stroke-dashoffset .2s}
.ring-c svg.i{width:18px;height:18px}
/* кнопка «вниз» */
.down{position:absolute;right:16px;bottom:84px;width:46px;height:46px;border-radius:50%;background:var(--panel);border:1px solid var(--line);color:var(--mut);display:flex;
  align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow-sm);z-index:5;transition:opacity .15s,transform .15s}
.down.off{opacity:0;transform:translateY(10px) scale(.8);pointer-events:none}
.down .badge{position:absolute;top:-6px;left:50%;transform:translateX(-50%)}

/* ── строка ввода ── */
.composer{position:relative;padding:6px 12px calc(10px + var(--safe-b));z-index:4}
html.kb .composer{padding-bottom:8px}
.composer-in{position:relative;max-width:780px;margin:0 auto;display:flex;align-items:flex-end;gap:8px}
.cbox{flex:1;min-width:0;background:var(--panel);border-radius:22px;box-shadow:0 1px 2px #0000002a;display:flex;flex-direction:column;border:1px solid var(--line)}
.cbar{display:flex;align-items:center;gap:10px;padding:8px 8px 2px 14px}
.cbar .ic{color:var(--accent);flex:none;display:flex}
.cbar .ct{flex:1;min-width:0;border-left:2.5px solid var(--accent);padding-left:9px;font-size:13.5px;line-height:1.3}
.cbar .ct b{display:block;color:var(--accent-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cbar .ct span{display:block;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cbar .ibtn{width:32px;height:32px}
.crow{display:flex;align-items:flex-end;gap:2px;padding:0 4px}
.crow .ibtn{width:42px;height:44px;border-radius:50%}
.ta{flex:1;min-width:0;border:none;outline:none;background:transparent;resize:none;padding:11px 4px;max-height:168px;line-height:1.4;font-size:15.5px}
.send-btn{width:50px;height:50px;border-radius:50%;border:none;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;
  flex:none;box-shadow:0 2px 8px #FF660055;transition:transform .1s,background .12s;touch-action:none}
.send-btn:hover{background:var(--glow)}
.send-btn:active{transform:scale(.92)}
.send-btn svg.i{width:24px;height:24px}
.drop{position:absolute;inset:10px;border:2.5px dashed var(--accent);border-radius:20px;background:var(--scrim);z-index:30;display:flex;align-items:center;
  justify-content:center;color:#fff;font-size:18px;font-weight:700;pointer-events:none}
/* запись голосового (как в Telegram: зажать — запись, влево — отмена, вверх — замок) */
.rec-active .cbox,.rec-active .send-btn{visibility:hidden}
.send-btn.flip svg.i{animation:recFlip .3s cubic-bezier(.3,1.5,.5,1)}
@keyframes recFlip{0%{transform:scale(.2) rotate(-60deg);opacity:.2}100%{transform:none;opacity:1}}
.rec-tip{position:absolute;right:0;bottom:calc(100% + 12px);background:rgba(18,20,26,.94);color:#fff;font-size:13.5px;font-weight:600;padding:8px 12px;
  border-radius:12px;white-space:nowrap;pointer-events:none;opacity:0;transform:translateY(6px);transition:opacity .18s,transform .18s;z-index:25;box-shadow:var(--shadow-sm)}
.rec-tip::after{content:'';position:absolute;right:19px;bottom:-6px;border:6px solid transparent;border-bottom:0;border-top-color:rgba(18,20,26,.94)}
.rec-tip.show{opacity:1;transform:none}
.rec-fill{flex:1}
.rec-cancel-txt{flex:none;border:none;background:none;color:var(--red);font-weight:700;font-size:14.5px;padding:8px 6px;cursor:pointer}
.rec-lock.stop{height:40px;border-radius:50%;color:var(--red);cursor:pointer;right:5px}
.rec-lock.stop svg.i{width:20px;height:20px}
.rec-ico.rec-trash{background:var(--red-soft);color:var(--red)}
.rec-pv .rec-bar{padding:0 6px;gap:8px}
.rec-pv-body{flex:1;min-width:0;display:flex;align-items:center}
.rec-pv-body .voice{min-width:0;max-width:none;flex:1;gap:8px}
.rec-pv-body .voice .vp-btn{width:36px;height:36px}
.rec-pv-body .voice .vp-btn svg.i{width:17px;height:17px}
.rec-pv-v{flex-direction:column;align-items:flex-start;justify-content:center;line-height:1.25}
.rec-pv-v b{font-variant-numeric:tabular-nums;font-size:15px}
.rec-pv-v span{color:var(--mut);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* кружок: запись и просмотр — круглое окно над чатом, кольцо — минута */
.main>.rnd{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;padding:calc(12px + var(--safe-t)) 20px 96px;
  background:rgba(8,10,14,.5);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);opacity:0;transition:opacity .2s}
.main>.rnd.show{opacity:1}
.rnd-on .down{display:none}
.rnd-c{position:relative;width:min(78vw,330px);max-width:100%;aspect-ratio:1/1;border-radius:50%;cursor:pointer;transform:scale(.85);transition:transform .22s cubic-bezier(.2,.9,.3,1.2)}
.rnd.show .rnd-c{transform:none}
.rnd-v{position:absolute;inset:7px;width:calc(100% - 14px);height:calc(100% - 14px);border-radius:50%;object-fit:cover;background:#000;transform:scaleX(-1);display:block}
.rnd-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);pointer-events:none;overflow:visible}
.rnd-ring circle{fill:none;stroke-width:2.6}
.rnd-ring .bg{stroke:rgba(255,255,255,.2)}
.rnd-ring .fg{stroke:var(--accent);stroke-linecap:round}
.rnd-play{position:absolute;inset:0;display:none;align-items:center;justify-content:center;pointer-events:none}
.rnd-play span,.m-round .play span{width:58px;height:58px;border-radius:50%;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;color:#fff;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.rnd-play svg.i,.m-round .play svg.i{width:28px;height:28px;margin-left:3px}
.rnd:not(.live):not(.playing) .rnd-play{display:flex}
.rec-bar{position:absolute;left:0;right:0;bottom:0;height:52px;background:var(--panel);border:1px solid var(--line);border-radius:26px;display:flex;
  align-items:center;gap:12px;padding:0 8px 0 18px;z-index:20;animation:recIn .18s cubic-bezier(.2,.8,.25,1)}
@keyframes recIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.rec-dot{width:11px;height:11px;border-radius:50%;background:var(--red);flex:none;animation:recPulse 1.4s infinite;transition:transform .08s ease-out}
.rec-dot.paused{animation:none;opacity:.45}
@keyframes recPulse{50%{opacity:.35}}
.rec-time{font-variant-numeric:tabular-nums;font-size:15px;flex:none;min-width:44px}
.rec-wave{flex:1;display:flex;align-items:center;gap:2px;height:28px;overflow:hidden}
.rec-wb{flex:1 1 0;min-width:2px;background:var(--accent);border-radius:2px;height:8%;transition:height .09s linear}
.rec-hint{flex:none;display:flex;align-items:center;gap:6px;color:var(--mut);font-size:14px;user-select:none;padding-right:62px}
.rec-hint .rec-chev{font-size:18px;line-height:1;animation:recSlide 1.3s ease-in-out infinite}
@keyframes recSlide{50%{transform:translateX(-4px)}}
.rec-cancel .rec-wb{background:var(--mut2)}
.rec-cancel .rec-dot{background:var(--mut2);animation:none}
.rec-cancel .rec-hint{color:var(--red);font-weight:600}
.rec-locked{display:flex;align-items:center;gap:8px;flex:none}
.rec-ic-svg{display:flex}
.rec-ico{width:40px;height:40px;border-radius:50%;border:none;background:var(--panel2);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.rec-ico.rec-send{background:var(--accent);color:#fff}
.rec-cancel-btn{display:flex;align-items:center;gap:6px;height:40px;padding:0 14px 0 11px;border-radius:20px;border:none;background:var(--panel2);color:var(--red);
  font-weight:600;font-size:14px;cursor:pointer}
.rec-lock{position:absolute;right:5px;bottom:66px;width:40px;height:62px;border-radius:20px;background:var(--panel);border:1px solid var(--line);
  color:var(--mut);display:none;flex-direction:column;align-items:center;justify-content:center;gap:3px;z-index:21;box-shadow:var(--shadow-sm);transition:transform .1s ease-out,color .15s}
.rec-lock.show{display:flex}
.rec-lock .rl-up{display:flex;opacity:.6;animation:recUp 1.3s ease-in-out infinite}
@keyframes recUp{50%{transform:translateY(-3px)}}
.rec-lock.near{color:var(--accent);border-color:var(--accent)}
.rec-big{position:absolute;right:-17px;bottom:-17px;width:84px;height:84px;border-radius:50%;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;z-index:22;pointer-events:none;box-shadow:0 0 0 0 #FF660066;animation:recBig 1.4s infinite}
.rec-big svg{width:30px;height:30px}
@keyframes recBig{0%{box-shadow:0 0 0 0 #FF660066}70%{box-shadow:0 0 0 16px #FF660000}100%{box-shadow:0 0 0 0 #FF660000}}
.rec-locked-on .rec-big{display:none!important}
/* плеер голосового */
.voice{display:flex;align-items:center;gap:10px;min-width:230px;max-width:320px;padding:2px 0 1px}
.voice .vp-btn{width:44px;height:44px;border-radius:50%;border:none;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.voice .vp-btn svg.i{width:20px;height:20px}
.voice .vp-body{flex:1;min-width:0}
.vp-bars{position:relative;height:26px;cursor:pointer;touch-action:none;user-select:none}
.vp-wave{position:absolute;inset:0;display:flex;align-items:center;gap:2px}
.vp-played{clip-path:inset(0 100% 0 0)}
.vp-bar{flex:1 1 0;min-width:2px;border-radius:2px;height:30%}
.vp-base .vp-bar{background:var(--mut2);opacity:.55}
.row.mine .vp-base .vp-bar{background:var(--meta-out)}
.vp-played .vp-bar{background:var(--accent)}
.vp-time{font-size:12.5px;color:var(--mut);font-variant-numeric:tabular-nums;margin-top:1px}
.row.mine .vp-time{color:var(--meta-out)}

/* ── эмодзи ── */
.emoji-pop{position:absolute;bottom:calc(100% + 6px);left:12px;width:min(360px,calc(100vw - 24px));max-height:min(46dvh,360px);overflow-y:auto;overscroll-behavior:contain;
  background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:0 10px 10px;z-index:40;animation:popIn .13s ease-out}
.emo-head{position:sticky;top:0;background:var(--panel);z-index:3;border-bottom:1px solid var(--line);margin:0 -10px 4px;padding:0 10px}
.emo-tabs{display:flex;gap:6px;padding:10px 0 8px}
.emo-tabs .btn{padding:6px 12px;font-size:13px;border-radius:14px}
.emo-cats{display:flex;gap:2px;padding:0 0 8px;justify-content:space-between}
.emo-cats span{cursor:pointer;border-radius:7px;padding:3px 4px;line-height:0}
.emo-cats span:hover{background:var(--accent-soft)}
.emo-c{width:20px;height:20px;display:block}
.emo-sec-h{font-size:12px;color:var(--mut2);padding:10px 2px 5px;font-weight:600}
.emo-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px}
.emo-grid>span{cursor:pointer;text-align:center;border-radius:8px;padding:4px;line-height:0}
.emo-grid>span:hover{background:var(--accent-soft)}
.emo-p{width:30px;height:30px;display:block;margin:0 auto}
.emo-w{position:relative;display:block}
.emo-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:25px;line-height:1;pointer-events:none;
  font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif}
.emo-w:not(.ld)>img{opacity:0}
.emo-w.ld>.emo-ph{display:none}

/* ── меню сообщения: долгое нажатие, как в Telegram (пузырь приподнимается, над ним реакции, под ним действия) ── */
.ctx{position:fixed;inset:0;z-index:300;background:var(--scrim);backdrop-filter:blur(7px) saturate(1.1);-webkit-backdrop-filter:blur(7px) saturate(1.1);
  animation:fadeIn .16s ease-out}
.ctx.out{animation:fadeOut .16s ease-in forwards}
@keyframes fadeOut{to{opacity:0}}
.ctx-bubble{position:fixed;margin:0!important;pointer-events:none;transition:transform .22s cubic-bezier(.2,.9,.3,1.25);box-shadow:var(--shadow)!important}
.ctx-bubble .reacts{display:none}
.ctx-reacts{position:fixed;display:flex;align-items:center;gap:2px;background:var(--panel);border-radius:26px;padding:5px 6px;box-shadow:var(--shadow);
  animation:ctxR .22s cubic-bezier(.2,1.2,.4,1) both;max-width:calc(100vw - 16px)}
.ctx-reacts>span{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;transition:transform .1s,background .1s;flex:none}
.ctx-reacts>span:hover{transform:scale(1.2);background:var(--hover)}
.ctx-reacts>span.mine{background:var(--accent-soft)}
.ctx-reacts img{width:30px;height:30px}
.ctx-reacts .more{color:var(--mut)}
.ctx-reacts.all{display:grid;grid-template-columns:repeat(8,40px);border-radius:18px;max-height:220px;overflow-y:auto;padding:6px}
@keyframes ctxR{from{opacity:0;transform:scale(.6) translateY(10px)}to{opacity:1;transform:none}}
.ctx-menu{position:fixed;background:var(--panel);border-radius:14px;box-shadow:var(--shadow);padding:5px;min-width:210px;animation:popIn .18s ease-out both}
.ctx-menu .mi{display:flex;align-items:center;gap:14px;padding:10px 12px;border-radius:9px;cursor:pointer;font-size:15px}
.ctx-menu .mi:hover{background:var(--hover)}
.ctx-menu .mi svg.i{width:20px;height:20px;color:var(--mut)}
.ctx-menu .mi.red,.ctx-menu .mi.red svg.i{color:var(--red)}
.bubble.pressing{transform:scale(.97)}

/* ── просмотр фото и видео ── */
.mv{position:fixed;inset:0;z-index:350;background:rgba(6,7,10,.96);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .18s}
.mv.show{opacity:1}
.mv-top{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:10px;padding:calc(10px + var(--safe-t)) 14px 10px;z-index:2;
  background:linear-gradient(#000a,transparent);color:#fff}
.mv-top .ttl{flex:1;min-width:0;font-size:14px}
.mv-top .ttl b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mv-top .ttl span{opacity:.7;font-size:12.5px}
.mv-btn{width:42px;height:42px;border-radius:50%;border:none;background:rgba(255,255,255,.1);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none;text-decoration:none!important}
.mv-btn:hover{background:rgba(255,255,255,.22)}
.mv-stage{position:absolute;inset:calc(62px + var(--safe-t)) 70px calc(20px + var(--safe-b));display:flex;align-items:center;justify-content:center}
.mv-media{max-width:100%;max-height:100%;border-radius:6px;object-fit:contain;display:block;animation:popIn .18s ease-out}
.mv-nav{position:absolute;top:50%;transform:translateY(-50%);width:50px;height:50px;border-radius:50%;border:none;background:rgba(255,255,255,.1);color:#fff;display:flex;
  align-items:center;justify-content:center;cursor:pointer;z-index:2}
.mv-nav:hover{background:rgba(255,255,255,.22)}
.mv-prev{left:12px}.mv-next{right:12px}

/* ── профиль, приглашения, выбор участников ── */
.prof-head{display:flex;flex-direction:column;align-items:center;gap:10px;margin:6px 0 16px}
.prof-ava{position:relative;cursor:pointer;border-radius:50%}
.prof-ava .ava{width:104px;height:104px;font-size:36px}
.prof-cam{position:absolute;right:0;bottom:0;width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;
  border:3px solid var(--panel)}
.prof-cam svg.i{width:17px;height:17px}
.prof-photo{padding:7px 16px;font-size:14px;border-radius:18px;font-weight:600;color:var(--accent)}
.prof-photo svg.i{width:17px;height:17px}
.kv{display:flex;justify-content:space-between;gap:12px;padding:10px 2px;border-top:1px solid var(--line2);font-size:14.5px}
.kv span:first-child{color:var(--mut)}
.inv-link{display:flex;align-items:center;gap:8px;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:10px 0;word-break:break-all;font-size:14px;
  font-family:ui-monospace,Consolas,monospace}
.inv-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line2);font-size:14px}
.inv-row .ava{width:36px;height:36px;font-size:13px}
.inv-st{font-size:12.5px;border-radius:8px;padding:2px 8px;background:var(--panel2);color:var(--mut);white-space:nowrap}
.inv-st.ok{background:var(--accent-soft);color:var(--accent-ink)}
.inv-st.used{background:#3ECF8E22;color:var(--ok)}
.pick-list{max-height:min(52dvh,420px);overflow-y:auto;margin:8px -8px 0;padding:0 2px}
.pick{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:12px;cursor:pointer;user-select:none}
.pick:hover{background:var(--hover)}
.pick .ava{width:42px;height:42px;font-size:15px}
.pick .nm{flex:1;min-width:0}
.pick .nm b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pick .nm span{font-size:13px;color:var(--mut)}
.chk{width:24px;height:24px;border-radius:50%;border:2px solid var(--mut2);flex:none;display:flex;align-items:center;justify-content:center;color:#fff;transition:all .12s}
.pick.on .chk{background:var(--accent);border-color:var(--accent)}
.chk svg.i{width:15px;height:15px;stroke-width:3;opacity:0}
.pick.on .chk svg.i{opacity:1}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--accent-soft);color:var(--accent-ink);border-radius:16px;padding:3px 10px 3px 3px;font-size:13.5px;font-weight:600;cursor:pointer}
.chip .ava{width:24px;height:24px;font-size:10px}
.login-req{text-align:center}
.login-req .dev{font-size:17px;font-weight:700;margin:8px 0 4px}

/* ── звонки ── */
.callbar{display:flex;align-items:center;gap:10px;background:linear-gradient(90deg,#1FA971,#3ECF8E);color:#fff;padding:8px 14px;cursor:pointer;font-weight:600;font-size:14px;
  padding-top:calc(8px + var(--safe-t));z-index:50}
.callbar svg.i{width:18px;height:18px}
.callbar .t{margin-left:auto;font-variant-numeric:tabular-nums}
.callbar{position:fixed;left:0;right:0;top:0;height:calc(40px + var(--safe-t));padding:var(--safe-t) 14px 0;z-index:150}
.callbar span:not(.t){min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app.has-callbar{top:calc(40px + var(--safe-t))}
.app.has-callbar .side-head,.app.has-callbar .chead{padding-top:6px}
.call{position:fixed;inset:0;z-index:320;background:#0B0D12;color:#fff;display:flex;flex-direction:column;animation:fadeIn .2s ease-out;overflow:hidden}
.call-bg{position:absolute;inset:-40px;background-size:cover;background-position:center;filter:blur(40px) brightness(.45) saturate(1.2);transform:scale(1.1);opacity:.9}
.call-bg.grad{background:radial-gradient(800px 500px at 50% 30%,#FF660044,transparent 70%),linear-gradient(160deg,#1a1f2b,#0B0D12)}
.call-top{position:relative;z-index:3;display:flex;align-items:center;gap:8px;padding:calc(10px + var(--safe-t)) 10px 6px}
.call-top .ibtn{color:#fff;background:rgba(255,255,255,.08)}
.call-top .ibtn:hover{background:rgba(255,255,255,.18)}
.call-top .ttl{flex:1;text-align:center;min-width:0}
.call-top .ttl b{display:block;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.call-top .ttl span{font-size:13.5px;opacity:.75;font-variant-numeric:tabular-nums}
.call-stage{position:relative;z-index:2;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:8px}
.call-solo{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.call-solo .ava{width:132px;height:132px;font-size:46px;box-shadow:0 0 0 0 rgba(255,255,255,.2)}
.call-solo .ava.ring{animation:ringPulse 1.6s infinite}
@keyframes ringPulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.28)}70%{box-shadow:0 0 0 26px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.call-solo .nm{font-size:24px;font-weight:700}
.call-solo .st{font-size:15px;opacity:.75;font-variant-numeric:tabular-nums}
.grid{display:flex;flex-wrap:wrap;gap:8px;width:100%;height:100%;align-content:center;justify-content:center}
.tile{position:relative;background:#1A1F29;border-radius:16px;overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:0;min-width:0;
  aspect-ratio:4/3;max-height:100%;transition:box-shadow .15s}
.tile.speak{box-shadow:0 0 0 3px #3ECF8E inset}
.tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.tile video.contain{object-fit:contain}
.tile .ava{width:34%;height:auto;aspect-ratio:1;max-width:110px;min-width:44px;font-size:clamp(14px,3vw,34px)}
.tile .lbl{position:absolute;left:8px;bottom:8px;right:8px;display:flex;align-items:center;gap:5px;font-size:13px;font-weight:600;text-shadow:0 1px 3px #000a;z-index:2}
.tile .lbl span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .lbl svg.i{width:16px;height:16px;flex:none}
.tile .lbl .off{color:#FF7A7A}
.tile .state{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.45);border-radius:10px;font-size:12px;padding:2px 8px;z-index:2}
.tile.wait{opacity:.55}
.tile.me video{transform:scaleX(-1)}
.tile.me.rear video{transform:none}
.pip{position:absolute;right:14px;top:calc(70px + var(--safe-t));width:min(28vw,180px);aspect-ratio:3/4;border-radius:14px;overflow:hidden;z-index:5;background:#000;
  box-shadow:0 8px 24px #000a;cursor:grab;touch-action:none}
.pip video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.pip.rear video{transform:none}
.call-remote{position:absolute;inset:0;background:#000}
.call-remote video{width:100%;height:100%;object-fit:contain}
.call-ctl{position:relative;z-index:3;display:flex;justify-content:center;align-items:flex-start;gap:clamp(10px,4vw,26px);padding:14px 12px calc(22px + var(--safe-b));flex-wrap:wrap}
.cb{display:flex;flex-direction:column;align-items:center;gap:7px;font-size:12.5px;opacity:.92;width:64px;text-align:center;cursor:pointer;user-select:none;border:none;background:none;color:#fff}
.cb .c{width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;transition:background .12s,transform .08s;
  backdrop-filter:blur(6px)}
.cb:hover .c{background:rgba(255,255,255,.24)}
.cb:active .c{transform:scale(.93)}
.cb.off .c{background:#fff;color:#111}
.cb.end .c{background:#E5484D}
.cb.end:hover .c{background:#F0595E}
.cb.ok .c{background:#1FA971}
.cb.ok:hover .c{background:#26BA7D}
.cb .c svg.i{width:26px;height:26px}
.cb.end .c svg.i{transform:rotate(135deg)}
.cb[disabled]{opacity:.4;pointer-events:none}
.call-note{position:relative;z-index:3;text-align:center;font-size:13px;opacity:.8;padding:0 16px 4px}

/* звонок: дополнения */
.call.out{animation:fadeOut .22s ease-in forwards}
.call-remote video.cover{object-fit:cover}
.grid .tile{aspect-ratio:auto;max-height:none;flex:none;width:var(--tw,45%);height:var(--th,auto)}
.tile.has-v .ava{display:none}
.call-solo .ava svg.i{width:56px;height:56px}
.call-solo .ava.speak{box-shadow:0 0 0 4px #3ECF8E}
.call-solo .st{min-height:1.4em}
.call.incoming .call-ctl{padding-bottom:calc(34px + var(--safe-b))}

/* ── меню сообщения: приподнятая копия пузыря ── */
.ctx-row{position:fixed;margin:0!important;display:flex;pointer-events:none}
.ctx-row .bubble{max-width:none;box-shadow:var(--shadow);transition:transform .22s cubic-bezier(.2,.9,.3,1.25);transform-origin:left center}
.ctx-row.mine .bubble{transform-origin:right center}
.ctx-row .bubble.lifted{transform:scale(1.03)}
.row.failed .bubble{cursor:pointer}
/* реакции под фото/видео: время и галочки — в строке реакций, а не плашкой на картинке */
.bubble.media.has-r{padding-bottom:6px}
.bubble.media.has-r .meta{background:none;color:var(--meta);padding:0;bottom:7px;right:9px}
.row.mine .bubble.media.has-r .meta{color:var(--meta-out)}
.bubble.media.has-r .meta .tick.read{color:var(--accent)}

/* ── отправка файлов: список перед отправкой ── */
.up-list{display:flex;flex-direction:column;gap:8px;max-height:min(46dvh,360px);overflow-y:auto;margin:0 0 12px}
.up-row{display:flex;align-items:center;gap:12px}
.up-row img,.up-row video{width:64px;height:64px;border-radius:10px;object-fit:cover;flex:none;background:var(--panel3)}
.up-row .ficon{width:64px;height:64px;border-radius:12px}
.up-row .fn{font-weight:600;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.up-row .fs{font-size:13px;color:var(--mut)}

/* ── профиль, карточка участника, приглашения ── */
.menu-me{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:9px;cursor:pointer}
.menu-me:hover{background:var(--hover)}
.menu-me .ava{width:40px;height:40px;font-size:15px}
.menu-me b{display:block;font-size:15px;max-width:190px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu-me span{font-size:12.5px;color:var(--mut)}
.prof-ava.busy{opacity:.5;pointer-events:none}
.fld{display:block;margin:4px 0 12px}
.fld>span{display:block;font-size:13px;color:var(--mut);margin:0 0 6px 2px}
.inv-h{margin:20px 0 2px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--mut2)}
.ucard .prof-head{margin-bottom:12px;gap:6px}
.ucard .prof-head .ava{width:104px;height:104px;font-size:36px;margin-bottom:6px}
.ucard .nm{font-size:20px;font-weight:700;text-align:center;word-break:break-word}
.ucard .st{font-size:13.5px;color:var(--mut)}
.ucard .st.on{color:var(--accent-ink)}
.ucard-act{display:flex;justify-content:center;gap:10px;margin:0 0 12px}
.ucard-b{flex:1;max-width:124px;display:flex;flex-direction:column;align-items:center;gap:6px;border:none;background:var(--panel2);border-radius:14px;padding:12px 6px 10px;
  cursor:pointer;font-size:13px;color:var(--accent-ink);font-weight:600}
.ucard-b:hover{background:var(--panel3)}
.ucard-b:active{transform:scale(.97)}
.ucard-b .c{display:flex}
.ucard-b svg.i{width:24px;height:24px}
.chip svg.i{width:14px;height:14px;opacity:.7}

/* ── телефон ── */
@media (max-width:760px){
  .app{grid-template-columns:1fr}
  .app .main{display:none}
  .app.open .side{display:none}
  .app.open .main{display:flex}
  .chead .back{display:inline-flex}
  .bubble{max-width:86%}
  .thread-in{padding:0 8px}
  .composer{padding:6px 8px calc(8px + var(--safe-b))}
  html.kb .composer{padding-bottom:6px}
  .down{bottom:80px;right:10px}
  .mv-stage{inset:calc(62px + var(--safe-t)) 4px calc(14px + var(--safe-b))}
  .mv-nav{display:none}
  .it{padding:8px 8px}
  .modal-w{align-items:flex-end;padding:0}
  .modal{width:100%;border-radius:20px 20px 0 0;max-height:92dvh;padding-bottom:var(--safe-b);animation:sheetIn .22s cubic-bezier(.2,.9,.3,1)}
  .modal.wide{width:100%}
  .cb{width:58px}
  .cb .c{width:56px;height:56px}
  .rec-hint{padding-right:58px}
}
@keyframes sheetIn{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
@media (hover:none){
  .it:hover,.ibtn:hover,.menu .mi:hover,.ctx-menu .mi:hover{background:transparent}
  .bubble{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}