/* App shell on phones / small tablets (< 1024px).

   - The dark sidebar becomes an off-canvas drawer (hamburger in a slim top bar).
   - Director Studio stacks its three panes and shows one at a time, switched by a
     bottom tab bar (Scenes · Editor · Player). Desktop layout is untouched. */
#mobileBar, #mobileTabs, #sbBackdrop { display: none; }

@media (max-width: 1023px) {
  /* drawer */
  #sidebar {
    position: fixed !important; left: 0; top: 0; height: 100dvh !important; width: 272px !important;
    transform: translateX(-100%); transition: transform .25s ease; z-index: 60;
  }
  #sidebar.collapsed { width: 272px !important; }
  #sidebar.collapsed .sb-full { display: revert; }
  #sidebar.collapsed .sb-mini { display: none !important; }
  #sidebar.open { transform: none; box-shadow: 0 0 0 100vmax rgba(0,0,0,.45); }
  #sidebarToggle { display: none; }
  #sbBackdrop.show { display: block; position: fixed; inset: 0; z-index: 55; }

  /* slim top bar with the hamburger */
  #mobileBar {
    display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 12px;
    background: #0e241b; color: #f6f9f7; position: sticky; top: 0; z-index: 40; flex-shrink: 0;
  }
  #mobileBar .mb-title { font-weight: 600; font-size: 14px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #mobileBar button { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #f6f9f7; }
  #mobileBar button:hover { background: #16382a; }

  main { padding: 16px !important; }

  /* Director Studio: stacked panes, one visible at a time */
  #editorView { height: 100dvh !important; }
  #editorView > header { height: auto !important; padding: 8px 12px !important; flex-wrap: wrap; gap: 8px; }
  #editorView > header h1 { font-size: 16px !important; max-width: 60vw !important; }
  #editorView > header #viewToggle, #editorView > header #directorNotice { display: none !important; }
  #editorView > header #saveBtn { padding: 6px 10px; }
  #editorView > header #approveBtn { padding: 8px 12px; font-size: 12px; }
  #editorView > header #approveBtn span { display: none; }
  #editorView > header #approveBtn::after { content: "Generate"; }
  #leftPane, #detailWrap, #playerWrap { width: 100% !important; max-width: none !important; border-right: 0 !important; }
  #leftPane, #detailWrap, #playerWrap, #playerRail, #playerCollapse { display: none !important; }
  body.mp-scenes #leftPane { display: flex !important; }
  body.mp-editor #detailWrap { display: flex !important; }
  body.mp-player #playerWrap { display: flex !important; }
  #pFrame, #pTools { max-width: min(100%, 420px) !important; }

  #mobileTabs {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    background: #fff; border-top: 1px solid #e2ece6; flex-shrink: 0;
  }
  #mobileTabs button { padding: 8px 4px; border-radius: 10px; font-size: 12px; font-weight: 600; color: #52705f; }
  #mobileTabs button.on { background: #10794f; color: #fff; }

  /* lightbox / expanded player: the desktop width calc (100vw − 96px − 404px) collapses on phones,
     so the video vanished. Fill the screen and stack the script panel under it instead. */
  #lightbox { padding: 10px !important; align-items: flex-start !important; overflow-y: auto !important; }
  #lightbox > div, #lightbox .lb-row { flex-direction: column !important; width: 100% !important; gap: 10px !important; }
  #lightbox #pFrame { width: 100% !important; max-width: 100% !important; }
  #lightbox #pFrame #pCanvas { max-height: 68vh; }
  #lbPanel { width: 100% !important; max-height: 34vh !important; }
}