fix(frontend): 聊天页单屏布局并消除 F5 滚底闪烁

锁定视口避免双滚动；消息列表改用 flex-col-reverse，SSR/无 JS 默认贴最新消息。

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/app/chat/[id]/ChatRoomClient.tsx

@@ -382,8 +382,9 @@ export default function ChatRoomClient({
   const scrollToBottom = useCallback((smooth = false) => {
     const el = listRef.current;
     if (!el) return;
+    // column-reverse：scrollTop=0 即视觉底部（最新消息）
     el.scrollTo({
-      top: el.scrollHeight,
+      top: 0,
       behavior: smooth ? "smooth" : "auto",
     });
   }, []);
@@ -412,7 +413,7 @@ export default function ChatRoomClient({
     if (!canView) return;
     realtime.joinRoom(roomId);
     void refreshMembers();
-    requestAnimationFrame(() => scrollToBottom(false));
+    // 列表用 flex-col-reverse，SSR/无 JS 默认即贴底，无需首屏 scrollToBottom（避免 F5 闪一下）
     markReadToLatest();
     return () => {
       realtime.leaveRoom(roomId);
@@ -431,9 +432,8 @@ export default function ChatRoomClient({
       requestAnimationFrame(() => {
         const el = listRef.current;
         if (!el) return;
-        const nearBottom =
-          el.scrollHeight - el.scrollTop - el.clientHeight < 120;
-        if (nearBottom) {
+        // column-reverse：靠近 scrollTop=0 即贴底
+        if (el.scrollTop < 120) {
           scrollToBottom(true);
           markReadToLatest();
         }
@@ -499,7 +499,9 @@ export default function ChatRoomClient({
   const loadMore = useCallback(async () => {
     if (!canView || !hasMore || loadingMore || messages.length === 0) return;
     setLoadingMore(true);
-    const prevHeight = listRef.current?.scrollHeight ?? 0;
+    const el0 = listRef.current;
+    const prevHeight = el0?.scrollHeight ?? 0;
+    const prevTop = el0?.scrollTop ?? 0;
     try {
       const before = messages[0].id;
       const res = await apiListChatMessages(roomId, before, 30);
@@ -509,7 +511,8 @@ export default function ChatRoomClient({
         requestAnimationFrame(() => {
           const el = listRef.current;
           if (!el) return;
-          el.scrollTop = el.scrollHeight - prevHeight;
+          // column-reverse：历史插在上方，用高度差补偿保持视口锚点
+          el.scrollTop = prevTop + (el.scrollHeight - prevHeight);
         });
       } else {
         setHasMore(false);
@@ -524,10 +527,11 @@ export default function ChatRoomClient({
   const handleScroll = useCallback(() => {
     const el = listRef.current;
     if (!el) return;
-    if (el.scrollTop < 60) {
+    // column-reverse：滚向上方历史 ≈ 接近 max scrollTop
+    if (el.scrollHeight - el.scrollTop - el.clientHeight < 60) {
       loadMore();
     }
-    if (el.scrollHeight - el.scrollTop - el.clientHeight < 60) {
+    if (el.scrollTop < 60) {
       markReadToLatest();
     }
   }, [loadMore, markReadToLatest]);
@@ -934,7 +938,7 @@ export default function ChatRoomClient({
         style={
           embedded
             ? undefined
-            : { height: "calc(100vh - 12rem)", minHeight: "420px" }
+            : { height: "100%", minHeight: 0 }
         }
       >
         <div
@@ -1047,7 +1051,7 @@ export default function ChatRoomClient({
         <div
           ref={listRef}
           onScroll={handleScroll}
-          className="flex-1 overflow-y-auto px-4 sm:px-5 py-4"
+          className="flex-1 overflow-y-auto flex flex-col-reverse px-4 sm:px-5 py-4"
           style={{ minHeight: 0 }}
         >
           {!canView ? (
@@ -1062,7 +1066,7 @@ export default function ChatRoomClient({
               </p>
             </div>
           ) : (
-            <>
+            <div className="flex flex-col gap-3">
               {hasMore && (
                 <button
                   onClick={loadMore}
@@ -1072,15 +1076,14 @@ export default function ChatRoomClient({
                   {loadingMore ? "加载中..." : "加载更早消息"}
                 </button>
               )}
-              <div className="flex flex-col gap-3">
-                {messages.length === 0 ? (
-                  <div className="text-center py-12">
-                    <p className="meta" style={{ color: "var(--ink-3)" }}>
-                      还没有消息，发第一条吧
-                    </p>
-                  </div>
-                ) : (
-                  messages.map((m, i) => {
+              {messages.length === 0 ? (
+                <div className="text-center py-12">
+                  <p className="meta" style={{ color: "var(--ink-3)" }}>
+                    还没有消息，发第一条吧
+                  </p>
+                </div>
+              ) : (
+                messages.map((m, i) => {
                     const recalled = !!m.recalled_at;
                     const mine = m.sender_id === meId;
                     const prev = messages[i - 1];
@@ -1294,8 +1297,7 @@ export default function ChatRoomClient({
                 );
                   })
                 )}
-              </div>
-            </>
+            </div>
           )}
         </div>