/* ============================================================
   brooh — внутренний мессенджер. Дизайн-система портала.
   Светлый/пастельный, Manrope, синий акцент, мягкие тени.
   Стилизует и статический хром, и разметку, которую генерит main.js.
   ============================================================ */

:root{
  --app-bg:#f5f7fb; --app-soft:#f8fafd; --surface:#fff; --surface-muted:#f1f4f9;
  --ink:#172033; --ink-secondary:#667085; --ink-muted:#98a2b3;
  --accent:#3b82f6; --accent-soft:#dbeafe; --accent-strong:#2563eb;
  --line-soft:rgba(17,24,39,.06); --line-medium:rgba(17,24,39,.10);
  --danger-bg:#fee2e2; --danger-text:#b91c1c; --success-text:#15803d;
  --r-sm:12px; --r-md:14px; --r-lg:18px; --r-xl:24px; --r-2xl:28px;
  --sh-soft:0 12px 40px rgba(15,23,42,.06);
  --sh-card:0 18px 50px rgba(15,23,42,.08);
  --sh-float:0 20px 60px rgba(15,23,42,.12);
  --font:'Manrope',system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  font-family:var(--font); background:var(--app-bg); color:var(--ink);
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; overflow:hidden;
}
.hidden{ display:none !important; }
button{ font:inherit; color:inherit; cursor:pointer; border:0; background:none; }
input,textarea{ font:inherit; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-weight:800; letter-spacing:-.02em; }
svg{ display:block; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:rgba(17,24,39,.14); border-radius:99px; border:3px solid var(--surface); }

