Update src/App.scss

src/App.scss

@@ -1,12 +1,13 @@
-/* Import or define Tailwind base, components, utilities if not using CDN, or if extending */
-/* @tailwind base; */
-/* @tailwind components; */
-/* @tailwind utilities; */
+// 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';
 
-/* CSS variables and base styles from your new HTML's <style> tag */
-@custom-variant dark (&:is(.dark *)); /* If using PostCSS with custom variants */
-
+// 2. Define CSS Variables
 :root {
     --radius: 0.625rem; /* 10px */
     --radius-md: 0.5rem; /* 8px */
@@ -15,12 +16,7 @@
     --popover: oklch(1 0 0);
     --popover-foreground: oklch(0.145 0 0);
     --border: oklch(0.922 0 0);
-    /* Add other variables from your HTML if they are defined in :root */
-    --accent-red: #fecdd3; /* Example mic button color */
-    --Blue-500: #3b82f6; /* Example connect button color */
-
-     /* For mic pulse from original control-tray.scss */
-    --volume: 0px;
+    // --ring: oklch(0.6 0.15 260); // Example ring color if needed for outline-ring/50
 }
 
 .dark {
@@ -29,16 +25,35 @@
     --popover: oklch(0.205 0 0);
     --popover-foreground: oklch(0.985 0 0);
     --border: oklch(1 0 0 / 10%);
-    --accent-red: #5C2129;
-    --Blue-500: #1e40af;
+    // --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 معمولی بنویسید.
 @layer base {
-    * { @apply border-border outline-ring/50; } /* Requires Tailwind */
-    body { @apply bg-background text-foreground; overflow-x: hidden; } /* Requires Tailwind */
+    * {
+        //  استفاده از متغیر --border برای رنگ بوردر
+        //  ترجمه outline-ring/50 به CSS استاندارد بدون دانستن تعریف دقیق آن در Tailwind سخت است.
+        //  می‌توانید یک outline ساده‌تر قرار دهید یا اگر در tailwind.config.js تعریف شده، @apply کار خواهد کرد.
+        border-color: var(--border);
+        outline-color: var(--foreground); // یک رنگ پیش‌فرض برای outline
+    }
+    body {
+        @apply bg-background text-foreground; // اگر Tailwind پردازش می‌کند
+        // اگر Tailwind پردازش نمی‌کند، معادل CSS آن را بنویسید:
+        // background-color: var(--background);
+        // color: var(--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
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+    }
 }
 
-/* Notification Popover Wrapper & Content */
+// 4. Styles for components (previously in <style jsx global>)
+
+/* Notification Popover */
 .notification-popover-wrapper {
     position: fixed;
     top: 1rem;
@@ -46,7 +61,7 @@
     transform: translateX(-50%);
     z-index: 100;
     width: calc(100% - 2rem);
-    max-width: 28rem;
+    max-width: 28rem; /* max-w-md */
     display: flex;
     justify-content: center;
     pointer-events: none;
@@ -59,37 +74,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);
+    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); // shadow-lg
     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(-100%) scale(0.9);
     pointer-events: none;
-}
 
-.popover-content.open {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-    pointer-events: auto;
+    &.open { // SCSS nesting for .popover-content.open
+        opacity: 1;
+        transform: translateY(0) scale(1);
+        pointer-events: auto;
+    }
 }
-/* Text content within the popover */
+
 .notification-popover-text-content {
     background-color: #eff6ff; /* bg-blue-50 */
-    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);
+    font-size: 0.875rem; /* text-sm */
+    line-height: 1.5rem; /* leading-6 */
+    direction: rtl;
+    padding: 1rem; /* p-4 */
+    border-radius: var(--radius-md, 0.5rem); /* rounded-md */
+    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;
+    padding: 1rem; /* p-4 */
     justify-content: space-between;
     align-items: center;
     width: 100%;
@@ -100,89 +116,81 @@
 }
 
 .header-button {
-    display: flex; align-items: center; justify-content: center;
-    padding: 0.5rem; border-radius: var(--radius-lg, 0.625rem);
+    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 */
     cursor: pointer;
     transition: background-color 0.2s;
+
+    &:hover {
+        background-color: #d1d5db; /* bg-gray-300 */
+    }
+
+    svg {
+        opacity: 0.7;
+        stroke: #374151; /* gray-700 */
+    }
 }
