refactor(ui): add shared character avatar

src/app/tip/tip-screen.module.css

@@ -121,7 +121,7 @@
   height: clamp(88px, 22.222vw, 112px);
   place-items: center;
   border: 4px solid rgba(255, 255, 255, 0.9);
-  border-radius: 30px;
+  border-radius: 9999px;
   background: linear-gradient(145deg, #ffbd7c, #ff5d91);
   box-shadow:
     0 20px 44px rgba(255, 98, 133, 0.24),
@@ -129,12 +129,6 @@
   overflow: hidden;
 }
 
-.avatarRing img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
 .eyebrow {
   margin: 16px 0 0;
   color: #b35d63;

src/app/tip/tip-screen.tsx

@@ -1,9 +1,9 @@
 "use client";
 
 import { useEffect, useMemo, useRef } from "react";
-import Image from "next/image";
 import { ArrowLeft, Heart, Sparkles } from "lucide-react";
 
+import { CharacterAvatar } from "@/app/_components";
 import { MobileShell } from "@/app/_components/core";
 import { usePaymentOrderLifecycle } from "@/app/_hooks/use-payment-order-lifecycle";
 import type { PayChannel } from "@/data/dto/payment";
@@ -165,11 +165,10 @@ export function TipScreen({
 
         <section className={styles.hero} aria-labelledby="tip-title">
           <div className={styles.avatarRing}>
-            <Image
-              src="/images/chat/pic-chat-elio.png"
+            <CharacterAvatar
               alt="Elio Silvestri"
-              width={88}
-              height={88}
+              size="100%"
+              imageSize={88}
               priority
             />
           </div>