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';
@@ -91,12 +91,16 @@
   opacity: 0; pointer-events: none;
   transform: translateY(-10px) scale(0.95); transition: all 150ms ease-in-out;
   &.open { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
+  
   .popover-content {
     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; }
+    max-height: 70vh;
+    overflow-y: auto;
+    
+    ul { list-style: none; padding: 0; margin: 0; width: 240px; }
     li {
       display: flex; align-items: center; justify-content: space-between;
       padding: 10px 12px; border-radius: 8px; cursor: pointer; transition: background-color 150ms ease;
@@ -107,6 +111,45 @@
       div { display: flex; align-items: center; gap: 12px; }
       .material-symbols-outlined { font-size: 22px; &.tick { color: #34c759; } }
     }
+
+    .menu-divider {
+      border: none; height: 1px; background-color: theme('colors.custom-border');
+      margin: 8px 4px;
+    }
+    .menu-subtitle {
+      font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
+      color: theme('colors.custom-foreground'); opacity: 0.5;
+      padding: 8px 12px;
+    }
+    .voice-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
+      gap: 12px;
+      padding: 4px 8px 8px;
+    }
+    .voice-card {
+      cursor: pointer; text-align: center;
+      img {
+        width: 56px; height: 56px; border-radius: 50%;
+        object-fit: cover;
+        border: 3px solid transparent;
+        transition: border-color 0.2s, transform 0.2s;
+        &:hover { transform: scale(1.05); }
+      }
+      &.active img {
+        border-color: #0a84ff;
+        transform: scale(1.05);
+      }
+      .voice-name {
+        font-size: 0.75rem;
+        margin-top: 4px;
+        color: theme('colors.custom-foreground');
+        opacity: 0.8;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+    }
   }
 }
 
@@ -137,20 +180,11 @@
 .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; 
-}
-
+.control-button-wrapper { position: relative; display: flex; justify-content: center; }
 .switch-camera-button-container {
-    position: absolute; 
-    bottom: calc(100% + 0.65rem); 
-    // این دو خط، دکمه را دقیقاً در مرکز افقی والدش (یعنی .control-button-wrapper) قرار می‌دهد
+    position: absolute; bottom: calc(100% + 0.65rem);
     left: 50%;
-    transform: translateX(-50%) translateY(15px) scale(0.7); 
+    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;