/* Navigation and chat spacing for the local design preview. */
#mobile-drawer {
  max-width: calc(100vw - 16px);
  max-height: 100vh;
  max-height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
}
#mobile-drawer > * { flex-shrink: 0; }
#mobile-drawer:not(.open) { visibility: hidden; pointer-events: none; }
#mobile-drawer.open { visibility: visible; pointer-events: auto; }
#drawer-close { min-width: 44px; min-height: 44px; }
.vw-drawer-open #vwc-launcher,
.vw-drawer-open #vwc-tooltip { visibility: hidden; pointer-events: none; }

@media (max-width: 768px) {
  #mobile-bar { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  body.vw-has-mobile-bar {
    padding-bottom: var(--vw-mobile-bar-height, calc(80px + env(safe-area-inset-bottom, 0px)));
  }
  .vw-has-mobile-bar #vwc-launcher {
    bottom: calc(var(--vw-mobile-bar-height, calc(80px + env(safe-area-inset-bottom, 0px))) + 12px);
  }
  .vw-has-mobile-bar #vwc-tooltip {
    bottom: calc(var(--vw-mobile-bar-height, calc(80px + env(safe-area-inset-bottom, 0px))) + 76px);
  }
}

@media (prefers-reduced-motion: reduce) {
  #mobile-drawer { transition: none; }
}