refactor(app): migrate banner styles to tailwind

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

@@ -1,12 +1,20 @@
 import { renderToStaticMarkup } from "react-dom/server";
-import { describe, expect, it } from "vitest";
+import { describe, expect, it, vi } from "vitest";
 
+import { ChatHeader } from "../chat-header";
+import { ChatInsufficientCreditsBanner } from "../chat-insufficient-credits-banner";
 import { ChatSendButton } from "../chat-send-button";
 import { ImageBubble } from "../image-bubble";
 import { MessageAvatar } from "../message-avatar";
 import { PrivateMessageCard } from "../private-message-card";
 import { TextBubble } from "../text-bubble";
 
+vi.mock("@/router/use-app-navigator", () => ({
+  useAppNavigator: () => ({
+    openSubscription: vi.fn(),
+  }),
+}));
+
 describe("chat Tailwind components", () => {
   it("renders MessageAvatar AI and user branches with image utilities", () => {
     const aiHtml = renderToStaticMarkup(<MessageAvatar isFromAI={true} />);
@@ -116,4 +124,40 @@ describe("chat Tailwind components", () => {
     );
     expect(paywalledHtml).toContain("data:image/png;base64,/locked-image.png");
   });
+
+  it("renders ChatInsufficientCreditsBanner with split title and CTA", () => {
+    const html = renderToStaticMarkup(
+      <ChatInsufficientCreditsBanner
+        title={"Need credits\nTop up now"}
+        description="Credits keep the conversation going."
+        ctaLabel="Top up"
+        onUnlock={() => undefined}
+      />,
+    );
+
+    expect(html).toContain('role="status"');
+    expect(html).toContain('aria-live="polite"');
+    expect(html).toContain("Need credits");
+    expect(html).toContain("<br/>");
+    expect(html).toContain("Top up now");
+    expect(html).toContain("Credits keep the conversation going.");
+    expect(html).toContain('aria-label="Top up"');
+    expect(html).toContain("bg-[linear-gradient(135deg,#f96ade_0%,#f657a0_100%)]");
+    expect(html).toContain("active:scale-[0.98]");
+  });
+
+  it("renders ChatHeader guest and member branches", () => {
+    const guestHtml = renderToStaticMarkup(<ChatHeader isGuest={true} />);
+    const memberHtml = renderToStaticMarkup(
+      <ChatHeader isGuest={false} offerBanner={<div>Offer</div>} />,
+    );
+
+    expect(guestHtml).toContain('aria-label="Sign up to unlock more features"');
+    expect(guestHtml).toContain("bg-[var(--color-accent,#f84d96)]");
+    expect(guestHtml).toContain("size-[var(--icon-size-sm,16px)]");
+    expect(memberHtml).toContain("Offer");
+    expect(memberHtml).toContain('aria-label="Menu"');
+    expect(memberHtml).toContain("bg-[rgba(13,11,20,0.7)]");
+    expect(memberHtml).toContain("size-[var(--icon-size-xl,32px)]");
+  });
 });