/* =============================================================================
   vc-grid.css — Discord-style voice-channel grid.

   OWNERSHIP: same as js/vc-grid.js. Nothing here overrides an existing app
   selector; every rule is scoped under .vcg so it cannot leak into the rest of
   the client or fight the room code's own .vr-* styles.
   ========================================================================== */

/* Palette is pulled from the app's own tokens so the room inherits the theme,
   with hard fallbacks so the module also stands alone in a bare page. */
:host, .vcg, .vcg-root {
  --vcg-stage: #000000;
  --vcg-tile: #1c2027;
  --vcg-tile-hi: #242932;
  --vcg-line: rgba(255, 255, 255, 0.07);
  --vcg-text: #dbdee1;
  --vcg-muted: #949ba4;
  --vcg-red: #f23f43;
  --vcg-ring: #23a55a;
  --vcg-disc-a: #cfe6f5;
  --vcg-disc-b: #9dc85a;
}

/* The root element js/vc-grid.js actually creates carries the class `vcg`. It must be the
   positioning context for the absolutely-placed .vcg-top / .vcg-bar. It is deliberately NOT a
   flex column with flex:1: .vr-body has no display:flex, so flex:1 would resolve against an
   auto height and collapse. Everything inside is content-sized instead. */
.vcg, .vcg-root {
  position: relative;
  display: block;
}

/* ---- stage: the black area the tiles sit in ----
   Content-sized, NOT flex-filled. `.vr-body` in styles.css is `flex: 1; overflow-y: auto` with no
   `display: flex`, so a flex chain here would never receive a bounded height and the stage would
   collapse to zero. layout() assigns every tile an explicit px height, so the grid is already as
   tall as it needs to be and the stage just wraps it - the same way the legacy room sizes itself
   from `aspect-ratio` rather than from flex. min-height keeps it usable before the first layout. */
.vcg-stage {
  position: relative;
  display: block;
  min-height: 320px;
  background: var(--vcg-stage);
  border-radius: 10px;
  padding: 18px;
}

.vcg-grid {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 12px;
  overflow-y: auto;
  scrollbar-width: thin;
}

/* ---- one participant ---- */
.vcg-tile {
  position: relative;
  background: var(--vcg-tile);
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.15s ease, box-shadow 0.15s ease;
  isolation: isolate;
}
.vcg-tile:hover { background: var(--vcg-tile-hi); }

/* Live video replaces the disc inside the same card, like Discord. */
.vcg-tile-vid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  z-index: 1;
}
.vcg-tile.live .vcg-tile-vid { opacity: 1; }
.vcg-tile.live .vcg-tile-face { opacity: 0; }

/* The circular avatar disc, centred. */
.vcg-tile-face {
  width: 42%;
  aspect-ratio: 1 / 1;
  max-width: 132px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 34%, var(--vcg-disc-a) 0%, var(--vcg-disc-a) 46%, transparent 47%),
    linear-gradient(180deg, #dceefa 0%, #dceefa 52%, var(--vcg-disc-b) 53%, #6d9b34 100%);
  background-size: cover;
  background-position: center;
  color: #2b3038;
  font-size: clamp(20px, 4.2vw, 40px);
  font-weight: 700;
  display: grid;
  place-items: center;
  z-index: 2;
  transition: opacity 0.15s ease;
}
.vcg-tile-face.has-photo { color: transparent; }

/* Speaking ring - the mixer's level, server-driven. */
.vcg-tile-ring {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  box-shadow: inset 0 0 0 3px transparent;
  pointer-events: none;
  z-index: 3;
  transition: box-shadow 0.12s linear, opacity 0.12s linear;
}
.vcg-tile.speaking .vcg-tile-ring {
  box-shadow: inset 0 0 0 3px var(--vcg-ring);
}

/* Mute badge, bottom-left. */
.vcg-tile-badge {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 4;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  display: grid;
  place-items: center;
}
.vcg-tile-badge[hidden] { display: none; }

/* Name plate, bottom-centre-ish. */
.vcg-tile-tag {
  position: absolute;
  left: 44px;
  right: 12px;
  bottom: 12px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--vcg-text);
  font-size: 12.5px;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
.vcg-tile-kind { display: none; color: var(--vcg-text); flex: 0 0 auto; }
.vcg-tile.sharing .vcg-tile-kind { display: inline-flex; }
.vcg-tile-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- spotlight view (top-right toggle) ---- */
.vcg-spot {
  position: absolute;
  inset: 18px;
  border-radius: 14px;
  background: #05070a;
  display: grid;
  place-items: center;
  overflow: hidden;
  z-index: 5;
}
.vcg-spot[hidden] { display: none; }
.vcg-spot-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.vcg-spot-face {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 34%, var(--vcg-disc-a) 0%, var(--vcg-disc-a) 46%, transparent 47%),
    linear-gradient(180deg, #dceefa 0%, #dceefa 52%, var(--vcg-disc-b) 53%, #6d9b34 100%);
  background-size: cover;
  background-position: center;
  color: #2b3038;
  font-size: 44px;
  font-weight: 700;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 2;
}
.vcg-spot-name {
  position: absolute;
  left: 14px;
  bottom: 12px;
  z-index: 3;
  color: var(--vcg-text);
  font-size: 13px;
  font-weight: 600;
  background: rgba(0, 0, 0, 0.55);
  padding: 4px 10px;
  border-radius: 8px;
}
.vcg-spot.live .vcg-spot-face { opacity: 0; }

