Update src/App.scss

src/App.scss

@@ -1,4 +1,4 @@
-// src/App.scss (نسخه نهایی با اصلاح راست‌چین)
+// src/App.scss (نسخه نهایی با اصلاح جایگاه دکمه تعویض دوربین)
 
 // 1. Import Tailwind's base, components, and utilities
 @import 'tailwindcss/base';
@@ -60,7 +60,7 @@
     &:active { transform: scale(0.95); }
 }
 
-/* استایل نوتیفیکیشن زیبا و مرکزی (بدون تغییر) */
+/* استایل نوتیفیکیشن زیبا و مرکزی */
 .notification-popover-wrapper {
     position: fixed; top: 1rem; left: 50%; transform: translateX(-50%); z-index: 100;
     width: calc(100% - 2rem); max-width: 28rem; display: flex; justify-content: center; pointer-events: none;
@@ -95,7 +95,6 @@
     background: theme('colors.custom-popover'); backdrop-filter: blur(10px);
     border-radius: 12px; padding: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.2);
     border: 1px solid theme('colors.custom-border');
-    // ✅ اصلاح ۱: منوی شخصیت‌ها راست‌چین شد
     direction: rtl; 
     ul { list-style: none; padding: 0; margin: 0; width: 220px; }
     li {
@@ -138,9 +137,21 @@
 .cam-button-color { background-color: #E0ECFF; }
 .dark .mic-button-color { background-color: #5C2129; }
 .dark .cam-button-color { background-color: #223355; }
+
+// ✅ تغییر اصلی اینجاست
+.control-button-wrapper { 
+    position: relative; // این مهم است تا دکمه تعویض دوربین نسبت به آن موقعیت‌یابی شود
+    display: flex; 
+    justify-content: center; 
+}
+
 .switch-camera-button-container {
-    position: absolute; bottom: calc(100% + 0.65rem); left: 50%;
-    transform: translateX(-50%) translateY(15px) scale(0.7); z-index: 5;
+    position: absolute; 
+    bottom: calc(100% + 0.65rem); 
+    // این دو خط، دکمه را دقیقاً در مرکز افقی والدش (یعنی .control-button-wrapper) قرار می‌دهد
+    left: 50%;
+    transform: translateX(-50%) translateY(15px) scale(0.7); 
+    z-index: 5;
     opacity: 0; pointer-events: none; transition: opacity 0.35s, transform 0.35s;
     transform-origin: center bottom;
     &.visible { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); pointer-events: auto; }
@@ -170,7 +181,6 @@
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
   border: 1px solid #e5e5e5;
   animation: modal-fade-in 0.3s ease-out;
-  // ✅ اصلاح ۲: مودال و محتوایش راست‌چین شد
   direction: rtl;
   .dark & { background: #2c2c2e; color: #fff; border-color: rgba(255, 255, 255, 0.15); }
   .modal-header {
@@ -192,7 +202,6 @@
       width: 100%; padding: 12px; border-radius: 8px;
       border: 1px solid #ccc; background-color: #f8f8f8;
       color: #111; font-size: 15px;
-      // ✅ اصلاح ۳: متن داخل اینپوت‌ها راست‌چین شد
       text-align: right;
       .dark & { border-color: #555; background-color: #3a3a3c; color: #fff; }
       &:focus {