Upload 23 files

.dockerignore

@@ -0,0 +1,44 @@
+# Version control
+.git
+.gitignore
+.github
+
+# Environment variables
+.env
+.env.local
+.env.*
+.env.docker
+.env.docker.template
+
+# Node.js
+node_modules
+npm-debug.log
+yarn-debug.log
+yarn-error.log
+
+# Build outputs
+dist
+
+# Editor directories and files
+.vscode
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# OS specific
+.DS_Store
+Thumbs.db
+
+# Vercel
+.vercel
+.vercelignore
+
+# Trae
+.trae
+
+# Misc
+README.md
+LICENSE

.env

@@ -0,0 +1,2 @@
+GEMINI_API_KEY='AIzaSyBykzJhB4HiulHdEK248Sb1xwcTBmhlwIM'
+DATABASE_URL='postgresql://neondb_owner:npg_C68EwdfxDvru@ep-purple-snow-ad7h5sk9-pooler.c-2.us-east-1.aws.neon.tech/neondb?sslmode=require&channel_binding=require'

.env.docker.template

@@ -0,0 +1,12 @@
+# Environment variables for Docker deployment
+# Rename this file to .env.docker and fill in your values
+
+# API Keys
+GEMINI_API_KEY=your_api_key_here
+
+# Database
+DATABASE_URL=your_database_url_here
+
+# Application settings
+NODE_ENV=production
+PORT=3001

.env.local

@@ -0,0 +1,2 @@
+GEMINI_API_KEY='AIzaSyBykzJhB4HiulHdEK248Sb1xwcTBmhlwIM'
+DATABASE_URL='postgresql://neondb_owner:npg_C68EwdfxDvru@ep-purple-snow-ad7h5sk9-pooler.c-2.us-east-1.aws.neon.tech/neondb?sslmode=require&channel_binding=require'

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.vercelignore

@@ -0,0 +1,7 @@
+node_modules
+build
+dist
+.git
+.trae
+.log
+.figma

App.tsx

@@ -0,0 +1,82 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+*/
+/**
+ * Copyright 2024 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import ControlTray from './components/console/control-tray/ControlTray';
+import ErrorScreen from './components/demo/ErrorSreen';
+import KeynoteCompanion from './components/demo/keynote-companion/KeynoteCompanion';
+import Header from './components/Header';
+import UserSettings from './components/UserSettings';
+import AuthWrapper from './components/AuthWrapper';
+import { LiveAPIProvider } from './contexts/LiveAPIContext';
+import { AuthProvider } from './contexts/AuthContext';
+import { DatabaseProvider } from './contexts/DatabaseContext';
+import { useUI } from './lib/state';
+
+const API_KEY = process.env.GEMINI_API_KEY as string;
+if (!API_KEY) {
+  const errorElement = document.getElementById('root');
+  if(errorElement) {
+    errorElement.innerHTML = `<div style="font-family: sans-serif; padding: 2rem; text-align: center;"><h1>Configuration Error</h1><p>Missing required environment variable: GEMINI_API_KEY</p><p>Please ask the application administrator to configure this.</p></div>`;
+  }
+  throw new Error(
+    'Missing required environment variable: GEMINI_API_KEY'
+  );
+}
+
+/**
+ * Main application component that provides a streaming interface for Live API.
+ * Manages video streaming state and provides controls for webcam/screen capture.
+ */
+function AppContent() {
+  const { showUserConfig } = useUI();
+  return (
+    <div className="App">
+      <LiveAPIProvider apiKey={API_KEY}>
+        <ErrorScreen />
+        <Header />
+
+        {showUserConfig && <UserSettings />}
+        <div className="streaming-console">
+          <main>
+            <div className="main-app-area">
+              <KeynoteCompanion />
+            </div>
+
+            <ControlTray></ControlTray>
+          </main>
+        </div>
+      </LiveAPIProvider>
+    </div>
+  );
+}
+
+function App() {
+  return (
+    <DatabaseProvider>
+      <AuthProvider>
+        <AuthWrapper>
+          <AppContent />
+        </AuthWrapper>
+      </AuthProvider>
+    </DatabaseProvider>
+  );
+}
+
+export default App;

Dockerfile

@@ -1,11 +1,15 @@
 # Build stage
 FROM node:18-alpine AS build
 
+# Set build arguments
+ARG NODE_ENV=production
+ENV NODE_ENV=${NODE_ENV}
+
 WORKDIR /app
 
 # Copy package files and install dependencies
 COPY package*.json ./
-RUN npm ci
+RUN npm ci --no-audit --no-fund
 
 # Copy source code
 COPY . .
@@ -18,12 +22,15 @@ FROM node:18-alpine
 
 WORKDIR /app
 
+# Install wget for health check and other utilities
+RUN apk --no-cache add wget curl
+
 # Create a non-root user
 RUN addgroup -S appgroup && adduser -S appuser -G appgroup
 
 # Copy only production dependencies
 COPY package*.json ./
