feat: enhance mobile call page with animated ripple effect

Added a new animation for the "开始通话" button on the mobile call page, providing a visual ripple effect to improve user experience. Adjusted layout for better clarity and responsiveness.

frontend/src/app/globals.css

@@ -271,4 +271,31 @@
       transparent
     );
   }
+
+  /* 手机通话页「开始通话」引导光晕：柔和向外扩散的涟漪环 */
+  @keyframes mobile-call-ripple {
+    0% {
+      transform: scale(1);
+      opacity: 0.55;
+    }
+    100% {
+      transform: scale(1.85);
+      opacity: 0;
+    }
+  }
+
+  .mobile-call-ripple {
+    animation: mobile-call-ripple 2.4s cubic-bezier(0.22, 1, 0.36, 1) infinite;
+  }
+
+  .mobile-call-ripple-delay {
+    animation-delay: 1.2s;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .mobile-call-ripple,
+    .mobile-call-ripple-delay {
+      animation: none;
+    }
+  }
 }

frontend/src/components/pages/MobileCallPage.tsx

@@ -543,25 +543,34 @@ export function MobileCallPage({ assistantId }: { assistantId: string }) {
 
       {!inCall && (
         <div className="absolute inset-0 z-[2] flex items-center justify-center px-8">
-          <div className="flex max-w-sm flex-col items-center gap-5 text-center">
+          <div className="flex max-w-sm flex-col items-center text-center">
-            <div className="space-y-2">
+            <h1 className="text-2xl font-medium leading-tight text-white">
-              <p className="text-xs tracking-wide text-white/45">AI 助手</p>
+              {assistantName || "助手"}
-              <h1 className="text-2xl font-medium leading-tight text-white">
+            </h1>
-                {assistantName || "助手"}
+            <div className="relative mt-10 inline-flex">
-              </h1>
+              <span
+                aria-hidden
+                className="mobile-call-ripple pointer-events-none absolute inset-0 rounded-full bg-white/35"
+              />
+              <span
+                aria-hidden
+                className="mobile-call-ripple mobile-call-ripple-delay pointer-events-none absolute inset-0 rounded-full bg-white/25"
+              />
+              <Button
+                type="button"
+                onClick={() => {
+                  setView("chat");
+                  void startCall();
+                }}
+                className="relative z-10 h-12 gap-2 rounded-full bg-white px-6 text-[#07101a] shadow-[0_0_24px_rgba(255,255,255,0.35)] hover:bg-white/90"
+              >
+                <Phone size={19} />
+                {status === "failed" || callEnded ? "重新开始通话" : "开始通话"}
+              </Button>
             </div>
-            <Button
+            {error && (
-              type="button"
+              <p className="mt-4 text-xs leading-5 text-white/65">{error}</p>
-              onClick={() => {
+            )}
-                setView("chat");
-                void startCall();
-              }}
-              className="h-12 gap-2 rounded-full bg-white px-6 text-[#07101a] shadow-2xl hover:bg-white/90"
-            >
-              <Phone size={19} />
-              {status === "failed" || callEnded ? "重新开始通话" : "开始通话"}
-            </Button>
-            {error && <p className="text-xs leading-5 text-white/65">{error}</p>}
           </div>
         </div>
       )}