fix(chat): prompt guests to log in at quota limit

src/app/chat/chat-screen.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useRef, useState } from "react";
 import Image from "next/image";
+import { useRouter } from "next/navigation";
 
 import { useAuthState } from "@/stores/auth/auth-context";
 import type { LoginStatus } from "@/data/dto/auth";
@@ -37,6 +38,7 @@ export function ChatScreen() {
   const state = useChatState();
   const chatDispatch = useChatDispatch();
   const authState = useAuthState();
+  const router = useRouter();
   const [showExternalBrowserDialog, setShowExternalBrowserDialog] =
     useState(false);
 
@@ -52,6 +54,7 @@ export function ChatScreen() {
     state.paywallReason === "total_limit"
       ? "The limit for free chat times\nhas been reached"
       : undefined;
+  const messageLimitCta = isGuest ? "Log in to continue chatting" : undefined;
   const showPhotoPaywallBanner =
     state.paywallTriggered && state.paywallReason === "photo_paywall";
   const showPrivatePaywallBanner =
@@ -140,6 +143,14 @@ export function ChatScreen() {
     chatDispatch({ type: "ChatUnlockPrivateMessage", messageId });
   }
 
+  function handleMessageLimitUnlock(): void {
+    if (isGuest) {
+      router.push(ROUTES.auth);
+      return;
+    }
+    router.push(`${ROUTES.subscription}?type=vip`);
+  }
+
   return (
     <MobileShell>
       <div className={styles.shell}>
@@ -176,6 +187,8 @@ export function ChatScreen() {
           {showMessageLimitBanner ? (
             <ChatQuotaExhaustedBanner
               title={messageLimitTitle}
+              ctaLabel={messageLimitCta}
+              onUnlock={handleMessageLimitUnlock}
             />
           ) : (
             <ChatInputBar disabled={state.isReplyingAI} />

src/app/chat/components/chat-quota-exhausted-banner.module.css

@@ -17,7 +17,7 @@
 
 .text {
   color: #fff;
-  font-size: 1rem;
+  font-size: 1.125rem;
   font-weight: 600;
   line-height: 1.4;
   margin: 0 0 var(--spacing-lg, 16px);
@@ -32,7 +32,7 @@
   border-radius: 999px;
   background: linear-gradient(135deg, #ffb8e0 0%, #f57ec0 100%);
   color: #fff;
-  font-size: 1rem;
+  font-size: 1.125rem;
   font-weight: 700;
   cursor: pointer;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);