/* ==========================================================================
   MOBILE ISOLATION STYLESHEET (Only loaded on screens < 768px)
   ========================================================================== */

/* Optimize default touch and scrolling behaviors */
html {
  font-family: "Inter", sans-serif;
  scroll-behavior: smooth;
  scroll-padding-top: 20px;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden !important;
  max-width: 100% !important;
  width: 100% !important;
}

body {
  padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 16px)); /* Prevent text from being hidden behind the fixed bottom navbar */
  overflow-x: hidden !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* Ensure app-like feel in standalone/PWA mode */
body.is-pwa {
  user-select: none;
  -webkit-user-select: none;
}

/* Style adjustments for PWA mode */
.is-pwa .browser-clutter {
  display: none !important;
}

/* Slide in animation for bottom menu and modals */
@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

.animate-slideUp {
  animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Safe area support for notch phones */
.pb-safe {
  padding-bottom: env(safe-area-inset-bottom, 16px);
}