Update src/App.scss

src/App.scss

@@ -3,13 +3,13 @@
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
 
-// 2. Define CSS Variables (same as your provided HTML)
+// 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); /* For notification popover */
+    --popover: oklch(1 0 0);
     --popover-foreground: oklch(0.145 0 0);
     --border: oklch(0.922 0 0);
 }
@@ -26,7 +26,7 @@
 @layer base {
     * {
         border-color: var(--border);
-        outline-color: var(--foreground); // Or your ring color
+        outline-color: var(--foreground);
         box-sizing: border-box;
     }
     body {
@@ -37,82 +37,35 @@
         -moz-osx-font-smoothing: grayscale;
         margin: 0;
         padding: 0;
-        min-height: 100vh; /* Ensure body takes full viewport height */
-        display: flex; /* For centering content if app-container doesn't fill height */
-        flex-direction: column; /* For centering content */
     }
     html {
         margin: 0;
         padding: 0;
         overflow-x: hidden;
-        height: 100%;
     }
 }
 
-// App container and wrapper for overall structure
-.app-container {
-    width: 100%;
-    flex-grow: 1; /* Allows it to grow and fill space if body is flex */
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    // min-height: 100vh; // Or set on body
-    text-rendering: optimizeLegibility; // antialiased equivalent
-}
-
-.app-content-wrapper {
-    max-width: 42rem; // max-w-3xl equivalent, adjust as needed
-    width: 100%;
-    height: 100%; // Or specific height like 90dvh if desired
+// Wrapper for the main content, to ensure footer doesn't overlap if content is short
+.main-wrapper {
+    min-height: 100vh; // Or 100dvh for dynamic viewport height
     display: flex;
     flex-direction: column;
-    align-items: center;
-    justify-content: space-between; // Pushes footer to bottom
-    position: relative; // For absolute positioning of children like header/footer
 }
-
-// Media Area (Video Feed and Large Logo)
 .media-area {
-    width: 100%;
-    flex-grow: 1; // Takes up available space between header and footer
-    position: relative; // For absolute positioning of video and large-logo
-    display: flex; // For centering large-logo
-    align-items: center; // For centering large-logo
-    justify-content: center; // For centering large-logo
-    background-color: var(--background); // Ensure it has a background
-}
-
-.video-feed {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    transform: scaleX(-1); // Mirrors the video
-    &.hidden {
-        display: none;
-    }
+    flex-grow: 1; // Allows this area to take up available space
 }
 
-.large-logo-container {
-    // This is shown when mic is active and cam is not.
-    // Positioned by flex on .media-area
-    // createLogoFunction(false, ...) will be rendered here.
-    // No specific positioning needed here if .media-area handles centering.
-    z-index: 1; // Above video if it ever overlaps (though usually one is hidden)
-}
 
+// 4. Styles for components
 
-// Notification Popover (Styles from your HTML, slightly adjusted for React context)
+/* Notification Popover ... (بدون تغییر از نسخه قبل) ... */
 .notification-popover-wrapper {
     position: fixed;
     top: 1rem;
     left: 50%;
     transform: translateX(-50%);
     z-index: 100;
-    width: calc(100% - 2rem); // Your HTML uses 2rem
+    width: calc(100% - 1rem);
     max-width: 28rem;
     display: flex;
     justify-content: center;
@@ -128,13 +81,10 @@
     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);
     outline: none;
-    // Animation classes will be applied by React
-    // Initial state for animation:
+    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;
-    transition: opacity 0.3s ease-out, transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
-
 
     &.open {
         opacity: 1;
@@ -142,16 +92,12 @@
         pointer-events: auto;
     }
 }
-// Keyframes from your HTML for popover (already provided in previous correct answer)
-@keyframes popover-drop-in { /* ... */ }
-@keyframes popover-lift-out { /* ... */ }
-.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; }
-
 
 .notification-popover-text-content {
-    background-color: #eff6ff; /* bg-blue-50 */
-    font-size: 0.875rem; line-height: 1.5rem; direction: rtl;
+    background-color: #eff6ff;
+    font-size: 0.875rem;
+    line-height: 1.5rem;
+    direction: rtl;
     padding: 1rem;
     border-radius: var(--radius-md, 0.5rem);
     color: oklch(0.145 0 0);
@@ -161,82 +107,110 @@
     color: oklch(0.95 0.01 230);
 }
 
