/* Модуль «Звонки» */
.cl-box{position:fixed;inset:16px;z-index:900;background:#101218;color:#fff;border-radius:18px;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.5);overflow:hidden}
.cl-box.min{inset:auto 16px 16px auto;width:300px;height:230px;border-radius:14px}
.cl-top{display:flex;align-items:center;gap:10px;padding:10px 14px}.cl-top b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-time{color:#9aa3b5;font-variant-numeric:tabular-nums;font-size:13px}
.cl-ic{background:rgba(255,255,255,.1);color:#fff;border:none;border-radius:8px;min-height:0;padding:4px 10px}
.cl-grid{flex:1;min-height:0;display:grid;gap:8px;padding:0 12px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));grid-auto-rows:1fr;position:relative}
.cl-grid[data-n="1"],.cl-grid[data-n="2"]{grid-template-columns:1fr 1fr}
.cl-box.min .cl-grid{grid-template-columns:1fr!important;padding:0 8px}.cl-box.min .cl-tile[data-tile="me"]{display:none}
.cl-tile{position:relative;background:#1c2029;border-radius:14px;overflow:hidden;display:grid;place-items:center;min-height:0}
.cl-tile video{width:100%;height:100%;object-fit:cover;display:none}.cl-tile.vid video{display:block}.cl-tile.screen video{object-fit:contain;background:#000}
.cl-tile[data-tile="me"] video{transform:scaleX(-1)}.cl-tile[data-tile="me"].screen video{transform:none}
.cl-tile.vid .cl-face{display:none}.cl-face .av{width:84px;height:84px;font-size:30px}
.cl-box.min .cl-face .av{width:48px;height:48px;font-size:18px}
.cl-name{position:absolute;left:10px;bottom:8px;background:rgba(0,0,0,.55);padding:3px 9px;border-radius:8px;font-size:13px}.cl-name i{color:#f5b04a;font-style:normal}
.cl-grid[data-n="2"] .cl-tile[data-tile="me"]{}
.cl-wait{position:absolute;inset:0;display:grid;place-items:center;color:#9aa3b5;pointer-events:none;font-size:15px}
.cl-bar{display:flex;justify-content:center;gap:12px;padding:12px}
.cl-btn{width:52px;height:52px;border-radius:50%;border:none;background:rgba(255,255,255,.14);color:#fff;font-size:22px;min-height:0;padding:0;display:grid;place-items:center;cursor:pointer}
.cl-btn:hover{background:rgba(255,255,255,.24)}.cl-btn.off{background:#fff;color:#111}.cl-btn.on{background:var(--accent)}
.cl-btn.end{background:#e5484d}.cl-btn.end:hover{background:#c93c41}
.cl-box.min .cl-bar{padding:8px;gap:8px}.cl-box.min .cl-btn{width:38px;height:38px;font-size:16px}
.cl-ring{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:950;background:var(--card);color:var(--text);border-radius:18px;box-shadow:0 16px 48px rgba(0,0,0,.35);display:flex;align-items:center;gap:12px;padding:12px 16px;border:1px solid var(--line);animation:clPulse 1.6s infinite}
.cl-ring .av{width:48px;height:48px;font-size:18px}.cl-ring-t{min-width:140px}
.cl-ring .cl-btn{width:46px;height:46px;background:#2f9e5b;font-size:20px}.cl-ring .cl-btn.end{background:#e5484d}
@keyframes clPulse{0%,100%{box-shadow:0 16px 48px rgba(0,0,0,.35)}50%{box-shadow:0 16px 48px rgba(47,158,91,.5)}}
.cl-join{white-space:nowrap}
@media (max-width:720px){ .cl-box{inset:0;border-radius:0}.cl-grid{grid-template-columns:1fr!important}.cl-box.min{inset:auto 8px 8px auto;width:200px;height:170px} .cl-ring{left:8px;right:8px;transform:none;flex-wrap:wrap} }
.cl-body{flex:1;min-height:0;display:flex;gap:8px}.cl-body .cl-grid{flex:1}
.cl-chat{width:300px;flex:none;background:#1c2029;border-radius:14px;display:flex;flex-direction:column;margin-right:12px;min-height:0}
.cl-chat-h{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.08)}
.cl-chat-list{flex:1;min-height:0;overflow-y:auto;padding:8px 12px;display:flex;flex-direction:column;gap:8px}
.cl-cm{font-size:13.5px;line-height:1.35}.cl-cm b{font-size:12.5px}.cl-cm span{font-size:11px;color:#8b93a5}.cl-cm div{overflow-wrap:anywhere}.cl-cm a{color:#8fa6ff}.cl-cm.mine b{color:#8fa6ff}
.cl-chat .meta{color:#8b93a5}
.cl-chat-f{display:flex;gap:6px;padding:8px}.cl-chat-f input{flex:1;min-width:0;background:#101218;color:#fff;border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:8px 10px}
.cl-btn{position:relative}.cl-badge{position:absolute;top:-2px;right:-2px;background:#e5484d;color:#fff;border-radius:9px;font-size:11px;font-weight:700;min-width:18px;line-height:18px;padding:0 4px}
@media (max-width:720px){ .cl-body{position:relative}.cl-chat{position:absolute;inset:0;width:auto;margin:0 8px;z-index:2} .cl-bar{flex-wrap:wrap;gap:8px}.cl-btn{width:46px;height:46px;font-size:19px} }
.cl-audio{display:none}
.cl-unmute{background:#f5b04a;color:#111;border:none;border-radius:8px;min-height:0;padding:5px 10px;font-weight:600;animation:clPulse 1.6s infinite}
.cl-meter{position:absolute;left:10px;right:10px;bottom:36px;height:4px;border-radius:2px;background:rgba(255,255,255,.15);overflow:hidden}.cl-meter i{display:block;height:100%;width:0;background:#2f9e5b;transition:width .1s}

.cl-vol{position:absolute;left:50%;bottom:84px;transform:translateX(-50%);z-index:4;background:#1c1f28;border-radius:14px;padding:12px 14px;box-shadow:0 10px 30px rgba(0,0,0,.45);width:min(340px,calc(100% - 24px));display:flex;flex-direction:column;gap:8px}
.cl-vol-row{display:grid;grid-template-columns:minmax(0,1fr) 120px 42px;align-items:center;gap:8px;font-size:13.5px}.cl-vol-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cl-vol-row b{font-size:12px;font-weight:600;text-align:right;color:#c7cbd6}
.cl-vol-row input{width:100%;accent-color:var(--accent);min-height:0;padding:0;margin:0}.cl-vol-note{font-size:11.5px;color:#8b93a5}
.cl-box.min .cl-vol{bottom:60px}
@media (max-width:720px){ .cl-vol{bottom:130px}.cl-vol-row{grid-template-columns:minmax(0,1fr) 110px 40px} }

.cl-box.min{cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}.cl-box.min.drag{cursor:grabbing;transition:none}.cl-box.min button,.cl-box.min input{cursor:pointer}

.cl-ns{display:flex;align-items:center;gap:8px;font-size:13.5px;justify-content:space-between;padding-top:4px;border-top:1px solid rgba(255,255,255,.08)}
.cl-ns .seg{display:flex;background:rgba(255,255,255,.08);border-radius:9px;padding:2px}.cl-ns .seg button{min-height:0;border:none;background:none;color:#c7cbd6;padding:5px 10px;border-radius:7px;font-size:12.5px}.cl-ns .seg button.on{background:var(--accent);color:#fff}

.cl-recdot{color:#ff6b6b;font-size:12.5px;font-weight:600;margin-left:10px;animation:clBlinkR 1.2s infinite;white-space:nowrap}@keyframes clBlinkR{50%{opacity:.45}}
.cl-btn.recon{background:#e5484d}
.cl-recico{width:18px;height:18px;border-radius:50%;background:#ff4d4f;display:block}.cl-recico.stop{border-radius:3px;background:#fff;width:15px;height:15px}
@media (max-width:720px){ .cl-box:not(.min) .cl-bar{padding-bottom:max(12px,calc(8px + env(safe-area-inset-bottom)))} .cl-box:not(.min) .cl-top{padding-top:max(10px,env(safe-area-inset-top))} }

/* панель звонка как в Telegram: круглые значки с подписью */
.cl-bar{gap:18px;padding:12px 12px 16px;align-items:flex-start}
.cl-bar .cl-btn{width:64px;height:auto;background:none;border-radius:0;display:flex;flex-direction:column;align-items:center;gap:6px;color:#fff}
.cl-bar .cl-btn:hover{background:none}
.cl-bi{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14);transition:background .15s,transform .1s;position:relative}
.cl-bar .cl-btn:hover .cl-bi{background:rgba(255,255,255,.24)}.cl-bar .cl-btn:active .cl-bi{transform:scale(.94)}
.cl-bl{font-size:12px;color:#c7cbd6;white-space:nowrap;line-height:1.2}
.cl-bar .cl-btn.off .cl-bi{background:#fff;color:#111}
.cl-bar .cl-btn.on .cl-bi{background:var(--accent)}
.cl-bar .cl-btn.recon .cl-bi{background:#e5484d}
.cl-bar .cl-btn[data-cl="rec"]:not(.recon) .cl-bi{color:#ff5a5f}
.cl-bar .cl-btn.end .cl-bi{background:#e5484d}.cl-bar .cl-btn.end:hover .cl-bi{background:#c93c41}
.cl-bar .cl-badge{top:-2px;right:-2px}
.cl-box.min .cl-bar{gap:10px;padding:8px}.cl-box.min .cl-btn.xtra,.cl-box.min .cl-bl{display:none}.cl-box.min .cl-bar .cl-btn{width:auto}.cl-box.min .cl-bi{width:42px;height:42px}.cl-box.min .cl-bi svg{width:20px;height:20px}
.cl-ic{display:grid;place-items:center}
.cl-unmute{display:inline-flex;align-items:center;gap:6px}.cl-unmute svg{width:16px;height:16px}
.cl-ring .cl-btn{display:grid;place-items:center;color:#fff}.cl-ring .cl-btn svg{width:22px;height:22px}
/* сквозное шифрование: замок и 4 эмодзи-ключа */
.cl-key{display:inline-flex;align-items:center;gap:4px;margin-left:10px;color:#8b93a5;font-size:13px;cursor:help;opacity:.5}.cl-key.on{opacity:1;color:#57c27d}
.cl-key span{letter-spacing:1px}
.cl-box.min .cl-key span{display:none}
@media (max-width:720px){ .cl-bar{gap:10px 6px;padding:10px 6px 14px}.cl-bar .cl-btn{width:58px}.cl-bi{width:48px;height:48px}.cl-bl{font-size:11px} }
.cl-box.min .cl-bar .cl-btn{width:auto;height:auto;min-height:0;padding:0}.cl-box.min .cl-bi{flex:none;width:42px;height:42px;min-width:42px;aspect-ratio:1}
.cl-grid.stage{display:flex;flex-direction:column;gap:8px}
.cl-grid.stage .cl-tile.main{flex:1;min-height:0}
.cl-strip{display:flex;gap:8px;height:112px;flex:none;overflow-x:auto;scrollbar-width:thin}
.cl-strip .cl-tile{width:150px;height:100%;flex:none;cursor:pointer}.cl-strip .cl-tile:hover{outline:2px solid rgba(255,255,255,.35)}
.cl-strip .cl-face .av{width:44px;height:44px;font-size:17px}.cl-strip .cl-name{font-size:11px;max-width:calc(100% - 12px)}
.cl-box.min .cl-strip{display:none}
.cl-fs{position:absolute;top:8px;right:8px;z-index:2;width:32px;height:32px;min-height:0;padding:0;border:none;border-radius:8px;display:grid;place-items:center;background:rgba(0,0,0,.45);color:#fff;opacity:0;transition:opacity .15s;cursor:pointer}
.cl-tile:hover .cl-fs,.cl-tile.main .cl-fs{opacity:1}.cl-strip .cl-fs{display:none}
.cl-tile:fullscreen{border-radius:0;background:#000}.cl-tile:fullscreen video{object-fit:contain}
@media (max-width:720px){.cl-strip{height:88px}.cl-strip .cl-tile{width:110px}}
.cl-tile video{position:absolute;inset:0}.cl-grid.stage .cl-tile.main video,.cl-tile.screen video{object-fit:contain;background:#000}
.cl-ppl{position:absolute;left:8px;top:8px;z-index:3;min-height:0;height:32px;padding:0 10px;border:none;border-radius:16px;background:rgba(0,0,0,.55);color:#fff;display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;cursor:pointer}.cl-ppl.on{background:var(--accent)}.cl-ppl svg{width:18px;height:18px}
.cl-box.min .cl-ppl{display:none}
.cl-ring-snd{flex-basis:100%;font-size:12px;color:#ffd166;text-align:center}
.cl-grid.stage .cl-meter,.cl-tile.screen .cl-meter{display:none}
/* встреча по ссылке: зал ожидания */
.cl-lobby{display:flex;flex-direction:column;gap:6px;padding:8px 12px;background:rgba(79,107,237,.18);border-bottom:1px solid rgba(255,255,255,.08)}
.cl-lobby-r{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px}
.cl-lobby-r .sp{flex:1}

#clMeetBar{position:fixed;left:50%;bottom:76px;transform:translateX(-50%);z-index:60;display:flex;flex-direction:column;gap:8px;width:min(560px,calc(100vw - 24px))}
.cl-mb{background:#1d2333;color:#fff;border-radius:14px;padding:10px 12px;box-shadow:0 10px 30px rgba(0,0,0,.3);display:flex;flex-direction:column;gap:6px}
.cl-mb-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px}.cl-mb .sp{flex:1}.cl-mb .ghost{color:#fff}

/* свёрнуто в строку: название, время, микрофон, завершить — без видео */
.cl-box.min.strip{width:auto;max-width:calc(100vw - 32px);height:auto;flex-direction:row;align-items:center;border-radius:999px;padding:0 6px 0 4px}
.cl-box.min.strip .cl-body,.cl-box.min.strip .cl-lobby,.cl-box.min.strip .cl-vol{display:none}
.cl-box.min.strip .cl-top{border:none;padding:6px 8px;gap:8px;white-space:nowrap}.cl-box.min.strip .cl-top b{max-width:180px;overflow:hidden;text-overflow:ellipsis}
.cl-box.min.strip .cl-bar{padding:4px 0;gap:6px;border:none;background:none}
.cl-box.min.strip .cl-btn:not([data-cl="mic"]):not([data-cl="leave"]){display:none}
.cl-box.min.strip .cl-bi{width:34px;height:34px;min-width:34px}.cl-box.min.strip .cl-bi svg{width:16px;height:16px}
/* в отдельном окне (поверх всех, можно на другой монитор) — на всё окно */
.cl-box.pip{inset:0!important;width:auto!important;height:auto!important;border-radius:0;box-shadow:none}
body:has(> .cl-box.pip){margin:0;background:#101218;overflow:hidden}