/* Phase 17 mobile/web hotfixes based on merged user fixes */
@media (min-width: 761px) {
  body[data-active-view="writer-app"] #sn-toolbar-btn {
    position: fixed !important;
    left: auto !important;
    top: auto !important;
    right: 18px !important;
    bottom: 18px !important;
  }
  body[data-active-view="writer-app"] #mode-indicator {
    bottom: 18px !important;
    right: 86px !important;
  }
  body[data-active-view="writer-app"] .editor-statusbar {
    bottom: 18px !important;
    max-width: calc(100% - 360px) !important;
  }
}

@media (max-width: 760px) {
  /* Use bottom dock on phones, not top tab strip */
  .nav-tabs,
  #project-nav,
  #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;
  }
  #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;
    scrollbar-width: none;
  }
  #bottom-nav .bottom-nav-inner::-webkit-scrollbar,
  #bottom-nav-inner::-webkit-scrollbar {
    display: none;
  }
  #bottom-nav .bottom-tab,
  #bottom-nav-inner .bottom-tab {
    flex: 0 0 auto !important;
  }

  header {
    height: calc(52px + var(--sat)) !important;
    padding: 0 8px !important;
    padding-top: var(--sat) !important;
  }
  .app-brand .brand-sub { display: none !important; }
  .header-actions {
    margin-left: auto !important;
    gap: 4px !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    min-width: 0 !important;
  }
  #writer-tools-cluster,
  #new-btn {
    display: none !important;
  }
  #settings-btn-wrap {
    display: inline-flex !important;
  }
  /* Tools dropdown and lock button are redundant on mobile —
     all tools + lock are accessible via the "..." overflow menu */
  #tools-menu-wrap,
  #cbx-top-lock-btn {
    display: none !important;
  }
  #settings-btn,
  #dark-toggle,
  #mobile-menu-btn,
  #user-btn {
    display: inline-flex !important;
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 5px 8px !important;
  }
  #user-btn.hidden { display: none !important; }
  #mobile-menu-btn { display: inline-flex !important; }

  /* Remove shell-level padding inflation, keep clearance where content actually scrolls */
  body[data-ui-tier="phone"] .view-container {
    padding-bottom: 0 !important;
  }
  body[data-ui-tier="phone"] .app-pad,
  body[data-ui-tier="phone"] #project-hub,
  body[data-ui-tier="phone"] #documentary-app,
  body[data-ui-tier="phone"] #adtreatment-app,
  body[data-ui-tier="phone"] #spatial-app {
    padding-top: 6px !important;
    padding-bottom: calc(var(--cbs-bottom-nav-height, 66px) + var(--sab) + 8px) !important;
  }

  /* Writer should reserve space inside the editor frame, not by shrinking the whole page */
  body[data-ui-tier="phone"] #writer-app {
    padding-bottom: 0 !important;
  }
  body[data-ui-tier="phone"] #writer-app .editor-frame {
    padding-bottom: calc(var(--cbs-bottom-nav-height, 66px) + var(--sab) + 96px) !important;
    scroll-padding-bottom: calc(var(--cbs-bottom-nav-height, 66px) + var(--sab) + 120px) !important;
  }
  body[data-ui-tier="phone"] #pages-container {
    min-height: 0 !important;
  }
  body[data-ui-tier="phone"] #writer-app .script-page-sheet {
    min-height: 0 !important;
    overflow: hidden !important;
  }
  body[data-ui-tier="phone"] #writer-app .page-content {
    min-height: 0 !important;
    height: 800px !important;
    overflow: hidden !important;
    overflow-y: clip !important;
  }

  /* Phone schedule: no sticky config slab covering the screen */
  #phase13-schedule-hint {
    display: none !important;
  }
  body[data-ui-tier="phone"] #schedule-app[data-phase13-mobile="true"] #schedule-config-bar {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  body[data-ui-tier="phone"] #schedule-app[data-phase13-mobile="true"] .sched-config-field:last-child {
    grid-column: 1 / -1 !important;
  }

  /* Documentary + ad treatment should fill the phone viewport more cleanly */
  body[data-ui-tier="phone"] #documentary-app > .doc-topbar,
  body[data-ui-tier="phone"] #adtreatment-app > .adt-commandbar {
    margin-top: 0 !important;
  }

  /* Spatial should keep its toolbar/dashboard visible on phones */
  body[data-ui-tier="phone"] #spatial-app {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-top: 0 !important;
  }
  body[data-ui-tier="phone"] #scc-binder {
    flex: 1 1 auto;
    min-height: 0;
  }
  body[data-ui-tier="phone"] #scc-toolbar {
    display: flex !important;
    top: 8px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    max-width: calc(100vw - 24px) !important;
    overflow-x: auto !important;
    scrollbar-width: none;
  }
  body[data-ui-tier="phone"] #scc-toolbar::-webkit-scrollbar { display: none; }
  body[data-ui-tier="phone"] #scc-temporal-bar {
    display: flex !important;
    padding: 0 10px !important;
  }
}

/* Fixpack: keep New Project visible in local mobile hub */
body[data-ui-tier="phone"] #new-btn,
html[data-ui-tier="phone"] #new-btn,
#new-btn {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}