Update src/App.scss

src/App.scss

@@ -1,8 +1,6 @@
 // src/App.scss
 
 // 1. Import Tailwind's base, components, and utilities
-// این خطوط فرض می‌کنند که Tailwind به عنوان یک وابستگی npm نصب شده است.
-// اگر از CDN استفاده می‌کنید، این خطوط را حذف کنید و Tailwind از طریق CDN بارگذاری می‌شود.
 @import 'tailwindcss/base';
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
@@ -16,7 +14,6 @@
     --popover: oklch(1 0 0);
     --popover-foreground: oklch(0.145 0 0);
     --border: oklch(0.922 0 0);
-    // --ring: oklch(0.6 0.15 260); // Example ring color if needed for outline-ring/50
 }
 
 .dark {
@@ -25,33 +22,24 @@
     --popover: oklch(0.205 0 0);
     --popover-foreground: oklch(0.985 0 0);
     --border: oklch(1 0 0 / 10%);
-    // --ring: oklch(0.7 0.1 250); // Example dark ring color
 }
 
-// 3. Apply base styles using Tailwind's @layer directive
-// اگر از @import های بالا استفاده نمی‌کنید (مثلاً با CDN)، این بخش @layer ممکن است کار نکند
-// و باید استایل‌های body را به صورت CSS معمولی بنویسید.
+// 3. Apply base styles
 @layer base {
     * {
-        //  استفاده از متغیر --border برای رنگ بوردر
-        //  ترجمه outline-ring/50 به CSS استاندارد بدون دانستن تعریف دقیق آن در Tailwind سخت است.
-        //  می‌توانید یک outline ساده‌تر قرار دهید یا اگر در tailwind.config.js تعریف شده، @apply کار خواهد کرد.
         border-color: var(--border);
-        outline-color: var(--foreground); // یک رنگ پیش‌فرض برای outline
+        outline-color: var(--foreground); 
     }
     body {
-        @apply bg-background text-foreground; // اگر Tailwind پردازش می‌کند
-        // اگر Tailwind پردازش نمی‌کند، معادل CSS آن را بنویسید:
-        // background-color: var(--background);
-        // color: var(--foreground);
+        @apply bg-background text-foreground;
         overflow-x: hidden;
-        font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; // فونت پیش‌فرض Tailwind
+        font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
     }
 }
 
-// 4. Styles for components (previously in <style jsx global>)
+// 4. Styles for components
 
 /* Notification Popover */
 .notification-popover-wrapper {
@@ -61,7 +49,7 @@
     transform: translateX(-50%);
     z-index: 100;
     width: calc(100% - 2rem);
-    max-width: 28rem; /* max-w-md */
+    max-width: 28rem;
     display: flex;
     justify-content: center;
     pointer-events: none;
@@ -74,38 +62,38 @@
     border-color: var(--border);
     background-color: var(--popover);
     color: var(--popover-foreground);
-    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); // shadow-lg
+    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;
+    opacity: 0; // <--- Corrected: no quotes
     transform: translateY(-100%) scale(0.9);
     pointer-events: none;
 
-    &.open { // SCSS nesting for .popover-content.open
-        opacity: 1;
+    &.open {
+        opacity: 1; // <--- Corrected: no quotes
         transform: translateY(0) scale(1);
         pointer-events: auto;
     }
 }
 
 .notification-popover-text-content {
-    background-color: #eff6ff; /* bg-blue-50 */
-    font-size: 0.875rem; /* text-sm */
-    line-height: 1.5rem; /* leading-6 */
+    background-color: #eff6ff;
+    font-size: 0.875rem;
+    line-height: 1.5rem;
     direction: rtl;
-    padding: 1rem; /* p-4 */
-    border-radius: var(--radius-md, 0.5rem); /* rounded-md */
-    color: oklch(0.145 0 0); // رنگ متن برای خوانایی روی پس‌زمینه آبی روشن
+    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); /* رنگ متن روشن‌تر برای حالت تاریک */
+    background-color: oklch(0.25 0.05 230);
+    color: oklch(0.95 0.01 230);
 }
 
 /* Header controls */
 .header-controls {
     display: flex;
-    padding: 1rem; /* p-4 */
+    padding: 1rem;
     justify-content: space-between;
     align-items: center;
     width: 100%;
@@ -119,30 +107,30 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: 0.5rem; /* p-2 */
-    border-radius: var(--radius-lg, 0.625rem); /* rounded-lg */
-    background-color: #e5e7eb; /* bg-gray-200 */
+    padding: 0.5rem;
+    border-radius: var(--radius-lg, 0.625rem);
+    background-color: #e5e7eb;
     cursor: pointer;
     transition: background-color 0.2s;
 
     &:hover {
-        background-color: #d1d5db; /* bg-gray-300 */
+        background-color: #d1d5db;
     }
 
     svg {
-        opacity: 0.7;
-        stroke: #374151; /* gray-700 */
+        opacity: 0.7; // <--- Corrected: no quotes
+        stroke: #374151;
     }
 }
 
 .dark .header-button {
-    background-color: oklch(0.28 0 0); /* خاکستری تیره‌تر */
+    background-color: oklch(0.28 0 0);
     &:hover {
         background-color: oklch(0.35 0 0);
     }
     svg {
-        opacity: 0.8;
-        stroke: oklch(0.85 0 0); /* رنگ روشن‌تر برای آیکون */
+        opacity: 0.8; // <--- Corrected: no quotes
+        stroke: oklch(0.85 0 0);
     }
 }
 
