Update src/App.scss

src/App.scss

@@ -1,59 +1,133 @@
-/* Import Tailwind base, components, and utilities */
+/* App.scss or your main SCSS/CSS file */
+
+/* Tailwind base, components, utilities (ensure this is at the top) */
 /* @tailwind base; */
 /* @tailwind components; */
 /* @tailwind utilities; */
-/*
-  اگر TailwindCSS را به صورت PostCSS plugin نصب کرده‌اید،
-  نیازی به ایمپورت مستقیم فایل‌های بالا نیست و فقط باید فایل اصلی CSS خود را ایمپورت کنید.
-  اگر از CDN استفاده می‌کنید، این بخش را نادیده بگیرید و مطمئن شوید CDN در public/index.html شما هست.
-  برای سادگی، فرض می‌کنیم Tailwind به درستی در پروژه تنظیم شده است.
-*/
-
-/* CSS variables and base styles from your HTML */
+
 :root {
     --radius: 0.625rem; /* 10px */
     --radius-md: 0.5rem; /* 8px */
-    --background: oklch(1 0 0);
-    --foreground: oklch(0.145 0 0);
+    --background: oklch(1 0 0); /* White */
+    --foreground: oklch(0.145 0 0); /* Dark Gray/Black */
     --popover: oklch(1 0 0);
     --popover-foreground: oklch(0.145 0 0);
-    --border: oklch(0.922 0 0);
-    /* Gemini variables (optional, if you want to theme them) */
-    --Neutral-5: var(--background);
-    --Neutral-30: var(--border);
-    --Blue-500: #3b82f6; /* Example blue */
-    --Red-500: #ef4444;  /* Example red */
+    --border: oklch(0.922 0 0); /* Light Gray */
+
+    --color-cam-button-bg: #E0ECFF; // Light Blue
+    --color-mic-button-bg: #fecdd3; // Light Red
+    --color-red-500: #ef4444; // For mic pulse
 }
 
 .dark {
-    --background: oklch(0.145 0 0);
-    --foreground: oklch(0.985 0 0);
+    --background: oklch(0.145 0 0); /* Dark Gray/Black */
+    --foreground: oklch(0.985 0 0); /* Off-White */
     --popover: oklch(0.205 0 0);
     --popover-foreground: oklch(0.985 0 0);
-    --border: oklch(1 0 0 / 10%);
+    --border: oklch(1 0 0 / 10%); /* Very Dark Transparent Gray */
 
-    --Neutral-5: var(--background);
-    --Neutral-30: var(--border);
-    --Blue-500: #60a5fa; /* Lighter blue for dark mode */
-    --Red-500: #f87171;  /* Lighter red for dark mode */
+    --color-cam-button-bg: #223355; // Dark Blue
+    --color-mic-button-bg: #5C2129; // Dark Red
+    --color-red-500: #f87171; // Lighter Red for dark mode pulse
 }
 
