Update src/App.scss

src/App.scss

@@ -99,8 +99,9 @@
     direction: rtl; 
     max-height: 70vh;
     overflow-y: auto;
+    width: 280px;
     
-    ul { list-style: none; padding: 0; margin: 0; width: 240px; }
+    ul { list-style: none; padding: 0; margin: 0; }
     li {
       display: flex; align-items: center; justify-content: space-between;
       padding: 10px 12px; border-radius: 8px; cursor: pointer; transition: background-color 150ms ease;
@@ -111,46 +112,99 @@
       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;
-      }
+/* استایل‌های پیش‌نمایش گوینده و گالری */
+.selected-voice-display {
+  padding: 16px;
+  text-align: center;
+  border-bottom: 1px solid theme('colors.custom-border');
+  margin: -8px -8px 8px -8px;
+
+  .voice-image-wrapper {
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    margin: 0 auto 12px;
+    position: relative;
+    box-shadow: 0 0 0 4px transparent;
+    transition: box-shadow 0.3s ease;
+
+    &.speaking {
+      animation: pulse-glow 1.5s infinite ease-in-out;
     }
   }
+
+  img {
+    width: 100%; height: 100%;
+    border-radius: 50%; object-fit: cover;
+  }
+  h3 {
+    font-size: 1.1rem; font-weight: 700;
+    margin: 0 0 4px 0; color: theme('colors.custom-foreground');
+  }
+  p {
+    font-size: 0.8rem;
+    color: theme('colors.custom-foreground');
+    opacity: 0.7; margin: 0;
+  }
+}
+
+.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; }
+}
+
+@keyframes pulse-glow {
+  0% { box-shadow: 0 0 0 0 rgba(10, 132, 255, 0.7); }
+  70% { box-shadow: 0 0 0 10px rgba(10, 132, 255, 0); }
+  100% { box-shadow: 0 0 0 0 rgba(10, 132, 255, 0); }
+}
+
+/* استایل پیغام تایید (Toast) */
+.confirmation-toast {
+  position: fixed;
+  bottom: 110px;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: rgba(44, 44, 46, 0.9);
+  color: #fff;
+  padding: 12px 24px;
+  border-radius: 999px;
+  font-size: 0.9rem;
+  font-weight: 500;
+  z-index: 1001;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+  backdrop-filter: blur(5px);
+  animation: fade-in-out 3s ease-in-out forwards;
+}
+
+@keyframes fade-in-out {
+  0% { opacity: 0; transform: translate(-50%, 20px); }
+  15% { opacity: 1; transform: translate(-50%, 0); }
+  85% { opacity: 1; transform: translate(-50%, 0); }
+  100% { opacity: 0; transform: translate(-50%, 20px); }
 }
 
 /* استایل ویدیو و کنترل‌ها */