@@ -150,10 +138,10 @@
 .footer-controls {
     width: 100%;
     display: flex;
-    gap: 1rem; /* gap-4 */
+    gap: 1rem;
     position: absolute;
     bottom: 0;
-    padding: 2rem 3rem; /* p-8 pl-12 pr-12 (تقریبی) */
+    padding: 2rem 3rem;
     align-items: center;
 
     &.layout-default {
@@ -167,28 +155,28 @@
 .control-button {
     height: 80px;
     width: 80px;
-    border-radius: 9999px; /* rounded-full */
+    border-radius: 9999px;
     padding: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     border-width: 1px;
     border-color: var(--border);
-    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06); // shadow-md
+    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
     cursor: pointer;
     transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
 
     &:hover {
         transform: scale(1.05);
-        box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05); // shadow-lg
+        box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
     }
 }
 
 .cam-button-color { background-color: #E0ECFF; }
-.mic-button-color { background-color: #fecdd3; /* bg-rose-200 */ }
+.mic-button-color { background-color: #fecdd3; }
 
-.dark .cam-button-color { background-color: #223355; /* آبی تیره‌تر */ }
-.dark .mic-button-color { background-color: #5C2129; /* قرمز/رز تیره‌تر */ }
+.dark .cam-button-color { background-color: #223355; }
+.dark .mic-button-color { background-color: #5C2129; }
 
 /* Switch Camera Button */
 .switch-camera-button-container {
@@ -196,14 +184,14 @@
     bottom: calc(100% + 0.65rem);
     left: 50%;
     z-index: 5;
-    opacity: 0;
+    opacity: 0; // <--- Corrected: no quotes
     transform: translateY(15px) scale(0.7) translateX(-50%);
     pointer-events: none;
     transition: opacity 0.35s cubic-bezier(0.68, -0.55, 0.27, 1.55), transform 0.35s cubic-bezier(0.68, -0.55, 0.27, 1.55);
     transform-origin: center bottom;
 
     &.visible {
-        opacity: 1;
+        opacity: 1; // <--- Corrected: no quotes
         transform: translateY(0) scale(1) translateX(-50%);
         pointer-events: auto;
     }
@@ -214,11 +202,11 @@
     height: 48px;
     background-color: var(--background);
     border: 1px solid var(--border);
-    border-radius: 9999px; /* rounded-full */
+    border-radius: 9999px;
     display: flex;
     align-items: center;
     justify-content: center;
-    box-shadow: 0 5px 10px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.08); /* سایه سفارشی */
+    box-shadow: 0 5px 10px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.08);
     cursor: pointer;
     transform-origin: center;
     transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
@@ -243,15 +231,31 @@
 }
 
 /* Keyframes for popover */
+// Corrected: percentages and opacity values are not quoted
 @keyframes popover-drop-in {
-    '0%' { opacity: '0'; transform: 'translateY(-100%) scale(0.9)'; }
-    '70%' { opacity: '1'; transform: 'translateY(5px) scale(1.02)'; } /* Slight overshoot */
-    '100%': { opacity: '1'; transform: 'translateY(0) scale(1)'; }
+    0% { // <--- Corrected
+        opacity: 0;
+        transform: translateY(-100%) scale(0.9);
+    }
+    70% { // <--- Corrected
+        opacity: 1;
+        transform: translateY(5px) scale(1.02); /* Slight overshoot */
+    }
+    100% { // <--- Corrected
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
 }
 
 @keyframes popover-lift-out {
-    '0%': { opacity: '1'; transform: 'translateY(0) scale(1)'; }
-    '100%': { opacity: '0'; transform: 'translateY(-100%) scale(0.9)'; }
+    0% { // <--- Corrected
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+    100% { // <--- Corrected
+        opacity: 0;
+        transform: translateY(-100%) scale(0.9);
+    }
 }
 
 /* Classes that use these keyframes */
@@ -262,21 +266,7 @@
     animation: popover-lift-out 0.3s ease-in forwards;
 }
 
-/*
-  Utility overrides (اینها هک هستند و بهتر است در صورت امکان از طریق تنظیمات Tailwind یا اعمال مستقیم کلاس‌ها انجام شوند)
-  اگر این کلاس‌ها در Tailwind شما تعریف نشده‌اند، این بخش را می‌توانید حذف کنید،
-  چون رنگ‌ها مستقیماً در استایل‌های بالا یا از طریق متغیرهای CSS اعمال شده‌اند.
-*/
+// Utility overrides are generally not needed if Tailwind is configured correctly.
+// These were previously commented out and can remain so.
 // .bg-blue-200 { background-color: #bfdbfe !important; }
-// .bg-blue-300 { background-color: #93c5fd !important; }
-// .bg-blue-400 { background-color: #60a5fa !important; }
-// .bg-green-200 { background-color: #bbf7d0 !important; }
-// .bg-green-300 { background-color: #86efac !important; }
-// .bg-green-400 { background-color: #4ade80 !important; }
-
-// کلاس antialiased که در body تگ HTML بود، معادل Tailwind برای font-smoothing است.
-// این مورد توسط @import 'tailwindcss/base'; یا استایل پیش‌فرض مرورگرها پوشش داده می‌شود.
-// .antialiased {
-//  -webkit-font-smoothing: antialiased;
-//  -moz-osx-font-smoothing: grayscale;
-// }
+// ...