/* v5.26.89: phone-only finishing touches; preserve timeline, editor sections and video engine. */
@media (max-width:620px){
  /* Keep the existing draggable AI Assistant visible over the editor, not behind its surface. */
  html body:has(#proEditor:not([hidden])) #lumetraAssistantLauncher:not([hidden]){z-index:4100!important;touch-action:none!important;cursor:grab!important}
  html body #lumetraAssistantLauncher.userPositioned:not([hidden]){z-index:4100!important;touch-action:none!important}
  /* Use the available preview surface without imposing a different video aspect ratio. */
  html body #proEditor.mobileMonitorFocus .proMonitorStage{padding:0!important;overflow:hidden!important;align-items:center!important;justify-items:center!important;background:#000!important}
  html body #proEditor.mobileMonitorFocus .proMonitor{max-width:100%!important;max-height:100%!important;min-width:0!important;min-height:0!important;object-fit:contain!important;background:#000!important}
  html body #proEditor.mobileMonitorFocus .proMonitor video{object-fit:contain!important;max-width:100%!important;max-height:100%!important}
  /* Existing transport stays directly beneath the playing picture; no overlay over timeline. */
  html body #proEditor.mobileMonitorFocus .proPreviewDock{box-sizing:border-box!important;border-top:1px solid #202939!important}
  html body #proEditor.mobileMonitorFocus #proPreviewSeek{touch-action:pan-x!important}
  html body #proEditor.mobileMonitorFocus #proPlay{touch-action:manipulation!important}
}


/* v5.26.99: restore the real timeline and the media tracks in mobile monitor mode.
   Program Monitor must NEVER hide V1, FX1, C1, the splitter, or quick tools. */
@media(max-width:620px){
  html body #proEditor.mobileMonitorFocus{
    --mobile-tools-h:52px!important;
    --mobile-actions-h:0px;
    --mobile-splitter-h:10px!important;
    grid-template-rows:var(--mobile-header-h) minmax(0,1fr) 52px var(--mobile-actions-h) 10px var(--timeline-height) var(--mobile-nav-h)!important;
  }
  html body #proEditor.mobileMonitorFocus>.proWorkspace{
    display:grid!important;
    grid-row:2!important;
    grid-column:1!important;
    height:100%!important;
    min-height:0!important;
    width:100%!important;
    overflow:hidden!important;
  }
  html body #proEditor.mobileMonitorFocus .proMobileQuickTools{
    display:flex!important;
    grid-row:3!important;
    height:52px!important;
    min-height:52px!important;
    max-height:52px!important;
    overflow-x:auto!important;
  }
  html body #proEditor.mobileMonitorFocus .proTimelineSplitter{
    display:flex!important;
    grid-row:5!important;
    height:10px!important;
    min-height:10px!important;
    max-height:10px!important;
    overflow:hidden!important;
  }
  html body #proEditor.mobileMonitorFocus>.proTimeline{
    display:grid!important;
    grid-row:6!important;
    height:var(--timeline-height)!important;
    min-height:0!important;
    max-height:none!important;
    overflow:hidden!important;
    visibility:visible!important;
    opacity:1!important;
  }
  html body #proEditor.mobileMonitorFocus .proTimelineScroll,
  html body #proEditor.mobileMonitorFocus .proTimelineCanvas,
  html body #proEditor.mobileMonitorFocus #proTracks{
    visibility:visible!important;
    opacity:1!important;
  }
  html body #proEditor.mobileMonitorFocus .proCenter{
    display:flex!important;
    flex-direction:column!important;
    height:100%!important;
    min-height:0!important;
  }
  html body #proEditor.mobileMonitorFocus .proMonitorShell{
    flex:1 1 0!important;
    min-height:0!important;
    height:auto!important;
    grid-template-rows:minmax(0,1fr) 64px!important;
    padding:0 2px!important;
  }
  html body #proEditor.mobileMonitorFocus .proMonitorStage{
    height:100%!important;
    min-height:0!important;
    width:100%!important;
    place-items:center!important;
  }
  html body #proEditor.mobileMonitorFocus .proPreviewDock{
    position:relative!important;
    inset:auto!important;
    transform:none!important;
    flex:0 0 64px!important;
    height:64px!important;
    min-height:64px!important;
    padding:7px 8px 4px!important;
    margin:0!important;
    background:#080d14!important;
    border-top:1px solid #202939!important;
    box-shadow:none!important;
  }
  html body #proEditor.mobileMonitorFocus .proPreviewDock .proTransport{
    min-height:40px!important;
    height:40px!important;
    transform:none!important;
  }
  html body #proEditor.mobileMonitorFocus .proMonitor video{object-fit:contain!important}
  html body #proEditor .proMonitorShell.lumetraPhoneFullscreen{
    grid-template-rows:minmax(0,1fr) 64px!important;
  }
}

/* 5.27.00: Fill the ACTUAL Program Monitor workspace, eliminating the dead area
   below transport. Keep quick tools, timeline and navigation in their existing rows. */
@media (max-width:620px){
  html body #proEditor.mobileMonitorFocus > .proWorkspace{
    position:relative!important;
    display:block!important;
    min-height:0!important;
    height:100%!important;
    overflow:hidden!important;
  }
  html body #proEditor.mobileMonitorFocus > .proWorkspace > .proCenter{
    position:absolute!important;
    inset:0!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    overflow:hidden!important;
  }
  html body #proEditor.mobileMonitorFocus .proMobileMonitorTabs{
    position:absolute!important;
    left:0!important;right:0!important;top:0!important;
    height:43px!important;
    min-height:43px!important;
    z-index:2!important;
  }
  html body #proEditor.mobileMonitorFocus .proMonitorShell{
    position:absolute!important;
    top:43px!important;right:0!important;bottom:0!important;left:0!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    display:grid!important;
    grid-template-rows:minmax(0,1fr) 66px!important;
    overflow:hidden!important;
  }
  html body #proEditor.mobileMonitorFocus .proMonitorStage{
    height:100%!important;
    min-height:0!important;
    width:100%!important;
    padding:0!important;
    overflow:hidden!important;
    display:grid!important;
    place-items:center!important;
    background:#000!important;
  }
  html body #proEditor.mobileMonitorFocus .proPreviewDock{
    height:66px!important;
    min-height:66px!important;
    max-height:66px!important;
    flex:0 0 66px!important;
    margin:0!important;
    padding:6px 8px 5px!important;
    position:relative!important;
    inset:auto!important;
    transform:none!important;
    background:#080d14!important;
  }
  html body #proEditor.mobileMonitorFocus .proMonitorShell.lumetraPhoneFullscreen{
    position:fixed!important;
    top:0!important;right:0!important;bottom:0!important;left:0!important;
    height:100dvh!important;
    width:100vw!important;
    padding:max(2px,env(safe-area-inset-top)) 0 max(2px,env(safe-area-inset-bottom))!important;
    grid-template-rows:minmax(0,1fr) 66px!important;
  }
}