-@layer base {
-    * {
-        /* @apply border-border outline-ring/50; */ /* Tailwind directive */
-        /* For non-Tailwind setup, define border-border if needed */
-        border-color: var(--border);
-    }
-    body {
-        /* @apply bg-background text-foreground; */ /* Tailwind directive */
-        background-color: var(--background);
-        color: var(--foreground);
-        overflow-x: hidden;
-        font-family: sans-serif; /* Add a default font */
-    }
+body {
+    background-color: var(--background);
+    color: var(--foreground);
+    /* @apply antialiased; (If using Tailwind's font smoothing) */
+    font-family: sans-serif; /* Or your preferred font stack */
+    overflow-x: hidden;
 }
 
-/* Notification Popover Wrapper & Content - Converted from Tailwind classes */
+/* Base styles for control buttons if not fully handled by Tailwind */
+.control-button {
+    /* Tailwind handles size, border-radius, flex, items-center, justify-center, p-0 */
+    /* Tailwind handles shadow, hover:scale, hover:shadow, transition */
+    border-width: 1px; /* Or manage with Tailwind like 'border' */
+    border-color: var(--border);
+    cursor: pointer;
+}
+
+.cam-button-color {
+    background-color: var(--color-cam-button-bg);
+}
+.mic-button-color {
+    background-color: var(--color-mic-button-bg);
+}
+
+/* Mic Pulse Animation */
+@property --volume {
+  syntax: "<length>";
+  inherit: false;
+  initial-value: 0px;
+}
+
+.mic-button-wrapper .control-button.active:before {
+  position: absolute;
+  z-index: -1;
+  top: calc(var(--volume) * -1);
+  left: calc(var(--volume) * -1);
+  display: block;
+  content: "";
+  opacity: 0.35;
+  background-color: var(--color-red-500); /* Use CSS variable */
+  width: calc(100% + var(--volume) * 2);
+  height: calc(100% + var(--volume) * 2);
+  /* Ensure border-radius matches the button's rounded-full */
+  border-radius: 9999px; /* Or inherit if possible */
+  transition: all 0.02s ease-in-out;
+}
+
+
+/* Styles for the switch camera button container and content (from your HTML's CSS) */
+/* These are crucial for the pop-up animation of the switch camera button */
+.switch-camera-button-container {
+    /* Tailwind classes in JSX now handle most of this:
+       absolute bottom-[calc(100%+0.65rem)] left-1/2 z-[5] transform -translate-x-1/2
+       opacity-0 scale-75 pointer-events-none translate-y-[15px]
+       transition-opacity duration-300 ease-[cubic-bezier(0.68,-0.55,0.27,1.55)]
+       transform-origin-center-bottom
+    */
+    /* The .visible class logic is now inline in JSX based on state */
+}
+/* .switch-camera-button-container.visible {
+    opacity: 1;
+    transform: translateY(0) scale(1) translateX(-50%);
+    pointer-events: auto;
+} */
+
+.switch-camera-button-content {
+    /* Tailwind classes in JSX now handle most of this:
+       w-12 h-12 bg-background dark:bg-neutral-800 border dark:border-neutral-700 border-neutral-300
+       rounded-full flex items-center justify-center shadow-lg hover:scale-110 hover:rotate-[-6deg]
+       active:scale-105 active:rotate-0 transition-transform transform-origin-center
+    */
+    cursor: pointer; /* Ensure cursor is pointer */
+}
+.switch-camera-button-content svg {
+    width: 22px; /* Or use Tailwind w-5 h-5 or similar */
+    height: 22px;
+    stroke: var(--foreground); /* Ensure SVG picks up text color */
+    transition: transform 0.3s ease-in-out;
+}
+.switch-camera-button-content:hover svg {
+    /* @apply rotate-[360deg]; (If you want to use Tailwind transform) */
+    transform: rotate(360deg); /* Or keep as is */
+}
+
+/* Footer controls base class (if needed beyond Tailwind) */
+.footer-controls {
+    /* Most styling now via Tailwind in JSX */
+    /* width: 100%; display: flex; gap: 1rem; position: absolute;
+    bottom: 0; padding: 2rem 3rem; align-items: center; */
+}
+/* .footer-controls.layout-default { justify-content: space-between; } */
+/* .footer-controls.layout-with-small-logo { justify-content: space-around; } */
+
+
+/* Other styles from App.scss (notification, header, video feed, logos) should remain */
+/* ... (rest of your App.scss from previous correct version) ... */
+
 .notification-popover-wrapper {
     position: fixed;
     top: 1rem;
@@ -103,7 +177,6 @@
     color: oklch(0.95 0.01 230);
 }
 
-/* Header controls - Converted from Tailwind classes */
 .header-controls {
     display: flex;
     padding: 1rem;
@@ -125,7 +198,7 @@
     background-color: #e5e7eb; /* bg-gray-200 */
     cursor: pointer;
     transition: background-color 0.2s;
-    border: none; /* Reset button border */
+    border: none;
 }
 .header-button:hover {
     background-color: #d1d5db; /* bg-gray-300 */
@@ -148,140 +221,13 @@
     stroke: oklch(0.85 0 0);
 }
 
-/* Footer controls styles, to be used by ControlTray.tsx */
-.footer-controls {
-    width: 100%;
-    display: flex;
-    gap: 1rem;
-    position: absolute;
-    bottom: 0;
-    padding: 2rem 3rem;
-    align-items: center;
-    box-sizing: border-box; /* Add box-sizing */
-}
-.footer-controls.layout-default {
-    justify-content: space-between;
-}
-.footer-controls.layout-with-small-logo {
-    justify-content: space-around;
-}
-
-.control-button {
-    height: 80px;
-    width: 80px;
-    border-radius: 9999px;
-    padding: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-width: 1px;
-    border-color: var(--border);
-    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;
-}
-.control-button: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);
-}
-.cam-button-color { background-color: #E0ECFF; }
-.mic-button-color { background-color: #fecdd3; }
-.dark .cam-button-color { background-color: #223355; }
-.dark .mic-button-color { background-color: #5C2129; }
-
-/* Styles for the switch camera button (used in ControlTray.tsx) */
-.switch-camera-button-container {
-    position: absolute;
-    bottom: calc(100% + 0.65rem);
-    left: 50%;
-    z-index: 5;
-    opacity: 0;
-    transform: translateY(15px) scale(0.7) translateX(-50%);
-    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;
-}
-.switch-camera-button-container.visible {
-    opacity: 1;
-    transform: translateY(0) scale(1) translateX(-50%);
-    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;
-}
-.switch-camera-button-content:hover {
-    transform: scale(1.12) rotate(-6deg);
-}
-.switch-camera-button-content:active {
-    transform: scale(1.03) rotate(0deg);
-}
-.switch-camera-button-content svg {
-    width: 22px;
-    height: 22px;
-    stroke: var(--foreground);
-    transition: transform 0.3s ease-in-out;
-}
-.switch-camera-button-content:hover svg {
-    transform: rotate(360deg);
-}
-
-
-/* Styles for the mic button pulse (from original control-tray.scss) */
-@property --volume {
-  syntax: "<length>";
-  inherit: false;
-  initial-value: 0px;
-}
-
-.mic-button-wrapper .control-button { /* Target the control-button specifically for mic */
-  position: relative;
-  /* background-color: var(--Red-500); */ /* This is already set by .mic-button-color */
-  z-index: 1;
-  color: black; /* Or var(--foreground) if it fits better */
-  transition: all 0.2s ease-in;
-}
-
-.mic-button-wrapper .control-button:focus {
-  /* border: 2px solid var(--Neutral-20); Using var(--border) is better */
-  outline: 2px solid var(--Red-500); /* Keep red outline for mic */
-}
-
-/* .mic-button-wrapper .control-button:hover {
-  background-color: var(--Red-400); No, keep original hover from .control-button
-} */
-
-.mic-button-wrapper .control-button.active:before { /* only show pulse when active (mic on) */
-  position: absolute;
-  z-index: -1;
-  top: calc(var(--volume) * -1);
-  left: calc(var(--volume) * -1);
-  display: block;
-  content: "";
-  opacity: 0.35;
-  background-color: var(--Red-500);
-  width: calc(100% + var(--volume) * 2);
-  height: calc(100% + var(--volume) * 2);
-  border-radius: calc(var(--radius-md) + var(--volume)); /* Adjust radius with volume */
-  transition: all 0.02s ease-in-out;
-}
 .app-container {
     width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    min-height: 90vh; /* md:min-h-screen */
+    min-height: 90vh; 
 }
 @media (min-width: 768px) {
     .app-container {
@@ -290,7 +236,7 @@
 }
 
 .main-content-wrapper {
-    max-width: 48rem; /* max-w-3xl */
+    max-width: 48rem; 
     width: 100%;
     display: flex;
     flex-direction: column;
@@ -306,11 +252,11 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    height: 90vh; /* or 100% of its container if nested differently */
+    height: 90vh; 
     background-color: var(--background);
     top: 0;
     left: 0;
-    position: relative; /* Or absolute if it's layered */
+    position: relative; 
 }
 
 .video-feed {
@@ -320,7 +266,7 @@
     width: 100%;
     height: 100%;
     object-fit: cover;
-    transform: scaleX(-1); /* Mirror effect */
+    transform: scaleX(-1); 
 }
 
 .large-logo-container, .small-logo-container {
@@ -336,47 +282,50 @@
     left: 0;
 }
 
-/* Add class for body when modal is open to prevent scrolling */
-.body-no-scroll {
-  overflow: hidden;
-}
-
-/* Gemini Original App class, if needed for Altair or SidePanel */
 .App {
-  /* display: flex; // This might conflict with new layout */
-  /* flex-direction: column; // This might conflict */
   height: 100vh;
   width: 100vw;
-  overflow: hidden; /* Prevent main app scroll if not desired */
-  background-color: var(--background); /* Ensure background consistency */
+  overflow: hidden; 
+  background-color: var(--background); 
 }
 
-.streaming-console {
+.streaming-console { /* May not be used if SidePanel is removed */
   display: flex;
   flex-grow: 1;
-  overflow: hidden; /* If SidePanel or Altair have their own scroll */
+  overflow: hidden; 
 }
 
 main {
   flex-grow: 1;
   display: flex;
   flex-direction: column;
-  position: relative; /* For positioning Altair and video */
-  overflow: hidden;
+  position: relative; 
+  overflow: hidden; /* Important for positioning Altair on top */
+  height: 100%; /* Ensure main takes full height for absolute positioning inside */
 }
 
 .main-app-area {
   flex-grow: 1;
-  position: relative;
+  position: relative; /* For positioning Altair and video feed */
+  height: 100%;
 }
 
-/* Ensure Altair is visible if used */
-/* .altair-chat {
+/* Example: Ensure Altair (chat bubbles) are visible and on top */
+/* You'll need to inspect Altair's generated classes or wrap it */
+div[class*="altair-chat-container"], /* Example selector, adjust as needed */
+.altair-chat { 
   position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 5; // Example, adjust as needed
-  background: rgba(255,255,255,0.8); // Example for visibility
-} */
+  top: 60px; /* Adjust to be below your header */
+  bottom: 120px; /* Adjust to be above your footer controls */
+  left: 10px;
+  right: 10px;
+  z-index: 20; /* Ensure it's above video feed, but below popovers/modals */
+  overflow-y: auto; /* Allow scrolling for chat messages */
+  pointer-events: auto; /* Allow interaction with chat */
+  /* background: rgba(255,255,255,0.1); // For testing visibility */
+}
+
+.dark div[class*="altair-chat-container"],
+.dark .altair-chat {
+  /* background: rgba(0,0,0,0.1); // For testing visibility in dark mode */
+}