Update src/App.scss

src/App.scss

@@ -1,60 +1,243 @@
-// ... (بالای فایل App.scss شامل ایمپورت‌ها، متغیرهای CSS، base styles) ...
+// src/App.scss
 
-/* Header controls - این بخش نباید با تغییرات tailwind.config.js تغییر کرده باشد */
-.header-controls {
+// 1. Import Tailwind's base, components, and utilities
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
+
+// 2. Define CSS Variables
+:root {
+    --radius: 0.625rem; /* 10px */
+    --radius-md: 0.5rem; /* 8px */
+    --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);
+    --border: oklch(1 0 0 / 10%); /* خاکستری خیلی تیره با شفافیت */
+}
+
+// 3. Apply base styles
+@layer base {
+    * {
+        /* استفاده از رنگ‌های تعریف شده در tailwind.config.js که به متغیرهای CSS ما اشاره دارند */
+        border-color: theme('colors.custom-border');
+        outline-color: theme('colors.custom-foreground');
+        box-sizing: border-box;
+    }
+    body {
+        @apply bg-custom-background text-custom-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";
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        margin: 0;
+        padding: 0;
+    }
+    html {
+        margin: 0;
+        padding: 0;
+        overflow-x: hidden;
+    }
+}
+
+.main-wrapper {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+.media-area {
+    flex-grow: 1;
+    position: relative;
+}
+
+#large-logo-container {
     display: flex;
-    padding: 0.75rem 0.5rem; // این مقادیر از قبل تنظیم شده بودند
-    justify-content: space-between;
     align-items: center;
+    justify-content: center;
     width: 100%;
+    height: 100%;
     position: absolute;
     top: 0;
     left: 0;
-    z-index: 10;
+    pointer-events: none;
 }
 
