Update src/App.scss

src/App.scss

@@ -12,8 +12,6 @@
     --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 {
@@ -39,6 +37,8 @@
         -moz-osx-font-smoothing: grayscale;
         margin: 0;
         padding: 0;
+        // برای جلوگیری از پرش هنگام ظاهر شدن اسکرول بار احتمالی در برخی موارد
+        // overflow-y: scroll; 
     }
     html {
         margin: 0;
@@ -54,11 +54,23 @@
 }
 .media-area {
     flex-grow: 1;
-    position: relative;
+    position: relative; 
 }
 
-#large-logo-container {
-    display: flex;
+// انیمیشن پینگ برای لوگو (از Tailwind، اگر مستقیماً استفاده نمی‌شود، می‌توان اینجا تعریف کرد)
+@keyframes ping {
+  75%, 100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+}
+.animate-ping {
+  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+}
+
+
+#large-logo-container { 
+    display: flex; 
     align-items: center;
     justify-content: center;
     width: 100%;
@@ -66,90 +78,80 @@
     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)}
-
-
-/* Logo Animation Styling */
-.logo-animation-wrapper {
-    position: relative;
+.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 Container - برای اطمینان از نمایش صحیح انیمیشن کامل */
+.logo-animation-container {
+    position: relative; // برای حلقه‌های داخلی absolute
     display: flex;
     align-items: center;
     justify-content: center;
-    color: #FCFCFC; // رنگ پیش فرض آیکون انسان (سفید)
-    &.for-footer {
-        // اگر استایل خاصی برای لوگوی فوتر نیاز است
-    }
-    // اطمینان از اینکه SVG داخل لوگو تمام فضا را پر می کند
-    & > div > svg {
-        width: 100%;
-        height: 100%;
-    }
+    // کلاس .animate-ping توسط Tailwind اعمال می‌شود
+    // حلقه‌های دیگر با کلاس‌های رنگی Tailwind و style inline در App.tsx مدیریت می‌شوند.
 }
-.dark .logo-animation-wrapper {
-    // در حالت دارک، اگر رنگ آیکون انسان باید تغییر کند، اینجا تعریف کنید
-    // مثال: color: oklch(0.145 0 0); // اگر می خواهید در دارک مود تیره شود
+.logo-animation-container > div > svg {
+    width: 100%; // اطمینان از پر کردن کانتینر آدمک
+    height: 100%;
 }
 
 
-/* Footer styles to mimic HTML example */
+/* Footer styles - تلاش برای تطابق بیشتر با HTML مرجع */
 .footer-controls-html-like {
     width: 100%;
     display: flex;
-    align-items: center;
+    align-items: center; 
     position: absolute;
-    // ** MODIFIED: Use var for bottom offset **
-    bottom: var(--footer-bottom-offset); // بالاتر از لبه پایین صفحه
-    // Padding افقی از HTML مرجع، padding عمودی برای ایجاد فضا در بالا و پایین دکمه ها
-    padding: 1rem 3rem; // 16px بالا/پایین, 48px چپ/راست
+    left: 0; // برای اطمینان از پوشش کامل عرض
+    // *** تنظیم bottom برای بالا بردن دکمه‌ها ***
+    // مقدار دقیق bottom ممکن است نیاز به تنظیم داشته باشد. 2rem یک شروع خوب است.
+    // در HTML شما padding: 2rem 3rem بود، که 2rem فاصله از پایین ایجاد می‌کرد.
+    bottom: 2rem; // فاصله از پایین صفحه
+    // padding افقی برای فاصله از کناره‌های صفحه
+    padding-left: 3rem;  // 48px از چپ (مانند HTML)
+    padding-right: 3rem; // 48px از راست (مانند HTML)
+    // padding عمودی کمتر، چون bottom فاصله را کنترل می‌کند
+    padding-top: 0.5rem; 
+    padding-bottom: 0.5rem;
     box-sizing: border-box;
     z-index: 20;
     justify-content: space-between; // میکروفون چپ، دوربین راست
 }
 
 .small-logo-footer-html-like {
-    // این به صورت خودکار بین دو دکمه قرار می گیرد چون فوتر 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;
-    // برای اینکه فضای مساوی با دکمه ها بگیرد، یا flex-grow بدهیم، یا اندازه ثابت
-    // flex-grow: 1; // این باعث می شود فضای خالی بین دکمه ها را پر کند
-    // یا اگر می خواهید اندازه اش ثابت باشد و دکمه ها به کناره ها بچسبند:
-    // (بدون تغییر، اجازه می دهیم با محتوایش اندازه بگیرد)
+    // برای قرارگیری دقیق بین دو دکمه اصلی با چیدمان space-between در والد
+    // این عنصر به طور خودکار فضای باقی مانده را پر نمی کند،
+    // بلکه باید به صورت absolute در مرکز قرار گیرد یا flex والد تغییر کند.
+    // اگر والد `justify-content: space-between;` دارد:
+    position: absolute;
+    left: 50%;
+    top: 50%; // نسبت به والد (.footer-controls-html-like)
+    transform: translate(-50%, -50%);
+    z-index: 1; // پشت دکمه‌ها اگر همپوشانی دارند
 }
 
 
-.control-button-wrapper {
+.control-button-wrapper { 
     position: relative;
     display: flex;
     justify-content: center;
 }
 
 .control-button {
-    height: 80px;
-    width: 80px;
+    height: 80px; 
+    width: 80px;  
     border-radius: 9999px;
     padding: 0;
     display: flex;
@@ -161,43 +163,28 @@
     cursor: pointer;
     transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
     flex-shrink: 0;
-    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);
-    }
-    // ** NEW: Scale SVG icons within buttons to match HTML reference if needed **
+    z-index: 2; 
+    // برای اینکه آیکون SVG داخل دکمه به درستی نمایش داده شود
     svg {
-        // transform: scale(0.55); // این از HTML مرجع شما برای آیکون میکروفون بود.
-                                // اگر برای همه آیکون ها لازم است، اینجا اعمال کنید.
-                                // یا اندازه های width/height را مستقیما بدهید.
-        // مثال برای اندازه ثابت:
-        // width: 38px;
-        // height: 38px;
-        // فعلا بدون تغییر، اجازه می دهیم SVG اندازه خودش را داشته باشد یا در تعریفش کنترل شود.
+        // اگر آیکون‌ها به طور پیش‌فرض خیلی بزرگ هستند، می‌توانید scale را اینجا اعمال کنید
+        // یا width/height مستقیم به SVG بدهید.
+        // مثال برای اطمینان از اندازه:
+        // max-width: 60%; 
+        // max-height: 60%;
     }
 }
 
-.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 { /* ... */ }
-.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)}
+.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 { /* ... */ }
-@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}
+@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; }