src/App.scss

// src/App.scss

// 1. Import Tailwind's base, components, and utilities
// این خطوط فرض می‌کنند که Tailwind به عنوان یک وابستگی npm نصب شده است.
// اگر از CDN استفاده می‌کنید، این خطوط را حذف کنید و Tailwind از طریق CDN بارگذاری می‌شود.
@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);
    // --ring: oklch(0.6 0.15 260); // Example ring color if needed for outline-ring/50
}

.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%);
    // --ring: oklch(0.7 0.1 250); // Example dark ring color
}

// 3. Apply base styles using Tailwind's @layer directive
// اگر از @import های بالا استفاده نمی‌کنید (مثلاً با CDN)، این بخش @layer ممکن است کار نکند
// و باید استایل‌های body را به صورت CSS معمولی بنویسید.
@layer base {
    * {
        //  استفاده از متغیر --border برای رنگ بوردر
        //  ترجمه outline-ring/50 به CSS استاندارد بدون دانستن تعریف دقیق آن در Tailwind سخت است.
        //  می‌توانید یک outline ساده‌تر قرار دهید یا اگر در tailwind.config.js تعریف شده، @apply کار خواهد کرد.
        border-color: var(--border);
        outline-color: var(--foreground); // یک رنگ پیش‌فرض برای outline
    }
    body {
        @apply bg-background text-foreground; // اگر Tailwind پردازش می‌کند
        // اگر Tailwind پردازش نمی‌کند، معادل CSS آن را بنویسید:
        // background-color: var(--background);
        // color: var(--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"; // فونت پیش‌فرض Tailwind
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

// 4. Styles for components (previously in <style jsx global>)

/* Notification Popover */
.notification-popover-wrapper {
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    width: calc(100% - 2rem);
    max-width: 28rem; /* max-w-md */
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.popover-content {
    width: 100%;
    border-radius: var(--radius-md, 0.5rem);
    border-width: 1px;
    border-color: var(--border);
    background-color: var(--popover);
    color: var(--popover-foreground);
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); // shadow-lg
    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 { // SCSS nesting for .popover-content.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; /* text-sm */
    line-height: 1.5rem; /* leading-6 */
    direction: rtl;
    padding: 1rem; /* p-4 */
    border-radius: var(--radius-md, 0.5rem); /* rounded-md */
    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: 1rem; /* p-4 */
    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; /* p-2 */
    border-radius: var(--radius-lg, 0.625rem); /* rounded-lg */
    background-color: #e5e7eb; /* bg-gray-200 */
    cursor: pointer;
    transition: background-color 0.2s;

    &:hover {
        background-color: #d1d5db; /* bg-gray-300 */
    }

    svg {
        opacity: 0.7;
        stroke: #374151; /* gray-700 */
    }
}

.dark .header-button {
    background-color: oklch(0.28 0 0); /* خاکستری تیره‌تر */
    &:hover {
        background-color: oklch(0.35 0 0);
    }
    svg {
        opacity: 0.8;
        stroke: oklch(0.85 0 0); /* رنگ روشن‌تر برای آیکون */
    }
}

/* Footer and Control Buttons */
.footer-controls {
    width: 100%;
    display: flex;
    gap: 1rem; /* gap-4 */
    position: absolute;
    bottom: 0;
    padding: 2rem 3rem; /* p-8 pl-12 pr-12 (تقریبی) */
    align-items: center;

    &.layout-default {
        justify-content: space-between;
    }
    &.layout-with-small-logo {
        justify-content: space-around;
    }
}

.control-button {
    height: 80px;
    width: 80px;
    border-radius: 9999px; /* rounded-full */
    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); // shadow-md
    cursor: pointer;
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;

    &: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); // shadow-lg
    }
}

.cam-button-color { background-color: #E0ECFF; }
.mic-button-color { background-color: #fecdd3; /* bg-rose-200 */ }

.dark .cam-button-color { background-color: #223355; /* آبی تیره‌تر */ }
.dark .mic-button-color { background-color: #5C2129; /* قرمز/رز تیره‌تر */ }

/* Switch Camera Button */
.switch-camera-button-container {
    position: absolute;
    bottom: calc(100% + 0.65rem);
    left: 50%;
    z-index: 5;
    opacity: 0;
    transform: translateY(15px) scale(0.7) translateX(-50%);
    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: translateY(0) scale(1) translateX(-50%);
        pointer-events: auto;
    }
}

.switch-camera-button-content {
    width: 48px;
    height: 48px;
    background-color: var(--background);
    border: 1px solid var(--border);
    border-radius: 9999px; /* rounded-full */
    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: var(--foreground);
        transition: transform 0.3s ease-in-out;
    }
    &:hover svg {
        transform: rotate(360deg);
    }
}

/* Keyframes for popover */
@keyframes popover-drop-in {
    '0%' { opacity: '0'; transform: 'translateY(-100%) scale(0.9)'; }
    '70%' { opacity: '1'; transform: 'translateY(5px) scale(1.02)'; } /* Slight overshoot */
    '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(0.9)'; }
}

/* Classes that use these keyframes */
.animate-popover-open-top-center {
    animation: popover-drop-in 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
}
.animate-popover-close-top-center {
    animation: popover-lift-out 0.3s ease-in forwards;
}

/*
  Utility overrides (اینها هک هستند و بهتر است در صورت امکان از طریق تنظیمات Tailwind یا اعمال مستقیم کلاس‌ها انجام شوند)
  اگر این کلاس‌ها در Tailwind شما تعریف نشده‌اند، این بخش را می‌توانید حذف کنید،
  چون رنگ‌ها مستقیماً در استایل‌های بالا یا از طریق متغیرهای CSS اعمال شده‌اند.
*/
// .bg-blue-200 { background-color: #bfdbfe !important; }
// .bg-blue-300 { background-color: #93c5fd !important; }
// .bg-blue-400 { background-color: #60a5fa !important; }
// .bg-green-200 { background-color: #bbf7d0 !important; }
// .bg-green-300 { background-color: #86efac !important; }
// .bg-green-400 { background-color: #4ade80 !important; }

// کلاس antialiased که در body تگ HTML بود، معادل Tailwind برای font-smoothing است.
// این مورد توسط @import 'tailwindcss/base'; یا استایل پیش‌فرض مرورگرها پوشش داده می‌شود.
// .antialiased {
//  -webkit-font-smoothing: antialiased;
//  -moz-osx-font-smoothing: grayscale;
// }