/*
 * Mobile player contract.
 *
 * The phone player is a viewport-native surface, not a scaled desktop NVR:
 * - the video always owns the entire available viewport;
 * - header and controls are independent overlays and never participate in
 *   desktop grid sizing;
 * - portrait Auto layouts favour taller mosaics to reduce letterboxing;
 * - safe-area insets are respected on iPhone and Android cut-out screens.
 */

@media (max-width: 760px), (max-width: 900px) and (pointer: coarse) {
  html:has(.multicam-dialog[open]),
  body:has(.multicam-dialog[open]) {
    width: 100%;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
  }

  .multicam-dialog[open],
  .multicam-dialog[open]:fullscreen,
  .multicam-dialog[open].is-expanded {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: #03070d;
  }

  .multicam-workspace,
  .multicam-workspace:fullscreen,
  .multicam-workspace:-webkit-full-screen {
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    display: block;
    overflow: hidden;
    background: #03070d;
  }

  .multicam-grid,
  .multicam-dialog[open] .multicam-grid,
  .multicam-dialog[open]:fullscreen .multicam-grid,
  .multicam-dialog[open].is-expanded .multicam-grid {
    position: absolute;
    z-index: 1;
    inset: 0;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    padding: 0;
    gap: 2px;
    align-content: center;
    justify-content: center;
    overflow: hidden;
    background: #03070d;
  }

  .multicam-tile,
  .multicam-dialog[open] .multicam-tile,
  .multicam-dialog[open] .multicam-dialog[data-layout="focus"] .multicam-tile.selected {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border-radius: 0;
    background: #03070d;
  }

  .multicam-tile video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    background: #03070d;
  }

  .multicam-dialog[data-mobile-hls="true"] .multicam-grid,
  .multicam-dialog[data-mobile-hls="true"][data-layout="grid"] .multicam-grid,
  .multicam-dialog[data-mobile-hls="true"][data-layout="focus"] .multicam-grid {
    grid-template: minmax(0, 1fr) / minmax(0, 1fr) !important;
  }

  /* Original streams: phone-first Auto layout matching the server mosaic. */
  .multicam-dialog[data-layout="grid"][data-grid-layout="auto"][data-camera-count="1"] .multicam-grid {
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  }

  .multicam-dialog[data-layout="grid"][data-grid-layout="auto"][data-camera-count="2"] .multicam-grid,
  .multicam-dialog[data-layout="grid"][data-grid-layout="auto"][data-camera-count="3"] .multicam-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(var(--mobile-camera-rows, 3), minmax(0, 1fr));
  }

  .multicam-dialog[data-layout="grid"][data-grid-layout="auto"][data-camera-count="2"] .multicam-grid {
    --mobile-camera-rows: 2;
  }

  .multicam-dialog[data-layout="grid"][data-grid-layout="auto"][data-camera-count="3"] .multicam-grid {
    --mobile-camera-rows: 3;
  }

  .multicam-dialog[data-layout="grid"][data-grid-layout="auto"][data-camera-count="4"] .multicam-grid,
  .multicam-dialog[data-layout="grid"][data-grid-layout="auto"][data-camera-count="5"] .multicam-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
  }

  .multicam-dialog[data-layout="grid"][data-grid-layout="auto"][data-camera-count="6"] .multicam-grid,
  .multicam-dialog[data-layout="grid"][data-grid-layout="auto"][data-camera-count="7"] .multicam-grid,
  .multicam-dialog[data-layout="grid"][data-grid-layout="auto"][data-camera-count="8"] .multicam-grid,
  .multicam-dialog[data-layout="grid"][data-grid-layout="auto"][data-camera-count="9"] .multicam-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
  }

  .multicam-dialog[data-layout="grid"][data-grid-layout="auto"][data-camera-count="4"] .multicam-tile:nth-child(-n + 2),
  .multicam-dialog[data-layout="grid"][data-grid-layout="auto"][data-camera-count="5"] .multicam-tile:first-child {
    grid-column: 1 / -1;
  }

  .multicam-dialog[data-layout="grid"][data-grid-layout="auto"][data-camera-count="6"] .multicam-tile:first-child,
  .multicam-dialog[data-layout="grid"][data-grid-layout="auto"][data-camera-count="7"] .multicam-tile:first-child,
  .multicam-dialog[data-layout="grid"][data-grid-layout="auto"][data-camera-count="8"] .multicam-tile:first-child {
    grid-column: span 6;
  }

  .multicam-dialog[data-layout="grid"][data-grid-layout="auto"][data-camera-count="6"] .multicam-tile:nth-child(n + 2):nth-child(-n + 3) {
    grid-column: span 3;
  }

  .multicam-dialog[data-layout="grid"][data-grid-layout="auto"][data-camera-count="6"] .multicam-tile:nth-child(n + 4) {
    grid-column: span 2;
  }

  .multicam-dialog[data-layout="grid"][data-grid-layout="auto"][data-camera-count="7"] .multicam-tile:not(:first-child) {
    grid-column: span 2;
  }

  .multicam-dialog[data-layout="grid"][data-grid-layout="auto"][data-camera-count="8"] .multicam-tile:nth-child(n + 2):nth-child(-n + 5) {
    grid-column: span 3;
  }

  .multicam-dialog[data-layout="grid"][data-grid-layout="auto"][data-camera-count="8"] .multicam-tile:nth-child(n + 6) {
    grid-column: span 2;
  }

  .multicam-dialog[data-layout="grid"][data-grid-layout="auto"][data-camera-count="9"] .multicam-tile:nth-child(-n + 6) {
    grid-column: span 3;
  }

  .multicam-dialog[data-layout="grid"][data-grid-layout="auto"][data-camera-count="9"] .multicam-tile:nth-child(n + 7) {
    grid-column: span 2;
  }

  .multicam-dialog[data-layout="focus"] .multicam-grid {
    grid-template: minmax(0, 1fr) / minmax(0, 1fr) !important;
  }

  .multicam-dialog[data-layout="focus"] .multicam-tile.selected {
    grid-area: 1 / 1;
  }

  .multicam-head {
    position: absolute;
    z-index: 20;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    min-height: 0;
    padding:
      max(6px, env(safe-area-inset-top))
      max(7px, env(safe-area-inset-right))
      7px
      max(9px, env(safe-area-inset-left));
    display: grid;
    grid-template-columns: minmax(0, 1fr) 36px;
    grid-template-rows: 38px 34px;
    grid-template-areas:
      "copy actions"
      "cameras cameras";
    align-items: center;
    gap: 4px 7px;
    border: 0;
    border-radius: 0 0 14px 14px;
    background: linear-gradient(180deg, rgba(5, 10, 18, .92), rgba(5, 10, 18, .72));
    box-shadow: 0 8px 28px rgba(0, 0, 0, .18);
    backdrop-filter: blur(18px) saturate(120%);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
  }

  .multicam-head-copy {
    grid-area: copy;
    min-width: 0;
    align-self: center;
  }

  .multicam-head-copy h2 {
    max-width: none;
    margin: 0;
    overflow: hidden;
    color: #f7f9fc;
    font-size: 16px;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .multicam-head-copy p {
    max-width: none;
    margin: 3px 0 0;
    overflow: hidden;
    color: rgba(213, 223, 236, .68);
    font-size: 9px;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .multicam-window-actions {
    grid-area: actions;
    justify-self: end;
  }

  .multicam-window-action.close {
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    border-radius: 10px;
    color: rgba(239, 245, 251, .88);
    background: rgba(255, 255, 255, .09);
  }

  .multicam-camera-nav {
    grid-area: cameras;
    width: 100%;
    min-width: 0;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .multicam-camera-nav::-webkit-scrollbar,
  .multicam-camera-strip::-webkit-scrollbar {
    display: none;
  }

  .multicam-camera-all,
  .multicam-camera-strip button {
    height: 32px;
    min-height: 32px;
    padding: 0 9px;
    flex: 0 0 auto;
    scroll-snap-align: start;
    border-radius: 9px;
    font-size: 10px;
  }

  .multicam-camera-strip {
    min-width: max-content;
    width: max-content;
    height: 32px;
    min-height: 32px;
    flex: 0 0 auto;
    justify-content: flex-start;
    overflow: visible;
  }

  .multicam-camera-strip strong {
    max-width: 128px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .multicam-controls,
  .multicam-dialog .multicam-controls,
  .multicam-dialog[data-quality-control="true"] .multicam-controls,
  .multicam-dialog[data-download-allowed="true"] .multicam-controls,
  .multicam-dialog[data-quality-control="true"][data-download-allowed="true"] .multicam-controls,
  .multicam-workspace:fullscreen .multicam-controls,
  .multicam-workspace:-webkit-full-screen .multicam-controls {
    position: absolute;
    z-index: 22;
    right: max(6px, env(safe-area-inset-right));
    bottom: max(6px, env(safe-area-inset-bottom));
    left: max(6px, env(safe-area-inset-left));
    width: auto;
    min-height: 72px;
    margin: 0;
    padding: 5px 8px 8px;
    display: grid;
    grid-template-columns:
      minmax(0, 1fr)
      34px 42px 34px
      42px 34px 34px 34px
      minmax(0, 1fr);
    grid-template-rows: 36px 22px;
    grid-template-areas:
      ". back toggle forward speed quality layout fullscreen ."
      "current timeline timeline timeline timeline timeline timeline timeline duration";
    align-items: center;
    column-gap: 3px;
    row-gap: 1px;
    border-radius: 18px;
    background: rgba(15, 29, 45, .66);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .08),
      0 12px 34px rgba(0, 0, 0, .30);
    backdrop-filter: blur(22px) saturate(125%);
    -webkit-backdrop-filter: blur(22px) saturate(125%);
    transform: none;
  }

  .multicam-dialog:not([data-quality-control="true"]) .multicam-controls {
    grid-template-columns:
      minmax(0, 1fr)
      34px 42px 34px
      42px 34px 34px
      minmax(0, 1fr);
    grid-template-areas:
      ". back toggle forward speed layout fullscreen ."
      "current timeline timeline timeline timeline timeline timeline duration";
  }

  .multicam-workspace .multicam-controls > button,
  .multicam-workspace .multicam-controls > details,
  .multicam-workspace .multicam-controls > details > summary,
  .multicam-workspace .multicam-controls .multicam-quality-control,
  .multicam-workspace .multicam-controls .multicam-quality-control > summary {
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
  }

  .multicam-workspace .multicam-controls #multicam-play {
    width: 42px;
    min-width: 42px;
    height: 36px;
    min-height: 36px;
  }

  .multicam-workspace .multicam-controls .multicam-speed-control,
  .multicam-workspace .multicam-controls .multicam-speed-control > summary {
    width: 42px;
    min-width: 42px;
  }

  .multicam-control-action svg,
  .multicam-workspace .multicam-grid-control > summary svg,
  .multicam-workspace #multicam-fullscreen svg {
    width: 19px;
    height: 19px;
  }

  #multicam-play svg {
    width: 29px;
    height: 29px;
  }

  .multicam-time {
    font-size: 10px;
  }

  .multicam-timeline-wrap {
    min-width: 0;
    height: 22px;
  }

  .multicam-timeline-wrap input {
    width: 100%;
  }

  .multicam-workspace .multicam-controls .playback-speed-options,
  .multicam-workspace .multicam-controls .multicam-grid-options {
    right: 0;
    left: auto;
    bottom: calc(100% + 7px);
    max-width: calc(100vw - 16px);
    max-height: min(58dvh, 310px);
    overflow-x: hidden;
    overflow-y: auto;
    transform: none;
    transform-origin: 100% 100%;
  }

  .multicam-label {
    top: calc(max(6px, env(safe-area-inset-top)) + 86px);
    bottom: auto;
    left: max(7px, env(safe-area-inset-left));
    max-width: calc(100% - 14px);
  }

  .multicam-scan-overlay {
    z-index: 21;
    bottom: calc(max(6px, env(safe-area-inset-bottom)) + 82px);
    max-width: calc(100% - 16px);
  }

  .multicam-dialog.is-playing:not(.show-overlays) .multicam-head,
  .multicam-dialog.is-playing:not(.show-overlays) .multicam-controls {
    opacity: 0;
    pointer-events: none;
  }

  .multicam-dialog.is-playing:not(.show-overlays) .multicam-controls {
    transform: none;
  }
}

