fix: chat UI fixes

app/(app)/chats/[id]/page.tsx

@@ -33,6 +33,7 @@ import { ForwardDialog } from "@/components/chat/forward-dialog";
 import { toast } from "sonner";
 import { channelAuthorizer } from "@/lib/realtime";
 import { cn } from "@/lib/utils";
+import { useVisualViewport } from "@/lib/use-visual-viewport";
 import {
   chat,
   conversationTitle,
@@ -63,6 +64,13 @@ export default function ChatThreadPage() {
   const [menu, setMenu] = useState<{ message: ChatMessage; point: MenuPoint } | null>(null);
   const [forwarding, setForwarding] = useState<ChatMessage | null>(null);
   const [starredIds, setStarredIds] = useState<Set<string>>(new Set());
+
+  // While the keyboard is up the thread is sized from the visual viewport
+  // instead of dvh — see useVisualViewport for why dvh can't do this on iOS.
+  // Declared with the other hooks: the early return below means anything
+  // placed after it would run conditionally.
+  const viewport = useVisualViewport();
+  const keyboardOpen = viewport?.keyboardOpen ?? false;
   // Guards against two loads racing (scroll handler + the short-page effect).
   const loadingRef = useRef(false);
 
@@ -429,8 +437,30 @@ export default function ChatThreadPage() {
         // space, and calc() requires whitespace around a binary `-` — written
         // without it the whole declaration is invalid and dropped, which
         // collapses this to height:auto.
-        "h-[calc(100dvh_-_3rem_-_4rem)] sm:h-[calc(100dvh_-_3.5rem_-_4rem)] md:h-[calc(100dvh_-_3.5rem)]",
+        // Only while the keyboard is closed; otherwise the inline style below
+        // takes over and these would fight it.
+        !keyboardOpen &&
+          "h-[calc(100dvh_-_3rem_-_4rem)] sm:h-[calc(100dvh_-_3.5rem_-_4rem)] md:h-[calc(100dvh_-_3.5rem)]",
       )}
+      style={
+        keyboardOpen && viewport
+          ? {
+              // Pinned to the visible strip above the keyboard. Fixed rather
+              // than in-flow because iOS scrolls the layout viewport instead
+              // of resizing it, so an in-flow column keeps its old height and
+              // hides the composer underneath. left/right 0 with the existing
+              // mx-auto keeps the desktop column centred.
+              position: "fixed",
+              top: viewport.offsetTop,
+              left: 0,
+              right: 0,
+              height: viewport.height,
+              // Above the app's fixed bottom nav (z-40) so the composer can
+              // never be painted over by it.
+              zIndex: 50,
+            }
+          : undefined
+      }
     >
       <header className="flex items-center gap-3 border-b border-border px-4 py-3">
         <Link