Update src/App.scss

src/App.scss

@@ -1,133 +1,44 @@
-/* App.scss or your main SCSS/CSS file */
-
-/* Tailwind base, components, utilities (ensure this is at the top) */
+/* Import or define Tailwind base, components, utilities if not using CDN, or if extending */
 /* @tailwind base; */
 /* @tailwind components; */
 /* @tailwind utilities; */
 
+
+/* CSS variables and base styles from your new HTML's <style> tag */
+@custom-variant dark (&:is(.dark *)); /* If using PostCSS with custom variants */
+
 :root {
     --radius: 0.625rem; /* 10px */
     --radius-md: 0.5rem; /* 8px */
-    --background: oklch(1 0 0); /* White */
-    --foreground: oklch(0.145 0 0); /* Dark Gray/Black */
+    --background: oklch(1 0 0);
+    --foreground: oklch(0.145 0 0);
     --popover: oklch(1 0 0);
     --popover-foreground: oklch(0.145 0 0);
-    --border: oklch(0.922 0 0); /* Light Gray */
+    --border: oklch(0.922 0 0);
+    /* Add other variables from your HTML if they are defined in :root */
+    --accent-red: #fecdd3; /* Example mic button color */
+    --Blue-500: #3b82f6; /* Example connect button color */
 
-    --color-cam-button-bg: #E0ECFF; // Light Blue
-    --color-mic-button-bg: #fecdd3; // Light Red
-    --color-red-500: #ef4444; // For mic pulse
+     /* For mic pulse from original control-tray.scss */
+    --volume: 0px;
 }
 
 .dark {
-    --background: oklch(0.145 0 0); /* Dark Gray/Black */
-    --foreground: oklch(0.985 0 0); /* Off-White */
+    --background: oklch(0.145 0 0);
+    --foreground: oklch(0.985 0 0);
     --popover: oklch(0.205 0 0);
     --popover-foreground: oklch(0.985 0 0);
-    --border: oklch(1 0 0 / 10%); /* Very Dark Transparent Gray */
-
-    --color-cam-button-bg: #223355; // Dark Blue
-    --color-mic-button-bg: #5C2129; // Dark Red
-    --color-red-500: #f87171; // Lighter Red for dark mode pulse
-}
-
-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;
-}
-
-/* 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;
+    --border: oklch(1 0 0 / 10%);
+    --accent-red: #5C2129; 
+    --Blue-500: #1e40af;
 }
 
-.cam-button-color {
-    background-color: var(--color-cam-button-bg);
+@layer base {
+    * { @apply border-border outline-ring/50; } /* Requires Tailwind */
+    body { @apply bg-background text-foreground; overflow-x: hidden; } /* Requires Tailwind */
 }
-.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 & Content */
 .notification-popover-wrapper {
     position: fixed;
     top: 1rem;
@@ -161,22 +72,21 @@ body {
     transform: translateY(0) scale(1);
     pointer-events: auto;
 }
-
+/* Text content within the popover */
 .notification-popover-text-content {
     background-color: #eff6ff; /* bg-blue-50 */
-    font-size: 0.875rem;
-    line-height: 1.5rem;
-    direction: rtl;
+    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);
+    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 */
 .header-controls {
     display: flex;
     padding: 1rem;
@@ -190,142 +100,197 @@ body {
 }
 
 .header-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0.5rem;
-    border-radius: var(--radius-lg, 0.625rem);
+    display: flex; align-items: center; justify-content: center;
+    padding: 0.5rem; border-radius: var(--radius-lg, 0.625rem);
     background-color: #e5e7eb; /* bg-gray-200 */
     cursor: pointer;
     transition: background-color 0.2s;
-    border: none;
 }
 .header-button:hover {
     background-color: #d1d5db; /* bg-gray-300 */
 }
-.header-button svg {
-    opacity: 0.7;
-    stroke: #374151; /* gray-700 */
-    width: 24px;
-    height: 24px;
-}
+.header-button svg { opacity: 0.7; stroke: #374151 /* gray-700 */; }
 
 .dark .header-button {
-    background-color: oklch(0.28 0 0);
+    background-color: oklch(0.28 0 0); 
 }
 .dark .header-button:hover {
     background-color: oklch(0.35 0 0);
 }
-.dark .header-button svg {
-    opacity: 0.8;
-    stroke: oklch(0.85 0 0);
-}
+.dark .header-button svg { opacity: 0.8; stroke: oklch(0.85 0 0); }
 
-.app-container {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    min-height: 90vh; 
+
+@keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } }
+.animate-ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
+
+
+.footer-controls {
+    width: 100%; display: flex; gap: 1rem; position: absolute;
+    bottom: 0; padding: 2rem 3rem; align-items: center;
+    z-index: 20; // Ensure they are above video but below modals
 }
-@media (min-width: 768px) {
-    .app-container {
-        min-height: 100vh;
+.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;
+    position: relative; // For pseudo-element pulse
+    z-index: 1; // For pulse
+}
+.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);
+}
+.control-button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+.cam-button-color { background-color: #E0ECFF; } 
+.mic-button-color { background-color: var(--accent-red); } 
+.dark .cam-button-color { background-color: #223355; } 
+.dark .mic-button-color { background-color: var(--accent-red); } // Using the variable directly
+
+
+/* Mic pulse effect (adapted from original control-tray.scss) */
+#mic-button { // Target by ID
+    &: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(--accent-red); /* Or a specific red like var(--Red-500) if defined */
+        .dark & {
+            background-color: var(--accent-red); /* Or a specific dark red */
+        }
+        width: calc(100% + var(--volume) * 2);
+        height: calc(100% + var(--volume) * 2);
+        border-radius: 9999px; // Match button's border-radius
+        transition: all 0.02s ease-in-out;
     }
 }