.vcg-empty {
  margin: auto;
  color: var(--vcg-muted);
  font-size: 14px;
}
.vcg-empty[hidden] { display: none; }

/* ---- top-right controls (grid / spotlight / fullscreen) ---- */
.vcg-top {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 6;
  display: flex;
  gap: 4px;
}
.vcg-top-btn {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--vcg-muted);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.vcg-top-btn:hover { background: rgba(255, 255, 255, 0.08); color: var(--vcg-text); }
.vcg-top-btn.sel { color: var(--vcg-text); background: rgba(255, 255, 255, 0.1); }

/* ---- floating control bar: five red pills ---- */
.vcg-bar {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 7;
  display: flex;
  gap: 12px;
  padding: 10px;
  border-radius: 999px;
  background: rgba(20, 22, 26, 0.92);
  backdrop-filter: blur(8px);
  border: 1px solid var(--vcg-line);
}
.vcg-ctrl {
  width: 62px;
  height: 40px;
  border: 0;
  border-radius: 12px;
  background: var(--vcg-red);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: filter 0.12s ease, transform 0.08s ease;
}
.vcg-ctrl:hover { filter: brightness(1.12); }
.vcg-ctrl:active { transform: scale(0.95); }
.vcg-ctrl.on { background: #ffffff; color: #16181d; }
.vcg-ctrl.vcg-danger { background: var(--vcg-red); }
.vcg-ctrl.vcg-danger:hover { filter: brightness(1.15); }

/* HD is a text chip, not a glyph - it carries the entitlement state. */
.vcg-hd-btn {
  width: 46px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
}
.vcg-hd-btn.locked { opacity: 0.5; }

/* ---- "+ Add page" bar ---- */
.vcg-pager {
  flex: 0 0 auto;
  margin-top: 10px;
}
.vcg-pager[hidden] { display: none; }
.vcg-addpage {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 14px;
  border: 1px solid var(--vcg-line);
  border-radius: 9px;
  background: transparent;
  color: var(--vcg-text);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.vcg-addpage:hover { background: rgba(255, 255, 255, 0.04); }
.vcg-addpage-chev { position: absolute; right: 12px; color: var(--vcg-muted); }
.vcg-addpage { position: relative; }

/* ---- integration with the legacy room (js/app.js) -------------------------
   The room still builds its .vr-label / .vr-stage-main / .vr-strip / .vr-bar, and still owns the
   tile map that voiceTrackFrame writes into - the grid is a second consumer of that pipeline. When
   the grid is mounted, app.js adds .vcg-on to .vr-body and the legacy chrome steps aside. Nothing
   here touches a selector outside the voice room, and removing .vcg-on restores the old layout
   intact. .vr-bar belongs in the list too: it is the six round buttons, and the grid's pill bar
   repeats every one of them - the two lists must agree or the room shows both control bars. */
/* The host is a plain block, and it now fills the room rather than wrapping the grid's own height.
   .vr-body is flex:1 inside .voice-room (position:absolute; inset:0), so it has a definite height
   and a percentage on the child resolves against it - no flex chain, which is what the earlier note
   here was warning about. It matters because .vcg-bar is absolutely placed at bottom:22px of the
   root: while the root was content-sized that put the control bar at the bottom of the tile grid
   with the rest of the panel hanging empty underneath, so the controls sat in the middle of the
   voice panel instead of at its foot. Filling the room is what drops them to the bottom, the way
   Discord's sit. */
.vr-body .vr-vchost { display: none; }
.vr-body.vcg-on .vr-vchost { display: block; height: 100%; }
.vr-body.vcg-on .vcg,
.vr-body.vcg-on .vcg-root { height: 100%; }
.vr-body.vcg-on .vcg-stage { height: 100%; overflow: hidden; }
/* The grid scrolls inside the stage instead of growing it, and the bottom padding keeps the last
   row of tiles clear of the bar that now floats over the same box. */
.vr-body.vcg-on .vcg-grid { height: 100%; padding-bottom: 88px; }
.vr-body.vcg-on .vr-label,
.vr-body.vcg-on .vr-stage-main,
.vr-body.vcg-on .vr-strip,
.vr-body.vcg-on .vr-bar { display: none; }

/* ---- narrow screens ---- */
@media (max-width: 720px) {
  .vcg-stage { padding: 12px; }
  .vcg-grid { gap: 8px; }
  .vcg-tile { border-radius: 14px; }
  .vcg-bar { gap: 8px; padding: 8px; bottom: 14px; }
  .vcg-ctrl { width: 50px; height: 36px; border-radius: 10px; }
  .vcg-spot { inset: 12px; }
}
@media (max-width: 420px) {
  .vcg-ctrl { width: 44px; height: 34px; }
  .vcg-tile-tag { display: none; }
}