/* Mobile drawer usability and transparent form panels - 20260730 */
@media (max-width: 820px) {
  /* The fixed bottom navigation was covering form action buttons. */
  #mobileBottomNav,
  .mobile-bottom-nav {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body {
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
}

@media (max-width: 900px) {
  /* Keep the drawer toggle visible in both states. */
  body.mobile-scene-entered.mobile-has-bottom-drawer .mobile-drawer-toggle,
  body.mobile-scene-entered.mobile-drawer-expanded .mobile-drawer-toggle,
  body.mobile-scene-entered.mobile-drawer-collapsed .mobile-drawer-toggle {
    display: inline-flex !important;
    visibility: visible !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  body.mobile-scene-entered.mobile-drawer-expanded .mobile-drawer-toggle {
    background: rgba(26, 67, 56, .76) !important;
    border-color: rgba(244, 227, 173, .68) !important;
    color: #fff7dd !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .23) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }

  /* Make all mobile input boards translucent so the moving scenery remains visible. */
  body.mobile-scene-entered #tab-bazi.tab-panel > .card:first-child,
  body.mobile-scene-entered #tab-heqin.tab-panel > .card:first-child,
  body.mobile-scene-entered #tab-zeri.tab-panel > .card:first-child,
  body.mobile-scene-entered #tab-naming.tab-panel > .card:first-child {
    background: linear-gradient(
      180deg,
      rgba(244, 239, 218, .24),
      rgba(222, 232, 218, .14)
    ) !important;
    border-color: rgba(242, 224, 169, .34) !important;
    box-shadow: 0 -12px 32px rgba(5, 24, 21, .20) !important;
    backdrop-filter: blur(5px) saturate(1.04) !important;
    -webkit-backdrop-filter: blur(5px) saturate(1.04) !important;
  }

  body.mobile-scene-entered.mobile-drawer-collapsed #tab-bazi.tab-panel > .card:first-child,
  body.mobile-scene-entered.mobile-drawer-collapsed #tab-heqin.tab-panel > .card:first-child,
  body.mobile-scene-entered.mobile-drawer-collapsed #tab-zeri.tab-panel > .card:first-child,
  body.mobile-scene-entered.mobile-drawer-collapsed #tab-naming.tab-panel > .card:first-child {
    background: rgba(23, 61, 51, .48) !important;
    border-color: rgba(242, 224, 169, .28) !important;
  }

  body.mobile-scene-entered #tab-bazi input,
  body.mobile-scene-entered #tab-bazi select,
  body.mobile-scene-entered #tab-bazi textarea,
  body.mobile-scene-entered #tab-heqin input,
  body.mobile-scene-entered #tab-heqin select,
  body.mobile-scene-entered #tab-heqin textarea,
  body.mobile-scene-entered #tab-zeri input,
  body.mobile-scene-entered #tab-zeri select,
  body.mobile-scene-entered #tab-zeri textarea,
  body.mobile-scene-entered #tab-naming input,
  body.mobile-scene-entered #tab-naming select,
  body.mobile-scene-entered #tab-naming textarea {
    background: rgba(255, 255, 255, .38) !important;
    border-color: rgba(116, 104, 69, .30) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
  }

  body.mobile-scene-entered #tab-bazi input:focus,
  body.mobile-scene-entered #tab-bazi select:focus,
  body.mobile-scene-entered #tab-heqin input:focus,
  body.mobile-scene-entered #tab-heqin select:focus,
  body.mobile-scene-entered #tab-zeri input:focus,
  body.mobile-scene-entered #tab-zeri select:focus,
  body.mobile-scene-entered #tab-naming input:focus,
  body.mobile-scene-entered #tab-naming select:focus {
    background: rgba(255, 255, 255, .54) !important;
  }
}