Update src/App.scss

src/App.scss

@@ -1,34 +1,26 @@
-// src/App.scss (نسخه نهایی و تصحیح شده برای ویدیو تمام‌صفحه)
+// src/App.scss (نسخه نهایی با همه اصلاحات ظاهری)
 
 // 1. Import Tailwind's base, components, and utilities
 @import 'tailwindcss/base';
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
 
-// 2. Define CSS Variables (از کد شما - تم روشن به عنوان پیش‌فرض)
+// 2. Define CSS Variables (تم روشن به عنوان پیش‌فرض)
 :root {
-    --radius: 0.625rem;
-    --radius-md: 0.5rem;
-    --background: oklch(1 0 0); /* <-- پس‌زمینه سفید */
-    --foreground: oklch(0.145 0 0); /* <-- متن تیره */
-    --popover: oklch(1 0 0);
-    --popover-foreground: oklch(0.145 0 0);
+    --radius: 0.625rem; --radius-md: 0.5rem;
+    --background: oklch(1 0 0); --foreground: oklch(0.145 0 0);
+    --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0);
     --border: oklch(0.922 0 0);
 }
 .dark {
-    --background: oklch(0.145 0 0);
-    --foreground: oklch(0.985 0 0);
-    --popover: oklch(0.205 0 0);
-    --popover-foreground: oklch(0.985 0 0);
+    --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0);
+    --popover: oklch(0.205 0 0); --popover-foreground: oklch(0.985 0 0);
     --border: oklch(1 0 0 / 10%);
 }
 
-// 3. Apply base styles (از کد شما)
+// 3. Apply base styles
 @layer base {
-    * {
-        border-color: theme('colors.custom-border');
-        box-sizing: border-box;
-    }
+    * { border-color: theme('colors.custom-border'); box-sizing: border-box; }
     body {
         @apply bg-custom-background text-custom-foreground;
         font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
@@ -36,7 +28,7 @@
     }
 }
 
-/* --- START: استایل‌های اصلی و جدید برای چیدمان و عناصر --- */
+/* --- استایل‌های چیدمان و عناصر --- */
 .loading-screen {
   display: flex; align-items: center; justify-content: center;
   height: 100vh; font-size: 1.2rem;
@@ -60,30 +52,49 @@
 .header-icon-button {
     display: flex; align-items: center; justify-content: center; padding: 0.5rem;
     width: 44px; height: 44px; border-radius: 9999px;
-    background-color: transparent; 
-    border: none;
-    backdrop-filter: none;
+    background-color: transparent; border: none; backdrop-filter: none;
     cursor: pointer; transition: all 0.2s ease-out;
-    .material-symbols-outlined {
-        opacity: 0.8;
-        color: #374151;
-        font-size: 28px;
-    }
+    .material-symbols-outlined { opacity: 0.8; color: #374151; font-size: 28px; }
     .dark & .material-symbols-outlined { color: oklch(0.95 0 0); }
     &:hover { background-color: rgba(0, 0, 0, 0.05); }
     &:active { transform: scale(0.95); }
 }
 
-.notification-popover-wrapper, .personality-popover-wrapper {
-  position: absolute; z-index: 100; opacity: 0; pointer-events: none;
+/* استایل نوتیفیکیشن زیبا و مرکزی */
+.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;
+}
+#notification-popover.popover-content {
+    width: 100%; border-radius: var(--radius-md, 0.5rem); border-width: 1px;
+    background-color: theme('colors.custom-popover'); color: theme('colors.custom-popover-foreground');
+    border-color: theme('colors.custom-border'); box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    outline: none; transition: opacity 0.3s ease-out, transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
+    opacity: 0; transform: translateY(-120%) scale(0.9); pointer-events: none;
+    &.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
+}
+.notification-popover-text-content {
+    background-color: #eff6ff; font-size: 0.875rem; line-height: 1.5rem; direction: rtl;
+    padding: 1rem; border-radius: var(--radius-md, 0.5rem); color: oklch(0.145 0 0);
+}
+.dark .notification-popover-text-content {
+    background-color: oklch(0.25 0.05 230); color: oklch(0.95 0.01 230);
+}
+.animate-popover-open-top-center { animation: popover-drop-in 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards; }
+.animate-popover-close-top-center { animation: popover-lift-out 0.3s ease-in forwards; }
+@keyframes popover-drop-in { from { opacity: 0; transform: translateY(-100%) scale(0.9); } to { opacity: 1; transform: translateY(0) scale(1); } }
+@keyframes popover-lift-out { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(-100%) scale(0.9); } }
+
+/* استایل منوی شخصیت */
+.personality-popover-wrapper {
+  position: absolute; z-index: 100; top: calc(1rem + 44px + 8px); left: 1rem;
+  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);
+    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');
-    color: theme('colors.custom-popover-foreground'); font-size: 14px;
     ul { list-style: none; padding: 0; margin: 0; width: 220px; }
     li {
       display: flex; align-items: center; justify-content: space-between;
@@ -97,28 +108,12 @@
     }
   }
 }
