feat(chat): tailor insufficient credits guidance

src/app/chat/components/chat-insufficient-credits-banner.module.css

@@ -25,11 +25,20 @@
   font-size: var(--responsive-card-title, 18px);
   font-weight: 600;
   line-height: 1.4;
-  margin: 0 0 var(--spacing-lg, 16px);
+  margin: 0 0 var(--spacing-sm, 8px);
   /* 与 splash 标题的粉色字保持视觉一致（白底渐变叠加层需要白字保证可读性） */
   opacity: 0.95;
 }
 
+.description {
+  max-width: min(100%, 360px);
+  margin: 0 auto var(--spacing-lg, 16px);
+  color: rgba(255, 255, 255, 0.88);
+  font-size: var(--responsive-caption, 13px);
+  font-weight: 600;
+  line-height: 1.45;
+}
+
 .cta {
   width: 100%;
   min-height: var(--responsive-control-height, 48px);

src/app/chat/components/chat-insufficient-credits-banner.tsx

@@ -22,6 +22,7 @@ import styles from "./chat-insufficient-credits-banner.module.css";
 
 export interface ChatInsufficientCreditsBannerProps {
   title?: string;
+  description?: string;
   ctaLabel?: string;
   /**
    * 自定义点击回调（不传则默认走统一订阅导航）
@@ -33,6 +34,7 @@ export interface ChatInsufficientCreditsBannerProps {
 
 export function ChatInsufficientCreditsBanner({
   title = "Insufficient credits\nTop up to continue chatting",
+  description,
   ctaLabel = "Top up credits to continue",
   onUnlock,
 }: ChatInsufficientCreditsBannerProps) {
@@ -62,6 +64,9 @@ export function ChatInsufficientCreditsBanner({
           </span>
         ))}
       </p>
+      {description ? (
+        <p className={styles.description}>{description}</p>
+      ) : null}
       <button
         type="button"
         className={styles.cta}