-.header-button:hover {
-    background-color: #d1d5db; /* bg-gray-300 */
-}
-.header-button svg { opacity: 0.7; stroke: #374151 /* gray-700 */; }
 
 .dark .header-button {
-    background-color: oklch(0.28 0 0);
-}
-.dark .header-button:hover {
-    background-color: oklch(0.35 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); /* رنگ روشن‌تر برای آیکون */
+    }
 }
-.dark .header-button svg { opacity: 0.8; stroke: oklch(0.85 0 0); }
-
-
-@keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } }
-.animate-ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
-
 
+/* Footer and Control Buttons */
 .footer-controls {
-    width: 100%; display: flex; gap: 1rem; position: absolute;
-    bottom: 0; padding: 2rem 3rem; align-items: center;
-    z-index: 20; // Ensure they are above video but below modals
+    width: 100%;
+    display: flex;
+    gap: 1rem; /* gap-4 */
+    position: absolute;
+    bottom: 0;
+    padding: 2rem 3rem; /* p-8 pl-12 pr-12 (تقریبی) */
+    align-items: center;
+
+    &.layout-default {
+        justify-content: space-between;
+    }
+    &.layout-with-small-logo {
+        justify-content: space-around;
+    }
 }
-.footer-controls.layout-default { justify-content: space-between; }
-.footer-controls.layout-with-small-logo { justify-content: space-around; }
 
 .control-button {
-    height: 80px; width: 80px; border-radius: 9999px;
-    padding: 0; display: flex; align-items: center; justify-content: center;
+    height: 80px;
+    width: 80px;
+    border-radius: 9999px; /* rounded-full */
+    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);
+    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06); // shadow-md
     cursor: pointer;
     transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
-    position: relative; // For pseudo-element pulse
-    z-index: 1; // For pulse
-}
-.control-button: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);
-}
-.control-button:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-}
-.cam-button-color { background-color: #E0ECFF; }
-.mic-button-color { background-color: var(--accent-red); }
-.dark .cam-button-color { background-color: #223355; }
-.dark .mic-button-color { background-color: var(--accent-red); } // Using the variable directly
 
-
-/* Mic pulse effect (adapted from original control-tray.scss) */
-#mic-button { // Target by ID
-    &:before {
-        position: absolute;
-        z-index: -1;
-        top: calc(var(--volume) * -1);
-        left: calc(var(--volume) * -1);
-        display: block;
-        content: "";
-        opacity: 0.35;
-        background-color: var(--accent-red); /* Or a specific red like var(--Red-500) if defined */
-        .dark & {
-            background-color: var(--accent-red); /* Or a specific dark red */
-        }
-        width: calc(100% + var(--volume) * 2);
-        height: calc(100% + var(--volume) * 2);
-        border-radius: 9999px; // Match button's border-radius
-        transition: all 0.02s ease-in-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
     }
 }
-#mic-button:disabled:before, .mic-button.disabled:before { // If you add a disabled class
-    background: rgba(0, 0, 0, 0);
-}
 
