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");
+  });
 });