feat(chat): blur locked image previews

src/app/chat/components/image-bubble.module.css

@@ -1,6 +1,7 @@
 /* ImageBubble 图片气泡样式 */
 
 .bubble {
+  position: relative;
   max-width: 220px;
   max-height: 220px;
   border-radius: var(--radius-lg, 12px);
@@ -17,6 +18,23 @@
   object-fit: cover;
 }
 
+.paywalled .image {
+  filter: blur(8px);
+  transform: scale(1.04);
+}
+
+.paywallOverlay {
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(
+      180deg,
+      rgba(255, 255, 255, 0.04) 0%,
+      rgba(255, 255, 255, 0.14) 100%
+    );
+  pointer-events: none;
+}
+
 .errorFallback {
   display: flex;
   align-items: center;

src/app/chat/components/image-bubble.tsx

@@ -32,7 +32,9 @@ export function ImageBubble({
   return (
     <>
       <div
-        className={styles.bubble}
+        className={`${styles.bubble} ${
+          imagePaywalled ? styles.paywalled : ""
+        }`}
         onClick={() => setOpen(true)}
         role="button"
         tabIndex={0}
@@ -56,6 +58,9 @@ export function ImageBubble({
             onError={() => setError(true)}
           />
         )}
+        {!error && imagePaywalled ? (
+          <div className={styles.paywallOverlay} aria-hidden="true" />
+        ) : null}
       </div>
       {open && (
         <FullscreenImageViewer