/* ══════════════════════════════════════════════════════════════════════════════
   БЛОК УЧАСТНИКОВ — оформление к participants.js. ОДИН файл на обе площадки:
   основной клиент (/app) и страницу гостя (/j/<slug>). Копий нет.

   Панель всегда живёт НА ТЁМНОЙ сцене созвона (видео читается только на глубоком
   фоне — так же в Zoom/Meet/FaceTime), поэтому цвета берём из локальных токенов
   --ccp-*, а не из темы страницы: иначе в светлой теме панель поверх видео
   становилась бы белой и слепила.
   ══════════════════════════════════════════════════════════════════════════════ */
.ccp {
  --ccp-fg: #eef1f7;
  --ccp-muted: rgba(238, 241, 247, .58);
  --ccp-dim: rgba(238, 241, 247, .40);
  --ccp-line: rgba(255, 255, 255, .09);
  --ccp-line-2: rgba(255, 255, 255, .14);
  --ccp-btn: rgba(255, 255, 255, .07);
  --ccp-btn-h: rgba(255, 255, 255, .13);
  --ccp-primary: #6f83f0;
  --ccp-ok: #2fbf6b;
  --ccp-danger: #ef4d4d;
  --ccp-dur: 140ms;
  --ccp-ease: cubic-bezier(.2, .8, .2, 1);

  display: flex; flex-direction: column; min-height: 0; height: 100%;
  color: var(--ccp-fg);
  font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.ccp *, .ccp *::before, .ccp *::after { box-sizing: border-box; }
.ccp svg { width: 16px; height: 16px; display: block; flex: none; }
/* 🔴 Наши display:flex у .ccp-search/.ccp-sec СИЛЬНЕЕ браузерного [hidden]{display:none}
   (класс бьёт селектор атрибута в UA-таблице) — без этой строки поиск и заголовки
   секций показывались всегда, даже когда JS их спрятал. */
.ccp [hidden] { display: none !important; }

/* ── шапка ── */
.ccp-head {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: 14px 14px 10px; border-bottom: 1px solid var(--ccp-line);
}
.ccp-title { flex: 1 1 auto; font-size: 14px; font-weight: 650; letter-spacing: -.01em; }
.ccp-count {
  display: inline-block; margin-left: 5px; padding: 1px 7px; border-radius: 999px;
  background: var(--ccp-btn); color: var(--ccp-muted); font-size: 12px; font-weight: 600;
}
.ccp-muteall {
  flex: none; padding: 6px 10px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--ccp-line-2); background: transparent; color: var(--ccp-muted);
  font: inherit; font-size: 12.5px; font-weight: 600;
  transition: background var(--ccp-dur) var(--ccp-ease), color var(--ccp-dur) var(--ccp-ease);
}
.ccp-muteall:hover { background: var(--ccp-btn-h); color: var(--ccp-fg); }

/* ── поиск (появляется от 8 участников) ── */
.ccp-search {
  flex: none; position: relative; display: flex; align-items: center;
  margin: 10px 12px 4px; padding: 0 10px; height: 34px;
  border: 1px solid var(--ccp-line); border-radius: 9px; background: rgba(0, 0, 0, .22);
  color: var(--ccp-dim);
  transition: border-color var(--ccp-dur) var(--ccp-ease);
}
.ccp-search:focus-within { border-color: var(--ccp-primary); }
.ccp-search input {
  flex: 1 1 auto; min-width: 0; margin-left: 8px; border: 0; outline: none;
  background: transparent; color: var(--ccp-fg); font: inherit; font-size: 13.5px;
}
.ccp-search input::placeholder { color: var(--ccp-dim); }
.ccp-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* ── скролл ── */
.ccp-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 8px; }
.ccp-scroll::-webkit-scrollbar { width: 8px; }
.ccp-scroll::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; }
.ccp-scroll:hover::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); }

