:root{color-scheme:dark;--bg:#0f1116;--surface:#171a20;--raised:#20242c;--hover:#2a2f39;--border:#303641;--text:#f6f7fb;--muted:#9aa3b2;--accent:#7c8cff;--accent2:#6676ef;--green:#54c98a;--red:#ef6b70;--wine:#74343d;--sidebar:272px;--rail:72px}*{box-sizing:border-box}body{margin:0;font:15px/1.45 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg);color:var(--text);overflow:hidden}button,input,textarea{font:inherit}.hidden{display:none!important}button{border:0;color:inherit;cursor:pointer}.login-screen{min-height:100vh;display:grid;place-items:center;background:#111318;padding:24px}.login-card{width:min(420px,100%);padding:40px;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:0 24px 70px rgba(0,0,0,.28)}.brand-mark,.logo{display:grid;place-items:center;background:var(--wine);font-weight:800;color:#fff}.brand-mark{width:52px;height:52px;border-radius:12px;font-size:24px;margin-bottom:24px}.login-card h1{font-size:26px;margin:0 0 8px}.login-card p{color:var(--muted);margin:0 0 28px}.login-card label{display:grid;gap:8px;font-size:13px;font-weight:650;color:#cdd2dc}.login-card input,.field input{height:48px;border:1px solid var(--border);border-radius:9px;background:var(--bg);color:var(--text);padding:0 14px;outline:none}.login-card input:focus,.field input:focus,.composer:focus-within{border-color:var(--accent)}.primary,.secondary,.danger,.call-btn{min-height:44px;border-radius:9px;font-weight:700}.primary{width:100%;margin-top:16px;background:var(--accent);color:white}.primary:hover{background:var(--accent2)}.hint{display:block;color:var(--muted);font-size:12px;margin-top:18px}.app{display:grid;grid-template-columns:var(--rail) var(--sidebar) minmax(0,1fr);height:100vh}.rail{background:#0b0d11;border-right:1px solid #1f232b;padding:12px;display:flex;align-items:center;flex-direction:column;gap:10px}.logo,.rail-btn{width:48px;height:48px;border-radius:13px;background:var(--raised);font-weight:750;font-size:20px}.logo{background:var(--wine)}.rail-btn:hover,.rail-btn.active{background:var(--accent);border-radius:11px}.rail-spacer{flex:1}.sidebar{background:var(--surface);border-right:1px solid var(--border);display:flex;min-width:0;flex-direction:column}.sidebar-head,.topbar{height:68px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 18px}.sidebar-head strong{font-size:17px}.icon-btn,.tiny-btn{background:transparent;color:var(--muted);min-width:40px;min-height:40px;border-radius:8px;font-size:19px}.icon-btn:hover,.tiny-btn:hover{background:var(--hover);color:var(--text)}.icon-btn.active-tool{color:var(--green);background:rgba(84,201,138,.1)}#chatNav,#friendsNav{overflow-y:auto;padding:12px 10px;flex:1}.section-title{padding:14px 10px 7px;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.09em;font-weight:750}.section-title.with-action{display:flex;align-items:center;justify-content:space-between}.tiny-btn{min-width:30px;min-height:30px;font-size:17px}.nav-item,.friend-row{width:100%;min-height:44px;border-radius:8px;background:transparent;color:var(--muted);display:flex;align-items:center;gap:10px;padding:8px 10px;text-align:left}.nav-item:hover,.nav-item.active,.friend-row:hover{background:var(--hover);color:var(--text)}.nav-item .hash{color:#70798a;font-size:20px}.nav-item span:nth-child(2){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.profile-strip{border-top:1px solid var(--border);display:grid;grid-template-columns:40px minmax(0,1fr) 40px 40px;gap:6px;align-items:center;padding:12px}.profile-strip strong,.profile-strip span{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.profile-strip span{font-size:12px;color:var(--green)}.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#35405b center/cover no-repeat;color:white;font-weight:750;flex:0 0 auto}.avatar.sm{width:34px;height:34px}.status-dot{width:10px;height:10px;border-radius:50%;background:#697180;margin-left:auto}.status-dot.online{background:var(--green)}.secondary{background:var(--raised);border:1px solid var(--border)}.full{width:calc(100% - 20px);margin:18px 10px}.content{min-width:0;display:flex;flex-direction:column;background:var(--bg)}.topbar{height:68px;padding:0 24px}.topbar h2{font-size:17px;margin:0}.topbar div span{font-size:12px;color:var(--muted)}.call-btn{background:var(--raised);border:1px solid var(--border);padding:0 16px;display:flex;align-items:center;gap:8px}.call-btn:hover{background:var(--hover)}.chat-panel{display:flex;flex:1;min-height:0;flex-direction:column;position:relative}.messages{flex:1;overflow-y:auto;padding:28px clamp(18px,4vw,54px);position:relative;isolation:isolate}.empty{height:100%;display:grid;place-items:center;text-align:center;color:var(--muted)}.empty div{max-width:340px;padding:20px;background:rgba(15,17,22,.72);border-radius:12px}.empty b{display:block;color:var(--text);font-size:22px;margin-bottom:6px}.message{display:grid;grid-template-columns:42px minmax(0,1fr);gap:12px;margin:0 0 20px}.message-body{width:min(760px,100%);padding:8px 10px;border-radius:10px;background:rgba(15,17,22,.72);backdrop-filter:blur(3px)}.message-head{display:flex;align-items:baseline;gap:8px}.message-head strong{font-size:14px}.message-head time{font-size:11px;color:var(--muted)}.message p{margin:3px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}.attachment-card{display:flex;align-items:center;gap:12px;width:min(380px,100%);margin-top:8px;padding:12px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);text-decoration:none}.attachment-card:hover{border-color:#555e6d}.file-icon{width:38px;height:38px;border-radius:8px;background:#2d3450;display:grid;place-items:center;font-weight:800}.attachment-card span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.media-preview{display:block;width:min(520px,100%);margin-top:9px;border:1px solid var(--border);border-radius:11px;overflow:hidden;background:#090b0f}.media-preview img{display:block;width:100%;max-height:420px;object-fit:contain}.audio-preview,.voice-message{width:min(440px,100%);margin-top:9px;padding:12px;border:1px solid var(--border);border-radius:11px;background:var(--surface)}.audio-preview audio,.voice-message audio{width:100%;height:38px}.voice-title{display:flex;align-items:center;gap:9px;margin-bottom:8px}.waveform{display:flex;align-items:center;gap:3px;height:22px;flex:1}.waveform i{display:block;width:3px;border-radius:2px;background:var(--accent);height:var(--h)}.transcript{margin-top:10px!important;padding-top:9px;border-top:1px solid var(--border);font-size:13px;color:#c7ccd5}.transcript:before{content:"Текст: ";color:var(--muted)}.composer{margin:0 clamp(16px,3vw,36px) 24px;min-height:54px;border:1px solid var(--border);border-radius:12px;background:var(--raised);display:grid;grid-template-columns:48px 42px minmax(0,1fr) 48px;align-items:end;position:relative}.attach{height:52px;display:grid;place-items:center;color:var(--muted);font-size:24px;cursor:pointer}.attach input{display:none}.record{width:34px;height:34px;border-radius:50%;margin:0 4px 10px;background:transparent;color:var(--red);font-size:18px}.record:hover{background:rgba(239,107,112,.12)}.record.recording{background:var(--red);color:#fff;animation:pulse-record 1s infinite}.composer textarea{resize:none;max-height:140px;min-height:52px;padding:15px 4px;border:0;outline:none;background:transparent;color:var(--text)}.send{width:38px;height:38px;border-radius:9px;margin:0 7px 7px;background:var(--accent);font-size:20px}.file-preview{position:absolute;left:10px;bottom:62px;background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:9px 12px;max-width:70%;box-shadow:0 8px 24px rgba(0,0,0,.25)}.call-bar{margin:0 clamp(16px,3vw,36px) 12px;border:1px solid rgba(84,201,138,.4);background:rgba(84,201,138,.09);border-radius:10px;padding:10px 12px;display:flex;align-items:center;justify-content:space-between;gap:12px}.call-info{display:flex;align-items:center;gap:10px;min-width:0}.call-info>div:nth-child(2)>span{display:block;color:var(--muted);font-size:12px}.pulse{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px rgba(84,201,138,.12)}.call-participants{display:flex;gap:5px;margin-left:8px}.call-person{position:relative}.call-person .avatar{width:32px;height:32px;border:2px solid transparent;transition:border-color .1s,box-shadow .1s}.call-person.speaking .avatar{border-color:var(--green);box-shadow:0 0 0 3px rgba(84,201,138,.18)}.danger{background:var(--red);padding:0 14px;min-height:38px}.friend-panel{padding:42px clamp(22px,5vw,64px);overflow:auto}.friend-panel-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:26px}.friend-panel h2{font-size:26px;margin:0}.friend-panel p{color:var(--muted);margin:5px 0}.primary.compact{width:auto;margin:0;padding:0 16px}.friend-cards{display:grid;gap:10px}.friend-card{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;padding:14px;border:1px solid var(--border);border-radius:11px;background:var(--surface)}.friend-card p{font-size:13px;margin:2px 0 0}.friend-card button{background:var(--raised);min-height:40px;border-radius:8px;padding:0 14px}.modal-card{width:min(430px,calc(100vw - 32px));border:1px solid var(--border);border-radius:14px;background:var(--surface);color:var(--text);padding:28px;position:relative}.modal-card h3{font-size:20px;margin:0 0 8px}.modal-card p{color:var(--muted);margin:0 0 20px}.modal-close{position:absolute;right:12px;top:10px;background:transparent;font-size:24px;color:var(--muted)}dialog{border:0;background:transparent}dialog::backdrop{background:rgba(0,0,0,.64)}.field{display:grid;gap:7px;margin-top:15px;font-size:13px;color:#cdd2dc}.check-list{max-height:220px;overflow:auto;display:grid;gap:6px}.check-row{display:flex;align-items:center;gap:10px;padding:9px;border-radius:8px}.check-row:hover{background:var(--hover)}.avatar-editor{display:flex;align-items:center;gap:16px;margin:18px 0}.avatar-editor .avatar{width:72px;height:72px;font-size:24px}.avatar-editor label{display:inline-flex;align-items:center;min-height:42px;padding:0 14px;border-radius:8px;background:var(--raised);cursor:pointer}.avatar-editor input{display:none}.toast{position:fixed;right:22px;bottom:22px;background:#fff;color:#181b21;padding:12px 16px;border-radius:9px;box-shadow:0 12px 40px rgba(0,0,0,.3);z-index:20}@keyframes pulse-record{50%{box-shadow:0 0 0 7px rgba(239,107,112,.15)}}@media(max-width:760px){:root{--rail:58px;--sidebar:220px}.rail{padding:8px 5px}.logo,.rail-btn{width:44px;height:44px}.topbar{padding:0 14px}.call-btn{width:44px;min-width:44px;padding:0;justify-content:center;overflow:hidden;font-size:0}.call-btn span{font-size:16px}.messages{padding:20px 16px}.composer{margin:0 12px 14px}.call-participants{display:none}}@media(max-width:560px){.app{grid-template-columns:58px minmax(0,1fr)}.sidebar{display:none}.content{grid-column:2}.topbar div span{display:none}.friend-panel{padding:24px 16px}.friend-panel-head{gap:14px}.primary.compact{font-size:13px}.message{grid-template-columns:36px 1fr}.avatar{width:34px;height:34px}.message-body{padding:7px}.call-bar{margin:0 12px 8px}.call-info>div:nth-child(2){display:none}}@media(prefers-reduced-motion:reduce){.record.recording{animation:none}}

/* Adaptive shell, scroll and M.Круг incoming call */
:root{--rail:clamp(58px,5vw,72px);--sidebar:clamp(224px,21vw,288px)}
html,body{width:100%;height:100%;height:100dvh}.app{width:100vw;height:100vh;height:100dvh;min-width:0}.content,.chat-panel,.messages{min-height:0}.messages{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:#4b5260 transparent}.messages::-webkit-scrollbar,#chatNav::-webkit-scrollbar,#friendsNav::-webkit-scrollbar{width:8px}.messages::-webkit-scrollbar-thumb,#chatNav::-webkit-scrollbar-thumb,#friendsNav::-webkit-scrollbar-thumb{background:#4b5260;border-radius:8px}.message-body{width:min(760px,100%);padding:0;border-radius:0;background:transparent;backdrop-filter:none}.topbar-title{display:flex;align-items:center;gap:10px;min-width:0}.topbar-title>div{min-width:0}.topbar-title h2,.topbar-title span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-menu-btn{display:none;width:42px;height:42px;border-radius:8px;background:var(--raised);color:var(--muted);font-size:20px}.mobile-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:38}
.incoming-call{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:80;width:min(560px,calc(100vw - 32px));display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px;border:1px solid #80414a;border-radius:12px;background:#191b21;box-shadow:0 18px 60px rgba(0,0,0,.48);overflow:hidden}.incoming-art,.incoming-actions{position:relative;z-index:1}.incoming-art{display:grid;grid-template-columns:36px 50px minmax(0,1fr);align-items:center;gap:12px;min-width:0}.bell-mark{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:var(--wine);font-size:19px;animation:bellGlow 1.4s ease-in-out infinite}.incoming-avatar{width:50px;height:50px}.incoming-label{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:#c4838d}.incoming-call h3{font-size:18px;margin:1px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.incoming-call p{margin:1px 0 0;color:var(--muted);font-size:13px}.incoming-actions{display:flex;gap:8px;flex:0 0 auto}.incoming-actions button{min-height:42px;padding:0 14px;border-radius:8px;font-weight:700}.decline-call{background:#2a2d34;color:#d5d8df}.accept-call{background:var(--green);color:#0c2418}@keyframes bellGlow{50%{box-shadow:0 0 0 8px rgba(116,52,61,.2);transform:rotate(5deg)}}
@media(max-width:900px){.topbar{padding:0 16px}.messages{padding:22px 18px}.composer{margin:0 16px 16px}.call-bar{margin:0 16px 10px}}
@media(max-width:560px){.app{grid-template-columns:58px minmax(0,1fr)}.content{grid-column:2}.sidebar{display:flex;position:fixed;z-index:40;top:0;bottom:0;left:58px;width:min(286px,calc(100vw - 58px));transform:translateX(-105%);transition:transform .2s ease;box-shadow:12px 0 35px rgba(0,0,0,.35)}.sidebar.mobile-open{transform:translateX(0)}.mobile-menu-btn{display:grid;place-items:center}.topbar{height:62px}.topbar div span{display:block}.topbar-title>div>span{font-size:11px}.messages{padding:18px 12px}.message{grid-template-columns:34px minmax(0,1fr);gap:9px;margin-bottom:18px}.message-body{padding:0}.composer{grid-template-columns:42px 38px minmax(0,1fr) 44px;margin:0 8px 10px}.incoming-call{top:auto;bottom:12px;display:block;padding:14px}.incoming-art{grid-template-columns:32px 46px minmax(0,1fr)}.incoming-actions{margin-top:14px;display:grid;grid-template-columns:1fr 1fr}.incoming-actions button{width:100%}.call-bar{margin:0 8px 8px}.media-preview{width:100%}}
@media(max-height:620px){.topbar,.sidebar-head{height:56px}.profile-strip{padding:8px}.messages{padding-top:14px;padding-bottom:14px}.composer{margin-bottom:8px}.incoming-call{top:8px}}
@media(prefers-reduced-motion:reduce){.sidebar{transition:none}.bell-mark{animation:none}}
.profile-view{text-align:center}.profile-avatar{width:96px;height:96px;margin:4px auto 12px;font-size:32px;border:3px solid var(--border)}.profile-view h3{font-size:23px;margin:8px 0 4px}.profile-view p{margin:0 0 18px}.profile-status{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:12px}.profile-status:before{content:"";width:8px;height:8px;border-radius:50%;background:#697180}.profile-status.online:before{background:var(--green)}[data-profile]{cursor:pointer}[data-profile]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(min-width:561px){.incoming-call{width:min(680px,calc(100vw - 32px))}}

/* v2.2 media interactions */

#chatNav,#friendsNav{position:relative;isolation:isolate}
.drop-zone{position:absolute;inset:12px;z-index:55;display:grid;place-items:center;border:2px dashed #b15a67;border-radius:14px;background:rgba(15,17,22,.9);pointer-events:none}.drop-zone>div{text-align:center;padding:28px 38px;border:1px solid #74343d;background:#191b21;border-radius:12px}.drop-zone strong,.drop-zone span{display:block}.drop-zone strong{font-size:21px}.drop-zone span{margin-top:5px;color:var(--muted)}
.image-viewer{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:54px 24px 42px;background:rgba(4,5,8,.94)}.image-viewer img{display:block;max-width:min(1200px,94vw);max-height:calc(100dvh - 110px);object-fit:contain;image-rendering:auto;border:1px solid var(--border);box-shadow:0 20px 70px rgba(0,0,0,.55)}.image-viewer>button{position:absolute;right:22px;top:18px;width:46px;height:46px;border-radius:9px;background:var(--raised);font-size:28px}.image-viewer>span{position:absolute;bottom:15px;color:var(--muted);font-size:13px}.profile-avatar.has-image{cursor:zoom-in}.profile-avatar.has-image:hover{outline:3px solid rgba(124,140,255,.35);outline-offset:3px}
.context-menu{position:fixed;z-index:140;width:238px;padding:7px;background:#181b21;border:1px solid #383e49;border-radius:10px;box-shadow:0 18px 55px rgba(0,0,0,.52)}.context-menu button{width:100%;min-height:38px;padding:7px 10px;border-radius:7px;background:transparent;display:grid;grid-template-columns:24px 1fr;gap:8px;align-items:center;text-align:left;color:#e8eaf0}.context-menu button:hover,.context-menu button:focus-visible{background:#2a2f39;outline:none}.context-menu button.danger-item{color:#ff9296}.context-menu .menu-icon{color:var(--muted);text-align:center}.context-menu .menu-separator{height:1px;margin:5px;background:var(--border)}
@media(max-width:560px){.context-menu{width:min(238px,calc(100vw - 20px))}.image-viewer{padding:60px 12px 38px}.drop-zone{inset:8px}}

/* v2.3 icons and transfer telemetry */
.ui-icon{width:21px;height:21px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:square;stroke-linejoin:miter;pointer-events:none}.logo+.rail-btn .ui-icon{stroke-width:1.65}.send .ui-icon{width:20px;height:20px}.record .ui-icon{width:18px;height:18px}.bell-mark .ui-icon{width:20px;height:20px}.call-btn .ui-icon{width:18px;height:18px}.context-menu .ui-icon{width:17px;height:17px}
.file-preview{width:min(440px,calc(100vw - 90px));max-width:90%;padding:11px 13px}.upload-head{display:flex;justify-content:space-between;gap:12px;font-size:13px}.upload-head strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.upload-head span{color:var(--muted);white-space:nowrap}.upload-track{height:6px;margin-top:9px;border-radius:2px;background:#303641;overflow:hidden}.upload-track i{display:block;width:0;height:100%;background:var(--accent);transition:width .15s linear}.upload-stats{display:flex;justify-content:space-between;gap:12px;margin-top:7px;color:var(--muted);font-size:12px}.upload-ready .upload-track i{background:var(--green)}
.attachment-card>span{display:grid;gap:2px}.attachment-card strong{font-weight:600;overflow:hidden;text-overflow:ellipsis}.attachment-card small,.media-download span,.audio-meta small{color:var(--muted);font-size:12px}.media-attachment{width:min(520px,100%)}.media-download{display:inline-flex;align-items:center;gap:7px;margin-top:6px;padding:7px 9px;color:#cbd0da;text-decoration:none;border-radius:7px}.media-download:hover{background:var(--hover)}.media-download .ui-icon{width:16px;height:16px}.audio-meta{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:7px}.audio-preview .media-download,.voice-message .media-download{margin-top:7px}
@media(max-width:560px){.call-label{display:none}.file-preview{max-width:calc(100vw - 80px)}}
.icon-btn.muted-tool{color:var(--red);background:rgba(239,107,112,.1)}.mute-badge{position:absolute;right:-4px;bottom:-3px;width:18px;height:18px;display:grid;place-items:center;border-radius:50%;background:#a63e48;color:#fff;border:2px solid #142019}.mute-badge .ui-icon{width:11px;height:11px;stroke-width:2.4}.call-person.muted.speaking .avatar{border-color:var(--red);box-shadow:0 0 0 3px rgba(239,107,112,.16)}

/* ===== v2.4 — иконки, логотип, вход, темы, «печатает…», звонки ===== */
/* 1. Выравнивание иконок: SVG с display:block внутри кнопок прилипал к левому краю */
.rail-btn,.logo,.icon-btn,.tiny-btn,.send,.record,.image-viewer>button,.pass-eye{display:inline-grid;place-items:center;padding:0;line-height:0}.mobile-menu-btn{place-items:center;padding:0;line-height:0}
.rail-btn .ui-icon,.icon-btn .ui-icon{width:22px;height:22px}.tiny-btn .ui-icon{width:16px;height:16px}
.context-menu .menu-icon{display:grid;place-items:center}.attach .ui-icon{width:21px;height:21px}
.send .ui-icon,.record .ui-icon{margin:auto}.composer{align-items:center}.attach{height:auto;min-height:52px}.record{margin:0 4px}.send{margin:0 7px 0}
.profile-strip .icon-btn{width:40px;height:40px}
.nav-item .hash{display:grid;place-items:center;width:22px;flex:0 0 22px;color:var(--muted)}.nav-item .hash .ui-icon{width:19px;height:19px}
.danger{display:inline-flex;align-items:center;justify-content:center;gap:8px}.danger .ui-icon{width:18px;height:18px}

/* 2. Логотип */
.brand-logo{display:block;width:30px;height:30px;color:#fff;--logo-ring:#f1b8c0}.logo .brand-logo{width:34px;height:34px}.brand-mark .brand-logo{width:38px;height:38px}
.brand-logo.big{width:72px;height:72px;margin:0 auto 14px;color:var(--text);--logo-ring:var(--brand-ring)}
.logo{background:var(--wine)}.logo:hover{filter:brightness(1.12)}
.wordmark{letter-spacing:.01em}.wordmark b{color:var(--brand-ring)}

/* 3. Темы */
:root,[data-theme="dark"]{--brand-ring:#d98a95;--on-accent:#fff;--rail-bg:#0b0d11;--rail-line:#1f232b;--glass:rgba(15,17,22,.72);--menu:#181b21;--menu-line:#383e49;--thumb:#4b5260;--login-bg:radial-gradient(circle at 20% 10%,rgba(116,52,61,.32),transparent 45%),#111318;--bg-opacity:.28;--bg-filter:none;--chip:#2d3450}
[data-theme="onyx"]{color-scheme:dark;--bg:#050506;--surface:#0b0b0d;--raised:#151517;--hover:#1e1e21;--border:#262629;--text:#efebe3;--muted:#8e8a82;--accent:#cdb98f;--accent2:#b9a479;--on-accent:#16120a;--green:#5fcf94;--red:#e5646b;--wine:#4a1820;--brand-ring:#cdb98f;--rail-bg:#000;--rail-line:#141416;--glass:rgba(5,5,6,.78);--menu:#0e0e10;--menu-line:#2b2b2f;--thumb:#3a3833;--login-bg:radial-gradient(ellipse at 15% 0%,rgba(205,185,143,.10),transparent 50%),radial-gradient(ellipse at 90% 100%,rgba(74,24,32,.35),transparent 55%),linear-gradient(115deg,transparent 46%,rgba(255,255,255,.035) 48%,transparent 51%),#000;--bg-opacity:.16;--bg-filter:grayscale(1) contrast(1.15);--chip:#1d1b17}
[data-theme="onyx"] .brand-logo{--logo-ring:#e7d6b0}[data-theme="onyx"] .logo,[data-theme="onyx"] .brand-mark{background:linear-gradient(145deg,#1b1b1e,#050506);border:1px solid #33302a}
.primary,.rail-btn.active,.rail-btn:hover,.send{color:var(--on-accent)}.primary{background:var(--accent)}
.login-screen{background:var(--login-bg)}.rail{background:var(--rail-bg);border-right-color:var(--rail-line)}
.empty div,.message-body{background:var(--glass)}.message-body{background:transparent}

.context-menu{background:var(--menu);border-color:var(--menu-line)}.context-menu button{color:var(--text)}.context-menu button:hover,.context-menu button:focus-visible{background:var(--hover)}
.messages,#chatNav,#friendsNav{scrollbar-color:var(--thumb) transparent}.messages::-webkit-scrollbar-thumb,#chatNav::-webkit-scrollbar-thumb,#friendsNav::-webkit-scrollbar-thumb{background:var(--thumb)}
.incoming-call,.drop-zone>div{background:var(--surface)}.media-preview{background:var(--bg)}.file-icon{background:var(--chip)}.transcript{color:var(--text);opacity:.85}
.login-card label,.field{color:var(--text)}.decline-call{background:var(--raised);color:var(--text)}
[data-theme="onyx"] .rail-btn.active{box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}[data-theme="onyx"] .toast{background:var(--accent);color:var(--on-accent)}
.swatch{display:block;width:22px;height:22px;border-radius:6px;border:1px solid rgba(255,255,255,.18)}.swatch.dark{background:linear-gradient(135deg,#20242c 0 50%,#74343d 50%)}.swatch.onyx{background:linear-gradient(135deg,#000 0 50%,#cdb98f 50%)}
.theme-switch{display:flex;gap:6px}.theme-switch button{width:36px;height:36px;display:grid;place-items:center;border-radius:9px;background:var(--raised);border:1px solid var(--border)}.theme-switch button.active{border-color:var(--accent)}
.theme-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px}.theme-cards button{display:grid;grid-template-columns:28px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;text-align:left;padding:12px;border-radius:10px;background:var(--raised);border:1px solid var(--border)}.theme-cards .swatch{grid-row:span 2;width:28px;height:28px}.theme-cards small{color:var(--muted);font-size:11px}.theme-cards button.active{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}

/* 4. Вход и регистрация */
.login-card{display:grid;gap:14px}.login-card h1,.login-card p{margin-bottom:0}.login-card p{margin-top:-8px}.login-top{display:flex;justify-content:space-between;align-items:flex-start}.brand-mark{margin:0}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:10px;background:var(--bg);border:1px solid var(--border)}.auth-tabs button{min-height:38px;border-radius:7px;background:transparent;color:var(--muted);font-weight:700}.auth-tabs button.active{background:var(--raised);color:var(--text);box-shadow:0 1px 0 rgba(255,255,255,.04)}
.pass-wrap{position:relative;display:block}.pass-wrap input{width:100%;padding-right:48px}.pass-eye{position:absolute;right:4px;top:4px;width:40px;height:40px;border-radius:7px;background:transparent;color:var(--muted)}.pass-eye:hover{color:var(--text);background:var(--hover)}.login-card label>input{width:100%}
.remember{display:flex!important;grid-auto-flow:column;align-items:center;gap:10px!important;cursor:pointer;user-select:none;font-weight:600!important}.remember input,.check-row input{position:absolute;opacity:0;pointer-events:none}
.check-box{width:20px;height:20px;flex:0 0 20px;display:grid;place-items:center;border-radius:5px;border:1.5px solid var(--border);background:var(--bg);color:transparent;transition:.12s}.check-box .ui-icon{width:14px;height:14px;stroke-width:2.6}
input:checked+.check-box,.check-row input:checked~.check-box{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}input:focus-visible+.check-box{outline:2px solid var(--accent);outline-offset:2px}
.auth-error{padding:10px 12px;border-radius:8px;background:color-mix(in srgb,var(--red) 14%,transparent);border:1px solid color-mix(in srgb,var(--red) 40%,transparent);color:#ffb3b6;font-size:13px}.login-card .primary{margin-top:2px}.login-card .primary:disabled{opacity:.6;cursor:wait}.hint{margin-top:0}

/* 5. Групповые чаты */
.nav-empty{width:100%;display:flex;align-items:center;gap:10px;padding:10px;border-radius:8px;background:transparent;border:1px dashed var(--border);color:var(--muted)}.nav-empty:hover{color:var(--text);border-color:var(--accent)}.nav-empty .ui-icon{width:16px;height:16px}
.nav-note{padding:4px 10px;color:var(--muted);font-size:12px}
.check-list{gap:4px}.check-row{position:relative;cursor:pointer}.check-row>span:nth-of-type(1){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.check-row .status-dot{margin-left:0}.check-row:has(input:checked){background:var(--hover)}
.check-empty{display:grid;gap:10px;padding:14px;border-radius:9px;border:1px dashed var(--border);color:var(--muted);font-size:13px}.check-empty .secondary{min-height:38px}
.welcome .welcome-actions{display:flex;gap:8px;justify-content:center;margin-top:16px}.welcome .welcome-actions button{min-height:40px;padding:0 14px}.welcome div{max-width:380px;padding:26px}

/* 6. Кнопка звонка */
.call-btn{flex:0 0 auto;transition:background .15s,transform .1s}.call-btn:active{transform:translateY(1px)}
.call-btn.start{background:var(--green);border-color:transparent;color:#082015}.call-btn.start:hover{filter:brightness(1.08);background:var(--green)}
.call-btn.join{background:var(--green);border-color:transparent;color:#082015;box-shadow:0 0 0 0 rgba(84,201,138,.5);animation:callPulse 1.8s ease-out infinite}.call-btn.join:hover{background:var(--green);filter:brightness(1.08)}
.call-btn.leave{background:var(--red);border-color:transparent;color:#fff}.call-btn.leave:hover{background:var(--red);filter:brightness(1.08)}
.call-count{min-width:20px;height:20px;padding:0 6px;display:grid;place-items:center;border-radius:10px;background:rgba(0,0,0,.22);font-size:12px}
@keyframes callPulse{0%{box-shadow:0 0 0 0 rgba(84,201,138,.45)}70%{box-shadow:0 0 0 10px rgba(84,201,138,0)}100%{box-shadow:0 0 0 0 rgba(84,201,138,0)}}
.room-call{display:inline-flex;align-items:center;gap:3px;margin-left:auto;padding:2px 6px;border-radius:9px;background:color-mix(in srgb,var(--green) 16%,transparent);color:var(--green);font-style:normal;font-size:11px;font-weight:800}.room-call .ui-icon{width:12px;height:12px;stroke-width:2.2}.room-call+.status-dot{margin-left:6px}
@media(max-width:760px){.call-btn{width:auto;min-width:44px;padding:0 12px;font-size:15px}.call-btn .call-label{font-size:14px}}
@media(max-width:560px){.call-btn{padding:0;width:44px}.call-count{display:none}}

/* 7. «печатает…» / «записывает голосовое…» */
.typing-bar{height:0;overflow:hidden;display:flex;align-items:center;gap:16px;margin:0 clamp(16px,3vw,36px);padding:0 4px;font-size:12.5px;color:var(--muted);transition:height .15s ease}.typing-bar.visible{height:26px}.typing-bar b{color:var(--text);font-weight:650}
.typing-item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.typing-item>span:last-child{overflow:hidden;text-overflow:ellipsis}.typing-item .ui-icon{width:14px;height:14px;color:var(--red)}
.dots,.room-typing{display:inline-flex;align-items:center;gap:3px;font-style:normal}.dots span,.room-typing span{width:5px;height:5px;background:var(--accent);animation:typingDot 1.2s infinite ease-in-out}.dots span:nth-child(2),.room-typing span:nth-child(2){animation-delay:.15s}.dots span:nth-child(3),.room-typing span:nth-child(3){animation-delay:.3s}
.room-typing{margin-left:auto}.room-typing span{width:4px;height:4px}.room-typing+.room-call{margin-left:6px}
.rec-dot{width:8px;height:8px;border-radius:50%;background:var(--red);animation:recBlink 1s infinite}
@keyframes typingDot{0%,60%,100%{transform:translateY(0);opacity:.35}30%{transform:translateY(-4px);opacity:1}}@keyframes recBlink{50%{opacity:.25}}
@media(max-width:900px){.typing-bar{margin:0 16px}}@media(max-width:560px){.typing-bar{margin:0 10px}}
@media(prefers-reduced-motion:reduce){.dots span,.room-typing span,.rec-dot,.call-btn.join{animation:none}}
.welcome .welcome-actions button{white-space:nowrap;width:auto;margin:0}
@media(max-width:560px){.sidebar{transform:translateX(calc(-100% - 64px));visibility:hidden;transition:transform .2s ease,visibility 0s .2s}.sidebar.mobile-open{transform:translateX(0);visibility:visible;transition:transform .2s ease}}

/* ===== v2.5 — картинки по размеру, статусы ===== */
.media-attachment{width:auto;max-width:min(520px,100%)}
.media-preview,.url-image-preview{display:block;width:fit-content!important;max-width:min(520px,100%);padding:3px;border-radius:12px;cursor:zoom-in;line-height:0}
.media-preview img{width:auto;max-width:100%;height:auto;max-height:420px;border-radius:9px;object-fit:contain}
@media(max-width:560px){.media-preview img{max-height:340px}}
.image-viewer{cursor:zoom-out}.image-viewer img{cursor:default}
.viewer-download{position:absolute;right:78px;top:18px;width:46px;height:46px;display:grid;place-items:center;border-radius:9px;background:var(--raised);color:var(--text)}.viewer-download:hover,.image-viewer>button:hover{background:var(--hover)}
.status-dot.away,.profile-status.away:before{background:#e3b341}.status-dot.away{box-shadow:inset 0 0 0 2.5px #e3b341;background:transparent}
.profile-status.online{color:var(--green)}.profile-status.away{color:#e3b341}
.my-status{display:block;padding:0;background:transparent;font-size:12px;text-align:left;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.my-status.online{color:var(--green)}.my-status.away{color:#e3b341}.my-status:hover{text-decoration:underline}.my-status:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:currentColor;margin-right:6px;vertical-align:1px}
.image-viewer>.viewer-download{right:78px}
/* Все уведомления и ошибки — сверху по центру */
.toast{top:16px;bottom:auto;left:50%;right:auto;transform:translateX(-50%);z-index:160;display:flex;align-items:center;gap:10px;max-width:min(520px,calc(100vw - 24px));padding:11px 16px 11px 12px;border-radius:10px;background:var(--surface);color:var(--text);border:1px solid var(--border);box-shadow:0 14px 44px rgba(0,0,0,.45);font-size:14px;animation:toastIn .18s ease-out}
.toast-icon{width:24px;height:24px;flex:0 0 24px;display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--green) 18%,transparent);color:var(--green)}.toast-icon .ui-icon{width:14px;height:14px;stroke-width:2.4}
.toast.error{border-color:color-mix(in srgb,var(--red) 55%,transparent);background:color-mix(in srgb,var(--red) 12%,var(--surface))}.toast.error .toast-icon{background:var(--red);color:#fff}
[data-theme="onyx"] .toast{background:var(--surface);color:var(--text)}[data-theme="onyx"] .toast.error{background:color-mix(in srgb,var(--red) 12%,var(--surface))}
@media(min-width:561px){.incoming-call:not(.hidden)~.toast{top:112px}}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translate(-50%,0)}}
@media(max-width:560px){.toast{top:10px}}
/* Мобильная панель звонка: видны счётчик и участники */
@media(max-width:760px){.call-participants{display:flex;margin-left:4px}.call-person .avatar{width:28px;height:28px}}
@media(max-width:560px){.call-info>div:nth-child(2){display:block}.call-info>div:nth-child(2) strong{display:none}.call-info{gap:8px}.call-participants{max-width:44vw;overflow:hidden}.call-bar .danger{min-height:36px;padding:0 12px}.primary.compact{white-space:nowrap}}

/* ===== v2.6 ===== */
.content{position:relative}
.topbar-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}.topbar-actions .icon-btn.active-tool{color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent)}
/* Сообщения: действия, правки, отметки */
.message{position:relative;border-radius:10px;transition:background .2s}.message:hover{background:color-mix(in srgb,var(--text) 3%,transparent)}
.msg-actions{position:absolute;top:-12px;right:8px;display:none;gap:2px;padding:3px;border-radius:9px;background:var(--menu);border:1px solid var(--menu-line);box-shadow:0 6px 18px rgba(0,0,0,.35);z-index:3}
.message:hover .msg-actions{display:flex}.msg-actions button{width:30px;height:30px;display:grid;place-items:center;border-radius:6px;background:transparent;color:var(--muted)}.msg-actions button:hover{background:var(--hover);color:var(--text)}.msg-actions .danger-act:hover{color:var(--red)}.msg-actions .ui-icon{width:16px;height:16px}
@media(hover:none){.message:hover .msg-actions{display:none}}
.message-head{flex-wrap:wrap}.edited{font-size:11px;color:var(--muted);font-style:italic}
.ticks{display:inline-grid;place-items:center;margin-left:-2px;color:var(--muted)}.ticks .ui-icon{width:16px;height:16px;stroke-width:2.2}.ticks.read{color:var(--accent)}
.message.mention-me{background:color-mix(in srgb,#e3b341 9%,transparent);box-shadow:inset 3px 0 0 #e3b341}
.message.editing{background:color-mix(in srgb,var(--accent) 10%,transparent);box-shadow:inset 3px 0 0 var(--accent)}
.message.flash{animation:msgFlash 1.6s ease-out}@keyframes msgFlash{0%,35%{background:color-mix(in srgb,var(--accent) 26%,transparent)}100%{background:transparent}}
.mention{padding:0 3px;border-radius:4px;background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent);font-weight:650;cursor:pointer}.mention.me{background:color-mix(in srgb,#e3b341 22%,transparent);color:#f0c75e}
.reply-quote{display:grid;gap:1px;max-width:min(520px,100%);margin:4px 0 4px;padding:5px 10px;border-left:3px solid var(--accent);border-radius:0 7px 7px 0;background:color-mix(in srgb,var(--accent) 9%,transparent);text-align:left;color:var(--text);font-size:13px}.reply-quote b{color:var(--accent);font-size:12px}.reply-quote span{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.reply-quote:hover{background:color-mix(in srgb,var(--accent) 15%,transparent)}.reply-quote.deleted span{font-style:italic}
/* Баннер ответа/редактирования */
.composer-banner{display:grid;grid-template-columns:28px minmax(0,1fr) 34px;align-items:center;gap:8px;margin:0 clamp(16px,3vw,36px) -4px;padding:7px 8px 11px;border:1px solid var(--border);border-bottom:0;border-radius:12px 12px 0 0;background:var(--surface);position:relative;z-index:0}.composer-banner .banner-icon{color:var(--accent);display:grid;place-items:center}.composer-banner.editing .banner-icon{color:#e3b341}
.banner-body{display:grid;text-align:left;background:transparent;min-width:0;padding:0}.banner-body b{font-size:12px;color:var(--accent)}.editing .banner-body b{color:#e3b341}.banner-body span{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.banner-close{width:32px;height:32px;display:grid;place-items:center;border-radius:7px;background:transparent;color:var(--muted)}.banner-close:hover{background:var(--hover);color:var(--text)}.banner-close .ui-icon{width:16px;height:16px}
.composer.has-banner{border-top-left-radius:0;border-top-right-radius:0}.composer.has-banner .file-preview{bottom:110px}
@media(max-width:900px){.composer-banner{margin:0 16px -4px}}@media(max-width:560px){.composer-banner{margin:0 8px -4px}}
/* Упоминания */
.mention-popup{position:absolute;left:44px;bottom:calc(100% + 8px);width:min(300px,calc(100% - 60px));padding:6px;border-radius:10px;background:var(--menu);border:1px solid var(--menu-line);box-shadow:0 14px 40px rgba(0,0,0,.45);z-index:30}.mention-title{padding:4px 8px 6px;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}
.mention-popup button{width:100%;display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:9px;align-items:center;padding:6px 8px;border-radius:7px;background:transparent;text-align:left}.mention-popup button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mention-popup button small{color:var(--muted);font-size:11px}.mention-popup button.active,.mention-popup button:hover{background:var(--hover)}
/* Непрочитанные */
.nav-badges{margin-left:auto;display:inline-flex;align-items:center;gap:6px}.nav-badges:empty{display:none}.nav-badges .room-call,.nav-badges .room-typing{margin-left:0}.nav-badges+.status-dot{margin-left:6px}.nav-badges:empty+.status-dot{margin-left:auto}
.unread{min-width:20px;height:20px;padding:0 6px;display:inline-grid;place-items:center;border-radius:10px;background:var(--accent);color:var(--on-accent);font-style:normal;font-size:11px;font-weight:800}.unread.at{background:#e3b341;color:#1d1503}
/* Поиск */
.search-panel{position:absolute;top:68px;right:0;bottom:0;z-index:35;width:min(380px,100%);display:flex;flex-direction:column;background:var(--surface);border-left:1px solid var(--border);box-shadow:-18px 0 40px rgba(0,0,0,.3)}
.search-head{display:flex;gap:6px;padding:12px;border-bottom:1px solid var(--border)}.search-field{flex:1;display:flex;align-items:center;gap:8px;padding:0 12px;border-radius:9px;background:var(--bg);border:1px solid var(--border);color:var(--muted)}.search-field:focus-within{border-color:var(--accent)}.search-field .ui-icon{width:17px;height:17px;flex:0 0 17px}.search-field input{flex:1;min-width:0;height:40px;border:0;outline:0;background:transparent;color:var(--text)}
.search-scopes{display:flex;gap:6px;padding:10px 12px;flex-wrap:wrap;border-bottom:1px solid var(--border)}.search-scopes button{display:inline-flex;align-items:center;gap:5px;min-height:30px;padding:0 11px;border-radius:15px;background:var(--raised);color:var(--muted);font-size:12.5px;font-weight:650}.search-scopes button.active{background:var(--accent);color:var(--on-accent)}.search-scopes .ui-icon{width:14px;height:14px}
.search-results{flex:1;overflow-y:auto;padding:6px}.search-count{padding:6px 8px;color:var(--muted);font-size:12px}.search-hint{display:grid;justify-items:center;gap:10px;padding:40px 20px;text-align:center;color:var(--muted);font-size:13px}.search-hint .ui-icon{width:30px;height:30px}
.search-hit{width:100%;display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;padding:9px 8px;border-radius:9px;background:transparent;text-align:left}.search-hit:hover{background:var(--hover)}.hit-body{display:grid;gap:2px;min-width:0}.hit-head{display:flex;align-items:baseline;gap:6px;min-width:0}.hit-head b{font-size:13px}.hit-head em{font-style:normal;font-size:12px;color:var(--accent);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hit-head time{margin-left:auto;font-size:11px;color:var(--muted);white-space:nowrap}.hit-text{font-size:13px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}.hit-text mark{background:color-mix(in srgb,#e3b341 35%,transparent);color:var(--text);border-radius:3px;padding:0 1px}
@media(max-width:560px){.search-panel{top:62px;width:100%;border-left:0}}
@media(max-height:620px){.search-panel{top:56px}}
/* Альбомы и полоска картинок */
.album{display:grid;gap:3px;width:min(440px,100%);margin-top:8px;padding:3px;border:1px solid var(--border);border-radius:12px;background:var(--bg)}.album-2,.album-4{grid-template-columns:1fr 1fr}.album-3{grid-template-columns:1fr 1fr}.album-3 .album-item:first-child{grid-column:span 2}.album-5{grid-template-columns:repeat(6,1fr)}.album-5 .album-item{grid-column:span 2}.album-5 .album-item:nth-child(-n+2){grid-column:span 3}.album-5 .album-item:nth-child(n+6){display:none}
.album-item{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;border-radius:8px;cursor:zoom-in;background:var(--raised)}.album-3 .album-item:first-child,.album-5 .album-item:nth-child(-n+2){aspect-ratio:16/10}.album-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s}.album-item:hover img{transform:scale(1.03)}.album-more{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.55);font-size:22px;color:#fff}
button.media-download{background:transparent;font:inherit;cursor:pointer}
.file-preview.image-strip{width:min(520px,calc(100vw - 90px))}.thumbs{display:flex;gap:6px;margin-top:9px;overflow-x:auto;padding-bottom:2px}.thumb{position:relative;flex:0 0 64px;height:64px;border-radius:8px;overflow:hidden;background:var(--raised);border:1px solid var(--border)}.thumb img{width:100%;height:100%;object-fit:cover;display:block}.thumb button{position:absolute;top:3px;right:3px;width:20px;height:20px;display:grid;place-items:center;border-radius:50%;background:rgba(0,0,0,.7);color:#fff}.thumb button .ui-icon{width:11px;height:11px;stroke-width:2.6}
.thumb.add{display:grid;place-items:center;color:var(--muted);border-style:dashed;cursor:pointer}.thumb.add:hover{color:var(--text);border-color:var(--accent)}.thumb.pending{display:grid;place-items:center;font-size:12px}.thumb.pending i{position:absolute;left:0;bottom:0;height:4px;width:var(--p);background:var(--accent)}
/* Просмотрщик: листание */
.viewer-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:64px;display:grid;place-items:center;border-radius:10px;background:rgba(30,32,38,.75);color:#fff;z-index:2}.viewer-nav:hover{background:rgba(50,54,64,.9)}.viewer-nav.prev{left:14px}.viewer-nav.next{right:14px}.image-viewer>.viewer-nav{right:auto}.image-viewer>.viewer-nav.next{right:14px;left:auto}.viewer-nav .ui-icon{width:26px;height:26px}
@media(max-width:560px){.viewer-nav{width:40px;height:52px;background:rgba(0,0,0,.45)}.viewer-nav.prev{left:6px}.image-viewer>.viewer-nav.next{right:6px}}
/* Удаление */
.delete-preview{margin:0 0 18px;padding:10px 12px;border-left:3px solid var(--red);border-radius:0 8px 8px 0;background:var(--raised);color:var(--muted);font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere;max-height:120px;overflow:auto}.modal-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.modal-actions .danger{min-height:44px}
/* Демонстрация экрана */
.call-actions{display:flex;gap:8px;align-items:center}.call-tool{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 12px;border-radius:9px;background:var(--raised);border:1px solid var(--border);font-weight:700}.call-tool:hover{background:var(--hover)}.call-tool .ui-icon{width:18px;height:18px}.call-tool.active{background:color-mix(in srgb,var(--accent) 20%,var(--raised));border-color:var(--accent);color:var(--text)}
.screen-badge{position:absolute;left:-4px;bottom:-3px;width:18px;height:18px;display:grid;place-items:center;border-radius:50%;background:var(--accent);color:var(--on-accent);border:2px solid var(--surface)}.screen-badge .ui-icon{width:10px;height:10px;stroke-width:2.4}
.screen-stage{margin:12px clamp(16px,3vw,36px) 0;border:1px solid var(--border);border-radius:12px;background:#000;overflow:hidden;flex:0 0 auto}.stage-head{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--surface);font-size:13px}.stage-toggle{margin-left:auto;min-height:28px;padding:0 10px;border-radius:7px;background:var(--raised);font-size:12px;font-weight:650}
.stage-tiles{display:grid;gap:4px;padding:4px;max-height:46vh}.stage-tiles[data-count="2"]{grid-template-columns:1fr 1fr}.stage-tiles[data-count="3"],.stage-tiles[data-count="4"]{grid-template-columns:1fr 1fr}.screen-stage.collapsed .stage-tiles{display:none}
.screen-tile{position:relative;min-height:0;background:#000;border-radius:8px;overflow:hidden;display:grid}.screen-tile video{width:100%;height:100%;max-height:calc(46vh - 8px);object-fit:contain;background:#000;display:block}.screen-tile:fullscreen video{max-height:100vh}
.screen-caption{position:absolute;left:8px;bottom:8px;display:flex;align-items:center;gap:7px;padding:4px 9px;border-radius:7px;background:rgba(0,0,0,.65);color:#fff;font-size:12px;max-width:calc(100% - 16px)}.cap-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.screen-tools{position:absolute;right:8px;top:8px;display:flex;gap:6px;opacity:0;transition:opacity .15s}.screen-tile:hover .screen-tools,.screen-tile.mine .screen-tools{opacity:1}.screen-tools button{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 9px;border-radius:7px;background:rgba(0,0,0,.65);color:#fff;font-size:12px;font-weight:650}.screen-tools button:hover{background:rgba(40,44,52,.9)}.screen-tools .stop{background:rgba(190,55,62,.9)}.screen-tools .ui-icon{width:15px;height:15px}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 3px rgba(239,107,112,.25);flex:0 0 8px;animation:recBlink 1.4s infinite}
.share-options{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.share-option{display:grid;justify-items:center;gap:4px;padding:14px 6px;border-radius:10px;background:var(--raised);border:1px solid var(--border);text-align:center}.share-option .ui-icon{width:26px;height:26px;color:var(--muted)}.share-option b{font-size:13px}.share-option small{font-size:11px;color:var(--muted)}.share-option.active{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}.share-option.active .ui-icon{color:var(--accent)}
.field select{height:44px;border:1px solid var(--border);border-radius:9px;background:var(--bg);color:var(--text);padding:0 10px}.share-audio{margin-top:14px;font-size:13px}
@media(max-width:900px){.screen-stage{margin:10px 16px 0}}@media(max-width:560px){.screen-stage{margin:8px 8px 0}.stage-tiles{max-height:34vh}.screen-tile video{max-height:calc(34vh - 8px)}.screen-tools span{display:none}.screen-tools{opacity:1}.call-tool span{display:none}.call-tool{padding:0 10px}}
.topbar .topbar-actions span{color:inherit;font-size:inherit;display:inline}.topbar .topbar-actions .call-count{font-size:12px;display:grid}@media(max-width:560px){.topbar .topbar-actions .call-label{display:none}.topbar-actions{gap:4px}}

/* ===== v2.6.1 — аккуратная подсветка упоминаний и редактирования ===== */
.message{padding:6px 12px;margin:0 -12px 12px;border-radius:8px}
.message.mention-me,.message.editing{box-shadow:none;border-radius:0 8px 8px 0}
.message.mention-me::before,.message.editing::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:0}
.message.mention-me{background:linear-gradient(90deg,rgba(227,179,65,.11),rgba(227,179,65,.04) 70%,rgba(227,179,65,.02))}.message.mention-me::before{background:#e3b341}
.message.editing{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 13%,transparent),color-mix(in srgb,var(--accent) 4%,transparent) 70%,transparent)}.message.editing::before{background:var(--accent)}
.message.editing .message-head::after{content:"редактируется";margin-left:2px;padding:1px 7px;border-radius:9px;background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent);font-size:10.5px;font-weight:700;letter-spacing:.02em}
.message.mention-me:hover{background:linear-gradient(90deg,rgba(227,179,65,.14),rgba(227,179,65,.05) 70%,rgba(227,179,65,.03))}
.mention{display:inline-block;padding:0 5px;margin:0 1px;border-radius:5px;line-height:1.35;font-weight:600;background:color-mix(in srgb,var(--accent) 16%,transparent);color:color-mix(in srgb,var(--accent) 85%,#fff)}
.mention.me{background:rgba(227,179,65,.17);color:#f2c95f}.mention:hover{filter:brightness(1.15)}
/* Баннер + поле ввода — одно целое */
.composer-banner{grid-template-columns:3px 22px minmax(0,1fr) 32px;gap:10px;padding:8px 8px 12px 12px;border-color:var(--border);background:var(--raised)}
.composer-banner::before{content:"";grid-row:1;grid-column:1;align-self:stretch;width:3px;border-radius:2px;background:var(--accent)}
.composer-banner .banner-icon{grid-column:2}.composer-banner .banner-body{grid-column:3}.composer-banner .banner-close{grid-column:4}
.composer-banner .banner-icon,.composer-banner.editing .banner-icon{color:var(--accent)}.composer-banner .banner-icon .ui-icon{width:18px;height:18px}
.composer-banner .banner-body b,.editing .banner-body b{color:var(--accent);font-size:12.5px}
.composer-banner:has(+ .composer:focus-within){border-color:var(--accent)}
.composer.has-banner{border-top-color:transparent;position:relative}.composer.has-banner::before{content:"";position:absolute;left:12px;right:12px;top:-1px;height:1px;background:var(--border)}
.nav-empty{text-align:left}.nav-empty span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:560px){.message{padding:6px 8px;margin:0 -8px 10px}}
.rail-btn:not(.active):hover{background:var(--hover);color:var(--text)}
/* Список друзей при создании группы */
.check-row{display:grid!important;grid-template-columns:34px minmax(0,1fr) auto 22px;align-items:center;gap:10px;padding:8px 10px;border:1px solid transparent;font-size:14px;color:var(--text)}
.check-row>span:nth-of-type(1){flex:none}.check-row .avatar.sm{width:34px;height:34px;flex:0 0 34px}
.check-row .check-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.check-row .status-dot{margin:0}.check-row:has(input:checked){border-color:color-mix(in srgb,var(--accent) 45%,transparent);background:color-mix(in srgb,var(--accent) 9%,transparent)}
.check-list{border:1px solid var(--border);border-radius:10px;padding:4px;background:var(--bg)}
/* v2.6.1 · gallery arrows centered, voice duration no-wrap */
.image-viewer>.viewer-nav{top:50%;transform:translateY(-50%);width:48px;height:64px;font-size:0}
.image-viewer>.viewer-nav.prev{left:14px;right:auto}.image-viewer>.viewer-nav.next{right:14px;left:auto}
.voice-title>span{white-space:nowrap;flex:none;color:var(--muted);font-size:13px}.voice-title b{flex:none}.waveform{min-width:0;overflow:hidden}
.voice-message audio{width:100%}
@media(max-width:560px){.image-viewer>.viewer-nav{width:40px;height:56px;background:rgba(0,0,0,.5)}.image-viewer>.viewer-nav.prev{left:6px}.image-viewer>.viewer-nav.next{right:6px}.image-viewer{background:rgba(4,5,8,.97)}}
/* v2.7 · системные сообщения, участники, громкость, «О нас» */
.system-msg{display:flex;align-items:center;justify-content:center;gap:8px;margin:10px auto;padding:6px 14px;width:fit-content;max-width:calc(100% - 32px);border-radius:999px;background:color-mix(in srgb,var(--raised) 85%,transparent);border:1px solid var(--border);color:var(--muted);font-size:13px;line-height:1.35;text-align:center}
.system-msg b{color:var(--text);font-weight:600}.system-msg time{font-size:11px;opacity:.7;white-space:nowrap}
.system-msg .sys-icon{display:inline-grid;place-items:center;flex:none;color:var(--accent)}.system-msg .ui-icon{width:15px;height:15px}
.system-msg.good .sys-icon{color:var(--green)}.system-msg.warn .sys-icon{color:var(--red)}
.member-list{display:grid;gap:4px;max-height:min(52vh,420px);overflow:auto;margin:14px 0;padding:4px;border:1px solid var(--border);border-radius:10px}
.member-row{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:8px;border-radius:8px}
.member-row:hover{background:var(--hover)}.member-row .avatar{width:36px;height:36px}
.member-row>.status-dot{position:absolute;left:36px;top:36px;border:2px solid var(--surface)}
.member-info{min-width:0;display:grid}.member-info b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.member-info em{font-style:normal;color:var(--muted);font-weight:400}
.member-info small{color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.member-tags{display:flex;gap:5px}.tag{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:999px;font-size:11px;font-weight:600;white-space:nowrap}
.tag .ui-icon{width:12px;height:12px}.tag.owner{background:rgba(232,180,80,.16);color:#f0c46a}.tag.live{background:rgba(84,201,138,.15);color:var(--green)}
.member-acts{display:flex;gap:4px}.icon-btn.sm{width:32px;height:32px;border-radius:8px}.icon-btn.sm .ui-icon{width:16px;height:16px}
.icon-btn.danger-ghost{color:#ff9296}.icon-btn.danger-ghost:hover{background:rgba(239,107,112,.16)}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}.modal-actions>button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:120px}
.modal-actions.stack{display:grid;grid-template-columns:1fr 1fr}.modal-actions .ui-icon{width:16px;height:16px}
@media(max-width:560px){.member-tags{display:none}.modal-actions.stack{grid-template-columns:1fr}}
.menu-volume{padding:8px 10px 6px;border-radius:7px}.menu-volume .mv-head{display:grid;grid-template-columns:24px 1fr auto;gap:8px;align-items:center;color:#e8eaf0;font-size:13.5px}
.menu-volume .mv-head span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-volume b{font-variant-numeric:tabular-nums;font-size:13px;color:var(--muted)}.menu-volume b.boost{color:#f0c46a}
.menu-volume input[type=range]{width:100%;margin:10px 0 4px;height:6px;-webkit-appearance:none;appearance:none;border-radius:999px;background:linear-gradient(90deg,var(--accent) var(--p,50%),#353a45 var(--p,50%));outline:none;cursor:pointer}
.menu-volume input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--accent);box-shadow:0 1px 4px rgba(0,0,0,.4)}
.menu-volume input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;border:3px solid var(--accent)}
.menu-volume .mv-marks{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--muted)}
.context-menu .menu-volume .mv-marks button{width:auto;min-height:0;display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;color:var(--muted);background:#262a33}
.context-menu .menu-volume .mv-marks button:hover{color:var(--text);background:#323845}
.context-menu{width:min(262px,calc(100vw - 20px))}
.call-person .vol-badge{position:absolute;left:-4px;top:-6px;min-width:22px;padding:0 4px;height:15px;border-radius:999px;background:#262a33;border:1px solid var(--border);font-size:9.5px;font-style:normal;line-height:13px;text-align:center;color:#f0c46a;font-weight:700}
.about-open{width:100%;margin-top:18px;display:grid!important;grid-template-columns:22px 1fr auto;align-items:center;gap:10px;text-align:left}
.about-open .brand-logo,.about-open svg{width:20px;height:20px}.about-open small{color:var(--muted);font-size:12px}
.about-hero{display:flex;align-items:center;gap:14px;margin-bottom:14px}.about-logo{width:56px;height:56px;flex:none}
.about-hero h3{margin:0}.about-hero span{color:var(--muted);font-size:13px}
.about-body{max-height:min(55vh,460px);overflow:auto;margin-bottom:16px;line-height:1.55}.about-body h4{margin:14px 0 6px;font-size:14px;color:var(--accent)}
.about-body p{margin:0 0 8px;color:var(--text)}.about-body ul{margin:0 0 8px;padding-left:18px}.about-body li{margin:3px 0}.about-body a{color:var(--accent)}
.modal-actions>button{white-space:nowrap;padding-left:12px;padding-right:12px}.about-open{padding:10px 14px!important}
.about-logo{padding:9px;border-radius:14px;background:var(--brand-tile,#7a2f3b)}
/* v2.8 · даты, история, аккаунт, чёрный список */
.day-sep{position:sticky;top:6px;z-index:3;display:flex;justify-content:center;margin:14px 0 8px;pointer-events:none}
.day-sep span{padding:4px 12px;border-radius:999px;background:color-mix(in srgb,var(--raised) 92%,transparent);border:1px solid var(--border);color:var(--muted);font-size:12px;font-weight:600;box-shadow:0 4px 14px rgba(0,0,0,.25);backdrop-filter:blur(6px)}
.history-top{display:flex;align-items:center;justify-content:center;gap:8px;margin:8px 0 4px;padding:8px;color:var(--muted);font-size:12.5px}
.history-top.loading{opacity:.85}.spinner{width:14px;height:14px;border-radius:50%;border:2px solid var(--border);border-top-color:var(--accent);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.message.blocked-msg{display:flex;align-items:center;gap:10px;min-height:0;padding:8px 14px;margin:4px 0;color:var(--muted);font-size:13px;font-style:italic}
.blocked-msg .blocked-icon{display:inline-grid}.blocked-msg .ui-icon{width:15px;height:15px}
.blocked-msg button{margin-left:auto;font-style:normal;padding:3px 10px;border-radius:999px;background:var(--raised);color:var(--text);font-size:12px}.blocked-msg button:hover{background:var(--hover)}
.account-actions{display:grid;gap:8px}.account-actions button{display:flex;align-items:center;gap:10px;justify-content:flex-start;padding:10px 14px}.account-actions .ui-icon{width:16px;height:16px;color:var(--muted)}
.profile-sub-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px;width:100%}.profile-sub-actions:has(>:only-child){grid-template-columns:1fr}
.profile-sub-actions button{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:13px;padding:9px 10px;white-space:nowrap}.profile-sub-actions .ui-icon{width:15px;height:15px}
.danger-text{color:#ff9296!important}.blocked-note{display:flex;align-items:center;justify-content:center;gap:7px;color:#ff9296}.blocked-note .ui-icon{width:15px;height:15px}
.field-error{display:block;min-height:18px;margin-top:-4px;color:#ff9296;font-size:12.5px}
.small-btn{padding:6px 12px!important;font-size:12.5px;white-space:nowrap}
.modal-actions>button{margin:0!important;height:44px;min-height:44px;width:auto}.modal-actions>button.primary{flex:1}
/* v2.8.1 · модальные окна ровно по центру и не обрезаются на телефоне */
dialog#modal{padding:0;margin:auto;max-width:100vw;max-height:100dvh;overflow:visible}
.modal-card{max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain}
@media(max-width:560px){.modal-card{width:calc(100vw - 20px);padding:22px 18px}.modal-card .modal-close{top:10px;right:10px}}

/* v2.9 · Новый логотип «Тёплый круг» (друзья вокруг костра) */
.brand-logo{--logo-ring:#e2a873;--logo-mark:#fbead0;--logo-flame:#ffa54c;--logo-core:#ffe08a;--logo-log:#c98b5c}
.brand-logo.big{--logo-ring:#d9a06b;--logo-mark:var(--text)}
[data-theme="onyx"] .brand-logo{--logo-ring:#cdb98f;--logo-mark:#efe6d2;--logo-log:#9c8a66}

/* v2.9 · Тема «Камин»: тёплое дерево, янтарь и свет лампы */
.swatch.lamp{background:linear-gradient(135deg,#2a1e17 0 50%,#f0a35e 50%)}
[data-theme="lamp"]{color-scheme:dark;--bg:#1c1410;--surface:#241a14;--raised:#2f231b;--hover:#3a2b21;--border:#45342a;--text:#f6e8d6;--muted:#bba48d;--accent:#f0a35e;--accent2:#e08c45;--on-accent:#2a1608;--green:#9ccf7a;--red:#ec7a62;--wine:#7a3b26;--brand-ring:#f0a35e;--rail-bg:#140e0b;--rail-line:#2c2019;--glass:rgba(28,20,16,.78);--menu:#2a1f18;--menu-line:#4a382c;--thumb:#5a4535;--login-bg:radial-gradient(ellipse at 50% 115%,rgba(255,150,60,.30),transparent 55%),radial-gradient(circle at 18% 8%,rgba(240,163,94,.12),transparent 40%),#160f0c;--bg-opacity:.22;--bg-filter:sepia(.85) saturate(1.3) hue-rotate(-12deg) brightness(.9);--chip:#4a3122}
[data-theme="lamp"] .logo,[data-theme="lamp"] .brand-mark{background:linear-gradient(160deg,#4a2e1f,#24170f);border:1px solid #5b3d2b;box-shadow:0 0 18px rgba(255,140,50,.18)}
[data-theme="lamp"] .messages{background:radial-gradient(ellipse at 50% 120%,rgba(255,150,60,.10),transparent 60%)}
[data-theme="lamp"] .rail-btn.active{box-shadow:inset 0 0 0 1px rgba(255,200,140,.18),0 0 14px rgba(240,163,94,.18)}
[data-theme="lamp"] .toast{background:var(--raised);color:var(--text);border:1px solid var(--border)}
[data-theme="lamp"] .toast.error{background:color-mix(in srgb,var(--red) 16%,var(--raised))}
[data-theme="lamp"] ::selection{background:rgba(240,163,94,.35)}

/* v3.0.1 · Компактный аудиокруг в боковой панели, когда вы смотрите другой чат */
.call-dock{padding:8px 8px 0;border-top:1px solid var(--border)}
.call-dock.hidden{display:none}
.call-bar .call-text .dock-room,.call-bar .call-text .dock-hint{display:none}
.call-bar.docked{margin:0;padding:9px 10px;gap:8px;border-radius:10px;flex-direction:column;align-items:stretch}
.call-bar.docked .call-info{min-width:0;cursor:pointer;gap:9px;align-items:flex-start}
.call-bar.docked .call-info:hover .dock-room{text-decoration:underline}
.call-bar.docked .call-participants{display:none}
.call-bar.docked .call-info>.call-text{display:block!important;min-width:0;flex:1}
.call-bar.docked .call-text strong{display:none!important}
.call-bar.docked .call-text .dock-room{display:block;font-size:13px;font-weight:750;color:var(--green);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.call-bar.docked .call-text>span{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.call-bar.docked .call-text .dock-hint:not(.hidden){display:flex;align-items:center;gap:5px;margin-top:3px;color:var(--accent)}
.call-bar.docked .dock-hint .ui-icon{width:13px;height:13px;flex:none}
.call-bar.docked .call-actions{gap:6px;display:grid;grid-template-columns:36px 1fr}
.call-bar.docked .call-tool{min-height:32px;width:36px;padding:0;justify-content:center}
.call-bar.docked .call-tool.hidden+#leaveCallBtn{grid-column:1/-1}
.call-bar.docked #leaveCallBtn{min-height:32px;padding:0 10px;font-size:12.5px}
.call-bar.docked .pulse{flex:none;width:8px;height:8px;margin-top:5px}
/* Демонстрация показывается только в чате звонка */
.screen-stage.call-away{display:none!important}
/* Кнопка «Вернуться в звонок» на узкой полосе (телефон: боковая панель спрятана) */
.rail-call{position:relative;color:var(--green);background:color-mix(in srgb,var(--green) 14%,var(--raised))}
.rail-call.hidden{display:none}
.rail-call-pulse{position:absolute;top:7px;right:7px;width:8px;height:8px;border-radius:50%;background:var(--green);animation:railPulse 1.6s ease-out infinite}
@keyframes railPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--green) 60%,transparent)}100%{box-shadow:0 0 0 8px transparent}}
@media(min-width:561px){.rail-call{display:none!important}}
@media(prefers-reduced-motion:reduce){.rail-call-pulse{animation:none}}

/* v3.0.1 · Меню статуса: цветная точка, пояснение и переключатель вместо галочки */
.context-menu.status-menu{width:292px}
.status-menu-head{padding:6px 10px 8px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.context-menu .status-option{grid-template-columns:14px 1fr 18px;gap:12px;min-height:52px;padding:8px 10px}
.context-menu .status-option .status-dot{margin:0;width:11px;height:11px}
.status-dot.offline{background:transparent;box-shadow:inset 0 0 0 2.5px #8a909c}
.so-text{display:grid;gap:2px;min-width:0}
.so-text b{font-size:13.5px;color:var(--text)}
.so-text small{font-size:11.5px;line-height:1.3;color:var(--muted)}
.so-radio{width:18px;height:18px;border-radius:50%;border:2px solid var(--border);transition:border-color .15s,box-shadow .15s}
.status-option.selected{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.status-option.selected .so-radio{border-color:var(--accent);box-shadow:inset 0 0 0 4px var(--surface),inset 0 0 0 9px var(--accent)}
.my-status.offline{color:#9aa0ab}
.my-status.offline:before{background:transparent;box-shadow:inset 0 0 0 2px currentColor}
@media(max-width:560px){.context-menu.status-menu{width:min(292px,calc(100vw - 20px))}}
.call-bar.docked #screenBtn span{display:none!important}
.call-bar.docked #screenBtn .ui-icon{width:17px;height:17px}

/* v3.0.2 · Пинг */
.sidebar-head .wordmark{margin-right:auto}
.ping-chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px;border-radius:999px;font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;background:color-mix(in srgb,var(--ping) 12%,transparent);color:var(--ping);border:1px solid color-mix(in srgb,var(--ping) 28%,transparent);cursor:default;flex:none;--ping:var(--muted)}
.ping-chip.hidden{display:none}
.ping-chip.good{--ping:var(--green)}
.ping-chip.ok{--ping:#e3b341}
.ping-chip.bad{--ping:var(--red)}
.sidebar-head .ping-chip{margin-right:6px}
.ping-bars{display:inline-flex;align-items:flex-end;gap:2px;height:11px}
.ping-bars b{width:3px;border-radius:1px;background:currentColor;opacity:.25}
.ping-bars b:nth-child(1){height:4px}.ping-bars b:nth-child(2){height:7px}.ping-bars b:nth-child(3){height:11px}
.ping-bars b.on{opacity:1}
.call-info>.ping-chip{margin-left:4px}
.call-bar.docked .call-info>.ping-chip{margin:0;height:22px;padding:0 7px;font-size:11px}
.call-person{position:relative}
.peer-ping{position:absolute;right:-1px;top:-1px;width:9px;height:9px;border-radius:50%;border:2px solid var(--surface);background:var(--muted)}
.peer-ping.good{background:var(--green)}.peer-ping.ok{background:#e3b341}.peer-ping.bad{background:var(--red)}
@media(max-width:560px){.call-info>.ping-chip span{display:none}.call-info>.ping-chip{padding:0 6px}}

/* v3.0.3 · Без двойных кнопок: «Остановить показ» есть на самой демонстрации */
#screenBtn .lbl-short{display:none}
.call-bar:not(.docked) #screenBtn.active{display:none}
/* Компактная панель: «Экран/Остановить» и «Завершить» — две одинаковые кнопки */
.call-bar.docked .call-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.call-bar.docked #screenBtn,.call-bar.docked #leaveCallBtn{width:auto;min-height:34px;height:34px;padding:0 8px;border-radius:9px;font-size:12.5px;font-weight:750;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.call-bar.docked #screenBtn span{display:none!important}
.call-bar.docked #screenBtn .lbl-short{display:inline!important}
.call-bar.docked #screenBtn.active{background:color-mix(in srgb,var(--red) 16%,var(--raised));border-color:color-mix(in srgb,var(--red) 45%,var(--border));color:var(--text)}
.call-bar.docked #screenBtn.hidden+#leaveCallBtn{grid-column:1/-1}
.call-bar.docked #screenBtn .ui-icon{width:15px;height:15px}
/* 3.0.4: читаемые участники аудиокруга на мобильном */
@media(max-width:900px){
.call-bar:not(.docked){flex-wrap:wrap;row-gap:8px;padding:10px 10px 8px}
.call-bar:not(.docked) .call-info{display:contents}
.call-bar:not(.docked) .call-info>.pulse{display:none}
.call-bar:not(.docked) .call-info>.call-text{display:block!important;flex:1;min-width:0}
.call-bar:not(.docked) .call-text strong{display:none!important}
.call-bar:not(.docked) .call-text #callCount{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12.5px;font-weight:700;color:var(--green)}
.call-bar:not(.docked) .call-actions{gap:6px}.call-bar:not(.docked) #leaveCallBtn{padding:0 10px!important;font-size:14px}.call-bar:not(.docked) #screenBtn{padding:0 9px}.call-bar:not(.docked) .call-info>.ping-chip{flex:none}
.call-bar:not(.docked) .call-participants{order:10;flex:1 0 100%;max-width:none;margin:0;padding:6px 6px 6px 4px;border-top:1px solid rgba(84,201,138,.2);display:flex;gap:10px;overflow-x:auto;scrollbar-width:none}
.call-bar:not(.docked) .call-participants::-webkit-scrollbar{display:none}
.call-bar:not(.docked) .call-person{flex:none;display:block;padding:3px 0}
.call-bar:not(.docked) .call-person .avatar{width:42px;height:42px;font-size:15px}
.call-bar:not(.docked) .call-person .peer-ping{right:6px;top:3px}
.call-bar:not(.docked) .call-actions{flex:none}
}

/* 3.0.4: без точек статуса/пинга на аватарах участников аудиокруга */
.call-person .peer-ping{display:none!important}
@media(max-width:900px){.call-bar:not(.docked) #screenBtn>span{display:none}.call-bar:not(.docked) .call-info>.ping-chip span{display:none}.call-bar:not(.docked) .call-info>.ping-chip{padding:0 7px}}
@media(min-width:901px){.call-bar:not(.docked) .call-info{flex:1 1 auto}.call-bar:not(.docked) .call-info>.pulse{flex:none}.call-bar:not(.docked) .call-info>.call-text{min-width:0;flex:0 1 auto}.call-bar:not(.docked) .call-text strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.call-bar:not(.docked) .call-participants{flex:none}.call-bar:not(.docked) .call-actions{flex:none}}
@media(max-width:760px){.call-bar:not(.docked){column-gap:8px}.call-bar:not(.docked) .call-info>.ping-chip{background:transparent;border-color:transparent;padding:0 2px;margin:0}.call-bar:not(.docked) #leaveCallBtn{font-size:13.5px;padding:0 9px!important}}