src/App.scss

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

:root { /* ... */ }
.dark { /* ... */ }
@layer base { /* ... */ }
.main-wrapper { /* ... */ }
.media-area { /* ... */ }
.notification-popover-wrapper { /* ... */ }
.popover-content { /* ... */ }
.notification-popover-text-content { /* ... */ }
.dark .notification-popover-text-content { /* ... */ }
.header-controls { /* ... */ }
.header-button { /* ... */ }
.dark .header-button { /* ... */ }


/* استایل برای کانتینر لوگوی بزرگ وسط صفحه */
.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;
    z-index: 5; // پشت کنترل‌های فوتر اما روی ویدیو
}

/* Logo Animation Styling - اطمینان از اعمال رنگ و انیمیشن */
.logo-animation-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--foreground); /* رنگ پیش‌فرض برای stroke آدمک */

    & > .z-10 > svg { /* برای SvgHumanIcon */
        width: 100%;
        height: 100%;
    }
    /* استایل برای حلقه‌ها - باید توسط کلاس‌های Tailwind اعمال شوند */
    /* .absolute, .rounded-full, .opacity-50, .animate-ping, bg-blue-200, etc. */
}


/* Footer styles - بازگشت به نسخه قبلی که مشکل اسکرول افقی نداشت */
.footer-controls {
    width: 100%;
    display: flex;
    gap: 0.5rem; // کاهش فاصله برای جلوگیری از سرریز
    position: absolute;
    bottom: 0;
    // padding برای بالاتر آمدن و جلوگیری از چسبیدن به لبه‌ها
    padding: 0.75rem 1rem; // 12px top/bottom, 16px left/right - این مقادیر را تنظیم کنید
    align-items: center;
    justify-content: space-between; // دکمه دوربین چپ، میکروفون راست
                                   // لوگوی کوچک در ControlTray با flex-grow یا absolute positioning وسط قرار می‌گیرد
    z-index: 20;
}

.small-logo-footer { // برای لوگوی کوچک بین دکمه‌ها
    display: flex;
    align-items: center;
    justify-content: center;
    // اگر از justify-content: space-between در فوتر استفاده می‌کنید،
    // این بخش برای اینکه وسط بیاید باید margin auto داشته باشد یا با position: absolute باشد.
    // فعلاً با flex و ترتیب در JSX کنترل می‌شود.
    // اگر می‌خواهید دقیقاً وسط باشد:
    // position: absolute; left: 50%; transform: translateX(-50%);
}

.control-button-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
}

.control-button {
    height: 70px; // اندازه قبلی که مشکل اسکرول نداشت
    width: 70px;
    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 { // برای آیکون میکروفون اولیه
             width: 70%; // یا مقدار دلخواه شما
             height: 70%;
        }
    }
}

// رنگ‌ها بر اساس ترتیب دوربین چپ، میکروفون راست
.cam-button-color { background-color: #E0ECFF; }
.mic-button-color { background-color: #fecdd3; }

.dark .cam-button-color { background-color: #223355; }
.dark .mic-button-color { background-color: #5C2129; }


/* 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 { 75%, 100% { transform: scale(2); opacity: 0; } }
.animate-ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }