refactor(chat): migrate styles to tailwind and update components

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

@@ -1,7 +1,9 @@
 import { renderToStaticMarkup } from "react-dom/server";
 import { describe, expect, it } from "vitest";
 
+import { ChatSendButton } from "../chat-send-button";
 import { MessageAvatar } from "../message-avatar";
+import { PrivateMessageCard } from "../private-message-card";
 import { TextBubble } from "../text-bubble";
 
 describe("chat Tailwind components", () => {
@@ -37,4 +39,55 @@ describe("chat Tailwind components", () => {
     );
     expect(userHtml).toContain("from user");
   });
+
+  it("renders PrivateMessageCard with fallback and loading states", () => {
+    const fallbackHtml = renderToStaticMarkup(<PrivateMessageCard />);
+    const unlockingHtml = renderToStaticMarkup(
+      <PrivateMessageCard hint="Premium secret" isUnlocking onUnlock={() => undefined} />,
+    );
+
+    expect(fallbackHtml).toContain('role="group"');
+    expect(fallbackHtml).toContain('aria-label="Locked private message"');
+    expect(fallbackHtml).toContain("rounded-tl-none");
+    expect(fallbackHtml).toContain("Elio has a private message for you.");
+    expect(fallbackHtml).toContain("disabled");
+    expect(unlockingHtml).toContain("Premium secret");
+    expect(unlockingHtml).toContain("Unlocking...");
+  });
+
+  it("renders ChatSendButton visual states", () => {
+    const activeHtml = renderToStaticMarkup(
+      <ChatSendButton
+        disabled={false}
+        hasContent={true}
+        onClick={() => undefined}
+        onPointerDownSend={() => undefined}
+      />,
+    );
+    const emptyHtml = renderToStaticMarkup(
+      <ChatSendButton
+        disabled={false}
+        hasContent={false}
+        onClick={() => undefined}
+        onPointerDownSend={() => undefined}
+      />,
+    );
+    const disabledHtml = renderToStaticMarkup(
+      <ChatSendButton
+        disabled={true}
+        hasContent={true}
+        onClick={() => undefined}
+        onPointerDownSend={() => undefined}
+      />,
+    );
+
+    expect(activeHtml).toContain('aria-label="Send message"');
+    expect(activeHtml).toContain("size-[var(--chat-send-button-size,40px)]");
+    expect(activeHtml).toContain(
+      "bg-[linear-gradient(to_right,var(--color-button-gradient-start,#ff67e0),var(--color-button-gradient-end,#ff52a2))]",
+    );
+    expect(emptyHtml).toContain("bg-[#f8a8ce]");
+    expect(emptyHtml).toContain("text-[rgba(255,255,255,0.88)]");
+    expect(disabledHtml).toContain("disabled");
+  });
 });

src/app/chat/components/ai-disclosure-banner.module.css

