/* Phase 16e: desktop/mobile regression fixes */

/* Desktop tab bar: keep horizontal scrolling and allow compact tabs to reveal labels */
@media (min-width: 761px) {
  #project-nav,
  .nav-tabs {
    overflow-x: auto !important;
    overflow-y: visible !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
    min-width: 0 !important;
  }
  #project-nav::-webkit-scrollbar,
  .nav-tabs::-webkit-scrollbar { display: none; }

  body.cbs-header-compact #project-nav .tab-label {
    display: inline-block !important;
    max-width: 0 !important;
    opacity: 0;
    overflow: hidden;
    margin-left: 0;
    vertical-align: middle;
    transition: max-width .18s ease, opacity .12s ease, margin-left .18s ease;
  }
  body.cbs-header-compact #project-nav .tab:hover,
  body.cbs-header-compact #project-nav .tab:focus-visible,
  body.cbs-header-compact #project-nav .tab.active {
    min-width: auto !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    padding-left: 12px !important;
    padding-right: 14px !important;
  }
  body.cbs-header-compact #project-nav .tab:hover .tab-label,
  body.cbs-header-compact #project-nav .tab:focus-visible .tab-label,
  body.cbs-header-compact #project-nav .tab.active .tab-label {
    max-width: 120px !important;
    opacity: 1;
    margin-left: 6px;
  }

  /* Desktop writer: remove dead bottom floor while keeping caret clearance */
  body[data-active-view="writer-app"] .view-container {
    padding-bottom: 0 !important;
  }
  body[data-active-view="writer-app"] #writer-app,
  body[data-active-view="writer-app"] #writer-app .editor-column,
  body[data-active-view="writer-app"] #writer-app .editor-frame {
    min-height: 0 !important;
    height: 100% !important;
  }
  body[data-active-view="writer-app"] #writer-app .editor-frame {
    padding-bottom: 24px !important;
    scroll-padding-bottom: 100px !important;
  }


  /* ── Desktop writer: unified bottom-right cluster ──────────────────────────
     On desktop, mode-indicator (bottom-right), editor-statusbar (bottom-center),
     and the script-notes FAB all share bottom:18px and can collide on narrow
     windows. We shift mode-indicator and the notes FAB upward to sit in a clean
     vertical stack, and give editor-statusbar a minimum gap from the right edge.  */

  /* Move the mode-indicator to sit above the statusbar so they never overlap */
  body[data-active-view="writer-app"] #mode-indicator {
    bottom: 68px !important;   /* statusbar is ~38px tall + 18px base + 12px gap */
    right: 18px !important;
  }

  /* Notes FAB sits above mode-indicator */
  body[data-active-view="writer-app"] #sn-toolbar-btn {
    bottom: 124px !important;  /* mode-indicator ~44px + 68px base + 12px gap */
    right: 18px !important;
  }

  /* Statusbar: keep centered but ensure it doesn't overlap the right cluster */
  body[data-active-view="writer-app"] .editor-statusbar {
    bottom: 18px !important;
    /* shift left slightly to avoid collision with right-anchored elements */
    max-width: calc(100% - 200px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  /* Ensure cine-app and others fill the view-container height via flex */
  .view-container > #cine-app {
    height: auto !important;   /* let flex:1 in phase16e handle the fill */
  }

  /* Full-width app panes that were not included in earlier flex-fill rules */
  .view-container > :where(#cine-app, #shotlist-app, #heatmap-app, #budget-app) {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
  }
  #cine-app,
  #shotlist-app,
  #heatmap-app,
  #budget-app,
  #cine-panel-shots,
  #cine-panel-gaffer,
  #cine-panel-analytics {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* Phone/mobile: restore bottom dock and hide crowded desktop header tabs */
@media (max-width: 760px) {
  header {
    height: calc(52px + var(--sat)) !important;
    padding: 0 10px !important;
    padding-top: var(--sat) !important;
  }
  .nav-tabs,
  #project-nav {
    display: none !important;
  }
  /* Hide tab scroll arrows — tabs are hidden on mobile, arrows serve no purpose */
  .tab-scroll-btn,
  #tab-scroll-left,
  #tab-scroll-right {
    display: none !important;
  }
  #bottom-nav {
    display: block !important;
    max-height: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #mobile-menu-btn {
    display: inline-flex !important;
  }

  #bottom-nav .bottom-nav-inner,
  #bottom-nav-inner {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x proximity;
    padding-inline: 4px !important;
  }
  #bottom-nav .bottom-tab,
  #bottom-nav-inner .bottom-tab {
    flex: 0 0 auto !important;
    min-width: 54px !important;
    max-width: none !important;
    transition: min-width .16s ease, padding .16s ease, background .16s ease;
  }
  #bottom-nav .bottom-tab .btab-label,
  #bottom-nav-inner .bottom-tab .btab-label {
    display: inline-block !important;
    max-width: 0 !important;
    opacity: 0;
    overflow: hidden;
    transition: max-width .18s ease, opacity .12s ease, margin-left .18s ease;
    margin-left: 0;
  }
  #bottom-nav .bottom-tab.active,
  #bottom-nav-inner .bottom-tab.active {
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 96px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  #bottom-nav .bottom-tab.active .btab-label,
  #bottom-nav-inner .bottom-tab.active .btab-label {
    max-width: 86px !important;
    opacity: 1;
    margin-left: 2px;
  }

  /* Restore mobile clearance relationships for docked UI */
  .view-container {
    padding-bottom: calc(var(--cbs-bottom-nav-height, 66px) + var(--sab) + 6px) !important;
  }
  .app-pad {
    padding-bottom: calc(14px + var(--cbs-bottom-nav-height, 66px) + var(--sab)) !important;
  }
  #goal-bar {
    bottom: calc(var(--cbs-bottom-nav-height, 66px) + var(--sab) + 8px) !important;
  }
  .snapshot-toast {
    bottom: calc(var(--cbs-bottom-nav-height, 66px) + env(safe-area-inset-bottom, 0px) + 16px) !important;
  }

  /* Show dark-mode toggle and user/login button on mobile — they were hidden
     by the 760px rule in app-core-shell because the old layout had tabs in the header.
     Now that tabs are in the bottom dock, the header has room for these controls. */
  #dark-toggle {
    display: inline-flex !important;
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 4px !important;
    font-size: 1rem !important;
  }
  #user-btn:not(.hidden) {
    display: flex !important;
  }
  /* Keep settings button visible too */
  #settings-btn {
    display: inline-flex !important;
  }
}

/* ── PHASE19 SUPPLEMENTAL FIXES ───────────────────────────────────────────── */

/* Fix: script page always fills content on mobile — no JS class needed.
   Overrides the base height:1056px without requiring cbs-writer-phone class. */
@media (max-width: 760px) {
  .script-page-sheet {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  .page-content {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  /* Ensure editor frame scrolls properly */
  .editor-frame {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}