+.cam-button-color { background-color: #E0ECFF; }
+.mic-button-color { background-color: #fecdd3; /* bg-rose-200 */ }
+
+.dark .cam-button-color { background-color: #223355; /* آبی تیره‌تر */ }
+.dark .mic-button-color { background-color: #5C2129; /* قرمز/رز تیره‌تر */ }
 
-/* Switch Camera Button Styles */
+/* Switch Camera Button */
 .switch-camera-button-container {
     position: absolute;
     bottom: calc(100% + 0.65rem);
@@ -193,68 +201,60 @@
     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;
+        transform: translateY(0) scale(1) translateX(-50%);
+        pointer-events: auto;
+    }
 }
-.switch-camera-button-container.visible {
-    opacity: 1;
-    transform: translateY(0) scale(1) translateX(-50%);
-    pointer-events: auto;
-}
+
 .switch-camera-button-content {
     width: 48px;
     height: 48px;
     background-color: var(--background);
     border: 1px solid var(--border);
-    border-radius: 9999px;
+    border-radius: 9999px; /* rounded-full */
     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;
-}
-.switch-camera-button-content:hover {
-    transform: scale(1.12) rotate(-6deg);
-    box-shadow: 0 7px 15px rgba(0,0,0,0.18), 0 3px 6px rgba(0,0,0,0.12);
-}
-.switch-camera-button-content:active {
-    transform: scale(1.03) rotate(0deg);
-}
-.switch-camera-button-content svg {
-    width: 22px;
-    height: 22px;
-    stroke: var(--foreground);
-    transition: transform 0.3s ease-in-out;
-}
-.switch-camera-button-content:hover svg {
-    transform: rotate(360deg);
-}
-.switch-camera-button-content:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-    &:hover { // Prevent hover effects on disabled
-        transform: none;
-        box-shadow: 0 5px 10px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.08);
+
+    &:hover {
+        transform: scale(1.12) rotate(-6deg);
+        box-shadow: 0 7px 15px rgba(0,0,0,0.18), 0 3px 6px rgba(0,0,0,0.12);
     }
-    svg:hover {
-        transform: none;
+    &:active {
+        transform: scale(1.03) rotate(0deg);
     }
-}
 
+    svg {
+        width: 22px;
+        height: 22px;
+        stroke: var(--foreground);
+        transition: transform 0.3s ease-in-out;
+    }
+    &:hover svg {
+        transform: rotate(360deg);
+    }
+}
 
-/* Animations from Tailwind config */
-/* CORRECTED KEYFRAMES */
+/* Keyframes for popover */
 @keyframes popover-drop-in {
-    0%   { opacity: 0; transform: translateY(-100%) scale(0.9); }
-    70%  { opacity: 1; transform: translateY(5px) scale(1.02); }
-    100% { opacity: 1; transform: translateY(0) scale(1); }
+    '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)'; }
 }
 
 @keyframes popover-lift-out {
-    0%   { opacity: 1; transform: translateY(0) scale(1); }
-    100% { opacity: 0; transform: translateY(-100%) scale(0.9); }
+    '0%': { opacity: '1'; transform: 'translateY(0) scale(1)'; }
+    '100%': { opacity: '0'; transform: 'translateY(-100%) scale(0.9)'; }
 }
 
+/* Classes that use these keyframes */
 .animate-popover-open-top-center {
     animation: popover-drop-in 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
 }
@@ -262,38 +262,21 @@
     animation: popover-lift-out 0.3s ease-in forwards;
 }
 
-/* Altair chat window basic styling - adjust as needed */
-.altair-chat-container { // You'd wrap <Altair /> in a div with this class
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 90%;
-    max-width: 500px;
-    height: 70%;
-    max-height: 600px;
-    background-color: var(--background);
-    border: 1px solid var(--border);
-    border-radius: var(--radius-lg);
-    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
-    z-index: 50; // Ensure it's above video but below modals/popovers
-    overflow: hidden; // Or auto if Altair itself doesn't scroll
-    display: flex; // If Altair component needs flex
-    flex-direction: column; // If Altair component needs flex
-}
-
-body {
-    background-color: var(--background);
-    color: var(--foreground);
-}
+/*
+  Utility overrides (اینها هک هستند و بهتر است در صورت امکان از طریق تنظیمات Tailwind یا اعمال مستقیم کلاس‌ها انجام شوند)
+  اگر این کلاس‌ها در Tailwind شما تعریف نشده‌اند، این بخش را می‌توانید حذف کنید،
+  چون رنگ‌ها مستقیماً در استایل‌های بالا یا از طریق متغیرهای CSS اعمال شده‌اند.
+*/
+// .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; }
 
-/* Ensure material icons are available if you use them for connect/disconnect */
-/* You might need to import them in your index.html or main CSS file */
-/* e.g., <link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined" rel="stylesheet"> */
-.material-symbols-outlined {
-  font-variation-settings:
-  'FILL' 0, /* Change to 1 for filled icons if needed */
-  'wght' 400,
-  'GRAD' 0,
-  'opsz' 24
-}
+// کلاس antialiased که در body تگ HTML بود، معادل Tailwind برای font-smoothing است.
+// این مورد توسط @import 'tailwindcss/base'; یا استایل پیش‌فرض مرورگرها پوشش داده می‌شود.
+// .antialiased {
+//  -webkit-font-smoothing: antialiased;
+//  -moz-osx-font-smoothing: grayscale;
+// }