@media (max-width: 390px) {
  .multicam-controls,
  .multicam-dialog .multicam-controls,
  .multicam-dialog[data-quality-control="true"] .multicam-controls,
  .multicam-dialog[data-download-allowed="true"] .multicam-controls,
  .multicam-dialog[data-quality-control="true"][data-download-allowed="true"] .multicam-controls {
    padding-inline: 6px;
    grid-template-columns:
      minmax(0, 1fr)
      30px 40px 30px
      39px 30px 30px 30px
      minmax(0, 1fr);
    column-gap: 2px;
  }

  .multicam-dialog:not([data-quality-control="true"]) .multicam-controls {
    grid-template-columns:
      minmax(0, 1fr)
      30px 40px 30px
      39px 30px 30px
      minmax(0, 1fr);
  }

  .multicam-workspace .multicam-controls > button,
  .multicam-workspace .multicam-controls > details,
  .multicam-workspace .multicam-controls > details > summary,
  .multicam-workspace .multicam-controls .multicam-quality-control,
  .multicam-workspace .multicam-controls .multicam-quality-control > summary {
    width: 30px;
    min-width: 30px;
  }

  .multicam-workspace .multicam-controls #multicam-play {
    width: 40px;
    min-width: 40px;
  }

  .multicam-workspace .multicam-controls .multicam-speed-control,
  .multicam-workspace .multicam-controls .multicam-speed-control > summary {
    width: 39px;
    min-width: 39px;
  }
}

