refactor(app): migrate banner styles to tailwind

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

@@ -18,8 +18,6 @@
  */
 import { useAppNavigator } from "@/router/use-app-navigator";
 
-import styles from "./chat-insufficient-credits-banner.module.css";
-
 export interface ChatInsufficientCreditsBannerProps {
   title?: string;
   description?: string;
@@ -51,12 +49,12 @@ export function ChatInsufficientCreditsBanner({
 
   return (
     <div
-      className={styles.banner}
+      className="mx-[var(--chat-inline-padding,16px)] mb-[var(--page-section-gap,16px)] shrink-0 rounded-[var(--responsive-card-radius-sm,24px)] bg-[linear-gradient(135deg,#f96ade_0%,#f657a0_100%)] px-[var(--responsive-card-padding,16px)] py-[var(--page-section-gap-lg,24px)] text-center shadow-[0_4px_16px_rgba(248,77,150,0.25)]"
       role="status"
       aria-live="polite"
       data-testid="chat-insufficient-credits-banner"
     >
-      <p className={styles.text}>
+      <p className="m-0 mb-[var(--spacing-sm,8px)] text-[var(--responsive-card-title,18px)] font-semibold leading-[1.4] text-white opacity-95">
         {titleLines.map((line, index) => (
           <span key={`${line}-${index}`}>
             {line}
@@ -65,11 +63,13 @@ export function ChatInsufficientCreditsBanner({
         ))}
       </p>
       {description ? (
-        <p className={styles.description}>{description}</p>
+        <p className="mx-auto mb-[var(--spacing-lg,16px)] mt-0 max-w-[min(100%,360px)] text-[var(--responsive-caption,14px)] font-semibold leading-[1.4] text-[rgba(255,255,255,0.88)]">
+          {description}
+        </p>
       ) : null}
       <button
         type="button"
-        className={styles.cta}
+        className="min-h-[var(--responsive-control-height,48px)] w-full cursor-pointer rounded-full border-0 bg-[linear-gradient(135deg,#ffb8e0_0%,#f57ec0_100%)] px-[var(--responsive-card-padding-lg,24px)] text-[var(--responsive-card-title,18px)] font-bold text-white shadow-[0_2px_8px_rgba(0,0,0,0.15)] transition-[box-shadow,transform] duration-150 hover:shadow-[0_4px_12px_rgba(0,0,0,0.2)] active:scale-[0.98]"
         onClick={handleClick}
         aria-label={ctaLabel}
       >