-
-.main-content-wrapper {
-    max-width: 48rem; 
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    position: relative;
+#mic-button:disabled:before, .mic-button.disabled:before { // If you add a disabled class
+    background: rgba(0, 0, 0, 0);
 }
 
-.media-toggle-area {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 90vh; 
-    background-color: var(--background);
-    top: 0;
-    left: 0;
-    position: relative; 
-}
 
-.video-feed {
+/* Switch Camera Button Styles */
+.switch-camera-button-container {
     position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    transform: scaleX(-1); 
+    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;
 }
-
-.large-logo-container, .small-logo-container {
+.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;
 }
-.large-logo-container {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
+.switch-camera-button-content: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);
 }
-
-.App {
-  height: 100vh;
-  width: 100vw;
-  overflow: hidden; 
-  background-color: var(--background); 
+.switch-camera-button-content:active {
+    transform: scale(1.03) rotate(0deg); 
 }
-
-.streaming-console { /* May not be used if SidePanel is removed */
-  display: flex;
-  flex-grow: 1;
-  overflow: hidden; 
+.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); 
+}
+.switch-camera-button-content:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    &:hover { // Prevent hover effects on disabled
+        transform: none;
+        box-shadow: 0 5px 10px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.08); 
+    }
+    svg:hover {
+        transform: none;
+    }
+}
+
 
-main {
-  flex-grow: 1;
-  display: flex;
-  flex-direction: column;
-  position: relative; 
-  overflow: hidden; /* Important for positioning Altair on top */
-  height: 100%; /* Ensure main takes full height for absolute positioning inside */
+/* Animations from Tailwind config */
+@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;
 }
 
-.main-app-area {
-  flex-grow: 1;
-  position: relative; /* For positioning Altair and video feed */
-  height: 100%;
+/* Altair chat window basic styling - adjust as needed */
+.altair-chat-container { // You'd wrap <Altair /> in a div with this class
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 90%;
+    max-width: 500px;
+    height: 70%;
+    max-height: 600px;
+    background-color: var(--background);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
+    z-index: 50; // Ensure it's above video but below modals/popovers
+    overflow: hidden; // Or auto if Altair itself doesn't scroll
+    display: flex; // If Altair component needs flex
+    flex-direction: column; // If Altair component needs flex
 }
 
-/* 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: 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 */
+body {
+    background-color: var(--background);
+    color: var(--foreground);
 }
 
-.dark div[class*="altair-chat-container"],
-.dark .altair-chat {
-  /* background: rgba(0,0,0,0.1); // For testing visibility in dark mode */
+/* Ensure material icons are available if you use them for connect/disconnect */
+/* You might need to import them in your index.html or main CSS file */
+/* e.g., <link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined" rel="stylesheet"> */
+.material-symbols-outlined {
+  font-variation-settings:
+  'FILL' 0, /* Change to 1 for filled icons if needed */
+  'wght' 400,
+  'GRAD' 0,
+  'opsz' 24
 }