/* v5.26.82: Program Monitor tab beside + New opens the real timeline preview. */
#proEditor #proProgramMonitorTab{white-space:nowrap;min-width:max-content;color:#d4b6ff;font-weight:700}
#proEditor #proProgramMonitorTab:focus-visible{outline:2px solid #a884f5;outline-offset:-2px}
@media(max-width:620px){
  #proEditor .proPanelTabs #proProgramMonitorTab{padding-inline:11px!important;border-radius:8px!important;color:#e5d0ff!important}
  #proEditor .proPanelTabs #proProgramMonitorTab::before{content:"▶";display:inline-block;margin-right:5px;font-size:10px;color:#b58bff}
}

/* v5.26.83: Program Monitor is a phone-only navigation affordance. */
@media(min-width:621px){#proEditor #proProgramMonitorTab{display:none!important}}
@media(max-width:620px){
  html body #proEditor .proMobilePreviewPlay{position:absolute!important;right:14px!important;bottom:14px!important;z-index:260!important;display:flex!important;align-items:center!important;justify-content:center!important;min-width:94px!important;min-height:42px!important;border:1px solid rgba(194,154,255,.7)!important;border-radius:999px!important;background:rgba(30,19,52,.91)!important;color:#fff!important;font-size:12px!important;font-weight:750!important;box-shadow:0 3px 15px rgba(0,0,0,.35)!important;touch-action:manipulation!important}
  html body #proEditor .proMonitorStage{position:relative!important}
  html body #proEditor .proMobileClipActions:not([hidden]){display:flex!important;visibility:visible!important;opacity:1!important;z-index:330!important}
  html body #proEditor .proMediaPanel:not(.mobileOpen){display:none!important}
  html body #proEditor.mobileMonitorFocus .proCenter{visibility:visible!important;opacity:1!important}
}
@media(min-width:621px){#proEditor .proMobilePreviewPlay{display:none!important}}

/* v5.26.84: persistent accessible mobile preview and import browser; no hidden navigation under overlays. */
@media(min-width:621px){#proEditor #proMobileMonitorShortcut{display:none!important}}
@media(max-width:620px){
 html body #proEditor #proMobileMonitorShortcut{display:inline-flex!important;align-items:center;justify-content:center;border:1px solid #53417a!important;background:#241633!important;color:#ebd6ff!important;border-radius:10px!important;padding:7px 9px!important;font-size:11px!important;font-weight:700!important;white-space:nowrap!important;min-height:36px!important;position:relative!important;z-index:105!important}
 html body #proEditor .proTop{gap:7px!important}
 html body #proEditor .proTop>div:first-of-type{flex:1 1 auto!important;min-width:0!important}
 html body #proEditor #proProjectName{max-width:100%!important;width:100%!important}
 html body #proEditor .proTopActions{flex:0 0 auto!important}
 html body #proEditor .proMediaPanel.mobileOpen .proMediaActions #proImport{display:inline-flex!important}
 html body #proEditor.mobileMonitorFocus .proCenter,html body #proEditor.mobileMonitorFocus .proMonitorShell,html body #proEditor.mobileMonitorFocus .proMonitorStage,html body #proEditor.mobileMonitorFocus .proMonitor{display:grid!important;visibility:visible!important;opacity:1!important}
 html body #proEditor.mobileMonitorFocus #proVideo{visibility:visible!important;opacity:1!important}
 html body #proEditor .proPreviewDock{display:grid!important;visibility:visible!important;opacity:1!important}
 html body #proEditor #proMobilePreviewPlay{z-index:10!important}
 /* The main Lumetra menu and backdrop must live above full-screen editing. */
 html body #sidebar.open{z-index:40010!important;visibility:visible!important}
 html body #scrim:not(.hidden){z-index:40000!important}
}

@media(min-width:621px){#proEditor #proMobileMediaImportButton{display:none!important}}
@media(max-width:620px){html body #proEditor #proMobileMediaImportButton{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-width:65px!important;white-space:nowrap!important;color:#f0dcff!important;font-weight:700!important}}

/* 5.26.85: monitor button stays reachable as the media tabs wrap on narrow iPhones. */
@media(max-width:620px){html body #proEditor .proPanelTabs{display:flex!important;flex-wrap:wrap!important;gap:4px!important;height:auto!important;min-height:50px!important}html body #proEditor #proProgramMonitorTab{display:inline-flex!important;align-items:center!important;min-height:38px!important}html body #proEditor .proMobileClipActions:not([hidden]){min-height:48px!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}}

/* 5.26.86: keep the real Monitor tab visible while its preview is open.
   Mirror the media tab destinations in the preview surface; the existing
   functional controls (import/projects/new/monitor) remain the only handlers. */
#proEditor .proMobileMonitorTabs{display:none!important}
@media(max-width:620px){
 html body #proEditor.mobileMonitorFocus .proCenter{display:flex!important;flex-direction:column!important;min-height:0!important}
 html body #proEditor.mobileMonitorFocus .proMobileMonitorTabs{display:flex!important;flex:0 0 43px!important;min-height:43px!important;width:100%!important;align-items:stretch!important;gap:0!important;overflow-x:auto!important;overflow-y:hidden!important;-webkit-overflow-scrolling:touch!important;scrollbar-width:none;background:#0b1119!important;border-bottom:1px solid #293246!important}
 html body #proEditor.mobileMonitorFocus .proMobileMonitorTabs button{flex:1 0 auto!important;min-width:0!important;white-space:nowrap!important;border:0!important;border-bottom:3px solid transparent!important;padding:8px 7px!important;background:transparent!important;color:#b9bdcb!important;font-size:11px!important;font-weight:600!important;line-height:20px!important}
 html body #proEditor.mobileMonitorFocus .proMobileMonitorTabs button.active{color:#fff!important;border-bottom-color:#a267fa!important}
 html body #proEditor.mobileMonitorFocus .proMonitorShell{flex:1 1 auto!important;min-height:0!important;height:auto!important;width:100%!important;grid-template-rows:minmax(0,1fr) 66px!important}
 html body #proEditor.mobileMonitorFocus .proPreviewDock{display:flex!important;flex-direction:column!important;min-height:66px!important;height:66px!important;padding:7px 7px 2px!important;background:#080d14!important;overflow:visible!important}
 html body #proEditor.mobileMonitorFocus #proPreviewSeek{position:relative!important;inset:auto!important;top:auto!important;left:auto!important;width:100%!important;height:13px!important;flex:0 0 13px!important;accent-color:#a267fa!important}
 html body #proEditor.mobileMonitorFocus .proPreviewDock .proTransport{display:flex!important;position:relative!important;width:100%!important;min-height:42px!important;height:42px!important;gap:8px!important;justify-content:space-between!important;align-items:center!important}
 html body #proEditor.mobileMonitorFocus #proPlay{display:inline-flex!important;position:relative!important;visibility:visible!important;min-width:36px!important;height:36px!important;align-items:center!important;justify-content:center!important;font-size:17px!important;border:1px solid #263247!important;border-radius:9px!important;background:#111827!important;color:#fff!important}
 html body #proEditor.mobileMonitorFocus #proTC{display:inline-block!important;font-size:11px!important;color:#e0e3ed!important;white-space:nowrap!important;order:2!important}
 html body #proEditor.mobileMonitorFocus .proPreviewVolume{display:flex!important;visibility:visible!important;align-items:center!important;order:3!important}
 html body #proEditor.mobileMonitorFocus #proPreviewMute{display:flex!important;visibility:visible!important;align-items:center!important;justify-content:center!important;min-width:29px!important;height:30px!important}
 html body #proEditor.mobileMonitorFocus .proTransportTools{display:flex!important;position:relative!important;inset:auto!important;align-items:center!important;width:auto!important;order:4!important;pointer-events:auto!important}
 html body #proEditor.mobileMonitorFocus #proFullscreen{display:inline-flex!important;visibility:visible!important;pointer-events:auto!important;min-width:29px!important;height:30px!important}
 html body #proEditor.mobileMonitorFocus #proMobilePreviewPlay{display:none!important}
 html body #proEditor .proMediaPanel.mobileOpen .proPanelTabs #proMobileMediaImportButton,html body #proEditor .proMediaPanel.mobileOpen .proPanelTabs #proProgramMonitorTab{font-size:11px!important;font-weight:600!important;line-height:20px!important;border-radius:0!important;padding:8px 7px!important}
 html body #proEditor .proMediaPanel.mobileOpen .proPanelTabs #proProgramMonitorTab::before{display:none!important}
}