/* ── заголовок секции ── */
.ccp-sec {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px 6px;
}
.ccp-sec-t {
  flex: 1 1 auto; color: var(--ccp-dim);
  font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.ccp-wait-n { color: var(--ccp-fg); }
.ccp-admitall {
  flex: none; padding: 5px 10px; border-radius: 8px; cursor: pointer;
  border: 0; background: var(--ccp-primary); color: #fff;
  font: inherit; font-size: 12.5px; font-weight: 600;
  transition: filter var(--ccp-dur) var(--ccp-ease);
}
.ccp-admitall:hover { filter: brightness(1.08); }

/* Секция ожидания подсвечена мягкой подложкой: это ЕДИНСТВЕННОЕ место панели,
   которое требует действия — она обязана читаться с первого взгляда. Но именно
   подложкой и рамкой, а не заливкой строк (аляповато и мешает читать имена). */
.ccp-wait {
  margin: 8px 10px 4px; border-radius: 12px;
  background: rgba(111, 131, 240, .10);
  border: 1px solid rgba(111, 131, 240, .26);
}
.ccp-wait .ccp-sec { padding-top: 10px; }
.ccp-wait-list { padding-bottom: 6px; }

/* ── строка участника ── */
.ccp-row {
  position: relative; display: flex; align-items: center; gap: 10px;
  padding: 7px 14px; min-height: 44px;
  transition: background var(--ccp-dur) var(--ccp-ease);
}
.ccp-row:hover { background: rgba(255, 255, 255, .045); }
.ccp-ava {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px; font-weight: 650; letter-spacing: .02em;
  object-fit: cover;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}
.ccp-name {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 13.5px; font-weight: 550;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ccp-sub { flex: 0 0 100%; color: var(--ccp-dim); font-size: 11.5px; font-weight: 500; }
.ccp-you { color: var(--ccp-dim); font-size: 12px; font-weight: 500; }
.ccp-role {
  flex: none; padding: 1.5px 7px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  border: 1px solid transparent;
}
.role-host { color: #9fb0ff; background: rgba(111, 131, 240, .16); border-color: rgba(111, 131, 240, .34); }
.role-guest { color: #ffcf8a; background: rgba(229, 162, 60, .15); border-color: rgba(229, 162, 60, .32); }
/* «Отошёл» — нейтральная подпись, а не тревога: человек вернётся сам. Тише роли. */
.ccp-away { color: var(--ccp-dim); background: rgba(127, 127, 127, .14); border-color: rgba(127, 127, 127, .26); font-weight: 600; }

/* состояние микрофона/камеры — приглушённое, красным только выключенный микрофон:
   именно он мешает встрече, выключенная камера — норма и тревожить не должна */
.ccp-state { flex: none; display: flex; align-items: center; gap: 6px; color: var(--ccp-muted); }
.ccp-i { display: block; opacity: .9; }
.ccp-i.off { opacity: .55; }
.ccp-state .ccp-i:first-child.off { color: var(--ccp-danger); opacity: .85; }

/* «говорит сейчас» — тонкая рамка-акцент слева + подсветка аватара.
   НЕ заливка всей строки (запрещено правилом дизайна: аляповато). */
.ccp-row.speaking::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--ccp-ok);
}
.ccp-row.speaking .ccp-ava { box-shadow: 0 0 0 2px var(--ccp-ok), inset 0 1px 0 rgba(255, 255, 255, .18); }

/* ── действия ── */
.ccp-acts { flex: none; display: flex; align-items: center; gap: 6px; }
.ccp-ib {
  width: 30px; height: 30px; padding: 0; border-radius: 8px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; background: var(--ccp-btn); color: var(--ccp-fg);
  transition: background var(--ccp-dur) var(--ccp-ease), transform var(--ccp-dur) var(--ccp-ease);
}
.ccp-ib:hover { background: var(--ccp-btn-h); }
.ccp-ib:active { transform: scale(.94); }
.ccp-adm { background: var(--ccp-ok); color: #fff; }
.ccp-adm:hover { background: var(--ccp-ok); filter: brightness(1.1); }
.ccp-deny { background: transparent; border-color: var(--ccp-line-2); color: var(--ccp-muted); }
.ccp-deny:hover { background: rgba(239, 77, 77, .16); border-color: rgba(239, 77, 77, .4); color: #ff9b9b; }

.ccp-menu {
  position: absolute; right: 12px; top: calc(100% - 6px); z-index: 5;
  min-width: 210px; padding: 5px; border-radius: 12px;
  background: #1b1f29; border: 1px solid var(--ccp-line-2);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .5);
  display: flex; flex-direction: column;
  animation: ccpMenuIn 120ms var(--ccp-ease);
}
@keyframes ccpMenuIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.ccp-menu button {
  padding: 8px 10px; border: 0; border-radius: 8px; cursor: pointer;
  background: transparent; color: var(--ccp-fg); text-align: left;
  font: inherit; font-size: 13px;
  transition: background var(--ccp-dur) var(--ccp-ease);
}
.ccp-menu button:hover { background: var(--ccp-btn-h); }
.ccp-menu button.danger { color: #ff9b9b; }
.ccp-menu button.danger:hover { background: rgba(239, 77, 77, .16); }

.ccp-empty { padding: 22px 14px; text-align: center; color: var(--ccp-dim); font-size: 13px; }

.ccp :focus-visible { outline: 2px solid var(--ccp-primary); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .ccp *, .ccp *::before { transition: none !important; animation: none !important; }
}