refactor(app): remove scaffold and migrate input styles

src/app/chat/components/__tests__/tailwind-components.test.tsx

@@ -3,6 +3,7 @@ import { describe, expect, it, vi } from "vitest";
 
 import { ChatHeader } from "../chat-header";
 import { ChatInsufficientCreditsBanner } from "../chat-insufficient-credits-banner";
+import { ChatInputTextField } from "../chat-input-text-field";
 import { ChatSendButton } from "../chat-send-button";
 import { ImageBubble } from "../image-bubble";
 import { MessageAvatar } from "../message-avatar";
@@ -160,4 +161,24 @@ describe("chat Tailwind components", () => {
     expect(memberHtml).toContain("bg-[rgba(13,11,20,0.7)]");
     expect(memberHtml).toContain("size-[var(--icon-size-xl,32px)]");
   });
+
+  it("renders ChatInputTextField with textarea utilities", () => {
+    const html = renderToStaticMarkup(
+      <ChatInputTextField
+        value="Hello"
+        onChange={() => undefined}
+        onSubmit={() => undefined}
+        placeholder="Message Elio"
+      />,
+    );
+
+    expect(html).toContain("<textarea");
+    expect(html).toContain('aria-label="Message"');
+    expect(html).toContain("min-h-[var(--chat-send-button-size,40px)]");
+    expect(html).toContain("max-h-[min(30vh,120px)]");
+    expect(html).toContain("caret-[var(--color-accent,#f84d96)]");
+    expect(html).toContain("placeholder:text-[var(--color-text-hint,#757575)]");
+    expect(html).toContain("Message Elio");
+    expect(html).toContain("Hello");
+  });
 });

src/app/chat/components/chat-input-text-field.module.css

@@ -1,36 +0,0 @@
-/* ChatInputTextField 输入框样式（外层白底圆角容器 + 内部 textarea） */
-
-/* 外层圆角容器（与 Dart `Container(borderRadius: AppRadius.xxxl ≈ 32)` 一致） */
-.wrap {
-  flex: 1 1 auto;
-  min-width: 0;
-  display: flex;
-  align-items: center;
-  padding: 0 var(--spacing-lg, 16px); /* Dart: horizontal AppSpacing.lg */
-  background: #fff; /* Dart: Colors.white */
-  border-radius: var(--radius-full, 999px);
-}
-
-/* textarea 本身（裸元素，背景透明让外层白底透出） */
-.textField {
-  flex: 1 1 auto;
-  min-width: 0;
-  width: 100%;
-  min-height: var(--chat-send-button-size, 40px);
-  max-height: min(30vh, 120px); /* 约 5 行 × 24px line-height */
-  padding: clamp(5px, 1.111vw, 6px) 0 0 0; /* 让文字视觉下移，避开正中位置 */
-  border: 0;
-  outline: none;
-  background: transparent;
-  color: var(--color-text-foreground, #000); /* Dart: Colors.black */
-  caret-color: var(--color-accent, #f84d96); /* Dart: AppColors.accentColor */
-  /* iOS Facebook IAB/Safari auto-zooms focused text controls below 16px. */
-  font-size: 16px;
-  line-height: clamp(22px, 4.444vw, 24px);
-  resize: none;
-  font-family: inherit;
-}
-
-.textField::placeholder {
-  color: var(--color-text-hint, #757575);
-}

src/app/chat/components/chat-input-text-field.tsx

@@ -22,8 +22,6 @@ import {
   useRef,
 } from "react";
 
-import styles from "./chat-input-text-field.module.css";
-
 export interface ChatInputTextFieldProps {
   value: string;
   onChange: (value: string) => void;
@@ -62,10 +60,10 @@ export const ChatInputTextField = forwardRef<
   };
 
   return (
-    <div className={styles.wrap}>
+    <div className="flex min-w-0 flex-auto items-center rounded-full bg-white px-(--spacing-lg,16px)">
       <textarea
         ref={innerRef}
-        className={styles.textField}
+        className="min-h-[var(--chat-send-button-size,40px)] max-h-[min(30vh,120px)] w-full min-w-0 flex-auto resize-none border-0 bg-transparent pb-0 pl-0 pr-0 pt-[clamp(5px,1.111vw,6px)] font-[inherit] text-[16px] leading-[clamp(22px,4.444vw,24px)] text-[var(--color-text-foreground,#000)] caret-[var(--color-accent,#f84d96)] outline-none placeholder:text-[var(--color-text-hint,#757575)]"
         value={value}
         onChange={(e: FormEvent<HTMLTextAreaElement>) =>
           onChange(e.currentTarget.value)