@@ -1,9 +0,0 @@
-/* AiDisclosureBanner 样式（独立文件以便 chat-area 内联版本可复用） */
-
-.banner {
-  align-self: center;
-  background: transparent;
-  font-size: var(--responsive-micro, var(--font-size-xs, 11px));
-  color: var(--color-text-banner, #8c8b8b);
-  text-align: center;
-}

src/app/chat/components/chat-send-button.module.css

@@ -1,44 +0,0 @@
-/* ChatSendButton 发送按钮样式 */
-
-.button {
-  flex: 0 0 auto;
-  width: var(--chat-send-button-size, 40px);
-  height: var(--chat-send-button-size, 40px);
-  aspect-ratio: 1 / 1;
-  border: 0;
-  border-radius: 50%;
-  background: var(--color-button-gradient-end, #fc69df);
-  color: #fff;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: background 0.2s, transform 0.1s;
-}
-
-.button:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-
-.buttonEmpty {
-  background: #f8a8ce;
-  color: rgba(255, 255, 255, 0.88);
-  box-shadow: none;
-}
-
-.button:focus-visible,
-.buttonActive {
-  background: linear-gradient(
-    to right,
-    var(--color-button-gradient-start, #ff67e0),
-    var(--color-button-gradient-end, #ff52a2)
-  );
-}
-
-.icon {
-  width: var(--icon-size-xl, 24px);
-  height: var(--icon-size-xl, 24px);
-  font-size: var(--icon-size-xl, 24px);
-  line-height: 1;
-}

src/app/chat/components/chat-send-button.tsx

@@ -12,8 +12,6 @@
  */
 import { ArrowUp } from "lucide-react";
 
-import styles from "./chat-send-button.module.css";
-
 export interface ChatSendButtonProps {
   disabled: boolean;
   hasContent: boolean;
@@ -27,12 +25,18 @@ export function ChatSendButton({
   onClick,
   onPointerDownSend,
 }: ChatSendButtonProps) {
+  const isActive = hasContent && !disabled;
   return (
     <button
       type="button"
-      className={`${styles.button} ${
-        hasContent && !disabled ? styles.buttonActive : styles.buttonEmpty
-      }`}
+      className={[
+        "flex aspect-square size-[var(--chat-send-button-size,40px)] shrink-0 cursor-pointer items-center justify-center rounded-full border-0 bg-[var(--color-button-gradient-end,#fc69df)] text-white transition-[background,transform] duration-200 disabled:cursor-not-allowed disabled:opacity-40 focus-visible:bg-[linear-gradient(to_right,var(--color-button-gradient-start,#ff67e0),var(--color-button-gradient-end,#ff52a2))]",
+        isActive
+          ? "bg-[linear-gradient(to_right,var(--color-button-gradient-start,#ff67e0),var(--color-button-gradient-end,#ff52a2))]"
+          : "bg-[#f8a8ce] text-[rgba(255,255,255,0.88)] shadow-none",
+      ]
+        .filter(Boolean)
+        .join(" ")}
       disabled={disabled}
       onPointerDown={(event) => {
         if (event.pointerType === "mouse") return;
@@ -44,7 +48,11 @@ export function ChatSendButton({
       onClick={onClick}
       aria-label="Send message"
     >
-      <ArrowUp className={styles.icon} size={24} aria-hidden="true" />
+      <ArrowUp
+        className="size-[var(--icon-size-xl,24px)] text-[length:var(--icon-size-xl,24px)] leading-none"
+        size={24}
+        aria-hidden="true"
+      />
     </button>
   );
 }

src/app/chat/components/private-message-card.module.css

@@ -1,60 +0,0 @@
-.card {
-  max-width: min(72vw, 280px);
-  padding: var(--responsive-card-padding, 14px);
-  border: 1px solid rgba(246, 87, 160, 0.2);
-  border-radius: var(--responsive-card-radius-sm, 18px);
-  border-top-left-radius: 0;
-  background:
-    linear-gradient(180deg, rgba(255, 244, 248, 0.95), rgba(255, 255, 255, 0.95)),
-    #ffffff;
-  box-shadow: 0 4px 12px rgba(246, 87, 160, 0.12);
-  color: #3c3b3b;
-}
-
-.iconWrap {
-  width: var(--responsive-icon-button-size, 42px);
-  height: var(--responsive-icon-button-size, 42px);
-  border-radius: 50%;
-  background: linear-gradient(135deg, #ff8fc7 0%, #f657a0 100%);
-  color: #ffffff;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: clamp(8px, 1.852vw, 10px);
-}
-
-.icon {
-  display: block;
-}
-
-.hint {
-  margin: 0;
-  color: #3c3b3b;
-  font-size: var(--responsive-body, 14px);
-  line-height: 1.4;
-}
-
-.button {
-  width: 100%;
-  margin-top: var(--spacing-md, 12px);
-  padding:
-    clamp(9px, 1.852vw, 10px)
-    var(--spacing-md, 12px);
-  border: 0;
-  border-radius: 999px;
-  background: linear-gradient(90deg, #ff67e0, #ff52a2);
-  color: #ffffff;
-  cursor: pointer;
-  font-size: var(--responsive-body, 14px);
-  font-weight: 700;
-}
-
-.button:disabled {
-  cursor: not-allowed;
-  opacity: 0.65;
-}
-
-.button:focus-visible {
-  outline: 2px solid #f657a0;
-  outline-offset: 3px;
-}

src/app/chat/components/private-message-card.tsx

@@ -2,8 +2,6 @@
 
 import { LockKeyhole } from "lucide-react";
 
-import styles from "./private-message-card.module.css";
-
 export interface PrivateMessageCardProps {
   hint?: string | null;
   isUnlocking?: boolean;
@@ -16,18 +14,25 @@ export function PrivateMessageCard({
   onUnlock,
 }: PrivateMessageCardProps) {
   return (
-    <div className={styles.card} role="group" aria-label="Locked private message">
-      <div className={styles.iconWrap} aria-hidden="true">
-        <LockKeyhole className={styles.icon} size={22} />
+    <div
+      className="max-w-[min(72vw,280px)] rounded-[var(--responsive-card-radius-sm,18px)] rounded-tl-none border border-[rgba(246,87,160,0.2)] bg-[linear-gradient(180deg,rgba(255,244,248,0.95),rgba(255,255,255,0.95)),#ffffff] p-[var(--responsive-card-padding,14px)] text-[#3c3b3b] shadow-[0_4px_12px_rgba(246,87,160,0.12)]"
+      role="group"
+      aria-label="Locked private message"
+    >
+      <div
+        className="mb-[clamp(8px,1.852vw,10px)] flex size-[var(--responsive-icon-button-size,42px)] items-center justify-center rounded-full bg-[linear-gradient(135deg,#ff8fc7_0%,#f657a0_100%)] text-white"
+        aria-hidden="true"
+      >
+        <LockKeyhole className="block" size={22} />
       </div>
-      <p className={styles.hint}>
+      <p className="m-0 text-[var(--responsive-body,14px)] leading-[1.4] text-[#3c3b3b]">
         {hint && hint.length > 0
           ? hint
           : "Elio has a private message for you."}
       </p>
       <button
         type="button"
-        className={styles.button}
+        className="mt-[var(--spacing-md,12px)] w-full cursor-pointer rounded-full border-0 bg-[linear-gradient(90deg,#ff67e0,#ff52a2)] px-[var(--spacing-md,12px)] py-[clamp(9px,1.852vw,10px)] text-[var(--responsive-body,14px)] font-bold text-white disabled:cursor-not-allowed disabled:opacity-65 focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-[#f657a0]"
         disabled={isUnlocking || !onUnlock}
         onClick={onUnlock}
       >