/* ---------------- watch together (совместный просмотр) ---------------- */
.cw-home{max-width:1000px}
.cw-home-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.cw-panel{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px}
.cw-panel h2{margin:0 0 4px;font-size:18px}
.cw-panel .muted{color:var(--muted);font-size:13.5px;margin:0 0 14px}
.cw-search,.cw-code-in,.cw-joinform input{width:100%;padding:11px 13px;border-radius:11px;background:var(--bg2);
  color:var(--fg);border:1px solid var(--line);font-size:14px;box-sizing:border-box}
.cw-joinform{display:flex;gap:10px}
.cw-code-in{flex:1;letter-spacing:3px;font-weight:700;text-transform:uppercase}
.cw-search-res{margin-top:12px;display:flex;flex-direction:column;gap:6px;max-height:330px;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.cw-search-res::-webkit-scrollbar,.cw-chat::-webkit-scrollbar,.cw-poll-box::-webkit-scrollbar{width:8px}
.cw-search-res::-webkit-scrollbar-track,.cw-chat::-webkit-scrollbar-track,.cw-poll-box::-webkit-scrollbar-track{background:transparent}
.cw-search-res::-webkit-scrollbar-thumb,.cw-chat::-webkit-scrollbar-thumb,.cw-poll-box::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}
.cw-search-res::-webkit-scrollbar-thumb:hover,.cw-chat::-webkit-scrollbar-thumb:hover,.cw-poll-box::-webkit-scrollbar-thumb:hover{background:var(--card2)}
.cw-chat{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.cw-sr{display:flex;gap:12px;align-items:center;text-align:left;background:transparent;border:none;color:inherit;
  padding:7px;border-radius:11px;cursor:pointer}
.cw-sr:hover{background:var(--card2)}
.cw-sr img{width:42px;height:62px;object-fit:cover;border-radius:7px;background:var(--card2);flex:none}
.cw-sr .n{font-weight:600;font-size:14px}.cw-sr .y{color:var(--muted);font-size:12px}

/* join gate */
.cw-gate{max-width:420px;margin:40px auto;text-align:center;background:var(--card);border:1px solid var(--line);
  border-radius:18px;padding:28px 24px;display:flex;flex-direction:column;align-items:center}
.cw-gate h2{margin:6px 0}
.cw-gate-poster{width:120px;aspect-ratio:2/3;object-fit:cover;border-radius:12px;margin-bottom:8px;border:1px solid var(--line)}
.cw-gate-name{font-weight:600;font-size:15px}
.cw-gate-form{display:flex;flex-direction:column;gap:10px;width:100%;max-width:300px}
.cw-gate-form input{padding:12px;border-radius:11px;background:var(--bg2);color:var(--fg);border:1px solid var(--line);
  font-size:15px;text-align:center}
#cwGatePin{letter-spacing:6px;font-weight:700}
.cw-gate-err{color:#ff6b6b;font-size:13px;min-height:16px}

/* room layout: player left + chat right (desktop), stacked (mobile) */
.cowatch{max-width:1280px}
/* шапка: код комнаты + PIN отдельной строкой, ряд кнопок снизу */
.cw-top{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin:8px 0 14px}
.cw-roomhead{display:flex;flex-direction:column;gap:4px}
.cw-codetag{color:var(--muted);font-size:14px}.cw-codetag b{color:var(--fg);letter-spacing:2px}
.cw-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cw-share{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cw-pin{align-self:flex-start;background:none;border:0;padding:0;cursor:pointer;font-size:13px;color:var(--muted)}
.cw-pin b{color:var(--gold);letter-spacing:2px;font-size:15px;margin-left:3px}
.cw-chip{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line);
  color:var(--fg);border-radius:9px;padding:7px 11px;font-size:13px;font-weight:600;cursor:pointer}
.cw-chip:hover{border-color:var(--accent)}
.cw-body{display:flex;gap:18px;align-items:flex-start}
.cw-main{flex:1;min-width:0}
.cw-wait{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;
  background:rgba(0,0,0,.8);color:#fff;padding:20px;font-size:15px}
.cw-wait.hidden{display:none} /* beat .cw-wait's display:flex (equal specificity, later source) */
.cw-controls{display:flex;gap:12px;flex-wrap:wrap;margin:14px 0}
.cw-controls .field{flex:1;min-width:180px}
.cw-controls label{display:block;font-size:12px;color:var(--muted);margin:0 0 5px 2px}
.cw-hosttag{color:var(--gold);font-size:11px;font-weight:500}
.cw-mtitle{margin-top:14px;color:var(--muted)}
.chip.locked{opacity:.6;cursor:default}

/* members + chat side panel */
.cw-side{width:340px;flex:none;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:16px;overflow:hidden;height:min(78vh,720px)}
.cw-members{padding:12px 14px;border-bottom:1px solid var(--line)}
.cw-mhead{display:flex;align-items:center;justify-content:space-between;gap:7px;font-size:13px;color:var(--muted);margin-bottom:10px}
.cw-mhead b{color:var(--fg);font-size:14px}
.cw-mhead-r{display:inline-flex;align-items:center;gap:10px}
.cw-mcount{display:inline-flex;align-items:center;gap:5px;background:none;border:0;padding:0;cursor:pointer;color:var(--muted);font-size:13px}
.cw-mcount:hover,.cw-mcount.open{color:var(--fg)}
.cw-mcount svg{width:16px;height:16px}
/* «стопка» аватарок участников: хост первым, остальные с наложением на половину */
.cw-facepile{display:flex;align-items:center;flex-wrap:wrap;row-gap:6px;padding-left:2px;margin-bottom:2px}
.cw-face{position:relative;display:inline-flex;margin-left:-15px;cursor:default;transition:transform .12s}
.cw-face:first-child{margin-left:0}
.cw-face:hover{transform:translateY(-3px);z-index:20!important}
.cw-face .cw-av-w{border:2px solid var(--card)}
.cw-face-more{width:30px;height:30px;border-radius:50%;background:var(--bg2);border:2px solid var(--card);
  color:var(--muted);font-size:12px;font-weight:600;align-items:center;justify-content:center}
.cw-mute{display:inline-flex;align-items:center;justify-content:center;background:none;border:0;padding:0;cursor:pointer;color:var(--fg);opacity:.85}
.cw-mute:hover{opacity:1}
.cw-mute.off{color:var(--muted)}
.cw-memlist{display:flex;flex-direction:column;gap:9px;margin-top:10px}
.cw-memlist.hidden{display:none} /* beat .cw-memlist's display:flex (equal specificity, later source) */
.cw-mem{display:flex;align-items:center;gap:9px;min-width:0}
.cw-mem-av{position:relative;display:inline-flex;flex:none}
.cw-mem-name{flex:1;min-width:0;font-size:13px;color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cw-mem-host{color:var(--muted)}
/* host-действия над участником: исключить / сделать хостом */
.cw-mem-act{margin-left:auto;display:inline-flex;gap:4px;flex:none}
.cw-mem-btn{width:28px;height:28px;border-radius:8px;background:var(--card);border:1px solid var(--line);color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.cw-mem-btn svg{width:15px;height:15px}
.cw-mem-btn:hover{color:var(--fg);border-color:var(--accent)}
.cw-mem-btn.kick:hover{color:#ff6b6b;border-color:#ff6b6b}
/* host-настройка «только через Telegram» + подсказка */
.cw-hostset{display:flex;align-items:center;gap:8px;flex-wrap:wrap;width:100%}
.cw-hostset[hidden]{display:none} /* иначе display:flex перебивает атрибут hidden и настройку видят гости */
.cw-toggle{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;color:var(--fg)}
.cw-toggle input{position:absolute;width:0;height:0;opacity:0}
.cw-toggle-sw{position:relative;width:36px;height:21px;border-radius:999px;background:var(--line);transition:.15s;flex:none}
.cw-toggle-sw::after{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:#fff;transition:.15s}
.cw-toggle input:checked+.cw-toggle-sw{background:var(--accent)}
.cw-toggle input:checked+.cw-toggle-sw::after{transform:translateX(15px)}
.cw-hint{width:19px;height:19px;border-radius:50%;border:1px solid var(--line);background:none;color:var(--muted);font-size:11px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex:none}
.cw-hint:hover{color:var(--fg);border-color:var(--accent)}
.cw-hint-text{flex-basis:100%;font-size:12px;line-height:1.4;color:var(--muted);background:rgba(128,136,150,.12);padding:7px 9px;border-radius:9px}
/* экран-ошибка для неавторизованных (комната только через Telegram) */
.cw-authgate{display:flex;flex-direction:column;align-items:center;gap:10px}
.cw-authgate p{margin:0;font-size:14px}
.cw-authgate-ic{color:var(--accent)}.cw-authgate-ic svg{width:34px;height:34px}
.cw-authgate .btn{margin-top:4px}
.cw-crown{position:absolute;top:-5px;right:-5px;color:var(--gold);background:var(--card);border-radius:50%;
  width:15px;height:15px;display:flex;align-items:center;justify-content:center}
.cw-crown svg{width:11px;height:11px}
.cw-av-w{position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;
  background:var(--c);color:#fff;font-weight:700;font-size:12px;overflow:hidden;border:1px solid var(--line);flex:none}
.cw-av-w img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cw-chat{flex:1;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:12px}
.cw-msg{display:flex;gap:9px;align-items:flex-start;position:relative;border-radius:8px;transition:background .25s}
.cw-msg-b{min-width:0}
.cw-msg-h{display:flex;gap:8px;align-items:baseline}
.cw-msg-n{font-weight:600;font-size:12.5px}
.cw-msg-t{color:var(--muted);font-size:11px}
.cw-msg-x{font-size:14px;line-height:1.4;word-wrap:break-word;overflow-wrap:anywhere}
.cw-msg.mine .cw-msg-n{color:var(--accent)}
.cw-msg.cw-flash{background:color-mix(in srgb,var(--accent) 22%,transparent)} /* подсветка при прыжке к оригиналу */
/* цитата отвечаемого сообщения внутри пузыря */
.cw-msg-q{display:flex;flex-direction:column;gap:1px;align-items:flex-start;text-align:left;
  margin:3px 0 4px;padding:3px 8px;border:none;border-left:2px solid var(--accent);border-radius:5px;
  background:color-mix(in srgb,var(--accent) 12%,transparent);cursor:pointer;max-width:100%;width:100%}
.cw-msg-q-n{font-weight:600;font-size:11.5px;color:var(--accent)}
.cw-msg-q-x{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* кнопка «Ответить» — всплывает над сообщением по наведению */
.cw-msg-reply{position:absolute;top:-9px;right:4px;display:inline-flex;align-items:center;gap:4px;
  padding:3px 9px;border-radius:8px;border:1px solid var(--line);background:var(--card2);color:var(--fg);
  font-size:11.5px;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .12s,transform .12s;
  transform:translateY(2px);z-index:3;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.cw-msg-reply svg{width:14px;height:14px}
.cw-msg:hover .cw-msg-reply,.cw-msg-reply:focus-visible{opacity:1;pointer-events:auto;transform:none}
.cw-sys{align-self:center;text-align:center;font-size:12px;color:var(--muted);padding:1px 10px}
/* панель-превью ответа над полем ввода */
.cw-replybar{display:flex;align-items:center;gap:9px;padding:8px 12px;margin:0 12px;
  border-left:2px solid var(--accent);border-radius:6px;background:var(--bg2)}
.cw-replybar.hidden{display:none}
.cw-reply-ic{display:inline-flex;color:var(--accent);flex:none}
.cw-reply-b{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.cw-reply-n{font-weight:600;font-size:12px;color:var(--accent)}
.cw-reply-x{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cw-reply-close{flex:none;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border:none;border-radius:7px;background:transparent;color:var(--muted);cursor:pointer}
.cw-reply-close:hover{background:var(--card2);color:var(--fg)}
.cw-chatform{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}
.cw-chatform input{flex:1;padding:10px 12px;border-radius:10px;background:var(--bg2);color:var(--fg);
  border:1px solid var(--line);font-size:14px}
.cw-chatform .btn.sm{flex:none;padding:9px 12px}

@media(max-width:980px){
  .cw-home-grid{grid-template-columns:1fr}
  .cw-body{flex-direction:column}        /* mobile: player on top, chat below */
  .cw-side{width:100%;height:auto;max-height:none}
  /* фикс. высота + внутренний скролл: max-height на flex:1 в auto-колонке Safari
     не держит, и панель тянулась вниз бесконечно с каждым сообщением */
  .cw-chat{flex:none;height:46vh;min-height:0}
  /* мобилки: крупнее тач-цели для host-действий и участников */
  .cw-mem{gap:11px}
  .cw-mem-btn{width:34px;height:34px}
  .cw-mem-btn svg{width:17px;height:17px}
  .cw-memlist{gap:11px}
  .cw-hostset{gap:10px}
  .cw-authgate p{font-size:15px}
  /* тач: наведения нет — кнопка «Ответить» всегда доступна (компактная, только иконка) */
  .cw-msg-reply{opacity:.8;pointer-events:auto;transform:none;padding:4px 6px}
  .cw-msg-reply span{display:none}
}

/* iframe-фолбэк плеера источника (когда серверный резолв заблокирован Cloudflare) */
.embed-frame{width:100%;height:100%;border:0;display:block;background:#000}
.embed-mirrors{display:inline-flex;gap:5px;margin-left:8px;vertical-align:middle}
.mir-btn{width:26px;height:26px;border-radius:7px;background:var(--card);border:1px solid var(--line);
  color:var(--fg);cursor:pointer;font-size:12px;
  display:inline-flex;align-items:center;justify-content:center;padding:0;line-height:1}
.mir-btn.on{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}

/* ---- co-watch: toast / reactions / poll ---- */
.cw-toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:1200;
  background:rgba(18,22,30,.96);border:1px solid var(--line);color:var(--fg);
  padding:11px 16px;border-radius:12px;font-size:14px;box-shadow:0 10px 30px rgba(0,0,0,.4);
  animation:cwToastIn .25s ease}
.cw-toast.out{opacity:0;transition:opacity .3s}
@keyframes cwToastIn{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}

.cw-reacts{display:flex;flex-direction:column;gap:8px;padding:8px 0 4px}
.cw-react-btns{display:flex;gap:6px;justify-content:space-between}
.cw-react-btn{flex:1;height:36px;border-radius:9px;border:1px solid var(--line);background:var(--card);
  color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;transition:.15s}
.cw-react-btn:hover{color:var(--accent);border-color:var(--accent);transform:translateY(-2px)}
.cw-pollopen{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--card);
  border:1px solid var(--line);color:var(--fg);border-radius:9px;padding:9px 11px;cursor:pointer;font-size:13px}
.cw-pollopen:hover{border-color:var(--accent);color:var(--accent)}
.cw-pollopen .ic{width:16px;height:16px}

.cw-reactfly{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:5}
.cw-fly{position:absolute;bottom:64px;color:var(--accent);display:flex;flex-direction:column;align-items:center;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.6));animation:cwFly 2.6s ease-out forwards}
.cw-fly-n{font-size:10px;color:#fff;background:rgba(0,0,0,.5);padding:1px 6px;border-radius:8px;margin-top:2px;white-space:nowrap}
@keyframes cwFly{0%{opacity:0;transform:translate(0,20px) scale(.6)}15%{opacity:1;transform:translate(0,0) scale(1.1)}
  100%{opacity:0;transform:translate(var(--dx,0),-220px) scale(1)}}

.cw-poll{position:absolute;left:14px;bottom:84px;z-index:6;width:min(320px,72%);
  background:rgba(14,18,26,.96);border:1px solid var(--line);border-radius:14px;padding:13px;box-shadow:0 12px 34px rgba(0,0,0,.5)}
.cw-poll-h{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:14px}
.cw-poll-h .muted{font-size:12px}
.cw-poll-x{margin-left:auto;background:none;border:0;color:var(--muted);cursor:pointer;padding:2px;display:inline-flex}
.cw-poll-opts{display:flex;flex-direction:column;gap:7px;margin-bottom:10px}
.cw-poll-opt{position:relative;overflow:hidden;display:flex;align-items:center;gap:8px;text-align:left;
  background:var(--card);border:1px solid var(--line);border-radius:10px;padding:9px 11px;color:var(--fg);cursor:pointer;font-size:13px}
.cw-poll-opt.mine{border-color:var(--accent)}
.cw-poll-bar{position:absolute;left:0;top:0;bottom:0;background:color-mix(in srgb,var(--accent) 26%,transparent);transition:width .35s;z-index:0}
.cw-poll-name{position:relative;z-index:1;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cw-poll-v{position:relative;z-index:1;font-weight:700;color:var(--accent)}
.cw-poll-end{width:100%}
.cw-poll-modal{position:fixed;inset:0;z-index:1300;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;padding:18px}
.cw-poll-box{width:min(460px,100%);max-height:84vh;overflow:auto;background:var(--bg2,#12161e);border:1px solid var(--line);
  border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:12px;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.cw-poll-box-h{display:flex;align-items:center;justify-content:space-between}
.cw-poll-box-h .rm-close{background:none;border:0;color:var(--muted);cursor:pointer;padding:4px;
  display:inline-flex;align-items:center;justify-content:center;border-radius:8px;flex:none}
.cw-poll-box-h .rm-close:hover{color:var(--fg);background:var(--card)}
.cw-poll-picks{display:flex;flex-wrap:wrap;gap:7px}
.cw-pick-chip{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line);
  border-radius:20px;padding:5px 6px 5px 12px;font-size:13px}
.cw-pick-chip button{background:none;border:0;color:var(--muted);cursor:pointer;display:inline-flex;padding:2px}
.cw-pick-chip button:hover{color:#ff6b6b}
@media(max-width:760px){.cw-poll{left:8px;right:8px;width:auto;bottom:72px}}

/* ---- voice chat ---- */
.cw-voice-row{padding:0}
.cw-voice-start{color:var(--fg)}
/* кнопки управления голосом (mic + end call) */
.cw-vbar{display:flex;align-items:center;gap:8px;width:100%;padding:4px 0}
.cw-vbtn{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:var(--card);
  color:var(--fg);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex:none;transition:.15s}
.cw-vbtn:hover{border-color:var(--accent);color:var(--accent)}
.cw-vbtn.muted{background:rgba(255,80,80,.15);border-color:#ff5050;color:#ff5050}
.cw-vbtn.end{background:rgba(255,80,80,.12);border-color:#ff5050;color:#ff5050}
.cw-vbtn.end:hover{background:#ff5050;color:#fff}
.cw-vcount{flex:1;font-size:12.5px;color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* mic badge dot на аватаре */
.cw-voice-dot{position:absolute;bottom:-2px;right:-2px;width:11px;height:11px;border-radius:50%;
  background:var(--accent);border:2px solid var(--card)}
/* кольцо «говорит» на аватаре в стопке */
.cw-face.speaking .cw-av-w{box-shadow:0 0 0 2px var(--accent);animation:vcSpeak .7s ease-in-out infinite}
@keyframes vcSpeak{0%,100%{box-shadow:0 0 0 2px var(--accent)}50%{box-shadow:0 0 0 4px var(--accent)}}
/* mic-иконка рядом с именем участника в списке */
.cw-mem-voice{display:inline-flex;align-items:center;margin-left:5px;color:var(--accent);opacity:.8}
.cw-mem-voice svg{width:13px;height:13px}
/* кнопка разблокировки autoplay */
.cw-vc-unlock{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);z-index:1400;
  background:var(--accent);color:var(--accent-fg,#fff);border:none;border-radius:12px;
  padding:12px 18px;font-size:14px;font-weight:600;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.4);
  animation:cwToastIn .25s ease}

/* voice member controls */
.cw-mem-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.cw-mem-row1{display:flex;align-items:center;gap:6px;min-width:0}
.cw-mem-row1 .cw-mem-name{flex:1;min-width:0}
.cw-mem-row1 .cw-mem-act{flex:none}
.cw-mem-vact{display:inline-flex;gap:3px;flex:none}
.cw-mem-vbtn{width:26px;height:26px;border-radius:7px;background:var(--card);border:1px solid var(--line);color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.cw-mem-vbtn svg{width:13px;height:13px}
.cw-mem-vbtn:hover{color:var(--accent);border-color:var(--accent)}
.cw-mem-vbtn.kick:hover{color:#ff6b6b;border-color:#ff6b6b}
.cw-mem-voice.muted{color:#ff6b6b}
/* volume slider row */
.cw-mem-vol{display:flex;align-items:center;gap:5px;padding:0 2px}
.cw-vol-sl{flex:1;height:3px;-webkit-appearance:none;appearance:none;background:var(--line);border-radius:4px;outline:none;cursor:pointer}
.cw-vol-sl::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:var(--accent);cursor:pointer}
.cw-vol-sl::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:var(--accent);cursor:pointer;border:none}