/* ════════════════════════════════════════════════════════════
   Android PWA / installed webapp shell hardening — v3.5.11
   Keeps Android Chrome standalone looking like a native webapp instead of
   a centered browser page, while preserving the existing iPhone polish.
   ════════════════════════════════════════════════════════════ */
:root {
  --app-vh: 100dvh;
  --app-vw: 100vw;
}

html,
body {
  width: 100%;
  min-width: 100%;
  min-height: 100dvh;
  background: var(--bg, #000);
  overscroll-behavior: none;
}

html.bm-android,
html.bm-android body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--bg, #000);
  -webkit-tap-highlight-color: transparent;
}

html.bm-android body {
  min-height: var(--app-vh, 100dvh);
  touch-action: manipulation;
}

html.bm-android #app,
html.bm-android.bm-standalone #app {
  width: 100vw;
  width: var(--app-vw, 100vw);
  max-width: none;
  min-height: var(--app-vh, 100dvh);
  height: var(--app-vh, 100dvh);
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--bg, #000);
  overflow: hidden;
}

html.bm-android .topbar,
html.bm-android .bottom-nav {
  left: 0;
  right: 0;
  max-width: none;
  margin: 0;
}

html.bm-android .screen.active {
  min-height: var(--app-vh, 100dvh) !important;
  height: var(--app-vh, 100dvh) !important;
  overflow: hidden !important;
}

html.bm-android .scroll-content,
html.bm-android #home-content,
html.bm-android #events-content,
html.bm-android #collections-content,
html.bm-android #discover-feed,
html.bm-android #news-content,
html.bm-android .ai-messages {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
  touch-action: pan-y !important;
}

html.bm-android .h-scroll,
html.bm-android .filter-row,
html.bm-android .ds-chip-rail,
html.bm-android .news-rail,
html.bm-android .category-row,
html.bm-android .restaurant-carousel {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-x: contain !important;
  /* v3.5.26 — pan-x pan-y (not pan-x alone): Android rejects diagonal swipes
     under pan-x, making rails feel stuck. pan-x pan-y lets native horizontal
     scroll AND vertical page scroll both work. */
  touch-action: pan-x pan-y !important;
}

/* v3.5.15 — IA chat restaurant suggestions must NOT be a nested horizontal
   swipe container inside the (vertically scrolling) chat body. Keep them as the
   clean 2-column grid defined in ai/ai-chat.css and let touches pan the page
   vertically. This removes the Android swipe/scroll trap. */
html.bm-android #bm-ai-root .bm-ai-cards {
  overflow-x: visible !important;
  overflow-y: visible !important;
  touch-action: pan-y !important;
}

html.bm-android.bm-standalone .topbar {
  padding-top: max(var(--safe-top, 0px), env(safe-area-inset-top, 0px));
}

html.bm-android.bm-standalone .bottom-nav {
  padding-bottom: max(var(--safe-bottom, 0px), env(safe-area-inset-bottom, 0px));
}

@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
  body[data-app="mobile"] #app {
    width: 100vw;
    max-width: none;
    margin: 0;
    border-radius: 0;
  }
}

/* ════════════════════════════════════════════════════════════
   v3.5.12 — Android/iOS parity: force true mobile shell on touch Android
   even when Chrome reports a tablet/desktop CSS viewport. These rules are
   intentionally strong because earlier @media(min-width:768px) rules switch
   #app to a desktop/tablet grid and make everything look tiny.
   ════════════════════════════════════════════════════════════ */