-.notification-popover-wrapper {
-    top: calc(1rem + 44px + 8px); right: 1rem;
-    .popover-content { padding: 12px 16px; width: 280px; }
-}
-.personality-popover-wrapper {
-    top: calc(1rem + 44px + 8px); left: 1rem;
-}
 
-/* بخش‌های دیگر استایل که از کد شما حفظ شده‌اند */
+/* استایل ویدیو و کنترل‌ها */
 .media-area {
-    position: absolute; top: 0; left: 0;
-    width: 100%; height: 100%;
-    z-index: 1;
-    overflow: hidden; // برای جلوگیری از بیرون‌زدگی ویدیو
-
-    // ✅ تغییر اصلی اینجاست
-    // این کد به تگ ویدیو می‌گوید که کل فضای media-area را پر کند
-    video#video-feed {
-        width: 100%;
-        height: 100%;
-        object-fit: cover; // کلیدی‌ترین بخش: ویدیو را بدون تغییر نسبت، برای پر کردن فضا برش می‌دهد
-    }
+    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
+    z-index: 1; overflow: hidden;
+    video#video-feed { width: 100%; height: 100%; object-fit: cover; }
 }
 #large-logo-container {
     display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
@@ -128,11 +123,6 @@
     width: 100%; display: flex; align-items: center; position: absolute;
     bottom: 2rem; padding: 0.5rem 2.5rem; box-sizing: border-box; z-index: 20; justify-content: space-between;
 }
-.small-logo-footer-html-like {
-    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
-    z-index: 1; display: flex; align-items: center; justify-content: center;
-}
-.control-button-wrapper { position: relative; display: flex; justify-content: center; }
 .control-button {
     height: 80px; width: 80px; border-radius: 9999px; padding: 0;
     display: flex; align-items: center; justify-content: center;
@@ -141,7 +131,6 @@
     cursor: pointer; transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
     flex-shrink: 0; z-index: 2; overflow: hidden;
     &:hover { transform: scale(1.05); }
-    svg.reference-mic-svg { width: 75%; height: 75%; }
 }
 .mic-button-color { background-color: #fecdd3; }
 .cam-button-color { background-color: #E0ECFF; }
@@ -165,7 +154,7 @@
     svg { width: 22px; height: 22px; stroke: theme('colors.custom-foreground'); }
 }
 
-/* استایل‌های مودال (بدون تغییر) */
+/* استایل‌های مودال */
 .modal-overlay {
   position: fixed; top: 0; left: 0; right: 0; bottom: 0;
   background-color: rgba(0, 0, 0, 0.7);
@@ -173,18 +162,13 @@
   z-index: 1000; backdrop-filter: blur(5px);
 }
 .modal-content {
-  background: #fff;
-  color: #111;
+  background: #fff; color: #111;
   padding: 24px; border-radius: 16px;
   width: 90%; max-width: 500px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
   border: 1px solid #e5e5e5;
   animation: modal-fade-in 0.3s ease-out;
-  .dark & {
-    background: #2c2c2e;
-    color: #fff;
-    border-color: rgba(255, 255, 255, 0.15);
-  }
+  .dark & { background: #2c2c2e; color: #fff; border-color: rgba(255, 255, 255, 0.15); }
   .modal-header {
     display: flex; justify-content: space-between; align-items: center;
     margin-bottom: 20px; border-bottom: 1px solid #e5e5e5; padding-bottom: 16px;
@@ -204,9 +188,7 @@
       width: 100%; padding: 12px; border-radius: 8px;
       border: 1px solid #ccc; background-color: #f8f8f8;
       color: #111; font-size: 15px;
-      .dark & {
-        border-color: #555; background-color: #3a3a3c; color: #fff;
-      }
+      .dark & { border-color: #555; background-color: #3a3a3c; color: #fff; }
       &:focus {
         outline: none; border-color: #0a84ff;
         box-shadow: 0 0 0 2px rgba(10, 132, 255, 0.5);