src/App.scss

// 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);
    // ** NEW: Define bottom offset for footer, similar to HTML example's visual **
    --footer-bottom-offset: 2rem; // 32px - این مقدار را می‌توانید تنظیم کنید
}

.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 {
    * {
        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 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5; // پشت کنترل‌های فوتر باشد اگر همپوشانی کنند
}

/* 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 { /* ... */ }
// (کپی کامل این بخش‌ها از پاسخ قبلی)
.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,.5rem);border-width:1px;border-color:var(--border);background-color:var(--popover);color:var(--popover-foreground);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;outline:none;transition:opacity .3s ease-out,transform .4s cubic-bezier(.68,-.55,.27,1.55);opacity:0;transform:translateY(-100%) scale(.9);pointer-events:none}.popover-content.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}.notification-popover-text-content{background-color:#eff6ff;font-size:.875rem;line-height:1.5rem;direction:rtl;padding:1rem;border-radius:var(--radius-md,.5rem);color:oklch(.145 0 0)}.dark .notification-popover-text-content{background-color:oklch(.25 .05 230);color:oklch(.95 .01 230)}.header-controls{display:flex;padding:.75rem .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:.5rem;width:40px;height:40px;border-radius:var(--radius-lg,.625rem);background-color:#e5e7eb;cursor:pointer;transition:background-color .2s,transform .1s ease-out}.header-button svg{opacity:.7;stroke:#374151;width:24px;height:24px}.header-button:hover{background-color:#d1d5db}.header-button:active{background-color:#9ca3af;transform:scale(.95)}.dark .header-button{background-color:oklch(.28 0 0)}.dark .header-button:hover{background-color:oklch(.35 0 0)}.dark .header-button:active{background-color:oklch(.40 0 0);transform:scale(.95)}.dark .header-button svg{opacity:.8;stroke:oklch(.85 0 0)}


/* Logo Animation Styling */
.logo-animation-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FCFCFC; // رنگ پیش فرض آیکون انسان (سفید)
    &.for-footer {
        // اگر استایل خاصی برای لوگوی فوتر نیاز است
    }
    // اطمینان از اینکه SVG داخل لوگو تمام فضا را پر می کند
    & > div > svg {
        width: 100%;
        height: 100%;
    }
}
.dark .logo-animation-wrapper {
    // در حالت دارک، اگر رنگ آیکون انسان باید تغییر کند، اینجا تعریف کنید
    // مثال: color: oklch(0.145 0 0); // اگر می خواهید در دارک مود تیره شود
}


/* Footer styles to mimic HTML example */
.footer-controls-html-like {
    width: 100%;
    display: flex;
    align-items: center;
    position: absolute;
    // ** MODIFIED: Use var for bottom offset **
    bottom: var(--footer-bottom-offset); // بالاتر از لبه پایین صفحه
    // Padding افقی از HTML مرجع، padding عمودی برای ایجاد فضا در بالا و پایین دکمه ها
    padding: 1rem 3rem; // 16px بالا/پایین, 48px چپ/راست
    box-sizing: border-box;
    z-index: 20;
    justify-content: space-between; // میکروفون چپ، دوربین راست
}

.small-logo-footer-html-like {
    // این به صورت خودکار بین دو دکمه قرار می گیرد چون فوتر space-between است
    // و این div در JSX بین دو دکمه اصلی قرار دارد
    // برای اطمینان از مرکز بودن، می توانیم از flex-grow در دو دکمه کناری استفاده کنیم
    // یا به این شکل:
    // margin-left: auto;
    // margin-right: auto;
    // اما با justify-content: space-between در والد، این باید وسط قرار گیرد اگر تنها عنصر وسطی باشد.
    // اگر سه عنصر دارید (دکمه - لوگو - دکمه) و justify-content: space-between،
    // لوگو به صورت مساوی بین آنها فاصله می گیرد.
    // برای اینکه لوگو دقیقا وسط صفحه باشد و دکمه ها در کناره ها، نیاز به تغییرات بیشتری در JSX یا CSS است.
    // فعلا با چیدمان سه ستونه (میکروفون، لوگو، دوربین) و space-between در فوتر پیش می رویم.
    // اگر می خواهید لوگو همیشه وسط باشد، باید از position: absolute برای لوگو استفاده کرد.
    display: flex;
    align-items: center;
    justify-content: center;
    // برای اینکه فضای مساوی با دکمه ها بگیرد، یا flex-grow بدهیم، یا اندازه ثابت
    // flex-grow: 1; // این باعث می شود فضای خالی بین دکمه ها را پر کند
    // یا اگر می خواهید اندازه اش ثابت باشد و دکمه ها به کناره ها بچسبند:
    // (بدون تغییر، اجازه می دهیم با محتوایش اندازه بگیرد)
}


.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;

    &: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);
    }
    // ** NEW: Scale SVG icons within buttons to match HTML reference if needed **
    svg {
        // transform: scale(0.55); // این از HTML مرجع شما برای آیکون میکروفون بود.
                                // اگر برای همه آیکون ها لازم است، اینجا اعمال کنید.
                                // یا اندازه های width/height را مستقیما بدهید.
        // مثال برای اندازه ثابت:
        // width: 38px;
        // height: 38px;
        // فعلا بدون تغییر، اجازه می دهیم SVG اندازه خودش را داشته باشد یا در تعریفش کنترل شود.
    }
}

.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 { /* ... */ }
// (کپی کامل این بخش‌ها از پاسخ قبلی)
.switch-camera-button-container{position:absolute;bottom:calc(100% + .65rem);left:50%;transform:translateX(-50%) translateY(15px) scale(.7);z-index:5;opacity:0;pointer-events:none;transition:opacity .35s cubic-bezier(.68,-.55,.27,1.55),transform .35s cubic-bezier(.68,-.55,.27,1.55);transform-origin:center bottom}.switch-camera-button-container.visible{opacity:1;transform:translateX(-50%) translateY(0) scale(1);pointer-events:auto}.switch-camera-button-content{width:48px;height:48px;background-color:var(--background);border:1px solid var(--border);border-radius:9999px;display:flex;align-items:center;justify-content:center;box-shadow:0 5px 10px #0000001f,0 2px 4px #00000014;cursor:pointer;transform-origin:center;transition:transform .2s ease-out,box-shadow .2s ease-out}.switch-camera-button-content:hover{transform:scale(1.12) rotate(-6deg);box-shadow:0 7px 15px #0000002e,0 3px 6px #0000001f}.switch-camera-button-content:active{transform:scale(1.03) rotate(0)}.switch-camera-button-content svg{width:22px;height:22px;stroke:var(--foreground);transition:transform .3s ease-in-out}.switch-camera-button-content:hover svg{transform:rotate(360deg)}

/* Keyframes for popover (بدون تغییر) */
@keyframes popover-drop-in { /* ... */ }
@keyframes popover-lift-out { /* ... */ }
.animate-popover-open-top-center { /* ... */ }
.animate-popover-close-top-center { /* ... */ }
// (کپی کامل این بخش‌ها از پاسخ قبلی)
@keyframes popover-drop-in{0%{opacity:0;transform:translateY(-100%) scale(.9)}70%{opacity:1;transform:translateY(5px) scale(1.02)}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(.9)}}.animate-popover-open-top-center{animation:popover-drop-in .4s cubic-bezier(.68,-.55,.27,1.55) forwards}.animate-popover-close-top-center{animation:popover-lift-out .3s ease-in forwards}