src/App.scss

// ... (بخش‌های اولیه CSS، متغیرها، base styles، header، popover بدون تغییر) ...
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

:root { /* ... (متغیرهای CSS بدون تغییر) ... */ 
    --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 { /* ... (متغیرهای CSS برای دارک مود بدون تغییر) ... */
    --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%);
}
@layer base { /* ... (استایل‌های پایه بدون تغییر) ... */
    * { border-color: var(--border); outline-color: var(--foreground); box-sizing: border-box; }
    body { @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"; -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-class { // کلاس جدید برای کنترل بهتر
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none; /* برای جلوگیری از تداخل با کلیک روی ویدیو */
}

/* Notification Popover & Header controls (بدون تغییر) */
.notification-popover-wrapper { /* ... */ }
.popover-content { /* ... */ }
.notification-popover-text-content { /* ... */ }
.dark .notification-popover-text-content { /* ... */ }
.header-controls { /* ... */ }
.header-button { /* ... */ }
.dark .header-button { /* ... */ }


/* Logo Animation Styling */
.logo-animation-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--foreground); // رنگ آدمک از foreground گرفته شود

    // اطمینان از اینکه خود SVG آدمک تمام فضای کانتینر داخلی‌اش را پر می‌کند
    & > .z-10 > svg {
        width: 100%;
        height: 100%;
    }
}

/* Footer styles - تنظیم دقیق‌تر bottom */
.footer-controls-html-like {
    width: 100%;
    display: flex;
    align-items: center;
    position: absolute;
    // *** MODIFIED: تنظیم bottom برای بالاتر آمدن فوتر ***
    bottom: 2.5rem; // امتحان کنید این مقدار را کم و زیاد کنید (مثلا 2rem, 3rem)
    
    padding-left: 3rem;  // 48px از چپ (مطابق HTML)
    padding-right: 3rem; // 48px از راست (مطابق HTML)
    // padding-top و padding-bottom می‌توانند کمتر باشند چون bottom اصلی است
    padding-top: 0.5rem;
    padding-bottom: 0.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;
    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);
    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);
        box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    }

    svg {
        // اندازه پیش‌فرض برای اکثر SVGهای داخل دکمه‌ها
        // width: 50%; // یا مقدار مناسب دیگر
        // height: 50%;

        &.reference-mic-svg { // کلاس اختصاصی برای SVG میکروفون مرجع
            width: 70%; // یا حتی 75% اگر نیاز است
            height: 70%;
        }
    }
}

.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 { /* ... */ }
.switch-camera-button-content { /* ... */ }
.switch-camera-button-content svg { /* ... */ }
.switch-camera-button-content:hover svg { /* ... */ }

/* Keyframes for popover (بدون تغییر) */
@keyframes popover-drop-in { /* ... */ }
@keyframes popover-lift-out { /* ... */ }
.animate-popover-open-top-center { /* ... */ }
.animate-popover-close-top-center { /* ... */ }

// اطمینان از تعریف keyframes برای انیمیشن ping اگر Tailwind آن را به درستی نخوانده
// این معمولاً توسط Tailwind انجام می‌شود، اما برای اطمینان
@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}
.animate-ping {
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}