feat(safe-area): paint Android edge-to-edge top/bottom strips with the active surface tone instead of a fixed body bg

src/app/features/room/Room.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { Box, Line, toRem } from 'folds';
 import { useMatch, useParams } from 'react-router-dom';
 import { isKeyHotkey } from 'is-hotkey';
@@ -112,6 +112,25 @@ export function Room({ renderRoomView }: RoomProps) {
   const profileOpen = !!useAtomValue(userRoomProfileAtom);
   const showProfileHorseshoe = profileOpen && !isMobile && !showThreadDrawer;
 
+  // Match the Android edge-to-edge safe-area zones (status bar + gesture
+  // pill) to the chat surface while a Room is mounted: `body` reads
+  // `--vojo-safe-area-bg`, which `app/styles/global.css.ts` defaults to
+  // `#0d0e11` (chat-list tone). We retune to `#181a20`
+  // (`SurfaceVariant.Container`, the chat tone painted by RoomView's
+  // `<Page>`) for the lifetime of Room and `removeProperty` on cleanup
+  // so the chat-list view goes back to its dark tone. Hardcoded because
+  // folds tokens are scoped to the `.dark-theme` class on `body` —
+  // writing `var(--xxx)` on `:root` (where `--vojo-safe-area-bg` lives)
+  // would leave it unresolved and body would fall back to the literal
+  // `#0d0e11` in index.css.
+  useEffect(() => {
+    const root = document.documentElement;
+    root.style.setProperty('--vojo-safe-area-bg', '#181a20');
+    return () => {
+      root.style.removeProperty('--vojo-safe-area-bg');
+    };
+  }, []);
+
   useKeyDown(
     window,
     useCallback(

src/index.css

@@ -60,8 +60,15 @@ body {
   height: 100%;
   display: flex;
   flex-direction: column;
-  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom)
+  /* Top / left / right insets keep app chrome clear of system bars and
-    env(safe-area-inset-left);
+     display cutouts. Bottom inset is intentionally zero so the chat
+     surface (RoomView's `<Page>`) and the chat-list shell (PageRoot's
+     Background-coloured outer Box) extend all the way to the screen
+     edge — same edge-to-edge pattern WhatsApp / Telegram use. Without
+     this, the bottom env zone showed a different colour from the
+     painted surface, and the composer's wrap-padding-bottom kept
+     overlapping the gesture-pill area, visually "eating" the form. */
+  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
 }
 
 *,