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 { /* ... (بدون تغییر) ... */ }
#large-logo-container { /* ... (بدون تغییر) ... */ }
.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;

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

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


/* Footer styles - موقعیت عمودی فوتر */
.footer-controls-html-like {
    width: 100%;
    display: flex;
    align-items: center;
    position: absolute;
    // *** MODIFIED: تنظیم bottom برای بالاتر آمدن، padding افقی برای تطابق ***
    bottom: 1.5rem;      // فاصله 24px از پایین صفحه، می‌توانید این را به 2rem (32px) تغییر دهید اگر هنوز پایین است
    padding-left: 2rem;  // فاصله 32px از چپ (در HTML شما 3rem بود، برای موبایل شاید 2rem بهتر باشد)
    padding-right: 2rem; // فاصله 32px از راست
    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 {
        // *** MODIFIED: افزایش بیشتر اندازه آیکون میکروفون مرجع ***
        &.reference-mic-svg {
            width: 75%; // افزایش به 75% - می‌توانید این را تا 80% یا بیشتر هم ببرید
            height: 75%;
        }
        // برای سایر SVG ها در دکمه های کنترل، اگر نیاز به اندازه خاصی دارند
        // مثلاً آیکون دوربین:
        // &:not(.reference-mic-svg) { width: 50%; height: 50%; }
    }
}

.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 { /* ... (بدون تغییر) ... */ }

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