/* Hotfix: /messenger mobile left rail not tappable in browser mode.
   Keep existing layout; only adjust interaction layers. */

@media (max-width: 991px) {
  /* Never block taps at the container; hidden state is handled via visibility/transform. */
  .sidebar-toggle .main-nav {
    pointer-events: auto !important;
    z-index: 10050 !important;
  }

  /* iOS browser (incl. Google in-app) can incorrectly layer the overlay above the rail.
     Keep overlay below the rail, without changing visuals. */
  .bg-overlay,
  .bg-overlay.show {
    z-index: 10040 !important;
    touch-action: manipulation;
  }

  /* Critical: the overlay must NOT cover the 72px icon rail when open.
     Some iOS Chrome builds ignore z-index ordering due to stacking contexts. */
  .bg-overlay.show {
    left: 72px !important;
    width: calc(100vw - 72px) !important;
  }

  /* Ensure icons/links remain tappable even if parent stacking gets weird */
  .sidebar-toggle .main-nav * {
    pointer-events: auto !important;
  }
}