#media-controls { display: none; gap: 8px; }

.section       { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.section-label { flex-shrink: 0; font-size: 11px; color: #9ca3af; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.grid          { flex: 1; display: flex; gap: 8px; min-height: 0; }

#grid-screen  .tile video { object-fit: contain; }           /* no cutoff, centred letterbox */
#grid-screen  .tile       { background: #000; }              /* fill letterbox areas */

/* Layout: screenshare section hidden until active (body.has-screen toggled by JS) */
#section-screen  { display: none; }
#section-cameras { flex: 1; }
body.has-screen #section-screen  { display: flex; flex: 3; } /* takes ~75% height when sharing */
body.has-screen #section-cameras { flex: 0 0 130px; }        /* small camera strip while sharing */
body.has-screen #grid-cameras    { overflow-x: auto; }        /* scroll if many cameras */
body.has-screen #grid-cameras .tile { flex: none; aspect-ratio: 16/9; } /* 16:9 tiles: cover fills exactly, no vertical crop */
body:not(.has-screen) .section-label { display: none; }      /* no labels when no split — matches helloworld.jsp */

/* OFFLINE overlay: shown on a member's camera tile when they are not LIVE (JS toggles .offline) */
.tile { position: relative; }                                /* anchor for the absolute overlay */
.offline-overlay {
  position: absolute; inset: 0;
  display: none;                                             /* hidden until the tile gets .offline */
  align-items: center; justify-content: center;
  font: 700 clamp(18px, 6vw, 44px)/1 system-ui, sans-serif;
  letter-spacing: 2px; color: #e5e7eb;
  background: rgba(6, 6, 6, 0.62);                           /* dim the black/preview video behind it */
  pointer-events: none;
}
.tile.offline .offline-overlay { display: flex; }

/* Media controls are greyed + non-interactive while you're exited from the room */
#media-controls button:disabled { opacity: .5; cursor: not-allowed; filter: grayscale(1); }