-RUN npm ci --only=production
+RUN npm ci --only=production --no-audit --no-fund
 
 # Copy built application from build stage
 COPY --from=build /app/dist ./dist
@@ -43,6 +50,10 @@ RUN mkdir -p /app/config
 # Expose the port
 EXPOSE 3001
 
+# Add health check
+HEALTHCHECK --interval=30s --timeout=10s --start-period=40s --retries=3 \
+  CMD wget --no-verbose --tries=1 --spider http://localhost:3001/health || exit 1
+
 # Switch to non-root user
 USER appuser
 

LICENSE

@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

README.md

@@ -1,10 +1,70 @@
 ---
-title: New React
-emoji: 💻
-colorFrom: red
-colorTo: purple
+title: Final Alif Implementation
+emoji: 🚀
+colorFrom: blue
+colorTo: green
 sdk: docker
-pinned: false
+app_port: 3001
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Final Alif Implementation
+
+A Node.js application with React frontend.
+
+## Docker Deployment
+
+### Using Docker
+
+1. Build the Docker image:
+   ```bash
+   docker build -t final-alif-implementation .
+   ```
+
+2. Run the container:
+   ```bash
+   docker run -p 3001:3001 \
+     -e GEMINI_API_KEY=your_api_key \
+     -e DATABASE_URL=your_database_url \
+     final-alif-implementation
+   ```
+
+### Using Docker Compose
+
+1. Create a `.env.docker` file from the template:
+   ```bash
+   # On Windows
+   copy .env.docker.template .env.docker
+   
+   # On Linux/Mac
+   cp .env.docker.template .env.docker
+   ```
+
+2. Edit the `.env.docker` file with your environment variables
+
+3. Run with Docker Compose:
+   ```bash
+   docker-compose up -d
+   ```
+   
+   Or use the provided deployment scripts:
+   ```bash
+   # On Windows
+   .\docker-deploy.bat
+   
+   # On Linux/Mac
+   ./docker-deploy.sh
+   ```
+
+4. Access the application at http://localhost:3001
+
+## Development
+
+1. Install dependencies:
+   ```bash
+   npm install
+   ```
+
+2. Run the development server:
+   ```bash
+   npm run dev
+   ```

docker-compose.yml

@@ -0,0 +1,23 @@
+version: '3.8'
+
+services:
+  app:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    ports:
+      - "3001:3001"
+    environment:
+      - NODE_ENV=production
+      - PORT=3001
+    # Environment variables from file
+    env_file:
+      - .env.docker
+    restart: unless-stopped
+    # For production, consider adding healthcheck
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:3001/health"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 40s

docker-deploy.bat

@@ -0,0 +1,23 @@
+@echo off
+REM Docker deployment script for Final Alif Implementation
+
+REM Check if .env.docker exists
+IF NOT EXIST .env.docker (
+  echo Creating .env.docker file...
+  echo # Add your environment variables below > .env.docker
+  echo GEMINI_API_KEY=your_api_key >> .env.docker
+  echo DATABASE_URL=your_database_url >> .env.docker
+  echo .env.docker created. Please edit it with your actual environment variables.
+  exit /b 1
+)
+
+REM Build the Docker image
+echo Building Docker image...
+docker build -t final-alif-implementation .
+
+REM Run with Docker Compose
+echo Starting application with Docker Compose...
+docker-compose up -d
+
+echo Application deployed! Access it at http://localhost:3001
+echo Check logs with: docker-compose logs -f

docker-deploy.sh

@@ -0,0 +1,24 @@
+#!/bin/bash
+
+# Docker deployment script for Final Alif Implementation
+
+# Check if .env.docker exists
+if [ ! -f ".env.docker" ]; then
+  echo "Creating .env.docker file..."
+  echo "# Add your environment variables below" > .env.docker
+  echo "GEMINI_API_KEY=your_api_key" >> .env.docker
+  echo "DATABASE_URL=your_database_url" >> .env.docker
+  echo ".env.docker created. Please edit it with your actual environment variables."
+  exit 1
+fi
+
+# Build the Docker image
+echo "Building Docker image..."
+docker build -t final-alif-implementation .
+
+# Run with Docker Compose
+echo "Starting application with Docker Compose..."
+docker-compose up -d
+
+echo "Application deployed! Access it at http://localhost:3001"
+echo "Check logs with: docker-compose logs -f"

drizzle.config.ts

@@ -0,0 +1,10 @@
+import type { Config } from "drizzle-kit";
+
+export default {
+  schema: "./lib/db.ts",
+  out: "./drizzle",
+  dialect: "postgresql",
+  dbCredentials: {
+    connectionString: process.env.DATABASE_URL!,
+  },
+} satisfies Config;

index.css

