/**
 * Reactive "phone-sized viewport" flag (default ≤ 768 px, the same breakpoint as
 * `MobileActionsMenu`). SSR and the first client render give `false`, so the markup
 * hydrates unchanged; the flag flips in onMounted and follows window resizes.
 */
export const useIsMobile = (maxWidth = 768) => {
  const isMobile = ref(false)
  if (import.meta.client) {
    let mq: MediaQueryList | null = null
    const update = () => { isMobile.value = !!mq?.matches }
    onMounted(() => {
      mq = window.matchMedia(`(max-width: ${maxWidth}px)`)
      update()
      mq.addEventListener('change', update)
    })
    onBeforeUnmount(() => mq?.removeEventListener('change', update))
  }
  return isMobile
}