/* ---------- кнопки ---------- */
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  height:44px; padding:0 20px; border-radius:999px; font-weight:700; font-size:14px;
  background:var(--accent); color:#fff; box-shadow:0 14px 34px rgba(59,130,246,.28);
  transition:transform .18s var(--ease), background .18s;
}
.btn-primary:hover{ background:var(--accent-strong); transform:translateY(-1px); }
.btn-primary.btn-danger{ background:#b91c1c; box-shadow:0 14px 34px rgba(185,28,28,.24); }
.btn-primary.btn-danger:hover{ background:#a01717; }
.btn-secondary{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  height:44px; padding:0 20px; border-radius:999px; font-weight:700; font-size:14px;
  background:var(--surface-muted); color:var(--ink); transition:background .18s, transform .18s var(--ease);
}
.btn-secondary:hover{ background:#e8edf5; transform:translateY(-1px); }
.btn-icon{
  width:40px; height:40px; display:grid; place-items:center; border-radius:50%;
  color:var(--ink-secondary); background:transparent; transition:.18s;
}
.btn-icon:hover{ background:var(--surface-muted); color:var(--ink); }
.btn-icon svg{ width:18px; height:18px; }

/* ---------- эквалайзер «голос» ---------- */
.eq{ display:inline-flex; align-items:flex-end; gap:2.5px; height:18px; color:var(--accent); }
.eq i{ width:3px; height:30%; background:currentColor; border-radius:2px; animation:eq 1.1s ease-in-out infinite; }
.eq i:nth-child(2){animation-delay:.15s} .eq i:nth-child(3){animation-delay:.3s}
.eq i:nth-child(4){animation-delay:.45s} .eq i:nth-child(5){animation-delay:.6s}
@keyframes eq{ 0%,100%{height:25%} 50%{height:100%} }

/* ---------- загрузка ---------- */
.loading-overlay{ position:fixed; inset:0; z-index:1000; display:flex; flex-direction:column; gap:14px;
  align-items:center; justify-content:center; background:rgba(245,247,251,.85); backdrop-filter:blur(6px); }
.loading-spinner{ width:42px; height:42px; border:3px solid var(--accent-soft); border-top-color:var(--accent);
  border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg) } }
.loading-text{ color:var(--ink-secondary); font-weight:600; }

/* ---------- уведомления (showNotification) ---------- */
.notification{ position:fixed; top:20px; left:50%; transform:translateX(-50%) translateY(-20px);
  z-index:1200; padding:12px 20px; border-radius:14px; background:var(--surface); color:var(--ink);
  box-shadow:var(--sh-float); font-weight:600; opacity:0; transition:.25s var(--ease); border:1px solid var(--line-soft); }
.notification.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.notification.success{ border-left:4px solid var(--success-text); }
.notification.error{ border-left:4px solid var(--danger-text); }
.notification.info{ border-left:4px solid var(--accent); }

/* ============================================================
   ЛОГИН
   ============================================================ */
.login-popup{ position:fixed; inset:0; z-index:900; display:flex; align-items:center; justify-content:center;
  padding:20px; background:radial-gradient(120% 90% at 80% 0%,#fff,transparent 55%), var(--app-bg); }
.login-card{ width:min(380px,100%); background:var(--surface); border-radius:var(--r-2xl); padding:38px 32px;
  box-shadow:var(--sh-card); text-align:center; display:flex; flex-direction:column; gap:12px; }
.login-card .brand-mark{ width:54px; height:54px; border-radius:16px; margin:0 auto 6px; display:grid; place-items:center;
  background:var(--accent); box-shadow:0 12px 28px rgba(59,130,246,.32); }
.login-card .brand-mark .eq{ color:#fff; height:20px; }
.login-card .brand-word{ font-size:26px; font-weight:800; letter-spacing:-.04em; }
.login-card .login-sub{ color:var(--ink-muted); font-weight:600; margin-bottom:8px; }
/* font-size:16px у полей — иначе iOS Safari авто-зумит страницу при фокусе */
.login-card input{ height:48px; border-radius:var(--r-md); border:1px solid var(--line-medium); background:var(--surface);
  padding:0 16px; font-size:16px; color:var(--ink); outline:none; transition:.18s; }
input, textarea{ font-size:16px; }
.login-card input:focus{ border-color:#93c5fd; box-shadow:0 0 0 4px rgba(59,130,246,.12); }
.login-card .btn-primary{ height:48px; margin-top:6px; }

/* ============================================================
   ПРОФИЛЬ / общие модалки
   ============================================================ */
.profile-popup,.invite-popup,.leave-popup,.video-settings-popup{
  position:fixed; inset:0; z-index:950; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(15,23,42,.45); backdrop-filter:blur(4px); }
.profile-card,.invite-card,.leave-card,.video-settings-card{
  width:min(420px,100%); background:var(--surface); border-radius:var(--r-xl); padding:28px;
  box-shadow:var(--sh-float); display:flex; flex-direction:column; gap:16px; }
.profile-card h3,.invite-card h3,.leave-card h3,.video-settings-card h3{ font-size:20px; }
.leave-card p{ color:var(--ink-secondary); }
.avatar-editor{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.avatar-preview{ width:96px; height:96px; border-radius:50%; background:var(--accent-soft); color:var(--accent-strong);
  display:grid; place-items:center; font-size:36px; font-weight:800; overflow:hidden; position:relative; }
.avatar-preview img{ width:100%; height:100%; object-fit:cover; }
.avatar-upload-btn{ font-weight:700; color:var(--accent); cursor:pointer; font-size:13px; }
.profile-card input,.invite-link-box input{ height:46px; border-radius:var(--r-md); border:1px solid var(--line-medium);
  padding:0 14px; outline:none; transition:.18s; width:100%; }
.profile-card input:focus{ border-color:#93c5fd; box-shadow:0 0 0 4px rgba(59,130,246,.12); }
.profile-actions,.leave-actions{ display:flex; gap:10px; }
.profile-actions .btn-primary,.profile-actions .btn-secondary,.leave-actions .btn-primary,.leave-actions .btn-secondary{ flex:1; }
.invite-link-box{ display:flex; gap:8px; }
.invite-link-box input{ flex:1; }

/* ============================================================
   ГЛАВНАЯ
   ============================================================ */
.dashboard-page{ position:fixed; inset:0; display:flex; overflow:hidden; max-width:100vw; }
.side-rail{ width:72px; flex-shrink:0; background:var(--surface); border-right:1px solid var(--line-soft);
  display:flex; flex-direction:column; align-items:center; padding:18px 0; gap:6px; }
.rail-mark{ width:42px; height:42px; border-radius:13px; background:var(--accent); display:grid; place-items:center;
  box-shadow:0 10px 24px rgba(59,130,246,.3); margin-bottom:14px; }
.rail-mark .eq{ color:#fff; height:16px; }
.rail-btn{ width:44px; height:44px; border-radius:var(--r-md); display:grid; place-items:center; color:var(--ink-muted); transition:.18s; }
.rail-btn svg{ width:21px; height:21px; }
.rail-btn:hover{ background:var(--surface-muted); color:var(--ink); }
.rail-btn.active{ background:var(--accent-soft); color:var(--accent-strong); }
.side-rail #logoutBtn{ margin-top:auto; }

.dash-main{ flex:1; min-width:0; display:flex; flex-direction:column; overflow:hidden; }
.dash-top{ height:68px; flex-shrink:0; display:flex; align-items:center; gap:14px; padding:0 28px; }
.dash-brand{ font-size:22px; font-weight:800; letter-spacing:-.04em; }
.dash-top .grow{ flex:1; }
.user-info{ display:flex; align-items:center; gap:10px; font-weight:700; color:var(--ink); }
.user-avatar{ width:40px; height:40px; border-radius:50%; background:linear-gradient(150deg,#cdbbff,#6d28d9); color:#fff;
  display:grid; place-items:center; font-weight:800; overflow:hidden; }
.user-avatar img{ width:100%; height:100%; object-fit:cover; }

/* кнопка «Вход» (гость) и чип пользователя (авторизован) — переключаются по body.authed */
.guest-login{ display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 20px; border-radius:14px;
  background:var(--accent); color:#fff; font-weight:700; box-shadow:0 12px 28px rgba(59,130,246,.28); transition:.18s; }
.guest-login:hover{ background:var(--accent-strong); transform:translateY(-1px); }
body.authed .guest-login{ display:none; }
.user-chip{ display:none; align-items:center; gap:10px; padding:6px 14px 6px 6px; border-radius:999px;
  background:var(--surface); border:1px solid var(--line-soft); box-shadow:var(--sh-soft); font-weight:700; transition:.18s; }
body.authed .user-chip{ display:flex; }
.hello-authed{ display:none; } body.authed .hello-authed{ display:block; }
.hello-guest{ display:block; } body.authed .hello-guest{ display:none; }
.user-chip:hover{ box-shadow:var(--sh-hover,0 10px 28px rgba(15,23,42,.08)); transform:translateY(-1px); }
.user-chip .chip-exit{ color:var(--ink-muted); }
.user-chip:hover .chip-exit{ color:var(--danger-text); }
/* левый выход убран совсем — выход только через чип сверху (кнопка остаётся в DOM, но скрыта) */
.rail-logout{ display:none !important; }

/* стейдж разделов */
.dash-stage{ flex:1; min-width:0; min-height:0; position:relative; overflow:hidden; }
.dpanel{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:34px; padding:24px; opacity:0; visibility:hidden; transform:translateY(14px); overflow-y:auto; overflow-x:hidden;
  transition:opacity .4s var(--ease), transform .4s var(--ease), visibility 0s linear .4s; }
.dpanel.active{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.dash-hello{ font-size:clamp(26px,4vw,32px); text-align:center; }

.action-tiles{ display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:center; gap:40px; }
.tile{ display:flex; flex-direction:column; align-items:center; gap:12px; width:108px; }
.tile-ic{ width:92px; height:92px; border-radius:26px; display:grid; place-items:center; color:#fff; transition:transform .2s var(--ease); }
.tile:hover .tile-ic{ transform:translateY(-6px); }
.tile-ic svg{ width:34px; height:34px; }
.tile-label{ font-size:13px; font-weight:700; color:var(--ink); text-align:center; }
[data-color="blue"].tile .tile-ic{ background:var(--accent); box-shadow:0 16px 38px rgba(59,130,246,.32); }
[data-color="purple"].tile .tile-ic{ background:linear-gradient(150deg,#8b5cf6,#6d28d9); box-shadow:0 16px 38px rgba(109,40,217,.3); }
[data-color="orange"].tile .tile-ic{ background:linear-gradient(150deg,#fb923c,#c2410c); box-shadow:0 16px 38px rgba(194,65,12,.28); }

/* выезжающая полоса присоединения */
.join-strip{ display:flex; align-items:center; gap:10px; width:min(520px,92vw);
  background:var(--surface); border:1px solid var(--line-soft); border-radius:999px; box-shadow:var(--sh-soft); padding:6px 6px 6px 8px;
  animation:joinIn .25s var(--ease); }
@keyframes joinIn{ from{opacity:0; transform:translateY(-8px)} to{opacity:1; transform:none} }
.join-strip input{ flex:1; min-width:0; height:46px; border:0; background:transparent; outline:none; font-size:16px; padding:0 12px; color:var(--ink); }
.join-strip .btn-primary{ height:46px; padding:0 24px; flex-shrink:0; }

/* карточка «Присоединиться» с крупным полем ID */
.join-card{ display:flex; align-items:center; gap:16px; width:min(560px,92vw); background:var(--surface);
  border:1px solid var(--line-soft); border-radius:var(--r-xl); box-shadow:var(--sh-soft); padding:18px 20px; }
.join-ic{ width:54px; height:54px; flex-shrink:0; border-radius:16px; display:grid; place-items:center; color:#fff;
  background:linear-gradient(150deg,#8b5cf6,#6d28d9); box-shadow:0 12px 28px rgba(109,40,217,.28); }
.join-ic svg{ width:24px; height:24px; }
.join-body{ flex:1; min-width:0; }
.join-title{ font-weight:800; font-size:15px; margin-bottom:8px; }
.join-row{ display:flex; align-items:center; gap:10px; }
.join-row input{ flex:1; min-width:0; height:50px; border-radius:var(--r-md); border:1px solid var(--line-medium);
  background:var(--surface); padding:0 16px; font-size:16px; color:var(--ink); outline:none; transition:.18s; }
.join-row input:focus{ border-color:#93c5fd; box-shadow:0 0 0 4px rgba(59,130,246,.12); }
.join-row .btn-primary{ height:50px; padding:0 22px; flex-shrink:0; }

/* разделы-описания (Сообщения/История/Контакты) */
.feature-row{ display:flex; align-items:center; gap:28px; max-width:640px; }
.feature-ic{ width:104px; height:104px; flex-shrink:0; border-radius:28px; display:grid; place-items:center; color:#fff; }
.feature-ic svg{ width:42px; height:42px; }
.feature-ic[data-color="blue"]{ background:var(--accent); box-shadow:0 18px 40px rgba(59,130,246,.3); }
.feature-ic[data-color="teal"]{ background:linear-gradient(150deg,#14b8a6,#0f766e); box-shadow:0 18px 40px rgba(15,118,110,.28); }
.feature-ic[data-color="purple"]{ background:linear-gradient(150deg,#8b5cf6,#6d28d9); box-shadow:0 18px 40px rgba(109,40,217,.28); }
.feature-row h1{ font-size:clamp(22px,3vw,30px); letter-spacing:-.03em; }
.feature-row p{ margin-top:10px; color:var(--ink-secondary); font-weight:500; line-height:1.6; }

.session-info{ width:min(520px,92vw); background:var(--surface); border-radius:var(--r-xl); padding:22px; box-shadow:var(--sh-card);
  display:flex; flex-direction:column; gap:12px; }
.session-info h3{ font-size:18px; }
.info-row{ display:flex; align-items:center; gap:10px; }
.info-key{ font-size:12px; font-weight:700; color:var(--ink-muted); width:48px; }
.info-row code{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px;
  background:var(--surface-muted); padding:8px 12px; border-radius:10px; }
.session-info .btn-primary{ margin-top:4px; }

/* ============================================================
   СЕССИЯ (конференция)
   ============================================================ */
.session-page{ position:fixed; inset:0; display:grid;
  grid-template-columns:1fr 340px; grid-template-rows:auto 1fr auto;
  grid-template-areas:"top top" "stage side" "controls controls"; gap:12px; padding:12px; }

/* верхний бар */
.cx-top{ grid-area:top; display:flex; align-items:center; gap:12px; background:var(--surface);
  border-radius:var(--r-lg); box-shadow:var(--sh-soft); padding:10px 18px; }
.cx-mark{ width:38px; height:38px; border-radius:11px; background:var(--accent); display:grid; place-items:center; flex-shrink:0; transition:transform .15s var(--ease); }
.cx-mark:hover{ transform:scale(1.06); }
.cx-mark .eq{ color:#fff; height:15px; }
.cx-titles .cx-title{ font-weight:800; font-size:15px; line-height:1.1; }
.cx-titles .cx-sub{ font-size:11px; color:var(--ink-muted); font-weight:600; }
.cx-top .grow{ flex:1; }
.cx-count{ display:inline-flex; align-items:center; gap:6px; background:var(--surface-muted); color:var(--ink-secondary);
  font-weight:800; font-size:13px; padding:6px 12px; border-radius:999px; }

/* центр: видео */
.cx-stage{ grid-area:stage; position:relative; background:var(--surface); border-radius:var(--r-xl);
  box-shadow:var(--sh-soft); overflow:hidden; display:flex; flex-direction:column; min-height:0; }
.cx-stage .video-container{ flex:1; }
.stage-empty{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; color:var(--ink-muted); text-align:center; padding:20px; }
.stage-empty .se-ic{ width:64px; height:64px; border-radius:20px; background:var(--surface-muted); color:var(--ink-muted);
  display:grid; place-items:center; margin-bottom:6px; }
.stage-empty .se-ic svg{ width:30px; height:30px; }
.stage-empty p{ font-weight:700; color:var(--ink-secondary); }
.stage-empty span{ font-size:13px; }
.video-container:not(.hidden) ~ .stage-empty{ display:none; }

/* правая панель с вкладками */
.cx-side{ grid-area:side; background:var(--surface); border-radius:var(--r-xl); box-shadow:var(--sh-soft);
  display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.side-tabs{ display:flex; align-items:center; gap:6px; padding:12px 12px 0; }
.side-tab{ flex:1; height:38px; border-radius:999px; font-weight:700; font-size:13px; color:var(--ink-muted);
  background:var(--surface-muted); transition:.18s; position:relative; }
.side-tab.active{ background:var(--accent-soft); color:var(--accent-strong); }
.chat-dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); display:inline-block; margin-left:6px;
  box-shadow:0 0 0 3px rgba(59,130,246,.18); vertical-align:middle; }
.side-pane{ flex:1; min-height:0; display:flex; flex-direction:column; padding-top:10px; }
.panel-header{ display:flex; align-items:center; gap:8px; padding:18px 18px 12px; }
.panel-header h3{ font-size:16px; }
.participant-count{ background:var(--accent-soft); color:var(--accent-strong); font-weight:800; font-size:13px; }
.participants-list-wrapper{ flex:1; position:relative; min-height:0; }
.participants-list{ height:100%; overflow-y:auto; padding:0 10px; display:flex; flex-direction:column; gap:2px; }
.participants-scroll-up,.participants-scroll-down{ display:none; }

.participant-item{ display:flex; align-items:center; gap:12px; padding:9px 10px; border-radius:var(--r-md); transition:.15s; }
.participant-item:hover{ background:var(--surface-muted); }
.participant-item.me{ background:rgba(59,130,246,.06); }
.participant-avatar{ width:38px; height:38px; border-radius:50%; flex-shrink:0; position:relative;
  background:linear-gradient(150deg,#b8dbff,#1d4ed8); color:#fff; display:grid; place-items:center; font-weight:800; font-size:14px; overflow:hidden; }
.participant-avatar img{ width:100%; height:100%; object-fit:cover; }
.participant-item.speaking .participant-avatar{ box-shadow:0 0 0 3px var(--accent); }
.status-dot{ position:absolute; right:-1px; bottom:-1px; width:11px; height:11px; border-radius:50%;
  background:var(--success-text); border:2px solid var(--surface); }
.status-dot.muted{ background:var(--ink-muted); }
.muted-icon{ position:absolute; right:-3px; bottom:-3px; width:15px; height:15px; border-radius:50%;
  background:var(--danger-text); color:#fff; display:grid; place-items:center; border:2px solid var(--surface); }
.muted-icon svg{ width:8px; height:8px; }
.participant-info{ flex:1; min-width:0; display:flex; align-items:center; gap:6px; }
.participant-name{ font-weight:700; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* мах рукой: прячем эмодзи (font-size:0), рисуем SVG-руку маской */
.wave-indicator{ width:17px; height:17px; flex-shrink:0; display:inline-block; opacity:0; font-size:0; color:transparent;
  background:var(--accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 11V6a2 2 0 0 0-4 0M14 10V4a2 2 0 0 0-4 0v2M10 10.5V6a2 2 0 0 0-4 0v8'/%3E%3Cpath d='M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2a8 8 0 0 1-8-8 2 2 0 1 1 4 0'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 11V6a2 2 0 0 0-4 0M14 10V4a2 2 0 0 0-4 0v2M10 10.5V6a2 2 0 0 0-4 0v8'/%3E%3Cpath d='M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2a8 8 0 0 1-8-8 2 2 0 1 1 4 0'/%3E%3C/svg%3E") center/contain no-repeat; }
.wave-indicator.waving{ opacity:1; animation:wave .5s ease-in-out 3; }
@keyframes wave{ 0%,100%{transform:rotate(0)} 25%{transform:rotate(18deg)} 75%{transform:rotate(-18deg)} }
.kick-btn{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; color:var(--ink-muted);
  opacity:0; transition:.15s; flex-shrink:0; }
.participant-item:hover .kick-btn{ opacity:1; }
.kick-btn:hover{ background:var(--danger-bg); color:var(--danger-text); }
.kick-btn svg{ width:14px; height:14px; }

.panel-footer{ display:flex; align-items:center; gap:10px; padding:14px 16px; border-top:1px solid var(--line-soft); }
.my-avatar{ width:40px; height:40px; border-radius:50%; flex-shrink:0; background:linear-gradient(150deg,#cdbbff,#6d28d9);
  color:#fff; display:grid; place-items:center; font-weight:800; overflow:hidden; }
.my-avatar img{ width:100%; height:100%; object-fit:cover; }
.my-info{ flex:1; min-width:0; }
.my-name{ font-weight:700; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.my-status{ font-size:11px; color:var(--ink-muted); font-weight:600; }

/* центр: видео + чат */
.chat-panel{ flex:1; min-height:0; display:flex; flex-direction:column; overflow:hidden; position:relative; }

.video-container{ position:relative; padding:14px; height:100%; overflow:hidden; }
/* равные ячейки по числу участников (cols/rows задаёт JS) — без растягивания */
.video-grid{ display:grid; gap:12px; height:100%;
  grid-template-columns:repeat(var(--cols,1),minmax(0,1fr));
  grid-template-rows:repeat(var(--rows,1),minmax(0,1fr)); }
.video-tile{ position:relative; min-width:0; min-height:0; border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(155deg,#22304d,#0e1626); box-shadow:var(--sh-soft); cursor:pointer; }
/* фокус: одна плитка на весь экран (тап по плитке или кнопкой раскладки) */
.video-grid.has-focus{ grid-template-columns:1fr !important; grid-template-rows:1fr !important; }
.video-grid.has-focus .video-tile{ display:none; }
.video-grid.has-focus .video-tile.focused{ display:block; }
/* ===== режимы раскладки (выбираются в попапе) ===== */
.video-grid .video-tile.is-main{ outline:2px solid var(--accent); outline-offset:-2px; }
/* spotlight: только главный во весь экран */
.video-grid[data-mode="spotlight"]{ grid-template-columns:1fr !important; grid-template-rows:1fr !important; }
.video-grid[data-mode="spotlight"] .video-tile{ display:none; }
.video-grid[data-mode="spotlight"] .video-tile.is-main{ display:block; outline:none; }
/* speaker: главный большой сверху, остальные строкой-миниатюрами */
.video-grid[data-mode="speaker"]{ grid-template-columns:repeat(auto-fill,minmax(120px,1fr)) !important;
  grid-auto-rows:96px !important; grid-template-rows:none !important; align-content:start; }
.video-grid[data-mode="speaker"] .video-tile.is-main{ grid-column:1 / -1; aspect-ratio:16/9; outline:none; }
/* grid-speaker: сетка, главный крупнее */
.video-grid[data-mode="grid-speaker"] .video-tile.is-main{ grid-column:span 2; grid-row:span 2; }
/* кнопка раскладки */
.layout-toggle{ position:absolute; top:14px; right:14px; z-index:6; width:40px; height:40px; border-radius:50%;
  background:rgba(10,16,26,.6); backdrop-filter:blur(8px); color:#fff; display:grid; place-items:center; transition:.15s; }
.layout-toggle:hover{ background:rgba(10,16,26,.78); }
.layout-toggle svg{ width:19px; height:19px; }
.video-tile video,.video-tile img{ width:100%; height:100%; object-fit:cover; display:block; }
.video-tile.speaking{ outline:3px solid var(--accent); outline-offset:-3px; box-shadow:0 0 0 6px rgba(59,130,246,.15), var(--sh-soft); }
.video-tile.main-speaker{ outline:3px solid var(--accent); outline-offset:-3px; }
/* аватар-плитка (камера выключена) */
.av-feed{ position:absolute; inset:0; display:grid; place-items:center; }
.av-circle{ width:84px; height:84px; border-radius:50%; display:grid; place-items:center; color:#fff;
  font-weight:800; font-size:28px; box-shadow:0 10px 30px rgba(0,0,0,.35); }
/* подпись имени на плитке */
.video-tile-name{ position:absolute; left:12px; bottom:12px; display:flex; align-items:center; gap:7px;
  padding:6px 12px; border-radius:999px; background:rgba(10,16,26,.6); backdrop-filter:blur(8px);
  color:#fff; font-size:12.5px; font-weight:700; max-width:calc(100% - 24px); }
.video-tile-name .vt-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.video-tile-name .vt-mic{ display:inline-flex; color:#fff; flex-shrink:0; }
.video-tile-name .vt-mic.off{ color:#fca5a5; }
.video-tile-name .vt-eq{ color:var(--accent); height:13px; display:none; flex-shrink:0; }
.video-tile.speaking .vt-eq{ display:inline-flex; }
.video-tile.local .video-tile-name{ color:#bfdbfe; }
.video-settings-btn{ display:none !important; }
.video-settings-btn.shown{ position:absolute; top:22px; right:22px; width:38px; height:38px; border-radius:50%;
  background:rgba(10,16,26,.6); backdrop-filter:blur(8px); color:#fff; display:grid; place-items:center; }
.video-settings-btn svg{ width:18px; height:18px; }

/* мобильная сетка участников (в центре, когда нет видео) */
.mobile-participants-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; padding:14px; }
.mobile-participant-card{ background:var(--surface-muted); border-radius:var(--r-lg); padding:16px; display:flex;
  flex-direction:column; align-items:center; gap:8px; }
.mobile-participant-card .participant-avatar{ width:56px; height:56px; font-size:18px; }
.mobile-participant-card .mic-indicator{ position:absolute; right:0; bottom:0; width:14px; height:14px; border-radius:50%;
  background:var(--success-text); border:2px solid var(--surface-muted); }
.mobile-participant-card .mic-indicator.muted{ background:var(--danger-text); }
.participant-name-row{ display:flex; align-items:center; gap:5px; }
.mobile-participant-card .participant-status{ font-size:11px; color:var(--ink-muted); }

/* чат */
.chat-messages{ flex:1; min-height:0; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:14px; }
.chat-welcome{ margin:auto; text-align:center; color:var(--ink-muted); display:flex; flex-direction:column; align-items:center; gap:8px; }
.chat-welcome .welcome-icon{ color:var(--accent); opacity:.4; }
.chat-welcome h3{ color:var(--ink-secondary); font-size:16px; }
.chat-welcome p{ font-size:13px; }
.message{ display:flex; gap:10px; max-width:80%; }
.message.own{ flex-direction:row-reverse; align-self:flex-end; }
.message-avatar{ width:34px; height:34px; border-radius:50%; flex-shrink:0; background:linear-gradient(150deg,#b8dbff,#1d4ed8);
  color:#fff; display:grid; place-items:center; font-weight:800; font-size:12px; overflow:hidden; }
.message-avatar img{ width:100%; height:100%; object-fit:cover; }
.message-content{ background:var(--surface-muted); border-radius:16px; border-top-left-radius:6px; padding:9px 13px; min-width:0; }
.message.own .message-content{ background:var(--accent); color:#fff; border-top-left-radius:16px; border-top-right-radius:6px; }
.message-author{ font-size:11px; font-weight:800; margin-bottom:2px; color:var(--accent-strong); }
.message.own .message-author{ color:rgba(255,255,255,.85); }
.message-text{ font-size:13.5px; word-break:break-word; white-space:pre-wrap; }
.message-image{ max-width:200px; border-radius:10px; margin-top:6px; }
.message-file{ display:flex; align-items:center; gap:8px; margin-top:6px; padding:8px; border-radius:10px; background:rgba(0,0,0,.05); color:inherit; }
.message-file-icon{ flex-shrink:0; }
.message-file-name{ font-size:12px; font-weight:700; }
.message-file-size{ font-size:11px; opacity:.7; }
.message-time{ font-size:10px; opacity:.6; margin-top:3px; text-align:right; }
.system-message{ align-self:center; font-size:12px; color:var(--ink-muted); background:var(--surface-muted); padding:5px 12px; border-radius:999px; }

/* ввод */
.chat-input-area{ padding:12px 14px; border-top:1px solid var(--line-soft); }
.chat-input-container{ display:flex; align-items:flex-end; gap:6px; background:var(--surface-muted); border-radius:22px; padding:5px; }
.message-input-wrapper{ flex:1; min-width:0; }
#messageInput{ width:100%; border:0; background:transparent; outline:none; resize:none; max-height:120px;
  padding:9px 8px; font-size:16px; color:var(--ink); }
.attached-files{ display:flex; flex-wrap:wrap; gap:6px; }
.attached-file{ display:flex; align-items:center; gap:6px; font-size:11px; background:var(--surface); padding:4px 8px; border-radius:8px; }
.attached-file .remove-file{ cursor:pointer; color:var(--danger-text); font-weight:800; }
.send-btn{ width:40px; height:40px; padding:0; border-radius:50%; flex-shrink:0; box-shadow:0 8px 20px rgba(59,130,246,.3); }
.send-btn svg{ width:18px; height:18px; }
.chat-input-container .btn-icon{ width:38px; height:38px; flex-shrink:0; }

/* десктоп toggle чата */
.desktop-chat-toggle{ position:absolute; top:14px; right:14px; z-index:5; width:40px; height:40px; border-radius:50%;
  background:rgba(15,23,42,.55); backdrop-filter:blur(8px); color:#fff; display:grid; place-items:center; }
.desktop-chat-toggle .unread-count,.chat-toggle-btn .unread-count{ position:absolute; top:-4px; right:-4px; min-width:18px; height:18px;
  padding:0 4px; border-radius:999px; background:var(--danger-text); color:#fff; font-size:10px; font-weight:800;
  display:grid; place-items:center; }
.chat-panel.chat-collapsed .chat-messages,.chat-panel.chat-collapsed .chat-input-area{ display:none; }

/* контрол-бар (низ) */
.controls-panel{ grid-area:controls; display:flex; align-items:center; justify-content:center; gap:10px;
  background:var(--surface); border-radius:var(--r-xl); box-shadow:var(--sh-soft); padding:10px; flex-wrap:wrap; }
.controls-group{ display:flex; align-items:center; gap:10px; }
.controls-divider{ width:1px; height:34px; background:var(--line-soft); }
.control-btn{ display:flex; flex-direction:column; align-items:center; gap:5px; min-width:60px; }
.control-icon{ width:52px; height:52px; border-radius:var(--r-md); display:grid; place-items:center;
  background:var(--surface-muted); color:var(--ink); transition:.18s; }
.control-btn:hover .control-icon{ background:#e8edf5; }
.control-label{ font-size:10.5px; font-weight:600; color:var(--ink-muted); }
.control-btn svg{ width:20px; height:20px; }
/* состояния mic/cam */
#micToggle .icon-off{ display:none; }
#micToggle.muted .icon-on{ display:none; }
#micToggle.muted .icon-off{ display:block; }
#micToggle.muted .control-icon{ background:var(--danger-bg); color:var(--danger-text); }
#micToggle.muted .control-label{ color:var(--danger-text); }
#micToggle:not(.muted) .control-icon{ background:var(--accent-soft); color:var(--accent-strong); }
#cameraToggle .icon-off{ display:none; }
#cameraToggle.camera-on .control-icon{ background:var(--accent-soft); color:var(--accent-strong); }
#mobileSpeakerBtn.speaker-on .control-icon{ background:var(--accent-soft); color:var(--accent-strong); }
#mobileSpeakerBtn .icon-speaker{ display:none; }
#mobileSpeakerBtn.speaker-on .icon-earpiece{ display:none; }
#mobileSpeakerBtn.speaker-on .icon-speaker{ display:block; }
.control-btn.leave .control-icon{ background:#b91c1c; color:#fff; }
.control-btn.leave:hover .control-icon{ background:#a01717; }
.control-btn.leave .control-label{ color:#b91c1c; }
/* кнопки только для мобильных — на десктопе скрыты */
.mobile-speaker-btn,.mobile-participants-btn,.mobile-profile-btn{ display:none; }

/* ---------- emoji ---------- */
.emoji-picker{ position:fixed; z-index:960; bottom:100px; left:50%; transform:translateX(-50%);
  background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--sh-float); padding:12px; border:1px solid var(--line-soft); }
.emoji-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:6px; }
.emoji{ font-size:22px; cursor:pointer; padding:6px; border-radius:10px; transition:.12s; }
.emoji:hover{ background:var(--surface-muted); transform:scale(1.15); }

/* ---------- video settings ---------- */
.video-layout-options{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.video-layout-option{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:12px; border-radius:var(--r-md);
  border:2px solid var(--line-soft); cursor:pointer; transition:.15s; }
.video-layout-option.active{ border-color:var(--accent); background:var(--accent-soft); }
.layout-preview{ width:100%; aspect-ratio:16/10; display:grid; gap:3px; }
.gallery-preview,.grid-speaker-preview{ grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; }
.speaker-preview{ grid-template-columns:2fr 1fr; }
.preview-cell{ background:var(--ink-muted); border-radius:4px; opacity:.5; }
.preview-cell.highlighted,.preview-cell.main{ opacity:1; background:var(--accent); }

/* ============================================================
   АДАПТИВ
   ============================================================ */
@media (max-width:900px){
  .session-page{ grid-template-columns:1fr; grid-template-rows:auto 1fr auto;
    grid-template-areas:"top" "stage" "controls"; }
  .cx-side{ position:fixed; top:0; right:0; bottom:0; width:min(360px,88vw); z-index:800; border-radius:0;
    transform:translateX(105%); transition:transform .3s var(--ease); box-shadow:var(--sh-float); }
  .cx-side.mobile-visible{ transform:none; }
  .mobile-close-participants{ display:grid !important; }
  /* контрол-бар: все кнопки в один ряд, равные отступы от краёв и между собой */
  .controls-panel{ flex-wrap:nowrap; gap:0; padding:8px 6px; justify-content:space-evenly; overflow-x:auto; }
  .controls-group{ display:contents; }
  .controls-divider{ display:none; }
  .control-btn{ min-width:0; flex:0 0 auto; }
  .control-label{ display:none; }
  .control-icon{ width:44px; height:44px; }
  .mobile-speaker-btn,.mobile-participants-btn,.mobile-profile-btn{ display:flex; }
  /* уведомление ниже шапки, чтобы не перекрывать лого/аватар */
  .notification{ top:84px; max-width:calc(100vw - 28px); text-align:center; }
  /* видео-сетка на мобильном: ландшафтные плитки, не растянутые; вертикальный скролл */
  .video-grid{ grid-template-rows:none !important; grid-auto-rows:auto; align-content:start; }
  .video-grid:not(.has-focus) .video-tile{ aspect-ratio:16/10; }
  .video-container{ overflow-y:auto; }
  .video-grid.has-focus{ height:100%; }
  .video-grid.has-focus .video-tile.focused{ aspect-ratio:auto; height:100%; }
  /* главная: не даём горизонтального переполнения */
  .dpanel{ overflow-y:auto; overflow-x:hidden; padding:18px 14px; }
  .feature-row{ flex-direction:column; text-align:center; gap:18px; }
}
@media (max-width:520px){
  .side-rail{ width:60px; }
  .control-icon{ width:40px; height:40px; }
  /* плитки: 2 в ряд (Новая встреча + Присоединиться), Демонстрация на 2-й строке */
  .action-tiles{ gap:20px 16px; max-width:312px; }
  .tile{ width:138px; }
  .tile-ic{ width:82px; height:82px; }
  .tile-ic svg{ width:32px; height:32px; }
  .feature-ic{ width:84px; height:84px; }
  .feature-ic svg{ width:34px; height:34px; }
}