Update src/components/control-tray/control-tray.scss

src/components/control-tray/control-tray.scss

@@ -1,3 +1,5 @@
+// src/components/control-tray/control-tray.scss
+
 .action-button {
   display: flex;
   align-items: center;
@@ -174,10 +176,9 @@
   align-items: center;
   overflow: clip;
   padding: 10px;
-
   transition: all 0.6s ease-in;
 
-  &>* {
+  & > * {
     display: flex;
     align-items: center;
     flex-direction: column;
@@ -186,26 +187,35 @@
 }
 
 @keyframes opacity-pulse {
-  0% {
-    opacity: 0.9;
-  }
+  0% { opacity: 0.9; }
+  50% { opacity: 1; }
+  100% { opacity: 0.9; }
+}
 
-  50% {
-    opacity: 1;
-  }
+@keyframes fadeIn {
+  from { opacity: 0; transform: translate(-50%, 10px); }
+  to { opacity: 1; transform: translate(-50%, 0); }
+}
 
-  100% {
-    opacity: 0.9;
-  }
+/* --- 👇 کدهای جدید انیمیشن 👇 --- */
+/* انیمیشن برای موج صدای ربات (که روی لوگوی بزرگ اعمال می‌شود) */
+.ai-speaking-ripple {
+  transform: scale(var(--ai-voice-scale, 1));
+  transition: transform 0.15s ease-out;
 }
 
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translate(-50%, 10px);
+/* انیمیشن برای دکمه وسط هنگام صحبت کاربر */
+@keyframes user-speaking-pulse-animation {
+  0%, 100% {
+    transform: scale(1);
+    filter: brightness(100%);
   }
-  to {
-    opacity: 1;
-    transform: translate(-50%, 0);
+  50% {
+    transform: scale(1.05);
+    filter: brightness(110%);
   }
 }
+
+.user-is-speaking-pulse {
+  animation: user-speaking-pulse-animation 1.5s infinite ease-in-out;
+}