Update src/App.scss

src/App.scss

@@ -1,3 +1,4 @@
+// ... (بالای فایل App.scss بدون تغییر) ...
 // 1. Import Tailwind's base, components, and utilities
 @import 'tailwindcss/base';
 @import 'tailwindcss/components';
@@ -45,20 +46,17 @@
     }
 }
 
-// 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
+    min-height: 100vh; 
     display: flex;
     flex-direction: column;
 }
 .media-area {
-    flex-grow: 1; // Allows this area to take up available space
+    flex-grow: 1; 
 }
 
 
-// 4. Styles for components
-
-/* Notification Popover ... (بدون تغییر از نسخه قبل) ... */
+/* Notification Popover & Header controls ... (بدون تغییر از نسخه قبل) ... */
 .notification-popover-wrapper {
     position: fixed;
     top: 1rem;
@@ -107,11 +105,9 @@
     color: oklch(0.95 0.01 230);
 }
 
-
-/* Header controls ... (بدون تغییر از نسخه قبل) ... */
 .header-controls {
     display: flex;
-    padding: 0.75rem 0.5rem;
+    padding: 0.75rem 0.5rem; 
     justify-content: space-between;
     align-items: center;
     width: 100%;
@@ -125,28 +121,28 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: 0.5rem;
-    width: 40px;
-    height: 40px;
-    border-radius: var(--radius-lg, 0.625rem);
-    background-color: #e5e7eb;
+    padding: 0.5rem; 
+    width: 40px;  
+    height: 40px; 
+    border-radius: var(--radius-lg, 0.625rem); 
+    background-color: #e5e7eb; 
     cursor: pointer;
-    transition: background-color 0.2s, transform 0.1s ease-out;
+    transition: background-color 0.2s, transform 0.1s ease-out; 
 
     svg {
         opacity: 0.7;
-        stroke: #374151;
-        width: 24px;
+        stroke: #374151; 
+        width: 24px;   
         height: 24px;
     }
 
     &:hover {
-        background-color: #d1d5db;
+        background-color: #d1d5db; 
     }
 
     &:active {
-        background-color: #9ca3af;
-        transform: scale(0.95);
+        background-color: #9ca3af; 
+        transform: scale(0.95); 
     }
 }
 
@@ -156,7 +152,7 @@
         background-color: oklch(0.35 0 0);
     }
     &:active {
-        background-color: oklch(0.40 0 0);
+        background-color: oklch(0.40 0 0); 
         transform: scale(0.95);
     }
     svg {
@@ -165,88 +161,101 @@
     }
 }
 
-/* Logo Animation Styling */
+
 .logo-animation-wrapper {
-    position: relative; // Important for inner absolute positioning
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
-    // &.for-footer will be handled by its container
+    // svg inside the logo should fill its container
+    & > div > svg {
+        width: 100%;
+        height: 100%;
+    }
 }
 
