Update src/App.scss

src/App.scss

@@ -29,42 +29,58 @@
         outline-color: var(--foreground);
         box-sizing: border-box;
     }
-    body {
+    body, html { // Apply to both for good measure
         @apply bg-background text-foreground;
-        overflow-x: hidden;
+        overflow-x: hidden; // Prevent horizontal scroll
+        overflow-y: hidden; // *** ADDED: 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 ***
     }
-    html {
-        margin: 0;
-        padding: 0;
-        overflow-x: hidden;
-    }
+}
+
+// Main application container to manage height and prevent scrolling
+.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; 
+    display: flex;
+    flex-direction: column;
+    overflow: hidden; // Prevent scrolling on the main app container itself
 }
 
 .main-wrapper {
-    min-height: 100vh;
+    // min-height: 100vh; // Already handled by .app-container
     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
 }
+
 .media-area {
     flex-grow: 1;
     position: relative;
+    display: flex; // For centering large logo
+    align-items: center;
+    justify-content: center;
+    overflow: hidden; // Ensure video/logo doesn't cause scroll
 }
 
 #large-logo-container {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    pointer-events: none; // از کلیک شدن روی لوگو جلوگیری می‌کند
+    // 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;
+    pointer-events: none;
 }
 
 /* Notification Popover & Header controls (بدون تغییر) */
@@ -88,6 +104,7 @@
 .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;
@@ -106,47 +123,42 @@
 
 /* Logo Animation Styling */
 .logo-animation-wrapper {
-    position: relative; // مهم برای حلقه‌های داخلی
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
-    // اطمینان از اینکه SVG داخل لوگو تمام کانتینر آیکون را پر می‌کند
-    & > .z-10 > svg { // هدف‌گیری دقیق‌تر SVG داخل کانتینر آیکون
+    & > .z-10 > svg {
         width: 100%;
         height: 100%;
     }
 }
-// .logo-animation-wrapper.for-footer { } // اگر استایل خاصی برای لوگوی فوتر لازم باشد
 
-/* Footer styles to mimic HTML example - با padding کمتر برای بالاتر آمدن */
+/* Footer styles */
 .footer-controls-html-like {
     width: 100%;
     display: flex;
     align-items: center;
-    position: absolute;
-    bottom: 0; /* چسبیده به پایین */
-    // *** MODIFIED: کاهش padding-bottom برای بالاتر آمدن دکمه‌ها ***
-    // مقدار padding در HTML مرجع شما 2rem 3rem بود (32px بالا/پایین، 48px چپ/راست)
-    // برای بالاتر آمدن، padding-bottom را کمتر می‌کنیم یا از bottom با مقدار مثبت استفاده می‌کنیم.
-    // امتحان کنید:
-    padding: 1.5rem 2rem; // 24px بالا/پایین، 32px چپ/راست. یا حتی کمتر برای padding-bottom.
-    // یا
-    // padding: 2rem 3rem;
-    // bottom: 1rem; // امتحان کنید دکمه‌ها را 1rem از پایین صفحه فاصله دهید
-
+    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;
     box-sizing: border-box;
     z-index: 20;
-    justify-content: space-between; // میکروفون چپ، دوربین راست
+    justify-content: space-between;
+    flex-shrink: 0; // Prevent footer from shrinking
 }
 
 .small-logo-footer-html-like {
-    // این به صورت خودکار بین دو دکمه با justify-content: space-between قرار نمی‌گیرد.
-    // باید به صورت absolute در وسط قرار گیرد.
     position: absolute;
     left: 50%;
-    top: 50%; // نسبت به کادر padding فوتر
+    top: 50%;
     transform: translate(-50%, -50%);
-    z-index: 1; // پشت دکمه‌ها اگر همپوشانی داشته باشند (که نباید داشته باشند)
+    z-index: 1;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -162,7 +174,7 @@
     height: 80px;
     width: 80px;
     border-radius: 9999px;
-    padding: 0;
+    padding: 0; // SVG باید با اندازه خودش بیاید یا با CSS داخلی SVG تنظیم شود
     display: flex;
     align-items: center;
     justify-content: center;
@@ -173,56 +185,49 @@
     transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
     flex-shrink: 0;
     z-index: 2;
+    overflow: hidden; // برای اینکه SVG بزرگتر از دکمه بیرون نزند
+
     &: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);
     }
-    // اطمینان از اندازه مناسب SVG های داخل دکمه ها
+
+    // *** MODIFIED: تنظیم اندازه SVG داخل دکمه میکروفون و دوربین ***
     svg {
-        // width: 50%; // یا هر درصدی که مناسب به نظر می رسد
-        // height: 50%;
-        // یا اگر SVG ها transform دارند، آن را حفظ کنید
-        // transform: scale(0.55); // اگر این چیزی است که در HTML اصلی کار می کند
+        // هدف این است که آیکون میکروفون بزرگتر به نظر برسد
+        // و آیکون دوربین هم اندازه مناسبی داشته باشد.
+        // این مقادیر را می توانید تنظیم کنید.
+        // برای 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 کار کند
     }
 }
 
-// رنگ‌ها بر اساس HTML مرجع (میکروفون چپ، دوربین راست)
-.mic-button-color { background-color: #fecdd3; } // قرمز برای میکروفون (چپ)
-.cam-button-color { background-color: #E0ECFF; } // آبی برای دوربین (راست)
+// برای دکمه میکروفون، اگر آیکونش نیاز به استایل خاصی برای بزرگتر دیده شدن دارد
+.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 {
-    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); }
-}
-
+.switch-camera-button-container { /* ... */ }
+.switch-camera-button-content { /* ... */ }
 /* 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 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; }
+@keyframes popover-drop-in { /* ... */ }
+@keyframes popover-lift-out { /* ... */ }
+.animate-popover-open-top-center { /* ... */ }
+.animate-popover-close-top-center { /* ... */ }