@@ -0,0 +1,1342 @@
+body {
+  margin: 0;
+  font-family:
+    'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family:
+    source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+}
+
+:root {
+  --font-family: 'Nunito', sans-serif;
+
+  /* Theme Colors */
+  --bg-main: #fffaf0; /* Floral White */
+  --bg-secondary: #ffffff;
+  --text-primary: #5d4037; /* Brownish */
+  --text-secondary: #8d6e63;
+  --border-color: #d7ccc8;
+  --shadow-color: rgba(93, 64, 55, 0.1);
+
+  --accent-blue: #81d4fa;
+  --accent-green: #a5d6a7;
+  --accent-red: #ef9a9a;
+  --accent-yellow: #fff59d;
+  --accent-purple: #ce93d8;
+
+  --button-primary-bg: #4db6ac; /* Teal */
+  --button-primary-text: white;
+  --button-primary-hover: #26a69a;
+  --button-secondary-bg: #f5f5f5;
+  --button-secondary-text: var(--text-primary);
+  --button-secondary-hover: #eeeeee;
+
+
+  --mic-active: #ff7043; /* Deep Orange */
+  --mic-inactive: #bcaaa4;
+
+  /* Original variables (some might be unused now) */
+  --text: var(--text-primary);
+  --gray-200: #e0e0e0;
+  --gray-300: #bdbdbd;
+  --gray-500: #9e9e9e;
+  --gray-600: #757575;
+  --gray-700: #616161;
+  --gray-800: #424242;
+  --gray-900: #212121;
+  --gray-1000: #000000;
+  --border-stroke: var(--border-color);
+  --background: var(--bg-main);
+  --color: var(--text-primary);
+  scrollbar-color: var(--gray-500) var(--bg-main);
+  scrollbar-width: thin;
+
+  --card-border-radius: 24px;
+  --breakpoint-md: 768px;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: var(--font-family);
+  background: var(--bg-main);
+  color: var(--text-primary);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: 700;
+  color: var(--text-primary);
+}
+
+li {
+  list-style: none;
+}
+
+input,
+textarea {
+  font-family: var(--font-family);
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+  border: 1px solid var(--border-color);
+  outline: none;
+  font-size: 16px;
+  resize: none;
+  -webkit-user-select: text;
+  user-select: text;
+  border-radius: 12px;
+  padding: 12px;
+}
+
+input::placeholder,
+textarea::placeholder {
+  user-select: none;
+  color: var(--text-secondary);
+}
+
+select {
+  font-family: inherit;
+  padding: 10px;
+  border: 1px solid var(--border-color);
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+  border-radius: 12px;
+  font-size: 16px;
+  cursor: pointer;
+  accent-color: var(--button-primary-bg);
+}
+
+select:focus-visible {
+  outline: 2px solid var(--button-primary-bg);
+}
+
+button {
+  font-family: var(--font-family);
+  background: none;
+  color: var(--text-primary);
+  border: none;
+  font-size: 16px;
+  font-weight: 700;
+  cursor: pointer;
+  user-select: none;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  border-radius: 12px;
+  padding: 10px 15px;
+  transition: all 0.2s ease-in-out;
+}
+
+button.primary {
+  background: var(--button-primary-bg);
+  color: var(--button-primary-text);
+}
+button.primary:hover {
+  background: var(--button-primary-hover);
+}
+button.icon {
+  font-size: 1.2em;
+}
+
+.button {
+  background: var(--button-secondary-bg);
+  color: var(--button-secondary-text);
+  display: inline-flex;
+  padding: 10px;
+  border-radius: 12px;
+  gap: 4px;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+}
+.button:hover {
+    background: var(--button-secondary-hover);
+}
+
+
+.button .icon {
+  font-size: 1.2em;
+}
+
+button:focus {
+  outline: none;
+}
+
+button:focus-visible {
+  box-shadow: 0 0 0 3px var(--accent-blue);
+}
+
+button[disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+button .icon {
+  display: block;
+}
+
+.icon {
+  font-family: 'Material Symbols Outlined';
+  font-weight: 300;
+  line-height: 1;
+}
+
+.hidden {
+  display: none;
+}
+
+header {
+  padding: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: fixed;
+  width: 100%;
+  z-index: 999;
+}
+
+.streaming-console {
+  background: transparent;
+  color: var(--text-secondary);
+  display: flex;
+  height: 100vh;
+  width: 100vw;
+}
+
+.streaming-console main {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex-grow: 1;
+  gap: 1rem;
+  max-width: 100%;
+  overflow: hidden;
+}
+.streaming-console .main-app-area {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  width: 100%;
+}
+
+.action-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--bg-secondary);
+  color: var(--mic-inactive);
+  font-size: 1.5rem;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  border: 2px solid var(--border-color);
+  user-select: none;
+  box-shadow: 0 4px 10px var(--shadow-color);
+}
+.action-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 15px var(--shadow-color);
+}
+.action-button:focus {
+  border: 2px solid var(--button-primary-bg);
+  outline: none;
+}
+.action-button.connected {
+  background: var(--mic-active);
+  color: white;
+  border-color: transparent;
+}
+
+.mic-button {
+  position: relative;
+  background-color: var(--mic-active);
+  z-index: 1;
+  color: white;
+  width: 80px;
+  height: 80px;
+  font-size: 2rem;
+  border-radius: 50%;
+}
+.mic-button.bot-speaking {
+  background-color: var(--mic-inactive);
+}
+
+.mic-button:focus {
+  border: none;
+  outline: 3px solid var(--accent-red);
+}
+.mic-button:hover {
+  background-color: #ff8a65;
+}
+.mic-button.bot-speaking:hover {
+  background-color: var(--mic-inactive);
+}
+
+.connect-button {
+  font-size: 1.5rem;
+  padding: 1rem 2rem;
+  border-radius: 99px;
+  background-color: var(--button-primary-bg);
+  color: var(--button-primary-text);
+}
+.connect-button:hover {
+    background-color: var(--button-primary-hover);
+}
+
+
+.control-tray {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translate(-50%, 0);
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  gap: 1.5rem;
+  padding: 1rem;
+  margin-bottom: 2rem;
+  background-color: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(10px);
+  border-radius: 99px;
+  box-shadow: 0 4px 20px var(--shadow-color);
+  z-index: 12;
+  transition: all 0.3s ease-in-out;
+}
+
+.control-tray.connected {
+    width: 80%;
+    max-width: 900px;
+    gap: 1rem;
+    padding: 1rem 1.5rem;
+    border-radius: 3rem;
+    align-items: center;
+}
+
+.caption-display {
+    flex-grow: 1;
+    text-align: center;
+    overflow: hidden;
+}
+
+.caption-display p {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--text-primary);
+    margin: 0;
+    opacity: 0;
+    transform: translateY(10px);
+    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
+    white-space: normal;
+    line-height: 1.3;
+}
+
+.caption-display p.visible {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.end-session-button {
+    background-color: var(--accent-red);
+    color: white;
+    padding: 0.8rem 1.5rem;
+    border-radius: 99px;
+    flex-shrink: 0;
+}
+
+.end-session-button:hover {
+    background-color: #d32f2f;
+}
+
+
+.control-tray .disabled .action-button,
+.control-tray .action-button.disabled {
+  background: #f5f5f5;
+  border: 2px solid #e0e0e0;
+  color: #bdbdbd;
+  box-shadow: none;
+}
+
+.actions-nav {
+  background: transparent;
+  border: none;
+  display: inline-flex;
+  align-items: center;
+  transition: all 0.6s ease-in;
+}
+
+/* Modal */
+.modalShroud {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
+  background: rgba(93, 64, 55, 0.3);
+  backdrop-filter: blur(5px);
+}
+
+.modalShroud .modal {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--card-border-radius);
+  padding: 40px;
+  position: relative;
+  width: 100%;
+  box-shadow: 0 10px 30px var(--shadow-color);
+}
+@media (min-width: 768px) {
+  .modalShroud .modal {
+    max-width: 500px;
+  }
+}
+.modalShroud .modal {
+  max-height: 80vh;
+  overflow: auto;
+  margin: 20px;
+}
+
+.modalClose {
+  position: absolute;
+  top: 15px;
+  right: 15px;
+  color: var(--text-secondary);
+  font-size: 30px;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  justify-content: center;
+  padding: 0;
+}
+.modalClose:hover {
+  background-color: #f5f5f5;
+  color: var(--text-primary);
+}
+
+/* UserSettings */
+.userSettings {
+  max-width: 480px;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  text-align: center;
+}
+.userSettings h2 {
+  font-size: 24px;
+  margin-bottom: 0;
+}
+
+.userSettings p {
+  font-size: 16px;
+  line-height: 1.6;
+  color: var(--text-secondary);
+}
+@media (min-width: 768px) {
+  .userSettings p {
+    font-size: 18px;
+  }
+}
+
+.userSettings form {
+  margin-top: 10px;
+  padding-top: 10px;
+  text-align: left;
+}
+.userSettings form .divider {
+  height: 1px;
+  background-color: var(--border-color);
+  margin: 20px 0;
+}
+form > div p {
+  font-weight: 700;
+  color: var(--text-primary);
+  font-size: 14px;
+}
+
+.userSettingsButton {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--text-secondary);
+  transition: all 0.3s;
+  font-size: 16px;
+  background-color: var(--bg-secondary);
+  padding: 8px 16px;
+  border-radius: 99px;
+  box-shadow: 0 2px 8px var(--shadow-color);
+}
+@media (min-width: 768px) {
+  .userSettingsButton {
+    font-size: 18px;
+  }
+}
+
+.userSettingsButton .user-name {
+  display: block;
+}
+
+.userSettingsButton .icon {
+  font-size: 24px;
+}
+
+.sticky-header {
+  position: -webkit-sticky; /* Safari */
+  position: sticky;
+  top: 0;
+  background-color: var(--bg-main);
+  border-bottom: 1px solid var(--border-color);
+  box-shadow: 0 2px 4px var(--shadow-color);
+}
+
+.userSettingsButton:hover {
+  color: var(--text-primary);
+  box-shadow: 0 4px 12px var(--shadow-color);
+}
+
+/* Form */
+form {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+form .largeInput {
+  font-size: 16px;
+  border-bottom: 1px solid var(--border-color);
+  border-radius: 0;
+  background: transparent;
+  border-left: none;
+  border-right: none;
+  border-top: none;
+}
+@media (min-width: 768px) {
+  form .largeInput {
+    font-size: 28px;
+  }
+}
+
+form > div,
+form label {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  user-select: none;
+}
+
+form input,
+form textarea {
+  font-size: 14px;
+  line-height: 1.4;
+}
+@media (min-width: 768px) {
+  form input,
+  form textarea {
+    font-size: 18px;
+  }
+}
+
+form input:focus,
+form textarea:focus {
+  border-color: var(--button-primary-bg);
+  box-shadow: 0 0 0 3px rgba(77, 182, 172, 0.3);
+  background: white;
+}
+
+form textarea {
+  resize: none;
+}
+
+form button.primary {
+  margin-top: 10px;
+  padding: 15px;
+  font-size: 18px;
+}
+
+/* agenst */
+.roomInfo {
+  position: relative;
+}
+
+.roomInfo h1 {
+  font-size: 22px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  opacity: 0.8;
+  transition: all 0.2s;
+  text-align: left;
+  color: var(--text-primary);
+}
+@media (min-width: 768px) {
+  .roomInfo h1 {
+    font-size: 28px;
+  }
+}
+
+.roomInfo h1:hover,
+.roomInfo h1.active {
+  opacity: 1;
+}
+
+.roomList {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  position: absolute;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  padding: 20px;
+  border-radius: var(--card-border-radius);
+  width: 300px;
+  margin-top: 10px;
+  opacity: 0;
+  pointer-events: none;
+  transition: all 0.1s;
+  user-select: none;
+  max-height: 70vh;
+  overflow: auto;
+  box-shadow: 0 5px 20px var(--shadow-color);
+}
+
+.roomList.active {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.roomList h3 {
+  font-size: 16px;
+  font-weight: 700;
+  margin-bottom: 10px;
+  color: var(--text-secondary);
+}
+
+.roomList ul {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  border-bottom: 1px solid var(--border-color);
+  padding-bottom: 15px;
+  margin-bottom: 5px;
+}
+
+.roomList li {
+  font-size: 20px;
+}
+
+.roomList li button {
+  color: var(--text-secondary);
+  transition: all 0.2s;
+  width: 100%;
+  justify-content: flex-start;
+  padding: 10px;
+}
+
+.roomList li.active button,
+.roomList li:hover button {
+  color: var(--text-primary);
+  background-color: var(--bg-main);
+}
+
+.error-screen {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100dvh;
+  width: 100%;
+  background: var(--bg-main);
+  color: var(--text-primary);
+  gap: 48px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 99991;
+}
+
+.error-screen .error-message-container,
+.error-screen .error-raw-message-container {
+  width: 100%;
+  text-align: center;
+  max-width: 650px;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+.error-screen .close-button {
+  color: var(--text-primary);
+  font-size: 24px;
+}
+
+/* Remove unused styles for simplicity */
+.agentPreview,
+.editAgent,
+.voicePicker,
+.colorPicker {
+  display: none;
+}
+
+.keynote-companion {
+  align-items: center;
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  position: relative;
+  width: 100%;
+  z-index: 1;
+}
+
+.keynote-companion .basic-face-container {
+  position: relative;
+  z-index: 5;
+  transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.keynote-companion .basic-face {
+  box-shadow: 0px 10px 30px var(--shadow-color);
+  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+/* "Thinking" animation for the face */
+.basic-face-container.generating .basic-face {
+  animation: pulse-shadow 2s infinite;
+}
+
+@keyframes pulse-shadow {
+  0%,
+  100% {
+    box-shadow: 0px 10px 30px var(--shadow-color);
+  }
+  50% {
+    box-shadow: 0px 15px 45px var(--accent-blue);
+  }
+}
+
+/* When images are visible, move face to the side */
+.keynote-companion.images-visible .basic-face-container {
+  position: absolute;
+  bottom: 20px;
+  left: 20px;
+  transform: scale(0.6);
+  transform-origin: bottom left;
+}
+
+/* AuthWrapper Styles */
+.auth-loading-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  background: linear-gradient(135deg, #dbeafe 0%, #e0e7ff 100%);
+}
+
+.auth-loading-content {
+  text-align: center;
+}
+
+.auth-spinner {
+  width: 48px;
+  height: 48px;
+  border: 2px solid transparent;
+  border-bottom: 2px solid #2563eb;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin: 0 auto 16px;
+}
+
+.auth-loading-text {
+  font-size: 18px;
+  color: #374151;
+  font-weight: 500;
+}
+
+.auth-signin-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  background: linear-gradient(135deg, #dbeafe 0%, #e0e7ff 50%, #ede9fe 100%);
+}
+
+.auth-signin-card {
+  background: white;
+  padding: 40px;
+  border-radius: 16px;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  text-align: center;
+  max-width: 448px;
+  width: 100%;
+  margin: 16px;
+  border: 1px solid #f3f4f6;
+}
+
+.auth-logo-container {
+  margin-bottom: 32px;
+}
+
+.auth-logo {
+  width: 64px;
+  height: 64px;
+  background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 16px;
+}
+
+.auth-logo svg {
+  width: 32px;
+  height: 32px;
+  color: white;
+}
+
+.auth-title {
+  font-size: 30px;
+  font-weight: bold;
+  color: #111827;
+  margin-bottom: 8px;
+}
+
+.auth-subtitle {
+  color: #6b7280;
+  font-size: 18px;
+}
+
+.auth-signin-content {
+  margin-bottom: 24px;
+}
+
+.auth-signin-text {
+  color: #374151;
+  margin-bottom: 16px;
+}
+
+.auth-error {
+  background: #fef2f2;
+  border: 1px solid #fecaca;
+  color: #dc2626;
+  padding: 12px 16px;
+  border-radius: 8px;
+  margin-bottom: 16px;
+  font-size: 14px;
+}
+
+.auth-warning {
+  background: #fffbeb;
+  border: 1px solid #fed7aa;
+  color: #d97706;
+  padding: 12px 16px;
+  border-radius: 8px;
+  margin-bottom: 16px;
+  font-size: 14px;
+}
+
+.auth-google-button {
+  width: 100%;
+  background: white;
+  border: 2px solid #d1d5db;
+  color: #374151;
+  font-weight: 600;
+  padding: 12px 24px;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+}
+
+.auth-google-button:hover {
+  background: #f9fafb;
+  border-color: #9ca3af;
+}
+
+.auth-google-button:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
+}
+
+.auth-google-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.auth-button-spinner {
+  width: 20px;
+  height: 20px;
+  border: 2px solid transparent;
+  border-bottom: 2px solid #4b5563;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+.auth-google-icon {
+  width: 20px;
+  height: 20px;
+}
+
+.auth-terms {
+  margin-top: 24px;
+  font-size: 12px;
+  color: #6b7280;
+}
+
+.auth-header {
+  background: white;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.auth-header-content {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 0 16px;
+}
+
+.auth-header-inner {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 0;
+}
+
+.auth-brand {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.auth-brand-logo {
+  width: 40px;
+  height: 40px;
+  background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.auth-brand-logo svg {
+  width: 24px;
+  height: 24px;
+  color: white;
+}
+
+.auth-brand-text {
+  font-size: 20px;
+  font-weight: bold;
+  color: #111827;
+}
+
+.auth-user-section {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.auth-warning-indicator {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #d97706;
+}
+
+.auth-warning-indicator svg {
+  width: 16px;
+  height: 16px;
+}
+
+.auth-warning-text {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.auth-user-info {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  background: #f9fafb;
+  border-radius: 8px;
+  padding: 8px 12px;
+}
+
+.auth-user-avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  border: 2px solid white;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+}
+
+.auth-user-details {
+  text-align: left;
+}
+
+.auth-user-name {
+  font-size: 14px;
+  font-weight: 500;
+  color: #111827;
+}
+
+.auth-user-email {
+  font-size: 12px;
+  color: #6b7280;
+}
+
+.auth-logout-button {
+  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+  color: white;
+  font-weight: 500;
+  padding: 8px 16px;
+  border-radius: 8px;
+  font-size: 14px;
+  cursor: pointer;
+  border: none;
+  transition: all 0.2s;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+}
+
+.auth-logout-button:hover {
+  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
+
+.auth-logout-button:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px #ef4444, 0 0 0 4px rgba(239, 68, 68, 0.1);
+}
+
+.auth-main-container {
+  min-height: 100vh;
+  background: #f9fafb;
+}
+
+.auth-content {
+  flex: 1;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (min-width: 640px) {
+  .auth-header-content {
+    padding: 0 24px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .auth-header-content {
+    padding: 0 32px;
+  }
+}
+
+/* Clean up unnecessary old styles that are not in the provided files */
+.control-tray .connection-container,
+.top,
+.roomDescription,
+.createButton,
+.deleteRoomButton,
+.roomList .newRoomButton,
+.counter-container,
+.streaming-console .function-call,
+.actions-nav > *,
+.mic-button:before,
+.connect-toggle:not(.connected) {
+  display: none !important;
+}
+
+.actions-nav {
+  padding: 0;
+  gap: 0;
+}
+
+.control-tray {
+  padding: 1rem;
+}
+
+/* Loading Indicator */
+.loading-indicator {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.loading-indicator.large {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  align-items: center;
+  color: var(--text-secondary);
+  font-size: 1.2rem;
+  font-weight: 700;
+}
+
+.loading-indicator.large .spinner {
+  width: 80px;
+  height: 80px;
+  border-width: 6px;
+}
+
+.spinner {
+  width: 60px;
+  height: 60px;
+  border: 5px solid rgba(93, 64, 55, 0.2);
+  border-top-color: var(--text-primary);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Image Collage Styles */
+.image-collage-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 2; /* Sits above the slideshow but below UI elements */
+  display: grid;
+  grid-template-columns: repeat(10, 1fr);
+  grid-template-rows: repeat(10, 1fr);
+  gap: 8px;
+  background-color: var(--bg-main);
+  overflow: hidden;
+}
+
+.collage-item {
+  overflow: hidden;
+  border-radius: 12px;
+  box-shadow: 0 4px 15px var(--shadow-color);
+  transition: transform 0.3s ease-in-out;
+  animation: fade-in 0.5s ease-out forwards;
+  opacity: 0;
+}
+
+@keyframes fade-in {
+    to { opacity: 1; }
+}
+
+
+.collage-item:hover {
+    transform: scale(1.05) !important;
+    z-index: 10;
+}
+
+.collage-item img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* Quiz Styles */
+.quiz-container {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90%;
+  max-width: 700px;
+  background: rgba(255, 255, 255, 0.85);
+  backdrop-filter: blur(10px);
+  border-radius: var(--card-border-radius);
+  padding: 2rem;
+  box-shadow: 0 8px 32px 0 var(--shadow-color);
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  z-index: 10;
+}
+
+.quiz-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1.5rem;
+  border-bottom: 2px solid var(--border-color);
+  padding-bottom: 1rem;
+}
+
+.quiz-header h2 {
+  font-size: 2rem;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.quiz-score {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: var(--text-secondary);
+  background: var(--bg-main);
+  padding: 0.5rem 1rem;
+  border-radius: 99px;
+}
+
+.quiz-score span {
+  color: var(--text-primary);
+}
+
+.quiz-card {
+  text-align: center;
+}
+
+.quiz-question {
+  font-size: 1.75rem;
+  font-weight: 700;
+  color: var(--text-primary);
+  line-height: 1.4;
+  margin-bottom: 2rem;
+}
+
+.quiz-options {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.quiz-options li {
+  background-color: var(--bg-secondary);
+  border: 2px solid var(--border-color);
+  border-radius: 12px;
+  padding: 1rem;
+  font-size: 1.25rem;
+  color: var(--text-secondary);
+  font-weight: 700;
+  transition: all 0.2s ease-in-out;
+}
+
+.quiz-option-button {
+  background-color: var(--bg-secondary);
+  border: 2px solid var(--border-color);
+  border-radius: 12px;
+  padding: 1rem;
+  font-size: 1.25rem;
+  color: var(--text-primary);
+  font-weight: 700;
+  transition: all 0.2s ease-in-out;
+  width: 100%;
+  text-align: left;
+  justify-content: flex-start;
+}
+
+.quiz-option-button:not(:disabled):hover {
+  border-color: var(--button-primary-bg);
+  color: var(--text-primary);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 10px var(--shadow-color);
+}
+
+.quiz-option-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+.quiz-option-button.selected.incorrect {
+  background-color: #ffebee; /* Light red */
+  border-color: var(--accent-red);
+  color: #c62828; /* Dark red */
+  opacity: 1;
+}
+
+.quiz-option-button.correct {
+  background-color: #e8f5e9; /* Light green */
+  border-color: var(--accent-green);
+  color: #2e7d32; /* Dark green */
+  opacity: 1;
+}
+
+.quiz-option-button.correct::after {
+  content: '✔';
+  margin-left: auto;
+  font-weight: bold;
+  color: #2e7d32;
+}
+.quiz-option-button.selected.incorrect::after {
+  content: '✖';
+  margin-left: auto;
+  font-weight: bold;
+  color: #c62828;
+}
+
+/* End Screen Styles */
+.end-screen-container {
+  position: relative;
+  z-index: 10;
+  background: rgba(255, 255, 255, 0.85);
+  backdrop-filter: blur(10px);
+  border-radius: var(--card-border-radius);
+  padding: 2.5rem;
+  box-shadow: 0 8px 32px 0 var(--shadow-color);
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  max-width: 500px;
+}
+
+.end-screen-container h2 {
+  font-size: 2.5rem;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.end-screen-container p {
+  font-size: 1.25rem;
+  color: var(--text-secondary);
+  margin-bottom: 1rem;
+}
+
+.end-screen-buttons {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  justify-content: center;
+}
+
+@media (min-width: 768px) {
+  .end-screen-buttons {
+    flex-direction: row;
+  }
+}
+
+
+.end-screen-buttons .button {
+  font-size: 1.1rem;
+  padding: 0.8rem 1.5rem;
+}

index.html

@@ -0,0 +1,45 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#FFFBEF" />
+    <meta name="description" content="Fun learning chatbots for kids" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,700;1,400;1,700&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="index.css" />
+    <title>Learning Friends</title>
+  <script type="importmap">
+{
+  "imports": {
+    "react/": "https://esm.sh/react@^19.1.0/",
+    "react": "https://esm.sh/react@^19.1.0",
+    "react-dom/": "https://esm.sh/react-dom@^19.1.0/",
+    "@google/genai": "https://esm.sh/@google/genai@^1.4.0",
+    "eventemitter3": "https://esm.sh/eventemitter3@^5.0.1",
+    "lodash": "https://esm.sh/lodash@^4.17.21",
+    "vite": "https://esm.sh/vite@^6.3.5",
+    "classnames": "https://esm.sh/classnames@^2.5.1",
+    "zustand": "https://esm.sh/zustand@^5.0.5",
+    "path": "https://esm.sh/path@^0.12.7"
+  }
+}
+</script>
+<link rel="stylesheet" href="/index.css">
+</head>
+
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script src="index.tsx" type="module"></script>
+  <script type="module" src="/index.tsx"></script>
+</body>
+</html>

index.tsx

@@ -0,0 +1,33 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+*/
+/**
+ * Copyright 2024 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+
+import App from './App';
+
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
+);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

metadata.json

@@ -0,0 +1,8 @@
+{
+  "name": "Final Alif implementation",
+  "description": "An interactive tool that allows you to design, test, and banter with custom AI characters on the fly.",
+  "requestFramePermissions": [
+    "microphone"
+  ],
+  "prompt": ""
+}

package.json

@@ -0,0 +1,44 @@
+{
+  "name": "final-alif-implementation",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "run-p dev:frontend dev:backend",
+    "dev:frontend": "vite",
+    "dev:backend": "node server.cjs",
+    "build": "vite build",
+    "preview": "vite preview",
+    "start": "node server.cjs",
+    "migrate": "drizzle-kit generate",
+    "db:migrate": "tsx scripts/migrate.ts"
+  },
+  "dependencies": {
+    "@google/genai": "^1.4.0",
+    "@neondatabase/serverless": "^1.0.1",
+    "@types/pg": "^8.15.5",
+    "@vitejs/plugin-react": "^5.0.2",
+    "classnames": "^2.5.1",
+    "cors": "^2.8.5",
+    "dotenv": "^17.2.1",
+    "drizzle-kit": "^0.31.4",
+    "drizzle-orm": "^0.44.5",
+    "eventemitter3": "^5.0.1",
+    "express": "^5.1.0",
+    "firebase": "^12.2.1",
+    "lodash": "^4.17.21",
+    "npm-run-all": "^4.1.5",
+    "path": "^0.12.7",
+    "pg": "^8.16.3",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "tsx": "^4.20.5",
+    "vite": "^6.3.5",
+    "zustand": "^5.0.5"
+  },
+  "devDependencies": {
+    "@types/node": "^22.14.0",
+    "typescript": "~5.8.2",
+    "vite": "^6.2.0"
+  }
+}

server.cjs

@@ -0,0 +1,37 @@
+// Load environment variables first
+require('dotenv').config({ path: '.env' });
+
+const express = require('express');
+const cors = require('cors');
+const path = require('path');
+
+const app = express();
+const PORT = process.env.PORT || 3001;
+
+// Serve static files from the React app
+app.use(express.static(path.join(__dirname, 'dist')));
+
+// Middleware
+app.use(cors());
+app.use(express.json());
+app.use((req, res, next) => {
+    res.setHeader('Cross-Origin-Opener-Policy', 'same-origin-allow-popups');
+    res.setHeader('Cross-Origin-Embedder-Policy', 'credentialless');
+    next();
+});
+
+// API routes
+app.use('/api/init', require('./api/init.cjs'));
+app.use('/api/users', require('./api/users.cjs'));
+app.use('/api/sessions', require('./api/sessions.cjs'));
+
+// Health check endpoint
+app.get('/health', (req, res) => {
+  res.json({ status: 'OK', timestamp: new Date().toISOString() });
+});
+
+// Start server
+app.listen(PORT, () => {
+  console.log(`Server running on port ${PORT}`);
+  console.log(`Health check: http://localhost:${PORT}/health`);
+});

tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "module": "ESNext",
+    "lib": [
+      "ES2022",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "skipLibCheck": true,
+    "types": [
+      "node"
+    ],
+    "moduleResolution": "bundler",
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "allowJs": true,
+    "jsx": "react-jsx",
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    },
+    "allowImportingTsExtensions": true,
+    "noEmit": true
+  }
+}

vercel.json

@@ -0,0 +1 @@
+{"rewrites":[{"source":"/(.*)","destination":"/index.html"}]}

vite.config.ts

@@ -0,0 +1,28 @@
+import path from 'path';
+import { defineConfig, loadEnv } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig(({ mode }) => {
+    const env = loadEnv(mode, '.', '');
+    return {
+      plugins: [react()],
+      define: {
+        'process.env.API_KEY': JSON.stringify(env.GEMINI_API_KEY),
+        'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY)
+      },
+      server: {
+        proxy: {
+          '/api': {
+            target: 'http://localhost:3001',
+            changeOrigin: true,
+            secure: false
+          }
+        }
+      },
+      resolve: {
+        alias: {
+          '@': path.resolve(__dirname, '.'),
+        }
+      }
+    };
+});