/* Mobile UX polish: small, CSS-only refinements for clearer touch ergonomics. */
@media (max-width: 760px) {
  :root {
    --phase61-surface: rgba(255, 252, 246, 0.92);
    --phase61-border: rgba(139, 100, 48, 0.16);
    --phase61-shadow: 0 18px 42px rgba(61, 39, 12, 0.16);
  }

  body.phase61-mobile-ux header {
    backdrop-filter: blur(18px) saturate(1.08);
    box-shadow: 0 8px 28px rgba(75, 52, 20, 0.12);
  }

  body.phase61-mobile-ux #bottom-nav {
    background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(250,244,232,.96)) !important;
    border-top: 1px solid rgba(126, 91, 42, .15) !important;
    box-shadow: 0 -18px 36px rgba(55, 37, 13, .12);
  }

  body.phase61-mobile-ux #bottom-nav-inner {
    gap: 8px !important;
    padding: 7px 10px calc(7px + env(safe-area-inset-bottom, 0px)) !important;
    scroll-padding-inline: 28px;
  }

  body.phase61-mobile-ux #bottom-nav .bottom-tab,
  body.phase61-mobile-ux #bottom-nav .bottom-nav-btn {
    min-width: 58px !important;
    min-height: 46px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(124, 90, 42, .11);
    background: rgba(255,255,255,.58);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
  }

  body.phase61-mobile-ux header :where(button, [role="button"], .icon-btn) {
    min-width: 40px;
    min-height: 40px;
  }

  body.phase61-mobile-ux #bottom-nav .bottom-tab.active,
  body.phase61-mobile-ux #bottom-nav .bottom-nav-btn.active {
    min-width: 112px !important;
    background: linear-gradient(135deg, #fff6df, #eef5ff) !important;
    border-color: rgba(65, 117, 210, .32);
    box-shadow: 0 10px 24px rgba(45, 98, 196, .18), inset 0 1px 0 rgba(255,255,255,.9);
  }

  body.phase61-mobile-ux #mobile-overflow-menu.open {
    backdrop-filter: blur(10px);
  }

  body.phase61-mobile-ux #overflow-sheet {
    border-radius: 28px 28px 0 0 !important;
    background:
      radial-gradient(circle at 14% 0%, rgba(255, 214, 128, .20), transparent 34%),
      linear-gradient(180deg, rgba(255, 253, 249, .98), rgba(248, 241, 229, .98)) !important;
    border: 1px solid var(--phase61-border);
    box-shadow: var(--phase61-shadow);
    padding: 14px 14px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.phase61-mobile-ux #overflow-sheet > div[style*="uppercase"] {
    margin-top: 8px;
    color: #7b5a2f !important;
  }

  body.phase61-mobile-ux #overflow-sheet button {
    justify-content: flex-start;
    min-height: 46px !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,.78) !important;
    border: 1px solid rgba(128, 92, 43, .12) !important;
    color: #3d2a14 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
  }

  body.phase61-mobile-ux #overflow-sheet button:active {
    transform: translateY(1px) scale(.99);
  }

  body.phase61-mobile-ux :where(input, select, textarea) {
    min-height: 44px;
    border-radius: 14px;
  }

  body.phase61-mobile-ux .view-container {
    padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important;
    scroll-padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.phase61-mobile-ux :where(
    #corkboard-app,
    #reports-app,
    #storyboard-app,
    #locations-app,
    #wardrobe-app,
    #stripboard-app,
    #schedule-app,
    #char-builder-app,
    #callsheet-app,
    #shotlist-app,
    #pcc-app,
    #spatial-app,
    #seriesroom-app,
    #podcast-app,
    #musicvideo-app,
    #adtreatment-app,
    #documentary-app,
    #festival-app
  ) {
    padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)) !important;
    scroll-padding-bottom: calc(124px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.phase61-mobile-ux #writer-app .editor-frame {
    padding-bottom: calc(98px + env(safe-area-inset-bottom, 0px)) !important;
    scroll-padding-bottom: calc(160px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.phase61-mobile-ux #spatial-app {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: calc(100dvh - 58px - env(safe-area-inset-bottom, 0px)) !important;
    height: calc(100dvh - 58px - env(safe-area-inset-bottom, 0px)) !important;
    overflow: hidden !important;
  }

  body.phase61-mobile-ux #scc-binder {
    flex: 1 1 auto !important;
    min-height: calc(100dvh - 202px - env(safe-area-inset-bottom, 0px)) !important;
    height: auto !important;
  }

  body.phase61-mobile-ux #scc-toolbar {
    max-width: calc(100vw - 24px) !important;
  }

  body.phase61-mobile-ux #scc-temporal-bar {
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.phase61-mobile-ux #char-builder-app :where(.char-stab, .char-tab, .p38-tab, [data-char-tab]) {
    min-width: max-content !important;
    min-height: 42px !important;
    padding-inline: 12px !important;
    white-space: nowrap !important;
  }

  body.phase61-mobile-ux #char-builder-app :where(.char-tabs, .p38-tabs, .char-builder-tabs) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-padding-inline: 14px;
  }

  body.phase61-mobile-ux #locations-app input[type="color"] {
    width: 44px !important;
    min-width: 44px !important;
    padding: 4px !important;
  }

  body.phase61-mobile-ux #locations-app :where(button, a[role="button"], a[href], [role="button"]) {
    min-width: 40px !important;
    min-height: 40px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  body.phase61-mobile-ux #storyboard-app select,
  body.phase61-mobile-ux #locations-app :where(input, select) {
    min-height: 42px !important;
  }

  body.phase61-mobile-ux #mobile-format-bar[style*="display: flex"] {
    display: flex !important;
  }

  body.phase61-mobile-ux :where(.modal, .final-modal-card, [role="dialog"]) {
    max-width: calc(100vw - 24px) !important;
  }

  body.phase61-mobile-ux .final-modal-card {
    border-radius: 24px !important;
    box-shadow: var(--phase61-shadow) !important;
  }

  body.phase61-mobile-ux [data-final-type],
  body.phase61-mobile-ux .final-type-card {
    min-height: 74px !important;
    border-radius: 18px !important;
  }

  #phase61-typewriter-fab {
    position: fixed;
    right: 14px;
    bottom: calc(var(--cbs-bottom-nav-height, 66px) + env(safe-area-inset-bottom, 0px) + 14px);
    z-index: 6200;
    display: none;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    padding: 10px 13px;
    border: 1px solid rgba(39, 96, 187, .28);
    border-radius: 999px;
    background: linear-gradient(135deg, #ffffff, #edf5ff);
    color: #2053b7;
    font-weight: 900;
    box-shadow: 0 14px 30px rgba(31, 78, 157, .22);
  }

  #phase61-typewriter-fab.visible {
    display: inline-flex;
  }

  #phase61-typewriter-fab.active {
    background: linear-gradient(135deg, #245fd1, #102d71);
    color: #fff;
    border-color: rgba(255,255,255,.38);
  }

  #phase61-typewriter-fab span {
    font-size: 1rem;
  }

  #phase61-typewriter-fab strong {
    font-size: .76rem;
    letter-spacing: .01em;
  }

  body.phase61-mobile-ux.typewriter-mode #writer-app .script-page-sheet,
  body.phase61-mobile-ux.typewriter-mode #writer-app .page-content {
    box-shadow: 0 0 0 2px rgba(37, 99, 235, .16), 0 18px 44px rgba(39, 61, 92, .16) !important;
  }
}

@media (min-width: 761px) {
  #phase61-typewriter-fab {
    display: none !important;
  }
}