fix(mobile): stack embed cards + secondary 44px touch targets (r2)

Mobile follow-ups round 2 (survey findings deferred from the mobile audit),
reviewed by 2 agents on the staged diff (both SHIP).

- URL-preview cards: the Twitch / Twitter / TikTok-fallback cards render
  their thumbnail/header BESIDE the content as direct children of the
  UrlPreview flex row, which squeezes both on a phone. Add `StackOnMobile`
  (@media max-width:750px -> flex-direction:column) scoped to those variants
  via cardClass. folds Box has no default `direction`, so the override wins
  uncontested; desktop (>750px) is unchanged. No-op for the single-column
  embed cards (MediaEmbedCard/TikTokEmbedCard).
- 44px touch targets (MobileTouchTarget, @media max-width:750px) on the
  otherwise ~28px controls: embed-player Close/Collapse/Fullscreen/View-post
  buttons; image-viewer close/zoom/download; the read-receipt "seen by" pill.

Deferred (rationale, not built): PiP resize handles + fullscreen button —
enlarging four 24px corners to 44px would swallow a ~160px mobile PiP and
block "Return to call"; presence dot is a non-interactive status indicator.

Gates: tsc 0, eslint 0, prettier clean, 856/856 tests, build ok.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/app/components/image-viewer/ImageViewer.tsx

@@ -7,6 +7,7 @@ import * as css from './ImageViewer.css';
 import { useZoom } from '../../hooks/useZoom';
 import { usePan } from '../../hooks/usePan';
 import { downloadMedia } from '../../utils/matrix';
+import { MobileTouchTarget } from '../../styles/mobile.css';
 
 export type ImageViewerProps = {
   alt: string;
@@ -35,7 +36,13 @@ export const ImageViewer = as<'div', ImageViewerProps>(
       >
         <Header className={css.ImageViewerHeader} size="400">
           <Box grow="Yes" alignItems="Center" gap="200">
-            <IconButton size="300" radii="300" onClick={requestClose} aria-label="Close">
+            <IconButton
+              size="300"
+              radii="300"
+              className={MobileTouchTarget}
+              onClick={requestClose}
+              aria-label="Close"
+            >
               <Icon size="50" src={Icons.ArrowLeft} />
             </IconButton>
             <Text size="T300" truncate>
@@ -48,12 +55,18 @@ export const ImageViewer = as<'div', ImageViewerProps>(
               outlined={zoom < 1}
               size="300"
               radii="Pill"
+              className={MobileTouchTarget}
               onClick={zoomOut}
               aria-label="Zoom Out"
             >
               <Icon size="50" src={Icons.Minus} />
             </IconButton>
-            <Chip variant="SurfaceVariant" radii="Pill" onClick={() => setZoom(zoom === 1 ? 2 : 1)}>
+            <Chip
+              variant="SurfaceVariant"
+              radii="Pill"
+              className={MobileTouchTarget}
+              onClick={() => setZoom(zoom === 1 ? 2 : 1)}
+            >
               <Text size="B300">{Math.round(zoom * 100)}%</Text>
             </Chip>
             <IconButton
@@ -61,6 +74,7 @@ export const ImageViewer = as<'div', ImageViewerProps>(
               outlined={zoom > 1}
               size="300"
               radii="Pill"
+              className={MobileTouchTarget}
               onClick={zoomIn}
               aria-label="Zoom In"
             >
@@ -70,6 +84,7 @@ export const ImageViewer = as<'div', ImageViewerProps>(
               variant="Primary"
               onClick={handleDownload}
               radii="300"
+              className={MobileTouchTarget}
               before={<Icon size="50" src={Icons.Download} />}
             >
               <Text size="B300">{t('Organisms.ImageViewer.download')}</Text>