fix(pwa): reword the install prompt and keep it off the bottom nav

The banner sat fixed at the viewport bottom at z-index 1000, covering the
authed shell's mobile nav; it now offsets above the nav's geometry when a
signed-in mobile user has one. New casual copy replaces the Twilio line,
the dismiss button gains a localized aria-label, and de/es/ja catalogs
carry the new strings.

src/components/ios-install-prompt.tsx

@@ -2,9 +2,16 @@ import { useEffect, useState } from 'react'
 import { Box, Paper, Group, Text, ActionIcon } from '@mantine/core'
 import { DownloadIcon, XIcon } from '@phosphor-icons/react'
 import { Trans, useLingui } from '@lingui/react/macro'
+import { useAuth } from '@/contexts/auth-context'
+import { useIsMobile } from '@/hooks/use-is-mobile'
+
+// Navbar geometry: 4rem height + 0.5rem margin + its safe-area bottom offset.
+const ABOVE_MOBILE_NAV_OFFSET = 'calc(4.5rem + env(safe-area-inset-bottom, 0px))'
 
 export function IOSInstallPrompt() {
   const { t } = useLingui()
+  const { user } = useAuth()
+  const isMobile = useIsMobile()
   const [show, setShow] = useState(false)
   const [platform, setPlatform] = useState<'ios' | 'android' | null>(null)
 
@@ -36,22 +43,29 @@ export function IOSInstallPrompt() {
     ? t`Tap Share → Add to Home Screen`
     : t`Tap Menu (⋮) → Add to Home screen`
 
+  // Navbar renders only under _authed, so a signed-in mobile user on a public
+  // route has no nav to clear.
+  const aboveBottomNav = Boolean(user) && isMobile
+  const bottomStyle = aboveBottomNav
+    ? { bottom: ABOVE_MOBILE_NAV_OFFSET, paddingBottom: '8px' }
+    : { bottom: 0, paddingBottom: 'calc(8px + env(safe-area-inset-bottom, 0px))' }
+
   return (
-    <Box style={{ position: 'fixed', bottom: 0, left: 0, right: 0, zIndex: 1000, padding: '8px' }}>
+    <Box style={{ position: 'fixed', left: 0, right: 0, zIndex: 1000, padding: '8px', ...bottomStyle }}>
       <Paper shadow="lg" p="sm" style={{ background: 'var(--mantine-color-blue-9)', color: 'white' }}>
         <Group justify="space-between" wrap="nowrap">
           <Group gap="xs" wrap="nowrap" style={{ flex: 1 }}>
             <DownloadIcon size={20} style={{ flexShrink: 0 }} />
             <Box style={{ flex: 1, minWidth: 0 }}>
               <Text size="sm" fw={500} style={{ lineHeight: 1.3 }}>
-                <Trans>Please install FLXN • This will save me Twilio credits as you won't be signed out!</Trans>
+                <Trans>Add FLXN to your home screen — smoother experience, always one tap away</Trans>
               </Text>
               <Text size="xs" opacity={0.9} style={{ lineHeight: 1.2 }}>
                 {instructions}
               </Text>
             </Box>
           </Group>
-          <ActionIcon variant="subtle" color="white" onClick={handleDismiss}>
+          <ActionIcon variant="subtle" color="white" onClick={handleDismiss} aria-label={t`Dismiss`}>
             <XIcon size={18} />
           </ActionIcon>
         </Group>