gami-web/app/plugins/viewport.client.ts

export default defineNuxtPlugin(() => {
  if (!import.meta.client) return

  const root = document.documentElement
  let raf = 0

  const apply = () => {
    raf = 0
    // visualViewport.height is the "real" visible area on iOS Safari (addresses bottom bar + keyboard).
    const h = window.visualViewport?.height ?? window.innerHeight
    const vh = Math.max(0, h) * 0.01
    root.style.setProperty('--app-vh', `${vh}px`)
  }

  const schedule = () => {
    if (raf) return
    raf = window.requestAnimationFrame(apply)
  }

  schedule()

  window.addEventListener('resize', schedule, { passive: true })
  window.addEventListener('orientationchange', schedule, { passive: true })

  // iOS Safari: address bar show/hide + keyboard changes affect visualViewport.
  if (window.visualViewport) {
    window.visualViewport.addEventListener('resize', schedule, { passive: true })
    window.visualViewport.addEventListener('scroll', schedule, { passive: true })
  }
})