-
-/* Footer and Control Buttons - REVISED FOR FIXED POSITIONS */
-.footer-controls {
+/* Footer styles to mimic HTML example */
+.footer-controls-html-like {
     width: 100%;
     display: flex;
-    justify-content: space-between; /* Cam left, Mic right */
-    align-items: center; /* Vertically align items if they have different heights */
+    /* Default for HTML was space-between if no logo, space-around with logo.
+       Let's try space-between and position logo absolutely for now. */
+    justify-content: space-between; // Mic left, Cam right as per your HTML example
+    align-items: center;
     position: absolute;
     bottom: 0;
-    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
+    // Padding from your HTML example
+    padding: 2rem 3rem; // 32px top/bottom, 48px left/right
+    box-sizing: border-box;
+    z-index: 20;
 }
 
-// Wrapper for individual control buttons to manage their specific positioning if needed
-.control-button-wrapper {
-    position: relative; /* For switch camera button positioning */
+// Wrapper for the camera button and its switch button, to align with HTML
+.cam-wrapper-html-like {
+    position: relative; // For absolute positioning of switch-camera-button
     display: flex;
-    justify-content: center;
-    align-items: center;
+    justify-content: center; // Center the button itself if wrapper is wider
 }
 
-/* Small logo specifically for the footer, positioned in the middle */
-.small-logo-footer {
+.small-logo-footer-html-like {
+    // This will be positioned between the two main buttons if footer uses space-around
+    // If footer uses space-between, we might need to position it absolutely in the center
+    // For now, let's assume it just takes its space if visible.
+    // We need to ensure the parent .footer-controls-html-like can accommodate it.
+    // To place it in the absolute center of the footer:
     position: absolute;
     left: 50%;
-    top: 50%; // Relative to footer's padding
+    top: 50%; // Relative to footer's padding box
     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
+    z-index: 1; // Behind buttons if they overlap
 }
 
 
 .control-button {
-    height: 70px;
-    width: 70px;
+    height: 80px; // From your HTML
+    width: 80px;  // From your HTML
     border-radius: 9999px;
     padding: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     border-width: 1px;
-    border-color: var(--border);
+    border-color: var(--border); // Uses your theme's border color
     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; // Ensure buttons are clickable above the small logo if it ever overlaps
+    z-index: 2; // Ensure buttons are above the small logo
 
     &: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);
     }
+
+    // Ensure SVGs inside control buttons scale appropriately
+    svg {
+        // transform: scale(0.55); // If SVGs are too large by default
+        // Or set explicit width/height if SVGs don't have inherent good sizes
+        // width: 38px; height: 38px; // Example, adjust based on your SVGs
+    }
 }
 
-// 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 is on the left in HTML example
 .mic-button-color { background-color: #fecdd3; } // Reddish
+// Cam button is on the right in HTML example
+.cam-button-color { background-color: #E0ECFF; } // Blueish
 
-.dark .cam-button-color { background-color: #223355; }
 .dark .mic-button-color { background-color: #5C2129; }
+.dark .cam-button-color { background-color: #223355; }
 
 
-/* Switch Camera Button - positioned relative to cam-button-wrapper */
+/* Switch Camera Button - positioning relative to its wrapper */
 .switch-camera-button-container {
     position: absolute;
-    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
+    bottom: calc(100% + 0.65rem); // As in your HTML
+    left: 50%;
+    transform: translateX(-50%) translateY(15px) scale(0.7);
+    z-index: 5;
     opacity: 0;
     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);
@@ -254,14 +263,14 @@
 
     &.visible {
         opacity: 1;
-        transform: translateX(-50%) translateY(0) scale(1); // Final state
+        transform: translateX(-50%) translateY(0) scale(1);
         pointer-events: auto;
     }
 }
 
 .switch-camera-button-content {
-    width: 44px;
-    height: 44px;
+    width: 48px; // As in your HTML
+    height: 48px; // As in your HTML
     background-color: var(--background);
     border: 1px solid var(--border);
     border-radius: 9999px;
@@ -274,25 +283,25 @@
     transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
 
     &:hover {
-        transform: scale(1.12) rotate(-6deg);
+        transform: scale(1.12) rotate(-6deg); // As in your HTML
         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);
+        transform: scale(1.03) rotate(0deg); // As in your HTML
     }
 
     svg {
-        width: 20px;
-        height: 20px;
+        width: 22px; // As in your HTML
+        height: 22px; // As in your HTML
         stroke: var(--foreground);
         transition: transform 0.3s ease-in-out;
     }
     &:hover svg {
-        transform: rotate(360deg);
+        transform: rotate(360deg); // As in your HTML
     }
 }
 
-/* Keyframes for popover ... (بدون تغییر از نسخه قبل) ... */
+/* Keyframes for popover ... (بدون تغییر) ... */
 @keyframes popover-drop-in {
     0% {
         opacity: 0;