/* A single horizontal camera strip; no growing grid competing with the task. */
.classroom-shell .video-room .video-grid,
.case-team-panel .video-room .video-grid {
  display: flex; gap: 6px; min-height: 0; padding: 4px 8px;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.classroom-shell .video-room .video-grid::-webkit-scrollbar,
.case-team-panel .video-room .video-grid::-webkit-scrollbar { height: 0; }
.classroom-shell .video-room .video-tile,
.case-team-panel .video-room .video-tile {
  flex: 0 0 144px; width: 144px; height: 81px; min-height: 0; border-radius: 8px;
}
.classroom-shell .video-room .video-tile video,
.case-team-panel .video-room .video-tile video { display: block; }
.classroom-shell .video-room .video-tile b,
.case-team-panel .video-room .video-tile b {
  left: 3px; bottom: 3px; max-width: calc(100% - 6px); padding: 2px 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px;
}
.classroom-shell .video-room .video-placeholder,
.case-team-panel .video-room .video-placeholder { gap: 2px; font-size: 10px; }
.classroom-shell .video-room .video-placeholder svg,
.case-team-panel .video-room .video-placeholder svg { width: 18px; height: 18px; }
.classroom-shell .video-room .video-room-title,
.case-team-panel .video-room .video-room-title { padding: 2px 8px; gap: 8px; font-size: 12px; line-height: 14px; }
.classroom-shell .video-room .video-room-title span,
.case-team-panel .video-room .video-room-title span { line-height: 14px; }
.classroom-shell .video-room .video-room-title > div { min-width: 0; }
.classroom-shell .video-room .video-room-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.classroom-shell .video-room .video-room-title svg { width: 14px; height: 14px; flex-shrink: 0; }
.classroom-shell .video-room .video-controls,
.case-team-panel .video-room .video-controls { gap: 6px; padding: 4px 8px; }
.classroom-shell .video-room .video-controls button { min-height: 44px; font-size: 12px; }
.classroom-call-dock { margin-bottom: 12px; }

/* The same mounted call moves into reserved space; it does not cover the game. */
.classroom-shell:has(.classroom-call-dock[data-case-open="true"]) { --classroom-call-height: calc(174px + env(safe-area-inset-bottom)); }
.classroom-call-dock[data-case-open="true"] {
  position: fixed; inset: auto 0 0; z-index: 220; height: var(--classroom-call-height);
  padding: 2px 8px calc(2px + env(safe-area-inset-bottom)); margin: 0;
  background: var(--surface, #10120f); border-top: 1px solid var(--line);
  overflow-y: auto; overscroll-behavior: contain;
}
.classroom-call-dock[data-case-open="true"] > .video-room { border-radius: 10px; }
.classroom-shell:has(.classroom-call-dock[data-case-open="true"]) .game-overlay {
  bottom: var(--classroom-call-height); height: calc(var(--classroom-viewport-height, 100dvh) - var(--classroom-call-height));
  min-height: 0; max-height: calc(var(--classroom-viewport-height, 100dvh) - var(--classroom-call-height));
}
.classroom-shell:has(.classroom-call-dock[data-case-open="true"]) .case-team-panel { bottom: var(--classroom-call-height); max-height: calc(100dvh - var(--classroom-call-height) - 72px); }
/* Oversized task content scrolls inside its row, above the fixed game controls. */
.classroom-shell:has(.classroom-call-dock[data-case-open="true"]) .detailed-game .game-pages-viewport {
  overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: contain;
  scroll-padding-block: 12px; padding: 2px;
}
@media (max-width: 768px) {
  .classroom-shell .video-room .video-tile,
  .case-team-panel .video-room .video-tile { flex-basis: 112px; width: 112px; height: 63px; }
  .classroom-shell .video-room .video-controls { justify-content: flex-start; overflow-x: auto; }
  .classroom-shell .video-room .video-controls button { flex-shrink: 0; min-width: 44px; min-height: 48px; padding-inline: 8px; }
  .classroom-shell .video-room .video-controls .connection { flex: 0 0 20px; overflow: hidden; white-space: nowrap; font-size: 0; }
  .classroom-shell .video-room .video-controls .connection svg { width: 16px; height: 16px; }
  .classroom-shell:has(.classroom-call-dock[data-case-open="true"]) { --classroom-call-height: calc(156px + env(safe-area-inset-bottom)); }
}