Update src/App.scss

src/App.scss

@@ -3,61 +3,63 @@
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
 
-:root { /* ... */ }
-.dark { /* ... */ }
-@layer base { /* ... */ }
-.main-wrapper { /* ... */ }
-.media-area { /* ... */ }
-#large-logo-container { /* ... */ }
-.notification-popover-wrapper { /* ... */ }
-.popover-content { /* ... */ }
-.notification-popover-text-content { /* ... */ }
-.dark .notification-popover-text-content { /* ... */ }
-.header-controls { /* ... */ }
-.header-button { /* ... */ }
-.dark .header-button { /* ... */ }
-
-
-/* Logo Animation Styling - اطمینان از اینکه استایل‌ها با HTML مرجع سازگارند */
+:root { /* ... (بدون تغییر) ... */ }
+.dark { /* ... (بدون تغییر) ... */ }
+@layer base { /* ... (بدون تغییر) ... */ }
+.main-wrapper { /* ... (بدون تغییر) ... */ }
+.media-area { /* ... (بدون تغییر) ... */ }
+#large-logo-container { /* ... (بدون تغییر) ... */ }
+.notification-popover-wrapper { /* ... (بدون تغییر) ... */ }
+.popover-content { /* ... (بدون تغییر) ... */ }
+.notification-popover-text-content { /* ... (بدون تغییر) ... */ }
+.dark .notification-popover-text-content { /* ... (بدون تغییر) ... */ }
+.header-controls { /* ... (بدون تغییر) ... */ }
+.header-button { /* ... (بدون تغییر) ... */ }
+.dark .header-button { /* ... (بدون تغییر) ... */ }
+
+
+/* Logo Animation Styling - اطمینان از اعمال صحیح انیمیشن‌ها و رنگ‌ها */
 .logo-animation-wrapper {
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
 
-    // این کلاس‌ها باید توسط Tailwind برای رنگ‌ها اعمال شوند:
-    // bg-blue-200, bg-blue-300, bg-blue-400, animate-ping
-    // opacity-50
-
-    & > .z-10 > svg { // SvgHumanIcon
+    // اطمینان از اینکه SVG داخل کانتینر آیکون تمام فضا را پر می‌کند
+    & > .z-10 > svg {
         width: 100%;
         height: 100%;
+        display: block; // برای جلوگیری از فضای خالی احتمالی زیر SVG
     }
-}
 
-/* اطمینان از اینکه animate-ping تایلوند به درستی کار می‌کند */
-@keyframes ping {
-    75%, 100% {
-        transform: scale(2);
-        opacity: 0;
+    // انیمیشن ping از Tailwind (اگر از CDN استفاده می‌کنید، باید کار کند)
+    // اگر به صورت دستی تعریف می‌کنید:
+    .animate-ping {
+        animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
     }
 }
-.animate-ping {
-    animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+// اگر از Tailwind استفاده نمی کنید یا انیمیشن ping کار نمی کند، keyframes را اضافه کنید:
+@keyframes ping {
+  75%, 100% {
+    transform: scale(2);
+    opacity: 0;
+  }
 }
 
 
-/* Footer styles - موقعیت عمودی و اندازه آیکون میکروفون */
+/* Footer styles - موقعیت عمودی فوتر */
 .footer-controls-html-like {
     width: 100%;
     display: flex;
     align-items: center;
     position: absolute;
-    bottom: 1.5rem; // **می‌توانید این مقدار را برای بالاتر آمدن بیشتر، افزایش دهید، مثلاً 2rem یا 2.5rem**
-    padding-left: 3rem;
-    padding-right: 3rem;
+    // *** MODIFIED: تنظیم bottom برای بالاتر آمدن، padding افقی برای تطابق ***
+    bottom: 1.5rem;      // فاصله 24px از پایین صفحه، می‌توانید این را به 2rem (32px) تغییر دهید اگر هنوز پایین است
+    padding-left: 2rem;  // فاصله 32px از چپ (در HTML شما 3rem بود، برای موبایل شاید 2rem بهتر باشد)
+    padding-right: 2rem; // فاصله 32px از راست
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
+    
     box-sizing: border-box;
     z-index: 20;
     justify-content: space-between;
@@ -103,16 +105,14 @@
     }
 
     svg {
-        &.reference-mic-svg { // آیکون میکروفون با سه خط
-            width: 65%; // **امتحان کنید این را به 70% یا 75% افزایش دهید**
-            height: 65%;
+        // *** MODIFIED: افزایش بیشتر اندازه آیکون میکروفون مرجع ***
+        &.reference-mic-svg {
+            width: 75%; // افزایش به 75% - می‌توانید این را تا 80% یا بیشتر هم ببرید
+            height: 75%;
         }
-        // برای آیکون‌های دیگر داخل دکمه‌ها (مثل دوربین، توقف و ...)
-        // اگر نیاز به تنظیم اندازه دارند، می‌توانید مشابه بالا برایشان کلاس تعریف کنید
-        // یا یک استایل عمومی برای همه SVGهای داخل .control-button بگذارید:
-        // مثلا:
-        // width: 50%;
-        // height: 50%;
+        // برای سایر SVG ها در دکمه های کنترل، اگر نیاز به اندازه خاصی دارند
+        // مثلاً آیکون دوربین:
+        // &:not(.reference-mic-svg) { width: 50%; height: 50%; }
     }
 }
 
@@ -122,13 +122,12 @@
 .dark .mic-button-color { background-color: #5C2129; }
 .dark .cam-button-color { background-color: #223355; }
 
-
 /* Switch Camera Button (بدون تغییر) */
-.switch-camera-button-container { /* ... */ }
-.switch-camera-button-content { /* ... */ }
+.switch-camera-button-container { /* ... (بدون تغییر) ... */ }
+.switch-camera-button-content { /* ... (بدون تغییر) ... */ }
 
 /* Keyframes for popover (بدون تغییر) */
-@keyframes popover-drop-in { /* ... */ }
-@keyframes popover-lift-out { /* ... */ }
-.animate-popover-open-top-center { /* ... */ }
-.animate-popover-close-top-center { /* ... */ }
+@keyframes popover-drop-in { /* ... (بدون تغییر) ... */ }
+@keyframes popover-lift-out { /* ... (بدون تغییر) ... */ }
+.animate-popover-open-top-center { /* ... (بدون تغییر) ... */ }
+.animate-popover-close-top-center { /* ... (بدون تغییر) ... */ }