src/App.scss

/* 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);
    --foreground: oklch(0.145 0 0);
    --popover: oklch(1 0 0);
    --popover-foreground: oklch(0.145 0 0);
    --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 */

     /* For mic pulse from original control-tray.scss */
    --volume: 0px;
}

.dark {
    --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%);
    --accent-red: #5C2129;
    --Blue-500: #1e40af;
}

@layer base {
    * { @apply border-border outline-ring/50; } /* Requires Tailwind */
    body { @apply bg-background text-foreground; overflow-x: hidden; } /* Requires Tailwind */
}

/* Notification Popover Wrapper & Content */
.notification-popover-wrapper {
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    width: calc(100% - 2rem);
    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;
}

.popover-content.open {
    opacity: 1;
    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;
    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 */
.header-controls {
    display: flex;
    padding: 1rem;
    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; border-radius: var(--radius-lg, 0.625rem);
    background-color: #e5e7eb; /* bg-gray-200 */
    cursor: pointer;
    transition: background-color 0.2s;
}
.header-button:hover {
    background-color: #d1d5db; /* bg-gray-300 */
}
.header-button svg { opacity: 0.7; stroke: #374151 /* gray-700 */; }

.dark .header-button {
    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); }


@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
}
.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;
    }
}
#mic-button:disabled:before, .mic-button.disabled:before { // If you add a disabled class
    background: rgba(0, 0, 0, 0);
}


/* Switch Camera Button Styles */
.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);
    box-shadow: 0 7px 15px rgba(0,0,0,0.18), 0 3px 6px rgba(0,0,0,0.12);
}
.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);
}
.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;
    }
}


/* Animations from Tailwind config */
/* CORRECTED KEYFRAMES */
@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;
}

/* 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
}

body {
    background-color: var(--background);
    color: var(--foreground);
}

/* 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
}