Update src/App.scss

src/App.scss

@@ -29,61 +29,55 @@
         outline-color: var(--foreground);
         box-sizing: border-box;
     }
-    body, html { // Apply to both for good measure
+    body, html { // Apply to both for safety, especially in iframes
         @apply bg-background text-foreground;
         overflow-x: hidden; // Prevent horizontal scroll
-        overflow-y: hidden; // *** ADDED: Prevent vertical scroll on body/html ***
+        overflow-y: hidden; // *** NEW: Attempt to prevent vertical scroll on body/html ***
         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;
-        height: 100%; // *** ADDED: Ensure html and body take full height ***
-        width: 100%;  // *** ADDED: Ensure html and body take full width ***
+        height: 100%; // Ensure html and body take full height
     }
 }
 
-// Main application container to manage height and prevent scrolling
+// Main application container to manage overall height
 .app-container {
-    height: 100vh; // Use viewport height to fill the screen
-    // For iOS Safari, dvh might be better if address bar causes issues
-    // height: 100dvh; 
+    height: 100vh; // Use viewport height
     display: flex;
     flex-direction: column;
-    overflow: hidden; // Prevent scrolling on the main app container itself
 }
 
 .main-wrapper {
-    // min-height: 100vh; // Already handled by .app-container
+    // min-height: 100vh; // No longer needed if app-container handles height
     display: flex;
     flex-direction: column;
-    flex-grow: 1; // Allow main-wrapper to fill .app-container
-    overflow: hidden; // Prevent internal scrolling if content still overflows
-    position: relative; // For absolute positioning of children like header/footer
+    flex-grow: 1; // Allow main-wrapper to fill app-container
+    width: 100%;   // Ensure it takes full width
+    max-width: 450px; // Max width like many mobile apps, adjust as needed
+    margin-left: auto;
+    margin-right: auto;
 }
-
 .media-area {
-    flex-grow: 1;
+    flex-grow: 1; // This area will take up available space above the footer
     position: relative;
-    display: flex; // For centering large logo
-    align-items: center;
-    justify-content: center;
-    overflow: hidden; // Ensure video/logo doesn't cause scroll
+    width: 100%; // Ensure it takes full width of main-wrapper
 }
 
 #large-logo-container {
-    // display: flex; // Handled by media-area
-    // align-items: center;
-    // justify-content: center;
-    // width: 100%;
-    // height: 100%;
-    // position: absolute; // Handled by media-area's relative and this absolute
-    // top: 0;
-    // left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
     pointer-events: none;
 }
 
-/* Notification Popover & Header controls (بدون تغییر) */
+/* Notification Popover & Header controls (No changes from previous correct version) */
 .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;
@@ -104,7 +98,6 @@
 .header-controls {
     display: flex; padding: 0.75rem 0.5rem; justify-content: space-between; align-items: center;
     width: 100%; position: absolute; top: 0; left: 0; z-index: 10;
-    flex-shrink: 0; // Prevent header from shrinking
 }
 .header-button {
     display: flex; align-items: center; justify-content: center; padding: 0.5rem;
@@ -133,20 +126,18 @@
     }
 }
 
-/* Footer styles */
+/* Footer styles to mimic HTML example */
 .footer-controls-html-like {
     width: 100%;
     display: flex;
     align-items: center;
-    position: absolute; // نسبت به main-wrapper
-    bottom: 0;
-    // *** MODIFIED: تنظیم padding برای بالا بردن فوتر، مشابه HTML مرجع ***
-    // مقادیر padding از HTML شما: padding: 2rem 3rem; (32px top/bottom, 48px left/right)
-    // اگر می خواهید بالاتر بیاید، می توانید bottom را با یک مقدار مثبت تنظیم کنید
-    // یا padding-bottom را کمتر کنید.
-    // با توجه به اینکه گفتید دقیقا مثل HTML، padding را حفظ می کنیم.
-    // اگر هنوز پایین است، ممکن است ارتفاع کلی main-wrapper یا media-area مشکل داشته باشد.
-    padding: 2rem 3rem;
+    position: relative; // Changed from absolute to allow it to push content if needed
+    // bottom: 0; // No longer strictly at bottom of viewport, but bottom of main-wrapper
+    // *** MODIFIED: Adjust padding to bring buttons higher ***
+    // padding: 2rem 3rem; // Original from HTML
+    padding: 1.5rem 2rem 2.5rem 2rem; // Example: 24px top, 32px L/R, 40px bottom (pushes up)
+    // یا اگر می خواهید از پایین صفحه فاصله داشته باشد، می توانید bottom را برای main-wrapper تنظیم کنید یا margin-bottom به media-area بدهید.
+
     box-sizing: border-box;
     z-index: 20;
     justify-content: space-between;
@@ -174,7 +165,7 @@
     height: 80px;
     width: 80px;
     border-radius: 9999px;
-    padding: 0; // SVG باید با اندازه خودش بیاید یا با CSS داخلی SVG تنظیم شود
+    padding: 0; // Padding is inside the SVG container usually
     display: flex;
     align-items: center;
     justify-content: center;
@@ -185,49 +176,56 @@
     transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
     flex-shrink: 0;
     z-index: 2;
-    overflow: hidden; // برای اینکه SVG بزرگتر از دکمه بیرون نزند
+    overflow: hidden; // Ensure SVG content fits
+
+    svg {
+        //  برای بزرگتر کردن آیکون داخل دکمه، transform در SVG خود آیکون بهتر است
+        //  اما اگر SVG transform ندارد، می توانیم اینجا scale کنیم
+        //  مثال: transform: scale(1.2); // برای 20% بزرگتر شدن
+        width: 60%; // یا درصدی از دکمه
+        height: 60%;
+    }
 
     &: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);
     }
-
-    // *** MODIFIED: تنظیم اندازه SVG داخل دکمه میکروفون و دوربین ***
-    svg {
-        // هدف این است که آیکون میکروفون بزرگتر به نظر برسد
-        // و آیکون دوربین هم اندازه مناسبی داشته باشد.
-        // این مقادیر را می توانید تنظیم کنید.
-        // برای SvgReferenceMicrophoneIcon که transform scale(0.55) داشت،
-        // اگر آن transform را برداریم، اینجا باید scale را مدیریت کنیم یا width/height بدهیم.
-        // فرض کنیم transform را از SVG برداشتیم:
-        width: 60%; // یا یک مقدار ثابت px مانند 40px
-        height: 60%; // یا یک مقدار ثابت px مانند 40px
-        // اگر SVG دارای transform scale(0.55) است، این مقادیر را بزرگتر کنید:
-        // width: 100%; height: 100%; // و اجازه دهید scale داخلی SVG کار کند
-    }
 }
 
-// برای دکمه میکروفون، اگر آیکونش نیاز به استایل خاصی برای بزرگتر دیده شدن دارد
-.mic-button-color svg {
-    // width: 70% !important; // مثال برای بزرگتر کردن فقط آیکون میکروفون
-    // height: 70% !important;
-    // یا اگر scale در SVG اصلی بود و حذفش کردیم:
-    // transform: scale(1); // برای اینکه به اندازه اصلی viewBox اش باشد
-}
-
-
 .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 { /* ... */ }
+/* Switch Camera Button (No changes from previous correct version) */
+.switch-camera-button-container {
+    position: absolute; bottom: calc(100% + 0.65rem); 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);
+    transform-origin: center bottom;
+    &.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 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 (No changes) */
+@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 popover-lift-out {
+    0% { opacity: 1; transform: translateY(0) scale(1); }
+    100% { opacity: 0; transform: translateY(-100%) scale(0.9); }
+}
+.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; }