refactor(chat): migrate unlock dialog styles to tailwind

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

@@ -6,7 +6,9 @@ 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 { HistoryUnlockDialog } from "../history-unlock-dialog";
 import { ImageBubble } from "../image-bubble";
+import { InsufficientCreditsDialog } from "../insufficient-credits-dialog";
 import { MessageAvatar } from "../message-avatar";
 import { PrivateMessageCard } from "../private-message-card";
 import { PwaInstallDialog } from "../pwa-install-dialog";
@@ -223,4 +225,73 @@ describe("chat Tailwind components", () => {
     expect(html).toContain("Cancel");
     expect(html).toContain("OK");
   });
+
+  it("renders HistoryUnlockDialog open and loading states", () => {
+    expect(
+      renderToStaticMarkup(
+        <HistoryUnlockDialog
+          open={false}
+          lockedCount={2}
+          onClose={() => undefined}
+          onConfirm={() => undefined}
+        />,
+      ),
+    ).toBe("");
+
+    const html = renderToStaticMarkup(
+      <HistoryUnlockDialog
+        open
+        lockedCount={3}
+        isLoading
+        errorMessage="Could not unlock history."
+        onClose={() => undefined}
+        onConfirm={() => undefined}
+      />,
+    );
+
+    expect(html).toContain('aria-labelledby="history-unlock-title"');
+    expect(html).toContain("z-[200]");
+    expect(html).toContain("Unlock previous messages?");
+    expect(html).toContain("We found 3 locked messages");
+    expect(html).toContain("Could not unlock history.");
+    expect(html).toContain("Unlocking...");
+    expect(html).toContain("text-[var(--color-pwa-button-text,#ffffff)]");
+    expect(html).toContain("disabled");
+  });
+
+  it("renders InsufficientCreditsDialog with credit details", () => {
+    expect(
+      renderToStaticMarkup(
+        <InsufficientCreditsDialog
+          open={false}
+          creditBalance={0}
+          requiredCredits={0}
+          shortfallCredits={0}
+          onClose={() => undefined}
+          onConfirm={() => undefined}
+        />,
+      ),
+    ).toBe("");
+
+    const html = renderToStaticMarkup(
+      <InsufficientCreditsDialog
+        open
+        creditBalance={2}
+        requiredCredits={5}
+        shortfallCredits={3}
+        onClose={() => undefined}
+        onConfirm={() => undefined}
+      />,
+    );
+
+    expect(html).toContain('aria-labelledby="insufficient-credits-title"');
+    expect(html).toContain("z-[220]");
+    expect(html).toContain("Not enough credits");
+    expect(html).toContain("Balance");
+    expect(html).toContain("Required");
+    expect(html).toContain("Still needed");
+    expect(html).toContain("text-[var(--color-pwa-button-text,#ffffff)]");
+    expect(html).toContain("bg-[linear-gradient(90deg,#ff67e0_0%,#ff52a2_100%)]");
+    expect(html).toContain("Top up now");
+  });
 });