feat: captions on mobile

Closes #199

js/mobile/src/features/stream-view/StreamView.tsx

@@ -370,10 +370,11 @@ function StreamViewInner({ streamParticle, path, onExit }: StreamViewProps) {
   const exitRemainingMs = useExitCountdown(status, paused, exit);
 
   // Chrome reservations: top = safe-area + segmented bar (3) + gap (12) +
-  // metadata row (~38) + breathing room (12). Bottom = safe-area + room for
-  // pause / countdown pills + the compose dock that lands in this same step.
+  // metadata row (~38) + breathing room (12). Bottom = safe-area + compose
+  // dock + breathing room. Pause / countdown pills moved to the top so the
+  // bottom only reserves space for the compose dock now.
   const chromeTop = insets.top + 65;
-  const chromeBottom = insets.bottom + 96;
+  const chromeBottom = insets.bottom + COMPOSE_DOCK_HEIGHT + 14;
 
   // --- Render the active particle ---
   const renderParticle = (particle: Particle) => {
@@ -499,12 +500,14 @@ function StreamViewInner({ streamParticle, path, onExit }: StreamViewProps) {
               </View>
             </View>
 
-            {/* Bottom chrome: paused pill + exit countdown. Sit above the
-                compose dock so the record button doesn't cover them. */}
+            {/* Top status pills: paused + exit countdown. Anchored just below
+                the metadata row (avatar + name ≈ 40px tall, starts at
+                insets.top + 32) so they share the top chrome real estate
+                instead of competing with captions at the bottom. */}
             <View
               pointerEvents="none"
-              className="absolute inset-x-0 bottom-0 items-center"
-              style={{ paddingBottom: insets.bottom + COMPOSE_DOCK_HEIGHT }}
+              className="absolute inset-x-0 items-center"
+              style={{ top: insets.top + 88 }}
             >
               {paused ? (
                 <View className="bg-white/15 rounded-full px-3 py-1">