-/* Header controls */
+
+/* Header controls ... (بدون تغییر از نسخه قبل) ... */
 .header-controls {
     display: flex;
-    // padding: 1rem; // Your HTML
-    padding: 0.75rem 0.5rem; // Reduced for mobile
+    padding: 0.75rem 0.5rem;
     justify-content: space-between;
     align-items: center;
     width: 100%;
-    position: absolute; // Kept from your previous working version
+    position: absolute;
     top: 0;
     left: 0;
     z-index: 10;
 }
 
 .header-button {
-    display: flex; align-items: center; justify-content: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     padding: 0.5rem;
     width: 40px;
     height: 40px;
-    border-radius: var(--radius-lg, 0.625rem); // Your HTML var(--radius)
-    background-color: #e5e7eb; /* bg-gray-200 */
+    border-radius: var(--radius-lg, 0.625rem);
+    background-color: #e5e7eb;
     cursor: pointer;
     transition: background-color 0.2s, transform 0.1s ease-out;
 
     svg {
-        opacity: 0.7; stroke: #374151 /* gray-700 */;
-        width: 24px; height: 24px;
+        opacity: 0.7;
+        stroke: #374151;
+        width: 24px;
+        height: 24px;
+    }
+
+    &:hover {
+        background-color: #d1d5db;
+    }
+
+    &:active {
+        background-color: #9ca3af;
+        transform: scale(0.95);
     }
-    &:hover { background-color: #d1d5db; /* bg-gray-300 */ }
-    &:active { background-color: #9ca3af; transform: scale(0.95); }
 }
+
 .dark .header-button {
     background-color: oklch(0.28 0 0);
-    &:hover { background-color: oklch(0.35 0 0); }
-    &:active { background-color: oklch(0.40 0 0); transform: scale(0.95); }
-    svg { opacity: 0.8; stroke: oklch(0.85 0 0); }
+    &:hover {
+        background-color: oklch(0.35 0 0);
+    }
+    &:active {
+        background-color: oklch(0.40 0 0);
+        transform: scale(0.95);
+    }
+    svg {
+        opacity: 0.8;
+        stroke: oklch(0.85 0 0);
+    }
+}
+
+/* Logo Animation Styling */
+.logo-animation-wrapper {
+    position: relative; // Important for inner absolute positioning
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    // &.for-footer will be handled by its container
 }
 
-/* Footer and Control Buttons */
+
+/* Footer and Control Buttons - REVISED FOR FIXED POSITIONS */
 .footer-controls {
     width: 100%;
     display: flex;
-    align-items: center; // Vertically align items if they have different heights
-    position: absolute; // Kept from previous working version
+    justify-content: space-between; /* Cam left, Mic right */
+    align-items: center; /* Vertically align items if they have different heights */
+    position: absolute;
     bottom: 0;
-    // padding: 2rem 3rem; // Your HTML padding
-    padding: 0.75rem 0.5rem; // Reduced for mobile
-    z-index: 20; // Ensure above media area content
-
-    // Default layout: Cam (Left) --- Mic (Right)
-    &.layout-default {
-        justify-content: space-between;
-        .small-logo-container { display: none; } // Ensure small logo is hidden
-    }
+    left: 0; // Ensure it spans full width for absolute positioning of children
+    padding: 0.75rem 0.5rem; // 12px top/bottom, 8px left/right - Keep this minimal
+    z-index: 20; // Above video/logo but below modals
+}
 
-    // Layout with small logo: Cam (Left) -- Logo (Center) -- Mic (Right)
-    &.layout-with-small-logo {
-        justify-content: space-between; // Still space-between for main buttons
-        // The small-logo-container will be positioned absolutely or handled by flex order
-        .small-logo-container {
-            // Position the small logo in the center of the footer-controls
-            // This requires the parent (.footer-controls) to be a positioning context if absolute
-            // Or, manage with flex order and margins if using flexbox for all three items.
-            // For simplicity with space-between on main buttons, absolute positioning is easier for the logo.
-            position: absolute;
-            left: 50%;
-            transform: translateX(-50%);
-            display: flex; // From your HTML
-            align-items: center; // From your HTML
-            justify-content: center; // From your HTML
-        }
-    }
+// Wrapper for individual control buttons to manage their specific positioning if needed
+.control-button-wrapper {
+    position: relative; /* For switch camera button positioning */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+/* Small logo specifically for the footer, positioned in the middle */
+.small-logo-footer {
+    position: absolute;
+    left: 50%;
+    top: 50%; // Relative to footer's padding
+    transform: translate(-50%, -50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1; // Below buttons if overlap is an issue, but should be fine
 }
 
+
 .control-button {
-    height: 70px; // Was 80px in your HTML, 70px from previous correction
+    height: 70px;
     width: 70px;
     border-radius: 9999px;
     padding: 0;
@@ -248,13 +222,8 @@
     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; // Prevent shrinking
-    position: relative; // For switch camera button positioning
-
-    svg { // Ensure SVGs inside scale if needed, but your user SVGs have fixed sizes
-        max-width: 100%;
-        max-height: 100%;
-    }
+    flex-shrink: 0;
+    z-index: 2; // Ensure buttons are clickable above the small logo if it ever overlaps
 
     &:hover {
         transform: scale(1.05);
@@ -262,92 +231,97 @@
     }
 }
 
-// Cam button is on the LEFT in your HTML example
-.cam-button-wrapper { // Wrapper for cam button and switch button
-    position: relative; // For switch camera button positioning
-    display: flex; // To keep button and switch container together if needed
-    justify-content: center; // Center if wrapper takes full space of its flex item
-}
-.cam-button-color { background-color: #E0ECFF; } // Blueish for Cam (HTML: Left)
-.mic-button-color { background-color: #fecdd3; } // Reddish for Mic (HTML: Right)
+// Cam button is on the left as per HTML example
+.cam-button-color { background-color: #E0ECFF; } // Blueish
+// Mic button is on the right
+.mic-button-color { background-color: #fecdd3; } // Reddish
 
 .dark .cam-button-color { background-color: #223355; }
 .dark .mic-button-color { background-color: #5C2129; }
 
 
-/* Switch Camera Button Styles (from your HTML) */
+/* Switch Camera Button - positioned relative to cam-button-wrapper */
 .switch-camera-button-container {
     position: absolute;
-    bottom: calc(100% + 0.65rem);
-    left: 50%; // Center relative to its parent (.cam-button-wrapper or .control-button)
-    z-index: 5; // Above its parent button
+    bottom: calc(100% + 0.5rem); // Above the cam button
+    left: 50%; // Centered horizontally relative to its wrapper
+    transform: translateX(-50%) translateY(15px) scale(0.7); // Initial state for animation
+    z-index: 5; // Above the cam button
     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%);
+        transform: translateX(-50%) translateY(0) scale(1); // Final state
         pointer-events: auto;
     }
 }
 
 .switch-camera-button-content {
-    width: 48px; height: 48px; // Your HTML
+    width: 44px;
+    height: 44px;
     background-color: var(--background);
     border: 1px solid var(--border);
     border-radius: 9999px;
-    display: flex; align-items: center; justify-content: center;
+    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); }
 
-    .switch-camera-svg { // Class added to SVG in ControlTray.tsx
-        width: 22px; height: 22px; // Your HTML SVG size
+    &: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: 20px;
+        height: 20px;
         stroke: var(--foreground);
         transition: transform 0.3s ease-in-out;
     }
-    &:hover .switch-camera-svg { transform: rotate(360deg); }
+    &:hover svg {
+        transform: rotate(360deg);
+    }
 }
 
-
-// Logo Animation Styles (from your HTML, adapted)
-.logo-animation-wrapper {
-    position: relative; // Already applied inline in createLogoFunction
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-.logo-ping, .logo-outer, .logo-mid, .logo-inner {
-    position: absolute;
-    border-radius: 9999px; // fully rounded
-    opacity: 0.5; // As per your HTML example's CSS (Tailwind opacity-50)
-}
-.logo-ping {
-    // Tailwind animate-ping equivalent keyframes needed
-    animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; // From your HTML
+/* 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);
+    }
+    100% {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
 }
-@keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } }
 
-.logo-icon-container {
-    position: absolute;
-    z-index: 10; // Ensure icon is on top of animation layers
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    // Inset is applied inline via style in createLogoFunction
-    svg { // Styles for the human icon SVG if needed, e.g., size
-        // width and height are set on the SVG element itself
+@keyframes popover-lift-out {
+    0% {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+    100% {
+        opacity: 0;
+        transform: translateY(-100%) scale(0.9);
     }
 }
 
-// Small logo container in the footer
-.small-logo-container {
-    // When cam is active, this will hold the small animated logo.
-    // Positioning is handled by .footer-controls.layout-with-small-logo
-    // createLogoFunction(true, ...) will be rendered here.
+.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;
 }