/* Recording player (admin panel and shared-link page). Each fullscreen
   selector has its own rule: a browser that does not know one of them would
   drop a whole selector list, and the bar would fall off the screen. */
.meet-play-wrap { background:#000; border-radius:.75rem; overflow:hidden; }
.meet-play-stage { position:relative; overflow:hidden; aspect-ratio:16/9; background:#000; }
.meet-play-stage video { display:block; width:100%; height:100%; max-width:none; object-fit:contain; background:#000; cursor:pointer; }
.meet-play-stage.is-zoomed video { cursor:grab; touch-action:none; }

/* View menu over the picture (same as a shared screen in a call). */
.meet-play-view { position:absolute; top:10px; right:10px; z-index:2; display:flex; align-items:center; gap:4px; padding:3px; border-radius:9999px; background:rgba(0,0,0,.62); }
.meet-play-view button { min-width:34px; height:34px; padding:0 6px; border:0; border-radius:9999px; background:transparent; color:#fff; font-size:14px; font-weight:700; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.meet-play-view button:hover:not(:disabled) { background:rgba(255,255,255,.18); }
.meet-play-view button:disabled { opacity:.4; cursor:default; }
.meet-play-view button.is-on { background:#d97706; }
.meet-play-level { font-size:12px !important; font-variant-numeric:tabular-nums; }
.meet-play-bar { display:flex; align-items:center; gap:8px; padding:8px 10px; background:#1c1917; color:#e7e5e4; }
.meet-play-bar button { flex:0 0 auto; width:36px; height:36px; border:0; border-radius:9999px; background:#292524; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.meet-play-bar button:hover { background:#44403c; }
.meet-play-time { flex:0 0 auto; min-width:88px; text-align:center; font-size:12px; font-variant-numeric:tabular-nums; }
.meet-play-seek { flex:1 1 auto; min-width:60px; accent-color:#d97706; cursor:pointer; }
.meet-play-volume { flex:0 0 auto; width:80px; accent-color:#d97706; cursor:pointer; }
.meet-play-rate { flex:0 0 auto; border:0; border-radius:8px; background:#292524; color:#fff; font-size:12px; font-weight:700; padding:6px; cursor:pointer; }

/* Fullscreen: the video takes what is left above the bar, which stays on screen. */
.meet-play-wrap.is-fs { display:flex; flex-direction:column; width:100vw; height:100vh; height:100dvh; border-radius:0; }
.meet-play-wrap.is-fs .meet-play-stage { flex:1 1 auto; width:100%; height:0; min-height:0; aspect-ratio:auto; }
.meet-play-wrap.is-fs .meet-play-bar { flex:0 0 auto; background:rgba(8,8,8,.9); padding-bottom:max(8px, env(safe-area-inset-bottom)); }

/* Narrow screens (phones): the seek bar takes its own full-width row on top
   and the buttons sit below it, so nothing is squeezed or cut off. The volume
   slider goes (the phone has its own volume keys); mute stays. */
@media (max-width:560px) {
  .meet-play-bar { flex-wrap:wrap; row-gap:6px; column-gap:6px; padding:8px 8px 10px; }
  .meet-play-seek { order:-1; flex:1 0 100%; min-width:0; margin:0; height:22px; }
  .meet-play-time { min-width:0; margin-right:auto; text-align:left; }
  .meet-play-bar button { width:34px; height:34px; }
  .meet-play-volume { display:none; }
}