refactor(chat): split screen orchestration

src/app/chat/components/message-content.tsx

@@ -3,6 +3,7 @@ import { ImageBubble } from "./image-bubble";
 import { PrivateMessageCard } from "./private-message-card";
 import { TextBubble } from "./text-bubble";
 import { VoiceBubble } from "./voice-bubble";
+import styles from "./chat-area.module.css";
 
 export interface MessageContentProps {
   content: string;
@@ -55,16 +56,10 @@ export function MessageContent({
 
   return (
     <div
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        // 关键：在 row flex 父中撑开（不依赖 content 循环）—— 让 TextBubble 能拿到真实宽度
-        flex: "1 1 0",
-        // 防超长 content（图片 / 超长 url）撑爆父
-        minWidth: 0,
-        alignItems: isFromAI ? "flex-start" : "flex-end",
-        gap: 8,
-      }}
+      className={[
+        styles.messageContent,
+        isFromAI ? styles.messageContentAi : styles.messageContentUser,
+      ].join(" ")}
     >
       {isLockedPrivateMessage ? (
         <PrivateMessageCard