*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
	--bg0:#f4f4f2;--bg1:#ffffff;--bg2:#f9f9f7;--bg3:#f0f0ee;--bg4:#e6e6e3;
	--line:#ddddd9;--t0:#1a1a18;--t1:#555550;--t2:#999990;
	--amber:#A60D0D;--amberl:#c41414;--green:#00cd58;--red:#c00;--blue:#1a6abf;
	--r:7px;--ui:'Roboto Condensed',sans-serif;--hd:'Unbounded',sans-serif;
	--sb-w:240px;--tb-h:54px;--vc-h:62px;--mob-tab:64px;
}
html,body{height:100%;background:var(--bg0);color:var(--t0);font-family:var(--ui);font-size:15px;line-height:1.5;overflow:hidden}

/* ── LOGIN ─────────────────────────────── */
#ls{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:var(--bg0);z-index:100;padding:16px}
#ls.h{display:none}
.lb{width:100%;max-width:360px;background:var(--bg1);border:1px solid var(--line);border-radius:12px;padding:40px 36px;animation:fu .4s ease;box-shadow:0 4px 24px rgba(0,0,0,.08)}
@keyframes fu{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.logo{color:var(--amber);margin-bottom:16px;display:flex;align-items:center;justify-content:center}
.sub{color:var(--t2);font-size:13px;margin-bottom:28px;letter-spacing:.06em;text-transform:uppercase}
.f{margin-bottom:14px}
.f label{display:block;color:var(--t2);font-size:11px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px}
.f input{width:100%;background:var(--bg3);border:1px solid var(--line);border-radius:var(--r);padding:11px 12px;color:var(--t0);font-family:var(--ui);font-size:14px;outline:none;transition:border-color .2s;-webkit-appearance:none}
.f input:focus{border-color:var(--amber)}
.f input::placeholder{color:var(--t2)}
.err{color:var(--red);font-size:13px;margin-bottom:12px;min-height:16px}
.btnp{width:100%;background:var(--amber);color:#fff;border:none;border-radius:var(--r);padding:12px;font-family:var(--ui);font-size:14px;font-weight:600;letter-spacing:.04em;cursor:pointer;transition:background .15s;-webkit-appearance:none}
.btnp:active{opacity:.85}
.btnp:disabled{background:var(--bg4);color:var(--t2);cursor:default}
.login-sso-msg{font-family:var(--hd);font-size:18px;font-weight:600;color:var(--amber);letter-spacing:2px;font-size:14px;text-align:center;line-height:1.5;padding-top:8px}

/* ── APP ───────────────────────────────── */
#app{display:none;height:100%;height:100dvh;flex-direction:column}
#app.v{display:flex}

/* Topbar */
.tb{display:flex;align-items:center;gap:10px;height:var(--tb-h);padding:0 16px;background:var(--bg1);border-bottom:1px solid var(--line);flex-shrink:0;min-width:0}
.tb-logo{color:var(--amber);flex-shrink:0;display:flex;align-items:center}
.tb-sep{width:1px;height:18px;background:var(--line);flex-shrink:0}
.tb-ch{font-size:15px;font-weight:600;color:var(--t0);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tb-sp{flex:1}
.wsi{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--t2);flex-shrink:0}
.wsd{width:6px;height:6px;border-radius:50%;background:var(--t2);transition:background .3s;flex-shrink:0}
.wsd.on{background:var(--green);box-shadow:0 0 5px var(--green)}
.wsd.er{background:var(--red)}

/* Body = sidebar + main */
.body{display:flex;flex:1;overflow:hidden;min-height:0}
/* Правая панель пользователей */
.sb-right{width:240px;background:var(--bg1);border-left:1px solid var(--line);display:flex;flex-direction:column;flex-shrink:0;overflow:hidden}
.sb-right-head{padding:12px 14px 6px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--t2);flex-shrink:0}
.sb-right-body{flex:1;overflow-y:auto;padding:0 8px 8px}
.sb-right-body::-webkit-scrollbar{width:3px}
.sb-right-body::-webkit-scrollbar-thumb{background:var(--bg4);border-radius:2px}
/* Папки пользователей */
.uf-group{margin-bottom:10px}
.uf-head{display:flex;align-items:center;gap:6px;padding:4px 6px;cursor:pointer;border-radius:var(--r);user-select:none}
.uf-head:hover{background:var(--bg3)}
.uf-arrow{font-size:9px;transition:transform .15s;flex-shrink:0;color:var(--t2)}
.uf-arrow.open{transform:rotate(90deg)}
.uf-name{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--t2);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uf-cnt{font-size:10px;color:var(--t2)}
.uf-members{padding-left:2px}
/* Контекстное меню пользователя */
.ctx-menu{position:fixed;z-index:600;background:var(--bg1);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 4px 16px rgba(0,0,0,.15);padding:4px;min-width:180px;animation:fu .12s ease}
.search-wrap{position:relative;display:flex;align-items:center}
.search-wrap input{flex:1;padding-right:28px!important}
.search-clear{position:absolute;right:6px;background:none;border:none;color:var(--t2);cursor:pointer;font-size:14px;padding:0;line-height:1;display:none}
.search-wrap.has-value .search-clear{display:block}
.ctx-item{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--r);cursor:pointer;font-size:13px;color:var(--t0);transition:background .1s;white-space:nowrap}
.ctx-item:hover{background:var(--bg3)}
.ctx-ico{font-size:14px;flex-shrink:0;height:16px;}
@media (max-width:640px) {
	.uf-group{margin-bottom:15px}
	.uf-name{font-size:14px;}
}

