:root {
  /* Expose iOS safe-area values so layout components can read them */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

html,
body {
  height: 100%;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
}

/* Older iOS Safari fallback */
@supports (-webkit-touch-callout: none) {
  html,
  body {
    min-height: -webkit-fill-available;
  }
}

/* Override Tailwind's static viewport helpers so they behave on iOS */
.h-screen {
  height: 100dvh !important;
}

.min-h-screen {
  min-height: 100dvh !important;
}

@supports (-webkit-touch-callout: none) {
  .h-screen {
    height: -webkit-fill-available !important;
  }

  .min-h-screen {
    min-height: -webkit-fill-available !important;
  }
}

/* Utility helpers for elements pinned to the bottom of the viewport */
.safe-bottom {
  padding-bottom: calc(var(--safe-bottom) + 16px);
}

.safe-bottom-offset {
  bottom: calc(var(--safe-bottom) + 20px);
}

.scroll-touch {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}