/* A shared, frame-external playback surface for independent and grouped media. */
.media-controls { display: flex; align-items: center; gap: 6px; min-height: 56px; padding: 4px 8px; margin: 0; border: 1px solid #e6e9e5; border-top: 0; border-radius: 0 0 15px 15px; background: rgb(244 246 243 / 92%); color: #434944; font-size: 11px; line-height: 1; font-variant-numeric: tabular-nums; opacity: .76; transition: opacity .2s; }
:is(.player, .view-player, .discriminator-player):hover > .media-controls, .media-controls:focus-within { opacity: 1; }
.media-controls button { display: grid; place-items: center; flex: 0 0 44px; width: 44px; min-height: 44px; padding: 11px; border: 0; border-radius: 50%; background: transparent; color: inherit; }
.media-controls button:hover { background: #e6ebe4; }
.media-controls svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.media-controls .media-toggle svg { fill: currentColor; }
.media-current, .media-duration { flex: 0 0 auto; min-width: 29px; white-space: nowrap; }
.media-seek, .media-volume { height: 44px; margin: 0; min-width: 0; accent-color: #718d73; cursor: pointer; }
.media-seek { flex: 1 1 80px; width: 80px; }
.media-volume { flex: 0 1 46px; width: 46px; }
.media-controls input[type="range"] { appearance: none; background: transparent; }
.media-controls input[type="range"]::-webkit-slider-runnable-track { height: 3px; background: #cbd3c8; border-radius: 3px; }
.media-controls input[type="range"]::-webkit-slider-thumb { appearance: none; width: 11px; height: 11px; margin-top: -4px; border-radius: 50%; background: #627d64; }
.media-controls input[type="range"]::-moz-range-track { height: 3px; background: #cbd3c8; border-radius: 3px; }
.media-controls input[type="range"]::-moz-range-thumb { width: 11px; height: 11px; border: 0; border-radius: 50%; background: #627d64; }
.player-frame { border-radius: 16px 16px 0 0; }
.video-message { bottom: 10px; }
.task-gallery .task-tabs, .task-gallery .row-navigation { width: min(var(--prose, 760px), 100%); margin-inline: auto; padding-inline: 0; }
.task-gallery .video-panel { width: min(var(--prose, 760px), 100%); margin-inline: auto; transition: width .4s cubic-bezier(.22,.7,.3,1); }
.task-gallery.gallery-expanded .video-panel { width: 100%; }
.success-players { padding-top: 0; touch-action: pan-x pan-y; }
.success-card { flex-basis: min(480px, calc(100vw - 40px)); }
.view-scroll { touch-action: pan-x pan-y; overscroll-behavior-x: contain; cursor: grab; }
.view-scroll.dragging { cursor: grabbing; user-select: none; }
.view-row { width: 1200px; min-width: 1200px; }
.view-player > .media-controls { border-top: 1px solid #e6e9e5; border-radius: 15px; margin-top: 8px; }
.player:fullscreen, .view-player:fullscreen { width: 100%; height: 100%; padding: 24px; background: #f5f6f4; display: flex; flex-direction: column; justify-content: center; }
.player:fullscreen .player-frame { max-height: calc(100dvh - 128px); width: 100%; aspect-ratio: auto; flex: 1; }
.player:fullscreen .player-meta { display: none; }
.view-player:fullscreen .view-row { width: 100%; min-width: 720px; }
.discriminator-player > .media-controls { border-radius: 0 0 15px 15px; }
.discriminator-player:fullscreen > .media-controls { flex: 0 0 56px; }
@media (max-width: 600px) {
  .media-controls { gap: 3px; padding-inline: 3px; flex-wrap: wrap; }
  .media-controls .media-seek { order: -1; flex: 0 0 calc(100% - 18px); width: calc(100% - 18px); margin-inline: 9px; height: 44px; }
  .media-controls .media-volume { flex: 1 1 35px; max-width: 80px; }
  .media-duration::before { content: '/ '; }
  .media-controls .media-mute { margin-left: auto; }
  .view-row { width: 720px; min-width: 720px; }
  .player:fullscreen, .view-player:fullscreen { padding: 10px; }
}
@media (hover: none) { .media-controls { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .media-controls, .task-gallery .video-panel { transition: none; } }