:root{ --app-vh:1vh; --cols:3; --ring:rgba(255,255,255,.12); --muted:#a7abb1; }
html,body{height:100%} body{margin:0; background:#0b0e14; color:#fff; font:16px/1.4 system-ui,-apple-system,Inter,Segoe UI,Roboto,Arial}
.grow{flex:1}

.stage--full{ position:relative; width:100%; height:calc(var(--app-vh,1vh) * 100); background:#000; overflow:hidden; }

/* Top */
.topbar{
  position:fixed; left:0; right:0; top:0; z-index:1001;
  display:flex; align-items:center; gap:10px;
  padding: calc(8px + env(safe-area-inset-top)) 12px 8px;
  background:linear-gradient(to bottom,rgba(0,0,0,.65),rgba(0,0,0,0));
}
.roomtitle{ font-weight:700; background:rgba(0,0,0,.35); padding:6px 10px; border-radius:10px; outline:1px solid var(--ring); }
.peoplebar{ display:flex; gap:6px; flex-wrap:wrap; }
.peoplebar .badge{ font-size:12px; padding:4px 8px; border-radius:10px; background:rgba(255,255,255,.08); outline:1px solid var(--ring); }
.peoplebar .badge.you{ background:#2563eb; }

/* Grid with max 4 columns (controlled from JS via --cols) */
.remotes{
  position:absolute; inset:0;
  padding-top:72px;
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
  height: 100%;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(var(--cols, 3), 1fr);
  grid-template-rows: repeat(var(--rows, 1), minmax(0, 1fr));
  align-content: stretch; justify-content: stretch;
}
.tile{
  position:relative; width:100%; height:100%; max-height:100vh;
  background:#000; border-radius:12px; outline:1px solid var(--ring);
  overflow:hidden; display:grid; place-items:center;
}
.tile video{ width:100%; height:100%; object-fit:contain; display:block; }
.tile .label{
  position:absolute; left:8px; bottom:8px; z-index:2;
  font-size:12px; padding:3px 6px; border-radius:8px;
  background:rgba(0,0,0,.45); outline:1px solid var(--ring);
}
.tile.active{ outline:2px solid #22c55e; } /* активный докладчик — зелёная рамка */

/* HUD */
.hud{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom: calc(12px + env(safe-area-inset-bottom));
  display:flex; gap:10px; padding:8px;
  border-radius:16px; z-index:1000;
  background:rgba(20,22,28,.45); backdrop-filter:saturate(120%) blur(8px);
  outline:1px solid var(--ring);
  transition:opacity .18s ease, transform .18s ease;
}
.hud.hidden{ opacity:0; pointer-events:none; transform:translate(-50%, 8px); }
.hud__btn{ display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:12px; border:0; background:rgba(255,255,255,.08); color:#fff; outline:1px solid var(--ring); cursor:pointer }
.hud__btn--danger{ background:rgba(239,68,68,.9) }

.status--float{
  position:fixed; left:50%; top: calc(44px + env(safe-area-inset-top));
  transform:translateX(-50%); z-index:1002;
  padding:6px 10px; border-radius:12px;
  background:rgba(23,26,33,.7); backdrop-filter: blur(6px);
  outline:1px solid var(--ring); font-size:14px;
}

/* Name modal */
.modal{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.65); backdrop-filter: blur(6px); z-index:1200; }
.modal.hide{ display:none; }
.modal__box{ width:min(520px,90vw); background:rgba(255,255,255,.08); border-radius:16px; outline:1px solid var(--ring); padding:16px; text-align:center; }
.modal__box h2{ margin:0 0 12px 0; }
.modal__input{ width:100%; padding:12px 14px; border-radius:10px; border:0; outline:1px solid var(--ring); background:#11141b; color:#fff; margin-bottom:12px; font-size:16px; }
.cta{ border:0; border-radius:12px; padding:12px 18px; background:#3b82f6; color:#fff; font-weight:800; cursor:pointer; }

/* utils */
.sr{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
@media (max-width:860px){ :root{ --cols:2 } }
@media (max-width:540px){ :root{ --cols:1 } }

/* Экран — широкая плитка на всю строку + PiP внизу справа */
.tile--screen{
  grid-column: 1 / -1;
  position: relative;
}
.tile--screen video{ background:#000; }
.tile__pip{
  position:absolute; right:10px; bottom:12px; z-index:3;
  width:min(22vw, 240px); aspect-ratio:16/9;
  border-radius:10px; overflow:hidden;
  outline:1px solid var(--ring);
  opacity:.88;
  backdrop-filter: blur(2px);
}
.tile__pip video{ width:100%; height:100%; object-fit:cover; display:block; }