/* ── SIDEBAR (desktop) ─────────────────── */
.sb{width:var(--sb-w);background:var(--bg1);border-right:1px solid var(--line);display:flex;flex-direction:column;flex-shrink:0}
.sb-sec{padding:14px 14px 8px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--t2);display:flex;align-items:center;justify-content:space-between}
.ch-list{flex:1;overflow-y:auto;padding:0 8px 8px;-webkit-overflow-scrolling:touch}
.ch-list::-webkit-scrollbar{width:4px}
.ch-list::-webkit-scrollbar-thumb{background:var(--bg4);border-radius:2px}
/* Папки */
.folder-group{margin-bottom:2px}
.folder-head{display:flex;align-items:center;gap:6px;padding:6px 6px 4px;cursor:pointer;border-radius:var(--r);user-select:none;color:var(--t2);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.folder-head:hover{background:var(--bg3);color:var(--t1)}
.folder-arrow{font-size:9px;transition:transform .15s;flex-shrink:0}
.folder-arrow.open{transform:rotate(90deg)}
.folder-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.folder-channels{padding-left:4px}
/* Call-каналы */
.call-channels-section{padding:0 0 4px;margin-bottom:2px}
.call-ch-head{font-size:10px;color:var(--t2);letter-spacing:.1em;text-transform:uppercase;padding:6px 14px 4px}
.ch-item.is-call{background:color-mix(in srgb,var(--amber) 6%,transparent)}
.ch-item.is-call.invited,.ch-item.invited{animation:pulse-inv 1s ease infinite}
@keyframes pulse-inv{
	0%,100%{background:color-mix(in srgb,var(--amber) 5%,transparent)}
	50%{background:color-mix(in srgb,var(--amber) 25%,transparent);box-shadow:0 0 0 2px color-mix(in srgb,var(--amber) 40%,transparent)}
}
.ch-item{display:flex;align-items:center;gap:8px;padding:9px 8px;border-radius:var(--r);cursor:pointer;color:var(--t1);transition:background .15s,color .15s;position:relative;user-select:none;-webkit-tap-highlight-color:transparent}
.ch-dismiss{display:none;background:none;border:none;color:var(--red);width:24px;height:24px;border-radius:var(--r);cursor:pointer;font-size:17px;font-weight:600;align-items:center;justify-content:center;flex-shrink:0;padding:0;transition:background .15s;-webkit-tap-highlight-color:transparent}
.ch-dismiss:hover{background:color-mix(in srgb,var(--red) 15%,transparent)}
.ch-item.invited .ch-dismiss{display:flex}
.ch-item.invited .ch-ico{display:none!important}
.ch-item:hover{background:var(--bg3);color:var(--t0)}
.ch-item.act{background:var(--bg3);color:var(--amber)}

.ch-item.act::before{content:'';position:absolute;left:-8px;width:3px;height:60%;background:var(--amber);border-radius:0 2px 2px 0}
.ch-ico{font-size:14px;opacity:.7;flex-shrink:0}
.ch-nm{flex:1;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.u-name{flex:1;font-size:14px;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.u-item:hover .u-name{color:var(--t0)}
@media (max-width:640px) {
	.ch-nm{font-size:18px}
	.u-name{font-size:18px}
}
.ch-cnt{font-size:11px;color:var(--t2);background:var(--bg4);padding:1px 6px;border-radius:8px;flex-shrink:0}
.ch-cnt.hu{background:color-mix(in srgb,var(--amber) 15%,transparent);color:var(--amber)}
.ub{padding:10px 12px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.ub-top{display:flex;align-items:center;gap:8px}
.ub-btns{display:flex;gap:6px}
.ub-av{width:32px;height:32px;border-radius:50%;background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--amber);font-weight:600;border:1.5px solid var(--line);flex-shrink:0}
.ub-info{flex:1;min-width:0}
.ub-nm{font-size:14px;color:var(--t0);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ub-role{font-size:11px;color:var(--t2);text-transform:uppercase;letter-spacing:.06em}
.bi{width:28px;height:28px;background:none;border:1px solid var(--line);border-radius:var(--r);color:var(--t1);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;transition:all .15s;flex-shrink:0;-webkit-tap-highlight-color:transparent}
.bi:hover{background:var(--bg3);color:var(--t0)}
.bi.mt{background:color-mix(in srgb,var(--red) 15%,transparent);color:var(--red);border-color:color-mix(in srgb,var(--red) 30%,transparent)}

/* ── MAIN ──────────────────────────────── */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}

/* Voice area */
.va{flex:1;overflow-y:auto;padding:16px;-webkit-overflow-scrolling:touch}
/* ── Чат канала ── */
.chat-panel{display:none;flex-direction:column;height:260px;min-height:120px;max-height:70vh;border-top:1px solid var(--line);flex-shrink:0;background:var(--bg1);position:relative}
.chat-panel.visible{display:flex}
.chat-panel.collapsed .chat-msgs,.chat-panel.collapsed .chat-input-row,.chat-panel.collapsed .chat-resize-handle{display:none}
.chat-panel.collapsed{height:auto!important}
.chat-resize-handle{position:absolute;top:0;left:0;right:0;height:10px;cursor:ns-resize;z-index:10;display:flex;align-items:center;justify-content:center}
.chat-resize-handle::before{content:'';display:block;width:40px;height:4px;border-radius:2px;background:var(--line);transition:background .15s}
.chat-resize-handle:hover::before,.chat-resize-handle.dragging::before{background:var(--amber)}
.chat-head{display:flex;align-items:center;padding:6px 12px;border-bottom:1px solid var(--line);flex-shrink:0;gap:8px;margin-top:4px}
.chat-head-title{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--t2);flex:1}
.chat-clear-btn{background:none;border:none;cursor:pointer;color:var(--t2);padding:2px 4px;border-radius:var(--r);font-size:12px;transition:color .15s;display:flex;align-items:center;gap:4px}
.chat-clear-btn:hover{color:var(--red)}
.chat-msgs{flex:1;overflow-y:auto;padding:4px 8px;display:flex;flex-direction:column;gap:2px}
.chat-msgs::-webkit-scrollbar{width:3px}
.chat-msgs::-webkit-scrollbar-thumb{background:var(--bg4);border-radius:2px}
.chat-msg{display:flex;gap:8px;align-items:flex-start;padding:14px 12px 12px;border-radius:6px;position:relative}
.chat-msg-copy{display:none;position:absolute;top:4px;right:6px;background:none;border:none;padding:2px;cursor:pointer;color:var(--t2);align-items:center;transition:color .15s}
.chat-msg-copy:hover{color:var(--t0)}
.chat-msg:hover .chat-msg-copy{display:flex}
.chat-msgs .chat-msg:nth-child(even){background:color-mix(in srgb,var(--t2) 11%,transparent)}
.chat-msg-av{width:28px;height:28px;border-radius:50%;background:var(--bg4);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;flex-shrink:0;margin-top:-4px}
.chat-msg-body{flex:1;min-width:0}
.chat-msg-meta{display:flex;align-items:baseline;gap:6px;margin-bottom:2px}
.chat-msg-time{font-size:10px;color:var(--t2);flex-shrink:0}
.chat-msg-author{font-size:12px;font-weight:600}
.chat-msg-status{font-size:10px;color:var(--t2)}
.chat-msg-text{font-size:14px;font-family:'Open Sans',var(--ui);color:var(--t0);line-height:1.5;word-break:break-word;white-space:pre-wrap}
.chat-msg-text a{color:var(--blue)}
.chat-msg-text a:hover{color:var(--red)}
.chat-msg-text pre{background:var(--bg3);border:1px solid var(--line);border-radius:6px;padding:6px 10px;overflow-x:auto;font-size:12px;margin:4px 0;white-space:pre-wrap;font-family:monospace}
.chat-msg-text code{background:var(--bg3);border:1px solid var(--line);border-radius:4px;padding:1px 5px;font-family:monospace;font-size:12px;cursor:pointer;white-space:normal}
.chat-msg-text code:hover{background:var(--bg4)}
.chat-input-row{display:flex;align-items:flex-end;gap:8px;padding:8px 12px;border-top:none;flex-shrink:0}
.chat-input{flex:1;background:var(--bg3);border:1px solid var(--line);border-radius:var(--r);padding:7px 10px;font-family:'Open Sans',var(--ui);font-size:13px;color:var(--t0);outline:none;resize:none;max-height:100px;min-height:34px;overflow-y:auto;line-height:1.4}
.chat-input:focus{border-color:var(--t2)}
.chat-send-btn{background:var(--amber);border:none;border-radius:var(--r);width:34px;height:34px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff;transition:opacity .15s}
.chat-send-btn:hover{opacity:.85}
.chat-sys-msg{font-size:11px;color:var(--t2);text-align:center;padding:2px 0}

/* ── Зона демонстрации экрана ── */
.screen-area{margin-bottom:16px;background:var(--bg0);border:1px solid var(--line);border-radius:10px;overflow:hidden;display:none;flex-direction:column}
.screen-area.visible{display:flex}
.screen-header{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--bg1);border-bottom:1px solid var(--line);font-size:13px;color:var(--t1)}
.screen-sharer{color:var(--amber);font-weight:600}
.screen-header-sp{flex:1}
.screen-expand-btn{background:none;border:1px solid var(--line);border-radius:var(--r);padding:4px 10px;font-size:12px;color:var(--t1);cursor:pointer;transition:all .15s}
.screen-expand-btn:hover{background:var(--bg3);color:var(--t0)}
.screen-video-wrap{position:relative;background:#000;aspect-ratio:16/9}
.screen-video-wrap video{width:100%;height:100%;object-fit:contain;display:block}

/* ── Попап — открывается в отдельном окне браузера ── */
.va::-webkit-scrollbar{width:4px}
.va::-webkit-scrollbar-thumb{background:var(--bg3);border-radius:2px}
.es{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--t2)}
.es-ico{font-size:36px;opacity:.3}

/* Participant grid */
.pg{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.pc{background:var(--bg1);border:1px solid var(--line);border-radius:10px;padding:20px 16px;display:flex;flex-direction:column;align-items:center;gap:10px;transition:border-color .2s,box-shadow .2s;animation:ci .25s ease;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.pc.pending{opacity:.6;border-style:dashed;border-color:color-mix(in srgb,var(--amber) 50%,transparent);animation:ci .25s ease,pc-pulse 2s ease infinite}
.pc.disconnected{opacity:.4;filter:grayscale(.8)}
.pc.disconnected .pav::after{content:'';position:absolute;inset:0;border-radius:50%;border:2px dashed var(--t2)}
@keyframes pc-pulse{0%,100%{border-color:color-mix(in srgb,var(--amber) 40%,transparent)}50%{border-color:color-mix(in srgb,var(--amber) 80%,transparent)}}
@keyframes ci{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes co{from{opacity:1}to{opacity:0;transform:scale(.94)}}
.pc.spk{border-color:var(--green);box-shadow:0 0 0 5px color-mix(in srgb,var(--green) 20%,transparent)}
.pav{width:48px;height:48px;border-radius:50%;background:var(--bg4);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:600;color:var(--amber);font-family:var(--hd);position:relative}
.pav-mute{display:none;position:absolute;bottom:-2px;right:-2px;background:var(--bg1);border-radius:50%;width:18px;height:18px;align-items:center;justify-content:center;color:var(--red)}
.pc.peer-muted .pav-mute{display:flex}
@keyframes pr{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.2);opacity:0}}
.pnm{font-size:14px;color:var(--t0);font-weight:500;text-align:center;overflow-wrap:break-word;word-break:break-all;max-width:100%}
.pst{display:none!important}
.pst.mt{color:var(--red)}

/* Voice controls bar */
.vc{display:none;align-items:center;gap:8px;padding:10px 14px;border-top:1px solid var(--line);background:var(--bg1);flex-shrink:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.vc::-webkit-scrollbar{display:none}
.vc.v{display:flex}
.vci{display:flex;align-items:center;gap:6px;flex:1;font-size:14px;color:var(--t1);min-width:0;overflow:hidden}
.vci-dot{color:var(--green);font-size:10px;flex-shrink:0}
.vci-nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bm{display:flex;align-items:center;gap:6px;padding:9px 14px;background:var(--bg3);border:1px solid var(--line);border-radius:var(--r);color:var(--t0);font-family:var(--ui);font-size:14px;cursor:pointer;transition:all .15s;flex-shrink:0;-webkit-tap-highlight-color:transparent;white-space:nowrap}
.bm.mt{background:color-mix(in srgb,var(--red) 12%,transparent);border-color:color-mix(in srgb,var(--red) 30%,transparent);color:var(--red)}
.bm.sc{background:color-mix(in srgb,var(--amber) 12%,transparent);border-color:color-mix(in srgb,var(--amber) 35%,transparent);color:var(--amber)}
.bl{display:flex;align-items:center;gap:6px;padding:9px 14px;background:color-mix(in srgb,var(--red) 10%,transparent);border:1px solid color-mix(in srgb,var(--red) 25%,transparent);border-radius:var(--r);color:var(--red);font-family:var(--ui);font-size:14px;cursor:pointer;transition:all .15s;flex-shrink:0;-webkit-tap-highlight-color:transparent;white-space:nowrap}

/* ── MOBILE TAB BAR ────────────────────── */
.mob-tabs{display:none;height:var(--mob-tab);background:var(--bg1);border-top:1px solid var(--line);flex-shrink:0}
.mob-tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;color:var(--t2);font-size:11px;letter-spacing:.04em;-webkit-tap-highlight-color:transparent;transition:color .15s}
.mob-tab.act{color:var(--amber)}
.mob-tab-ico{font-size:20px}

/* ── MOBILE CHANNEL PANEL ──────────────── */
.mob-ch-panel{
	display:none;
	position:fixed;top:0;left:0;right:0;bottom:var(--mob-tab);
	background:var(--bg0);
	z-index:50;
	flex-direction:column;
}
.mob-ch-panel.open{display:flex}
.mob-panel-head{
	display:flex;align-items:center;gap:10px;
	height:var(--tb-h);padding:0 16px;
	background:var(--bg1);border-bottom:1px solid var(--line);flex-shrink:0;
}
.mob-panel-title{font-size:13px;font-weight:600;color:var(--t0);flex:1}
.mob-close{background:none;border:none;color:var(--t1);font-size:20px;cursor:pointer;padding:4px;line-height:1;-webkit-tap-highlight-color:transparent}

/* ── MOBILE PROFILE PANEL ──────────────── */
.mob-prof-panel{
	display:none;
	position:fixed;top:0;left:0;right:0;bottom:var(--mob-tab);
	background:var(--bg0);
	z-index:50;
	flex-direction:column;
}
.mob-prof-panel.open{display:flex}
.mob-prof-body{padding:20px 16px;display:flex;flex-direction:column;gap:12px}
.prof-card{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:20px;display:flex;align-items:center;gap:14px}
.prof-av{width:48px;height:48px;border-radius:50%;background:var(--bg4);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:600;color:var(--amber);font-family:var(--hd);flex-shrink:0}
.prof-info{flex:1}
.prof-nm{font-size:15px;font-weight:600;color:var(--t0)}
.prof-role{font-size:11px;color:var(--t2);text-transform:uppercase;letter-spacing:.06em;margin-top:2px}
.mob-action{display:flex;align-items:center;gap:12px;padding:13px 16px;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);cursor:pointer;-webkit-tap-highlight-color:transparent}
.mob-action-ico{font-size:18px;flex-shrink:0}
.mob-action-lbl{font-size:13px;color:var(--t0);flex:1}
.mob-action.danger .mob-action-lbl{color:var(--red)}
.mob-action.mt-action .mob-action-ico{color:var(--red)}

/* ── NOTIFICATIONS ─────────────────────── */
.ns{position:fixed;bottom:20px;right:16px;display:flex;flex-direction:column;gap:8px;z-index:200;pointer-events:none}
.nt{background:var(--bg2);border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:var(--r);padding:10px 13px;font-size:14px;color:var(--t0);animation:ni .25s ease;max-width:240px}
.nt.jn{border-left-color:var(--green)}
.nt.lv{border-left-color:var(--t2)}
@keyframes ni{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}
@keyframes no{from{opacity:1}to{opacity:0;transform:translateX(20px)}}
.nt.out{animation:no .25s ease forwards}

/* Spinner */
.spin{width:14px;height:14px;border:2px solid var(--bg4);border-top-color:var(--amber);border-radius:50%;animation:sp .6s linear infinite;flex-shrink:0}
@keyframes sp{to{transform:rotate(360deg)}}

/* ── DEVICE MODAL ──────────────────────── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:300;display:flex;align-items:center;justify-content:center;padding:16px;}
.modal-overlay.h{display:none}
.modal{width:100%;max-width:420px;background:var(--bg1);border:1px solid var(--line);border-radius:12px;overflow:hidden;animation:fu .25s ease;display:flex;flex-direction:column;max-height:90vh}
.modal-head{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--line)}
.modal-title{font-size:14px;font-weight:600;color:var(--t0);flex:1}
.modal-close{background:none;border:none;color:var(--t2);font-size:20px;cursor:pointer;padding:2px 6px;line-height:1;border-radius:var(--r);transition:color .15s;-webkit-tap-highlight-color:transparent}
.modal-close:hover{color:var(--t0)}
.modal-x{width:28px;height:28px;background:none;border:1px solid var(--line);border-radius:var(--r);color:var(--t2);font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;flex-shrink:0;-webkit-tap-highlight-color:transparent}
.modal-x:hover{background:var(--bg3);color:var(--t0)}
/* Form fields inside modals */
.mf{margin-bottom:12px}
.mf label{display:block;font-size:10px;color:var(--t2);letter-spacing:.1em;text-transform:uppercase;margin-bottom:5px}
.mf input,.mf select,.mf textarea{width:100%;background:var(--bg3);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;color:var(--t0);font-family:var(--ui);font-size:14px;outline:none;transition:border-color .2s}
.mf input:focus,.mf select:focus{border-color:var(--amber)}
.mf select{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235c5d66' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-color:var(--bg3);cursor:pointer}
.mf input[readonly]{color:var(--t1);cursor:default}
.modal-body{padding:16px 18px;display:flex;flex-direction:column;gap:14px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.dev-group{}
.dev-label{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--t2);margin-bottom:6px}
.dev-select{width:100%;background:var(--bg3);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;color:var(--t0);font-family:var(--ui);font-size:13px;outline:none;cursor:pointer;transition:border-color .2s;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235c5d66' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.dev-select:focus{border-color:var(--amber)}
.dev-select option{background:var(--bg3)}
.dev-hint{font-size:12px;color:var(--t2);margin-top:4px}
.dev-hint.warn{color:color-mix(in srgb,var(--amber) 80%,transparent)}
.modal-foot{padding:12px 18px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px}
.btn-sec{padding:9px 16px;background:none;border:1px solid var(--line);border-radius:var(--r);color:var(--t1);font-family:var(--ui);font-size:13px;cursor:pointer;transition:all .15s}
.btn-sec:hover{background:var(--bg3);color:var(--t0)}
.btn-apply{padding:9px 16px;background:var(--amber);border:none;border-radius:var(--r);color:#fff;font-family:var(--ui);font-size:12px;font-weight:600;cursor:pointer;transition:background .15s}
.btn-apply:hover{background:var(--amberl)}

/* ── SPEAKERPHONE TOGGLE ───────────────── */
.spk-toggle{display:none;align-items:center;gap:0;background:var(--bg3);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;flex-shrink:0}
.spk-btn{padding:8px 11px;background:none;border:none;color:var(--t1);font-family:var(--ui);font-size:12px;cursor:pointer;transition:all .15s;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.spk-btn.act{background:var(--bg1);color:var(--t0);font-weight:600}
.spk-lbl{display:none}
/* Показываем только на мобильных */
@media (max-width:640px){ .spk-toggle{display:flex} .spk-lbl{display:inline} .spk-btn{padding:10px 14px;font-size:13px} }
.mob-spk-row{display:none}
@media (max-width:640px){ .mob-spk-row{display:flex} }
/* Мобильный таббар — всегда виден (не только на мобильных) */
@media (max-width: 640px) {
	/* Скрываем десктопные панели */
	.sb { display: none; }
	.sb-right { display: none; }

	/* Показываем мобильный таббар */
	.mob-tabs { display: flex; }

	/* Topbar: логотип + название канала + индикатор */
	.tb-sp { display: none; }

	/* Карточки в 2 колонки минимум */
	.pg { grid-template-columns: repeat(2, 1fr); }

	/* Голосовые контролы компактнее */
	.vc { padding: 8px 12px; }

	/* Уведомления — на всю ширину снизу */
	.ns { left: 12px; right: 12px; bottom: calc(var(--mob-tab) + 8px); }
	.nt { max-width: 100%; }

	/* Паддинги */
	.va { padding: 12px; }
}

@media (max-width: 360px) {
	.pg { grid-template-columns: 1fr 1fr; }
}

/* ── USERS LIST ────────────────────────── */
.users-list{padding:0 8px 8px}
.u-item{display:flex;align-items:center;gap:8px;padding:3px 8px;border-radius:var(--r);cursor:pointer;transition:background .15s;-webkit-tap-highlight-color:transparent}
.u-item:hover{background:var(--bg3)}
.u-av{width:26px;height:26px;border-radius:50%;background:var(--bg4);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--amber);flex-shrink:0;position:relative}
.u-online-dot{position:absolute;bottom:-2px;right:-2px;width:10px;height:10px;border-radius:50%;background:var(--green);border:2px solid var(--bg1)}
.u-online-dot.paused{background:var(--red)}
.u-item:hover .u-name{color:var(--t0)}
.u-call-btn{width:24px;height:24px;background:color-mix(in srgb,var(--green) 12%,transparent);border:1px solid color-mix(in srgb,var(--green) 25%,transparent);border-radius:50%;color:var(--green);font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s;flex-shrink:0;-webkit-tap-highlight-color:transparent}
.u-item:hover .u-call-btn{opacity:1}
@media (max-width:640px) {
	.u-item{padding-top:5px;padding-bottom:5px}
}

/* ── INCOMING CALL OVERLAY ─────────────── */
.ci-box{background:var(--bg1);border:1px solid var(--line);border-radius:16px;padding:32px 28px;text-align:center;width:280px;animation:fu .3s ease}
.ci-av{width:64px;height:64px;border-radius:50%;background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:600;color:var(--amber);font-family:var(--hd);margin:0 auto 14px;position:relative}
.ci-ring{position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--green);animation:pr 1.2s ease infinite}
.ci-sub{font-size:14px;color:var(--t2);margin-bottom:24px}
.ci-btns{display:flex;gap:12px;justify-content:center}
.ci-btn{width:52px;height:52px;border-radius:50%;border:none;cursor:pointer;font-size:22px;display:flex;align-items:center;justify-content:center;transition:transform .15s;-webkit-tap-highlight-color:transparent}
.ci-btn:active{transform:scale(.9)}
.ci-btn.accept{background:var(--green)}
.ci-btn.reject{background:var(--red)}

/* ── PRIVATE CALL UI ───────────────────── */
#call-active{position:fixed;inset:0;background:var(--bg0);z-index:390;display:none;flex-direction:column;align-items:center;justify-content:center;gap:16px}
#call-active.show{display:flex}
.ca-av{width:80px;height:80px;border-radius:50%;background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:600;color:var(--amber);font-family:var(--hd);position:relative}
.ca-ring{position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--green);opacity:0;transition:opacity .3s;animation:pr 1.2s ease infinite}
#call-active.connected .ca-ring{opacity:1}
.ca-name{font-size:20px;font-weight:600;color:var(--t0);font-family:var(--hd)}
.ca-status{font-size:13px;color:var(--t2)}
.ca-timer{font-size:13px;color:var(--green);font-variant-numeric:tabular-nums;min-height:20px}
.ca-btns{display:flex;gap:16px;margin-top:8px}
.ca-btn{width:56px;height:56px;border-radius:50%;border:none;cursor:pointer;font-size:22px;display:flex;align-items:center;justify-content:center;transition:all .15s;-webkit-tap-highlight-color:transparent}
.ca-btn:active{transform:scale(.9)}
.ca-btn.mute{background:var(--bg3);color:var(--t0);border:1px solid var(--line)}
.ca-btn.mute.on{background:color-mix(in srgb,var(--red) 15%,transparent);color:var(--red);border-color:color-mix(in srgb,var(--red) 30%,transparent)}
.ca-btn.spk{background:var(--bg3);color:var(--t0);border:1px solid var(--line)}
.ca-btn.spk.on{background:color-mix(in srgb,var(--amber) 15%,transparent);color:var(--amber);border-color:color-mix(in srgb,var(--amber) 30%,transparent)}
.ca-btn.end{background:var(--red);color:#fff}
/* ── Chat file attachments ── */
.chat-files-preview{display:flex;flex-wrap:wrap;gap:6px;padding:6px 12px;margin-bottom:4px}
.chat-file-thumb{position:relative;width:72px;height:72px;border-radius:6px;border:1px solid var(--line);background:var(--bg3);overflow:hidden;flex-shrink:0;cursor:pointer}
.chat-file-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.chat-file-thumb .file-icon{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:4px;padding:4px;text-align:center}
.chat-file-thumb .file-ext{font-size:10px;font-weight:700;color:var(--amber);text-transform:uppercase}
.chat-file-thumb .file-name{font-size:9px;color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}
.chat-file-del{position:absolute;top:2px;right:2px;background:rgba(0,0,0,.5);border:none;border-radius:50%;width:18px;height:18px;cursor:pointer;color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;z-index:2}
.chat-file-del:hover{background:var(--red)}
.chat-msg-files{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.chat-msg-file{position:relative;border-radius:6px;border:1px solid var(--line);background:var(--bg3);overflow:hidden;cursor:pointer}
.chat-msg-file img{width:120px;height:90px;object-fit:cover;display:block}
.chat-msg-file .file-dl{display:flex;align-items:center;gap:6px;padding:6px 10px;font-size:12px;color:var(--t0);max-width:200px}
.chat-msg-file .file-dl svg{flex-shrink:0;color:var(--amber)}
.chat-msg-file .file-dl-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.chat-msg-file:hover{border-color:color-mix(in srgb,var(--t2) 50%,transparent)}
/* Lightbox */
.chat-lightbox{display:none;position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:9999;align-items:center;justify-content:center;cursor:zoom-out}
.chat-lightbox.open{display:flex}
.chat-lightbox img{max-width:90vw;max-height:90vh;border-radius:8px;object-fit:contain}

.chat-attach-btn{background:none;border:none;cursor:pointer;color:var(--t2);padding:6px;border-radius:var(--r);display:flex;align-items:center;flex-shrink:0;transition:color .15s}
.chat-attach-btn:hover{color:var(--amber)}
.chat-drag-over{border-top:2px dashed var(--amber)!important;background:color-mix(in srgb,var(--amber) 5%,transparent)!important}
.file-seq-badge{position:absolute;top:4px;left:4px;background:rgba(0,0,0,.55);color:#fff;border-radius:50%;width:18px;height:18px;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;z-index:2;pointer-events:none;line-height:1}
.file-ext-badge{position:absolute;bottom:4px;right:4px;background:rgba(0,0,0,.50);color:#fff;border-radius:3px;padding:1px 5px;font-size:9px;font-weight:700;letter-spacing:.04em;pointer-events:none;z-index:2}
.file-ext-badge--inline{position:static;margin-left:6px;margin-right:0;flex-shrink:0;background:rgba(0,0,0,.35)}