@poolse/react-native 2.12.1 → 2.13.1

package/dist/index.js

@@ -1,13 +1,14 @@
-import { StyleSheet, Platform, Keyboard, View, Pressable, TextInput, Text, useWindowDimensions, Animated, Easing, PanResponder, Image, ScrollView, ActivityIndicator, FlatList, AppState, KeyboardAvoidingView, Modal, Dimensions, Linking } from 'react-native';
+import { useUser, useMe, useConversations, useAttachmentUpload, useConversation, useMembers, usePresence, useMessages, useTyping, useRealtimeStatus, computeGroupPosition, formatDayLabel, useReactions, sameDay, useThread, useAttachmentUrl, usePoolse, useVoiceRoom, useCalls, useCallRoom } from '@poolse/react';
 import { createContext, forwardRef, useRef, useState, useEffect, useImperativeHandle, useMemo, useCallback, useContext, createElement } from 'react';
+import { StyleSheet, Platform, Keyboard, View, Pressable, TextInput, Text, useWindowDimensions, Animated, Easing, PanResponder, Image, ScrollView, ActivityIndicator, FlatList, AppState, KeyboardAvoidingView, Modal, Dimensions, Linking, StatusBar } from 'react-native';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { useUser, useMe, useConversations, useAttachmentUpload, useConversation, useMembers, usePresence, useMessages, useTyping, useRealtimeStatus, computeGroupPosition, formatDayLabel, useReactions, sameDay, useThread, useAttachmentUrl, usePoolse, useVoiceRoom, useCalls, useCallRoom } from '@poolse/react';
 import { SvgXml, Svg, Path, Circle, G } from 'react-native-svg';
 import * as ImagePicker from 'expo-image-picker';
 import * as DocumentPicker from 'expo-document-picker';
 import { manipulateAsync, SaveFormat } from 'expo-image-manipulator';
 import * as Clipboard from 'expo-clipboard';
 import Markdown, { MarkdownIt } from 'react-native-markdown-display';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
   get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
