/* Phone and Android WebView. Desktop never gets these classes. */

/* Before JS tags the document: Chrome Android still has to scroll. */
@media (hover: none) and (pointer: coarse) {
  html,
  body {
    overflow-x: clip !important;
    overflow-y: visible !important;
    height: auto !important;
    max-height: none !important;
    overscroll-behavior-y: auto !important;
    touch-action: auto !important;
    position: static !important;
  }
}

html.hf-touch,
html.hf-android-app {
  scroll-behavior: auto !important;
  -webkit-text-size-adjust: 100%;
}

/*
  Both Chrome mobile and the APK WebView: the document is the scroll root.
  overflow-x:hidden on html+body forces overflow-y:auto and traps the page.
*/
html.hf-touch,
html.hf-android-app,
html.hf-touch body,
html.hf-android-app body {
  overflow-x: clip !important;
  overflow-y: visible !important;
  overscroll-behavior: auto !important;
  overscroll-behavior-y: auto !important;
  -webkit-overflow-scrolling: touch;
  touch-action: auto !important;
  height: auto !important;
  max-height: none !important;
  position: static !important;
}

html.hf-touch .min-h-dvh,
html.hf-android-app .min-h-dvh,
html.hf-touch .min-h-screen,
html.hf-android-app .min-h-screen,
html.hf-touch .flex.min-h-dvh,
html.hf-android-app .flex.min-h-dvh {
  overflow: visible !important;
  max-height: none !important;
}

html.hf-touch *,
html.hf-android-app * {
  scroll-behavior: auto !important;
}

html.hf-touch nav,
html.hf-android-app nav {
  touch-action: manipulation;
}

html.hf-touch nav .overflow-x-auto,
html.hf-android-app nav .overflow-x-auto {
  touch-action: pan-x;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

html.hf-touch .hf-stable-nav,
html.hf-android-app .hf-stable-nav,
html.hf-touch [class*="backdrop-blur"],
html.hf-android-app [class*="backdrop-blur"] {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html.hf-touch .hf-ambient-background,
html.hf-android-app .hf-ambient-background,
html.hf-touch .hf-ambient-background *,
html.hf-android-app .hf-ambient-background * {
  animation: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  will-change: auto !important;
}

html.hf-touch [data-habit-card],
html.hf-android-app [data-habit-card],
html.hf-touch [data-habit-list],
html.hf-android-app [data-habit-list],
html.hf-touch [data-habit-tools],
html.hf-android-app [data-habit-tools],
html.hf-touch .habit-cluster,
html.hf-android-app .habit-cluster {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  will-change: auto !important;
  contain: none !important;
  overflow-anchor: none !important;
}

/* Phone only: colored tab bar sits on the bottom edge. */
@media (max-width: 767px) {
  nav.fixed.bottom-0 {
    bottom: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  .hf-tabbar,
  .hf-stable-nav {
    padding-bottom: 0 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .hf-settings-page {
    overflow-x: clip;
    overflow-y: visible;
  }
  .hf-settings-fold {
    contain: none;
  }
  .hf-settings-fold-body > .rounded-xl {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

html.hf-touch nav.fixed.bottom-0,
html.hf-android-app nav.fixed.bottom-0 {
  bottom: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

html.hf-touch .hf-tabbar,
html.hf-android-app .hf-tabbar,
html.hf-touch .hf-stable-nav,
html.hf-android-app .hf-stable-nav {
  padding-bottom: 0 !important;
}

/* Cards change height as timers, journals and links update. Disable browser
   anchor compensation at the actual scroll root, not just on candidate cards.
   Native swipes, keyboard navigation and intentional scrolling remain enabled. */
html.hf-touch,
html.hf-android-app,
html.hf-touch body,
html.hf-android-app body {
  overflow-anchor: none;
}
body[data-scroll-locked] { overflow-y: hidden !important; }