html.bm-force-mobile-shell,
html.bm-force-mobile-shell body {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: var(--app-vh, 100dvh) !important;
  min-height: var(--app-vh, 100dvh) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  font-size: 16px !important;
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
  background: var(--bg, #000) !important;
}

html.bm-force-mobile-shell body[data-app="mobile"] #app,
html.bm-force-mobile-shell #app {
  display: block !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  width: 100vw !important;
  width: var(--app-vw, 100vw) !important;
  max-width: 430px !important;
  min-width: 0 !important;
  height: var(--app-vh, 100dvh) !important;
  min-height: var(--app-vh, 100dvh) !important;
  margin: 0 auto !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: var(--bg, #000) !important;
}

/* On wide Android foldables/tablets keep the app-shaped iOS-like viewport,
   not the desktop website. Phones naturally use 100vw because viewport <430. */
@media (min-width: 431px) {
  html.bm-force-mobile-shell body {
    background: var(--bg, #000) !important;
  }
}

html.bm-force-mobile-shell .topbar,
html.bm-force-mobile-shell .bottom-nav {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: 100vw !important;
  width: min(100vw, 430px) !important;
  max-width: 430px !important;
  margin: 0 !important;
  display: flex !important;
  grid-column: auto !important;
  grid-row: auto !important;
}

html.bm-force-mobile-shell .topbar {
  top: 0 !important;
  height: calc(56px + env(safe-area-inset-top, 0px)) !important;
  padding-top: env(safe-area-inset-top, 0px) !important;
}

html.bm-force-mobile-shell .bottom-nav {
  bottom: 0 !important;
  height: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}

html.bm-force-mobile-shell .screen {
  display: none !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: var(--app-vh, 100dvh) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  background: var(--bg, #000) !important;
}

html.bm-force-mobile-shell .screen.active {
  display: flex !important;
  flex-direction: column !important;
}

html.bm-force-mobile-shell #home-content,
html.bm-force-mobile-shell .scroll-content,
html.bm-force-mobile-shell .ds-results-wrap,
html.bm-force-mobile-shell #events-content,
html.bm-force-mobile-shell #collections-content,
html.bm-force-mobile-shell #discover-feed,
html.bm-force-mobile-shell #news-content {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}

html.bm-force-mobile-shell #home-content {
  height: calc(var(--app-vh, 100dvh) - 56px - 64px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
  padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
}

html.bm-force-mobile-shell .home-rest-card,
html.bm-force-mobile-shell .collection-card,
html.bm-force-mobile-shell .event-card,
html.bm-force-mobile-shell .must-eat-card,
html.bm-force-mobile-shell .area-card,
html.bm-force-mobile-shell .cat-card {
  transform: none !important;
}

/* Home editorial rhythm: golden-ratio inspired spacing without changing logic. */
body[data-app="mobile"] #home-content > .home-brand-strip,
html.bm-force-mobile-shell #home-content > .home-brand-strip {
  margin: 0 !important;
  padding: 14px 18px 13px 16px !important;
  min-height: 58px !important;
}

body[data-app="mobile"] .home-brand-title,
html.bm-force-mobile-shell .home-brand-title {
  font-size: clamp(1.08rem, 4.5vw, 1.22rem) !important;
  line-height: 1.08 !important;
  letter-spacing: 0.01em !important;
  max-width: 100% !important;
}

body[data-app="mobile"] .home-brand-city,
html.bm-force-mobile-shell .home-brand-city {
  font-size: 0.64rem !important;
  line-height: 1.1 !important;
  letter-spacing: 0.13em !important;
  align-self: center !important;
}

body[data-app="mobile"] #home-content > .home-banner,
html.bm-force-mobile-shell #home-content > .home-banner {
  margin: 0 !important;
  height: clamp(218px, 61.8vw, 260px) !important;
}

body[data-app="mobile"] .banner-content,
html.bm-force-mobile-shell .banner-content {
  left: 18px !important;
  right: 18px !important;
  bottom: 22px !important;
}

body[data-app="mobile"] .banner-title,
html.bm-force-mobile-shell .banner-title {
  font-size: clamp(1.34rem, 5.8vw, 1.62rem) !important;
  line-height: 1.12 !important;
  margin: 0 !important;
}

body[data-app="mobile"] .banner-sub,
html.bm-force-mobile-shell .banner-sub {
  margin-top: 5px !important;
  font-size: 0.82rem !important;
  line-height: 1.28 !important;
}

body[data-app="mobile"] #home-content > .home-section,
html.bm-force-mobile-shell #home-content > .home-section {
  padding-top: 20px !important;
  padding-bottom: 7px !important;
}

body[data-app="mobile"] #home-content > .home-banner + .home-section,
body[data-app="mobile"] #home-content #nearby-section,
html.bm-force-mobile-shell #home-content > .home-banner + .home-section,
html.bm-force-mobile-shell #home-content #nearby-section {
  padding-top: 18px !important;
}

body[data-app="mobile"] .home-section-header,
html.bm-force-mobile-shell .home-section-header {
  padding: 0 16px !important;
  margin-bottom: 12px !important;
  gap: 14px !important;
}

body[data-app="mobile"] .home-section-title,
html.bm-force-mobile-shell .home-section-title {
  font-size: 1.03rem !important;
  line-height: 1.2 !important;
  letter-spacing: 0.005em !important;
}

body[data-app="mobile"] .home-section-sub,
html.bm-force-mobile-shell .home-section-sub {
  margin-top: 4px !important;
  font-size: 0.76rem !important;
  line-height: 1.28 !important;
}

body[data-app="mobile"] .h-scroll,
html.bm-force-mobile-shell .h-scroll {
  padding: 0 16px 13px !important;
  gap: 12px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x proximity !important;
}