@@ -179,79 +180,6 @@ function PoolseTheme({ mode, theme, children }) {
 function usePoolseTheme() {
   return useContext(ThemeContext) ?? defaultLightTheme;
 }
-function CallVideoGrid({ participants, livekitReactNative, labelFor }) {
-  const theme = usePoolseTheme();
-  const label = labelFor ?? ((id) => `User ${id.slice(0, 6)}`);
-  const VideoTrack = livekitReactNative?.VideoTrack;
-  if (participants.length === 0) return null;
-  const columns = participants.length <= 1 ? 1 : 2;
-  const basis = columns === 1 ? "100%" : "48%";
-  return /* @__PURE__ */ jsx(View, { style: styles.grid, children: participants.map((participant) => /* @__PURE__ */ jsxs(
-    View,
-    {
-      style: [
-        styles.tile,
-        {
-          flexBasis: basis,
-          backgroundColor: theme.colors.surface,
-          // A ring rather than a badge: it reads at a glance in a
-          // grid, and doesn't cover a face.
-          borderColor: participant.speaking ? theme.colors.brand : "transparent"
-        }
-      ],
-      children: [
-        participant.videoTrackRef && VideoTrack ? /* @__PURE__ */ jsx(
-          VideoTrack,
-          {
-            trackRef: participant.videoTrackRef,
-            style: styles.video,
-            objectFit: "cover",
-            mirror: participant.isSelf,
-            zOrder: participant.isSelf ? 1 : 0
-          }
-        ) : /* @__PURE__ */ jsx(View, { style: styles.placeholder, children: /* @__PURE__ */ jsx(Text, { style: [styles.initial, { color: theme.colors.ink3 }], children: label(participant.userId).slice(0, 1).toUpperCase() }) }),
-        /* @__PURE__ */ jsxs(View, { style: styles.caption, children: [
-          /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: [styles.name, { color: theme.colors.onBrand }], children: participant.isSelf ? "You" : participant.name ?? label(participant.userId) }),
-          !participant.micEnabled && // Muted is worth showing even for yourself — it is the
-          // answer to "why can nobody hear me".
-          /* @__PURE__ */ jsx(Text, { style: [styles.muted, { color: theme.colors.onBrand }], children: "muted" })
-        ] })
-      ]
-    },
-    participant.userId
-  )) });
-}
-var styles = StyleSheet.create({
-  grid: {
-    flex: 1,
-    flexDirection: "row",
-    flexWrap: "wrap",
-    justifyContent: "center",
-    alignContent: "center",
-    gap: 8
-  },
-  tile: {
-    aspectRatio: 3 / 4,
-    borderRadius: 16,
-    borderWidth: 2,
-    overflow: "hidden",
-    justifyContent: "flex-end"
-  },
-  video: { ...StyleSheet.absoluteFillObject },
-  placeholder: { ...StyleSheet.absoluteFillObject, alignItems: "center", justifyContent: "center" },
-  initial: { fontSize: 48, fontWeight: "600" },
-  caption: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6,
-    paddingHorizontal: 10,
-    paddingVertical: 6,
-    // Legible over both a bright video frame and a flat placeholder.
-    backgroundColor: "rgba(0,0,0,0.45)"
-  },
-  name: { flexShrink: 1, fontSize: 13, fontWeight: "600" },
-  muted: { fontSize: 11, opacity: 0.85 }
-});
 
 // src/primitives/userColor.ts
 var PALETTE = [
@@ -290,7 +218,7 @@ function Avatar({ src, name, seed, online, size = "md" }) {
     View,
     {
       style: [
-        styles2.root,
+        styles.root,
         {
           width: dim,
           height: dim,
@@ -324,7 +252,7 @@ function Avatar({ src, name, seed, online, size = "md" }) {
           View,
           {
             style: [
-              styles2.presence,
+              styles.presence,
               {
                 backgroundColor: theme.colors.presence,
                 borderColor: theme.colors.surface,
@@ -344,7 +272,7 @@ function computeInitials(name) {
   const parts = name.trim().split(/\s+/).slice(0, 2);
   return parts.map((p) => p.charAt(0).toUpperCase()).join("").slice(0, 2) || "?";
 }
-var styles2 = StyleSheet.create({
+var styles = StyleSheet.create({
   root: {
     alignItems: "center",
     justifyContent: "center",
@@ -368,10 +296,18 @@ var ICONS = {
     vb: "0 0 24 24",
     d: '<path d="M6 9.2a6 6 0 0 1 12 0c0 4.8 1.4 6.3 1.9 6.8H4.1C4.6 15.5 6 14 6 9.2Z"/><path d="M9.6 19.8a2.5 2.5 0 0 0 4.8 0"/>'
   },
+  bluetooth: {
+    vb: "0 0 24 24",
+    d: '<path d="M7.5 7.5 16.5 16.5 12 21V3l4.5 4.5L7.5 16.5"/>'
+  },
   camera: {
     vb: "0 0 24 24",
     d: '<path d="M3 8.5a2 2 0 0 1 2-2h2.4l1.4-2h6.4l1.4 2H19a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-9Z"/><circle cx="12" cy="13" r="3.5"/>'
   },
+  "camera-flip": {
+    vb: "0 0 24 24",
+    d: '<path d="M3 8.5a2 2 0 0 1 2-2h2.4l1.4-2h6.4l1.4 2H19a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-9Z"/><path d="M14.6 13a2.6 2.6 0 0 1-4.5 1.8"/><path d="M9.4 13a2.6 2.6 0 0 1 4.5-1.8"/><path d="M13.9 9.6v1.7h-1.7"/><path d="M10.1 16.4v-1.7h1.7"/>'
+  },
   "check-double": {
     vb: "0 0 24 24",
     d: '<path d="M2.5 12.8 6.9 17 15.4 7.6"/><path d="M11.4 16.4 12.3 17.2 21 7.6"/>'
@@ -388,6 +324,10 @@ var ICONS = {
     vb: "0 0 24 24",
     d: '<path d="M9 5 16 12 9 19"/>'
   },
+  "chevron-up": {
+    vb: "0 0 24 24",
+    d: '<path d="M6 14.5 12 8.5 18 14.5"/>'
+  },
   close: {
     vb: "0 0 24 24",
     d: '<path d="M6 6 18 18M18 6 6 18"/>'
@@ -416,6 +356,10 @@ var ICONS = {
     vb: "0 0 24 24",
     d: '<circle cx="12" cy="12" r="8.6"/><circle cx="9" cy="10" r="1" fill="currentColor" stroke="none"/><circle cx="15" cy="10" r="1" fill="currentColor" stroke="none"/><path d="M8.4 14.2a4.6 4.6 0 0 0 7.2 0"/>'
   },
+  headphones: {
+    vb: "0 0 24 24",
+    d: '<path d="M4 14v-2a8 8 0 0 1 16 0v2"/><path d="M4 14h2.6a1.4 1.4 0 0 1 1.4 1.4v3.2A1.4 1.4 0 0 1 6.6 20H5.4A1.4 1.4 0 0 1 4 18.6Z"/><path d="M20 14h-2.6a1.4 1.4 0 0 0-1.4 1.4v3.2A1.4 1.4 0 0 0 17.4 20h1.2A1.4 1.4 0 0 0 20 18.6Z"/>'
+  },
   heart: {
     vb: "0 0 24 24",
     d: '<path d="M12 20.3 4.4 12.9a4.6 4.6 0 1 1 6.5-6.5l1.1 1.1 1.1-1.1a4.6 4.6 0 1 1 6.5 6.5L12 20.3Z"/>'
@@ -452,6 +396,10 @@ var ICONS = {
     vb: "0 0 24 24",
     d: '<rect x="9" y="2.6" width="6" height="11.2" rx="3"/><path d="M5.6 11.2a6.4 6.4 0 0 0 12.8 0"/><path d="M12 17.6v3.4"/><path d="M8.6 21h6.8"/>'
   },
+  "mic-off": {
+    vb: "0 0 24 24",
+    d: '<rect x="9" y="2.6" width="6" height="11.2" rx="3"/><path d="M5.6 11.2a6.4 6.4 0 0 0 12.8 0"/><path d="M12 17.6v3.4"/><path d="M8.6 21h6.8"/><path d="M3.6 3.2 20.4 20.8"/>'
+  },
   "more-h": {
     vb: "0 0 24 24",
     d: '<circle cx="5.4" cy="12" r="1.6" fill="currentColor" stroke="none"/><circle cx="12" cy="12" r="1.6" fill="currentColor" stroke="none"/><circle cx="18.6" cy="12" r="1.6" fill="currentColor" stroke="none"/>'
@@ -460,6 +408,14 @@ var ICONS = {
     vb: "0 0 24 24",
     d: '<circle cx="12" cy="5.4" r="1.6" fill="currentColor" stroke="none"/><circle cx="12" cy="12" r="1.6" fill="currentColor" stroke="none"/><circle cx="12" cy="18.6" r="1.6" fill="currentColor" stroke="none"/>'
   },
+  phone: {
+    vb: "0 0 24 24",
+    d: '<path d="M6.6 3.5h3l1.5 3.7-1.9 1.4a12.5 12.5 0 0 0 6.2 6.2l1.4-1.9 3.7 1.5v3a2 2 0 0 1-2.2 2A16.8 16.8 0 0 1 4.6 5.7a2 2 0 0 1 2-2.2Z"/>'
+  },
+  "phone-off": {
+    vb: "0 0 24 24",
+    d: '<g transform="rotate(135 12 12)"><path d="M6.6 3.5h3l1.5 3.7-1.9 1.4a12.5 12.5 0 0 0 6.2 6.2l1.4-1.9 3.7 1.5v3a2 2 0 0 1-2.2 2A16.8 16.8 0 0 1 4.6 5.7a2 2 0 0 1 2-2.2Z"/></g>'
+  },
   pin: {
     vb: "0 0 24 24",
     d: '<path d="M9 3.4h6v1.8l-1 5.6 3 3.2H7l3-3.2-1-5.6V3.4Z"/><path d="M12 17v3.6"/>'
@@ -500,6 +456,14 @@ var ICONS = {
     vb: "0 0 24 24",
     d: '<path d="M4 7h9M17 7h3"/><circle cx="15" cy="7" r="2.1"/><path d="M4 17h3M11 17h9"/><circle cx="9" cy="17" r="2.1"/>'
   },
+  speaker: {
+    vb: "0 0 24 24",
+    d: '<path d="M4 9.5h3.2L12 5.4v13.2L7.2 14.5H4a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1Z"/><path d="M15.6 9.2a4 4 0 0 1 0 5.6"/><path d="M18.2 6.6a7.7 7.7 0 0 1 0 10.8"/>'
+  },
+  "speaker-off": {
+    vb: "0 0 24 24",
+    d: '<path d="M4 9.5h3.2L12 5.4v13.2L7.2 14.5H4a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1Z"/><path d="M16.4 9.6 21.4 14.4"/><path d="M21.4 9.6 16.4 14.4"/>'
+  },
   "thumbs-up": {
     vb: "0 0 24 24",
     d: '<path d="M7 10.4V20H4.2V10.4Z"/><path d="M7 10.4 11 3.2a2 2 0 0 1 1.9 2.2L12.4 9H18a2 2 0 0 1 2 2.4l-1.1 6A2 2 0 0 1 16.9 20H7"/>'
@@ -524,6 +488,14 @@ var ICONS = {
     vb: "0 0 24 24",
     d: '<circle cx="9" cy="8" r="3.6"/><path d="M2.6 20a6.4 6.4 0 0 1 12.8 0"/><path d="M15.8 4.7a3.6 3.6 0 0 1 0 6.6"/><path d="M17.6 20a6.4 6.4 0 0 0-3.1-5.5"/>'
   },
+  video: {
+    vb: "0 0 24 24",
+    d: '<rect x="2.6" y="6" width="13" height="12" rx="2.4"/><path d="M15.6 11.2 21.4 8v8l-5.8-3.2Z"/>'
+  },
+  "video-off": {
+    vb: "0 0 24 24",
+    d: '<rect x="2.6" y="6" width="13" height="12" rx="2.4"/><path d="M15.6 11.2 21.4 8v8l-5.8-3.2Z"/><path d="M3.6 3.2 20.4 20.8"/>'
+  },
   webhook: {
     vb: "0 0 24 24",
     d: '<circle cx="6" cy="6" r="2.6"/><circle cx="18" cy="9" r="2.6"/><circle cx="9.5" cy="18" r="2.6"/><path d="M7.9 7.9 12 12l3.7-1.5"/><path d="M11.6 12.7 9.8 16"/>'
@@ -554,16 +526,16 @@ function MemberList({
   );
   const effectiveOnline = onlineExternalIds ?? presenceOnline;
   if (loading && members.length === 0) {
-    return /* @__PURE__ */ jsx(View, { style: [styles3.placeholder, { backgroundColor: theme.colors.paper }], children: /* @__PURE__ */ jsx(ActivityIndicator, { color: theme.colors.brand }) });
+    return /* @__PURE__ */ jsx(View, { style: [styles2.placeholder, { backgroundColor: theme.colors.paper }], children: /* @__PURE__ */ jsx(ActivityIndicator, { color: theme.colors.brand }) });
   }
   if (error) {
-    return /* @__PURE__ */ jsxs(View, { style: [styles3.placeholder, { backgroundColor: theme.colors.paper }], children: [
+    return /* @__PURE__ */ jsxs(View, { style: [styles2.placeholder, { backgroundColor: theme.colors.paper }], children: [
       /* @__PURE__ */ jsx(Text, { style: { color: theme.colors.error, fontFamily: theme.type.fontBody }, children: "Failed to load members." }),
-      error.message ? /* @__PURE__ */ jsx(Text, { style: [styles3.errorDetail, { color: theme.colors.ink3 }], children: error.message }) : null
+      error.message ? /* @__PURE__ */ jsx(Text, { style: [styles2.errorDetail, { color: theme.colors.ink3 }], children: error.message }) : null
     ] });
   }
   if (members.length === 0) {
-    return /* @__PURE__ */ jsx(View, { style: [styles3.placeholder, { backgroundColor: theme.colors.paper }], children: typeof emptyState === "string" || emptyState == null ? /* @__PURE__ */ jsx(Text, { style: { color: theme.colors.ink3, fontFamily: theme.type.fontBody }, children: emptyState ?? "No members." }) : emptyState });
+    return /* @__PURE__ */ jsx(View, { style: [styles2.placeholder, { backgroundColor: theme.colors.paper }], children: typeof emptyState === "string" || emptyState == null ? /* @__PURE__ */ jsx(Text, { style: { color: theme.colors.ink3, fontFamily: theme.type.fontBody }, children: emptyState ?? "No members." }) : emptyState });
   }
   return /* @__PURE__ */ jsx(
     FlatList,
@@ -602,23 +574,23 @@ function MemberRow({
   const resolved = useUser(externalId);
   const name = labelFor?.(externalId) ?? resolved.profile?.displayName ?? externalId;
   const avatarUrl = avatarFor?.(externalId) ?? resolved.profile?.avatarUrl ?? null;
-  return /* @__PURE__ */ jsxs(View, { style: styles3.row, children: [
+  return /* @__PURE__ */ jsxs(View, { style: styles2.row, children: [
     /* @__PURE__ */ jsx(Avatar, { src: avatarUrl, name, seed: externalId, online, size: "md" }),
-    /* @__PURE__ */ jsxs(View, { style: styles3.body, children: [
+    /* @__PURE__ */ jsxs(View, { style: styles2.body, children: [
       /* @__PURE__ */ jsx(
         Text,
         {
-          style: [styles3.name, { color: theme.colors.ink, fontFamily: theme.type.fontBody }],
+          style: [styles2.name, { color: theme.colors.ink, fontFamily: theme.type.fontBody }],
           numberOfLines: 1,
           children: name
         }
       ),
-      /* @__PURE__ */ jsx(Text, { style: [styles3.role, { color: theme.colors.ink3 }], children: role })
+      /* @__PURE__ */ jsx(Text, { style: [styles2.role, { color: theme.colors.ink3 }], children: role })
     ] }),
-    onRemove ? /* @__PURE__ */ jsx(Pressable, { onPress: onRemove, hitSlop: 8, style: styles3.removeBtn, children: /* @__PURE__ */ jsx(PoolseIcon, { name: "close", size: 16, color: theme.colors.ink2 }) }) : null
+    onRemove ? /* @__PURE__ */ jsx(Pressable, { onPress: onRemove, hitSlop: 8, style: styles2.removeBtn, children: /* @__PURE__ */ jsx(PoolseIcon, { name: "close", size: 16, color: theme.colors.ink2 }) }) : null
   ] });
 }
-var styles3 = StyleSheet.create({
+var styles2 = StyleSheet.create({
   placeholder: {
     flex: 1,
     alignItems: "center",
@@ -721,11 +693,11 @@ function GroupDetailsSheet({
       animationType: "slide",
       onRequestClose: onClose,
       statusBarTranslucent: true,
-      children: /* @__PURE__ */ jsxs(View, { style: styles4.modalRoot, children: [
+      children: /* @__PURE__ */ jsxs(View, { style: styles3.modalRoot, children: [
         /* @__PURE__ */ jsx(
           Pressable,
           {
-            style: styles4.backdrop,
+            style: styles3.backdrop,
             onPress: onClose,
             accessibilityLabel: "Close group details"
           }
@@ -734,7 +706,7 @@ function GroupDetailsSheet({
           Animated.View,
           {
             style: [
-              styles4.sheet,
+              styles3.sheet,
               {
                 backgroundColor: theme.colors.paper,
                 borderTopLeftRadius: theme.radii.xl,
@@ -744,14 +716,14 @@ function GroupDetailsSheet({
               theme.shadows.lg
             ],
             children: [
-              /* @__PURE__ */ jsx(View, { ...panHandlers, style: styles4.dragHandle, children: /* @__PURE__ */ jsx(View, { style: [styles4.dragPill, { backgroundColor: theme.colors.ink3 }] }) }),
-              /* @__PURE__ */ jsxs(View, { style: styles4.headerRow, children: [
+              /* @__PURE__ */ jsx(View, { ...panHandlers, style: styles3.dragHandle, children: /* @__PURE__ */ jsx(View, { style: [styles3.dragPill, { backgroundColor: theme.colors.ink3 }] }) }),
+              /* @__PURE__ */ jsxs(View, { style: styles3.headerRow, children: [
                 /* @__PURE__ */ jsx(
                   Pressable,
                   {
                     onPress: onClose,
                     hitSlop: 16,
-                    style: [styles4.closeBtn, { backgroundColor: theme.colors.surface2 }],
+                    style: [styles3.closeBtn, { backgroundColor: theme.colors.surface2 }],
                     accessibilityLabel: "Close",
                     children: /* @__PURE__ */ jsx(PoolseIcon, { name: "close", size: 18, color: theme.colors.ink })
                   }
@@ -760,34 +732,34 @@ function GroupDetailsSheet({
                   Text,
                   {
                     style: [
-                      styles4.headerTitle,
+                      styles3.headerTitle,
                       { color: theme.colors.ink, fontFamily: theme.type.fontDisplay }
                     ],
                     children: "Group details"
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs(View, { style: styles4.summary, children: [
+              /* @__PURE__ */ jsxs(View, { style: styles3.summary, children: [
                 /* @__PURE__ */ jsx(Avatar, { src: null, name: title, seed: conversationId, size: "lg" }),
                 /* @__PURE__ */ jsx(
                   Text,
                   {
                     style: [
-                      styles4.title,
+                      styles3.title,
                       { color: theme.colors.ink, fontFamily: theme.type.fontDisplay }
                     ],
                     numberOfLines: 1,
                     children: title
                   }
                 ),
-                /* @__PURE__ */ jsx(Text, { style: [styles4.subtitle, { color: theme.colors.ink3 }], children: subtitle })
+                /* @__PURE__ */ jsx(Text, { style: [styles3.subtitle, { color: theme.colors.ink3 }], children: subtitle })
               ] }),
-              /* @__PURE__ */ jsx(View, { style: [styles4.divider, { backgroundColor: theme.colors.border }] }),
-              /* @__PURE__ */ jsx(View, { style: styles4.sectionLabelRow, children: /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx(View, { style: [styles3.divider, { backgroundColor: theme.colors.border }] }),
+              /* @__PURE__ */ jsx(View, { style: styles3.sectionLabelRow, children: /* @__PURE__ */ jsx(
                 Text,
                 {
                   style: [
-                    styles4.sectionLabel,
+                    styles3.sectionLabel,
                     { color: theme.colors.ink2, fontFamily: theme.type.fontBody }
                   ],
                   children: "Members"
@@ -810,7 +782,7 @@ function GroupDetailsSheet({
     }
   );
 }
-var styles4 = StyleSheet.create({
+var styles3 = StyleSheet.create({
   modalRoot: {
     flex: 1,
     justifyContent: "flex-end"
@@ -904,7 +876,7 @@ function ChatHeader({
       View,
       {
         style: [
-          styles5.root,
+          styles4.root,
           {
             backgroundColor: theme.colors.surface,
             borderBottomColor: theme.colors.border
@@ -929,32 +901,32 @@ function ChatHeader({
       {
         ...headerOnPress ? { onPress: headerOnPress } : {},
         style: [
-          styles5.root,
+          styles4.root,
           {
             backgroundColor: theme.colors.surface,
             borderBottomColor: theme.colors.border
           }
         ],
         children: [
-          onBack ? /* @__PURE__ */ jsx(Pressable, { onPress: onBack, hitSlop: 12, style: styles5.backBtn, accessibilityLabel: "Back", children: /* @__PURE__ */ jsx(PoolseIcon, { name: "reply", size: 20, color: theme.colors.ink }) }) : null,
+          onBack ? /* @__PURE__ */ jsx(Pressable, { onPress: onBack, hitSlop: 12, style: styles4.backBtn, accessibilityLabel: "Back", children: /* @__PURE__ */ jsx(PoolseIcon, { name: "reply", size: 20, color: theme.colors.ink }) }) : null,
           /* @__PURE__ */ jsx(Avatar, { src: avatarUrl, name: title, seed: avatarSeed, online: isOnline, size: "md" }),
-          /* @__PURE__ */ jsxs(View, { style: styles5.titleCol, children: [
+          /* @__PURE__ */ jsxs(View, { style: styles4.titleCol, children: [
             /* @__PURE__ */ jsx(
               Text,
               {
-                style: [styles5.title, { color: theme.colors.ink, fontFamily: theme.type.fontDisplay }],
+                style: [styles4.title, { color: theme.colors.ink, fontFamily: theme.type.fontDisplay }],
                 numberOfLines: 1,
                 children: title
               }
             ),
-            subtitle ? /* @__PURE__ */ jsx(Text, { style: [styles5.subtitle, { color: theme.colors.ink3 }], numberOfLines: 1, children: subtitle }) : null
+            subtitle ? /* @__PURE__ */ jsx(Text, { style: [styles4.subtitle, { color: theme.colors.ink3 }], numberOfLines: 1, children: subtitle }) : null
           ] }),
           onMembersPress ? /* @__PURE__ */ jsx(
             Pressable,
             {
               onPress: onMembersPress,
               hitSlop: 12,
-              style: styles5.actionBtn,
+              style: styles4.actionBtn,
               accessibilityLabel: "Show members",
               children: /* @__PURE__ */ jsx(PoolseIcon, { name: "users", size: 20, color: theme.colors.ink2 })
             }
@@ -974,7 +946,7 @@ function ChatHeader({
     ) : null
   ] });
 }
-var styles5 = StyleSheet.create({
+var styles4 = StyleSheet.create({
   root: {
     flexDirection: "row",
     alignItems: "center",
@@ -1032,13 +1004,13 @@ function ConversationList({
   const error = isControlled ? controlledError ?? null : auto.error;
   const counts = unreadCounts ?? (isControlled ? void 0 : auto.unreadCounts);
   if (loading && conversations.length === 0) {
-    return /* @__PURE__ */ jsx(View, { style: [styles6.placeholder, { backgroundColor: theme.colors.paper }], children: /* @__PURE__ */ jsx(ActivityIndicator, { color: theme.colors.brand }) });
+    return /* @__PURE__ */ jsx(View, { style: [styles5.placeholder, { backgroundColor: theme.colors.paper }], children: /* @__PURE__ */ jsx(ActivityIndicator, { color: theme.colors.brand }) });
   }
   if (error) {
-    return /* @__PURE__ */ jsx(View, { style: [styles6.placeholder, { backgroundColor: theme.colors.paper }], children: /* @__PURE__ */ jsx(Text, { style: { color: theme.colors.error, fontFamily: theme.type.fontBody }, children: "Failed to load conversations." }) });
+    return /* @__PURE__ */ jsx(View, { style: [styles5.placeholder, { backgroundColor: theme.colors.paper }], children: /* @__PURE__ */ jsx(Text, { style: { color: theme.colors.error, fontFamily: theme.type.fontBody }, children: "Failed to load conversations." }) });
   }
   if (conversations.length === 0) {
-    return /* @__PURE__ */ jsx(View, { style: [styles6.placeholder, { backgroundColor: theme.colors.paper }], children: typeof emptyState === "string" || emptyState == null ? /* @__PURE__ */ jsx(Text, { style: { color: theme.colors.ink3, fontFamily: theme.type.fontBody }, children: emptyState ?? "No conversations yet." }) : emptyState });
+    return /* @__PURE__ */ jsx(View, { style: [styles5.placeholder, { backgroundColor: theme.colors.paper }], children: typeof emptyState === "string" || emptyState == null ? /* @__PURE__ */ jsx(Text, { style: { color: theme.colors.ink3, fontFamily: theme.type.fontBody }, children: emptyState ?? "No conversations yet." }) : emptyState });
   }
   return /* @__PURE__ */ jsx(
     FlatList,
@@ -1088,25 +1060,25 @@ function ConversationRow({
     {
       onPress: () => onSelect?.(conv),
       style: [
-        styles6.row,
+        styles5.row,
         {
           backgroundColor: selected ? theme.colors.surface2 : "transparent"
         }
       ],
       children: [
-        avatarUrl ? /* @__PURE__ */ jsx(Image, { source: { uri: avatarUrl }, style: styles6.rowAvatar }) : /* @__PURE__ */ jsx(Avatar, { src: null, name: title, seed: avatarSeed, size: "md" }),
-        /* @__PURE__ */ jsxs(View, { style: styles6.body, children: [
+        avatarUrl ? /* @__PURE__ */ jsx(Image, { source: { uri: avatarUrl }, style: styles5.rowAvatar }) : /* @__PURE__ */ jsx(Avatar, { src: null, name: title, seed: avatarSeed, size: "md" }),
+        /* @__PURE__ */ jsxs(View, { style: styles5.body, children: [
           /* @__PURE__ */ jsx(
             Text,
             {
-              style: [styles6.name, { color: theme.colors.ink, fontFamily: theme.type.fontBody }],
+              style: [styles5.name, { color: theme.colors.ink, fontFamily: theme.type.fontBody }],
               numberOfLines: 1,
               children: title
             }
           ),
-          conv.last_message_preview ? /* @__PURE__ */ jsx(Text, { style: [styles6.preview, { color: theme.colors.ink3 }], numberOfLines: 1, children: conv.last_message_preview }) : conv.last_message_at ? /* @__PURE__ */ jsx(Text, { style: [styles6.preview, { color: theme.colors.ink3 }], numberOfLines: 1, children: formatRelative(conv.last_message_at) }) : null
+          conv.last_message_preview ? /* @__PURE__ */ jsx(Text, { style: [styles5.preview, { color: theme.colors.ink3 }], numberOfLines: 1, children: conv.last_message_preview }) : conv.last_message_at ? /* @__PURE__ */ jsx(Text, { style: [styles5.preview, { color: theme.colors.ink3 }], numberOfLines: 1, children: formatRelative(conv.last_message_at) }) : null
         ] }),
-        unread > 0 ? /* @__PURE__ */ jsx(View, { style: [styles6.unreadPill, { backgroundColor: theme.colors.unreadPill }], children: /* @__PURE__ */ jsx(Text, { style: [styles6.unreadText, { color: theme.colors.unreadPillText }], children: unread > 99 ? "99+" : String(unread) }) }) : null
+        unread > 0 ? /* @__PURE__ */ jsx(View, { style: [styles5.unreadPill, { backgroundColor: theme.colors.unreadPill }], children: /* @__PURE__ */ jsx(Text, { style: [styles5.unreadText, { color: theme.colors.unreadPillText }], children: unread > 99 ? "99+" : String(unread) }) }) : null
       ]
     }
   );
@@ -1124,7 +1096,7 @@ function formatRelative(iso) {
     return "";
   }
 }
-var styles6 = StyleSheet.create({
+var styles5 = StyleSheet.create({
   placeholder: {
     flex: 1,
     alignItems: "center",
@@ -1217,11 +1189,11 @@ function AttachmentPicker({
       onClose();
     }
   };
-  return /* @__PURE__ */ jsx(Modal, { visible, transparent: true, animationType: "slide", onRequestClose: onClose, children: /* @__PURE__ */ jsx(Pressable, { style: styles7.backdrop, onPress: onClose, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(Modal, { visible, transparent: true, animationType: "slide", onRequestClose: onClose, children: /* @__PURE__ */ jsx(Pressable, { style: styles6.backdrop, onPress: onClose, children: /* @__PURE__ */ jsxs(
     View,
     {
       style: [
-        styles7.sheet,
+        styles6.sheet,
         {
           backgroundColor: theme.colors.surface,
           borderTopLeftRadius: theme.radii.lg,
@@ -1230,19 +1202,19 @@ function AttachmentPicker({
         theme.shadows.lg
       ],
       children: [
-        camera ? /* @__PURE__ */ jsxs(Pressable, { style: styles7.item, onPress: () => pickFromKind("camera"), children: [
+        camera ? /* @__PURE__ */ jsxs(Pressable, { style: styles6.item, onPress: () => pickFromKind("camera"), children: [
           /* @__PURE__ */ jsx(PoolseIcon, { name: "camera", size: 20, color: theme.colors.ink2 }),
-          /* @__PURE__ */ jsx(Text, { style: [styles7.itemText, { color: theme.colors.ink }], children: "Camera" })
+          /* @__PURE__ */ jsx(Text, { style: [styles6.itemText, { color: theme.colors.ink }], children: "Camera" })
         ] }) : null,
-        /* @__PURE__ */ jsxs(Pressable, { style: styles7.item, onPress: () => pickFromKind("image"), children: [
+        /* @__PURE__ */ jsxs(Pressable, { style: styles6.item, onPress: () => pickFromKind("image"), children: [
           /* @__PURE__ */ jsx(PoolseIcon, { name: "image", size: 20, color: theme.colors.ink2 }),
-          /* @__PURE__ */ jsx(Text, { style: [styles7.itemText, { color: theme.colors.ink }], children: "Photo or video" })
+          /* @__PURE__ */ jsx(Text, { style: [styles6.itemText, { color: theme.colors.ink }], children: "Photo or video" })
         ] }),
-        /* @__PURE__ */ jsxs(Pressable, { style: styles7.item, onPress: () => pickFromKind("document"), children: [
+        /* @__PURE__ */ jsxs(Pressable, { style: styles6.item, onPress: () => pickFromKind("document"), children: [
           /* @__PURE__ */ jsx(PoolseIcon, { name: "attachment", size: 20, color: theme.colors.ink2 }),
-          /* @__PURE__ */ jsx(Text, { style: [styles7.itemText, { color: theme.colors.ink }], children: "File" })
+          /* @__PURE__ */ jsx(Text, { style: [styles6.itemText, { color: theme.colors.ink }], children: "File" })
         ] }),
-        /* @__PURE__ */ jsx(Pressable, { style: styles7.cancel, onPress: onClose, children: /* @__PURE__ */ jsx(Text, { style: [styles7.itemText, { color: theme.colors.brand }], children: "Cancel" }) })
+        /* @__PURE__ */ jsx(Pressable, { style: styles6.cancel, onPress: onClose, children: /* @__PURE__ */ jsx(Text, { style: [styles6.itemText, { color: theme.colors.brand }], children: "Cancel" }) })
       ]
     }
   ) }) });
@@ -1388,7 +1360,7 @@ async function defaultAdapter(kind) {
     })
   );
 }
-var styles7 = StyleSheet.create({
+var styles6 = StyleSheet.create({
   backdrop: {
     flex: 1,
     backgroundColor: "rgba(0,0,0,0.35)",
@@ -1418,11 +1390,11 @@ var styles7 = StyleSheet.create({
 });
 function DaySeparator({ label }) {
   const theme = usePoolseTheme();
-  return /* @__PURE__ */ jsx(View, { style: styles8.wrap, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(View, { style: styles7.wrap, children: /* @__PURE__ */ jsx(
     View,
     {
       style: [
-        styles8.chip,
+        styles7.chip,
         {
           backgroundColor: theme.colors.surface2,
           borderColor: theme.colors.border
@@ -1432,7 +1404,7 @@ function DaySeparator({ label }) {
         Text,
         {
           style: [
-            styles8.label,
+            styles7.label,
             {
               color: theme.colors.ink2,
               fontFamily: theme.type.fontBody
@@ -1444,7 +1416,7 @@ function DaySeparator({ label }) {
     }
   ) });
 }
-var styles8 = StyleSheet.create({
+var styles7 = StyleSheet.create({
   wrap: {
     alignItems: "center",
     marginVertical: 8
@@ -1471,8 +1443,8 @@ function UploadQueueStrip() {
     {
       horizontal: true,
       showsHorizontalScrollIndicator: false,
-      contentContainerStyle: styles9.scroll,
-      style: [styles9.scrollStyle, { marginBottom: 8 }],
+      contentContainerStyle: styles8.scroll,
+      style: [styles8.scrollStyle, { marginBottom: 8 }],
       children: upload.queue.map((item) => {
         const isError = item.status === "error";
         const isUploading = item.status === "uploading" || item.status === "pending";
@@ -1483,7 +1455,7 @@ function UploadQueueStrip() {
           if (item.status === "ready" || isError) upload.remove(item.localId);
           else upload.cancel(item.localId);
         };
-        return /* @__PURE__ */ jsxs(View, { style: styles9.tileWrap, children: [
+        return /* @__PURE__ */ jsxs(View, { style: styles8.tileWrap, children: [
           isImage && previewUri ? /* @__PURE__ */ jsx(ImageTile, { uri: previewUri, uploading: isUploading, error: isError }) : /* @__PURE__ */ jsx(
             FileTile,
             {
@@ -1498,13 +1470,13 @@ function UploadQueueStrip() {
             {
               onPress: handleClose,
               hitSlop: 8,
-              style: styles9.closeBtn,
+              style: styles8.closeBtn,
               accessibilityLabel: isError ? "Remove failed upload" : "Cancel upload",
               children: /* @__PURE__ */ jsx(PoolseIcon, { name: "close", size: 11, color: "#fff" })
             }
           ) : null,
-          isUploading ? /* @__PURE__ */ jsx(View, { style: styles9.progressOverlay, children: /* @__PURE__ */ jsx(View, { style: [styles9.spinner, { borderColor: theme.colors.onBrand }] }) }) : null,
-          isError ? /* @__PURE__ */ jsx(View, { style: [styles9.errorOverlay, { backgroundColor: "rgba(229,72,77,0.85)" }], children: /* @__PURE__ */ jsx(Text, { style: [styles9.errorText, { color: "#fff" }], children: "Failed" }) }) : null
+          isUploading ? /* @__PURE__ */ jsx(View, { style: styles8.progressOverlay, children: /* @__PURE__ */ jsx(View, { style: [styles8.spinner, { borderColor: theme.colors.onBrand }] }) }) : null,
+          isError ? /* @__PURE__ */ jsx(View, { style: [styles8.errorOverlay, { backgroundColor: "rgba(229,72,77,0.85)" }], children: /* @__PURE__ */ jsx(Text, { style: [styles8.errorText, { color: "#fff" }], children: "Failed" }) }) : null
         ] }, item.localId);
       })
     }
@@ -1517,7 +1489,7 @@ function ImageTile({ uri, uploading, error }) {
     {
       source: { uri },
       style: [
-        styles9.imageTile,
+        styles8.imageTile,
         {
           backgroundColor: theme.colors.surface2,
           borderColor: error ? theme.colors.error : "transparent",
@@ -1539,24 +1511,24 @@ function FileTile({
     View,
     {
       style: [
-        styles9.fileTile,
+        styles8.fileTile,
         {
           backgroundColor: theme.colors.surface2,
           borderColor: error ? theme.colors.error : uploading ? theme.colors.brand : theme.colors.border
         }
       ],
       children: [
-        /* @__PURE__ */ jsx(View, { style: [styles9.fileIconBox, { backgroundColor: theme.colors.brandSoft }], children: /* @__PURE__ */ jsx(PoolseIcon, { name: "attachment", size: 18, color: theme.colors.brand }) }),
-        /* @__PURE__ */ jsxs(View, { style: styles9.fileInfo, children: [
+        /* @__PURE__ */ jsx(View, { style: [styles8.fileIconBox, { backgroundColor: theme.colors.brandSoft }], children: /* @__PURE__ */ jsx(PoolseIcon, { name: "attachment", size: 18, color: theme.colors.brand }) }),
+        /* @__PURE__ */ jsxs(View, { style: styles8.fileInfo, children: [
           /* @__PURE__ */ jsx(
             Text,
             {
-              style: [styles9.fileName, { color: theme.colors.ink, fontFamily: theme.type.fontBody }],
+              style: [styles8.fileName, { color: theme.colors.ink, fontFamily: theme.type.fontBody }],
               numberOfLines: 1,
               children: filename
             }
           ),
-          /* @__PURE__ */ jsx(Text, { style: [styles9.fileSize, { color: theme.colors.ink3 }], children: formatBytes(size) })
+          /* @__PURE__ */ jsx(Text, { style: [styles8.fileSize, { color: theme.colors.ink3 }], children: formatBytes(size) })
         ] })
       ]
     }
@@ -1570,7 +1542,7 @@ function formatBytes(n) {
   return `${(n / 1024 / 1024 / 1024).toFixed(1)} GB`;
 }
 var TILE = 64;
-var styles9 = StyleSheet.create({
+var styles8 = StyleSheet.create({
   scrollStyle: {
     overflow: "visible"
   },
@@ -1786,7 +1758,7 @@ var MessageComposer = forwardRef(
       View,
       {
         style: [
-          styles10.wrap,
+          styles9.wrap,
           {
             backgroundColor: theme.colors.surface,
             borderTopColor: theme.colors.border,
@@ -1809,13 +1781,13 @@ var MessageComposer = forwardRef(
             }
           ) : null,
           attachments && !isEditing ? /* @__PURE__ */ jsx(UploadQueueStrip, {}) : null,
-          /* @__PURE__ */ jsxs(View, { style: styles10.row, children: [
+          /* @__PURE__ */ jsxs(View, { style: styles9.row, children: [
             attachments && onAttachPress ? /* @__PURE__ */ jsx(
               Pressable,
               {
                 onPress: onAttachPress,
                 hitSlop: 8,
-                style: styles10.iconBtn,
+                style: styles9.iconBtn,
                 accessibilityLabel: "Attach file",
                 children: /* @__PURE__ */ jsx(PoolseIcon, { name: "attachment", size: 22, color: theme.colors.ink2 })
               }
@@ -1834,7 +1806,7 @@ var MessageComposer = forwardRef(
                 multiline: true,
                 editable: !disabled,
                 style: [
-                  styles10.input,
+                  styles9.input,
                   {
                     color: theme.colors.ink,
                     backgroundColor: theme.colors.surface2,
@@ -1851,7 +1823,7 @@ var MessageComposer = forwardRef(
                 onPress: handleSend,
                 disabled: submitDisabled,
                 style: [
-                  styles10.sendBtn,
+                  styles9.sendBtn,
                   {
                     backgroundColor: submitDisabled ? theme.colors.ink3 : theme.colors.brand,
                     opacity: submitDisabled ? 0.6 : 1
@@ -1873,7 +1845,7 @@ function EditChip({ message, onCancel }) {
     View,
     {
       style: [
-        styles10.replyChip,
+        styles9.replyChip,
         {
           backgroundColor: theme.colors.surface2,
           borderLeftColor: theme.colors.brand
@@ -1881,10 +1853,10 @@ function EditChip({ message, onCancel }) {
       ],
       children: [
         /* @__PURE__ */ jsxs(View, { style: { flex: 1 }, children: [
-          /* @__PURE__ */ jsx(Text, { style: [styles10.replyName, { color: theme.colors.brand }], children: "Editing message" }),
-          /* @__PURE__ */ jsx(Text, { style: [styles10.replyBody, { color: theme.colors.ink2 }], numberOfLines: 1, children: message.body ?? "\u2026" })
+          /* @__PURE__ */ jsx(Text, { style: [styles9.replyName, { color: theme.colors.brand }], children: "Editing message" }),
+          /* @__PURE__ */ jsx(Text, { style: [styles9.replyBody, { color: theme.colors.ink2 }], numberOfLines: 1, children: message.body ?? "\u2026" })
         ] }),
-        onCancel ? /* @__PURE__ */ jsx(Pressable, { onPress: onCancel, hitSlop: 8, style: styles10.replyCancel, children: /* @__PURE__ */ jsx(PoolseIcon, { name: "close", size: 16, color: theme.colors.ink2 }) }) : null
+        onCancel ? /* @__PURE__ */ jsx(Pressable, { onPress: onCancel, hitSlop: 8, style: styles9.replyCancel, children: /* @__PURE__ */ jsx(PoolseIcon, { name: "close", size: 16, color: theme.colors.ink2 }) }) : null
       ]
     }
   );
@@ -1901,7 +1873,7 @@ function ReplyChip({
     View,
     {
       style: [
-        styles10.replyChip,
+        styles9.replyChip,
         {
           backgroundColor: theme.colors.surface2,
           borderLeftColor: theme.colors.brand
@@ -1909,18 +1881,18 @@ function ReplyChip({
       ],
       children: [
         /* @__PURE__ */ jsxs(View, { style: { flex: 1 }, children: [
-          /* @__PURE__ */ jsxs(Text, { style: [styles10.replyName, { color: theme.colors.brand }], children: [
+          /* @__PURE__ */ jsxs(Text, { style: [styles9.replyName, { color: theme.colors.brand }], children: [
             "Replying to ",
             senderName
           ] }),
-          /* @__PURE__ */ jsx(Text, { style: [styles10.replyBody, { color: theme.colors.ink2 }], numberOfLines: 1, children: message.body ?? "\u2026" })
+          /* @__PURE__ */ jsx(Text, { style: [styles9.replyBody, { color: theme.colors.ink2 }], numberOfLines: 1, children: message.body ?? "\u2026" })
         ] }),
-        onCancel ? /* @__PURE__ */ jsx(Pressable, { onPress: onCancel, hitSlop: 8, style: styles10.replyCancel, children: /* @__PURE__ */ jsx(PoolseIcon, { name: "close", size: 16, color: theme.colors.ink2 }) }) : null
+        onCancel ? /* @__PURE__ */ jsx(Pressable, { onPress: onCancel, hitSlop: 8, style: styles9.replyCancel, children: /* @__PURE__ */ jsx(PoolseIcon, { name: "close", size: 16, color: theme.colors.ink2 }) }) : null
       ]
     }
   );
 }
-var styles10 = StyleSheet.create({
+var styles9 = StyleSheet.create({
   wrap: {
     borderTopWidth: StyleSheet.hairlineWidth,
     paddingTop: 8,
@@ -2017,11 +1989,11 @@ function MentionInput({ conversationId, onSend, ...composerProps }) {
         transparent: true,
         animationType: "slide",
         onRequestClose: () => setPickerOpen(false),
-        children: /* @__PURE__ */ jsx(Pressable, { style: styles11.backdrop, onPress: () => setPickerOpen(false), children: /* @__PURE__ */ jsxs(
+        children: /* @__PURE__ */ jsx(Pressable, { style: styles10.backdrop, onPress: () => setPickerOpen(false), children: /* @__PURE__ */ jsxs(
           View,
           {
             style: [
-              styles11.sheet,
+              styles10.sheet,
               {
                 backgroundColor: theme.colors.surface,
                 borderTopLeftRadius: theme.radii.lg,
@@ -2032,7 +2004,7 @@ function MentionInput({ conversationId, onSend, ...composerProps }) {
               /* @__PURE__ */ jsx(
                 Text,
                 {
-                  style: [styles11.title, { color: theme.colors.ink, fontFamily: theme.type.fontBody }],
+                  style: [styles10.title, { color: theme.colors.ink, fontFamily: theme.type.fontBody }],
                   children: "Mention a member"
                 }
               ),
@@ -2063,12 +2035,12 @@ function MentionInput({ conversationId, onSend, ...composerProps }) {
 }
 function MentionRow({ member, onPress }) {
   const theme = usePoolseTheme();
-  return /* @__PURE__ */ jsxs(Pressable, { onPress, style: styles11.row, children: [
+  return /* @__PURE__ */ jsxs(Pressable, { onPress, style: styles10.row, children: [
     /* @__PURE__ */ jsx(Avatar, { src: null, name: member.external_id, seed: member.external_id, size: "sm" }),
-    /* @__PURE__ */ jsx(Text, { style: [styles11.rowText, { color: theme.colors.ink, fontFamily: theme.type.fontBody }], children: member.external_id })
+    /* @__PURE__ */ jsx(Text, { style: [styles10.rowText, { color: theme.colors.ink, fontFamily: theme.type.fontBody }], children: member.external_id })
   ] });
 }
-var styles11 = StyleSheet.create({
+var styles10 = StyleSheet.create({
   backdrop: {
     flex: 1,
     backgroundColor: "rgba(0,0,0,0.35)",
@@ -2148,12 +2120,12 @@ function MessageList({
     [renderItem, data.length]
   );
   if (loading && messages.length === 0) {
-    return /* @__PURE__ */ jsx(View, { style: [styles12.placeholder, { backgroundColor: theme.colors.paper }], children: /* @__PURE__ */ jsx(ActivityIndicator, { color: theme.colors.brand }) });
+    return /* @__PURE__ */ jsx(View, { style: [styles11.placeholder, { backgroundColor: theme.colors.paper }], children: /* @__PURE__ */ jsx(ActivityIndicator, { color: theme.colors.brand }) });
   }
   if (messages.length === 0) {
-    return /* @__PURE__ */ jsx(View, { style: [styles12.placeholder, { backgroundColor: theme.colors.paper }], children: typeof emptyState === "string" ? /* @__PURE__ */ jsx(Text, { style: { color: theme.colors.ink3, fontFamily: theme.type.fontBody }, children: emptyState }) : emptyState ?? null });
+    return /* @__PURE__ */ jsx(View, { style: [styles11.placeholder, { backgroundColor: theme.colors.paper }], children: typeof emptyState === "string" ? /* @__PURE__ */ jsx(Text, { style: { color: theme.colors.ink3, fontFamily: theme.type.fontBody }, children: emptyState }) : emptyState ?? null });
   }
-  return /* @__PURE__ */ jsxs(View, { style: styles12.root, children: [
+  return /* @__PURE__ */ jsxs(View, { style: styles11.root, children: [
     /* @__PURE__ */ jsx(
       FlatList,
       {
@@ -2180,7 +2152,7 @@ function MessageList({
       {
         onPress: scrollToBottom,
         style: [
-          styles12.jumpButton,
+          styles11.jumpButton,
           {
             backgroundColor: theme.colors.brand
           },
@@ -2189,7 +2161,7 @@ function MessageList({
         accessibilityLabel: `${newCount} new ${newCount === 1 ? "message" : "messages"}, jump to latest`,
         children: [
           /* @__PURE__ */ jsx(PoolseIcon, { name: "chevron-down", size: 14, color: theme.colors.onBrand }),
-          /* @__PURE__ */ jsxs(Text, { style: [styles12.jumpText, { color: theme.colors.onBrand }], children: [
+          /* @__PURE__ */ jsxs(Text, { style: [styles11.jumpText, { color: theme.colors.onBrand }], children: [
             newCount,
             " new ",
             newCount === 1 ? "message" : "messages"
@@ -2199,7 +2171,7 @@ function MessageList({
     ) : null
   ] });
 }
-var styles12 = StyleSheet.create({
+var styles11 = StyleSheet.create({
   root: {
     flex: 1
   },
@@ -2250,11 +2222,11 @@ function MessageActions({
   if (isSelf && onDelete)
     items.push({ label: "Delete", icon: "trash", onPress: onDelete, danger: true });
   const showEmojiRow = !!onPickReaction && emojis.length > 0;
-  return /* @__PURE__ */ jsx(Modal, { visible, transparent: true, animationType: "fade", onRequestClose: onClose, children: /* @__PURE__ */ jsx(Pressable, { style: styles13.backdrop, onPress: onClose, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(Modal, { visible, transparent: true, animationType: "fade", onRequestClose: onClose, children: /* @__PURE__ */ jsx(Pressable, { style: styles12.backdrop, onPress: onClose, children: /* @__PURE__ */ jsxs(
     View,
     {
       style: [
-        styles13.sheet,
+        styles12.sheet,
         {
           backgroundColor: theme.colors.surface,
           borderTopLeftRadius: theme.radii.lg,
@@ -2263,21 +2235,21 @@ function MessageActions({
         theme.shadows.lg
       ],
       children: [
-        showEmojiRow ? /* @__PURE__ */ jsx(View, { style: [styles13.emojiRow, { borderBottomColor: theme.colors.border }], children: emojis.map((emoji) => /* @__PURE__ */ jsx(
+        showEmojiRow ? /* @__PURE__ */ jsx(View, { style: [styles12.emojiRow, { borderBottomColor: theme.colors.border }], children: emojis.map((emoji) => /* @__PURE__ */ jsx(
           Pressable,
           {
             onPress: () => {
               onPickReaction(emoji);
               onClose();
             },
-            style: styles13.emojiBtn,
+            style: styles12.emojiBtn,
             hitSlop: 6,
             accessibilityLabel: `React with ${emoji}`,
-            children: /* @__PURE__ */ jsx(Text, { style: styles13.emoji, children: emoji })
+            children: /* @__PURE__ */ jsx(Text, { style: styles12.emoji, children: emoji })
           },
           emoji
         )) }) : null,
-        items.map((item) => /* @__PURE__ */ jsxs(Pressable, { onPress: item.onPress, style: styles13.item, children: [
+        items.map((item) => /* @__PURE__ */ jsxs(Pressable, { onPress: item.onPress, style: styles12.item, children: [
           /* @__PURE__ */ jsx(
             PoolseIcon,
             {
@@ -2290,7 +2262,7 @@ function MessageActions({
             Text,
             {
               style: [
-                styles13.itemText,
+                styles12.itemText,
                 {
                   color: item.danger ? theme.colors.error : theme.colors.ink,
                   fontFamily: theme.type.fontBody
@@ -2304,7 +2276,7 @@ function MessageActions({
     }
   ) }) });
 }
-var styles13 = StyleSheet.create({
+var styles12 = StyleSheet.create({
   backdrop: {
     flex: 1,
     backgroundColor: "rgba(0,0,0,0.35)",
@@ -2369,7 +2341,7 @@ function AttachmentPreview({ attachment, onPress, maxWidth = 280 }) {
       View,
       {
         style: [
-          styles14.imagePlaceholder,
+          styles13.imagePlaceholder,
           {
             width: maxWidth,
             height: 200,
@@ -2386,7 +2358,7 @@ function AttachmentPreview({ attachment, onPress, maxWidth = 280 }) {
       onPress,
       disabled: !onPress,
       style: [
-        styles14.fileCard,
+        styles13.fileCard,
         {
           backgroundColor: theme.colors.surface2,
           borderColor: theme.colors.border,
@@ -2399,12 +2371,12 @@ function AttachmentPreview({ attachment, onPress, maxWidth = 280 }) {
           /* @__PURE__ */ jsx(
             Text,
             {
-              style: [styles14.fileName, { color: theme.colors.ink, fontFamily: theme.type.fontBody }],
+              style: [styles13.fileName, { color: theme.colors.ink, fontFamily: theme.type.fontBody }],
               numberOfLines: 1,
               children: attachment.original_filename ?? "file"
             }
           ),
-          /* @__PURE__ */ jsx(Text, { style: [styles14.fileSize, { color: theme.colors.ink3 }], children: formatBytes2(attachment.byte_size) })
+          /* @__PURE__ */ jsx(Text, { style: [styles13.fileSize, { color: theme.colors.ink3 }], children: formatBytes2(attachment.byte_size) })
         ] })
       ]
     }
@@ -2416,7 +2388,7 @@ function formatBytes2(n) {
   if (n < 1024 * 1024 * 1024) return `${(n / 1024 / 1024).toFixed(1)} MB`;
   return `${(n / 1024 / 1024 / 1024).toFixed(1)} GB`;
 }
-var styles14 = StyleSheet.create({
+var styles13 = StyleSheet.create({
   imagePlaceholder: {},
   fileCard: {
     flexDirection: "row",
@@ -2445,7 +2417,7 @@ function ImageMosaic({ images, maxWidth, radius }) {
       View,
       {
         style: [
-          styles15.root,
+          styles14.root,
           {
             borderRadius: r,
             ...maxWidth ? { maxWidth } : {}
@@ -2456,17 +2428,17 @@ function ImageMosaic({ images, maxWidth, radius }) {
             Tile,
             {
               attachment: visible[0],
-              style: styles15.tileFull,
+              style: styles14.tileFull,
               onPress: () => setViewerIndex(0),
               overlay: null
             }
           ) : null,
-          n === 2 ? /* @__PURE__ */ jsxs(View, { style: styles15.rowEven, children: [
+          n === 2 ? /* @__PURE__ */ jsxs(View, { style: styles14.rowEven, children: [
             /* @__PURE__ */ jsx(
               Tile,
               {
                 attachment: visible[0],
-                style: styles15.tileHalfSquare,
+                style: styles14.tileHalfSquare,
                 onPress: () => setViewerIndex(0),
                 overlay: null
               }
@@ -2475,7 +2447,7 @@ function ImageMosaic({ images, maxWidth, radius }) {
               Tile,
               {
                 attachment: visible[1],
-                style: styles15.tileHalfSquare,
+                style: styles14.tileHalfSquare,
                 onPress: () => setViewerIndex(1),
                 overlay: null
               }
@@ -2486,17 +2458,17 @@ function ImageMosaic({ images, maxWidth, radius }) {
               Tile,
               {
                 attachment: visible[0],
-                style: styles15.tileHero,
+                style: styles14.tileHero,
                 onPress: () => setViewerIndex(0),
                 overlay: null
               }
             ),
-            /* @__PURE__ */ jsxs(View, { style: [styles15.rowEven, { marginTop: 2 }], children: [
+            /* @__PURE__ */ jsxs(View, { style: [styles14.rowEven, { marginTop: 2 }], children: [
               /* @__PURE__ */ jsx(
                 Tile,
                 {
                   attachment: visible[1],
-                  style: styles15.tileHalfSquare,
+                  style: styles14.tileHalfSquare,
                   onPress: () => setViewerIndex(1),
                   overlay: null
                 }
@@ -2505,7 +2477,7 @@ function ImageMosaic({ images, maxWidth, radius }) {
                 Tile,
                 {
                   attachment: visible[2],
-                  style: styles15.tileHalfSquare,
+                  style: styles14.tileHalfSquare,
                   onPress: () => setViewerIndex(2),
                   overlay: null
                 }
@@ -2513,12 +2485,12 @@ function ImageMosaic({ images, maxWidth, radius }) {
             ] })
           ] }) : null,
           n === 4 ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsxs(View, { style: styles15.rowEven, children: [
+            /* @__PURE__ */ jsxs(View, { style: styles14.rowEven, children: [
               /* @__PURE__ */ jsx(
                 Tile,
                 {
                   attachment: visible[0],
-                  style: styles15.tileHalfSquare,
+                  style: styles14.tileHalfSquare,
                   onPress: () => setViewerIndex(0),
                   overlay: null
                 }
@@ -2527,18 +2499,18 @@ function ImageMosaic({ images, maxWidth, radius }) {
                 Tile,
                 {
                   attachment: visible[1],
-                  style: styles15.tileHalfSquare,
+                  style: styles14.tileHalfSquare,
                   onPress: () => setViewerIndex(1),
                   overlay: null
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs(View, { style: [styles15.rowEven, { marginTop: 2 }], children: [
+            /* @__PURE__ */ jsxs(View, { style: [styles14.rowEven, { marginTop: 2 }], children: [
               /* @__PURE__ */ jsx(
                 Tile,
                 {
                   attachment: visible[2],
-                  style: styles15.tileHalfSquare,
+                  style: styles14.tileHalfSquare,
                   onPress: () => setViewerIndex(2),
                   overlay: null
                 }
@@ -2547,7 +2519,7 @@ function ImageMosaic({ images, maxWidth, radius }) {
                 Tile,
                 {
                   attachment: visible[3],
-                  style: styles15.tileHalfSquare,
+                  style: styles14.tileHalfSquare,
                   onPress: () => setViewerIndex(3),
                   overlay: overflow > 0 ? `+${overflow}` : null
                 }
@@ -2583,18 +2555,18 @@ function Tile({
 }) {
   const theme = usePoolseTheme();
   const { url } = useAttachmentUrl(attachment.id);
-  return /* @__PURE__ */ jsxs(Pressable, { onPress, style: [styles15.tileBase, style], children: [
+  return /* @__PURE__ */ jsxs(Pressable, { onPress, style: [styles14.tileBase, style], children: [
     url ? /* @__PURE__ */ jsx(
       Image,
       {
         source: { uri: url },
-        style: [styles15.tileImage, { backgroundColor: theme.colors.surface2 }],
+        style: [styles14.tileImage, { backgroundColor: theme.colors.surface2 }],
         resizeMode: "cover",
         accessible: true,
         accessibilityLabel: attachment.original_filename ?? "image"
       }
-    ) : /* @__PURE__ */ jsx(View, { style: [styles15.tileImage, { backgroundColor: theme.colors.surface2 }] }),
-    overlay ? /* @__PURE__ */ jsx(View, { style: styles15.overflow, children: /* @__PURE__ */ jsx(Text, { style: styles15.overflowText, children: overlay }) }) : null
+    ) : /* @__PURE__ */ jsx(View, { style: [styles14.tileImage, { backgroundColor: theme.colors.surface2 }] }),
+    overlay ? /* @__PURE__ */ jsx(View, { style: styles14.overflow, children: /* @__PURE__ */ jsx(Text, { style: styles14.overflowText, children: overlay }) }) : null
   ] });
 }
 function FullScreenViewer({
@@ -2603,7 +2575,7 @@ function FullScreenViewer({
 }) {
   const { url } = useAttachmentUrl(attachment.id);
   const { width, height } = Dimensions.get("window");
-  return /* @__PURE__ */ jsxs(Pressable, { style: styles15.viewer, onPress: onClose, children: [
+  return /* @__PURE__ */ jsxs(Pressable, { style: styles14.viewer, onPress: onClose, children: [
     url ? /* @__PURE__ */ jsx(
       Image,
       {
@@ -2619,14 +2591,14 @@ function FullScreenViewer({
       {
         onPress: onClose,
         hitSlop: 12,
-        style: styles15.closeBtn,
+        style: styles14.closeBtn,
         accessibilityLabel: "Close viewer",
         children: /* @__PURE__ */ jsx(PoolseIcon, { name: "close", size: 20, color: "#ffffff" })
       }
     )
   ] });
 }
-var styles15 = StyleSheet.create({
+var styles14 = StyleSheet.create({
   root: {
     width: "100%",
     overflow: "hidden",
@@ -2781,7 +2753,7 @@ function MessageBubble({
     View,
     {
       style: [
-        styles16.wrap,
+        styles15.wrap,
         {
           alignSelf: isSelf ? "flex-end" : "flex-start",
           // Pixel maxWidth (not percentage) so single-line and
@@ -2795,7 +2767,7 @@ function MessageBubble({
         View,
         {
           style: [
-            styles16.bubble,
+            styles15.bubble,
             {
               backgroundColor: bubbleColor,
               borderColor: isSelf ? "transparent" : theme.colors.border,
@@ -2817,7 +2789,7 @@ function MessageBubble({
             theme.shadows.sm
           ],
           children: [
-            showSenderName && !isSelf && (groupPosition === "first" || groupPosition === "standalone") ? /* @__PURE__ */ jsx(Text, { style: [styles16.senderName, { color: senderTint, fontFamily: theme.type.fontBody }], children: senderLabel }) : null,
+            showSenderName && !isSelf && (groupPosition === "first" || groupPosition === "standalone") ? /* @__PURE__ */ jsx(Text, { style: [styles15.senderName, { color: senderTint, fontFamily: theme.type.fontBody }], children: senderLabel }) : null,
             message.quoted_message ? /* @__PURE__ */ jsx(
               QuotedCard,
               {
@@ -2833,7 +2805,7 @@ function MessageBubble({
               Text,
               {
                 style: [
-                  styles16.body,
+                  styles15.body,
                   {
                     color: theme.colors.ink3,
                     fontFamily: theme.type.fontBody,
@@ -2858,7 +2830,7 @@ function MessageBubble({
               Text,
               {
                 style: [
-                  styles16.body,
+                  styles15.body,
                   {
                     color: textColor,
                     fontFamily: theme.type.fontBody,
@@ -2873,18 +2845,18 @@ function MessageBubble({
               Text,
               {
                 style: [
-                  styles16.readMore,
+                  styles15.readMore,
                   { color: isSelf ? theme.colors.onBrand : theme.colors.brand }
                 ],
                 children: expanded ? "Show less" : "Read more"
               }
             ) }) : null,
-            /* @__PURE__ */ jsxs(View, { style: styles16.metaRow, children: [
+            /* @__PURE__ */ jsxs(View, { style: styles15.metaRow, children: [
               isEdited ? /* @__PURE__ */ jsx(
                 Text,
                 {
                   style: [
-                    styles16.editedTag,
+                    styles15.editedTag,
                     {
                       color: isSelf ? theme.colors.onBrand : theme.colors.ink3,
                       opacity: 0.7
@@ -2897,7 +2869,7 @@ function MessageBubble({
                 Text,
                 {
                   style: [
-                    styles16.meta,
+                    styles15.meta,
                     {
                       color: isSelf ? theme.colors.onBrand : theme.colors.ink3,
                       opacity: isSelf ? 0.85 : 1
@@ -2906,7 +2878,7 @@ function MessageBubble({
                   children: time
                 }
               ),
-              isSelf && readState ? /* @__PURE__ */ jsx(View, { style: styles16.readTick, children: /* @__PURE__ */ jsx(
+              isSelf && readState ? /* @__PURE__ */ jsx(View, { style: styles15.readTick, children: /* @__PURE__ */ jsx(
                 PoolseIcon,
                 {
                   name: readState === "read" ? "check-double" : "check",
@@ -2915,7 +2887,7 @@ function MessageBubble({
                 }
               ) }) : null
             ] }),
-            actionsTrigger ? /* @__PURE__ */ jsx(View, { style: styles16.actionsSlot, children: actionsTrigger }) : null
+            actionsTrigger ? /* @__PURE__ */ jsx(View, { style: styles15.actionsSlot, children: actionsTrigger }) : null
           ]
         }
       )
@@ -2940,15 +2912,15 @@ function QuotedCard({
       onPress,
       disabled: !onPress,
       style: [
-        styles16.quoted,
+        styles15.quoted,
         {
           backgroundColor: bg,
           borderLeftColor: accent
         }
       ],
       children: [
-        /* @__PURE__ */ jsx(Text, { style: [styles16.quotedSender, { color: accent }], children: senderName }),
-        /* @__PURE__ */ jsx(Text, { style: [styles16.quotedBody, { color: txt }], numberOfLines: 2, children: quoted.body ?? "\u2026" })
+        /* @__PURE__ */ jsx(Text, { style: [styles15.quotedSender, { color: accent }], children: senderName }),
+        /* @__PURE__ */ jsx(Text, { style: [styles15.quotedBody, { color: txt }], numberOfLines: 2, children: quoted.body ?? "\u2026" })
       ]
     }
   );
@@ -2980,7 +2952,7 @@ function formatTime(iso) {
 function isSameDay(a, b) {
   return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
 }
-var styles16 = StyleSheet.create({
+var styles15 = StyleSheet.create({
   wrap: {
     marginBottom: 2
   },
@@ -3060,7 +3032,7 @@ function ReactionStrip({
   });
   const entries = Object.entries(reactions);
   if (entries.length === 0) return null;
-  return /* @__PURE__ */ jsx(View, { style: styles17.strip, children: entries.map(([emoji, userIds]) => {
+  return /* @__PURE__ */ jsx(View, { style: styles16.strip, children: entries.map(([emoji, userIds]) => {
     const userArr = Array.isArray(userIds) ? userIds : [];
     const meReacted = meId !== null && userArr.includes(meId);
     return /* @__PURE__ */ jsxs(
@@ -3068,7 +3040,7 @@ function ReactionStrip({
       {
         onPress: () => meReacted ? removeReaction(emoji) : addReaction(emoji),
         style: [
-          styles17.chip,
+          styles16.chip,
           {
             backgroundColor: meReacted ? theme.colors.brandSoft : theme.colors.surface2,
             borderColor: meReacted ? theme.colors.brand : theme.colors.border,
@@ -3077,12 +3049,12 @@ function ReactionStrip({
           }
         ],
         children: [
-          /* @__PURE__ */ jsx(Text, { style: styles17.emoji, children: emoji }),
+          /* @__PURE__ */ jsx(Text, { style: styles16.emoji, children: emoji }),
           /* @__PURE__ */ jsx(
             Text,
             {
               style: [
-                styles17.count,
+                styles16.count,
                 {
                   color: meReacted ? theme.colors.brand : theme.colors.ink2,
                   fontWeight: meReacted ? "700" : "600"
@@ -3104,11 +3076,11 @@ function ReactionPicker({
   emojis = DEFAULT_EMOJIS
 }) {
   const theme = usePoolseTheme();
-  return /* @__PURE__ */ jsx(Modal, { visible, transparent: true, animationType: "fade", onRequestClose: onClose, children: /* @__PURE__ */ jsx(Pressable, { style: styles17.backdrop, onPress: onClose, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Modal, { visible, transparent: true, animationType: "fade", onRequestClose: onClose, children: /* @__PURE__ */ jsx(Pressable, { style: styles16.backdrop, onPress: onClose, children: /* @__PURE__ */ jsx(
     View,
     {
       style: [
-        styles17.sheet,
+        styles16.sheet,
         {
           backgroundColor: theme.colors.surface,
           borderRadius: theme.radii.lg
@@ -3118,19 +3090,19 @@ function ReactionPicker({
       children: emojis.map((emoji) => /* @__PURE__ */ jsx(
         Pressable,
         {
-          style: styles17.emojiBtn,
+          style: styles16.emojiBtn,
           onPress: () => {
             onPick(emoji);
             onClose();
           },
-          children: /* @__PURE__ */ jsx(Text, { style: styles17.bigEmoji, children: emoji })
+          children: /* @__PURE__ */ jsx(Text, { style: styles16.bigEmoji, children: emoji })
         },
         emoji
       ))
     }
   ) }) });
 }
-var styles17 = StyleSheet.create({
+var styles16 = StyleSheet.create({
   strip: {
     flexDirection: "row",
     flexWrap: "wrap",
@@ -3298,15 +3270,15 @@ function MessageRow({
     View,
     {
       style: [
-        styles18.row,
+        styles17.row,
         { alignSelf: isSelf ? "flex-end" : "flex-start" },
         // Lift this row above the dim backdrop the parent renders
         // during edit mode. zIndex covers iOS / web; elevation does
         // the equivalent on Android.
-        isEditing ? styles18.rowEditing : null
+        isEditing ? styles17.rowEditing : null
       ],
       children: [
-        showAvatarSlot ? /* @__PURE__ */ jsx(View, { style: styles18.avatarSlot, children: showAvatarRender ? /* @__PURE__ */ jsx(
+        showAvatarSlot ? /* @__PURE__ */ jsx(View, { style: styles17.avatarSlot, children: showAvatarRender ? /* @__PURE__ */ jsx(
           Avatar,
           {
             src: avatarUrl ?? null,
@@ -3315,14 +3287,14 @@ function MessageRow({
             size: "sm"
           }
         ) : null }) : null,
-        /* @__PURE__ */ jsxs(View, { style: styles18.bubbleCol, children: [
+        /* @__PURE__ */ jsxs(View, { style: styles17.bubbleCol, children: [
           swipeEnabled ? /* @__PURE__ */ jsx(
             Animated.View,
             {
               pointerEvents: "none",
               style: [
-                styles18.replyHint,
-                isSelf ? styles18.replyHintRight : styles18.replyHintLeft,
+                styles17.replyHint,
+                isSelf ? styles17.replyHintRight : styles17.replyHintLeft,
                 {
                   opacity: replyIconOpacity,
                   transform: [{ scale: replyIconScale }],
@@ -3373,13 +3345,13 @@ function MessageRow({
               )
             }
           ),
-          threads && (msg.reply_count ?? 0) > 0 && onOpenThread ? /* @__PURE__ */ jsx(Pressable, { onPress: onOpenThread, style: styles18.threadPill, children: /* @__PURE__ */ jsxs(Text, { style: [styles18.threadPillText, { color: theme.colors.brand }], children: [
+          threads && (msg.reply_count ?? 0) > 0 && onOpenThread ? /* @__PURE__ */ jsx(Pressable, { onPress: onOpenThread, style: styles17.threadPill, children: /* @__PURE__ */ jsxs(Text, { style: [styles17.threadPillText, { color: theme.colors.brand }], children: [
             "\u{1F4AC} ",
             msg.reply_count,
             " ",
             msg.reply_count === 1 ? "reply" : "replies"
           ] }) }) : null,
-          reactions ? /* @__PURE__ */ jsx(View, { style: [styles18.reactionsRow, { alignSelf: isSelf ? "flex-end" : "flex-start" }], children: /* @__PURE__ */ jsx(
+          reactions ? /* @__PURE__ */ jsx(View, { style: [styles17.reactionsRow, { alignSelf: isSelf ? "flex-end" : "flex-start" }], children: /* @__PURE__ */ jsx(
             ReactionStrip,
             {
               messageId: msg.id,
@@ -3438,7 +3410,7 @@ function MessageRow({
     }
   );
 }
-var styles18 = StyleSheet.create({
+var styles17 = StyleSheet.create({
   row: {
     flexDirection: "row",
     alignItems: "flex-end",
@@ -3598,13 +3570,13 @@ function ThreadSheet({
     ),
     [rootMessage, meId, labelFor, avatarFor]
   );
-  return /* @__PURE__ */ jsxs(View, { style: styles19.modalRoot, children: [
-    /* @__PURE__ */ jsx(Pressable, { style: styles19.backdrop, onPress: onClose, accessibilityLabel: "Close thread" }),
+  return /* @__PURE__ */ jsxs(View, { style: styles18.modalRoot, children: [
+    /* @__PURE__ */ jsx(Pressable, { style: styles18.backdrop, onPress: onClose, accessibilityLabel: "Close thread" }),
     /* @__PURE__ */ jsxs(
       Animated.View,
       {
         style: [
-          styles19.sheet,
+          styles18.sheet,
           {
             height: sheetHeight,
             backgroundColor: theme.colors.paper,
@@ -3616,14 +3588,14 @@ function ThreadSheet({
         ],
         children: [
           /* @__PURE__ */ jsxs(View, { ...panHandlers, children: [
-            /* @__PURE__ */ jsx(View, { style: styles19.dragHandle, children: /* @__PURE__ */ jsx(View, { style: [styles19.dragPill, { backgroundColor: theme.colors.ink3 }] }) }),
-            /* @__PURE__ */ jsxs(View, { style: [styles19.header, { borderBottomColor: theme.colors.border }], children: [
+            /* @__PURE__ */ jsx(View, { style: styles18.dragHandle, children: /* @__PURE__ */ jsx(View, { style: [styles18.dragPill, { backgroundColor: theme.colors.ink3 }] }) }),
+            /* @__PURE__ */ jsxs(View, { style: [styles18.header, { borderBottomColor: theme.colors.border }], children: [
               /* @__PURE__ */ jsx(
                 Pressable,
                 {
                   onPress: onClose,
                   hitSlop: 16,
-                  style: [styles19.closeBtn, { backgroundColor: theme.colors.surface2 }],
+                  style: [styles18.closeBtn, { backgroundColor: theme.colors.surface2 }],
                   accessibilityLabel: "Close thread",
                   children: /* @__PURE__ */ jsx(PoolseIcon, { name: "close", size: 18, color: theme.colors.ink })
                 }
@@ -3632,7 +3604,7 @@ function ThreadSheet({
                 Text,
                 {
                   style: [
-                    styles19.title,
+                    styles18.title,
                     { color: theme.colors.ink, fontFamily: theme.type.fontDisplay }
                   ],
                   children: "Thread"
@@ -3643,12 +3615,12 @@ function ThreadSheet({
           /* @__PURE__ */ jsxs(
             KeyboardAvoidingView,
             {
-              style: styles19.kavBody,
+              style: styles18.kavBody,
               behavior: Platform.OS === "ios" ? "padding" : "height",
               keyboardVerticalOffset: Platform.OS === "ios" ? gutter : 0,
               children: [
-                /* @__PURE__ */ jsx(View, { style: [styles19.rootPreview, { backgroundColor: theme.colors.surface2 }], children: rootRow }),
-                /* @__PURE__ */ jsx(View, { style: styles19.listWrap, children: /* @__PURE__ */ jsx(
+                /* @__PURE__ */ jsx(View, { style: [styles18.rootPreview, { backgroundColor: theme.colors.surface2 }], children: rootRow }),
+                /* @__PURE__ */ jsx(View, { style: styles18.listWrap, children: /* @__PURE__ */ jsx(
                   MessageList,
                   {
                     messages: replies,
@@ -3684,7 +3656,7 @@ function ThreadSheet({
     )
   ] });
 }
-var styles19 = StyleSheet.create({
+var styles18 = StyleSheet.create({
   modalRoot: {
     flex: 1,
     justifyContent: "flex-end"
@@ -3756,7 +3728,7 @@ function TypingIndicator({ typing, labelFor }) {
   const ids = Array.from(typing);
   const isTyping = ids.length > 0;
   if (!isTyping) return /* @__PURE__ */ jsx(View, { style: { height: 0 } });
-  return /* @__PURE__ */ jsxs(View, { style: styles20.row, children: [
+  return /* @__PURE__ */ jsxs(View, { style: styles19.row, children: [
     /* @__PURE__ */ jsx(TypingDots, {}),
     /* @__PURE__ */ jsx(TypingLabel, { ids, ...labelFor ? { labelFor } : {} })
   ] });
@@ -3801,7 +3773,7 @@ function TypingDots() {
     ],
     opacity: val.interpolate({ inputRange: [0, 1], outputRange: [0.5, 1] })
   });
-  return /* @__PURE__ */ jsxs(View, { style: styles20.dotsWrap, children: [
+  return /* @__PURE__ */ jsxs(View, { style: styles19.dotsWrap, children: [
     /* @__PURE__ */ jsx(Animated.View, { style: dot(a) }),
     /* @__PURE__ */ jsx(Animated.View, { style: dot(b) }),
     /* @__PURE__ */ jsx(Animated.View, { style: dot(c) })
@@ -3817,9 +3789,9 @@ function TypingLabel({
   const name1 = useDisplayName(id1, labelFor);
   const name2 = useDisplayName(id2, labelFor);
   const text = ids.length === 1 ? `${name1} is typing` : ids.length === 2 ? `${name1} and ${name2} are typing` : `${ids.length} people are typing`;
-  return /* @__PURE__ */ jsx(Text, { style: [styles20.label, { color: theme.colors.ink2, fontFamily: theme.type.fontBody }], children: text });
+  return /* @__PURE__ */ jsx(Text, { style: [styles19.label, { color: theme.colors.ink2, fontFamily: theme.type.fontBody }], children: text });
 }
-var styles20 = StyleSheet.create({
+var styles19 = StyleSheet.create({
   row: {
     flexDirection: "row",
     alignItems: "center",
@@ -4057,12 +4029,12 @@ function ConversationView({
   return /* @__PURE__ */ jsx(UploadProvider, { children: /* @__PURE__ */ jsxs(
     KeyboardAvoidingView,
     {
-      style: [styles21.root, { backgroundColor: theme.colors.paper }],
+      style: [styles20.root, { backgroundColor: theme.colors.paper }],
       behavior: Platform.OS === "ios" ? "padding" : "height",
       keyboardVerticalOffset: keyboardOffset,
       children: [
         headerNode,
-        /* @__PURE__ */ jsxs(View, { style: styles21.listWrap, children: [
+        /* @__PURE__ */ jsxs(View, { style: styles20.listWrap, children: [
           /* @__PURE__ */ jsx(
             MessageList,
             {
@@ -4080,7 +4052,7 @@ function ConversationView({
           editingId ? /* @__PURE__ */ jsx(
             Pressable,
             {
-              style: styles21.editBackdrop,
+              style: styles20.editBackdrop,
               onPress: () => setEditingId(null),
               accessibilityLabel: "Cancel editing"
             }
@@ -4115,7 +4087,7 @@ function readStateForMessage(msg, members, meId, sequenceByMessageId) {
   });
   return anyRead ? "read" : "sent";
 }
-var styles21 = StyleSheet.create({
+var styles20 = StyleSheet.create({
   root: {
     flex: 1
   },
@@ -4197,13 +4169,13 @@ function UserPickerSheet({
       animationType: "slide",
       onRequestClose: handleClose,
       statusBarTranslucent: true,
-      children: /* @__PURE__ */ jsxs(View, { style: styles22.modalRoot, children: [
-        /* @__PURE__ */ jsx(Pressable, { style: styles22.backdrop, onPress: handleClose }),
+      children: /* @__PURE__ */ jsxs(View, { style: styles21.modalRoot, children: [
+        /* @__PURE__ */ jsx(Pressable, { style: styles21.backdrop, onPress: handleClose }),
         /* @__PURE__ */ jsxs(
           Animated.View,
           {
             style: [
-              styles22.sheet,
+              styles21.sheet,
               {
                 backgroundColor: theme.colors.paper,
                 borderTopLeftRadius: theme.radii.xl,
@@ -4213,14 +4185,14 @@ function UserPickerSheet({
               theme.shadows.lg
             ],
             children: [
-              /* @__PURE__ */ jsx(View, { ...panHandlers, style: styles22.dragHandle, children: /* @__PURE__ */ jsx(View, { style: [styles22.dragPill, { backgroundColor: theme.colors.ink3 }] }) }),
-              /* @__PURE__ */ jsxs(View, { style: styles22.header, children: [
+              /* @__PURE__ */ jsx(View, { ...panHandlers, style: styles21.dragHandle, children: /* @__PURE__ */ jsx(View, { style: [styles21.dragPill, { backgroundColor: theme.colors.ink3 }] }) }),
+              /* @__PURE__ */ jsxs(View, { style: styles21.header, children: [
                 /* @__PURE__ */ jsx(
                   Pressable,
                   {
                     onPress: handleClose,
                     hitSlop: 16,
-                    style: [styles22.closeBtn, { backgroundColor: theme.colors.surface2 }],
+                    style: [styles21.closeBtn, { backgroundColor: theme.colors.surface2 }],
                     accessibilityLabel: "Close picker",
                     children: /* @__PURE__ */ jsx(PoolseIcon, { name: "close", size: 18, color: theme.colors.ink })
                   }
@@ -4229,7 +4201,7 @@ function UserPickerSheet({
                   Text,
                   {
                     style: [
-                      styles22.title,
+                      styles21.title,
                       { color: theme.colors.ink, fontFamily: theme.type.fontDisplay }
                     ],
                     numberOfLines: 1,
@@ -4243,7 +4215,7 @@ function UserPickerSheet({
                     disabled: !canCreate,
                     hitSlop: 6,
                     style: [
-                      styles22.createBtn,
+                      styles21.createBtn,
                       {
                         backgroundColor: canCreate ? theme.colors.brand : theme.colors.surface2,
                         opacity: canCreate ? 1 : 0.6
@@ -4274,7 +4246,7 @@ function UserPickerSheet({
                   value: groupName,
                   onChangeText: setGroupName,
                   style: [
-                    styles22.groupNameInput,
+                    styles21.groupNameInput,
                     {
                       color: theme.colors.ink,
                       backgroundColor: theme.colors.surface2,
@@ -4293,7 +4265,7 @@ function UserPickerSheet({
                   value: query,
                   onChangeText: setQuery,
                   style: [
-                    styles22.searchInput,
+                    styles21.searchInput,
                     {
                       color: theme.colors.ink,
                       backgroundColor: theme.colors.surface2,
@@ -4309,7 +4281,7 @@ function UserPickerSheet({
                 {
                   data: filtered,
                   keyExtractor: (u) => u.externalId,
-                  ListEmptyComponent: /* @__PURE__ */ jsx(View, { style: styles22.empty, children: /* @__PURE__ */ jsx(Text, { style: [styles22.emptyText, { color: theme.colors.ink3 }], children: query ? "No matches." : "No users to show." }) }),
+                  ListEmptyComponent: /* @__PURE__ */ jsx(View, { style: styles21.empty, children: /* @__PURE__ */ jsx(Text, { style: [styles21.emptyText, { color: theme.colors.ink3 }], children: query ? "No matches." : "No users to show." }) }),
                   renderItem: ({ item }) => /* @__PURE__ */ jsx(
                     UserRow,
                     {
@@ -4347,29 +4319,29 @@ function UserRow({
     {
       onPress,
       style: [
-        styles22.row,
+        styles21.row,
         {
           backgroundColor: selected ? theme.colors.brandSoft : "transparent"
         }
       ],
       children: [
-        user.avatarUrl ? /* @__PURE__ */ jsx(Image, { source: { uri: user.avatarUrl }, style: styles22.avatarImg }) : /* @__PURE__ */ jsx(Avatar, { src: null, name: user.name, seed: user.externalId, size: "md" }),
-        /* @__PURE__ */ jsxs(View, { style: styles22.body, children: [
+        user.avatarUrl ? /* @__PURE__ */ jsx(Image, { source: { uri: user.avatarUrl }, style: styles21.avatarImg }) : /* @__PURE__ */ jsx(Avatar, { src: null, name: user.name, seed: user.externalId, size: "md" }),
+        /* @__PURE__ */ jsxs(View, { style: styles21.body, children: [
           /* @__PURE__ */ jsx(
             Text,
             {
-              style: [styles22.name, { color: theme.colors.ink, fontFamily: theme.type.fontBody }],
+              style: [styles21.name, { color: theme.colors.ink, fontFamily: theme.type.fontBody }],
               numberOfLines: 1,
               children: user.name
             }
           ),
-          user.subtitle ? /* @__PURE__ */ jsx(Text, { style: [styles22.subtitle, { color: theme.colors.ink3 }], numberOfLines: 1, children: user.subtitle }) : null
+          user.subtitle ? /* @__PURE__ */ jsx(Text, { style: [styles21.subtitle, { color: theme.colors.ink3 }], numberOfLines: 1, children: user.subtitle }) : null
         ] }),
         isGroup ? /* @__PURE__ */ jsx(
           View,
           {
             style: [
-              styles22.checkbox,
+              styles21.checkbox,
               {
                 borderColor: selected ? theme.colors.brand : theme.colors.border,
                 backgroundColor: selected ? theme.colors.brand : "transparent"
@@ -4382,7 +4354,7 @@ function UserRow({
     }
   );
 }
-var styles22 = StyleSheet.create({
+var styles21 = StyleSheet.create({
   modalRoot: {
     flex: 1,
     justifyContent: "flex-end"
@@ -4642,7 +4614,7 @@ var PoolseInbox = forwardRef(
       },
       [renderConversationRow, meExternalId, labelFor, avatarFor, unreadCounts]
     );
-    return /* @__PURE__ */ jsxs(View, { style: [styles23.root, { backgroundColor: theme.colors.paper }], children: [
+    return /* @__PURE__ */ jsxs(View, { style: [styles22.root, { backgroundColor: theme.colors.paper }], children: [
       /* @__PURE__ */ jsxs(
         Animated.View,
         {
@@ -4653,7 +4625,7 @@ var PoolseInbox = forwardRef(
               View,
               {
                 style: [
-                  styles23.listHeader,
+                  styles22.listHeader,
                   {
                     backgroundColor: theme.colors.surface,
                     borderBottomColor: theme.colors.border
@@ -4664,13 +4636,13 @@ var PoolseInbox = forwardRef(
                     Text,
                     {
                       style: [
-                        styles23.listTitle,
+                        styles22.listTitle,
                         { color: theme.colors.ink, fontFamily: theme.type.fontDisplay }
                       ],
                       children: title
                     }
                   ),
-                  /* @__PURE__ */ jsxs(View, { style: styles23.headerActions, children: [
+                  /* @__PURE__ */ jsxs(View, { style: styles22.headerActions, children: [
                     users ? /* @__PURE__ */ jsxs(Fragment, { children: [
                       /* @__PURE__ */ jsx(
                         HeaderIconButton,
@@ -4783,7 +4755,7 @@ function HeaderIconButton({
       hitSlop: 10,
       accessibilityLabel: label,
       style: ({ pressed }) => [
-        styles23.iconBtn,
+        styles22.iconBtn,
         {
           backgroundColor: pressed ? theme.colors.surface2 : "transparent"
         }
@@ -4813,31 +4785,31 @@ function DefaultConversationRow({
     {
       onPress,
       style: [
-        styles23.row,
+        styles22.row,
         {
           backgroundColor: selected ? theme.colors.surface2 : "transparent",
           borderBottomColor: theme.colors.border
         }
       ],
       children: [
-        avatarUrl ? /* @__PURE__ */ jsx(Image, { source: { uri: avatarUrl }, style: styles23.rowAvatar }) : /* @__PURE__ */ jsx(Avatar, { src: null, name: title, seed: avatarSeed, size: "md" }),
-        /* @__PURE__ */ jsxs(View, { style: styles23.rowBody, children: [
+        avatarUrl ? /* @__PURE__ */ jsx(Image, { source: { uri: avatarUrl }, style: styles22.rowAvatar }) : /* @__PURE__ */ jsx(Avatar, { src: null, name: title, seed: avatarSeed, size: "md" }),
+        /* @__PURE__ */ jsxs(View, { style: styles22.rowBody, children: [
           /* @__PURE__ */ jsx(
             Text,
             {
-              style: [styles23.rowTitle, { color: theme.colors.ink, fontFamily: theme.type.fontBody }],
+              style: [styles22.rowTitle, { color: theme.colors.ink, fontFamily: theme.type.fontBody }],
               numberOfLines: 1,
               children: title
             }
           ),
-          /* @__PURE__ */ jsx(Text, { style: [styles23.rowSubtitle, { color: theme.colors.ink3 }], numberOfLines: 1, children: conv.last_message_preview ?? (isDirect ? otherExtId ?? "" : `${(conv.member_external_ids ?? []).length} members`) })
+          /* @__PURE__ */ jsx(Text, { style: [styles22.rowSubtitle, { color: theme.colors.ink3 }], numberOfLines: 1, children: conv.last_message_preview ?? (isDirect ? otherExtId ?? "" : `${(conv.member_external_ids ?? []).length} members`) })
         ] }),
-        unread > 0 ? /* @__PURE__ */ jsx(View, { style: [styles23.unreadPill, { backgroundColor: theme.colors.unreadPill }], children: /* @__PURE__ */ jsx(Text, { style: [styles23.unreadText, { color: theme.colors.unreadPillText }], children: unread > 99 ? "99+" : String(unread) }) }) : null
+        unread > 0 ? /* @__PURE__ */ jsx(View, { style: [styles22.unreadPill, { backgroundColor: theme.colors.unreadPill }], children: /* @__PURE__ */ jsx(Text, { style: [styles22.unreadText, { color: theme.colors.unreadPillText }], children: unread > 99 ? "99+" : String(unread) }) }) : null
       ]
     }
   );
 }
-var styles23 = StyleSheet.create({
+var styles22 = StyleSheet.create({
   root: {
     flex: 1,
     overflow: "hidden"
@@ -5041,10 +5013,10 @@ function VoiceRoomBar({
       View,
       {
         style: [
-          styles24.bar,
+          styles23.bar,
           { backgroundColor: theme.colors.surface, borderBottomColor: theme.colors.border }
         ],
-        children: unavailableSlot ?? /* @__PURE__ */ jsx(Text, { style: [styles24.hint, { color: theme.colors.ink3 }], children: "Voice needs react-native-webrtc and a development build." })
+        children: unavailableSlot ?? /* @__PURE__ */ jsx(Text, { style: [styles23.hint, { color: theme.colors.ink3 }], children: "Voice needs react-native-webrtc and a development build." })
       }
     );
   }
@@ -5052,22 +5024,22 @@ function VoiceRoomBar({
     View,
     {
       style: [
-        styles24.bar,
+        styles23.bar,
         { backgroundColor: theme.colors.surface, borderBottomColor: theme.colors.border }
       ],
       children: [
-        /* @__PURE__ */ jsxs(View, { style: styles24.row, children: [
+        /* @__PURE__ */ jsxs(View, { style: styles23.row, children: [
           /* @__PURE__ */ jsx(
             View,
             {
               style: [
-                styles24.dot,
+                styles23.dot,
                 { backgroundColor: connected ? theme.colors.brand : theme.colors.ink3 }
               ]
             }
           ),
           connected ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(View, { style: styles24.people, children: participants.length === 0 ? /* @__PURE__ */ jsx(Text, { style: [styles24.hint, { color: theme.colors.ink3 }], children: "Waiting for others\u2026" }) : participants.map((p) => /* @__PURE__ */ jsx(ParticipantChip, { participant: p, label: label(p.userId) }, p.userId)) }),
+            /* @__PURE__ */ jsx(View, { style: styles23.people, children: participants.length === 0 ? /* @__PURE__ */ jsx(Text, { style: [styles23.hint, { color: theme.colors.ink3 }], children: "Waiting for others\u2026" }) : participants.map((p) => /* @__PURE__ */ jsx(ParticipantChip, { participant: p, label: label(p.userId) }, p.userId)) }),
             /* @__PURE__ */ jsx(
               Pressable,
               {
@@ -5075,7 +5047,7 @@ function VoiceRoomBar({
                 accessibilityRole: "button",
                 accessibilityState: { selected: muted },
                 style: [
-                  styles24.btn,
+                  styles23.btn,
                   {
                     borderColor: muted ? theme.colors.brand : theme.colors.border,
                     backgroundColor: muted ? theme.colors.brandSoft : theme.colors.paper
@@ -5089,25 +5061,25 @@ function VoiceRoomBar({
               {
                 onPress: leave,
                 accessibilityRole: "button",
-                style: [styles24.btn, { borderColor: theme.colors.error }],
+                style: [styles23.btn, { borderColor: theme.colors.error }],
                 children: /* @__PURE__ */ jsx(Text, { style: { color: theme.colors.error }, children: "Leave" })
               }
             )
           ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(Text, { style: [styles24.hint, { color: theme.colors.ink3 }], children: status === "connecting" ? "Connecting\u2026" : "Talk to everyone here" }),
+            /* @__PURE__ */ jsx(Text, { style: [styles23.hint, { color: theme.colors.ink3 }], children: status === "connecting" ? "Connecting\u2026" : "Talk to everyone here" }),
             /* @__PURE__ */ jsx(
               Pressable,
               {
                 onPress: () => void join(),
                 disabled: status === "connecting",
                 accessibilityRole: "button",
-                style: [styles24.btn, styles24.btnPrimary, { backgroundColor: theme.colors.brand }],
+                style: [styles23.btn, styles23.btnPrimary, { backgroundColor: theme.colors.brand }],
                 children: /* @__PURE__ */ jsx(Text, { style: { color: theme.colors.onBrand, fontWeight: "600" }, children: status === "connecting" ? "Joining\u2026" : "Join Voice" })
               }
             )
           ] })
         ] }),
-        error && /* @__PURE__ */ jsx(Text, { style: [styles24.error, { color: theme.colors.error }], children: error.message })
+        error && /* @__PURE__ */ jsx(Text, { style: [styles23.error, { color: theme.colors.error }], children: error.message })
       ]
     }
   );
@@ -5118,7 +5090,7 @@ function ParticipantChip({ participant, label }) {
     View,
     {
       style: [
-        styles24.chip,
+        styles23.chip,
         {
           backgroundColor: theme.colors.paper,
           // The speaking ring is a border colour swap rather than an
@@ -5137,7 +5109,7 @@ function ParticipantChip({ participant, label }) {
     }
   );
 }
-var styles24 = StyleSheet.create({
+var styles23 = StyleSheet.create({
   bar: { paddingHorizontal: 14, paddingVertical: 8, borderBottomWidth: StyleSheet.hairlineWidth },
   row: { flexDirection: "row", alignItems: "center", gap: 8, flexWrap: "wrap" },
   dot: { width: 8, height: 8, borderRadius: 4 },
@@ -5156,6 +5128,682 @@ var styles24 = StyleSheet.create({
   hint: { fontSize: 13, flexShrink: 1 },
   error: { fontSize: 12, marginTop: 6 }
 });
+
+// src/voice/callTheme.ts
+var callColors = {
+  /** Behind everything. Near-black, warmed very slightly to match the brand. */
+  bg: "#101012",
+  /** Behind a participant tile with no video. */
+  tile: "#1c1c20",
+  /** Scrim under the top/bottom chrome so text stays legible over video. */
+  scrim: "rgba(0,0,0,0.45)",
+  text: "#ffffff",
+  textDim: "rgba(255,255,255,0.72)",
+  textFaint: "rgba(255,255,255,0.5)",
+  /** A control that is off / inactive — translucent over whatever is behind. */
+  control: "rgba(255,255,255,0.16)",
+  /**
+   * A control that is ENGAGED (muted, speaker on, camera off).
+   *
+   * Inverted rather than tinted: at a glance the user needs to see
+   * *which* controls are doing something, and a solid white circle is
+   * unmistakable against five translucent ones in a dim room.
+   */
+  controlActive: "#ffffff",
+  controlActiveIcon: "#101012",
+  danger: "#ef4444",
+  accept: "#22c55e",
+  onAction: "#ffffff"
+};
+var CONTROL_SIZE = 58;
+var CONTROL_SIZE_LARGE = 68;
+var ICONS2 = {
+  speaker: "speaker",
+  earpiece: "phone",
+  headset: "headphones",
+  bluetooth: "bluetooth",
+  auto: "phone"
+};
+function AudioRouteSheet({
+  visible,
+  routes,
+  selectedRouteId,
+  onSelect,
+  onClose
+}) {
+  return /* @__PURE__ */ jsx(Modal, { visible, transparent: true, animationType: "fade", onRequestClose: onClose, children: /* @__PURE__ */ jsx(Pressable, { style: styles24.backdrop, onPress: onClose, accessibilityRole: "button", children: /* @__PURE__ */ jsxs(Pressable, { style: styles24.sheet, onPress: () => {
+  }, children: [
+    /* @__PURE__ */ jsx(View, { style: styles24.grabber }),
+    /* @__PURE__ */ jsx(Text, { style: styles24.title, children: "Audio output" }),
+    routes.map((route) => {
+      const selected = route.id === selectedRouteId;
+      return /* @__PURE__ */ jsxs(
+        Pressable,
+        {
+          onPress: () => {
+            onSelect(route.id);
+            onClose();
+          },
+          accessibilityRole: "button",
+          accessibilityState: { selected },
+          style: ({ pressed }) => [styles24.row, pressed && styles24.rowPressed],
+          children: [
+            /* @__PURE__ */ jsx(
+              PoolseIcon,
+              {
+                name: ICONS2[route.kind],
+                size: 21,
+                color: selected ? callColors.accept : callColors.text,
+                label: null
+              }
+            ),
+            /* @__PURE__ */ jsx(Text, { style: [styles24.label, selected && styles24.labelSelected], children: route.label }),
+            selected && /* @__PURE__ */ jsx(PoolseIcon, { name: "check", size: 19, color: callColors.accept, label: "selected" })
+          ]
+        },
+        route.id
+      );
+    })
+  ] }) }) });
+}
+var styles24 = StyleSheet.create({
+  backdrop: { flex: 1, backgroundColor: "rgba(0,0,0,0.55)", justifyContent: "flex-end" },
+  sheet: {
+    backgroundColor: callColors.tile,
+    borderTopLeftRadius: 22,
+    borderTopRightRadius: 22,
+    paddingHorizontal: 12,
+    paddingTop: 10,
+    paddingBottom: 34,
+    gap: 2
+  },
+  grabber: {
+    alignSelf: "center",
+    width: 38,
+    height: 4,
+    borderRadius: 2,
+    backgroundColor: callColors.textFaint,
+    marginBottom: 12
+  },
+  title: {
+    color: callColors.textDim,
+    fontSize: 12.5,
+    fontWeight: "600",
+    textTransform: "uppercase",
+    letterSpacing: 0.6,
+    paddingHorizontal: 12,
+    paddingBottom: 8
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 14,
+    paddingHorizontal: 12,
+    paddingVertical: 15,
+    borderRadius: 14
+  },
+  rowPressed: { backgroundColor: "rgba(255,255,255,0.08)" },
+  label: { flex: 1, color: callColors.text, fontSize: 16, fontWeight: "500" },
+  labelSelected: { color: callColors.accept }
+});
+function CallAvatar({ name, seed, size, speaking = false }) {
+  const ring = Math.max(2, Math.round(size * 0.045));
+  const outer = size + ring * 4;
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      style: [
+        styles25.ring,
+        {
+          width: outer,
+          height: outer,
+          borderRadius: outer / 2,
+          borderWidth: ring,
+          borderColor: speaking ? callColors.accept : "transparent"
+        }
+      ],
+      children: /* @__PURE__ */ jsx(
+        View,
+        {
+          style: [
+            styles25.circle,
+            {
+              width: size,
+              height: size,
+              borderRadius: size / 2,
+              backgroundColor: userColor(seed)
+            }
+          ],
+          children: /* @__PURE__ */ jsx(
+            Text,
+            {
+              style: [styles25.initials, { fontSize: Math.round(size * 0.38) }],
+              numberOfLines: 1,
+              allowFontScaling: false,
+              children: initialsOf(name)
+            }
+          )
+        }
+      )
+    }
+  );
+}
+function initialsOf(name) {
+  const parts = name.trim().split(/\s+/).filter(Boolean);
+  if (parts.length === 0) return "?";
+  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
+  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+}
+var styles25 = StyleSheet.create({
+  ring: { alignItems: "center", justifyContent: "center" },
+  circle: { alignItems: "center", justifyContent: "center" },
+  initials: { color: "#ffffff", fontWeight: "600" }
+});
+function CallControlButton({
+  icon,
+  label,
+  active = false,
+  tone = "neutral",
+  large = false,
+  disabled = false,
+  onPress,
+  accessibilityLabel
+}) {
+  const size = large ? CONTROL_SIZE_LARGE : CONTROL_SIZE;
+  const background = tone === "danger" ? callColors.danger : tone === "accept" ? callColors.accept : active ? callColors.controlActive : callColors.control;
+  const iconColor = tone === "neutral" && active ? callColors.controlActiveIcon : callColors.onAction;
+  return /* @__PURE__ */ jsxs(View, { style: styles26.slot, children: [
+    /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        onPress,
+        disabled,
+        accessibilityRole: "button",
+        accessibilityState: { disabled, selected: active },
+        accessibilityLabel: accessibilityLabel ?? label ?? icon,
+        hitSlop: 8,
+        style: ({ pressed }) => [
+          styles26.button,
+          {
+            width: size,
+            height: size,
+            borderRadius: size / 2,
+            backgroundColor: background,
+            // Feedback without a layout shift — scaling a round button
+            // inside a fixed slot keeps the row from twitching.
+            opacity: disabled ? 0.4 : pressed ? 0.75 : 1
+          }
+        ],
+        children: /* @__PURE__ */ jsx(PoolseIcon, { name: icon, size: large ? 30 : 25, color: iconColor, label: null })
+      }
+    ),
+    label ? /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles26.label, children: label }) : null
+  ] });
+}
+var styles26 = StyleSheet.create({
+  // Fixed width so captions of different lengths cannot shift the row.
+  slot: { width: 76, alignItems: "center", gap: 7 },
+  button: { alignItems: "center", justifyContent: "center" },
+  label: { color: callColors.textDim, fontSize: 11.5, fontWeight: "500" }
+});
+function CallParticipantTile({
+  participant,
+  VideoTrack,
+  label,
+  style,
+  avatarSize = 72,
+  bleed = false,
+  hideName = false
+}) {
+  const name = participant.isSelf ? "You" : participant.name ?? label(participant.userId);
+  const hasVideo = Boolean(participant.videoTrackRef && VideoTrack);
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: [
+        styles27.tile,
+        bleed ? styles27.bleed : styles27.rounded,
+        {
+          backgroundColor: callColors.tile,
+          // A ring rather than a badge: it reads at a glance across a
+          // grid, and it doesn't cover anyone's face.
+          borderColor: participant.speaking ? callColors.accept : "transparent"
+        },
+        style
+      ],
+      children: [
+        hasVideo && VideoTrack ? /* @__PURE__ */ jsx(
+          VideoTrack,
+          {
+            trackRef: participant.videoTrackRef,
+            style: StyleSheet.absoluteFillObject,
+            objectFit: "cover",
+            mirror: participant.isSelf,
+            zOrder: participant.isSelf ? 1 : 0
+          }
+        ) : /* @__PURE__ */ jsx(View, { style: styles27.placeholder, children: /* @__PURE__ */ jsx(
+          CallAvatar,
+          {
+            name,
+            seed: participant.userId,
+            size: avatarSize,
+            speaking: participant.speaking
+          }
+        ) }),
+        !hideName && /* @__PURE__ */ jsxs(View, { style: [styles27.chip, bleed ? styles27.chipBleed : styles27.chipTile], children: [
+          !participant.micEnabled && // Worth showing even for yourself — it is the answer to
+          // "why can nobody hear me".
+          /* @__PURE__ */ jsx(PoolseIcon, { name: "mic-off", size: 13, color: callColors.text, label: "muted" }),
+          /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles27.name, children: name })
+        ] })
+      ]
+    }
+  );
+}
+var styles27 = StyleSheet.create({
+  tile: { overflow: "hidden", justifyContent: "flex-end", borderWidth: 2 },
+  rounded: { borderRadius: 18 },
+  bleed: { borderRadius: 0, borderWidth: 0 },
+  placeholder: { ...StyleSheet.absoluteFillObject, alignItems: "center", justifyContent: "center" },
+  chip: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 5,
+    alignSelf: "flex-start",
+    borderRadius: 999,
+    // Legible over both a bright video frame and a flat placeholder.
+    backgroundColor: "rgba(0,0,0,0.55)"
+  },
+  chipTile: { margin: 8, paddingHorizontal: 9, paddingVertical: 4.5, maxWidth: "92%" },
+  chipBleed: { margin: 14, paddingHorizontal: 11, paddingVertical: 6, maxWidth: "80%" },
+  name: { color: callColors.text, fontSize: 12.5, fontWeight: "600", flexShrink: 1 }
+});
+var PIP_WIDTH = 108;
+var PIP_HEIGHT = 152;
+var MARGIN = 14;
+function LocalVideoPip({
+  participant,
+  VideoTrack,
+  label,
+  bounds,
+  insets,
+  onPress
+}) {
+  const top = insets?.top ?? 0;
+  const bottom = insets?.bottom ?? 0;
+  const corners = useMemo(() => {
+    const right = Math.max(MARGIN, bounds.width - PIP_WIDTH - MARGIN);
+    const low = Math.max(MARGIN, bounds.height - PIP_HEIGHT - bottom - MARGIN);
+    const high = top + MARGIN;
+    return [
+      { x: MARGIN, y: high },
+      { x: right, y: high },
+      { x: MARGIN, y: low },
+      { x: right, y: low }
+    ];
+  }, [bounds.width, bounds.height, top, bottom]);
+  const [corner, setCorner] = useState(1);
+  const pan = useRef(new Animated.ValueXY(corners[1])).current;
+  const cornersRef = useRef(corners);
+  cornersRef.current = corners;
+  const cornerRef = useRef(corner);
+  cornerRef.current = corner;
+  const dragged = useRef(false);
+  useEffect(() => {
+    if (dragged.current) return;
+    const at = corners[corner];
+    if (at) pan.setValue(at);
+  }, [corners, corner, pan]);
+  const responder = useMemo(
+    () => PanResponder.create({
+      // Claim the gesture only once it is clearly a drag. A lower
+      // threshold would swallow the taps that flip the camera.
+      onMoveShouldSetPanResponder: (_evt, g) => Math.abs(g.dx) > 4 || Math.abs(g.dy) > 4,
+      onPanResponderGrant: () => {
+        dragged.current = true;
+        const at = cornersRef.current[cornerRef.current] ?? cornersRef.current[1];
+        pan.setOffset({ x: at.x, y: at.y });
+        pan.setValue({ x: 0, y: 0 });
+      },
+      onPanResponderMove: Animated.event([null, { dx: pan.x, dy: pan.y }], {
+        useNativeDriver: false
+      }),
+      onPanResponderRelease: (_evt, g) => {
+        pan.flattenOffset();
+        const at = cornersRef.current[cornerRef.current] ?? cornersRef.current[1];
+        const dropped = { x: at.x + g.dx, y: at.y + g.dy };
+        let best = 0;
+        let bestDistance = Number.POSITIVE_INFINITY;
+        cornersRef.current.forEach((c, index) => {
+          const distance = (c.x - dropped.x) ** 2 + (c.y - dropped.y) ** 2;
+          if (distance < bestDistance) {
+            bestDistance = distance;
+            best = index;
+          }
+        });
+        setCorner(best);
+        Animated.spring(pan, {
+          toValue: cornersRef.current[best],
+          useNativeDriver: false,
+          friction: 8,
+          tension: 70
+        }).start(() => {
+          dragged.current = false;
+        });
+      }
+    }),
+    [pan]
+  );
+  return /* @__PURE__ */ jsx(
+    Animated.View,
+    {
+      ...responder.panHandlers,
+      style: [styles28.pip, { transform: pan.getTranslateTransform() }],
+      children: /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          onPress: () => {
+            if (dragged.current) return;
+            onPress?.();
+          },
+          accessibilityRole: "button",
+          accessibilityLabel: "Your camera. Drag to move, tap to switch camera.",
+          style: styles28.fill,
+          children: /* @__PURE__ */ jsx(View, { style: styles28.fill, children: /* @__PURE__ */ jsx(
+            CallParticipantTile,
+            {
+              participant,
+              VideoTrack,
+              label,
+              avatarSize: 48,
+              hideName: true,
+              style: styles28.fill
+            }
+          ) })
+        }
+      )
+    }
+  );
+}
+var styles28 = StyleSheet.create({
+  pip: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: PIP_WIDTH,
+    height: PIP_HEIGHT,
+    borderRadius: 16,
+    overflow: "hidden",
+    // Lifted off the video so it reads as floating rather than inset.
+    shadowColor: "#000",
+    shadowOpacity: 0.4,
+    shadowRadius: 12,
+    shadowOffset: { width: 0, height: 4 },
+    elevation: 8
+  },
+  fill: { flex: 1 }
+});
+var GAP = 8;
+var MIN_TILE_HEIGHT = 132;
+function CallVideoGrid({
+  participants,
+  livekitReactNative,
+  labelFor,
+  onLocalPress,
+  chromeInsets
+}) {
+  const label = labelFor ?? ((id) => `User ${id.slice(0, 6)}`);
+  const VideoTrack = livekitReactNative?.VideoTrack;
+  const [size, setSize] = useState({ width: 0, height: 0 });
+  const onLayout = (event) => {
+    const { width: width2, height } = event.nativeEvent.layout;
+    setSize(
+      (current) => current.width === width2 && current.height === height ? current : { width: width2, height }
+    );
+  };
+  const self = participants.find((p) => p.isSelf) ?? null;
+  const others = useMemo(() => participants.filter((p) => !p.isSelf), [participants]);
+  const columns = others.length + 1 <= 6 ? 2 : 3;
+  const rows = Math.ceil((others.length + 1) / columns);
+  const tileHeight = size.height > 0 ? (size.height - GAP * (rows - 1)) / rows : 0;
+  const scrolls = tileHeight > 0 && tileHeight < MIN_TILE_HEIGHT;
+  if (participants.length === 0) return /* @__PURE__ */ jsx(View, { style: styles29.stage, onLayout });
+  if (others.length <= 1) {
+    const spotlight = others[0] ?? self;
+    if (!spotlight) return /* @__PURE__ */ jsx(View, { style: styles29.stage, onLayout });
+    return /* @__PURE__ */ jsxs(View, { style: styles29.stage, onLayout, children: [
+      /* @__PURE__ */ jsx(
+        CallParticipantTile,
+        {
+          participant: spotlight,
+          VideoTrack,
+          label,
+          avatarSize: Math.min(148, Math.max(96, Math.round(size.width * 0.36))),
+          bleed: true,
+          hideName: others.length === 1,
+          style: styles29.fill
+        }
+      ),
+      self && others.length === 1 && size.width > 0 && /* @__PURE__ */ jsx(
+        LocalVideoPip,
+        {
+          participant: self,
+          VideoTrack,
+          label,
+          bounds: size,
+          insets: chromeInsets ?? { top: 0, bottom: 0 },
+          onPress: onLocalPress
+        }
+      )
+    ] });
+  }
+  const tiles = [...others, ...self ? [self] : []];
+  const width = size.width > 0 ? (size.width - GAP * (columns - 1)) / columns : 0;
+  const grid = /* @__PURE__ */ jsx(View, { style: [styles29.grid, scrolls ? styles29.gridScrolling : styles29.gridFilling], children: tiles.map((participant) => /* @__PURE__ */ jsx(
+    CallParticipantTile,
+    {
+      participant,
+      VideoTrack,
+      label,
+      avatarSize: columns === 2 ? 66 : 46,
+      style: {
+        width: width || void 0,
+        height: scrolls ? MIN_TILE_HEIGHT : tileHeight || void 0
+      }
+    },
+    participant.userId
+  )) });
+  return /* @__PURE__ */ jsx(View, { style: styles29.stage, onLayout, children: scrolls ? /* @__PURE__ */ jsx(
+    ScrollView,
+    {
+      contentContainerStyle: [
+        styles29.scroll,
+        { paddingBottom: (chromeInsets?.bottom ?? 0) + GAP }
+      ],
+      showsVerticalScrollIndicator: false,
+      children: grid
+    }
+  ) : grid });
+}
+var styles29 = StyleSheet.create({
+  stage: { flex: 1, overflow: "hidden" },
+  fill: { ...StyleSheet.absoluteFillObject },
+  grid: { flexDirection: "row", flexWrap: "wrap", gap: GAP },
+  gridFilling: { flex: 1, alignContent: "center" },
+  gridScrolling: { alignContent: "flex-start" },
+  scroll: { paddingVertical: GAP }
+});
+
+// src/voice/livekit-rn.ts
+function describeRoute(id) {
+  switch (id) {
+    case "speaker":
+    case "force_speaker":
+      return { id, kind: "speaker", label: "Speaker" };
+    case "earpiece":
+      return { id, kind: "earpiece", label: "Phone" };
+    case "headset":
+      return { id, kind: "headset", label: "Headphones" };
+    case "bluetooth":
+      return { id, kind: "bluetooth", label: "Bluetooth" };
+    case "default":
+      return { id, kind: "auto", label: "iPhone" };
+    default:
+      return { id, kind: "auto", label: id };
+  }
+}
+
+// src/voice/useCallAudio.ts
+var IOS_AUTO = "default";
+var IOS_SPEAKER = "force_speaker";
+function useCallAudio({
+  active,
+  video,
+  livekitReactNative
+}) {
+  const session = livekitReactNative?.AudioSession;
+  const ios = Platform.OS === "ios";
+  const [routes, setRoutes] = useState([]);
+  const [selectedRouteId, setSelectedRouteId] = useState(null);
+  const preferSpeaker = useRef(video);
+  if (!active) preferSpeaker.current = video;
+  const userChose = useRef(false);
+  if (!active) userChose.current = false;
+  const refreshRoutes = useCallback(() => {
+    if (!session) return;
+    void session.getAudioOutputs().then((ids) => setRoutes(ids.map(describeRoute))).catch(() => {
+    });
+  }, [session]);
+  useEffect(() => {
+    if (!active || !session) return;
+    const wantsSpeaker = preferSpeaker.current;
+    let disposePolicy;
+    let released = false;
+    void (async () => {
+      try {
+        await session.configureAudio({
+          android: {
+            // Best device first. A headset or car kit outranks the
+            // built-in outputs either way; the media type only decides
+            // which built-in output wins when nothing is plugged in.
+            preferredOutputList: wantsSpeaker ? ["bluetooth", "headset", "speaker", "earpiece"] : ["bluetooth", "headset", "earpiece", "speaker"]
+          },
+          ios: { defaultOutput: wantsSpeaker ? "speaker" : "earpiece" }
+        });
+      } catch {
+      }
+      if (released) return;
+      disposePolicy = livekitReactNative?.setupIOSAudioManagement?.(wantsSpeaker);
+      try {
+        await session.startAudioSession();
+      } catch {
+      }
+      if (released) {
+        void session.stopAudioSession().catch(() => {
+        });
+        disposePolicy?.();
+        return;
+      }
+      refreshRoutes();
+    })();
+    return () => {
+      released = true;
+      void session.stopAudioSession().catch(() => {
+      });
+      disposePolicy?.();
+    };
+  }, [active, session, livekitReactNative, refreshRoutes]);
+  useEffect(() => {
+    if (active) return;
+    setSelectedRouteId(null);
+    setRoutes([]);
+  }, [active]);
+  useEffect(() => {
+    if (!active) return;
+    const events = livekitReactNative?.audioDeviceModuleEvents;
+    if (!events) return;
+    const onChange = () => refreshRoutes();
+    try {
+      events.addDevicesUpdatedListener(onChange);
+    } catch {
+      return;
+    }
+    return () => {
+      try {
+        events.removeDevicesUpdatedListener(onChange);
+      } catch {
+      }
+    };
+  }, [active, livekitReactNative, refreshRoutes]);
+  const selectRoute = useCallback(
+    (id) => {
+      userChose.current = true;
+      setSelectedRouteId(id);
+      if (!session) return;
+      void session.selectAudioOutput(id).catch(() => {
+        refreshRoutes();
+      });
+    },
+    [session, refreshRoutes]
+  );
+  const externalDevice = useMemo(
+    () => routes.some((r) => r.kind === "headset" || r.kind === "bluetooth"),
+    [routes]
+  );
+  const speakerOn = selectedRouteId === null ? preferSpeaker.current && !externalDevice : ios ? selectedRouteId === IOS_SPEAKER : selectedRouteId === "speaker";
+  const setSpeaker = useCallback(
+    (on) => {
+      if (ios) {
+        selectRoute(on ? IOS_SPEAKER : IOS_AUTO);
+        return;
+      }
+      if (on) {
+        selectRoute("speaker");
+        return;
+      }
+      const fallback = routes.find((r) => r.kind === "bluetooth") ?? routes.find((r) => r.kind === "headset") ?? routes.find((r) => r.kind === "earpiece");
+      if (fallback) selectRoute(fallback.id);
+    },
+    [ios, routes, selectRoute]
+  );
+  const toggleSpeaker = useCallback(() => setSpeaker(!speakerOn), [setSpeaker, speakerOn]);
+  const openSystemRoutePicker = useCallback(() => {
+    void session?.showAudioRoutePicker?.().catch(() => {
+    });
+  }, [session]);
+  return {
+    speakerOn,
+    toggleSpeaker,
+    setSpeaker,
+    routes,
+    selectedRouteId,
+    selectRoute,
+    externalDevice,
+    canPickSystemRoute: ios && typeof session?.showAudioRoutePicker === "function",
+    openSystemRoutePicker
+  };
+}
+function useCallDuration(connected) {
+  const startedAt = useRef(null);
+  const [, tick] = useState(0);
+  if (connected && startedAt.current === null) startedAt.current = Date.now();
+  if (!connected && startedAt.current !== null) startedAt.current = null;
+  useEffect(() => {
+    if (!connected) return;
+    const id = setInterval(() => tick((n) => n + 1), 1e3);
+    return () => clearInterval(id);
+  }, [connected]);
+  if (!connected || startedAt.current === null) return null;
+  return format(Math.max(0, Math.floor((Date.now() - startedAt.current) / 1e3)));
+}
+function format(total) {
+  const hours = Math.floor(total / 3600);
+  const minutes = Math.floor(total % 3600 / 60);
+  const seconds = total % 60;
+  const mm = hours > 0 ? String(minutes).padStart(2, "0") : String(minutes);
+  return `${hours > 0 ? `${hours}:` : ""}${mm}:${String(seconds).padStart(2, "0")}`;
+}
+var CHROME_IDLE_MS = 4500;
 function CallScreen({
   userId,
   labelFor,
@@ -5168,7 +5816,7 @@ function CallScreen({
   onVideoChange,
   nativeIncomingUi
 }) {
-  const theme = usePoolseTheme();
+  const insets = useSafeAreaInsets();
   const ownCalls = useCalls(callsProp ? null : userId);
   const calls = callsProp ?? ownCalls;
   const meshAvailable = isNativeWebRtcAvailable(webrtc);
@@ -5177,19 +5825,21 @@ function CallScreen({
     [meshAvailable, webrtc]
   );
   const conversationId = calls.phase === "active" ? calls.activeConversationId : null;
+  const isVideoCall = calls.media === "video";
   const sfu = useCallRoom(livekit ? conversationId : null, {
     livekit,
-    video: calls.media === "video"
+    video: isVideoCall
   });
   const mesh = useVoiceRoom(conversationId, opts);
   const usingSfu = sfu.sfuAvailable === true;
   const status = usingSfu ? toVoiceStatus(sfu.status) : mesh.status;
+  const connected = calls.phase === "active" && status === "connected";
   useEffect(() => {
     if (calls.phase !== "active" || !conversationId) return;
     let cancelled = false;
     void (async () => {
-      const connected2 = livekit ? await sfu.join() : false;
-      if (cancelled || connected2) return;
+      const joined = livekit ? await sfu.join() : false;
+      if (cancelled || joined) return;
       if (meshAvailable) await mesh.join();
     })();
     return () => {
@@ -5207,79 +5857,219 @@ function CallScreen({
   useEffect(() => {
     onVideoChange?.(videoOn);
   }, [videoOn, onVideoChange]);
-  const label = labelFor ?? ((id) => `User ${id.slice(0, 6)}`);
-  const ringingIn = calls.phase === "ringing-in";
-  const visible = calls.phase !== "idle" && !(nativeIncomingUi && ringingIn);
+  const audio = useCallAudio({
+    active: calls.phase !== "idle" && transport !== "mesh",
+    video: isVideoCall,
+    livekitReactNative
+  });
+  const [routesOpen, setRoutesOpen] = useState(false);
+  const [chromeVisible, setChromeVisible] = useState(true);
+  const [lastWake, setLastWake] = useState(0);
+  const chromeHides = connected && isVideoCall;
+  useEffect(() => {
+    setChromeVisible(true);
+    if (!chromeHides) return;
+    const timer = setTimeout(() => setChromeVisible(false), CHROME_IDLE_MS);
+    return () => clearTimeout(timer);
+  }, [chromeHides, lastWake]);
+  const wakeChrome = useCallback(() => setLastWake(Date.now()), []);
+  const withWake = useCallback(
+    (fn) => () => {
+      wakeChrome();
+      fn();
+    },
+    [wakeChrome]
+  );
   const hangUp = useCallback(() => {
     sfu.leave();
     mesh.leave();
     void calls.hangUp();
   }, [sfu, mesh, calls]);
+  const alone = usingSfu ? sfu.alone : mesh.alone;
+  const endedOnEmpty = useRef(false);
+  if (calls.phase !== "active") endedOnEmpty.current = false;
+  useEffect(() => {
+    if (!alone || calls.phase !== "active" || endedOnEmpty.current) return;
+    endedOnEmpty.current = true;
+    hangUp();
+  }, [alone, calls.phase, hangUp]);
   const micOn = usingSfu ? sfu.micEnabled : !mesh.muted;
   const toggleMic = useCallback(() => {
     if (usingSfu) void sfu.toggleMic();
     else mesh.toggleMute();
   }, [usingSfu, sfu, mesh]);
+  const onSpeakerPress = useCallback(() => {
+    if (audio.routes.length > 2) setRoutesOpen(true);
+    else if (audio.canPickSystemRoute && audio.externalDevice) audio.openSystemRoutePicker();
+    else audio.toggleSpeaker();
+  }, [audio]);
+  const label = useMemo(() => labelFor ?? ((id) => `User ${id.slice(0, 6)}`), [labelFor]);
+  const ringingIn = calls.phase === "ringing-in";
+  const ringingOut = calls.phase === "ringing-out";
+  const ended = calls.phase === "declined" || calls.phase === "busy" || calls.phase === "timed-out";
+  const visible = calls.phase !== "idle" && !(nativeIncomingUi && ringingIn);
+  const duration = useCallDuration(connected);
+  const participants = usingSfu ? sfu.participants : [];
+  const others = participants.filter((p) => !p.isSelf);
+  const isGroup = others.length > 1 || (calls.outgoing?.calleeUserIds.length ?? 0) > 1;
+  const peerIds = ringingIn && calls.incoming ? [calls.incoming.callerUserId] : others.length > 0 ? others.map((p) => p.userId) : calls.outgoing?.calleeUserIds ?? [];
+  const title = peerIds.length === 0 ? "Call" : peerIds.length <= 2 ? peerIds.map(label).join(", ") : `${label(peerIds[0])} and ${peerIds.length - 1} others`;
+  const subtitle = duration ?? statusLine(calls, status);
+  const showStage = connected && usingSfu && participants.length > 0;
   const error = calls.error ?? (usingSfu ? sfu.error : mesh.error);
-  const connected = calls.phase === "active" && status === "connected";
-  return /* @__PURE__ */ jsx(Modal, { visible, animationType: "slide", transparent: false, onRequestClose: hangUp, children: /* @__PURE__ */ jsxs(View, { style: [styles25.screen, { backgroundColor: theme.colors.paper }], children: [
-    connected && usingSfu && sfu.participants.length > 0 ? /* @__PURE__ */ jsx(
-      CallVideoGrid,
-      {
-        participants: sfu.participants,
-        livekitReactNative,
-        labelFor
-      }
-    ) : /* @__PURE__ */ jsxs(View, { style: styles25.identity, children: [
-      /* @__PURE__ */ jsx(Text, { style: [styles25.who, { color: theme.colors.ink }], children: ringingIn && calls.incoming ? label(calls.incoming.callerUserId) : calls.outgoing ? calls.outgoing.calleeUserIds.map(label).join(", ") : "" }),
-      /* @__PURE__ */ jsx(Text, { style: [styles25.state, { color: theme.colors.ink3 }], children: statusLine(calls, status) })
-    ] }),
-    /* @__PURE__ */ jsx(View, { style: styles25.actions, children: ringingIn ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(
-        CallButton,
-        {
-          label: "Decline",
-          color: theme.colors.error,
-          onPress: () => void calls.decline()
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        CallButton,
-        {
-          label: "Accept",
-          color: theme.colors.brand,
-          onPress: () => void calls.accept()
-        }
-      )
-    ] }) : calls.phase === "ringing-out" ? /* @__PURE__ */ jsx(
-      CallButton,
-      {
-        label: "Cancel",
-        color: theme.colors.error,
-        onPress: () => void calls.cancel()
-      }
-    ) : calls.phase === "declined" || calls.phase === "busy" || calls.phase === "timed-out" ? /* @__PURE__ */ jsx(CallButton, { label: "Close", color: theme.colors.ink3, onPress: calls.reset }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(
-        CallButton,
-        {
-          label: micOn ? "Mute" : "Unmute",
-          color: micOn ? theme.colors.ink2 : theme.colors.brand,
-          onPress: toggleMic
-        }
-      ),
-      usingSfu && /* @__PURE__ */ jsx(
-        CallButton,
-        {
-          label: videoOn ? "Camera off" : "Camera on",
-          color: videoOn ? theme.colors.brand : theme.colors.ink2,
-          onPress: () => void sfu.toggleCamera()
-        }
-      ),
-      /* @__PURE__ */ jsx(CallButton, { label: "Hang up", color: theme.colors.error, onPress: hangUp })
-    ] }) }),
-    !meshAvailable && !livekit && /* @__PURE__ */ jsx(Text, { style: [styles25.warn, { color: theme.colors.error }], children: "No WebRTC module supplied \u2014 this call has no audio." }),
-    error && /* @__PURE__ */ jsx(Text, { style: [styles25.warn, { color: theme.colors.error }], children: error.message })
-  ] }) });
+  const chromeInsets = {
+    top: insets.top + 72,
+    bottom: insets.bottom + 150
+  };
+  return /* @__PURE__ */ jsxs(
+    Modal,
+    {
+      visible,
+      animationType: "slide",
+      transparent: false,
+      supportedOrientations: ["portrait", "landscape"],
+      onRequestClose: hangUp,
+      children: [
+        /* @__PURE__ */ jsx(StatusBar, { barStyle: "light-content" }),
+        /* @__PURE__ */ jsxs(Pressable, { style: styles30.screen, onPress: wakeChrome, accessible: false, children: [
+          showStage ? /* @__PURE__ */ jsx(
+            CallVideoGrid,
+            {
+              participants,
+              livekitReactNative,
+              labelFor: label,
+              onLocalPress: () => void sfu.switchCamera(),
+              chromeInsets
+            }
+          ) : /* @__PURE__ */ jsx(View, { style: styles30.identity, children: /* @__PURE__ */ jsx(
+            CallAvatar,
+            {
+              name: peerIds.length === 1 ? label(peerIds[0]) : title,
+              seed: peerIds[0] ?? "call",
+              size: 132
+            }
+          ) }),
+          chromeVisible && /* @__PURE__ */ jsxs(View, { style: [styles30.header, { paddingTop: insets.top + 14 }], pointerEvents: "box-none", children: [
+            /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles30.title, children: title }),
+            /* @__PURE__ */ jsxs(View, { style: styles30.subtitleRow, children: [
+              isGroup && showStage && /* @__PURE__ */ jsx(PoolseIcon, { name: "users", size: 14, color: callColors.textDim, label: null }),
+              /* @__PURE__ */ jsx(Text, { style: styles30.subtitle, children: isGroup && showStage ? `${participants.length} \xB7 ${subtitle}` : subtitle })
+            ] })
+          ] }),
+          chromeVisible && /* @__PURE__ */ jsxs(
+            View,
+            {
+              style: [styles30.controls, { paddingBottom: insets.bottom + 22 }],
+              pointerEvents: "box-none",
+              children: [
+                error && /* @__PURE__ */ jsx(Text, { style: styles30.error, children: error.message }),
+                !meshAvailable && !livekit && /* @__PURE__ */ jsx(Text, { style: styles30.error, children: "No WebRTC module supplied \u2014 this call has no audio." }),
+                ringingIn ? /* @__PURE__ */ jsxs(View, { style: styles30.row, children: [
+                  /* @__PURE__ */ jsx(
+                    CallControlButton,
+                    {
+                      icon: "phone-off",
+                      tone: "danger",
+                      large: true,
+                      onPress: () => void calls.decline(),
+                      accessibilityLabel: "Decline call"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    CallControlButton,
+                    {
+                      icon: isVideoCall ? "video" : "phone",
+                      tone: "accept",
+                      large: true,
+                      onPress: () => void calls.accept(),
+                      accessibilityLabel: "Accept call"
+                    }
+                  )
+                ] }) : ended ? /* @__PURE__ */ jsx(View, { style: styles30.row, children: /* @__PURE__ */ jsx(
+                  CallControlButton,
+                  {
+                    icon: "close",
+                    onPress: calls.reset,
+                    label: "Close",
+                    accessibilityLabel: "Close"
+                  }
+                ) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsxs(View, { style: styles30.row, children: [
+                    /* @__PURE__ */ jsx(
+                      CallControlButton,
+                      {
+                        icon: micOn ? "mic" : "mic-off",
+                        label: micOn ? "Mute" : "Unmute",
+                        active: !micOn,
+                        onPress: withWake(toggleMic),
+                        accessibilityLabel: micOn ? "Mute microphone" : "Unmute microphone"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      CallControlButton,
+                      {
+                        icon: speakerIcon(audio),
+                        label: speakerLabel(audio),
+                        active: audio.speakerOn,
+                        onPress: withWake(onSpeakerPress),
+                        accessibilityLabel: "Audio output"
+                      }
+                    ),
+                    usingSfu && /* @__PURE__ */ jsx(
+                      CallControlButton,
+                      {
+                        icon: videoOn ? "video" : "video-off",
+                        label: "Camera",
+                        active: !videoOn,
+                        onPress: withWake(() => void sfu.toggleCamera()),
+                        accessibilityLabel: videoOn ? "Turn camera off" : "Turn camera on"
+                      }
+                    ),
+                    usingSfu && videoOn && /* @__PURE__ */ jsx(
+                      CallControlButton,
+                      {
+                        icon: "camera-flip",
+                        label: "Flip",
+                        onPress: withWake(() => void sfu.switchCamera()),
+                        accessibilityLabel: "Switch camera"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx(View, { style: styles30.hangUpRow, children: /* @__PURE__ */ jsx(
+                    CallControlButton,
+                    {
+                      icon: "phone-off",
+                      tone: "danger",
+                      large: true,
+                      onPress: ringingOut ? () => void calls.cancel() : hangUp,
+                      accessibilityLabel: ringingOut ? "Cancel call" : "Hang up"
+                    }
+                  ) })
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            AudioRouteSheet,
+            {
+              visible: routesOpen,
+              routes: audio.routes,
+              selectedRouteId: audio.selectedRouteId,
+              onSelect: audio.selectRoute,
+              onClose: () => setRoutesOpen(false)
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function speakerIcon(audio) {
+  if (audio.externalDevice) return "headphones";
+  return audio.speakerOn ? "speaker" : "speaker-off";
+}
+function speakerLabel(audio) {
+  return audio.externalDevice ? "Audio" : "Speaker";
 }
 function toVoiceStatus(status) {
   switch (status) {
@@ -5296,7 +6086,7 @@ function toVoiceStatus(status) {
 function statusLine(calls, mediaStatus) {
   switch (calls.phase) {
     case "ringing-in":
-      return calls.media === "video" ? "Incoming video call\u2026" : "Incoming call\u2026";
+      return calls.media === "video" ? "Incoming video call" : "Incoming call";
     case "ringing-out":
       return "Ringing\u2026";
     case "declined":
@@ -5311,36 +6101,41 @@ function statusLine(calls, mediaStatus) {
       return "";
   }
 }
-function CallButton({
-  label,
-  color,
-  onPress
-}) {
-  return /* @__PURE__ */ jsx(
-    Pressable,
-    {
-      onPress,
-      accessibilityRole: "button",
-      style: [styles25.callBtn, { backgroundColor: color }],
-      children: /* @__PURE__ */ jsx(Text, { style: styles25.callBtnText, children: label })
-    }
-  );
-}
-var styles25 = StyleSheet.create({
-  screen: { flex: 1, justifyContent: "space-between", paddingVertical: 72, paddingHorizontal: 24 },
-  identity: { alignItems: "center", gap: 8, marginTop: 48 },
-  who: { fontSize: 28, fontWeight: "600", textAlign: "center" },
-  state: { fontSize: 15 },
-  actions: { flexDirection: "row", justifyContent: "center", gap: 12, flexWrap: "wrap" },
-  callBtn: {
-    paddingHorizontal: 22,
-    paddingVertical: 16,
-    borderRadius: 999,
-    minWidth: 108,
-    alignItems: "center"
-  },
-  callBtnText: { color: "#ffffff", fontSize: 16, fontWeight: "600" },
-  warn: { fontSize: 12, textAlign: "center", marginTop: 12 }
+var styles30 = StyleSheet.create({
+  screen: { flex: 1, backgroundColor: callColors.bg },
+  identity: { flex: 1, alignItems: "center", justifyContent: "center" },
+  header: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    alignItems: "center",
+    gap: 5,
+    paddingHorizontal: 24,
+    paddingBottom: 18,
+    backgroundColor: callColors.scrim
+  },
+  title: { color: callColors.text, fontSize: 22, fontWeight: "600", textAlign: "center" },
+  subtitleRow: { flexDirection: "row", alignItems: "center", gap: 6 },
+  subtitle: { color: callColors.textDim, fontSize: 14.5 },
+  controls: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: 0,
+    alignItems: "center",
+    gap: 18,
+    paddingTop: 20,
+    backgroundColor: callColors.scrim
+  },
+  row: { flexDirection: "row", justifyContent: "center", flexWrap: "wrap", rowGap: 16 },
+  hangUpRow: { flexDirection: "row", justifyContent: "center" },
+  error: {
+    color: callColors.danger,
+    fontSize: 12.5,
+    textAlign: "center",
+    paddingHorizontal: 24
+  }
 });
 function isCallOver(phase) {
   if (phase === void 0) return false;
@@ -5520,6 +6315,6 @@ function guessApnsEnvironment() {
   return __DEV__ ? "sandbox" : "production";
 }
 
-export { AttachmentPicker, AttachmentPreview, Avatar, CallScreen, CallVideoGrid, ChatHeader, ConversationList, ConversationView, DaySeparator, GroupDetailsSheet, ImageMosaic, MemberList, MentionInput, MessageActions, MessageBubble, MessageComposer, MessageList, MessageRow, PoolseIcon, PoolseInbox, PoolseLogo, PoolseTheme, primitives as Primitives, ReactionPicker, ReactionStrip, ThreadView, TypingIndicator, UploadQueueStrip, UserName, VoiceRoomBar, createNativeWebRtcAdapter, defaultDarkTheme, defaultLightTheme, isNativeWebRtcAvailable, isStalePush, useAppStateLifecycle, useDisplayName, usePoolseTheme, useVoipCalls };
+export { AttachmentPicker, AttachmentPreview, AudioRouteSheet, Avatar, CallAvatar, CallControlButton, CallParticipantTile, CallScreen, CallVideoGrid, ChatHeader, ConversationList, ConversationView, DaySeparator, GroupDetailsSheet, ImageMosaic, LocalVideoPip, MemberList, MentionInput, MessageActions, MessageBubble, MessageComposer, MessageList, MessageRow, PoolseIcon, PoolseInbox, PoolseLogo, PoolseTheme, primitives as Primitives, ReactionPicker, ReactionStrip, ThreadView, TypingIndicator, UploadQueueStrip, UserName, VoiceRoomBar, callColors, createNativeWebRtcAdapter, defaultDarkTheme, defaultLightTheme, describeRoute, isNativeWebRtcAvailable, isStalePush, useAppStateLifecycle, useCallAudio, useCallDuration, useDisplayName, usePoolseTheme, useVoipCalls };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map