+/* Notification Popover */
+.notification-popover-wrapper {
+    position: fixed; top: 1rem; left: 50%; transform: translateX(-50%); z-index: 100;
+    width: calc(100% - 1rem); max-width: 28rem; display: flex; justify-content: center; pointer-events: none;
+}
+.popover-content {
+    width: 100%; border-radius: var(--radius-md, 0.5rem); border-width: 1px;
+    background-color: theme('colors.custom-popover'); /* استفاده از رنگ تعریف شده در Tailwind */
+    color: theme('colors.custom-popover-foreground'); /* استفاده از رنگ تعریف شده در Tailwind */
+    border-color: theme('colors.custom-border');       /* استفاده از رنگ تعریف شده در Tailwind */
+    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(-100%) scale(0.9); pointer-events: none;
+    &.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
+}
+.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); /* متن تیره روی پس‌زمینه آبی روشن */
+}
+.dark .notification-popover-text-content {
+    background-color: oklch(0.25 0.05 230); /* آبی تیره‌تر برای حالت تاریک */
+    color: oklch(0.95 0.01 230); /* متن روشن‌تر برای حالت تاریک */
+}
+
+/* Header controls - حفظ استایل‌های قبلی */
+.header-controls {
+    display: flex; padding: 0.75rem 0.5rem; justify-content: space-between; align-items: center;
+    width: 100%; position: absolute; top: 0; left: 0; z-index: 10;
+}
 .header-button {
+    display: flex; align-items: center; justify-content: center; padding: 0.5rem;
+    width: 40px; height: 40px; border-radius: var(--radius-lg, 0.625rem);
+    background-color: #e5e7eb; /* Tailwind gray-200 */
+    cursor: pointer; transition: background-color 0.2s, transform 0.1s ease-out;
+    svg {
+        opacity: 0.7;
+        stroke: #374151; /* Tailwind gray-700 - برای آیکون‌های ��در */
+        width: 24px; height: 24px;
+    }
+    &:hover { background-color: #d1d5db; /* Tailwind gray-300 */ }
+    &:active { background-color: #9ca3af; /* Tailwind gray-400 */ transform: scale(0.95); }
+}
+.dark .header-button {
+    background-color: oklch(0.28 0 0);
+    &:hover { background-color: oklch(0.35 0 0); }
+    &:active { background-color: oklch(0.40 0 0); transform: scale(0.95); }
+    svg {
+        opacity: 0.8;
+        stroke: oklch(0.85 0 0); /* رنگ آیکون هدر در حالت تاریک */
+    }
+}
+
+/* Logo Animation Styling */
+.logo-animation-wrapper {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: 0.5rem;
-    width: 40px;
-    height: 40px;
-    border-radius: var(--radius-lg, 0.625rem);
-    background-color: #e5e7eb; // رنگ خاکستری روشن برای حالت عادی
-    cursor: pointer;
-    transition: background-color 0.2s, transform 0.1s ease-out;
+    // *** NEW: تنظیم رنگ متن برای کانتینر لوگو تا آدمک سفید شود ***
+    // این روی SvgHumanIcon که از stroke="currentColor" استفاده می‌کند، تاثیر می‌گذارد.
+    // اگر حلقه‌های آبی پس‌زمینه به اندازه کافی تیره هستند، text-white خوب عمل می‌کند.
+    // در غیر این صورت، باید مستقیما stroke="#FFFFFF" را در SvgHumanIcon تنظیم کنید.
+    color: white; // یا var(--foreground) اگر می خواهید با تم تغییر کند و تم شما این را مدیریت می کند.
 
-    svg {
-        opacity: 0.7;
-        stroke: #374151; // رنگ آیکون خاکستری تیره
-        width: 24px;
-        height: 24px;
+    & > .z-10 > svg { // برای SvgHumanIcon
+        width: 100%;
+        height: 100%;
     }
+}
 
-    &:hover {
-        background-color: #d1d5db; // کمی تیره‌تر در هاور
-    }
+/* Footer styles */
+.footer-controls-html-like {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    position: absolute;
+    bottom: 2rem; /* تنظیم ارتفاع فوتر از پایین */
+    padding-left: 2.5rem;
+    padding-right: 2.5rem;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    box-sizing: border-box;
+    z-index: 20;
+    justify-content: space-between;
+}
 
-    &:active {
-        background-color: #9ca3af; // باز هم تیره‌تر در کلیک
-        transform: scale(0.95);
-    }
+.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;
 }
 
-.dark .header-button {
-    background-color: oklch(0.28 0 0); // رنگ پس‌زمینه دکمه در حالت تاریک
+.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;
+    border-width: 1px;
+    border-color: theme('colors.custom-border');
+    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;
+    flex-shrink: 0;
+    z-index: 2;
+    overflow: hidden;
+
     &:hover {
-        background-color: oklch(0.35 0 0);
-    }
-    &:active {
-        background-color: oklch(0.40 0 0);
-        transform: scale(0.95);
+        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);
     }
+
     svg {
-        opacity: 0.8;
-        stroke: oklch(0.85 0 0); // رنگ آیکون در حالت تاریک
+        &.reference-mic-svg {
+            width: 75%;
+            height: 75%;
+        }
+        // SVGهای دیگر داخل دکمه‌ها (مثل دوربین، توقف و ...)
+        // می‌توانند اندازه پیش‌فرض خود را داشته باشند یا در صورت نیاز جداگانه استایل‌دهی شوند.
     }
 }
 
-// ... (بقیه فایل App.scss شامل .logo-animation-wrapper، .footer-controls-html-like، .control-button و غیره باید مانند آخرین نسخه موفق قبلی باشد) ...
+.mic-button-color { background-color: #fecdd3; }
+.cam-button-color { background-color: #E0ECFF; }
+.dark .mic-button-color { background-color: #5C2129; }
+.dark .cam-button-color { background-color: #223355; }
+
+/* Switch Camera Button */
+.switch-camera-button-container {
+    position: absolute; bottom: calc(100% + 0.65rem); left: 50%;
+    transform: translateX(-50%) translateY(15px) scale(0.7); z-index: 5;
+    opacity: 0; 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: translateX(-50%) translateY(0) scale(1); pointer-events: auto; }
+}
+.switch-camera-button-content {
+    width: 48px; height: 48px;
+    background-color: theme('colors.custom-background');
+    border: 1px solid theme('colors.custom-border');
+    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); cursor: pointer;
+    transform-origin: center; transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
+    &: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); }
+    &:active { transform: scale(1.03) rotate(0deg); }
+    svg { width: 22px; height: 22px; stroke: theme('colors.custom-foreground'); transition: transform 0.3s ease-in-out; }
+    &:hover svg { transform: rotate(360deg); }
+}
+
+/* Keyframes for popover - استفاده از نام‌های تعریف شده در tailwind.config.js */
+.animate-popover-open-top-center {
+    @apply animation-popover-open-top-center;
+}
+.animate-popover-close-top-center {
+    @apply animation-popover-close-top-center;
+}