Browser (non-PWA) layout needs its own styling

[jaylfc]

Mobile layout today assumes PWA standalone viewport. In Safari with URL bar + share/tabs bar visible, the dock sits under the URL bar and the wallpaper is compressed. Use case: someone borrowing a friend's phone to sign in for a minute, can't install a PWA.

Constraint

Must NOT break the current PWA layout — that one is perfect. Detect and branch.

Fix

• Detect standalone via `window.matchMedia('(display-mode: standalone)').matches`
• If false (browser):
  • Shrink / drop the safe-area inset padding that assumes no browser chrome
  • Account for Safari's dynamic URL bar (appears on scroll)
  • Consider a small 'Install this app' banner at the top that dismisses to localStorage
• If true (PWA): current layout unchanged

Where to touch

• `desktop/src/App.tsx` — mobile layout wrapper
• `desktop/src/hooks/use-is-mobile.ts` or a new `use-is-pwa.ts` — the detection hook
• `desktop/src/theme/tokens.css` — `.taos-wallpaper` + safe-area-inset rules

Acceptance

• Safari on iPhone renders cleanly with URL bar visible (dock not covered, wallpaper correct)
• Installed PWA is unchanged visually
• 'Add to Home Screen' prompt shown once in browser mode, dismissable