/* 📷 камера (camui.js): кнопка в панели «я», видео в плитках, крупно, 📷 у ника, ⚙ «Камера» */

/* кнопка — как микрофон/звук; выкл — перечёркнута, вкл — подсвечена зелёным. Вне голоса — невидима, но место занято (ничего не прыгает) */
.tk-cb.cu-btn .cu-i-on { display:none; }
.tk-cb.cu-btn[aria-pressed="true"] .cu-i-on { display:block; }
.tk-cb.cu-btn[aria-pressed="true"] .cu-i-off { display:none; }
.tk-cb.cu-btn[aria-pressed="true"] { color:var(--ok); background:color-mix(in srgb, var(--ok) 15%, transparent); }
.tk-cb.cu-btn[aria-pressed="true"]:hover { background:color-mix(in srgb, var(--ok) 24%, transparent); color:var(--ok); }
.tk-cb.cu-btn.busy { opacity:.55; cursor:progress; }
.tk-cb.cu-btn.cu-hide { visibility:hidden; pointer-events:none; }
/* плитка с камерой: видео во всю плитку (размер плитки тот же), ник поверх снизу */
.tk-tile.cu-cam { overflow:hidden; background:#000; }
.tk-tile.cu-cam > .tk-av.xl, .tk-tile.cu-cam > .tk-tile-b { visibility:hidden; }
.cu-tv { position:absolute; inset:0; z-index:0; border-radius:inherit; overflow:hidden; background:#000; }
.cu-v { display:block; width:100%; height:100%; object-fit:cover; }
.cu-v.mirror, .cu-fv.mirror, .cu-pv.mirror { transform:scaleX(-1); }
.cu-tn { position:absolute; left:6px; bottom:6px; z-index:2; display:flex; align-items:center; gap:4px; max-width:calc(100% - 12px); min-width:0; padding:2px 7px; border-radius:7px;
  background:rgba(0,0,0,.58); color:#fff; font-size:12px; font-weight:500; line-height:18px; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.cu-tn .tk-tile-n { font-size:12px; color:#fff; }
.cu-tn .tk-fl .i { width:13px; height:13px; }
.tk-tile.cu-cam .tk-tile-st { z-index:2; padding:1px 5px; border-radius:6px; background:rgba(0,0,0,.55); color:#fff; }
.tk-tile.cu-cam .tk-tile-live { z-index:2; }
.tk-tile.live.cu-cam .cu-tn { bottom:44px; }
/* «говорит» — зелёная рамка поверх видео */
.tk-tile.cu-cam::after { content:""; position:absolute; inset:0; z-index:3; border-radius:inherit; pointer-events:none; box-shadow:inset 0 0 0 0 transparent; transition:box-shadow .12s; }
.tk-tile.cu-cam:has(.spk)::after { box-shadow:inset 0 0 0 2.5px var(--spk), inset 0 0 14px -4px var(--spk); }
.tk-tile.cu-cam:hover { border-color:color-mix(in srgb, var(--text) 40%, var(--line)); }
.tk-tile.cu-cam:has(.spk) { border-color:var(--spk); }

/* крупно — поверх центра (как фокус стрима); Esc / клик — назад */
.cu-focus { position:absolute; inset:0; z-index:7; display:grid; place-items:center; padding:12px; background:#000; cursor:zoom-out; animation:cu-in .14s ease-out; }
.cu-fv { width:100%; height:100%; object-fit:contain; border-radius:12px; }
.cu-fh { position:absolute; top:10px; left:12px; right:12px; display:flex; align-items:center; gap:8px; min-width:0; color:#fff; font-size:14px; pointer-events:none; }
.cu-fh > .i { width:18px; height:18px; color:var(--ok); }
.cu-fh b { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:3px 9px; border-radius:8px; background:rgba(0,0,0,.55); font-weight:500; }
.cu-fhint { margin-right:auto; font-size:12px; color:rgba(255,255,255,.6); }
.cu-fb { pointer-events:auto; display:grid; place-items:center; width:36px; height:36px; padding:0; border:0; border-radius:50%; background:rgba(0,0,0,.55); color:#fff; font-size:18px; line-height:1; cursor:pointer;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:background-color .12s; }
.cu-fb:hover { background:rgba(0,0,0,.78); }
.cu-fb .i { width:18px; height:18px; }
@keyframes cu-in { from { opacity:0; } }

/* 📷 у ника в списке каналов */
.cu-ci { display:inline-flex; flex:none; color:var(--ok); }
.cu-ci .i { width:14px; height:14px; stroke-width:2; }

/* ⚙ Настройки → «Камера» */
.cu-prev { position:relative; display:grid; place-items:center; aspect-ratio:16 / 9; border-radius:12px; overflow:hidden; background:var(--chip); border:1px solid var(--line); }
.cu-prev.on { background:#000; }
.cu-pv { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cu-prev:not(.on) .cu-pv { visibility:hidden; }
.cu-ph { display:flex; flex-direction:column; align-items:center; gap:6px; margin-bottom:36px; color:var(--text2); }
.cu-ph[hidden] { display:none; }
.cu-ph-i { display:grid; place-items:center; width:46px; height:46px; border-radius:14px; background:color-mix(in srgb, var(--text2) 14%, transparent); }
.cu-ph-i .i { width:24px; height:24px; }
.btn.cu-test { position:absolute; bottom:10px; left:50%; transform:translateX(-50%); display:inline-flex; align-items:center; gap:7px; margin:0; min-height:34px; padding:0 14px; white-space:nowrap; }
.btn.cu-test .i { width:16px; height:16px; }
.btn.cu-test.on { background:rgba(0,0,0,.6); color:#fff; border-color:transparent; }
.btn.cu-test[hidden] { display:none; }
.seg.cu-res { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); width:100%; border-radius:14px; }
.seg.cu-fps { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); width:100%; border-radius:14px; }
.seg:is(.cu-res, .cu-fps) span { text-align:center; font-variant-numeric:tabular-nums; }
/* подписи под выбором: все варианты в одной клетке, видна одна — высота по самой длинной (ряд не прыгает) */
.cu-notes { display:grid; }
.cu-notes > p { grid-area:1 / 1; margin:0; visibility:hidden; }
.cu-notes > p.on { visibility:visible; }
/* «Камера даёт …» — место под две строки, если окно уже 1100 px, под одну — на широком */
.cu-got { margin:0; min-height:18px; }
#setDlg .tk-small.cu-got { color:var(--text); }
@media (max-width: 1100px) { .cu-got { min-height:36px; } }
/* переключатель — как .tk-tg (свой класс: .tk-tg в окне talk.js привязывает к звуку) */
.cu-tg { position:relative; flex:none; width:42px; height:24px; min-height:0; padding:0; border:0; border-radius:12px; cursor:pointer; background:color-mix(in srgb, var(--text) 26%, transparent); transition:background-color .15s; }
.cu-tg:hover { background:color-mix(in srgb, var(--text) 34%, transparent); }
.cu-tg[aria-checked="true"] { background:var(--ok); }
.cu-tg[aria-checked="true"]:hover { background:color-mix(in srgb, var(--ok) 88%, var(--text)); }
.cu-tg:focus-visible { outline-offset:3px; border-radius:12px; }
.cu-tg-k { position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:transform .15s; }
.cu-tg[aria-checked="true"] .cu-tg-k { transform:translateX(18px); }

/* телефон: кнопка в нижней панели «я» (размер — как у соседних), плитки 104 px */
@media (max-width: 760px) {
  .cu-tn { left:4px; bottom:4px; max-width:calc(100% - 8px); padding:1px 5px; font-size:11px; }
  .cu-tn .tk-tile-n { font-size:11px; }
  .cu-focus { padding:6px; }
  .cu-fhint { display:none; }
  .cu-fh b { margin-right:auto; }
  .cu-fb { width:40px; height:40px; }
}
@media (prefers-reduced-motion: reduce) {
  .cu-focus { animation:none; }
  .tk-tile.cu-cam::after, .cu-tg, .cu-tg-k { transition:none; }
}