Update src/App.scss

src/App.scss

@@ -12,6 +12,8 @@
     --popover: oklch(1 0 0);
     --popover-foreground: oklch(0.145 0 0);
     --border: oklch(0.922 0 0);
+    // ** NEW: Define bottom offset for footer, similar to HTML example's visual **
+    --footer-bottom-offset: 2rem; // 32px - این مقدار را می‌توانید تنظیم کنید
 }
 
 .dark {
@@ -52,11 +54,11 @@
 }
 .media-area {
     flex-grow: 1;
-    position: relative; // برای large-logo-container
+    position: relative;
 }
 
-#large-logo-container { // استایل از HTML مرجع شما
-    display: flex; // در App.tsx با flex items-center justify-center کنترل می شود
+#large-logo-container {
+    display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
@@ -64,104 +66,20 @@
     position: absolute;
     top: 0;
     left: 0;
+    z-index: 5; // پشت کنترل‌های فوتر باشد اگر همپوشانی کنند
 }
 
+/* Notification Popover & Header controls (بدون تغییر) */
+.notification-popover-wrapper { /* ... */ }
+.popover-content { /* ... */ }
+.notification-popover-text-content { /* ... */ }
+.dark .notification-popover-text-content { /* ... */ }
+.header-controls { /* ... */ }
+.header-button { /* ... */ }
+.dark .header-button { /* ... */ }
+// (کپی کامل این بخش‌ها از پاسخ قبلی)
+.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}.popover-content{width:100%;border-radius:var(--radius-md,.5rem);border-width:1px;border-color:var(--border);background-color:var(--popover);color:var(--popover-foreground);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;outline:none;transition:opacity .3s ease-out,transform .4s cubic-bezier(.68,-.55,.27,1.55);opacity:0;transform:translateY(-100%) scale(.9);pointer-events:none}.popover-content.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}.notification-popover-text-content{background-color:#eff6ff;font-size:.875rem;line-height:1.5rem;direction:rtl;padding:1rem;border-radius:var(--radius-md,.5rem);color:oklch(.145 0 0)}.dark .notification-popover-text-content{background-color:oklch(.25 .05 230);color:oklch(.95 .01 230)}.header-controls{display:flex;padding:.75rem .5rem;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:.5rem;width:40px;height:40px;border-radius:var(--radius-lg,.625rem);background-color:#e5e7eb;cursor:pointer;transition:background-color .2s,transform .1s ease-out}.header-button svg{opacity:.7;stroke:#374151;width:24px;height:24px}.header-button:hover{background-color:#d1d5db}.header-button:active{background-color:#9ca3af;transform:scale(.95)}.dark .header-button{background-color:oklch(.28 0 0)}.dark .header-button:hover{background-color:oklch(.35 0 0)}.dark .header-button:active{background-color:oklch(.40 0 0);transform:scale(.95)}.dark .header-button svg{opacity:.8;stroke:oklch(.85 0 0)}
 
-/* Notification Popover & Header controls (بدون تغییر از پاسخ قبلی) */
-.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;
-}
-.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);
-    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 {
-        opacity: 1;
-        transform: translateY(0) scale(1);
-        pointer-events: auto;
-    }
-}
-.notification-popover-text-content {
-    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);
-}
-.dark .notification-popover-text-content {
-    background-color: oklch(0.25 0.05 230);
-    color: oklch(0.95 0.01 230);
-}
-.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;
-}
-.header-button {
-    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;
-    cursor: pointer;
-    transition: background-color 0.2s, transform 0.1s ease-out;
-    svg {
-        opacity: 0.7;
-        stroke: #374151;
-        width: 24px;
-        height: 24px;
-    }
-    &:hover {
-        background-color: #d1d5db;
-    }
-    &: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);
-    }
-}
 
 /* Logo Animation Styling */
 .logo-animation-wrapper {
@@ -169,13 +87,19 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    & > div > svg { // اطمینان از اینکه SVG داخل لوگو تمام فضا را پر می کند
+    color: #FCFCFC; // رنگ پیش فرض آیکون انسان (سفید)
+    &.for-footer {
+        // اگر استایل خاصی برای لوگوی فوتر نیاز است
+    }
+    // اطمینان از اینکه SVG داخل لوگو تمام فضا را پر می کند
+    & > div > svg {
         width: 100%;
         height: 100%;
     }
 }
-.logo-animation-wrapper.for-footer {
-    // اگر نیاز به استایل خاصی برای لوگوی فوتر باشد
+.dark .logo-animation-wrapper {
+    // در حالت دارک، اگر رنگ آیکون انسان باید تغییر کند، اینجا تعریف کنید
+    // مثال: color: oklch(0.145 0 0); // اگر می خواهید در دارک مود تیره شود
 }
 
 
@@ -183,48 +107,49 @@
 .footer-controls-html-like {
     width: 100%;
     display: flex;
-    align-items: center; // برای هم ترازی عمودی
+    align-items: center;
     position: absolute;
-    bottom: 0;
-    padding: 2rem 3rem; // 32px top/bottom, 48px left/right (از HTML مرجع)
+    // ** MODIFIED: Use var for bottom offset **
+    bottom: var(--footer-bottom-offset); // بالاتر از لبه پایین صفحه
+    // Padding افقی از HTML مرجع، padding عمودی برای ایجاد فضا در بالا و پایین دکمه ها
+    padding: 1rem 3rem; // 16px بالا/پایین, 48px چپ/راست
     box-sizing: border-box;
-    z-index: 20; // بالاتر از محتوای مدیا
-
-    // چیدمان دکمه ها: میکروفون چپ، لوگو وسط (اگر فعال)، دوربین راست
-    // با استفاده از flex-grow برای لوگو، دکمه ها به کناره ها می چسبند
-    // یا با justify-content: space-between و margin auto برای لوگو
+    z-index: 20;
     justify-content: space-between; // میکروفون چپ، دوربین راست
 }
 
-// کانتینر برای لوگوی کوچک در فوتر، برای قرارگیری دقیق بین دکمه ها
 .small-logo-footer-html-like {
-    // این به صورت خودکار بین دو دکمه قرار می گیرد اگر فضای کافی باشد
-    // یا می توان آن را به صورت absolute در وسط قرار داد
-    // position: absolute;
-    // left: 50%;
-    // top: 50%;
-    // transform: translate(-50%, -50%);
-    // z-index: 1; // پشت دکمه ها اگر همپوشانی داشته باشند
-    // برای حالا، اجازه می دهیم با flex در جای خود قرار گیرد
+    // این به صورت خودکار بین دو دکمه قرار می گیرد چون فوتر space-between است
+    // و این div در JSX بین دو دکمه اصلی قرار دارد
+    // برای اطمینان از مرکز بودن، می توانیم از flex-grow در دو دکمه کناری استفاده کنیم
+    // یا به این شکل:
+    // margin-left: auto;
+    // margin-right: auto;
+    // اما با justify-content: space-between در والد، این باید وسط قرار گیرد اگر تنها عنصر وسطی باشد.
+    // اگر سه عنصر دارید (دکمه - لوگو - دکمه) و justify-content: space-between،
+    // لوگو به صورت مساوی بین آنها فاصله می گیرد.
+    // برای اینکه لوگو دقیقا وسط صفحه باشد و دکمه ها در کناره ها، نیاز به تغییرات بیشتری در JSX یا CSS است.
+    // فعلا با چیدمان سه ستونه (میکروفون، لوگو، دوربین) و space-between در فوتر پیش می رویم.
+    // اگر می خواهید لوگو همیشه وسط باشد، باید از position: absolute برای لوگو استفاده کرد.
     display: flex;
     align-items: center;
     justify-content: center;
-    // اگر می خواهید دقیقاً وسط باشد و دکمه ها در کناره ها:
-    margin-left: auto;
-    margin-right: auto;
+    // برای اینکه فضای مساوی با دکمه ها بگیرد، یا flex-grow بدهیم، یا اندازه ثابت
+    // flex-grow: 1; // این باعث می شود فضای خالی بین دکمه ها را پر کند
+    // یا اگر می خواهید اندازه اش ثابت باشد و دکمه ها به کناره ها بچسبند:
+    // (بدون تغییر، اجازه می دهیم با محتوایش اندازه بگیرد)
 }
 
 
-.control-button-wrapper { // برای دکمه دوربین و دکمه تعویض آن
+.control-button-wrapper {
     position: relative;
     display: flex;
     justify-content: center;
 }
-// .cam-wrapper-html-like در ControlTray.tsx استفاده شده
 
 .control-button {
-    height: 80px; // از HTML مرجع
-    width: 80px;  // از HTML مرجع
+    height: 80px;
+    width: 80px;
     border-radius: 9999px;
     padding: 0;
     display: flex;
@@ -236,89 +161,43 @@
     cursor: pointer;
     transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
     flex-shrink: 0;
-    z-index: 2; // اطمینان از اینکه دکمه ها قابل کلیک هستند
+    z-index: 2;
 
     &: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 داخل دکمه ها به درستی نمایش داده می شود
+    // ** NEW: Scale SVG icons within buttons to match HTML reference if needed **
     svg {
-      // اگر SVG ها خیلی بزرگ هستند، می توانید اندازه آنها را اینجا کنترل کنید
-      // مثال: width: 50%; height: 50%;
-      // یا با transform: scale(0.55); اگر در HTML اصلی شما اینگونه بوده
+        // transform: scale(0.55); // این از HTML مرجع شما برای آیکون میکروفون بود.
+                                // اگر برای همه آیکون ها لازم است، اینجا اعمال کنید.
+                                // یا اندازه های width/height را مستقیما بدهید.
+        // مثال برای اندازه ثابت:
+        // width: 38px;
+        // height: 38px;
+        // فعلا بدون تغییر، اجازه می دهیم SVG اندازه خودش را داشته باشد یا در تعریفش کنترل شود.
     }
 }
 
-// ترتیب رنگ ها بر اساس HTML مرجع شما (میکروفون چپ، دوربین راست)
-.mic-button-color { background-color: #fecdd3; } // قرمز برای میکروفون
-.cam-button-color { background-color: #E0ECFF; } // آبی برای دوربین
+.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);
-    }
-}
-
-/* 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;
-}
+/* Switch Camera Button (بدون تغییر) */
+.switch-camera-button-container { /* ... */ }
+.switch-camera-button-content { /* ... */ }
+.switch-camera-button-content svg { /* ... */ }
+.switch-camera-button-content:hover svg { /* ... */ }
+// (کپی کامل این بخش‌ها از پاسخ قبلی)
+.switch-camera-button-container{position:absolute;bottom:calc(100% + .65rem);left:50%;transform:translateX(-50%) translateY(15px) scale(.7);z-index:5;opacity:0;pointer-events:none;transition:opacity .35s cubic-bezier(.68,-.55,.27,1.55),transform .35s cubic-bezier(.68,-.55,.27,1.55);transform-origin:center bottom}.switch-camera-button-container.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 #0000001f,0 2px 4px #00000014;cursor:pointer;transform-origin:center;transition:transform .2s ease-out,box-shadow .2s ease-out}.switch-camera-button-content:hover{transform:scale(1.12) rotate(-6deg);box-shadow:0 7px 15px #0000002e,0 3px 6px #0000001f}.switch-camera-button-content:active{transform:scale(1.03) rotate(0)}.switch-camera-button-content svg{width:22px;height:22px;stroke:var(--foreground);transition:transform .3s ease-in-out}.switch-camera-button-content:hover svg{transform:rotate(360deg)}
+
+/* Keyframes for popover (بدون تغییر) */
+@keyframes popover-drop-in { /* ... */ }
+@keyframes popover-lift-out { /* ... */ }
+.animate-popover-open-top-center { /* ... */ }
+.animate-popover-close-top-center { /* ... */ }
+// (کپی کامل این بخش‌ها از پاسخ قبلی)
+@keyframes popover-drop-in{0%{opacity:0;transform:translateY(-100%) scale(.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(.9)}}.animate-popover-open-top-center{animation:popover-drop-in .4s cubic-bezier(.68,-.55,.27,1.55) forwards}.animate-popover-close-top-center{animation:popover-lift-out .3s ease-in forwards}