Merge branch 'main' of https://gitea.xiaowang.eu.org/wx44wx/ai-video-fullstack

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="space-y-2">
-              <p className="text-xs tracking-wide text-white/45">AI 助手</p>
+          <div className="flex max-w-sm flex-col items-center text-center">
             <h1 className="text-2xl font-medium leading-tight text-white">
               {assistantName || "助手"}
             </h1>
-            </div>
+            <div className="relative mt-10 inline-flex">
+              <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="h-12 gap-2 rounded-full bg-white px-6 text-[#07101a] shadow-2xl hover:bg-white/90"
+                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>
-            {error && <p className="text-xs leading-5 text-white/65">{error}</p>}
+            </div>
+            {error && (
+              <p className="mt-4 text-xs leading-5 text-white/65">{error}</p>
+            )}
           </div>
         </div>
       )}