/* Landscape phones use a shorter chrome and a wide Auto grid. */
@media (max-width: 900px) and (max-height: 520px) and (orientation: landscape) {
  .multicam-head {
    right: max(6px, env(safe-area-inset-right));
    left: max(6px, env(safe-area-inset-left));
    width: auto;
    padding-top: max(4px, env(safe-area-inset-top));
    grid-template-columns: minmax(118px, .7fr) minmax(0, 1.3fr) 34px;
    grid-template-rows: 36px;
    grid-template-areas: "copy cameras actions";
    border-radius: 0 0 12px 12px;
  }

  .multicam-camera-nav,
  .multicam-camera-strip {
    height: 30px;
    min-height: 30px;
  }

  .multicam-camera-all,
  .multicam-camera-strip button {
    height: 29px;
    min-height: 29px;
  }

  .multicam-controls,
  .multicam-dialog .multicam-controls,
  .multicam-dialog[data-quality-control="true"] .multicam-controls,
  .multicam-dialog[data-download-allowed="true"] .multicam-controls,
  .multicam-dialog[data-quality-control="true"][data-download-allowed="true"] .multicam-controls {
    right: max(8px, env(safe-area-inset-right));
    bottom: max(4px, env(safe-area-inset-bottom));
    left: max(8px, env(safe-area-inset-left));
    width: min(720px, calc(100% - max(16px, env(safe-area-inset-left) + env(safe-area-inset-right))));
    min-height: 66px;
    margin-inline: auto;
    padding-block: 3px 6px;
  }

  .multicam-dialog[data-layout="grid"][data-grid-layout="auto"][data-camera-count="2"] .multicam-grid {
    grid-template: minmax(0, 1fr) / repeat(2, minmax(0, 1fr));
  }

  .multicam-dialog[data-layout="grid"][data-grid-layout="auto"][data-camera-count="3"] .multicam-grid {
    grid-template: minmax(0, 1fr) / repeat(3, minmax(0, 1fr));
  }

  .multicam-dialog[data-layout="grid"][data-grid-layout="auto"][data-camera-count="4"] .multicam-grid {
    grid-template: repeat(2, minmax(0, 1fr)) / repeat(2, minmax(0, 1fr));
  }

  .multicam-dialog[data-layout="grid"][data-grid-layout="auto"][data-camera-count="4"] .multicam-tile,
  .multicam-dialog[data-layout="grid"][data-grid-layout="auto"][data-camera-count="7"] .multicam-tile:first-child,
  .multicam-dialog[data-layout="grid"][data-grid-layout="auto"][data-camera-count="8"] .multicam-tile:first-child {
    grid-column: auto;
  }

  .multicam-dialog[data-layout="grid"][data-grid-layout="auto"][data-camera-count="6"] .multicam-tile,
  .multicam-dialog[data-layout="grid"][data-grid-layout="auto"][data-camera-count="7"] .multicam-tile:not(:first-child),
  .multicam-dialog[data-layout="grid"][data-grid-layout="auto"][data-camera-count="8"] .multicam-tile:nth-child(n + 2),
  .multicam-dialog[data-layout="grid"][data-grid-layout="auto"][data-camera-count="9"] .multicam-tile {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .multicam-head,
  .multicam-controls {
    transition: none;
  }
}

/*
 * WebKit reliability guard.
 * Safari can keep a custom media-control-bar outside the painted layer until
 * its module is upgraded. Keep the controls and the initial preview explicitly
 * painted before playback starts.
 */
@media (max-width: 760px), (max-width: 900px) and (pointer: coarse) {
  .multicam-dialog[open] {
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
  }

  .multicam-dialog[open] .multicam-workspace {
    position: absolute !important;
    inset: 0 !important;
    width: auto;
    height: auto;
    min-height: 0;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    overflow: hidden;
  }

  .multicam-dialog[open] .multicam-head {
    position: relative;
    z-index: 20;
    inset: auto;
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    width: 100%;
    box-sizing: border-box;
    border-radius: 0;
  }

  .multicam-dialog[open] .multicam-grid {
    position: relative;
    z-index: 1;
    inset: auto;
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    height: 100%;
    min-height: 0;
    display: grid !important;
    visibility: visible;
    box-sizing: border-box;
  }

  .multicam-dialog[open] .multicam-tile {
    max-width: none;
    background-color: #03070d;
  }

  .multicam-dialog[open] media-control-bar.multicam-controls {
    position: relative !important;
    z-index: 30;
    inset: auto !important;
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    justify-self: center;
    width: calc(100% - 12px) !important;
    margin: 5px 6px max(6px, env(safe-area-inset-bottom)) !important;
    display: grid !important;
    visibility: visible;
    box-sizing: border-box;
  }

  .multicam-dialog[open]:not(.is-playing) media-control-bar.multicam-controls,
  .multicam-dialog[open].show-overlays media-control-bar.multicam-controls {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  .multicam-dialog[open].is-playing:not(.show-overlays) media-control-bar.multicam-controls {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: none !important;
  }

  .multicam-dialog[open] .mobile-hls-summary {
    display: none !important;
  }

  .multicam-dialog[open] .multicam-first-frame-state {
    display: grid;
  }

  /*
   * Timeline markers open their description above the range. Reserve a
   * dedicated band between playback actions and the timeline so clustered
   * DataMatrix information never covers the buttons or the range itself.
   */
  .multicam-dialog[open] media-control-bar.multicam-controls {
    min-height: 114px;
    padding-bottom: 10px;
    align-content: start;
    grid-template-rows: 38px 30px 24px !important;
  }

  .multicam-dialog[open] .multicam-timeline-wrap {
    grid-column: 2 / -2 !important;
    grid-row: 3 !important;
    align-self: center;
    transform: none;
  }

  .multicam-dialog[open] .multicam-time.current {
    grid-column: 1 !important;
    grid-row: 3 !important;
    align-self: center;
    transform: none;
  }

  .multicam-dialog[open] .multicam-time.duration {
    grid-column: -2 / -1 !important;
    grid-row: 3 !important;
    align-self: center;
    transform: none;
  }

  .multicam-dialog[open] .multicam-pause-marker::after {
    z-index: 6;
    max-width: min(270px, calc(100vw - 44px));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /*
   * Portrait "All cameras" is a vertical evidence feed. The first four
   * cameras retain their 16:9 size and the video area scrolls vertically,
   * instead of shrinking a desktop mosaic into a phone viewport.
   */
  @media (orientation: portrait) {
    /*
     * Focus mode has three real viewport bands: navigation, video and
     * playback controls. Unlike the mosaic, the single camera never sits
     * underneath either panel and is centred inside the remaining space.
     */
    .multicam-dialog[open][data-layout="focus"] .multicam-workspace {
      grid-template-rows: auto minmax(0, 1fr) auto !important;
    }

    .multicam-dialog[open][data-layout="focus"] .multicam-head {
      position: relative;
      grid-column: 1;
      grid-row: 1;
      align-self: start;
    }

    .multicam-dialog[open][data-layout="grid"] .multicam-grid {
      grid-template-columns: minmax(0, 1fr) !important;
      grid-template-rows: none !important;
      grid-auto-rows: auto !important;
      align-content: start;
      justify-content: stretch;
      padding: 0;
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior-y: contain;
      scroll-snap-type: y proximity;
      box-sizing: border-box;
      -webkit-overflow-scrolling: touch;
    }

    .multicam-dialog[open][data-layout="grid"] .multicam-tile {
      width: 100%;
      max-width: none;
      height: auto !important;
      aspect-ratio: 16 / 9;
      scroll-snap-align: start;
      flex: none;
    }

    .multicam-dialog[open][data-layout="grid"][data-mobile-hls="true"] .mobile-hls-tile {
      width: 100%;
      height: auto !important;
      aspect-ratio: var(--mobile-mosaic-aspect, 9 / 16);
    }

    .multicam-dialog[open][data-layout="grid"][data-mobile-hls="true"] .mobile-hls-tile video {
      width: 100%;
      max-width: none;
      height: 100%;
      object-fit: fill;
    }

    .multicam-dialog[open][data-layout="focus"] .multicam-grid {
      position: relative !important;
      inset: auto !important;
      grid-column: 1;
      grid-row: 2;
      width: 100% !important;
      height: 100% !important;
      min-height: 0 !important;
      display: block !important;
      padding: 0;
      overflow: hidden;
    }

    .multicam-dialog[open][data-layout="focus"] .multicam-tile.selected {
      position: absolute !important;
      inset: 0 !important;
      width: 100%;
      height: 100% !important;
      min-height: 100% !important;
      aspect-ratio: auto;
    }

    .multicam-dialog[open][data-layout="focus"] .multicam-tile.selected video {
      position: absolute;
      inset: 0;
      width: 100%;
      max-width: none;
      height: 100% !important;
      object-fit: contain;
    }

    .multicam-dialog[open][data-layout="focus"] media-control-bar.multicam-controls {
      position: relative !important;
      inset: auto !important;
      grid-column: 1;
      grid-row: 3;
      align-self: end;
      justify-self: center;
      margin-top: 0 !important;
    }
  }
}

/*
 * Mobile scrubbing uses a larger invisible touch lane and a clearly visible
 * thumb without making the timeline itself visually heavy. The panel stays
 * fixed while the finger is down.
 */
@media (max-width: 760px) {
  .multicam-dialog[open] media-control-bar.multicam-controls {
    min-height: 126px;
    grid-template-rows: 38px 30px 36px !important;
  }

  .multicam-dialog[open] .multicam-timeline-wrap {
    height: 36px;
    display: flex;
    align-items: center;
    touch-action: none;
  }

  .multicam-dialog[open] .multicam-timeline-wrap input {
    width: 100%;
    height: 36px;
    margin: 0;
    touch-action: none;
  }

  .multicam-dialog[open] .multicam-timeline-wrap input::-webkit-slider-runnable-track {
    height: 5px;
  }

  .multicam-dialog[open] .multicam-timeline-wrap input::-webkit-slider-thumb {
    width: 22px;
    height: 22px;
    margin-top: -8.5px;
    box-shadow: 0 1px 7px rgba(0, 0, 0, .42), 0 0 0 5px rgba(88, 167, 255, .12);
  }

  .multicam-dialog[open] .multicam-timeline-wrap input::-moz-range-track {
    height: 5px;
  }

  .multicam-dialog[open] .multicam-timeline-wrap input::-moz-range-thumb {
    width: 22px;
    height: 22px;
  }

  .multicam-dialog[open] .multicam-controls.is-scrubbing {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .multicam-dialog[open] .multicam-controls.is-scrubbing .multicam-time.current {
    color: #fff;
    background: rgba(88, 167, 255, .18);
    border-radius: 8px;
    padding: 5px 6px;
  }

  .multicam-dialog[open] .multicam-controls.is-scrubbing .multicam-timeline-wrap input::-webkit-slider-thumb {
    transform: scale(1.12);
    box-shadow: 0 1px 8px rgba(0, 0, 0, .45), 0 0 0 8px rgba(88, 167, 255, .18);
  }
}

/*
 * Final PWA safe-area guard. Keep the dialog itself behind the translucent
 * system bar (so its background stays dark), but place the entire playback
 * workspace below that bar. It must remain the final player rule because the
 * WebKit reliability section above also sets the workspace inset.
 */
@media (max-width: 760px) and (display-mode: standalone) {
  .multicam-dialog[open] .multicam-workspace {
    inset: env(safe-area-inset-top) 0 0 !important;
  }

  .multicam-dialog[open] .multicam-head {
    padding-top: 6px;
  }

  .multicam-dialog[open] .multicam-label {
    top: 92px;
  }
}