feat(chat): show first recharge offer dialog

src/app/chat/components/first-recharge-offer-dialog.module.css

@@ -0,0 +1,116 @@
+.overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 215;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  background:
+    radial-gradient(circle at 50% 28%, rgba(255, 103, 224, 0.26), transparent 34%),
+    rgba(0, 0, 0, 0.52);
+}
+
+.dialog {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  max-width: var(--pwa-install-dialog-max-width, 360px);
+  padding: 24px 18px 18px;
+  border: 1px solid rgba(255, 103, 224, 0.3);
+  border-radius: 34px;
+  background:
+    linear-gradient(180deg, rgba(255, 250, 253, 0.98) 0%, rgba(255, 238, 247, 0.98) 100%),
+    #ffffff;
+  box-shadow: 0 20px 52px rgba(39, 14, 30, 0.26);
+  text-align: center;
+}
+
+.dialog::before {
+  position: absolute;
+  top: -58px;
+  right: -42px;
+  width: 138px;
+  height: 138px;
+  border-radius: 999px;
+  background: rgba(255, 138, 52, 0.18);
+  content: "";
+}
+
+.badge {
+  position: relative;
+  display: inline-flex;
+  padding: 6px 10px;
+  border-radius: 999px;
+  background: rgba(255, 95, 174, 0.12);
+  color: #f657a0;
+  font-size: 12px;
+  font-weight: 900;
+  letter-spacing: 0.02em;
+  line-height: 1;
+  text-transform: uppercase;
+}
+
+.discount {
+  position: relative;
+  margin-top: 12px;
+  color: #181014;
+  font-size: 46px;
+  font-weight: 900;
+  letter-spacing: -1.5px;
+  line-height: 1;
+}
+
+.title {
+  position: relative;
+  margin: 10px 0 0;
+  color: #181014;
+  font-size: 22px;
+  font-weight: 900;
+  line-height: 1.18;
+}
+
+.content {
+  position: relative;
+  margin: 10px 12px 20px;
+  color: #5f4d56;
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 1.45;
+}
+
+.actions {
+  position: relative;
+  display: flex;
+  gap: var(--spacing-md, 12px);
+  width: 100%;
+}
+
+.button {
+  display: flex;
+  flex: 1 1 auto;
+  height: var(--pwa-button-height, 44px);
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: var(--radius-bottom-sheet, 28px);
+  cursor: pointer;
+  font-size: var(--font-size-lg, 16px);
+  font-weight: 800;
+}
+
+.secondary {
+  background: rgba(24, 16, 20, 0.1);
+  color: #5f4d56;
+}
+
+.primary {
+  background: linear-gradient(90deg, #ff67e0 0%, #ff52a2 100%);
+  color: #ffffff;
+  box-shadow: 0 8px 18px rgba(246, 87, 160, 0.28);
+}
+
+.button:focus-visible {
+  outline: 2px solid #f657a0;
+  outline-offset: 3px;
+}

src/app/chat/components/first-recharge-offer-dialog.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import styles from "./first-recharge-offer-dialog.module.css";
+
+export interface FirstRechargeOfferDialogProps {
+  open: boolean;
+  discountPercent: number;
+  onClose: () => void;
+  onClaim: () => void;
+}
+
+export function FirstRechargeOfferDialog({
+  open,
+  discountPercent,
+  onClose,
+  onClaim,
+}: FirstRechargeOfferDialogProps) {
+  if (!open) return null;
+
+  return (
+    <div
+      className={styles.overlay}
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="first-recharge-offer-title"
+    >
+      <div className={styles.dialog}>
+        <span className={styles.badge}>Limited offer</span>
+        <div className={styles.discount}>{discountPercent}% OFF</div>
+        <h2 id="first-recharge-offer-title" className={styles.title}>
+          First Recharge Offer
+        </h2>
+        <p className={styles.content}>
+          Your first recharge discount is ready. Claim it now and keep the
+          conversation flowing.
+        </p>
+        <div className={styles.actions}>
+          <button
+            type="button"
+            className={`${styles.button} ${styles.secondary}`}
+            onClick={onClose}
+          >
+            Later
+          </button>
+          <button
+            type="button"
+            className={`${styles.button} ${styles.primary}`}
+            onClick={onClaim}
+          >
+            Claim offer
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/chat/components/index.ts

@@ -12,6 +12,7 @@ export * from "./chat-input-text-field";
 export * from "./chat-send-button";
 export * from "./date-header";
 export * from "./external-browser-dialog";
+export * from "./first-recharge-offer-dialog";
 export * from "./fullscreen-image-viewer";
 export * from "./history-unlock-dialog";
 export * from "./image-bubble";