/* «🔊 Приглашение в голосовой канал» (chaninvite.js): окно при входе по ссылке, кнопка «человечек +» у канала, меню «⋯» на телефоне.
   Токены rec.css / talk.css; тёмная и светлая темы — от них же. */

/* окно */
.tk-dlg.ci-dlg { position:relative; width:min(420px, calc(100vw - 32px)); padding:26px 24px 18px; text-align:center; animation:ci-in .18s ease-out; }
@keyframes ci-in { from { opacity:0; transform:translateY(8px) scale(.98); } to { opacity:1; transform:none; } }
.ci-x { position:absolute; top:10px; right:10px; }
.ci-ico { display:grid; place-items:center; width:64px; height:64px; margin:0 auto 12px; border-radius:50%; font-size:30px; line-height:1;
  background:color-mix(in srgb, var(--ok) 16%, transparent); box-shadow:0 0 0 6px color-mix(in srgb, var(--ok) 7%, transparent); }
.ci-ico.gone { background:var(--soft); box-shadow:none; }
.ci-dlg[data-variant="full"] .ci-ico { background:color-mix(in srgb, var(--warn) 16%, transparent); box-shadow:0 0 0 6px color-mix(in srgb, var(--warn) 7%, transparent); }
.ci-kick { margin:0 0 4px; font-size:13px; color:var(--text2); }
.ci-dlg h2 { margin:0; font-size:20px; line-height:1.25; overflow-wrap:anywhere; }
.ci-dlg h2.ci-title { display:inline-flex; align-items:center; justify-content:center; gap:8px; max-width:100%; font-size:24px; font-weight:800; letter-spacing:-.01em; }
.ci-title .i { width:22px; height:22px; color:var(--ok); }
.ci-title span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ci-space { margin:4px 0 0; font-size:13.5px; color:var(--text2); overflow-wrap:anywhere; }
.ci-space b { color:var(--text); font-weight:500; }

/* кто сейчас в канале */
.ci-who { display:flex; align-items:center; gap:12px; margin:16px 0 0; padding:10px 12px; border-radius:14px; background:var(--soft); text-align:left; }
.ci-avs { display:flex; flex:none; padding-left:6px; }
.ci-avs .ci-av { margin-left:-6px; box-shadow:0 0 0 2px var(--card); }
.ci-av.ci-more-n { background:var(--hover); color:var(--text2); font-size:12.5px; }
.ci-who-t { display:flex; flex-direction:column; min-width:0; }
.ci-names { font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ci-cnt { font-size:12px; color:var(--text2); font-variant-numeric:tabular-nums; }
.ci-cnt.full { color:var(--bad); }
.ci-who.ci-empty { justify-content:center; gap:8px; margin-bottom:0; font-size:13px; color:var(--text2); }
.ci-dot { width:8px; height:8px; flex:none; border-radius:50%; background:var(--ok); }

.ci-desc { margin:14px 0 0; color:var(--text2); font-size:13.5px; line-height:1.5; }
.ci-mic > span:first-child { margin-right:6px; }
.ci-warn { color:var(--text); }
.ci-acts { display:flex; flex-direction:column; gap:6px; margin-top:18px; }
.ci-acts .btn { width:100%; white-space:normal; text-align:center; }
.ci-acts .btn.big { min-height:50px; }

/* кнопка «Пригласить в канал» у канала: на компьютере — при наведении (как карандаш владельца) */
.ci-btn { opacity:0; }
.tk-ch-row:hover .ci-btn, .ci-btn:focus-visible { opacity:1; }
.ci-btn .i { width:17px; height:17px; }
.ci-more { display:none; }
/* у владельца при наведении четыре значка — «Войти» не показываем, иначе от названия канала остаётся «Иг…» (весь ряд и так кнопка входа) */
@media (min-width: 761px) { .tk-ch:not(.mine) .tk-ch-row:has(.ci-more):hover .tk-ch-go, .tk-ch:not(.mine) .tk-ch-row:has(.ci-more) .tk-ch-btn:focus-visible .tk-ch-go { display:none; } }
@media (hover: none) { .ci-btn { opacity:.8; } }


/* телефон: у владельца и модератора — одна «⋯» (то же меню канала, что по правой кнопке) вместо четырёх значков; у остальных — «человечек +» */
@media (max-width: 760px) {
  .ci-btn { opacity:.8; width:40px; height:40px; }
  .ci-more { display:inline-grid; width:40px; height:40px; opacity:.8; }
  .tk-ch-row:has(.ci-more) .ci-btn, .tk-ch-row:has(.ci-more) .tk-own { display:none; }
}
@media (max-width: 520px) {
  .tk-dlg.ci-dlg { width:calc(100vw - 16px); padding:22px 14px 14px; }
}
/* узко и много людей — аватары сверху, имена под ними (не обрезать имена до «Ваня, …») */
@media (max-width: 460px) {
  .ci-who:has(.ci-av:nth-child(5)) { flex-direction:column; gap:6px; text-align:center; }
  .ci-who-t { max-width:100%; }
}
@media (max-width: 380px) {
  .ci-who:not(.ci-empty) { flex-direction:column; gap:6px; text-align:center; }
}
@media (max-width: 360px) {
  .ci-ico { width:52px; height:52px; font-size:24px; margin-bottom:8px; }
  .ci-dlg h2.ci-title { font-size:20px; }
  .ci-who { padding:8px 10px; gap:10px; }
  .ci-avs .tk-av.md { width:30px; height:30px; font-size:13px; }
}
@media (prefers-reduced-motion: reduce) { .tk-dlg.ci-dlg { animation:none; } }