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';
@@ -15,7 +15,7 @@
     --popover-foreground: oklch(0.145 0 0);
     --border: oklch(0.922 0 0);
 }
-.dark { // تم دارک همچنان در دسترس است اگر بخواهید استفاده کنید
+.dark {
     --background: oklch(0.145 0 0);
     --foreground: oklch(0.985 0 0);
     --popover: oklch(0.205 0 0);
@@ -60,23 +60,17 @@
 .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; // حذف افکت بلور
+    border: none;
+    backdrop-filter: none;
     cursor: pointer; transition: all 0.2s ease-out;
     .material-symbols-outlined {
         opacity: 0.8;
-        // ✅ تغییر ۲: رنگ آیکون‌ها در حالت روشن تیره شد
-        color: #374151; // رنگ تیره برای تم روشن
+        color: #374151;
         font-size: 28px;
     }
-    .dark & .material-symbols-outlined {
-        color: oklch(0.95 0 0); // رنگ روشن برای تم دارک
-    }
-    &:hover { 
-      background-color: rgba(0, 0, 0, 0.05); // یک پس‌زمینه خیلی محو در هاور
-    }
+    .dark & .material-symbols-outlined { color: oklch(0.95 0 0); }
+    &:hover { background-color: rgba(0, 0, 0, 0.05); }
     &:active { transform: scale(0.95); }
 }
 
@@ -90,7 +84,6 @@
     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;
@@ -111,18 +104,21 @@
 .personality-popover-wrapper {
     top: calc(1rem + 44px + 8px); left: 1rem;
 }
-/* --- END: استایل‌های جدید --- */
-
 
 /* بخش‌های دیگر استایل که از کد شما حفظ شده‌اند */
 .media-area {
-    // ✅ تغییر ۳: این بخش کل صفحه را اشغال می‌کند
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 1; // زیر همه کنترل‌ها قرار می‌گیرد
+    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; // کلیدی‌ترین بخش: ویدیو را بدون تغییر نسبت، برای پر کردن فضا برش می‌دهد
+    }
 }
 #large-logo-container {
     display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
@@ -177,7 +173,7 @@
   z-index: 1000; backdrop-filter: blur(5px);
 }
 .modal-content {
-  background: #fff; /* پس‌زمینه مودال در تم روشن */
+  background: #fff;
   color: #111;
   padding: 24px; border-radius: 16px;
   width: 90%; max-width: 500px;