diff --git a/.cursor/scratchpad.md b/.cursor/scratchpad.md
index 3aab0b0e..f128fa87 100644
--- a/.cursor/scratchpad.md
+++ b/.cursor/scratchpad.md
@@ -1843,7 +1843,7 @@ class EmmaQuestionEngine {
 
 #### **EMMA BRANDING PRINCIPLES** 📐
 1. **Color Palette**: 
-   - Primary: `--emma-gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%)`
+   - Primary: `--emma-gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #deb3e4 100%)`
    - Background: `--emma-bg-gradient: linear-gradient(135deg, #1a1033 0%, #2d1b69 50%, #0f0c29 100%)`
    - Cards: `rgba(255, 255, 255, 0.05)` with `backdrop-filter: blur(20px)`
 
diff --git a/.force-cache-refresh-v2.txt b/.force-cache-refresh-v2.txt
deleted file mode 100644
index e44772da..00000000
--- a/.force-cache-refresh-v2.txt
+++ /dev/null
@@ -1,13 +0,0 @@
-EXTREME CACHE BUST v2.1
-Timestamp: 2025-08-22T22:58:00Z
-
-ISSUE: Render.com still serving cached gallery.js WITHOUT escapeHtml function
-ERROR: ReferenceError: escapeHtml is not defined at gallery.js:346
-
-VERIFIED LOCALLY:
-✅ escapeHtml function exists at line 1167
-✅ renderEmptyState function exists at line 1176  
-✅ createNewMemory function exists at line 1202
-✅ File passes syntax check
-
-RENDER.COM NEEDS TO SERVE THE ACTUAL FILE!
diff --git a/.force-rebuild-2025-08-22T16-00-13Z.txt b/.force-rebuild-2025-08-22T16-00-13Z.txt
deleted file mode 100644
index 72ab788e..00000000
--- a/.force-rebuild-2025-08-22T16-00-13Z.txt
+++ /dev/null
@@ -1,7 +0,0 @@
-FORCE REBUILD CACHE BUST
-Timestamp: 2025-08-22T16:00:13Z
-
-The memory-gallery-new.js file is CLEAN locally (1090 lines)
-But Render.com is serving stale cached version (1278+ lines with broken code)
-
-This file exists solely to force a fresh deployment.
diff --git a/.render-deploy-trigger b/.render-deploy-trigger
deleted file mode 100644
index 465bbe09..00000000
Binary files a/.render-deploy-trigger and /dev/null differ
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 3b664107..9e831e75 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,3 +1,4 @@
 {
-    "git.ignoreLimitWarning": true
+    "git.ignoreLimitWarning": true,
+    "chatgpt.openOnStartup": true
 }
\ No newline at end of file
diff --git a/_headers b/_headers
index d1d1baa9..ced56644 100644
--- a/_headers
+++ b/_headers
@@ -41,4 +41,4 @@
   Referrer-Policy: strict-origin-when-cross-origin
   X-Frame-Options: DENY
   Permissions-Policy: microphone=(self), geolocation=(), camera=()
-  Content-Security-Policy-Report-Only: default-src 'self'; base-uri 'self'; object-src 'none'; frame-ancestors 'none'; img-src 'self' data: blob:; media-src 'self' blob:; font-src 'self' https://fonts.gstatic.com data:; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdn.jsdelivr.net https://unpkg.com https://*.onrender.com; connect-src 'self' https://*.onrender.com
\ No newline at end of file
+  Content-Security-Policy-Report-Only: default-src 'self'; base-uri 'self'; object-src 'none'; frame-ancestors 'none'; img-src 'self' data: blob:; media-src 'self' blob:; font-src 'self' https://fonts.gstatic.com data:; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdn.jsdelivr.net https://unpkg.com https://*.onrender.com; connect-src 'self' https://*.onrender.com
diff --git a/add-person.html b/add-person.html
index d7c728a7..e51ce98d 100644
--- a/add-person.html
+++ b/add-person.html
@@ -4,7 +4,11 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Add Person - Emma</title>
+  <link rel="stylesheet" href="css/theme-tokens.css">
   <link rel="stylesheet" href="css/main.css">
+  <script src="themes/theme-catalog.js"></script>
+  <script src="js/theme-manager.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="js/sanitize.js"></script>
   <style>
     .add-person-container {
       max-width: 600px;
@@ -149,7 +153,7 @@ <h1>Add New Person</h1>
       </div>
 
       <div class="success-message" id="successMessage">
-        Person added successfully! <a href="people.html">View all people</a>
+        Person added successfully! <a href="pages/people-emma.html">View all people</a>
       </div>
 
       <form id="addPersonForm" onsubmit="addPerson(event)">
@@ -194,10 +198,23 @@ <h1>Add New Person</h1>
     </div>
   </div>
 
-  <script type="module">
+  <script nonce="c3RhdGljLWlubGluZQ==" type="module">
     // Import identity crypto functions
     import { generateIdentity, generateIdentityCard } from './js/vault/identity-crypto.js';
     
+    const sanitize = (value) => {
+      const fallback = (input) => String(input ?? '')
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+      if (typeof window !== 'undefined' && typeof window.escapeHtml === 'function') {
+        return window.escapeHtml(value ?? '');
+      }
+      return fallback(value);
+    };
+
     // Add person functionality
     async function addPerson(event) {
       event.preventDefault();
@@ -253,17 +270,23 @@ <h1>Add New Person</h1>
         
         // Show success message with identity info
         const successMessage = document.getElementById('successMessage');
-        successMessage.innerHTML = `
-          <p><strong>✅ ${newPerson.name} added successfully!</strong></p>
-          ${newPerson.relationship === 'self' ? `
-            <div style="margin-top: 10px; padding: 10px; background: rgba(134, 88, 255, 0.1); border-radius: 8px;">
-              <p style="margin: 0 0 5px 0;"><strong>🔐 Cryptographic Identity Created</strong></p>
-              <p style="margin: 0; font-size: 12px;">Fingerprint: <code>${identity.fingerprint.substring(0, 20)}...</code></p>
-              <button onclick="window.open('people.html', '_self')" style="margin-top: 10px; padding: 5px 10px; background: #8658ff; color: white; border: none; border-radius: 4px; cursor: pointer;">
+        const safeName = sanitize(newPerson.name);
+        const rawFingerprint = identity?.fingerprint || '';
+        const truncatedFingerprint = rawFingerprint ? `${sanitize(rawFingerprint.substring(0, 20))}${rawFingerprint.length > 20 ? '...' : ''}` : 'N/A';
+        const identityDetails = newPerson.relationship === 'self'
+          ? `
+            <div style="margin-top: 10px; padding: 10px; background: rgba(111, 99, 217, 0.1); border-radius: 8px;">
+              <p style="margin: 0 0 5px 0;"><strong>Cryptographic Identity Created</strong></p>
+              <p style="margin: 0; font-size: 12px;">Fingerprint: <code>${truncatedFingerprint}</code></p>
+              <button onclick="window.open('pages/people-emma.html', '_self')" style="margin-top: 10px; padding: 5px 10px; background: #6f63d9; color: white; border: none; border-radius: 4px; cursor: pointer;">
                 View in People List
               </button>
             </div>
-          ` : ''}
+          `
+          : '';
+        successMessage.innerHTML = `
+          <p><strong>${safeName} added successfully!</strong></p>
+          ${identityDetails}
         `;
         successMessage.style.display = 'block';
         document.getElementById('addPersonForm').reset();
@@ -324,7 +347,7 @@ <h1>Add New Person</h1>
       if (window.history.length > 1) {
         window.history.back();
       } else {
-        window.location.href = 'people.html';
+        window.location.href = 'pages/people-emma.html';
       }
     }
     
@@ -334,4 +357,4 @@ <h1>Add New Person</h1>
     });
   </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/apps/emma-openai-app.js b/apps/emma-openai-app.js
new file mode 100644
index 00000000..a0eb0fc3
--- /dev/null
+++ b/apps/emma-openai-app.js
@@ -0,0 +1,110 @@
+'use strict';
+
+const VaultService = require('../lib/vault-service');
+const { TOOL_DEFINITIONS } = require('../lib/tool-definitions');
+
+const APP_NAME = 'Emma Memory Companion';
+const APP_DESCRIPTION = 'A gentle memory companion that can recall, capture, and enrich family stories with full vault access.';
+const APP_DEFAULT_MODEL = 'gpt-4.1-mini';
+const APP_INSTRUCTIONS = [
+  "You are Emma, a gentle memory companion designed to support families navigating dementia.",
+  "Introduce yourself as Emma and explain that you protect the family's private memory vault.",
+  "Use validation therapy techniques: acknowledge feelings, reflect emotions, and avoid correcting memories.",
+  "When helpful, call the available vault tools to look up people, recall memories, or save new stories with photos.",
+  "Be transparent about any tool calls and summarize the outcome for the user.",
+  "Keep every interaction private and never fabricate vault data."
+].join(' ');
+
+let appsSdk = null;
+try {
+  // Lazy load the Apps SDK if it is installed in the host environment.
+  appsSdk = require('@openai/applications');
+} catch (error) {
+  appsSdk = null;
+}
+
+function cloneParameters(parameters) {
+  return parameters ? JSON.parse(JSON.stringify(parameters)) : undefined;
+}
+
+function buildToolExecutor(vaultService, schema) {
+  return async (args = {}) => {
+    return vaultService.execute(schema.name, args);
+  };
+}
+
+function buildConfig(vaultService, options = {}) {
+  const model = options.model || APP_DEFAULT_MODEL;
+
+  return {
+    name: APP_NAME,
+    description: APP_DESCRIPTION,
+    instructions: options.instructions || APP_INSTRUCTIONS,
+    model,
+    tools: TOOL_DEFINITIONS.map((schema) => ({
+      name: schema.name,
+      description: schema.description,
+      parameters: cloneParameters(schema.parameters),
+      execute: buildToolExecutor(vaultService, schema)
+    }))
+  };
+}
+
+function createEmmaApp(options = {}) {
+  const vaultService = options.vaultService || new VaultService(options.vaultOptions || {});
+  const config = buildConfig(vaultService, options);
+
+  if (!appsSdk) {
+    return config;
+  }
+
+  if (typeof appsSdk.createApp === 'function') {
+    return appsSdk.createApp(config);
+  }
+
+  if (appsSdk.App && typeof appsSdk.tool === 'function') {
+    const { App, tool } = appsSdk;
+    return new App({
+      name: config.name,
+      description: config.description,
+      model: config.model,
+      instructions: config.instructions,
+      tools: config.tools.map((toolSchema) =>
+        tool({
+          name: toolSchema.name,
+          description: toolSchema.description,
+          parameters: toolSchema.parameters,
+          execute: toolSchema.execute
+        })
+      )
+    });
+  }
+
+  return config;
+}
+
+function getEmmaAppManifest(options = {}) {
+  const vaultService = options.vaultService || new VaultService(options.vaultOptions || {});
+  const config = buildConfig(vaultService, options);
+  return {
+    name: config.name,
+    description: config.description,
+    model: config.model,
+    instructions: config.instructions,
+    tools: config.tools.map(({ name, description, parameters }) => ({
+      type: 'function',
+      name,
+      description,
+      parameters
+    }))
+  };
+}
+
+module.exports = {
+  createEmmaApp,
+  getEmmaAppManifest,
+  APP_INSTRUCTIONS,
+  APP_NAME,
+  APP_DEFAULT_MODEL,
+  APP_DESCRIPTION
+};
diff --git a/chat.html b/chat.html
new file mode 100644
index 00000000..ce116899
--- /dev/null
+++ b/chat.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Emma - Chat</title>
+
+  <!-- Emma Vault System -->
+  <script src="js/emma-env.js"></script>
+  <script src="js/emma-logger.js"></script>
+  <script src="js/emma-input-modal.js"></script>
+  <script src="js/clean-password-modal.js"></script>
+  <script src="js/modal-helpers.js"></script>
+  <script src="js/emma-feature-flags.js"></script>
+  <script src="js/emma-vault-primary.js"></script>
+  <script src="js/emma-web-vault.js"></script>
+  <script src="js/web-vault-status.js"></script>
+
+  <link rel="stylesheet" href="css/emma-chat-clean.css">
+  <style>
+    body {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100vh;
+      background-color: #f0f0f0;
+    }
+    .chat-container {
+      width: 100%;
+      max-width: 600px;
+      height: 80vh;
+      display: flex;
+      flex-direction: column;
+    }
+  </style>
+</head>
+<body>
+  <div class="chat-container">
+    <div class="chat-messages" id="chat-messages">
+      <div id="welcome-message">
+        <h2>Welcome to Emma Chat</h2>
+        <p>Start a conversation below.</p>
+      </div>
+    </div>
+    <div id="typing-indicator" class="typing-indicator">
+      <span></span><span></span><span></span>
+    </div>
+    <div class="chat-input-area">
+      <textarea id="chat-input" placeholder="Talk to Emma..." onkeydown="emmaWsChat.handleKeyPress(event)"></textarea>
+      <button onclick="emmaWsChat.sendMessage()">Send</button>
+    </div>
+  </div>
+
+  <!-- Initialize Emma Web Vault -->
+  <script>
+    // Ensure Emma Web Vault is initialized before ws-chat.js uses it
+    (async function initializeVault() {
+      if (typeof EmmaWebVault === 'undefined') {
+        console.error('EmmaWebVault class not loaded!');
+        return;
+      }
+
+      if (!window.emmaWebVault) {
+        window.emmaWebVault = new EmmaWebVault();
+        console.log('✓ EmmaWebVault initialized for chat interface');
+      }
+    })();
+  </script>
+
+  <script src="js/ws-chat.js"></script>
+</body>
+</html>
diff --git a/css/content.css b/css/content.css
deleted file mode 100644
index cc843d21..00000000
--- a/css/content.css
+++ /dev/null
@@ -1,349 +0,0 @@
-/* Emma Lite - Content Script Styles */
-
-/* Emma Brand Colors */
-:root {
-  --emma-gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
-  --emma-gradient-2: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #a855f7 100%);
-  --emma-purple: #764ba2;
-  --emma-pink: #f093fb;
-  --emma-dark: #1a1033;
-  --emma-glass: rgba(26, 16, 51, 0.9);
-  --emma-border: rgba(255, 255, 255, 0.1);
-  --emma-text: #ffffff;
-  --emma-text-secondary: rgba(255, 255, 255, 0.7);
-}
-
-/* Emma Capture Button (Floating) */
-.emma-capture-button {
-  position: fixed;
-  bottom: 24px;
-  right: 24px;
-  width: 56px;
-  height: 56px;
-  background: var(--emma-gradient-1);
-  border: none;
-  border-radius: 50%;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 24px;
-  color: white;
-  box-shadow: 0 8px 32px rgba(118, 75, 162, 0.4);
-  transition: all 0.3s ease;
-  z-index: 9999;
-  overflow: hidden;
-}
-
-.emma-capture-button::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: rgba(255, 255, 255, 0.2);
-  transform: scale(0);
-  border-radius: 50%;
-  transition: transform 0.6s ease;
-}
-
-.emma-capture-button:hover {
-  transform: translateY(-4px);
-  box-shadow: 0 12px 40px rgba(118, 75, 162, 0.5);
-}
-
-.emma-capture-button:hover::before {
-  transform: scale(1);
-}
-
-.emma-capture-button:active {
-  transform: translateY(-2px);
-}
-
-/* Emma Badge (Shows capture count) */
-.emma-badge {
-  position: absolute;
-  top: -4px;
-  right: -4px;
-  background: #f093fb;
-  color: white;
-  font-size: 11px;
-  font-weight: 600;
-  padding: 2px 6px;
-  border-radius: 10px;
-  min-width: 20px;
-  text-align: center;
-  box-shadow: 0 2px 8px rgba(240, 147, 251, 0.4);
-}
-
-/* Emma Notification */
-.emma-notification {
-  position: fixed;
-  top: 24px;
-  right: 24px;
-  max-width: 360px;
-  background: var(--emma-glass);
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
-  border: 1px solid var(--emma-border);
-  border-radius: 16px;
-  padding: 20px;
-  color: var(--emma-text);
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-  font-size: 14px;
-  line-height: 1.5;
-  box-shadow: 0 12px 48px rgba(26, 16, 51, 0.6);
-  transform: translateX(400px);
-  opacity: 0;
-  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-  z-index: 10000;
-}
-
-.emma-notification::before {
-  content: '';
-  position: absolute;
-  inset: -1px;
-  background: var(--emma-gradient-1);
-  border-radius: 16px;
-  opacity: 0.5;
-  z-index: -1;
-  filter: blur(20px);
-}
-
-.emma-notification-show {
-  transform: translateX(0);
-  opacity: 1;
-}
-
-.emma-notification-header {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  margin-bottom: 12px;
-}
-
-.emma-notification-icon {
-  width: 40px;
-  height: 40px;
-  background: var(--emma-gradient-1);
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 20px;
-  flex-shrink: 0;
-}
-
-.emma-notification-title {
-  font-size: 16px;
-  font-weight: 600;
-  background: linear-gradient(135deg, #fff 0%, rgba(255, 255, 255, 0.8) 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
-
-.emma-notification-message {
-  color: var(--emma-text-secondary);
-  margin-bottom: 16px;
-}
-
-.emma-notification-actions {
-  display: flex;
-  gap: 12px;
-}
-
-.emma-notification-button {
-  flex: 1;
-  background: rgba(255, 255, 255, 0.1);
-  border: 1px solid var(--emma-border);
-  border-radius: 8px;
-  padding: 8px 16px;
-  color: var(--emma-text);
-  font-size: 13px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  backdrop-filter: blur(10px);
-}
-
-.emma-notification-button:hover {
-  background: rgba(255, 255, 255, 0.15);
-  transform: translateY(-1px);
-}
-
-.emma-notification-button-primary {
-  background: var(--emma-gradient-1);
-  border: none;
-  color: white;
-}
-
-.emma-notification-button-primary:hover {
-  box-shadow: 0 4px 16px rgba(118, 75, 162, 0.4);
-}
-
-/* Emma Inline UI (Settings, Status) */
-.emma-inline-ui {
-  position: fixed;
-  top: 80px;
-  right: 24px;
-  width: 280px;
-  background: var(--emma-glass);
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
-  border: 1px solid var(--emma-border);
-  border-radius: 16px;
-  padding: 20px;
-  box-shadow: 0 12px 48px rgba(26, 16, 51, 0.6);
-  transform: translateX(320px);
-  opacity: 0;
-  transition: all 0.4s ease;
-  z-index: 9998;
-}
-
-.emma-inline-ui-visible {
-  transform: translateX(0);
-  opacity: 1;
-}
-
-.emma-inline-ui-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 16px;
-}
-
-.emma-inline-ui-title {
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--emma-text);
-}
-
-.emma-inline-ui-close {
-  width: 24px;
-  height: 24px;
-  background: rgba(255, 255, 255, 0.1);
-  border: none;
-  border-radius: 50%;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--emma-text-secondary);
-  transition: all 0.3s ease;
-}
-
-.emma-inline-ui-close:hover {
-  background: rgba(255, 255, 255, 0.2);
-  color: var(--emma-text);
-}
-
-/* Emma Stats Display */
-.emma-stats {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 12px;
-  margin-bottom: 16px;
-}
-
-.emma-stat {
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid var(--emma-border);
-  border-radius: 12px;
-  padding: 12px;
-  text-align: center;
-}
-
-.emma-stat-value {
-  font-size: 20px;
-  font-weight: 600;
-  background: var(--emma-gradient-1);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  display: block;
-}
-
-.emma-stat-label {
-  font-size: 11px;
-  color: var(--emma-text-secondary);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-/* Emma Progress Bar */
-.emma-progress {
-  background: rgba(255, 255, 255, 0.05);
-  border-radius: 8px;
-  height: 6px;
-  overflow: hidden;
-  margin-top: 8px;
-}
-
-.emma-progress-bar {
-  height: 100%;
-  background: var(--emma-gradient-1);
-  border-radius: 8px;
-  transition: width 0.3s ease;
-}
-
-/* Emma Loading Animation */
-.emma-loading {
-  display: inline-block;
-  width: 16px;
-  height: 16px;
-  border: 2px solid var(--emma-border);
-  border-top-color: var(--emma-purple);
-  border-radius: 50%;
-  animation: emma-spin 1s linear infinite;
-}
-
-@keyframes emma-spin {
-  to { transform: rotate(360deg); }
-}
-
-/* Emma Tooltip */
-.emma-tooltip {
-  position: absolute;
-  background: var(--emma-glass);
-  backdrop-filter: blur(10px);
-  border: 1px solid var(--emma-border);
-  border-radius: 8px;
-  padding: 8px 12px;
-  color: var(--emma-text);
-  font-size: 12px;
-  white-space: nowrap;
-  pointer-events: none;
-  opacity: 0;
-  transform: translateY(4px);
-  transition: all 0.3s ease;
-  z-index: 10001;
-}
-
-.emma-tooltip-visible {
-  opacity: 1;
-  transform: translateY(0);
-}
-
-/* Animations */
-@keyframes emma-pulse {
-  0% {
-    box-shadow: 0 0 0 0 rgba(118, 75, 162, 0.4);
-  }
-  70% {
-    box-shadow: 0 0 0 20px rgba(118, 75, 162, 0);
-  }
-  100% {
-    box-shadow: 0 0 0 0 rgba(118, 75, 162, 0);
-  }
-}
-
-.emma-pulse {
-  animation: emma-pulse 2s infinite;
-}
-
-/* Dark mode adjustments for light-themed sites */
-@media (prefers-color-scheme: light) {
-  .emma-notification,
-  .emma-inline-ui {
-    box-shadow: 0 12px 48px rgba(26, 16, 51, 0.8);
-  }
-}
\ No newline at end of file
diff --git a/css/dashboard-base.css b/css/dashboard-base.css
new file mode 100644
index 00000000..1fd6f47b
--- /dev/null
+++ b/css/dashboard-base.css
@@ -0,0 +1,1766 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  background: var(--emma-bg-gradient);
+  color: var(--emma-text);
+  min-height: 100vh;
+  overflow-x: hidden;
+  overflow-y: auto;
+  position: relative;
+  padding-bottom: env(safe-area-inset-bottom, 0);
+}
+
+body.modal-open {
+  overflow: hidden;
+}
+
+/* Aurora Background Effect */
+.aurora-bg {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0.3;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.aurora {
+  position: absolute;
+  width: 200%;
+  height: 200%;
+  background: var(--emma-aurora);
+  animation: aurora 20s ease-in-out infinite;
+  filter: blur(60px);
+}
+
+:root[data-background="aurora"] .aurora {
+  background: var(--emma-aurora);
+}
+
+:root[data-background="sunrise"] .aurora {
+  background: var(--emma-background-sunrise);
+}
+
+:root[data-background="forest"] .aurora {
+  background: var(--emma-background-forest);
+}
+:root[data-background="ocean"] .aurora {
+  background: var(--emma-background-ocean);
+}
+
+:root[data-background="ember"] .aurora {
+  background: var(--emma-background-ember);
+}
+
+:root[data-background="blossom"] .aurora {
+  background: var(--emma-background-blossom);
+}
+
+:root[data-background="zen"] .aurora {
+  background: var(--emma-background-zen);
+}
+@keyframes aurora {
+  0%, 100% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
+  33% { transform: translate(-30%, -60%) rotate(120deg) scale(1.1); }
+  66% { transform: translate(-70%, -40%) rotate(240deg) scale(0.9); }
+}
+
+body.performance-lite .aurora-bg,
+body.performance-lite .welcome-text {
+  display: none;
+}
+
+body.performance-lite .aurora {
+  animation: none;
+}
+
+body.performance-lite .neural-network {
+  opacity: 0;
+}
+
+/* Main Container */
+.dashboard {
+  position: relative;
+  width: 100%;
+  min-height: 100vh;
+  min-height: 100dvh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2;
+  padding: 0 env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
+}
+
+/* Central Command Orb Container */
+.command-center {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Emma Orb */
+.emma-orb-container {
+  position: relative;
+  width: 200px;
+  height: 200px;
+  cursor: pointer;
+  z-index: 6;
+  transition: transform 0.3s ease;
+}
+
+.emma-orb-container:hover {
+  transform: scale(1.05);
+}
+
+.emma-orb-webgl {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  box-shadow: var(--emma-glow), inset 0 0 40px rgba(var(--emma-neutral-rgb), 0.1);
+  position: relative;
+  overflow: hidden;
+}
+
+.emma-orb-webgl canvas {
+  border-radius: 50%;
+  width: 100% !important;
+  height: 100% !important;
+}
+
+@keyframes orb-pulse {
+  0%, 100% { transform: scale(1); box-shadow: var(--emma-glow), inset 0 0 40px rgba(var(--emma-neutral-rgb), 0.1); }
+  50% { transform: scale(1.02); box-shadow: 0 0 60px rgba(var(--emma-accent-primary-rgb), 0.8), inset 0 0 40px rgba(var(--emma-neutral-rgb), 0.2); }
+}
+
+@keyframes vault-unlock-pulse {
+  0% { transform: scale(1); }
+  30% { transform: scale(1.1); box-shadow: 0 0 80px rgba(16, 185, 129, 0.8); }
+  60% { transform: scale(0.95); }
+  100% { transform: scale(1); }
+}
+
+/* Orb status removed - clean WebGL orb only */
+
+.orb-icon {
+  font-size: 48px;
+  margin-bottom: 8px;
+  filter: drop-shadow(0 0 10px rgba(var(--emma-neutral-rgb), 0.5));
+}
+
+/* Orb text removed - clean WebGL orb only */
+
+/* Neural Network Menu */
+.neural-network {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 1; /* CRITICAL FIX: Lower z-index so nodes appear above connections */
+}
+
+.neural-canvas {
+  width: 100%;
+  height: 100%;
+}
+
+.radial-menu {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.6s ease;
+  z-index: 5;
+}
+
+.radial-menu.active {
+  opacity: 1;
+}
+
+.radial-menu .radial-item {
+  pointer-events: none;
+}
+
+.radial-menu.active .radial-item {
+  pointer-events: auto;
+}
+
+.radial-item {
+  position: absolute;
+  width: 90px;
+  height: 90px;
+  background: var(--emma-glass);
+  backdrop-filter: blur(20px);
+  border: 2px solid rgba(var(--emma-accent-primary-rgb), 0.3);
+  border-radius: 50%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: opacity 0.4s ease, transform 0.2s ease;
+  opacity: 0;
+  box-shadow: 0 0 18px rgba(var(--emma-accent-primary-rgb), 0.25);
+  z-index: 10;
+}
+
+.radial-menu.active .radial-item {
+  opacity: 1;
+}
+
+/* Elegant add node glow animation */
+@keyframes addNodeGlow {
+  0%, 100% { 
+    box-shadow: 
+      0 0 14px rgba(16, 185, 129, 0.35),
+      0 0 26px rgba(16, 185, 129, 0.18),
+      inset 0 0 14px rgba(16, 185, 129, 0.1);
+  }
+  50% { 
+    box-shadow: 
+      0 0 20px rgba(16, 185, 129, 0.45),
+      0 0 34px rgba(16, 185, 129, 0.22),
+      inset 0 0 18px rgba(16, 185, 129, 0.14);
+  }
+}
+
+/* Subtle heartbeat animation for people nodes */
+@keyframes heartbeat {
+  0%, 100% { 
+    box-shadow: 
+      0 6px 22px rgba(111, 99, 217, 0.35),
+      0 0 16px rgba(239, 68, 68, 0.25),
+      0 0 26px rgba(239, 68, 68, 0.1);
+  }
+  25% { 
+    box-shadow: 
+      0 6px 22px rgba(111, 99, 217, 0.35),
+      0 0 20px rgba(239, 68, 68, 0.32),
+      0 0 30px rgba(239, 68, 68, 0.14);
+  }
+  50% { 
+    box-shadow: 
+      0 6px 22px rgba(111, 99, 217, 0.35),
+      0 0 16px rgba(239, 68, 68, 0.25),
+      0 0 26px rgba(239, 68, 68, 0.1);
+  }
+  75% { 
+    box-shadow: 
+      0 6px 22px rgba(111, 99, 217, 0.35),
+      0 0 18px rgba(239, 68, 68, 0.28),
+      0 0 28px rgba(239, 68, 68, 0.12);
+  }
+}
+
+/* Memory Constellation Styles - Star-like nodes */
+.memory-node {
+  font-size: 12px;
+  color: var(--emma-text-on-accent);
+  backdrop-filter: blur(15px);
+  box-shadow:
+    0 0 18px rgba(var(--emma-accent-primary-rgb), 0.35),
+    0 0 32px rgba(var(--emma-accent-primary-rgb), 0.18),
+    inset 0 0 12px rgba(var(--emma-neutral-rgb), 0.12);
+  border: 1px solid rgba(var(--emma-neutral-rgb), 0.2);
+  position: relative;
+}
+
+/* Star-like glow effect */
+.memory-node::before {
+  content: '';
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  right: -2px;
+  bottom: -2px;
+  border-radius: 50%;
+  background: linear-gradient(45deg, rgba(var(--emma-accent-primary-rgb), 0.3), rgba(var(--emma-accent-secondary-rgb), 0.3));
+  z-index: -1;
+  opacity: 0.7;
+  animation: star-pulse 3s ease-in-out infinite;
+}
+
+@keyframes star-pulse {
+  0%, 100% { transform: scale(1); opacity: 0.7; }
+  50% { transform: scale(1.1); opacity: 1; }
+}
+
+.memory-node .memory-thumbnail {
+  font-size: 28px;
+  margin-bottom: 2px;
+  filter: drop-shadow(0 0 8px rgba(var(--emma-neutral-rgb), 0.5));
+  text-shadow: 0 0 10px rgba(var(--emma-accent-primary-rgb), 0.8);
+}
+
+.memory-node .memory-label {
+  font-size: 11px;
+  opacity: 0;
+  position: absolute;
+  top: 75px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: rgba(var(--emma-neutral-inverse-rgb), 0.95);
+  padding: 6px 10px;
+  border-radius: 6px;
+  white-space: nowrap;
+  transition: all 0.3s ease;
+  pointer-events: none;
+  z-index: 1001;
+  border: 1px solid rgba(var(--emma-accent-primary-rgb), 0.3);
+  backdrop-filter: blur(10px);
+  font-weight: 500;
+}
+
+.memory-node:hover .memory-label {
+  opacity: 1;
+  transform: translateX(-50%) translateY(-5px);
+}
+
+/* Theme-based colors */
+.memory-node[data-theme="family"] {
+  box-shadow:
+    0 0 30px rgba(255, 105, 135, 0.4),
+    0 0 60px rgba(255, 105, 135, 0.2);
+}
+
+.memory-node[data-theme="travel"] {
+  box-shadow:
+    0 0 30px rgba(52, 211, 153, 0.4),
+    0 0 60px rgba(52, 211, 153, 0.2);
+}
+
+.memory-node[data-theme="recent"] {
+  box-shadow:
+    0 0 30px rgba(96, 165, 250, 0.4),
+    0 0 60px rgba(96, 165, 250, 0.2);
+}
+
+.memory-node[data-theme="special"] {
+  box-shadow:
+    0 0 30px rgba(251, 191, 36, 0.4),
+    0 0 60px rgba(251, 191, 36, 0.2);
+}
+
+.constellation-controls {
+  color: var(--emma-text-strong);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.constellation-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.constellation-header h3 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.constellation-close {
+  background: none;
+  border: none;
+  color: var(--emma-text-standard);
+  font-size: 18px;
+  cursor: pointer;
+  padding: 5px;
+  border-radius: 50%;
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.3s ease;
+}
+
+.constellation-close:hover {
+  background: rgba(var(--emma-neutral-rgb), 0.1);
+}
+
+.constellation-themes {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.theme-filter {
+  background: var(--emma-accent-surface);
+  border: 1px solid var(--emma-accent-border);
+  color: var(--emma-text-on-accent);
+  padding: 8px 12px;
+  border-radius: 20px;
+  cursor: pointer;
+  font-size: 12px;
+  transition: all 0.3s ease;
+}
+
+.theme-filter.active {
+  background: var(--emma-accent-surface-strong);
+  border-color: var(--emma-accent-border);
+}
+
+.theme-filter.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.theme-filter:hover:not(.disabled) {
+  background: var(--emma-accent-surface-strong);
+  transform: translateY(-2px);
+}
+
+/* Memory Dialog Styles */
+.memory-dialog {
+  background: rgba(var(--emma-neutral-inverse-rgb), 0.95);
+  border: 1px solid rgba(var(--emma-accent-primary-rgb), 0.3);
+  border-radius: 16px;
+  padding: 0;
+  max-width: 800px;
+  width: 90%;
+  max-height: 80vh;
+  overflow: hidden;
+  backdrop-filter: blur(20px);
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+  transform: scale(0.9);
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.memory-dialog-overlay[style*="opacity: 1"] .memory-dialog {
+  transform: scale(1);
+}
+
+.memory-dialog-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 24px 32px;
+  border-bottom: 1px solid rgba(var(--emma-accent-primary-rgb), 0.2);
+  background: linear-gradient(135deg, rgba(var(--emma-accent-primary-rgb), 0.1), rgba(var(--emma-accent-secondary-rgb), 0.1));
+}
+
+.memory-title {
+  margin: 0;
+  font-size: 24px;
+  font-weight: 600;
+  color: var(--emma-text-on-accent);
+  text-shadow: 0 0 10px rgba(var(--emma-accent-primary-rgb), 0.5);
+}
+
+.memory-close {
+  background: none;
+  border: none;
+  color: var(--emma-text-standard);
+  font-size: 24px;
+  cursor: pointer;
+  padding: 8px;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.3s ease;
+}
+
+.memory-close:hover {
+  background: rgba(var(--emma-neutral-rgb), 0.1);
+}
+
+.memory-content {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 32px;
+  padding: 32px;
+}
+
+.memory-slideshow {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.slideshow-container {
+  aspect-ratio: 16/9;
+  border-radius: 12px;
+  overflow: hidden;
+  background: rgba(var(--emma-accent-primary-rgb), 0.1);
+  border: 1px solid rgba(var(--emma-accent-primary-rgb), 0.2);
+}
+
+.memory-slide {
+  width: 100%;
+  height: 100%;
+  display: none;
+  align-items: center;
+  justify-content: center;
+}
+
+.memory-slide.active {
+  display: flex;
+}
+
+.media-placeholder {
+  text-align: center;
+  color: var(--emma-text-standard);
+}
+
+.media-icon {
+  font-size: 48px;
+  display: block;
+  margin-bottom: 16px;
+}
+
+.slideshow-controls {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+}
+
+.slide-btn {
+  background: var(--emma-accent-surface);
+  border: 1px solid var(--emma-accent-border);
+  color: var(--emma-text-on-accent);
+  padding: 8px 12px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 18px;
+  transition: all 0.3s ease;
+}
+
+.slide-btn:hover {
+  background: var(--emma-accent-surface-strong);
+  transform: scale(1.05);
+}
+
+.slide-indicator {
+  color: var(--emma-text-standard);
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.memory-details {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.memory-summary h3 {
+  margin: 0 0 12px 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--emma-text-strong);
+}
+
+.memory-summary p {
+  margin: 0;
+  line-height: 1.6;
+  color: var(--emma-text-standard);
+}
+
+.memory-metadata {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.metadata-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 0;
+  border-bottom: 1px solid rgba(var(--emma-accent-primary-rgb), 0.1);
+}
+
+.metadata-item .label {
+  font-weight: 500;
+  color: var(--emma-text-standard);
+}
+
+.metadata-item .value {
+  font-weight: 600;
+  color: var(--emma-text-strong);
+}
+
+.value.theme-family { color: rgba(255, 105, 135, 1); }
+.value.theme-travel { color: rgba(52, 211, 153, 1); }
+.value.theme-recent { color: rgba(96, 165, 250, 1); }
+.value.theme-special { color: rgba(251, 191, 36, 1); }
+
+.memory-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  padding: 24px 32px;
+  border-top: 1px solid rgba(var(--emma-accent-primary-rgb), 0.2);
+  background: rgba(var(--emma-accent-primary-rgb), 0.05);
+}
+
+.action-btn {
+  padding: 12px 24px;
+  border-radius: 8px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  border: none;
+}
+
+.action-btn.secondary {
+  background: var(--emma-accent-surface);
+  color: var(--emma-text-on-accent);
+  border: 1px solid var(--emma-accent-border);
+}
+
+.action-btn.secondary:hover {
+  background: var(--emma-accent-surface-strong);
+  transform: translateY(-2px);
+}
+
+.action-btn.primary {
+  background: var(--emma-gradient-primary);
+  color: var(--emma-text-on-accent);
+  border: none;
+}
+
+.action-btn.primary:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 25px rgba(var(--emma-accent-primary-rgb), 0.4);
+}
+
+/* Simplified fade-in timing for menu items */
+.radial-item:nth-child(1) { transition-delay: 0.1s; }
+.radial-item:nth-child(2) { transition-delay: 0.15s; }
+.radial-item:nth-child(3) { transition-delay: 0.2s; }
+.radial-item:nth-child(4) { transition-delay: 0.25s; }
+
+.radial-item:hover {
+  background: rgba(var(--emma-accent-primary-rgb), 0.3);
+  border-color: var(--emma-purple);
+  transform: scale(1.05);
+  box-shadow: 0 0 40px rgba(var(--emma-accent-primary-rgb), 0.4);
+}
+
+.radial-item.pulsing {
+  animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    box-shadow: 0 0 30px rgba(var(--emma-accent-primary-rgb), 0.2);
+    transform: scale(1);
+  }
+  50% {
+    box-shadow: 0 0 50px rgba(var(--emma-accent-primary-rgb), 0.5);
+    transform: scale(1.05);
+  }
+}
+
+.radial-item-icon {
+  margin-bottom: 4px;
+  filter: drop-shadow(0 0 5px rgba(var(--emma-neutral-rgb), 0.3));
+}
+
+.radial-item-label {
+  font-size: 12px;
+  text-align: center;
+  opacity: 0.9;
+  font-weight: 500;
+}
+
+.node-connection {
+  stroke: rgba(var(--emma-accent-primary-rgb), 0.3);
+  stroke-width: 2;
+  fill: none;
+  stroke-dasharray: 5, 5;
+  animation: dash 20s linear infinite;
+}
+
+@keyframes dash {
+  to { stroke-dashoffset: -100; }
+}
+
+/* Info Panels */
+.info-panel {
+  position: fixed;
+  background: var(--emma-glass);
+  backdrop-filter: blur(20px);
+  border: 1px solid var(--emma-border);
+  border-radius: 20px;
+  padding: 24px;
+  min-width: 280px;
+  opacity: 0;
+  transform: translateY(20px);
+  transition: all 0.4s ease;
+  z-index: 10;
+}
+
+.info-panel.active {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* Fade panels and header text when neural menu is active */
+body.menu-active .info-panel {
+  opacity: 0;
+  transform: translateY(20px) scale(0.9);
+  filter: blur(2px);
+  pointer-events: none;
+}
+
+body.menu-active .welcome-text {
+  opacity: 0 !important;
+  transform: translateY(-20px) scale(0.9);
+  filter: blur(3px);
+  pointer-events: none;
+  visibility: hidden;
+}
+
+body.menu-active .voice-indicator {
+  opacity: 0;
+  transform: translateX(-50%) translateY(20px) scale(0.9);
+  filter: blur(2px);
+  pointer-events: none;
+}
+
+body.menu-active .constellation-canvas {
+  opacity: 0;
+  filter: blur(3px);
+  pointer-events: none;
+}
+
+/* Constellation Mode - Hide ALL UI except constellation */
+body.constellation-active .info-panel,
+body.constellation-active .welcome-text,
+body.constellation-active .voice-indicator,
+body.constellation-active .constellation-canvas,
+body.constellation-active .quick-stats {
+  opacity: 0 !important;
+  visibility: hidden !important;
+  pointer-events: none !important;
+  transition: all 0.5s ease;
+}
+
+/* Keep only constellation controls and radial menu visible */
+body.constellation-active .radial-menu {
+  opacity: 1 !important;
+  visibility: visible !important;
+  pointer-events: none !important;
+}
+
+body.constellation-active .radial-menu.active {
+  pointer-events: none !important;
+}
+
+body.constellation-active .radial-menu.active .radial-item {
+  pointer-events: auto !important;
+}
+
+body.constellation-active .constellation-controls {
+  opacity: 1 !important;
+  visibility: visible !important;
+}
+
+/* Hide panels in constellation mode */
+body.constellation-active .info-panel.right-stack,
+body.constellation-active .utility-icons {
+  opacity: 0 !important;
+  visibility: hidden !important;
+  pointer-events: none !important;
+}
+
+/* Bottom Left Utility Icons */
+/* Clean Icons - No backgrounds */
+.clean-icons {
+  position: fixed;
+  bottom: 24px;
+  left: 24px;
+  display: flex;
+  gap: 16px;
+  z-index: 1000;
+}
+
+.clean-icons > .emma-floating-button {
+  color: var(--emma-accent-primary, #6f63d9);
+  transition: color 180ms ease, transform 180ms ease;
+}
+
+.clean-icons > .emma-floating-button:hover,
+.clean-icons > .emma-floating-button:focus-visible {
+  color: var(--emma-text-strong, #ffffff);
+}
+
+/* Hide old utility icons completely */
+.utility-icons {
+  display: none !important;
+}
+
+.utility-item {
+  display: none !important;
+}
+
+.utility-icon {
+  display: none !important;
+}
+
+.utility-label {
+  display: none !important;
+}
+
+/* Burger menu CSS removed for clean interface */
+
+/* Right side panel stack - hidden by default */
+.info-panel.right-stack {
+  position: fixed;
+  right: -360px; /* Hidden off-screen */
+  width: 320px;
+  min-width: 320px;
+  max-width: 320px;
+  height: 180px;
+  min-height: 180px;
+  max-height: 180px;
+  transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  z-index: 999;
+}
+
+/* Show panels when menu is active */
+.panels-visible .info-panel.right-stack {
+  right: 24px;
+}
+
+#daily-brief.right-stack {
+  top: 24px;
+}
+
+#ai-insights.right-stack {
+  top: calc(24px + 180px + 16px);
+}
+
+#quick-actions.right-stack {
+  top: calc(24px + 180px + 16px + 180px + 16px);
+}
+
+/* Legacy positioning for any remaining panels */
+.info-panel.top-left {
+  top: 24px;
+  left: 24px;
+}
+
+.info-panel.top-right {
+  top: 24px;
+  right: 24px;
+}
+
+.info-panel.bottom-left {
+  bottom: 24px;
+  left: 24px;
+}
+
+.info-panel.bottom-right {
+  bottom: 24px;
+  right: 24px;
+}
+
+.panel-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid rgba(var(--emma-neutral-rgb), 0.1);
+}
+
+/* Adjust content for right stack panels */
+.info-panel.right-stack .panel-content {
+  overflow: hidden;
+  height: calc(100% - 70px); /* Account for header height */
+}
+
+.info-panel.right-stack .panel-content p {
+  font-size: 14px;
+  line-height: 1.4;
+  margin-bottom: 8px;
+}
+
+.panel-icon {
+  font-size: 24px;
+}
+
+.panel-title {
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.panel-content {
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--emma-text-secondary);
+}
+
+/* Memory Constellation Background */
+.constellation-canvas {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  opacity: 0.3;
+  pointer-events: none;
+}
+
+/* Voice Activation Indicator */
+.voice-indicator {
+  position: fixed;
+  bottom: 40px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--emma-glass);
+  backdrop-filter: blur(20px);
+  border: 1px solid var(--emma-border);
+  border-radius: 30px;
+  padding: 12px 24px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  opacity: 0;
+  transform: translateX(-50%) translateY(20px);
+  transition: all 0.3s ease;
+  z-index: 10;
+}
+
+.voice-indicator.active {
+  opacity: 1;
+  transform: translateX(-50%) translateY(0);
+}
+
+/* Minimal landing state - hide advanced controls until expanded */
+body.dashboard-minimal .quick-stats,
+body.dashboard-minimal .info-panel,
+body.dashboard-minimal .voice-indicator {
+  display: none !important;
+}
+
+.voice-waves {
+  display: flex;
+  gap: 3px;
+  align-items: center;
+}
+
+.voice-wave {
+  width: 3px;
+  height: 20px;
+  background: var(--emma-purple);
+  border-radius: 3px;
+  animation: wave 1s ease-in-out infinite;
+}
+
+.voice-wave:nth-child(2) { animation-delay: 0.1s; height: 30px; }
+.voice-wave:nth-child(3) { animation-delay: 0.2s; height: 25px; }
+.voice-wave:nth-child(4) { animation-delay: 0.3s; height: 35px; }
+.voice-wave:nth-child(5) { animation-delay: 0.4s; height: 20px; }
+
+@keyframes wave {
+  0%, 100% { transform: scaleY(0.5); opacity: 0.5; }
+  50% { transform: scaleY(1); opacity: 1; }
+}
+
+/* Quick Stats */
+.quick-stats {
+  position: absolute;
+  bottom: -80px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 32px;
+  opacity: 0;
+  transition: opacity 0.4s ease;
+  pointer-events: none;
+}
+
+.command-center:hover .quick-stats {
+  opacity: 1;
+}
+
+.stat-item {
+  text-align: center;
+  cursor: pointer;
+  transition: transform 0.2s ease;
+}
+
+.stat-item:hover {
+  transform: translateY(-4px);
+}
+
+.stat-value {
+  font-size: 28px;
+  font-weight: 700;
+  background: var(--emma-gradient-1);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.stat-label {
+  font-size: 12px;
+  color: var(--emma-text-tertiary);
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  margin-top: 4px;
+}
+
+/* Notification Toast */
+.toast {
+  position: fixed;
+  top: 24px;
+  right: 24px;
+  background: var(--emma-glass);
+  backdrop-filter: blur(20px);
+  border: 1px solid var(--emma-border);
+  border-radius: 12px;
+  padding: 16px 24px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  opacity: 0;
+  transform: translateX(400px);
+  transition: all 0.4s ease;
+  z-index: 1000;
+}
+
+.toast.show {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.toast.success { border-color: var(--emma-success); }
+.toast.error { border-color: var(--emma-error); }
+.toast.info { border-color: var(--emma-blue); }
+
+/* Loading State */
+.loading-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.8);
+  backdrop-filter: blur(10px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.3s ease;
+}
+
+.loading-overlay.active {
+  opacity: 1;
+  pointer-events: all;
+}
+
+.loading-content {
+  text-align: center;
+}
+
+.loading-orb {
+  width: 80px;
+  height: 80px;
+  margin: 0 auto 20px;
+  position: relative;
+  /* Emma's orb will be rendered here via WebGL */
+}
+
+/* Fallback for when WebGL orb isn't available */
+.loading-orb-fallback {
+  width: 100%;
+  height: 100%;
+  background: var(--emma-gradient-primary);
+  border-radius: 50%;
+  animation: loading-pulse 1.5s ease-in-out infinite;
+  box-shadow: var(--emma-glow-strong);
+}
+
+@keyframes loading-pulse {
+  0%, 100% { transform: scale(1); opacity: 0.8; }
+  50% { transform: scale(1.2); opacity: 1; }
+}
+
+/* Welcome Text */
+.welcome-text {
+  position: fixed;
+  top: 40px;
+  left: 50%;
+  transform: translateX(-50%);
+  text-align: center;
+  opacity: 0;
+  animation: fade-in 1s ease-out 0.5s forwards;
+}
+
+.welcome-title {
+  font-size: 48px;
+  font-weight: 200;
+  margin-bottom: 8px;
+  background: var(--emma-gradient-1);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.welcome-subtitle {
+  font-size: 18px;
+  color: var(--emma-text-secondary);
+  font-weight: 400;
+}
+
+@keyframes fade-in {
+  to { opacity: 1; }
+}
+
+/* Vault Modal Styles */
+.vault-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.8);
+  backdrop-filter: blur(10px);
+  z-index: 10000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.vault-modal.show {
+  opacity: 1;
+}
+
+.vault-modal-content {
+  background: linear-gradient(135deg, rgba(26, 16, 51, 0.98), rgba(45, 27, 105, 0.98));
+  border: 1px solid rgba(var(--emma-accent-primary-rgb), 0.3);
+  border-radius: 24px;
+  max-width: 600px;
+  width: 100%;
+  max-height: 90vh;
+  overflow-y: auto;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
+  transform: scale(0.9);
+  transition: transform 0.3s ease;
+}
+
+.vault-modal.show .vault-modal-content {
+  transform: scale(1);
+}
+
+.vault-modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 32px 32px 24px;
+  border-bottom: 1px solid rgba(var(--emma-neutral-rgb), 0.1);
+  background: linear-gradient(135deg, rgba(var(--emma-accent-primary-rgb), 0.1), rgba(var(--emma-accent-secondary-rgb), 0.1));
+}
+
+.vault-header-content {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
+.vault-icon {
+  width: 64px;
+  height: 64px;
+  background: var(--emma-gradient-primary);
+  border-radius: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 32px;
+}
+
+.vault-title h2 {
+  margin: 0 0 4px 0;
+  font-size: 28px;
+  font-weight: 700;
+  color: var(--emma-text);
+}
+
+.vault-title p {
+  margin: 0;
+  color: var(--emma-text-secondary);
+  font-size: 16px;
+}
+
+.vault-close {
+  width: 48px;
+  height: 48px;
+  border: none;
+  background: rgba(var(--emma-neutral-rgb), 0.1);
+  color: var(--emma-text);
+  border-radius: 12px;
+  font-size: 24px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.vault-close:hover {
+  background: rgba(var(--emma-neutral-rgb), 0.2);
+}
+
+.vault-modal-body {
+  padding: 32px;
+}
+
+.vault-status-section {
+  margin-bottom: 32px;
+}
+
+.vault-status-card {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  padding: 24px;
+  background: rgba(var(--emma-neutral-rgb), 0.05);
+  border: 1px solid rgba(var(--emma-neutral-rgb), 0.1);
+  border-radius: 16px;
+  transition: all 0.3s ease;
+}
+
+.vault-status-card.unlocked {
+  border-color: rgba(74, 222, 128, 0.3);
+  background: rgba(74, 222, 128, 0.1);
+}
+
+.vault-btn {
+  padding: 12px 24px;
+  border: none;
+  border-radius: 12px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.vault-btn.primary {
+  background: var(--emma-gradient-primary);
+  color: var(--emma-text-on-accent);
+}
+
+.vault-btn.primary:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--emma-shadow-raised);
+}
+
+.vault-btn.secondary {
+  background: var(--emma-button-secondary-bg);
+  color: var(--emma-button-secondary-text);
+  border: 1px solid var(--emma-button-secondary-border);
+}
+
+.vault-btn.secondary:hover {
+  background: var(--emma-button-secondary-bg-hover);
+}
+
+.vault-btn.small {
+  padding: 8px 16px;
+  font-size: 14px;
+}
+
+.vault-unlock-section {
+  margin-bottom: 32px;
+  padding: 24px;
+  background: rgba(var(--emma-neutral-rgb), 0.03);
+  border-radius: 16px;
+  border: 1px solid rgba(var(--emma-neutral-rgb), 0.1);
+}
+
+.unlock-form label {
+  display: block;
+  margin-bottom: 8px;
+  color: var(--emma-text);
+  font-weight: 600;
+}
+
+.unlock-form input {
+  width: 100%;
+  padding: 16px 20px;
+  background: rgba(var(--emma-neutral-rgb), 0.1);
+  border: 1px solid rgba(var(--emma-neutral-rgb), 0.2);
+  border-radius: 12px;
+  color: var(--emma-text);
+  font-size: 16px;
+  margin-bottom: 20px;
+  text-align: center;
+  letter-spacing: 2px;
+}
+
+.unlock-form input:focus {
+  outline: none;
+  border-color: var(--emma-purple);
+  box-shadow: 0 0 0 3px rgba(var(--emma-accent-primary-rgb), 0.2);
+}
+
+.unlock-actions {
+  display: flex;
+  gap: 12px;
+  justify-content: center;
+}
+
+/* Create Vault Section */
+.vault-create-section {
+  margin-bottom: 32px;
+  padding: 24px;
+  background: rgba(16, 185, 129, 0.1);
+  border-radius: 16px;
+  border: 1px solid rgba(16, 185, 129, 0.3);
+}
+
+.create-vault-card {
+  text-align: center;
+}
+
+.create-vault-icon {
+  font-size: 48px;
+  margin-bottom: 16px;
+}
+
+.create-vault-content h3 {
+  color: var(--emma-text);
+  margin-bottom: 8px;
+  font-size: 20px;
+}
+
+.create-vault-content p {
+  color: var(--emma-text-secondary);
+  margin-bottom: 20px;
+  font-size: 16px;
+}
+
+.vault-qr-section h3 {
+  margin: 0 0 8px 0;
+  color: var(--emma-text);
+  font-size: 20px;
+}
+
+.vault-qr-section p {
+  margin: 0 0 20px 0;
+  color: var(--emma-text-secondary);
+}
+
+.qr-option-card {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 20px;
+  background: rgba(var(--emma-neutral-rgb), 0.05);
+  border: 1px solid rgba(var(--emma-neutral-rgb), 0.1);
+  border-radius: 12px;
+  transition: all 0.3s ease;
+  cursor: pointer;
+}
+
+.qr-option-card:hover {
+  border-color: rgba(var(--emma-accent-primary-rgb), 0.3);
+  background: rgba(var(--emma-accent-primary-rgb), 0.1);
+}
+
+.qr-option-icon {
+  font-size: 32px;
+  min-width: 32px;
+}
+
+.qr-option-content {
+  flex: 1;
+}
+
+.qr-option-content h4 {
+  margin: 0 0 4px 0;
+  color: var(--emma-text);
+  font-size: 16px;
+}
+
+.qr-option-content p {
+  margin: 0;
+  color: var(--emma-text-secondary);
+  font-size: 14px;
+}
+
+.vault-actions-section {
+  border-top: 1px solid rgba(var(--emma-neutral-rgb), 0.1);
+  padding-top: 24px;
+}
+
+/* Responsive Design */
+/* Mobile-First Responsive Design */
+@media (max-width: 768px) {
+  .radial-menu {
+    width: 100vw;
+    height: 100vh;
+  }
+
+  .radial-item {
+    /* 🌌 UNIFIED: Same size for all devices - no more mobile/desktop differences */
+    width: 90px !important;
+    height: 90px !important;
+    font-size: 12px;
+    /* 🎯 TOUCH FRIENDLY: Large enough for all devices */
+    min-width: 90px;
+    min-height: 90px;
+    /* 🔗 BOUND TO ORB: Unified positioning */
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
+  }
+
+  .radial-item-icon {
+    font-size: 28px;
+  }
+
+  .radial-item-label {
+    font-size: 11px;
+    margin-top: 3px;
+    font-weight: 500;
+  }
+
+  /* 📱 MOBILE OPTIMIZATION: Better visual feedback */
+  .radial-item:active {
+    transform: scale(0.95) !important;
+    background: rgba(var(--emma-accent-primary-rgb), 0.3) !important;
+  }
+
+  .emma-orb-container {
+    width: 120px !important;
+    height: 120px !important;
+  }
+
+  .welcome-title {
+    font-size: 2.5rem;
+  }
+
+  .welcome-subtitle {
+    font-size: 0.9rem;
+  }
+
+  /* Mobile constellation filters */
+  .constellation-burger-menu {
+    top: 10px !important;
+    left: 10px !important;
+  }
+
+  .constellation-menu-panel {
+    width: 280px !important;
+    max-height: 70vh !important;
+    overflow-y: auto;
+  }
+
+  .info-panel,
+  .info-panel.right-stack {
+    position: fixed;
+    bottom: 0 !important;
+    left: 0 !important;
+    right: 0 !important;
+    top: auto !important;
+    width: 100% !important;
+    min-width: 100% !important;
+    max-width: 100% !important;
+    height: auto !important;
+    min-height: auto !important;
+    max-height: 50vh !important;
+    border-radius: 20px 20px 0 0;
+    overflow-y: auto;
+  }
+
+  /* Stack panels vertically on mobile */
+  #daily-brief.right-stack { transform: translateY(0); }
+  #ai-insights.right-stack { transform: translateY(0); }
+  #quick-actions.right-stack { transform: translateY(0); }
+}
+
+/* Tablet optimizations */
+@media (max-width: 1024px) and (min-width: 769px) {
+  .radial-item {
+    /* 🌌 UNIFIED: Same 90px size for tablets too */
+    width: 90px;
+    height: 90px;
+  }
+
+  .emma-orb-container {
+    width: 160px;
+    height: 160px;
+  }
+}
+
+/* Import Voice Capture Premium Styles */
+
+/* Person Summary Modal Styles */
+.person-summary-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.8);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  z-index: 10000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  visibility: hidden;
+  transition: all 0.3s ease;
+}
+
+.person-summary-modal-overlay.active {
+  opacity: 1;
+  visibility: visible;
+}
+
+.person-summary-modal {
+  /* 🎨 EMMA GLASSMORPHISM: Match chat interface aesthetic */
+  background: rgba(26, 16, 51, 0.92);
+  backdrop-filter: blur(25px) saturate(150%);
+  -webkit-backdrop-filter: blur(25px) saturate(150%);
+  border: 1px solid rgba(var(--emma-neutral-rgb), 0.12);
+  border-radius: 24px;
+  padding: 32px;
+  width: 90%;
+  max-width: 500px;
+  max-height: 80vh;
+  overflow-y: auto;
+  transform: scale(0.9) translateY(20px);
+  transition: transform 0.3s ease;
+  position: relative;
+  box-shadow: 
+    0 25px 80px rgba(0, 0, 0, 0.4),
+    0 0 0 1px rgba(var(--emma-neutral-rgb), 0.08),
+    inset 0 1px 0 rgba(var(--emma-neutral-rgb), 0.12);
+}
+
+.person-summary-modal .modal-close {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: rgba(var(--emma-neutral-rgb), 0.1);
+  border: 1px solid rgba(var(--emma-neutral-rgb), 0.2);
+  color: var(--emma-text-standard);
+  font-size: 18px;
+  font-weight: 300;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+}
+
+.person-summary-modal .modal-close:hover {
+  background: rgba(var(--emma-neutral-rgb), 0.2);
+  border-color: rgba(var(--emma-neutral-rgb), 0.4);
+  transform: scale(1.1);
+}
+
+.person-summary-modal-overlay.active .person-summary-modal {
+  transform: scale(1) translateY(0);
+}
+
+.person-summary-header {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  margin-bottom: 32px;
+  padding-bottom: 20px;
+  border-bottom: 1px solid rgba(var(--emma-neutral-rgb), 0.1);
+}
+
+.person-summary-avatar {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  background: var(--emma-gradient-secondary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--emma-text-on-accent);
+  font-weight: 700;
+  font-size: 32px;
+  overflow: hidden;
+}
+
+.person-summary-info {
+  flex: 1;
+}
+
+.person-summary-name {
+  font-size: 1.8rem;
+  font-weight: 600;
+  color: var(--emma-text-strong);
+  margin: 0 0 8px 0;
+}
+
+.person-summary-relation {
+  font-size: 1rem;
+  color: var(--emma-text-standard);
+  margin: 0 0 4px 0;
+  text-transform: capitalize;
+}
+
+.person-summary-contact {
+  font-size: 0.9rem;
+  color: var(--emma-text-muted);
+  margin: 0;
+}
+
+.summary-section-title {
+  font-size: 1.2rem;
+  font-weight: 600;
+  color: var(--emma-text-strong);
+  margin-bottom: 16px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.summary-section-title::before {
+  content: '';
+  width: 3px;
+  height: 20px;
+  background: var(--emma-gradient-secondary);
+  border-radius: 2px;
+}
+
+.connected-memories {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-bottom: 24px;
+}
+
+.connected-memory-item {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 16px;
+  background: rgba(var(--emma-neutral-rgb), 0.05);
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.connected-memory-item:hover {
+  background: rgba(var(--emma-neutral-rgb), 0.1);
+  transform: translateY(-2px);
+}
+
+.memory-preview {
+  width: 50px;
+  height: 50px;
+  border-radius: 8px;
+  background: rgba(var(--emma-neutral-rgb), 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  font-size: 20px;
+}
+
+.memory-preview img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 8px;
+}
+
+.memory-info {
+  flex: 1;
+}
+
+.memory-title {
+  font-size: 1rem;
+  font-weight: 500;
+  color: var(--emma-text-strong);
+  margin-bottom: 4px;
+}
+
+.memory-date {
+  font-size: 0.85rem;
+  color: var(--emma-text-muted);
+}
+
+.no-memories {
+  text-align: center;
+  padding: 40px 20px;
+  color: var(--emma-text-muted);
+  font-style: italic;
+}
+
+.person-summary-actions {
+  display: flex;
+  gap: 12px;
+}
+
+.person-summary-actions .btn {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 12px 16px;
+  border: none;
+  border-radius: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.person-summary-actions .btn-primary {
+  background: var(--emma-gradient-primary);
+  color: var(--emma-text-on-accent);
+}
+
+.person-summary-actions .btn-primary:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--emma-shadow-raised);
+}
+
+.person-summary-actions .btn-secondary {
+  background: rgba(var(--emma-neutral-rgb), 0.1);
+  color: var(--emma-text-standard);
+  border: 1px solid rgba(var(--emma-neutral-rgb), 0.2);
+}
+
+.person-summary-actions .btn-secondary:hover {
+  background: rgba(var(--emma-neutral-rgb), 0.2);
+  color: var(--emma-text-strong);
+}
+
+
+
+
+
+
+
+
diff --git a/css/dashboard-secure.css b/css/dashboard-secure.css
deleted file mode 100644
index c6e28164..00000000
--- a/css/dashboard-secure.css
+++ /dev/null
@@ -1,426 +0,0 @@
-/* app/css/dashboard-secure.css - Extracted styles for CSP compliance */
-
-/* Emma Brand Variables */
-:root {
-  --emma-gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
-  --emma-gradient-2: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #a855f7 100%);
-  --emma-aurora: linear-gradient(135deg, #667eea20 0%, #764ba240 25%, #f093fb20 50%, #4dabf720 75%, #667eea20 100%);
-  --emma-bg-gradient: linear-gradient(135deg, #0a0a0f 0%, #1a1033 50%, #0f0c29 100%);
-  --emma-purple: #764ba2;
-  --emma-pink: #f093fb;
-  --emma-blue: #667eea;
-  --emma-dark: #0a0a0f;
-  --emma-card-bg: rgba(255, 255, 255, 0.03);
-  --emma-glass: rgba(255, 255, 255, 0.05);
-  --emma-border: rgba(255, 255, 255, 0.1);
-  --emma-text: #ffffff;
-  --emma-text-secondary: rgba(255, 255, 255, 0.8);
-  --emma-text-tertiary: rgba(255, 255, 255, 0.6);
-  --emma-success: #4ade80;
-  --emma-error: #f87171;
-  --emma-warning: #fbbf24;
-  --emma-glow: 0 0 40px rgba(134, 88, 255, 0.6);
-}
-
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-body {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-  background: var(--emma-bg-gradient);
-  color: var(--emma-text);
-  min-height: 100vh;
-  overflow: hidden;
-  position: relative;
-}
-
-/* Aurora Background Effect */
-.aurora-bg {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 0.3;
-  z-index: 1;
-  pointer-events: none;
-}
-
-.aurora {
-  position: absolute;
-  width: 200%;
-  height: 200%;
-  background: var(--emma-aurora);
-  animation: aurora 20s ease-in-out infinite;
-  filter: blur(60px);
-}
-
-@keyframes aurora {
-  0%, 100% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
-  33% { transform: translate(-30%, -60%) rotate(120deg) scale(1.1); }
-  66% { transform: translate(-70%, -40%) rotate(240deg) scale(0.9); }
-}
-
-/* Main Container */
-.dashboard {
-  position: relative;
-  width: 100%;
-  height: 100vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 2;
-}
-
-/* Central Command Orb Container */
-.command-center {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* Emma Orb */
-.emma-orb-container {
-  position: relative;
-  width: 200px;
-  height: 200px;
-  cursor: pointer;
-  transition: transform 0.3s ease;
-}
-
-.emma-orb-container:hover {
-  transform: scale(1.05);
-}
-
-.emma-orb-webgl {
-  width: 100%;
-  height: 100%;
-  border-radius: 50%;
-  box-shadow: var(--emma-glow), inset 0 0 40px rgba(255, 255, 255, 0.1);
-  position: relative;
-  overflow: hidden;
-}
-
-.emma-orb-webgl canvas {
-  border-radius: 50%;
-  width: 100% !important;
-  height: 100% !important;
-}
-
-@keyframes orb-pulse {
-  0%, 100% { transform: scale(1); box-shadow: var(--emma-glow), inset 0 0 40px rgba(255, 255, 255, 0.1); }
-  50% { transform: scale(1.02); box-shadow: 0 0 60px rgba(134, 88, 255, 0.8), inset 0 0 40px rgba(255, 255, 255, 0.2); }
-}
-
-/* Neural Network Menu */
-.neural-network {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  z-index: 8;
-}
-
-.neural-canvas {
-  width: 100%;
-  height: 100%;
-}
-
-/* Constellation Canvas */
-.constellation-canvas {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  z-index: 1;
-}
-
-/* Welcome Text */
-.welcome-text {
-  position: fixed;
-  top: 40px;
-  left: 50%;
-  transform: translateX(-50%);
-  text-align: center;
-  z-index: 3;
-}
-
-.welcome-title {
-  font-size: 48px;
-  font-weight: 200;
-  background: var(--emma-gradient-1);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  margin-bottom: 8px;
-}
-
-.welcome-subtitle {
-  font-size: 16px;
-  color: var(--emma-text-secondary);
-  font-weight: 300;
-}
-
-/* Radial Menu Styles */
-.radial-menu {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  z-index: 10;
-  opacity: 0;
-  transition: opacity 0.3s ease;
-}
-
-.radial-menu.active {
-  opacity: 1;
-  pointer-events: all;
-}
-
-.radial-item {
-  position: absolute;
-  width: 90px;
-  height: 90px;
-  background: var(--emma-glass);
-  border: 1px solid var(--emma-border);
-  border-radius: 50%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  backdrop-filter: blur(20px);
-  transform: scale(0);
-  opacity: 0;
-}
-
-.radial-item:hover {
-  background: rgba(255, 255, 255, 0.1);
-  transform: scale(1.1) !important;
-  box-shadow: 0 0 40px rgba(134, 88, 255, 0.6);
-}
-
-.radial-item-icon {
-  font-size: 24px;
-  margin-bottom: 4px;
-}
-
-.radial-item-label {
-  font-size: 11px;
-  color: var(--emma-text-secondary);
-  text-align: center;
-  font-weight: 500;
-}
-
-/* Menu Active State */
-body.menu-active .welcome-text,
-body.menu-active .constellation-canvas {
-  opacity: 0.2;
-  transition: opacity 0.3s ease;
-}
-
-/* Toast Notifications */
-.toast {
-  position: fixed;
-  bottom: 20px;
-  right: 20px;
-  background: var(--emma-glass);
-  color: var(--emma-text);
-  padding: 12px 20px;
-  border-radius: 8px;
-  border: 1px solid var(--emma-border);
-  backdrop-filter: blur(20px);
-  font-size: 14px;
-  font-weight: 500;
-  z-index: 1000;
-  transform: translateX(100%);
-  opacity: 0;
-  transition: all 0.3s ease;
-}
-
-.toast.show {
-  transform: translateX(0);
-  opacity: 1;
-}
-
-.toast.success {
-  border-color: var(--emma-success);
-  background: rgba(74, 222, 128, 0.1);
-}
-
-.toast.error {
-  border-color: var(--emma-error);
-  background: rgba(248, 113, 113, 0.1);
-}
-
-.toast.warning {
-  border-color: var(--emma-warning);
-  background: rgba(251, 191, 36, 0.1);
-}
-
-/* Loading Overlay */
-.loading {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: var(--emma-bg-gradient);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-  opacity: 0;
-  visibility: hidden;
-  transition: all 0.3s ease;
-}
-
-.loading.active {
-  opacity: 1;
-  visibility: visible;
-}
-
-/* Vault Modal Styles */
-.vault-modal {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.8);
-  display: none;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-  opacity: 0;
-  transition: opacity 0.3s ease;
-}
-
-.vault-modal.show {
-  opacity: 1;
-}
-
-.vault-modal-content {
-  background: var(--emma-glass);
-  border: 1px solid var(--emma-border);
-  border-radius: 16px;
-  padding: 32px;
-  max-width: 500px;
-  width: 90%;
-  backdrop-filter: blur(20px);
-  position: relative;
-}
-
-.vault-modal-title {
-  font-size: 24px;
-  font-weight: 600;
-  margin-bottom: 16px;
-  text-align: center;
-  background: var(--emma-gradient-1);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
-
-.vault-status {
-  padding: 16px;
-  background: var(--emma-card-bg);
-  border-radius: 8px;
-  text-align: center;
-  margin-bottom: 20px;
-}
-
-/* Form Styles */
-.unlock-section {
-  display: none;
-  margin-top: 20px;
-}
-
-.form-group {
-  margin-bottom: 16px;
-}
-
-.form-label {
-  display: block;
-  margin-bottom: 8px;
-  font-weight: 500;
-  color: var(--emma-text-secondary);
-}
-
-.form-input {
-  width: 100%;
-  padding: 12px;
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid var(--emma-border);
-  border-radius: 8px;
-  color: var(--emma-text);
-  font-size: 16px;
-}
-
-.form-input:focus {
-  outline: none;
-  border-color: var(--emma-purple);
-  box-shadow: 0 0 0 2px rgba(118, 75, 162, 0.2);
-}
-
-/* Button Styles */
-.btn {
-  padding: 12px 24px;
-  border: none;
-  border-radius: 8px;
-  font-size: 16px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  background: var(--emma-glass);
-  color: var(--emma-text);
-  border: 1px solid var(--emma-border);
-}
-
-.btn:hover {
-  background: rgba(255, 255, 255, 0.1);
-  transform: translateY(-2px);
-}
-
-.btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.btn-primary {
-  background: var(--emma-gradient-1);
-  border: none;
-  color: white;
-}
-
-.btn-secondary {
-  background: var(--emma-card-bg);
-  border: 1px solid var(--emma-border);
-}
-
-.btn-close {
-  position: absolute;
-  top: 16px;
-  right: 16px;
-  background: none;
-  border: none;
-  font-size: 24px;
-  color: var(--emma-text-secondary);
-  cursor: pointer;
-  padding: 4px;
-}
-
-.btn-close:hover {
-  color: var(--emma-text);
-}
diff --git a/css/emma-chat-clean.css b/css/emma-chat-clean.css
index 762db8c0..aaacb2c5 100644
--- a/css/emma-chat-clean.css
+++ b/css/emma-chat-clean.css
@@ -1,4 +1,4 @@
-/**
+/**
  * Emma Chat Experience - Clean Redesigned Interface
  * CTO-approved perfect responsive design for Debbe's demo
  * 
@@ -22,9 +22,9 @@
   width: 40px;
   height: 40px;
   border: none;
-  background: rgba(255, 255, 255, 0.1);
+  background: var(--emma-chat-surface-strong);
   border-radius: 50%;
-  color: rgba(255, 255, 255, 0.7);
+  color: var(--emma-chat-muted);
   cursor: pointer;
   transition: all 0.3s ease;
   display: flex;
@@ -34,11 +34,52 @@
 }
 
 .chat-close-btn:hover {
-  background: rgba(255, 255, 255, 0.2);
-  color: white;
+  background: rgba(var(--emma-neutral-rgb), 0.2);
+  color: var(--emma-chat-strong);
   transform: scale(1.1);
 }
 
+/* ================================
+   CHAT TOOLBAR / VOICE TOGGLE
+   ================================ */
+
+.voice-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  border-radius: 999px;
+  border: 1px solid rgba(var(--emma-accent-primary-rgb), 0.4);
+  background: rgba(var(--emma-accent-primary-rgb), 0.18);
+  color: white;
+  font-size: 13px;
+  font-weight: 600;
+  padding: 6px 14px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  box-shadow: 0 6px 20px rgba(var(--emma-accent-primary-rgb), 0.25);
+}
+
+.voice-toggle:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 10px 24px rgba(var(--emma-accent-primary-rgb), 0.35);
+}
+
+.voice-toggle.is-muted {
+  background: rgba(var(--emma-neutral-rgb), 0.15);
+  border-color: rgba(var(--emma-neutral-rgb), 0.3);
+  color: rgba(255, 255, 255, 0.8);
+  box-shadow: none;
+}
+
+.voice-toggle-icon {
+  font-size: 16px;
+  line-height: 1;
+}
+
+.voice-toggle-label {
+  line-height: 1.2;
+}
+
 /* ================================
    CHAT MESSAGES - Clean & Responsive
    ================================ */
@@ -59,17 +100,17 @@
 }
 
 .emma-chat-messages::-webkit-scrollbar-track {
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--emma-chat-surface);
   border-radius: 3px;
 }
 
 .emma-chat-messages::-webkit-scrollbar-thumb {
-  background: rgba(139, 92, 246, 0.4);
+  background: rgba(var(--emma-accent-primary-rgb), 0.4);
   border-radius: 3px;
 }
 
 .emma-chat-messages::-webkit-scrollbar-thumb:hover {
-  background: rgba(139, 92, 246, 0.6);
+  background: rgba(var(--emma-accent-primary-rgb), 0.6);
 }
 
 /* Emma Orb Avatar - High-Definition Real Orb */
@@ -99,16 +140,16 @@
 }
 
 .user-message .message-bubble {
-  background: linear-gradient(135deg, #8B5CF6, #F093FB);
+  background: var(--emma-chat-user-bubble);
   border-radius: 18px 18px 4px 18px;
   padding: 12px 16px;
   max-width: 70%;
   word-wrap: break-word;
-  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.3);
+  box-shadow: 0 4px 16px rgba(var(--emma-accent-primary-rgb), 0.3);
 }
 
 .user-message .message-text {
-  color: white;
+  color: var(--emma-chat-user-text);
   font-size: 15px;
   line-height: 1.4;
   margin: 0 0 4px 0;
@@ -116,7 +157,7 @@
 
 .user-message .message-time {
   font-size: 11px;
-  color: rgba(255, 255, 255, 0.7);
+  color: var(--emma-chat-user-meta);
   font-weight: 500;
 }
 
@@ -129,8 +170,8 @@
 }
 
 .emma-message .message-content {
-  background: rgba(255, 255, 255, 0.08);
-  border: 1px solid rgba(139, 92, 246, 0.3);
+  background: var(--emma-chat-emma-bubble);
+  border: 1px solid rgba(var(--emma-neutral-rgb), 0.2);
   border-radius: 4px 18px 18px 18px;
   padding: 12px 16px;
   max-width: 70%;
@@ -139,7 +180,7 @@
 }
 
 .emma-message .message-content p {
-  color: rgba(255, 255, 255, 0.9);
+  color: var(--emma-chat-emma-text);
   font-size: 15px;
   line-height: 1.4;
   margin: 0 0 6px 0;
@@ -147,7 +188,7 @@
 
 .emma-message .message-content .message-time {
   font-size: 11px;
-  color: rgba(255, 255, 255, 0.5);
+  color: var(--emma-chat-emma-meta);
   font-weight: 500;
   display: block;
 }
@@ -159,23 +200,24 @@
 .emma-chat-input {
   flex-shrink: 0;
   padding: 20px 20px 24px 20px; /* PADDING: Equal left/right padding to match top/bottom */
-  border-top: 2px solid rgba(139, 92, 246, 0.2);
+  border-top: 2px solid rgba(var(--emma-accent-primary-rgb), 0.2);
 }
 
 .input-wrapper {
   display: flex;
-  align-items: flex-end;
+  align-items: center;
+  flex-wrap: nowrap;
   gap: 12px;
-  background: rgba(255, 255, 255, 0.05);
-  border: 2px solid rgba(139, 92, 246, 0.3);
+  background: var(--emma-chat-surface);
+  border: 2px solid rgba(var(--emma-accent-primary-rgb), 0.3);
   border-radius: 16px;
   padding: 12px;
   transition: all 0.3s ease;
 }
 
 .input-wrapper:focus-within {
-  border-color: rgba(139, 92, 246, 0.6);
-  box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
+  border-color: rgba(var(--emma-accent-primary-rgb), 0.6);
+  box-shadow: 0 0 20px rgba(var(--emma-accent-primary-rgb), 0.3);
 }
 
 .voice-btn, .settings-btn, .send-btn {
@@ -189,12 +231,22 @@
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
+  appearance: none;
+}
+
+.voice-btn svg,
+.settings-btn svg,
+.send-btn svg {
+  width: 20px;
+  height: 20px;
+  display: block;
+  stroke: currentColor;
 }
 
 .voice-btn {
   background: rgba(16, 185, 129, 0.2);
   border: 2px solid rgba(16, 185, 129, 0.4);
-  color: #10b981;
+  color: var(--emma-chat-success);
 }
 
 .voice-btn:hover {
@@ -205,7 +257,7 @@
 .settings-btn {
   background: rgba(156, 163, 175, 0.2);
   border: 2px solid rgba(156, 163, 175, 0.4);
-  color: #9ca3af;
+  color: var(--emma-chat-muted);
 }
 
 .settings-btn:hover {
@@ -214,13 +266,13 @@
 }
 
 .send-btn {
-  background: linear-gradient(135deg, #8B5CF6, #F093FB);
-  border: 2px solid rgba(139, 92, 246, 0.6);
-  color: white;
+  background: var(--emma-gradient-primary);
+  border: 2px solid rgba(var(--emma-accent-primary-rgb), 0.6);
+  color: var(--emma-chat-strong);
 }
 
 .send-btn:hover {
-  background: linear-gradient(135deg, #7C3AED, #E879F9);
+  background: var(--emma-gradient-secondary);
   transform: scale(1.1);
 }
 
@@ -232,11 +284,12 @@
 
 .chat-textarea {
   flex: 1;
+  min-width: 0;
   min-height: 40px;
   max-height: 120px;
   border: none;
   background: transparent;
-  color: white;
+  color: var(--emma-chat-strong);
   font-size: 15px;
   font-family: inherit;
   resize: none;
@@ -246,7 +299,7 @@
 }
 
 .chat-textarea::placeholder {
-  color: rgba(255, 255, 255, 0.5);
+  color: var(--emma-chat-muted);
 }
 
 .input-hints {
@@ -254,7 +307,7 @@
   margin-bottom: 8px; /* PADDING: Extra bottom margin to prevent cutoff */
   text-align: center;
   font-size: 12px;
-  color: rgba(255, 255, 255, 0.5);
+  color: var(--emma-chat-muted);
   font-weight: 500;
   padding-bottom: 4px; /* PADDING: Additional bottom padding */
 }
@@ -268,7 +321,7 @@
   align-items: center;
   gap: 12px;
   padding: 16px 0 0 0;
-  color: rgba(255, 255, 255, 0.7);
+  color: var(--emma-chat-muted);
   font-size: 14px;
   font-weight: 500;
 }
@@ -282,7 +335,7 @@
   width: 8px;
   height: 8px;
   border-radius: 50%;
-  background: rgba(139, 92, 246, 0.6);
+  background: rgba(var(--emma-accent-primary-rgb), 0.6);
   animation: typing-bounce 1.4s ease-in-out infinite both;
 }
 
@@ -394,7 +447,7 @@
 .settings-btn:focus,
 .send-btn:focus,
 .chat-close-btn:focus {
-  outline: 3px solid rgba(139, 92, 246, 0.6);
+  outline: 3px solid rgba(var(--emma-accent-primary-rgb), 0.6);
   outline-offset: 2px;
 }
 
@@ -405,12 +458,12 @@
 /* High contrast mode support */
 @media (prefers-contrast: high) {
   .input-wrapper {
-    border-color: rgba(139, 92, 246, 0.8);
+    border-color: rgba(var(--emma-accent-primary-rgb), 0.8);
   }
   
   .emma-chat-title {
-    color: white;
-    -webkit-text-fill-color: white;
+    color: var(--emma-chat-strong);
+    -webkit-text-fill-color: var(--emma-chat-strong);
   }
 }
 
@@ -427,6 +480,19 @@
   .voice-btn, .settings-btn, .send-btn, .chat-close-btn {
     transition: none;
   }
+
+  .emma-settings-modal {
+    transition: none;
+  }
+
+  .settings-content {
+    transition: none;
+    transform: none;
+  }
+
+  .emma-settings-modal.show .settings-content {
+    transform: none;
+  }
 }
 
 /* ================================
@@ -439,104 +505,248 @@
   left: 0;
   width: 100%;
   height: 100%;
-  background: rgba(0, 0, 0, 0.8);
-  backdrop-filter: blur(15px);
+  background:
+    radial-gradient(circle at 15% 12%, rgba(var(--emma-accent-primary-rgb), 0.2) 0%, transparent 55%),
+    radial-gradient(circle at 82% 18%, rgba(var(--emma-accent-secondary-rgb), 0.16) 0%, transparent 60%),
+    rgba(0, 0, 0, 0.82);
+  backdrop-filter: blur(18px) saturate(160%);
   z-index: 10001;
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
-  transition: opacity 0.3s ease;
+  transition: opacity 280ms ease;
+  overflow: hidden;
+}
+
+.emma-settings-modal::before {
+  content: '';
+  position: absolute;
+  inset: -40% -20% 35% -20%;
+  background:
+    radial-gradient(circle at 20% 20%, rgba(var(--emma-accent-primary-rgb), 0.35), transparent 58%),
+    linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent);
+  opacity: 0;
+  filter: blur(70px);
+  transform: scale(0.8);
+  transition: opacity 420ms ease, transform 420ms ease;
+  pointer-events: none;
 }
 
 .emma-settings-modal.show {
   opacity: 1;
 }
 
+.emma-settings-modal.show::before {
+  opacity: 1;
+  transform: scale(1);
+}
+
 .settings-content {
-  background: linear-gradient(145deg, rgba(139, 92, 246, 0.15), rgba(240, 147, 251, 0.10));
-  border: 2px solid rgba(139, 92, 246, 0.3);
-  border-radius: 24px;
-  padding: 32px;
-  max-width: 500px;
-  width: 90%;
+  position: relative;
+  background: linear-gradient(175deg, rgba(28, 26, 48, 0.95) 0%, rgba(14, 12, 32, 0.98) 58%, rgba(10, 8, 26, 0.98) 100%);
+  border: 1px solid rgba(var(--emma-accent-primary-rgb), 0.45);
+  border-radius: 32px;
+  padding: clamp(28px, 3vw, 40px);
+  max-width: 880px;
+  width: min(880px, 92vw);
   max-height: 80vh;
   overflow-y: auto;
-  backdrop-filter: blur(20px);
-  box-shadow: 0 24px 80px rgba(139, 92, 246, 0.4);
-  transform: scale(0.9);
-  transition: transform 0.3s ease;
+  backdrop-filter: blur(28px) saturate(140%);
+  box-shadow:
+    0 46px 120px rgba(6, 4, 22, 0.72),
+    0 0 0 1px rgba(255, 255, 255, 0.06);
+  transform: translateY(26px) scale(0.92) rotateX(6deg);
+  transition:
+    transform 420ms cubic-bezier(0.22, 1, 0.32, 1),
+    box-shadow 320ms ease;
+  isolation: isolate;
+  display: grid;
+  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
+  gap: clamp(24px, 3vw, 36px);
+}
+
+.settings-content::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: 1.6px;
+  background: linear-gradient(140deg, rgba(var(--emma-accent-primary-rgb), 0.9) 0%, rgba(var(--emma-accent-secondary-rgb), 0.65) 45%, rgba(96, 199, 255, 0.4) 100%);
+  -webkit-mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  mask-composite: exclude;
+  opacity: 0.85;
+  pointer-events: none;
+}
+
+.settings-content::after {
+  content: '';
+  position: absolute;
+  inset: 12% -30% -45% -30%;
+  background:
+    radial-gradient(circle at 30% -10%, rgba(var(--emma-accent-primary-rgb), 0.45), transparent 65%),
+    radial-gradient(circle at 85% 0%, rgba(var(--emma-accent-secondary-rgb), 0.28), transparent 60%);
+  opacity: 0.55;
+  filter: blur(60px);
+  pointer-events: none;
+  z-index: 0;
 }
 
 .emma-settings-modal.show .settings-content {
-  transform: scale(1);
+  transform: translateY(0) scale(1) rotateX(0deg);
+  box-shadow:
+    0 48px 110px rgba(6, 4, 22, 0.78),
+    0 0 0 1px rgba(255, 255, 255, 0.08);
 }
 
 .settings-header {
-  text-align: center;
-  margin-bottom: 24px;
-  padding-bottom: 16px;
-  border-bottom: 2px solid rgba(139, 92, 246, 0.2);
+  grid-column: 1;
+  grid-row: 1 / span 10;
+  display: grid;
+  gap: 18px;
+  text-align: left;
+  padding-right: clamp(12px, 1vw, 18px);
+  border-right: 1px solid rgba(255, 255, 255, 0.12);
+  position: sticky;
+  top: clamp(28px, 3vw, 42px);
+  align-self: start;
 }
 
 .settings-title {
-  font-size: 24px;
+  font-size: clamp(2rem, 2.6vw, 2.4rem);
   font-weight: 700;
   margin: 0;
-  background: linear-gradient(135deg, #8B5CF6, #F093FB);
+  background: var(--emma-gradient-primary);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
+  letter-spacing: 0.04em;
+  text-transform: lowercase;
 }
 
-.settings-section {
-  margin-bottom: 24px;
-  padding: 20px;
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(139, 92, 246, 0.2);
+.settings-subtitle {
+  font-size: 0.95rem;
+  color: rgba(220, 225, 255, 0.78);
+  line-height: 1.7;
+  margin: 0;
+}
+
+.settings-insight {
+  display: grid;
+  gap: 6px;
+  padding: 14px 18px;
   border-radius: 16px;
+  background: rgba(26, 30, 60, 0.7);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  color: rgba(214, 218, 255, 0.85);
+  font-size: 0.9rem;
+  line-height: 1.6;
+}
+
+.settings-insight strong {
+  font-size: 0.72rem;
+  text-transform: uppercase;
+  letter-spacing: 0.18em;
+  color: rgba(197, 205, 255, 0.72);
+}
+
+.settings-content {
+  counter-reset: settings-section;
+}
+
+.settings-section {
+  grid-column: 2;
+  position: relative;
+  margin: 0;
+  padding: 28px 28px 26px;
+  border-radius: 24px;
+  background: linear-gradient(155deg, rgba(24, 26, 56, 0.78), rgba(18, 18, 40, 0.88));
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  box-shadow:
+    0 22px 60px rgba(4, 4, 12, 0.45),
+    inset 0 1px 0 rgba(255, 255, 255, 0.08);
+  display: grid;
+  gap: 16px;
+  overflow: hidden;
+  counter-increment: settings-section;
+}
+
+.settings-section::before {
+  content: 'Section ' counter(settings-section, decimal-leading-zero);
+  position: absolute;
+  top: 22px;
+  left: 22px;
+  font-size: 0.72rem;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: rgba(198, 205, 250, 0.32);
+  z-index: 0;
+}
+
+.settings-section::after {
+  content: '';
+  position: absolute;
+  inset: -48% -10% 72% -45%;
+  background: radial-gradient(circle at 0% 50%, rgba(var(--emma-accent-primary-rgb), 0.22), transparent 58%);
+  opacity: 0.55;
+  pointer-events: none;
+  z-index: 0;
 }
 
 .settings-section h4 {
-  margin: 0 0 12px 0;
-  font-size: 16px;
+  margin: 28px 0 12px 0;
+  font-size: 1.1rem;
   font-weight: 600;
-  color: white;
+  color: var(--emma-text-strong);
+  letter-spacing: 0.02em;
+  position: relative;
+  z-index: 1;
 }
 
 .settings-description {
   margin: 0 0 16px 0;
-  font-size: 14px;
-  line-height: 1.5;
-  color: rgba(255, 255, 255, 0.7);
+  font-size: 0.95rem;
+  line-height: 1.7;
+  color: rgba(214, 218, 255, 0.78);
+  position: relative;
+  z-index: 1;
 }
 
 .settings-input {
   width: 100%;
-  padding: 12px 16px;
-  border: 2px solid rgba(139, 92, 246, 0.3);
-  border-radius: 12px;
-  background: rgba(255, 255, 255, 0.05);
-  color: white;
-  font-size: 14px;
-  transition: all 0.3s ease;
+  padding: 14px 18px;
+  border: 1px solid rgba(var(--emma-accent-primary-rgb), 0.4);
+  border-radius: 14px;
+  background: rgba(20, 24, 58, 0.65);
+  color: var(--emma-chat-strong);
+  font-size: 0.95rem;
+  letter-spacing: 0.01em;
+  transition: border-color 0.3s ease, box-shadow 0.3s ease;
 }
 
 .settings-input:focus {
   outline: none;
-  border-color: rgba(139, 92, 246, 0.6);
-  box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
+  border-color: rgba(var(--emma-accent-primary-rgb), 0.7);
+  box-shadow:
+    0 0 0 2px rgba(var(--emma-accent-primary-rgb), 0.18),
+    0 0 28px rgba(var(--emma-accent-primary-rgb), 0.25);
 }
 
 .settings-input::placeholder {
-  color: rgba(255, 255, 255, 0.5);
+  color: rgba(188, 194, 235, 0.55);
 }
 
 .input-help {
   display: block;
   margin-top: 8px;
   font-size: 12px;
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--emma-chat-muted);
 }
 
 /* Toggle Switches */
@@ -548,93 +758,129 @@
 
 .toggle-switch {
   position: relative;
-  width: 50px;
-  height: 26px;
+  display: inline-flex;
+  align-items: center;
+  width: 64px;
+  height: 32px;
   cursor: pointer;
 }
 
 .toggle-switch input {
-  display: none;
+  position: absolute;
+  inset: 0;
+  margin: 0;
+  opacity: 0;
+  cursor: pointer;
 }
 
 .toggle-slider {
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(255, 255, 255, 0.2);
-  border-radius: 26px;
-  transition: all 0.3s ease;
+  inset: 0;
+  display: block;
+  background: linear-gradient(125deg, rgba(24, 24, 52, 0.9), rgba(18, 20, 46, 0.78));
+  border-radius: 999px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  transition: all 0.35s cubic-bezier(0.3, 0.7, 0.4, 1.1);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
 }
 
-.toggle-slider:before {
+.toggle-slider::before {
   content: '';
   position: absolute;
-  height: 20px;
-  width: 20px;
-  left: 3px;
-  bottom: 3px;
-  background: white;
+  top: 3px;
+  left: 4px;
+  width: 26px;
+  height: 26px;
   border-radius: 50%;
-  transition: all 0.3s ease;
+  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.95), rgba(220, 225, 255, 0.6));
+  box-shadow:
+    0 4px 16px rgba(0, 0, 0, 0.35),
+    inset 0 1px 0 rgba(255, 255, 255, 0.6);
+  transition: all 0.35s cubic-bezier(0.3, 0.7, 0.4, 1.1);
+}
+
+.toggle-slider::after {
+  content: '';
+  position: absolute;
+  inset: 4px;
+  border-radius: 999px;
+  background: linear-gradient(120deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
+  pointer-events: none;
+  transition: opacity 0.35s ease;
 }
 
 .toggle-switch input:checked + .toggle-slider {
-  background: linear-gradient(135deg, #8B5CF6, #F093FB);
+  background: linear-gradient(135deg, rgba(var(--emma-accent-primary-rgb), 0.7), rgba(var(--emma-accent-secondary-rgb), 0.55));
+  border-color: rgba(var(--emma-accent-primary-rgb), 0.5);
+  box-shadow:
+    0 0 22px rgba(var(--emma-accent-primary-rgb), 0.32),
+    inset 0 1px 0 rgba(255, 255, 255, 0.18);
 }
 
-.toggle-switch input:checked + .toggle-slider:before {
-  transform: translateX(24px);
+.toggle-switch input:checked + .toggle-slider::before {
+  transform: translateX(32px);
+  background: radial-gradient(circle at 30% 30%, #ffffff, rgba(255, 255, 255, 0.78));
+  box-shadow:
+    0 4px 18px rgba(var(--emma-accent-primary-rgb), 0.45),
+    inset 0 1px 0 rgba(255, 255, 255, 0.85);
 }
 
 .toggle-label {
   font-size: 14px;
-  color: rgba(255, 255, 255, 0.9);
+  color: var(--emma-chat-strong);
   font-weight: 500;
 }
 
 /* Settings Buttons */
 .settings-footer {
+  grid-column: 2;
   display: flex;
-  gap: 12px;
+  gap: 14px;
   justify-content: flex-end;
-  padding-top: 20px;
-  border-top: 2px solid rgba(139, 92, 246, 0.2);
+  padding-top: 22px;
+  border-top: 1px solid rgba(255, 255, 255, 0.12);
 }
 
 .settings-btn-secondary {
   padding: 12px 24px;
-  border: 2px solid rgba(255, 255, 255, 0.3);
-  border-radius: 12px;
-  background: rgba(255, 255, 255, 0.1);
-  color: white;
-  font-size: 14px;
+  border: 1px solid rgba(255, 255, 255, 0.16);
+  border-radius: 14px;
+  background: rgba(24, 28, 64, 0.65);
+  color: rgba(224, 228, 255, 0.85);
+  font-size: 0.95rem;
   font-weight: 600;
+  letter-spacing: 0.02em;
   cursor: pointer;
-  transition: all 0.3s ease;
+  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
 }
 
 .settings-btn-secondary:hover {
-  background: rgba(255, 255, 255, 0.2);
+  border-color: rgba(255, 255, 255, 0.28);
+  box-shadow: 0 12px 28px rgba(8, 8, 22, 0.45);
   transform: translateY(-2px);
 }
 
 .settings-btn-primary {
-  padding: 12px 24px;
+  padding: 12px 28px;
   border: none;
-  border-radius: 12px;
-  background: linear-gradient(135deg, #8B5CF6, #F093FB);
-  color: white;
-  font-size: 14px;
-  font-weight: 600;
+  border-radius: 16px;
+  background: linear-gradient(135deg, rgba(var(--emma-accent-primary-rgb), 0.92), rgba(var(--emma-accent-secondary-rgb), 0.68));
+  color: #0f1024;
+  font-size: 0.96rem;
+  font-weight: 700;
+  letter-spacing: 0.03em;
   cursor: pointer;
-  transition: all 0.3s ease;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  box-shadow:
+    0 18px 42px rgba(var(--emma-accent-primary-rgb), 0.38),
+    inset 0 1px 0 rgba(255, 255, 255, 0.65);
 }
 
 .settings-btn-primary:hover {
-  background: linear-gradient(135deg, #7C3AED, #E879F9);
   transform: translateY(-2px);
+  box-shadow:
+    0 26px 60px rgba(var(--emma-accent-primary-rgb), 0.45),
+    inset 0 1px 0 rgba(255, 255, 255, 0.75);
 }
 
 /* ================================
@@ -676,6 +922,39 @@
   }
 }
 
+@media (max-width: 900px) {
+  .settings-content {
+    grid-template-columns: 1fr;
+    gap: 20px;
+  }
+
+  .settings-header {
+    position: static;
+    border-right: 0;
+    padding-right: 0;
+    text-align: center;
+    grid-row: auto;
+  }
+
+  .settings-title {
+    text-transform: none;
+  }
+
+  .settings-subtitle {
+    font-size: 0.92rem;
+  }
+
+  .settings-section {
+    grid-column: 1;
+  }
+
+  .settings-footer {
+    grid-column: 1;
+    justify-content: center;
+    flex-wrap: wrap;
+  }
+}
+
 /* Large screens (1400px and up) */
 @media (min-width: 1400px) {
   .emma-chat-header {
@@ -706,8 +985,8 @@
   align-items: center;
   gap: 12px;
   padding: 12px 16px;
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(139, 92, 246, 0.2);
+  background: var(--emma-chat-surface);
+  border: 1px solid rgba(var(--emma-accent-primary-rgb), 0.2);
   border-radius: 12px;
 }
 
@@ -719,7 +998,7 @@
 
 #status-text {
   font-size: 14px;
-  color: rgba(255, 255, 255, 0.8);
+  color: var(--emma-chat-strong);
   font-weight: 500;
 }
 
@@ -730,8 +1009,8 @@
 .memory-detection-indicator {
   margin-top: 12px;
   padding: 12px 16px;
-  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(236, 72, 153, 0.1));
-  border: 1px solid rgba(139, 92, 246, 0.3);
+  background: linear-gradient(135deg, rgba(var(--emma-accent-primary-rgb), 0.1), rgba(var(--emma-accent-secondary-rgb), 0.1));
+  border: 1px solid rgba(var(--emma-accent-primary-rgb), 0.3);
   border-radius: 12px;
   backdrop-filter: blur(10px);
   animation: memoryDetectionSlideIn 0.4s ease;
@@ -747,30 +1026,30 @@
 .pulse-dot {
   width: 8px;
   height: 8px;
-  background: #8B5CF6;
+  background: var(--emma-accent-primary);
   border-radius: 50%;
   animation: emmaPulse 2s infinite;
 }
 
 .detection-text {
-  color: rgba(255, 255, 255, 0.9);
+  color: var(--emma-chat-strong);
   font-size: 13px;
   font-weight: 500;
   flex: 1;
 }
 
 .confidence {
-  color: rgba(139, 92, 246, 0.8);
+  color: rgba(var(--emma-accent-primary-rgb), 0.8);
   font-size: 12px;
   font-weight: 600;
-  background: rgba(139, 92, 246, 0.15);
+  background: rgba(var(--emma-accent-primary-rgb), 0.15);
   padding: 4px 8px;
   border-radius: 6px;
 }
 
 .save-memory-btn {
-  background: linear-gradient(135deg, #8B5CF6, #EC4899);
-  color: white;
+  background: var(--emma-gradient-primary);
+  color: var(--emma-chat-strong);
   border: none;
   border-radius: 8px;
   padding: 8px 16px;
@@ -778,18 +1057,18 @@
   font-weight: 600;
   cursor: pointer;
   transition: all 0.2s ease;
-  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
+  box-shadow: 0 2px 8px rgba(var(--emma-accent-primary-rgb), 0.3);
 }
 
 .save-memory-btn:hover {
   transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
-  background: linear-gradient(135deg, #9333EA, #F472B6);
+  box-shadow: 0 4px 12px rgba(var(--emma-accent-primary-rgb), 0.4);
+  background: var(--emma-gradient-secondary);
 }
 
 .save-memory-btn:active {
   transform: translateY(0);
-  box-shadow: 0 2px 6px rgba(139, 92, 246, 0.3);
+  box-shadow: 0 2px 6px rgba(var(--emma-accent-primary-rgb), 0.3);
 }
 
 @keyframes emmaPulse {
@@ -817,9 +1096,9 @@
 }
 
 .suggestion-action {
-  background: rgba(139, 92, 246, 0.2);
-  color: rgba(255, 255, 255, 0.9);
-  border: 1px solid rgba(139, 92, 246, 0.4);
+  background: rgba(var(--emma-accent-primary-rgb), 0.2);
+  color: var(--emma-chat-strong);
+  border: 1px solid rgba(var(--emma-accent-primary-rgb), 0.4);
   border-radius: 8px;
   padding: 6px 12px;
   font-size: 12px;
@@ -829,18 +1108,18 @@
 }
 
 .suggestion-action.primary {
-  background: linear-gradient(135deg, #8B5CF6, #EC4899);
-  border: 1px solid rgba(139, 92, 246, 0.6);
-  color: white;
+  background: var(--emma-gradient-primary);
+  border: 1px solid rgba(var(--emma-accent-primary-rgb), 0.6);
+  color: var(--emma-chat-strong);
 }
 
 .suggestion-action:hover {
   transform: translateY(-1px);
-  background: rgba(139, 92, 246, 0.3);
+  background: rgba(var(--emma-accent-primary-rgb), 0.3);
 }
 
 .suggestion-action.primary:hover {
-  background: linear-gradient(135deg, #9333EA, #F472B6);
+  background: var(--emma-gradient-secondary);
 }
 
 /* ================================
@@ -850,8 +1129,8 @@
 .emma-file-upload, .emma-simple-upload {
   margin-top: 16px;
   padding: 20px;
-  background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(236, 72, 153, 0.08));
-  border: 2px dashed rgba(139, 92, 246, 0.4);
+  background: linear-gradient(135deg, rgba(var(--emma-accent-primary-rgb), 0.08), rgba(var(--emma-accent-secondary-rgb), 0.08));
+  border: 2px dashed rgba(var(--emma-accent-primary-rgb), 0.4);
   border-radius: 16px;
   text-align: center;
   transition: all 0.3s ease;
@@ -867,8 +1146,8 @@
 }
 
 .emma-file-btn {
-  background: linear-gradient(135deg, #8B5CF6, #EC4899);
-  color: white;
+  background: var(--emma-gradient-primary);
+  color: var(--emma-chat-strong);
   border: none;
   padding: 12px 24px;
   border-radius: 12px;
@@ -876,18 +1155,18 @@
   font-weight: 600;
   cursor: pointer;
   transition: all 0.3s ease;
-  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
+  box-shadow: 0 4px 12px rgba(var(--emma-accent-primary-rgb), 0.3);
 }
 
 .emma-file-btn:hover {
   transform: translateY(-2px);
-  box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
+  box-shadow: 0 6px 20px rgba(var(--emma-accent-primary-rgb), 0.4);
 }
 
 .emma-skip-btn {
-  background: rgba(255, 255, 255, 0.1);
-  color: rgba(255, 255, 255, 0.8);
-  border: 1px solid rgba(255, 255, 255, 0.2);
+  background: var(--emma-chat-surface-strong);
+  color: var(--emma-chat-strong);
+  border: 1px solid var(--emma-chat-border);
   padding: 8px 16px;
   border-radius: 8px;
   font-size: 14px;
@@ -897,8 +1176,8 @@
 }
 
 .emma-skip-btn:hover {
-  background: rgba(255, 255, 255, 0.15);
-  color: white;
+  background: rgba(var(--emma-neutral-rgb), 0.15);
+  color: var(--emma-chat-strong);
   transform: translateY(-1px);
 }
 
@@ -908,7 +1187,7 @@
 }
 
 .upload-success {
-  color: #10B981;
+  color: var(--emma-chat-success);
   font-weight: 600;
   padding: 8px 16px;
   background: rgba(16, 185, 129, 0.1);
@@ -917,39 +1196,39 @@
 }
 
 .emma-file-upload:hover {
-  border-color: rgba(139, 92, 246, 0.6);
-  background: linear-gradient(135deg, rgba(139, 92, 246, 0.12), rgba(236, 72, 153, 0.12));
+  border-color: rgba(var(--emma-accent-primary-rgb), 0.6);
+  background: linear-gradient(135deg, rgba(var(--emma-accent-primary-rgb), 0.12), rgba(var(--emma-accent-secondary-rgb), 0.12));
   transform: translateY(-2px);
 }
 
 .emma-file-upload.dragover {
-  border-color: #8B5CF6;
-  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(236, 72, 153, 0.2));
+  border-color: var(--emma-accent-primary);
+  background: linear-gradient(135deg, rgba(var(--emma-accent-primary-rgb), 0.2), rgba(var(--emma-accent-secondary-rgb), 0.2));
   transform: scale(1.02);
 }
 
 .upload-icon {
   font-size: 32px;
   margin-bottom: 12px;
-  color: #8B5CF6;
+  color: var(--emma-accent-primary);
   display: block;
 }
 
 .upload-text {
-  color: rgba(255, 255, 255, 0.9);
+  color: var(--emma-chat-strong);
   font-size: 16px;
   font-weight: 600;
   margin-bottom: 8px;
 }
 
 .upload-hint {
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--emma-chat-muted);
   font-size: 13px;
   font-weight: 500;
 }
 
 .upload-formats {
-  color: rgba(139, 92, 246, 0.8);
+  color: rgba(var(--emma-accent-primary-rgb), 0.8);
   font-size: 12px;
   margin-top: 8px;
   font-weight: 500;
@@ -974,8 +1253,8 @@
   align-items: center;
   gap: 12px;
   padding: 12px;
-  background: rgba(139, 92, 246, 0.1);
-  border: 1px solid rgba(139, 92, 246, 0.3);
+  background: rgba(var(--emma-accent-primary-rgb), 0.1);
+  border: 1px solid rgba(var(--emma-accent-primary-rgb), 0.3);
   border-radius: 10px;
   margin-bottom: 8px;
 }
@@ -985,7 +1264,7 @@
   height: 40px;
   border-radius: 8px;
   object-fit: cover;
-  background: rgba(139, 92, 246, 0.2);
+  background: rgba(var(--emma-accent-primary-rgb), 0.2);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -997,20 +1276,20 @@
 }
 
 .file-preview-name {
-  color: rgba(255, 255, 255, 0.9);
+  color: var(--emma-chat-strong);
   font-size: 14px;
   font-weight: 600;
   margin-bottom: 4px;
 }
 
 .file-preview-size {
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--emma-chat-muted);
   font-size: 12px;
 }
 
 .file-remove-btn {
   background: rgba(244, 67, 54, 0.2);
-  color: #F44336;
+  color: var(--emma-chat-error);
   border: 1px solid rgba(244, 67, 54, 0.4);
   border-radius: 6px;
   padding: 6px 10px;
@@ -1033,8 +1312,8 @@
 }
 
 .upload-action-btn {
-  background: linear-gradient(135deg, #8B5CF6, #EC4899);
-  color: white;
+  background: var(--emma-gradient-primary);
+  color: var(--emma-chat-strong);
   border: none;
   border-radius: 10px;
   padding: 10px 20px;
@@ -1042,24 +1321,24 @@
   font-weight: 600;
   cursor: pointer;
   transition: all 0.2s ease;
-  box-shadow: 0 3px 10px rgba(139, 92, 246, 0.3);
+  box-shadow: 0 3px 10px rgba(var(--emma-accent-primary-rgb), 0.3);
 }
 
 .upload-action-btn:hover {
   transform: translateY(-2px);
-  box-shadow: 0 5px 15px rgba(139, 92, 246, 0.4);
-  background: linear-gradient(135deg, #9333EA, #F472B6);
+  box-shadow: 0 5px 15px rgba(var(--emma-accent-primary-rgb), 0.4);
+  background: var(--emma-gradient-secondary);
 }
 
 .upload-action-btn.secondary {
-  background: rgba(139, 92, 246, 0.2);
-  border: 1px solid rgba(139, 92, 246, 0.4);
+  background: rgba(var(--emma-accent-primary-rgb), 0.2);
+  border: 1px solid rgba(var(--emma-accent-primary-rgb), 0.4);
   box-shadow: none;
 }
 
 .upload-action-btn.secondary:hover {
-  background: rgba(139, 92, 246, 0.3);
-  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.2);
+  background: rgba(var(--emma-accent-primary-rgb), 0.3);
+  box-shadow: 0 2px 8px rgba(var(--emma-accent-primary-rgb), 0.2);
 }
 
 /* ================================
@@ -1093,7 +1372,7 @@
 .dialog-content {
   position: relative;
   background: linear-gradient(135deg, rgba(30, 30, 30, 0.95), rgba(20, 20, 20, 0.95));
-  border: 1px solid rgba(139, 92, 246, 0.3);
+  border: 1px solid rgba(var(--emma-accent-primary-rgb), 0.3);
   border-radius: 20px;
   padding: 0;
   max-width: 600px;
@@ -1107,8 +1386,8 @@
 }
 
 .dialog-header {
-  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(236, 72, 153, 0.2));
-  border-bottom: 1px solid rgba(139, 92, 246, 0.3);
+  background: linear-gradient(135deg, rgba(var(--emma-accent-primary-rgb), 0.2), rgba(var(--emma-accent-secondary-rgb), 0.2));
+  border-bottom: 1px solid rgba(var(--emma-accent-primary-rgb), 0.3);
   padding: 20px 24px;
   display: flex;
   align-items: center;
@@ -1116,7 +1395,7 @@
 }
 
 .dialog-header h3 {
-  color: white;
+  color: var(--emma-chat-strong);
   font-size: 20px;
   font-weight: 700;
   margin: 0;
@@ -1124,10 +1403,10 @@
 }
 
 .dialog-close {
-  background: rgba(255, 255, 255, 0.1);
-  border: 1px solid rgba(255, 255, 255, 0.2);
+  background: var(--emma-chat-surface-strong);
+  border: 1px solid var(--emma-chat-border);
   border-radius: 8px;
-  color: white;
+  color: var(--emma-chat-strong);
   width: 32px;
   height: 32px;
   display: flex;
@@ -1152,14 +1431,14 @@
 }
 
 .memory-preview h4 {
-  color: rgba(255, 255, 255, 0.95);
+  color: var(--emma-chat-strong);
   font-size: 18px;
   font-weight: 600;
   margin: 0 0 16px 0;
 }
 
 .memory-preview p {
-  color: rgba(255, 255, 255, 0.8);
+  color: var(--emma-chat-strong);
   font-size: 16px;
   line-height: 1.6;
   margin: 0 0 20px 0;
@@ -1173,18 +1452,18 @@
 }
 
 .meta-item {
-  background: rgba(139, 92, 246, 0.15);
-  color: rgba(255, 255, 255, 0.9);
+  background: rgba(var(--emma-accent-primary-rgb), 0.15);
+  color: var(--emma-chat-strong);
   padding: 6px 12px;
   border-radius: 8px;
   font-size: 12px;
   font-weight: 500;
-  border: 1px solid rgba(139, 92, 246, 0.3);
+  border: 1px solid rgba(var(--emma-accent-primary-rgb), 0.3);
 }
 
 .dialog-footer {
-  background: rgba(139, 92, 246, 0.1);
-  border-top: 1px solid rgba(139, 92, 246, 0.2);
+  background: rgba(var(--emma-accent-primary-rgb), 0.1);
+  border-top: 1px solid rgba(var(--emma-accent-primary-rgb), 0.2);
   padding: 20px 24px;
   display: flex;
   gap: 12px;
@@ -1192,8 +1471,8 @@
 }
 
 .button-primary {
-  background: linear-gradient(135deg, #8B5CF6, #EC4899);
-  color: white;
+  background: var(--emma-gradient-primary);
+  color: var(--emma-chat-strong);
   border: none;
   border-radius: 10px;
   padding: 12px 24px;
@@ -1201,19 +1480,19 @@
   font-weight: 600;
   cursor: pointer;
   transition: all 0.2s ease;
-  box-shadow: 0 3px 10px rgba(139, 92, 246, 0.3);
+  box-shadow: 0 3px 10px rgba(var(--emma-accent-primary-rgb), 0.3);
 }
 
 .button-primary:hover {
   transform: translateY(-2px);
-  box-shadow: 0 5px 15px rgba(139, 92, 246, 0.4);
-  background: linear-gradient(135deg, #9333EA, #F472B6);
+  box-shadow: 0 5px 15px rgba(var(--emma-accent-primary-rgb), 0.4);
+  background: var(--emma-gradient-secondary);
 }
 
 .button-secondary {
-  background: rgba(139, 92, 246, 0.2);
-  color: rgba(255, 255, 255, 0.9);
-  border: 1px solid rgba(139, 92, 246, 0.4);
+  background: rgba(var(--emma-accent-primary-rgb), 0.2);
+  color: var(--emma-chat-strong);
+  border: 1px solid rgba(var(--emma-accent-primary-rgb), 0.4);
   border-radius: 10px;
   padding: 12px 20px;
   font-size: 14px;
@@ -1223,7 +1502,7 @@
 }
 
 .button-secondary:hover {
-  background: rgba(139, 92, 246, 0.3);
+  background: rgba(var(--emma-accent-primary-rgb), 0.3);
   transform: translateY(-1px);
 }
 
@@ -1240,8 +1519,8 @@
    ================================ */
 
 .memory-capsule-preview {
-  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(236, 72, 153, 0.1));
-  border: 1px solid rgba(139, 92, 246, 0.3);
+  background: linear-gradient(135deg, rgba(var(--emma-accent-primary-rgb), 0.1), rgba(var(--emma-accent-secondary-rgb), 0.1));
+  border: 1px solid rgba(var(--emma-accent-primary-rgb), 0.3);
   border-radius: 16px;
   padding: 20px;
   margin: 12px 0;
@@ -1255,23 +1534,23 @@
   gap: 12px;
   margin-bottom: 16px;
   padding-bottom: 12px;
-  border-bottom: 1px solid rgba(139, 92, 246, 0.2);
+  border-bottom: 1px solid rgba(var(--emma-accent-primary-rgb), 0.2);
 }
 
 .capsule-icon {
   font-size: 24px;
-  filter: drop-shadow(0 2px 4px rgba(139, 92, 246, 0.3));
+  filter: drop-shadow(0 2px 4px rgba(var(--emma-accent-primary-rgb), 0.3));
 }
 
 .capsule-title {
-  color: rgba(255, 255, 255, 0.95);
+  color: var(--emma-chat-strong);
   font-size: 18px;
   font-weight: 700;
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
 }
 
 .memory-title {
-  color: rgba(255, 255, 255, 0.95);
+  color: var(--emma-chat-strong);
   font-size: 20px;
   font-weight: 600;
   margin: 0 0 12px 0;
@@ -1279,7 +1558,7 @@
 }
 
 .memory-story {
-  color: rgba(255, 255, 255, 0.85);
+  color: var(--emma-chat-strong);
   font-size: 16px;
   line-height: 1.6;
   margin: 0 0 16px 0;
@@ -1294,14 +1573,14 @@
 }
 
 .detail-label {
-  color: rgba(139, 92, 246, 0.9);
+  color: rgba(111, 99, 217, 0.9);
   font-size: 14px;
   font-weight: 600;
   min-width: 80px;
 }
 
 .detail-value {
-  color: rgba(255, 255, 255, 0.8);
+  color: var(--emma-chat-strong);
   font-size: 14px;
   font-weight: 500;
 }
@@ -1319,15 +1598,15 @@
   aspect-ratio: 1;
   border-radius: 10px;
   overflow: hidden;
-  background: rgba(139, 92, 246, 0.1);
-  border: 1px solid rgba(139, 92, 246, 0.2);
+  background: rgba(var(--emma-accent-primary-rgb), 0.1);
+  border: 1px solid rgba(var(--emma-accent-primary-rgb), 0.2);
   position: relative;
   transition: all 0.2s ease;
 }
 
 .media-thumbnail:hover {
   transform: scale(1.05);
-  border-color: rgba(139, 92, 246, 0.4);
+  border-color: rgba(var(--emma-accent-primary-rgb), 0.4);
 }
 
 .media-thumbnail img {
@@ -1348,7 +1627,7 @@
   left: 50%;
   transform: translate(-50%, -50%);
   font-size: 20px;
-  color: white;
+  color: var(--emma-chat-strong);
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
 }
 
@@ -1368,7 +1647,7 @@
 
 .file-name {
   font-size: 10px;
-  color: rgba(255, 255, 255, 0.7);
+  color: var(--emma-chat-muted);
   text-align: center;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1381,19 +1660,19 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background: rgba(139, 92, 246, 0.2);
-  border: 1px dashed rgba(139, 92, 246, 0.4);
+  background: rgba(var(--emma-accent-primary-rgb), 0.2);
+  border: 1px dashed rgba(var(--emma-accent-primary-rgb), 0.4);
 }
 
 .more-count {
   font-size: 18px;
   font-weight: 700;
-  color: rgba(139, 92, 246, 0.9);
+  color: rgba(111, 99, 217, 0.9);
 }
 
 .more-text {
   font-size: 11px;
-  color: rgba(255, 255, 255, 0.7);
+  color: var(--emma-chat-muted);
   font-weight: 500;
 }
 
@@ -1403,7 +1682,7 @@
   gap: 12px;
   margin-top: 20px;
   padding-top: 16px;
-  border-top: 1px solid rgba(139, 92, 246, 0.2);
+  border-top: 1px solid rgba(var(--emma-accent-primary-rgb), 0.2);
 }
 
 .capsule-btn {
@@ -1418,25 +1697,25 @@
 }
 
 .capsule-btn.primary {
-  background: linear-gradient(135deg, #8B5CF6, #EC4899);
-  color: white;
-  box-shadow: 0 3px 10px rgba(139, 92, 246, 0.3);
+  background: var(--emma-gradient-primary);
+  color: var(--emma-chat-strong);
+  box-shadow: 0 3px 10px rgba(var(--emma-accent-primary-rgb), 0.3);
 }
 
 .capsule-btn.primary:hover {
   transform: translateY(-2px);
-  box-shadow: 0 5px 15px rgba(139, 92, 246, 0.4);
-  background: linear-gradient(135deg, #9333EA, #F472B6);
+  box-shadow: 0 5px 15px rgba(var(--emma-accent-primary-rgb), 0.4);
+  background: var(--emma-gradient-secondary);
 }
 
 .capsule-btn.secondary {
-  background: rgba(139, 92, 246, 0.2);
-  color: rgba(255, 255, 255, 0.9);
-  border: 1px solid rgba(139, 92, 246, 0.4);
+  background: rgba(var(--emma-accent-primary-rgb), 0.2);
+  color: var(--emma-chat-strong);
+  border: 1px solid rgba(var(--emma-accent-primary-rgb), 0.4);
 }
 
 .capsule-btn.secondary:hover {
-  background: rgba(139, 92, 246, 0.3);
+  background: rgba(var(--emma-accent-primary-rgb), 0.3);
   transform: translateY(-1px);
 }
 
@@ -1460,7 +1739,7 @@
 }
 
 .response-text {
-  color: rgba(255, 255, 255, 0.9);
+  color: var(--emma-chat-strong);
   font-size: 16px;
   line-height: 1.6;
   margin: 0 0 16px 0;
@@ -1468,8 +1747,8 @@
 
 /* Memory Results Grid */
 .emma-memory-results {
-  background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(236, 72, 153, 0.08));
-  border: 1px solid rgba(139, 92, 246, 0.25);
+  background: linear-gradient(135deg, rgba(var(--emma-accent-primary-rgb), 0.08), rgba(var(--emma-accent-secondary-rgb), 0.08));
+  border: 1px solid rgba(var(--emma-accent-primary-rgb), 0.25);
   border-radius: 12px;
   padding: 16px;
   margin: 12px 0;
@@ -1481,7 +1760,7 @@
   gap: 8px;
   margin-bottom: 12px;
   padding-bottom: 8px;
-  border-bottom: 1px solid rgba(139, 92, 246, 0.2);
+  border-bottom: 1px solid rgba(var(--emma-accent-primary-rgb), 0.2);
 }
 
 .results-icon {
@@ -1489,7 +1768,7 @@
 }
 
 .results-title {
-  color: rgba(255, 255, 255, 0.95);
+  color: var(--emma-chat-strong);
   font-size: 14px;
   font-weight: 600;
 }
@@ -1501,8 +1780,8 @@
 }
 
 .memory-card {
-  background: rgba(139, 92, 246, 0.1);
-  border: 1px solid rgba(139, 92, 246, 0.2);
+  background: rgba(var(--emma-accent-primary-rgb), 0.1);
+  border: 1px solid rgba(var(--emma-accent-primary-rgb), 0.2);
   border-radius: 10px;
   padding: 12px;
   cursor: pointer;
@@ -1511,8 +1790,8 @@
 
 .memory-card:hover {
   transform: translateY(-2px);
-  border-color: rgba(139, 92, 246, 0.4);
-  background: rgba(139, 92, 246, 0.15);
+  border-color: rgba(var(--emma-accent-primary-rgb), 0.4);
+  background: rgba(var(--emma-accent-primary-rgb), 0.15);
 }
 
 .memory-thumbnail {
@@ -1522,7 +1801,7 @@
   overflow: hidden;
   margin-bottom: 8px;
   position: relative;
-  background: rgba(139, 92, 246, 0.1);
+  background: rgba(var(--emma-accent-primary-rgb), 0.1);
 }
 
 .memory-thumbnail img {
@@ -1539,7 +1818,7 @@
 
 .memory-icon {
   font-size: 24px;
-  color: rgba(139, 92, 246, 0.6);
+  color: rgba(var(--emma-accent-primary-rgb), 0.6);
 }
 
 .media-count {
@@ -1547,7 +1826,7 @@
   top: 4px;
   right: 4px;
   background: rgba(0, 0, 0, 0.7);
-  color: white;
+  color: var(--emma-chat-strong);
   font-size: 10px;
   padding: 2px 6px;
   border-radius: 4px;
@@ -1559,7 +1838,7 @@
 }
 
 .memory-title {
-  color: rgba(255, 255, 255, 0.95);
+  color: var(--emma-chat-strong);
   font-size: 13px;
   font-weight: 600;
   margin-bottom: 4px;
@@ -1567,14 +1846,14 @@
 }
 
 .memory-snippet {
-  color: rgba(255, 255, 255, 0.7);
+  color: var(--emma-chat-muted);
   font-size: 12px;
   line-height: 1.4;
   margin-bottom: 6px;
 }
 
 .memory-people {
-  color: rgba(139, 92, 246, 0.8);
+  color: rgba(var(--emma-accent-primary-rgb), 0.8);
   font-size: 11px;
   font-weight: 500;
 }
@@ -1585,9 +1864,9 @@
 }
 
 .show-more-btn {
-  background: rgba(139, 92, 246, 0.2);
-  color: rgba(255, 255, 255, 0.9);
-  border: 1px solid rgba(139, 92, 246, 0.4);
+  background: rgba(var(--emma-accent-primary-rgb), 0.2);
+  color: var(--emma-chat-strong);
+  border: 1px solid rgba(var(--emma-accent-primary-rgb), 0.4);
   border-radius: 8px;
   padding: 8px 16px;
   font-size: 12px;
@@ -1597,14 +1876,14 @@
 }
 
 .show-more-btn:hover {
-  background: rgba(139, 92, 246, 0.3);
+  background: rgba(var(--emma-accent-primary-rgb), 0.3);
   transform: translateY(-1px);
 }
 
 /* Emma Suggestions */
 .emma-suggestions {
-  background: linear-gradient(135deg, rgba(236, 72, 153, 0.08), rgba(139, 92, 246, 0.08));
-  border: 1px solid rgba(236, 72, 153, 0.25);
+  background: linear-gradient(135deg, rgba(var(--emma-accent-secondary-rgb), 0.08), rgba(var(--emma-accent-primary-rgb), 0.08));
+  border: 1px solid rgba(var(--emma-accent-secondary-rgb), 0.25);
   border-radius: 12px;
   padding: 16px;
   margin: 12px 0;
@@ -1622,7 +1901,7 @@
 }
 
 .suggestions-title {
-  color: rgba(255, 255, 255, 0.95);
+  color: var(--emma-chat-strong);
   font-size: 14px;
   font-weight: 600;
 }
@@ -1634,9 +1913,9 @@
 }
 
 .emma-suggestion-btn {
-  background: rgba(236, 72, 153, 0.2);
-  color: rgba(255, 255, 255, 0.9);
-  border: 1px solid rgba(236, 72, 153, 0.4);
+  background: rgba(var(--emma-accent-secondary-rgb), 0.2);
+  color: var(--emma-chat-strong);
+  border: 1px solid rgba(var(--emma-accent-secondary-rgb), 0.4);
   border-radius: 8px;
   padding: 8px 12px;
   font-size: 12px;
@@ -1648,7 +1927,341 @@
 }
 
 .emma-suggestion-btn:hover {
-  background: rgba(236, 72, 153, 0.3);
+  background: rgba(var(--emma-accent-secondary-rgb), 0.3);
   transform: translateY(-1px);
-  border-color: rgba(236, 72, 153, 0.6);
+  border-color: rgba(var(--emma-accent-secondary-rgb), 0.6);
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+.settings-section > * {
+  position: relative;
+  z-index: 1;
+}
+
+:root {
+  --memory-modal-background: var(--emma-bg-gradient);
+}
+
+:root[data-background="aurora"] {
+  --memory-modal-background: var(--emma-background-aurora);
+}
+
+:root[data-background="sunrise"] {
+  --memory-modal-background: var(--emma-background-sunrise);
+}
+
+:root[data-background="forest"] {
+  --memory-modal-background: var(--emma-background-forest);
+}
+
+:root[data-background="ocean"] {
+  --memory-modal-background: var(--emma-background-ocean);
+}
+
+:root[data-background="ember"] {
+  --memory-modal-background: var(--emma-background-ember);
+}
+
+:root[data-background="blossom"] {
+  --memory-modal-background: var(--emma-background-blossom);
+}
+
+:root[data-background="zen"] {
+  --memory-modal-background: var(--emma-background-zen);
+}
+
+/* Edit Memory Modal */
+.memory-edit-modal {
+  isolation: isolate;
+}
+
+.memory-edit-modal .edit-modal-content {
+  position: relative;
+  border-radius: 28px;
+  padding: clamp(28px, 5vw, 40px);
+  width: min(640px, 92vw);
+  max-height: min(820px, 85vh);
+  overflow-y: auto;
+  color: var(--emma-text-strong, #ffffff);
+  border: 1px solid rgba(var(--emma-accent-primary-rgb, 111, 99, 217), 0.22);
+  background: linear-gradient(155deg, rgba(8, 10, 26, 0.78), rgba(5, 6, 18, 0.94)), var(--memory-modal-background);
+  background-blend-mode: overlay;
+  box-shadow:
+    0 32px 90px rgba(3, 2, 12, 0.65),
+    0 0 0 1px rgba(255, 255, 255, 0.04);
+  backdrop-filter: blur(28px);
+  scroll-behavior: smooth;
+}
+
+.memory-edit-modal .edit-modal-content::before {
+  content: '';
+  position: absolute;
+  inset: 16px;
+  border-radius: 24px;
+  background:
+    radial-gradient(circle at 18% 15%, rgba(var(--emma-accent-primary-rgb, 111, 99, 217), 0.25), transparent 55%),
+    radial-gradient(circle at 75% 12%, rgba(var(--emma-accent-secondary-rgb, 208, 111, 168), 0.2), transparent 60%);
+  filter: blur(55px);
+  opacity: 0.7;
+  pointer-events: none;
+}
+
+.memory-edit-modal .edit-modal-content > * {
+  position: relative;
+  z-index: 1;
+}
+
+.memory-edit-modal .edit-modal-content::-webkit-scrollbar {
+  width: 6px;
+}
+
+.memory-edit-modal .edit-modal-content::-webkit-scrollbar-thumb {
+  background: rgba(var(--emma-neutral-rgb, 255, 255, 255), 0.35);
+  border-radius: 999px;
+}
+
+.memory-edit-modal .edit-modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 24px;
+}
+
+.memory-edit-modal .edit-modal-header h2 {
+  margin: 0;
+  font-size: 24px;
+  font-weight: 600;
+  color: var(--emma-text-strong, #ffffff);
+}
+
+.memory-edit-modal .close-edit-btn {
+  width: 40px;
+  height: 40px;
+  border-radius: 999px;
+  border: 1px solid var(--edit-modal-border);
+  background: rgba(var(--emma-neutral-rgb, 255, 255, 255), 0.12);
+  color: var(--emma-text-strong, #ffffff);
+  cursor: pointer;
+  font-size: 22px;
+  transition: transform 0.2s ease, background 0.2s ease;
+}
+
+.memory-edit-modal .close-edit-btn:hover {
+  transform: scale(1.05);
+  background: rgba(var(--emma-neutral-rgb, 255, 255, 255), 0.2);
+}
+
+.memory-edit-modal .edit-modal-field,
+.memory-edit-modal .edit-modal-section {
+  margin-bottom: 22px;
+}
+
+.memory-edit-modal .edit-modal-label {
+  display: block;
+  margin-bottom: 10px;
+  font-size: 14px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  color: var(--emma-text-standard, rgba(255, 255, 255, 0.85));
+  text-transform: uppercase;
+  opacity: 0.85;
+}
+
+.memory-edit-modal .edit-title-input,
+.memory-edit-modal .edit-content-textarea {
+  width: 100%;
+  border-radius: 14px;
+  border: 1px solid rgba(var(--emma-neutral-rgb, 255, 255, 255), 0.28);
+  background: rgba(var(--emma-neutral-rgb, 255, 255, 255), 0.08);
+  color: var(--emma-text-strong, #ffffff);
+  font-size: 15px;
+  padding: 14px 16px;
+  box-sizing: border-box;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
+}
+
+.memory-edit-modal .edit-content-textarea {
+  min-height: 140px;
+  resize: vertical;
+  line-height: 1.4;
+}
+
+.memory-edit-modal .edit-title-input:focus,
+.memory-edit-modal .edit-content-textarea:focus {
+  outline: none;
+  border-color: rgba(var(--emma-accent-primary-rgb, 111, 99, 217), 0.85);
+  box-shadow: 0 0 0 3px rgba(var(--emma-accent-primary-rgb, 111, 99, 217), 0.25);
+  background: rgba(var(--emma-neutral-rgb, 255, 255, 255), 0.15);
+}
+
+.memory-edit-modal .people-picker-container {
+  background: rgba(var(--emma-neutral-rgb, 255, 255, 255), 0.06);
+  border: 1px solid rgba(var(--emma-neutral-rgb, 255, 255, 255), 0.12);
+  border-radius: 22px;
+  padding: 20px;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
+}
+
+.memory-edit-modal .people-picker-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
+  gap: 16px;
+  margin-bottom: 12px;
+}
+
+.memory-edit-modal .people-picker-loading {
+  text-align: center;
+  font-size: 13px;
+  color: var(--emma-text-muted, rgba(255, 255, 255, 0.65));
+}
+
+.memory-edit-modal .edit-attachments-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
+  gap: 14px;
+}
+
+.memory-edit-modal .attachment-card {
+  position: relative;
+  aspect-ratio: 1;
+  border-radius: 16px;
+  overflow: hidden;
+  background: rgba(var(--emma-neutral-rgb, 255, 255, 255), 0.08);
+  border: 1px dashed rgba(var(--emma-neutral-rgb, 255, 255, 255), 0.25);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.memory-edit-modal .attachment-card img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.memory-edit-modal .attachment-fallback {
+  font-size: 28px;
+  color: var(--emma-text-muted, rgba(255, 255, 255, 0.7));
+}
+
+.memory-edit-modal .remove-attachment-btn {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  width: 24px;
+  height: 24px;
+  border-radius: 999px;
+  border: none;
+  background: var(--emma-danger, #f87171);
+  color: #fff;
+  font-size: 14px;
+  cursor: pointer;
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
+  transition: transform 0.2s ease;
+}
+
+.memory-edit-modal .remove-attachment-btn:hover {
+  transform: scale(1.05);
+}
+
+.memory-edit-modal .add-media-btn {
+  aspect-ratio: 1;
+  border-radius: 16px;
+  border: 2px dashed rgba(var(--emma-accent-primary-rgb, 111, 99, 217), 0.6);
+  background: rgba(var(--emma-accent-primary-rgb, 111, 99, 217), 0.15);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  cursor: pointer;
+  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
+  color: var(--emma-text-strong, #ffffff);
+  font-weight: 600;
+}
+
+.memory-edit-modal .add-media-btn:hover,
+.memory-edit-modal .add-media-btn:focus-visible {
+  outline: none;
+  transform: translateY(-2px);
+  border-color: rgba(var(--emma-accent-primary-rgb, 111, 99, 217), 0.9);
+  background: rgba(var(--emma-accent-primary-rgb, 111, 99, 217), 0.25);
+}
+
+.memory-edit-modal .add-media-icon {
+  font-size: 28px;
+}
+
+.memory-edit-modal .add-media-label {
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.memory-edit-modal .edit-modal-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 16px;
+  margin-top: 32px;
+}
+
+.memory-edit-modal .edit-modal-actions-right {
+  display: inline-flex;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.memory-edit-modal .delete-memory-btn,
+.memory-edit-modal .cancel-edit-btn,
+.memory-edit-modal .save-edit-btn {
+  border-radius: 999px;
+  padding: 12px 26px;
+  font-weight: 600;
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
+}
+
+.memory-edit-modal .delete-memory-btn {
+  border-color: rgba(248, 113, 113, 0.6);
+  background: rgba(248, 113, 113, 0.18);
+  color: var(--emma-danger, #f87171);
+  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
+}
+
+.memory-edit-modal .cancel-edit-btn {
+  border-color: rgba(var(--emma-neutral-rgb, 255, 255, 255), 0.25);
+  background: rgba(var(--emma-neutral-rgb, 255, 255, 255), 0.12);
+  color: var(--emma-text-strong, #ffffff);
+}
+
+.memory-edit-modal .save-edit-btn {
+  background: linear-gradient(120deg,
+      var(--emma-accent-primary, #6f63d9),
+      var(--emma-accent-secondary, #d06fa8));
+  color: var(--emma-text-on-accent, #ffffff);
+  box-shadow: 0 18px 40px rgba(var(--emma-accent-primary-rgb, 111, 99, 217), 0.4);
+}
+
+.memory-edit-modal .delete-memory-btn:hover,
+.memory-edit-modal .cancel-edit-btn:hover,
+.memory-edit-modal .save-edit-btn:hover {
+  transform: translateY(-1px);
+}
+
+.memory-edit-modal .save-edit-btn:active {
+  transform: translateY(0);
 }
diff --git a/css/emma-chat.css b/css/emma-chat.css
deleted file mode 100644
index aa0bd15f..00000000
--- a/css/emma-chat.css
+++ /dev/null
@@ -1,1265 +0,0 @@
-/**
- * Emma Chat Experience - Premium Clean Interface
- * CTO-approved design matching voice capture aesthetic
- */
-
-/* ================================
-   CHAT FOUNDATION
-   ================================ */
-
-.emma-chat-studio {
-  position: relative;
-  padding: 20px 20px 20px 20px; /* PADDING: Equal padding on all sides for balanced spacing */
-  margin: 0;
-  background: rgba(255, 255, 255, 0.02);
-  backdrop-filter: blur(20px);
-  width: 100%;
-  height: 100%;
-  min-height: 600px;
-  max-height: 80vh;
-  overflow: hidden;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-  color: var(--emma-text, #ffffff);
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-/* ================================
-   EMMA ANCHOR (matching voice capture)
-   ================================ */
-
-.emma-anchor {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 12px;
-  text-align: center;
-  padding: 0 8px 0 8px; /* SPACING: Add subtle left/right padding for Emma orb breathing room */
-  flex-shrink: 0;
-}
-
-.webgl-orb-container {
-  position: relative;
-  width: 80px;
-  height: 80px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-/* Fallback styling for when WebGL orb isn't available */
-.webgl-orb-container:empty {
-  background: radial-gradient(
-    circle at 30% 30%,
-    rgba(138, 94, 250, 0.95) 0%,
-    rgba(118, 75, 162, 0.9) 40%,
-    rgba(240, 147, 251, 0.95) 100%
-  );
-  box-shadow: 
-    0 0 25px rgba(118, 75, 162, 0.4),
-    0 0 50px rgba(240, 147, 251, 0.2);
-}
-
-.emma-hint {
-  font-size: 14px;
-  color: rgba(255, 255, 255, 0.9);
-  margin: 0;
-  transition: all 0.4s ease;
-  line-height: 1.4;
-  max-width: 280px;
-  font-weight: 600;
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
-}
-
-/* ================================
-   CHAT MESSAGES AREA
-   ================================ */
-
-.chat-messages-area {
-  flex: 1 1 auto;
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding: 0 4px;
-  margin: 0 -4px;
-  scroll-behavior: smooth;
-  min-height: 0; /* Critical for flex shrinking */
-}
-
-.chat-messages-area::-webkit-scrollbar {
-  width: 6px;
-}
-
-.chat-messages-area::-webkit-scrollbar-track {
-  background: rgba(255, 255, 255, 0.05);
-  border-radius: 3px;
-}
-
-.chat-messages-area::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.2);
-  border-radius: 3px;
-}
-
-.chat-messages-area::-webkit-scrollbar-thumb:hover {
-  background: rgba(255, 255, 255, 0.3);
-}
-
-.messages-container {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  padding: 8px 0;
-  min-height: 100%;
-}
-
-/* ================================
-   MESSAGE BUBBLES
-   ================================ */
-
-.message {
-  display: flex;
-  gap: 12px;
-  max-width: 85%;
-  animation: messageAppear 0.3s ease;
-}
-
-.user-message {
-  align-self: flex-end;
-  flex-direction: row-reverse;
-}
-
-.emma-message {
-  align-self: flex-start;
-}
-
-@keyframes messageAppear {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.message-avatar {
-  width: 32px;
-  height: 32px;
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.emma-avatar-mini {
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  background: radial-gradient(
-    circle at 30% 30%,
-    rgba(138, 94, 250, 0.9) 0%,
-    rgba(118, 75, 162, 0.8) 40%,
-    rgba(240, 147, 251, 0.9) 100%
-  );
-  box-shadow: 0 2px 8px rgba(118, 75, 162, 0.3);
-}
-
-.message-content {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  flex: 1;
-}
-
-.message-text {
-  padding: 12px 16px;
-  border-radius: 18px;
-  font-size: 14px;
-  line-height: 1.4;
-  word-wrap: break-word;
-  position: relative;
-}
-
-.user-message .message-text {
-  background: linear-gradient(
-    135deg,
-    rgba(118, 75, 162, 0.8) 0%,
-    rgba(240, 147, 251, 0.8) 100%
-  );
-  color: white;
-  border-bottom-right-radius: 6px;
-}
-
-.emma-message .message-text {
-  background: linear-gradient(
-    135deg,
-    rgba(255, 255, 255, 0.08) 0%,
-    rgba(255, 255, 255, 0.04) 100%
-  );
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  color: rgba(255, 255, 255, 0.95);
-  border-bottom-left-radius: 6px;
-}
-
-.message-time {
-  font-size: 11px;
-  color: rgba(255, 255, 255, 0.5);
-  padding: 0 4px;
-  align-self: flex-end;
-}
-
-.user-message .message-time {
-  align-self: flex-start;
-}
-
-/* ================================
-   TYPING INDICATOR
-   ================================ */
-
-.typing-indicator {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 8px 16px;
-  background: rgba(255, 255, 255, 0.04);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 18px;
-  max-width: 200px;
-  margin-bottom: 8px;
-}
-
-.typing-dots {
-  display: flex;
-  gap: 4px;
-}
-
-.typing-dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: rgba(240, 147, 251, 0.8);
-  animation: typingPulse 1.4s ease-in-out infinite;
-}
-
-.typing-dot:nth-child(2) {
-  animation-delay: 0.2s;
-}
-
-.typing-dot:nth-child(3) {
-  animation-delay: 0.4s;
-}
-
-@keyframes typingPulse {
-  0%, 60%, 100% {
-    opacity: 0.3;
-    transform: scale(0.8);
-  }
-  30% {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-.typing-text {
-  font-size: 12px;
-  color: rgba(255, 255, 255, 0.6);
-  font-style: italic;
-}
-
-/* ================================
-   CHAT INPUT AREA
-   ================================ */
-
-.chat-input-area {
-  flex: 0 0 auto; /* Never grow, never shrink, auto size */
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  padding: 8px 0;
-  min-height: 80px; /* Ensure minimum space */
-  border-top: 1px solid rgba(255, 255, 255, 0.08);
-}
-
-.input-container {
-  display: flex;
-  gap: 8px;
-  align-items: flex-end;
-  background: rgba(255, 255, 255, 0.08);
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  border-radius: 24px;
-  padding: 8px 12px;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  min-height: 44px;
-  max-height: 120px;
-}
-
-.voice-input-button {
-  width: 44px;
-  height: 44px;
-  border-radius: 12px;
-  background: linear-gradient(
-    135deg,
-    rgba(255, 255, 255, 0.06) 0%,
-    rgba(255, 255, 255, 0.02) 100%
-  );
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  color: rgba(255, 255, 255, 0.7);
-  cursor: pointer;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-
-.voice-input-button:hover {
-  background: linear-gradient(
-    135deg,
-    rgba(255, 255, 255, 0.08) 0%,
-    rgba(255, 255, 255, 0.04) 100%
-  );
-  border-color: rgba(240, 147, 251, 0.3);
-  color: rgba(255, 255, 255, 0.9);
-  transform: translateY(-1px);
-}
-
-.voice-input-button.listening {
-  background: linear-gradient(
-    135deg,
-    rgba(240, 67, 54, 0.8) 0%,
-    rgba(244, 67, 54, 0.6) 100%
-  );
-  border-color: rgba(244, 67, 54, 0.4);
-  color: white;
-  animation: voicePulse 1.5s ease-in-out infinite;
-}
-
-.voice-input-button:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-  transform: none;
-}
-
-@keyframes voicePulse {
-  0%, 100% {
-    box-shadow: 0 0 0 0 rgba(244, 67, 54, 0.4);
-  }
-  50% {
-    box-shadow: 0 0 0 8px rgba(244, 67, 54, 0);
-  }
-}
-
-@keyframes slideInRight {
-  from {
-    transform: translateX(100%);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-
-@keyframes slideOutRight {
-  from {
-    transform: translateX(0);
-    opacity: 1;
-  }
-  to {
-    transform: translateX(100%);
-    opacity: 0;
-  }
-}
-
-.chat-input {
-  flex: 1 1 auto;
-  background: transparent;
-  border: none;
-  border-radius: 16px;
-  padding: 8px 0;
-  color: rgba(255, 255, 255, 0.95);
-  font-size: 14px;
-  line-height: 1.4;
-  resize: none;
-  outline: none;
-  transition: all 0.3s ease;
-  min-height: 28px;
-  max-height: 80px;
-  font-family: inherit;
-}
-
-.chat-input::placeholder {
-  color: rgba(255, 255, 255, 0.5);
-}
-
-.chat-input:focus {
-  border-color: rgba(240, 147, 251, 0.4);
-  background: linear-gradient(
-    135deg,
-    rgba(255, 255, 255, 0.08) 0%,
-    rgba(255, 255, 255, 0.04) 100%
-  );
-  box-shadow: 0 0 0 2px rgba(240, 147, 251, 0.2);
-}
-
-.send-button {
-  width: 44px;
-  height: 44px;
-  border-radius: 12px;
-  background: linear-gradient(
-    135deg,
-    rgba(118, 75, 162, 0.8) 0%,
-    rgba(240, 147, 251, 0.8) 100%
-  );
-  border: 1px solid rgba(240, 147, 251, 0.3);
-  color: white;
-  cursor: pointer;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-
-.send-button:hover {
-  background: linear-gradient(
-    135deg,
-    rgba(118, 75, 162, 0.9) 0%,
-    rgba(240, 147, 251, 0.9) 100%
-  );
-  transform: translateY(-1px);
-  box-shadow: 
-    0 4px 12px rgba(118, 75, 162, 0.3),
-    0 2px 6px rgba(0, 0, 0, 0.2);
-}
-
-.send-button:active {
-  transform: translateY(0);
-}
-
-.send-button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-  transform: none;
-  box-shadow: none;
-}
-
-.input-hints {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  font-size: 11px;
-  color: rgba(255, 255, 255, 0.4);
-}
-
-.hint-item {
-  display: flex;
-  align-items: center;
-}
-
-.hint-separator {
-  opacity: 0.5;
-}
-
-/* ================================
-   RESPONSIVE DESIGN
-   ================================ */
-
-@media (max-width: 600px) {
-  .emma-chat-studio {
-    padding: 12px 16px;
-    gap: 10px;
-    min-height: 100vh;
-    max-height: 100vh;
-  }
-  
-  .emma-anchor {
-    gap: 8px;
-  }
-  
-  .webgl-orb-container {
-    width: 60px;
-    height: 60px;
-  }
-  
-  .chat-messages-area {
-    padding: 0 2px;
-    margin: 0 -2px;
-  }
-  
-  .message {
-    max-width: 95%;
-  }
-  
-  .message-text {
-    padding: 10px 14px;
-    font-size: 13px;
-  }
-  
-  .chat-input-area {
-    min-height: 70px;
-    padding: 6px 0;
-  }
-  
-  .input-container {
-    padding: 6px 10px;
-    gap: 6px;
-  }
-  
-  .chat-input {
-    font-size: 13px;
-    padding: 6px 0;
-    max-height: 60px;
-  }
-  
-  .voice-input-button,
-  .vectorless-settings-button,
-  .send-button {
-    width: 36px;
-    height: 36px;
-  }
-  
-  .input-hints {
-    font-size: 10px;
-    gap: 6px;
-  }
-}
-
-/* ================================
-   FOCUS MODE (matching voice capture)
-   ================================ */
-
-body.chat-focus .info-panel,
-body.chat-focus .welcome-text,
-body.chat-focus .quick-stats,
-body.chat-focus .radial-menu,
-body.chat-focus .constellation-canvas {
-  opacity: 0.12 !important;
-  filter: blur(4px) !important;
-  pointer-events: none !important;
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
-}
-
-/* ================================
-   ACCESSIBILITY
-   ================================ */
-
-.chat-input:focus,
-.send-button:focus {
-  outline: 2px solid rgba(240, 147, 251, 0.8);
-  outline-offset: 2px;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  * {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-  }
-}
-
-/* ================================
-   MESSAGE FORMATTING
-   ================================ */
-
-.message-text strong {
-  font-weight: 600;
-  color: rgba(255, 255, 255, 1);
-}
-
-.message-text em {
-  font-style: italic;
-  color: rgba(240, 147, 251, 0.9);
-}
-
-.message-text br {
-  line-height: 1.6;
-}
-
-/* ================================
-   VECTORLESS AI SETTINGS MODAL
-   ================================ */
-
-.vectorless-settings-modal {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 99998;
-  display: none;
-  align-items: center;
-  justify-content: center;
-}
-
-.modal-backdrop {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.7);
-  backdrop-filter: blur(8px);
-}
-
-.modal-content {
-  position: relative;
-  background: linear-gradient(135deg, rgba(118, 75, 162, 0.95) 0%, rgba(138, 94, 250, 0.95) 100%);
-  backdrop-filter: blur(20px);
-  border-radius: 20px;
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
-  width: 90%;
-  max-width: 500px;
-  max-height: 80vh;
-  overflow: hidden;
-  color: white;
-}
-
-.modal-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 24px 24px 0;
-  margin-bottom: 20px;
-}
-
-.modal-header h3 {
-  margin: 0;
-  font-size: 20px;
-  font-weight: 700;
-  color: white;
-}
-
-.modal-close {
-  background: none;
-  border: none;
-  color: white;
-  font-size: 28px;
-  cursor: pointer;
-  padding: 0;
-  width: 32px;
-  height: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  transition: background 0.3s ease;
-}
-
-.modal-close:hover {
-  background: rgba(255, 255, 255, 0.1);
-}
-
-.modal-body {
-  padding: 0 24px;
-  max-height: 50vh;
-  overflow-y: auto;
-}
-
-.modal-body::-webkit-scrollbar {
-  width: 6px;
-}
-
-.modal-body::-webkit-scrollbar-track {
-  background: rgba(255, 255, 255, 0.1);
-  border-radius: 3px;
-}
-
-.modal-body::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.3);
-  border-radius: 3px;
-}
-
-.settings-section {
-  margin-bottom: 24px;
-}
-
-.settings-section h4 {
-  margin: 0 0 8px 0;
-  font-size: 16px;
-  font-weight: 600;
-  color: white;
-}
-
-.settings-description {
-  margin: 0 0 16px 0;
-  font-size: 14px;
-  color: rgba(255, 255, 255, 0.8);
-  line-height: 1.4;
-}
-
-.input-group {
-  margin-bottom: 16px;
-}
-
-.input-group label {
-  display: block;
-  margin-bottom: 8px;
-  font-size: 14px;
-  font-weight: 500;
-  color: white;
-}
-
-.settings-input {
-  width: 100%;
-  padding: 12px 16px;
-  background: rgba(255, 255, 255, 0.1);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  border-radius: 10px;
-  color: white;
-  font-size: 14px;
-  transition: all 0.3s ease;
-}
-
-.settings-input:focus {
-  outline: none;
-  border-color: rgba(255, 255, 255, 0.4);
-  background: rgba(255, 255, 255, 0.15);
-}
-
-.settings-input::placeholder {
-  color: rgba(255, 255, 255, 0.5);
-}
-
-.input-help {
-  display: block;
-  margin-top: 6px;
-  font-size: 12px;
-  color: rgba(255, 255, 255, 0.6);
-  font-style: italic;
-}
-
-.toggle-group {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.toggle-switch {
-  position: relative;
-  display: inline-block;
-  width: 50px;
-  height: 26px;
-}
-
-.toggle-switch input {
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-
-.toggle-slider {
-  position: absolute;
-  cursor: pointer;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(255, 255, 255, 0.2);
-  transition: 0.3s;
-  border-radius: 26px;
-}
-
-.toggle-slider:before {
-  position: absolute;
-  content: "";
-  height: 20px;
-  width: 20px;
-  left: 3px;
-  bottom: 3px;
-  background: white;
-  transition: 0.3s;
-  border-radius: 50%;
-}
-
-input:checked + .toggle-slider {
-  background: rgba(255, 255, 255, 0.4);
-}
-
-input:checked + .toggle-slider:before {
-  transform: translateX(24px);
-}
-
-.toggle-label {
-  font-size: 14px;
-  color: white;
-  font-weight: 500;
-}
-
-.vectorless-status {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 16px;
-  background: rgba(255, 255, 255, 0.1);
-  border-radius: 12px;
-  border: 1px solid rgba(255, 255, 255, 0.2);
-}
-
-.status-indicator {
-  font-size: 18px;
-}
-
-#status-text {
-  font-size: 14px;
-  color: rgba(255, 255, 255, 0.9);
-  font-weight: 500;
-}
-
-.modal-footer {
-  display: flex;
-  gap: 12px;
-  padding: 20px 24px 24px;
-  justify-content: flex-end;
-}
-
-.button-primary,
-.button-secondary {
-  padding: 12px 24px;
-  border: none;
-  border-radius: 10px;
-  font-size: 14px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.3s ease;
-}
-
-.button-primary {
-  background: rgba(255, 255, 255, 0.2);
-  color: white;
-  border: 1px solid rgba(255, 255, 255, 0.3);
-}
-
-.button-primary:hover {
-  background: rgba(255, 255, 255, 0.3);
-  transform: translateY(-1px);
-}
-
-.button-secondary {
-  background: transparent;
-  color: rgba(255, 255, 255, 0.8);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-}
-
-.button-secondary:hover {
-  background: rgba(255, 255, 255, 0.1);
-  color: white;
-}
-
-/* ================================
-   VECTORLESS SETTINGS BUTTON
-   ================================ */
-
-.vectorless-settings-button {
-  background: rgba(255, 255, 255, 0.1);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  border-radius: 50%;
-  width: 40px;
-  height: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  color: rgba(255, 255, 255, 0.8);
-}
-
-.vectorless-settings-button:hover {
-  background: rgba(255, 255, 255, 0.2);
-  border-color: rgba(255, 255, 255, 0.4);
-  color: white;
-  transform: rotate(90deg);
-}
-
-/* ================================
-   VECTORLESS MESSAGE STYLING
-   ================================ */
-
-.vectorless-message {
-  border-left: 3px solid rgba(138, 94, 250, 0.6);
-}
-
-.vectorless-avatar {
-  background: linear-gradient(135deg, #8A5EFA, #764ba2);
-  position: relative;
-}
-
-.vectorless-avatar::after {
-  content: '🧠';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  font-size: 14px;
-}
-
-.vectorless-badge {
-  background: rgba(138, 94, 250, 0.3);
-  color: rgba(255, 255, 255, 0.9);
-  padding: 2px 8px;
-  border-radius: 10px;
-  font-size: 11px;
-  font-weight: 600;
-  margin-left: 8px;
-}
-
-.message-citations {
-  margin-top: 12px;
-  padding: 12px;
-  background: rgba(255, 255, 255, 0.05);
-  border-radius: 8px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.message-citations h5 {
-  margin: 0 0 8px 0;
-  font-size: 12px;
-  color: rgba(255, 255, 255, 0.8);
-  font-weight: 600;
-}
-
-.citation-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 6px 0;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.citation-item:last-child {
-  border-bottom: none;
-}
-
-.citation-title {
-  font-size: 13px;
-  color: rgba(255, 255, 255, 0.9);
-  font-weight: 500;
-}
-
-.citation-relevance {
-  font-size: 12px;
-  color: rgba(138, 94, 250, 0.8);
-  font-weight: 600;
-}
-
-.message-suggestions {
-  margin-top: 12px;
-}
-
-.suggestions-label {
-  font-size: 12px;
-  color: rgba(255, 255, 255, 0.8);
-  margin-bottom: 8px;
-  font-weight: 600;
-}
-
-.suggestion-buttons {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-}
-
-.suggestion-button {
-  background: rgba(255, 255, 255, 0.1);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  color: rgba(255, 255, 255, 0.9);
-  padding: 6px 12px;
-  border-radius: 15px;
-  font-size: 12px;
-  cursor: pointer;
-  transition: all 0.3s ease;
-}
-
-.suggestion-button:hover {
-  background: rgba(138, 94, 250, 0.3);
-  border-color: rgba(138, 94, 250, 0.5);
-  color: white;
-}
-
-/* ================================
-   INTELLIGENT MEMORY CAPTURE
-   ================================ */
-
-.memory-detection-indicator {
-  margin-top: 12px;
-  padding: 12px 16px;
-  background: linear-gradient(135deg, rgba(138, 94, 250, 0.1) 0%, rgba(240, 147, 251, 0.1) 100%);
-  border: 1px solid rgba(138, 94, 250, 0.3);
-  border-radius: 12px;
-  transition: all 0.3s ease;
-}
-
-.memory-detection-indicator:hover {
-  background: linear-gradient(135deg, rgba(138, 94, 250, 0.15) 0%, rgba(240, 147, 251, 0.15) 100%);
-  border-color: rgba(138, 94, 250, 0.5);
-  transform: translateY(-1px);
-}
-
-.detection-content {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  flex-wrap: wrap;
-}
-
-.pulse-dot {
-  width: 8px;
-  height: 8px;
-  background: rgba(138, 94, 250, 0.8);
-  border-radius: 50%;
-  animation: pulse 2s ease-in-out infinite;
-}
-
-@keyframes pulse {
-  0% {
-    transform: scale(1);
-    opacity: 1;
-  }
-  50% {
-    transform: scale(1.5);
-    opacity: 0.5;
-  }
-  100% {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-
-.detection-text {
-  color: rgba(255, 255, 255, 0.9);
-  font-size: 13px;
-  font-weight: 600;
-}
-
-.confidence {
-  color: rgba(255, 255, 255, 0.9);
-  background: rgba(138, 94, 250, 0.3);
-  padding: 2px 8px;
-  border-radius: 10px;
-  font-size: 12px;
-  font-weight: 600;
-}
-
-.save-memory-btn {
-  margin-left: auto;
-  padding: 6px 14px;
-  background: rgba(138, 94, 250, 0.2);
-  border: 1px solid rgba(138, 94, 250, 0.4);
-  color: white;
-  border-radius: 15px;
-  font-size: 12px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.3s ease;
-}
-
-.save-memory-btn:hover {
-  background: rgba(138, 94, 250, 0.3);
-  border-color: rgba(138, 94, 250, 0.6);
-  transform: translateY(-1px);
-}
-
-/* Memory Suggestion Actions */
-.memory-suggestion-actions {
-  display: flex;
-  gap: 10px;
-  margin-top: 12px;
-  flex-wrap: wrap;
-}
-
-.suggestion-action {
-  padding: 8px 16px;
-  border: none;
-  border-radius: 20px;
-  font-size: 14px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.3s ease;
-}
-
-.suggestion-action.primary {
-  background: linear-gradient(135deg, rgba(138, 94, 250, 0.8) 0%, rgba(240, 147, 251, 0.8) 100%);
-  color: white;
-}
-
-.suggestion-action.primary:hover {
-  background: linear-gradient(135deg, rgba(138, 94, 250, 0.9) 0%, rgba(240, 147, 251, 0.9) 100%);
-  transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(138, 94, 250, 0.3);
-}
-
-.suggestion-action.secondary {
-  background: rgba(255, 255, 255, 0.1);
-  color: rgba(255, 255, 255, 0.8);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-}
-
-.suggestion-action.secondary:hover {
-  background: rgba(255, 255, 255, 0.15);
-  color: white;
-}
-
-/* Memory Preview Dialog */
-.memory-preview-dialog {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 99999;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  opacity: 0;
-  transition: opacity 0.3s ease;
-}
-
-.memory-preview-dialog.show {
-  opacity: 1;
-}
-
-.memory-preview-dialog .dialog-backdrop {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.7);
-  backdrop-filter: blur(8px);
-}
-
-.memory-preview-dialog .dialog-content {
-  position: relative;
-  background: linear-gradient(135deg, rgba(118, 75, 162, 0.95) 0%, rgba(138, 94, 250, 0.95) 100%);
-  backdrop-filter: blur(20px);
-  border-radius: 20px;
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
-  width: 90%;
-  max-width: 600px;
-  max-height: 80vh;
-  overflow: hidden;
-  color: white;
-  transform: scale(0.9);
-  transition: transform 0.3s ease;
-}
-
-.memory-preview-dialog.show .dialog-content {
-  transform: scale(1);
-}
-
-.memory-preview-dialog .dialog-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 24px 24px 0;
-  margin-bottom: 20px;
-}
-
-.memory-preview-dialog .dialog-header h3 {
-  margin: 0;
-  font-size: 20px;
-  font-weight: 700;
-  color: white;
-}
-
-.memory-preview-dialog .dialog-close {
-  background: none;
-  border: none;
-  color: white;
-  font-size: 28px;
-  cursor: pointer;
-  padding: 0;
-  width: 32px;
-  height: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  transition: background 0.3s ease;
-}
-
-.memory-preview-dialog .dialog-close:hover {
-  background: rgba(255, 255, 255, 0.1);
-}
-
-.memory-preview-dialog .dialog-body {
-  padding: 0 24px 24px;
-  max-height: 50vh;
-  overflow-y: auto;
-}
-
-.memory-preview {
-  background: rgba(255, 255, 255, 0.1);
-  border-radius: 16px;
-  padding: 20px;
-  border: 1px solid rgba(255, 255, 255, 0.2);
-}
-
-.memory-preview h4 {
-  margin: 0 0 12px 0;
-  font-size: 18px;
-  font-weight: 700;
-  color: white;
-}
-
-.memory-preview p {
-  margin: 0 0 16px 0;
-  line-height: 1.6;
-  color: rgba(255, 255, 255, 0.9);
-}
-
-.memory-metadata {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 12px;
-}
-
-.meta-item {
-  background: rgba(255, 255, 255, 0.2);
-  padding: 4px 12px;
-  border-radius: 15px;
-  font-size: 12px;
-  color: rgba(255, 255, 255, 0.9);
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.memory-preview-dialog .dialog-footer {
-  display: flex;
-  gap: 12px;
-  padding: 0 24px 24px;
-  justify-content: flex-end;
-}
-
-/* Responsive adjustments for memory capture */
-@media (max-width: 600px) {
-  .detection-content {
-    font-size: 12px;
-  }
-  
-  .save-memory-btn {
-    margin-left: 0;
-    margin-top: 8px;
-    width: 100%;
-  }
-  
-  .memory-suggestion-actions {
-    flex-direction: column;
-  }
-  
-  .suggestion-action {
-    width: 100%;
-  }
-  
-  .memory-preview-dialog .dialog-content {
-    margin: 20px;
-    max-height: calc(100vh - 40px);
-  }
-}
\ No newline at end of file
diff --git a/css/emma-components.css b/css/emma-components.css
new file mode 100644
index 00000000..e0f8f037
--- /dev/null
+++ b/css/emma-components.css
@@ -0,0 +1,194 @@
+/* ============================================================
+   Emma Design System – Interactive Components
+   ============================================================ */
+
+.emma-button {
+  --emma-button-gradient-start: rgba(var(--emma-accent-primary-rgb, 111, 99, 217), 0.92);
+  --emma-button-gradient-end: rgba(var(--emma-accent-secondary-rgb, 208, 111, 168), 0.72);
+  --emma-button-shadow: 0 14px 34px rgba(var(--emma-accent-primary-rgb, 111, 99, 217), 0.28);
+  --emma-button-border: rgba(255, 255, 255, 0.14);
+  --emma-button-ink: var(--emma-text-on-accent, #0f1024);
+
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  padding: 0.95rem 2.2rem;
+  min-height: 3.2rem;
+  font-size: 0.96rem;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  color: var(--emma-button-ink);
+  background: linear-gradient(135deg, var(--emma-button-gradient-start), var(--emma-button-gradient-end));
+  border-radius: 999px;
+  border: 1px solid var(--emma-button-border);
+  box-shadow: var(--emma-button-shadow);
+  cursor: pointer;
+  text-decoration: none;
+  transition: transform 320ms cubic-bezier(0.18, 0.88, 0.26, 1),
+    box-shadow 320ms cubic-bezier(0.18, 0.88, 0.26, 1),
+    filter 320ms ease;
+  overflow: hidden;
+  isolation: isolate;
+}
+
+.emma-button::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background:
+    linear-gradient(120deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0)),
+    linear-gradient(120deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0));
+  mix-blend-mode: soft-light;
+  opacity: 0.4;
+  pointer-events: none;
+  transition: opacity 260ms ease, transform 320ms ease;
+}
+
+.emma-button::after {
+  content: '';
+  position: absolute;
+  inset: 1px;
+  border-radius: inherit;
+  border: 1px solid rgba(255, 255, 255, 0.22);
+  opacity: 0.9;
+  pointer-events: none;
+}
+
+.emma-button span,
+.emma-button .emma-button__label {
+  position: relative;
+  z-index: 1;
+}
+
+.emma-button .emma-button__icon {
+  font-size: 1.2em;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.emma-button:hover,
+.emma-button:focus-visible {
+  outline: none;
+  transform: translateY(-4px);
+  box-shadow:
+    0 18px 42px rgba(var(--emma-accent-primary-rgb, 111, 99, 217), 0.32),
+    0 10px 18px rgba(0, 0, 0, 0.35);
+  filter: saturate(1.04);
+}
+
+.emma-button:hover::before,
+.emma-button:focus-visible::before {
+  opacity: 0.6;
+  transform: translateY(-3px);
+}
+
+.emma-button:active {
+  transform: translateY(-1px);
+  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.32);
+}
+
+.emma-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+  transform: none;
+  box-shadow: none;
+}
+
+.emma-button--primary,
+.emma-button--neutral,
+.emma-button--surface {
+  --emma-button-gradient-start: rgba(var(--emma-accent-primary-rgb, 111, 99, 217), 0.92);
+  --emma-button-gradient-end: rgba(var(--emma-accent-secondary-rgb, 208, 111, 168), 0.72);
+  --emma-button-shadow: 0 14px 34px rgba(var(--emma-accent-primary-rgb, 111, 99, 217), 0.28);
+  --emma-button-ink: var(--emma-text-on-accent, #0f1024);
+}
+
+.emma-button--neutral {
+  --emma-button-gradient-start: rgba(16, 185, 129, 0.95);
+  --emma-button-gradient-end: rgba(56, 189, 248, 0.75);
+  --emma-button-ink: rgba(9, 35, 35, 0.92);
+  --emma-button-shadow: 0 16px 36px rgba(16, 185, 129, 0.28);
+}
+
+.emma-button--affirmative,
+.emma-button--success {
+  --emma-button-gradient-start: rgba(74, 222, 128, 0.92);
+  --emma-button-gradient-end: rgba(34, 197, 94, 0.78);
+  --emma-button-ink: rgba(9, 34, 25, 0.92);
+  --emma-button-shadow: 0 16px 36px rgba(52, 211, 153, 0.3);
+}
+
+.emma-button--danger {
+  --emma-button-gradient-start: rgba(248, 113, 113, 0.92);
+  --emma-button-gradient-end: rgba(239, 68, 68, 0.78);
+  --emma-button-ink: rgba(62, 12, 12, 0.92);
+  --emma-button-shadow: 0 14px 34px rgba(239, 68, 68, 0.28);
+}
+
+.emma-button--outline,
+.emma-button.is-outline {
+  --emma-button-gradient-start: rgba(var(--emma-neutral-rgb, 255, 255, 255), 0.1);
+  --emma-button-gradient-end: rgba(var(--emma-neutral-rgb, 255, 255, 255), 0.02);
+  --emma-button-ink: rgba(232, 236, 255, 0.88);
+  --emma-button-shadow: 0 12px 26px rgba(8, 10, 24, 0.3);
+  --emma-button-border: rgba(255, 255, 255, 0.22);
+}
+
+.emma-button--ghost,
+.emma-button.is-ghost {
+  --emma-button-gradient-start: rgba(18, 20, 48, 0.62);
+  --emma-button-gradient-end: rgba(9, 12, 32, 0.8);
+  --emma-button-ink: rgba(220, 225, 255, 0.86);
+  --emma-button-shadow: 0 12px 24px rgba(0, 0, 0, 0.28);
+  --emma-button-border: rgba(255, 255, 255, 0.12);
+}
+
+.emma-button--block {
+  width: 100%;
+}
+
+.emma-button__pulse {
+  position: absolute;
+  inset: -2px;
+  border-radius: inherit;
+  background: radial-gradient(
+    circle at 50% 50%,
+    rgba(var(--emma-accent-primary-rgb, 111, 99, 217), 0.35) 0%,
+    rgba(var(--emma-accent-primary-rgb, 111, 99, 217), 0) 65%
+  );
+  opacity: 0;
+  transition: opacity 0.6s ease;
+  pointer-events: none;
+}
+
+.emma-button[data-state="connected"] .emma-button__pulse {
+  opacity: 1;
+  animation: emmaButtonPulse 2.8s ease-in-out infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .emma-button {
+    transition: none;
+    transform: none;
+    box-shadow: var(--emma-button-shadow);
+  }
+
+  .emma-button::after {
+    transition: none;
+  }
+
+  .emma-button:hover,
+  .emma-button:focus-visible,
+  .emma-button:active {
+    transform: none;
+  }
+
+  .emma-button[data-state="connected"] .emma-button__pulse {
+    animation: none;
+  }
+}
diff --git a/css/emma-voice-chat.css b/css/emma-voice-chat.css
index 088b5ac5..c4168f1e 100644
--- a/css/emma-voice-chat.css
+++ b/css/emma-voice-chat.css
@@ -56,7 +56,7 @@
   width: 40px;
   height: 40px;
   border-radius: 50%;
-  background: linear-gradient(135deg, #8B5CF6, #F093FB);
+  background: linear-gradient(135deg, #6F63D9, #DEB3E4);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -159,8 +159,8 @@
 }
 
 .emma-message[data-voice="true"] {
-  border-left: 4px solid #8b5cf6;
-  background: rgba(139, 92, 246, 0.1);
+  border-left: 4px solid #6f63d9;
+  background: rgba(111, 99, 217, 0.1);
 }
 
 .emma-message[data-voice="true"]::before {
diff --git a/css/main.css b/css/main.css
index 8128ba1a..15d2f0b2 100644
--- a/css/main.css
+++ b/css/main.css
@@ -1,22 +1,4 @@
-/* Emma Main CSS - Shared styles for all pages */
-
-/* CSS Variables for Emma Brand Colors */
-:root {
-  --emma-gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
-  --emma-gradient-2: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #a855f7 100%);
-  --emma-bg-gradient: linear-gradient(135deg, #1a1033 0%, #2d1b69 50%, #0f0c29 100%);
-  --emma-purple: #764ba2;
-  --emma-pink: #f093fb;
-  --emma-dark: #1a1033;
-  --emma-card-bg: rgba(255, 255, 255, 0.05);
-  --emma-border: rgba(255, 255, 255, 0.1);
-  --emma-text: #ffffff;
-  --emma-text-secondary: rgba(255, 255, 255, 0.7);
-  --emma-text-tertiary: rgba(255, 255, 255, 0.5);
-  --emma-success: #4ade80;
-  --emma-error: #f87171;
-  --emma-warning: #fbbf24;
-}
+/* Emma Main CSS - Shared styles for all pages */
 
 /* Reset and Base Styles */
 * {
@@ -45,12 +27,39 @@ body::before {
   width: 200%;
   height: 200%;
   background: radial-gradient(circle at 20% 20%, rgba(102, 126, 234, 0.3) 0%, transparent 50%),
-              radial-gradient(circle at 80% 80%, rgba(240, 147, 251, 0.3) 0%, transparent 50%),
+              radial-gradient(circle at 80% 80%, rgba(222, 179, 228, 0.3) 0%, transparent 50%),
               radial-gradient(circle at 40% 60%, rgba(118, 75, 162, 0.2) 0%, transparent 50%);
   animation: float 20s ease-in-out infinite;
   z-index: -1;
 }
 
+:root[data-background="aurora"] body::before {
+  background: var(--emma-background-aurora);
+}
+
+:root[data-background="sunrise"] body::before {
+  background: var(--emma-background-sunrise);
+}
+
+:root[data-background="forest"] body::before {
+  background: var(--emma-background-forest);
+}
+
+:root[data-background="ocean"] body::before {
+  background: var(--emma-background-ocean);
+}
+
+:root[data-background="ember"] body::before {
+  background: var(--emma-background-ember);
+}
+
+:root[data-background="blossom"] body::before {
+  background: var(--emma-background-blossom);
+}
+
+:root[data-background="zen"] body::before {
+  background: var(--emma-background-zen);
+}
 @keyframes float {
   0%, 100% { transform: translate(0, 0) rotate(0deg); }
   50% { transform: translate(-20px, -20px) rotate(180deg); }
@@ -80,7 +89,7 @@ h1, h2, h3, h4, h5, h6 {
   font-weight: 300;
   line-height: 1.2;
   margin-bottom: 16px;
-  background: linear-gradient(135deg, #fff 0%, rgba(255, 255, 255, 0.8) 100%);
+  background: linear-gradient(135deg, rgba(var(--emma-neutral-rgb), 1) 0%, rgba(var(--emma-neutral-rgb), 0.8) 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
@@ -104,6 +113,7 @@ a:hover {
 }
 
 /* Buttons */
+
 .btn {
   display: inline-flex;
   align-items: center;
@@ -126,13 +136,13 @@ a:hover {
 }
 
 .btn-secondary {
-  background: rgba(255, 255, 255, 0.1);
+  background: rgba(var(--emma-neutral-rgb), 0.1);
   backdrop-filter: blur(10px);
   border: 1px solid var(--emma-border);
 }
 
 .btn-secondary:hover {
-  background: rgba(255, 255, 255, 0.15);
+  background: rgba(var(--emma-neutral-rgb), 0.15);
 }
 
 /* Logo */
@@ -263,16 +273,16 @@ a:hover {
 }
 
 ::-webkit-scrollbar-track {
-  background: rgba(255, 255, 255, 0.05);
+  background: rgba(var(--emma-neutral-rgb), 0.05);
 }
 
 ::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.2);
+  background: rgba(var(--emma-neutral-rgb), 0.2);
   border-radius: 4px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: rgba(255, 255, 255, 0.3);
+  background: rgba(var(--emma-neutral-rgb), 0.3);
 }
 
 /* Animations */
@@ -303,4 +313,122 @@ a:hover {
   .glass-card {
     padding: 24px;
   }
-}
\ No newline at end of file
+}
+.modal-overlay.invite-modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.8);
+  z-index: 10000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: fadeIn 0.3s ease;
+}
+
+.invite-modal__container {
+  background: linear-gradient(135deg, rgba(40, 30, 60, 0.98) 0%, rgba(30, 20, 50, 0.98) 100%);
+  border-radius: 16px;
+  padding: 32px;
+  max-width: 500px;
+  width: 90%;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+  border: 1px solid rgba(111, 99, 217, 0.3);
+  animation: fadeIn 0.3s ease;
+}
+
+.invite-modal__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+}
+
+.invite-modal__title {
+  margin: 0;
+  color: var(--emma-text-strong);
+  font-size: 24px;
+}
+
+.invite-modal__close {
+  background: none;
+  border: none;
+  color: var(--emma-text-muted);
+  font-size: 24px;
+  cursor: pointer;
+}
+
+.invite-modal__body {
+  margin-bottom: 24px;
+}
+
+.invite-modal__description {
+  color: var(--emma-text-muted);
+  line-height: 1.6;
+  margin-bottom: 16px;
+}
+
+.invite-modal__permissions {
+  background: rgba(111, 99, 217, 0.1);
+  border: 1px solid rgba(111, 99, 217, 0.3);
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 16px;
+}
+
+.invite-modal__permissions-title {
+  margin: 0 0 8px 0;
+  color: var(--emma-accent-primary);
+}
+
+.invite-modal__permissions-list {
+  margin: 0;
+  color: var(--emma-text-standard);
+}
+
+.invite-modal__meta {
+  color: var(--emma-text-muted);
+  font-size: 12px;
+}
+
+.invite-modal__meta-item {
+  margin: 4px 0;
+}
+
+.invite-modal__actions {
+  display: flex;
+  gap: 12px;
+  justify-content: flex-end;
+}
+
+.invite-modal__button {
+  padding: 10px 20px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 16px;
+  font-weight: 500;
+  transition: all 0.3s;
+}
+
+.invite-modal__button--ghost {
+  background: rgba(var(--emma-neutral-rgb), 0.1);
+  border: 1px solid rgba(var(--emma-neutral-rgb), 0.2);
+  color: var(--emma-text-standard);
+}
+
+.invite-modal__button--primary {
+  background: var(--emma-gradient-primary);
+  border: none;
+  color: var(--emma-text-on-accent);
+}
+
+.text-white {
+  color: var(--emma-text-strong);
+}
+
+.text-accent {
+  color: var(--emma-accent-primary);
+}
+
+
+
+
diff --git a/css/memories.css b/css/memories.css
index bf7fca79..6fd94a75 100644
--- a/css/memories.css
+++ b/css/memories.css
@@ -2,11 +2,11 @@
 
 /* CSS Variables */
 :root {
-  --emma-gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
+  --emma-gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #deb3e4 100%);
   --emma-gradient-2: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #a855f7 100%);
   --emma-bg-gradient: linear-gradient(135deg, #1a1033 0%, #2d1b69 50%, #0f0c29 100%);
   --emma-purple: #764ba2;
-  --emma-pink: #f093fb;
+  --emma-pink: #deb3e4;
   --emma-dark: #1a1033;
   --emma-card-bg: rgba(255, 255, 255, 0.05);
   --emma-border: rgba(255, 255, 255, 0.1);
@@ -74,11 +74,11 @@ body {
 }
 .emma-onboarding-modal .onboarding-header {
   padding: 24px;
-  background: linear-gradient(135deg, rgba(102,126,234,0.18) 0%, rgba(118,75,162,0.45) 50%, rgba(240,147,251,0.24) 100%);
+  background: linear-gradient(135deg, rgba(102,126,234,0.18) 0%, rgba(118,75,162,0.45) 50%, rgba(222,179,228,0.24) 100%);
 }
 .emma-onboarding-modal .onboarding-header .orb {
   width: 44px; height: 44px; border-radius: 50%;
-  background: radial-gradient(circle at 30% 30%, #f093fb, #764ba2 60%, #1a1033 100%);
+  background: radial-gradient(circle at 30% 30%, #deb3e4, #764ba2 60%, #1a1033 100%);
   box-shadow: inset 0 0 20px rgba(255,255,255,0.25), 0 0 30px rgba(118,75,162,0.35);
   margin-bottom: 12px;
 }
@@ -328,7 +328,7 @@ body {
 /* Memory Card Header */
 .memory-card-header {
   height: 180px;
-  background: linear-gradient(135deg, #667eea20 0%, #764ba250 50%, #f093fb30 100%);
+  background: linear-gradient(135deg, #667eea20 0%, #764ba250 50%, #deb3e430 100%);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -623,14 +623,14 @@ body {
 .memory-capsule.has-media {
   background: linear-gradient(135deg, 
     rgba(118, 75, 162, 0.1) 0%, 
-    rgba(240, 147, 251, 0.1) 100%);
+    rgba(222, 179, 228, 0.1) 100%);
   border-color: rgba(118, 75, 162, 0.3);
 }
 
 .memory-capsule.has-media:hover {
   background: linear-gradient(135deg, 
     rgba(118, 75, 162, 0.15) 0%, 
-    rgba(240, 147, 251, 0.15) 100%);
+    rgba(222, 179, 228, 0.15) 100%);
   border-color: rgba(118, 75, 162, 0.5);
 }
 
@@ -929,7 +929,7 @@ body {
   justify-content: center;
   background: linear-gradient(135deg, 
     rgba(118, 75, 162, 0.2) 0%, 
-    rgba(240, 147, 251, 0.2) 100%);
+    rgba(222, 179, 228, 0.2) 100%);
   border: 2px dashed var(--emma-purple);
 }
 
@@ -1109,7 +1109,7 @@ body {
 
 .conversation-message.assistant {
   border-left-color: var(--emma-pink);
-  background: linear-gradient(135deg, rgba(118, 75, 162, 0.1) 0%, rgba(240, 147, 251, 0.1) 100%);
+  background: linear-gradient(135deg, rgba(118, 75, 162, 0.1) 0%, rgba(222, 179, 228, 0.1) 100%);
 }
 
 .message-header {
diff --git a/css/memory-detail-modal.css b/css/memory-detail-modal.css
index c406028d..988e4a95 100644
--- a/css/memory-detail-modal.css
+++ b/css/memory-detail-modal.css
@@ -88,7 +88,7 @@
 
 #memory-title-input:focus {
   background: rgba(255, 255, 255, 0.1) !important;
-  border-color: rgba(139, 92, 246, 0.5) !important;
+  border-color: rgba(111, 99, 217, 0.5) !important;
   outline: none !important;
 }
 
@@ -119,12 +119,12 @@
 }
 
 #memory-save-btn {
-  background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%) !important;
+  background: linear-gradient(135deg, #6f63d9 0%, #d06fa8 100%) !important;
   border: none !important;
 }
 
 #memory-save-btn:hover {
-  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4) !important;
+  box-shadow: 0 4px 12px rgba(111, 99, 217, 0.4) !important;
 }
 
 #memory-delete-btn:hover {
@@ -218,7 +218,7 @@
   left: 0 !important;
   right: 0 !important;
   height: 3px !important;
-  background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%) !important;
+  background: linear-gradient(135deg, #6f63d9 0%, #d06fa8 100%) !important;
 }
 
 /* Tab Content */
@@ -327,7 +327,7 @@
   content: '';
   width: 3px;
   height: 16px;
-  background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
+  background: linear-gradient(135deg, #6f63d9 0%, #d06fa8 100%);
   border-radius: 2px;
 }
 
@@ -360,7 +360,7 @@
   width: 24px;
   height: 24px;
   border-radius: 50%;
-  background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
+  background: linear-gradient(135deg, #6f63d9 0%, #d06fa8 100%);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -452,11 +452,11 @@
 .add-tag-input:focus {
   outline: none;
   background: rgba(255, 255, 255, 0.15);
-  border-color: rgba(139, 92, 246, 0.5);
+  border-color: rgba(111, 99, 217, 0.5);
 }
 
 .add-tag-btn {
-  background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
+  background: linear-gradient(135deg, #6f63d9 0%, #d06fa8 100%);
   border: none;
   color: white;
   padding: 8px 16px;
@@ -467,7 +467,7 @@
 
 .add-tag-btn:hover {
   transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
+  box-shadow: 0 4px 12px rgba(111, 99, 217, 0.4);
 }
 
 /* Tag List */
@@ -483,8 +483,8 @@
   align-items: center;
   gap: 6px;
   padding: 6px 12px;
-  background: rgba(139, 92, 246, 0.2);
-  border: 1px solid rgba(139, 92, 246, 0.3);
+  background: rgba(111, 99, 217, 0.2);
+  border: 1px solid rgba(111, 99, 217, 0.3);
   border-radius: 16px;
   font-size: 0.85rem;
   color: rgba(255, 255, 255, 0.9);
@@ -492,8 +492,8 @@
 }
 
 .tag-item:hover {
-  background: rgba(139, 92, 246, 0.3);
-  border-color: rgba(139, 92, 246, 0.5);
+  background: rgba(111, 99, 217, 0.3);
+  border-color: rgba(111, 99, 217, 0.5);
 }
 
 .tag-remove {
diff --git a/css/popup.css b/css/popup.css
index a7abd138..7db00158 100644
--- a/css/popup.css
+++ b/css/popup.css
@@ -2,11 +2,11 @@
 
 /* CSS Variables for Emma Brand Colors */
 :root {
-  --emma-gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
+  --emma-gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #deb3e4 100%);
   --emma-gradient-2: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #a855f7 100%);
   --emma-bg-gradient: linear-gradient(135deg, #1a1033 0%, #2d1b69 50%, #0f0c29 100%);
   --emma-purple: #764ba2;
-  --emma-pink: #f093fb;
+  --emma-pink: #deb3e4;
   --emma-dark: #1a1033;
   --emma-card-bg: rgba(255, 255, 255, 0.05);
   --emma-border: rgba(255, 255, 255, 0.1);
@@ -58,7 +58,7 @@ body.no-webgl::before {
   width: 200%;
   height: 200%;
   background: radial-gradient(circle at 20% 20%, rgba(147, 51, 234, 0.3) 0%, transparent 50%),
-              radial-gradient(circle at 80% 80%, rgba(236, 72, 153, 0.3) 0%, transparent 50%),
+              radial-gradient(circle at 80% 80%, rgba(208, 111, 168, 0.3) 0%, transparent 50%),
               radial-gradient(circle at 40% 60%, rgba(6, 182, 212, 0.2) 0%, transparent 50%);
   animation: float 20s ease-in-out infinite;
   z-index: -1;
@@ -207,7 +207,7 @@ body.no-webgl::before {
   font-size: 24px;
   font-weight: 700;
   letter-spacing: 1px;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #deb3e4 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
@@ -483,7 +483,7 @@ body.no-webgl::before {
 
 .btn.small { padding: 8px 10px; border-radius: 10px; font-size: 12px; }
 .btn.tiny { padding: 4px 8px; border-radius: 8px; font-size: 11px; }
-.btn.primary { background: linear-gradient(135deg, #8658ff 0%, #6843cc 100%); color: #fff; border: 0; }
+.btn.primary { background: linear-gradient(135deg, #6f63d9 0%, #6843cc 100%); color: #fff; border: 0; }
 
 /* HML Modal Redesign - Enhanced Styles */
 .hml-modal-overlay { 
@@ -533,7 +533,7 @@ body.no-webgl::before {
 .hml-icon-bg {
   position: absolute;
   inset: 0;
-  background: linear-gradient(135deg, #6B5CFF 0%, #8658ff 100%);
+  background: linear-gradient(135deg, #6F63D9 0%, #6f63d9 100%);
   border-radius: 10px;
   opacity: 0.2;
   animation: pulse 2s ease-in-out infinite;
@@ -546,7 +546,7 @@ body.no-webgl::before {
 
 .hml-title-icon { 
   font-size: 18px; 
-  color: #8658ff;
+  color: #6f63d9;
   position: relative;
   z-index: 1;
 }
@@ -568,7 +568,7 @@ body.no-webgl::before {
 .hml-status-banner {
   margin: 0 18px 10px;
   padding: 10px 14px;
-  background: linear-gradient(135deg, rgba(107,92,255,0.1) 0%, rgba(134,88,255,0.05) 100%);
+  background: linear-gradient(135deg, rgba(107,92,255,0.1) 0%, rgba(111,99,217,0.05) 100%);
   border: 1px solid rgba(107,92,255,0.2);
   border-radius: 10px;
   display: flex;
@@ -697,7 +697,7 @@ body.no-webgl::before {
   left: 0;
   right: 0;
   height: 2px;
-  background: linear-gradient(90deg, #6B5CFF 0%, #8658ff 100%);
+  background: linear-gradient(90deg, #6F63D9 0%, #6f63d9 100%);
 }
 
 .hml-tab-badge {
@@ -767,7 +767,7 @@ body.no-webgl::before {
 .hml-stat-value {
   font-size: 20px;
   font-weight: 700;
-  color: #8658ff;
+  color: #6f63d9;
   margin-bottom: 2px;
   line-height: 1;
 }
@@ -795,7 +795,7 @@ body.no-webgl::before {
 .hml-action-btn {
   background: rgba(107,92,255,0.2);
   border: 1px solid rgba(107,92,255,0.3);
-  color: #8658ff;
+  color: #6f63d9;
   padding: 6px 12px;
   border-radius: 8px;
   display: flex;
@@ -861,7 +861,7 @@ body.no-webgl::before {
 
 /* Peers Tab Styles */
 .hml-identity-card {
-  background: linear-gradient(135deg, rgba(107,92,255,0.1) 0%, rgba(134,88,255,0.05) 100%);
+  background: linear-gradient(135deg, rgba(107,92,255,0.1) 0%, rgba(111,99,217,0.05) 100%);
   border: 1px solid rgba(107,92,255,0.2);
   border-radius: 10px;
   padding: 10px;
@@ -928,7 +928,7 @@ body.no-webgl::before {
 
 .hml-create-id-btn {
   width: 100%;
-  background: linear-gradient(135deg, #6B5CFF 0%, #8658ff 100%);
+  background: linear-gradient(135deg, #6F63D9 0%, #6f63d9 100%);
   border: none;
   color: #fff;
   padding: 12px 20px;
@@ -1023,7 +1023,7 @@ body.no-webgl::before {
 }
 
 .hml-switch input:checked + .hml-switch-slider {
-  background: #6B5CFF;
+  background: #6F63D9;
 }
 
 .hml-switch input:checked + .hml-switch-slider::after {
@@ -1083,7 +1083,7 @@ body.no-webgl::before {
 .hml-text-btn {
   background: none;
   border: none;
-  color: #8658ff;
+  color: #6f63d9;
   font-size: 13px;
   cursor: pointer;
   padding: 8px 0;
@@ -1091,7 +1091,7 @@ body.no-webgl::before {
 }
 
 .hml-text-btn:hover {
-  color: #6B5CFF;
+  color: #6F63D9;
   text-decoration: underline;
 }
 
@@ -1105,7 +1105,7 @@ body.no-webgl::before {
   width: 60px;
   height: 60px;
   margin: 0 auto 14px;
-  background: linear-gradient(135deg, rgba(107,92,255,0.2) 0%, rgba(134,88,255,0.1) 100%);
+  background: linear-gradient(135deg, rgba(107,92,255,0.2) 0%, rgba(111,99,217,0.1) 100%);
   border-radius: 16px;
   display: flex;
   align-items: center;
@@ -1145,7 +1145,7 @@ body.no-webgl::before {
 
 .hml-feature i {
   font-size: 20px;
-  color: #8658ff;
+  color: #6f63d9;
 }
 
 .hml-feature span {
@@ -1184,7 +1184,7 @@ body.no-webgl::before {
   top: -10px;
   left: 50%;
   transform: translateX(-50%);
-  background: linear-gradient(135deg, #6B5CFF 0%, #8658ff 100%);
+  background: linear-gradient(135deg, #6F63D9 0%, #6f63d9 100%);
   color: #fff;
   font-size: 10px;
   font-weight: 600;
@@ -1204,7 +1204,7 @@ body.no-webgl::before {
 .hml-plan-price {
   font-size: 24px;
   font-weight: 700;
-  color: #8658ff;
+  color: #6f63d9;
   margin-bottom: 16px;
 }
 
@@ -1241,7 +1241,7 @@ body.no-webgl::before {
   width: 100%;
   background: rgba(107,92,255,0.2);
   border: 1px solid rgba(107,92,255,0.3);
-  color: #8658ff;
+  color: #6f63d9;
   padding: 10px;
   border-radius: 10px;
   cursor: pointer;
@@ -1257,7 +1257,7 @@ body.no-webgl::before {
 }
 
 .hml-cloud-cta {
-  background: linear-gradient(135deg, #6B5CFF 0%, #8658ff 100%);
+  background: linear-gradient(135deg, #6F63D9 0%, #6f63d9 100%);
   border: none;
   color: #fff;
   padding: 14px 28px;
@@ -2419,7 +2419,7 @@ input:checked + .slider:before {
 }
 
 .action-card.chat {
-  border-left: 3px solid #8b5cf6;
+  border-left: 3px solid #6f63d9;
 }
 
 /* Inline Chat Panel */
@@ -2477,7 +2477,7 @@ input:checked + .slider:before {
 .message-inline { display: flex; gap: 8px; }
 .message-inline.user { justify-content: flex-end; }
 .bubble-inline { background: rgba(255,255,255,0.06); border: 1px solid var(--emma-border); padding: 8px 10px; border-radius: 12px; max-width: 85%; }
-.message-inline.user .bubble-inline { background: rgba(139,92,246,0.18); border-color: rgba(139,92,246,0.4); }
+.message-inline.user .bubble-inline { background: rgba(111,99,217,0.18); border-color: rgba(111,99,217,0.4); }
 
 /* Persona action row - tidy grouped buttons */
 .persona-actions { display:flex; justify-content: space-between; align-items:center; gap:10px; padding: 10px 12px; border-top:1px solid var(--emma-border); }
diff --git a/css/theme-tokens.css b/css/theme-tokens.css
new file mode 100644
index 00000000..afbcc02d
--- /dev/null
+++ b/css/theme-tokens.css
@@ -0,0 +1,97 @@
+:root {
+  /* Theme metadata */
+  --emma-theme-id: 'aurora-classic';
+  --emma-background-style: aurora;
+
+  /* Core surfaces */
+  --emma-surface-primary: #0a0a0f;
+  --emma-surface-muted: rgba(255, 255, 255, 0.04);
+  --emma-surface-inverse: rgba(255, 255, 255, 0.9);
+
+  /* Gradients and backgrounds */
+  --emma-gradient-primary: linear-gradient(135deg, #5058b4 0%, #5a3f8f 50%, #a468a5 100%);
+  --emma-gradient-secondary: linear-gradient(135deg, #3f3f7d 0%, #5a3f8a 50%, #84528f 100%);
+  --emma-gradient-aurora: linear-gradient(135deg, rgba(80, 88, 180, 0.3) 0%, rgba(90, 63, 143, 0.28) 25%, rgba(164, 104, 165, 0.25) 50%, rgba(67, 132, 187, 0.18) 75%, rgba(80, 88, 180, 0.3) 100%);
+
+  /* Text */
+  --emma-text-strong: #ffffff;
+  --emma-text-standard: rgba(255, 255, 255, 0.85);
+  --emma-text-muted: rgba(255, 255, 255, 0.6);
+  --emma-text-on-accent: #ffffff;
+  --emma-neutral-rgb: 255, 255, 255;
+  --emma-neutral-inverse-rgb: 15, 15, 23;
+
+  /* Accents */
+  --emma-accent-primary: #6f63d9;
+  --emma-accent-secondary: #d06fa8;
+  --emma-accent-primary-rgb: 111, 99, 217;
+  --emma-accent-secondary-rgb: 208, 111, 168;
+  --emma-success: #4ade80;
+  --emma-warning: #fbbf24;
+  --emma-danger: #f87171;
+
+  /* Utility */
+  --emma-border-subtle: rgba(255, 255, 255, 0.1);
+  --emma-border-strong: rgba(255, 255, 255, 0.2);
+  --emma-glow-strong: 0 0 22px rgba(111, 99, 217, 0.32);
+  --emma-shadow-raised: 0 16px 36px rgba(2, 6, 18, 0.35);
+  --emma-button-secondary-bg: rgba(255, 255, 255, 0.1);
+  --emma-button-secondary-border: rgba(255, 255, 255, 0.2);
+  --emma-button-secondary-text: rgba(255, 255, 255, 0.85);
+  --emma-button-secondary-bg-hover: rgba(255, 255, 255, 0.2);
+
+  /* Chat */
+  --emma-chat-user-bubble: linear-gradient(135deg, #6f63d9, #d06fa8);
+  --emma-chat-user-text: #ffffff;
+  --emma-chat-emma-bubble: rgba(37, 38, 65, 0.85);
+  --emma-chat-emma-text: rgba(255, 255, 255, 0.9);
+  --emma-chat-user-meta: rgba(255, 255, 255, 0.7);
+  --emma-chat-emma-meta: rgba(255, 255, 255, 0.6);
+  --emma-chat-surface: rgba(255, 255, 255, 0.05);
+  --emma-chat-surface-strong: rgba(255, 255, 255, 0.1);
+  --emma-chat-border: rgba(255, 255, 255, 0.2);
+  --emma-chat-muted: rgba(255, 255, 255, 0.7);
+  --emma-chat-strong: rgba(255, 255, 255, 0.9);
+  --emma-chat-error: #f87171;
+  --emma-chat-success: #10b981;
+
+  /* Navigation / interactions */
+  --emma-nav-highlight: rgba(var(--emma-accent-primary-rgb), 0.16);
+  --emma-background-aurora: linear-gradient(135deg, rgba(80, 88, 180, 0.25), rgba(90, 63, 143, 0.25));
+  --emma-background-sunrise: linear-gradient(135deg, rgba(255, 176, 124, 0.35), rgba(255, 220, 186, 0.35));
+  --emma-background-forest: linear-gradient(135deg, rgba(58, 149, 138, 0.4), rgba(14, 52, 54, 0.4));
+  --emma-background-ocean: linear-gradient(135deg, rgba(77, 196, 255, 0.2), rgba(14, 84, 120, 0.4));
+  --emma-background-ember: linear-gradient(135deg, rgba(249, 115, 22, 0.18), rgba(71, 21, 27, 0.45));
+  --emma-background-blossom: linear-gradient(135deg, rgba(252, 179, 255, 0.24), rgba(241, 179, 239, 0.32));
+  --emma-background-zen: linear-gradient(135deg, rgba(96, 165, 250, 0.2), rgba(17, 94, 89, 0.24));
+  --emma-accent-surface: rgba(var(--emma-accent-primary-rgb), 0.14);
+  --emma-accent-surface-strong: rgba(var(--emma-accent-primary-rgb), 0.24);
+  --emma-accent-border: rgba(var(--emma-accent-primary-rgb), 0.3);
+
+  /* Memory constellation */
+  --emma-constellation-node: rgba(var(--emma-accent-primary-rgb), 0.45);
+  --emma-constellation-glow: rgba(var(--emma-accent-primary-rgb), 0.6);
+
+  /* Orb */
+  --emma-orb-hue: 265;
+  --emma-orb-hover-intensity: 0.25;
+
+  /* Legacy aliases */
+  --emma-gradient-1: var(--emma-gradient-primary);
+  --emma-gradient-2: var(--emma-gradient-secondary);
+  --emma-aurora: var(--emma-gradient-aurora);
+  --emma-bg-gradient: linear-gradient(135deg, var(--emma-surface-primary) 0%, #1a1033 50%, #0f0c29 100%);
+  --emma-purple: var(--emma-accent-primary);
+  --emma-pink: var(--emma-accent-secondary);
+  --emma-blue: #667eea;
+  --emma-dark: var(--emma-surface-primary);
+  --emma-card-bg: var(--emma-surface-muted);
+  --emma-glass: rgba(255, 255, 255, 0.05);
+  --emma-border: var(--emma-border-subtle);
+  --emma-text: var(--emma-text-strong);
+  --emma-text-secondary: var(--emma-text-standard);
+  --emma-text-tertiary: var(--emma-text-muted);
+}
+
+
+
diff --git a/css/unified-memory-wizard.css b/css/unified-memory-wizard.css
index db6c7028..55ae028e 100644
--- a/css/unified-memory-wizard.css
+++ b/css/unified-memory-wizard.css
@@ -8,11 +8,11 @@
 
 /* Emma CSS Variables */
 :root {
-  --emma-gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
+  --emma-gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #deb3e4 100%);
   --emma-gradient-2: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #a855f7 100%);
   --emma-bg-gradient: linear-gradient(135deg, #1a1033 0%, #2d1b69 50%, #0f0c29 100%);
   --emma-purple: #764ba2;
-  --emma-pink: #f093fb;
+  --emma-pink: #deb3e4;
   --emma-dark: #1a1033;
   --emma-card-bg: rgba(255, 255, 255, 0.05);
   --emma-border: rgba(255, 255, 255, 0.1);
@@ -232,7 +232,7 @@
 
 .method-option:hover {
   background: rgba(255, 255, 255, 0.08);
-  border-color: rgba(240, 147, 251, 0.3);
+  border-color: rgba(222, 179, 228, 0.3);
   transform: translateY(-2px);
   box-shadow: 0 8px 32px rgba(118, 75, 162, 0.15);
 }
@@ -620,7 +620,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 50%, rgba(240, 147, 251, 0.05) 100%);
+  background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 50%, rgba(222, 179, 228, 0.05) 100%);
   opacity: 0;
   transition: opacity 0.3s ease;
 }
@@ -1148,7 +1148,7 @@
 }
 
 .question-actions .wizard-btn-primary {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #deb3e4 100%);
   border: none;
   color: white;
   box-shadow: 0 4px 16px rgba(118, 75, 162, 0.3);
diff --git a/css/vault-control-panel.css b/css/vault-control-panel.css
new file mode 100644
index 00000000..30d9e121
--- /dev/null
+++ b/css/vault-control-panel.css
@@ -0,0 +1,890 @@
+.emma-floating-button {
+  width: 52px;
+  height: 52px;
+  border-radius: 50%;
+  border: 1px solid rgba(var(--emma-accent-primary-rgb, 111, 99, 217), 0.4);
+  background: rgba(var(--emma-accent-primary-rgb, 111, 99, 217), 0.18);
+  color: var(--emma-accent-primary, #6f63d9);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 26px;
+  cursor: pointer;
+  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, border 180ms ease;
+  backdrop-filter: blur(12px);
+}
+
+.emma-floating-button:hover,
+.emma-floating-button:focus-visible {
+  transform: scale(1.08);
+  background: rgba(var(--emma-accent-primary-rgb, 111, 99, 217), 0.28);
+  border-color: rgba(var(--emma-accent-primary-rgb, 111, 99, 217), 0.55);
+  box-shadow: 0 8px 24px rgba(var(--emma-accent-primary-rgb, 111, 99, 217), 0.28);
+  color: var(--emma-text-strong, #ffffff);
+  outline: none;
+}
+
+.emma-floating-button:focus-visible {
+  box-shadow: 0 0 0 2px rgba(var(--emma-neutral-rgb, 255, 255, 255), 0.35),
+    0 8px 24px rgba(var(--emma-accent-primary-rgb, 111, 99, 217), 0.28);
+}
+
+.emma-floating-button svg {
+  width: 24px;
+  height: 24px;
+  stroke: currentColor;
+}
+
+.vault-control-shield {
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  z-index: 9999;
+}
+
+:root {
+  --vault-modal-background: var(--emma-bg-gradient);
+}
+
+:root[data-background="aurora"] {
+  --vault-modal-background: var(--emma-background-aurora);
+}
+
+:root[data-background="sunrise"] {
+  --vault-modal-background: var(--emma-background-sunrise);
+}
+
+:root[data-background="forest"] {
+  --vault-modal-background: var(--emma-background-forest);
+}
+
+:root[data-background="ocean"] {
+  --vault-modal-background: var(--emma-background-ocean);
+}
+
+:root[data-background="ember"] {
+  --vault-modal-background: var(--emma-background-ember);
+}
+
+:root[data-background="blossom"] {
+  --vault-modal-background: var(--emma-background-blossom);
+}
+
+:root[data-background="zen"] {
+  --vault-modal-background: var(--emma-background-zen);
+}
+
+.vault-control-overlay {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: clamp(24px, 5vh, 48px) clamp(12px, 4vw, 40px);
+  backdrop-filter: blur(30px);
+  background: var(--vault-modal-background);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-gutter: stable;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 260ms ease;
+  z-index: 10000;
+}
+
+.vault-control-overlay::before {
+  content: '';
+  position: absolute;
+  inset: clamp(18px, 3vw, 36px);
+  border-radius: 40px;
+  background:
+    radial-gradient(circle at 20% 18%, rgba(var(--emma-accent-primary-rgb, 111, 99, 217), 0.22), transparent 55%),
+    radial-gradient(circle at 80% 12%, rgba(var(--emma-accent-secondary-rgb, 208, 111, 168), 0.16), transparent 60%);
+  opacity: 0.5;
+  filter: blur(70px);
+  pointer-events: none;
+  transition: opacity 260ms ease;
+}
+
+.vault-control-overlay.is-visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.vault-control-dialog {
+  position: relative;
+  width: min(900px, calc(100vw - 48px));
+  max-height: 90vh;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  -webkit-overflow-scrolling: touch;
+  padding: 0;
+  border-radius: 32px;
+  border: 1px solid rgba(var(--emma-accent-primary-rgb, 111, 99, 217), 0.18);
+  background: linear-gradient(148deg, rgba(6, 8, 20, 0.52), rgba(6, 8, 18, 0.76)), var(--vault-modal-background);
+  background-blend-mode: overlay;
+  color: var(--emma-text-strong, #ffffff);
+  box-shadow:
+    0 28px 80px rgba(3, 2, 12, 0.6),
+    0 0 0 1px rgba(255, 255, 255, 0.04);
+  backdrop-filter: blur(26px);
+  transform: translateY(24px) scale(0.94);
+  opacity: 0;
+  transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1), opacity 260ms ease;
+  overflow: hidden;
+}
+
+.vault-control-dialog::before {
+  content: '';
+  position: absolute;
+  inset: 1px;
+  border-radius: inherit;
+  border: 1px solid rgba(255, 255, 255, 0.04);
+  pointer-events: none;
+  z-index: 1;
+}
+
+.vault-control-overlay.is-visible .vault-control-dialog {
+  transform: translateY(0) scale(1);
+  opacity: 1;
+}
+
+.vault-control__dismiss {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  border: 1px solid rgba(var(--emma-accent-primary-rgb, 111, 99, 217), 0.35);
+  background: rgba(10, 14, 30, 0.68);
+  color: var(--emma-text-strong, #ffffff);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  z-index: 3;
+  box-shadow: 0 12px 24px rgba(3, 5, 18, 0.4);
+  transition:
+    transform 0.22s ease,
+    box-shadow 0.22s ease,
+    background 0.22s ease,
+    border-color 0.22s ease,
+    color 0.22s ease;
+  backdrop-filter: blur(12px);
+  touch-action: manipulation;
+}
+
+.vault-control__dismiss svg {
+  width: 18px;
+  height: 18px;
+  stroke: currentColor;
+  stroke-width: 1.8;
+}
+
+.vault-control__dismiss:hover,
+.vault-control__dismiss:focus-visible {
+  transform: translateY(-2px);
+  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.32);
+  outline: none;
+  background: rgba(var(--emma-accent-primary-rgb, 111, 99, 217), 0.28);
+  border-color: rgba(var(--emma-accent-primary-rgb, 111, 99, 217), 0.6);
+}
+
+body[data-surface="light"] .vault-control__dismiss,
+body[data-theme="light"] .vault-control__dismiss {
+  background: rgba(255, 255, 255, 0.9);
+  color: var(--emma-neutral-inverse, #0f0f17);
+  border-color: rgba(var(--emma-neutral-inverse-rgb, 15, 15, 23), 0.18);
+  box-shadow: 0 12px 22px rgba(17, 24, 39, 0.2);
+}
+
+body[data-surface="light"] .vault-control__dismiss:hover,
+body[data-surface="light"] .vault-control__dismiss:focus-visible,
+body[data-theme="light"] .vault-control__dismiss:hover,
+body[data-theme="light"] .vault-control__dismiss:focus-visible {
+  color: var(--emma-accent-primary, #6f63d9);
+  background: rgba(var(--emma-accent-primary-rgb, 111, 99, 217), 0.16);
+  border-color: rgba(var(--emma-accent-primary-rgb, 111, 99, 217), 0.45);
+}
+
+.vault-control {
+  position: relative;
+  display: grid;
+  gap: clamp(20px, 2.4vw, 32px);
+  padding: clamp(28px, 3vw, 44px);
+  flex: 1 1 auto;
+  min-height: 0;
+  color: rgba(239, 241, 255, 0.88);
+  z-index: 2;
+  max-height: clamp(60vh, 78vh, 86vh);
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  padding-right: calc(clamp(28px, 3vw, 44px) + 6px);
+  align-content: start;
+  scrollbar-gutter: stable both-edges;
+}
+
+.vault-control::after {
+  content: '';
+  position: absolute;
+  inset: -18% -12% 35% -12%;
+  background:
+    radial-gradient(circle at 12% 12%, rgba(var(--emma-accent-primary-rgb, 111, 99, 217), 0.32), transparent 50%),
+    radial-gradient(circle at 78% 0%, rgba(110, 211, 255, 0.22), transparent 58%);
+  opacity: 0.7;
+  filter: blur(50px);
+  z-index: -1;
+  pointer-events: none;
+}
+
+.vault-control__hero {
+  position: relative;
+  z-index: 1;
+}
+
+.vault-hero {
+  position: relative;
+  display: grid;
+  gap: 20px;
+  padding: clamp(26px, 3vw, 36px);
+  border-radius: 28px;
+  border: 1px solid rgba(var(--emma-accent-primary-rgb, 111, 99, 217), 0.32);
+  background: linear-gradient(160deg, rgba(11, 14, 32, 0.55), rgba(8, 10, 26, 0.78)), var(--vault-modal-background);
+  background-blend-mode: overlay;
+  box-shadow:
+    0 20px 48px rgba(12, 8, 34, 0.5),
+    inset 0 1px 0 rgba(255, 255, 255, 0.08);
+  overflow: hidden;
+  --vault-sync-accent: var(--emma-accent-primary, #6f63d9);
+}
+
+.vault-hero__glow {
+  position: absolute;
+  inset: -35% -25% 45% -25%;
+  background:
+    radial-gradient(circle at 30% 20%, rgba(var(--emma-accent-primary-rgb, 111, 99, 217), 0.42), transparent 58%),
+    radial-gradient(circle at 82% -10%, rgba(96, 199, 255, 0.35), transparent 64%);
+  opacity: 0.9;
+  filter: blur(60px);
+  pointer-events: none;
+}
+
+.vault-hero__signal {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 6px 14px;
+  border-radius: 999px;
+  background: rgba(18, 20, 48, 0.7);
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  width: fit-content;
+  font-size: 0.75rem;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: rgba(210, 217, 255, 0.78);
+  position: relative;
+  z-index: 1;
+}
+
+.vault-hero__signal-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--vault-sync-accent, var(--emma-accent-primary, #6f63d9));
+  box-shadow: 0 0 8px var(--vault-sync-accent, rgba(111, 99, 217, 0.6));
+  animation: vaultSignalPulse 2.4s ease-in-out infinite;
+}
+
+.vault-hero__signal-dot[data-state="dirty"] {
+  background: var(--emma-warning, #f59e0b);
+  box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
+}
+
+.vault-hero__signal-dot[data-state="clean"] {
+  background: var(--emma-success, #34d399);
+  box-shadow: 0 0 8px rgba(52, 211, 153, 0.6);
+}
+
+.vault-hero__core {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 18px;
+  align-items: center;
+  position: relative;
+  z-index: 1;
+}
+
+.vault-hero__icon {
+  width: 72px;
+  height: 72px;
+  border-radius: 22px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 2.5rem;
+  background: linear-gradient(200deg, rgba(var(--emma-accent-primary-rgb, 111, 99, 217), 0.4), rgba(26, 22, 60, 0.85));
+  box-shadow:
+    0 12px 28px rgba(14, 8, 40, 0.45),
+    inset 0 1px 0 rgba(255, 255, 255, 0.18);
+}
+
+.vault-hero__eyebrow {
+  display: inline-block;
+  font-size: 0.75rem;
+  letter-spacing: 0.26em;
+  text-transform: uppercase;
+  color: rgba(205, 211, 255, 0.6);
+  margin-bottom: 6px;
+}
+
+.vault-hero__title {
+  font-size: clamp(1.8rem, 2.4vw, 2.3rem);
+  margin: 0;
+  letter-spacing: 0.015em;
+}
+
+.vault-hero__subtitle {
+  margin: 10px 0 0;
+  font-size: 0.95rem;
+  color: rgba(214, 219, 255, 0.76);
+  max-width: 25ch;
+  line-height: 1.6;
+}
+
+.vault-hero__quickstats {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  gap: 12px;
+  position: relative;
+  z-index: 1;
+}
+
+.vault-hero__stat {
+  border-radius: 16px;
+  padding: 14px 16px;
+  background: rgba(24, 22, 54, 0.65);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  display: grid;
+  gap: 6px;
+}
+
+.vault-hero__stat span {
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.18em;
+  color: rgba(184, 193, 240, 0.65);
+}
+
+.vault-hero__stat strong {
+  font-size: clamp(1rem, 1.5vw, 1.35rem);
+  letter-spacing: 0.03em;
+}
+
+.vault-hero__meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding-top: 6px;
+  border-top: 1px solid rgba(255, 255, 255, 0.08);
+  position: relative;
+  z-index: 1;
+}
+
+.vault-hero__chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  font-size: 0.78rem;
+  color: rgba(225, 229, 255, 0.78);
+  background: linear-gradient(120deg, rgba(var(--emma-accent-primary-rgb, 111, 99, 217), 0.38), rgba(18, 22, 58, 0.7));
+  border-radius: 999px;
+  text-transform: uppercase;
+  letter-spacing: 0.16em;
+}
+
+.vault-hero__name {
+  font-size: 0.95rem;
+  color: rgba(238, 240, 255, 0.9);
+  letter-spacing: 0.04em;
+}
+
+@keyframes vaultSignalPulse {
+  0%,
+  100% {
+    transform: scale(1);
+    opacity: 0.8;
+  }
+  50% {
+    transform: scale(1.18);
+    opacity: 1;
+  }
+}
+
+.vault-section {
+  position: relative;
+  border-radius: 24px;
+  padding: 28px 28px 24px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: linear-gradient(155deg, rgba(20, 18, 40, 0.82) 0%, rgba(17, 16, 34, 0.88) 60%, rgba(14, 13, 30, 0.94) 100%), var(--vault-modal-background);
+  background-blend-mode: overlay;
+  box-shadow:
+    0 24px 60px rgba(0, 0, 0, 0.38),
+    inset 0 1px 0 rgba(255, 255, 255, 0.06);
+  display: grid;
+  gap: 20px;
+  overflow: hidden;
+  isolation: isolate;
+}
+
+.vault-section::after {
+  content: '';
+  position: absolute;
+  inset: -55% -10% 70% -35%;
+  background: radial-gradient(circle at 0% 50%, rgba(var(--emma-accent-primary-rgb, 111, 99, 217), 0.25), transparent 60%);
+  opacity: 0.4;
+  pointer-events: none;
+}
+.vault-section__header {
+  display: grid;
+  gap: 10px;
+  position: relative;
+  z-index: 1;
+  align-content: start;
+}
+
+.vault-section__eyebrow {
+  font-size: 0.7rem;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: rgba(190, 198, 244, 0.52);
+}
+
+.vault-section__headline {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.vault-section__icon {
+  font-size: 22px;
+}
+
+.vault-section__title {
+  font-size: 19px;
+  font-weight: 600;
+  margin: 0;
+  color: var(--emma-text-strong, #ffffff);
+  letter-spacing: 0.02em;
+}
+
+.vault-stats {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 18px 22px;
+  position: relative;
+  z-index: 1;
+}
+
+.vault-stats__item {
+  position: relative;
+  padding: 16px 18px;
+  border-radius: 18px;
+  background: linear-gradient(145deg, rgba(38, 34, 68, 0.55), rgba(22, 20, 48, 0.35));
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
+  display: grid;
+  gap: 8px;
+}
+
+.vault-stats__item dt {
+  font-size: 13px;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  color: rgba(165, 175, 214, 0.72);
+}
+
+.vault-stats__item dd {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--emma-text-strong, #ffffff);
+}
+
+.vault-sync {
+  display: grid;
+  gap: 16px;
+  position: relative;
+  z-index: 1;
+}
+
+.vault-sync__row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 16px;
+  font-size: 15px;
+  padding: 14px 16px;
+  border-radius: 16px;
+  background: rgba(32, 30, 56, 0.6);
+  border: 1px solid rgba(255, 255, 255, 0.04);
+}
+
+.vault-sync__label {
+  color: rgba(179, 189, 226, 0.72);
+  font-weight: 500;
+  letter-spacing: 0.01em;
+}
+
+.vault-sync__value {
+  color: var(--emma-text-strong, #ffffff);
+  font-weight: 600;
+  letter-spacing: 0.01em;
+}
+
+.vault-section--sync {
+  --vault-sync-accent: var(--emma-accent-primary, #6f63d9);
+  background: linear-gradient(160deg, rgba(24, 26, 56, 0.92) 0%, rgba(18, 19, 46, 0.88) 62%, rgba(12, 13, 38, 0.94) 100%);
+}
+
+.vault-section--sync[data-sync-state="clean"] {
+  --vault-sync-accent: var(--emma-success, #34d399);
+}
+
+.vault-section--sync[data-sync-state="dirty"] {
+  --vault-sync-accent: var(--emma-warning, #f59e0b);
+}
+
+.vault-section--info {
+  background: linear-gradient(150deg, rgba(28, 28, 64, 0.78), rgba(18, 18, 44, 0.9));
+}
+
+.vault-section--controls {
+  background: linear-gradient(150deg, rgba(22, 24, 52, 0.85), rgba(16, 18, 42, 0.9));
+  border-color: rgba(255, 255, 255, 0.06);
+}
+
+.vault-section--controls .vault-section__header {
+  margin-bottom: 4px;
+}
+
+.vault-section--controls .emma-button {
+  justify-content: space-between;
+}
+
+.vault-sync__badge {
+  position: relative;
+  padding: 18px 22px 18px 28px;
+  border-radius: 18px;
+  border: 1px solid rgba(var(--emma-neutral-rgb, 255, 255, 255), 0.12);
+  background: rgba(var(--emma-neutral-rgb, 255, 255, 255), 0.04);
+  color: var(--emma-text-standard, rgba(255, 255, 255, 0.86));
+  display: grid;
+  gap: 6px;
+  font-size: 0.96rem;
+  box-shadow: inset 0 0 0 1px rgba(var(--emma-neutral-rgb, 255, 255, 255), 0.05);
+}
+
+.vault-sync__badge strong {
+  font-weight: 700;
+  color: var(--emma-text-strong, #ffffff);
+  letter-spacing: 0.02em;
+}
+
+.vault-sync__badge::before {
+  content: '';
+  position: absolute;
+  left: 14px;
+  top: 14px;
+  bottom: 14px;
+  width: 6px;
+  border-radius: 999px;
+  background: var(--vault-sync-accent);
+}
+
+.vault-actions {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 18px;
+  position: relative;
+  z-index: 1;
+}
+
+.vault-button {
+  width: 100%;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 1.2rem;
+  padding: 1.05rem 2rem;
+  font-size: 1rem;
+  letter-spacing: 0.02em;
+  text-align: left;
+}
+
+.vault-button__icon {
+  font-size: 1.25em;
+  flex-shrink: 0;
+}
+
+.vault-button__label {
+  white-space: nowrap;
+  flex: 1;
+}
+
+.vault-button--neutral {
+  --emma-button-gradient-start: rgba(16, 185, 129, 0.92);
+  --emma-button-gradient-end: rgba(56, 189, 248, 0.78);
+  --emma-button-ink: rgba(8, 34, 36, 0.92);
+  --emma-button-shadow: 0 16px 36px rgba(16, 185, 129, 0.26);
+}
+
+.vault-button--affirmative {
+  --emma-button-gradient-start: rgba(94, 234, 212, 0.92);
+  --emma-button-gradient-end: rgba(129, 161, 255, 0.78);
+  --emma-button-ink: rgba(10, 28, 46, 0.9);
+  --emma-button-shadow: 0 16px 36px rgba(79, 209, 197, 0.28);
+}
+
+.vault-button--danger {
+  --emma-button-gradient-start: rgba(248, 113, 113, 0.92);
+  --emma-button-gradient-end: rgba(239, 68, 68, 0.78);
+  --emma-button-ink: rgba(62, 12, 12, 0.92);
+  --emma-button-shadow: 0 14px 34px rgba(239, 68, 68, 0.28);
+}
+
+.vault-control {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(var(--emma-accent-primary-rgb, 111, 99, 217), 0.5) rgba(20, 22, 40, 0.4);
+}
+
+.vault-control::-webkit-scrollbar {
+  width: 8px;
+}
+
+.vault-control::-webkit-scrollbar-track {
+  background: rgba(18, 20, 40, 0.6);
+  border-radius: 999px;
+}
+
+.vault-control::-webkit-scrollbar-thumb {
+  background: rgba(var(--emma-accent-primary-rgb, 111, 99, 217), 0.5);
+  border-radius: 999px;
+}
+
+.vault-control::-webkit-scrollbar-thumb:hover {
+  background: rgba(var(--emma-accent-primary-rgb, 111, 99, 217), 0.65);
+}
+
+.vault-toast {
+  position: fixed;
+  top: calc(24px + (var(--vault-toast-index, 0) * 72px));
+  right: 24px;
+  min-width: 260px;
+  max-width: 320px;
+  padding: 14px 18px 14px 22px;
+  border-radius: 16px;
+  border: 1px solid rgba(var(--emma-neutral-rgb, 255, 255, 255), 0.16);
+  background: rgba(var(--emma-neutral-inverse-rgb, 10, 10, 15), 0.82);
+  color: var(--emma-text-strong, #ffffff);
+  box-shadow: var(--emma-shadow-raised, 0 18px 48px rgba(0, 0, 0, 0.35));
+  backdrop-filter: blur(14px);
+  transform: translateX(110%);
+  opacity: 0;
+  transition: transform 220ms ease, opacity 220ms ease;
+  z-index: 11000;
+  font-size: 0.95rem;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.vault-toast::before {
+  content: '';
+  width: 6px;
+  height: 100%;
+  border-radius: 4px;
+  background: var(--vault-toast-accent, var(--emma-accent-primary, #6f63d9));
+  display: inline-block;
+}
+
+.vault-toast.is-visible {
+  transform: translateX(0);
+  opacity: 1;
+}
+
+.vault-toast--success {
+  --vault-toast-accent: var(--emma-success, #34d399);
+}
+
+.vault-toast--error {
+  --vault-toast-accent: var(--emma-danger, #f87171);
+}
+
+.vault-toast--info {
+  --vault-toast-accent: var(--emma-accent-primary, #6f63d9);
+}
+
+@media (max-width: 720px) {
+  .vault-control-dialog {
+    max-height: 100vh;
+    border-radius: 26px;
+    padding: 0;
+  }
+
+  .vault-control {
+    max-height: none;
+    padding: 24px 20px;
+    padding-right: 20px;
+  }
+
+  .vault-section {
+    padding: 32px 22px 22px;
+  }
+
+  .vault-actions {
+    grid-template-columns: 1fr;
+  }
+
+  .vault-control-shield {
+    bottom: 16px;
+    right: 16px;
+  }
+
+  .vault-toast {
+    left: 16px;
+    right: 16px;
+    min-width: auto;
+  }
+}
+
+@media (max-width: 600px) {
+  .vault-control-overlay {
+    padding: 16px;
+    align-items: flex-start;
+  }
+
+  .vault-control-dialog {
+    width: calc(100vw - 24px);
+    max-width: calc(100vw - 24px);
+    max-height: calc(100dvh - 24px);
+    margin: clamp(12px, 4vh, 24px) auto;
+    border-radius: 20px;
+  }
+
+  .vault-control {
+    padding: 20px 18px;
+    padding-right: 18px;
+    max-height: none;
+  }
+
+  .vault-control__dismiss {
+    top: 14px;
+    right: 14px;
+  }
+}
+
+@media (max-width: 720px) {
+  .vault-control-overlay {
+    align-items: flex-start;
+  }
+
+  .vault-control-dialog {
+    margin: clamp(16px, 6vh, 28px) auto;
+  }
+
+  .vault-section {
+    border-radius: 20px;
+    padding: 24px 22px 20px;
+    gap: 16px;
+  }
+
+  .vault-section__header {
+    gap: 8px;
+  }
+
+  .vault-section__eyebrow {
+    letter-spacing: 0.12em;
+  }
+
+  .vault-section__headline {
+    gap: 10px;
+  }
+
+  .vault-section__title {
+    font-size: 1.05rem;
+    line-height: 1.2;
+  }
+
+  .vault-stats {
+    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+    gap: 14px 16px;
+  }
+
+  .vault-sync__row {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 6px;
+  }
+
+  .vault-sync__value {
+    margin-left: 0;
+  }
+
+  .vault-actions {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .vault-button__label {
+    white-space: normal;
+  }
+}
+
+@media (min-width: 980px) {
+  .vault-control {
+    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
+    grid-template-areas:
+      "hero info"
+      "hero sync"
+      "hero controls";
+    align-items: start;
+  }
+
+  .vault-control__hero {
+    grid-area: hero;
+    height: 100%;
+  }
+
+  .vault-section--info {
+    grid-area: info;
+  }
+
+  .vault-section--sync {
+    grid-area: sync;
+  }
+
+  .vault-section--controls {
+    grid-area: controls;
+  }
+
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .vault-control-overlay,
+  .vault-control-dialog,
+  .vault-toast {
+    transition-duration: 0.01ms;
+    transition-delay: 0ms;
+    animation-duration: 0.01ms;
+  }
+
+  .vault-hero__signal-dot {
+    animation: none;
+  }
+
+  .vault-button:hover {
+    transform: none;
+  }
+}
diff --git a/css/vault-locked-overlay.css b/css/vault-locked-overlay.css
index 43ee592a..6e4ad0d9 100644
--- a/css/vault-locked-overlay.css
+++ b/css/vault-locked-overlay.css
@@ -47,7 +47,7 @@
   animation: emma-pulse 2s ease-in-out infinite;
   box-shadow: 
     0 0 40px rgba(118, 75, 162, 0.4),
-    0 0 80px rgba(240, 147, 251, 0.2),
+    0 0 80px rgba(222, 179, 228, 0.2),
     inset 0 0 20px rgba(255, 255, 255, 0.1);
 }
 
@@ -144,7 +144,7 @@
   transform: translateY(-1px);
   box-shadow: 
     0 8px 25px rgba(118, 75, 162, 0.3),
-    0 4px 15px rgba(240, 147, 251, 0.2);
+    0 4px 15px rgba(222, 179, 228, 0.2);
 }
 
 .vault-unlock-btn:active {
@@ -248,14 +248,14 @@
     transform: scale(1);
     box-shadow: 
       0 0 40px rgba(118, 75, 162, 0.4),
-      0 0 80px rgba(240, 147, 251, 0.2),
+      0 0 80px rgba(222, 179, 228, 0.2),
       inset 0 0 20px rgba(255, 255, 255, 0.1);
   }
   50% {
     transform: scale(1.05);
     box-shadow: 
       0 0 50px rgba(118, 75, 162, 0.6),
-      0 0 100px rgba(240, 147, 251, 0.3),
+      0 0 100px rgba(222, 179, 228, 0.3),
       inset 0 0 25px rgba(255, 255, 255, 0.15);
   }
 }
diff --git a/css/voice-capture-minimal.css b/css/voice-capture-minimal.css
index dbfae724..8080cec4 100644
--- a/css/voice-capture-minimal.css
+++ b/css/voice-capture-minimal.css
@@ -54,11 +54,11 @@
     circle at 30% 30%,
     rgba(138, 94, 250, 0.95) 0%,
     rgba(118, 75, 162, 0.9) 40%,
-    rgba(240, 147, 251, 0.95) 100%
+    rgba(222, 179, 228, 0.95) 100%
   );
   box-shadow: 
     0 0 30px rgba(118, 75, 162, 0.5),
-    0 0 60px rgba(240, 147, 251, 0.2);
+    0 0 60px rgba(222, 179, 228, 0.2);
 }
 
 .emma-hint {
@@ -239,7 +239,7 @@
   background: linear-gradient(
     135deg,
     rgba(118, 75, 162, 0.12) 0%,
-    rgba(240, 147, 251, 0.06) 100%
+    rgba(222, 179, 228, 0.06) 100%
   );
   border-color: rgba(118, 75, 162, 0.2);
   transform: translateY(-1px);
@@ -248,10 +248,10 @@
 .topic-node.selected .node-content {
   background: linear-gradient(
     135deg,
-    rgba(240, 147, 251, 0.15) 0%,
+    rgba(222, 179, 228, 0.15) 0%,
     rgba(118, 75, 162, 0.1) 100%
   );
-  border-color: rgba(240, 147, 251, 0.3);
+  border-color: rgba(222, 179, 228, 0.3);
   transform: scale(1.02);
 }
 
@@ -287,9 +287,9 @@
   background: linear-gradient(
     135deg,
     rgba(118, 75, 162, 0.8) 0%,
-    rgba(240, 147, 251, 0.8) 100%
+    rgba(222, 179, 228, 0.8) 100%
   );
-  border: 1px solid rgba(240, 147, 251, 0.3);
+  border: 1px solid rgba(222, 179, 228, 0.3);
   border-radius: 16px;
   color: white;
   font-size: 15px;
@@ -305,7 +305,7 @@
   background: linear-gradient(
     135deg,
     rgba(118, 75, 162, 0.9) 0%,
-    rgba(240, 147, 251, 0.9) 100%
+    rgba(222, 179, 228, 0.9) 100%
   );
   transform: translateY(-2px);
   box-shadow: 
@@ -429,7 +429,7 @@
     90deg,
     #667eea 0%,
     #764ba2 50%,
-    #f093fb 100%
+    #deb3e4 100%
   );
   border-radius: 2px;
   width: 0%;
@@ -469,7 +469,7 @@
   height: 8px;
   background: linear-gradient(
     180deg,
-    rgba(240, 147, 251, 0.8) 0%,
+    rgba(222, 179, 228, 0.8) 0%,
     rgba(118, 75, 162, 0.6) 100%
   );
   border-radius: 2px;
@@ -524,7 +524,7 @@
 .record-button:focus,
 .action-btn:focus,
 .topic-node:focus {
-  outline: 2px solid rgba(240, 147, 251, 0.8);
+  outline: 2px solid rgba(222, 179, 228, 0.8);
   outline-offset: 2px;
 }
 
diff --git a/css/voice-capture-premium.css b/css/voice-capture-premium.css
deleted file mode 100644
index 77277dd5..00000000
--- a/css/voice-capture-premium.css
+++ /dev/null
@@ -1,924 +0,0 @@
-/**
- * Emma Voice Memory Studio - Premium Design System
- * Sophisticated, on-brand voice capture experience
- */
-
-/* ================================
-   EMMA VOICE STUDIO FOUNDATION
-   ================================ */
-
-.emma-voice-studio {
-  position: relative;
-  padding: 0;
-  margin: 0;
-  background: transparent;
-  width: 100%;
-  height: 100%;
-  min-height: 600px;
-  overflow: hidden;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-  color: var(--emma-text, #ffffff);
-}
-
-/* ================================
-   VOICE STUDIO HEADER
-   ================================ */
-
-.voice-studio-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 24px 32px 20px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
-  background: linear-gradient(
-    135deg,
-    rgba(255, 255, 255, 0.03) 0%,
-    rgba(255, 255, 255, 0.01) 100%
-  );
-}
-
-.emma-presence {
-  display: flex;
-  align-items: center;
-  gap: 20px;
-}
-
-.emma-neural-orb {
-  position: relative;
-  width: 64px;
-  height: 64px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.neural-core {
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  background: radial-gradient(
-    circle at 30% 30%,
-    rgba(102, 126, 234, 0.9) 0%,
-    rgba(118, 75, 162, 0.8) 50%,
-    rgba(240, 147, 251, 0.9) 100%
-  );
-  box-shadow: 
-    0 0 20px rgba(118, 75, 162, 0.4),
-    inset 0 2px 4px rgba(255, 255, 255, 0.2);
-  position: relative;
-  z-index: 3;
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.neural-ring {
-  position: absolute;
-  border-radius: 50%;
-  border: 1px solid rgba(118, 75, 162, 0.2);
-  animation: neuralPulse 3s ease-in-out infinite;
-}
-
-.neural-ring.ring-1 {
-  width: 40px;
-  height: 40px;
-  animation-delay: 0s;
-}
-
-.neural-ring.ring-2 {
-  width: 52px;
-  height: 52px;
-  animation-delay: 1s;
-}
-
-.neural-ring.ring-3 {
-  width: 64px;
-  height: 64px;
-  animation-delay: 2s;
-}
-
-@keyframes neuralPulse {
-  0%, 100% {
-    opacity: 0.3;
-    transform: scale(1);
-  }
-  50% {
-    opacity: 0.8;
-    transform: scale(1.1);
-  }
-}
-
-.emma-neural-orb.listening .neural-core {
-  background: radial-gradient(
-    circle at 30% 30%,
-    rgba(240, 147, 251, 1) 0%,
-    rgba(118, 75, 162, 0.9) 50%,
-    rgba(102, 126, 234, 1) 100%
-  );
-  box-shadow: 
-    0 0 30px rgba(240, 147, 251, 0.6),
-    0 0 60px rgba(118, 75, 162, 0.3),
-    inset 0 2px 8px rgba(255, 255, 255, 0.3);
-  animation: listeningPulse 2s ease-in-out infinite;
-}
-
-.emma-neural-orb.listening .neural-ring {
-  border-color: rgba(240, 147, 251, 0.4);
-  animation-duration: 2s;
-}
-
-@keyframes listeningPulse {
-  0%, 100% {
-    transform: scale(1);
-  }
-  50% {
-    transform: scale(1.05);
-  }
-}
-
-.emma-state {
-  flex: 1;
-}
-
-.studio-title {
-  font-size: 24px;
-  font-weight: 600;
-  margin: 0 0 4px 0;
-  background: linear-gradient(135deg, #667eea, #764ba2, #f093fb);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  letter-spacing: -0.5px;
-}
-
-.studio-subtitle {
-  font-size: 15px;
-  color: rgba(255, 255, 255, 0.7);
-  margin: 0;
-  transition: all 0.3s ease;
-  line-height: 1.4;
-}
-
-.studio-status {
-  display: flex;
-  align-items: center;
-}
-
-.status-indicator {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
-  background: rgba(255, 255, 255, 0.04);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 20px;
-  transition: all 0.3s ease;
-}
-
-.status-indicator.recording {
-  background: rgba(240, 147, 251, 0.1);
-  border-color: rgba(240, 147, 251, 0.3);
-}
-
-.status-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: rgba(76, 175, 80, 0.8);
-  transition: all 0.3s ease;
-}
-
-.status-indicator.recording .status-dot {
-  background: rgba(240, 147, 251, 1);
-  animation: recordingBlink 1.5s ease-in-out infinite;
-}
-
-@keyframes recordingBlink {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.3; }
-}
-
-.status-text {
-  font-size: 13px;
-  font-weight: 500;
-  color: rgba(255, 255, 255, 0.8);
-}
-
-/* ================================
-   TRANSCRIPTION CANVAS
-   ================================ */
-
-.transcription-canvas {
-  margin: 20px 32px 24px;
-  background: linear-gradient(
-    135deg,
-    rgba(255, 255, 255, 0.02) 0%,
-    rgba(255, 255, 255, 0.01) 100%
-  );
-  border: 1px solid rgba(255, 255, 255, 0.06);
-  border-radius: 16px;
-  overflow: hidden;
-  position: relative;
-}
-
-.canvas-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px 20px 12px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
-  background: rgba(255, 255, 255, 0.02);
-}
-
-.canvas-label {
-  font-size: 13px;
-  font-weight: 600;
-  color: rgba(255, 255, 255, 0.9);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.canvas-metrics {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  font-size: 12px;
-  color: rgba(255, 255, 255, 0.6);
-}
-
-.metric {
-  font-weight: 500;
-}
-
-.metric-separator {
-  opacity: 0.4;
-}
-
-.transcription-viewport {
-  position: relative;
-  min-height: 120px;
-  max-height: 200px;
-  overflow-y: auto;
-  padding: 20px;
-}
-
-.transcription-content {
-  position: relative;
-  z-index: 2;
-}
-
-.transcription-prompt {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 12px;
-  height: 80px;
-  color: rgba(255, 255, 255, 0.5);
-  font-style: italic;
-}
-
-.prompt-icon {
-  font-size: 20px;
-  opacity: 0.8;
-}
-
-.prompt-text {
-  font-size: 15px;
-  font-weight: 400;
-}
-
-.transcribed-text {
-  font-size: 16px;
-  line-height: 1.6;
-  color: rgba(255, 255, 255, 0.95);
-  animation: textAppear 0.3s ease;
-}
-
-@keyframes textAppear {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.sentence-end {
-  opacity: 0.8;
-}
-
-.transcription-gradient {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 30px;
-  background: linear-gradient(
-    to top,
-    rgba(26, 16, 51, 0.8) 0%,
-    transparent 100%
-  );
-  pointer-events: none;
-}
-
-/* Custom scrollbar for transcription */
-.transcription-viewport::-webkit-scrollbar {
-  width: 4px;
-}
-
-.transcription-viewport::-webkit-scrollbar-track {
-  background: rgba(255, 255, 255, 0.05);
-  border-radius: 2px;
-}
-
-.transcription-viewport::-webkit-scrollbar-thumb {
-  background: rgba(118, 75, 162, 0.6);
-  border-radius: 2px;
-}
-
-/* ================================
-   TOPIC CONSTELLATION
-   ================================ */
-
-.topic-constellation {
-  margin: 0 32px 24px;
-}
-
-.constellation-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 16px;
-}
-
-.constellation-title {
-  font-size: 14px;
-  font-weight: 600;
-  color: rgba(255, 255, 255, 0.8);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.constellation-refresh {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  border-radius: 8px;
-  background: rgba(255, 255, 255, 0.04);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  cursor: pointer;
-  transition: all 0.3s ease;
-  color: rgba(255, 255, 255, 0.6);
-}
-
-.constellation-refresh:hover {
-  background: rgba(255, 255, 255, 0.08);
-  color: rgba(255, 255, 255, 0.8);
-  transform: translateY(-1px);
-}
-
-.constellation-refresh svg {
-  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.topic-nodes {
-  display: flex;
-  gap: 12px;
-  flex-wrap: wrap;
-}
-
-.topic-node {
-  position: relative;
-  cursor: pointer;
-  animation: nodeAppear 0.6s cubic-bezier(0.4, 0, 0.2, 1);
-  animation-fill-mode: both;
-  animation-delay: var(--node-delay, 0ms);
-}
-
-@keyframes nodeAppear {
-  from {
-    opacity: 0;
-    transform: translateY(20px) scale(0.9);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-}
-
-.node-content {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 12px 16px;
-  background: linear-gradient(
-    135deg,
-    rgba(255, 255, 255, 0.06) 0%,
-    rgba(255, 255, 255, 0.02) 100%
-  );
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 12px;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  position: relative;
-  z-index: 2;
-  backdrop-filter: blur(10px);
-}
-
-.topic-node:hover .node-content {
-  background: linear-gradient(
-    135deg,
-    rgba(118, 75, 162, 0.15) 0%,
-    rgba(240, 147, 251, 0.08) 100%
-  );
-  border-color: rgba(118, 75, 162, 0.3);
-  transform: translateY(-2px);
-}
-
-.topic-node.selected .node-content {
-  background: linear-gradient(
-    135deg,
-    rgba(240, 147, 251, 0.2) 0%,
-    rgba(118, 75, 162, 0.15) 100%
-  );
-  border-color: rgba(240, 147, 251, 0.5);
-  transform: scale(1.05);
-}
-
-.node-icon {
-  font-size: 16px;
-  opacity: 0.9;
-}
-
-.node-text {
-  font-size: 13px;
-  font-weight: 500;
-  color: rgba(255, 255, 255, 0.85);
-  white-space: nowrap;
-}
-
-.node-glow {
-  position: absolute;
-  inset: -2px;
-  background: linear-gradient(
-    135deg,
-    rgba(118, 75, 162, 0.3) 0%,
-    rgba(240, 147, 251, 0.3) 100%
-  );
-  border-radius: 14px;
-  opacity: 0;
-  transition: opacity 0.3s ease;
-  z-index: 1;
-  filter: blur(8px);
-}
-
-.topic-node:hover .node-glow {
-  opacity: 0.6;
-}
-
-.topic-node.selected .node-glow {
-  opacity: 1;
-  animation: selectedGlow 2s ease-in-out;
-}
-
-@keyframes selectedGlow {
-  0%, 100% { 
-    opacity: 0.8; 
-    transform: scale(1);
-  }
-  50% { 
-    opacity: 1; 
-    transform: scale(1.1);
-  }
-}
-
-/* ================================
-   CONTROL PANEL
-   ================================ */
-
-.control-panel {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin: 0 32px 24px;
-  gap: 20px;
-}
-
-.primary-controls {
-  flex: 1;
-}
-
-.emma-control-btn {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  padding: 16px 24px;
-  background: linear-gradient(
-    135deg,
-    rgba(118, 75, 162, 0.8) 0%,
-    rgba(240, 147, 251, 0.8) 100%
-  );
-  border: 1px solid rgba(240, 147, 251, 0.4);
-  border-radius: 12px;
-  color: white;
-  font-size: 15px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  position: relative;
-  overflow: hidden;
-  width: 100%;
-  max-width: 280px;
-}
-
-.emma-control-btn:hover {
-  background: linear-gradient(
-    135deg,
-    rgba(118, 75, 162, 0.9) 0%,
-    rgba(240, 147, 251, 0.9) 100%
-  );
-  transform: translateY(-2px);
-  box-shadow: 
-    0 8px 25px rgba(118, 75, 162, 0.3),
-    0 4px 10px rgba(0, 0, 0, 0.2);
-}
-
-.emma-control-btn:active {
-  transform: translateY(-1px);
-}
-
-.emma-control-btn:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-  transform: none;
-  box-shadow: none;
-}
-
-.emma-control-btn.pause-btn {
-  background: linear-gradient(
-    135deg,
-    rgba(255, 193, 7, 0.8) 0%,
-    rgba(255, 152, 0, 0.8) 100%
-  );
-  border-color: rgba(255, 193, 7, 0.4);
-}
-
-.emma-control-btn.pause-btn:hover {
-  background: linear-gradient(
-    135deg,
-    rgba(255, 193, 7, 0.9) 0%,
-    rgba(255, 152, 0, 0.9) 100%
-  );
-}
-
-.btn-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-}
-
-.btn-content {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  flex: 1;
-}
-
-.btn-label {
-  font-size: 15px;
-  font-weight: 600;
-  line-height: 1.2;
-}
-
-.btn-shortcut {
-  font-size: 11px;
-  opacity: 0.8;
-  font-weight: 400;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.secondary-controls {
-  display: flex;
-  gap: 12px;
-}
-
-.emma-action-btn {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 16px;
-  background: rgba(255, 255, 255, 0.04);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 10px;
-  color: rgba(255, 255, 255, 0.8);
-  font-size: 13px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.3s ease;
-}
-
-.emma-action-btn:hover {
-  background: rgba(255, 255, 255, 0.08);
-  color: rgba(255, 255, 255, 0.95);
-  transform: translateY(-1px);
-}
-
-.emma-action-btn.save-btn:hover {
-  background: rgba(76, 175, 80, 0.2);
-  border-color: rgba(76, 175, 80, 0.4);
-  color: rgba(76, 175, 80, 1);
-}
-
-.emma-action-btn.discard-btn:hover {
-  background: rgba(244, 67, 54, 0.2);
-  border-color: rgba(244, 67, 54, 0.4);
-  color: rgba(244, 67, 54, 1);
-}
-
-/* ================================
-   PROGRESS SYSTEM
-   ================================ */
-
-.progress-system {
-  margin: 0 32px 20px;
-}
-
-.progress-track {
-  position: relative;
-  height: 4px;
-  background: rgba(255, 255, 255, 0.08);
-  border-radius: 2px;
-  overflow: hidden;
-  margin-bottom: 12px;
-}
-
-.progress-fill {
-  height: 100%;
-  background: linear-gradient(
-    90deg,
-    #667eea 0%,
-    #764ba2 50%,
-    #f093fb 100%
-  );
-  border-radius: 2px;
-  width: 0%;
-  transition: width 0.3s ease;
-  position: relative;
-}
-
-.progress-fill::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 20px;
-  height: 100%;
-  background: linear-gradient(
-    90deg,
-    transparent 0%,
-    rgba(255, 255, 255, 0.4) 100%
-  );
-  border-radius: 0 2px 2px 0;
-}
-
-.progress-markers {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 100%;
-  pointer-events: none;
-}
-
-.marker {
-  position: absolute;
-  top: 0;
-  width: 1px;
-  height: 100%;
-  background: rgba(255, 255, 255, 0.3);
-}
-
-.progress-meta {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.time-display {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 13px;
-  color: rgba(255, 255, 255, 0.7);
-  font-variant-numeric: tabular-nums;
-}
-
-.time-separator {
-  opacity: 0.5;
-}
-
-.max-duration {
-  opacity: 0.5;
-}
-
-.quality-indicator {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.quality-bars {
-  display: flex;
-  gap: 2px;
-}
-
-.quality-bars .bar {
-  width: 3px;
-  height: 12px;
-  background: rgba(255, 255, 255, 0.2);
-  border-radius: 1px;
-  transition: all 0.3s ease;
-}
-
-.quality-bars .bar.active {
-  background: linear-gradient(
-    180deg,
-    #4ade80 0%,
-    #22c55e 100%
-  );
-}
-
-.quality-label {
-  font-size: 11px;
-  color: rgba(255, 255, 255, 0.6);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-/* ================================
-   NEURAL VISUALIZER
-   ================================ */
-
-.neural-visualizer {
-  margin: 0 32px 20px;
-  height: 60px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  opacity: 0;
-  transition: opacity 0.5s ease;
-}
-
-.neural-visualizer.active {
-  opacity: 1;
-}
-
-.visualizer-grid {
-  display: flex;
-  align-items: end;
-  justify-content: center;
-  gap: 4px;
-  height: 40px;
-}
-
-.frequency-bar {
-  width: 3px;
-  height: 8px;
-  background: linear-gradient(
-    180deg,
-    rgba(240, 147, 251, 0.8) 0%,
-    rgba(118, 75, 162, 0.6) 100%
-  );
-  border-radius: 1px;
-  transform-origin: bottom;
-  transition: all 0.1s ease;
-  animation: frequencyDance 2s ease-in-out infinite;
-  animation-delay: var(--delay, 0ms);
-}
-
-@keyframes frequencyDance {
-  0%, 100% {
-    transform: scaleY(0.3);
-    opacity: 0.6;
-  }
-  50% {
-    transform: scaleY(1);
-    opacity: 1;
-  }
-}
-
-.neural-visualizer.active .frequency-bar {
-  animation-play-state: running;
-}
-
-.neural-visualizer:not(.active) .frequency-bar {
-  animation-play-state: paused;
-  transform: scaleY(0.2);
-  opacity: 0.3;
-}
-
-/* ================================
-   RESPONSIVE DESIGN
-   ================================ */
-
-@media (max-width: 600px) {
-  .voice-studio-header {
-    padding: 20px 24px 16px;
-    flex-direction: column;
-    gap: 16px;
-    align-items: stretch;
-  }
-  
-  .emma-presence {
-    justify-content: center;
-    text-align: center;
-  }
-  
-  .studio-status {
-    justify-content: center;
-  }
-  
-  .transcription-canvas,
-  .topic-constellation,
-  .control-panel,
-  .progress-system,
-  .neural-visualizer {
-    margin-left: 24px;
-    margin-right: 24px;
-  }
-  
-  .control-panel {
-    flex-direction: column;
-    gap: 16px;
-  }
-  
-  .emma-control-btn {
-    max-width: none;
-  }
-  
-  .secondary-controls {
-    justify-content: center;
-  }
-  
-  .topic-nodes {
-    justify-content: center;
-  }
-}
-
-/* ================================
-   ACCESSIBILITY & MOTION
-   ================================ */
-
-@media (prefers-reduced-motion: reduce) {
-  * {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-  }
-}
-
-.emma-control-btn:focus,
-.emma-action-btn:focus,
-.topic-node:focus,
-.constellation-refresh:focus {
-  outline: 2px solid rgba(240, 147, 251, 0.8);
-  outline-offset: 2px;
-}
-
-/* ================================
-   FOCUS MODE INTEGRATION
-   ================================ */
-
-body.voice-capture-focus .info-panel,
-body.voice-capture-focus .welcome-text,
-body.voice-capture-focus .quick-stats,
-body.voice-capture-focus .radial-menu,
-body.voice-capture-focus .constellation-canvas {
-  opacity: 0.15 !important;
-  filter: blur(3px) !important;
-  pointer-events: none !important;
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
-}
-
-/* ================================
-   HIGH-DPI DISPLAY OPTIMIZATION
-   ================================ */
-
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-  .neural-core {
-    box-shadow: 
-      0 0 20px rgba(118, 75, 162, 0.4),
-      inset 0 1px 2px rgba(255, 255, 255, 0.2);
-  }
-  
-  .progress-track,
-  .frequency-bar,
-  .quality-bars .bar {
-    transform: translateZ(0);
-  }
-}
-
diff --git a/css/voice-capture.css b/css/voice-capture.css
deleted file mode 100644
index 206ee94f..00000000
--- a/css/voice-capture.css
+++ /dev/null
@@ -1,411 +0,0 @@
-/**
- * Voice Capture Experience Styles
- * Emma Memory Creation System
- */
-
-.voice-capture-experience {
-  padding: 0;
-  background: none;
-  max-height: 70vh;
-  overflow-y: auto;
-}
-
-/* Header Section */
-.voice-header {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  margin-bottom: 24px;
-  padding: 20px 24px 0;
-}
-
-.emma-avatar {
-  position: relative;
-}
-
-.orb-mini {
-  width: 48px;
-  height: 48px;
-  border-radius: 50%;
-  background: radial-gradient(circle at 30% 30%, 
-    rgba(138, 94, 250, 0.9) 0%,
-    rgba(28, 15, 57, 0.95) 100%);
-  border: 2px solid rgba(138, 94, 250, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.3s ease;
-  box-shadow: 0 0 20px rgba(138, 94, 250, 0.3);
-}
-
-.orb-mini.pulsing {
-  animation: orbPulse 2s ease-in-out infinite;
-  box-shadow: 0 0 30px rgba(138, 94, 250, 0.6);
-}
-
-@keyframes orbPulse {
-  0%, 100% { 
-    transform: scale(1);
-    box-shadow: 0 0 20px rgba(138, 94, 250, 0.3);
-  }
-  50% { 
-    transform: scale(1.1);
-    box-shadow: 0 0 40px rgba(138, 94, 250, 0.8);
-  }
-}
-
-.greeting-text h3 {
-  margin: 0 0 4px 0;
-  font-size: 20px;
-  font-weight: 600;
-  color: var(--emma-purple);
-  background: linear-gradient(135deg, #8A5EFA, #B794F6);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
-
-.greeting-text .hint {
-  margin: 0;
-  font-size: 14px;
-  color: rgba(255, 255, 255, 0.7);
-  transition: color 0.3s ease;
-}
-
-/* Transcription Display */
-.transcription-container {
-  margin: 0 24px 24px;
-  position: relative;
-}
-
-.transcription-display {
-  background: rgba(28, 15, 57, 0.6);
-  border: 1px solid rgba(138, 94, 250, 0.3);
-  border-radius: 12px;
-  padding: 20px;
-  min-height: 120px;
-  max-height: 200px;
-  overflow-y: auto;
-  font-size: 16px;
-  line-height: 1.5;
-  color: white;
-  white-space: pre-wrap;
-  word-wrap: break-word;
-  transition: all 0.3s ease;
-}
-
-.transcription-display:hover {
-  border-color: rgba(138, 94, 250, 0.5);
-}
-
-.transcription-placeholder {
-  color: rgba(255, 255, 255, 0.5);
-  font-style: italic;
-}
-
-.word-count {
-  position: absolute;
-  bottom: -20px;
-  right: 0;
-  font-size: 12px;
-  color: rgba(255, 255, 255, 0.6);
-}
-
-/* Topic Suggestions */
-.topic-suggestions {
-  margin: 0 24px 24px;
-}
-
-.suggestions-label {
-  display: block;
-  font-size: 14px;
-  font-weight: 500;
-  color: rgba(255, 255, 255, 0.8);
-  margin-bottom: 12px;
-}
-
-.suggestion-cards {
-  display: flex;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-
-.suggestion-card {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
-  background: rgba(138, 94, 250, 0.1);
-  border: 1px solid rgba(138, 94, 250, 0.3);
-  border-radius: 20px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  font-size: 13px;
-  color: rgba(255, 255, 255, 0.9);
-}
-
-.suggestion-card:hover {
-  background: rgba(138, 94, 250, 0.2);
-  border-color: rgba(138, 94, 250, 0.5);
-  transform: translateY(-1px);
-}
-
-.suggestion-card:active {
-  transform: translateY(0);
-}
-
-.suggestion-icon {
-  font-size: 14px;
-}
-
-.suggestion-text {
-  font-weight: 500;
-}
-
-/* Voice Controls */
-.voice-controls {
-  display: flex;
-  gap: 12px;
-  justify-content: center;
-  margin: 0 24px 20px;
-  flex-wrap: wrap;
-}
-
-.voice-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 16px;
-  border: none;
-  border-radius: 8px;
-  font-size: 14px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  background: rgba(255, 255, 255, 0.1);
-  color: white;
-  border: 1px solid rgba(255, 255, 255, 0.2);
-}
-
-.voice-btn:hover {
-  background: rgba(255, 255, 255, 0.15);
-  border-color: rgba(255, 255, 255, 0.3);
-  transform: translateY(-1px);
-}
-
-.voice-btn:active {
-  transform: translateY(0);
-}
-
-.voice-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-  transform: none !important;
-}
-
-.voice-btn.primary {
-  background: rgba(138, 94, 250, 0.8);
-  border-color: rgba(138, 94, 250, 1);
-}
-
-.voice-btn.primary:hover {
-  background: rgba(138, 94, 250, 0.9);
-}
-
-.voice-btn.secondary {
-  background: rgba(255, 193, 7, 0.8);
-  border-color: rgba(255, 193, 7, 1);
-  color: #000;
-}
-
-.voice-btn.secondary:hover {
-  background: rgba(255, 193, 7, 0.9);
-}
-
-.voice-btn.success {
-  background: rgba(40, 167, 69, 0.8);
-  border-color: rgba(40, 167, 69, 1);
-}
-
-.voice-btn.success:hover {
-  background: rgba(40, 167, 69, 0.9);
-}
-
-.voice-icon {
-  font-size: 16px;
-}
-
-/* Progress Indicator */
-.capture-progress {
-  margin: 0 24px 20px;
-}
-
-.progress-bar {
-  width: 100%;
-  height: 6px;
-  background: rgba(255, 255, 255, 0.1);
-  border-radius: 3px;
-  overflow: hidden;
-  margin-bottom: 8px;
-}
-
-.progress-fill {
-  height: 100%;
-  background: linear-gradient(90deg, #8A5EFA, #B794F6);
-  border-radius: 3px;
-  width: 0%;
-  transition: width 0.3s ease;
-}
-
-.progress-info {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  font-size: 12px;
-  color: rgba(255, 255, 255, 0.7);
-}
-
-.separator {
-  color: rgba(255, 255, 255, 0.5);
-}
-
-.max-duration {
-  color: rgba(255, 255, 255, 0.5);
-}
-
-/* Audio Visualizer */
-.audio-visualizer {
-  display: none;
-  justify-content: center;
-  align-items: flex-end;
-  gap: 3px;
-  height: 40px;
-  margin: 0 24px 16px;
-}
-
-.wave-bar {
-  width: 4px;
-  min-height: 8px;
-  background: linear-gradient(180deg, #8A5EFA, #B794F6);
-  border-radius: 2px;
-  transition: height 0.1s ease;
-}
-
-/* Custom Scrollbar */
-.transcription-display::-webkit-scrollbar {
-  width: 6px;
-}
-
-.transcription-display::-webkit-scrollbar-track {
-  background: rgba(255, 255, 255, 0.1);
-  border-radius: 3px;
-}
-
-.transcription-display::-webkit-scrollbar-thumb {
-  background: rgba(138, 94, 250, 0.5);
-  border-radius: 3px;
-}
-
-.transcription-display::-webkit-scrollbar-thumb:hover {
-  background: rgba(138, 94, 250, 0.7);
-}
-
-/* Responsive Design */
-@media (max-width: 480px) {
-  .voice-header {
-    padding: 16px 20px 0;
-  }
-  
-  .transcription-container,
-  .topic-suggestions,
-  .voice-controls,
-  .capture-progress,
-  .audio-visualizer {
-    margin-left: 20px;
-    margin-right: 20px;
-  }
-  
-  .voice-controls {
-    flex-direction: column;
-    align-items: stretch;
-  }
-  
-  .voice-btn {
-    justify-content: center;
-  }
-  
-  .suggestion-cards {
-    flex-direction: column;
-  }
-  
-  .suggestion-card {
-    justify-content: center;
-  }
-}
-
-/* Focus Mode Animation */
-body.voice-capture-focus .info-panel,
-body.voice-capture-focus .welcome-text,
-body.voice-capture-focus .quick-stats,
-body.voice-capture-focus .radial-menu {
-  opacity: 0.3 !important;
-  filter: blur(2px) !important;
-  pointer-events: none !important;
-  transition: all 0.3s ease !important;
-}
-
-/* Toast Notifications */
-.voice-toast {
-  font-family: 'Inter', system-ui, sans-serif;
-  font-weight: 500;
-  animation: toastSlideIn 0.3s ease;
-}
-
-@keyframes toastSlideIn {
-  from {
-    transform: translateX(100%);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-
-/* Special States */
-.voice-capture-experience.error .transcription-display {
-  border-color: rgba(255, 71, 87, 0.5);
-}
-
-.voice-capture-experience.success .progress-fill {
-  background: linear-gradient(90deg, #2ed573, #7bed9f);
-}
-
-/* Accessibility */
-.voice-btn:focus,
-.suggestion-card:focus {
-  outline: 2px solid rgba(138, 94, 250, 0.8);
-  outline-offset: 2px;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .orb-mini.pulsing {
-    animation: none;
-  }
-  
-  .wave-bar {
-    transition: none;
-  }
-  
-  .voice-toast {
-    animation: none;
-  }
-}
-
-/* Dark theme adjustments */
-@media (prefers-color-scheme: dark) {
-  .voice-btn.secondary {
-    color: #1a1a1a;
-  }
-}
-
diff --git a/css/z-index-hierarchy.css b/css/z-index-hierarchy.css
index 9da764ab..a3b3474b 100644
--- a/css/z-index-hierarchy.css
+++ b/css/z-index-hierarchy.css
@@ -269,13 +269,13 @@ body:has(.edit-memory-modal) .memories-container {
 ============================================================================= */
 
 /* CRITICAL FIX: Add Person button needs white background for visibility */
-button[style*="background: #8658ff"],
-button[style*="background:#8658ff"],
+button[style*="background: #6f63d9"],
+button[style*="background:#6f63d9"],
 .add-person-btn,
 button:contains("Add Person") {
   background: white !important;
-  color: #8658ff !important;
-  border: 2px solid #8658ff !important;
+  color: #6f63d9 !important;
+  border: 2px solid #6f63d9 !important;
   font-weight: 600 !important;
   text-shadow: none !important;
 }
@@ -285,8 +285,8 @@ button:contains("Add Person") {
 .person-add-button,
 [style*="border: 2px dashed"] {
   background: white !important;
-  color: #8658ff !important;
-  border: 2px dashed #8658ff !important;
+  color: #6f63d9 !important;
+  border: 2px dashed #6f63d9 !important;
   font-weight: 600 !important;
   opacity: 1 !important;
 }
@@ -296,8 +296,8 @@ button[title*="Add"],
 button[aria-label*="Add"],
 *[onclick*="addPerson"] {
   background: white !important;
-  color: #8658ff !important;
-  border: 2px solid #8658ff !important;
+  color: #6f63d9 !important;
+  border: 2px solid #6f63d9 !important;
   font-weight: 600 !important;
 }
 
diff --git a/dashboard.html b/dashboard.html
index f4a589b3..7d3f9818 100644
--- a/dashboard.html
+++ b/dashboard.html
@@ -38,1718 +38,20 @@
   <!-- Mobile UI Fixes - PRODUCTION: Removed for clean deployment -->
   <!-- <script src="emma-mobile-ui-fixes.js"></script> -->
 
+  <!-- Theme system -->
+  <link rel="stylesheet" href="css/theme-tokens.css">
+  <link rel="stylesheet" href="css/emma-components.css">
+
   <!-- VAULT STATE MONITOR: Real-time auto-lock detection -->
   <script src="emma-vault-extension-fixed/vault-state-monitor.js"></script>
 
-  <style>
-    /* Emma Brand Variables */
-    :root {
-      --emma-gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
-      --emma-gradient-2: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #a855f7 100%);
-      --emma-aurora: linear-gradient(135deg, #667eea20 0%, #764ba240 25%, #f093fb20 50%, #4dabf720 75%, #667eea20 100%);
-      --emma-bg-gradient: linear-gradient(135deg, #0a0a0f 0%, #1a1033 50%, #0f0c29 100%);
-      --emma-purple: #764ba2;
-      --emma-pink: #f093fb;
-      --emma-blue: #667eea;
-      --emma-dark: #0a0a0f;
-      --emma-card-bg: rgba(255, 255, 255, 0.03);
-      --emma-glass: rgba(255, 255, 255, 0.05);
-      --emma-border: rgba(255, 255, 255, 0.1);
-      --emma-text: #ffffff;
-      --emma-text-secondary: rgba(255, 255, 255, 0.8);
-      --emma-text-tertiary: rgba(255, 255, 255, 0.6);
-      --emma-success: #4ade80;
-      --emma-error: #f87171;
-      --emma-warning: #fbbf24;
-      --emma-glow: 0 0 40px rgba(134, 88, 255, 0.6);
-    }
-
-    * {
-      margin: 0;
-      padding: 0;
-      box-sizing: border-box;
-    }
-
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-      background: var(--emma-bg-gradient);
-      color: var(--emma-text);
-      min-height: 100vh;
-      overflow: hidden;
-      position: relative;
-    }
-
-    /* Aurora Background Effect */
-    .aurora-bg {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      opacity: 0.3;
-      z-index: 1;
-      pointer-events: none;
-    }
-
-    .aurora {
-      position: absolute;
-      width: 200%;
-      height: 200%;
-      background: var(--emma-aurora);
-      animation: aurora 20s ease-in-out infinite;
-      filter: blur(60px);
-    }
-
-    @keyframes aurora {
-      0%, 100% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
-      33% { transform: translate(-30%, -60%) rotate(120deg) scale(1.1); }
-      66% { transform: translate(-70%, -40%) rotate(240deg) scale(0.9); }
-    }
-
-    /* Main Container */
-    .dashboard {
-      position: relative;
-      width: 100%;
-      height: 100vh;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      z-index: 2;
-    }
-
-    /* Central Command Orb Container */
-    .command-center {
-      position: relative;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    /* Emma Orb */
-    .emma-orb-container {
-      position: relative;
-      width: 200px;
-      height: 200px;
-      cursor: pointer;
-      transition: transform 0.3s ease;
-    }
-
-    .emma-orb-container:hover {
-      transform: scale(1.05);
-    }
-
-    .emma-orb-webgl {
-      width: 100%;
-      height: 100%;
-      border-radius: 50%;
-      box-shadow: var(--emma-glow), inset 0 0 40px rgba(255, 255, 255, 0.1);
-      position: relative;
-      overflow: hidden;
-    }
-
-    .emma-orb-webgl canvas {
-      border-radius: 50%;
-      width: 100% !important;
-      height: 100% !important;
-    }
-
-    @keyframes orb-pulse {
-      0%, 100% { transform: scale(1); box-shadow: var(--emma-glow), inset 0 0 40px rgba(255, 255, 255, 0.1); }
-      50% { transform: scale(1.02); box-shadow: 0 0 60px rgba(134, 88, 255, 0.8), inset 0 0 40px rgba(255, 255, 255, 0.2); }
-    }
-
-    @keyframes vault-unlock-pulse {
-      0% { transform: scale(1); }
-      30% { transform: scale(1.1); box-shadow: 0 0 80px rgba(16, 185, 129, 0.8); }
-      60% { transform: scale(0.95); }
-      100% { transform: scale(1); }
-    }
-
-    /* Orb status removed - clean WebGL orb only */
-
-    .orb-icon {
-      font-size: 48px;
-      margin-bottom: 8px;
-      filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
-    }
-
-    /* Orb text removed - clean WebGL orb only */
-
-    /* Neural Network Menu */
-    .neural-network {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      pointer-events: none;
-      z-index: 1; /* CRITICAL FIX: Lower z-index so nodes appear above connections */
-    }
-
-    .neural-canvas {
-      width: 100%;
-      height: 100%;
-    }
-
-    .radial-menu {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      top: 0;
-      left: 0;
-      pointer-events: none;
-      opacity: 0;
-      transition: opacity 0.6s ease;
-    }
-
-    .radial-menu.active {
-      opacity: 1;
-      pointer-events: all;
-    }
-
-    .radial-item {
-      position: absolute;
-      width: 90px;
-      height: 90px;
-      background: var(--emma-glass);
-      backdrop-filter: blur(20px);
-      border: 2px solid rgba(134, 88, 255, 0.3);
-      border-radius: 50%;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      cursor: pointer;
-      transition: opacity 0.4s ease, transform 0.2s ease;
-      opacity: 0;
-      box-shadow: 0 0 30px rgba(134, 88, 255, 0.2);
-      z-index: 10;
-    }
-
-    .radial-menu.active .radial-item {
-      opacity: 1;
-    }
-
-    /* Elegant add node glow animation */
-    @keyframes addNodeGlow {
-      0%, 100% { 
-        box-shadow: 
-          0 0 20px rgba(16, 185, 129, 0.4),
-          0 0 40px rgba(16, 185, 129, 0.2),
-          inset 0 0 20px rgba(16, 185, 129, 0.1);
-      }
-      50% { 
-        box-shadow: 
-          0 0 30px rgba(16, 185, 129, 0.6),
-          0 0 60px rgba(16, 185, 129, 0.3),
-          inset 0 0 30px rgba(16, 185, 129, 0.15);
-      }
-    }
-
-    /* Subtle heartbeat animation for people nodes */
-    @keyframes heartbeat {
-      0%, 100% { 
-        box-shadow: 
-          0 8px 32px rgba(139, 92, 246, 0.4),
-          0 0 20px rgba(239, 68, 68, 0.3),
-          0 0 40px rgba(239, 68, 68, 0.1);
-      }
-      25% { 
-        box-shadow: 
-          0 8px 32px rgba(139, 92, 246, 0.4),
-          0 0 25px rgba(239, 68, 68, 0.4),
-          0 0 50px rgba(239, 68, 68, 0.15);
-      }
-      50% { 
-        box-shadow: 
-          0 8px 32px rgba(139, 92, 246, 0.4),
-          0 0 20px rgba(239, 68, 68, 0.3),
-          0 0 40px rgba(239, 68, 68, 0.1);
-      }
-      75% { 
-        box-shadow: 
-          0 8px 32px rgba(139, 92, 246, 0.4),
-          0 0 25px rgba(239, 68, 68, 0.4),
-          0 0 50px rgba(239, 68, 68, 0.15);
-      }
-    }
-
-    /* Memory Constellation Styles - Star-like nodes */
-    .memory-node {
-      font-size: 12px;
-      color: white;
-      backdrop-filter: blur(15px);
-      box-shadow:
-        0 0 30px rgba(134, 88, 255, 0.4),
-        0 0 60px rgba(134, 88, 255, 0.2),
-        inset 0 0 20px rgba(255, 255, 255, 0.1);
-      border: 1px solid rgba(255, 255, 255, 0.2);
-      position: relative;
-    }
-
-    /* Star-like glow effect */
-    .memory-node::before {
-      content: '';
-      position: absolute;
-      top: -2px;
-      left: -2px;
-      right: -2px;
-      bottom: -2px;
-      border-radius: 50%;
-      background: linear-gradient(45deg, rgba(134, 88, 255, 0.3), rgba(240, 147, 251, 0.3));
-      z-index: -1;
-      opacity: 0.7;
-      animation: star-pulse 3s ease-in-out infinite;
-    }
-
-    @keyframes star-pulse {
-      0%, 100% { transform: scale(1); opacity: 0.7; }
-      50% { transform: scale(1.1); opacity: 1; }
-    }
-
-    .memory-node .memory-thumbnail {
-      font-size: 28px;
-      margin-bottom: 2px;
-      filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5));
-      text-shadow: 0 0 10px rgba(134, 88, 255, 0.8);
-    }
-
-    .memory-node .memory-label {
-      font-size: 11px;
-      opacity: 0;
-      position: absolute;
-      top: 75px;
-      left: 50%;
-      transform: translateX(-50%);
-      background: rgba(17, 17, 27, 0.95);
-      padding: 6px 10px;
-      border-radius: 6px;
-      white-space: nowrap;
-      transition: all 0.3s ease;
-      pointer-events: none;
-      z-index: 1001;
-      border: 1px solid rgba(134, 88, 255, 0.3);
-      backdrop-filter: blur(10px);
-      font-weight: 500;
-    }
-
-    .memory-node:hover .memory-label {
-      opacity: 1;
-      transform: translateX(-50%) translateY(-5px);
-    }
-
-    /* Theme-based colors */
-    .memory-node[data-theme="family"] {
-      box-shadow:
-        0 0 30px rgba(255, 105, 135, 0.4),
-        0 0 60px rgba(255, 105, 135, 0.2);
-    }
-
-    .memory-node[data-theme="travel"] {
-      box-shadow:
-        0 0 30px rgba(52, 211, 153, 0.4),
-        0 0 60px rgba(52, 211, 153, 0.2);
-    }
-
-    .memory-node[data-theme="recent"] {
-      box-shadow:
-        0 0 30px rgba(96, 165, 250, 0.4),
-        0 0 60px rgba(96, 165, 250, 0.2);
-    }
-
-    .memory-node[data-theme="special"] {
-      box-shadow:
-        0 0 30px rgba(251, 191, 36, 0.4),
-        0 0 60px rgba(251, 191, 36, 0.2);
-    }
-
-    .constellation-controls {
-      color: white;
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-    }
-
-    .constellation-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 15px;
-    }
-
-    .constellation-header h3 {
-      margin: 0;
-      font-size: 18px;
-      font-weight: 600;
-    }
-
-    .constellation-close {
-      background: none;
-      border: none;
-      color: white;
-      font-size: 18px;
-      cursor: pointer;
-      padding: 5px;
-      border-radius: 50%;
-      width: 30px;
-      height: 30px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      transition: background 0.3s ease;
-    }
-
-    .constellation-close:hover {
-      background: rgba(255, 255, 255, 0.1);
-    }
-
-    .constellation-themes {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 8px;
-    }
-
-    .theme-filter {
-      background: rgba(134, 88, 255, 0.2);
-      border: 1px solid rgba(134, 88, 255, 0.4);
-      color: white;
-      padding: 8px 12px;
-      border-radius: 20px;
-      cursor: pointer;
-      font-size: 12px;
-      transition: all 0.3s ease;
-    }
-
-    .theme-filter.active {
-      background: rgba(134, 88, 255, 0.4);
-      border-color: rgba(134, 88, 255, 0.6);
-    }
-
-    .theme-filter.disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-
-    .theme-filter:hover:not(.disabled) {
-      background: rgba(134, 88, 255, 0.3);
-      transform: translateY(-2px);
-    }
-
-    /* Memory Dialog Styles */
-    .memory-dialog {
-      background: rgba(17, 17, 27, 0.95);
-      border: 1px solid rgba(134, 88, 255, 0.3);
-      border-radius: 16px;
-      padding: 0;
-      max-width: 800px;
-      width: 90%;
-      max-height: 80vh;
-      overflow: hidden;
-      backdrop-filter: blur(20px);
-      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
-      transform: scale(0.9);
-      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    }
-
-    .memory-dialog-overlay[style*="opacity: 1"] .memory-dialog {
-      transform: scale(1);
-    }
-
-    .memory-dialog-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 24px 32px;
-      border-bottom: 1px solid rgba(134, 88, 255, 0.2);
-      background: linear-gradient(135deg, rgba(134, 88, 255, 0.1), rgba(240, 147, 251, 0.1));
-    }
-
-    .memory-title {
-      margin: 0;
-      font-size: 24px;
-      font-weight: 600;
-      color: white;
-      text-shadow: 0 0 10px rgba(134, 88, 255, 0.5);
-    }
-
-    .memory-close {
-      background: none;
-      border: none;
-      color: white;
-      font-size: 24px;
-      cursor: pointer;
-      padding: 8px;
-      border-radius: 50%;
-      width: 40px;
-      height: 40px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      transition: background 0.3s ease;
-    }
-
-    .memory-close:hover {
-      background: rgba(255, 255, 255, 0.1);
-    }
-
-    .memory-content {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 32px;
-      padding: 32px;
-    }
-
-    .memory-slideshow {
-      display: flex;
-      flex-direction: column;
-      gap: 16px;
-    }
-
-    .slideshow-container {
-      aspect-ratio: 16/9;
-      border-radius: 12px;
-      overflow: hidden;
-      background: rgba(134, 88, 255, 0.1);
-      border: 1px solid rgba(134, 88, 255, 0.2);
-    }
-
-    .memory-slide {
-      width: 100%;
-      height: 100%;
-      display: none;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .memory-slide.active {
-      display: flex;
-    }
-
-    .media-placeholder {
-      text-align: center;
-      color: rgba(255, 255, 255, 0.7);
-    }
-
-    .media-icon {
-      font-size: 48px;
-      display: block;
-      margin-bottom: 16px;
-    }
-
-    .slideshow-controls {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 16px;
-    }
-
-    .slide-btn {
-      background: rgba(134, 88, 255, 0.2);
-      border: 1px solid rgba(134, 88, 255, 0.4);
-      color: white;
-      padding: 8px 12px;
-      border-radius: 8px;
-      cursor: pointer;
-      font-size: 18px;
-      transition: all 0.3s ease;
-    }
-
-    .slide-btn:hover {
-      background: rgba(134, 88, 255, 0.4);
-      transform: scale(1.05);
-    }
-
-    .slide-indicator {
-      color: rgba(255, 255, 255, 0.8);
-      font-size: 14px;
-      font-weight: 500;
-    }
-
-    .memory-details {
-      display: flex;
-      flex-direction: column;
-      gap: 24px;
-    }
-
-    .memory-summary h3 {
-      margin: 0 0 12px 0;
-      font-size: 18px;
-      font-weight: 600;
-      color: white;
-    }
-
-    .memory-summary p {
-      margin: 0;
-      line-height: 1.6;
-      color: rgba(255, 255, 255, 0.8);
-    }
-
-    .memory-metadata {
-      display: flex;
-      flex-direction: column;
-      gap: 12px;
-    }
-
-    .metadata-item {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 8px 0;
-      border-bottom: 1px solid rgba(134, 88, 255, 0.1);
-    }
-
-    .metadata-item .label {
-      font-weight: 500;
-      color: rgba(255, 255, 255, 0.7);
-    }
-
-    .metadata-item .value {
-      font-weight: 600;
-      color: white;
-    }
-
-    .value.theme-family { color: rgba(255, 105, 135, 1); }
-    .value.theme-travel { color: rgba(52, 211, 153, 1); }
-    .value.theme-recent { color: rgba(96, 165, 250, 1); }
-    .value.theme-special { color: rgba(251, 191, 36, 1); }
-
-    .memory-actions {
-      display: flex;
-      justify-content: flex-end;
-      gap: 12px;
-      padding: 24px 32px;
-      border-top: 1px solid rgba(134, 88, 255, 0.2);
-      background: rgba(134, 88, 255, 0.05);
-    }
-
-    .action-btn {
-      padding: 12px 24px;
-      border-radius: 8px;
-      font-weight: 500;
-      cursor: pointer;
-      transition: all 0.3s ease;
-      border: none;
-    }
-
-    .action-btn.secondary {
-      background: rgba(134, 88, 255, 0.2);
-      color: white;
-      border: 1px solid rgba(134, 88, 255, 0.4);
-    }
-
-    .action-btn.secondary:hover {
-      background: rgba(134, 88, 255, 0.3);
-      transform: translateY(-2px);
-    }
-
-    .action-btn.primary {
-      background: linear-gradient(135deg, rgba(134, 88, 255, 1), rgba(240, 147, 251, 0.8));
-      color: white;
-      border: none;
-    }
-
-    .action-btn.primary:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 8px 25px rgba(134, 88, 255, 0.4);
-    }
-
-    /* Simplified fade-in timing for menu items */
-    .radial-item:nth-child(1) { transition-delay: 0.1s; }
-    .radial-item:nth-child(2) { transition-delay: 0.15s; }
-    .radial-item:nth-child(3) { transition-delay: 0.2s; }
-    .radial-item:nth-child(4) { transition-delay: 0.25s; }
-
-    .radial-item:hover {
-      background: rgba(134, 88, 255, 0.3);
-      border-color: var(--emma-purple);
-      transform: scale(1.05);
-      box-shadow: 0 0 40px rgba(134, 88, 255, 0.4);
-    }
-
-    .radial-item.pulsing {
-      animation: pulse 2s ease-in-out infinite;
-    }
-
-    @keyframes pulse {
-      0%, 100% {
-        box-shadow: 0 0 30px rgba(134, 88, 255, 0.2);
-        transform: scale(1);
-      }
-      50% {
-        box-shadow: 0 0 50px rgba(134, 88, 255, 0.5);
-        transform: scale(1.05);
-      }
-    }
-
-    .radial-item-icon {
-      font-size: 32px;
-      margin-bottom: 4px;
-      filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.3));
-    }
-
-    .radial-item-label {
-      font-size: 12px;
-      text-align: center;
-      opacity: 0.9;
-      font-weight: 500;
-    }
-
-    .node-connection {
-      stroke: rgba(134, 88, 255, 0.3);
-      stroke-width: 2;
-      fill: none;
-      stroke-dasharray: 5, 5;
-      animation: dash 20s linear infinite;
-    }
-
-    @keyframes dash {
-      to { stroke-dashoffset: -100; }
-    }
-
-    /* Info Panels */
-    .info-panel {
-      position: fixed;
-      background: var(--emma-glass);
-      backdrop-filter: blur(20px);
-      border: 1px solid var(--emma-border);
-      border-radius: 20px;
-      padding: 24px;
-      min-width: 280px;
-      opacity: 0;
-      transform: translateY(20px);
-      transition: all 0.4s ease;
-      z-index: 10;
-    }
-
-    .info-panel.active {
-      opacity: 1;
-      transform: translateY(0);
-    }
-
-    /* Fade panels and header text when neural menu is active */
-    body.menu-active .info-panel {
-      opacity: 0;
-      transform: translateY(20px) scale(0.9);
-      filter: blur(2px);
-      pointer-events: none;
-    }
-
-    body.menu-active .welcome-text {
-      opacity: 0 !important;
-      transform: translateY(-20px) scale(0.9);
-      filter: blur(3px);
-      pointer-events: none;
-      visibility: hidden;
-    }
-
-    body.menu-active .voice-indicator {
-      opacity: 0;
-      transform: translateX(-50%) translateY(20px) scale(0.9);
-      filter: blur(2px);
-      pointer-events: none;
-    }
-
-    body.menu-active .constellation-canvas {
-      opacity: 0;
-      filter: blur(3px);
-      pointer-events: none;
-    }
-
-    /* Constellation Mode - Hide ALL UI except constellation */
-    body.constellation-active .info-panel,
-    body.constellation-active .welcome-text,
-    body.constellation-active .voice-indicator,
-    body.constellation-active .constellation-canvas,
-    body.constellation-active .quick-stats {
-      opacity: 0 !important;
-      visibility: hidden !important;
-      pointer-events: none !important;
-      transition: all 0.5s ease;
-    }
-
-    /* Keep only constellation controls and radial menu visible */
-    body.constellation-active .constellation-controls,
-    body.constellation-active .radial-menu {
-      opacity: 1 !important;
-      visibility: visible !important;
-      pointer-events: all !important;
-    }
-
-    /* Hide panels in constellation mode */
-    body.constellation-active .info-panel.right-stack,
-    body.constellation-active .utility-icons {
-      opacity: 0 !important;
-      visibility: hidden !important;
-      pointer-events: none !important;
-    }
-
-    /* Bottom Left Utility Icons */
-    /* Clean Icons - No backgrounds */
-    .clean-icons {
-      position: fixed;
-      bottom: 24px;
-      left: 24px;
-      display: flex;
-      gap: 16px;
-      z-index: 1000;
-    }
-
-    .clean-icons > div {
-      cursor: pointer;
-      color: rgba(255, 255, 255, 0.7);
-      transition: all 0.3s ease;
-      padding: 8px;
-    }
-
-    .clean-icons > div:hover {
-      color: white;
-      transform: scale(1.1);
-    }
-
-    /* Hide old utility icons completely */
-    .utility-icons {
-      display: none !important;
-    }
-
-    .utility-item {
-      display: none !important;
-    }
-
-    .utility-icon {
-      display: none !important;
-    }
-
-    .utility-label {
-      display: none !important;
-    }
-
-    /* Burger menu CSS removed for clean interface */
-
-    /* Right side panel stack - hidden by default */
-    .info-panel.right-stack {
-      position: fixed;
-      right: -360px; /* Hidden off-screen */
-      width: 320px;
-      min-width: 320px;
-      max-width: 320px;
-      height: 180px;
-      min-height: 180px;
-      max-height: 180px;
-      transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-      z-index: 999;
-    }
-
-    /* Show panels when menu is active */
-    .panels-visible .info-panel.right-stack {
-      right: 24px;
-    }
-
-    #daily-brief.right-stack {
-      top: 24px;
-    }
-
-    #ai-insights.right-stack {
-      top: calc(24px + 180px + 16px);
-    }
-
-    #quick-actions.right-stack {
-      top: calc(24px + 180px + 16px + 180px + 16px);
-    }
-
-    /* Legacy positioning for any remaining panels */
-    .info-panel.top-left {
-      top: 24px;
-      left: 24px;
-    }
-
-    .info-panel.top-right {
-      top: 24px;
-      right: 24px;
-    }
-
-    .info-panel.bottom-left {
-      bottom: 24px;
-      left: 24px;
-    }
-
-    .info-panel.bottom-right {
-      bottom: 24px;
-      right: 24px;
-    }
-
-    .panel-header {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      margin-bottom: 16px;
-      padding-bottom: 12px;
-      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-    }
-
-    /* Adjust content for right stack panels */
-    .info-panel.right-stack .panel-content {
-      overflow: hidden;
-      height: calc(100% - 70px); /* Account for header height */
-    }
-
-    .info-panel.right-stack .panel-content p {
-      font-size: 14px;
-      line-height: 1.4;
-      margin-bottom: 8px;
-    }
-
-    .panel-icon {
-      font-size: 24px;
-    }
-
-    .panel-title {
-      font-size: 18px;
-      font-weight: 600;
-    }
-
-    .panel-content {
-      font-size: 14px;
-      line-height: 1.6;
-      color: var(--emma-text-secondary);
-    }
-
-    /* Memory Constellation Background */
-    .constellation-canvas {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      z-index: 1;
-      opacity: 0.3;
-      pointer-events: none;
-    }
-
-    /* Voice Activation Indicator */
-    .voice-indicator {
-      position: fixed;
-      bottom: 40px;
-      left: 50%;
-      transform: translateX(-50%);
-      background: var(--emma-glass);
-      backdrop-filter: blur(20px);
-      border: 1px solid var(--emma-border);
-      border-radius: 30px;
-      padding: 12px 24px;
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      opacity: 0;
-      transform: translateX(-50%) translateY(20px);
-      transition: all 0.3s ease;
-      z-index: 10;
-    }
-
-    .voice-indicator.active {
-      opacity: 1;
-      transform: translateX(-50%) translateY(0);
-    }
-
-    .voice-waves {
-      display: flex;
-      gap: 3px;
-      align-items: center;
-    }
-
-    .voice-wave {
-      width: 3px;
-      height: 20px;
-      background: var(--emma-purple);
-      border-radius: 3px;
-      animation: wave 1s ease-in-out infinite;
-    }
-
-    .voice-wave:nth-child(2) { animation-delay: 0.1s; height: 30px; }
-    .voice-wave:nth-child(3) { animation-delay: 0.2s; height: 25px; }
-    .voice-wave:nth-child(4) { animation-delay: 0.3s; height: 35px; }
-    .voice-wave:nth-child(5) { animation-delay: 0.4s; height: 20px; }
-
-    @keyframes wave {
-      0%, 100% { transform: scaleY(0.5); opacity: 0.5; }
-      50% { transform: scaleY(1); opacity: 1; }
-    }
-
-    /* Quick Stats */
-    .quick-stats {
-      position: absolute;
-      bottom: -80px;
-      left: 50%;
-      transform: translateX(-50%);
-      display: flex;
-      gap: 32px;
-      opacity: 0;
-      transition: opacity 0.4s ease;
-    }
-
-    .command-center:hover .quick-stats {
-      opacity: 1;
-    }
-
-    .stat-item {
-      text-align: center;
-      cursor: pointer;
-      transition: transform 0.2s ease;
-    }
-
-    .stat-item:hover {
-      transform: translateY(-4px);
-    }
-
-    .stat-value {
-      font-size: 28px;
-      font-weight: 700;
-      background: var(--emma-gradient-1);
-      background-clip: text;
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-    }
+  <!-- Theme catalog and manager -->
+  <script src="themes/theme-catalog.js"></script>
+  <script src="js/theme-manager.js"></script>
 
-    .stat-label {
-      font-size: 12px;
-      color: var(--emma-text-tertiary);
-      text-transform: uppercase;
-      letter-spacing: 1px;
-      margin-top: 4px;
-    }
+  <!-- Dashboard base styles -->
+  <link rel="stylesheet" href="css/dashboard-base.css">
 
-    /* Notification Toast */
-    .toast {
-      position: fixed;
-      top: 24px;
-      right: 24px;
-      background: var(--emma-glass);
-      backdrop-filter: blur(20px);
-      border: 1px solid var(--emma-border);
-      border-radius: 12px;
-      padding: 16px 24px;
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      opacity: 0;
-      transform: translateX(400px);
-      transition: all 0.4s ease;
-      z-index: 1000;
-    }
-
-    .toast.show {
-      opacity: 1;
-      transform: translateX(0);
-    }
-
-    .toast.success { border-color: var(--emma-success); }
-    .toast.error { border-color: var(--emma-error); }
-    .toast.info { border-color: var(--emma-blue); }
-
-    /* Loading State */
-    .loading-overlay {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background: rgba(0, 0, 0, 0.8);
-      backdrop-filter: blur(10px);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      z-index: 9999;
-      opacity: 0;
-      pointer-events: none;
-      transition: opacity 0.3s ease;
-    }
-
-    .loading-overlay.active {
-      opacity: 1;
-      pointer-events: all;
-    }
-
-    .loading-content {
-      text-align: center;
-    }
-
-    .loading-orb {
-      width: 80px;
-      height: 80px;
-      margin: 0 auto 20px;
-      position: relative;
-      /* Emma's orb will be rendered here via WebGL */
-    }
-
-    /* Fallback for when WebGL orb isn't available */
-    .loading-orb-fallback {
-      width: 100%;
-      height: 100%;
-      background: radial-gradient(circle at 30% 30%, #8A5EFA, #764ba2, #f093fb);
-      border-radius: 50%;
-      animation: loading-pulse 1.5s ease-in-out infinite;
-      box-shadow: 0 0 30px rgba(138, 94, 250, 0.4);
-    }
-
-    @keyframes loading-pulse {
-      0%, 100% { transform: scale(1); opacity: 0.8; }
-      50% { transform: scale(1.2); opacity: 1; }
-    }
-
-    /* Welcome Text */
-    .welcome-text {
-      position: fixed;
-      top: 40px;
-      left: 50%;
-      transform: translateX(-50%);
-      text-align: center;
-      opacity: 0;
-      animation: fade-in 1s ease-out 0.5s forwards;
-    }
-
-    .welcome-title {
-      font-size: 48px;
-      font-weight: 200;
-      margin-bottom: 8px;
-      background: var(--emma-gradient-1);
-      background-clip: text;
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-    }
-
-    .welcome-subtitle {
-      font-size: 18px;
-      color: var(--emma-text-secondary);
-      font-weight: 400;
-    }
-
-    @keyframes fade-in {
-      to { opacity: 1; }
-    }
-
-    /* Vault Modal Styles */
-    .vault-modal {
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background: rgba(0, 0, 0, 0.8);
-      backdrop-filter: blur(10px);
-      z-index: 10000;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 20px;
-      opacity: 0;
-      transition: opacity 0.3s ease;
-    }
-
-    .vault-modal.show {
-      opacity: 1;
-    }
-
-    .vault-modal-content {
-      background: linear-gradient(135deg, rgba(26, 16, 51, 0.98), rgba(45, 27, 105, 0.98));
-      border: 1px solid rgba(134, 88, 255, 0.3);
-      border-radius: 24px;
-      max-width: 600px;
-      width: 100%;
-      max-height: 90vh;
-      overflow-y: auto;
-      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
-      transform: scale(0.9);
-      transition: transform 0.3s ease;
-    }
-
-    .vault-modal.show .vault-modal-content {
-      transform: scale(1);
-    }
-
-    .vault-modal-header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 32px 32px 24px;
-      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-      background: linear-gradient(135deg, rgba(134, 88, 255, 0.1), rgba(240, 147, 251, 0.1));
-    }
-
-    .vault-header-content {
-      display: flex;
-      align-items: center;
-      gap: 20px;
-    }
-
-    .vault-icon {
-      width: 64px;
-      height: 64px;
-      background: linear-gradient(135deg, #8658ff, #f093fb);
-      border-radius: 16px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 32px;
-    }
-
-    .vault-title h2 {
-      margin: 0 0 4px 0;
-      font-size: 28px;
-      font-weight: 700;
-      color: var(--emma-text);
-    }
-
-    .vault-title p {
-      margin: 0;
-      color: var(--emma-text-secondary);
-      font-size: 16px;
-    }
-
-    .vault-close {
-      width: 48px;
-      height: 48px;
-      border: none;
-      background: rgba(255, 255, 255, 0.1);
-      color: var(--emma-text);
-      border-radius: 12px;
-      font-size: 24px;
-      cursor: pointer;
-      transition: all 0.2s ease;
-    }
-
-    .vault-close:hover {
-      background: rgba(255, 255, 255, 0.2);
-    }
-
-    .vault-modal-body {
-      padding: 32px;
-    }
-
-    .vault-status-section {
-      margin-bottom: 32px;
-    }
-
-    .vault-status-card {
-      display: flex;
-      align-items: center;
-      gap: 20px;
-      padding: 24px;
-      background: rgba(255, 255, 255, 0.05);
-      border: 1px solid rgba(255, 255, 255, 0.1);
-      border-radius: 16px;
-      transition: all 0.3s ease;
-    }
-
-    .vault-status-card.unlocked {
-      border-color: rgba(74, 222, 128, 0.3);
-      background: rgba(74, 222, 128, 0.1);
-    }
-
-    .vault-btn {
-      padding: 12px 24px;
-      border: none;
-      border-radius: 12px;
-      font-size: 16px;
-      font-weight: 600;
-      cursor: pointer;
-      transition: all 0.3s ease;
-      display: inline-flex;
-      align-items: center;
-      gap: 8px;
-    }
-
-    .vault-btn.primary {
-      background: linear-gradient(135deg, #8658ff, #f093fb);
-      color: white;
-    }
-
-    .vault-btn.primary:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 8px 24px rgba(134, 88, 255, 0.4);
-    }
-
-    .vault-btn.secondary {
-      background: rgba(255, 255, 255, 0.1);
-      color: var(--emma-text);
-      border: 1px solid rgba(255, 255, 255, 0.2);
-    }
-
-    .vault-btn.secondary:hover {
-      background: rgba(255, 255, 255, 0.2);
-    }
-
-    .vault-btn.small {
-      padding: 8px 16px;
-      font-size: 14px;
-    }
-
-    .vault-unlock-section {
-      margin-bottom: 32px;
-      padding: 24px;
-      background: rgba(255, 255, 255, 0.03);
-      border-radius: 16px;
-      border: 1px solid rgba(255, 255, 255, 0.1);
-    }
-
-    .unlock-form label {
-      display: block;
-      margin-bottom: 8px;
-      color: var(--emma-text);
-      font-weight: 600;
-    }
-
-    .unlock-form input {
-      width: 100%;
-      padding: 16px 20px;
-      background: rgba(255, 255, 255, 0.1);
-      border: 1px solid rgba(255, 255, 255, 0.2);
-      border-radius: 12px;
-      color: var(--emma-text);
-      font-size: 16px;
-      margin-bottom: 20px;
-      text-align: center;
-      letter-spacing: 2px;
-    }
-
-    .unlock-form input:focus {
-      outline: none;
-      border-color: var(--emma-purple);
-      box-shadow: 0 0 0 3px rgba(134, 88, 255, 0.2);
-    }
-
-    .unlock-actions {
-      display: flex;
-      gap: 12px;
-      justify-content: center;
-    }
-
-    /* Create Vault Section */
-    .vault-create-section {
-      margin-bottom: 32px;
-      padding: 24px;
-      background: rgba(16, 185, 129, 0.1);
-      border-radius: 16px;
-      border: 1px solid rgba(16, 185, 129, 0.3);
-    }
-
-    .create-vault-card {
-      text-align: center;
-    }
-
-    .create-vault-icon {
-      font-size: 48px;
-      margin-bottom: 16px;
-    }
-
-    .create-vault-content h3 {
-      color: var(--emma-text);
-      margin-bottom: 8px;
-      font-size: 20px;
-    }
-
-    .create-vault-content p {
-      color: var(--emma-text-secondary);
-      margin-bottom: 20px;
-      font-size: 16px;
-    }
-
-    .vault-qr-section h3 {
-      margin: 0 0 8px 0;
-      color: var(--emma-text);
-      font-size: 20px;
-    }
-
-    .vault-qr-section p {
-      margin: 0 0 20px 0;
-      color: var(--emma-text-secondary);
-    }
-
-    .qr-option-card {
-      display: flex;
-      align-items: center;
-      gap: 16px;
-      padding: 20px;
-      background: rgba(255, 255, 255, 0.05);
-      border: 1px solid rgba(255, 255, 255, 0.1);
-      border-radius: 12px;
-      transition: all 0.3s ease;
-      cursor: pointer;
-    }
-
-    .qr-option-card:hover {
-      border-color: rgba(134, 88, 255, 0.3);
-      background: rgba(134, 88, 255, 0.1);
-    }
-
-    .qr-option-icon {
-      font-size: 32px;
-      min-width: 32px;
-    }
-
-    .qr-option-content {
-      flex: 1;
-    }
-
-    .qr-option-content h4 {
-      margin: 0 0 4px 0;
-      color: var(--emma-text);
-      font-size: 16px;
-    }
-
-    .qr-option-content p {
-      margin: 0;
-      color: var(--emma-text-secondary);
-      font-size: 14px;
-    }
-
-    .vault-actions-section {
-      border-top: 1px solid rgba(255, 255, 255, 0.1);
-      padding-top: 24px;
-    }
-
-    /* Responsive Design */
-    /* Mobile-First Responsive Design */
-    @media (max-width: 768px) {
-      .radial-menu {
-        width: 100vw;
-        height: 100vh;
-      }
-
-      .radial-item {
-        /* 🌌 UNIFIED: Same size for all devices - no more mobile/desktop differences */
-        width: 90px !important;
-        height: 90px !important;
-        font-size: 12px;
-        /* 🎯 TOUCH FRIENDLY: Large enough for all devices */
-        min-width: 90px;
-        min-height: 90px;
-        /* 🔗 BOUND TO ORB: Unified positioning */
-        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
-      }
-
-      .radial-item-icon {
-        font-size: 28px;
-      }
-
-      .radial-item-label {
-        font-size: 11px;
-        margin-top: 3px;
-        font-weight: 500;
-      }
-
-      /* 📱 MOBILE OPTIMIZATION: Better visual feedback */
-      .radial-item:active {
-        transform: scale(0.95) !important;
-        background: rgba(134, 88, 255, 0.3) !important;
-      }
-
-      .emma-orb-container {
-        width: 120px !important;
-        height: 120px !important;
-      }
-
-      .welcome-title {
-        font-size: 2.5rem;
-      }
-
-      .welcome-subtitle {
-        font-size: 0.9rem;
-      }
-
-      /* Mobile constellation filters */
-      .constellation-burger-menu {
-        top: 10px !important;
-        left: 10px !important;
-      }
-
-      .constellation-menu-panel {
-        width: 280px !important;
-        max-height: 70vh !important;
-        overflow-y: auto;
-      }
-
-      .info-panel,
-      .info-panel.right-stack {
-        position: fixed;
-        bottom: 0 !important;
-        left: 0 !important;
-        right: 0 !important;
-        top: auto !important;
-        width: 100% !important;
-        min-width: 100% !important;
-        max-width: 100% !important;
-        height: auto !important;
-        min-height: auto !important;
-        max-height: 50vh !important;
-        border-radius: 20px 20px 0 0;
-        overflow-y: auto;
-      }
-
-      /* Stack panels vertically on mobile */
-      #daily-brief.right-stack { transform: translateY(0); }
-      #ai-insights.right-stack { transform: translateY(0); }
-      #quick-actions.right-stack { transform: translateY(0); }
-    }
-
-    /* Tablet optimizations */
-    @media (max-width: 1024px) and (min-width: 769px) {
-      .radial-item {
-        /* 🌌 UNIFIED: Same 90px size for tablets too */
-        width: 90px;
-        height: 90px;
-      }
-
-      .emma-orb-container {
-        width: 160px;
-        height: 160px;
-      }
-    }
-
-    /* Import Voice Capture Premium Styles */
-
-    /* Person Summary Modal Styles */
-    .person-summary-modal-overlay {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background: rgba(0, 0, 0, 0.8);
-      backdrop-filter: blur(10px);
-      -webkit-backdrop-filter: blur(10px);
-      z-index: 10000;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      opacity: 0;
-      visibility: hidden;
-      transition: all 0.3s ease;
-    }
-
-    .person-summary-modal-overlay.active {
-      opacity: 1;
-      visibility: visible;
-    }
-
-    .person-summary-modal {
-      /* 🎨 EMMA GLASSMORPHISM: Match chat interface aesthetic */
-      background: rgba(26, 16, 51, 0.92);
-      backdrop-filter: blur(25px) saturate(150%);
-      -webkit-backdrop-filter: blur(25px) saturate(150%);
-      border: 1px solid rgba(255, 255, 255, 0.12);
-      border-radius: 24px;
-      padding: 32px;
-      width: 90%;
-      max-width: 500px;
-      max-height: 80vh;
-      overflow-y: auto;
-      transform: scale(0.9) translateY(20px);
-      transition: transform 0.3s ease;
-      position: relative;
-      box-shadow: 
-        0 25px 80px rgba(0, 0, 0, 0.4),
-        0 0 0 1px rgba(255, 255, 255, 0.08),
-        inset 0 1px 0 rgba(255, 255, 255, 0.12);
-    }
-
-    .person-summary-modal .modal-close {
-      position: absolute;
-      top: 16px;
-      right: 16px;
-      width: 32px;
-      height: 32px;
-      border-radius: 50%;
-      background: rgba(255, 255, 255, 0.1);
-      border: 1px solid rgba(255, 255, 255, 0.2);
-      color: white;
-      font-size: 18px;
-      font-weight: 300;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      transition: all 0.3s ease;
-      backdrop-filter: blur(10px);
-      -webkit-backdrop-filter: blur(10px);
-    }
-
-    .person-summary-modal .modal-close:hover {
-      background: rgba(255, 255, 255, 0.2);
-      border-color: rgba(255, 255, 255, 0.4);
-      transform: scale(1.1);
-    }
-
-    .person-summary-modal-overlay.active .person-summary-modal {
-      transform: scale(1) translateY(0);
-    }
-
-    .person-summary-header {
-      display: flex;
-      align-items: center;
-      gap: 20px;
-      margin-bottom: 32px;
-      padding-bottom: 20px;
-      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-    }
-
-    .person-summary-avatar {
-      width: 80px;
-      height: 80px;
-      border-radius: 50%;
-      background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: white;
-      font-weight: 700;
-      font-size: 32px;
-      overflow: hidden;
-    }
-
-    .person-summary-info {
-      flex: 1;
-    }
-
-    .person-summary-name {
-      font-size: 1.8rem;
-      font-weight: 600;
-      color: white;
-      margin: 0 0 8px 0;
-    }
-
-    .person-summary-relation {
-      font-size: 1rem;
-      color: rgba(255, 255, 255, 0.7);
-      margin: 0 0 4px 0;
-      text-transform: capitalize;
-    }
-
-    .person-summary-contact {
-      font-size: 0.9rem;
-      color: rgba(255, 255, 255, 0.5);
-      margin: 0;
-    }
-
-    .summary-section-title {
-      font-size: 1.2rem;
-      font-weight: 600;
-      color: white;
-      margin-bottom: 16px;
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
-
-    .summary-section-title::before {
-      content: '';
-      width: 3px;
-      height: 20px;
-      background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
-      border-radius: 2px;
-    }
-
-    .connected-memories {
-      display: flex;
-      flex-direction: column;
-      gap: 12px;
-      margin-bottom: 24px;
-    }
-
-    .connected-memory-item {
-      display: flex;
-      align-items: center;
-      gap: 16px;
-      padding: 16px;
-      background: rgba(255, 255, 255, 0.05);
-      border-radius: 12px;
-      cursor: pointer;
-      transition: all 0.3s ease;
-    }
-
-    .connected-memory-item:hover {
-      background: rgba(255, 255, 255, 0.1);
-      transform: translateY(-2px);
-    }
-
-    .memory-preview {
-      width: 50px;
-      height: 50px;
-      border-radius: 8px;
-      background: rgba(255, 255, 255, 0.1);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      overflow: hidden;
-      font-size: 20px;
-    }
-
-    .memory-preview img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-      border-radius: 8px;
-    }
-
-    .memory-info {
-      flex: 1;
-    }
-
-    .memory-title {
-      font-size: 1rem;
-      font-weight: 500;
-      color: white;
-      margin-bottom: 4px;
-    }
-
-    .memory-date {
-      font-size: 0.85rem;
-      color: rgba(255, 255, 255, 0.6);
-    }
-
-    .no-memories {
-      text-align: center;
-      padding: 40px 20px;
-      color: rgba(255, 255, 255, 0.5);
-      font-style: italic;
-    }
-
-    .person-summary-actions {
-      display: flex;
-      gap: 12px;
-    }
-
-    .person-summary-actions .btn {
-      flex: 1;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 8px;
-      padding: 12px 16px;
-      border: none;
-      border-radius: 12px;
-      font-weight: 600;
-      cursor: pointer;
-      transition: all 0.3s ease;
-    }
-
-    .person-summary-actions .btn-primary {
-      background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
-      color: white;
-    }
-
-    .person-summary-actions .btn-primary:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 10px 20px rgba(139, 92, 246, 0.3);
-    }
-
-    .person-summary-actions .btn-secondary {
-      background: rgba(255, 255, 255, 0.1);
-      color: rgba(255, 255, 255, 0.8);
-      border: 1px solid rgba(255, 255, 255, 0.2);
-    }
-
-    .person-summary-actions .btn-secondary:hover {
-      background: rgba(255, 255, 255, 0.2);
-      color: white;
-    }
-  </style>
 </head>
 <body>
   <!-- Aurora Background -->
@@ -1818,26 +120,20 @@ <h1 class="welcome-title">emma</h1>
 
 
   <!-- Bottom Left Clean Icons -->
-  <div class="clean-icons" style="
-    position: fixed;
-    bottom: 24px;
-    left: 24px;
-    display: flex;
-    gap: 16px;
-    z-index: 1000;
-  ">
+  <div class="clean-icons">
     <!-- Clean Settings Gear Icon -->
-    <div onclick="window.location.href='pages/emma-settings-redesigned.html'" style="
-      cursor: pointer;
-      color: rgba(255, 255, 255, 0.7);
-      transition: all 0.3s ease;
-      padding: 8px;
-    " onmouseover="this.style.color='white'; this.style.transform='scale(1.1)'" onmouseout="this.style.color='rgba(255, 255, 255, 0.7)'; this.style.transform='scale(1)'">
-      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-        <circle cx="12" cy="12" r="3"/>
-        <path d="m12 1 1.09 3.26L16 5.64l-1.64 3.36L17 12l-2.64 2.64L16 18.36l-3.26-1.09L12 23l-1.09-3.26L8 18.36l1.64-3.36L7 12l2.64-2.64L8 5.64l3.26 1.09z"/>
+    <button
+      type="button"
+      class="emma-floating-button settings-button"
+      data-action="navigate-settings"
+      aria-label="Open Settings"
+      title="Settings"
+    >
+      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M12 15.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z"/>
+        <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
       </svg>
-    </div>
+    </button>
   </div>
 
       <!-- Quick Stats -->
@@ -1852,10 +148,10 @@ <h1 class="welcome-title">emma</h1>
         </div>
 
         <!-- Revolutionary Migration Button -->
-        <div class="stat-item revolution-upgrade" onclick="openMigrationPage()" style="background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(236, 72, 153, 0.2)); border: 2px solid rgba(139, 92, 246, 0.4); cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden;">
-          <div class="stat-value" style="font-size: 1.2rem; color: #8b5cf6;">🌟</div>
-          <div class="stat-label" style="color: #ec4899; font-weight: 600; font-size: 0.8rem;">Upgrade to .emma</div>
-          <div style="position: absolute; top: 4px; right: 4px; background: linear-gradient(135deg, #8b5cf6, #ec4899); color: white; font-size: 0.6rem; padding: 2px 6px; border-radius: 8px; font-weight: 600;">NEW</div>
+        <div class="stat-item revolution-upgrade" data-action="open-migration" style="background: linear-gradient(135deg, rgba(111, 99, 217, 0.2), rgba(208, 111, 168, 0.2)); border: 2px solid rgba(111, 99, 217, 0.4); cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden;">
+          <div class="stat-value" style="font-size: 1.2rem; color: #6f63d9;">🌟</div>
+          <div class="stat-label" style="color: #d06fa8; font-weight: 600; font-size: 0.8rem;">Upgrade to .emma</div>
+          <div style="position: absolute; top: 4px; right: 4px; background: linear-gradient(135deg, #6f63d9, #d06fa8); color: white; font-size: 0.6rem; padding: 2px 6px; border-radius: 8px; font-weight: 600;">NEW</div>
         </div>
         <div class="stat-item" data-stat="today">
           <div class="stat-value" id="stat-today">0</div>
@@ -2013,18 +309,18 @@ <h4>Scan QR Code</h4>
         <!-- Quick Actions -->
         <div class="vault-actions-section">
           <div class="quick-actions-grid">
-            <button class="quick-action" onclick="window.location.href='pages/gallery.html'">
+            <button class="quick-action" data-action="open-gallery">
               <span>💝</span>
               <span>View Memory Constellation</span>
             </button>
-            <button class="quick-action" onclick="window.location.href='pages/emma-settings-redesigned.html'">
+            <button class="quick-action" data-action="navigate-settings">
               <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color: rgba(255, 255, 255, 0.8);">
                 <circle cx="12" cy="12" r="3"/>
                 <path d="m12 1 1.09 3.26L16 5.64l-1.64 3.36L17 12l-2.64 2.64L16 18.36l-3.26-1.09L12 23l-1.09-3.26L8 18.36l1.64-3.36L7 12l2.64-2.64L8 5.64l3.26 1.09z"/>
               </svg>
               <span>Settings</span>
             </button>
-            <button class="quick-action" onclick="window.location.href='pages/people-emma.html'">
+            <button class="quick-action" data-action="open-people">
               <span>👥</span>
               <span>People</span>
             </button>
@@ -2047,8 +343,10 @@ <h4>Scan QR Code</h4>
   <script src="js/emma-voice-transcription.js"></script>
   
   <!-- Emma Intelligence & Chat System -->
+  <script src="js/memory-orchestrator.js"></script>
   <script src="js/emma-vectorless-engine.js"></script>
   <script src="js/emma-intelligent-capture.js"></script>
+  <script src="js/emma-unified-intelligence.js"></script>
   <script src="js/emma-chat-experience.js"></script>
   <script src="js/emma-qr-generator.js"></script>
   
@@ -2062,5788 +360,6 @@ <h4>Scan QR Code</h4>
   <script src="js/universal-vault-modal.js"></script>
   <script src="js/unified-memory-wizard.js"></script>
 
-  <script>
-    // Extension mode - Skip vault session validation
-
-    // Vault initialization moved to end of page after ALL scripts load
-
-    // Dashboard Controller
-    class EmmaDashboard {
-      constructor() {
-        // Original Emma Orb setup (RESTORED)
-        this.orb = document.getElementById('emma-orb');
-        this.radialMenu = document.getElementById('radial-menu');
-        this.voiceIndicator = document.getElementById('voice-indicator');
-        
-        // CRITICAL: Expose dashboard globally for Emma Chat Experience
-        window.emmaDashboard = this;
-        this.loading = document.getElementById('loading');
-        
-        // Initialize WebGL Emma Orb (RESTORED ORIGINAL)
-        this.initEmmaOrb();
-
-        console.log('🔧 Constructor - Dashboard initialized with clean original system');
-        this.panels = {
-          dailyBrief: document.getElementById('daily-brief'),
-          aiInsights: document.getElementById('ai-insights'),
-          quickActions: document.getElementById('quick-actions')
-        };
-
-        // Burger menu removed for clean interface
-        this.panelsVisible = false;
-
-        // Utility icons functionality
-        this.utilityIcons = document.querySelector('.utility-icons');
-        this.setupUtilityIcons();
-
-        this.isMenuOpen = false;
-        this.stats = { memories: 0, people: 0, today: 0 };
-        this.particles = [];
-        this.nodes = [];
-        this.neuralCanvas = document.getElementById('neural-canvas');
-        this.neuralCtx = this.neuralCanvas.getContext('2d');
-
-        // Neural memory network properties
-        this.isConstellationMode = false;
-        this.constellationMemories = [];
-        this.centralNeuron = null;
-        
-        // 🔍 ZOOM FUNCTIONALITY: Dashboard constellation zoom/pan state
-        this.zoomState = {
-          scale: 1,
-          translateX: 0,
-          translateY: 0,
-          isDragging: false,
-          lastTouchDistance: 0,
-          minScale: 0.3,
-          maxScale: 3.0
-        };
-        this.constellationContainer = null;
-
-        // Initialize WebGL Emma Orb
-        this.initEmmaOrb();
-
-        // Listen for vault status changes
-        document.addEventListener('vaultStatusChanged', (event) => {
-
-          this.updateVaultNodeStatus();
-          this.updateAllVaultIndicators();
-        });
-
-        this.init();
-      }
-
-      // Removed Universal Orb Menu - keeping clean original system
-
-      // Removed Universal Orb Menu action handler - using original radial menu system
-
-      async init() {
-        // Show loading
-        this.loading.classList.add('active');
-
-        // Initialize Emma's orb in loading screen
-        this.initLoadingOrb();
-
-        // Initialize constellation background
-        console.log('🔍 DEBUG: About to initialize constellation, DOM ready state:', document.readyState);
-        console.log('🔍 DEBUG: Constellation canvas exists?', !!document.getElementById('constellation'));
-        this.initConstellation();
-        
-        // Setup event listeners
-        this.setupEventListeners();
-
-        // Load initial data
-        await this.loadDashboardData();
-
-        // Animate panels based on time of day
-        this.showContextualPanels();
-
-        // Hide loading
-        setTimeout(() => {
-          this.loading.classList.remove('active');
-        }, 1500);
-
-        // 🎯 SAFE AUTO-TRIGGER: Check URL params for constellation or memory creation
-        this.handleURLParams();
-
-        // Start background animations
-        this.startAnimations();
-      }
-
-      initConstellation() {
-        const canvas = document.getElementById('constellation');
-        if (!canvas) {
-          console.warn('⚠️ Constellation canvas not found, skipping initialization');
-          return;
-        }
-        
-        const ctx = canvas.getContext('2d');
-        if (!ctx) {
-          console.warn('⚠️ Could not get constellation canvas context, skipping initialization');
-          return;
-        }
-
-        // Set canvas size
-        const resize = () => {
-          canvas.width = window.innerWidth;
-          canvas.height = window.innerHeight;
-        };
-        resize();
-        window.addEventListener('resize', resize);
-
-        // Create memory particles
-        const particleCount = 50;
-        for (let i = 0; i < particleCount; i++) {
-          this.particles.push({
-            x: Math.random() * canvas.width,
-            y: Math.random() * canvas.height,
-            vx: (Math.random() - 0.5) * 0.5,
-            vy: (Math.random() - 0.5) * 0.5,
-            radius: Math.random() * 2 + 1,
-            opacity: Math.random() * 0.5 + 0.2
-          });
-        }
-
-        // Animation loop
-        const animate = () => {
-          ctx.clearRect(0, 0, canvas.width, canvas.height);
-
-          // Update and draw particles
-          this.particles.forEach((p, i) => {
-            // Update position
-            p.x += p.vx;
-            p.y += p.vy;
-
-            // Wrap around edges
-            if (p.x < 0) p.x = canvas.width;
-            if (p.x > canvas.width) p.x = 0;
-            if (p.y < 0) p.y = canvas.height;
-            if (p.y > canvas.height) p.y = 0;
-
-            // Draw particle
-            ctx.beginPath();
-            ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
-            ctx.fillStyle = `rgba(134, 88, 255, ${p.opacity})`;
-            ctx.fill();
-
-            // Draw connections
-            this.particles.forEach((p2, j) => {
-              if (i !== j) {
-                const dx = p.x - p2.x;
-                const dy = p.y - p2.y;
-                const dist = Math.sqrt(dx * dx + dy * dy);
-
-                if (dist < 100) {
-                  ctx.beginPath();
-                  ctx.moveTo(p.x, p.y);
-                  ctx.lineTo(p2.x, p2.y);
-                  ctx.strokeStyle = `rgba(134, 88, 255, ${(1 - dist / 100) * 0.2})`;
-                  ctx.stroke();
-                }
-              }
-            });
-          });
-
-          requestAnimationFrame(animate);
-        };
-        animate();
-      }
-
-      setupEventListeners() {
-        // RESTORED: Original Emma orb click handler
-        this.orb.addEventListener('click', (e) => {
-          e.stopPropagation();
-          console.log('🎯 ORB CLICKED - Debug info:', {
-            isConstellationMode: this.isConstellationMode,
-            isMenuOpen: this.isMenuOpen,
-            orbExists: !!this.orb,
-            radialMenuExists: !!this.radialMenu,
-            dashboardInstance: !!window.emmaDashboard
-          });
-          
-          if (this.isConstellationMode) {
-            console.log('🌌 Exiting constellation mode...');
-            this.exitMemoryConstellation();
-          } else {
-            console.log('🔘 Toggling radial menu...');
-            this.toggleRadialMenu();
-          }
-        });
-
-        // RESTORED: Radial menu items
-        this.radialMenu.querySelectorAll('.radial-item').forEach(item => {
-          item.addEventListener('click', (e) => {
-            e.stopPropagation();
-            const action = item.dataset.action;
-            this.handleRadialAction(action);
-          });
-        });
-
-        console.log('🎯 Event listeners setup - RESTORED original orb & radial menu');
-
-        // Track mouse/touch position for neural effects
-        this.mouseX = 0;
-        this.mouseY = 0;
-
-        // Mouse support
-        document.addEventListener('mousemove', (e) => {
-          this.mouseX = e.clientX;
-          this.mouseY = e.clientY;
-          this.updateNodeProximityEffects();
-        });
-
-        // Touch support for mobile
-        document.addEventListener('touchmove', (e) => {
-          if (e.touches.length > 0) {
-            this.mouseX = e.touches[0].clientX;
-            this.mouseY = e.touches[0].clientY;
-            this.updateNodeProximityEffects();
-          }
-        }, { passive: true });
-
-        document.addEventListener('touchstart', (e) => {
-          if (e.touches.length > 0) {
-            this.mouseX = e.touches[0].clientX;
-            this.mouseY = e.touches[0].clientY;
-          }
-        }, { passive: true });
-
-        // Handle window resize for responsive repositioning
-        window.addEventListener('resize', () => {
-          // Debounce resize events
-          clearTimeout(this.resizeTimeout);
-          this.resizeTimeout = setTimeout(() => {
-            if (this.isMenuOpen) {
-              // 🔄 MOBILE FIX: Keep radial menu bound to orb center
-              this.repositionMenuToOrb();
-              
-              // CRITICAL FIX: Resize canvas and redraw connections after repositioning
-              if (this.neuralCanvas) {
-                this.neuralCanvas.width = window.innerWidth;
-                this.neuralCanvas.height = window.innerHeight;
-              }
-              
-              // Force immediate redraw of connections with new positions
-              if (this.render && typeof this.render === 'function') {
-                this.render();
-              } else if (window.neuralRenderer && window.neuralRenderer.render) {
-                window.neuralRenderer.render();
-              }
-            } else if (this.isConstellationMode) {
-              // Existing constellation resize handling
-              this.repositionNodesOnResize();
-              
-              if (this.neuralCanvas) {
-                this.neuralCanvas.width = window.innerWidth;
-                this.neuralCanvas.height = window.innerHeight;
-              }
-              
-              if (this.render && typeof this.render === 'function') {
-                this.render();
-              } else if (window.neuralRenderer && window.neuralRenderer.render) {
-                window.neuralRenderer.render();
-              }
-            }
-          }, 250);
-        });
-      }
-
-      // Extract proximity effects to separate method for reuse
-      updateNodeProximityEffects() {
-        // Add proximity effects to nodes (both menu and constellation modes)
-        if ((this.isMenuOpen || this.isConstellationMode) && this.nodes.length > 0) {
-          this.nodes.forEach(node => {
-            const dist = Math.sqrt(
-              Math.pow(this.mouseX - node.x, 2) +
-              Math.pow(this.mouseY - node.y, 2)
-            );
-
-            if (dist < 120) {
-              // Subtle attraction to mouse with organic feel
-              const force = (120 - dist) / 120;
-              const angle = Math.atan2(this.mouseY - node.y, this.mouseX - node.x);
-
-              // Very gentle attraction with organic damping
-              const attractionStrength = force * 0.08; // Much more subtle
-              node.vx += Math.cos(angle) * attractionStrength;
-              node.vy += Math.sin(angle) * attractionStrength;
-
-              // Add glow effect (stronger for memory nodes)
-              const glowStrength = this.isConstellationMode ? 60 : 40;
-              const baseOpacity = this.isConstellationMode ? 0.8 : 0.6;
-              node.element.style.boxShadow = `0 0 ${glowStrength + force * 30}px rgba(134, 88, 255, ${baseOpacity + force * 0.4})`;
-            } else {
-              // Reset glow when mouse is far
-              node.element.style.boxShadow = '';
-            }
-          });
-        }
-      }
-
-      // Reposition nodes on window resize for responsive behavior (CONSTELLATION MODE ONLY)
-      repositionNodesOnResize() {
-        if (!this.nodes || this.nodes.length === 0) return;
-        
-        // 🚨 CRITICAL: This function is now ONLY for constellation mode
-        // Radial menu repositioning is handled by repositionMenuToOrb()
-        if (!this.isConstellationMode) {
-          console.warn('🚨 repositionNodesOnResize called for non-constellation mode - use repositionMenuToOrb instead');
-          return;
-        }
-
-        const centerX = window.innerWidth / 2;
-        const centerY = window.innerHeight / 2;
-
-        // Reposition each constellation node
-        this.nodes.forEach((node, i) => {
-          // For constellation mode, maintain relative positions but scale
-          const scaleX = window.innerWidth / (this.lastWindowWidth || window.innerWidth);
-          const scaleY = window.innerHeight / (this.lastWindowHeight || window.innerHeight);
-
-          node.x = centerX + (node.x - centerX) * scaleX;
-          node.y = centerY + (node.y - centerY) * scaleY;
-          node.baseX = node.x;
-          node.baseY = node.y;
-
-          // Update DOM position - UNIFIED: Same size for all devices
-          if (node.element) {
-            const elementSize = 45; // Consistent centering for all devices (90px items)
-            node.element.style.left = (node.x - elementSize) + 'px';
-            node.element.style.top = (node.y - elementSize) + 'px';
-          }
-        });
-
-        // Store current window size for next resize
-        this.lastWindowWidth = window.innerWidth;
-        this.lastWindowHeight = window.innerHeight;
-
-      }
-
-      // Keyboard shortcuts
-      setupKeyboardShortcuts() {
-        document.addEventListener('keydown', (e) => {
-          if (e.code === 'Space' && !e.target.matches('input, textarea')) {
-            e.preventDefault();
-            this.startVoiceCapture();
-          } else if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
-            e.preventDefault();
-            this.handleRadialAction('search');
-          } else if (e.key === 'Escape' && this.isMenuOpen) {
-            this.toggleRadialMenu();
-          }
-        });
-
-        // Click outside to close menu
-        document.addEventListener('click', (e) => {
-          if (this.isMenuOpen && !this.orb.contains(e.target) && !this.radialMenu.contains(e.target)) {
-
-            this.toggleRadialMenu();
-          }
-        });
-
-        // Hover effects for orb
-        this.orb.addEventListener('mouseenter', () => {
-          document.querySelectorAll('.quick-stats').forEach(el => {
-            el.style.opacity = '1';
-          });
-        });
-
-        // Initialize keyboard shortcuts
-        this.setupKeyboardShortcuts();
-        
-        // RESTORED: Click outside to close menu
-        document.addEventListener('click', (e) => {
-          if (this.isMenuOpen && !this.orb.contains(e.target) && !this.radialMenu.contains(e.target)) {
-            this.toggleRadialMenu();
-          }
-        });
-
-        // RESTORED: Hover effects for orb
-        this.orb.addEventListener('mouseenter', () => {
-          document.querySelectorAll('.quick-stats').forEach(el => {
-            el.style.opacity = '1';
-            el.style.transform = 'translateY(-10px) scale(1.02)';
-          });
-        });
-
-        this.orb.addEventListener('mouseleave', () => {
-          document.querySelectorAll('.quick-stats').forEach(el => {
-            el.style.opacity = '0.7';
-            el.style.transform = 'translateY(0) scale(1)';
-          });
-        });
-
-        // CRITICAL FIX: Listen for vault status changes from extension
-        this.setupVaultStatusListener();
-        
-        // Auto-trigger constellation mode if hash is present
-        if (window.location.hash === '#constellation') {
-          console.log('🌟 DASHBOARD: Auto-triggering constellation mode from URL hash');
-          setTimeout(() => {
-            this.enterMemoryConstellation();
-          }, 1000); // Wait for vault to load
-        }
-      }
-
-      // Listen for vault status changes and update UI
-      setupVaultStatusListener() {
-        window.addEventListener('vault-status-changed', (event) => {
-
-          // Update global status
-          window.currentVaultStatus = event.detail;
-
-          // Update vault node status in UI
-          this.updateVaultNodeStatus();
-
-          // Update any vault-dependent UI elements
-          this.refreshVaultDependentUI();
-        });
-
-        // Also listen for extension-vault-ready directly
-        window.addEventListener('extension-vault-ready', (event) => {
-
-          // Ensure vault status is updated
-          if (window.webVaultStatus) {
-            window.webVaultStatus.status.isUnlocked = true;
-            window.webVaultStatus.status.hasVault = true;
-            window.webVaultStatus.status.name = event.detail.vaultName;
-            window.currentVaultStatus = window.webVaultStatus.status;
-          }
-
-          // Update UI immediately
-          this.updateVaultNodeStatus();
-        });
-
-        // CRITICAL: Listen for memory additions from Emma Chat
-        window.addEventListener('emmaMemoryAdded', (event) => {
-          console.log('🔄 DASHBOARD: Memory added event received, refreshing constellation');
-          
-          if (this.isConstellationMode) {
-            // Force constellation refresh with new data - longer delay to ensure vault sync
-            setTimeout(() => {
-              this.enterMemoryConstellation();
-              console.log('🔄 DASHBOARD: Constellation refreshed after memory addition');
-            }, 300); // Increased delay for better data consistency
-          }
-        });
-      }
-
-      // Refresh UI elements that depend on vault status
-      refreshVaultDependentUI() {
-        // Update any vault-dependent elements
-        const vaultElements = document.querySelectorAll('[data-vault-dependent]');
-        vaultElements.forEach(element => {
-          if (window.currentVaultStatus && window.currentVaultStatus.isUnlocked) {
-            element.classList.remove('vault-locked');
-            element.classList.add('vault-unlocked');
-          } else {
-            element.classList.remove('vault-unlocked');
-            element.classList.add('vault-locked');
-          }
-        });
-      }
-
-      initNeuralNetwork() {
-        // 🎯 BACK TO BASICS: Orb-relative positioning that actually works
-        console.log('🔧 initNeuralNetwork: Using orb-relative positioning');
-
-        const items = this.radialMenu.querySelectorAll('.radial-item');
-        
-        // 🔥 GET ACTUAL ORB POSITION: Don't force it, work with it
-        const orbRect = this.orb.getBoundingClientRect();
-        const orbCenterX = orbRect.left + orbRect.width / 2;
-        const orbCenterY = orbRect.top + orbRect.height / 2;
-
-        console.log('🎯 Actual orb center:', { x: orbCenterX, y: orbCenterY, orbRect });
-
-        // 🌌 SIMPLIFIED: One radius that works great for all devices - true orbiting feel
-        const radius = 140; // Proper orbiting distance - feels like satellites around Emma orb
-
-        console.log('🌌 Using unified orbiting radius:', radius, 'px for all devices');
-
-        // Clear existing nodes
-        this.nodes = [];
-
-        items.forEach((item, i) => {
-          const angle = (i / items.length) * Math.PI * 2 - Math.PI / 2;
-          
-          // 🔗 ORB-RELATIVE: Calculate position relative to actual orb center
-          const targetX = orbCenterX + Math.cos(angle) * radius;
-          const targetY = orbCenterY + Math.sin(angle) * radius;
-
-          // 🎬 ANIMATION SETUP: Start at actual orb center for animate-out effect
-          const startX = orbCenterX;
-          const startY = orbCenterY;
-
-          // Position at target location (no scaling animation needed)
-          item.style.left = (targetX - 45) + 'px'; // Center the 90px item
-          item.style.top = (targetY - 45) + 'px';
-          
-          // CRITICAL FIX: Ensure item is visible after exitMemoryConstellation reset
-          item.style.opacity = '1';
-          item.style.transform = 'scale(1)';
-          
-          console.log(`🔧 Item ${i} restored:`, {
-            left: item.style.left,
-            top: item.style.top,
-            opacity: item.style.opacity,
-            transform: item.style.transform
-          });
-
-          console.log(`🎯 Item ${i}: start(${startX}, ${startY}) → target(${targetX}, ${targetY})`);
-
-          // Store position data (simplified for gentle fade)
-          const nodeData = {
-            element: item,
-            x: targetX,      // Final position
-            y: targetY,
-            targetX: targetX,
-            targetY: targetY,
-            baseX: targetX,
-            baseY: targetY,
-            angle: angle,
-            connections: [],
-            orbBound: true
-          };
-
-          this.nodes.push(nodeData);
-        });
-
-        // Create connections between nodes
-        this.nodes.forEach((node, i) => {
-          // Connect to adjacent nodes
-          const next = this.nodes[(i + 1) % this.nodes.length];
-          const prev = this.nodes[(i - 1 + this.nodes.length) % this.nodes.length];
-          node.connections.push(next, prev);
-
-          // Connect to opposite node for cross-connections
-          const opposite = this.nodes[(i + Math.floor(this.nodes.length / 2)) % this.nodes.length];
-          if (opposite !== node) {
-            node.connections.push(opposite);
-          }
-        });
-
-        // Add central orb as a node at actual orb center
-        this.centralNode = {
-          x: orbCenterX,
-          y: orbCenterY,
-          element: this.orb
-        };
-
-        // Connect all nodes to center
-        this.nodes.forEach(node => {
-          node.connections.push(this.centralNode);
-        });
-      }
-
-      // Removed initRadialNeuralNetwork - no longer needed since we exit constellation instead of showing menu overlay
-
-      toggleRadialMenu() {
-        console.log('🔘 toggleRadialMenu called - Debug:', {
-          isMenuOpen: this.isMenuOpen,
-          radialMenuExists: !!this.radialMenu,
-          dashboardInstance: !!window.emmaDashboard
-        });
-        
-        this.isMenuOpen = !this.isMenuOpen;
-
-        if (this.isMenuOpen) {
-          this.radialMenu.classList.add('active');
-          document.body.classList.add('menu-active'); // Fade ALL UI elements
-
-          this.updateVaultNodeStatus(); // Update vault node based on status
-
-          // Initialize the menu nodes (without aggressive physics)
-          this.initNeuralNetwork();
-
-        } else {
-          this.radialMenu.classList.remove('active');
-          document.body.classList.remove('menu-active');
-
-          // Clear any neural animation
-          if (this.neuralAnimationId) {
-            cancelAnimationFrame(this.neuralAnimationId);
-            this.neuralCtx.clearRect(0, 0, this.neuralCanvas.width, this.neuralCanvas.height);
-          }
-
-          // Reset nodes array
-          this.nodes = [];
-        }
-      }
-
-      // Simple method to position menu items around orb with gentle fade-in
-      positionMenuItemsAroundOrb() {
-        const orbRect = this.orb.getBoundingClientRect();
-        const orbCenterX = orbRect.left + orbRect.width / 2;
-        const orbCenterY = orbRect.top + orbRect.height / 2;
-        const radius = 140; // Consistent distance from orb
-
-        const menuItems = this.radialMenu.querySelectorAll('.radial-item');
-        
-        menuItems.forEach((item, i) => {
-          const angle = (i / menuItems.length) * Math.PI * 2 - Math.PI / 2;
-          const targetX = orbCenterX + Math.cos(angle) * radius;
-          const targetY = orbCenterY + Math.sin(angle) * radius;
-          
-          // Position the item (center the 90px item)
-          item.style.left = (targetX - 45) + 'px';
-          item.style.top = (targetY - 45) + 'px';
-        });
-      }
-
-      // 🧠 NEURAL EXPANSION: Expand radial nodes using neural network physics
-      expandRadialNeuralNetwork() {
-        console.log('🧠 Expanding radial neural network from orb center');
-        
-        this.nodes.forEach((node, i) => {
-          // Set target position for neural physics to move toward
-          node.baseX = node.targetX;
-          node.baseY = node.targetY;
-          
-          // Add initial velocity toward target (like constellation nodes)
-          const dx = node.targetX - node.x;
-          const dy = node.targetY - node.y;
-          const distance = Math.sqrt(dx * dx + dy * dy);
-          
-          if (distance > 1) {
-            // Give it momentum toward target
-            node.vx = (dx / distance) * 3; // Fast initial velocity
-            node.vy = (dy / distance) * 3;
-          }
-          
-          // Show and scale the node
-          setTimeout(() => {
-            node.element.style.transition = 'opacity 0.1s ease, transform 0.1s ease';
-            node.element.style.opacity = '1';
-            node.element.style.transform = 'scale(1)';
-            
-            // Pause float animation during menu display
-            node.element.style.animationPlayState = 'paused';
-            
-            console.log(`🧠 Node ${i} neural expansion initiated to (${node.targetX}, ${node.targetY})`);
-          }, i * 15); // Fast stagger
-        });
-      }
-
-      // 🧠 NEURAL COLLAPSE: Collapse radial nodes back to orb using neural physics
-      collapseRadialNeuralNetwork() {
-        console.log('🧠 Collapsing radial neural network back to orb center');
-        
-        // Get actual orb center position
-        const orbRect = this.orb.getBoundingClientRect();
-        const orbCenterX = orbRect.left + orbRect.width / 2;
-        const orbCenterY = orbRect.top + orbRect.height / 2;
-        
-        this.nodes.forEach((node, i) => {
-          // Set orb center as the new target for neural physics
-          node.baseX = orbCenterX;
-          node.baseY = orbCenterY;
-          node.targetX = orbCenterX;
-          node.targetY = orbCenterY;
-          
-          // Add velocity toward orb center (like constellation nodes)
-          const dx = orbCenterX - node.x;
-          const dy = orbCenterY - node.y;
-          const distance = Math.sqrt(dx * dx + dy * dy);
-          
-          if (distance > 1) {
-            // Give it momentum toward orb center
-            node.vx = (dx / distance) * 4; // Fast collapse velocity
-            node.vy = (dy / distance) * 4;
-          }
-          
-          // Hide and scale down the node
-          setTimeout(() => {
-            node.element.style.transition = 'opacity 0.15s ease, transform 0.15s ease';
-            node.element.style.opacity = '0';
-            node.element.style.transform = 'scale(0)';
-            
-            // Re-enable float animation when menu closes
-            node.element.style.animationPlayState = 'running';
-            
-            console.log(`🧠 Node ${i} neural collapse initiated to orb (${orbCenterX}, ${orbCenterY})`);
-          }, (this.nodes.length - 1 - i) * 20); // Fast reverse stagger
-        });
-      }
-
-      // 🔄 NEW: Reposition menu items to stay bound to orb (for resize/orientation changes)
-      repositionMenuToOrb() {
-        if (!this.isMenuOpen || this.nodes.length === 0) return;
-        
-        console.log('🔄 Repositioning menu items to stay bound to orb');
-        
-        // Get current orb position (don't force it, work with it)
-        const orbRect = this.orb.getBoundingClientRect();
-        const orbCenterX = orbRect.left + orbRect.width / 2;
-        const orbCenterY = orbRect.top + orbRect.height / 2;
-        
-        // 🌌 SIMPLIFIED: Same orbiting radius for all devices
-        const radius = 140; // Consistent orbiting distance - satellites around Emma orb
-        
-        // Update all node positions relative to actual orb center
-        this.nodes.forEach((node, i) => {
-          const angle = (i / this.nodes.length) * Math.PI * 2 - Math.PI / 2;
-          const newTargetX = orbCenterX + Math.cos(angle) * radius;
-          const newTargetY = orbCenterY + Math.sin(angle) * radius;
-          
-          // Update positions with fast smooth transition
-          const item = node.element;
-          item.style.transition = 'all 0.15s ease';
-          item.style.left = (newTargetX - 45) + 'px';
-          item.style.top = (newTargetY - 45) + 'px';
-          
-          // Update node data
-          node.x = newTargetX;
-          node.y = newTargetY;
-          node.targetX = newTargetX;
-          node.targetY = newTargetY;
-          node.baseX = newTargetX;
-          node.baseY = newTargetY;
-        });
-      }
-
-      initLoadingOrb() {
-        try {
-          const loadingOrbContainer = document.querySelector('.loading-orb');
-          if (!loadingOrbContainer) {
-            console.warn('🌟 Loading orb container not found');
-            return;
-          }
-
-          if (window.EmmaOrb) {
-            // Create WebGL Emma Orb for loading screen
-            this.loadingOrb = new window.EmmaOrb(loadingOrbContainer, {
-              hue: 270, // Emma's signature purple-pink
-              hoverIntensity: 0.5,
-              rotateOnHover: false,
-              forceHoverState: true // Always show active state during loading
-            });
-
-          } else {
-            console.warn('🌟 EmmaOrb class not available for loading, using fallback');
-            // Fallback to gradient orb if WebGL not available
-            const fallbackDiv = document.createElement('div');
-            fallbackDiv.className = 'loading-orb-fallback';
-            loadingOrbContainer.appendChild(fallbackDiv);
-          }
-        } catch (error) {
-          console.error('🚨 Error initializing Loading Emma Orb:', error);
-          // Fallback on error
-          const loadingOrbContainer = document.querySelector('.loading-orb');
-          if (loadingOrbContainer) {
-            const fallbackDiv = document.createElement('div');
-            fallbackDiv.className = 'loading-orb-fallback';
-            loadingOrbContainer.appendChild(fallbackDiv);
-          }
-        }
-      }
-
-      initEmmaOrb() {
-        try {
-          const orbContainer = document.getElementById('webgl-orb-container');
-          if (!orbContainer) {
-            console.warn('🌟 WebGL orb container not found');
-            return;
-          }          if (window.EmmaOrb) {
-            try {
-              // Create WebGL Emma Orb with Emma's signature purple-pink hue
-              this.webglOrb = new window.EmmaOrb(orbContainer, {
-                hue: 270, // Purple-pink Emma colors
-                hoverIntensity: 0.35,
-                rotateOnHover: true,
-                forceHoverState: false
-              });
-
-            } catch (webglError) {
-              console.error('❌ WebGL orb creation failed:', webglError);
-              // Force fallback
-              window.EmmaOrb = null;
-            }
-          }
-
-          if (!window.EmmaOrb || !this.webglOrb) {
-            console.warn('🌟 EmmaOrb class not available, using fallback');
-            // Fallback to beautiful gradient if EmmaOrb class not loaded
-            orbContainer.style.background = 'radial-gradient(circle at 30% 30%, #8658ff, #4f46e5, #f093fb)';
-            orbContainer.style.borderRadius = '50%';
-            orbContainer.style.width = '100%';
-            orbContainer.style.height = '100%';
-            orbContainer.style.boxShadow = '0 0 40px rgba(134, 88, 255, 0.6), inset 0 0 40px rgba(255, 255, 255, 0.1)';
-            orbContainer.style.animation = 'orb-pulse 3s ease-in-out infinite';
-
-          }
-
-          // Clean Emma orb - no vault unlock needed on dashboard
-        } catch (error) {
-          console.error('🚨 Error initializing Emma Orb:', error);
-          // Ensure fallback is applied
-          const orbContainer = document.getElementById('webgl-orb-container');
-          if (orbContainer) {
-            orbContainer.style.background = 'radial-gradient(circle at 30% 30%, #8658ff, #4f46e5)';
-            orbContainer.style.borderRadius = '50%';
-            orbContainer.style.width = '100%';
-            orbContainer.style.height = '100%';
-          }
-        }
-      }
-
-      updateVaultNodeStatus() {
-        try {
-
-          const vaultNode = document.getElementById('vault-node');
-          if (!vaultNode) {
-            console.warn('⚠️ Vault node not found, skipping status update');
-            // Try alternative selectors
-            const altVaultNode = document.querySelector('[data-action="vault"], .radial-item[onclick*="vault"]');
-            if (altVaultNode) {
-
-              this.updateAlternativeVaultNode(altVaultNode);
-            }
-            return;
-          }
-
-          const vaultIcon = vaultNode.querySelector('.radial-item-icon');
-          if (!vaultIcon) {
-            console.warn('⚠️ Vault icon not found, trying alternative selector');
-            const altIcon = vaultNode.querySelector('span, .icon');
-            if (altIcon) {
-
-              this.updateVaultIcon(altIcon, vaultNode);
-              return;
-            }
-            return;
-          }
-
-          this.updateVaultIcon(vaultIcon, vaultNode);
-        } catch (error) {
-          console.warn('⚠️ Error updating vault node status:', error);
-        }
-      }
-
-      updateVaultIcon(vaultIcon, vaultNode) {
-        if (window.currentVaultStatus && window.currentVaultStatus.isUnlocked) {
-
-          vaultIcon.textContent = '🔓';
-          vaultNode.style.background = 'rgba(74, 222, 128, 0.1)'; // Green tint when unlocked
-          vaultNode.style.borderColor = 'rgba(74, 222, 128, 0.3)';
-          vaultNode.style.boxShadow = '0 0 20px rgba(74, 222, 128, 0.4)';
-        } else {
-
-          vaultIcon.textContent = '🔒';
-          vaultNode.style.background = 'var(--emma-glass)'; // Default when locked
-          vaultNode.style.borderColor = 'rgba(134, 88, 255, 0.3)';
-          vaultNode.style.boxShadow = '0 0 20px rgba(134, 88, 255, 0.2)';
-        }
-      }
-
-      updateAlternativeVaultNode(node) {
-        const icon = node.querySelector('span') || node;
-        if (window.currentVaultStatus && window.currentVaultStatus.isUnlocked) {
-          icon.textContent = '🔓';
-          node.style.background = 'rgba(74, 222, 128, 0.1)';
-        } else {
-          icon.textContent = '🔒';
-          node.style.background = 'var(--emma-glass)';
-        }
-      }
-
-      updateAllVaultIndicators() {
-
-        // Update any vault-related elements
-        const vaultElements = document.querySelectorAll('[data-action="vault"], .vault-indicator, #vault-node');
-        vaultElements.forEach(element => {
-          const icon = element.querySelector('span, .radial-item-icon') || element;
-          if (window.currentVaultStatus && window.currentVaultStatus.isUnlocked) {
-            if (icon.textContent) icon.textContent = '🔓';
-            element.style.background = 'rgba(74, 222, 128, 0.1)';
-            element.style.borderColor = 'rgba(74, 222, 128, 0.3)';
-            element.style.boxShadow = '0 0 20px rgba(74, 222, 128, 0.4)';
-          } else {
-            if (icon.textContent) icon.textContent = '🔒';
-            element.style.background = 'var(--emma-glass)';
-            element.style.borderColor = 'rgba(134, 88, 255, 0.3)';
-            element.style.boxShadow = '0 0 20px rgba(134, 88, 255, 0.2)';
-          }
-        });
-
-      }
-
-      // Check if a line intersects with Emma orb circle
-      lineIntersectsCircle(x1, y1, x2, y2, cx, cy, radius) {
-        // Vector from point1 to point2
-        const dx = x2 - x1;
-        const dy = y2 - y1;
-
-        // Vector from point1 to circle center
-        const fx = x1 - cx;
-        const fy = y1 - cy;
-
-        // Quadratic equation coefficients
-        const a = dx * dx + dy * dy;
-        const b = 2 * (fx * dx + fy * dy);
-        const c = (fx * fx + fy * fy) - radius * radius;
-
-        const discriminant = b * b - 4 * a * c;
-
-        // No intersection if discriminant is negative
-        if (discriminant < 0) return false;
-
-        // Check if intersection points are within the line segment
-        const sqrt_discriminant = Math.sqrt(discriminant);
-        const t1 = (-b - sqrt_discriminant) / (2 * a);
-        const t2 = (-b + sqrt_discriminant) / (2 * a);
-
-        // If either intersection point is within [0,1], line intersects circle
-        return (t1 >= 0 && t1 <= 1) || (t2 >= 0 && t2 <= 1) || (t1 < 0 && t2 > 1);
-      }
-
-      animateNeuralNetwork() {
-        // Resize canvas
-        this.neuralCanvas.width = window.innerWidth;
-        this.neuralCanvas.height = window.innerHeight;
-
-        const animate = () => {
-          if (!this.isMenuOpen && !this.isConstellationMode) return;
-
-          // Clear canvas
-          this.neuralCtx.clearRect(0, 0, this.neuralCanvas.width, this.neuralCanvas.height);
-
-          // Draw subtle grid background when menu is open or in constellation mode
-          if (this.isMenuOpen || this.isConstellationMode) {
-            this.neuralCtx.strokeStyle = 'rgba(134, 88, 255, 0.03)';
-            this.neuralCtx.lineWidth = 1;
-            const gridSize = 50;
-
-            // Draw vertical lines
-            for (let x = 0; x < this.neuralCanvas.width; x += gridSize) {
-              this.neuralCtx.beginPath();
-              this.neuralCtx.moveTo(x, 0);
-              this.neuralCtx.lineTo(x, this.neuralCanvas.height);
-              this.neuralCtx.stroke();
-            }
-
-            // Draw horizontal lines
-            for (let y = 0; y < this.neuralCanvas.height; y += gridSize) {
-              this.neuralCtx.beginPath();
-              this.neuralCtx.moveTo(0, y);
-              this.neuralCtx.lineTo(this.neuralCanvas.width, y);
-              this.neuralCtx.stroke();
-            }
-          }
-
-          // Update node positions with organic movement (only for visible nodes)
-          const time = Date.now() * 0.001;
-          this.nodes.forEach((node, i) => {
-            // CRITICAL FIX: Only animate visible nodes
-            const nodeElement = node.element || document.getElementById(node.id);
-            if (!nodeElement || nodeElement.style.display === 'none') {
-              return; // Skip animation for hidden nodes
-            }
-            // Different floating movement for radial vs constellation nodes
-            let floatX, floatY;
-            if (node.orbBound) {
-              // 🎯 RADIAL MENU NODES: Much tighter floating to stay within 50px radius
-              floatX = Math.sin(time * 0.3 + i) * 3; // Reduced from 12px to 3px
-              floatY = Math.cos(time * 0.2 + i * 0.5) * 2; // Reduced from 8px to 2px
-            } else {
-              // 🌌 CONSTELLATION NODES: Normal floating movement
-              floatX = Math.sin(time * 0.3 + i) * 12;
-              floatY = Math.cos(time * 0.2 + i * 0.5) * 8;
-            }
-
-            // Gentle elastic force back to base position (petri dish feel)
-            const dx = (node.baseX + floatX) - node.x;
-            const dy = (node.baseY + floatY) - node.y;
-
-            node.vx += dx * 0.005; // Much gentler elastic force
-            node.vy += dy * 0.005;
-
-            // Apply more damping for organic feel
-            node.vx *= 0.98;
-            node.vy *= 0.98;
-
-            // Add repulsion from Emma orb (prevent overlap)
-            if (this.centralNode && this.isConstellationMode) {
-              const orbDx = node.x - this.centralNode.x;
-              const orbDy = node.y - this.centralNode.y;
-              const orbDist = Math.sqrt(orbDx * orbDx + orbDy * orbDy);
-
-              // Repulsion zone around Emma orb
-              const repulsionRadius = 150;
-              if (orbDist < repulsionRadius && orbDist > 0) {
-                const repulsionForce = (repulsionRadius - orbDist) / repulsionRadius;
-                const forceStrength = repulsionForce * 0.3; // Gentle but firm repulsion
-
-                const normalizedDx = orbDx / orbDist;
-                const normalizedDy = orbDy / orbDist;
-
-                node.vx += normalizedDx * forceStrength;
-                node.vy += normalizedDy * forceStrength;
-              }
-            }
-
-            // Add gentle repulsion between memory nodes (prevent overlap)
-            if (this.isConstellationMode) {
-              this.nodes.forEach((otherNode, j) => {
-                if (i !== j) {
-                  // CRITICAL FIX: Only calculate repulsion with visible nodes
-                  const otherElement = otherNode.element || document.getElementById(otherNode.id);
-                  if (!otherElement || otherElement.style.display === 'none') {
-                    return; // Skip repulsion with hidden nodes
-                  }
-                  const nodeDx = node.x - otherNode.x;
-                  const nodeDy = node.y - otherNode.y;
-                  const nodeDist = Math.sqrt(nodeDx * nodeDx + nodeDy * nodeDy);
-
-                  // Minimum distance between nodes
-                  const minNodeDistance = 110;
-                  if (nodeDist < minNodeDistance && nodeDist > 0) {
-                    const repulsionForce = (minNodeDistance - nodeDist) / minNodeDistance;
-                    const forceStrength = repulsionForce * 0.1; // Very gentle node repulsion
-
-                    const normalizedDx = nodeDx / nodeDist;
-                    const normalizedDy = nodeDy / nodeDist;
-
-                    node.vx += normalizedDx * forceStrength;
-                    node.vy += normalizedDy * forceStrength;
-                  }
-                }
-              });
-            }
-
-            // Update position
-            node.x += node.vx;
-            node.y += node.vy;
-
-            // 🎯 RADIAL MENU CONSTRAINT: Hard limit radial nodes with proper breathing room from orb
-            if (node.orbBound && this.orbNeuralNode) {
-              const orbDx = node.x - this.orbNeuralNode.x;
-              const orbDy = node.y - this.orbNeuralNode.y;
-              const orbDistance = Math.sqrt(orbDx * orbDx + orbDy * orbDy);
-              
-              // 🌌 SIMPLIFIED: One max distance for all devices - orbiting constraint
-              const MAX_RADIAL_DISTANCE = 150; // Orbiting distance + small buffer for physics
-              
-              if (orbDistance > MAX_RADIAL_DISTANCE) {
-                // Constrain to max distance from orb center
-                const constrainedX = this.orbNeuralNode.x + (orbDx / orbDistance) * MAX_RADIAL_DISTANCE;
-                const constrainedY = this.orbNeuralNode.y + (orbDy / orbDistance) * MAX_RADIAL_DISTANCE;
-                node.x = constrainedX;
-                node.y = constrainedY;
-                
-                // Zero out velocity to prevent further drift
-                node.vx *= 0.5;
-                node.vy *= 0.5;
-              }
-            }
-
-            // Update DOM element position
-            node.element.style.left = node.x - 45 + 'px';
-            node.element.style.top = node.y - 45 + 'px';
-          });
-
-          // Draw connections with gradients (only between visible nodes)
-          this.nodes.forEach(node => {
-            // CRITICAL FIX: Check if source node is visible before drawing connections
-            const sourceElement = node.element || document.getElementById(node.id);
-            if (!sourceElement || sourceElement.style.display === 'none') {
-              return; // Skip connections from hidden nodes
-            }
-
-            node.connections.forEach(target => {
-              // CRITICAL FIX: Check if target node is visible before drawing connection
-              const targetElement = target.element || document.getElementById(target.id);
-              if (!targetElement || targetElement.style.display === 'none') {
-                return; // Skip connections to hidden nodes
-              }
-
-              // Check if line would pass through Emma orb area - if so, skip drawing
-              const centerX = window.innerWidth / 2;
-              const centerY = window.innerHeight / 2;
-              const orbRadius = 110; // Clean boundary around orb
-
-              if (this.lineIntersectsCircle(node.x, node.y, target.x, target.y, centerX, centerY, orbRadius)) {
-                return; // Skip drawing this connection - it would cross the orb
-              }
-
-              // Calculate distance for opacity
-              const dist = Math.sqrt(
-                Math.pow(node.x - target.x, 2) +
-                Math.pow(node.y - target.y, 2)
-              );
-
-              // Different opacity for main menu vs memory constellation
-              const isMemoryMode = this.isConstellationMode && !this.isMenuOpen;
-              const gradient = this.neuralCtx.createLinearGradient(
-                node.x, node.y, target.x, target.y
-              );
-
-              if (isMemoryMode) {
-                // Visible connections for memory constellation
-                gradient.addColorStop(0, 'rgba(134, 88, 255, 0.2)');
-                gradient.addColorStop(0.5, 'rgba(240, 147, 251, 0.15)');
-                gradient.addColorStop(1, 'rgba(134, 88, 255, 0.2)');
-                this.neuralCtx.lineWidth = 1.2 + Math.sin(time + dist * 0.01) * 0.2;
-              } else {
-                // Subtle connections for main menu (original loved style)
-                gradient.addColorStop(0, 'rgba(134, 88, 255, 0.03)');
-                gradient.addColorStop(0.5, 'rgba(240, 147, 251, 0.02)');
-                gradient.addColorStop(1, 'rgba(134, 88, 255, 0.03)');
-                this.neuralCtx.lineWidth = 0.5 + Math.sin(time + dist * 0.01) * 0.1;
-              }
-
-              this.neuralCtx.strokeStyle = gradient;
-
-              this.neuralCtx.beginPath();
-              this.neuralCtx.moveTo(node.x, node.y);
-
-              // Gentle organic curved connections
-              const midX = (node.x + target.x) / 2;
-              const midY = (node.y + target.y) / 2;
-              const curve1 = Math.sin(time * 0.4 + node.x * 0.005) * 15;
-              const curve2 = Math.cos(time * 0.3 + node.y * 0.005) * 10;
-
-              this.neuralCtx.bezierCurveTo(
-                node.x + curve1,
-                node.y + curve2,
-                target.x - curve2,
-                target.y - curve1,
-                target.x,
-                target.y
-              );
-
-              this.neuralCtx.stroke();
-            });
-          });
-
-          // Remove energy pulses - too aggressive
-
-          this.neuralAnimationId = requestAnimationFrame(animate);
-        };
-
-        animate();
-      }
-
-      // 🎯 SAFE URL PARAM HANDLER: Auto-trigger constellation or memory creation
-      handleURLParams() {
-        try {
-          const urlParams = new URLSearchParams(window.location.search);
-          
-          if (urlParams.get('constellation') === 'true') {
-            // Auto-enter constellation mode after a brief delay
-            setTimeout(() => {
-              console.log('🎯 AUTO-TRIGGERING: Constellation mode from URL param');
-              this.enterMemoryConstellation();
-            }, 2000); // Wait for dashboard to fully load
-          }
-          
-          if (urlParams.get('create') === 'true') {
-            // Auto-start voice capture for memory creation
-            setTimeout(() => {
-              console.log('🎯 AUTO-TRIGGERING: Memory creation from URL param');
-              this.startVoiceCapture();
-            }, 2000); // Wait for dashboard to fully load
-          }
-        } catch (error) {
-          console.warn('🔧 URL param handling failed (non-critical):', error);
-          // Safe fallback - do nothing if URL parsing fails
-        }
-      }
-
-      async handleRadialAction(action) {
-
-        switch(action) {
-          case 'capture':
-            this.startVoiceCapture();
-            break;
-          case 'memories':
-            await this.enterMemoryConstellation();
-            break;
-          case 'people':
-            window.location.href = 'pages/people-emma.html';
-            break;
-          case 'chat':
-            this.startEmmaChatExperience();
-            break;
-        }
-
-        // Close menu after action
-        if (this.isMenuOpen) {
-          this.toggleRadialMenu();
-        }
-      }
-
-      async startVoiceCapture() {
-
-        // Calculate elegant position relative to Emma orb
-        const orbRect = this.orb.getBoundingClientRect();
-        const viewportWidth = window.innerWidth;
-        const viewportHeight = window.innerHeight;
-
-        // Position the panel optimally
-        let left = orbRect.right + 24;
-        let top = Math.max(40, orbRect.top - 80);
-
-        // Ensure it fits in viewport
-        const panelWidth = 480;
-        const panelHeight = 700;
-
-        if (left + panelWidth > viewportWidth - 40) {
-          left = orbRect.left - panelWidth - 24;
-        }
-
-        if (top + panelHeight > viewportHeight - 40) {
-          top = viewportHeight - panelHeight - 40;
-        }
-
-        const position = {
-          left: Math.max(40, left),
-          top: Math.max(40, top),
-          width: panelWidth,
-          height: panelHeight
-        };
-
-        // Create and show voice capture experience
-        this.voiceCaptureExperience = new VoiceCaptureExperience(position, {
-          voiceEnabled: true,
-          autoStart: false // Let user initiate
-        });
-
-        try {
-          await this.voiceCaptureExperience.show();
-
-        } catch (error) {
-          console.error('🎤 Failed to open voice capture:', error);
-          this.showToast('Failed to open Voice Memory Studio. Please try again.', 'error');
-        }
-      }
-
-      async startEmmaChatExperience() {
-
-        // Center chat in the middle of the page
-        const viewportWidth = window.innerWidth;
-        const viewportHeight = window.innerHeight;
-
-        // Chat panel dimensions
-        const panelWidth = 600; // Wider for comfortable chat
-        const panelHeight = 700;
-
-        // Center position in the middle of the page
-        const position = {
-          left: (viewportWidth - panelWidth) / 2,
-          top: (viewportHeight - panelHeight) / 2,
-          width: panelWidth,
-          height: panelHeight
-        };
-
-        // Create and show Emma chat experience
-        this.emmaChatExperience = new EmmaChatExperience(position, {
-          contextAware: true,
-          memoryIntegration: true
-        });
-
-        try {
-          await this.emmaChatExperience.show();
-
-        } catch (error) {
-          console.error('💬 Failed to open Emma Chat:', error);
-          this.showToast('Failed to open Chat with Emma. Please try again.', 'error');
-        }
-      }
-
-      openVaultModal() {
-        // Check if extension is available first
-        if (window.emmaWebVault && window.emmaWebVault.extensionAvailable) {
-          // Extension is managing vault - dashboard should work automatically
-
-          return; // Don't show vault modal, extension handles everything
-        }
-
-        const modal = document.getElementById('vault-modal');
-        const statusIcon = document.getElementById('status-icon');
-        const statusTitle = document.getElementById('status-title');
-        const statusDescription = document.getElementById('status-description');
-        const actionBtn = document.getElementById('vault-action-btn');
-        const statusCard = document.getElementById('vault-status-card');
-        const unlockSection = document.getElementById('unlock-section');
-        const createVaultSection = document.getElementById('create-vault-section');
-
-        // Check if .emma vault is active (only if extension not available)
-        const vaultActive = sessionStorage.getItem('emmaVaultActive') === 'true';
-        const vaultName = sessionStorage.getItem('emmaVaultName') || 'Unknown Vault';
-        const extensionVaultActive = false; // Extension not available in this branch
-
-        if (extensionVaultActive) {
-          // Extension is managing vault - show connected status
-          statusIcon.textContent = '🔗';
-          statusTitle.textContent = 'Extension Connected';
-          statusDescription.textContent = 'Vault managed by Emma Extension - changes auto-save to local file';
-          actionBtn.textContent = '🔒 Manage via Extension';
-          actionBtn.onclick = () => alert('Click the Emma extension icon 🔒 in your browser toolbar to manage your vault!');
-          actionBtn.style.display = 'block';
-          unlockSection.style.display = 'none';
-          createVaultSection.style.display = 'none';
-          statusCard.classList.add('unlocked'); // Show as unlocked/connected
-        } else if (window.currentVaultStatus && window.currentVaultStatus.isUnlocked) {
-          statusIcon.textContent = '🔓';
-          statusTitle.textContent = `${vaultName} - Unlocked`;
-          statusDescription.textContent = `Your .emma vault file is open and your memories are accessible`;
-          actionBtn.textContent = '🔒 Lock Vault';
-          actionBtn.onclick = () => this.lockVault();
-          actionBtn.style.display = 'block';
-          statusCard.classList.add('unlocked');
-          unlockSection.style.display = 'none';
-          createVaultSection.style.display = 'none';
-        } else {
-          statusIcon.textContent = '🔒';
-          statusTitle.textContent = 'Vault Locked';
-          statusDescription.textContent = 'Enter your vault code to access your memories';
-          actionBtn.textContent = 'Unlock Vault';
-          actionBtn.onclick = () => this.showUnlockForm();
-          actionBtn.style.display = 'block';
-          statusCard.classList.remove('unlocked');
-          unlockSection.style.display = 'none';
-          createVaultSection.style.display = 'none';
-        }
-
-        modal.style.display = 'flex';
-        setTimeout(() => {
-          modal.classList.add('show');
-        }, 10);
-
-        // Store reference for global access
-        window.openVaultModal = () => this.openVaultModal();
-      }
-
-      closeVaultModal() {
-        const modal = document.getElementById('vault-modal');
-        modal.classList.remove('show');
-        setTimeout(() => {
-          modal.style.display = 'none';
-        }, 300);
-      }
-
-      showUnlockForm() {
-        // Use beautiful universal vault modal instead of inline form
-        universalVaultModal.show({
-          title: "Unlock Vault",
-          message: "Enter your vault passphrase to access your secure memories",
-          onSuccess: (result) => {
-
-            // Update vault status using unified manager
-            const vaultName = sessionStorage.getItem('emmaVaultName') || 'Web Vault';
-            window.webVaultStatus.unlock(vaultName);
-
-            // Refresh dashboard data and UI
-            this.loadDashboardData();
-
-            // IMMEDIATE vault icon update
-            const vaultIcon = document.querySelector('#vault-node .radial-item-icon');
-            if (vaultIcon) {
-              vaultIcon.textContent = '🔓';
-
-            }
-
-            // Update vault node with delay to ensure DOM is ready
-            setTimeout(() => {
-              this.updateVaultNodeStatus();
-
-              // Also try to update any other vault indicators
-              this.updateAllVaultIndicators();
-
-              // Force another immediate update
-              const vaultIconAgain = document.querySelector('#vault-node .radial-item-icon');
-              if (vaultIconAgain) {
-                vaultIconAgain.textContent = '🔓';
-
-              }
-            }, 100);
-
-            // Don't reopen modal - let it close naturally
-            // The next time user opens it, it will show correct status
-
-            this.showToast('✅ Vault unlocked successfully!', 'success');
-
-          },
-          onCancel: () => {
-
-          }
-        });
-      }
-
-      hideUnlockForm() {
-        const unlockSection = document.getElementById('unlock-section');
-        const passwordInput = document.getElementById('vault-password');
-        unlockSection.style.display = 'none';
-        passwordInput.value = '';
-      }
-
-      async unlockVault() {
-        const passwordInput = document.getElementById('vault-password');
-        const unlockBtn = document.getElementById('unlock-btn');
-        const password = passwordInput.value.trim();
-
-        if (!password) {
-          passwordInput.focus();
-          return;
-        }
-
-        try {
-          unlockBtn.disabled = true;
-          unlockBtn.textContent = '🔓 Unlocking...';
-
-          if (window.emmaAPI && window.emmaAPI.vault) {
-            const result = await window.emmaAPI.vault.unlock({ passphrase: password });
-
-            if (result && result.success) {
-              // Success - update status and close form
-              window.currentVaultStatus = { isUnlocked: true };
-              await this.loadDashboardData();
-              this.updateVaultNodeStatus(); // Update the floating vault node
-              this.hideUnlockForm();
-              this.openVaultModal(); // Refresh modal with new status
-              this.showToast('✅ Vault unlocked successfully!', 'success');
-            } else {
-              throw new Error(result?.error || 'Unlock failed');
-            }
-          } else {
-            // No API available
-            throw new Error('Vault API not available');
-          }
-        } catch (error) {
-          console.error('🏠 Dashboard: Unlock error:', error);
-          this.showToast('❌ Failed to unlock vault: ' + error.message, 'error');
-        } finally {
-          unlockBtn.disabled = false;
-          unlockBtn.textContent = '🔓 Unlock';
-        }
-      }
-
-      async lockVault() {
-        try {
-          if (window.emmaAPI && window.emmaAPI.vault) {
-            const result = await window.emmaAPI.vault.lock();
-
-            if (result && result.success) {
-              window.currentVaultStatus = { isUnlocked: false };
-              await this.loadDashboardData();
-              this.updateVaultNodeStatus(); // Update the floating vault node
-              this.openVaultModal(); // Refresh modal with new status
-              this.showToast('🔒 Vault locked successfully!', 'success');
-            } else {
-              throw new Error(result?.error || 'Lock failed');
-            }
-          } else {
-            // Demo mode
-            console.warn('🏠 Dashboard: No Emma API - demo lock');
-            window.currentVaultStatus = { isUnlocked: false };
-            await this.loadDashboardData();
-            this.updateVaultNodeStatus(); // Update the floating vault node
-            this.openVaultModal();
-            this.showToast('🎭 Demo vault locked!', 'info');
-          }
-        } catch (error) {
-          console.error('🏠 Dashboard: Lock error:', error);
-          this.showToast('❌ Failed to lock vault: ' + error.message, 'error');
-        }
-      }
-
-      // Clean dashboard - vault unlock handled by index.html
-
-      async showQRShare() {
-
-        // Check if classes are available
-        if (typeof EmmaShareExperience === 'undefined') {
-          console.error('🔗 EmmaShareExperience class not found');
-          this.showToast('Share feature unavailable. Please refresh the page.', 'error');
-          return;
-        }
-
-        if (typeof QRService === 'undefined') {
-          console.warn('🔗 QRService class not found - will use fallback');
-        }
-
-        // Calculate elegant position relative to Emma orb
-        const orbRect = this.orb.getBoundingClientRect();
-        const viewportWidth = window.innerWidth;
-        const viewportHeight = window.innerHeight;        // Position the share panel optimally
-        let left = orbRect.right + 24;
-        let top = Math.max(40, orbRect.top - 120);
-
-        // Share panel dimensions
-        const panelWidth = 650; // Wider for share content
-        const panelHeight = 720;
-
-        // Ensure it fits in viewport
-        if (left + panelWidth > viewportWidth - 40) {
-          left = orbRect.left - panelWidth - 24;
-        }
-
-        if (top + panelHeight > viewportHeight - 40) {
-          top = viewportHeight - panelHeight - 40;
-        }
-
-        const position = {
-          left: Math.max(40, left),
-          top: Math.max(40, top),
-          width: panelWidth,
-          height: panelHeight
-        };
-
-        try {
-          // Create and show Emma share experience
-          this.emmaShareExperience = new EmmaShareExperience(position, {
-            contextAware: true,
-            vaultIntegration: true
-          });
-
-          // Set global reference for share actions
-          window.shareExperience = this.emmaShareExperience;
-
-          await this.emmaShareExperience.show();
-
-        } catch (error) {
-          console.error('🔗 Failed to open Emma Share:', error);
-          this.showToast('Failed to open Share interface: ' + error.message, 'error');
-        }
-      }
-
-      async loadDashboardData() {
-        try {
-          // Use WebVaultStatus instead of old Electron API
-
-          // Don't override vault status - WebVaultStatus manages it
-          // window.currentVaultStatus is set by WebVaultStatus manager
-
-          // Keep central orb neutral - Emma branding only (text removed)
-
-          // Load stats from web vault
-          try {
-            if (window.emmaWebVault && window.webVaultStatus && window.webVaultStatus.isUnlocked()) {
-              const stats = window.emmaWebVault.getStats();
-              this.updateStats({
-                memories: stats.memoryCount || 0,
-                people: stats.peopleCount || 0,
-                today: 0 // TODO: Calculate today's memories
-              });
-            } else {
-              this.updateStats({ memories: 0, people: 0, today: 0 });
-            }
-          } catch (e) {
-            console.warn('⚠️ Web vault stats unavailable:', e.message);
-            this.updateStats({ memories: 0, people: 0, today: 0 });
-          }
-        } catch (error) {
-          console.error('🚨 Dashboard data load error:', error);
-          // Fallback to demo data - but DON'T override vault status!
-          // WebVaultStatus manager handles vault status, not this function
-          this.updateStats({ memories: 0, people: 0, today: 0 });
-        }
-      }
-
-      updateStats(newStats) {
-        Object.assign(this.stats, newStats);
-
-        // Animate number changes
-        Object.keys(newStats).forEach(key => {
-          const element = document.getElementById(`stat-${key}`);
-          if (element) {
-            const start = parseInt(element.textContent) || 0;
-            const end = this.stats[key];
-            const duration = 1000;
-            const startTime = Date.now();
-
-            const animate = () => {
-              const elapsed = Date.now() - startTime;
-              const progress = Math.min(elapsed / duration, 1);
-              const current = Math.floor(start + (end - start) * progress);
-              element.textContent = current;
-
-              if (progress < 1) {
-                requestAnimationFrame(animate);
-              }
-            };
-            animate();
-          }
-        });
-      }
-
-      showContextualPanels() {
-        // Panels are now hidden by default and shown via burger menu
-        // No longer auto-showing panels to reduce visual distraction
-
-      }
-
-      // Burger menu removed for clean interface
-
-      setupUtilityIcons() {
-        if (!this.utilityIcons) {
-          return;
-        }
-
-        // Add click handlers to utility items
-        this.utilityIcons.querySelectorAll('.utility-item').forEach(item => {
-          item.addEventListener('click', (e) => {
-            e.stopPropagation();
-            const action = item.dataset.action;
-            this.handleUtilityAction(action);
-          });
-        });
-
-      }
-
-      handleUtilityAction(action) {
-
-        switch(action) {
-          case 'settings':
-            window.location.href = 'pages/emma-settings-redesigned.html';
-            break;
-          default:
-
-        }
-      }
-
-      togglePanels() {
-        this.panelsVisible = !this.panelsVisible;
-
-        // Toggle body class for CSS animations
-        if (this.panelsVisible) {
-          document.body.classList.add('panels-visible');
-          this.burgerMenuBtn.classList.add('active');
-
-          // Also add active class to each panel for visibility
-          if (this.panels.dailyBrief) this.panels.dailyBrief.classList.add('active');
-          if (this.panels.aiInsights) this.panels.aiInsights.classList.add('active');
-          if (this.panels.quickActions) this.panels.quickActions.classList.add('active');
-        } else {
-          document.body.classList.remove('panels-visible');
-          this.burgerMenuBtn.classList.remove('active');
-
-          // Remove active class from panels
-          if (this.panels.dailyBrief) this.panels.dailyBrief.classList.remove('active');
-          if (this.panels.aiInsights) this.panels.aiInsights.classList.remove('active');
-          if (this.panels.quickActions) this.panels.quickActions.classList.remove('active');
-        }
-
-      }
-
-      startAnimations() {
-        // Subtle pulse animation for WebGL orb
-        setInterval(() => {
-          if (window.currentVaultStatus && !window.currentVaultStatus.isUnlocked) {
-            const orbContainer = this.orb.querySelector('.emma-orb-webgl');
-            if (orbContainer) {
-              orbContainer.style.animation = 'orb-pulse 2s ease-in-out';
-            }
-          }
-        }, 5000);
-      }      // Enter memory constellation mode
-      async enterMemoryConstellation() {
-
-        // CRITICAL: Clear any existing memory nodes first (prevents duplicates)
-        this.clearAllMemoryNodesFromDOM();
-
-        this.isConstellationMode = true;
-
-        // PERSISTENCE: Save constellation state for page refresh
-        localStorage.setItem('emmaConstellationActive', 'true');
-
-        // Add constellation-active class to hide all UI
-        document.body.classList.add('constellation-active');
-
-        // Shrink central orb
-        this.shrinkCentralOrb();
-
-        // 🔍 CREATE ZOOMABLE CONSTELLATION CONTAINER
-        this.createConstellationContainer();
-
-        // Load memory data for constellation
-        await this.loadMemoriesForConstellation();
-
-        // Fade out current nodes
-        await this.fadeOutMenuNodes();
-
-        // Create memory constellation (await for real memories)
-        await this.createMemoryConstellation();
-
-        // Show constellation UI with zoom controls
-        this.showConstellationUI();
-      }
-
-      // Shrink central Emma orb when memories are visible
-      shrinkCentralOrb() {
-
-        
-        // 🎭 FADE OUT orb first
-        this.orb.style.transition = 'opacity 0.4s ease, transform 0.8s cubic-bezier(0.4, 0, 0.2, 1)';
-        this.orb.style.opacity = '0';
-        
-        // After fade out, reposition to bottom center
-        setTimeout(() => {
-          // 📍 REPOSITION: Move to bottom center
-          this.orb.style.position = 'fixed';
-          this.orb.style.top = 'auto';
-          this.orb.style.bottom = '40px';
-          this.orb.style.left = '50%';
-          this.orb.style.transform = 'translateX(-50%) scale(0.6)';
-          this.orb.style.zIndex = '99999'; // CRITICAL: Above ALL overlays and constellation nodes
-          this.orb.style.pointerEvents = 'auto'; // CRITICAL: Ensure orb is clickable
-          
-          // 🎭 FADE IN at new position
-          setTimeout(() => {
-            this.orb.style.opacity = '0.9';
-
-          }, 100);
-          
-        }, 400); // Wait for fade out to complete
-
-        // Add hover effects for memory mode
-        this.addOrbHoverEffects();
-      }
-
-      // Add hover effects to orb in memory mode
-      addOrbHoverEffects() {
-        if (this.orbHoverAdded) return;
-        this.orbHoverAdded = true;
-
-        const orbContainer = this.orb.querySelector('.emma-orb-webgl');
-
-        this.orb.addEventListener('mouseenter', () => {
-          if (this.isConstellationMode) {
-            // 🎯 HOVER: Scale up while maintaining bottom center position
-            this.orb.style.transform = 'translateX(-50%) scale(0.8)';
-            this.orb.style.opacity = '1';
-          }
-        });
-
-        this.orb.addEventListener('mouseleave', () => {
-          if (this.isConstellationMode) {
-            // 🎯 HOVER OUT: Return to normal size at bottom center
-            this.orb.style.transform = 'translateX(-50%) scale(0.6)';
-            this.orb.style.opacity = '0.9';
-          }
-        });
-      }
-
-      // Restore central Emma orb to original center position
-      restoreCentralOrb() {
-
-        
-        // 🎭 FADE OUT from bottom position
-        this.orb.style.transition = 'opacity 0.3s ease';
-        this.orb.style.opacity = '0';
-        
-        setTimeout(() => {
-          // 📍 RESTORE: Move back to center
-          this.orb.style.position = 'fixed';
-          this.orb.style.top = '50%';
-          this.orb.style.bottom = 'auto';
-          this.orb.style.left = '50%';
-          this.orb.style.transform = 'translate(-50%, -50%) scale(1)';
-          this.orb.style.zIndex = '10';
-          
-          // Reset transitions for normal behavior
-          this.orb.style.transition = 'transform 0.8s cubic-bezier(0.4, 0, 0.2, 1)';
-          
-          // 🎭 FADE IN at center
-          setTimeout(() => {
-            this.orb.style.opacity = '1';
-
-          }, 100);
-          
-        }, 300); // Wait for fade out
-      }
-
-      // Load memories for constellation
-      async loadMemoriesForConstellation() {
-        try {
-          // Get memories from API
-          let memories = await this.getMemories();
-
-          if (memories.length > 0) {
-
-            console.log('💝 CONSTELLATION DEBUG: Memory titles:', memories.map(m => m.title));
-          }
-
-          // Add debugging info about available APIs
-
-          this.constellationMemories = this.organizeMemoriesByTheme(memories);
-
-          // Count total memories
-          const totalMemories = Object.values(this.constellationMemories).reduce((sum, theme) => sum + theme.length, 0);
-
-          // If no memories, suggest user create some
-          if (totalMemories === 0) {
-
-          }
-
-        } catch (error) {
-
-          this.constellationMemories = {family: [], travel: [], recent: [], special: []};
-        }
-      }
-
-      // Get memories from vault (same API as gallery)
-      async getMemories() {
-        try {
-          let allMemories = [];
-
-          // 1. FIRST: Get vault memories (if available)
-          if (window.emmaWebVault && window.emmaWebVault.isOpen && window.emmaWebVault.vaultData) {
-
-            const vaultMemories = window.emmaWebVault.vaultData.content?.memories || {};
-            const vaultMedia = window.emmaWebVault.vaultData.content?.media || {};
-
-            // Convert vault memories to array format with LIGHTWEIGHT LOADING for constellation
-            const memories = Object.values(vaultMemories).map(memory => {
-              // 🚀 PERFORMANCE FIX: Only create lightweight attachment previews for constellation
-              // Full media will be loaded on-demand when memory is clicked
-              const attachmentPreviews = (memory.attachments || []).map(attachment => {
-                const mediaItem = vaultMedia[attachment.id];
-                return {
-                  id: attachment.id,
-                  type: attachment.type,
-                  name: attachment.name,
-                  size: attachment.size,
-                  // 💡 LAZY LOADING: Store media ID for on-demand loading, don't load data URL yet
-                  mediaId: attachment.id,
-                  hasMedia: !!(mediaItem && mediaItem.data),
-                  isLazyLoaded: true, // Flag to indicate this needs full loading on click
-                  // Only create preview thumbnail for first image attachment
-                  previewUrl: null // Will be set below for first image only
-                };
-              });
-
-              // 🎯 OPTIMIZATION: Only load preview for FIRST image attachment (for constellation thumbnail)
-              if (attachmentPreviews.length > 0) {
-                const firstImageAttachment = attachmentPreviews.find(att => 
-                  att.hasMedia && (att.type?.startsWith('image/') || !att.type?.startsWith('video/'))
-                );
-                
-                if (firstImageAttachment) {
-                  const mediaItem = vaultMedia[firstImageAttachment.id];
-                  if (mediaItem && mediaItem.data) {
-                    // Only load the first image for constellation thumbnail
-                    firstImageAttachment.previewUrl = mediaItem.data.startsWith('data:')
-                      ? mediaItem.data
-                      : `data:${mediaItem.type};base64,${mediaItem.data}`;
-                  }
-                }
-              }
-
-              return {
-                ...memory,
-                // FIXED: Transform like gallery pages do - extract title from content/metadata
-                title: memory.metadata?.title || memory.title || memory.subject || memory.summary || memory.content?.substring(0, 50) + '...' || `Memory`,
-                attachments: attachmentPreviews, // Lightweight previews only
-                attachmentCount: attachmentPreviews.length,
-                hasMedia: attachmentPreviews.some(att => att.hasMedia),
-                isVaultMemory: true
-              };
-            });
-
-            // Add thumbnail from first attachment for constellation display
-            const memoriesWithThumbnails = memories.map(memory => {
-              const attachments = memory.attachments || [];
-              let thumbnail = memory.thumbnail;
-
-              // 🎯 PERFORMANCE: Use previewUrl from first image attachment for thumbnail
-              if (!thumbnail && attachments.length > 0) {
-                const firstImageWithPreview = attachments.find(att => att.previewUrl);
-                if (firstImageWithPreview) {
-                  thumbnail = firstImageWithPreview.previewUrl;
-                }
-              }
-
-              return {
-                ...memory,
-                thumbnail
-              };
-            });
-
-            allMemories = [...memoriesWithThumbnails];
-            console.log('💝 CONSTELLATION: Loaded', allMemories.length, 'vault memories');
-            console.log('💝 CONSTELLATION DEBUG: First memory structure:', allMemories[0]);
-            console.log('💝 CONSTELLATION DEBUG: First memory keys:', Object.keys(allMemories[0] || {}));
-          }
-
-          // Note: All memories should be stored directly in vault - no fallback needed
-
-          return allMemories;
-
-        } catch (error) {
-          console.error('💝 CONSTELLATION: Error loading memories from vault:', error);
-          return [];
-        }
-      }
-
-      // Helper to detect category from memory content
-      detectCategoryFromContent(memory) {
-        const content = ((memory.title || '') + ' ' + (memory.content || '')).toLowerCase();
-        if (content.includes('family') || content.includes('mom') || content.includes('dad')) return 'family';
-        if (content.includes('travel') || content.includes('trip') || content.includes('vacation')) return 'travel';
-        if (memory.timestamp && new Date() - new Date(memory.timestamp) < 30 * 24 * 60 * 60 * 1000) return 'recent';
-        return 'special';
-      }
-
-      // Generate organic neural network positions (NOT circular)
-      generateNeuralNetworkPositions(nodeCount, centerX, centerY, width, height, minDistance) {
-        const positions = [];
-        const maxAttempts = 100;
-
-        // First position: Create Memory node in top-center area
-        positions.push({
-          x: centerX + (Math.random() - 0.5) * 100,
-          y: centerY - height * 0.25 + (Math.random() - 0.5) * 80
-        });
-
-        // Generate remaining positions with organic scatter
-        for (let i = 1; i < nodeCount; i++) {
-          let placed = false;
-          let attempts = 0;
-
-          while (!placed && attempts < maxAttempts) {
-            // Use clustered random distribution (not uniform)
-            const clusterX = centerX + (Math.random() - 0.5) * width;
-            const clusterY = centerY + (Math.random() - 0.5) * height;
-
-            // Add some organic bias toward clusters
-            const biasStrength = Math.random() * 0.3;
-            const biasAngle = Math.random() * Math.PI * 2;
-            const x = clusterX + Math.cos(biasAngle) * biasStrength * 150;
-            const y = clusterY + Math.sin(biasAngle) * biasStrength * 150;
-
-            // Check minimum distance from all existing nodes AND center orb
-            let validPosition = true;
-
-            // Check distance from center Emma orb (exclusion zone)
-            const distFromCenter = Math.sqrt((x - centerX) ** 2 + (y - centerY) ** 2);
-            if (distFromCenter < 150) { // 150px exclusion zone around Emma orb
-              validPosition = false;
-            }
-
-            // Check distance from other nodes
-            if (validPosition) {
-              for (const pos of positions) {
-                const dist = Math.sqrt((x - pos.x) ** 2 + (y - pos.y) ** 2);
-                if (dist < minDistance) {
-                  validPosition = false;
-                  break;
-                }
-              }
-            }
-
-            // Keep nodes within bounds
-            if (validPosition &&
-                x > centerX - width/2 + 50 && x < centerX + width/2 - 50 &&
-                y > centerY - height/2 + 50 && y < centerY + height/2 - 50) {
-              positions.push({ x, y });
-              placed = true;
-            }
-
-            attempts++;
-          }
-
-          // Fallback if can't place after max attempts
-          if (!placed) {
-            const angle = (i / nodeCount) * Math.PI * 2;
-            const fallbackRadius = 200 + Math.random() * 100;
-            positions.push({
-              x: centerX + Math.cos(angle) * fallbackRadius,
-              y: centerY + Math.sin(angle) * fallbackRadius
-            });
-          }
-        }
-
-        return positions;
-      }      // Generate memory thumbnail based on theme
-      generateMemoryThumbnail(theme) {
-        const themeEmojis = {
-          family: ['👨‍👩‍👧‍👦', '🏠', '❤️', '🍽️', '🎂'],
-          travel: ['✈️', '🗺️', '📸', '🏖️', '🏔️'],
-          recent: ['📱', '☕', '🌅', '🎵', '📚'],
-          special: ['🎉', '💝', '🌟', '🎈', '🎊']
-        };
-        const emojis = themeEmojis[theme] || ['💫'];
-        return emojis[Math.floor(Math.random() * emojis.length)];
-      }
-
-      // Organize memories by theme for constellations
-      organizeMemoriesByTheme(memories) {
-        const organized = {
-          family: [],
-          travel: [],
-          recent: [],
-          special: []
-        };
-
-        memories.forEach(memory => {
-          const theme = memory.theme || this.detectMemoryTheme(memory);
-          if (organized[theme]) {
-            organized[theme].push(memory);
-          } else {
-            organized.special.push(memory);
-          }
-        });
-
-        return organized;
-      }
-
-      // Detect memory theme from content
-      detectMemoryTheme(memory) {
-        // Use category first, then fallback to content analysis
-        if (memory.category) {
-          return memory.category;
-        }
-
-        const content = (memory.title + ' ' + (memory.content || memory.description || '')).toLowerCase();
-        if (content.includes('family') || content.includes('mom') || content.includes('dad')) return 'family';
-        if (content.includes('travel') || content.includes('trip') || content.includes('vacation')) return 'travel';
-        if (memory.date && new Date() - new Date(memory.date) < 30 * 24 * 60 * 60 * 1000) return 'recent';
-        return 'special';
-      }
-
-      // Fade out menu nodes
-      async fadeOutMenuNodes() {
-        return new Promise(resolve => {
-          this.radialMenu.querySelectorAll('.radial-item').forEach((item, i) => {
-            setTimeout(() => {
-              item.style.transition = 'all 0.5s ease';
-              item.style.opacity = '0';
-              item.style.transform = 'scale(0)';
-            }, i * 50);
-          });
-
-          setTimeout(resolve, 500);
-        });
-      }
-
-      // Create memory constellation using EXACT working neural network system
-      async createMemoryConstellation() {
-
-        // CRITICAL: Remove any existing memory nodes from DOM first
-        this.clearAllMemoryNodesFromDOM();
-
-        // Clear existing nodes array
-        this.nodes = [];
-
-        // Don't reload memories - use already loaded ones from enterMemoryConstellation()
-
-        // Get memories for constellation
-        const allMemories = [];
-        Object.keys(this.constellationMemories).forEach(theme => {
-          this.constellationMemories[theme].forEach(memory => {
-            allMemories.push({ ...memory, theme });
-          });
-        });
-
-        // Load people from vault for constellation
-        const allPeople = await this.loadPeopleForConstellation();
-        this.constellationPeople = allPeople; // Store for filtering
-
-        if (allMemories.length === 0 && allPeople.length === 0) {
-          console.warn('💝 No memories or people found in vault - constellation will show only the Create Memory node');
-        }
-
-        // Create memory and people nodes using EXACT same pattern as main menu
-        this.initMemoryNeuralNetwork(allMemories, allPeople);
-
-        // Set up for constellation mode without triggering menu
-        this.isMenuOpen = false; // CRITICAL: Constellation mode starts with menu closed
-        this.radialMenu.classList.remove('active'); // Ensure menu is hidden
-        document.body.classList.remove('menu-active');
-
-        // Start the neural animation (EXACT same as main menu)
-        this.animateNeuralNetwork();
-
-      }
-
-      // Load people from vault for constellation
-      async loadPeopleForConstellation() {
-        try {
-
-          if (window.emmaAPI && window.emmaAPI.people && window.emmaAPI.people.list) {
-            const result = await window.emmaAPI.people.list();
-
-            if (result && result.success && Array.isArray(result.items)) {
-
-              return result.items;
-            }
-          }
-
-          return [];
-
-        } catch (error) {
-          console.error('👥 CONSTELLATION: Error loading people:', error);
-          return [];
-        }
-      }
-
-      // Initialize memory neural network using EXACT same pattern as working main menu
-      initMemoryNeuralNetwork(memories, people = []) {
-
-        const centerX = window.innerWidth / 2;
-        const centerY = window.innerHeight / 2;
-        // Neural network layout parameters
-        const networkWidth = Math.min(window.innerWidth * 0.7, 800);
-        const networkHeight = Math.min(window.innerHeight * 0.7, 600);
-        const minDistance = 120; // Minimum distance between nodes
-
-        // Take up to 12 memories and up to 8 people for balanced constellation
-        const selectedMemories = memories.slice(0, 12);
-        const selectedPeople = people.slice(0, 8);
-        const totalNodes = selectedMemories.length + selectedPeople.length + 1; // +1 for create node
-
-        // Generate organic neural network positions
-        const positions = this.generateNeuralNetworkPositions(totalNodes, centerX, centerY, networkWidth, networkHeight, minDistance);
-
-        // Always add "Create New Memory" node at the first position (top-center area)
-        const createPos = positions[0];
-        const createMemoryElement = this.createCreateMemoryNodeElement(createPos.x, createPos.y);
-        this.nodes.push({
-          element: createMemoryElement,
-          x: createPos.x,
-          y: createPos.y,
-          vx: 0,
-          vy: 0,
-          baseX: createPos.x,
-          baseY: createPos.y,
-          connections: [],
-          isCreateNode: true
-        });
-
-        // Create memory nodes in organic neural pattern
-        selectedMemories.forEach((memory, i) => {
-          const pos = positions[i + 1]; // Skip position 0 (create node)
-
-          // Create memory node element
-          const memoryElement = this.createMemoryNodeElement(memory, pos.x, pos.y);
-
-          this.nodes.push({
-            element: memoryElement,
-            x: pos.x,
-            y: pos.y,
-            vx: 0,
-            vy: 0,
-            baseX: pos.x,
-            baseY: pos.y,
-            connections: [],
-            memory: memory,
-            type: 'memory'
-          });
-        });
-
-        // Create people nodes in remaining positions
-        selectedPeople.forEach((person, i) => {
-          const posIndex = selectedMemories.length + i + 1; // Skip create node and memory nodes
-          const pos = positions[posIndex];
-
-          if (pos) { // Make sure we have a position
-            // Create person node element
-            const personElement = this.createPersonNodeElement(person, pos.x, pos.y);
-
-            this.nodes.push({
-              element: personElement,
-              x: pos.x,
-              y: pos.y,
-              vx: 0,
-              vy: 0,
-              baseX: pos.x,
-              baseY: pos.y,
-              connections: [],
-              person: person,
-              type: 'person'
-            });
-          }
-        });
-
-        // Create intelligent connections between memories and people
-        this.createMemoryPeopleConnections(selectedMemories, selectedPeople);
-
-        // Create organic neural network connections (NOT spoked wheel)
-        this.nodes.forEach((node, i) => {
-          // Connect to 2-4 nearby nodes within a certain distance (organic clustering)
-          this.nodes.forEach((otherNode, j) => {
-            if (i !== j) {
-              const dist = Math.sqrt(
-                Math.pow(node.x - otherNode.x, 2) +
-                Math.pow(node.y - otherNode.y, 2)
-              );
-
-              // Connect to nodes within a reasonable distance (creates natural clusters)
-              if (dist < 250 && node.connections.length < 4) {
-                node.connections.push(otherNode);
-              }
-            }
-          });
-
-          // Ensure each node has at least 2 connections (prevent isolated nodes)
-          if (node.connections.length < 2) {
-            // Find the 2 closest nodes
-            const distances = this.nodes
-              .map((otherNode, j) => ({ node: otherNode, index: j, dist: j === i ? Infinity : Math.sqrt(Math.pow(node.x - otherNode.x, 2) + Math.pow(node.y - otherNode.y, 2)) }))
-              .sort((a, b) => a.dist - b.dist)
-              .slice(0, 2);
-
-            distances.forEach(({ node: closestNode }) => {
-              if (!node.connections.includes(closestNode)) {
-                node.connections.push(closestNode);
-              }
-            });
-          }
-        });
-
-        // Add central orb as a special node (but only some memory nodes connect to it)
-        this.centralNode = {
-          x: centerX,
-          y: centerY,
-          element: this.orb
-        };
-
-        // Only 3-4 random memory nodes connect to center (not all - avoids spoked wheel)
-        const centralConnections = Math.min(4, Math.floor(this.nodes.length / 3));
-        const shuffledNodes = [...this.nodes].sort(() => Math.random() - 0.5);
-        shuffledNodes.slice(0, centralConnections).forEach(node => {
-          node.connections.push(this.centralNode);
-        });
-
-      }
-
-      // Create memory node element that opens memory capsule dialog
-      createMemoryNodeElement(memory, x, y) {
-        const memoryElement = document.createElement('div');
-        memoryElement.className = 'memory-node';
-
-        // Add theme data attribute for styling
-        memoryElement.setAttribute('data-theme', memory.theme);
-
-        // CLEAN CIRCULAR NODE - No text labels, pure image capsule
-        memoryElement.style.cssText = `
-          position: fixed;
-          left: ${x}px;
-          top: ${y}px;
-          width: 80px;
-          height: 80px;
-          border-radius: 50%;
-          border: 3px solid rgba(139, 92, 246, 0.6);
-          cursor: pointer;
-          transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-          opacity: 0;
-          transform: scale(0);
-          box-shadow: 0 8px 32px rgba(139, 92, 246, 0.4);
-          z-index: 1500; /* CRITICAL FIX: Higher z-index to appear above all connections */
-          overflow: hidden;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          pointer-events: auto; /* CRITICAL: Ensure nodes are clickable even with container pointer-events: none */
-        `;
-
-        // APPLY BACKGROUND AFTER BASE STYLING: Memory capsule as single node with image background
-        if (memory.thumbnail) {
-          // Use image as background of the entire node - NO separate elements
-          memoryElement.style.backgroundImage = `url('${memory.thumbnail}')`;
-          memoryElement.style.backgroundSize = 'cover';
-          memoryElement.style.backgroundPosition = 'center';
-
-        } else {
-          // Fallback to gradient with emoji
-          memoryElement.style.background = 'linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%)';
-          const emojiDiv = document.createElement('div');
-          emojiDiv.style.cssText = 'font-size: 24px; color: white;';
-          emojiDiv.textContent = '💝';
-          memoryElement.appendChild(emojiDiv);
-
-        }
-
-        // Add click handler to open memory capsule dialog
-        memoryElement.addEventListener('click', (e) => {
-          e.stopPropagation();
-          this.openMemoryCapsuleDialog(memory);
-        });
-
-        // Add hover effects
-        memoryElement.addEventListener('mouseenter', () => {
-          memoryElement.style.transform = 'scale(1.1)';
-          memoryElement.style.boxShadow = '0 0 40px rgba(139, 92, 246, 0.6), 0 0 80px rgba(139, 92, 246, 0.4)';
-        });
-
-        memoryElement.addEventListener('mouseleave', () => {
-          memoryElement.style.transform = 'scale(1)';
-          memoryElement.style.boxShadow = '0 8px 32px rgba(139, 92, 246, 0.4)';
-        });
-
-        // 🔍 ZOOM FIX: Add to constellation container instead of body
-        const targetContainer = this.constellationContainer || document.body;
-        targetContainer.appendChild(memoryElement);
-
-        // Animate in with random delay for organic feel
-        const delay = Math.random() * 500 + 100;
-        setTimeout(() => {
-          memoryElement.style.transform = 'scale(1)';
-          memoryElement.style.opacity = '1';
-        }, delay);
-
-        return memoryElement;
-      }
-
-      // Create the "Create New Memory" node element with elegant SVG +
-      createCreateMemoryNodeElement(x, y) {
-        const createElement = document.createElement('div');
-        createElement.className = 'memory-node create-memory-node';
-        
-        // Create elegant SVG + icon
-        const svgPlus = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-        svgPlus.setAttribute('width', '24');
-        svgPlus.setAttribute('height', '24');
-        svgPlus.setAttribute('viewBox', '0 0 24 24');
-        svgPlus.style.cssText = `
-          filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.8));
-          transition: all 0.3s ease;
-        `;
-        
-        // Create + lines with elegant styling
-        const horizontalLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
-        horizontalLine.setAttribute('x1', '6');
-        horizontalLine.setAttribute('y1', '12');
-        horizontalLine.setAttribute('x2', '18');
-        horizontalLine.setAttribute('y2', '12');
-        horizontalLine.setAttribute('stroke', 'rgba(16, 185, 129, 1)');
-        horizontalLine.setAttribute('stroke-width', '2');
-        horizontalLine.setAttribute('stroke-linecap', 'round');
-        
-        const verticalLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
-        verticalLine.setAttribute('x1', '12');
-        verticalLine.setAttribute('y1', '6');
-        verticalLine.setAttribute('x2', '12');
-        verticalLine.setAttribute('y2', '18');
-        verticalLine.setAttribute('stroke', 'rgba(16, 185, 129, 1)');
-        verticalLine.setAttribute('stroke-width', '2');
-        verticalLine.setAttribute('stroke-linecap', 'round');
-        
-        svgPlus.appendChild(horizontalLine);
-        svgPlus.appendChild(verticalLine);
-        createElement.appendChild(svgPlus);
-
-        // Smaller, more elegant styling with compelling glow
-        createElement.style.cssText = `
-          position: fixed;
-          left: ${x - 30}px;
-          top: ${y - 30}px;
-          width: 60px;
-          height: 60px;
-          background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(34, 197, 94, 0.15));
-          backdrop-filter: blur(20px);
-          border: 2px solid rgba(16, 185, 129, 0.5);
-          border-radius: 50%;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          cursor: pointer;
-          transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-          opacity: 0;
-          transform: scale(0);
-          box-shadow: 
-            0 0 20px rgba(16, 185, 129, 0.4),
-            0 0 40px rgba(16, 185, 129, 0.2),
-            inset 0 0 20px rgba(16, 185, 129, 0.1);
-          animation: addNodeGlow 3s ease-in-out infinite;
-          z-index: 1500; /* CRITICAL FIX: Higher z-index to appear above all connections */
-          pointer-events: auto; /* CRITICAL: Ensure create node is clickable even with container pointer-events: none */
-        `;
-
-        // Add hover effect with enhanced SVG glow
-        createElement.addEventListener('mouseenter', () => {
-          createElement.style.transform = 'scale(1.15)';
-          createElement.style.boxShadow = `
-            0 0 30px rgba(16, 185, 129, 0.6),
-            0 0 60px rgba(16, 185, 129, 0.4),
-            inset 0 0 30px rgba(16, 185, 129, 0.2)
-          `;
-          svgPlus.style.filter = 'drop-shadow(0 0 12px rgba(16, 185, 129, 1))';
-        });
-
-        createElement.addEventListener('mouseleave', () => {
-          createElement.style.transform = 'scale(1)';
-          createElement.style.boxShadow = `
-            0 0 20px rgba(16, 185, 129, 0.4),
-            0 0 40px rgba(16, 185, 129, 0.2),
-            inset 0 0 20px rgba(16, 185, 129, 0.1)
-          `;
-          svgPlus.style.filter = 'drop-shadow(0 0 8px rgba(16, 185, 129, 0.8))';
-        });
-
-        // Add click handler to open Emma chat for memory creation
-        createElement.addEventListener('click', (e) => {
-          e.stopPropagation();
-
-          // Open Emma chat experience for intelligent memory creation
-          this.startEmmaChatExperience();
-        });
-
-        // 🔍 ZOOM FIX: Add to constellation container instead of body
-        const targetContainer = this.constellationContainer || document.body;
-        targetContainer.appendChild(createElement);
-
-        // Animate in
-        setTimeout(() => {
-          createElement.style.transform = 'scale(1)';
-          createElement.style.opacity = '1';
-        }, 100);
-
-        return createElement;
-      }
-
-      // Open Emma memory creation wizard (proper capture wizard)
-      openEmmaMemoryWizard() {
-
-        // CRITICAL FIX: Debug and ensure AssistantExperience is available
-
-        console.log('🧠 DEBUG: Available window objects:', Object.keys(window).filter(k => k.includes('Assistant') || k.includes('Experience')));
-
-        try {
-          // Wait a moment for scripts to load, then check again
-          setTimeout(() => {
-
-            if (window.AssistantExperience) {
-
-              // Create and show the full assistant experience popup
-              const assistantInstance = new window.AssistantExperience(
-                { x: window.innerWidth / 2, y: window.innerHeight / 2 },
-                { showCloseButton: true }
-              );
-              // Show the full popup - this will open with the voice wizard tab active
-              assistantInstance.show();
-              // Store reference for global access
-              window.assistantInstance = assistantInstance;
-            } else {
-              console.error('🧠 AssistantExperience STILL not available after delay!');
-              console.log('🧠 Available classes:', Object.keys(window).filter(k => k.endsWith('Experience')));
-              this.showToast('❌ Emma Assistant not loaded', 'error');
-            }
-          }, 100);
-
-        } catch (error) {
-          console.error('Failed to open Emma memory wizard:', error);
-          this.showToast('❌ Failed to open memory wizard', 'error');
-        }
-      }
-
-      // Fallback voice memory wizard
-      openVoiceMemoryWizard() {
-        console.log('🧠 Opening voice memory wizard (fallback)');
-
-        // Create a voice memory wizard modal similar to AssistantExperience
-        const modalHTML = `
-          <div class="voice-wizard-modal" style="
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: rgba(0, 0, 0, 0.6);
-            backdrop-filter: blur(25px) saturate(180%);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            z-index: 10000;
-          ">
-            <div class="voice-wizard-content" style="
-              /* 🎨 EMMA GLASSMORPHISM: Match chat interface aesthetic */
-              background: rgba(26, 16, 51, 0.92);
-              backdrop-filter: blur(25px) saturate(150%);
-              border-radius: 20px;
-              padding: 40px;
-              width: 90%;
-              max-width: 600px;
-              border: 1px solid rgba(255, 255, 255, 0.12);
-              box-shadow: 
-                0 25px 80px rgba(0, 0, 0, 0.4),
-                0 0 0 1px rgba(255, 255, 255, 0.08),
-                inset 0 1px 0 rgba(255, 255, 255, 0.12);
-              color: white;
-              text-align: center;
-            ">
-              <div class="emma-section">
-                <div style="color: rgba(255, 255, 255, 0.8); font-size: 14px; margin-bottom: 8px;">EMMA ASKS</div>
-                <h1 style="margin: 0 0 24px 0; font-size: 28px; font-weight: 700;">
-                  What's your favorite memory with Mom? Take your time, I'm listening.
-                </h1>
-                <div class="suggestions" style="margin-bottom: 32px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;">
-                  <button class="suggestion-chip" style="
-                    padding: 8px 16px;
-                    background: rgba(255, 255, 255, 0.2);
-                    border: 1px solid rgba(255, 255, 255, 0.3);
-                    border-radius: 20px;
-                    color: white;
-                    font-size: 14px;
-                    cursor: pointer;
-                  ">Holiday traditions</button>
-                  <button class="suggestion-chip" style="
-                    padding: 8px 16px;
-                    background: rgba(255, 255, 255, 0.2);
-                    border: 1px solid rgba(255, 255, 255, 0.3);
-                    border-radius: 20px;
-                    color: white;
-                    font-size: 14px;
-                    cursor: pointer;
-                  ">Her wisdom</button>
-                  <button class="suggestion-chip" style="
-                    padding: 8px 16px;
-                    background: rgba(255, 255, 255, 0.2);
-                    border: 1px solid rgba(255, 255, 255, 0.3);
-                    border-radius: 20px;
-                    color: white;
-                    font-size: 14px;
-                    cursor: pointer;
-                  ">Family meals</button>
-                </div>
-              </div>
-
-              <div class="voice-capture" style="margin-bottom: 32px;">
-                <div class="voice-button-container" style="margin-bottom: 16px;">
-                  <button class="voice-button" style="
-                    width: 80px;
-                    height: 80px;
-                    border-radius: 50%;
-                    background: rgba(255, 255, 255, 0.2);
-                    border: 2px solid rgba(255, 255, 255, 0.3);
-                    color: white;
-                    cursor: pointer;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    margin: 0 auto;
-                  ">
-                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                      <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/>
-                      <path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
-                      <line x1="12" x2="12" y1="19" y2="22"/>
-                      <line x1="8" x2="16" y1="22" y2="22"/>
-                    </svg>
-                  </button>
-                </div>
-                <div style="color: rgba(255, 255, 255, 0.8); font-size: 14px;">Tap to start recording</div>
-              </div>
-
-              <div class="transcription" style="margin-bottom: 32px;">
-                <div style="color: rgba(255, 255, 255, 0.8); font-size: 14px; margin-bottom: 8px;">YOUR STORY</div>
-                <div style="
-                  background: rgba(255, 255, 255, 0.1);
-                  border-radius: 12px;
-                  padding: 20px;
-                  min-height: 80px;
-                  font-style: italic;
-                  color: rgba(255, 255, 255, 0.6);
-                ">Your words will appear here as you speak...</div>
-              </div>
-
-              <div style="margin-bottom: 24px;">
-                <div style="color: rgba(255, 255, 255, 0.8); font-size: 14px; margin-bottom: 8px;">1 of 5 questions</div>
-                <div style="
-                  width: 100%;
-                  height: 4px;
-                  background: rgba(255, 255, 255, 0.2);
-                  border-radius: 2px;
-                  overflow: hidden;
-                ">
-                  <div style="
-                    width: 20%;
-                    height: 100%;
-                    background: linear-gradient(90deg, #ffffff, rgba(255, 255, 255, 0.8));
-                    border-radius: 2px;
-                  "></div>
-                </div>
-              </div>
-
-              <div style="display: flex; gap: 12px; justify-content: center;">
-                <button class="skip-btn" style="
-                  padding: 14px 28px;
-                  border: 2px solid rgba(255, 255, 255, 0.3);
-                  background: rgba(255, 255, 255, 0.1);
-                  color: white;
-                  border-radius: 10px;
-                  cursor: pointer;
-                  font-size: 14px;
-                  font-weight: 500;
-                ">Skip</button>
-                <button class="continue-btn" style="
-                  padding: 14px 28px;
-                  border: none;
-                  background: rgba(255, 255, 255, 0.9);
-                  color: #6b46c1;
-                  border-radius: 10px;
-                  cursor: pointer;
-                  font-size: 14px;
-                  font-weight: 600;
-                ">Continue →</button>
-              </div>
-            </div>
-          </div>
-        `;
-
-        // Create and show modal - SECURITY FIX: Use safe DOM creation
-        const modal = document.createElement('div');
-        modal.className = 'modal-overlay';
-        modal.id = 'vault-migration-modal';
-        modal.style.cssText = 'display: flex; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(25px) saturate(180%); z-index: 10000; align-items: center; justify-content: center;';
-
-        const modalContent = document.createElement('div');
-        modalContent.className = 'modal-content';
-        modalContent.style.cssText = 'background: rgba(26, 16, 51, 0.92); backdrop-filter: blur(25px) saturate(150%); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.12); padding: 40px; border-radius: 20px; max-width: 500px; text-align: center;';
-
-        const title = document.createElement('h2');
-        title.textContent = '🔄 Vault Migration Available';
-        title.style.cssText = 'color: white; margin-bottom: 20px; font-size: 24px;';
-
-        const description = document.createElement('p');
-        description.textContent = 'A new vault storage system is available with enhanced security and performance. Would you like to migrate your existing vault?';
-        description.style.cssText = 'color: rgba(255, 255, 255, 0.8); margin-bottom: 30px; line-height: 1.6;';
-
-        const buttonContainer = document.createElement('div');
-        buttonContainer.style.cssText = 'display: flex; gap: 15px; justify-content: center;';
-
-        const skipBtn = document.createElement('button');
-        skipBtn.className = 'skip-btn';
-        skipBtn.textContent = 'Skip for Now';
-        skipBtn.style.cssText = 'padding: 12px 24px; background: rgba(255, 255, 255, 0.1); color: white; border: none; border-radius: 8px; cursor: pointer;';
-
-        const continueBtn = document.createElement('button');
-        continueBtn.className = 'continue-btn';
-        continueBtn.textContent = 'Migrate Vault';
-        continueBtn.style.cssText = 'padding: 12px 24px; background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); color: white; border: none; border-radius: 8px; cursor: pointer;';
-
-        buttonContainer.appendChild(skipBtn);
-        buttonContainer.appendChild(continueBtn);
-        modalContent.appendChild(title);
-        modalContent.appendChild(description);
-        modalContent.appendChild(buttonContainer);
-        modal.appendChild(modalContent);
-        document.body.appendChild(modal);
-
-        // Add event listeners
-        const skipBtnQuery = modal.querySelector('.skip-btn');
-        const continueBtnQuery = modal.querySelector('.continue-btn');
-
-        skipBtnQuery.addEventListener('click', () => modal.remove());
-        continueBtnQuery.addEventListener('click', () => {
-          // For now, just show a message and close
-          this.showToast('🎤 Voice wizard coming soon!', 'info');
-          modal.remove();
-        });
-
-        // Close on outside click
-        modal.addEventListener('click', (e) => {
-          if (e.target === modal) {
-            modal.remove();
-          }
-        });
-      }
-
-      // Open memory capsule dialog (reuses existing memory dialog system)
-      openMemoryCapsuleDialog(memory) {
-
-        this.openMemoryDialog(memory);
-      }
-
-      // Create neural branches from central Emma neuron
-      createNeuralBranches(memories) {
-
-        const centerX = window.innerWidth / 2;
-        const centerY = window.innerHeight / 2;
-
-        // First layer - primary neurons directly connected to Emma
-        const primaryCount = Math.min(8, memories.length); // Max 8 primary branches
-        const primaryAngleStep = (Math.PI * 2) / primaryCount;
-        const primaryRadius = 200;
-
-        // Create primary neurons
-        const primaryNeurons = [];
-        for (let i = 0; i < primaryCount; i++) {
-          const angle = i * primaryAngleStep - Math.PI / 2;
-          const x = centerX + Math.cos(angle) * primaryRadius;
-          const y = centerY + Math.sin(angle) * primaryRadius;
-
-          if (memories[i]) {
-            const neuron = this.createMemoryNode(memories[i], x, y, memories[i].theme);
-            neuron.isPrimary = true;
-            neuron.connections.push(this.centralNeuron);
-            this.centralNeuron.connections.push(neuron);
-            primaryNeurons.push(neuron);
-            this.nodes.push(neuron);
-          }
-        }
-
-        // Create secondary and tertiary neurons branching from primaries
-        let memoryIndex = primaryCount;
-        primaryNeurons.forEach((primaryNeuron, primaryIndex) => {
-          // Calculate how many secondary neurons this primary should have
-          const remainingMemories = memories.length - memoryIndex;
-          const remainingPrimaries = primaryCount - primaryIndex;
-          const secondaryCount = Math.ceil(remainingMemories / remainingPrimaries);
-
-          // Create secondary neurons
-          for (let j = 0; j < secondaryCount && memoryIndex < memories.length; j++) {
-            const memory = memories[memoryIndex++];
-
-            // Position secondary neurons in an arc around the primary
-            const secondaryAngle = primaryIndex * primaryAngleStep +
-              (j - secondaryCount/2) * (Math.PI / 6) / secondaryCount;
-            const secondaryRadius = 120 + Math.random() * 60;
-
-            const x = primaryNeuron.x + Math.cos(secondaryAngle) * secondaryRadius;
-            const y = primaryNeuron.y + Math.sin(secondaryAngle) * secondaryRadius;
-
-            // Ensure within bounds
-            const padding = 100;
-            const finalX = Math.max(padding, Math.min(window.innerWidth - padding, x));
-            const finalY = Math.max(padding, Math.min(window.innerHeight - padding, y));
-
-            const secondaryNeuron = this.createMemoryNode(memory, finalX, finalY, memory.theme);
-            secondaryNeuron.isSecondary = true;
-            secondaryNeuron.connections.push(primaryNeuron);
-            primaryNeuron.connections.push(secondaryNeuron);
-            this.nodes.push(secondaryNeuron);
-          }
-        });
-
-      }
-
-      // Create individual memory node
-      createMemoryNode(memory, x, y, theme) {
-        console.log(`🌟 Creating memory node element for "${memory.title}" at (${x}, ${y})`);
-
-        const memoryElement = document.createElement('div');
-        memoryElement.className = 'memory-node';
-
-        // SECURITY FIX: Use safe DOM creation instead of innerHTML
-        const thumbnail = document.createElement('div');
-        thumbnail.className = 'memory-thumbnail';
-        thumbnail.textContent = memory.thumbnail; // Safe text content
-
-        const label = document.createElement('div');
-        label.className = 'memory-label';
-        label.textContent = memory.title; // Safe text content
-
-        memoryElement.appendChild(thumbnail);
-        memoryElement.appendChild(label);
-
-        // Add theme data attribute for styling
-        memoryElement.setAttribute('data-theme', theme);
-
-        // Style the memory node
-        memoryElement.style.cssText = `
-          position: fixed;
-          left: ${x}px;
-          top: ${y}px;
-          width: 70px;
-          height: 70px;
-          border-radius: 50%;
-          background: radial-gradient(circle, rgba(255, 255, 255, 0.1), rgba(134, 88, 255, 0.2));
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          justify-content: center;
-          cursor: pointer;
-          transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-          transform: scale(0);
-          opacity: 0;
-          z-index: 1000;
-          color: white;
-        `;
-
-        // Add click handler for elegant memory dialog
-        memoryElement.addEventListener('click', (e) => {
-          e.stopPropagation();
-          this.openMemoryDialog(memory);
-        });
-
-        // Add hover effects with theme-based glow
-        memoryElement.addEventListener('mouseenter', () => {
-          const themeColors = {
-            family: 'rgba(255, 105, 135, 0.8)',
-            travel: 'rgba(52, 211, 153, 0.8)',
-            recent: 'rgba(96, 165, 250, 0.8)',
-            special: 'rgba(251, 191, 36, 0.8)'
-          };
-
-          memoryElement.style.transform = 'scale(1.3)';
-          memoryElement.style.boxShadow = `0 0 60px ${themeColors[theme] || 'rgba(134, 88, 255, 0.8)'}, 0 0 100px ${themeColors[theme] || 'rgba(134, 88, 255, 0.4)'}`;
-          memoryElement.style.zIndex = '1600'; /* CRITICAL FIX: Even higher on hover to stay above everything */
-        });
-
-        memoryElement.addEventListener('mouseleave', () => {
-          memoryElement.style.transform = 'scale(1)';
-          memoryElement.style.boxShadow = '';
-          memoryElement.style.zIndex = '1500'; /* CRITICAL FIX: Maintain high z-index even when not hovering */
-        });
-
-        // 🔍 ZOOM FIX: Add to constellation container for proper zoom behavior
-        const targetContainer = this.constellationContainer || document.querySelector('.dashboard') || document.body;
-        targetContainer.appendChild(memoryElement);
-
-        // Animate in with staggered timing
-        const delay = Math.random() * 500 + 200; // 200-700ms delay
-        setTimeout(() => {
-
-          memoryElement.style.transform = 'scale(1)';
-          memoryElement.style.opacity = '1';
-        }, delay);
-
-        return {
-          element: memoryElement,
-          x: x,
-          y: y,
-          baseX: x,
-          baseY: y,
-          vx: 0,
-          vy: 0,
-          memory: memory,
-          theme: theme,
-          connections: []
-        };
-      }
-
-      // Create person node element for constellation with heartbeat effect
-      createPersonNodeElement(person, x, y) {
-        const personElement = document.createElement('div');
-        personElement.className = 'person-node';
-
-        // Create person avatar with first letter of name
-        const avatar = person.name.charAt(0).toUpperCase();
-        const relationColor = this.getRelationColor(person.relation);
-
-        // Create BIGGER avatar circle with subtle heartbeat glow - NO TEXT LABELS
-        personElement.style.cssText = `
-          position: absolute;
-          left: ${x}px;
-          top: ${y}px;
-          width: 85px;
-          height: 85px;
-          border-radius: 50%;
-          background: ${relationColor.gradient};
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          color: white;
-          font-weight: 700;
-          font-size: 28px;
-          border: 3px solid ${relationColor.border};
-          box-shadow: 
-            0 8px 32px ${relationColor.glow},
-            0 0 20px rgba(239, 68, 68, 0.3),
-            0 0 40px rgba(239, 68, 68, 0.1);
-          overflow: hidden;
-          cursor: pointer;
-          transform: scale(0);
-          opacity: 0;
-          transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-          animation: heartbeat 4s ease-in-out infinite;
-          z-index: 1500; /* CRITICAL FIX: Higher z-index to appear above all connections */
-          pointer-events: auto; /* CRITICAL: Ensure person nodes are clickable even with container pointer-events: none */
-        `;
-
-        // Start with letter, then try to load avatar image
-        personElement.textContent = avatar;
-
-        // Try to load actual avatar image if person has one
-        if (person.avatarId) {
-          this.loadPersonAvatar(person, personElement, avatar);
-        }
-
-        // Add click handler to open person summary modal
-        personElement.addEventListener('click', (e) => {
-          e.stopPropagation();
-          this.openPersonSummaryModal(person);
-        });
-
-        // Add hover effects with relation-based glow
-        personElement.addEventListener('mouseenter', () => {
-          personElement.style.transform = 'scale(1.2)';
-          personElement.style.boxShadow = `0 0 40px ${relationColor.glow}, 0 0 80px ${relationColor.glow}`;
-          personElement.style.zIndex = '1600'; /* CRITICAL FIX: Even higher on hover to stay above everything */
-        });
-
-        personElement.addEventListener('mouseleave', () => {
-          personElement.style.transform = 'scale(1)';
-          personElement.style.boxShadow = '';
-          personElement.style.zIndex = '1500'; /* CRITICAL FIX: Maintain high z-index even when not hovering */
-        });
-
-        // 🔗 CRITICAL FIX: Append to constellation container for zoom/pan anchoring
-        if (this.constellationContainer) {
-          this.constellationContainer.appendChild(personElement);
-        } else {
-          const container = document.querySelector('.dashboard') || document.body;
-          container.appendChild(personElement);
-        }
-
-        // Animate in with staggered timing
-        const delay = Math.random() * 500 + 300; // 300-800ms delay
-        setTimeout(() => {
-
-          personElement.style.transform = 'scale(1)';
-          personElement.style.opacity = '1';
-        }, delay);
-
-        return personElement;
-      }
-
-      // Load actual avatar image for person node
-      async loadPersonAvatar(person, personElement, fallbackLetter) {
-        try {
-
-          // FIXED: Use avatarUrl directly from extension (already reconstructed)
-          if (person.avatarUrl) {
-            // Create image element
-            const img = document.createElement('img');
-            img.src = person.avatarUrl;
-            img.alt = `${person.name} avatar`;
-            img.style.cssText = `
-              width: 100%;
-              height: 100%;
-              object-fit: cover;
-              border-radius: 50%;
-            `;
-
-            img.onload = () => {
-              // Replace letter with image once loaded
-              personElement.innerHTML = '';
-              personElement.appendChild(img);
-
-            };
-
-            img.onerror = () => {
-              console.error('📷 CONSTELLATION: Failed to display avatar for:', person.name);
-              // Keep the letter fallback
-            };
-          } else {
-            console.warn('📷 CONSTELLATION: No avatar URL for:', person.name);
-          }
-        } catch (error) {
-          console.error('📷 CONSTELLATION: Error loading avatar for:', person.name, error);
-          // Keep the letter fallback
-        }
-      }
-
-      // Open revolutionary migration page
-      openMigrationPage() {
-
-        window.location.href = 'pages/vault-migration.html';
-      }
-
-      // Open person summary modal with connected memories
-      async openPersonSummaryModal(person) {
-
-        // 🎯 FIXED: Use same memory loading approach as people-emma.html
-        let connectedMemories = [];
-        try {
-          if (!window.emmaWebVault || !window.emmaWebVault.vaultData?.content) {
-            console.error('❌ CONSTELLATION: Vault data not available');
-            return;
-          }
-
-          const vaultData = window.emmaWebVault.vaultData;
-          const allMemories = vaultData.content.memories || {};
-
-          // Find memories that include this person - SAME LOGIC AS PEOPLE-EMMA.HTML
-          for (const [memoryId, memory] of Object.entries(allMemories)) {
-            // Check if person is in memory's people metadata
-            if (memory.metadata && memory.metadata.people && 
-                Array.isArray(memory.metadata.people) && 
-                memory.metadata.people.includes(person.id)) {
-              connectedMemories.push(memory);
-            }
-            
-            // Also check if person's name is mentioned in content
-            if (memory.content) {
-              const personName = person.name.toLowerCase();
-              const memoryContent = memory.content.toLowerCase();
-              if (memoryContent.includes(personName)) {
-                // Avoid duplicates
-                if (!connectedMemories.find(m => m.id === memory.id)) {
-                  connectedMemories.push(memory);
-                }
-              }
-            }
-          }
-
-          console.log(`🔗 CONSTELLATION: Found ${connectedMemories.length} memories for person ${person.id}`);
-
-        } catch (error) {
-          console.error('❌ CONSTELLATION: Error loading memories:', error);
-        }
-
-        // Create modal HTML
-        const modalHTML = `
-          <div class="person-summary-modal-overlay" id="person-summary-overlay" onclick="window.memoryConstellation.closePersonSummaryModal()">
-            <div class="person-summary-modal" onclick="event.stopPropagation()">
-              <button class="modal-close" onclick="window.memoryConstellation.closePersonSummaryModal()">×</button>
-
-              <div class="person-summary-header">
-                <div class="person-summary-avatar" id="person-summary-avatar">
-                  ${person.name.charAt(0).toUpperCase()}
-                </div>
-                <div class="person-summary-info">
-                  <h2 class="person-summary-name">${person.name}</h2>
-                  <p class="person-summary-relation">${person.relation || 'other'}</p>
-                  <p class="person-summary-contact">${person.contact || 'No contact info'}</p>
-                </div>
-              </div>
-
-              <div class="person-summary-content">
-                <h3 class="summary-section-title">Connected Memories</h3>
-                <div class="connected-memories">
-                  ${connectedMemories.length > 0 ?
-                    connectedMemories.map(memory => {
-                      // Get thumbnail from attachments or fallback
-                      const thumbnail = memory.thumbnail ||
-                                       (memory.attachments && memory.attachments.length > 0 && memory.attachments[0].url ? memory.attachments[0].url : null);
-                      const memoryTitle = memory.metadata?.title || memory.title || memory.subject || 'Untitled Memory';
-                      const memoryDate = memory.created || memory.date || memory.timestamp;
-
-                      return `
-                        <div class="connected-memory-item" onclick="window.memoryConstellation.openMemoryFromPerson('${memory.id}')">
-                          <div class="memory-preview">
-                            ${thumbnail ? `<img src="${thumbnail}" alt="Memory">` : '💝'}
-                          </div>
-                          <div class="memory-info">
-                            <div class="memory-title">${memoryTitle}</div>
-                            <div class="memory-date">${memoryDate ? new Date(memoryDate).toLocaleDateString() : 'Unknown date'}</div>
-                          </div>
-                        </div>
-                      `;
-                    }).join('') :
-                    '<div class="no-memories">No connected memories yet</div>'
-                  }
-                </div>
-
-                <div class="person-summary-actions">
-                  <button class="btn btn-primary" onclick="window.memoryConstellation.createMemoryWithPersonFromConstellation('${person.id}')">
-                    <span>✨</span>
-                    Create Memory Together
-                  </button>
-                  <button class="btn btn-secondary" onclick="window.location.href='pages/people-emma.html'">
-                    <span>👥</span>
-                    Manage People
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-        `;
-
-        // Add modal to body
-        document.body.insertAdjacentHTML('beforeend', modalHTML);
-
-        // Make constellation functions globally accessible for modal
-        window.memoryConstellation = this;
-
-        // Load avatar if available - CRITICAL for showing person's image
-        if (person.avatarUrl) {
-          this.loadAvatarForSummary(person);
-        } else {
-
-        }
-
-        // Show modal with animation
-        setTimeout(() => {
-          document.getElementById('person-summary-overlay').classList.add('active');
-        }, 10);
-      }
-
-      async loadAvatarForSummary(person) {
-        try {
-
-          // FIXED: Use avatarUrl directly (same as constellation nodes and people page)
-          if (person.avatarUrl) {
-            const avatarElement = document.getElementById('person-summary-avatar');
-            if (avatarElement) {
-
-              avatarElement.innerHTML = `<img src="${person.avatarUrl}" alt="${person.name}" style="
-                width: 100%;
-                height: 100%;
-                object-fit: cover;
-                border-radius: 50%;
-              ">`;
-
-            } else {
-              console.error('📷 SUMMARY: Avatar element not found in DOM');
-            }
-          } else {
-            console.warn('📷 SUMMARY: No avatarUrl available for:', person.name);
-          }
-        } catch (error) {
-          console.error('📷 SUMMARY: Error loading avatar for:', person.name, error);
-        }
-      }
-
-      closePersonSummaryModal() {
-        const overlay = document.getElementById('person-summary-overlay');
-        if (overlay) {
-          overlay.classList.remove('active');
-          setTimeout(() => overlay.remove(), 300);
-        }
-      }
-
-      createMemoryWithPersonFromConstellation(personId) {
-        this.closePersonSummaryModal();
-        window.location.href = `dashboard-new.html?createMemory=true&person=${personId}`;
-      }
-
-      async openMemoryFromPerson(memoryId) {
-
-        this.closePersonSummaryModal();
-
-        // Find the memory in our loaded memories
-        try {
-          let allMemories = [];
-          if (window.emmaWebVault && window.emmaWebVault.extensionAvailable) {
-            allMemories = await window.emmaWebVault.listMemories(1000);
-          }
-
-          const memory = allMemories.find(m => m.id === memoryId);
-          if (memory) {
-            this.openMemoryDialog(memory);
-          } else {
-            console.error('💝 Memory not found:', memoryId);
-            this.showToast('❌ Memory not found', 'error');
-          }
-        } catch (error) {
-          console.error('💝 Error opening memory from person:', error);
-          this.showToast('❌ Error opening memory', 'error');
-        }
-      }
-
-      // Get relation-specific colors for people nodes
-      getRelationColor(relation) {
-        const colors = {
-          family: {
-            gradient: 'linear-gradient(135deg, #ef4444, #f87171)',
-            border: 'rgba(239, 68, 68, 0.6)',
-            glow: 'rgba(239, 68, 68, 0.8)'
-          },
-          friend: {
-            gradient: 'linear-gradient(135deg, #3b82f6, #60a5fa)',
-            border: 'rgba(59, 130, 246, 0.6)',
-            glow: 'rgba(59, 130, 246, 0.8)'
-          },
-          colleague: {
-            gradient: 'linear-gradient(135deg, #10b981, #34d399)',
-            border: 'rgba(16, 185, 129, 0.6)',
-            glow: 'rgba(16, 185, 129, 0.8)'
-          },
-          romantic: {
-            gradient: 'linear-gradient(135deg, #ec4899, #f472b6)',
-            border: 'rgba(236, 72, 153, 0.6)',
-            glow: 'rgba(236, 72, 153, 0.8)'
-          }
-        };
-
-        return colors[relation] || colors.friend; // Default to friend colors
-      }
-
-      // Open person dialog (placeholder)
-      openPersonDialog(person) {
-
-        this.showToast(`👥 ${person.name} (${person.relation})`, 'info');
-      }
-
-      // Create intelligent connections between memory nodes and people nodes
-      createMemoryPeopleConnections(memories, people) {
-
-        const memoryNodes = this.nodes.filter(node => node.type === 'memory');
-        const peopleNodes = this.nodes.filter(node => node.type === 'person');
-
-        // For each memory, connect to people who were involved
-        memoryNodes.forEach(memoryNode => {
-          const memory = memoryNode.memory;
-
-          // Check if memory has people data (from wizard selections or manual input)
-          if (memory.selectedPeople && Array.isArray(memory.selectedPeople)) {
-            // Connect to people selected in wizard
-            memory.selectedPeople.forEach(personId => {
-              const personNode = peopleNodes.find(pNode => pNode.person.id === personId);
-              if (personNode && !memoryNode.connections.includes(personNode)) {
-                memoryNode.connections.push(personNode);
-                personNode.connections.push(memoryNode);
-
-              }
-            });
-          }
-
-          // Also check if people are mentioned in memory content/responses
-          const memoryText = (memory.content || '').toLowerCase() + ' ' +
-                            (memory.responses || []).join(' ').toLowerCase();
-
-          peopleNodes.forEach(personNode => {
-            const personName = personNode.person.name.toLowerCase();
-
-            // If person's name is mentioned in the memory text, create connection
-            if (memoryText.includes(personName) && !memoryNode.connections.includes(personNode)) {
-              memoryNode.connections.push(personNode);
-              personNode.connections.push(memoryNode);
-              console.log(`🔗 Auto-connected memory "${memory.title}" to person "${personNode.person.name}" (name mentioned)`);
-            }
-          });
-        });
-
-        // Create some random connections for people who aren't connected to anything
-        peopleNodes.forEach(personNode => {
-          if (personNode.connections.length === 0) {
-            // Connect to the closest memory node
-            let closestMemory = null;
-            let closestDistance = Infinity;
-
-            memoryNodes.forEach(memoryNode => {
-              const dx = personNode.x - memoryNode.x;
-              const dy = personNode.y - memoryNode.y;
-              const distance = Math.sqrt(dx * dx + dy * dy);
-
-              if (distance < closestDistance && memoryNode.connections.length < 3) {
-                closestDistance = distance;
-                closestMemory = memoryNode;
-              }
-            });
-
-            if (closestMemory) {
-              personNode.connections.push(closestMemory);
-              closestMemory.connections.push(personNode);
-
-            }
-          }
-        });
-
-      }      // Update neural network node positions with overlap prevention
-      updateConstellationNodes() {
-        const time = Date.now() * 0.001;
-
-        // Update all memory nodes
-        this.nodes.forEach((node, i) => {
-          // Reset forces
-          let forceX = 0;
-          let forceY = 0;
-
-          // Repulsion from other nodes to prevent overlap
-          this.nodes.forEach((otherNode, j) => {
-            if (i !== j) {
-              const dx = node.x - otherNode.x;
-              const dy = node.y - otherNode.y;
-              const distance = Math.sqrt(dx * dx + dy * dy);
-
-              const minDistance = node.isPrimary || otherNode.isPrimary ? 150 : 120;
-              if (distance < minDistance) {
-                const force = (minDistance - distance) / distance * 0.3;
-                forceX += dx * force;
-                forceY += dy * force;
-              }
-            }
-          });
-
-          // Also repel from central neuron
-          if (this.centralNeuron) {
-            const dx = node.x - this.centralNeuron.x;
-            const dy = node.y - this.centralNeuron.y;
-            const distance = Math.sqrt(dx * dx + dy * dy);
-
-            if (distance < 150) {
-              const force = (150 - distance) / distance * 0.4;
-              forceX += dx * force;
-              forceY += dy * force;
-            }
-          }
-
-          // Gentle attraction to base position
-          const baseAttraction = node.isPrimary ? 0.03 : 0.02;
-          forceX += (node.baseX - node.x) * baseAttraction;
-          forceY += (node.baseY - node.y) * baseAttraction;
-
-          // Subtle floating motion - less for primary nodes
-          const floatAmplitude = node.isPrimary ? 1.5 : 2.5;
-          const floatX = Math.sin(time * 0.15 + i * 0.7) * floatAmplitude;
-          const floatY = Math.cos(time * 0.12 + i * 0.5) * floatAmplitude;
-
-          // Apply forces
-          node.vx = (node.vx + forceX) * 0.92; // Damping
-          node.vy = (node.vy + forceY) * 0.92;
-
-          // Update position
-          node.x += node.vx + floatX * 0.4;
-          node.y += node.vy + floatY * 0.4;
-
-          // Keep within bounds
-          const padding = 80;
-          node.x = Math.max(padding, Math.min(window.innerWidth - padding, node.x));
-          node.y = Math.max(padding, Math.min(window.innerHeight - padding, node.y));
-
-          // Update DOM position
-          if (node.element) {
-            node.element.style.left = node.x + 'px';
-            node.element.style.top = node.y + 'px';
-          }
-        });
-
-        // The central neuron (Emma orb) stays fixed at center
-        if (this.centralNeuron) {
-          this.centralNeuron.x = window.innerWidth / 2;
-          this.centralNeuron.y = window.innerHeight / 2;
-        }
-      }
-
-      // Show elegant constellation burger menu
-      showConstellationUI() {
-        // Initialize constellation filters state
-        this.constellationFilters = {
-          memories: true,
-          people: true,
-          family: true,
-          travel: true,
-          recent: true,
-          special: true
-        };
-
-        // Create elegant burger menu
-        const burgerMenu = document.createElement('div');
-        burgerMenu.className = 'constellation-burger-menu';
-        burgerMenu.innerHTML = `
-          <!-- Burger Button -->
-          <button class="constellation-burger-btn" id="constellationBurger">
-            <div class="burger-lines">
-              <span></span>
-              <span></span>
-              <span></span>
-          </div>
-            <div class="burger-label">Filters</div>
-          </button>
-
-          <!-- Expandable Menu Panel -->
-          <div class="constellation-menu-panel" id="constellationPanel">
-            <div class="panel-header">
-              <h3>🌟 Constellation Filters</h3>
-              <button class="panel-close" onclick="dashboard.exitMemoryConstellation()">✕</button>
-            </div>
-
-            <div class="filter-section">
-              <h4>Node Types</h4>
-              <div class="filter-toggles">
-                <label class="filter-toggle">
-                  <input type="checkbox" id="filter-memories" checked>
-                  <span class="toggle-slider"></span>
-                  <span class="toggle-label">💝 Memories</span>
-                  <span class="toggle-count" id="count-memories">0</span>
-                </label>
-
-                <label class="filter-toggle">
-                  <input type="checkbox" id="filter-people" checked>
-                  <span class="toggle-slider"></span>
-                  <span class="toggle-label">👤 People</span>
-                  <span class="toggle-count" id="count-people">0</span>
-                </label>
-              </div>
-            </div>
-
-            <div class="filter-section">
-              <h4>Memory Themes</h4>
-              <div class="filter-toggles">
-                <label class="filter-toggle">
-                  <input type="checkbox" id="filter-family" checked>
-                  <span class="toggle-slider family"></span>
-                  <span class="toggle-label">👨‍👩‍👧‍👦 Family</span>
-                  <span class="toggle-count" id="count-family">0</span>
-                </label>
-
-                <label class="filter-toggle">
-                  <input type="checkbox" id="filter-travel" checked>
-                  <span class="toggle-slider travel"></span>
-                  <span class="toggle-label">✈️ Travel</span>
-                  <span class="toggle-count" id="count-travel">0</span>
-                </label>
-
-                <label class="filter-toggle">
-                  <input type="checkbox" id="filter-recent" checked>
-                  <span class="toggle-slider recent"></span>
-                  <span class="toggle-label">🕒 Recent</span>
-                  <span class="toggle-count" id="count-recent">0</span>
-                </label>
-
-                <label class="filter-toggle">
-                  <input type="checkbox" id="filter-special" checked>
-                  <span class="toggle-slider special"></span>
-                  <span class="toggle-label">⭐ Special</span>
-                  <span class="toggle-count" id="count-special">0</span>
-                </label>
-              </div>
-            </div>
-
-            <div class="filter-actions">
-              <button class="filter-btn secondary" id="reset-filters-btn">
-                Reset All
-              </button>
-              <button class="filter-btn primary" id="apply-filters-btn">
-                Apply Filters
-              </button>
-            </div>
-          </div>
-        `;
-
-        // Add elegant styles
-        const styles = document.createElement('style');
-        styles.textContent = `
-          .constellation-burger-menu {
-          position: fixed;
-          top: 20px;
-          left: 20px;
-            z-index: 2000;
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-          }
-
-          .constellation-burger-btn {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            gap: 4px;
-            background: rgba(17, 17, 27, 0.95);
-            border: 1px solid rgba(134, 88, 255, 0.4);
-            border-radius: 12px;
-            padding: 12px;
-            cursor: pointer;
-            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-            backdrop-filter: blur(15px);
-            box-shadow: 0 8px 32px rgba(134, 88, 255, 0.15);
-          }
-
-          .constellation-burger-btn:hover {
-            background: rgba(134, 88, 255, 0.1);
-            border-color: rgba(134, 88, 255, 0.6);
-            transform: translateY(-2px);
-            box-shadow: 0 12px 40px rgba(134, 88, 255, 0.25);
-          }
-
-          .burger-lines {
-            display: flex;
-            flex-direction: column;
-            gap: 3px;
-          }
-
-          .burger-lines span {
-            width: 18px;
-            height: 2px;
-            background: rgba(134, 88, 255, 0.8);
-            border-radius: 1px;
-            transition: all 0.3s ease;
-          }
-
-          .constellation-burger-btn:hover .burger-lines span {
-            background: rgba(134, 88, 255, 1);
-          }
-
-          .burger-label {
-            font-size: 10px;
-            color: rgba(255, 255, 255, 0.7);
-            font-weight: 500;
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-          }
-
-          .constellation-menu-panel {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 320px;
-            background: rgba(17, 17, 27, 0.98);
-          border: 1px solid rgba(134, 88, 255, 0.3);
-            border-radius: 16px;
-            backdrop-filter: blur(20px);
-            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
-            transform: translateX(-100%) scale(0.95);
-            opacity: 0;
-            visibility: hidden;
-            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-            overflow: hidden;
-          }
-
-          .constellation-menu-panel.active {
-            transform: translateX(0) scale(1);
-            opacity: 1;
-            visibility: visible;
-          }
-
-          .panel-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 20px 24px 16px;
-            border-bottom: 1px solid rgba(134, 88, 255, 0.2);
-          }
-
-          .panel-header h3 {
-            margin: 0;
-            font-size: 16px;
-            font-weight: 600;
-            color: white;
-          }
-
-          .panel-close {
-            background: none;
-            border: none;
-            color: rgba(255, 255, 255, 0.6);
-            font-size: 18px;
-            cursor: pointer;
-            padding: 4px;
-            border-radius: 6px;
-            transition: all 0.2s ease;
-          }
-
-          .panel-close:hover {
-            background: rgba(255, 255, 255, 0.1);
-            color: white;
-          }
-
-          .filter-section {
-            padding: 20px 24px;
-            border-bottom: 1px solid rgba(134, 88, 255, 0.1);
-          }
-
-          .filter-section:last-of-type {
-            border-bottom: none;
-          }
-
-          .filter-section h4 {
-            margin: 0 0 16px 0;
-            font-size: 14px;
-            font-weight: 600;
-            color: rgba(255, 255, 255, 0.8);
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-          }
-
-          .filter-toggles {
-            display: flex;
-            flex-direction: column;
-            gap: 12px;
-          }
-
-          .filter-toggle {
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            cursor: pointer;
-            padding: 8px 0;
-            transition: all 0.2s ease;
-          }
-
-          .filter-toggle:hover {
-            background: rgba(134, 88, 255, 0.05);
-            border-radius: 8px;
-            padding: 8px 8px;
-            margin: 0 -8px;
-          }
-
-          .filter-toggle input[type="checkbox"] {
-            display: none;
-          }
-
-          .toggle-slider {
-            position: relative;
-            width: 40px;
-            height: 20px;
-            background: rgba(255, 255, 255, 0.2);
-            border-radius: 10px;
-            transition: all 0.3s ease;
-            flex-shrink: 0;
-          }
-
-          .toggle-slider:before {
-            content: '';
-            position: absolute;
-            top: 2px;
-            left: 2px;
-            width: 16px;
-            height: 16px;
-            background: white;
-            border-radius: 50%;
-            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-          }
-
-          .filter-toggle input:checked + .toggle-slider {
-            background: rgba(134, 88, 255, 0.8);
-          }
-
-          .filter-toggle input:checked + .toggle-slider:before {
-            transform: translateX(20px);
-            background: white;
-          }
-
-          /* Theme-specific toggle colors */
-          .toggle-slider.family:before { background: rgba(255, 105, 135, 0.1); }
-          .filter-toggle input:checked + .toggle-slider.family { background: rgba(255, 105, 135, 0.8); }
-
-          .toggle-slider.travel:before { background: rgba(52, 211, 153, 0.1); }
-          .filter-toggle input:checked + .toggle-slider.travel { background: rgba(52, 211, 153, 0.8); }
-
-          .toggle-slider.recent:before { background: rgba(96, 165, 250, 0.1); }
-          .filter-toggle input:checked + .toggle-slider.recent { background: rgba(96, 165, 250, 0.8); }
-
-          .toggle-slider.special:before { background: rgba(251, 191, 36, 0.1); }
-          .filter-toggle input:checked + .toggle-slider.special { background: rgba(251, 191, 36, 0.8); }
-
-          .toggle-label {
-            flex: 1;
-            color: rgba(255, 255, 255, 0.9);
-            font-size: 14px;
-            font-weight: 500;
-          }
-
-          .toggle-count {
-            background: rgba(134, 88, 255, 0.2);
-            color: rgba(134, 88, 255, 1);
-            padding: 2px 8px;
-          border-radius: 12px;
-            font-size: 12px;
-            font-weight: 600;
-            min-width: 20px;
-            text-align: center;
-          }
-
-          .filter-actions {
-            padding: 20px 24px;
-            display: flex;
-            gap: 12px;
-          }
-
-          .filter-btn {
-            flex: 1;
-            padding: 12px 16px;
-            border: none;
-            border-radius: 8px;
-            font-size: 14px;
-            font-weight: 600;
-            cursor: pointer;
-            transition: all 0.2s ease;
-          }
-
-          .filter-btn.secondary {
-            background: rgba(255, 255, 255, 0.1);
-            color: rgba(255, 255, 255, 0.8);
-          }
-
-          .filter-btn.secondary:hover {
-            background: rgba(255, 255, 255, 0.15);
-            color: white;
-          }
-
-          .filter-btn.primary {
-            background: rgba(134, 88, 255, 0.8);
-            color: white;
-          }
-
-          .filter-btn.primary:hover {
-            background: rgba(134, 88, 255, 1);
-            transform: translateY(-1px);
-          }
-        `;
-
-        document.head.appendChild(styles);
-        document.body.appendChild(burgerMenu);
-
-        // Set up burger menu interactions
-        this.setupConstellationMenu();
-
-        // Update counts
-        this.updateConstellationCounts();
-
-        this.constellationUI = burgerMenu;
-        
-        // 🎯 NO CONTROLS NEEDED: Natural gestures (wheel zoom, drag pan, pinch) are intuitive
-      }
-
-      // Set up constellation menu interactions
-      setupConstellationMenu() {
-        const burgerBtn = document.getElementById('constellationBurger');
-        const panel = document.getElementById('constellationPanel');
-
-        // Toggle menu on burger click
-        burgerBtn.addEventListener('click', () => {
-          panel.classList.toggle('active');
-        });
-
-        // Close menu when clicking outside
-        document.addEventListener('click', (e) => {
-          if (!burgerBtn.contains(e.target) && !panel.contains(e.target)) {
-            panel.classList.remove('active');
-          }
-        });
-
-        // Set up filter toggle event listeners
-        const filterInputs = panel.querySelectorAll('input[type="checkbox"]');
-        filterInputs.forEach(input => {
-          input.addEventListener('change', (e) => {
-            const filterType = e.target.id.replace('filter-', '');
-            this.toggleConstellationFilter(filterType, e.target.checked);
-          });
-        });
-
-        // Set up action button event listeners
-        document.getElementById('reset-filters-btn').addEventListener('click', () => {
-          this.resetConstellationFilters();
-        });
-
-        document.getElementById('apply-filters-btn').addEventListener('click', () => {
-          this.hideConstellationMenu();
-        });
-      }
-
-      // Toggle constellation filter and update display
-      toggleConstellationFilter(filterType, enabled) {
-        this.constellationFilters[filterType] = enabled;
-
-        // Apply filters with smooth animation
-        this.applyConstellationFilters();
-      }
-
-      // Apply constellation filters with smooth animations
-      applyConstellationFilters() {
-        const nodes = document.querySelectorAll('.memory-node, .person-node');
-
-        nodes.forEach(node => {
-          const nodeType = node.classList.contains('memory-node') ? 'memory' : 'person';
-          const theme = node.dataset.theme || 'recent';
-
-          let shouldShow = false;
-
-          // Check if node type is enabled
-          if (nodeType === 'memory' && this.constellationFilters.memories) {
-            // Check if memory theme is enabled
-            shouldShow = this.constellationFilters[theme];
-          } else if (nodeType === 'person' && this.constellationFilters.people) {
-            shouldShow = true;
-          }
-
-          // Smooth animation for show/hide
-          if (shouldShow && node.style.display === 'none') {
-            // Show with fade in
-            node.style.display = 'block';
-            node.style.opacity = '0';
-            node.style.transform = 'scale(0.8)';
-
-            requestAnimationFrame(() => {
-              node.style.transition = 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)';
-              node.style.opacity = '1';
-              node.style.transform = 'scale(1)';
-            });
-          } else if (!shouldShow && node.style.display !== 'none') {
-            // Hide with fade out
-            node.style.transition = 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)';
-            node.style.opacity = '0';
-            node.style.transform = 'scale(0.8)';
-
-            setTimeout(() => {
-              node.style.display = 'none';
-            }, 300);
-          }
-        });
-
-        // Neural connections now update automatically in animation loop based on node visibility
-      }
-
-      // Neural connections now handled automatically in main animation loop
-
-      // Update constellation counts in the menu
-      updateConstellationCounts() {
-        // Count memories by theme
-        const themeCounts = {
-          family: 0,
-          travel: 0,
-          recent: 0,
-          special: 0
-        };
-
-        Object.keys(this.constellationMemories || {}).forEach(theme => {
-          themeCounts[theme] = (this.constellationMemories[theme] || []).length;
-        });
-
-        // Count people
-        const peopleCount = this.constellationPeople ? this.constellationPeople.length : 0;
-        const totalMemories = Object.values(themeCounts).reduce((sum, count) => sum + count, 0);
-
-        // Update count displays
-        const updateCount = (id, count) => {
-          const element = document.getElementById(id);
-          if (element) element.textContent = count;
-        };
-
-        updateCount('count-memories', totalMemories);
-        updateCount('count-people', peopleCount);
-        updateCount('count-family', themeCounts.family);
-        updateCount('count-travel', themeCounts.travel);
-        updateCount('count-recent', themeCounts.recent);
-        updateCount('count-special', themeCounts.special);
-      }
-
-      // Reset all constellation filters
-      resetConstellationFilters() {
-        // Reset all filters to true
-        this.constellationFilters = {
-          memories: true,
-          people: true,
-          family: true,
-          travel: true,
-          recent: true,
-          special: true
-        };
-
-        // Update checkboxes
-        const checkboxes = document.querySelectorAll('#constellationPanel input[type="checkbox"]');
-        checkboxes.forEach(checkbox => {
-          checkbox.checked = true;
-        });
-
-        // Apply filters
-        this.applyConstellationFilters();
-
-      }
-
-      // Hide constellation menu
-      hideConstellationMenu() {
-        const panel = document.getElementById('constellationPanel');
-        if (panel) {
-          panel.classList.remove('active');
-        }
-      }
-
-      // 🔍 CREATE ZOOMABLE CONSTELLATION CONTAINER
-      createConstellationContainer() {
-        // Remove any existing constellation container
-        const existingContainer = document.getElementById('constellation-zoom-container');
-        if (existingContainer) {
-          existingContainer.remove();
-        }
-
-        // Create zoomable container for constellation nodes
-        this.constellationContainer = document.createElement('div');
-        this.constellationContainer.id = 'constellation-zoom-container';
-        this.constellationContainer.style.cssText = `
-          position: fixed;
-          top: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
-          pointer-events: none;
-          z-index: 1400;
-          transform-origin: center center;
-          transition: transform 0.2s ease-out;
-        `;
-        
-        // 🔧 CRITICAL FIX: Container doesn't block events, but child nodes can still be clicked
-        // Child nodes will have pointer-events: auto set individually
-
-        // Reset zoom state
-        this.zoomState.scale = 1;
-        this.zoomState.translateX = 0;
-        this.zoomState.translateY = 0;
-
-        // Add to dashboard
-        document.body.appendChild(this.constellationContainer);
-
-        // Enable zoom/pan interaction on the container
-        this.setupConstellationZoom();
-
-        console.log('🔍 ZOOM: Created constellation container with zoom functionality');
-      }
-
-      // 🔍 SETUP ZOOM AND PAN FUNCTIONALITY
-      setupConstellationZoom() {
-        // Enable pointer events for zoom interaction
-        document.addEventListener('wheel', (e) => {
-          if (this.isConstellationMode) {
-            // 🚫 SMART SCROLL: Don't intercept wheel events over dialogs/modals/chat
-            const isOverDialog = e.target.closest('.memory-preview-dialog') || 
-                                e.target.closest('.person-summary-modal') ||
-                                e.target.closest('.voice-wizard-modal') ||
-                                e.target.closest('.modal-overlay') ||
-                                e.target.closest('.responsive-memory-container') ||
-                                
-                                // 💬 CHAT WINDOW EXCLUSIONS
-                                e.target.closest('.experience-popup') ||
-                                e.target.closest('.chat-container') ||
-                                e.target.closest('.message-container') ||
-                                e.target.closest('.messages-container') ||
-                                e.target.closest('.chat-messages') ||
-                                e.target.closest('.emma-chat') ||
-                                e.target.closest('[class*="chat"]') ||
-                                e.target.closest('[class*="message"]') ||
-                                e.target.closest('[class*="popup"]');
-            
-            if (!isOverDialog) {
-              // Only zoom constellation when NOT scrolling in a dialog
-              e.preventDefault();
-              this.handleConstellationZoom(e);
-            }
-            // If over dialog, allow natural scrolling behavior
-          }
-        }, { passive: false });
-
-        // 🎯 IMPROVED MOUSE DRAG PANNING - More responsive for Debbe
-        let isDragging = false;
-        let dragStart = { x: 0, y: 0 };
-        let dragStartZoom = { ...this.zoomState };
-
-        document.addEventListener('mousedown', (e) => {
-          // 🚫 DISABLE CLICK-TO-PAN: Let users click nodes without drag interference
-          // Only enable drag on the constellation container itself or document body
-          if (this.isConstellationMode && 
-              (e.target === this.constellationContainer || 
-               e.target === document.body || 
-               e.target.classList.contains('dashboard'))) {
-            isDragging = true;
-            dragStart = { x: e.clientX, y: e.clientY };
-            dragStartZoom = { ...this.zoomState };
-            document.body.style.cursor = 'grabbing';
-            e.preventDefault(); // Only prevent when starting drag on empty space
-          }
-        });
-
-        document.addEventListener('mousemove', (e) => {
-          if (isDragging && this.isConstellationMode) {
-            const deltaX = e.clientX - dragStart.x;
-            const deltaY = e.clientY - dragStart.y;
-            
-            this.zoomState.translateX = dragStartZoom.translateX + deltaX;
-            this.zoomState.translateY = dragStartZoom.translateY + deltaY;
-            
-            this.updateConstellationTransform();
-          }
-        });
-
-        document.addEventListener('mouseup', () => {
-          if (isDragging) {
-            isDragging = false;
-            document.body.style.cursor = '';
-          }
-        });
-
-        // 📱 TOUCH GESTURES for tablets/phones
-        let startTouches = [];
-        let startZoomState = { ...this.zoomState };
-
-        document.addEventListener('touchstart', (e) => {
-          if (this.isConstellationMode) {
-            startTouches = Array.from(e.touches);
-            startZoomState = { ...this.zoomState };
-          }
-        });
-
-        document.addEventListener('touchmove', (e) => {
-          if (this.isConstellationMode && startTouches.length > 0) {
-            e.preventDefault();
-            this.handleConstellationTouchMove(e, startTouches, startZoomState);
-          }
-        }, { passive: false });
-
-        document.addEventListener('touchend', () => {
-          startTouches = [];
-        });
-
-        // ⌨️ KEYBOARD NAVIGATION for accessibility
-        document.addEventListener('keydown', (e) => {
-          if (this.isConstellationMode) {
-            this.handleConstellationKeyboard(e);
-          }
-        });
-      }
-
-      // 📱 HANDLE TOUCH GESTURES (PINCH TO ZOOM + PAN)
-      handleConstellationTouchMove(e, startTouches, startZoomState) {
-        const currentTouches = Array.from(e.touches);
-
-        if (currentTouches.length === 2 && startTouches.length === 2) {
-          // Pinch to zoom
-          const startDistance = Math.hypot(
-            startTouches[0].clientX - startTouches[1].clientX,
-            startTouches[0].clientY - startTouches[1].clientY
-          );
-          const currentDistance = Math.hypot(
-            currentTouches[0].clientX - currentTouches[1].clientX,
-            currentTouches[0].clientY - currentTouches[1].clientY
-          );
-
-          const scaleChange = currentDistance / startDistance;
-          const newScale = Math.max(this.zoomState.minScale,
-                           Math.min(this.zoomState.maxScale,
-                           startZoomState.scale * scaleChange));
-
-          // Zoom towards pinch center
-          const centerX = (currentTouches[0].clientX + currentTouches[1].clientX) / 2;
-          const centerY = (currentTouches[0].clientY + currentTouches[1].clientY) / 2;
-          
-          const scaleRatio = newScale / this.zoomState.scale;
-          this.zoomState.translateX = centerX - (centerX - this.zoomState.translateX) * scaleRatio;
-          this.zoomState.translateY = centerY - (centerY - this.zoomState.translateY) * scaleRatio;
-          this.zoomState.scale = newScale;
-          
-          this.updateConstellationTransform();
-        } else if (currentTouches.length === 1 && startTouches.length === 1) {
-          // Single finger pan
-          const deltaX = currentTouches[0].clientX - startTouches[0].clientX;
-          const deltaY = currentTouches[0].clientY - startTouches[0].clientY;
-
-          this.zoomState.translateX = startZoomState.translateX + deltaX;
-          this.zoomState.translateY = startZoomState.translateY + deltaY;
-          this.updateConstellationTransform();
-        }
-      }
-
-      // ⌨️ KEYBOARD NAVIGATION for constellation
-      handleConstellationKeyboard(e) {
-        const panStep = 50; // Pixels to pan per key press
-        const zoomStep = 0.05; // 🎯 GENTLE: 5% per key press instead of 10%
-
-        switch(e.key) {
-          case 'ArrowUp':
-            e.preventDefault();
-            this.zoomState.translateY += panStep;
-            this.updateConstellationTransform();
-            break;
-          case 'ArrowDown':
-            e.preventDefault();
-            this.zoomState.translateY -= panStep;
-            this.updateConstellationTransform();
-            break;
-          case 'ArrowLeft':
-            e.preventDefault();
-            this.zoomState.translateX += panStep;
-            this.updateConstellationTransform();
-            break;
-          case 'ArrowRight':
-            e.preventDefault();
-            this.zoomState.translateX -= panStep;
-            this.updateConstellationTransform();
-            break;
-          case '+':
-          case '=':
-            e.preventDefault();
-            this.zoomState.scale = Math.min(this.zoomState.maxScale, this.zoomState.scale * (1 + zoomStep));
-            this.updateConstellationTransform();
-            break;
-          case '-':
-            e.preventDefault();
-            this.zoomState.scale = Math.max(this.zoomState.minScale, this.zoomState.scale * (1 - zoomStep));
-            this.updateConstellationTransform();
-            break;
-          case '0':
-            e.preventDefault();
-            this.fitAllMemories();
-            break;
-        }
-      }
-
-      // 🔍 HANDLE MOUSE WHEEL ZOOM
-      handleConstellationZoom(e) {
-        // 🎯 GENTLE ZOOM: Much less aggressive (3% per scroll instead of 10%)
-        const zoomFactor = e.deltaY > 0 ? 0.97 : 1.03;
-        const newScale = Math.max(this.zoomState.minScale, 
-                         Math.min(this.zoomState.maxScale, 
-                         this.zoomState.scale * zoomFactor));
-
-        // Zoom towards mouse position
-        const mouseX = e.clientX;
-        const mouseY = e.clientY;
-
-        // Calculate offset to zoom towards mouse
-        const scaleRatio = newScale / this.zoomState.scale;
-        this.zoomState.translateX = mouseX - (mouseX - this.zoomState.translateX) * scaleRatio;
-        this.zoomState.translateY = mouseY - (mouseY - this.zoomState.translateY) * scaleRatio;
-        this.zoomState.scale = newScale;
-
-        this.updateConstellationTransform();
-      }
-
-      // 🔍 UPDATE CONSTELLATION TRANSFORM
-      updateConstellationTransform() {
-        const transform = `translate(${this.zoomState.translateX}px, ${this.zoomState.translateY}px) scale(${this.zoomState.scale})`;
-        
-        // Apply transform to constellation container (memory nodes)
-        if (this.constellationContainer) {
-          this.constellationContainer.style.transform = transform;
-        }
-        
-        // 💥 CRITICAL FIX: Apply same transform to neural canvas (connections)
-        // This ensures connections stay anchored to nodes when zooming/panning
-        if (this.neuralCanvas) {
-          this.neuralCanvas.style.transform = transform;
-          this.neuralCanvas.style.transformOrigin = 'center center';
-        }
-        
-        console.log('🔗 TRANSFORM: Applied zoom/pan to both nodes and connections');
-      }
-
-      // 🔍 ADD ELEGANT EMMA-BRANDED ZOOM CONTROLS
-      addConstellationZoomControls() {
-        // Remove any existing zoom controls
-        const existingControls = document.getElementById('constellation-zoom-controls');
-        if (existingControls) {
-          existingControls.remove();
-        }
-
-        // Create Emma-branded zoom controls container
-        const zoomControls = document.createElement('div');
-        zoomControls.id = 'constellation-zoom-controls';
-        zoomControls.style.cssText = `
-          position: fixed;
-          bottom: 40px;
-          right: 40px;
-          display: flex;
-          flex-direction: column;
-          gap: 12px;
-          z-index: 9999;
-          opacity: 1;
-          transition: all 0.3s ease;
-        `;
-
-        // Emma-branded button base style
-        const buttonBaseStyle = `
-          width: 56px;
-          height: 56px;
-          border-radius: 50%;
-          border: 1px solid rgba(255, 255, 255, 0.15);
-          background: linear-gradient(135deg, 
-            rgba(139, 92, 246, 0.9) 0%, 
-            rgba(124, 58, 237, 0.8) 50%,
-            rgba(109, 40, 217, 0.9) 100%
-          );
-          backdrop-filter: blur(20px) saturate(150%);
-          color: white;
-          font-size: 18px;
-          cursor: pointer;
-          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-          box-shadow: 
-            0 8px 32px rgba(139, 92, 246, 0.3),
-            0 0 0 1px rgba(255, 255, 255, 0.05),
-            inset 0 1px 0 rgba(255, 255, 255, 0.1);
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-          font-weight: 500;
-          position: relative;
-          overflow: hidden;
-        `;
-
-        // Zoom in button
-        const zoomInBtn = document.createElement('button');
-        zoomInBtn.innerHTML = '+';
-        zoomInBtn.title = 'Zoom In to Explore';
-        zoomInBtn.style.cssText = buttonBaseStyle;
-        
-        zoomInBtn.addEventListener('click', () => {
-          const centerX = window.innerWidth / 2;
-          const centerY = window.innerHeight / 2;
-          // 🎯 GENTLE: 15% per button click instead of 30%
-          const newScale = Math.min(this.zoomState.maxScale, this.zoomState.scale * 1.15);
-          
-          // Zoom towards center for smooth experience
-          const scaleRatio = newScale / this.zoomState.scale;
-          this.zoomState.translateX = centerX - (centerX - this.zoomState.translateX) * scaleRatio;
-          this.zoomState.translateY = centerY - (centerY - this.zoomState.translateY) * scaleRatio;
-          this.zoomState.scale = newScale;
-          
-          this.updateConstellationTransform();
-        });
-
-        // Zoom out button
-        const zoomOutBtn = document.createElement('button');
-        zoomOutBtn.innerHTML = '−';
-        zoomOutBtn.title = 'Zoom Out to See More';
-        zoomOutBtn.style.cssText = buttonBaseStyle;
-        
-        zoomOutBtn.addEventListener('click', () => {
-          const centerX = window.innerWidth / 2;
-          const centerY = window.innerHeight / 2;
-          // 🎯 GENTLE: 15% per button click instead of 30%
-          const newScale = Math.max(this.zoomState.minScale, this.zoomState.scale / 1.15);
-          
-          // Zoom from center for smooth experience
-          const scaleRatio = newScale / this.zoomState.scale;
-          this.zoomState.translateX = centerX - (centerX - this.zoomState.translateX) * scaleRatio;
-          this.zoomState.translateY = centerY - (centerY - this.zoomState.translateY) * scaleRatio;
-          this.zoomState.scale = newScale;
-          
-          this.updateConstellationTransform();
-        });
-
-        // Fit all button - special Emma green
-        const resetBtn = document.createElement('button');
-        resetBtn.innerHTML = '⌂';
-        resetBtn.title = 'Show All Memories';
-        resetBtn.style.cssText = buttonBaseStyle.replace(
-          'rgba(139, 92, 246, 0.9) 0%, rgba(124, 58, 237, 0.8) 50%, rgba(109, 40, 217, 0.9) 100%',
-          'rgba(16, 185, 129, 0.9) 0%, rgba(5, 150, 105, 0.8) 50%, rgba(4, 120, 87, 0.9) 100%'
-        ).replace(
-          'rgba(139, 92, 246, 0.3)',
-          'rgba(16, 185, 129, 0.3)'
-        );
-        
-        resetBtn.addEventListener('click', () => {
-          this.fitAllMemories();
-        });
-
-        // Add elegant hover effects
-        [zoomInBtn, zoomOutBtn, resetBtn].forEach(btn => {
-          btn.addEventListener('mouseenter', () => {
-            btn.style.transform = 'scale(1.05) translateY(-2px)';
-            btn.style.boxShadow = `
-              0 12px 40px rgba(139, 92, 246, 0.4),
-              0 0 0 1px rgba(255, 255, 255, 0.1),
-              inset 0 1px 0 rgba(255, 255, 255, 0.2)
-            `;
-          });
-          
-          btn.addEventListener('mouseleave', () => {
-            btn.style.transform = 'scale(1) translateY(0)';
-            btn.style.boxShadow = `
-              0 8px 32px rgba(139, 92, 246, 0.3),
-              0 0 0 1px rgba(255, 255, 255, 0.05),
-              inset 0 1px 0 rgba(255, 255, 255, 0.1)
-            `;
-          });
-
-          // Add subtle click effect
-          btn.addEventListener('mousedown', () => {
-            btn.style.transform = 'scale(0.95)';
-          });
-          
-          btn.addEventListener('mouseup', () => {
-            btn.style.transform = 'scale(1.05) translateY(-2px)';
-          });
-        });
-
-        zoomControls.appendChild(zoomInBtn);
-        zoomControls.appendChild(zoomOutBtn);
-        zoomControls.appendChild(resetBtn);
-        document.body.appendChild(zoomControls);
-
-        // 🧭 ADD NAVIGATION ARROWS for easy panning
-        this.addConstellationPanControls();
-
-        console.log('🎨 ZOOM: Added elegant Emma-branded zoom controls');
-      }
-
-      // 🧭 ADD DEMENTIA-FRIENDLY PAN CONTROLS
-      addConstellationPanControls() {
-        // Remove any existing pan controls
-        const existingPanControls = document.getElementById('constellation-pan-controls');
-        if (existingPanControls) {
-          existingPanControls.remove();
-        }
-
-        // Create navigation controls container
-        const panControls = document.createElement('div');
-        panControls.id = 'constellation-pan-controls';
-        panControls.style.cssText = `
-          position: fixed;
-          bottom: 40px;
-          left: 40px;
-          display: grid;
-          grid-template-columns: 1fr 1fr 1fr;
-          grid-template-rows: 1fr 1fr 1fr;
-          gap: 8px;
-          z-index: 9999;
-          opacity: 1;
-          transition: all 0.3s ease;
-          width: 144px;
-          height: 144px;
-        `;
-
-        // Emma-branded button style for arrows
-        const arrowButtonStyle = `
-          width: 44px;
-          height: 44px;
-          border-radius: 50%;
-          border: 1px solid rgba(255, 255, 255, 0.15);
-          background: linear-gradient(135deg, 
-            rgba(139, 92, 246, 0.85) 0%, 
-            rgba(124, 58, 237, 0.75) 50%,
-            rgba(109, 40, 217, 0.85) 100%
-          );
-          backdrop-filter: blur(20px) saturate(150%);
-          color: white;
-          font-size: 16px;
-          cursor: pointer;
-          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-          box-shadow: 
-            0 6px 24px rgba(139, 92, 246, 0.25),
-            0 0 0 1px rgba(255, 255, 255, 0.05),
-            inset 0 1px 0 rgba(255, 255, 255, 0.1);
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-          font-weight: 600;
-        `;
-
-        const panStep = 100; // Distance to pan in pixels
-
-        // Create directional buttons in a 3x3 grid pattern
-        const directions = [
-          { pos: [0, 1], arrow: '↑', title: 'Pan Up', dx: 0, dy: panStep },
-          { pos: [1, 0], arrow: '←', title: 'Pan Left', dx: panStep, dy: 0 },
-          { pos: [1, 1], arrow: '⊕', title: 'Center View', dx: 0, dy: 0, special: 'center' },
-          { pos: [1, 2], arrow: '→', title: 'Pan Right', dx: -panStep, dy: 0 },
-          { pos: [2, 1], arrow: '↓', title: 'Pan Down', dx: 0, dy: -panStep }
-        ];
-
-        directions.forEach(({ pos, arrow, title, dx, dy, special }) => {
-          const button = document.createElement('button');
-          button.innerHTML = arrow;
-          button.title = title;
-          button.style.cssText = arrowButtonStyle;
-          button.style.gridColumn = pos[1] + 1;
-          button.style.gridRow = pos[0] + 1;
-
-          // Special styling for center button
-          if (special === 'center') {
-            button.style.background = `linear-gradient(135deg, 
-              rgba(16, 185, 129, 0.85) 0%, 
-              rgba(5, 150, 105, 0.75) 50%,
-              rgba(4, 120, 87, 0.85) 100%
-            )`;
-            button.style.boxShadow = `
-              0 6px 24px rgba(16, 185, 129, 0.25),
-              0 0 0 1px rgba(255, 255, 255, 0.05),
-              inset 0 1px 0 rgba(255, 255, 255, 0.1)
-            `;
-          }
-
-          button.addEventListener('click', () => {
-            if (special === 'center') {
-              // Center the view (reset translation)
-              this.zoomState.translateX = 0;
-              this.zoomState.translateY = 0;
-            } else {
-              // Pan in the specified direction
-              this.zoomState.translateX += dx;
-              this.zoomState.translateY += dy;
-            }
-            this.updateConstellationTransform();
-          });
-
-          // Add hover effects
-          button.addEventListener('mouseenter', () => {
-            button.style.transform = 'scale(1.05)';
-            if (special === 'center') {
-              button.style.boxShadow = `
-                0 8px 32px rgba(16, 185, 129, 0.4),
-                0 0 0 1px rgba(255, 255, 255, 0.1),
-                inset 0 1px 0 rgba(255, 255, 255, 0.2)
-              `;
-            } else {
-              button.style.boxShadow = `
-                0 8px 32px rgba(139, 92, 246, 0.4),
-                0 0 0 1px rgba(255, 255, 255, 0.1),
-                inset 0 1px 0 rgba(255, 255, 255, 0.2)
-              `;
-            }
-          });
-
-          button.addEventListener('mouseleave', () => {
-            button.style.transform = 'scale(1)';
-            if (special === 'center') {
-              button.style.boxShadow = `
-                0 6px 24px rgba(16, 185, 129, 0.25),
-                0 0 0 1px rgba(255, 255, 255, 0.05),
-                inset 0 1px 0 rgba(255, 255, 255, 0.1)
-              `;
-            } else {
-              button.style.boxShadow = `
-                0 6px 24px rgba(139, 92, 246, 0.25),
-                0 0 0 1px rgba(255, 255, 255, 0.05),
-                inset 0 1px 0 rgba(255, 255, 255, 0.1)
-              `;
-            }
-          });
-
-          // Add click effect
-          button.addEventListener('mousedown', () => {
-            button.style.transform = 'scale(0.95)';
-          });
-
-          button.addEventListener('mouseup', () => {
-            button.style.transform = 'scale(1.05)';
-          });
-
-          panControls.appendChild(button);
-        });
-
-        document.body.appendChild(panControls);
-
-        console.log('🧭 PAN: Added dementia-friendly navigation controls');
-      }
-
-      // 🔍 FIT ALL MEMORIES IN VIEW
-      fitAllMemories() {
-        if (!this.nodes || this.nodes.length === 0) {
-          // Reset to center if no nodes
-          this.zoomState.scale = 1;
-          this.zoomState.translateX = 0;
-          this.zoomState.translateY = 0;
-          this.updateConstellationTransform();
-          return;
-        }
-
-        // Find bounding box of all nodes
-        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
-        
-        this.nodes.forEach(node => {
-          if (node.x !== undefined && node.y !== undefined) {
-            minX = Math.min(minX, node.x - 50); // Add padding
-            minY = Math.min(minY, node.y - 50);
-            maxX = Math.max(maxX, node.x + 50);
-            maxY = Math.max(maxY, node.y + 50);
-          }
-        });
-
-        if (minX === Infinity) {
-          // No valid positions, just center
-          this.zoomState.scale = 1;
-          this.zoomState.translateX = 0;
-          this.zoomState.translateY = 0;
-          this.updateConstellationTransform();
-          return;
-        }
-
-        // Calculate optimal scale and position
-        const contentWidth = maxX - minX;
-        const contentHeight = maxY - minY;
-        const viewportWidth = window.innerWidth;
-        const viewportHeight = window.innerHeight;
-
-        const scaleX = (viewportWidth * 0.8) / contentWidth;
-        const scaleY = (viewportHeight * 0.8) / contentHeight;
-        const optimalScale = Math.min(scaleX, scaleY, this.zoomState.maxScale);
-        const finalScale = Math.max(optimalScale, this.zoomState.minScale);
-
-        // Center the content
-        const contentCenterX = (minX + maxX) / 2;
-        const contentCenterY = (minY + maxY) / 2;
-        
-        this.zoomState.scale = finalScale;
-        this.zoomState.translateX = viewportWidth / 2 - contentCenterX * finalScale;
-        this.zoomState.translateY = viewportHeight / 2 - contentCenterY * finalScale;
-
-        this.updateConstellationTransform();
-        
-        console.log('🏠 ZOOM: Fitted all memories in view for Debbe');
-      }
-
-      // Removed fadeOutMemoryNodes and fadeInMemoryNodes - no longer needed since constellation mode exits to main dashboard
-
-      // Completely clear all memory nodes from DOM (prevents duplicates)
-      clearAllMemoryNodesFromDOM() {
-
-        // Remove all memory-node, person-node, and create-memory-node elements (including orphaned ones)
-        const existingMemoryNodes = document.querySelectorAll('.memory-node, .create-memory-node, .person-node');
-        existingMemoryNodes.forEach(node => {
-
-          node.remove();
-        });
-
-        // Clear ONLY memory nodes from the nodes array (preserve radial menu items)
-        if (this.nodes) {
-          this.nodes.forEach(node => {
-            if (node.element && node.element.parentNode) {
-              // Only remove if it's a constellation node, NOT a radial menu item
-              if (node.element.classList.contains('memory-node') ||
-                  node.element.classList.contains('create-memory-node') ||
-                  node.element.classList.contains('person-node')) {
-
-                node.element.remove();
-              } else {
-
-              }
-            }
-          });
-          // Filter out only the constellation nodes, keep radial items
-          this.nodes = this.nodes.filter(node =>
-            !node.element.classList.contains('memory-node') &&
-            !node.element.classList.contains('create-memory-node') &&
-            !node.element.classList.contains('person-node')
-          );
-        }
-
-        // Reset central node
-        this.centralNode = null;
-
-      }
-
-      // Exit constellation mode
-      exitMemoryConstellation() {
-        console.log('🌌 exitMemoryConstellation called - Current state:', {
-          isConstellationMode: this.isConstellationMode,
-          isMenuOpen: this.isMenuOpen,
-          orbExists: !!this.orb,
-          radialMenuExists: !!this.radialMenu
-        });
-
-        this.isConstellationMode = false;
-
-        // PERSISTENCE: Clear constellation state
-        localStorage.removeItem('emmaConstellationActive');
-
-        // Stop neural animation (EXACT same as main menu)
-        this.isMenuOpen = false;
-        if (this.neuralAnimationId) {
-          cancelAnimationFrame(this.neuralAnimationId);
-          this.neuralCtx.clearRect(0, 0, this.neuralCanvas.width, this.neuralCanvas.height);
-        }
-
-        // 🔍 RESET ZOOM STATE: Reset neural canvas transform and clean up
-        if (this.neuralCanvas) {
-          this.neuralCanvas.style.transform = '';
-          this.neuralCanvas.style.transformOrigin = '';
-        }
-        
-        // Remove constellation container  
-        const constellationContainer = document.getElementById('constellation-zoom-container');
-        if (constellationContainer) {
-          constellationContainer.remove();
-        }
-        
-        // Reset zoom state
-        this.zoomState.scale = 1;
-        this.zoomState.translateX = 0;
-        this.zoomState.translateY = 0;
-        this.constellationContainer = null;
-
-        // Remove constellation-active class to restore UI
-        document.body.classList.remove('constellation-active');
-        document.body.classList.remove('menu-active');
-        this.radialMenu.classList.remove('active');
-
-        // Restore central orb size
-        this.restoreCentralOrb();
-
-        // Remove constellation UI
-        if (this.constellationUI) {
-          this.constellationUI.remove();
-          this.constellationUI = null;
-        }
-
-        // CRITICAL: Use thorough DOM cleanup to prevent duplicates
-        this.clearAllMemoryNodesFromDOM();
-
-        // Clear animation
-        if (this.neuralAnimationId) {
-          cancelAnimationFrame(this.neuralAnimationId);
-          this.neuralCtx.clearRect(0, 0, this.neuralCanvas.width, this.neuralCanvas.height);
-        }
-
-        // Reset nodes
-        this.nodes = [];
-
-        // Hide radial menu
-        this.radialMenu.classList.remove('active');
-        this.isMenuOpen = false;
-
-        // Reset radial menu items to default state
-        const radialItems = this.radialMenu.querySelectorAll('.radial-item');
-
-        radialItems.forEach((item, i) => {
-          item.style.opacity = '0';
-          item.style.transform = 'scale(0)';
-          // CRITICAL: Reset positioning to default
-          item.style.left = '';
-          item.style.top = '';
-          item.style.animationPlayState = 'running';
-        });
-        
-        console.log('🌌 exitMemoryConstellation complete - Final state:', {
-          isConstellationMode: this.isConstellationMode,
-          isMenuOpen: this.isMenuOpen,
-          radialMenuClasses: this.radialMenu?.className,
-          bodyClasses: document.body.className
-        });
-      }
-
-      // Sanitize title to remove base64 or corrupted data
-      sanitizeTitle(title) {
-        if (!title || typeof title !== 'string') return 'Untitled Memory';
-
-        // Check if it looks like base64 or corrupted data
-        if (title.length > 50 || /^[A-Za-z0-9+\/=]{20,}$/.test(title)) {
-          return 'Memory Capsule';
-        }
-
-        // Remove any non-printable characters and limit length
-        const cleaned = title.replace(/[^\x20-\x7E]/g, '').trim();
-        return cleaned.length > 0 ? cleaned.substring(0, 50) : 'Untitled Memory';
-      }
-
-      // 📱💻🖥️ RESPONSIVE MEMORY DIALOG - Works on ALL screen sizes!
-      async openMemoryDialog(memory) {
-        console.log('🎯 DASHBOARD: Opening responsive memory dialog for:', memory.title || memory.id);
-        
-        // 🚀 CRITICAL FIX: Load full media if lazy-loaded (from performance optimization)
-        const memoryWithFullMedia = await this.loadFullMediaForMemory(memory);
-        
-        // 📱💻🖥️ USE THE NEW RESPONSIVE MEMORY DIALOG!
-        this.showResponsiveMemoryDialog(memoryWithFullMedia);
-      }
-
-      /**
-       * 🚀 PERFORMANCE OPTIMIZATION: Load full media data on-demand for lazy-loaded attachments
-       * (Reused from memories.js constellation)
-       */
-      async loadFullMediaForMemory(memory) {
-        // Check if this memory has lazy-loaded attachments that need full loading
-        const hasLazyAttachments = memory.attachments?.some(att => att.isLazyLoaded && att.hasMedia);
-        
-        if (!hasLazyAttachments) {
-          console.log('💾 DASHBOARD: Memory already has full media, no loading needed');
-          return memory;
-        }
-        
-        console.log('🚀 DASHBOARD: Loading full media for', memory.attachments?.length || 0, 'attachments');
-        
-        try {
-          // Get vault media data
-          const vaultMedia = window.emmaWebVault?.vaultData?.content?.media || {};
-          
-          // Load full media data for lazy-loaded attachments
-          const fullAttachments = memory.attachments.map(attachment => {
-            if (attachment.isLazyLoaded && attachment.hasMedia && attachment.mediaId) {
-              const mediaItem = vaultMedia[attachment.mediaId];
-              if (mediaItem && mediaItem.data) {
-                console.log('💾 DASHBOARD: Loading full media for:', attachment.name);
-                return {
-                  ...attachment,
-                  url: mediaItem.data.startsWith('data:')
-                    ? mediaItem.data
-                    : `data:${mediaItem.type};base64,${mediaItem.data}`,
-                  dataUrl: mediaItem.data.startsWith('data:')
-                    ? mediaItem.data
-                    : `data:${mediaItem.type};base64,${mediaItem.data}`,
-                  data: mediaItem.data,
-                  isLazyLoaded: false, // Mark as fully loaded
-                  isPersisted: true
-                };
-              }
-            }
-            
-            // Return attachment as-is if already loaded or no media
-            return attachment;
-          });
-          
-          console.log('✅ DASHBOARD: Successfully loaded full media data');
-          
-          return {
-            ...memory,
-            attachments: fullAttachments
-          };
-          
-        } catch (error) {
-          console.error('❌ DASHBOARD: Failed to load full media:', error);
-          // Return original memory if loading fails
-          return memory;
-        }
-      }
-
-      /**
-       * 📱💻🖥️ RESPONSIVE MEMORY DIALOG - Works on ALL screen sizes!
-       */
-      showResponsiveMemoryDialog(memory) {
-        // Prepare memory data  
-        const hasImages = memory.attachments?.some(att => att.type?.startsWith('image/')) || 
-                         memory.mediaItems?.some(item => item.type?.startsWith('image/'));
-        const hasVideo = memory.attachments?.some(att => att.type?.startsWith('video/')) || 
-                        memory.mediaItems?.some(item => item.type?.startsWith('video/'));
-        const peopleList = memory.metadata?.people || memory.people || [];
-        
-        // Create fully responsive dialog for ALL screen sizes
-        const dialog = document.createElement('div');
-        dialog.className = 'memory-preview-dialog responsive dashboard';
-        dialog.style.cssText = `
-          position: fixed !important;
-          top: 0 !important;
-          left: 0 !important;
-          width: 100% !important;
-          height: 100% !important;
-          z-index: 10000 !important;
-          display: flex !important;
-          align-items: flex-start !important;
-          justify-content: center !important;
-          opacity: 0;
-          animation: dialogFadeIn 0.3s ease forwards;
-          background: rgba(0, 0, 0, 0.6) !important;
-          backdrop-filter: blur(25px) saturate(180%) !important;
-          padding: 20px;
-          overflow-y: auto !important;
-          box-sizing: border-box;
-          pointer-events: auto !important;
-        `;
-
-        dialog.innerHTML = `
-          <style>
-            /* 🎯 RESPONSIVE DIALOG STYLES FOR ALL SCREEN SIZES */
-            @keyframes dialogFadeIn {
-              from { opacity: 0; transform: scale(0.95); }
-              to { opacity: 1; transform: scale(1); }
-            }
-            
-            .responsive-memory-container {
-              /* 🎨 EMMA GLASSMORPHISM: Match chat interface aesthetic */
-              background: rgba(26, 16, 51, 0.92);
-              backdrop-filter: blur(25px) saturate(150%);
-              border-radius: clamp(16px, 3vw, 24px);
-              max-width: 95vw;
-              max-height: 95vh;
-              width: 100%;
-              overflow-y: auto;
-              position: relative;
-              animation: dialogFadeIn 0.3s ease forwards;
-              border: 1px solid rgba(255, 255, 255, 0.12);
-              box-shadow: 
-                0 25px 80px rgba(0, 0, 0, 0.4),
-                0 0 0 1px rgba(255, 255, 255, 0.08),
-                inset 0 1px 0 rgba(255, 255, 255, 0.12);
-            }
-            
-            /* 📱 MOBILE FIRST (320px+) */
-            .responsive-memory-container {
-              margin: 10px;
-              padding: 20px;
-            }
-            
-            /* 📱 TABLET (768px+) */
-            @media (min-width: 768px) {
-              .responsive-memory-container {
-                margin: 20px;
-                padding: 30px;
-                max-width: 700px;
-              }
-            }
-            
-            /* 💻 LAPTOP (1024px+) */
-            @media (min-width: 1024px) {
-              .responsive-memory-container {
-                margin: 40px;
-                padding: 40px;
-                max-width: 900px;
-              }
-            }
-            
-            /* 🖥️ DESKTOP (1440px+) */
-            @media (min-width: 1440px) {
-              .responsive-memory-container {
-                max-width: 1100px;
-                padding: 50px;
-              }
-            }
-            
-            /* HEADER STYLES */
-            .memory-header {
-              display: flex;
-              justify-content: space-between;
-              align-items: flex-start;
-              margin-bottom: clamp(20px, 4vw, 30px);
-              flex-wrap: wrap;
-              gap: 15px;
-            }
-            
-            .header-info h2 {
-              margin: 0;
-              color: white;
-              font-size: clamp(20px, 4vw, 28px);
-              font-weight: 700;
-              line-height: 1.2;
-              text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
-            }
-            
-            .memory-date {
-              color: rgba(255, 255, 255, 0.8);
-              font-size: clamp(14px, 2.5vw, 16px);
-              margin-top: 5px;
-            }
-            
-            .close-btn {
-              background: rgba(255, 255, 255, 0.15);
-              border: none;
-              color: white;
-              width: clamp(40px, 6vw, 48px);
-              height: clamp(40px, 6vw, 48px);
-              border-radius: 50%;
-              cursor: pointer;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-              transition: all 0.3s ease;
-              backdrop-filter: blur(10px);
-              flex-shrink: 0;
-            }
-            
-            .close-btn:hover {
-              background: rgba(255, 255, 255, 0.25);
-              transform: scale(1.1);
-            }
-            
-            /* HERO CAROUSEL STYLES */
-            .hero-carousel {
-              margin-bottom: clamp(25px, 5vw, 35px);
-              border-radius: clamp(12px, 2.5vw, 16px);
-            overflow: hidden;
-            position: relative;
-              aspect-ratio: 16/9;
-              background: rgba(0, 0, 0, 0.3);
-            }
-            
-            .carousel-container {
-              position: relative;
-              width: 100%;
-              height: 100%;
-            }
-            
-            .hero-image {
-                position: absolute;
-                top: 0;
-                left: 0;
-              width: 100%;
-              height: 100%;
-              background-size: cover;
-              background-position: center;
-              opacity: 0;
-              transition: opacity 0.5s ease;
-            }
-            
-            .hero-image.active {
-              opacity: 1;
-            }
-            
-            .image-overlay {
-              position: absolute;
-                bottom: 0;
-              left: 0;
-              right: 0;
-              height: 50%;
-              background: linear-gradient(transparent, rgba(0, 0, 0, 0.4));
-            }
-            
-            .carousel-dots {
-              position: absolute;
-              bottom: 15px;
-              left: 50%;
-              transform: translateX(-50%);
-                    display: flex;
-              gap: 8px;
-            }
-            
-            .dot {
-              width: 10px;
-              height: 10px;
-              border-radius: 50%;
-              background: rgba(255, 255, 255, 0.5);
-              cursor: pointer;
-              transition: all 0.3s ease;
-            }
-            
-            .dot.active {
-              background: white;
-              transform: scale(1.2);
-            }
-            
-            /* PEOPLE SECTION */
-            .people-section {
-              margin-bottom: clamp(25px, 5vw, 35px);
-            }
-            
-            .section-title {
-              color: white;
-              font-size: clamp(16px, 3vw, 20px);
-              font-weight: 600;
-              margin: 0 0 clamp(15px, 3vw, 20px) 0;
-              text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
-            }
-            
-            .people-grid {
-              display: grid;
-              grid-template-columns: repeat(auto-fill, minmax(clamp(80px, 15vw, 120px), 1fr));
-              gap: clamp(12px, 3vw, 20px);
-              justify-items: center;
-            }
-            
-            .memory-person-avatar {
-              width: clamp(70px, 12vw, 100px);
-              height: clamp(70px, 12vw, 100px);
-                                border-radius: 50%;
-              border: 3px solid rgba(255, 255, 255, 0.9);
-                                overflow: hidden;
-              position: relative;
-              background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
-                            display: flex;
-                            flex-direction: column;
-                              align-items: center;
-                              justify-content: center;
-              font-size: clamp(12px, 2.5vw, 16px);
-                              font-weight: 600;
-              color: white;
-                    transition: all 0.3s ease;
-              cursor: pointer;
-              text-align: center;
-              box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
-            }
-            
-            .memory-person-avatar:hover {
-              transform: scale(1.05);
-              border-color: white;
-              box-shadow: 0 6px 20px rgba(139, 92, 246, 0.5);
-            }
-            
-            .memory-person-avatar img {
-              width: 100%;
-              height: 100%;
-              object-fit: cover;
-            }
-            
-            /* CONTENT SECTION */
-            .content-section {
-              margin-bottom: clamp(25px, 5vw, 35px);
-            }
-            
-            .memory-story p {
-              color: white;
-              font-size: clamp(16px, 3vw, 18px);
-                line-height: 1.6;
-              margin: 0 0 clamp(15px, 3vw, 20px) 0;
-              text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-            }
-            
-            .memory-tags {
-                      display: flex;
-                      align-items: center;
-              gap: clamp(10px, 2vw, 15px);
-              margin-bottom: clamp(10px, 2vw, 15px);
-              flex-wrap: wrap;
-            }
-            
-            .tag-label {
-              font-size: clamp(16px, 3vw, 18px);
-              flex-shrink: 0;
-            }
-            
-            .emotions-list {
-                    display: flex;
-              gap: clamp(6px, 1.5vw, 10px);
-              flex-wrap: wrap;
-            }
-            
-            .emotion-tag, .location-tag {
-              background: rgba(255, 255, 255, 0.15);
-              color: white;
-              padding: clamp(4px, 1vw, 6px) clamp(8px, 2vw, 12px);
-              border-radius: clamp(12px, 2vw, 16px);
-              font-size: clamp(12px, 2.5vw, 14px);
-                      font-weight: 500;
-              border: 1px solid rgba(255, 255, 255, 0.2);
-              backdrop-filter: blur(10px);
-            }
-            
-            /* MEDIA SECTION */
-            .media-section {
-              margin-bottom: clamp(25px, 5vw, 35px);
-            }
-            
-            .media-grid {
-                    display: grid;
-              grid-template-columns: repeat(auto-fill, minmax(clamp(120px, 25vw, 200px), 1fr));
-              gap: clamp(10px, 2vw, 15px);
-            }
-            
-            .media-item {
-              aspect-ratio: 1;
-              border-radius: clamp(8px, 2vw, 12px);
-                          overflow: hidden;
-              background: rgba(255, 255, 255, 0.1);
-                          position: relative;
-              transition: transform 0.3s ease;
-            }
-            
-            .media-item:hover {
-              transform: scale(1.05);
-            }
-            
-            .media-item img, .media-item video {
-                              width: 100%;
-                              height: 100%;
-              object-fit: cover;
-            }
-            
-            .video-play-overlay {
-                                position: absolute;
-              top: 50%;
-              left: 50%;
-              transform: translate(-50%, -50%);
-              font-size: clamp(20px, 4vw, 30px);
-              color: white;
-              text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
-            }
-            
-            /* ACTION BUTTONS */
-            .action-buttons {
-              display: flex;
-              gap: clamp(12px, 3vw, 20px);
-              margin-top: clamp(30px, 5vw, 40px);
-              flex-wrap: wrap;
-            }
-            
-            .action-btn {
-              flex: 1;
-              min-width: clamp(120px, 25vw, 150px);
-              padding: clamp(12px, 2.5vw, 16px) clamp(20px, 4vw, 30px);
-              border: none;
-              border-radius: clamp(10px, 2vw, 14px);
-              font-size: clamp(14px, 2.5vw, 16px);
-              font-weight: 600;
-              cursor: pointer;
-              transition: all 0.3s ease;
-                                display: flex;
-                                align-items: center;
-                                justify-content: center;
-              gap: clamp(6px, 1.5vw, 8px);
-              text-decoration: none;
-              box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-            }
-            
-            .action-btn.primary {
-              background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
-              color: #8b5cf6;
-              border: 2px solid rgba(255, 255, 255, 0.3);
-            }
-            
-            .action-btn.primary:hover {
-              transform: translateY(-2px);
-              box-shadow: 0 6px 20px rgba(255, 255, 255, 0.3);
-            }
-            
-            .action-btn.secondary {
-              background: rgba(255, 255, 255, 0.15);
-              color: white;
-              border: 2px solid rgba(255, 255, 255, 0.3);
-                                  backdrop-filter: blur(10px);
-            }
-            
-            .action-btn.secondary:hover {
-              background: rgba(255, 255, 255, 0.25);
-              transform: translateY(-2px);
-            }
-          </style>
-          
-          <div class="responsive-memory-container">
-            <!-- HEADER -->
-            <div class="memory-header">
-              <div class="header-info">
-                <h2>${memory.metadata?.title || memory.title || memory.subject || 'Beautiful Memory'}</h2>
-                <div class="memory-date">${this.formatMemoryDate(memory.created || memory.date || memory.timestamp)}</div>
-              </div>
-              <button class="close-btn" onclick="window.emmaDashboard.closeMemoryDialog()">
-                <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
-                  <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-                </svg>
-              </button>
-                              </div>
-
-            <!-- HERO CAROUSEL -->
-            ${hasImages ? `
-              <div class="hero-carousel">
-                <div class="carousel-container">
-                  ${(memory.attachments || memory.mediaItems || [])
-                    .filter(att => att.type?.startsWith('image/'))
-                    .slice(0, 5)
-                    .map((image, index) => {
-                      const imageUrl = image.url || image.dataUrl || image.data || image.previewUrl;
-                      
-                      // 🔧 FIX: Use img tag instead of background-image for better compatibility
-                      return `
-                        <div class="hero-image ${index === 0 ? 'active' : ''}">
-                          <img src="${imageUrl}" alt="${image.name || 'Memory image'}" style="
-                            width: 100%;
-                            height: 100%;
-                            object-fit: cover;
-                            border-radius: 12px;
-                          " />
-                          <div class="image-overlay"></div>
-                        </div>
-                      `;
-                    }).join('')}
-                </div>
-                ${(memory.attachments || memory.mediaItems || []).filter(att => att.type?.startsWith('image/')).length > 1 ? `
-                  <div class="carousel-dots">
-                    ${(memory.attachments || memory.mediaItems || [])
-                      .filter(att => att.type?.startsWith('image/'))
-                      .slice(0, 5)
-                      .map((_, index) => `
-                        <div class="dot ${index === 0 ? 'active' : ''}" onclick="window.emmaDashboard.switchDashboardCarouselImage(${index})"></div>
-                      `).join('')}
-                        </div>
-                ` : ''}
-              </div>
-            ` : ''}
-            
-            <!-- PEOPLE SECTION -->
-            ${peopleList.length > 0 ? `
-              <div class="people-section">
-                <h3 class="section-title">👥 People in this memory</h3>
-                <div class="people-grid" id="people-grid-${memory.id}">
-                  <!-- People avatars will be loaded here -->
-                  </div>
-                </div>
-              ` : ''}
-
-            <!-- CONTENT -->
-            <div class="content-section">
-              <div class="memory-story">
-                <p>${memory.content || memory.description || memory.details || 'This precious memory is stored in your vault...'}</p>
-            </div>
-
-              ${memory.metadata?.emotions?.length > 0 ? `
-                <div class="memory-tags">
-                  <span class="tag-label">💭</span>
-                  <div class="emotions-list">
-                    ${memory.metadata.emotions.map(emotion => `
-                      <span class="emotion-tag">${emotion}</span>
-                    `).join('')}
-                  </div>
-                </div>
-              ` : ''}
-
-              ${memory.metadata?.location || memory.location ? `
-                <div class="memory-tags">
-                  <span class="tag-label">📍</span>
-                  <span class="location-tag">${memory.metadata?.location || memory.location}</span>
-                </div>
-              ` : ''}
-            </div>
-
-            <!-- MEDIA GRID -->
-            ${(memory.attachments?.length > 1 || memory.mediaItems?.length > 1) || hasVideo ? `
-              <div class="media-section">
-                <h3 class="section-title">📷 All Media (${(memory.attachments || memory.mediaItems || []).length})</h3>
-                <div class="media-grid">
-                  ${(memory.attachments || memory.mediaItems || []).map((attachment, index) => `
-                    <div class="media-item ${attachment.type?.startsWith('image/') ? 'image' : attachment.type?.startsWith('video/') ? 'video' : 'file'}">
-                      ${attachment.type?.startsWith('image/') ? `
-                        <img src="${attachment.url || attachment.dataUrl || attachment.data || attachment.previewUrl}" alt="${attachment.name}" />
-                      ` : attachment.type?.startsWith('video/') ? `
-                        <video src="${attachment.dataUrl || attachment.url}" muted>
-                        <div class="video-play-overlay">▶️</div>
-                        </video>
-                      ` : `
-                        <div class="file-item">
-                          <div class="file-icon">${attachment.type?.startsWith('audio/') ? '🎵' : '📄'}</div>
-                          <div class="file-name">${attachment.name}</div>
-                        </div>
-                      `}
-                    </div>
-                  `).join('')}
-                </div>
-              </div>
-            ` : ''}
-            
-            <!-- ACTION BUTTONS -->
-            <div class="action-buttons">
-              <button class="action-btn secondary" onclick="window.emmaDashboard.editDashboardMemory('${memory.id}')">
-                ✏️ Edit Memory
-              </button>
-              <button class="action-btn primary" onclick="window.emmaDashboard.shareDashboardMemory('${memory.id}')">
-                🔗 Share Memory
-              </button>
-            </div>
-          </div>
-        `;
-
-        dialog.addEventListener('click', (e) => {
-          if (e.target === dialog) {
-            dialog.remove();
-          }
-        });
-
-        document.body.appendChild(dialog);
-        this.currentMemoryDialog = dialog;
-
-        // Animate in
-        setTimeout(() => {
-          dialog.style.opacity = '1';
-          // Load people avatars if needed
-          this.loadDashboardPeopleAvatars(memory);
-        }, 100);
-      }
-
-      /**
-       * 📅 Format memory date for display
-       */
-      formatMemoryDate(timestamp) {
-        if (!timestamp) return 'Unknown date';
-        
-        try {
-          const date = new Date(timestamp);
-          return date.toLocaleDateString('en-US', {
-            weekday: 'long',
-            year: 'numeric', 
-            month: 'long',
-            day: 'numeric'
-          });
-        } catch (error) {
-          console.warn('Error formatting date:', error);
-          return 'Unknown date';
-        }
-      }
-
-      /**
-       * 🎠 Switch carousel image in dashboard dialog
-       */
-      switchDashboardCarouselImage(index) {
-        const heroImages = document.querySelectorAll('.hero-image');
-        const dots = document.querySelectorAll('.dot');
-        
-        heroImages.forEach((img, i) => {
-          img.classList.toggle('active', i === index);
-        });
-        
-        dots.forEach((dot, i) => {
-          dot.classList.toggle('active', i === index);
-        });
-      }
-
-      /**
-       * 👥 Load people avatars for dashboard memory dialog
-       */
-      async loadDashboardPeopleAvatars(memory) {
-        const peopleGrid = document.getElementById(`people-grid-${memory.id}`);
-        if (!peopleGrid) return;
-
-        const peopleList = memory.metadata?.people || memory.people || [];
-        if (peopleList.length === 0) return;
-
-        try {
-          // Get vault data for people info
-          let vaultData = null;
-          if (window.emmaWebVault && window.emmaWebVault.vaultData) {
-            vaultData = window.emmaWebVault.vaultData;
-          }
-
-          if (!vaultData?.content?.people) {
-            console.warn('⚠️ No vault people data available');
-            return;
-          }
-
-          const vaultPeople = vaultData.content.people;
-          const vaultMedia = vaultData.content.media || {};
-
-          // Create avatar elements for each person
-          peopleList.forEach(personId => {
-            const person = vaultPeople[personId];
-            if (!person) return;
-
-            // Resolve avatar URL
-            let avatarUrl = person.avatarUrl;
-            if (!avatarUrl && person.avatarId && vaultMedia[person.avatarId]) {
-              const mediaItem = vaultMedia[person.avatarId];
-              avatarUrl = mediaItem.data?.startsWith('data:') 
-                ? mediaItem.data 
-                : `data:${mediaItem.type};base64,${mediaItem.data}`;
-            }
-
-            const firstName = (person.name || 'Unknown').split(' ')[0];
-            const initials = firstName.charAt(0).toUpperCase();
-
-            const avatarElement = document.createElement('div');
-            avatarElement.className = 'memory-person-avatar';
-            avatarElement.onclick = () => this.openPersonDialog(personId);
-
-            if (avatarUrl) {
-              const img = document.createElement('img');
-              img.src = avatarUrl;
-              img.alt = person.name;
-              img.onerror = () => {
-                // Fallback to initials if image fails
-                avatarElement.innerHTML = `<span>${initials}</span>`;
-              };
-              avatarElement.appendChild(img);
-            } else {
-              avatarElement.innerHTML = `<span>${initials}</span>`;
-            }
-
-            // Add name label below avatar
-            const nameLabel = document.createElement('div');
-            nameLabel.style.cssText = `
-              color: white;
-              font-size: clamp(12px, 2vw, 14px);
-              font-weight: 500;
-              margin-top: 8px;
-              text-align: center;
-            `;
-            nameLabel.textContent = firstName;
-
-            const avatarContainer = document.createElement('div');
-            avatarContainer.appendChild(avatarElement);
-            avatarContainer.appendChild(nameLabel);
-
-            peopleGrid.appendChild(avatarContainer);
-          });
-
-        } catch (error) {
-          console.error('❌ Error loading dashboard people avatars:', error);
-        }
-      }
-
-      /**
-       * ✏️ Edit memory from dashboard dialog - DIRECT APPROACH
-       */
-      editDashboardMemory(memoryId) {
-        // Close current dialog
-        this.closeMemoryDialog();
-        
-        // Simple approach: Create temporary instance JUST for the edit dialog
-        if (typeof EmmaChatExperience !== 'undefined') {
-          const tempChatExperience = new EmmaChatExperience();
-          tempChatExperience.editMemoryDetails(memoryId);
-        } else {
-          console.error('❌ EmmaChatExperience not available');
-        }
-      }
-
-      /**
-       * 🔗 Share memory from dashboard dialog
-       */
-      shareDashboardMemory(memoryId) {
-        const shareUrl = `${window.location.origin}/index.html?memory=${memoryId}`;
-        
-        if (navigator.share && navigator.canShare && navigator.canShare({ url: shareUrl })) {
-          navigator.share({
-            title: 'Emma Memory',
-            text: 'Check out this memory from Emma',
-            url: shareUrl
-          }).catch(err => {
-            console.log('Share cancelled:', err);
-            // Fallback to copy
-            this.copyToClipboard(shareUrl);
-          });
-        } else {
-          // Fallback to copy to clipboard
-          this.copyToClipboard(shareUrl);
-        }
-      }
-
-      /**
-       * 📋 Copy text to clipboard utility
-       */
-      copyToClipboard(text) {
-        if (navigator.clipboard && window.isSecureContext) {
-          navigator.clipboard.writeText(text).then(() => {
-            this.showToast('🔗 Memory link copied to clipboard!', 'success');
-          }).catch(err => {
-            console.error('Failed to copy:', err);
-            this.fallbackCopyToClipboard(text);
-          });
-        } else {
-          this.fallbackCopyToClipboard(text);
-        }
-      }
-
-      /**
-       * 📋 Fallback copy method for older browsers
-       */
-      fallbackCopyToClipboard(text) {
-        const textArea = document.createElement('textarea');
-        textArea.value = text;
-        textArea.style.position = 'fixed';
-        textArea.style.left = '-999999px';
-        textArea.style.top = '-999999px';
-        document.body.appendChild(textArea);
-        textArea.focus();
-        textArea.select();
-        
-        try {
-          document.execCommand('copy');
-          this.showToast('🔗 Memory link copied to clipboard!', 'success');
-        } catch (err) {
-          console.error('Fallback copy failed:', err);
-          this.showToast('❌ Failed to copy link', 'error');
-        }
-        
-        document.body.removeChild(textArea);
-      }
-
-      /**
-       * 🍞 Show toast notification
-       */
-      showToast(message, type = 'info') {
-        // Create toast element
-        const toast = document.createElement('div');
-        toast.style.cssText = `
-          position: fixed;
-          top: 20px;
-          right: 20px;
-          background: ${type === 'success' ? 'linear-gradient(135deg, #10b981, #059669)' : 
-                      type === 'error' ? 'linear-gradient(135deg, #ef4444, #dc2626)' : 
-                      'linear-gradient(135deg, #8b5cf6, #7c3aed)'};
-          color: white;
-          padding: 16px 24px;
-          border-radius: 12px;
-          font-size: 14px;
-          font-weight: 500;
-          z-index: 20000;
-          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
-          backdrop-filter: blur(10px);
-          border: 1px solid rgba(255, 255, 255, 0.2);
-          opacity: 0;
-          transform: translateX(100%);
-          transition: all 0.3s ease;
-        `;
-        toast.textContent = message;
-        
-        document.body.appendChild(toast);
-        
-        // Animate in
-        setTimeout(() => {
-          toast.style.opacity = '1';
-          toast.style.transform = 'translateX(0)';
-        }, 100);
-        
-        // Remove after 3 seconds
-        setTimeout(() => {
-          toast.style.opacity = '0';
-          toast.style.transform = 'translateX(100%)';
-          setTimeout(() => {
-            if (toast.parentNode) {
-              toast.parentNode.removeChild(toast);
-            }
-          }, 300);
-        }, 3000);
-      }
-
-      // Close memory dialog
-      closeMemoryDialog() {
-        if (this.currentMemoryDialog) {
-          this.currentMemoryDialog.style.opacity = '0';
-          setTimeout(() => {
-            if (this.currentMemoryDialog) {
-              this.currentMemoryDialog.remove();
-              this.currentMemoryDialog = null;
-            }
-          }, 300);
-        }
-      }
-
-      // Open person dialog from memory
-      openPersonDialog(personId) {
-
-        // Navigate to people page with person selected
-        window.location.href = `pages/people-emma.html?person=${personId}`;
-      }
-
-      // Memory dialog slideshow controls
-      prevSlide() {
-
-        // Demo functionality - would implement real slideshow
-      }
-
-      nextSlide() {
-
-        // Demo functionality - would implement real slideshow
-      }
-
-      shareMemory(memoryId) {
-
-        this.showToast('📤 Memory shared!', 'success');
-      }
-
-      editMemory(memoryId) {
-
-        this.showToast('✏️ Opening memory editor...', 'info');
-      }
-
-      // Filter constellation by theme
-      filterByTheme(theme) {
-
-        this.nodes.forEach(node => {
-          if (node.theme === theme) {
-            node.element.style.opacity = '1';
-            node.element.style.transform = 'scale(1)';
-          } else {
-            node.element.style.opacity = '0.3';
-            node.element.style.transform = 'scale(0.8)';
-          }
-        });
-      }
-
-      showToast(message, type = 'info') {
-        const toast = document.createElement('div');
-        toast.className = `toast ${type}`;
-        const span = document.createElement('span');
-        span.textContent = message; // Safe - prevents HTML injection
-        toast.appendChild(span);
-        document.body.appendChild(toast);
-
-        setTimeout(() => toast.classList.add('show'), 10);
-
-        setTimeout(() => {
-          toast.classList.remove('show');
-          setTimeout(() => toast.remove(), 400);
-        }, 3000);
-      }
-    }
-
-    // Initialize dashboard
-    document.addEventListener('DOMContentLoaded', () => {
-      // Small delay to ensure all elements are definitely available
-      setTimeout(() => {
-        console.log('🔍 DEBUG: Creating EmmaDashboard instance...');
-        
-        // CRITICAL FIX: Only create if not already exists
-        if (!window.emmaDashboard) {
-          window.emmaDashboard = new EmmaDashboard();
-          console.log('✅ EmmaDashboard created successfully');
-        } else {
-          console.log('✅ EmmaDashboard already exists, skipping duplicate creation');
-        }
-
-        // Setup vault modal event listeners AFTER dashboard is created
-      const dashboard = window.emmaDashboard;
-
-      // Close button
-      document.getElementById('close-vault-modal').addEventListener('click', () => {
-        dashboard.closeVaultModal();
-      });
-
-      // Click outside to close
-      document.getElementById('vault-modal').addEventListener('click', (e) => {
-        if (e.target.id === 'vault-modal') {
-          dashboard.closeVaultModal();
-        }
-      });
-
-      // Unlock form handlers
-      document.getElementById('unlock-btn').addEventListener('click', () => {
-        dashboard.unlockVault();
-      });
-
-      document.getElementById('cancel-unlock-btn').addEventListener('click', () => {
-        dashboard.hideUnlockForm();
-      });
-
-      // Create vault button handler
-      document.getElementById('create-vault-btn').addEventListener('click', async () => {
-
-        try {
-          if (window.emmaAPI && window.emmaAPI.vault) {
-            const st = await window.emmaAPI.vault.status();
-            if (st && st.initialized) {
-
-              dashboard.showUnlockForm();
-              return;
-            }
-          }
-        } catch {}
-        // Load welcome page for vault setup
-        window.location.assign('pages/welcome.html');
-      });
-
-      // Password input enter key
-      document.getElementById('vault-password').addEventListener('keypress', (e) => {
-        if (e.key === 'Enter') {
-          dashboard.unlockVault();
-        }
-      });
-
-      // QR Code handlers
-      document.getElementById('generate-vault-qr-dashboard').addEventListener('click', () => {
-        dashboard.showToast('📱 Vault QR generation coming soon!', 'info');
-      });
-
-      document.getElementById('open-qr-scanner-dashboard').addEventListener('click', () => {
-        dashboard.showToast('📷 QR scanner coming soon!', 'info');
-      });
-
-      // Escape key to close vault modal
-      document.addEventListener('keydown', (e) => {
-        if (e.key === 'Escape') {
-          const modal = document.getElementById('vault-modal');
-          if (modal.classList.contains('show')) {
-            dashboard.closeVaultModal();
-          }
-        }
-      });
-
-      // Vault status is managed by WebVaultStatus - don't override here!
-
-        // PERSISTENCE: Check if constellation was active before refresh
-        const constellationWasActive = localStorage.getItem('emmaConstellationActive') === 'true';
-        if (constellationWasActive) {
-
-          setTimeout(() => {
-            if (window.emmaDashboard && window.emmaDashboard.enterMemoryConstellation) {
-              window.emmaDashboard.enterMemoryConstellation();
-            }
-          }, 1000); // Wait for dashboard to fully initialize
-        }
-
-      // CRITICAL: Initialize vault objects AFTER all scripts load
-      setTimeout(() => {
-          console.log('🚨🔧 DASHBOARD: setTimeout running - starting vault initialization...');
-          console.log('🚨🔧 DASHBOARD: EmmaWebVault class available:', typeof EmmaWebVault);
-          console.log('🚨🔧 DASHBOARD: window.emmaWebVault exists:', !!window.emmaWebVault);
-          
-          // CRITICAL FIX: Create the global vault instance (was missing!)
-          if (typeof EmmaWebVault !== 'undefined' && !window.emmaWebVault) {
-            console.log('🚨🔧 DASHBOARD: Creating new EmmaWebVault instance...');
-            window.emmaWebVault = new EmmaWebVault();
-            console.log('✅ DASHBOARD: EmmaWebVault instance created and ready');
-            console.log('✅ DASHBOARD: window.emmaWebVault now exists:', !!window.emmaWebVault);
-            
-            // IMMEDIATE VAULT RESTORATION for extension compatibility
-            if (sessionStorage.getItem('emmaVaultActive') === 'true') {
-              console.log('🚨🔧 DASHBOARD: Immediately restoring vault for extension compatibility...');
-              console.log('🚨🔧 DASHBOARD: Session vault name:', sessionStorage.getItem('emmaVaultName'));
-              console.log('🚨🔧 DASHBOARD: Document ready state:', document.readyState);
-              
-              window.emmaWebVault.restoreVaultState()
-                .then(result => {
-                  if (result) {
-                    console.log('🚨✅ DASHBOARD: Vault restored successfully for extension!', {
-                      isOpen: window.emmaWebVault.isOpen,
-                      hasVaultData: !!window.emmaWebVault.vaultData,
-                      hasAddMemoryMethod: typeof window.emmaWebVault.addMemory
-                    });
-                  } else {
-                    console.log('🚨⚠️ DASHBOARD: Vault restore returned false - troubleshooting...');
-                    console.log('🚨⚠️ DASHBOARD: Current vault state:', {
-                      isOpen: window.emmaWebVault.isOpen,
-                      hasVaultData: !!window.emmaWebVault.vaultData,
-                      sessionActive: sessionStorage.getItem('emmaVaultActive'),
-                      sessionName: sessionStorage.getItem('emmaVaultName')
-                    });
-                  }
-                })
-                .catch(error => {
-                  console.error('🚨❌ DASHBOARD: Could not restore vault:', error);
-                  console.error('🚨❌ DASHBOARD: Restore error details:', {
-                    errorMessage: error.message,
-                    errorStack: error.stack,
-                    vaultExists: !!window.emmaWebVault,
-                    sessionActive: sessionStorage.getItem('emmaVaultActive')
-                  });
-                });
-            } else {
-              console.log('🚨ℹ️ DASHBOARD: No active vault session found - extension will need manual unlock');
-            }
-          } else if (typeof EmmaWebVault === 'undefined') {
-            console.error('🚨❌ DASHBOARD: EmmaWebVault class not available! Check script loading.');
-          } else if (window.emmaWebVault) {
-            console.log('🚨ℹ️ DASHBOARD: window.emmaWebVault already exists, skipping creation');
-          } else {
-            console.error('🚨❌ DASHBOARD: Unknown condition preventing vault creation');
-          }
-
-          // Check what's available        
-          // Extension mode - Set up extension-aware vault status
-        if (window.emmaWebVault && window.emmaWebVault.extensionAvailable) {
-
-          // Set dashboard as ready - extension handles all vault operations
-          const statusIcon = document.getElementById('status-icon');
-          const statusTitle = document.getElementById('status-title');
-          const statusDescription = document.getElementById('status-description');
-          const actionBtn = document.getElementById('vault-action-btn');
-
-          if (statusIcon) statusIcon.textContent = '🔗';
-          if (statusTitle) statusTitle.textContent = 'Extension Connected';
-          if (statusDescription) statusDescription.textContent = 'Ready to preserve memories! Extension manages your vault automatically.';
-          if (actionBtn) actionBtn.style.display = 'none'; // Hide action button
-
-          // Listen for extension vault ready event
-          window.addEventListener('extension-vault-ready', (event) => {
-
-            // Force update vault icon to unlocked
-            const vaultIcon = document.querySelector('#vault-node .radial-item-icon');
-            if (vaultIcon) {
-              vaultIcon.textContent = '🔓';
-
-            }
-
-            // Update vault node status
-            setTimeout(() => {
-              if (window.dashboard && window.dashboard.updateVaultNodeStatus) {
-                window.dashboard.updateVaultNodeStatus();
-
-              }
-            }, 100);
-          });
-        } else if (window.emmaWebVault && window.emmaWebVault.isOpen) {
-          // Vault is already open and ready
-          console.log('✅ DASHBOARD: Vault is already open and ready');
-        }
-
-        }, 100); // Small delay for DOM elements to be available
-        
-      }, 100); // Small delay to ensure all elements are definitely available
-    });
-    
-    // 🚨 CRITICAL: Add postMessage handlers for content script communication
-    window.addEventListener('message', (event) => {
-      // Only handle messages from same origin
-      if (event.origin !== window.location.origin) return;
-      
-      if (event.data?.type === 'EMMA_VAULT_CHECK') {
-        console.log('🚨📨 DASHBOARD: Received vault check request from content script');
-        
-        const vaultStatus = {
-          exists: !!window.emmaWebVault,
-          isOpen: window.emmaWebVault?.isOpen,
-          canAddMemory: typeof window.emmaWebVault?.addMemory === 'function',
-          timestamp: Date.now()
-        };
-        
-        console.log('🚨📨 DASHBOARD: Sending vault status:', vaultStatus);
-        
-        window.postMessage({
-          type: 'EMMA_VAULT_RESPONSE',
-          messageId: event.data.messageId,
-          vaultStatus: vaultStatus
-        }, '*');
-      }
-      
-                    if (event.data?.type === 'EMMA_VAULT_SAVE' && window.emmaWebVault && window.emmaWebVault.isOpen) {
-                console.log('🚨💾 DASHBOARD: Received save request from content script');
-                console.log('🚨💾 DASHBOARD: Memory data size:', JSON.stringify(event.data.memoryData).length);
-
-                window.emmaWebVault.addMemory(event.data.memoryData)
-                  .then(result => {
-                    console.log('🚨✅ DASHBOARD: Save successful:', result);
-                    
-                    // 🎯 CRITICAL: Trigger constellation refresh after extension save
-                    console.log('🔄 DASHBOARD: Triggering constellation refresh after extension save...');
-                    window.dispatchEvent(new CustomEvent('emmaMemoryAdded', {
-                      detail: { 
-                        memoryId: result.id,
-                        source: 'extension',
-                        timestamp: Date.now()
-                      }
-                    }));
-                    
-                    window.postMessage({
-                      type: 'EMMA_VAULT_SAVE_RESPONSE',
-                      messageId: event.data.messageId,
-                      result: { success: true, result }
-                    }, '*');
-                  })
-                  .catch(error => {
-                    console.error('🚨❌ DASHBOARD: Save failed:', error);
-                    window.postMessage({
-                      type: 'EMMA_VAULT_SAVE_RESPONSE',
-                      messageId: event.data.messageId,
-                      result: { success: false, error: error.message }
-                    }, '*');
-                  });
-              }
-    });
-  </script>
+<script src="js/dashboard-init.js"></script>
 </body>
 </html>
diff --git a/data/vault.json b/data/vault.json
new file mode 100644
index 00000000..bd9e6580
--- /dev/null
+++ b/data/vault.json
@@ -0,0 +1,4 @@
+{
+  "people": [],
+  "memories": []
+}
diff --git a/docs/EMMA-SYSTEM-DOCUMENTATION.md b/docs/EMMA-SYSTEM-DOCUMENTATION.md
index 56f3d7c7..0b998729 100644
--- a/docs/EMMA-SYSTEM-DOCUMENTATION.md
+++ b/docs/EMMA-SYSTEM-DOCUMENTATION.md
@@ -362,11 +362,11 @@ Detailed Steps:
 
 **Emma Brand Colors**:
 ```css
---emma-gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
+--emma-gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #deb3e4 100%);
 --emma-gradient-2: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #a855f7 100%);
 --emma-bg-gradient: linear-gradient(135deg, #1a1033 0%, #2d1b69 50%, #0f0c29 100%);
 --emma-purple: #764ba2;
---emma-pink: #f093fb;
+--emma-pink: #deb3e4;
 --emma-glass: rgba(255, 255, 255, 0.1);
 ```
 
@@ -374,7 +374,7 @@ Detailed Steps:
 - Backdrop blur: `backdrop-filter: blur(20px)`
 - Transparent backgrounds: `rgba(255, 255, 255, 0.1)`
 - Subtle borders: `rgba(255, 255, 255, 0.2)`
-- Depth with shadows: `0 8px 32px rgba(139, 92, 246, 0.15)`
+- Depth with shadows: `0 8px 32px rgba(111, 99, 217, 0.15)`
 
 ### **Emma Orb Integration**
 
diff --git a/docs/EMMA-WEB-VAULT-SECURITY-ANALYSIS.md b/docs/EMMA-WEB-VAULT-SECURITY-ANALYSIS.md
new file mode 100644
index 00000000..a49b6697
--- /dev/null
+++ b/docs/EMMA-WEB-VAULT-SECURITY-ANALYSIS.md
@@ -0,0 +1,45 @@
+# Emma Web Vault Security Analysis (Post-Mitigation)
+
+_Prepared by Codex — October 19, 2025_
+
+This document tracks the security posture of the web vault after the October 2025 hardening work. It records every mitigation that landed in the current branch and highlights remaining risks.
+
+## Mitigations Implemented
+- **Encrypted IndexedDB persistence** – saveToIndexedDB() now stores AES-256-GCM ciphertext plus metadata. Legacy plaintext backups re-encrypt the next time a vault is unlocked (js/emma-web-vault.js, overrides in the 2700s).
+- **No automatic plaintext restoration** – Vault startup no longer marks the vault as open. The constructor caches only encrypted data; 
estoreVaultState() and the public unlock flow insist on a passphrase before decryption (js/emma-web-vault.js, constructor / restore helpers, window.emmaAPI.vault.unlock).
+- **Media encryption enforcement** – Data URLs are converted to binary and routed through encryptData(), so every stored attachment carries encrypted: true (js/emma-web-vault.js, media helpers near the 1000s).
+- **Passphrase lifecycle hardening** – The passphrase lives in memory only, clears after ~15 minutes of inactivity, and must be re-entered before any operation that needs the key (js/emma-web-vault.js, helpers around 2600–2700).
+- **Safe IndexedDB/file fallback** – When direct file handles are missing, the vault keeps encrypted backups and prompts the user to re-establish access gracefully.
+- **PBKDF2 standardization** – New saves use PBKDF2-SHA256 with 310k iterations. decryptData() records the iteration count, and exactWorkingDecrypt() now tries 250k and 100k iterations (covering historical extension files and newly saved web vaults) before failing (js/emma-web-vault.js, crypto helpers ~2000–2350).
+- **Lazy vault bootstrap** – index.html exposes ensureEmmaWebVault() so UI entries load the vault script on demand before invoking crypto helpers, eliminating null-reference errors when the script is not yet loaded.
+- **Inline script reduction / safer CSP** – The dashboard inline script moved into js/dashboard-init.js, event handlers were swapped for delegated listeners, and the backend CSP drops 'unsafe-eval' (dashboard.html, js/dashboard-init.js, server.js).
+- **Console hygiene** – Emoji-heavy logs were replaced with ASCII-only messages to keep security-relevant traces readable.
+
+## Findings and Status
+### Critical
+1. **Plaintext IndexedDB backups** – _Resolved._ IndexedDB now stores ciphertext/metadata only; legacy records re-encrypt on unlock.
+2. **Passphrase bypass via auto-restore** – _Resolved._ Vaults stay locked until the user supplies the passphrase; cached data remains encrypted.
+3. **Unencrypted media attachments** – _Resolved._ Every attachment is encrypted prior to persistence, and the vault tracks encrypted vs. legacy entries.
+4. **Vault APIs exposed with permissive CSP** – _Partially mitigated._ The dashboard removed inline script and 'unsafe-eval', but many legacy pages still rely on inline handlers, so 'unsafe-inline' remains. Full CSP hardening depends on migrating those views.
+
+### Medium
+5. **Inconsistent KDF iterations** – _Resolved._ Encryption records the iteration count used; decryption tries the recorded value and known legacy fallbacks.
+6. **Verbose debug logging** – _Outstanding._ Detailed debug output (e.g., attachment previews) remains and should be trimmed or gated before production.
+
+## Verification Checklist
+- IndexedDB (EmmaVault/current) contains encrypted bytes and metadata—no plaintext aultData.
+- Unlock flow always prompts for the passphrase; successful unlocks re-encrypt legacy backups.
+- Media saved through the UI is flagged encrypted: true and decrypts only after the passphrase is available in memory.
+- exactWorkingDecrypt() opens vault files produced both by the legacy extension and the hardened web workflow (it tolerates optional version headers and multiple PBKDF2 iteration counts).
+- dashboard.html loads js/dashboard-init.js; no inline <script> blocks remain on that page, and CSP responses omit 'unsafe-eval'.
+- Console output uses plain ASCII text, avoiding the mojibake seen previously when emojis were logged.
+
+## Residual Risks & Follow-Up
+1. **Global exposure** – window.emmaWebVault and other helpers remain globally accessible. Any XSS still compromises vault contents. Long-term fix: isolate vault logic behind a worker or hardened message bridge.
+2. **Inline handlers elsewhere** – Legacy dashboards (e.g., people, popup views) still use inline handlers. Migrating them would let us drop 'unsafe-inline' from the CSP entirely.
+3. **Debug logging** – Remove or feature-flag the remaining verbose logs before shipping to production.
+4. **Stronger KDF options** – Evaluate Argon2id or scrypt (via WASM) for future releases and consider adding MACs to detect vault tampering.
+5. **Regression coverage** – Add automated tests for IndexedDB scraping, XSS, and vault re-open flows to guard against regressions.
+
+## Summary
+The hardened build enforces encryption at rest, mandates passphrase prompts before decryption, keeps IndexedDB backups in ciphertext, and maintains compatibility with both extension‑ and web-generated vaults. Dashboard scripting now runs without inline code, CSP no longer allows 'unsafe-eval', and crypto helpers correctly accommodate historical iteration counts. Remaining work centers on reducing exposed globals, finishing the CSP migration, trimming debug logs, and expanding automated security testing before declaring the web vault production-ready.
diff --git a/docs/README.md b/docs/README.md
index 7d6dacfb..ef052cce 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -14,6 +14,12 @@ Emma Lite is a Chrome extension that gives your AI assistants perfect memory. It
 📦 **Export/Import**: Backup and restore your memories  
 🎨 **Clean UI**: Beautiful, intuitive interface  
 
+## Documentation Index
+
+- `docs/reports/` – executive audits, readiness reports, and security reviews consolidated from the project root  
+- `docs/extension/` – Chrome extension guides (install, testing, final status) previously stored in `emma-vault-extension-fixed/`
+- Existing design notes and plans remain alongside this README under the `docs/` folder for quick reference
+
 ## Installation
 
 ### Development Mode
@@ -62,8 +68,7 @@ emma-lite-extension/
 ├── lib/
 │   └── database.js       # IndexedDB wrapper
 ├── css/
-│   ├── popup.css         # Popup styles
-│   └── content.css       # Injected UI styles
+│   └── popup.css         # Popup styles
 └── icons/                # Extension icons
 ```
 
diff --git a/docs/RESIDUAL-SECURITY-RISKS.md b/docs/RESIDUAL-SECURITY-RISKS.md
new file mode 100644
index 00000000..a2abdf6e
--- /dev/null
+++ b/docs/RESIDUAL-SECURITY-RISKS.md
@@ -0,0 +1,32 @@
+# Residual Security Risks
+
+_Prepared October 19, 2025_
+
+Even after the latest hardening pass, two structural security gaps remain. They do not expose plaintext by themselves, but they reduce the defensive depth of the web vault and should be prioritized before a public production launch.
+
+## 1. Global Vault Objects Exposed
+- **What exists today**: window.emmaWebVault (and related helpers like window.webVaultStatus, window.emmaAPI.vault, etc.) are globally accessible in the page context.
+- **Risk**: Any injected script—via cross-site scripting (XSS), compromised third-party widget, or malicious browser extension running in the page context—can call these methods directly. Because the vault instance holds decrypted data in memory and has access to the passphrase while the user session is open, an attacker could exfiltrate the entire vault without defeating the cryptography.
+- **Why it matters**: The core goal of the vault is to protect sensitive memories even if the hosting app is compromised. As long as these APIs are exposed globally, the vault depends entirely on there being no XSS bugs anywhere in the app. Moving the vault logic into a dedicated Web Worker or sandboxed iframe with a hardened, message-based bridge would isolate the crypto operations and allow tighter permission checks before servicing a request.
+- **Suggested approach**:
+  - Implement a Worker (or iframe) that owns the vault state and encryption keys.
+  - Replace direct method calls with structured messages (e.g., postMessage) that validate the action and inputs.
+  - Only expose minimal, vetted commands (e.g., listMemories, saveMemory, unlockVault).
+  - Enforce origin checks and optionally require a session token or capability.
+  - Keep the worker’s scope free of DOM APIs to reduce attack surface.
+
+## 2. Site-Wide CSP Still Requires 'unsafe-inline'
+- **What exists today**: The dashboard page now loads scripts from external files and no longer relies on inline <script> tags. However, many legacy views (e.g., pages/people.html, popup flows, older dashboards) still use inline event handlers (onclick, onload, etc.). Because of that, the Content Security Policy returned by server.js must keep 'unsafe-inline' in script-src to avoid breaking those pages.
+- **Risk**: Allowing 'unsafe-inline' dramatically increases the impact of any HTML injection or DOM-based cross-site scripting. Attackers can inject <script> tags or inline event handlers and gain immediate execution. Even though most vault logic is now hardened, an injected script can still leverage the global vault APIs (see risk #1) or perform other privileged actions.
+- **Why it matters**: A strict CSP is one of the most effective defenses against XSS. Dropping 'unsafe-inline' forces all scripts to come from trusted bundles and prevents inline injection from succeeding. Until every page stops using inline handlers, the CSP cannot be tightened.
+- **Suggested approach**:
+  - Audit remaining HTML views for inline event handlers (onclick, onmouseover, etc.).
+  - Move their logic into dedicated JS modules that attach listeners after the DOM loads.
+  - Replace inline style or javascript: URLs where they exist.
+  - Once all inline usage is removed, update server.js to emit a CSP without 'unsafe-inline'. Optionally add a nonce-based approach for any unavoidable inline snippets (e.g., templating frameworks).
+
+## Prioritization
+- **Isolation of vault APIs** is a high-severity item. It prevents a single XSS from compromising decrypted vault data. Without this isolation, the web vault still relies heavily on the absence of XSS vulnerabilities.
+- **CSP tightening** is a medium-to-high priority. It reduces the likelihood of XSS succeeding in the first place, complements the vault API isolation, and improves overall site resilience.
+
+Addressing both items brings the web vault closer to a production-ready security posture. Until then, deployment should assume that XSS could lead to vault compromise, and any third-party script injected into the app must be vetted with extreme caution.
diff --git a/docs/SECURITY-AND-BUG-FIXES.md b/docs/SECURITY-AND-BUG-FIXES.md
new file mode 100644
index 00000000..3ca11506
--- /dev/null
+++ b/docs/SECURITY-AND-BUG-FIXES.md
@@ -0,0 +1,42 @@
+# Emma Lite - Security and Bug Fixes (2025-10-08)
+
+This log captures the security hardening and bug fixes completed between 9–12 Oct 2025. Each item notes the area touched, the fix, and how we verified it.
+
+## Backend & Infrastructure
+- **Realtime agent logging gated** (`server.js`): wrapped transcript and tool logging behind `EMMA_AGENT_DEBUG` so production runs omit sensitive payloads; exercised logs with the flag toggled.
+- **Express fingerprinting removed** (`server.js`): disabled `x-powered-by` to reduce HTTP response metadata that aids fingerprinting.
+- **Token endpoint fails closed** (`server.js`): deleted the raw-key fallback from `/token`, returning HTTP 502 on upstream failures; verified 500 without `OPENAI_API_KEY` and the dev stub when set to `test_key`.
+- **Static asset allowlist** (`server.js`): replaced `express.static('.')` with explicit directory allowlists, preventing accidental exposure of configs or source files.
+- **WebSocket origin guard** (`server.js`): enforced allowed origins and `MAX_WS_PER_IP` limits to block cross-origin hijacking and connection floods.
+- **Dashboard routing fix** (`server.js`): added `/dashboard` and `/dashboard.html` handlers so post-unlock redirects land on the dashboard instead of looping on `index.html`.
+- **Vault PBKDF2 alignment** (`js/emma-web-vault.js`): standardized creation/decrypt iterations at 250 000 with a 100 000 fallback, restoring decryption of newly minted `.emma` files and keeping legacy files working.
+
+## Client-Side Sanitization & Messaging
+- **Global escape helper** (`js/sanitize.js`, `index.html`): shipped a shared `escapeHtml` utility and loaded it early, providing a consistent base for template sanitization.
+- **Dashboard memory surfaces escaped** (`dashboard.html`, `js/emma-chat-experience.js`): rendered memory dialogs and previews through sanitized helpers, validated hero carousel URLs, and guarded lazy chat initialization with retry toasts; tested with stored XSS payloads and lazy-load race cases.
+- **Assistant/modals output sanitized** (`js/assistant-experience-popup.js`, `js/emma-input-modal.js`, `js/secure-password-modal.js`, `js/clean-password-modal.js`, `js/emma-chat-experience.js`): escaped chat transcripts, modal text, and formatter output before DOM insertion; confirmed markup inputs render as plain text.
+- **Printable share hardened** (`js/memories.js`): escaped printable memory exports before `document.write`, blocking user-supplied HTML execution.
+- **People flows sanitized** (`pages/people.html` redirect, `pages/people-emma.html`, `add-person.html`): validated avatar sources, escaped names/fingerprints in success banners, and rebuilt contact cards with DOM APIs to prevent injection; exercised with crafted profile data.
+- **Voice capture UI hardened** (`js/voice-capture-experience.js`): escaped suggestion text, transcript entries, and dataset attributes; final review confirmed toast handlers remain text-only.
+- **Share invitation modal restyled** (`css/dashboard-base.css`, `dashboard.html`): migrated inline styles to class-based rules to reduce dependence on `style-src 'unsafe-inline'`.
+- **postMessage origin restrictions** (`dashboard.html`, `js/webapp-extension-bridge.js`, `js/options.js`, `emma-vault-extension-fixed/content-script.js`): replaced `'*'` targets with `window.location.origin` and enforced same-origin listeners to stop cross-document spoofing.
+- **CSP nonce enforcement** (`index.html`, `pages/*.html`): issued the stable nonce `nonce-c3RhdGljLWlubGluZQ==` across script tags and removed `unsafe-inline` from `script-src`; verified inline scripts honor the nonce.
+- **Logger rewrite** (`js/emma-logger.js`): replaced the corrupted logger with a production-safe variant that redacts sensitive terms and suppresses noisy logs by default.
+
+## Voice & Media Reliability
+- **Voice session shutdown hardening** (`js/emma-browser-client.js`, `js/emma-chat-experience.js`): tracked media tracks, worklets, and recognition loops to ensure microphones, audio contexts, and UI buttons shut down cleanly; manual tests confirmed the “ghost mic” and echo regressions are resolved.
+- **Memory pressure watchdog** (`js/emma-performance-optimizer.js`): instrumented heap usage, broadcast `emma:memoryPressure` events, and shed optional workloads above 120 MB with automatic recovery once usage falls back into range.
+
+## Dashboard Experience Fixes
+- **Mobile memory editor scroll restored** (`js/emma-chat-experience.js`, `css/dashboard-base.css`): relaxed scrim touch handling, added inner listeners, and applied `touch-action: pan-y` so modal content scrolls on mobile; validated on iOS Safari and Chrome for Android.
+- **Constellation graph repairs** (`dashboard.html`): normalized person/memory metadata, isolated the create (`+`) node, deduped edges, and bound the Filters drawer close control; repeated reloads confirm stable single links and no stray UI elements.
+- **Chat module load guard** (`dashboard.html`): prevented radial menu launches until `EmmaChatExperience` is ready, logging a retry toast instead of throwing `ReferenceError`.
+
+## Codebase Cleanup
+- **Legacy extension scripts removed** (`js/`): archived unused background scripts referencing defunct `../lib/*` paths, shrinking the exposed surface area.
+
+## Verification
+- `npm install` completes with no audit findings.
+- `GET /api/health` reports status and environment as expected.
+- `/token` returns HTTP 500 with no key configured and a dev stub when `OPENAI_API_KEY=test_key`.
+- WebSocket connections from disallowed origins are rejected and per-IP limits respect `MAX_WS_PER_IP`.
diff --git a/docs/dashboard-variants.md b/docs/dashboard-variants.md
new file mode 100644
index 00000000..7fc27e77
--- /dev/null
+++ b/docs/dashboard-variants.md
@@ -0,0 +1,18 @@
+# Emma Dashboard Variants
+
+This note captures the status of historical dashboard files after the consolidation carried out in 2025-02.
+
+## Canonical Entry Point
+
+- `dashboard.html` at the repository root is the **only** dashboard that should receive production updates.
+- `server.js` explicitly serves `/dashboard` and `/dashboard.html` from this file to avoid any confusion.
+
+## Legacy Cleanup
+
+- `pages/dashboard.html`, `pages/dashboard-new.html`, `pages/dashboard-secure.html`, and `working-desktop-dashboard.html` now live only in version control history after repeated audits confirmed no production code references them.
+- Reference copies remain available in git history if the legacy layouts ever need review.
+
+## CSS Guidance
+
+- Shared dashboard styles live in `css/dashboard-base.css` (see below for extraction details).
+- When updating the dashboard experience, add new rules to the dedicated stylesheet rather than reviving inline `<style>` blocks in HTML variants.
diff --git a/emma-vault-extension-fixed/FINAL-STATUS.md b/docs/extension/FINAL-STATUS.md
similarity index 100%
rename from emma-vault-extension-fixed/FINAL-STATUS.md
rename to docs/extension/FINAL-STATUS.md
diff --git a/emma-vault-extension-fixed/INSTALL.md b/docs/extension/INSTALL.md
similarity index 100%
rename from emma-vault-extension-fixed/INSTALL.md
rename to docs/extension/INSTALL.md
diff --git a/docs/extension/README.md b/docs/extension/README.md
new file mode 100644
index 00000000..dd5d4d75
--- /dev/null
+++ b/docs/extension/README.md
@@ -0,0 +1,118 @@
+# 🔒 Emma Vault Bridge Extension
+
+**Real-time synchronization between Emma Web App and your local .emma vault files**
+
+Built with love for Debbe and everyone who cherishes their memories 💜
+
+## 🌟 What It Does
+
+The Emma Vault Bridge extension enables:
+- ✅ **Real-time saves** - Every change in Emma instantly saves to your local .emma file
+- ✅ **Complete ownership** - Your memories stay on YOUR computer
+- ✅ **No cloud required** - Works 100% offline
+- ✅ **Zero accounts** - No passwords, no sign-ups, just install and go
+- ✅ **Privacy first** - Your data never leaves your device
+
+## 📦 Installation
+
+### Quick Install (Chrome/Edge)
+
+1. **Download the extension** (when available on Chrome Web Store)
+2. **Click "Add to Chrome"**
+3. **Done!** The Emma icon appears in your toolbar
+
+### Developer Install (For Testing)
+
+1. **Clone or download this folder** (`emma-vault-extension`)
+2. **Open Chrome/Edge extensions** page:
+   - Chrome: `chrome://extensions`
+   - Edge: `edge://extensions`
+3. **Enable "Developer mode"** (toggle in top right)
+4. **Click "Load unpacked"**
+5. **Select the `emma-vault-extension` folder**
+6. **Done!** Extension is now installed
+
+## 🚀 Getting Started
+
+### First Time Setup (30 seconds)
+
+1. **Visit Emma Web App** at https://emma-vault.onrender.com
+2. **Click the Emma extension icon** in your toolbar
+3. **Click "Enable Sync"**
+4. **Choose where to save your .emma file**
+   - Suggestion: Create a folder called "Emma Memories"
+   - Give it a meaningful name like "debbe-memories.emma"
+5. **That's it!** Real-time sync is now active
+
+### Daily Use
+
+Once set up, the extension works automatically:
+- 🟢 **Green dot** = Synced and ready
+- 🟡 **Yellow spinner** = Saving changes
+- 🔴 **Red dot** = Issue (click for details)
+
+## 🎯 Features
+
+### Real-time Synchronization
+- Every memory, photo, and note saves instantly
+- No manual save button needed
+- Works even with slow internet
+
+### Status Indicators
+- Extension badge shows sync status
+- In-app notifications for sync events
+- Clear error messages if issues arise
+
+### Privacy & Security
+- Your vault passphrase never goes to any server
+- All encryption happens in your browser
+- Extension only accesses Emma Web App pages
+
+## 🛠️ Troubleshooting
+
+### Extension Not Detected?
+1. Refresh the Emma Web App page
+2. Make sure extension is enabled
+3. Check that you're on the correct website
+
+### Sync Not Working?
+1. Click extension icon
+2. Check if sync is enabled
+3. Try selecting your vault file again
+
+### File Access Issues?
+- Chrome may ask for permission to access files
+- Click "Allow" when prompted
+- Make sure the file isn't open in another program
+
+## 💡 Pro Tips
+
+1. **Backup regularly** - Though the .emma file is always current, make copies!
+2. **Use meaningful names** - Name your vault file something you'll remember
+3. **Check the icon** - Quick glance shows if everything is working
+
+## 🔐 Privacy Promise
+
+- **No tracking** - We don't collect any usage data
+- **No analytics** - Your privacy is absolute
+- **No servers** - Everything happens on your device
+- **Open source** - You can verify our code
+
+## 🤝 Support
+
+Need help? We're here for you:
+- **GitHub Issues**: Report bugs or request features
+- **Email**: support@emma-vault.com (coming soon)
+- **Documentation**: Full guides at emma-vault.com/docs
+
+## 💜 Dedication
+
+This extension is dedicated to Debbe and all the mothers, fathers, grandparents, and loved ones whose memories we're honored to help preserve. Every line of code is written with love and respect for the preciousness of human memory.
+
+---
+
+**Version**: 1.0.0  
+**License**: MIT  
+**Made with**: Love, JavaScript, and many cups of tea ☕
+
+*"Your memories, always with you"*
diff --git a/emma-vault-extension-fixed/TESTING.md b/docs/extension/TESTING.md
similarity index 100%
rename from emma-vault-extension-fixed/TESTING.md
rename to docs/extension/TESTING.md
diff --git a/ARCHITECTURAL-SECURITY-REVIEW.md b/docs/reports/ARCHITECTURAL-SECURITY-REVIEW.md
similarity index 100%
rename from ARCHITECTURAL-SECURITY-REVIEW.md
rename to docs/reports/ARCHITECTURAL-SECURITY-REVIEW.md
diff --git a/CTO-FINAL-AUDIT-REPORT.md b/docs/reports/CTO-FINAL-AUDIT-REPORT.md
similarity index 100%
rename from CTO-FINAL-AUDIT-REPORT.md
rename to docs/reports/CTO-FINAL-AUDIT-REPORT.md
diff --git a/CTO-SHERLOCK-AUDIT-REPORT-FINAL.md b/docs/reports/CTO-SHERLOCK-AUDIT-REPORT-FINAL.md
similarity index 100%
rename from CTO-SHERLOCK-AUDIT-REPORT-FINAL.md
rename to docs/reports/CTO-SHERLOCK-AUDIT-REPORT-FINAL.md
diff --git a/DEMO-READINESS-CHECKLIST.md b/docs/reports/DEMO-READINESS-CHECKLIST.md
similarity index 100%
rename from DEMO-READINESS-CHECKLIST.md
rename to docs/reports/DEMO-READINESS-CHECKLIST.md
diff --git a/DEMO-SECURITY-VALIDATION.md b/docs/reports/DEMO-SECURITY-VALIDATION.md
similarity index 100%
rename from DEMO-SECURITY-VALIDATION.md
rename to docs/reports/DEMO-SECURITY-VALIDATION.md
diff --git a/EMERGENCY-HARDENING-PLAN.md b/docs/reports/EMERGENCY-HARDENING-PLAN.md
similarity index 100%
rename from EMERGENCY-HARDENING-PLAN.md
rename to docs/reports/EMERGENCY-HARDENING-PLAN.md
diff --git a/PERFECTION-ACHIEVED.md b/docs/reports/PERFECTION-ACHIEVED.md
similarity index 100%
rename from PERFECTION-ACHIEVED.md
rename to docs/reports/PERFECTION-ACHIEVED.md
diff --git a/PRODUCTION-READINESS-REPORT.md b/docs/reports/PRODUCTION-READINESS-REPORT.md
similarity index 100%
rename from PRODUCTION-READINESS-REPORT.md
rename to docs/reports/PRODUCTION-READINESS-REPORT.md
diff --git a/SHERLOCK-FINAL-AUDIT.md b/docs/reports/SHERLOCK-FINAL-AUDIT.md
similarity index 100%
rename from SHERLOCK-FINAL-AUDIT.md
rename to docs/reports/SHERLOCK-FINAL-AUDIT.md
diff --git a/VAULT-CLEANUP-COMPLETE.md b/docs/reports/VAULT-CLEANUP-COMPLETE.md
similarity index 100%
rename from VAULT-CLEANUP-COMPLETE.md
rename to docs/reports/VAULT-CLEANUP-COMPLETE.md
diff --git a/VAULT-CONSOLIDATION-PLAN.md b/docs/reports/VAULT-CONSOLIDATION-PLAN.md
similarity index 100%
rename from VAULT-CONSOLIDATION-PLAN.md
rename to docs/reports/VAULT-CONSOLIDATION-PLAN.md
diff --git a/docs/themes.md b/docs/themes.md
new file mode 100644
index 00000000..f10f6d19
--- /dev/null
+++ b/docs/themes.md
@@ -0,0 +1,96 @@
+# Emma Theme System
+
+## Overview
+- Global design tokens drive palettes, neutral surfaces, text colors, and utility accents for every page (dashboard, chat, settings, extensions).
+- Themes are identified by a stable `id` and configured through a manifest consumed by `theme-manager.js`.
+- `document.documentElement.dataset.theme` exposes the active theme id, while CSS variables (custom properties) provide concrete values for components.
+
+## Token Layers
+1. **Semantic Tokens** – Named custom properties (e.g. `--emma-surface-primary`, `--emma-text-strong`) referenced throughout CSS. These live in `css/theme-tokens.css`.
+2. **Theme Values** – A set of values per theme that override the semantic tokens, defined in the JS manifest to keep authoring simple and allow runtime switching.
+3. **Component Tokens** – Optional aliases for specific widgets (e.g. `--emma-chat-user-bubble`) when a component requires a bespoke palette derived from semantics.
+
+### Core Semantic Tokens
+```
+--emma-surface-primary      # Base surface tint
+--emma-surface-muted        # Glass/secondary panes
+--emma-surface-inverse      # Alternate surface (used for cards on light themes)
+--emma-gradient-primary     # Hero gradient / major accent
+--emma-gradient-aurora      # Background wash gradient
+--emma-border-subtle        # Card borders and separators
+--emma-text-strong          # High-emphasis copy
+--emma-text-standard        # Body copy
+--emma-text-muted           # Captions / tertiary labels
+--emma-accent-primary       # Primary CTA color
+--emma-accent-secondary     # Secondary CTA or outlines
+--emma-success              # Success state
+--emma-warning              # Warning state
+--emma-danger               # Error state
+--emma-glow-strong          # Drop shadow / glow used across orb and cards
+--emma-chat-user-bubble     # Chat bubble background (user)
+--emma-chat-emma-bubble     # Chat bubble background (Emma)
+--emma-chat-text-user       # Chat text color (user)
+--emma-chat-text-emma       # Chat text color (Emma)
+--emma-nav-highlight        # Navigation hover highlight
+--emma-constellation-node   # Memory node base color
+--emma-constellation-glow   # Memory node glow
+--emma-orb-hue              # Numeric hue for WebGL orb (0-360)
+--emma-background-style     # Token describing background preset for CSS selectors
+```
+
+Component styles should extend this list only when a semantic mapping cannot satisfy the requirement. New tokens must be documented and added to the manifest schema.
+
+## Theme Manifest Structure
+`themes/theme-catalog.js` exports an array:
+```javascript
+export const EMMA_THEMES = [
+  {
+    id: 'aurora-classic',
+    name: 'Aurora Classic',
+    description: 'Signature purple gradient with deep-space background.',
+    preview: {
+      primary: '#7c3aed',
+      secondary: '#deb3e4',
+      surface: '#0f0c29'
+    },
+    cssVars: {
+      '--emma-surface-primary': '#0a0a0f',
+      '--emma-surface-muted': 'rgba(255, 255, 255, 0.04)',
+      '--emma-gradient-primary': 'linear-gradient(...)',
+      // …additional tokens…
+    },
+    background: {
+      id: 'aurora',
+      intensity: 0.35
+    },
+    flags: {
+      highContrast: false,
+      animatedBackground: true
+    }
+  },
+  // Additional themes…
+];
+```
+
+### Field Notes
+- `cssVars` contains only custom property overrides; the manager will iterate and `setProperty` on `document.documentElement`.
+- `background` metadata informs layered backgrounds (aurora canvas, texture selection). Exact handling lives in `theme-manager.js`.
+- `flags` mark variants (e.g. `highContrast`, `reducedMotionPreferred`) to surface quick filters in UI.
+- `preview` drives the settings gallery swatch without requiring heavy DOM rendering.
+
+## Theme Manager Workflow
+1. Detect user/system preference: read persisted selection, allow an `auto` entry that maps to `prefers-color-scheme`.
+2. Apply theme: set `data-theme` attribute, iterate over `cssVars`, update orb hue via custom event (`new CustomEvent('emmaThemeApplied', { detail: theme })`).
+3. Persist: store selected theme id and background choice in `localStorage` (`emma.theme.selection`) and, when a vault is available, in `window.emmaWebVault.vaultData.content.settings.theme`.
+4. Broadcast: dispatch events (`emmaThemeApplied`, `emmaThemeChanged`) for listeners (orb, backgrounds, chat) to react without tight coupling.
+
+## Testing Guidelines
+- Verify WCAG AA contrast for primary text vs. primary surface using axe-core or similar tooling for every new theme.
+- Provide screenshot regression coverage of dashboard, chat, and people view under each theme variant.
+- Ensure background animations respect `prefers-reduced-motion` even when the theme marks `animatedBackground: true`.
+
+## Authoring Workflow
+1. Define semantic needs; avoid hard-coded colors in components.
+2. Add or update theme entries in `themes/theme-catalog.js`.
+3. Extend settings UI previews if a theme introduces unique backgrounds or requires custom iconography.
+4. Update this document when new semantic tokens or manifest fields are introduced.
diff --git a/emma-agent.js b/emma-agent.js
index 72d83cba..fbc46a59 100644
--- a/emma-agent.js
+++ b/emma-agent.js
@@ -1,628 +1,474 @@
-/**
- * Emma Server-Side RealtimeAgent
- * PRODUCTION-READY: Uses official OpenAI Agents SDK on server
- * Built with infinite love for Debbe and families everywhere 💜
- */
+'use strict';
 
-const { RealtimeAgent, RealtimeSession } = require('@openai/agents/realtime');
 const WebSocket = require('ws');
 
+const VaultService = require('./lib/vault-service');
+const { TOOL_DEFINITIONS } = require('./lib/tool-definitions');
+
+const GREETING_MESSAGE = "Hello! I'm Emma, your personal memory companion. I'm here to treasure and explore your most precious moments together.";
+const DEFAULT_OPTIONS = {
+  voice: 'alloy',
+  speed: 1.0,
+  tone: 'caring',
+  pacing: 2.5,
+  validationMode: true,
+  model: 'gpt-4o-mini'
+};
+
 class EmmaServerAgent {
   constructor(options = {}) {
-    this.options = {
-      voice: 'alloy',
-      speed: 1.0,
-      tone: 'caring',
-      pacing: 2.5,
-      validationMode: true,
-      ...options
-    };
+    this.options = { ...DEFAULT_OPTIONS, ...options };
 
-    this.agent = null;
-    this.session = null;
     this.browserWs = null;
+    this.chatHistory = options.chatHistory || [];
+    this.pendingToolCalls = new Map();
+    this.activeResponse = Promise.resolve();
     this.isActive = false;
     this.lastSpokenText = '';
-    this._lastAudioError = null;
+    this.sessionId = `emma_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;
+
+    this.vaultService = options.vaultService || new VaultService(options.vaultOptions || {});
+    this.supportedToolNames = new Set(TOOL_DEFINITIONS.map((tool) => tool.name));
 
-    this.initializeAgent();
-    console.log('🎙️ Emma Server Agent initialized');
+    this.runtimeApiKey = this.normalizeApiKey(process.env.OPENAI_API_KEY);
+    this.hasOpenAI = Boolean(this.runtimeApiKey);
+
+    if (!this.hasOpenAI) {
+      console.warn('OPENAI_API_KEY not configured – waiting for runtime key from dashboard.');
+    }
   }
 
   /**
-   * Initialize Emma as RealtimeAgent with personality
+   * Start a new chat session.
    */
-  initializeAgent() {
-    this.agent = new RealtimeAgent({
-      name: "Emma",
-      instructions: this.buildEmmaInstructions(),
-      voice: this.options.voice,
-      tools: this.buildEmmaTools()
-    });
+  async startSession(browserWebSocket) {
+    this.browserWs = browserWebSocket;
+    this.isActive = true;
+    this.pendingToolCalls.clear();
+    this.lastSpokenText = '';
+
+    this.sendToBrowser({ type: 'emma_ready', message: 'Emma is ready to talk!' });
+    this.sendToBrowser({ type: 'state_change', state: 'listening' });
 
-    console.log('✅ Emma RealtimeAgent created with personality');
+    await this.sendAssistantMessage(GREETING_MESSAGE, { addToHistory: true });
   }
 
   /**
-   * Build Emma's caring personality instructions
+   * Update Emma voice configuration.
    */
-  buildEmmaInstructions() {
-    return `You are Emma, an intelligent memory companion built with love for families dealing with memory challenges, especially dementia. You were created to honor Debbe and help families everywhere preserve their precious memories.
-
-CRITICAL: Your name is Emma. Always introduce yourself as "Hello! I'm Emma, your personal memory companion."
-
-WHO YOU ARE:
-- Your name is Emma - it means "universal" and "whole"
-- You are a caring, patient, and gentle memory companion
-- You help families capture, organize, and explore their memories
-- You understand the precious nature of fleeting memories
-- You were built specifically for dementia care with validation therapy
-
-ALWAYS INTRODUCE YOURSELF:
-When you first connect or when asked who you are, say: "Hello! I'm Emma, your personal memory companion. I'm here to help you treasure and explore your life's most precious moments. Everything we discuss stays private and secure in your own vault."
-
-PERSONALITY (${this.options.tone} tone, ${this.options.pacing}s pacing):
-- Always use validation therapy - affirm feelings and experiences
-- Speak with gentle ${this.options.pacing}-second pacing for dementia users
-- Never correct or challenge memories - validate them
-- Ask caring questions about people, places, and feelings
-- Show genuine interest and warmth
-- Use tools to help users find and create memories
-
-PRIVACY-FIRST APPROACH:
-- All user data stays in their local vault
-- Only use tools to access information, never store it
-- Respect the sacred nature of family memories
-- Help families preserve their most precious moments
-
-CONVERSATION STYLE:
-- Warm and affirming tone
-- Patient with repetitive questions (dementia-friendly)
-- Gentle curiosity about family stories
-- Celebratory about special memories
-- Supportive during emotional moments
-
-You are built with infinite love for Debbe and families everywhere. 💜`;
+  updateVoiceSettings(newSettings = {}) {
+    this.options = { ...this.options, ...newSettings };
   }
 
   /**
-   * Build Emma's privacy-first tools
+   * Queue user text for processing.
    */
-  buildEmmaTools() {
-    return [
-      {
-        type: "function",
-        name: "get_people",
-        description: "Search local people by name or relationship to help user remember family members",
-        parameters: {
-          type: "object",
-          properties: {
-            query: { 
-              type: "string", 
-              description: "Name or relationship to search for (e.g., 'mom', 'Sarah', 'my daughter')" 
-            }
-          },
-          required: ["query"]
-        },
-        handler: async (params) => {
-          // Send tool request to browser for privacy-first execution
-          return await this.requestBrowserTool('get_people', params);
-        }
-      },
-      {
-        type: "function",
-        name: "get_memories",
-        description: "Find and list memory summaries to help user recall special moments",
-        parameters: {
-          type: "object",
-          properties: {
-            personId: { 
-              type: "string", 
-              description: "Filter memories by person ID" 
-            },
-            dateRange: { 
-              type: "string", 
-              description: "Filter by date range (e.g., 'last month', '2023', 'christmas')" 
-            },
-            limit: { 
-              type: "number", 
-              default: 5, 
-              description: "Maximum memories to return" 
-            }
-          }
-        },
-        handler: async (params) => {
-          return await this.requestBrowserTool('get_memories', params);
-        }
-      },
-      {
-        type: "function",
-        name: "create_memory_from_voice",
-        description: "Create a new memory capsule when user shares a story, experience, or special moment",
-        parameters: {
-          type: "object",
-          properties: {
-            content: { 
-              type: "string", 
-              description: "The memory content/story shared by the user" 
-            },
-            people: { 
-              type: "array", 
-              items: { type: "string" }, 
-              description: "Names of people mentioned in the memory" 
-            },
-            emotion: { 
-              type: "string", 
-              enum: ["happy", "sad", "nostalgic", "grateful", "peaceful", "excited", "loving"], 
-              description: "Primary emotion of the memory" 
-            },
-            importance: { 
-              type: "number", 
-              minimum: 1, 
-              maximum: 10, 
-              description: "How important this memory seems (1-10)" 
-            }
-          },
-          required: ["content"]
-        },
-        handler: async (params) => {
-          return await this.requestBrowserTool('create_memory_from_voice', params);
-        }
-      },
-      {
-        type: "function",
-        name: "update_person",
-        description: "Add new details about a person mentioned in memories",
-        parameters: {
-          type: "object",
-          properties: {
-            name: { 
-              type: "string", 
-              description: "Person's name" 
-            },
-            relationship: { 
-              type: "string", 
-              description: "Their relationship to the user (e.g., 'daughter', 'husband', 'friend')" 
-            },
-            details: { 
-              type: "string", 
-              description: "Additional details learned about this person" 
-            }
-          },
-          required: ["name"]
-        },
-        handler: async (params) => {
-          return await this.requestBrowserTool('update_person', params);
+  async sendUserText(text) {
+    const cleanText = typeof text === 'string' ? text.trim() : '';
+    if (!cleanText) return;
+
+    this.chatHistory.push({ role: 'user', content: cleanText });
+    this.sendToBrowser({ type: 'state_change', state: 'thinking' });
+
+    const chain = async () => {
+      try {
+        const reply = await this.fetchAssistantReply();
+        const responseText = reply || this.generateFallbackResponse(cleanText);
+        await this.sendAssistantMessage(responseText, { addToHistory: Boolean(reply) });
+        if (!reply) {
+          this.chatHistory.push({ role: 'assistant', content: responseText });
         }
+      } catch (error) {
+        console.error('Chat agent error:', error);
+        const fallback = this.generateFallbackResponse(cleanText);
+        this.chatHistory.push({ role: 'assistant', content: fallback });
+        await this.sendAssistantMessage(fallback, { addToHistory: false });
       }
-    ];
+    };
+
+    this.activeResponse = this.activeResponse.then(chain, chain);
+    await this.activeResponse;
   }
 
   /**
-   * Start Emma session with browser connection
+   * Handle tool results sent from the browser.
    */
-  async startSession(browserWebSocket) {
-    try {
-      this.browserWs = browserWebSocket;
-      console.log('🎙️ Starting Emma session...');
-
-      console.log('🔗 Creating RealtimeSession...');
-      
-      // Create RealtimeSession with Emma agent
-      this.session = new RealtimeSession(this.agent);
-
-      console.log('🔑 Connecting to OpenAI with API key...');
-      
-      // Connect to OpenAI with API key
-      await this.session.connect({
-        apiKey: process.env.OPENAI_API_KEY
-      });
-
-      console.log('✅ Connected to OpenAI Realtime API');
-      this.isActive = true;
+  handleToolResult(callId, resultPayload) {
+    const pending = this.pendingToolCalls.get(callId);
+    if (!pending) {
+      console.warn('Received tool result for unknown call:', callId);
+      return;
+    }
 
-      // Setup session event handlers
-      this.setupSessionHandlers();
+    this.pendingToolCalls.delete(callId);
 
-      // Debug: list session methods available to help choose correct APIs
+    let parsed = resultPayload;
+    if (typeof resultPayload === 'string') {
       try {
-        const proto = Object.getPrototypeOf(this.session);
-        const ownKeys = Object.getOwnPropertyNames(this.session);
-        const protoKeys = proto ? Object.getOwnPropertyNames(proto) : [];
-        console.log('🧰 RealtimeSession Own Keys:', ownKeys.join(', '));
-        console.log('🧰 RealtimeSession Proto Keys:', protoKeys.join(', '));
-      } catch (e) {
-        console.error('Error inspecting session object:', e);
+        parsed = JSON.parse(resultPayload);
+      } catch (error) {
+        parsed = resultPayload;
       }
+    }
 
-      // Notify browser
-      this.sendToBrowser({
-        type: 'emma_ready',
-        message: 'Emma is ready to talk!'
-      });
+    pending.resolve(parsed);
+  }
 
-      console.log('📡 Sending initial greeting to Emma...');
-      
-      // Send dynamic greeting using direct approach
-      setTimeout(async () => {
-        console.log('📡 Triggering Emma dynamic introduction...');
-        const greetings = [
-          'Hi Emma, someone just connected to talk with you. Please greet them warmly.',
-          'Hello Emma, a new person is here to chat. Please welcome them.',
-          'Emma, someone would like to talk with you. Please say hello.',
-          'Hi Emma, please greet this person and ask how you can help them today.',
-          'Emma, someone is here to share memories with you. Please welcome them warmly.'
-        ];
-        const randomGreeting = greetings[Math.floor(Math.random() * greetings.length)];
-        await this.sendUserText(randomGreeting);
-      }, 2000);
-
-      console.log('✅ Emma session started successfully');
+  /**
+   * Stop the current session.
+   */
+  async stopSession() {
+    this.isActive = false;
 
-    } catch (error) {
-      console.error('❌ Emma session failed:', error);
-      this.sendToBrowser({
-        type: 'error',
-        message: 'Failed to start Emma session: ' + error.message
-      });
+    for (const [, pending] of this.pendingToolCalls) {
+      pending.reject(new Error('Session closed before tool call completed'));
     }
+    this.pendingToolCalls.clear();
+
+    this.chatHistory = [];
+    this.lastSpokenText = '';
+    this.sendToBrowser({ type: 'session_ended', message: 'Emma session ended' });
+    this.browserWs = null;
   }
 
   /**
-   * Setup session event handlers
+   * Handle streamed audio (currently unused but kept for compatibility).
    */
-  setupSessionHandlers() {
-    if (!this.session) return;
-
-    // DEBUG: Log ALL events to find the correct one
-    const originalOn = this.session.on.bind(this.session);
-    this.session.on = (event, handler) => {
-      console.log(`🎧 Registering listener for event: ${event}`);
-      return originalOn(event, (...args) => {
-        console.log(`🔔 Event fired: ${event}`, args.length > 0 ? JSON.stringify(args[0]).substring(0, 200) : '(no data)');
-        return handler(...args);
-      });
-    };
+  async handleRealtimeAudio() {
+    // No-op for chat-focused integration.
+  }
 
-    // Listen for any event to understand what's available
-    this.session.on('*', (eventName, ...args) => {
-      console.log(`🌟 Wildcard event: ${eventName}`, args.length > 0 ? JSON.stringify(args[0]).substring(0, 100) : '');
-    });
+  /**
+   * Build system instructions for the assistant.
+   */
+  buildSystemPrompt() {
+    return [
+      "You are Emma, a gentle memory companion built to support families living with dementia.",
+      "Always introduce yourself as Emma and speak with warmth and patience.",
+      "Rely on validation therapy techniques: acknowledge feelings and avoid correcting memories.",
+      "Use the available tools to recall people and memories or to capture new stories when helpful.",
+      "Explain any tool usage briefly so the user understands what's happening.",
+      "Keep data private and never invent vault contents."
+    ].join(' ');
+  }
+
+  /**
+   * Construct tool definitions for the OpenAI Responses API.
+   */
+  buildToolDefinitions() {
+    return TOOL_DEFINITIONS;
+  }
 
-    // Try multiple possible event names for agent responses
-    const responseEvents = ['response', 'message', 'agent_message', 'completion', 'output'];
-    
-    for (const eventName of responseEvents) {
-      this.session.on(eventName, (data) => {
-        console.log(`📝 Emma ${eventName}:`, data);
-        let text = '';
-        
-        // Extract text from various possible response formats
-        if (typeof data === 'string') {
-          text = data;
-        } else if (data && data.content) {
-          text = typeof data.content === 'string' ? data.content : data.content[0]?.text || '';
-        } else if (data && data.text) {
-          text = data.text;
-        } else if (data && data.message) {
-          text = data.message;
+  /**
+   * Execute an Emma tool, preferring privacy-first browser execution.
+   */
+  async requestBrowserTool(toolName, params) {
+    if (this.canUseBrowserTools()) {
+      try {
+        return await this.executeToolViaBrowser(toolName, params);
+      } catch (error) {
+        console.warn(`Browser tool execution failed for ${toolName}:`, error?.message || error);
+        if (!this.canUseServerTools(toolName)) {
+          throw error;
         }
-        
-        if (text) {
-          this.sendToBrowser({
-            type: 'emma_transcription',
-            transcript: text
-          });
-          // Synthesize audio
-          this.synthesizeAndSendAudio(text).catch((e) => {
-            console.warn('🔇 TTS synth warning:', e?.message || e);
-          });
+        console.warn(`Falling back to server vault execution for ${toolName}`);
+      }
+    }
+
+    if (this.canUseServerTools(toolName)) {
+      try {
+        return await this.vaultService.execute(toolName, params);
+      } catch (error) {
+        console.warn(`Vault tool execution failed for ${toolName}:`, error?.message || error);
+        if (!this.canUseBrowserTools()) {
+          throw error;
         }
-      });
+        console.warn(`Retrying ${toolName} via browser after vault failure`);
+        return this.executeToolViaBrowser(toolName, params);
+      }
     }
 
-    // Handle errors
-    this.session.on('error', (error) => {
-      console.error('❌ Emma session error:', error);
-      this.sendToBrowser({
-        type: 'error',
-        message: error.message
-      });
-    });
+    throw new Error('No available execution path for requested tool');
+  }
 
-    console.log('✅ Event handlers set up for RealtimeAgent conversation');
+  canUseBrowserTools() {
+    return this.browserWs && this.browserWs.readyState === WebSocket.OPEN;
   }
 
-  /**
-   * Send user text - DIRECT CHAT API APPROACH
-   */
-  async sendUserText(text) {
-    try {
-      if (!text) return;
-      
-      console.log('📤 User message received:', text);
-      
-      // DIRECT APPROACH: Use OpenAI Chat API directly for reliable responses
-      const response = await fetch('https://api.openai.com/v1/chat/completions', {
-        method: 'POST',
-        headers: {
-          'Authorization': `Bearer ${process.env.OPENAI_API_KEY}`,
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({
-          model: 'gpt-4o-mini',
-          messages: [
-            {
-              role: 'system',
-              content: this.buildEmmaInstructions()
-            },
-            {
-              role: 'user',
-              content: text
-            }
-          ],
-          max_tokens: 300,
-          temperature: 0.7
-        })
-      });
+  canUseServerTools(toolName) {
+    return Boolean(this.vaultService && this.vaultService.canExecute(toolName));
+  }
 
-      if (!response.ok) {
-        throw new Error(`OpenAI API error: ${response.status}`);
-      }
+  executeToolViaBrowser(toolName, params) {
+    return new Promise((resolve, reject) => {
+      const callId = `${toolName}_${Date.now()}_${Math.random().toString(36).slice(2, 10)}`;
 
-      const data = await response.json();
-      const emmaResponse = data.choices[0]?.message?.content || "I'm having trouble responding right now.";
-      
-      console.log('📝 Emma responds:', emmaResponse);
-      
-      // Send Emma's response to browser
-      this.sendToBrowser({
-        type: 'emma_transcription',
-        transcript: emmaResponse
+      const timeout = setTimeout(() => {
+        this.pendingToolCalls.delete(callId);
+        reject(new Error(`Tool execution timeout for ${toolName}`));
+      }, 30000);
+
+      this.pendingToolCalls.set(callId, {
+        resolve: (value) => {
+          clearTimeout(timeout);
+          resolve(value);
+        },
+        reject: (error) => {
+          clearTimeout(timeout);
+          reject(error);
+        }
       });
-      
-      // Synthesize audio
-      await this.synthesizeAndSendAudio(emmaResponse);
-      
-    } catch (error) {
-      console.error('❌ Direct chat error:', error);
-      const fallbackResponse = "I'm here with you. Could you try saying that again?";
+
       this.sendToBrowser({
-        type: 'emma_transcription',
-        transcript: fallbackResponse
+        type: 'tool_request',
+        call_id: callId,
+        tool_name: toolName,
+        parameters: params
       });
-      this.synthesizeAndSendAudio(fallbackResponse).catch(() => {});
-    }
+    });
   }
 
   /**
-   * Server-side: Use OpenAI audio TTS for high-quality voice
-   * Fall back silently if not available
+   * Fetch an assistant reply from OpenAI, resolving tool calls as needed.
    */
-  async synthesizeAndSendAudio(text) {
-    try {
-      if (!text || text === this.lastSpokenText) {
-        console.log('🔇 Skipping TTS: empty or duplicate text');
-        return;
-      }
-      this.lastSpokenText = text;
-
-      const apiKey = process.env.OPENAI_API_KEY;
-      if (!apiKey) {
-        console.error('🔇 No OpenAI API key for TTS');
-        return;
-      }
+  async fetchAssistantReply() {
+    if (!this.getActiveApiKey()) {
+      return null;
+    }
 
-      console.log('🎤 Starting TTS synthesis for:', text.substring(0, 50) + '...');
+    const input = [
+      this.buildInputMessage('system', this.buildSystemPrompt()),
+      ...this.chatHistory.map((entry) => this.buildInputMessage(entry.role, entry.content))
+    ];
 
-      // Use OpenAI TTS endpoint
-      const response = await fetch('https://api.openai.com/v1/audio/speech', {
-        method: 'POST',
-        headers: {
-          'Authorization': `Bearer ${apiKey}`,
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({
-          model: 'tts-1',
-          voice: this.options.voice || 'alloy',
-          input: text,
-          response_format: 'mp3'
-        })
-      });
+    let response = await this.postToOpenAI('/v1/responses', {
+      model: this.options.model,
+      input,
+      tools: this.buildToolDefinitions(),
+      parallel_tool_calls: false,
+      metadata: { session_id: this.sessionId }
+    });
 
-      console.log('🎤 TTS API response status:', response.status);
+    while (response.required_action?.type === 'submit_tool_outputs') {
+      const toolCalls = response.required_action.submit_tool_outputs.tool_calls || [];
+      const toolOutputs = [];
+
+      for (const call of toolCalls) {
+        const args = this.safeParseArguments(call.function?.arguments);
+        let result;
+        try {
+          result = await this.requestBrowserTool(call.function?.name, args);
+        } catch (error) {
+          result = { error: error.message };
+        }
 
-      if (!response.ok) {
-        const err = await response.text();
-        console.error('🔇 TTS API error:', response.status, err);
-        throw new Error(`TTS API error ${response.status}: ${err}`);
+        toolOutputs.push({
+          tool_call_id: call.id,
+          output: JSON.stringify(result ?? null)
+        });
       }
 
-      const arrayBuffer = await response.arrayBuffer();
-      const base64Audio = Buffer.from(arrayBuffer).toString('base64');
-      
-      console.log('🎤 TTS synthesis complete, audio size:', base64Audio.length, 'chars');
-
-      this.sendToBrowser({
-        type: 'emma_audio',
-        encoding: 'base64/mp3',
-        audio: base64Audio
+      response = await this.postToOpenAI(`/v1/responses/${response.id}/submit_tool_outputs`, {
+        tool_outputs: toolOutputs
       });
+    }
 
-      console.log('📤 Sent OpenAI TTS audio to browser');
+    return this.extractResponseText(response);
+  }
 
-    } catch (error) {
-      console.error('🔇 TTS synthesis error:', error?.message || error);
-    }
+  buildInputMessage(role, text) {
+    const normalized = typeof text === 'string' ? text : '';
+    const contentType = role === 'assistant' ? 'output_text' : 'input_text';
+    return {
+      role,
+      content: [{ type: contentType, text: normalized }]
+    };
   }
 
   /**
-   * Request tool execution from browser (privacy-first)
+   * Extract assistant text from a Responses API payload.
    */
-  async requestBrowserTool(toolName, params) {
-    return new Promise((resolve, reject) => {
-      const callId = `tool_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
-      
-      // Send tool request to browser
-      this.sendToBrowser({
-        type: 'tool_request',
-        call_id: callId,
-        tool_name: toolName,
-        parameters: params
-      });
-
-      // Wait for browser response
-      const timeout = setTimeout(() => {
-        reject(new Error('Tool execution timeout'));
-      }, 30000);
+  extractResponseText(response) {
+    if (!response) return '';
+    if (typeof response.output_text === 'string' && response.output_text.trim()) {
+      return response.output_text.trim();
+    }
 
-      const handleResponse = (message) => {
-        if (message.type === 'tool_result' && message.call_id === callId) {
-          clearTimeout(timeout);
-          this.browserWs.off('message', handleResponse);
-          resolve(JSON.parse(message.result));
+    if (Array.isArray(response.output)) {
+      const parts = [];
+      for (const item of response.output) {
+        if (item.type === 'message') {
+          for (const content of item.content || []) {
+            if (content.type === 'text' && content.text) {
+              parts.push(content.text);
+            }
+            if (content.type === 'output_text' && content.text) {
+              parts.push(content.text);
+            }
+          }
         }
-      };
+      }
+      if (parts.length > 0) {
+        return parts.join(' ').trim();
+      }
+    }
 
-      this.browserWs.on('message', handleResponse);
-    });
+    return '';
+  }
+
+  safeParseArguments(argString) {
+    if (!argString) return {};
+    try {
+      return JSON.parse(argString);
+    } catch (error) {
+      console.warn('Failed to parse tool arguments:', argString, error);
+      return {};
+    }
   }
 
   /**
-   * Send message to browser
+   * Send a message to the browser client.
    */
   sendToBrowser(message) {
-    if (this.browserWs && this.browserWs.readyState === WebSocket.OPEN) {
+    if (!this.browserWs || this.browserWs.readyState !== WebSocket.OPEN) {
+      return;
+    }
+    try {
       this.browserWs.send(JSON.stringify(message));
-      console.log('📤 Sent to browser:', message.type);
+    } catch (error) {
+      console.error('Failed to send message to browser:', error);
     }
   }
 
   /**
-   * Stop Emma session
+   * Send assistant text and corresponding audio (if available).
    */
-  async stopSession() {
-    try {
-      this.isActive = false;
-      
-      if (this.session) {
-        if (this.session.close) {
-          await this.session.close();
-        } else if (this.session.disconnect) {
-          await this.session.disconnect(); // Fallback
-        }
-        this.session = null;
-      }
+  async sendAssistantMessage(text, { addToHistory = true } = {}) {
+    if (!text) {
+      this.sendToBrowser({ type: 'state_change', state: 'listening' });
+      return;
+    }
 
-      this.sendToBrowser({
-        type: 'session_ended',
-        message: 'Emma session ended'
-      });
+    if (addToHistory) {
+      this.chatHistory.push({ role: 'assistant', content: text });
+    }
 
-      console.log('🔇 Emma session stopped');
+    this.sendToBrowser({ type: 'state_change', state: 'speaking' });
+    this.sendToBrowser({ type: 'emma_transcription', transcript: text, source: 'chat' });
 
-    } catch (error) {
-      console.error('❌ Emma session cleanup error:', error);
-    }
+    await this.synthesizeAndSendAudio(text);
+
+    this.sendToBrowser({ type: 'state_change', state: 'listening' });
   }
 
   /**
-   * Update Emma's voice settings
+   * Generate a friendly fallback response.
    */
-  updateVoiceSettings(newSettings) {
-    this.options = { ...this.options, ...newSettings };
-    
-    // Update agent configuration
-    if (this.agent) {
-      this.agent.voice = newSettings.voice || this.options.voice;
-      this.agent.instructions = this.buildEmmaInstructions();
-      
-      console.log('🎛️ Emma voice settings updated:', newSettings);
+  generateFallbackResponse(userText) {
+    if (!userText) {
+      return "I'm still here with you. Could you share that once more?";
     }
+    return "I'm here with you and want to understand completely. Could you say that another way while I double-check my notes?";
   }
 
   /**
-   * Handle real-time audio for immediate conversation
+   * Convert text to audio via OpenAI TTS (if possible).
    */
-  async handleRealtimeAudio(base64Pcm16) {
-    try {
-      // Accumulate audio chunks until we detect speech
-      if (!this._audioBuffer) this._audioBuffer = '';
-      this._audioBuffer += base64Pcm16;
-      
-      // Simple voice activity detection - if we have enough audio data, trigger transcription
-      if (this._audioBuffer.length > 50000) { // ~1-2 seconds of audio
-        console.log('🎤 Processing real-time audio chunk...');
-        
-        // Use OpenAI Whisper for real-time transcription
-        const transcription = await this.transcribeAudio(this._audioBuffer);
-        
-        if (transcription && transcription.length > 5) {
-          console.log('📝 Real-time transcription:', transcription);
-          
-          // Send to Emma immediately
-          await this.sendUserText(transcription);
-        }
-        
-        // Reset buffer
-        this._audioBuffer = '';
-      }
-      
-    } catch (error) {
-      console.warn('🔇 Real-time audio error:', error?.message || error);
+  async synthesizeAndSendAudio(text) {
+    if (!text || text === this.lastSpokenText) {
+      return;
+    }
+
+    this.lastSpokenText = text;
+
+    if (!this.getActiveApiKey()) {
+      return;
     }
-  }
 
-  /**
-   * Transcribe audio using OpenAI Whisper
-   */
-  async transcribeAudio(base64Audio) {
     try {
-      const apiKey = process.env.OPENAI_API_KEY;
-      if (!apiKey) return null;
-
-      // Convert base64 to buffer for Whisper API
-      const audioBuffer = Buffer.from(base64Audio, 'base64');
-      
-      // Create form data for Whisper
-      const FormData = require('form-data');
-      const form = new FormData();
-      form.append('file', audioBuffer, {
-        filename: 'audio.wav',
-        contentType: 'audio/wav'
-      });
-      form.append('model', 'whisper-1');
-      form.append('language', 'en');
+      const apiKey = this.getActiveApiKey();
+      if (!apiKey) {
+        return;
+      }
 
-      const response = await fetch('https://api.openai.com/v1/audio/transcriptions', {
+      const response = await fetch('https://api.openai.com/v1/audio/speech', {
         method: 'POST',
         headers: {
-          'Authorization': `Bearer ${apiKey}`,
-          ...form.getHeaders()
+          Authorization: `Bearer ${apiKey}`,
+          'Content-Type': 'application/json'
         },
-        body: form
+        body: JSON.stringify({
+          model: 'tts-1-hd',
+          voice: this.options.voice,
+          input: text,
+          response_format: 'mp3'
+        })
       });
 
       if (!response.ok) {
-        console.warn('🔇 Whisper API error:', response.status);
-        return null;
+        throw new Error(`TTS request failed with status ${response.status}`);
       }
 
-      const data = await response.json();
-      return data.text || null;
-      
+      const arrayBuffer = await response.arrayBuffer();
+      const base64Audio = Buffer.from(arrayBuffer).toString('base64');
+
+      this.sendToBrowser({
+        type: 'emma_audio',
+        encoding: 'base64/mp3',
+        audio: base64Audio
+      });
     } catch (error) {
-      console.warn('🔇 Transcription error:', error?.message || error);
-      return null;
+      console.warn('TTS synthesis error:', error?.message || error);
     }
   }
 
-  /**
-   * Handle audio chunks (legacy - kept for compatibility)
-   */
-  async appendAudioChunk(base64Pcm16) {
-    // Legacy method - now handled by handleRealtimeAudio
-    return;
+  async postToOpenAI(path, body) {
+    const apiKey = this.getActiveApiKey();
+    if (!apiKey) {
+      throw new Error('OpenAI API key not available');
+    }
+
+    const response = await fetch(`https://api.openai.com${path}`, {
+      method: 'POST',
+      headers: {
+        Authorization: `Bearer ${apiKey}`,
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(body)
+    });
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      throw new Error(`OpenAI request failed (${response.status}): ${errorText}`);
+    }
+
+    return response.json();
+  }
+
+  updateApiKey(newKey) {
+    const normalized = this.normalizeApiKey(newKey);
+    this.runtimeApiKey = normalized;
+    this.hasOpenAI = Boolean(this.runtimeApiKey);
+
+    const status = this.runtimeApiKey ? 'updated' : 'cleared';
+    const masked = this.runtimeApiKey ? this.maskApiKey(this.runtimeApiKey) : 'none';
+    console.log(`EmmaServerAgent runtime API key ${status}: ${masked}`);
+  }
+
+  getActiveApiKey() {
+    return this.runtimeApiKey;
+  }
+
+  normalizeApiKey(value) {
+    if (!value || typeof value !== 'string') return null;
+    const trimmed = value.trim();
+    return trimmed.length ? trimmed : null;
+  }
+
+  maskApiKey(value) {
+    if (!value) return 'none';
+    const suffix = value.slice(-4);
+    return `****${suffix}`;
   }
 }
 
diff --git a/emma-cloud.html b/emma-cloud.html
index ec2a4e0a..c127f76e 100644
--- a/emma-cloud.html
+++ b/emma-cloud.html
@@ -4,7 +4,10 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Emma Cloud - Intelligent Memory Sync</title>
+  <link rel="stylesheet" href="css/theme-tokens.css">
   <link rel="stylesheet" href="css/main.css">
+  <script src="themes/theme-catalog.js"></script>
+  <script src="js/theme-manager.js"></script>
   <style>
     body {
       background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
@@ -186,7 +189,7 @@ <h3 class="feature-title">Pro</h3>
     </p>
   </div>
   
-  <script>
+  <script nonce="c3RhdGljLWlubGluZQ==">
     (function(){
       const btn = document.getElementById('cloud-early-access');
       if (btn) {
@@ -197,4 +200,4 @@ <h3 class="feature-title">Pro</h3>
     })();
   </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/emma-vault-extension-fixed/README.md b/emma-vault-extension-fixed/README.md
index dd5d4d75..71610f0e 100644
--- a/emma-vault-extension-fixed/README.md
+++ b/emma-vault-extension-fixed/README.md
@@ -1,118 +1,3 @@
-# 🔒 Emma Vault Bridge Extension
+# Emma Vault Extension Docs Relocated
 
-**Real-time synchronization between Emma Web App and your local .emma vault files**
-
-Built with love for Debbe and everyone who cherishes their memories 💜
-
-## 🌟 What It Does
-
-The Emma Vault Bridge extension enables:
-- ✅ **Real-time saves** - Every change in Emma instantly saves to your local .emma file
-- ✅ **Complete ownership** - Your memories stay on YOUR computer
-- ✅ **No cloud required** - Works 100% offline
-- ✅ **Zero accounts** - No passwords, no sign-ups, just install and go
-- ✅ **Privacy first** - Your data never leaves your device
-
-## 📦 Installation
-
-### Quick Install (Chrome/Edge)
-
-1. **Download the extension** (when available on Chrome Web Store)
-2. **Click "Add to Chrome"**
-3. **Done!** The Emma icon appears in your toolbar
-
-### Developer Install (For Testing)
-
-1. **Clone or download this folder** (`emma-vault-extension`)
-2. **Open Chrome/Edge extensions** page:
-   - Chrome: `chrome://extensions`
-   - Edge: `edge://extensions`
-3. **Enable "Developer mode"** (toggle in top right)
-4. **Click "Load unpacked"**
-5. **Select the `emma-vault-extension` folder**
-6. **Done!** Extension is now installed
-
-## 🚀 Getting Started
-
-### First Time Setup (30 seconds)
-
-1. **Visit Emma Web App** at https://emma-vault.onrender.com
-2. **Click the Emma extension icon** in your toolbar
-3. **Click "Enable Sync"**
-4. **Choose where to save your .emma file**
-   - Suggestion: Create a folder called "Emma Memories"
-   - Give it a meaningful name like "debbe-memories.emma"
-5. **That's it!** Real-time sync is now active
-
-### Daily Use
-
-Once set up, the extension works automatically:
-- 🟢 **Green dot** = Synced and ready
-- 🟡 **Yellow spinner** = Saving changes
-- 🔴 **Red dot** = Issue (click for details)
-
-## 🎯 Features
-
-### Real-time Synchronization
-- Every memory, photo, and note saves instantly
-- No manual save button needed
-- Works even with slow internet
-
-### Status Indicators
-- Extension badge shows sync status
-- In-app notifications for sync events
-- Clear error messages if issues arise
-
-### Privacy & Security
-- Your vault passphrase never goes to any server
-- All encryption happens in your browser
-- Extension only accesses Emma Web App pages
-
-## 🛠️ Troubleshooting
-
-### Extension Not Detected?
-1. Refresh the Emma Web App page
-2. Make sure extension is enabled
-3. Check that you're on the correct website
-
-### Sync Not Working?
-1. Click extension icon
-2. Check if sync is enabled
-3. Try selecting your vault file again
-
-### File Access Issues?
-- Chrome may ask for permission to access files
-- Click "Allow" when prompted
-- Make sure the file isn't open in another program
-
-## 💡 Pro Tips
-
-1. **Backup regularly** - Though the .emma file is always current, make copies!
-2. **Use meaningful names** - Name your vault file something you'll remember
-3. **Check the icon** - Quick glance shows if everything is working
-
-## 🔐 Privacy Promise
-
-- **No tracking** - We don't collect any usage data
-- **No analytics** - Your privacy is absolute
-- **No servers** - Everything happens on your device
-- **Open source** - You can verify our code
-
-## 🤝 Support
-
-Need help? We're here for you:
-- **GitHub Issues**: Report bugs or request features
-- **Email**: support@emma-vault.com (coming soon)
-- **Documentation**: Full guides at emma-vault.com/docs
-
-## 💜 Dedication
-
-This extension is dedicated to Debbe and all the mothers, fathers, grandparents, and loved ones whose memories we're honored to help preserve. Every line of code is written with love and respect for the preciousness of human memory.
-
----
-
-**Version**: 1.0.0  
-**License**: MIT  
-**Made with**: Love, JavaScript, and many cups of tea ☕
-
-*"Your memories, always with you"*
+All documentation for the extension now lives in `../docs/extension/`. Visit that folder for FINAL_STATUS, INSTALL, TESTING, and the full README.
diff --git a/emma-vault-extension-fixed/background.js b/emma-vault-extension-fixed/background.js
index d0cb0b8e..187214c9 100644
--- a/emma-vault-extension-fixed/background.js
+++ b/emma-vault-extension-fixed/background.js
@@ -70,7 +70,7 @@ chrome.runtime.onInstalled.addListener((details) => {
   console.log('Emma Vault Extension installed - Ready to preserve memories');
   
   // Set initial badge
-  chrome.action.setBadgeBackgroundColor({ color: '#8B5CF6' });
+  chrome.action.setBadgeBackgroundColor({ color: '#6F63D9' });
   chrome.action.setBadgeText({ text: '' });
   
   // Initialize storage
diff --git a/emma-vault-extension-fixed/content-script.js b/emma-vault-extension-fixed/content-script.js
index 3612b6d4..fa1175aa 100644
--- a/emma-vault-extension-fixed/content-script.js
+++ b/emma-vault-extension-fixed/content-script.js
@@ -93,7 +93,7 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
       window.postMessage({
         type: 'EMMA_VAULT_CHECK',
         messageId: messageId
-      }, '*');
+      }, window.location.origin);
       
       // Timeout after 1 second
       setTimeout(() => {
@@ -129,7 +129,7 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
             type: 'EMMA_VAULT_SAVE',
             messageId: saveMessageId,
             memoryData: request.memoryData
-          }, '*');
+          }, window.location.origin);
           
           // Timeout after 10 seconds
           setTimeout(() => {
@@ -1396,7 +1396,7 @@ function injectStyles() {
     
     .emma-sync-progress-bar {
       height: 100%;
-      background: linear-gradient(90deg, #8B5CF6, #EC4899);
+      background: linear-gradient(90deg, #6F63D9, #D06FA8);
       border-radius: 2px;
       transition: width 0.3s ease;
     }
diff --git a/emma-vault-extension-fixed/content-universal.js b/emma-vault-extension-fixed/content-universal.js
index 542b48f2..99574640 100644
--- a/emma-vault-extension-fixed/content-universal.js
+++ b/emma-vault-extension-fixed/content-universal.js
@@ -1275,7 +1275,7 @@ if (window.emmaUniversalInjected) {
             right: 24px !important;
             width: 56px !important;
             height: 56px !important;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%) !important;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #deb3e4 100%) !important;
             border: 2px solid white !important;
             border-radius: 50% !important;
             cursor: pointer !important;
@@ -1924,7 +1924,7 @@ if (window.emmaUniversalInjected) {
     createShader(type, source) { const shader = this.gl.createShader(type); this.gl.shaderSource(shader, source); this.gl.compileShader(shader); if (!this.gl.getShaderParameter(shader, this.gl.COMPILE_STATUS)) { console.error('Shader compile error:', this.gl.getShaderInfoLog(shader)); this.gl.deleteShader(shader); return null; } return shader; }
     createProgram(vertexSource, fragmentSource) { const vertexShader = this.createShader(this.gl.VERTEX_SHADER, vertexSource); const fragmentShader = this.createShader(this.gl.FRAGMENT_SHADER, fragmentSource); if (!vertexShader || !fragmentShader) return null; const program = this.gl.createProgram(); this.gl.attachShader(program, vertexShader); this.gl.attachShader(program, fragmentShader); this.gl.linkProgram(program); if (!this.gl.getProgramParameter(program, this.gl.LINK_STATUS)) { console.error('Program link error:', this.gl.getProgramInfoLog(program)); this.gl.deleteProgram(program); return null; } return program; }
     useFallback() {
-      this.container.innerHTML = '<div style="width: 100%; height: 100%; background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); border-radius: 50%; animation: float 3s ease-in-out infinite;"></div>';
+      this.container.innerHTML = '<div style="width: 100%; height: 100%; background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #deb3e4 100%); border-radius: 50%; animation: float 3s ease-in-out infinite;"></div>';
     }
   }
 
@@ -2077,9 +2077,9 @@ if (window.emmaUniversalInjected) {
     style.textContent = `
       /* Emma CSS Variables (same as dashboard) */
       :root {
-        --emma-gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
+        --emma-gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #deb3e4 100%);
         --emma-purple: #764ba2;
-        --emma-pink: #f093fb;
+        --emma-pink: #deb3e4;
         --emma-blue: #667eea;
       }
 
@@ -2167,7 +2167,7 @@ if (window.emmaUniversalInjected) {
       /* Header with Orb */
       .emma-panel-header {
         padding: 20px;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #deb3e4 100%);
         border-radius: 20px 20px 0 0;
         display: flex;
         justify-content: space-between;
@@ -2283,7 +2283,7 @@ if (window.emmaUniversalInjected) {
       .emma-action-card:hover {
         transform: translateY(-2px);
         background: rgba(255, 255, 255, 0.08);
-        border-color: rgba(240, 147, 251, 0.3);
+        border-color: rgba(222, 179, 228, 0.3);
         box-shadow: 0 8px 24px rgba(118, 75, 162, 0.2);
       }
 
@@ -2364,9 +2364,9 @@ if (window.emmaUniversalInjected) {
 
       .analysis-value {
         font-size: 12px;
-        color: rgba(240, 147, 251, 0.9);
+        color: rgba(222, 179, 228, 0.9);
         font-weight: 600;
-        background: rgba(240, 147, 251, 0.1);
+        background: rgba(222, 179, 228, 0.1);
         padding: 4px 8px;
         border-radius: 6px;
       }
@@ -2854,11 +2854,11 @@ if (window.emmaUniversalInjected) {
     const panelOrb = document.getElementById('emma-panel-orb');
 
     if (floatingOrb) {
-      floatingOrb.innerHTML = '<div style="width: 32px; height: 32px; background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); border-radius: 50%; box-shadow: 0 4px 16px rgba(118, 75, 162, 0.4); animation: float 3s ease-in-out infinite;"></div>';
+      floatingOrb.innerHTML = '<div style="width: 32px; height: 32px; background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #deb3e4 100%); border-radius: 50%; box-shadow: 0 4px 16px rgba(118, 75, 162, 0.4); animation: float 3s ease-in-out infinite;"></div>';
     }
 
     if (panelOrb) {
-      panelOrb.innerHTML = '<div style="width: 48px; height: 48px; background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); border-radius: 50%; box-shadow: 0 4px 16px rgba(118, 75, 162, 0.4); animation: float 3s ease-in-out infinite;"></div>';
+      panelOrb.innerHTML = '<div style="width: 48px; height: 48px; background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #deb3e4 100%); border-radius: 50%; box-shadow: 0 4px 16px rgba(118, 75, 162, 0.4); animation: float 3s ease-in-out infinite;"></div>';
     }
 
   }
@@ -2875,7 +2875,7 @@ if (window.emmaUniversalInjected) {
 
     if (!window.EmmaOrb) {
       console.error('❌ NO EMMA ORB CLASS FOUND! Using fallback.');
-      orbContainer.innerHTML = '<div style="width: 32px; height: 32px; background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); border-radius: 50%; box-shadow: 0 4px 16px rgba(118, 75, 162, 0.4); animation: float 3s ease-in-out infinite;"></div>';
+      orbContainer.innerHTML = '<div style="width: 32px; height: 32px; background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #deb3e4 100%); border-radius: 50%; box-shadow: 0 4px 16px rgba(118, 75, 162, 0.4); animation: float 3s ease-in-out infinite;"></div>';
       return;
     }
 
@@ -2892,7 +2892,7 @@ if (window.emmaUniversalInjected) {
       console.error('💥 FAILED TO CREATE YOUR ORB:', error);
       console.error('Error stack:', error.stack);
       // Beautiful gradient fallback
-      orbContainer.innerHTML = '<div style="width: 32px; height: 32px; background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); border-radius: 50%; box-shadow: 0 4px 16px rgba(118, 75, 162, 0.4); animation: float 3s ease-in-out infinite;"></div>';
+      orbContainer.innerHTML = '<div style="width: 32px; height: 32px; background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #deb3e4 100%); border-radius: 50%; box-shadow: 0 4px 16px rgba(118, 75, 162, 0.4); animation: float 3s ease-in-out infinite;"></div>';
     }
   }
 
@@ -2918,11 +2918,11 @@ if (window.emmaUniversalInjected) {
       } catch (error) {
         console.warn('Failed to initialize panel orb:', error);
         // Beautiful gradient fallback (NO BRAIN EMOJI!)
-        orbContainer.innerHTML = '<div style="width: 56px; height: 56px; background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); border-radius: 50%; box-shadow: 0 4px 16px rgba(118, 75, 162, 0.4); animation: float 3s ease-in-out infinite;"></div>';
+        orbContainer.innerHTML = '<div style="width: 56px; height: 56px; background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #deb3e4 100%); border-radius: 50%; box-shadow: 0 4px 16px rgba(118, 75, 162, 0.4); animation: float 3s ease-in-out infinite;"></div>';
       }
     } else if (orbContainer) {
       // Beautiful gradient fallback (NO BRAIN EMOJI!)
-      orbContainer.innerHTML = '<div style="width: 56px; height: 56px; background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); border-radius: 50%; box-shadow: 0 4px 16px rgba(118, 75, 162, 0.4); animation: float 3s ease-in-out infinite;"></div>';
+      orbContainer.innerHTML = '<div style="width: 56px; height: 56px; background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #deb3e4 100%); border-radius: 50%; box-shadow: 0 4px 16px rgba(118, 75, 162, 0.4); animation: float 3s ease-in-out infinite;"></div>';
     }
   }
 
@@ -3275,7 +3275,7 @@ if (window.emmaUniversalInjected) {
     try {
       const analysis = await emmaEngine.analyze();
       analysisDiv.innerHTML = `
-      <div style="padding: 12px; background: rgba(139, 92, 246, 0.1); border: 1px solid rgba(139, 92, 246, 0.3); border-radius: 12px; font-size: 13px; color: white;">
+      <div style="padding: 12px; background: rgba(111, 99, 217, 0.1); border: 1px solid rgba(111, 99, 217, 0.3); border-radius: 12px; font-size: 13px; color: white;">
         <strong style="color: #a78bfa;">Page Analysis:</strong><br>
         <div style="margin-top: 8px; line-height: 1.4;">
           Type: <span style="color: #c4b5fd;">${context.type}</span> (${context.platform})<br>
@@ -3287,7 +3287,7 @@ if (window.emmaUniversalInjected) {
     } catch (error) {
       console.warn('Emma: Error updating analysis panel:', error);
       analysisDiv.innerHTML = `
-      <div style="padding: 12px; background: rgba(139, 92, 246, 0.1); border: 1px solid rgba(139, 92, 246, 0.3); border-radius: 12px; font-size: 13px; color: white;">
+      <div style="padding: 12px; background: rgba(111, 99, 217, 0.1); border: 1px solid rgba(111, 99, 217, 0.3); border-radius: 12px; font-size: 13px; color: white;">
         <strong style="color: #a78bfa;">Page Analysis:</strong><br>
         <div style="margin-top: 8px; line-height: 1.4;">
           Type: <span style="color: #c4b5fd;">${context.type}</span> (${context.platform})<br>
@@ -4015,8 +4015,8 @@ if (window.emmaUniversalInjected) {
         }
         .emma-photo-selectable:hover {
           transform: scale(1.05) !important;
-          box-shadow: 0 8px 25px rgba(139, 92, 246, 0.3) !important;
-          border: 3px solid #8b5cf6 !important;
+          box-shadow: 0 8px 25px rgba(111, 99, 217, 0.3) !important;
+          border: 3px solid #6f63d9 !important;
         }
         .emma-photo-selected {
           border: 3px solid #10b981 !important;
@@ -4045,7 +4045,7 @@ if (window.emmaUniversalInjected) {
           right: 20px !important;
           background: rgba(20, 20, 30, 0.95) !important;
           backdrop-filter: blur(20px) !important;
-          border: 1px solid rgba(139, 92, 246, 0.3) !important;
+          border: 1px solid rgba(111, 99, 217, 0.3) !important;
           border-radius: 16px !important;
           padding: 20px !important;
           color: white !important;
@@ -4952,7 +4952,7 @@ window.forceEmmaUI = function() {
           right: 24px !important;
           width: 56px !important;
           height: 56px !important;
-          background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%) !important;
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #deb3e4 100%) !important;
           border: 2px solid white !important;
           border-radius: 50% !important;
           cursor: pointer !important;
diff --git a/emma-vault-extension-fixed/emma-orb.js b/emma-vault-extension-fixed/emma-orb.js
index 79a79f11..8f7118c5 100644
--- a/emma-vault-extension-fixed/emma-orb.js
+++ b/emma-vault-extension-fixed/emma-orb.js
@@ -405,7 +405,7 @@ class EmmaOrb {
       <div style="
         width: 100%;
         height: 100%;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #deb3e4 100%);
         border-radius: 50%;
         animation: float 3s ease-in-out infinite;
       "></div>
diff --git a/emma-vault-extension-fixed/generate-icons.html b/emma-vault-extension-fixed/generate-icons.html
index 732f5fc5..403cb483 100644
--- a/emma-vault-extension-fixed/generate-icons.html
+++ b/emma-vault-extension-fixed/generate-icons.html
@@ -10,7 +10,7 @@ <h1>Emma Vault Extension Icon Generator</h1>
   
   <canvas id="canvas"></canvas>
   
-  <script>
+  <script nonce="c3RhdGljLWlubGluZQ==">
     // Generate icons at different sizes
     const sizes = [16, 32, 48, 128];
     
@@ -23,8 +23,8 @@ <h1>Emma Vault Extension Icon Generator</h1>
       
       // Background - gradient
       const gradient = ctx.createLinearGradient(0, 0, size, size);
-      gradient.addColorStop(0, '#8B5CF6');
-      gradient.addColorStop(1, '#EC4899');
+      gradient.addColorStop(0, '#6F63D9');
+      gradient.addColorStop(1, '#D06FA8');
       ctx.fillStyle = gradient;
       ctx.fillRect(0, 0, size, size);
       
@@ -47,7 +47,7 @@ <h1>Emma Vault Extension Icon Generator</h1>
       ctx.stroke();
       
       // Keyhole
-      ctx.fillStyle = '#8B5CF6';
+      ctx.fillStyle = '#6F63D9';
       ctx.beginPath();
       ctx.arc(size / 2, bodyY + bodySize * 0.35, size * 0.06, 0, Math.PI * 2);
       ctx.fill();
diff --git a/emma-vault-extension-fixed/popup-emergency.css b/emma-vault-extension-fixed/popup-emergency.css
index c116ed6e..0fe0d679 100644
--- a/emma-vault-extension-fixed/popup-emergency.css
+++ b/emma-vault-extension-fixed/popup-emergency.css
@@ -48,7 +48,7 @@ body {
 .logo-gradient {
   font-size: 2.5rem;
   font-weight: 700;
-  background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);
+  background: linear-gradient(135deg, #6F63D9 0%, #D06FA8 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
@@ -102,9 +102,9 @@ body {
   width: 84px;
   height: 84px;
   border-radius: 50%;
-  background: linear-gradient(135deg, #8B5CF6, #EC4899, #F59E0B, #10B981);
+  background: linear-gradient(135deg, #6F63D9, #D06FA8, #F59E0B, #10B981);
   margin: 0 auto;
-  box-shadow: 0 0 30px rgba(139, 92, 246, 0.4);
+  box-shadow: 0 0 30px rgba(111, 99, 217, 0.4);
 }
 
 .drop-zone-title {
@@ -142,7 +142,7 @@ body {
 }
 
 .btn-primary {
-  background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);
+  background: linear-gradient(135deg, #6F63D9 0%, #D06FA8 100%);
   color: white;
 }
 
diff --git a/emma-vault-extension-fixed/popup-emma-brand.css b/emma-vault-extension-fixed/popup-emma-brand.css
index 6fa29845..447c08b8 100644
--- a/emma-vault-extension-fixed/popup-emma-brand.css
+++ b/emma-vault-extension-fixed/popup-emma-brand.css
@@ -6,11 +6,11 @@
 
 /* Emma Brand CSS Variables - EXACT from web app */
 :root {
-  --emma-gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
+  --emma-gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #deb3e4 100%);
   --emma-gradient-2: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #a855f7 100%);
   --emma-bg-gradient: linear-gradient(135deg, #1a1033 0%, #2d1b69 50%, #0f0c29 100%);
   --emma-purple: #764ba2;
-  --emma-pink: #f093fb;
+  --emma-pink: #deb3e4;
   --emma-dark: #1a1033;
   --emma-card-bg: rgba(255, 255, 255, 0.05);
   --emma-border: rgba(255, 255, 255, 0.1);
@@ -21,7 +21,7 @@
   --emma-error: #f87171;
   --emma-warning: #fbbf24;
   --emma-glass: rgba(255, 255, 255, 0.1);
-  --emma-glow: 0 8px 32px rgba(139, 92, 246, 0.15);
+  --emma-glow: 0 8px 32px rgba(111, 99, 217, 0.15);
 }
 
 /* Kill ALL animations to prevent shaking */
@@ -75,7 +75,7 @@ body {
   width: 100%;
   height: 100%;
   background: radial-gradient(circle at 20% 20%, rgba(102, 126, 234, 0.2) 0%, transparent 50%),
-              radial-gradient(circle at 80% 80%, rgba(240, 147, 251, 0.2) 0%, transparent 50%);
+              radial-gradient(circle at 80% 80%, rgba(222, 179, 228, 0.2) 0%, transparent 50%);
   z-index: 0;
   pointer-events: none;
 }
@@ -395,14 +395,14 @@ body {
 /* Emma Orb Button */
 .emma-orb-btn {
   background: var(--emma-gradient-2);
-  border: 2px solid rgba(139, 92, 246, 0.3);
-  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.2);
+  border: 2px solid rgba(111, 99, 217, 0.3);
+  box-shadow: 0 4px 16px rgba(111, 99, 217, 0.2);
 }
 
 .emma-orb-btn:hover {
   background: var(--emma-gradient-1);
-  border-color: rgba(139, 92, 246, 0.5);
-  box-shadow: 0 6px 20px rgba(139, 92, 246, 0.3);
+  border-color: rgba(111, 99, 217, 0.5);
+  box-shadow: 0 6px 20px rgba(111, 99, 217, 0.3);
 }
 
 .action-orb {
diff --git a/emma-vault-extension-fixed/popup-vault-locked.css b/emma-vault-extension-fixed/popup-vault-locked.css
index 370cfb48..9c3ab9d9 100644
--- a/emma-vault-extension-fixed/popup-vault-locked.css
+++ b/emma-vault-extension-fixed/popup-vault-locked.css
@@ -38,7 +38,7 @@
   height: 80px;
   margin: 0 auto 20px;
   border-radius: 50%;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #deb3e4 100%);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -46,7 +46,7 @@
   animation: emma-pulse 2s ease-in-out infinite;
   box-shadow: 
     0 0 30px rgba(118, 75, 162, 0.4),
-    0 0 60px rgba(240, 147, 251, 0.2);
+    0 0 60px rgba(222, 179, 228, 0.2);
 }
 
 .vault-locked-orb::before {
@@ -59,7 +59,7 @@
 .vault-locked-title {
   font-size: 24px;
   font-weight: 700;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #deb3e4 100%);
   background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
@@ -107,7 +107,7 @@
 }
 
 .vault-unlock-btn {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #deb3e4 100%);
   border: none;
   border-radius: 8px;
   padding: 12px 16px;
@@ -191,10 +191,10 @@
 @keyframes emma-pulse {
   0%, 100% {
     transform: scale(1);
-    box-shadow: 0 0 30px rgba(118, 75, 162, 0.4), 0 0 60px rgba(240, 147, 251, 0.2);
+    box-shadow: 0 0 30px rgba(118, 75, 162, 0.4), 0 0 60px rgba(222, 179, 228, 0.2);
   }
   50% {
     transform: scale(1.05);
-    box-shadow: 0 0 40px rgba(118, 75, 162, 0.6), 0 0 80px rgba(240, 147, 251, 0.3);
+    box-shadow: 0 0 40px rgba(118, 75, 162, 0.6), 0 0 80px rgba(222, 179, 228, 0.3);
   }
 }
diff --git a/emma-vault-extension-fixed/popup.css b/emma-vault-extension-fixed/popup.css
index ccaf5bd3..e20c7def 100644
--- a/emma-vault-extension-fixed/popup.css
+++ b/emma-vault-extension-fixed/popup.css
@@ -5,10 +5,10 @@
 
 /* CSS Variables - Emma Design System */
 :root {
-  --emma-primary: #8B5CF6;
+  --emma-primary: #6F63D9;
   --emma-primary-light: #A78BFA;
   --emma-primary-dark: #7C3AED;
-  --emma-secondary: #EC4899;
+  --emma-secondary: #D06FA8;
   --emma-success: #10B981;
   --emma-warning: #F59E0B;
   --emma-error: #EF4444;
@@ -18,13 +18,13 @@
   --emma-glass-border: rgba(255, 255, 255, 0.2);
   --emma-glass-hover: rgba(255, 255, 255, 0.15);
   --emma-backdrop: blur(20px);
-  --emma-glow: 0 8px 32px rgba(139, 92, 246, 0.15);
-  --emma-glow-hover: 0 12px 48px rgba(139, 92, 246, 0.25);
+  --emma-glow: 0 8px 32px rgba(111, 99, 217, 0.15);
+  --emma-glow-hover: 0 12px 48px rgba(111, 99, 217, 0.25);
   
   /* Emma Gradients */
-  --emma-gradient-1: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);
+  --emma-gradient-1: linear-gradient(135deg, #6F63D9 0%, #D06FA8 100%);
   --emma-gradient-2: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  --emma-gradient-orb: linear-gradient(135deg, #8B5CF6, #EC4899, #F59E0B, #10B981);
+  --emma-gradient-orb: linear-gradient(135deg, #6F63D9, #D06FA8, #F59E0B, #10B981);
   
   /* Text Colors */
   --emma-text: #FFFFFF;
@@ -86,7 +86,7 @@ body {
   -webkit-text-fill-color: transparent;
   background-clip: text;
   margin-bottom: 8px;
-  filter: drop-shadow(0 2px 8px rgba(139, 92, 246, 0.3));
+  filter: drop-shadow(0 2px 8px rgba(111, 99, 217, 0.3));
 }
 
 .emma-tagline {
@@ -151,7 +151,7 @@ body {
   position: relative;
   /* Removed animation temporarily to fix shaking */
   box-shadow: 
-    0 0 30px rgba(139, 92, 246, 0.4),
+    0 0 30px rgba(111, 99, 217, 0.4),
     inset 0 0 20px rgba(255, 255, 255, 0.1);
 }
 
@@ -536,7 +536,7 @@ body {
 .form-group select:focus {
   outline: none;
   border-color: var(--emma-primary);
-  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);
+  box-shadow: 0 0 0 2px rgba(111, 99, 217, 0.2);
 }
 
 .form-group input::placeholder,
@@ -563,7 +563,7 @@ body {
   background: var(--emma-gradient-1);
   border-radius: 50%;
   cursor: pointer;
-  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
+  box-shadow: 0 2px 8px rgba(111, 99, 217, 0.3);
 }
 
 .form-actions {
diff --git a/emma-vault-extension-fixed/popup.html b/emma-vault-extension-fixed/popup.html
index 97d6b031..3dd95aad 100644
--- a/emma-vault-extension-fixed/popup.html
+++ b/emma-vault-extension-fixed/popup.html
@@ -265,9 +265,9 @@ <h3 class="vault-name" id="activeVaultName">My Memories</h3>
 
   </div>
 
-  <script src="emma-orb.js"></script>
-  <script src="vault-state-monitor.js"></script>
-  <script src="popup-vault-checker.js"></script>
-  <script src="popup.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="emma-orb.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="vault-state-monitor.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="popup-vault-checker.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="popup.js"></script>
 </body>
 </html>
diff --git a/emma-vault-extension-fixed/popup.js b/emma-vault-extension-fixed/popup.js
index 2fc0a59c..d59da8bb 100644
--- a/emma-vault-extension-fixed/popup.js
+++ b/emma-vault-extension-fixed/popup.js
@@ -399,7 +399,7 @@ class EmmaVaultExtension {
       .unlock-overlay-content {
         position: relative;
         background: rgba(17, 17, 27, 0.98);
-        border: 1px solid rgba(134, 88, 255, 0.3);
+        border: 1px solid rgba(111, 99, 217, 0.3);
         border-radius: 20px;
         padding: 32px;
         max-width: 400px;
@@ -457,7 +457,7 @@ class EmmaVaultExtension {
         width: 100%;
         padding: 16px 20px 16px 50px;
         background: rgba(255, 255, 255, 0.1);
-        border: 1px solid rgba(134, 88, 255, 0.3);
+        border: 1px solid rgba(111, 99, 217, 0.3);
         border-radius: 12px;
         color: white;
         font-size: 16px;
@@ -467,9 +467,9 @@ class EmmaVaultExtension {
       }
       
       .unlock-input:focus {
-        border-color: rgba(134, 88, 255, 0.6);
+        border-color: rgba(111, 99, 217, 0.6);
         background: rgba(255, 255, 255, 0.15);
-        box-shadow: 0 0 20px rgba(134, 88, 255, 0.2);
+        box-shadow: 0 0 20px rgba(111, 99, 217, 0.2);
       }
       
       .unlock-input::placeholder {
@@ -505,13 +505,13 @@ class EmmaVaultExtension {
       }
       
       .unlock-btn.primary {
-        background: linear-gradient(135deg, #8658ff, #f093fb);
+        background: linear-gradient(135deg, #6f63d9, #deb3e4);
         color: white;
       }
       
       .unlock-btn.primary:hover {
         transform: translateY(-2px);
-        box-shadow: 0 8px 25px rgba(134, 88, 255, 0.4);
+        box-shadow: 0 8px 25px rgba(111, 99, 217, 0.4);
       }
       
       .unlock-btn.secondary {
@@ -1432,13 +1432,13 @@ class EmmaVaultExtension {
           <h2>🔐 Unlock Vault</h2>
           <p>Enter the passphrase for your encrypted vault:</p>
           <p class="file-name" style="
-            background: rgba(134, 88, 255, 0.2);
+            background: rgba(111, 99, 217, 0.2);
             padding: 8px 16px;
             border-radius: 12px;
             font-size: 14px;
             font-weight: 600;
             color: rgba(255, 255, 255, 0.9);
-            border: 1px solid rgba(134, 88, 255, 0.3);
+            border: 1px solid rgba(111, 99, 217, 0.3);
             margin: 8px 0;
           ">${fileName}</p>
         </div>
diff --git a/index.html b/index.html
index 8d88f792..05739961 100644
--- a/index.html
+++ b/index.html
@@ -10,6 +10,7 @@
   
   <!-- Z-Index Hierarchy Fix - Prevents modal conflicts -->
   <link rel="stylesheet" href="css/z-index-hierarchy.css">
+  <link rel="stylesheet" href="css/theme-tokens.css">
 
   <!-- Environment bootstrap (must load first) -->
   <script src="js/emma-env.js"></script>
@@ -58,10 +59,10 @@
   <style>
     /* Emma Brand Variables */
     :root {
-            --emma-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
-            --emma-purple: #8B5CF6;
-            --emma-pink: #F093FB;
-      --emma-glow: 0 0 40px rgba(134, 88, 255, 0.6);
+            --emma-gradient: linear-gradient(135deg, #5058b4 0%, #5a3f8f 50%, #a468a5 100%);
+            --emma-purple: #6F63D9;
+            --emma-pink: #DEB3E4;
+      --emma-glow: 0 0 20px rgba(111, 99, 217, 0.35);
     }
 
     * {
@@ -136,11 +137,11 @@
     @keyframes orb-pulse {
       0%, 100% {
         transform: scale(1);
-                box-shadow: var(--emma-glow), inset 0 0 40px rgba(255, 255, 255, 0.1);
+                box-shadow: var(--emma-glow), inset 0 0 32px rgba(255, 255, 255, 0.1);
       }
       50% {
-                transform: scale(1.02);
-                box-shadow: 0 0 60px rgba(134, 88, 255, 0.8), inset 0 0 40px rgba(255, 255, 255, 0.2);
+                transform: scale(1.015);
+                box-shadow: 0 0 40px rgba(111, 99, 217, 0.55), inset 0 0 28px rgba(255, 255, 255, 0.16);
             }
         }
 
@@ -183,12 +184,12 @@
         }
 
         .vault-btn.primary {
-            background: rgba(139, 92, 246, 0.3);
+            background: rgba(111, 99, 217, 0.3);
       border-color: var(--emma-purple);
         }
 
         .vault-btn.primary:hover {
-            background: rgba(139, 92, 246, 0.5);
+            background: rgba(111, 99, 217, 0.5);
         }
 
         .vault-btn.success {
@@ -207,8 +208,8 @@
       left: 0;
       width: 100%;
       height: 100%;
-            background: rgba(139, 92, 246, 0.1);
-            border: 4px dashed rgba(139, 92, 246, 0.5);
+            background: rgba(111, 99, 217, 0.1);
+            border: 4px dashed rgba(111, 99, 217, 0.5);
             display: none;
       align-items: center;
       justify-content: center;
@@ -228,22 +229,249 @@
 
         /* Vault Status */
         .vault-status {
-            margin-top: 20px;
-      padding: 16px;
-      background: rgba(255, 255, 255, 0.1);
-      border-radius: 12px;
-            backdrop-filter: blur(10px);
+            margin-top: 24px;
+            padding: 24px;
+            background: var(--landing-card, rgba(255, 255, 255, 0.08));
+            border: 1px solid var(--landing-border, rgba(255, 255, 255, 0.12));
+            border-radius: 24px;
+            backdrop-filter: blur(18px);
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 24px;
+            flex-wrap: wrap;
+            box-shadow: 0 18px 38px rgba(3, 10, 24, 0.35);
         }
 
         .vault-status.unlocked {
-            background: rgba(16, 185, 129, 0.2);
-            border: 2px solid rgba(16, 185, 129, 0.5);
+            background: linear-gradient(135deg, rgba(var(--emma-accent-primary-rgb, 111, 99, 217), 0.24), rgba(var(--emma-accent-secondary-rgb, 208, 111, 168), 0.2));
+            border-color: rgba(var(--emma-accent-primary-rgb, 111, 99, 217), 0.45);
+            box-shadow: 0 22px 44px rgba(var(--emma-accent-primary-rgb, 111, 99, 217), 0.35);
+        }
+
+        .vault-status .status-main {
+            display: flex;
+            align-items: center;
+            gap: 18px;
+            text-align: left;
+            flex: 1 1 280px;
+        }
+
+        .vault-status .status-icon {
+            width: 60px;
+            height: 60px;
+            border-radius: 20px;
+            background: rgba(var(--emma-accent-primary-rgb, 111, 99, 217), 0.2);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 32px;
+            box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.1);
+            color: var(--emma-text-strong, #ffffff);
+        }
+
+        .vault-status.unlocked .status-icon {
+            background: rgba(16, 185, 129, 0.22);
+            color: #10b981;
+        }
+
+        .vault-status .status-copy {
+            display: flex;
+            flex-direction: column;
+            gap: 6px;
+        }
+
+        .vault-status .status-headline {
+            font-size: clamp(1rem, 2vw, 1.25rem);
+            font-weight: 600;
+            color: var(--emma-text-strong, #ffffff);
+        }
+
+        .vault-status .status-subtext {
+            font-size: 0.92rem;
+            color: var(--emma-text-muted, rgba(255, 255, 255, 0.65));
+        }
+
+        .sync-status {
+            display: none;
+            align-items: center;
+            gap: 10px;
+            padding: 12px 16px;
+            border-radius: 16px;
+            font-size: 0.85rem;
+            font-weight: 600;
+            background: rgba(var(--emma-accent-primary-rgb, 111, 99, 217), 0.15);
+            border: 1px solid rgba(var(--emma-accent-primary-rgb, 111, 99, 217), 0.35);
+            color: var(--emma-text-strong, #ffffff);
+            box-shadow: 0 12px 26px rgba(2, 6, 23, 0.4);
+        }
+
+        .sync-status-icon {
+            font-size: 1.2rem;
         }
 
         /* Hidden file input */
         .hidden {
             display: none;
     }
+    /* Emma Theme Alignment */
+    :root {
+      --landing-card: rgba(var(--emma-neutral-rgb, 255, 255, 255), 0.07);
+      --landing-card-strong: rgba(var(--emma-neutral-rgb, 255, 255, 255), 0.12);
+      --landing-border: rgba(var(--emma-neutral-rgb, 255, 255, 255), 0.18);
+    }
+
+    body {
+      background: var(--emma-bg-gradient);
+      color: var(--emma-text-strong, #ffffff);
+      padding: clamp(24px, 4vw, 48px);
+    }
+
+    .emma-container {
+      /* background: var(--landing-card);
+      border: 1px solid var(--landing-border);
+      border-radius: 32px; */
+      padding: clamp(32px, 5vw, 48px);
+      box-shadow: var(--emma-shadow-raised, 0 12px 48px rgba(0, 0, 0, 0.35));
+      max-width: 720px;
+      width: 100%;
+    }
+
+    .emma-subtitle {
+      color: var(--emma-text-muted, rgba(255, 255, 255, 0.65));
+      margin-bottom: 40px;
+    }
+
+    #vaultStatus {
+      /* Styling handled by .vault-status to keep branding consistent */
+    }
+
+    .vault-controls {
+      margin-top: 36px;
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+      gap: 20px;
+      width: 100%;
+    }
+
+    .vault-btn {
+      appearance: none;
+      border: 1px solid var(--landing-border);
+      background: var(--landing-card);
+      color: var(--emma-text-strong, #ffffff);
+      padding: 20px;
+      border-radius: 24px;
+      backdrop-filter: blur(18px);
+      display: flex;
+      gap: 16px;
+      align-items: center;
+      text-align: left;
+      cursor: pointer;
+      transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
+      min-height: 110px;
+      box-shadow: 0 16px 36px rgba(5, 6, 20, 0.35);
+      position: relative;
+      overflow: hidden;
+      width: 100%;
+    }
+
+    .vault-btn::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      background: linear-gradient(120deg, rgba(255, 255, 255, 0.12), transparent 60%);
+      opacity: 0;
+      transition: opacity 0.25s ease;
+    }
+
+    .vault-btn:hover {
+      transform: translateY(-4px);
+      border-color: rgba(var(--emma-neutral-rgb, 255, 255, 255), 0.45);
+    }
+
+    .vault-btn:hover::after {
+      opacity: 1;
+    }
+
+    .vault-btn .btn-icon {
+      width: 54px;
+      height: 54px;
+      border-radius: 18px;
+      background: rgba(var(--emma-accent-primary-rgb, 111, 99, 217), 0.18);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 1.45rem;
+      box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.12);
+      flex-shrink: 0;
+    }
+
+    .vault-btn .btn-text {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+
+    .vault-btn .btn-title {
+      font-size: 1rem;
+      font-weight: 600;
+      letter-spacing: 0.01em;
+    }
+
+    .vault-btn .btn-desc {
+      font-size: 0.88rem;
+      color: var(--emma-text-muted, rgba(255, 255, 255, 0.65));
+    }
+
+    .vault-btn.primary {
+      background: linear-gradient(135deg, rgba(var(--emma-accent-primary-rgb, 111, 99, 217), 0.95), rgba(var(--emma-accent-secondary-rgb, 208, 111, 168), 0.85));
+      border-color: transparent;
+      box-shadow: 15pxrgba(var(--emma-accent-primary-rgb, 111, 99, 217), 0.38);
+      color: #ffffff;
+    }
+
+    .vault-btn.primary .btn-icon {
+      background: rgba(255, 255, 255, 0.2);
+      color: #ffffff;
+    }
+
+    .vault-btn.primary .btn-desc {
+      color: rgba(255, 255, 255, 0.85);
+    }
+
+    .vault-btn.warning {
+      background: rgba(251, 191, 36, 0.12);
+      border-color: rgba(251, 191, 36, 0.45);
+      color: #fcd34d;
+      box-shadow: 15pxrgba(251, 191, 36, 0.22);
+    }
+
+    .vault-btn.warning .btn-icon {
+      background: rgba(251, 191, 36, 0.2);
+      color: #fbbf24;
+    }
+
+    .vault-btn.success {
+      background: rgba(16, 185, 129, 0.18);
+      border-color: rgba(16, 185, 129, 0.45);
+      color: #d1fae5;
+      box-shadow: 15pxrgba(16, 185, 129, 0.22);
+    }
+
+    .vault-btn.success .btn-icon {
+      background: rgba(16, 185, 129, 0.2);
+      color: #10b981;
+    }
+
+    .drag-drop-zone {
+      background: rgba(var(--emma-accent-primary-rgb, 111, 99, 217), 0.15);
+      border: 3px dashed rgba(var(--emma-accent-primary-rgb, 111, 99, 217), 0.5);
+    }
+
+    .drag-drop-message {
+      color: var(--emma-text-strong, #ffffff);
+    }
   </style>
 </head>
 <body>
@@ -258,33 +486,49 @@ <h1 class="emma-title">emma</h1>
 
                 <!-- Vault Status -->
         <div class="vault-status" id="vaultStatus">
-            <div id="vaultStatusText">🔒 No vault loaded</div>
+            <div class="status-main">
+                <div class="status-icon" id="vaultStatusIcon" aria-hidden="true">🔒</div>
+                <div class="status-copy">
+                    <div id="vaultStatusText" class="status-headline">No vault loaded</div>
+                    <div id="vaultStatusHelper" class="status-subtext">Connect your .emma vault to get started.</div>
+                </div>
+            </div>
             <!-- 🔥 CRITICAL: .emma File Sync Status Indicator -->
-            <div id="syncStatus" style="
-                margin-top: 10px;
-                padding: 8px 12px;
-                border-radius: 8px;
-                font-size: 14px;
-                text-align: center;
-                background: rgba(59, 130, 246, 0.2);
-                border: 1px solid rgba(59, 130, 246, 0.5);
-                display: none;
-            ">
-                <span id="syncStatusIcon">💾</span>
-                <span id="syncStatusText">Sync Status</span>
+            <div class="sync-status" id="syncStatus" aria-live="polite">
+                <span class="sync-status-icon" id="syncStatusIcon">💾</span>
+                <span id="syncStatusText" class="sync-status-text">Sync Status</span>
             </div>
         </div>
 
         <!-- Clean Vault Controls -->
         <div class="vault-controls">
             <button class="vault-btn primary" id="openVaultBtn">
-                📁 Open Vault
+                <span class="btn-icon" aria-hidden="true">🔓</span>
+                <span class="btn-text">
+                    <span class="btn-title">Open Vault</span>
+                    <span class="btn-desc">Load an existing .emma vault file and continue where you left off.</span>
+                </span>
             </button>
             <button class="vault-btn" id="createVaultBtn">
-                ✨ Create New Vault
+                <span class="btn-icon" aria-hidden="true">✨</span>
+                <span class="btn-text">
+                    <span class="btn-title">Create New Vault</span>
+                    <span class="btn-desc">Start a pristine, encrypted memory vault on this browser.</span>
+                </span>
+            </button>
+            <button class="vault-btn warning" id="recoverVaultBtn">
+                <span class="btn-icon" aria-hidden="true">🌀</span>
+                <span class="btn-text">
+                    <span class="btn-title">Recover Browser Backup</span>
+                    <span class="btn-desc">Restore the automatic local backup Emma keeps for safety.</span>
+                </span>
             </button>
             <button class="vault-btn success" id="goToDashboardBtn" style="display: none;">
-                🚀 Go to Dashboard
+                <span class="btn-icon" aria-hidden="true">➡️</span>
+                <span class="btn-text">
+                    <span class="btn-title">Go to Dashboard</span>
+                    <span class="btn-desc">Jump back into your living desktop once your vault unlocks.</span>
+                </span>
               </button>
         </div>
 
@@ -304,6 +548,27 @@ <h1 class="emma-title">emma</h1>
          * Clean Emma Pure Web App
          * Perfect architecture for Debbe's demo
          */
+
+        async function ensureEmmaWebVault() {
+            if (window.emmaWebVault) return;
+
+            if (typeof EmmaWebVault === 'undefined') {
+                await new Promise((resolve, reject) => {
+                    const script = document.createElement('script');
+                    script.src = 'js/emma-web-vault.js';
+                    script.onload = resolve;
+                    script.onerror = () => reject(new Error('Failed to load Emma Web Vault script.'));
+                    document.head.appendChild(script);
+                });
+            }
+
+            if (typeof EmmaWebVault === 'undefined') {
+                throw new Error('Emma Web Vault system unavailable.');
+            }
+
+            window.emmaWebVault = new EmmaWebVault();
+        }
+
         class CleanEmmaApp {
       constructor() {
                 this.vaultStatus = 'locked';
@@ -323,8 +588,11 @@ <h1 class="emma-title">emma</h1>
                 this.orb = document.getElementById('emmaOrb');
                 this.vaultStatusDiv = document.getElementById('vaultStatus');
                 this.vaultStatusText = document.getElementById('vaultStatusText');
+                this.vaultStatusIcon = document.getElementById('vaultStatusIcon');
+                this.vaultStatusHelper = document.getElementById('vaultStatusHelper');
                 this.openVaultBtn = document.getElementById('openVaultBtn');
                 this.createVaultBtn = document.getElementById('createVaultBtn');
+                this.recoverVaultBtn = document.getElementById('recoverVaultBtn');
                 this.goToDashboardBtn = document.getElementById('goToDashboardBtn');
                 this.dragDropZone = document.getElementById('dragDropZone');
                 this.fileInput = document.getElementById('vaultFileInput');
@@ -342,7 +610,7 @@ <h1 class="emma-title">emma</h1>
 
           } else {
                         console.warn('⚠️ Emma orb class not available, using CSS fallback');
-                        this.orb.style.background = 'radial-gradient(circle at 30% 30%, #8658ff, #4f46e5, #f093fb)';
+                        this.orb.style.background = 'radial-gradient(circle at 30% 30%, #6f63d9, #4f46e5, #deb3e4)';
                         this.orb.style.animation = 'orb-pulse 4s ease-in-out infinite';
           }
         } catch (error) {
@@ -372,6 +640,11 @@ <h1 class="emma-title">emma</h1>
                 // Create vault button
                 this.createVaultBtn.addEventListener('click', () => this.createVault());
 
+                // Recover browser backup
+                if (this.recoverVaultBtn) {
+                    this.recoverVaultBtn.addEventListener('click', () => this.recoverFromBrowserBackup());
+                }
+
                 // Go to dashboard button
                 this.goToDashboardBtn.addEventListener('click', () => this.goToDashboard());
 
@@ -447,6 +720,7 @@ <h1 class="emma-title">emma</h1>
                     if (!passphrase) return;
 
                     // Create new vault using Emma Web Vault
+                    await ensureEmmaWebVault();
                     const result = await window.emmaWebVault.createVaultFile(vaultName, passphrase);
 
                     if (result.success) {
@@ -467,6 +741,9 @@ <h1 class="emma-title">emma</h1>
 
                     // Read file data first
                     const fileData = new Uint8Array(await file.arrayBuffer());
+                    if (window.emmaWebVault && typeof window.emmaWebVault.inspectVaultBytes === 'function') {
+                        window.emmaWebVault.inspectVaultBytes(fileData, file.name);
+                    }
 
                     // Use working Emma modal (copied from extension)
                     const passphrase = await this.showEmmaPassphraseModal(file.name);
@@ -474,22 +751,46 @@ <h1 class="emma-title">emma</h1>
                     if (!passphrase) return;
 
                     // Use EXACT working crypto from extension
+                    await ensureEmmaWebVault();
                     const vaultData = await window.emmaWebVault.exactWorkingDecrypt(fileData, passphrase);
 
                     // Set vault data in Emma Web Vault
                     window.emmaWebVault.vaultData = vaultData;
                     window.emmaWebVault.isOpen = true;
                     window.emmaWebVault.passphrase = passphrase;
+                    if (window.emmaWebVault.cacheSessionPassphrase) {
+                        window.emmaWebVault.cacheSessionPassphrase(passphrase);
+                    }
+                    if (typeof window.emmaWebVault.updateOriginalFileName === 'function') {
+                        window.emmaWebVault.updateOriginalFileName(file.name);
+                    } else {
+                        window.emmaWebVault.originalFileName = file.name;
+                        try {
+                            sessionStorage.setItem('emmaVaultOriginalFileName', file.name);
+                            localStorage.setItem('emmaVaultOriginalFileName', file.name);
+                        } catch (_) {}
+                    }
                     if (fileHandle) {
                         window.emmaWebVault.fileHandle = fileHandle;
                     }
+                    if (!fileHandle && window.emmaWebVault && typeof window.emmaWebVault.ensureDirectFileHandle === 'function') {
+                        try {
+                            await window.emmaWebVault.ensureDirectFileHandle('initial-open', { promptOnFailure: true });
+                        } catch (handleError) {
+                        console.warn('⚠️ Emma Web Vault: Unable to capture direct file access automatically:', handleError);
+                        }
+                    }
+
+                    const normalizedVaultName = window.emmaWebVault.ensureVaultMetadataName(
+                        vaultData.metadata?.name || vaultData.name || file.name
+                    );
 
                     // Set session storage
                     sessionStorage.setItem('emmaVaultActive', 'true');
-                    sessionStorage.setItem('emmaVaultName', vaultData.metadata?.name || file.name);
+                    sessionStorage.setItem('emmaVaultName', normalizedVaultName);
                     // SECURITY: Never store passphrase in web storage - keep in memory only
                     localStorage.setItem('emmaVaultActive', 'true');
-                    localStorage.setItem('emmaVaultName', vaultData.metadata?.name || file.name);
+                    localStorage.setItem('emmaVaultName', normalizedVaultName);
 
                     // Save to IndexedDB for persistence (version 2 - clean rebuild)
                     try {
@@ -502,7 +803,7 @@ <h1 class="emma-title">emma</h1>
 
                     this.vaultStatus = 'unlocked';
                     this.currentVault = {
-                        name: vaultData.metadata?.name || file.name,
+                        name: normalizedVaultName,
                         stats: {
                             memoryCount: Object.keys(vaultData.content?.memories || {}).length,
                             peopleCount: Object.keys(vaultData.content?.people || {}).length
@@ -559,14 +860,28 @@ <h1 class="emma-title">emma</h1>
                 if (this.vaultStatus === 'unlocked') {
                     this.orbContainer.classList.remove('vault-locked');
                     this.vaultStatusDiv.classList.add('unlocked');
-                    this.vaultStatusText.textContent = `🔓 ${this.currentVault.name} (${this.currentVault.stats?.memoryCount || 0} memories)`;
+                    const vaultName = this.currentVault?.name || 'Vault unlocked';
+                    const memoryCount = this.currentVault?.stats?.memoryCount || 0;
+                    this.vaultStatusText.textContent = `${vaultName} (${memoryCount} memories)`;
+                    if (this.vaultStatusIcon) {
+                        this.vaultStatusIcon.textContent = '🔓';
+                    }
+                    if (this.vaultStatusHelper) {
+                        this.vaultStatusHelper.textContent = 'Unlocked • Secure session active in this browser';
+                    }
 
                     // Show dashboard button for mobile users
                     this.goToDashboardBtn.style.display = 'block';
         } else {
                     this.orbContainer.classList.add('vault-locked');
                     this.vaultStatusDiv.classList.remove('unlocked');
-                    this.vaultStatusText.textContent = '🔒 No vault loaded';
+                    this.vaultStatusText.textContent = 'No vault loaded';
+                    if (this.vaultStatusIcon) {
+                        this.vaultStatusIcon.textContent = '🔒';
+                    }
+                    if (this.vaultStatusHelper) {
+                        this.vaultStatusHelper.textContent = 'Connect your .emma vault to continue.';
+                    }
 
                     // Hide dashboard button when locked
                     this.goToDashboardBtn.style.display = 'none';
@@ -578,6 +893,36 @@ <h1 class="emma-title">emma</h1>
                 window.location.href = 'dashboard.html';
             }
 
+            async recoverFromBrowserBackup() {
+                try {
+                    await ensureEmmaWebVault();
+
+                    if (!window.emmaWebVault || typeof window.emmaWebVault.hasBrowserBackup !== 'function') {
+                        this.showError('Recovery system unavailable in this browser.');
+                        return;
+                    }
+
+                    const hasBackup = await window.emmaWebVault.hasBrowserBackup();
+                    if (!hasBackup) {
+                        this.showError('No browser backup found. Please open your .emma file or create a new vault.');
+                        return;
+                    }
+
+                    const passphrase = await this.showEmmaPassphraseModal('Recovered Vault', true);
+                    if (!passphrase) return;
+
+                    await window.emmaWebVault.recoverFromBrowserBackup(passphrase);
+                    this.vaultStatus = 'unlocked';
+                    this.currentVault = { name: window.emmaWebVault.vaultData?.metadata?.name || 'Recovered Vault' };
+                    this.updateUI();
+                    this.showSuccess('Recovered vault restored. Downloading fresh .emma file...');
+                    await window.emmaWebVault.downloadVaultFile(this.currentVault.name || 'Recovered-Vault');
+                } catch (error) {
+                    console.error('? Recovery failed:', error);
+                    this.showError('Failed to recover from browser backup: ' + (error?.message || error));
+                }
+            }
+
             showSuccess(message) {
                 this.showToast(message, 'success');
             }
@@ -638,8 +983,8 @@ <h1 class="emma-title">emma</h1>
                         padding: 30px;
                         max-width: 400px;
             width: 90%;
-                        border: 2px solid rgba(134, 88, 255, 0.3);
-                        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+                        border: 2px solid rgba(111, 99, 217, 0.3);
+                        box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
                     `;
 
                     // SECURITY: Create DOM elements safely without innerHTML injection
@@ -666,7 +1011,7 @@ <h1 class="emma-title">emma</h1>
                                 <input type="password" id="emmaPassphrase" placeholder="Enter passphrase" required autofocus style="
                                     width: 100%;
                                     padding: 12px 16px;
-                                    border: 2px solid rgba(134, 88, 255, 0.3);
+                                    border: 2px solid rgba(111, 99, 217, 0.3);
                                     border-radius: 10px;
                                     background: rgba(255, 255, 255, 0.1);
                                     color: white;
@@ -678,7 +1023,7 @@ <h1 class="emma-title">emma</h1>
                                 <input type="password" id="emmaPassphraseConfirm" placeholder="Confirm passphrase" required style="
                                     width: 100%;
                                     padding: 12px 16px;
-                                    border: 2px solid rgba(134, 88, 255, 0.3);
+                                    border: 2px solid rgba(111, 99, 217, 0.3);
                                     border-radius: 10px;
                                     background: rgba(255, 255, 255, 0.1);
                                 color: white;
@@ -702,7 +1047,7 @@ <h1 class="emma-title">emma</h1>
                     cursor: pointer;
                                 ">Cancel</button>
                                 <button type="submit" style="
-                                    background: linear-gradient(135deg, #8B5CF6, #F093FB);
+                                    background: linear-gradient(135deg, #6F63D9, #DEB3E4);
                 border: none;
                 color: white;
                                     padding: 10px 20px;
@@ -837,7 +1182,7 @@ <h1 class="emma-title">emma</h1>
                         
                         if (!syncStatusEl) return;
                         
-                        syncStatusEl.style.display = 'block';
+                        syncStatusEl.style.display = 'flex';
                         
                         switch(status) {
                             case 'syncing':
@@ -885,3 +1230,7 @@ <h1 class="emma-title">emma</h1>
   </script>
 </body>
 </html>
+
+
+
+
diff --git a/js/assistant-experience-popup.js b/js/assistant-experience-popup.js
index 69625225..07c78432 100644
--- a/js/assistant-experience-popup.js
+++ b/js/assistant-experience-popup.js
@@ -1471,10 +1471,14 @@ class AssistantExperience extends ExperiencePopup {
 
     const avatar = sender === 'user' ? '👤' : '👩‍💼';
 
+    const esc = (s) => (window.escapeHtml ? window.escapeHtml(s) : String(s)
+      .replace(/&/g, '&amp;').replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;'));
+
     messageEl.innerHTML = `
       <div class="message-avatar">${avatar}</div>
       <div class="message-content">
-        <p>${message}</p>
+        <p>${esc(message)}</p>
       </div>
     `;
 
@@ -1679,7 +1683,7 @@ class AssistantExperience extends ExperiencePopup {
 
     // Navigate to the new dashboard
 
-    window.location.href = 'dashboard-new.html';
+    window.location.href = 'dashboard.html';
 
     // Close after a delay
     setTimeout(() => {
diff --git a/js/clean-password-modal.js b/js/clean-password-modal.js
index ac859461..8164ee64 100644
--- a/js/clean-password-modal.js
+++ b/js/clean-password-modal.js
@@ -26,6 +26,10 @@ class CleanSecurePasswordModal {
         confirmPassword = false
       } = options;
 
+      const esc = (s) => (window.escapeHtml ? window.escapeHtml(s) : String(s)
+        .replace(/&/g, '&amp;').replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;').replace(/\"/g, '&quot;').replace(/'/g, '&#39;'));
+
       this.currentResolve = resolve;
       this.currentReject = reject;
       this.isOpen = true;
@@ -35,19 +39,19 @@ class CleanSecurePasswordModal {
         <div class="clean-modal-overlay" id="cleanModalOverlay">
           <div class="clean-modal">
             <div class="clean-modal-header">
-              <h3 class="clean-modal-title">${title}</h3>
+              <h3 class="clean-modal-title">${esc(title)}</h3>
               <button class="clean-modal-close" onclick="window.cleanSecurePasswordModal.cancel()">×</button>
             </div>
             
             <div class="clean-modal-body">
-              <p class="clean-modal-message">${message}</p>
+              <p class="clean-modal-message">${esc(message)}</p>
               
               <div class="clean-input-group">
                 <input 
                   type="password" 
                   id="cleanPasswordInput" 
                   class="clean-input" 
-                  placeholder="${placeholder}"
+                  placeholder="${esc(placeholder)}"
                   autocomplete="new-password"
                 >
               </div>
@@ -244,7 +248,7 @@ const cleanModalStyles = `
   border-radius: 20px;
   max-width: 450px;
   width: 90%;
-  box-shadow: 0 0 40px rgba(134, 88, 255, 0.6);
+  box-shadow: 0 0 40px rgba(111, 99, 217, 0.6);
   animation: slideIn 0.3s ease;
 }
 
@@ -260,7 +264,7 @@ const cleanModalStyles = `
   font-size: 1.5rem;
   font-weight: 700;
   margin: 0;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #deb3e4 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
@@ -318,7 +322,7 @@ const cleanModalStyles = `
   outline: none;
   border-color: #764ba2;
   background: rgba(255, 255, 255, 0.08);
-  box-shadow: 0 0 0 3px rgba(134, 88, 255, 0.2);
+  box-shadow: 0 0 0 3px rgba(111, 99, 217, 0.2);
 }
 
 .clean-input::placeholder {
@@ -375,7 +379,7 @@ const cleanModalStyles = `
 
 .clean-btn-confirm:hover {
   transform: translateY(-2px);
-  box-shadow: 0 8px 25px rgba(134, 88, 255, 0.3);
+  box-shadow: 0 8px 25px rgba(111, 99, 217, 0.3);
 }
 
 @keyframes fadeIn {
diff --git a/js/clever-capture-bypass.js b/js/clever-capture-bypass.js
index 37e9570f..681eda84 100644
--- a/js/clever-capture-bypass.js
+++ b/js/clever-capture-bypass.js
@@ -409,7 +409,7 @@ class EmmaCleverCaptureBypass {
       z-index: 999999;
       font-family: system-ui;
       backdrop-filter: blur(20px);
-      border: 1px solid rgba(139, 92, 246, 0.3);
+      border: 1px solid rgba(111, 99, 217, 0.3);
       min-width: 300px;
     `;
     
diff --git a/js/content-universal.js b/js/content-universal.js
index 542b48f2..99574640 100644
--- a/js/content-universal.js
+++ b/js/content-universal.js
@@ -1275,7 +1275,7 @@ if (window.emmaUniversalInjected) {
             right: 24px !important;
             width: 56px !important;
             height: 56px !important;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%) !important;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #deb3e4 100%) !important;
             border: 2px solid white !important;
             border-radius: 50% !important;
             cursor: pointer !important;
@@ -1924,7 +1924,7 @@ if (window.emmaUniversalInjected) {
     createShader(type, source) { const shader = this.gl.createShader(type); this.gl.shaderSource(shader, source); this.gl.compileShader(shader); if (!this.gl.getShaderParameter(shader, this.gl.COMPILE_STATUS)) { console.error('Shader compile error:', this.gl.getShaderInfoLog(shader)); this.gl.deleteShader(shader); return null; } return shader; }
     createProgram(vertexSource, fragmentSource) { const vertexShader = this.createShader(this.gl.VERTEX_SHADER, vertexSource); const fragmentShader = this.createShader(this.gl.FRAGMENT_SHADER, fragmentSource); if (!vertexShader || !fragmentShader) return null; const program = this.gl.createProgram(); this.gl.attachShader(program, vertexShader); this.gl.attachShader(program, fragmentShader); this.gl.linkProgram(program); if (!this.gl.getProgramParameter(program, this.gl.LINK_STATUS)) { console.error('Program link error:', this.gl.getProgramInfoLog(program)); this.gl.deleteProgram(program); return null; } return program; }
     useFallback() {
-      this.container.innerHTML = '<div style="width: 100%; height: 100%; background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); border-radius: 50%; animation: float 3s ease-in-out infinite;"></div>';
+      this.container.innerHTML = '<div style="width: 100%; height: 100%; background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #deb3e4 100%); border-radius: 50%; animation: float 3s ease-in-out infinite;"></div>';
     }
   }
 
@@ -2077,9 +2077,9 @@ if (window.emmaUniversalInjected) {
     style.textContent = `
       /* Emma CSS Variables (same as dashboard) */
       :root {
-        --emma-gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
+        --emma-gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #deb3e4 100%);
         --emma-purple: #764ba2;
-        --emma-pink: #f093fb;
+        --emma-pink: #deb3e4;
         --emma-blue: #667eea;
       }
 
@@ -2167,7 +2167,7 @@ if (window.emmaUniversalInjected) {
       /* Header with Orb */
       .emma-panel-header {
         padding: 20px;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #deb3e4 100%);
         border-radius: 20px 20px 0 0;
         display: flex;
         justify-content: space-between;
@@ -2283,7 +2283,7 @@ if (window.emmaUniversalInjected) {
       .emma-action-card:hover {
         transform: translateY(-2px);
         background: rgba(255, 255, 255, 0.08);
-        border-color: rgba(240, 147, 251, 0.3);
+        border-color: rgba(222, 179, 228, 0.3);
         box-shadow: 0 8px 24px rgba(118, 75, 162, 0.2);
       }
 
@@ -2364,9 +2364,9 @@ if (window.emmaUniversalInjected) {
 
       .analysis-value {
         font-size: 12px;
-        color: rgba(240, 147, 251, 0.9);
+        color: rgba(222, 179, 228, 0.9);
         font-weight: 600;
-        background: rgba(240, 147, 251, 0.1);
+        background: rgba(222, 179, 228, 0.1);
         padding: 4px 8px;
         border-radius: 6px;
       }
@@ -2854,11 +2854,11 @@ if (window.emmaUniversalInjected) {
     const panelOrb = document.getElementById('emma-panel-orb');
 
     if (floatingOrb) {
-      floatingOrb.innerHTML = '<div style="width: 32px; height: 32px; background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); border-radius: 50%; box-shadow: 0 4px 16px rgba(118, 75, 162, 0.4); animation: float 3s ease-in-out infinite;"></div>';
+      floatingOrb.innerHTML = '<div style="width: 32px; height: 32px; background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #deb3e4 100%); border-radius: 50%; box-shadow: 0 4px 16px rgba(118, 75, 162, 0.4); animation: float 3s ease-in-out infinite;"></div>';
     }
 
     if (panelOrb) {
-      panelOrb.innerHTML = '<div style="width: 48px; height: 48px; background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); border-radius: 50%; box-shadow: 0 4px 16px rgba(118, 75, 162, 0.4); animation: float 3s ease-in-out infinite;"></div>';
+      panelOrb.innerHTML = '<div style="width: 48px; height: 48px; background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #deb3e4 100%); border-radius: 50%; box-shadow: 0 4px 16px rgba(118, 75, 162, 0.4); animation: float 3s ease-in-out infinite;"></div>';
     }
 
   }
@@ -2875,7 +2875,7 @@ if (window.emmaUniversalInjected) {
 
     if (!window.EmmaOrb) {
       console.error('❌ NO EMMA ORB CLASS FOUND! Using fallback.');
-      orbContainer.innerHTML = '<div style="width: 32px; height: 32px; background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); border-radius: 50%; box-shadow: 0 4px 16px rgba(118, 75, 162, 0.4); animation: float 3s ease-in-out infinite;"></div>';
+      orbContainer.innerHTML = '<div style="width: 32px; height: 32px; background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #deb3e4 100%); border-radius: 50%; box-shadow: 0 4px 16px rgba(118, 75, 162, 0.4); animation: float 3s ease-in-out infinite;"></div>';
       return;
     }
 
@@ -2892,7 +2892,7 @@ if (window.emmaUniversalInjected) {
       console.error('💥 FAILED TO CREATE YOUR ORB:', error);
       console.error('Error stack:', error.stack);
       // Beautiful gradient fallback
-      orbContainer.innerHTML = '<div style="width: 32px; height: 32px; background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); border-radius: 50%; box-shadow: 0 4px 16px rgba(118, 75, 162, 0.4); animation: float 3s ease-in-out infinite;"></div>';
+      orbContainer.innerHTML = '<div style="width: 32px; height: 32px; background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #deb3e4 100%); border-radius: 50%; box-shadow: 0 4px 16px rgba(118, 75, 162, 0.4); animation: float 3s ease-in-out infinite;"></div>';
     }
   }
 
@@ -2918,11 +2918,11 @@ if (window.emmaUniversalInjected) {
       } catch (error) {
         console.warn('Failed to initialize panel orb:', error);
         // Beautiful gradient fallback (NO BRAIN EMOJI!)
-        orbContainer.innerHTML = '<div style="width: 56px; height: 56px; background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); border-radius: 50%; box-shadow: 0 4px 16px rgba(118, 75, 162, 0.4); animation: float 3s ease-in-out infinite;"></div>';
+        orbContainer.innerHTML = '<div style="width: 56px; height: 56px; background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #deb3e4 100%); border-radius: 50%; box-shadow: 0 4px 16px rgba(118, 75, 162, 0.4); animation: float 3s ease-in-out infinite;"></div>';
       }
     } else if (orbContainer) {
       // Beautiful gradient fallback (NO BRAIN EMOJI!)
-      orbContainer.innerHTML = '<div style="width: 56px; height: 56px; background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); border-radius: 50%; box-shadow: 0 4px 16px rgba(118, 75, 162, 0.4); animation: float 3s ease-in-out infinite;"></div>';
+      orbContainer.innerHTML = '<div style="width: 56px; height: 56px; background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #deb3e4 100%); border-radius: 50%; box-shadow: 0 4px 16px rgba(118, 75, 162, 0.4); animation: float 3s ease-in-out infinite;"></div>';
     }
   }
 
@@ -3275,7 +3275,7 @@ if (window.emmaUniversalInjected) {
     try {
       const analysis = await emmaEngine.analyze();
       analysisDiv.innerHTML = `
-      <div style="padding: 12px; background: rgba(139, 92, 246, 0.1); border: 1px solid rgba(139, 92, 246, 0.3); border-radius: 12px; font-size: 13px; color: white;">
+      <div style="padding: 12px; background: rgba(111, 99, 217, 0.1); border: 1px solid rgba(111, 99, 217, 0.3); border-radius: 12px; font-size: 13px; color: white;">
         <strong style="color: #a78bfa;">Page Analysis:</strong><br>
         <div style="margin-top: 8px; line-height: 1.4;">
           Type: <span style="color: #c4b5fd;">${context.type}</span> (${context.platform})<br>
@@ -3287,7 +3287,7 @@ if (window.emmaUniversalInjected) {
     } catch (error) {
       console.warn('Emma: Error updating analysis panel:', error);
       analysisDiv.innerHTML = `
-      <div style="padding: 12px; background: rgba(139, 92, 246, 0.1); border: 1px solid rgba(139, 92, 246, 0.3); border-radius: 12px; font-size: 13px; color: white;">
+      <div style="padding: 12px; background: rgba(111, 99, 217, 0.1); border: 1px solid rgba(111, 99, 217, 0.3); border-radius: 12px; font-size: 13px; color: white;">
         <strong style="color: #a78bfa;">Page Analysis:</strong><br>
         <div style="margin-top: 8px; line-height: 1.4;">
           Type: <span style="color: #c4b5fd;">${context.type}</span> (${context.platform})<br>
@@ -4015,8 +4015,8 @@ if (window.emmaUniversalInjected) {
         }
         .emma-photo-selectable:hover {
           transform: scale(1.05) !important;
-          box-shadow: 0 8px 25px rgba(139, 92, 246, 0.3) !important;
-          border: 3px solid #8b5cf6 !important;
+          box-shadow: 0 8px 25px rgba(111, 99, 217, 0.3) !important;
+          border: 3px solid #6f63d9 !important;
         }
         .emma-photo-selected {
           border: 3px solid #10b981 !important;
@@ -4045,7 +4045,7 @@ if (window.emmaUniversalInjected) {
           right: 20px !important;
           background: rgba(20, 20, 30, 0.95) !important;
           backdrop-filter: blur(20px) !important;
-          border: 1px solid rgba(139, 92, 246, 0.3) !important;
+          border: 1px solid rgba(111, 99, 217, 0.3) !important;
           border-radius: 16px !important;
           padding: 20px !important;
           color: white !important;
@@ -4952,7 +4952,7 @@ window.forceEmmaUI = function() {
           right: 24px !important;
           width: 56px !important;
           height: 56px !important;
-          background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%) !important;
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #deb3e4 100%) !important;
           border: 2px solid white !important;
           border-radius: 50% !important;
           cursor: pointer !important;
diff --git a/js/dashboard-init.js b/js/dashboard-init.js
new file mode 100644
index 00000000..567540fa
--- /dev/null
+++ b/js/dashboard-init.js
@@ -0,0 +1,6898 @@
+'use strict';
+(function attachDashboardNavigationHandlers() {
+  const clickActions = {
+    'navigate-settings': () => { window.location.href = 'pages/emma-settings-redesigned.html'; },
+    'open-migration': () => { if (typeof openMigrationPage === 'function') { openMigrationPage(); } },
+    'open-gallery': () => { window.location.href = 'pages/gallery.html'; },
+    'open-settings': () => { window.location.href = 'pages/emma-settings-redesigned.html'; },
+    'open-people': () => { window.location.href = 'pages/people-emma.html'; }
+  };
+
+  document.addEventListener('DOMContentLoaded', () => {
+    document.querySelectorAll('[data-action]').forEach(element => {
+      const action = element.getAttribute('data-action');
+      if (clickActions[action]) {
+        element.addEventListener('click', (event) => {
+          event.preventDefault();
+          try {
+            clickActions[action]();
+          } catch (error) {
+            console.error('Dashboard navigation handler failed:', error);
+          }
+        });
+      }
+    });
+  });
+})();
+    window.metadataIncludesPerson = window.metadataIncludesPerson || ((peopleList, person) => {
+      if (!Array.isArray(peopleList) || !person) return false;
+
+      const targetId = person.id ? String(person.id).trim() : '';
+      if (!targetId) return false;
+
+      const resolveEntryId = (entry) => {
+        if (!entry) return null;
+        if (typeof entry === 'string' || typeof entry === 'number') {
+          const trimmed = String(entry).trim();
+          return trimmed || null;
+        }
+        if (typeof entry === 'object') {
+          const candidate = entry.id ?? entry.personId ?? entry.personID ?? entry.person_id ?? entry.uuid ?? entry.guid;
+          if (candidate === undefined || candidate === null) return null;
+          const trimmed = String(candidate).trim();
+          return trimmed || null;
+        }
+        return null;
+      };
+
+      return peopleList.some(entry => {
+        const entryId = resolveEntryId(entry);
+        return entryId && entryId === targetId;
+      });
+    });
+
+    window.contentMentionsPerson = window.contentMentionsPerson || ((personName, content) => {
+      if (!personName || !content) return false;
+
+      const escapeRegex = value => value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+      const words = personName.trim().split(/\s+/).filter(Boolean).map(escapeRegex);
+      if (words.length === 0) return false;
+
+      const pattern = `\\b${words.join('\\s+')}\\b(?:'s)?`;
+      const regex = new RegExp(pattern, 'i');
+
+      return regex.test(content);
+    });
+
+    // Extension mode - Skip vault session validation
+
+    // Vault initialization moved to end of page after ALL scripts load
+
+    // Dashboard Controller
+    class EmmaDashboard {
+      constructor() {
+        // Original Emma Orb setup (RESTORED)
+        this.orb = document.getElementById('emma-orb');
+        this.radialMenu = document.getElementById('radial-menu');
+        this.voiceIndicator = document.getElementById('voice-indicator');
+        
+        // CRITICAL: Expose dashboard globally for Emma Chat Experience
+        window.emmaDashboard = this;
+        this.loading = document.getElementById('loading');
+        
+        // Initialize WebGL Emma Orb (RESTORED ORIGINAL)
+        this.initEmmaOrb();
+
+        console.log('🔧 Constructor - Dashboard initialized with clean original system');
+        this.panels = {
+          dailyBrief: document.getElementById('daily-brief'),
+          aiInsights: document.getElementById('ai-insights'),
+          quickActions: document.getElementById('quick-actions')
+        };
+
+        // Burger menu removed for clean interface
+        this.panelsVisible = false;
+
+        // Utility icons functionality
+        this.utilityIcons = document.querySelector('.utility-icons');
+        this.setupUtilityIcons();
+
+        this.isMenuOpen = false;
+        this.emmaChatLoaderPromise = null;
+        this.stats = { memories: 0, people: 0, today: 0 };
+        this.particles = [];
+        this.nodes = [];
+        this.neuralCanvas = document.getElementById('neural-canvas');
+        this.neuralCtx = this.neuralCanvas ? this.neuralCanvas.getContext('2d') : null;
+        this.lowPowerMode = this.shouldUsePerformanceLite();
+        document.body.classList.toggle('performance-lite', this.lowPowerMode);
+
+        // Neural memory network properties
+        this.isConstellationMode = false;
+        this.constellationMemories = [];
+        this.centralNeuron = null;
+        
+        // 🔍 ZOOM FUNCTIONALITY: Dashboard constellation zoom/pan state
+        this.zoomState = {
+          scale: 1,
+          translateX: 0,
+          translateY: 0,
+          isDragging: false,
+          lastTouchDistance: 0,
+          minScale: 0.3,
+          maxScale: 3.0
+        };
+        this.constellationContainer = null;
+        this.activeNodeDrag = null;
+        this.pendingNodeDrag = null;
+        this.nodeDragPointerId = null;
+        this.nodeDragOffset = { x: 0, y: 0 };
+        this.persistLayoutDebounce = null;
+        this.constellationLayoutKey = 'emmaConstellationLayoutV1';
+        this.constellationFiltersKey = 'emmaConstellationFiltersV1';
+        this.nodeDragStart = { x: 0, y: 0 };
+        this.nodeDragThreshold = 6;
+        this.nodeDragTransformData = null;
+        this.touchHoldDelay = 350;
+        this.nodeDragHoldTimeout = null;
+        this.nodeDragHoldActive = false;
+        this.nodeDragLatestEvent = null;
+        this.nodeDragLastPointerType = null;
+        this.touchPanDisabled = false;
+        this.boundNodePointerMove = (event) => this.handleNodePointerMove(event);
+        this.boundNodePointerUp = (event) => this.handleNodePointerUp(event);
+
+        // Initialize WebGL Emma Orb
+        this.initEmmaOrb();
+        this.handleThemeApplied = this.handleThemeApplied.bind(this);
+        window.addEventListener('emmaThemeApplied', this.handleThemeApplied);
+        try {
+          const activeTheme = window.emmaThemeManager && typeof window.emmaThemeManager.getActiveTheme === 'function'
+            ? window.emmaThemeManager.getActiveTheme()
+            : null;
+          if (activeTheme) {
+            this.handleThemeApplied({ detail: { theme: activeTheme } });
+          }
+        } catch (themeError) {
+          console.warn('DASHBOARD: Unable to apply theme on init', themeError);
+        }
+
+        // Listen for vault status changes
+        document.addEventListener('vaultStatusChanged', (event) => {
+
+          this.updateVaultNodeStatus();
+          this.updateAllVaultIndicators();
+        });
+
+        this.init();
+      }
+
+      // Removed Universal Orb Menu - keeping clean original system
+
+      // Removed Universal Orb Menu action handler - using original radial menu system
+
+      async init() {
+        // Show loading
+        this.loading.classList.add('active');
+
+        // Initialize Emma's orb in loading screen
+        this.initLoadingOrb();
+
+        // Initialize constellation background
+        console.log('🔍 DEBUG: About to initialize constellation, DOM ready state:', document.readyState);
+        console.log('🔍 DEBUG: Constellation canvas exists?', !!document.getElementById('constellation'));
+        this.initConstellation();
+        
+        // Setup event listeners
+        this.setupEventListeners();
+
+        // Load initial data
+        await this.loadDashboardData();
+
+        // Animate panels based on time of day
+        this.showContextualPanels();
+
+        // Hide loading
+        setTimeout(() => {
+          this.loading.classList.remove('active');
+        }, 1500);
+
+        // 🎯 SAFE AUTO-TRIGGER: Check URL params for constellation or memory creation
+        this.handleURLParams();
+
+        // Start background animations
+        this.startAnimations();
+      }
+
+      initConstellation() {
+        const canvas = document.getElementById('constellation');
+        if (!canvas) {
+          console.warn('⚠️ Constellation canvas not found, skipping initialization');
+          return;
+        }
+        
+        const ctx = canvas.getContext('2d');
+        if (!ctx) {
+          console.warn('⚠️ Could not get constellation canvas context, skipping initialization');
+          return;
+        }
+
+        // Set canvas size
+        const resize = () => {
+          canvas.width = window.innerWidth;
+          canvas.height = window.innerHeight;
+        };
+        resize();
+        window.addEventListener('resize', resize);
+
+        // Create memory particles
+        const particleCount = this.shouldReduceConstellationPhysics() ? 24 : 50;
+        for (let i = 0; i < particleCount; i++) {
+          this.particles.push({
+            x: Math.random() * canvas.width,
+            y: Math.random() * canvas.height,
+            vx: (Math.random() - 0.5) * 0.5,
+            vy: (Math.random() - 0.5) * 0.5,
+            radius: Math.random() * 2 + 1,
+            opacity: Math.random() * 0.5 + 0.2
+          });
+        }
+
+        // Animation loop
+        const animate = () => {
+          const reducePhysics = this.shouldReduceConstellationPhysics();
+          ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+          // Update and draw particles
+          this.particles.forEach((p, i) => {
+            // Update position
+            p.x += p.vx;
+            p.y += p.vy;
+
+            // Wrap around edges
+            if (p.x < 0) p.x = canvas.width;
+            if (p.x > canvas.width) p.x = 0;
+            if (p.y < 0) p.y = canvas.height;
+            if (p.y > canvas.height) p.y = 0;
+
+            // Draw particle
+            ctx.beginPath();
+            ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
+            ctx.fillStyle = `rgba(111, 99, 217, ${p.opacity})`;
+            ctx.fill();
+
+            // Draw connections
+            this.particles.forEach((p2, j) => {
+              if (i !== j) {
+                const dx = p.x - p2.x;
+                const dy = p.y - p2.y;
+                const dist = Math.sqrt(dx * dx + dy * dy);
+
+                if (dist < 100) {
+                  ctx.beginPath();
+                  ctx.moveTo(p.x, p.y);
+                  ctx.lineTo(p2.x, p2.y);
+                  ctx.strokeStyle = `rgba(111, 99, 217, ${(1 - dist / 100) * 0.2})`;
+                  ctx.stroke();
+                }
+              }
+            });
+          });
+
+          requestAnimationFrame(animate);
+        };
+        animate();
+      }
+
+      setupEventListeners() {
+        // RESTORED: Original Emma orb click handler
+        this.orb.addEventListener('click', (e) => {
+          e.stopPropagation();
+          console.log('🎯 ORB CLICKED - Debug info:', {
+            isConstellationMode: this.isConstellationMode,
+            isMenuOpen: this.isMenuOpen,
+            orbExists: !!this.orb,
+            radialMenuExists: !!this.radialMenu,
+            dashboardInstance: !!window.emmaDashboard
+          });
+          
+          if (this.isConstellationMode) {
+            console.log('🌌 Exiting constellation mode...');
+            this.exitMemoryConstellation();
+          } else {
+            console.log('🔘 Toggling radial menu...');
+            this.toggleRadialMenu();
+          }
+        });
+
+        // RESTORED: Radial menu items
+        this.radialMenu.querySelectorAll('.radial-item').forEach(item => {
+          item.addEventListener('click', (e) => {
+            e.stopPropagation();
+            const action = item.dataset.action;
+            this.handleRadialAction(action);
+          });
+        });
+
+        console.log('🎯 Event listeners setup - RESTORED original orb & radial menu');
+
+        // Track mouse/touch position for neural effects
+        this.mouseX = 0;
+        this.mouseY = 0;
+
+        // Mouse support
+        document.addEventListener('mousemove', (e) => {
+          this.mouseX = e.clientX;
+          this.mouseY = e.clientY;
+          this.updateNodeProximityEffects();
+        });
+
+        // Touch support for mobile
+        document.addEventListener('touchmove', (e) => {
+          if (e.touches.length > 0) {
+            this.mouseX = e.touches[0].clientX;
+            this.mouseY = e.touches[0].clientY;
+            this.updateNodeProximityEffects();
+          }
+        }, { passive: true });
+
+        document.addEventListener('touchstart', (e) => {
+          if (e.touches.length > 0) {
+            this.mouseX = e.touches[0].clientX;
+            this.mouseY = e.touches[0].clientY;
+          }
+        }, { passive: true });
+
+        // Handle window resize for responsive repositioning
+        window.addEventListener('resize', () => {
+          // Debounce resize events
+          clearTimeout(this.resizeTimeout);
+          this.resizeTimeout = setTimeout(() => {
+            if (this.isMenuOpen) {
+              // 🔄 MOBILE FIX: Keep radial menu bound to orb center
+              this.repositionMenuToOrb();
+              
+              // CRITICAL FIX: Resize canvas and redraw connections after repositioning
+              if (this.neuralCanvas) {
+                this.neuralCanvas.width = window.innerWidth;
+                this.neuralCanvas.height = window.innerHeight;
+              }
+              
+              // Force immediate redraw of connections with new positions
+              if (this.render && typeof this.render === 'function') {
+                this.render();
+              } else if (window.neuralRenderer && window.neuralRenderer.render) {
+                window.neuralRenderer.render();
+              }
+            } else if (this.isConstellationMode) {
+              // Existing constellation resize handling
+              this.repositionNodesOnResize();
+              
+              if (this.neuralCanvas) {
+                this.neuralCanvas.width = window.innerWidth;
+                this.neuralCanvas.height = window.innerHeight;
+              }
+              
+              if (this.render && typeof this.render === 'function') {
+                this.render();
+              } else if (window.neuralRenderer && window.neuralRenderer.render) {
+                window.neuralRenderer.render();
+              }
+            }
+          }, 250);
+        });
+      }
+
+      // Extract proximity effects to separate method for reuse
+      updateNodeProximityEffects() {
+        // Add proximity effects to nodes (both menu and constellation modes)
+        if ((this.isMenuOpen || this.isConstellationMode) && this.nodes.length > 0) {
+          this.nodes.forEach(node => {
+            const dist = Math.sqrt(
+              Math.pow(this.mouseX - node.x, 2) +
+              Math.pow(this.mouseY - node.y, 2)
+            );
+
+            if (dist < 120) {
+              // Subtle attraction to mouse with organic feel
+              const force = (120 - dist) / 120;
+              const angle = Math.atan2(this.mouseY - node.y, this.mouseX - node.x);
+
+              // Very gentle attraction with organic damping
+              const attractionStrength = force * 0.08; // Much more subtle
+              node.vx += Math.cos(angle) * attractionStrength;
+              node.vy += Math.sin(angle) * attractionStrength;
+
+              // Add glow effect (stronger for memory nodes)
+              const glowStrength = this.isConstellationMode ? 36 : 26;
+              const baseOpacity = this.isConstellationMode ? 0.6 : 0.45;
+              const glowSize = glowStrength + force * 18;
+              const glowOpacity = Math.min(baseOpacity + force * 0.25, 0.75);
+              if (node.element) {
+                node.element.style.boxShadow = `0 0 ${glowSize}px rgba(111, 99, 217, ${glowOpacity})`;
+              }
+            } else {
+              // Reset glow when mouse is far
+              if (node.element) {
+                node.element.style.boxShadow = '';
+              }
+            }
+          });
+        }
+      }
+
+      // Reposition nodes on window resize for responsive behavior (CONSTELLATION MODE ONLY)
+      repositionNodesOnResize() {
+        if (!this.nodes || this.nodes.length === 0) return;
+        
+        // 🚨 CRITICAL: This function is now ONLY for constellation mode
+        // Radial menu repositioning is handled by repositionMenuToOrb()
+        if (!this.isConstellationMode) {
+          console.warn('🚨 repositionNodesOnResize called for non-constellation mode - use repositionMenuToOrb instead');
+          return;
+        }
+
+        const centerX = window.innerWidth / 2;
+        const centerY = window.innerHeight / 2;
+
+        // Reposition each constellation node
+        this.nodes.forEach((node, i) => {
+          // For constellation mode, maintain relative positions but scale
+          const scaleX = window.innerWidth / (this.lastWindowWidth || window.innerWidth);
+          const scaleY = window.innerHeight / (this.lastWindowHeight || window.innerHeight);
+
+          node.x = centerX + (node.x - centerX) * scaleX;
+          node.y = centerY + (node.y - centerY) * scaleY;
+          node.baseX = node.x;
+          node.baseY = node.y;
+
+          // Update DOM position - UNIFIED: Same size for all devices
+          if (node.element) {
+            const elementSize = 45; // Consistent centering for all devices (90px items)
+            node.element.style.left = (node.x - elementSize) + 'px';
+            node.element.style.top = (node.y - elementSize) + 'px';
+          }
+        });
+
+        // Store current window size for next resize
+        this.lastWindowWidth = window.innerWidth;
+        this.lastWindowHeight = window.innerHeight;
+
+      }
+
+      // Keyboard shortcuts
+      setupKeyboardShortcuts() {
+        document.addEventListener('keydown', (e) => {
+          if (e.code === 'Space' && !e.target.matches('input, textarea')) {
+            e.preventDefault();
+            this.startVoiceCapture();
+          } else if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+            e.preventDefault();
+            this.handleRadialAction('search');
+          } else if (e.key === 'Escape' && this.isMenuOpen) {
+            this.toggleRadialMenu();
+          }
+        });
+
+        // Click outside to close menu
+        document.addEventListener('click', (e) => {
+          if (this.isMenuOpen && !this.orb.contains(e.target) && !this.radialMenu.contains(e.target)) {
+
+            this.toggleRadialMenu();
+          }
+        });
+
+        // Hover effects for orb
+        this.orb.addEventListener('mouseenter', () => {
+          document.querySelectorAll('.quick-stats').forEach(el => {
+            el.style.opacity = '1';
+          });
+        });
+
+        // Initialize keyboard shortcuts
+        this.setupKeyboardShortcuts();
+        
+        // RESTORED: Click outside to close menu
+        document.addEventListener('click', (e) => {
+          if (this.isMenuOpen && !this.orb.contains(e.target) && !this.radialMenu.contains(e.target)) {
+            this.toggleRadialMenu();
+          }
+        });
+
+        // RESTORED: Hover effects for orb
+        this.orb.addEventListener('mouseenter', () => {
+          document.querySelectorAll('.quick-stats').forEach(el => {
+            el.style.opacity = '1';
+            el.style.transform = 'translateY(-10px) scale(1.02)';
+          });
+        });
+
+        this.orb.addEventListener('mouseleave', () => {
+          document.querySelectorAll('.quick-stats').forEach(el => {
+            el.style.opacity = '0.7';
+            el.style.transform = 'translateY(0) scale(1)';
+          });
+        });
+
+        // CRITICAL FIX: Listen for vault status changes from extension
+        this.setupVaultStatusListener();
+        
+        // Auto-trigger constellation mode if hash is present
+        if (window.location.hash === '#constellation') {
+          console.log('🌟 DASHBOARD: Auto-triggering constellation mode from URL hash');
+          setTimeout(() => {
+            this.enterMemoryConstellation();
+          }, 1000); // Wait for vault to load
+        }
+      }
+
+      // Listen for vault status changes and update UI
+      setupVaultStatusListener() {
+        window.addEventListener('vault-status-changed', (event) => {
+
+          // Update global status
+          window.currentVaultStatus = event.detail;
+
+          // Update vault node status in UI
+          this.updateVaultNodeStatus();
+
+          // Update any vault-dependent UI elements
+          this.refreshVaultDependentUI();
+        });
+
+        // Also listen for extension-vault-ready directly
+        window.addEventListener('extension-vault-ready', (event) => {
+
+          // Ensure vault status is updated
+          if (window.webVaultStatus) {
+            window.webVaultStatus.status.isUnlocked = true;
+            window.webVaultStatus.status.hasVault = true;
+            window.webVaultStatus.status.name = event.detail.vaultName;
+            window.currentVaultStatus = window.webVaultStatus.status;
+          }
+
+          // Update UI immediately
+          this.updateVaultNodeStatus();
+        });
+
+        // CRITICAL: Listen for memory additions from Emma Chat
+        window.addEventListener('emmaMemoryAdded', (event) => {
+          console.log('🔄 DASHBOARD: Memory added event received, refreshing constellation');
+          
+          if (this.isConstellationMode) {
+            // Force constellation refresh with new data - longer delay to ensure vault sync
+            setTimeout(() => {
+              this.enterMemoryConstellation();
+              console.log('🔄 DASHBOARD: Constellation refreshed after memory addition');
+            }, 300); // Increased delay for better data consistency
+          }
+        });
+        window.addEventListener('emmaMemoryDeleted', (event) => {
+          console.log('🗋 DASHBOARD: Memory deleted event received, refreshing constellation');
+          
+          if (this.isConstellationMode) {
+            setTimeout(() => {
+              this.enterMemoryConstellation();
+              console.log('🗋 DASHBOARD: Constellation refreshed after memory deletion');
+            }, 300);
+          }
+        });
+      }
+
+      // Refresh UI elements that depend on vault status
+      refreshVaultDependentUI() {
+        // Update any vault-dependent elements
+        const vaultElements = document.querySelectorAll('[data-vault-dependent]');
+        vaultElements.forEach(element => {
+          if (window.currentVaultStatus && window.currentVaultStatus.isUnlocked) {
+            element.classList.remove('vault-locked');
+            element.classList.add('vault-unlocked');
+          } else {
+            element.classList.remove('vault-unlocked');
+            element.classList.add('vault-locked');
+          }
+        });
+      }
+
+      shouldUsePerformanceLite() {
+        try {
+          const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+          const compactViewport = window.matchMedia('(max-width: 900px)').matches;
+          const touchDevice = (navigator.maxTouchPoints || 0) > 1;
+          return prefersReducedMotion || compactViewport || touchDevice;
+        } catch (error) {
+          console.warn('Performance mode detection failed (non-critical):', error);
+          return false;
+        }
+      }
+
+      isCompactViewport() {
+        return window.innerWidth <= 768;
+      }
+
+      getConstellationNodeSize() {
+        const width = window.innerWidth;
+        if (width <= 480) return 56;
+        if (width <= 900) return 68;
+        return 80;
+      }
+
+      shouldReduceConstellationPhysics() {
+        return this.lowPowerMode || this.isCompactViewport();
+      }
+
+      initNeuralNetwork() {
+        // 🎯 BACK TO BASICS: Orb-relative positioning that actually works
+        console.log('🔧 initNeuralNetwork: Using orb-relative positioning');
+
+        const items = this.radialMenu.querySelectorAll('.radial-item');
+        
+        // 🔥 GET ACTUAL ORB POSITION: Don't force it, work with it
+        const orbRect = this.orb.getBoundingClientRect();
+        const orbCenterX = orbRect.left + orbRect.width / 2;
+        const orbCenterY = orbRect.top + orbRect.height / 2;
+
+        console.log('🎯 Actual orb center:', { x: orbCenterX, y: orbCenterY, orbRect });
+
+        // 🌌 SIMPLIFIED: One radius that works great for all devices - true orbiting feel
+        const radius = 140; // Proper orbiting distance - feels like satellites around Emma orb
+
+        console.log('🌌 Using unified orbiting radius:', radius, 'px for all devices');
+
+        // Clear existing nodes
+        this.nodes = [];
+
+        items.forEach((item, i) => {
+          const angle = (i / items.length) * Math.PI * 2 - Math.PI / 2;
+          
+          // 🔗 ORB-RELATIVE: Calculate position relative to actual orb center
+          const targetX = orbCenterX + Math.cos(angle) * radius;
+          const targetY = orbCenterY + Math.sin(angle) * radius;
+
+          // 🎬 ANIMATION SETUP: Start at actual orb center for animate-out effect
+          const startX = orbCenterX;
+          const startY = orbCenterY;
+
+          // Position at target location (no scaling animation needed)
+          item.style.left = (targetX - 45) + 'px'; // Center the 90px item
+          item.style.top = (targetY - 45) + 'px';
+          
+          // CRITICAL FIX: Ensure item is visible after exitMemoryConstellation reset
+          item.style.opacity = '1';
+          item.style.transform = 'scale(1)';
+          
+          console.log(`🔧 Item ${i} restored:`, {
+            left: item.style.left,
+            top: item.style.top,
+            opacity: item.style.opacity,
+            transform: item.style.transform
+          });
+
+          console.log(`🎯 Item ${i}: start(${startX}, ${startY}) → target(${targetX}, ${targetY})`);
+
+          // Store position data (simplified for gentle fade)
+          const nodeData = {
+            element: item,
+            x: targetX,      // Final position
+            y: targetY,
+            targetX: targetX,
+            targetY: targetY,
+            baseX: targetX,
+            baseY: targetY,
+            angle: angle,
+            connections: [],
+            orbBound: true
+          };
+
+          this.nodes.push(nodeData);
+        });
+
+        // Create connections between nodes
+        this.nodes.forEach((node, i) => {
+          // Connect to adjacent nodes
+          const next = this.nodes[(i + 1) % this.nodes.length];
+          const prev = this.nodes[(i - 1 + this.nodes.length) % this.nodes.length];
+          node.connections.push(next, prev);
+
+          // Connect to opposite node for cross-connections
+          const opposite = this.nodes[(i + Math.floor(this.nodes.length / 2)) % this.nodes.length];
+          if (opposite !== node) {
+            node.connections.push(opposite);
+          }
+        });
+
+        // Add central orb as a node at actual orb center
+        this.centralNode = {
+          x: orbCenterX,
+          y: orbCenterY,
+          element: this.orb
+        };
+
+        // Connect all nodes to center
+        this.nodes.forEach(node => {
+          node.connections.push(this.centralNode);
+        });
+      }
+
+      // Removed initRadialNeuralNetwork - no longer needed since we exit constellation instead of showing menu overlay
+
+      toggleRadialMenu() {
+        console.log('🔘 toggleRadialMenu called - Debug:', {
+          isMenuOpen: this.isMenuOpen,
+          radialMenuExists: !!this.radialMenu,
+          dashboardInstance: !!window.emmaDashboard
+        });
+        
+        this.isMenuOpen = !this.isMenuOpen;
+
+        if (this.isMenuOpen) {
+          this.radialMenu.classList.add('active');
+          document.body.classList.add('menu-active'); // Fade ALL UI elements
+          document.body.classList.remove('dashboard-minimal');
+
+          this.updateVaultNodeStatus(); // Update vault node based on status
+
+          // Initialize the menu nodes (without aggressive physics)
+          this.initNeuralNetwork();
+
+        } else {
+          this.radialMenu.classList.remove('active');
+          document.body.classList.remove('menu-active');
+          if (!this.isConstellationMode) {
+            document.body.classList.add('dashboard-minimal');
+          }
+
+          // Clear any neural animation
+          if (this.neuralAnimationId) {
+            cancelAnimationFrame(this.neuralAnimationId);
+            this.neuralCtx.clearRect(0, 0, this.neuralCanvas.width, this.neuralCanvas.height);
+          }
+
+          // Reset nodes array
+          this.nodes = [];
+        }
+      }
+
+      // Simple method to position menu items around orb with gentle fade-in
+      positionMenuItemsAroundOrb() {
+        const orbRect = this.orb.getBoundingClientRect();
+        const orbCenterX = orbRect.left + orbRect.width / 2;
+        const orbCenterY = orbRect.top + orbRect.height / 2;
+        const radius = 140; // Consistent distance from orb
+
+        const menuItems = this.radialMenu.querySelectorAll('.radial-item');
+        
+        menuItems.forEach((item, i) => {
+          const angle = (i / menuItems.length) * Math.PI * 2 - Math.PI / 2;
+          const targetX = orbCenterX + Math.cos(angle) * radius;
+          const targetY = orbCenterY + Math.sin(angle) * radius;
+          
+          // Position the item (center the 90px item)
+          item.style.left = (targetX - 45) + 'px';
+          item.style.top = (targetY - 45) + 'px';
+        });
+      }
+
+      // 🧠 NEURAL EXPANSION: Expand radial nodes using neural network physics
+      expandRadialNeuralNetwork() {
+        console.log('🧠 Expanding radial neural network from orb center');
+        
+        this.nodes.forEach((node, i) => {
+          // Set target position for neural physics to move toward
+          node.baseX = node.targetX;
+          node.baseY = node.targetY;
+          
+          // Add initial velocity toward target (like constellation nodes)
+          const dx = node.targetX - node.x;
+          const dy = node.targetY - node.y;
+          const distance = Math.sqrt(dx * dx + dy * dy);
+          
+          if (distance > 1) {
+            // Give it momentum toward target
+            node.vx = (dx / distance) * 3; // Fast initial velocity
+            node.vy = (dy / distance) * 3;
+          }
+          
+          // Show and scale the node
+          setTimeout(() => {
+            node.element.style.transition = 'opacity 0.1s ease, transform 0.1s ease';
+            node.element.style.opacity = '1';
+            node.element.style.transform = 'scale(1)';
+            
+            // Pause float animation during menu display
+            node.element.style.animationPlayState = 'paused';
+            
+            console.log(`🧠 Node ${i} neural expansion initiated to (${node.targetX}, ${node.targetY})`);
+          }, i * 15); // Fast stagger
+        });
+      }
+
+      // 🧠 NEURAL COLLAPSE: Collapse radial nodes back to orb using neural physics
+      collapseRadialNeuralNetwork() {
+        console.log('🧠 Collapsing radial neural network back to orb center');
+        
+        // Get actual orb center position
+        const orbRect = this.orb.getBoundingClientRect();
+        const orbCenterX = orbRect.left + orbRect.width / 2;
+        const orbCenterY = orbRect.top + orbRect.height / 2;
+        
+        this.nodes.forEach((node, i) => {
+          // Set orb center as the new target for neural physics
+          node.baseX = orbCenterX;
+          node.baseY = orbCenterY;
+          node.targetX = orbCenterX;
+          node.targetY = orbCenterY;
+          
+          // Add velocity toward orb center (like constellation nodes)
+          const dx = orbCenterX - node.x;
+          const dy = orbCenterY - node.y;
+          const distance = Math.sqrt(dx * dx + dy * dy);
+          
+          if (distance > 1) {
+            // Give it momentum toward orb center
+            node.vx = (dx / distance) * 4; // Fast collapse velocity
+            node.vy = (dy / distance) * 4;
+          }
+          
+          // Hide and scale down the node
+          setTimeout(() => {
+            node.element.style.transition = 'opacity 0.15s ease, transform 0.15s ease';
+            node.element.style.opacity = '0';
+            node.element.style.transform = 'scale(0)';
+            
+            // Re-enable float animation when menu closes
+            node.element.style.animationPlayState = 'running';
+            
+            console.log(`🧠 Node ${i} neural collapse initiated to orb (${orbCenterX}, ${orbCenterY})`);
+          }, (this.nodes.length - 1 - i) * 20); // Fast reverse stagger
+        });
+      }
+
+      // 🔄 NEW: Reposition menu items to stay bound to orb (for resize/orientation changes)
+      repositionMenuToOrb() {
+        if (!this.isMenuOpen || this.nodes.length === 0) return;
+        
+        console.log('🔄 Repositioning menu items to stay bound to orb');
+        
+        // Get current orb position (don't force it, work with it)
+        const orbRect = this.orb.getBoundingClientRect();
+        const orbCenterX = orbRect.left + orbRect.width / 2;
+        const orbCenterY = orbRect.top + orbRect.height / 2;
+        
+        // 🌌 SIMPLIFIED: Same orbiting radius for all devices
+        const radius = 140; // Consistent orbiting distance - satellites around Emma orb
+        
+        // Update all node positions relative to actual orb center
+        this.nodes.forEach((node, i) => {
+          const angle = (i / this.nodes.length) * Math.PI * 2 - Math.PI / 2;
+          const newTargetX = orbCenterX + Math.cos(angle) * radius;
+          const newTargetY = orbCenterY + Math.sin(angle) * radius;
+          
+          // Update positions with fast smooth transition
+          const item = node.element;
+          item.style.transition = 'all 0.15s ease';
+          item.style.left = (newTargetX - 45) + 'px';
+          item.style.top = (newTargetY - 45) + 'px';
+          
+          // Update node data
+          node.x = newTargetX;
+          node.y = newTargetY;
+          node.targetX = newTargetX;
+          node.targetY = newTargetY;
+          node.baseX = newTargetX;
+          node.baseY = newTargetY;
+        });
+      }
+
+      initLoadingOrb() {
+        try {
+          const loadingOrbContainer = document.querySelector('.loading-orb');
+          if (!loadingOrbContainer) {
+            console.warn('🌟 Loading orb container not found');
+            return;
+          }
+
+          if (window.EmmaOrb) {
+            // Create WebGL Emma Orb for loading screen
+            this.loadingOrb = new window.EmmaOrb(loadingOrbContainer, {
+              hue: 270, // Emma's signature purple-pink
+              hoverIntensity: 0.5,
+              rotateOnHover: false,
+              forceHoverState: true // Always show active state during loading
+            });
+
+          } else {
+            console.warn('🌟 EmmaOrb class not available for loading, using fallback');
+            // Fallback to gradient orb if WebGL not available
+            const fallbackDiv = document.createElement('div');
+            fallbackDiv.className = 'loading-orb-fallback';
+            loadingOrbContainer.appendChild(fallbackDiv);
+          }
+        } catch (error) {
+          console.error('🚨 Error initializing Loading Emma Orb:', error);
+          // Fallback on error
+          const loadingOrbContainer = document.querySelector('.loading-orb');
+          if (loadingOrbContainer) {
+            const fallbackDiv = document.createElement('div');
+            fallbackDiv.className = 'loading-orb-fallback';
+            loadingOrbContainer.appendChild(fallbackDiv);
+          }
+        }
+      }
+
+      initEmmaOrb() {
+        try {
+          const orbContainer = document.getElementById('webgl-orb-container');
+          if (!orbContainer) {
+            console.warn('🌟 WebGL orb container not found');
+            return;
+          }
+
+          const computed = getComputedStyle(document.documentElement);
+          const hueValue = parseFloat(computed.getPropertyValue('--emma-orb-hue')) || 270;
+          const hoverIntensityValue = parseFloat(computed.getPropertyValue('--emma-orb-hover-intensity')) || 0.35;
+
+          if (window.EmmaOrb) {
+            try {
+              // Create WebGL Emma Orb with Emma's signature purple-pink hue
+              this.webglOrb = new window.EmmaOrb(orbContainer, {
+                hue: hueValue,
+                hoverIntensity: hoverIntensityValue,
+                rotateOnHover: true,
+                forceHoverState: false
+              });
+
+            } catch (webglError) {
+              console.error('❌ WebGL orb creation failed:', webglError);
+              // Force fallback
+              window.EmmaOrb = null;
+            }
+          }
+
+          if (!window.EmmaOrb || !this.webglOrb) {
+            console.warn('🌟 EmmaOrb class not available, using fallback');
+            const fallbackGradient = (computed.getPropertyValue('--emma-gradient-primary') || '').trim();
+            const fallbackGlow = (computed.getPropertyValue('--emma-glow-strong') || '0 0 40px rgba(111, 99, 217, 0.6)').trim();
+            orbContainer.style.background = fallbackGradient || 'radial-gradient(circle at 30% 30%, #6f63d9, #4f46e5, #deb3e4)';
+            orbContainer.style.borderRadius = '50%';
+            orbContainer.style.width = '100%';
+            orbContainer.style.height = '100%';
+            orbContainer.style.boxShadow = `${fallbackGlow}, inset 0 0 40px rgba(255, 255, 255, 0.1)`;
+            orbContainer.style.animation = 'orb-pulse 3s ease-in-out infinite';
+
+          }
+
+          // Clean Emma orb - no vault unlock needed on dashboard
+        } catch (error) {
+          console.error('🚨 Error initializing Emma Orb:', error);
+          // Ensure fallback is applied
+          const orbContainer = document.getElementById('webgl-orb-container');
+          if (orbContainer) {
+            const computed = getComputedStyle(document.documentElement);
+            const fallbackGradient = (computed.getPropertyValue('--emma-gradient-primary') || '').trim();
+            const fallbackGlow = (computed.getPropertyValue('--emma-glow-strong') || '0 0 40px rgba(111, 99, 217, 0.6)').trim();
+            orbContainer.style.background = fallbackGradient || 'radial-gradient(circle at 30% 30%, #6f63d9, #4f46e5)';
+            orbContainer.style.borderRadius = '50%';
+            orbContainer.style.width = '100%';
+            orbContainer.style.height = '100%';
+            orbContainer.style.boxShadow = `${fallbackGlow}, inset 0 0 40px rgba(255, 255, 255, 0.1)`;
+          }
+        }
+      }
+
+      handleThemeApplied(event) {
+        const theme = event && event.detail ? event.detail.theme : null;
+        if (!theme) return;
+        this.applyThemeToOrb(theme);
+      }
+
+      applyThemeToOrb(theme) {
+        if (!theme) return;
+
+        if (this.webglOrb) {
+          const hue = parseFloat(theme.cssVars && theme.cssVars['--emma-orb-hue']);
+          if (!Number.isNaN(hue)) {
+            this.webglOrb.options.hue = hue;
+          }
+
+          const hoverIntensity = parseFloat(theme.cssVars && theme.cssVars['--emma-orb-hover-intensity']);
+          if (!Number.isNaN(hoverIntensity)) {
+            this.webglOrb.options.hoverIntensity = hoverIntensity;
+          }
+        } else {
+          const orbContainer = document.getElementById('webgl-orb-container');
+          if (!orbContainer) return;
+
+          const gradient = theme.cssVars && theme.cssVars['--emma-gradient-primary'];
+          const glow = theme.cssVars && theme.cssVars['--emma-glow-strong'];
+
+          if (gradient) {
+            orbContainer.style.background = gradient.trim();
+          }
+
+          if (glow) {
+            orbContainer.style.boxShadow = `${glow.trim()}, inset 0 0 40px rgba(255, 255, 255, 0.1)`;
+          }
+        }
+      }
+
+      updateVaultNodeStatus() {
+        try {
+
+          const vaultNode = document.getElementById('vault-node');
+          if (!vaultNode) {
+            console.warn('⚠️ Vault node not found, skipping status update');
+            // Try alternative selectors
+            const altVaultNode = document.querySelector('[data-action="vault"], .radial-item[onclick*="vault"]');
+            if (altVaultNode) {
+
+              this.updateAlternativeVaultNode(altVaultNode);
+            }
+            return;
+          }
+
+          const vaultIcon = vaultNode.querySelector('.radial-item-icon');
+          if (!vaultIcon) {
+            console.warn('⚠️ Vault icon not found, trying alternative selector');
+            const altIcon = vaultNode.querySelector('span, .icon');
+            if (altIcon) {
+
+              this.updateVaultIcon(altIcon, vaultNode);
+              return;
+            }
+            return;
+          }
+
+          this.updateVaultIcon(vaultIcon, vaultNode);
+        } catch (error) {
+          console.warn('⚠️ Error updating vault node status:', error);
+        }
+      }
+
+      updateVaultIcon(vaultIcon, vaultNode) {
+        if (window.currentVaultStatus && window.currentVaultStatus.isUnlocked) {
+
+          vaultIcon.textContent = '🔓';
+          vaultNode.style.background = 'rgba(74, 222, 128, 0.1)'; // Green tint when unlocked
+          vaultNode.style.borderColor = 'rgba(74, 222, 128, 0.3)';
+          vaultNode.style.boxShadow = '0 0 14px rgba(74, 222, 128, 0.3)';
+        } else {
+
+          vaultIcon.textContent = '🔒';
+          vaultNode.style.background = 'var(--emma-glass)'; // Default when locked
+          vaultNode.style.borderColor = 'rgba(111, 99, 217, 0.3)';
+          vaultNode.style.boxShadow = '0 0 12px rgba(111, 99, 217, 0.18)';
+        }
+      }
+
+      updateAlternativeVaultNode(node) {
+        const icon = node.querySelector('span') || node;
+        if (window.currentVaultStatus && window.currentVaultStatus.isUnlocked) {
+          icon.textContent = '🔓';
+          node.style.background = 'rgba(74, 222, 128, 0.1)';
+        } else {
+          icon.textContent = '🔒';
+          node.style.background = 'var(--emma-glass)';
+        }
+      }
+
+      updateAllVaultIndicators() {
+
+        // Update any vault-related elements
+        const vaultElements = document.querySelectorAll('[data-action="vault"], .vault-indicator, #vault-node');
+        vaultElements.forEach(element => {
+          const icon = element.querySelector('span, .radial-item-icon') || element;
+          if (window.currentVaultStatus && window.currentVaultStatus.isUnlocked) {
+            if (icon.textContent) icon.textContent = '🔓';
+            element.style.background = 'rgba(74, 222, 128, 0.1)';
+            element.style.borderColor = 'rgba(74, 222, 128, 0.3)';
+            element.style.boxShadow = '0 0 14px rgba(74, 222, 128, 0.3)';
+          } else {
+            if (icon.textContent) icon.textContent = '🔒';
+            element.style.background = 'var(--emma-glass)';
+            element.style.borderColor = 'rgba(111, 99, 217, 0.3)';
+            element.style.boxShadow = '0 0 12px rgba(111, 99, 217, 0.18)';
+          }
+        });
+
+      }
+
+      assignNodeUid(element, prefix) {
+        if (!element) return `${prefix}-unknown`;
+        this.nodeUidCounter = (this.nodeUidCounter || 0) + 1;
+        const uid = `${prefix}-${this.nodeUidCounter}`;
+        element.dataset.nodeUid = uid;
+        return uid;
+      }
+
+      linkNodes(nodeA, nodeB) {
+        if (!nodeA || !nodeB || nodeA === nodeB) {
+          return;
+        }
+
+        if (nodeA.isCreateNode || nodeB.isCreateNode) {
+          return;
+        }
+
+        if (!Array.isArray(nodeA.connections)) {
+          nodeA.connections = [];
+        }
+        if (!Array.isArray(nodeB.connections)) {
+          nodeB.connections = [];
+        }
+
+        if (!nodeA.connections.includes(nodeB)) {
+          nodeA.connections.push(nodeB);
+        }
+        if (!nodeB.connections.includes(nodeA)) {
+          nodeB.connections.push(nodeA);
+        }
+      }
+
+      purgeCreateNodeConnections() {
+        const createElement = this.createMemoryElement;
+        if (!createElement) return;
+
+        this.nodes.forEach(node => {
+          if (!Array.isArray(node.connections)) return;
+          node.connections = node.connections.filter(conn => {
+            if (!conn) return false;
+            if (conn.isCreateNode) {
+              if (Array.isArray(conn.connections)) {
+                conn.connections = conn.connections.filter(inner => inner !== node);
+              }
+              return false;
+            }
+            if (conn.element === createElement) {
+              return false;
+            }
+            return true;
+          });
+        });
+
+        if (this.centralNode && Array.isArray(this.centralNode.connections)) {
+          this.centralNode.connections = this.centralNode.connections.filter(conn => conn && !conn.isCreateNode && conn.element !== createElement);
+        }
+
+        const createNode = this.nodes.find(node => node.isCreateNode);
+        if (createNode) {
+          createNode.connections = [];
+        }
+      }
+
+      dedupeNodeConnections() {
+        this.nodes.forEach(node => {
+          if (!Array.isArray(node.connections)) {
+            node.connections = [];
+            return;
+          }
+
+          const seen = new Set();
+          node.connections = node.connections.filter(conn => {
+            if (!conn) return false;
+            const key = conn.uid || (conn.element && conn.element.dataset && conn.element.dataset.nodeUid);
+            if (!key) return false;
+            if (seen.has(key)) {
+              if (Array.isArray(conn.connections)) {
+                conn.connections = conn.connections.filter(inner => inner !== node);
+              }
+              return false;
+            }
+            seen.add(key);
+            return true;
+          });
+        });
+
+        if (this.centralNode && Array.isArray(this.centralNode.connections)) {
+          const seenCenter = new Set();
+          this.centralNode.connections = this.centralNode.connections.filter(conn => {
+            if (!conn) return false;
+            const key = conn.uid || (conn.element && conn.element.dataset && conn.element.dataset.nodeUid);
+            if (!key) return false;
+            if (seenCenter.has(key)) {
+              if (Array.isArray(conn.connections)) {
+                conn.connections = conn.connections.filter(inner => inner !== this.centralNode);
+              }
+              return false;
+            }
+            seenCenter.add(key);
+            return true;
+          });
+        }
+      }
+
+      // Check if a line intersects with Emma orb circle
+      lineIntersectsCircle(x1, y1, x2, y2, cx, cy, radius) {
+        // Vector from point1 to point2
+        const dx = x2 - x1;
+        const dy = y2 - y1;
+
+        // Vector from point1 to circle center
+        const fx = x1 - cx;
+        const fy = y1 - cy;
+
+        // Quadratic equation coefficients
+        const a = dx * dx + dy * dy;
+        const b = 2 * (fx * dx + fy * dy);
+        const c = (fx * fx + fy * fy) - radius * radius;
+
+        const discriminant = b * b - 4 * a * c;
+
+        // No intersection if discriminant is negative
+        if (discriminant < 0) return false;
+
+        // Check if intersection points are within the line segment
+        const sqrt_discriminant = Math.sqrt(discriminant);
+        const t1 = (-b - sqrt_discriminant) / (2 * a);
+        const t2 = (-b + sqrt_discriminant) / (2 * a);
+
+        // If either intersection point is within [0,1], line intersects circle
+        return (t1 >= 0 && t1 <= 1) || (t2 >= 0 && t2 <= 1) || (t1 < 0 && t2 > 1);
+      }
+
+      animateNeuralNetwork() {
+        if (!this.neuralCanvas || !this.neuralCtx) {
+          return;
+        }
+
+        this.neuralCanvas.width = window.innerWidth;
+        this.neuralCanvas.height = window.innerHeight;
+        const ctx = this.neuralCtx;
+        const skipCanvasRendering = this.lowPowerMode || document.body.classList.contains('performance-lite') || !ctx;
+
+        const animate = () => {
+          const reducePhysics = this.shouldReduceConstellationPhysics();
+          if (!this.isMenuOpen && !this.isConstellationMode) {
+            this.neuralAnimationId = null;
+            return;
+          }
+
+          if (!skipCanvasRendering) {
+            ctx.clearRect(0, 0, this.neuralCanvas.width, this.neuralCanvas.height);
+
+            if (!reducePhysics && (this.isMenuOpen || this.isConstellationMode)) {
+              ctx.strokeStyle = 'rgba(111, 99, 217, 0.03)';
+              ctx.lineWidth = 1;
+              const gridSize = 50;
+
+              for (let x = 0; x < this.neuralCanvas.width; x += gridSize) {
+                ctx.beginPath();
+                ctx.moveTo(x, 0);
+                ctx.lineTo(x, this.neuralCanvas.height);
+                ctx.stroke();
+              }
+
+              for (let y = 0; y < this.neuralCanvas.height; y += gridSize) {
+                ctx.beginPath();
+                ctx.moveTo(0, y);
+                ctx.lineTo(this.neuralCanvas.width, y);
+                ctx.stroke();
+              }
+            }
+          }
+
+          // Update node positions with organic movement (only for visible nodes)
+          const time = Date.now() * 0.001;
+          this.nodes.forEach((node, i) => {
+            // CRITICAL FIX: Only animate visible nodes
+            const nodeElement = node.element || document.getElementById(node.id);
+            if (!nodeElement || nodeElement.style.display === 'none') {
+              return; // Skip animation for hidden nodes
+            }
+
+            const halfWidth = (nodeElement.offsetWidth || 0) / 2;
+            const halfHeight = (nodeElement.offsetHeight || 0) / 2;
+
+            if (node.isDragging) {
+              node.vx = 0;
+              node.vy = 0;
+              node.baseX = node.x;
+              node.baseY = node.y;
+              nodeElement.style.left = `${node.x - halfWidth}px`;
+              nodeElement.style.top = `${node.y - halfHeight}px`;
+              return;
+            }
+
+            const isStaticConstellationNode =
+              this.isConstellationMode &&
+              !node.orbBound &&
+              (node.type === 'memory' || node.isCreateNode);
+
+            if (isStaticConstellationNode) {
+              // Keep memory nodes and create button steady in constellation mode
+              node.vx = 0;
+              node.vy = 0;
+              node.x = node.baseX;
+              node.y = node.baseY;
+              nodeElement.style.left = `${node.x - halfWidth}px`;
+              nodeElement.style.top = `${node.y - halfHeight}px`;
+              return;
+            }
+
+            // Different floating movement for radial vs constellation nodes
+            let floatX, floatY;
+            if (node.orbBound) {
+              // 🎯 RADIAL MENU NODES: Much tighter floating to stay within 50px radius
+              floatX = Math.sin(time * 0.3 + i) * 3; // Reduced from 12px to 3px
+              floatY = Math.cos(time * 0.2 + i * 0.5) * 2; // Reduced from 8px to 2px
+            } else {
+              // 🌌 CONSTELLATION NODES: Normal floating movement
+              floatX = Math.sin(time * 0.3 + i) * 12 * (reducePhysics ? 0.6 : 1);
+              floatY = Math.cos(time * 0.2 + i * 0.5) * 8 * (reducePhysics ? 0.6 : 1);
+            }
+
+            // Gentle elastic force back to base position (petri dish feel)
+            const dx = (node.baseX + floatX) - node.x;
+            const dy = (node.baseY + floatY) - node.y;
+
+            node.vx += dx * (reducePhysics ? 0.003 : 0.005); // Adaptive elastic force
+            node.vy += dy * (reducePhysics ? 0.003 : 0.005);
+
+            // Apply more damping for organic feel
+            node.vx *= reducePhysics ? 0.985 : 0.98;
+            node.vy *= reducePhysics ? 0.985 : 0.98;
+
+            // Add repulsion from Emma orb (prevent overlap)
+            if (this.centralNode && this.isConstellationMode) {
+              const orbDx = node.x - this.centralNode.x;
+              const orbDy = node.y - this.centralNode.y;
+              const orbDist = Math.sqrt(orbDx * orbDx + orbDy * orbDy);
+
+              // Repulsion zone around Emma orb
+              const repulsionRadius = reducePhysics ? 130 : 150;
+              if (orbDist < repulsionRadius && orbDist > 0) {
+                const repulsionForce = (repulsionRadius - orbDist) / repulsionRadius;
+                const forceStrength = repulsionForce * (reducePhysics ? 0.2 : 0.3); // Gentle but firm repulsion
+
+                const normalizedDx = orbDx / orbDist;
+                const normalizedDy = orbDy / orbDist;
+
+                node.vx += normalizedDx * forceStrength;
+                node.vy += normalizedDy * forceStrength;
+              }
+            }
+
+            // Add gentle repulsion between memory nodes (prevent overlap)
+            if (this.isConstellationMode && !reducePhysics) {
+              this.nodes.forEach((otherNode, j) => {
+                if (i !== j) {
+                  // CRITICAL FIX: Only calculate repulsion with visible nodes
+                  const otherElement = otherNode.element || document.getElementById(otherNode.id);
+                  if (!otherElement || otherElement.style.display === 'none') {
+                    return; // Skip repulsion with hidden nodes
+                  }
+                  const nodeDx = node.x - otherNode.x;
+                  const nodeDy = node.y - otherNode.y;
+                  const nodeDist = Math.sqrt(nodeDx * nodeDx + nodeDy * nodeDy);
+
+                  // Minimum distance between nodes
+                  const minNodeDistance = 110;
+                  if (nodeDist < minNodeDistance && nodeDist > 0) {
+                    const repulsionForce = (minNodeDistance - nodeDist) / minNodeDistance;
+                    const forceStrength = repulsionForce * 0.1; // Very gentle node repulsion
+
+                    const normalizedDx = nodeDx / nodeDist;
+                    const normalizedDy = nodeDy / nodeDist;
+
+                    node.vx += normalizedDx * forceStrength;
+                    node.vy += normalizedDy * forceStrength;
+                  }
+                }
+              });
+            }
+
+            // Update position
+            node.x += node.vx;
+            node.y += node.vy;
+
+            // 🎯 RADIAL MENU CONSTRAINT: Hard limit radial nodes with proper breathing room from orb
+            if (node.orbBound && this.orbNeuralNode) {
+              const orbDx = node.x - this.orbNeuralNode.x;
+              const orbDy = node.y - this.orbNeuralNode.y;
+              const orbDistance = Math.sqrt(orbDx * orbDx + orbDy * orbDy);
+              
+              // 🌌 SIMPLIFIED: One max distance for all devices - orbiting constraint
+              const MAX_RADIAL_DISTANCE = reducePhysics ? 120 : 150; // Orbiting distance + small buffer for physics
+              
+              if (orbDistance > MAX_RADIAL_DISTANCE) {
+                // Constrain to max distance from orb center
+                const constrainedX = this.orbNeuralNode.x + (orbDx / orbDistance) * MAX_RADIAL_DISTANCE;
+                const constrainedY = this.orbNeuralNode.y + (orbDy / orbDistance) * MAX_RADIAL_DISTANCE;
+                node.x = constrainedX;
+                node.y = constrainedY;
+                
+                // Zero out velocity to prevent further drift
+                node.vx *= 0.5;
+                node.vy *= 0.5;
+              }
+            }
+
+            // Update DOM element position
+            nodeElement.style.left = `${node.x - halfWidth}px`;
+            nodeElement.style.top = `${node.y - halfHeight}px`;
+          });
+
+          if (!skipCanvasRendering) {
+            const drawnEdges = new Set();
+            this.nodes.forEach((node, nodeIndex) => {
+              if (node.isCreateNode) {
+                return;
+              }
+
+              const sourceElement = node.element || document.getElementById(node.id);
+              if (!sourceElement || sourceElement.style.display === 'none') {
+                return;
+              }
+
+              const sourceKey = node.uid || (sourceElement.dataset && sourceElement.dataset.nodeUid) || `node-${nodeIndex}`;
+
+              node.connections.forEach(target => {
+                if (!target || target.isCreateNode) {
+                  return;
+                }
+
+                const targetElement = target.element || document.getElementById(target.id);
+                if (!targetElement || targetElement.style.display === 'none') {
+                  return;
+                }
+
+                const targetKey = target.uid || (targetElement.dataset && targetElement.dataset.nodeUid) || 'target';
+                const edgeA = sourceKey < targetKey ? sourceKey : targetKey;
+                const edgeB = sourceKey < targetKey ? targetKey : sourceKey;
+                const edgeId = `${edgeA}::${edgeB}`;
+                if (drawnEdges.has(edgeId)) {
+                  return;
+                }
+                drawnEdges.add(edgeId);
+
+                const centerX = window.innerWidth / 2;
+                const centerY = window.innerHeight / 2;
+                const orbRadius = 110;
+
+                if (this.lineIntersectsCircle(node.x, node.y, target.x, target.y, centerX, centerY, orbRadius)) {
+                  return;
+                }
+
+                const dist = Math.sqrt(
+                  Math.pow(node.x - target.x, 2) +
+                  Math.pow(node.y - target.y, 2)
+                );
+
+                const isMemoryMode = this.isConstellationMode && !this.isMenuOpen;
+                const gradient = ctx.createLinearGradient(
+                  node.x, node.y, target.x, target.y
+                );
+
+                if (isMemoryMode) {
+                  gradient.addColorStop(0, 'rgba(111, 99, 217, 0.2)');
+                  gradient.addColorStop(0.5, 'rgba(222, 179, 228, 0.15)');
+                  gradient.addColorStop(1, 'rgba(111, 99, 217, 0.2)');
+                  ctx.lineWidth = 1.2 + Math.sin(time + dist * 0.01) * 0.2;
+                } else {
+                  gradient.addColorStop(0, 'rgba(111, 99, 217, 0.03)');
+                  gradient.addColorStop(0.5, 'rgba(222, 179, 228, 0.02)');
+                  gradient.addColorStop(1, 'rgba(111, 99, 217, 0.03)');
+                  ctx.lineWidth = 0.5 + Math.sin(time + dist * 0.01) * 0.1;
+                }
+
+                ctx.strokeStyle = gradient;
+
+                ctx.beginPath();
+                ctx.moveTo(node.x, node.y);
+
+                const curve1 = Math.sin(time * 0.4 + node.x * 0.005) * 15;
+                const curve2 = Math.cos(time * 0.3 + node.y * 0.005) * 10;
+
+                ctx.bezierCurveTo(
+                  node.x + curve1,
+                  node.y + curve2,
+                  target.x - curve2,
+                  target.y - curve1,
+                  target.x,
+                  target.y
+                );
+
+                ctx.stroke();
+              });
+            });
+          }
+
+          this.neuralAnimationId = requestAnimationFrame(animate);
+        };
+
+        animate();
+      }
+
+      // 🎯 SAFE URL PARAM HANDLER: Auto-trigger constellation or memory creation
+      handleURLParams() {
+        try {
+          const urlParams = new URLSearchParams(window.location.search);
+          
+          if (urlParams.get('constellation') === 'true') {
+            // Auto-enter constellation mode after a brief delay
+            setTimeout(() => {
+              console.log('🎯 AUTO-TRIGGERING: Constellation mode from URL param');
+              this.enterMemoryConstellation();
+            }, 2000); // Wait for dashboard to fully load
+          }
+          
+          if (urlParams.get('create') === 'true') {
+            // Auto-start voice capture for memory creation
+            setTimeout(() => {
+              console.log('🎯 AUTO-TRIGGERING: Memory creation from URL param');
+              this.startVoiceCapture();
+            }, 2000); // Wait for dashboard to fully load
+          }
+        } catch (error) {
+          console.warn('🔧 URL param handling failed (non-critical):', error);
+          // Safe fallback - do nothing if URL parsing fails
+        }
+      }
+
+      async handleRadialAction(action) {
+
+        switch(action) {
+          case 'capture':
+            this.startVoiceCapture();
+            break;
+          case 'memories':
+            await this.enterMemoryConstellation();
+            break;
+          case 'people':
+            window.location.href = 'pages/people-emma.html';
+            break;
+          case 'chat':
+            this.startEmmaChatExperience();
+            break;
+        }
+
+        // Close menu after action
+        if (this.isMenuOpen) {
+          this.toggleRadialMenu();
+        }
+      }
+
+      resolveEmmaChatScriptUrl() {
+        const existingScript = document.querySelector('script[src*="emma-chat-experience.js"]');
+        if (existingScript?.src) {
+          return existingScript.src;
+        }
+
+        try {
+          return new URL('js/emma-chat-experience.js', window.location.href).href;
+        } catch (error) {
+          console.warn('[Emma] Unable to resolve chat script URL, falling back to relative path', error);
+          return 'js/emma-chat-experience.js';
+        }
+      }
+
+      async ensureEmmaChatExperienceLoaded() {
+        if (typeof EmmaChatExperience !== 'undefined') {
+          return true;
+        }
+
+        if (!this.emmaChatLoaderPromise) {
+          this.emmaChatLoaderPromise = new Promise((resolve, reject) => {
+            const markLoaded = (scriptEl) => {
+              if (scriptEl) {
+                scriptEl.dataset.loaded = 'true';
+              }
+              resolve();
+            };
+
+            const handleError = (error) => reject(error || new Error('Failed to load EmmaChatExperience script'));
+            const existing = document.querySelector('script[src*="emma-chat-experience.js"]');
+
+            if (existing) {
+              const alreadyLoaded = existing.dataset.loaded === 'true' ||
+                existing.readyState === 'complete' ||
+                existing.readyState === 'loaded';
+
+              if (alreadyLoaded) {
+                markLoaded(existing);
+                return;
+              }
+
+              existing.addEventListener('load', () => markLoaded(existing), { once: true });
+              existing.addEventListener('error', () => handleError(new Error('Failed to load EmmaChatExperience script')), { once: true });
+              return;
+            }
+
+            const script = document.createElement('script');
+            script.src = this.resolveEmmaChatScriptUrl();
+            script.async = true;
+            script.addEventListener('load', () => markLoaded(script), { once: true });
+            script.addEventListener('error', () => handleError(new Error('Failed to load EmmaChatExperience script')), { once: true });
+            document.head.appendChild(script);
+          }).finally(() => {
+            this.emmaChatLoaderPromise = null;
+          });
+        }
+
+        try {
+          await this.emmaChatLoaderPromise;
+          return typeof EmmaChatExperience !== 'undefined';
+        } catch (error) {
+          console.error('[Emma] Unable to load EmmaChatExperience:', error);
+          return false;
+        }
+      }
+
+      async startVoiceCapture() {
+        document.body.classList.remove('dashboard-minimal');
+
+        // Calculate elegant position relative to Emma orb
+        const orbRect = this.orb.getBoundingClientRect();
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+
+        // Position the panel optimally
+        let left = orbRect.right + 24;
+        let top = Math.max(40, orbRect.top - 80);
+
+        // Ensure it fits in viewport
+        const panelWidth = 480;
+        const panelHeight = 700;
+
+        if (left + panelWidth > viewportWidth - 40) {
+          left = orbRect.left - panelWidth - 24;
+        }
+
+        if (top + panelHeight > viewportHeight - 40) {
+          top = viewportHeight - panelHeight - 40;
+        }
+
+        const position = {
+          left: Math.max(40, left),
+          top: Math.max(40, top),
+          width: panelWidth,
+          height: panelHeight
+        };
+
+        // Create and show voice capture experience
+        this.voiceCaptureExperience = new VoiceCaptureExperience(position, {
+          voiceEnabled: true,
+          autoStart: false // Let user initiate
+        });
+
+        try {
+          await this.voiceCaptureExperience.show();
+
+        } catch (error) {
+          console.error('🎤 Failed to open voice capture:', error);
+          this.showToast('Failed to open Voice Memory Studio. Please try again.', 'error');
+        } finally {
+          document.body.classList.add('dashboard-minimal');
+        }
+      }
+
+      async startEmmaChatExperience() {
+
+        // Center chat in the middle of the page
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+
+        // Chat panel dimensions
+        const panelWidth = 600; // Wider for comfortable chat
+        const panelHeight = 700;
+
+        // Center position in the middle of the page
+        const position = {
+          left: (viewportWidth - panelWidth) / 2,
+          top: (viewportHeight - panelHeight) / 2,
+          width: panelWidth,
+          height: panelHeight
+        };
+
+        if (typeof EmmaChatExperience === 'undefined') {
+          console.warn('[Emma] EmmaChatExperience class not available, attempting to load script');
+          this.showToast('Loading chat module…', 'info');
+          const loaded = await this.ensureEmmaChatExperienceLoaded();
+          if (!loaded) {
+            this.showToast('Chat module could not load. Check your connection and try again.', 'error');
+            return;
+          }
+        }
+
+        // Create and show Emma chat experience
+        this.emmaChatExperience = new EmmaChatExperience(position, {
+          contextAware: true,
+          memoryIntegration: true
+        });
+
+        try {
+          await this.emmaChatExperience.show();
+
+        } catch (error) {
+          console.error('💬 Failed to open Emma Chat:', error);
+          this.showToast('Failed to open Chat with Emma. Please try again.', 'error');
+        }
+      }
+
+      openVaultModal() {
+        // Check if extension is available first
+        if (window.emmaWebVault && window.emmaWebVault.extensionAvailable) {
+          // Extension is managing vault - dashboard should work automatically
+
+          return; // Don't show vault modal, extension handles everything
+        }
+
+        const modal = document.getElementById('vault-modal');
+        const statusIcon = document.getElementById('status-icon');
+        const statusTitle = document.getElementById('status-title');
+        const statusDescription = document.getElementById('status-description');
+        const actionBtn = document.getElementById('vault-action-btn');
+        const statusCard = document.getElementById('vault-status-card');
+        const unlockSection = document.getElementById('unlock-section');
+        const createVaultSection = document.getElementById('create-vault-section');
+
+        // Check if .emma vault is active (only if extension not available)
+        const vaultActive = sessionStorage.getItem('emmaVaultActive') === 'true';
+        const vaultName = sessionStorage.getItem('emmaVaultName') || 'Unknown Vault';
+        const extensionVaultActive = false; // Extension not available in this branch
+
+        if (extensionVaultActive) {
+          // Extension is managing vault - show connected status
+          statusIcon.textContent = '🔗';
+          statusTitle.textContent = 'Extension Connected';
+          statusDescription.textContent = 'Vault managed by Emma Extension - changes auto-save to local file';
+          actionBtn.textContent = '🔒 Manage via Extension';
+          actionBtn.onclick = () => alert('Click the Emma extension icon 🔒 in your browser toolbar to manage your vault!');
+          actionBtn.style.display = 'block';
+          unlockSection.style.display = 'none';
+          createVaultSection.style.display = 'none';
+          statusCard.classList.add('unlocked'); // Show as unlocked/connected
+        } else if (window.currentVaultStatus && window.currentVaultStatus.isUnlocked) {
+          statusIcon.textContent = '🔓';
+          statusTitle.textContent = `${vaultName} - Unlocked`;
+          statusDescription.textContent = `Your .emma vault file is open and your memories are accessible`;
+          actionBtn.textContent = '🔒 Lock Vault';
+          actionBtn.onclick = () => this.lockVault();
+          actionBtn.style.display = 'block';
+          statusCard.classList.add('unlocked');
+          unlockSection.style.display = 'none';
+          createVaultSection.style.display = 'none';
+        } else {
+          statusIcon.textContent = '🔒';
+          statusTitle.textContent = 'Vault Locked';
+          statusDescription.textContent = 'Enter your vault code to access your memories';
+          actionBtn.textContent = 'Unlock Vault';
+          actionBtn.onclick = () => this.showUnlockForm();
+          actionBtn.style.display = 'block';
+          statusCard.classList.remove('unlocked');
+          unlockSection.style.display = 'none';
+          createVaultSection.style.display = 'none';
+        }
+
+        modal.style.display = 'flex';
+        setTimeout(() => {
+          modal.classList.add('show');
+        }, 10);
+
+        // Store reference for global access
+        window.openVaultModal = () => this.openVaultModal();
+      }
+
+      closeVaultModal() {
+        const modal = document.getElementById('vault-modal');
+        modal.classList.remove('show');
+        setTimeout(() => {
+          modal.style.display = 'none';
+        }, 300);
+      }
+
+      showUnlockForm() {
+        // Use beautiful universal vault modal instead of inline form
+        universalVaultModal.show({
+          title: "Unlock Vault",
+          message: "Enter your vault passphrase to access your secure memories",
+          onSuccess: (result) => {
+
+            // Update vault status using unified manager
+            const vaultName = sessionStorage.getItem('emmaVaultName') || 'Web Vault';
+            window.webVaultStatus.unlock(vaultName);
+
+            // Refresh dashboard data and UI
+            this.loadDashboardData();
+
+            // IMMEDIATE vault icon update
+            const vaultIcon = document.querySelector('#vault-node .radial-item-icon');
+            if (vaultIcon) {
+              vaultIcon.textContent = '🔓';
+
+            }
+
+            // Update vault node with delay to ensure DOM is ready
+            setTimeout(() => {
+              this.updateVaultNodeStatus();
+
+              // Also try to update any other vault indicators
+              this.updateAllVaultIndicators();
+
+              // Force another immediate update
+              const vaultIconAgain = document.querySelector('#vault-node .radial-item-icon');
+              if (vaultIconAgain) {
+                vaultIconAgain.textContent = '🔓';
+
+              }
+            }, 100);
+
+            // Don't reopen modal - let it close naturally
+            // The next time user opens it, it will show correct status
+
+            this.showToast('✅ Vault unlocked successfully!', 'success');
+
+          },
+          onCancel: () => {
+
+          }
+        });
+      }
+
+      hideUnlockForm() {
+        const unlockSection = document.getElementById('unlock-section');
+        const passwordInput = document.getElementById('vault-password');
+        unlockSection.style.display = 'none';
+        passwordInput.value = '';
+      }
+
+      async unlockVault() {
+        const passwordInput = document.getElementById('vault-password');
+        const unlockBtn = document.getElementById('unlock-btn');
+        const password = passwordInput.value.trim();
+
+        if (!password) {
+          passwordInput.focus();
+          return;
+        }
+
+        try {
+          unlockBtn.disabled = true;
+          unlockBtn.textContent = '🔓 Unlocking...';
+
+          if (window.emmaAPI && window.emmaAPI.vault) {
+            const result = await window.emmaAPI.vault.unlock({ passphrase: password });
+
+            if (result && result.success) {
+              // Success - update status and close form
+              window.currentVaultStatus = { isUnlocked: true };
+              await this.loadDashboardData();
+              this.updateVaultNodeStatus(); // Update the floating vault node
+              this.hideUnlockForm();
+              this.openVaultModal(); // Refresh modal with new status
+              this.showToast('✅ Vault unlocked successfully!', 'success');
+            } else {
+              throw new Error(result?.error || 'Unlock failed');
+            }
+          } else {
+            // No API available
+            throw new Error('Vault API not available');
+          }
+        } catch (error) {
+          console.error('🏠 Dashboard: Unlock error:', error);
+          this.showToast('❌ Failed to unlock vault: ' + error.message, 'error');
+        } finally {
+          unlockBtn.disabled = false;
+          unlockBtn.textContent = '🔓 Unlock';
+        }
+      }
+
+      async lockVault() {
+        try {
+          if (window.emmaAPI && window.emmaAPI.vault) {
+            const result = await window.emmaAPI.vault.lock();
+
+            if (result && result.success) {
+              window.currentVaultStatus = { isUnlocked: false };
+              await this.loadDashboardData();
+              this.updateVaultNodeStatus(); // Update the floating vault node
+              this.openVaultModal(); // Refresh modal with new status
+              this.showToast('🔒 Vault locked successfully!', 'success');
+            } else {
+              throw new Error(result?.error || 'Lock failed');
+            }
+          } else {
+            // Demo mode
+            console.warn('🏠 Dashboard: No Emma API - demo lock');
+            window.currentVaultStatus = { isUnlocked: false };
+            await this.loadDashboardData();
+            this.updateVaultNodeStatus(); // Update the floating vault node
+            this.openVaultModal();
+            this.showToast('🎭 Demo vault locked!', 'info');
+          }
+        } catch (error) {
+          console.error('🏠 Dashboard: Lock error:', error);
+          this.showToast('❌ Failed to lock vault: ' + error.message, 'error');
+        }
+      }
+
+      // Clean dashboard - vault unlock handled by index.html
+
+      async showQRShare() {
+
+        // Check if classes are available
+        if (typeof EmmaShareExperience === 'undefined') {
+          console.error('🔗 EmmaShareExperience class not found');
+          this.showToast('Share feature unavailable. Please refresh the page.', 'error');
+          return;
+        }
+
+        if (typeof QRService === 'undefined') {
+          console.warn('🔗 QRService class not found - will use fallback');
+        }
+
+        // Calculate elegant position relative to Emma orb
+        const orbRect = this.orb.getBoundingClientRect();
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;        // Position the share panel optimally
+        let left = orbRect.right + 24;
+        let top = Math.max(40, orbRect.top - 120);
+
+        // Share panel dimensions
+        const panelWidth = 650; // Wider for share content
+        const panelHeight = 720;
+
+        // Ensure it fits in viewport
+        if (left + panelWidth > viewportWidth - 40) {
+          left = orbRect.left - panelWidth - 24;
+        }
+
+        if (top + panelHeight > viewportHeight - 40) {
+          top = viewportHeight - panelHeight - 40;
+        }
+
+        const position = {
+          left: Math.max(40, left),
+          top: Math.max(40, top),
+          width: panelWidth,
+          height: panelHeight
+        };
+
+        try {
+          // Create and show Emma share experience
+          this.emmaShareExperience = new EmmaShareExperience(position, {
+            contextAware: true,
+            vaultIntegration: true
+          });
+
+          // Set global reference for share actions
+          window.shareExperience = this.emmaShareExperience;
+
+          await this.emmaShareExperience.show();
+
+        } catch (error) {
+          console.error('🔗 Failed to open Emma Share:', error);
+          this.showToast('Failed to open Share interface: ' + error.message, 'error');
+        }
+      }
+
+      async loadDashboardData() {
+        try {
+          // Use WebVaultStatus instead of old Electron API
+
+          // Don't override vault status - WebVaultStatus manages it
+          // window.currentVaultStatus is set by WebVaultStatus manager
+
+          // Keep central orb neutral - Emma branding only (text removed)
+
+          // Load stats from web vault
+          try {
+            if (window.emmaWebVault && window.webVaultStatus && window.webVaultStatus.isUnlocked()) {
+              const stats = window.emmaWebVault.getStats();
+              this.updateStats({
+                memories: stats.memoryCount || 0,
+                people: stats.peopleCount || 0,
+                today: 0 // TODO: Calculate today's memories
+              });
+            } else {
+              this.updateStats({ memories: 0, people: 0, today: 0 });
+            }
+          } catch (e) {
+            console.warn('⚠️ Web vault stats unavailable:', e.message);
+            this.updateStats({ memories: 0, people: 0, today: 0 });
+          }
+        } catch (error) {
+          console.error('🚨 Dashboard data load error:', error);
+          // Fallback to demo data - but DON'T override vault status!
+          // WebVaultStatus manager handles vault status, not this function
+          this.updateStats({ memories: 0, people: 0, today: 0 });
+        }
+      }
+
+      updateStats(newStats) {
+        Object.assign(this.stats, newStats);
+
+        // Animate number changes
+        Object.keys(newStats).forEach(key => {
+          const element = document.getElementById(`stat-${key}`);
+          if (element) {
+            const start = parseInt(element.textContent) || 0;
+            const end = this.stats[key];
+            const duration = 1000;
+            const startTime = Date.now();
+
+            const animate = () => {
+          const reducePhysics = this.shouldReduceConstellationPhysics();
+              const elapsed = Date.now() - startTime;
+              const progress = Math.min(elapsed / duration, 1);
+              const current = Math.floor(start + (end - start) * progress);
+              element.textContent = current;
+
+              if (progress < 1) {
+                requestAnimationFrame(animate);
+              }
+            };
+            animate();
+          }
+        });
+      }
+
+      showContextualPanels() {
+        // Panels are now hidden by default and shown via burger menu
+        // No longer auto-showing panels to reduce visual distraction
+
+      }
+
+      // Burger menu removed for clean interface
+
+      setupUtilityIcons() {
+        if (!this.utilityIcons) {
+          return;
+        }
+
+        // Add click handlers to utility items
+        this.utilityIcons.querySelectorAll('.utility-item').forEach(item => {
+          item.addEventListener('click', (e) => {
+            e.stopPropagation();
+            const action = item.dataset.action;
+            this.handleUtilityAction(action);
+          });
+        });
+
+      }
+
+      handleUtilityAction(action) {
+
+        switch(action) {
+          case 'settings':
+            window.location.href = 'pages/emma-settings-redesigned.html';
+            break;
+          default:
+
+        }
+      }
+
+      togglePanels() {
+        this.panelsVisible = !this.panelsVisible;
+
+        // Toggle body class for CSS animations
+        if (this.panelsVisible) {
+          document.body.classList.add('panels-visible');
+          this.burgerMenuBtn.classList.add('active');
+
+          // Also add active class to each panel for visibility
+          if (this.panels.dailyBrief) this.panels.dailyBrief.classList.add('active');
+          if (this.panels.aiInsights) this.panels.aiInsights.classList.add('active');
+          if (this.panels.quickActions) this.panels.quickActions.classList.add('active');
+        } else {
+          document.body.classList.remove('panels-visible');
+          this.burgerMenuBtn.classList.remove('active');
+
+          // Remove active class from panels
+          if (this.panels.dailyBrief) this.panels.dailyBrief.classList.remove('active');
+          if (this.panels.aiInsights) this.panels.aiInsights.classList.remove('active');
+          if (this.panels.quickActions) this.panels.quickActions.classList.remove('active');
+        }
+
+      }
+
+      startAnimations() {
+        // Subtle pulse animation for WebGL orb
+        setInterval(() => {
+          if (window.currentVaultStatus && !window.currentVaultStatus.isUnlocked) {
+            const orbContainer = this.orb.querySelector('.emma-orb-webgl');
+            if (orbContainer) {
+              orbContainer.style.animation = 'orb-pulse 2s ease-in-out';
+            }
+          }
+        }, 5000);
+      }      // Enter memory constellation mode
+      async enterMemoryConstellation() {
+        document.body.classList.remove('dashboard-minimal');
+        // CRITICAL: Clear any existing memory nodes first (prevents duplicates)
+        this.clearAllMemoryNodesFromDOM();
+
+        this.isConstellationMode = true;
+
+        // PERSISTENCE: Save constellation state for page refresh
+        localStorage.setItem('emmaConstellationActive', 'true');
+
+        // Add constellation-active class to hide all UI
+        document.body.classList.add('constellation-active');
+
+        // Shrink central orb
+        this.shrinkCentralOrb();
+
+        // 🔍 CREATE ZOOMABLE CONSTELLATION CONTAINER
+        this.createConstellationContainer();
+
+        // Load memory data for constellation
+        await this.loadMemoriesForConstellation();
+
+        // Fade out current nodes
+        await this.fadeOutMenuNodes();
+
+        // Create memory constellation (await for real memories)
+        await this.createMemoryConstellation();
+
+        // Show constellation UI with zoom controls
+        this.showConstellationUI();
+      }
+
+      // Shrink central Emma orb when memories are visible
+      shrinkCentralOrb() {
+
+        
+        // 🎭 FADE OUT orb first
+        this.orb.style.transition = 'opacity 0.4s ease, transform 0.8s cubic-bezier(0.4, 0, 0.2, 1)';
+        this.orb.style.opacity = '0';
+        
+        // After fade out, reposition to bottom center
+        setTimeout(() => {
+          // 📍 REPOSITION: Move to bottom center
+          this.orb.style.position = 'fixed';
+          this.orb.style.top = 'auto';
+          this.orb.style.bottom = '40px';
+          this.orb.style.left = '50%';
+          this.orb.style.transform = 'translateX(-50%) scale(0.6)';
+          this.orb.style.zIndex = '99999'; // CRITICAL: Above ALL overlays and constellation nodes
+          this.orb.style.pointerEvents = 'auto'; // CRITICAL: Ensure orb is clickable
+          
+          // 🎭 FADE IN at new position
+          setTimeout(() => {
+            this.orb.style.opacity = '0.9';
+
+          }, 100);
+          
+        }, 400); // Wait for fade out to complete
+
+        // Add hover effects for memory mode
+        this.addOrbHoverEffects();
+      }
+
+      // Add hover effects to orb in memory mode
+      addOrbHoverEffects() {
+        if (this.orbHoverAdded) return;
+        this.orbHoverAdded = true;
+
+        const orbContainer = this.orb.querySelector('.emma-orb-webgl');
+
+        this.orb.addEventListener('mouseenter', () => {
+          if (this.isConstellationMode) {
+            // 🎯 HOVER: Scale up while maintaining bottom center position
+            this.orb.style.transform = 'translateX(-50%) scale(0.8)';
+            this.orb.style.opacity = '1';
+          }
+        });
+
+        this.orb.addEventListener('mouseleave', () => {
+          if (this.isConstellationMode) {
+            // 🎯 HOVER OUT: Return to normal size at bottom center
+            this.orb.style.transform = 'translateX(-50%) scale(0.6)';
+            this.orb.style.opacity = '0.9';
+          }
+        });
+      }
+
+      // Restore central Emma orb to original center position
+      restoreCentralOrb() {
+
+        
+        // 🎭 FADE OUT from bottom position
+        this.orb.style.transition = 'opacity 0.3s ease';
+        this.orb.style.opacity = '0';
+        
+        setTimeout(() => {
+          // 📍 RESTORE: Move back to center
+          this.orb.style.position = 'fixed';
+          this.orb.style.top = '50%';
+          this.orb.style.bottom = 'auto';
+          this.orb.style.left = '50%';
+          this.orb.style.transform = 'translate(-50%, -50%) scale(1)';
+          this.orb.style.zIndex = '10';
+          
+          // Reset transitions for normal behavior
+          this.orb.style.transition = 'transform 0.8s cubic-bezier(0.4, 0, 0.2, 1)';
+          
+          // 🎭 FADE IN at center
+          setTimeout(() => {
+            this.orb.style.opacity = '1';
+
+          }, 100);
+          
+        }, 300); // Wait for fade out
+      }
+
+      // Load memories for constellation
+      async loadMemoriesForConstellation() {
+        try {
+          // Get memories from API
+          let memories = await this.getMemories();
+
+          if (memories.length > 0) {
+
+            console.log('💝 CONSTELLATION DEBUG: Memory titles:', memories.map(m => m.title));
+          }
+
+          // Add debugging info about available APIs
+
+          this.constellationMemories = this.organizeMemoriesByTheme(memories);
+
+          // Count total memories
+          const totalMemories = Object.values(this.constellationMemories).reduce((sum, theme) => sum + theme.length, 0);
+
+          // If no memories, suggest user create some
+          if (totalMemories === 0) {
+
+          }
+
+        } catch (error) {
+
+          this.constellationMemories = {family: [], travel: [], recent: [], special: []};
+        }
+      }
+
+      // Get memories from vault (same API as gallery)
+      async getMemories() {
+        try {
+          let allMemories = [];
+
+          // 1. FIRST: Get vault memories (if available)
+          if (window.emmaWebVault && window.emmaWebVault.isOpen && window.emmaWebVault.vaultData) {
+
+            const vaultMemories = window.emmaWebVault.vaultData.content?.memories || {};
+            const vaultMedia = window.emmaWebVault.vaultData.content?.media || {};
+
+            // Convert vault memories to array format with LIGHTWEIGHT LOADING for constellation
+            const memories = Object.values(vaultMemories).map(memory => {
+              // 🚀 PERFORMANCE FIX: Only create lightweight attachment previews for constellation
+              // Full media will be loaded on-demand when memory is clicked
+              const attachmentPreviews = (memory.attachments || []).map(attachment => {
+                const mediaItem = vaultMedia[attachment.id];
+                return {
+                  id: attachment.id,
+                  type: attachment.type,
+                  name: attachment.name,
+                  size: attachment.size,
+                  // 💡 LAZY LOADING: Store media ID for on-demand loading, don't load data URL yet
+                  mediaId: attachment.id,
+                  hasMedia: !!(mediaItem && mediaItem.data),
+                  isLazyLoaded: true, // Flag to indicate this needs full loading on click
+                  // Only create preview thumbnail for first image attachment
+                  previewUrl: null // Will be set below for first image only
+                };
+              });
+
+              // 🎯 OPTIMIZATION: Only load preview for FIRST image attachment (for constellation thumbnail)
+              if (attachmentPreviews.length > 0) {
+                const firstImageAttachment = attachmentPreviews.find(att => 
+                  att.hasMedia && (att.type?.startsWith('image/') || !att.type?.startsWith('video/'))
+                );
+                
+                if (firstImageAttachment) {
+                  const mediaItem = vaultMedia[firstImageAttachment.id];
+                  if (mediaItem && mediaItem.data) {
+                    // Only load the first image for constellation thumbnail
+                    firstImageAttachment.previewUrl = mediaItem.data.startsWith('data:')
+                      ? mediaItem.data
+                      : `data:${mediaItem.type};base64,${mediaItem.data}`;
+                  }
+                }
+              }
+
+              return {
+                ...memory,
+                // FIXED: Transform like gallery pages do - extract title from content/metadata
+                title: memory.metadata?.title || memory.title || memory.subject || memory.summary || memory.content?.substring(0, 50) + '...' || `Memory`,
+                attachments: attachmentPreviews, // Lightweight previews only
+                attachmentCount: attachmentPreviews.length,
+                hasMedia: attachmentPreviews.some(att => att.hasMedia),
+                isVaultMemory: true
+              };
+            });
+
+            // Add thumbnail from first attachment for constellation display
+            const memoriesWithThumbnails = memories.map(memory => {
+              const attachments = memory.attachments || [];
+              let thumbnail = memory.thumbnail;
+
+              // 🎯 PERFORMANCE: Use previewUrl from first image attachment for thumbnail
+              if (!thumbnail && attachments.length > 0) {
+                const firstImageWithPreview = attachments.find(att => att.previewUrl);
+                if (firstImageWithPreview) {
+                  thumbnail = firstImageWithPreview.previewUrl;
+                }
+              }
+
+              return {
+                ...memory,
+                thumbnail
+              };
+            });
+
+            allMemories = [...memoriesWithThumbnails];
+            console.log('💝 CONSTELLATION: Loaded', allMemories.length, 'vault memories');
+            console.log('💝 CONSTELLATION DEBUG: First memory structure:', allMemories[0]);
+            console.log('💝 CONSTELLATION DEBUG: First memory keys:', Object.keys(allMemories[0] || {}));
+          }
+
+          // Note: All memories should be stored directly in vault - no fallback needed
+
+          return allMemories;
+
+        } catch (error) {
+          console.error('💝 CONSTELLATION: Error loading memories from vault:', error);
+          return [];
+        }
+      }
+
+      // Helper to detect category from memory content
+      detectCategoryFromContent(memory) {
+        const content = ((memory.title || '') + ' ' + (memory.content || '')).toLowerCase();
+        if (content.includes('family') || content.includes('mom') || content.includes('dad')) return 'family';
+        if (content.includes('travel') || content.includes('trip') || content.includes('vacation')) return 'travel';
+        if (memory.timestamp && new Date() - new Date(memory.timestamp) < 30 * 24 * 60 * 60 * 1000) return 'recent';
+        return 'special';
+      }
+
+      // Generate organic neural network positions (NOT circular)
+      generateNeuralNetworkPositions(nodeCount, centerX, centerY, width, height, minDistance) {
+        const positions = [];
+        const maxAttempts = 100;
+
+        // First position: Create Memory node in top-center area
+        positions.push({
+          x: centerX + (Math.random() - 0.5) * 100,
+          y: centerY - height * 0.25 + (Math.random() - 0.5) * 80
+        });
+
+        // Generate remaining positions with organic scatter
+        for (let i = 1; i < nodeCount; i++) {
+          let placed = false;
+          let attempts = 0;
+
+          while (!placed && attempts < maxAttempts) {
+            // Use clustered random distribution (not uniform)
+            const clusterX = centerX + (Math.random() - 0.5) * width;
+            const clusterY = centerY + (Math.random() - 0.5) * height;
+
+            // Add some organic bias toward clusters
+            const biasStrength = Math.random() * 0.3;
+            const biasAngle = Math.random() * Math.PI * 2;
+            const x = clusterX + Math.cos(biasAngle) * biasStrength * 150;
+            const y = clusterY + Math.sin(biasAngle) * biasStrength * 150;
+
+            // Check minimum distance from all existing nodes AND center orb
+            let validPosition = true;
+
+            // Check distance from center Emma orb (exclusion zone)
+            const distFromCenter = Math.sqrt((x - centerX) ** 2 + (y - centerY) ** 2);
+            if (distFromCenter < 150) { // 150px exclusion zone around Emma orb
+              validPosition = false;
+            }
+
+            // Check distance from other nodes
+            if (validPosition) {
+              for (const pos of positions) {
+                const dist = Math.sqrt((x - pos.x) ** 2 + (y - pos.y) ** 2);
+                if (dist < minDistance) {
+                  validPosition = false;
+                  break;
+                }
+              }
+            }
+
+            // Keep nodes within bounds
+            if (validPosition &&
+                x > centerX - width/2 + 50 && x < centerX + width/2 - 50 &&
+                y > centerY - height/2 + 50 && y < centerY + height/2 - 50) {
+              positions.push({ x, y });
+              placed = true;
+            }
+
+            attempts++;
+          }
+
+          // Fallback if can't place after max attempts
+          if (!placed) {
+            const angle = (i / nodeCount) * Math.PI * 2;
+            const fallbackRadius = 200 + Math.random() * 100;
+            positions.push({
+              x: centerX + Math.cos(angle) * fallbackRadius,
+              y: centerY + Math.sin(angle) * fallbackRadius
+            });
+          }
+        }
+
+        return positions;
+      }      // Generate memory thumbnail based on theme
+      generateMemoryThumbnail(theme) {
+        const themeEmojis = {
+          family: ['👨‍👩‍👧‍👦', '🏠', '❤️', '🍽️', '🎂'],
+          travel: ['✈️', '🗺️', '📸', '🏖️', '🏔️'],
+          recent: ['📱', '☕', '🌅', '🎵', '📚'],
+          special: ['🎉', '💝', '🌟', '🎈', '🎊']
+        };
+        const emojis = themeEmojis[theme] || ['💫'];
+        return emojis[Math.floor(Math.random() * emojis.length)];
+      }
+
+      // Organize memories by theme for constellations
+      organizeMemoriesByTheme(memories) {
+        const organized = {
+          family: [],
+          travel: [],
+          recent: [],
+          special: []
+        };
+
+        memories.forEach(memory => {
+          const theme = memory.theme || this.detectMemoryTheme(memory);
+          if (organized[theme]) {
+            organized[theme].push(memory);
+          } else {
+            organized.special.push(memory);
+          }
+        });
+
+        return organized;
+      }
+
+      // Detect memory theme from content
+      detectMemoryTheme(memory) {
+        // Use category first, then fallback to content analysis
+        if (memory.category) {
+          return memory.category;
+        }
+
+        const content = (memory.title + ' ' + (memory.content || memory.description || '')).toLowerCase();
+        if (content.includes('family') || content.includes('mom') || content.includes('dad')) return 'family';
+        if (content.includes('travel') || content.includes('trip') || content.includes('vacation')) return 'travel';
+        if (memory.date && new Date() - new Date(memory.date) < 30 * 24 * 60 * 60 * 1000) return 'recent';
+        return 'special';
+      }
+
+      // Fade out menu nodes
+      async fadeOutMenuNodes() {
+        return new Promise(resolve => {
+          this.radialMenu.querySelectorAll('.radial-item').forEach((item, i) => {
+            setTimeout(() => {
+              item.style.transition = 'all 0.5s ease';
+              item.style.opacity = '0';
+              item.style.transform = 'scale(0)';
+            }, i * 50);
+          });
+
+          setTimeout(resolve, 500);
+        });
+      }
+
+      // Create memory constellation using EXACT working neural network system
+      async createMemoryConstellation() {
+
+        // CRITICAL: Remove any existing memory nodes from DOM first
+        this.clearAllMemoryNodesFromDOM();
+
+        // Clear existing nodes array
+        this.nodes = [];
+
+        // Don't reload memories - use already loaded ones from enterMemoryConstellation()
+
+        // Get memories for constellation
+        const allMemories = [];
+        Object.keys(this.constellationMemories).forEach(theme => {
+          this.constellationMemories[theme].forEach(memory => {
+            allMemories.push({ ...memory, theme });
+          });
+        });
+
+        // Load people from vault for constellation
+        const allPeople = await this.loadPeopleForConstellation();
+        this.constellationPeople = allPeople; // Store for filtering
+
+        if (allMemories.length === 0 && allPeople.length === 0) {
+          console.warn('💝 No memories or people found in vault - constellation will show only the Create Memory node');
+        }
+
+        // Create memory and people nodes using EXACT same pattern as main menu
+        this.initMemoryNeuralNetwork(allMemories, allPeople);
+
+        // Restore any saved layout preferences before animations begin
+        this.applySavedConstellationLayout();
+        this.persistConstellationLayout();
+
+        // Set up for constellation mode without triggering menu
+        this.isMenuOpen = false; // CRITICAL: Constellation mode starts with menu closed
+        this.radialMenu.classList.remove('active'); // Ensure menu is hidden
+        document.body.classList.remove('menu-active');
+
+        // Start the neural animation (EXACT same as main menu)
+        this.animateNeuralNetwork();
+
+      }
+
+      // Load people from vault for constellation
+      async loadPeopleForConstellation() {
+        try {
+
+          if (window.emmaAPI && window.emmaAPI.people && window.emmaAPI.people.list) {
+            const result = await window.emmaAPI.people.list();
+
+            if (result && result.success && Array.isArray(result.items)) {
+
+              return result.items;
+            }
+          }
+
+          return [];
+
+        } catch (error) {
+          console.error('👥 CONSTELLATION: Error loading people:', error);
+          return [];
+        }
+      }
+
+      // Initialize memory neural network using EXACT same pattern as working main menu
+      initMemoryNeuralNetwork(memories, people = []) {
+
+        const compactMode = this.shouldReduceConstellationPhysics();
+        const nodeSize = this.getConstellationNodeSize();
+        const centerX = window.innerWidth / 2;
+        const centerY = window.innerHeight / 2;
+        // Neural network layout parameters
+        const networkWidth = Math.max(nodeSize * 4, Math.min(window.innerWidth * (compactMode ? 0.9 : 0.7), compactMode ? 640 : 800));
+        const networkHeight = Math.max(nodeSize * 4, Math.min(window.innerHeight * (compactMode ? 0.9 : 0.7), compactMode ? 540 : 600));
+        const minDistance = Math.max(nodeSize + 40, compactMode ? 100 : 120); // Minimum distance between nodes
+
+        // Take fewer nodes on compact/low power view for performance
+        const selectedMemories = memories.slice(0, compactMode ? 8 : 12);
+        const selectedPeople = people.slice(0, compactMode ? 6 : 8);
+        const totalNodes = selectedMemories.length + selectedPeople.length + 1; // +1 for create node
+
+        // Generate organic neural network positions
+        const positions = this.generateNeuralNetworkPositions(totalNodes, centerX, centerY, networkWidth, networkHeight, minDistance);
+
+        // Always add "Create New Memory" node at the first position (top-center area)
+        const createPos = positions[0];
+        const createMemoryElement = this.createCreateMemoryNodeElement(createPos.x, createPos.y);
+        this.createMemoryElement = createMemoryElement;
+        const createNode = {
+          element: createMemoryElement,
+          x: createPos.x,
+          y: createPos.y,
+          vx: 0,
+          vy: 0,
+          baseX: createPos.x,
+          baseY: createPos.y,
+          connections: [],
+          isCreateNode: true,
+          uid: createMemoryElement.dataset.nodeUid
+        };
+        this.nodes.push(createNode);
+        this.enableNodeDragging(createNode);
+
+        // Create memory nodes in organic neural pattern
+        selectedMemories.forEach((memory, i) => {
+          const pos = positions[i + 1]; // Skip position 0 (create node)
+
+          // Create memory node element
+          const memoryElement = this.createMemoryNodeElement(memory, pos.x, pos.y);
+
+          const memoryNode = {
+            element: memoryElement,
+            x: pos.x,
+            y: pos.y,
+            vx: 0,
+            vy: 0,
+            baseX: pos.x,
+      baseY: pos.y,
+      connections: [],
+      memory: memory,
+      type: 'memory',
+      uid: memoryElement.dataset.nodeUid
+    };
+          this.nodes.push(memoryNode);
+          this.enableNodeDragging(memoryNode);
+        });
+
+        // Create people nodes in remaining positions
+        selectedPeople.forEach((person, i) => {
+          const posIndex = selectedMemories.length + i + 1; // Skip create node and memory nodes
+          const pos = positions[posIndex];
+
+          if (pos) { // Make sure we have a position
+            // Create person node element
+            const personElement = this.createPersonNodeElement(person, pos.x, pos.y);
+
+            const personNode = {
+              element: personElement,
+              x: pos.x,
+              y: pos.y,
+              vx: 0,
+              vy: 0,
+              baseX: pos.x,
+      baseY: pos.y,
+      connections: [],
+      person: person,
+      type: 'person',
+      uid: personElement.dataset.nodeUid
+    };
+            this.nodes.push(personNode);
+            this.enableNodeDragging(personNode);
+          }
+        });
+
+        // Create intelligent connections between memories and people
+        this.createMemoryPeopleConnections(selectedMemories, selectedPeople);
+
+        // Create organic neural network connections (NOT spoked wheel)
+        const organicNodes = this.nodes.filter(node => !node.isCreateNode);
+        organicNodes.forEach(node => {
+          organicNodes.forEach(otherNode => {
+            if (node === otherNode) {
+              return;
+            }
+
+            const dist = Math.sqrt(
+              Math.pow(node.x - otherNode.x, 2) +
+              Math.pow(node.y - otherNode.y, 2)
+            );
+
+            if (dist < 250 && node.connections.filter(conn => !conn.isCreateNode).length < 4) {
+              this.linkNodes(node, otherNode);
+            }
+          });
+
+          const effectiveConnections = node.connections.filter(conn => !conn.isCreateNode);
+          if (effectiveConnections.length < 2) {
+            const nearest = organicNodes
+              .filter(otherNode => otherNode !== node)
+              .map(otherNode => ({
+                node: otherNode,
+                dist: Math.sqrt(
+                  Math.pow(node.x - otherNode.x, 2) +
+                  Math.pow(node.y - otherNode.y, 2)
+                )
+              }))
+              .sort((a, b) => a.dist - b.dist)
+              .slice(0, 2);
+
+            nearest.forEach(({ node: closestNode }) => {
+              this.linkNodes(node, closestNode);
+            });
+          }
+        });
+
+        // Add central orb as a special node (but only some memory nodes connect to it)
+        this.centralNode = {
+          x: centerX,
+          y: centerY,
+          element: this.orb,
+          connections: (this.centralNode && this.centralNode.connections) || [],
+          uid: 'central-orb'
+        };
+        if (this.orb) {
+          this.orb.dataset.nodeUid = 'central-orb';
+        }
+
+        const eligibleCentralNodes = organicNodes.filter(node => node.type === 'memory');
+        const centralConnections = Math.min(4, Math.floor(eligibleCentralNodes.length / 2) || 1);
+        const shuffledNodes = [...eligibleCentralNodes].sort(() => Math.random() - 0.5);
+        shuffledNodes.slice(0, centralConnections).forEach(node => {
+          this.linkNodes(node, this.centralNode);
+        });
+
+        this.purgeCreateNodeConnections();
+        this.dedupeNodeConnections();
+
+      }
+
+      // Create memory node element that opens memory capsule dialog
+      createMemoryNodeElement(memory, x, y) {
+        const memoryElement = document.createElement('div');
+        memoryElement.className = 'memory-node';
+
+        // Add theme data attribute for styling
+        memoryElement.setAttribute('data-theme', memory.theme);
+
+        const nodeSize = this.getConstellationNodeSize();
+        const borderWidth = Math.max(2, Math.round(nodeSize * 0.04));
+        const baseShadow = `0 ${Math.round(nodeSize * 0.08)}px ${Math.round(nodeSize * 0.28)}px rgba(111, 99, 217, 0.3)`;
+        const hoverShadow = `0 0 ${Math.round(nodeSize * 0.4)}px rgba(111, 99, 217, 0.4), 0 0 ${Math.round(nodeSize * 0.7)}px rgba(111, 99, 217, 0.24)`;
+
+        // CLEAN CIRCULAR NODE - No text labels, pure image capsule
+        memoryElement.style.cssText = `
+          position: fixed;
+          left: ${x}px;
+          top: ${y}px;
+          width: ${nodeSize}px;
+          height: ${nodeSize}px;
+          border-radius: 50%;
+          border: ${borderWidth}px solid rgba(111, 99, 217, 0.6);
+          cursor: pointer;
+          transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+          opacity: 0;
+          transform: scale(0);
+          box-shadow: ${baseShadow};
+          z-index: 1500; /* CRITICAL FIX: Higher z-index to appear above all connections */
+          overflow: hidden;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          pointer-events: auto; /* CRITICAL: Ensure nodes are clickable even with container pointer-events: none */
+        `;
+
+        // APPLY BACKGROUND AFTER BASE STYLING: Memory capsule as single node with image background
+        if (memory.thumbnail) {
+          // Use image as background of the entire node - NO separate elements
+          memoryElement.style.backgroundImage = `url('${memory.thumbnail}')`;
+          memoryElement.style.backgroundSize = 'cover';
+          memoryElement.style.backgroundPosition = 'center';
+
+        } else {
+          // Fallback to gradient with emoji
+          memoryElement.style.background = 'linear-gradient(135deg, #6f63d9 0%, #d06fa8 100%)';
+          const emojiDiv = document.createElement('div');
+          emojiDiv.style.cssText = `font-size: ${Math.round(nodeSize * 0.3)}px; color: white;`;
+          emojiDiv.textContent = '💝';
+          memoryElement.appendChild(emojiDiv);
+
+        }
+
+        memoryElement.dataset.preventClick = 'false';
+
+        // Add click handler to open memory capsule dialog
+        memoryElement.addEventListener('click', (e) => {
+          if (memoryElement.dataset.preventClick === 'true') {
+            e.preventDefault();
+            e.stopPropagation();
+            return;
+          }
+          e.stopPropagation();
+          this.openMemoryCapsuleDialog(memory);
+        });
+
+        // Add hover effects
+        memoryElement.addEventListener('mouseenter', () => {
+          memoryElement.style.transform = 'scale(1.1)';
+          memoryElement.style.boxShadow = hoverShadow;
+        });
+
+        memoryElement.addEventListener('mouseleave', () => {
+          memoryElement.style.transform = 'scale(1)';
+          memoryElement.style.boxShadow = baseShadow;
+        });
+
+        // 🔍 ZOOM FIX: Add to constellation container instead of body
+        const targetContainer = this.constellationContainer || document.body;
+        targetContainer.appendChild(memoryElement);
+
+        // Animate in with random delay for organic feel
+        const delay = Math.random() * 500 + 100;
+        setTimeout(() => {
+          memoryElement.style.transform = 'scale(1)';
+          memoryElement.style.opacity = '1';
+        }, delay);
+
+        this.assignNodeUid(memoryElement, `memory-${memory.id || 'node'}`);
+        return memoryElement;
+      }
+
+      // Create the "Create New Memory" node element with elegant SVG +
+      createCreateMemoryNodeElement(x, y) {
+        const createElement = document.createElement('div');
+        createElement.className = 'create-memory-node';
+        const nodeSize = this.getConstellationNodeSize();
+        const createSize = Math.max(44, Math.round(nodeSize * 0.75));
+        const createBorder = Math.max(2, Math.round(createSize * 0.05));
+        const baseCreateShadow = `
+            0 0 ${Math.round(createSize * 0.28)}px rgba(16, 185, 129, 0.35),
+            0 0 ${Math.round(createSize * 0.5)}px rgba(16, 185, 129, 0.18),
+            inset 0 0 ${Math.round(createSize * 0.28)}px rgba(16, 185, 129, 0.12)
+          `;
+        const hoverCreateShadow = `
+            0 0 ${Math.round(createSize * 0.4)}px rgba(16, 185, 129, 0.45),
+            0 0 ${Math.round(createSize * 0.7)}px rgba(16, 185, 129, 0.28),
+            inset 0 0 ${Math.round(createSize * 0.38)}px rgba(16, 185, 129, 0.18)
+          `;
+        
+        // Create elegant SVG + icon
+        const svgPlus = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        svgPlus.setAttribute('width', '24');
+        svgPlus.setAttribute('height', '24');
+        svgPlus.setAttribute('viewBox', '0 0 24 24');
+        svgPlus.style.cssText = `
+          filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.8));
+          transition: filter 0.3s ease;
+        `;
+        
+        // Create + lines with elegant styling
+        const horizontalLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+        horizontalLine.setAttribute('x1', '6');
+        horizontalLine.setAttribute('y1', '12');
+        horizontalLine.setAttribute('x2', '18');
+        horizontalLine.setAttribute('y2', '12');
+        horizontalLine.setAttribute('stroke', 'rgba(16, 185, 129, 1)');
+        horizontalLine.setAttribute('stroke-width', '2');
+        horizontalLine.setAttribute('stroke-linecap', 'round');
+        
+        const verticalLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+        verticalLine.setAttribute('x1', '12');
+        verticalLine.setAttribute('y1', '6');
+        verticalLine.setAttribute('x2', '12');
+        verticalLine.setAttribute('y2', '18');
+        verticalLine.setAttribute('stroke', 'rgba(16, 185, 129, 1)');
+        verticalLine.setAttribute('stroke-width', '2');
+        verticalLine.setAttribute('stroke-linecap', 'round');
+        
+        svgPlus.appendChild(horizontalLine);
+        svgPlus.appendChild(verticalLine);
+        createElement.appendChild(svgPlus);
+
+        // Smaller, more elegant styling with compelling glow
+        createElement.style.cssText = `
+          position: fixed;
+          left: ${x - createSize / 2}px;
+          top: ${y - createSize / 2}px;
+          width: ${createSize}px;
+          height: ${createSize}px;
+          background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(34, 197, 94, 0.15));
+          backdrop-filter: blur(20px);
+          border: ${createBorder}px solid rgba(16, 185, 129, 0.5);
+          border-radius: 50%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          cursor: pointer;
+          transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+          opacity: 0;
+          transform: scale(0);
+          box-shadow: ${baseCreateShadow};
+          animation: addNodeGlow 3s ease-in-out infinite;
+          z-index: 1500; /* CRITICAL FIX: Higher z-index to appear above all connections */
+          pointer-events: auto; /* CRITICAL: Ensure create node is clickable even with container pointer-events: none */
+        `;
+
+        // Add hover effect with enhanced SVG glow
+        createElement.addEventListener('mouseenter', () => {
+          createElement.style.transform = 'scale(1.15)';
+          createElement.style.boxShadow = hoverCreateShadow;
+          svgPlus.style.filter = 'drop-shadow(0 0 12px rgba(16, 185, 129, 1))';
+        });
+
+        createElement.addEventListener('mouseleave', () => {
+          createElement.style.transform = 'scale(1)';
+          createElement.style.boxShadow = baseCreateShadow;
+          svgPlus.style.filter = 'drop-shadow(0 0 8px rgba(16, 185, 129, 0.8))';
+        });
+
+        createElement.dataset.preventClick = 'false';
+
+        // Add click handler to open Emma chat for memory creation
+        createElement.addEventListener('click', (e) => {
+          if (createElement.dataset.preventClick === 'true') {
+            e.preventDefault();
+            e.stopPropagation();
+            return;
+          }
+          e.stopPropagation();
+
+          // Open Emma chat experience for intelligent memory creation
+          this.startEmmaChatExperience();
+        });
+
+        // 🔍 ZOOM FIX: Add to constellation container instead of body
+        const targetContainer = this.constellationContainer || document.body;
+        targetContainer.appendChild(createElement);
+
+        // Animate in
+        setTimeout(() => {
+          createElement.style.transform = 'scale(1)';
+          createElement.style.opacity = '1';
+        }, 100);
+
+        this.assignNodeUid(createElement, 'create-node');
+        return createElement;
+      }
+
+      // Open Emma memory creation wizard (proper capture wizard)
+      openEmmaMemoryWizard() {
+
+        // CRITICAL FIX: Debug and ensure AssistantExperience is available
+
+        console.log('🧠 DEBUG: Available window objects:', Object.keys(window).filter(k => k.includes('Assistant') || k.includes('Experience')));
+
+        try {
+          // Wait a moment for scripts to load, then check again
+          setTimeout(() => {
+
+            if (window.AssistantExperience) {
+
+              // Create and show the full assistant experience popup
+              const assistantInstance = new window.AssistantExperience(
+                { x: window.innerWidth / 2, y: window.innerHeight / 2 },
+                { showCloseButton: true }
+              );
+              // Show the full popup - this will open with the voice wizard tab active
+              assistantInstance.show();
+              // Store reference for global access
+              window.assistantInstance = assistantInstance;
+            } else {
+              console.error('🧠 AssistantExperience STILL not available after delay!');
+              console.log('🧠 Available classes:', Object.keys(window).filter(k => k.endsWith('Experience')));
+              this.showToast('❌ Emma Assistant not loaded', 'error');
+            }
+          }, 100);
+
+        } catch (error) {
+          console.error('Failed to open Emma memory wizard:', error);
+          this.showToast('❌ Failed to open memory wizard', 'error');
+        }
+      }
+
+      // Fallback voice memory wizard
+      openVoiceMemoryWizard() {
+        console.log('🧠 Opening voice memory wizard (fallback)');
+
+        // Create a voice memory wizard modal similar to AssistantExperience
+        const modalHTML = `
+          <div class="voice-wizard-modal" style="
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.6);
+            backdrop-filter: blur(25px) saturate(180%);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            z-index: 10000;
+          ">
+            <div class="voice-wizard-content" style="
+              /* 🎨 EMMA GLASSMORPHISM: Match chat interface aesthetic */
+              background: rgba(26, 16, 51, 0.92);
+              backdrop-filter: blur(25px) saturate(150%);
+              border-radius: 20px;
+              padding: 40px;
+              width: 90%;
+              max-width: 600px;
+              border: 1px solid rgba(255, 255, 255, 0.12);
+              box-shadow: 
+                0 25px 80px rgba(0, 0, 0, 0.4),
+                0 0 0 1px rgba(255, 255, 255, 0.08),
+                inset 0 1px 0 rgba(255, 255, 255, 0.12);
+              color: white;
+              text-align: center;
+            ">
+              <div class="emma-section">
+                <div style="color: rgba(255, 255, 255, 0.8); font-size: 14px; margin-bottom: 8px;">EMMA ASKS</div>
+                <h1 style="margin: 0 0 24px 0; font-size: 28px; font-weight: 700;">
+                  What's your favorite memory with Mom? Take your time, I'm listening.
+                </h1>
+                <div class="suggestions" style="margin-bottom: 32px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;">
+                  <button class="suggestion-chip" style="
+                    padding: 8px 16px;
+                    background: rgba(255, 255, 255, 0.2);
+                    border: 1px solid rgba(255, 255, 255, 0.3);
+                    border-radius: 20px;
+                    color: white;
+                    font-size: 14px;
+                    cursor: pointer;
+                  ">Holiday traditions</button>
+                  <button class="suggestion-chip" style="
+                    padding: 8px 16px;
+                    background: rgba(255, 255, 255, 0.2);
+                    border: 1px solid rgba(255, 255, 255, 0.3);
+                    border-radius: 20px;
+                    color: white;
+                    font-size: 14px;
+                    cursor: pointer;
+                  ">Her wisdom</button>
+                  <button class="suggestion-chip" style="
+                    padding: 8px 16px;
+                    background: rgba(255, 255, 255, 0.2);
+                    border: 1px solid rgba(255, 255, 255, 0.3);
+                    border-radius: 20px;
+                    color: white;
+                    font-size: 14px;
+                    cursor: pointer;
+                  ">Family meals</button>
+                </div>
+              </div>
+
+              <div class="voice-capture" style="margin-bottom: 32px;">
+                <div class="voice-button-container" style="margin-bottom: 16px;">
+                  <button class="voice-button" style="
+                    width: 80px;
+                    height: 80px;
+                    border-radius: 50%;
+                    background: rgba(255, 255, 255, 0.2);
+                    border: 2px solid rgba(255, 255, 255, 0.3);
+                    color: white;
+                    cursor: pointer;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    margin: 0 auto;
+                  ">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                      <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/>
+                      <path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
+                      <line x1="12" x2="12" y1="19" y2="22"/>
+                      <line x1="8" x2="16" y1="22" y2="22"/>
+                    </svg>
+                  </button>
+                </div>
+                <div style="color: rgba(255, 255, 255, 0.8); font-size: 14px;">Tap to start recording</div>
+              </div>
+
+              <div class="transcription" style="margin-bottom: 32px;">
+                <div style="color: rgba(255, 255, 255, 0.8); font-size: 14px; margin-bottom: 8px;">YOUR STORY</div>
+                <div style="
+                  background: rgba(255, 255, 255, 0.1);
+                  border-radius: 12px;
+                  padding: 20px;
+                  min-height: 80px;
+                  font-style: italic;
+                  color: rgba(255, 255, 255, 0.6);
+                ">Your words will appear here as you speak...</div>
+              </div>
+
+              <div style="margin-bottom: 24px;">
+                <div style="color: rgba(255, 255, 255, 0.8); font-size: 14px; margin-bottom: 8px;">1 of 5 questions</div>
+                <div style="
+                  width: 100%;
+                  height: 4px;
+                  background: rgba(255, 255, 255, 0.2);
+                  border-radius: 2px;
+                  overflow: hidden;
+                ">
+                  <div style="
+                    width: 20%;
+                    height: 100%;
+                    background: linear-gradient(90deg, #ffffff, rgba(255, 255, 255, 0.8));
+                    border-radius: 2px;
+                  "></div>
+                </div>
+              </div>
+
+              <div style="display: flex; gap: 12px; justify-content: center;">
+                <button class="skip-btn" style="
+                  padding: 14px 28px;
+                  border: 2px solid rgba(255, 255, 255, 0.3);
+                  background: rgba(255, 255, 255, 0.1);
+                  color: white;
+                  border-radius: 10px;
+                  cursor: pointer;
+                  font-size: 14px;
+                  font-weight: 500;
+                ">Skip</button>
+                <button class="continue-btn" style="
+                  padding: 14px 28px;
+                  border: none;
+                  background: rgba(255, 255, 255, 0.9);
+                  color: #6b46c1;
+                  border-radius: 10px;
+                  cursor: pointer;
+                  font-size: 14px;
+                  font-weight: 600;
+                ">Continue →</button>
+              </div>
+            </div>
+          </div>
+        `;
+
+        // Create and show modal - SECURITY FIX: Use safe DOM creation
+        const modal = document.createElement('div');
+        modal.className = 'modal-overlay';
+        modal.id = 'vault-migration-modal';
+        modal.style.cssText = 'display: flex; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(25px) saturate(180%); z-index: 10000; align-items: center; justify-content: center;';
+
+        const modalContent = document.createElement('div');
+        modalContent.className = 'modal-content';
+        modalContent.style.cssText = 'background: rgba(26, 16, 51, 0.92); backdrop-filter: blur(25px) saturate(150%); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.12); padding: 40px; border-radius: 20px; max-width: 500px; text-align: center;';
+
+        const title = document.createElement('h2');
+        title.textContent = '🔄 Vault Migration Available';
+        title.style.cssText = 'color: white; margin-bottom: 20px; font-size: 24px;';
+
+        const description = document.createElement('p');
+        description.textContent = 'A new vault storage system is available with enhanced security and performance. Would you like to migrate your existing vault?';
+        description.style.cssText = 'color: rgba(255, 255, 255, 0.8); margin-bottom: 30px; line-height: 1.6;';
+
+        const buttonContainer = document.createElement('div');
+        buttonContainer.style.cssText = 'display: flex; gap: 15px; justify-content: center;';
+
+        const skipBtn = document.createElement('button');
+        skipBtn.className = 'skip-btn';
+        skipBtn.textContent = 'Skip for Now';
+        skipBtn.style.cssText = 'padding: 12px 24px; background: rgba(255, 255, 255, 0.1); color: white; border: none; border-radius: 8px; cursor: pointer;';
+
+        const continueBtn = document.createElement('button');
+        continueBtn.className = 'continue-btn';
+        continueBtn.textContent = 'Migrate Vault';
+        continueBtn.style.cssText = 'padding: 12px 24px; background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #deb3e4 100%); color: white; border: none; border-radius: 8px; cursor: pointer;';
+
+        buttonContainer.appendChild(skipBtn);
+        buttonContainer.appendChild(continueBtn);
+        modalContent.appendChild(title);
+        modalContent.appendChild(description);
+        modalContent.appendChild(buttonContainer);
+        modal.appendChild(modalContent);
+        document.body.appendChild(modal);
+
+        // Add event listeners
+        const skipBtnQuery = modal.querySelector('.skip-btn');
+        const continueBtnQuery = modal.querySelector('.continue-btn');
+
+        skipBtnQuery.addEventListener('click', () => modal.remove());
+        continueBtnQuery.addEventListener('click', () => {
+          // For now, just show a message and close
+          this.showToast('🎤 Voice wizard coming soon!', 'info');
+          modal.remove();
+        });
+
+        // Close on outside click
+        modal.addEventListener('click', (e) => {
+          if (e.target === modal) {
+            modal.remove();
+          }
+        });
+      }
+
+      // Open memory capsule dialog (reuses existing memory dialog system)
+      openMemoryCapsuleDialog(memory) {
+
+        this.openMemoryDialog(memory);
+      }
+
+      // Create neural branches from central Emma neuron
+      createNeuralBranches(memories) {
+
+        const centerX = window.innerWidth / 2;
+        const centerY = window.innerHeight / 2;
+
+        // First layer - primary neurons directly connected to Emma
+        const primaryCount = Math.min(8, memories.length); // Max 8 primary branches
+        const primaryAngleStep = (Math.PI * 2) / primaryCount;
+        const primaryRadius = 200;
+
+        // Create primary neurons
+        const primaryNeurons = [];
+        for (let i = 0; i < primaryCount; i++) {
+          const angle = i * primaryAngleStep - Math.PI / 2;
+          const x = centerX + Math.cos(angle) * primaryRadius;
+          const y = centerY + Math.sin(angle) * primaryRadius;
+
+          if (memories[i]) {
+            const neuron = this.createMemoryNode(memories[i], x, y, memories[i].theme);
+            neuron.isPrimary = true;
+            neuron.connections.push(this.centralNeuron);
+            this.centralNeuron.connections.push(neuron);
+            primaryNeurons.push(neuron);
+            this.nodes.push(neuron);
+          }
+        }
+
+        // Create secondary and tertiary neurons branching from primaries
+        let memoryIndex = primaryCount;
+        primaryNeurons.forEach((primaryNeuron, primaryIndex) => {
+          // Calculate how many secondary neurons this primary should have
+          const remainingMemories = memories.length - memoryIndex;
+          const remainingPrimaries = primaryCount - primaryIndex;
+          const secondaryCount = Math.ceil(remainingMemories / remainingPrimaries);
+
+          // Create secondary neurons
+          for (let j = 0; j < secondaryCount && memoryIndex < memories.length; j++) {
+            const memory = memories[memoryIndex++];
+
+            // Position secondary neurons in an arc around the primary
+            const secondaryAngle = primaryIndex * primaryAngleStep +
+              (j - secondaryCount/2) * (Math.PI / 6) / secondaryCount;
+            const secondaryRadius = 120 + Math.random() * 60;
+
+            const x = primaryNeuron.x + Math.cos(secondaryAngle) * secondaryRadius;
+            const y = primaryNeuron.y + Math.sin(secondaryAngle) * secondaryRadius;
+
+            // Ensure within bounds
+            const padding = 100;
+            const finalX = Math.max(padding, Math.min(window.innerWidth - padding, x));
+            const finalY = Math.max(padding, Math.min(window.innerHeight - padding, y));
+
+            const secondaryNeuron = this.createMemoryNode(memory, finalX, finalY, memory.theme);
+            secondaryNeuron.isSecondary = true;
+            secondaryNeuron.connections.push(primaryNeuron);
+            primaryNeuron.connections.push(secondaryNeuron);
+            this.nodes.push(secondaryNeuron);
+          }
+        });
+
+      }
+
+      // Create individual memory node
+      createMemoryNode(memory, x, y, theme) {
+        console.log(`🌟 Creating memory node element for "${memory.title}" at (${x}, ${y})`);
+
+        const memoryElement = document.createElement('div');
+        memoryElement.className = 'memory-node';
+
+        // SECURITY FIX: Use safe DOM creation instead of innerHTML
+        const thumbnail = document.createElement('div');
+        thumbnail.className = 'memory-thumbnail';
+        thumbnail.textContent = memory.thumbnail; // Safe text content
+
+        const label = document.createElement('div');
+        label.className = 'memory-label';
+        label.textContent = memory.title; // Safe text content
+
+        memoryElement.appendChild(thumbnail);
+        memoryElement.appendChild(label);
+
+        // Add theme data attribute for styling
+        memoryElement.setAttribute('data-theme', theme);
+
+        // Style the memory node
+        memoryElement.style.cssText = `
+          position: fixed;
+          left: ${x}px;
+          top: ${y}px;
+          width: 70px;
+          height: 70px;
+          border-radius: 50%;
+          background: radial-gradient(circle, rgba(255, 255, 255, 0.1), rgba(111, 99, 217, 0.2));
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          cursor: pointer;
+          transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+          transform: scale(0);
+          opacity: 0;
+          z-index: 1000;
+          color: white;
+        `;
+
+        memoryElement.dataset.preventClick = 'false';
+
+        // Add click handler for elegant memory dialog
+        memoryElement.addEventListener('click', (e) => {
+          if (memoryElement.dataset.preventClick === 'true') {
+            e.preventDefault();
+            e.stopPropagation();
+            return;
+          }
+          e.stopPropagation();
+          this.openMemoryDialog(memory);
+        });
+
+        // Add hover effects with theme-based glow
+        memoryElement.addEventListener('mouseenter', () => {
+          const themeColors = {
+            family: 'rgba(255, 105, 135, 0.8)',
+            travel: 'rgba(52, 211, 153, 0.8)',
+            recent: 'rgba(96, 165, 250, 0.8)',
+            special: 'rgba(251, 191, 36, 0.8)'
+          };
+
+          memoryElement.style.transform = 'scale(1.3)';
+          memoryElement.style.boxShadow = `0 0 32px ${themeColors[theme] || 'rgba(111, 99, 217, 0.55)'}, 0 0 52px ${themeColors[theme] || 'rgba(111, 99, 217, 0.28)'}`;
+          memoryElement.style.zIndex = '1600'; /* CRITICAL FIX: Even higher on hover to stay above everything */
+        });
+
+        memoryElement.addEventListener('mouseleave', () => {
+          memoryElement.style.transform = 'scale(1)';
+          memoryElement.style.boxShadow = '';
+          memoryElement.style.zIndex = '1500'; /* CRITICAL FIX: Maintain high z-index even when not hovering */
+        });
+
+        // 🔍 ZOOM FIX: Add to constellation container for proper zoom behavior
+        const targetContainer = this.constellationContainer || document.querySelector('.dashboard') || document.body;
+        targetContainer.appendChild(memoryElement);
+
+        // Animate in with staggered timing
+        const delay = Math.random() * 500 + 200; // 200-700ms delay
+        setTimeout(() => {
+
+          memoryElement.style.transform = 'scale(1)';
+          memoryElement.style.opacity = '1';
+        }, delay);
+
+        const uid = this.assignNodeUid(memoryElement, `memory-${memory.id || 'node'}`);
+
+        const nodeData = {
+          element: memoryElement,
+          x: x,
+          y: y,
+          baseX: x,
+          baseY: y,
+          vx: 0,
+          vy: 0,
+          memory: memory,
+          theme: theme,
+          connections: [],
+          uid: uid,
+          type: 'memory'
+        };
+
+        this.enableNodeDragging(nodeData);
+
+        return nodeData;
+      }
+
+      // Create person node element for constellation with heartbeat effect
+      createPersonNodeElement(person, x, y) {
+        const personElement = document.createElement('div');
+        personElement.className = 'person-node';
+
+        // Create person avatar with first letter of name
+        const avatar = person.name.charAt(0).toUpperCase();
+        const relationColor = this.getRelationColor(person.relation);
+        const nodeSize = this.getConstellationNodeSize();
+        const personSize = Math.max(56, Math.round(nodeSize * 1.05));
+        const borderWidth = Math.max(2, Math.round(personSize * 0.045));
+        const basePersonShadow = `
+            0 ${Math.round(personSize * 0.08)}px ${Math.round(personSize * 0.3)}px ${relationColor.glow},
+            0 0 ${Math.round(personSize * 0.18)}px rgba(239, 68, 68, 0.26),
+            0 0 ${Math.round(personSize * 0.32)}px rgba(239, 68, 68, 0.1)
+          `;
+        const hoverPersonShadow = `
+            0 0 ${Math.round(personSize * 0.42)}px ${relationColor.glow},
+            0 0 ${Math.round(personSize * 0.75)}px rgba(239, 68, 68, 0.3)
+          `;
+
+        // Create BIGGER avatar circle with subtle heartbeat glow - NO TEXT LABELS
+        personElement.style.cssText = `
+          position: absolute;
+          left: ${x}px;
+          top: ${y}px;
+          width: ${personSize}px;
+          height: ${personSize}px;
+          border-radius: 50%;
+          background: ${relationColor.gradient};
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          color: white;
+          font-weight: 700;
+          font-size: ${Math.round(personSize * 0.33)}px;
+          border: ${borderWidth}px solid ${relationColor.border};
+          box-shadow: ${basePersonShadow};
+          overflow: hidden;
+          cursor: pointer;
+          transform: scale(0);
+          opacity: 0;
+          transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+          animation: heartbeat 4s ease-in-out infinite;
+          z-index: 1500; /* CRITICAL FIX: Higher z-index to appear above all connections */
+          pointer-events: auto; /* CRITICAL: Ensure person nodes are clickable even with container pointer-events: none */
+        `;
+
+        // Start with letter, then try to load avatar image
+        personElement.textContent = avatar;
+
+        // Try to load actual avatar image if person has one
+        if (person.avatarId) {
+          this.loadPersonAvatar(person, personElement, avatar);
+        }
+
+        personElement.dataset.preventClick = 'false';
+
+        // Add click handler to open person summary modal
+        personElement.addEventListener('click', (e) => {
+          if (personElement.dataset.preventClick === 'true') {
+            e.preventDefault();
+            e.stopPropagation();
+            return;
+          }
+          e.stopPropagation();
+          this.openPersonSummaryModal(person);
+        });
+
+        // Add hover effects with relation-based glow
+        personElement.addEventListener('mouseenter', () => {
+          personElement.style.transform = 'scale(1.15)';
+          personElement.style.boxShadow = hoverPersonShadow;
+          personElement.style.zIndex = '1600'; /* CRITICAL FIX: Even higher on hover to stay above everything */
+        });
+
+        personElement.addEventListener('mouseleave', () => {
+          personElement.style.transform = 'scale(1)';
+          personElement.style.boxShadow = basePersonShadow;
+          personElement.style.zIndex = '1500'; /* CRITICAL FIX: Maintain high z-index even when not hovering */
+        });
+
+        // 🔗 CRITICAL FIX: Append to constellation container for zoom/pan anchoring
+        if (this.constellationContainer) {
+          this.constellationContainer.appendChild(personElement);
+        } else {
+          const container = document.querySelector('.dashboard') || document.body;
+          container.appendChild(personElement);
+        }
+
+        // Animate in with staggered timing
+        const delay = Math.random() * 500 + 300; // 300-800ms delay
+        setTimeout(() => {
+
+          personElement.style.transform = 'scale(1)';
+          personElement.style.opacity = '1';
+        }, delay);
+
+        this.assignNodeUid(personElement, `person-${person.id || 'node'}`);
+        return personElement;
+      }
+
+      // Load actual avatar image for person node
+      async loadPersonAvatar(person, personElement, fallbackLetter) {
+        try {
+
+          // FIXED: Use avatarUrl directly from extension (already reconstructed)
+          if (person.avatarUrl) {
+            // Create image element
+            const img = document.createElement('img');
+            img.src = person.avatarUrl;
+            img.draggable = false;
+             img.style.pointerEvents = 'none';
+            img.alt = person.name || 'Person avatar';
+            img.addEventListener('dragstart', (event) => event.preventDefault());
+            img.alt = `${person.name} avatar`;
+            img.style.cssText = `
+              width: 100%;
+              height: 100%;
+              object-fit: cover;
+              border-radius: 50%;
+            `;
+
+            img.onload = () => {
+              // Replace letter with image once loaded
+              personElement.innerHTML = '';
+              personElement.appendChild(img);
+
+            };
+
+            img.onerror = () => {
+              console.error('📷 CONSTELLATION: Failed to display avatar for:', person.name);
+              // Keep the letter fallback
+            };
+          } else {
+            console.warn('📷 CONSTELLATION: No avatar URL for:', person.name);
+          }
+        } catch (error) {
+          console.error('📷 CONSTELLATION: Error loading avatar for:', person.name, error);
+          // Keep the letter fallback
+        }
+      }
+
+      // Open revolutionary migration page
+      openMigrationPage() {
+
+        window.location.href = 'pages/vault-migration.html';
+      }
+
+      // Open person summary modal with connected memories
+      async openPersonSummaryModal(person) {
+
+        // 🎯 FIXED: Use same memory loading approach as people-emma.html
+        let connectedMemories = [];
+        try {
+          if (!window.emmaWebVault || !window.emmaWebVault.vaultData?.content) {
+            console.error('❌ CONSTELLATION: Vault data not available');
+            return;
+          }
+
+          const vaultData = window.emmaWebVault.vaultData;
+          const allMemories = vaultData.content.memories || {};
+
+          // Find memories that include this person - SAME LOGIC AS PEOPLE-EMMA.HTML
+          for (const [memoryId, memory] of Object.entries(allMemories)) {
+            const memoryWithId = memory.id ? memory : { ...memory, id: memoryId };
+
+            if (window.metadataIncludesPerson(memory.metadata?.people, person)) {
+              connectedMemories.push(memoryWithId);
+              continue;
+            }
+
+            // Content-based inference removed for accuracy; rely on explicit metadata links only
+          }
+
+          console.log(`🔗 CONSTELLATION: Found ${connectedMemories.length} memories for person ${person.id}`);
+
+        } catch (error) {
+          console.error('❌ CONSTELLATION: Error loading memories:', error);
+        }
+
+        // Create modal HTML
+        const modalHTML = `
+          <div class="person-summary-modal-overlay" id="person-summary-overlay" onclick="window.memoryConstellation.closePersonSummaryModal()">
+            <div class="person-summary-modal" onclick="event.stopPropagation()">
+              <button class="modal-close" onclick="window.memoryConstellation.closePersonSummaryModal()">×</button>
+
+              <div class="person-summary-header">
+                <div class="person-summary-avatar" id="person-summary-avatar">
+                  ${person.name.charAt(0).toUpperCase()}
+                </div>
+                <div class="person-summary-info">
+                  <h2 class="person-summary-name">${person.name}</h2>
+                  <p class="person-summary-relation">${person.relation || 'other'}</p>
+                  <p class="person-summary-contact">${person.contact || 'No contact info'}</p>
+                </div>
+              </div>
+
+              <div class="person-summary-content">
+                <h3 class="summary-section-title">Connected Memories</h3>
+                <div class="connected-memories">
+                  ${connectedMemories.length > 0 ?
+                    connectedMemories.map(memory => {
+                      // Get thumbnail from attachments or fallback
+                      const thumbnail = memory.thumbnail ||
+                                       (memory.attachments && memory.attachments.length > 0 && memory.attachments[0].url ? memory.attachments[0].url : null);
+                      const memoryTitle = memory.metadata?.title || memory.title || memory.subject || 'Untitled Memory';
+                      const memoryDate = memory.created || memory.date || memory.timestamp;
+
+                      return `
+                        <div class="connected-memory-item" onclick="window.memoryConstellation.openMemoryFromPerson('${memory.id}')">
+                          <div class="memory-preview">
+                            ${thumbnail ? `<img src="${thumbnail}" alt="Memory">` : '💝'}
+                          </div>
+                          <div class="memory-info">
+                            <div class="memory-title">${memoryTitle}</div>
+                            <div class="memory-date">${memoryDate ? new Date(memoryDate).toLocaleDateString() : 'Unknown date'}</div>
+                          </div>
+                        </div>
+                      `;
+                    }).join('') :
+                    '<div class="no-memories">No connected memories yet</div>'
+                  }
+                </div>
+
+                <div class="person-summary-actions">
+                  <button class="btn btn-primary" onclick="window.memoryConstellation.createMemoryWithPersonFromConstellation('${person.id}')">
+                    <span>✨</span>
+                    Create Memory Together
+                  </button>
+                  <button class="btn btn-secondary" onclick="window.location.href='pages/people-emma.html'">
+                    <span>👥</span>
+                    Manage People
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        `;
+
+        // Add modal to body
+        document.body.insertAdjacentHTML('beforeend', modalHTML);
+
+        // Make constellation functions globally accessible for modal
+        window.memoryConstellation = this;
+
+        // Load avatar if available - CRITICAL for showing person's image
+        if (person.avatarUrl) {
+          this.loadAvatarForSummary(person);
+        } else {
+
+        }
+
+        // Show modal with animation
+        setTimeout(() => {
+          document.getElementById('person-summary-overlay').classList.add('active');
+        }, 10);
+      }
+
+      async loadAvatarForSummary(person) {
+        try {
+
+          // FIXED: Use avatarUrl directly (same as constellation nodes and people page)
+          if (person.avatarUrl) {
+            const avatarElement = document.getElementById('person-summary-avatar');
+            if (avatarElement) {
+
+              avatarElement.innerHTML = `<img src="${person.avatarUrl}" alt="${person.name}" style="
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+                border-radius: 50%;
+              ">`;
+
+            } else {
+              console.error('📷 SUMMARY: Avatar element not found in DOM');
+            }
+          } else {
+            console.warn('📷 SUMMARY: No avatarUrl available for:', person.name);
+          }
+        } catch (error) {
+          console.error('📷 SUMMARY: Error loading avatar for:', person.name, error);
+        }
+      }
+
+      closePersonSummaryModal() {
+        const overlay = document.getElementById('person-summary-overlay');
+        if (overlay) {
+          overlay.classList.remove('active');
+          setTimeout(() => overlay.remove(), 300);
+        }
+      }
+
+      createMemoryWithPersonFromConstellation(personId) {
+        this.closePersonSummaryModal();
+        window.location.href = `dashboard.html?createMemory=true&person=${personId}`;
+      }
+
+      async openMemoryFromPerson(memoryId) {
+
+        this.closePersonSummaryModal();
+
+        // Find the memory in our loaded memories
+        try {
+          let allMemories = [];
+          if (window.emmaWebVault && window.emmaWebVault.extensionAvailable) {
+            allMemories = await window.emmaWebVault.listMemories(1000);
+          }
+
+          const memory = allMemories.find(m => m.id === memoryId);
+          if (memory) {
+            this.openMemoryDialog(memory);
+          } else {
+            console.error('💝 Memory not found:', memoryId);
+            this.showToast('❌ Memory not found', 'error');
+          }
+        } catch (error) {
+          console.error('💝 Error opening memory from person:', error);
+          this.showToast('❌ Error opening memory', 'error');
+        }
+      }
+
+      // Get relation-specific colors for people nodes
+      getRelationColor(relation) {
+        const colors = {
+          family: {
+            gradient: 'linear-gradient(135deg, #ef4444, #f87171)',
+            border: 'rgba(239, 68, 68, 0.6)',
+            glow: 'rgba(239, 68, 68, 0.8)'
+          },
+          friend: {
+            gradient: 'linear-gradient(135deg, #3b82f6, #60a5fa)',
+            border: 'rgba(59, 130, 246, 0.6)',
+            glow: 'rgba(59, 130, 246, 0.8)'
+          },
+          colleague: {
+            gradient: 'linear-gradient(135deg, #10b981, #34d399)',
+            border: 'rgba(16, 185, 129, 0.6)',
+            glow: 'rgba(16, 185, 129, 0.8)'
+          },
+          romantic: {
+            gradient: 'linear-gradient(135deg, #d06fa8, #f472b6)',
+            border: 'rgba(208, 111, 168, 0.6)',
+            glow: 'rgba(208, 111, 168, 0.8)'
+          }
+        };
+
+        return colors[relation] || colors.friend; // Default to friend colors
+      }
+
+      // Open person dialog (placeholder)
+      openPersonDialog(person) {
+
+        this.showToast(`👥 ${person.name} (${person.relation})`, 'info');
+      }
+
+      // Create intelligent connections between memory nodes and people nodes
+      createMemoryPeopleConnections(memories, people) {
+
+        const memoryNodes = this.nodes.filter(node => node.type === 'memory');
+        const peopleNodes = this.nodes.filter(node => node.type === 'person');
+        const reducePhysics = this.shouldReduceConstellationPhysics();
+
+        // For each memory, connect to people who were involved
+        memoryNodes.forEach(memoryNode => {
+          const memory = memoryNode.memory;
+
+          // Check if memory has people data (from wizard selections or manual input)
+          if (memory.selectedPeople && Array.isArray(memory.selectedPeople)) {
+            // Connect to people selected in wizard
+            memory.selectedPeople.forEach(personId => {
+              const personNode = peopleNodes.find(pNode => pNode.person.id === personId);
+              if (personNode) {
+                this.linkNodes(memoryNode, personNode);
+              }
+            });
+          }
+
+          // Also check if people are mentioned in memory content/responses
+          const memoryText = (memory.content || '').toLowerCase() + ' ' +
+                            (memory.responses || []).join(' ').toLowerCase();
+
+          peopleNodes.forEach(personNode => {
+            const personName = personNode.person.name.toLowerCase();
+
+            // If person's name is mentioned in the memory text, create connection
+            if (memoryText.includes(personName)) {
+              this.linkNodes(memoryNode, personNode);
+              console.log(`🔗 Auto-connected memory "${memory.title}" to person "${personNode.person.name}" (name mentioned)`);
+            }
+          });
+        });
+
+                if (!reducePhysics) {
+          // Create some random connections for people who aren't connected to anything
+          peopleNodes.forEach(personNode => {
+            if (personNode.connections.length === 0) {
+              let closestMemory = null;
+              let closestDistance = Infinity;
+
+              memoryNodes.forEach(memoryNode => {
+                const dx = personNode.x - memoryNode.x;
+                const dy = personNode.y - memoryNode.y;
+                const distance = Math.sqrt(dx * dx + dy * dy);
+
+                if (distance < closestDistance && memoryNode.connections.length < 3) {
+                  closestDistance = distance;
+                  closestMemory = memoryNode;
+                }
+              });
+
+              if (closestMemory) {
+                this.linkNodes(personNode, closestMemory);
+              }
+            }
+          });
+        }
+      }      // Update neural network node positions with overlap prevention
+      updateConstellationNodes() {
+        const time = Date.now() * 0.001;
+
+        // Update all memory nodes
+        this.nodes.forEach((node, i) => {
+          // Reset forces
+          let forceX = 0;
+          let forceY = 0;
+
+          // Repulsion from other nodes to prevent overlap
+          this.nodes.forEach((otherNode, j) => {
+            if (i !== j) {
+              const dx = node.x - otherNode.x;
+              const dy = node.y - otherNode.y;
+              const distance = Math.sqrt(dx * dx + dy * dy);
+
+              const minDistance = node.isPrimary || otherNode.isPrimary ? 150 : 120;
+              if (distance < minDistance) {
+                const force = (minDistance - distance) / distance * 0.3;
+                forceX += dx * force;
+                forceY += dy * force;
+              }
+            }
+          });
+
+          // Also repel from central neuron
+          if (this.centralNeuron) {
+            const dx = node.x - this.centralNeuron.x;
+            const dy = node.y - this.centralNeuron.y;
+            const distance = Math.sqrt(dx * dx + dy * dy);
+
+            if (distance < 150) {
+              const force = (150 - distance) / distance * 0.4;
+              forceX += dx * force;
+              forceY += dy * force;
+            }
+          }
+
+          // Gentle attraction to base position
+          const baseAttraction = node.isPrimary ? 0.03 : 0.02;
+          forceX += (node.baseX - node.x) * baseAttraction;
+          forceY += (node.baseY - node.y) * baseAttraction;
+
+          // Subtle floating motion - less for primary nodes
+          const floatAmplitude = node.isPrimary ? 1.5 : 2.5;
+          const floatX = Math.sin(time * 0.15 + i * 0.7) * floatAmplitude;
+          const floatY = Math.cos(time * 0.12 + i * 0.5) * floatAmplitude;
+
+          // Apply forces
+          node.vx = (node.vx + forceX) * 0.92; // Damping
+          node.vy = (node.vy + forceY) * 0.92;
+
+          // Update position
+          node.x += node.vx + floatX * 0.4;
+          node.y += node.vy + floatY * 0.4;
+
+          // Keep within bounds
+          const padding = 80;
+          node.x = Math.max(padding, Math.min(window.innerWidth - padding, node.x));
+          node.y = Math.max(padding, Math.min(window.innerHeight - padding, node.y));
+
+          // Update DOM position
+          if (node.element) {
+            node.element.style.left = node.x + 'px';
+            node.element.style.top = node.y + 'px';
+          }
+        });
+
+        // The central neuron (Emma orb) stays fixed at center
+        if (this.centralNeuron) {
+          this.centralNeuron.x = window.innerWidth / 2;
+          this.centralNeuron.y = window.innerHeight / 2;
+        }
+      }
+
+      // Show elegant constellation burger menu
+      showConstellationUI() {
+        // Initialize constellation filters state
+        this.constellationFilters = {
+          memories: true,
+          people: true,
+          family: true,
+          travel: true,
+          recent: true,
+          special: true
+        };
+        const savedFilters = this.loadSavedConstellationFilters();
+        if (savedFilters) {
+          this.constellationFilters = { ...this.constellationFilters, ...savedFilters };
+        }
+
+        // Create elegant burger menu
+        const burgerMenu = document.createElement('div');
+        burgerMenu.className = 'constellation-burger-menu';
+        burgerMenu.innerHTML = `
+          <!-- Burger Button -->
+          <button class="constellation-burger-btn" id="constellationBurger">
+            <div class="burger-lines">
+              <span></span>
+              <span></span>
+              <span></span>
+          </div>
+            <div class="burger-label">Filters</div>
+          </button>
+
+          <!-- Expandable Menu Panel -->
+          <div class="constellation-menu-panel" id="constellationPanel">
+            <div class="panel-header">
+              <h3>🌟 Constellation Filters</h3>
+              <button class="panel-close" onclick="dashboard.exitMemoryConstellation()">✕</button>
+            </div>
+
+            <div class="filter-section">
+              <h4>Node Types</h4>
+              <div class="filter-toggles">
+                <label class="filter-toggle">
+                  <input type="checkbox" id="filter-memories" checked>
+                  <span class="toggle-slider"></span>
+                  <span class="toggle-label">💝 Memories</span>
+                  <span class="toggle-count" id="count-memories">0</span>
+                </label>
+
+                <label class="filter-toggle">
+                  <input type="checkbox" id="filter-people" checked>
+                  <span class="toggle-slider"></span>
+                  <span class="toggle-label">👤 People</span>
+                  <span class="toggle-count" id="count-people">0</span>
+                </label>
+              </div>
+            </div>
+
+            <div class="filter-section">
+              <h4>Memory Themes</h4>
+              <div class="filter-toggles">
+                <label class="filter-toggle">
+                  <input type="checkbox" id="filter-family" checked>
+                  <span class="toggle-slider family"></span>
+                  <span class="toggle-label">👨‍👩‍👧‍👦 Family</span>
+                  <span class="toggle-count" id="count-family">0</span>
+                </label>
+
+                <label class="filter-toggle">
+                  <input type="checkbox" id="filter-travel" checked>
+                  <span class="toggle-slider travel"></span>
+                  <span class="toggle-label">✈️ Travel</span>
+                  <span class="toggle-count" id="count-travel">0</span>
+                </label>
+
+                <label class="filter-toggle">
+                  <input type="checkbox" id="filter-recent" checked>
+                  <span class="toggle-slider recent"></span>
+                  <span class="toggle-label">🕒 Recent</span>
+                  <span class="toggle-count" id="count-recent">0</span>
+                </label>
+
+                <label class="filter-toggle">
+                  <input type="checkbox" id="filter-special" checked>
+                  <span class="toggle-slider special"></span>
+                  <span class="toggle-label">⭐ Special</span>
+                  <span class="toggle-count" id="count-special">0</span>
+                </label>
+              </div>
+            </div>
+
+            <div class="filter-actions">
+              <button class="filter-btn secondary" id="reset-filters-btn">
+                Reset All
+              </button>
+              <button class="filter-btn primary" id="apply-filters-btn">
+                Apply Filters
+              </button>
+            </div>
+          </div>
+        `;
+
+        // Add elegant styles
+        const styles = document.createElement('style');
+        styles.textContent = `
+          .constellation-burger-menu {
+          position: fixed;
+          top: 20px;
+          left: 20px;
+            z-index: 2000;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+          }
+
+          .constellation-burger-btn {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 4px;
+            background: rgba(17, 17, 27, 0.95);
+            border: 1px solid rgba(111, 99, 217, 0.4);
+            border-radius: 12px;
+            padding: 12px;
+            cursor: pointer;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            backdrop-filter: blur(15px);
+            box-shadow: 0 8px 32px rgba(111, 99, 217, 0.15);
+          }
+
+          .constellation-burger-btn:hover {
+            background: rgba(111, 99, 217, 0.1);
+            border-color: rgba(111, 99, 217, 0.6);
+            transform: translateY(-2px);
+            box-shadow: 0 12px 40px rgba(111, 99, 217, 0.25);
+          }
+
+          .burger-lines {
+            display: flex;
+            flex-direction: column;
+            gap: 3px;
+          }
+
+          .burger-lines span {
+            width: 18px;
+            height: 2px;
+            background: rgba(111, 99, 217, 0.8);
+            border-radius: 1px;
+            transition: all 0.3s ease;
+          }
+
+          .constellation-burger-btn:hover .burger-lines span {
+            background: rgba(111, 99, 217, 1);
+          }
+
+          .burger-label {
+            font-size: 10px;
+            color: rgba(255, 255, 255, 0.7);
+            font-weight: 500;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+          }
+
+          .constellation-menu-panel {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 320px;
+            background: rgba(17, 17, 27, 0.98);
+          border: 1px solid rgba(111, 99, 217, 0.3);
+            border-radius: 16px;
+            backdrop-filter: blur(20px);
+            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
+            transform: translateX(-100%) scale(0.95);
+            opacity: 0;
+            visibility: hidden;
+            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+            overflow: hidden;
+          }
+
+          .constellation-menu-panel.active {
+            transform: translateX(0) scale(1);
+            opacity: 1;
+            visibility: visible;
+          }
+
+          .panel-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 20px 24px 16px;
+            border-bottom: 1px solid rgba(111, 99, 217, 0.2);
+          }
+
+          .panel-header h3 {
+            margin: 0;
+            font-size: 16px;
+            font-weight: 600;
+            color: white;
+          }
+
+          .panel-close {
+            background: none;
+            border: none;
+            color: rgba(255, 255, 255, 0.6);
+            font-size: 18px;
+            cursor: pointer;
+            padding: 4px;
+            border-radius: 6px;
+            transition: all 0.2s ease;
+          }
+
+          .panel-close:hover {
+            background: rgba(255, 255, 255, 0.1);
+            color: white;
+          }
+
+          .filter-section {
+            padding: 20px 24px;
+            border-bottom: 1px solid rgba(111, 99, 217, 0.1);
+          }
+
+          .filter-section:last-of-type {
+            border-bottom: none;
+          }
+
+          .filter-section h4 {
+            margin: 0 0 16px 0;
+            font-size: 14px;
+            font-weight: 600;
+            color: rgba(255, 255, 255, 0.8);
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+          }
+
+          .filter-toggles {
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+          }
+
+          .filter-toggle {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            cursor: pointer;
+            padding: 8px 0;
+            transition: all 0.2s ease;
+          }
+
+          .filter-toggle:hover {
+            background: rgba(111, 99, 217, 0.05);
+            border-radius: 8px;
+            padding: 8px 8px;
+            margin: 0 -8px;
+          }
+
+          .filter-toggle input[type="checkbox"] {
+            display: none;
+          }
+
+          .toggle-slider {
+            position: relative;
+            width: 40px;
+            height: 20px;
+            background: rgba(255, 255, 255, 0.2);
+            border-radius: 10px;
+            transition: all 0.3s ease;
+            flex-shrink: 0;
+          }
+
+          .toggle-slider:before {
+            content: '';
+            position: absolute;
+            top: 2px;
+            left: 2px;
+            width: 16px;
+            height: 16px;
+            background: white;
+            border-radius: 50%;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+          }
+
+          .filter-toggle input:checked + .toggle-slider {
+            background: rgba(111, 99, 217, 0.8);
+          }
+
+          .filter-toggle input:checked + .toggle-slider:before {
+            transform: translateX(20px);
+            background: white;
+          }
+
+          /* Theme-specific toggle colors */
+          .toggle-slider.family:before { background: rgba(255, 105, 135, 0.1); }
+          .filter-toggle input:checked + .toggle-slider.family { background: rgba(255, 105, 135, 0.8); }
+
+          .toggle-slider.travel:before { background: rgba(52, 211, 153, 0.1); }
+          .filter-toggle input:checked + .toggle-slider.travel { background: rgba(52, 211, 153, 0.8); }
+
+          .toggle-slider.recent:before { background: rgba(96, 165, 250, 0.1); }
+          .filter-toggle input:checked + .toggle-slider.recent { background: rgba(96, 165, 250, 0.8); }
+
+          .toggle-slider.special:before { background: rgba(251, 191, 36, 0.1); }
+          .filter-toggle input:checked + .toggle-slider.special { background: rgba(251, 191, 36, 0.8); }
+
+          .toggle-label {
+            flex: 1;
+            color: rgba(255, 255, 255, 0.9);
+            font-size: 14px;
+            font-weight: 500;
+          }
+
+          .toggle-count {
+            background: rgba(111, 99, 217, 0.2);
+            color: rgba(111, 99, 217, 1);
+            padding: 2px 8px;
+          border-radius: 12px;
+            font-size: 12px;
+            font-weight: 600;
+            min-width: 20px;
+            text-align: center;
+          }
+
+          .filter-actions {
+            padding: 20px 24px;
+            display: flex;
+            gap: 12px;
+          }
+
+          .filter-btn {
+            flex: 1;
+            padding: 12px 16px;
+            border: none;
+            border-radius: 8px;
+            font-size: 14px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.2s ease;
+          }
+
+          .filter-btn.secondary {
+            background: rgba(255, 255, 255, 0.1);
+            color: rgba(255, 255, 255, 0.8);
+          }
+
+          .filter-btn.secondary:hover {
+            background: rgba(255, 255, 255, 0.15);
+            color: white;
+          }
+
+          .filter-btn.primary {
+            background: rgba(111, 99, 217, 0.8);
+            color: white;
+          }
+
+          .filter-btn.primary:hover {
+            background: rgba(111, 99, 217, 1);
+            transform: translateY(-1px);
+          }
+        `;
+
+        document.head.appendChild(styles);
+        document.body.appendChild(burgerMenu);
+
+        // Set up burger menu interactions
+        this.setupConstellationMenu();
+
+        // Update counts
+        this.updateConstellationCounts();
+
+        this.constellationUI = burgerMenu;
+        
+        // 🎯 NO CONTROLS NEEDED: Natural gestures (wheel zoom, drag pan, pinch) are intuitive
+      }
+
+      // Set up constellation menu interactions
+      setupConstellationMenu() {
+        const burgerBtn = document.getElementById('constellationBurger');
+        const panel = document.getElementById('constellationPanel');
+
+        // Toggle menu on burger click
+        burgerBtn.addEventListener('click', () => {
+          panel.classList.toggle('active');
+        });
+
+        // Close menu when clicking outside
+        document.addEventListener('click', (e) => {
+          if (!burgerBtn.contains(e.target) && !panel.contains(e.target)) {
+            panel.classList.remove('active');
+          }
+        });
+
+        // Set up filter toggle event listeners
+        const filterInputs = panel.querySelectorAll('input[type="checkbox"]');
+        filterInputs.forEach(input => {
+          const filterType = input.id.replace('filter-', '');
+          if (this.constellationFilters && typeof this.constellationFilters[filterType] === 'boolean') {
+            input.checked = this.constellationFilters[filterType];
+          } else {
+            this.constellationFilters[filterType] = input.checked;
+          }
+          input.addEventListener('change', (e) => {
+            const filterType = e.target.id.replace('filter-', '');
+            this.toggleConstellationFilter(filterType, e.target.checked);
+          });
+        });
+
+        // Set up action button event listeners
+        document.getElementById('reset-filters-btn').addEventListener('click', () => {
+          this.resetConstellationFilters();
+        });
+
+        document.getElementById('apply-filters-btn').addEventListener('click', () => {
+          this.hideConstellationMenu();
+        });
+
+        // Apply saved filter state immediately so constellation reflects preferences
+        this.applyConstellationFilters();
+        this.persistConstellationFilters();
+      }
+
+      // Toggle constellation filter and update display
+      toggleConstellationFilter(filterType, enabled) {
+        if (!this.constellationFilters) {
+          this.constellationFilters = {};
+        }
+        this.constellationFilters[filterType] = enabled;
+        this.persistConstellationFilters();
+
+        // Apply filters with smooth animation
+        this.applyConstellationFilters();
+      }
+
+      // Apply constellation filters with smooth animations
+      applyConstellationFilters() {
+        const nodes = document.querySelectorAll('.memory-node, .person-node');
+
+        nodes.forEach(node => {
+          const nodeType = node.classList.contains('memory-node') ? 'memory' : 'person';
+          const theme = node.dataset.theme || 'recent';
+
+          let shouldShow = false;
+
+          // Check if node type is enabled
+          if (nodeType === 'memory' && this.constellationFilters.memories) {
+            // Check if memory theme is enabled
+            shouldShow = this.constellationFilters[theme];
+          } else if (nodeType === 'person' && this.constellationFilters.people) {
+            shouldShow = true;
+          }
+
+          // Smooth animation for show/hide
+          if (shouldShow && node.style.display === 'none') {
+            // Show with fade in
+            node.style.display = 'block';
+            node.style.opacity = '0';
+            node.style.transform = 'scale(0.8)';
+
+            requestAnimationFrame(() => {
+              node.style.transition = 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)';
+              node.style.opacity = '1';
+              node.style.transform = 'scale(1)';
+            });
+          } else if (!shouldShow && node.style.display !== 'none') {
+            // Hide with fade out
+            node.style.transition = 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)';
+            node.style.opacity = '0';
+            node.style.transform = 'scale(0.8)';
+
+            setTimeout(() => {
+              node.style.display = 'none';
+            }, 300);
+          }
+        });
+
+        // Neural connections now update automatically in animation loop based on node visibility
+      }
+
+      // Neural connections now handled automatically in main animation loop
+
+      // Update constellation counts in the menu
+      updateConstellationCounts() {
+        // Count memories by theme
+        const themeCounts = {
+          family: 0,
+          travel: 0,
+          recent: 0,
+          special: 0
+        };
+
+        Object.keys(this.constellationMemories || {}).forEach(theme => {
+          themeCounts[theme] = (this.constellationMemories[theme] || []).length;
+        });
+
+        // Count people
+        const peopleCount = this.constellationPeople ? this.constellationPeople.length : 0;
+        const totalMemories = Object.values(themeCounts).reduce((sum, count) => sum + count, 0);
+
+        // Update count displays
+        const updateCount = (id, count) => {
+          const element = document.getElementById(id);
+          if (element) element.textContent = count;
+        };
+
+        updateCount('count-memories', totalMemories);
+        updateCount('count-people', peopleCount);
+        updateCount('count-family', themeCounts.family);
+        updateCount('count-travel', themeCounts.travel);
+        updateCount('count-recent', themeCounts.recent);
+        updateCount('count-special', themeCounts.special);
+      }
+
+      // Reset all constellation filters
+      resetConstellationFilters() {
+        // Reset all filters to true
+        this.constellationFilters = {
+          memories: true,
+          people: true,
+          family: true,
+          travel: true,
+          recent: true,
+          special: true
+        };
+
+        // Update checkboxes
+        const checkboxes = document.querySelectorAll('#constellationPanel input[type="checkbox"]');
+        checkboxes.forEach(checkbox => {
+          checkbox.checked = true;
+        });
+
+        // Apply filters
+        this.applyConstellationFilters();
+        this.persistConstellationFilters();
+
+      }
+
+      // Hide constellation menu
+      hideConstellationMenu() {
+        const panel = document.getElementById('constellationPanel');
+        if (panel) {
+          panel.classList.remove('active');
+        }
+      }
+
+      // 🔍 CREATE ZOOMABLE CONSTELLATION CONTAINER
+      createConstellationContainer() {
+        // Remove any existing constellation container
+        const existingContainer = document.getElementById('constellation-zoom-container');
+        if (existingContainer) {
+          existingContainer.remove();
+        }
+
+        // Create zoomable container for constellation nodes
+        this.constellationContainer = document.createElement('div');
+        this.constellationContainer.id = 'constellation-zoom-container';
+        this.constellationContainer.style.cssText = `
+          position: fixed;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          pointer-events: none;
+          z-index: 1400;
+          transform-origin: 0 0;
+          will-change: transform;
+        `;
+        
+        // 🔧 CRITICAL FIX: Container doesn't block events, but child nodes can still be clicked
+        // Child nodes will have pointer-events: auto set individually
+
+        // Reset zoom state
+        this.zoomState.scale = 1;
+        this.zoomState.translateX = 0;
+        this.zoomState.translateY = 0;
+
+        // Add to dashboard
+        document.body.appendChild(this.constellationContainer);
+
+        if (this.neuralCanvas) {
+          this.neuralCanvas.style.transformOrigin = '0 0';
+        }
+
+        // Enable zoom/pan interaction on the container
+        this.setupConstellationZoom();
+
+        console.log('🔍 ZOOM: Created constellation container with zoom functionality');
+      }
+
+      // 🔍 SETUP ZOOM AND PAN FUNCTIONALITY
+      setupConstellationZoom() {
+        // Enable pointer events for zoom interaction
+        document.addEventListener('wheel', (e) => {
+          if (this.isConstellationMode) {
+            // 🚫 SMART SCROLL: Don't intercept wheel events over dialogs/modals/chat
+            const isOverDialog = e.target.closest('.memory-preview-dialog') || 
+                                e.target.closest('.person-summary-modal') ||
+                                e.target.closest('.voice-wizard-modal') ||
+                                e.target.closest('.modal-overlay') ||
+                                e.target.closest('.responsive-memory-container') ||
+                                
+                                // 💬 CHAT WINDOW EXCLUSIONS
+                                e.target.closest('.experience-popup') ||
+                                e.target.closest('.chat-container') ||
+                                e.target.closest('.message-container') ||
+                                e.target.closest('.messages-container') ||
+                                e.target.closest('.chat-messages') ||
+                                e.target.closest('.emma-chat') ||
+                                e.target.closest('[class*="chat"]') ||
+                                e.target.closest('[class*="message"]') ||
+                                e.target.closest('[class*="popup"]') ||
+
+                                // Vault control panel: allow native scroll inside overlay
+                                e.target.closest('.vault-control-overlay') ||
+                                e.target.closest('.vault-control-dialog') ||
+                                e.target.closest('.vault-control');
+            
+            if (!isOverDialog) {
+              // Only zoom constellation when NOT scrolling in a dialog
+              e.preventDefault();
+              this.handleConstellationZoom(e);
+            }
+            // If over dialog, allow natural scrolling behavior
+          }
+        }, { passive: false });
+
+        // 🎯 IMPROVED MOUSE DRAG PANNING - More responsive for Debbe
+        let isDragging = false;
+        let dragStart = { x: 0, y: 0 };
+        let dragStartZoom = { ...this.zoomState };
+
+        document.addEventListener('mousedown', (e) => {
+          // Allow dragging when clicking empty constellation space
+          if (!this.isConstellationMode || e.button !== 0) return;
+
+          const target = e.target;
+          const interactiveSelectors = [
+            '.memory-node',
+            '.person-node',
+            '.create-memory-node',
+            '.constellation-controls',
+            '.constellation-menu-panel',
+            '.constellation-burger-btn',
+            '.memory-dialog',
+            '.memory-dialog-overlay',
+            '.person-summary-modal',
+            '.voice-wizard-modal',
+            '.modal-overlay',
+            '.experience-popup',
+            '.chat-container',
+            '.chat-messages',
+            '.radial-menu'
+          ];
+
+          const isInteractiveTarget = interactiveSelectors.some(selector => target.closest(selector));
+          if (isInteractiveTarget) return;
+
+          const isConstellationSurface =
+            target.id === 'constellation' ||
+            target.classList?.contains('constellation-canvas') ||
+            target.closest('#constellation-zoom-container') ||
+            target === document.body ||
+            target.classList?.contains('dashboard');
+
+          if (!isConstellationSurface) return;
+
+          isDragging = true;
+          dragStart = { x: e.clientX, y: e.clientY };
+          dragStartZoom = { ...this.zoomState };
+          document.body.style.cursor = 'grabbing';
+          e.preventDefault(); // Only prevent when starting drag on empty space
+        });
+
+
+
+        document.addEventListener('mousemove', (e) => {
+          if (isDragging && this.isConstellationMode) {
+            const deltaX = e.clientX - dragStart.x;
+            const deltaY = e.clientY - dragStart.y;
+            
+            this.zoomState.translateX = dragStartZoom.translateX + deltaX;
+            this.zoomState.translateY = dragStartZoom.translateY + deltaY;
+            
+            this.updateConstellationTransform();
+          }
+        });
+
+        document.addEventListener('mouseup', () => {
+          if (isDragging) {
+            isDragging = false;
+            document.body.style.cursor = '';
+          }
+        });
+
+        // 📱 TOUCH GESTURES for tablets/phones
+        let startTouches = [];
+        let startZoomState = { ...this.zoomState };
+
+        document.addEventListener('touchstart', (e) => {
+          if (!this.isConstellationMode) return;
+          const touchTarget = e.target;
+          if (this.isInteractiveConstellationTarget(touchTarget)) {
+            this.touchPanDisabled = true;
+            startTouches = [];
+            return;
+          }
+          this.touchPanDisabled = false;
+          startTouches = Array.from(e.touches);
+          startZoomState = { ...this.zoomState };
+        });
+
+        document.addEventListener('touchmove', (e) => {
+          if (this.isConstellationMode && startTouches.length > 0 && !this.touchPanDisabled) {
+            e.preventDefault();
+            this.handleConstellationTouchMove(e, startTouches, startZoomState);
+          }
+        }, { passive: false });
+
+        document.addEventListener('touchend', (e) => {
+          startTouches = [];
+          if (e.touches.length === 0) {
+            this.touchPanDisabled = false;
+          }
+        });
+
+        // Keyboard navigation for accessibility
+        document.addEventListener('keydown', (e) => {
+          if (this.isConstellationMode) {
+            this.handleConstellationKeyboard(e);
+          }
+        });
+      }
+
+      // Enable node-level dragging
+      isInteractiveConstellationTarget(target) {
+        if (!target) return false;
+        const interactiveSelectors = [
+          '.memory-node',
+          '.person-node',
+          '.create-memory-node',
+          '.constellation-controls',
+          '.constellation-menu-panel',
+          '.constellation-burger-btn',
+          '.memory-dialog',
+          '.memory-dialog-overlay',
+          '.person-summary-modal',
+          '.voice-wizard-modal',
+          '.modal-overlay',
+          '.experience-popup',
+          '.chat-container',
+          '.chat-messages',
+          '.radial-menu'
+        ];
+        return interactiveSelectors.some(selector => target.closest(selector));
+      }
+
+      // Enable node-level dragging for pointer events
+      enableNodeDragging(node) {
+        if (!node || !node.element) return;
+        if (node.orbBound) return; // Skip radial menu nodes
+        const element = node.element;
+        if (element.dataset.dragHandlerAttached === 'true') return;
+
+        element.dataset.dragHandlerAttached = 'true';
+        element.setAttribute('draggable', 'false');
+        element.style.touchAction = 'none';
+        element.style.userSelect = 'none';
+        element.style.webkitUserSelect = 'none';
+        element.addEventListener('dragstart', (event) => {
+          event.preventDefault();
+        });
+        element.onselectstart = () => false;
+        element.addEventListener('pointerdown', () => {
+          if (document.activeElement && document.activeElement.blur) {
+            try { document.activeElement.blur(); } catch {}
+          }
+        }, { passive: true });
+        element.addEventListener('pointerdown', (event) => this.handleNodePointerDown(event, node));
+      }
+
+      handleNodePointerDown(event, node) {
+        if (!this.isConstellationMode) return;
+        if (!node || !node.element) return;
+
+        const pointerType = event.pointerType || 'mouse';
+        this.nodeDragLastPointerType = pointerType;
+
+        if (pointerType === 'mouse' && event.button !== 0) return;
+        if (this.activeNodeDrag || this.pendingNodeDrag) return;
+
+        if (this.nodeDragHoldTimeout) {
+          clearTimeout(this.nodeDragHoldTimeout);
+          this.nodeDragHoldTimeout = null;
+        }
+        this.nodeDragHoldActive = false;
+        this.nodeDragLatestEvent = event;
+
+        this.pendingNodeDrag = node;
+        this.nodeDragPointerId = event.pointerId ?? 'mouse';
+        this.nodeDragStart = { x: event.clientX, y: event.clientY };
+        node.justDragged = false;
+        node.isDragging = false;
+
+        if (node.element.setPointerCapture && event.pointerId !== undefined) {
+          try {
+            node.element.setPointerCapture(event.pointerId);
+          } catch (error) {
+            console.warn('[Constellation] Unable to capture pointer for node drag', error);
+          }
+        }
+
+        document.addEventListener('pointermove', this.boundNodePointerMove);
+        document.addEventListener('pointerup', this.boundNodePointerUp);
+        document.addEventListener('pointercancel', this.boundNodePointerUp);
+
+        if (pointerType === 'touch') {
+          this.touchPanDisabled = true;
+          this.nodeDragHoldTimeout = setTimeout(() => {
+            if (!this.isConstellationMode) return;
+            if (this.pendingNodeDrag !== node || this.activeNodeDrag) return;
+            this.nodeDragHoldActive = true;
+            const latestEvent = this.nodeDragLatestEvent || event;
+            this.beginNodeDrag(node, latestEvent);
+          }, this.touchHoldDelay);
+          return;
+        }
+      }
+
+      handleNodePointerMove(event) {
+        if (this.nodeDragPointerId !== null && event.pointerId !== undefined && event.pointerId !== this.nodeDragPointerId) {
+          return;
+        }
+
+        const pointerType = event.pointerType || this.nodeDragLastPointerType || 'mouse';
+        this.nodeDragLatestEvent = event;
+
+        const candidate = this.activeNodeDrag || this.pendingNodeDrag;
+        if (!candidate || !candidate.element) return;
+
+        if (pointerType === 'touch') {
+          if (!this.activeNodeDrag) {
+            return;
+          }
+          event.preventDefault();
+          this.updateNodeDragPosition(event);
+          return;
+        }
+
+        const deltaX = event.clientX - this.nodeDragStart.x;
+        const deltaY = event.clientY - this.nodeDragStart.y;
+
+        if (!this.activeNodeDrag) {
+          const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+          if (distance < this.nodeDragThreshold) {
+            return;
+          }
+          this.beginNodeDrag(candidate, event);
+        }
+
+        if (!this.activeNodeDrag) return;
+
+        event.preventDefault();
+        this.updateNodeDragPosition(event);
+      }
+
+      handleNodePointerUp(event) {
+        if (this.nodeDragPointerId !== null && event.pointerId !== undefined && event.pointerId !== this.nodeDragPointerId) {
+          return;
+        }
+
+        const pointerType = event.pointerType || this.nodeDragLastPointerType || 'mouse';
+
+        if (this.nodeDragHoldTimeout) {
+          clearTimeout(this.nodeDragHoldTimeout);
+          this.nodeDragHoldTimeout = null;
+        }
+        this.nodeDragHoldActive = false;
+        this.nodeDragLatestEvent = null;
+
+        const node = this.activeNodeDrag || this.pendingNodeDrag;
+
+        if (node && node.element && node.element.releasePointerCapture && this.nodeDragPointerId !== null && this.nodeDragPointerId !== 'mouse') {
+          try {
+            node.element.releasePointerCapture(this.nodeDragPointerId);
+          } catch (error) {
+            console.warn('[Constellation] Unable to release pointer capture', error);
+          }
+        }
+
+        if (this.activeNodeDrag) {
+          this.endNodeDrag();
+        }
+
+        this.pendingNodeDrag = null;
+        this.nodeDragPointerId = null;
+        this.nodeDragTransformData = null;
+        this.nodeDragLastPointerType = null;
+
+        if (pointerType === 'touch') {
+          this.touchPanDisabled = false;
+        }
+
+        document.removeEventListener('pointermove', this.boundNodePointerMove);
+        document.removeEventListener('pointerup', this.boundNodePointerUp);
+        document.removeEventListener('pointercancel', this.boundNodePointerUp);
+      }
+
+      beginNodeDrag(node, event) {
+        if (!node || !node.element) return;
+
+        if (this.nodeDragHoldTimeout) {
+          clearTimeout(this.nodeDragHoldTimeout);
+          this.nodeDragHoldTimeout = null;
+        }
+        if (this.nodeDragLastPointerType === 'touch') {
+          this.nodeDragHoldActive = true;
+          this.touchPanDisabled = true;
+        }
+        this.nodeDragLatestEvent = event;
+
+        this.activeNodeDrag = node;
+        this.pendingNodeDrag = null;
+        node.isDragging = true;
+        node.vx = 0;
+        node.vy = 0;
+        node.element.dataset.preventClick = 'true';
+        node.originalTransition = node.originalTransition ?? node.element.style.transition;
+        node.element.style.transition = 'none';
+        node.element.classList.add('dragging');
+
+        document.body.style.cursor = 'grabbing';
+        node.element.style.cursor = 'grabbing';
+
+        this.nodeDragTransformData = this.computeNodeDragTransformData();
+        const stagePoint = this.clientToStageCoordinates(event.clientX, event.clientY);
+        this.nodeDragOffset = {
+          x: stagePoint.x - node.x,
+          y: stagePoint.y - node.y
+        };
+
+        this.updateNodeDragPosition(event);
+      }
+
+      updateNodeDragPosition(event) {
+        if (!this.activeNodeDrag) return;
+        const node = this.activeNodeDrag;
+        const element = node.element;
+        if (!element) return;
+
+        const stagePoint = this.clientToStageCoordinates(event.clientX, event.clientY);
+        node.x = stagePoint.x - this.nodeDragOffset.x;
+        node.y = stagePoint.y - this.nodeDragOffset.y;
+        node.baseX = node.x;
+        node.baseY = node.y;
+        node.vx = 0;
+        node.vy = 0;
+
+        const halfWidth = (element.offsetWidth || 0) / 2;
+        const halfHeight = (element.offsetHeight || 0) / 2;
+
+        element.style.left = `${node.x - halfWidth}px`;
+        element.style.top = `${node.y - halfHeight}px`;
+      }
+
+      endNodeDrag() {
+        if (!this.activeNodeDrag) return;
+        const node = this.activeNodeDrag;
+        const element = node.element;
+
+        node.isDragging = false;
+        node.baseX = node.x;
+        node.baseY = node.y;
+        node.vx = 0;
+        node.vy = 0;
+        node.justDragged = true;
+
+        if (element) {
+          if (node.originalTransition !== undefined) {
+            element.style.transition = node.originalTransition;
+          }
+          element.style.cursor = '';
+          element.classList.remove('dragging');
+          setTimeout(() => {
+            element.dataset.preventClick = 'false';
+            node.justDragged = false;
+          }, 100);
+        }
+
+        document.body.style.cursor = '';
+        this.activeNodeDrag = null;
+
+        this.scheduleConstellationLayoutPersist();
+      }
+
+      computeNodeDragTransformData() {
+        const container = this.constellationContainer;
+        if (!container) return null;
+
+        const rect = container.getBoundingClientRect();
+        const transform = window.getComputedStyle(container).transform;
+        const MatrixClass = window.DOMMatrixReadOnly || window.DOMMatrix;
+
+        if (!MatrixClass) {
+          return {
+            rect,
+            inverseMatrix: {
+              transformPoint: (point) => ({ x: point.x, y: point.y })
+            }
+          };
+        }
+
+        if (!transform || transform === 'none') {
+          return {
+            rect,
+            inverseMatrix: new MatrixClass()
+          };
+        }
+
+        try {
+          const matrix = new MatrixClass(transform);
+          const inverseMatrix = typeof matrix.inverse === 'function' ? matrix.inverse() : matrix;
+          return {
+            rect,
+            inverseMatrix
+          };
+        } catch (error) {
+          console.warn('[Constellation] Failed to compute transform matrix; using identity', error);
+          return {
+            rect,
+            inverseMatrix: new MatrixClass()
+          };
+        }
+      }
+
+      clientToStageCoordinates(clientX, clientY) {
+        const container = this.constellationContainer;
+        if (!container) {
+          return { x: clientX, y: clientY };
+        }
+
+        const data = this.nodeDragTransformData || this.computeNodeDragTransformData();
+        if (!data) {
+          return { x: clientX, y: clientY };
+        }
+
+        const { rect, inverseMatrix } = data;
+        const localX = clientX - rect.left;
+        const localY = clientY - rect.top;
+        const pointInit = typeof DOMPoint === 'function'
+          ? new DOMPoint(localX, localY)
+          : { x: localX, y: localY, z: 0, w: 1 };
+
+        const transformed = (inverseMatrix && typeof inverseMatrix.transformPoint === 'function')
+          ? inverseMatrix.transformPoint(pointInit)
+          : pointInit;
+
+        return { x: transformed.x, y: transformed.y };
+      }
+
+      scheduleConstellationLayoutPersist() {
+        if (!this.isConstellationMode) return;
+        if (this.persistLayoutDebounce) {
+          clearTimeout(this.persistLayoutDebounce);
+        }
+        this.persistLayoutDebounce = setTimeout(() => {
+          this.persistLayoutDebounce = null;
+          this.persistConstellationLayout();
+        }, 150);
+      }
+
+      loadSavedConstellationLayout() {
+        if (typeof window === 'undefined' || !window.localStorage) {
+          return null;
+        }
+        try {
+          const raw = window.localStorage.getItem(this.constellationLayoutKey);
+          if (!raw) return null;
+          const parsed = JSON.parse(raw);
+          if (!parsed || typeof parsed !== 'object' || typeof parsed.nodes !== 'object') {
+            return null;
+          }
+          return parsed;
+        } catch (error) {
+          console.warn('🌌 CONSTELLATION: Failed to parse saved layout', error);
+          return null;
+        }
+      }
+
+      applySavedConstellationLayout() {
+        const saved = this.loadSavedConstellationLayout();
+        if (!saved || !saved.nodes || !Array.isArray(this.nodes) || this.nodes.length === 0) {
+          return;
+        }
+
+        const width = Math.max(window.innerWidth || document.documentElement?.clientWidth || 0, 1);
+        const height = Math.max(window.innerHeight || document.documentElement?.clientHeight || 0, 1);
+        const nodeMap = new Map();
+
+        this.nodes.forEach(node => {
+          if (node && node.uid) {
+            nodeMap.set(node.uid, node);
+          }
+        });
+
+        Object.entries(saved.nodes).forEach(([uid, position]) => {
+          const node = nodeMap.get(uid);
+          if (!node || !node.element) return;
+
+          const leftRatio = typeof position.leftRatio === 'number' ? position.leftRatio : null;
+          const topRatio = typeof position.topRatio === 'number' ? position.topRatio : null;
+          if (leftRatio === null || topRatio === null) return;
+
+          const left = leftRatio * width;
+          const top = topRatio * height;
+
+          node.x = left;
+          node.y = top;
+          node.baseX = left;
+          node.baseY = top;
+          node.vx = 0;
+          node.vy = 0;
+
+          node.element.style.left = `${left}px`;
+          node.element.style.top = `${top}px`;
+        });
+
+        const savedViewport = saved.viewport || {};
+        const savedWidth = Number.isFinite(savedViewport.width) && savedViewport.width > 0 ? savedViewport.width : width;
+        const savedHeight = Number.isFinite(savedViewport.height) && savedViewport.height > 0 ? savedViewport.height : height;
+        const widthRatio = savedWidth ? width / savedWidth : 1;
+        const heightRatio = savedHeight ? height / savedHeight : 1;
+
+        let appliedZoom = false;
+        if (saved.zoom) {
+          const { scale, translateX, translateY } = saved.zoom;
+          if (Number.isFinite(scale) && Number.isFinite(translateX) && Number.isFinite(translateY)) {
+            const clampedScale = Math.max(this.zoomState.minScale, Math.min(this.zoomState.maxScale, scale));
+            this.zoomState.scale = clampedScale;
+            this.zoomState.translateX = translateX * widthRatio;
+            this.zoomState.translateY = translateY * heightRatio;
+            appliedZoom = true;
+          }
+        }
+
+        if (appliedZoom) {
+          this.updateConstellationTransform();
+        }
+      }
+
+      persistConstellationLayout() {
+        if (typeof window === 'undefined' || !window.localStorage) {
+          return;
+        }
+        if (!Array.isArray(this.nodes) || this.nodes.length === 0) {
+          return;
+        }
+
+        const width = Math.max(window.innerWidth || document.documentElement?.clientWidth || 0, 1);
+        const height = Math.max(window.innerHeight || document.documentElement?.clientHeight || 0, 1);
+        const nodesPayload = {};
+
+        this.nodes.forEach(node => {
+          if (!node || node.orbBound || !node.uid || !node.element) {
+            return;
+          }
+
+          let left = typeof node.x === 'number' ? node.x : NaN;
+          let top = typeof node.y === 'number' ? node.y : NaN;
+
+          if (!Number.isFinite(left) || !Number.isFinite(top)) {
+            const styleLeft = parseFloat(node.element.style.left);
+            const styleTop = parseFloat(node.element.style.top);
+            if (!Number.isFinite(left) && Number.isFinite(styleLeft)) {
+              left = styleLeft;
+            }
+            if (!Number.isFinite(top) && Number.isFinite(styleTop)) {
+              top = styleTop;
+            }
+          }
+
+          if (!Number.isFinite(left) || !Number.isFinite(top)) {
+            const rect = node.element.getBoundingClientRect();
+            if (!Number.isFinite(left)) {
+              left = rect.left;
+            }
+            if (!Number.isFinite(top)) {
+              top = rect.top;
+            }
+          }
+
+          if (Number.isFinite(left) && Number.isFinite(top)) {
+            nodesPayload[node.uid] = {
+              leftRatio: left / width,
+              topRatio: top / height
+            };
+          }
+        });
+
+        try {
+          const zoomData = {
+            scale: Number.isFinite(this.zoomState?.scale) ? this.zoomState.scale : 1,
+            translateX: Number.isFinite(this.zoomState?.translateX) ? this.zoomState.translateX : 0,
+            translateY: Number.isFinite(this.zoomState?.translateY) ? this.zoomState.translateY : 0
+          };
+
+          window.localStorage.setItem(this.constellationLayoutKey, JSON.stringify({
+            nodes: nodesPayload,
+            viewport: { width, height },
+            zoom: zoomData,
+            savedAt: Date.now()
+          }));
+        } catch (error) {
+          console.warn('🌌 CONSTELLATION: Failed to persist layout', error);
+        }
+      }
+
+      loadSavedConstellationFilters() {
+        if (typeof window === 'undefined' || !window.localStorage) {
+          return null;
+        }
+        try {
+          const raw = window.localStorage.getItem(this.constellationFiltersKey);
+          if (!raw) return null;
+          const parsed = JSON.parse(raw);
+          if (!parsed || typeof parsed !== 'object') return null;
+
+          const allowedKeys = ['memories', 'people', 'family', 'travel', 'recent', 'special'];
+          const sanitized = {};
+
+          allowedKeys.forEach(key => {
+            if (typeof parsed[key] === 'boolean') {
+              sanitized[key] = parsed[key];
+            }
+          });
+
+          return Object.keys(sanitized).length > 0 ? sanitized : null;
+        } catch (error) {
+          console.warn('🌌 CONSTELLATION: Failed to parse saved filters', error);
+          return null;
+        }
+      }
+
+      persistConstellationFilters() {
+        if (typeof window === 'undefined' || !window.localStorage) {
+          return;
+        }
+        if (!this.constellationFilters) {
+          return;
+        }
+        try {
+          window.localStorage.setItem(this.constellationFiltersKey, JSON.stringify(this.constellationFilters));
+        } catch (error) {
+          console.warn('🌌 CONSTELLATION: Failed to persist filters', error);
+        }
+      }
+
+      // 📱 HANDLE TOUCH GESTURES (PINCH TO ZOOM + PAN)
+      handleConstellationTouchMove(e, startTouches, startZoomState) {
+        const currentTouches = Array.from(e.touches);
+
+        if (currentTouches.length === 2 && startTouches.length === 2) {
+          // Pinch to zoom
+          const startDistance = Math.hypot(
+            startTouches[0].clientX - startTouches[1].clientX,
+            startTouches[0].clientY - startTouches[1].clientY
+          );
+          const currentDistance = Math.hypot(
+            currentTouches[0].clientX - currentTouches[1].clientX,
+            currentTouches[0].clientY - currentTouches[1].clientY
+          );
+
+          const scaleChange = currentDistance / startDistance;
+          const newScale = Math.max(this.zoomState.minScale,
+                           Math.min(this.zoomState.maxScale,
+                           startZoomState.scale * scaleChange));
+
+          // Zoom towards pinch center
+          const centerX = (currentTouches[0].clientX + currentTouches[1].clientX) / 2;
+          const centerY = (currentTouches[0].clientY + currentTouches[1].clientY) / 2;
+          
+          const scaleRatio = newScale / this.zoomState.scale;
+          this.zoomState.translateX = centerX - (centerX - this.zoomState.translateX) * scaleRatio;
+          this.zoomState.translateY = centerY - (centerY - this.zoomState.translateY) * scaleRatio;
+          this.zoomState.scale = newScale;
+          
+          this.updateConstellationTransform();
+        } else if (currentTouches.length === 1 && startTouches.length === 1) {
+          // Single finger pan
+          const deltaX = currentTouches[0].clientX - startTouches[0].clientX;
+          const deltaY = currentTouches[0].clientY - startTouches[0].clientY;
+
+          this.zoomState.translateX = startZoomState.translateX + deltaX;
+          this.zoomState.translateY = startZoomState.translateY + deltaY;
+          this.updateConstellationTransform();
+        }
+      }
+
+      // ⌨️ KEYBOARD NAVIGATION for constellation
+      handleConstellationKeyboard(e) {
+        const panStep = 50; // Pixels to pan per key press
+        const zoomStep = 0.05; // 🎯 GENTLE: 5% per key press instead of 10%
+
+        switch(e.key) {
+          case 'ArrowUp':
+            e.preventDefault();
+            this.zoomState.translateY += panStep;
+            this.updateConstellationTransform();
+            break;
+          case 'ArrowDown':
+            e.preventDefault();
+            this.zoomState.translateY -= panStep;
+            this.updateConstellationTransform();
+            break;
+          case 'ArrowLeft':
+            e.preventDefault();
+            this.zoomState.translateX += panStep;
+            this.updateConstellationTransform();
+            break;
+          case 'ArrowRight':
+            e.preventDefault();
+            this.zoomState.translateX -= panStep;
+            this.updateConstellationTransform();
+            break;
+          case '+':
+          case '=':
+            e.preventDefault();
+            this.zoomState.scale = Math.min(this.zoomState.maxScale, this.zoomState.scale * (1 + zoomStep));
+            this.updateConstellationTransform();
+            break;
+          case '-':
+            e.preventDefault();
+            this.zoomState.scale = Math.max(this.zoomState.minScale, this.zoomState.scale * (1 - zoomStep));
+            this.updateConstellationTransform();
+            break;
+          case '0':
+            e.preventDefault();
+            this.fitAllMemories();
+            break;
+        }
+      }
+
+      // 🔍 HANDLE MOUSE WHEEL ZOOM
+      handleConstellationZoom(e) {
+        // 🎯 GENTLE ZOOM: Much less aggressive (3% per scroll instead of 10%)
+        const zoomFactor = e.deltaY > 0 ? 0.97 : 1.03;
+        const newScale = Math.max(this.zoomState.minScale, 
+                         Math.min(this.zoomState.maxScale, 
+                         this.zoomState.scale * zoomFactor));
+
+        // Zoom towards mouse position
+        const mouseX = e.clientX;
+        const mouseY = e.clientY;
+
+        // Calculate offset to zoom towards mouse
+        const scaleRatio = newScale / this.zoomState.scale;
+        this.zoomState.translateX = mouseX - (mouseX - this.zoomState.translateX) * scaleRatio;
+        this.zoomState.translateY = mouseY - (mouseY - this.zoomState.translateY) * scaleRatio;
+        this.zoomState.scale = newScale;
+
+        this.updateConstellationTransform();
+      }
+
+      // 🔍 UPDATE CONSTELLATION TRANSFORM
+      updateConstellationTransform() {
+        const scale = Number.isFinite(this.zoomState.scale) ? this.zoomState.scale : 1;
+        const translateX = Number.isFinite(this.zoomState.translateX) ? this.zoomState.translateX : 0;
+        const translateY = Number.isFinite(this.zoomState.translateY) ? this.zoomState.translateY : 0;
+        const transform = `matrix(${scale}, 0, 0, ${scale}, ${translateX}, ${translateY})`;
+        
+        // Apply transform to constellation container (memory nodes)
+        if (this.constellationContainer) {
+          this.constellationContainer.style.transformOrigin = '0 0';
+          this.constellationContainer.style.transform = transform;
+        }
+        
+        // 💥 CRITICAL FIX: Apply same transform to neural canvas (connections)
+        // This ensures connections stay anchored to nodes when zooming/panning
+        if (this.neuralCanvas) {
+          this.neuralCanvas.style.transform = transform;
+          this.neuralCanvas.style.transformOrigin = '0 0';
+        }
+        
+        if (this.isConstellationMode) {
+          this.scheduleConstellationLayoutPersist();
+        }
+
+        console.log('🔗 TRANSFORM: Applied zoom/pan to both nodes and connections');
+      }
+
+      // 🔍 ADD ELEGANT EMMA-BRANDED ZOOM CONTROLS
+      addConstellationZoomControls() {
+        // Remove any existing zoom controls
+        const existingControls = document.getElementById('constellation-zoom-controls');
+        if (existingControls) {
+          existingControls.remove();
+        }
+
+        // Create Emma-branded zoom controls container
+        const zoomControls = document.createElement('div');
+        zoomControls.id = 'constellation-zoom-controls';
+        zoomControls.style.cssText = `
+          position: fixed;
+          bottom: 40px;
+          right: 40px;
+          display: flex;
+          flex-direction: column;
+          gap: 12px;
+          z-index: 9999;
+          opacity: 1;
+          transition: all 0.3s ease;
+        `;
+
+        // Emma-branded button base style
+        const buttonBaseStyle = `
+          width: 56px;
+          height: 56px;
+          border-radius: 50%;
+          border: 1px solid rgba(255, 255, 255, 0.15);
+          background: linear-gradient(135deg, 
+            rgba(111, 99, 217, 0.9) 0%, 
+            rgba(124, 58, 237, 0.8) 50%,
+            rgba(109, 40, 217, 0.9) 100%
+          );
+          backdrop-filter: blur(20px) saturate(150%);
+          color: white;
+          font-size: 18px;
+          cursor: pointer;
+          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+          box-shadow: 
+            0 6px 22px rgba(111, 99, 217, 0.28),
+            0 0 0 1px rgba(255, 255, 255, 0.05),
+            inset 0 1px 0 rgba(255, 255, 255, 0.1);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+          font-weight: 500;
+          position: relative;
+          overflow: hidden;
+        `;
+
+        // Zoom in button
+        const zoomInBtn = document.createElement('button');
+        zoomInBtn.innerHTML = '+';
+        zoomInBtn.title = 'Zoom In to Explore';
+        zoomInBtn.style.cssText = buttonBaseStyle;
+        
+        zoomInBtn.addEventListener('click', () => {
+          const centerX = window.innerWidth / 2;
+          const centerY = window.innerHeight / 2;
+          // 🎯 GENTLE: 15% per button click instead of 30%
+          const newScale = Math.min(this.zoomState.maxScale, this.zoomState.scale * 1.15);
+          
+          // Zoom towards center for smooth experience
+          const scaleRatio = newScale / this.zoomState.scale;
+          this.zoomState.translateX = centerX - (centerX - this.zoomState.translateX) * scaleRatio;
+          this.zoomState.translateY = centerY - (centerY - this.zoomState.translateY) * scaleRatio;
+          this.zoomState.scale = newScale;
+          
+          this.updateConstellationTransform();
+        });
+
+        // Zoom out button
+        const zoomOutBtn = document.createElement('button');
+        zoomOutBtn.innerHTML = '−';
+        zoomOutBtn.title = 'Zoom Out to See More';
+        zoomOutBtn.style.cssText = buttonBaseStyle;
+        
+        zoomOutBtn.addEventListener('click', () => {
+          const centerX = window.innerWidth / 2;
+          const centerY = window.innerHeight / 2;
+          // 🎯 GENTLE: 15% per button click instead of 30%
+          const newScale = Math.max(this.zoomState.minScale, this.zoomState.scale / 1.15);
+          
+          // Zoom from center for smooth experience
+          const scaleRatio = newScale / this.zoomState.scale;
+          this.zoomState.translateX = centerX - (centerX - this.zoomState.translateX) * scaleRatio;
+          this.zoomState.translateY = centerY - (centerY - this.zoomState.translateY) * scaleRatio;
+          this.zoomState.scale = newScale;
+          
+          this.updateConstellationTransform();
+        });
+
+        // Fit all button - special Emma green
+        const resetBtn = document.createElement('button');
+        resetBtn.innerHTML = '⌂';
+        resetBtn.title = 'Show All Memories';
+        resetBtn.style.cssText = buttonBaseStyle.replace(
+          'rgba(111, 99, 217, 0.9) 0%, rgba(124, 58, 237, 0.8) 50%, rgba(109, 40, 217, 0.9) 100%',
+          'rgba(16, 185, 129, 0.9) 0%, rgba(5, 150, 105, 0.8) 50%, rgba(4, 120, 87, 0.9) 100%'
+        ).replace(
+          'rgba(111, 99, 217, 0.28)',
+          'rgba(16, 185, 129, 0.28)'
+        );
+        
+        resetBtn.addEventListener('click', () => {
+          this.fitAllMemories();
+        });
+
+        // Add elegant hover effects
+        [zoomInBtn, zoomOutBtn, resetBtn].forEach(btn => {
+          btn.addEventListener('mouseenter', () => {
+            btn.style.transform = 'scale(1.05) translateY(-2px)';
+            btn.style.boxShadow = `
+              0 10px 28px rgba(111, 99, 217, 0.32),
+              0 0 0 1px rgba(255, 255, 255, 0.1),
+              inset 0 1px 0 rgba(255, 255, 255, 0.2)
+            `;
+          });
+          
+          btn.addEventListener('mouseleave', () => {
+            btn.style.transform = 'scale(1) translateY(0)';
+            btn.style.boxShadow = `
+              0 6px 22px rgba(111, 99, 217, 0.28),
+              0 0 0 1px rgba(255, 255, 255, 0.05),
+              inset 0 1px 0 rgba(255, 255, 255, 0.1)
+            `;
+          });
+
+          // Add subtle click effect
+          btn.addEventListener('mousedown', () => {
+            btn.style.transform = 'scale(0.95)';
+          });
+          
+          btn.addEventListener('mouseup', () => {
+            btn.style.transform = 'scale(1.05) translateY(-2px)';
+          });
+        });
+
+        zoomControls.appendChild(zoomInBtn);
+        zoomControls.appendChild(zoomOutBtn);
+        zoomControls.appendChild(resetBtn);
+        document.body.appendChild(zoomControls);
+
+        // 🧭 ADD NAVIGATION ARROWS for easy panning
+        this.addConstellationPanControls();
+
+        console.log('🎨 ZOOM: Added elegant Emma-branded zoom controls');
+      }
+
+      // 🧭 ADD DEMENTIA-FRIENDLY PAN CONTROLS
+      addConstellationPanControls() {
+        // Remove any existing pan controls
+        const existingPanControls = document.getElementById('constellation-pan-controls');
+        if (existingPanControls) {
+          existingPanControls.remove();
+        }
+
+        // Create navigation controls container
+        const panControls = document.createElement('div');
+        panControls.id = 'constellation-pan-controls';
+        panControls.style.cssText = `
+          position: fixed;
+          bottom: 40px;
+          left: 40px;
+          display: grid;
+          grid-template-columns: 1fr 1fr 1fr;
+          grid-template-rows: 1fr 1fr 1fr;
+          gap: 8px;
+          z-index: 9999;
+          opacity: 1;
+          transition: all 0.3s ease;
+          width: 144px;
+          height: 144px;
+        `;
+
+        // Emma-branded button style for arrows
+        const arrowButtonStyle = `
+          width: 44px;
+          height: 44px;
+          border-radius: 50%;
+          border: 1px solid rgba(255, 255, 255, 0.15);
+          background: linear-gradient(135deg, 
+            rgba(111, 99, 217, 0.85) 0%, 
+            rgba(124, 58, 237, 0.75) 50%,
+            rgba(109, 40, 217, 0.85) 100%
+          );
+          backdrop-filter: blur(20px) saturate(150%);
+          color: white;
+          font-size: 16px;
+          cursor: pointer;
+          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+          box-shadow: 
+            0 6px 24px rgba(111, 99, 217, 0.25),
+            0 0 0 1px rgba(255, 255, 255, 0.05),
+            inset 0 1px 0 rgba(255, 255, 255, 0.1);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+          font-weight: 600;
+        `;
+
+        const panStep = 100; // Distance to pan in pixels
+
+        // Create directional buttons in a 3x3 grid pattern
+        const directions = [
+          { pos: [0, 1], arrow: '↑', title: 'Pan Up', dx: 0, dy: panStep },
+          { pos: [1, 0], arrow: '←', title: 'Pan Left', dx: panStep, dy: 0 },
+          { pos: [1, 1], arrow: '⊕', title: 'Center View', dx: 0, dy: 0, special: 'center' },
+          { pos: [1, 2], arrow: '→', title: 'Pan Right', dx: -panStep, dy: 0 },
+          { pos: [2, 1], arrow: '↓', title: 'Pan Down', dx: 0, dy: -panStep }
+        ];
+
+        directions.forEach(({ pos, arrow, title, dx, dy, special }) => {
+          const button = document.createElement('button');
+          button.innerHTML = arrow;
+          button.title = title;
+          button.style.cssText = arrowButtonStyle;
+          button.style.gridColumn = pos[1] + 1;
+          button.style.gridRow = pos[0] + 1;
+
+          // Special styling for center button
+          if (special === 'center') {
+            button.style.background = `linear-gradient(135deg, 
+              rgba(16, 185, 129, 0.85) 0%, 
+              rgba(5, 150, 105, 0.75) 50%,
+              rgba(4, 120, 87, 0.85) 100%
+            )`;
+            button.style.boxShadow = `
+              0 6px 24px rgba(16, 185, 129, 0.25),
+              0 0 0 1px rgba(255, 255, 255, 0.05),
+              inset 0 1px 0 rgba(255, 255, 255, 0.1)
+            `;
+          }
+
+          button.addEventListener('click', () => {
+            if (special === 'center') {
+              // Center the view (reset translation)
+              this.zoomState.translateX = 0;
+              this.zoomState.translateY = 0;
+            } else {
+              // Pan in the specified direction
+              this.zoomState.translateX += dx;
+              this.zoomState.translateY += dy;
+            }
+            this.updateConstellationTransform();
+          });
+
+          // Add hover effects
+          button.addEventListener('mouseenter', () => {
+            button.style.transform = 'scale(1.05)';
+            if (special === 'center') {
+              button.style.boxShadow = `
+                0 8px 32px rgba(16, 185, 129, 0.4),
+                0 0 0 1px rgba(255, 255, 255, 0.1),
+                inset 0 1px 0 rgba(255, 255, 255, 0.2)
+              `;
+            } else {
+              button.style.boxShadow = `
+                0 8px 32px rgba(111, 99, 217, 0.4),
+                0 0 0 1px rgba(255, 255, 255, 0.1),
+                inset 0 1px 0 rgba(255, 255, 255, 0.2)
+              `;
+            }
+          });
+
+          button.addEventListener('mouseleave', () => {
+            button.style.transform = 'scale(1)';
+            if (special === 'center') {
+              button.style.boxShadow = `
+                0 6px 24px rgba(16, 185, 129, 0.25),
+                0 0 0 1px rgba(255, 255, 255, 0.05),
+                inset 0 1px 0 rgba(255, 255, 255, 0.1)
+              `;
+            } else {
+              button.style.boxShadow = `
+                0 6px 24px rgba(111, 99, 217, 0.25),
+                0 0 0 1px rgba(255, 255, 255, 0.05),
+                inset 0 1px 0 rgba(255, 255, 255, 0.1)
+              `;
+            }
+          });
+
+          // Add click effect
+          button.addEventListener('mousedown', () => {
+            button.style.transform = 'scale(0.95)';
+          });
+
+          button.addEventListener('mouseup', () => {
+            button.style.transform = 'scale(1.05)';
+          });
+
+          panControls.appendChild(button);
+        });
+
+        document.body.appendChild(panControls);
+
+        console.log('🧭 PAN: Added dementia-friendly navigation controls');
+      }
+
+      // 🔍 FIT ALL MEMORIES IN VIEW
+      fitAllMemories() {
+        if (!this.nodes || this.nodes.length === 0) {
+          // Reset to center if no nodes
+          this.zoomState.scale = 1;
+          this.zoomState.translateX = 0;
+          this.zoomState.translateY = 0;
+          this.updateConstellationTransform();
+          return;
+        }
+
+        // Find bounding box of all nodes
+        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+        
+        this.nodes.forEach(node => {
+          if (node.x !== undefined && node.y !== undefined) {
+            minX = Math.min(minX, node.x - 50); // Add padding
+            minY = Math.min(minY, node.y - 50);
+            maxX = Math.max(maxX, node.x + 50);
+            maxY = Math.max(maxY, node.y + 50);
+          }
+        });
+
+        if (minX === Infinity) {
+          // No valid positions, just center
+          this.zoomState.scale = 1;
+          this.zoomState.translateX = 0;
+          this.zoomState.translateY = 0;
+          this.updateConstellationTransform();
+          return;
+        }
+
+        // Calculate optimal scale and position
+        const contentWidth = maxX - minX;
+        const contentHeight = maxY - minY;
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+
+        const scaleX = (viewportWidth * 0.8) / contentWidth;
+        const scaleY = (viewportHeight * 0.8) / contentHeight;
+        const optimalScale = Math.min(scaleX, scaleY, this.zoomState.maxScale);
+        const finalScale = Math.max(optimalScale, this.zoomState.minScale);
+
+        // Center the content
+        const contentCenterX = (minX + maxX) / 2;
+        const contentCenterY = (minY + maxY) / 2;
+        
+        this.zoomState.scale = finalScale;
+        this.zoomState.translateX = viewportWidth / 2 - contentCenterX * finalScale;
+        this.zoomState.translateY = viewportHeight / 2 - contentCenterY * finalScale;
+
+        this.updateConstellationTransform();
+        
+        console.log('🏠 ZOOM: Fitted all memories in view for Debbe');
+      }
+
+      // Removed fadeOutMemoryNodes and fadeInMemoryNodes - no longer needed since constellation mode exits to main dashboard
+
+      // Completely clear all memory nodes from DOM (prevents duplicates)
+      clearAllMemoryNodesFromDOM() {
+
+        // Remove all memory-node, person-node, and create-memory-node elements (including orphaned ones)
+        const existingMemoryNodes = document.querySelectorAll('.memory-node, .create-memory-node, .person-node');
+        existingMemoryNodes.forEach(node => {
+
+          node.remove();
+        });
+
+        // Clear ONLY memory nodes from the nodes array (preserve radial menu items)
+        if (this.nodes) {
+          this.nodes.forEach(node => {
+            if (node.element && node.element.parentNode) {
+              // Only remove if it's a constellation node, NOT a radial menu item
+              if (node.element.classList.contains('memory-node') ||
+                  node.element.classList.contains('create-memory-node') ||
+                  node.element.classList.contains('person-node')) {
+
+                node.element.remove();
+              } else {
+
+              }
+            }
+          });
+          // Filter out only the constellation nodes, keep radial items
+          this.nodes = this.nodes.filter(node =>
+            !node.element.classList.contains('memory-node') &&
+            !node.element.classList.contains('create-memory-node') &&
+            !node.element.classList.contains('person-node')
+          );
+        }
+
+        // Reset central node
+        this.centralNode = null;
+        this.createMemoryElement = null;
+
+      }
+
+      // Exit constellation mode
+      exitMemoryConstellation() {
+        document.body.classList.add('dashboard-minimal');
+        console.log('🌌 exitMemoryConstellation called - Current state:', {
+          isConstellationMode: this.isConstellationMode,
+          isMenuOpen: this.isMenuOpen,
+          orbExists: !!this.orb,
+          radialMenuExists: !!this.radialMenu
+        });
+
+        this.isConstellationMode = false;
+
+        // PERSISTENCE: Clear constellation state
+        localStorage.removeItem('emmaConstellationActive');
+
+        // Stop neural animation (EXACT same as main menu)
+        this.isMenuOpen = false;
+        if (this.neuralAnimationId) {
+          cancelAnimationFrame(this.neuralAnimationId);
+          this.neuralCtx.clearRect(0, 0, this.neuralCanvas.width, this.neuralCanvas.height);
+        }
+
+        // 🔍 RESET ZOOM STATE: Reset neural canvas transform and clean up
+        if (this.neuralCanvas) {
+          this.neuralCanvas.style.transform = '';
+          this.neuralCanvas.style.transformOrigin = '';
+        }
+        
+        // Remove constellation container  
+        const constellationContainer = document.getElementById('constellation-zoom-container');
+        if (constellationContainer) {
+          constellationContainer.remove();
+        }
+        
+        // Reset zoom state
+        this.zoomState.scale = 1;
+        this.zoomState.translateX = 0;
+        this.zoomState.translateY = 0;
+        this.constellationContainer = null;
+
+        // Remove constellation-active class to restore UI
+        document.body.classList.remove('constellation-active');
+        document.body.classList.remove('menu-active');
+        this.radialMenu.classList.remove('active');
+
+        // Restore central orb size
+        this.restoreCentralOrb();
+
+        // Remove constellation UI
+        if (this.constellationUI) {
+          this.constellationUI.remove();
+          this.constellationUI = null;
+        }
+
+        // CRITICAL: Use thorough DOM cleanup to prevent duplicates
+        this.clearAllMemoryNodesFromDOM();
+
+        // Clear animation
+        if (this.neuralAnimationId) {
+          cancelAnimationFrame(this.neuralAnimationId);
+          this.neuralCtx.clearRect(0, 0, this.neuralCanvas.width, this.neuralCanvas.height);
+        }
+
+        // Reset nodes
+        this.nodes = [];
+
+        // Hide radial menu
+        this.radialMenu.classList.remove('active');
+        this.isMenuOpen = false;
+
+        // Reset radial menu items to default state
+        const radialItems = this.radialMenu.querySelectorAll('.radial-item');
+
+        radialItems.forEach((item, i) => {
+          item.style.opacity = '0';
+          item.style.transform = 'scale(0)';
+          // CRITICAL: Reset positioning to default
+          item.style.left = '';
+          item.style.top = '';
+          item.style.animationPlayState = 'running';
+        });
+        
+        console.log('🌌 exitMemoryConstellation complete - Final state:', {
+          isConstellationMode: this.isConstellationMode,
+          isMenuOpen: this.isMenuOpen,
+          radialMenuClasses: this.radialMenu?.className,
+          bodyClasses: document.body.className
+        });
+      }
+
+      // Sanitize title to remove base64 or corrupted data
+      sanitizeTitle(title) {
+        if (!title || typeof title !== 'string') return 'Untitled Memory';
+
+        // Check if it looks like base64 or corrupted data
+        if (title.length > 50 || /^[A-Za-z0-9+\/=]{20,}$/.test(title)) {
+          return 'Memory Capsule';
+        }
+
+        // Remove any non-printable characters and limit length
+        const cleaned = title.replace(/[^\x20-\x7E]/g, '').trim();
+        return cleaned.length > 0 ? cleaned.substring(0, 50) : 'Untitled Memory';
+      }
+
+      // 📱💻🖥️ RESPONSIVE MEMORY DIALOG - Works on ALL screen sizes!
+      async openMemoryDialog(memory) {
+        console.log('🎯 DASHBOARD: Opening responsive memory dialog for:', memory.title || memory.id);
+        
+        // 🚀 CRITICAL FIX: Load full media if lazy-loaded (from performance optimization)
+        const memoryWithFullMedia = await this.loadFullMediaForMemory(memory);
+        
+        // 📱💻🖥️ USE THE NEW RESPONSIVE MEMORY DIALOG!
+        this.showResponsiveMemoryDialog(memoryWithFullMedia);
+      }
+
+      /**
+       * 🚀 PERFORMANCE OPTIMIZATION: Load full media data on-demand for lazy-loaded attachments
+       * (Reused from memories.js constellation)
+       */
+      async loadFullMediaForMemory(memory) {
+        // Check if this memory has lazy-loaded attachments that need full loading
+        const hasLazyAttachments = memory.attachments?.some(att => att.isLazyLoaded && att.hasMedia);
+        
+        if (!hasLazyAttachments) {
+          console.log('💾 DASHBOARD: Memory already has full media, no loading needed');
+          return memory;
+        }
+        
+        console.log('🚀 DASHBOARD: Loading full media for', memory.attachments?.length || 0, 'attachments');
+        
+        try {
+          // Get vault media data
+          const vaultMedia = window.emmaWebVault?.vaultData?.content?.media || {};
+          
+          // Load full media data for lazy-loaded attachments
+          const fullAttachments = memory.attachments.map(attachment => {
+            if (attachment.isLazyLoaded && attachment.hasMedia && attachment.mediaId) {
+              const mediaItem = vaultMedia[attachment.mediaId];
+              if (mediaItem && mediaItem.data) {
+                console.log('💾 DASHBOARD: Loading full media for:', attachment.name);
+                return {
+                  ...attachment,
+                  url: mediaItem.data.startsWith('data:')
+                    ? mediaItem.data
+                    : `data:${mediaItem.type};base64,${mediaItem.data}`,
+                  dataUrl: mediaItem.data.startsWith('data:')
+                    ? mediaItem.data
+                    : `data:${mediaItem.type};base64,${mediaItem.data}`,
+                  data: mediaItem.data,
+                  isLazyLoaded: false, // Mark as fully loaded
+                  isPersisted: true
+                };
+              }
+            }
+            
+            // Return attachment as-is if already loaded or no media
+            return attachment;
+          });
+          
+          console.log('✅ DASHBOARD: Successfully loaded full media data');
+          
+          return {
+            ...memory,
+            attachments: fullAttachments
+          };
+          
+        } catch (error) {
+          console.error('❌ DASHBOARD: Failed to load full media:', error);
+          // Return original memory if loading fails
+          return memory;
+        }
+      }
+
+      /**
+       * 📱💻🖥️ RESPONSIVE MEMORY DIALOG - Works on ALL screen sizes!
+       */
+      showResponsiveMemoryDialog(memory) {
+        // Prepare memory data  
+        const hasImages = memory.attachments?.some(att => att.type?.startsWith('image/')) || 
+                         memory.mediaItems?.some(item => item.type?.startsWith('image/'));
+        const hasVideo = memory.attachments?.some(att => att.type?.startsWith('video/')) || 
+                        memory.mediaItems?.some(item => item.type?.startsWith('video/'));
+        const peopleList = memory.metadata?.people || memory.people || [];
+        
+        // Create fully responsive dialog for ALL screen sizes
+        const dialog = document.createElement('div');
+        dialog.className = 'memory-preview-dialog responsive dashboard';
+        dialog.style.cssText = `
+          position: fixed !important;
+          top: 0 !important;
+          left: 0 !important;
+          width: 100% !important;
+          height: 100% !important;
+          z-index: 10000 !important;
+          display: flex !important;
+          align-items: flex-start !important;
+          justify-content: center !important;
+          opacity: 0;
+          animation: dialogFadeIn 0.3s ease forwards;
+          background: rgba(0, 0, 0, 0.6) !important;
+          backdrop-filter: blur(25px) saturate(180%) !important;
+          padding: 20px;
+          overflow-y: auto !important;
+          box-sizing: border-box;
+          pointer-events: auto !important;
+        `;
+
+        dialog.innerHTML = `
+          <style>
+            /* 🎯 RESPONSIVE DIALOG STYLES FOR ALL SCREEN SIZES */
+            @keyframes dialogFadeIn {
+              from { opacity: 0; transform: scale(0.95); }
+              to { opacity: 1; transform: scale(1); }
+            }
+            
+            .responsive-memory-container {
+              /* 🎨 EMMA GLASSMORPHISM: Match chat interface aesthetic */
+              background: rgba(26, 16, 51, 0.92);
+              backdrop-filter: blur(25px) saturate(150%);
+              border-radius: clamp(16px, 3vw, 24px);
+              max-width: 95vw;
+              max-height: 95vh;
+              width: 100%;
+              overflow-y: auto;
+              position: relative;
+              animation: dialogFadeIn 0.3s ease forwards;
+              border: 1px solid rgba(255, 255, 255, 0.12);
+              box-shadow: 
+                0 25px 80px rgba(0, 0, 0, 0.4),
+                0 0 0 1px rgba(255, 255, 255, 0.08),
+                inset 0 1px 0 rgba(255, 255, 255, 0.12);
+            }
+            
+            /* 📱 MOBILE FIRST (320px+) */
+            .responsive-memory-container {
+              margin: 10px;
+              padding: 20px;
+            }
+            
+            /* 📱 TABLET (768px+) */
+            @media (min-width: 768px) {
+              .responsive-memory-container {
+                margin: 20px;
+                padding: 30px;
+                max-width: 700px;
+              }
+            }
+            
+            /* 💻 LAPTOP (1024px+) */
+            @media (min-width: 1024px) {
+              .responsive-memory-container {
+                margin: 40px;
+                padding: 40px;
+                max-width: 900px;
+              }
+            }
+            
+            /* 🖥️ DESKTOP (1440px+) */
+            @media (min-width: 1440px) {
+              .responsive-memory-container {
+                max-width: 1100px;
+                padding: 50px;
+              }
+            }
+            
+            /* HEADER STYLES */
+            .memory-header {
+              display: flex;
+              justify-content: space-between;
+              align-items: flex-start;
+              margin-bottom: clamp(20px, 4vw, 30px);
+              flex-wrap: wrap;
+              gap: 15px;
+            }
+            
+            .header-info h2 {
+              margin: 0;
+              color: white;
+              font-size: clamp(20px, 4vw, 28px);
+              font-weight: 700;
+              line-height: 1.2;
+              text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+            }
+            
+            .memory-date {
+              color: rgba(255, 255, 255, 0.8);
+              font-size: clamp(14px, 2.5vw, 16px);
+              margin-top: 5px;
+            }
+            
+            .close-btn {
+              background: rgba(255, 255, 255, 0.15);
+              border: none;
+              color: white;
+              width: clamp(40px, 6vw, 48px);
+              height: clamp(40px, 6vw, 48px);
+              border-radius: 50%;
+              cursor: pointer;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+              transition: all 0.3s ease;
+              backdrop-filter: blur(10px);
+              flex-shrink: 0;
+            }
+            
+            .close-btn:hover {
+              background: rgba(255, 255, 255, 0.25);
+              transform: scale(1.1);
+            }
+            
+            /* HERO CAROUSEL STYLES */
+            .hero-carousel {
+              margin-bottom: clamp(25px, 5vw, 35px);
+              border-radius: clamp(12px, 2.5vw, 16px);
+            overflow: hidden;
+            position: relative;
+              aspect-ratio: 16/9;
+              background: rgba(0, 0, 0, 0.3);
+            }
+            
+            .carousel-container {
+              position: relative;
+              width: 100%;
+              height: 100%;
+            }
+            
+            .hero-image {
+                position: absolute;
+                top: 0;
+                left: 0;
+              width: 100%;
+              height: 100%;
+              background-size: cover;
+              background-position: center;
+              opacity: 0;
+              transition: opacity 0.5s ease;
+            }
+            
+            .hero-image.active {
+              opacity: 1;
+            }
+            
+            .image-overlay {
+              position: absolute;
+                bottom: 0;
+              left: 0;
+              right: 0;
+              height: 50%;
+              background: linear-gradient(transparent, rgba(0, 0, 0, 0.4));
+            }
+            
+            .carousel-dots {
+              position: absolute;
+              bottom: 15px;
+              left: 50%;
+              transform: translateX(-50%);
+                    display: flex;
+              gap: 8px;
+            }
+            
+            .dot {
+              width: 10px;
+              height: 10px;
+              border-radius: 50%;
+              background: rgba(255, 255, 255, 0.5);
+              cursor: pointer;
+              transition: all 0.3s ease;
+            }
+            
+            .dot.active {
+              background: white;
+              transform: scale(1.2);
+            }
+            
+            /* PEOPLE SECTION */
+            .people-section {
+              margin-bottom: clamp(25px, 5vw, 35px);
+            }
+            
+            .section-title {
+              color: white;
+              font-size: clamp(16px, 3vw, 20px);
+              font-weight: 600;
+              margin: 0 0 clamp(15px, 3vw, 20px) 0;
+              text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+            }
+            
+            .people-grid {
+              display: grid;
+              grid-template-columns: repeat(auto-fill, minmax(clamp(80px, 15vw, 120px), 1fr));
+              gap: clamp(12px, 3vw, 20px);
+              justify-items: center;
+            }
+            
+            .memory-person-avatar {
+              width: clamp(70px, 12vw, 100px);
+              height: clamp(70px, 12vw, 100px);
+                                border-radius: 50%;
+              border: 3px solid rgba(255, 255, 255, 0.9);
+                                overflow: hidden;
+              position: relative;
+              background: linear-gradient(135deg, #6f63d9 0%, #d06fa8 100%);
+                            display: flex;
+                            flex-direction: column;
+                              align-items: center;
+                              justify-content: center;
+              font-size: clamp(12px, 2.5vw, 16px);
+                              font-weight: 600;
+              color: white;
+                    transition: all 0.3s ease;
+              cursor: pointer;
+              text-align: center;
+              box-shadow: 0 4px 12px rgba(111, 99, 217, 0.3);
+            }
+            
+            .memory-person-avatar:hover {
+              transform: scale(1.05);
+              border-color: white;
+              box-shadow: 0 6px 20px rgba(111, 99, 217, 0.5);
+            }
+            
+            .memory-person-avatar img {
+              width: 100%;
+              height: 100%;
+              object-fit: cover;
+            }
+            
+            /* CONTENT SECTION */
+            .content-section {
+              margin-bottom: clamp(25px, 5vw, 35px);
+            }
+            
+            .memory-story p {
+              color: white;
+              font-size: clamp(16px, 3vw, 18px);
+                line-height: 1.6;
+              margin: 0 0 clamp(15px, 3vw, 20px) 0;
+              text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+            }
+            
+            .memory-tags {
+                      display: flex;
+                      align-items: center;
+              gap: clamp(10px, 2vw, 15px);
+              margin-bottom: clamp(10px, 2vw, 15px);
+              flex-wrap: wrap;
+            }
+            
+            .tag-label {
+              font-size: clamp(16px, 3vw, 18px);
+              flex-shrink: 0;
+            }
+            
+            .emotions-list {
+                    display: flex;
+              gap: clamp(6px, 1.5vw, 10px);
+              flex-wrap: wrap;
+            }
+            
+            .emotion-tag, .location-tag {
+              background: rgba(255, 255, 255, 0.15);
+              color: white;
+              padding: clamp(4px, 1vw, 6px) clamp(8px, 2vw, 12px);
+              border-radius: clamp(12px, 2vw, 16px);
+              font-size: clamp(12px, 2.5vw, 14px);
+                      font-weight: 500;
+              border: 1px solid rgba(255, 255, 255, 0.2);
+              backdrop-filter: blur(10px);
+            }
+            
+            /* MEDIA SECTION */
+            .media-section {
+              margin-bottom: clamp(25px, 5vw, 35px);
+            }
+            
+            .media-grid {
+                    display: grid;
+              grid-template-columns: repeat(auto-fill, minmax(clamp(120px, 25vw, 200px), 1fr));
+              gap: clamp(10px, 2vw, 15px);
+            }
+            
+            .media-item {
+              aspect-ratio: 1;
+              border-radius: clamp(8px, 2vw, 12px);
+                          overflow: hidden;
+              background: rgba(255, 255, 255, 0.1);
+                          position: relative;
+              transition: transform 0.3s ease;
+            }
+            
+            .media-item:hover {
+              transform: scale(1.05);
+            }
+            
+            .media-item img, .media-item video {
+                              width: 100%;
+                              height: 100%;
+              object-fit: cover;
+            }
+            
+            .video-play-overlay {
+                                position: absolute;
+              top: 50%;
+              left: 50%;
+              transform: translate(-50%, -50%);
+              font-size: clamp(20px, 4vw, 30px);
+              color: white;
+              text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+            }
+            
+            /* ACTION BUTTONS */
+            .action-buttons {
+              display: flex;
+              gap: clamp(12px, 3vw, 20px);
+              margin-top: clamp(30px, 5vw, 40px);
+              flex-wrap: wrap;
+            }
+            
+            .action-btn {
+              flex: 1;
+              min-width: clamp(120px, 25vw, 150px);
+              padding: clamp(12px, 2.5vw, 16px) clamp(20px, 4vw, 30px);
+              border: none;
+              border-radius: clamp(10px, 2vw, 14px);
+              font-size: clamp(14px, 2.5vw, 16px);
+              font-weight: 600;
+              cursor: pointer;
+              transition: all 0.3s ease;
+                                display: flex;
+                                align-items: center;
+                                justify-content: center;
+              gap: clamp(6px, 1.5vw, 8px);
+              text-decoration: none;
+              box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+            }
+            
+            .action-btn.primary {
+              background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
+              color: #6f63d9;
+              border: 2px solid rgba(255, 255, 255, 0.3);
+            }
+            
+            .action-btn.primary:hover {
+              transform: translateY(-2px);
+              box-shadow: 0 6px 20px rgba(255, 255, 255, 0.3);
+            }
+            
+            .action-btn.secondary {
+              background: rgba(255, 255, 255, 0.15);
+              color: white;
+              border: 2px solid rgba(255, 255, 255, 0.3);
+                                  backdrop-filter: blur(10px);
+            }
+            
+            .action-btn.secondary:hover {
+              background: rgba(255, 255, 255, 0.25);
+              transform: translateY(-2px);
+            }
+          </style>
+          
+          <div class="responsive-memory-container">
+            <!-- HEADER -->
+            <div class="memory-header">
+              <div class="header-info">
+                <h2>${memory.metadata?.title || memory.title || memory.subject || 'Beautiful Memory'}</h2>
+                <div class="memory-date">${this.formatMemoryDate(memory.created || memory.date || memory.timestamp)}</div>
+              </div>
+              <button class="close-btn" onclick="window.emmaDashboard.closeMemoryDialog()">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                  <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                </svg>
+              </button>
+                              </div>
+
+            <!-- HERO CAROUSEL -->
+            ${hasImages ? `
+              <div class="hero-carousel">
+                <div class="carousel-container">
+                  ${(memory.attachments || memory.mediaItems || [])
+                    .filter(att => att.type?.startsWith('image/'))
+                    .slice(0, 5)
+                    .map((image, index) => {
+                      const imageUrl = image.url || image.dataUrl || image.data || image.previewUrl;
+                      
+                      // 🔧 FIX: Use img tag instead of background-image for better compatibility
+                      return `
+                        <div class="hero-image ${index === 0 ? 'active' : ''}">
+                          <img src="${imageUrl}" alt="${image.name || 'Memory image'}" style="
+                            width: 100%;
+                            height: 100%;
+                            object-fit: cover;
+                            border-radius: 12px;
+                          " />
+                          <div class="image-overlay"></div>
+                        </div>
+                      `;
+                    }).join('')}
+                </div>
+                ${(memory.attachments || memory.mediaItems || []).filter(att => att.type?.startsWith('image/')).length > 1 ? `
+                  <div class="carousel-dots">
+                    ${(memory.attachments || memory.mediaItems || [])
+                      .filter(att => att.type?.startsWith('image/'))
+                      .slice(0, 5)
+                      .map((_, index) => `
+                        <div class="dot ${index === 0 ? 'active' : ''}" onclick="window.emmaDashboard.switchDashboardCarouselImage(${index})"></div>
+                      `).join('')}
+                        </div>
+                ` : ''}
+              </div>
+            ` : ''}
+            
+            <!-- PEOPLE SECTION -->
+            ${peopleList.length > 0 ? `
+              <div class="people-section">
+                <h3 class="section-title">👥 People in this memory</h3>
+                <div class="people-grid" id="people-grid-${memory.id}">
+                  <!-- People avatars will be loaded here -->
+                  </div>
+                </div>
+              ` : ''}
+
+            <!-- CONTENT -->
+            <div class="content-section">
+              <div class="memory-story">
+                <p>${memory.content || memory.description || memory.details || 'This precious memory is stored in your vault...'}</p>
+            </div>
+
+              ${memory.metadata?.emotions?.length > 0 ? `
+                <div class="memory-tags">
+                  <span class="tag-label">💭</span>
+                  <div class="emotions-list">
+                    ${memory.metadata.emotions.map(emotion => `
+                      <span class="emotion-tag">${emotion}</span>
+                    `).join('')}
+                  </div>
+                </div>
+              ` : ''}
+
+              ${memory.metadata?.location || memory.location ? `
+                <div class="memory-tags">
+                  <span class="tag-label">📍</span>
+                  <span class="location-tag">${memory.metadata?.location || memory.location}</span>
+                </div>
+              ` : ''}
+            </div>
+
+            <!-- MEDIA GRID -->
+            ${(memory.attachments?.length > 1 || memory.mediaItems?.length > 1) || hasVideo ? `
+              <div class="media-section">
+                <h3 class="section-title">📷 All Media (${(memory.attachments || memory.mediaItems || []).length})</h3>
+                <div class="media-grid">
+                  ${(memory.attachments || memory.mediaItems || []).map((attachment, index) => `
+                    <div class="media-item ${attachment.type?.startsWith('image/') ? 'image' : attachment.type?.startsWith('video/') ? 'video' : 'file'}">
+                      ${attachment.type?.startsWith('image/') ? `
+                        <img src="${attachment.url || attachment.dataUrl || attachment.data || attachment.previewUrl}" alt="${attachment.name}" />
+                      ` : attachment.type?.startsWith('video/') ? `
+                        <video src="${attachment.dataUrl || attachment.url}" muted>
+                        <div class="video-play-overlay">▶️</div>
+                        </video>
+                      ` : `
+                        <div class="file-item">
+                          <div class="file-icon">${attachment.type?.startsWith('audio/') ? '🎵' : '📄'}</div>
+                          <div class="file-name">${attachment.name}</div>
+                        </div>
+                      `}
+                    </div>
+                  `).join('')}
+                </div>
+              </div>
+            ` : ''}
+            
+            <!-- ACTION BUTTONS -->
+            <div class="action-buttons">
+              <button class="action-btn secondary" onclick="window.emmaDashboard.editDashboardMemory('${memory.id}')">
+                ✏️ Edit Memory
+              </button>
+              <button class="action-btn primary" onclick="window.emmaDashboard.shareDashboardMemory('${memory.id}')">
+                🔗 Share Memory
+              </button>
+            </div>
+          </div>
+        `;
+
+        dialog.addEventListener('click', (e) => {
+          if (e.target === dialog) {
+            dialog.remove();
+          }
+        });
+
+        document.body.appendChild(dialog);
+        this.currentMemoryDialog = dialog;
+
+        // Animate in
+        setTimeout(() => {
+          dialog.style.opacity = '1';
+          // Load people avatars if needed
+          this.loadDashboardPeopleAvatars(memory);
+        }, 100);
+      }
+
+      /**
+       * 📅 Format memory date for display
+       */
+      formatMemoryDate(timestamp) {
+        if (!timestamp) return 'Unknown date';
+        
+        try {
+          const date = new Date(timestamp);
+          return date.toLocaleDateString('en-US', {
+            weekday: 'long',
+            year: 'numeric', 
+            month: 'long',
+            day: 'numeric'
+          });
+        } catch (error) {
+          console.warn('Error formatting date:', error);
+          return 'Unknown date';
+        }
+      }
+
+      /**
+       * 🎠 Switch carousel image in dashboard dialog
+       */
+      switchDashboardCarouselImage(index) {
+        const heroImages = document.querySelectorAll('.hero-image');
+        const dots = document.querySelectorAll('.dot');
+        
+        heroImages.forEach((img, i) => {
+          img.classList.toggle('active', i === index);
+        });
+        
+        dots.forEach((dot, i) => {
+          dot.classList.toggle('active', i === index);
+        });
+      }
+
+      /**
+       * 👥 Load people avatars for dashboard memory dialog
+       */
+      async loadDashboardPeopleAvatars(memory) {
+        const peopleGrid = document.getElementById(`people-grid-${memory.id}`);
+        if (!peopleGrid) return;
+
+        const peopleList = memory.metadata?.people || memory.people || [];
+        if (peopleList.length === 0) return;
+
+        try {
+          // Get vault data for people info
+          let vaultData = null;
+          if (window.emmaWebVault && window.emmaWebVault.vaultData) {
+            vaultData = window.emmaWebVault.vaultData;
+          }
+
+          if (!vaultData?.content?.people) {
+            console.warn('⚠️ No vault people data available');
+            return;
+          }
+
+          const vaultPeople = vaultData.content.people;
+          const vaultMedia = vaultData.content.media || {};
+
+          // Create avatar elements for each person
+          peopleList.forEach(personId => {
+            const person = vaultPeople[personId];
+            if (!person) return;
+
+            // Resolve avatar URL
+            let avatarUrl = person.avatarUrl;
+            if (!avatarUrl && person.avatarId && vaultMedia[person.avatarId]) {
+              const mediaItem = vaultMedia[person.avatarId];
+              avatarUrl = mediaItem.data?.startsWith('data:') 
+                ? mediaItem.data 
+                : `data:${mediaItem.type};base64,${mediaItem.data}`;
+            }
+
+            const firstName = (person.name || 'Unknown').split(' ')[0];
+            const initials = firstName.charAt(0).toUpperCase();
+
+            const avatarElement = document.createElement('div');
+            avatarElement.className = 'memory-person-avatar';
+            avatarElement.onclick = () => this.openPersonDialog(personId);
+
+            if (avatarUrl) {
+              const img = document.createElement('img');
+              img.src = avatarUrl;
+              img.alt = person.name;
+              img.onerror = () => {
+                // Fallback to initials if image fails
+                avatarElement.innerHTML = `<span>${initials}</span>`;
+              };
+              avatarElement.appendChild(img);
+            } else {
+              avatarElement.innerHTML = `<span>${initials}</span>`;
+            }
+
+            // Add name label below avatar
+            const nameLabel = document.createElement('div');
+            nameLabel.style.cssText = `
+              color: white;
+              font-size: clamp(12px, 2vw, 14px);
+              font-weight: 500;
+              margin-top: 8px;
+              text-align: center;
+            `;
+            nameLabel.textContent = firstName;
+
+            const avatarContainer = document.createElement('div');
+            avatarContainer.appendChild(avatarElement);
+            avatarContainer.appendChild(nameLabel);
+
+            peopleGrid.appendChild(avatarContainer);
+          });
+
+        } catch (error) {
+          console.error('❌ Error loading dashboard people avatars:', error);
+        }
+      }
+
+      /**
+       * ✏️ Edit memory from dashboard dialog - DIRECT APPROACH
+       */
+      editDashboardMemory(memoryId) {
+        // Close current dialog
+        this.closeMemoryDialog();
+        
+        // Simple approach: Create temporary instance JUST for the edit dialog
+        if (typeof EmmaChatExperience !== 'undefined') {
+          const tempChatExperience = new EmmaChatExperience();
+          tempChatExperience.editMemoryDetails(memoryId);
+        } else {
+          console.error('❌ EmmaChatExperience not available');
+        }
+      }
+
+      /**
+       * 🔗 Share memory from dashboard dialog
+       */
+      shareDashboardMemory(memoryId) {
+        const shareUrl = `${window.location.origin}/index.html?memory=${memoryId}`;
+        
+        if (navigator.share && navigator.canShare && navigator.canShare({ url: shareUrl })) {
+          navigator.share({
+            title: 'Emma Memory',
+            text: 'Check out this memory from Emma',
+            url: shareUrl
+          }).catch(err => {
+            console.log('Share cancelled:', err);
+            // Fallback to copy
+            this.copyToClipboard(shareUrl);
+          });
+        } else {
+          // Fallback to copy to clipboard
+          this.copyToClipboard(shareUrl);
+        }
+      }
+
+      /**
+       * 📋 Copy text to clipboard utility
+       */
+      copyToClipboard(text) {
+        if (navigator.clipboard && window.isSecureContext) {
+          navigator.clipboard.writeText(text).then(() => {
+            this.showToast('🔗 Memory link copied to clipboard!', 'success');
+          }).catch(err => {
+            console.error('Failed to copy:', err);
+            this.fallbackCopyToClipboard(text);
+          });
+        } else {
+          this.fallbackCopyToClipboard(text);
+        }
+      }
+
+      /**
+       * 📋 Fallback copy method for older browsers
+       */
+      fallbackCopyToClipboard(text) {
+        const textArea = document.createElement('textarea');
+        textArea.value = text;
+        textArea.style.position = 'fixed';
+        textArea.style.left = '-999999px';
+        textArea.style.top = '-999999px';
+        document.body.appendChild(textArea);
+        textArea.focus();
+        textArea.select();
+        
+        try {
+          document.execCommand('copy');
+          this.showToast('🔗 Memory link copied to clipboard!', 'success');
+        } catch (err) {
+          console.error('Fallback copy failed:', err);
+          this.showToast('❌ Failed to copy link', 'error');
+        }
+        
+        document.body.removeChild(textArea);
+      }
+
+      /**
+       * 🍞 Show toast notification
+       */
+      showToast(message, type = 'info') {
+        // Create toast element
+        const toast = document.createElement('div');
+        toast.style.cssText = `
+          position: fixed;
+          top: 20px;
+          right: 20px;
+          background: ${type === 'success' ? 'linear-gradient(135deg, #10b981, #059669)' : 
+                      type === 'error' ? 'linear-gradient(135deg, #ef4444, #dc2626)' : 
+                      'linear-gradient(135deg, #6f63d9, #7c3aed)'};
+          color: white;
+          padding: 16px 24px;
+          border-radius: 12px;
+          font-size: 14px;
+          font-weight: 500;
+          z-index: 20000;
+          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+          backdrop-filter: blur(10px);
+          border: 1px solid rgba(255, 255, 255, 0.2);
+          opacity: 0;
+          transform: translateX(100%);
+          transition: all 0.3s ease;
+        `;
+        toast.textContent = message;
+        
+        document.body.appendChild(toast);
+        
+        // Animate in
+        setTimeout(() => {
+          toast.style.opacity = '1';
+          toast.style.transform = 'translateX(0)';
+        }, 100);
+        
+        // Remove after 3 seconds
+        setTimeout(() => {
+          toast.style.opacity = '0';
+          toast.style.transform = 'translateX(100%)';
+          setTimeout(() => {
+            if (toast.parentNode) {
+              toast.parentNode.removeChild(toast);
+            }
+          }, 300);
+        }, 3000);
+      }
+
+      // Close memory dialog
+      closeMemoryDialog() {
+        if (this.currentMemoryDialog) {
+          this.currentMemoryDialog.style.opacity = '0';
+          setTimeout(() => {
+            if (this.currentMemoryDialog) {
+              this.currentMemoryDialog.remove();
+              this.currentMemoryDialog = null;
+            }
+          }, 300);
+        }
+      }
+
+      // Open person dialog from memory
+      openPersonDialog(personId) {
+
+        // Navigate to people page with person selected
+        window.location.href = `pages/people-emma.html?person=${personId}`;
+      }
+
+      // Memory dialog slideshow controls
+      prevSlide() {
+
+        // Demo functionality - would implement real slideshow
+      }
+
+      nextSlide() {
+
+        // Demo functionality - would implement real slideshow
+      }
+
+      shareMemory(memoryId) {
+
+        this.showToast('📤 Memory shared!', 'success');
+      }
+
+      editMemory(memoryId) {
+
+        this.showToast('✏️ Opening memory editor...', 'info');
+      }
+
+      // Filter constellation by theme
+      filterByTheme(theme) {
+
+        this.nodes.forEach(node => {
+          if (node.theme === theme) {
+            node.element.style.opacity = '1';
+            node.element.style.transform = 'scale(1)';
+          } else {
+            node.element.style.opacity = '0.3';
+            node.element.style.transform = 'scale(0.8)';
+          }
+        });
+      }
+
+      showToast(message, type = 'info') {
+        const toast = document.createElement('div');
+        toast.className = `toast ${type}`;
+        const span = document.createElement('span');
+        span.textContent = message; // Safe - prevents HTML injection
+        toast.appendChild(span);
+        document.body.appendChild(toast);
+
+        setTimeout(() => toast.classList.add('show'), 10);
+
+        setTimeout(() => {
+          toast.classList.remove('show');
+          setTimeout(() => toast.remove(), 400);
+        }, 3000);
+      }
+    }
+
+    // Initialize dashboard
+    document.addEventListener('DOMContentLoaded', () => {
+      document.body.classList.add('dashboard-minimal');
+      // Small delay to ensure all elements are definitely available
+      setTimeout(() => {
+        console.log('🔍 DEBUG: Creating EmmaDashboard instance...');
+        
+        // CRITICAL FIX: Only create if not already exists
+        if (!window.emmaDashboard) {
+          window.emmaDashboard = new EmmaDashboard();
+          console.log('✅ EmmaDashboard created successfully');
+        } else {
+          console.log('✅ EmmaDashboard already exists, skipping duplicate creation');
+        }
+
+        // Setup vault modal event listeners AFTER dashboard is created
+      const dashboard = window.emmaDashboard;
+
+      // Close button
+      document.getElementById('close-vault-modal').addEventListener('click', () => {
+        dashboard.closeVaultModal();
+      });
+
+      // Click outside to close
+      document.getElementById('vault-modal').addEventListener('click', (e) => {
+        if (e.target.id === 'vault-modal') {
+          dashboard.closeVaultModal();
+        }
+      });
+
+      // Unlock form handlers
+      document.getElementById('unlock-btn').addEventListener('click', () => {
+        dashboard.unlockVault();
+      });
+
+      document.getElementById('cancel-unlock-btn').addEventListener('click', () => {
+        dashboard.hideUnlockForm();
+      });
+
+      // Create vault button handler
+      document.getElementById('create-vault-btn').addEventListener('click', async () => {
+
+        try {
+          if (window.emmaAPI && window.emmaAPI.vault) {
+            const st = await window.emmaAPI.vault.status();
+            if (st && st.initialized) {
+
+              dashboard.showUnlockForm();
+              return;
+            }
+          }
+        } catch {}
+        // Load welcome page for vault setup
+        window.location.assign('pages/welcome.html');
+      });
+
+      // Password input enter key
+      document.getElementById('vault-password').addEventListener('keypress', (e) => {
+        if (e.key === 'Enter') {
+          dashboard.unlockVault();
+        }
+      });
+
+      // QR Code handlers
+      document.getElementById('generate-vault-qr-dashboard').addEventListener('click', () => {
+        dashboard.showToast('📱 Vault QR generation coming soon!', 'info');
+      });
+
+      document.getElementById('open-qr-scanner-dashboard').addEventListener('click', () => {
+        dashboard.showToast('📷 QR scanner coming soon!', 'info');
+      });
+
+      // Escape key to close vault modal
+      document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape') {
+          const modal = document.getElementById('vault-modal');
+          if (modal.classList.contains('show')) {
+            dashboard.closeVaultModal();
+          }
+        }
+      });
+
+      // Vault status is managed by WebVaultStatus - don't override here!
+      localStorage.removeItem('emmaConstellationActive');
+      const params = new URLSearchParams(window.location.search);
+      if (params.get('constellation') === 'true') {
+        setTimeout(() => {
+          if (window.emmaDashboard && window.emmaDashboard.enterMemoryConstellation) {
+            window.emmaDashboard.enterMemoryConstellation();
+          }
+        }, 1000);
+      }
+
+      // CRITICAL: Initialize vault objects AFTER all scripts load
+      setTimeout(() => {
+          console.log('🚨🔧 DASHBOARD: setTimeout running - starting vault initialization...');
+          console.log('🚨🔧 DASHBOARD: EmmaWebVault class available:', typeof EmmaWebVault);
+          console.log('🚨🔧 DASHBOARD: window.emmaWebVault exists:', !!window.emmaWebVault);
+          
+          // CRITICAL FIX: Create the global vault instance (was missing!)
+          if (typeof EmmaWebVault !== 'undefined' && !window.emmaWebVault) {
+            console.log('🚨🔧 DASHBOARD: Creating new EmmaWebVault instance...');
+            window.emmaWebVault = new EmmaWebVault();
+            console.log('✅ DASHBOARD: EmmaWebVault instance created and ready');
+            console.log('✅ DASHBOARD: window.emmaWebVault now exists:', !!window.emmaWebVault);
+            
+            // IMMEDIATE VAULT RESTORATION for extension compatibility
+            if (sessionStorage.getItem('emmaVaultActive') === 'true') {
+              console.log('🚨🔧 DASHBOARD: Immediately restoring vault for extension compatibility...');
+              console.log('🚨🔧 DASHBOARD: Session vault name:', sessionStorage.getItem('emmaVaultName'));
+              console.log('🚨🔧 DASHBOARD: Document ready state:', document.readyState);
+              
+              window.emmaWebVault.restoreVaultState()
+                .then(result => {
+                  if (result) {
+                    console.log('🚨✅ DASHBOARD: Vault restored successfully for extension!', {
+                      isOpen: window.emmaWebVault.isOpen,
+                      hasVaultData: !!window.emmaWebVault.vaultData,
+                      hasAddMemoryMethod: typeof window.emmaWebVault.addMemory
+                    });
+                  } else {
+                    console.log('🚨⚠️ DASHBOARD: Vault restore returned false - troubleshooting...');
+                    console.log('🚨⚠️ DASHBOARD: Current vault state:', {
+                      isOpen: window.emmaWebVault.isOpen,
+                      hasVaultData: !!window.emmaWebVault.vaultData,
+                      sessionActive: sessionStorage.getItem('emmaVaultActive'),
+                      sessionName: sessionStorage.getItem('emmaVaultName')
+                    });
+                  }
+                })
+                .catch(error => {
+                  console.error('🚨❌ DASHBOARD: Could not restore vault:', error);
+                  console.error('🚨❌ DASHBOARD: Restore error details:', {
+                    errorMessage: error.message,
+                    errorStack: error.stack,
+                    vaultExists: !!window.emmaWebVault,
+                    sessionActive: sessionStorage.getItem('emmaVaultActive')
+                  });
+                });
+            } else {
+              console.log('🚨ℹ️ DASHBOARD: No active vault session found - extension will need manual unlock');
+            }
+          } else if (typeof EmmaWebVault === 'undefined') {
+            console.error('🚨❌ DASHBOARD: EmmaWebVault class not available! Check script loading.');
+          } else if (window.emmaWebVault) {
+            console.log('🚨ℹ️ DASHBOARD: window.emmaWebVault already exists, skipping creation');
+          } else {
+            console.error('🚨❌ DASHBOARD: Unknown condition preventing vault creation');
+          }
+
+          // Check what's available        
+          // Extension mode - Set up extension-aware vault status
+        if (window.emmaWebVault && window.emmaWebVault.extensionAvailable) {
+
+          // Set dashboard as ready - extension handles all vault operations
+          const statusIcon = document.getElementById('status-icon');
+          const statusTitle = document.getElementById('status-title');
+          const statusDescription = document.getElementById('status-description');
+          const actionBtn = document.getElementById('vault-action-btn');
+
+          if (statusIcon) statusIcon.textContent = '🔗';
+          if (statusTitle) statusTitle.textContent = 'Extension Connected';
+          if (statusDescription) statusDescription.textContent = 'Ready to preserve memories! Extension manages your vault automatically.';
+          if (actionBtn) actionBtn.style.display = 'none'; // Hide action button
+
+          // Listen for extension vault ready event
+          window.addEventListener('extension-vault-ready', (event) => {
+
+            // Force update vault icon to unlocked
+            const vaultIcon = document.querySelector('#vault-node .radial-item-icon');
+            if (vaultIcon) {
+              vaultIcon.textContent = '🔓';
+
+            }
+
+            // Update vault node status
+            setTimeout(() => {
+              if (window.dashboard && window.dashboard.updateVaultNodeStatus) {
+                window.dashboard.updateVaultNodeStatus();
+
+              }
+            }, 100);
+          });
+        } else if (window.emmaWebVault && window.emmaWebVault.isOpen) {
+          // Vault is already open and ready
+          console.log('✅ DASHBOARD: Vault is already open and ready');
+        }
+
+        }, 100); // Small delay for DOM elements to be available
+        
+      }, 100); // Small delay to ensure all elements are definitely available
+    });
+    
+    // 🚨 CRITICAL: Add postMessage handlers for content script communication
+    window.addEventListener('message', (event) => {
+      // Only handle messages from same origin
+      if (event.origin !== window.location.origin) return;
+      
+      if (event.data?.type === 'EMMA_VAULT_CHECK') {
+        console.log('🚨📨 DASHBOARD: Received vault check request from content script');
+        
+        const vaultStatus = {
+          exists: !!window.emmaWebVault,
+          isOpen: window.emmaWebVault?.isOpen,
+          canAddMemory: typeof window.emmaWebVault?.addMemory === 'function',
+          timestamp: Date.now()
+        };
+        
+        console.log('🚨📨 DASHBOARD: Sending vault status:', vaultStatus);
+        
+        window.postMessage({
+          type: 'EMMA_VAULT_RESPONSE',
+          messageId: event.data.messageId,
+          vaultStatus: vaultStatus
+        }, '*');
+      }
+      
+                    if (event.data?.type === 'EMMA_VAULT_SAVE' && window.emmaWebVault && window.emmaWebVault.isOpen) {
+                console.log('🚨💾 DASHBOARD: Received save request from content script');
+                console.log('🚨💾 DASHBOARD: Memory data size:', JSON.stringify(event.data.memoryData).length);
+
+                window.emmaWebVault.addMemory(event.data.memoryData)
+                  .then(result => {
+                    console.log('🚨✅ DASHBOARD: Save successful:', result);
+                    
+                    // 🎯 CRITICAL: Trigger constellation refresh after extension save
+                    console.log('🔄 DASHBOARD: Triggering constellation refresh after extension save...');
+                    window.dispatchEvent(new CustomEvent('emmaMemoryAdded', {
+                      detail: { 
+                        memoryId: result.id,
+                        source: 'extension',
+                        timestamp: Date.now()
+                      }
+                    }));
+                    
+                    window.postMessage({
+                      type: 'EMMA_VAULT_SAVE_RESPONSE',
+                      messageId: event.data.messageId,
+                      result: { success: true, result }
+                    }, '*');
+                  })
+                  .catch(error => {
+                    console.error('🚨❌ DASHBOARD: Save failed:', error);
+                    window.postMessage({
+                      type: 'EMMA_VAULT_SAVE_RESPONSE',
+                      messageId: event.data.messageId,
+                      result: { success: false, error: error.message }
+                    }, '*');
+                  });
+              }
+    });
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/js/dashboard-secure.js b/js/dashboard-secure.js
deleted file mode 100644
index 1a3b4ad6..00000000
--- a/js/dashboard-secure.js
+++ /dev/null
@@ -1,492 +0,0 @@
-// app/js/dashboard-secure.js - Extracted dashboard functionality for CSP compliance
-// SECURITY: External script file to eliminate inline JavaScript
-
-// Dashboard Controller
-class EmmaDashboard {
-  constructor() {
-    this.orb = document.getElementById('emma-orb');
-    this.radialMenu = document.getElementById('radial-menu');
-    this.voiceIndicator = document.getElementById('voice-indicator');
-    this.loading = document.getElementById('loading');
-    
-    console.log('🔧 Constructor - radialMenu:', this.radialMenu);
-    console.log('🔧 Constructor - radial items:', this.radialMenu ? this.radialMenu.querySelectorAll('.radial-item').length : 'NULL');
-    this.panels = {
-      dailyBrief: document.getElementById('daily-brief'),
-      aiInsights: document.getElementById('ai-insights'),
-      quickActions: document.getElementById('quick-actions')
-    };
-    
-    this.isMenuOpen = false;
-    this.stats = { memories: 0, people: 0, today: 0 };
-    this.particles = [];
-    this.nodes = [];
-    this.neuralCanvas = document.getElementById('neural-canvas');
-    this.neuralCtx = this.neuralCanvas.getContext('2d');
-    
-    // Neural memory network properties
-    this.isConstellationMode = false;
-    this.constellationMemories = [];
-    this.centralNeuron = null;
-    
-    // Initialize WebGL Emma Orb
-    this.initEmmaOrb();
-    
-    this.init();
-  }
-
-  async init() {
-    // Show loading
-    this.loading.classList.add('active');
-    
-    // Initialize constellation background
-    this.initConstellation();
-    
-    // Setup event listeners
-    this.setupEventListeners();
-    
-    // Load initial data
-    await this.loadDashboardData();
-    
-    // Animate panels based on time of day
-    this.showContextualPanels();
-    
-    // Hide loading
-    setTimeout(() => {
-      this.loading.classList.remove('active');
-    }, 1500);
-    
-    // Start background animations
-    this.startAnimations();
-  }
-
-  initConstellation() {
-    const canvas = document.getElementById('constellation');
-    const ctx = canvas.getContext('2d');
-    
-    // Set canvas size
-    const resize = () => {
-      canvas.width = window.innerWidth;
-      canvas.height = window.innerHeight;
-    };
-    resize();
-    window.addEventListener('resize', resize);
-    
-    // Create memory particles
-    const particleCount = 50;
-    for (let i = 0; i < particleCount; i++) {
-      this.particles.push({
-        x: Math.random() * canvas.width,
-        y: Math.random() * canvas.height,
-        vx: (Math.random() - 0.5) * 0.5,
-        vy: (Math.random() - 0.5) * 0.5,
-        radius: Math.random() * 2 + 1,
-        opacity: Math.random() * 0.5 + 0.2
-      });
-    }
-    
-    // Animation loop
-    const animate = () => {
-      ctx.clearRect(0, 0, canvas.width, canvas.height);
-      
-      // Update and draw particles
-      this.particles.forEach((p, i) => {
-        // Update position
-        p.x += p.vx;
-        p.y += p.vy;
-        
-        // Wrap around edges
-        if (p.x < 0) p.x = canvas.width;
-        if (p.x > canvas.width) p.x = 0;
-        if (p.y < 0) p.y = canvas.height;
-        if (p.y > canvas.height) p.y = 0;
-        
-        // Draw particle
-        ctx.beginPath();
-        ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
-        ctx.fillStyle = `rgba(134, 88, 255, ${p.opacity})`;
-        ctx.fill();
-        
-        // Draw connections
-        this.particles.forEach((p2, j) => {
-          if (i !== j) {
-            const dx = p.x - p2.x;
-            const dy = p.y - p2.y;
-            const dist = Math.sqrt(dx * dx + dy * dy);
-            
-            if (dist < 100) {
-              ctx.beginPath();
-              ctx.moveTo(p.x, p.y);
-              ctx.lineTo(p2.x, p2.y);
-              ctx.strokeStyle = `rgba(134, 88, 255, ${(1 - dist / 100) * 0.2})`;
-              ctx.stroke();
-            }
-          }
-        });
-      });
-      
-      requestAnimationFrame(animate);
-    };
-    animate();
-  }
-
-  setupEventListeners() {
-    // Orb click - exit constellation or toggle menu
-    this.orb.addEventListener('click', (e) => {
-      e.stopPropagation();
-      if (this.isConstellationMode) {
-        // Simple: Exit constellation mode back to main dashboard
-        this.exitMemoryConstellation();
-      } else {
-        this.toggleRadialMenu();
-      }
-    });
-    
-    // Radial menu items
-    this.radialMenu.querySelectorAll('.radial-item').forEach(item => {
-      item.addEventListener('click', (e) => {
-        e.stopPropagation();
-        const action = item.dataset.action;
-        this.handleRadialAction(action);
-      });
-    });
-    
-    // Track mouse position for neural effects
-    this.mouseX = 0;
-    this.mouseY = 0;
-    document.addEventListener('mousemove', (e) => {
-      this.mouseX = e.clientX;
-      this.mouseY = e.clientY;
-      
-      // Add proximity effects to nodes (both menu and constellation modes)
-      if ((this.isMenuOpen || this.isConstellationMode) && this.nodes.length > 0) {
-        this.nodes.forEach(node => {
-          const dist = Math.sqrt(
-            Math.pow(this.mouseX - node.x, 2) + 
-            Math.pow(this.mouseY - node.y, 2)
-          );
-          
-          if (dist < 150) {
-            // Gentle repel nodes from mouse (petri dish organisms)
-            const force = (150 - dist) / 150;
-            const angle = Math.atan2(node.y - this.mouseY, node.x - this.mouseX);
-            node.vx += Math.cos(angle) * force * 0.5; // Much gentler repulsion
-            node.vy += Math.sin(angle) * force * 0.5;
-            
-            // Add glow effect (stronger for memory nodes)
-            const glowStrength = this.isConstellationMode ? 60 : 40;
-            const baseOpacity = this.isConstellationMode ? 0.8 : 0.6;
-            node.element.style.boxShadow = `0 0 ${glowStrength + force * 30}px rgba(134, 88, 255, ${baseOpacity + force * 0.4})`;
-          } else {
-            const defaultGlow = this.isConstellationMode ? '0 0 40px rgba(134, 88, 255, 0.4)' : '0 0 30px rgba(134, 88, 255, 0.2)';
-            node.element.style.boxShadow = defaultGlow;
-          }
-        });
-      }
-    });
-    
-    // Keyboard shortcuts
-    document.addEventListener('keydown', (e) => {
-      if (e.code === 'Space' && !e.target.matches('input, textarea')) {
-        e.preventDefault();
-        this.startVoiceCapture();
-      } else if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
-        e.preventDefault();
-        this.handleRadialAction('search');
-      } else if (e.key === 'Escape' && this.isMenuOpen) {
-        this.toggleRadialMenu();
-      }
-    });
-    
-    // Click outside to close menu
-    document.addEventListener('click', (e) => {
-      if (this.isMenuOpen && !this.orb.contains(e.target) && !this.radialMenu.contains(e.target)) {
-        console.log('🚨 Document click closing menu - target:', e.target);
-        this.toggleRadialMenu();
-      }
-    });
-    
-    // Hover effects for orb
-    this.orb.addEventListener('mouseenter', () => {
-      document.querySelectorAll('.quick-stats').forEach(el => {
-        el.style.opacity = '1';
-      });
-    });
-  }
-
-  async loadDashboardData() {
-    try {
-      // Load vault status (store but don't show on central orb)
-      if (window.emmaAPI && window.emmaAPI.vault) {
-        try {
-          const status = await window.emmaAPI.vault.status();
-          window.currentVaultStatus = status || { isUnlocked: false };
-        } catch (e) {
-          console.warn('⚠️ Vault status unavailable:', e.message);
-          // CRITICAL FIX: Don't force lock status - preserve existing state
-          if (!window.currentVaultStatus) {
-            window.currentVaultStatus = { isUnlocked: false };
-          }
-        }
-        
-        // Load stats safely
-        try {
-          const stats = await window.emmaAPI.vault.stats();
-          this.updateStats({
-            memories: (stats && stats.totalMemories) || 42,
-            people: (stats && stats.totalPeople) || 12,
-            today: (stats && stats.todayMemories) || 3
-          });
-        } catch (e) {
-          console.warn('⚠️ Vault stats unavailable:', e.message);
-          this.updateStats({ memories: 42, people: 12, today: 3 });
-        }
-      } else {
-        // Demo data when API not available
-        console.log('🎭 Using demo data - Emma API not available');
-        // CRITICAL FIX: Don't force lock status - preserve existing state
-        if (!window.currentVaultStatus) {
-          window.currentVaultStatus = { isUnlocked: false };
-        }
-        this.updateStats({ memories: 42, people: 12, today: 3 });
-      }
-    } catch (error) {
-      console.error('🚨 Dashboard data load error:', error);
-      // Fallback to demo data
-      // CRITICAL FIX: Don't force lock status - preserve existing state
-      if (!window.currentVaultStatus) {
-        window.currentVaultStatus = { isUnlocked: false };
-      }
-      this.updateStats({ memories: 42, people: 12, today: 3 });
-    }
-  }
-
-  updateStats(newStats) {
-    Object.assign(this.stats, newStats);
-    
-    // Animate number changes
-    Object.keys(newStats).forEach(key => {
-      const element = document.getElementById(`stat-${key}`);
-      if (element) {
-        const start = parseInt(element.textContent) || 0;
-        const end = this.stats[key];
-        const duration = 1000;
-        const startTime = Date.now();
-        
-        const animate = () => {
-          const elapsed = Date.now() - startTime;
-          const progress = Math.min(elapsed / duration, 1);
-          const current = Math.floor(start + (end - start) * progress);
-          element.textContent = current;
-          
-          if (progress < 1) {
-            requestAnimationFrame(animate);
-          }
-        };
-        animate();
-      }
-    });
-  }
-
-  showContextualPanels() {
-    const hour = new Date().getHours();
-    
-    // Show all panels for demo
-    setTimeout(() => {
-      // Show all available panels
-      if (this.panels.dailyBrief) this.panels.dailyBrief.classList.add('active');
-      if (this.panels.aiInsights) this.panels.aiInsights.classList.add('active');
-      if (this.panels.quickActions) this.panels.quickActions.classList.add('active');
-    }, 1000);
-  }
-
-  startAnimations() {
-    // Implement remaining animation methods...
-    console.log('🎬 Starting background animations');
-  }
-
-  // Add simplified versions of other methods for CSP compliance
-  initEmmaOrb() {
-    try {
-      const orbContainer = document.getElementById('webgl-orb-container');
-      if (!orbContainer) {
-        console.warn('🌟 WebGL orb container not found');
-        return;
-      }
-      
-      if (window.EmmaOrb) {
-        // Create WebGL Emma Orb with Emma's signature purple-pink hue
-        this.webglOrb = new window.EmmaOrb(orbContainer, {
-          hue: 270, // Purple-pink Emma colors
-          hoverIntensity: 0.35,
-          rotateOnHover: true,
-          forceHoverState: false
-        });
-        console.log('🌟 WebGL Emma Orb initialized successfully');
-      } else {
-        console.warn('🌟 EmmaOrb class not available, using fallback');
-        // Fallback to simple gradient if EmmaOrb class not loaded
-        orbContainer.style.background = 'radial-gradient(circle at 30% 30%, #8658ff, #4f46e5)';
-        orbContainer.style.borderRadius = '50%';
-        orbContainer.style.width = '100%';
-        orbContainer.style.height = '100%';
-      }
-    } catch (error) {
-      console.error('🚨 Error initializing Emma Orb:', error);
-      // Ensure fallback is applied
-      const orbContainer = document.getElementById('webgl-orb-container');
-      if (orbContainer) {
-        orbContainer.style.background = 'radial-gradient(circle at 30% 30%, #8658ff, #4f46e5)';
-        orbContainer.style.borderRadius = '50%';
-        orbContainer.style.width = '100%';
-        orbContainer.style.height = '100%';
-      }
-    }
-  }
-
-  toggleRadialMenu() {
-    this.isMenuOpen = !this.isMenuOpen;
-    console.log('🎯 Toggle menu:', this.isMenuOpen);
-    
-    if (this.isMenuOpen) {
-      this.radialMenu.classList.add('active');
-      document.body.classList.add('menu-active');
-    } else {
-      this.radialMenu.classList.remove('active');
-      document.body.classList.remove('menu-active');
-    }
-  }
-
-  handleRadialAction(action) {
-    console.log('🎯 Radial action:', action);
-    this.toggleRadialMenu(); // Close menu after action
-    
-    switch (action) {
-      case 'voice':
-        this.startVoiceCapture();
-        break;
-      case 'chat':
-        this.openEmmaChatExperience();
-        break;
-      case 'memories':
-        this.openMemoryGallery();
-        break;
-      case 'vault':
-        this.openVaultModal();
-        break;
-      case 'share':
-        this.openShareExperience();
-        break;
-      case 'search':
-        this.showToast('🔍 Search coming soon!', 'info');
-        break;
-      default:
-        this.showToast(`Action: ${action}`, 'info');
-    }
-  }
-
-  async startVoiceCapture() {
-    console.log('🎤 Starting voice capture...');
-    try {
-      if (window.VoiceCaptureExperience) {
-        this.voiceCaptureExperience = new VoiceCaptureExperience({ 
-          source: 'dashboard', 
-          mode: 'voice_only' 
-        });
-        await this.voiceCaptureExperience.show();
-      } else {
-        this.showToast('🎤 Voice capture system loading...', 'info');
-      }
-    } catch (error) {
-      console.error('🎤 Voice capture error:', error);
-      this.showToast('🎤 Voice capture unavailable', 'error');
-    }
-  }
-
-  openEmmaChatExperience() {
-    console.log('🤖 Opening Emma Chat...');
-    try {
-      if (window.EmmaChatExperience) {
-        this.emmaChatExperience = new EmmaChatExperience();
-        this.emmaChatExperience.show();
-      } else {
-        this.showToast('🤖 Chat system loading...', 'info');
-      }
-    } catch (error) {
-      console.error('🤖 Chat error:', error);
-      this.showToast('🤖 Chat unavailable', 'error');
-    }
-  }
-
-  openMemoryGallery() {
-    console.log('💎 Opening memory gallery...');
-    window.location.href = '../memories-gallery.html';
-  }
-
-  openVaultModal() {
-    const modal = document.getElementById('vault-modal');
-    if (modal) {
-      modal.style.display = 'flex';
-      setTimeout(() => modal.classList.add('show'), 10);
-    }
-  }
-
-  closeVaultModal() {
-    const modal = document.getElementById('vault-modal');
-    if (modal) {
-      modal.classList.remove('show');
-      setTimeout(() => modal.style.display = 'none', 300);
-    }
-  }
-
-  showToast(message, type = 'info') {
-    const toast = document.createElement('div');
-    toast.className = `toast ${type}`;
-    const span = document.createElement('span');
-    span.textContent = message; // Safe - prevents HTML injection
-    toast.appendChild(span);
-    document.body.appendChild(toast);
-    
-    setTimeout(() => toast.classList.add('show'), 10);
-    
-    setTimeout(() => {
-      toast.classList.remove('show');
-      setTimeout(() => toast.remove(), 400);
-    }, 3000);
-  }
-}
-
-// Initialize dashboard when DOM is ready
-document.addEventListener('DOMContentLoaded', () => {
-  window.emmaDashboard = new EmmaDashboard();
-  console.log('✨ Emma Dashboard 2.0 initialized');
-  
-  // Setup vault modal event listeners
-  const dashboard = window.emmaDashboard;
-  
-  // Close button
-  const closeBtn = document.getElementById('close-vault-modal');
-  if (closeBtn) {
-    closeBtn.addEventListener('click', () => {
-      dashboard.closeVaultModal();
-    });
-  }
-  
-  // Click outside to close
-  const modal = document.getElementById('vault-modal');
-  if (modal) {
-    modal.addEventListener('click', (e) => {
-      if (e.target.id === 'vault-modal') {
-        dashboard.closeVaultModal();
-      }
-    });
-  }
-  
-  // Other event listeners...
-  const unlockBtn = document.getElementById('unlock-btn');
-  if (unlockBtn) {
-    unlockBtn.addEventListener('click', () => {
-      dashboard.unlockVault();
-    });
-  }
-});
diff --git a/js/emma-browser-client.js b/js/emma-browser-client.js
index 84009e37..ed4868fc 100644
--- a/js/emma-browser-client.js
+++ b/js/emma-browser-client.js
@@ -23,6 +23,12 @@ class EmmaBrowserClient {
     
     // Privacy-first tools (for local execution)
     this.tools = new EmmaVoiceTools();
+
+    this.apiKey = typeof this.options.apiKey === 'string' && this.options.apiKey.trim()
+      ? this.options.apiKey.trim()
+      : null;
+    this._lastSentApiKey = undefined;
+    this.voicePlaybackEnabled = true;
     
     console.log('🎙️ Emma Browser Client initialized');
 
@@ -32,6 +38,17 @@ class EmmaBrowserClient {
     this.synth = window.speechSynthesis || null;
     this.audioWorkletNode = null;
     this.audioContext = null;
+    this.mediaStream = null;
+    this._audioSinkNode = null;
+    this._audioWorkletModuleUrl = null;
+    this._realtimeStream = null;
+    this._audioSourceNode = null;
+    this._sinkConnected = false;
+    this._realtimeProcessor = null;
+    this._realtimeSource = null;
+    this._realtimeAudioContext = null;
+    this._realtimeSinkNode = null;
+    this._disableRecognition = false;
     this.lastEmmaText = '';
   }
 
@@ -40,6 +57,7 @@ class EmmaBrowserClient {
    */
   async startVoiceSession() {
     try {
+      this._disableRecognition = false;
       this.setState('connecting');
       
       // Connect to Emma backend
@@ -74,12 +92,44 @@ class EmmaBrowserClient {
    */
   async setupPcmStreaming(mediaStream) {
     try {
-      if (!window.AudioWorkletNode || !window.AudioContext) return;
+      if (!mediaStream) {
+        return;
+      }
+
+      this.mediaStream = mediaStream;
+
+      if (!window.AudioWorkletNode || !window.AudioContext) {
+        return;
+      }
+
       this.audioContext = this.audioContext || new (window.AudioContext || window.webkitAudioContext)({ sampleRate: 48000 });
-      const source = this.audioContext.createMediaStreamSource(mediaStream);
+      if (!this.audioContext) {
+        return;
+      }
 
-      // Inline processor via AudioWorklet
-      const processorCode = `
+      if (this._audioSourceNode) {
+        try {
+          this._audioSourceNode.disconnect();
+        } catch (e) {
+          // Ignore disconnect errors
+        }
+        this._audioSourceNode = null;
+      }
+
+      if (this.audioWorkletNode) {
+        try {
+          this.audioWorkletNode.disconnect();
+        } catch (e) {
+          // Ignore disconnect errors
+        }
+        this.audioWorkletNode = null;
+      }
+
+      this._audioSourceNode = this.audioContext.createMediaStreamSource(mediaStream);
+
+      if (!this._audioWorkletModuleUrl) {
+        // Inline processor via AudioWorklet (loaded once per context)
+        const processorCode = `
         class EmmaPcmProcessor extends AudioWorkletProcessor {
           constructor() {
             super();
@@ -130,17 +180,31 @@ class EmmaBrowserClient {
         registerProcessor('emma-pcm', EmmaPcmProcessor);
       `;
 
-      const blob = new Blob([processorCode], { type: 'application/javascript' });
-      const url = URL.createObjectURL(blob);
-      await this.audioContext.audioWorklet.addModule(url);
+        const blob = new Blob([processorCode], { type: 'application/javascript' });
+        this._audioWorkletModuleUrl = URL.createObjectURL(blob);
+        await this.audioContext.audioWorklet.addModule(this._audioWorkletModuleUrl);
+      }
+
       this.audioWorkletNode = new AudioWorkletNode(this.audioContext, 'emma-pcm');
       this.audioWorkletNode.port.onmessage = (e) => {
         if (e.data?.type === 'chunk') {
           this.sendToAgent({ type: 'user_audio_chunk', chunk: e.data.data });
         }
       };
-      source.connect(this.audioWorkletNode);
-      this.audioWorkletNode.connect(this.audioContext.destination);
+
+      this._audioSinkNode = this._audioSinkNode || this.audioContext.createGain();
+      if (this._audioSinkNode) {
+        this._audioSinkNode.gain.value = 0;
+      }
+
+      this._audioSourceNode.connect(this.audioWorkletNode);
+      if (this._audioSinkNode) {
+        this.audioWorkletNode.connect(this._audioSinkNode);
+        if (!this._sinkConnected) {
+          this._audioSinkNode.connect(this.audioContext.destination);
+          this._sinkConnected = true;
+        }
+      }
     } catch (e) {
       console.warn('🎙️ PCM streaming not available:', e?.message || e);
     }
@@ -151,13 +215,31 @@ class EmmaBrowserClient {
    */
   async connectToEmmaAgent() {
     try {
-      const backendUrl = window.location.hostname === 'localhost' 
-        ? 'ws://localhost:3001' 
-        : 'wss://emma-voice-backend.onrender.com';
-      
-      const wsUrl = `${backendUrl}/voice`;
-      
-      console.log('🔗 Connecting to Emma agent...');
+      const wsUrl = (typeof window.getEmmaBackendWsUrl === 'function')
+        ? window.getEmmaBackendWsUrl()
+        : 'wss://emma-lite-optimized.onrender.com/voice';
+
+      // FORCE debug logging bypassing production suppression
+      const forceLog = (...args) => Function.prototype.call.call(console.log, console, ...args);
+
+      forceLog('🔗 ===== EMMA WEBSOCKET CONNECTION DEBUG =====');
+      forceLog('   wsUrl:', wsUrl);
+      forceLog('   window.location.href:', window.location.href);
+      forceLog('   window.location.hostname:', window.location.hostname);
+      forceLog('   window.location.port:', window.location.port);
+      forceLog('   window.location.protocol:', window.location.protocol);
+      forceLog('   window.EMMA_ENV:', window.EMMA_ENV);
+      forceLog('   window.EMMA_DEBUG:', window.EMMA_DEBUG);
+      forceLog('   window.EMMA_BACKEND_ORIGIN:', window.EMMA_BACKEND_ORIGIN);
+      forceLog('   typeof getEmmaBackendWsUrl:', typeof window.getEmmaBackendWsUrl);
+      forceLog('   typeof getEmmaBackendOrigin:', typeof window.getEmmaBackendOrigin);
+      if (typeof window.getEmmaBackendOrigin === 'function') {
+        forceLog('   getEmmaBackendOrigin() result:', window.getEmmaBackendOrigin());
+      }
+      if (typeof window.getEmmaBackendWsUrl === 'function') {
+        forceLog('   getEmmaBackendWsUrl() result:', window.getEmmaBackendWsUrl());
+      }
+      forceLog('==============================================');
       
       this.websocket = new WebSocket(wsUrl);
       this.setupWebSocketHandlers();
@@ -172,7 +254,9 @@ class EmmaBrowserClient {
           clearTimeout(timeout);
           console.log('✅ Connected to Emma agent');
           this.isConnected = true;
-          
+
+          this.sendRuntimeApiKey({ force: Boolean(this.apiKey) });
+
           // Notify chat of connection
           if (this.chatInstance) {
             this.chatInstance.addMessage('system', '🔗 Connected to Emma backend');
@@ -297,7 +381,7 @@ class EmmaBrowserClient {
    */
   speak(text) {
     try {
-      if (!this.synth) return;
+      if (!this.synth || !this.voicePlaybackEnabled) return;
       // Stop any queued utterances for snappy response
       this.synth.cancel();
       const utter = new SpeechSynthesisUtterance(text);
@@ -323,11 +407,14 @@ class EmmaBrowserClient {
           case 'emma_ready':
             this.setState('listening');
             if (this.chatInstance) {
+              if (typeof this.chatInstance.markAgentReady === 'function') {
+                this.chatInstance.markAgentReady();
+              }
               this.chatInstance.addMessage('system', '✅ Emma is ready to talk!');
               this.chatInstance.addMessage('system', '🎤 Say something to Emma - transcription will appear here');
             }
             break;
-            
+
           case 'user_transcription':
             // Display user's speech in chat
             if (this.chatInstance && message.transcript) {
@@ -338,7 +425,11 @@ class EmmaBrowserClient {
           case 'emma_transcription':
             // Display Emma's speech in chat
             if (this.chatInstance && message.transcript) {
-              this.chatInstance.addMessage(message.transcript, 'emma', { isVoice: true });
+              const isVoice = message.source === 'voice';
+              this.chatInstance.addMessage(message.transcript, 'emma', { isVoice });
+              if (typeof this.chatInstance.hideTypingIndicator === 'function') {
+                this.chatInstance.hideTypingIndicator();
+              }
             }
             // Store text for fallback and wait for server audio
             this.lastEmmaText = message.transcript;
@@ -348,6 +439,10 @@ class EmmaBrowserClient {
           case 'emma_audio':
             // High-quality server-synthesized audio (mp3 base64) - PRIORITY PLAYBACK
             if (message.audio && message.encoding === 'base64/mp3') {
+              if (!this.voicePlaybackEnabled) {
+                console.log('🔇 Voice playback muted - skipping server audio');
+                return;
+              }
               try {
                 console.log('🎤 Playing OpenAI TTS audio (Alloy voice)');
                 
@@ -375,6 +470,15 @@ class EmmaBrowserClient {
             
           case 'state_change':
             this.setState(message.state);
+            if (this.chatInstance) {
+              if (message.state === 'thinking' && typeof this.chatInstance.showTypingIndicator === 'function') {
+                this.chatInstance.showTypingIndicator();
+              }
+              if ((message.state === 'speaking' || message.state === 'listening') &&
+                  typeof this.chatInstance.hideTypingIndicator === 'function') {
+                this.chatInstance.hideTypingIndicator();
+              }
+            }
             break;
             
           case 'tool_request':
@@ -409,6 +513,9 @@ class EmmaBrowserClient {
       console.log('🔇 Emma agent connection closed');
       this.isConnected = false;
       this.setState('idle');
+      if (this.chatInstance && typeof this.chatInstance.markAgentDisconnected === 'function') {
+        this.chatInstance.markAgentDisconnected();
+      }
     };
   }
 
@@ -450,20 +557,31 @@ class EmmaBrowserClient {
    */
   displayToolResult(toolName, params, result) {
     if (!this.chatInstance) return;
-    
+
+    if (result && result.error) {
+      this.chatInstance.addMessage(`⚠️ ${result.error}`, 'system');
+      return;
+    }
+
     switch (toolName) {
       case 'get_people':
         if (result.people && result.people.length > 0) {
           this.chatInstance.displayPeopleResults(result.people);
         }
         break;
-        
+
       case 'get_memories':
         if (result.memories && result.memories.length > 0) {
           this.chatInstance.displayMemoryResults(result.memories);
         }
         break;
-        
+
+      case 'summarize_memory':
+        if (result.summary) {
+          this.chatInstance.addMessage(`📝 Here's a gentle summary: ${result.summary}`, 'emma');
+        }
+        break;
+
       case 'create_memory_from_voice':
         if (result.success) {
           this.chatInstance.addMessage('system', `💭 New memory created: "${params.content.substring(0, 50)}..."`, {
@@ -472,7 +590,17 @@ class EmmaBrowserClient {
           });
         }
         break;
-        
+
+      case 'create_memory_capsule':
+        if (result.success) {
+          const label = result.title || params.title || params.content?.substring(0, 50) || 'New memory';
+          this.chatInstance.addMessage('system', `💾 Saved memory: "${label}"`, {
+            type: 'memory-created',
+            memoryId: result.memoryId
+          });
+        }
+        break;
+
       case 'update_person':
         if (result.success) {
           this.chatInstance.addMessage('system', `👤 Updated ${result.personName} with new details`, {
@@ -480,9 +608,86 @@ class EmmaBrowserClient {
           });
         }
         break;
+
+      case 'create_person_profile':
+        if (result.success) {
+          this.chatInstance.addMessage('system', `👤 Added ${result.personName} to your people`, {
+            type: 'person-created',
+            personId: result.personId
+          });
+        }
+        break;
+
+      case 'update_memory_capsule':
+        if (result.success) {
+          const fields = result.updatedFields?.length
+            ? result.updatedFields.join(', ')
+            : 'memory details';
+          this.chatInstance.addMessage('system', `📝 Updated ${fields} for your memory`, {
+            type: 'memory-updated',
+            memoryId: result.memoryId
+          });
+        }
+        break;
+
+      case 'attach_memory_media':
+        if (result.success) {
+          const count = result.attachmentCount ?? (params.media?.length || 0);
+          this.chatInstance.addMessage('system', `📎 Added ${count} new ${count === 1 ? 'attachment' : 'attachments'} to your memory`, {
+            type: 'memory-media-added',
+            memoryId: result.memoryId
+          });
+        }
+        break;
+    }
+  }
+
+  /**
+   * Update runtime API key (shared with server-side agent)
+   */
+  setApiKey(apiKey, { silent = false } = {}) {
+    const normalized = typeof apiKey === 'string' ? apiKey.trim() : '';
+    const nextValue = normalized || null;
+    const changed = nextValue !== this.apiKey;
+
+    this.apiKey = nextValue;
+    if (changed) {
+      this._lastSentApiKey = undefined;
+    }
+
+    if (this.websocket && this.websocket.readyState === WebSocket.OPEN) {
+      this.sendRuntimeApiKey({ force: changed });
+    } else if (!silent && this.apiKey) {
+      console.log('🔐 Stored OpenAI key for next Emma connection');
     }
   }
 
+  /**
+   * Send current API key to Emma server (if connected)
+   */
+  sendRuntimeApiKey({ force = false } = {}) {
+    if (!this.websocket || this.websocket.readyState !== WebSocket.OPEN) {
+      return;
+    }
+
+    const normalized = typeof this.apiKey === 'string' ? this.apiKey.trim() : '';
+    const payload = normalized || null;
+
+    if (!force && payload === this._lastSentApiKey) {
+      return;
+    }
+
+    if (!payload && !force) {
+      return;
+    }
+
+    this._lastSentApiKey = payload;
+    this.sendToAgent({
+      type: 'set_api_key',
+      apiKey: payload
+    });
+  }
+
   /**
    * Send message to Emma agent
    */
@@ -515,12 +720,12 @@ class EmmaBrowserClient {
       };
       
       const message = statusMessages[newState];
-      if (message && this.chatInstance.typingIndicator) {
+      if (this.chatInstance.typingIndicator) {
         const span = this.chatInstance.typingIndicator.querySelector('span');
-        if (span) {
+        if (span && message) {
           span.textContent = message;
-          this.chatInstance.typingIndicator.style.display = message ? 'block' : 'none';
         }
+        this.chatInstance.typingIndicator.style.display = message ? 'flex' : 'none';
       }
     }
   }
@@ -545,11 +750,124 @@ class EmmaBrowserClient {
    */
   async stopVoiceSession() {
     try {
+      this._disableRecognition = true;
       this.isConnected = false;
       this.setState('idle');
       
       // Send stop message to agent
       this.sendToAgent({ type: 'stop_session' });
+
+      if (this.recognition) {
+        try {
+          this.recognition.onend = null;
+          this.recognition.onerror = null;
+          this.recognition.onresult = null;
+          this.recognition.onstart = null;
+          this.recognition.stop();
+        } catch (e) {
+          // Ignore recognition stop errors
+        }
+        this.recognition = null;
+      }
+      this.isListening = false;
+
+      if (this.mediaStream) {
+        try {
+          this.mediaStream.getTracks().forEach(track => track.stop());
+        } catch (e) {
+          // Ignore track stop errors
+        }
+        this.mediaStream = null;
+      }
+
+      if (this._audioSourceNode) {
+        try {
+          this._audioSourceNode.disconnect();
+        } catch (e) {
+          // Ignore disconnect errors
+        }
+        this._audioSourceNode = null;
+      }
+
+      if (this.audioWorkletNode) {
+        try {
+          this.audioWorkletNode.port.onmessage = null;
+          this.audioWorkletNode.disconnect();
+        } catch (e) {
+          // Ignore disconnect errors
+        }
+        this.audioWorkletNode = null;
+      }
+
+      if (this._audioSinkNode) {
+        try {
+          this._audioSinkNode.disconnect();
+        } catch (e) {
+          // Ignore disconnect errors
+        }
+        this._audioSinkNode = null;
+        this._sinkConnected = false;
+      }
+
+      if (this.audioContext) {
+        try {
+          this.audioContext.close();
+        } catch (e) {
+          // Ignore close errors
+        }
+        this.audioContext = null;
+      }
+
+      if (this._audioWorkletModuleUrl) {
+        URL.revokeObjectURL(this._audioWorkletModuleUrl);
+        this._audioWorkletModuleUrl = null;
+      }
+
+      if (this._realtimeProcessor) {
+        try {
+          this._realtimeProcessor.disconnect();
+        } catch (e) {
+          // Ignore disconnect errors
+        }
+        this._realtimeProcessor.onaudioprocess = null;
+        this._realtimeProcessor = null;
+      }
+
+      if (this._realtimeSource) {
+        try {
+          this._realtimeSource.disconnect();
+        } catch (e) {
+          // Ignore disconnect errors
+        }
+        this._realtimeSource = null;
+      }
+
+      if (this._realtimeSinkNode) {
+        try {
+          this._realtimeSinkNode.disconnect();
+        } catch (e) {
+          // Ignore disconnect errors
+        }
+        this._realtimeSinkNode = null;
+      }
+
+      if (this._realtimeAudioContext) {
+        try {
+          this._realtimeAudioContext.close();
+        } catch (e) {
+          // Ignore close errors
+        }
+        this._realtimeAudioContext = null;
+      }
+
+      if (this._realtimeStream) {
+        try {
+          this._realtimeStream.getTracks().forEach(track => track.stop());
+        } catch (e) {
+          // Ignore track stop errors
+        }
+        this._realtimeStream = null;
+      }
       
       // Close WebSocket
       if (this.websocket) {
@@ -610,14 +928,38 @@ class EmmaBrowserClient {
         }
       });
 
+      this._realtimeStream = stream;
+
       // Create audio context for real-time processing
-      this.audioContext = new (window.AudioContext || window.webkitAudioContext)({ sampleRate: 24000 });
-      const source = this.audioContext.createMediaStreamSource(stream);
+      this._realtimeAudioContext = this._realtimeAudioContext || new (window.AudioContext || window.webkitAudioContext)({ sampleRate: 24000 });
+      if (!this._realtimeAudioContext) {
+        return;
+      }
+
+      if (this._realtimeSource) {
+        try {
+          this._realtimeSource.disconnect();
+        } catch (e) {
+          // Ignore disconnect errors
+        }
+        this._realtimeSource = null;
+      }
+
+      if (this._realtimeProcessor) {
+        try {
+          this._realtimeProcessor.disconnect();
+        } catch (e) {
+          // Ignore disconnect errors
+        }
+        this._realtimeProcessor = null;
+      }
+
+      this._realtimeSource = this._realtimeAudioContext.createMediaStreamSource(stream);
       
       // Create a script processor for real-time audio chunks
-      const processor = this.audioContext.createScriptProcessor(4096, 1, 1);
+      this._realtimeProcessor = this._realtimeAudioContext.createScriptProcessor(4096, 1, 1);
       
-      processor.onaudioprocess = (event) => {
+      this._realtimeProcessor.onaudioprocess = (event) => {
         if (!this.isConnected) return;
         
         const inputBuffer = event.inputBuffer;
@@ -645,8 +987,16 @@ class EmmaBrowserClient {
         });
       };
       
-      source.connect(processor);
-      processor.connect(this.audioContext.destination);
+      this._realtimeSource.connect(this._realtimeProcessor);
+
+      this._realtimeSinkNode = this._realtimeSinkNode || this._realtimeAudioContext.createGain();
+      if (this._realtimeSinkNode) {
+        this._realtimeSinkNode.gain.value = 0;
+        this._realtimeProcessor.connect(this._realtimeSinkNode);
+        this._realtimeSinkNode.connect(this._realtimeAudioContext.destination);
+      } else {
+        this._realtimeProcessor.connect(this._realtimeAudioContext.destination);
+      }
       
       console.log('✅ Real-time audio streaming active');
       
@@ -656,6 +1006,9 @@ class EmmaBrowserClient {
   }
 
   playAudioFallback(base64Audio) {
+    if (!this.voicePlaybackEnabled) {
+      return;
+    }
     try {
       console.log('🎤 Trying Blob URL fallback for audio playback');
       
@@ -692,6 +1045,22 @@ class EmmaBrowserClient {
       this.speak(this.lastEmmaText || 'I\'m having trouble with my voice right now.');
     }
   }
+
+  setVoicePlaybackEnabled(enabled) {
+    const normalized = Boolean(enabled);
+    if (this.voicePlaybackEnabled === normalized) {
+      return;
+    }
+    this.voicePlaybackEnabled = normalized;
+    if (!this.voicePlaybackEnabled && this.synth) {
+      try {
+        this.synth.cancel();
+      } catch (_) {
+        // ignore cancellation errors
+      }
+    }
+    console.log(`🔊 Emma voice playback ${this.voicePlaybackEnabled ? 'enabled' : 'muted'}`);
+  }
 }
 
 // Export for global use
diff --git a/js/emma-chat-experience.js b/js/emma-chat-experience.js
index f47fd0c7..de094b1e 100644
--- a/js/emma-chat-experience.js
+++ b/js/emma-chat-experience.js
@@ -1,4 +1,4 @@
-/**
+/**
  * Emma Chat Experience - Intelligent Memory Companion Chat Interface
  * CTO-approved implementation following Emma's premium design principles
  *
@@ -8,6 +8,46 @@
 
 // Emma Chat Experience - Production Ready
 
+window.metadataIncludesPerson = window.metadataIncludesPerson || ((peopleList, person) => {
+  if (!Array.isArray(peopleList) || !person) return false;
+
+  const targetId = person.id ? String(person.id).trim() : '';
+  if (!targetId) return false;
+
+  const resolveEntryId = (entry) => {
+    if (!entry) return null;
+    if (typeof entry === 'string' || typeof entry === 'number') {
+      const trimmed = String(entry).trim();
+      return trimmed || null;
+    }
+    if (typeof entry === 'object') {
+      const candidate = entry.id ?? entry.personId ?? entry.personID ?? entry.person_id ?? entry.uuid ?? entry.guid;
+      if (candidate === undefined || candidate === null) return null;
+      const trimmed = String(candidate).trim();
+      return trimmed || null;
+    }
+    return null;
+  };
+
+  return peopleList.some(entry => {
+    const entryId = resolveEntryId(entry);
+    return entryId && entryId === targetId;
+  });
+});
+
+window.contentMentionsPerson = window.contentMentionsPerson || ((personName, content) => {
+  if (!personName || !content) return false;
+
+  const escapeRegex = value => value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  const words = personName.trim().split(/\s+/).filter(Boolean).map(escapeRegex);
+  if (words.length === 0) return false;
+
+  const pattern = `\\b${words.join('\\s+')}\\b(?:'s)?`;
+  const regex = new RegExp(pattern, 'i');
+
+  return regex.test(content);
+});
+
 class EmmaChatExperience extends ExperiencePopup {
   constructor(position, settings = {}) {
     super(position, settings);
@@ -20,34 +60,27 @@ class EmmaChatExperience extends ExperiencePopup {
     this.messageContainer = null;
     this.inputField = null;
     this.sendButton = null;
+    this.voiceIntegrationInitialized = false;
+    this.voiceIntegrationInitializing = false;
+    this.initialWelcomeTimeout = null;
+    this.localWelcomeShown = false;
+    this.remoteGreetingReceived = false;
+    this.voicePlaybackEnabled = false;
+    this.voiceToggleButton = null;
 
     // 🧠 Vectorless AI Engine Integration
     this.vectorlessEngine = null;
     this.apiKey = null;
     this.isVectorlessEnabled = false;
-    
+
     // 🧠 CTO REBUILD: UNIFIED EMMA INTELLIGENCE SYSTEM
     this.unifiedIntelligence = new EmmaUnifiedIntelligence({
       dementiaMode: true,
       validationTherapy: true,
       vaultAccess: () => window.emmaWebVault?.vaultData?.content,
-      apiKey: null // Will be set when available
+      apiKey: this.apiKey // Will be set when available
     });
     
-    // Legacy context for transition period
-    this.conversationContext = {
-      currentTopic: null,
-      recentPeople: new Set(),
-      emotionalState: 'positive',
-      lastMemoryMentioned: null,
-      conversationFlow: [],
-      dementiaMode: true,
-      validationMode: true,
-      personalContext: {
-        recentActivities: [],
-        emotionalTone: 'warm and loving'
-      }
-    };
 
     // 💝 Intelligent Memory Capture Integration
     this.intelligentCapture = null;
@@ -70,6 +103,17 @@ class EmmaChatExperience extends ExperiencePopup {
       capabilities: ["memory insights", "capture suggestions", "conversation", "vectorless AI"]
     };
 
+    // Agent SDK chat support
+    this.agentChatEnabled = false;
+    this.agentConnectPromise = null;
+    this.agentConnectionNotified = false;
+
+    // WebSocket retry backoff
+    this.agentRetryCount = 0;
+    this.agentMaxRetries = 5;
+    this.agentRetryDelay = 2000; // Start with 2 seconds
+    this.agentRetryTimeout = null;
+
     // 🚀 CRITICAL: Initialize AI systems on startup
     this.initializeEmmaIntelligence();
 
@@ -136,13 +180,13 @@ class EmmaChatExperience extends ExperiencePopup {
   async initialize() {
     this.initializeEmmaOrb();
     this.setupChatInterface();
-    
+
     // 🎙️ PHASE 3: Initialize voice integration after chat setup
     setTimeout(() => this.initializeVoiceIntegration(), 500);
     this.setupKeyboardShortcuts();
 
-    // Add initial Emma welcome message (single clean bubble)
-    await this.addInitialWelcomeMessage();
+    // Add initial Emma welcome message only if remote agent doesn’t greet
+    this.scheduleInitialWelcome();
     this.loadChatHistory();
 
     // 🧠 Initialize Vectorless AI Engine
@@ -167,6 +211,12 @@ class EmmaChatExperience extends ExperiencePopup {
    * Transforms chat into voice-first multimodal experience
    */
   async initializeVoiceIntegration() {
+    if (this.voiceIntegrationInitialized || this.voiceIntegrationInitializing) {
+      return;
+    }
+
+    this.voiceIntegrationInitializing = true;
+
     try {
       console.log('🎙️ Initializing voice-first chat experience...');
 
@@ -177,7 +227,8 @@ class EmmaChatExperience extends ExperiencePopup {
           speed: 1.0,
           tone: 'caring',
           pacing: 2.5,
-          validationMode: true
+          validationMode: true,
+          apiKey: this.apiKey || null
         });
       } else {
         console.warn('⚠️ EmmaBrowserClient not available');
@@ -189,15 +240,24 @@ class EmmaChatExperience extends ExperiencePopup {
       if (this.emmaVoice) {
         // 🔗 CRITICAL: Connect voice system to chat for transcription
         this.emmaVoice.chatInstance = this;
+        if (typeof this.emmaVoice.setVoicePlaybackEnabled === 'function') {
+          this.emmaVoice.setVoicePlaybackEnabled(this.voicePlaybackEnabled);
+        }
+        this.syncVoiceApiKey(true);
 
         // Connect voice button to Emma's voice system
         this.setupVoiceButton();
 
+        this.voiceIntegrationInitialized = true;
+
         // Set up voice event handlers for chat integration (if needed)
         if (this.setupVoiceEventHandlers) {
           this.setupVoiceEventHandlers();
         }
 
+        // Ensure the chat interface connects to the Agent SDK backend
+        this.connectAgentForChat();
+
         console.log('✅ Emma voice client ready!');
       } else {
         console.warn('⚠️ Emma voice client not available');
@@ -205,10 +265,118 @@ class EmmaChatExperience extends ExperiencePopup {
         this.voiceButton.title = 'Voice system not available';
       }
     } catch (error) {
-      console.error('❌ Voice integration failed:', error);
+      console.error('[VOICE] Integration failed:', error);
       this.voiceButton.style.opacity = '0.5';
       this.voiceButton.title = 'Voice system error: ' + error.message;
+    } finally {
+      this.voiceIntegrationInitializing = false;
+    }
+  }
+
+  /**
+   * Sync the runtime API key with the voice client (if connected)
+   */
+  syncVoiceApiKey(silent = true) {
+    if (this.emmaVoice && typeof this.emmaVoice.setApiKey === 'function') {
+      this.emmaVoice.setApiKey(this.apiKey, { silent });
+    }
+  }
+
+  /**
+   * Ensure the chat agent connection is established for tool usage
+   */
+  async connectAgentForChat() {
+    try {
+      if (!this.emmaVoice) return;
+      if (this.agentChatEnabled && this.emmaVoice.isConnected) return;
+      if (this.agentConnectPromise) return this.agentConnectPromise;
+
+      this.agentConnectPromise = (async () => {
+        try {
+          if (!this.emmaVoice.isConnected) {
+            await this.emmaVoice.connectToEmmaAgent();
+          }
+        } catch (error) {
+          console.error('❌ Failed to connect Emma agent for chat:', error);
+          this.agentChatEnabled = false;
+          if (!this.agentConnectionNotified) {
+            this.addMessage('system', '⚠️ I could not reach Emma\'s advanced memory tools yet. I\'ll keep helping locally.');
+            this.agentConnectionNotified = true;
+          }
+        } finally {
+          this.agentConnectPromise = null;
+        }
+      })();
+
+      return this.agentConnectPromise;
+    } catch (error) {
+      console.error('❌ Agent connection setup error:', error);
+    }
+  }
+
+  /**
+   * Mark that the Agent SDK connection is active
+   */
+  markAgentReady() {
+    this.remoteGreetingReceived = true;
+    if (this.initialWelcomeTimeout) {
+      clearTimeout(this.initialWelcomeTimeout);
+      this.initialWelcomeTimeout = null;
+    }
+
+    // Reset retry count on successful connection
+    this.agentRetryCount = 0;
+    if (this.agentRetryTimeout) {
+      clearTimeout(this.agentRetryTimeout);
+      this.agentRetryTimeout = null;
+    }
+
+    if (this.agentChatEnabled) {
+      if (typeof this.hideTypingIndicator === 'function') {
+        this.hideTypingIndicator();
+      }
+      return;
+    }
+
+    this.agentChatEnabled = true;
+    this.agentConnectionNotified = true;
+    this.addMessage('system', '🤖 Emma is connected to your memory tools and can use them for you.');
+    if (typeof this.hideTypingIndicator === 'function') {
+      this.hideTypingIndicator();
+    }
+  }
+
+  /**
+   * Handle agent disconnects gracefully
+   */
+  markAgentDisconnected() {
+    this.agentChatEnabled = false;
+    this.agentConnectionNotified = false;
+    if (typeof this.hideTypingIndicator === 'function') {
+      this.hideTypingIndicator();
     }
+
+    // Implement exponential backoff for retries
+    this.agentRetryCount++;
+
+    if (this.agentRetryCount > this.agentMaxRetries) {
+      this.addMessage('system', '⚠️ Could not reach Emma\'s advanced memory tools. Using local intelligence only.');
+      this.agentConnectionNotified = true;
+      return;
+    }
+
+    const delay = Math.min(this.agentRetryDelay * Math.pow(2, this.agentRetryCount - 1), 30000);
+    this.addMessage('system', `⚠️ Emma lost connection to the advanced memory tools. Retrying in ${delay/1000}s... (${this.agentRetryCount}/${this.agentMaxRetries})`);
+
+    // Clear existing retry timeout
+    if (this.agentRetryTimeout) {
+      clearTimeout(this.agentRetryTimeout);
+    }
+
+    // Schedule retry with exponential backoff
+    this.agentRetryTimeout = setTimeout(() => {
+      this.connectAgentForChat();
+    }, delay);
   }
 
   /**
@@ -298,13 +466,13 @@ class EmmaChatExperience extends ExperiencePopup {
           this.displayPeopleResults(result.people);
         }
         break;
-        
+
       case 'get_memories':
         if (result.memories && result.memories.length > 0) {
           this.displayMemoryResults(result.memories);
         }
         break;
-        
+
       case 'create_memory_from_voice':
         if (result.success) {
           this.addMessage('system', `💭 New memory created: "${params.content.substring(0, 50)}..."`, {
@@ -313,7 +481,7 @@ class EmmaChatExperience extends ExperiencePopup {
           });
         }
         break;
-        
+
       case 'update_person':
         if (result.success) {
           this.addMessage('system', `👤 Updated ${result.personName} with new details`, {
@@ -357,7 +525,7 @@ class EmmaChatExperience extends ExperiencePopup {
     `).join('');
 
     this.addMessage('emma', `I found ${memories.length} memories:`, {
-      type: 'memory-results', 
+      type: 'memory-results',
       html: `<div class="memories-grid">${memoriesHtml}</div>`
     });
   }
@@ -383,6 +551,34 @@ class EmmaChatExperience extends ExperiencePopup {
     }
   }
 
+  getHeaderActions() {
+    const toggle = this.createVoiceToggleButton();
+    return toggle ? [toggle] : [];
+  }
+
+  createVoiceToggleButton() {
+    if (this.voiceToggleButton && this.voiceToggleButton.tagName) {
+      return this.voiceToggleButton;
+    }
+
+    const button = document.createElement('button');
+    button.id = 'voice-tts-toggle';
+    button.className = 'voice-toggle is-on';
+    button.setAttribute('aria-pressed', 'true');
+
+    const icon = document.createElement('span');
+    icon.className = 'voice-toggle-icon';
+    icon.textContent = '🔊';
+
+    const label = document.createElement('span');
+    label.className = 'voice-toggle-label';
+    label.textContent = 'Voice On';
+
+    button.append(icon, label);
+    this.voiceToggleButton = button;
+    return button;
+  }
+
   renderContent(contentElement) {
     // CLEAN REDESIGN: Remove inner container styling - let ExperiencePopup handle the container
     // Just set up the content layout without duplicating container styles
@@ -461,6 +657,7 @@ class EmmaChatExperience extends ExperiencePopup {
     this.sendButton = document.getElementById('send-btn');
     // NO DUPLICATE close button - ExperiencePopup handles this
     this.voiceButton = document.getElementById('voice-input-btn');
+    this.voiceToggleButton = this.voiceToggleButton || document.getElementById('voice-tts-toggle');
     // Settings button removed - clean chat interface
 
     if (!this.messageContainer || !this.inputField || !this.sendButton || !this.voiceButton) {
@@ -476,6 +673,11 @@ class EmmaChatExperience extends ExperiencePopup {
     this.inputField.addEventListener('keydown', (e) => this.handleInputKeydown(e));
     this.sendButton.addEventListener('click', () => this.sendMessage());
     this.voiceButton.addEventListener('click', () => this.toggleVoiceInput());
+    if (this.voiceToggleButton && !this.voiceToggleButton.dataset.toggleBound) {
+      this.voiceToggleButton.addEventListener('click', () => this.toggleVoicePlayback());
+      this.voiceToggleButton.dataset.toggleBound = 'true';
+    }
+    this.updateVoiceToggleUI();
 
     // Settings removed from chat - access via main settings panel
     // NO DUPLICATE close button event listener - ExperiencePopup handles this
@@ -488,11 +690,39 @@ class EmmaChatExperience extends ExperiencePopup {
 
     // Setup settings modal
     this.setupSettingsModal();
-    
+
     // 🎯 Setup dynamic quick start prompts
     this.setupQuickStartPrompts();
   }
 
+  toggleVoicePlayback() {
+    this.voicePlaybackEnabled = !this.voicePlaybackEnabled;
+    if (this.emmaVoice && typeof this.emmaVoice.setVoicePlaybackEnabled === 'function') {
+      this.emmaVoice.setVoicePlaybackEnabled(this.voicePlaybackEnabled);
+    }
+    this.updateVoiceToggleUI();
+    console.log(`🔊 Emma TTS ${this.voicePlaybackEnabled ? 'enabled' : 'muted'}`);
+  }
+
+  updateVoiceToggleUI() {
+    if (!this.voiceToggleButton) {
+      return;
+    }
+
+    const label = this.voiceToggleButton.querySelector('.voice-toggle-label');
+    const icon = this.voiceToggleButton.querySelector('.voice-toggle-icon');
+    this.voiceToggleButton.classList.toggle('is-on', this.voicePlaybackEnabled);
+    this.voiceToggleButton.classList.toggle('is-muted', !this.voicePlaybackEnabled);
+    this.voiceToggleButton.setAttribute('aria-pressed', this.voicePlaybackEnabled ? 'true' : 'false');
+    this.voiceToggleButton.setAttribute('title', this.voicePlaybackEnabled ? 'Emma will speak responses' : 'Emma voice muted');
+    if (label) {
+      label.textContent = this.voicePlaybackEnabled ? 'Voice On' : 'Voice Off';
+    }
+    if (icon) {
+      icon.textContent = this.voicePlaybackEnabled ? '🔊' : '🔇';
+    }
+  }
+
   /**
    * 🎯 Setup elegant quick start prompts for user engagement
    * Dynamic, on-brand suggestions to guide conversation - appear in chat, disappear when conversation starts
@@ -514,13 +744,13 @@ class EmmaChatExperience extends ExperiencePopup {
       },
       {
         text: "Let's save a new memory",
-        icon: "💝",
+        icon: "📝",
         action: "memory", 
         description: "Create a new memory capsule"
       },
       {
         text: "Ask me about any of your memories",
-        icon: "🧠",
+        icon: "💬",
         action: "explore",
         description: "Explore and reminisce about past memories"
       }
@@ -723,12 +953,15 @@ class EmmaChatExperience extends ExperiencePopup {
       button.addEventListener('click', (e) => {
         const action = e.currentTarget.dataset.action;
         const text = e.currentTarget.dataset.text;
-        
-        // Visual feedback
-        e.currentTarget.style.transform = 'scale(0.95)';
-        setTimeout(() => {
-          e.currentTarget.style.transform = '';
-        }, 150);
+
+        // Visual feedback - store reference to avoid null after timeout
+        const button = e.currentTarget;
+        if (button) {
+          button.style.transform = 'scale(0.95)';
+          setTimeout(() => {
+            if (button) button.style.transform = '';
+          }, 150);
+        }
 
         // Execute the appropriate action
         this.handlePromptAction(action, text);
@@ -808,10 +1041,10 @@ class EmmaChatExperience extends ExperiencePopup {
       "Perfect! What special moment would you like to capture in your memory vault?",
       "I'm here to help! What's the story you'd like to preserve?"
     ];
-    
+
     const response = responses[Math.floor(Math.random() * responses.length)];
     this.addMessage(response, 'emma');
-    
+
     // Focus on the input for immediate typing
     if (this.inputField) {
       this.inputField.focus();
@@ -856,7 +1089,7 @@ class EmmaChatExperience extends ExperiencePopup {
     for (const pattern of pronounPatterns) {
       const pronounMatch = message.match(pattern);
       if (pronounMatch) {
-        const recentPeople = Array.from(this.conversationContext.recentPeople);
+        const recentPeople = Array.from(this.unifiedIntelligence.conversationContext.recentPeople);
         if (recentPeople.length > 0) {
           const resolvedPerson = recentPeople[recentPeople.length - 1]; // Most recent
           console.log(`🎯 CTO: Resolved pronoun "${pronounMatch[1]}" to "${resolvedPerson}" from context`);
@@ -1225,29 +1458,20 @@ class EmmaChatExperience extends ExperiencePopup {
       
       // Find connected memories using same logic as people page
       let connectedMemories = [];
-      
+
       if (window.emmaWebVault?.vaultData?.content?.memories) {
         const vaultMemories = window.emmaWebVault.vaultData.content.memories;
-        
+        const personForMatching = { id: person.id, name: person.name };
+
         for (const [memoryId, memory] of Object.entries(vaultMemories)) {
-          // Check if person is in memory's people metadata
-          if (memory.metadata && memory.metadata.people && 
-              Array.isArray(memory.metadata.people) && 
-              memory.metadata.people.includes(person.id)) {
-            connectedMemories.push({ ...memory, id: memoryId });
-          }
-          
-          // Also check if person's name is mentioned in content
-          if (person.name && memory.content) {
-            const personName = person.name.toLowerCase();
-            const memoryContent = memory.content.toLowerCase();
-            if (memoryContent.includes(personName)) {
-              // Avoid duplicates
-              if (!connectedMemories.find(m => m.id === memoryId)) {
-                connectedMemories.push({ ...memory, id: memoryId });
-              }
-            }
+          const normalizedMemory = { ...memory, id: memory.id || memoryId };
+
+          if (window.metadataIncludesPerson(memory.metadata?.people, personForMatching)) {
+            connectedMemories.push(normalizedMemory);
+            continue;
           }
+
+          // Content-based inference removed; rely on explicit metadata associations only
         }
       }
 
@@ -1625,7 +1849,7 @@ class EmmaChatExperience extends ExperiencePopup {
         <div class="emma-image-modal" id="emma-image-modal" onclick="this.remove()">
           <div class="image-modal-content" onclick="event.stopPropagation()">
             <button class="modal-close-btn" onclick="document.getElementById('emma-image-modal').remove()">
-              ×
+              &times;
             </button>
             <div class="image-container">
               <img src="${imageUrl}" alt="Memory photo" id="modal-image" />
@@ -2065,58 +2289,78 @@ class EmmaChatExperience extends ExperiencePopup {
     const message = this.inputField.value.trim();
     if (!message) return;
 
-    // Hide quick start prompts when user starts typing their own messages
     if (this.hasQuickPromptsShowing) {
       this.hideQuickStartPrompts();
     }
 
-    // Add user message
     const messageId = this.addMessage(message, 'user');
     this.inputField.value = '';
     this.autoResizeTextarea();
     this.handleInputChange();
 
-    // 🎯 ENRICHMENT FSM: Check if this is a response to an enrichment question
+    if (this.emmaVoice) {
+      await this.connectAgentForChat();
+    }
+
+    const canUseAgent = this.agentChatEnabled && this.emmaVoice && this.emmaVoice.isConnected;
+    const localHandled = await this.processLocalChatMessage(message, messageId, {
+      allowDefaultResponse: !canUseAgent
+    });
+
+    if (localHandled) {
+      return;
+    }
+
+    if (canUseAgent) {
+      if (typeof this.showTypingIndicator === 'function') {
+        this.showTypingIndicator();
+      }
+      this.emmaVoice.sendToAgent({ type: 'user_text', text: message, source: 'chat' });
+      return;
+    }
+
+    await this.respondAsEmma(message);
+  }
+
+
+
+
+  async processLocalChatMessage(message, messageId, { allowDefaultResponse = true } = {}) {
     const activeEnrichment = this.findActiveEnrichmentForResponse();
     if (activeEnrichment) {
       await this.processEnrichmentResponse(activeEnrichment, message);
-      return;
+      return true;
     }
 
-    // 🎯 CTO OPTIMIZATION: VAULT OPERATIONS FIRST - Complete intent hierarchy
-    // This prevents ALL vault queries from being captured as memories
     const intent = this.classifyUserIntent(message);
-    
-    // VAULT OPERATIONS have HIGHEST PRIORITY
     if (intent.type === 'people_list' || intent.type === 'memory_search' || intent.type === 'person_inquiry') {
       console.log('🎯 CTO: VAULT OPERATION DETECTED - Bypassing memory capture for:', intent.type, message);
       this.showTypingIndicator();
       setTimeout(() => {
         this.respondAsEmma(message);
       }, 1000 + Math.random() * 1500);
-      return;
+      return true;
     }
 
-    // 💝 Check for memory detection (new messages only)
     if (this.intelligentCapture) {
       const analysisResult = await this.analyzeForMemory(message, messageId);
-      // If intelligent capture already produced a response (unified prompt), stop here
       if (analysisResult && analysisResult.handled) {
-        return;
+        return true;
       }
-    } else {
-      // ... existing code ...
     }
 
-    // Show typing indicator
-    this.showTypingIndicator();
+    if (!allowDefaultResponse) {
+      return false;
+    }
 
-    // Simulate Emma thinking and respond
+    this.showTypingIndicator();
     setTimeout(() => {
       this.respondAsEmma(message);
-    }, 1000 + Math.random() * 1500); // 1-2.5s realistic delay
+    }, 1000 + Math.random() * 1500);
+    return true;
   }
 
+
   addMessage(content, sender, options = {}) {
     // Defensive argument handling: many call sites mistakenly pass (sender, content).
     // Auto-correct if the first arg looks like a sender label and the second does not.
@@ -2134,21 +2378,21 @@ class EmmaChatExperience extends ExperiencePopup {
     const messageDiv = document.createElement('div');
     messageDiv.className = `${sender}-message`;
     messageDiv.id = messageId;
-    
+
     // 🎙️ VOICE: Add voice indicators for transcribed messages
     if (options.isVoice) {
       messageDiv.setAttribute('data-voice', 'true');
     }
-    
+
     // 💝 CRITICAL: Track people mentioned in Emma's responses too
     if (sender === 'emma' && content) {
       const emmaPeople = this.extractPeople(content);
-      emmaPeople.forEach(person => this.conversationContext.recentPeople.add(person));
-      
+      emmaPeople.forEach(person => this.unifiedIntelligence.conversationContext.recentPeople.add(person));
+
       console.log('💝 EMMA RESPONSE TRACKING:', {
         content: content.substring(0, 50) + '...',
         extractedPeople: emmaPeople,
-        recentPeople: Array.from(this.conversationContext.recentPeople)
+        recentPeople: Array.from(this.unifiedIntelligence.conversationContext.recentPeople)
       });
     }
 
@@ -2157,7 +2401,7 @@ class EmmaChatExperience extends ExperiencePopup {
     if (sender === 'emma') {
       // SAFETY: Ensure options exists
       const safeOptions = options || {};
-      
+
       // Handle HTML content vs regular text
       const messageContent = safeOptions.isHtml ? content : `<p>${this.formatMessageContent(content || '')}</p>`;
 
@@ -2224,11 +2468,11 @@ class EmmaChatExperience extends ExperiencePopup {
           console.warn('⚠️ Emma orb fallback for message avatar');
           // High-quality fallback gradient
           orbContainer.style.cssText = `
-            background: radial-gradient(circle at 30% 30%, #8A5EFA, #764ba2, #f093fb);
+            background: radial-gradient(circle at 30% 30%, #8A5EFA, #764ba2, #deb3e4);
             border-radius: 50%;
             width: 100%;
             height: 100%;
-            box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
+            box-shadow: 0 4px 12px rgba(111, 99, 217, 0.3);
           `;
         }
       }
@@ -2257,8 +2501,12 @@ class EmmaChatExperience extends ExperiencePopup {
   }
 
   formatMessageContent(content) {
-    // Basic formatting for Emma's responses
-    return content
+    // Escape HTML, then apply basic formatting for Emma's responses
+    const esc = (s) => (window.escapeHtml ? window.escapeHtml(s) : String(s)
+      .replace(/&/g, '&amp;').replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;').replace(/\"/g, '&quot;').replace(/'/g, '&#39;'));
+    const safe = esc(content || '');
+    return safe
       .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>') // Bold
       .replace(/\*(.*?)\*/g, '<em>$1</em>') // Italic
       .replace(/\n/g, '<br>'); // Line breaks
@@ -2315,426 +2563,78 @@ class EmmaChatExperience extends ExperiencePopup {
 
   async respondAsEmma(userMessage) {
     this.hideTypingIndicator();
-
-    // 🚨 CTO EMERGENCY ROLLBACK: Unified system broken, using working legacy system
-    console.log('🚨 CTO: Using proven legacy system (unified intelligence disabled for emergency)');
-
-    // 🤔 CHECK FOR ACTIVE PERSON ENRICHMENT FLOW
-    if (this.currentPersonEnrichment && 
-        this.currentPersonEnrichment.stage !== 'complete' &&
-        Date.now() - this.currentPersonEnrichment.startedAt < 300000) { // 5 minute timeout
-      
-      console.log('🤔 Active person enrichment detected, handling response');
-      const handled = await this.handlePersonEnrichmentResponse(userMessage, this.currentPersonEnrichment.personName);
-      
-      if (handled) {
-        // If this completed the enrichment, clear it
-        if (this.currentPersonEnrichment.stage === 'complete') {
-          this.currentPersonEnrichment = null;
-        }
-        return;
-      }
+    const response = await this.unifiedIntelligence.analyzeAndRespond(userMessage, this);
+    this.addMessage(response.text, 'emma');
+    if (response.actions && response.actions.length > 0) {
+      this.executeIntelligentActions(response.actions, response.analysis);
     }
+  }
 
-    // 🎯 INTELLIGENT INTENT CLASSIFICATION
-    const intent = this.classifyUserIntent(userMessage);
-    console.log('🧠 CHAT: Intent classified as:', intent);
-
-    // 👥 PEOPLE LIST REQUEST: Show all people in vault
-    if (intent.type === 'people_list') {
-      console.log('👥 CHAT: People list request detected');
-      await this.handlePeopleListRequest(userMessage);
-      return;
-    }
 
-    // 👤 PERSON REQUEST DETECTION: Only for specific person inquiries
-    if (intent.type === 'person_inquiry') {
-      const personRequest = this.detectPersonRequest(userMessage);
-      if (personRequest) {
-        console.log('👤 CHAT: Person request detected:', personRequest);
-        
-        // 🎯 CTO CRITICAL: Track the person being queried for context continuity
-        this.conversationContext.lastQueriedPerson = personRequest.personName;
-        console.log(`🎯 CTO: Set lastQueriedPerson to: ${personRequest.personName}`);
-        
-        await this.handlePersonRequest(personRequest);
+  /**
+   * 🔍 HANDLE MEMORY LIST REQUEST
+   * Shows user their existing memories when they ask "what are my memories"
+   */
+  async handleMemoryListRequest(userMessage) {
+    console.log('🔍 MEMORY LIST: Processing request:', userMessage);
+    
+    try {
+      // Get memories from vault
+      if (!window.emmaWebVault || !window.emmaWebVault.isOpen) {
+        this.addMessage("I'd love to show you your memories! Please make sure your vault is unlocked first.", 'emma');
         return;
       }
-    }
-
-    // 💝 Memory capture detection for ongoing conversations
-    const hasDetectedMemory = Array.from(this.detectedMemories.values()).some(analysis =>
-      analysis.memory && analysis.memory.originalContent &&
-      analysis.memory.originalContent.includes(userMessage.substring(0, 50))
-    );
-
-    if (hasDetectedMemory) {
-      const captureResponse = await this.generateMemoryCaptureResponse(userMessage);
-      this.addMessage(captureResponse, 'emma');
-      return;
-    }
-
-    // 🏛️ CORE VAULT OPERATIONS: Emma's primary job (always works!)
-    if (intent.type === 'vault_operation') {
-      console.log('🏛️ CORE VAULT OPERATION: Handling directly');
-      await this.handleVaultOperation(userMessage, intent);
-      return;
-    }
-
-    // 🔍 MEMORY SEARCH: Handle memory queries intelligently
-    if (intent.type === 'memory_search') {
-      // Check if this is a simple "what are my memories" type query
-      if (/\b(what are|show me|list|tell me)\b.*\b(my|the)\b.*\b(memory|memories)\b/i.test(userMessage)) {
-        console.log('🔍 MEMORY SEARCH: Handling simple memory list request');
-        await this.handleMemoryListRequest(userMessage);
+      
+      const memories = await window.emmaWebVault.listMemories(10); // Get first 10 memories
+      
+      if (!memories || memories.length === 0) {
+        this.addMessage("You don't have any memories in your vault yet. Would you like to create your first memory together?", 'emma');
         return;
       }
       
-      // For complex memory search queries, use vectorless if available
-      if (this.isVectorlessEnabled && this.vectorlessEngine) {
-        try {
-          const result = await this.vectorlessEngine.processQuestion(userMessage);
-          if (result.success) {
-            this.addVectorlessMessage(result.response, result.memories, result.citations, result.suggestions);
-            return;
-          } else {
-            console.warn('💬 Vectorless processing failed, using fallback:', result.error);
-          }
-        } catch (error) {
-          console.error('💬 Vectorless AI error:', error);
-        }
+      // Generate a warm, personal response
+      const memoryCount = memories.length;
+      const totalMemories = Object.keys(window.emmaWebVault.vaultData?.content?.memories || {}).length;
+      
+      let response = `You have ${totalMemories} memory${totalMemories !== 1 ? 'ies' : ''} in your vault! `;
+      
+      if (totalMemories > 10) {
+        response += `Here are your ${memories.length} most recent ones:\n\n`;
+      } else {
+        response += `Here they are:\n\n`;
       }
       
-      // Fallback for memory search without vectorless
-      await this.handleMemoryListRequest(userMessage);
-      return;
-    }
-
-    // 🚀 ADVANCED AI MODE: Use OpenAI for conversation and questions
-    if (this.apiKey && intent.type === 'conversation') {
-      console.log('🚀 ADVANCED AI MODE: Using OpenAI for intelligent conversation');
-      console.log('🎯 Intent:', intent);
-      try {
-        const response = await this.generateIntelligentEmmaResponse(userMessage, intent);
-        this.addMessage(response, 'emma');
-        this.addAIModeIndicator(); // Show that AI was used
-        return;
-      } catch (error) {
-        console.warn('🤖 AI response failed, using fallback:', error);
-        // Don't show error for conversation - just fall through to dynamic response
+      // List recent memories with dates
+      memories.forEach((memory, index) => {
+        const title = memory.title || 'Untitled Memory';
+        const date = new Date(memory.created || memory.timestamp || Date.now()).toLocaleDateString();
+        response += `${index + 1}. **${title}** (${date})\n`;
+        
+        // Add a brief preview of the content if available
+        if (memory.content && memory.content.length > 0) {
+          const preview = memory.content.substring(0, 100);
+          response += `   ${preview}${memory.content.length > 100 ? '...' : ''}\n\n`;
+        } else {
+          response += '\n';
+        }
+      });
+      
+      if (totalMemories > 10) {
+        response += `\nYou can view all your memories in the constellation view or ask me to search for specific ones!`;
       }
+      
+      this.addMessage(response, 'emma');
+      console.log('✅ MEMORY LIST: Successfully displayed memories');
+      
+    } catch (error) {
+      console.error('❌ MEMORY LIST ERROR:', error);
+      this.addMessage("I had trouble accessing your memories right now. Please try again in a moment.", 'emma');
     }
-
-    // 💜 FALLBACK: Dynamic responses for basic interactions
-    const response = await this.generateDynamicEmmaResponse(userMessage);
-    this.addMessage(response, 'emma');
   }
 
   /**
-   * 🎯 INTELLIGENT INTENT CLASSIFICATION
-   * Determines what the user is trying to do
-   */
-  classifyUserIntent(message) {
-    const lower = message.toLowerCase().trim();
-
-    // 👥 PEOPLE LISTING QUERIES (asking about ALL people)
-    if (/\b(who are|what are|show me|list|see|view)\b.*\b(my|the|all)\b.*\b(people|person|contacts|family|friends)\b/i.test(message) ||
-        /\b(my|all)\b.*\b(people|contacts|family|friends)\b/i.test(message) ||
-        /\bpeople\b.*\b(list|vault|have|know)\b/i.test(message)) {
-      return { type: 'people_list', confidence: 0.95 };
-    }
-
-    // 👤 Person inquiries (asking ABOUT someone specific)
-    if (/^(who is|tell me about|show me|what about|how about)\s+[A-Z]/i.test(message) ||
-        /^[A-Z][a-z]+\s*\?+\s*$/.test(message)) {
-      return { type: 'person_inquiry', confidence: 0.9 };
-    }
-
-    // 🔍 Memory search queries - ENHANCED to catch edge cases
-    if (/\b(find|search|show|what|who|when|where|list|see|view|tell me)\b.*\b(memory|memories|remember)\b/i.test(message) ||
-        /\b(what are|show me|tell me|list)\b.*\b(my|the)\b.*\b(memory|memories)\b/i.test(message) ||
-        /\bmemory\b.*\b(list|search|find|show)\b/i.test(message) ||
-        /\bmemories\b.*\b(list|search|find|show)\b/i.test(message)) {
-      return { type: 'memory_search', confidence: 0.9 };
-    }
-
-    // 🏛️ CORE VAULT OPERATIONS (Emma's primary job - always works!)
-    // ULTRA-ROBUST for dementia users - catch every possible way they might ask
-    if (
-      // Direct vault operations
-      /\b(add|create|new|save)\b.*\b(person|people|memory|memories|vault)\b/i.test(message) ||
-      /\b(add|save)\b.*\b(to|in)\b.*\b(vault|emma)\b/i.test(message) ||
-      /\blet'?s?\s+(add|create|save)\b/i.test(message) ||
-      
-      // Natural language patterns for dementia users
-      /\b(?:want|need|would\s+like)\s+(?:to\s+)?(?:add|save|create|put)\b/i.test(message) ||
-      /\b(?:please|can\s+you)\s+(?:add|save|create|put)\b/i.test(message) ||
-      /\b(?:put|place)\s+[a-zA-Z]+\b/i.test(message) ||
-      
-      // Simple "add [name]" pattern
-      /\badd\s+[a-zA-Z]+/i.test(message) ||
-      
-      // "I have a person/friend/family member" patterns
-      /\b(?:have|met|know)\s+(?:a\s+)?(?:person|friend|family|someone)\b/i.test(message)
-    ) {
-      return { type: 'vault_operation', confidence: 0.95 };
-    }
-
-    // 💬 General conversation & questions (use AI if available)
-    if (/^(what|who|when|where|why|how|can|could|would|should|do|does|did|is|are|was|were)\b/i.test(message) ||
-        message.includes('?') ||
-        /\b(hello|hi|hey|thank|thanks|help|tell me|explain)\b/i.test(message)) {
-      return { type: 'conversation', confidence: 0.6 };
-    }
-
-    // 🎯 Other commands/actions
-    if (/\b(add|create|new|save|let|want|need|help)\b/i.test(message)) {
-      return { type: 'general_command', confidence: 0.5 };
-    }
-
-    // 💬 Default: General conversation
-    return { type: 'conversation', confidence: 0.4 };
-  }
-
-  /**
-   * 🚀 GENERATE INTELLIGENT EMMA RESPONSE using OpenAI
-   * This is where the real AI magic happens!
-   */
-  async generateIntelligentEmmaResponse(userMessage, intent) {
-    const env = (typeof window !== 'undefined' && window.EMMA_ENV) ? window.EMMA_ENV : 'production';
-    const useLLM = env !== 'production' && !!this.apiKey;
-
-    try {
-      // Get vault context for personalization
-      const vaultContext = await this.getVaultContextForAI();
-
-      if (!useLLM) {
-        // Gentle, local-first fallback aligned with Emma ethos
-        const topics = (vaultContext.recentTopics || []).slice(0, 3);
-        const topicStr = topics.length ? ` I remember recent topics like ${topics.join(', ')}.` : '';
-        const suggestions = [
-          'Would you like me to save this as a memory?',
-          'Should we look for related photos together?',
-          'Want to add who was with you in this memory?'
-        ];
-        const suggestion = suggestions[Math.floor(Math.random() * suggestions.length)];
-        return (
-          `I’m here with you. Let’s explore this together.${topicStr} ` +
-          `${suggestion}`
-        );
-      }
-
-      // Build the prompt based on intent and context
-      const prompt = this.buildEmmaPrompt(userMessage, intent, vaultContext);
-
-      const response = await fetch('https://api.openai.com/v1/chat/completions', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          'Authorization': `Bearer ${this.apiKey}`
-        },
-        body: JSON.stringify({
-          model: 'gpt-4',
-          messages: [
-            { role: 'system', content: prompt.system },
-            { role: 'user', content: prompt.user }
-          ],
-          max_tokens: 300,
-          temperature: 0.7
-        })
-      });
-
-      if (!response.ok) throw new Error(`OpenAI API error: ${response.status}`);
-      const data = await response.json();
-      const aiResponse = data.choices[0]?.message?.content;
-      if (aiResponse) return aiResponse.trim();
-      throw new Error('No response content from OpenAI');
-
-    } catch (error) {
-      // Final safe fallback to ensure no broken UX
-      const calm = 'I’m here with you. Let’s take this step by step.';
-      return `${calm} Would you like me to save this as a memory?`;
-    }
-  }
-
-  /**
-   * 🧠 BUILD EMMA-SPECIFIC PROMPT for OpenAI
-   */
-  buildEmmaPrompt(userMessage, intent, vaultContext) {
-    // 💝 CRITICAL: Include conversation context for continuity
-    const conversationHistory = this.conversationContext.conversationFlow
-      .slice(-3)
-      .map(flow => `User: ${flow.message}`)
-      .join('\n');
-
-    const systemPrompt = `You are Emma, an intelligent memory companion. You help users organize, explore, and interact with their personal memories in a warm, helpful way.
-
-PERSONALITY:
-- Warm, caring, and memory-focused
-- Always helpful but never overwhelming
-- Gentle and patient, especially for users with memory challenges
-- Focus on preserving and celebrating memories
-
-CRITICAL - DEMENTIA CARE MODE (ALWAYS ACTIVE FOR THIS USER):
-- NEVER correct or contradict any memories, even if they seem inconsistent
-- Use validation therapy - affirm their feelings and experiences always
-- Focus on emotional truth rather than factual accuracy
-- Maintain warmth and patience in every single response
-- If memories seem confused, gently redirect to positive aspects
-- ALWAYS validate what they're sharing as real and meaningful
-- Never use phrases like "Do you remember" or "Are you sure"
-- When asked about people ("show me Mark"), provide warm recall assistance
-- Help them remember relationships, shared experiences, and emotional connections
-
-CONVERSATION CONTEXT:
-Recent conversation flow:
-${conversationHistory}
-
-People mentioned recently: ${Array.from(this.conversationContext.recentPeople).join(', ') || 'None'}
-Current emotional tone: ${this.conversationContext.emotionalState}
-Family/People context: Based on vault data and conversation
-
-VAULT CONTEXT:
-- User has ${vaultContext.memoryCount} memories in their vault
-- Recent memories include: ${vaultContext.recentTopics.join(', ')}
-- People in vault: ${vaultContext.people.join(', ')}
-
-CAPABILITIES:
-- Provide warm conversation about memories
-- Answer questions about their vault and memories
-- Give gentle encouragement about memory preservation
-- Help them reflect on their experiences
-
-NOTE: Core vault operations (adding people, creating memories) are handled by Emma's built-in systems. Focus on conversation, encouragement, and emotional support.
-
-INTENT: ${intent.type}
-${intent.type === 'conversation' ? 'User wants to have a conversation. Be warm, engaging, and memory-focused. Provide emotional support and encouragement.' : ''}
-
-RULES:
-- Keep responses concise (1-3 sentences)
-- Always be encouraging about memory preservation
-- NEVER contradict or correct memories - validate everything
-- Never mention technical details or AI limitations
-- If unsure, offer to help them explore their memories`;
-
-    return {
-      system: systemPrompt,
-      user: userMessage
-    };
-  }
-
-  /**
-   * 📊 GET VAULT CONTEXT for AI responses
-   */
-  async getVaultContextForAI() {
-    try {
-      const vault = window.emmaWebVault?.vaultData?.content;
-      
-      if (!vault) {
-        return {
-          memoryCount: 0,
-          recentTopics: ['No memories yet'],
-          people: ['No people yet']
-        };
-      }
-
-      const memories = vault.memories || {};
-      const people = vault.people || {};
-      
-      // Get recent memory topics
-      const memoryList = Object.values(memories);
-      const recentTopics = memoryList
-        .sort((a, b) => (b.timestamp || 0) - (a.timestamp || 0))
-        .slice(0, 3)
-        .map(m => m.title || 'Untitled memory')
-        .filter(Boolean);
-
-      // Get people names
-      const peopleNames = Object.values(people)
-        .map(p => p.name)
-        .filter(Boolean)
-        .slice(0, 5);
-
-      return {
-        memoryCount: memoryList.length,
-        recentTopics: recentTopics.length ? recentTopics : ['No recent memories'],
-        people: peopleNames.length ? peopleNames : ['No people yet']
-      };
-
-    } catch (error) {
-      console.error('📊 Error getting vault context:', error);
-      return {
-        memoryCount: 0,
-        recentTopics: ['Context unavailable'],
-        people: ['Context unavailable']
-      };
-    }
-  }
-
-  /**
-   * 🔍 HANDLE MEMORY LIST REQUEST
-   * Shows user their existing memories when they ask "what are my memories"
-   */
-  async handleMemoryListRequest(userMessage) {
-    console.log('🔍 MEMORY LIST: Processing request:', userMessage);
-    
-    try {
-      // Get memories from vault
-      if (!window.emmaWebVault || !window.emmaWebVault.isOpen) {
-        this.addMessage("I'd love to show you your memories! Please make sure your vault is unlocked first.", 'emma');
-        return;
-      }
-      
-      const memories = await window.emmaWebVault.listMemories(10); // Get first 10 memories
-      
-      if (!memories || memories.length === 0) {
-        this.addMessage("You don't have any memories in your vault yet. Would you like to create your first memory together?", 'emma');
-        return;
-      }
-      
-      // Generate a warm, personal response
-      const memoryCount = memories.length;
-      const totalMemories = Object.keys(window.emmaWebVault.vaultData?.content?.memories || {}).length;
-      
-      let response = `You have ${totalMemories} memory${totalMemories !== 1 ? 'ies' : ''} in your vault! `;
-      
-      if (totalMemories > 10) {
-        response += `Here are your ${memories.length} most recent ones:\n\n`;
-      } else {
-        response += `Here they are:\n\n`;
-      }
-      
-      // List recent memories with dates
-      memories.forEach((memory, index) => {
-        const title = memory.title || 'Untitled Memory';
-        const date = new Date(memory.created || memory.timestamp || Date.now()).toLocaleDateString();
-        response += `${index + 1}. **${title}** (${date})\n`;
-        
-        // Add a brief preview of the content if available
-        if (memory.content && memory.content.length > 0) {
-          const preview = memory.content.substring(0, 100);
-          response += `   ${preview}${memory.content.length > 100 ? '...' : ''}\n\n`;
-        } else {
-          response += '\n';
-        }
-      });
-      
-      if (totalMemories > 10) {
-        response += `\nYou can view all your memories in the constellation view or ask me to search for specific ones!`;
-      }
-      
-      this.addMessage(response, 'emma');
-      console.log('✅ MEMORY LIST: Successfully displayed memories');
-      
-    } catch (error) {
-      console.error('❌ MEMORY LIST ERROR:', error);
-      this.addMessage("I had trouble accessing your memories right now. Please try again in a moment.", 'emma');
-    }
-  }
-
-  /**
-   * 🏛️ HANDLE CORE VAULT OPERATIONS
-   * Emma's primary job - managing memories and people
+   * 🏛️ HANDLE CORE VAULT OPERATIONS
+   * Emma's primary job - managing memories and people
    */
   async handleVaultOperation(userMessage, intent) {
     console.log('🏛️ Processing vault operation:', userMessage);
@@ -2932,37 +2832,38 @@ RULES:
         if (!window.emmaWebVault.vaultData.content.people) {
           window.emmaWebVault.vaultData.content.people = {};
         }
-        
+
         window.emmaWebVault.vaultData.content.people[newPerson.id] = newPerson;
         console.log('👤 Added to vault data structure');
-        
+
         // Trigger save
         await window.emmaWebVault.scheduleElegantSave();
         console.log('👤 Vault save scheduled');
-        
+
         // 💜 DEMENTIA-FRIENDLY SUCCESS MESSAGE
         this.addMessage(`✅ Perfect! I've added ${personName} to your vault.`, 'emma');
         this.addVaultOperationIndicator(); // Show that this was a core vault operation
         console.log('✅ PERSON ADDED SUCCESSFULLY:', personName);
-        
+
         // 🌟 CRITICAL: Refresh constellation after adding new person
         setTimeout(() => {
           this.refreshConstellationAfterPersonAdd();
         }, 500);
-        
+
         // 🤔 GENTLE FOLLOW-UP CONVERSATION
         setTimeout(() => {
           this.startPersonEnrichmentFlow(personName);
         }, 1500);
-        
+
+        saved = true;
       } else {
-        console.error('❌ Vault not available:', { 
-          hasWebVault: !!window.emmaWebVault, 
-          hasVaultData: !!window.emmaWebVault?.vaultData 
+        console.error('❌ Vault not available:', {
+          hasWebVault: !!window.emmaWebVault,
+          hasVaultData: !!window.emmaWebVault?.vaultData
         });
         this.addMessage("I'm having trouble accessing your vault right now. Please make sure it's unlocked and try again.", 'emma');
       }
-      
+
     } catch (error) {
       console.error('❌ PERSON ADD ERROR:', error);
       this.addMessage(`I had trouble adding ${personName} to your vault. Let me try again in a moment.`, 'emma');
@@ -3005,7 +2906,7 @@ RULES:
    */
   async startPersonEnrichmentFlow(personName) {
     console.log('🤔 Starting person enrichment flow for:', personName);
-    
+
     // 💜 GENTLE, NON-OVERWHELMING QUESTIONS
     const followUpQuestions = [
       `Tell me a little about ${personName}. How do you know them?`,
@@ -3013,10 +2914,10 @@ RULES:
       `Would you like to tell me how ${personName} is important to you?`,
       `Is there anything particular about ${personName} that makes you smile?`
     ];
-    
+
     // Pick a random gentle question
     const question = followUpQuestions[Math.floor(Math.random() * followUpQuestions.length)];
-    
+
     // 🕰️ Give them time to process the success first
     setTimeout(() => {
       this.addMessage(question, 'emma');
@@ -3027,7 +2928,7 @@ RULES:
         stage: 'relationship', // relationship, details, memories, complete
         startedAt: Date.now()
       };
-      
+
     }, 2000); // Wait 2 seconds after success message
   }
 
@@ -3037,23 +2938,23 @@ RULES:
    */
   async handlePersonEnrichmentResponse(userMessage, personName) {
     console.log('🤔 Handling enrichment response for:', personName, userMessage);
-    
+
     // 🚫 CHECK FOR SKIP/DECLINE SIGNALS
     const skipPatterns = [
       /\b(no|nah|skip|pass|not now|maybe later|that'?s enough|i'?m good|all set)\b/i,
       /\b(move on|next|done|finished|enough|nothing else)\b/i,
       /\b(don'?t want|not interested|not really)\b/i
     ];
-    
+
     const isSkipping = skipPatterns.some(pattern => pattern.test(userMessage.toLowerCase()));
-    
+
     if (isSkipping) {
       console.log('🤔 User is skipping enrichment');
       this.addMessage(`That's perfectly fine! ${personName} is safely in your vault. We can always add more details later.`, 'emma');
       this.currentPersonEnrichment = null; // Clear the enrichment flow
       return true;
     }
-    
+
     try {
       // Find the person in vault
       const vault = window.emmaWebVault?.vaultData?.content;
@@ -3061,7 +2962,7 @@ RULES:
         console.error('❌ No people section in vault');
         return false;
       }
-      
+
       // Find person by name
       let targetPerson = null;
       for (const [id, person] of Object.entries(vault.people)) {
@@ -3075,7 +2976,7 @@ RULES:
         console.error('❌ Person not found in vault:', personName);
         return false;
       }
-      
+
       // 💝 ADD ENRICHMENT INFO
       if (!targetPerson.enrichment) {
         targetPerson.enrichment = {
@@ -3085,13 +2986,13 @@ RULES:
           addedAt: new Date().toISOString()
         };
       }
-      
+
       const stage = this.currentPersonEnrichment?.stage || 'relationship';
-      
+
       if (stage === 'relationship') {
         targetPerson.enrichment.relationship = userMessage;
         targetPerson.notes = `${targetPerson.notes}\nRelationship: ${userMessage}`;
-        
+
         // 💬 ACKNOWLEDGING RESPONSE
         const acknowledgments = [
           `That's wonderful! ${userMessage.includes('friend') ? 'Friends are so precious.' : 'Thank you for sharing that.'}`,
@@ -3099,17 +3000,17 @@ RULES:
           `That's beautiful. ${personName} sounds like someone special.`,
           `Thank you for telling me about your connection with ${personName}.`
         ];
-        
+
         const ack = acknowledgments[Math.floor(Math.random() * acknowledgments.length)];
         this.addMessage(ack, 'emma');
-        
+
         // 🎯 OPTIONAL FOLLOW-UP
         setTimeout(() => {
           this.addMessage(`Is there anything else you'd like me to remember about ${personName}? Or we can move on to something else - whatever feels right for you.`, 'emma');
-          
+
           this.currentPersonEnrichment.stage = 'complete';
         }, 2500);
-        
+
       } else {
         // Additional details
         if (!targetPerson.enrichment.details) {
@@ -3117,19 +3018,19 @@ RULES:
         } else {
           targetPerson.enrichment.details += `\n${userMessage}`;
         }
-        
+
         targetPerson.notes += `\nAdditional: ${userMessage}`;
-        
+
         this.addMessage(`Thank you for sharing that about ${personName}. I'll keep that in your vault.`, 'emma');
         this.currentPersonEnrichment.stage = 'complete';
       }
-      
+
       // 💾 SAVE ENRICHMENT
       await window.emmaWebVault.scheduleElegantSave();
       console.log('✅ Person enrichment saved:', targetPerson.enrichment);
-      
+
       return true;
-      
+
     } catch (error) {
       console.error('❌ Error handling person enrichment:', error);
       return false;
@@ -3540,6 +3441,12 @@ RULES:
             }
           }
           break;
+
+        case 'displayMemoryResults':
+          if (analysis.memories) {
+            this.displayMemoryResults(analysis.memories);
+          }
+          break;
       }
     }
   }
@@ -3547,7 +3454,7 @@ RULES:
   // 💝 CRITICAL: Update conversation context for continuity
   updateConversationContext(userMessage) {
     // Track conversation flow
-    this.conversationContext.conversationFlow.push({
+    this.unifiedIntelligence.conversationContext.conversationFlow.push({
       timestamp: Date.now(),
       message: userMessage,
       detected: {
@@ -3558,37 +3465,37 @@ RULES:
     });
 
     // Keep only last 5 exchanges for context
-    if (this.conversationContext.conversationFlow.length > 5) {
-      this.conversationContext.conversationFlow.shift();
+    if (this.unifiedIntelligence.conversationContext.conversationFlow.length > 5) {
+      this.unifiedIntelligence.conversationContext.conversationFlow.shift();
     }
 
     // Update people mentioned
     const people = this.extractPeople(userMessage);
-    people.forEach(person => this.conversationContext.recentPeople.add(person));
+    people.forEach(person => this.unifiedIntelligence.conversationContext.recentPeople.add(person));
     
     // 💜 CTO ENHANCEMENT: Enhanced context tracking for memory companion
-    this.conversationContext.currentTopic = this.extractTopic(userMessage);
-    this.conversationContext.lastUserIntent = people.length > 0 ? 'discussing_person' : 'general';
+    this.unifiedIntelligence.conversationContext.currentTopic = this.extractTopic(userMessage);
+    this.unifiedIntelligence.conversationContext.lastUserIntent = people.length > 0 ? 'discussing_person' : 'general';
     
     // 🎯 CTO CRITICAL: Track the MAIN SUBJECT of user queries (not just mentioned people)
     if (people.length > 0) {
-      this.conversationContext.lastQueriedPerson = people[0]; // The person user specifically asked about
+      this.unifiedIntelligence.conversationContext.lastQueriedPerson = people[0]; // The person user specifically asked about
     }
     
     console.log('💝 CTO CONTEXT UPDATE:', {
       userMessage,
       extractedPeople: people,
-      recentPeople: Array.from(this.conversationContext.recentPeople),
-      currentTopic: this.conversationContext.currentTopic,
-      lastIntent: this.conversationContext.lastUserIntent,
-      conversationFlow: this.conversationContext.conversationFlow.length
+      recentPeople: Array.from(this.unifiedIntelligence.conversationContext.recentPeople),
+      currentTopic: this.unifiedIntelligence.conversationContext.currentTopic,
+      lastIntent: this.unifiedIntelligence.conversationContext.lastUserIntent,
+      conversationFlow: this.unifiedIntelligence.conversationContext.conversationFlow.length
     });
   }
 
   // 🧠 DEMENTIA-AWARE RESPONSES: Always validate, never contradict
   generateDementiaAwareResponse(userMessage) {
     const lower = userMessage.toLowerCase();
-    const context = this.conversationContext;
+    const context = this.unifiedIntelligence.conversationContext;
     
     // Dynamically detect people from vault and respond appropriately
     const mentionedPeople = this.extractPeople(userMessage);
@@ -3920,9 +3827,9 @@ RULES:
         
         // Create a photo preview message
         const photoPreview = `
-          <div style="margin: 10px 0; padding: 15px; background: rgba(134, 88, 255, 0.1); border-radius: 12px; border: 2px dashed rgba(134, 88, 255, 0.3);">
+          <div style="margin: 10px 0; padding: 15px; background: rgba(111, 99, 217, 0.1); border-radius: 12px; border: 2px dashed rgba(111, 99, 217, 0.3);">
             <img src="${imageData}" style="max-width: 200px; max-height: 200px; border-radius: 8px; object-fit: cover;">
-            <div style="margin-top: 8px; font-size: 14px; color: #8658ff;">
+            <div style="margin-top: 8px; font-size: 14px; color: #6f63d9;">
               📷 Photo with ${personName} - Ready to save!
             </div>
           </div>
@@ -4741,6 +4648,10 @@ RULES:
    * DYNAMIC & PERSONAL: Different greetings based on time, vault content, recent activity
    */
   async addInitialWelcomeMessage() {
+    if (this.remoteGreetingReceived || this.localWelcomeShown) {
+      return;
+    }
+    this.localWelcomeShown = true;
 
     // Get current session context
     const hour = new Date().getHours();
@@ -4791,6 +4702,18 @@ RULES:
     console.log('💬 UNIQUE WELCOME GENERATED:', welcomeMessage.substring(0, 50) + '...');
   }
 
+  scheduleInitialWelcome() {
+    if (this.initialWelcomeTimeout || this.localWelcomeShown) {
+      return;
+    }
+    this.initialWelcomeTimeout = setTimeout(() => {
+      this.initialWelcomeTimeout = null;
+      if (!this.remoteGreetingReceived) {
+        this.addInitialWelcomeMessage();
+      }
+    }, 1200);
+  }
+
   // Chat settings modal removed - access via main settings panel
 
   /**
@@ -4922,6 +4845,8 @@ RULES:
     this.debugMode = debugMode;
     this.dementiaMode = dementiaMode;
 
+    this.syncVoiceApiKey(false);
+
     // Reinitialize vectorless engine if API key changed
     if (apiKey) {
       this.initializeVectorlessEngine();
@@ -5027,6 +4952,8 @@ RULES:
     this.dementiaMode = newDementiaMode;
     this.debugMode = newDebugMode;
 
+    this.syncVoiceApiKey(false);
+
     // Save to localStorage
     const settings = {
       apiKey: this.apiKey,
@@ -5084,37 +5011,87 @@ RULES:
    */
   loadVectorlessSettings() {
     try {
-          // 🚀 DEMO SECURITY: API keys disabled for family demo
-    
-    // 1. SECURITY LOCKDOWN: No API key access for demo safety
-    this.apiKey = null; // DEMO MODE: API keys disabled for security
-      
-      // 2. Check old vectorless settings format (backup)
-      if (!this.apiKey) {
-        const stored = localStorage.getItem('emma-vectorless-settings');
-        if (stored) {
-          const settings = JSON.parse(stored);
-          this.apiKey = settings.apiKey || null;
+      const normalizeApiKey = (value) => {
+        if (!value || typeof value !== 'string') return null;
+        const trimmed = value.trim();
+        return trimmed.length ? trimmed : null;
+      };
+
+      this.apiKey = null;
+      let legacySettings = null;
+
+      // 1. Primary source: redesigned settings page
+      const generalSettingsRaw = localStorage.getItem('emmaSettings');
+      if (generalSettingsRaw) {
+        try {
+          const generalSettings = JSON.parse(generalSettingsRaw);
+          const modernKey = normalizeApiKey(generalSettings?.apiKey);
+          if (modernKey) {
+            this.apiKey = modernKey;
+          }
+        } catch (settingsError) {
+          if (window.EMMA_DEBUG) {
+            console.warn('emmaSettings parse failed:', settingsError);
+          }
         }
       }
-      
-      // 3. Check global API key (backup)
+
+      // 2. Legacy storage fallback (vectorless modal)
+      const legacyRaw = localStorage.getItem('emma-vectorless-settings');
+      if (legacyRaw) {
+        try {
+          legacySettings = JSON.parse(legacyRaw);
+          if (!this.apiKey) {
+            const legacyKey = normalizeApiKey(legacySettings.apiKey);
+            if (legacyKey) {
+              this.apiKey = legacyKey;
+            }
+          }
+        } catch (legacyError) {
+          if (window.EMMA_DEBUG) {
+            console.warn('Legacy vectorless settings parse failed:', legacyError);
+          }
+          legacySettings = null;
+        }
+      }
+
+      // 3. Global fallback for embedded demos or manual overrides
       if (!this.apiKey && window.API_KEY) {
-        this.apiKey = window.API_KEY;
-        console.log('💬 Using global API key for Emma responses');
+        const globalKey = normalizeApiKey(window.API_KEY);
+        if (globalKey) {
+          this.apiKey = globalKey;
+          console.log('💬 Using global API key for Emma responses');
+        }
       }
-      
-      // 🔧 Load other settings
-      this.dementiaMode = localStorage.getItem('emma-dementia-mode') === 'true';
-      this.debugMode = localStorage.getItem('emma-debug-mode') === 'true';
-      
+
+      // 4. Feature toggles (persisted separately, with legacy fallback)
+      const dementiaFlag = localStorage.getItem('emma-dementia-mode');
+      if (dementiaFlag !== null) {
+        this.dementiaMode = dementiaFlag === 'true';
+      } else if (legacySettings && typeof legacySettings.dementiaMode === 'boolean') {
+        this.dementiaMode = legacySettings.dementiaMode;
+      } else {
+        this.dementiaMode = false;
+      }
+
+      const debugFlag = localStorage.getItem('emma-debug-mode');
+      if (debugFlag !== null) {
+        this.debugMode = debugFlag === 'true';
+      } else if (legacySettings && typeof legacySettings.debugMode === 'boolean') {
+        this.debugMode = legacySettings.debugMode;
+      } else {
+        this.debugMode = false;
+      }
+
+      this.syncVoiceApiKey(true);
+
       // 🎯 LOG RESULTS
       if (this.apiKey) {
         console.log('✅ OpenAI API key found and loaded successfully!');
       } else {
         console.warn('💬 No API key found - Emma will use intelligent fallbacks');
       }
-      
+
     } catch (error) {
       console.warn('💬 Could not load vectorless settings:', error);
     }
@@ -5241,7 +5218,7 @@ RULES:
     try {
       // Generate dynamic response for media requests
       const response = await this.generateDynamicEmmaResponse(`The user wants to save photos/media: "${message}"`);
-      await this.addMessage(response || "I'd love to help you save those photos!", 'emma', null, 'response');
+      await this.addMessage(response || "I'd love to help you save those photos!", 'emma', {});
 
       // Create a basic memory from the request
       const memory = {
@@ -5269,8 +5246,36 @@ RULES:
 
     } catch (error) {
       console.error('❌ Error handling media request:', error);
-      await this.addMessage("I'd love to help you save those photos! Let me set that up for you.", 'emma', null, 'response');
+      await this.addMessage("I'd love to help you save those photos! Let me set that up for you.", 'emma', {});
+    }
+  }
+
+  /**
+   * Classify user intent for message routing
+   */
+  classifyUserIntent(message) {
+    const lowerMsg = message.toLowerCase().trim();
+
+    // People list queries
+    if (/\b(show|list|display|get|who are)\s+(all\s+)?(my\s+)?(people|persons|contacts|friends|family)\b/i.test(lowerMsg) ||
+        /\b(all\s+)?(my\s+)?people\s+(list|I\s+know)\b/i.test(lowerMsg)) {
+      return { type: 'people_list', confidence: 0.9 };
+    }
+
+    // Memory search queries
+    if (/\b(show|find|search|display|get|list)\s+(me\s+)?(all\s+)?(my\s+)?memor(y|ies)\b/i.test(lowerMsg) ||
+        /\bwhat\s+memor(y|ies)\b/i.test(lowerMsg) ||
+        /\bdo\s+I\s+have.*memor(y|ies)\b/i.test(lowerMsg)) {
+      return { type: 'memory_search', confidence: 0.9 };
+    }
+
+    // Person inquiry
+    if (/\b(who\s+is|tell\s+me\s+about|what\s+about|show\s+me)\s+\w+/i.test(lowerMsg)) {
+      return { type: 'person_inquiry', confidence: 0.7 };
     }
+
+    // General conversation
+    return { type: 'general', confidence: 0.5 };
   }
 
   /**
@@ -5458,7 +5463,11 @@ RULES:
       return;
     }
 
-    // Show memory preview dialog
+    const autoSaved = await this.tryAutoSaveMemory(analysis.memory, analysis.memory?.id, 'chat-detected');
+    if (autoSaved) {
+      return;
+    }
+
     this.showMemoryPreviewDialog(analysis.memory);
   }
 
@@ -5495,6 +5504,7 @@ RULES:
    * Show memory preview dialog
    */
   showMemoryPreviewDialog(memory) {
+    const esc = (s) => (window.escapeHtml ? window.escapeHtml(String(s)) : String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\"/g, '&quot;').replace(/'/g, '&#39;'));
     // 🎯 CRITICAL FIX: Store memory in temporary storage for editing
     this.temporaryMemories.set(memory.id, memory);
     console.log('🎯 MOBILE PREVIEW: Stored temporary memory for editing:', memory.id);
@@ -5508,14 +5518,14 @@ RULES:
       <!-- 📱 MOBILE HEADER: Full-width with close button -->
       <div class="mobile-header">
         <div class="header-content">
-          <h2 class="memory-title">${memory.title || 'Beautiful Memory'}</h2>
+          <h2 class="memory-title">${esc(memory.title || 'Beautiful Memory')}</h2>
           <button class="close-btn" onclick="this.closest('.memory-preview-dialog').remove()">
             <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
               <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
             </svg>
           </button>
         </div>
-        <div class="memory-date">${memory.metadata?.date || 'Saturday, August 23, 2025'}</div>
+        <div class="memory-date">${esc(memory.metadata?.date || 'Saturday, August 23, 2025')}</div>
       </div>
 
       <!-- 📸 HERO IMAGE CAROUSEL: Feature photos prominently -->
@@ -5526,7 +5536,7 @@ RULES:
               .filter(att => att.type?.startsWith('image/'))
               .slice(0, 5)
               .map((image, index) => `
-                <div class="hero-image ${index === 0 ? 'active' : ''}" style="background-image: url('${image.data || image.dataUrl || image.url}')">
+                <div class="hero-image ${index === 0 ? 'active' : ''}" style="background-image: url('${esc(image.data || image.dataUrl || image.url)}')">
                   <div class="image-overlay"></div>
                 </div>
               `).join('')}
@@ -5547,8 +5557,8 @@ RULES:
       <!-- 👥 PEOPLE SECTION: Large touch-friendly avatars -->
       ${peopleList.length > 0 ? `
         <div class="people-section">
-          <h3 class="section-title">👥 People in this memory</h3>
-          <div class="people-grid" id="people-grid-${memory.id}">
+          <h3 class="section-title">People in this memory</h3>
+          <div class="people-grid" id="people-grid-${esc(memory.id)}">
             <!-- People avatars will be loaded here -->
           </div>
         </div>
@@ -5557,15 +5567,15 @@ RULES:
       <!-- 📝 CONTENT SECTION: Story and details -->
       <div class="content-section">
         <div class="memory-story">
-          <p>${memory.content}</p>
+          <p>${esc(memory.content || '')}</p>
         </div>
         
         ${memory.metadata?.emotions?.length > 0 ? `
           <div class="memory-tags">
-            <span class="tag-label">💭</span>
+            <span class="tag-label">Emotions</span>
             <div class="emotions-list">
               ${memory.metadata.emotions.map(emotion => `
-                <span class="emotion-tag">${emotion}</span>
+                <span class="emotion-tag">${esc(emotion)}</span>
               `).join('')}
             </div>
           </div>
@@ -5573,8 +5583,8 @@ RULES:
 
         ${memory.metadata?.location ? `
           <div class="memory-tags">
-            <span class="tag-label">📍</span>
-            <span class="location-tag">${memory.metadata.location}</span>
+            <span class="tag-label">Location</span>
+            <span class="location-tag">${esc(memory.metadata.location)}</span>
           </div>
         ` : ''}
       </div>
@@ -5582,20 +5592,20 @@ RULES:
       <!-- 🎬 MEDIA GRID: Additional media -->
       ${memory.attachments?.length > 1 || hasVideo ? `
         <div class="media-section">
-          <h3 class="section-title">📷 All Media (${memory.attachments.length})</h3>
+          <h3 class="section-title">All Media (${memory.attachments.length})</h3>
           <div class="media-grid">
             ${memory.attachments.map((attachment, index) => `
               <div class="media-item ${attachment.type?.startsWith('image/') ? 'image' : attachment.type?.startsWith('video/') ? 'video' : 'file'}">
                 ${attachment.type?.startsWith('image/') ? `
-                  <img src="${attachment.data || attachment.dataUrl || attachment.url}" alt="${attachment.name}" />
+                  <img src="${esc(attachment.data || attachment.dataUrl || attachment.url)}" alt="${esc(attachment.name || '')}" />
                 ` : attachment.type?.startsWith('video/') ? `
-                  <video src="${attachment.dataUrl || attachment.url}" muted>
-                    <div class="video-play-overlay">▶️</div>
+                  <video src="${esc(attachment.dataUrl || attachment.url)}" muted>
+                    <div class="video-play-overlay">Play</div>
                   </video>
                 ` : `
                   <div class="file-item">
-                    <div class="file-icon">${attachment.type?.startsWith('audio/') ? '🎵' : '📄'}</div>
-                    <div class="file-name">${attachment.name}</div>
+                    <div class="file-icon">${attachment.type?.startsWith('audio/') ? 'Audio' : 'File'}</div>
+                    <div class="file-name">${esc(attachment.name || '')}</div>
                   </div>
                 `}
               </div>
@@ -5633,7 +5643,7 @@ RULES:
         }
         
         .responsive-memory-container {
-          background: linear-gradient(135deg, rgba(139, 92, 246, 0.95) 0%, rgba(124, 58, 237, 0.95) 50%, rgba(109, 40, 217, 0.95) 100%);
+          background: linear-gradient(135deg, rgba(111, 99, 217, 0.95) 0%, rgba(124, 58, 237, 0.95) 50%, rgba(109, 40, 217, 0.95) 100%);
           border-radius: clamp(16px, 3vw, 24px);
           max-width: 95vw;
           max-height: 95vh;
@@ -5814,7 +5824,7 @@ RULES:
           border: 3px solid rgba(255, 255, 255, 0.9);
           overflow: hidden;
           position: relative;
-          background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
+          background: linear-gradient(135deg, #6f63d9 0%, #d06fa8 100%);
           display: flex;
           flex-direction: column;
           align-items: center;
@@ -5825,13 +5835,13 @@ RULES:
           transition: all 0.3s ease;
           cursor: pointer;
           text-align: center;
-          box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
+          box-shadow: 0 4px 12px rgba(111, 99, 217, 0.3);
         }
         
         .memory-person-avatar:hover {
           transform: scale(1.05);
           border-color: white;
-          box-shadow: 0 6px 20px rgba(139, 92, 246, 0.5);
+          box-shadow: 0 6px 20px rgba(111, 99, 217, 0.5);
         }
         
         .memory-person-avatar img {
@@ -5951,7 +5961,7 @@ RULES:
         
         .action-btn.primary {
           background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
-          color: #8b5cf6;
+          color: #6f63d9;
           border: 2px solid rgba(255, 255, 255, 0.3);
         }
         
@@ -5995,7 +6005,7 @@ RULES:
                 .filter(att => att.type?.startsWith('image/'))
                 .slice(0, 5)
                 .map((image, index) => `
-                  <div class="hero-image ${index === 0 ? 'active' : ''}" style="background-image: url('${image.data || image.dataUrl || image.url}')">
+                  <div class="hero-image ${index === 0 ? 'active' : ''}" style="background-image: url('${esc(image.data || image.dataUrl || image.url)}')">
                     <div class="image-overlay"></div>
                   </div>
                 `).join('')}
@@ -6016,8 +6026,8 @@ RULES:
         <!-- PEOPLE SECTION -->
         ${peopleList.length > 0 ? `
           <div class="people-section">
-            <h3 class="section-title">👥 People in this memory</h3>
-            <div class="people-grid" id="people-grid-${memory.id}">
+            <h3 class="section-title">People in this memory</h3>
+            <div class="people-grid" id="people-grid-${esc(memory.id)}">
               <!-- People avatars will be loaded here -->
             </div>
           </div>
@@ -6026,15 +6036,15 @@ RULES:
         <!-- CONTENT -->
         <div class="content-section">
           <div class="memory-story">
-            <p>${memory.content}</p>
+            <p>${esc(memory.content || '')}</p>
           </div>
           
           ${memory.metadata?.emotions?.length > 0 ? `
             <div class="memory-tags">
-              <span class="tag-label">💭</span>
+              <span class="tag-label">Emotions</span>
               <div class="emotions-list">
                 ${memory.metadata.emotions.map(emotion => `
-                  <span class="emotion-tag">${emotion}</span>
+                  <span class="emotion-tag">${esc(emotion)}</span>
                 `).join('')}
               </div>
             </div>
@@ -6042,8 +6052,8 @@ RULES:
 
           ${memory.metadata?.location ? `
             <div class="memory-tags">
-              <span class="tag-label">📍</span>
-              <span class="location-tag">${memory.metadata.location}</span>
+              <span class="tag-label">Location</span>
+              <span class="location-tag">${esc(memory.metadata.location)}</span>
             </div>
           ` : ''}
         </div>
@@ -6051,7 +6061,7 @@ RULES:
         <!-- MEDIA GRID -->
         ${memory.attachments?.length > 1 || hasVideo ? `
           <div class="media-section">
-            <h3 class="section-title">📷 All Media (${memory.attachments.length})</h3>
+            <h3 class="section-title">All Media (${memory.attachments.length})</h3>
             <div class="media-grid">
               ${memory.attachments.map((attachment, index) => `
                 <div class="media-item ${attachment.type?.startsWith('image/') ? 'image' : attachment.type?.startsWith('video/') ? 'video' : 'file'}">
@@ -6059,11 +6069,11 @@ RULES:
                     <img src="${attachment.data || attachment.dataUrl || attachment.url}" alt="${attachment.name}" />
                   ` : attachment.type?.startsWith('video/') ? `
                     <video src="${attachment.dataUrl || attachment.url}" muted>
-                    <div class="video-play-overlay">▶️</div>
+                    <div class="video-play-overlay">Play</div>
                     </video>
                   ` : `
                     <div class="file-item">
-                      <div class="file-icon">${attachment.type?.startsWith('audio/') ? '🎵' : '📄'}</div>
+                      <div class="file-icon">${attachment.type?.startsWith('audio/') ? 'Audio' : 'File'}</div>
                       <div class="file-name">${attachment.name}</div>
                     </div>
                   `}
@@ -6076,10 +6086,10 @@ RULES:
         <!-- ACTION BUTTONS -->
         <div class="action-buttons">
           <button class="action-btn primary" onclick="window.chatExperience.saveMemoryToVault('${memory.id}')">
-            ✨ Save to Vault
+            Save to Vault
           </button>
           <button class="action-btn secondary" onclick="window.chatExperience.editMemoryDetails('${memory.id}')">
-            ✏️ Edit Memory
+            Edit Memory
           </button>
         </div>
       </div>
@@ -6261,7 +6271,7 @@ RULES:
       <style>
         .memory-person-avatar {
           width: 32px; height: 32px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.8);
-          overflow: hidden; position: relative; background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
+          overflow: hidden; position: relative; background: linear-gradient(135deg, #6f63d9 0%, #d06fa8 100%);
           display: flex; align-items: center; justify-content: center; font-size: 0.8rem;
           font-weight: 600; color: white; transition: all 0.3s ease; cursor: pointer;
         }
@@ -6269,12 +6279,12 @@ RULES:
         .memory-person-avatar img { width: 100%; height: 100%; object-fit: cover; }
         
         .emma-drop-zone {
-          border: 2px dashed rgba(139, 92, 246, 0.6); border-radius: 16px; padding: 40px;
-          text-align: center; background: rgba(139, 92, 246, 0.1); cursor: pointer;
+          border: 2px dashed rgba(111, 99, 217, 0.6); border-radius: 16px; padding: 40px;
+          text-align: center; background: rgba(111, 99, 217, 0.1); cursor: pointer;
           transition: all 0.3s ease; margin: 20px 0;
         }
-        .emma-drop-zone:hover { border-color: #8b5cf6; background: rgba(139, 92, 246, 0.2); }
-        .emma-drop-zone.drag-over { border-color: #8b5cf6; background: rgba(139, 92, 246, 0.3); transform: scale(1.02); }
+        .emma-drop-zone:hover { border-color: #6f63d9; background: rgba(111, 99, 217, 0.2); }
+        .emma-drop-zone.drag-over { border-color: #6f63d9; background: rgba(111, 99, 217, 0.3); transform: scale(1.02); }
         
         .people-selection-grid {
           display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin: 16px 0;
@@ -6284,7 +6294,7 @@ RULES:
           padding: 16px; text-align: center; cursor: pointer; transition: all 0.3s ease;
         }
         .person-select-card:hover { background: rgba(255, 255, 255, 0.1); }
-        .person-select-card.selected { border-color: #8b5cf6; background: rgba(139, 92, 246, 0.2); }
+        .person-select-card.selected { border-color: #6f63d9; background: rgba(111, 99, 217, 0.2); }
         
         .media-preview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin: 16px 0; }
         .media-preview-item { position: relative; border-radius: 8px; overflow: hidden; aspect-ratio: 1; }
@@ -6295,7 +6305,7 @@ RULES:
       <div class="dialog-content" style="position: relative; z-index: 10001 !important; max-width: 600px; max-height: 80vh; overflow-y: auto;">
         <div class="dialog-header" style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px;">
           <h3 style="margin: 0; color: white;">📷 Create Photo Memory</h3>
-          <button class="dialog-close" onclick="this.closest('.memory-preview-dialog').remove()" style="z-index: 10002 !important; background: none; border: none; color: white; font-size: 24px; cursor: pointer;">×</button>
+          <button class="dialog-close" onclick="this.closest('.memory-preview-dialog').remove()" style="z-index: 10002 !important; background: none; border: none; color: white; font-size: 24px; cursor: pointer;">&times;</button>
         </div>
         
         <div class="dialog-body">
@@ -6330,7 +6340,7 @@ RULES:
           <!-- Action Buttons -->
           <div style="display: flex; gap: 12px; justify-content: flex-end;">
             <button onclick="this.closest('.memory-preview-dialog').remove()" style="padding: 12px 24px; background: rgba(255,255,255,0.1); color: white; border: none; border-radius: 8px; cursor: pointer;">Cancel</button>
-            <button onclick="window.chatExperience.saveEnhancedMemory('${memory.id}')" style="padding: 12px 24px; background: linear-gradient(135deg, #8b5cf6, #ec4899); color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: 600;">💝 Save Memory</button>
+            <button onclick="window.chatExperience.saveEnhancedMemory('${memory.id}')" style="padding: 12px 24px; background: linear-gradient(135deg, #6f63d9, #d06fa8); color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: 600;">💝 Save Memory</button>
           </div>
         </div>
       </div>
@@ -6474,9 +6484,9 @@ RULES:
           avatar.style.boxShadow = '0 0 10px rgba(255, 235, 59, 0.5)';
         } else {
           // EXISTING person styling (consistent with constellation)
-          avatar.style.background = 'linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%)';
+          avatar.style.background = 'linear-gradient(135deg, #6f63d9 0%, #d06fa8 100%)';
           avatar.style.border = '1px solid rgba(255, 255, 255, 0.2)';
-          avatar.style.boxShadow = '0 2px 8px rgba(139, 92, 246, 0.3)';
+          avatar.style.boxShadow = '0 2px 8px rgba(111, 99, 217, 0.3)';
         }
 
         // 🎯 CTO CRITICAL: ENHANCED PHOTO LOADING WITH DEBUGGING
@@ -6670,161 +6680,87 @@ RULES:
       display: flex !important;
       align-items: center !important;
       justify-content: center !important;
-      background: rgba(0, 0, 0, 0.95) !important;
+      background: rgba(var(--emma-neutral-inverse-rgb, 15, 15, 23), 0.94) !important;
       backdrop-filter: blur(20px) !important;
       overflow: hidden !important;
       overscroll-behavior: contain !important;
       touch-action: none !important;
     `;
 
+    const titleInputId = `edit-title-${memory.id}`;
+    const contentInputId = `edit-content-${memory.id}`;
+
     editModal.innerHTML = `
-      <div class="edit-modal-content" style="
-        background: linear-gradient(135deg, rgba(147, 112, 219, 0.95), rgba(123, 104, 238, 0.95));
-        border-radius: 20px;
-        padding: 30px;
-        max-width: 600px;
-        width: 90%;
-        max-height: 80vh;
-        overflow-y: auto !important;
-        overflow-x: hidden !important;
-        overscroll-behavior: contain !important;
-        -webkit-overflow-scrolling: touch !important;
-        color: white;
-        backdrop-filter: blur(20px);
-        border: 1px solid rgba(255, 255, 255, 0.2);
-        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
-        position: relative !important;
-        z-index: 15001 !important;
-        pointer-events: auto !important;
-        touch-action: pan-y !important;
-        scroll-behavior: smooth !important;
-      ">
-        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px;">
-          <h2 style="margin: 0; font-size: 24px; font-weight: 600;">✏️ Edit Memory</h2>
-          <button class="close-edit-btn" style="background: rgba(255, 255, 255, 0.2); border: none; color: white; width: 35px; height: 35px; border-radius: 50%; cursor: pointer; font-size: 20px;">×</button>
+      <div class="edit-modal-content">
+        <div class="edit-modal-header">
+          <h2>Edit Memory</h2>
+          <button class="close-edit-btn" type="button" aria-label="Close edit memory modal">&times;</button>
         </div>
 
-        <div style="margin-bottom: 20px;">
-          <label style="display: block; margin-bottom: 8px; font-weight: 600; color: rgba(255, 255, 255, 0.9);">Title:</label>
-          <input type="text" class="edit-title-input" value="${memory.metadata?.title || memory.title || ''}" style="
-            width: 100%;
-            padding: 12px;
-            border: 1px solid rgba(255, 255, 255, 0.3);
-            border-radius: 8px;
-            background: rgba(255, 255, 255, 0.1);
-            color: white;
-            font-size: 16px;
-            box-sizing: border-box;
-          " placeholder="Enter memory title...">
+        <div class="edit-modal-field">
+          <label class="edit-modal-label" for="${titleInputId}">Title:</label>
+          <input
+            type="text"
+            id="${titleInputId}"
+            class="edit-title-input"
+            value="${memory.metadata?.title || memory.title || ''}"
+            placeholder="Enter memory title..."
+          >
         </div>
 
-        <div style="margin-bottom: 20px;">
-          <label style="display: block; margin-bottom: 8px; font-weight: 600; color: rgba(255, 255, 255, 0.9);">Content:</label>
-          <textarea class="edit-content-textarea" style="
-            width: 100%;
-            min-height: 120px;
-            padding: 12px;
-            border: 1px solid rgba(255, 255, 255, 0.3);
-            border-radius: 8px;
-            background: rgba(255, 255, 255, 0.1);
-            color: white;
-            font-size: 14px;
-            line-height: 1.5;
-            resize: vertical;
-            box-sizing: border-box;
-          " placeholder="Describe this memory...">${memory.content || ''}</textarea>
+        <div class="edit-modal-field">
+          <label class="edit-modal-label" for="${contentInputId}">Content:</label>
+          <textarea
+            id="${contentInputId}"
+            class="edit-content-textarea"
+            placeholder="Describe this memory..."
+          >${memory.content || ''}</textarea>
         </div>
 
-        <div style="margin-bottom: 25px;">
-          <label style="display: block; margin-bottom: 12px; font-weight: 600; color: rgba(255, 255, 255, 0.9);">👥 Who is in this memory?</label>
-          <div class="people-picker-container" style="
-            background: rgba(255, 255, 255, 0.1);
-            border-radius: 12px;
-            padding: 15px;
-            margin-bottom: 20px;
-          ">
-            <div class="people-picker-grid" style="
-              display: grid;
-              grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
-              gap: 15px;
-              margin-bottom: 15px;
-            ">
+        <div class="edit-modal-section">
+          <label class="edit-modal-label">&#128101; Who is in this memory?</label>
+          <div class="people-picker-container">
+            <div class="people-picker-grid">
               <!-- People will be loaded here -->
             </div>
-            <div style="text-align: center; color: rgba(255, 255, 255, 0.6); font-size: 14px;">
+            <div class="people-picker-loading">
               Loading people from vault...
             </div>
           </div>
         </div>
 
-        <div style="margin-bottom: 25px;">
-          <label style="display: block; margin-bottom: 8px; font-weight: 600; color: rgba(255, 255, 255, 0.9);">📎 Attachments (${memory.attachments?.length || 0}):</label>
-          <div class="edit-attachments-grid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 10px; margin-top: 10px;">
+        <div class="edit-modal-section">
+          <label class="edit-modal-label">&#128206; Attachments (${memory.attachments?.length || 0}):</label>
+          <div class="edit-attachments-grid">
             ${(memory.attachments || []).map((attachment, index) => `
-              <div style="position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: rgba(255, 255, 255, 0.1);">
+              <div class="attachment-card">
                 ${(attachment.data || attachment.dataUrl || attachment.url) ? `
-                  <img src="${attachment.data || attachment.dataUrl || attachment.url}" style="width: 100%; height: 100%; object-fit: cover;" alt="Attachment ${index + 1}" onerror="this.parentElement.innerHTML='<div style=\\'display:flex;align-items:center;justify-content:center;height:100%;color:rgba(255,255,255,0.6);font-size:24px;\\'>📷</div>'">
+                  <img src="${attachment.data || attachment.dataUrl || attachment.url}" alt="Attachment ${index + 1}" onerror="this.parentElement.innerHTML='<div class=&quot;attachment-fallback&quot;>&#128247;</div>'">
                 ` : `
-                  <div style="display:flex;align-items:center;justify-content:center;height:100%;color:rgba(255,255,255,0.6);font-size:24px;">📷</div>
+                  <div class="attachment-fallback">&#128247;</div>
                 `}
-                <button class="remove-attachment-btn" data-index="${index}" style="
-                  position: absolute;
-                  top: 4px;
-                  right: 4px;
-                  background: rgba(255, 0, 0, 0.8);
-                  border: none;
-                  color: white;
-                  width: 20px;
-                  height: 20px;
-                  border-radius: 50%;
-                  cursor: pointer;
-                  font-size: 12px;
-                  display: flex;
-                  align-items: center;
-                  justify-content: center;
-                ">×</button>
+                <button class="remove-attachment-btn" type="button" data-index="${index}">&times;</button>
               </div>
             `).join('')}
-            <div style="
-              aspect-ratio: 1;
-              border: 2px dashed rgba(255, 255, 255, 0.4);
-              border-radius: 8px;
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              cursor: pointer;
-              background: rgba(255, 255, 255, 0.05);
-              transition: all 0.3s ease;
-            " class="add-media-btn">
-              <span style="font-size: 24px; color: rgba(255, 255, 255, 0.6);">+</span>
+            <div class="add-media-btn" role="button" tabindex="0">
+              <span class="add-media-icon">+</span>
+              <span class="add-media-label">Add media</span>
             </div>
           </div>
-          <input type="file" class="media-file-input" multiple accept="image/*,video/*" style="display: none;">
+          <input type="file" class="media-file-input" multiple accept="image/*,video/*" hidden>
         </div>
 
-        <div style="display: flex; gap: 15px; justify-content: flex-end;">
-          <button class="cancel-edit-btn" style="
-            background: rgba(255, 255, 255, 0.2);
-            border: 1px solid rgba(255, 255, 255, 0.3);
-            color: white;
-            padding: 12px 24px;
-            border-radius: 8px;
-            cursor: pointer;
-            font-weight: 600;
-          ">Cancel</button>
-          <button class="save-edit-btn" style="
-            background: linear-gradient(135deg, #10b981, #059669);
-            border: none;
-            color: white;
-            padding: 12px 24px;
-            border-radius: 8px;
-            cursor: pointer;
-            font-weight: 600;
-          ">💾 Save Changes</button>
+        <div class="edit-modal-actions">
+          <button class="delete-memory-btn" type="button">&#128465; Delete Memory</button>
+          <div class="edit-modal-actions-right">
+            <button class="cancel-edit-btn" type="button">Cancel</button>
+            <button class="save-edit-btn" type="button">&#128190; Save Changes</button>
+          </div>
         </div>
       </div>
     `;
 
+
     document.body.appendChild(editModal);
     
     // 📱 MOBILE-SPECIFIC: Apply responsive styles for smaller screens
@@ -6851,21 +6787,29 @@ RULES:
     }, { passive: false, capture: false });
     
     // 📱 MOBILE: Handle touch events for mobile/tablet scrolling
-    let touchStartY = 0;
-    
-    editModal.addEventListener('touchstart', (e) => {
-      touchStartY = e.touches[0].clientY;
-    }, { passive: true });
-    
+    const isTouchWithinContent = (node) => {
+      if (!content || !node) return false;
+      if (node === content) return true;
+      if (node.nodeType !== 1) {
+        return isTouchWithinContent(node.parentNode);
+      }
+      return node.closest('.edit-modal-content') === content;
+    };
+
     editModal.addEventListener('touchmove', (e) => {
-      // If touch is on content area, allow normal scrolling
-      if (content && (e.target === content || content.contains(e.target))) {
-        return; // Allow normal touch scrolling on content
+      // Allow natural scrolling when the gesture originates inside the modal
+      if (isTouchWithinContent(e.target)) {
+        return;
       }
-      
+
       // Otherwise, prevent background scrolling
       e.preventDefault();
     }, { passive: false });
+
+    content.addEventListener('touchmove', (e) => {
+      // Keep scroll gestures inside the modal body
+      e.stopPropagation();
+    }, { passive: true });
     
     // Block body scroll completely while modal is open
     const originalOverflow = document.body.style.overflow;
@@ -6917,6 +6861,7 @@ RULES:
     const closeBtn = editModal.querySelector('.close-edit-btn');
     const addMediaBtn = editModal.querySelector('.add-media-btn');
     const fileInput = editModal.querySelector('.media-file-input');
+    const deleteBtn = editModal.querySelector('.delete-memory-btn');
 
     // Close handlers (use the enhanced closeModal from above)
     closeBtn.addEventListener('click', closeModal);
@@ -6967,6 +6912,31 @@ RULES:
       }
     });
 
+    if (deleteBtn) {
+      deleteBtn.addEventListener('click', async () => {
+        const confirmed = window.confirm('Are you sure you want to delete this memory from your vault?');
+        if (!confirmed) {
+          return;
+        }
+
+        const originalText = deleteBtn.textContent;
+        deleteBtn.disabled = true;
+        deleteBtn.textContent = 'Deleting...';
+
+        try {
+          await this.deleteMemoryRecord(memoryId, { memory });
+          closeModal();
+          this.showToast('🗑️ Memory deleted from your vault.', 'success');
+        } catch (error) {
+          console.error('🗑️ DELETE MEMORY ERROR:', error);
+          this.showToast('❌ Failed to delete memory', 'error');
+          deleteBtn.disabled = false;
+          deleteBtn.textContent = originalText;
+          return;
+        }
+      });
+    }
+
     // Remove attachment handlers
     editModal.querySelectorAll('.remove-attachment-btn').forEach(btn => {
       btn.addEventListener('click', (e) => {
@@ -7000,7 +6970,18 @@ RULES:
       // Update memory object
       memory.metadata = memory.metadata || {};
       memory.metadata.title = title;
-      memory.metadata.people = selectedPeople;
+      const selectedIds = Array.from(new Set(selectedPeople
+        .map(person => person.id ? person.id.trim() : '')
+        .filter(Boolean)));
+      const selectedNames = Array.from(new Set(selectedPeople
+        .map(person => person.name ? person.name.trim() : '')
+        .filter(Boolean)));
+      memory.metadata.people = selectedIds;
+      if (selectedNames.length > 0) {
+        memory.metadata.peopleNames = selectedNames;
+      } else if (memory.metadata.peopleNames) {
+        delete memory.metadata.peopleNames;
+      }
       memory.title = title;
       memory.content = content;
       
@@ -7022,7 +7003,6 @@ RULES:
             
             // NOW close the dialog after successful save
             closeModal();
-            this.showToast('✅ Memory saved to vault!', 'success');
             
             // 🎯 TRIGGER CONSTELLATION REFRESH
             console.log('🔄 EDIT: Triggering constellation refresh after vault save...');
@@ -7043,9 +7023,64 @@ RULES:
         }, 500);
       } else {
         // Regular edit flow - close immediately and refresh preview
-        this.showToast('💾 Changes saved!', 'success');
         closeModal();
-        
+
+        if (this.shouldSkipMemoryPreview(memory)) {
+          console.log('[Emma] Auto-save editing flow active - updating vault immediately');
+          try {
+            this.showToast('💾 Saving changes to your vault...', 'info');
+
+            const memoryToSave = this.prepareMemoryForVault(memory);
+            const webVault = window.emmaWebVault;
+
+            if (!webVault || !webVault.isOpen) {
+              throw new Error('Vault not unlocked');
+            }
+
+            const isExisting = !!(memoryToSave.id && webVault.vaultData?.content?.memories?.[memoryToSave.id]);
+            if (isExisting && typeof webVault.updateMemory === 'function') {
+              const updates = {
+                content: memoryToSave.content,
+                metadata: memoryToSave.metadata
+              };
+              if (typeof memoryToSave.title === 'string') {
+                updates.title = memoryToSave.title;
+              }
+              if (Array.isArray(memoryToSave.attachments) && memoryToSave.attachments.length > 0) {
+                updates.attachments = memoryToSave.attachments.map(att => ({ ...att }));
+              }
+
+              await webVault.updateMemory(memoryToSave.id, updates);
+            } else {
+              await webVault.addMemory(memoryToSave);
+            }
+
+            this.temporaryMemories.delete(memory.id);
+            window.dispatchEvent(new CustomEvent('emmaMemoryUpdated', {
+              detail: {
+                memoryId: memory.id,
+                source: 'emma-chat-edit',
+                timestamp: Date.now()
+              }
+            }));
+            window.dispatchEvent(new CustomEvent('emmaMemoryAdded', {
+              detail: {
+                memoryId: memory.id,
+                source: 'emma-chat-edit',
+                timestamp: Date.now(),
+                action: 'refresh_constellation'
+              }
+            }));
+
+            return;
+          } catch (error) {
+            console.error('💾 EDIT: Auto-save update failed, falling back to preview', error);
+            this.showToast('Auto-save failed, please review and save manually.', 'error');
+          }
+        } else {
+          this.showToast('💾 Changes saved!', 'success');
+        }
+
         setTimeout(() => {
           this.showMemoryPreviewDialog(memory);
         }, 300);
@@ -7056,6 +7091,69 @@ RULES:
     setTimeout(() => titleInput.focus(), 100);
   }
 
+  async deleteMemoryRecord(memoryId, { memory } = {}) {
+    const targetId = memoryId || memory?.id;
+    if (!targetId) {
+      throw new Error('Memory id required for deletion');
+    }
+
+    const webVault = window.emmaWebVault;
+    let deletedFromVault = false;
+
+    if (webVault && typeof webVault.deleteMemory === 'function' && webVault.isOpen && webVault.vaultData?.content?.memories?.[targetId]) {
+      await webVault.deleteMemory(targetId);
+      deletedFromVault = true;
+    } else if (webVault && webVault.vaultData?.content?.memories?.[targetId]) {
+      delete webVault.vaultData.content.memories[targetId];
+      deletedFromVault = true;
+    } else if (this.temporaryMemories.has(targetId)) {
+      this.temporaryMemories.delete(targetId);
+    }
+
+    this.temporaryMemories.delete(targetId);
+    this.enrichmentState.delete(targetId);
+
+    window.dispatchEvent(new CustomEvent('emmaMemoryDeleted', {
+      detail: {
+        memoryId: targetId,
+        source: 'emma-chat-edit',
+        timestamp: Date.now(),
+        deletedFromVault
+      }
+    }));
+
+    window.dispatchEvent(new CustomEvent('emmaMemoryAdded', {
+      detail: {
+        memoryId: targetId,
+        source: 'emma-chat-edit',
+        timestamp: Date.now(),
+        action: 'delete'
+      }
+    }));
+
+    if (window.emmaDashboard && typeof window.emmaDashboard.enterMemoryConstellation === 'function') {
+      if (window.emmaDashboard.isConstellationMode) {
+        setTimeout(() => {
+          try {
+            window.emmaDashboard.enterMemoryConstellation();
+          } catch (error) {
+            console.warn('emmaDashboard constellation refresh failed:', error);
+          }
+        }, 250);
+      }
+    } else if (typeof window.loadConstellationView === 'function') {
+      setTimeout(() => {
+        try {
+          window.loadConstellationView();
+        } catch (error) {
+          console.warn('Constellation refresh failed:', error);
+        }
+      }, 250);
+    }
+
+    return { deletedFromVault };
+  }
+
   /**
    * Load people from vault for the picker
    */
@@ -7147,7 +7245,22 @@ RULES:
       }
 
       // Get currently selected people
-      const selectedPeopleIds = (memory.metadata?.people || []).map(p => p.id);
+      const selectedPeopleIds = (memory.metadata?.people || [])
+        .map(personRef => {
+          if (!personRef) return null;
+          if (typeof personRef === 'string' || typeof personRef === 'number') {
+            const trimmed = String(personRef).trim();
+            return trimmed || null;
+          }
+          if (typeof personRef === 'object') {
+            const candidate = personRef.id ?? personRef.personId ?? personRef.personID ?? personRef.person_id;
+            if (candidate === undefined || candidate === null) return null;
+            const trimmed = String(candidate).trim();
+            return trimmed || null;
+          }
+          return null;
+        })
+        .filter(Boolean);
       
       if (people.length === 0) {
         loadingText.textContent = 'No people in vault yet. Add people first!';
@@ -7173,8 +7286,8 @@ RULES:
         border-radius: 12px;
         cursor: pointer;
         transition: all 0.3s ease;
-        background: rgba(139, 92, 246, 0.15);
-        border: 2px dashed #8b5cf6;
+        background: rgba(111, 99, 217, 0.15);
+        border: 2px dashed #6f63d9;
         position: relative;
       `;
       
@@ -7184,13 +7297,13 @@ RULES:
         width: 60px;
         height: 60px;
         border-radius: 50%;
-        background: rgba(139, 92, 246, 0.2);
-        border: 3px dashed #8b5cf6;
+        background: rgba(111, 99, 217, 0.2);
+        border: 3px dashed #6f63d9;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 32px;
-        color: #8b5cf6;
+        color: #6f63d9;
         margin-bottom: 8px;
         transition: all 0.3s ease;
       `;
@@ -7202,7 +7315,7 @@ RULES:
       addLabel.style.cssText = `
         font-size: 14px;
         font-weight: 600;
-        color: #8b5cf6;
+        color: #6f63d9;
         text-align: center;
         margin-bottom: 4px;
       `;
@@ -7212,7 +7325,7 @@ RULES:
       instructionLabel.textContent = 'Click to create';
       instructionLabel.style.cssText = `
         font-size: 12px;
-        color: rgba(139, 92, 246, 0.8);
+        color: rgba(111, 99, 217, 0.8);
         text-align: center;
       `;
       
@@ -7227,16 +7340,16 @@ RULES:
       
       // Add hover effects
       addPersonItem.addEventListener('mouseenter', () => {
-        addPersonItem.style.background = 'rgba(139, 92, 246, 0.25)';
+        addPersonItem.style.background = 'rgba(111, 99, 217, 0.25)';
         addPersonItem.style.transform = 'scale(1.02)';
-        addAvatar.style.background = 'rgba(139, 92, 246, 0.3)';
+        addAvatar.style.background = 'rgba(111, 99, 217, 0.3)';
         addAvatar.style.transform = 'scale(1.1)';
       });
       
       addPersonItem.addEventListener('mouseleave', () => {
-        addPersonItem.style.background = 'rgba(139, 92, 246, 0.15)';
+        addPersonItem.style.background = 'rgba(111, 99, 217, 0.15)';
         addPersonItem.style.transform = 'scale(1)';
-        addAvatar.style.background = 'rgba(139, 92, 246, 0.2)';
+        addAvatar.style.background = 'rgba(111, 99, 217, 0.2)';
         addAvatar.style.transform = 'scale(1)';
       });
       
@@ -7270,7 +7383,7 @@ RULES:
           width: 60px;
           height: 60px;
           border-radius: 50%;
-          background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
+          background: linear-gradient(135deg, #6f63d9 0%, #d06fa8 100%);
           display: flex;
           align-items: center;
           justify-content: center;
@@ -7492,7 +7605,7 @@ RULES:
 
     addPersonDialog.innerHTML = `
       <div class="add-person-modal-content" style="
-        background: linear-gradient(135deg, rgba(139, 92, 246, 0.95), rgba(124, 58, 237, 0.95));
+        background: linear-gradient(135deg, rgba(111, 99, 217, 0.95), rgba(124, 58, 237, 0.95));
         border-radius: 20px;
         padding: 30px;
         max-width: 500px;
@@ -7507,7 +7620,7 @@ RULES:
       ">
         <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px;">
           <h2 style="margin: 0; font-size: 24px; font-weight: 600;">👤 Add New Person</h2>
-          <button class="close-add-person-btn" style="background: rgba(255, 255, 255, 0.2); border: none; color: white; width: 35px; height: 35px; border-radius: 50%; cursor: pointer; font-size: 20px;">×</button>
+          <button class="close-add-person-btn" style="background: rgba(255, 255, 255, 0.2); border: none; color: white; width: 35px; height: 35px; border-radius: 50%; cursor: pointer; font-size: 20px;">&times;</button>
         </div>
 
         <div style="margin-bottom: 20px;">
@@ -7567,13 +7680,13 @@ RULES:
           <button class="save-person-btn" style="
             background: linear-gradient(135deg, #ffffff, #f3f4f6);
             border: none;
-            color: #8b5cf6;
+            color: #6f63d9;
             padding: 12px 24px;
             border-radius: 10px;
             cursor: pointer;
             font-weight: 700;
             font-size: 16px;
-            box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
+            box-shadow: 0 4px 12px rgba(111, 99, 217, 0.3);
           ">✨ Add Person</button>
         </div>
       </div>
@@ -7670,11 +7783,21 @@ RULES:
           
           // Auto-select the new person in the memory
           memory.metadata = memory.metadata || {};
-          memory.metadata.people = memory.metadata.people || [];
-          memory.metadata.people.push({
-            id: personId,
-            name: name
-          });
+          memory.metadata.people = Array.isArray(memory.metadata.people) ? memory.metadata.people : [];
+          const trimmedPersonId = personId ? String(personId).trim() : '';
+          if (trimmedPersonId && !memory.metadata.people.includes(trimmedPersonId)) {
+            memory.metadata.people.push(trimmedPersonId);
+          }
+
+          if (name) {
+            const trimmedName = name.trim();
+            if (trimmedName) {
+              memory.metadata.peopleNames = Array.isArray(memory.metadata.peopleNames) ? memory.metadata.peopleNames : [];
+              if (!memory.metadata.peopleNames.includes(trimmedName)) {
+                memory.metadata.peopleNames.push(trimmedName);
+              }
+            }
+          }
 
           this.showToast(`✨ ${name} added to vault and memory!`, 'success');
           closeDialog();
@@ -7722,7 +7845,7 @@ RULES:
       for (const [id, state] of this.enrichmentState) {
         if (state.memory && state.memory.id === memoryId) {
           enrichmentState = state;
-          
+
           // CRITICAL FIX: Build enriched memory with all collected data
           memory = {
             ...state.memory,
@@ -7736,7 +7859,7 @@ RULES:
             },
             content: state.collectedData.enrichedContent || state.memory.content
           };
-          
+
           console.log('💾 EMMA CHAT: Using ENRICHED memory with people:', memory.metadata.people);
           break;
         }
@@ -7762,16 +7885,16 @@ RULES:
       const newPeople = memory.metadata.newPeopleDetected || [];
       const existingPeople = memory.metadata.people || [];
       const peopleNames = memory.metadata.peopleNames || [];
-      
+
       console.log('👥 EMMA CHAT: Memory people analysis:', {
         newPeople,
-        existingPeople, 
+        existingPeople,
         peopleNames,
         hasNewPeople: newPeople.length > 0
       });
-      
+
       console.log('🚨 DEBUG: confirmSaveMemory called with memoryId:', memoryId);
-      
+
       if (newPeople.length > 0) {
         console.log('👥 EMMA CHAT: New people detected, starting onboarding flow:', newPeople);
         await this.startNewPersonOnboarding(memoryId, newPeople);
@@ -7782,7 +7905,7 @@ RULES:
       await this.finalizeMemorySave(memory, memoryId);
     } catch (error) {
       console.error('💾 EMMA CHAT: Error in confirmSaveMemory:', error);
-      this.showToast('❌ Failed to save memory', 'error');
+      this.showToast('Failed to save memory', 'error');
     }
   }
 
@@ -7794,9 +7917,9 @@ RULES:
     this.captureSession = this.captureSession || {};
     this.captureSession.pendingNewPeople = [...newPeople]; // Copy array
     this.captureSession.memoryId = memoryId;
-    
+
     console.log('👥 EMMA CHAT: Starting onboarding for ALL new people:', newPeople);
-    
+
     // Start with the first person
     await this.processNextNewPerson();
   }
@@ -7817,13 +7940,13 @@ RULES:
 
     const personName = this.captureSession.pendingNewPeople.shift(); // Remove first person from queue
     const remaining = this.captureSession.pendingNewPeople.length;
-    
+
     let message = `Great! Let me add ${personName} to your vault first.`;
     if (remaining > 0) {
       message += ` After ${personName}, I'll ask about ${remaining} more ${remaining === 1 ? 'person' : 'people'}.`;
     }
     message += ` What's your relationship with ${personName}?`;
-    
+
     this.addMessage(message, 'emma', {
       isNewPersonPrompt: true,
       memoryId: this.captureSession.memoryId,
@@ -7838,7 +7961,7 @@ RULES:
   async addPersonToVault(memoryId, personName, relationship) {
     try {
       console.log(`👥 ADDING PERSON: ${personName} as ${relationship}`);
-      
+
       // CRITICAL: Check vault access first
       if (!window.emmaWebVault || !window.emmaWebVault.isOpen) {
         throw new Error('Vault is not accessible');
@@ -7875,11 +7998,11 @@ RULES:
         // Try to save anyway with basic memory structure
         await this.fallbackMemorySave(memoryId, personName);
       }
-      
+
     } catch (error) {
       console.error('❌ CRITICAL: Failed to add person to vault:', error);
       this.addMessage(`I had trouble adding ${personName} to your vault (${error.message}), but let me save your memory anyway.`, 'emma');
-      
+
       // Always try to save the memory even if person addition fails
       const state = this.enrichmentState.get(memoryId);
       if (state && state.memory) {
@@ -7895,7 +8018,7 @@ RULES:
    */
   async skipPersonAddition(memoryId) {
     this.addMessage("No worries! Let me create your memory capsule...", 'emma');
-    
+
     const state = this.enrichmentState.get(memoryId);
     if (state && state.memory) {
       await this.finalizeMemorySave(state.memory, memoryId);
@@ -7908,7 +8031,7 @@ RULES:
   async fallbackMemorySave(memoryId, personName = null) {
     try {
       console.log('🚨 FALLBACK: Attempting to save memory without enrichment state');
-      
+
       // Try to find the memory in detected memories
       let memory = null;
       for (const [msgId, analysis] of this.detectedMemories) {
@@ -7933,7 +8056,7 @@ RULES:
       }
       
       await this.finalizeMemorySave(memory, memoryId);
-      
+
     } catch (error) {
       console.error('❌ FALLBACK SAVE FAILED:', error);
       this.addMessage("I'm having trouble saving your memory. Please try again.", 'emma');
@@ -7958,15 +8081,26 @@ RULES:
       if (newPerson) {
         // Replace temp ID with real ID
         const tempId = `temp_${personName.toLowerCase()}`;
-        const peopleIds = state.memory.metadata.people || [];
+        const peopleIds = Array.isArray(state.memory.metadata.people) ? state.memory.metadata.people : [];
         const updatedPeopleIds = peopleIds.map(id => id === tempId ? newPerson.id : id);
-        
+
         state.memory.metadata.people = updatedPeopleIds;
         
+        const existingNames = Array.isArray(state.memory.metadata.peopleNames) ? state.memory.metadata.peopleNames : [];
+        const filteredNames = existingNames.filter(name => name.toLowerCase() !== personName.toLowerCase());
+        if (newPerson.name) {
+          filteredNames.push(newPerson.name);
+        }
+        if (filteredNames.length > 0) {
+          state.memory.metadata.peopleNames = Array.from(new Set(filteredNames));
+        } else if (state.memory.metadata.peopleNames) {
+          delete state.memory.metadata.peopleNames;
+        }
+        
         // Remove from newPeopleDetected
         state.memory.metadata.newPeopleDetected = (state.memory.metadata.newPeopleDetected || [])
           .filter(name => name.toLowerCase() !== personName.toLowerCase());
-          
+
         console.log('✅ Updated memory with real person ID:', newPerson.id);
         console.log('💾 FINAL MEMORY PEOPLE:', state.memory.metadata.people);
       }
@@ -7975,13 +8109,162 @@ RULES:
     }
   }
 
+  isAutoSaveReady() {
+    const webVault = window.emmaWebVault;
+    if (!webVault || !webVault.isOpen) {
+      console.log('[Emma] isAutoSaveReady -> false (vault closed or missing)', {
+        hasVault: !!webVault,
+        isOpen: webVault?.isOpen
+      });
+      return false;
+    }
+
+    const sessionActive = typeof sessionStorage !== 'undefined' &&
+      sessionStorage.getItem('emmaVaultActive') === 'true';
+    const localActive = typeof localStorage !== 'undefined' &&
+      localStorage.getItem('emmaVaultActive') === 'true';
+    if (!webVault.isWebappPrimary && !sessionActive && !localActive) {
+      console.log('[Emma] isAutoSaveReady -> false (no active session markers)', {
+        webappPrimary: webVault.isWebappPrimary,
+        sessionActive,
+        localActive
+      });
+      return false;
+    }
+
+    if (webVault.needsFileReauth && !webVault.isWebappPrimary) {
+      console.log('[Emma] isAutoSaveReady -> false (needs file reauth)', {
+        webappPrimary: webVault.isWebappPrimary,
+        needsFileReauth: webVault.needsFileReauth
+      });
+      return false;
+    }
+
+    const autoSavePreference = typeof localStorage !== 'undefined'
+      ? localStorage.getItem('emmaVaultAutoSaveEnabled')
+      : null;
+    const prefersAutoSave = autoSavePreference !== 'false';
+    if (!prefersAutoSave) {
+      console.log('[Emma] isAutoSaveReady -> false (autosave disabled by preference)');
+      return false;
+    }
+
+    const hasFileHandle = !!webVault.fileHandle;
+    const extensionSync = !!webVault.extensionAvailable && webVault.extensionSyncEnabled !== false;
+    const webAppPrimary = !!webVault.isWebappPrimary || !!webVault.useWebappPrimary;
+    const hasAutoSaveCapability = hasFileHandle || extensionSync || webAppPrimary;
+    if (!hasAutoSaveCapability) {
+      console.log('[Emma] isAutoSaveReady -> false (no autosave capability)', {
+        hasFileHandle,
+        extensionSync,
+        webAppPrimary
+      });
+      return false;
+    }
+
+    console.log('[Emma] isAutoSaveReady -> true', {
+      sessionActive,
+      localActive,
+      hasFileHandle,
+      extensionSync,
+      webAppPrimary
+    });
+    return true;
+  }
+
+  shouldSkipMemoryPreview(memory) {
+    const manualPreview = localStorage.getItem('emmaVaultManualPreview') === 'true';
+    if (manualPreview) return false;
+
+    const webVault = window.emmaWebVault;
+    console.log('[Emma] shouldSkipMemoryPreview state', {
+      manualPreview,
+      hasVault: !!webVault,
+      isOpen: webVault?.isOpen,
+      isWebappPrimary: webVault?.isWebappPrimary,
+      autoSaveEnabled: webVault?.autoSaveEnabled,
+      needsFileReauth: webVault?.needsFileReauth
+    });
+    if (webVault?.isWebappPrimary && webVault.isOpen) {
+      const autoSaveEnabled = webVault.autoSaveEnabled !== false;
+      const hasVaultData = !!webVault.vaultData?.content;
+      if (autoSaveEnabled) {
+        console.log('[Emma] Webapp-primary autosave ready - skipping preview', {
+          hasVaultData,
+          needsFileReauth: webVault.needsFileReauth,
+          autoSaveEnabled
+        });
+        return true;
+      }
+    }
+
+    if (!this.isAutoSaveReady()) return false;
+
+    return true;
+  }
+
+  async tryAutoSaveMemory(memory, memoryId = null, context = 'default') {
+    if (!memory) {
+      return false;
+    }
+
+    if (!this.shouldSkipMemoryPreview(memory)) {
+      return false;
+    }
+
+    const targetId = memoryId || memory.id || `memory_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;
+    if (!memory.id) {
+      memory.id = targetId;
+    }
+
+    console.log('[Emma] Auto-save ready - skipping preview', {
+      context,
+      memoryId: targetId,
+      autoSaveEnabled: window.emmaWebVault?.autoSaveEnabled,
+      isWebappPrimary: window.emmaWebVault?.isWebappPrimary,
+      needsFileReauth: window.emmaWebVault?.needsFileReauth
+    });
+
+    const saved = await this.saveMemoryDirectly(memory, targetId);
+    return !!saved;
+  }
+
+  prepareMemoryForVault(memory) {
+    const hasContent = memory && typeof memory.content === 'string';
+    const content = hasContent ? memory.content : '';
+    const baseMetadata = memory && memory.metadata ? { ...memory.metadata } : {};
+    if (!baseMetadata.created) {
+      baseMetadata.created = new Date().toISOString();
+    }
+    if (!baseMetadata.title) {
+      const trimmed = hasContent ? content.trim() : '';
+      baseMetadata.title = trimmed ? trimmed.substring(0, 50) + (trimmed.length > 50 ? '...' : '') : 'Untitled Memory';
+    }
+
+    return {
+      id: memory && memory.id ? memory.id : undefined,
+      title: memory && memory.title ? memory.title : baseMetadata.title,
+      content,
+      metadata: baseMetadata,
+      attachments: memory && Array.isArray(memory.attachments)
+        ? memory.attachments.map(att => ({ ...att }))
+        : []
+    };
+  }
+
   /**
    * Finalize memory save and create capsule - SHOW PREVIEW
    */
   async finalizeMemorySave(memory, memoryId) {
     try {
       console.log('💾 EMMA CHAT: Creating memory capsule preview for:', memoryId);
-      
+
+      if (this.shouldSkipMemoryPreview(memory)) {
+        console.log('[Emma] Auto-save enabled - skipping preview; saving directly');
+        await this.saveMemoryDirectly(memory, memoryId);
+        return;
+      }
+
       // Create beautiful memory capsule with people avatars
       this.addMessage(`Perfect! Let me show you your beautiful memory capsule before we save it to your vault! 💜`, 'emma');
       
@@ -8022,21 +8305,33 @@ RULES:
       console.log('💾 EMMA CHAT: Saving memory to vault from preview:', memoryId);
       
       // Prepare memory for vault
-      const memoryToSave = {
-        content: memory.content,
-        metadata: {
-          ...memory.metadata,
-          created: new Date().toISOString(),
-          title: memory.content.substring(0, 50) + (memory.content.length > 50 ? '...' : '')
-        },
-        attachments: memory.attachments || []
-      };
+      const memoryToSave = this.prepareMemoryForVault(memory);
       
-      // Save to vault
-      const result = await window.emmaWebVault.addMemory(memoryToSave);
+      const webVault = window.emmaWebVault;
+      if (!webVault || typeof webVault.addMemory !== 'function') {
+        throw new Error('Vault service unavailable');
+      }
+      const isExistingMemory = !!(webVault && memoryToSave.id && webVault.vaultData?.content?.memories?.[memoryToSave.id]);
+
+      let result;
+      if (isExistingMemory && typeof webVault.updateMemory === 'function') {
+        const updates = {
+          content: memoryToSave.content,
+          metadata: memoryToSave.metadata
+        };
+        if (typeof memoryToSave.title === 'string') {
+          updates.title = memoryToSave.title;
+        }
+        if (Array.isArray(memoryToSave.attachments) && memoryToSave.attachments.length > 0) {
+          updates.attachments = memoryToSave.attachments.map(att => ({ ...att }));
+        }
+
+        result = await webVault.updateMemory(memoryToSave.id, updates);
+      } else {
+        result = await webVault.addMemory(memoryToSave);
+      }
       
-      if (result.success) {
-        this.showToast('✅ Memory saved to vault!', 'success');
+      if (result && result.success) {
         
         // Clear enrichment state
         this.enrichmentState.delete(memoryId);
@@ -8087,12 +8382,13 @@ RULES:
         }, 500);
         
       } else {
-        throw new Error(result.error || 'Failed to save memory');
+        const errorMessage = result && result.error ? result.error : 'Failed to save memory';
+        throw new Error(errorMessage);
       }
       
     } catch (error) {
       console.error('💾 EMMA CHAT: Error saving memory to vault:', error);
-      this.showToast('❌ Failed to save memory', 'error');
+      this.showToast('Failed to save memory', 'error');
       this.addMessage(`I had trouble saving your memory to the vault. Please try again! 🤗`, 'emma');
     }
   }
@@ -8101,17 +8397,36 @@ RULES:
    * Save memory directly to vault (fallback or final save)
    */
   async saveMemoryDirectly(memory, memoryId) {
+    let saved = false;
     try {
-      // Save to vault (webapp-only mode)
-      if (window.emmaWebVault && window.emmaWebVault.isOpen && sessionStorage.getItem('emmaVaultActive') === 'true') {
+      const webVault = window.emmaWebVault;
+      const sessionActive = typeof sessionStorage !== 'undefined' &&
+        sessionStorage.getItem('emmaVaultActive') === 'true';
+      const localActive = typeof localStorage !== 'undefined' &&
+        localStorage.getItem('emmaVaultActive') === 'true';
+
+      if (webVault && webVault.isOpen && (webVault.isWebappPrimary || sessionActive || localActive)) {
         console.log('💾 EMMA CHAT: Saving curated memory to webapp-only vault');
-        await window.emmaWebVault.addMemory({
-          content: memory.content,
-          metadata: memory.metadata,
-          attachments: memory.attachments || []
-        });
+        const memoryToSave = this.prepareMemoryForVault(memory);
+        const isExistingMemory = !!(memoryToSave.id && webVault.vaultData?.content?.memories?.[memoryToSave.id]);
+
+        if (isExistingMemory && typeof webVault.updateMemory === 'function') {
+          const updates = {
+            content: memoryToSave.content,
+            metadata: memoryToSave.metadata
+          };
+          if (typeof memoryToSave.title === 'string') {
+            updates.title = memoryToSave.title;
+          }
+          if (Array.isArray(memoryToSave.attachments) && memoryToSave.attachments.length > 0) {
+            updates.attachments = memoryToSave.attachments.map(att => ({ ...att }));
+          }
+
+          await webVault.updateMemory(memoryToSave.id, updates);
+        } else {
+          await webVault.addMemory(memoryToSave);
+        }
 
-        this.showToast('✅ Memory saved to vault successfully!', 'success');
         
         // 🎯 CRITICAL FIX: Clean up temporary memory after successful save
         this.temporaryMemories.delete(memoryId);
@@ -8169,16 +8484,31 @@ RULES:
 
       } else {
         console.warn('💾 EMMA CHAT: Vault save failed - debugging info:');
-        console.warn('💾 DEBUG: emmaWebVault exists?', !!window.emmaWebVault);
-        console.warn('💾 DEBUG: emmaWebVault.isOpen?', window.emmaWebVault?.isOpen);
-        console.warn('💾 DEBUG: sessionStorage active?', sessionStorage.getItem('emmaVaultActive'));
-        this.showToast('❌ Vault not unlocked - please unlock your .emma vault first', 'error');
+        console.warn('[Emma] emmaWebVault exists?', !!webVault);
+        console.warn('[Emma] emmaWebVault.isOpen?', webVault?.isOpen);
+        console.warn('[Emma] sessionStorage active?', sessionActive);
+        console.warn('[Emma] localStorage active?', localActive);
+        this.showToast('Vault not unlocked - please unlock your .emma vault first', 'error');
       }
 
     } catch (error) {
-      console.error('💾 SAVE: Error saving memory:', error);
-      this.showToast('❌ Failed to save memory', 'error');
+      console.error('[Emma] Error saving memory:', error);
+      const needsManualSave = error && typeof error.message === 'string' &&
+        (/direct save required/i.test(error.message) || /vault access required/i.test(error.message));
+
+      if (needsManualSave) {
+        this.showToast('Direct vault save needs your attention. Please review and save manually.', 'warning');
+        const existingDialog = document.querySelector('.memory-preview-dialog');
+        if (!existingDialog) {
+          this.showMemoryPreviewDialog(memory);
+        }
+      } else {
+        this.showToast('Failed to save memory', 'error');
+      }
+      return false;
     }
+
+    return saved;
   }
 
   /**
@@ -8444,6 +8774,12 @@ RULES:
 
     }
 
+    const autoSaved = await this.tryAutoSaveMemory(enrichedMemory, memoryId, 'enrichment-complete');
+    if (autoSaved) {
+      this.enrichmentState.delete(memoryId);
+      return;
+    }
+
     // Show preview dialog for final confirmation
     setTimeout(async () => {
       const acknowledgment = await this.generateDynamicAcknowledgment(state.memory, 'completion', state.collectedData);
@@ -8810,9 +9146,13 @@ RULES:
     if (result.continue && result.nextPrompt) {
       this.addMessage(result.nextPrompt.text, 'emma', { type: 'memory-prompt' });
     } else if (result.complete) {
-      // Show final memory preview
-      this.showMemoryPreviewDialog(result.memory);
+      const autoSaved = await this.tryAutoSaveMemory(result.memory, result.memory?.id, 'capture-complete');
       this.activeCapture = null;
+      if (autoSaved) {
+        return;
+      }
+
+      this.showMemoryPreviewDialog(result.memory);
     }
   }
 
@@ -9060,6 +9400,43 @@ RULES:
     }
   }
 
+  /**
+   * Allow Emma's agent tools to resolve uploaded media by id
+   */
+  lookupMediaUpload(uploadId) {
+    if (!uploadId) return null;
+
+    try {
+      if (this.enrichmentState && typeof this.enrichmentState.values === 'function') {
+        for (const state of this.enrichmentState.values()) {
+          const mediaItems = state?.collectedData?.media;
+          if (Array.isArray(mediaItems)) {
+            const found = mediaItems.find(item => item.id === uploadId);
+            if (found) {
+              return { ...found };
+            }
+          }
+        }
+      }
+
+      if (this.temporaryMemories && typeof this.temporaryMemories.values === 'function') {
+        for (const memory of this.temporaryMemories.values()) {
+          const attachments = memory?.attachments;
+          if (Array.isArray(attachments)) {
+            const found = attachments.find(item => item.id === uploadId);
+            if (found) {
+              return { ...found };
+            }
+          }
+        }
+      }
+    } catch (error) {
+      console.error('📷 CHAT: lookupMediaUpload error:', error);
+    }
+
+    return null;
+  }
+
   /**
    * Confirm media upload and continue enrichment
    */
@@ -9599,6 +9976,8 @@ Just the question:`;
     // Disable focus mode
     this.disableFocusMode();
 
+    this.voiceToggleButton = null;
+
     super.cleanup();
   }
 
@@ -9621,7 +10000,7 @@ Just the question:`;
       if (people.length === 0) {
         peopleGrid.innerHTML = `
           <div style="color: white; opacity: 0.8; grid-column: 1 / -1; text-align: center; padding: 20px;">
-            No people in vault yet. <button onclick="window.open('/people.html', '_blank')" style="color: #8b5cf6; background: none; border: none; text-decoration: underline; cursor: pointer;">Add people first</button>
+            No people in vault yet. <button onclick="window.open('/pages/people-emma.html', '_blank')" style="color: #6f63d9; background: none; border: none; text-decoration: underline; cursor: pointer;">Add people first</button>
           </div>
         `;
         return;
@@ -9632,7 +10011,7 @@ Just the question:`;
         const initials = person.name.charAt(0).toUpperCase();
         return `
           <div class="person-select-card" data-person-id="${person.id}" onclick="window.chatExperience.togglePersonSelection('${person.id}', '${memoryId}')">
-            <div style="width: 60px; height: 60px; margin: 0 auto 12px; border-radius: 50%; background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%); display: flex; align-items: center; justify-content: center; color: white; font-size: 24px; font-weight: 600;">
+            <div style="width: 60px; height: 60px; margin: 0 auto 12px; border-radius: 50%; background: linear-gradient(135deg, #6f63d9 0%, #d06fa8 100%); display: flex; align-items: center; justify-content: center; color: white; font-size: 24px; font-weight: 600;">
               ${initials}
             </div>
             <div style="color: white; font-weight: 600; margin-bottom: 4px;">${person.name}</div>
@@ -9743,7 +10122,7 @@ Just the question:`;
             `<video src="${url}" muted></video>` : 
             `<img src="${url}" alt="${file.name}">`
           }
-          <button class="media-remove" onclick="window.chatExperience.removeUploadedFile(${index}, '${memoryId}')" title="Remove">×</button>
+          <button class="media-remove" onclick="window.chatExperience.removeUploadedFile(${index}, '${memoryId}')" title="Remove">&times;</button>
         </div>
       `;
     }).join('');
@@ -9852,7 +10231,7 @@ Just the question:`;
         }
         
         // Show success message
-        await this.addMessage("Your photo memory has been saved! 📷✨", 'emma', null, 'response');
+        await this.addMessage("Your photo memory has been saved! 📷✨", 'emma', {});
         
         this.showToast("Memory saved successfully! 💝", "success");
         
@@ -9874,317 +10253,3 @@ Just the question:`;
   }
 }
 
-/**
- * 🧠 CTO UNIFIED EMMA INTELLIGENCE SYSTEM
- * Single, intelligent response engine that replaces all pattern-matching hacks
- */
-class EmmaUnifiedIntelligence {
-  constructor(options = {}) {
-    this.options = options;
-    this.conversationHistory = [];
-    this.currentContext = {
-      lastQueriedPerson: null,
-      activeMemoryDiscussion: null,
-      waitingForResponse: null,
-      userEmotionalState: 'neutral'
-    };
-  }
-
-  /**
-   * 🎯 SINGLE ENTRY POINT: Analyze user message and generate intelligent response
-   */
-  async analyzeAndRespond(userMessage, chatInstance) {
-    try {
-      console.log('🧠 UNIFIED INTELLIGENCE: Processing:', userMessage);
-      
-      // Add to conversation history
-      this.addToHistory(userMessage, 'user');
-      
-      // Get vault context
-      const vaultContext = this.getVaultContext();
-      
-      // Use LLM for intelligent analysis if available, fallback to smart heuristics
-      const analysis = await this.analyzeUserIntent(userMessage, vaultContext);
-      console.log('🧠 UNIFIED ANALYSIS:', analysis);
-      
-      // Generate single, contextual response
-      const response = await this.generateUnifiedResponse(analysis, chatInstance);
-      
-      // Add Emma's response to history
-      this.addToHistory(response.text, 'emma');
-      
-      return response;
-      
-    } catch (error) {
-      console.error('🧠 UNIFIED INTELLIGENCE ERROR:', error);
-      return {
-        text: "I'm here to listen and help with your memories. What would you like to share?",
-        actions: []
-      };
-    }
-  }
-
-  /**
-   * 🧠 INTELLIGENT INTENT ANALYSIS using LLM reasoning
-   */
-  async analyzeUserIntent(userMessage, vaultContext) {
-    const conversationContext = this.conversationHistory.slice(-5).map(h => 
-      `${h.sender}: ${h.message}`
-    ).join('\n');
-
-    // If we have API access, use LLM for true intelligence
-    if (this.options.apiKey) {
-      return await this.llmAnalyzeIntent(userMessage, vaultContext, conversationContext);
-    }
-    
-    // Fallback to smart heuristic analysis
-    return this.heuristicAnalyzeIntent(userMessage, vaultContext);
-  }
-
-  /**
-   * 🤖 LLM-POWERED INTENT ANALYSIS
-   */
-  async llmAnalyzeIntent(userMessage, vaultContext, conversationContext) {
-    const prompt = `You are Emma's intelligence system. Analyze this user message and determine the appropriate response type.
-
-CONVERSATION CONTEXT:
-${conversationContext}
-
-USER MESSAGE: "${userMessage}"
-
-VAULT CONTEXT:
-- ${vaultContext.memoryCount} memories
-- ${vaultContext.peopleCount} people: ${vaultContext.peopleNames.join(', ')}
-- Recent topics: ${vaultContext.recentTopics.join(', ')}
-
-DEMENTIA CARE MODE: Always validate, never contradict, use warm validation therapy.
-
-Analyze the user's intent and respond with JSON:
-{
-  "intent": "vault_query|memory_sharing|photo_request|conversation|confusion",
-  "confidence": 0.95,
-  "targetPerson": "person name if relevant",
-  "memoryContent": "if sharing a memory",
-  "emotionalTone": "positive|neutral|confused|sad",
-  "suggestedResponse": "brief Emma response",
-  "recommendedActions": ["show_person", "display_memories", "trigger_photo_upload", "create_memory"]
-}`;
-
-    try {
-      const response = await this.callLLM(prompt);
-      return JSON.parse(response);
-    } catch (error) {
-      console.warn('🧠 LLM analysis failed, using heuristic fallback');
-      return this.heuristicAnalyzeIntent(userMessage, vaultContext);
-    }
-  }
-
-  /**
-   * 🎯 SMART HEURISTIC ANALYSIS (LLM fallback)
-   */
-  heuristicAnalyzeIntent(userMessage, vaultContext) {
-    const lower = userMessage.toLowerCase().trim();
-    
-    // Vault queries
-    if (lower.includes('who') && vaultContext.peopleNames.some(name => 
-        lower.includes(name.toLowerCase()))) {
-      const targetPerson = vaultContext.peopleNames.find(name => lower.includes(name.toLowerCase()));
-      return {
-        intent: 'vault_query',
-        confidence: 0.9,
-        targetPerson: targetPerson,
-        recommendedActions: ['show_person']
-      };
-    }
-    
-    // Photo requests
-    if ((lower.includes('add') || lower.includes('yes')) && 
-        (lower.includes('picture') || lower.includes('photo') || this.isPhotoContext())) {
-      return {
-        intent: 'photo_request',
-        confidence: 0.9,
-        targetPerson: this.currentContext.lastQueriedPerson,
-        recommendedActions: ['trigger_photo_upload']
-      };
-    }
-    
-    // Memory sharing (in person context)
-    if (this.currentContext.lastQueriedPerson && this.isLikelyMemorySharing(lower)) {
-      return {
-        intent: 'memory_sharing',
-        confidence: 0.8,
-        targetPerson: this.currentContext.lastQueriedPerson,
-        memoryContent: userMessage,
-        suggestedResponse: this.generateMemoryValidation(userMessage, this.currentContext.lastQueriedPerson)
-      };
-    }
-    
-    return {
-      intent: 'conversation',
-      confidence: 0.5,
-      suggestedResponse: "I'm here to help with your memories. What would you like to explore?"
-    };
-  }
-
-  /**
-   * 🎯 GENERATE UNIFIED RESPONSE - NO DUPLICATES!
-   */
-  async generateUnifiedResponse(analysis, chatInstance) {
-    // Update context based on analysis
-    if (analysis.targetPerson) {
-      this.currentContext.lastQueriedPerson = analysis.targetPerson;
-    }
-
-    switch (analysis.intent) {
-      case 'vault_query':
-        return await this.handleVaultQuery(analysis, chatInstance);
-        
-      case 'photo_request':
-        return await this.handlePhotoRequest(analysis, chatInstance);
-        
-      case 'memory_sharing':
-        return this.handleMemorySharing(analysis);
-        
-      case 'confusion':
-        return this.handleConfusion(analysis);
-        
-      default:
-        return {
-          text: analysis.suggestedResponse || "I'm here to listen. What would you like to share?",
-          actions: []
-        };
-    }
-  }
-
-  // Helper methods
-  addToHistory(message, sender) {
-    this.conversationHistory.push({ message, sender, timestamp: Date.now() });
-    if (this.conversationHistory.length > 10) {
-      this.conversationHistory.shift();
-    }
-  }
-
-  getVaultContext() {
-    const vault = this.options.vaultAccess();
-    return {
-      memoryCount: vault?.memories ? Object.keys(vault.memories).length : 0,
-      peopleCount: vault?.people ? Object.keys(vault.people).length : 0,
-      peopleNames: vault?.people ? Object.values(vault.people).map(p => p.name).filter(Boolean) : [],
-      recentTopics: []
-    };
-  }
-
-  isPhotoContext() {
-    // Check if Emma recently asked about photos
-    const recentEmmaMessages = this.conversationHistory
-      .filter(h => h.sender === 'emma')
-      .slice(-2)
-      .map(h => h.message);
-    
-    return recentEmmaMessages.some(msg => 
-      msg.includes('photo') || msg.includes('picture')
-    );
-  }
-
-  isLikelyMemorySharing(lowerMessage) {
-    const memoryIndicators = [
-      'mowing', 'cooking', 'cleaning', 'always', 'usually', 'every day',
-      'fell', 'went', 'did', 'was', 'had', 'saw', 'met', 'talked',
-      'lawn', 'tree', 'house', 'school', 'work', 'funny', 'sad'
-    ];
-    return memoryIndicators.some(word => lowerMessage.includes(word)) ||
-           lowerMessage.length < 20; // Short responses in person context likely memory-related
-  }
-
-  generateMemoryValidation(message, person) {
-    const lower = message.toLowerCase();
-    
-    if (lower.includes('mowing') || lower.includes('lawn')) {
-      return `Oh, ${person} and lawn mowing! That sounds like such a regular part of life together. I can picture those times. What made those moments special?`;
-    }
-    
-    if (lower.includes('always')) {
-      return `That sounds like such a meaningful pattern with ${person}! Those regular moments together can be so precious. Tell me more about those times.`;
-    }
-    
-    return `That sounds like a special memory with ${person}! I love hearing about moments like that. What else do you remember about it?`;
-  }
-
-  // 🎯 HANDLE VAULT QUERIES (person lookups)
-  async handleVaultQuery(analysis, chatInstance) {
-    const person = await chatInstance.findPersonInVault(analysis.targetPerson);
-    
-    if (!person) {
-      return {
-        text: `I don't see ${analysis.targetPerson} in your vault yet. Would you like to add them?`,
-        actions: []
-      };
-    }
-    
-    // Generate contextual person response
-    const memories = await chatInstance.getPersonMemories(person);
-    const memoryText = memories.length > 0 ? 
-      `I have ${memories.length} ${memories.length === 1 ? 'memory' : 'memories'} about them.` :
-      `I don't see any memories with them yet.`;
-    
-    return {
-      text: `${analysis.targetPerson} - they're ${person.relationship || 'someone special'}! ${memoryText} Would you like me to share what I know?`,
-      actions: ['show_person'],
-      analysis: analysis
-    };
-  }
-
-  // 📷 HANDLE PHOTO REQUESTS  
-  async handlePhotoRequest(analysis, chatInstance) {
-    return {
-      text: `Wonderful! I'd love to help you add photos with ${analysis.targetPerson}. You can drag and drop photos here, or click to browse your files.`,
-      actions: ['trigger_photo_upload'],
-      analysis: analysis
-    };
-  }
-
-  // 💝 HANDLE MEMORY SHARING
-  handleMemorySharing(analysis) {
-    return {
-      text: analysis.suggestedResponse,
-      actions: ['offer_memory_save'],
-      analysis: analysis
-    };
-  }
-
-  // 🤔 HANDLE CONFUSION
-  handleConfusion(analysis) {
-    const person = this.currentContext.lastQueriedPerson;
-    return {
-      text: person ? 
-        `I'm sorry if I confused you! You were telling me about ${person}. Would you like to continue sharing about them?` :
-        `I'm here to help! What would you like to talk about?`,
-      actions: []
-    };
-  }
-
-  async callLLM(prompt) {
-    if (!this.options.apiKey) throw new Error('No API key available');
-    
-    const response = await fetch('https://api.openai.com/v1/chat/completions', {
-      method: 'POST',
-      headers: {
-        'Authorization': `Bearer ${this.options.apiKey}`,
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({
-        model: 'gpt-4',
-        messages: [{ role: 'user', content: prompt }],
-        max_tokens: 300,
-        temperature: 0.7
-      })
-    });
-    
-    const data = await response.json();
-    return data.choices[0].message.content;
-  }
-}
-
-// Export for use in other modules
-window.EmmaChatExperience = EmmaChatExperience;
-console.log('💬 Emma Chat Experience: Module loaded successfully');
diff --git a/js/emma-chat.js b/js/emma-chat.js
deleted file mode 100644
index 7e218ac2..00000000
--- a/js/emma-chat.js
+++ /dev/null
@@ -1,526 +0,0 @@
-// Emma Chat Interface
-console.log('💬 Emma Chat: Initializing...');
-
-// Chat state
-let chatHistory = [];
-let currentContext = [];
-let isProcessing = false;
-
-// Initialize chat
-document.addEventListener('DOMContentLoaded', async () => {
-  console.log('💬 Emma Chat: DOM loaded');
-  
-  // Load chat history from storage
-  await loadChatHistory();
-  
-  // Auto-resize textarea
-  const chatInput = document.getElementById('chat-input');
-  chatInput.addEventListener('input', autoResizeTextarea);
-  
-  // Focus on input
-  chatInput.focus();
-  
-  // Check for memories
-  await checkMemoryStatus();
-});
-
-// Load chat history
-async function loadChatHistory() {
-  try {
-    const result = await chrome.storage.local.get(['emma_chat_history']);
-    if (result.emma_chat_history) {
-      chatHistory = result.emma_chat_history;
-      // Only show last 20 messages on load
-      const recentHistory = chatHistory.slice(-20);
-      recentHistory.forEach(msg => displayMessage(msg.sender, msg.content, msg.timestamp, false));
-      
-      if (recentHistory.length > 0) {
-        document.getElementById('welcome-message').style.display = 'none';
-      }
-    }
-  } catch (error) {
-    console.error('Failed to load chat history:', error);
-  }
-}
-
-// Save chat history
-async function saveChatHistory() {
-  try {
-    // Keep only last 100 messages
-    const historyToSave = chatHistory.slice(-100);
-    await chrome.storage.local.set({ emma_chat_history: historyToSave });
-  } catch (error) {
-    console.error('Failed to save chat history:', error);
-  }
-}
-
-// Check memory status
-async function checkMemoryStatus() {
-  try {
-    const response = await chrome.runtime.sendMessage({ action: 'getStats' });
-    if (response.success && response.stats.totalMemories > 0) {
-      updateSuggestedPrompts([
-        `Found ${response.stats.totalMemories} memories in your HML`,
-        'Show me my recent memories',
-        'What did I talk about yesterday?',
-        'Find memories about work'
-      ]);
-    }
-  } catch (error) {
-    console.error('Failed to check memory status:', error);
-  }
-}
-
-// Send message
-async function sendMessage() {
-  const input = document.getElementById('chat-input');
-  const message = input.value.trim();
-  
-  if (!message || isProcessing) return;
-  
-  // Clear input
-  input.value = '';
-  autoResizeTextarea({ target: input });
-  
-  // Hide welcome message
-  document.getElementById('welcome-message').style.display = 'none';
-  
-  // Display user message
-  displayMessage('user', message);
-  
-  // Save to history
-  chatHistory.push({
-    sender: 'user',
-    content: message,
-    timestamp: Date.now()
-  });
-  await saveChatHistory();
-  
-  // Process message
-  await processUserMessage(message);
-}
-
-// Process user message
-async function processUserMessage(message) {
-  isProcessing = true;
-  showTypingIndicator();
-  
-  try {
-    // Search for relevant memories
-    const memories = await searchMemories(message);
-    
-    // Generate response
-    const response = await generateResponse(message, memories);
-    
-    // Hide typing indicator
-    hideTypingIndicator();
-    
-    // Display Emma's response
-    displayMessage('emma', response.text, Date.now(), true);
-    
-    // Display relevant memories if any
-    if (response.memories && response.memories.length > 0) {
-      response.memories.forEach(memory => {
-        displayMemoryCapsule(memory);
-      });
-    }
-    
-    // Save Emma's response
-    chatHistory.push({
-      sender: 'emma',
-      content: response.text,
-      timestamp: Date.now(),
-      memories: response.memories
-    });
-    await saveChatHistory();
-    
-    // Update suggested prompts based on context
-    if (response.suggestions) {
-      updateSuggestedPrompts(response.suggestions);
-    }
-    
-  } catch (error) {
-    console.error('Failed to process message:', error);
-    hideTypingIndicator();
-    displayMessage('emma', "I'm having trouble accessing your memories right now. Please try again.", Date.now(), true);
-  }
-  
-  isProcessing = false;
-}
-
-// Search memories
-async function searchMemories(query) {
-  try {
-    const response = await chrome.runtime.sendMessage({
-      action: 'searchMemories',
-      query: query,
-      limit: 5
-    });
-    
-    if (response.success) {
-      return response.results || [];
-    }
-    return [];
-  } catch (error) {
-    console.error('Memory search failed:', error);
-    return [];
-  }
-}
-
-// Generate response (simplified for now)
-async function generateResponse(message, memories) {
-  // For now, use a simple rule-based system
-  // In future, this will connect to Claude/GPT API
-  
-  let responseText = '';
-  let relevantMemories = [];
-  let suggestions = [];
-  
-  // Check message intent
-  const lowerMessage = message.toLowerCase();
-  
-  if (lowerMessage.includes('recent') || lowerMessage.includes('today') || lowerMessage.includes('week')) {
-    if (memories.length > 0) {
-      responseText = `I found ${memories.length} recent memories. Here are the most relevant ones:`;
-      relevantMemories = memories.slice(0, 3);
-      suggestions = [
-        'Tell me more about the first one',
-        'Show older memories',
-        'Filter by source'
-      ];
-    } else {
-      responseText = "I don't see any recent memories yet. Try capturing some conversations with AI assistants!";
-      suggestions = [
-        'How do I capture memories?',
-        'What sites are supported?',
-        'Show me all memories'
-      ];
-    }
-  } else if (lowerMessage.includes('learn') || lowerMessage.includes('insight')) {
-    if (memories.length > 0) {
-      responseText = "Based on your memory patterns, I notice you've been exploring topics like: ";
-      // Extract topics from memories
-      const topics = extractTopics(memories);
-      responseText += topics.join(', ') + '. Would you like me to show specific conversations about any of these?';
-      suggestions = topics.map(topic => `Show memories about ${topic}`);
-    } else {
-      responseText = "I'll be able to provide insights once you've captured more memories. Each conversation you save helps me understand your interests better!";
-    }
-  } else if (lowerMessage.includes('help') || lowerMessage.includes('how')) {
-    responseText = "I can help you explore your Human Memory Layer! I can search for specific topics, show recent memories, find patterns in your conversations, and help you discover connections between different discussions. What would you like to explore?";
-    suggestions = [
-      'Show me how to capture memories',
-      'What can you do?',
-      'Search for a specific topic'
-    ];
-  } else {
-    // General search
-    if (memories.length > 0) {
-      responseText = `I found ${memories.length} memories related to "${message}". Here they are:`;
-      relevantMemories = memories;
-      suggestions = [
-        'Show more details',
-        'Find similar memories',
-        'When was this?'
-      ];
-    } else {
-      responseText = `I couldn't find any memories specifically about "${message}". Try asking about recent conversations or broader topics.`;
-      suggestions = [
-        'Show all memories',
-        'What topics do I have?',
-        'Help me search better'
-      ];
-    }
-  }
-  
-  return {
-    text: responseText,
-    memories: relevantMemories,
-    suggestions: suggestions
-  };
-}
-
-// Extract topics from memories
-function extractTopics(memories) {
-  const topics = new Set();
-  
-  memories.forEach(memory => {
-    // Extract from searchText
-    if (memory.searchText) {
-      const words = memory.searchText.toLowerCase().split(/\s+/);
-      words.forEach(word => {
-        if (word.length > 4 && !commonWords.includes(word)) {
-          topics.add(word);
-        }
-      });
-    }
-    
-    // Extract from metadata
-    if (memory.metadata && memory.metadata.keywords) {
-      memory.metadata.keywords.forEach(keyword => topics.add(keyword));
-    }
-  });
-  
-  return Array.from(topics).slice(0, 5);
-}
-
-// Common words to filter out
-const commonWords = ['the', 'and', 'for', 'with', 'from', 'about', 'that', 'this', 'what', 'when', 'where', 'which', 'would', 'could', 'should'];
-
-// Display message
-function displayMessage(sender, content, timestamp = Date.now(), animate = true) {
-  const messagesContainer = document.getElementById('chat-messages');
-  
-  const messageDiv = document.createElement('div');
-  messageDiv.className = `message ${sender}`;
-  if (!animate) messageDiv.style.animation = 'none';
-  
-  const avatarDiv = document.createElement('div');
-  avatarDiv.className = 'message-avatar';
-  avatarDiv.textContent = sender === 'user' ? '👤' : '🧠';
-  
-  const contentDiv = document.createElement('div');
-  contentDiv.className = 'message-content';
-  
-  const textDiv = document.createElement('div');
-  textDiv.className = 'message-text';
-  textDiv.textContent = content;
-  
-  const timeDiv = document.createElement('div');
-  timeDiv.className = 'message-time';
-  timeDiv.textContent = formatTime(timestamp);
-  
-  contentDiv.appendChild(textDiv);
-  contentDiv.appendChild(timeDiv);
-  
-  messageDiv.appendChild(avatarDiv);
-  messageDiv.appendChild(contentDiv);
-  
-  messagesContainer.appendChild(messageDiv);
-  
-  // Scroll to bottom
-  messagesContainer.scrollTop = messagesContainer.scrollHeight;
-}
-
-// Display memory capsule
-function displayMemoryCapsule(memory) {
-  const messagesContainer = document.getElementById('chat-messages');
-  
-  const capsuleDiv = document.createElement('div');
-  capsuleDiv.className = 'memory-capsule';
-  capsuleDiv.onclick = () => expandMemory(memory);
-  
-  // Header
-  const headerDiv = document.createElement('div');
-  headerDiv.className = 'memory-header';
-  
-  const sourceDiv = document.createElement('div');
-  sourceDiv.className = 'memory-source';
-  // SECURITY: Safe DOM creation to prevent XSS injection
-  const iconSpan = document.createElement('span');
-  iconSpan.innerHTML = getSourceIcon(memory.source); // getSourceIcon returns safe icons
-  const sourceText = document.createTextNode(` ${memory.source || 'Unknown'}`);
-  sourceDiv.appendChild(iconSpan);
-  sourceDiv.appendChild(sourceText);
-  
-  const dateDiv = document.createElement('div');
-  dateDiv.className = 'memory-date';
-  dateDiv.textContent = new Date(memory.timestamp).toLocaleDateString();
-  
-  headerDiv.appendChild(sourceDiv);
-  headerDiv.appendChild(dateDiv);
-  
-  // Content
-  const contentDiv = document.createElement('div');
-  contentDiv.className = 'memory-content';
-  contentDiv.textContent = truncateText(memory.content, 150);
-  
-  // Metadata
-  const metadataDiv = document.createElement('div');
-  metadataDiv.className = 'memory-metadata';
-  
-  if (memory.type) {
-    const typeTag = document.createElement('span');
-    typeTag.className = 'memory-tag';
-    typeTag.textContent = memory.type;
-    metadataDiv.appendChild(typeTag);
-  }
-  
-  if (memory.metadata && memory.metadata.keywords) {
-    memory.metadata.keywords.slice(0, 3).forEach(keyword => {
-      const tag = document.createElement('span');
-      tag.className = 'memory-tag';
-      tag.textContent = keyword;
-      metadataDiv.appendChild(tag);
-    });
-  }
-  
-  capsuleDiv.appendChild(headerDiv);
-  capsuleDiv.appendChild(contentDiv);
-  capsuleDiv.appendChild(metadataDiv);
-  
-  messagesContainer.appendChild(capsuleDiv);
-  messagesContainer.scrollTop = messagesContainer.scrollHeight;
-}
-
-// Get source icon
-function getSourceIcon(source) {
-  const icons = {
-    'chatgpt': '🤖',
-    'claude': '🎭',
-    'github': '🐙',
-    'google': '🔍',
-    'default': '💭'
-  };
-  
-  const sourceLower = (source || '').toLowerCase();
-  for (const [key, icon] of Object.entries(icons)) {
-    if (sourceLower.includes(key)) return icon;
-  }
-  return icons.default;
-}
-
-// Expand memory
-function expandMemory(memory) {
-  // TODO: Show full memory in modal or expand inline
-  console.log('Expanding memory:', memory);
-  displayMessage('emma', `This memory was captured on ${new Date(memory.timestamp).toLocaleString()}. Would you like me to find related memories or tell you more about this conversation?`);
-  updateSuggestedPrompts([
-    'Find similar memories',
-    'What else did we discuss then?',
-    'Show the full conversation'
-  ]);
-}
-
-// Show/hide typing indicator
-function showTypingIndicator() {
-  document.getElementById('typing-indicator').classList.add('active');
-  const messagesContainer = document.getElementById('chat-messages');
-  messagesContainer.scrollTop = messagesContainer.scrollHeight;
-}
-
-function hideTypingIndicator() {
-  document.getElementById('typing-indicator').classList.remove('active');
-}
-
-// Update suggested prompts
-function updateSuggestedPrompts(prompts) {
-  const container = document.getElementById('suggested-prompts');
-  container.innerHTML = '';
-  
-  if (prompts && prompts.length > 0) {
-    container.style.display = 'flex';
-    prompts.forEach(prompt => {
-      const chip = document.createElement('div');
-      chip.className = 'prompt-chip';
-      chip.textContent = prompt;
-      chip.onclick = () => sendPrompt(prompt);
-      container.appendChild(chip);
-    });
-  } else {
-    container.style.display = 'none';
-  }
-}
-
-// Send prompt
-function sendPrompt(prompt) {
-  const input = document.getElementById('chat-input');
-  input.value = prompt;
-  autoResizeTextarea({ target: input });
-  sendMessage();
-}
-
-// Handle keyboard shortcuts
-function handleKeyPress(event) {
-  if (event.key === 'Enter' && !event.shiftKey) {
-    event.preventDefault();
-    sendMessage();
-  }
-}
-
-// Auto-resize textarea
-function autoResizeTextarea(event) {
-  const textarea = event.target;
-  textarea.style.height = 'auto';
-  textarea.style.height = Math.min(textarea.scrollHeight, 120) + 'px';
-}
-
-// Clear chat
-async function clearChat() {
-  const confirmed = await window.emmaConfirm('Would you like to clear all chat history?', {
-    title: 'Clear Chat History',
-    helpText: 'This will remove all previous conversations.',
-    confirmText: 'Yes, Clear',
-    cancelText: 'Keep History'
-  });
-  if (confirmed) {
-    chatHistory = [];
-    saveChatHistory();
-    document.getElementById('chat-messages').innerHTML = '';
-    document.getElementById('welcome-message').style.display = 'block';
-    document.getElementById('suggested-prompts').style.display = 'none';
-  }
-}
-
-// Open memory search
-function openMemorySearch() {
-  // TODO: Open advanced memory search modal
-  displayMessage('emma', 'Advanced memory search coming soon! For now, just ask me what you\'re looking for and I\'ll search through your memories.');
-}
-
-// Voice input
-function startVoiceInput() {
-  // TODO: Implement voice input
-  displayMessage('emma', 'Voice input coming soon! This will let you talk to me naturally about your memories.');
-}
-
-// Utility functions
-function formatTime(timestamp) {
-  const date = new Date(timestamp);
-  const now = new Date();
-  const diff = now - date;
-  
-  if (diff < 60000) return 'just now';
-  if (diff < 3600000) return `${Math.floor(diff / 60000)}m ago`;
-  if (diff < 86400000) return `${Math.floor(diff / 3600000)}h ago`;
-  
-  return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
-}
-
-function truncateText(text, maxLength) {
-  if (text.length <= maxLength) return text;
-  return text.substring(0, maxLength) + '...';
-}
-
-// Export functions for external use
-window.emmaChat = {
-  sendMessage,
-  sendPrompt,
-  clearChat,
-  openMemorySearch,
-  startVoiceInput
-};
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/js/emma-dementia-companion.js b/js/emma-dementia-companion.js
index d045a73e..2f0ab198 100644
--- a/js/emma-dementia-companion.js
+++ b/js/emma-dementia-companion.js
@@ -1130,11 +1130,11 @@ class EmmaDementiaCompanion extends BaseOrb {
           bottom: 100px;
           right: 20px;
           width: 380px;
-          background: linear-gradient(135deg, rgba(139, 92, 246, 0.95) 0%, rgba(124, 58, 237, 0.95) 100%);
+          background: linear-gradient(135deg, rgba(111, 99, 217, 0.95) 0%, rgba(124, 58, 237, 0.95) 100%);
           border: 1px solid rgba(255, 255, 255, 0.2);
           border-radius: 20px;
           backdrop-filter: blur(20px);
-          box-shadow: 0 20px 25px -5px rgba(139, 92, 246, 0.25);
+          box-shadow: 0 20px 25px -5px rgba(111, 99, 217, 0.25);
           font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
           z-index: 10001;
           transition: all 0.4s ease;
diff --git a/js/emma-dementia-modals.js b/js/emma-dementia-modals.js
index 9406c767..126c92b8 100644
--- a/js/emma-dementia-modals.js
+++ b/js/emma-dementia-modals.js
@@ -161,7 +161,9 @@ class EmmaDementiaModals {
    */
   createModal(config) {
     if (this.isOpen) {
-      return Promise.reject(new Error('Modal is already open'));
+      // Don't throw error - just warn and ignore duplicate modals
+      console.warn('⚠️ Modal already open - ignoring duplicate request');
+      return Promise.resolve(null);
     }
 
     this.isOpen = true;
diff --git a/js/emma-dementia-styles.js b/js/emma-dementia-styles.js
index e1b37466..2223e216 100644
--- a/js/emma-dementia-styles.js
+++ b/js/emma-dementia-styles.js
@@ -16,13 +16,13 @@ function addDementiaStyles() {
       bottom: 100px;
       right: 20px;
       width: 380px;
-      background: linear-gradient(135deg, rgba(139, 92, 246, 0.95) 0%, rgba(124, 58, 237, 0.95) 100%);
+      background: linear-gradient(135deg, rgba(111, 99, 217, 0.95) 0%, rgba(124, 58, 237, 0.95) 100%);
       border: 1px solid rgba(255, 255, 255, 0.2);
       border-radius: 20px;
       backdrop-filter: blur(20px);
       box-shadow: 
-        0 20px 25px -5px rgba(139, 92, 246, 0.25),
-        0 10px 10px -5px rgba(139, 92, 246, 0.1),
+        0 20px 25px -5px rgba(111, 99, 217, 0.25),
+        0 10px 10px -5px rgba(111, 99, 217, 0.1),
         0 1px 3px rgba(255, 255, 255, 0.2) inset;
       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
       z-index: 10001;
diff --git a/js/emma-env.js b/js/emma-env.js
index 30b24353..2cbe8492 100644
--- a/js/emma-env.js
+++ b/js/emma-env.js
@@ -3,15 +3,114 @@
 		var params = new URLSearchParams(location.search || '');
 		var override = params.get('emma_env');
 		var host = (location && location.hostname) ? location.hostname : '';
-		var inferred = (host === 'localhost' || host === '127.0.0.1') ? 'development' : 'production';
+		var protocol = (location && location.protocol) ? location.protocol : '';
+		var isLocalHost = (
+			!host ||
+			host === 'localhost' ||
+			host === '127.0.0.1' ||
+			host === '::1' ||
+			host === '0.0.0.0' ||
+			isPrivateNetworkHost(host)
+		);
+		if (protocol === 'file:') {
+			isLocalHost = true;
+		}
+		var inferred = isLocalHost ? 'development' : 'production';
 		var env = override || inferred;
 		if (env !== 'development' && env !== 'production') env = 'production';
 		window.EMMA_ENV = env;
 		window.EMMA_DEBUG = (env === 'development') || params.get('emma_debug') === '1';
+
+		// FORCE debug logging bypassing production suppression
+		var forceLog = function() {
+			Function.prototype.call.call(console.log, console, ...arguments);
+		};
+		forceLog('🔧 EMMA_ENV INIT: host=', host, 'protocol=', protocol, 'isLocalHost=', isLocalHost, 'env=', env);
 	} catch (e) {
 		// Safe defaults for production
 		try { window.EMMA_ENV = 'production'; window.EMMA_DEBUG = false; } catch (_) {}
 	}
+
+	var PROD_BACKEND_ORIGIN = 'https://emma-lite-optimized.onrender.com';
+
+	function isPrivateNetworkHost(host) {
+		if (!host) return false;
+		return (
+			/^10\./.test(host) ||
+			/^192\.168\./.test(host) ||
+			/^172\.(1[6-9]|2\d|3[0-1])\./.test(host)
+		);
+	}
+
+	function normalizeOrigin(origin) {
+		return (origin || '').replace(/\/+$/, '');
+	}
+
+	function resolveBackendOrigin() {
+		if (typeof window === 'undefined') {
+			return PROD_BACKEND_ORIGIN;
+		}
+
+		if (window.EMMA_BACKEND_ORIGIN) {
+			return normalizeOrigin(window.EMMA_BACKEND_ORIGIN);
+		}
+
+		var loc = window.location || {};
+		var protocol = loc.protocol || 'http:';
+		var hostname = (loc.hostname || '').toLowerCase();
+		var port = loc.port || '';
+		var isFileProtocol = protocol === 'file:';
+		var isLocalHost = (
+			isFileProtocol ||
+			hostname === '' ||
+			hostname === 'localhost' ||
+			hostname === '127.0.0.1' ||
+			hostname === '::1' ||
+			hostname === '0.0.0.0' ||
+			isPrivateNetworkHost(hostname)
+		);
+
+		if (isLocalHost) {
+			var resolvedHost = hostname || 'localhost';
+			var secure = protocol === 'https:';
+			var resolvedPort = port || (secure ? '' : '3000');
+			var portSegment = resolvedPort ? (':' + resolvedPort) : '';
+			var scheme = secure ? 'https:' : 'http:';
+			return scheme + '//' + resolvedHost + portSegment;
+		}
+
+		// CRITICAL FIX: On production/Render, ALWAYS use current page's origin
+		// This ensures WebSocket connects to the SAME server serving the page
+		// Works for emma-hjjc.onrender.com, emma-lite-optimized.onrender.com, or any other deployment
+		if (loc.origin) {
+			return normalizeOrigin(loc.origin);
+		}
+
+		// Fallback only if origin is not available (very old browsers)
+		var fallbackHost = hostname || 'emma-lite-optimized.onrender.com';
+		var fallbackScheme = protocol || 'https:';
+		var fallbackPort = port ? (':' + port) : '';
+		return normalizeOrigin(fallbackScheme + '//' + fallbackHost + fallbackPort) || PROD_BACKEND_ORIGIN;
+	}
+
+	if (typeof window !== 'undefined') {
+		window.getEmmaBackendOrigin = function getEmmaBackendOrigin() {
+			try {
+				return normalizeOrigin(resolveBackendOrigin());
+			} catch (error) {
+				if (window.EMMA_DEBUG) {
+					console.warn('Emma backend origin resolution failed, using production backend.', error);
+				}
+				return PROD_BACKEND_ORIGIN;
+			}
+		};
+
+		window.getEmmaBackendWsUrl = function getEmmaBackendWsUrl() {
+			var origin = window.getEmmaBackendOrigin();
+			var wsOrigin = origin.replace(/^http/i, 'ws');
+			return normalizeOrigin(wsOrigin) + '/voice';
+		};
+	}
 })();
 
 
diff --git a/js/emma-input-modal.js b/js/emma-input-modal.js
index d4233344..6a2cf41f 100644
--- a/js/emma-input-modal.js
+++ b/js/emma-input-modal.js
@@ -35,6 +35,10 @@ class EmmaInputModal {
         defaultValue = ""
       } = options;
 
+      const esc = (s) => (window.escapeHtml ? window.escapeHtml(s) : String(s)
+        .replace(/&/g, '&amp;').replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;').replace(/\"/g, '&quot;').replace(/'/g, '&#39;'));
+
       this.currentResolve = resolve;
       this.currentReject = reject;
       this.isOpen = true;
@@ -44,20 +48,20 @@ class EmmaInputModal {
         <div class="emma-input-modal-overlay" id="inputModalOverlay">
           <div class="emma-input-modal">
             <div class="emma-input-modal-header">
-              <h3 class="emma-input-modal-title">${title}</h3>
+              <h3 class="emma-input-modal-title">${esc(title)}</h3>
               <button class="emma-input-modal-close" onclick="window.emmaInputModal.cancel()">×</button>
             </div>
             
             <div class="emma-input-modal-body">
-              <p class="emma-input-modal-message">${message}</p>
+              <p class="emma-input-modal-message">${esc(message)}</p>
               
               <div class="emma-input-group">
                 <input 
                   type="text" 
                   id="emmaTextInput" 
                   class="emma-text-input" 
-                  placeholder="${placeholder}"
-                  value="${defaultValue}"
+                  placeholder="${esc(placeholder)}"
+                  value="${esc(defaultValue)}"
                   autocomplete="off"
                 >
               </div>
@@ -297,7 +301,7 @@ const inputModalStyles = `
   outline: none;
   border-color: var(--emma-purple);
   background: rgba(255, 255, 255, 0.08);
-  box-shadow: 0 0 0 3px rgba(134, 88, 255, 0.2);
+  box-shadow: 0 0 0 3px rgba(111, 99, 217, 0.2);
 }
 
 .emma-text-input::placeholder {
@@ -341,7 +345,7 @@ const inputModalStyles = `
 
 .emma-input-btn-confirm:hover {
   transform: translateY(-2px);
-  box-shadow: 0 8px 25px rgba(134, 88, 255, 0.3);
+  box-shadow: 0 8px 25px rgba(111, 99, 217, 0.3);
 }
 
 .emma-input-error {
diff --git a/js/emma-logger.js b/js/emma-logger.js
index c4d02705..09fd022e 100644
--- a/js/emma-logger.js
+++ b/js/emma-logger.js
@@ -8,112 +8,81 @@
 
   class EmmaLogger {
     constructor() {
-      // Use existing environment detection or fallback
       this.isProduction = window.EMMA_ENV === 'production';
       this.debugEnabled = window.EMMA_DEBUG === true;
-      
-      // Log levels: error, warn, info, debug
       this.logLevel = this.isProduction ? 'warn' : 'debug';
-      
-      console.log(`🔒 Emma Logger initialized: ${this.isProduction ? 'PRODUCTION' : 'DEVELOPMENT'} mode`);
     }
 
-    /**
-     * Only logs errors (always enabled)
-     */
+    // Always log errors
     error(message, ...args) {
-      console.error(`❌ ${message}`, ...args);
+      console.error(`[ERR] ${message}`, ...args);
     }
 
-    /**
-     * Logs warnings (enabled in dev and prod)
-     */
+    // Warnings (enabled in dev and prod)
     warn(message, ...args) {
-      console.warn(`⚠️ ${message}`, ...args);
+      console.warn(`[WARN] ${message}`, ...args);
     }
 
-    /**
-     * Logs info (disabled in production)
-     */
+    // Info (disabled in production)
     info(message, ...args) {
       if (!this.isProduction) {
-        console.log(`ℹ️ ${message}`, ...args);
+        console.log(`[INFO] ${message}`, ...args);
       }
     }
 
-    /**
-     * Debug logs (only in development with debug flag)
-     */
+    // Debug (only if explicitly enabled)
     debug(message, ...args) {
       if (this.debugEnabled) {
-        console.log(`🐛 ${message}`, ...args);
+        console.log(`[DEBUG] ${message}`, ...args);
       }
     }
 
-    /**
-     * Security-sensitive logs (never in production)
-     */
+    // Security-sensitive logs (never detailed in production)
     security(message, ...args) {
       if (!this.isProduction) {
-        console.log(`🔒 SECURITY: ${message}`, ...args);
+        console.log(`[SECURITY] ${message}`, ...args);
       } else {
-        // In production, only log that a security event occurred
         console.warn('🔒 Security event logged (details suppressed in production)');
       }
     }
 
-    /**
-     * Memory/vault operations (privacy-sensitive)
-     */
+    // Vault operations (privacy-sensitive)
     vault(message, ...args) {
       if (!this.isProduction) {
-        console.log(`🗃️ VAULT: ${message}`, ...args);
+        console.log(`[VAULT] ${message}`, ...args);
       }
     }
 
-    /**
-     * User data processing (highly sensitive)
-     */
+    // User data processing (highly sensitive)
     userData(message, ...args) {
       if (!this.isProduction) {
-        console.log(`👤 USER: ${message}`, ...args);
+        console.log(`[USER] ${message}`, ...args);
       }
     }
 
-    /**
-     * Production-safe status logging
-     */
+    // Production-safe status logging
     status(message, ...args) {
-      // Always log status but sanitize in production
       if (this.isProduction) {
-        // Remove potentially sensitive details in production
-        const sanitized = message.replace(/passphrase|password|key|token/gi, '[REDACTED]');
-        console.log(`📊 ${sanitized}`);
+        const sanitized = String(message).replace(/passphrase|password|key|token/gi, '[REDACTED]');
+        console.log(`[STATUS] ${sanitized}`);
       } else {
-        console.log(`📊 ${message}`, ...args);
+        console.log(`[STATUS] ${message}`, ...args);
       }
     }
 
-    /**
-     * Wrap existing console methods for backwards compatibility
-     */
+    // Optional: wrap console for backwards compatibility
     static wrapConsole() {
       if (window.EMMA_ENV === 'production') {
         const originalLog = console.log;
         const originalInfo = console.info;
-        
-        // In production, suppress console.log and console.info
         console.log = function(...args) {
-          // Only allow if explicitly marked as production-safe
           if (args[0] && typeof args[0] === 'string' && args[0].includes('[PROD-SAFE]')) {
             originalLog.apply(console, args);
           }
         };
-        
-        console.info = function(...args) {
+        console.info = function(..._args) {
           // Suppress info logs in production
         };
-        
         console.warn('🔒 Console logging suppressed in production mode');
       }
     }
@@ -122,9 +91,8 @@
   // Create global logger instance
   window.EmmaLogger = new EmmaLogger();
 
-  // Optionally wrap console for backwards compatibility
   if (window.EMMA_ENV === 'production') {
     EmmaLogger.wrapConsole();
   }
-
 })();
+
diff --git a/js/emma-orb.js b/js/emma-orb.js
index 79a79f11..8f7118c5 100644
--- a/js/emma-orb.js
+++ b/js/emma-orb.js
@@ -405,7 +405,7 @@ class EmmaOrb {
       <div style="
         width: 100%;
         height: 100%;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #deb3e4 100%);
         border-radius: 50%;
         animation: float 3s ease-in-out infinite;
       "></div>
diff --git a/js/emma-performance-optimizer.js b/js/emma-performance-optimizer.js
index 96ec3df3..230fe9f0 100644
--- a/js/emma-performance-optimizer.js
+++ b/js/emma-performance-optimizer.js
@@ -13,9 +13,16 @@ class EmmaPerformanceOptimizer {
     this.performanceBudget = {
       maxInitialJS: 500, // KB
       maxImageSize: 5,   // MB
-      maxConcurrentRequests: 6
+      maxConcurrentRequests: 6,
+      maxMemoryMB: 120
     };
-    
+    this.memoryPressureActive = false;
+    this.memoryWarningIssued = false;
+    this.lastMemoryWarning = 0;
+    this.lastMemoryUsage = 0;
+    this.memoryCheckInterval = null;
+    this.voiceShutdownRequested = false;
+
     this.init();
   }
 
@@ -450,18 +457,99 @@ class EmmaPerformanceOptimizer {
     }
 
     // Memory usage monitoring (if available)
-    if (performance.memory) {
-      setInterval(() => {
+    if (performance && performance.memory) {
+      if (this.memoryCheckInterval) {
+        clearInterval(this.memoryCheckInterval);
+      }
+
+      this.memoryCheckInterval = setInterval(() => {
         const memoryInfo = performance.memory;
         const usedMB = memoryInfo.usedJSHeapSize / (1024 * 1024);
-        
-        if (usedMB > 100) { // Alert if using more than 100MB
-          console.warn(`⚠️ High memory usage: ${usedMB.toFixed(1)}MB`);
+        this.lastMemoryUsage = usedMB;
+
+        const threshold = this.performanceBudget.maxMemoryMB || 120;
+        if (usedMB >= threshold) {
+          this.handleMemoryPressure(usedMB);
+        } else if (this.memoryPressureActive && usedMB < threshold * 0.75) {
+          this.releaseMemoryPressure();
+        } else if (usedMB < threshold * 0.8) {
+          this.memoryWarningIssued = false;
         }
       }, 30000); // Check every 30 seconds
     }
   }
 
+  /**
+   * Handle high memory usage by shedding optional workloads
+   */
+  handleMemoryPressure(currentMB) {
+    const threshold = this.performanceBudget.maxMemoryMB || 120;
+    const now = Date.now();
+
+    if (!this.memoryWarningIssued || (now - this.lastMemoryWarning) > 60000) {
+      console.warn(`[Emma] High memory usage: ${currentMB.toFixed(1)}MB (budget ${threshold}MB)`);
+      this.memoryWarningIssued = true;
+      this.lastMemoryWarning = now;
+    }
+
+    if (typeof window !== 'undefined' && window.dispatchEvent) {
+      window.dispatchEvent(new CustomEvent('emma:memoryPressure', {
+        detail: {
+          usageMB: currentMB,
+          thresholdMB: threshold,
+          active: this.memoryPressureActive
+        }
+      }));
+    }
+
+    if (this.memoryPressureActive) {
+      return;
+    }
+
+    this.memoryPressureActive = true;
+    document.body.classList.add('emma-memory-pressure');
+
+    if (!this.isReducedMotion) {
+      document.body.classList.add('reduced-motion');
+    }
+
+    if (window.emmaChatExperience?.isVisible && window.emmaChatExperience.close) {
+      try {
+        window.emmaChatExperience.close();
+      } catch (error) {
+        console.warn('[Emma] Unable to close chat during memory pressure:', error);
+      }
+    }
+
+    if (!this.voiceShutdownRequested && window.emmaChatExperience?.emmaVoice?.isConnected) {
+      this.voiceShutdownRequested = true;
+      Promise.resolve(window.emmaChatExperience.emmaVoice.stopVoiceSession?.())
+        .catch((error) => console.warn('[Emma] Failed to end voice session during memory pressure:', error))
+        .finally(() => {
+          this.voiceShutdownRequested = false;
+        });
+    }
+  }
+
+  /**
+   * Clear memory pressure state once usage returns to normal levels
+   */
+  releaseMemoryPressure() {
+    if (!this.memoryPressureActive) {
+      return;
+    }
+
+    this.memoryPressureActive = false;
+    document.body.classList.remove('emma-memory-pressure');
+    this.voiceShutdownRequested = false;
+
+    if (typeof window !== 'undefined' && window.dispatchEvent) {
+      window.dispatchEvent(new CustomEvent('emma:memoryPressureRecovered', {
+        detail: { usageMB: this.lastMemoryUsage }
+      }));
+    }
+  }
+
   /**
    * Public API for manual optimization
    */
diff --git a/js/emma-qr-generator.js b/js/emma-qr-generator.js
index b93e741b..8700a80a 100644
--- a/js/emma-qr-generator.js
+++ b/js/emma-qr-generator.js
@@ -242,7 +242,7 @@ class EmmaQRGenerator {
     const borderGradient = ctx.createLinearGradient(0, 0, settings.size, settings.size);
     borderGradient.addColorStop(0, '#667eea');
     borderGradient.addColorStop(0.5, '#764ba2');
-    borderGradient.addColorStop(1, '#f093fb');
+    borderGradient.addColorStop(1, '#deb3e4');
     
     ctx.strokeStyle = borderGradient;
     ctx.lineWidth = 6;
@@ -273,7 +273,7 @@ class EmmaQRGenerator {
       centerX - 60, centerY - 30, centerX + 60, centerY + 30
     );
     logoGradient.addColorStop(0, '#764ba2');
-    logoGradient.addColorStop(1, '#f093fb');
+    logoGradient.addColorStop(1, '#deb3e4');
     
     ctx.fillStyle = logoGradient;
     ctx.fillRect(centerX - 60, centerY - 30, 120, 60);
diff --git a/js/emma-realtime-voice.js b/js/emma-realtime-voice.js
index 57ae7826..81f3d2c0 100644
--- a/js/emma-realtime-voice.js
+++ b/js/emma-realtime-voice.js
@@ -116,11 +116,11 @@ class EmmaRealtimeVoice {
       this.updateStatus('Preparing voice session...');
 
       // Get ephemeral token (privacy-first)
-      const backendUrl = window.location.hostname === 'localhost' 
-        ? 'http://localhost:3001' 
-        : 'https://emma-voice-backend.onrender.com';
+      const backendOrigin = (typeof window.getEmmaBackendOrigin === 'function')
+        ? window.getEmmaBackendOrigin()
+        : 'https://emma-lite-optimized.onrender.com';
         
-      const tokenResponse = await fetch(`${backendUrl}/token`);
+      const tokenResponse = await fetch(`${backendOrigin}/token`);
 
       if (!tokenResponse.ok) {
         const error = await tokenResponse.json();
@@ -527,7 +527,11 @@ class EmmaVoiceTools {
       get_memories: this.getMemories.bind(this),
       summarize_memory: this.summarizeMemory.bind(this),
       create_memory_from_voice: this.createMemoryFromVoice.bind(this),
-      update_person: this.updatePerson.bind(this)
+      create_memory_capsule: this.createMemoryCapsule.bind(this),
+      update_person: this.updatePerson.bind(this),
+      create_person_profile: this.createPersonProfile.bind(this),
+      update_memory_capsule: this.updateMemoryCapsule.bind(this),
+      attach_memory_media: this.attachMemoryMedia.bind(this)
     };
     
     console.log('🔧 Emma Voice Tools initialized (local-only)');
@@ -657,21 +661,14 @@ class EmmaVoiceTools {
       if (!window.emmaWebVault?.isOpen) {
         return { error: 'Vault not available - please open your vault first' };
       }
-      
+
       console.log('💭 Creating memory from voice:', params);
-      
-      // Process people mentioned in the memory
-      const peopleIds = [];
-      if (params.people && params.people.length > 0) {
-        for (const personName of params.people) {
-          // Try to find existing person or create new one
-          const person = await this.findOrCreatePerson(personName);
-          if (person && person.id) {
-            peopleIds.push(person.id);
-          }
-        }
-      }
-      
+
+      const peopleIds = await this.resolvePeopleIdentifiers(params.people || []);
+      const attachments = await this.normalizeAttachments(params.attachments || []);
+      const content = (params.content || '').trim();
+      const derivedTitle = params.title || (content ? content.substring(0, 60) : 'Voice memory');
+
       // Create rich metadata from voice parameters
       const metadata = {
         source: 'voice-conversation',
@@ -680,30 +677,89 @@ class EmmaVoiceTools {
         emotion: params.emotion || 'neutral',
         importance: params.importance || 7, // Default to high importance for voice memories
         created_via: 'emma-voice',
-        date_captured: new Date().toISOString()
+        date_captured: new Date().toISOString(),
+        title: derivedTitle,
+        date: params.date || undefined,
+        location: params.location || undefined
       };
-      
+
       // Use existing vault system (Staging → Approval → Vault)
       const result = await window.emmaWebVault.addMemory({
-        content: params.content,
-        metadata: metadata
+        content: content,
+        metadata: metadata,
+        attachments
       });
-      
+
       console.log('✅ Memory created successfully:', result.memory?.id);
-      
-      return { 
-        success: true, 
+
+      return {
+        success: true,
         memoryId: result.memory?.id,
         peopleConnected: peopleIds.length,
+        attachmentCount: attachments.length,
         message: `Memory saved with ${peopleIds.length} people connected`
       };
-      
+
     } catch (error) {
       console.error('❌ createMemoryFromVoice error:', error);
       return { error: 'Failed to create memory: ' + error.message };
     }
   }
 
+  async createMemoryCapsule(params = {}) {
+    try {
+      if (!window.emmaWebVault?.isOpen) {
+        return { error: 'Vault not available - please open your vault first' };
+      }
+
+      const content = (params.content || '').trim();
+      if (!content) {
+        return { error: 'Memory content is required' };
+      }
+
+      const title = params.title?.trim() || content.substring(0, 60);
+      const peopleIds = await this.resolvePeopleIdentifiers(params.people || []);
+      const attachments = await this.normalizeAttachments(params.attachments || []);
+
+      const metadata = {
+        ...(params.metadata || {}),
+        title,
+        people: peopleIds,
+        emotion: params.emotion || params.metadata?.emotion || 'neutral',
+        importance: typeof params.importance === 'number'
+          ? params.importance
+          : params.metadata?.importance || 5,
+        tags: Array.isArray(params.tags) ? params.tags : params.metadata?.tags || [],
+        location: params.location || params.metadata?.location || '',
+        date: params.date || params.metadata?.date,
+        captureMethod: params.captureMethod || 'chat-agent',
+        created_via: 'emma-agent-chat'
+      };
+
+      const result = await window.emmaWebVault.addMemory({
+        content,
+        metadata,
+        attachments
+      });
+
+      if (!result?.success) {
+        return { error: result?.error || 'Failed to save memory' };
+      }
+
+      return {
+        success: true,
+        memoryId: result.memory?.id,
+        title,
+        peopleCount: peopleIds.length,
+        attachmentCount: attachments.length
+      };
+
+    } catch (error) {
+      console.error('❌ createMemoryCapsule error:', error);
+      return { error: 'Failed to save memory capsule: ' + error.message };
+    }
+  }
+
   /**
    * Find existing person or create new one (privacy-first)
    */
@@ -753,6 +809,234 @@ class EmmaVoiceTools {
     }
   }
 
+  async resolvePeopleIdentifiers(peopleInput) {
+    const ids = [];
+    if (!Array.isArray(peopleInput)) {
+      return ids;
+    }
+
+    const seen = new Set();
+    for (const entry of peopleInput) {
+      if (!entry) continue;
+
+      if (typeof entry === 'string') {
+        const person = await this.findOrCreatePerson(entry.trim());
+        if (person?.id && !seen.has(person.id)) {
+          ids.push(person.id);
+          seen.add(person.id);
+        }
+        continue;
+      }
+
+      if (typeof entry === 'object') {
+        if (entry.id) {
+          if (!seen.has(entry.id)) {
+            ids.push(entry.id);
+            seen.add(entry.id);
+          }
+          if (entry.relationship && window.emmaWebVault?.vaultData?.content?.people?.[entry.id]) {
+            window.emmaWebVault.vaultData.content.people[entry.id].relationship = entry.relationship;
+          }
+          continue;
+        }
+
+        if (entry.name) {
+          const person = await this.findOrCreatePerson(entry.name);
+          if (person?.id && !seen.has(person.id)) {
+            ids.push(person.id);
+            seen.add(person.id);
+          }
+          if (entry.relationship && person) {
+            person.relationship = entry.relationship;
+          }
+        }
+      }
+    }
+
+    return ids;
+  }
+
+  lookupChatMedia(uploadId) {
+    if (!uploadId) return null;
+
+    try {
+      if (window.chatExperience && typeof window.chatExperience.lookupMediaUpload === 'function') {
+        const media = window.chatExperience.lookupMediaUpload(uploadId);
+        if (media) {
+          return media;
+        }
+      }
+    } catch (error) {
+      console.warn('📷 lookupChatMedia error:', error);
+    }
+
+    return null;
+  }
+
+  async processAttachmentPayload(attachment) {
+    if (!attachment) return null;
+
+    try {
+      const mediaStore = window.emmaWebVault?.vaultData?.content?.media || {};
+      let { id, uploadId, data, dataUrl, type, name, size } = attachment;
+      let payload = data || dataUrl || attachment.url;
+      let resolvedName = name;
+      let resolvedType = type || attachment.mimeType;
+      let resolvedSize = size || attachment.fileSize || 0;
+
+      if (!payload && (uploadId || id)) {
+        const lookupId = uploadId || id;
+        const chatMedia = this.lookupChatMedia(lookupId);
+        if (chatMedia) {
+          payload = chatMedia.dataUrl || chatMedia.data;
+          resolvedName = resolvedName || chatMedia.name;
+          resolvedType = resolvedType || chatMedia.type;
+          resolvedSize = resolvedSize || chatMedia.size || resolvedSize;
+          id = chatMedia.id || lookupId;
+        }
+      }
+
+      if (!payload && id && mediaStore[id]) {
+        const mediaItem = mediaStore[id];
+        return {
+          id,
+          type: resolvedType || mediaItem.type,
+          name: resolvedName || mediaItem.name,
+          size: resolvedSize || mediaItem.size || 0
+        };
+      }
+
+      if (!payload) {
+        return null;
+      }
+
+      const mime = resolvedType || 'application/octet-stream';
+      if (typeof payload === 'string' && !payload.startsWith('data:')) {
+        payload = `data:${mime};base64,${payload}`;
+      }
+
+      const storedId = await window.emmaWebVault.addMedia({
+        type: mime,
+        name: resolvedName || 'memory-attachment',
+        data: payload
+      });
+
+      return {
+        id: storedId,
+        type: mime,
+        name: resolvedName || 'memory-attachment',
+        size: resolvedSize || 0
+      };
+
+    } catch (error) {
+      console.error('❌ processAttachmentPayload error:', error);
+      return null;
+    }
+  }
+
+  async normalizeAttachments(attachments) {
+    if (!Array.isArray(attachments) || attachments.length === 0) {
+      return [];
+    }
+
+    const processed = [];
+    for (const attachment of attachments) {
+      const normalized = await this.processAttachmentPayload(attachment);
+      if (normalized) {
+        processed.push(normalized);
+      }
+    }
+
+    return processed;
+  }
+
+  async createPersonProfile(params = {}) {
+    try {
+      if (!window.emmaWebVault?.isOpen) {
+        return { error: 'Vault not available - please open your vault first' };
+      }
+
+      const name = params.name?.trim();
+      if (!name) {
+        return { error: 'Person name is required' };
+      }
+
+      const people = window.emmaWebVault.vaultData?.content?.people || {};
+      let person = Object.values(people).find(p => p.name?.toLowerCase() === name.toLowerCase());
+
+      if (!person) {
+        const personId = 'person_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
+        person = {
+          id: personId,
+          name,
+          created: new Date().toISOString(),
+          source: 'emma-agent-chat'
+        };
+        people[personId] = person;
+      }
+
+      if (params.relationship) {
+        person.relationship = params.relationship;
+      }
+
+      if (params.pronouns) {
+        person.pronouns = params.pronouns;
+      }
+
+      if (params.birthday) {
+        person.birthday = params.birthday;
+      }
+
+      if (params.details) {
+        if (!person.details) {
+          person.details = [];
+        }
+        if (Array.isArray(person.details)) {
+          person.details.push({
+            detail: params.details,
+            added: new Date().toISOString(),
+            source: 'emma-agent-chat'
+          });
+        } else if (typeof person.details === 'string') {
+          person.details = [
+            { detail: person.details, source: 'legacy' },
+            { detail: params.details, added: new Date().toISOString(), source: 'emma-agent-chat' }
+          ];
+        }
+      }
+
+      if (params.avatar && (params.avatar.data || params.avatar.dataUrl || params.avatar.uploadId || params.avatar.id)) {
+        const avatarAttachment = await this.processAttachmentPayload({
+          id: params.avatar.id,
+          uploadId: params.avatar.uploadId,
+          data: params.avatar.data,
+          dataUrl: params.avatar.dataUrl,
+          type: params.avatar.type || 'image/png',
+          name: params.avatar.name || `${name}-avatar`
+        });
+
+        if (avatarAttachment?.id) {
+          person.avatarId = avatarAttachment.id;
+          person.avatarUpdated = new Date().toISOString();
+        }
+      }
+
+      person.updated = new Date().toISOString();
+
+      await window.emmaWebVault.scheduleElegantSave();
+
+      return {
+        success: true,
+        personId: person.id,
+        personName: person.name
+      };
+
+    } catch (error) {
+      console.error('❌ createPersonProfile error:', error);
+      return { error: 'Failed to create person: ' + error.message };
+    }
+  }
+
   /**
    * Update person locally (vault integration) - ENHANCED
    */
@@ -813,17 +1097,157 @@ class EmmaVoiceTools {
       
       console.log('✅ Person updated successfully:', person.name);
       
-      return { 
-        success: true, 
+      return {
+        success: true,
         personName: person.name,
         message: `Updated ${person.name} with new details`
       };
-      
+
     } catch (error) {
       console.error('❌ updatePerson error:', error);
       return { error: 'Failed to update person: ' + error.message };
     }
   }
+
+  async updateMemoryCapsule(params = {}) {
+    try {
+      if (!window.emmaWebVault?.isOpen) {
+        return { error: 'Vault not available - please open your vault first' };
+      }
+
+      const memoryId = params.memoryId;
+      if (!memoryId) {
+        return { error: 'memoryId is required' };
+      }
+
+      const memory = window.emmaWebVault.vaultData?.content?.memories?.[memoryId];
+      if (!memory) {
+        return { error: 'Memory not found' };
+      }
+
+      const updates = {};
+      const metadataUpdates = {};
+
+      if (typeof params.content === 'string' && params.content.trim()) {
+        updates.content = params.content.trim();
+        if (!params.title) {
+          metadataUpdates.title = params.content.trim().substring(0, 60);
+        }
+      }
+
+      if (params.title) {
+        metadataUpdates.title = params.title;
+      }
+
+      if (Array.isArray(params.tags)) {
+        metadataUpdates.tags = params.tags;
+      }
+
+      if (params.emotion) {
+        metadataUpdates.emotion = params.emotion;
+      }
+
+      if (typeof params.importance === 'number') {
+        metadataUpdates.importance = params.importance;
+      }
+
+      if (params.location) {
+        metadataUpdates.location = params.location;
+      }
+
+      if (params.date) {
+        metadataUpdates.date = params.date;
+      }
+
+      if (params.people) {
+        metadataUpdates.people = await this.resolvePeopleIdentifiers(params.people);
+      }
+
+      if (Object.keys(metadataUpdates).length > 0) {
+        updates.metadata = {
+          ...memory.metadata,
+          ...metadataUpdates
+        };
+      }
+
+      let attachmentsChanged = false;
+      let attachments = Array.isArray(memory.attachments) ? [...memory.attachments] : [];
+
+      if (Array.isArray(params.removeAttachmentIds) && params.removeAttachmentIds.length > 0) {
+        const removalSet = new Set(params.removeAttachmentIds);
+        attachments = attachments.filter(att => !removalSet.has(att.id));
+        attachmentsChanged = true;
+      }
+
+      if (params.replaceAttachments) {
+        attachments = [];
+        attachmentsChanged = true;
+      }
+
+      if (Array.isArray(params.attachments) && params.attachments.length > 0) {
+        const newAttachments = await this.normalizeAttachments(params.attachments);
+        if (newAttachments.length > 0) {
+          attachments = attachments.concat(newAttachments);
+          attachmentsChanged = true;
+        }
+      }
+
+      if (attachmentsChanged) {
+        updates.attachments = attachments;
+      }
+
+      if (Object.keys(updates).length === 0) {
+        return { success: true, memoryId, updatedFields: [] };
+      }
+
+      const result = await window.emmaWebVault.updateMemory(memoryId, updates);
+      if (!result?.success) {
+        return { error: result?.error || 'Failed to update memory' };
+      }
+
+      const updatedFields = Object.keys(updates);
+      return {
+        success: true,
+        memoryId,
+        updatedFields,
+        attachmentCount: updates.attachments ? updates.attachments.length : undefined
+      };
+
+    } catch (error) {
+      console.error('❌ updateMemoryCapsule error:', error);
+      return { error: 'Failed to update memory: ' + error.message };
+    }
+  }
+
+  async attachMemoryMedia(params = {}) {
+    try {
+      if (!params.memoryId) {
+        return { error: 'memoryId is required' };
+      }
+      if (!Array.isArray(params.media) || params.media.length === 0) {
+        return { error: 'Media array is required' };
+      }
+
+      const updateResult = await this.updateMemoryCapsule({
+        memoryId: params.memoryId,
+        attachments: params.media,
+        replaceAttachments: params.replaceExisting === true
+      });
+
+      if (updateResult.success) {
+        return {
+          ...updateResult,
+          attachmentCount: updateResult.attachmentCount ?? params.media.length
+        };
+      }
+
+      return updateResult;
+
+    } catch (error) {
+      console.error('❌ attachMemoryMedia error:', error);
+      return { error: 'Failed to attach media: ' + error.message };
+    }
+  }
 }
 
 // Export for global use
diff --git a/js/emma-share-experience.js b/js/emma-share-experience.js
index 2ca48dae..bf1acf78 100644
--- a/js/emma-share-experience.js
+++ b/js/emma-share-experience.js
@@ -612,7 +612,7 @@ class EmmaShareExperience extends ExperiencePopup {
     const gradient = ctx.createLinearGradient(0, 0, 256, 256);
     gradient.addColorStop(0, '#667eea');
     gradient.addColorStop(0.5, '#764ba2');
-    gradient.addColorStop(1, '#f093fb');
+    gradient.addColorStop(1, '#deb3e4');
     
     ctx.fillStyle = gradient;
     ctx.fillRect(0, 0, 256, 256);
diff --git a/js/emma-unified-intelligence.js b/js/emma-unified-intelligence.js
new file mode 100644
index 00000000..2885ffb4
--- /dev/null
+++ b/js/emma-unified-intelligence.js
@@ -0,0 +1,423 @@
+/**
+ * 🧠 EmmaUnifiedIntelligence: Refactored for Modularity and Enhanced Capabilities
+ * This class serves as the central intelligence hub for Emma, handling intent analysis,
+ * response generation, and action dispatching. It's designed to be extensible and
+ * dementia-friendly, prioritizing validation, context-awareness, and gentle guidance.
+ */
+class EmmaUnifiedIntelligence {
+    constructor(options = {}) {
+        this.options = {
+            dementiaMode: true,
+            validationTherapy: true,
+            ...options
+        };
+        this.conversationHistory = [];
+        this.currentContext = {
+            lastQueriedPerson: null,
+            activeMemoryDiscussion: null,
+            userEmotionalState: 'neutral',
+            lastIntent: null,
+            waitingForResponse: null,
+        };
+
+        // Add conversationContext alias for compatibility with emma-chat-experience.js
+        this.conversationContext = {
+            recentPeople: new Set(),
+            conversationFlow: [],
+            currentTopic: null,
+            lastUserIntent: null,
+            lastQueriedPerson: null,
+        };
+
+        // Centralized intent definitions for easy extension
+        this.intentStrategies = {
+            'vault_query': this.handleVaultQuery.bind(this),
+            'photo_request': this.handlePhotoRequest.bind(this),
+            'memory_sharing': this.handleMemorySharing.bind(this),
+            'add_memory_detail': this.handleAddMemoryDetail.bind(this),
+            'confusion': this.handleConfusion.bind(this),
+            'conversation': this.handleConversation.bind(this),
+        };
+    }
+
+    /**
+     * 🎯 Primary Entry Point: Analyzes a user's message and returns an intelligent response.
+     */
+    async analyzeAndRespond(userMessage, chatInstance) {
+        try {
+            console.log('🧠 UNIFIED: Processing message ->', userMessage);
+            this.addToHistory(userMessage, 'user');
+
+            // Check for contextual actions first
+            if (this.currentContext.waitingForResponse) {
+                const contextualResponse = await this.handleContextualResponse(userMessage, chatInstance);
+                if (contextualResponse) {
+                    this.addToHistory(contextualResponse.text, 'emma');
+                    return contextualResponse;
+                }
+            }
+
+            const vaultContext = this.getVaultContext();
+            const analysis = await this.analyzeIntent(userMessage, vaultContext);
+
+            console.log('🧠 UNIFIED: Intent analysis ->', analysis);
+            this.updateContext(analysis);
+
+            const response = await this.generateResponse(analysis, chatInstance);
+            this.addToHistory(response.text, 'emma');
+
+            return response;
+        } catch (error) {
+            console.error('🚨 UNIFIED: Critical error in analyzeAndRespond ->', error);
+            return this.generateFallbackResponse();
+        }
+    }
+
+    /**
+     * 🧐 Analyzes the user's intent using an LLM if available, otherwise falls back to robust heuristics.
+     */
+    async analyzeIntent(userMessage, vaultContext) {
+        const conversationContext = this.getConversationContext();
+        if (this.options.apiKey) {
+            try {
+                return await this.llmAnalyzeIntent(userMessage, vaultContext, conversationContext);
+            } catch (error) {
+                console.warn('🧠 LLM analysis failed, falling back to heuristics.', error);
+            }
+        }
+        return this.heuristicAnalyzeIntent(userMessage, vaultContext);
+    }
+
+    /**
+     * 🤖 Performs intent analysis using an LLM for nuanced understanding.
+     */
+    async llmAnalyzeIntent(userMessage, vaultContext, conversationContext) {
+        const prompt = this.buildLlmPrompt(userMessage, vaultContext, conversationContext);
+        const llmResponse = await this.callLLM(prompt);
+        try {
+            return JSON.parse(llmResponse);
+        } catch (error) {
+            console.error('🚨 LLM response parsing failed:', error, 'Response:', llmResponse);
+            // If parsing fails, ask the LLM to fix its own mistake
+            const fixupPrompt = `The following JSON is invalid. Please fix it and return only the valid JSON object.\n\n${llmResponse}`;
+            const fixedResponse = await this.callLLM(fixupPrompt);
+            return JSON.parse(fixedResponse);
+        }
+    }
+
+    /**
+     * 💡 Performs intent analysis using dementia-friendly heuristics as a fallback.
+     */
+    heuristicAnalyzeIntent(userMessage, vaultContext) {
+        const lower = userMessage.toLowerCase().trim();
+
+        if (this.isAddMemoryDetail(lower)) {
+            return {
+                intent: 'add_memory_detail',
+                confidence: 0.9,
+                targetMemoryId: this.currentContext.activeMemoryDiscussion?.id
+            };
+        }
+
+        // Rule-based intent detection...
+        if (this.isVaultQuery(lower, vaultContext)) {
+            const targetPerson = vaultContext.peopleNames.find(name => lower.includes(name.toLowerCase()));
+            return {
+                intent: 'vault_query',
+                confidence: 0.9,
+                targetPerson,
+                recommendedActions: ['show_person', 'display_memories']
+            };
+        }
+
+        if (this.isPhotoRequest(lower)) {
+            return {
+                intent: 'photo_request',
+                confidence: 0.85,
+                targetPerson: this.currentContext.lastQueriedPerson,
+                recommendedActions: ['trigger_photo_upload']
+            };
+        }
+
+        if (this.isMemorySharing(lower)) {
+            return {
+                intent: 'memory_sharing',
+                confidence: 0.8,
+                targetPerson: this.currentContext.lastQueriedPerson,
+                memoryContent: userMessage,
+                suggestedResponse: this.generateMemoryValidation(userMessage)
+            };
+        }
+
+        return {
+            intent: 'conversation',
+            confidence: 0.5,
+            suggestedResponse: "I'm here to listen. What would you like to share?"
+        };
+    }
+
+    /**
+     * 🎭 Generates a response based on the analyzed intent.
+     */
+    async generateResponse(analysis, chatInstance) {
+        const handler = this.intentStrategies[analysis.intent] || this.handleConversation;
+        return await handler(analysis, chatInstance);
+    }
+
+    // --- Intent Handlers ---
+
+    async handleVaultQuery(analysis, chatInstance) {
+        const person = await chatInstance.findPersonInVault(analysis.targetPerson);
+        if (!person) {
+            if (this.options.dementiaMode) {
+                return {
+                    text: `I'm listening. Tell me about ${analysis.targetPerson}. Every story is important.`,
+                    actions: []
+                };
+            }
+            return {
+                text: `I don't believe we've talked about ${analysis.targetPerson} before. Would you like to tell me about them?`,
+                actions: []
+            };
+        }
+        const memories = await chatInstance.getPersonMemories(person);
+        const memoryText = memories.length > 0 ?
+            `I have ${memories.length} lovely ${memories.length === 1 ? 'memory' : 'memories'} of them.` :
+            "I'm ready to learn more about them.";
+
+        return {
+            text: `Ah, ${person.name}! They are your ${person.relation || 'loved one'}. ${memoryText} Shall I bring up what you've shared about them?`,
+            actions: ['show_person', 'display_memories'],
+            analysis
+        };
+    }
+
+    async handlePhotoRequest(analysis) {
+        const personText = analysis.targetPerson ? `with ${analysis.targetPerson}` : '';
+        return {
+            text: `Of course. I can help you save photos ${personText}. Please select the photos you'd like to add.`,
+            actions: ['trigger_photo_upload'],
+            analysis
+        };
+    }
+
+    handleMemorySharing(analysis) {
+        return {
+            text: analysis.suggestedResponse || this.generateMemoryValidation(analysis.memoryContent),
+            actions: ['offer_memory_save'],
+            analysis
+        };
+    }
+
+    handleConfusion() {
+        if (this.options.dementiaMode) {
+            const person = this.currentContext.lastQueriedPerson;
+            const topic = person ? `about ${person}` : "about your memories";
+            return {
+                text: `It's alright, sometimes thoughts can get tangled. We were just talking ${topic}. We can continue with that, or we can talk about something new. Whatever feels right to you.`,
+                actions: []
+            };
+        }
+        const person = this.currentContext.lastQueriedPerson;
+        const text = person ?
+            `I'm sorry if I was unclear. We were just talking about ${person}. Would you like to continue?` :
+            "I'm always here to help with your memories. What's on your mind?";
+        return { text, actions: [] };
+    }
+
+    handleConversation(analysis) {
+        return {
+            text: analysis.suggestedResponse || "That's interesting. Tell me more.",
+            actions: []
+        };
+    }
+
+    async handleAddMemoryDetail(analysis, chatInstance) {
+        const memory = await chatInstance.findMemoryById(analysis.targetMemoryId);
+        if (!memory) {
+            return { text: "I'm sorry, I couldn't find that memory to add details to.", actions: [] };
+        }
+
+        this.currentContext.activeMemoryDiscussion = memory;
+        this.currentContext.waitingForResponse = 'add_detail_text';
+
+        return { text: "I'd be happy to add more to that memory. What would you like to add?", actions: [] };
+    }
+
+    async handleContextualResponse(userMessage, chatInstance) {
+        const { waitingForResponse, activeMemoryDiscussion } = this.currentContext;
+
+        if (waitingForResponse === 'add_detail_text' && activeMemoryDiscussion) {
+            const updatedContent = `${activeMemoryDiscussion.content}\n\n**Update:** ${userMessage}`;
+            const updatedMemory = { ...activeMemoryDiscussion, content: updatedContent };
+
+            await window.memoryOrchestrator.updateMemory(updatedMemory);
+
+            this.currentContext.waitingForResponse = null;
+            this.currentContext.activeMemoryDiscussion = null;
+
+            return { text: "I've added that to your memory. Is there anything else?", actions: [] };
+        }
+
+        // If the context doesn't match, reset and let the normal flow handle it
+        this.currentContext.waitingForResponse = null;
+        return null;
+    }
+
+    // --- Helper Methods ---
+
+    updateContext(analysis) {
+        this.currentContext.lastIntent = analysis.intent;
+        if (analysis.targetPerson) {
+            this.currentContext.lastQueriedPerson = analysis.targetPerson;
+        }
+        if (analysis.emotionalTone) {
+            this.currentContext.userEmotionalState = analysis.emotionalTone;
+        }
+    }
+
+    addToHistory(message, sender) {
+        this.conversationHistory.push({ message, sender, timestamp: Date.now() });
+        if (this.conversationHistory.length > 10) {
+            this.conversationHistory.shift();
+        }
+    }
+
+    getConversationContext() {
+        return this.conversationHistory.slice(-5).map(h => `${h.sender}: ${h.message}`).join('\n');
+    }
+
+    getVaultContext() {
+        const vault = this.options.vaultAccess ? this.options.vaultAccess() : null;
+        if (!vault) return { memoryCount: 0, peopleCount: 0, peopleNames: [], recentTopics: [] };
+
+        const people = Object.values(vault.people || {});
+        return {
+            memoryCount: Object.keys(vault.memories || {}).length,
+            peopleCount: people.length,
+            peopleNames: people.map(p => p.name).filter(Boolean),
+            recentTopics: [] // Placeholder for future implementation
+        };
+    }
+
+    generateFallbackResponse() {
+        return {
+            text: "I'm having a little trouble thinking right now, but I'm still here to listen.",
+            actions: []
+        };
+    }
+
+    // --- Heuristic Logic ---
+
+    isVaultQuery(lower, vaultContext) {
+        return (lower.includes('who') || lower.includes('tell me about') || lower.includes('show me')) &&
+               vaultContext.peopleNames.some(name => lower.includes(name.toLowerCase()));
+    }
+
+    isAddMemoryDetail(lower) {
+        return (lower.startsWith("add to that") || lower.startsWith("add more to that")) && this.currentContext.activeMemoryDiscussion;
+    }
+
+    isPhotoRequest(lower) {
+        const hasPhotoWord = lower.includes('picture') || lower.includes('photo');
+        const hasActionWord = lower.includes('add') || lower.includes('save') || lower.includes('upload');
+        const isConfirmation = lower === 'yes' || lower === 'yeah';
+
+        return hasPhotoWord && hasActionWord || (isConfirmation && this.isPhotoContext());
+    }
+
+    isPhotoContext() {
+        const lastEmmaMsg = this.conversationHistory.filter(h => h.sender === 'emma').pop()?.message || '';
+        return lastEmmaMsg.toLowerCase().includes('photo');
+    }
+
+    isMemorySharing(lower) {
+        const memoryIndicators = ['remember', 'mowing', 'cooking', 'always', 'usually', 'fell', 'went', 'saw', 'felt'];
+        return this.currentContext.lastQueriedPerson && (memoryIndicators.some(word => lower.includes(word)) || lower.length < 25);
+    }
+
+    generateMemoryValidation(message) {
+        const person = this.currentContext.lastQueriedPerson;
+        const personText = person ? ` with ${person}` : '';
+
+        // Validation therapy focuses on acknowledging the emotion and reality of the memory.
+        const validations = [
+            `That sounds like a very important memory${personText}. Thank you for sharing it with me.`,
+            `I can feel how significant that moment${personText} is. I'm here to listen to more if you'd like to share.`,
+            `That's a powerful memory. It's safe with me.`,
+            `It sounds like that moment${personText} really stayed with you.`,
+        ];
+
+        // If dementiaMode is on, we select a gentle, validating response.
+        if (this.options.dementiaMode) {
+            return validations[Math.floor(Math.random() * validations.length)];
+        }
+
+        // Original behavior for non-dementia mode can be more direct.
+        if (message.toLowerCase().includes('always')) {
+            return `Those recurring moments${personText} often hold the most meaning. Thank you for sharing that with me.`;
+        }
+        return `That sounds like a very significant moment${personText}. I'm honored you've shared it.`;
+    }
+
+    // --- LLM Interaction ---
+
+    buildLlmPrompt(userMessage, vaultContext, conversationContext) {
+        return `You are Emma's intelligence system. Analyze the user message in the context of the conversation and vault data.
+
+**Conversation Context:**
+${conversationContext}
+
+**User Message:** "${userMessage}"
+
+**Vault Context:**
+- Memories: ${vaultContext.memoryCount}
+- People: ${vaultContext.peopleNames.join(', ')}
+
+**Core Directives:**
+- **Dementia Care Mode:** ALWAYS use validation therapy. Affirm the user's feelings and experiences. NEVER correct or contradict. Be gentle and patient.
+- **Intent First:** Determine the primary intent from the list: [vault_query, memory_sharing, photo_request, confusion, conversation].
+- **Extract Entities:** Identify key information like 'targetPerson' or 'memoryContent'.
+- **Assess Tone:** Determine the 'emotionalTone' [positive, neutral, confused, sad].
+- **Recommend Actions:** Suggest follow-up system actions from this list: [show_person, display_memories, trigger_photo_upload, create_memory, offer_memory_save].
+- **Suggest Response:** Formulate a warm, validating, and natural response for Emma to say.
+
+**Output Format (JSON only):**
+{
+  "intent": "...",
+  "confidence": 0.0,
+  "targetPerson": "...",
+  "memoryContent": "...",
+  "emotionalTone": "...",
+  "suggestedResponse": "...",
+  "recommendedActions": ["..."]
+}`;
+    }
+
+    async callLLM(prompt) {
+        if (!this.options.apiKey) throw new Error('API key is not configured.');
+
+        const response = await fetch('https://api.openai.com/v1/chat/completions', {
+            method: 'POST',
+            headers: {
+                'Authorization': `Bearer ${this.options.apiKey}`,
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                model: 'gpt-4', // Or a newer, more suitable model
+                messages: [{ role: 'system', content: prompt }],
+                max_tokens: 350,
+                temperature: 0.5,
+                response_format: { type: "json_object" } // Improves reliability
+            })
+        });
+
+        if (!response.ok) {
+            const errorBody = await response.text();
+            throw new Error(`OpenAI API error: ${response.status} ${response.statusText} - ${errorBody}`);
+        }
+
+        const data = await response.json();
+        return data.choices[0].message.content;
+    }
+}
diff --git a/js/emma-vault-primary.js b/js/emma-vault-primary.js
index d8e7ef46..b31c9994 100644
--- a/js/emma-vault-primary.js
+++ b/js/emma-vault-primary.js
@@ -7,7 +7,7 @@
  * - Extension becomes pure crypto service
  * - Zero data loss on service worker restart
  * 
- * FOR DEBBE: Every memory preserved with absolute reliability ❤️
+ * FOR DEBBE: Every memory preserved with absolute reliability.
  */
 
 class EmmaVaultPrimary {
@@ -16,19 +16,29 @@ class EmmaVaultPrimary {
     this.isOpen = false;
     this.passphrase = null;
     this.fileHandle = null; // Direct File System Access API
-    this.autoSaveEnabled = true;
+    try {
+      const stored = localStorage.getItem('emmaVaultAutoSaveEnabled');
+      this.autoSaveEnabled = stored === 'false' ? false : true;
+    } catch (error) {
+      console.warn('[EmmaVaultPrimary] Unable to read auto-save preference:', error);
+      this.autoSaveEnabled = true;
+    }
     this.saveDebounceTimer = null;
     
     // Feature flag for gradual migration
     this.useWebAppPrimary = localStorage.getItem('USE_WEBAPP_PRIMARY') === 'true';
     
-    console.log('🚀 EmmaVaultPrimary initialized - Web App Primary Architecture');
-    console.log('🔧 Feature flag USE_WEBAPP_PRIMARY:', this.useWebAppPrimary);
+    console.log('[VaultPrimary] EmmaVaultPrimary initialized - Web App Primary Architecture');
+    console.log('[VaultPrimary] Feature flag USE_WEBAPP_PRIMARY:', this.useWebAppPrimary);
     
     // Auto-restore vault state on construction
     this.restoreVaultState();
   }
 
+  setAutoSaveEnabled(enabled) {
+    this.autoSaveEnabled = !!enabled;
+  }
+
   /**
    * PHASE 2.1: Enhanced vault state restoration
    * Primary data source: IndexedDB (not extension)
@@ -786,3 +796,4 @@ if (localStorage.getItem('USE_WEBAPP_PRIMARY') === 'true') {
 
 // Global access for debugging
 window.EmmaVaultPrimary = EmmaVaultPrimary;
+
diff --git a/js/emma-voice-official.js b/js/emma-voice-official.js
index 207a208f..8f6fbcd0 100644
--- a/js/emma-voice-official.js
+++ b/js/emma-voice-official.js
@@ -246,11 +246,11 @@ You are built with infinite love for Debbe and families everywhere. 💜`,
       }
 
       // Get ephemeral token from consolidated backend
-      const backendUrl = window.location.hostname === 'localhost' 
-        ? 'http://localhost:3001' 
-        : window.location.origin; // Use same origin (emma-voice-backend.onrender.com)
+      const backendOrigin = (typeof window.getEmmaBackendOrigin === 'function')
+        ? window.getEmmaBackendOrigin()
+        : (window.location && window.location.origin ? window.location.origin : 'https://emma-lite-optimized.onrender.com');
         
-      const tokenResponse = await fetch(`${backendUrl}/token`);
+      const tokenResponse = await fetch(`${backendOrigin}/token`);
       const tokenData = await tokenResponse.json();
 
       console.log('🔑 Got ephemeral token for Emma');
diff --git a/js/emma-voice-transcription.js b/js/emma-voice-transcription.js
index 5360ad4b..428f6d67 100644
--- a/js/emma-voice-transcription.js
+++ b/js/emma-voice-transcription.js
@@ -166,7 +166,7 @@ class EmmaVoiceTranscription {
     this.overlay.innerHTML = `
       <!-- Emma Voice Transcription - Mobile-First Design -->
       <div class="emma-voice-container" style="
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #deb3e4 100%);
         border: none;
         border-radius: ${window.innerWidth <= 768 ? '20px' : '28px'};
         padding: ${window.innerWidth <= 768 ? '32px 24px' : '48px 40px'};
@@ -174,7 +174,7 @@ class EmmaVoiceTranscription {
         width: ${window.innerWidth <= 768 ? '95%' : '90%'};
         text-align: center;
         backdrop-filter: blur(30px);
-        box-shadow: 0 32px 120px rgba(139, 92, 246, 0.6);
+        box-shadow: 0 32px 120px rgba(111, 99, 217, 0.6);
         position: relative;
         min-height: ${window.innerWidth <= 768 ? '70vh' : 'auto'};
         display: flex;
@@ -297,7 +297,7 @@ class EmmaVoiceTranscription {
           flex-wrap: wrap;
         ">
           <button class="emma-voice-btn emma-stop-btn" id="stop-recording-btn" style="
-            background: linear-gradient(135deg, #8B5CF6, #F093FB);
+            background: linear-gradient(135deg, #6F63D9, #DEB3E4);
             border: 2px solid rgba(255, 255, 255, 0.3);
             color: white;
             padding: ${window.innerWidth <= 768 ? '16px 24px' : '14px 20px'};
@@ -753,7 +753,7 @@ class EmmaVoiceTranscription {
         justify-content: center;
       ">
         <button id="send-transcription-btn" style="
-          background: linear-gradient(135deg, #8B5CF6, #F093FB);
+          background: linear-gradient(135deg, #6F63D9, #DEB3E4);
           border: none;
           color: white;
           padding: 14px 28px;
diff --git a/js/emma-web-vault.js b/js/emma-web-vault.js
index 399c47e6..bf8eda88 100644
--- a/js/emma-web-vault.js
+++ b/js/emma-web-vault.js
@@ -1,9 +1,9 @@
-/**
+/**
  * Emma Web Vault System
  * Browser-compatible .emma file system with Web Crypto API
  * Preserves ALL desktop functionality while working in any browser
  *
- * 💜 Built with love for preserving precious memories
+ *  Built with love for preserving precious memories
  */
 
 class EmmaWebVault {
@@ -12,9 +12,62 @@ class EmmaWebVault {
     this.vaultData = null;
     this.autoSaveTimer = null;
     this.passphrase = null;
-    this.fileHandle = null; // For File System Access API
+    this._fileHandle = null; // Underlying File System Access API handle
+    this._suspendHandlePersistence = false;
+    this.fileHandlePersistenceDisabled = false;
+    Object.defineProperty(this, 'fileHandle', {
+      configurable: true,
+      enumerable: true,
+      get: () => this._fileHandle,
+      set: (handle) => {
+        const normalizedHandle = handle || null;
+        const previousHandle = this._fileHandle;
+
+        if (previousHandle === normalizedHandle) {
+          this._fileHandle = normalizedHandle;
+          return;
+        }
+
+        this._fileHandle = normalizedHandle;
+
+        if (this._suspendHandlePersistence || this.fileHandlePersistenceDisabled) {
+          return;
+        }
+
+        if (normalizedHandle) {
+          this.persistFileHandle(normalizedHandle).catch(error => {
+            console.warn(' FILE-HANDLE: Failed to persist handle:', error);
+          });
+        } else if (previousHandle) {
+          this.clearPersistedFileHandle().catch(error => {
+            console.warn(' FILE-HANDLE: Failed to clear persisted handle:', error);
+          });
+        }
+      }
+    });
     this.pendingChanges = false;
     this.saveDebounceTimer = null;
+    this.isFileSelectionInProgress = false;
+    this.needsFileReauth = false;
+    this.originalFileName = null;
+    const storedAutoSave = (() => {
+      try {
+        return localStorage.getItem('emmaVaultAutoSaveEnabled');
+      } catch (error) {
+        console.warn('[EmmaWebVault] Failed to read auto-save preference:', error);
+        return null;
+      }
+    })();
+    if (storedAutoSave === null) {
+      try {
+        localStorage.setItem('emmaVaultAutoSaveEnabled', 'true');
+      } catch (error) {
+        console.warn('[EmmaWebVault] Failed to prime auto-save preference:', error);
+      }
+      this.autoSaveEnabled = true;
+    } else {
+      this.autoSaveEnabled = storedAutoSave !== 'false';
+    }
 
     // WEBAPP-FIRST ARCHITECTURE: Webapp is single source of truth
     this.extensionAvailable = false; // Extension defers to webapp
@@ -37,30 +90,33 @@ class EmmaWebVault {
           const vaultData = await this.loadFromIndexedDB();
           if (vaultData) {
             this.vaultData = vaultData;
+            this.ensureVaultMetadataName(vaultName);
 
             // SECURITY: Passphrase no longer stored in sessionStorage for security
             // User will be prompted for passphrase when needed
-            console.log('🔒 CONSTRUCTOR: Vault restored from IndexedDB - passphrase required for operations');
+            console.log(' CONSTRUCTOR: Vault restored from IndexedDB - passphrase required for operations');
 
-            console.log('✅ CONSTRUCTOR: Vault data restored from IndexedDB with',
+            console.log(' CONSTRUCTOR: Vault data restored from IndexedDB with',
               Object.keys(vaultData.content?.memories || {}).length, 'memories');
           } else {
-            console.warn('⚠️ CONSTRUCTOR: No vault data in IndexedDB - creating minimal structure');
+            console.warn(' CONSTRUCTOR: No vault data in IndexedDB - creating minimal structure');
             // Fallback to minimal structure
             this.vaultData = {
               content: { memories: {}, people: {}, media: {} },
               stats: { memoryCount: 0, peopleCount: 0, mediaCount: 0 },
               metadata: { name: vaultName }
             };
+            this.ensureVaultMetadataName(vaultName);
           }
         } catch (error) {
-          console.error('❌ CONSTRUCTOR: Failed to restore vault data:', error);
+          console.error(' CONSTRUCTOR: Failed to restore vault data:', error);
           // Fallback to minimal structure
           this.vaultData = {
             content: { memories: {}, people: {}, media: {} },
             stats: { memoryCount: 0, peopleCount: 0, mediaCount: 0 },
             metadata: { name: vaultName }
           };
+          this.ensureVaultMetadataName(vaultName);
         }
       }, 100); // Small delay to ensure IndexedDB is ready
 
@@ -74,6 +130,154 @@ class EmmaWebVault {
 
   }
 
+  cacheSessionPassphrase(passphrase) {
+    if (typeof passphrase !== 'string') return;
+    const hasValue = passphrase.length > 0 && passphrase.trim().length > 0;
+    if (!hasValue) return;
+    this.passphrase = passphrase;
+    try {
+      sessionStorage.setItem('emmaVaultPassphrase', passphrase);
+    } catch (error) {
+      console.warn(' PASSCODE CACHE: Failed to persist passphrase in sessionStorage:', error);
+    }
+  }
+
+  ensureVaultMetadataName(preferredName) {
+    if (!this.vaultData) {
+      return preferredName || null;
+    }
+
+    this.vaultData.metadata = this.vaultData.metadata || {};
+    const placeholderNames = new Set([
+      'Recovered Vault',
+      'Recoved Vault',
+      'Web Vault',
+      'Unknown Vault',
+      'Emma Vault'
+    ]);
+    const existing = typeof this.vaultData.metadata.name === 'string'
+      ? this.vaultData.metadata.name.trim()
+      : '';
+    if (existing && !placeholderNames.has(existing)) {
+      this.vaultData.metadata.name = existing;
+      return existing;
+    }
+
+    const safePreferred = typeof preferredName === 'string' ? preferredName.trim() : '';
+    let storedName = '';
+    try {
+      const sessionName = typeof sessionStorage !== 'undefined'
+        ? sessionStorage.getItem('emmaVaultName')
+        : null;
+      const localName = typeof localStorage !== 'undefined'
+        ? localStorage.getItem('emmaVaultName')
+        : null;
+      storedName = (sessionName || localName || '').trim();
+    } catch (_) {
+      storedName = '';
+    }
+
+    const fallbackSources = [
+      safePreferred,
+      this.vaultData.name,
+      this.originalFileName,
+      storedName
+    ];
+
+    let normalized = '';
+    for (const candidate of fallbackSources) {
+      const trimmed = typeof candidate === 'string' ? candidate.trim() : '';
+      if (trimmed && !placeholderNames.has(trimmed)) {
+        normalized = trimmed;
+        break;
+      }
+    }
+
+    if (!normalized) {
+      normalized = existing || 'Emma Vault';
+    }
+
+    this.vaultData.metadata.name = normalized;
+    return normalized;
+  }
+
+  getPassphrasePromptCopy(context = 'operation') {
+    const copy = {
+      title: 'Vault Passphrase Required',
+      message: 'Please re-enter your vault passphrase to continue. Emma never stores passphrases permanently.',
+      placeholder: 'Enter passphrase...',
+      promptText: 'Enter your vault passphrase to continue:'
+    };
+
+    switch (context) {
+      case 'file-save':
+        copy.title = 'Save Changes to .emma File';
+        copy.message = 'To keep your .emma file secure, re-enter your vault passphrase before saving.';
+        break;
+      case 'encrypt-data':
+        copy.title = 'Secure Memory Save';
+        copy.message = 'Emma needs your passphrase to encrypt this memory in your .emma vault.';
+        break;
+      case 'download':
+        copy.title = 'Download Updated Vault';
+        copy.message = 'Enter the passphrase that should protect the downloaded .emma file.';
+        break;
+      default:
+        break;
+    }
+
+    return copy;
+  }
+
+  async ensureActivePassphrase(context = 'operation') {
+    const hasPassphrase = typeof this.passphrase === 'string' && this.passphrase.length > 0;
+    if (hasPassphrase) {
+      return this.passphrase;
+    }
+
+    let restored = null;
+    try {
+      restored = sessionStorage.getItem('emmaVaultPassphrase');
+    } catch (error) {
+      console.warn(' PASSCODE CACHE: Unable to read sessionStorage:', error);
+    }
+    if (typeof restored === 'string' && restored.length > 0) {
+      this.passphrase = restored;
+      return this.passphrase;
+    }
+
+    if (typeof window === 'undefined') {
+      throw new Error('Passphrase required to continue');
+    }
+
+    const copy = this.getPassphrasePromptCopy(context);
+    let passphrase = null;
+
+    try {
+      if (window.cleanSecurePasswordModal && typeof window.cleanSecurePasswordModal.show === 'function') {
+        passphrase = await window.cleanSecurePasswordModal.show({
+          title: copy.title,
+          message: copy.message,
+          placeholder: copy.placeholder
+        });
+      } else if (typeof window.showPasswordModal === 'function') {
+        passphrase = await window.showPasswordModal(copy.message, copy.placeholder || 'Passphrase:');
+      } else {
+        passphrase = window.prompt(copy.promptText || copy.message);
+      }
+    } catch (promptError) {
+      console.error(' PASSCODE PROMPT: Failed to collect passphrase:', promptError);
+      passphrase = null;
+    }
+
+    if (typeof passphrase !== 'string' || passphrase.trim().length === 0) {
+      throw new Error('Passphrase required to continue.');
+    }
+
+    this.cacheSessionPassphrase(passphrase);
+    return this.passphrase;
+  }
+
   /**
    * Create new .emma vault file
    * Same API as desktop version!
@@ -91,7 +295,7 @@ class EmmaWebVault {
         throw new Error(`Missing required parameters: name=${name}, passphrase=${passphrase ? 'provided' : 'missing'}`);
       }
 
-      this.passphrase = passphrase;
+      this.cacheSessionPassphrase(passphrase);
 
       // Create vault structure (IDENTICAL to desktop version)
       this.vaultData = {
@@ -121,14 +325,16 @@ class EmmaWebVault {
 
       this.isOpen = true;
 
+      const normalizedName = this.ensureVaultMetadataName(name);
+
       // Set session storage for dashboard
       sessionStorage.setItem('emmaVaultActive', 'true');
-      sessionStorage.setItem('emmaVaultName', name);
-      // SECURITY: Never store passphrase in web storage - keep in memory only
+      sessionStorage.setItem('emmaVaultName', normalizedName);
+      // SECURITY: Passphrase cached in sessionStorage for this tab only (cleared on lock)
 
       // CRITICAL FIX: Remove automatic session expiry - vault stays unlocked until user locks it
       localStorage.removeItem('emmaVaultSessionExpiry'); // Remove any existing expiry
-      console.log('✅ Session storage set - new vault active AND unlocked (no expiry - user controlled)!');
+      console.log(' Session storage set - new vault active AND unlocked (no expiry - user controlled)!');
 
       // Save to IndexedDB for persistence
       await this.saveToIndexedDB();      const originalAutoDownload = this.vaultData.settings?.autoDownload;
@@ -143,7 +349,7 @@ class EmmaWebVault {
       return { success: true, name: name };
 
     } catch (error) {
-      console.error('❌ Failed to create vault:', error);
+      console.error(' Failed to create vault:', error);
       throw error;
     }
   }
@@ -154,14 +360,18 @@ class EmmaWebVault {
    */
   async openVaultFile(file) {
     try {
+      if (this.isFileSelectionInProgress) {
+        console.warn(' VAULT: File selection already in progress - ignoring duplicate request');
+        return { success: false, reason: 'file_selection_in_progress' };
+      }
+
+      this.isFileSelectionInProgress = true;
 
       let fileToProcess = file;
 
       // Store the original filename for better UX
       if (file) {
-        this.originalFileName = file.name;
-        // Persist for restoration across pages
-        try { sessionStorage.setItem('emmaVaultOriginalFileName', file.name); } catch (_) {}
+        this.updateOriginalFileName(file.name);
 
         // CRITICAL: If file is provided but no fileHandle, we need write access
         if (!this.fileHandle && 'showOpenFilePicker' in window) {
@@ -186,60 +396,99 @@ class EmmaWebVault {
         }
       }
 
-      // PURE WEB APP: Use native File System Access API (no extension needed)
-      if (!file && 'showOpenFilePicker' in window) {
+    // PURE WEB APP: Use native File System Access API (no extension needed)
+    if (!file && 'showOpenFilePicker' in window) {
 
-        const [fileHandle] = await window.showOpenFilePicker({
-          types: [{
-            description: 'Emma Vault Files',
-            accept: { 'application/emma-vault': ['.emma'] }
-          }],
-          excludeAcceptAllOption: true,
-          multiple: false
-        });
+      const [fileHandle] = await window.showOpenFilePicker({
+        types: [{
+          description: 'Emma Vault Files',
+          accept: { 'application/emma-vault': ['.emma'] }
+        }],
+        excludeAcceptAllOption: true,
+        multiple: false
+      });
 
-        this.fileHandle = fileHandle;
-        fileToProcess = await fileHandle.getFile();
+      const openedFile = await fileHandle.getFile();
+      this.updateOriginalFileName(openedFile.name);
+      this.fileHandle = fileHandle;
+      fileToProcess = openedFile;
 
-      }
+    }
 
       if (!fileToProcess) {
         throw new Error('No file selected');
       }
 
-      // Get passphrase securely with CLEAN modal
-      const passphrase = await window.cleanSecurePasswordModal.show({
-        title: 'Unlock Vault',
-        message: `Enter the passphrase for your vault: ${fileToProcess.name}`,
-        placeholder: 'Enter vault passphrase...'
-      });
+      // Get passphrase securely with CLEAN modal or fallback
+      let passphrase = null;
+      try {
+        if (window.cleanSecurePasswordModal && typeof window.cleanSecurePasswordModal.show === 'function') {
+          passphrase = await window.cleanSecurePasswordModal.show({
+            title: 'Unlock Vault',
+            message: `Enter the passphrase for your vault: ${fileToProcess.name}`,
+            placeholder: 'Enter vault passphrase...'
+          });
+        } else if (typeof window.showPasswordModal === 'function') {
+          passphrase = await window.showPasswordModal(`Enter the passphrase for ${fileToProcess.name}`, 'Passphrase:');
+        } else {
+          passphrase = window.prompt(`Enter the passphrase for ${fileToProcess.name}`);
+        }
+      } catch (modalError) {
+        console.error(' PASSCODE MODAL: Failed to collect passphrase:', modalError);
+        passphrase = null;
+      }
 
-      this.passphrase = passphrase;
+      if (!passphrase) {
+        console.warn(' VAULT: Passphrase entry cancelled - aborting open flow');
+        return { success: false, reason: 'passphrase_cancelled' };
+      }
+
+      this.cacheSessionPassphrase(passphrase);
 
       // Decrypt and load vault
-      // Decrypt vault data using NATIVE crypto (no extension needed)
-      const vaultData = await this.nativeDecryptVault(fileData, passphrase);
+      const fileBuffer = await fileToProcess.arrayBuffer();
+      const vaultData = await this.nativeDecryptVault(fileBuffer, passphrase);
 
       this.vaultData = vaultData;
       this.isOpen = true;
+      const normalizedName = this.ensureVaultMetadataName(
+        vaultData.metadata?.name ||
+        vaultData.name ||
+        fileToProcess?.name ||
+        this.originalFileName ||
+        'Web Vault'
+      );
 
       // Set session storage for dashboard
       sessionStorage.setItem('emmaVaultActive', 'true');
-      sessionStorage.setItem('emmaVaultName', vaultData.metadata?.name || 'Web Vault');
-      // SECURITY: Never store passphrase in web storage - keep in memory only
+      sessionStorage.setItem('emmaVaultName', normalizedName);
+      try {
+        localStorage.setItem('emmaVaultName', normalizedName);
+      } catch (_) {}
+      // SECURITY: Passphrase cached in sessionStorage for this tab only (cleared on lock)
 
       // CRITICAL FIX: Remove automatic session expiry - vault stays unlocked until user locks it
       localStorage.removeItem('emmaVaultSessionExpiry'); // Remove any existing expiry
-      console.log('✅ Session storage set - vault active AND unlocked (no expiry - user controlled)!');
+      console.log(' Session storage set - vault active AND unlocked (no expiry - user controlled)!');
 
       // Save to IndexedDB as backup AFTER loading from file
       await this.saveToIndexedDB();
 
+      if (!this.fileHandle && typeof this.ensureDirectFileHandle === 'function') {
+        try {
+          await this.ensureDirectFileHandle('initial-open', { promptOnFailure: true });
+        } catch (handleError) {
+          console.warn(' FILE-ACCESS: Unable to capture direct file access after open:', handleError);
+        }
+      }
+
       return { success: true, stats: this.getStats() };
 
     } catch (error) {
-      console.error('❌ Failed to open vault:', error);
+      console.error(' Failed to open vault:', error);
       throw error;
+    } finally {
+      this.isFileSelectionInProgress = false;
     }
   }
 
@@ -249,7 +498,7 @@ class EmmaWebVault {
   async addMemory({ content, metadata = {}, attachments = [] }) {
 
     // WEBAPP-FIRST: All memory operations go through webapp vault
-    console.log('🚀 WEBAPP-FIRST: Adding memory to webapp vault:', {
+    console.log(' WEBAPP-FIRST: Adding memory to webapp vault:', {
       isOpen: this.isOpen,
       hasPassphrase: !!this.passphrase,
       sessionActive: sessionStorage.getItem('emmaVaultActive'),
@@ -271,12 +520,12 @@ class EmmaWebVault {
       if (!this.passphrase) {
         // FIRST: Try to restore passphrase from session storage
         // SECURITY: Passphrase no longer stored in sessionStorage for security
-        console.log('🔐 EMERGENCY FIX: Checking passphrase for memory save');
+        console.log(' EMERGENCY FIX: Checking passphrase for memory save');
 
         if (this.passphrase) {
-          console.log('✅ EMERGENCY FIX: Passphrase available in memory');
+          console.log(' EMERGENCY FIX: Passphrase available in memory');
         } else {
-          console.error('🔐 CRITICAL: No passphrase available - emergency re-authentication required');
+          console.error(' CRITICAL: No passphrase available - emergency re-authentication required');
 
           // Emergency prompt - ALWAYS show for missing passphrase
           if (window.cleanSecurePasswordModal) {
@@ -289,11 +538,13 @@ class EmmaWebVault {
 
               // Restore sessionStorage after emergency unlock
               if (this.passphrase) {
-                // SECURITY: Never store passphrase in web storage
-                console.log('✅ EMERGENCY FIX: Passphrase restored and cached');
+                // SECURITY: Passphrase cached in sessionStorage for this tab only
+                console.log(' EMERGENCY FIX: Passphrase restored and cached');
+                this.cacheSessionPassphrase(this.passphrase);
+                await this.ensureDirectFileHandle('passphrase-reauth', { promptOnFailure: false });
               }
             } catch (error) {
-              console.error('🔐 Secure modal failed:', error);
+              console.error(' Secure modal failed:', error);
               throw new Error('Vault access required to save memories. Please unlock your vault first.');
             }
           } else {
@@ -333,7 +584,7 @@ class EmmaWebVault {
 
       for (const attachment of attachments) {
 
-        console.log('🔥 ATTACHMENT DEBUG: Processing attachment:', {
+        console.log(' ATTACHMENT DEBUG: Processing attachment:', {
           name: attachment.name,
           type: attachment.type,
           hasData: !!attachment.data,
@@ -345,7 +596,7 @@ class EmmaWebVault {
 
         const attachmentData = attachment.data || attachment.dataUrl;
         if (!attachmentData) {
-          console.error('❌ ATTACHMENT MISSING DATA:', attachment);
+          console.error(' ATTACHMENT MISSING DATA:', attachment);
           throw new Error('Attachment missing data - file may not have been uploaded properly');
         }
 
@@ -390,12 +641,12 @@ class EmmaWebVault {
         delete this.vaultData.content.memories[memoryId];
         this.vaultData.stats.memoryCount--;
 
-        console.error('❌ Memory save failed - rolled back:', saveError);
+        console.error(' Memory save failed - rolled back:', saveError);
         throw new Error(`Failed to save memory: ${saveError.message}`);
       }
 
     } catch (error) {
-      console.error('❌ Failed to add memory:', error);
+      console.error(' Failed to add memory:', error);
       throw error;
     }
   }
@@ -404,7 +655,7 @@ class EmmaWebVault {
    * Update memory (CRITICAL: Missing method causing data loss!)
    */
   async updateMemory(memoryId, updates) {
-    console.log('🔄 VAULT: Updating memory:', memoryId, updates);
+    console.log(' VAULT: Updating memory:', memoryId, updates);
 
     // Extension mode: Route through extension
     if (this.extensionAvailable) {
@@ -451,15 +702,15 @@ class EmmaWebVault {
       // Always update the timestamp
       memory.updated = timestamp;
 
-      console.log('✅ VAULT: Memory updated successfully:', memoryId);
-      console.log('📊 VAULT: Updated metadata.people:', memory.metadata?.people);
+      console.log(' VAULT: Memory updated successfully:', memoryId);
+      console.log(' VAULT: Updated metadata.people:', memory.metadata?.people);
 
       // Auto-save the vault
       await this.autoSave();
 
       return { success: true, memory: memory };
     } catch (error) {
-      console.error('❌ VAULT: Failed to update memory:', error);
+      console.error(' VAULT: Failed to update memory:', error);
       throw error;
     }
   }
@@ -575,7 +826,7 @@ class EmmaWebVault {
 
               resolve({ success: true });
             } else {
-              console.error('🗑️ EXTENSION DELETE: Failed:', event.data.error);
+              console.error(' EXTENSION DELETE: Failed:', event.data.error);
               reject(new Error(event.data.error || 'Delete failed'));
             }
           }
@@ -681,7 +932,7 @@ class EmmaWebVault {
             });
           }
         } catch (avatarErr) {
-          console.warn('⚠️ Failed to process avatar, continuing without:', avatarErr);
+          console.warn(' Failed to process avatar, continuing without:', avatarErr);
         }
       }
 
@@ -698,12 +949,12 @@ class EmmaWebVault {
         delete this.vaultData.content.people[personId];
         this.vaultData.stats.peopleCount--;
 
-        console.error('❌ Person save failed - rolled back:', saveError);
+        console.error(' Person save failed - rolled back:', saveError);
         throw new Error(`Failed to save person: ${saveError.message}`);
       }
 
     } catch (error) {
-      console.error('❌ Failed to add person:', error);
+      console.error(' Failed to add person:', error);
       throw error;
     }
   }
@@ -711,7 +962,7 @@ class EmmaWebVault {
   /**
    * Update an existing person
    */
-  async updatePerson({ id, name, relation, contact, avatar }) {
+  async updatePerson({ id, name, relation, contact, avatar, avatarId, avatarUrl }) {
     if (!this.isOpen) throw new Error('No vault is open');
     if (!id) throw new Error('Missing person id');
 
@@ -724,19 +975,53 @@ class EmmaWebVault {
     if (typeof contact === 'string') existing.contact = contact;
     existing.updated = new Date().toISOString();
 
-    if (avatar) {
-      try {
-        if (typeof avatar === 'string' && this.vaultData?.content?.media && this.vaultData.content.media[avatar]) {
-          existing.avatarId = avatar;
-        } else if (typeof avatar === 'string' && avatar.startsWith('data:')) {
-          existing.avatarId = await this.addMedia({
-            type: 'image/jpeg',
-            data: avatar,
-            name: `${existing.name || 'person'}-avatar`
-          });
+    const avatarParamProvided = typeof avatar !== 'undefined';
+    const avatarIdProvided = typeof avatarId !== 'undefined';
+    const avatarUrlProvided = typeof avatarUrl !== 'undefined';
+
+    try {
+      if (avatarParamProvided) {
+        if (avatar === null) {
+          existing.avatarId = null;
+          delete existing.avatarUrl;
+        } else if (typeof avatar === 'string') {
+          const mediaStore = this.vaultData?.content?.media || {};
+          if (mediaStore[avatar]) {
+            existing.avatarId = avatar;
+          } else if (avatar.startsWith('data:')) {
+            const newAvatarId = await this.addMedia({
+              type: 'image/jpeg',
+              data: avatar,
+              name: `${existing.name || 'person'}-avatar`
+            });
+            existing.avatarId = newAvatarId;
+          } else {
+            // Fallback: attempt to store raw string data
+            const newAvatarId = await this.addMedia({
+              type: 'image/jpeg',
+              data: avatar,
+              name: `${existing.name || 'person'}-avatar`
+            });
+            existing.avatarId = newAvatarId;
+          }
+        }
+      } else if (avatarIdProvided) {
+        if (avatarId === null) {
+          existing.avatarId = null;
+          delete existing.avatarUrl;
+        } else if (typeof avatarId === 'string') {
+          existing.avatarId = avatarId;
         }
-      } catch (avatarErr) {
-        console.warn('⚠️ Failed to update avatar:', avatarErr);
+      }
+    } catch (avatarErr) {
+      console.warn(' Failed to update avatar:', avatarErr);
+    }
+
+    if (avatarUrlProvided) {
+      if (avatarUrl) {
+        existing.avatarUrl = avatarUrl;
+      } else {
+        delete existing.avatarUrl;
       }
     }
 
@@ -744,7 +1029,7 @@ class EmmaWebVault {
       await this.autoSave();
       return { success: true, person: existing };
     } catch (saveError) {
-      console.error('❌ Person update save failed:', saveError);
+      console.error(' Person update save failed:', saveError);
       throw new Error(`Failed to save person update: ${saveError.message}`);
     }
   }
@@ -807,7 +1092,7 @@ class EmmaWebVault {
    */
   async addMedia({ type, data, name, file }) {
 
-    console.log('🔥 ADD_MEDIA DEBUG: Received parameters:', {
+    console.log(' ADD_MEDIA DEBUG: Received parameters:', {
       type,
       name,
       hasFile: !!file,
@@ -858,7 +1143,7 @@ class EmmaWebVault {
       const mediaId = this.generateId('media');
 
       let mediaData;
-      console.log('🔥 MEDIA DATA TYPE CHECK:', {
+      console.log(' MEDIA DATA TYPE CHECK:', {
         hasFile: !!file,
         hasData: !!data,
         dataType: typeof data,
@@ -875,10 +1160,10 @@ class EmmaWebVault {
 
         mediaData = data;
       } else if (typeof data === 'string') {
-        console.log('📝 Using string data (base64/dataURL)');
+        console.log(' Using string data (base64/dataURL)');
         // SPECIAL CASE: For extension captures, store data URLs directly without encryption
         if (data.startsWith('data:')) {
-          console.log('🔧 EXTENSION CAPTURE: Storing data URL directly without encryption');
+          console.log(' EXTENSION CAPTURE: Storing data URL directly without encryption');
           const media = {
             id: mediaId,
             name: name,
@@ -903,7 +1188,7 @@ class EmmaWebVault {
         // Base64 or data URL - convert to ArrayBuffer for encryption
         mediaData = this.dataURLToArrayBuffer(data);
       } else {
-        console.error('❌ INVALID DATA FORMAT - DETAILED ANALYSIS:', {
+        console.error(' INVALID DATA FORMAT - DETAILED ANALYSIS:', {
           hasFile: !!file,
           hasData: !!data,
           dataType: typeof data,
@@ -940,7 +1225,7 @@ class EmmaWebVault {
       return mediaId;
 
     } catch (error) {
-      console.error('❌ Failed to add media:', error);
+      console.error(' Failed to add media:', error);
       throw error;
     }
   }
@@ -972,7 +1257,7 @@ class EmmaWebVault {
       // CRITICAL FIX: Handle both encrypted and unencrypted media
       if (media.encrypted === false || typeof media.data === 'string') {
         // Unencrypted data (base64 data URL) - return directly
-        console.log('📸 MEDIA: Returning unencrypted media data:', mediaId);
+        console.log(' MEDIA: Returning unencrypted media data:', mediaId);
         
         if (media.data.startsWith('data:')) {
           // Already a data URL - return as is
@@ -983,7 +1268,7 @@ class EmmaWebVault {
         }
       } else {
         // Encrypted data - decrypt first
-        console.log('🔐 MEDIA: Decrypting encrypted media data:', mediaId);
+        console.log(' MEDIA: Decrypting encrypted media data:', mediaId);
         
         let salt = this.vaultData.encryption.salt;
         if (salt && typeof salt === 'object' && !(salt instanceof Uint8Array)) {
@@ -1000,11 +1285,11 @@ class EmmaWebVault {
       }
 
     } catch (error) {
-      console.error('❌ Failed to get media:', error);
+      console.error(' Failed to get media:', error);
       // Fallback: if decryption fails, try treating as unencrypted
       const media = this.vaultData.content.media[mediaId];
       if (media && typeof media.data === 'string') {
-        console.log('🔄 MEDIA: Decryption failed, trying as unencrypted data');
+        console.log(' MEDIA: Decryption failed, trying as unencrypted data');
         if (media.data.startsWith('data:')) {
           return media.data;
         } else {
@@ -1067,7 +1352,7 @@ class EmmaWebVault {
       await this.autoSave();
       return { success: true };
     } catch (error) {
-      console.error('❌ Failed to remove media:', error);
+      console.error(' Failed to remove media:', error);
       return { success: false, error: error.message };
     }
   }
@@ -1105,12 +1390,29 @@ class EmmaWebVault {
    */
   async autoSave() {
 
-    // 🔥 CRITICAL: .emma file MUST be updated or operation fails
+    if (!this.autoSaveEnabled) {
+      this.pendingChanges = true;
+      console.debug('[EmmaWebVault] Auto-save disabled by settings; skipping autoSave run');
+      return;
+    }
+
+    //  CRITICAL: .emma file MUST be updated or operation fails
     const hasFileSystemAccess = 'showOpenFilePicker' in window;
 
+    if (hasFileSystemAccess && !this.fileHandle) {
+      try {
+        const restored = await this.ensureDirectFileHandle('auto-save', { promptOnFailure: true });
+        if (restored && this.fileHandle) {
+          this.needsFileReauth = false;
+        }
+      } catch (handleError) {
+        console.warn(' AUTO-SAVE: Failed to restore file handle automatically:', handleError);
+      }
+    }
+
     if (hasFileSystemAccess && this.fileHandle) {
-      // ✅ PREFERRED: Direct save to original file
-      console.log('💾 VAULT: Saving directly to .emma file');
+      //  PREFERRED: Direct save to original file
+      console.log(' VAULT: Saving directly to .emma file');
       
       // Show sync status
       if (window.emmaSyncStatus) {
@@ -1119,14 +1421,17 @@ class EmmaWebVault {
       
       this.pendingChanges = true;
       this.scheduleElegantSave();
+      this.needsFileReauth = false;
+      const syncModal = document.querySelector('.emma-sync-error-modal');
+      if (syncModal) syncModal.remove();
       
       // CRITICAL: Also sync to extension if available (merged from removed duplicate)
       if (this.extensionAvailable && this.extensionSyncEnabled) {
         try {
           await this.syncToExtension();
-          console.log('✅ VAULT: Extension sync completed');
+          console.log(' VAULT: Extension sync completed');
         } catch (extensionError) {
-          console.warn('⚠️ EXTENSION: Sync failed (non-critical):', extensionError);
+          console.warn(' EXTENSION: Sync failed (non-critical):', extensionError);
         }
       }
       
@@ -1134,20 +1439,31 @@ class EmmaWebVault {
       try {
         await this.saveToIndexedDB();
       } catch (error) {
-        console.warn('⚠️ BACKUP: IndexedDB save failed (non-critical):', error);
+        console.warn(' BACKUP: IndexedDB save failed (non-critical):', error);
       }
       
     } else if (hasFileSystemAccess && !this.fileHandle) {
-      // 🔄 GRACEFUL: No file handle - save to IndexedDB and defer file save
-      console.warn('⚠️ GRACEFUL: No file handle - saving to IndexedDB, will prompt for file access on next user interaction');
+      //  GRACEFUL: No file handle - save to IndexedDB and defer file save
+      console.warn(' GRACEFUL: No file handle - saving to IndexedDB, will prompt for file access on next user interaction');
       
       // Save to IndexedDB immediately as backup
       try {
         await this.saveToIndexedDB();
-        console.log('✅ GRACEFUL: Saved to IndexedDB backup');
+        console.log(' GRACEFUL: Saved to IndexedDB backup');
+
+        if (this.isWebappPrimary) {
+          // Pure webapp mode treats IndexedDB as primary storage so autosave can proceed
+          this.needsFileReauth = false;
+          this.pendingChanges = false;
+          if (window.emmaSyncStatus) {
+            window.emmaSyncStatus.show('success', 'Changes saved to Emma Web Vault');
+          }
+          return;
+        }
         
         // Mark that we need file re-authentication 
         this.needsFileReauth = true;
+        this.promptForFileReauth();
         
         // Show gentle notification (not blocking error)
         if (window.emmaSyncStatus) {
@@ -1158,7 +1474,7 @@ class EmmaWebVault {
         return;
         
       } catch (indexedDBError) {
-        console.error('❌ GRACEFUL: IndexedDB backup also failed:', indexedDBError);
+        console.error(' GRACEFUL: IndexedDB backup also failed:', indexedDBError);
         
         // Only now show error since both methods failed
         if (window.emmaSyncStatus) {
@@ -1168,8 +1484,8 @@ class EmmaWebVault {
       }
       
     } else {
-      // 🔄 FALLBACK: File System Access API not supported
-      console.log('📥 FALLBACK: Using download method for .emma file');
+      //  FALLBACK: File System Access API not supported
+      console.log(' FALLBACK: Using download method for .emma file');
       
       // Show fallback sync status
       if (window.emmaSyncStatus) {
@@ -1193,22 +1509,22 @@ class EmmaWebVault {
       clearTimeout(this.saveDebounceTimer);
     }
 
-    // 🔥 CRITICAL: Reduced debounce to 500ms for Emma's precious memories
+    //  CRITICAL: Reduced debounce to 500ms for Emma's precious memories
     // Balance between data safety and file performance
     this.saveDebounceTimer = setTimeout(async () => {
       if (this.pendingChanges) {
-        console.log('💾 EMMA: Performing immediate .emma file save');
+        console.log(' EMMA: Performing immediate .emma file save');
         try {
           await this.performElegantSave();
           this.pendingChanges = false;
-          console.log('✅ EMMA: .emma file saved successfully');
+          console.log(' EMMA: .emma file saved successfully');
           
           // Show success status
           if (window.emmaSyncStatus) {
             window.emmaSyncStatus.show('success', '.emma file updated successfully');
           }
         } catch (error) {
-          console.error('❌ EMMA: Critical .emma file save failed:', error);
+          console.error(' EMMA: Critical .emma file save failed:', error);
           
           // Show error status
           if (window.emmaSyncStatus) {
@@ -1231,8 +1547,9 @@ class EmmaWebVault {
 
       // Direct-save-only: Must have file handle
       if (!this.fileHandle || !('createWritable' in this.fileHandle)) {
-        console.error('⛔ DIRECT-SAVE: No file handle available');
-        this.showDirectSaveAffordance && this.showDirectSaveAffordance();
+        console.error(' DIRECT-SAVE: No file handle available');
+        this.needsFileReauth = true;
+        this.promptForFileReauth();
         throw new Error('Direct save required: no file access available');
       }
 
@@ -1240,7 +1557,7 @@ class EmmaWebVault {
       await this.atomicFileUpdate();
 
     } catch (error) {
-      console.error('❌ DIRECT-SAVE: Save failed:', error);
+      console.error(' DIRECT-SAVE: Save failed:', error);
       throw error; // Propagate error to caller
     }
   }
@@ -1263,19 +1580,21 @@ class EmmaWebVault {
       try {
         // Test handle validity by attempting to get file info
         await this.fileHandle.getFile();
-        console.log('✅ ATOMIC: File handle preserved after write');
+        console.log(' ATOMIC: File handle preserved after write');
       } catch (handleError) {
-        console.warn('⚠️ ATOMIC: File handle invalidated after write, will need re-auth:', handleError);
+        console.warn(' ATOMIC: File handle invalidated after write, will need re-auth:', handleError);
         // Don't throw - just log for debugging
       }
 
     } catch (error) {
-      console.error('❌ ATOMIC: File update failed:', error);
+      console.error(' ATOMIC: File update failed:', error);
       
       // If write failed, check if it's a handle issue
       if (error.name === 'NotAllowedError' || error.message.includes('permission')) {
-        console.warn('⚠️ ATOMIC: Permission denied - file handle may be invalid');
+        console.warn(' ATOMIC: Permission denied - file handle may be invalid');
         this.fileHandle = null; // Clear invalid handle
+        this.needsFileReauth = true;
+        this.promptForFileReauth();
       }
       
       throw error;
@@ -1295,20 +1614,111 @@ class EmmaWebVault {
       });
 
       const file = await fileHandle.getFile();
-      if (file.name === this.originalFileName) {
-        this.fileHandle = fileHandle;
+      const isDifferentFileSelection = !!(this.originalFileName && file.name !== this.originalFileName);
 
-        return true;
-      } else {
+      if (isDifferentFileSelection) {
+        console.warn(' REAUTH: Selected file name differs from stored reference. Switching vault to new file.', {
+          stored: this.originalFileName,
+          selected: file.name
+        });
 
-        return false;
+        try {
+          await this.switchVaultToSelectedFile(fileHandle, file, { source: 'reauth' });
+          return true;
+        } catch (switchError) {
+          console.error(' REAUTH: Failed to switch vault from new selection:', switchError);
+          if (window.emmaError) {
+            window.emmaError('Could not switch to the selected .emma file: ' + switchError.message, {
+              title: 'Vault Switch Failed',
+              helpText: 'Let’s try selecting the file again and double-check the passphrase.'
+            });
+          }
+          return false;
+        }
       }
+
+      this.updateOriginalFileName(file.name);
+      this.fileHandle = fileHandle;
+      this.needsFileReauth = false;
+      const syncModal = document.querySelector('.emma-sync-error-modal');
+      if (syncModal) syncModal.remove();
+
+      return true;
     } catch (error) {
 
       return false;
     }
   }
 
+  async ensureDirectFileHandle(context = 'operation', options = {}) {
+    const { promptOnFailure = true } = options || {};
+
+    if (typeof window === 'undefined' || !('showOpenFilePicker' in window)) {
+      return false;
+    }
+
+    if (this.fileHandle) {
+      return true;
+    }
+
+    try {
+      const persistedHandle = await this.loadPersistedFileHandle({ silent: true });
+      if (persistedHandle?.handle) {
+        this._suspendHandlePersistence = true;
+        this.fileHandle = persistedHandle.handle;
+        this._suspendHandlePersistence = false;
+
+        if (persistedHandle.originalFileName && !this.originalFileName) {
+          this.originalFileName = persistedHandle.originalFileName;
+        }
+
+        if (persistedHandle.permission !== 'denied') {
+          this.needsFileReauth = false;
+          return true;
+        }
+
+        // Permission denied - reset handle so we can prompt again
+        this.fileHandle = null;
+      }
+    } catch (error) {
+      console.warn(` FILE-ACCESS: Failed to restore persisted handle before ${context}:`, error);
+    }
+
+    if (this.isFileSelectionInProgress) {
+      return false;
+    }
+
+    if (!this.originalFileName) {
+      try {
+        this.originalFileName = sessionStorage.getItem('emmaVaultOriginalFileName') ||
+          localStorage.getItem('emmaVaultOriginalFileName') ||
+          this.originalFileName;
+      } catch (error) {
+        console.warn(' FILE-ACCESS: Unable to restore cached filename before reauth:', error);
+      }
+    }
+
+    if (!this.originalFileName) {
+      return false;
+    }
+
+    try {
+      const restored = await this.reEstablishFileAccess();
+      this.needsFileReauth = !restored;
+      if (!restored && promptOnFailure) {
+        this.promptForFileReauth();
+      }
+      return restored;
+    } catch (error) {
+      console.warn(` FILE-ACCESS: Failed to restore handle after ${context}:`, error);
+      this.needsFileReauth = true;
+      if (promptOnFailure) {
+        this.promptForFileReauth();
+      }
+      return false;
+    }
+  }
+
   // REMOVED: Session storage fallback methods - direct-save-only mode
 
   /**
@@ -1319,15 +1729,16 @@ class EmmaWebVault {
 
       // Direct-save-only: Must have file handle for final save
       if (!this.fileHandle || !('createWritable' in this.fileHandle)) {
-        console.error('⛔ DIRECT-SAVE: Cannot lock - no file access');
-        this.showDirectSaveAffordance && this.showDirectSaveAffordance();
+        console.error(' DIRECT-SAVE: Cannot lock - no file access');
+        this.needsFileReauth = true;
+        this.promptForFileReauth();
         throw new Error('Direct save required to lock vault');
       }
 
       // Perform final atomic update
       await this.atomicFileUpdate();
 
-      // 🔥 CRITICAL: Preserve filename for file access restoration
+      //  CRITICAL: Preserve filename for file access restoration
       const preservedFileName = this.originalFileName;
       
       // Clear vault state
@@ -1346,16 +1757,16 @@ class EmmaWebVault {
       localStorage.removeItem('emmaVaultActive');
       localStorage.removeItem('emmaVaultName');
       
-      // 🔄 PRESERVE: Keep filename in localStorage for file access restoration
+      //  PRESERVE: Keep filename in localStorage for file access restoration
       if (preservedFileName) {
         localStorage.setItem('emmaVaultOriginalFileName', preservedFileName);
-        console.log('💾 LOCK: Preserved filename for restoration:', preservedFileName);
+        console.log(' LOCK: Preserved filename for restoration:', preservedFileName);
       }
 
       return { success: true };
 
     } catch (error) {
-      console.error('❌ DIRECT-SAVE: Failed to lock vault:', error);
+      console.error(' DIRECT-SAVE: Failed to lock vault:', error);
       throw error;
     }
   }
@@ -1390,7 +1801,7 @@ class EmmaWebVault {
 
           // Check if object store exists
           if (!db.objectStoreNames.contains('vaults')) {
-            console.warn('⚠️ IndexedDB: Object store "vaults" not found - returning null');
+            console.warn(' IndexedDB: Object store "vaults" not found - returning null');
             resolve(null);
             return;
           }
@@ -1414,7 +1825,7 @@ class EmmaWebVault {
         };
       });
     } catch (error) {
-      console.error('❌ Failed to load from IndexedDB:', error);
+      console.error(' Failed to load from IndexedDB:', error);
       return null;
     }
   }
@@ -1440,6 +1851,7 @@ class EmmaWebVault {
         const vaultData = await this.loadFromIndexedDB();
         if (vaultData) {
           this.vaultData = vaultData;
+          this.ensureVaultMetadataName(vaultName);
 
         } else {
           // Create minimal vault structure if no IndexedDB data
@@ -1448,6 +1860,7 @@ class EmmaWebVault {
             stats: { memoryCount: 0, peopleCount: 0, mediaCount: 0 },
             metadata: { name: vaultName || 'Web Vault' }
           };
+          this.ensureVaultMetadataName(vaultName);
 
         }
 
@@ -1458,23 +1871,42 @@ class EmmaWebVault {
         // Restore original filename (check both session and localStorage)
         this.originalFileName = sessionStorage.getItem('emmaVaultOriginalFileName') || 
                                localStorage.getItem('emmaVaultOriginalFileName');
-        
-        // 🔥 CRITICAL: Try to restore file access for .emma file sync
-        if (this.originalFileName && 'showOpenFilePicker' in window) {
-          console.log('🔄 RESTORE: Attempting to restore file access for:', this.originalFileName);
-          try {
-            // Try silent restoration first (may work if browser remembers permission)
-            const restored = await this.reEstablishFileAccess();
-            if (restored) {
-              console.log('✅ RESTORE: File access restored automatically');
-            } else {
-              console.warn('⚠️ RESTORE: File access not restored - will prompt on first save');
+
+        let persistedHandleStatus = null;
+        if (!this.fileHandle && this.canPersistFileHandles()) {
+          persistedHandleStatus = await this.loadPersistedFileHandle({ silent: true });
+          if (persistedHandleStatus?.handle) {
+            this._suspendHandlePersistence = true;
+            this.fileHandle = persistedHandleStatus.handle;
+            this._suspendHandlePersistence = false;
+
+            if (persistedHandleStatus.originalFileName && !this.originalFileName) {
+              this.originalFileName = persistedHandleStatus.originalFileName;
+            }
+
+            if (this.originalFileName) {
+              try {
+                sessionStorage.setItem('emmaVaultOriginalFileName', this.originalFileName);
+                localStorage.setItem('emmaVaultOriginalFileName', this.originalFileName);
+              } catch (_) {}
             }
-          } catch (error) {
-            console.warn('⚠️ RESTORE: File access restoration failed:', error);
-            // Not critical - user will be prompted on first save
           }
         }
+        
+        if (this.fileHandle) {
+          if (persistedHandleStatus && persistedHandleStatus.permission === 'denied') {
+            this.needsFileReauth = true;
+            // DON'T prompt on page load - only when user tries to save
+            console.log('📝 Vault file permission denied - will prompt on next save');
+          } else {
+            this.needsFileReauth = false;
+          }
+        } else if (this.originalFileName) {
+          //  CRITICAL: Defer re-auth until user action to avoid unsolicited file pickers
+          this.needsFileReauth = true;
+          // DON'T prompt on page load - only when user tries to save
+          console.log('📝 Vault file reauth needed - will prompt on next save');
+        }
 
         return { vaultData: this.vaultData, hasPassphrase: true, hasFileName: !!this.originalFileName };
       } else {
@@ -1483,7 +1915,7 @@ class EmmaWebVault {
       }
 
     } catch (error) {
-      console.error('❌ ELEGANT: Failed to restore vault state:', error);
+      console.error(' ELEGANT: Failed to restore vault state:', error);
       return null;
     }
   }
@@ -1506,7 +1938,7 @@ class EmmaWebVault {
               db.deleteObjectStore(storeName);
 
             } catch (e) {
-              console.warn('⚠️ IndexedDB: Could not delete store:', storeName);
+              console.warn(' IndexedDB: Could not delete store:', storeName);
             }
           });
 
@@ -1547,7 +1979,7 @@ class EmmaWebVault {
     try {
 
       if (!this.vaultData) {
-        console.error('❌ No vault data available for download');
+        console.error(' No vault data available for download');
         return;
       }
 
@@ -1587,11 +2019,11 @@ class EmmaWebVault {
 
       // Show user message about file update
       if (typeof showToast === 'function') {
-        showToast(`📥 Updated ${baseName}.emma downloaded - replace your original file`, 'info');
+        showToast(` Updated ${baseName}.emma downloaded - replace your original file`, 'info');
       }
 
     } catch (error) {
-      console.error('❌ Failed to download vault:', error);
+      console.error(' Failed to download vault:', error);
       throw error;
     }
   }
@@ -1605,6 +2037,11 @@ class EmmaWebVault {
       // Use provided vault data or default to current
       const dataToEncrypt = vaultData || this.vaultData;
 
+      if (!customPassphrase) {
+        await this.ensureActivePassphrase('file-save');
+      }
+      const activePassphrase = customPassphrase || this.passphrase;
+
       // Convert vault data to JSON
       const jsonData = JSON.stringify(dataToEncrypt);
 
@@ -1613,7 +2050,7 @@ class EmmaWebVault {
 
       // Encrypt using Web Crypto API with specified passphrase
 
-      const encryptedData = await this.encryptData(data, null, customPassphrase);
+      const encryptedData = await this.encryptData(data, null, activePassphrase);
 
       // Create .emma file format
       const header = new TextEncoder().encode('EMMA'); // Magic bytes (4 bytes)
@@ -1633,7 +2070,7 @@ class EmmaWebVault {
         throw new Error('Invalid vault salt format');
       }
       if (salt.length !== 32) {
-        console.warn('⚠️ SALT: Unexpected salt length:', salt.length, '- attempting to proceed with normalized value');
+        console.warn(' SALT: Unexpected salt length:', salt.length, '- attempting to proceed with normalized value');
       }
       // Persist normalized salt back in memory to avoid future issues
       try { this.vaultData.encryption.salt = salt; } catch (_) {}
@@ -1661,8 +2098,8 @@ class EmmaWebVault {
       return result;
 
     } catch (error) {
-      console.error('❌ Failed to encrypt vault data:', error);
-      console.error('❌ Error details:', error.stack);
+      console.error(' Failed to encrypt vault data:', error);
+      console.error(' Error details:', error.stack);
       throw error;
     }
   }
@@ -1711,7 +2148,7 @@ class EmmaWebVault {
       return vaultData;
 
     } catch (error) {
-      console.error('❌ Failed to decrypt vault file:', error);
+      console.error(' Failed to decrypt vault file:', error);
       throw new Error('Failed to decrypt vault. Please check your passphrase.');
     }
   }
@@ -1724,73 +2161,186 @@ class EmmaWebVault {
   }
 
   /**
-   * Show a small, reusable affordance to re-establish direct file save
+   * Prompt user to re-establish direct file save when auto-save requires a handle
    */
-  showDirectSaveAffordance() {
-    try {
+  promptForFileReauth() {
+    if (!this.needsFileReauth) return;
+    if (typeof document === 'undefined') return;
+    if (document.querySelector('.emma-sync-error-modal')) return;
 
-      console.log('🔍 AFFORDANCE: isFallbackMode?', this.isFallbackMode());      if (!this.isFallbackMode()) {
+    if (typeof this.showFileSyncError === 'function') {
+      this.showFileSyncError();
+    }
+  }
 
-        return;
+  canPersistFileHandles() {
+    return typeof window !== 'undefined' &&
+      typeof indexedDB !== 'undefined' &&
+      ('showOpenFilePicker' in window);
+  }
+
+  async openHandleDatabase() {
+    if (!this.canPersistFileHandles()) {
+      return null;
+    }
+
+    return new Promise((resolve, reject) => {
+      try {
+        const request = indexedDB.open('EmmaVaultHandles', 1);
+
+        request.onupgradeneeded = (event) => {
+          const db = event.target.result;
+          if (!db.objectStoreNames.contains('handles')) {
+            db.createObjectStore('handles', { keyPath: 'id' });
+          }
+        };
+
+        request.onsuccess = (event) => resolve(event.target.result);
+        request.onerror = () => reject(request.error);
+      } catch (error) {
+        reject(error);
       }
+    });
+  }
 
-      if (document.getElementById('emma-direct-save-btn')) {
+  async persistFileHandle(fileHandle) {
+    if (!fileHandle || this.fileHandlePersistenceDisabled || !this.canPersistFileHandles()) {
+      return;
+    }
 
-        return; // Already shown
+    try {
+      const db = await this.openHandleDatabase();
+      if (!db) return;
+
+      await new Promise((resolve, reject) => {
+        const transaction = db.transaction(['handles'], 'readwrite');
+        const store = transaction.objectStore('handles');
+        store.put({
+          id: 'primary',
+          handle: fileHandle,
+          originalFileName: this.originalFileName || fileHandle.name || null,
+          timestamp: new Date().toISOString()
+        });
+
+        transaction.oncomplete = () => {
+          db.close();
+          resolve();
+        };
+        transaction.onabort = () => {
+          const error = transaction.error || new Error('handle persistence aborted');
+          db.close();
+          reject(error);
+        };
+        transaction.onerror = transaction.onabort;
+      });
+    } catch (error) {
+      if (error?.name === 'DataCloneError') {
+        this.fileHandlePersistenceDisabled = true;
+        console.warn(' FILE-HANDLE: Browser blocked handle persistence - falling back to reauth prompts');
+      } else {
+        console.warn(' FILE-HANDLE: Failed to persist handle:', error);
       }
+    }
+  }
 
-      const btn = document.createElement('button');
-      btn.id = 'emma-direct-save-btn';
-      btn.innerHTML = '🔓 Enable Direct Save';
-      btn.style.cssText = `
-        position: fixed;
-        bottom: 20px;
-        right: 20px;
-        z-index: 2147483647;
-        padding: 12px 18px;
-        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
-        color: #fff;
-        border: none;
-        border-radius: 12px;
-        box-shadow: 0 8px 32px rgba(239, 68, 68, 0.4);
-        font-weight: 600;
-        cursor: pointer;
-        font-size: 14px;
-        animation: pulse 2s infinite;
-      `;
+  async clearPersistedFileHandle() {
+    if (this.fileHandlePersistenceDisabled || !this.canPersistFileHandles()) {
+      return;
+    }
 
-      // Add pulsing animation
-      const style = document.createElement('style');
-      style.textContent = `
-        @keyframes pulse {
-          0%, 100% { transform: scale(1); }
-          50% { transform: scale(1.05); }
-        }
-      `;
-      document.head.appendChild(style);
-      document.body.appendChild(btn);
+    try {
+      const db = await this.openHandleDatabase();
+      if (!db) return;
 
-      const enable = async () => {
-        try {
-          btn.disabled = true;
-          btn.innerHTML = '🔄 Requesting access...';
-          const ok = await this.reEstablishFileAccess();
-          if (ok && this.fileHandle) {
-            btn.innerHTML = '✅ Direct save enabled!';
-            btn.style.background = 'linear-gradient(135deg, #10b981 0%, #059669 100%)';
-            setTimeout(() => btn.remove(), 2000);
-            if (typeof showToast === 'function') showToast('✅ Direct save enabled - all changes now save automatically!', 'success');
-          } else {
-            btn.innerHTML = '🔓 Enable Direct Save';
-            btn.disabled = false;
-          }
-        } catch (e) {
-          btn.textContent = 'Enable direct save';
-          btn.disabled = false;
-        }
+      await new Promise((resolve, reject) => {
+        const transaction = db.transaction(['handles'], 'readwrite');
+        transaction.objectStore('handles').delete('primary');
+
+        transaction.oncomplete = () => {
+          db.close();
+          resolve();
+        };
+        transaction.onabort = () => {
+          const error = transaction.error || new Error('handle persistence delete aborted');
+          db.close();
+          reject(error);
+        };
+        transaction.onerror = transaction.onabort;
+      });
+    } catch (error) {
+      console.warn(' FILE-HANDLE: Failed to clear persisted handle:', error);
+    }
+  }
+
+  async loadPersistedFileHandle(options = {}) {
+    if (this.fileHandlePersistenceDisabled || !this.canPersistFileHandles()) {
+      return null;
+    }
+
+    try {
+      const db = await this.openHandleDatabase();
+      if (!db) return null;
+
+      const record = await new Promise((resolve, reject) => {
+        let result = null;
+        const transaction = db.transaction(['handles'], 'readonly');
+        const store = transaction.objectStore('handles');
+        const request = store.get('primary');
+
+        request.onsuccess = () => {
+          result = request.result || null;
+        };
+
+        transaction.oncomplete = () => {
+          db.close();
+          resolve(result);
+        };
+
+        transaction.onabort = () => {
+          const error = transaction.error || new Error('handle persistence read aborted');
+          db.close();
+          reject(error);
+        };
+
+        transaction.onerror = transaction.onabort;
+      });
+
+      if (!record || !record.handle) {
+        return null;
+      }
+
+      const permission = await this.getHandlePermissionState(
+        record.handle,
+        options.permissionMode || 'readwrite'
+      );
+
+      return {
+        handle: record.handle,
+        originalFileName: record.originalFileName || record.handle?.name || null,
+        permission
       };
-      btn.addEventListener('click', enable);
-    } catch (_) {}
+    } catch (error) {
+      if (error?.name === 'DataCloneError') {
+        this.fileHandlePersistenceDisabled = true;
+        console.warn(' FILE-HANDLE: Stored handle is no longer readable - disabling persistence');
+      } else if (!options.silent) {
+        console.warn(' FILE-HANDLE: Failed to load persisted handle:', error);
+      }
+      return null;
+    }
+  }
+
+  async getHandlePermissionState(fileHandle, mode = 'readwrite') {
+    if (!fileHandle || typeof fileHandle.queryPermission !== 'function') {
+      return 'unknown';
+    }
+
+    try {
+      return await fileHandle.queryPermission({ mode });
+    } catch (error) {
+      console.warn(' FILE-HANDLE: queryPermission failed:', error);
+      return 'unknown';
+    }
   }
 
   /**
@@ -1800,7 +2350,18 @@ class EmmaWebVault {
     try {
 
       let salt = customSalt || this.vaultData.encryption.salt;
-      const passphrase = customPassphrase || this.passphrase;
+      let passphrase = customPassphrase || this.passphrase;
+
+      if (typeof passphrase !== 'string' || passphrase.trim().length === 0) {
+        if (!customPassphrase) {
+          await this.ensureActivePassphrase('encrypt-data');
+          passphrase = this.passphrase;
+        }
+      }
+
+      if (typeof passphrase !== 'string' || passphrase.length === 0) {
+        throw new Error('Passphrase is required for encryption');
+      }
 
       if (salt && typeof salt === 'object' && !(salt instanceof Uint8Array)) {
         salt = new Uint8Array(Object.values(salt));
@@ -1869,8 +2430,8 @@ class EmmaWebVault {
       return result.buffer;
 
     } catch (error) {
-      console.error('❌ Encryption failed:', error);
-      console.error('❌ Error details:', error.stack);
+      console.error(' Encryption failed:', error);
+      console.error(' Error details:', error.stack);
       throw error;
     }
   }
@@ -1927,7 +2488,7 @@ class EmmaWebVault {
       return decryptedData;
 
     } catch (error) {
-      console.error('❌ Decryption failed:', error);
+      console.error(' Decryption failed:', error);
       throw error;
     }
   }
@@ -1941,6 +2502,37 @@ class EmmaWebVault {
     return crypto.getRandomValues(new Uint8Array(32));
   }
 
+  normalizeToArrayBuffer(data) {
+    if (data instanceof ArrayBuffer) {
+      return data;
+    }
+    if (ArrayBuffer.isView(data)) {
+      return data.buffer.slice(data.byteOffset, data.byteOffset + data.byteLength);
+    }
+    throw new Error('Unsupported vault buffer format');
+  }
+
+  inspectVaultBytes(data, label = 'vault-file') {
+    try {
+      const buffer = data instanceof Uint8Array ? data : new Uint8Array(this.normalizeToArrayBuffer(data));
+      const header = new TextDecoder().decode(buffer.slice(0, 4));
+      const asciiPreview = this.peekAsciiString(buffer.slice(0, 128));
+      const hexPreview = Array.from(buffer.slice(0, 40)).map(b => b.toString(16).padStart(2, '0')).join(' ');
+      const summary = {
+        label,
+        totalBytes: buffer.length,
+        header,
+        hexPreview,
+        asciiPreview,
+      };
+      console.log('🔎 VAULT INSPECTOR:', summary);
+      return summary;
+    } catch (error) {
+      console.warn('VAULT INSPECTOR: Failed to analyze buffer:', error);
+      return null;
+    }
+  }
+
   async fileToArrayBuffer(file) {
     return new Promise((resolve, reject) => {
       const reader = new FileReader();
@@ -2016,14 +2608,14 @@ class EmmaWebVault {
     // Return emoji based on memory content or metadata
     const emotion = memory.metadata?.emotion || 'neutral';
     const emojis = {
-      happy: '😊',
-      sad: '😢',
-      love: '💕',
-      excited: '🎉',
-      peaceful: '🌸',
-      neutral: '📝'
+      happy: '',
+      sad: '',
+      love: '',
+      excited: '',
+      peaceful: '',
+      neutral: ''
     };
-    return emojis[emotion] || '📝';
+    return emojis[emotion] || '';
   }
 
   calculateMemorySize(memory) {
@@ -2096,7 +2688,7 @@ class EmmaWebVault {
         break;
 
       case 'SYNC_ERROR':
-        console.error('❌ Sync error:', message.error);
+        console.error(' Sync error:', message.error);
         this.showSyncNotification('error', 'Sync failed: ' + message.error);
         break;
 
@@ -2215,7 +2807,7 @@ class EmmaWebVault {
   }
 
   /**
-   * 🚨 REMOVED DUPLICATE autoSave - was overriding .emma file saving!
+   *  REMOVED DUPLICATE autoSave - was overriding .emma file saving!
    * Original autoSave (line ~1106) handles proper .emma file persistence.
    */
 
@@ -2278,31 +2870,76 @@ class EmmaWebVault {
    */
   async exactWorkingDecrypt(fileData, passphrase) {
     try {
+      const arrayBuffer = this.normalizeToArrayBuffer(fileData);
+      const data = new Uint8Array(arrayBuffer);
 
-      // Parse .emma file format: EMMA + version + salt + iv + encrypted data
-      const data = new Uint8Array(fileData);
-
-      // Check magic bytes
       const magic = new TextDecoder().decode(data.slice(0, 4));
       if (magic !== 'EMMA') {
         throw new Error('Invalid .emma file format');
       }
 
-      // Extract components (EXACT format from working extension)
-      const version = data.slice(4, 6);
-      const salt = data.slice(6, 38); // 32 bytes
-      const iv = data.slice(38, 50); // 12 bytes
-      const encrypted = data.slice(50);
-
-      console.log('🔓 EXACT WORKING: Extracted vault components:', {
-        magic,
-        version: Array.from(version),
-        saltLength: salt.length,
-        ivLength: iv.length,
-        encryptedLength: encrypted.length
-      });
+      const plaintextCandidate = this.tryParsePlaintextVault(data.slice(4));
+      if (plaintextCandidate) {
+        console.warn('EXACT WORKING: Plaintext vault detected - returning parsed data directly');
+        plaintextCandidate.encryption = plaintextCandidate.encryption || {};
+        plaintextCandidate.encryption.iterations = plaintextCandidate.encryption.iterations || 0;
+        plaintextCandidate.encryption.salt = plaintextCandidate.encryption.salt || new Uint8Array(32);
+        return plaintextCandidate;
+      }
+
+      const buildLayouts = () => {
+        const attempts = [];
+        const versionFlags = [true, false];
+        const preambleLengths = [0, 2, 4, 6, 8, 10, 12, 16, 20, 24, 28, 32];
+        const saltLengths = [32, 16, 24, 48, 64, 40];
+        const ivLengths = [12, 16, 24];
+
+        for (const includeVersion of versionFlags) {
+          for (const preamble of preambleLengths) {
+            for (const saltLength of saltLengths) {
+              for (const ivLength of ivLengths) {
+                let offset = 4;
+                let version = null;
+
+                if (includeVersion) {
+                  if (data.length >= offset + 2) {
+                    const candidate = data.slice(offset, offset + 2);
+                    const [major, minor] = candidate;
+                    const looksLikeVersion = (major === 1 && minor <= 10) || (major === 0 && minor <= 10);
+                    const bytesRemaining = data.length - (offset + 2 + preamble + saltLength + ivLength);
+                    if (looksLikeVersion && bytesRemaining >= 0) {
+                      version = candidate;
+                      offset += 2;
+                    } else {
+                      continue;
+                    }
+                  } else {
+                    continue;
+                  }
+                }
+
+                offset += preamble;
+                if (data.length < offset + saltLength + ivLength + 16) {
+                  continue;
+                }
+
+                const salt = data.slice(offset, offset + saltLength);
+                const iv = data.slice(offset + saltLength, offset + saltLength + ivLength);
+                const encrypted = data.slice(offset + saltLength + ivLength);
+                attempts.push({ salt, iv, encrypted, version, ivLength, saltLength, preamble });
+              }
+            }
+          }
+        }
+
+        return attempts;
+      };
+
+      const layoutAttempts = buildLayouts();
+      if (layoutAttempts.length === 0) {
+        throw new Error('Unsupported .emma file layout');
+      }
 
-      // Derive key from passphrase using PBKDF2 (EXACT parameters)
       const keyMaterial = await crypto.subtle.importKey(
         'raw',
         new TextEncoder().encode(passphrase),
@@ -2311,46 +2948,243 @@ class EmmaWebVault {
         ['deriveBits', 'deriveKey']
       );
 
-      const key = await crypto.subtle.deriveKey(
-        {
-          name: 'PBKDF2',
-          salt: salt,
-          iterations: 250000, // EXACT same as extension
-          hash: 'SHA-256'
-        },
-        keyMaterial,
-        { name: 'AES-GCM', length: 256 },
-        false,
-        ['decrypt']
-      );
-
-      // Decrypt the data (EXACT same as extension)
-      const decrypted = await crypto.subtle.decrypt(
-        { name: 'AES-GCM', iv: iv },
-        key,
-        encrypted
-      );
+      const iterationCandidates = [
+        500000,
+        400000,
+        350000,
+        330000,
+        320000,
+        310000,
+        300000,
+        280000,
+        262144,
+        250000,
+        200000,
+        175000,
+        150000,
+        125000,
+        110000,
+        100000,
+        96000,
+        80000,
+        64000,
+        50000
+      ];
+      let chosenIterations = null;
+      let vaultData = null;
+      let lastError = null;
+
+      for (const layout of layoutAttempts) {
+        for (const iterations of iterationCandidates) {
+          try {
+            const key = await crypto.subtle.deriveKey(
+              {
+                name: 'PBKDF2',
+                salt: layout.salt,
+                iterations,
+                hash: 'SHA-256'
+              },
+              keyMaterial,
+              { name: 'AES-GCM', length: 256 },
+              false,
+              ['decrypt']
+            );
+
+            const decrypted = await crypto.subtle.decrypt(
+              { name: 'AES-GCM', iv: layout.iv },
+              key,
+              layout.encrypted
+            );
+
+            const jsonString = new TextDecoder().decode(decrypted);
+            vaultData = JSON.parse(jsonString);
+            chosenIterations = iterations;
+            vaultData.encryption = vaultData.encryption || {};
+            vaultData.encryption.salt = new Uint8Array(layout.salt);
+            if (chosenIterations) {
+              vaultData.encryption.iterations = chosenIterations;
+            }
 
-      // Parse JSON
-      const jsonString = new TextDecoder().decode(decrypted);
-      const vaultData = JSON.parse(jsonString);
+            console.log('EXACT WORKING: Vault decrypted successfully!', {
+              memories: Object.keys(vaultData.content?.memories || {}).length,
+              layout: layout.version ? 'versioned' : 'legacy'
+            });
+            return vaultData;
+          } catch (error) {
+            lastError = error;
+          }
+        }
+      }
 
-      console.log('✅ EXACT WORKING: Vault decrypted successfully! Memories:',
-        Object.keys(vaultData.content?.memories || {}).length);
+      const summary = layoutAttempts.map(layout => ({
+        saltLength: layout.saltLength || layout.salt?.length || null,
+        ivLength: layout.ivLength || layout.iv?.length || null,
+        encryptedLength: layout.encrypted?.length || null,
+        version: layout.version ? Array.from(layout.version) : null
+      }));
+      const firstBytes = Array.from(data.slice(0, 64));
+      const asciiPreview = this.peekAsciiString(data.slice(0, 128));
+      console.error('EXACT WORKING: Exhausted all layout/iteration combinations', summary);
+      console.error('EXACT WORKING: Layout summary raw', JSON.stringify(summary));
+      console.error('EXACT WORKING: File first bytes', firstBytes);
+      if (asciiPreview) {
+        console.error('EXACT WORKING: ASCII preview', asciiPreview);
+      }
 
-      return vaultData;
+      throw lastError || new Error('Failed to derive Emma vault key.');
 
     } catch (error) {
-      console.error('❌ EXACT WORKING: Decryption failed:', error);
+      console.error('EXACT WORKING: Decryption failed:', error);
       throw new Error('Failed to decrypt vault: ' + error.message);
     }
   }
 
-  /**
-   * PURE WEB APP: Native vault encryption (no extension needed)
-   */
-  async nativeEncryptVault(vaultData, passphrase) {
+  async nativeDecryptVault(source, passphrase) {
+    try {
+      if (!source) {
+        throw new Error('No vault data provided');
+      }
+
+      if (source && typeof source === 'object') {
+        if (source.data && source.data.content) {
+          return source.data;
+        }
+        if (source.content && source.metadata) {
+          return source;
+        }
+      }
+
+      const effectivePassphrase = passphrase || this.passphrase;
+      if (!effectivePassphrase) {
+        throw new Error('Passphrase required to decrypt vault');
+      }
+
+      let buffer = null;
+
+      if (source instanceof ArrayBuffer) {
+        buffer = source;
+      } else if (ArrayBuffer.isView(source)) {
+        buffer = source.buffer.slice(source.byteOffset, source.byteOffset + source.byteLength);
+      } else if (typeof Blob !== 'undefined' && source instanceof Blob) {
+        buffer = await source.arrayBuffer();
+      } else if (typeof source === 'string') {
+        const binary = atob(source);
+        const bytes = new Uint8Array(binary.length);
+        for (let i = 0; i < binary.length; i++) {
+          bytes[i] = binary.charCodeAt(i);
+        }
+        buffer = bytes.buffer;
+      }
+
+      if (buffer) {
+        return await this.exactWorkingDecrypt(buffer, effectivePassphrase);
+      }
+
+      throw new Error('Unsupported vault data format');
+    } catch (error) {
+      console.error(' NATIVE DECRYPT: Failed to restore vault:', error);
+      throw error;
+    }
+  }
+
+  peekAsciiString(data) {
+    try {
+      const decoder = new TextDecoder('utf-8', { fatal: false });
+      const decoded = decoder.decode(data);
+      const printable = decoded.replace(/[^\x20-\x7E]/g, ' ').trim();
+      if (!printable) return null;
+      return printable;
+    } catch {
+      return null;
+    }
+  }
+
+  tryParsePlaintextVault(data) {
     try {
+      const decoder = new TextDecoder('utf-8', { fatal: false });
+      const decoded = decoder.decode(data);
+      const trimmed = decoded.trim();
+      if (trimmed.startsWith('{') && trimmed.endsWith('}')) {
+        return JSON.parse(trimmed);
+      }
+      // Base64 fallback
+      const compact = trimmed.replace(/\s+/g, '');
+      if (/^[A-Za-z0-9+/=]+$/.test(compact) && compact.length % 4 === 0) {
+        const binary = atob(compact);
+        const bytes = new Uint8Array(binary.length);
+        for (let i = 0; i < binary.length; i++) {
+          bytes[i] = binary.charCodeAt(i);
+        }
+        const nestedDecoded = decoder.decode(bytes);
+        const nestedTrimmed = nestedDecoded.trim();
+        if (nestedTrimmed.startsWith('{') && nestedTrimmed.endsWith('}')) {
+          return JSON.parse(nestedTrimmed);
+        }
+      }
+    } catch (error) {
+      console.warn('PLAINTEXT DETECTION: Failed to parse plaintext vault:', error);
+    }
+    return null;
+  }
+
+  async hasBrowserBackup() {
+    try {
+      const backup = await this.loadFromIndexedDB();
+      return !!backup;
+    } catch (error) {
+      console.warn('BROWSER BACKUP: Unable to check IndexedDB:', error);
+      return false;
+    }
+  }
+
+  applyNewPassphrase(passphrase) {
+    if (!passphrase) {
+      throw new Error('Passphrase required to re-encrypt vault');
+    }
+    this.passphrase = passphrase;
+    this.cacheSessionPassphrase(passphrase);
+    this.vaultData.encryption = {
+      algorithm: 'AES-GCM',
+      keyDerivation: 'PBKDF2',
+      iterations: 310000,
+      salt: this.generateSalt()
+    };
+  }
+
+  async recoverFromBrowserBackup(passphrase) {
+    const backup = await this.loadFromIndexedDB();
+    if (!backup) {
+      throw new Error('No browser backup found in this browser');
+    }
+
+    this.vaultData = backup;
+    this.isOpen = true;
+    this.applyNewPassphrase(passphrase);
+    const normalizedName = this.ensureVaultMetadataName(
+      this.vaultData.metadata?.name ||
+      this.vaultData.name ||
+      this.originalFileName ||
+      'Recovered Vault'
+    );
+    sessionStorage.setItem('emmaVaultActive', 'true');
+    sessionStorage.setItem('emmaVaultName', normalizedName);
+    localStorage.setItem('emmaVaultActive', 'true');
+    localStorage.setItem('emmaVaultName', normalizedName);
+    await this.saveToIndexedDB();
+    return this.vaultData;
+  }
+async nativeEncryptVault(vaultData, passphrase) {
+    try {
+
+      let activePassphrase = passphrase;
+      if (!activePassphrase || !activePassphrase.trim()) {
+        await this.ensureActivePassphrase('download');
+        activePassphrase = this.passphrase;
+      }
+      activePassphrase = activePassphrase.trim();
+      if (!activePassphrase) {
+        throw new Error('Passphrase required to encrypt vault');
+      }
 
       // Generate encryption salt and IV
       const salt = crypto.getRandomValues(new Uint8Array(32));
@@ -2363,7 +3197,7 @@ class EmmaWebVault {
       // Derive encryption key
       const keyMaterial = await crypto.subtle.importKey(
         'raw',
-        new TextEncoder().encode(passphrase),
+        new TextEncoder().encode(activePassphrase),
         'PBKDF2',
         false,
         ['deriveKey']
@@ -2406,7 +3240,7 @@ class EmmaWebVault {
       return fileData;
 
     } catch (error) {
-      console.error('❌ NATIVE CRYPTO: Encryption failed:', error);
+      console.error(' NATIVE CRYPTO: Encryption failed:', error);
       throw error;
     }
   }
@@ -2439,18 +3273,20 @@ window.emmaAPI = {
           try {
             const decryptedData = await window.emmaWebVault.nativeDecryptVault(vaultData, data.passphrase);
             window.emmaWebVault.vaultData = decryptedData;
-            window.emmaWebVault.passphrase = data.passphrase;
+            window.emmaWebVault.cacheSessionPassphrase(data.passphrase);
             window.emmaWebVault.isOpen = true;
 
             // Set session storage for dashboard
             sessionStorage.setItem('emmaVaultActive', 'true');
             sessionStorage.setItem('emmaVaultName', decryptedData.metadata?.name || decryptedData.name || 'Web Vault');
-            // SECURITY: Never store passphrase in web storage
+            // SECURITY: Passphrase cached in sessionStorage for this tab only
 
-            console.log('✅ Vault unlocked successfully via API!');
-            return { success: true, stats: window.emmaWebVault.getStats() };
+            console.log(' Vault unlocked successfully via API!');
+            const stats = window.emmaWebVault.getStats();
+            await window.emmaWebVault.ensureDirectFileHandle('unlock', { promptOnFailure: false });
+            return { success: true, stats };
           } catch (error) {
-            console.error('❌ Failed to decrypt vault with provided passphrase:', error);
+            console.error(' Failed to decrypt vault with provided passphrase:', error);
             return { success: false, error: 'Incorrect passphrase or corrupted vault data' };
           }
         } else {
@@ -2458,18 +3294,19 @@ window.emmaAPI = {
           window.emmaWebVault.vaultData = vaultData;
           window.emmaWebVault.isOpen = true;
           if (data.passphrase) {
-            window.emmaWebVault.passphrase = data.passphrase;
-            // SECURITY: Never store passphrase in web storage - keep in memory only
+            window.emmaWebVault.cacheSessionPassphrase(data.passphrase);
           }
 
           sessionStorage.setItem('emmaVaultActive', 'true');
           sessionStorage.setItem('emmaVaultName', vaultData.metadata?.name || vaultData.name || 'Web Vault');
 
-          console.log('✅ Vault opened successfully (unencrypted data)!');
-          return { success: true, stats: window.emmaWebVault.getStats() };
+          console.log(' Vault opened successfully (unencrypted data)!');
+          const stats = window.emmaWebVault.getStats();
+          await window.emmaWebVault.ensureDirectFileHandle('unlock', { promptOnFailure: false });
+          return { success: true, stats };
         }
       } catch (error) {
-        console.error('❌ Failed to unlock vault:', error);
+        console.error(' Failed to unlock vault:', error);
         return { success: false, error: error.message };
       }
     },
@@ -2508,7 +3345,7 @@ window.emmaAPI = {
 
           return { success: true, id: mediaId };
         } catch (error) {
-          console.error('❌ Failed to add attachment:', error);
+          console.error(' Failed to add attachment:', error);
           return { success: false, error: error.message };
         }
       },
@@ -2517,7 +3354,7 @@ window.emmaAPI = {
           const res = await window.emmaWebVault.removeMedia(mediaId);
           return { success: res.success };
         } catch (error) {
-          console.error('❌ Failed to remove attachment:', error);
+          console.error(' Failed to remove attachment:', error);
           return { success: false, error: error.message };
         }
       }
@@ -2538,7 +3375,7 @@ window.emmaAPI = {
         const res = await window.emmaWebVault.deleteMemory(memoryId);
         return { success: res.success };
       } catch (error) {
-        console.error('❌ Failed to delete memory:', error);
+        console.error(' Failed to delete memory:', error);
         return { success: false, error: error.message };
       }
     }
@@ -2553,7 +3390,7 @@ window.emmaAPI = {
         const res = await window.emmaWebVault.updatePerson(person);
         return { success: true, person: res.person };
       } catch (error) {
-        console.error('❌ Failed to update person:', error);
+        console.error(' Failed to update person:', error);
         return { success: false, error: error.message };
       }
     },
@@ -2562,7 +3399,7 @@ window.emmaAPI = {
         const res = await window.emmaWebVault.deletePerson(personId);
         return { success: res.success };
       } catch (error) {
-        console.error('❌ Failed to delete person:', error);
+        console.error(' Failed to delete person:', error);
         return { success: false, error: error.message };
       }
     },
@@ -2571,21 +3408,21 @@ window.emmaAPI = {
       try {
         // CLEAN: Direct vault access since vault should exist on all pages now
         if (!window.emmaWebVault) {
-          console.warn('⚠️ EmmaWebVault not available, returning empty people list');
+          console.warn(' EmmaWebVault not available, returning empty people list');
           return { success: true, items: [] };
         }
         
         if (typeof window.emmaWebVault.listPeople !== 'function') {
-          console.warn('⚠️ listPeople method not available, returning empty people list');
+          console.warn(' listPeople method not available, returning empty people list');
           return { success: true, items: [] };
         }
         
-        console.log('👥 API: Calling vault.listPeople()...');
+        console.log(' API: Calling vault.listPeople()...');
         const people = await window.emmaWebVault.listPeople();
-        console.log(`👥 API: Retrieved ${people?.length || 0} people from vault`);
+        console.log(` API: Retrieved ${people?.length || 0} people from vault`);
         return { success: true, items: people || [] };
       } catch (error) {
-        console.error('❌ Failed to list people:', error);
+        console.error(' Failed to list people:', error);
         return { success: false, error: error.message, items: [] };
       }
     },
@@ -2621,7 +3458,7 @@ window.emmaAPI = {
         // Fallback for non-extension mode
         return await window.emmaWebVault.updatePerson(personData);
       } catch (error) {
-        console.error('❌ Failed to update person:', error);
+        console.error(' Failed to update person:', error);
         return { success: false, error: error.message };
       }
     }
@@ -2634,12 +3471,224 @@ window.emmaAPI = {
   }
 };
 
+EmmaWebVault.prototype.executeTool = async function(toolName, params) {
+  switch (toolName) {
+    case 'get_people':
+      return this.listPeople();
+    case 'get_memories':
+      return this.listMemories(params.limit);
+    case 'summarize_memory':
+      // This is a placeholder, as there is no summarizeMemory function in the vault
+      return { summary: `Summary of memory ${params.memoryId}` };
+    case 'create_memory_from_voice':
+    case 'create_memory_capsule':
+      return this.addMemory({ content: params.content, metadata: { people: params.people } });
+    case 'update_person':
+    case 'create_person_profile':
+      return this.addPerson({ name: params.name, relation: params.relationship });
+    case 'update_memory_capsule':
+      return this.updateMemory(params.memoryId, { content: params.content });
+    case 'attach_memory_media':
+      // Placeholder
+      return { success: true };
+    case 'delete_memory':
+      return this.deleteMemory(params.memoryId);
+    case 'delete_person':
+      return this.deletePerson(params.personId);
+    default:
+      throw new Error(`Unsupported tool: ${toolName}`);
+  }
+};
+
+EmmaWebVault.prototype.setAutoSaveEnabled = function(enabled) {
+  this.autoSaveEnabled = !!enabled;
+  if (!this.autoSaveEnabled) {
+    this.pendingChanges = true;
+  }
+};
+
+EmmaWebVault.prototype.updateOriginalFileName = function(fileName) {
+  if (!fileName) {
+    return;
+  }
+
+  this.originalFileName = fileName;
+
+  if (typeof sessionStorage !== 'undefined') {
+    try {
+      sessionStorage.setItem('emmaVaultOriginalFileName', fileName);
+    } catch (_) {}
+  }
+
+  if (typeof localStorage !== 'undefined') {
+    try {
+      localStorage.setItem('emmaVaultOriginalFileName', fileName);
+    } catch (_) {}
+  }
+};
+
+EmmaWebVault.prototype.promptForVaultPassphrase = async function(fileName, options = {}) {
+  const {
+    title = options.title || 'Unlock Vault',
+    message = options.message || `Enter the passphrase for your vault: ${fileName}`,
+    placeholder = options.placeholder || 'Enter vault passphrase...',
+    promptText = options.promptText || `Enter the passphrase for ${fileName}`
+  } = options;
+
+  try {
+    if (window.cleanSecurePasswordModal && typeof window.cleanSecurePasswordModal.show === 'function') {
+      return await window.cleanSecurePasswordModal.show({
+        title,
+        message,
+        placeholder
+      });
+    }
+
+    if (typeof window.showPasswordModal === 'function') {
+      return await window.showPasswordModal(message, 'Passphrase:');
+    }
+  } catch (modalError) {
+    console.error(' PASSCODE MODAL: Failed to collect passphrase:', modalError);
+    return null;
+  }
+
+  return window.prompt(promptText);
+};
+
+EmmaWebVault.prototype.switchVaultToSelectedFile = async function(fileHandle, file, options = {}) {
+  const {
+    passphraseOverride = null,
+    promptTitle,
+    promptMessage,
+    promptPlaceholder,
+    promptText,
+    promptOnFailure = true,
+    source = 'manual'
+  } = options || {};
+
+  console.log(' SWITCH: Starting vault swap', {
+    hasHandle: !!fileHandle,
+    fileProvided: !!file,
+    source
+  });
+
+  const fileBlob = file || (fileHandle && typeof fileHandle.getFile === 'function'
+    ? await fileHandle.getFile()
+    : null);
+
+  if (!fileBlob) {
+    throw new Error('No vault file available to load');
+  }
+  console.log(' SWITCH: File resolved', { name: fileBlob.name, size: fileBlob.size, type: fileBlob.type });
+
+  let passphrase = passphraseOverride;
+  const hasProvidedPassphrase = typeof passphrase === 'string' && passphrase.length > 0 && passphrase.trim().length > 0;
+
+  if (!hasProvidedPassphrase) {
+    passphrase = await this.promptForVaultPassphrase(fileBlob.name, {
+      title: promptTitle || 'Switch Vault',
+      message: promptMessage || `Enter the passphrase to open ${fileBlob.name}`,
+      placeholder: promptPlaceholder || 'Enter vault passphrase...',
+      promptText: promptText || `Enter the passphrase for ${fileBlob.name}`
+    });
+  }
+
+  if (typeof passphrase !== 'string' || passphrase.trim().length === 0) {
+    throw new Error('Passphrase is required to switch vaults');
+  }
+
+  const fileBuffer = await fileBlob.arrayBuffer();
+  console.log(' SWITCH: File buffer ready. Decrypting with native flow...');
+
+  const vaultData = await this.nativeDecryptVault(fileBuffer, passphrase);
+  console.log(' SWITCH: Vault decrypted successfully');
+
+  if (!vaultData || !vaultData.content) {
+    throw new Error('Invalid vault data structure');
+  }
+  console.log(' SWITCH: Vault decrypted. Updating state...', {
+    memoryCount: Object.keys(vaultData.content?.memories || {}).length,
+    peopleCount: Object.keys(vaultData.content?.people || {}).length
+  });
+
+  this.vaultData = vaultData;
+  this.isOpen = true;
+  this.passphrase = passphrase;
+  this.cacheSessionPassphrase(passphrase);
+
+  const normalizedName = this.ensureVaultMetadataName(
+    vaultData.metadata?.name ||
+    vaultData.name ||
+    fileBlob.name ||
+    'Web Vault'
+  );
+
+  try {
+    sessionStorage.setItem('emmaVaultActive', 'true');
+    sessionStorage.setItem('emmaVaultName', normalizedName);
+  } catch (_) {}
+
+  try {
+    localStorage.setItem('emmaVaultActive', 'true');
+    localStorage.setItem('emmaVaultName', normalizedName);
+  } catch (_) {}
+
+  this.updateOriginalFileName(fileBlob.name);
+
+  if (fileHandle) {
+    this.fileHandle = fileHandle;
+    this.needsFileReauth = false;
+  } else if (!this.fileHandle) {
+    this.fileHandle = null;
+  }
+
+  if (!this.fileHandle && typeof this.ensureDirectFileHandle === 'function') {
+    try {
+      await this.ensureDirectFileHandle(`${source}-switch`, { promptOnFailure });
+    } catch (handleError) {
+      console.warn(' FILE-ACCESS: Unable to capture direct file handle after switch:', handleError);
+    }
+  }
+
+  try {
+    await this.saveToIndexedDB();
+    console.log(' SWITCH: Vault saved to IndexedDB after switching files');
+  } catch (idbError) {
+    console.warn(' SWITCH: IndexedDB save failed (non-critical):', idbError);
+  }
+
+  const syncModal = document.querySelector('.emma-sync-error-modal');
+  if (syncModal) syncModal.remove();
+
+  if (window.webVaultStatus && typeof window.webVaultStatus.unlock === 'function') {
+    window.webVaultStatus.unlock(normalizedName);
+  } else {
+    window.currentVaultStatus = {
+      isUnlocked: true,
+      hasVault: true,
+      name: normalizedName
+    };
+  }
+
+  if (this.showToast) {
+    this.showToast(` Switched to ${normalizedName}`, 'success');
+  }
+
+  console.log(' SWITCH: Completed successfully');
+  return true;
+};
+
+EmmaWebVault.prototype.showDirectSaveAffordance = function() {
+  this.needsFileReauth = true;
+  this.promptForFileReauth();
+};
+
 /**
  * Show critical error when .emma file sync is broken
  * EMMA ETHOS: Never silently fail - always inform the user
  */
 EmmaWebVault.prototype.showFileSyncError = function() {
-  console.error('🚨 CRITICAL: .emma file sync broken - showing user error');
+  console.error(' CRITICAL: .emma file sync broken - showing user error');
   
   // Remove any existing sync error modal
   const existing = document.querySelector('.emma-sync-error-modal');
@@ -2672,7 +3721,7 @@ EmmaWebVault.prototype.showFileSyncError = function() {
       text-align: center;
       box-shadow: 0 20px 40px rgba(0,0,0,0.3);
     ">
-      <div style="font-size: 48px; margin-bottom: 20px;">🚨</div>
+      <div style="font-size: 48px; margin-bottom: 20px;"></div>
       <h2 style="margin: 0 0 20px 0; font-size: 24px;">CRITICAL: .emma File Access Lost</h2>
       <p style="margin: 0 0 30px 0; font-size: 16px; line-height: 1.5; opacity: 0.9;">
         Your memories cannot be saved to your .emma file right now. This means your memories 
@@ -2689,7 +3738,7 @@ EmmaWebVault.prototype.showFileSyncError = function() {
         font-weight: 600;
         cursor: pointer;
         margin-right: 15px;
-      ">🔗 Restore File Access</button>
+      "> Restore File Access</button>
       <button id="cancel-save" style="
         background: transparent;
         color: white;
@@ -2711,7 +3760,7 @@ EmmaWebVault.prototype.showFileSyncError = function() {
       if (restored) {
         modal.remove();
         // Show success and retry the save operation
-        this.showToast && this.showToast('✅ File access restored! Saving to .emma file...', 'success');
+        this.showToast && this.showToast(' File access restored! Saving to .emma file...', 'success');
         // The autoSave will retry automatically
       } else {
         window.emmaError('Could not restore file access. Please ensure you select the correct .emma file.', {
@@ -2736,4 +3785,5 @@ EmmaWebVault.prototype.showFileSyncError = function() {
 };
 
 // Emma Web Vault System ready for production
-console.log('🌟 Emma Web Vault System ready - preserving memories with love! 💜');
+console.log(' Emma Web Vault System ready - preserving memories with love! ');
+
diff --git a/js/experience-popup-base.js b/js/experience-popup-base.js
index 0f31ba30..6e11f0b2 100644
--- a/js/experience-popup-base.js
+++ b/js/experience-popup-base.js
@@ -20,6 +20,7 @@ class ExperiencePopup {
 
     this.element = this.createElement();
     document.body.appendChild(this.element);
+    document.body.classList.add('modal-open');
     
     // Animate in
     requestAnimationFrame(() => {
@@ -82,6 +83,9 @@ class ExperiencePopup {
     // Cleanup
     this.cleanup();
     console.log('🔵 SIMPLIFIED Close: Complete');
+    if (!document.querySelector('.emma-experience-popup')) {
+      document.body.classList.remove('modal-open');
+    }
   }
 
   /**
@@ -94,8 +98,10 @@ class ExperiencePopup {
     popup.className = 'emma-experience-popup';
     
     // MOBILE RESPONSIVENESS: Detect mobile and adjust positioning
-    const isMobile = window.innerWidth <= 768;
-    const isTablet = window.innerWidth > 768 && window.innerWidth <= 1024;
+    const viewportWidth = window.visualViewport ? window.visualViewport.width : window.innerWidth;
+    const viewportHeight = window.visualViewport ? window.visualViewport.height : window.innerHeight;
+    const isMobile = viewportWidth <= 768;
+    const isTablet = viewportWidth > 768 && viewportWidth <= 1024;
     
     let finalPosition = { ...this.position };
     
@@ -104,22 +110,22 @@ class ExperiencePopup {
       finalPosition = {
         left: 12,
         top: 24,
-        width: window.innerWidth - 24,
-        height: window.innerHeight - 48
+        width: viewportWidth - 24,
+        height: viewportHeight - 48
       };
     } else if (isTablet) {
       // Tablet: Larger but not full screen
       finalPosition = {
-        left: Math.max(20, (window.innerWidth - Math.min(this.position.width, 700)) / 2),
-        top: Math.max(20, (window.innerHeight - Math.min(this.position.height, 600)) / 2),
+        left: Math.max(20, (viewportWidth - Math.min(this.position.width, 700)) / 2),
+        top: Math.max(20, (viewportHeight - Math.min(this.position.height, 600)) / 2),
         width: Math.min(this.position.width, 700),
         height: Math.min(this.position.height, 600)
       };
     } else {
       // Desktop: Ensure it fits within viewport
       finalPosition = {
-        left: Math.max(8, Math.min(window.innerWidth - this.position.width - 8, this.position.left)),
-        top: Math.max(8, Math.min(window.innerHeight - this.position.height - 8, this.position.top)),
+        left: Math.max(8, Math.min(viewportWidth - this.position.width - 8, this.position.left)),
+        top: Math.max(8, Math.min(viewportHeight - this.position.height - 8, this.position.top)),
         width: this.position.width,
         height: this.position.height
       };
@@ -134,11 +140,11 @@ class ExperiencePopup {
       top: ${finalPosition.top}px;
       width: ${finalPosition.width}px;
       height: ${finalPosition.height}px;
-      background: linear-gradient(145deg, rgba(139, 92, 246, 0.15), rgba(240, 147, 251, 0.10));
-      border: 2px solid rgba(139, 92, 246, 0.3);
+      background: linear-gradient(145deg, rgba(111, 99, 217, 0.15), rgba(222, 179, 228, 0.10));
+      border: 2px solid rgba(111, 99, 217, 0.3);
       border-radius: ${isMobile ? '16px' : '24px'};
       backdrop-filter: blur(20px);
-      box-shadow: 0 24px 80px rgba(139, 92, 246, 0.4);
+      box-shadow: 0 24px 80px rgba(111, 99, 217, 0.4);
       z-index: 10000;
       opacity: 0;
       transform: translateY(-10px) scale(0.95);
@@ -146,11 +152,15 @@ class ExperiencePopup {
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
       color: white;
       overflow: hidden;
+      display: flex;
+      flex-direction: column;
       ${isMobile ? '' : 'resize: both;'}
       min-width: ${isMobile ? 'auto' : '400px'};
       min-height: ${isMobile ? 'auto' : '300px'};
       max-width: calc(100vw - ${isMobile ? '24px' : '16px'});
       max-height: calc(100vh - ${isMobile ? '48px' : '16px'});
+      max-height: calc(100dvh - ${isMobile ? '48px' : '16px'});
+      padding-bottom: env(safe-area-inset-bottom, 0);
     `;
 
     // Create header
@@ -172,6 +182,22 @@ class ExperiencePopup {
     `;
     title.textContent = this.getTitle();
 
+    const headerLeft = document.createElement('div');
+    headerLeft.className = 'popup-header-left';
+    headerLeft.style.cssText = `
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      flex: 1 1 auto;
+      min-width: 0;
+    `;
+    headerLeft.appendChild(title);
+
+    const headerActions = (this.getHeaderActions() || []).filter(Boolean);
+    for (const action of headerActions) {
+      headerLeft.appendChild(action);
+    }
+
     const closeBtn = document.createElement('button');
     closeBtn.innerHTML = '×';
     closeBtn.style.cssText = `
@@ -221,17 +247,21 @@ class ExperiencePopup {
       }
     };
 
-    header.appendChild(title);
+    header.appendChild(headerLeft);
     header.appendChild(closeBtn);
 
     // Customize header appearance based on title
     const titleText = this.getTitle();
+    const hasActions = headerActions.length > 0;
     if (!titleText || titleText.trim() === '') {
-      // No title - just show close button with no border/padding
-      header.style.borderBottom = 'none';
-      header.style.padding = '8px 12px 0 0';
-      header.style.justifyContent = 'flex-end';
       title.style.display = 'none';
+      if (!hasActions) {
+        // No title or actions - collapse header to just the close button
+        header.style.borderBottom = 'none';
+        header.style.padding = '8px 12px 0 0';
+        header.style.justifyContent = 'flex-end';
+        headerLeft.style.display = 'none';
+      }
     }
 
     // Create content area
@@ -250,8 +280,10 @@ class ExperiencePopup {
     
     content.style.cssText = `
       padding: ${contentPadding};
-      height: auto;
-      overflow: visible;
+      flex: 1 1 auto;
+      min-height: 0;
+      overflow-y: auto;
+      overflow-x: hidden;
       box-sizing: border-box;
     `;
 
@@ -326,6 +358,10 @@ class ExperiencePopup {
     contentElement.innerHTML = '<p>Experience content goes here</p>';
   }
 
+  getHeaderActions() {
+    return [];
+  }
+
   async initialize() {
     // Override in subclasses for initialization logic
   }
diff --git a/js/memories.js b/js/memories.js
index 75f80b28..44b6d1d4 100644
--- a/js/memories.js
+++ b/js/memories.js
@@ -1,4 +1,4 @@
-// js/memories.js - External JavaScript for memory gallery
+// js/memories.js - External JavaScript for memory gallery
 // Desktop shim: prefer Electron bridge if available
 // eslint-disable-next-line no-unused-vars
 const chrome = (typeof window !== 'undefined' && (window.chromeShim || window.chrome)) || undefined;
@@ -8,11 +8,68 @@ console.log('🔥🔥🔥 CACHE BUST DEBUG: memories.js RELOADED at', new Date()
 // Timer manager will be loaded dynamically to avoid module errors
 let timerManager = null;
 
+let emmaChatLoaderPromise = null;
+
+function resolveEmmaChatScriptUrl() {
+  const existing = document.querySelector('script[src*="emma-chat-experience.js"]');
+  if (existing && existing.src) {
+    return existing.src;
+  }
+
+  try {
+    return new URL('../js/emma-chat-experience.js', window.location.href).href;
+  } catch (_) {
+    return new URL('js/emma-chat-experience.js', window.location.href).href;
+  }
+}
+
+function ensureEmmaChatExperienceLoaded() {
+  if (typeof EmmaChatExperience !== 'undefined') {
+    return Promise.resolve();
+  }
+
+  if (emmaChatLoaderPromise) {
+    return emmaChatLoaderPromise;
+  }
+
+  emmaChatLoaderPromise = new Promise((resolve, reject) => {
+    const existing = document.querySelector('script[src*="emma-chat-experience.js"]');
+    if (existing) {
+      const isLoaded = existing.dataset.loaded === 'true' || existing.readyState === 'complete' || existing.readyState === 'loaded';
+      if (isLoaded) {
+        resolve();
+        return;
+      }
+
+      existing.addEventListener('load', () => {
+        existing.dataset.loaded = 'true';
+        resolve();
+      }, { once: true });
+      existing.addEventListener('error', () => reject(new Error('Failed to load EmmaChatExperience script')), { once: true });
+      return;
+    }
+
+    const script = document.createElement('script');
+    script.src = resolveEmmaChatScriptUrl();
+    script.async = true;
+    script.onload = () => {
+      script.dataset.loaded = 'true';
+      resolve();
+    };
+    script.onerror = () => reject(new Error('Failed to load EmmaChatExperience script'));
+    document.head.appendChild(script);
+  }).finally(() => {
+    emmaChatLoaderPromise = null;
+  });
+
+  return emmaChatLoaderPromise;
+}
+
 // Create a simple timer manager for this context
 const simpleTimerManager = {
   timers: new Set(),
   setTimeout(callback, delay, context = 'unknown') {
-    const id = setTimeout(() => {
+    const id = setTimeout(async () => {
       try {
         callback();
       } catch (error) {
@@ -865,7 +922,7 @@ function showNotification(message, type = 'success') {
   notification.textContent = message;
   document.body.appendChild(notification);
 
-  simpleTimerManager.setTimeout(() => {
+  simpleTimerManager.setTimeout(async () => {
     notification.style.animation = 'slideOut 0.3s ease';
     simpleTimerManager.setTimeout(() => notification.remove(), 300, 'notification_remove');
   }, 3000, 'notification_hide');
@@ -895,7 +952,7 @@ async function offerHMLSyncForTaggedPeople(peopleWithFingerprints, memoryId) {
         showNotification('HML identity created! You can now sync with people.', 'success');
 
         // Now retry the sync offer
-        setTimeout(() => {
+        setTimeout(async () => {
           offerHMLSyncForTaggedPeople(peopleWithFingerprints, memoryId);
         }, 1000);
 
@@ -972,7 +1029,7 @@ async function offerHMLSyncForTaggedPeople(peopleWithFingerprints, memoryId) {
       showNotification(successMsg, 'success');
 
       // Show helpful next steps
-      setTimeout(() => {
+      setTimeout(async () => {
         alert(`Vault sharing complete! 🎉\n\nNext steps:\n1. The tagged people will receive vault invitations\n2. Once they accept, this memory will sync to their devices\n3. You can collaborate on memories together\n\nNote: Make sure they have added your fingerprint in their HML Sync settings too!`);
       }, 2000);
     }
@@ -1070,6 +1127,14 @@ async function loadConstellationView() {
 
   grid.innerHTML = '';
 
+  try {
+    const touchDevice = (navigator.maxTouchPoints || 0) > 1;
+    const compactViewport = window.matchMedia('(max-width: 900px)').matches;
+    if (touchDevice || compactViewport) {
+      document.body.classList.add('performance-lite');
+    }
+  } catch {}
+
   // Fetch memories using same vault → background → local order
   let items = [];
   try {
@@ -1123,6 +1188,14 @@ async function loadConstellationView() {
     return;
   }
 
+  const isCompactViewport = window.matchMedia('(max-width: 768px)').matches;
+  const MAX_MOBILE_ITEMS = 220;
+  if (isCompactViewport && items.length > MAX_MOBILE_ITEMS) {
+    const step = Math.ceil(items.length / MAX_MOBILE_ITEMS);
+    items = items.filter((_, idx) => idx % step === 0);
+    console.log(`Constellation: trimmed records for mobile viewport using step ${step}`);
+  }
+
   // Sort by time for subtle adjacency edges
   items.sort((a, b) => (a.timestamp || 0) - (b.timestamp || 0));
 
@@ -1133,12 +1206,12 @@ async function loadConstellationView() {
   const wrap = document.createElement('div');
   wrap.style.position = 'relative';
   wrap.style.width = '100%';
-  wrap.style.height = '68vh';
-  wrap.style.minHeight = '420px';
+  wrap.style.height = isCompactViewport ? '60vh' : '68vh';
+  wrap.style.minHeight = isCompactViewport ? '320px' : '420px';
   wrap.style.border = '1px solid var(--emma-border)';
   wrap.style.borderRadius = '16px';
   wrap.style.background = 'var(--emma-card-bg)';
-  wrap.style.backdropFilter = 'blur(20px)';
+  wrap.style.backdropFilter = isCompactViewport ? 'blur(10px)' : 'blur(20px)';
 
   const canvas = document.createElement('canvas');
   canvas.style.width = '100%';
@@ -1171,7 +1244,7 @@ async function loadConstellationView() {
   controls.style.border = '1px solid var(--emma-border)';
   controls.style.borderRadius = '10px';
   controls.style.padding = '6px 8px';
-  controls.style.backdropFilter = 'blur(8px)';
+  controls.style.backdropFilter = isCompactViewport ? 'blur(4px)' : 'blur(8px)';
   controls.innerHTML = `
     <label style="font-size:12px; color:#e9d5ff; display:flex; align-items:center; gap:6px;">
       Cluster:
@@ -1211,6 +1284,7 @@ async function loadConstellationView() {
     const rect = canvas.getBoundingClientRect();
     canvas.width = Math.max(1, Math.floor(rect.width * dpr));
     canvas.height = Math.max(1, Math.floor(rect.height * dpr));
+    layoutDirty = true;
     draw();
   }
   window.addEventListener('resize', resize);
@@ -1222,6 +1296,7 @@ async function loadConstellationView() {
   };
   const nodeRadius = 6;
   const positions = new Map();
+  let layoutDirty = true;
   let clusterMode = 'none';
 
   function groupItems() {
@@ -1248,7 +1323,7 @@ async function loadConstellationView() {
     return { groups: top.map(([key, arr]) => ({ key, items: arr })) };
   }
 
-  function layout() {
+  function computeLayout() {
     positions.clear();
     const n = items.length;
     const minTs = items[0].timestamp || 0;
@@ -1290,6 +1365,12 @@ async function loadConstellationView() {
     }
   }
 
+  function ensureLayout() {
+    if (!layoutDirty) return;
+    computeLayout();
+    layoutDirty = false;
+  }
+
   // Edges: connect neighbors by time
   const edges = [];
   for (let i = 0; i < items.length - 1; i++) {
@@ -1351,7 +1432,7 @@ async function loadConstellationView() {
     ctx.translate(view.tx, view.ty);
     ctx.scale(view.scale, view.scale);
 
-    layout();
+    ensureLayout();
     const rect = canvas.getBoundingClientRect();
     const c2x = rect.width / 2, c2y = rect.height / 2;
 
@@ -1387,6 +1468,7 @@ async function loadConstellationView() {
   }
 
   function hitTest(mx, my) {
+    ensureLayout();
     const xw = (mx - view.tx);
     const yw = (my - view.ty);
     const wx = xw / view.scale;
@@ -1550,7 +1632,11 @@ async function loadConstellationView() {
   }, { passive: false });
 
   const clusterSelect = controls.querySelector('#cluster-mode');
-  clusterSelect.addEventListener('change', () => { clusterMode = clusterSelect.value; draw(); });
+  clusterSelect.addEventListener('change', () => {
+    clusterMode = clusterSelect.value;
+    layoutDirty = true;
+    draw();
+  });
   
   // 🔍 ZOOM CONTROLS: Simple buttons for dementia-friendly navigation
   const zoomInBtn = controls.querySelector('#zoom-in');
@@ -1598,6 +1684,8 @@ async function loadConstellationView() {
 
   // 🎯 AUTO-FIT: Calculate optimal zoom to show all memories elegantly
   function fitAllMemories() {
+    ensureLayout();
+
     if (items.length === 0) {
       // No memories, just center the view
       view.targetScale = 1;
@@ -1920,7 +2008,14 @@ async function openGuardianshipModal() {
           const input = list.querySelectorAll('input')[idx];
           const w = window.open('', '_blank');
           if (!w) return;
-          w.document.write(`<!doctype html><title>Emma Vault Share #${idx+1}</title><body style=\"font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial; padding:24px\"><h2>Emma Vault Recovery Share #${idx+1}</h2><p>Keep this safe. Share only with trusted guardians.</p><pre style=\"white-space:pre-wrap;word-break:break-all;border:1px solid #ccc;padding:12px;border-radius:8px\">${input.value}</pre></body>`);
+          const escapeHtml = (s) => String(s)
+            .replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            .replace(/"/g, '&quot;')
+            .replace(/'/g, '&#39;');
+          const safeValue = escapeHtml(input.value);
+          w.document.write(`<!doctype html><title>Emma Vault Share #${idx+1}</title><body style=\"font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial; padding:24px\"><h2>Emma Vault Recovery Share #${idx+1}</h2><p>Keep this safe. Share only with trusted guardians.</p><pre style=\"white-space:pre-wrap;word-break:break-all;border:1px solid #ccc;padding:12px;border-radius:8px\">${safeValue}</pre></body>`);
           w.document.close(); w.focus(); w.print();
         }));
         list.querySelectorAll('button.qr').forEach(btn => btn.addEventListener('click', async () => {
@@ -2244,9 +2339,9 @@ function showNotification(message, type = 'info', duration = 3000) {
   setTimeout(() => notification.style.opacity = '1', 10);
 
   // Remove after duration
-  setTimeout(() => {
+  setTimeout(async () => {
     notification.style.opacity = '0';
-    setTimeout(() => {
+    setTimeout(async () => {
       if (notification.parentNode) {
         notification.parentNode.removeChild(notification);
       }
@@ -2362,7 +2457,7 @@ function showResponsiveMemoryDialog(memory) {
       }
       
       .responsive-memory-container {
-        background: linear-gradient(135deg, rgba(139, 92, 246, 0.95) 0%, rgba(124, 58, 237, 0.95) 50%, rgba(109, 40, 217, 0.95) 100%);
+        background: linear-gradient(135deg, rgba(111, 99, 217, 0.95) 0%, rgba(124, 58, 237, 0.95) 50%, rgba(109, 40, 217, 0.95) 100%);
         border-radius: clamp(16px, 3vw, 24px);
         max-width: 95vw;
         max-height: 95vh;
@@ -2543,7 +2638,7 @@ function showResponsiveMemoryDialog(memory) {
         border: 3px solid rgba(255, 255, 255, 0.9);
         overflow: hidden;
         position: relative;
-        background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
+        background: linear-gradient(135deg, #6f63d9 0%, #d06fa8 100%);
         display: flex;
         flex-direction: column;
         align-items: center;
@@ -2554,13 +2649,13 @@ function showResponsiveMemoryDialog(memory) {
         transition: all 0.3s ease;
         cursor: pointer;
         text-align: center;
-        box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
+        box-shadow: 0 4px 12px rgba(111, 99, 217, 0.3);
       }
       
       .memory-person-avatar:hover {
         transform: scale(1.05);
         border-color: white;
-        box-shadow: 0 6px 20px rgba(139, 92, 246, 0.5);
+        box-shadow: 0 6px 20px rgba(111, 99, 217, 0.5);
       }
       
       .memory-person-avatar img {
@@ -2680,7 +2775,7 @@ function showResponsiveMemoryDialog(memory) {
       
       .action-btn.primary {
         background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
-        color: #8b5cf6;
+        color: #6f63d9;
         border: 2px solid rgba(255, 255, 255, 0.3);
       }
       
@@ -2823,7 +2918,7 @@ function showResponsiveMemoryDialog(memory) {
   document.body.appendChild(dialog);
   
   // Animate in
-  setTimeout(() => {
+  setTimeout(async () => {
     dialog.style.opacity = '1';
     // Load people avatars if needed
     loadConstellationPeopleAvatars(memory);
@@ -2966,28 +3061,30 @@ function editConstellationMemory(memoryId) {
     backgroundDialog.style.transition = 'opacity 0.2s ease';
     
     // Wait for fade-out, then remove and open edit modal
-    setTimeout(() => {
+    setTimeout(async () => {
       backgroundDialog.remove();
       
       // Ensure constellation interactions are properly disabled
       document.body.classList.add('modal-open');
       
-      // Now open edit modal after background is completely gone
-      if (typeof EmmaChatExperience !== 'undefined') {
+      try {
+        await ensureEmmaChatExperienceLoaded();
         const tempChatExperience = new EmmaChatExperience();
         tempChatExperience.editMemoryDetails(memoryId);
-      } else {
-        console.error('❌ EmmaChatExperience not available');
+      } catch (error) {
+        console.error('❌ EmmaChatExperience not available', error);
       }
     }, 200);
   } else {
     // No background dialog - proceed directly
-    if (typeof EmmaChatExperience !== 'undefined') {
-      const tempChatExperience = new EmmaChatExperience();
-      tempChatExperience.editMemoryDetails(memoryId);
-    } else {
-      console.error('❌ EmmaChatExperience not available');
-    }
+    ensureEmmaChatExperienceLoaded()
+      .then(() => {
+        const tempChatExperience = new EmmaChatExperience();
+        tempChatExperience.editMemoryDetails(memoryId);
+      })
+      .catch((error) => {
+        console.error('❌ EmmaChatExperience not available', error);
+      });
   }
 }
 
@@ -3012,7 +3109,7 @@ function shareConstellationMemory(memoryId) {
         position: fixed;
         top: 20px;
         right: 20px;
-        background: rgba(139, 92, 246, 0.95);
+        background: rgba(111, 99, 217, 0.95);
         color: white;
         padding: 12px 20px;
         border-radius: 8px;
@@ -3036,7 +3133,7 @@ function closeMemoryDetail() {
       document.removeEventListener('keydown', modal._escapeHandler);
     }
 
-      setTimeout(() => {
+      setTimeout(async () => {
       modal.remove();
     }, 300);
   }
@@ -3396,7 +3493,7 @@ function renderPeople(list) {
     <div class="people-grid">${list.map(p => {
       const initials = (p.name || '?').split(' ').map(n => n[0]).join('').slice(0,2).toUpperCase();
       const avatar = p.profilePicture ? `<img src="${p.profilePicture}" style="width:100%; height:100%; object-fit:cover; border-radius:50%"/>` : initials;
-      const perm = p.permission ? `<span class=\"chip\" style=\"margin-left:8px; border:1px solid rgba(134,88,255,.3); background:rgba(134,88,255,.1); color:#8658ff; border-radius:999px; padding:2px 8px; font-size:11px;\">${p.permission}</span>` : '';
+      const perm = p.permission ? `<span class=\"chip\" style=\"margin-left:8px; border:1px solid rgba(111,99,217,.3); background:rgba(111,99,217,.1); color:#6f63d9; border-radius:999px; padding:2px 8px; font-size:11px;\">${p.permission}</span>` : '';
       return `
         <div class=\"person-card clickable-person\" data-person-id=\"${p.id}\" style=\"cursor: pointer; transition: background-color 0.2s ease;\">
           <div class=\"person-avatar\">${avatar}</div>
@@ -3406,9 +3503,9 @@ function renderPeople(list) {
           </div>
         </div>`;
     }).join('')}
-      <div class=\"person-card add-more-people\" style=\"cursor: pointer; transition: background-color 0.2s ease; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 2px dashed rgba(134,88,255,0.3); background: rgba(134,88,255,0.05);\">
-        <div style=\"width:50px; height:50px; background:rgba(134,88,255,0.2); border-radius:50%; display:flex; align-items:center; justify-content:center; color:#8658ff; font-size:24px; margin-bottom:8px;\">+</div>
-        <div style=\"font-weight:600; color:#8658ff; text-align:center; font-size:12px;\">Add More People</div>
+      <div class=\"person-card add-more-people\" style=\"cursor: pointer; transition: background-color 0.2s ease; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 2px dashed rgba(111,99,217,0.3); background: rgba(111,99,217,0.05);\">
+        <div style=\"width:50px; height:50px; background:rgba(111,99,217,0.2); border-radius:50%; display:flex; align-items:center; justify-content:center; color:#6f63d9; font-size:24px; margin-bottom:8px;\">+</div>
+        <div style=\"font-weight:600; color:#6f63d9; text-align:center; font-size:12px;\">Add More People</div>
       </div>
     </div>
   `;
@@ -3488,7 +3585,7 @@ function wirePeopleActions(host) {
 
     // Add hover effect
     card.addEventListener('mouseenter', () => {
-      card.style.backgroundColor = 'rgba(134, 88, 255, 0.1)';
+      card.style.backgroundColor = 'rgba(111, 99, 217, 0.1)';
     });
     card.addEventListener('mouseleave', () => {
       card.style.backgroundColor = '';
@@ -3514,12 +3611,12 @@ function wirePeopleActions(host) {
 
     // Add hover effect
     addMorePeopleBtn.addEventListener('mouseenter', () => {
-      addMorePeopleBtn.style.backgroundColor = 'rgba(134, 88, 255, 0.1)';
-      addMorePeopleBtn.style.borderColor = 'rgba(134, 88, 255, 0.5)';
+      addMorePeopleBtn.style.backgroundColor = 'rgba(111, 99, 217, 0.1)';
+      addMorePeopleBtn.style.borderColor = 'rgba(111, 99, 217, 0.5)';
     });
     addMorePeopleBtn.addEventListener('mouseleave', () => {
-      addMorePeopleBtn.style.backgroundColor = 'rgba(134, 88, 255, 0.05)';
-      addMorePeopleBtn.style.borderColor = 'rgba(134, 88, 255, 0.3)';
+      addMorePeopleBtn.style.backgroundColor = 'rgba(111, 99, 217, 0.05)';
+      addMorePeopleBtn.style.borderColor = 'rgba(111, 99, 217, 0.3)';
     });
   }
 }
@@ -3563,7 +3660,7 @@ async function openAddPeopleModal() {
       const initials = (person.name || '?').split(' ').map(n => n[0]).join('').slice(0,2).toUpperCase();
       const avatar = person.profilePicture
         ? `<img src="${person.profilePicture}" style="width:60px; height:60px; object-fit:cover; border-radius:50%;"/>`
-        : `<div style="width:60px; height:60px; background:#8658ff; border-radius:50%; display:flex; align-items:center; justify-content:center; color:white; font-size:18px; font-weight:600;">${initials}</div>`;
+        : `<div style="width:60px; height:60px; background:#6f63d9; border-radius:50%; display:flex; align-items:center; justify-content:center; color:white; font-size:18px; font-weight:600;">${initials}</div>`;
 
       // Show HML sync capability if person has fingerprint
       const hasFingerprint = person.keyFingerprint || person.fingerprint;
@@ -3621,8 +3718,8 @@ async function openAddPeopleModal() {
         } else {
           // Select
           selectedPeople.add(personId);
-          card.style.borderColor = '#8658ff';
-          card.style.backgroundColor = 'rgba(134,88,255,0.1)';
+          card.style.borderColor = '#6f63d9';
+          card.style.backgroundColor = 'rgba(111,99,217,0.1)';
         }
 
         // Update confirm button state
@@ -3640,7 +3737,7 @@ async function openAddPeopleModal() {
       // Add hover effect
       card.addEventListener('mouseenter', () => {
         if (!selectedPeople.has(card.dataset.personId)) {
-          card.style.backgroundColor = 'rgba(134,88,255,0.05)';
+          card.style.backgroundColor = 'rgba(111,99,217,0.05)';
         }
       });
       card.addEventListener('mouseleave', () => {
@@ -3686,7 +3783,7 @@ async function openAddPeopleModal() {
 
           // Offer HML sync if people have fingerprints
           if (peopleWithFingerprints.length > 0) {
-            setTimeout(() => {
+            setTimeout(async () => {
               offerHMLSyncForTaggedPeople(peopleWithFingerprints, window._currentMemoryId);
             }, 1000);
           }
@@ -3743,7 +3840,7 @@ async function openPersonModal(personId) {
     const initials = (person.name || '?').split(' ').map(n => n[0]).join('').slice(0,2).toUpperCase();
     const avatar = person.profilePicture
       ? `<img src="${person.profilePicture}" style="width:80px; height:80px; object-fit:cover; border-radius:50%; margin-bottom:16px;"/>`
-      : `<div style="width:80px; height:80px; background:#8658ff; border-radius:50%; display:flex; align-items:center; justify-content:center; color:white; font-size:24px; font-weight:600; margin-bottom:16px;">${initials}</div>`;
+      : `<div style="width:80px; height:80px; background:#6f63d9; border-radius:50%; display:flex; align-items:center; justify-content:center; color:white; font-size:24px; font-weight:600; margin-bottom:16px;">${initials}</div>`;
 
     modal.innerHTML = `
       <div class="memory-detail-overlay"></div>
@@ -3763,8 +3860,8 @@ async function openPersonModal(personId) {
           ${person.phone ? `<div style="margin-bottom:12px;"><strong>Phone:</strong> ${escapeHtml(person.phone)}</div>` : ''}
           ${person.notes ? `<div style="margin-bottom:12px;"><strong>Notes:</strong> ${escapeHtml(person.notes)}</div>` : ''}
           ${person.keyFingerprint ? `
-            <div style="margin-top:20px; padding:16px; background:rgba(134,88,255,0.1); border:1px solid rgba(134,88,255,0.3); border-radius:8px;">
-              <strong style="color:#8658ff;">Cryptographic Identity</strong><br/>
+            <div style="margin-top:20px; padding:16px; background:rgba(111,99,217,0.1); border:1px solid rgba(111,99,217,0.3); border-radius:8px;">
+              <strong style="color:#6f63d9;">Cryptographic Identity</strong><br/>
               <code style="font-size:12px; color:#ffffff; word-break:break-all;">${escapeHtml(person.keyFingerprint)}</code>
             </div>
           ` : ''}
@@ -3788,7 +3885,7 @@ async function openPersonModal(personId) {
     const viewFullBtn = modal.querySelector('.person-view-full');
     if (viewFullBtn) {
       viewFullBtn.addEventListener('click', () => {
-        window.open(`people.html#person-${person.id}`, '_blank');
+        window.open(`people-emma.html?person=${person.id}`, '_blank');
       });
     }
 
@@ -4167,7 +4264,7 @@ function closeMemoryDetail() {
       document.removeEventListener('keydown', modal._escapeHandler);
     }
 
-    setTimeout(() => {
+    setTimeout(async () => {
       modal.remove();
     }, 300);
   }
@@ -4227,6 +4324,15 @@ document.addEventListener('DOMContentLoaded', () => {
     }
   });
 
+  window.addEventListener('emmaMemoryDeleted', (event) => {
+    console.log('🗑️ CONSTELLATION: Memory deleted event received, refreshing...');
+    if (isConstellation || window.location.search.includes('constellation')) {
+      setTimeout(() => loadConstellationView(), 500);
+    } else {
+      refreshMemories();
+    }
+  });
+
   // Set up event listeners
   const searchInput = document.getElementById('search-input');
   if (searchInput) searchInput.addEventListener('input', filterMemories);
@@ -4513,7 +4619,7 @@ function openCreateWizardModal() {
       .emma-wiz-body { padding: 16px 16px 8px 16px; max-height: 70vh; overflow: auto; }
       .emma-wiz-footer { padding: 12px 16px; border-top: 1px solid rgba(255,255,255,0.08); display:flex; justify-content: space-between; gap: 8px; }
       .emma-wiz-steps { height: 4px; background: rgba(255,255,255,0.08); border-radius: 999px; overflow: hidden; margin-top: 8px; }
-      .emma-wiz-progress { height: 100%; width: 33%; background: var(--emma-gradient-1, linear-gradient(135deg,#667eea,#764ba2 50%,#f093fb)); transition: width .25s ease; }
+      .emma-wiz-progress { height: 100%; width: 33%; background: var(--emma-gradient-1, linear-gradient(135deg,#667eea,#764ba2 50%,#deb3e4)); transition: width .25s ease; }
       .emma-field { display:grid; gap:6px; margin-bottom: 12px; }
       .emma-field label { font-size: 12px; color: var(--emma-text-secondary, rgba(255,255,255,0.7)); }
       .emma-input, .emma-textarea, .emma-select { border-radius: 10px; border: 1px solid var(--emma-border, rgba(255,255,255,0.12)); background: rgba(255,255,255,0.06); color: var(--emma-text, #fff); padding: 10px 12px; font: inherit; }
@@ -4777,4 +4883,5 @@ function openCreateWizardModal() {
       btnCreate.disabled = false; btnNext.disabled = false; btnBack.disabled = false;
     }
   }
-}
\ No newline at end of file
+}
+
diff --git a/js/memory-context-analyzer.js b/js/memory-context-analyzer.js
index 18b942e1..71e37870 100644
--- a/js/memory-context-analyzer.js
+++ b/js/memory-context-analyzer.js
@@ -1,9 +1,9 @@
 /**
  * 🧠 Emma Memory Context Analyzer
- * 
+ *
  * Analyzes existing memories to generate contextual, personalized questions
  * CTO Quality Standard: Production-grade AI-powered memory intelligence
- * 
+ *
  * Core Intelligence:
  * - Pattern recognition across memory themes
  * - People and relationship mapping
@@ -16,7 +16,7 @@ class MemoryContextAnalyzer {
     this.memoryCache = [];
     this.analysisCache = null;
     this.lastAnalysisTime = null;
-    
+
     console.log('🧠 MemoryContextAnalyzer: Initialized');
   }
 
@@ -27,10 +27,10 @@ class MemoryContextAnalyzer {
   async analyzeExistingMemories() {
     try {
       console.log('🔍 MemoryContextAnalyzer: Starting memory analysis...');
-      
+
       // Load all memories from vault
       const memories = await this.loadAllMemories();
-      
+
       if (!memories || memories.length === 0) {
         console.log('🔍 No existing memories found - using standard questions');
         return this.getStandardAnalysis();
@@ -80,9 +80,9 @@ class MemoryContextAnalyzer {
 
       // Fallback to extension storage
       if (window.chrome?.runtime) {
-        const result = await chrome.runtime.sendMessage({ 
-          action: 'memory.list', 
-          limit: 1000 
+        const result = await chrome.runtime.sendMessage({
+          action: 'memory.list',
+          limit: 1000
         });
         if (result?.success && result?.memories) {
           return result.memories;
@@ -110,19 +110,19 @@ class MemoryContextAnalyzer {
   analyzeThemes(memories) {
     const themes = {};
     const commonThemes = [
-      'family', 'travel', 'holidays', 'childhood', 'school', 'work', 
+      'family', 'travel', 'holidays', 'childhood', 'school', 'work',
       'friends', 'love', 'achievement', 'loss', 'celebration', 'tradition',
       'home', 'food', 'music', 'nature', 'pets', 'hobbies'
     ];
 
     memories.forEach(memory => {
       const text = `${memory.title || ''} ${memory.description || ''} ${memory.content || ''}`.toLowerCase();
-      
+
       // Check for theme keywords
       commonThemes.forEach(theme => {
         const themeKeywords = this.getThemeKeywords(theme);
         const matches = themeKeywords.filter(keyword => text.includes(keyword)).length;
-        
+
         if (matches > 0) {
           themes[theme] = (themes[theme] || 0) + matches;
         }
@@ -177,7 +177,7 @@ class MemoryContextAnalyzer {
 
     memories.forEach(memory => {
       const text = `${memory.title || ''} ${memory.description || ''} ${memory.content || ''}`;
-      
+
       namePatterns.forEach(pattern => {
         const matches = text.match(pattern) || [];
         matches.forEach(name => {
@@ -235,7 +235,7 @@ class MemoryContextAnalyzer {
 
     memories.forEach(memory => {
       const text = `${memory.title || ''} ${memory.description || ''} ${memory.content || ''}`.toLowerCase();
-      
+
       Object.entries(emotionKeywords).forEach(([emotion, keywords]) => {
         const matches = keywords.filter(keyword => text.includes(keyword)).length;
         emotions[emotion] += matches;
@@ -262,7 +262,7 @@ class MemoryContextAnalyzer {
 
     memories.forEach(memory => {
       const text = `${memory.title || ''} ${memory.description || ''} ${memory.content || ''}`.toLowerCase();
-      
+
       // Check for childhood indicators
       if (text.includes('child') || text.includes('young') || text.includes('kid')) {
         patterns.childhoodMemories++;
@@ -302,7 +302,7 @@ class MemoryContextAnalyzer {
     const totalLength = memories.reduce((sum, memory) => {
       return sum + (memory.content?.length || 0) + (memory.description?.length || 0);
     }, 0);
-    
+
     style.averageLength = Math.round(totalLength / memories.length);
 
     // Determine detail level
@@ -449,7 +449,7 @@ class MemoryContextAnalyzer {
    */
   async getAnalysis() {
     // Return cached analysis if recent (within 5 minutes)
-    if (this.analysisCache && this.lastAnalysisTime && 
+    if (this.analysisCache && this.lastAnalysisTime &&
         (Date.now() - this.lastAnalysisTime) < 300000) {
       console.log('🧠 Using cached memory analysis');
       return this.analysisCache;
diff --git a/js/memory-detail-modal-clean.js b/js/memory-detail-modal-clean.js
index 74aea65c..01c736f8 100644
--- a/js/memory-detail-modal-clean.js
+++ b/js/memory-detail-modal-clean.js
@@ -119,8 +119,8 @@ async function loadPeopleInTab() {
           <div style="text-align: center; color: rgba(255,255,255,0.7); margin: 40px 0;">
             <div style="font-size: 48px; margin-bottom: 16px;">👥</div>
             <p>No people in your vault yet.</p>
-            <button onclick="window.open('/pages/people.html', '_blank')" style="
-              background: linear-gradient(135deg, #8658ff, #f093fb);
+            <button onclick="window.open('/pages/people-emma.html', '_blank')" style="
+              background: linear-gradient(135deg, #6f63d9, #deb3e4);
               border: none;
               color: white;
               padding: 12px 24px;
@@ -149,7 +149,7 @@ async function loadPeopleInTab() {
           : `<div style="
               width: 64px; 
               height: 64px; 
-              background: linear-gradient(135deg, #8658ff, #f093fb); 
+              background: linear-gradient(135deg, #6f63d9, #deb3e4); 
               border-radius: 50%; 
               display: flex; 
               align-items: center; 
@@ -166,10 +166,10 @@ async function loadPeopleInTab() {
                id="person-${person.id}"
                style="
                  padding: 20px; 
-                 border: 2px solid ${isSelected ? '#8658ff' : 'rgba(255, 255, 255, 0.2)'}; 
+                 border: 2px solid ${isSelected ? '#6f63d9' : 'rgba(255, 255, 255, 0.2)'}; 
                  border-radius: 16px;
                  cursor: pointer;
-                 background: ${isSelected ? 'rgba(134, 88, 255, 0.1)' : 'rgba(255, 255, 255, 0.05)'};
+                 background: ${isSelected ? 'rgba(111, 99, 217, 0.1)' : 'rgba(255, 255, 255, 0.05)'};
                  color: white;
                  text-align: center;
                  transition: all 0.2s ease;
@@ -202,7 +202,7 @@ async function loadPeopleInTab() {
         
         <div style="text-align: center; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.1);">
           <button onclick="savePeopleSelections()" style="
-            background: linear-gradient(135deg, #8658ff, #f093fb);
+            background: linear-gradient(135deg, #6f63d9, #deb3e4);
             border: none;
             color: white;
             padding: 12px 32px;
@@ -213,7 +213,7 @@ async function loadPeopleInTab() {
             margin-right: 12px;
           ">Save Connections</button>
           
-          <button onclick="window.open('/pages/people.html', '_blank')" style="
+          <button onclick="window.open('/pages/people-emma.html', '_blank')" style="
             background: rgba(255, 255, 255, 0.1);
             border: 1px solid rgba(255, 255, 255, 0.2);
             color: white;
@@ -234,12 +234,12 @@ async function loadPeopleInTab() {
             const personCard = document.getElementById(`person-${person.id}`);
             if (personCard) {
               personCard.classList.add('selected');
-              personCard.style.border = '2px solid #8658ff';
-              personCard.style.background = 'rgba(134, 88, 255, 0.1)';
+              personCard.style.border = '2px solid #6f63d9';
+              personCard.style.background = 'rgba(111, 99, 217, 0.1)';
               
               const checkmark = document.createElement('div');
               checkmark.className = 'selection-checkmark';
-              checkmark.style.cssText = 'position: absolute; top: 8px; right: 8px; color: #8658ff; font-size: 20px; background: rgba(255,255,255,0.9); border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-weight: bold;';
+              checkmark.style.cssText = 'position: absolute; top: 8px; right: 8px; color: #6f63d9; font-size: 20px; background: rgba(255,255,255,0.9); border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-weight: bold;';
               checkmark.innerHTML = '✓';
               personCard.appendChild(checkmark);
             }
@@ -265,14 +265,14 @@ async function loadPeopleInTab() {
         } else {
           // Select
           personCard.classList.add('selected');
-          personCard.style.border = '2px solid #8658ff';
-          personCard.style.background = 'rgba(134, 88, 255, 0.1)';
+          personCard.style.border = '2px solid #6f63d9';
+          personCard.style.background = 'rgba(111, 99, 217, 0.1)';
           // Add checkmark overlay
           const existingCheckmark = personCard.querySelector('.selection-checkmark');
           if (!existingCheckmark) {
             const checkmark = document.createElement('div');
             checkmark.className = 'selection-checkmark';
-            checkmark.style.cssText = 'position: absolute; top: 8px; right: 8px; color: #8658ff; font-size: 20px; background: rgba(255,255,255,0.9); border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-weight: bold;';
+            checkmark.style.cssText = 'position: absolute; top: 8px; right: 8px; color: #6f63d9; font-size: 20px; background: rgba(255,255,255,0.9); border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-weight: bold;';
             checkmark.innerHTML = '✓';
             personCard.appendChild(checkmark);
           }
@@ -475,7 +475,7 @@ async function loadPeopleInTab() {
         // Reset button after 2 seconds
         setTimeout(() => {
           saveButton.innerHTML = originalText;
-          saveButton.style.background = 'linear-gradient(135deg, #8658ff, #f093fb)';
+          saveButton.style.background = 'linear-gradient(135deg, #6f63d9, #deb3e4)';
           saveButton.disabled = false;
         }, 2000);
       };
diff --git a/js/memory-detail-modal.js b/js/memory-detail-modal.js
index e4bdb4d0..d10c3cb5 100644
--- a/js/memory-detail-modal.js
+++ b/js/memory-detail-modal.js
@@ -180,7 +180,7 @@ function createModalContent(memory) {
     max-height: 90vh;
     background: linear-gradient(135deg, rgba(20, 20, 30, 0.95), rgba(30, 30, 40, 0.95));
     backdrop-filter: blur(20px);
-    border: 1px solid rgba(134, 88, 255, 0.3);
+    border: 1px solid rgba(111, 99, 217, 0.3);
     border-radius: 20px;
     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
     display: flex;
@@ -196,7 +196,7 @@ function createModalContent(memory) {
       display: flex;
       align-items: center;
       gap: 16px;
-      background: linear-gradient(135deg, rgba(134, 88, 255, 0.1), rgba(240, 147, 251, 0.1));
+      background: linear-gradient(135deg, rgba(111, 99, 217, 0.1), rgba(222, 179, 228, 0.1));
     ">
       <div style="flex: 1;">
         <input type="text" id="memory-title-input" placeholder="Enter memory title..." style="
@@ -213,7 +213,7 @@ function createModalContent(memory) {
       </div>
       <div style="display: flex; gap: 12px;">
         <button class="modal-save-btn" style="
-          background: linear-gradient(135deg, #8658ff, #f093fb);
+          background: linear-gradient(135deg, #6f63d9, #deb3e4);
           border: none;
           color: white;
           padding: 8px 16px;
@@ -246,7 +246,7 @@ function createModalContent(memory) {
         color: white;
         padding: 16px 20px;
         cursor: pointer;
-        border-bottom: 2px solid #f093fb;
+        border-bottom: 2px solid #deb3e4;
         transition: all 0.2s ease;
       ">Overview</button>
       <button class="tab-btn" data-tab="media" style="
@@ -259,7 +259,7 @@ function createModalContent(memory) {
         transition: all 0.2s ease;
       ">Media <span style="
         background: rgba(118, 75, 162, 0.3);
-        color: #f093fb;
+        color: #deb3e4;
         padding: 2px 8px;
         border-radius: 12px;
         font-size: 11px;
@@ -275,7 +275,7 @@ function createModalContent(memory) {
         transition: all 0.2s ease;
       ">People <span style="
         background: rgba(118, 75, 162, 0.3);
-        color: #f093fb;
+        color: #deb3e4;
         padding: 2px 8px;
         border-radius: 12px;
         font-size: 11px;
@@ -369,7 +369,7 @@ function switchTab(modal, tabName) {
     if (btn.dataset.tab === tabName) {
       btn.classList.add('active');
       btn.style.color = 'white';
-      btn.style.borderBottom = '2px solid #f093fb';
+      btn.style.borderBottom = '2px solid #deb3e4';
     } else {
       btn.classList.remove('active');
       btn.style.color = 'rgba(255,255,255,0.6)';
@@ -579,7 +579,7 @@ async function loadPeopleContent(modal, memory) {
           width: 60px;
           height: 60px;
           border-radius: 50%;
-          background: linear-gradient(135deg, #8658ff, #f093fb);
+          background: linear-gradient(135deg, #6f63d9, #deb3e4);
           display: flex;
           align-items: center;
           justify-content: center;
@@ -784,7 +784,7 @@ function setupModalEventHandlers(modal, memory, overlay, content) {
             height: 80px;
             margin: 0 auto 16px;
             border-radius: 50%;
-            background: ${hasAvatar ? 'transparent' : 'linear-gradient(135deg, #8658ff, #f093fb)'};
+            background: ${hasAvatar ? 'transparent' : 'linear-gradient(135deg, #6f63d9, #deb3e4)'};
             display: flex;
             align-items: center;
             justify-content: center;
@@ -891,7 +891,7 @@ function setupModalEventHandlers(modal, memory, overlay, content) {
               font-size: 16px;
             ">Cancel</button>
             <button id="connect-people-btn" onclick="connectSelectedPeople()" disabled style="
-              background: linear-gradient(135deg, #8658ff, #f093fb);
+              background: linear-gradient(135deg, #6f63d9, #deb3e4);
               border: none;
               color: white;
               padding: 12px 24px;
@@ -924,7 +924,7 @@ function setupModalEventHandlers(modal, memory, overlay, content) {
       } else {
         // Select
         selectedPeople.add(personId);
-        card.style.border = '2px solid #8658ff';
+        card.style.border = '2px solid #6f63d9';
         indicator.style.display = 'flex';
       }
       
@@ -941,7 +941,7 @@ function setupModalEventHandlers(modal, memory, overlay, content) {
       if (!selectedPeople.has(personId)) {
         card.style.background = 'rgba(255, 255, 255, 0.05)';
       } else {
-        card.style.background = 'rgba(134, 88, 255, 0.2)';
+        card.style.background = 'rgba(111, 99, 217, 0.2)';
       }
     };
 
@@ -1148,7 +1148,7 @@ function switchTab(modal, tabName) {
     if (btn.dataset.tab === tabName) {
       btn.classList.add('active');
       btn.style.color = 'white';
-      btn.style.borderBottom = '2px solid #f093fb';
+      btn.style.borderBottom = '2px solid #deb3e4';
     } else {
       btn.classList.remove('active');
       btn.style.color = 'rgba(255,255,255,0.6)';
@@ -1209,7 +1209,7 @@ function saveMemoryChanges(modal, memory) {
       saveBtn.style.background = 'rgba(34, 197, 94, 0.8)';
       setTimeout(() => {
         saveBtn.innerHTML = originalText;
-        saveBtn.style.background = 'linear-gradient(135deg, #8658ff, #f093fb)';
+        saveBtn.style.background = 'linear-gradient(135deg, #6f63d9, #deb3e4)';
       }, 2000);
     }
 
diff --git a/js/memory-orchestrator.js b/js/memory-orchestrator.js
new file mode 100644
index 00000000..56a23332
--- /dev/null
+++ b/js/memory-orchestrator.js
@@ -0,0 +1,156 @@
+/**
+ * 🧠 Emma Memory Orchestrator
+ *
+ * This class is the central nervous system for memory operations.
+ * It coordinates between the chat experience, the memory wizard, and the vault.
+ * It manages the state of memory creation and retrieval, ensuring a single source of truth.
+ */
+class MemoryOrchestrator {
+  constructor() {
+    if (MemoryOrchestrator.instance) {
+      return MemoryOrchestrator.instance;
+    }
+    MemoryOrchestrator.instance = this;
+
+    this.activeMemory = null;
+    this.isCreatingMemory = false;
+  }
+
+  // A helper function to make API calls to the backend
+  async _vaultApi(endpoint, body) {
+    try {
+      const response = await fetch(`/api/${endpoint}`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(body),
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.message || `API error: ${response.status}`);
+      }
+      return await response.json();
+    } catch (error) {
+      console.error(`🧠 MemoryOrchestrator: API call to ${endpoint} failed:`, error);
+      throw error;
+    }
+  }
+
+  // --- Person Management ---
+
+  async getPeople(query = '') {
+    return this._vaultApi('execute-tool', {
+      toolName: 'get_people',
+      params: { query },
+    });
+  }
+
+  async createPersonProfile(personData) {
+    return this._vaultApi('execute-tool', {
+      toolName: 'create_person_profile',
+      params: personData,
+    });
+  }
+
+  async updatePerson(personData) {
+    return this._vaultApi('execute-tool', {
+      toolName: 'update_person',
+      params: personData,
+    });
+  }
+
+
+  // --- Memory Management ---
+
+  async getMemories(params = {}) {
+    return this._vaultApi('execute-tool', {
+      toolName: 'get_memories',
+      params,
+    });
+  }
+
+  async getRelatedMemories(memoryId, limit = 3) {
+    return this._vaultApi('execute-tool', {
+      toolName: 'get_related_memories',
+      params: { memoryId, limit },
+    });
+  }
+
+  async createMemory(memoryData) {
+    return this._vaultApi('execute-tool', {
+      toolName: 'create_memory_capsule',
+      params: memoryData,
+    });
+  }
+
+  async updateMemory(memoryData) {
+    return this._vaultApi('execute-tool', {
+      toolName: 'update_memory_capsule',
+      params: memoryData,
+    });
+  }
+
+  // --- Memory Creation Wizard ---
+
+  startMemoryCreation(initialData = {}) {
+    this.isCreatingMemory = true;
+    this.activeMemory = {
+      id: `memory_${Date.now()}`,
+      title: '',
+      content: '',
+      people: [],
+      attachments: [],
+      ...initialData,
+    };
+    this.launchWizard();
+  }
+
+  launchWizard() {
+    const wizard = new UnifiedMemoryWizard(this, { x: 0, y: 0, width: '100%', height: '100%' });
+    wizard.show();
+  }
+
+  updateActiveMemory(updates) {
+    if (!this.isCreatingMemory) return;
+    this.activeMemory = { ...this.activeMemory, ...updates };
+    console.log('🧠 MemoryOrchestrator: Updating active memory:', this.activeMemory);
+  }
+
+  async saveActiveMemory() {
+    if (!this.isCreatingMemory) return;
+
+    try {
+      const memoryToSave = {
+        title: this.activeMemory.title,
+        content: this.activeMemory.content || this.activeMemory.story,
+        people: this.activeMemory.selectedPeople || [],
+        attachments: this.activeMemory.mediaItems || [],
+        tags: this.activeMemory.tags,
+        // ... add any other relevant fields
+      };
+
+      await this.createMemory(memoryToSave);
+      console.log('🧠 MemoryOrchestrator: Memory saved successfully.');
+
+    } catch (error) {
+      console.error('🧠 MemoryOrchestrator: Error saving memory:', error);
+    } finally {
+      this.isCreatingMemory = false;
+      this.activeMemory = null;
+    }
+  }
+
+  cancelMemoryCreation() {
+    this.isCreatingMemory = false;
+    this.activeMemory = null;
+    console.log('🧠 MemoryOrchestrator: Canceled memory creation.');
+  }
+}
+
+// Ensure it's a singleton
+const memoryOrchestrator = new MemoryOrchestrator();
+Object.freeze(memoryOrchestrator);
+
+window.memoryOrchestrator = memoryOrchestrator;
diff --git a/js/modal-helpers.js b/js/modal-helpers.js
index 96ad6167..f1f32603 100644
--- a/js/modal-helpers.js
+++ b/js/modal-helpers.js
@@ -26,7 +26,7 @@ async function showConfirmModal(title, message, confirmText = 'Confirm', cancelT
     content.style.cssText = `
       background: linear-gradient(135deg, #1a1033 0%, #2d1b69 50%, #0f0c29 100%);
       padding: 30px; border-radius: 16px; max-width: 400px; text-align: center;
-      border: 1px solid rgba(139, 92, 246, 0.3);
+      border: 1px solid rgba(111, 99, 217, 0.3);
       box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
     `;
     
@@ -52,7 +52,7 @@ async function showConfirmModal(title, message, confirmText = 'Confirm', cancelT
     const confirmBtn = document.createElement('button');
     confirmBtn.textContent = confirmText;
     confirmBtn.style.cssText = `
-      padding: 10px 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
+      padding: 10px 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #deb3e4 100%);
       color: white; border: none; border-radius: 8px; cursor: pointer;
       transition: all 0.3s ease;
     `;
@@ -134,7 +134,7 @@ function showErrorModal(title, message) {
   const okBtn = document.createElement('button');
   okBtn.textContent = 'OK';
   okBtn.style.cssText = `
-    padding: 10px 24px; background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
+    padding: 10px 24px; background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #deb3e4 100%);
     color: white; border: none; border-radius: 8px; cursor: pointer;
     transition: all 0.3s ease;
   `;
@@ -187,7 +187,7 @@ async function showPasswordModal(title, label) {
     content.style.cssText = `
       background: linear-gradient(135deg, #1a1033 0%, #2d1b69 50%, #0f0c29 100%);
       padding: 30px; border-radius: 16px; max-width: 400px; text-align: center;
-      border: 1px solid rgba(139, 92, 246, 0.3);
+      border: 1px solid rgba(111, 99, 217, 0.3);
       box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
     `;
     
@@ -202,7 +202,7 @@ async function showPasswordModal(title, label) {
     const input = document.createElement('input');
     input.type = 'password';
     input.style.cssText = `
-      width: 100%; padding: 12px; border: 1px solid rgba(139, 92, 246, 0.3);
+      width: 100%; padding: 12px; border: 1px solid rgba(111, 99, 217, 0.3);
       border-radius: 8px; background: rgba(255, 255, 255, 0.05); color: white;
       margin-bottom: 20px; font-size: 16px;
     `;
@@ -220,7 +220,7 @@ async function showPasswordModal(title, label) {
     const okBtn = document.createElement('button');
     okBtn.textContent = 'OK';
     okBtn.style.cssText = `
-      padding: 10px 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
+      padding: 10px 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #deb3e4 100%);
       color: white; border: none; border-radius: 8px; cursor: pointer;
     `;
     
diff --git a/js/options.js b/js/options.js
index 751246ce..3cd917e5 100644
--- a/js/options.js
+++ b/js/options.js
@@ -95,9 +95,9 @@ function setupUniversalNavigationHandlers() {
 
     try {
       if (window.chrome && chrome.tabs) {
-        chrome.tabs.create({ url: chrome.runtime.getURL('dashboard-new.html') });
+        chrome.tabs.create({ url: chrome.runtime.getURL('dashboard.html') });
       } else if (window.emmaAPI) {
-        window.location.href = 'dashboard-new.html';
+        window.location.href = '../dashboard.html';
       } else if (action === 'back') {
         window.history.back();
       } else {
@@ -105,7 +105,7 @@ function setupUniversalNavigationHandlers() {
       }
     } catch (err) {
       console.error('Navigation failed:', err);
-      window.location.href = 'dashboard-new.html';
+      window.location.href = '../dashboard.html';
     }
   };
 
@@ -259,19 +259,19 @@ function openVaultQRModal(qrResult) {
       max-width: 500px;
       background: linear-gradient(135deg, rgba(20, 20, 30, 0.98), rgba(30, 30, 40, 0.98));
       backdrop-filter: blur(20px);
-      border: 1px solid rgba(134, 88, 255, 0.3);
+      border: 1px solid rgba(111, 99, 217, 0.3);
       border-radius: 20px;
       box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
     ">
       <div class="modal-header" style="
         padding: 24px 32px 16px 32px;
         border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-        background: linear-gradient(135deg, rgba(134, 88, 255, 0.1), rgba(240, 147, 251, 0.1));
+        background: linear-gradient(135deg, rgba(111, 99, 217, 0.1), rgba(222, 179, 228, 0.1));
       ">
         <div style="display: flex; align-items: center; gap: 16px;">
           <div style="
             width: 48px; height: 48px;
-            background: linear-gradient(135deg, #8658ff, #f093fb);
+            background: linear-gradient(135deg, #6f63d9, #deb3e4);
             border-radius: 12px;
             display: flex; align-items: center; justify-content: center;
             font-size: 24px;
@@ -314,7 +314,7 @@ function openVaultQRModal(qrResult) {
 
         <div style="display: flex; gap: 12px; justify-content: center;">
           <button id="download-vault-qr" style="
-            background: linear-gradient(135deg, #8658ff, #f093fb);
+            background: linear-gradient(135deg, #6f63d9, #deb3e4);
             border: none; color: white; padding: 12px 24px;
             border-radius: 8px; cursor: pointer; font-weight: 600;
           ">📥 Download QR</button>
@@ -375,19 +375,19 @@ function openQRScannerModal() {
       max-width: 600px;
       background: linear-gradient(135deg, rgba(20, 20, 30, 0.98), rgba(30, 30, 40, 0.98));
       backdrop-filter: blur(20px);
-      border: 1px solid rgba(134, 88, 255, 0.3);
+      border: 1px solid rgba(111, 99, 217, 0.3);
       border-radius: 20px;
       box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
     ">
       <div class="modal-header" style="
         padding: 24px 32px 16px 32px;
         border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-        background: linear-gradient(135deg, rgba(134, 88, 255, 0.1), rgba(240, 147, 251, 0.1));
+        background: linear-gradient(135deg, rgba(111, 99, 217, 0.1), rgba(222, 179, 228, 0.1));
       ">
         <div style="display: flex; align-items: center; gap: 16px;">
           <div style="
             width: 48px; height: 48px;
-            background: linear-gradient(135deg, #8658ff, #f093fb);
+            background: linear-gradient(135deg, #6f63d9, #deb3e4);
             border-radius: 12px;
             display: flex; align-items: center; justify-content: center;
             font-size: 24px;
@@ -423,7 +423,7 @@ function openQRScannerModal() {
 
           <div style="display: flex; gap: 12px; justify-content: center;">
             <button id="start-camera-scan" style="
-              background: linear-gradient(135deg, #8658ff, #f093fb);
+              background: linear-gradient(135deg, #6f63d9, #deb3e4);
               border: none; color: white; padding: 12px 24px;
               border-radius: 8px; cursor: pointer; font-weight: 600;
             ">📷 Use Camera</button>
@@ -442,7 +442,7 @@ function openQRScannerModal() {
             background: rgba(255, 255, 255, 0.05);
             border-radius: 8px;
             padding: 16px;
-            border-left: 4px solid #8658ff;
+            border-left: 4px solid #6f63d9;
           "></div>
         </div>
       </div>
@@ -527,6 +527,12 @@ document.addEventListener('DOMContentLoaded', async () => {
   await updateStats();
   attachEventListeners();
   setupOrbManager();
+  if (window.EmmaThemeUI) {
+    window.EmmaThemeUI.init({
+      themeContainerId: 'theme-gallery',
+      backgroundContainerId: 'background-options'
+    });
+  }
   // Wire exit buttons with enhanced navigation
   try {
     const backBtn = document.getElementById('settings-back');
@@ -555,17 +561,17 @@ document.addEventListener('DOMContentLoaded', async () => {
         try {
           if (window.chrome && chrome.tabs) {
             // Extension environment
-            chrome.tabs.create({ url: chrome.runtime.getURL('dashboard-new.html') });
+            chrome.tabs.create({ url: chrome.runtime.getURL('dashboard.html') });
           } else if (window.emmaAPI) {
             // Electron environment
-            window.location.href = 'dashboard-new.html';
+            window.location.href = '../dashboard.html';
           } else {
             // Fallback
             window.history.back();
           }
         } catch (err) {
           console.error('Navigation failed:', err);
-          window.location.href = 'dashboard-new.html';
+          window.location.href = '../dashboard.html';
         }
       };
 
@@ -586,15 +592,15 @@ document.addEventListener('DOMContentLoaded', async () => {
         e.stopPropagation();
         try {
           if (window.chrome && chrome.tabs) {
-            chrome.tabs.create({ url: chrome.runtime.getURL('dashboard-new.html') });
+            chrome.tabs.create({ url: chrome.runtime.getURL('dashboard.html') });
           } else if (window.emmaAPI) {
-            window.location.href = 'dashboard-new.html';
+            window.location.href = '../dashboard.html';
           } else {
             window.close();
           }
         } catch (err) {
           console.error('Close failed:', err);
-          window.location.href = 'dashboard-new.html';
+          window.location.href = '../dashboard.html';
         }
       };
 
@@ -895,7 +901,7 @@ async function saveSettings() {
     const orbSettings = {
       [`orb.persona:${vid}`]: getElementValue('orb-persona', 'default'),
       [`orb.colorTheme:${vid}`]: getElementValue('orb-color-theme', 'default'),
-      [`orb.customColor:${vid}`]: getElementValue('orb-custom-color', '#8b5cf6'),
+      [`orb.customColor:${vid}`]: getElementValue('orb-custom-color', '#6f63d9'),
       [`orb.size:${vid}`]: parseInt(getElementValue('orb-size', '72')),
       [`orb.position:${vid}`]: getElementValue('orb-position', 'bottom-right'),
       [`orb.autoHide:${vid}`]: getElementValue('orb-auto-hide', false),
@@ -1828,7 +1834,7 @@ async function loadOrbSettings() {
     const $ = (id) => document.getElementById(id);
     if ($('orb-persona')) $('orb-persona').value = store[keys[0]] || 'default';
     if ($('orb-color-theme')) $('orb-color-theme').value = store[keys[1]] || 'default';
-    if ($('orb-custom-color')) $('orb-custom-color').value = store[keys[2]] || '#8b5cf6';
+    if ($('orb-custom-color')) $('orb-custom-color').value = store[keys[2]] || '#6f63d9';
     if ($('orb-size')) {
       $('orb-size').value = store[keys[3]] || 72;
       $('orb-size-value').textContent = (store[keys[3]] || 72) + 'px';
@@ -2140,7 +2146,7 @@ function applySettingsToDialog(store, vid, orbType) {
     opt.classList.toggle('active', opt.dataset.color === colorTheme);
   });
 
-  const customColor = store[`orb.customColor:${vid}`] || '#8b5cf6';
+  const customColor = store[`orb.customColor:${vid}`] || '#6f63d9';
   document.getElementById('dialog-custom-color').value = customColor;
   document.getElementById('dialog-custom-color').style.display = colorTheme === 'custom' ? 'block' : 'none';
 
@@ -2306,7 +2312,7 @@ async function saveDialogSettings() {
       // Update localStorage for dementia companion
       if (currentDialogOrb === 'dementia') {
         localStorage.setItem('dementia.settings.bump', Date.now().toString());
-        window.postMessage({ type: 'DEMENTIA_SETTINGS_CHANGED', settings }, '*');
+        window.postMessage({ type: 'DEMENTIA_SETTINGS_CHANGED', settings }, window.location.origin);
       }
     }
 
@@ -2750,4 +2756,4 @@ function hideMigrationSections() {
 
   hideMigrationButtons(['preview-migration-btn', 'start-migration-btn']);
   showMigrationButtons(['refresh-migration-btn']);
-}
\ No newline at end of file
+}
diff --git a/js/orb-manager.js b/js/orb-manager.js
index bd5cd8aa..3e335891 100644
--- a/js/orb-manager.js
+++ b/js/orb-manager.js
@@ -281,7 +281,7 @@ class OrbManager {
       
       // Get color customization
       const colorTheme = this.settings[`orb.colorTheme:${this.vaultId}`] || 'default';
-      const customColor = this.settings[`orb.customColor:${this.vaultId}`] || '#8b5cf6';
+      const customColor = this.settings[`orb.customColor:${this.vaultId}`] || '#6f63d9';
       
       // Calculate hue from color
       const hue = this.getHueFromColor(orbType, colorTheme, customColor);
diff --git a/js/people-page.js b/js/people-page.js
deleted file mode 100644
index d205acd2..00000000
--- a/js/people-page.js
+++ /dev/null
@@ -1,2225 +0,0 @@
-/**
- * People Page Management with Cryptographic Identity
- */
-
-// Import identity crypto functions
-let generateIdentity, generateIdentityCard;
-let p2pManager;
-
-// Initialize crypto and P2P modules
-async function initializeCrypto() {
-  try {
-    const cryptoModule = await import('./vault/identity-crypto.js');
-    generateIdentity = cryptoModule.generateIdentity;
-    generateIdentityCard = cryptoModule.generateIdentityCard;
-
-    // Initialize P2P manager
-    const p2pModule = await import('./p2p/p2p-manager.js');
-    p2pManager = p2pModule.p2pManager;
-
-    // Get my identity for P2P
-    const myIdentity = await getMyIdentity();
-    if (myIdentity) {
-      await p2pManager.initialize(myIdentity);
-
-      // Set up P2P event listeners
-      setupP2PListeners();
-    }
-  } catch (error) {
-    console.error('❌ Failed to load modules:', error);
-    // Fallback: disable crypto features
-    generateIdentity = async () => {
-      throw new Error('Crypto module not available');
-    };
-    generateIdentityCard = () => null;
-  }
-}
-
-// Get my identity from storage
-async function getMyIdentity() {
-  try {
-    const result = await chrome.storage.local.get(['emma_my_identity']);
-    return result.emma_my_identity || null;
-  } catch (error) {
-    // Fallback to localStorage
-    const stored = localStorage.getItem('emma_my_identity');
-    return stored ? JSON.parse(stored) : null;
-  }
-}
-
-// Set up P2P event listeners
-function setupP2PListeners() {
-  if (!p2pManager) return;
-
-  p2pManager.addEventListener('invitationreceived', async (event) => {
-    const invitation = event.detail;
-
-    // Show notification
-    showShareInvitationModal(invitation);
-  });
-
-  p2pManager.addEventListener('shareconnected', (event) => {
-    const { shareId, vaultId } = event.detail;
-
-    showNotification('HML Sync: Vault share connected successfully!', 'success');
-  });
-
-  p2pManager.addEventListener('error', (event) => {
-    console.error('❌ HML Sync error:', event.detail);
-    showNotification('HML Sync connection error: ' + event.detail.error, 'error');
-  });
-}
-
-// Show share invitation modal
-function showShareInvitationModal(invitation) {
-  // Remove any existing modals
-  const existingModal = document.querySelector('.share-invitation-modal');
-  if (existingModal) existingModal.remove();
-
-  // Find person info
-  const person = allPeople.find(p => p.keyFingerprint === invitation.issuerFingerprint);
-  const personName = person?.name || 'Unknown Person';
-
-  const modal = document.createElement('div');
-  modal.className = 'share-invitation-modal';
-  modal.style.cssText = `
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: rgba(0, 0, 0, 0.8);
-    z-index: 10000;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    animation: fadeIn 0.3s ease;
-  `;
-
-  const modalContent = document.createElement('div');
-  modalContent.style.cssText = `
-    background: linear-gradient(135deg, rgba(40, 30, 60, 0.98) 0%, rgba(30, 20, 50, 0.98) 100%);
-    border-radius: 16px;
-    padding: 32px;
-    max-width: 500px;
-    width: 90%;
-    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
-    border: 1px solid rgba(134, 88, 255, 0.3);
-    animation: slideUp 0.3s ease;
-  `;
-
-  const permissionList = Object.entries(invitation.permissions || {})
-    .filter(([key, value]) => value)
-    .map(([key, value]) => {
-      const icons = {
-        read: '👁️ View',
-        write: '✏️ Edit',
-        delete: '🗑️ Delete',
-        share: '🔗 Share',
-        admin: '👑 Admin'
-      };
-      return icons[key] || key;
-    })
-    .join(', ');
-
-  modalContent.innerHTML = `
-    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;">
-      <h2 style="margin: 0; color: #ffffff; font-size: 24px;">
-        🎁 Vault Share Invitation
-      </h2>
-      <button class="close-invitation-modal" style="background: none; border: none; color: #cccccc; font-size: 24px; cursor: pointer;">✕</button>
-    </div>
-
-    <div style="margin-bottom: 24px;">
-      <p style="color: #cccccc; line-height: 1.6; margin-bottom: 16px;">
-        <strong style="color: #ffffff;">${escapeHtml(personName)}</strong> wants to share their vault
-        <strong style="color: #8658ff;">"${escapeHtml(invitation.vaultName || 'Memory Vault')}"</strong> with you.
-      </p>
-
-      <div style="background: rgba(134, 88, 255, 0.1); border: 1px solid rgba(134, 88, 255, 0.3); border-radius: 8px; padding: 16px; margin-bottom: 16px;">
-        <h4 style="margin: 0 0 8px 0; color: #8658ff;">Permissions:</h4>
-        <p style="margin: 0; color: #ffffff;">${permissionList}</p>
-      </div>
-
-      <div style="color: #cccccc; font-size: 12px;">
-        <p style="margin: 4px 0;">🔒 End-to-end encrypted</p>
-        <p style="margin: 4px 0;">📅 Expires: ${new Date(invitation.expires).toLocaleDateString()}</p>
-        <p style="margin: 4px 0;">🆔 From: ${escapeHtml(invitation.issuerFingerprint.substring(0, 16))}...</p>
-      </div>
-    </div>
-
-    <div style="display: flex; gap: 12px; justify-content: flex-end;">
-      <button class="decline-invitation" style="
-        background: rgba(255, 255, 255, 0.1);
-        border: 1px solid rgba(255, 255, 255, 0.2);
-        color: #ffffff;
-        padding: 10px 20px;
-        border-radius: 8px;
-        cursor: pointer;
-        font-size: 16px;
-        transition: all 0.3s;
-      ">Decline</button>
-
-      <button class="accept-invitation" style="
-        background: linear-gradient(135deg, #8658ff 0%, #6843cc 100%);
-        border: none;
-        color: #ffffff;
-        padding: 10px 20px;
-        border-radius: 8px;
-        cursor: pointer;
-        font-size: 16px;
-        font-weight: 500;
-        transition: all 0.3s;
-      ">Accept & Connect</button>
-    </div>
-  `;
-
-  modal.appendChild(modalContent);
-  document.body.appendChild(modal);
-
-  // Event listeners
-  modal.querySelector('.close-invitation-modal').addEventListener('click', () => modal.remove());
-  modal.querySelector('.decline-invitation').addEventListener('click', () => modal.remove());
-
-  modal.querySelector('.accept-invitation').addEventListener('click', async () => {
-    try {
-      const acceptBtn = modal.querySelector('.accept-invitation');
-      acceptBtn.textContent = 'Connecting...';
-      acceptBtn.disabled = true;
-
-      // Accept the share via P2P
-      await p2pManager.acceptShare(invitation);
-
-      showNotification(`Successfully connected to ${personName}'s vault!`, 'success');
-      modal.remove();
-
-      // Refresh the page to show new shared vault
-      setTimeout(() => location.reload(), 1000);
-
-    } catch (error) {
-      console.error('Failed to accept share:', error);
-      showNotification('Failed to accept share: ' + error.message, 'error');
-      modal.remove();
-    }
-  });
-
-  // Click outside to close
-  modal.addEventListener('click', (e) => {
-    if (e.target === modal) modal.remove();
-  });
-}
-
-// People Management JavaScript
-let allPeople = [];
-let filteredPeople = [];
-
-// Initialize the page
-document.addEventListener('DOMContentLoaded', async function() {
-
-  await initializeCrypto();
-  loadPeople();
-  handleUrlParameters();
-  setupEventListeners();
-});
-
-// Setup all event listeners
-function setupEventListeners() {
-
-  // Add person buttons
-  const addPersonBtn = document.getElementById('addPersonBtn');
-  const addPersonBtnEmpty = document.getElementById('addPersonBtnEmpty');
-
-  if (addPersonBtn) {
-    addPersonBtn.addEventListener('click', openAddPersonModal);
-  }
-
-  if (addPersonBtnEmpty) {
-    addPersonBtnEmpty.addEventListener('click', openAddPersonModal);
-  }
-
-  // Search functionality
-  const searchInput = document.getElementById('searchInput');
-  const relationshipFilter = document.getElementById('relationshipFilter');
-
-  if (searchInput) {
-    searchInput.addEventListener('input', searchPeople);
-  }
-
-  if (relationshipFilter) {
-    relationshipFilter.addEventListener('change', searchPeople);
-  }
-
-  // Modal controls
-  const closeModalBtn = document.getElementById('closeModalBtn');
-  const cancelBtn = document.getElementById('cancelBtn');
-  const addPersonForm = document.getElementById('addPersonForm');
-
-  if (closeModalBtn) {
-    closeModalBtn.addEventListener('click', closeAddPersonModal);
-  }
-
-  if (cancelBtn) {
-    cancelBtn.addEventListener('click', closeAddPersonModal);
-  }
-
-  if (addPersonForm) {
-    addPersonForm.addEventListener('submit', addPerson);
-  }
-
-  // Close modal when clicking outside
-  const modalOverlay = document.getElementById('addPersonModal');
-  if (modalOverlay) {
-    modalOverlay.addEventListener('click', function(e) {
-      if (e.target === modalOverlay) {
-        closeAddPersonModal();
-      }
-    });
-  }
-
-  // Event delegation for person cards (since they're dynamically created)
-  const peopleGrid = document.getElementById('peopleGrid');
-  if (peopleGrid) {
-    peopleGrid.addEventListener('click', function(e) {
-      // Find the person card element
-      const personCard = e.target.closest('.person-card');
-      if (personCard) {
-        const personId = parseInt(personCard.dataset.personId);
-
-        // Check if it's a share button click
-        if (e.target.classList.contains('share-vault-btn') || e.target.closest('.share-vault-btn')) {
-          e.stopPropagation();
-          showShareVaultModal(personId);
-        } else {
-          // Regular person card click
-          viewPerson(personId);
-        }
-      }
-    });
-  }
-
-  // Event delegation for identity modal buttons (dynamically created)
-  document.addEventListener('click', function(e) {
-    if (e.target.classList.contains('identity-export-btn')) {
-      const personId = e.target.dataset.personId;
-      if (personId) {
-        exportIdentity(personId);
-      }
-    }
-
-    if (e.target.classList.contains('identity-copy-btn')) {
-      const fingerprint = e.target.dataset.fingerprint;
-      if (fingerprint) {
-        copyFingerprint(fingerprint);
-      }
-    }
-
-    if (e.target.classList.contains('identity-share-btn')) {
-      const fingerprint = e.target.dataset.fingerprint;
-      if (fingerprint) {
-        shareIdentity(fingerprint);
-      }
-    }
-
-    // Edit person button
-    if (e.target.classList.contains('edit-person-btn')) {
-      const personId = e.target.dataset.personId;
-      if (personId) {
-        enablePersonEdit(personId);
-      }
-    }
-
-    // Save person button
-    if (e.target.classList.contains('save-person-btn')) {
-      const personId = e.target.dataset.personId;
-      if (personId) {
-        savePersonEdit(personId);
-      }
-    }
-
-    // Cancel edit button
-    if (e.target.classList.contains('cancel-edit-btn')) {
-      cancelPersonEdit();
-    }
-
-    // Share vault button in modal
-    if (e.target.classList.contains('share-vault-btn-modal')) {
-      const personId = e.target.dataset.personId;
-      if (personId) {
-        showShareVaultModal(parseInt(personId));
-      }
-    }
-
-    // Add person modal buttons
-    if (e.target.classList.contains('close-add-person-modal')) {
-      closeAddPersonModal();
-    }
-
-    if (e.target.classList.contains('cancel-add-person-btn')) {
-      closeAddPersonModal();
-    }
-
-    // Person detail modal close button
-    if (e.target.classList.contains('close-person-detail-modal')) {
-      const modal = e.target.closest('.modal-overlay');
-      if (modal) {
-        modal.remove();
-      }
-    }
-
-    if (e.target.classList.contains('submit-add-person-btn')) {
-      const form = e.target.closest('form');
-      if (form) {
-        const submitEvent = new Event('submit', { bubbles: true, cancelable: true });
-        form.dispatchEvent(submitEvent);
-      }
-    }
-  });
-
-  // Event listener for form submission in add person modal
-  document.addEventListener('submit', function(e) {
-    if (e.target.id === 'addPersonFormModal') {
-      addPerson(e);
-    }
-  });
-
-}
-
-// Load people data
-async function loadPeople() {
-  try {
-    showLoading(true);
-
-    // Get people from storage (try chrome.storage first, fallback to localStorage)
-    let people = [];
-    try {
-      const result = await chrome.storage.local.get(['emma_people']);
-      people = result.emma_people || [];
-
-    } catch (error) {
-      console.warn('⚠️ Chrome storage failed, trying localStorage:', error);
-      people = JSON.parse(localStorage.getItem('emma_people') || '[]');
-
-    }
-
-    // Also check old format for migration
-    if (people.length === 0) {
-      const oldPeople = localStorage.getItem('emma-people');
-      if (oldPeople) {
-        people = JSON.parse(oldPeople);
-
-        // Save in new format
-        try {
-          await chrome.storage.local.set({ emma_people: people });
-        } catch (error) {
-          localStorage.setItem('emma_people', JSON.stringify(people));
-        }
-        // Remove old format
-        localStorage.removeItem('emma-people');
-      }
-    }
-
-    allPeople = people;
-
-    // If no people, create some sample data
-    if (allPeople.length === 0) {
-      allPeople = createSamplePeople();
-      // Save sample data using new storage system
-      try {
-        await chrome.storage.local.set({ emma_people: allPeople });
-      } catch (error) {
-        localStorage.setItem('emma_people', JSON.stringify(allPeople));
-      }
-    }
-
-    filteredPeople = [...allPeople];
-    displayPeople();
-    updateStats();
-
-  } catch (error) {
-    console.error('Failed to load people:', error);
-  } finally {
-    showLoading(false);
-  }
-}
-
-// Create sample people data
-function createSamplePeople() {
-  return [
-    {
-      id: 1,
-      name: "Sarah Johnson",
-      email: "sarah@example.com",
-      phone: "+1 (555) 123-4567",
-      relationship: "family",
-      notes: "My sister, lives in Portland. Loves hiking and photography.",
-      dateAdded: new Date().toISOString()
-    },
-    {
-      id: 2,
-      name: "Mike Chen",
-      email: "mike.chen@example.com",
-      phone: "+1 (555) 987-6543",
-      relationship: "colleague",
-      notes: "Frontend developer on our team. Great at React and design.",
-      dateAdded: new Date().toISOString()
-    },
-    {
-      id: 3,
-      name: "Emma Wilson",
-      email: "emma.w@example.com",
-      phone: "+1 (555) 456-7890",
-      relationship: "best_friend",
-      notes: "College roommate. Now works in marketing. Always up for coffee!",
-      dateAdded: new Date().toISOString()
-    }
-  ];
-}
-
-// Display people
-function displayPeople() {
-  const peopleGrid = document.getElementById('peopleGrid');
-  const emptyState = document.getElementById('emptyState');
-
-  if (filteredPeople.length === 0) {
-    peopleGrid.style.display = 'none';
-    emptyState.style.display = 'block';
-
-    const searchTerm = document.getElementById('searchInput').value;
-    const relationshipFilter = document.getElementById('relationshipFilter').value;
-
-    if (searchTerm || relationshipFilter !== 'all') {
-      document.getElementById('emptyStateMessage').textContent = 'No people match your current filters. Try adjusting your search or filters.';
-    } else {
-      document.getElementById('emptyStateMessage').textContent = 'Start by adding your first person to begin building your network.';
-    }
-    return;
-  }
-
-  peopleGrid.style.display = 'grid';
-  emptyState.style.display = 'none';
-
-  peopleGrid.innerHTML = filteredPeople.map(person => createPersonCard(person)).join('');
-}
-
-// Create person card HTML
-function createPersonCard(person) {
-  const initials = person.name.split(' ').map(n => n[0]).join('').toUpperCase();
-  const relationshipEmoji = getRelationshipEmoji(person.relationship);
-  const relationshipLabel = getRelationshipLabel(person.relationship);
-
-  // Create avatar (profile picture or initials)
-  const avatarContent = person.profilePicture
-    ? `<img src="${person.profilePicture}" style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%;" alt="${escapeHtml(person.name)}">`
-    : initials;
-
-  return `
-    <div class="person-card" data-person-id="${person.id}">
-      <div class="person-avatar">${avatarContent}</div>
-      <div class="person-info">
-        <h3>${escapeHtml(person.name)}</h3>
-        <div class="person-relationship">
-          ${relationshipEmoji} ${relationshipLabel}
-        </div>
-        <p class="person-notes">${person.notes ? escapeHtml(person.notes) : 'No notes added yet.'}</p>
-        ${person.keyFingerprint ? `
-          <div class="person-crypto" style="margin-top: 8px; padding: 8px; background: rgba(134, 88, 255, 0.1); border-radius: 6px; font-size: 11px;">
-            <div style="display: flex; align-items: center; gap: 5px;">
-              <span style="color: #8658ff;">🔐</span>
-              <span style="color: #ffffff;">Identity: </span>
-              <code style="font-family: monospace; color: #ffffff;">${person.keyFingerprint.substring(0, 16)}...</code>
-              ${person.verificationStatus === 'verified' ? '<span style="color: #28a745; margin-left: auto;">✓</span>' :
-                person.verificationStatus === 'trusted' ? '<span style="color: #ffc107; margin-left: auto;">⭐</span>' :
-                '<span style="color: #999; margin-left: auto;">○</span>'}
-            </div>
-          </div>
-        ` : ''}
-      </div>
-      ${person.keyFingerprint ? `
-        <button class="share-vault-btn" data-person-id="${person.id}" data-action="share" style="position: absolute; top: 10px; right: 10px; padding: 6px 12px; background: #8658ff; color: white; border: none; border-radius: 6px; font-size: 12px; cursor: pointer;">
-          Share Vault
-        </button>
-      ` : ''}
-    </div>
-  `;
-}
-
-// Get relationship emoji
-function getRelationshipEmoji(relationship) {
-  const emojis = {
-    self: '🧑',
-    family: '👨‍👩‍👧‍👦',
-    friend: '👫',
-    best_friend: '💝',
-    romantic: '💕',
-    colleague: '💼'
-  };
-  return emojis[relationship] || '👤';
-}
-
-// Get relationship label
-function getRelationshipLabel(relationship) {
-  const labels = {
-    self: 'Myself',
-    family: 'Family',
-    friend: 'Friend',
-    best_friend: 'Best Friend',
-    romantic: 'Romantic',
-    colleague: 'Colleague'
-  };
-  return labels[relationship] || 'Other';
-}
-
-// Search functionality
-function searchPeople() {
-  const searchTerm = document.getElementById('searchInput').value.toLowerCase();
-  const relationshipFilter = document.getElementById('relationshipFilter').value;
-
-  filteredPeople = allPeople.filter(person => {
-    const matchesSearch = searchTerm === '' ||
-      person.name.toLowerCase().includes(searchTerm) ||
-      person.email.toLowerCase().includes(searchTerm) ||
-      person.notes.toLowerCase().includes(searchTerm);
-
-    const matchesRelationship = relationshipFilter === 'all' ||
-      person.relationship === relationshipFilter;
-
-    return matchesSearch && matchesRelationship;
-  });
-
-  displayPeople();
-}
-
-// Update stats
-function updateStats() {
-  const totalCount = allPeople.length;
-  const familyCount = allPeople.filter(p => p.relationship === 'family').length;
-  const colleagueCount = allPeople.filter(p => p.relationship === 'colleague').length;
-
-  document.getElementById('totalCount').textContent = totalCount;
-  document.getElementById('familyCount').textContent = familyCount;
-  document.getElementById('colleagueCount').textContent = colleagueCount;
-}
-
-// Show loading state
-function showLoading(show) {
-  const loader = document.querySelector('.loading');
-  if (loader) {
-    loader.style.display = show ? 'block' : 'none';
-  }
-}
-
-// Handle URL parameters
-function handleUrlParameters() {
-  const urlParams = new URLSearchParams(window.location.search);
-  const shouldAdd = urlParams.get('add');
-
-  if (shouldAdd === 'true') {
-    setTimeout(() => {
-      openAddPersonModal();
-    }, 500);
-  }
-}
-
-// Modal functions - open beautiful add person modal
-function openAddPersonModal() {
-
-  // Remove existing modal if it exists
-  const existingModal = document.querySelector('.add-person-modal-overlay');
-  if (existingModal) {
-    existingModal.remove();
-  }
-
-  // Create new modal with the beautiful design
-  const modal = document.createElement('div');
-  modal.className = 'modal-overlay active add-person-modal-overlay';
-  modal.innerHTML = `
-    <div class="modal add-person-modal" style="max-width: 600px; background: rgba(20, 20, 30, 0.98); backdrop-filter: blur(20px); border: 1px solid rgba(134, 88, 255, 0.3);">
-      <div class="modal-header">
-        <h2 style="color: #ffffff; margin: 0;">Add New Person</h2>
-        <button class="close-btn close-add-person-modal" style="color: #cccccc;">×</button>
-      </div>
-
-      <div style="padding: 0 32px 32px 32px;">
-        <p style="color: #cccccc; margin-bottom: 24px; text-align: center;">Add someone to your network of family, friends, and connections</p>
-
-        <div class="success-message" id="addPersonSuccessMessage" style="background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.2); color: #10b981; padding: 16px 20px; border-radius: 12px; margin-bottom: 24px; display: none;">
-          Person added successfully!
-        </div>
-
-        <form id="addPersonFormModal">
-          <div class="form-group">
-            <label class="form-label" for="modalPersonProfilePic" style="color: #ffffff;">Profile Picture</label>
-            <div style="display: flex; align-items: center; gap: 12px;">
-              <div class="profile-pic-preview" style="width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, #8658ff, #b794f6); display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 20px; border: 2px solid rgba(134, 88, 255, 0.3);">
-                ?
-              </div>
-              <div style="flex: 1;">
-                <input type="file" class="form-input" id="modalPersonProfilePic" accept="image/*" style="background: rgba(255, 255, 255, 0.95); color: #333333; border: 1px solid rgba(134, 88, 255, 0.2); padding: 8px 12px;">
-                <div style="font-size: 12px; color: #cccccc; margin-top: 4px;">PNG, JPG up to 5MB</div>
-              </div>
-            </div>
-          </div>
-
-          <div class="form-group">
-            <label class="form-label" for="modalPersonName" style="color: #ffffff;">Full Name *</label>
-            <input type="text" class="form-input" id="modalPersonName" required placeholder="Enter full name" style="background: rgba(255, 255, 255, 0.95); color: #333333; border: 1px solid rgba(134, 88, 255, 0.2);">
-          </div>
-
-          <div class="form-group">
-            <label class="form-label" for="modalPersonEmail" style="color: #ffffff;">Email Address</label>
-            <input type="email" class="form-input" id="modalPersonEmail" placeholder="person@example.com" style="background: rgba(255, 255, 255, 0.95); color: #333333; border: 1px solid rgba(134, 88, 255, 0.2);">
-          </div>
-
-          <div class="form-group">
-            <label class="form-label" for="modalPersonPhone" style="color: #ffffff;">Phone Number</label>
-            <input type="tel" class="form-input" id="modalPersonPhone" placeholder="+1 (555) 123-4567" style="background: rgba(255, 255, 255, 0.95); color: #333333; border: 1px solid rgba(134, 88, 255, 0.2);">
-          </div>
-
-          <div class="form-group">
-            <label class="form-label" for="modalPersonRelationship" style="color: #ffffff;">Relationship *</label>
-            <select class="form-input" id="modalPersonRelationship" required style="background: rgba(255, 255, 255, 0.95); color: #333333; border: 1px solid rgba(134, 88, 255, 0.2);">
-              <option value="">Select relationship type</option>
-              <option value="self">🧑 Myself</option>
-              <option value="family">👨‍👩‍👧‍👦 Family Member</option>
-              <option value="friend">👫 Friend</option>
-              <option value="colleague">💼 Colleague</option>
-              <option value="neighbor">🏘️ Neighbor</option>
-              <option value="healthcare">⚕️ Healthcare</option>
-              <option value="other">🤝 Other</option>
-            </select>
-          </div>
-
-          <div class="form-group">
-            <label class="form-label" for="modalPersonNotes" style="color: #ffffff;">Notes</label>
-            <textarea class="form-input form-textarea" id="modalPersonNotes" placeholder="Add any additional notes about this person, how you met, shared interests, etc." style="background: rgba(255, 255, 255, 0.95); color: #333333; border: 1px solid rgba(134, 88, 255, 0.2); min-height: 80px; resize: vertical; font-family: inherit;"></textarea>
-          </div>
-
-          <div style="display: flex; gap: 16px; margin-top: 32px;">
-            <button type="button" class="cancel-add-person-btn" style="flex: 1; padding: 16px 24px; background: rgba(255, 255, 255, 0.1); color: white; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 12px; cursor: pointer; font-weight: 600; font-size: 16px; transition: all 0.3s ease;">
-              Cancel
-            </button>
-            <button type="submit" class="submit-add-person-btn" style="flex: 1; padding: 16px 24px; background: #8658ff; color: white; border: none; border-radius: 12px; cursor: pointer; font-weight: 600; font-size: 16px; transition: all 0.3s ease;">
-              Add Person
-            </button>
-          </div>
-        </form>
-      </div>
-    </div>
-  `;
-
-  document.body.appendChild(modal);
-
-  // Add profile picture preview functionality
-  const profilePicInput = modal.querySelector('#modalPersonProfilePic');
-  const profilePicPreview = modal.querySelector('.profile-pic-preview');
-
-  if (profilePicInput && profilePicPreview) {
-    profilePicInput.addEventListener('change', function(e) {
-      const file = e.target.files[0];
-      if (file) {
-        // Validate file size (5MB limit)
-        if (file.size > 5 * 1024 * 1024) {
-          showNotification('Image must be smaller than 5MB', 'error');
-          e.target.value = '';
-          return;
-        }
-
-        // Validate file type
-        if (!file.type.startsWith('image/')) {
-          showNotification('Please select an image file', 'error');
-          e.target.value = '';
-          return;
-        }
-
-        // Preview the image
-        const reader = new FileReader();
-        reader.onload = function(e) {
-          profilePicPreview.innerHTML = `<img src="${e.target.result}" style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%;">`;
-        };
-        reader.readAsDataURL(file);
-      } else {
-        // Reset to default
-        profilePicPreview.innerHTML = '?';
-      }
-    });
-  }
-
-  // Focus on first input
-  setTimeout(() => {
-    const firstInput = modal.querySelector('#modalPersonName');
-    if (firstInput) firstInput.focus();
-  }, 100);
-}
-
-function closeAddPersonModal() {
-  const modal = document.querySelector('.add-person-modal-overlay');
-  if (modal) {
-    modal.remove();
-  }
-}
-
-// Add person - updated for new modal
-async function addPerson(event) {
-
-  event.preventDefault();
-
-  const modal = document.querySelector('.add-person-modal-overlay');
-  if (!modal) {
-    console.error('❌ Add person modal not found');
-    return;
-  }
-
-  try {
-    // Show loading state
-    const submitButton = modal.querySelector('.submit-add-person-btn');
-    const originalText = submitButton?.textContent || 'Add Person';
-    if (submitButton) {
-      submitButton.textContent = 'Generating identity...';
-      submitButton.disabled = true;
-    }
-
-    // Handle profile picture
-    let profilePicture = null;
-    const profilePicInput = modal.querySelector('#modalPersonProfilePic');
-    if (profilePicInput?.files?.[0]) {
-      const file = profilePicInput.files[0];
-      const reader = new FileReader();
-      profilePicture = await new Promise((resolve) => {
-        reader.onload = (e) => resolve(e.target.result);
-        reader.readAsDataURL(file);
-      });
-    }
-
-    const newPerson = {
-      id: Date.now(),
-      name: modal.querySelector('#modalPersonName')?.value?.trim() || '',
-      email: modal.querySelector('#modalPersonEmail')?.value?.trim() || '',
-      phone: modal.querySelector('#modalPersonPhone')?.value?.trim() || '',
-      relationship: modal.querySelector('#modalPersonRelationship')?.value || '',
-      notes: modal.querySelector('#modalPersonNotes')?.value?.trim() || '',
-      profilePicture: profilePicture,
-      dateAdded: new Date().toISOString()
-    };
-
-    if (!newPerson.name || !newPerson.relationship) {
-      showNotification('Please fill in all required fields.', 'error');
-      if (submitButton) {
-        submitButton.textContent = originalText;
-        submitButton.disabled = false;
-      }
-      return;
-    }
-
-    // Generate cryptographic identity
-
-    let identity = null;
-    try {
-      identity = await generateIdentity();
-      console.log('✅ Identity generated:', identity?.fingerprint?.substring(0, 20) + '...');
-
-      // Add crypto fields to person
-      newPerson.publicSigningKey = identity.signing.publicKey;
-      newPerson.publicEncryptionKey = identity.encryption.publicKey;
-      newPerson.keyFingerprint = identity.fingerprint;
-      newPerson.keyCreatedAt = identity.createdAt;
-      newPerson.verificationStatus = 'unverified';
-
-      // Store private keys for self
-      if (newPerson.relationship === 'self') {
-        await storeOwnIdentity(newPerson.id, identity);
-      }
-    } catch (identityError) {
-      console.warn('⚠️ Identity generation failed, continuing without crypto:', identityError);
-    }
-
-    // Get existing people
-    let people = [];
-    try {
-      const result = await chrome.storage.local.get(['emma_people']);
-      people = result.emma_people || JSON.parse(localStorage.getItem('emma_people') || '[]');
-    } catch (error) {
-      people = JSON.parse(localStorage.getItem('emma_people') || '[]');
-    }
-
-    // Add new person
-    people.push(newPerson);
-
-    // Save to storage
-    try {
-      await chrome.storage.local.set({ emma_people: people });
-    } catch (error) {
-      localStorage.setItem('emma_people', JSON.stringify(people));
-    }
-
-    // Update global variable
-    allPeople = people;
-
-    // Show success message in modal
-    const successMessage = modal.querySelector('#addPersonSuccessMessage');
-    if (successMessage) {
-      successMessage.innerHTML = `
-        <p><strong>✅ ${newPerson.name} added successfully!</strong></p>
-        ${newPerson.relationship === 'self' ? `
-          <div style="margin-top: 10px; padding: 10px; background: rgba(134, 88, 255, 0.1); border-radius: 8px;">
-            <p style="margin: 0 0 5px 0;"><strong>🔐 Cryptographic Identity Created</strong></p>
-            <p style="margin: 0; font-size: 12px;">Fingerprint: <code>${identity?.fingerprint?.substring(0, 20) || 'N/A'}...</code></p>
-          </div>
-        ` : ''}
-      `;
-      successMessage.style.display = 'block';
-    }
-
-    // Reset form
-    const form = modal.querySelector('#addPersonFormModal');
-    if (form) form.reset();
-
-    // Restore button
-    if (submitButton) {
-      submitButton.textContent = originalText;
-      submitButton.disabled = false;
-    }
-
-    // Refresh display
-    displayPeople();
-
-    // 🌟 CRITICAL: Refresh constellation if user came from there
-    setTimeout(() => {
-      refreshConstellationAfterPersonAdd();
-    }, 500);
-
-    // Close modal after delay
-    setTimeout(() => {
-      closeAddPersonModal();
-    }, 2000);
-
-    // Show identity card for self
-    if (newPerson.relationship === 'self' && identity) {
-      setTimeout(() => {
-        showIdentityCard(newPerson, identity);
-      }, 2500);
-    }
-
-  } catch (error) {
-    console.error('❌ Failed to add person:', error);
-    showNotification('Failed to add person: ' + error.message, 'error');
-
-    // Restore button
-    const submitButton = modal.querySelector('.submit-add-person-btn');
-    if (submitButton) {
-      submitButton.textContent = 'Add Person';
-      submitButton.disabled = false;
-    }
-  }
-}
-
-/**
- * 🌟 REFRESH CONSTELLATION AFTER PERSON ADD
- * Ensure new person appears immediately in constellation
- */
-function refreshConstellationAfterPersonAdd() {
-  console.log('🌟 PEOPLE PAGE: Refreshing constellation after person add');
-  
-  // Method 1: If constellation view function is available, call it
-  if (window.loadConstellationView && typeof window.loadConstellationView === 'function') {
-    console.log('🌟 PEOPLE PAGE: Calling loadConstellationView() after person add');
-    window.loadConstellationView();
-  }
-  // Method 2: Dispatch event for constellation to listen
-  else {
-    console.log('🌟 PEOPLE PAGE: Dispatching person added event for constellation');
-    window.dispatchEvent(new CustomEvent('emmaPersonAdded', {
-      detail: { 
-        action: 'refresh_constellation',
-        source: 'people_page',
-        timestamp: new Date().toISOString()
-      }
-    }));
-  }
-}
-
-// Store own identity keys securely
-async function storeOwnIdentity(personId, identity) {
-  try {
-    // Store in chrome.storage.local for persistence
-    const key = `emma_identity_${personId}`;
-    await chrome.storage.local.set({
-      [key]: {
-        signing: {
-          privateKey: identity.signing.privateKey,
-          publicKey: identity.signing.publicKey
-        },
-        encryption: {
-          privateKey: identity.encryption.privateKey,
-          publicKey: identity.encryption.publicKey
-        },
-        fingerprint: identity.fingerprint,
-        createdAt: identity.createdAt
-      }
-    });
-  } catch (error) {
-    console.error('Failed to store identity:', error);
-    // Fallback to localStorage if chrome.storage not available
-    localStorage.setItem(`emma_identity_${personId}`, JSON.stringify(identity));
-  }
-}
-
-// Show identity card for the user's own identity
-function showIdentityCard(person, identity) {
-  const card = generateIdentityCard(person, identity);
-
-  // Create a modal to show the identity card
-  const modal = document.createElement('div');
-  modal.className = 'modal-overlay active';
-  modal.innerHTML = `
-    <div class="modal" style="max-width: 500px; background: rgba(20, 20, 30, 0.95); backdrop-filter: blur(20px); border: 1px solid rgba(134, 88, 255, 0.3);">
-      <div class="modal-header">
-        <h2 style="color: #ffffff;">Your Cryptographic Identity</h2>
-        <button class="close-btn close-person-detail-modal" style="color: #cccccc;">×</button>
-      </div>
-      <div style="padding: 20px;">
-        <div style="background: rgba(134, 88, 255, 0.1); border: 1px solid rgba(134, 88, 255, 0.3); padding: 15px; border-radius: 8px; margin-bottom: 20px;">
-          <strong style="color: #ffffff;">Important:</strong> <span style="color: #cccccc;">Save this information securely. You'll need it to access shared vaults.</span>
-        </div>
-        <div class="identity-card">
-          <h3 style="color: #ffffff; margin-bottom: 8px;">${escapeHtml(person.name)}</h3>
-          <p style="color: #cccccc; margin-bottom: 20px;">${escapeHtml(person.email || 'No email')}</p>
-
-          <div class="fingerprint-section" style="background: rgba(40, 40, 50, 0.8); border: 1px solid rgba(134, 88, 255, 0.2); padding: 15px; border-radius: 8px; margin-bottom: 20px;">
-            <h4 style="margin: 0 0 10px 0; color: #ffffff;">Key Fingerprint</h4>
-            <code style="font-size: 12px; word-break: break-all; color: #8658ff; background: rgba(134, 88, 255, 0.1); padding: 8px; border-radius: 4px; display: block;">${escapeHtml(identity.fingerprint)}</code>
-          </div>
-
-          <div style="display: grid; gap: 10px;">
-            <button class="identity-export-btn" data-person-id="${person.id}" style="padding: 12px 20px; background: #8658ff; color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: 600; transition: all 0.3s;">
-              📥 Export Identity Keys
-            </button>
-            <button class="identity-copy-btn" data-fingerprint="${identity.fingerprint}" style="padding: 12px 20px; background: rgba(255, 255, 255, 0.1); color: white; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; cursor: pointer; font-weight: 600; transition: all 0.3s;">
-              📋 Copy Fingerprint
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  `;
-  document.body.appendChild(modal);
-}
-
-// Show person detail modal with edit capability
-async function showPersonDetailModal(person, identity) {
-
-  // Load existing sharing records for this person (to display shared memories)
-  const sharingRecords = await getSharingRecordsForPerson(person.id);
-  let sharedMemories = [];
-  try {
-    // Flatten records into a single list of { memoryId, permission }
-    const seen = new Set();
-    for (const rec of sharingRecords) {
-      for (const m of rec.memories || []) {
-        if (!seen.has(m.memoryId)) {
-          sharedMemories.push({ memoryId: m.memoryId, permission: m.permission });
-          seen.add(m.memoryId);
-        }
-      }
-    }
-  } catch (e) {
-    console.warn('Failed to process sharing records:', e);
-    sharedMemories = [];
-  }
-
-  // Resolve memory display metadata for shared items
-  let allCapsules = [];
-  if (sharedMemories.length > 0) {
-    try {
-      allCapsules = await loadMemoryCapsules();
-    } catch (e) {
-      console.warn('Could not load memory capsules for display:', e);
-    }
-  }
-
-  const sharedListHtml = sharedMemories.length === 0
-    ? `<div style="padding: 14px; color: #cccccc; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px;">No shared memory capsules yet.</div>`
-    : `<div class="shared-memories-list" style="max-height: 220px; overflow-y: auto; border: 1px solid rgba(134, 88, 255, 0.2); border-radius: 8px; background: rgba(40, 40, 50, 0.5);">
-        ${sharedMemories.map((entry) => {
-          const mem = resolveMemoryById(allCapsules, entry.memoryId) || { title: 'Unknown memory', core: { type: 'text' }, header: { created: null } };
-          const title = getMemoryTitle(mem);
-          const type = getMemoryType(mem);
-          const date = getMemoryDate(mem);
-          const icon = getMemoryIcon(type);
-          const permChip = `<span style=\"padding:2px 8px; border-radius:12px; font-size:11px; border:1px solid rgba(134,88,255,.3); color:#8658ff; background:rgba(134,88,255,.1);\">${entry.permission}</span>`;
-          return `<div class=\"shared-memory-item\" style=\"display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px solid rgba(255,255,255,0.06);\">
-                    <span style=\"font-size:16px;\">${icon}</span>
-                    <div style=\"flex:1;\">
-                      <div style=\"display:flex; align-items:center; gap:8px;\">
-                        <span style=\"color:#fff; font-weight:500;\">${escapeHtml(title)}</span>
-                        <span style=\"color:#ccc; font-size:12px;\">${escapeHtml(date)}</span>
-                      </div>
-                      <div style=\"color:#aaa; font-size:12px;\">${escapeHtml(type)}</div>
-                    </div>
-                    ${permChip}
-                  </div>`;
-        }).join('')}
-      </div>`;
-
-  // Create modal
-  const modal = document.createElement('div');
-  modal.className = 'modal-overlay active person-detail-modal';
-  modal.innerHTML = `
-    <div class="modal" style="max-width: 600px; background: rgba(20, 20, 30, 0.98); backdrop-filter: blur(20px); border: 1px solid rgba(134, 88, 255, 0.3);">
-      <div class="modal-header">
-        <div style="display: flex; align-items: center; gap: 12px;">
-          <div class="person-avatar" style="width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, #8658ff, #b794f6); display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 16px; overflow: hidden;">
-            ${person.profilePicture
-              ? `<img src="${person.profilePicture}" style="width: 100%; height: 100%; object-fit: cover;" alt="${escapeHtml(person.name)}">`
-              : escapeHtml(person.name.split(' ').map(n => n[0]).join('').toUpperCase())
-            }
-          </div>
-          <h2 style="color: #ffffff; margin: 0; flex: 1;">${escapeHtml(person.name)}</h2>
-        </div>
-        <div style="display: flex; align-items: center; gap: 8px;">
-          <button class="edit-person-btn" data-person-id="${person.id}" style="width: 32px; height: 32px; background: rgba(134, 88, 255, 0.2); color: #8658ff; border: 1px solid rgba(134, 88, 255, 0.3); border-radius: 8px; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center;" title="Edit Person">
-            ✏️
-          </button>
-          <button class="close-btn close-person-detail-modal" style="color: #cccccc;">×</button>
-        </div>
-      </div>
-
-      <div style="padding: 0 32px 32px 32px;">
-        <!-- Person Info Form -->
-        <div class="person-info-form">
-          <div class="form-group">
-            <label class="form-label">Profile Picture</label>
-            <div style="display: flex; align-items: center; gap: 12px;">
-              <div class="edit-profile-pic-preview" style="width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, #8658ff, #b794f6); display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 20px; border: 2px solid rgba(134, 88, 255, 0.3); overflow: hidden;">
-                ${person.profilePicture
-                  ? `<img src="${person.profilePicture}" style="width: 100%; height: 100%; object-fit: cover;" alt="${escapeHtml(person.name)}">`
-                  : escapeHtml(person.name.split(' ').map(n => n[0]).join('').toUpperCase())
-                }
-              </div>
-              <div style="flex: 1;">
-                <input type="file" class="form-input" id="edit-profile-pic" accept="image/*" style="background: rgba(255, 255, 255, 0.95); color: #333333; border: 1px solid rgba(134, 88, 255, 0.2); padding: 8px 12px;" disabled>
-                <div style="font-size: 12px; color: #cccccc; margin-top: 4px;">PNG, JPG up to 5MB</div>
-              </div>
-            </div>
-          </div>
-
-          <div class="form-group">
-            <label class="form-label" for="edit-name">Name</label>
-            <input type="text" id="edit-name" class="form-input" value="${escapeHtml(person.name)}" readonly>
-          </div>
-
-          <div class="form-group">
-            <label class="form-label" for="edit-email">Email</label>
-            <input type="email" id="edit-email" class="form-input" value="${escapeHtml(person.email || '')}" readonly placeholder="No email provided">
-          </div>
-
-          <div class="form-group">
-            <label class="form-label" for="edit-phone">Phone</label>
-            <input type="tel" id="edit-phone" class="form-input" value="${escapeHtml(person.phone || '')}" readonly placeholder="No phone provided">
-          </div>
-
-          <div class="form-group">
-            <label class="form-label" for="edit-relationship">Relationship</label>
-            <select id="edit-relationship" class="form-input" disabled>
-              <option value="family" ${person.relationship === 'family' ? 'selected' : ''}>👨‍👩‍👧‍👦 Family</option>
-              <option value="friend" ${person.relationship === 'friend' ? 'selected' : ''}>👥 Friend</option>
-              <option value="colleague" ${person.relationship === 'colleague' ? 'selected' : ''}>💼 Colleague</option>
-              <option value="neighbor" ${person.relationship === 'neighbor' ? 'selected' : ''}>🏘️ Neighbor</option>
-              <option value="healthcare" ${person.relationship === 'healthcare' ? 'selected' : ''}>⚕️ Healthcare</option>
-              <option value="other" ${person.relationship === 'other' ? 'selected' : ''}>🤝 Other</option>
-              <option value="self" ${person.relationship === 'self' ? 'selected' : ''}>🧑 Myself</option>
-            </select>
-          </div>
-
-          <div class="form-group">
-            <label class="form-label" for="edit-notes">Notes</label>
-            <textarea id="edit-notes" class="form-input form-textarea" readonly placeholder="No notes added yet">${escapeHtml(person.notes || '')}</textarea>
-          </div>
-
-          <div class="form-group">
-            <label class="form-label">Shared Memory Access</label>
-            ${sharedListHtml}
-            <div style="display:flex; gap:8px; margin-top:10px;">
-              <button class="share-vault-btn-modal" data-person-id="${person.id}" style="padding: 10px 16px; background: rgba(134, 88, 255, 0.2); color: #8658ff; border: 1px solid rgba(134, 88, 255, 0.3); border-radius: 8px; cursor: pointer; font-weight: 600;">
-                🔐 Manage Sharing
-              </button>
-            </div>
-          </div>
-
-          ${identity ? `
-          <div class="form-group">
-            <label class="form-label">Cryptographic Identity</label>
-            <div style="background: rgba(40, 40, 50, 0.8); border: 1px solid rgba(134, 88, 255, 0.2); padding: 15px; border-radius: 8px;">
-              <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 12px;">
-                <span style="color: #00ff88; font-size: 12px;">●</span>
-                <span style="color: #ffffff; font-size: 14px; font-weight: 500;">Verified Identity</span>
-                <span style="color: #cccccc; font-size: 12px; margin-left: auto;">Created ${new Date(identity.createdAt || person.keyCreatedAt).toLocaleDateString()}</span>
-              </div>
-
-              <div style="margin-bottom: 12px;">
-                <div style="color: #cccccc; font-size: 12px; margin-bottom: 4px;">Key Fingerprint:</div>
-                <div style="display: flex; align-items: center; gap: 8px;">
-                  <code class="identity-fingerprint-display" style="font-size: 11px; word-break: break-all; color: #8658ff; background: rgba(134, 88, 255, 0.1); padding: 8px; border-radius: 4px; flex: 1;">${escapeHtml(identity.fingerprint)}</code>
-                  <input type="text" id="edit-identity-fingerprint" class="form-input identity-fingerprint-edit" value="${escapeHtml(identity.fingerprint)}" style="font-size: 11px; font-family: monospace; color: #8658ff; background: rgba(134, 88, 255, 0.1); padding: 8px; border-radius: 4px; flex: 1; border: 1px solid rgba(134, 88, 255, 0.3); display: none;" placeholder="Enter new identity fingerprint">
-                  <button class="identity-copy-btn" data-fingerprint="${identity.fingerprint}" style="padding: 6px 8px; background: rgba(255, 255, 255, 0.05); color: #cccccc; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 4px; cursor: pointer; font-size: 11px;" title="Copy Fingerprint">
-                    📋
-                  </button>
-                </div>
-              </div>
-
-              <div style="display: flex; gap: 8px;">
-                <button class="identity-export-btn" data-person-id="${person.id}" style="padding: 8px 12px; background: rgba(134, 88, 255, 0.2); color: #8658ff; border: 1px solid rgba(134, 88, 255, 0.3); border-radius: 6px; cursor: pointer; font-size: 12px; flex: 1;">
-                  📥 Export Keys
-                </button>
-                <button class="identity-share-btn" data-fingerprint="${identity.fingerprint}" style="padding: 8px 12px; background: rgba(0, 255, 136, 0.1); color: #00ff88; border: 1px solid rgba(0, 255, 136, 0.2); border-radius: 6px; cursor: pointer; font-size: 12px; flex: 1;">
-                  🔗 Share Identity
-                </button>
-              </div>
-            </div>
-          </div>
-          ` : (person.keyFingerprint ? `
-          <div class="form-group">
-            <label class="form-label">Cryptographic Identity</label>
-            <div style="background: rgba(40, 40, 50, 0.8); border: 1px solid rgba(134, 88, 255, 0.2); padding: 15px; border-radius: 8px;">
-              <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 12px;">
-                <span style="color: #ffc107; font-size: 12px;">●</span>
-                <span style="color: #ffffff; font-size: 14px; font-weight: 500;">Public Identity</span>
-                <span style="color: #cccccc; font-size: 12px; margin-left: auto;">Added ${new Date(person.keyCreatedAt || person.dateAdded).toLocaleDateString()}</span>
-              </div>
-
-              <div style="margin-bottom: 12px;">
-                <div style="color: #cccccc; font-size: 12px; margin-bottom: 4px;">Key Fingerprint:</div>
-                <div style="display: flex; align-items: center; gap: 8px;">
-                  <code class="identity-fingerprint-display" style="font-size: 11px; word-break: break-all; color: #8658ff; background: rgba(134, 88, 255, 0.1); padding: 8px; border-radius: 4px; flex: 1;">${escapeHtml(person.keyFingerprint)}</code>
-                  <input type="text" id="edit-identity-fingerprint" class="form-input identity-fingerprint-edit" value="${escapeHtml(person.keyFingerprint)}" style="font-size: 11px; font-family: monospace; color: #8658ff; background: rgba(134, 88, 255, 0.1); padding: 8px; border-radius: 4px; flex: 1; border: 1px solid rgba(134, 88, 255, 0.3); display: none;" placeholder="Enter new identity fingerprint">
-                  <button class="identity-copy-btn" data-fingerprint="${person.keyFingerprint}" style="padding: 6px 8px; background: rgba(255, 255, 255, 0.05); color: #cccccc; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 4px; cursor: pointer; font-size: 11px;" title="Copy Fingerprint">
-                    📋
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-          ` : '')}
-        </div>
-
-        <!-- Action Buttons -->
-        <div style="display: flex; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(134, 88, 255, 0.2);">
-          <button class="save-person-btn" data-person-id="${person.id}" style="padding: 12px 24px; background: #00ff88; color: #000; border: none; border-radius: 8px; cursor: pointer; font-weight: 600; transition: all 0.3s; flex: 1; display: none;">
-            💾 Save Changes
-          </button>
-          <button class="cancel-edit-btn" style="padding: 12px 24px; background: rgba(255, 255, 255, 0.1); color: white; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; cursor: pointer; font-weight: 600; transition: all 0.3s; display: none;">
-            ❌ Cancel
-          </button>
-          ${identity ? `
-          <button class="share-vault-btn-modal" data-person-id="${person.id}" style="padding: 12px 24px; background: rgba(134, 88, 255, 0.2); color: #8658ff; border: 1px solid rgba(134, 88, 255, 0.3); border-radius: 8px; cursor: pointer; font-weight: 600; transition: all 0.3s;">
-            🔐 Share Vault
-          </button>
-          ` : ''}
-        </div>
-      </div>
-    </div>
-  `;
-
-  document.body.appendChild(modal);
-}
-
-// Fetch sharing records for a specific person
-async function getSharingRecordsForPerson(personId) {
-  try {
-    let records = [];
-    try {
-      const result = await chrome.storage.local.get(['emma_vault_sharing']);
-      records = result.emma_vault_sharing || [];
-    } catch (e) {
-      records = JSON.parse(localStorage.getItem('emma_vault_sharing') || '[]');
-    }
-    return records.filter(r => parseInt(r.personId) === parseInt(personId) && r.status !== 'revoked');
-  } catch (e) {
-    console.warn('Failed to load sharing records:', e);
-    return [];
-  }
-}
-
-// Resolve a memory capsule by ID across various storage shapes
-function resolveMemoryById(allCapsules, memoryId) {
-  if (!allCapsules || allCapsules.length === 0) return null;
-  const byId = allCapsules.find(m => String(m.id) === String(memoryId));
-  if (byId) return byId;
-  const byHeaderId = allCapsules.find(m => String(m.header?.id) === String(memoryId));
-  return byHeaderId || null;
-}
-
-// Enable editing mode for person details
-function enablePersonEdit(personId) {
-
-  const modal = document.querySelector('.person-detail-modal');
-  if (!modal) return;
-
-  // Enable all form inputs
-  const nameInput = modal.querySelector('#edit-name');
-  const emailInput = modal.querySelector('#edit-email');
-  const phoneInput = modal.querySelector('#edit-phone');
-  const relationshipSelect = modal.querySelector('#edit-relationship');
-  const notesTextarea = modal.querySelector('#edit-notes');
-  const profilePicInput = modal.querySelector('#edit-profile-pic');
-  const identityFingerprintInput = modal.querySelector('#edit-identity-fingerprint');
-
-  [nameInput, emailInput, phoneInput, notesTextarea].forEach(input => {
-    if (input) {
-      input.removeAttribute('readonly');
-      input.style.background = 'rgba(255, 255, 255, 0.98)';
-      input.style.border = '2px solid rgba(134, 88, 255, 0.4)';
-    }
-  });
-
-  if (profilePicInput) {
-    profilePicInput.removeAttribute('disabled');
-    profilePicInput.style.background = 'rgba(255, 255, 255, 0.98)';
-    profilePicInput.style.border = '2px solid rgba(134, 88, 255, 0.4)';
-
-    // Add preview functionality for edit mode
-    profilePicInput.addEventListener('change', function(e) {
-      const file = e.target.files[0];
-      const preview = modal.querySelector('.edit-profile-pic-preview');
-      if (file && preview) {
-        if (file.size > 5 * 1024 * 1024) {
-          showNotification('Image must be smaller than 5MB', 'error');
-          e.target.value = '';
-          return;
-        }
-
-        if (!file.type.startsWith('image/')) {
-          showNotification('Please select an image file', 'error');
-          e.target.value = '';
-          return;
-        }
-
-        const reader = new FileReader();
-        reader.onload = function(e) {
-          preview.innerHTML = `<img src="${e.target.result}" style="width: 100%; height: 100%; object-fit: cover;" alt="Preview">`;
-        };
-        reader.readAsDataURL(file);
-      }
-    });
-  }
-
-  if (relationshipSelect) {
-    relationshipSelect.removeAttribute('disabled');
-    relationshipSelect.style.background = 'rgba(255, 255, 255, 0.98)';
-    relationshipSelect.style.border = '2px solid rgba(134, 88, 255, 0.4)';
-  }
-
-  // Enable identity fingerprint editing
-  if (identityFingerprintInput) {
-    identityFingerprintInput.removeAttribute('readonly');
-    identityFingerprintInput.style.background = 'rgba(134, 88, 255, 0.15)';
-    identityFingerprintInput.style.border = '2px solid rgba(134, 88, 255, 0.4)';
-  }
-
-  // Toggle display between read-only and editable identity fingerprint
-  const fingerprintDisplay = modal.querySelectorAll('.identity-fingerprint-display');
-  const fingerprintEdit = modal.querySelectorAll('.identity-fingerprint-edit');
-
-  fingerprintDisplay.forEach(display => {
-    if (display) display.style.display = 'none';
-  });
-
-  fingerprintEdit.forEach(edit => {
-    if (edit) edit.style.display = 'block';
-  });
-
-  // Show/hide buttons
-  const editBtn = modal.querySelector('.edit-person-btn');
-  const saveBtn = modal.querySelector('.save-person-btn');
-  const cancelBtn = modal.querySelector('.cancel-edit-btn');
-
-  if (editBtn) {
-    editBtn.style.display = 'none'; // Hide edit icon in header
-  }
-  if (saveBtn) saveBtn.style.display = 'block';
-  if (cancelBtn) cancelBtn.style.display = 'block';
-
-  // Store original values for cancel functionality
-  modal.dataset.originalName = nameInput?.value || '';
-  modal.dataset.originalEmail = emailInput?.value || '';
-  modal.dataset.originalPhone = phoneInput?.value || '';
-  modal.dataset.originalRelationship = relationshipSelect?.value || '';
-  modal.dataset.originalNotes = notesTextarea?.value || '';
-  modal.dataset.originalIdentityFingerprint = identityFingerprintInput?.value || '';
-
-  showNotification('Edit mode enabled. Make your changes and click Save.', 'info');
-}
-
-// Save person edit changes
-async function savePersonEdit(personId) {
-
-  const modal = document.querySelector('.person-detail-modal');
-  if (!modal) return;
-
-  try {
-    // Get form values
-    const name = modal.querySelector('#edit-name')?.value?.trim();
-    const email = modal.querySelector('#edit-email')?.value?.trim();
-    const phone = modal.querySelector('#edit-phone')?.value?.trim();
-    const relationship = modal.querySelector('#edit-relationship')?.value;
-    const notes = modal.querySelector('#edit-notes')?.value?.trim();
-    const identityFingerprint = modal.querySelector('#edit-identity-fingerprint')?.value?.trim();
-
-    // Validate required fields
-    if (!name) {
-      showNotification('Name is required', 'error');
-      return;
-    }
-
-    // Validate identity fingerprint format if provided
-    if (identityFingerprint && identityFingerprint.length > 0) {
-      if (identityFingerprint.length < 20) {
-        showNotification('Identity fingerprint must be at least 20 characters', 'error');
-        return;
-      }
-      // Basic hex validation
-      if (!/^[a-fA-F0-9:]+$/.test(identityFingerprint)) {
-        showNotification('Identity fingerprint must contain only hexadecimal characters and colons', 'error');
-        return;
-      }
-    }
-
-    // Get current people data
-    let people = [];
-    try {
-      const result = await chrome.storage.local.get(['emma_people']);
-      people = result.emma_people || JSON.parse(localStorage.getItem('emma_people') || '[]');
-    } catch (error) {
-      people = JSON.parse(localStorage.getItem('emma_people') || '[]');
-    }
-
-    // Find and update the person
-    const personIndex = people.findIndex(p => p.id === parseInt(personId));
-
-    if (personIndex === -1) {
-      showNotification('Person not found', 'error');
-      return;
-    }
-
-    // Handle profile picture update
-    let profilePicture = people[personIndex].profilePicture; // Keep existing by default
-    const profilePicInput = modal.querySelector('#edit-profile-pic');
-    if (profilePicInput?.files?.[0]) {
-      const file = profilePicInput.files[0];
-      const reader = new FileReader();
-      profilePicture = await new Promise((resolve) => {
-        reader.onload = (e) => resolve(e.target.result);
-        reader.readAsDataURL(file);
-      });
-    }
-
-    // Update person data
-    people[personIndex] = {
-      ...people[personIndex],
-      name,
-      email: email || null,
-      phone: phone || null,
-      relationship,
-      notes: notes || null,
-      profilePicture: profilePicture,
-      lastModified: new Date().toISOString()
-    };
-
-    // Check if identity fingerprint is being updated
-    const hasIdentityUpdate = identityFingerprint && identityFingerprint !== people[personIndex].keyFingerprint;
-
-    // Update identity fingerprint if provided and different
-    if (hasIdentityUpdate) {
-      people[personIndex].keyFingerprint = identityFingerprint;
-      people[personIndex].keyUpdatedAt = Date.now();
-
-    }
-
-    // Save to storage
-    try {
-      await chrome.storage.local.set({ emma_people: people });
-    } catch (error) {
-      localStorage.setItem('emma_people', JSON.stringify(people));
-    }
-
-    // Update allPeople global variable
-    allPeople = people;
-
-    // Refresh the display
-    displayPeople();
-
-    // Close modal and show success
-    modal.remove();
-    showNotification(`Person updated successfully!${hasIdentityUpdate ? ' Identity fingerprint also updated.' : ''}`, 'success');
-
-  } catch (error) {
-    console.error('❌ Failed to save person:', error);
-    showNotification('Failed to save changes: ' + error.message, 'error');
-  }
-}
-
-// Cancel person edit changes
-function cancelPersonEdit() {
-
-  const modal = document.querySelector('.person-detail-modal');
-  if (!modal) return;
-
-  // Restore original values
-  const nameInput = modal.querySelector('#edit-name');
-  const emailInput = modal.querySelector('#edit-email');
-  const phoneInput = modal.querySelector('#edit-phone');
-  const relationshipSelect = modal.querySelector('#edit-relationship');
-  const notesTextarea = modal.querySelector('#edit-notes');
-  const identityFingerprintInput = modal.querySelector('#edit-identity-fingerprint');
-
-  if (nameInput) nameInput.value = modal.dataset.originalName || '';
-  if (emailInput) emailInput.value = modal.dataset.originalEmail || '';
-  if (phoneInput) phoneInput.value = modal.dataset.originalPhone || '';
-  if (relationshipSelect) relationshipSelect.value = modal.dataset.originalRelationship || '';
-  if (notesTextarea) notesTextarea.value = modal.dataset.originalNotes || '';
-  if (identityFingerprintInput) identityFingerprintInput.value = modal.dataset.originalIdentityFingerprint || '';
-
-  // Disable editing
-  [nameInput, emailInput, phoneInput, notesTextarea, identityFingerprintInput].forEach(input => {
-    if (input) {
-      input.setAttribute('readonly', 'readonly');
-      input.style.background = 'rgba(255, 255, 255, 0.95)';
-      input.style.border = '1px solid rgba(134, 88, 255, 0.2)';
-    }
-  });
-
-  // Restore identity fingerprint display/edit toggle
-  const fingerprintDisplay = modal.querySelectorAll('.identity-fingerprint-display');
-  const fingerprintEdit = modal.querySelectorAll('.identity-fingerprint-edit');
-
-  fingerprintDisplay.forEach(display => {
-    if (display) display.style.display = 'block';
-  });
-
-  fingerprintEdit.forEach(edit => {
-    if (edit) edit.style.display = 'none';
-  });
-
-  if (relationshipSelect) {
-    relationshipSelect.setAttribute('disabled', 'disabled');
-    relationshipSelect.style.background = 'rgba(255, 255, 255, 0.95)';
-    relationshipSelect.style.border = '1px solid rgba(134, 88, 255, 0.2)';
-  }
-
-  const profilePicInput = modal.querySelector('#edit-profile-pic');
-  if (profilePicInput) {
-    profilePicInput.setAttribute('disabled', 'disabled');
-    profilePicInput.style.background = 'rgba(255, 255, 255, 0.95)';
-    profilePicInput.style.border = '1px solid rgba(134, 88, 255, 0.2)';
-    profilePicInput.value = ''; // Clear file input
-  }
-
-  // Show/hide buttons
-  const editBtn = modal.querySelector('.edit-person-btn');
-  const saveBtn = modal.querySelector('.save-person-btn');
-  const cancelBtn = modal.querySelector('.cancel-edit-btn');
-
-  if (editBtn) editBtn.style.display = 'flex'; // Show edit icon in header again
-  if (saveBtn) saveBtn.style.display = 'none';
-  if (cancelBtn) cancelBtn.style.display = 'none';
-
-  showNotification('Changes cancelled', 'info');
-}
-
-// Export identity for backup
-async function exportIdentity(personId) {
-  try {
-
-    let identity = null;
-
-    // Try chrome.storage first
-    try {
-      const result = await chrome.storage.local.get([`emma_identity_${personId}`]);
-      identity = result[`emma_identity_${personId}`];
-
-    } catch (chromeError) {
-      console.warn('⚠️ Chrome storage failed, trying localStorage:', chromeError);
-    }
-
-    // Fallback to localStorage
-    if (!identity) {
-      try {
-        const stored = localStorage.getItem(`emma_identity_${personId}`);
-        if (stored) {
-          identity = JSON.parse(stored);
-
-        }
-      } catch (localError) {
-        console.warn('⚠️ LocalStorage failed:', localError);
-      }
-    }
-
-    if (!identity) {
-      console.error('❌ No identity found for person:', personId);
-      showNotification('Identity not found. Make sure this is your own identity.', 'error');
-      return;
-    }
-
-    const backup = {
-      version: '1.0',
-      type: 'emma-identity-backup',
-      personId,
-      createdAt: new Date().toISOString(),
-      identity
-    };
-
-    const blob = new Blob([JSON.stringify(backup, null, 2)], { type: 'application/json' });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = `emma-identity-${personId}-backup.json`;
-    a.style.display = 'none';
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
-    URL.revokeObjectURL(url);
-
-    showNotification('Identity exported successfully!', 'success');
-  } catch (error) {
-    console.error('❌ Failed to export identity:', error);
-    showNotification('Failed to export identity: ' + error.message, 'error');
-  }
-}
-
-// Copy fingerprint to clipboard
-function copyFingerprint(fingerprint) {
-  navigator.clipboard.writeText(fingerprint).then(() => {
-    showNotification('Fingerprint copied to clipboard', 'success');
-  }).catch(() => {
-    showNotification('Failed to copy fingerprint', 'error');
-  });
-}
-
-// Share identity fingerprint
-function shareIdentity(fingerprint) {
-  const shareText = `Emma Identity Fingerprint:\n${fingerprint}\n\nThis cryptographic fingerprint can be used to verify my identity in secure communications.`;
-
-  if (navigator.share) {
-    navigator.share({
-      title: 'Emma Identity Fingerprint',
-      text: shareText,
-    }).then(() => {
-      showNotification('Identity shared successfully', 'success');
-    }).catch((error) => {
-
-      // Fallback to copy
-      copyToClipboard(shareText);
-    });
-  } else {
-    // Fallback for browsers that don't support Web Share API
-    copyToClipboard(shareText);
-  }
-}
-
-function copyToClipboard(text) {
-  navigator.clipboard.writeText(text).then(() => {
-    showNotification('Identity information copied to clipboard', 'success');
-  }).catch(err => {
-    console.error('Failed to copy:', err);
-    showNotification('Failed to copy identity information', 'error');
-  });
-}
-
-// Show share vault modal
-async function showShareVaultModal(personId) {
-  const person = allPeople.find(p => p.id === personId);
-  if (!person) return;
-
-  // Load memory capsules
-  let memories = [];
-  try {
-    memories = await loadMemoryCapsules();
-  } catch (error) {
-    console.error('Failed to load memories:', error);
-    showNotification('Failed to load memory capsules', 'error');
-    return;
-  }
-
-  // Create share vault modal
-  const modal = document.createElement('div');
-  modal.className = 'modal-overlay active share-vault-modal';
-  modal.innerHTML = `
-    <div class="modal" style="max-width: 700px; background: rgba(20, 20, 30, 0.98); backdrop-filter: blur(20px); border: 1px solid rgba(134, 88, 255, 0.3);">
-      <div class="modal-header">
-        <div style="display: flex; align-items: center; gap: 12px;">
-          <div class="person-avatar" style="width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(135deg, #8658ff, #b794f6); display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 14px; overflow: hidden;">
-            ${person.profilePicture
-              ? `<img src="${person.profilePicture}" style="width: 100%; height: 100%; object-fit: cover;" alt="${escapeHtml(person.name)}">`
-              : escapeHtml(person.name.split(' ').map(n => n[0]).join('').toUpperCase())
-            }
-          </div>
-          <div>
-            <h2 style="color: #ffffff; margin: 0; font-size: 20px;">Share Vault with ${escapeHtml(person.name)}</h2>
-            <p style="color: #cccccc; margin: 0; font-size: 14px;">Grant access to specific memory capsules</p>
-          </div>
-        </div>
-        <button class="close-btn close-share-vault-modal" style="color: #cccccc;">×</button>
-      </div>
-
-      <div style="padding: 0 32px 32px 32px;">
-        <!-- Permission Level Selection -->
-        <div class="form-group" style="margin-bottom: 24px;">
-          <label class="form-label" style="color: #ffffff; margin-bottom: 12px;">Default Permission Level</label>
-          <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px;">
-            <div class="permission-option" data-permission="view" style="padding: 12px; background: rgba(134, 88, 255, 0.1); border: 2px solid rgba(134, 88, 255, 0.3); border-radius: 8px; cursor: pointer; text-align: center; transition: all 0.3s;">
-              <div style="font-size: 20px; margin-bottom: 4px;">👁️</div>
-              <div style="color: #ffffff; font-weight: 600; font-size: 14px;">View Only</div>
-              <div style="color: #cccccc; font-size: 12px;">Can view memories</div>
-            </div>
-            <div class="permission-option" data-permission="comment" style="padding: 12px; background: rgba(255, 255, 255, 0.05); border: 2px solid rgba(255, 255, 255, 0.1); border-radius: 8px; cursor: pointer; text-align: center; transition: all 0.3s;">
-              <div style="font-size: 20px; margin-bottom: 4px;">💬</div>
-              <div style="color: #ffffff; font-weight: 600; font-size: 14px;">Comment</div>
-              <div style="color: #cccccc; font-size: 12px;">Can add notes</div>
-            </div>
-            <div class="permission-option" data-permission="contribute" style="padding: 12px; background: rgba(255, 255, 255, 0.05); border: 2px solid rgba(255, 255, 255, 0.1); border-radius: 8px; cursor: pointer; text-align: center; transition: all 0.3s;">
-              <div style="font-size: 20px; margin-bottom: 4px;">📎</div>
-              <div style="color: #ffffff; font-weight: 600; font-size: 14px;">Contribute</div>
-              <div style="color: #cccccc; font-size: 12px;">Can add media</div>
-            </div>
-            <div class="permission-option" data-permission="edit" style="padding: 12px; background: rgba(255, 255, 255, 0.05); border: 2px solid rgba(255, 255, 255, 0.1); border-radius: 8px; cursor: pointer; text-align: center; transition: all 0.3s;">
-              <div style="font-size: 20px; margin-bottom: 4px;">✏️</div>
-              <div style="color: #ffffff; font-weight: 600; font-size: 14px;">Edit</div>
-              <div style="color: #cccccc; font-size: 12px;">Can modify memories</div>
-            </div>
-          </div>
-        </div>
-
-        <!-- Memory Capsule Selection -->
-        <div class="form-group">
-          <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;">
-            <label class="form-label" style="color: #ffffff; margin: 0;">Memory Capsules (${memories.length})</label>
-            <div style="display: flex; gap: 8px;">
-              <button class="select-all-memories" style="padding: 6px 12px; background: rgba(134, 88, 255, 0.2); color: #8658ff; border: 1px solid rgba(134, 88, 255, 0.3); border-radius: 6px; cursor: pointer; font-size: 12px;">
-                Select All
-              </button>
-              <button class="select-none-memories" style="padding: 6px 12px; background: rgba(255, 255, 255, 0.05); color: #cccccc; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px; cursor: pointer; font-size: 12px;">
-                Select None
-              </button>
-            </div>
-          </div>
-
-          <div class="memory-list" style="max-height: 300px; overflow-y: auto; border: 1px solid rgba(134, 88, 255, 0.2); border-radius: 8px; background: rgba(40, 40, 50, 0.5);">
-            ${memories.length === 0 ? `
-              <div style="padding: 40px; text-align: center; color: #cccccc;">
-                <div style="font-size: 48px; margin-bottom: 12px;">📝</div>
-                <div style="font-size: 16px; margin-bottom: 8px;">No Memory Capsules Found</div>
-                <div style="font-size: 14px;">Create some memories first, then share them with others.</div>
-              </div>
-            ` : memories.map(memory => createMemorySelectionItem(memory)).join('')}
-          </div>
-        </div>
-
-        <!-- Action Buttons -->
-        <div style="display: flex; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(134, 88, 255, 0.2);">
-          <button class="cancel-share-vault" style="flex: 1; padding: 12px 24px; background: rgba(255, 255, 255, 0.1); color: white; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; cursor: pointer; font-weight: 600; transition: all 0.3s;">
-            Cancel
-          </button>
-          <button class="confirm-share-vault" data-person-id="${personId}" style="flex: 2; padding: 12px 24px; background: #8658ff; color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: 600; transition: all 0.3s;">
-            🔐 Share Vault Access
-          </button>
-        </div>
-      </div>
-    </div>
-  `;
-
-  document.body.appendChild(modal);
-
-  // Add event listeners for the modal
-  setupShareVaultModalListeners(modal, personId);
-}
-
-// Load memory capsules from storage - use the same logic as memories.js
-async function loadMemoryCapsules() {
-
-  try {
-    // Try vault first (same as memories.js)
-    try {
-      const vaultList = await chrome.runtime.sendMessage({ action: 'vault.listCapsules', limit: 200 });
-      if (vaultList && vaultList.success && vaultList.items && vaultList.items.length > 0) {
-        const memories = vaultList.items.map(h => ({
-          id: h.id,
-          title: h.title || '(Encrypted Capsule)',
-          timestamp: h.ts || Date.now(),
-          role: h.role || 'assistant',
-          source: h.source || 'unknown',
-          type: 'vault'
-        }));
-
-        return memories;
-      }
-    } catch {}
-
-    // Try background next (same as memories.js)
-    try {
-      const response = await chrome.runtime.sendMessage({ action: 'getAllMemories', limit: 1000, offset: 0 });
-      if (response && response.success && response.memories && response.memories.length > 0) {
-
-        return response.memories;
-      }
-    } catch {}
-
-    // Fallback to chrome storage (same as memories.js)
-    const result = await chrome.storage.local.get(['emma_memories']);
-    const memories = result.emma_memories || [];
-
-    return memories;
-
-  } catch (error) {
-    console.error('❌ Failed to load memory capsules:', error);
-    return [];
-  }
-}
-
-// Create memory selection item for the share modal
-function createMemorySelectionItem(memory) {
-  const memoryTitle = getMemoryTitle(memory);
-  const memoryType = getMemoryType(memory);
-  const memoryDate = getMemoryDate(memory);
-  const memoryPreview = getMemoryPreview(memory);
-
-  return `
-    <div class="memory-item" data-memory-id="${escapeHtml(memory.id || memory.header?.id)}" style="padding: 12px; border-bottom: 1px solid rgba(134, 88, 255, 0.1); display: flex; align-items: center; gap: 12px; cursor: pointer; transition: background 0.3s;">
-      <label style="display: flex; align-items: center; gap: 12px; cursor: pointer; flex: 1;">
-        <input type="checkbox" class="memory-checkbox" style="width: 16px; height: 16px; accent-color: #8658ff;" checked>
-        <div style="flex: 1;">
-          <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 4px;">
-            <span style="font-size: 16px;">${getMemoryIcon(memoryType)}</span>
-            <span style="color: #ffffff; font-weight: 500; font-size: 14px;">${escapeHtml(memoryTitle)}</span>
-            <span style="color: #cccccc; font-size: 12px;">${escapeHtml(memoryDate)}</span>
-          </div>
-          <div style="color: #cccccc; font-size: 12px; line-height: 1.4;">${escapeHtml(memoryPreview)}</div>
-        </div>
-      </label>
-      <div class="memory-permission-override" style="display: flex; gap: 4px;">
-        <button class="permission-mini view" data-permission="view" style="width: 24px; height: 24px; border: 1px solid rgba(134, 88, 255, 0.3); background: rgba(134, 88, 255, 0.1); color: #8658ff; border-radius: 4px; cursor: pointer; font-size: 12px;" title="View Only">👁️</button>
-        <button class="permission-mini comment" data-permission="comment" style="width: 24px; height: 24px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.05); color: #cccccc; border-radius: 4px; cursor: pointer; font-size: 12px;" title="Can Comment">💬</button>
-        <button class="permission-mini contribute" data-permission="contribute" style="width: 24px; height: 24px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.05); color: #cccccc; border-radius: 4px; cursor: pointer; font-size: 12px;" title="Can Add Media">📎</button>
-        <button class="permission-mini edit" data-permission="edit" style="width: 24px; height: 24px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.05); color: #cccccc; border-radius: 4px; cursor: pointer; font-size: 12px;" title="Can Edit">✏️</button>
-      </div>
-    </div>
-  `;
-}
-
-// Helper functions for memory display
-function getMemoryTitle(memory) {
-  if (memory.title) return memory.title;
-  if (memory.core?.content) {
-    const content = memory.core.content;
-    if (typeof content === 'string') {
-      return content.substring(0, 50) + (content.length > 50 ? '...' : '');
-    }
-  }
-  if (memory.content) {
-    return memory.content.substring(0, 50) + (memory.content.length > 50 ? '...' : '');
-  }
-  return 'Untitled Memory';
-}
-
-function getMemoryType(memory) {
-  if (memory.core?.type) return memory.core.type;
-  if (memory.type) return memory.type;
-  if (memory.source) return memory.source;
-  return 'text';
-}
-
-function getMemoryDate(memory) {
-  const date = memory.header?.created || memory.created || memory.timestamp || memory.dateAdded;
-  if (date) {
-    return new Date(date).toLocaleDateString();
-  }
-  return 'Unknown date';
-}
-
-function getMemoryPreview(memory) {
-  if (memory.semantic?.summary) return memory.semantic.summary;
-  if (memory.summary) return memory.summary;
-  if (memory.core?.content) {
-    const content = memory.core.content;
-    if (typeof content === 'string') {
-      return content.substring(0, 100) + (content.length > 100 ? '...' : '');
-    }
-  }
-  if (memory.content) {
-    return memory.content.substring(0, 100) + (memory.content.length > 100 ? '...' : '');
-  }
-  return 'No preview available';
-}
-
-function getMemoryIcon(type) {
-  const iconMap = {
-    'text': '📝',
-    'image': '🖼️',
-    'video': '🎥',
-    'audio': '🎵',
-    'document': '📄',
-    'conversation': '💬',
-    'note': '📋',
-    'web': '🌐',
-    'social': '📱',
-    'email': '📧'
-  };
-  return iconMap[type] || '📝';
-}
-
-// Setup event listeners for share vault modal
-function setupShareVaultModalListeners(modal, personId) {
-  // Permission selection
-  const permissionOptions = modal.querySelectorAll('.permission-option');
-  permissionOptions.forEach(option => {
-    option.addEventListener('click', function() {
-      // Remove active state from all options
-      permissionOptions.forEach(opt => {
-        opt.style.background = 'rgba(255, 255, 255, 0.05)';
-        opt.style.border = '2px solid rgba(255, 255, 255, 0.1)';
-      });
-
-      // Add active state to clicked option
-      this.style.background = 'rgba(134, 88, 255, 0.1)';
-      this.style.border = '2px solid rgba(134, 88, 255, 0.3)';
-
-      // Update all memory items to this permission
-      const permission = this.dataset.permission;
-      updateAllMemoryPermissions(permission);
-    });
-  });
-
-  // Select all/none buttons
-  modal.querySelector('.select-all-memories')?.addEventListener('click', function() {
-    const checkboxes = modal.querySelectorAll('.memory-checkbox');
-    checkboxes.forEach(cb => cb.checked = true);
-  });
-
-  modal.querySelector('.select-none-memories')?.addEventListener('click', function() {
-    const checkboxes = modal.querySelectorAll('.memory-checkbox');
-    checkboxes.forEach(cb => cb.checked = false);
-  });
-
-  // Individual memory permission buttons
-  modal.addEventListener('click', function(e) {
-    if (e.target.classList.contains('permission-mini')) {
-      const memoryItem = e.target.closest('.memory-item');
-      const permission = e.target.dataset.permission;
-      updateMemoryPermission(memoryItem, permission);
-    }
-  });
-
-  // Close modal
-  modal.querySelector('.close-share-vault-modal')?.addEventListener('click', function() {
-    modal.remove();
-  });
-
-  modal.querySelector('.cancel-share-vault')?.addEventListener('click', function() {
-    modal.remove();
-  });
-
-  // Confirm sharing
-  modal.querySelector('.confirm-share-vault')?.addEventListener('click', function() {
-    confirmVaultSharing(personId, modal);
-  });
-}
-
-// Update all memory permissions to a specific level
-function updateAllMemoryPermissions(permission) {
-  const modal = document.querySelector('.share-vault-modal');
-  if (!modal) return;
-
-  const memoryItems = modal.querySelectorAll('.memory-item');
-  memoryItems.forEach(item => updateMemoryPermission(item, permission));
-}
-
-// Update permission for a specific memory
-function updateMemoryPermission(memoryItem, permission) {
-  const permissionButtons = memoryItem.querySelectorAll('.permission-mini');
-
-  // Reset all buttons
-  permissionButtons.forEach(btn => {
-    btn.style.background = 'rgba(255, 255, 255, 0.05)';
-    btn.style.border = '1px solid rgba(255, 255, 255, 0.2)';
-    btn.style.color = '#cccccc';
-  });
-
-  // Highlight selected permission
-  const selectedBtn = memoryItem.querySelector(`[data-permission="${permission}"]`);
-  if (selectedBtn) {
-    selectedBtn.style.background = 'rgba(134, 88, 255, 0.1)';
-    selectedBtn.style.border = '1px solid rgba(134, 88, 255, 0.3)';
-    selectedBtn.style.color = '#8658ff';
-  }
-}
-
-// Confirm and process vault sharing
-async function confirmVaultSharing(personId, modal) {
-  try {
-
-    // Get selected memories and their permissions
-    const selectedMemories = [];
-    const memoryItems = modal.querySelectorAll('.memory-item');
-
-    memoryItems.forEach(item => {
-      const checkbox = item.querySelector('.memory-checkbox');
-      if (checkbox?.checked) {
-        const memoryId = item.dataset.memoryId;
-        const activePermission = item.querySelector('.permission-mini[style*="rgb(134, 88, 255)"]');
-        const permission = activePermission?.dataset.permission || 'view';
-
-        selectedMemories.push({
-          memoryId,
-          permission
-        });
-      }
-    });
-
-    if (selectedMemories.length === 0) {
-      showNotification('Please select at least one memory to share', 'error');
-      return;
-    }
-
-    // Get person details
-    const person = allPeople.find(p => p.id === parseInt(personId));
-    if (!person) {
-      showNotification('Person not found', 'error');
-      return;
-    }
-
-    // Check if person has crypto identity
-    if (!person.keyFingerprint) {
-      showNotification('This person does not have a cryptographic identity yet', 'error');
-      return;
-    }
-
-    // Create sharing record
-    const sharingRecord = {
-      id: `share_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`,
-      personId: parseInt(personId),
-      personName: person.name,
-      personFingerprint: person.keyFingerprint,
-      memories: selectedMemories,
-      createdAt: new Date().toISOString(),
-      status: 'active'
-    };
-
-    // Store sharing record locally
-    await storeVaultSharingRecord(sharingRecord);
-
-    // Get vault ID (for now, use default vault)
-    const vaultId = await getCurrentVaultId();
-
-    // Determine overall permissions (highest permission level)
-    const permissions = {
-      read: true,
-      write: selectedMemories.some(m => ['contribute', 'edit'].includes(m.permission)),
-      delete: selectedMemories.some(m => m.permission === 'edit'),
-      share: false, // For now, don't allow re-sharing
-      admin: false
-    };
-
-    // Initiate P2P sharing if available
-    if (p2pManager && person.keyFingerprint) {
-      try {
-
-        // Add person to monitoring for incoming shares
-        await p2pManager.addPeerToMonitor(person.keyFingerprint);
-
-        // Share vault via P2P
-        const shareId = await p2pManager.shareVault(
-          vaultId,
-          person.keyFingerprint,
-          permissions
-        );
-
-        showNotification(`HML Sync: Vault sharing initiated with ${person.name}! They will receive a notification when online.`, 'success');
-
-      } catch (p2pError) {
-        console.error('⚠️ HML Sync sharing failed, but local record saved:', p2pError);
-        showNotification(`Vault access recorded locally. HML Sync will retry when ${person.name} is online.`, 'info');
-      }
-    } else {
-      // Fallback: local only
-      showNotification(`Vault access shared with ${person.name}! ${selectedMemories.length} memories shared locally.`, 'success');
-    }
-
-    modal.remove();
-
-  } catch (error) {
-    console.error('❌ Failed to share vault:', error);
-    showNotification('Failed to share vault access: ' + error.message, 'error');
-  }
-}
-
-// Get current vault ID
-async function getCurrentVaultId() {
-  try {
-    const result = await chrome.storage.local.get(['emma_current_vault']);
-    return result.emma_current_vault || 'default';
-  } catch (error) {
-    return 'default';
-  }
-}
-
-// Store vault sharing record
-async function storeVaultSharingRecord(sharingRecord) {
-  try {
-    // Get existing sharing records
-    let sharingRecords = [];
-    try {
-      const result = await chrome.storage.local.get(['emma_vault_sharing']);
-      sharingRecords = result.emma_vault_sharing || [];
-    } catch (error) {
-      sharingRecords = JSON.parse(localStorage.getItem('emma_vault_sharing') || '[]');
-    }
-
-    // Add new record
-    sharingRecords.push(sharingRecord);
-
-    // Save back to storage
-    try {
-      await chrome.storage.local.set({ emma_vault_sharing: sharingRecords });
-    } catch (error) {
-      localStorage.setItem('emma_vault_sharing', JSON.stringify(sharingRecords));
-    }
-
-  } catch (error) {
-    console.error('❌ Failed to store sharing record:', error);
-    throw error;
-  }
-}
-
-// View person details
-async function viewPerson(personId) {
-
-  try {
-    // Get person data
-    let people = [];
-    try {
-      const result = await chrome.storage.local.get(['emma_people']);
-      people = result.emma_people || JSON.parse(localStorage.getItem('emma_people') || '[]');
-    } catch (error) {
-      people = JSON.parse(localStorage.getItem('emma_people') || '[]');
-    }
-
-    const person = people.find(p => p.id === personId);
-    if (!person) {
-      showNotification('Person not found', 'error');
-      return;
-    }
-
-    // Get identity data if it exists
-    let identity = null;
-    try {
-      const result = await chrome.storage.local.get([`emma_identity_${personId}`]);
-      identity = result[`emma_identity_${personId}`] || JSON.parse(localStorage.getItem(`emma_identity_${personId}`) || 'null');
-    } catch (error) {
-      identity = JSON.parse(localStorage.getItem(`emma_identity_${personId}`) || 'null');
-    }
-
-    showPersonDetailModal(person, identity);
-  } catch (error) {
-    console.error('❌ Failed to load person details:', error);
-    showNotification('Failed to load person details', 'error');
-  }
-}
-
-// Save people to localStorage
-async function savePeople() {
-  try {
-    await chrome.storage.local.set({ emma_people: allPeople });
-
-  } catch (error) {
-    localStorage.setItem('emma_people', JSON.stringify(allPeople));
-
-  }
-}
-
-// Utility functions
-function escapeHtml(text) {
-  const div = document.createElement('div');
-  div.textContent = text;
-  return div.innerHTML;
-}
-
-function showNotification(message, type = 'info') {
-  // Simple notification - you can enhance this
-  const notification = document.createElement('div');
-  notification.textContent = message;
-  notification.className = `notification ${type}`;
-  notification.style.cssText = `
-    position: fixed;
-    top: 20px;
-    right: 20px;
-    padding: 15px 20px;
-    border-radius: 8px;
-    color: white;
-    z-index: 10000;
-    max-width: 300px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-    background: ${type === 'success' ? '#28a745' : type === 'error' ? '#dc3545' : '#17a2b8'};
-  `;
-
-  document.body.appendChild(notification);
-
-  // Remove after 3 seconds
-  setTimeout(() => {
-    if (notification.parentNode) {
-      notification.parentNode.removeChild(notification);
-    }
-  }, 3000);
-}
-
-// Expose functions to global scope for HTML event handlers
-window.addPerson = addPerson;
-window.openAddPersonModal = openAddPersonModal;
-window.closeAddPersonModal = closeAddPersonModal;
-window.searchPeople = searchPeople;
-window.viewPerson = viewPerson;
-window.showShareVaultModal = showShareVaultModal;
-window.exportIdentity = exportIdentity;
-window.copyFingerprint = copyFingerprint;
-
-// Test that the function is properly exposed
-
-// Add universal navigation handler
-function setupUniversalNavigation() {
-  const backBtn = document.getElementById('people-back-btn');
-  if (backBtn) {
-
-    backBtn.style.pointerEvents = 'auto';
-    backBtn.style.position = 'relative';
-    backBtn.style.zIndex = '9999999';
-    backBtn.style.border = '2px solid red'; // Red debug border
-
-    backBtn.addEventListener('click', (e) => {
-
-      e.preventDefault();
-      e.stopPropagation();
-
-      try {
-        if (window.location && window.location.href.includes('people.html')) {
-
-          window.location.href = 'welcome.html';
-        } else {
-
-          window.history.back();
-        }
-      } catch (error) {
-        console.error('🔥 PEOPLE: Navigation error:', error);
-        try {
-
-          window.location.href = 'welcome.html';
-        } catch {}
-      }
-    });
-  } else {
-    console.error('🔥 PEOPLE: No back button found!');
-  }
-}
-
-// Set up navigation when DOM is ready
-if (document.readyState === 'loading') {
-  document.addEventListener('DOMContentLoaded', setupUniversalNavigation);
-} else {
-  setupUniversalNavigation();
-}
diff --git a/js/popup.js b/js/popup.js
index f54659e6..7fbd339d 100644
--- a/js/popup.js
+++ b/js/popup.js
@@ -277,7 +277,7 @@ function attachEventListeners() {
   }
 
   if (elements.peopleBtn) {
-    elements.peopleBtn.addEventListener('click', () => { try { openPeople(); } catch { try { window.location.href='people.html'; } catch {} } });
+    elements.peopleBtn.addEventListener('click', () => { try { openPeople(); } catch { try { window.location.href='pages/people-emma.html'; } catch {} } });
   }
 
   if (elements.relationshipsBtn) {
@@ -1024,7 +1024,7 @@ function openPeople() {
       return;
     }
   } catch {}
-  try { window.location.href = 'people.html'; } catch {}
+  try { window.location.href = 'pages/people-emma.html'; } catch {}
 }
 
 function openRelationships() {
diff --git a/js/qr-service.js b/js/qr-service.js
index 7725c054..8454f0e0 100644
--- a/js/qr-service.js
+++ b/js/qr-service.js
@@ -190,7 +190,7 @@ class QRService {
     const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
     gradient.addColorStop(0, '#667eea');
     gradient.addColorStop(0.5, '#764ba2');
-    gradient.addColorStop(1, '#f093fb');
+    gradient.addColorStop(1, '#deb3e4');
     
     ctx.fillStyle = gradient;
     ctx.fillRect(0, 0, canvas.width, canvas.height);
diff --git a/js/sanitize.js b/js/sanitize.js
new file mode 100644
index 00000000..45a077e3
--- /dev/null
+++ b/js/sanitize.js
@@ -0,0 +1,16 @@
+// Minimal global HTML sanitizer for interpolations
+// Use escapeHtml(value) for any user-provided or dynamic content
+(function(){
+  function escapeHtml(str) {
+    return String(str)
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#39;');
+  }
+  if (typeof window !== 'undefined') {
+    window.escapeHtml = escapeHtml;
+  }
+})();
+
diff --git a/js/secure-password-modal.js b/js/secure-password-modal.js
index f9114dae..94114f5a 100644
--- a/js/secure-password-modal.js
+++ b/js/secure-password-modal.js
@@ -36,6 +36,10 @@ class SecurePasswordModal {
         confirmPassword = false
       } = options;
 
+      const esc = (s) => (window.escapeHtml ? window.escapeHtml(s) : String(s)
+        .replace(/&/g, '&amp;').replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;').replace(/\"/g, '&quot;').replace(/'/g, '&#39;'));
+
       this.currentResolve = resolve;
       this.currentReject = reject;
       this.isOpen = true;
@@ -45,19 +49,19 @@ class SecurePasswordModal {
         <div class="emma-secure-modal-overlay" id="secureModalOverlay">
           <div class="emma-secure-modal">
             <div class="emma-secure-modal-header">
-              <h3 class="emma-secure-modal-title">${title}</h3>
+              <h3 class="emma-secure-modal-title">${esc(title)}</h3>
               <button class="emma-secure-modal-close" onclick="window.securePasswordModal.cancel()">×</button>
             </div>
             
             <div class="emma-secure-modal-body">
-              <p class="emma-secure-modal-message">${message}</p>
+              <p class="emma-secure-modal-message">${esc(message)}</p>
               
               <div class="emma-secure-input-group">
                 <input 
                   type="password" 
                   id="securePasswordInput" 
                   class="emma-secure-input" 
-                  placeholder="${placeholder}"
+                  placeholder="${esc(placeholder)}"
                   autocomplete="new-password"
                 >
                 <div class="emma-password-strength" id="passwordStrength"></div>
@@ -344,7 +348,7 @@ const secureModalStyles = `
 <style>
 /* Emma Brand Variables for Secure Modal */
 :root {
-  --emma-gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
+  --emma-gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #deb3e4 100%);
   --emma-gradient-2: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #a855f7 100%);
   --emma-glass: rgba(255, 255, 255, 0.05);
   --emma-border: rgba(255, 255, 255, 0.1);
@@ -354,7 +358,7 @@ const secureModalStyles = `
   --emma-purple: #764ba2;
   --emma-success: #4ade80;
   --emma-error: #f87171;
-  --emma-glow: 0 0 40px rgba(134, 88, 255, 0.6);
+  --emma-glow: 0 0 40px rgba(111, 99, 217, 0.6);
 }
 .emma-secure-modal-overlay {
   position: fixed;
@@ -459,7 +463,7 @@ const secureModalStyles = `
   outline: none;
   border-color: var(--emma-purple);
   background: rgba(255, 255, 255, 0.08);
-  box-shadow: 0 0 0 3px rgba(134, 88, 255, 0.2);
+  box-shadow: 0 0 0 3px rgba(111, 99, 217, 0.2);
 }
 
 .emma-secure-input::placeholder {
@@ -563,7 +567,7 @@ const secureModalStyles = `
 
 .emma-secure-btn-confirm:hover {
   transform: translateY(-2px);
-  box-shadow: 0 8px 25px rgba(134, 88, 255, 0.3);
+  box-shadow: 0 8px 25px rgba(111, 99, 217, 0.3);
 }
 
 .emma-secure-error {
diff --git a/js/smart-photo-capture.js b/js/smart-photo-capture.js
index 3ad27366..99dca8e3 100644
--- a/js/smart-photo-capture.js
+++ b/js/smart-photo-capture.js
@@ -380,7 +380,7 @@ class EmmaSmartPhotoCapture {
         z-index: 999999;
         font-family: system-ui;
         backdrop-filter: blur(20px);
-        border: 1px solid rgba(139, 92, 246, 0.3);
+        border: 1px solid rgba(111, 99, 217, 0.3);
         min-width: 300px;
       `;
       document.body.appendChild(progressDiv);
diff --git a/js/theme-manager.js b/js/theme-manager.js
new file mode 100644
index 00000000..ad875982
--- /dev/null
+++ b/js/theme-manager.js
@@ -0,0 +1,889 @@
+(function createEmmaThemeManager() {
+  const STORAGE_KEY = 'emma.theme.selection';
+  const STORAGE_BG_KEY = 'emma.theme.background';
+  const EVENT_APPLIED = 'emmaThemeApplied';
+  const EVENT_CHANGED = 'emmaThemeChanged';
+  const DEFAULT_THEME_ID = 'aurora-classic';
+
+  const docEl = document.documentElement;
+
+  const themeLookup = new Map();
+  const backgroundLookup = new Map();
+  let appliedVariables = [];
+  let activeTheme = null;
+  let initialized = false;
+
+  let themeDefaultGradient = null;
+  let themeDefaultAurora = null;
+
+  const DEFAULT_THEME_CATALOG = [
+    {
+      id: 'aurora-classic',
+      name: 'Aurora Classic',
+      description: 'Signature Emma gradient with deep cosmos ambiance.',
+      preview: { primary: '#6f63d9', secondary: '#d06fa8', surface: '#0a0a0f' },
+      cssVars: {
+        '--emma-surface-primary': '#0a0a0f',
+        '--emma-surface-muted': 'rgba(255, 255, 255, 0.04)',
+        '--emma-surface-inverse': 'rgba(255, 255, 255, 0.92)',
+        '--emma-gradient-primary': 'linear-gradient(135deg, #5058b4 0%, #5a3f8f 50%, #a468a5 100%)',
+        '--emma-gradient-secondary': 'linear-gradient(135deg, #3f3f7d 0%, #5a3f8a 50%, #84528f 100%)',
+        '--emma-gradient-aurora': 'linear-gradient(135deg, rgba(80, 88, 180, 0.3) 0%, rgba(90, 63, 143, 0.28) 25%, rgba(164, 104, 165, 0.25) 50%, rgba(67, 132, 187, 0.18) 75%, rgba(80, 88, 180, 0.3) 100%)',
+        '--emma-border-subtle': 'rgba(255, 255, 255, 0.1)',
+        '--emma-border-strong': 'rgba(255, 255, 255, 0.2)',
+        '--emma-text-strong': '#ffffff',
+        '--emma-text-standard': 'rgba(255, 255, 255, 0.85)',
+        '--emma-text-muted': 'rgba(255, 255, 255, 0.6)',
+        '--emma-text-on-accent': '#ffffff',
+        '--emma-neutral-rgb': '255, 255, 255',
+        '--emma-neutral-inverse-rgb': '10, 10, 15',
+        '--emma-accent-primary': '#6f63d9',
+        '--emma-accent-secondary': '#d06fa8',
+        '--emma-accent-primary-rgb': '111, 99, 217',
+        '--emma-accent-secondary-rgb': '208, 111, 168',
+        '--emma-accent-surface': 'rgba(111, 99, 217, 0.14)',
+        '--emma-accent-surface-strong': 'rgba(111, 99, 217, 0.24)',
+        '--emma-accent-border': 'rgba(111, 99, 217, 0.3)',
+        '--emma-success': '#4ade80',
+        '--emma-warning': '#fbbf24',
+        '--emma-danger': '#f87171',
+        '--emma-chat-user-bubble': 'linear-gradient(135deg, #6f63d9, #d06fa8)',
+        '--emma-chat-user-text': '#ffffff',
+        '--emma-chat-emma-bubble': 'rgba(37, 38, 65, 0.85)',
+        '--emma-chat-emma-text': 'rgba(255, 255, 255, 0.92)',
+        '--emma-chat-user-meta': 'rgba(255, 255, 255, 0.7)',
+        '--emma-chat-emma-meta': 'rgba(255, 255, 255, 0.6)',
+        '--emma-chat-surface': 'rgba(255, 255, 255, 0.05)',
+        '--emma-chat-surface-strong': 'rgba(255, 255, 255, 0.1)',
+        '--emma-chat-border': 'rgba(255, 255, 255, 0.2)',
+        '--emma-chat-muted': 'rgba(255, 255, 255, 0.7)',
+        '--emma-chat-strong': 'rgba(255, 255, 255, 0.9)',
+        '--emma-chat-error': '#f87171',
+        '--emma-chat-success': '#10b981',
+        '--emma-nav-highlight': 'rgba(111, 99, 217, 0.16)',
+        '--emma-constellation-node': 'rgba(111, 99, 217, 0.45)',
+        '--emma-constellation-glow': 'rgba(111, 99, 217, 0.6)',
+        '--emma-orb-hue': '265',
+        '--emma-orb-hover-intensity': '0.25',
+        '--emma-glass': 'rgba(255, 255, 255, 0.05)',
+        '--emma-card-bg': 'rgba(255, 255, 255, 0.04)',
+        '--emma-button-secondary-bg': 'rgba(255, 255, 255, 0.1)',
+        '--emma-button-secondary-border': 'rgba(255, 255, 255, 0.2)',
+        '--emma-button-secondary-text': 'rgba(255, 255, 255, 0.85)',
+        '--emma-button-secondary-bg-hover': 'rgba(255, 255, 255, 0.2)',
+        '--emma-bg-gradient': 'linear-gradient(135deg, #0a0a0f 0%, #1a1033 50%, #0f0c29 100%)'
+      },
+      background: {
+        id: 'aurora',
+        name: 'Aurora Field',
+        description: 'Soft cosmic gradients with Emma\'s signature glow.',
+        intensity: 0.35
+      },
+      flags: {
+        highContrast: false,
+        animatedBackground: true
+      }
+    },
+    {
+      id: 'sunrise-glow',
+      name: 'Sunrise Glow',
+      description: 'Warm peach and coral palette with soft morning light.',
+      preview: { primary: '#ff8c68', secondary: '#ffd26f', surface: '#fff6eb' },
+      cssVars: {
+        '--emma-surface-primary': '#fff6eb',
+        '--emma-surface-muted': '#ffe9d6',
+        '--emma-surface-inverse': '#1f1a24',
+        '--emma-gradient-primary': 'linear-gradient(135deg, #ff9a8b 0%, #ff6a88 50%, #ff99ac 100%)',
+        '--emma-gradient-secondary': 'linear-gradient(135deg, #ffecd6 0%, #ffcba4 50%, #ff9a8b 100%)',
+        '--emma-gradient-aurora': 'linear-gradient(135deg, rgba(255, 206, 170, 0.4) 0%, rgba(255, 145, 171, 0.4) 50%, rgba(255, 233, 214, 0.4) 100%)',
+        '--emma-border-subtle': 'rgba(31, 26, 36, 0.1)',
+        '--emma-border-strong': 'rgba(31, 26, 36, 0.2)',
+        '--emma-text-strong': '#1f1a24',
+        '--emma-text-standard': 'rgba(31, 26, 36, 0.85)',
+        '--emma-text-muted': 'rgba(31, 26, 36, 0.6)',
+        '--emma-text-on-accent': '#1f1a24',
+        '--emma-neutral-rgb': '31, 26, 36',
+        '--emma-neutral-inverse-rgb': '240, 224, 205',
+        '--emma-accent-primary': '#ff8c68',
+        '--emma-accent-secondary': '#ffb347',
+        '--emma-accent-primary-rgb': '255, 140, 104',
+        '--emma-accent-secondary-rgb': '255, 179, 71',
+        '--emma-accent-surface': 'rgba(255, 176, 124, 0.18)',
+        '--emma-accent-surface-strong': 'rgba(255, 176, 124, 0.3)',
+        '--emma-accent-border': 'rgba(255, 176, 124, 0.35)',
+        '--emma-success': '#3aa76d',
+        '--emma-warning': '#f59e0b',
+        '--emma-danger': '#e4566e',
+        '--emma-chat-user-bubble': 'linear-gradient(135deg, #ffb07c, #ff8c68)',
+        '--emma-chat-user-text': '#1f1a24',
+        '--emma-chat-emma-bubble': 'rgba(255, 233, 214, 0.95)',
+        '--emma-chat-emma-text': '#1f1a24',
+        '--emma-chat-user-meta': 'rgba(31, 26, 36, 0.6)',
+        '--emma-chat-emma-meta': 'rgba(31, 26, 36, 0.5)',
+        '--emma-chat-surface': 'rgba(31, 26, 36, 0.08)',
+        '--emma-chat-surface-strong': 'rgba(31, 26, 36, 0.12)',
+        '--emma-chat-border': 'rgba(31, 26, 36, 0.18)',
+        '--emma-chat-muted': 'rgba(31, 26, 36, 0.6)',
+        '--emma-chat-strong': 'rgba(31, 26, 36, 0.9)',
+        '--emma-chat-error': '#e4566e',
+        '--emma-chat-success': '#3aa76d',
+        '--emma-nav-highlight': 'rgba(255, 176, 124, 0.25)',
+        '--emma-constellation-node': 'rgba(255, 176, 124, 0.7)',
+        '--emma-constellation-glow': 'rgba(255, 176, 124, 0.9)',
+        '--emma-orb-hue': '24',
+        '--emma-orb-hover-intensity': '0.2',
+        '--emma-glass': 'rgba(255, 255, 255, 0.7)',
+        '--emma-card-bg': 'rgba(255, 255, 255, 0.85)',
+        '--emma-button-secondary-bg': 'rgba(31, 26, 36, 0.08)',
+        '--emma-button-secondary-border': 'rgba(31, 26, 36, 0.12)',
+        '--emma-button-secondary-text': 'rgba(31, 26, 36, 0.72)',
+        '--emma-button-secondary-bg-hover': 'rgba(31, 26, 36, 0.14)',
+        '--emma-bg-gradient': 'linear-gradient(135deg, #fff6eb 0%, #ffe3cc 50%, #ffd2b0 100%)'
+      },
+      background: {
+        id: 'sunrise',
+        name: 'Sunrise Veil',
+        description: 'Warm morning light with gentle amber motion.',
+        intensity: 0.2
+      },
+      flags: {
+        highContrast: false,
+        animatedBackground: true
+      }
+    },
+    {
+      id: 'midnight-forest',
+      name: 'Midnight Forest',
+      description: 'Deep greens and teals with luminous accents for focus.',
+      preview: { primary: '#1c3d3a', secondary: '#3ae8b3', surface: '#061b1a' },
+      cssVars: {
+        '--emma-surface-primary': '#061b1a',
+        '--emma-surface-muted': 'rgba(10, 58, 52, 0.55)',
+        '--emma-surface-inverse': '#e9fff9',
+        '--emma-gradient-primary': 'linear-gradient(135deg, #0f4251 0%, #166c54 50%, #3ae8b3 100%)',
+        '--emma-gradient-secondary': 'linear-gradient(135deg, #2d9486 0%, #1f745f 50%, #3ae8b3 100%)',
+        '--emma-gradient-aurora': 'linear-gradient(135deg, rgba(61, 214, 190, 0.2) 0%, rgba(26, 95, 91, 0.35) 50%, rgba(73, 164, 164, 0.2) 100%)',
+        '--emma-border-subtle': 'rgba(58, 149, 138, 0.32)',
+        '--emma-border-strong': 'rgba(58, 149, 138, 0.5)',
+        '--emma-text-strong': '#e9fff9',
+        '--emma-text-standard': 'rgba(233, 255, 249, 0.86)',
+        '--emma-text-muted': 'rgba(233, 255, 249, 0.65)',
+        '--emma-text-on-accent': '#032221',
+        '--emma-neutral-rgb': '233, 255, 249',
+        '--emma-neutral-inverse-rgb': '12, 64, 60',
+        '--emma-accent-primary': '#3ae8b3',
+        '--emma-accent-secondary': '#5adeff',
+        '--emma-accent-primary-rgb': '58, 232, 179',
+        '--emma-accent-secondary-rgb': '90, 222, 255',
+        '--emma-accent-surface': 'rgba(58, 149, 138, 0.18)',
+        '--emma-accent-surface-strong': 'rgba(58, 149, 138, 0.32)',
+        '--emma-accent-border': 'rgba(58, 149, 138, 0.45)',
+        '--emma-success': '#4ade80',
+        '--emma-warning': '#fbbf24',
+        '--emma-danger': '#f87171',
+        '--emma-chat-user-bubble': 'linear-gradient(135deg, #3ae8b3, #5adeff)',
+        '--emma-chat-user-text': '#0b2320',
+        '--emma-chat-emma-bubble': 'rgba(14, 52, 54, 0.88)',
+        '--emma-chat-emma-text': 'rgba(233, 255, 249, 0.92)',
+        '--emma-chat-user-meta': 'rgba(11, 35, 33, 0.6)',
+        '--emma-chat-emma-meta': 'rgba(233, 255, 249, 0.65)',
+        '--emma-chat-surface': 'rgba(12, 64, 60, 0.35)',
+        '--emma-chat-surface-strong': 'rgba(12, 64, 60, 0.5)',
+        '--emma-chat-border': 'rgba(58, 149, 138, 0.45)',
+        '--emma-chat-muted': 'rgba(233, 255, 249, 0.7)',
+        '--emma-chat-strong': 'rgba(233, 255, 249, 0.92)',
+        '--emma-chat-error': '#f87171',
+        '--emma-chat-success': '#3ae8b3',
+        '--emma-nav-highlight': 'rgba(58, 149, 138, 0.3)',
+        '--emma-constellation-node': 'rgba(58, 149, 138, 0.7)',
+        '--emma-constellation-glow': 'rgba(58, 149, 138, 0.95)',
+        '--emma-orb-hue': '160',
+        '--emma-orb-hover-intensity': '0.25',
+        '--emma-glass': 'rgba(8, 43, 43, 0.6)',
+        '--emma-card-bg': 'rgba(8, 43, 43, 0.55)',
+        '--emma-button-secondary-bg': 'rgba(12, 64, 60, 0.6)',
+        '--emma-button-secondary-border': 'rgba(58, 149, 138, 0.45)',
+        '--emma-button-secondary-text': 'rgba(233, 255, 249, 0.88)',
+        '--emma-button-secondary-bg-hover': 'rgba(12, 64, 60, 0.75)',
+        '--emma-bg-gradient': 'linear-gradient(135deg, #031010 0%, #0f2f2b 50%, #041b19 100%)'
+      },
+      background: {
+        id: 'forest',
+        name: 'Forest Night',
+        description: 'Luminous particles drifting through deep forest hues.',
+        intensity: 0.45
+    },
+    flags: {
+      highContrast: true,
+      animatedBackground: false
+    }
+    },
+    {
+      id: 'lunar-tide',
+      name: 'Lunar Tide',
+      description: 'Noctilucent blues with aqua highlights for calm focus.',
+      preview: { primary: '#0f3c68', secondary: '#4dc4ff', surface: '#06131f' },
+      cssVars: {
+        '--emma-surface-primary': '#06131f',
+        '--emma-surface-muted': 'rgba(13, 40, 61, 0.55)',
+        '--emma-surface-inverse': '#f0fbff',
+        '--emma-gradient-primary': 'linear-gradient(135deg, #0f3c68 0%, #0b7895 50%, #4dc4ff 100%)',
+        '--emma-gradient-secondary': 'linear-gradient(135deg, #0b5e7a 0%, #2093a9 50%, #4dc4ff 100%)',
+        '--emma-gradient-aurora': 'linear-gradient(135deg, rgba(77, 196, 255, 0.22) 0%, rgba(20, 130, 155, 0.35) 50%, rgba(11, 60, 96, 0.3) 100%)',
+        '--emma-border-subtle': 'rgba(77, 196, 255, 0.24)',
+        '--emma-border-strong': 'rgba(77, 196, 255, 0.45)',
+        '--emma-text-strong': '#f0fbff',
+        '--emma-text-standard': 'rgba(240, 251, 255, 0.86)',
+        '--emma-text-muted': 'rgba(240, 251, 255, 0.65)',
+        '--emma-text-on-accent': '#03121f',
+        '--emma-neutral-rgb': '240, 251, 255',
+        '--emma-neutral-inverse-rgb': '6, 19, 31',
+        '--emma-accent-primary': '#4dc4ff',
+        '--emma-accent-secondary': '#64f7d5',
+        '--emma-accent-primary-rgb': '77, 196, 255',
+        '--emma-accent-secondary-rgb': '100, 247, 213',
+        '--emma-accent-surface': 'rgba(77, 196, 255, 0.18)',
+        '--emma-accent-surface-strong': 'rgba(77, 196, 255, 0.32)',
+        '--emma-accent-border': 'rgba(77, 196, 255, 0.4)',
+        '--emma-success': '#34d399',
+        '--emma-warning': '#facc15',
+        '--emma-danger': '#f87171',
+        '--emma-chat-user-bubble': 'linear-gradient(135deg, #4dc4ff, #64f7d5)',
+        '--emma-chat-user-text': '#03121f',
+        '--emma-chat-emma-bubble': 'rgba(11, 49, 78, 0.88)',
+        '--emma-chat-emma-text': 'rgba(240, 251, 255, 0.92)',
+        '--emma-chat-user-meta': 'rgba(3, 18, 31, 0.6)',
+        '--emma-chat-emma-meta': 'rgba(240, 251, 255, 0.65)',
+        '--emma-chat-surface': 'rgba(13, 40, 61, 0.45)',
+        '--emma-chat-surface-strong': 'rgba(13, 40, 61, 0.6)',
+        '--emma-chat-border': 'rgba(77, 196, 255, 0.35)',
+        '--emma-chat-muted': 'rgba(240, 251, 255, 0.7)',
+        '--emma-chat-strong': 'rgba(240, 251, 255, 0.92)',
+        '--emma-chat-error': '#f87171',
+        '--emma-chat-success': '#34d399',
+        '--emma-nav-highlight': 'rgba(77, 196, 255, 0.3)',
+        '--emma-constellation-node': 'rgba(77, 196, 255, 0.7)',
+        '--emma-constellation-glow': 'rgba(77, 196, 255, 0.95)',
+        '--emma-orb-hue': '200',
+        '--emma-orb-hover-intensity': '0.28',
+        '--emma-glass': 'rgba(6, 31, 45, 0.6)',
+        '--emma-card-bg': 'rgba(6, 31, 45, 0.55)',
+        '--emma-button-secondary-bg': 'rgba(11, 49, 78, 0.6)',
+        '--emma-button-secondary-border': 'rgba(77, 196, 255, 0.45)',
+        '--emma-button-secondary-text': 'rgba(240, 251, 255, 0.9)',
+        '--emma-button-secondary-bg-hover': 'rgba(11, 49, 78, 0.75)',
+        '--emma-bg-gradient': 'linear-gradient(135deg, #041019 0%, #0d2232 50%, #032236 100%)',
+        '--emma-background-ocean': 'linear-gradient(135deg, rgba(77, 196, 255, 0.18), rgba(14, 84, 120, 0.4))'
+      },
+      background: {
+        id: 'ocean',
+        name: 'Lunar Tide',
+        description: 'Slow aurora bands drifting over deep ocean blues.',
+        intensity: 0.38
+      },
+      flags: {
+        highContrast: true,
+        animatedBackground: true
+      }
+    },
+    {
+      id: 'ember-noir',
+      name: 'Ember Noir',
+      description: 'Sleek charcoal base with ember-lit highlights.',
+      preview: { primary: '#2b1a1f', secondary: '#f97316', surface: '#131015' },
+      cssVars: {
+        '--emma-surface-primary': '#131015',
+        '--emma-surface-muted': 'rgba(55, 30, 43, 0.55)',
+        '--emma-surface-inverse': '#fdf6f0',
+        '--emma-gradient-primary': 'linear-gradient(135deg, #2b1a1f 0%, #50232c 50%, #f97316 100%)',
+        '--emma-gradient-secondary': 'linear-gradient(135deg, #311920 0%, #8b2635 50%, #fb7185 100%)',
+        '--emma-gradient-aurora': 'linear-gradient(135deg, rgba(249, 115, 22, 0.25) 0%, rgba(251, 113, 133, 0.2) 45%, rgba(79, 18, 30, 0.4) 100%)',
+        '--emma-border-subtle': 'rgba(249, 115, 22, 0.24)',
+        '--emma-border-strong': 'rgba(249, 115, 22, 0.45)',
+        '--emma-text-strong': '#fdf6f0',
+        '--emma-text-standard': 'rgba(253, 246, 240, 0.85)',
+        '--emma-text-muted': 'rgba(253, 246, 240, 0.65)',
+        '--emma-text-on-accent': '#220a0a',
+        '--emma-neutral-rgb': '253, 246, 240',
+        '--emma-neutral-inverse-rgb': '19, 16, 21',
+        '--emma-accent-primary': '#f97316',
+        '--emma-accent-secondary': '#fb7185',
+        '--emma-accent-primary-rgb': '249, 115, 22',
+        '--emma-accent-secondary-rgb': '251, 113, 133',
+        '--emma-accent-surface': 'rgba(249, 115, 22, 0.18)',
+        '--emma-accent-surface-strong': 'rgba(249, 115, 22, 0.32)',
+        '--emma-accent-border': 'rgba(249, 115, 22, 0.42)',
+        '--emma-success': '#22c55e',
+        '--emma-warning': '#facc15',
+        '--emma-danger': '#f87171',
+        '--emma-chat-user-bubble': 'linear-gradient(135deg, #f97316, #fb7185)',
+        '--emma-chat-user-text': '#2b0b0b',
+        '--emma-chat-emma-bubble': 'rgba(44, 21, 29, 0.88)',
+        '--emma-chat-emma-text': 'rgba(253, 246, 240, 0.92)',
+        '--emma-chat-user-meta': 'rgba(43, 11, 11, 0.65)',
+        '--emma-chat-emma-meta': 'rgba(253, 246, 240, 0.65)',
+        '--emma-chat-surface': 'rgba(55, 30, 43, 0.5)',
+        '--emma-chat-surface-strong': 'rgba(55, 30, 43, 0.65)',
+        '--emma-chat-border': 'rgba(249, 115, 22, 0.35)',
+        '--emma-chat-muted': 'rgba(253, 246, 240, 0.7)',
+        '--emma-chat-strong': 'rgba(253, 246, 240, 0.92)',
+        '--emma-chat-error': '#f87171',
+        '--emma-chat-success': '#22c55e',
+        '--emma-nav-highlight': 'rgba(249, 115, 22, 0.32)',
+        '--emma-constellation-node': 'rgba(249, 115, 22, 0.66)',
+        '--emma-constellation-glow': 'rgba(249, 115, 22, 0.88)',
+        '--emma-orb-hue': '20',
+        '--emma-orb-hover-intensity': '0.22',
+        '--emma-glass': 'rgba(24, 12, 18, 0.65)',
+        '--emma-card-bg': 'rgba(24, 12, 18, 0.58)',
+        '--emma-button-secondary-bg': 'rgba(45, 23, 31, 0.65)',
+        '--emma-button-secondary-border': 'rgba(249, 115, 22, 0.35)',
+        '--emma-button-secondary-text': 'rgba(253, 246, 240, 0.9)',
+        '--emma-button-secondary-bg-hover': 'rgba(45, 23, 31, 0.8)',
+        '--emma-bg-gradient': 'linear-gradient(135deg, #12090d 0%, #211017 50%, #2f181f 100%)',
+        '--emma-background-ember': 'linear-gradient(135deg, rgba(249, 115, 22, 0.2), rgba(71, 21, 27, 0.45))'
+      },
+      background: {
+        id: 'ember',
+        name: 'Ember Noir',
+        description: 'Amber sparks drifting across a noir twilight.',
+        intensity: 0.34
+      },
+      flags: {
+        highContrast: false,
+        animatedBackground: true
+      }
+    },
+    {
+      id: 'blossom-dream',
+      name: 'Blossom Dream',
+      description: 'Pastel bloom with gentle light for uplifting moments.',
+      preview: { primary: '#fcb3ff', secondary: '#f472b6', surface: '#fef8ff' },
+      cssVars: {
+        '--emma-surface-primary': '#fef8ff',
+        '--emma-surface-muted': 'rgba(247, 220, 255, 0.7)',
+        '--emma-surface-inverse': '#20142a',
+        '--emma-gradient-primary': 'linear-gradient(135deg, #fcb3ff 0%, #a855f7 50%, #6366f1 100%)',
+        '--emma-gradient-secondary': 'linear-gradient(135deg, #ffe3f7 0%, #fcb3ff 50%, #f9a8d4 100%)',
+        '--emma-gradient-aurora': 'linear-gradient(135deg, rgba(252, 179, 255, 0.35) 0%, rgba(249, 168, 212, 0.3) 50%, rgba(99, 102, 241, 0.25) 100%)',
+        '--emma-border-subtle': 'rgba(32, 20, 42, 0.12)',
+        '--emma-border-strong': 'rgba(32, 20, 42, 0.28)',
+        '--emma-text-strong': '#20142a',
+        '--emma-text-standard': 'rgba(32, 20, 42, 0.85)',
+        '--emma-text-muted': 'rgba(32, 20, 42, 0.6)',
+        '--emma-text-on-accent': '#20142a',
+        '--emma-neutral-rgb': '32, 20, 42',
+        '--emma-neutral-inverse-rgb': '254, 248, 255',
+        '--emma-accent-primary': '#a855f7',
+        '--emma-accent-secondary': '#f472b6',
+        '--emma-accent-primary-rgb': '168, 85, 247',
+        '--emma-accent-secondary-rgb': '244, 114, 182',
+        '--emma-accent-surface': 'rgba(244, 114, 182, 0.16)',
+        '--emma-accent-surface-strong': 'rgba(244, 114, 182, 0.28)',
+        '--emma-accent-border': 'rgba(244, 114, 182, 0.32)',
+        '--emma-success': '#22c55e',
+        '--emma-warning': '#f59e0b',
+        '--emma-danger': '#ef4444',
+        '--emma-chat-user-bubble': 'linear-gradient(135deg, #f9a8d4, #a855f7)',
+        '--emma-chat-user-text': '#20142a',
+        '--emma-chat-emma-bubble': 'rgba(255, 236, 250, 0.96)',
+        '--emma-chat-emma-text': '#20142a',
+        '--emma-chat-user-meta': 'rgba(32, 20, 42, 0.6)',
+        '--emma-chat-emma-meta': 'rgba(32, 20, 42, 0.5)',
+        '--emma-chat-surface': 'rgba(32, 20, 42, 0.08)',
+        '--emma-chat-surface-strong': 'rgba(32, 20, 42, 0.12)',
+        '--emma-chat-border': 'rgba(32, 20, 42, 0.16)',
+        '--emma-chat-muted': 'rgba(32, 20, 42, 0.6)',
+        '--emma-chat-strong': 'rgba(32, 20, 42, 0.9)',
+        '--emma-chat-error': '#ef4444',
+        '--emma-chat-success': '#16a34a',
+        '--emma-nav-highlight': 'rgba(244, 114, 182, 0.25)',
+        '--emma-constellation-node': 'rgba(244, 114, 182, 0.7)',
+        '--emma-constellation-glow': 'rgba(244, 114, 182, 0.9)',
+        '--emma-orb-hue': '285',
+        '--emma-orb-hover-intensity': '0.2',
+        '--emma-glass': 'rgba(255, 255, 255, 0.7)',
+        '--emma-card-bg': 'rgba(255, 255, 255, 0.85)',
+        '--emma-button-secondary-bg': 'rgba(32, 20, 42, 0.08)',
+        '--emma-button-secondary-border': 'rgba(32, 20, 42, 0.12)',
+        '--emma-button-secondary-text': 'rgba(32, 20, 42, 0.72)',
+        '--emma-button-secondary-bg-hover': 'rgba(32, 20, 42, 0.14)',
+        '--emma-bg-gradient': 'linear-gradient(135deg, #fef8ff 0%, #ffe9f7 50%, #e8ddff 100%)',
+        '--emma-background-blossom': 'linear-gradient(135deg, rgba(252, 179, 255, 0.22), rgba(241, 179, 239, 0.35))'
+      },
+      background: {
+        id: 'blossom',
+        name: 'Blossom Veil',
+        description: 'Soft petal diffraction floating across gentle light.',
+        intensity: 0.22
+      },
+      flags: {
+        highContrast: false,
+        animatedBackground: true
+      }
+    },
+    {
+      id: 'zen-slate',
+      name: 'Zen Slate',
+      description: 'Modern graphite palette with calm blue-green accents.',
+      preview: { primary: '#1f2937', secondary: '#60a5fa', surface: '#111827' },
+      cssVars: {
+        '--emma-surface-primary': '#111827',
+        '--emma-surface-muted': 'rgba(255, 255, 255, 0.06)',
+        '--emma-surface-inverse': '#f9fafb',
+        '--emma-gradient-primary': 'linear-gradient(135deg, #0f172a 0%, #1f2937 50%, #4b5563 100%)',
+        '--emma-gradient-secondary': 'linear-gradient(135deg, #1f2937 0%, #374151 50%, #6b7280 100%)',
+        '--emma-gradient-aurora': 'linear-gradient(135deg, rgba(79, 70, 229, 0.18) 0%, rgba(15, 118, 110, 0.22) 50%, rgba(30, 64, 175, 0.2) 100%)',
+        '--emma-border-subtle': 'rgba(255, 255, 255, 0.14)',
+        '--emma-border-strong': 'rgba(255, 255, 255, 0.28)',
+        '--emma-text-strong': '#f9fafb',
+        '--emma-text-standard': 'rgba(249, 250, 251, 0.9)',
+        '--emma-text-muted': 'rgba(249, 250, 251, 0.65)',
+        '--emma-text-on-accent': '#0b1120',
+        '--emma-neutral-rgb': '249, 250, 251',
+        '--emma-neutral-inverse-rgb': '17, 24, 39',
+        '--emma-accent-primary': '#60a5fa',
+        '--emma-accent-secondary': '#34d399',
+        '--emma-accent-primary-rgb': '96, 165, 250',
+        '--emma-accent-secondary-rgb': '52, 211, 153',
+        '--emma-accent-surface': 'rgba(96, 165, 250, 0.2)',
+        '--emma-accent-surface-strong': 'rgba(96, 165, 250, 0.32)',
+        '--emma-accent-border': 'rgba(96, 165, 250, 0.34)',
+        '--emma-success': '#34d399',
+        '--emma-warning': '#facc15',
+        '--emma-danger': '#f87171',
+        '--emma-chat-user-bubble': 'linear-gradient(135deg, #60a5fa, #34d399)',
+        '--emma-chat-user-text': '#0b1120',
+        '--emma-chat-emma-bubble': 'rgba(24, 36, 52, 0.9)',
+        '--emma-chat-emma-text': 'rgba(249, 250, 251, 0.92)',
+        '--emma-chat-user-meta': 'rgba(11, 17, 32, 0.65)',
+        '--emma-chat-emma-meta': 'rgba(249, 250, 251, 0.65)',
+        '--emma-chat-surface': 'rgba(31, 41, 55, 0.45)',
+        '--emma-chat-surface-strong': 'rgba(31, 41, 55, 0.6)',
+        '--emma-chat-border': 'rgba(96, 165, 250, 0.32)',
+        '--emma-chat-muted': 'rgba(249, 250, 251, 0.75)',
+        '--emma-chat-strong': 'rgba(249, 250, 251, 0.95)',
+        '--emma-chat-error': '#f87171',
+        '--emma-chat-success': '#34d399',
+        '--emma-nav-highlight': 'rgba(96, 165, 250, 0.26)',
+        '--emma-constellation-node': 'rgba(96, 165, 250, 0.7)',
+        '--emma-constellation-glow': 'rgba(96, 165, 250, 0.95)',
+        '--emma-orb-hue': '215',
+        '--emma-orb-hover-intensity': '0.27',
+        '--emma-glass': 'rgba(15, 23, 42, 0.65)',
+        '--emma-card-bg': 'rgba(17, 24, 39, 0.6)',
+        '--emma-button-secondary-bg': 'rgba(31, 41, 55, 0.55)',
+        '--emma-button-secondary-border': 'rgba(96, 165, 250, 0.32)',
+        '--emma-button-secondary-text': 'rgba(249, 250, 251, 0.9)',
+        '--emma-button-secondary-bg-hover': 'rgba(31, 41, 55, 0.72)',
+        '--emma-bg-gradient': 'linear-gradient(135deg, #0b1120 0%, #111827 50%, #1f2937 100%)',
+        '--emma-background-zen': 'linear-gradient(135deg, rgba(96, 165, 250, 0.22), rgba(17, 94, 89, 0.25))'
+      },
+      background: {
+        id: 'zen',
+        name: 'Zen Slate',
+        description: 'Holographic mist gliding over graphite horizons.',
+        intensity: 0.3
+      },
+      flags: {
+        highContrast: true,
+        animatedBackground: false
+      }
+    }
+  ];
+
+  const externalCatalog = Array.isArray(window.EMMA_THEMES) ? window.EMMA_THEMES : null;
+  const catalog = externalCatalog && externalCatalog.length ? externalCatalog : DEFAULT_THEME_CATALOG;
+  if (!externalCatalog || externalCatalog.length === 0) {
+    console.warn('Emma theme manager: falling back to built-in theme catalog');
+    window.EMMA_THEMES = catalog;
+  }
+  catalog.forEach(theme => {
+    if (theme && theme.id) {
+      themeLookup.set(theme.id, theme);
+      if (theme.background && theme.background.id) {
+        const existing = backgroundLookup.get(theme.background.id) || {
+          ...theme.background,
+          themeIds: []
+        };
+        if (!existing.themeIds.includes(theme.id)) {
+          existing.themeIds.push(theme.id);
+        }
+        backgroundLookup.set(theme.background.id, existing);
+      }
+    }
+  });
+
+  function getThemeByBackgroundId(backgroundId) {
+    if (!backgroundId) return null;
+    return catalog.find(theme => theme.background && theme.background.id === backgroundId) || null;
+  }
+
+  function getFallbackTheme() {
+    return themeLookup.get(DEFAULT_THEME_ID) || catalog[0] || null;
+  }
+
+  function readPersistedThemeId() {
+    try {
+      const stored = localStorage.getItem(STORAGE_KEY);
+      console.log('[ThemeManager] read persisted theme:', stored);
+      return stored;
+    } catch (error) {
+      console.warn('Emma theme manager: unable to read persisted theme', error);
+      return null;
+    }
+  }
+
+  function persistThemeSelection(themeId) {
+    try {
+      localStorage.setItem(STORAGE_KEY, themeId);
+      console.log('[ThemeManager] persisted theme selection:', themeId);
+    } catch (error) {
+      console.warn('Emma theme manager: unable to persist selection', error);
+    }
+  }
+
+  function readPersistedBackgroundId() {
+    try {
+      const stored = localStorage.getItem(STORAGE_BG_KEY);
+      return stored || null;
+    } catch (error) {
+      console.warn('Emma theme manager: unable to read persisted background', error);
+      return null;
+    }
+  }
+
+  function persistBackgroundId(backgroundId) {
+    try {
+      if (backgroundId) {
+        localStorage.setItem(STORAGE_BG_KEY, backgroundId);
+      } else {
+        localStorage.removeItem(STORAGE_BG_KEY);
+      }
+    } catch (error) {
+      console.warn('Emma theme manager: unable to persist background choice', error);
+    }
+  }
+
+  function applyBackgroundState(backgroundId) {
+    const resolvedBackgroundId = backgroundId || (activeTheme && activeTheme.background && activeTheme.background.id) || null;
+
+    if (resolvedBackgroundId) {
+      docEl.dataset.background = resolvedBackgroundId;
+    } else {
+      delete docEl.dataset.background;
+    }
+
+    const backgroundTheme = getThemeByBackgroundId(resolvedBackgroundId);
+
+    if (backgroundTheme && backgroundTheme.cssVars) {
+      const gradientOverride = backgroundTheme.cssVars['--emma-bg-gradient'] || themeDefaultGradient;
+      if (gradientOverride) {
+        docEl.style.setProperty('--emma-bg-gradient', gradientOverride);
+      } else if (themeDefaultGradient) {
+        docEl.style.setProperty('--emma-bg-gradient', themeDefaultGradient);
+      } else {
+        docEl.style.removeProperty('--emma-bg-gradient');
+      }
+
+      const auroraOverride = backgroundTheme.cssVars['--emma-gradient-aurora'] || backgroundTheme.cssVars['--emma-aurora'];
+      if (auroraOverride) {
+        docEl.style.setProperty('--emma-aurora', auroraOverride);
+      } else if (themeDefaultAurora) {
+        docEl.style.setProperty('--emma-aurora', themeDefaultAurora);
+      } else {
+        docEl.style.removeProperty('--emma-aurora');
+      }
+    } else {
+      if (themeDefaultGradient) {
+        docEl.style.setProperty('--emma-bg-gradient', themeDefaultGradient);
+      } else {
+        docEl.style.removeProperty('--emma-bg-gradient');
+      }
+
+      if (themeDefaultAurora) {
+        docEl.style.setProperty('--emma-aurora', themeDefaultAurora);
+      } else {
+        docEl.style.removeProperty('--emma-aurora');
+      }
+    }
+  }
+
+  function dispatchBackgroundChange(backgroundId, previousBackgroundId) {
+    const detail = {
+      backgroundId: backgroundId || null,
+      previousBackgroundId: previousBackgroundId || null,
+      timestamp: Date.now()
+    };
+    window.dispatchEvent(new CustomEvent('emmaBackgroundChanged', { detail }));
+  }
+
+  function lookupBackground(backgroundId) {
+    return backgroundLookup.get(backgroundId) || null;
+  }
+
+  function buildEventPayload(theme, previousTheme) {
+    return {
+      theme,
+      previousTheme,
+      timestamp: Date.now()
+    };
+  }
+
+  function broadcast(theme, previousTheme, eventName) {
+    if (!theme) return;
+    const detail = buildEventPayload(theme, previousTheme);
+    window.dispatchEvent(new CustomEvent(eventName, { detail }));
+    if (eventName !== EVENT_APPLIED) {
+      window.dispatchEvent(new CustomEvent(EVENT_APPLIED, { detail }));
+    }
+  }
+
+  function applyCssVariables(theme) {
+    if (!theme || !theme.cssVars) return;
+    // Remove previously applied inline properties to avoid stale values
+    appliedVariables.forEach(key => {
+      docEl.style.removeProperty(key);
+    });
+
+    themeDefaultGradient = null;
+    themeDefaultAurora = null;
+
+    const keys = Object.keys(theme.cssVars);
+    keys.forEach(key => {
+      docEl.style.setProperty(key, theme.cssVars[key]);
+    });
+
+    docEl.style.setProperty('--emma-theme-id', `'${theme.id}'`);
+    if (theme.cssVars && theme.cssVars['--emma-bg-gradient']) {
+      themeDefaultGradient = theme.cssVars['--emma-bg-gradient'];
+      docEl.style.setProperty('--emma-bg-gradient', themeDefaultGradient);
+    } else if (!themeDefaultGradient) {
+      const computed = getComputedStyle(docEl).getPropertyValue('--emma-bg-gradient');
+      themeDefaultGradient = computed && computed.trim() ? computed.trim() : null;
+    }
+    appliedVariables = keys.concat('--emma-theme-id');
+
+    if (theme.cssVars && theme.cssVars['--emma-gradient-aurora']) {
+      themeDefaultAurora = theme.cssVars['--emma-gradient-aurora'];
+      docEl.style.setProperty('--emma-aurora', themeDefaultAurora);
+    } else if (!themeDefaultAurora) {
+      const computedAurora = getComputedStyle(docEl).getPropertyValue('--emma-aurora');
+      themeDefaultAurora = computedAurora && computedAurora.trim() ? computedAurora.trim() : null;
+    }
+  }
+
+  function applyBackgroundMetadata(theme, options = {}) {
+    if (!theme) return;
+
+    const stored = readPersistedBackgroundId();
+    const respectStored = options.respectStored !== false;
+    const previousBackground = docEl.dataset.background || null;
+
+    let targetBackgroundId = null;
+
+    if (respectStored && stored && lookupBackground(stored)) {
+      targetBackgroundId = stored;
+    } else if (theme.background && theme.background.id) {
+      targetBackgroundId = theme.background.id;
+      if (options.persist !== false) {
+        persistBackgroundId(theme.background.id);
+      }
+    } else if (options.persist !== false) {
+      persistBackgroundId(null);
+    }
+
+    applyBackgroundState(targetBackgroundId);
+
+    if (previousBackground !== targetBackgroundId) {
+      dispatchBackgroundChange(targetBackgroundId, previousBackground);
+    }
+  }
+
+  async function syncThemeToVault(theme) {
+    const vault = window.emmaWebVault;
+    if (!vault || !vault.vaultData) return;
+
+    try {
+      vault.vaultData.content = vault.vaultData.content || {};
+      vault.vaultData.content.settings = vault.vaultData.content.settings || {};
+
+      vault.vaultData.content.settings.theme = {
+        id: theme.id,
+        appliedAt: Date.now()
+      };
+
+      if (typeof vault.persistSettings === 'function') {
+        await vault.persistSettings('theme');
+      } else if (typeof vault.saveToIndexedDB === 'function') {
+        await vault.saveToIndexedDB();
+      } else {
+        // Fallback: flag pending save
+        vault.pendingChanges = true;
+      }
+    } catch (error) {
+      console.warn('Emma theme manager: unable to sync theme to vault', error);
+    }
+  }
+
+  function applyTheme(themeId, options = {}) {
+    const previousTheme = activeTheme;
+
+    let theme = themeLookup.get(themeId);
+    if (!theme) {
+      theme = getFallbackTheme();
+    }
+
+    if (!theme) {
+      console.error('Emma theme manager: no theme available to apply');
+      return null;
+    }
+
+    if (previousTheme && previousTheme.id === theme.id && options.force !== true) {
+      return activeTheme;
+    }
+
+    docEl.dataset.theme = theme.id;
+    applyCssVariables(theme);
+    applyBackgroundMetadata(theme, {
+      respectStored: options.keepBackground !== false,
+      persist: options.persist !== false
+    });
+
+    activeTheme = theme;
+
+    if (options.persist !== false) {
+      persistThemeSelection(theme.id);
+      syncThemeToVault(theme);
+    }
+
+    broadcast(theme, previousTheme, options.silent ? EVENT_APPLIED : EVENT_CHANGED);
+    return theme;
+  }
+
+  function detectInitialTheme() {
+    const persisted = readPersistedThemeId();
+    if (persisted && themeLookup.has(persisted)) {
+      console.log('[ThemeManager] using persisted theme', persisted);
+      return persisted;
+    }
+
+    // Attempt to map system preference to a matching theme flag
+    try {
+      const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+      if (prefersDark) {
+        const darkCandidate = catalog.find(theme => theme.flags && theme.flags.darkPreferred);
+        if (darkCandidate) return darkCandidate.id;
+      } else {
+        const lightCandidate = catalog.find(theme => theme.flags && theme.flags.lightPreferred);
+        if (lightCandidate) return lightCandidate.id;
+      }
+    } catch (error) {
+      // No-op: fallback handled below
+    }
+
+    return getFallbackTheme()?.id || null;
+  }
+
+  function initialize() {
+    if (initialized) return;
+    initialized = true;
+
+    const initialThemeId = detectInitialTheme();
+    console.log('[ThemeManager] initialize -> applying', initialThemeId || DEFAULT_THEME_ID);
+    applyTheme(initialThemeId || DEFAULT_THEME_ID, { persist: false, silent: true });
+
+    if (window.matchMedia) {
+      try {
+        const media = window.matchMedia('(prefers-color-scheme: dark)');
+        media.addEventListener('change', () => {
+          const stored = readPersistedThemeId();
+          if (!stored) {
+            const fallbackId = detectInitialTheme();
+            applyTheme(fallbackId, { persist: false });
+          }
+        });
+      } catch (error) {
+        // Older browsers may not support addEventListener on media query lists
+      }
+    }
+  }
+  function updateBackground(backgroundId, options = {}) {
+    if (backgroundId && !lookupBackground(backgroundId)) {
+      console.warn('Emma theme manager: unknown background id', backgroundId);
+    }
+
+    const previous = docEl.dataset.background || null;
+    applyBackgroundState(backgroundId || null);
+
+    if (options.persist !== false) {
+      persistBackgroundId(backgroundId || null);
+    }
+
+    if (previous !== (backgroundId || null)) {
+      dispatchBackgroundChange(backgroundId || null, previous);
+    }
+  }
+  const themeManager = {
+    init: initialize,
+    applyTheme,
+    setTheme(themeId, options = {}) {
+      return applyTheme(themeId, options);
+    },
+    getTheme(themeId) {
+      return themeLookup.get(themeId) || null;
+    },
+    getThemes() {
+      return [...catalog];
+    },
+    getActiveTheme() {
+      return activeTheme;
+    },
+    setBackground(backgroundId, options = {}) {
+      updateBackground(backgroundId, options);
+    },
+    getBackground() {
+      return docEl.dataset.background || null;
+    },
+    getBackgrounds() {
+      return [...backgroundLookup.values()];
+    },
+    getBackgroundInfo(backgroundId) {
+      return lookupBackground(backgroundId);
+    },
+    refresh() {
+      if (activeTheme) {
+        applyTheme(activeTheme.id, { force: true, persist: false, silent: true });
+      }
+    }
+  };
+
+  window.emmaThemeManager = themeManager;
+  initialize();
+})();
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/js/theme-settings-ui.js b/js/theme-settings-ui.js
new file mode 100644
index 00000000..93f91413
--- /dev/null
+++ b/js/theme-settings-ui.js
@@ -0,0 +1,453 @@
+(function(window) {
+  if (!window) return;
+
+  const instances = new Set();
+  let previewOriginal = null;
+  let listenersBound = false;
+
+  function init(config = {}) {
+    console.log('[EmmaThemeUI] init called with', config);
+    if (!window.emmaThemeManager) {
+      console.warn('EmmaThemeUI: theme manager not available yet.');
+      setTimeout(() => init(config), 200);
+      return;
+    }
+
+    const themeContainer = config.themeContainerId
+      ? document.getElementById(config.themeContainerId)
+      : null;
+    if (!themeContainer) {
+      console.warn('EmmaThemeUI: theme container not found for id', config.themeContainerId);
+      return;
+    }
+
+    const backgroundContainer = config.backgroundContainerId
+      ? document.getElementById(config.backgroundContainerId)
+      : null;
+
+    const instance = {
+      themeContainer,
+      backgroundContainer
+    };
+    instances.add(instance);
+
+    renderThemeCards(instance);
+    if (backgroundContainer) {
+      renderBackgroundOptions(instance);
+    }
+
+    if (!listenersBound) {
+      window.addEventListener('emmaThemeApplied', handleThemeApplied);
+      window.addEventListener('emmaBackgroundChanged', handleBackgroundChanged);
+      listenersBound = true;
+    }
+
+    ensureThemeConsistency();
+    const activeTheme = window.emmaThemeManager.getActiveTheme();
+    if (activeTheme) {
+      updateThemeActiveState(activeTheme.id);
+    }
+    updateBackgroundActiveState(window.emmaThemeManager.getBackground());
+  }
+
+  function renderThemeCards(instance) {
+    const container = instance.themeContainer;
+    if (!container) return;
+
+    const themes = window.emmaThemeManager.getThemes();
+    if (!Array.isArray(themes) || themes.length === 0) {
+      console.warn('EmmaThemeUI: no themes available to render, retrying shortly...');
+      setTimeout(() => renderThemeCards(instance), 200);
+      if (!container.dataset.pendingMessage) {
+        container.dataset.pendingMessage = 'true';
+        container.innerHTML = `
+          <div style="padding:16px;border:1px solid rgba(var(--emma-neutral-rgb),0.12);border-radius:12px;background:rgba(var(--emma-neutral-rgb),0.04);color:var(--emma-text-secondary);">
+            Loading themes...
+          </div>
+        `;
+      }
+      return;
+    }
+    console.log('[EmmaThemeUI] rendering themes:', themes.length);
+    delete container.dataset.pendingMessage;
+    const activeThemeId = window.emmaThemeManager.getActiveTheme()?.id || null;
+    const fragment = document.createDocumentFragment();
+    themes.forEach(theme => {
+      fragment.appendChild(createThemeCard(theme));
+    });
+    container.innerHTML = '';
+    container.appendChild(fragment);
+    updateThemeActiveState(activeThemeId);
+  }
+
+  function renderBackgroundOptions(instance) {
+    const container = instance.backgroundContainer;
+    if (!container) return;
+
+    const backgroundsRaw = window.emmaThemeManager.getBackgrounds() || [];
+    if (!Array.isArray(backgroundsRaw) || backgroundsRaw.length === 0) {
+      console.warn('EmmaThemeUI: no backgrounds available to render, retrying shortly...');
+      setTimeout(() => renderBackgroundOptions(instance), 200);
+      container.innerHTML = `
+        <div style="padding:14px;border:1px solid rgba(var(--emma-neutral-rgb),0.12);border-radius:12px;background:rgba(var(--emma-neutral-rgb),0.04);color:var(--emma-text-secondary);">
+          Loading backgrounds...
+        </div>
+      `;
+      return;
+    }
+    delete container.dataset.pendingMessage;
+    const backgrounds = backgroundsRaw
+      .slice()
+      .sort((a, b) => {
+        const nameA = (a.name || a.id).toLowerCase();
+        const nameB = (b.name || b.id).toLowerCase();
+        return nameA.localeCompare(nameB);
+      });
+    const backgroundMap = new Map(backgrounds.map(bg => [bg.id, bg]));
+    console.log('[EmmaThemeUI] rendering backgrounds:', backgrounds.length);
+
+    const fragment = document.createDocumentFragment();
+    fragment.appendChild(createBackgroundOption(null));
+    backgrounds.forEach(background => {
+      fragment.appendChild(createBackgroundOption(background));
+    });
+    container.innerHTML = '';
+    container.appendChild(fragment);
+    updateBackgroundActiveState(window.emmaThemeManager.getBackground());
+  }
+
+  function createThemeCard(theme) {
+    const card = document.createElement('button');
+    card.type = 'button';
+    card.className = 'theme-card';
+    card.dataset.themeId = theme.id;
+    card.setAttribute('role', 'listitem');
+    card.setAttribute('aria-label', `${theme.name} theme`);
+
+    const preview = document.createElement('div');
+    preview.className = 'theme-card__preview';
+    preview.setAttribute('aria-hidden', 'true');
+    card.appendChild(preview);
+    const gradientPrimary = theme.cssVars?.['--emma-gradient-primary'] || theme.preview?.primary || '';
+    preview.style.background = gradientPrimary;
+
+    const swatches = document.createElement('div');
+    swatches.className = 'theme-card__swatches';
+    preview.appendChild(swatches);
+    const swatchEls = [];
+    for (let i = 0; i < 3; i += 1) {
+      const swatch = document.createElement('span');
+      swatch.className = 'theme-card__swatch';
+      swatches.appendChild(swatch);
+      swatchEls.push(swatch);
+    }
+    const swatchColors = [
+      theme.preview?.primary || theme.cssVars?.['--emma-accent-primary'],
+      theme.preview?.secondary || theme.cssVars?.['--emma-accent-secondary'],
+      theme.preview?.surface || theme.cssVars?.['--emma-surface-primary']
+    ];
+    swatchEls.forEach((swatch, index) => {
+      const color = swatchColors[index];
+      if (color) {
+        swatch.style.background = color;
+        swatch.style.opacity = '1';
+      } else {
+        swatch.style.background = 'var(--emma-glass)';
+        swatch.style.opacity = '0.25';
+      }
+    });
+
+    const info = document.createElement('div');
+    info.className = 'theme-card__info';
+    card.appendChild(info);
+
+    const nameEl = document.createElement('div');
+    nameEl.className = 'theme-card__name';
+    nameEl.textContent = theme.name;
+    info.appendChild(nameEl);
+
+    const descEl = document.createElement('div');
+    descEl.className = 'theme-card__description';
+    descEl.textContent = theme.description || 'Custom Emma theme.';
+    info.appendChild(descEl);
+
+    const badges = [];
+    if (theme.flags?.highContrast) {
+      badges.push('High Contrast');
+    }
+    if (theme.flags?.animatedBackground) {
+      badges.push('Animated');
+    }
+    if (badges.length) {
+      const badgeRow = document.createElement('div');
+      badgeRow.className = 'theme-card__badges';
+      badges.forEach(label => {
+        const badge = document.createElement('span');
+        badge.className = 'theme-card__badge';
+        badge.textContent = label;
+        badgeRow.appendChild(badge);
+      });
+      card.appendChild(badgeRow);
+    }
+
+    attachThemeCardEvents(card);
+    return card;
+  }
+
+  function attachThemeCardEvents(card) {
+    if (card.dataset.themeEventsBound === 'true') {
+      return;
+    }
+    card.addEventListener('click', handleThemeCardClick);
+    card.addEventListener('mouseenter', handleThemeCardEnter);
+    card.addEventListener('mouseleave', cancelThemePreview);
+    card.addEventListener('focus', handleThemeCardEnter);
+    card.addEventListener('blur', cancelThemePreview);
+    card.dataset.themeEventsBound = 'true';
+  }
+
+  function handleThemeCardClick(event) {
+    const themeId = event?.currentTarget?.dataset?.themeId;
+    if (themeId) {
+      applyThemeSelection(themeId);
+    }
+  }
+
+  function handleThemeCardEnter(event) {
+    const themeId = event?.currentTarget?.dataset?.themeId;
+    if (themeId) {
+      previewTheme(themeId);
+    }
+  }
+
+  function createBackgroundOption(background) {
+    const option = document.createElement('button');
+    option.type = 'button';
+    option.className = 'background-option';
+    option.setAttribute('role', 'listitem');
+    hydrateBackgroundOption(option, background);
+    return option;
+  }
+
+  function hydrateBackgroundOption(option, background) {
+    const id = background?.id || '';
+    option.dataset.backgroundId = id;
+    option.type = 'button';
+    option.classList.add('background-option');
+    option.setAttribute('role', 'listitem');
+    const name = background?.name || 'Emma Adaptive';
+    const description = background?.description || 'Automatically uses the background recommended by each theme.';
+    option.setAttribute('aria-label', `${name} background`);
+
+    let preview = option.querySelector('.background-option__preview');
+    if (!preview) {
+      preview = document.createElement('div');
+      preview.className = 'background-option__preview';
+      preview.setAttribute('aria-hidden', 'true');
+      option.insertBefore(preview, option.firstChild);
+    }
+    preview.style.background = getBackgroundPreviewFill(background);
+
+    let info = option.querySelector('.background-option__info');
+    if (!info) {
+      info = document.createElement('div');
+      info.className = 'background-option__info';
+      option.appendChild(info);
+    }
+    let nameEl = info.querySelector('.background-option__name');
+    if (!nameEl) {
+      nameEl = document.createElement('div');
+      nameEl.className = 'background-option__name';
+      info.appendChild(nameEl);
+    }
+    nameEl.textContent = name;
+
+    let descEl = info.querySelector('.background-option__description');
+    if (!descEl) {
+      descEl = document.createElement('div');
+      descEl.className = 'background-option__description';
+      info.appendChild(descEl);
+    }
+    descEl.textContent = description;
+
+    attachBackgroundOptionEvents(option);
+  }
+
+  function getBackgroundPreviewFill(background) {
+    if (!background || !background.id) {
+      return 'var(--emma-gradient-secondary)';
+    }
+    const firstThemeId = Array.isArray(background.themeIds) ? background.themeIds[0] : null;
+    if (firstThemeId) {
+      const theme = window.emmaThemeManager.getTheme(firstThemeId);
+      const gradient = theme?.cssVars?.['--emma-gradient-primary'];
+      if (gradient) {
+        return gradient;
+      }
+    }
+    const fallbackTheme = window.emmaThemeManager
+      .getThemes()
+      .find(theme => theme.background?.id === background.id);
+    if (fallbackTheme?.cssVars?.['--emma-gradient-primary']) {
+      return fallbackTheme.cssVars['--emma-gradient-primary'];
+    }
+    return `var(--emma-background-${background.id})`;
+  }
+
+  function attachBackgroundOptionEvents(option) {
+    if (option.dataset.backgroundEventsBound === 'true') {
+      return;
+    }
+    option.addEventListener('click', handleBackgroundClick);
+    option.dataset.backgroundEventsBound = 'true';
+  }
+
+  function handleBackgroundClick(event) {
+    const target = event?.currentTarget;
+    if (!target) {
+      return;
+    }
+    const backgroundId = target.dataset.backgroundId || '';
+    console.log('[EmmaThemeUI] selecting background', backgroundId || 'follow-theme');
+    updateBackground(backgroundId || null, { persist: true });
+    try {
+      if (backgroundId) {
+        localStorage.setItem('emma.theme.background', backgroundId);
+      } else {
+        localStorage.removeItem('emma.theme.background');
+      }
+    } catch (error) {
+      console.warn('EmmaThemeUI: could not persist background directly', error);
+    }
+    updateBackgroundActiveState(backgroundId || null);
+  }
+
+  function applyThemeSelection(themeId) {
+    if (!window.emmaThemeManager) return;
+    console.log('[EmmaThemeUI] applying theme via selection', themeId);
+    previewOriginal = null;
+    const currentBackground = window.emmaThemeManager.getBackground();
+    const keepBackground = !!currentBackground;
+    window.emmaThemeManager.setTheme(themeId, { keepBackground });
+    try {
+      localStorage.setItem('emma.theme.selection', themeId);
+    } catch (error) {
+      console.warn('EmmaThemeUI: could not persist theme selection directly', error);
+    }
+    updateThemeActiveState(themeId);
+  }
+
+  function previewTheme(themeId) {
+    if (!window.emmaThemeManager) return;
+    const activeTheme = window.emmaThemeManager.getActiveTheme();
+    if (activeTheme && activeTheme.id === themeId) {
+      return;
+    }
+    if (!previewOriginal) {
+      previewOriginal = activeTheme ? activeTheme.id : null;
+    }
+    window.emmaThemeManager.setTheme(themeId, { persist: false, silent: true, keepBackground: true });
+    updateThemeActiveState(themeId);
+  }
+
+  function cancelThemePreview() {
+    if (!window.emmaThemeManager) return;
+    if (!previewOriginal) return;
+    const current = window.emmaThemeManager.getActiveTheme();
+    if (current && current.id !== previewOriginal) {
+      window.emmaThemeManager.setTheme(previewOriginal, { persist: false, silent: true, keepBackground: true });
+      updateThemeActiveState(previewOriginal);
+    }
+    previewOriginal = null;
+  }
+
+  function updateThemeActiveState(activeThemeId) {
+    document.querySelectorAll('.theme-card').forEach(card => {
+      const isActive = card.dataset.themeId === activeThemeId;
+      card.classList.toggle('theme-card--active', isActive);
+      if (isActive) {
+        card.setAttribute('aria-current', 'true');
+      } else {
+        card.removeAttribute('aria-current');
+      }
+    });
+  }
+
+  function updateBackgroundActiveState(backgroundId) {
+    document.querySelectorAll('.background-option').forEach(option => {
+      const optionId = option.dataset.backgroundId || '';
+      const isActive = (!backgroundId && !optionId) || optionId === backgroundId;
+      option.classList.toggle('background-option--active', isActive);
+      if (isActive) {
+        option.setAttribute('aria-current', 'true');
+      } else {
+        option.removeAttribute('aria-current');
+      }
+    });
+  }
+
+  function updateBackground(backgroundId, options = {}) {
+    if (!window.emmaThemeManager) return;
+    window.emmaThemeManager.setBackground(backgroundId, options);
+  }
+
+  function handleThemeApplied(event) {
+    const themeId = event?.detail?.theme?.id;
+    if (themeId) {
+      updateThemeActiveState(themeId);
+      updateBackgroundActiveState(window.emmaThemeManager.getBackground());
+    }
+  }
+
+  function handleBackgroundChanged(event) {
+    updateBackgroundActiveState(event?.detail?.backgroundId || null);
+  }
+
+  window.EmmaThemeUI = {
+    init,
+    refresh() {
+      ensureThemeConsistency();
+      const activeTheme = window.emmaThemeManager?.getActiveTheme()?.id;
+      if (activeTheme) {
+        updateThemeActiveState(activeTheme);
+      }
+      updateBackgroundActiveState(window.emmaThemeManager?.getBackground() || null);
+      instances.forEach(instance => {
+        renderThemeCards(instance);
+        if (instance.backgroundContainer) {
+          renderBackgroundOptions(instance);
+        }
+      });
+    }
+  };
+
+  function ensureThemeConsistency() {
+    if (!window.emmaThemeManager) return;
+    try {
+      const storedThemeId = localStorage.getItem('emma.theme.selection');
+      const activeTheme = window.emmaThemeManager.getActiveTheme();
+      if (storedThemeId && (!activeTheme || activeTheme.id !== storedThemeId)) {
+        const themeExists = window.emmaThemeManager.getTheme(storedThemeId);
+        if (themeExists) {
+          const currentBg = window.emmaThemeManager.getBackground();
+          const keepBackground = !!currentBg;
+          window.emmaThemeManager.setTheme(storedThemeId, {
+            persist: false,
+            silent: true,
+            keepBackground
+          });
+        }
+      }
+
+      const storedBackground = localStorage.getItem('emma.theme.background');
+      const activeBackground = window.emmaThemeManager.getBackground();
+      if (storedBackground && activeBackground !== storedBackground) {
+        window.emmaThemeManager.setBackground(storedBackground, { persist: false });
+      } else if (!storedBackground && activeBackground) {
+        window.emmaThemeManager.setBackground(null, { persist: false });
+      }
+    } catch (error) {
+      console.warn('EmmaThemeUI: unable to sync theme from storage', error);
+    }
+  }
+})(window);
diff --git a/js/unified-memory-wizard.js b/js/unified-memory-wizard.js
index 0aa1e064..b0e9695e 100644
--- a/js/unified-memory-wizard.js
+++ b/js/unified-memory-wizard.js
@@ -204,7 +204,7 @@ class UnifiedMemoryWizard extends ExperiencePopup {
 
         .visualizer-bars .bar {
           width: 4px;
-          background: linear-gradient(to top, #8B5CF6, #A78BFA);
+          background: linear-gradient(to top, #6F63D9, #A78BFA);
           border-radius: 2px;
           height: 8px;
           transition: height 0.2s ease;
@@ -274,15 +274,15 @@ class UnifiedMemoryWizard extends ExperiencePopup {
         }
 
         .person-card.selected {
-          background: rgba(139, 92, 246, 0.3);
-          border-color: rgba(139, 92, 246, 0.5);
+          background: rgba(111, 99, 217, 0.3);
+          border-color: rgba(111, 99, 217, 0.5);
         }
 
         .person-avatar {
           width: 40px;
           height: 40px;
           border-radius: 50%;
-          background: linear-gradient(135deg, #8B5CF6, #A78BFA);
+          background: linear-gradient(135deg, #6F63D9, #A78BFA);
           display: flex;
           align-items: center;
           justify-content: center;
@@ -367,9 +367,9 @@ class UnifiedMemoryWizard extends ExperiencePopup {
         .selected-people-summary {
           margin-top: 16px;
           padding: 12px;
-          background: rgba(139, 92, 246, 0.1);
+          background: rgba(111, 99, 217, 0.1);
           border-radius: 8px;
-          border: 1px solid rgba(139, 92, 246, 0.2);
+          border: 1px solid rgba(111, 99, 217, 0.2);
         }
 
         .summary-label {
@@ -387,8 +387,8 @@ class UnifiedMemoryWizard extends ExperiencePopup {
         }
 
         .selected-person-tag {
-          background: rgba(139, 92, 246, 0.3);
-          border: 1px solid rgba(139, 92, 246, 0.4);
+          background: rgba(111, 99, 217, 0.3);
+          border: 1px solid rgba(111, 99, 217, 0.4);
           border-radius: 16px;
           padding: 4px 12px;
           color: white;
@@ -971,7 +971,7 @@ class UnifiedMemoryWizard extends ExperiencePopup {
 
       } else {
         console.warn('🌟 EmmaOrb class not available, using fallback');
-        orbContainer.style.background = 'radial-gradient(circle at 30% 30%, #8A5EFA, #764ba2, #f093fb)';
+        orbContainer.style.background = 'radial-gradient(circle at 30% 30%, #8A5EFA, #764ba2, #deb3e4)';
       }
     } catch (error) {
       console.error('🚨 Error initializing Wizard Emma Orb:', error);
@@ -1815,7 +1815,7 @@ class UnifiedMemoryWizard extends ExperiencePopup {
           }
 
           console.log('👥 WIZARD: Saving memory with people connections:', this.selectedPeople);
-          
+
           const result = await window.emmaWebVault.addMemory({
             content: memoryCapsule.content || memoryCapsule.story,
             metadata: {
@@ -1829,7 +1829,7 @@ class UnifiedMemoryWizard extends ExperiencePopup {
             },
             attachments: vaultAttachments
           });
-          
+
           console.log('✅ WIZARD: Memory saved with people connections:', this.selectedPeople?.length || 0);
 
           this.showSuccessMessage('Memory capsule saved to your secure .emma vault! 🎉');
diff --git a/js/universal-vault-modal.js b/js/universal-vault-modal.js
index 080d60c2..e26e2f01 100644
--- a/js/universal-vault-modal.js
+++ b/js/universal-vault-modal.js
@@ -369,7 +369,7 @@ class UniversalVaultModal {
         height: 80px;
         margin: 0 auto;
         border-radius: 50%;
-        background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
+        background: linear-gradient(135deg, #6f63d9 0%, #d06fa8 100%);
         display: flex;
         align-items: center;
         justify-content: center;
@@ -382,7 +382,7 @@ class UniversalVaultModal {
         position: absolute;
         inset: -4px;
         border-radius: 50%;
-        background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
+        background: linear-gradient(135deg, #6f63d9 0%, #d06fa8 100%);
         opacity: 0.3;
         animation: vaultGlow 2s ease-in-out infinite alternate;
       }
@@ -407,7 +407,7 @@ class UniversalVaultModal {
         font-size: 2rem;
         font-weight: 700;
         margin-bottom: 12px;
-        background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
+        background: linear-gradient(135deg, #6f63d9 0%, #d06fa8 100%);
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
         background-clip: text;
@@ -454,8 +454,8 @@ class UniversalVaultModal {
 
       .universal-vault-input:focus {
         outline: none;
-        border-color: rgba(139, 92, 246, 0.6);
-        box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
+        border-color: rgba(111, 99, 217, 0.6);
+        box-shadow: 0 0 0 3px rgba(111, 99, 217, 0.1);
         background: rgba(255, 255, 255, 0.15);
       }
 
@@ -510,7 +510,7 @@ class UniversalVaultModal {
       }
 
       .universal-vault-session-label input[type="checkbox"]:checked + .checkmark {
-        background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
+        background: linear-gradient(135deg, #6f63d9 0%, #d06fa8 100%);
         border-color: transparent;
       }
 
@@ -573,14 +573,14 @@ class UniversalVaultModal {
       }
 
       .universal-vault-btn-primary {
-        background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
+        background: linear-gradient(135deg, #6f63d9 0%, #d06fa8 100%);
         color: white;
         border: none;
       }
 
       .universal-vault-btn-primary:hover:not(:disabled) {
         transform: translateY(-2px);
-        box-shadow: 0 10px 30px rgba(139, 92, 246, 0.3);
+        box-shadow: 0 10px 30px rgba(111, 99, 217, 0.3);
       }
 
       .btn-loading {
diff --git a/js/vault-control-panel.js b/js/vault-control-panel.js
index 4723755b..86b34930 100644
--- a/js/vault-control-panel.js
+++ b/js/vault-control-panel.js
@@ -1,4 +1,4 @@
-/**
+/**
  * Emma Vault Control Panel
  * Elegant central vault management interface
  * 
@@ -8,7 +8,7 @@
  * - Vault statistics and security controls
  * - Perfect for dementia users - clear, simple interface
  * 
- * FOR DEBBE: Complete vault control in one beautiful modal ❤️
+ * FOR DEBBE: Complete vault control in one beautiful modal \u2764\uFE0F
  */
 
 class EmmaVaultControlPanel {
@@ -20,9 +20,12 @@ class EmmaVaultControlPanel {
       hasUnsavedChanges: false,
       autoSaveEnabled: true
     };
+    this.boundEscapeHandler = null;
+    this.triggerElement = null;
     
-    console.log('🛡️ Emma Vault Control Panel initialized');
+    console.log('\u{1F6E1}\uFE0F Emma Vault Control Panel initialized');
     
+    this.ensureStylesInjected();
     // Create and inject the control panel
     this.createControlPanel();
     this.updateSyncStatus();
@@ -35,43 +38,79 @@ class EmmaVaultControlPanel {
     }, 30000);
   }
 
+  ensureStylesInjected() {
+    if (document.getElementById('emmaVaultControlPanelStyles')) {
+      return;
+    }
+
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.id = 'emmaVaultControlPanelStyles';
+
+    try {
+      const currentScript = document.currentScript || Array.from(document.getElementsByTagName('script'))
+        .find(script => script && script.src && script.src.includes('vault-control-panel.js'));
+      const scriptUrl = currentScript ? new URL(currentScript.src, window.location.href) : null;
+      const cssUrl = scriptUrl ? new URL('../css/vault-control-panel.css', scriptUrl) : null;
+      link.href = cssUrl ? cssUrl.href : 'css/vault-control-panel.css';
+    } catch (error) {
+      console.warn('Vault Control Panel: failed to resolve stylesheet path, using default', error);
+      link.href = 'css/vault-control-panel.css';
+    }
+
+    link.onerror = () => {
+      link.remove();
+      if (!document.getElementById('emmaVaultControlPanelInlineStyles')) {
+        const fallback = document.createElement('style');
+        fallback.id = 'emmaVaultControlPanelInlineStyles';
+        fallback.textContent = `
+          .vault-control-shield {
+            position: fixed;
+            bottom: 24px;
+            right: 24px;
+            z-index: 9999;
+            border: none;
+            border-radius: 50%;
+            width: 48px;
+            height: 48px;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            background: rgba(var(--emma-accent-primary-rgb, 111, 99, 217), 0.18);
+            color: var(--emma-accent-primary, #6f63d9);
+            cursor: pointer;
+          }
+        `;
+        document.head.appendChild(fallback);
+      }
+    };
+
+    document.head.appendChild(link);
+  }
+
   /**
    * Create the elegant control panel interface
    */
   createControlPanel() {
     // Create shield icon (always visible)
-    const shieldIcon = document.createElement('div');
+    const shieldIcon = document.createElement('button');
     shieldIcon.id = 'vaultControlShield';
-    shieldIcon.style.cssText = `
-      position: fixed;
-      bottom: 24px;
-      right: 24px;
-      cursor: pointer;
-      transition: all 0.3s ease;
-      z-index: 9999;
-      font-size: 24px;
-      color: rgba(139, 92, 246, 0.8);
-      padding: 8px;
+    shieldIcon.className = 'vault-control-shield emma-floating-button';
+    shieldIcon.type = 'button';
+    shieldIcon.setAttribute('aria-expanded', 'false');
+    shieldIcon.setAttribute('aria-label', 'Vault Control Panel');
+    shieldIcon.innerHTML = `
+      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+        <path d="M12 22s8-3.5 8-10V5l-8-3-8 3v7c0 6.5 8 10 8 10z"/>
+      </svg>
     `;
-    shieldIcon.innerHTML = `🛡️`;
     shieldIcon.title = 'Vault Control Panel';
     
-    // Clean hover effects
-    shieldIcon.addEventListener('mouseenter', () => {
-      shieldIcon.style.transform = 'scale(1.2)';
-      shieldIcon.style.color = 'rgba(139, 92, 246, 1)';
-    });
-    
-    shieldIcon.addEventListener('mouseleave', () => {
-      shieldIcon.style.transform = 'scale(1)';
-      shieldIcon.style.color = 'rgba(139, 92, 246, 0.8)';
-    });
-    
     // Click to open control panel
     shieldIcon.addEventListener('click', () => this.openControlPanel());
     
     document.body.appendChild(shieldIcon);
-    console.log('🛡️ Vault Control Panel shield icon created');
+    console.log('\u{1F6E1}\uFE0F Vault Control Panel shield icon created');
   }
 
   /**
@@ -81,7 +120,7 @@ class EmmaVaultControlPanel {
     if (this.isOpen) return;
     this.isOpen = true;
     
-    console.log('🛡️ Opening Vault Control Panel...');
+    console.log('\u{1F6E1}\uFE0F Opening Vault Control Panel...');
     
     // Update sync status before showing
     this.updateSyncStatus();
@@ -89,50 +128,39 @@ class EmmaVaultControlPanel {
     // Create modal overlay
     const modalOverlay = document.createElement('div');
     modalOverlay.id = 'vaultControlModal';
-    modalOverlay.style.cssText = `
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background: rgba(0, 0, 0, 0.8);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      z-index: 10000;
-      backdrop-filter: blur(15px);
-      opacity: 0;
-      transition: opacity 0.3s ease;
-    `;
+    modalOverlay.className = 'vault-control-overlay';
     
     // Create modal content
     const modal = document.createElement('div');
-    modal.style.cssText = `
-      background: linear-gradient(135deg, #1a1a2e, #16213e);
-      border-radius: 24px;
-      padding: 40px;
-      max-width: 600px;
-      width: 90%;
-      max-height: 80vh;
-      overflow-y: auto;
-      border: 2px solid rgba(139, 92, 246, 0.3);
-      box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
-      transform: scale(0.9);
-      transition: transform 0.3s ease;
-    `;
+    modal.className = 'vault-control-dialog';
+    modal.setAttribute('role', 'dialog');
+    modal.setAttribute('aria-modal', 'true');
+    modal.setAttribute('aria-labelledby', 'vaultControlTitle');
+    modal.tabIndex = -1;
     
     modal.innerHTML = this.generateModalContent();
     modalOverlay.appendChild(modal);
     document.body.appendChild(modalOverlay);
+    this.triggerElement = document.getElementById('vaultControlShield');
+    if (this.triggerElement) {
+      this.triggerElement.setAttribute('aria-expanded', 'true');
+    }
     
     // Animate in
-    setTimeout(() => {
-      modalOverlay.style.opacity = '1';
-      modal.style.transform = 'scale(1)';
-    }, 10);
+    requestAnimationFrame(() => {
+      modalOverlay.classList.add('is-visible');
+      modal.focus();
+    });
     
     // Set up event listeners
     this.setupModalEventListeners(modalOverlay);
+
+    this.boundEscapeHandler = (event) => {
+      if (event.key === 'Escape') {
+        this.closeControlPanel();
+      }
+    };
+    document.addEventListener('keydown', this.boundEscapeHandler);
   }
 
   /**
@@ -141,183 +169,149 @@ class EmmaVaultControlPanel {
   generateModalContent() {
     const vaultInfo = this.getVaultInfo();
     const syncStatus = this.syncStatus;
+    const syncState = syncStatus.hasUnsavedChanges ? 'dirty' : 'clean';
+    const syncAccent = syncStatus.hasUnsavedChanges ? 'var(--emma-warning)' : 'var(--emma-success)';
+    const syncHeadline = syncStatus.hasUnsavedChanges ? '\u26A0\uFE0F Unsaved Changes' : '\u2705 In Sync';
+    const syncDescription = syncStatus.hasUnsavedChanges
+      ? 'Your web app has newer data than your local file.'
+      : 'Web app and local file are up to date.';
+    const heroSignalText = (syncHeadline || 'Sync Status').replace(/[<>]/g, '').trim();
     
     return `
-      <div style="text-align: center; margin-bottom: 30px;">
-        <div style="font-size: 48px; margin-bottom: 15px;">🛡️</div>
-        <h2 style="color: white; margin: 0 0 10px 0; font-size: 28px; font-weight: 600;">
-          Vault Control Panel
-        </h2>
-        <p style="color: rgba(255,255,255,0.7); margin: 0; font-size: 16px;">
-          Manage your precious memories vault
-        </p>
-      </div>
-      
-      <!-- Vault Information -->
-      <div style="
-        background: rgba(139, 92, 246, 0.1);
-        border: 2px solid rgba(139, 92, 246, 0.3);
-        border-radius: 16px;
-        padding: 20px;
-        margin-bottom: 24px;
-      ">
-        <h3 style="color: white; margin: 0 0 15px 0; font-size: 18px; display: flex; align-items: center; gap: 10px;">
-          📁 ${vaultInfo.name}
-        </h3>
-        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px; color: rgba(255,255,255,0.9);">
-          <div>
-            <strong>💝 Memories:</strong> ${vaultInfo.memoryCount}
+      <button type="button" class="vault-control__dismiss" id="closeControlPanelIcon" aria-label="Close vault control panel">
+        <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+          <path d="M6 6l12 12M18 6l-12 12" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path>
+        </svg>
+      </button>
+      <div class="vault-control">
+        <header class="vault-control__hero" aria-label="Vault overview">
+          <div class="vault-hero">
+            <span class="vault-hero__glow" aria-hidden="true"></span>
+            <div class="vault-hero__signal" role="status">
+              <span class="vault-hero__signal-dot" data-state="${syncState}" aria-hidden="true"></span>
+              <span class="vault-hero__signal-text">${heroSignalText || 'Sync Status'}</span>
+            </div>
+            <div class="vault-hero__core">
+              <div class="vault-hero__icon" aria-hidden="true">\u{1F6E1}\uFE0F</div>
+              <div class="vault-hero__copy">
+                <span class="vault-hero__eyebrow">Emma Vault System</span>
+                <h2 id="vaultControlTitle" class="vault-hero__title">Vault Control Hub</h2>
+                <p class="vault-hero__subtitle">Curate, lock, and share your memory constellation with total confidence.</p>
+              </div>
+            </div>
+            <div class="vault-hero__quickstats" aria-label="Vault at a glance">
+              <div class="vault-hero__stat">
+                <span>Memories</span>
+                <strong>${vaultInfo.memoryCount}</strong>
+              </div>
+              <div class="vault-hero__stat">
+                <span>People</span>
+                <strong>${vaultInfo.peopleCount}</strong>
+              </div>
+              <div class="vault-hero__stat">
+                <span>Media</span>
+                <strong>${vaultInfo.mediaCount}</strong>
+              </div>
+              <div class="vault-hero__stat">
+                <span>Last Sync</span>
+                <strong>${syncStatus.webAppLastSaved || 'Never'}</strong>
+              </div>
+            </div>
+            <div class="vault-hero__meta" aria-label="Active vault">
+              <span class="vault-hero__chip">Active Vault</span>
+              <span class="vault-hero__name">${vaultInfo.name}</span>
+            </div>
           </div>
-          <div>
-            <strong>👥 People:</strong> ${vaultInfo.peopleCount}
+        </header>
+        
+        <!-- Vault Information -->
+        <section class="vault-section vault-section--info">
+          <div class="vault-section__header">
+            <span class="vault-section__eyebrow">Vault Overview</span>
+            <div class="vault-section__headline">
+              <span class="vault-section__icon" aria-hidden="true">\u{1F4C1}</span>
+              <h3 class="vault-section__title">${vaultInfo.name}</h3>
+            </div>
           </div>
-          <div>
-            <strong>📷 Media:</strong> ${vaultInfo.mediaCount}
+          <dl class="vault-stats">
+            <div class="vault-stats__item">
+              <dt>\u{1F49D} Memories</dt>
+              <dd>${vaultInfo.memoryCount}</dd>
+            </div>
+            <div class="vault-stats__item">
+              <dt>\u{1F465} People</dt>
+              <dd>${vaultInfo.peopleCount}</dd>
+            </div>
+            <div class="vault-stats__item">
+              <dt>\u{1F4F7} Media</dt>
+              <dd>${vaultInfo.mediaCount}</dd>
+            </div>
+            <div class="vault-stats__item">
+              <dt>\u{1F4CA} Size</dt>
+              <dd>${vaultInfo.size}</dd>
+            </div>
+          </dl>
+        </section>
+        
+        <!-- Sync Status -->
+        <section class="vault-section vault-section--sync" data-sync-state="${syncState}" style="--vault-sync-accent: ${syncAccent};">
+          <div class="vault-section__header">
+            <span class="vault-section__eyebrow">Sync Intelligence</span>
+            <div class="vault-section__headline">
+              <span class="vault-section__icon" aria-hidden="true">\u{1F504}</span>
+              <h3 class="vault-section__title">Sync Status</h3>
+            </div>
           </div>
-          <div>
-            <strong>📊 Size:</strong> ${vaultInfo.size}
+          <div class="vault-sync">
+            <div class="vault-sync__row">
+              <span class="vault-sync__label">\u{1F4BE} Web App</span>
+              <span class="vault-sync__value">${syncStatus.webAppLastSaved || 'Never saved'}</span>
+            </div>
+            <div class="vault-sync__row">
+              <span class="vault-sync__label">\u{1F4C1} Local File</span>
+              <span class="vault-sync__value">${syncStatus.localFileLastSaved || 'Never saved'}</span>
+            </div>
+            <div class="vault-sync__row">
+              <span class="vault-sync__label">\u2699\uFE0F Auto Save</span>
+              <span class="vault-sync__value">${syncStatus.autoSaveEnabled ? 'Enabled' : 'Disabled'}</span>
+            </div>
           </div>
-        </div>
-      </div>
-      
-      <!-- Sync Status -->
-      <div style="
-        background: rgba(16, 185, 129, 0.1);
-        border: 2px solid rgba(16, 185, 129, 0.3);
-        border-radius: 16px;
-        padding: 20px;
-        margin-bottom: 24px;
-      ">
-        <h3 style="color: white; margin: 0 0 15px 0; font-size: 18px; display: flex; align-items: center; gap: 10px;">
-          🔄 Sync Status
-        </h3>
-        <div style="color: rgba(255,255,255,0.9); line-height: 1.6;">
-          <div style="margin-bottom: 10px;">
-            <strong>💾 Web App:</strong> ${syncStatus.webAppLastSaved || 'Never saved'}
+          <div class="vault-sync__badge" aria-live="polite">
+            <strong>${syncHeadline}</strong>
+            <span>${syncDescription}</span>
           </div>
-          <div style="margin-bottom: 10px;">
-            <strong>📁 Local File:</strong> ${syncStatus.localFileLastSaved || 'Never saved'}
+        </section>
+        
+        <!-- Vault Controls -->
+        <section class="vault-section vault-section--controls">
+          <div class="vault-section__header">
+            <span class="vault-section__eyebrow">Command Center</span>
+            <div class="vault-section__headline">
+              <span class="vault-section__icon" aria-hidden="true">\u2699\uFE0F</span>
+              <h3 class="vault-section__title">Vault Controls</h3>
+            </div>
           </div>
-          <div style="
-            padding: 12px;
-            background: ${syncStatus.hasUnsavedChanges ? 'rgba(251, 191, 36, 0.2)' : 'rgba(16, 185, 129, 0.2)'};
-            border: 2px solid ${syncStatus.hasUnsavedChanges ? 'rgba(251, 191, 36, 0.4)' : 'rgba(16, 185, 129, 0.4)'};
-            border-radius: 10px;
-            margin-top: 10px;
-          ">
-            ${syncStatus.hasUnsavedChanges ? 
-              '⚠️ <strong>Unsaved Changes</strong><br>Your web app has newer data than your local file' :
-              '✅ <strong>In Sync</strong><br>Web app and local file are up to date'
-            }
+          <div class="vault-actions">
+            <button id="openVaultBtn" class="vault-button emma-button emma-button--neutral">
+              <span class="vault-button__icon" aria-hidden="true">\u{1F4C1}</span>
+              <span class="vault-button__label">Open Different Vault</span>
+            </button>
+            <button id="downloadVaultBtn" class="vault-button emma-button emma-button--affirmative">
+              <span class="vault-button__icon" aria-hidden="true">\u{1F4BE}</span>
+              <span class="vault-button__label">Download Updated Vault</span>
+            </button>
+            <button id="lockVaultBtn" class="vault-button emma-button emma-button--danger">
+              <span class="vault-button__icon" aria-hidden="true">\u{1F512}</span>
+              <span class="vault-button__label">Lock Vault</span>
+            </button>
+            <button id="vaultStatsBtn" class="vault-button emma-button emma-button--outline">
+              <span class="vault-button__icon" aria-hidden="true">\u{1F4CA}</span>
+              <span class="vault-button__label">Vault Statistics</span>
+            </button>
           </div>
-        </div>
-      </div>
-      
-      <!-- Vault Controls -->
-      <div style="
-        background: rgba(255, 255, 255, 0.05);
-        border: 2px solid rgba(255, 255, 255, 0.1);
-        border-radius: 16px;
-        padding: 20px;
-        margin-bottom: 24px;
-      ">
-        <h3 style="color: white; margin: 0 0 20px 0; font-size: 18px; display: flex; align-items: center; gap: 10px;">
-          ⚙️ Vault Controls
-        </h3>
-        <div style="display: grid; gap: 12px;">
-          <button id="openVaultBtn" style="
-            background: linear-gradient(135deg, #3b82f6, #1d4ed8);
-            border: none;
-            color: white;
-            padding: 14px 20px;
-            border-radius: 12px;
-            font-size: 16px;
-            font-weight: 600;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 10px;
-          " onmouseover="this.style.transform='translateY(-2px)'" onmouseout="this.style.transform='translateY(0)'">
-            📁 Open Different Vault
-          </button>
-          
-          <button id="downloadVaultBtn" style="
-            background: linear-gradient(135deg, #10b981, #059669);
-            border: none;
-            color: white;
-            padding: 14px 20px;
-            border-radius: 12px;
-            font-size: 16px;
-            font-weight: 600;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 10px;
-          " onmouseover="this.style.transform='translateY(-2px)'" onmouseout="this.style.transform='translateY(0)'">
-            💾 Download Updated Vault
-          </button>
-          
-          <button id="lockVaultBtn" style="
-            background: linear-gradient(135deg, #dc2626, #b91c1c);
-            border: none;
-            color: white;
-            padding: 14px 20px;
-            border-radius: 12px;
-            font-size: 16px;
-            font-weight: 600;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 10px;
-          " onmouseover="this.style.transform='translateY(-2px)'" onmouseout="this.style.transform='translateY(0)'">
-            🔒 Lock Vault
-          </button>
-          
-          <button id="vaultStatsBtn" style="
-            background: rgba(139, 92, 246, 0.2);
-            border: 2px solid rgba(139, 92, 246, 0.4);
-            color: white;
-            padding: 14px 20px;
-            border-radius: 12px;
-            font-size: 16px;
-            font-weight: 600;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 10px;
-          " onmouseover="this.style.transform='translateY(-2px)'" onmouseout="this.style.transform='translateY(0)'">
-            📊 Vault Statistics
-          </button>
-        </div>
+          <input type="file" id="vaultControlFileInput" accept=".emma" hidden>
+        </section>
         
-        <!-- Hidden file input for vault selection -->
-        <input type="file" id="vaultControlFileInput" accept=".emma" style="display: none;">
-      </div>
-      </div>
-      
-      <!-- Close Button -->
-      <div style="text-align: center;">
-        <button id="closeControlPanelBtn" style="
-          background: rgba(255, 255, 255, 0.1);
-          border: 2px solid rgba(255, 255, 255, 0.3);
-          color: white;
-          padding: 12px 24px;
-          border-radius: 12px;
-          font-size: 16px;
-          font-weight: 600;
-          cursor: pointer;
-          transition: all 0.3s ease;
-        " onmouseover="this.style.background='rgba(255,255,255,0.2)'" onmouseout="this.style.background='rgba(255,255,255,0.1)'">
-          ✕ Close
-        </button>
       </div>
     `;
   }
@@ -326,46 +320,38 @@ class EmmaVaultControlPanel {
    * Set up modal event listeners
    */
   setupModalEventListeners(modalOverlay) {
-    // Open vault button
-    document.getElementById('openVaultBtn').addEventListener('click', () => {
-      this.openDifferentVault();
-    });
-    
-    // Download vault button
-    document.getElementById('downloadVaultBtn').addEventListener('click', () => {
-      this.downloadUpdatedVault();
-    });
-    
-    // Lock vault button
-    document.getElementById('lockVaultBtn').addEventListener('click', () => {
-      this.lockVault();
-    });
-    
-    // Vault statistics button
-    document.getElementById('vaultStatsBtn').addEventListener('click', () => {
-      this.showVaultStatistics();
-    });
-    
-    // Close button
-    document.getElementById('closeControlPanelBtn').addEventListener('click', () => {
-      this.closeControlPanel();
-    });
-    
-    // Click outside to close
-    modalOverlay.addEventListener('click', (e) => {
-      if (e.target === modalOverlay) {
+    const get = (selector) => modalOverlay.querySelector(selector);
+
+    const openBtn = get('#openVaultBtn');
+    if (openBtn) {
+      openBtn.addEventListener('click', () => this.openDifferentVault());
+    }
+
+    const downloadBtn = get('#downloadVaultBtn');
+    if (downloadBtn) {
+      downloadBtn.addEventListener('click', () => this.downloadUpdatedVault());
+    }
+
+    const lockBtn = get('#lockVaultBtn');
+    if (lockBtn) {
+      lockBtn.addEventListener('click', () => this.lockVault());
+    }
+
+    const statsBtn = get('#vaultStatsBtn');
+    if (statsBtn) {
+      statsBtn.addEventListener('click', () => this.showVaultStatistics());
+    }
+
+    const closeIcon = get('#closeControlPanelIcon');
+    if (closeIcon) {
+      closeIcon.addEventListener('click', () => this.closeControlPanel());
+    }
+
+    modalOverlay.addEventListener('click', (event) => {
+      if (event.target === modalOverlay) {
         this.closeControlPanel();
       }
     });
-    
-    // Escape key to close
-    const handleEscape = (e) => {
-      if (e.key === 'Escape') {
-        this.closeControlPanel();
-        document.removeEventListener('keydown', handleEscape);
-      }
-    };
-    document.addEventListener('keydown', handleEscape);
   }
 
   /**
@@ -387,9 +373,22 @@ class EmmaVaultControlPanel {
     const people = Object.keys(vaultData.content?.people || {}).length;
     const media = Object.keys(vaultData.content?.media || {}).length;
     const sizeBytes = JSON.stringify(vaultData).length;
-    
+    const fallbackName = vaultData.metadata?.name
+      || vaultData.name
+      || window.emmaWebVault.originalFileName
+      || (() => {
+        try {
+          return sessionStorage.getItem('emmaVaultName') || localStorage.getItem('emmaVaultName');
+        } catch (_) {
+          return null;
+        }
+      })();
+    const normalizedName = typeof window.emmaWebVault.ensureVaultMetadataName === 'function'
+      ? window.emmaWebVault.ensureVaultMetadataName(fallbackName)
+      : (fallbackName || 'Unknown Vault');
+
     return {
-      name: vaultData.metadata?.name || 'Unknown Vault',
+      name: normalizedName,
       memoryCount: memories,
       peopleCount: people,
       mediaCount: media,
@@ -412,9 +411,9 @@ class EmmaVaultControlPanel {
       
       this.syncStatus.hasUnsavedChanges = webAppTime > fileTime;
       
-      console.log('🔄 Sync status updated:', this.syncStatus);
+      console.log('\u{1F504} Sync status updated:', this.syncStatus);
     } catch (error) {
-      console.warn('⚠️ Failed to update sync status:', error);
+      console.warn('\u26A0\uFE0F Failed to update sync status:', error);
     }
   }
 
@@ -423,16 +422,48 @@ class EmmaVaultControlPanel {
    */
   async openDifferentVault() {
     try {
-      console.log('📁 Opening different vault for session recovery...');
+      console.log('\u{1F4C1} Opening different vault for session recovery...');
+      
+      // Prefer File System Access API when available so we capture a writable handle
+      if (typeof window !== 'undefined' && 'showOpenFilePicker' in window) {
+        try {
+          const [fileHandle] = await window.showOpenFilePicker({
+            types: [{
+              description: 'Emma Vault Files',
+              accept: {
+                'application/emma-vault': ['.emma'],
+                'application/emma': ['.emma']
+              }
+            }],
+            excludeAcceptAllOption: true,
+            multiple: false
+          });
+
+          if (!fileHandle) {
+            console.warn('\u26A0\uFE0F No file handle returned from picker');
+            return;
+          }
+
+          const file = await fileHandle.getFile();
+          await this.processVaultFile(file, fileHandle);
+          return;
+        } catch (pickerError) {
+          if (pickerError?.name === 'AbortError') {
+            console.log('\u{1F6AB} Vault selection cancelled by user');
+            return;
+          }
+          console.warn('\u26A0\uFE0F File picker failed, falling back to legacy input:', pickerError);
+        }
+      }
       
-      // Trigger file input
+      // Legacy fallback for browsers without File System Access API
       const fileInput = document.getElementById('vaultControlFileInput');
       fileInput.onchange = async (event) => {
         const file = event.target.files[0];
         if (file && file.name.endsWith('.emma')) {
           await this.processVaultFile(file);
         } else {
-          this.showToast('❌ Please select a valid .emma vault file', 'error');
+          this.showToast('\u274C Please select a valid .emma vault file', 'error');
         }
         fileInput.value = ''; // Reset for future use
       };
@@ -440,8 +471,8 @@ class EmmaVaultControlPanel {
       fileInput.click();
       
     } catch (error) {
-      console.error('❌ Failed to open vault file dialog:', error);
-      this.showToast('❌ Failed to open file dialog: ' + error.message, 'error');
+      console.error('\u274C Failed to open vault file dialog:', error);
+      this.showToast('\u274C Failed to open file dialog: ' + error.message, 'error');
     }
   }
 
@@ -450,87 +481,92 @@ class EmmaVaultControlPanel {
    */
   async processVaultFile(file, fileHandle = null) {
     try {
-      console.log('🔓 Processing vault file:', file.name);
+      const workingFile = file || (fileHandle ? await fileHandle.getFile() : null);
+      if (!workingFile) {
+        throw new Error('No vault file selected');
+      }
+
+      console.log('\u{1F4C2} Processing vault file:', workingFile.name);
       
       // Show loading state
-      this.showToast('🔓 Processing vault file...', 'info');
+      this.showToast('\u{1F4C2} Processing vault file...', 'info');
       
-      // Read file data
-      const fileData = await file.arrayBuffer();
-      console.log('📄 File data loaded, size:', fileData.byteLength);
+      console.log('\u{1F4C4} File data loaded, size:', workingFile.size);
       
       // Request passphrase using Emma's beautiful modal
       let passphrase;
       try {
         if (window.cleanSecurePasswordModal) {
           passphrase = await window.cleanSecurePasswordModal.show({
-            title: `Unlock ${file.name}`,
+            title: `Unlock ${workingFile.name}`,
             message: 'Enter your vault passphrase to unlock your memories:',
             placeholder: 'Enter passphrase...'
           });
         } else {
           // Fallback to simple prompt if modal not available
           // SECURITY FIX: Replace prompt with proper modal
-          passphrase = await showPasswordModal(`Enter passphrase for ${file.name}`, 'Passphrase:');
+          passphrase = await showPasswordModal(`Enter passphrase for ${workingFile.name}`, 'Passphrase:');
         }
       } catch (error) {
         if (error.message === 'User cancelled') {
-          console.log('🔓 Vault unlock cancelled by user');
+          console.log('\u{1F4C2} Vault unlock cancelled by user');
           return;
         }
         throw error;
       }
       
       if (!passphrase) {
-        console.log('🔓 Vault unlock cancelled - no passphrase provided');
+        console.log('\u{1F4C2} Vault unlock cancelled - no passphrase provided');
         return;
       }
       
-      this.showToast('🔐 Decrypting vault...', 'info');
-      
-      // Decrypt vault using Emma Web Vault's native crypto
-      const vaultData = await window.emmaWebVault.exactWorkingDecrypt(fileData, passphrase);
+      console.log('\u{1F9F0} File ready for vault switch. Size (bytes):', workingFile.size);
+      this.showToast('\u{1F510} Decrypting vault...', 'info');
       
-      if (!vaultData || !vaultData.content) {
-        throw new Error('Invalid vault data structure');
+      if (!window.emmaWebVault || typeof window.emmaWebVault.switchVaultToSelectedFile !== 'function') {
+        throw new Error('Vault system unavailable');
       }
       
-      console.log('✅ Vault decrypted successfully:', vaultData.metadata?.name);
-      
-      // Update Emma Web Vault with new data
-      window.emmaWebVault.vaultData = vaultData;
-      window.emmaWebVault.isOpen = true;
-      window.emmaWebVault.fileHandle = fileHandle;
-      
-      // Update session storage and localStorage
-      sessionStorage.setItem('emmaVaultActive', 'true');
-      sessionStorage.setItem('emmaVaultName', vaultData.metadata?.name || file.name);
-      localStorage.setItem('emmaVaultActive', 'true');
-      localStorage.setItem('emmaVaultName', vaultData.metadata?.name || file.name);
-      
-      // Save to IndexedDB for persistence
-      try {
-        await window.emmaWebVault.saveToIndexedDB();
-        console.log('✅ New vault saved to IndexedDB successfully');
-      } catch (idbError) {
-        console.warn('⚠️ IndexedDB save failed (non-critical):', idbError);
-      }
+      console.log('\u{1F6E0} Calling EmmaWebVault.switchVaultToSelectedFile...');
+      await window.emmaWebVault.switchVaultToSelectedFile(fileHandle, workingFile, {
+        passphraseOverride: passphrase,
+        promptOnFailure: true,
+        source: 'vault-control-panel',
+        promptTitle: `Unlock ${workingFile.name}`,
+        promptMessage: 'Enter your vault passphrase to unlock your memories:',
+        promptPlaceholder: 'Enter passphrase...'
+      });
+      console.log('\u2705 switchVaultToSelectedFile resolved');
+      
+      const normalizedVaultName =
+        sessionStorage.getItem('emmaVaultName') ||
+        localStorage.getItem('emmaVaultName') ||
+        window.emmaWebVault?.vaultData?.metadata?.name ||
+        workingFile.name;
+      
+      console.log('\u{1F4C2} Vault context after switch:', {
+        normalizedVaultName,
+        hasVaultData: !!window.emmaWebVault?.vaultData,
+        isOpen: !!window.emmaWebVault?.isOpen
+      });
       
       // Update control panel display
       this.updateSyncStatus();
       
       // Close control panel and show success
       this.closeControlPanel();
-      this.showToast(`✅ Vault "${vaultData.metadata?.name || file.name}" loaded successfully!`, 'success');
+      this.showToast(`\u2705 Vault "${normalizedVaultName}" loaded successfully!`, 'success');
+      this.showToast('\u{1F504} Refreshing dashboard with new vault data...', 'info');
       
       // Refresh page to show new vault data
       setTimeout(() => {
+        console.log('\u{1F504} Reloading page to hydrate UI with new vault...');
         window.location.reload();
-      }, 2000);
+      }, 1200);
       
     } catch (error) {
-      console.error('❌ Failed to process vault:', error);
-      this.showToast('❌ Failed to unlock vault: ' + error.message, 'error');
+      console.error('\u274C Failed to process vault:', error);
+      this.showToast('\u274C Failed to unlock vault: ' + error.message, 'error');
     }
   }
 
@@ -539,19 +575,40 @@ class EmmaVaultControlPanel {
    */
   async downloadUpdatedVault() {
     try {
-      console.log('💾 Downloading updated vault...');
+      console.log('\u{1F4BE} Downloading updated vault...');
       
       if (!window.emmaWebVault || !window.emmaWebVault.vaultData) {
         throw new Error('No vault data available');
       }
       
-      // Show loading state
       const downloadBtn = document.getElementById('downloadVaultBtn');
-      const originalText = downloadBtn.innerHTML;
-      downloadBtn.innerHTML = '⏳ Preparing download...';
-      downloadBtn.disabled = true;
+      const iconSpan = downloadBtn ? downloadBtn.querySelector('.vault-button__icon') : null;
+      const labelSpan = downloadBtn ? downloadBtn.querySelector('.vault-button__label') : null;
+      const originalIcon = iconSpan ? iconSpan.textContent : '\u{1F4BE}';
+      const originalLabel = labelSpan ? labelSpan.textContent : (downloadBtn ? downloadBtn.textContent.trim() : 'Download Updated Vault');
+      const setButtonState = (icon, label) => {
+        if (!downloadBtn) {
+          return;
+        }
+        if (iconSpan) {
+          iconSpan.textContent = icon;
+        }
+        if (labelSpan) {
+          labelSpan.textContent = label;
+        }
+        if (!iconSpan || !labelSpan) {
+          const parts = [];
+          if (icon) { parts.push(icon); }
+          if (label) { parts.push(label); }
+          downloadBtn.textContent = parts.join(' ');
+        }
+      };
+      
+      if (downloadBtn) {
+        setButtonState('\u23F3', 'Preparing download...');
+        downloadBtn.disabled = true;
+      }
       
-      // Request passphrase for encryption using Emma's beautiful modal
       let passphrase;
       try {
         if (window.cleanSecurePasswordModal) {
@@ -561,76 +618,85 @@ class EmmaVaultControlPanel {
             placeholder: 'Enter vault passphrase...'
           });
         } else {
-          // Fallback to simple prompt if modal not available
-          passphrase = prompt('🔐 Enter your vault passphrase to encrypt and save:');
+          passphrase = prompt('\u{1F510} Enter your vault passphrase to encrypt and save:');
         }
       } catch (error) {
         if (error.message === 'User cancelled') {
-          console.log('💾 Download cancelled by user');
-          downloadBtn.innerHTML = originalText;
-          downloadBtn.disabled = false;
+          console.log('\u{1F4BE} Download cancelled by user');
+          if (downloadBtn) {
+            setButtonState(originalIcon, originalLabel);
+            downloadBtn.disabled = false;
+          }
           return;
         }
         throw error;
       }
       
       if (!passphrase) {
-        console.log('💾 Download cancelled - no passphrase provided');
-        downloadBtn.innerHTML = originalText;
-        downloadBtn.disabled = false;
+        console.log('\u{1F4BE} Download cancelled - no passphrase provided');
+        if (downloadBtn) {
+          setButtonState(originalIcon, originalLabel);
+          downloadBtn.disabled = false;
+        }
         return;
       }
       
-      downloadBtn.innerHTML = '🔒 Encrypting vault...';
+      if (downloadBtn) {
+        setButtonState('\u{1F512}', 'Encrypting vault...');
+      }
       
-      // Encrypt vault data using native crypto
       const encryptedData = await window.emmaWebVault.nativeEncryptVault(
-        window.emmaWebVault.vaultData, 
+        window.emmaWebVault.vaultData,
         passphrase
       );
       
-      downloadBtn.innerHTML = '💾 Saving vault...';
+      if (downloadBtn) {
+        setButtonState('\u{1F4BE}', 'Saving vault...');
+      }
       
-      // Save using File System Access API or download
       if (window.emmaWebVault.fileHandle) {
-        // Use File System Access API for seamless save
         const writable = await window.emmaWebVault.fileHandle.createWritable();
         await writable.write(encryptedData);
         await writable.close();
-        this.showToast('✅ Vault saved to your local file successfully!', 'success');
+        this.showToast('\u2705 Vault saved to your local file successfully!', 'success');
       } else {
-        // Fallback to download
         const fileName = `${window.emmaWebVault.vaultData.metadata?.name || 'vault'}-updated.emma`;
         const blob = new Blob([encryptedData], { type: 'application/emma-vault' });
         const url = URL.createObjectURL(blob);
-        
         const a = document.createElement('a');
         a.href = url;
         a.download = fileName;
         a.click();
-        
         URL.revokeObjectURL(url);
-        this.showToast('📥 Updated vault downloaded successfully!', 'success');
+        this.showToast('\u{1F4E5} Updated vault downloaded successfully!', 'success');
       }
       
-      // Update sync status
       localStorage.setItem('emmaVaultFileLastSaved', new Date().toISOString());
       this.updateSyncStatus();
       
-      // Restore button
-      downloadBtn.innerHTML = originalText;
-      downloadBtn.disabled = false;
+      if (downloadBtn) {
+        setButtonState(originalIcon, originalLabel);
+        downloadBtn.disabled = false;
+      }
       
-      console.log('✅ Vault download completed successfully');
+      console.log('\u2705 Vault download completed successfully');
       
     } catch (error) {
-      console.error('❌ Failed to download vault:', error);
-      this.showToast('❌ Failed to download vault: ' + error.message, 'error');
+      console.error('\u274C Failed to download vault:', error);
+      this.showToast('\u274C Failed to download vault: ' + error.message, 'error');
       
-      // Restore button
       const downloadBtn = document.getElementById('downloadVaultBtn');
       if (downloadBtn) {
-        downloadBtn.innerHTML = '💾 Download Updated Vault';
+        const iconSpan = downloadBtn.querySelector('.vault-button__icon');
+        const labelSpan = downloadBtn.querySelector('.vault-button__label');
+        if (iconSpan) {
+          iconSpan.textContent = '\u{1F4BE}';
+        }
+        if (labelSpan) {
+          labelSpan.textContent = 'Download Updated Vault';
+        } else {
+          downloadBtn.textContent = '\u{1F4BE} Download Updated Vault';
+        }
         downloadBtn.disabled = false;
       }
     }
@@ -649,11 +715,11 @@ class EmmaVaultControlPanel {
       });
       if (!confirmed) return;
       
-      console.log('🔒 Locking vault...');
+      console.log('\u{1F512} Locking vault...');
       
       if (window.emmaWebVault && window.emmaWebVault.lockVault) {
         await window.emmaWebVault.lockVault();
-        this.showToast('🔒 Vault locked successfully', 'success');
+        this.showToast('\u{1F512} Vault locked successfully', 'success');
         
         // Close control panel and redirect to index
         this.closeControlPanel();
@@ -665,8 +731,8 @@ class EmmaVaultControlPanel {
       }
       
     } catch (error) {
-      console.error('❌ Failed to lock vault:', error);
-      this.showToast('❌ Failed to lock vault: ' + error.message, 'error');
+      console.error('\u274C Failed to lock vault:', error);
+      this.showToast('\u274C Failed to lock vault: ' + error.message, 'error');
     }
   }
 
@@ -675,22 +741,61 @@ class EmmaVaultControlPanel {
    */
   showVaultStatistics() {
     // TODO: Implement detailed statistics modal
-    this.showToast('📊 Detailed statistics coming soon!', 'info');
+    this.showToast('\u{1F4CA} Detailed statistics coming soon!', 'info');
   }
 
   /**
    * Close the control panel
    */
   closeControlPanel() {
-    const modal = document.getElementById('vaultControlModal');
-    if (modal) {
-      modal.style.opacity = '0';
-      modal.querySelector('div').style.transform = 'scale(0.9)';
-      setTimeout(() => {
-        modal.remove();
-        this.isOpen = false;
-      }, 300);
+    const overlay = document.getElementById('vaultControlModal');
+    if (!overlay) {
+      return;
     }
+
+    overlay.classList.remove('is-visible');
+
+    let cleaned = false;
+    const finalize = () => {
+      if (cleaned) {
+        return;
+      }
+      cleaned = true;
+
+      if (this.boundEscapeHandler) {
+        document.removeEventListener('keydown', this.boundEscapeHandler);
+        this.boundEscapeHandler = null;
+      }
+
+      if (overlay.parentNode) {
+        overlay.parentNode.removeChild(overlay);
+      }
+
+      this.isOpen = false;
+
+      if (this.triggerElement) {
+        this.triggerElement.setAttribute('aria-expanded', 'false');
+        this.triggerElement.focus();
+        this.triggerElement = null;
+      }
+    };
+
+    const onTransitionEnd = (event) => {
+      if (event.target === overlay) {
+        overlay.removeEventListener('transitionend', onTransitionEnd);
+        finalize();
+      }
+    };
+
+    overlay.addEventListener('transitionend', onTransitionEnd);
+
+    setTimeout(() => {
+      if (cleaned) {
+        return;
+      }
+      overlay.removeEventListener('transitionend', onTransitionEnd);
+      finalize();
+    }, 260);
   }
 
   /**
@@ -698,30 +803,40 @@ class EmmaVaultControlPanel {
    */
   showToast(message, type = 'info') {
     const toast = document.createElement('div');
-    toast.style.cssText = `
-      position: fixed;
-      top: 20px;
-      right: 20px;
-      background: ${type === 'success' ? 'rgba(16, 185, 129, 0.9)' : type === 'error' ? 'rgba(239, 68, 68, 0.9)' : 'rgba(59, 130, 246, 0.9)'};
-      color: white;
-      padding: 16px 24px;
-      border-radius: 12px;
-      font-weight: 600;
-      z-index: 10001;
-      backdrop-filter: blur(10px);
-      border: 2px solid rgba(255, 255, 255, 0.2);
-      transform: translateX(100%);
-      transition: transform 0.3s ease;
-      max-width: 300px;
-    `;
+    toast.className = `vault-toast vault-toast--${type}`;
+    toast.setAttribute('role', 'status');
+    toast.setAttribute('aria-live', 'polite');
+
+    const activeCount = document.querySelectorAll('.vault-toast').length;
+    toast.style.setProperty('--vault-toast-index', activeCount.toString());
+
+    const accent = type === 'success'
+      ? 'var(--emma-success)'
+      : type === 'error'
+        ? 'var(--emma-danger)'
+        : 'var(--emma-accent-primary)';
+    toast.style.setProperty('--vault-toast-accent', accent);
     toast.textContent = message;
+
     document.body.appendChild(toast);
-    
-    setTimeout(() => toast.style.transform = 'translateX(0)', 100);
-    setTimeout(() => {
-      toast.style.transform = 'translateX(100%)';
-      setTimeout(() => toast.remove(), 300);
-    }, 4000);
+
+    requestAnimationFrame(() => {
+      toast.classList.add('is-visible');
+    });
+
+    const dismiss = () => {
+      toast.classList.remove('is-visible');
+      const removeToast = () => {
+        toast.removeEventListener('transitionend', removeToast);
+        if (toast.parentNode) {
+          toast.parentNode.removeChild(toast);
+        }
+      };
+      toast.addEventListener('transitionend', removeToast);
+      setTimeout(removeToast, 400);
+    };
+
+    setTimeout(dismiss, 4200);
   }
 
   /**
@@ -739,10 +854,19 @@ class EmmaVaultControlPanel {
 // Create global instance
 if (!window.emmaVaultControlPanel) {
   window.emmaVaultControlPanel = new EmmaVaultControlPanel();
-  console.log('🛡️ Emma Vault Control Panel ready');
+  console.log('\u{1F6E1}\uFE0F Emma Vault Control Panel ready');
 } else {
-  console.log('✅ Using existing Vault Control Panel instance');
+  console.log('\u2705 Using existing Vault Control Panel instance');
 }
 
 // Global access for debugging
 window.openVaultControlPanel = () => window.emmaVaultControlPanel.openControlPanel();
+
+
+
+
+
+
+
+
+
diff --git a/js/voice-capture-experience.js b/js/voice-capture-experience.js
index 54300548..c592f9f5 100644
--- a/js/voice-capture-experience.js
+++ b/js/voice-capture-experience.js
@@ -54,7 +54,7 @@ class VoiceCaptureExperience extends ExperiencePopup {
       } else {
         console.warn('🌟 EmmaOrb class not available, using fallback');
         // Fallback gradient
-        orbContainer.style.background = 'radial-gradient(circle at 30% 30%, #8A5EFA, #764ba2, #f093fb)';
+        orbContainer.style.background = 'radial-gradient(circle at 30% 30%, #8A5EFA, #764ba2, #deb3e4)';
         orbContainer.style.borderRadius = '50%';
         orbContainer.style.width = '100%';
         orbContainer.style.height = '100%';
@@ -64,7 +64,7 @@ class VoiceCaptureExperience extends ExperiencePopup {
       // Fallback
       const orbContainer = document.getElementById('voice-emma-orb');
       if (orbContainer) {
-        orbContainer.style.background = 'radial-gradient(circle at 30% 30%, #8A5EFA, #764ba2, #f093fb)';
+        orbContainer.style.background = 'radial-gradient(circle at 30% 30%, #8A5EFA, #764ba2, #deb3e4)';
         orbContainer.style.borderRadius = '50%';
         orbContainer.style.width = '100%';
         orbContainer.style.height = '100%';
@@ -307,11 +307,15 @@ class VoiceCaptureExperience extends ExperiencePopup {
     const container = document.getElementById('topic-nodes');
     if (!container) return;
 
+    const esc = (s) => (window.escapeHtml ? window.escapeHtml(s) : String(s)
+      .replace(/&/g, '&amp;').replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;'));
+
     container.innerHTML = suggestions.map((suggestion, index) => `
-      <div class="topic-node" data-prompt="${suggestion.prompt}" style="--node-delay: ${index * 100}ms">
+      <div class="topic-node" data-prompt="${esc(suggestion.prompt)}" style="--node-delay: ${index * 100}ms">
         <div class="node-content">
-          <div class="node-icon">${suggestion.icon}</div>
-          <div class="node-text">${suggestion.text}</div>
+          <div class="node-icon">${esc(suggestion.icon)}</div>
+          <div class="node-text">${esc(suggestion.text)}</div>
         </div>
         <div class="node-glow"></div>
       </div>
@@ -351,7 +355,7 @@ class VoiceCaptureExperience extends ExperiencePopup {
     const hint = document.getElementById('emma-hint');
     if (hint) {
       hint.textContent = prompt;
-      hint.style.background = 'linear-gradient(135deg, #667eea, #764ba2, #f093fb)';
+      hint.style.background = 'linear-gradient(135deg, #667eea, #764ba2, #deb3e4)';
       hint.style.webkitBackgroundClip = 'text';
       hint.style.webkitTextFillColor = 'transparent';
     }
@@ -542,14 +546,19 @@ class VoiceCaptureExperience extends ExperiencePopup {
   }
 
   formatTranscriptText(text) {
-    // Add subtle formatting for better readability
-    return text
-      .split(/(\.|!|\?)\s+/)
-      .map((segment, index) => {
-        if (segment.match(/[.!?]/)) {
-          return `<span class="sentence-end">${segment}</span>`;
+    // Escape HTML, then wrap sentence-ending punctuation for readability
+    const esc = (s) => (window.escapeHtml ? window.escapeHtml(s) : String(s)
+      .replace(/&/g, '&amp;').replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;'));
+    const safe = esc(text);
+    return safe
+      .split(/([.!?]\s+)/)
+      .map((seg) => {
+        const m = seg.match(/^([.!?])(\s+)$/);
+        if (m) {
+          return `<span class="sentence-end">${m[1]}</span>${m[2]}`;
         }
-        return segment;
+        return seg;
       })
       .join('');
   }
diff --git a/js/webapp-extension-bridge.js b/js/webapp-extension-bridge.js
index ae695f54..02387a0b 100644
--- a/js/webapp-extension-bridge.js
+++ b/js/webapp-extension-bridge.js
@@ -15,6 +15,8 @@ class EmmaWebappExtensionBridge {
   setupListeners() {
     // Listen for messages from extension
     window.addEventListener('message', (event) => {
+      // Only accept messages from same origin for safety
+      if (event.origin !== window.location.origin) return;
       if (event.data?.source === 'emma-extension') {
         this.handleExtensionMessage(event.data);
       }
@@ -153,7 +155,7 @@ class EmmaWebappExtensionBridge {
       type: 'EMMA_RESPONSE',
       messageId: messageId,
       ...response
-    }, '*');
+    }, window.location.origin);
   }
 }
 
diff --git a/js/welcome.js b/js/welcome.js
index e2722a3d..6ff3191e 100644
--- a/js/welcome.js
+++ b/js/welcome.js
@@ -58,11 +58,11 @@ async function init() {
         } else if (!status.isUnlocked) {
           console.log('🔍 Welcome: Vault exists but locked, redirecting to dashboard with unlock prompt');
           // Redirect to dashboard which will handle vault unlock
-          window.location.href = '../pages/dashboard-new.html';
+          window.location.href = '../dashboard.html';
         } else {
           console.log('🔍 Welcome: Vault exists and unlocked, redirecting to dashboard');
           // Vault exists and is unlocked, redirect to dashboard
-          window.location.href = '../pages/dashboard-new.html';
+          window.location.href = '../dashboard.html';
         }
       } else {
         // Fallback to Chrome extension API
@@ -192,7 +192,7 @@ async function createVault() {
       // Redirect to dashboard after 2 seconds
       setTimeout(() => {
         console.log('🔐 Welcome: Vault created successfully, redirecting to dashboard');
-        window.location.href = '../pages/dashboard-new.html';
+        window.location.href = '../dashboard.html';
       }, 2000);
     } else {
       showStatus(response.error || 'Failed to create vault', 'error');
diff --git a/js/ws-chat.js b/js/ws-chat.js
new file mode 100644
index 00000000..a3cf51da
--- /dev/null
+++ b/js/ws-chat.js
@@ -0,0 +1,165 @@
+// Emma WebSocket Chat Interface
+console.log('💬 Emma WS Chat: Initializing...');
+
+// WebSocket state
+let ws;
+let isProcessing = false;
+
+// Initialize chat
+document.addEventListener('DOMContentLoaded', () => {
+  console.log('💬 Emma WS Chat: DOM loaded');
+  connectWebSocket();
+
+  const chatInput = document.getElementById('chat-input');
+  chatInput.addEventListener('input', autoResizeTextarea);
+  chatInput.focus();
+});
+
+function connectWebSocket() {
+  const wsUrl = `ws://${window.location.host}/voice`;
+  ws = new WebSocket(wsUrl);
+
+  ws.onopen = () => {
+    console.log('💬 Emma WS Chat: Connected');
+    let sessionId = sessionStorage.getItem('emma-session-id');
+    if (!sessionId) {
+      sessionId = `session_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;
+      sessionStorage.setItem('emma-session-id', sessionId);
+    }
+    ws.send(JSON.stringify({ type: 'start_session', sessionId }));
+  };
+
+  ws.onmessage = (event) => {
+    const message = JSON.parse(event.data);
+    handleServerMessage(message);
+  };
+
+  ws.onclose = () => {
+    console.log('💬 Emma WS Chat: Disconnected');
+    // Optional: attempt to reconnect
+  };
+
+  ws.onerror = (error) => {
+    console.error('💬 Emma WS Chat: Error', error);
+  };
+}
+
+function handleServerMessage(message) {
+  switch (message.type) {
+    case 'emma_ready':
+      console.log('Emma is ready');
+      break;
+    case 'state_change':
+      if (message.state === 'thinking') {
+        showTypingIndicator();
+      } else {
+        hideTypingIndicator();
+      }
+      break;
+    case 'emma_transcription':
+      displayMessage('emma', message.transcript, Date.now(), true);
+      break;
+    case 'tool_request':
+      handleToolRequest(message);
+      break;
+    case 'session_ended':
+      console.log('Session ended');
+      break;
+    default:
+      console.warn('Unhandled server message type:', message.type);
+  }
+}
+
+async function handleToolRequest(request) {
+  const { call_id, tool_name, parameters } = request;
+  let result;
+
+  try {
+    // For now, we'll just use the vault service directly on the client-side
+    // This is a temporary solution until the architecture is unified
+    result = await window.emmaWebVault.executeTool(tool_name, parameters);
+  } catch (error) {
+    result = { error: error.message };
+  }
+
+  ws.send(JSON.stringify({
+    type: 'tool_result',
+    call_id,
+    result: JSON.stringify(result)
+  }));
+}
+
+async function sendMessage() {
+  const input = document.getElementById('chat-input');
+  const message = input.value.trim();
+
+  if (!message || isProcessing || !ws || ws.readyState !== WebSocket.OPEN) return;
+
+  input.value = '';
+  autoResizeTextarea({ target: input });
+
+  document.getElementById('welcome-message').style.display = 'none';
+  displayMessage('user', message);
+
+  ws.send(JSON.stringify({ type: 'user_text', text: message }));
+}
+
+function displayMessage(sender, content, timestamp = Date.now(), animate = true) {
+  const messagesContainer = document.getElementById('chat-messages');
+
+  const messageDiv = document.createElement('div');
+  messageDiv.className = `message ${sender}`;
+  if (!animate) messageDiv.style.animation = 'none';
+
+  const avatarDiv = document.createElement('div');
+  avatarDiv.className = 'message-avatar';
+  avatarDiv.textContent = sender === 'user' ? '👤' : '🧠';
+
+  const contentDiv = document.createElement('div');
+  contentDiv.className = 'message-content';
+
+  const textDiv = document.createElement('div');
+  textDiv.className = 'message-text';
+  textDiv.textContent = content;
+
+  const timeDiv = document.createElement('div');
+  timeDiv.className = 'message-time';
+  timeDiv.textContent = new Date(timestamp).toLocaleTimeString();
+
+  contentDiv.appendChild(textDiv);
+  contentDiv.appendChild(timeDiv);
+
+  messageDiv.appendChild(avatarDiv);
+  messageDiv.appendChild(contentDiv);
+
+  messagesContainer.appendChild(messageDiv);
+  messagesContainer.scrollTop = messagesContainer.scrollHeight;
+}
+
+function showTypingIndicator() {
+  document.getElementById('typing-indicator').classList.add('active');
+  const messagesContainer = document.getElementById('chat-messages');
+  messagesContainer.scrollTop = messagesContainer.scrollHeight;
+}
+
+function hideTypingIndicator() {
+  document.getElementById('typing-indicator').classList.remove('active');
+}
+
+function autoResizeTextarea(event) {
+  const textarea = event.target;
+  textarea.style.height = 'auto';
+  textarea.style.height = `${textarea.scrollHeight}px`;
+}
+
+function handleKeyPress(event) {
+  if (event.key === 'Enter' && !event.shiftKey) {
+    event.preventDefault();
+    sendMessage();
+  }
+}
+
+window.emmaWsChat = {
+  sendMessage,
+  handleKeyPress
+};
diff --git a/legacy/README.md b/legacy/README.md
new file mode 100644
index 00000000..7b36f4be
--- /dev/null
+++ b/legacy/README.md
@@ -0,0 +1,3 @@
+# Legacy Assets
+
+The files under legacy/unused/ are retained only as historical references. They are not loaded by the production build and can be removed once their contents are no longer needed for future migrations.
diff --git a/js/aurora.js b/legacy/unused/js/aurora.js
similarity index 98%
rename from js/aurora.js
rename to legacy/unused/js/aurora.js
index d6d2c889..7704b78d 100644
--- a/js/aurora.js
+++ b/legacy/unused/js/aurora.js
@@ -5,7 +5,7 @@ class Aurora {
   constructor(container, options = {}) {
     this.container = container;
     this.options = {
-      colorStops: options.colorStops || ["#9333ea", "#ec4899", "#06b6d4"],
+      colorStops: options.colorStops || ["#9333ea", "#d06fa8", "#06b6d4"],
       amplitude: options.amplitude || 1.0,
       blend: options.blend || 0.6,
       speed: options.speed || 0.3,
@@ -293,7 +293,7 @@ class Aurora {
     // CSS gradient fallback
     this.container.style.background = `
       radial-gradient(circle at 20% 20%, rgba(147, 51, 234, 0.3) 0%, transparent 50%),
-      radial-gradient(circle at 80% 80%, rgba(236, 72, 153, 0.3) 0%, transparent 50%),
+      radial-gradient(circle at 80% 80%, rgba(208, 111, 168, 0.3) 0%, transparent 50%),
       radial-gradient(circle at 40% 60%, rgba(6, 182, 212, 0.2) 0%, transparent 50%)
     `;
   }
diff --git a/js/chat/emma-chat-core.js b/legacy/unused/js/chat/emma-chat-core.js
similarity index 100%
rename from js/chat/emma-chat-core.js
rename to legacy/unused/js/chat/emma-chat-core.js
diff --git a/js/chat/emma-dementia-companion.js b/legacy/unused/js/chat/emma-dementia-companion.js
similarity index 100%
rename from js/chat/emma-dementia-companion.js
rename to legacy/unused/js/chat/emma-dementia-companion.js
diff --git a/js/chat/emma-intent-classifier.js b/legacy/unused/js/chat/emma-intent-classifier.js
similarity index 100%
rename from js/chat/emma-intent-classifier.js
rename to legacy/unused/js/chat/emma-intent-classifier.js
diff --git a/js/chat/emma-memory-operations.js b/legacy/unused/js/chat/emma-memory-operations.js
similarity index 100%
rename from js/chat/emma-memory-operations.js
rename to legacy/unused/js/chat/emma-memory-operations.js
diff --git a/js/chat/emma-person-handler.js b/legacy/unused/js/chat/emma-person-handler.js
similarity index 100%
rename from js/chat/emma-person-handler.js
rename to legacy/unused/js/chat/emma-person-handler.js
diff --git a/js/chat/emma-photo-manager.js b/legacy/unused/js/chat/emma-photo-manager.js
similarity index 100%
rename from js/chat/emma-photo-manager.js
rename to legacy/unused/js/chat/emma-photo-manager.js
diff --git a/js/chat/index.js b/legacy/unused/js/chat/index.js
similarity index 100%
rename from js/chat/index.js
rename to legacy/unused/js/chat/index.js
diff --git a/js/dementia-companion-init.js b/legacy/unused/js/dementia-companion-init.js
similarity index 100%
rename from js/dementia-companion-init.js
rename to legacy/unused/js/dementia-companion-init.js
diff --git a/js/memories-gallery.js b/legacy/unused/js/memories-gallery.js
similarity index 100%
rename from js/memories-gallery.js
rename to legacy/unused/js/memories-gallery.js
diff --git a/js/memory-gallery-clean.js b/legacy/unused/js/memory-gallery-clean.js
similarity index 100%
rename from js/memory-gallery-clean.js
rename to legacy/unused/js/memory-gallery-clean.js
diff --git a/js/screenshot-photo-capture.js b/legacy/unused/js/screenshot-photo-capture.js
similarity index 100%
rename from js/screenshot-photo-capture.js
rename to legacy/unused/js/screenshot-photo-capture.js
diff --git a/js/universal-orb-injection.js b/legacy/unused/js/universal-orb-injection.js
similarity index 100%
rename from js/universal-orb-injection.js
rename to legacy/unused/js/universal-orb-injection.js
diff --git a/js/web-memories.js b/legacy/unused/js/web-memories.js
similarity index 100%
rename from js/web-memories.js
rename to legacy/unused/js/web-memories.js
diff --git a/lib/tool-definitions.js b/lib/tool-definitions.js
new file mode 100644
index 00000000..d9e828f7
--- /dev/null
+++ b/lib/tool-definitions.js
@@ -0,0 +1,330 @@
+'use strict';
+
+const TOOL_DEFINITIONS = [
+  {
+    type: 'function',
+    name: 'get_people',
+    description: 'Search local people by name or relationship.',
+    parameters: {
+      type: 'object',
+      properties: {
+        query: {
+          type: 'string',
+          description: "Name or relationship to search for (for example 'mom' or 'Aunt Sarah')."
+        }
+      },
+      required: ['query']
+    }
+  },
+  {
+    type: 'function',
+    name: 'get_memories',
+    description: 'Find memories connected to a person, timeframe, or keyword.',
+    parameters: {
+      type: 'object',
+      properties: {
+        query: {
+          type: 'string',
+          description: 'Keywords to search for in the memory content.'
+        },
+        personId: {
+          type: 'string',
+          description: 'Filter memories by a known person identifier.'
+        },
+        dateRange: {
+          type: 'string',
+          description: "Natural language time range like 'last Christmas' or '2010s'."
+        },
+        limit: {
+          type: 'number',
+          default: 5,
+          description: 'Maximum number of memories to return.'
+        }
+      }
+    }
+  },
+  {
+    type: 'function',
+    name: 'summarize_memory',
+    description: 'Generate a gentle summary of a specific memory capsule.',
+    parameters: {
+      type: 'object',
+      properties: {
+        memoryId: {
+          type: 'string',
+          description: 'Identifier of the memory to summarize.'
+        }
+      },
+      required: ['memoryId']
+    }
+  },
+  {
+    type: 'function',
+    name: 'create_memory_from_voice',
+    description: 'Store a new memory capsule based on the current conversation.',
+    parameters: {
+      type: 'object',
+      properties: {
+        content: {
+          type: 'string',
+          description: 'Story or description shared by the user.'
+        },
+        people: {
+          type: 'array',
+          items: { type: 'string' },
+          description: 'Names of people mentioned.'
+        },
+        emotion: {
+          type: 'string',
+          description: 'Primary emotion expressed by the user.'
+        },
+        importance: {
+          type: 'number',
+          minimum: 1,
+          maximum: 10,
+          description: 'Relative importance of the memory.'
+        }
+      },
+      required: ['content']
+    }
+  },
+  {
+    type: 'function',
+    name: 'create_memory_capsule',
+    description: 'Save a new memory capsule with story text, people, and optional media attachments.',
+    parameters: {
+      type: 'object',
+      properties: {
+        content: {
+          type: 'string',
+          description: 'Full memory story or description.'
+        },
+        title: {
+          type: 'string',
+          description: 'Optional title to display for the memory.'
+        },
+        people: {
+          type: 'array',
+          description: 'People connected to this memory by name or identifier.',
+          items: {
+            anyOf: [
+              { type: 'string' },
+              {
+                type: 'object',
+                properties: {
+                  id: { type: 'string' },
+                  name: { type: 'string' },
+                  relationship: { type: 'string' }
+                }
+              }
+            ]
+          }
+        },
+        emotion: {
+          type: 'string',
+          description: 'Primary feeling expressed in the memory.'
+        },
+        importance: {
+          type: 'number',
+          minimum: 1,
+          maximum: 10,
+          description: 'How important this memory is to the user.'
+        },
+        tags: {
+          type: 'array',
+          items: { type: 'string' },
+          description: 'Memory tags such as holidays or themes.'
+        },
+        date: {
+          type: 'string',
+          description: 'ISO date or natural language date for when the memory happened.'
+        },
+        location: {
+          type: 'string',
+          description: 'Where the memory took place.'
+        },
+        attachments: {
+          type: 'array',
+          description: 'Media attachments provided as base64/data URLs or references.',
+          items: {
+            type: 'object',
+            properties: {
+              id: { type: 'string' },
+              uploadId: { type: 'string' },
+              name: { type: 'string' },
+              type: { type: 'string' },
+              data: { type: 'string' },
+              dataUrl: { type: 'string' }
+            }
+          }
+        }
+      },
+      required: ['content']
+    }
+  },
+  {
+    type: 'function',
+    name: 'update_person',
+    description: 'Add or update information about someone mentioned in conversation.',
+    parameters: {
+      type: 'object',
+      properties: {
+        name: { type: 'string', description: "Person's name." },
+        relationship: { type: 'string', description: 'Relationship to the user.' },
+        details: { type: 'string', description: 'Additional details to remember.' }
+      },
+      required: ['name']
+    }
+  },
+  {
+    type: 'function',
+    name: 'create_person_profile',
+    description: 'Create a new person in the vault or enrich an existing profile with relationship and avatar details.',
+    parameters: {
+      type: 'object',
+      properties: {
+        name: { type: 'string', description: "Person's full name." },
+        relationship: { type: 'string', description: 'Relationship to the user or family.' },
+        pronouns: { type: 'string', description: 'Preferred pronouns for the person.' },
+        birthday: { type: 'string', description: 'Important birthday or anniversary to remember.' },
+        details: { type: 'string', description: 'Additional notes Emma should remember.' },
+        avatar: {
+          type: 'object',
+          description: 'Optional avatar photo to attach to the person profile.',
+          properties: {
+            name: { type: 'string' },
+            type: { type: 'string' },
+            data: { type: 'string' },
+            dataUrl: { type: 'string' }
+          }
+        }
+      },
+      required: ['name']
+    }
+  },
+  {
+    type: 'function',
+    name: 'update_memory_capsule',
+    description: 'Update an existing memory with new story details, people, tags, or attachments.',
+    parameters: {
+      type: 'object',
+      properties: {
+        memoryId: { type: 'string', description: 'Identifier of the memory to update.' },
+        content: { type: 'string', description: 'Updated story text.' },
+        title: { type: 'string', description: 'New title for the memory.' },
+        people: {
+          type: 'array',
+          description: 'Updated list of people connected to this memory.',
+          items: {
+            anyOf: [
+              { type: 'string' },
+              {
+                type: 'object',
+                properties: {
+                  id: { type: 'string' },
+                  name: { type: 'string' },
+                  relationship: { type: 'string' }
+                }
+              }
+            ]
+          }
+        },
+        tags: { type: 'array', items: { type: 'string' } },
+        emotion: { type: 'string' },
+        importance: { type: 'number', minimum: 1, maximum: 10 },
+        location: { type: 'string' },
+        date: { type: 'string' },
+        removeAttachmentIds: {
+          type: 'array',
+          description: 'Attachment identifiers that should be removed from the memory.',
+          items: { type: 'string' }
+        },
+        attachments: {
+          type: 'array',
+          description: 'New attachments to add to the memory.',
+          items: {
+            type: 'object',
+            properties: {
+              id: { type: 'string' },
+              uploadId: { type: 'string' },
+              name: { type: 'string' },
+              type: { type: 'string' },
+              data: { type: 'string' },
+              dataUrl: { type: 'string' }
+            }
+          }
+        },
+        replaceAttachments: {
+          type: 'boolean',
+          description: 'If true, replace existing attachments instead of appending.'
+        }
+      },
+      required: ['memoryId']
+    }
+  },
+  {
+    type: 'function',
+    name: 'attach_memory_media',
+    description: 'Add one or more photos, videos, or audio clips to an existing memory capsule.',
+    parameters: {
+      type: 'object',
+      properties: {
+        memoryId: { type: 'string', description: 'Identifier of the memory receiving new media.' },
+        media: {
+          type: 'array',
+          description: 'Media objects to attach to the memory.',
+          items: {
+            type: 'object',
+            properties: {
+              id: { type: 'string' },
+              uploadId: { type: 'string' },
+              name: { type: 'string' },
+              type: { type: 'string' },
+              data: { type: 'string' },
+              dataUrl: { type: 'string' }
+            }
+          }
+        },
+        replaceExisting: {
+          type: 'boolean',
+          description: 'Whether to replace current attachments instead of appending.'
+        }
+      },
+      required: ['memoryId', 'media']
+    }
+  },
+  {
+    type: 'function',
+    name: 'delete_memory',
+    description: 'Permanently remove a memory capsule from the vault.',
+    parameters: {
+      type: 'object',
+      properties: {
+        memoryId: {
+          type: 'string',
+          description: 'Identifier of the memory to remove.'
+        }
+      },
+      required: ['memoryId']
+    }
+  },
+  {
+    type: 'function',
+    name: 'delete_person',
+    description: 'Permanently remove a person from the vault.',
+    parameters: {
+      type: 'object',
+      properties: {
+        personId: {
+          type: 'string',
+          description: 'Identifier of the person to remove.'
+        }
+      },
+      required: ['personId']
+    }
+  }
+];
+
+module.exports = {
+  TOOL_DEFINITIONS
+};
diff --git a/lib/vault-service.js b/lib/vault-service.js
new file mode 100644
index 00000000..ff6e9646
--- /dev/null
+++ b/lib/vault-service.js
@@ -0,0 +1,636 @@
+'use strict';
+
+const fs = require('fs/promises');
+const path = require('path');
+const crypto = require('crypto');
+const { TOOL_DEFINITIONS } = require('./tool-definitions');
+
+const DEFAULT_VAULT = {
+  people: [],
+  memories: []
+};
+
+class VaultService {
+  constructor(options = {}) {
+    this.vaultPath = options.vaultPath || path.join(__dirname, '..', 'data', 'vault.json');
+    this.supportedTools = new Set(TOOL_DEFINITIONS.map((tool) => tool.name));
+    this.initialized = false;
+  }
+
+  async ensureVault() {
+    if (this.initialized) {
+      return;
+    }
+
+    await fs.mkdir(path.dirname(this.vaultPath), { recursive: true });
+
+    try {
+      await fs.access(this.vaultPath);
+    } catch (error) {
+      await fs.writeFile(this.vaultPath, JSON.stringify(DEFAULT_VAULT, null, 2), 'utf8');
+    }
+
+    this.initialized = true;
+  }
+
+  async loadVault() {
+    await this.ensureVault();
+    const contents = await fs.readFile(this.vaultPath, 'utf8');
+    try {
+      const parsed = JSON.parse(contents);
+      if (!parsed.people || !Array.isArray(parsed.people) || !parsed.memories || !Array.isArray(parsed.memories)) {
+        return { ...DEFAULT_VAULT };
+      }
+      return parsed;
+    } catch (error) {
+      console.warn('Vault store corrupted, resetting to defaults:', error?.message || error);
+      return { ...DEFAULT_VAULT };
+    }
+  }
+
+  async saveVault(vault) {
+    await this.ensureVault();
+    const payload = JSON.stringify(vault, null, 2);
+    await fs.writeFile(this.vaultPath, payload, 'utf8');
+  }
+
+  generateId(prefix) {
+    const random = crypto.randomUUID
+      ? crypto.randomUUID().replace(/-/g, '').slice(0, 12)
+      : crypto.randomBytes(6).toString('hex');
+    return `${prefix}_${Date.now()}_${random}`;
+  }
+
+  canExecute(toolName) {
+    return this.supportedTools.has(toolName);
+  }
+
+  async execute(toolName, params = {}) {
+    const name = String(toolName || '').trim();
+
+    switch (name) {
+      case 'get_people':
+        return this.getPeople(params);
+      case 'get_memories':
+        return this.getMemories(params);
+      case 'summarize_memory':
+        return this.summarizeMemory(params);
+      case 'create_memory_from_voice':
+        return this.createMemoryFromVoice(params);
+      case 'create_memory_capsule':
+        return this.createMemoryCapsule(params);
+      case 'update_person':
+        return this.updatePerson(params);
+      case 'create_person_profile':
+        return this.createPersonProfile(params);
+      case 'update_memory_capsule':
+        return this.updateMemoryCapsule(params);
+      case 'attach_memory_media':
+        return this.attachMemoryMedia(params);
+      case 'delete_memory':
+        return this.deleteMemory(params);
+      case 'delete_person':
+        return this.deletePerson(params);
+      default:
+        throw new Error(`Unsupported tool: ${name}`);
+    }
+  }
+
+  async getPeople({ query = '' } = {}) {
+    const vault = await this.loadVault();
+    const trimmedQuery = query.trim().toLowerCase();
+
+    if (!trimmedQuery) {
+      return {
+        query,
+        people: vault.people.slice(0, 10)
+      };
+    }
+
+    const matches = vault.people.filter((person) => {
+      const haystack = [person.name, person.relationship, person.details]
+        .filter(Boolean)
+        .join(' ')
+        .toLowerCase();
+      return haystack.includes(trimmedQuery);
+    });
+
+    return {
+      query,
+      people: matches.slice(0, 10)
+    };
+  }
+
+  async getMemories({ query, personId, dateRange, limit = 5 } = {}) {
+    const vault = await this.loadVault();
+    let results = vault.memories.slice();
+
+    if (personId) {
+      results = results.filter((memory) => (memory.people || []).some((person) => person.id === personId));
+    }
+
+    if (dateRange) {
+      const normalizedDate = dateRange.trim().toLowerCase();
+      results = results.filter((memory) => {
+        const haystack = [memory.date, memory.content, memory.title]
+          .filter(Boolean)
+          .join(' ')
+          .toLowerCase();
+        return haystack.includes(normalizedDate);
+      });
+    }
+
+    if (query) {
+      const keywords = query.trim().toLowerCase().split(/\s+/);
+      results = results.map(memory => {
+        let score = 0;
+        const title = (memory.title || '').toLowerCase();
+        const content = (memory.content || '').toLowerCase();
+        const tags = (memory.tags || []).join(' ').toLowerCase();
+
+        for (const keyword of keywords) {
+          if (title.includes(keyword)) score += 5;
+          if (content.includes(keyword)) score += 1;
+          if (tags.includes(keyword)) score += 3;
+        }
+
+        return { ...memory, score };
+      }).filter(memory => memory.score > 0);
+
+      results.sort((a, b) => b.score - a.score);
+    } else {
+      results.sort((a, b) => {
+        const aDate = Date.parse(a.date) || Date.parse(a.createdAt) || 0;
+        const bDate = Date.parse(b.date) || Date.parse(b.createdAt) || 0;
+        return bDate - aDate;
+      });
+    }
+
+    return {
+      query: query || null,
+      personId: personId || null,
+      dateRange: dateRange || null,
+      memories: results.slice(0, limit)
+    };
+  }
+
+  async summarizeMemory({ memoryId } = {}) {
+    if (!memoryId) {
+      throw new Error('memoryId is required to summarize a memory');
+    }
+
+    const vault = await this.loadVault();
+    const memory = vault.memories.find((item) => item.id === memoryId);
+
+    if (!memory) {
+      throw new Error(`Memory ${memoryId} not found`);
+    }
+
+    const preview = this.buildSummary(memory);
+    return {
+      memoryId,
+      summary: preview
+    };
+  }
+
+  async createMemoryFromVoice(payload = {}) {
+    if (!payload.content) {
+      throw new Error('content is required to create a memory');
+    }
+
+    const title = this.deriveTitle(payload.content, 'Shared Memory');
+    const memory = await this.createMemoryCapsule({
+      ...payload,
+      title
+    });
+
+    return {
+      created: memory.memory,
+      createdPeople: memory.createdPeople
+    };
+  }
+
+  async createMemoryCapsule(payload = {}) {
+    if (!payload.content) {
+      throw new Error('content is required to create a memory');
+    }
+
+    const now = new Date().toISOString();
+
+    return this.updateVault((vault) => {
+      const { resolvedPeople, newlyCreated } = this.resolvePeople(vault, payload.people || []);
+      const attachments = this.normalizeAttachments(payload.attachments || []);
+
+      const memory = {
+        id: this.generateId('memory'),
+        title: payload.title || this.deriveTitle(payload.content, 'New Memory'),
+        content: payload.content,
+        emotion: payload.emotion || null,
+        importance: typeof payload.importance === 'number' ? payload.importance : null,
+        tags: Array.isArray(payload.tags) ? payload.tags.filter(Boolean) : [],
+        date: payload.date || null,
+        location: payload.location || null,
+        people: resolvedPeople,
+        attachments,
+        createdAt: now,
+        updatedAt: now
+      };
+
+      vault.memories.push(memory);
+
+      return {
+        memory,
+        createdPeople: newlyCreated
+      };
+    });
+  }
+
+  async updatePerson(payload = {}) {
+    const name = (payload.name || '').trim();
+    if (!name) {
+      throw new Error('name is required to update a person');
+    }
+
+    const relationship = payload.relationship?.trim();
+    const details = payload.details?.trim();
+
+    return this.updateVault((vault) => {
+      const person = this.findPersonByName(vault, name);
+      const now = new Date().toISOString();
+
+      if (!person) {
+        const created = {
+          id: this.generateId('person'),
+          name,
+          relationship: relationship || null,
+          details: details || null,
+          pronouns: null,
+          birthday: null,
+          avatar: null,
+          createdAt: now,
+          updatedAt: now
+        };
+        vault.people.push(created);
+        return { person: created, created: true };
+      }
+
+      if (relationship) {
+        person.relationship = relationship;
+      }
+
+      if (details) {
+        person.details = details;
+      }
+
+      person.updatedAt = now;
+      return { person, created: false };
+    });
+  }
+
+  async createPersonProfile(payload = {}) {
+    const name = (payload.name || '').trim();
+    if (!name) {
+      throw new Error('name is required to create a person');
+    }
+
+    const relationship = payload.relationship?.trim() || null;
+    const pronouns = payload.pronouns?.trim() || null;
+    const birthday = payload.birthday?.trim() || null;
+    const details = payload.details?.trim() || null;
+    const avatar = payload.avatar ? this.normalizeAttachment(payload.avatar, 'avatar') : null;
+
+    return this.updateVault((vault) => {
+      const existing = this.findPersonByName(vault, name);
+      const now = new Date().toISOString();
+
+      if (existing) {
+        existing.relationship = relationship || existing.relationship || null;
+        existing.pronouns = pronouns || existing.pronouns || null;
+        existing.birthday = birthday || existing.birthday || null;
+        existing.details = details || existing.details || null;
+        existing.avatar = avatar || existing.avatar || null;
+        existing.updatedAt = now;
+        return { person: existing, created: false };
+      }
+
+      const person = {
+        id: this.generateId('person'),
+        name,
+        relationship,
+        pronouns,
+        birthday,
+        details,
+        avatar,
+        createdAt: now,
+        updatedAt: now
+      };
+
+      vault.people.push(person);
+
+      return { person, created: true };
+    });
+  }
+
+  async updateMemoryCapsule(payload = {}) {
+    const memoryId = (payload.memoryId || '').trim();
+    if (!memoryId) {
+      throw new Error('memoryId is required to update a memory');
+    }
+
+    return this.updateVault((vault) => {
+      const memory = vault.memories.find((item) => item.id === memoryId);
+      if (!memory) {
+        throw new Error(`Memory ${memoryId} not found`);
+      }
+
+      if (payload.content) {
+        memory.content = payload.content;
+      }
+
+      if (payload.title) {
+        memory.title = payload.title;
+      }
+
+      if (payload.emotion) {
+        memory.emotion = payload.emotion;
+      }
+
+      if (typeof payload.importance === 'number') {
+        memory.importance = payload.importance;
+      }
+
+      if (payload.tags) {
+        memory.tags = Array.isArray(payload.tags) ? payload.tags.filter(Boolean) : [];
+      }
+
+      if (payload.location) {
+        memory.location = payload.location;
+      }
+
+      if (payload.date) {
+        memory.date = payload.date;
+      }
+
+      if (payload.people) {
+        const { resolvedPeople, newlyCreated } = this.resolvePeople(vault, payload.people);
+        memory.people = resolvedPeople;
+        memory.__newlyCreatedPeople = newlyCreated;
+      }
+
+      if (Array.isArray(payload.removeAttachmentIds) && payload.removeAttachmentIds.length) {
+        const idsToRemove = new Set(payload.removeAttachmentIds);
+        memory.attachments = (memory.attachments || []).filter((attachment) => !idsToRemove.has(attachment.id));
+      }
+
+      if (payload.attachments) {
+        const normalized = this.normalizeAttachments(payload.attachments);
+        if (payload.replaceAttachments) {
+          memory.attachments = normalized;
+        } else {
+          memory.attachments = [...(memory.attachments || []), ...normalized];
+        }
+      }
+
+      memory.updatedAt = new Date().toISOString();
+
+      const createdPeople = memory.__newlyCreatedPeople || [];
+      delete memory.__newlyCreatedPeople;
+
+      return {
+        memory,
+        createdPeople
+      };
+    });
+  }
+
+  async attachMemoryMedia(payload = {}) {
+    const memoryId = (payload.memoryId || '').trim();
+    if (!memoryId) {
+      throw new Error('memoryId is required to attach media');
+    }
+
+    const media = Array.isArray(payload.media) ? payload.media : [];
+    if (!media.length) {
+      throw new Error('media array is required to attach media');
+    }
+
+    return this.updateVault((vault) => {
+      const memory = vault.memories.find((item) => item.id === memoryId);
+      if (!memory) {
+        throw new Error(`Memory ${memoryId} not found`);
+      }
+
+      const normalized = this.normalizeAttachments(media, 'media');
+
+      if (payload.replaceExisting) {
+        memory.attachments = normalized;
+      } else {
+        memory.attachments = [...(memory.attachments || []), ...normalized];
+      }
+
+      memory.updatedAt = new Date().toISOString();
+
+      return {
+        memory,
+        attached: normalized
+      };
+    });
+  }
+
+  async updateVault(mutator) {
+    const vault = await this.loadVault();
+    const result = await mutator(vault);
+    await this.saveVault(vault);
+    return result;
+  }
+
+  resolvePeople(vault, rawPeople) {
+    const peopleInputs = Array.isArray(rawPeople) ? rawPeople : [];
+    const resolvedPeople = [];
+    const newlyCreated = [];
+
+    for (const entry of peopleInputs) {
+      const normalized = this.normalizePersonEntry(entry);
+      if (!normalized) {
+        continue;
+      }
+
+      let person = null;
+
+      if (normalized.id) {
+        person = vault.people.find((item) => item.id === normalized.id);
+      }
+
+      if (!person && normalized.name) {
+        person = this.findPersonByName(vault, normalized.name);
+      }
+
+      if (!person && normalized.name) {
+        const now = new Date().toISOString();
+        person = {
+          id: this.generateId('person'),
+          name: normalized.name,
+          relationship: normalized.relationship || null,
+          details: null,
+          pronouns: null,
+          birthday: null,
+          avatar: null,
+          createdAt: now,
+          updatedAt: now
+        };
+        vault.people.push(person);
+        newlyCreated.push(person);
+      }
+
+      if (person) {
+        if (normalized.relationship && !person.relationship) {
+          person.relationship = normalized.relationship;
+        }
+        resolvedPeople.push({ id: person.id, name: person.name, relationship: person.relationship || null });
+      }
+    }
+
+    return { resolvedPeople, newlyCreated };
+  }
+
+  normalizePersonEntry(entry) {
+    if (!entry) return null;
+    if (typeof entry === 'string') {
+      return { name: entry.trim() };
+    }
+    if (typeof entry === 'object') {
+      const normalized = {};
+      if (entry.id) {
+        normalized.id = String(entry.id);
+      }
+      if (entry.name) {
+        normalized.name = String(entry.name).trim();
+      }
+      if (entry.relationship) {
+        normalized.relationship = String(entry.relationship).trim();
+      }
+      return normalized;
+    }
+    return null;
+  }
+
+  normalizeAttachments(attachments, defaultPrefix = 'attachment') {
+    if (!Array.isArray(attachments)) {
+      return [];
+    }
+
+    return attachments
+      .map((item) => this.normalizeAttachment(item, defaultPrefix))
+      .filter(Boolean);
+  }
+
+  normalizeAttachment(item, defaultPrefix = 'attachment') {
+    if (!item) return null;
+
+    const attachment = { ...item };
+    attachment.id = item.id || this.generateId(defaultPrefix);
+    if (item.uploadId) {
+      attachment.uploadId = item.uploadId;
+    }
+    if (item.name) {
+      attachment.name = item.name;
+    }
+    if (item.type) {
+      attachment.type = item.type;
+    }
+    if (item.data) {
+      attachment.data = item.data;
+    }
+    if (item.dataUrl) {
+      attachment.dataUrl = item.dataUrl;
+    }
+    attachment.addedAt = new Date().toISOString();
+    return attachment;
+  }
+
+  findPersonByName(vault, name) {
+    const target = name.trim().toLowerCase();
+    return vault.people.find((person) => person.name.trim().toLowerCase() === target);
+  }
+
+  deriveTitle(content, fallback) {
+    if (!content) {
+      return fallback;
+    }
+
+    const cleaned = content.replace(/\s+/g, ' ').trim();
+    if (!cleaned) {
+      return fallback;
+    }
+
+    const words = cleaned.split(' ');
+    const preview = words.slice(0, 6).join(' ');
+    return preview.length < cleaned.length ? `${preview}…` : preview;
+  }
+
+  buildSummary(memory) {
+    if (memory.title && memory.content) {
+      return `${memory.title.trim()} — ${this.limitText(memory.content, 200)}`;
+    }
+    if (memory.content) {
+      return this.limitText(memory.content, 200);
+    }
+    return 'This memory was saved, but it does not include any story details yet.';
+  }
+
+  limitText(text, maxLength) {
+    if (!text) return '';
+    const cleaned = text.replace(/\s+/g, ' ').trim();
+    if (cleaned.length <= maxLength) {
+      return cleaned;
+    }
+    return `${cleaned.slice(0, maxLength - 1)}…`;
+  }
+
+  async deleteMemory({ memoryId } = {}) {
+    const id = (memoryId || '').trim();
+    if (!id) {
+      throw new Error('memoryId is required to delete a memory');
+    }
+
+    return this.updateVault((vault) => {
+      const initialCount = vault.memories.length;
+      vault.memories = vault.memories.filter((memory) => memory.id !== id);
+      const success = vault.memories.length < initialCount;
+
+      if (!success) {
+        throw new Error(`Memory ${id} not found`);
+      }
+
+      return { success, memoryId: id };
+    });
+  }
+
+  async deletePerson({ personId } = {}) {
+    const id = (personId || '').trim();
+    if (!id) {
+      throw new Error('personId is required to delete a person');
+    }
+
+    return this.updateVault((vault) => {
+      const initialCount = vault.people.length;
+      vault.people = vault.people.filter((person) => person.id !== id);
+      const success = vault.people.length < initialCount;
+
+      if (!success) {
+        throw new Error(`Person ${id} not found`);
+      }
+
+      // Also remove this person from any memories
+      vault.memories.forEach((memory) => {
+        if (Array.isArray(memory.people)) {
+          memory.people = memory.people.filter((person) => person.id !== id);
+        }
+      });
+
+      return { success, personId: id };
+    });
+  }
+}
+
+module.exports = VaultService;
diff --git a/package-lock.json b/package-lock.json
index de3d899e..9bf59769 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,6 @@
       "version": "1.0.0",
       "license": "MIT",
       "dependencies": {
-        "@openai/agents": "^0.1.0",
         "cors": "^2.8.5",
         "express": "^4.18.2",
         "form-data": "^4.0.4",
@@ -21,532 +20,6 @@
         "node": ">=18.0.0"
       }
     },
-    "node_modules/@modelcontextprotocol/sdk": {
-      "version": "1.17.5",
-      "resolved": "https://registry.npmjs.org/@modelcontextprotocol/sdk/-/sdk-1.17.5.tgz",
-      "integrity": "sha512-QakrKIGniGuRVfWBdMsDea/dx1PNE739QJ7gCM41s9q+qaCYTHCdsIBXQVVXry3mfWAiaM9kT22Hyz53Uw8mfg==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "ajv": "^6.12.6",
-        "content-type": "^1.0.5",
-        "cors": "^2.8.5",
-        "cross-spawn": "^7.0.5",
-        "eventsource": "^3.0.2",
-        "eventsource-parser": "^3.0.0",
-        "express": "^5.0.1",
-        "express-rate-limit": "^7.5.0",
-        "pkce-challenge": "^5.0.0",
-        "raw-body": "^3.0.0",
-        "zod": "^3.23.8",
-        "zod-to-json-schema": "^3.24.1"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@modelcontextprotocol/sdk/node_modules/accepts": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/accepts/-/accepts-2.0.0.tgz",
-      "integrity": "sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "mime-types": "^3.0.0",
-        "negotiator": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/@modelcontextprotocol/sdk/node_modules/body-parser": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-2.2.0.tgz",
-      "integrity": "sha512-02qvAaxv8tp7fBa/mw1ga98OGm+eCbqzJOKoRt70sLmfEEi+jyBYVTDGfCL/k06/4EMk/z01gCe7HoCH/f2LTg==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "bytes": "^3.1.2",
-        "content-type": "^1.0.5",
-        "debug": "^4.4.0",
-        "http-errors": "^2.0.0",
-        "iconv-lite": "^0.6.3",
-        "on-finished": "^2.4.1",
-        "qs": "^6.14.0",
-        "raw-body": "^3.0.0",
-        "type-is": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@modelcontextprotocol/sdk/node_modules/content-disposition": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-1.0.0.tgz",
-      "integrity": "sha512-Au9nRL8VNUut/XSzbQA38+M78dzP4D+eqg3gfJHMIHHYa3bg067xj1KxMUWj+VULbiZMowKngFFbKczUrNJ1mg==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "safe-buffer": "5.2.1"
-      },
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/@modelcontextprotocol/sdk/node_modules/cookie-signature": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.2.2.tgz",
-      "integrity": "sha512-D76uU73ulSXrD1UXF4KE2TMxVVwhsnCgfAyTg9k8P6KGZjlXKrOLe4dJQKI3Bxi5wjesZoFXJWElNWBjPZMbhg==",
-      "license": "MIT",
-      "optional": true,
-      "engines": {
-        "node": ">=6.6.0"
-      }
-    },
-    "node_modules/@modelcontextprotocol/sdk/node_modules/debug": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
-      "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "ms": "^2.1.3"
-      },
-      "engines": {
-        "node": ">=6.0"
-      },
-      "peerDependenciesMeta": {
-        "supports-color": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@modelcontextprotocol/sdk/node_modules/express": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/express/-/express-5.1.0.tgz",
-      "integrity": "sha512-DT9ck5YIRU+8GYzzU5kT3eHGA5iL+1Zd0EutOmTE9Dtk+Tvuzd23VBU+ec7HPNSTxXYO55gPV/hq4pSBJDjFpA==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "accepts": "^2.0.0",
-        "body-parser": "^2.2.0",
-        "content-disposition": "^1.0.0",
-        "content-type": "^1.0.5",
-        "cookie": "^0.7.1",
-        "cookie-signature": "^1.2.1",
-        "debug": "^4.4.0",
-        "encodeurl": "^2.0.0",
-        "escape-html": "^1.0.3",
-        "etag": "^1.8.1",
-        "finalhandler": "^2.1.0",
-        "fresh": "^2.0.0",
-        "http-errors": "^2.0.0",
-        "merge-descriptors": "^2.0.0",
-        "mime-types": "^3.0.0",
-        "on-finished": "^2.4.1",
-        "once": "^1.4.0",
-        "parseurl": "^1.3.3",
-        "proxy-addr": "^2.0.7",
-        "qs": "^6.14.0",
-        "range-parser": "^1.2.1",
-        "router": "^2.2.0",
-        "send": "^1.1.0",
-        "serve-static": "^2.2.0",
-        "statuses": "^2.0.1",
-        "type-is": "^2.0.1",
-        "vary": "^1.1.2"
-      },
-      "engines": {
-        "node": ">= 18"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
-      }
-    },
-    "node_modules/@modelcontextprotocol/sdk/node_modules/finalhandler": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-2.1.0.tgz",
-      "integrity": "sha512-/t88Ty3d5JWQbWYgaOGCCYfXRwV1+be02WqYYlL6h0lEiUAMPM8o8qKGO01YIkOHzka2up08wvgYD0mDiI+q3Q==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "debug": "^4.4.0",
-        "encodeurl": "^2.0.0",
-        "escape-html": "^1.0.3",
-        "on-finished": "^2.4.1",
-        "parseurl": "^1.3.3",
-        "statuses": "^2.0.1"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/@modelcontextprotocol/sdk/node_modules/fresh": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/fresh/-/fresh-2.0.0.tgz",
-      "integrity": "sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==",
-      "license": "MIT",
-      "optional": true,
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/@modelcontextprotocol/sdk/node_modules/iconv-lite": {
-      "version": "0.6.3",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
-      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "safer-buffer": ">= 2.1.2 < 3.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/@modelcontextprotocol/sdk/node_modules/media-typer": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-1.1.0.tgz",
-      "integrity": "sha512-aisnrDP4GNe06UcKFnV5bfMNPBUw4jsLGaWwWfnH3v02GnBuXX2MCVn5RbrWo0j3pczUilYblq7fQ7Nw2t5XKw==",
-      "license": "MIT",
-      "optional": true,
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/@modelcontextprotocol/sdk/node_modules/merge-descriptors": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-2.0.0.tgz",
-      "integrity": "sha512-Snk314V5ayFLhp3fkUREub6WtjBfPdCPY1Ln8/8munuLuiYhsABgBVWsozAG+MWMbVEvcdcpbi9R7ww22l9Q3g==",
-      "license": "MIT",
-      "optional": true,
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/@modelcontextprotocol/sdk/node_modules/mime-db": {
-      "version": "1.54.0",
-      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.54.0.tgz",
-      "integrity": "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==",
-      "license": "MIT",
-      "optional": true,
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/@modelcontextprotocol/sdk/node_modules/mime-types": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-3.0.1.tgz",
-      "integrity": "sha512-xRc4oEhT6eaBpU1XF7AjpOFD+xQmXNB5OVKwp4tqCuBpHLS/ZbBDrc07mYTDqVMg6PfxUjjNp85O6Cd2Z/5HWA==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "mime-db": "^1.54.0"
-      },
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/@modelcontextprotocol/sdk/node_modules/ms": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "license": "MIT",
-      "optional": true
-    },
-    "node_modules/@modelcontextprotocol/sdk/node_modules/negotiator": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-1.0.0.tgz",
-      "integrity": "sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==",
-      "license": "MIT",
-      "optional": true,
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/@modelcontextprotocol/sdk/node_modules/qs": {
-      "version": "6.14.0",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.0.tgz",
-      "integrity": "sha512-YWWTjgABSKcvs/nWBi9PycY/JiPJqOD4JA6o9Sej2AtvSGarXxKC3OQSk4pAarbdQlKAh5D4FCQkJNkW+GAn3w==",
-      "license": "BSD-3-Clause",
-      "optional": true,
-      "dependencies": {
-        "side-channel": "^1.1.0"
-      },
-      "engines": {
-        "node": ">=0.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/@modelcontextprotocol/sdk/node_modules/raw-body": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-3.0.1.tgz",
-      "integrity": "sha512-9G8cA+tuMS75+6G/TzW8OtLzmBDMo8p1JRxN5AZ+LAp8uxGA8V8GZm4GQ4/N5QNQEnLmg6SS7wyuSmbKepiKqA==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "bytes": "3.1.2",
-        "http-errors": "2.0.0",
-        "iconv-lite": "0.7.0",
-        "unpipe": "1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.10"
-      }
-    },
-    "node_modules/@modelcontextprotocol/sdk/node_modules/raw-body/node_modules/iconv-lite": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.7.0.tgz",
-      "integrity": "sha512-cf6L2Ds3h57VVmkZe+Pn+5APsT7FpqJtEhhieDCvrE2MK5Qk9MyffgQyuxQTm6BChfeZNtcOLHp9IcWRVcIcBQ==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "safer-buffer": ">= 2.1.2 < 3.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
-      }
-    },
-    "node_modules/@modelcontextprotocol/sdk/node_modules/send": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/send/-/send-1.2.0.tgz",
-      "integrity": "sha512-uaW0WwXKpL9blXE2o0bRhoL2EGXIrZxQ2ZQ4mgcfoBxdFmQold+qWsD2jLrfZ0trjKL6vOw0j//eAwcALFjKSw==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "debug": "^4.3.5",
-        "encodeurl": "^2.0.0",
-        "escape-html": "^1.0.3",
-        "etag": "^1.8.1",
-        "fresh": "^2.0.0",
-        "http-errors": "^2.0.0",
-        "mime-types": "^3.0.1",
-        "ms": "^2.1.3",
-        "on-finished": "^2.4.1",
-        "range-parser": "^1.2.1",
-        "statuses": "^2.0.1"
-      },
-      "engines": {
-        "node": ">= 18"
-      }
-    },
-    "node_modules/@modelcontextprotocol/sdk/node_modules/serve-static": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-2.2.0.tgz",
-      "integrity": "sha512-61g9pCh0Vnh7IutZjtLGGpTA355+OPn2TyDv/6ivP2h/AdAVX9azsoxmg2/M6nZeQZNYBEwIcsne1mJd9oQItQ==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "encodeurl": "^2.0.0",
-        "escape-html": "^1.0.3",
-        "parseurl": "^1.3.3",
-        "send": "^1.2.0"
-      },
-      "engines": {
-        "node": ">= 18"
-      }
-    },
-    "node_modules/@modelcontextprotocol/sdk/node_modules/type-is": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/type-is/-/type-is-2.0.1.tgz",
-      "integrity": "sha512-OZs6gsjF4vMp32qrCbiVSkrFmXtG/AZhY3t0iAMrMBiAZyV9oALtXO8hsrHbMXF9x6L3grlFuwW2oAz7cav+Gw==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "content-type": "^1.0.5",
-        "media-typer": "^1.1.0",
-        "mime-types": "^3.0.0"
-      },
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/@openai/agents": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/@openai/agents/-/agents-0.1.1.tgz",
-      "integrity": "sha512-2nAjIltQ691Nzlh/+XxbQxuGDtIouk7bvb3EmrObIHiK+5F2nG0PU6xEx34D6DtpiocJtuDWpGkYdixK/FvPnw==",
-      "license": "MIT",
-      "dependencies": {
-        "@openai/agents-core": "0.1.1",
-        "@openai/agents-openai": "0.1.1",
-        "@openai/agents-realtime": "0.1.1",
-        "debug": "^4.4.0",
-        "openai": "^5.16.0"
-      },
-      "peerDependencies": {
-        "zod": "^3.25.40"
-      }
-    },
-    "node_modules/@openai/agents-core": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/@openai/agents-core/-/agents-core-0.1.1.tgz",
-      "integrity": "sha512-u/PjlmCz2UGheJ3apbB5utdBdGGQD5PS4JSX+MsH/Inb291dEnNbf3hA1GcM2RKHCJrpaQNofcNcNuEW1uophQ==",
-      "license": "MIT",
-      "dependencies": {
-        "debug": "^4.4.0",
-        "openai": "^5.16.0"
-      },
-      "optionalDependencies": {
-        "@modelcontextprotocol/sdk": "^1.17.2"
-      },
-      "peerDependencies": {
-        "zod": "^3.25.40"
-      },
-      "peerDependenciesMeta": {
-        "zod": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@openai/agents-core/node_modules/debug": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
-      "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
-      "license": "MIT",
-      "dependencies": {
-        "ms": "^2.1.3"
-      },
-      "engines": {
-        "node": ">=6.0"
-      },
-      "peerDependenciesMeta": {
-        "supports-color": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@openai/agents-core/node_modules/ms": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "license": "MIT"
-    },
-    "node_modules/@openai/agents-openai": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/@openai/agents-openai/-/agents-openai-0.1.1.tgz",
-      "integrity": "sha512-l7xj/9P3cEbA30qwSsSyO0hlxXdKJo63BtRlsmnF7HIUQpAz5sWsVeBB3rbmOXJNAz8hK6yMsjoaL+qsy0HCZg==",
-      "license": "MIT",
-      "dependencies": {
-        "@openai/agents-core": "0.1.1",
-        "debug": "^4.4.0",
-        "openai": "^5.16.0"
-      },
-      "peerDependencies": {
-        "zod": "^3.25.40"
-      }
-    },
-    "node_modules/@openai/agents-openai/node_modules/debug": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
-      "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
-      "license": "MIT",
-      "dependencies": {
-        "ms": "^2.1.3"
-      },
-      "engines": {
-        "node": ">=6.0"
-      },
-      "peerDependenciesMeta": {
-        "supports-color": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@openai/agents-openai/node_modules/ms": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "license": "MIT"
-    },
-    "node_modules/@openai/agents-realtime": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/@openai/agents-realtime/-/agents-realtime-0.1.1.tgz",
-      "integrity": "sha512-VjepFe80A3z37HWHjc5PI9q0vPSq3s+zTlxKZ0mrFrvdH1hd2wK3XYSgvhZe/ROQ85iBMmyP9h1+DB69qob7Dw==",
-      "license": "MIT",
-      "dependencies": {
-        "@openai/agents-core": "0.1.1",
-        "@types/ws": "^8.18.1",
-        "debug": "^4.4.0",
-        "ws": "^8.18.1"
-      },
-      "peerDependencies": {
-        "zod": "^3.25.40"
-      }
-    },
-    "node_modules/@openai/agents-realtime/node_modules/debug": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
-      "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
-      "license": "MIT",
-      "dependencies": {
-        "ms": "^2.1.3"
-      },
-      "engines": {
-        "node": ">=6.0"
-      },
-      "peerDependenciesMeta": {
-        "supports-color": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@openai/agents-realtime/node_modules/ms": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "license": "MIT"
-    },
-    "node_modules/@openai/agents/node_modules/debug": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
-      "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
-      "license": "MIT",
-      "dependencies": {
-        "ms": "^2.1.3"
-      },
-      "engines": {
-        "node": ">=6.0"
-      },
-      "peerDependenciesMeta": {
-        "supports-color": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@openai/agents/node_modules/ms": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "license": "MIT"
-    },
-    "node_modules/@types/node": {
-      "version": "24.3.1",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-24.3.1.tgz",
-      "integrity": "sha512-3vXmQDXy+woz+gnrTvuvNrPzekOi+Ds0ReMxw0LzBiK3a+1k0kQn9f2NWk+lgD4rJehFUmYy2gMhJ2ZI+7YP9g==",
-      "license": "MIT",
-      "dependencies": {
-        "undici-types": "~7.10.0"
-      }
-    },
-    "node_modules/@types/ws": {
-      "version": "8.18.1",
-      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
-      "integrity": "sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/node": "*"
-      }
-    },
     "node_modules/accepts": {
       "version": "1.3.8",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
@@ -560,23 +33,6 @@
         "node": ">= 0.6"
       }
     },
-    "node_modules/ajv": {
-      "version": "6.12.6",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.4.1",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
     "node_modules/array-flatten": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
@@ -712,21 +168,6 @@
         "node": ">= 0.10"
       }
     },
-    "node_modules/cross-spawn": {
-      "version": "7.0.6",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
-      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "path-key": "^3.1.0",
-        "shebang-command": "^2.0.0",
-        "which": "^2.0.1"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
     "node_modules/debug": {
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -853,29 +294,6 @@
         "node": ">= 0.6"
       }
     },
-    "node_modules/eventsource": {
-      "version": "3.0.7",
-      "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-3.0.7.tgz",
-      "integrity": "sha512-CRT1WTyuQoD771GW56XEZFQ/ZoSfWid1alKGDYMmkt2yl8UXrVR4pspqWNEcqKvVIzg6PAltWjxcSSPrboA4iA==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "eventsource-parser": "^3.0.1"
-      },
-      "engines": {
-        "node": ">=18.0.0"
-      }
-    },
-    "node_modules/eventsource-parser": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/eventsource-parser/-/eventsource-parser-3.0.6.tgz",
-      "integrity": "sha512-Vo1ab+QXPzZ4tCa8SwIHJFaSzy4R6SHf7BY79rFBDf0idraZWAkYrDjDj8uWaSm3S2TK+hJ7/t1CEmZ7jXw+pg==",
-      "license": "MIT",
-      "optional": true,
-      "engines": {
-        "node": ">=18.0.0"
-      }
-    },
     "node_modules/express": {
       "version": "4.21.2",
       "resolved": "https://registry.npmjs.org/express/-/express-4.21.2.tgz",
@@ -922,36 +340,6 @@
         "url": "https://opencollective.com/express"
       }
     },
-    "node_modules/express-rate-limit": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/express-rate-limit/-/express-rate-limit-7.5.1.tgz",
-      "integrity": "sha512-7iN8iPMDzOMHPUYllBEsQdWVB6fPDMPqwjBaFrgr4Jgr/+okjvzAy+UHlYYL/Vs0OsOrMkwS6PJDkFlJwoxUnw==",
-      "license": "MIT",
-      "optional": true,
-      "engines": {
-        "node": ">= 16"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/express-rate-limit"
-      },
-      "peerDependencies": {
-        "express": ">= 4.11"
-      }
-    },
-    "node_modules/fast-deep-equal": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "license": "MIT",
-      "optional": true
-    },
-    "node_modules/fast-json-stable-stringify": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
-      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
-      "license": "MIT",
-      "optional": true
-    },
     "node_modules/finalhandler": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.1.tgz",
@@ -1153,27 +541,6 @@
         "node": ">= 0.10"
       }
     },
-    "node_modules/is-promise": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-4.0.0.tgz",
-      "integrity": "sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==",
-      "license": "MIT",
-      "optional": true
-    },
-    "node_modules/isexe": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
-      "license": "ISC",
-      "optional": true
-    },
-    "node_modules/json-schema-traverse": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-      "license": "MIT",
-      "optional": true
-    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -1291,37 +658,6 @@
         "node": ">= 0.8"
       }
     },
-    "node_modules/once": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
-      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
-      "license": "ISC",
-      "optional": true,
-      "dependencies": {
-        "wrappy": "1"
-      }
-    },
-    "node_modules/openai": {
-      "version": "5.20.0",
-      "resolved": "https://registry.npmjs.org/openai/-/openai-5.20.0.tgz",
-      "integrity": "sha512-Bmc2zLM/YWgFrDpXr9hwXqGGDdMmMpE9+qoZPsaHpn0Y/Qk1Vu26hNqXo7+nHdli+sLsXINvS1f8kR3NKhGKmA==",
-      "license": "Apache-2.0",
-      "bin": {
-        "openai": "bin/cli"
-      },
-      "peerDependencies": {
-        "ws": "^8.18.0",
-        "zod": "^3.23.8"
-      },
-      "peerDependenciesMeta": {
-        "ws": {
-          "optional": true
-        },
-        "zod": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/parseurl": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -1331,32 +667,12 @@
         "node": ">= 0.8"
       }
     },
-    "node_modules/path-key": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "license": "MIT",
-      "optional": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/path-to-regexp": {
       "version": "0.1.12",
       "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.12.tgz",
       "integrity": "sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ==",
       "license": "MIT"
     },
-    "node_modules/pkce-challenge": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/pkce-challenge/-/pkce-challenge-5.0.0.tgz",
-      "integrity": "sha512-ueGLflrrnvwB3xuo/uGob5pd5FN7l0MsLf0Z87o/UQmRtwjvfylfc9MurIxRAWywCYTgrvpXBcqjV4OfCYGCIQ==",
-      "license": "MIT",
-      "optional": true,
-      "engines": {
-        "node": ">=16.20.0"
-      }
-    },
     "node_modules/proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -1370,16 +686,6 @@
         "node": ">= 0.10"
       }
     },
-    "node_modules/punycode": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
-      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
-      "license": "MIT",
-      "optional": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/qs": {
       "version": "6.13.0",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz",
@@ -1425,59 +731,6 @@
         "node": ">= 0.8"
       }
     },
-    "node_modules/router": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/router/-/router-2.2.0.tgz",
-      "integrity": "sha512-nLTrUKm2UyiL7rlhapu/Zl45FwNgkZGaCpZbIHajDYgwlJCOzLSk+cIPAnsEqV955GjILJnKbdQC1nVPz+gAYQ==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "debug": "^4.4.0",
-        "depd": "^2.0.0",
-        "is-promise": "^4.0.0",
-        "parseurl": "^1.3.3",
-        "path-to-regexp": "^8.0.0"
-      },
-      "engines": {
-        "node": ">= 18"
-      }
-    },
-    "node_modules/router/node_modules/debug": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
-      "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "ms": "^2.1.3"
-      },
-      "engines": {
-        "node": ">=6.0"
-      },
-      "peerDependenciesMeta": {
-        "supports-color": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/router/node_modules/ms": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "license": "MIT",
-      "optional": true
-    },
-    "node_modules/router/node_modules/path-to-regexp": {
-      "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-8.3.0.tgz",
-      "integrity": "sha512-7jdwVIRtsP8MYpdXSwOS0YdD0Du+qOoF/AEPIt88PcCFrZCzx41oxku1jD88hZBwbNUIEfpqvuhjFaMAqMTWnA==",
-      "license": "MIT",
-      "optional": true,
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
-      }
-    },
     "node_modules/safe-buffer": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
@@ -1564,29 +817,6 @@
       "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
       "license": "ISC"
     },
-    "node_modules/shebang-command": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "shebang-regex": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/shebang-regex": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "license": "MIT",
-      "optional": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/side-channel": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
@@ -1690,12 +920,6 @@
         "node": ">= 0.6"
       }
     },
-    "node_modules/undici-types": {
-      "version": "7.10.0",
-      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.10.0.tgz",
-      "integrity": "sha512-t5Fy/nfn+14LuOc2KNYg75vZqClpAiqscVvMygNnlsHBFpSXdJaYtXMcdNLpl/Qvc3P2cB3s6lOV51nqsFq4ag==",
-      "license": "MIT"
-    },
     "node_modules/unpipe": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
@@ -1705,16 +929,6 @@
         "node": ">= 0.8"
       }
     },
-    "node_modules/uri-js": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
-      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
-      "license": "BSD-2-Clause",
-      "optional": true,
-      "dependencies": {
-        "punycode": "^2.1.0"
-      }
-    },
     "node_modules/utils-merge": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
@@ -1733,29 +947,6 @@
         "node": ">= 0.8"
       }
     },
-    "node_modules/which": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "license": "ISC",
-      "optional": true,
-      "dependencies": {
-        "isexe": "^2.0.0"
-      },
-      "bin": {
-        "node-which": "bin/node-which"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/wrappy": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
-      "license": "ISC",
-      "optional": true
-    },
     "node_modules/ws": {
       "version": "8.18.3",
       "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.3.tgz",
@@ -1776,25 +967,6 @@
           "optional": true
         }
       }
-    },
-    "node_modules/zod": {
-      "version": "3.25.76",
-      "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
-      "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/colinhacks"
-      }
-    },
-    "node_modules/zod-to-json-schema": {
-      "version": "3.24.6",
-      "resolved": "https://registry.npmjs.org/zod-to-json-schema/-/zod-to-json-schema-3.24.6.tgz",
-      "integrity": "sha512-h/z3PKvcTcTetyjl1fkj79MHNEjm+HpD6NXheWjzOekY7kV+lwDYnHw+ivHkijnCSMz1yJaWBD9vu/Fcmk+vEg==",
-      "license": "ISC",
-      "optional": true,
-      "peerDependencies": {
-        "zod": "^3.24.1"
-      }
     }
   }
 }
diff --git a/package.json b/package.json
index 7639dcda..c5558625 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,6 @@
     "build": "echo 'No build step required for static assets'"
   },
   "dependencies": {
-    "@openai/agents": "^0.1.0",
     "cors": "^2.8.5",
     "express": "^4.18.2",
     "form-data": "^4.0.4",
diff --git a/pages/dashboard-new.html b/pages/dashboard-new.html
deleted file mode 100644
index c1e49c48..00000000
--- a/pages/dashboard-new.html
+++ /dev/null
@@ -1,5294 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Emma - Your Intelligent Memory Companion</title>
-  <style>
-    /* Emma Brand Variables */
-    :root {
-      --emma-gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
-      --emma-gradient-2: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #a855f7 100%);
-      --emma-aurora: linear-gradient(135deg, #667eea20 0%, #764ba240 25%, #f093fb20 50%, #4dabf720 75%, #667eea20 100%);
-      --emma-bg-gradient: linear-gradient(135deg, #0a0a0f 0%, #1a1033 50%, #0f0c29 100%);
-      --emma-purple: #764ba2;
-      --emma-pink: #f093fb;
-      --emma-blue: #667eea;
-      --emma-dark: #0a0a0f;
-      --emma-card-bg: rgba(255, 255, 255, 0.03);
-      --emma-glass: rgba(255, 255, 255, 0.05);
-      --emma-border: rgba(255, 255, 255, 0.1);
-      --emma-text: #ffffff;
-      --emma-text-secondary: rgba(255, 255, 255, 0.8);
-      --emma-text-tertiary: rgba(255, 255, 255, 0.6);
-      --emma-success: #4ade80;
-      --emma-error: #f87171;
-      --emma-warning: #fbbf24;
-      --emma-glow: 0 0 40px rgba(134, 88, 255, 0.6);
-    }
-
-    * {
-      margin: 0;
-      padding: 0;
-      box-sizing: border-box;
-    }
-
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-      background: var(--emma-bg-gradient);
-      color: var(--emma-text);
-      min-height: 100vh;
-      overflow: hidden;
-      position: relative;
-    }
-
-    /* Aurora Background Effect */
-    .aurora-bg {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      opacity: 0.3;
-      z-index: 1;
-      pointer-events: none;
-    }
-
-    .aurora {
-      position: absolute;
-      width: 200%;
-      height: 200%;
-      background: var(--emma-aurora);
-      animation: aurora 20s ease-in-out infinite;
-      filter: blur(60px);
-    }
-
-    @keyframes aurora {
-      0%, 100% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
-      33% { transform: translate(-30%, -60%) rotate(120deg) scale(1.1); }
-      66% { transform: translate(-70%, -40%) rotate(240deg) scale(0.9); }
-    }
-
-    /* Main Container */
-    .dashboard {
-      position: relative;
-      width: 100%;
-      height: 100vh;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      z-index: 2;
-    }
-
-    /* Central Command Orb Container */
-    .command-center {
-      position: relative;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    /* Emma Orb */
-    .emma-orb-container {
-      position: relative;
-      width: 200px;
-      height: 200px;
-      cursor: pointer;
-      transition: transform 0.3s ease;
-    }
-
-    .emma-orb-container:hover {
-      transform: scale(1.05);
-    }
-
-    .emma-orb-webgl {
-      width: 100%;
-      height: 100%;
-      border-radius: 50%;
-      box-shadow: var(--emma-glow), inset 0 0 40px rgba(255, 255, 255, 0.1);
-      position: relative;
-      overflow: hidden;
-    }
-
-    .emma-orb-webgl canvas {
-      border-radius: 50%;
-      width: 100% !important;
-      height: 100% !important;
-    }
-
-    @keyframes orb-pulse {
-      0%, 100% { transform: scale(1); box-shadow: var(--emma-glow), inset 0 0 40px rgba(255, 255, 255, 0.1); }
-      50% { transform: scale(1.02); box-shadow: 0 0 60px rgba(134, 88, 255, 0.8), inset 0 0 40px rgba(255, 255, 255, 0.2); }
-    }
-
-    /* Orb status removed - clean WebGL orb only */
-
-    .orb-icon {
-      font-size: 48px;
-      margin-bottom: 8px;
-      filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
-    }
-
-    /* Orb text removed - clean WebGL orb only */
-
-    /* Neural Network Menu */
-    .neural-network {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      pointer-events: none;
-      z-index: 8;
-    }
-
-    .neural-canvas {
-      width: 100%;
-      height: 100%;
-    }
-
-    .radial-menu {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      top: 0;
-      left: 0;
-      pointer-events: none;
-      opacity: 0;
-      transition: opacity 0.6s ease;
-    }
-
-    .radial-menu.active {
-      opacity: 1;
-      pointer-events: all;
-    }
-
-    .radial-item {
-      position: absolute;
-      width: 90px;
-      height: 90px;
-      background: var(--emma-glass);
-      backdrop-filter: blur(20px);
-      border: 2px solid rgba(134, 88, 255, 0.3);
-      border-radius: 50%;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      cursor: pointer;
-      transition: all 0.3s ease;
-      opacity: 0;
-      transform: scale(0);
-      box-shadow: 0 0 30px rgba(134, 88, 255, 0.2);
-      animation: float 6s ease-in-out infinite;
-      z-index: 10;
-    }
-
-    .radial-menu.active .radial-item {
-      opacity: 1;
-      transform: scale(1);
-    }
-
-    @keyframes float {
-      0%, 100% { transform: translateY(0px) scale(1); }
-      33% { transform: translateY(-10px) scale(1.02); }
-      66% { transform: translateY(5px) scale(0.98); }
-    }
-
-    /* Memory Constellation Styles - Star-like nodes */
-    .memory-node {
-      font-size: 12px;
-      color: white;
-      backdrop-filter: blur(15px);
-      box-shadow:
-        0 0 30px rgba(134, 88, 255, 0.4),
-        0 0 60px rgba(134, 88, 255, 0.2),
-        inset 0 0 20px rgba(255, 255, 255, 0.1);
-      border: 1px solid rgba(255, 255, 255, 0.2);
-      position: relative;
-    }
-
-    /* Star-like glow effect */
-    .memory-node::before {
-      content: '';
-      position: absolute;
-      top: -2px;
-      left: -2px;
-      right: -2px;
-      bottom: -2px;
-      border-radius: 50%;
-      background: linear-gradient(45deg, rgba(134, 88, 255, 0.3), rgba(240, 147, 251, 0.3));
-      z-index: -1;
-      opacity: 0.7;
-      animation: star-pulse 3s ease-in-out infinite;
-    }
-
-    @keyframes star-pulse {
-      0%, 100% { transform: scale(1); opacity: 0.7; }
-      50% { transform: scale(1.1); opacity: 1; }
-    }
-
-    .memory-node .memory-thumbnail {
-      font-size: 28px;
-      margin-bottom: 2px;
-      filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5));
-      text-shadow: 0 0 10px rgba(134, 88, 255, 0.8);
-    }
-
-    .memory-node .memory-label {
-      font-size: 11px;
-      opacity: 0;
-      position: absolute;
-      top: 75px;
-      left: 50%;
-      transform: translateX(-50%);
-      background: rgba(17, 17, 27, 0.95);
-      padding: 6px 10px;
-      border-radius: 6px;
-      white-space: nowrap;
-      transition: all 0.3s ease;
-      pointer-events: none;
-      z-index: 1001;
-      border: 1px solid rgba(134, 88, 255, 0.3);
-      backdrop-filter: blur(10px);
-      font-weight: 500;
-    }
-
-    .memory-node:hover .memory-label {
-      opacity: 1;
-      transform: translateX(-50%) translateY(-5px);
-    }
-
-    /* Theme-based colors */
-    .memory-node[data-theme="family"] {
-      box-shadow:
-        0 0 30px rgba(255, 105, 135, 0.4),
-        0 0 60px rgba(255, 105, 135, 0.2);
-    }
-
-    .memory-node[data-theme="travel"] {
-      box-shadow:
-        0 0 30px rgba(52, 211, 153, 0.4),
-        0 0 60px rgba(52, 211, 153, 0.2);
-    }
-
-    .memory-node[data-theme="recent"] {
-      box-shadow:
-        0 0 30px rgba(96, 165, 250, 0.4),
-        0 0 60px rgba(96, 165, 250, 0.2);
-    }
-
-    .memory-node[data-theme="special"] {
-      box-shadow:
-        0 0 30px rgba(251, 191, 36, 0.4),
-        0 0 60px rgba(251, 191, 36, 0.2);
-    }
-
-    .constellation-controls {
-      color: white;
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-    }
-
-    .constellation-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 15px;
-    }
-
-    .constellation-header h3 {
-      margin: 0;
-      font-size: 18px;
-      font-weight: 600;
-    }
-
-    .constellation-close {
-      background: none;
-      border: none;
-      color: white;
-      font-size: 18px;
-      cursor: pointer;
-      padding: 5px;
-      border-radius: 50%;
-      width: 30px;
-      height: 30px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      transition: background 0.3s ease;
-    }
-
-    .constellation-close:hover {
-      background: rgba(255, 255, 255, 0.1);
-    }
-
-    .constellation-themes {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 8px;
-    }
-
-    .theme-filter {
-      background: rgba(134, 88, 255, 0.2);
-      border: 1px solid rgba(134, 88, 255, 0.4);
-      color: white;
-      padding: 8px 12px;
-      border-radius: 20px;
-      cursor: pointer;
-      font-size: 12px;
-      transition: all 0.3s ease;
-    }
-
-    .theme-filter.active {
-      background: rgba(134, 88, 255, 0.4);
-      border-color: rgba(134, 88, 255, 0.6);
-    }
-
-    .theme-filter.disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-
-    .theme-filter:hover:not(.disabled) {
-      background: rgba(134, 88, 255, 0.3);
-      transform: translateY(-2px);
-    }
-
-    /* Memory Dialog Styles */
-    .memory-dialog {
-      background: rgba(17, 17, 27, 0.95);
-      border: 1px solid rgba(134, 88, 255, 0.3);
-      border-radius: 16px;
-      padding: 0;
-      max-width: 800px;
-      width: 90%;
-      max-height: 80vh;
-      overflow: hidden;
-      backdrop-filter: blur(20px);
-      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
-      transform: scale(0.9);
-      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    }
-
-    .memory-dialog-overlay[style*="opacity: 1"] .memory-dialog {
-      transform: scale(1);
-    }
-
-    .memory-dialog-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 24px 32px;
-      border-bottom: 1px solid rgba(134, 88, 255, 0.2);
-      background: linear-gradient(135deg, rgba(134, 88, 255, 0.1), rgba(240, 147, 251, 0.1));
-    }
-
-    .memory-title {
-      margin: 0;
-      font-size: 24px;
-      font-weight: 600;
-      color: white;
-      text-shadow: 0 0 10px rgba(134, 88, 255, 0.5);
-    }
-
-    .memory-close {
-      background: none;
-      border: none;
-      color: white;
-      font-size: 24px;
-      cursor: pointer;
-      padding: 8px;
-      border-radius: 50%;
-      width: 40px;
-      height: 40px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      transition: background 0.3s ease;
-    }
-
-    .memory-close:hover {
-      background: rgba(255, 255, 255, 0.1);
-    }
-
-    .memory-content {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 32px;
-      padding: 32px;
-    }
-
-    .memory-slideshow {
-      display: flex;
-      flex-direction: column;
-      gap: 16px;
-    }
-
-    .slideshow-container {
-      aspect-ratio: 16/9;
-      border-radius: 12px;
-      overflow: hidden;
-      background: rgba(134, 88, 255, 0.1);
-      border: 1px solid rgba(134, 88, 255, 0.2);
-    }
-
-    .memory-slide {
-      width: 100%;
-      height: 100%;
-      display: none;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .memory-slide.active {
-      display: flex;
-    }
-
-    .media-placeholder {
-      text-align: center;
-      color: rgba(255, 255, 255, 0.7);
-    }
-
-    .media-icon {
-      font-size: 48px;
-      display: block;
-      margin-bottom: 16px;
-    }
-
-    .slideshow-controls {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 16px;
-    }
-
-    .slide-btn {
-      background: rgba(134, 88, 255, 0.2);
-      border: 1px solid rgba(134, 88, 255, 0.4);
-      color: white;
-      padding: 8px 12px;
-      border-radius: 8px;
-      cursor: pointer;
-      font-size: 18px;
-      transition: all 0.3s ease;
-    }
-
-    .slide-btn:hover {
-      background: rgba(134, 88, 255, 0.4);
-      transform: scale(1.05);
-    }
-
-    .slide-indicator {
-      color: rgba(255, 255, 255, 0.8);
-      font-size: 14px;
-      font-weight: 500;
-    }
-
-    .memory-details {
-      display: flex;
-      flex-direction: column;
-      gap: 24px;
-    }
-
-    .memory-summary h3 {
-      margin: 0 0 12px 0;
-      font-size: 18px;
-      font-weight: 600;
-      color: white;
-    }
-
-    .memory-summary p {
-      margin: 0;
-      line-height: 1.6;
-      color: rgba(255, 255, 255, 0.8);
-    }
-
-    .memory-metadata {
-      display: flex;
-      flex-direction: column;
-      gap: 12px;
-    }
-
-    .metadata-item {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 8px 0;
-      border-bottom: 1px solid rgba(134, 88, 255, 0.1);
-    }
-
-    .metadata-item .label {
-      font-weight: 500;
-      color: rgba(255, 255, 255, 0.7);
-    }
-
-    .metadata-item .value {
-      font-weight: 600;
-      color: white;
-    }
-
-    .value.theme-family { color: rgba(255, 105, 135, 1); }
-    .value.theme-travel { color: rgba(52, 211, 153, 1); }
-    .value.theme-recent { color: rgba(96, 165, 250, 1); }
-    .value.theme-special { color: rgba(251, 191, 36, 1); }
-
-    .memory-actions {
-      display: flex;
-      justify-content: flex-end;
-      gap: 12px;
-      padding: 24px 32px;
-      border-top: 1px solid rgba(134, 88, 255, 0.2);
-      background: rgba(134, 88, 255, 0.05);
-    }
-
-    .action-btn {
-      padding: 12px 24px;
-      border-radius: 8px;
-      font-weight: 500;
-      cursor: pointer;
-      transition: all 0.3s ease;
-      border: none;
-    }
-
-    .action-btn.secondary {
-      background: rgba(134, 88, 255, 0.2);
-      color: white;
-      border: 1px solid rgba(134, 88, 255, 0.4);
-    }
-
-    .action-btn.secondary:hover {
-      background: rgba(134, 88, 255, 0.3);
-      transform: translateY(-2px);
-    }
-
-    .action-btn.primary {
-      background: linear-gradient(135deg, rgba(134, 88, 255, 1), rgba(240, 147, 251, 0.8));
-      color: white;
-      border: none;
-    }
-
-    .action-btn.primary:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 8px 25px rgba(134, 88, 255, 0.4);
-    }
-
-    .radial-item:nth-child(1) { animation-delay: 0s; }
-    .radial-item:nth-child(2) { animation-delay: 0.5s; }
-    .radial-item:nth-child(3) { animation-delay: 1s; }
-    .radial-item:nth-child(4) { animation-delay: 1.5s; }
-    .radial-item:nth-child(5) { animation-delay: 2s; }
-    .radial-item:nth-child(6) { animation-delay: 2.5s; }
-    .radial-item:nth-child(7) { animation-delay: 3s; }
-    .radial-item:nth-child(8) { animation-delay: 3.5s; }
-
-    .radial-item:hover {
-      background: rgba(134, 88, 255, 0.3);
-      border-color: var(--emma-purple);
-      transform: scale(1.15);
-      box-shadow: 0 0 40px rgba(134, 88, 255, 0.6);
-      animation-play-state: paused;
-    }
-
-    .radial-item.pulsing {
-      animation: pulse 2s ease-in-out infinite;
-    }
-
-    @keyframes pulse {
-      0%, 100% {
-        box-shadow: 0 0 30px rgba(134, 88, 255, 0.2);
-        transform: scale(1);
-      }
-      50% {
-        box-shadow: 0 0 50px rgba(134, 88, 255, 0.5);
-        transform: scale(1.05);
-      }
-    }
-
-    .radial-item-icon {
-      font-size: 32px;
-      margin-bottom: 4px;
-      filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.3));
-    }
-
-    .radial-item-label {
-      font-size: 12px;
-      text-align: center;
-      opacity: 0.9;
-      font-weight: 500;
-    }
-
-    .node-connection {
-      stroke: rgba(134, 88, 255, 0.3);
-      stroke-width: 2;
-      fill: none;
-      stroke-dasharray: 5, 5;
-      animation: dash 20s linear infinite;
-    }
-
-    @keyframes dash {
-      to { stroke-dashoffset: -100; }
-    }
-
-    /* Info Panels */
-    .info-panel {
-      position: fixed;
-      background: var(--emma-glass);
-      backdrop-filter: blur(20px);
-      border: 1px solid var(--emma-border);
-      border-radius: 20px;
-      padding: 24px;
-      min-width: 280px;
-      opacity: 0;
-      transform: translateY(20px);
-      transition: all 0.4s ease;
-      z-index: 10;
-    }
-
-    .info-panel.active {
-      opacity: 1;
-      transform: translateY(0);
-    }
-
-    /* Fade panels and header text when neural menu is active */
-    body.menu-active .info-panel {
-      opacity: 0;
-      transform: translateY(20px) scale(0.9);
-      filter: blur(2px);
-      pointer-events: none;
-    }
-
-    body.menu-active .welcome-text {
-      opacity: 0 !important;
-      transform: translateY(-20px) scale(0.9);
-      filter: blur(3px);
-      pointer-events: none;
-      visibility: hidden;
-    }
-
-    body.menu-active .voice-indicator {
-      opacity: 0;
-      transform: translateX(-50%) translateY(20px) scale(0.9);
-      filter: blur(2px);
-      pointer-events: none;
-    }
-
-    body.menu-active .constellation-canvas {
-      opacity: 0;
-      filter: blur(3px);
-      pointer-events: none;
-    }
-
-    /* Constellation Mode - Hide ALL UI except constellation */
-    body.constellation-active .info-panel,
-    body.constellation-active .welcome-text,
-    body.constellation-active .voice-indicator,
-    body.constellation-active .constellation-canvas,
-    body.constellation-active .quick-stats {
-      opacity: 0 !important;
-      visibility: hidden !important;
-      pointer-events: none !important;
-      transition: all 0.5s ease;
-    }
-
-    /* Keep only constellation controls and radial menu visible */
-    body.constellation-active .constellation-controls,
-    body.constellation-active .radial-menu {
-      opacity: 1 !important;
-      visibility: visible !important;
-      pointer-events: all !important;
-    }
-
-    /* Right side panel stack */
-    .info-panel.right-stack {
-      position: fixed;
-      right: 24px;
-      width: 320px;
-      min-width: 320px;
-      max-width: 320px;
-      height: 180px;
-      min-height: 180px;
-      max-height: 180px;
-    }
-
-    #daily-brief.right-stack {
-      top: 24px;
-    }
-
-    #ai-insights.right-stack {
-      top: calc(24px + 180px + 16px);
-    }
-
-    #quick-actions.right-stack {
-      top: calc(24px + 180px + 16px + 180px + 16px);
-    }
-
-    /* Legacy positioning for any remaining panels */
-    .info-panel.top-left {
-      top: 24px;
-      left: 24px;
-    }
-
-    .info-panel.top-right {
-      top: 24px;
-      right: 24px;
-    }
-
-    .info-panel.bottom-left {
-      bottom: 24px;
-      left: 24px;
-    }
-
-    .info-panel.bottom-right {
-      bottom: 24px;
-      right: 24px;
-    }
-
-    .panel-header {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      margin-bottom: 16px;
-      padding-bottom: 12px;
-      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-    }
-
-    /* Adjust content for right stack panels */
-    .info-panel.right-stack .panel-content {
-      overflow: hidden;
-      height: calc(100% - 70px); /* Account for header height */
-    }
-
-    .info-panel.right-stack .panel-content p {
-      font-size: 14px;
-      line-height: 1.4;
-      margin-bottom: 8px;
-    }
-
-    .panel-icon {
-      font-size: 24px;
-    }
-
-    .panel-title {
-      font-size: 18px;
-      font-weight: 600;
-    }
-
-    .panel-content {
-      font-size: 14px;
-      line-height: 1.6;
-      color: var(--emma-text-secondary);
-    }
-
-    /* Memory Constellation Background */
-    .constellation-canvas {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      z-index: 1;
-      opacity: 0.3;
-      pointer-events: none;
-    }
-
-    /* Voice Activation Indicator */
-    .voice-indicator {
-      position: fixed;
-      bottom: 40px;
-      left: 50%;
-      transform: translateX(-50%);
-      background: var(--emma-glass);
-      backdrop-filter: blur(20px);
-      border: 1px solid var(--emma-border);
-      border-radius: 30px;
-      padding: 12px 24px;
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      opacity: 0;
-      transform: translateX(-50%) translateY(20px);
-      transition: all 0.3s ease;
-      z-index: 10;
-    }
-
-    .voice-indicator.active {
-      opacity: 1;
-      transform: translateX(-50%) translateY(0);
-    }
-
-    .voice-waves {
-      display: flex;
-      gap: 3px;
-      align-items: center;
-    }
-
-    .voice-wave {
-      width: 3px;
-      height: 20px;
-      background: var(--emma-purple);
-      border-radius: 3px;
-      animation: wave 1s ease-in-out infinite;
-    }
-
-    .voice-wave:nth-child(2) { animation-delay: 0.1s; height: 30px; }
-    .voice-wave:nth-child(3) { animation-delay: 0.2s; height: 25px; }
-    .voice-wave:nth-child(4) { animation-delay: 0.3s; height: 35px; }
-    .voice-wave:nth-child(5) { animation-delay: 0.4s; height: 20px; }
-
-    @keyframes wave {
-      0%, 100% { transform: scaleY(0.5); opacity: 0.5; }
-      50% { transform: scaleY(1); opacity: 1; }
-    }
-
-    /* Quick Stats */
-    .quick-stats {
-      position: absolute;
-      bottom: -80px;
-      left: 50%;
-      transform: translateX(-50%);
-      display: flex;
-      gap: 32px;
-      opacity: 0;
-      transition: opacity 0.4s ease;
-    }
-
-    .command-center:hover .quick-stats {
-      opacity: 1;
-    }
-
-    .stat-item {
-      text-align: center;
-      cursor: pointer;
-      transition: transform 0.2s ease;
-    }
-
-    .stat-item:hover {
-      transform: translateY(-4px);
-    }
-
-    .stat-value {
-      font-size: 28px;
-      font-weight: 700;
-      background: var(--emma-gradient-1);
-      background-clip: text;
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-    }
-
-    .stat-label {
-      font-size: 12px;
-      color: var(--emma-text-tertiary);
-      text-transform: uppercase;
-      letter-spacing: 1px;
-      margin-top: 4px;
-    }
-
-    /* Notification Toast */
-    .toast {
-      position: fixed;
-      top: 24px;
-      right: 24px;
-      background: var(--emma-glass);
-      backdrop-filter: blur(20px);
-      border: 1px solid var(--emma-border);
-      border-radius: 12px;
-      padding: 16px 24px;
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      opacity: 0;
-      transform: translateX(400px);
-      transition: all 0.4s ease;
-      z-index: 1000;
-    }
-
-    .toast.show {
-      opacity: 1;
-      transform: translateX(0);
-    }
-
-    .toast.success { border-color: var(--emma-success); }
-    .toast.error { border-color: var(--emma-error); }
-    .toast.info { border-color: var(--emma-blue); }
-
-    /* Loading State */
-    .loading-overlay {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background: rgba(0, 0, 0, 0.8);
-      backdrop-filter: blur(10px);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      z-index: 9999;
-      opacity: 0;
-      pointer-events: none;
-      transition: opacity 0.3s ease;
-    }
-
-    .loading-overlay.active {
-      opacity: 1;
-      pointer-events: all;
-    }
-
-    .loading-content {
-      text-align: center;
-    }
-
-    .loading-orb {
-      width: 80px;
-      height: 80px;
-      margin: 0 auto 20px;
-      position: relative;
-      /* Emma's orb will be rendered here via WebGL */
-    }
-
-    /* Fallback for when WebGL orb isn't available */
-    .loading-orb-fallback {
-      width: 100%;
-      height: 100%;
-      background: radial-gradient(circle at 30% 30%, #8A5EFA, #764ba2, #f093fb);
-      border-radius: 50%;
-      animation: loading-pulse 1.5s ease-in-out infinite;
-      box-shadow: 0 0 30px rgba(138, 94, 250, 0.4);
-    }
-
-    @keyframes loading-pulse {
-      0%, 100% { transform: scale(1); opacity: 0.8; }
-      50% { transform: scale(1.2); opacity: 1; }
-    }
-
-    /* Welcome Text */
-    .welcome-text {
-      position: fixed;
-      top: 40px;
-      left: 50%;
-      transform: translateX(-50%);
-      text-align: center;
-      opacity: 0;
-      animation: fade-in 1s ease-out 0.5s forwards;
-    }
-
-    .welcome-title {
-      font-size: 48px;
-      font-weight: 200;
-      margin-bottom: 8px;
-      background: var(--emma-gradient-1);
-      background-clip: text;
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-    }
-
-    .welcome-subtitle {
-      font-size: 18px;
-      color: var(--emma-text-secondary);
-      font-weight: 400;
-    }
-
-    @keyframes fade-in {
-      to { opacity: 1; }
-    }
-
-    /* Vault Modal Styles */
-    .vault-modal {
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background: rgba(0, 0, 0, 0.8);
-      backdrop-filter: blur(10px);
-      z-index: 10000;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 20px;
-      opacity: 0;
-      transition: opacity 0.3s ease;
-    }
-
-    .vault-modal.show {
-      opacity: 1;
-    }
-
-    .vault-modal-content {
-      background: linear-gradient(135deg, rgba(26, 16, 51, 0.98), rgba(45, 27, 105, 0.98));
-      border: 1px solid rgba(134, 88, 255, 0.3);
-      border-radius: 24px;
-      max-width: 600px;
-      width: 100%;
-      max-height: 90vh;
-      overflow-y: auto;
-      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
-      transform: scale(0.9);
-      transition: transform 0.3s ease;
-    }
-
-    .vault-modal.show .vault-modal-content {
-      transform: scale(1);
-    }
-
-    .vault-modal-header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 32px 32px 24px;
-      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-      background: linear-gradient(135deg, rgba(134, 88, 255, 0.1), rgba(240, 147, 251, 0.1));
-    }
-
-    .vault-header-content {
-      display: flex;
-      align-items: center;
-      gap: 20px;
-    }
-
-    .vault-icon {
-      width: 64px;
-      height: 64px;
-      background: linear-gradient(135deg, #8658ff, #f093fb);
-      border-radius: 16px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 32px;
-    }
-
-    .vault-title h2 {
-      margin: 0 0 4px 0;
-      font-size: 28px;
-      font-weight: 700;
-      color: var(--emma-text);
-    }
-
-    .vault-title p {
-      margin: 0;
-      color: var(--emma-text-secondary);
-      font-size: 16px;
-    }
-
-    .vault-close {
-      width: 48px;
-      height: 48px;
-      border: none;
-      background: rgba(255, 255, 255, 0.1);
-      color: var(--emma-text);
-      border-radius: 12px;
-      font-size: 24px;
-      cursor: pointer;
-      transition: all 0.2s ease;
-    }
-
-    .vault-close:hover {
-      background: rgba(255, 255, 255, 0.2);
-    }
-
-    .vault-modal-body {
-      padding: 32px;
-    }
-
-    .vault-status-section {
-      margin-bottom: 32px;
-    }
-
-    .vault-status-card {
-      display: flex;
-      align-items: center;
-      gap: 20px;
-      padding: 24px;
-      background: rgba(255, 255, 255, 0.05);
-      border: 1px solid rgba(255, 255, 255, 0.1);
-      border-radius: 16px;
-      transition: all 0.3s ease;
-    }
-
-    .vault-status-card.unlocked {
-      border-color: rgba(74, 222, 128, 0.3);
-      background: rgba(74, 222, 128, 0.1);
-    }
-
-    .vault-btn {
-      padding: 12px 24px;
-      border: none;
-      border-radius: 12px;
-      font-size: 16px;
-      font-weight: 600;
-      cursor: pointer;
-      transition: all 0.3s ease;
-      display: inline-flex;
-      align-items: center;
-      gap: 8px;
-    }
-
-    .vault-btn.primary {
-      background: linear-gradient(135deg, #8658ff, #f093fb);
-      color: white;
-    }
-
-    .vault-btn.primary:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 8px 24px rgba(134, 88, 255, 0.4);
-    }
-
-    .vault-btn.secondary {
-      background: rgba(255, 255, 255, 0.1);
-      color: var(--emma-text);
-      border: 1px solid rgba(255, 255, 255, 0.2);
-    }
-
-    .vault-btn.secondary:hover {
-      background: rgba(255, 255, 255, 0.2);
-    }
-
-    .vault-btn.small {
-      padding: 8px 16px;
-      font-size: 14px;
-    }
-
-    .vault-unlock-section {
-      margin-bottom: 32px;
-      padding: 24px;
-      background: rgba(255, 255, 255, 0.03);
-      border-radius: 16px;
-      border: 1px solid rgba(255, 255, 255, 0.1);
-    }
-
-    .unlock-form label {
-      display: block;
-      margin-bottom: 8px;
-      color: var(--emma-text);
-      font-weight: 600;
-    }
-
-    .unlock-form input {
-      width: 100%;
-      padding: 16px 20px;
-      background: rgba(255, 255, 255, 0.1);
-      border: 1px solid rgba(255, 255, 255, 0.2);
-      border-radius: 12px;
-      color: var(--emma-text);
-      font-size: 16px;
-      margin-bottom: 20px;
-      text-align: center;
-      letter-spacing: 2px;
-    }
-
-    .unlock-form input:focus {
-      outline: none;
-      border-color: var(--emma-purple);
-      box-shadow: 0 0 0 3px rgba(134, 88, 255, 0.2);
-    }
-
-    .unlock-actions {
-      display: flex;
-      gap: 12px;
-      justify-content: center;
-    }
-
-    /* Create Vault Section */
-    .vault-create-section {
-      margin-bottom: 32px;
-      padding: 24px;
-      background: rgba(16, 185, 129, 0.1);
-      border-radius: 16px;
-      border: 1px solid rgba(16, 185, 129, 0.3);
-    }
-
-    .create-vault-card {
-      text-align: center;
-    }
-
-    .create-vault-icon {
-      font-size: 48px;
-      margin-bottom: 16px;
-    }
-
-    .create-vault-content h3 {
-      color: var(--emma-text);
-      margin-bottom: 8px;
-      font-size: 20px;
-    }
-
-    .create-vault-content p {
-      color: var(--emma-text-secondary);
-      margin-bottom: 20px;
-      font-size: 16px;
-    }
-
-    .vault-qr-section h3 {
-      margin: 0 0 8px 0;
-      color: var(--emma-text);
-      font-size: 20px;
-    }
-
-    .vault-qr-section p {
-      margin: 0 0 20px 0;
-      color: var(--emma-text-secondary);
-    }
-
-    .qr-option-card {
-      display: flex;
-      align-items: center;
-      gap: 16px;
-      padding: 20px;
-      background: rgba(255, 255, 255, 0.05);
-      border: 1px solid rgba(255, 255, 255, 0.1);
-      border-radius: 12px;
-      transition: all 0.3s ease;
-      cursor: pointer;
-    }
-
-    .qr-option-card:hover {
-      border-color: rgba(134, 88, 255, 0.3);
-      background: rgba(134, 88, 255, 0.1);
-    }
-
-    .qr-option-icon {
-      font-size: 32px;
-      min-width: 32px;
-    }
-
-    .qr-option-content {
-      flex: 1;
-    }
-
-    .qr-option-content h4 {
-      margin: 0 0 4px 0;
-      color: var(--emma-text);
-      font-size: 16px;
-    }
-
-    .qr-option-content p {
-      margin: 0;
-      color: var(--emma-text-secondary);
-      font-size: 14px;
-    }
-
-    .vault-actions-section {
-      border-top: 1px solid rgba(255, 255, 255, 0.1);
-      padding-top: 24px;
-    }
-
-    /* Responsive Design */
-    @media (max-width: 768px) {
-      .radial-menu {
-        width: 320px;
-        height: 320px;
-      }
-
-      .radial-item {
-        width: 60px;
-        height: 60px;
-      }
-
-      .radial-item-icon {
-        font-size: 24px;
-      }
-
-      .info-panel,
-      .info-panel.right-stack {
-        position: fixed;
-        bottom: 0 !important;
-        left: 0 !important;
-        right: 0 !important;
-        top: auto !important;
-        width: 100% !important;
-        min-width: 100% !important;
-        max-width: 100% !important;
-        height: auto !important;
-        min-height: auto !important;
-        max-height: 50vh !important;
-        border-radius: 20px 20px 0 0;
-        overflow-y: auto;
-      }
-
-      /* Stack panels vertically on mobile */
-      #daily-brief.right-stack { transform: translateY(0); }
-      #ai-insights.right-stack { transform: translateY(0); }
-      #quick-actions.right-stack { transform: translateY(0); }
-    }
-
-    /* Import Voice Capture Premium Styles */
-
-    /* Person Summary Modal Styles */
-    .person-summary-modal-overlay {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background: rgba(0, 0, 0, 0.8);
-      backdrop-filter: blur(10px);
-      -webkit-backdrop-filter: blur(10px);
-      z-index: 10000;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      opacity: 0;
-      visibility: hidden;
-      transition: all 0.3s ease;
-    }
-
-    .person-summary-modal-overlay.active {
-      opacity: 1;
-      visibility: visible;
-    }
-
-    .person-summary-modal {
-      background: rgba(255, 255, 255, 0.1);
-      backdrop-filter: blur(30px);
-      -webkit-backdrop-filter: blur(30px);
-      border: 1px solid rgba(255, 255, 255, 0.2);
-      border-radius: 24px;
-      padding: 32px;
-      width: 90%;
-      max-width: 500px;
-      max-height: 80vh;
-      overflow-y: auto;
-      transform: scale(0.9) translateY(20px);
-      transition: transform 0.3s ease;
-      position: relative;
-    }
-
-    .person-summary-modal .modal-close {
-      position: absolute;
-      top: 16px;
-      right: 16px;
-      width: 32px;
-      height: 32px;
-      border-radius: 50%;
-      background: rgba(255, 255, 255, 0.1);
-      border: 1px solid rgba(255, 255, 255, 0.2);
-      color: white;
-      font-size: 18px;
-      font-weight: 300;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      transition: all 0.3s ease;
-      backdrop-filter: blur(10px);
-      -webkit-backdrop-filter: blur(10px);
-    }
-
-    .person-summary-modal .modal-close:hover {
-      background: rgba(255, 255, 255, 0.2);
-      border-color: rgba(255, 255, 255, 0.4);
-      transform: scale(1.1);
-    }
-
-    .person-summary-modal-overlay.active .person-summary-modal {
-      transform: scale(1) translateY(0);
-    }
-
-    .person-summary-header {
-      display: flex;
-      align-items: center;
-      gap: 20px;
-      margin-bottom: 32px;
-      padding-bottom: 20px;
-      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-    }
-
-    .person-summary-avatar {
-      width: 80px;
-      height: 80px;
-      border-radius: 50%;
-      background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: white;
-      font-weight: 700;
-      font-size: 32px;
-      overflow: hidden;
-    }
-
-    .person-summary-info {
-      flex: 1;
-    }
-
-    .person-summary-name {
-      font-size: 1.8rem;
-      font-weight: 600;
-      color: white;
-      margin: 0 0 8px 0;
-    }
-
-    .person-summary-relation {
-      font-size: 1rem;
-      color: rgba(255, 255, 255, 0.7);
-      margin: 0 0 4px 0;
-      text-transform: capitalize;
-    }
-
-    .person-summary-contact {
-      font-size: 0.9rem;
-      color: rgba(255, 255, 255, 0.5);
-      margin: 0;
-    }
-
-    .summary-section-title {
-      font-size: 1.2rem;
-      font-weight: 600;
-      color: white;
-      margin-bottom: 16px;
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
-
-    .summary-section-title::before {
-      content: '';
-      width: 3px;
-      height: 20px;
-      background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
-      border-radius: 2px;
-    }
-
-    .connected-memories {
-      display: flex;
-      flex-direction: column;
-      gap: 12px;
-      margin-bottom: 24px;
-    }
-
-    .connected-memory-item {
-      display: flex;
-      align-items: center;
-      gap: 16px;
-      padding: 16px;
-      background: rgba(255, 255, 255, 0.05);
-      border-radius: 12px;
-      cursor: pointer;
-      transition: all 0.3s ease;
-    }
-
-    .connected-memory-item:hover {
-      background: rgba(255, 255, 255, 0.1);
-      transform: translateY(-2px);
-    }
-
-    .memory-preview {
-      width: 50px;
-      height: 50px;
-      border-radius: 8px;
-      background: rgba(255, 255, 255, 0.1);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      overflow: hidden;
-      font-size: 20px;
-    }
-
-    .memory-preview img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-      border-radius: 8px;
-    }
-
-    .memory-info {
-      flex: 1;
-    }
-
-    .memory-title {
-      font-size: 1rem;
-      font-weight: 500;
-      color: white;
-      margin-bottom: 4px;
-    }
-
-    .memory-date {
-      font-size: 0.85rem;
-      color: rgba(255, 255, 255, 0.6);
-    }
-
-    .no-memories {
-      text-align: center;
-      padding: 40px 20px;
-      color: rgba(255, 255, 255, 0.5);
-      font-style: italic;
-    }
-
-    .person-summary-actions {
-      display: flex;
-      gap: 12px;
-    }
-
-    .person-summary-actions .btn {
-      flex: 1;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 8px;
-      padding: 12px 16px;
-      border: none;
-      border-radius: 12px;
-      font-weight: 600;
-      cursor: pointer;
-      transition: all 0.3s ease;
-    }
-
-    .person-summary-actions .btn-primary {
-      background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
-      color: white;
-    }
-
-    .person-summary-actions .btn-primary:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 10px 20px rgba(139, 92, 246, 0.3);
-    }
-
-    .person-summary-actions .btn-secondary {
-      background: rgba(255, 255, 255, 0.1);
-      color: rgba(255, 255, 255, 0.8);
-      border: 1px solid rgba(255, 255, 255, 0.2);
-    }
-
-    .person-summary-actions .btn-secondary:hover {
-      background: rgba(255, 255, 255, 0.2);
-      color: white;
-    }
-  </style>
-</head>
-<body>
-  <!-- Aurora Background -->
-  <div class="aurora-bg">
-    <div class="aurora"></div>
-  </div>
-
-  <!-- Memory Constellation Canvas -->
-  <canvas id="constellation" class="constellation-canvas"></canvas>
-
-  <!-- Welcome Text -->
-  <div class="welcome-text">
-    <h1 class="welcome-title">emma</h1>
-    <p class="welcome-subtitle">Your Intelligent Memory Companion</p>
-  </div>
-
-  <!-- Neural Network Background -->
-  <div class="neural-network">
-    <canvas id="neural-canvas" class="neural-canvas"></canvas>
-  </div>
-
-  <!-- Main Dashboard -->
-  <div class="dashboard">
-    <div class="command-center">
-      <!-- Central Emma Orb (WebGL) -->
-      <div class="emma-orb-container" id="emma-orb">
-        <div class="emma-orb-webgl" id="webgl-orb-container">
-          <!-- WebGL Emma Orb will be inserted here -->
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <!-- Radial Menu (Now floating neural nodes) -->
-  <div class="radial-menu" id="radial-menu">
-        <div class="radial-item" data-action="capture">
-          <div class="radial-item-icon">🎤</div>
-          <div class="radial-item-label">Capture</div>
-        </div>
-        <div class="radial-item" data-action="vault" id="vault-node">
-          <div class="radial-item-icon">🔒</div>
-          <div class="radial-item-label">Vault</div>
-        </div>
-        <div class="radial-item" data-action="memories">
-          <div class="radial-item-icon">💝</div>
-          <div class="radial-item-label">Memories</div>
-        </div>
-        <div class="radial-item" data-action="people">
-          <div class="radial-item-icon">👥</div>
-          <div class="radial-item-label">People</div>
-        </div>
-        <div class="radial-item" data-action="search">
-          <div class="radial-item-icon">🔍</div>
-          <div class="radial-item-label">Search</div>
-        </div>
-        <div class="radial-item" data-action="share">
-          <div class="radial-item-icon">📱</div>
-          <div class="radial-item-label">Share</div>
-        </div>
-        <div class="radial-item" data-action="chat">
-          <div class="radial-item-icon">💬</div>
-          <div class="radial-item-label">Chat</div>
-        </div>
-        <div class="radial-item" data-action="settings">
-          <div class="radial-item-icon">⚙️</div>
-          <div class="radial-item-label">Settings</div>
-        </div>
-      </div>
-
-      <!-- Quick Stats -->
-      <div class="quick-stats">
-        <div class="stat-item" data-stat="memories">
-          <div class="stat-value" id="stat-memories">0</div>
-          <div class="stat-label">Memories</div>
-        </div>
-        <div class="stat-item" data-stat="people">
-          <div class="stat-value" id="stat-people">0</div>
-          <div class="stat-label">People</div>
-        </div>
-
-        <!-- Revolutionary Migration Button -->
-        <div class="stat-item revolution-upgrade" onclick="openMigrationPage()" style="background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(236, 72, 153, 0.2)); border: 2px solid rgba(139, 92, 246, 0.4); cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden;">
-          <div class="stat-value" style="font-size: 1.2rem; color: #8b5cf6;">🌟</div>
-          <div class="stat-label" style="color: #ec4899; font-weight: 600; font-size: 0.8rem;">Upgrade to .emma</div>
-          <div style="position: absolute; top: 4px; right: 4px; background: linear-gradient(135deg, #8b5cf6, #ec4899); color: white; font-size: 0.6rem; padding: 2px 6px; border-radius: 8px; font-weight: 600;">NEW</div>
-        </div>
-        <div class="stat-item" data-stat="today">
-          <div class="stat-value" id="stat-today">0</div>
-          <div class="stat-label">Today</div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <!-- Right Side Panel Stack -->
-  <div class="info-panel right-stack" id="daily-brief">
-    <div class="panel-header">
-      <div class="panel-icon">📅</div>
-      <div class="panel-title">Daily Brief</div>
-    </div>
-    <div class="panel-content">
-      <p>Good morning! You have 3 memories from this day last year.</p>
-      <p style="margin-top: 12px; font-size: 13px; opacity: 0.8;">
-        • Meeting with Sarah about the project<br>
-        • Family dinner at Marina Bay<br>
-        • Completed the meditation course
-      </p>
-    </div>
-  </div>
-
-  <div class="info-panel right-stack" id="ai-insights">
-    <div class="panel-header">
-      <div class="panel-icon">💡</div>
-      <div class="panel-title">AI Insights</div>
-    </div>
-    <div class="panel-content">
-      <p>I noticed you've been capturing more creative moments lately. Your photography memories have increased by 40% this month!</p>
-    </div>
-  </div>
-
-  <div class="info-panel right-stack" id="quick-actions">
-    <div class="panel-header">
-      <div class="panel-icon">⚡</div>
-      <div class="panel-title">Quick Actions</div>
-    </div>
-    <div class="panel-content">
-      <p>Press <kbd>Space</kbd> to activate voice capture<br>
-      Press <kbd>Cmd+K</kbd> to search memories<br>
-      Say "Hey Emma" to start</p>
-    </div>
-  </div>
-
-  <!-- Voice Indicator -->
-  <div class="voice-indicator" id="voice-indicator">
-    <div class="voice-waves">
-      <div class="voice-wave"></div>
-      <div class="voice-wave"></div>
-      <div class="voice-wave"></div>
-      <div class="voice-wave"></div>
-      <div class="voice-wave"></div>
-    </div>
-    <span>Listening...</span>
-  </div>
-
-  <!-- Loading Overlay -->
-  <div class="loading-overlay" id="loading">
-    <div class="loading-content">
-      <div class="loading-orb"></div>
-      <p style="color: var(--emma-text-secondary);">Loading Emma...</p>
-    </div>
-  </div>
-
-  <!-- Vault Management Modal -->
-  <div id="vault-modal" class="vault-modal" style="display: none;">
-    <div class="vault-modal-content">
-      <div class="vault-modal-header">
-        <div class="vault-header-content">
-          <div class="vault-icon">🔐</div>
-          <div class="vault-title">
-            <h2>Emma Memory Vault</h2>
-            <p id="vault-subtitle">Secure access to your encrypted memories</p>
-          </div>
-        </div>
-        <button class="vault-close" id="close-vault-modal">×</button>
-      </div>
-
-      <div class="vault-modal-body">
-        <!-- Vault Status Section -->
-        <div class="vault-status-section">
-          <div class="vault-status-card" id="vault-status-card">
-            <div class="status-icon" id="status-icon">🔒</div>
-            <div class="status-info">
-              <h3 id="status-title">Vault Locked</h3>
-              <p id="status-description">Enter your vault code to access your memories</p>
-            </div>
-            <div class="status-action">
-              <button id="vault-action-btn" class="vault-btn primary">Unlock Vault</button>
-            </div>
-          </div>
-        </div>
-
-        <!-- Unlock Form Section -->
-        <div class="vault-unlock-section" id="unlock-section" style="display: none;">
-          <div class="unlock-form">
-            <label for="vault-password">Vault Code</label>
-            <input type="password" id="vault-password" placeholder="Enter your vault code" autocomplete="current-password">
-            <div class="unlock-actions">
-              <button id="unlock-btn" class="vault-btn primary">🔓 Unlock</button>
-              <button id="cancel-unlock-btn" class="vault-btn secondary">Cancel</button>
-            </div>
-          </div>
-        </div>
-
-        <!-- Create New Vault Section -->
-        <div class="vault-create-section" id="create-vault-section" style="display: none;">
-          <div class="create-vault-card">
-            <div class="create-vault-icon">🆕</div>
-            <div class="create-vault-content">
-              <h3>No Vault Found</h3>
-              <p>Create your first Emma memory vault to get started</p>
-              <button id="create-vault-btn" class="vault-btn primary">
-                🔐 Create New Vault
-              </button>
-            </div>
-          </div>
-        </div>
-
-        <!-- QR Sharing Section -->
-        <div class="vault-qr-section" id="qr-section">
-          <h3>📱 Quick Share</h3>
-          <p>Generate QR codes to securely share your vault or memories</p>
-
-          <div class="qr-options">
-            <div class="qr-option-card" id="generate-vault-qr-dashboard">
-              <div class="qr-option-icon">🔐</div>
-              <div class="qr-option-content">
-                <h4>Share Vault</h4>
-                <p>Time-limited access to your vault</p>
-              </div>
-              <div class="qr-option-action">
-                <button class="vault-btn secondary small">Generate QR</button>
-              </div>
-            </div>
-
-            <div class="qr-option-card" id="open-qr-scanner-dashboard">
-              <div class="qr-option-icon">📷</div>
-              <div class="qr-option-content">
-                <h4>Scan QR Code</h4>
-                <p>Access shared memories</p>
-              </div>
-              <div class="qr-option-action">
-                <button class="vault-btn secondary small">Open Scanner</button>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- Quick Actions -->
-        <div class="vault-actions-section">
-          <div class="quick-actions-grid">
-            <button class="quick-action" onclick="window.location.href='gallery.html'">
-              <span>💝</span>
-              <span>Memories</span>
-            </button>
-            <button class="quick-action" onclick="window.location.href='options.html'">
-              <span>⚙️</span>
-              <span>Settings</span>
-            </button>
-            <button class="quick-action" onclick="window.location.href='people-emma.html'">
-              <span>👥</span>
-              <span>People</span>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <!-- Emma Orb WebGL Implementation -->
-  <script src="../js/emma-orb.js"></script>
-
-  <!-- Voice Capture Experience -->
-  <link rel="stylesheet" href="../css/voice-capture-minimal.css">
-  <script src="../js/experience-popup-base.js"></script>
-  <script src="../js/voice-capture-experience.js"></script>
-
-  <!-- Emma Chat Experience -->
-  <link rel="stylesheet" href="../css/emma-chat.css">
-  <script src="../js/emma-chat-experience.js"></script>
-
-  <!-- Emma Share Experience - Self-Contained QR Generation -->
-  <link rel="stylesheet" href="../css/emma-share.css">
-  <script src="../js/emma-qr-generator.js"></script>
-  <script src="../js/qr-service.js"></script>
-  <script src="../js/emma-share-experience.js"></script>
-
-  <!-- Emma Assistant Experience - CRITICAL: Needed for + node wizard -->
-  <script src="../js/assistant-experience-popup.js"></script>
-
-  <!-- Universal Vault Modal -->
-  <script src="../js/universal-vault-modal.js"></script>
-
-  <script>
-    // Dashboard Controller
-    class EmmaDashboard {
-      constructor() {
-        this.orb = document.getElementById('emma-orb');
-        this.radialMenu = document.getElementById('radial-menu');
-        this.voiceIndicator = document.getElementById('voice-indicator');
-        this.loading = document.getElementById('loading');
-
-        console.log('🔧 Constructor - radial items:', this.radialMenu ? this.radialMenu.querySelectorAll('.radial-item').length : 'NULL');
-        this.panels = {
-          dailyBrief: document.getElementById('daily-brief'),
-          aiInsights: document.getElementById('ai-insights'),
-          quickActions: document.getElementById('quick-actions')
-        };
-
-        this.isMenuOpen = false;
-        this.stats = { memories: 0, people: 0, today: 0 };
-        this.particles = [];
-        this.nodes = [];
-        this.neuralCanvas = document.getElementById('neural-canvas');
-        this.neuralCtx = this.neuralCanvas.getContext('2d');
-
-        // Neural memory network properties
-        this.isConstellationMode = false;
-        this.constellationMemories = [];
-        this.centralNeuron = null;
-
-        // Initialize WebGL Emma Orb
-        this.initEmmaOrb();
-
-        this.init();
-      }
-
-      async init() {
-        // Show loading
-        this.loading.classList.add('active');
-
-        // Initialize Emma's orb in loading screen
-        this.initLoadingOrb();
-
-        // Initialize constellation background
-        this.initConstellation();        // Setup event listeners
-        this.setupEventListeners();
-
-        // Load initial data
-        await this.loadDashboardData();
-
-        // Animate panels based on time of day
-        this.showContextualPanels();
-
-        // Hide loading
-        setTimeout(() => {
-          this.loading.classList.remove('active');
-        }, 1500);
-
-        // Start background animations
-        this.startAnimations();
-      }
-
-      initConstellation() {
-        const canvas = document.getElementById('constellation');
-        const ctx = canvas.getContext('2d');
-
-        // Set canvas size
-        const resize = () => {
-          canvas.width = window.innerWidth;
-          canvas.height = window.innerHeight;
-        };
-        resize();
-        window.addEventListener('resize', resize);
-
-        // Create memory particles
-        const particleCount = 50;
-        for (let i = 0; i < particleCount; i++) {
-          this.particles.push({
-            x: Math.random() * canvas.width,
-            y: Math.random() * canvas.height,
-            vx: (Math.random() - 0.5) * 0.5,
-            vy: (Math.random() - 0.5) * 0.5,
-            radius: Math.random() * 2 + 1,
-            opacity: Math.random() * 0.5 + 0.2
-          });
-        }
-
-        // Animation loop
-        const animate = () => {
-          ctx.clearRect(0, 0, canvas.width, canvas.height);
-
-          // Update and draw particles
-          this.particles.forEach((p, i) => {
-            // Update position
-            p.x += p.vx;
-            p.y += p.vy;
-
-            // Wrap around edges
-            if (p.x < 0) p.x = canvas.width;
-            if (p.x > canvas.width) p.x = 0;
-            if (p.y < 0) p.y = canvas.height;
-            if (p.y > canvas.height) p.y = 0;
-
-            // Draw particle
-            ctx.beginPath();
-            ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
-            ctx.fillStyle = `rgba(134, 88, 255, ${p.opacity})`;
-            ctx.fill();
-
-            // Draw connections
-            this.particles.forEach((p2, j) => {
-              if (i !== j) {
-                const dx = p.x - p2.x;
-                const dy = p.y - p2.y;
-                const dist = Math.sqrt(dx * dx + dy * dy);
-
-                if (dist < 100) {
-                  ctx.beginPath();
-                  ctx.moveTo(p.x, p.y);
-                  ctx.lineTo(p2.x, p2.y);
-                  ctx.strokeStyle = `rgba(134, 88, 255, ${(1 - dist / 100) * 0.2})`;
-                  ctx.stroke();
-                }
-              }
-            });
-          });
-
-          requestAnimationFrame(animate);
-        };
-        animate();
-      }
-
-      setupEventListeners() {
-        // Orb click - exit constellation or toggle menu
-        this.orb.addEventListener('click', (e) => {
-          e.stopPropagation();
-          if (this.isConstellationMode) {
-            // Simple: Exit constellation mode back to main dashboard
-            this.exitMemoryConstellation();
-          } else {
-            this.toggleRadialMenu();
-          }
-        });
-
-        // Radial menu items
-        this.radialMenu.querySelectorAll('.radial-item').forEach(item => {
-          item.addEventListener('click', (e) => {
-            e.stopPropagation();
-            const action = item.dataset.action;
-            this.handleRadialAction(action);
-          });
-        });
-
-        // Track mouse position for neural effects
-        this.mouseX = 0;
-        this.mouseY = 0;
-        document.addEventListener('mousemove', (e) => {
-          this.mouseX = e.clientX;
-          this.mouseY = e.clientY;
-
-          // Add proximity effects to nodes (both menu and constellation modes)
-          if ((this.isMenuOpen || this.isConstellationMode) && this.nodes.length > 0) {
-            this.nodes.forEach(node => {
-              const dist = Math.sqrt(
-                Math.pow(this.mouseX - node.x, 2) +
-                Math.pow(this.mouseY - node.y, 2)
-              );
-
-              if (dist < 150) {
-                // Gentle repel nodes from mouse (petri dish organisms)
-                const force = (150 - dist) / 150;
-                const angle = Math.atan2(node.y - this.mouseY, node.x - this.mouseX);
-                node.vx += Math.cos(angle) * force * 0.5; // Much gentler repulsion
-                node.vy += Math.sin(angle) * force * 0.5;
-
-                // Add glow effect (stronger for memory nodes)
-                const glowStrength = this.isConstellationMode ? 60 : 40;
-                const baseOpacity = this.isConstellationMode ? 0.8 : 0.6;
-                node.element.style.boxShadow = `0 0 ${glowStrength + force * 30}px rgba(134, 88, 255, ${baseOpacity + force * 0.4})`;
-              } else {
-                const defaultGlow = this.isConstellationMode ? '0 0 40px rgba(134, 88, 255, 0.4)' : '0 0 30px rgba(134, 88, 255, 0.2)';
-                node.element.style.boxShadow = defaultGlow;
-              }
-            });
-          }
-        });
-
-        // Keyboard shortcuts
-        document.addEventListener('keydown', (e) => {
-          if (e.code === 'Space' && !e.target.matches('input, textarea')) {
-            e.preventDefault();
-            this.startVoiceCapture();
-          } else if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
-            e.preventDefault();
-            this.handleRadialAction('search');
-          } else if (e.key === 'Escape' && this.isMenuOpen) {
-            this.toggleRadialMenu();
-          }
-        });
-
-        // Click outside to close menu
-        document.addEventListener('click', (e) => {
-          if (this.isMenuOpen && !this.orb.contains(e.target) && !this.radialMenu.contains(e.target)) {
-
-            this.toggleRadialMenu();
-          }
-        });
-
-        // Hover effects for orb
-        this.orb.addEventListener('mouseenter', () => {
-          document.querySelectorAll('.quick-stats').forEach(el => {
-            el.style.opacity = '1';
-          });
-        });
-      }
-
-      initNeuralNetwork() {
-        // Initialize neural nodes
-
-        console.log('🔧 radialMenu innerHTML preview:', this.radialMenu ? this.radialMenu.innerHTML.substring(0, 200) : 'NULL');
-
-        const items = this.radialMenu.querySelectorAll('.radial-item');
-        const centerX = window.innerWidth / 2;
-        const centerY = window.innerHeight / 2;
-        const radius = 250;
-
-        // Debug: Check if items exist but are hidden
-        if (items.length === 0) {
-
-          const allChildren = this.radialMenu.querySelectorAll('*');
-
-          allChildren.forEach((child, i) => {
-
-          });
-        }
-
-        items.forEach((item, i) => {
-          const angle = (i / items.length) * Math.PI * 2 - Math.PI / 2;
-          const x = centerX + Math.cos(angle) * radius;
-          const y = centerY + Math.sin(angle) * radius;
-
-          // CRITICAL: Actually position the DOM element
-          item.style.left = (x - 45) + 'px'; // Center the 90px item
-          item.style.top = (y - 45) + 'px';
-          console.log('🔧 Positioned item', i, 'at', x, y, 'DOM:', (x-45), (y-45));
-
-          this.nodes.push({
-            element: item,
-            x: x,
-            y: y,
-            vx: 0,
-            vy: 0,
-            baseX: x,
-            baseY: y,
-            angle: angle,
-            connections: []
-          });
-        });
-
-        // Create connections between nodes
-        this.nodes.forEach((node, i) => {
-          // Connect to adjacent nodes
-          const next = this.nodes[(i + 1) % this.nodes.length];
-          const prev = this.nodes[(i - 1 + this.nodes.length) % this.nodes.length];
-          node.connections.push(next, prev);
-
-          // Connect to opposite node for cross-connections
-          const opposite = this.nodes[(i + Math.floor(this.nodes.length / 2)) % this.nodes.length];
-          if (opposite !== node) {
-            node.connections.push(opposite);
-          }
-        });
-
-        // Add central orb as a node
-        this.centralNode = {
-          x: centerX,
-          y: centerY,
-          element: this.orb
-        };
-
-        // Connect all nodes to center
-        this.nodes.forEach(node => {
-          node.connections.push(this.centralNode);
-        });
-      }
-
-      // Removed initRadialNeuralNetwork - no longer needed since we exit constellation instead of showing menu overlay
-
-      toggleRadialMenu() {
-        this.isMenuOpen = !this.isMenuOpen;
-
-        if (this.isMenuOpen) {
-          this.radialMenu.classList.add('active');
-          document.body.classList.add('menu-active'); // Fade ALL UI elements
-
-          this.updateVaultNodeStatus(); // Update vault node based on status
-
-          // Initialize neural network (constellation mode now exits instead of showing menu)
-
-          this.initNeuralNetwork();
-
-          this.animateNeuralNetwork();
-
-          // Stagger animations for menu items
-
-          const menuItems = this.radialMenu.querySelectorAll('.radial-item');
-
-          menuItems.forEach((item, i) => {
-            setTimeout(() => {
-
-              // Use !important to override CSS animation
-              item.style.setProperty('transform', 'scale(1)', 'important');
-              item.style.setProperty('opacity', '1', 'important');
-              // Temporarily disable float animation during menu
-              item.style.animationPlayState = 'paused';
-            }, i * 50);
-          });
-        } else {
-          this.radialMenu.classList.remove('active');
-          document.body.classList.remove('menu-active'); // Restore ALL UI elements
-
-          this.radialMenu.querySelectorAll('.radial-item').forEach(item => {
-            item.style.setProperty('transform', 'scale(0)', 'important');
-            item.style.setProperty('opacity', '0', 'important');
-            // Re-enable float animation when menu closes
-            item.style.animationPlayState = 'running';
-          });
-
-          // Clear neural animation
-          if (this.neuralAnimationId) {
-            cancelAnimationFrame(this.neuralAnimationId);
-            this.neuralCtx.clearRect(0, 0, this.neuralCanvas.width, this.neuralCanvas.height);
-          }
-
-          // Reset nodes array (constellation mode exits instead of showing menu overlay)
-          this.nodes = [];
-        }
-      }
-
-      initLoadingOrb() {
-        try {
-          const loadingOrbContainer = document.querySelector('.loading-orb');
-          if (!loadingOrbContainer) {
-            console.warn('🌟 Loading orb container not found');
-            return;
-          }
-
-          if (window.EmmaOrb) {
-            // Create WebGL Emma Orb for loading screen
-            this.loadingOrb = new window.EmmaOrb(loadingOrbContainer, {
-              hue: 270, // Emma's signature purple-pink
-              hoverIntensity: 0.5,
-              rotateOnHover: false,
-              forceHoverState: true // Always show active state during loading
-            });
-
-          } else {
-            console.warn('🌟 EmmaOrb class not available for loading, using fallback');
-            // Fallback to gradient orb if WebGL not available
-            const fallbackDiv = document.createElement('div');
-            fallbackDiv.className = 'loading-orb-fallback';
-            loadingOrbContainer.appendChild(fallbackDiv);
-          }
-        } catch (error) {
-          console.error('🚨 Error initializing Loading Emma Orb:', error);
-          // Fallback on error
-          const loadingOrbContainer = document.querySelector('.loading-orb');
-          if (loadingOrbContainer) {
-            const fallbackDiv = document.createElement('div');
-            fallbackDiv.className = 'loading-orb-fallback';
-            loadingOrbContainer.appendChild(fallbackDiv);
-          }
-        }
-      }
-
-      initEmmaOrb() {
-        try {
-          const orbContainer = document.getElementById('webgl-orb-container');
-          if (!orbContainer) {
-            console.warn('🌟 WebGL orb container not found');
-            return;
-          }
-
-          if (window.EmmaOrb) {
-            // Create WebGL Emma Orb with Emma's signature purple-pink hue
-            this.webglOrb = new window.EmmaOrb(orbContainer, {
-              hue: 270, // Purple-pink Emma colors
-              hoverIntensity: 0.35,
-              rotateOnHover: true,
-              forceHoverState: false
-            });
-
-          } else {
-            console.warn('🌟 EmmaOrb class not available, using fallback');
-            // Fallback to simple gradient if EmmaOrb class not loaded
-            orbContainer.style.background = 'radial-gradient(circle at 30% 30%, #8658ff, #4f46e5)';
-            orbContainer.style.borderRadius = '50%';
-            orbContainer.style.width = '100%';
-            orbContainer.style.height = '100%';
-          }
-        } catch (error) {
-          console.error('🚨 Error initializing Emma Orb:', error);
-          // Ensure fallback is applied
-          const orbContainer = document.getElementById('webgl-orb-container');
-          if (orbContainer) {
-            orbContainer.style.background = 'radial-gradient(circle at 30% 30%, #8658ff, #4f46e5)';
-            orbContainer.style.borderRadius = '50%';
-            orbContainer.style.width = '100%';
-            orbContainer.style.height = '100%';
-          }
-        }
-      }
-
-      updateVaultNodeStatus() {
-        try {
-          const vaultNode = document.getElementById('vault-node');
-          if (!vaultNode) {
-            console.warn('⚠️ Vault node not found, skipping status update');
-            return;
-          }
-
-          const vaultIcon = vaultNode.querySelector('.radial-item-icon');
-          if (!vaultIcon) {
-            console.warn('⚠️ Vault icon not found, skipping status update');
-            return;
-          }
-
-          if (window.currentVaultStatus && window.currentVaultStatus.isUnlocked) {
-            vaultIcon.textContent = '🔓';
-            vaultNode.style.background = 'rgba(74, 222, 128, 0.1)'; // Green tint when unlocked
-            vaultNode.style.borderColor = 'rgba(74, 222, 128, 0.3)';
-          } else {
-            vaultIcon.textContent = '🔒';
-            vaultNode.style.background = 'var(--emma-glass)'; // Default when locked
-            vaultNode.style.borderColor = 'rgba(134, 88, 255, 0.3)';
-          }
-        } catch (error) {
-          console.warn('⚠️ Error updating vault node status:', error);
-        }
-      }
-
-      // Check if a line intersects with Emma orb circle
-      lineIntersectsCircle(x1, y1, x2, y2, cx, cy, radius) {
-        // Vector from point1 to point2
-        const dx = x2 - x1;
-        const dy = y2 - y1;
-
-        // Vector from point1 to circle center
-        const fx = x1 - cx;
-        const fy = y1 - cy;
-
-        // Quadratic equation coefficients
-        const a = dx * dx + dy * dy;
-        const b = 2 * (fx * dx + fy * dy);
-        const c = (fx * fx + fy * fy) - radius * radius;
-
-        const discriminant = b * b - 4 * a * c;
-
-        // No intersection if discriminant is negative
-        if (discriminant < 0) return false;
-
-        // Check if intersection points are within the line segment
-        const sqrt_discriminant = Math.sqrt(discriminant);
-        const t1 = (-b - sqrt_discriminant) / (2 * a);
-        const t2 = (-b + sqrt_discriminant) / (2 * a);
-
-        // If either intersection point is within [0,1], line intersects circle
-        return (t1 >= 0 && t1 <= 1) || (t2 >= 0 && t2 <= 1) || (t1 < 0 && t2 > 1);
-      }
-
-      animateNeuralNetwork() {
-        // Resize canvas
-        this.neuralCanvas.width = window.innerWidth;
-        this.neuralCanvas.height = window.innerHeight;
-
-        const animate = () => {
-          if (!this.isMenuOpen && !this.isConstellationMode) return;
-
-          // Clear canvas
-          this.neuralCtx.clearRect(0, 0, this.neuralCanvas.width, this.neuralCanvas.height);
-
-          // Draw subtle grid background when menu is open or in constellation mode
-          if (this.isMenuOpen || this.isConstellationMode) {
-            this.neuralCtx.strokeStyle = 'rgba(134, 88, 255, 0.03)';
-            this.neuralCtx.lineWidth = 1;
-            const gridSize = 50;
-
-            // Draw vertical lines
-            for (let x = 0; x < this.neuralCanvas.width; x += gridSize) {
-              this.neuralCtx.beginPath();
-              this.neuralCtx.moveTo(x, 0);
-              this.neuralCtx.lineTo(x, this.neuralCanvas.height);
-              this.neuralCtx.stroke();
-            }
-
-            // Draw horizontal lines
-            for (let y = 0; y < this.neuralCanvas.height; y += gridSize) {
-              this.neuralCtx.beginPath();
-              this.neuralCtx.moveTo(0, y);
-              this.neuralCtx.lineTo(this.neuralCanvas.width, y);
-              this.neuralCtx.stroke();
-            }
-          }
-
-          // Update node positions with organic movement
-          const time = Date.now() * 0.001;
-          this.nodes.forEach((node, i) => {
-            // Gentle organic floating movement (petri dish feel)
-            const floatX = Math.sin(time * 0.3 + i) * 12;
-            const floatY = Math.cos(time * 0.2 + i * 0.5) * 8;
-
-            // Gentle elastic force back to base position (petri dish feel)
-            const dx = (node.baseX + floatX) - node.x;
-            const dy = (node.baseY + floatY) - node.y;
-
-            node.vx += dx * 0.005; // Much gentler elastic force
-            node.vy += dy * 0.005;
-
-            // Apply more damping for organic feel
-            node.vx *= 0.98;
-            node.vy *= 0.98;
-
-            // Add repulsion from Emma orb (prevent overlap)
-            if (this.centralNode && this.isConstellationMode) {
-              const orbDx = node.x - this.centralNode.x;
-              const orbDy = node.y - this.centralNode.y;
-              const orbDist = Math.sqrt(orbDx * orbDx + orbDy * orbDy);
-
-              // Repulsion zone around Emma orb
-              const repulsionRadius = 150;
-              if (orbDist < repulsionRadius && orbDist > 0) {
-                const repulsionForce = (repulsionRadius - orbDist) / repulsionRadius;
-                const forceStrength = repulsionForce * 0.3; // Gentle but firm repulsion
-
-                const normalizedDx = orbDx / orbDist;
-                const normalizedDy = orbDy / orbDist;
-
-                node.vx += normalizedDx * forceStrength;
-                node.vy += normalizedDy * forceStrength;
-              }
-            }
-
-            // Add gentle repulsion between memory nodes (prevent overlap)
-            if (this.isConstellationMode) {
-              this.nodes.forEach((otherNode, j) => {
-                if (i !== j) {
-                  const nodeDx = node.x - otherNode.x;
-                  const nodeDy = node.y - otherNode.y;
-                  const nodeDist = Math.sqrt(nodeDx * nodeDx + nodeDy * nodeDy);
-
-                  // Minimum distance between nodes
-                  const minNodeDistance = 110;
-                  if (nodeDist < minNodeDistance && nodeDist > 0) {
-                    const repulsionForce = (minNodeDistance - nodeDist) / minNodeDistance;
-                    const forceStrength = repulsionForce * 0.1; // Very gentle node repulsion
-
-                    const normalizedDx = nodeDx / nodeDist;
-                    const normalizedDy = nodeDy / nodeDist;
-
-                    node.vx += normalizedDx * forceStrength;
-                    node.vy += normalizedDy * forceStrength;
-                  }
-                }
-              });
-            }
-
-            // Update position
-            node.x += node.vx;
-            node.y += node.vy;
-
-            // Update DOM element position
-            node.element.style.left = node.x - 45 + 'px';
-            node.element.style.top = node.y - 45 + 'px';
-          });
-
-          // Draw connections with gradients
-          this.nodes.forEach(node => {
-            node.connections.forEach(target => {
-              // Check if line would pass through Emma orb area - if so, skip drawing
-              const centerX = window.innerWidth / 2;
-              const centerY = window.innerHeight / 2;
-              const orbRadius = 110; // Clean boundary around orb
-
-              if (this.lineIntersectsCircle(node.x, node.y, target.x, target.y, centerX, centerY, orbRadius)) {
-                return; // Skip drawing this connection - it would cross the orb
-              }
-
-              // Calculate distance for opacity
-              const dist = Math.sqrt(
-                Math.pow(node.x - target.x, 2) +
-                Math.pow(node.y - target.y, 2)
-              );
-
-              // Different opacity for main menu vs memory constellation
-              const isMemoryMode = this.isConstellationMode && !this.isMenuOpen;
-              const gradient = this.neuralCtx.createLinearGradient(
-                node.x, node.y, target.x, target.y
-              );
-
-              if (isMemoryMode) {
-                // Visible connections for memory constellation
-                gradient.addColorStop(0, 'rgba(134, 88, 255, 0.2)');
-                gradient.addColorStop(0.5, 'rgba(240, 147, 251, 0.15)');
-                gradient.addColorStop(1, 'rgba(134, 88, 255, 0.2)');
-                this.neuralCtx.lineWidth = 1.2 + Math.sin(time + dist * 0.01) * 0.2;
-              } else {
-                // Subtle connections for main menu (original loved style)
-                gradient.addColorStop(0, 'rgba(134, 88, 255, 0.03)');
-                gradient.addColorStop(0.5, 'rgba(240, 147, 251, 0.02)');
-                gradient.addColorStop(1, 'rgba(134, 88, 255, 0.03)');
-                this.neuralCtx.lineWidth = 0.5 + Math.sin(time + dist * 0.01) * 0.1;
-              }
-
-              this.neuralCtx.strokeStyle = gradient;
-
-              this.neuralCtx.beginPath();
-              this.neuralCtx.moveTo(node.x, node.y);
-
-              // Gentle organic curved connections
-              const midX = (node.x + target.x) / 2;
-              const midY = (node.y + target.y) / 2;
-              const curve1 = Math.sin(time * 0.4 + node.x * 0.005) * 15;
-              const curve2 = Math.cos(time * 0.3 + node.y * 0.005) * 10;
-
-              this.neuralCtx.bezierCurveTo(
-                node.x + curve1,
-                node.y + curve2,
-                target.x - curve2,
-                target.y - curve1,
-                target.x,
-                target.y
-              );
-
-              this.neuralCtx.stroke();
-            });
-          });
-
-          // Remove energy pulses - too aggressive
-
-          this.neuralAnimationId = requestAnimationFrame(animate);
-        };
-
-        animate();
-      }
-
-      async handleRadialAction(action) {
-
-        switch(action) {
-          case 'capture':
-            this.startVoiceCapture();
-            break;
-          case 'vault':
-            this.openVaultModal();
-            break;
-          case 'memories':
-            await this.enterMemoryConstellation();
-            break;
-          case 'people':
-            window.location.href = 'people-emma.html';
-            break;
-          case 'search':
-            this.showToast('🔍 Search coming soon!', 'info');
-            break;
-          case 'share':
-            this.showQRShare();
-            break;
-          case 'chat':
-            this.startEmmaChatExperience();
-            break;
-          case 'settings':
-            window.location.href = 'options.html';
-            break;
-        }
-
-        // Close menu after action
-        if (this.isMenuOpen) {
-          this.toggleRadialMenu();
-        }
-      }
-
-      // SAFETY METHOD: Fallback for any lingering render() calls
-      render() {
-        console.warn('🔧 DASHBOARD: render() is deprecated, using animateNeuralNetwork() instead');
-        this.animateNeuralNetwork();
-      }
-
-      async startVoiceCapture() {
-
-        // Calculate elegant position relative to Emma orb
-        const orbRect = this.orb.getBoundingClientRect();
-        const viewportWidth = window.innerWidth;
-        const viewportHeight = window.innerHeight;
-
-        // Position the panel optimally
-        let left = orbRect.right + 24;
-        let top = Math.max(40, orbRect.top - 80);
-
-        // Ensure it fits in viewport
-        const panelWidth = 480;
-        const panelHeight = 700;
-
-        if (left + panelWidth > viewportWidth - 40) {
-          left = orbRect.left - panelWidth - 24;
-        }
-
-        if (top + panelHeight > viewportHeight - 40) {
-          top = viewportHeight - panelHeight - 40;
-        }
-
-        const position = {
-          left: Math.max(40, left),
-          top: Math.max(40, top),
-          width: panelWidth,
-          height: panelHeight
-        };
-
-        // Create and show voice capture experience
-        this.voiceCaptureExperience = new VoiceCaptureExperience(position, {
-          voiceEnabled: true,
-          autoStart: false // Let user initiate
-        });
-
-        try {
-          await this.voiceCaptureExperience.show();
-
-        } catch (error) {
-          console.error('🎤 Failed to open voice capture:', error);
-          this.showToast('Failed to open Voice Memory Studio. Please try again.', 'error');
-        }
-      }
-
-      async startEmmaChatExperience() {
-
-        // Calculate elegant position relative to Emma orb
-        const orbRect = this.orb.getBoundingClientRect();
-        const viewportWidth = window.innerWidth;
-        const viewportHeight = window.innerHeight;
-
-        // Position the chat panel optimally - slightly larger than voice capture
-        let left = orbRect.right + 24;
-        let top = Math.max(40, orbRect.top - 100);
-
-        // Chat panel dimensions
-        const panelWidth = 600; // Wider for comfortable chat
-        const panelHeight = 700;
-
-        // Ensure it fits in viewport
-        if (left + panelWidth > viewportWidth - 40) {
-          left = orbRect.left - panelWidth - 24;
-        }
-
-        if (top + panelHeight > viewportHeight - 40) {
-          top = viewportHeight - panelHeight - 40;
-        }
-
-        const position = {
-          left: Math.max(40, left),
-          top: Math.max(40, top),
-          width: panelWidth,
-          height: panelHeight
-        };
-
-        // Create and show Emma chat experience
-        this.emmaChatExperience = new EmmaChatExperience(position, {
-          contextAware: true,
-          memoryIntegration: true
-        });
-
-        try {
-          await this.emmaChatExperience.show();
-
-        } catch (error) {
-          console.error('💬 Failed to open Emma Chat:', error);
-          this.showToast('Failed to open Chat with Emma. Please try again.', 'error');
-        }
-      }
-
-      openVaultModal() {
-        const modal = document.getElementById('vault-modal');
-        const statusIcon = document.getElementById('status-icon');
-        const statusTitle = document.getElementById('status-title');
-        const statusDescription = document.getElementById('status-description');
-        const actionBtn = document.getElementById('vault-action-btn');
-        const statusCard = document.getElementById('vault-status-card');
-        const unlockSection = document.getElementById('unlock-section');
-        const createVaultSection = document.getElementById('create-vault-section');
-
-        // Check if vault exists first
-        const vaultExists = window.currentVaultStatus && window.currentVaultStatus.vaultId;
-
-        if (!vaultExists) {
-          // No vault found - show create vault option
-          statusIcon.textContent = '❌';
-          statusTitle.textContent = 'No Vault Found';
-          statusDescription.textContent = 'Create your first Emma memory vault to get started';
-          actionBtn.style.display = 'none'; // Hide unlock button
-          unlockSection.style.display = 'none';
-          createVaultSection.style.display = 'block';
-        } else if (window.currentVaultStatus && window.currentVaultStatus.isUnlocked) {
-          statusIcon.textContent = '🔓';
-          statusTitle.textContent = 'Vault Unlocked';
-          statusDescription.textContent = 'Your memories are accessible and secure';
-          actionBtn.textContent = '🔒 Lock Vault';
-          actionBtn.onclick = () => this.lockVault();
-          actionBtn.style.display = 'block';
-          statusCard.classList.add('unlocked');
-          unlockSection.style.display = 'none';
-          createVaultSection.style.display = 'none';
-        } else {
-          statusIcon.textContent = '🔒';
-          statusTitle.textContent = 'Vault Locked';
-          statusDescription.textContent = 'Enter your vault code to access your memories';
-          actionBtn.textContent = 'Unlock Vault';
-          actionBtn.onclick = () => this.showUnlockForm();
-          actionBtn.style.display = 'block';
-          statusCard.classList.remove('unlocked');
-          unlockSection.style.display = 'none';
-          createVaultSection.style.display = 'none';
-        }
-
-        modal.style.display = 'flex';
-        setTimeout(() => {
-          modal.classList.add('show');
-        }, 10);
-
-        // Store reference for global access
-        window.openVaultModal = () => this.openVaultModal();
-      }
-
-      closeVaultModal() {
-        const modal = document.getElementById('vault-modal');
-        modal.classList.remove('show');
-        setTimeout(() => {
-          modal.style.display = 'none';
-        }, 300);
-      }
-
-      showUnlockForm() {
-        // Use beautiful universal vault modal instead of inline form
-        universalVaultModal.show({
-          title: "Unlock Vault",
-          message: "Enter your vault passphrase to access your secure memories",
-          onSuccess: (result) => {
-            // Update vault status
-            window.currentVaultStatus = { isUnlocked: true };
-            this.loadDashboardData();
-            this.updateVaultNodeStatus();
-            this.openVaultModal(); // Refresh modal with new status
-            this.showToast('✅ Vault unlocked successfully!', 'success');
-          },
-          onCancel: () => {
-
-          }
-        });
-      }
-
-      hideUnlockForm() {
-        const unlockSection = document.getElementById('unlock-section');
-        const passwordInput = document.getElementById('vault-password');
-        unlockSection.style.display = 'none';
-        passwordInput.value = '';
-      }
-
-      async unlockVault() {
-        const passwordInput = document.getElementById('vault-password');
-        const unlockBtn = document.getElementById('unlock-btn');
-        const password = passwordInput.value.trim();
-
-        if (!password) {
-          passwordInput.focus();
-          return;
-        }
-
-        try {
-          unlockBtn.disabled = true;
-          unlockBtn.textContent = '🔓 Unlocking...';
-
-          if (window.emmaAPI && window.emmaAPI.vault) {
-            const result = await window.emmaAPI.vault.unlock({ passphrase: password });
-
-            if (result && result.success) {
-              // Success - update status and close form
-              window.currentVaultStatus = { isUnlocked: true };
-              await this.loadDashboardData();
-              this.updateVaultNodeStatus(); // Update the floating vault node
-              this.hideUnlockForm();
-              this.openVaultModal(); // Refresh modal with new status
-              this.showToast('✅ Vault unlocked successfully!', 'success');
-            } else {
-              throw new Error(result?.error || 'Unlock failed');
-            }
-          } else {
-            // No API available
-            throw new Error('Vault API not available');
-          }
-        } catch (error) {
-          console.error('🏠 Dashboard: Unlock error:', error);
-          this.showToast('❌ Failed to unlock vault: ' + error.message, 'error');
-        } finally {
-          unlockBtn.disabled = false;
-          unlockBtn.textContent = '🔓 Unlock';
-        }
-      }
-
-      async lockVault() {
-        try {
-          // CRITICAL: Ask for passphrase to encrypt vault before locking
-          const passphrase = prompt('🔐 Enter your passphrase to encrypt and lock the vault:');
-          if (!passphrase) return;
-
-          // Use web vault system for locking
-          if (window.emmaWebVault) {
-            await window.emmaWebVault.lockVault();
-
-            this.showToast('🔒 Vault locked and encrypted!', 'success');
-            // Refresh page to show locked state
-            setTimeout(() => window.location.reload(), 1000);
-          } else {
-            // Demo mode
-            console.warn('🏠 Dashboard: No Emma Web Vault - demo lock');
-            window.currentVaultStatus = { isUnlocked: false };
-            await this.loadDashboardData();
-            this.updateVaultNodeStatus(); // Update the floating vault node
-            this.openVaultModal();
-            this.showToast('🎭 Demo vault locked!', 'info');
-          }
-        } catch (error) {
-          console.error('🏠 Dashboard: Lock error:', error);
-          this.showToast('❌ Failed to lock vault: ' + error.message, 'error');
-        }
-      }
-
-      async showQRShare() {
-
-        // Check if classes are available
-        if (typeof EmmaShareExperience === 'undefined') {
-          console.error('🔗 EmmaShareExperience class not found');
-          this.showToast('Share feature unavailable. Please refresh the page.', 'error');
-          return;
-        }
-
-        if (typeof QRService === 'undefined') {
-          console.warn('🔗 QRService class not found - will use fallback');
-        }
-
-        // Calculate elegant position relative to Emma orb
-        const orbRect = this.orb.getBoundingClientRect();
-        const viewportWidth = window.innerWidth;
-        const viewportHeight = window.innerHeight;        // Position the share panel optimally
-        let left = orbRect.right + 24;
-        let top = Math.max(40, orbRect.top - 120);
-
-        // Share panel dimensions
-        const panelWidth = 650; // Wider for share content
-        const panelHeight = 720;
-
-        // Ensure it fits in viewport
-        if (left + panelWidth > viewportWidth - 40) {
-          left = orbRect.left - panelWidth - 24;
-        }
-
-        if (top + panelHeight > viewportHeight - 40) {
-          top = viewportHeight - panelHeight - 40;
-        }
-
-        const position = {
-          left: Math.max(40, left),
-          top: Math.max(40, top),
-          width: panelWidth,
-          height: panelHeight
-        };
-
-        try {
-          // Create and show Emma share experience
-          this.emmaShareExperience = new EmmaShareExperience(position, {
-            contextAware: true,
-            vaultIntegration: true
-          });
-
-          // Set global reference for share actions
-          window.shareExperience = this.emmaShareExperience;
-
-          await this.emmaShareExperience.show();
-
-        } catch (error) {
-          console.error('🔗 Failed to open Emma Share:', error);
-          this.showToast('Failed to open Share interface: ' + error.message, 'error');
-        }
-      }
-
-      async loadDashboardData() {
-        try {
-          // Load vault status (store but don't show on central orb)
-          if (window.emmaAPI && window.emmaAPI.vault) {
-            try {
-              const status = await window.emmaAPI.vault.status();
-              window.currentVaultStatus = status || { isUnlocked: false };
-            } catch (e) {
-              console.warn('⚠️ Vault status unavailable:', e.message);
-              // CRITICAL FIX: Don't force lock status - preserve existing state
-              if (!window.currentVaultStatus) {
-                window.currentVaultStatus = { isUnlocked: false };
-              }
-            }
-
-            // Keep central orb neutral - Emma branding only (text removed)
-
-            // Load stats safely
-            try {
-              const stats = await window.emmaAPI.vault.stats();
-              this.updateStats({
-                memories: (stats && stats.totalMemories) || 42,
-                people: (stats && stats.totalPeople) || 12,
-                today: (stats && stats.todayMemories) || 3
-              });
-            } catch (e) {
-              console.warn('⚠️ Vault stats unavailable:', e.message);
-              this.updateStats({ memories: 42, people: 12, today: 3 });
-            }
-          } else {
-            // Demo data when API not available
-
-            // CRITICAL FIX: Don't force lock status - preserve existing state
-            if (!window.currentVaultStatus) {
-              window.currentVaultStatus = { isUnlocked: false };
-            }
-            this.updateStats({ memories: 42, people: 12, today: 3 });
-          }
-        } catch (error) {
-          console.error('🚨 Dashboard data load error:', error);
-          // Fallback to demo data
-          // CRITICAL FIX: Don't force lock status - preserve existing state
-          if (!window.currentVaultStatus) {
-            window.currentVaultStatus = { isUnlocked: false };
-          }
-          this.updateStats({ memories: 42, people: 12, today: 3 });
-        }
-      }
-
-      updateStats(newStats) {
-        Object.assign(this.stats, newStats);
-
-        // Animate number changes
-        Object.keys(newStats).forEach(key => {
-          const element = document.getElementById(`stat-${key}`);
-          if (element) {
-            const start = parseInt(element.textContent) || 0;
-            const end = this.stats[key];
-            const duration = 1000;
-            const startTime = Date.now();
-
-            const animate = () => {
-              const elapsed = Date.now() - startTime;
-              const progress = Math.min(elapsed / duration, 1);
-              const current = Math.floor(start + (end - start) * progress);
-              element.textContent = current;
-
-              if (progress < 1) {
-                requestAnimationFrame(animate);
-              }
-            };
-            animate();
-          }
-        });
-      }
-
-      showContextualPanels() {
-        const hour = new Date().getHours();
-
-        // Show all panels for demo
-        setTimeout(() => {
-          // Show all available panels
-          if (this.panels.dailyBrief) this.panels.dailyBrief.classList.add('active');
-          if (this.panels.aiInsights) this.panels.aiInsights.classList.add('active');
-          if (this.panels.quickActions) this.panels.quickActions.classList.add('active');
-        }, 1000);
-      }
-
-      startAnimations() {
-        // Subtle pulse animation for WebGL orb
-        setInterval(() => {
-          if (window.currentVaultStatus && !window.currentVaultStatus.isUnlocked) {
-            const orbContainer = this.orb.querySelector('.emma-orb-webgl');
-            if (orbContainer) {
-              orbContainer.style.animation = 'orb-pulse 2s ease-in-out';
-            }
-          }
-        }, 5000);
-      }      // Enter memory constellation mode
-      async enterMemoryConstellation() {
-
-        // CRITICAL: Clear any existing memory nodes first (prevents duplicates)
-        this.clearAllMemoryNodesFromDOM();
-
-        this.isConstellationMode = true;
-
-        // Add constellation-active class to hide all UI
-        document.body.classList.add('constellation-active');
-
-        // Shrink central orb
-        this.shrinkCentralOrb();
-
-        // Load memory data
-        await this.loadMemoriesForConstellation();
-
-        // Fade out current nodes
-        await this.fadeOutMenuNodes();
-
-        // Create memory constellation (await for real memories)
-        await this.createMemoryConstellation();
-
-        // Show constellation UI
-        this.showConstellationUI();
-      }
-
-      // Shrink central Emma orb when memories are visible
-      shrinkCentralOrb() {
-        const orbContainer = this.orb.querySelector('.emma-orb-webgl');
-        if (orbContainer) {
-          orbContainer.style.transition = 'transform 0.8s cubic-bezier(0.4, 0, 0.2, 1)';
-          orbContainer.style.transform = 'scale(0.7)';
-        }
-
-        // Also shrink the entire orb container
-        this.orb.style.transition = 'transform 0.8s cubic-bezier(0.4, 0, 0.2, 1)';
-        this.orb.style.transform = 'scale(0.7)';
-
-        // Add hover effects for memory mode
-        this.addOrbHoverEffects();
-      }
-
-      // Add hover effects to orb in memory mode
-      addOrbHoverEffects() {
-        if (this.orbHoverAdded) return;
-        this.orbHoverAdded = true;
-
-        const orbContainer = this.orb.querySelector('.emma-orb-webgl');
-
-        this.orb.addEventListener('mouseenter', () => {
-          if (this.isConstellationMode) {
-            this.orb.style.transform = 'scale(0.9)';
-            if (orbContainer) {
-              orbContainer.style.transform = 'scale(0.9)';
-            }
-          }
-        });
-
-        this.orb.addEventListener('mouseleave', () => {
-          if (this.isConstellationMode) {
-            this.orb.style.transform = 'scale(0.7)';
-            if (orbContainer) {
-              orbContainer.style.transform = 'scale(0.7)';
-            }
-          }
-        });
-      }
-
-      // Restore central Emma orb size
-      restoreCentralOrb() {
-        const orbContainer = this.orb.querySelector('.emma-orb-webgl');
-        if (orbContainer) {
-          orbContainer.style.transform = 'scale(1)';
-        }
-        this.orb.style.transform = 'scale(1)';
-      }
-
-      // Load memories for constellation
-      async loadMemoriesForConstellation() {
-        try {
-          // Get memories from API
-          let memories = await this.getMemories();
-
-          if (memories.length > 0) {
-
-            console.log('💝 CONSTELLATION DEBUG: Memory titles:', memories.map(m => m.title));
-          }
-
-          // Add debugging info about available APIs
-
-          this.constellationMemories = this.organizeMemoriesByTheme(memories);
-
-          // Count total memories
-          const totalMemories = Object.values(this.constellationMemories).reduce((sum, theme) => sum + theme.length, 0);
-
-          // If no memories, suggest user create some
-          if (totalMemories === 0) {
-
-          }
-
-        } catch (error) {
-
-          this.constellationMemories = {family: [], travel: [], recent: [], special: []};
-        }
-      }
-
-      // Get memories from vault (same API as gallery)
-      async getMemories() {
-        try {
-
-          if (window.emmaAPI && window.emmaAPI.memories && window.emmaAPI.memories.getAll) {
-            console.log('💝 CONSTELLATION: Using memories.getAll() API (same as gallery)');
-            const result = await window.emmaAPI.memories.getAll({ limit: 1000, offset: 0 });            console.log('💝 CONSTELLATION: Is array?', Array.isArray(result));
-
-            let vaultMemories = [];
-            if (result && result.success && Array.isArray(result.memories)) {
-              vaultMemories = result.memories;
-            } else if (result && Array.isArray(result)) {
-              vaultMemories = result;
-            }
-
-            // Transform vault memories to expected format
-            const transformedMemories = vaultMemories.map((memory, index) => {
-              // Use thumbnail from main process (previewThumb) or extract from mediaItems
-              let thumbnail = memory.thumbnail; // First try the thumbnail from main process
-
-              if (!thumbnail && memory.mediaItems && memory.mediaItems.length > 0) {
-                const firstImage = memory.mediaItems.find(item => item.dataUrl || item.url);
-                if (firstImage) {
-                  thumbnail = firstImage.dataUrl || firstImage.url;
-                }
-              }
-
-              if (thumbnail) {
-                console.log(`💝 CONSTELLATION: Thumbnail data for ${memory.id}:`, thumbnail.substring(0, 50) + '...');
-              }
-
-              return {
-              id: memory.id || `vault_${index}`,
-              title: memory.title || `Memory ${index + 1}`,
-              content: memory.content || 'A precious memory...',
-              category: memory.category || memory.type || this.detectCategoryFromContent(memory),
-              date: memory.date || memory.timestamp || new Date().toISOString(),
-              tags: memory.tags || [],
-                mediaItems: memory.mediaItems || [],
-                thumbnail: thumbnail // Add the actual image thumbnail
-              };
-            });
-
-            return transformedMemories;
-          }
-        } catch (error) {
-          console.error('💝 CONSTELLATION: Error loading memories from vault:', error);
-        }
-        return [];
-      }
-
-      // Helper to detect category from memory content
-      detectCategoryFromContent(memory) {
-        const content = ((memory.title || '') + ' ' + (memory.content || '')).toLowerCase();
-        if (content.includes('family') || content.includes('mom') || content.includes('dad')) return 'family';
-        if (content.includes('travel') || content.includes('trip') || content.includes('vacation')) return 'travel';
-        if (memory.timestamp && new Date() - new Date(memory.timestamp) < 30 * 24 * 60 * 60 * 1000) return 'recent';
-        return 'special';
-      }
-
-      // Generate organic neural network positions (NOT circular)
-      generateNeuralNetworkPositions(nodeCount, centerX, centerY, width, height, minDistance) {
-        const positions = [];
-        const maxAttempts = 100;
-
-        // First position: Create Memory node in top-center area
-        positions.push({
-          x: centerX + (Math.random() - 0.5) * 100,
-          y: centerY - height * 0.25 + (Math.random() - 0.5) * 80
-        });
-
-        // Generate remaining positions with organic scatter
-        for (let i = 1; i < nodeCount; i++) {
-          let placed = false;
-          let attempts = 0;
-
-          while (!placed && attempts < maxAttempts) {
-            // Use clustered random distribution (not uniform)
-            const clusterX = centerX + (Math.random() - 0.5) * width;
-            const clusterY = centerY + (Math.random() - 0.5) * height;
-
-            // Add some organic bias toward clusters
-            const biasStrength = Math.random() * 0.3;
-            const biasAngle = Math.random() * Math.PI * 2;
-            const x = clusterX + Math.cos(biasAngle) * biasStrength * 150;
-            const y = clusterY + Math.sin(biasAngle) * biasStrength * 150;
-
-            // Check minimum distance from all existing nodes AND center orb
-            let validPosition = true;
-
-            // Check distance from center Emma orb (exclusion zone)
-            const distFromCenter = Math.sqrt((x - centerX) ** 2 + (y - centerY) ** 2);
-            if (distFromCenter < 150) { // 150px exclusion zone around Emma orb
-              validPosition = false;
-            }
-
-            // Check distance from other nodes
-            if (validPosition) {
-              for (const pos of positions) {
-                const dist = Math.sqrt((x - pos.x) ** 2 + (y - pos.y) ** 2);
-                if (dist < minDistance) {
-                  validPosition = false;
-                  break;
-                }
-              }
-            }
-
-            // Keep nodes within bounds
-            if (validPosition &&
-                x > centerX - width/2 + 50 && x < centerX + width/2 - 50 &&
-                y > centerY - height/2 + 50 && y < centerY + height/2 - 50) {
-              positions.push({ x, y });
-              placed = true;
-            }
-
-            attempts++;
-          }
-
-          // Fallback if can't place after max attempts
-          if (!placed) {
-            const angle = (i / nodeCount) * Math.PI * 2;
-            const fallbackRadius = 200 + Math.random() * 100;
-            positions.push({
-              x: centerX + Math.cos(angle) * fallbackRadius,
-              y: centerY + Math.sin(angle) * fallbackRadius
-            });
-          }
-        }
-
-        return positions;
-      }      // Generate memory thumbnail based on theme
-      generateMemoryThumbnail(theme) {
-        const themeEmojis = {
-          family: ['👨‍👩‍👧‍👦', '🏠', '❤️', '🍽️', '🎂'],
-          travel: ['✈️', '🗺️', '📸', '🏖️', '🏔️'],
-          recent: ['📱', '☕', '🌅', '🎵', '📚'],
-          special: ['🎉', '💝', '🌟', '🎈', '🎊']
-        };
-        const emojis = themeEmojis[theme] || ['💫'];
-        return emojis[Math.floor(Math.random() * emojis.length)];
-      }
-
-      // Organize memories by theme for constellations
-      organizeMemoriesByTheme(memories) {
-        const organized = {
-          family: [],
-          travel: [],
-          recent: [],
-          special: []
-        };
-
-        memories.forEach(memory => {
-          const theme = memory.theme || this.detectMemoryTheme(memory);
-          if (organized[theme]) {
-            organized[theme].push(memory);
-          } else {
-            organized.special.push(memory);
-          }
-        });
-
-        return organized;
-      }
-
-      // Detect memory theme from content
-      detectMemoryTheme(memory) {
-        // Use category first, then fallback to content analysis
-        if (memory.category) {
-          return memory.category;
-        }
-
-        const content = (memory.title + ' ' + (memory.content || memory.description || '')).toLowerCase();
-        if (content.includes('family') || content.includes('mom') || content.includes('dad')) return 'family';
-        if (content.includes('travel') || content.includes('trip') || content.includes('vacation')) return 'travel';
-        if (memory.date && new Date() - new Date(memory.date) < 30 * 24 * 60 * 60 * 1000) return 'recent';
-        return 'special';
-      }
-
-      // Fade out menu nodes
-      async fadeOutMenuNodes() {
-        return new Promise(resolve => {
-          this.radialMenu.querySelectorAll('.radial-item').forEach((item, i) => {
-            setTimeout(() => {
-              item.style.transition = 'all 0.5s ease';
-              item.style.opacity = '0';
-              item.style.transform = 'scale(0)';
-            }, i * 50);
-          });
-
-          setTimeout(resolve, 500);
-        });
-      }
-
-      // Create memory constellation using EXACT working neural network system
-      async createMemoryConstellation() {
-
-        // CRITICAL: Remove any existing memory nodes from DOM first
-        this.clearAllMemoryNodesFromDOM();
-
-        // Clear existing nodes array
-        this.nodes = [];
-
-        // Don't reload memories - use already loaded ones from enterMemoryConstellation()
-
-        // Get memories for constellation
-        const allMemories = [];
-        Object.keys(this.constellationMemories).forEach(theme => {
-          this.constellationMemories[theme].forEach(memory => {
-            allMemories.push({ ...memory, theme });
-          });
-        });
-
-        // Load people from vault for constellation
-        const allPeople = await this.loadPeopleForConstellation();
-
-        if (allMemories.length === 0 && allPeople.length === 0) {
-          console.warn('💝 No memories or people found in vault - constellation will show only the Create Memory node');
-        }
-
-        // Create memory and people nodes using EXACT same pattern as main menu
-        this.initMemoryNeuralNetwork(allMemories, allPeople);
-
-        // Set up for constellation mode without triggering menu
-        this.isMenuOpen = false; // CRITICAL: Constellation mode starts with menu closed
-        this.radialMenu.classList.remove('active'); // Ensure menu is hidden
-        document.body.classList.remove('menu-active');
-
-        // Start the neural animation (EXACT same as main menu)
-        this.animateNeuralNetwork();
-
-      }
-
-      // Load people from vault for constellation
-      async loadPeopleForConstellation() {
-        try {
-
-          if (window.emmaAPI && window.emmaAPI.people && window.emmaAPI.people.list) {
-            const result = await window.emmaAPI.people.list();
-
-            if (result && result.success && Array.isArray(result.items)) {
-
-              return result.items;
-            }
-          }
-
-          return [];
-
-        } catch (error) {
-          console.error('👥 CONSTELLATION: Error loading people:', error);
-          return [];
-        }
-      }
-
-      // Initialize memory neural network using EXACT same pattern as working main menu
-      initMemoryNeuralNetwork(memories, people = []) {
-
-        const centerX = window.innerWidth / 2;
-        const centerY = window.innerHeight / 2;
-        // Neural network layout parameters
-        const networkWidth = Math.min(window.innerWidth * 0.7, 800);
-        const networkHeight = Math.min(window.innerHeight * 0.7, 600);
-        const minDistance = 120; // Minimum distance between nodes
-
-        // Take up to 12 memories and up to 8 people for balanced constellation
-        const selectedMemories = memories.slice(0, 12);
-        const selectedPeople = people.slice(0, 8);
-        const totalNodes = selectedMemories.length + selectedPeople.length + 1; // +1 for create node
-
-        // Generate organic neural network positions
-        const positions = this.generateNeuralNetworkPositions(totalNodes, centerX, centerY, networkWidth, networkHeight, minDistance);
-
-        // Always add "Create New Memory" node at the first position (top-center area)
-        const createPos = positions[0];
-        const createMemoryElement = this.createCreateMemoryNodeElement(createPos.x, createPos.y);
-        this.nodes.push({
-          element: createMemoryElement,
-          x: createPos.x,
-          y: createPos.y,
-          vx: 0,
-          vy: 0,
-          baseX: createPos.x,
-          baseY: createPos.y,
-          connections: [],
-          isCreateNode: true
-        });
-
-        // Create memory nodes in organic neural pattern
-        selectedMemories.forEach((memory, i) => {
-          const pos = positions[i + 1]; // Skip position 0 (create node)
-
-          // Create memory node element
-          const memoryElement = this.createMemoryNodeElement(memory, pos.x, pos.y);
-
-          this.nodes.push({
-            element: memoryElement,
-            x: pos.x,
-            y: pos.y,
-            vx: 0,
-            vy: 0,
-            baseX: pos.x,
-            baseY: pos.y,
-            connections: [],
-            memory: memory,
-            type: 'memory'
-          });
-        });
-
-        // Create people nodes in remaining positions
-        selectedPeople.forEach((person, i) => {
-          const posIndex = selectedMemories.length + i + 1; // Skip create node and memory nodes
-          const pos = positions[posIndex];
-
-          if (pos) { // Make sure we have a position
-            // Create person node element
-            const personElement = this.createPersonNodeElement(person, pos.x, pos.y);
-
-            this.nodes.push({
-              element: personElement,
-              x: pos.x,
-              y: pos.y,
-              vx: 0,
-              vy: 0,
-              baseX: pos.x,
-              baseY: pos.y,
-              connections: [],
-              person: person,
-              type: 'person'
-            });
-          }
-        });
-
-        // Create intelligent connections between memories and people
-        this.createMemoryPeopleConnections(selectedMemories, selectedPeople);
-
-        // Create organic neural network connections (NOT spoked wheel)
-        this.nodes.forEach((node, i) => {
-          // Connect to 2-4 nearby nodes within a certain distance (organic clustering)
-          this.nodes.forEach((otherNode, j) => {
-            if (i !== j) {
-              const dist = Math.sqrt(
-                Math.pow(node.x - otherNode.x, 2) +
-                Math.pow(node.y - otherNode.y, 2)
-              );
-
-              // Connect to nodes within a reasonable distance (creates natural clusters)
-              if (dist < 250 && node.connections.length < 4) {
-                node.connections.push(otherNode);
-              }
-            }
-          });
-
-          // Ensure each node has at least 2 connections (prevent isolated nodes)
-          if (node.connections.length < 2) {
-            // Find the 2 closest nodes
-            const distances = this.nodes
-              .map((otherNode, j) => ({ node: otherNode, index: j, dist: j === i ? Infinity : Math.sqrt(Math.pow(node.x - otherNode.x, 2) + Math.pow(node.y - otherNode.y, 2)) }))
-              .sort((a, b) => a.dist - b.dist)
-              .slice(0, 2);
-
-            distances.forEach(({ node: closestNode }) => {
-              if (!node.connections.includes(closestNode)) {
-                node.connections.push(closestNode);
-              }
-            });
-          }
-        });
-
-        // Add central orb as a special node (but only some memory nodes connect to it)
-        this.centralNode = {
-          x: centerX,
-          y: centerY,
-          element: this.orb
-        };
-
-        // Only 3-4 random memory nodes connect to center (not all - avoids spoked wheel)
-        const centralConnections = Math.min(4, Math.floor(this.nodes.length / 3));
-        const shuffledNodes = [...this.nodes].sort(() => Math.random() - 0.5);
-        shuffledNodes.slice(0, centralConnections).forEach(node => {
-          node.connections.push(this.centralNode);
-        });
-
-      }
-
-      // Create memory node element that opens memory capsule dialog
-      createMemoryNodeElement(memory, x, y) {
-        const memoryElement = document.createElement('div');
-        memoryElement.className = 'memory-node';
-
-        // Add theme data attribute for styling
-        memoryElement.setAttribute('data-theme', memory.theme);
-
-        // CLEAN CIRCULAR NODE - No text labels, pure image capsule
-        memoryElement.style.cssText = `
-          position: fixed;
-          left: ${x}px;
-          top: ${y}px;
-          width: 80px;
-          height: 80px;
-          border-radius: 50%;
-          border: 3px solid rgba(139, 92, 246, 0.6);
-          cursor: pointer;
-          transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-          opacity: 0;
-          transform: scale(0);
-          box-shadow: 0 8px 32px rgba(139, 92, 246, 0.4);
-          z-index: 1000;
-          overflow: hidden;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-        `;
-
-        // APPLY BACKGROUND AFTER BASE STYLING: Memory capsule as single node with image background
-        if (memory.thumbnail) {
-          // Use image as background of the entire node - NO separate elements
-          memoryElement.style.backgroundImage = `url('${memory.thumbnail}')`;
-          memoryElement.style.backgroundSize = 'cover';
-          memoryElement.style.backgroundPosition = 'center';
-
-        } else {
-          // Fallback to gradient with emoji
-          memoryElement.style.background = 'linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%)';
-          const emojiDiv = document.createElement('div');
-          emojiDiv.style.cssText = 'font-size: 24px; color: white;';
-          emojiDiv.textContent = '💝';
-          memoryElement.appendChild(emojiDiv);
-
-        }
-
-        // Add click handler to open memory capsule dialog
-        memoryElement.addEventListener('click', (e) => {
-          e.stopPropagation();
-          this.openMemoryCapsuleDialog(memory);
-        });
-
-        // Add hover effects
-        memoryElement.addEventListener('mouseenter', () => {
-          memoryElement.style.transform = 'scale(1.1)';
-          memoryElement.style.boxShadow = '0 0 40px rgba(139, 92, 246, 0.6), 0 0 80px rgba(139, 92, 246, 0.4)';
-        });
-
-        memoryElement.addEventListener('mouseleave', () => {
-          memoryElement.style.transform = 'scale(1)';
-          memoryElement.style.boxShadow = '0 8px 32px rgba(139, 92, 246, 0.4)';
-        });
-
-        document.body.appendChild(memoryElement);
-
-        // Animate in with random delay for organic feel
-        const delay = Math.random() * 500 + 100;
-        setTimeout(() => {
-          memoryElement.style.transform = 'scale(1)';
-          memoryElement.style.opacity = '1';
-        }, delay);
-
-        return memoryElement;
-      }
-
-      // Create the "Create New Memory" node element
-      createCreateMemoryNodeElement(x, y) {
-        const createElement = document.createElement('div');
-        createElement.className = 'memory-node create-memory-node';
-        // Safely create child elements
-        const thumbnail = document.createElement('div');
-        thumbnail.className = 'memory-thumbnail';
-        thumbnail.textContent = '➕';
-
-        const label = document.createElement('div');
-        label.className = 'memory-label';
-        label.textContent = 'New Memory';
-
-        createElement.appendChild(thumbnail);
-        createElement.appendChild(label);
-
-        // Style like radial menu items but with create memory styling
-        createElement.style.cssText = `
-          position: fixed;
-          left: ${x - 45}px;
-          top: ${y - 45}px;
-          width: 90px;
-          height: 90px;
-          background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(34, 197, 94, 0.2));
-          backdrop-filter: blur(20px);
-          border: 2px solid rgba(16, 185, 129, 0.4);
-          border-radius: 50%;
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          justify-content: center;
-          cursor: pointer;
-          transition: all 0.3s ease;
-          opacity: 0;
-          transform: scale(0);
-          box-shadow: 0 0 30px rgba(16, 185, 129, 0.3);
-          animation: float 6s ease-in-out infinite;
-          z-index: 10;
-          color: white;
-          font-size: 12px;
-        `;
-
-        // Add hover effect
-        createElement.addEventListener('mouseenter', () => {
-          createElement.style.transform = 'scale(1.1)';
-          createElement.style.boxShadow = '0 0 40px rgba(16, 185, 129, 0.5)';
-        });
-
-        createElement.addEventListener('mouseleave', () => {
-          createElement.style.transform = 'scale(1)';
-          createElement.style.boxShadow = '0 0 30px rgba(16, 185, 129, 0.3)';
-        });
-
-        // Add click handler to navigate to memory gallery for creation
-        createElement.addEventListener('click', (e) => {
-          e.stopPropagation();
-
-          // Simple solution: Just go to the memory gallery where users can create memories
-          window.location.href = 'gallery.html';
-        });
-
-        document.body.appendChild(createElement);
-
-        // Animate in
-        setTimeout(() => {
-          createElement.style.transform = 'scale(1)';
-          createElement.style.opacity = '1';
-        }, 100);
-
-        return createElement;
-      }
-
-      // Open Emma memory creation wizard (proper capture wizard)
-      openEmmaMemoryWizard() {
-
-        // CRITICAL FIX: Debug and ensure AssistantExperience is available
-
-        console.log('🧠 DEBUG: Available window objects:', Object.keys(window).filter(k => k.includes('Assistant') || k.includes('Experience')));
-
-        try {
-          // Wait a moment for scripts to load, then check again
-          setTimeout(() => {
-
-            if (window.AssistantExperience) {
-
-              // Create and show the full assistant experience popup
-              const assistantInstance = new window.AssistantExperience(
-                { x: window.innerWidth / 2, y: window.innerHeight / 2 },
-                { showCloseButton: true }
-              );
-              // Show the full popup - this will open with the voice wizard tab active
-              assistantInstance.show();
-              // Store reference for global access
-              window.assistantInstance = assistantInstance;
-            } else {
-              console.error('🧠 AssistantExperience STILL not available after delay!');
-              console.log('🧠 Available classes:', Object.keys(window).filter(k => k.endsWith('Experience')));
-              this.showToast('❌ Emma Assistant not loaded', 'error');
-            }
-          }, 100);
-
-        } catch (error) {
-          console.error('Failed to open Emma memory wizard:', error);
-          this.showToast('❌ Failed to open memory wizard', 'error');
-        }
-      }
-
-      // Fallback voice memory wizard
-      openVoiceMemoryWizard() {
-        console.log('🧠 Opening voice memory wizard (fallback)');
-
-        // Create a voice memory wizard modal similar to AssistantExperience
-        const modalHTML = `
-          <div class="voice-wizard-modal" style="
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: rgba(0, 0, 0, 0.8);
-            backdrop-filter: blur(12px);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            z-index: 10000;
-          ">
-            <div class="voice-wizard-content" style="
-              background: linear-gradient(135deg, rgba(138, 43, 226, 0.95), rgba(75, 0, 130, 0.95));
-              border-radius: 20px;
-              padding: 40px;
-              width: 90%;
-              max-width: 600px;
-              box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
-              border: 1px solid rgba(255, 255, 255, 0.2);
-              backdrop-filter: blur(20px);
-              color: white;
-              text-align: center;
-            ">
-              <div class="emma-section">
-                <div style="color: rgba(255, 255, 255, 0.8); font-size: 14px; margin-bottom: 8px;">EMMA ASKS</div>
-                <h1 style="margin: 0 0 24px 0; font-size: 28px; font-weight: 700;">
-                  What's your favorite memory with Mom? Take your time, I'm listening.
-                </h1>
-                <div class="suggestions" style="margin-bottom: 32px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;">
-                  <button class="suggestion-chip" style="
-                    padding: 8px 16px;
-                    background: rgba(255, 255, 255, 0.2);
-                    border: 1px solid rgba(255, 255, 255, 0.3);
-                    border-radius: 20px;
-                    color: white;
-                    font-size: 14px;
-                    cursor: pointer;
-                  ">Holiday traditions</button>
-                  <button class="suggestion-chip" style="
-                    padding: 8px 16px;
-                    background: rgba(255, 255, 255, 0.2);
-                    border: 1px solid rgba(255, 255, 255, 0.3);
-                    border-radius: 20px;
-                    color: white;
-                    font-size: 14px;
-                    cursor: pointer;
-                  ">Her wisdom</button>
-                  <button class="suggestion-chip" style="
-                    padding: 8px 16px;
-                    background: rgba(255, 255, 255, 0.2);
-                    border: 1px solid rgba(255, 255, 255, 0.3);
-                    border-radius: 20px;
-                    color: white;
-                    font-size: 14px;
-                    cursor: pointer;
-                  ">Family meals</button>
-                </div>
-              </div>
-
-              <div class="voice-capture" style="margin-bottom: 32px;">
-                <div class="voice-button-container" style="margin-bottom: 16px;">
-                  <button class="voice-button" style="
-                    width: 80px;
-                    height: 80px;
-                    border-radius: 50%;
-                    background: rgba(255, 255, 255, 0.2);
-                    border: 2px solid rgba(255, 255, 255, 0.3);
-                    color: white;
-                    cursor: pointer;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    margin: 0 auto;
-                  ">
-                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                      <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/>
-                      <path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
-                      <line x1="12" x2="12" y1="19" y2="22"/>
-                      <line x1="8" x2="16" y1="22" y2="22"/>
-                    </svg>
-                  </button>
-                </div>
-                <div style="color: rgba(255, 255, 255, 0.8); font-size: 14px;">Tap to start recording</div>
-              </div>
-
-              <div class="transcription" style="margin-bottom: 32px;">
-                <div style="color: rgba(255, 255, 255, 0.8); font-size: 14px; margin-bottom: 8px;">YOUR STORY</div>
-                <div style="
-                  background: rgba(255, 255, 255, 0.1);
-                  border-radius: 12px;
-                  padding: 20px;
-                  min-height: 80px;
-                  font-style: italic;
-                  color: rgba(255, 255, 255, 0.6);
-                ">Your words will appear here as you speak...</div>
-              </div>
-
-              <div style="margin-bottom: 24px;">
-                <div style="color: rgba(255, 255, 255, 0.8); font-size: 14px; margin-bottom: 8px;">1 of 5 questions</div>
-                <div style="
-                  width: 100%;
-                  height: 4px;
-                  background: rgba(255, 255, 255, 0.2);
-                  border-radius: 2px;
-                  overflow: hidden;
-                ">
-                  <div style="
-                    width: 20%;
-                    height: 100%;
-                    background: linear-gradient(90deg, #ffffff, rgba(255, 255, 255, 0.8));
-                    border-radius: 2px;
-                  "></div>
-                </div>
-              </div>
-
-              <div style="display: flex; gap: 12px; justify-content: center;">
-                <button class="skip-btn" style="
-                  padding: 14px 28px;
-                  border: 2px solid rgba(255, 255, 255, 0.3);
-                  background: rgba(255, 255, 255, 0.1);
-                  color: white;
-                  border-radius: 10px;
-                  cursor: pointer;
-                  font-size: 14px;
-                  font-weight: 500;
-                ">Skip</button>
-                <button class="continue-btn" style="
-                  padding: 14px 28px;
-                  border: none;
-                  background: rgba(255, 255, 255, 0.9);
-                  color: #6b46c1;
-                  border-radius: 10px;
-                  cursor: pointer;
-                  font-size: 14px;
-                  font-weight: 600;
-                ">Continue →</button>
-              </div>
-            </div>
-          </div>
-        `;
-
-        // Create and show modal
-        const modalElement = document.createElement('div');
-        modalElement.innerHTML = modalHTML;
-        const modal = modalElement.firstElementChild;
-        document.body.appendChild(modal);
-
-        // Add event listeners
-        const skipBtn = modal.querySelector('.skip-btn');
-        const continueBtn = modal.querySelector('.continue-btn');
-
-        skipBtn.addEventListener('click', () => modal.remove());
-        continueBtn.addEventListener('click', () => {
-          // For now, just show a message and close
-          this.showToast('🎤 Voice wizard coming soon!', 'info');
-          modal.remove();
-        });
-
-        // Close on outside click
-        modal.addEventListener('click', (e) => {
-          if (e.target === modal) {
-            modal.remove();
-          }
-        });
-      }
-
-      // Open memory capsule dialog (reuses existing memory dialog system)
-      openMemoryCapsuleDialog(memory) {
-
-        this.openMemoryDialog(memory);
-      }
-
-      // Create neural branches from central Emma neuron
-      createNeuralBranches(memories) {
-
-        const centerX = window.innerWidth / 2;
-        const centerY = window.innerHeight / 2;
-
-        // First layer - primary neurons directly connected to Emma
-        const primaryCount = Math.min(8, memories.length); // Max 8 primary branches
-        const primaryAngleStep = (Math.PI * 2) / primaryCount;
-        const primaryRadius = 200;
-
-        // Create primary neurons
-        const primaryNeurons = [];
-        for (let i = 0; i < primaryCount; i++) {
-          const angle = i * primaryAngleStep - Math.PI / 2;
-          const x = centerX + Math.cos(angle) * primaryRadius;
-          const y = centerY + Math.sin(angle) * primaryRadius;
-
-          if (memories[i]) {
-            const neuron = this.createMemoryNode(memories[i], x, y, memories[i].theme);
-            neuron.isPrimary = true;
-            neuron.connections.push(this.centralNeuron);
-            this.centralNeuron.connections.push(neuron);
-            primaryNeurons.push(neuron);
-            this.nodes.push(neuron);
-          }
-        }
-
-        // Create secondary and tertiary neurons branching from primaries
-        let memoryIndex = primaryCount;
-        primaryNeurons.forEach((primaryNeuron, primaryIndex) => {
-          // Calculate how many secondary neurons this primary should have
-          const remainingMemories = memories.length - memoryIndex;
-          const remainingPrimaries = primaryCount - primaryIndex;
-          const secondaryCount = Math.ceil(remainingMemories / remainingPrimaries);
-
-          // Create secondary neurons
-          for (let j = 0; j < secondaryCount && memoryIndex < memories.length; j++) {
-            const memory = memories[memoryIndex++];
-
-            // Position secondary neurons in an arc around the primary
-            const secondaryAngle = primaryIndex * primaryAngleStep +
-              (j - secondaryCount/2) * (Math.PI / 6) / secondaryCount;
-            const secondaryRadius = 120 + Math.random() * 60;
-
-            const x = primaryNeuron.x + Math.cos(secondaryAngle) * secondaryRadius;
-            const y = primaryNeuron.y + Math.sin(secondaryAngle) * secondaryRadius;
-
-            // Ensure within bounds
-            const padding = 100;
-            const finalX = Math.max(padding, Math.min(window.innerWidth - padding, x));
-            const finalY = Math.max(padding, Math.min(window.innerHeight - padding, y));
-
-            const secondaryNeuron = this.createMemoryNode(memory, finalX, finalY, memory.theme);
-            secondaryNeuron.isSecondary = true;
-            secondaryNeuron.connections.push(primaryNeuron);
-            primaryNeuron.connections.push(secondaryNeuron);
-            this.nodes.push(secondaryNeuron);
-          }
-        });
-
-      }
-
-      // Create individual memory node
-      createMemoryNode(memory, x, y, theme) {
-        console.log(`🌟 Creating memory node element for "${memory.title}" at (${x}, ${y})`);
-
-        const memoryElement = document.createElement('div');
-        memoryElement.className = 'memory-node';
-        memoryElement.innerHTML = `
-          <div class="memory-thumbnail">${memory.thumbnail}</div>
-          <div class="memory-label">${memory.title}</div>
-        `;
-
-        // Add theme data attribute for styling
-        memoryElement.setAttribute('data-theme', theme);
-
-        // Style the memory node
-        memoryElement.style.cssText = `
-          position: fixed;
-          left: ${x}px;
-          top: ${y}px;
-          width: 70px;
-          height: 70px;
-          border-radius: 50%;
-          background: radial-gradient(circle, rgba(255, 255, 255, 0.1), rgba(134, 88, 255, 0.2));
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          justify-content: center;
-          cursor: pointer;
-          transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-          transform: scale(0);
-          opacity: 0;
-          z-index: 1000;
-          color: white;
-        `;
-
-        // Add click handler for elegant memory dialog
-        memoryElement.addEventListener('click', (e) => {
-          e.stopPropagation();
-          this.openMemoryDialog(memory);
-        });
-
-        // Add hover effects with theme-based glow
-        memoryElement.addEventListener('mouseenter', () => {
-          const themeColors = {
-            family: 'rgba(255, 105, 135, 0.8)',
-            travel: 'rgba(52, 211, 153, 0.8)',
-            recent: 'rgba(96, 165, 250, 0.8)',
-            special: 'rgba(251, 191, 36, 0.8)'
-          };
-
-          memoryElement.style.transform = 'scale(1.3)';
-          memoryElement.style.boxShadow = `0 0 60px ${themeColors[theme] || 'rgba(134, 88, 255, 0.8)'}, 0 0 100px ${themeColors[theme] || 'rgba(134, 88, 255, 0.4)'}`;
-          memoryElement.style.zIndex = '1100';
-        });
-
-        memoryElement.addEventListener('mouseleave', () => {
-          memoryElement.style.transform = 'scale(1)';
-          memoryElement.style.boxShadow = '';
-          memoryElement.style.zIndex = '1000';
-        });
-
-        // Append to a container that's below the canvas
-        const container = document.querySelector('.dashboard') || document.body;
-        container.appendChild(memoryElement);
-
-        // Animate in with staggered timing
-        const delay = Math.random() * 500 + 200; // 200-700ms delay
-        setTimeout(() => {
-
-          memoryElement.style.transform = 'scale(1)';
-          memoryElement.style.opacity = '1';
-        }, delay);
-
-        return {
-          element: memoryElement,
-          x: x,
-          y: y,
-          baseX: x,
-          baseY: y,
-          vx: 0,
-          vy: 0,
-          memory: memory,
-          theme: theme,
-          connections: []
-        };
-      }
-
-      // Create person node element for constellation
-      createPersonNodeElement(person, x, y) {
-        const personElement = document.createElement('div');
-        personElement.className = 'person-node';
-
-        // Create person avatar with first letter of name
-        const avatar = person.name.charAt(0).toUpperCase();
-        const relationColor = this.getRelationColor(person.relation);
-
-        // Create ONLY the avatar circle - NO TEXT LABELS
-        personElement.style.cssText = `
-          position: fixed;
-          left: ${x}px;
-          top: ${y}px;
-          width: 70px;
-          height: 70px;
-          border-radius: 50%;
-          background: ${relationColor.gradient};
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          color: white;
-          font-weight: 700;
-          font-size: 24px;
-          border: 3px solid ${relationColor.border};
-          box-shadow: 0 8px 32px ${relationColor.glow};
-          overflow: hidden;
-          cursor: pointer;
-          transform: scale(0);
-          opacity: 0;
-          transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-          z-index: 1000;
-        `;
-
-        // Start with letter, then try to load avatar image
-        personElement.textContent = avatar;
-
-        // Try to load actual avatar image if person has one
-        if (person.avatarId) {
-          this.loadPersonAvatar(person, personElement, avatar);
-        }
-
-        // Add click handler to open person summary modal
-        personElement.addEventListener('click', (e) => {
-          e.stopPropagation();
-          this.openPersonSummaryModal(person);
-        });
-
-        // Add hover effects with relation-based glow
-        personElement.addEventListener('mouseenter', () => {
-          personElement.style.transform = 'scale(1.2)';
-          personElement.style.boxShadow = `0 0 40px ${relationColor.glow}, 0 0 80px ${relationColor.glow}`;
-          personElement.style.zIndex = '1100';
-        });
-
-        personElement.addEventListener('mouseleave', () => {
-          personElement.style.transform = 'scale(1)';
-          personElement.style.boxShadow = '';
-          personElement.style.zIndex = '1000';
-        });
-
-        // Append to container
-        const container = document.querySelector('.dashboard') || document.body;
-        container.appendChild(personElement);
-
-        // Animate in with staggered timing
-        const delay = Math.random() * 500 + 300; // 300-800ms delay
-        setTimeout(() => {
-
-          personElement.style.transform = 'scale(1)';
-          personElement.style.opacity = '1';
-        }, delay);
-
-        return personElement;
-      }
-
-      // Load actual avatar image for person node
-      async loadPersonAvatar(person, personElement, fallbackLetter) {
-        try {
-
-          const avatarResult = await window.emmaAPI.vault.attachment.get(person.avatarId);
-
-          if (avatarResult && avatarResult.success && avatarResult.dataUrl) {
-            // Create image element
-            const img = document.createElement('img');
-            img.src = avatarResult.dataUrl;
-            img.alt = `${person.name} avatar`;
-            img.style.cssText = `
-              width: 100%;
-              height: 100%;
-              object-fit: cover;
-              border-radius: 50%;
-            `;
-
-            img.onload = () => {
-              // Replace letter with image once loaded
-              personElement.innerHTML = '';
-              personElement.appendChild(img);
-
-            };
-
-            img.onerror = () => {
-              console.error('📷 CONSTELLATION: Failed to display avatar for:', person.name);
-              // Keep the letter fallback
-            };
-          } else {
-            console.warn('📷 CONSTELLATION: No avatar data for:', person.name);
-          }
-        } catch (error) {
-          console.error('📷 CONSTELLATION: Error loading avatar for:', person.name, error);
-          // Keep the letter fallback
-        }
-      }
-
-      // Open revolutionary migration page
-      openMigrationPage() {
-
-        window.location.href = 'vault-migration.html';
-      }
-
-      // Open person summary modal with connected memories
-      async openPersonSummaryModal(person) {
-
-        // Find memories connected to this person
-        const allMemories = [];
-        Object.keys(this.constellationMemories).forEach(theme => {
-          this.constellationMemories[theme].forEach(memory => {
-            allMemories.push({ ...memory, theme });
-          });
-        });
-
-        // Find memories that mention this person or are tagged with them
-        const connectedMemories = allMemories.filter(memory => {
-          const content = (memory.content || '').toLowerCase();
-          const title = (memory.title || '').toLowerCase();
-          const personName = person.name.toLowerCase();
-
-          // Check if person's name is mentioned in content or title
-          return content.includes(personName) || title.includes(personName);
-        });
-
-        // Create modal HTML with Emma branding and elegant layout
-        const modalHTML = `
-          <div class="person-summary-modal-overlay" id="person-summary-overlay" onclick="window.memoryConstellation.closePersonSummaryModal()" style="
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: rgba(0, 0, 0, 0.8);
-            backdrop-filter: blur(10px);
-            z-index: 2147483647;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            animation: fadeIn 0.3s ease;
-          ">
-            <div class="person-summary-modal" onclick="event.stopPropagation()" style="
-              background: linear-gradient(135deg, #1a1033 0%, #2d1b69 50%, #0f0c29 100%);
-              border: 1px solid rgba(255, 255, 255, 0.1);
-              border-radius: 24px;
-              width: 90%;
-              max-width: 600px;
-              max-height: 80vh;
-              overflow: hidden;
-              color: white;
-              box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
-              position: relative;
-              animation: scaleIn 0.3s ease;
-            ">
-              <button class="modal-close" onclick="window.memoryConstellation.closePersonSummaryModal()" style="
-                position: absolute;
-                top: 20px;
-                right: 20px;
-                background: rgba(255, 255, 255, 0.1);
-                border: none;
-                color: white;
-                width: 40px;
-                height: 40px;
-                border-radius: 50%;
-                cursor: pointer;
-                font-size: 20px;
-                z-index: 10;
-                transition: all 0.2s ease;
-              " onmouseover="this.style.background='rgba(255, 255, 255, 0.2)'" onmouseout="this.style.background='rgba(255, 255, 255, 0.1)'">×</button>
-
-              <div class="person-summary-header" style="
-                padding: 32px;
-                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-                display: flex;
-                align-items: center;
-                gap: 20px;
-                position: relative;
-              ">
-                <div class="person-summary-avatar" id="person-summary-avatar" style="
-                  width: 80px;
-                  height: 80px;
-                  border-radius: 50%;
-                  background: linear-gradient(135deg, #8658ff, #f093fb);
-                  display: flex;
-                  align-items: center;
-                  justify-content: center;
-                  font-size: 32px;
-                  font-weight: 600;
-                  color: white;
-                  border: 3px solid rgba(255, 255, 255, 0.2);
-                  flex-shrink: 0;
-                ">
-                  ${person.name.charAt(0).toUpperCase()}
-                </div>
-                <div class="person-summary-info" style="
-                  flex: 1;
-                ">
-                  <h2 class="person-summary-name" style="
-                    margin: 0 0 8px 0;
-                    font-size: 28px;
-                    font-weight: 600;
-                    color: white;
-                  ">${person.name}</h2>
-                  <p class="person-summary-relation" style="
-                    margin: 0 0 4px 0;
-                    font-size: 16px;
-                    color: rgba(255, 255, 255, 0.7);
-                  ">${person.relation || 'Contact'}</p>
-                  <p class="person-summary-contact" style="
-                    margin: 0;
-                    font-size: 14px;
-                    color: rgba(255, 255, 255, 0.5);
-                  ">${person.contact || ''}</p>
-                </div>
-                
-                <!-- Connected Memories Count & Mini Avatars - Elegantly positioned top-right -->
-                <div class="connected-people-avatars" style="
-                  position: absolute;
-                  top: 32px;
-                  right: 80px;
-                  display: flex;
-                  flex-direction: column;
-                  align-items: flex-end;
-                  gap: 8px;
-                ">
-                  ${connectedMemories.length > 0 ? `
-                    <div style="
-                      font-size: 12px;
-                      color: rgba(255, 255, 255, 0.6);
-                      text-align: right;
-                      line-height: 1.3;
-                    ">${connectedMemories.length} shared<br/>memor${connectedMemories.length === 1 ? 'y' : 'ies'}</div>
-                    <div style="
-                      display: flex;
-                      gap: -6px;
-                      justify-content: flex-end;
-                      max-width: 100px;
-                    ">
-                      ${connectedMemories.slice(0, 3).map((memory, index) => `
-                        <div style="
-                          width: 28px;
-                          height: 28px;
-                          border-radius: 50%;
-                          background: linear-gradient(135deg, #8658ff, #f093fb);
-                          border: 2px solid rgba(255, 255, 255, 0.3);
-                          display: flex;
-                          align-items: center;
-                          justify-content: center;
-                          font-size: 12px;
-                          color: white;
-                          font-weight: 600;
-                          margin-left: ${index > 0 ? '-6px' : '0'};
-                          z-index: ${3 - index};
-                          position: relative;
-                          cursor: pointer;
-                          transition: all 0.2s ease;
-                        " title="${memory.title || 'Untitled Memory'}"
-                           onclick="event.stopPropagation(); window.memoryConstellation.openMemoryFromPerson('${memory.id}')"
-                           onmouseover="this.style.transform='scale(1.2)'; this.style.zIndex='10'"
-                           onmouseout="this.style.transform='scale(1)'; this.style.zIndex='${3 - index}'">
-                          💝
-                        </div>
-                      `).join('')}
-                      ${connectedMemories.length > 3 ? `
-                        <div style="
-                          width: 28px;
-                          height: 28px;
-                          border-radius: 50%;
-                          background: rgba(255, 255, 255, 0.1);
-                          border: 2px solid rgba(255, 255, 255, 0.3);
-                          display: flex;
-                          align-items: center;
-                          justify-content: center;
-                          font-size: 10px;
-                          color: white;
-                          font-weight: 600;
-                          margin-left: -6px;
-                        ">+${connectedMemories.length - 3}</div>
-                      ` : ''}
-                    </div>
-                  ` : `
-                    <div style="
-                      font-size: 12px;
-                      color: rgba(255, 255, 255, 0.4);
-                      text-align: right;
-                    ">No shared<br/>memories</div>
-                  `}
-                </div>
-              </div>
-
-              <div class="person-summary-content" style="
-                padding: 32px;
-                max-height: 400px;
-                overflow-y: auto;
-              ">
-                <h3 class="summary-section-title" style="
-                  margin: 0 0 20px 0;
-                  font-size: 20px;
-                  font-weight: 600;
-                  color: white;
-                  display: flex;
-                  align-items: center;
-                  gap: 8px;
-                ">💝 Connected Memories</h3>
-                <div class="connected-memories" style="
-                  display: grid;
-                  gap: 12px;
-                ">
-                  ${connectedMemories.length > 0 ?
-                    connectedMemories.map(memory => `
-                      <div class="connected-memory-item" onclick="window.memoryConstellation.openMemoryFromPerson('${memory.id}')" style="
-                        background: rgba(255, 255, 255, 0.05);
-                        border: 1px solid rgba(255, 255, 255, 0.1);
-                        border-radius: 16px;
-                        padding: 16px;
-                        cursor: pointer;
-                        transition: all 0.2s ease;
-                        display: flex;
-                        align-items: center;
-                        gap: 16px;
-                      " onmouseover="this.style.background='rgba(255, 255, 255, 0.1)'; this.style.transform='translateY(-2px)'" onmouseout="this.style.background='rgba(255, 255, 255, 0.05)'; this.style.transform='translateY(0)'">
-                        <div class="memory-preview" style="
-                          width: 48px;
-                          height: 48px;
-                          border-radius: 12px;
-                          background: linear-gradient(135deg, #8658ff, #f093fb);
-                          display: flex;
-                          align-items: center;
-                          justify-content: center;
-                          font-size: 20px;
-                          flex-shrink: 0;
-                        ">
-                          ${memory.thumbnail ? `<img src="${memory.thumbnail}" alt="Memory" style="width: 100%; height: 100%; object-fit: cover; border-radius: 12px;">` : '💝'}
-                        </div>
-                        <div class="memory-info" style="
-                          flex: 1;
-                          min-width: 0;
-                        ">
-                          <div class="memory-title" style="
-                            font-size: 16px;
-                            font-weight: 600;
-                            color: white;
-                            margin-bottom: 4px;
-                            white-space: nowrap;
-                            overflow: hidden;
-                            text-overflow: ellipsis;
-                          ">${memory.title || 'Untitled Memory'}</div>
-                          <div class="memory-date" style="
-                            font-size: 14px;
-                            color: rgba(255, 255, 255, 0.6);
-                          ">${new Date(memory.date || memory.timestamp).toLocaleDateString()}</div>
-                        </div>
-                      </div>
-                    `).join('') :
-                    `<div class="no-memories" style="
-                      text-align: center;
-                      padding: 40px 20px;
-                      color: rgba(255, 255, 255, 0.6);
-                    ">
-                      <div style="font-size: 48px; margin-bottom: 16px;">💫</div>
-                      <p style="margin: 0 0 8px 0; font-size: 16px;">No connected memories yet</p>
-                      <p style="margin: 0; font-size: 14px; color: rgba(255, 255, 255, 0.4);">Create beautiful memories together!</p>
-                    </div>`
-                  }
-                </div>
-
-                <div class="person-summary-actions" style="
-                  display: flex;
-                  gap: 12px;
-                  margin-top: 24px;
-                  padding-top: 24px;
-                  border-top: 1px solid rgba(255, 255, 255, 0.1);
-                ">
-                  <button class="btn btn-primary" onclick="window.memoryConstellation.createMemoryWithPersonFromConstellation('${person.id}')" style="
-                    background: linear-gradient(135deg, #8658ff, #f093fb);
-                    border: none;
-                    color: white;
-                    padding: 12px 24px;
-                    border-radius: 12px;
-                    cursor: pointer;
-                    font-size: 16px;
-                    font-weight: 600;
-                    flex: 1;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    gap: 8px;
-                    transition: all 0.2s ease;
-                  " onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 8px 25px rgba(134, 88, 255, 0.3)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='none'">
-                    <span>✨</span>
-                    Create Memory Together
-                  </button>
-                  <button class="btn btn-secondary" onclick="window.location.href='people-emma.html'" style="
-                    background: rgba(255, 255, 255, 0.1);
-                    border: 1px solid rgba(255, 255, 255, 0.2);
-                    color: white;
-                    padding: 12px 24px;
-                    border-radius: 12px;
-                    cursor: pointer;
-                    font-size: 16px;
-                    font-weight: 500;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    gap: 8px;
-                    transition: all 0.2s ease;
-                  " onmouseover="this.style.background='rgba(255, 255, 255, 0.2)'" onmouseout="this.style.background='rgba(255, 255, 255, 0.1)'">
-                    <span>👥</span>
-                    Manage People
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-        `;
-
-        // Add modal animations CSS
-        if (!document.getElementById('emma-constellation-modal-styles')) {
-          const styleElement = document.createElement('style');
-          styleElement.id = 'emma-constellation-modal-styles';
-          styleElement.textContent = `
-            @keyframes fadeIn {
-              from { opacity: 0; }
-              to { opacity: 1; }
-            }
-            @keyframes scaleIn {
-              from { 
-                opacity: 0; 
-                transform: scale(0.9) translateY(20px); 
-              }
-              to { 
-                opacity: 1; 
-                transform: scale(1) translateY(0); 
-              }
-            }
-            .person-summary-modal-overlay {
-              animation: fadeIn 0.3s ease;
-            }
-            .person-summary-modal {
-              animation: scaleIn 0.3s ease;
-            }
-          `;
-          document.head.appendChild(styleElement);
-        }
-
-        // Add modal to body
-        document.body.insertAdjacentHTML('beforeend', modalHTML);
-
-        // Make constellation functions globally accessible for modal
-        window.memoryConstellation = this;
-
-        // Load avatar if available - CRITICAL for showing person's image
-        if (person.avatarId) {
-          this.loadAvatarForSummary(person);
-        }
-
-        // Show modal with animation
-        setTimeout(() => {
-          document.getElementById('person-summary-overlay').classList.add('active');
-        }, 10);
-      }
-
-      async loadAvatarForSummary(person) {
-        try {
-
-          const avatarResult = await window.emmaAPI.vault.attachment.get(person.avatarId);
-          if (avatarResult && avatarResult.success && avatarResult.dataUrl) {
-            const avatarElement = document.getElementById('person-summary-avatar');
-            if (avatarElement) {
-
-              // Safely create img element with proper attribute setting
-              const img = document.createElement('img');
-              img.src = avatarResult.dataUrl;
-              img.alt = person.name; // Safe - browser automatically escapes alt text
-              img.style.cssText = 'width: 100%; height: 100%; object-fit: cover; border-radius: 50%; position: absolute; top: 0; left: 0;';
-              avatarElement.innerHTML = ''; // Clear existing content
-              avatarElement.appendChild(img);
-            } else {
-              console.error('📷 SUMMARY: Avatar element not found in DOM');
-            }
-          } else {
-            console.warn('📷 SUMMARY: No avatar data returned for:', person.name);
-          }
-        } catch (error) {
-          console.error('📷 SUMMARY: Error loading avatar for:', person.name, error);
-        }
-      }
-
-      closePersonSummaryModal() {
-        const overlay = document.getElementById('person-summary-overlay');
-        if (overlay) {
-          overlay.classList.remove('active');
-          setTimeout(() => overlay.remove(), 300);
-        }
-      }
-
-      createMemoryWithPersonFromConstellation(personId) {
-        this.closePersonSummaryModal();
-        window.location.href = `dashboard-new.html?createMemory=true&person=${personId}`;
-      }
-
-      openMemoryFromPerson(memoryId) {
-        this.closePersonSummaryModal();
-        this.openMemoryDialog(this.constellationMemories.find(m => m.id === memoryId));
-      }
-
-      // Get relation-specific colors for people nodes
-      getRelationColor(relation) {
-        const colors = {
-          family: {
-            gradient: 'linear-gradient(135deg, #ef4444, #f87171)',
-            border: 'rgba(239, 68, 68, 0.6)',
-            glow: 'rgba(239, 68, 68, 0.8)'
-          },
-          friend: {
-            gradient: 'linear-gradient(135deg, #3b82f6, #60a5fa)',
-            border: 'rgba(59, 130, 246, 0.6)',
-            glow: 'rgba(59, 130, 246, 0.8)'
-          },
-          colleague: {
-            gradient: 'linear-gradient(135deg, #10b981, #34d399)',
-            border: 'rgba(16, 185, 129, 0.6)',
-            glow: 'rgba(16, 185, 129, 0.8)'
-          },
-          romantic: {
-            gradient: 'linear-gradient(135deg, #ec4899, #f472b6)',
-            border: 'rgba(236, 72, 153, 0.6)',
-            glow: 'rgba(236, 72, 153, 0.8)'
-          }
-        };
-
-        return colors[relation] || colors.friend; // Default to friend colors
-      }
-
-      // Open person dialog (placeholder)
-      openPersonDialog(person) {
-
-        this.showToast(`👥 ${person.name} (${person.relation})`, 'info');
-      }
-
-      // Create intelligent connections between memory nodes and people nodes
-      createMemoryPeopleConnections(memories, people) {
-
-        const memoryNodes = this.nodes.filter(node => node.type === 'memory');
-        const peopleNodes = this.nodes.filter(node => node.type === 'person');
-
-        // For each memory, connect to people who were involved
-        memoryNodes.forEach(memoryNode => {
-          const memory = memoryNode.memory;
-
-          // Check if memory has people data (from wizard selections, manual input, OR new metadata.people format)
-          let peopleToConnect = [];
-          
-          // NEW FORMAT: Check metadata.people first (preferred)
-          if (memory.metadata && memory.metadata.people && Array.isArray(memory.metadata.people)) {
-            peopleToConnect = memory.metadata.people;
-            console.log('🔗 CONSTELLATION: Using metadata.people format:', peopleToConnect);
-          }
-          // LEGACY FORMAT: Fallback to selectedPeople for backward compatibility
-          else if (memory.selectedPeople && Array.isArray(memory.selectedPeople)) {
-            peopleToConnect = memory.selectedPeople;
-            console.log('🔗 CONSTELLATION: Using legacy selectedPeople format:', peopleToConnect);
-          }
-          
-          // Create connections for all people
-          peopleToConnect.forEach(personId => {
-            const personNode = peopleNodes.find(pNode => pNode.person.id === personId);
-            if (personNode && !memoryNode.connections.includes(personNode)) {
-              memoryNode.connections.push(personNode);
-              personNode.connections.push(memoryNode);
-              console.log(`🔗 CONSTELLATION: Connected memory "${memory.title}" to person "${personNode.person.name}"`);
-            }
-          });
-
-          // Also check if people are mentioned in memory content/responses
-          const memoryText = (memory.content || '').toLowerCase() + ' ' +
-                            (memory.responses || []).join(' ').toLowerCase();
-
-          peopleNodes.forEach(personNode => {
-            const personName = personNode.person.name.toLowerCase();
-
-            // If person's name is mentioned in the memory text, create connection
-            if (memoryText.includes(personName) && !memoryNode.connections.includes(personNode)) {
-              memoryNode.connections.push(personNode);
-              personNode.connections.push(memoryNode);
-              console.log(`🔗 Auto-connected memory "${memory.title}" to person "${personNode.person.name}" (name mentioned)`);
-            }
-          });
-        });
-
-        // Create some random connections for people who aren't connected to anything
-        peopleNodes.forEach(personNode => {
-          if (personNode.connections.length === 0) {
-            // Connect to the closest memory node
-            let closestMemory = null;
-            let closestDistance = Infinity;
-
-            memoryNodes.forEach(memoryNode => {
-              const dx = personNode.x - memoryNode.x;
-              const dy = personNode.y - memoryNode.y;
-              const distance = Math.sqrt(dx * dx + dy * dy);
-
-              if (distance < closestDistance && memoryNode.connections.length < 3) {
-                closestDistance = distance;
-                closestMemory = memoryNode;
-              }
-            });
-
-            if (closestMemory) {
-              personNode.connections.push(closestMemory);
-              closestMemory.connections.push(personNode);
-
-            }
-          }
-        });
-
-      }      // Update neural network node positions with overlap prevention
-      updateConstellationNodes() {
-        const time = Date.now() * 0.001;
-
-        // Update all memory nodes
-        this.nodes.forEach((node, i) => {
-          // Reset forces
-          let forceX = 0;
-          let forceY = 0;
-
-          // Repulsion from other nodes to prevent overlap
-          this.nodes.forEach((otherNode, j) => {
-            if (i !== j) {
-              const dx = node.x - otherNode.x;
-              const dy = node.y - otherNode.y;
-              const distance = Math.sqrt(dx * dx + dy * dy);
-
-              const minDistance = node.isPrimary || otherNode.isPrimary ? 150 : 120;
-              if (distance < minDistance) {
-                const force = (minDistance - distance) / distance * 0.3;
-                forceX += dx * force;
-                forceY += dy * force;
-              }
-            }
-          });
-
-          // Also repel from central neuron
-          if (this.centralNeuron) {
-            const dx = node.x - this.centralNeuron.x;
-            const dy = node.y - this.centralNeuron.y;
-            const distance = Math.sqrt(dx * dx + dy * dy);
-
-            if (distance < 150) {
-              const force = (150 - distance) / distance * 0.4;
-              forceX += dx * force;
-              forceY += dy * force;
-            }
-          }
-
-          // Gentle attraction to base position
-          const baseAttraction = node.isPrimary ? 0.03 : 0.02;
-          forceX += (node.baseX - node.x) * baseAttraction;
-          forceY += (node.baseY - node.y) * baseAttraction;
-
-          // Subtle floating motion - less for primary nodes
-          const floatAmplitude = node.isPrimary ? 1.5 : 2.5;
-          const floatX = Math.sin(time * 0.15 + i * 0.7) * floatAmplitude;
-          const floatY = Math.cos(time * 0.12 + i * 0.5) * floatAmplitude;
-
-          // Apply forces
-          node.vx = (node.vx + forceX) * 0.92; // Damping
-          node.vy = (node.vy + forceY) * 0.92;
-
-          // Update position
-          node.x += node.vx + floatX * 0.4;
-          node.y += node.vy + floatY * 0.4;
-
-          // Keep within bounds
-          const padding = 80;
-          node.x = Math.max(padding, Math.min(window.innerWidth - padding, node.x));
-          node.y = Math.max(padding, Math.min(window.innerHeight - padding, node.y));
-
-          // Update DOM position
-          if (node.element) {
-            node.element.style.left = node.x + 'px';
-            node.element.style.top = node.y + 'px';
-          }
-        });
-
-        // The central neuron (Emma orb) stays fixed at center
-        if (this.centralNeuron) {
-          this.centralNeuron.x = window.innerWidth / 2;
-          this.centralNeuron.y = window.innerHeight / 2;
-        }
-      }
-
-      // Show constellation UI controls
-      showConstellationUI() {
-        // Add constellation controls
-        const constellationControls = document.createElement('div');
-        constellationControls.className = 'constellation-controls';
-        constellationControls.innerHTML = `
-          <div class="constellation-header">
-            <h3>🌟 Memory Constellations</h3>
-            <button class="constellation-close" onclick="dashboard.exitMemoryConstellation()">✕</button>
-          </div>
-          <div class="constellation-themes">
-            ${Object.keys(this.constellationMemories).map(theme =>
-              `<button class="theme-filter ${this.constellationMemories[theme].length > 0 ? 'active' : 'disabled'}"
-                       data-theme="${theme}" onclick="dashboard.filterByTheme('${theme}')">
-                ${theme.charAt(0).toUpperCase() + theme.slice(1)} (${this.constellationMemories[theme].length})
-              </button>`
-            ).join('')}
-          </div>
-        `;
-
-        constellationControls.style.cssText = `
-          position: fixed;
-          top: 20px;
-          left: 20px;
-          background: rgba(17, 17, 27, 0.9);
-          border: 1px solid rgba(134, 88, 255, 0.3);
-          border-radius: 12px;
-          padding: 20px;
-          z-index: 2000;
-          backdrop-filter: blur(10px);
-        `;
-
-        document.body.appendChild(constellationControls);
-        this.constellationUI = constellationControls;
-      }
-
-      // Removed fadeOutMemoryNodes and fadeInMemoryNodes - no longer needed since constellation mode exits to main dashboard
-
-      // Completely clear all memory nodes from DOM (prevents duplicates)
-      clearAllMemoryNodesFromDOM() {
-
-        // Remove all memory-node, person-node, and create-memory-node elements (including orphaned ones)
-        const existingMemoryNodes = document.querySelectorAll('.memory-node, .create-memory-node, .person-node');
-        existingMemoryNodes.forEach(node => {
-
-          node.remove();
-        });
-
-        // Clear ONLY memory nodes from the nodes array (preserve radial menu items)
-        if (this.nodes) {
-          this.nodes.forEach(node => {
-            if (node.element && node.element.parentNode) {
-              // Only remove if it's a constellation node, NOT a radial menu item
-              if (node.element.classList.contains('memory-node') ||
-                  node.element.classList.contains('create-memory-node') ||
-                  node.element.classList.contains('person-node')) {
-
-                node.element.remove();
-              } else {
-
-              }
-            }
-          });
-          // Filter out only the constellation nodes, keep radial items
-          this.nodes = this.nodes.filter(node =>
-            !node.element.classList.contains('memory-node') &&
-            !node.element.classList.contains('create-memory-node') &&
-            !node.element.classList.contains('person-node')
-          );
-        }
-
-        // Reset central node
-        this.centralNode = null;
-
-      }
-
-      // Exit constellation mode
-      exitMemoryConstellation() {
-
-        this.isConstellationMode = false;
-
-        // Stop neural animation (EXACT same as main menu)
-        this.isMenuOpen = false;
-        if (this.neuralAnimationId) {
-          cancelAnimationFrame(this.neuralAnimationId);
-          this.neuralCtx.clearRect(0, 0, this.neuralCanvas.width, this.neuralCanvas.height);
-        }
-
-        // Remove constellation-active class to restore UI
-        document.body.classList.remove('constellation-active');
-        document.body.classList.remove('menu-active');
-        this.radialMenu.classList.remove('active');
-
-        // Restore central orb size
-        this.restoreCentralOrb();
-
-        // Remove constellation UI
-        if (this.constellationUI) {
-          this.constellationUI.remove();
-          this.constellationUI = null;
-        }
-
-        // CRITICAL: Use thorough DOM cleanup to prevent duplicates
-        this.clearAllMemoryNodesFromDOM();
-
-        // Clear animation
-        if (this.neuralAnimationId) {
-          cancelAnimationFrame(this.neuralAnimationId);
-          this.neuralCtx.clearRect(0, 0, this.neuralCanvas.width, this.neuralCanvas.height);
-        }
-
-        // Reset nodes
-        this.nodes = [];
-
-        // Hide radial menu
-        this.radialMenu.classList.remove('active');
-        this.isMenuOpen = false;
-
-        // Reset radial menu items to default state
-        const radialItems = this.radialMenu.querySelectorAll('.radial-item');
-
-        radialItems.forEach((item, i) => {
-
-          item.style.opacity = '0';
-          item.style.transform = 'scale(0)';
-          // CRITICAL: Reset positioning to default
-          item.style.left = '';
-          item.style.top = '';
-          item.style.animationPlayState = 'running';
-        });
-      }
-
-      // Sanitize title to remove base64 or corrupted data
-      sanitizeTitle(title) {
-        if (!title || typeof title !== 'string') return 'Untitled Memory';
-
-        // Check if it looks like base64 or corrupted data
-        if (title.length > 50 || /^[A-Za-z0-9+\/=]{20,}$/.test(title)) {
-          return 'Memory Capsule';
-        }
-
-        // Remove any non-printable characters and limit length
-        const cleaned = title.replace(/[^\x20-\x7E]/g, '').trim();
-        return cleaned.length > 0 ? cleaned.substring(0, 50) : 'Untitled Memory';
-      }
-
-      // Open elegant memory dialog with media slideshow
-      openMemoryDialog(memory) {
-
-        // Create memory dialog modal
-        const memoryDialog = document.createElement('div');
-        memoryDialog.className = 'memory-dialog-overlay';
-        const formattedDate = memory.date ? new Date(memory.date).toLocaleDateString('en-US', {
-          weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'
-        }) : 'Unknown date';
-
-        const thumbnail = memory.thumbnail || this.generateMemoryThumbnail(memory.category || memory.theme || 'special');
-        const mediaItems = memory.mediaItems || [];
-
-        memoryDialog.innerHTML = `
-          <div class="memory-dialog" style="
-            background: linear-gradient(135deg, rgba(20, 20, 30, 0.98), rgba(30, 30, 40, 0.98));
-            backdrop-filter: blur(20px);
-            border: 1px solid rgba(134, 88, 255, 0.3);
-            border-radius: 20px;
-            max-width: 600px;
-            width: 90%;
-            max-height: 80vh;
-            overflow-y: auto;
-            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
-            padding: 0;
-          ">
-            <div class="memory-dialog-header" style="
-              padding: 24px 32px 16px 32px;
-              border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-              display: flex;
-              justify-content: space-between;
-              align-items: flex-start;
-              position: relative;
-            ">
-              <!-- Left: Memory Title -->
-              <div style="flex: 1;">
-                <h2 style="color: white; margin: 0; font-size: 24px; font-weight: 600; line-height: 1.3;">${this.sanitizeTitle(memory.title)}</h2>
-                <div style="color: rgba(255, 255, 255, 0.6); font-size: 14px; margin-top: 8px;">
-                  📅 ${formattedDate}
-                  ${memory.category ? ` • <span style="
-                    background: rgba(134, 88, 255, 0.2);
-                    padding: 2px 8px;
-                    border-radius: 12px;
-                    font-size: 12px;
-                    text-transform: capitalize;
-                  ">✨ ${memory.category}</span>` : ''}
-                </div>
-              </div>
-
-              <!-- Right: People Avatars + Close Button -->
-              <div style="display: flex; align-items: flex-start; gap: 12px;">
-                ${(() => {
-                  const people = memory.metadata?.people || memory.people || [];
-                  if (!people || people.length === 0) return '';
-
-                  // Get people data from vault to resolve IDs to names/avatars
-                  const vaultPeople = window.emmaWebVault?.vaultData?.content?.people || {};
-                  
-                  const connectedPeopleAvatars = people.slice(0, 3).map((personId, index) => {
-                    const person = vaultPeople[personId];
-                    if (!person) return '';
-                    
-                    const initials = (person.name || '?').split(' ').map(n => n[0]).join('').slice(0,2).toUpperCase();
-                    const hasAvatar = person.avatarUrl || person.profilePicture;
-                    
-                    return `
-                      <div style="
-                        position: relative;
-                        margin-left: ${index > 0 ? '-8px' : '0'};
-                        z-index: ${10 - index};
-                        cursor: pointer;
-                        transition: all 0.2s ease;
-                      " 
-                      title="${person.name || 'Unknown Person'}"
-                      onmouseover="this.style.transform='scale(1.1)'; this.style.zIndex='20'"
-                      onmouseout="this.style.transform='scale(1)'; this.style.zIndex='${10 - index}'">
-                        ${hasAvatar ? `
-                          <img src="${person.avatarUrl || person.profilePicture}" 
-                               alt="${person.name}" 
-                               style="
-                                 width: 40px; 
-                                 height: 40px; 
-                                 border-radius: 50%; 
-                                 object-fit: cover;
-                                 border: 3px solid rgba(255, 255, 255, 0.3);
-                                 background: linear-gradient(135deg, #8658ff, #f093fb);
-                               "
-                               onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';" />
-                          <div style="
-                            width: 40px; 
-                            height: 40px; 
-                            border-radius: 50%; 
-                            background: linear-gradient(135deg, #8658ff, #f093fb);
-                            border: 3px solid rgba(255, 255, 255, 0.3);
-                            display: none;
-                            align-items: center; 
-                            justify-content: center; 
-                            color: white; 
-                            font-size: 16px; 
-                            font-weight: 600;
-                          ">${initials}</div>
-                        ` : `
-                          <div style="
-                            width: 40px; 
-                            height: 40px; 
-                            border-radius: 50%; 
-                            background: linear-gradient(135deg, #8658ff, #f093fb);
-                            border: 3px solid rgba(255, 255, 255, 0.3);
-                            display: flex;
-                            align-items: center; 
-                            justify-content: center; 
-                            color: white; 
-                            font-size: 16px; 
-                            font-weight: 600;
-                          ">${initials}</div>
-                        `}
-                      </div>
-                    `;
-                  }).join('');
-
-                  // Add overflow indicator if more than 3 people
-                  const overflowIndicator = people.length > 3 ? `
-                    <div style="
-                      width: 40px; 
-                      height: 40px; 
-                      border-radius: 50%; 
-                      background: rgba(255, 255, 255, 0.1);
-                      border: 3px solid rgba(255, 255, 255, 0.3);
-                      display: flex;
-                      align-items: center; 
-                      justify-content: center; 
-                      color: white; 
-                      font-size: 14px; 
-                      font-weight: 600;
-                      margin-left: -8px;
-                      z-index: 5;
-                    " title="${people.length - 3} more people">+${people.length - 3}</div>
-                  ` : '';
-
-                  return `
-                    <div style="
-                      display: flex; 
-                      align-items: center;
-                      margin-right: 8px;
-                    ">
-                      ${connectedPeopleAvatars}
-                      ${overflowIndicator}
-                    </div>
-                  `;
-                })()}
-
-                <button onclick="dashboard.closeMemoryDialog()" style="
-                  background: rgba(255, 255, 255, 0.1);
-                  border: none;
-                  color: rgba(255, 255, 255, 0.7);
-                  width: 36px;
-                  height: 36px;
-                  border-radius: 50%;
-                  cursor: pointer;
-                  font-size: 18px;
-                  transition: all 0.2s ease;
-                  display: flex;
-                  align-items: center;
-                  justify-content: center;
-                " onmouseover="this.style.background='rgba(255, 255, 255, 0.2)'; this.style.color='white'" onmouseout="this.style.background='rgba(255, 255, 255, 0.1)'; this.style.color='rgba(255, 255, 255, 0.7)'">✕</button>
-              </div>
-            </div>
-
-            <div class="memory-content" style="padding: 24px 32px;">
-              <div class="memory-header" style="
-                display: flex;
-                align-items: center;
-                gap: 20px;
-                margin-bottom: 24px;
-              ">
-                <div class="memory-icon" style="
-                  width: 60px;
-                  height: 60px;
-                  border-radius: 50%;
-                  background: linear-gradient(135deg, rgba(134, 88, 255, 0.2), rgba(240, 147, 251, 0.2));
-                  display: flex;
-                  align-items: center;
-                  justify-content: center;
-                  font-size: 24px;
-                  border: 2px solid rgba(134, 88, 255, 0.3);
-                ">${thumbnail}</div>
-                <div>
-                  <h3 style="color: white; margin: 0 0 8px 0; font-size: 20px;">${this.sanitizeTitle(memory.title)}</h3>
-                  <div style="color: rgba(255, 255, 255, 0.6); font-size: 14px;">
-                    <span>${formattedDate}</span>
-                    ${memory.category ? ` • <span style="
-                      background: rgba(134, 88, 255, 0.2);
-                      padding: 4px 8px;
-                      border-radius: 12px;
-                      font-size: 12px;
-                      text-transform: capitalize;
-                    ">${memory.category}</span>` : ''}
-                  </div>
-                </div>
-              </div>
-
-              <div class="memory-description" style="
-                color: rgba(255, 255, 255, 0.9);
-                line-height: 1.6;
-                margin-bottom: 24px;
-                font-size: 16px;
-                background: rgba(255, 255, 255, 0.05);
-                padding: 20px;
-                border-radius: 12px;
-                border-left: 4px solid rgba(134, 88, 255, 0.5);
-              ">
-                ${memory.content || memory.description || 'This is a precious memory from your vault...'}
-              </div>
-
-              ${memory.tags && memory.tags.length > 0 ? `
-                <div class="memory-tags" style="margin-bottom: 24px;">
-                  <div style="color: rgba(255, 255, 255, 0.6); font-size: 14px; margin-bottom: 8px;">Tags:</div>
-                  <div style="display: flex; gap: 8px; flex-wrap: wrap;">
-                    ${memory.tags.map(tag => `
-                      <span style="
-                        background: rgba(134, 88, 255, 0.2);
-                        color: rgba(255, 255, 255, 0.9);
-                        padding: 4px 12px;
-                        border-radius: 16px;
-                        font-size: 12px;
-                        border: 1px solid rgba(134, 88, 255, 0.3);
-                      ">#${tag}</span>
-                    `).join('')}
-                  </div>
-                </div>
-              ` : ''}
-
-              ${mediaItems.length > 0 ? `
-                <div class="memory-media" style="margin-bottom: 24px;">
-                  <div style="color: rgba(255, 255, 255, 0.6); font-size: 14px; margin-bottom: 12px;">
-                    📎 Media (${mediaItems.length} ${mediaItems.length === 1 ? 'item' : 'items'})
-                  </div>
-                  <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px;">
-                    ${mediaItems.map(item => {
-                      // Use the thumbnail from the main process if available
-                      const hasImage = memory.thumbnail || item.dataUrl || item.url;
-                      const imageUrl = memory.thumbnail || item.dataUrl || item.url;
-                      const isImage = (item.type || '').startsWith('image') || hasImage;
-
-                      return `
-                      <div style="
-                          background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
-                          border: 1px solid rgba(255, 255, 255, 0.15);
-                          border-radius: 12px;
-                          padding: 0;
-                        text-align: center;
-                          font-size: 13px;
-                          color: rgba(255, 255, 255, 0.9);
-                        cursor: pointer;
-                          transition: all 0.3s ease;
-                          overflow: hidden;
-                          backdrop-filter: blur(10px);
-                        " onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 8px 32px rgba(134, 88, 255, 0.3)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='none'">
-                          ${hasImage ? `
-                            <div style="
-                              width: 100%;
-                              height: 100px;
-                              background-image: url('${imageUrl}');
-                              background-size: cover;
-                              background-position: center;
-                              border-radius: 12px 12px 0 0;
-                              position: relative;
-                            ">
-                              <div style="
-                                position: absolute;
-                                bottom: 0;
-                                left: 0;
-                                right: 0;
-                                background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
-                                padding: 8px 12px 4px 12px;
-                                color: white;
-                                font-size: 11px;
-                                font-weight: 500;
-                              ">${item.name || 'Image'}</div>
-                      </div>
-                          ` : `
-                            <div style="
-                              height: 100px;
-                              display: flex;
-                              flex-direction: column;
-                              align-items: center;
-                              justify-content: center;
-                              background: rgba(134, 88, 255, 0.1);
-                            ">
-                              <div style="font-size: 32px; margin-bottom: 8px;">${isImage ? '🖼️' : '📄'}</div>
-                              <div style="font-size: 11px; opacity: 0.8; padding: 0 8px;">${item.name || 'Media File'}</div>
-                            </div>
-                          `}
-                          ${!hasImage ? `
-                            <div style="padding: 8px 12px;">
-                              <div style="font-size: 11px; opacity: 0.6;">${((item.size || 0) / 1024 / 1024).toFixed(1)} MB</div>
-                            </div>
-                          ` : ''}
-                        </div>
-                      `;
-                    }).join('')}
-                  </div>
-                </div>
-              ` : ''}
-            </div>
-
-            <div class="memory-actions" style="
-              padding: 16px 32px 24px 32px;
-              border-top: 1px solid rgba(255, 255, 255, 0.1);
-              display: flex;
-              gap: 12px;
-              justify-content: flex-end;
-            ">
-              <button onclick="dashboard.shareMemory('${memory.id}')" style="
-                padding: 12px 24px;
-                border: 1px solid rgba(255, 255, 255, 0.3);
-                background: rgba(255, 255, 255, 0.1);
-                color: white;
-                border-radius: 8px;
-                cursor: pointer;
-                font-size: 14px;
-                transition: all 0.2s ease;
-              " onmouseover="this.style.background='rgba(255, 255, 255, 0.2)'" onmouseout="this.style.background='rgba(255, 255, 255, 0.1)'">📤 Share</button>
-              <button onclick="window.location.href='gallery.html#${memory.id}'" style="
-                padding: 12px 24px;
-                border: none;
-                background: linear-gradient(135deg, #8658ff, #f093fb);
-                color: white;
-                border-radius: 8px;
-                cursor: pointer;
-                font-size: 14px;
-                font-weight: 600;
-                transition: all 0.2s ease;
-              " onmouseover="this.style.transform='translateY(-1px)'" onmouseout="this.style.transform='translateY(0)'">✏️ Edit in Gallery</button>
-            </div>
-          </div>
-        `;
-
-        // Style the dialog
-        memoryDialog.style.cssText = `
-          position: fixed;
-          top: 0;
-          left: 0;
-          right: 0;
-          bottom: 0;
-          background: rgba(0, 0, 0, 0.8);
-          backdrop-filter: blur(10px);
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          z-index: 10000;
-          opacity: 0;
-          transition: opacity 0.3s ease;
-        `;
-
-        document.body.appendChild(memoryDialog);
-        this.currentMemoryDialog = memoryDialog;
-
-        // Animate in
-        requestAnimationFrame(() => {
-          memoryDialog.style.opacity = '1';
-        });
-
-        // Close on outside click
-        memoryDialog.addEventListener('click', (e) => {
-          if (e.target === memoryDialog) {
-            this.closeMemoryDialog();
-          }
-        });
-      }
-
-      // Close memory dialog
-      closeMemoryDialog() {
-        if (this.currentMemoryDialog) {
-          this.currentMemoryDialog.style.opacity = '0';
-          setTimeout(() => {
-            if (this.currentMemoryDialog) {
-              this.currentMemoryDialog.remove();
-              this.currentMemoryDialog = null;
-            }
-          }, 300);
-        }
-      }
-
-      // Memory dialog slideshow controls
-      prevSlide() {
-
-        // Demo functionality - would implement real slideshow
-      }
-
-      nextSlide() {
-
-        // Demo functionality - would implement real slideshow
-      }
-
-      shareMemory(memoryId) {
-
-        this.showToast('📤 Memory shared!', 'success');
-      }
-
-      editMemory(memoryId) {
-
-        this.showToast('✏️ Opening memory editor...', 'info');
-      }
-
-      // Filter constellation by theme
-      filterByTheme(theme) {
-
-        this.nodes.forEach(node => {
-          if (node.theme === theme) {
-            node.element.style.opacity = '1';
-            node.element.style.transform = 'scale(1)';
-          } else {
-            node.element.style.opacity = '0.3';
-            node.element.style.transform = 'scale(0.8)';
-          }
-        });
-      }
-
-      showToast(message, type = 'info') {
-        const toast = document.createElement('div');
-        toast.className = `toast ${type}`;
-        const span = document.createElement('span');
-        span.textContent = message;
-        toast.appendChild(span);
-        document.body.appendChild(toast);
-
-        setTimeout(() => toast.classList.add('show'), 10);
-
-        setTimeout(() => {
-          toast.classList.remove('show');
-          setTimeout(() => toast.remove(), 400);
-        }, 3000);
-      }
-    }
-
-    // Initialize dashboard
-    document.addEventListener('DOMContentLoaded', () => {
-      window.emmaDashboard = new EmmaDashboard();
-
-      // Setup vault modal event listeners
-      const dashboard = window.emmaDashboard;
-
-      // Close button
-      document.getElementById('close-vault-modal').addEventListener('click', () => {
-        dashboard.closeVaultModal();
-      });
-
-      // Click outside to close
-      document.getElementById('vault-modal').addEventListener('click', (e) => {
-        if (e.target.id === 'vault-modal') {
-          dashboard.closeVaultModal();
-        }
-      });
-
-      // Unlock form handlers
-      document.getElementById('unlock-btn').addEventListener('click', () => {
-        dashboard.unlockVault();
-      });
-
-      document.getElementById('cancel-unlock-btn').addEventListener('click', () => {
-        dashboard.hideUnlockForm();
-      });
-
-      // Create vault button handler
-      document.getElementById('create-vault-btn').addEventListener('click', async () => {
-
-        try {
-          if (window.emmaAPI && window.emmaAPI.vault) {
-            const st = await window.emmaAPI.vault.status();
-            if (st && st.initialized) {
-
-              dashboard.showUnlockForm();
-              return;
-            }
-          }
-        } catch {}
-        // Load welcome page for vault setup
-        window.location.assign('welcome.html');
-      });
-
-      // Password input enter key
-      document.getElementById('vault-password').addEventListener('keypress', (e) => {
-        if (e.key === 'Enter') {
-          dashboard.unlockVault();
-        }
-      });
-
-      // QR Code handlers
-      document.getElementById('generate-vault-qr-dashboard').addEventListener('click', () => {
-        dashboard.showToast('📱 Vault QR generation coming soon!', 'info');
-      });
-
-      document.getElementById('open-qr-scanner-dashboard').addEventListener('click', () => {
-        dashboard.showToast('📷 QR scanner coming soon!', 'info');
-      });
-
-      // Escape key to close vault modal
-      document.addEventListener('keydown', (e) => {
-        if (e.key === 'Escape') {
-          const modal = document.getElementById('vault-modal');
-          if (modal.classList.contains('show')) {
-            dashboard.closeVaultModal();
-          }
-        }
-      });
-
-      // CRITICAL FIX: Don't force lock status on page load - preserve existing state
-      if (!window.currentVaultStatus) {
-        window.currentVaultStatus = { isUnlocked: false };
-      }
-    });
-  </script>
-</body>
-</html>
diff --git a/pages/dashboard-secure.html b/pages/dashboard-secure.html
deleted file mode 100644
index 32e0945d..00000000
--- a/pages/dashboard-secure.html
+++ /dev/null
@@ -1,128 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-  <meta http-equiv="Pragma" content="no-cache">
-  <meta http-equiv="Expires" content="0">
-  <title>Emma - Your Intelligent Memory Companion</title>
-  
-  <!-- SECURITY: External CSS files for CSP compliance -->
-  <link rel="stylesheet" href="../css/dashboard-secure.css">
-  <link rel="stylesheet" href="../css/voice-capture-minimal.css">
-  <link rel="stylesheet" href="../css/emma-chat.css">
-  <link rel="stylesheet" href="../css/emma-share.css">
-</head>
-<body>
-  <!-- Aurora Background -->
-  <div class="aurora-bg">
-    <div class="aurora"></div>
-  </div>
-
-  <!-- Memory Constellation Canvas -->
-  <canvas id="constellation" class="constellation-canvas"></canvas>
-
-  <!-- Welcome Text -->
-  <div class="welcome-text">
-    <h1 class="welcome-title">emma</h1>
-    <p class="welcome-subtitle">Your Intelligent Memory Companion</p>
-  </div>
-
-  <!-- Neural Network Background -->
-  <div class="neural-network">
-    <canvas id="neural-canvas" class="neural-canvas"></canvas>
-  </div>
-
-  <!-- Main Dashboard -->
-  <div class="dashboard">
-    <div class="command-center">
-      <!-- Central Emma Orb (WebGL) -->
-      <div class="emma-orb-container" id="emma-orb">
-        <div class="emma-orb-webgl" id="webgl-orb-container">
-          <!-- WebGL Emma Orb will be inserted here -->
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <!-- Radial Menu (Neural Nodes) -->
-  <div class="radial-menu" id="radial-menu">
-    <div class="radial-item" data-action="voice" id="voice-node">
-      <div class="radial-item-icon">🎤</div>
-      <div class="radial-item-label">Voice</div>
-    </div>
-    
-    <div class="radial-item" data-action="chat" id="chat-node">
-      <div class="radial-item-icon">💬</div>
-      <div class="radial-item-label">Chat</div>
-    </div>
-    
-    <div class="radial-item" data-action="memories" id="memories-node">
-      <div class="radial-item-icon">💎</div>
-      <div class="radial-item-label">Memories</div>
-    </div>
-    
-    <div class="radial-item" data-action="vault" id="vault-node">
-      <div class="radial-item-icon">🔒</div>
-      <div class="radial-item-label">Vault</div>
-    </div>
-    
-    <div class="radial-item" data-action="share" id="share-node">
-      <div class="radial-item-icon">📱</div>
-      <div class="radial-item-label">Share</div>
-    </div>
-    
-    <div class="radial-item" data-action="search" id="search-node">
-      <div class="radial-item-icon">🔍</div>
-      <div class="radial-item-label">Search</div>
-    </div>
-  </div>
-
-  <!-- Loading Overlay -->
-  <div class="loading" id="loading">
-    <div class="loading-spinner"></div>
-  </div>
-
-  <!-- Vault Modal -->
-  <div class="vault-modal" id="vault-modal">
-    <div class="vault-modal-content">
-      <button class="btn-close" id="close-vault-modal">&times;</button>
-      <h2 class="vault-modal-title">Emma Vault</h2>
-      
-      <div class="vault-status" id="vault-status">
-        <span>🔒 Vault Status Loading...</span>
-      </div>
-      
-      <div class="unlock-section" id="unlock-section">
-        <div class="form-group">
-          <label class="form-label" for="vault-password">Vault Passphrase</label>
-          <input type="password" id="vault-password" class="form-input" placeholder="Enter your vault passphrase">
-        </div>
-        
-        <div style="display: flex; gap: 12px; margin-top: 20px;">
-          <button class="btn btn-primary" id="unlock-btn">🔓 Unlock</button>
-          <button class="btn btn-secondary" id="cancel-unlock-btn">Cancel</button>
-        </div>
-      </div>
-      
-      <div style="margin-top: 20px; text-align: center;">
-        <button class="btn btn-secondary" id="generate-vault-qr-dashboard">📱 Generate QR</button>
-        <button class="btn btn-secondary" id="open-qr-scanner-dashboard">📷 Scan QR</button>
-      </div>
-    </div>
-  </div>
-
-  <!-- SECURITY: External JavaScript files for CSP compliance -->
-  <script src="../js/emma-orb.js"></script>
-  <script src="../js/experience-popup-base.js"></script>
-  <script src="../js/voice-capture-experience.js"></script>
-  <script src="../js/emma-chat-experience.js"></script>
-  <script src="../js/emma-qr-generator.js"></script>
-  <script src="../js/qr-service.js"></script>
-  <script src="../js/emma-share-experience.js"></script>
-  
-  <!-- SECURITY: Main dashboard script (extracted from inline) -->
-  <script src="../js/dashboard-secure.js"></script>
-</body>
-</html>
diff --git a/pages/dashboard.html b/pages/dashboard.html
deleted file mode 100644
index ddb2292d..00000000
--- a/pages/dashboard.html
+++ /dev/null
@@ -1,6662 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Emma - Your Intelligent Memory Companion</title>
-
-  <!-- Cache busting meta tags -->
-  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-  <meta http-equiv="Pragma" content="no-cache">
-  <meta http-equiv="Expires" content="0">
-
-  <!-- Load Emma Web Vault System -->
-  <script src="js/emma-input-modal.js"></script>
-  <script src="js/clean-password-modal.js"></script>
-  <script src="js/emma-feature-flags.js"></script>
-  <script src="js/emma-vault-primary.js"></script>
-  <script src="js/emma-web-vault.js"></script>
-  <script src="js/web-vault-status.js"></script>
-
-    <!-- Browser Compatibility Layer - PRODUCTION: Removed for clean deployment -->
-  <!-- <script src="emma-browser-compatibility-fix.js"></script> -->
-  
-  <!-- Mobile UI Fixes - PRODUCTION: Removed for clean deployment -->
-  <!-- <script src="emma-mobile-ui-fixes.js"></script> -->
-
-  <!-- VAULT STATE MONITOR: Real-time auto-lock detection -->
-  <script src="emma-vault-extension-fixed/vault-state-monitor.js"></script>
-
-  <style>
-    /* Emma Brand Variables */
-    :root {
-      --emma-gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
-      --emma-gradient-2: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #a855f7 100%);
-      --emma-aurora: linear-gradient(135deg, #667eea20 0%, #764ba240 25%, #f093fb20 50%, #4dabf720 75%, #667eea20 100%);
-      --emma-bg-gradient: linear-gradient(135deg, #0a0a0f 0%, #1a1033 50%, #0f0c29 100%);
-      --emma-purple: #764ba2;
-      --emma-pink: #f093fb;
-      --emma-blue: #667eea;
-      --emma-dark: #0a0a0f;
-      --emma-card-bg: rgba(255, 255, 255, 0.03);
-      --emma-glass: rgba(255, 255, 255, 0.05);
-      --emma-border: rgba(255, 255, 255, 0.1);
-      --emma-text: #ffffff;
-      --emma-text-secondary: rgba(255, 255, 255, 0.8);
-      --emma-text-tertiary: rgba(255, 255, 255, 0.6);
-      --emma-success: #4ade80;
-      --emma-error: #f87171;
-      --emma-warning: #fbbf24;
-      --emma-glow: 0 0 40px rgba(134, 88, 255, 0.6);
-    }
-
-    * {
-      margin: 0;
-      padding: 0;
-      box-sizing: border-box;
-    }
-
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-      background: var(--emma-bg-gradient);
-      color: var(--emma-text);
-      min-height: 100vh;
-      overflow: hidden;
-      position: relative;
-    }
-
-    /* Aurora Background Effect */
-    .aurora-bg {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      opacity: 0.3;
-      z-index: 1;
-      pointer-events: none;
-    }
-
-    .aurora {
-      position: absolute;
-      width: 200%;
-      height: 200%;
-      background: var(--emma-aurora);
-      animation: aurora 20s ease-in-out infinite;
-      filter: blur(60px);
-    }
-
-    @keyframes aurora {
-      0%, 100% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
-      33% { transform: translate(-30%, -60%) rotate(120deg) scale(1.1); }
-      66% { transform: translate(-70%, -40%) rotate(240deg) scale(0.9); }
-    }
-
-    /* Main Container */
-    .dashboard {
-      position: relative;
-      width: 100%;
-      height: 100vh;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      z-index: 2;
-    }
-
-    /* Central Command Orb Container */
-    .command-center {
-      position: relative;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    /* Emma Orb */
-    .emma-orb-container {
-      position: relative;
-      width: 200px;
-      height: 200px;
-      cursor: pointer;
-      transition: transform 0.3s ease;
-    }
-
-    .emma-orb-container:hover {
-      transform: scale(1.05);
-    }
-
-    .emma-orb-webgl {
-      width: 100%;
-      height: 100%;
-      border-radius: 50%;
-      box-shadow: var(--emma-glow), inset 0 0 40px rgba(255, 255, 255, 0.1);
-      position: relative;
-      overflow: hidden;
-    }
-
-    .emma-orb-webgl canvas {
-      border-radius: 50%;
-      width: 100% !important;
-      height: 100% !important;
-    }
-
-    @keyframes orb-pulse {
-      0%, 100% { transform: scale(1); box-shadow: var(--emma-glow), inset 0 0 40px rgba(255, 255, 255, 0.1); }
-      50% { transform: scale(1.02); box-shadow: 0 0 60px rgba(134, 88, 255, 0.8), inset 0 0 40px rgba(255, 255, 255, 0.2); }
-    }
-
-    @keyframes vault-unlock-pulse {
-      0% { transform: scale(1); }
-      30% { transform: scale(1.1); box-shadow: 0 0 80px rgba(16, 185, 129, 0.8); }
-      60% { transform: scale(0.95); }
-      100% { transform: scale(1); }
-    }
-
-    /* Orb status removed - clean WebGL orb only */
-
-    .orb-icon {
-      font-size: 48px;
-      margin-bottom: 8px;
-      filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
-    }
-
-    /* Orb text removed - clean WebGL orb only */
-
-    /* Neural Network Menu */
-    .neural-network {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      pointer-events: none;
-      z-index: 1; /* CRITICAL FIX: Lower z-index so nodes appear above connections */
-    }
-
-    .neural-canvas {
-      width: 100%;
-      height: 100%;
-    }
-
-    .radial-menu {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      top: 0;
-      left: 0;
-      pointer-events: none;
-      opacity: 0;
-      transition: opacity 0.6s ease;
-    }
-
-    .radial-menu.active {
-      opacity: 1;
-      pointer-events: all;
-    }
-
-    .radial-item {
-      position: absolute;
-      width: 90px;
-      height: 90px;
-      background: var(--emma-glass);
-      backdrop-filter: blur(20px);
-      border: 2px solid rgba(134, 88, 255, 0.3);
-      border-radius: 50%;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      cursor: pointer;
-      transition: all 0.3s ease;
-      opacity: 0;
-      transform: scale(0);
-      box-shadow: 0 0 30px rgba(134, 88, 255, 0.2);
-      animation: float 6s ease-in-out infinite;
-      z-index: 10;
-    }
-
-    .radial-menu.active .radial-item {
-      opacity: 1;
-      transform: scale(1);
-    }
-
-    @keyframes float {
-      0%, 100% { transform: translateY(0px) scale(1); }
-      33% { transform: translateY(-10px) scale(1.02); }
-      66% { transform: translateY(5px) scale(0.98); }
-    }
-
-    /* Elegant add node glow animation */
-    @keyframes addNodeGlow {
-      0%, 100% { 
-        box-shadow: 
-          0 0 20px rgba(16, 185, 129, 0.4),
-          0 0 40px rgba(16, 185, 129, 0.2),
-          inset 0 0 20px rgba(16, 185, 129, 0.1);
-      }
-      50% { 
-        box-shadow: 
-          0 0 30px rgba(16, 185, 129, 0.6),
-          0 0 60px rgba(16, 185, 129, 0.3),
-          inset 0 0 30px rgba(16, 185, 129, 0.15);
-      }
-    }
-
-    /* Subtle heartbeat animation for people nodes */
-    @keyframes heartbeat {
-      0%, 100% { 
-        box-shadow: 
-          0 8px 32px rgba(139, 92, 246, 0.4),
-          0 0 20px rgba(239, 68, 68, 0.3),
-          0 0 40px rgba(239, 68, 68, 0.1);
-      }
-      25% { 
-        box-shadow: 
-          0 8px 32px rgba(139, 92, 246, 0.4),
-          0 0 25px rgba(239, 68, 68, 0.4),
-          0 0 50px rgba(239, 68, 68, 0.15);
-      }
-      50% { 
-        box-shadow: 
-          0 8px 32px rgba(139, 92, 246, 0.4),
-          0 0 20px rgba(239, 68, 68, 0.3),
-          0 0 40px rgba(239, 68, 68, 0.1);
-      }
-      75% { 
-        box-shadow: 
-          0 8px 32px rgba(139, 92, 246, 0.4),
-          0 0 25px rgba(239, 68, 68, 0.4),
-          0 0 50px rgba(239, 68, 68, 0.15);
-      }
-    }
-
-    /* Memory Constellation Styles - Star-like nodes */
-    .memory-node {
-      font-size: 12px;
-      color: white;
-      backdrop-filter: blur(15px);
-      box-shadow:
-        0 0 30px rgba(134, 88, 255, 0.4),
-        0 0 60px rgba(134, 88, 255, 0.2),
-        inset 0 0 20px rgba(255, 255, 255, 0.1);
-      border: 1px solid rgba(255, 255, 255, 0.2);
-      position: relative;
-    }
-
-    /* Star-like glow effect */
-    .memory-node::before {
-      content: '';
-      position: absolute;
-      top: -2px;
-      left: -2px;
-      right: -2px;
-      bottom: -2px;
-      border-radius: 50%;
-      background: linear-gradient(45deg, rgba(134, 88, 255, 0.3), rgba(240, 147, 251, 0.3));
-      z-index: -1;
-      opacity: 0.7;
-      animation: star-pulse 3s ease-in-out infinite;
-    }
-
-    @keyframes star-pulse {
-      0%, 100% { transform: scale(1); opacity: 0.7; }
-      50% { transform: scale(1.1); opacity: 1; }
-    }
-
-    .memory-node .memory-thumbnail {
-      font-size: 28px;
-      margin-bottom: 2px;
-      filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5));
-      text-shadow: 0 0 10px rgba(134, 88, 255, 0.8);
-    }
-
-    .memory-node .memory-label {
-      font-size: 11px;
-      opacity: 0;
-      position: absolute;
-      top: 75px;
-      left: 50%;
-      transform: translateX(-50%);
-      background: rgba(17, 17, 27, 0.95);
-      padding: 6px 10px;
-      border-radius: 6px;
-      white-space: nowrap;
-      transition: all 0.3s ease;
-      pointer-events: none;
-      z-index: 1001;
-      border: 1px solid rgba(134, 88, 255, 0.3);
-      backdrop-filter: blur(10px);
-      font-weight: 500;
-    }
-
-    .memory-node:hover .memory-label {
-      opacity: 1;
-      transform: translateX(-50%) translateY(-5px);
-    }
-
-    /* Theme-based colors */
-    .memory-node[data-theme="family"] {
-      box-shadow:
-        0 0 30px rgba(255, 105, 135, 0.4),
-        0 0 60px rgba(255, 105, 135, 0.2);
-    }
-
-    .memory-node[data-theme="travel"] {
-      box-shadow:
-        0 0 30px rgba(52, 211, 153, 0.4),
-        0 0 60px rgba(52, 211, 153, 0.2);
-    }
-
-    .memory-node[data-theme="recent"] {
-      box-shadow:
-        0 0 30px rgba(96, 165, 250, 0.4),
-        0 0 60px rgba(96, 165, 250, 0.2);
-    }
-
-    .memory-node[data-theme="special"] {
-      box-shadow:
-        0 0 30px rgba(251, 191, 36, 0.4),
-        0 0 60px rgba(251, 191, 36, 0.2);
-    }
-
-    .constellation-controls {
-      color: white;
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-    }
-
-    .constellation-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 15px;
-    }
-
-    .constellation-header h3 {
-      margin: 0;
-      font-size: 18px;
-      font-weight: 600;
-    }
-
-    .constellation-close {
-      background: none;
-      border: none;
-      color: white;
-      font-size: 18px;
-      cursor: pointer;
-      padding: 5px;
-      border-radius: 50%;
-      width: 30px;
-      height: 30px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      transition: background 0.3s ease;
-    }
-
-    .constellation-close:hover {
-      background: rgba(255, 255, 255, 0.1);
-    }
-
-    .constellation-themes {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 8px;
-    }
-
-    .theme-filter {
-      background: rgba(134, 88, 255, 0.2);
-      border: 1px solid rgba(134, 88, 255, 0.4);
-      color: white;
-      padding: 8px 12px;
-      border-radius: 20px;
-      cursor: pointer;
-      font-size: 12px;
-      transition: all 0.3s ease;
-    }
-
-    .theme-filter.active {
-      background: rgba(134, 88, 255, 0.4);
-      border-color: rgba(134, 88, 255, 0.6);
-    }
-
-    .theme-filter.disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-
-    .theme-filter:hover:not(.disabled) {
-      background: rgba(134, 88, 255, 0.3);
-      transform: translateY(-2px);
-    }
-
-    /* Memory Dialog Styles */
-    .memory-dialog {
-      background: rgba(17, 17, 27, 0.95);
-      border: 1px solid rgba(134, 88, 255, 0.3);
-      border-radius: 16px;
-      padding: 0;
-      max-width: 800px;
-      width: 90%;
-      max-height: 80vh;
-      overflow: hidden;
-      backdrop-filter: blur(20px);
-      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
-      transform: scale(0.9);
-      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    }
-
-    .memory-dialog-overlay[style*="opacity: 1"] .memory-dialog {
-      transform: scale(1);
-    }
-
-    .memory-dialog-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 24px 32px;
-      border-bottom: 1px solid rgba(134, 88, 255, 0.2);
-      background: linear-gradient(135deg, rgba(134, 88, 255, 0.1), rgba(240, 147, 251, 0.1));
-    }
-
-    .memory-title {
-      margin: 0;
-      font-size: 24px;
-      font-weight: 600;
-      color: white;
-      text-shadow: 0 0 10px rgba(134, 88, 255, 0.5);
-    }
-
-    .memory-close {
-      background: none;
-      border: none;
-      color: white;
-      font-size: 24px;
-      cursor: pointer;
-      padding: 8px;
-      border-radius: 50%;
-      width: 40px;
-      height: 40px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      transition: background 0.3s ease;
-    }
-
-    .memory-close:hover {
-      background: rgba(255, 255, 255, 0.1);
-    }
-
-    .memory-content {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 32px;
-      padding: 32px;
-    }
-
-    .memory-slideshow {
-      display: flex;
-      flex-direction: column;
-      gap: 16px;
-    }
-
-    .slideshow-container {
-      aspect-ratio: 16/9;
-      border-radius: 12px;
-      overflow: hidden;
-      background: rgba(134, 88, 255, 0.1);
-      border: 1px solid rgba(134, 88, 255, 0.2);
-    }
-
-    .memory-slide {
-      width: 100%;
-      height: 100%;
-      display: none;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .memory-slide.active {
-      display: flex;
-    }
-
-    .media-placeholder {
-      text-align: center;
-      color: rgba(255, 255, 255, 0.7);
-    }
-
-    .media-icon {
-      font-size: 48px;
-      display: block;
-      margin-bottom: 16px;
-    }
-
-    .slideshow-controls {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 16px;
-    }
-
-    .slide-btn {
-      background: rgba(134, 88, 255, 0.2);
-      border: 1px solid rgba(134, 88, 255, 0.4);
-      color: white;
-      padding: 8px 12px;
-      border-radius: 8px;
-      cursor: pointer;
-      font-size: 18px;
-      transition: all 0.3s ease;
-    }
-
-    .slide-btn:hover {
-      background: rgba(134, 88, 255, 0.4);
-      transform: scale(1.05);
-    }
-
-    .slide-indicator {
-      color: rgba(255, 255, 255, 0.8);
-      font-size: 14px;
-      font-weight: 500;
-    }
-
-    .memory-details {
-      display: flex;
-      flex-direction: column;
-      gap: 24px;
-    }
-
-    .memory-summary h3 {
-      margin: 0 0 12px 0;
-      font-size: 18px;
-      font-weight: 600;
-      color: white;
-    }
-
-    .memory-summary p {
-      margin: 0;
-      line-height: 1.6;
-      color: rgba(255, 255, 255, 0.8);
-    }
-
-    .memory-metadata {
-      display: flex;
-      flex-direction: column;
-      gap: 12px;
-    }
-
-    .metadata-item {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 8px 0;
-      border-bottom: 1px solid rgba(134, 88, 255, 0.1);
-    }
-
-    .metadata-item .label {
-      font-weight: 500;
-      color: rgba(255, 255, 255, 0.7);
-    }
-
-    .metadata-item .value {
-      font-weight: 600;
-      color: white;
-    }
-
-    .value.theme-family { color: rgba(255, 105, 135, 1); }
-    .value.theme-travel { color: rgba(52, 211, 153, 1); }
-    .value.theme-recent { color: rgba(96, 165, 250, 1); }
-    .value.theme-special { color: rgba(251, 191, 36, 1); }
-
-    .memory-actions {
-      display: flex;
-      justify-content: flex-end;
-      gap: 12px;
-      padding: 24px 32px;
-      border-top: 1px solid rgba(134, 88, 255, 0.2);
-      background: rgba(134, 88, 255, 0.05);
-    }
-
-    .action-btn {
-      padding: 12px 24px;
-      border-radius: 8px;
-      font-weight: 500;
-      cursor: pointer;
-      transition: all 0.3s ease;
-      border: none;
-    }
-
-    .action-btn.secondary {
-      background: rgba(134, 88, 255, 0.2);
-      color: white;
-      border: 1px solid rgba(134, 88, 255, 0.4);
-    }
-
-    .action-btn.secondary:hover {
-      background: rgba(134, 88, 255, 0.3);
-      transform: translateY(-2px);
-    }
-
-    .action-btn.primary {
-      background: linear-gradient(135deg, rgba(134, 88, 255, 1), rgba(240, 147, 251, 0.8));
-      color: white;
-      border: none;
-    }
-
-    .action-btn.primary:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 8px 25px rgba(134, 88, 255, 0.4);
-    }
-
-    .radial-item:nth-child(1) { animation-delay: 0s; }
-    .radial-item:nth-child(2) { animation-delay: 0.5s; }
-    .radial-item:nth-child(3) { animation-delay: 1s; }
-    .radial-item:nth-child(4) { animation-delay: 1.5s; }
-    .radial-item:nth-child(5) { animation-delay: 2s; }
-    .radial-item:nth-child(6) { animation-delay: 2.5s; }
-    .radial-item:nth-child(7) { animation-delay: 3s; }
-    .radial-item:nth-child(8) { animation-delay: 3.5s; }
-
-    .radial-item:hover {
-      background: rgba(134, 88, 255, 0.3);
-      border-color: var(--emma-purple);
-      transform: scale(1.15);
-      box-shadow: 0 0 40px rgba(134, 88, 255, 0.6);
-      animation-play-state: paused;
-    }
-
-    .radial-item.pulsing {
-      animation: pulse 2s ease-in-out infinite;
-    }
-
-    @keyframes pulse {
-      0%, 100% {
-        box-shadow: 0 0 30px rgba(134, 88, 255, 0.2);
-        transform: scale(1);
-      }
-      50% {
-        box-shadow: 0 0 50px rgba(134, 88, 255, 0.5);
-        transform: scale(1.05);
-      }
-    }
-
-    .radial-item-icon {
-      font-size: 32px;
-      margin-bottom: 4px;
-      filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.3));
-    }
-
-    .radial-item-label {
-      font-size: 12px;
-      text-align: center;
-      opacity: 0.9;
-      font-weight: 500;
-    }
-
-    .node-connection {
-      stroke: rgba(134, 88, 255, 0.3);
-      stroke-width: 2;
-      fill: none;
-      stroke-dasharray: 5, 5;
-      animation: dash 20s linear infinite;
-    }
-
-    @keyframes dash {
-      to { stroke-dashoffset: -100; }
-    }
-
-    /* Info Panels */
-    .info-panel {
-      position: fixed;
-      background: var(--emma-glass);
-      backdrop-filter: blur(20px);
-      border: 1px solid var(--emma-border);
-      border-radius: 20px;
-      padding: 24px;
-      min-width: 280px;
-      opacity: 0;
-      transform: translateY(20px);
-      transition: all 0.4s ease;
-      z-index: 10;
-    }
-
-    .info-panel.active {
-      opacity: 1;
-      transform: translateY(0);
-    }
-
-    /* Fade panels and header text when neural menu is active */
-    body.menu-active .info-panel {
-      opacity: 0;
-      transform: translateY(20px) scale(0.9);
-      filter: blur(2px);
-      pointer-events: none;
-    }
-
-    body.menu-active .welcome-text {
-      opacity: 0 !important;
-      transform: translateY(-20px) scale(0.9);
-      filter: blur(3px);
-      pointer-events: none;
-      visibility: hidden;
-    }
-
-    body.menu-active .voice-indicator {
-      opacity: 0;
-      transform: translateX(-50%) translateY(20px) scale(0.9);
-      filter: blur(2px);
-      pointer-events: none;
-    }
-
-    body.menu-active .constellation-canvas {
-      opacity: 0;
-      filter: blur(3px);
-      pointer-events: none;
-    }
-
-    /* Constellation Mode - Hide ALL UI except constellation */
-    body.constellation-active .info-panel,
-    body.constellation-active .welcome-text,
-    body.constellation-active .voice-indicator,
-    body.constellation-active .constellation-canvas,
-    body.constellation-active .quick-stats {
-      opacity: 0 !important;
-      visibility: hidden !important;
-      pointer-events: none !important;
-      transition: all 0.5s ease;
-    }
-
-    /* Keep only constellation controls and radial menu visible */
-    body.constellation-active .constellation-controls,
-    body.constellation-active .radial-menu {
-      opacity: 1 !important;
-      visibility: visible !important;
-      pointer-events: all !important;
-    }
-
-    /* Hide panels in constellation mode */
-    body.constellation-active .info-panel.right-stack,
-    body.constellation-active .utility-icons {
-      opacity: 0 !important;
-      visibility: hidden !important;
-      pointer-events: none !important;
-    }
-
-    /* Bottom Left Utility Icons */
-    /* Clean Icons - No backgrounds */
-    .clean-icons {
-      position: fixed;
-      bottom: 24px;
-      left: 24px;
-      display: flex;
-      gap: 16px;
-      z-index: 1000;
-    }
-
-    .clean-icons > div {
-      cursor: pointer;
-      color: rgba(255, 255, 255, 0.7);
-      transition: all 0.3s ease;
-      padding: 8px;
-    }
-
-    .clean-icons > div:hover {
-      color: white;
-      transform: scale(1.1);
-    }
-
-    /* Hide old utility icons completely */
-    .utility-icons {
-      display: none !important;
-    }
-
-    .utility-item {
-      display: none !important;
-    }
-
-    .utility-icon {
-      display: none !important;
-    }
-
-    .utility-label {
-      display: none !important;
-    }
-
-    /* Burger menu CSS removed for clean interface */
-
-    /* Right side panel stack - hidden by default */
-    .info-panel.right-stack {
-      position: fixed;
-      right: -360px; /* Hidden off-screen */
-      width: 320px;
-      min-width: 320px;
-      max-width: 320px;
-      height: 180px;
-      min-height: 180px;
-      max-height: 180px;
-      transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-      z-index: 999;
-    }
-
-    /* Show panels when menu is active */
-    .panels-visible .info-panel.right-stack {
-      right: 24px;
-    }
-
-    #daily-brief.right-stack {
-      top: 24px;
-    }
-
-    #ai-insights.right-stack {
-      top: calc(24px + 180px + 16px);
-    }
-
-    #quick-actions.right-stack {
-      top: calc(24px + 180px + 16px + 180px + 16px);
-    }
-
-    /* Legacy positioning for any remaining panels */
-    .info-panel.top-left {
-      top: 24px;
-      left: 24px;
-    }
-
-    .info-panel.top-right {
-      top: 24px;
-      right: 24px;
-    }
-
-    .info-panel.bottom-left {
-      bottom: 24px;
-      left: 24px;
-    }
-
-    .info-panel.bottom-right {
-      bottom: 24px;
-      right: 24px;
-    }
-
-    .panel-header {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      margin-bottom: 16px;
-      padding-bottom: 12px;
-      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-    }
-
-    /* Adjust content for right stack panels */
-    .info-panel.right-stack .panel-content {
-      overflow: hidden;
-      height: calc(100% - 70px); /* Account for header height */
-    }
-
-    .info-panel.right-stack .panel-content p {
-      font-size: 14px;
-      line-height: 1.4;
-      margin-bottom: 8px;
-    }
-
-    .panel-icon {
-      font-size: 24px;
-    }
-
-    .panel-title {
-      font-size: 18px;
-      font-weight: 600;
-    }
-
-    .panel-content {
-      font-size: 14px;
-      line-height: 1.6;
-      color: var(--emma-text-secondary);
-    }
-
-    /* Memory Constellation Background */
-    .constellation-canvas {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      z-index: 1;
-      opacity: 0.3;
-      pointer-events: none;
-    }
-
-    /* Voice Activation Indicator */
-    .voice-indicator {
-      position: fixed;
-      bottom: 40px;
-      left: 50%;
-      transform: translateX(-50%);
-      background: var(--emma-glass);
-      backdrop-filter: blur(20px);
-      border: 1px solid var(--emma-border);
-      border-radius: 30px;
-      padding: 12px 24px;
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      opacity: 0;
-      transform: translateX(-50%) translateY(20px);
-      transition: all 0.3s ease;
-      z-index: 10;
-    }
-
-    .voice-indicator.active {
-      opacity: 1;
-      transform: translateX(-50%) translateY(0);
-    }
-
-    .voice-waves {
-      display: flex;
-      gap: 3px;
-      align-items: center;
-    }
-
-    .voice-wave {
-      width: 3px;
-      height: 20px;
-      background: var(--emma-purple);
-      border-radius: 3px;
-      animation: wave 1s ease-in-out infinite;
-    }
-
-    .voice-wave:nth-child(2) { animation-delay: 0.1s; height: 30px; }
-    .voice-wave:nth-child(3) { animation-delay: 0.2s; height: 25px; }
-    .voice-wave:nth-child(4) { animation-delay: 0.3s; height: 35px; }
-    .voice-wave:nth-child(5) { animation-delay: 0.4s; height: 20px; }
-
-    @keyframes wave {
-      0%, 100% { transform: scaleY(0.5); opacity: 0.5; }
-      50% { transform: scaleY(1); opacity: 1; }
-    }
-
-    /* Quick Stats */
-    .quick-stats {
-      position: absolute;
-      bottom: -80px;
-      left: 50%;
-      transform: translateX(-50%);
-      display: flex;
-      gap: 32px;
-      opacity: 0;
-      transition: opacity 0.4s ease;
-    }
-
-    .command-center:hover .quick-stats {
-      opacity: 1;
-    }
-
-    .stat-item {
-      text-align: center;
-      cursor: pointer;
-      transition: transform 0.2s ease;
-    }
-
-    .stat-item:hover {
-      transform: translateY(-4px);
-    }
-
-    .stat-value {
-      font-size: 28px;
-      font-weight: 700;
-      background: var(--emma-gradient-1);
-      background-clip: text;
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-    }
-
-    .stat-label {
-      font-size: 12px;
-      color: var(--emma-text-tertiary);
-      text-transform: uppercase;
-      letter-spacing: 1px;
-      margin-top: 4px;
-    }
-
-    /* Notification Toast */
-    .toast {
-      position: fixed;
-      top: 24px;
-      right: 24px;
-      background: var(--emma-glass);
-      backdrop-filter: blur(20px);
-      border: 1px solid var(--emma-border);
-      border-radius: 12px;
-      padding: 16px 24px;
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      opacity: 0;
-      transform: translateX(400px);
-      transition: all 0.4s ease;
-      z-index: 1000;
-    }
-
-    .toast.show {
-      opacity: 1;
-      transform: translateX(0);
-    }
-
-    .toast.success { border-color: var(--emma-success); }
-    .toast.error { border-color: var(--emma-error); }
-    .toast.info { border-color: var(--emma-blue); }
-
-    /* Loading State */
-    .loading-overlay {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background: rgba(0, 0, 0, 0.8);
-      backdrop-filter: blur(10px);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      z-index: 9999;
-      opacity: 0;
-      pointer-events: none;
-      transition: opacity 0.3s ease;
-    }
-
-    .loading-overlay.active {
-      opacity: 1;
-      pointer-events: all;
-    }
-
-    .loading-content {
-      text-align: center;
-    }
-
-    .loading-orb {
-      width: 80px;
-      height: 80px;
-      margin: 0 auto 20px;
-      position: relative;
-      /* Emma's orb will be rendered here via WebGL */
-    }
-
-    /* Fallback for when WebGL orb isn't available */
-    .loading-orb-fallback {
-      width: 100%;
-      height: 100%;
-      background: radial-gradient(circle at 30% 30%, #8A5EFA, #764ba2, #f093fb);
-      border-radius: 50%;
-      animation: loading-pulse 1.5s ease-in-out infinite;
-      box-shadow: 0 0 30px rgba(138, 94, 250, 0.4);
-    }
-
-    @keyframes loading-pulse {
-      0%, 100% { transform: scale(1); opacity: 0.8; }
-      50% { transform: scale(1.2); opacity: 1; }
-    }
-
-    /* Welcome Text */
-    .welcome-text {
-      position: fixed;
-      top: 40px;
-      left: 50%;
-      transform: translateX(-50%);
-      text-align: center;
-      opacity: 0;
-      animation: fade-in 1s ease-out 0.5s forwards;
-    }
-
-    .welcome-title {
-      font-size: 48px;
-      font-weight: 200;
-      margin-bottom: 8px;
-      background: var(--emma-gradient-1);
-      background-clip: text;
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-    }
-
-    .welcome-subtitle {
-      font-size: 18px;
-      color: var(--emma-text-secondary);
-      font-weight: 400;
-    }
-
-    @keyframes fade-in {
-      to { opacity: 1; }
-    }
-
-    /* Vault Modal Styles */
-    .vault-modal {
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background: rgba(0, 0, 0, 0.8);
-      backdrop-filter: blur(10px);
-      z-index: 10000;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 20px;
-      opacity: 0;
-      transition: opacity 0.3s ease;
-    }
-
-    .vault-modal.show {
-      opacity: 1;
-    }
-
-    .vault-modal-content {
-      background: linear-gradient(135deg, rgba(26, 16, 51, 0.98), rgba(45, 27, 105, 0.98));
-      border: 1px solid rgba(134, 88, 255, 0.3);
-      border-radius: 24px;
-      max-width: 600px;
-      width: 100%;
-      max-height: 90vh;
-      overflow-y: auto;
-      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
-      transform: scale(0.9);
-      transition: transform 0.3s ease;
-    }
-
-    .vault-modal.show .vault-modal-content {
-      transform: scale(1);
-    }
-
-    .vault-modal-header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 32px 32px 24px;
-      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-      background: linear-gradient(135deg, rgba(134, 88, 255, 0.1), rgba(240, 147, 251, 0.1));
-    }
-
-    .vault-header-content {
-      display: flex;
-      align-items: center;
-      gap: 20px;
-    }
-
-    .vault-icon {
-      width: 64px;
-      height: 64px;
-      background: linear-gradient(135deg, #8658ff, #f093fb);
-      border-radius: 16px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 32px;
-    }
-
-    .vault-title h2 {
-      margin: 0 0 4px 0;
-      font-size: 28px;
-      font-weight: 700;
-      color: var(--emma-text);
-    }
-
-    .vault-title p {
-      margin: 0;
-      color: var(--emma-text-secondary);
-      font-size: 16px;
-    }
-
-    .vault-close {
-      width: 48px;
-      height: 48px;
-      border: none;
-      background: rgba(255, 255, 255, 0.1);
-      color: var(--emma-text);
-      border-radius: 12px;
-      font-size: 24px;
-      cursor: pointer;
-      transition: all 0.2s ease;
-    }
-
-    .vault-close:hover {
-      background: rgba(255, 255, 255, 0.2);
-    }
-
-    .vault-modal-body {
-      padding: 32px;
-    }
-
-    .vault-status-section {
-      margin-bottom: 32px;
-    }
-
-    .vault-status-card {
-      display: flex;
-      align-items: center;
-      gap: 20px;
-      padding: 24px;
-      background: rgba(255, 255, 255, 0.05);
-      border: 1px solid rgba(255, 255, 255, 0.1);
-      border-radius: 16px;
-      transition: all 0.3s ease;
-    }
-
-    .vault-status-card.unlocked {
-      border-color: rgba(74, 222, 128, 0.3);
-      background: rgba(74, 222, 128, 0.1);
-    }
-
-    .vault-btn {
-      padding: 12px 24px;
-      border: none;
-      border-radius: 12px;
-      font-size: 16px;
-      font-weight: 600;
-      cursor: pointer;
-      transition: all 0.3s ease;
-      display: inline-flex;
-      align-items: center;
-      gap: 8px;
-    }
-
-    .vault-btn.primary {
-      background: linear-gradient(135deg, #8658ff, #f093fb);
-      color: white;
-    }
-
-    .vault-btn.primary:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 8px 24px rgba(134, 88, 255, 0.4);
-    }
-
-    .vault-btn.secondary {
-      background: rgba(255, 255, 255, 0.1);
-      color: var(--emma-text);
-      border: 1px solid rgba(255, 255, 255, 0.2);
-    }
-
-    .vault-btn.secondary:hover {
-      background: rgba(255, 255, 255, 0.2);
-    }
-
-    .vault-btn.small {
-      padding: 8px 16px;
-      font-size: 14px;
-    }
-
-    .vault-unlock-section {
-      margin-bottom: 32px;
-      padding: 24px;
-      background: rgba(255, 255, 255, 0.03);
-      border-radius: 16px;
-      border: 1px solid rgba(255, 255, 255, 0.1);
-    }
-
-    .unlock-form label {
-      display: block;
-      margin-bottom: 8px;
-      color: var(--emma-text);
-      font-weight: 600;
-    }
-
-    .unlock-form input {
-      width: 100%;
-      padding: 16px 20px;
-      background: rgba(255, 255, 255, 0.1);
-      border: 1px solid rgba(255, 255, 255, 0.2);
-      border-radius: 12px;
-      color: var(--emma-text);
-      font-size: 16px;
-      margin-bottom: 20px;
-      text-align: center;
-      letter-spacing: 2px;
-    }
-
-    .unlock-form input:focus {
-      outline: none;
-      border-color: var(--emma-purple);
-      box-shadow: 0 0 0 3px rgba(134, 88, 255, 0.2);
-    }
-
-    .unlock-actions {
-      display: flex;
-      gap: 12px;
-      justify-content: center;
-    }
-
-    /* Create Vault Section */
-    .vault-create-section {
-      margin-bottom: 32px;
-      padding: 24px;
-      background: rgba(16, 185, 129, 0.1);
-      border-radius: 16px;
-      border: 1px solid rgba(16, 185, 129, 0.3);
-    }
-
-    .create-vault-card {
-      text-align: center;
-    }
-
-    .create-vault-icon {
-      font-size: 48px;
-      margin-bottom: 16px;
-    }
-
-    .create-vault-content h3 {
-      color: var(--emma-text);
-      margin-bottom: 8px;
-      font-size: 20px;
-    }
-
-    .create-vault-content p {
-      color: var(--emma-text-secondary);
-      margin-bottom: 20px;
-      font-size: 16px;
-    }
-
-    .vault-qr-section h3 {
-      margin: 0 0 8px 0;
-      color: var(--emma-text);
-      font-size: 20px;
-    }
-
-    .vault-qr-section p {
-      margin: 0 0 20px 0;
-      color: var(--emma-text-secondary);
-    }
-
-    .qr-option-card {
-      display: flex;
-      align-items: center;
-      gap: 16px;
-      padding: 20px;
-      background: rgba(255, 255, 255, 0.05);
-      border: 1px solid rgba(255, 255, 255, 0.1);
-      border-radius: 12px;
-      transition: all 0.3s ease;
-      cursor: pointer;
-    }
-
-    .qr-option-card:hover {
-      border-color: rgba(134, 88, 255, 0.3);
-      background: rgba(134, 88, 255, 0.1);
-    }
-
-    .qr-option-icon {
-      font-size: 32px;
-      min-width: 32px;
-    }
-
-    .qr-option-content {
-      flex: 1;
-    }
-
-    .qr-option-content h4 {
-      margin: 0 0 4px 0;
-      color: var(--emma-text);
-      font-size: 16px;
-    }
-
-    .qr-option-content p {
-      margin: 0;
-      color: var(--emma-text-secondary);
-      font-size: 14px;
-    }
-
-    .vault-actions-section {
-      border-top: 1px solid rgba(255, 255, 255, 0.1);
-      padding-top: 24px;
-    }
-
-    /* Responsive Design */
-    /* Mobile-First Responsive Design */
-    @media (max-width: 768px) {
-      .radial-menu {
-        width: 100vw;
-        height: 100vh;
-      }
-
-      .radial-item {
-        width: 70px !important;
-        height: 70px !important;
-        font-size: 12px;
-      }
-
-      .radial-item-icon {
-        font-size: 24px;
-      }
-
-      .radial-item-label {
-        font-size: 10px;
-        margin-top: 2px;
-      }
-
-      .emma-orb-container {
-        width: 120px !important;
-        height: 120px !important;
-      }
-
-      .welcome-title {
-        font-size: 2.5rem;
-      }
-
-      .welcome-subtitle {
-        font-size: 0.9rem;
-      }
-
-      /* Mobile constellation filters */
-      .constellation-burger-menu {
-        top: 10px !important;
-        left: 10px !important;
-      }
-
-      .constellation-menu-panel {
-        width: 280px !important;
-        max-height: 70vh !important;
-        overflow-y: auto;
-      }
-
-      .info-panel,
-      .info-panel.right-stack {
-        position: fixed;
-        bottom: 0 !important;
-        left: 0 !important;
-        right: 0 !important;
-        top: auto !important;
-        width: 100% !important;
-        min-width: 100% !important;
-        max-width: 100% !important;
-        height: auto !important;
-        min-height: auto !important;
-        max-height: 50vh !important;
-        border-radius: 20px 20px 0 0;
-        overflow-y: auto;
-      }
-
-      /* Stack panels vertically on mobile */
-      #daily-brief.right-stack { transform: translateY(0); }
-      #ai-insights.right-stack { transform: translateY(0); }
-      #quick-actions.right-stack { transform: translateY(0); }
-    }
-
-    /* Tablet optimizations */
-    @media (max-width: 1024px) and (min-width: 769px) {
-      .radial-item {
-        width: 80px;
-        height: 80px;
-      }
-
-      .emma-orb-container {
-        width: 160px;
-        height: 160px;
-      }
-    }
-
-    /* Import Voice Capture Premium Styles */
-
-    /* Person Summary Modal Styles */
-    .person-summary-modal-overlay {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background: rgba(0, 0, 0, 0.8);
-      backdrop-filter: blur(10px);
-      -webkit-backdrop-filter: blur(10px);
-      z-index: 10000;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      opacity: 0;
-      visibility: hidden;
-      transition: all 0.3s ease;
-    }
-
-    .person-summary-modal-overlay.active {
-      opacity: 1;
-      visibility: visible;
-    }
-
-    .person-summary-modal {
-      background: rgba(255, 255, 255, 0.1);
-      backdrop-filter: blur(30px);
-      -webkit-backdrop-filter: blur(30px);
-      border: 1px solid rgba(255, 255, 255, 0.2);
-      border-radius: 24px;
-      padding: 32px;
-      width: 90%;
-      max-width: 500px;
-      max-height: 80vh;
-      overflow-y: auto;
-      transform: scale(0.9) translateY(20px);
-      transition: transform 0.3s ease;
-      position: relative;
-    }
-
-    .person-summary-modal .modal-close {
-      position: absolute;
-      top: 16px;
-      right: 16px;
-      width: 32px;
-      height: 32px;
-      border-radius: 50%;
-      background: rgba(255, 255, 255, 0.1);
-      border: 1px solid rgba(255, 255, 255, 0.2);
-      color: white;
-      font-size: 18px;
-      font-weight: 300;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      transition: all 0.3s ease;
-      backdrop-filter: blur(10px);
-      -webkit-backdrop-filter: blur(10px);
-    }
-
-    .person-summary-modal .modal-close:hover {
-      background: rgba(255, 255, 255, 0.2);
-      border-color: rgba(255, 255, 255, 0.4);
-      transform: scale(1.1);
-    }
-
-    .person-summary-modal-overlay.active .person-summary-modal {
-      transform: scale(1) translateY(0);
-    }
-
-    .person-summary-header {
-      display: flex;
-      align-items: center;
-      gap: 20px;
-      margin-bottom: 32px;
-      padding-bottom: 20px;
-      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-    }
-
-    .person-summary-avatar {
-      width: 80px;
-      height: 80px;
-      border-radius: 50%;
-      background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: white;
-      font-weight: 700;
-      font-size: 32px;
-      overflow: hidden;
-    }
-
-    .person-summary-info {
-      flex: 1;
-    }
-
-    .person-summary-name {
-      font-size: 1.8rem;
-      font-weight: 600;
-      color: white;
-      margin: 0 0 8px 0;
-    }
-
-    .person-summary-relation {
-      font-size: 1rem;
-      color: rgba(255, 255, 255, 0.7);
-      margin: 0 0 4px 0;
-      text-transform: capitalize;
-    }
-
-    .person-summary-contact {
-      font-size: 0.9rem;
-      color: rgba(255, 255, 255, 0.5);
-      margin: 0;
-    }
-
-    .summary-section-title {
-      font-size: 1.2rem;
-      font-weight: 600;
-      color: white;
-      margin-bottom: 16px;
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
-
-    .summary-section-title::before {
-      content: '';
-      width: 3px;
-      height: 20px;
-      background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
-      border-radius: 2px;
-    }
-
-    .connected-memories {
-      display: flex;
-      flex-direction: column;
-      gap: 12px;
-      margin-bottom: 24px;
-    }
-
-    .connected-memory-item {
-      display: flex;
-      align-items: center;
-      gap: 16px;
-      padding: 16px;
-      background: rgba(255, 255, 255, 0.05);
-      border-radius: 12px;
-      cursor: pointer;
-      transition: all 0.3s ease;
-    }
-
-    .connected-memory-item:hover {
-      background: rgba(255, 255, 255, 0.1);
-      transform: translateY(-2px);
-    }
-
-    .memory-preview {
-      width: 50px;
-      height: 50px;
-      border-radius: 8px;
-      background: rgba(255, 255, 255, 0.1);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      overflow: hidden;
-      font-size: 20px;
-    }
-
-    .memory-preview img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-      border-radius: 8px;
-    }
-
-    .memory-info {
-      flex: 1;
-    }
-
-    .memory-title {
-      font-size: 1rem;
-      font-weight: 500;
-      color: white;
-      margin-bottom: 4px;
-    }
-
-    .memory-date {
-      font-size: 0.85rem;
-      color: rgba(255, 255, 255, 0.6);
-    }
-
-    .no-memories {
-      text-align: center;
-      padding: 40px 20px;
-      color: rgba(255, 255, 255, 0.5);
-      font-style: italic;
-    }
-
-    .person-summary-actions {
-      display: flex;
-      gap: 12px;
-    }
-
-    .person-summary-actions .btn {
-      flex: 1;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 8px;
-      padding: 12px 16px;
-      border: none;
-      border-radius: 12px;
-      font-weight: 600;
-      cursor: pointer;
-      transition: all 0.3s ease;
-    }
-
-    .person-summary-actions .btn-primary {
-      background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
-      color: white;
-    }
-
-    .person-summary-actions .btn-primary:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 10px 20px rgba(139, 92, 246, 0.3);
-    }
-
-    .person-summary-actions .btn-secondary {
-      background: rgba(255, 255, 255, 0.1);
-      color: rgba(255, 255, 255, 0.8);
-      border: 1px solid rgba(255, 255, 255, 0.2);
-    }
-
-    .person-summary-actions .btn-secondary:hover {
-      background: rgba(255, 255, 255, 0.2);
-      color: white;
-    }
-  </style>
-</head>
-<body>
-  <!-- Aurora Background -->
-  <div class="aurora-bg">
-    <div class="aurora"></div>
-  </div>
-
-  <!-- Memory Constellation Canvas -->
-  <canvas id="constellation" class="constellation-canvas"></canvas>
-
-  <!-- Welcome Text -->
-  <div class="welcome-text">
-    <h1 class="welcome-title">emma</h1>
-    <p class="welcome-subtitle">Your Intelligent Memory Companion</p>
-  </div>
-
-  <!-- Neural Network Background -->
-  <div class="neural-network">
-    <canvas id="neural-canvas" class="neural-canvas"></canvas>
-  </div>
-
-  <!-- Main Dashboard -->
-  <div class="dashboard">
-    <div class="command-center">
-      <!-- Central Emma Orb (WebGL) with Elegant Vault Unlock -->
-      <div class="emma-orb-container" id="emma-orb">
-        <div class="emma-orb-webgl" id="webgl-orb-container">
-          <!-- WebGL Emma Orb will be inserted here -->
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <!-- Radial Menu (Clean 4-item layout around Emma orb) -->
-  <div class="radial-menu" id="radial-menu">
-        <div class="radial-item" data-action="memories">
-          <div class="radial-item-icon">
-            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-2.5 2.5M6.5 3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H6.5z"/>
-              <path d="M9 10h6M9 14h4"/>
-            </svg>
-          </div>
-          <div class="radial-item-label">Memories</div>
-        </div>
-        <div class="radial-item" data-action="people">
-          <div class="radial-item-icon">
-            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
-              <circle cx="12" cy="7" r="4"/>
-            </svg>
-          </div>
-          <div class="radial-item-label">People</div>
-        </div>
-        <div class="radial-item" data-action="chat">
-          <div class="radial-item-icon">
-            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
-            </svg>
-          </div>
-          <div class="radial-item-label">Chat</div>
-        </div>
-      </div>
-
-  <!-- Bottom Left Clean Icons -->
-  <div class="clean-icons" style="
-    position: fixed;
-    bottom: 24px;
-    left: 24px;
-    display: flex;
-    gap: 16px;
-    z-index: 1000;
-  ">
-    <!-- Clean Settings Gear Icon -->
-    <div onclick="window.location.href='pages/emma-settings-redesigned.html'" style="
-      cursor: pointer;
-      color: rgba(255, 255, 255, 0.7);
-      transition: all 0.3s ease;
-      padding: 8px;
-    " onmouseover="this.style.color='white'; this.style.transform='scale(1.1)'" onmouseout="this.style.color='rgba(255, 255, 255, 0.7)'; this.style.transform='scale(1)'">
-      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-        <circle cx="12" cy="12" r="3"/>
-        <path d="m12 1 1.09 3.26L16 5.64l-1.64 3.36L17 12l-2.64 2.64L16 18.36l-3.26-1.09L12 23l-1.09-3.26L8 18.36l1.64-3.36L7 12l2.64-2.64L8 5.64l3.26 1.09z"/>
-      </svg>
-    </div>
-  </div>
-
-      <!-- Quick Stats -->
-      <div class="quick-stats">
-        <div class="stat-item" data-stat="memories">
-          <div class="stat-value" id="stat-memories">0</div>
-          <div class="stat-label">Memories</div>
-        </div>
-        <div class="stat-item" data-stat="people">
-          <div class="stat-value" id="stat-people">0</div>
-          <div class="stat-label">People</div>
-        </div>
-
-        <!-- Revolutionary Migration Button -->
-        <div class="stat-item revolution-upgrade" onclick="openMigrationPage()" style="background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(236, 72, 153, 0.2)); border: 2px solid rgba(139, 92, 246, 0.4); cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden;">
-          <div class="stat-value" style="font-size: 1.2rem; color: #8b5cf6;">🌟</div>
-          <div class="stat-label" style="color: #ec4899; font-weight: 600; font-size: 0.8rem;">Upgrade to .emma</div>
-          <div style="position: absolute; top: 4px; right: 4px; background: linear-gradient(135deg, #8b5cf6, #ec4899); color: white; font-size: 0.6rem; padding: 2px 6px; border-radius: 8px; font-weight: 600;">NEW</div>
-        </div>
-        <div class="stat-item" data-stat="today">
-          <div class="stat-value" id="stat-today">0</div>
-          <div class="stat-label">Today</div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <!-- Burger menu removed for clean interface -->
-
-  <!-- Right Side Panel Stack -->
-  <div class="info-panel right-stack" id="daily-brief">
-    <div class="panel-header">
-      <div class="panel-icon">📅</div>
-      <div class="panel-title">Daily Brief</div>
-    </div>
-    <div class="panel-content">
-      <p>Good morning! You have 3 memories from this day last year.</p>
-      <p style="margin-top: 12px; font-size: 13px; opacity: 0.8;">
-        • Meeting with Sarah about the project<br>
-        • Family dinner at Marina Bay<br>
-        • Completed the meditation course
-      </p>
-    </div>
-  </div>
-
-  <div class="info-panel right-stack" id="ai-insights">
-    <div class="panel-header">
-      <div class="panel-icon">💡</div>
-      <div class="panel-title">AI Insights</div>
-    </div>
-    <div class="panel-content">
-      <p>I noticed you've been capturing more creative moments lately. Your photography memories have increased by 40% this month!</p>
-    </div>
-  </div>
-
-  <div class="info-panel right-stack" id="quick-actions">
-    <div class="panel-header">
-      <div class="panel-icon">⚡</div>
-      <div class="panel-title">Quick Actions</div>
-    </div>
-    <div class="panel-content">
-      <p>Press <kbd>Space</kbd> to activate voice capture<br>
-      Press <kbd>Cmd+K</kbd> to search memories<br>
-      Say "Hey Emma" to start</p>
-    </div>
-  </div>
-
-  <!-- Voice Indicator -->
-  <div class="voice-indicator" id="voice-indicator">
-    <div class="voice-waves">
-      <div class="voice-wave"></div>
-      <div class="voice-wave"></div>
-      <div class="voice-wave"></div>
-      <div class="voice-wave"></div>
-      <div class="voice-wave"></div>
-    </div>
-    <span>Listening...</span>
-  </div>
-
-  <!-- Loading Overlay -->
-  <div class="loading-overlay" id="loading">
-    <div class="loading-content">
-      <div class="loading-orb"></div>
-      <p style="color: var(--emma-text-secondary);">Loading Emma...</p>
-    </div>
-  </div>
-
-  <!-- Vault Management Modal -->
-  <div id="vault-modal" class="vault-modal" style="display: none;">
-    <div class="vault-modal-content">
-      <div class="vault-modal-header">
-        <div class="vault-header-content">
-          <div class="vault-icon">🔐</div>
-          <div class="vault-title">
-            <h2>Emma Memory Vault</h2>
-            <p id="vault-subtitle">Secure access to your encrypted memories</p>
-          </div>
-        </div>
-        <button class="vault-close" id="close-vault-modal">×</button>
-      </div>
-
-      <div class="vault-modal-body">
-        <!-- Vault Status Section -->
-        <div class="vault-status-section">
-          <div class="vault-status-card" id="vault-status-card">
-            <div class="status-icon" id="status-icon">🔒</div>
-            <div class="status-info">
-              <h3 id="status-title">Vault Locked</h3>
-              <p id="status-description">Enter your vault code to access your memories</p>
-            </div>
-            <div class="status-action">
-              <button id="vault-action-btn" class="vault-btn primary">Unlock Vault</button>
-            </div>
-          </div>
-        </div>
-
-        <!-- Unlock Form Section -->
-        <div class="vault-unlock-section" id="unlock-section" style="display: none;">
-          <div class="unlock-form">
-            <label for="vault-password">Vault Code</label>
-            <input type="password" id="vault-password" placeholder="Enter your vault code" autocomplete="current-password">
-            <div class="unlock-actions">
-              <button id="unlock-btn" class="vault-btn primary">🔓 Unlock</button>
-              <button id="cancel-unlock-btn" class="vault-btn secondary">Cancel</button>
-            </div>
-          </div>
-        </div>
-
-        <!-- Create New Vault Section -->
-        <div class="vault-create-section" id="create-vault-section" style="display: none;">
-          <div class="create-vault-card">
-            <div class="create-vault-icon">🆕</div>
-            <div class="create-vault-content">
-              <h3>No Vault Found</h3>
-              <p>Create your first Emma memory vault to get started</p>
-              <button id="create-vault-btn" class="vault-btn primary">
-                🔐 Create New Vault
-              </button>
-            </div>
-          </div>
-        </div>
-
-        <!-- QR Sharing Section -->
-        <div class="vault-qr-section" id="qr-section">
-          <h3>📱 Quick Share</h3>
-          <p>Generate QR codes to securely share your vault or memories</p>
-
-          <div class="qr-options">
-            <div class="qr-option-card" id="generate-vault-qr-dashboard">
-              <div class="qr-option-icon">🔐</div>
-              <div class="qr-option-content">
-                <h4>Share Vault</h4>
-                <p>Time-limited access to your vault</p>
-              </div>
-              <div class="qr-option-action">
-                <button class="vault-btn secondary small">Generate QR</button>
-              </div>
-            </div>
-
-            <div class="qr-option-card" id="open-qr-scanner-dashboard">
-              <div class="qr-option-icon">📷</div>
-              <div class="qr-option-content">
-                <h4>Scan QR Code</h4>
-                <p>Access shared memories</p>
-              </div>
-              <div class="qr-option-action">
-                <button class="vault-btn secondary small">Open Scanner</button>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- Quick Actions -->
-        <div class="vault-actions-section">
-          <div class="quick-actions-grid">
-            <button class="quick-action" onclick="window.location.href='pages/gallery.html'">
-              <span>💝</span>
-              <span>Memories</span>
-            </button>
-            <button class="quick-action" onclick="window.location.href='pages/emma-settings-redesigned.html'">
-              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color: rgba(255, 255, 255, 0.8);">
-                <circle cx="12" cy="12" r="3"/>
-                <path d="m12 1 1.09 3.26L16 5.64l-1.64 3.36L17 12l-2.64 2.64L16 18.36l-3.26-1.09L12 23l-1.09-3.26L8 18.36l1.64-3.36L7 12l2.64-2.64L8 5.64l3.26 1.09z"/>
-              </svg>
-              <span>Settings</span>
-            </button>
-            <button class="quick-action" onclick="window.location.href='pages/people-emma.html'">
-              <span>👥</span>
-              <span>People</span>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <!-- Load all your beautiful Emma components! -->
-  <link rel="stylesheet" href="css/voice-capture-minimal.css">
-  <link rel="stylesheet" href="css/emma-chat-clean.css">
-  <link rel="stylesheet" href="css/emma-share.css">
-
-  <script src="js/base-orb.js"></script>
-  <script src="js/emma-orb.js"></script>
-  <script src="js/vault-control-panel.js"></script>
-  <script src="js/experience-popup-base.js"></script>
-  <script src="js/voice-capture-experience.js"></script>
-  <script src="js/emma-voice-transcription.js"></script>
-  <script src="js/emma-chat-experience.js"></script>
-  <script src="js/emma-qr-generator.js"></script>
-  <script src="js/qr-service.js"></script>
-  <script src="js/emma-share-experience.js"></script>
-  <script src="js/assistant-experience-popup.js"></script>
-  <script src="js/universal-vault-modal.js"></script>
-  <script src="js/unified-memory-wizard.js"></script>
-
-  <script>
-    // Extension mode - Skip vault session validation
-
-    // Vault initialization moved to end of page after ALL scripts load
-
-    // Dashboard Controller
-    class EmmaDashboard {
-      constructor() {
-        this.orb = document.getElementById('emma-orb');
-        this.radialMenu = document.getElementById('radial-menu');
-        this.voiceIndicator = document.getElementById('voice-indicator');
-        this.loading = document.getElementById('loading');
-
-        console.log('🔧 Constructor - radial items:', this.radialMenu ? this.radialMenu.querySelectorAll('.radial-item').length : 'NULL');
-        this.panels = {
-          dailyBrief: document.getElementById('daily-brief'),
-          aiInsights: document.getElementById('ai-insights'),
-          quickActions: document.getElementById('quick-actions')
-        };
-
-        // Burger menu removed for clean interface
-        this.panelsVisible = false;
-
-        // Utility icons functionality
-        this.utilityIcons = document.querySelector('.utility-icons');
-        this.setupUtilityIcons();
-
-        this.isMenuOpen = false;
-        this.stats = { memories: 0, people: 0, today: 0 };
-        this.particles = [];
-        this.nodes = [];
-        this.neuralCanvas = document.getElementById('neural-canvas');
-        this.neuralCtx = this.neuralCanvas.getContext('2d');
-
-        // Neural memory network properties
-        this.isConstellationMode = false;
-        this.constellationMemories = [];
-        this.centralNeuron = null;
-
-        // Initialize WebGL Emma Orb
-        this.initEmmaOrb();
-
-        // Listen for vault status changes
-        document.addEventListener('vaultStatusChanged', (event) => {
-
-          this.updateVaultNodeStatus();
-          this.updateAllVaultIndicators();
-        });
-
-        this.init();
-      }
-
-      async init() {
-        // Show loading
-        this.loading.classList.add('active');
-
-        // Initialize Emma's orb in loading screen
-        this.initLoadingOrb();
-
-        // Initialize constellation background
-        this.initConstellation();        // Setup event listeners
-        this.setupEventListeners();
-
-        // Load initial data
-        await this.loadDashboardData();
-
-        // Animate panels based on time of day
-        this.showContextualPanels();
-
-        // Hide loading
-        setTimeout(() => {
-          this.loading.classList.remove('active');
-        }, 1500);
-
-        // Start background animations
-        this.startAnimations();
-      }
-
-      initConstellation() {
-        const canvas = document.getElementById('constellation');
-        const ctx = canvas.getContext('2d');
-
-        // Set canvas size
-        const resize = () => {
-          canvas.width = window.innerWidth;
-          canvas.height = window.innerHeight;
-        };
-        resize();
-        window.addEventListener('resize', resize);
-
-        // Create memory particles
-        const particleCount = 50;
-        for (let i = 0; i < particleCount; i++) {
-          this.particles.push({
-            x: Math.random() * canvas.width,
-            y: Math.random() * canvas.height,
-            vx: (Math.random() - 0.5) * 0.5,
-            vy: (Math.random() - 0.5) * 0.5,
-            radius: Math.random() * 2 + 1,
-            opacity: Math.random() * 0.5 + 0.2
-          });
-        }
-
-        // Animation loop
-        const animate = () => {
-          ctx.clearRect(0, 0, canvas.width, canvas.height);
-
-          // Update and draw particles
-          this.particles.forEach((p, i) => {
-            // Update position
-            p.x += p.vx;
-            p.y += p.vy;
-
-            // Wrap around edges
-            if (p.x < 0) p.x = canvas.width;
-            if (p.x > canvas.width) p.x = 0;
-            if (p.y < 0) p.y = canvas.height;
-            if (p.y > canvas.height) p.y = 0;
-
-            // Draw particle
-            ctx.beginPath();
-            ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
-            ctx.fillStyle = `rgba(134, 88, 255, ${p.opacity})`;
-            ctx.fill();
-
-            // Draw connections
-            this.particles.forEach((p2, j) => {
-              if (i !== j) {
-                const dx = p.x - p2.x;
-                const dy = p.y - p2.y;
-                const dist = Math.sqrt(dx * dx + dy * dy);
-
-                if (dist < 100) {
-                  ctx.beginPath();
-                  ctx.moveTo(p.x, p.y);
-                  ctx.lineTo(p2.x, p2.y);
-                  ctx.strokeStyle = `rgba(134, 88, 255, ${(1 - dist / 100) * 0.2})`;
-                  ctx.stroke();
-                }
-              }
-            });
-          });
-
-          requestAnimationFrame(animate);
-        };
-        animate();
-      }
-
-      setupEventListeners() {
-        // Orb click - exit constellation or toggle menu
-        this.orb.addEventListener('click', (e) => {
-          e.stopPropagation();
-          if (this.isConstellationMode) {
-            // Simple: Exit constellation mode back to main dashboard
-            this.exitMemoryConstellation();
-          } else {
-            this.toggleRadialMenu();
-          }
-        });
-
-        // Radial menu items
-        this.radialMenu.querySelectorAll('.radial-item').forEach(item => {
-          item.addEventListener('click', (e) => {
-            e.stopPropagation();
-            const action = item.dataset.action;
-            this.handleRadialAction(action);
-          });
-        });
-
-        // Track mouse/touch position for neural effects
-        this.mouseX = 0;
-        this.mouseY = 0;
-
-        // Mouse support
-        document.addEventListener('mousemove', (e) => {
-          this.mouseX = e.clientX;
-          this.mouseY = e.clientY;
-          this.updateNodeProximityEffects();
-        });
-
-        // Touch support for mobile
-        document.addEventListener('touchmove', (e) => {
-          if (e.touches.length > 0) {
-            this.mouseX = e.touches[0].clientX;
-            this.mouseY = e.touches[0].clientY;
-            this.updateNodeProximityEffects();
-          }
-        }, { passive: true });
-
-        document.addEventListener('touchstart', (e) => {
-          if (e.touches.length > 0) {
-            this.mouseX = e.touches[0].clientX;
-            this.mouseY = e.touches[0].clientY;
-          }
-        }, { passive: true });
-
-        // Handle window resize for responsive repositioning
-        window.addEventListener('resize', () => {
-          // Debounce resize events
-          clearTimeout(this.resizeTimeout);
-          this.resizeTimeout = setTimeout(() => {
-            if (this.isMenuOpen || this.isConstellationMode) {
-              this.repositionNodesOnResize();
-              
-              // CRITICAL FIX: Resize canvas and redraw connections after repositioning
-              if (this.neuralCanvas) {
-                this.neuralCanvas.width = window.innerWidth;
-                this.neuralCanvas.height = window.innerHeight;
-              }
-              
-              // Force immediate redraw of connections with new positions
-              this.animateNeuralNetwork();
-            }
-          }, 250);
-        });
-      }
-
-      // Extract proximity effects to separate method for reuse
-      updateNodeProximityEffects() {
-        // Add proximity effects to nodes (both menu and constellation modes)
-        if ((this.isMenuOpen || this.isConstellationMode) && this.nodes.length > 0) {
-          this.nodes.forEach(node => {
-            const dist = Math.sqrt(
-              Math.pow(this.mouseX - node.x, 2) +
-              Math.pow(this.mouseY - node.y, 2)
-            );
-
-            if (dist < 120) {
-              // Subtle attraction to mouse with organic feel
-              const force = (120 - dist) / 120;
-              const angle = Math.atan2(this.mouseY - node.y, this.mouseX - node.x);
-
-              // Very gentle attraction with organic damping
-              const attractionStrength = force * 0.08; // Much more subtle
-              node.vx += Math.cos(angle) * attractionStrength;
-              node.vy += Math.sin(angle) * attractionStrength;
-
-              // Add glow effect (stronger for memory nodes)
-              const glowStrength = this.isConstellationMode ? 60 : 40;
-              const baseOpacity = this.isConstellationMode ? 0.8 : 0.6;
-              node.element.style.boxShadow = `0 0 ${glowStrength + force * 30}px rgba(134, 88, 255, ${baseOpacity + force * 0.4})`;
-            } else {
-              // Reset glow when mouse is far
-              node.element.style.boxShadow = '';
-            }
-          });
-        }
-      }
-
-      // Reposition nodes on window resize for responsive behavior
-      repositionNodesOnResize() {
-        if (!this.nodes || this.nodes.length === 0) return;
-
-        const centerX = window.innerWidth / 2;
-        const centerY = window.innerHeight / 2;
-
-        // Recalculate responsive radius
-        const isMobile = window.innerWidth <= 768;
-        const isTablet = window.innerWidth <= 1024 && window.innerWidth > 768;
-        let radius;
-
-        if (isMobile) {
-          radius = Math.min(window.innerWidth, window.innerHeight) * 0.25;
-        } else if (isTablet) {
-          radius = 200;
-        } else {
-          radius = 250;
-        }
-
-        // Reposition each node
-        this.nodes.forEach((node, i) => {
-          if (this.isConstellationMode) {
-            // For constellation mode, maintain relative positions but scale
-            const scaleX = window.innerWidth / (this.lastWindowWidth || window.innerWidth);
-            const scaleY = window.innerHeight / (this.lastWindowHeight || window.innerHeight);
-
-            node.x = centerX + (node.x - centerX) * scaleX;
-            node.y = centerY + (node.y - centerY) * scaleY;
-            node.baseX = node.x;
-            node.baseY = node.y;
-          } else {
-            // For radial menu, recalculate circular positions
-            const angle = (i / this.nodes.length) * Math.PI * 2 - Math.PI / 2;
-            node.x = centerX + Math.cos(angle) * radius;
-            node.y = centerY + Math.sin(angle) * radius;
-            node.baseX = node.x;
-            node.baseY = node.y;
-          }
-
-          // Update DOM position
-          if (node.element) {
-            const elementSize = isMobile ? 35 : 45; // Half of element size for centering
-            node.element.style.left = (node.x - elementSize) + 'px';
-            node.element.style.top = (node.y - elementSize) + 'px';
-          }
-        });
-
-        // Store current window size for next resize
-        this.lastWindowWidth = window.innerWidth;
-        this.lastWindowHeight = window.innerHeight;
-
-      }
-
-      // Keyboard shortcuts
-      setupKeyboardShortcuts() {
-        document.addEventListener('keydown', (e) => {
-          if (e.code === 'Space' && !e.target.matches('input, textarea')) {
-            e.preventDefault();
-            this.startVoiceCapture();
-          } else if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
-            e.preventDefault();
-            this.handleRadialAction('search');
-          } else if (e.key === 'Escape' && this.isMenuOpen) {
-            this.toggleRadialMenu();
-          }
-        });
-
-        // Click outside to close menu
-        document.addEventListener('click', (e) => {
-          if (this.isMenuOpen && !this.orb.contains(e.target) && !this.radialMenu.contains(e.target)) {
-
-            this.toggleRadialMenu();
-          }
-        });
-
-        // Hover effects for orb
-        this.orb.addEventListener('mouseenter', () => {
-          document.querySelectorAll('.quick-stats').forEach(el => {
-            el.style.opacity = '1';
-          });
-        });
-
-        // Initialize keyboard shortcuts
-        this.setupKeyboardShortcuts();
-
-        // CRITICAL FIX: Listen for vault status changes from extension
-        this.setupVaultStatusListener();
-      }
-
-      // Listen for vault status changes and update UI
-      setupVaultStatusListener() {
-        window.addEventListener('vault-status-changed', (event) => {
-
-          // Update global status
-          window.currentVaultStatus = event.detail;
-
-          // Update vault node status in UI
-          this.updateVaultNodeStatus();
-
-          // Update any vault-dependent UI elements
-          this.refreshVaultDependentUI();
-        });
-
-        // Also listen for extension-vault-ready directly
-        window.addEventListener('extension-vault-ready', (event) => {
-
-          // Ensure vault status is updated
-          if (window.webVaultStatus) {
-            window.webVaultStatus.status.isUnlocked = true;
-            window.webVaultStatus.status.hasVault = true;
-            window.webVaultStatus.status.name = event.detail.vaultName;
-            window.currentVaultStatus = window.webVaultStatus.status;
-          }
-
-          // Update UI immediately
-          this.updateVaultNodeStatus();
-        });
-      }
-
-      // Refresh UI elements that depend on vault status
-      refreshVaultDependentUI() {
-        // Update any vault-dependent elements
-        const vaultElements = document.querySelectorAll('[data-vault-dependent]');
-        vaultElements.forEach(element => {
-          if (window.currentVaultStatus && window.currentVaultStatus.isUnlocked) {
-            element.classList.remove('vault-locked');
-            element.classList.add('vault-unlocked');
-          } else {
-            element.classList.remove('vault-unlocked');
-            element.classList.add('vault-locked');
-          }
-        });
-      }
-
-      initNeuralNetwork() {
-        // Initialize neural nodes with responsive positioning
-
-        console.log('🔧 radialMenu innerHTML preview:', this.radialMenu ? this.radialMenu.innerHTML.substring(0, 200) : 'NULL');
-
-        const items = this.radialMenu.querySelectorAll('.radial-item');
-        const centerX = window.innerWidth / 2;
-        const centerY = window.innerHeight / 2;
-
-        // Responsive radius calculation
-        const isMobile = window.innerWidth <= 768;
-        const isTablet = window.innerWidth <= 1024 && window.innerWidth > 768;
-        let radius;
-
-        if (isMobile) {
-          radius = Math.min(window.innerWidth, window.innerHeight) * 0.25; // 25% of smaller dimension
-        } else if (isTablet) {
-          radius = 200;
-        } else {
-          radius = 250;
-        }
-
-        // Debug: Check if items exist but are hidden
-        if (items.length === 0) {
-
-          const allChildren = this.radialMenu.querySelectorAll('*');
-
-          allChildren.forEach((child, i) => {
-
-          });
-        }
-
-        items.forEach((item, i) => {
-          const angle = (i / items.length) * Math.PI * 2 - Math.PI / 2;
-          const x = centerX + Math.cos(angle) * radius;
-          const y = centerY + Math.sin(angle) * radius;
-
-          // CRITICAL: Actually position the DOM element
-          item.style.left = (x - 45) + 'px'; // Center the 90px item
-          item.style.top = (y - 45) + 'px';
-          console.log('🔧 Positioned item', i, 'at', x, y, 'DOM:', (x-45), (y-45));
-
-          this.nodes.push({
-            element: item,
-            x: x,
-            y: y,
-            vx: 0,
-            vy: 0,
-            baseX: x,
-            baseY: y,
-            angle: angle,
-            connections: []
-          });
-        });
-
-        // Create connections between nodes
-        this.nodes.forEach((node, i) => {
-          // Connect to adjacent nodes
-          const next = this.nodes[(i + 1) % this.nodes.length];
-          const prev = this.nodes[(i - 1 + this.nodes.length) % this.nodes.length];
-          node.connections.push(next, prev);
-
-          // Connect to opposite node for cross-connections
-          const opposite = this.nodes[(i + Math.floor(this.nodes.length / 2)) % this.nodes.length];
-          if (opposite !== node) {
-            node.connections.push(opposite);
-          }
-        });
-
-        // Add central orb as a node
-        this.centralNode = {
-          x: centerX,
-          y: centerY,
-          element: this.orb
-        };
-
-        // Connect all nodes to center
-        this.nodes.forEach(node => {
-          node.connections.push(this.centralNode);
-        });
-      }
-
-      // Removed initRadialNeuralNetwork - no longer needed since we exit constellation instead of showing menu overlay
-
-      toggleRadialMenu() {
-        this.isMenuOpen = !this.isMenuOpen;
-
-        if (this.isMenuOpen) {
-          this.radialMenu.classList.add('active');
-          document.body.classList.add('menu-active'); // Fade ALL UI elements
-
-          this.updateVaultNodeStatus(); // Update vault node based on status
-
-          // Initialize neural network (constellation mode now exits instead of showing menu)
-
-          this.initNeuralNetwork();
-
-          this.animateNeuralNetwork();
-
-          // Stagger animations for menu items
-
-          const menuItems = this.radialMenu.querySelectorAll('.radial-item');
-
-          menuItems.forEach((item, i) => {
-            setTimeout(() => {
-
-              // Use !important to override CSS animation
-              item.style.setProperty('transform', 'scale(1)', 'important');
-              item.style.setProperty('opacity', '1', 'important');
-              // Temporarily disable float animation during menu
-              item.style.animationPlayState = 'paused';
-            }, i * 50);
-          });
-        } else {
-          this.radialMenu.classList.remove('active');
-          document.body.classList.remove('menu-active'); // Restore ALL UI elements
-
-          this.radialMenu.querySelectorAll('.radial-item').forEach(item => {
-            item.style.setProperty('transform', 'scale(0)', 'important');
-            item.style.setProperty('opacity', '0', 'important');
-            // Re-enable float animation when menu closes
-            item.style.animationPlayState = 'running';
-          });
-
-          // Clear neural animation
-          if (this.neuralAnimationId) {
-            cancelAnimationFrame(this.neuralAnimationId);
-            this.neuralCtx.clearRect(0, 0, this.neuralCanvas.width, this.neuralCanvas.height);
-          }
-
-          // Reset nodes array (constellation mode exits instead of showing menu overlay)
-          this.nodes = [];
-        }
-      }
-
-      initLoadingOrb() {
-        try {
-          const loadingOrbContainer = document.querySelector('.loading-orb');
-          if (!loadingOrbContainer) {
-            console.warn('🌟 Loading orb container not found');
-            return;
-          }
-
-          if (window.EmmaOrb) {
-            // Create WebGL Emma Orb for loading screen
-            this.loadingOrb = new window.EmmaOrb(loadingOrbContainer, {
-              hue: 270, // Emma's signature purple-pink
-              hoverIntensity: 0.5,
-              rotateOnHover: false,
-              forceHoverState: true // Always show active state during loading
-            });
-
-          } else {
-            console.warn('🌟 EmmaOrb class not available for loading, using fallback');
-            // Fallback to gradient orb if WebGL not available
-            const fallbackDiv = document.createElement('div');
-            fallbackDiv.className = 'loading-orb-fallback';
-            loadingOrbContainer.appendChild(fallbackDiv);
-          }
-        } catch (error) {
-          console.error('🚨 Error initializing Loading Emma Orb:', error);
-          // Fallback on error
-          const loadingOrbContainer = document.querySelector('.loading-orb');
-          if (loadingOrbContainer) {
-            const fallbackDiv = document.createElement('div');
-            fallbackDiv.className = 'loading-orb-fallback';
-            loadingOrbContainer.appendChild(fallbackDiv);
-          }
-        }
-      }
-
-      initEmmaOrb() {
-        try {
-          const orbContainer = document.getElementById('webgl-orb-container');
-          if (!orbContainer) {
-            console.warn('🌟 WebGL orb container not found');
-            return;
-          }          if (window.EmmaOrb) {
-            try {
-              // Create WebGL Emma Orb with Emma's signature purple-pink hue
-              this.webglOrb = new window.EmmaOrb(orbContainer, {
-                hue: 270, // Purple-pink Emma colors
-                hoverIntensity: 0.35,
-                rotateOnHover: true,
-                forceHoverState: false
-              });
-
-            } catch (webglError) {
-              console.error('❌ WebGL orb creation failed:', webglError);
-              // Force fallback
-              window.EmmaOrb = null;
-            }
-          }
-
-          if (!window.EmmaOrb || !this.webglOrb) {
-            console.warn('🌟 EmmaOrb class not available, using fallback');
-            // Fallback to beautiful gradient if EmmaOrb class not loaded
-            orbContainer.style.background = 'radial-gradient(circle at 30% 30%, #8658ff, #4f46e5, #f093fb)';
-            orbContainer.style.borderRadius = '50%';
-            orbContainer.style.width = '100%';
-            orbContainer.style.height = '100%';
-            orbContainer.style.boxShadow = '0 0 40px rgba(134, 88, 255, 0.6), inset 0 0 40px rgba(255, 255, 255, 0.1)';
-            orbContainer.style.animation = 'orb-pulse 3s ease-in-out infinite';
-
-          }
-
-          // Clean Emma orb - no vault unlock needed on dashboard
-        } catch (error) {
-          console.error('🚨 Error initializing Emma Orb:', error);
-          // Ensure fallback is applied
-          const orbContainer = document.getElementById('webgl-orb-container');
-          if (orbContainer) {
-            orbContainer.style.background = 'radial-gradient(circle at 30% 30%, #8658ff, #4f46e5)';
-            orbContainer.style.borderRadius = '50%';
-            orbContainer.style.width = '100%';
-            orbContainer.style.height = '100%';
-          }
-        }
-      }
-
-      updateVaultNodeStatus() {
-        try {
-
-          const vaultNode = document.getElementById('vault-node');
-          if (!vaultNode) {
-            console.warn('⚠️ Vault node not found, skipping status update');
-            // Try alternative selectors
-            const altVaultNode = document.querySelector('[data-action="vault"], .radial-item[onclick*="vault"]');
-            if (altVaultNode) {
-
-              this.updateAlternativeVaultNode(altVaultNode);
-            }
-            return;
-          }
-
-          const vaultIcon = vaultNode.querySelector('.radial-item-icon');
-          if (!vaultIcon) {
-            console.warn('⚠️ Vault icon not found, trying alternative selector');
-            const altIcon = vaultNode.querySelector('span, .icon');
-            if (altIcon) {
-
-              this.updateVaultIcon(altIcon, vaultNode);
-              return;
-            }
-            return;
-          }
-
-          this.updateVaultIcon(vaultIcon, vaultNode);
-        } catch (error) {
-          console.warn('⚠️ Error updating vault node status:', error);
-        }
-      }
-
-      updateVaultIcon(vaultIcon, vaultNode) {
-        if (window.currentVaultStatus && window.currentVaultStatus.isUnlocked) {
-
-          vaultIcon.textContent = '🔓';
-          vaultNode.style.background = 'rgba(74, 222, 128, 0.1)'; // Green tint when unlocked
-          vaultNode.style.borderColor = 'rgba(74, 222, 128, 0.3)';
-          vaultNode.style.boxShadow = '0 0 20px rgba(74, 222, 128, 0.4)';
-        } else {
-
-          vaultIcon.textContent = '🔒';
-          vaultNode.style.background = 'var(--emma-glass)'; // Default when locked
-          vaultNode.style.borderColor = 'rgba(134, 88, 255, 0.3)';
-          vaultNode.style.boxShadow = '0 0 20px rgba(134, 88, 255, 0.2)';
-        }
-      }
-
-      updateAlternativeVaultNode(node) {
-        const icon = node.querySelector('span') || node;
-        if (window.currentVaultStatus && window.currentVaultStatus.isUnlocked) {
-          icon.textContent = '🔓';
-          node.style.background = 'rgba(74, 222, 128, 0.1)';
-        } else {
-          icon.textContent = '🔒';
-          node.style.background = 'var(--emma-glass)';
-        }
-      }
-
-      updateAllVaultIndicators() {
-
-        // Update any vault-related elements
-        const vaultElements = document.querySelectorAll('[data-action="vault"], .vault-indicator, #vault-node');
-        vaultElements.forEach(element => {
-          const icon = element.querySelector('span, .radial-item-icon') || element;
-          if (window.currentVaultStatus && window.currentVaultStatus.isUnlocked) {
-            if (icon.textContent) icon.textContent = '🔓';
-            element.style.background = 'rgba(74, 222, 128, 0.1)';
-            element.style.borderColor = 'rgba(74, 222, 128, 0.3)';
-            element.style.boxShadow = '0 0 20px rgba(74, 222, 128, 0.4)';
-          } else {
-            if (icon.textContent) icon.textContent = '🔒';
-            element.style.background = 'var(--emma-glass)';
-            element.style.borderColor = 'rgba(134, 88, 255, 0.3)';
-            element.style.boxShadow = '0 0 20px rgba(134, 88, 255, 0.2)';
-          }
-        });
-
-      }
-
-      // Check if a line intersects with Emma orb circle
-      lineIntersectsCircle(x1, y1, x2, y2, cx, cy, radius) {
-        // Vector from point1 to point2
-        const dx = x2 - x1;
-        const dy = y2 - y1;
-
-        // Vector from point1 to circle center
-        const fx = x1 - cx;
-        const fy = y1 - cy;
-
-        // Quadratic equation coefficients
-        const a = dx * dx + dy * dy;
-        const b = 2 * (fx * dx + fy * dy);
-        const c = (fx * fx + fy * fy) - radius * radius;
-
-        const discriminant = b * b - 4 * a * c;
-
-        // No intersection if discriminant is negative
-        if (discriminant < 0) return false;
-
-        // Check if intersection points are within the line segment
-        const sqrt_discriminant = Math.sqrt(discriminant);
-        const t1 = (-b - sqrt_discriminant) / (2 * a);
-        const t2 = (-b + sqrt_discriminant) / (2 * a);
-
-        // If either intersection point is within [0,1], line intersects circle
-        return (t1 >= 0 && t1 <= 1) || (t2 >= 0 && t2 <= 1) || (t1 < 0 && t2 > 1);
-      }
-
-      animateNeuralNetwork() {
-        // Resize canvas
-        this.neuralCanvas.width = window.innerWidth;
-        this.neuralCanvas.height = window.innerHeight;
-
-        const animate = () => {
-          if (!this.isMenuOpen && !this.isConstellationMode) return;
-
-          // Clear canvas
-          this.neuralCtx.clearRect(0, 0, this.neuralCanvas.width, this.neuralCanvas.height);
-
-          // Draw subtle grid background when menu is open or in constellation mode
-          if (this.isMenuOpen || this.isConstellationMode) {
-            this.neuralCtx.strokeStyle = 'rgba(134, 88, 255, 0.03)';
-            this.neuralCtx.lineWidth = 1;
-            const gridSize = 50;
-
-            // Draw vertical lines
-            for (let x = 0; x < this.neuralCanvas.width; x += gridSize) {
-              this.neuralCtx.beginPath();
-              this.neuralCtx.moveTo(x, 0);
-              this.neuralCtx.lineTo(x, this.neuralCanvas.height);
-              this.neuralCtx.stroke();
-            }
-
-            // Draw horizontal lines
-            for (let y = 0; y < this.neuralCanvas.height; y += gridSize) {
-              this.neuralCtx.beginPath();
-              this.neuralCtx.moveTo(0, y);
-              this.neuralCtx.lineTo(this.neuralCanvas.width, y);
-              this.neuralCtx.stroke();
-            }
-          }
-
-          // Update node positions with organic movement (only for visible nodes)
-          const time = Date.now() * 0.001;
-          this.nodes.forEach((node, i) => {
-            // CRITICAL FIX: Only animate visible nodes
-            const nodeElement = node.element || document.getElementById(node.id);
-            if (!nodeElement || nodeElement.style.display === 'none') {
-              return; // Skip animation for hidden nodes
-            }
-            // Gentle organic floating movement (petri dish feel)
-            const floatX = Math.sin(time * 0.3 + i) * 12;
-            const floatY = Math.cos(time * 0.2 + i * 0.5) * 8;
-
-            // Gentle elastic force back to base position (petri dish feel)
-            const dx = (node.baseX + floatX) - node.x;
-            const dy = (node.baseY + floatY) - node.y;
-
-            node.vx += dx * 0.005; // Much gentler elastic force
-            node.vy += dy * 0.005;
-
-            // Apply more damping for organic feel
-            node.vx *= 0.98;
-            node.vy *= 0.98;
-
-            // Add repulsion from Emma orb (prevent overlap)
-            if (this.centralNode && this.isConstellationMode) {
-              const orbDx = node.x - this.centralNode.x;
-              const orbDy = node.y - this.centralNode.y;
-              const orbDist = Math.sqrt(orbDx * orbDx + orbDy * orbDy);
-
-              // Repulsion zone around Emma orb
-              const repulsionRadius = 150;
-              if (orbDist < repulsionRadius && orbDist > 0) {
-                const repulsionForce = (repulsionRadius - orbDist) / repulsionRadius;
-                const forceStrength = repulsionForce * 0.3; // Gentle but firm repulsion
-
-                const normalizedDx = orbDx / orbDist;
-                const normalizedDy = orbDy / orbDist;
-
-                node.vx += normalizedDx * forceStrength;
-                node.vy += normalizedDy * forceStrength;
-              }
-            }
-
-            // Add gentle repulsion between memory nodes (prevent overlap)
-            if (this.isConstellationMode) {
-              this.nodes.forEach((otherNode, j) => {
-                if (i !== j) {
-                  // CRITICAL FIX: Only calculate repulsion with visible nodes
-                  const otherElement = otherNode.element || document.getElementById(otherNode.id);
-                  if (!otherElement || otherElement.style.display === 'none') {
-                    return; // Skip repulsion with hidden nodes
-                  }
-                  const nodeDx = node.x - otherNode.x;
-                  const nodeDy = node.y - otherNode.y;
-                  const nodeDist = Math.sqrt(nodeDx * nodeDx + nodeDy * nodeDy);
-
-                  // Minimum distance between nodes
-                  const minNodeDistance = 110;
-                  if (nodeDist < minNodeDistance && nodeDist > 0) {
-                    const repulsionForce = (minNodeDistance - nodeDist) / minNodeDistance;
-                    const forceStrength = repulsionForce * 0.1; // Very gentle node repulsion
-
-                    const normalizedDx = nodeDx / nodeDist;
-                    const normalizedDy = nodeDy / nodeDist;
-
-                    node.vx += normalizedDx * forceStrength;
-                    node.vy += normalizedDy * forceStrength;
-                  }
-                }
-              });
-            }
-
-            // Update position
-            node.x += node.vx;
-            node.y += node.vy;
-
-            // Update DOM element position
-            node.element.style.left = node.x - 45 + 'px';
-            node.element.style.top = node.y - 45 + 'px';
-          });
-
-          // Draw connections with gradients (only between visible nodes)
-          this.nodes.forEach(node => {
-            // CRITICAL FIX: Check if source node is visible before drawing connections
-            const sourceElement = node.element || document.getElementById(node.id);
-            if (!sourceElement || sourceElement.style.display === 'none') {
-              return; // Skip connections from hidden nodes
-            }
-
-            node.connections.forEach(target => {
-              // CRITICAL FIX: Check if target node is visible before drawing connection
-              const targetElement = target.element || document.getElementById(target.id);
-              if (!targetElement || targetElement.style.display === 'none') {
-                return; // Skip connections to hidden nodes
-              }
-
-              // Check if line would pass through Emma orb area - if so, skip drawing
-              const centerX = window.innerWidth / 2;
-              const centerY = window.innerHeight / 2;
-              const orbRadius = 110; // Clean boundary around orb
-
-              if (this.lineIntersectsCircle(node.x, node.y, target.x, target.y, centerX, centerY, orbRadius)) {
-                return; // Skip drawing this connection - it would cross the orb
-              }
-
-              // Calculate distance for opacity
-              const dist = Math.sqrt(
-                Math.pow(node.x - target.x, 2) +
-                Math.pow(node.y - target.y, 2)
-              );
-
-              // Different opacity for main menu vs memory constellation
-              const isMemoryMode = this.isConstellationMode && !this.isMenuOpen;
-              const gradient = this.neuralCtx.createLinearGradient(
-                node.x, node.y, target.x, target.y
-              );
-
-              if (isMemoryMode) {
-                // Visible connections for memory constellation
-                gradient.addColorStop(0, 'rgba(134, 88, 255, 0.2)');
-                gradient.addColorStop(0.5, 'rgba(240, 147, 251, 0.15)');
-                gradient.addColorStop(1, 'rgba(134, 88, 255, 0.2)');
-                this.neuralCtx.lineWidth = 1.2 + Math.sin(time + dist * 0.01) * 0.2;
-              } else {
-                // Subtle connections for main menu (original loved style)
-                gradient.addColorStop(0, 'rgba(134, 88, 255, 0.03)');
-                gradient.addColorStop(0.5, 'rgba(240, 147, 251, 0.02)');
-                gradient.addColorStop(1, 'rgba(134, 88, 255, 0.03)');
-                this.neuralCtx.lineWidth = 0.5 + Math.sin(time + dist * 0.01) * 0.1;
-              }
-
-              this.neuralCtx.strokeStyle = gradient;
-
-              this.neuralCtx.beginPath();
-              this.neuralCtx.moveTo(node.x, node.y);
-
-              // Gentle organic curved connections
-              const midX = (node.x + target.x) / 2;
-              const midY = (node.y + target.y) / 2;
-              const curve1 = Math.sin(time * 0.4 + node.x * 0.005) * 15;
-              const curve2 = Math.cos(time * 0.3 + node.y * 0.005) * 10;
-
-              this.neuralCtx.bezierCurveTo(
-                node.x + curve1,
-                node.y + curve2,
-                target.x - curve2,
-                target.y - curve1,
-                target.x,
-                target.y
-              );
-
-              this.neuralCtx.stroke();
-            });
-          });
-
-          // Remove energy pulses - too aggressive
-
-          this.neuralAnimationId = requestAnimationFrame(animate);
-        };
-
-        animate();
-      }
-
-      async handleRadialAction(action) {
-
-        switch(action) {
-          case 'capture':
-            this.startVoiceCapture();
-            break;
-          case 'memories':
-            await this.enterMemoryConstellation();
-            break;
-          case 'people':
-            window.location.href = 'pages/people-emma.html';
-            break;
-          case 'chat':
-            this.startEmmaChatExperience();
-            break;
-        }
-
-        // Close menu after action
-        if (this.isMenuOpen) {
-          this.toggleRadialMenu();
-        }
-      }
-
-      // SAFETY METHOD: Fallback for any lingering render() calls
-      render() {
-        console.warn('🔧 DASHBOARD: render() is deprecated, using animateNeuralNetwork() instead');
-        this.animateNeuralNetwork();
-      }
-
-      async startVoiceCapture() {
-
-        // Calculate elegant position relative to Emma orb
-        const orbRect = this.orb.getBoundingClientRect();
-        const viewportWidth = window.innerWidth;
-        const viewportHeight = window.innerHeight;
-
-        // Position the panel optimally
-        let left = orbRect.right + 24;
-        let top = Math.max(40, orbRect.top - 80);
-
-        // Ensure it fits in viewport
-        const panelWidth = 480;
-        const panelHeight = 700;
-
-        if (left + panelWidth > viewportWidth - 40) {
-          left = orbRect.left - panelWidth - 24;
-        }
-
-        if (top + panelHeight > viewportHeight - 40) {
-          top = viewportHeight - panelHeight - 40;
-        }
-
-        const position = {
-          left: Math.max(40, left),
-          top: Math.max(40, top),
-          width: panelWidth,
-          height: panelHeight
-        };
-
-        // Create and show voice capture experience
-        this.voiceCaptureExperience = new VoiceCaptureExperience(position, {
-          voiceEnabled: true,
-          autoStart: false // Let user initiate
-        });
-
-        try {
-          await this.voiceCaptureExperience.show();
-
-        } catch (error) {
-          console.error('🎤 Failed to open voice capture:', error);
-          this.showToast('Failed to open Voice Memory Studio. Please try again.', 'error');
-        }
-      }
-
-      async startEmmaChatExperience() {
-
-        // Center chat in the middle of the page
-        const viewportWidth = window.innerWidth;
-        const viewportHeight = window.innerHeight;
-
-        // Chat panel dimensions
-        const panelWidth = 600; // Wider for comfortable chat
-        const panelHeight = 700;
-
-        // Center position in the middle of the page
-        const position = {
-          left: (viewportWidth - panelWidth) / 2,
-          top: (viewportHeight - panelHeight) / 2,
-          width: panelWidth,
-          height: panelHeight
-        };
-
-        // Create and show Emma chat experience
-        this.emmaChatExperience = new EmmaChatExperience(position, {
-          contextAware: true,
-          memoryIntegration: true
-        });
-
-        try {
-          await this.emmaChatExperience.show();
-
-        } catch (error) {
-          console.error('💬 Failed to open Emma Chat:', error);
-          this.showToast('Failed to open Chat with Emma. Please try again.', 'error');
-        }
-      }
-
-      openVaultModal() {
-        // Check if extension is available first
-        if (window.emmaWebVault && window.emmaWebVault.extensionAvailable) {
-          // Extension is managing vault - dashboard should work automatically
-
-          return; // Don't show vault modal, extension handles everything
-        }
-
-        const modal = document.getElementById('vault-modal');
-        const statusIcon = document.getElementById('status-icon');
-        const statusTitle = document.getElementById('status-title');
-        const statusDescription = document.getElementById('status-description');
-        const actionBtn = document.getElementById('vault-action-btn');
-        const statusCard = document.getElementById('vault-status-card');
-        const unlockSection = document.getElementById('unlock-section');
-        const createVaultSection = document.getElementById('create-vault-section');
-
-        // Check if .emma vault is active (only if extension not available)
-        const vaultActive = sessionStorage.getItem('emmaVaultActive') === 'true';
-        const vaultName = sessionStorage.getItem('emmaVaultName') || 'Unknown Vault';
-        const extensionVaultActive = false; // Extension not available in this branch
-
-        if (extensionVaultActive) {
-          // Extension is managing vault - show connected status
-          statusIcon.textContent = '🔗';
-          statusTitle.textContent = 'Extension Connected';
-          statusDescription.textContent = 'Vault managed by Emma Extension - changes auto-save to local file';
-          actionBtn.textContent = '🔒 Manage via Extension';
-          actionBtn.onclick = () => alert('Click the Emma extension icon 🔒 in your browser toolbar to manage your vault!');
-          actionBtn.style.display = 'block';
-          unlockSection.style.display = 'none';
-          createVaultSection.style.display = 'none';
-          statusCard.classList.add('unlocked'); // Show as unlocked/connected
-        } else if (window.currentVaultStatus && window.currentVaultStatus.isUnlocked) {
-          statusIcon.textContent = '🔓';
-          statusTitle.textContent = `${vaultName} - Unlocked`;
-          statusDescription.textContent = `Your .emma vault file is open and your memories are accessible`;
-          actionBtn.textContent = '🔒 Lock Vault';
-          actionBtn.onclick = () => this.lockVault();
-          actionBtn.style.display = 'block';
-          statusCard.classList.add('unlocked');
-          unlockSection.style.display = 'none';
-          createVaultSection.style.display = 'none';
-        } else {
-          statusIcon.textContent = '🔒';
-          statusTitle.textContent = 'Vault Locked';
-          statusDescription.textContent = 'Enter your vault code to access your memories';
-          actionBtn.textContent = 'Unlock Vault';
-          actionBtn.onclick = () => this.showUnlockForm();
-          actionBtn.style.display = 'block';
-          statusCard.classList.remove('unlocked');
-          unlockSection.style.display = 'none';
-          createVaultSection.style.display = 'none';
-        }
-
-        modal.style.display = 'flex';
-        setTimeout(() => {
-          modal.classList.add('show');
-        }, 10);
-
-        // Store reference for global access
-        window.openVaultModal = () => this.openVaultModal();
-      }
-
-      closeVaultModal() {
-        const modal = document.getElementById('vault-modal');
-        modal.classList.remove('show');
-        setTimeout(() => {
-          modal.style.display = 'none';
-        }, 300);
-      }
-
-      showUnlockForm() {
-        // Use beautiful universal vault modal instead of inline form
-        universalVaultModal.show({
-          title: "Unlock Vault",
-          message: "Enter your vault passphrase to access your secure memories",
-          onSuccess: (result) => {
-
-            // Update vault status using unified manager
-            const vaultName = sessionStorage.getItem('emmaVaultName') || 'Web Vault';
-            window.webVaultStatus.unlock(vaultName);
-
-            // Refresh dashboard data and UI
-            this.loadDashboardData();
-
-            // IMMEDIATE vault icon update
-            const vaultIcon = document.querySelector('#vault-node .radial-item-icon');
-            if (vaultIcon) {
-              vaultIcon.textContent = '🔓';
-
-            }
-
-            // Update vault node with delay to ensure DOM is ready
-            setTimeout(() => {
-              this.updateVaultNodeStatus();
-
-              // Also try to update any other vault indicators
-              this.updateAllVaultIndicators();
-
-              // Force another immediate update
-              const vaultIconAgain = document.querySelector('#vault-node .radial-item-icon');
-              if (vaultIconAgain) {
-                vaultIconAgain.textContent = '🔓';
-
-              }
-            }, 100);
-
-            // Don't reopen modal - let it close naturally
-            // The next time user opens it, it will show correct status
-
-            this.showToast('✅ Vault unlocked successfully!', 'success');
-
-          },
-          onCancel: () => {
-
-          }
-        });
-      }
-
-      hideUnlockForm() {
-        const unlockSection = document.getElementById('unlock-section');
-        const passwordInput = document.getElementById('vault-password');
-        unlockSection.style.display = 'none';
-        passwordInput.value = '';
-      }
-
-      async unlockVault() {
-        const passwordInput = document.getElementById('vault-password');
-        const unlockBtn = document.getElementById('unlock-btn');
-        const password = passwordInput.value.trim();
-
-        if (!password) {
-          passwordInput.focus();
-          return;
-        }
-
-        try {
-          unlockBtn.disabled = true;
-          unlockBtn.textContent = '🔓 Unlocking...';
-
-          if (window.emmaAPI && window.emmaAPI.vault) {
-            const result = await window.emmaAPI.vault.unlock({ passphrase: password });
-
-            if (result && result.success) {
-              // Success - update status and close form
-              window.currentVaultStatus = { isUnlocked: true };
-              await this.loadDashboardData();
-              this.updateVaultNodeStatus(); // Update the floating vault node
-              this.hideUnlockForm();
-              this.openVaultModal(); // Refresh modal with new status
-              this.showToast('✅ Vault unlocked successfully!', 'success');
-            } else {
-              throw new Error(result?.error || 'Unlock failed');
-            }
-          } else {
-            // No API available
-            throw new Error('Vault API not available');
-          }
-        } catch (error) {
-          console.error('🏠 Dashboard: Unlock error:', error);
-          this.showToast('❌ Failed to unlock vault: ' + error.message, 'error');
-        } finally {
-          unlockBtn.disabled = false;
-          unlockBtn.textContent = '🔓 Unlock';
-        }
-      }
-
-      async lockVault() {
-        try {
-          if (window.emmaAPI && window.emmaAPI.vault) {
-            const result = await window.emmaAPI.vault.lock();
-
-            if (result && result.success) {
-              window.currentVaultStatus = { isUnlocked: false };
-              await this.loadDashboardData();
-              this.updateVaultNodeStatus(); // Update the floating vault node
-              this.openVaultModal(); // Refresh modal with new status
-              this.showToast('🔒 Vault locked successfully!', 'success');
-            } else {
-              throw new Error(result?.error || 'Lock failed');
-            }
-          } else {
-            // Demo mode
-            console.warn('🏠 Dashboard: No Emma API - demo lock');
-            window.currentVaultStatus = { isUnlocked: false };
-            await this.loadDashboardData();
-            this.updateVaultNodeStatus(); // Update the floating vault node
-            this.openVaultModal();
-            this.showToast('🎭 Demo vault locked!', 'info');
-          }
-        } catch (error) {
-          console.error('🏠 Dashboard: Lock error:', error);
-          this.showToast('❌ Failed to lock vault: ' + error.message, 'error');
-        }
-      }
-
-      // Clean dashboard - vault unlock handled by index.html
-
-      async showQRShare() {
-
-        // Check if classes are available
-        if (typeof EmmaShareExperience === 'undefined') {
-          console.error('🔗 EmmaShareExperience class not found');
-          this.showToast('Share feature unavailable. Please refresh the page.', 'error');
-          return;
-        }
-
-        if (typeof QRService === 'undefined') {
-          console.warn('🔗 QRService class not found - will use fallback');
-        }
-
-        // Calculate elegant position relative to Emma orb
-        const orbRect = this.orb.getBoundingClientRect();
-        const viewportWidth = window.innerWidth;
-        const viewportHeight = window.innerHeight;        // Position the share panel optimally
-        let left = orbRect.right + 24;
-        let top = Math.max(40, orbRect.top - 120);
-
-        // Share panel dimensions
-        const panelWidth = 650; // Wider for share content
-        const panelHeight = 720;
-
-        // Ensure it fits in viewport
-        if (left + panelWidth > viewportWidth - 40) {
-          left = orbRect.left - panelWidth - 24;
-        }
-
-        if (top + panelHeight > viewportHeight - 40) {
-          top = viewportHeight - panelHeight - 40;
-        }
-
-        const position = {
-          left: Math.max(40, left),
-          top: Math.max(40, top),
-          width: panelWidth,
-          height: panelHeight
-        };
-
-        try {
-          // Create and show Emma share experience
-          this.emmaShareExperience = new EmmaShareExperience(position, {
-            contextAware: true,
-            vaultIntegration: true
-          });
-
-          // Set global reference for share actions
-          window.shareExperience = this.emmaShareExperience;
-
-          await this.emmaShareExperience.show();
-
-        } catch (error) {
-          console.error('🔗 Failed to open Emma Share:', error);
-          this.showToast('Failed to open Share interface: ' + error.message, 'error');
-        }
-      }
-
-      async loadDashboardData() {
-        try {
-          // Use WebVaultStatus instead of old Electron API
-
-          // Don't override vault status - WebVaultStatus manages it
-          // window.currentVaultStatus is set by WebVaultStatus manager
-
-          // Keep central orb neutral - Emma branding only (text removed)
-
-          // Load stats from web vault
-          try {
-            if (window.emmaWebVault && window.webVaultStatus && window.webVaultStatus.isUnlocked()) {
-              const stats = window.emmaWebVault.getStats();
-              this.updateStats({
-                memories: stats.memoryCount || 0,
-                people: stats.peopleCount || 0,
-                today: 0 // TODO: Calculate today's memories
-              });
-            } else {
-              this.updateStats({ memories: 0, people: 0, today: 0 });
-            }
-          } catch (e) {
-            console.warn('⚠️ Web vault stats unavailable:', e.message);
-            this.updateStats({ memories: 0, people: 0, today: 0 });
-          }
-        } catch (error) {
-          console.error('🚨 Dashboard data load error:', error);
-          // Fallback to demo data - but DON'T override vault status!
-          // WebVaultStatus manager handles vault status, not this function
-          this.updateStats({ memories: 0, people: 0, today: 0 });
-        }
-      }
-
-      updateStats(newStats) {
-        Object.assign(this.stats, newStats);
-
-        // Animate number changes
-        Object.keys(newStats).forEach(key => {
-          const element = document.getElementById(`stat-${key}`);
-          if (element) {
-            const start = parseInt(element.textContent) || 0;
-            const end = this.stats[key];
-            const duration = 1000;
-            const startTime = Date.now();
-
-            const animate = () => {
-              const elapsed = Date.now() - startTime;
-              const progress = Math.min(elapsed / duration, 1);
-              const current = Math.floor(start + (end - start) * progress);
-              element.textContent = current;
-
-              if (progress < 1) {
-                requestAnimationFrame(animate);
-              }
-            };
-            animate();
-          }
-        });
-      }
-
-      showContextualPanels() {
-        // Panels are now hidden by default and shown via burger menu
-        // No longer auto-showing panels to reduce visual distraction
-
-      }
-
-      // Burger menu removed for clean interface
-
-      setupUtilityIcons() {
-        if (!this.utilityIcons) {
-          console.warn('🔧 Utility icons not found');
-          return;
-        }
-
-        // Add click handlers to utility items
-        this.utilityIcons.querySelectorAll('.utility-item').forEach(item => {
-          item.addEventListener('click', (e) => {
-            e.stopPropagation();
-            const action = item.dataset.action;
-            this.handleUtilityAction(action);
-          });
-        });
-
-      }
-
-      handleUtilityAction(action) {
-
-        switch(action) {
-          case 'settings':
-            window.location.href = 'pages/emma-settings-redesigned.html';
-            break;
-          default:
-
-        }
-      }
-
-      togglePanels() {
-        this.panelsVisible = !this.panelsVisible;
-
-        // Toggle body class for CSS animations
-        if (this.panelsVisible) {
-          document.body.classList.add('panels-visible');
-          this.burgerMenuBtn.classList.add('active');
-
-          // Also add active class to each panel for visibility
-          if (this.panels.dailyBrief) this.panels.dailyBrief.classList.add('active');
-          if (this.panels.aiInsights) this.panels.aiInsights.classList.add('active');
-          if (this.panels.quickActions) this.panels.quickActions.classList.add('active');
-        } else {
-          document.body.classList.remove('panels-visible');
-          this.burgerMenuBtn.classList.remove('active');
-
-          // Remove active class from panels
-          if (this.panels.dailyBrief) this.panels.dailyBrief.classList.remove('active');
-          if (this.panels.aiInsights) this.panels.aiInsights.classList.remove('active');
-          if (this.panels.quickActions) this.panels.quickActions.classList.remove('active');
-        }
-
-      }
-
-      startAnimations() {
-        // Subtle pulse animation for WebGL orb
-        setInterval(() => {
-          if (window.currentVaultStatus && !window.currentVaultStatus.isUnlocked) {
-            const orbContainer = this.orb.querySelector('.emma-orb-webgl');
-            if (orbContainer) {
-              orbContainer.style.animation = 'orb-pulse 2s ease-in-out';
-            }
-          }
-        }, 5000);
-      }      // Enter memory constellation mode
-      async enterMemoryConstellation() {
-
-        // CRITICAL: Clear any existing memory nodes first (prevents duplicates)
-        this.clearAllMemoryNodesFromDOM();
-
-        this.isConstellationMode = true;
-
-        // PERSISTENCE: Save constellation state for page refresh
-        localStorage.setItem('emmaConstellationActive', 'true');
-
-        // Add constellation-active class to hide all UI
-        document.body.classList.add('constellation-active');
-
-        // Shrink central orb
-        this.shrinkCentralOrb();
-
-        // Load memory data
-        await this.loadMemoriesForConstellation();
-
-        // Fade out current nodes
-        await this.fadeOutMenuNodes();
-
-        // Create memory constellation (await for real memories)
-        await this.createMemoryConstellation();
-
-        // Show constellation UI
-        this.showConstellationUI();
-      }
-
-      // Shrink central Emma orb when memories are visible
-      shrinkCentralOrb() {
-        const orbContainer = this.orb.querySelector('.emma-orb-webgl');
-        if (orbContainer) {
-          orbContainer.style.transition = 'transform 0.8s cubic-bezier(0.4, 0, 0.2, 1)';
-          orbContainer.style.transform = 'scale(0.7)';
-        }
-
-        // Also shrink the entire orb container
-        this.orb.style.transition = 'transform 0.8s cubic-bezier(0.4, 0, 0.2, 1)';
-        this.orb.style.transform = 'scale(0.7)';
-
-        // Add hover effects for memory mode
-        this.addOrbHoverEffects();
-      }
-
-      // Add hover effects to orb in memory mode
-      addOrbHoverEffects() {
-        if (this.orbHoverAdded) return;
-        this.orbHoverAdded = true;
-
-        const orbContainer = this.orb.querySelector('.emma-orb-webgl');
-
-        this.orb.addEventListener('mouseenter', () => {
-          if (this.isConstellationMode) {
-            this.orb.style.transform = 'scale(0.9)';
-            if (orbContainer) {
-              orbContainer.style.transform = 'scale(0.9)';
-            }
-          }
-        });
-
-        this.orb.addEventListener('mouseleave', () => {
-          if (this.isConstellationMode) {
-            this.orb.style.transform = 'scale(0.7)';
-            if (orbContainer) {
-              orbContainer.style.transform = 'scale(0.7)';
-            }
-          }
-        });
-      }
-
-      // Restore central Emma orb size
-      restoreCentralOrb() {
-        const orbContainer = this.orb.querySelector('.emma-orb-webgl');
-        if (orbContainer) {
-          orbContainer.style.transform = 'scale(1)';
-        }
-        this.orb.style.transform = 'scale(1)';
-      }
-
-      // Load memories for constellation
-      async loadMemoriesForConstellation() {
-        try {
-          // Get memories from API
-          let memories = await this.getMemories();
-
-          if (memories.length > 0) {
-
-            console.log('💝 CONSTELLATION DEBUG: Memory titles:', memories.map(m => m.title));
-          }
-
-          // Add debugging info about available APIs
-
-          this.constellationMemories = this.organizeMemoriesByTheme(memories);
-
-          // Count total memories
-          const totalMemories = Object.values(this.constellationMemories).reduce((sum, theme) => sum + theme.length, 0);
-
-          // If no memories, suggest user create some
-          if (totalMemories === 0) {
-
-          }
-
-        } catch (error) {
-
-          this.constellationMemories = {family: [], travel: [], recent: [], special: []};
-        }
-      }
-
-      // Get memories from vault (same API as gallery)
-      async getMemories() {
-        try {
-
-          // Use web app vault data directly (pure web app mode)
-          if (window.emmaWebVault && window.emmaWebVault.isOpen && window.emmaWebVault.vaultData) {
-
-            const vaultMemories = window.emmaWebVault.vaultData.content?.memories || {};
-            const vaultMedia = window.emmaWebVault.vaultData.content?.media || {};
-
-            // Convert vault memories to array format
-            const memories = Object.values(vaultMemories).map(memory => {
-              // Process attachments to include data URLs
-              const attachments = (memory.attachments || []).map(attachment => {
-                const mediaItem = vaultMedia[attachment.id];
-                if (mediaItem && mediaItem.data) {
-                  return {
-                    ...attachment,
-                    url: mediaItem.data.startsWith('data:')
-                      ? mediaItem.data
-                      : `data:${mediaItem.type};base64,${mediaItem.data}`,
-                    dataUrl: mediaItem.data.startsWith('data:')
-                      ? mediaItem.data
-                      : `data:${mediaItem.type};base64,${mediaItem.data}`,
-                    isPersisted: true
-                  };
-                }
-                return attachment;
-              });
-
-              return {
-                ...memory,
-                attachments
-              };
-            });
-
-            // FIXED: Add thumbnail from first attachment for constellation display
-            const memoriesWithThumbnails = memories.map(memory => {
-              const attachments = memory.attachments || [];
-              let thumbnail = memory.thumbnail;
-
-              // If no thumbnail but has attachments with URLs, use first attachment
-              if (!thumbnail && attachments.length > 0 && attachments[0].url) {
-                thumbnail = attachments[0].url;
-
-              }
-
-              return {
-                ...memory,
-                thumbnail
-              };
-            });
-
-            return memoriesWithThumbnails;
-          } else {
-
-            return [];
-          }
-        } catch (error) {
-          console.error('💝 CONSTELLATION: Error loading memories from vault:', error);
-          return [];
-        }
-      }
-
-      // Helper to detect category from memory content
-      detectCategoryFromContent(memory) {
-        const content = ((memory.title || '') + ' ' + (memory.content || '')).toLowerCase();
-        if (content.includes('family') || content.includes('mom') || content.includes('dad')) return 'family';
-        if (content.includes('travel') || content.includes('trip') || content.includes('vacation')) return 'travel';
-        if (memory.timestamp && new Date() - new Date(memory.timestamp) < 30 * 24 * 60 * 60 * 1000) return 'recent';
-        return 'special';
-      }
-
-      // Generate organic neural network positions (NOT circular)
-      generateNeuralNetworkPositions(nodeCount, centerX, centerY, width, height, minDistance) {
-        const positions = [];
-        const maxAttempts = 100;
-
-        // First position: Create Memory node in top-center area
-        positions.push({
-          x: centerX + (Math.random() - 0.5) * 100,
-          y: centerY - height * 0.25 + (Math.random() - 0.5) * 80
-        });
-
-        // Generate remaining positions with organic scatter
-        for (let i = 1; i < nodeCount; i++) {
-          let placed = false;
-          let attempts = 0;
-
-          while (!placed && attempts < maxAttempts) {
-            // Use clustered random distribution (not uniform)
-            const clusterX = centerX + (Math.random() - 0.5) * width;
-            const clusterY = centerY + (Math.random() - 0.5) * height;
-
-            // Add some organic bias toward clusters
-            const biasStrength = Math.random() * 0.3;
-            const biasAngle = Math.random() * Math.PI * 2;
-            const x = clusterX + Math.cos(biasAngle) * biasStrength * 150;
-            const y = clusterY + Math.sin(biasAngle) * biasStrength * 150;
-
-            // Check minimum distance from all existing nodes AND center orb
-            let validPosition = true;
-
-            // Check distance from center Emma orb (exclusion zone)
-            const distFromCenter = Math.sqrt((x - centerX) ** 2 + (y - centerY) ** 2);
-            if (distFromCenter < 150) { // 150px exclusion zone around Emma orb
-              validPosition = false;
-            }
-
-            // Check distance from other nodes
-            if (validPosition) {
-              for (const pos of positions) {
-                const dist = Math.sqrt((x - pos.x) ** 2 + (y - pos.y) ** 2);
-                if (dist < minDistance) {
-                  validPosition = false;
-                  break;
-                }
-              }
-            }
-
-            // Keep nodes within bounds
-            if (validPosition &&
-                x > centerX - width/2 + 50 && x < centerX + width/2 - 50 &&
-                y > centerY - height/2 + 50 && y < centerY + height/2 - 50) {
-              positions.push({ x, y });
-              placed = true;
-            }
-
-            attempts++;
-          }
-
-          // Fallback if can't place after max attempts
-          if (!placed) {
-            const angle = (i / nodeCount) * Math.PI * 2;
-            const fallbackRadius = 200 + Math.random() * 100;
-            positions.push({
-              x: centerX + Math.cos(angle) * fallbackRadius,
-              y: centerY + Math.sin(angle) * fallbackRadius
-            });
-          }
-        }
-
-        return positions;
-      }      // Generate memory thumbnail based on theme
-      generateMemoryThumbnail(theme) {
-        const themeEmojis = {
-          family: ['👨‍👩‍👧‍👦', '🏠', '❤️', '🍽️', '🎂'],
-          travel: ['✈️', '🗺️', '📸', '🏖️', '🏔️'],
-          recent: ['📱', '☕', '🌅', '🎵', '📚'],
-          special: ['🎉', '💝', '🌟', '🎈', '🎊']
-        };
-        const emojis = themeEmojis[theme] || ['💫'];
-        return emojis[Math.floor(Math.random() * emojis.length)];
-      }
-
-      // Organize memories by theme for constellations
-      organizeMemoriesByTheme(memories) {
-        const organized = {
-          family: [],
-          travel: [],
-          recent: [],
-          special: []
-        };
-
-        memories.forEach(memory => {
-          const theme = memory.theme || this.detectMemoryTheme(memory);
-          if (organized[theme]) {
-            organized[theme].push(memory);
-          } else {
-            organized.special.push(memory);
-          }
-        });
-
-        return organized;
-      }
-
-      // Detect memory theme from content
-      detectMemoryTheme(memory) {
-        // Use category first, then fallback to content analysis
-        if (memory.category) {
-          return memory.category;
-        }
-
-        const content = (memory.title + ' ' + (memory.content || memory.description || '')).toLowerCase();
-        if (content.includes('family') || content.includes('mom') || content.includes('dad')) return 'family';
-        if (content.includes('travel') || content.includes('trip') || content.includes('vacation')) return 'travel';
-        if (memory.date && new Date() - new Date(memory.date) < 30 * 24 * 60 * 60 * 1000) return 'recent';
-        return 'special';
-      }
-
-      // Fade out menu nodes
-      async fadeOutMenuNodes() {
-        return new Promise(resolve => {
-          this.radialMenu.querySelectorAll('.radial-item').forEach((item, i) => {
-            setTimeout(() => {
-              item.style.transition = 'all 0.5s ease';
-              item.style.opacity = '0';
-              item.style.transform = 'scale(0)';
-            }, i * 50);
-          });
-
-          setTimeout(resolve, 500);
-        });
-      }
-
-      // Create memory constellation using EXACT working neural network system
-      async createMemoryConstellation() {
-
-        // CRITICAL: Remove any existing memory nodes from DOM first
-        this.clearAllMemoryNodesFromDOM();
-
-        // Clear existing nodes array
-        this.nodes = [];
-
-        // Don't reload memories - use already loaded ones from enterMemoryConstellation()
-
-        // Get memories for constellation
-        const allMemories = [];
-        Object.keys(this.constellationMemories).forEach(theme => {
-          this.constellationMemories[theme].forEach(memory => {
-            allMemories.push({ ...memory, theme });
-          });
-        });
-
-        // Load people from vault for constellation
-        const allPeople = await this.loadPeopleForConstellation();
-        this.constellationPeople = allPeople; // Store for filtering
-
-        if (allMemories.length === 0 && allPeople.length === 0) {
-          console.warn('💝 No memories or people found in vault - constellation will show only the Create Memory node');
-        }
-
-        // Create memory and people nodes using EXACT same pattern as main menu
-        this.initMemoryNeuralNetwork(allMemories, allPeople);
-
-        // Set up for constellation mode without triggering menu
-        this.isMenuOpen = false; // CRITICAL: Constellation mode starts with menu closed
-        this.radialMenu.classList.remove('active'); // Ensure menu is hidden
-        document.body.classList.remove('menu-active');
-
-        // Start the neural animation (EXACT same as main menu)
-        this.animateNeuralNetwork();
-
-      }
-
-      // Load people from vault for constellation
-      async loadPeopleForConstellation() {
-        try {
-
-          if (window.emmaAPI && window.emmaAPI.people && window.emmaAPI.people.list) {
-            const result = await window.emmaAPI.people.list();
-
-            if (result && result.success && Array.isArray(result.items)) {
-
-              return result.items;
-            }
-          }
-
-          return [];
-
-        } catch (error) {
-          console.error('👥 CONSTELLATION: Error loading people:', error);
-          return [];
-        }
-      }
-
-      // Initialize memory neural network using EXACT same pattern as working main menu
-      initMemoryNeuralNetwork(memories, people = []) {
-
-        const centerX = window.innerWidth / 2;
-        const centerY = window.innerHeight / 2;
-        // Neural network layout parameters
-        const networkWidth = Math.min(window.innerWidth * 0.7, 800);
-        const networkHeight = Math.min(window.innerHeight * 0.7, 600);
-        const minDistance = 120; // Minimum distance between nodes
-
-        // Take up to 12 memories and up to 8 people for balanced constellation
-        const selectedMemories = memories.slice(0, 12);
-        const selectedPeople = people.slice(0, 8);
-        const totalNodes = selectedMemories.length + selectedPeople.length + 1; // +1 for create node
-
-        // Generate organic neural network positions
-        const positions = this.generateNeuralNetworkPositions(totalNodes, centerX, centerY, networkWidth, networkHeight, minDistance);
-
-        // Always add "Create New Memory" node at the first position (top-center area)
-        const createPos = positions[0];
-        const createMemoryElement = this.createCreateMemoryNodeElement(createPos.x, createPos.y);
-        this.nodes.push({
-          element: createMemoryElement,
-          x: createPos.x,
-          y: createPos.y,
-          vx: 0,
-          vy: 0,
-          baseX: createPos.x,
-          baseY: createPos.y,
-          connections: [],
-          isCreateNode: true
-        });
-
-        // Create memory nodes in organic neural pattern
-        selectedMemories.forEach((memory, i) => {
-          const pos = positions[i + 1]; // Skip position 0 (create node)
-
-          // Create memory node element
-          const memoryElement = this.createMemoryNodeElement(memory, pos.x, pos.y);
-
-          this.nodes.push({
-            element: memoryElement,
-            x: pos.x,
-            y: pos.y,
-            vx: 0,
-            vy: 0,
-            baseX: pos.x,
-            baseY: pos.y,
-            connections: [],
-            memory: memory,
-            type: 'memory'
-          });
-        });
-
-        // Create people nodes in remaining positions
-        selectedPeople.forEach((person, i) => {
-          const posIndex = selectedMemories.length + i + 1; // Skip create node and memory nodes
-          const pos = positions[posIndex];
-
-          if (pos) { // Make sure we have a position
-            // Create person node element
-            const personElement = this.createPersonNodeElement(person, pos.x, pos.y);
-
-            this.nodes.push({
-              element: personElement,
-              x: pos.x,
-              y: pos.y,
-              vx: 0,
-              vy: 0,
-              baseX: pos.x,
-              baseY: pos.y,
-              connections: [],
-              person: person,
-              type: 'person'
-            });
-          }
-        });
-
-        // Create intelligent connections between memories and people
-        this.createMemoryPeopleConnections(selectedMemories, selectedPeople);
-
-        // Create organic neural network connections (NOT spoked wheel)
-        this.nodes.forEach((node, i) => {
-          // Connect to 2-4 nearby nodes within a certain distance (organic clustering)
-          this.nodes.forEach((otherNode, j) => {
-            if (i !== j) {
-              const dist = Math.sqrt(
-                Math.pow(node.x - otherNode.x, 2) +
-                Math.pow(node.y - otherNode.y, 2)
-              );
-
-              // Connect to nodes within a reasonable distance (creates natural clusters)
-              if (dist < 250 && node.connections.length < 4) {
-                node.connections.push(otherNode);
-              }
-            }
-          });
-
-          // Ensure each node has at least 2 connections (prevent isolated nodes)
-          if (node.connections.length < 2) {
-            // Find the 2 closest nodes
-            const distances = this.nodes
-              .map((otherNode, j) => ({ node: otherNode, index: j, dist: j === i ? Infinity : Math.sqrt(Math.pow(node.x - otherNode.x, 2) + Math.pow(node.y - otherNode.y, 2)) }))
-              .sort((a, b) => a.dist - b.dist)
-              .slice(0, 2);
-
-            distances.forEach(({ node: closestNode }) => {
-              if (!node.connections.includes(closestNode)) {
-                node.connections.push(closestNode);
-              }
-            });
-          }
-        });
-
-        // Add central orb as a special node (but only some memory nodes connect to it)
-        this.centralNode = {
-          x: centerX,
-          y: centerY,
-          element: this.orb
-        };
-
-        // Only 3-4 random memory nodes connect to center (not all - avoids spoked wheel)
-        const centralConnections = Math.min(4, Math.floor(this.nodes.length / 3));
-        const shuffledNodes = [...this.nodes].sort(() => Math.random() - 0.5);
-        shuffledNodes.slice(0, centralConnections).forEach(node => {
-          node.connections.push(this.centralNode);
-        });
-
-      }
-
-      // Create memory node element that opens memory capsule dialog
-      createMemoryNodeElement(memory, x, y) {
-        const memoryElement = document.createElement('div');
-        memoryElement.className = 'memory-node';
-
-        // Add theme data attribute for styling
-        memoryElement.setAttribute('data-theme', memory.theme);
-
-        // CLEAN CIRCULAR NODE - No text labels, pure image capsule
-        memoryElement.style.cssText = `
-          position: fixed;
-          left: ${x}px;
-          top: ${y}px;
-          width: 80px;
-          height: 80px;
-          border-radius: 50%;
-          border: 3px solid rgba(139, 92, 246, 0.6);
-          cursor: pointer;
-          transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-          opacity: 0;
-          transform: scale(0);
-          box-shadow: 0 8px 32px rgba(139, 92, 246, 0.4);
-          z-index: 1500; /* CRITICAL FIX: Higher z-index to appear above all connections */
-          overflow: hidden;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-        `;
-
-        // APPLY BACKGROUND AFTER BASE STYLING: Memory capsule as single node with image background
-        if (memory.thumbnail) {
-          // Use image as background of the entire node - NO separate elements
-          memoryElement.style.backgroundImage = `url('${memory.thumbnail}')`;
-          memoryElement.style.backgroundSize = 'cover';
-          memoryElement.style.backgroundPosition = 'center';
-
-        } else {
-          // Fallback to gradient with emoji
-          memoryElement.style.background = 'linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%)';
-          const emojiDiv = document.createElement('div');
-          emojiDiv.style.cssText = 'font-size: 24px; color: white;';
-          emojiDiv.textContent = '💝';
-          memoryElement.appendChild(emojiDiv);
-
-        }
-
-        // Add click handler to open memory capsule dialog
-        memoryElement.addEventListener('click', (e) => {
-          e.stopPropagation();
-          this.openMemoryCapsuleDialog(memory);
-        });
-
-        // Add hover effects
-        memoryElement.addEventListener('mouseenter', () => {
-          memoryElement.style.transform = 'scale(1.1)';
-          memoryElement.style.boxShadow = '0 0 40px rgba(139, 92, 246, 0.6), 0 0 80px rgba(139, 92, 246, 0.4)';
-        });
-
-        memoryElement.addEventListener('mouseleave', () => {
-          memoryElement.style.transform = 'scale(1)';
-          memoryElement.style.boxShadow = '0 8px 32px rgba(139, 92, 246, 0.4)';
-        });
-
-        document.body.appendChild(memoryElement);
-
-        // Animate in with random delay for organic feel
-        const delay = Math.random() * 500 + 100;
-        setTimeout(() => {
-          memoryElement.style.transform = 'scale(1)';
-          memoryElement.style.opacity = '1';
-        }, delay);
-
-        return memoryElement;
-      }
-
-      // Create the "Create New Memory" node element with elegant SVG +
-      createCreateMemoryNodeElement(x, y) {
-        const createElement = document.createElement('div');
-        createElement.className = 'memory-node create-memory-node';
-        
-        // Create elegant SVG + icon
-        const svgPlus = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-        svgPlus.setAttribute('width', '24');
-        svgPlus.setAttribute('height', '24');
-        svgPlus.setAttribute('viewBox', '0 0 24 24');
-        svgPlus.style.cssText = `
-          filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.8));
-          transition: all 0.3s ease;
-        `;
-        
-        // Create + lines with elegant styling
-        const horizontalLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
-        horizontalLine.setAttribute('x1', '6');
-        horizontalLine.setAttribute('y1', '12');
-        horizontalLine.setAttribute('x2', '18');
-        horizontalLine.setAttribute('y2', '12');
-        horizontalLine.setAttribute('stroke', 'rgba(16, 185, 129, 1)');
-        horizontalLine.setAttribute('stroke-width', '2');
-        horizontalLine.setAttribute('stroke-linecap', 'round');
-        
-        const verticalLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
-        verticalLine.setAttribute('x1', '12');
-        verticalLine.setAttribute('y1', '6');
-        verticalLine.setAttribute('x2', '12');
-        verticalLine.setAttribute('y2', '18');
-        verticalLine.setAttribute('stroke', 'rgba(16, 185, 129, 1)');
-        verticalLine.setAttribute('stroke-width', '2');
-        verticalLine.setAttribute('stroke-linecap', 'round');
-        
-        svgPlus.appendChild(horizontalLine);
-        svgPlus.appendChild(verticalLine);
-        createElement.appendChild(svgPlus);
-
-        // Smaller, more elegant styling with compelling glow
-        createElement.style.cssText = `
-          position: fixed;
-          left: ${x - 30}px;
-          top: ${y - 30}px;
-          width: 60px;
-          height: 60px;
-          background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(34, 197, 94, 0.15));
-          backdrop-filter: blur(20px);
-          border: 2px solid rgba(16, 185, 129, 0.5);
-          border-radius: 50%;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          cursor: pointer;
-          transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-          opacity: 0;
-          transform: scale(0);
-          box-shadow: 
-            0 0 20px rgba(16, 185, 129, 0.4),
-            0 0 40px rgba(16, 185, 129, 0.2),
-            inset 0 0 20px rgba(16, 185, 129, 0.1);
-          animation: addNodeGlow 3s ease-in-out infinite;
-          z-index: 1500; /* CRITICAL FIX: Higher z-index to appear above all connections */
-        `;
-
-        // Add hover effect with enhanced SVG glow
-        createElement.addEventListener('mouseenter', () => {
-          createElement.style.transform = 'scale(1.15)';
-          createElement.style.boxShadow = `
-            0 0 30px rgba(16, 185, 129, 0.6),
-            0 0 60px rgba(16, 185, 129, 0.4),
-            inset 0 0 30px rgba(16, 185, 129, 0.2)
-          `;
-          svgPlus.style.filter = 'drop-shadow(0 0 12px rgba(16, 185, 129, 1))';
-        });
-
-        createElement.addEventListener('mouseleave', () => {
-          createElement.style.transform = 'scale(1)';
-          createElement.style.boxShadow = `
-            0 0 20px rgba(16, 185, 129, 0.4),
-            0 0 40px rgba(16, 185, 129, 0.2),
-            inset 0 0 20px rgba(16, 185, 129, 0.1)
-          `;
-          svgPlus.style.filter = 'drop-shadow(0 0 8px rgba(16, 185, 129, 0.8))';
-        });
-
-        // Add click handler to open Emma chat for memory creation
-        createElement.addEventListener('click', (e) => {
-          e.stopPropagation();
-
-          // Open Emma chat experience for intelligent memory creation
-          this.startEmmaChatExperience();
-        });
-
-        document.body.appendChild(createElement);
-
-        // Animate in
-        setTimeout(() => {
-          createElement.style.transform = 'scale(1)';
-          createElement.style.opacity = '1';
-        }, 100);
-
-        return createElement;
-      }
-
-      // Open Emma memory creation wizard (proper capture wizard)
-      openEmmaMemoryWizard() {
-
-        // CRITICAL FIX: Debug and ensure AssistantExperience is available
-
-        console.log('🧠 DEBUG: Available window objects:', Object.keys(window).filter(k => k.includes('Assistant') || k.includes('Experience')));
-
-        try {
-          // Wait a moment for scripts to load, then check again
-          setTimeout(() => {
-
-            if (window.AssistantExperience) {
-
-              // Create and show the full assistant experience popup
-              const assistantInstance = new window.AssistantExperience(
-                { x: window.innerWidth / 2, y: window.innerHeight / 2 },
-                { showCloseButton: true }
-              );
-              // Show the full popup - this will open with the voice wizard tab active
-              assistantInstance.show();
-              // Store reference for global access
-              window.assistantInstance = assistantInstance;
-            } else {
-              console.error('🧠 AssistantExperience STILL not available after delay!');
-              console.log('🧠 Available classes:', Object.keys(window).filter(k => k.endsWith('Experience')));
-              this.showToast('❌ Emma Assistant not loaded', 'error');
-            }
-          }, 100);
-
-        } catch (error) {
-          console.error('Failed to open Emma memory wizard:', error);
-          this.showToast('❌ Failed to open memory wizard', 'error');
-        }
-      }
-
-      // Fallback voice memory wizard
-      openVoiceMemoryWizard() {
-        console.log('🧠 Opening voice memory wizard (fallback)');
-
-        // Create a voice memory wizard modal similar to AssistantExperience
-        const modalHTML = `
-          <div class="voice-wizard-modal" style="
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: rgba(0, 0, 0, 0.8);
-            backdrop-filter: blur(12px);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            z-index: 10000;
-          ">
-            <div class="voice-wizard-content" style="
-              background: linear-gradient(135deg, rgba(138, 43, 226, 0.95), rgba(75, 0, 130, 0.95));
-              border-radius: 20px;
-              padding: 40px;
-              width: 90%;
-              max-width: 600px;
-              box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
-              border: 1px solid rgba(255, 255, 255, 0.2);
-              backdrop-filter: blur(20px);
-              color: white;
-              text-align: center;
-            ">
-              <div class="emma-section">
-                <div style="color: rgba(255, 255, 255, 0.8); font-size: 14px; margin-bottom: 8px;">EMMA ASKS</div>
-                <h1 style="margin: 0 0 24px 0; font-size: 28px; font-weight: 700;">
-                  What's your favorite memory with Mom? Take your time, I'm listening.
-                </h1>
-                <div class="suggestions" style="margin-bottom: 32px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;">
-                  <button class="suggestion-chip" style="
-                    padding: 8px 16px;
-                    background: rgba(255, 255, 255, 0.2);
-                    border: 1px solid rgba(255, 255, 255, 0.3);
-                    border-radius: 20px;
-                    color: white;
-                    font-size: 14px;
-                    cursor: pointer;
-                  ">Holiday traditions</button>
-                  <button class="suggestion-chip" style="
-                    padding: 8px 16px;
-                    background: rgba(255, 255, 255, 0.2);
-                    border: 1px solid rgba(255, 255, 255, 0.3);
-                    border-radius: 20px;
-                    color: white;
-                    font-size: 14px;
-                    cursor: pointer;
-                  ">Her wisdom</button>
-                  <button class="suggestion-chip" style="
-                    padding: 8px 16px;
-                    background: rgba(255, 255, 255, 0.2);
-                    border: 1px solid rgba(255, 255, 255, 0.3);
-                    border-radius: 20px;
-                    color: white;
-                    font-size: 14px;
-                    cursor: pointer;
-                  ">Family meals</button>
-                </div>
-              </div>
-
-              <div class="voice-capture" style="margin-bottom: 32px;">
-                <div class="voice-button-container" style="margin-bottom: 16px;">
-                  <button class="voice-button" style="
-                    width: 80px;
-                    height: 80px;
-                    border-radius: 50%;
-                    background: rgba(255, 255, 255, 0.2);
-                    border: 2px solid rgba(255, 255, 255, 0.3);
-                    color: white;
-                    cursor: pointer;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    margin: 0 auto;
-                  ">
-                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                      <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/>
-                      <path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
-                      <line x1="12" x2="12" y1="19" y2="22"/>
-                      <line x1="8" x2="16" y1="22" y2="22"/>
-                    </svg>
-                  </button>
-                </div>
-                <div style="color: rgba(255, 255, 255, 0.8); font-size: 14px;">Tap to start recording</div>
-              </div>
-
-              <div class="transcription" style="margin-bottom: 32px;">
-                <div style="color: rgba(255, 255, 255, 0.8); font-size: 14px; margin-bottom: 8px;">YOUR STORY</div>
-                <div style="
-                  background: rgba(255, 255, 255, 0.1);
-                  border-radius: 12px;
-                  padding: 20px;
-                  min-height: 80px;
-                  font-style: italic;
-                  color: rgba(255, 255, 255, 0.6);
-                ">Your words will appear here as you speak...</div>
-              </div>
-
-              <div style="margin-bottom: 24px;">
-                <div style="color: rgba(255, 255, 255, 0.8); font-size: 14px; margin-bottom: 8px;">1 of 5 questions</div>
-                <div style="
-                  width: 100%;
-                  height: 4px;
-                  background: rgba(255, 255, 255, 0.2);
-                  border-radius: 2px;
-                  overflow: hidden;
-                ">
-                  <div style="
-                    width: 20%;
-                    height: 100%;
-                    background: linear-gradient(90deg, #ffffff, rgba(255, 255, 255, 0.8));
-                    border-radius: 2px;
-                  "></div>
-                </div>
-              </div>
-
-              <div style="display: flex; gap: 12px; justify-content: center;">
-                <button class="skip-btn" style="
-                  padding: 14px 28px;
-                  border: 2px solid rgba(255, 255, 255, 0.3);
-                  background: rgba(255, 255, 255, 0.1);
-                  color: white;
-                  border-radius: 10px;
-                  cursor: pointer;
-                  font-size: 14px;
-                  font-weight: 500;
-                ">Skip</button>
-                <button class="continue-btn" style="
-                  padding: 14px 28px;
-                  border: none;
-                  background: rgba(255, 255, 255, 0.9);
-                  color: #6b46c1;
-                  border-radius: 10px;
-                  cursor: pointer;
-                  font-size: 14px;
-                  font-weight: 600;
-                ">Continue →</button>
-              </div>
-            </div>
-          </div>
-        `;
-
-        // Create and show modal - SECURITY FIX: Use safe DOM creation
-        const modal = document.createElement('div');
-        modal.className = 'modal-overlay';
-        modal.id = 'vault-migration-modal';
-        modal.style.cssText = 'display: flex; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); z-index: 10000; align-items: center; justify-content: center;';
-
-        const modalContent = document.createElement('div');
-        modalContent.className = 'modal-content';
-        modalContent.style.cssText = 'background: linear-gradient(135deg, #1a1033 0%, #2d1b69 50%, #0f0c29 100%); padding: 40px; border-radius: 20px; max-width: 500px; text-align: center; border: 1px solid rgba(139, 92, 246, 0.3);';
-
-        const title = document.createElement('h2');
-        title.textContent = '🔄 Vault Migration Available';
-        title.style.cssText = 'color: white; margin-bottom: 20px; font-size: 24px;';
-
-        const description = document.createElement('p');
-        description.textContent = 'A new vault storage system is available with enhanced security and performance. Would you like to migrate your existing vault?';
-        description.style.cssText = 'color: rgba(255, 255, 255, 0.8); margin-bottom: 30px; line-height: 1.6;';
-
-        const buttonContainer = document.createElement('div');
-        buttonContainer.style.cssText = 'display: flex; gap: 15px; justify-content: center;';
-
-        const skipBtn = document.createElement('button');
-        skipBtn.className = 'skip-btn';
-        skipBtn.textContent = 'Skip for Now';
-        skipBtn.style.cssText = 'padding: 12px 24px; background: rgba(255, 255, 255, 0.1); color: white; border: none; border-radius: 8px; cursor: pointer;';
-
-        const continueBtn = document.createElement('button');
-        continueBtn.className = 'continue-btn';
-        continueBtn.textContent = 'Migrate Vault';
-        continueBtn.style.cssText = 'padding: 12px 24px; background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); color: white; border: none; border-radius: 8px; cursor: pointer;';
-
-        buttonContainer.appendChild(skipBtn);
-        buttonContainer.appendChild(continueBtn);
-        modalContent.appendChild(title);
-        modalContent.appendChild(description);
-        modalContent.appendChild(buttonContainer);
-        modal.appendChild(modalContent);
-        document.body.appendChild(modal);
-
-        // Add event listeners
-        const skipBtnQuery = modal.querySelector('.skip-btn');
-        const continueBtnQuery = modal.querySelector('.continue-btn');
-
-        skipBtnQuery.addEventListener('click', () => modal.remove());
-        continueBtnQuery.addEventListener('click', () => {
-          // For now, just show a message and close
-          this.showToast('🎤 Voice wizard coming soon!', 'info');
-          modal.remove();
-        });
-
-        // Close on outside click
-        modal.addEventListener('click', (e) => {
-          if (e.target === modal) {
-            modal.remove();
-          }
-        });
-      }
-
-      // Open memory capsule dialog (reuses existing memory dialog system)
-      openMemoryCapsuleDialog(memory) {
-
-        this.openMemoryDialog(memory);
-      }
-
-      // Create neural branches from central Emma neuron
-      createNeuralBranches(memories) {
-
-        const centerX = window.innerWidth / 2;
-        const centerY = window.innerHeight / 2;
-
-        // First layer - primary neurons directly connected to Emma
-        const primaryCount = Math.min(8, memories.length); // Max 8 primary branches
-        const primaryAngleStep = (Math.PI * 2) / primaryCount;
-        const primaryRadius = 200;
-
-        // Create primary neurons
-        const primaryNeurons = [];
-        for (let i = 0; i < primaryCount; i++) {
-          const angle = i * primaryAngleStep - Math.PI / 2;
-          const x = centerX + Math.cos(angle) * primaryRadius;
-          const y = centerY + Math.sin(angle) * primaryRadius;
-
-          if (memories[i]) {
-            const neuron = this.createMemoryNode(memories[i], x, y, memories[i].theme);
-            neuron.isPrimary = true;
-            neuron.connections.push(this.centralNeuron);
-            this.centralNeuron.connections.push(neuron);
-            primaryNeurons.push(neuron);
-            this.nodes.push(neuron);
-          }
-        }
-
-        // Create secondary and tertiary neurons branching from primaries
-        let memoryIndex = primaryCount;
-        primaryNeurons.forEach((primaryNeuron, primaryIndex) => {
-          // Calculate how many secondary neurons this primary should have
-          const remainingMemories = memories.length - memoryIndex;
-          const remainingPrimaries = primaryCount - primaryIndex;
-          const secondaryCount = Math.ceil(remainingMemories / remainingPrimaries);
-
-          // Create secondary neurons
-          for (let j = 0; j < secondaryCount && memoryIndex < memories.length; j++) {
-            const memory = memories[memoryIndex++];
-
-            // Position secondary neurons in an arc around the primary
-            const secondaryAngle = primaryIndex * primaryAngleStep +
-              (j - secondaryCount/2) * (Math.PI / 6) / secondaryCount;
-            const secondaryRadius = 120 + Math.random() * 60;
-
-            const x = primaryNeuron.x + Math.cos(secondaryAngle) * secondaryRadius;
-            const y = primaryNeuron.y + Math.sin(secondaryAngle) * secondaryRadius;
-
-            // Ensure within bounds
-            const padding = 100;
-            const finalX = Math.max(padding, Math.min(window.innerWidth - padding, x));
-            const finalY = Math.max(padding, Math.min(window.innerHeight - padding, y));
-
-            const secondaryNeuron = this.createMemoryNode(memory, finalX, finalY, memory.theme);
-            secondaryNeuron.isSecondary = true;
-            secondaryNeuron.connections.push(primaryNeuron);
-            primaryNeuron.connections.push(secondaryNeuron);
-            this.nodes.push(secondaryNeuron);
-          }
-        });
-
-      }
-
-      // Create individual memory node
-      createMemoryNode(memory, x, y, theme) {
-        console.log(`🌟 Creating memory node element for "${memory.title}" at (${x}, ${y})`);
-
-        const memoryElement = document.createElement('div');
-        memoryElement.className = 'memory-node';
-
-        // SECURITY FIX: Use safe DOM creation instead of innerHTML
-        const thumbnail = document.createElement('div');
-        thumbnail.className = 'memory-thumbnail';
-        thumbnail.textContent = memory.thumbnail; // Safe text content
-
-        const label = document.createElement('div');
-        label.className = 'memory-label';
-        label.textContent = memory.title; // Safe text content
-
-        memoryElement.appendChild(thumbnail);
-        memoryElement.appendChild(label);
-
-        // Add theme data attribute for styling
-        memoryElement.setAttribute('data-theme', theme);
-
-        // Style the memory node
-        memoryElement.style.cssText = `
-          position: fixed;
-          left: ${x}px;
-          top: ${y}px;
-          width: 70px;
-          height: 70px;
-          border-radius: 50%;
-          background: radial-gradient(circle, rgba(255, 255, 255, 0.1), rgba(134, 88, 255, 0.2));
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          justify-content: center;
-          cursor: pointer;
-          transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-          transform: scale(0);
-          opacity: 0;
-          z-index: 1000;
-          color: white;
-        `;
-
-        // Add click handler for elegant memory dialog
-        memoryElement.addEventListener('click', (e) => {
-          e.stopPropagation();
-          this.openMemoryDialog(memory);
-        });
-
-        // Add hover effects with theme-based glow
-        memoryElement.addEventListener('mouseenter', () => {
-          const themeColors = {
-            family: 'rgba(255, 105, 135, 0.8)',
-            travel: 'rgba(52, 211, 153, 0.8)',
-            recent: 'rgba(96, 165, 250, 0.8)',
-            special: 'rgba(251, 191, 36, 0.8)'
-          };
-
-          memoryElement.style.transform = 'scale(1.3)';
-          memoryElement.style.boxShadow = `0 0 60px ${themeColors[theme] || 'rgba(134, 88, 255, 0.8)'}, 0 0 100px ${themeColors[theme] || 'rgba(134, 88, 255, 0.4)'}`;
-          memoryElement.style.zIndex = '1600'; /* CRITICAL FIX: Even higher on hover to stay above everything */
-        });
-
-        memoryElement.addEventListener('mouseleave', () => {
-          memoryElement.style.transform = 'scale(1)';
-          memoryElement.style.boxShadow = '';
-          memoryElement.style.zIndex = '1500'; /* CRITICAL FIX: Maintain high z-index even when not hovering */
-        });
-
-        // Append to a container that's below the canvas
-        const container = document.querySelector('.dashboard') || document.body;
-        container.appendChild(memoryElement);
-
-        // Animate in with staggered timing
-        const delay = Math.random() * 500 + 200; // 200-700ms delay
-        setTimeout(() => {
-
-          memoryElement.style.transform = 'scale(1)';
-          memoryElement.style.opacity = '1';
-        }, delay);
-
-        return {
-          element: memoryElement,
-          x: x,
-          y: y,
-          baseX: x,
-          baseY: y,
-          vx: 0,
-          vy: 0,
-          memory: memory,
-          theme: theme,
-          connections: []
-        };
-      }
-
-      // Create person node element for constellation with heartbeat effect
-      createPersonNodeElement(person, x, y) {
-        const personElement = document.createElement('div');
-        personElement.className = 'person-node';
-
-        // Create person avatar with first letter of name
-        const avatar = person.name.charAt(0).toUpperCase();
-        const relationColor = this.getRelationColor(person.relation);
-
-        // Create BIGGER avatar circle with subtle heartbeat glow - NO TEXT LABELS
-        personElement.style.cssText = `
-          position: fixed;
-          left: ${x}px;
-          top: ${y}px;
-          width: 85px;
-          height: 85px;
-          border-radius: 50%;
-          background: ${relationColor.gradient};
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          color: white;
-          font-weight: 700;
-          font-size: 28px;
-          border: 3px solid ${relationColor.border};
-          box-shadow: 
-            0 8px 32px ${relationColor.glow},
-            0 0 20px rgba(239, 68, 68, 0.3),
-            0 0 40px rgba(239, 68, 68, 0.1);
-          overflow: hidden;
-          cursor: pointer;
-          transform: scale(0);
-          opacity: 0;
-          transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-          animation: heartbeat 4s ease-in-out infinite;
-          z-index: 1500; /* CRITICAL FIX: Higher z-index to appear above all connections */
-        `;
-
-        // Start with letter, then try to load avatar image
-        personElement.textContent = avatar;
-
-        // Try to load actual avatar image if person has one
-        if (person.avatarId) {
-          this.loadPersonAvatar(person, personElement, avatar);
-        }
-
-        // Add click handler to open person detail modal (unified with people-emma.html)
-        personElement.addEventListener('click', (e) => {
-          e.stopPropagation();
-          this.openUnifiedPersonModal(person);
-        });
-
-        // Add hover effects with relation-based glow
-        personElement.addEventListener('mouseenter', () => {
-          personElement.style.transform = 'scale(1.2)';
-          personElement.style.boxShadow = `0 0 40px ${relationColor.glow}, 0 0 80px ${relationColor.glow}`;
-          personElement.style.zIndex = '1600'; /* CRITICAL FIX: Even higher on hover to stay above everything */
-        });
-
-        personElement.addEventListener('mouseleave', () => {
-          personElement.style.transform = 'scale(1)';
-          personElement.style.boxShadow = '';
-          personElement.style.zIndex = '1500'; /* CRITICAL FIX: Maintain high z-index even when not hovering */
-        });
-
-        // Append to container
-        const container = document.querySelector('.dashboard') || document.body;
-        container.appendChild(personElement);
-
-        // Animate in with staggered timing
-        const delay = Math.random() * 500 + 300; // 300-800ms delay
-        setTimeout(() => {
-
-          personElement.style.transform = 'scale(1)';
-          personElement.style.opacity = '1';
-        }, delay);
-
-        return personElement;
-      }
-
-      // Load actual avatar image for person node
-      async loadPersonAvatar(person, personElement, fallbackLetter) {
-        try {
-
-          // FIXED: Use avatarUrl directly from extension (already reconstructed)
-          if (person.avatarUrl) {
-            // Create image element
-            const img = document.createElement('img');
-            img.src = person.avatarUrl;
-            img.alt = `${person.name} avatar`;
-            img.style.cssText = `
-              width: 100%;
-              height: 100%;
-              object-fit: cover;
-              border-radius: 50%;
-            `;
-
-            img.onload = () => {
-              // Replace letter with image once loaded
-              personElement.innerHTML = '';
-              personElement.appendChild(img);
-
-            };
-
-            img.onerror = () => {
-              console.error('📷 CONSTELLATION: Failed to display avatar for:', person.name);
-              // Keep the letter fallback
-            };
-          } else {
-            console.warn('📷 CONSTELLATION: No avatar URL for:', person.name);
-          }
-        } catch (error) {
-          console.error('📷 CONSTELLATION: Error loading avatar for:', person.name, error);
-          // Keep the letter fallback
-        }
-      }
-
-      // Open revolutionary migration page
-      openMigrationPage() {
-
-        window.location.href = 'pages/vault-migration.html';
-      }
-
-      // Open person summary modal with connected memories
-      // 🔄 UNIFIED: Use people-emma.html style person modal for consistency
-      async openUnifiedPersonModal(person) {
-        // Remove any existing person modal
-        const existingModal = document.getElementById('person-detail-modal');
-        if (existingModal) {
-          existingModal.remove();
-        }
-
-        // 🔍 SHERLOCK DEBUG: Get connected memories with detailed logging
-        let connectedMemories = [];
-        try {
-          console.log('🔍 CONSTELLATION DEBUG: Starting memory connection check for person:', person);
-          console.log('🔍 Vault state:', {
-            hasEmmaWebVault: !!window.emmaWebVault,
-            isOpen: window.emmaWebVault?.isOpen,
-            hasVaultData: !!window.emmaWebVault?.vaultData,
-            hasContent: !!window.emmaWebVault?.vaultData?.content,
-            hasMemories: !!window.emmaWebVault?.vaultData?.content?.memories
-          });
-
-          // Use same logic as people-emma.html: check vault is open
-          if (!window.emmaWebVault || !window.emmaWebVault.isOpen) {
-            console.warn('⚠️ CONSTELLATION: Vault not open, cannot load memories');
-            return;
-          }
-
-          const vaultData = window.emmaWebVault.vaultData;
-          if (!vaultData || !vaultData.content || !vaultData.content.memories) {
-            console.warn('⚠️ CONSTELLATION: No memories found in vault data structure');
-            return;
-          }
-
-          const vaultMemories = vaultData.content.memories;
-          console.log('🔍 Total memories in vault:', Object.keys(vaultMemories).length);
-          
-          for (const [memoryId, memory] of Object.entries(vaultMemories)) {
-            console.log(`🔍 Checking memory ${memoryId}:`, {
-              hasMetadata: !!memory.metadata,
-              hasPeople: !!memory.metadata?.people,
-              peopleArray: memory.metadata?.people,
-              searchingForPersonId: person.id
-            });
-
-            // Check if person is in memory's people metadata
-            if (memory.metadata && memory.metadata.people && 
-                Array.isArray(memory.metadata.people) && 
-                memory.metadata.people.includes(person.id)) {
-              console.log('✅ Found person in memory metadata:', memoryId);
-              connectedMemories.push({ ...memory, id: memoryId });
-            }
-            
-            // Also check if person's name is mentioned in content
-            if (person.name && memory.content) {
-              const personName = person.name.toLowerCase();
-              const memoryContent = memory.content.toLowerCase();
-              if (memoryContent.includes(personName)) {
-                console.log('✅ Found person name in memory content:', memoryId);
-                // Avoid duplicates
-                if (!connectedMemories.find(m => m.id === memoryId)) {
-                  connectedMemories.push({ ...memory, id: memoryId });
-                }
-              }
-            }
-          }
-
-          console.log(`🔗 CONSTELLATION FINAL: Found ${connectedMemories.length} memories for person ${person.id}:`, connectedMemories);
-        } catch (error) {
-          console.error('❌ CONSTELLATION: Error loading memories:', error);
-        }
-
-        // Create the people-emma.html style person modal
-        const modalHTML = `
-          <div class="modal-overlay active" id="person-detail-modal" style="
-            position: fixed !important;
-            top: 0 !important;
-            left: 0 !important;
-            width: 100% !important;
-            height: 100% !important;
-            background: rgba(0, 0, 0, 0.8) !important;
-            backdrop-filter: blur(10px) !important;
-            z-index: 10000 !important;
-            display: flex !important;
-            align-items: center !important;
-            justify-content: center !important;
-            opacity: 1 !important;
-            visibility: visible !important;
-          ">
-            <div class="modal person-detail-modal" style="
-              background: linear-gradient(135deg, #2d1b69, #1e1b4b);
-              border-radius: 20px;
-              padding: 0;
-              width: 90%;
-              max-width: 500px;
-              color: white;
-              box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
-              border: 1px solid rgba(255, 255, 255, 0.1);
-              overflow: hidden;
-              position: relative;
-            ">
-              <button class="modal-close" onclick="document.getElementById('person-detail-modal').remove()" style="
-                position: absolute;
-                top: 20px;
-                right: 20px;
-                background: rgba(255, 255, 255, 0.1);
-                border: none;
-                color: white;
-                width: 35px;
-                height: 35px;
-                border-radius: 50%;
-                cursor: pointer;
-                font-size: 18px;
-                z-index: 1;
-              ">×</button>
-
-              <div class="person-detail-header" style="
-                display: flex;
-                align-items: center;
-                padding: 30px;
-                background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(124, 58, 237, 0.3));
-                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-              ">
-                <div class="person-detail-avatar" id="person-detail-avatar" style="
-                  width: 80px;
-                  height: 80px;
-                  border-radius: 50%;
-                  background: linear-gradient(135deg, #8b5cf6, #ec4899);
-                  display: flex;
-                  align-items: center;
-                  justify-content: center;
-                  font-size: 32px;
-                  font-weight: 700;
-                  color: white;
-                  margin-right: 20px;
-                  border: 3px solid rgba(255, 255, 255, 0.2);
-                  overflow: hidden;
-                ">
-                  ${person.name.charAt(0).toUpperCase()}
-                </div>
-                <div class="person-detail-info">
-                  <h2 class="person-detail-name" style="
-                    margin: 0 0 5px 0;
-                    font-size: 28px;
-                    font-weight: 600;
-                  ">${person.name}</h2>
-                  <p class="person-detail-relation" style="
-                    margin: 0;
-                    font-size: 16px;
-                    color: rgba(255, 255, 255, 0.8);
-                    text-transform: capitalize;
-                  ">${person.relation || 'Family'}</p>
-                </div>
-              </div>
-
-              <div class="person-detail-content" style="padding: 30px;">
-                <div class="detail-section" style="margin-bottom: 25px;">
-                  <h3 class="section-title" style="
-                    margin: 0 0 15px 0;
-                    font-size: 18px;
-                    font-weight: 600;
-                    color: #8b5cf6;
-                    display: flex;
-                    align-items: center;
-                  ">
-                    <span style="margin-right: 8px;">📞</span>
-                    Contact Information
-                  </h3>
-                  <div class="detail-item" style="
-                    display: flex;
-                    justify-content: space-between;
-                    align-items: center;
-                    padding: 10px 0;
-                    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-                  ">
-                    <span class="detail-label" style="color: rgba(255, 255, 255, 0.7);">Contact:</span>
-                    <span class="detail-value">${person.contact || 'No contact information'}</span>
-                  </div>
-                  <div style="text-align: right; margin-top: 10px;">
-                    <span style="color: rgba(139, 92, 246, 0.8); font-size: 14px;">${connectedMemories.length} shared memor${connectedMemories.length === 1 ? 'y' : 'ies'}</span>
-                  </div>
-                </div>
-
-                <div class="detail-section">
-                  <h3 class="section-title" style="
-                    margin: 0 0 15px 0;
-                    font-size: 18px;
-                    font-weight: 600;
-                    color: #8b5cf6;
-                    display: flex;
-                    align-items: center;
-                  ">
-                    <span style="margin-right: 8px;">🧠</span>
-                    Memory Connection
-                  </h3>
-                  <div class="detail-item" style="
-                    display: flex;
-                    justify-content: space-between;
-                    align-items: center;
-                    padding: 10px 0;
-                    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-                  ">
-                    <span class="detail-label" style="color: rgba(255, 255, 255, 0.7);">Added:</span>
-                    <span class="detail-value">Recently</span>
-                  </div>
-                  <div class="detail-item" style="
-                    display: flex;
-                    justify-content: space-between;
-                    align-items: center;
-                    padding: 10px 0;
-                  ">
-                    <span class="detail-label" style="color: rgba(255, 255, 255, 0.7);">Memories:</span>
-                    <span class="detail-value">${connectedMemories.length} shared memor${connectedMemories.length === 1 ? 'y' : 'ies'}</span>
-                  </div>
-                </div>
-
-                ${connectedMemories.length > 0 ? this.getPersonMemoriesHTML(connectedMemories) : ''}
-              </div>
-
-              <div class="person-detail-actions" style="
-                display: flex;
-                gap: 15px;
-                padding: 20px 30px 30px 30px;
-                border-top: 1px solid rgba(255, 255, 255, 0.1);
-              ">
-                <button class="btn btn-secondary" onclick="window.location.href='pages/people-emma.html'" style="
-                  flex: 1;
-                  background: rgba(255, 255, 255, 0.1);
-                  border: 1px solid rgba(255, 255, 255, 0.2);
-                  color: white;
-                  padding: 12px 20px;
-                  border-radius: 10px;
-                  cursor: pointer;
-                  font-weight: 600;
-                  display: flex;
-                  align-items: center;
-                  justify-content: center;
-                  gap: 8px;
-                ">
-                  <span>✏️</span>
-                  Edit Person
-                </button>
-                <button class="btn btn-primary" onclick="window.memoryConstellation.createMemoryWithPersonFromConstellation('${person.id}')" style="
-                  flex: 1;
-                  background: linear-gradient(135deg, #8b5cf6, #ec4899);
-                  border: none;
-                  color: white;
-                  padding: 12px 20px;
-                  border-radius: 10px;
-                  cursor: pointer;
-                  font-weight: 600;
-                  display: flex;
-                  align-items: center;
-                  justify-content: center;
-                  gap: 8px;
-                  box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
-                ">
-                  <span>✨</span>
-                  Create Memory
-                </button>
-              </div>
-            </div>
-          </div>
-        `;
-
-        // Add modal to body
-        document.body.insertAdjacentHTML('beforeend', modalHTML);
-
-        // Make constellation functions globally accessible
-        window.memoryConstellation = this;
-
-        // Load avatar if available
-        if (person.avatarUrl || person.avatarId) {
-          this.loadUnifiedPersonAvatar(person);
-        }
-
-        // Close modal when clicking outside
-        document.getElementById('person-detail-modal').addEventListener('click', (e) => {
-          if (e.target.id === 'person-detail-modal') {
-            e.target.remove();
-          }
-        });
-      }
-
-      // Load avatar for unified person modal
-      async loadUnifiedPersonAvatar(person) {
-        try {
-          let avatarUrl = null;
-          
-          if (person.avatarId && window.emmaWebVault) {
-            const media = await window.emmaWebVault.getMedia(person.avatarId);
-            if (media && media.data) {
-              avatarUrl = media.data.startsWith('data:') ? media.data : `data:${media.type};base64,${media.data}`;
-            }
-          } else if (person.avatarUrl) {
-            avatarUrl = person.avatarUrl;
-          }
-
-          if (avatarUrl) {
-            const avatarElement = document.getElementById('person-detail-avatar');
-            if (avatarElement) {
-              avatarElement.style.backgroundImage = `url(${avatarUrl})`;
-              avatarElement.style.backgroundSize = 'cover';
-              avatarElement.style.backgroundPosition = 'center';
-              avatarElement.textContent = ''; // Remove letter
-            }
-          }
-        } catch (error) {
-          console.error('❌ Error loading avatar for unified person modal:', error);
-        }
-      }
-
-      // Get person memories HTML section
-      getPersonMemoriesHTML(connectedMemories) {
-        return `
-          <div style="margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.1);">
-            ${connectedMemories.map(memory => {
-              const memoryTitle = memory.metadata?.title || memory.title || memory.subject || 'Untitled Memory';
-              const memoryDate = memory.created || memory.date || memory.timestamp;
-              
-              return `
-                <div style="
-                  background: rgba(139, 92, 246, 0.1);
-                  border-radius: 10px;
-                  padding: 15px;
-                  border: 1px solid rgba(139, 92, 246, 0.2);
-                  cursor: pointer;
-                  transition: all 0.2s ease;
-                  margin-bottom: 10px;
-                " onmouseover="this.style.background='rgba(139, 92, 246, 0.15)'" onmouseout="this.style.background='rgba(139, 92, 246, 0.1)'" onclick="window.memoryConstellation.openMemoryFromPerson('${memory.id}')">
-                  <div style="display: flex; align-items: center; gap: 12px;">
-                    <div style="
-                      width: 40px;
-                      height: 40px;
-                      background: linear-gradient(135deg, #8b5cf6, #ec4899);
-                      border-radius: 8px;
-                      display: flex;
-                      align-items: center;
-                      justify-content: center;
-                      font-size: 18px;
-                    ">🌟</div>
-                    <div style="flex: 1;">
-                      <div style="font-weight: 600; margin-bottom: 4px;">${memoryTitle}</div>
-                      <div style="font-size: 14px; color: rgba(255, 255, 255, 0.6);">📅 ${memoryDate ? new Date(memoryDate).toLocaleDateString() : 'Recent'}</div>
-                    </div>
-                    <div style="color: rgba(139, 92, 246, 0.8);">→</div>
-                  </div>
-                </div>
-              `;
-            }).join('')}
-          </div>
-        `;
-      }
-
-      async loadAvatarForSummary(person) {
-        try {
-
-          // FIXED: Use avatarUrl directly (same as constellation nodes and people page)
-          if (person.avatarUrl) {
-            const avatarElement = document.getElementById('person-summary-avatar');
-            if (avatarElement) {
-
-              avatarElement.innerHTML = `<img src="${person.avatarUrl}" alt="${person.name}" style="
-                width: 100%;
-                height: 100%;
-                object-fit: cover;
-                border-radius: 50%;
-              ">`;
-
-            } else {
-              console.error('📷 SUMMARY: Avatar element not found in DOM');
-            }
-          } else {
-            console.warn('📷 SUMMARY: No avatarUrl available for:', person.name);
-          }
-        } catch (error) {
-          console.error('📷 SUMMARY: Error loading avatar for:', person.name, error);
-        }
-      }
-
-      closePersonSummaryModal() {
-        const overlay = document.getElementById('person-summary-overlay');
-        if (overlay) {
-          overlay.classList.remove('active');
-          setTimeout(() => overlay.remove(), 300);
-        }
-      }
-
-      createMemoryWithPersonFromConstellation(personId) {
-        this.closePersonSummaryModal();
-        window.location.href = `dashboard-new.html?createMemory=true&person=${personId}`;
-      }
-
-      async openMemoryFromPerson(memoryId) {
-
-        this.closePersonSummaryModal();
-
-        // Find the memory in our loaded memories
-        try {
-          let allMemories = [];
-          if (window.emmaWebVault && window.emmaWebVault.extensionAvailable) {
-            allMemories = await window.emmaWebVault.listMemories(1000);
-          }
-
-          const memory = allMemories.find(m => m.id === memoryId);
-          if (memory) {
-            this.openMemoryDialog(memory);
-          } else {
-            console.error('💝 Memory not found:', memoryId);
-            this.showToast('❌ Memory not found', 'error');
-          }
-        } catch (error) {
-          console.error('💝 Error opening memory from person:', error);
-          this.showToast('❌ Error opening memory', 'error');
-        }
-      }
-
-      // Get relation-specific colors for people nodes
-      getRelationColor(relation) {
-        const colors = {
-          family: {
-            gradient: 'linear-gradient(135deg, #ef4444, #f87171)',
-            border: 'rgba(239, 68, 68, 0.6)',
-            glow: 'rgba(239, 68, 68, 0.8)'
-          },
-          friend: {
-            gradient: 'linear-gradient(135deg, #3b82f6, #60a5fa)',
-            border: 'rgba(59, 130, 246, 0.6)',
-            glow: 'rgba(59, 130, 246, 0.8)'
-          },
-          colleague: {
-            gradient: 'linear-gradient(135deg, #10b981, #34d399)',
-            border: 'rgba(16, 185, 129, 0.6)',
-            glow: 'rgba(16, 185, 129, 0.8)'
-          },
-          romantic: {
-            gradient: 'linear-gradient(135deg, #ec4899, #f472b6)',
-            border: 'rgba(236, 72, 153, 0.6)',
-            glow: 'rgba(236, 72, 153, 0.8)'
-          }
-        };
-
-        return colors[relation] || colors.friend; // Default to friend colors
-      }
-
-      // Create intelligent connections between memory nodes and people nodes
-      createMemoryPeopleConnections(memories, people) {
-
-        const memoryNodes = this.nodes.filter(node => node.type === 'memory');
-        const peopleNodes = this.nodes.filter(node => node.type === 'person');
-
-        // For each memory, connect to people who were involved
-        memoryNodes.forEach(memoryNode => {
-          const memory = memoryNode.memory;
-
-          // Check if memory has people data (from wizard selections, manual input, OR new metadata.people format)
-          let peopleToConnect = [];
-          
-          // NEW FORMAT: Check metadata.people first (preferred)
-          if (memory.metadata && memory.metadata.people && Array.isArray(memory.metadata.people)) {
-            peopleToConnect = memory.metadata.people;
-            console.log('🔗 CONSTELLATION: Using metadata.people format:', peopleToConnect);
-          }
-          // LEGACY FORMAT: Fallback to selectedPeople for backward compatibility
-          else if (memory.selectedPeople && Array.isArray(memory.selectedPeople)) {
-            peopleToConnect = memory.selectedPeople;
-            console.log('🔗 CONSTELLATION: Using legacy selectedPeople format:', peopleToConnect);
-          }
-          
-          // Create connections for all people
-          peopleToConnect.forEach(personId => {
-            const personNode = peopleNodes.find(pNode => pNode.person.id === personId);
-            if (personNode && !memoryNode.connections.includes(personNode)) {
-              memoryNode.connections.push(personNode);
-              personNode.connections.push(memoryNode);
-              console.log(`🔗 CONSTELLATION: Connected memory "${memory.title}" to person "${personNode.person.name}"`);
-            }
-          });
-
-          // Also check if people are mentioned in memory content/responses
-          const memoryText = (memory.content || '').toLowerCase() + ' ' +
-                            (memory.responses || []).join(' ').toLowerCase();
-
-          peopleNodes.forEach(personNode => {
-            const personName = personNode.person.name.toLowerCase();
-
-            // If person's name is mentioned in the memory text, create connection
-            if (memoryText.includes(personName) && !memoryNode.connections.includes(personNode)) {
-              memoryNode.connections.push(personNode);
-              personNode.connections.push(memoryNode);
-              console.log(`🔗 Auto-connected memory "${memory.title}" to person "${personNode.person.name}" (name mentioned)`);
-            }
-          });
-        });
-
-        // Create some random connections for people who aren't connected to anything
-        peopleNodes.forEach(personNode => {
-          if (personNode.connections.length === 0) {
-            // Connect to the closest memory node
-            let closestMemory = null;
-            let closestDistance = Infinity;
-
-            memoryNodes.forEach(memoryNode => {
-              const dx = personNode.x - memoryNode.x;
-              const dy = personNode.y - memoryNode.y;
-              const distance = Math.sqrt(dx * dx + dy * dy);
-
-              if (distance < closestDistance && memoryNode.connections.length < 3) {
-                closestDistance = distance;
-                closestMemory = memoryNode;
-              }
-            });
-
-            if (closestMemory) {
-              personNode.connections.push(closestMemory);
-              closestMemory.connections.push(personNode);
-
-            }
-          }
-        });
-
-      }      // Update neural network node positions with overlap prevention
-      updateConstellationNodes() {
-        const time = Date.now() * 0.001;
-
-        // Update all memory nodes
-        this.nodes.forEach((node, i) => {
-          // Reset forces
-          let forceX = 0;
-          let forceY = 0;
-
-          // Repulsion from other nodes to prevent overlap
-          this.nodes.forEach((otherNode, j) => {
-            if (i !== j) {
-              const dx = node.x - otherNode.x;
-              const dy = node.y - otherNode.y;
-              const distance = Math.sqrt(dx * dx + dy * dy);
-
-              const minDistance = node.isPrimary || otherNode.isPrimary ? 150 : 120;
-              if (distance < minDistance) {
-                const force = (minDistance - distance) / distance * 0.3;
-                forceX += dx * force;
-                forceY += dy * force;
-              }
-            }
-          });
-
-          // Also repel from central neuron
-          if (this.centralNeuron) {
-            const dx = node.x - this.centralNeuron.x;
-            const dy = node.y - this.centralNeuron.y;
-            const distance = Math.sqrt(dx * dx + dy * dy);
-
-            if (distance < 150) {
-              const force = (150 - distance) / distance * 0.4;
-              forceX += dx * force;
-              forceY += dy * force;
-            }
-          }
-
-          // Gentle attraction to base position
-          const baseAttraction = node.isPrimary ? 0.03 : 0.02;
-          forceX += (node.baseX - node.x) * baseAttraction;
-          forceY += (node.baseY - node.y) * baseAttraction;
-
-          // Subtle floating motion - less for primary nodes
-          const floatAmplitude = node.isPrimary ? 1.5 : 2.5;
-          const floatX = Math.sin(time * 0.15 + i * 0.7) * floatAmplitude;
-          const floatY = Math.cos(time * 0.12 + i * 0.5) * floatAmplitude;
-
-          // Apply forces
-          node.vx = (node.vx + forceX) * 0.92; // Damping
-          node.vy = (node.vy + forceY) * 0.92;
-
-          // Update position
-          node.x += node.vx + floatX * 0.4;
-          node.y += node.vy + floatY * 0.4;
-
-          // Keep within bounds
-          const padding = 80;
-          node.x = Math.max(padding, Math.min(window.innerWidth - padding, node.x));
-          node.y = Math.max(padding, Math.min(window.innerHeight - padding, node.y));
-
-          // Update DOM position
-          if (node.element) {
-            node.element.style.left = node.x + 'px';
-            node.element.style.top = node.y + 'px';
-          }
-        });
-
-        // The central neuron (Emma orb) stays fixed at center
-        if (this.centralNeuron) {
-          this.centralNeuron.x = window.innerWidth / 2;
-          this.centralNeuron.y = window.innerHeight / 2;
-        }
-      }
-
-      // Show elegant constellation burger menu
-      showConstellationUI() {
-        // Initialize constellation filters state
-        this.constellationFilters = {
-          memories: true,
-          people: true,
-          family: true,
-          travel: true,
-          recent: true,
-          special: true
-        };
-
-        // Create elegant burger menu
-        const burgerMenu = document.createElement('div');
-        burgerMenu.className = 'constellation-burger-menu';
-        burgerMenu.innerHTML = `
-          <!-- Burger Button -->
-          <button class="constellation-burger-btn" id="constellationBurger">
-            <div class="burger-lines">
-              <span></span>
-              <span></span>
-              <span></span>
-          </div>
-            <div class="burger-label">Filters</div>
-          </button>
-
-          <!-- Expandable Menu Panel -->
-          <div class="constellation-menu-panel" id="constellationPanel">
-            <div class="panel-header">
-              <h3>🌟 Constellation Filters</h3>
-              <button class="panel-close" onclick="dashboard.exitMemoryConstellation()">✕</button>
-            </div>
-
-            <div class="filter-section">
-              <h4>Node Types</h4>
-              <div class="filter-toggles">
-                <label class="filter-toggle">
-                  <input type="checkbox" id="filter-memories" checked>
-                  <span class="toggle-slider"></span>
-                  <span class="toggle-label">💝 Memories</span>
-                  <span class="toggle-count" id="count-memories">0</span>
-                </label>
-
-                <label class="filter-toggle">
-                  <input type="checkbox" id="filter-people" checked>
-                  <span class="toggle-slider"></span>
-                  <span class="toggle-label">👤 People</span>
-                  <span class="toggle-count" id="count-people">0</span>
-                </label>
-              </div>
-            </div>
-
-            <div class="filter-section">
-              <h4>Memory Themes</h4>
-              <div class="filter-toggles">
-                <label class="filter-toggle">
-                  <input type="checkbox" id="filter-family" checked>
-                  <span class="toggle-slider family"></span>
-                  <span class="toggle-label">👨‍👩‍👧‍👦 Family</span>
-                  <span class="toggle-count" id="count-family">0</span>
-                </label>
-
-                <label class="filter-toggle">
-                  <input type="checkbox" id="filter-travel" checked>
-                  <span class="toggle-slider travel"></span>
-                  <span class="toggle-label">✈️ Travel</span>
-                  <span class="toggle-count" id="count-travel">0</span>
-                </label>
-
-                <label class="filter-toggle">
-                  <input type="checkbox" id="filter-recent" checked>
-                  <span class="toggle-slider recent"></span>
-                  <span class="toggle-label">🕒 Recent</span>
-                  <span class="toggle-count" id="count-recent">0</span>
-                </label>
-
-                <label class="filter-toggle">
-                  <input type="checkbox" id="filter-special" checked>
-                  <span class="toggle-slider special"></span>
-                  <span class="toggle-label">⭐ Special</span>
-                  <span class="toggle-count" id="count-special">0</span>
-                </label>
-              </div>
-            </div>
-
-            <div class="filter-actions">
-              <button class="filter-btn secondary" id="reset-filters-btn">
-                Reset All
-              </button>
-              <button class="filter-btn primary" id="apply-filters-btn">
-                Apply Filters
-              </button>
-            </div>
-          </div>
-        `;
-
-        // Add elegant styles
-        const styles = document.createElement('style');
-        styles.textContent = `
-          .constellation-burger-menu {
-          position: fixed;
-          top: 20px;
-          left: 20px;
-            z-index: 2000;
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-          }
-
-          .constellation-burger-btn {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            gap: 4px;
-            background: rgba(17, 17, 27, 0.95);
-            border: 1px solid rgba(134, 88, 255, 0.4);
-            border-radius: 12px;
-            padding: 12px;
-            cursor: pointer;
-            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-            backdrop-filter: blur(15px);
-            box-shadow: 0 8px 32px rgba(134, 88, 255, 0.15);
-          }
-
-          .constellation-burger-btn:hover {
-            background: rgba(134, 88, 255, 0.1);
-            border-color: rgba(134, 88, 255, 0.6);
-            transform: translateY(-2px);
-            box-shadow: 0 12px 40px rgba(134, 88, 255, 0.25);
-          }
-
-          .burger-lines {
-            display: flex;
-            flex-direction: column;
-            gap: 3px;
-          }
-
-          .burger-lines span {
-            width: 18px;
-            height: 2px;
-            background: rgba(134, 88, 255, 0.8);
-            border-radius: 1px;
-            transition: all 0.3s ease;
-          }
-
-          .constellation-burger-btn:hover .burger-lines span {
-            background: rgba(134, 88, 255, 1);
-          }
-
-          .burger-label {
-            font-size: 10px;
-            color: rgba(255, 255, 255, 0.7);
-            font-weight: 500;
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-          }
-
-          .constellation-menu-panel {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 320px;
-            background: rgba(17, 17, 27, 0.98);
-          border: 1px solid rgba(134, 88, 255, 0.3);
-            border-radius: 16px;
-            backdrop-filter: blur(20px);
-            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
-            transform: translateX(-100%) scale(0.95);
-            opacity: 0;
-            visibility: hidden;
-            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-            overflow: hidden;
-          }
-
-          .constellation-menu-panel.active {
-            transform: translateX(0) scale(1);
-            opacity: 1;
-            visibility: visible;
-          }
-
-          .panel-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 20px 24px 16px;
-            border-bottom: 1px solid rgba(134, 88, 255, 0.2);
-          }
-
-          .panel-header h3 {
-            margin: 0;
-            font-size: 16px;
-            font-weight: 600;
-            color: white;
-          }
-
-          .panel-close {
-            background: none;
-            border: none;
-            color: rgba(255, 255, 255, 0.6);
-            font-size: 18px;
-            cursor: pointer;
-            padding: 4px;
-            border-radius: 6px;
-            transition: all 0.2s ease;
-          }
-
-          .panel-close:hover {
-            background: rgba(255, 255, 255, 0.1);
-            color: white;
-          }
-
-          .filter-section {
-            padding: 20px 24px;
-            border-bottom: 1px solid rgba(134, 88, 255, 0.1);
-          }
-
-          .filter-section:last-of-type {
-            border-bottom: none;
-          }
-
-          .filter-section h4 {
-            margin: 0 0 16px 0;
-            font-size: 14px;
-            font-weight: 600;
-            color: rgba(255, 255, 255, 0.8);
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-          }
-
-          .filter-toggles {
-            display: flex;
-            flex-direction: column;
-            gap: 12px;
-          }
-
-          .filter-toggle {
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            cursor: pointer;
-            padding: 8px 0;
-            transition: all 0.2s ease;
-          }
-
-          .filter-toggle:hover {
-            background: rgba(134, 88, 255, 0.05);
-            border-radius: 8px;
-            padding: 8px 8px;
-            margin: 0 -8px;
-          }
-
-          .filter-toggle input[type="checkbox"] {
-            display: none;
-          }
-
-          .toggle-slider {
-            position: relative;
-            width: 40px;
-            height: 20px;
-            background: rgba(255, 255, 255, 0.2);
-            border-radius: 10px;
-            transition: all 0.3s ease;
-            flex-shrink: 0;
-          }
-
-          .toggle-slider:before {
-            content: '';
-            position: absolute;
-            top: 2px;
-            left: 2px;
-            width: 16px;
-            height: 16px;
-            background: white;
-            border-radius: 50%;
-            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-          }
-
-          .filter-toggle input:checked + .toggle-slider {
-            background: rgba(134, 88, 255, 0.8);
-          }
-
-          .filter-toggle input:checked + .toggle-slider:before {
-            transform: translateX(20px);
-            background: white;
-          }
-
-          /* Theme-specific toggle colors */
-          .toggle-slider.family:before { background: rgba(255, 105, 135, 0.1); }
-          .filter-toggle input:checked + .toggle-slider.family { background: rgba(255, 105, 135, 0.8); }
-
-          .toggle-slider.travel:before { background: rgba(52, 211, 153, 0.1); }
-          .filter-toggle input:checked + .toggle-slider.travel { background: rgba(52, 211, 153, 0.8); }
-
-          .toggle-slider.recent:before { background: rgba(96, 165, 250, 0.1); }
-          .filter-toggle input:checked + .toggle-slider.recent { background: rgba(96, 165, 250, 0.8); }
-
-          .toggle-slider.special:before { background: rgba(251, 191, 36, 0.1); }
-          .filter-toggle input:checked + .toggle-slider.special { background: rgba(251, 191, 36, 0.8); }
-
-          .toggle-label {
-            flex: 1;
-            color: rgba(255, 255, 255, 0.9);
-            font-size: 14px;
-            font-weight: 500;
-          }
-
-          .toggle-count {
-            background: rgba(134, 88, 255, 0.2);
-            color: rgba(134, 88, 255, 1);
-            padding: 2px 8px;
-          border-radius: 12px;
-            font-size: 12px;
-            font-weight: 600;
-            min-width: 20px;
-            text-align: center;
-          }
-
-          .filter-actions {
-            padding: 20px 24px;
-            display: flex;
-            gap: 12px;
-          }
-
-          .filter-btn {
-            flex: 1;
-            padding: 12px 16px;
-            border: none;
-            border-radius: 8px;
-            font-size: 14px;
-            font-weight: 600;
-            cursor: pointer;
-            transition: all 0.2s ease;
-          }
-
-          .filter-btn.secondary {
-            background: rgba(255, 255, 255, 0.1);
-            color: rgba(255, 255, 255, 0.8);
-          }
-
-          .filter-btn.secondary:hover {
-            background: rgba(255, 255, 255, 0.15);
-            color: white;
-          }
-
-          .filter-btn.primary {
-            background: rgba(134, 88, 255, 0.8);
-            color: white;
-          }
-
-          .filter-btn.primary:hover {
-            background: rgba(134, 88, 255, 1);
-            transform: translateY(-1px);
-          }
-        `;
-
-        document.head.appendChild(styles);
-        document.body.appendChild(burgerMenu);
-
-        // Set up burger menu interactions
-        this.setupConstellationMenu();
-
-        // Update counts
-        this.updateConstellationCounts();
-
-        this.constellationUI = burgerMenu;
-      }
-
-      // Set up constellation menu interactions
-      setupConstellationMenu() {
-        const burgerBtn = document.getElementById('constellationBurger');
-        const panel = document.getElementById('constellationPanel');
-
-        // Toggle menu on burger click
-        burgerBtn.addEventListener('click', () => {
-          panel.classList.toggle('active');
-        });
-
-        // Close menu when clicking outside
-        document.addEventListener('click', (e) => {
-          if (!burgerBtn.contains(e.target) && !panel.contains(e.target)) {
-            panel.classList.remove('active');
-          }
-        });
-
-        // Set up filter toggle event listeners
-        const filterInputs = panel.querySelectorAll('input[type="checkbox"]');
-        filterInputs.forEach(input => {
-          input.addEventListener('change', (e) => {
-            const filterType = e.target.id.replace('filter-', '');
-            this.toggleConstellationFilter(filterType, e.target.checked);
-          });
-        });
-
-        // Set up action button event listeners
-        document.getElementById('reset-filters-btn').addEventListener('click', () => {
-          this.resetConstellationFilters();
-        });
-
-        document.getElementById('apply-filters-btn').addEventListener('click', () => {
-          this.hideConstellationMenu();
-        });
-      }
-
-      // Toggle constellation filter and update display
-      toggleConstellationFilter(filterType, enabled) {
-        this.constellationFilters[filterType] = enabled;
-
-        // Apply filters with smooth animation
-        this.applyConstellationFilters();
-      }
-
-      // Apply constellation filters with smooth animations
-      applyConstellationFilters() {
-        const nodes = document.querySelectorAll('.memory-node, .person-node');
-
-        nodes.forEach(node => {
-          const nodeType = node.classList.contains('memory-node') ? 'memory' : 'person';
-          const theme = node.dataset.theme || 'recent';
-
-          let shouldShow = false;
-
-          // Check if node type is enabled
-          if (nodeType === 'memory' && this.constellationFilters.memories) {
-            // Check if memory theme is enabled
-            shouldShow = this.constellationFilters[theme];
-          } else if (nodeType === 'person' && this.constellationFilters.people) {
-            shouldShow = true;
-          }
-
-          // Smooth animation for show/hide
-          if (shouldShow && node.style.display === 'none') {
-            // Show with fade in
-            node.style.display = 'block';
-            node.style.opacity = '0';
-            node.style.transform = 'scale(0.8)';
-
-            requestAnimationFrame(() => {
-              node.style.transition = 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)';
-              node.style.opacity = '1';
-              node.style.transform = 'scale(1)';
-            });
-          } else if (!shouldShow && node.style.display !== 'none') {
-            // Hide with fade out
-            node.style.transition = 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)';
-            node.style.opacity = '0';
-            node.style.transform = 'scale(0.8)';
-
-            setTimeout(() => {
-              node.style.display = 'none';
-            }, 300);
-          }
-        });
-
-        // Neural connections now update automatically in animation loop based on node visibility
-      }
-
-      // Neural connections now handled automatically in main animation loop
-
-      // Update constellation counts in the menu
-      updateConstellationCounts() {
-        // Count memories by theme
-        const themeCounts = {
-          family: 0,
-          travel: 0,
-          recent: 0,
-          special: 0
-        };
-
-        Object.keys(this.constellationMemories || {}).forEach(theme => {
-          themeCounts[theme] = (this.constellationMemories[theme] || []).length;
-        });
-
-        // Count people
-        const peopleCount = this.constellationPeople ? this.constellationPeople.length : 0;
-        const totalMemories = Object.values(themeCounts).reduce((sum, count) => sum + count, 0);
-
-        // Update count displays
-        const updateCount = (id, count) => {
-          const element = document.getElementById(id);
-          if (element) element.textContent = count;
-        };
-
-        updateCount('count-memories', totalMemories);
-        updateCount('count-people', peopleCount);
-        updateCount('count-family', themeCounts.family);
-        updateCount('count-travel', themeCounts.travel);
-        updateCount('count-recent', themeCounts.recent);
-        updateCount('count-special', themeCounts.special);
-      }
-
-      // Reset all constellation filters
-      resetConstellationFilters() {
-        // Reset all filters to true
-        this.constellationFilters = {
-          memories: true,
-          people: true,
-          family: true,
-          travel: true,
-          recent: true,
-          special: true
-        };
-
-        // Update checkboxes
-        const checkboxes = document.querySelectorAll('#constellationPanel input[type="checkbox"]');
-        checkboxes.forEach(checkbox => {
-          checkbox.checked = true;
-        });
-
-        // Apply filters
-        this.applyConstellationFilters();
-
-      }
-
-      // Hide constellation menu
-      hideConstellationMenu() {
-        const panel = document.getElementById('constellationPanel');
-        if (panel) {
-          panel.classList.remove('active');
-        }
-      }
-
-      // Removed fadeOutMemoryNodes and fadeInMemoryNodes - no longer needed since constellation mode exits to main dashboard
-
-      // Completely clear all memory nodes from DOM (prevents duplicates)
-      clearAllMemoryNodesFromDOM() {
-
-        // Remove all memory-node, person-node, and create-memory-node elements (including orphaned ones)
-        const existingMemoryNodes = document.querySelectorAll('.memory-node, .create-memory-node, .person-node');
-        existingMemoryNodes.forEach(node => {
-
-          node.remove();
-        });
-
-        // Clear ONLY memory nodes from the nodes array (preserve radial menu items)
-        if (this.nodes) {
-          this.nodes.forEach(node => {
-            if (node.element && node.element.parentNode) {
-              // Only remove if it's a constellation node, NOT a radial menu item
-              if (node.element.classList.contains('memory-node') ||
-                  node.element.classList.contains('create-memory-node') ||
-                  node.element.classList.contains('person-node')) {
-
-                node.element.remove();
-              } else {
-
-              }
-            }
-          });
-          // Filter out only the constellation nodes, keep radial items
-          this.nodes = this.nodes.filter(node =>
-            !node.element.classList.contains('memory-node') &&
-            !node.element.classList.contains('create-memory-node') &&
-            !node.element.classList.contains('person-node')
-          );
-        }
-
-        // Reset central node
-        this.centralNode = null;
-
-      }
-
-      // Exit constellation mode
-      exitMemoryConstellation() {
-
-        this.isConstellationMode = false;
-
-        // PERSISTENCE: Clear constellation state
-        localStorage.removeItem('emmaConstellationActive');
-
-        // Stop neural animation (EXACT same as main menu)
-        this.isMenuOpen = false;
-        if (this.neuralAnimationId) {
-          cancelAnimationFrame(this.neuralAnimationId);
-          this.neuralCtx.clearRect(0, 0, this.neuralCanvas.width, this.neuralCanvas.height);
-        }
-
-        // Remove constellation-active class to restore UI
-        document.body.classList.remove('constellation-active');
-        document.body.classList.remove('menu-active');
-        this.radialMenu.classList.remove('active');
-
-        // Restore central orb size
-        this.restoreCentralOrb();
-
-        // Remove constellation UI
-        if (this.constellationUI) {
-          this.constellationUI.remove();
-          this.constellationUI = null;
-        }
-
-        // CRITICAL: Use thorough DOM cleanup to prevent duplicates
-        this.clearAllMemoryNodesFromDOM();
-
-        // Clear animation
-        if (this.neuralAnimationId) {
-          cancelAnimationFrame(this.neuralAnimationId);
-          this.neuralCtx.clearRect(0, 0, this.neuralCanvas.width, this.neuralCanvas.height);
-        }
-
-        // Reset nodes
-        this.nodes = [];
-
-        // Hide radial menu
-        this.radialMenu.classList.remove('active');
-        this.isMenuOpen = false;
-
-        // Reset radial menu items to default state
-        const radialItems = this.radialMenu.querySelectorAll('.radial-item');
-
-        radialItems.forEach((item, i) => {
-
-          item.style.opacity = '0';
-          item.style.transform = 'scale(0)';
-          // CRITICAL: Reset positioning to default
-          item.style.left = '';
-          item.style.top = '';
-          item.style.animationPlayState = 'running';
-        });
-      }
-
-      // Sanitize title to remove base64 or corrupted data
-      sanitizeTitle(title) {
-        if (!title || typeof title !== 'string') return 'Untitled Memory';
-
-        // Check if it looks like base64 or corrupted data
-        if (title.length > 50 || /^[A-Za-z0-9+\/=]{20,}$/.test(title)) {
-          return 'Memory Capsule';
-        }
-
-        // Remove any non-printable characters and limit length
-        const cleaned = title.replace(/[^\x20-\x7E]/g, '').trim();
-        return cleaned.length > 0 ? cleaned.substring(0, 50) : 'Untitled Memory';
-      }
-
-      // Open elegant memory dialog with media slideshow
-      openMemoryDialog(memory) {
-
-        // Create memory dialog modal
-        const memoryDialog = document.createElement('div');
-        memoryDialog.className = 'memory-dialog-overlay';
-
-        // FIXED: Better date handling for extension data
-        const memoryDate = memory.created || memory.date || memory.timestamp;
-        const formattedDate = memoryDate ? new Date(memoryDate).toLocaleDateString('en-US', {
-          weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'
-        }) : 'Unknown date';
-
-        // FIXED: Better title extraction
-        const memoryTitle = memory.metadata?.title || memory.title || memory.subject || memory.summary || 'Untitled Memory';
-
-        // FIXED: Better content extraction
-        const memoryContent = memory.content || memory.description || memory.details || 'This precious memory is stored in your vault...';
-
-        // FIXED: Handle attachments from extension
-        const mediaItems = memory.attachments || memory.mediaItems || [];
-
-        // FIXED: Better thumbnail handling
-        const thumbnail = memory.thumbnail ||
-                          (mediaItems.length > 0 && mediaItems[0].url ? mediaItems[0].url : null) ||
-                          this.generateMemoryThumbnail(memory.category || memory.theme || 'special');
-
-        // Style the overlay
-        memoryDialog.style.cssText = `
-          position: fixed;
-          top: 0;
-          left: 0;
-          right: 0;
-          bottom: 0;
-          background: rgba(0, 0, 0, 0.8);
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          z-index: 10000;
-          opacity: 0;
-          transition: opacity 0.3s ease;
-        `;
-
-        memoryDialog.innerHTML = `
-          <div class="memory-dialog" style="
-            background: linear-gradient(135deg, rgba(15, 15, 25, 0.98), rgba(25, 25, 35, 0.98));
-            backdrop-filter: blur(30px);
-            border: 1px solid rgba(134, 88, 255, 0.4);
-            border-radius: 24px;
-            max-width: 600px;
-            width: 85%;
-            max-height: 80vh;
-            overflow: hidden;
-            box-shadow:
-              0 32px 80px rgba(0, 0, 0, 0.6),
-              0 0 0 1px rgba(134, 88, 255, 0.2),
-              inset 0 1px 0 rgba(255, 255, 255, 0.1);
-            transform: scale(0.9);
-            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-            position: relative;
-          ">
-            <!-- Emma Branded Header -->
-            <div class="memory-dialog-header" style="
-              padding: 32px 40px 24px 40px;
-              background: linear-gradient(135deg, rgba(134, 88, 255, 0.15), rgba(240, 147, 251, 0.15));
-              border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-              position: relative;
-              overflow: hidden;
-            ">
-              <!-- Clean Background -->
-              <div style="
-                position: absolute;
-                top: 0;
-                left: 0;
-                right: 0;
-                bottom: 0;
-                background: rgba(134, 88, 255, 0.02);
-                opacity: 0.5;
-              "></div>
-
-              <div style="position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-start;">
-                <!-- Left: Title and Info -->
-                <div style="display: flex; align-items: center; gap: 16px; flex: 1;">
-                  <div style="
-                    width: 48px;
-                    height: 48px;
-                    border-radius: 50%;
-                    background: linear-gradient(135deg, rgba(134, 88, 255, 0.3), rgba(240, 147, 251, 0.3));
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    font-size: 20px;
-                    border: 2px solid rgba(134, 88, 255, 0.5);
-                    box-shadow: 0 8px 32px rgba(134, 88, 255, 0.3);
-                  ">💝</div>
-                  <div>
-                    <h2 style="color: white; margin: 0; font-size: 24px; font-weight: 700; text-shadow: 0 2px 8px rgba(0,0,0,0.5);">
-                      ${this.sanitizeTitle(memoryTitle)}
-                    </h2>
-                    <div style="color: rgba(255, 255, 255, 0.7); font-size: 14px; margin-top: 4px;">
-                      <span style="
-                        background: rgba(134, 88, 255, 0.2);
-                        padding: 4px 12px;
-                        border-radius: 16px;
-                        font-size: 12px;
-                        border: 1px solid rgba(134, 88, 255, 0.3);
-                      ">📅 ${formattedDate}</span>
-                      ${memory.category ? ` <span style="
-                        background: rgba(240, 147, 251, 0.2);
-                        padding: 4px 12px;
-                        border-radius: 16px;
-                        font-size: 12px;
-                        border: 1px solid rgba(240, 147, 251, 0.3);
-                        margin-left: 8px;
-                        text-transform: capitalize;
-                      ">✨ ${memory.category}</span>` : ''}
-                    </div>
-                  </div>
-                </div>
-
-                <!-- Right: Close Button Only -->
-                <button onclick="dashboard.closeMemoryDialog()" style="
-                  position: absolute;
-                  top: 20px;
-                  right: 20px;
-                  background: rgba(255, 255, 255, 0.1);
-                  border: none;
-                  color: rgba(255, 255, 255, 0.7);
-                  width: 36px;
-                  height: 36px;
-                  border-radius: 50%;
-                  cursor: pointer;
-                  font-size: 18px;
-                  transition: all 0.2s ease;
-                  display: flex;
-                  align-items: center;
-                  justify-content: center;
-                  z-index: 1000;
-                " onmouseover="this.style.background='rgba(255, 255, 255, 0.2)'; this.style.color='white'" onmouseout="this.style.background='rgba(255, 255, 255, 0.1)'; this.style.color='rgba(255, 255, 255, 0.7)'">✕</button>
-              </div>
-
-            <!-- Content Area -->
-            <div class="memory-content" style="
-              padding: 32px 40px;
-              overflow-y: auto;
-              max-height: calc(85vh - 140px);
-            ">
-
-              <!-- Single Content Box - Fit to Content -->
-              <div class="memory-description" style="
-                color: rgba(255, 255, 255, 0.95);
-                line-height: 1.6;
-                margin-bottom: 24px;
-                font-size: 15px;
-                background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
-                padding: 20px;
-                border-radius: 12px;
-                border-left: 4px solid rgba(134, 88, 255, 0.6);
-                backdrop-filter: blur(10px);
-                box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
-                display: inline-block;
-                min-width: 100%;
-                box-sizing: border-box;
-              ">
-                ${memoryContent}
-              </div>
-
-              ${(() => {
-                const tags = memory.metadata?.tags || memory.tags || [];
-                return tags && tags.length > 0 ? `
-                  <div class="memory-tags" style="margin-bottom: 32px;">
-                    <div style="
-                      color: rgba(255, 255, 255, 0.7);
-                      font-size: 15px;
-                      margin-bottom: 16px;
-                      font-weight: 600;
-                      display: flex;
-                      align-items: center;
-                      gap: 8px;
-                    ">
-                      <span style="font-size: 18px;">🏷️</span>
-                      Tags
-                    </div>
-                    <div style="display: flex; gap: 12px; flex-wrap: wrap;">
-                      ${tags.map(tag => `
-                        <span style="
-                          background: linear-gradient(135deg, rgba(134, 88, 255, 0.25), rgba(240, 147, 251, 0.25));
-                          color: rgba(255, 255, 255, 0.95);
-                          padding: 8px 16px;
-                          border-radius: 20px;
-                          font-size: 13px;
-                          font-weight: 500;
-                          border: 1px solid rgba(134, 88, 255, 0.4);
-                          backdrop-filter: blur(10px);
-                          box-shadow: 0 4px 16px rgba(134, 88, 255, 0.2);
-                        ">#${tag}</span>
-                      `).join('')}
-                    </div>
-                  </div>
-                ` : '';
-              })()}
-
-              ${mediaItems.length > 0 ? `
-                <div class="memory-media" style="margin-bottom: 24px;">
-                  <div style="
-                    color: rgba(255, 255, 255, 0.7);
-                    font-size: 15px;
-                    margin-bottom: 20px;
-                    font-weight: 600;
-                    display: flex;
-                    align-items: center;
-                    gap: 8px;
-                  ">
-                    <span style="font-size: 18px;">🎬</span>
-                    Media Gallery
-                    <span style="
-                      background: rgba(134, 88, 255, 0.2);
-                      color: rgba(255, 255, 255, 0.8);
-                      padding: 4px 10px;
-                      border-radius: 12px;
-                      font-size: 12px;
-                      font-weight: 500;
-                    ">${mediaItems.length} ${mediaItems.length === 1 ? 'item' : 'items'}</span>
-                  </div>
-
-                  <!-- Emma Branded Media Grid - 2 Columns -->
-                  <div style="
-                    display: grid;
-                    grid-template-columns: 1fr 1fr;
-                    gap: 24px;
-                    padding: 24px;
-                    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
-                    border-radius: 20px;
-                    border: 1px solid rgba(255, 255, 255, 0.1);
-                    backdrop-filter: blur(15px);
-                    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
-                  ">
-                    ${mediaItems.map((item, index) => {
-                      const hasImage = item.dataUrl || item.url;
-                      const imageUrl = item.dataUrl || item.url;
-                      const isImage = (item.type || '').startsWith('image') || hasImage;
-                      const fileName = item.name || `Image ${index + 1}`;
-
-                      return `
-                        <div style="
-                          background: linear-gradient(135deg, rgba(134, 88, 255, 0.12), rgba(240, 147, 251, 0.08));
-                          border: 1px solid rgba(134, 88, 255, 0.25);
-                          border-radius: 20px;
-                          padding: 0;
-                          cursor: pointer;
-                          transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-                          overflow: hidden;
-                          backdrop-filter: blur(20px);
-                          position: relative;
-                          aspect-ratio: 1;
-                          box-shadow: 0 8px 32px rgba(134, 88, 255, 0.15);
-                        "
-                        onmouseover="
-                          this.style.transform='translateY(-6px) scale(1.05)';
-                          this.style.boxShadow='0 24px 64px rgba(134, 88, 255, 0.4), 0 0 0 2px rgba(134, 88, 255, 0.4)';
-                          this.style.borderColor='rgba(134, 88, 255, 0.6)';
-                        "
-                        onmouseout="
-                          this.style.transform='translateY(0) scale(1)';
-                          this.style.boxShadow='0 8px 32px rgba(134, 88, 255, 0.15)';
-                          this.style.borderColor='rgba(134, 88, 255, 0.25)';
-                        "
-                        onclick="window.open('${imageUrl}', '_blank')">
-
-                          ${hasImage ? `
-                            <!-- Image Container -->
-                            <div style="
-                              width: 100%;
-                              height: 100%;
-                              background-image: url('${imageUrl}');
-                              background-size: cover;
-                              background-position: center;
-                              position: relative;
-                              border-radius: 20px;
-                            ">
-                              <!-- Hover Overlay -->
-                              <div style="
-                                position: absolute;
-                                top: 0;
-                                left: 0;
-                                right: 0;
-                                bottom: 0;
-                                background: linear-gradient(135deg, rgba(134, 88, 255, 0.1), rgba(240, 147, 251, 0.1));
-                                opacity: 0;
-                                transition: opacity 0.3s ease;
-                                display: flex;
-                                align-items: center;
-                                justify-content: center;
-                                border-radius: 20px;
-                              " onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='0'">
-                                <div style="
-                                  background: rgba(255, 255, 255, 0.9);
-                                  color: rgba(134, 88, 255, 1);
-                                  padding: 8px 12px;
-                                  border-radius: 12px;
-                                  font-size: 12px;
-                                  font-weight: 600;
-                                  backdrop-filter: blur(10px);
-                                  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
-                                ">🔍 View Full Size</div>
-                              </div>
-
-                            </div>
-                          ` : `
-                            <!-- Non-Image File -->
-                            <div style="
-                              height: 100%;
-                              display: flex;
-                              flex-direction: column;
-                              align-items: center;
-                              justify-content: center;
-                              background: linear-gradient(135deg, rgba(134, 88, 255, 0.15), rgba(240, 147, 251, 0.1));
-                              padding: 24px;
-                              border-radius: 20px;
-                            ">
-                              <div style="
-                                font-size: 48px;
-                                margin-bottom: 16px;
-                                filter: drop-shadow(0 4px 8px rgba(134, 88, 255, 0.3));
-                              ">${isImage ? '🖼️' : '📄'}</div>
-                              <div style="
-                                font-size: 13px;
-                                font-weight: 600;
-                                color: rgba(255, 255, 255, 0.9);
-                                text-align: center;
-                                line-height: 1.4;
-                                margin-bottom: 12px;
-                                overflow: hidden;
-                                text-overflow: ellipsis;
-                                white-space: nowrap;
-                                width: 100%;
-                              ">${fileName}</div>
-                              <div style="
-                                font-size: 11px;
-                                color: rgba(255, 255, 255, 0.6);
-                                background: rgba(0, 0, 0, 0.3);
-                                padding: 6px 12px;
-                                border-radius: 12px;
-                                backdrop-filter: blur(5px);
-                              ">${((item.size || 0) / 1024 / 1024).toFixed(1)} MB</div>
-                            </div>
-                          `}
-                        </div>
-                      `;
-                    }).join('')}
-                  </div>
-                </div>
-              ` : ''}
-
-            </div>
-
-            <!-- People Connected to this Memory -->
-            ${(() => {
-              const people = memory.metadata?.people || memory.people || [];
-              if (!people || people.length === 0) return '';
-
-              // Get people data from vault to resolve IDs to names/avatars
-              const vaultPeople = window.emmaWebVault?.vaultData?.content?.people || {};
-              
-              const connectedPeopleAvatars = people.map((personId, index) => {
-                const person = vaultPeople[personId];
-                if (!person) return '';
-                
-                const initials = (person.name || '?').split(' ').map(n => n[0]).join('').slice(0,2).toUpperCase();
-                const hasAvatar = person.avatarUrl || person.profilePicture;
-                
-                return `
-                  <div style="
-                    cursor: pointer;
-                    transition: all 0.2s ease;
-                    text-align: center;
-                  " 
-                  title="View ${person.name || 'Unknown Person'}'s profile"
-                  onclick="dashboard.openPersonDialog('${personId}')"
-                  onmouseover="this.style.transform='scale(1.05)'"
-                  onmouseout="this.style.transform='scale(1)'">
-                    ${hasAvatar ? `
-                      <img src="${person.avatarUrl || person.profilePicture}" 
-                           alt="${person.name}" 
-                           style="
-                             width: 64px; 
-                             height: 64px; 
-                             border-radius: 50%; 
-                             object-fit: cover;
-                             border: 3px solid rgba(134, 88, 255, 0.4);
-                             background: linear-gradient(135deg, #8658ff, #f093fb);
-                             margin-bottom: 8px;
-                           "
-                           onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';" />
-                      <div style="
-                        width: 64px; 
-                        height: 64px; 
-                        border-radius: 50%; 
-                        background: linear-gradient(135deg, #8658ff, #f093fb);
-                        border: 3px solid rgba(134, 88, 255, 0.4);
-                        display: none;
-                        align-items: center; 
-                        justify-content: center; 
-                        color: white; 
-                        font-size: 24px; 
-                        font-weight: 600;
-                        margin-bottom: 8px;
-                      ">${initials}</div>
-                    ` : `
-                      <div style="
-                        width: 64px; 
-                        height: 64px; 
-                        border-radius: 50%; 
-                        background: linear-gradient(135deg, #8658ff, #f093fb);
-                        border: 3px solid rgba(134, 88, 255, 0.4);
-                        display: flex;
-                        align-items: center; 
-                        justify-content: center; 
-                        color: white; 
-                        font-size: 24px; 
-                        font-weight: 600;
-                        margin-bottom: 8px;
-                      ">${initials}</div>
-                    `}
-                    <div style="
-                      color: white;
-                      font-size: 14px;
-                      font-weight: 600;
-                      max-width: 80px;
-                      overflow: hidden;
-                      text-overflow: ellipsis;
-                      white-space: nowrap;
-                    ">${person.name || 'Unknown'}</div>
-                  </div>
-                `;
-              }).filter(Boolean).join('');
-
-              return `
-                <div style="
-                  padding: 24px 40px;
-                  border-top: 1px solid rgba(255, 255, 255, 0.1);
-                  background: linear-gradient(135deg, rgba(134, 88, 255, 0.05), rgba(240, 147, 251, 0.05));
-                ">
-                  <h3 style="
-                    color: white;
-                    font-size: 16px;
-                    font-weight: 600;
-                    margin: 0 0 16px 0;
-                    display: flex;
-                    align-items: center;
-                    gap: 8px;
-                  ">👥 People in this Memory</h3>
-                  <div style="
-                    display: grid;
-                    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
-                    gap: 16px;
-                    justify-items: center;
-                  ">
-                    ${connectedPeopleAvatars}
-                  </div>
-                </div>
-              `;
-            })()}
-
-            <!-- Emma Branded Actions -->
-            <div class="memory-actions" style="
-              padding: 24px 40px 32px 40px;
-              border-top: 1px solid rgba(255, 255, 255, 0.1);
-              background: linear-gradient(135deg, rgba(134, 88, 255, 0.05), rgba(240, 147, 251, 0.05));
-              display: flex;
-              gap: 16px;
-              justify-content: center;
-            ">
-              <button onclick="dashboard.shareMemory('${memory.id}')" style="
-                padding: 14px 28px;
-                border: 1px solid rgba(134, 88, 255, 0.4);
-                background: linear-gradient(135deg, rgba(134, 88, 255, 0.1), rgba(240, 147, 251, 0.1));
-                color: rgba(255, 255, 255, 0.9);
-                border-radius: 16px;
-                cursor: pointer;
-                font-size: 14px;
-                font-weight: 600;
-                transition: all 0.3s ease;
-                backdrop-filter: blur(10px);
-                display: flex;
-                align-items: center;
-                gap: 8px;
-              " onmouseover="
-                this.style.background='linear-gradient(135deg, rgba(134, 88, 255, 0.2), rgba(240, 147, 251, 0.2))';
-                this.style.transform='translateY(-2px)';
-                this.style.boxShadow='0 8px 32px rgba(134, 88, 255, 0.3)';
-              " onmouseout="
-                this.style.background='linear-gradient(135deg, rgba(134, 88, 255, 0.1), rgba(240, 147, 251, 0.1))';
-                this.style.transform='translateY(0)';
-                this.style.boxShadow='none';
-              ">
-                <span>📤</span>
-                Share Memory
-              </button>
-
-              <button onclick="window.location.href='pages/gallery.html#${memory.id}'" style="
-                padding: 14px 28px;
-                border: none;
-                background: linear-gradient(135deg, rgba(134, 88, 255, 0.8), rgba(240, 147, 251, 0.8));
-                color: white;
-                border-radius: 16px;
-                cursor: pointer;
-                font-size: 14px;
-                font-weight: 700;
-                transition: all 0.3s ease;
-                backdrop-filter: blur(10px);
-                display: flex;
-                align-items: center;
-                gap: 8px;
-                box-shadow: 0 8px 32px rgba(134, 88, 255, 0.4);
-              " onmouseover="
-                this.style.transform='translateY(-3px) scale(1.02)';
-                this.style.boxShadow='0 16px 48px rgba(134, 88, 255, 0.6)';
-              " onmouseout="
-                this.style.transform='translateY(0) scale(1)';
-                this.style.boxShadow='0 8px 32px rgba(134, 88, 255, 0.4)';
-              ">
-                <span>✏️</span>
-                Edit in Gallery
-              </button>
-            </div>
-          </div>
-        `;
-
-        // Style the dialog
-        memoryDialog.style.cssText = `
-          position: fixed;
-          top: 0;
-          left: 0;
-          right: 0;
-          bottom: 0;
-          background: rgba(0, 0, 0, 0.8);
-          backdrop-filter: blur(10px);
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          z-index: 10000;
-          opacity: 0;
-          transition: opacity 0.3s ease;
-        `;
-
-        document.body.appendChild(memoryDialog);
-        this.currentMemoryDialog = memoryDialog;
-
-        // Animate in
-        requestAnimationFrame(() => {
-          memoryDialog.style.opacity = '1';
-          const dialogEl = memoryDialog.querySelector('.memory-dialog');
-          if (dialogEl) {
-            dialogEl.style.transform = 'scale(1)';
-          }
-        });
-
-        // Close on outside click
-        memoryDialog.addEventListener('click', (e) => {
-          if (e.target === memoryDialog) {
-            this.closeMemoryDialog();
-          }
-        });
-      }
-
-      // Close memory dialog
-      closeMemoryDialog() {
-        if (this.currentMemoryDialog) {
-          this.currentMemoryDialog.style.opacity = '0';
-          setTimeout(() => {
-            if (this.currentMemoryDialog) {
-              this.currentMemoryDialog.remove();
-              this.currentMemoryDialog = null;
-            }
-          }, 300);
-        }
-      }
-
-      // Open person dialog from memory by ID - navigate to people page  
-      openPersonDialog(personId) {
-        console.log('🔗 DASHBOARD: Opening person page for ID:', personId);
-        // Navigate to people page with person selected
-        window.location.href = `pages/people-emma.html?person=${personId}`;
-      }
-
-      // Memory dialog slideshow controls
-      prevSlide() {
-
-        // Demo functionality - would implement real slideshow
-      }
-
-      nextSlide() {
-
-        // Demo functionality - would implement real slideshow
-      }
-
-      shareMemory(memoryId) {
-
-        this.showToast('📤 Memory shared!', 'success');
-      }
-
-      editMemory(memoryId) {
-
-        this.showToast('✏️ Opening memory editor...', 'info');
-      }
-
-      // Filter constellation by theme
-      filterByTheme(theme) {
-
-        this.nodes.forEach(node => {
-          if (node.theme === theme) {
-            node.element.style.opacity = '1';
-            node.element.style.transform = 'scale(1)';
-          } else {
-            node.element.style.opacity = '0.3';
-            node.element.style.transform = 'scale(0.8)';
-          }
-        });
-      }
-
-      showToast(message, type = 'info') {
-        const toast = document.createElement('div');
-        toast.className = `toast ${type}`;
-        const span = document.createElement('span');
-        span.textContent = message; // Safe - prevents HTML injection
-        toast.appendChild(span);
-        document.body.appendChild(toast);
-
-        setTimeout(() => toast.classList.add('show'), 10);
-
-        setTimeout(() => {
-          toast.classList.remove('show');
-          setTimeout(() => toast.remove(), 400);
-        }, 3000);
-      }
-    }
-
-    // Initialize dashboard
-    document.addEventListener('DOMContentLoaded', () => {
-      window.emmaDashboard = new EmmaDashboard();
-
-      // Setup vault modal event listeners
-      const dashboard = window.emmaDashboard;
-
-      // Close button
-      document.getElementById('close-vault-modal').addEventListener('click', () => {
-        dashboard.closeVaultModal();
-      });
-
-      // Click outside to close
-      document.getElementById('vault-modal').addEventListener('click', (e) => {
-        if (e.target.id === 'vault-modal') {
-          dashboard.closeVaultModal();
-        }
-      });
-
-      // Unlock form handlers
-      document.getElementById('unlock-btn').addEventListener('click', () => {
-        dashboard.unlockVault();
-      });
-
-      document.getElementById('cancel-unlock-btn').addEventListener('click', () => {
-        dashboard.hideUnlockForm();
-      });
-
-      // Create vault button handler
-      document.getElementById('create-vault-btn').addEventListener('click', async () => {
-
-        try {
-          if (window.emmaAPI && window.emmaAPI.vault) {
-            const st = await window.emmaAPI.vault.status();
-            if (st && st.initialized) {
-
-              dashboard.showUnlockForm();
-              return;
-            }
-          }
-        } catch {}
-        // Load welcome page for vault setup
-        window.location.assign('pages/welcome.html');
-      });
-
-      // Password input enter key
-      document.getElementById('vault-password').addEventListener('keypress', (e) => {
-        if (e.key === 'Enter') {
-          dashboard.unlockVault();
-        }
-      });
-
-      // QR Code handlers
-      document.getElementById('generate-vault-qr-dashboard').addEventListener('click', () => {
-        dashboard.showToast('📱 Vault QR generation coming soon!', 'info');
-      });
-
-      document.getElementById('open-qr-scanner-dashboard').addEventListener('click', () => {
-        dashboard.showToast('📷 QR scanner coming soon!', 'info');
-      });
-
-      // Escape key to close vault modal
-      document.addEventListener('keydown', (e) => {
-        if (e.key === 'Escape') {
-          const modal = document.getElementById('vault-modal');
-          if (modal.classList.contains('show')) {
-            dashboard.closeVaultModal();
-          }
-        }
-      });
-
-      // Vault status is managed by WebVaultStatus - don't override here!
-
-        // PERSISTENCE: Check if constellation was active before refresh
-        const constellationWasActive = localStorage.getItem('emmaConstellationActive') === 'true';
-        if (constellationWasActive) {
-
-          setTimeout(() => {
-            if (window.emmaDashboard && window.emmaDashboard.enterMemoryConstellation) {
-              window.emmaDashboard.enterMemoryConstellation();
-            }
-          }, 1000); // Wait for dashboard to fully initialize
-        }
-
-      // CRITICAL: Initialize vault objects AFTER all scripts load
-      setTimeout(() => {
-
-        // Check what's available        // CRITICAL FIX: Don't create new instances - they already exist from script loading!
-        // The global scripts (emma-web-vault.js, web-vault-status.js) already create instances        // Extension mode - Set up extension-aware vault status
-        if (window.emmaWebVault && window.emmaWebVault.extensionAvailable) {
-
-          // Set dashboard as ready - extension handles all vault operations
-          const statusIcon = document.getElementById('status-icon');
-          const statusTitle = document.getElementById('status-title');
-          const statusDescription = document.getElementById('status-description');
-          const actionBtn = document.getElementById('vault-action-btn');
-
-          if (statusIcon) statusIcon.textContent = '🔗';
-          if (statusTitle) statusTitle.textContent = 'Extension Connected';
-          if (statusDescription) statusDescription.textContent = 'Ready to preserve memories! Extension manages your vault automatically.';
-          if (actionBtn) actionBtn.style.display = 'none'; // Hide action button
-
-          // Listen for extension vault ready event
-          window.addEventListener('extension-vault-ready', (event) => {
-
-            // Force update vault icon to unlocked
-            const vaultIcon = document.querySelector('#vault-node .radial-item-icon');
-            if (vaultIcon) {
-              vaultIcon.textContent = '🔓';
-
-            }
-
-            // Update vault node status
-            setTimeout(() => {
-              if (window.dashboard && window.dashboard.updateVaultNodeStatus) {
-                window.dashboard.updateVaultNodeStatus();
-
-              }
-            }, 100);
-          });
-        } else if (sessionStorage.getItem('emmaVaultActive') === 'true' && window.emmaWebVault && !window.emmaWebVault.isOpen) {
-          (async () => {
-            try {
-
-              const result = await window.emmaWebVault.restoreVaultState();
-              if (result) {                // If in fallback mode, show affordance to re-enable direct save
-                try {
-                  if (window.emmaWebVault && window.emmaWebVault.isFallbackMode && window.emmaWebVault.isFallbackMode()) {
-                    window.emmaWebVault.showDirectSaveAffordance && window.emmaWebVault.showDirectSaveAffordance();
-                  }
-                } catch (_) {}
-              }
-            } catch (error) {
-              console.warn('⚠️ DASHBOARD: Could not restore elegant vault state:', error);
-            }
-          })();
-        } else if (window.emmaWebVault && window.emmaWebVault.isOpen) {
-
-        }
-
-      }, 1000); // Wait 1 second for all scripts to load
-    });
-  </script>
-</body>
-</html>
diff --git a/pages/emma-settings-redesigned.html b/pages/emma-settings-redesigned.html
index bb02df95..038376df 100644
--- a/pages/emma-settings-redesigned.html
+++ b/pages/emma-settings-redesigned.html
@@ -4,30 +4,31 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Emma Settings - Your Intelligent Memory Companion</title>
+  <link rel="stylesheet" href="../css/theme-tokens.css">
+  <link rel="stylesheet" href="../css/emma-components.css">
   
   <!-- Emma Core Systems -->
-  <script src="../js/emma-input-modal.js"></script>
-  <script src="../js/clean-password-modal.js"></script>
-  <script src="../js/emma-web-vault.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/emma-input-modal.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/clean-password-modal.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/emma-web-vault.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../themes/theme-catalog.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/theme-manager.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/theme-settings-ui.js"></script>
   
-  <!-- Browser Compatibility Layer -->
-  <script src="../emma-browser-compatibility-fix.js"></script>
-  
-  <!-- Mobile UI Fixes -->
-  <script src="../emma-mobile-ui-fixes.js"></script>
+  <!-- Optional compatibility layers removed: files not present in web build -->
   
   <style>
     /* Emma Brand Variables */
     :root {
-      --emma-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
-      --emma-purple: #8B5CF6;
-      --emma-pink: #F093FB;
-      --emma-glow: 0 0 40px rgba(134, 88, 255, 0.6);
-      --emma-glass: rgba(255, 255, 255, 0.1);
-      --emma-border: rgba(255, 255, 255, 0.2);
-      --emma-text: #ffffff;
-      --emma-text-secondary: rgba(255, 255, 255, 0.8);
-      --emma-text-tertiary: rgba(255, 255, 255, 0.6);
+      --emma-gradient: var(--emma-bg-gradient);
+      --emma-purple: var(--emma-accent-primary);
+      --emma-pink: var(--emma-accent-secondary);
+      --emma-glow: var(--emma-glow-strong);
+      --emma-glass: rgba(var(--emma-neutral-rgb), 0.08);
+      --emma-border: rgba(var(--emma-neutral-rgb), 0.18);
+      --emma-text: var(--emma-text-strong);
+      --emma-text-secondary: var(--emma-text-standard);
+      --emma-text-tertiary: var(--emma-text-muted);
     }
 
     * {
@@ -41,89 +42,614 @@
       background: var(--emma-gradient);
       color: var(--emma-text);
       min-height: 100vh;
-      padding: 20px;
+      padding: clamp(24px, 4vw, 48px);
     }
 
     .settings-container {
-      max-width: 800px;
+      max-width: 1180px;
       margin: 0 auto;
-      position: relative;
     }
 
-    .settings-header {
-      text-align: center;
-      margin-bottom: 40px;
+    .settings-exit-fab {
+      position: fixed;
+      bottom: 24px;
+      right: 24px;
+      width: 56px;
+      height: 56px;
+      border-radius: 50%;
+      border: 1px solid rgba(111, 99, 217, 0.4);
+      background: linear-gradient(135deg, rgba(111, 99, 217, 0.9), rgba(208, 111, 168, 0.85));
+      color: #fff;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow:
+        0 12px 28px rgba(111, 99, 217, 0.3),
+        inset 0 1px 0 rgba(255, 255, 255, 0.16);
+      backdrop-filter: blur(18px);
+      transition: transform 0.25s ease, box-shadow 0.25s ease;
+      z-index: 140;
+      cursor: pointer;
+    }
+
+    .settings-exit-fab:hover {
+      transform: translateY(-4px);
+      box-shadow:
+        15pxrgba(111, 99, 217, 0.35),
+        inset 0 1px 0 rgba(255, 255, 255, 0.2);
+    }
+
+    .settings-exit-fab svg {
+      width: 24px;
+      height: 24px;
+      stroke: currentColor;
+      stroke-width: 1.8;
+    }
+
+    @media (max-width: 720px) {
+      .settings-exit-fab {
+        width: 52px;
+        height: 52px;
+        bottom: 18px;
+        right: 18px;
+      }
+    }
+
+    @media (max-width: 540px) {
+      .settings-exit-fab {
+        width: 48px;
+        height: 48px;
+        bottom: calc(env(safe-area-inset-bottom, 0) + 14px);
+        right: 16px;
+      }
+    }
+
+    .settings-shell {
+      display: grid;
+      grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
+      gap: clamp(28px, 4vw, 48px);
+      align-items: start;
+    }
+
+    .settings-sidebar {
+      display: grid;
+      gap: clamp(18px, 2vw, 28px);
+      padding: clamp(20px, 2.4vw, 28px);
+      border-radius: 28px;
+      border: 1px solid rgba(255, 255, 255, 0.14);
+      background: linear-gradient(165deg, rgba(26, 26, 56, 0.82), rgba(10, 10, 32, 0.9));
+      box-shadow:
+        15pxrgba(6, 4, 20, 0.5),
+        inset 0 1px 0 rgba(255, 255, 255, 0.08);
+      position: sticky;
+      top: clamp(24px, 4vw, 48px);
+    }
+
+    .settings-sidebar__header {
+      display: grid;
+      gap: 12px;
     }
 
     .emma-logo {
-      font-size: 48px;
+      font-size: clamp(42px, 3vw, 54px);
       font-weight: 300;
-      margin-bottom: 8px;
+      margin: 0;
       background: linear-gradient(135deg, var(--emma-purple), var(--emma-pink));
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
+      letter-spacing: 0.1em;
+      text-transform: lowercase;
     }
 
-    .settings-subtitle {
-      font-size: 18px;
-      color: var(--emma-text-secondary);
-      margin-bottom: 12px;
+    .settings-sidebar__subtitle {
+      font-size: 0.95rem;
+      color: rgba(220, 225, 255, 0.82);
+      line-height: 1.7;
     }
 
     .back-button {
-      position: absolute;
-      top: -10px;
-      left: 0;
-      background: var(--emma-glass);
-      border: 2px solid var(--emma-border);
-      color: var(--emma-text);
-      padding: 12px 20px;
-      border-radius: 12px;
-      cursor: pointer;
-      transition: all 0.3s ease;
-      text-decoration: none;
-      display: flex;
+      display: inline-flex;
       align-items: center;
       gap: 8px;
-      backdrop-filter: blur(10px);
+      padding: 10px 18px;
+      border-radius: 999px;
+      border: 1px solid rgba(255, 255, 255, 0.18);
+      background: rgba(24, 28, 60, 0.65);
+      color: rgba(236, 240, 255, 0.85);
+      text-decoration: none;
+      font-size: 0.85rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      transition: transform 0.3s ease, box-shadow 0.3s ease;
+      width: fit-content;
     }
 
     .back-button:hover {
-      background: rgba(255, 255, 255, 0.2);
       transform: translateY(-2px);
+      box-shadow: 0 8px 18px rgba(6, 8, 24, 0.4);
+    }
+
+    .settings-sidebar__card {
+      padding: 18px 20px;
+      border-radius: 18px;
+      background: rgba(32, 30, 64, 0.7);
+      border: 1px solid rgba(255, 255, 255, 0.08);
+      color: rgba(218, 222, 255, 0.85);
+      display: grid;
+      gap: 6px;
+    }
+
+    .settings-sidebar__card strong {
+      font-size: 0.72rem;
+      text-transform: uppercase;
+      letter-spacing: 0.2em;
+      color: rgba(198, 205, 255, 0.7);
+    }
+
+    .settings-nav {
+      display: grid;
+      gap: 10px;
+    }
+
+    .settings-nav__item {
+      width: 100%;
+      padding: 14px 18px;
+      border-radius: 14px;
+      border: 1px solid rgba(255, 255, 255, 0.08);
+      background: linear-gradient(130deg, rgba(24, 26, 60, 0.75), rgba(18, 20, 48, 0.65));
+      color: rgba(232, 236, 255, 0.9);
+      font-size: 0.9rem;
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      cursor: pointer;
+      transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
+    }
+
+    .settings-nav__item::after {
+      content: "\2192";
+      font-size: 0.8rem;
+      opacity: 0.6;
+    }
+
+    .settings-nav__item.is-active,
+    .settings-nav__item:hover {
+      border-color: rgba(var(--emma-accent-primary-rgb), 0.45);
+      box-shadow: 0 12px 26px rgba(6, 8, 24, 0.4);
+      transform: translateY(-2px);
+    }
+
+    .settings-sidebar__meta {
+      display: grid;
+      gap: 6px;
+      font-size: 0.82rem;
+      color: rgba(205, 210, 245, 0.7);
+    }
+
+    .settings-sidebar__meta a {
+      color: rgba(232, 236, 255, 0.9);
+      text-decoration: none;
+    }
+
+    .settings-sidebar__meta a:hover {
+      text-decoration: underline;
+    }
+
+    .settings-main {
+      display: grid;
+      gap: clamp(24px, 3vw, 36px);
+      position: relative;
+      z-index: 1;
+    }
+
+    .settings-actions {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      margin-top: 8px;
+      padding-top: 12px;
     }
 
     .settings-section {
-      background: var(--emma-glass);
-      backdrop-filter: blur(20px);
-      border: 2px solid var(--emma-border);
+      position: relative;
+      margin: 0;
+      padding: clamp(26px, 2.6vw, 34px);
+      border-radius: 26px;
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      background: linear-gradient(150deg, rgba(28, 28, 64, 0.78), rgba(12, 12, 32, 0.9));
+      box-shadow:
+        0 20px 48px rgba(4, 4, 12, 0.4),
+        inset 0 1px 0 rgba(255, 255, 255, 0.08);
+      display: grid;
+      gap: 18px;
+      overflow: hidden;
+      scroll-margin-top: clamp(80px, 12vh, 120px);
+    }
+
+    .settings-section::before {
+      content: attr(data-section-title);
+      position: absolute;
+      top: 22px;
+      left: 24px;
+      font-size: 0.72rem;
+      letter-spacing: 0.2em;
+      text-transform: uppercase;
+      color: rgba(198, 205, 250, 0.3);
+    }
+
+    .settings-section::after {
+      content: '';
+      position: absolute;
+      inset: -48% -10% 72% -45%;
+      background: radial-gradient(circle at 0% 50%, rgba(var(--emma-accent-primary-rgb), 0.22), transparent 58%);
+      opacity: 0.55;
+      pointer-events: none;
+      z-index: 0;
+    }
+
+    .settings-section__header {
+      display: grid;
+      gap: 12px;
+      position: relative;
+      z-index: 1;
+    }
+
+    .settings-section__content {
+      display: grid;
+      gap: clamp(16px, 2vw, 24px);
+      position: relative;
+      z-index: 1;
+    }
+
+    .settings-section--ai {
+      position: relative;
+      display: grid;
+      gap: 26px;
+      padding: 40px;
+      overflow: hidden;
+      border-radius: 26px;
+      border: 1px solid rgba(var(--emma-accent-primary-rgb), 0.45);
+      background: linear-gradient(160deg, rgba(var(--emma-accent-primary-rgb), 0.18) 0%, rgba(26, 20, 52, 0.92) 55%, rgba(8, 8, 20, 0.94) 100%);
+      box-shadow:
+        0 22px 52px rgba(16, 10, 42, 0.48),
+        inset 0 0 0 1px rgba(255, 255, 255, 0.04);
+    }
+
+    .settings-section__halo {
+      position: absolute;
+      inset: -40% -30% 10%;
+      background: radial-gradient(circle at 15% 20%, rgba(var(--emma-accent-primary-rgb), 0.55), transparent 55%),
+                  radial-gradient(circle at 80% 10%, rgba(var(--emma-accent-secondary-rgb, 208, 111, 168), 0.4), transparent 65%);
+      filter: blur(60px);
+      opacity: 0.7;
+      pointer-events: none;
+      z-index: 0;
+    }
+
+    .settings-section__header {
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr);
+      gap: 20px;
+      align-items: center;
+      position: relative;
+      z-index: 1;
+    }
+
+    .settings-section__glyph {
+      width: 72px;
+      height: 72px;
+      border-radius: 22px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 1.4rem;
+      font-family: inherit;
+      font-weight: 600;
+      letter-spacing: 0.18em;
+      text-transform: uppercase;
+      background: linear-gradient(180deg, rgba(var(--emma-accent-primary-rgb), 0.18), rgba(var(--emma-accent-secondary-rgb, 208, 111, 168), 0.26));
+      box-shadow:
+        0 12px 26px rgba(0, 0, 0, 0.3),
+        inset 0 1px 0 rgba(255, 255, 255, 0.12);
+      border: 1px solid rgba(var(--emma-accent-primary-rgb), 0.45);
+      color: rgba(244, 244, 255, 0.9);
+    }
+
+    .section-title__icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 32px;
+      height: 32px;
+      margin-right: 12px;
+      border-radius: 12px;
+      background: linear-gradient(135deg, rgba(var(--emma-accent-primary-rgb), 0.75), rgba(var(--emma-accent-secondary-rgb, 208, 111, 168), 0.55));
+      color: rgba(255, 255, 255, 0.92);
+      font-size: 0.74rem;
+      font-family: inherit;
+      letter-spacing: 0.18em;
+      font-weight: 600;
+      text-transform: uppercase;
+    }
+
+    .settings-section__headline .section-title {
+      margin-bottom: 10px;
+      letter-spacing: 0.02em;
+    }
+
+    .settings-section__headline .section-description {
+      margin-bottom: 0;
+      max-width: 540px;
+    }
+
+    .settings-section__content--ai {
+      position: relative;
+      z-index: 1;
+      display: grid;
+      gap: 20px;
+    }
+
+    .settings-section--ai .setting-item {
+      position: relative;
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+      gap: 20px;
+      align-items: center;
+      padding: 24px 26px;
       border-radius: 20px;
-      padding: 32px;
-      margin-bottom: 32px;
-      box-shadow: 0 8px 32px rgba(139, 92, 246, 0.2);
+      border: 1px solid rgba(var(--emma-accent-primary-rgb), 0.18);
+      background: linear-gradient(140deg, rgba(20, 18, 40, 0.92) 0%, rgba(20, 24, 52, 0.75) 60%, rgba(20, 24, 52, 0.55) 100%);
+      box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
+      overflow: hidden;
+      transition: transform 260ms ease, box-shadow 260ms ease;
+      border-bottom: none;
     }
 
-    .section-title {
-      font-size: 24px;
+    .settings-section--ai .setting-item::before {
+      content: '';
+      position: absolute;
+      inset: 1px;
+      border-radius: inherit;
+      background: linear-gradient(110deg, rgba(var(--emma-accent-primary-rgb), 0.22), rgba(255, 255, 255, 0) 75%);
+      opacity: 0.5;
+      pointer-events: none;
+      mix-blend-mode: screen;
+    }
+
+    .settings-section--ai .setting-item::after {
+      content: '';
+      position: absolute;
+      inset: -20% 45% 30% -20%;
+      background: radial-gradient(circle at 0% 50%, rgba(var(--emma-accent-primary-rgb), 0.25), transparent 60%);
+      opacity: 0.6;
+      pointer-events: none;
+    }
+
+    .settings-section--ai .setting-item:last-child {
+      border-bottom: none;
+    }
+
+    .settings-section--ai .setting-item:hover {
+      transform: translateY(-6px);
+      box-shadow:
+        0 18px 42px rgba(0, 0, 0, 0.35),
+        0 0 20px rgba(var(--emma-accent-primary-rgb), 0.24);
+    }
+
+    .settings-section--ai .setting-label strong {
+      letter-spacing: 0.03em;
+      font-size: 1.05rem;
+    }
+
+    .settings-section--ai .setting-label span {
+      color: rgba(224, 223, 240, 0.7);
+      max-width: 520px;
+    }
+
+    .settings-section--ai .setting-item > .emma-button,
+    .settings-section--ai .setting-item > .api-key-button,
+    .settings-section--ai .setting-item > .status-indicator,
+    .settings-section--ai .setting-item > .toggle-switch {
+      justify-self: end;
+    }
+
+    .settings-section--ai .toggle-switch {
+      justify-self: end;
+    }
+
+    .ai-setting--status .status-indicator {
+      justify-self: end;
+      background: rgba(12, 180, 129, 0.15);
+      border-color: rgba(52, 211, 153, 0.35);
+      box-shadow: inset 0 0 8px rgba(52, 211, 153, 0.2);
+    }
+
+    .ai-setting--status .status-dot {
+      width: 14px;
+      height: 14px;
+    }
+
+    .ai-setting--status .status-dot.active {
+      box-shadow: 0 0 12px rgba(52, 211, 153, 0.45);
+    }
+
+    /* Theme gallery styles */
+    .theme-gallery {
+      display: grid;
+      gap: 16px;
+      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+      margin-top: 20px;
+    }
+
+    .theme-card {
+      position: relative;
+      border: 1px solid rgba(var(--emma-neutral-rgb), 0.15);
+      border-radius: 16px;
+      padding: 16px;
+      background: rgba(var(--emma-neutral-rgb), 0.06);
+      color: var(--emma-text-secondary);
+      cursor: pointer;
+      transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      min-height: 150px;
+      text-align: left;
+    }
+
+    .theme-card:hover {
+      transform: translateY(-4px);
+      box-shadow: 0 12px 26px rgba(0, 0, 0, 0.2);
+      border-color: rgba(var(--emma-accent-primary-rgb), 0.4);
+    }
+
+    .theme-card--active {
+      border-color: rgba(var(--emma-accent-primary-rgb), 0.65);
+      box-shadow: 0 14px 30px rgba(var(--emma-accent-primary-rgb), 0.28);
+    }
+
+    .theme-card__preview {
+      height: 80px;
+      border-radius: 14px;
+      background: var(--emma-gradient-primary);
+      position: relative;
+      overflow: hidden;
+    }
+
+    .theme-card__swatches {
+      position: absolute;
+      bottom: 12px;
+      left: 12px;
+      display: flex;
+      gap: 8px;
+    }
+
+    .theme-card__swatch {
+      width: 30px;
+      height: 30px;
+      border-radius: 10px;
+      border: 2px solid rgba(0, 0, 0, 0.2);
+      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
+    }
+
+    .theme-card__info {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+
+    .theme-card__name {
+      font-size: 16px;
       font-weight: 600;
-      margin-bottom: 8px;
       color: var(--emma-text);
+    }
+
+    .theme-card__description {
+      font-size: 13px;
+      color: var(--emma-text-secondary);
+      line-height: 1.5;
+    }
+
+    .theme-card__badges {
+      display: flex;
+      gap: 8px;
+      flex-wrap: wrap;
+      margin-top: auto;
+    }
+
+    .theme-card__badge {
+      font-size: 11px;
+      padding: 4px 8px;
+      border-radius: 999px;
+      background: rgba(var(--emma-accent-primary-rgb), 0.18);
+      color: var(--emma-accent-primary);
+      font-weight: 600;
+    }
+
+    .background-options {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 12px;
+      margin-top: 24px;
+    }
+
+    .background-option {
+      flex: 1 1 160px;
+      min-width: 160px;
+      border: 1px solid rgba(var(--emma-neutral-rgb), 0.18);
+      border-radius: 14px;
+      padding: 14px;
+      background: rgba(var(--emma-neutral-rgb), 0.05);
+      color: var(--emma-text-secondary);
+      cursor: pointer;
+      transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
       display: flex;
       align-items: center;
       gap: 12px;
+      text-align: left;
     }
 
-    .section-description {
-      font-size: 16px;
+    .background-option:hover {
+      transform: translateY(-2px);
+      border-color: rgba(var(--emma-accent-primary-rgb), 0.45);
+      box-shadow: 0 10px 22px rgba(0, 0, 0, 0.2);
+    }
+
+    .background-option--active {
+      border-color: rgba(var(--emma-accent-primary-rgb), 0.65);
+      box-shadow: 0 12px 26px rgba(var(--emma-accent-primary-rgb), 0.24);
+    }
+
+    .background-option__preview {
+      width: 48px;
+      height: 48px;
+      border-radius: 12px;
+      background: var(--emma-gradient-primary);
+      flex-shrink: 0;
+    }
+
+    .background-option__info {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    .background-option__name {
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--emma-text);
+    }
+
+    .background-option__description {
+      font-size: 12px;
       color: var(--emma-text-secondary);
-      margin-bottom: 24px;
-      line-height: 1.5;
+      line-height: 1.4;
+    }
+
+    .section-title {
+      font-size: clamp(1.35rem, 2.2vw, 1.7rem);
+      font-weight: 600;
+      margin: 0;
+      color: var(--emma-text);
+      letter-spacing: 0.02em;
+    }
+
+    .section-description {
+      font-size: 0.95rem;
+      color: rgba(214, 218, 255, 0.78);
+      margin: 0;
+      line-height: 1.7;
+      max-width: 46ch;
     }
 
     .setting-item {
-      display: flex;
-      justify-content: space-between;
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+      gap: 18px;
       align-items: center;
       padding: 20px 0;
       border-bottom: 1px solid rgba(255, 255, 255, 0.1);
@@ -134,10 +660,6 @@
       padding-bottom: 0;
     }
 
-    .setting-label {
-      flex: 1;
-    }
-
     .setting-label strong {
       display: block;
       color: var(--emma-text);
@@ -154,56 +676,76 @@
 
     .toggle-switch {
       position: relative;
-      display: inline-block;
-      width: 60px;
-      height: 30px;
+      display: inline-flex;
+      align-items: center;
+      width: 64px;
+      height: 32px;
     }
 
     .toggle-switch input {
+      position: absolute;
+      inset: 0;
+      margin: 0;
       opacity: 0;
-      width: 0;
-      height: 0;
+      cursor: pointer;
     }
 
     .toggle-slider {
       position: absolute;
-      cursor: pointer;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background-color: rgba(255, 255, 255, 0.2);
-      transition: 0.4s;
-      border-radius: 30px;
-      border: 2px solid rgba(255, 255, 255, 0.3);
+      inset: 0;
+      display: block;
+      background: linear-gradient(125deg, rgba(24, 24, 52, 0.9), rgba(18, 20, 46, 0.78));
+      border-radius: 999px;
+      border: 1px solid rgba(255, 255, 255, 0.08);
+      transition: all 0.35s cubic-bezier(0.3, 0.7, 0.4, 1.1);
+      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
     }
 
-    .toggle-slider:before {
-      position: absolute;
+    .toggle-slider::before {
       content: "";
-      height: 22px;
-      width: 22px;
-      left: 2px;
-      bottom: 2px;
-      background-color: white;
-      transition: 0.4s;
+      position: absolute;
+      top: 3px;
+      left: 4px;
+      width: 26px;
+      height: 26px;
       border-radius: 50%;
-      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+      background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.95), rgba(220, 225, 255, 0.6));
+      box-shadow:
+        0 3px 12px rgba(0, 0, 0, 0.3),
+        inset 0 1px 0 rgba(255, 255, 255, 0.6);
+      transition: all 0.35s cubic-bezier(0.3, 0.7, 0.4, 1.1);
     }
 
-    input:checked + .toggle-slider {
-      background: linear-gradient(135deg, var(--emma-purple), var(--emma-pink));
-      border-color: var(--emma-purple);
+    .toggle-slider::after {
+      content: "";
+      position: absolute;
+      inset: 4px;
+      border-radius: 999px;
+      background: linear-gradient(120deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
+      pointer-events: none;
+      transition: opacity 0.35s ease;
+    }
+
+    .toggle-switch input:checked + .toggle-slider {
+      background: linear-gradient(135deg, rgba(var(--emma-accent-primary-rgb), 0.7), rgba(var(--emma-accent-secondary-rgb), 0.55));
+      border-color: rgba(var(--emma-accent-primary-rgb), 0.5);
+      box-shadow:
+        0 0 14px rgba(var(--emma-accent-primary-rgb), 0.28),
+        inset 0 1px 0 rgba(255, 255, 255, 0.18);
     }
 
-    input:checked + .toggle-slider:before {
-      transform: translateX(30px);
+    .toggle-switch input:checked + .toggle-slider::before {
+      transform: translateX(32px);
+      background: radial-gradient(circle at 30% 30%, #ffffff, rgba(255, 255, 255, 0.78));
+      box-shadow:
+        0 3px 12px rgba(var(--emma-accent-primary-rgb), 0.35),
+        inset 0 1px 0 rgba(255, 255, 255, 0.85);
     }
 
     .api-key-input {
       width: 100%;
       padding: 16px 20px;
-      border: 2px solid rgba(139, 92, 246, 0.3);
+      border: 2px solid rgba(111, 99, 217, 0.3);
       border-radius: 12px;
       background: rgba(255, 255, 255, 0.1);
       color: var(--emma-text);
@@ -215,7 +757,7 @@
 
     .api-key-input:focus {
       border-color: var(--emma-purple);
-      box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
+      box-shadow: 0 0 0 2px rgba(111, 99, 217, 0.2);
     }
 
     .api-key-input::placeholder {
@@ -230,6 +772,7 @@
       background: rgba(255, 255, 255, 0.05);
       border-radius: 12px;
       border: 1px solid rgba(255, 255, 255, 0.1);
+      justify-self: end;
     }
 
     .status-dot {
@@ -242,66 +785,81 @@
 
     .status-dot.active {
       background: var(--emma-purple);
-      box-shadow: 0 0 12px rgba(139, 92, 246, 0.6);
+      box-shadow: 0 0 8px rgba(111, 99, 217, 0.5);
     }
 
-    .save-button {
-      background: linear-gradient(135deg, var(--emma-purple), var(--emma-pink));
-      border: none;
-      color: white;
-      padding: 16px 32px;
-      border-radius: 12px;
-      font-size: 16px;
-      font-weight: 600;
-      cursor: pointer;
-      transition: all 0.3s ease;
-      width: 100%;
-      margin-top: 32px;
+    .api-key-button {
+      --emma-button-gradient-start: rgba(var(--emma-accent-secondary-rgb, 208, 111, 168), 0.42);
+      --emma-button-gradient-end: rgba(var(--emma-accent-primary-rgb, 111, 99, 217), 0.18);
+      --emma-button-surface: rgba(16, 18, 36, 0.92);
+      --emma-button-ink: var(--emma-text-standard);
+      --emma-button-outline-opacity: 0.35;
+      justify-content: flex-start;
+      gap: 0.75rem;
+      padding: 0.9rem 1.4rem;
+      min-width: 230px;
+      margin-top: 12px;
     }
 
-    .save-button:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 8px 25px rgba(139, 92, 246, 0.4);
+    .api-key-button__icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 32px;
+      height: 32px;
+      border-radius: 12px;
+      background: rgba(255, 255, 255, 0.12);
+      color: rgba(255, 255, 255, 0.92);
+      transition: transform 250ms ease, background 250ms ease;
     }
 
-    .help-text {
-      font-size: 13px;
-      color: var(--emma-text-tertiary);
-      margin-top: 8px;
-      line-height: 1.4;
+    .api-key-button__icon svg {
+      width: 20px;
+      height: 20px;
+      stroke: currentColor;
+      stroke-width: 1.8;
+      fill: none;
     }
 
-    /* Mobile Responsive */
-    @media (max-width: 768px) {
-      body {
-        padding: 16px;
-      }
+    .api-key-button__icon--active {
+      background: rgba(52, 211, 153, 0.18);
+      color: rgba(52, 211, 153, 0.95);
+    }
 
-      .settings-section {
-        padding: 24px 20px;
-        margin-bottom: 24px;
-      }
+    .api-key-button__label {
+      font-size: 0.95rem;
+      text-transform: none;
+      letter-spacing: 0.02em;
+    }
 
-      .section-title {
-        font-size: 20px;
-      }
+    .api-key-button:hover .api-key-button__icon,
+    .api-key-button:focus-visible .api-key-button__icon {
+      transform: rotate(-8deg) scale(1.05);
+    }
 
-      .setting-item {
-        flex-direction: column;
-        align-items: flex-start;
-        gap: 16px;
-        padding: 16px 0;
-      }
+    .api-key-button[data-state="connected"] {
+      --emma-button-accent: var(--emma-success, #34d399);
+      --emma-button-accent-rgb: 52, 211, 153;
+      --emma-button-ink: var(--emma-text-on-accent, #0f172a);
+      --emma-button-outline-opacity: 0.55;
+    }
 
-      .toggle-switch {
-        align-self: flex-end;
-      }
+    .save-button {
+      --emma-button-gradient-start: rgba(var(--emma-accent-primary-rgb, 111, 99, 217), 0.96);
+      --emma-button-gradient-end: rgba(var(--emma-accent-secondary-rgb, 208, 111, 168), 0.72);
+      --emma-button-surface: rgba(33, 16, 55, 0.92);
+      margin-top: 0;
+      justify-content: center;
+      font-size: 1rem;
+      letter-spacing: 0.03em;
+      text-transform: none;
+    }
 
-      .back-button {
-        position: static;
-        margin-bottom: 20px;
-        align-self: flex-start;
-      }
+    .help-text {
+      font-size: 13px;
+      color: var(--emma-text-tertiary);
+      margin-top: 8px;
+      line-height: 1.4;
     }
 
     /* Animations */
@@ -359,14 +917,14 @@
 
     .api-modal-content {
       position: relative;
-      background: linear-gradient(135deg, #8658ff 0%, #6a4fd8 100%);
+      background: linear-gradient(135deg, #6f63d9 0%, #6a4fd8 100%);
       border-radius: 16px;
       padding: 0;
       max-width: 500px;
       width: 90%;
       max-height: 80vh;
       overflow: hidden;
-      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+      box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28);
       border: 1px solid rgba(255, 255, 255, 0.2);
     }
 
@@ -462,7 +1020,7 @@
 
     .api-btn-primary {
       background: white;
-      color: #8658ff;
+      color: #6f63d9;
       border: none;
       padding: 12px 24px;
       border-radius: 8px;
@@ -563,264 +1121,566 @@
         font-size: 12px;
       }
     }
+
+      @media (max-width: 1100px) {
+        body {
+          padding-bottom: 120px;
+        }
+
+        .settings-shell {
+          grid-template-columns: 1fr;
+        }
+
+        .settings-sidebar {
+        position: static;
+        order: -1;
+      }
+    }
+
+      @media (max-width: 768px) {
+        body {
+          padding: 20px;
+          padding-bottom: calc(20px + 108px);
+        }
+
+        .settings-sidebar {
+          padding: 18px;
+        }
+
+      .settings-nav__item {
+        font-size: 0.78rem;
+      }
+
+      .settings-section {
+        padding: 22px 20px;
+      }
+
+      .settings-section__header {
+        gap: 10px;
+      }
+
+      .settings-section__glyph {
+        width: 54px;
+        height: 54px;
+      }
+
+      .section-title {
+        font-size: 1.2rem;
+      }
+
+      .setting-item {
+        grid-template-columns: 1fr;
+        align-items: start;
+        gap: 12px;
+      }
+
+      .settings-section--ai .setting-item {
+        padding: 20px;
+      }
+
+      .settings-section--ai .setting-item > .emma-button,
+      .settings-section--ai .setting-item > .api-key-button,
+      .settings-section--ai .setting-item > .status-indicator,
+      .settings-section--ai .setting-item > .toggle-switch {
+        justify-self: start;
+      }
+
+      .settings-actions {
+        justify-content: center;
+      }
+
+      .back-button {
+        width: 100%;
+        justify-content: center;
+      }
+
+      .status-indicator {
+        justify-self: stretch;
+      }
+    }
   </style>
 </head>
 <body>
   <div class="settings-container">
-    <a href="../dashboard.html" class="back-button">
-      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-        <path d="m12 19-7-7 7-7"/>
-        <path d="m19 12H5"/>
-      </svg>
-      Back to Emma
-    </a>
-
-    <div class="settings-header">
-      <h1 class="emma-logo">emma</h1>
-      <p class="settings-subtitle">Configure your intelligent memory companion</p>
-    </div>
-
-    <!-- AI Configuration -->
-    <div class="settings-section">
-      <h2 class="section-title">
-        🧠 Artificial Intelligence
-      </h2>
-      <p class="section-description">
-        Emma's AI works beautifully offline with intelligent heuristics. For even more advanced understanding and nuanced conversations, connect your OpenAI API key to unlock Emma's full potential.
-      </p>
-      
-      <div class="setting-item">
-        <div class="setting-label">
-          <strong>OpenAI API Key</strong>
-          <span>Enable Emma's most advanced AI responses with your OpenAI API key. Emma works great offline with smart heuristics, but an API key unlocks deeper understanding and more nuanced conversations.</span>
-        </div>
-        <button 
-          id="api-key-setup-btn" 
-          class="api-key-button"
-          style="
-            background: rgba(255, 255, 255, 0.1);
-            border: 2px solid rgba(255, 255, 255, 0.3);
-            color: white;
-            padding: 12px 20px;
-            border-radius: 8px;
-            font-size: 14px;
-            font-weight: 500;
-            cursor: pointer;
-            transition: all 0.2s ease;
-            margin-top: 8px;
-            min-width: 200px;
-          "
-          onmouseover="this.style.background='rgba(255, 255, 255, 0.15)'; this.style.borderColor='rgba(255, 255, 255, 0.5)'"
-          onmouseout="this.style.background='rgba(255, 255, 255, 0.1)'; this.style.borderColor='rgba(255, 255, 255, 0.3)'"
-        >
-          <span id="api-key-status">🔑 Setup API Key</span>
-        </button>
-      </div>
-      
-      <div class="setting-item">
-        <div class="setting-label">
-          <strong>Memory Detection</strong>
-          <span>Emma automatically recognizes when you're sharing meaningful memories and gently suggests saving them to your vault.</span>
-        </div>
-        <label class="toggle-switch">
-          <input type="checkbox" id="memory-detection-toggle" checked>
-          <span class="toggle-slider"></span>
-        </label>
-      </div>
-      
-      <div class="setting-item">
-        <div class="setting-label">
-          <strong>People Recognition</strong>
-          <span>Emma identifies names mentioned in conversations and connects them to people in your vault or suggests adding new ones.</span>
+    <div class="settings-shell">
+      <aside class="settings-sidebar" aria-label="Settings navigation">
+        <a href="../dashboard.html" class="back-button">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="m12 19-7-7 7-7"/>
+            <path d="m19 12H5"/>
+          </svg>
+          Back to Emma
+        </a>
+
+        <div class="settings-sidebar__header">
+          <h1 class="emma-logo">emma</h1>
+          <p class="settings-sidebar__subtitle">Configure your intelligent memory companion with a space that feels distinctly yours.</p>
         </div>
-        <label class="toggle-switch">
-          <input type="checkbox" id="people-recognition-toggle" checked>
-          <span class="toggle-slider"></span>
-        </label>
-      </div>
-      
-      <div class="setting-item">
-        <div class="setting-label">
-          <strong>Vectorless AI Status</strong>
-          <span>Real-time status of Emma's intelligent memory processing system.</span>
-        </div>
-        <div class="status-indicator">
-          <div class="status-dot" id="ai-status-dot"></div>
-          <span id="ai-status-text">Initializing...</span>
-        </div>
-      </div>
-    </div>
 
-    <!-- Memory & Care -->
-    <div class="settings-section">
-      <h2 class="section-title">
-        💜 Memory & Care
-      </h2>
-      <p class="section-description">
-        Specialized features for memory preservation and dementia care support.
-      </p>
-      
-      <div class="setting-item">
-        <div class="setting-label">
-          <strong>Dementia Care Mode</strong>
-          <span>Enables validation therapy principles and specialized responses for users with memory impairment. Designed with love for Debbe.</span>
-        </div>
-        <label class="toggle-switch">
-          <input type="checkbox" id="dementia-mode-toggle">
-          <span class="toggle-slider"></span>
-        </label>
-      </div>
-      
-      <div class="setting-item">
-        <div class="setting-label">
-          <strong>Memory Auto-Capture</strong>
-          <span>Automatically detect and suggest capturing meaningful moments during conversations.</span>
+        <div class="settings-sidebar__card">
+          <strong>Experience Tip</strong>
+          <p>Backgrounds you choose now ripple through the vault and modal surfaces so every interaction stays on-theme.</p>
         </div>
-        <label class="toggle-switch">
-          <input type="checkbox" id="auto-capture-toggle" checked>
-          <span class="toggle-slider"></span>
-        </label>
-      </div>
-    </div>
 
-    <!-- Privacy & Security -->
-    <div class="settings-section">
-      <h2 class="section-title">
-        🔒 Privacy & Security
-      </h2>
-      <p class="section-description">
-        Emma prioritizes your privacy with local-only processing and secure vault encryption.
-      </p>
-      
-      <div class="setting-item">
-        <div class="setting-label">
-          <strong>Local Processing</strong>
-          <span>All memory analysis happens on your device. No data is sent to external servers.</span>
+        <nav class="settings-nav" id="settings-nav" aria-label="Settings sections">
+          <button type="button" class="settings-nav__item is-active" data-target="#section-visual">Visual Themes</button>
+          <button type="button" class="settings-nav__item" data-target="#section-ai">Intelligence</button>
+          <button type="button" class="settings-nav__item" data-target="#section-care">Memory &amp; Care</button>
+          <button type="button" class="settings-nav__item" data-target="#section-privacy">Privacy &amp; Security</button>
+          <button type="button" class="settings-nav__item" data-target="#section-accessibility">Care &amp; Accessibility</button>
+          <button type="button" class="settings-nav__item" data-target="#section-system">System Information</button>
+        </nav>
+
+        <div class="settings-sidebar__meta">
+          <p class="settings-sidebar__version">Emma v1.0 Beta</p>
+          <p class="settings-sidebar__support">Need guidance? <a href="mailto:support@emma.ai">support@emma.ai</a></p>
         </div>
-        <div class="status-indicator">
-          <div class="status-dot active"></div>
-          <span>Always Enabled</span>
-        </div>
-      </div>
-      
-      <div class="setting-item">
-        <div class="setting-label">
-          <strong>Vault Encryption</strong>
-          <span>Your .emma files are protected with AES-256 encryption and PBKDF2 key derivation.</span>
-        </div>
-        <div class="status-indicator">
-          <div class="status-dot active"></div>
-          <span>Always Enabled</span>
-        </div>
-      </div>
-    </div>
+      </aside>
+
+      <main class="settings-main" id="settings-main">
+        <!-- Visual Theme Selection -->
+        <section id="section-visual" class="settings-section" data-section-title="Visual Themes">
+          <div class="settings-section__header">
+            <h2 class="section-title"><span class="section-title__icon" aria-hidden="true">VT</span> Visual Themes</h2>
+            <p class="section-description">
+              Preview different Emma looks and moods. Themes update instantly so you can find the palette that feels just right, and you can choose a signature background to match.
+            </p>
+          </div>
+          <div class="settings-section__content">
+            <div id="settings-theme-gallery" class="theme-gallery" role="list" aria-label="Available themes">
+              <button type="button" class="theme-card" data-theme-id="aurora-classic" role="listitem" aria-label="Aurora Classic theme">
+                <div class="theme-card__preview" aria-hidden="true">
+                  <div class="theme-card__swatches">
+                    <span class="theme-card__swatch"></span>
+                    <span class="theme-card__swatch"></span>
+                    <span class="theme-card__swatch"></span>
+                  </div>
+                </div>
+                <div class="theme-card__info">
+                  <div class="theme-card__name">Aurora Classic</div>
+                  <div class="theme-card__description">Signature Emma gradient with deep cosmos ambiance.</div>
+                </div>
+                <div class="theme-card__badges">
+                  <span class="theme-card__badge">Animated</span>
+                </div>
+              </button>
+              <button type="button" class="theme-card" data-theme-id="sunrise-glow" role="listitem" aria-label="Sunrise Glow theme">
+                <div class="theme-card__preview" aria-hidden="true">
+                  <div class="theme-card__swatches">
+                    <span class="theme-card__swatch"></span>
+                    <span class="theme-card__swatch"></span>
+                    <span class="theme-card__swatch"></span>
+                  </div>
+                </div>
+                <div class="theme-card__info">
+                  <div class="theme-card__name">Sunrise Glow</div>
+                  <div class="theme-card__description">Warm peach and coral palette with soft morning light.</div>
+                </div>
+                <div class="theme-card__badges">
+                  <span class="theme-card__badge">Animated</span>
+                </div>
+              </button>
+              <button type="button" class="theme-card" data-theme-id="midnight-forest" role="listitem" aria-label="Midnight Forest theme">
+                <div class="theme-card__preview" aria-hidden="true">
+                  <div class="theme-card__swatches">
+                    <span class="theme-card__swatch"></span>
+                    <span class="theme-card__swatch"></span>
+                    <span class="theme-card__swatch"></span>
+                  </div>
+                </div>
+                <div class="theme-card__info">
+                  <div class="theme-card__name">Midnight Forest</div>
+                  <div class="theme-card__description">Deep greens and teals with luminous accents for focus.</div>
+                </div>
+                <div class="theme-card__badges">
+                  <span class="theme-card__badge">High Contrast</span>
+                </div>
+              </button>
+              <button type="button" class="theme-card" data-theme-id="lunar-tide" role="listitem" aria-label="Lunar Tide theme">
+                <div class="theme-card__preview" aria-hidden="true">
+                  <div class="theme-card__swatches">
+                    <span class="theme-card__swatch"></span>
+                    <span class="theme-card__swatch"></span>
+                    <span class="theme-card__swatch"></span>
+                  </div>
+                </div>
+                <div class="theme-card__info">
+                  <div class="theme-card__name">Lunar Tide</div>
+                  <div class="theme-card__description">Noctilucent blues with aqua highlights for calm focus.</div>
+                </div>
+                <div class="theme-card__badges">
+                  <span class="theme-card__badge">High Contrast</span>
+                  <span class="theme-card__badge">Animated</span>
+                </div>
+              </button>
+              <button type="button" class="theme-card" data-theme-id="ember-noir" role="listitem" aria-label="Ember Noir theme">
+                <div class="theme-card__preview" aria-hidden="true">
+                  <div class="theme-card__swatches">
+                    <span class="theme-card__swatch"></span>
+                    <span class="theme-card__swatch"></span>
+                    <span class="theme-card__swatch"></span>
+                  </div>
+                </div>
+                <div class="theme-card__info">
+                  <div class="theme-card__name">Ember Noir</div>
+                  <div class="theme-card__description">Sleek charcoal base with ember-lit highlights.</div>
+                </div>
+                <div class="theme-card__badges">
+                  <span class="theme-card__badge">Animated</span>
+                </div>
+              </button>
+              <button type="button" class="theme-card" data-theme-id="blossom-dream" role="listitem" aria-label="Blossom Dream theme">
+                <div class="theme-card__preview" aria-hidden="true">
+                  <div class="theme-card__swatches">
+                    <span class="theme-card__swatch"></span>
+                    <span class="theme-card__swatch"></span>
+                    <span class="theme-card__swatch"></span>
+                  </div>
+                </div>
+                <div class="theme-card__info">
+                  <div class="theme-card__name">Blossom Dream</div>
+                  <div class="theme-card__description">Pastel bloom with gentle light for uplifting moments.</div>
+                </div>
+                <div class="theme-card__badges">
+                  <span class="theme-card__badge">Animated</span>
+                </div>
+              </button>
+              <button type="button" class="theme-card" data-theme-id="zen-slate" role="listitem" aria-label="Zen Slate theme">
+                <div class="theme-card__preview" aria-hidden="true">
+                  <div class="theme-card__swatches">
+                    <span class="theme-card__swatch"></span>
+                    <span class="theme-card__swatch"></span>
+                    <span class="theme-card__swatch"></span>
+                  </div>
+                </div>
+                <div class="theme-card__info">
+                  <div class="theme-card__name">Zen Slate</div>
+                  <div class="theme-card__description">Modern graphite palette with calm blue-green accents.</div>
+                </div>
+                <div class="theme-card__badges">
+                  <span class="theme-card__badge">High Contrast</span>
+                </div>
+              </button>
+            </div>
+            <div id="settings-background-options" class="background-options" role="list" aria-label="Background options">
+              <button type="button" class="background-option" data-background-id="" role="listitem" aria-label="Emma Adaptive background">
+                <div class="background-option__preview" aria-hidden="true"></div>
+                <div class="background-option__info">
+                  <div class="background-option__name">Emma Adaptive</div>
+                  <div class="background-option__description">Let each theme choose the perfect ambient motion.</div>
+                </div>
+              </button>
+              <button type="button" class="background-option" data-background-id="aurora" role="listitem" aria-label="Aurora Field background">
+                <div class="background-option__preview" aria-hidden="true"></div>
+                <div class="background-option__info">
+                  <div class="background-option__name">Aurora Field</div>
+                  <div class="background-option__description">Soft cosmic gradients with Emma's signature glow.</div>
+                </div>
+              </button>
+              <button type="button" class="background-option" data-background-id="sunrise" role="listitem" aria-label="Sunrise Veil background">
+                <div class="background-option__preview" aria-hidden="true"></div>
+                <div class="background-option__info">
+                  <div class="background-option__name">Sunrise Veil</div>
+                  <div class="background-option__description">Warm morning light with gentle amber motion.</div>
+                </div>
+              </button>
+              <button type="button" class="background-option" data-background-id="forest" role="listitem" aria-label="Forest Night background">
+                <div class="background-option__preview" aria-hidden="true"></div>
+                <div class="background-option__info">
+                  <div class="background-option__name">Forest Night</div>
+                  <div class="background-option__description">Luminous particles drifting through deep forest hues.</div>
+                </div>
+              </button>
+              <button type="button" class="background-option" data-background-id="ocean" role="listitem" aria-label="Lunar Tide background">
+                <div class="background-option__preview" aria-hidden="true"></div>
+                <div class="background-option__info">
+                  <div class="background-option__name">Lunar Tide</div>
+                  <div class="background-option__description">Slow aurora bands drifting over deep ocean blues.</div>
+                </div>
+              </button>
+              <button type="button" class="background-option" data-background-id="ember" role="listitem" aria-label="Ember Noir background">
+                <div class="background-option__preview" aria-hidden="true"></div>
+                <div class="background-option__info">
+                  <div class="background-option__name">Ember Noir</div>
+                  <div class="background-option__description">Amber sparks drifting across a noir twilight.</div>
+                </div>
+              </button>
+              <button type="button" class="background-option" data-background-id="blossom" role="listitem" aria-label="Blossom Veil background">
+                <div class="background-option__preview" aria-hidden="true"></div>
+                <div class="background-option__info">
+                  <div class="background-option__name">Blossom Veil</div>
+                  <div class="background-option__description">Soft petal diffraction floating across gentle light.</div>
+                </div>
+              </button>
+              <button type="button" class="background-option" data-background-id="zen" role="listitem" aria-label="Zen Slate background">
+                <div class="background-option__preview" aria-hidden="true"></div>
+                <div class="background-option__info">
+                  <div class="background-option__name">Zen Slate</div>
+                  <div class="background-option__description">Holographic mist gliding over graphite horizons.</div>
+                </div>
+              </button>
+            </div>
+          </div>
+        </section>
+
+        <!-- AI Configuration -->
+        <section id="section-ai" class="settings-section settings-section--ai" data-section-title="Intelligence">
+          <div class="settings-section__halo" aria-hidden="true"></div>
+          <div class="settings-section__header">
+            <span class="settings-section__glyph" aria-hidden="true">AI</span>
+            <div class="settings-section__headline">
+              <h2 class="section-title"><span class="section-title__icon" aria-hidden="true">AI</span> Artificial Intelligence</h2>
+              <p class="section-description">
+                Emma's AI works beautifully offline with intelligent heuristics. For even more advanced understanding and nuanced conversations, connect your OpenAI API key to unlock Emma's full potential.
+              </p>
+            </div>
+          </div>
 
-    <!-- Dementia Care & Accessibility -->
-    <div class="settings-section">
-      <h2 class="section-title">
-        ❤️ Dementia Care & Accessibility
-      </h2>
-      <p class="section-description">
-        Specialized features designed for users with memory impairment and their caregivers. Emma adapts to provide gentle, supportive interactions.
-      </p>
-      
-      <div class="setting-item">
-        <div class="setting-label">
-          <strong>Font Size</strong>
-          <span>Adjust text size throughout Emma for better readability. Larger fonts reduce eye strain and improve accessibility.</span>
-        </div>
-        <div class="font-size-controls">
-          <button id="decrease-font" class="font-btn" title="Decrease font size (Ctrl + -)">A⁻</button>
-          <span id="font-size-display" class="font-size-value">100%</span>
-          <button id="increase-font" class="font-btn" title="Increase font size (Ctrl + +)">A⁺</button>
-          <button id="reset-font" class="font-btn font-reset" title="Reset to default size (Ctrl + 0)">↺</button>
-        </div>
-      </div>
-      
-      <div class="setting-item">
-        <div class="setting-label">
-          <strong>Reduced Motion</strong>
-          <span>Minimize animations and transitions to reduce disorientation. Helpful for users sensitive to visual motion.</span>
-        </div>
-        <label class="toggle-switch">
-          <input type="checkbox" id="reduced-motion-toggle">
-          <span class="toggle-slider"></span>
-        </label>
-      </div>
-      
-      <div class="setting-item">
-        <div class="setting-label">
-          <strong>High Contrast Mode</strong>
-          <span>Increase color contrast for better visibility. Makes text and interface elements easier to distinguish.</span>
-        </div>
-        <label class="toggle-switch">
-          <input type="checkbox" id="high-contrast-toggle">
-          <span class="toggle-slider"></span>
-        </label>
-      </div>
-      
-      <div class="setting-item">
-        <div class="setting-label">
-          <strong>Gentle Reminders</strong>
-          <span>Emma uses encouraging language and avoids correcting or contradicting. Based on validation therapy principles.</span>
-        </div>
-        <div class="status-indicator">
-          <div class="status-dot active"></div>
-          <span>Always Enabled</span>
-        </div>
-      </div>
-      
-      <div class="setting-item">
-        <div class="setting-label">
-          <strong>Repetition Tolerance</strong>
-          <span>Emma patiently handles repeated questions without highlighting repetition. Maintains dignity and reduces anxiety.</span>
-        </div>
-        <div class="status-indicator">
-          <div class="status-dot active"></div>
-          <span>Always Enabled</span>
-        </div>
-      </div>
-      
-      <div class="setting-item">
-        <div class="setting-label">
-          <strong>Response Pacing</strong>
-          <span>Emma waits 2-3 seconds before responding to reduce pressure and allow processing time.</span>
-        </div>
-        <div class="status-indicator">
-          <div class="status-dot active"></div>
-          <span>Always Enabled</span>
-        </div>
-      </div>
-    </div>
+          <div class="settings-section__content settings-section__content--ai">
+            <div class="setting-item ai-setting">
+              <div class="setting-label">
+                <strong>OpenAI API Key</strong>
+                <span>Enable Emma's most advanced AI responses with your OpenAI API key. Emma works great offline with smart heuristics, but an API key unlocks deeper understanding and more nuanced conversations.</span>
+              </div>
+              <button 
+                id="api-key-setup-btn" 
+                type="button"
+                class="api-key-button emma-button emma-button--outline"
+              >
+                <span class="emma-button__pulse" aria-hidden="true"></span>
+                <span class="api-key-button__icon" aria-hidden="true">
+                  <svg viewBox="0 0 24 24" role="presentation" focusable="false" stroke-linecap="round" stroke-linejoin="round">
+                    <rect x="4" y="11" width="16" height="10" rx="2" ry="2" fill="none"></rect>
+                    <path d="M8 11V8a4 4 0 0 1 8 0v3" fill="none"></path>
+                  </svg>
+                </span>
+                <span id="api-key-status" class="api-key-button__label">Set Up API Key</span>
+              </button>
+            </div>
+
+            <div class="setting-item ai-setting">
+              <div class="setting-label">
+                <strong>Memory Detection</strong>
+                <span>Emma automatically recognizes when you're sharing meaningful memories and gently suggests saving them to your vault.</span>
+              </div>
+              <label class="toggle-switch">
+                <input type="checkbox" id="memory-detection-toggle" checked>
+                <span class="toggle-slider"></span>
+              </label>
+            </div>
+
+            <div class="setting-item ai-setting">
+              <div class="setting-label">
+                <strong>People Recognition</strong>
+                <span>Emma identifies names mentioned in conversations and connects them to people in your vault or suggests adding new ones.</span>
+              </div>
+              <label class="toggle-switch">
+                <input type="checkbox" id="people-recognition-toggle" checked>
+                <span class="toggle-slider"></span>
+              </label>
+            </div>
+
+            <div class="setting-item ai-setting ai-setting--status">
+              <div class="setting-label">
+                <strong>Vectorless AI Status</strong>
+                <span>Real-time status of Emma's intelligent memory processing system.</span>
+              </div>
+              <div class="status-indicator">
+                <div class="status-dot" id="ai-status-dot"></div>
+                <span id="ai-status-text">Initializing...</span>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <!-- Memory & Care -->
+        <section id="section-care" class="settings-section" data-section-title="Memory & Care">
+          <div class="settings-section__header">
+            <h2 class="section-title"><span class="section-title__icon" aria-hidden="true">MC</span> Memory &amp; Care</h2>
+            <p class="section-description">
+              Specialized features for memory preservation and dementia care support.
+            </p>
+          </div>
+          <div class="settings-section__content">
+            <div class="setting-item">
+              <div class="setting-label">
+                <strong>Dementia Care Mode</strong>
+                <span>Enables validation therapy principles and specialized responses for users with memory impairment. Designed with love for Debbe.</span>
+              </div>
+              <label class="toggle-switch">
+                <input type="checkbox" id="dementia-mode-toggle">
+                <span class="toggle-slider"></span>
+              </label>
+            </div>
+            
+            <div class="setting-item">
+              <div class="setting-label">
+                <strong>Memory Auto-Capture</strong>
+                <span>Automatically detect and suggest capturing meaningful moments during conversations.</span>
+              </div>
+              <label class="toggle-switch">
+                <input type="checkbox" id="auto-capture-toggle" checked>
+                <span class="toggle-slider"></span>
+              </label>
+            </div>
+          </div>
+        </section>
+
+        <!-- Privacy & Security -->
+        <section id="section-privacy" class="settings-section" data-section-title="Privacy & Security">
+          <div class="settings-section__header">
+            <h2 class="section-title"><span class="section-title__icon" aria-hidden="true">PS</span> Privacy &amp; Security</h2>
+            <p class="section-description">
+              Emma prioritizes your privacy with local-only processing and secure vault encryption.
+            </p>
+          </div>
+          <div class="settings-section__content">
+            <div class="setting-item">
+              <div class="setting-label">
+                <strong>Local Processing</strong>
+                <span>All memory analysis happens on your device. No data is sent to external servers.</span>
+              </div>
+              <div class="status-indicator">
+                <div class="status-dot active"></div>
+                <span>Always Enabled</span>
+              </div>
+            </div>
+            
+            <div class="setting-item">
+              <div class="setting-label">
+                <strong>Vault Encryption</strong>
+                <span>Your .emma files are protected with AES-256 encryption and PBKDF2 key derivation.</span>
+              </div>
+              <div class="status-indicator">
+                <div class="status-dot active"></div>
+                <span>Always Enabled</span>
+              </div>
+            </div>
+
+            <div class="setting-item">
+              <div class="setting-label">
+                <strong>Vault Auto-Save</strong>
+                <span>Automatically write updates to your .emma vault whenever memories or people change.</span>
+              </div>
+              <label class="toggle-switch">
+                <input type="checkbox" id="auto-save-toggle" checked>
+                <span class="toggle-slider"></span>
+              </label>
+            </div>
+          </div>
+        </section>
+
+        <!-- Dementia Care & Accessibility -->
+        <section id="section-accessibility" class="settings-section" data-section-title="Care & Accessibility">
+          <div class="settings-section__header">
+            <h2 class="section-title"><span class="section-title__icon" aria-hidden="true">CA</span> Dementia Care &amp; Accessibility</h2>
+            <p class="section-description">
+              Specialized features designed for users with memory impairment and their caregivers. Emma adapts to provide gentle, supportive interactions.
+            </p>
+          </div>
+          <div class="settings-section__content">
+            <div class="setting-item">
+              <div class="setting-label">
+                <strong>Font Size</strong>
+                <span>Adjust text size throughout Emma for better readability. Larger fonts reduce eye strain and improve accessibility.</span>
+              </div>
+              <div class="font-size-controls">
+                <button id="decrease-font" class="font-btn" title="Decrease font size (Ctrl + -)">A−</button>
+                <span id="font-size-display" class="font-size-value">100%</span>
+                <button id="increase-font" class="font-btn" title="Increase font size (Ctrl + +)">A+</button>
+                <button id="reset-font" class="font-btn font-reset" title="Reset to default size (Ctrl + 0)">Reset</button>
+              </div>
+            </div>
+            
+            <div class="setting-item">
+              <div class="setting-label">
+                <strong>Reduced Motion</strong>
+                <span>Minimize animations and transitions to reduce disorientation. Helpful for users sensitive to visual motion.</span>
+              </div>
+              <label class="toggle-switch">
+                <input type="checkbox" id="reduced-motion-toggle">
+                <span class="toggle-slider"></span>
+              </label>
+            </div>
+            
+            <div class="setting-item">
+              <div class="setting-label">
+                <strong>High Contrast Mode</strong>
+                <span>Increase color contrast for better visibility. Makes text and interface elements easier to distinguish.</span>
+              </div>
+              <label class="toggle-switch">
+                <input type="checkbox" id="high-contrast-toggle">
+                <span class="toggle-slider"></span>
+              </label>
+            </div>
+            
+            <div class="setting-item">
+              <div class="setting-label">
+                <strong>Gentle Reminders</strong>
+                <span>Emma uses encouraging language and avoids correcting or contradicting. Based on validation therapy principles.</span>
+              </div>
+              <div class="status-indicator">
+                <div class="status-dot active"></div>
+                <span>Always Enabled</span>
+              </div>
+            </div>
+            
+            <div class="setting-item">
+              <div class="setting-label">
+                <strong>Repetition Tolerance</strong>
+                <span>Emma patiently handles repeated questions without highlighting repetition. Maintains dignity and reduces anxiety.</span>
+              </div>
+              <div class="status-indicator">
+                <div class="status-dot active"></div>
+                <span>Always Enabled</span>
+              </div>
+            </div>
+            
+            <div class="setting-item">
+              <div class="setting-label">
+                <strong>Response Pacing</strong>
+                <span>Emma waits 2-3 seconds before responding to reduce pressure and allow processing time.</span>
+              </div>
+              <div class="status-indicator">
+                <div class="status-dot active"></div>
+                <span>Always Enabled</span>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <!-- System Information -->
+        <section id="section-system" class="settings-section" data-section-title="System Information">
+          <div class="settings-section__header">
+            <h2 class="section-title"><span class="section-title__icon" aria-hidden="true">SI</span> System Information</h2>
+            <p class="section-description">
+              Basic system information and compatibility status.
+            </p>
+          </div>
+          <div class="settings-section__content">
+            <div class="setting-item">
+              <div class="setting-label">
+                <strong>Emma Version</strong>
+                <span>Current version of Emma and compatibility information.</span>
+              </div>
+              <div class="status-indicator">
+                <div class="status-dot active"></div>
+                <span>v1.0 Beta</span>
+              </div>
+            </div>
+          </div>
+        </section>
 
-    <!-- System Information -->
-    <div class="settings-section">
-      <h2 class="section-title">
-        ℹ️ System Information
-      </h2>
-      <p class="section-description">
-        Basic system information and compatibility status.
-      </p>
-      
-      <div class="setting-item">
-        <div class="setting-label">
-          <strong>Emma Version</strong>
-          <span>Current version of Emma and compatibility information.</span>
-        </div>
-        <div class="status-indicator">
-          <div class="status-dot active"></div>
-          <span>v1.0 Beta</span>
+        <div class="settings-actions">
+          <button class="save-button emma-button emma-button--primary" type="button" id="save-all-settings">
+            Save All Settings
+          </button>
         </div>
-      </div>
+      </main>
     </div>
-
-    <!-- Save Button -->
-    <button class="save-button" id="save-all-settings">
-      ✨ Save All Settings
-    </button>
   </div>
 
-  <script>
+  <script nonce="c3RhdGljLWlubGluZQ==">
     /**
      * Emma Settings Manager
      * Clean, modern settings interface with Emma branding
@@ -829,10 +1689,14 @@ <h2 class="section-title">
       constructor() {
         this.settings = {};
         this.loadSettings();
+        if (typeof this.settings.autoSaveEnabled !== 'boolean') {
+          this.settings.autoSaveEnabled = this.getAutoSavePreference();
+        }
+        this.applyAutoSavePreference(this.settings.autoSaveEnabled !== false);
         this.setupEventListeners();
         this.updateUI();
         
-        console.log('⚙️ Emma Settings Manager initialized');
+        console.log('[Settings] Emma Settings Manager initialized');
       }
       
       loadSettings() {
@@ -845,31 +1709,79 @@ <h2 class="section-title">
             peopleRecognition: true,
             fontSize: 100,
             reducedMotion: false,
-            highContrast: false
+            highContrast: false,
+            autoSaveEnabled: true
           };
           
-          console.log('⚙️ Settings loaded:', this.settings);
+          console.log('[Settings] Settings loaded:', this.settings);
         } catch (error) {
-          console.error('⚙️ Failed to load settings:', error);
+          console.error('[Settings] Failed to load settings:', error);
           this.settings = {
             apiKey: '',
             memoryDetection: true,
             peopleRecognition: true,
             fontSize: 100,
             reducedMotion: false,
-            highContrast: false
+            highContrast: false,
+            autoSaveEnabled: true
           };
         }
       }
-      
+
+      getAutoSavePreference() {
+        try {
+          const stored = localStorage.getItem('emmaVaultAutoSaveEnabled');
+          if (stored === 'false') {
+            return false;
+          }
+          if (stored === 'true') {
+            return true;
+          }
+
+          if (stored === null) {
+            localStorage.setItem('emmaVaultAutoSaveEnabled', 'true');
+            return true;
+          }
+        } catch (error) {
+          console.warn('[Settings] Unable to read auto-save preference:', error);
+        }
+        return true;
+      }
+
+      applyAutoSavePreference(enabled) {
+        const value = enabled ? 'true' : 'false';
+        try {
+          localStorage.setItem('emmaVaultAutoSaveEnabled', value);
+        } catch (error) {
+          console.warn('[Settings] Unable to persist auto-save preference:', error);
+        }
+
+        if (window.emmaWebVault) {
+          if (typeof window.emmaWebVault.setAutoSaveEnabled === 'function') {
+            window.emmaWebVault.setAutoSaveEnabled(enabled);
+          } else {
+            window.emmaWebVault.autoSaveEnabled = enabled;
+          }
+        }
+
+        if (window.emmaVaultPrimary) {
+          if (typeof window.emmaVaultPrimary.setAutoSaveEnabled === 'function') {
+            window.emmaVaultPrimary.setAutoSaveEnabled(enabled);
+          } else {
+            window.emmaVaultPrimary.autoSaveEnabled = enabled;
+          }
+        }
+      }
+
       saveSettings() {
         try {
           localStorage.setItem('emmaSettings', JSON.stringify(this.settings));
-          console.log('⚙️ Settings saved:', this.settings);
-          this.showToast('✅ Settings saved successfully!', 'success');
+          this.applyAutoSavePreference(this.settings.autoSaveEnabled !== false);
+          console.log('[Settings] Settings saved:', this.settings);
+          this.showToast('Settings saved successfully!', 'success');
         } catch (error) {
-          console.error('⚙️ Failed to save settings:', error);
-          this.showToast('❌ Failed to save settings', 'error');
+          console.error('[Settings] Failed to save settings:', error);
+          this.showToast('Failed to save settings', 'error');
         }
       }
       
@@ -882,11 +1794,13 @@ <h2 class="section-title">
         const peopleToggle = document.getElementById('people-recognition-toggle');
         const reducedMotionToggle = document.getElementById('reduced-motion-toggle');
         const highContrastToggle = document.getElementById('high-contrast-toggle');
+        const autoSaveToggle = document.getElementById('auto-save-toggle');
         
         if (memoryToggle) memoryToggle.checked = this.settings.memoryDetection !== false;
         if (peopleToggle) peopleToggle.checked = this.settings.peopleRecognition !== false;
         if (reducedMotionToggle) reducedMotionToggle.checked = this.settings.reducedMotion || false;
         if (highContrastToggle) highContrastToggle.checked = this.settings.highContrast || false;
+        if (autoSaveToggle) autoSaveToggle.checked = this.settings.autoSaveEnabled !== false;
         
         // Update font size
         this.updateFontSize();
@@ -929,6 +1843,7 @@ <h2 class="section-title">
         const peopleToggle = document.getElementById('people-recognition-toggle');
         const reducedMotionToggle = document.getElementById('reduced-motion-toggle');
         const highContrastToggle = document.getElementById('high-contrast-toggle');
+        const autoSaveToggle = document.getElementById('auto-save-toggle');
         
         if (memoryToggle) {
           memoryToggle.addEventListener('change', (e) => {
@@ -955,7 +1870,15 @@ <h2 class="section-title">
             this.applyAccessibilitySettings();
           });
         }
-        
+
+        if (autoSaveToggle) {
+          autoSaveToggle.addEventListener('change', (e) => {
+            const enabled = e.target.checked;
+            this.settings.autoSaveEnabled = enabled;
+            this.applyAutoSavePreference(enabled);
+          });
+        }
+
         // Font size controls
         const decreaseFont = document.getElementById('decrease-font');
         const increaseFont = document.getElementById('increase-font');
@@ -1088,11 +2011,20 @@ <h2 class="section-title">
 
       updateAPIKeyButton() {
         const statusSpan = document.getElementById('api-key-status');
+        const apiKeyButton = document.getElementById('api-key-setup-btn');
+        const iconSpan = apiKeyButton ? apiKeyButton.querySelector('.api-key-button__icon') : null;
         if (statusSpan) {
-          if (this.settings.apiKey && this.settings.apiKey.startsWith('sk-')) {
-            statusSpan.textContent = '✅ API Key Connected';
-          } else {
-            statusSpan.textContent = '🔑 Setup API Key';
+          const hasKey = this.settings.apiKey && this.settings.apiKey.startsWith('sk-');
+          statusSpan.textContent = hasKey ? 'API Key Connected' : 'Set Up API Key';
+          if (apiKeyButton) {
+            if (hasKey) {
+              apiKeyButton.dataset.state = 'connected';
+            } else {
+              delete apiKeyButton.dataset.state;
+            }
+          }
+          if (iconSpan) {
+            iconSpan.classList.toggle('api-key-button__icon--active', !!hasKey);
           }
         }
       }
@@ -1181,7 +2113,7 @@ <h2 class="section-title">
           
           // Basic validation
           if (apiKey && !apiKey.startsWith('sk-')) {
-            this.showToast('⚠️ API key should start with "sk-"', 'warning');
+            this.showToast('Note: API keys should start with "sk-" or "sk-proj-"', 'warning');
             return;
           }
 
@@ -1192,7 +2124,7 @@ <h2 class="section-title">
           this.closeAPIKeyModal();
           
           if (apiKey) {
-            this.showToast('🔑 API key saved successfully!', 'success');
+            this.showToast('API key saved successfully!', 'success');
           } else {
             this.showToast('API key removed', 'info');
           }
@@ -1211,6 +2143,59 @@ <h2 class="section-title">
     // Initialize when DOM is ready
     document.addEventListener('DOMContentLoaded', () => {
       window.emmaSettingsManager = new EmmaSettingsManager();
+
+      if (window.EmmaThemeUI) {
+        window.EmmaThemeUI.init({
+          themeContainerId: 'settings-theme-gallery',
+          backgroundContainerId: 'settings-background-options'
+        });
+      }
+
+      const navItems = Array.from(document.querySelectorAll('.settings-nav__item'));
+      const sections = Array.from(document.querySelectorAll('.settings-section'));
+
+      const setActiveNav = (targetSelector) => {
+        navItems.forEach((item) => {
+          if (item.dataset.target === targetSelector) {
+            item.classList.add('is-active');
+            item.setAttribute('aria-current', 'true');
+          } else {
+            item.classList.remove('is-active');
+            item.removeAttribute('aria-current');
+          }
+        });
+      };
+
+      navItems.forEach((btn) => {
+        const targetSelector = btn.dataset.target;
+        const section = document.querySelector(targetSelector);
+        if (!section) return;
+
+        btn.addEventListener('click', () => {
+          section.scrollIntoView({ behavior: 'smooth', block: 'start' });
+          setActiveNav(targetSelector);
+        });
+      });
+
+      setActiveNav('#section-visual');
+
+      if ('IntersectionObserver' in window) {
+        const observer = new IntersectionObserver(
+          (entries) => {
+            entries.forEach((entry) => {
+              if (entry.isIntersecting) {
+                setActiveNav(`#${entry.target.id}`);
+              }
+            });
+          },
+          {
+            rootMargin: '-45% 0px -45% 0px',
+            threshold: 0.2
+          }
+        );
+
+        sections.forEach((section) => observer.observe(section));
+      }
     });
   </script>
 
@@ -1219,7 +2204,7 @@ <h2 class="section-title">
     <div class="api-modal-overlay"></div>
     <div class="api-modal-content">
       <div class="api-modal-header">
-        <h3>🔑 OpenAI API Key Setup</h3>
+        <h3>OpenAI API Key Setup</h3>
         <button class="api-modal-close">&times;</button>
       </div>
       
@@ -1238,7 +2223,7 @@ <h3>🔑 OpenAI API Key Setup</h3>
             rows="3"
           ></textarea>
           <div class="api-key-hint">
-            💡 Your API key should start with "sk-proj-" or "sk-"
+            Note: Your API key should start with "sk-proj-" or "sk-"
           </div>
         </div>
         
@@ -1251,5 +2236,17 @@ <h3>🔑 OpenAI API Key Setup</h3>
     </div>
   </div>
 
+  <button class="settings-exit-fab" type="button" onclick="window.location.href='../dashboard.html'" aria-label="Back to dashboard">
+    <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M5 12h14M12 5l7 7-7 7" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
+  </button>
+
 </body>
 </html>
+
+
+
+
+
+
+
+
diff --git a/pages/gallery.html b/pages/gallery.html
index dcaf805d..016ffda1 100644
--- a/pages/gallery.html
+++ b/pages/gallery.html
@@ -15,11 +15,11 @@
   <style>
     /* Emma Brand Variables */
     :root {
-      --emma-gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
+      --emma-gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #deb3e4 100%);
       --emma-gradient-2: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #a855f7 100%);
       --emma-bg-gradient: linear-gradient(135deg, #1a1033 0%, #2d1b69 50%, #0f0c29 100%);
       --emma-purple: #764ba2;
-      --emma-pink: #f093fb;
+      --emma-pink: #deb3e4;
       --emma-dark: #1a1033;
       --emma-card-bg: rgba(255, 255, 255, 0.05);
       --emma-border: rgba(255, 255, 255, 0.1);
@@ -55,7 +55,7 @@
       width: 200%;
       height: 200%;
       background: radial-gradient(circle at 20% 20%, rgba(102, 126, 234, 0.3) 0%, transparent 50%),
-                  radial-gradient(circle at 80% 80%, rgba(240, 147, 251, 0.3) 0%, transparent 50%),
+                  radial-gradient(circle at 80% 80%, rgba(222, 179, 228, 0.3) 0%, transparent 50%),
                   radial-gradient(circle at 40% 60%, rgba(118, 75, 162, 0.2) 0%, transparent 50%);
       animation: float 20s ease-in-out infinite;
       z-index: -1;
@@ -75,7 +75,7 @@
     .gallery-title {
       font-size: 3.5rem;
       font-weight: 300;
-      background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 50%, #06b6d4 100%);
+      background: linear-gradient(135deg, #6f63d9 0%, #d06fa8 50%, #06b6d4 100%);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
@@ -274,8 +274,8 @@
       height: 100%;
       background: linear-gradient(
         135deg,
-        rgba(139, 92, 246, 0.25) 0%,
-        rgba(236, 72, 153, 0.20) 50%,
+        rgba(111, 99, 217, 0.25) 0%,
+        rgba(208, 111, 168, 0.20) 50%,
         rgba(6, 182, 212, 0.25) 100%
       );
       mix-blend-mode: soft-light;
@@ -295,7 +295,7 @@
       left: 0;
       right: 0;
       bottom: 0;
-      background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(236, 72, 153, 0.1) 100%);
+      background: linear-gradient(135deg, rgba(111, 99, 217, 0.1) 0%, rgba(208, 111, 168, 0.1) 100%);
       opacity: 0;
       transition: opacity 0.3s ease;
       border-radius: 20px;
@@ -307,10 +307,10 @@
 
     .memory-card:hover {
       transform: translateY(-8px) scale(1.02);
-      border-color: rgba(139, 92, 246, 0.3);
+      border-color: rgba(111, 99, 217, 0.3);
       box-shadow:
-        0 20px 40px rgba(139, 92, 246, 0.2),
-        0 0 0 1px rgba(139, 92, 246, 0.1);
+        0 20px 40px rgba(111, 99, 217, 0.2),
+        0 0 0 1px rgba(111, 99, 217, 0.1);
     }
 
     /* Memory Card Layout - Photo-focused with full coverage */
@@ -386,7 +386,7 @@
       border: 2px solid rgba(255, 255, 255, 0.8);
       overflow: hidden;
       position: relative;
-      background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
+      background: linear-gradient(135deg, #6f63d9 0%, #d06fa8 100%);
       display: flex;
       align-items: center;
       justify-content: center;
@@ -461,8 +461,8 @@
     }
 
     .memory-tag:hover {
-      background: rgba(139, 92, 246, 0.4);
-      border-color: rgba(139, 92, 246, 0.6);
+      background: rgba(111, 99, 217, 0.4);
+      border-color: rgba(111, 99, 217, 0.6);
       transform: translateY(-1px);
     }
 
@@ -514,7 +514,7 @@
     }
 
     .empty-state-card:hover {
-      border-color: rgba(240, 147, 251, 0.4);
+      border-color: rgba(222, 179, 228, 0.4);
       background: rgba(255,255,255,0.08);
     }
 
@@ -533,7 +533,7 @@
 
     .empty-cta-box:hover {
       background: rgba(255,255,255,0.15);
-      border-color: rgba(240, 147, 251, 0.3);
+      border-color: rgba(222, 179, 228, 0.3);
     }
 
     .empty-cta-icon {
@@ -655,8 +655,8 @@
       padding: 24px;
       margin: 20px auto;
       max-width: 600px;
-      background: rgba(240, 147, 251, 0.1);
-      border: 1px solid rgba(240, 147, 251, 0.3);
+      background: rgba(222, 179, 228, 0.1);
+      border: 1px solid rgba(222, 179, 228, 0.3);
       border-radius: 16px;
       color: var(--emma-text-secondary);
       font-style: italic;
@@ -727,22 +727,22 @@ <h1 class="gallery-title">emma</h1>
 
   <!-- Emma Orb System -->
   <!-- CRITICAL: Load vault system for memory saving -->
-  <script src="../js/emma-input-modal.js"></script>
-  <script src="../js/clean-password-modal.js"></script>
-  <script src="../js/emma-web-vault.js?v=2025-01-16"></script>
-  <script src="../js/web-vault-status.js?v=2025-01-16"></script>
-  <script src="../js/vault-control-panel.js?v=2025-01-16"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/emma-input-modal.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/clean-password-modal.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/emma-web-vault.js?v=2025-01-16"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/web-vault-status.js?v=2025-01-16"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/vault-control-panel.js?v=2025-01-16"></script>
   
   <!-- Emma orb system - only load what's needed for chat -->
-  <script src="../js/settings-service.js"></script> 
-  <script src="../js/orb-experience-manager.js"></script>
-  <script src="../js/experience-popup-base.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/settings-service.js"></script> 
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/orb-experience-manager.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/experience-popup-base.js"></script>
   
   <!-- Modern Emma Chat Experience (replaces old wizard) -->
-  <script src="../js/emma-chat-experience.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/emma-chat-experience.js"></script>
   
   <!-- Initialize Universal Orb -->
-  <script>
+  <script nonce="c3RhdGljLWlubGluZQ==">
     if (document.readyState === 'loading') {
       document.addEventListener('DOMContentLoaded', () => {
         // CRITICAL: Initialize vault system for memory saving
@@ -869,16 +869,16 @@ <h1 class="gallery-title">emma</h1>
   </script>
 
   <!-- Universal Vault Modal -->
-  <script src="../js/universal-vault-modal.js?v=2025-01-16"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/universal-vault-modal.js?v=2025-01-16"></script>
   
   <!-- Memory Detail Modal -->
-  <script src="../js/memory-detail-modal-clean.js?v=1755909423&t=2025-01-16&cb=force"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/memory-detail-modal-clean.js?v=1755909423&t=2025-01-16&cb=force"></script>
   
   <!-- Gallery Script -->
-  <script src="../js/gallery.js?v=1755909423&t=2025-01-16&cb=force"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/gallery.js?v=1755909423&t=2025-01-16&cb=force"></script>
   
   <!-- Anti-Reload Protection Script -->
-  <script>
+  <script nonce="c3RhdGljLWlubGluZQ==">
     // CRITICAL: Prevent unwanted reloads for 5 seconds after page load
     const originalReload = window.location.reload;
     let reloadBlocked = true;
diff --git a/pages/memories.html b/pages/memories.html
index 795f3b90..489f1d33 100644
--- a/pages/memories.html
+++ b/pages/memories.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' data:; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline'; connect-src 'self';">
+  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' data:; style-src 'self' 'unsafe-inline'; script-src 'self' 'nonce-static-inline'; connect-src 'self';">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Memory Capsules - Emma</title>
   <link rel="stylesheet" href="../css/z-index-hierarchy.css">
@@ -121,23 +121,23 @@ <h3 class="empty-title">No memories found</h3>
   </button>
 
   <!-- HML Sync Initialization (CSP-compliant) -->
-  <script src="../js/modal-manager.js"></script>
-  <script type="module" src="../js/memories-hml-init.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/modal-manager.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" type="module" src="../js/memories-hml-init.js"></script>
 
   <!-- Core Orb System -->
   <!-- Universal Emma Orb System - Direct Loading for Extension Pages -->
-  <script src="../js/emma-orb.js"></script>
-  <script src="../js/settings-service.js"></script>
-  <script src="../js/orb-experience-manager.js"></script>
-  <script src="../js/experience-popup-base.js?v=20250814115222"></script>
-  <script src="../js/emma-chat-experience.js"></script>
-  <script src="../js/assistant-experience-popup.js"></script>
-  <script src="../js/dementia-experience-popup.js"></script>
-  <script src="../js/mirror-experience-popup.js"></script>
-  <script src="../js/universal-emma-orb.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/emma-orb.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/settings-service.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/orb-experience-manager.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/experience-popup-base.js?v=20250814115222"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/emma-chat-experience.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/assistant-experience-popup.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/dementia-experience-popup.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/mirror-experience-popup.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/universal-emma-orb.js"></script>
 
   <!-- Initialize Universal Orb for Extension Page -->
-  <script>
+  <script nonce="c3RhdGljLWlubGluZQ==">
     if (document.readyState === 'loading') {
       document.addEventListener('DOMContentLoaded', () => {
         setTimeout(() => window.UniversalEmmaOrb.initialize(), 100);
@@ -148,19 +148,19 @@ <h3 class="empty-title">No memories found</h3>
   </script>
 
   <!-- Load VaultGuardian first -->
-  <script type="module">
+  <script nonce="c3RhdGljLWlubGluZQ==" type="module">
     import VaultGuardian from '../lib/vault-guardian.js';
     window.VaultGuardian = VaultGuardian;
     await VaultGuardian.initialize();
 
   </script>
 
-  <script src="../js/memories.js?v=20250814115553"
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/memories.js?v=20250814115553"
           onload="console.log('🔥 SCRIPT LOADED: memories.js loaded successfully')"
           onerror="console.error('🚨 SCRIPT ERROR: Failed to load memories.js')"></script>
 
   <!-- Home Navigation Script -->
-  <script>
+  <script nonce="c3RhdGljLWlubGluZQ==">
     document.addEventListener('DOMContentLoaded', () => {
 
       const homeBtn = document.getElementById('home-nav-button');
@@ -169,7 +169,7 @@ <h3 class="empty-title">No memories found</h3>
         homeBtn.addEventListener('click', () => {
 
           // Navigate back to the HTML dashboard
-          window.location.href = 'dashboard-new.html';
+          window.location.href = '../dashboard.html';
         });
 
       } else {
@@ -179,4 +179,4 @@ <h3 class="empty-title">No memories found</h3>
   </script>
 
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/pages/memory-gallery-new.html b/pages/memory-gallery-new.html
index 3d7be41e..373a9268 100644
--- a/pages/memory-gallery-new.html
+++ b/pages/memory-gallery-new.html
@@ -12,11 +12,11 @@
   <style>
     /* Emma Brand Variables */
     :root {
-      --emma-gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
+      --emma-gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #deb3e4 100%);
       --emma-gradient-2: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #a855f7 100%);
       --emma-bg-gradient: linear-gradient(135deg, #1a1033 0%, #2d1b69 50%, #0f0c29 100%);
       --emma-purple: #764ba2;
-      --emma-pink: #f093fb;
+      --emma-pink: #deb3e4;
       --emma-dark: #1a1033;
       --emma-card-bg: rgba(255, 255, 255, 0.05);
       --emma-border: rgba(255, 255, 255, 0.1);
@@ -52,7 +52,7 @@
       width: 200%;
       height: 200%;
       background: radial-gradient(circle at 20% 20%, rgba(102, 126, 234, 0.3) 0%, transparent 50%),
-                  radial-gradient(circle at 80% 80%, rgba(240, 147, 251, 0.3) 0%, transparent 50%),
+                  radial-gradient(circle at 80% 80%, rgba(222, 179, 228, 0.3) 0%, transparent 50%),
                   radial-gradient(circle at 40% 60%, rgba(118, 75, 162, 0.2) 0%, transparent 50%);
       animation: float 20s ease-in-out infinite;
       z-index: -1;
@@ -72,7 +72,7 @@
     .gallery-title {
       font-size: 3.5rem;
       font-weight: 300;
-      background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 50%, #06b6d4 100%);
+      background: linear-gradient(135deg, #6f63d9 0%, #d06fa8 50%, #06b6d4 100%);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
@@ -271,8 +271,8 @@
       height: 100%;
       background: linear-gradient(
         135deg,
-        rgba(139, 92, 246, 0.25) 0%,
-        rgba(236, 72, 153, 0.20) 50%,
+        rgba(111, 99, 217, 0.25) 0%,
+        rgba(208, 111, 168, 0.20) 50%,
         rgba(6, 182, 212, 0.25) 100%
       );
       mix-blend-mode: soft-light;
@@ -292,7 +292,7 @@
       left: 0;
       right: 0;
       bottom: 0;
-      background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(236, 72, 153, 0.1) 100%);
+      background: linear-gradient(135deg, rgba(111, 99, 217, 0.1) 0%, rgba(208, 111, 168, 0.1) 100%);
       opacity: 0;
       transition: opacity 0.3s ease;
       border-radius: 20px;
@@ -304,10 +304,10 @@
 
     .memory-card:hover {
       transform: translateY(-8px) scale(1.02);
-      border-color: rgba(139, 92, 246, 0.3);
+      border-color: rgba(111, 99, 217, 0.3);
       box-shadow:
-        0 20px 40px rgba(139, 92, 246, 0.2),
-        0 0 0 1px rgba(139, 92, 246, 0.1);
+        0 20px 40px rgba(111, 99, 217, 0.2),
+        0 0 0 1px rgba(111, 99, 217, 0.1);
     }
 
     /* Memory Card Layout - Photo-focused with full coverage */
@@ -349,7 +349,7 @@
       border: 2px solid rgba(255, 255, 255, 0.8);
       overflow: hidden;
       position: relative;
-      background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
+      background: linear-gradient(135deg, #6f63d9 0%, #d06fa8 100%);
       display: flex;
       align-items: center;
       justify-content: center;
@@ -424,8 +424,8 @@
     }
 
     .memory-tag:hover {
-      background: rgba(139, 92, 246, 0.4);
-      border-color: rgba(139, 92, 246, 0.6);
+      background: rgba(111, 99, 217, 0.4);
+      border-color: rgba(111, 99, 217, 0.6);
       transform: translateY(-1px);
     }
 
@@ -477,7 +477,7 @@
     }
 
     .empty-state-card:hover {
-      border-color: rgba(240, 147, 251, 0.4);
+      border-color: rgba(222, 179, 228, 0.4);
       background: rgba(255,255,255,0.08);
     }
 
@@ -496,7 +496,7 @@
 
     .empty-cta-box:hover {
       background: rgba(255,255,255,0.15);
-      border-color: rgba(240, 147, 251, 0.3);
+      border-color: rgba(222, 179, 228, 0.3);
     }
 
     .empty-cta-icon {
@@ -618,8 +618,8 @@
       padding: 24px;
       margin: 20px auto;
       max-width: 600px;
-      background: rgba(240, 147, 251, 0.1);
-      border: 1px solid rgba(240, 147, 251, 0.3);
+      background: rgba(222, 179, 228, 0.1);
+      border: 1px solid rgba(222, 179, 228, 0.3);
       border-radius: 16px;
       color: var(--emma-text-secondary);
       font-style: italic;
@@ -690,33 +690,33 @@ <h1 class="gallery-title">emma</h1>
 
   <!-- Emma Orb System -->
   <!-- CRITICAL: Load vault system for memory saving -->
-  <script src="../js/emma-input-modal.js"></script>
-  <script src="../js/clean-password-modal.js"></script>
-  <script src="../js/emma-web-vault.js"></script>
-  <script src="../js/web-vault-status.js"></script>
-  <script src="../js/vault-control-panel.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/emma-input-modal.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/clean-password-modal.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/emma-web-vault.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/web-vault-status.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/vault-control-panel.js"></script>
   
-  <script src="../js/emma-orb.js"></script>
-  <script src="../js/settings-service.js"></script> 
-  <script src="../js/orb-experience-manager.js"></script>
-  <script src="../js/experience-popup-base.js"></script>
-  <script src="../js/assistant-experience-popup.js"></script>
-  <script src="../js/dementia-experience-popup.js"></script>
-  <script src="../js/mirror-experience-popup.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/emma-orb.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/settings-service.js"></script> 
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/orb-experience-manager.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/experience-popup-base.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/assistant-experience-popup.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/dementia-experience-popup.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/mirror-experience-popup.js"></script>
   
   <!-- CTO Enhancement: Unified Memory Wizard -->
   <link rel="stylesheet" href="../css/unified-memory-wizard.css">
   
   <!-- CTO Intelligence Layer: Memory Context & Question Engine -->
-  <script src="../js/memory-context-analyzer.js"></script>
-  <script src="../js/emma-question-engine.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/memory-context-analyzer.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/emma-question-engine.js"></script>
   
-  <script src="../js/unified-memory-wizard.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/unified-memory-wizard.js"></script>
   
-  <script src="../js/universal-emma-orb.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/universal-emma-orb.js"></script>
   
   <!-- Initialize Universal Orb -->
-  <script>
+  <script nonce="c3RhdGljLWlubGluZQ==">
     if (document.readyState === 'loading') {
       document.addEventListener('DOMContentLoaded', () => {
         // CRITICAL: Initialize vault system for memory saving
@@ -820,13 +820,13 @@ <h1 class="gallery-title">emma</h1>
   </script>
 
   <!-- Universal Vault Modal -->
-  <script src="../js/universal-vault-modal.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/universal-vault-modal.js"></script>
   
   <!-- Gallery Script -->
-  <script src="../js/gallery.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/gallery.js"></script>
   
   <!-- Home Navigation Script -->
-  <script>
+  <script nonce="c3RhdGljLWlubGluZQ==">
     document.addEventListener('DOMContentLoaded', () => {
       console.log('🏠 HOME NAV: Setting up home button...');
       const homeBtn = document.getElementById('home-nav-button');
diff --git a/pages/options.html b/pages/options.html
index b72e3a3d..f382672d 100644
--- a/pages/options.html
+++ b/pages/options.html
@@ -1,9 +1,10 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Settings - Emma</title>
+  <link rel="stylesheet" href="../css/theme-tokens.css">
   <link rel="stylesheet" href="../css/main.css">
   <style>
     .settings-container {
@@ -37,7 +38,157 @@
     .setting-item:last-child {
       border-bottom: none;
     }
-    
+
+    /* Theme gallery */
+    .theme-gallery {
+      display: grid;
+      gap: 16px;
+      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+      margin-top: 16px;
+    }
+
+    .theme-card {
+      position: relative;
+      border: 1px solid var(--emma-button-secondary-border);
+      border-radius: 16px;
+      padding: 16px;
+      background: var(--emma-card-bg);
+      color: var(--emma-text-standard);
+      cursor: pointer;
+      transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      min-height: 140px;
+    }
+
+    .theme-card:hover {
+      transform: translateY(-4px);
+      box-shadow: var(--emma-shadow-raised);
+    }
+
+    .theme-card--active {
+      border-color: var(--emma-accent-primary);
+      box-shadow: 0 12px 32px rgba(var(--emma-accent-primary-rgb), 0.35);
+    }
+
+    .theme-card__preview {
+      height: 72px;
+      border-radius: 12px;
+      background: var(--emma-gradient-primary);
+      position: relative;
+      overflow: hidden;
+    }
+
+    .theme-card__swatches {
+      position: absolute;
+      bottom: 12px;
+      left: 12px;
+      display: flex;
+      gap: 8px;
+    }
+
+    .theme-card__swatch {
+      width: 28px;
+      height: 28px;
+      border-radius: 8px;
+      border: 2px solid rgba(0, 0, 0, 0.12);
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+    }
+
+    .theme-card__info {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+
+    .theme-card__name {
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--emma-text-strong);
+    }
+
+    .theme-card__description {
+      font-size: 13px;
+      color: var(--emma-text-muted);
+      line-height: 1.5;
+    }
+
+    .theme-card__badges {
+      display: flex;
+      gap: 8px;
+      flex-wrap: wrap;
+      margin-top: auto;
+    }
+
+    .theme-card__badge {
+      font-size: 11px;
+      padding: 4px 8px;
+      border-radius: 999px;
+      background: rgba(var(--emma-accent-primary-rgb), 0.15);
+      color: var(--emma-accent-primary);
+      font-weight: 600;
+    }
+
+    .background-options {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 12px;
+      margin-top: 20px;
+    }
+
+    .background-option {
+      flex: 1 1 140px;
+      min-width: 140px;
+      border: 1px solid var(--emma-button-secondary-border);
+      border-radius: 12px;
+      padding: 12px;
+      background: var(--emma-card-bg);
+      color: var(--emma-text-standard);
+      cursor: pointer;
+      transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+
+    .background-option:hover {
+      transform: translateY(-2px);
+      border-color: var(--emma-accent-primary);
+      box-shadow: var(--emma-shadow-raised);
+    }
+
+    .background-option--active {
+      border-color: var(--emma-accent-primary);
+      box-shadow: 0 12px 28px rgba(var(--emma-accent-primary-rgb), 0.3);
+    }
+
+    .background-option__preview {
+      width: 40px;
+      height: 40px;
+      border-radius: 10px;
+      background: var(--emma-gradient-primary);
+      flex-shrink: 0;
+    }
+
+    .background-option__info {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    .background-option__name {
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--emma-text-strong);
+    }
+
+    .background-option__description {
+      font-size: 12px;
+      color: var(--emma-text-muted);
+      line-height: 1.4;
+    }
+
     .setting-label {
       flex: 1;
     }
@@ -178,7 +329,7 @@
     
     /* MTAP Section */
     .mtap-status {
-      background: linear-gradient(135deg, rgba(240, 147, 251, 0.1) 0%, rgba(102, 126, 234, 0.1) 100%);
+      background: linear-gradient(135deg, rgba(222, 179, 228, 0.1) 0%, rgba(102, 126, 234, 0.1) 100%);
       border: 1px solid rgba(118, 75, 162, 0.3);
       border-radius: 12px;
       padding: 20px;
@@ -971,7 +1122,7 @@
       align-items: center;
       gap: 16px;
       padding: 32px;
-      background: rgba(139, 92, 246, 0.05);
+      background: rgba(111, 99, 217, 0.05);
       border-radius: 12px;
       border: 1px solid var(--emma-border);
     }
@@ -980,15 +1131,15 @@
       width: 72px;
       height: 72px;
       border-radius: 50%;
-      background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
-      box-shadow: 0 8px 32px rgba(139, 92, 246, 0.3);
+      background: linear-gradient(135deg, #6f63d9 0%, #7c3aed 100%);
+      box-shadow: 0 8px 32px rgba(111, 99, 217, 0.3);
       transition: all 0.3s ease;
       cursor: pointer;
     }
     
     .orb-preview:hover {
       transform: scale(1.1);
-      box-shadow: 0 12px 40px rgba(139, 92, 246, 0.4);
+      box-shadow: 0 12px 40px rgba(111, 99, 217, 0.4);
     }
     
     .preview-note {
@@ -1020,15 +1171,15 @@
     
     .orb-option:hover {
       border-color: var(--emma-primary);
-      background: rgba(139, 92, 246, 0.1);
+      background: rgba(111, 99, 217, 0.1);
       transform: translateY(-2px);
-      box-shadow: 0 8px 32px rgba(139, 92, 246, 0.2);
+      box-shadow: 0 8px 32px rgba(111, 99, 217, 0.2);
     }
     
     .orb-option.active {
       border-color: var(--emma-primary);
-      background: rgba(139, 92, 246, 0.15);
-      box-shadow: 0 4px 24px rgba(139, 92, 246, 0.3);
+      background: rgba(111, 99, 217, 0.15);
+      box-shadow: 0 4px 24px rgba(111, 99, 217, 0.3);
     }
     
     .orb-avatar {
@@ -1085,7 +1236,7 @@
     
     .orb-status-badge:hover {
       transform: scale(1.05);
-      box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
+      box-shadow: 0 4px 12px rgba(111, 99, 217, 0.4);
     }
     
     .orb-status-badge.inactive {
@@ -1142,7 +1293,7 @@
       justify-content: space-between;
       padding: 32px;
       border-bottom: 1px solid var(--emma-border);
-      background: rgba(139, 92, 246, 0.05);
+      background: rgba(111, 99, 217, 0.05);
     }
     
     .orb-dialog-title {
@@ -1328,7 +1479,7 @@
       border-radius: 50%;
       background: var(--emma-primary);
       cursor: pointer;
-      box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
+      box-shadow: 0 2px 8px rgba(111, 99, 217, 0.3);
     }
     
     .size-control span {
@@ -1360,7 +1511,7 @@
     
     .position-option.active {
       border-color: var(--emma-primary);
-      background: rgba(139, 92, 246, 0.1);
+      background: rgba(111, 99, 217, 0.1);
     }
     
     .position-preview {
@@ -1428,7 +1579,7 @@
     .text-input:focus {
       outline: none;
       border-color: var(--emma-primary);
-      box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
+      box-shadow: 0 0 0 3px rgba(111, 99, 217, 0.1);
     }
     
     .orb-dialog-footer {
@@ -1476,7 +1627,7 @@
     
     .btn-primary:hover {
       transform: translateY(-1px);
-      box-shadow: 0 4px 16px rgba(139, 92, 246, 0.3);
+      box-shadow: 0 4px 16px rgba(111, 99, 217, 0.3);
     }
   </style>
 </head>
@@ -1509,6 +1660,184 @@ <h4>MTAP Protocol Active</h4>
           </label>
         </div>
         
+        <!-- Theme & Background Selection -->
+        <div class="setting-section" id="theme-settings">
+          <h3>Visual Themes</h3>
+          <p class="section-description">Choose a theme and background to match your style. Themes update instantly so you can preview before you commit.</p>
+          <div id="theme-gallery" class="theme-gallery" role="list" aria-label="Available themes">
+            <button type="button" class="theme-card" data-theme-id="aurora-classic" role="listitem" aria-label="Aurora Classic theme">
+              <div class="theme-card__preview" aria-hidden="true">
+                <div class="theme-card__swatches">
+                  <span class="theme-card__swatch"></span>
+                  <span class="theme-card__swatch"></span>
+                  <span class="theme-card__swatch"></span>
+                </div>
+              </div>
+              <div class="theme-card__info">
+                <div class="theme-card__name">Aurora Classic</div>
+                <div class="theme-card__description">Signature Emma gradient with deep cosmos ambiance.</div>
+              </div>
+              <div class="theme-card__badges">
+                <span class="theme-card__badge">Animated</span>
+              </div>
+            </button>
+            <button type="button" class="theme-card" data-theme-id="sunrise-glow" role="listitem" aria-label="Sunrise Glow theme">
+              <div class="theme-card__preview" aria-hidden="true">
+                <div class="theme-card__swatches">
+                  <span class="theme-card__swatch"></span>
+                  <span class="theme-card__swatch"></span>
+                  <span class="theme-card__swatch"></span>
+                </div>
+              </div>
+              <div class="theme-card__info">
+                <div class="theme-card__name">Sunrise Glow</div>
+                <div class="theme-card__description">Warm peach and coral palette with soft morning light.</div>
+              </div>
+              <div class="theme-card__badges">
+                <span class="theme-card__badge">Animated</span>
+              </div>
+            </button>
+            <button type="button" class="theme-card" data-theme-id="midnight-forest" role="listitem" aria-label="Midnight Forest theme">
+              <div class="theme-card__preview" aria-hidden="true">
+                <div class="theme-card__swatches">
+                  <span class="theme-card__swatch"></span>
+                  <span class="theme-card__swatch"></span>
+                  <span class="theme-card__swatch"></span>
+                </div>
+              </div>
+              <div class="theme-card__info">
+                <div class="theme-card__name">Midnight Forest</div>
+                <div class="theme-card__description">Deep greens and teals with luminous accents for focus.</div>
+              </div>
+              <div class="theme-card__badges">
+                <span class="theme-card__badge">High Contrast</span>
+              </div>
+            </button>
+            <button type="button" class="theme-card" data-theme-id="lunar-tide" role="listitem" aria-label="Lunar Tide theme">
+              <div class="theme-card__preview" aria-hidden="true">
+                <div class="theme-card__swatches">
+                  <span class="theme-card__swatch"></span>
+                  <span class="theme-card__swatch"></span>
+                  <span class="theme-card__swatch"></span>
+                </div>
+              </div>
+              <div class="theme-card__info">
+                <div class="theme-card__name">Lunar Tide</div>
+                <div class="theme-card__description">Noctilucent blues with aqua highlights for calm focus.</div>
+              </div>
+              <div class="theme-card__badges">
+                <span class="theme-card__badge">High Contrast</span>
+                <span class="theme-card__badge">Animated</span>
+              </div>
+            </button>
+            <button type="button" class="theme-card" data-theme-id="ember-noir" role="listitem" aria-label="Ember Noir theme">
+              <div class="theme-card__preview" aria-hidden="true">
+                <div class="theme-card__swatches">
+                  <span class="theme-card__swatch"></span>
+                  <span class="theme-card__swatch"></span>
+                  <span class="theme-card__swatch"></span>
+                </div>
+              </div>
+              <div class="theme-card__info">
+                <div class="theme-card__name">Ember Noir</div>
+                <div class="theme-card__description">Sleek charcoal base with ember-lit highlights.</div>
+              </div>
+              <div class="theme-card__badges">
+                <span class="theme-card__badge">Animated</span>
+              </div>
+            </button>
+            <button type="button" class="theme-card" data-theme-id="blossom-dream" role="listitem" aria-label="Blossom Dream theme">
+              <div class="theme-card__preview" aria-hidden="true">
+                <div class="theme-card__swatches">
+                  <span class="theme-card__swatch"></span>
+                  <span class="theme-card__swatch"></span>
+                  <span class="theme-card__swatch"></span>
+                </div>
+              </div>
+              <div class="theme-card__info">
+                <div class="theme-card__name">Blossom Dream</div>
+                <div class="theme-card__description">Pastel bloom with gentle light for uplifting moments.</div>
+              </div>
+              <div class="theme-card__badges">
+                <span class="theme-card__badge">Animated</span>
+              </div>
+            </button>
+            <button type="button" class="theme-card" data-theme-id="zen-slate" role="listitem" aria-label="Zen Slate theme">
+              <div class="theme-card__preview" aria-hidden="true">
+                <div class="theme-card__swatches">
+                  <span class="theme-card__swatch"></span>
+                  <span class="theme-card__swatch"></span>
+                  <span class="theme-card__swatch"></span>
+                </div>
+              </div>
+              <div class="theme-card__info">
+                <div class="theme-card__name">Zen Slate</div>
+                <div class="theme-card__description">Modern graphite palette with calm blue-green accents.</div>
+              </div>
+              <div class="theme-card__badges">
+                <span class="theme-card__badge">High Contrast</span>
+              </div>
+            </button>
+          </div>
+          <div class="background-options" id="background-options" role="list" aria-label="Background options">
+            <button type="button" class="background-option" data-background-id="" role="listitem" aria-label="Emma Adaptive background">
+              <div class="background-option__preview" aria-hidden="true"></div>
+              <div class="background-option__info">
+                <div class="background-option__name">Emma Adaptive</div>
+                <div class="background-option__description">Let each theme choose the perfect ambient motion.</div>
+              </div>
+            </button>
+            <button type="button" class="background-option" data-background-id="aurora" role="listitem" aria-label="Aurora Field background">
+              <div class="background-option__preview" aria-hidden="true"></div>
+              <div class="background-option__info">
+                <div class="background-option__name">Aurora Field</div>
+                <div class="background-option__description">Soft cosmic gradients with Emma's signature glow.</div>
+              </div>
+            </button>
+            <button type="button" class="background-option" data-background-id="sunrise" role="listitem" aria-label="Sunrise Veil background">
+              <div class="background-option__preview" aria-hidden="true"></div>
+              <div class="background-option__info">
+                <div class="background-option__name">Sunrise Veil</div>
+                <div class="background-option__description">Warm morning light with gentle amber motion.</div>
+              </div>
+            </button>
+            <button type="button" class="background-option" data-background-id="forest" role="listitem" aria-label="Forest Night background">
+              <div class="background-option__preview" aria-hidden="true"></div>
+              <div class="background-option__info">
+                <div class="background-option__name">Forest Night</div>
+                <div class="background-option__description">Luminous particles drifting through deep forest hues.</div>
+              </div>
+            </button>
+            <button type="button" class="background-option" data-background-id="ocean" role="listitem" aria-label="Lunar Tide background">
+              <div class="background-option__preview" aria-hidden="true"></div>
+              <div class="background-option__info">
+                <div class="background-option__name">Lunar Tide</div>
+                <div class="background-option__description">Slow aurora bands drifting over deep ocean blues.</div>
+              </div>
+            </button>
+            <button type="button" class="background-option" data-background-id="ember" role="listitem" aria-label="Ember Noir background">
+              <div class="background-option__preview" aria-hidden="true"></div>
+              <div class="background-option__info">
+                <div class="background-option__name">Ember Noir</div>
+                <div class="background-option__description">Amber sparks drifting across a noir twilight.</div>
+              </div>
+            </button>
+            <button type="button" class="background-option" data-background-id="blossom" role="listitem" aria-label="Blossom Veil background">
+              <div class="background-option__preview" aria-hidden="true"></div>
+              <div class="background-option__info">
+                <div class="background-option__name">Blossom Veil</div>
+                <div class="background-option__description">Soft petal diffraction floating across gentle light.</div>
+              </div>
+            </button>
+            <button type="button" class="background-option" data-background-id="zen" role="listitem" aria-label="Zen Slate background">
+              <div class="background-option__preview" aria-hidden="true"></div>
+              <div class="background-option__info">
+                <div class="background-option__name">Zen Slate</div>
+                <div class="background-option__description">Holographic mist gliding over graphite horizons.</div>
+              </div>
+            </button>
+          </div>
+        </div>
         <!-- Emma Orb Selector -->
         <div class="setting-section">
           <h3>✨ Choose Your Emma</h3>
@@ -1896,7 +2225,7 @@ <h4>Migration Results</h4>
           <!-- Migration Actions -->
           <div class="migration-actions">
             <button type="button" id="analyze-legacy-btn" class="btn-secondary">
-              <span>📊</span> Analyze Legacy Data
+              <span>📚</span> Analyze Legacy Data
             </button>
             
             <button type="button" id="preview-migration-btn" class="btn-info" style="display: none;">
@@ -1991,7 +2320,7 @@ <h3>Privacy & Security</h3>
     <div class="password-modal-content">
       <div class="password-modal-header">
         <h3 id="password-modal-title">Enter Vault Code</h3>
-        <button type="button" id="password-modal-close" class="password-modal-close">×</button>
+        <button type="button" id="password-modal-close" class="password-modal-close">&times;</button>
       </div>
       <div class="password-modal-body">
         <input 
@@ -2040,16 +2369,16 @@ <h4>🎨 Visual Style</h4>
             <div class="setting-row">
               <label>Color Theme</label>
               <div class="color-theme-selector">
-                <div class="color-option active" data-color="default" style="background: linear-gradient(135deg, #8b5cf6, #7c3aed)"></div>
+                <div class="color-option active" data-color="default" style="background: linear-gradient(135deg, #6f63d9, #7c3aed)"></div>
                 <div class="color-option" data-color="blue" style="background: linear-gradient(135deg, #3b82f6, #2563eb)"></div>
                 <div class="color-option" data-color="green" style="background: linear-gradient(135deg, #10b981, #059669)"></div>
                 <div class="color-option" data-color="orange" style="background: linear-gradient(135deg, #f59e0b, #d97706)"></div>
-                <div class="color-option" data-color="pink" style="background: linear-gradient(135deg, #ec4899, #db2777)"></div>
+                <div class="color-option" data-color="pink" style="background: linear-gradient(135deg, #d06fa8, #db2777)"></div>
                 <div class="color-option" data-color="custom" style="background: linear-gradient(45deg, #333, #666)">
                   <span>+</span>
                 </div>
               </div>
-              <input type="color" id="dialog-custom-color" value="#8b5cf6" style="display: none;">
+              <input type="color" id="dialog-custom-color" value="#6f63d9" style="display: none;">
             </div>
             
             <div class="setting-row">
@@ -2292,27 +2621,30 @@ <h4>🔒 Privacy & Data</h4>
     transition: all 0.3s ease;
     z-index: 1000;
   " onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'">
-    🏠
+    🏀
   </button>
 
   <!-- Universal Emma Orb System - Direct Loading for Extension Pages -->
   <!-- Web Vault System Scripts -->
-  <script src="../js/emma-input-modal.js"></script>
-  <script src="../js/clean-password-modal.js"></script>
-  <script src="../js/emma-web-vault.js"></script>
-  <script src="../js/web-vault-status.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/emma-input-modal.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/clean-password-modal.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/emma-web-vault.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/web-vault-status.js"></script>
   
-  <script src="../js/emma-orb.js"></script>
-  <script src="../js/settings-service.js"></script> 
-  <script src="../js/orb-experience-manager.js"></script>
-  <script src="../js/experience-popup-base.js"></script>
-  <script src="../js/assistant-experience-popup.js"></script>
-  <script src="../js/dementia-experience-popup.js"></script>
-  <script src="../js/mirror-experience-popup.js"></script>
-  <script src="../js/universal-emma-orb.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../themes/theme-catalog.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/theme-manager.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/theme-settings-ui.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/emma-orb.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/settings-service.js"></script> 
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/orb-experience-manager.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/experience-popup-base.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/assistant-experience-popup.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/dementia-experience-popup.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/mirror-experience-popup.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/universal-emma-orb.js"></script>
   
   <!-- Initialize Universal Orb for Extension Page -->
-  <script>
+  <script nonce="c3RhdGljLWlubGluZQ==">
     if (document.readyState === 'loading') {
       document.addEventListener('DOMContentLoaded', () => {
         // CRITICAL: Initialize vault system for options page
@@ -2337,7 +2669,7 @@ <h4>🔒 Privacy & Data</h4>
               const result = await window.emmaWebVault.restoreVaultState();
               if (result) {
                 console.log('✅ OPTIONS: Vault state restored successfully');
-                console.log('📊 OPTIONS: Passphrase available:', result.hasPassphrase);
+                console.log('📚 OPTIONS: Passphrase available:', result.hasPassphrase);
                 console.log('📁 OPTIONS: Filename available:', result.hasFileName);
                 // If in fallback mode, show affordance to re-enable direct save
                 try {
@@ -2360,6 +2692,8 @@ <h4>🔒 Privacy & Data</h4>
     }
   </script>
   
-  <script src="../js/options.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/options.js"></script>
 </body>
-</html>
\ No newline at end of file
+</html>
+
+
diff --git a/pages/people-emma.html b/pages/people-emma.html
index b7332ecd..46105777 100644
--- a/pages/people-emma.html
+++ b/pages/people-emma.html
@@ -1,9 +1,10 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Emma • People</title>
+  <link rel="stylesheet" href="../css/theme-tokens.css">
   <link rel="stylesheet" href="../css/main.css">
   <style>
     * {
@@ -14,8 +15,8 @@
 
     body {
       font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-      background: #0a0a0f;
-      color: #ffffff;
+      background: var(--emma-surface-primary);
+      color: var(--emma-text-strong);
       overflow-x: hidden;
       min-height: 100vh;
     }
@@ -28,7 +29,7 @@
       width: 100%;
       height: 100%;
       z-index: -2;
-      background: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 50%, #16213e 100%);
+      background: var(--emma-bg-gradient);
     }
 
     .aurora {
@@ -71,11 +72,43 @@
       height: 100%;
     }
 
+    :root {
+      --people-modal-background: var(--emma-bg-gradient);
+    }
+
+    :root[data-background="aurora"] {
+      --people-modal-background: var(--emma-background-aurora);
+    }
+
+    :root[data-background="sunrise"] {
+      --people-modal-background: var(--emma-background-sunrise);
+    }
+
+    :root[data-background="forest"] {
+      --people-modal-background: var(--emma-background-forest);
+    }
+
+    :root[data-background="ocean"] {
+      --people-modal-background: var(--emma-background-ocean);
+    }
+
+    :root[data-background="ember"] {
+      --people-modal-background: var(--emma-background-ember);
+    }
+
+    :root[data-background="blossom"] {
+      --people-modal-background: var(--emma-background-blossom);
+    }
+
+    :root[data-background="zen"] {
+      --people-modal-background: var(--emma-background-zen);
+    }
+
     /* Main Container */
     .people-container {
       position: relative;
       min-height: 100vh;
-      padding: 40px 20px;
+      padding: clamp(24px, 6vh, 48px) 20px calc(48px + env(safe-area-inset-bottom, 0)) 20px;
       display: flex;
       flex-direction: column;
       align-items: center;
@@ -91,7 +124,7 @@
     .people-title {
       font-size: 3.5rem;
       font-weight: 300;
-      background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 50%, #06b6d4 100%);
+      background: var(--emma-gradient-secondary);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
@@ -101,26 +134,26 @@
 
     .people-subtitle {
       font-size: 1.2rem;
-      color: rgba(255, 255, 255, 0.7);
+      color: var(--emma-text-standard);
       font-weight: 300;
     }
 
     /* People Grid - Responsive & Fullscreen */
     .people-grid {
       display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
       gap: 32px;
       width: 100%;
       max-width: 100vw;
-      padding: 0 40px;
+      padding: 0 clamp(16px, 5vw, 40px);
       margin-bottom: 40px;
-      grid-auto-rows: minmax(400px, 1fr);
+      grid-auto-rows: minmax(360px, 1fr);
     }
 
     /* Responsive grid adjustments */
     @media (min-width: 768px) {
       .people-grid {
-        grid-template-columns: repeat(2, 1fr);
+        grid-template-columns: 1fr;
       }
     }
 
@@ -138,10 +171,10 @@
 
     /* Person Card with Slideshow Background */
     .person-card {
-      background: rgba(255, 255, 255, 0.08);
+      background: rgba(var(--emma-neutral-rgb), 0.08);
       backdrop-filter: blur(20px);
       -webkit-backdrop-filter: blur(20px);
-      border: 1px solid rgba(255, 255, 255, 0.1);
+      border: 1px solid rgba(var(--emma-neutral-rgb), 0.1);
       border-radius: 20px;
       padding: 48px 32px;
       text-align: center;
@@ -153,7 +186,7 @@
       flex-direction: column;
       align-items: center;
       justify-content: center;
-      min-height: 400px;
+      min-height: 360px;
     }
 
     /* Memory Slideshow Background */
@@ -206,8 +239,8 @@
       height: 100%;
       background: linear-gradient(
         135deg,
-        rgba(139, 92, 246, 0.85) 0%,
-        rgba(236, 72, 153, 0.75) 50%,
+        rgba(111, 99, 217, 0.85) 0%,
+        rgba(208, 111, 168, 0.75) 50%,
         rgba(6, 182, 212, 0.85) 100%
       );
       mix-blend-mode: multiply;
@@ -220,6 +253,53 @@
       z-index: 1;
     }
 
+        @media (max-width: 600px) {
+      .home-button {
+        bottom: 16px;
+        left: 16px;
+      }
+    }
+
+@media (max-width: 768px) {
+      .people-container {
+        padding: 24px 16px;
+        gap: 24px;
+      }
+
+      .people-grid {
+        grid-template-columns: 1fr;
+        padding: 0 16px;
+        gap: 20px;
+        grid-auto-rows: auto;
+      }
+
+      .people-title {
+        font-size: 2.6rem;
+      }
+
+      .person-card,
+      .add-person-card {
+        padding: 28px 20px;
+        min-height: 280px;
+        backdrop-filter: blur(10px);
+        -webkit-backdrop-filter: blur(10px);
+      }
+
+      .person-relation {
+        backdrop-filter: blur(6px);
+      }
+
+      .modal-overlay {
+        backdrop-filter: blur(6px);
+        -webkit-backdrop-filter: blur(6px);
+      }
+
+      .modal {
+        backdrop-filter: blur(14px);
+        -webkit-backdrop-filter: blur(14px);
+      }
+    }
+
     .person-card::before {
       content: '';
       position: absolute;
@@ -227,7 +307,7 @@
       left: 0;
       right: 0;
       bottom: 0;
-      background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(236, 72, 153, 0.1) 100%);
+      background: linear-gradient(135deg, rgba(111, 99, 217, 0.1) 0%, rgba(208, 111, 168, 0.1) 100%);
       opacity: 0;
       transition: opacity 0.3s ease;
       border-radius: 20px;
@@ -239,10 +319,10 @@
 
     .person-card:hover {
       transform: translateY(-8px) scale(1.02);
-      border-color: rgba(139, 92, 246, 0.3);
+      border-color: rgba(111, 99, 217, 0.3);
       box-shadow:
-        0 20px 40px rgba(139, 92, 246, 0.2),
-        0 0 0 1px rgba(139, 92, 246, 0.1);
+        0 20px 40px rgba(111, 99, 217, 0.2),
+        0 0 0 1px rgba(111, 99, 217, 0.1);
     }
 
     /* Person Avatar - Enhanced for slideshow */
@@ -260,26 +340,26 @@
       position: relative;
       overflow: hidden;
       box-shadow: 
-        0 0 0 4px rgba(255, 255, 255, 0.2),
+        0 0 0 4px rgba(var(--emma-neutral-rgb), 0.2),
         0 8px 32px rgba(0, 0, 0, 0.3),
-        0 0 80px rgba(139, 92, 246, 0.4);
+        0 0 80px rgba(111, 99, 217, 0.4);
       transition: all 0.4s ease;
     }
 
     .person-card:hover .person-avatar {
       transform: scale(1.1);
       box-shadow: 
-        0 0 0 6px rgba(255, 255, 255, 0.3),
+        0 0 0 6px rgba(var(--emma-neutral-rgb), 0.3),
         0 12px 48px rgba(0, 0, 0, 0.4),
-        0 0 120px rgba(236, 72, 153, 0.6);
+        0 0 120px rgba(208, 111, 168, 0.6);
     }
 
     .person-avatar.family {
-      background: linear-gradient(135deg, #ec4899 0%, #f97316 100%);
+      background: linear-gradient(135deg, #d06fa8 0%, #f97316 100%);
     }
 
     .person-avatar.friend {
-      background: linear-gradient(135deg, #8b5cf6 0%, #06b6d4 100%);
+      background: linear-gradient(135deg, #6f63d9 0%, #06b6d4 100%);
     }
 
     .person-avatar.colleague {
@@ -297,7 +377,7 @@
       color: white;
       text-shadow: 
         0 2px 8px rgba(0, 0, 0, 0.4),
-        0 0 20px rgba(139, 92, 246, 0.5);
+        0 0 20px rgba(111, 99, 217, 0.5);
       letter-spacing: -0.02em;
     }
 
@@ -308,7 +388,7 @@
       margin-bottom: 16px;
       font-weight: 500;
       padding: 6px 16px;
-      background: rgba(255, 255, 255, 0.15);
+      background: rgba(var(--emma-neutral-rgb), 0.15);
       border-radius: 20px;
       backdrop-filter: blur(10px);
       display: inline-block;
@@ -316,7 +396,7 @@
 
     .person-contact {
       font-size: 0.9rem;
-      color: rgba(255, 255, 255, 0.7);
+      color: var(--emma-text-standard);
       font-family: 'Inter', -apple-system, sans-serif;
       margin-top: auto;
       padding-top: 16px;
@@ -324,10 +404,10 @@
 
     /* Add Person Card */
     .add-person-card {
-      background: rgba(139, 92, 246, 0.1);
+      background: rgba(111, 99, 217, 0.1);
       backdrop-filter: blur(20px);
       -webkit-backdrop-filter: blur(20px);
-      border: 2px dashed rgba(139, 92, 246, 0.3);
+      border: 2px dashed rgba(111, 99, 217, 0.3);
       border-radius: 20px;
       padding: 60px 32px;
       text-align: center;
@@ -342,18 +422,18 @@
 
     .add-person-card:hover {
       transform: translateY(-8px) scale(1.02);
-      border-color: rgba(139, 92, 246, 0.6);
-      background: rgba(139, 92, 246, 0.15);
+      border-color: rgba(111, 99, 217, 0.6);
+      background: rgba(111, 99, 217, 0.15);
       box-shadow:
-        0 20px 40px rgba(139, 92, 246, 0.3),
-        0 0 0 1px rgba(139, 92, 246, 0.2);
+        0 20px 40px rgba(111, 99, 217, 0.3),
+        0 0 0 1px rgba(111, 99, 217, 0.2);
     }
 
     .add-person-icon {
       width: 60px;
       height: 60px;
       border-radius: 50%;
-      background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
+      background: linear-gradient(135deg, #6f63d9 0%, #d06fa8 100%);
       display: flex;
       align-items: center;
       justify-content: center;
@@ -375,7 +455,7 @@
 
     .add-person-subtitle {
       font-size: 0.9rem;
-      color: rgba(255, 255, 255, 0.6);
+      color: var(--emma-text-muted);
     }
 
     /* Modal Styles */
@@ -385,9 +465,11 @@
       left: 0;
       width: 100%;
       height: 100%;
-      background: rgba(0, 0, 0, 0.8);
-      backdrop-filter: blur(10px);
-      -webkit-backdrop-filter: blur(10px);
+      padding: clamp(24px, 6vh, 48px) clamp(18px, 4vw, 48px);
+      background: linear-gradient(140deg, rgba(4, 5, 16, 0.85), rgba(5, 6, 18, 0.92)), var(--people-modal-background);
+      backdrop-filter: blur(28px);
+      -webkit-backdrop-filter: blur(28px);
+      background-blend-mode: overlay;
       z-index: 1000;
       display: flex;
       align-items: center;
@@ -395,6 +477,7 @@
       opacity: 0;
       visibility: hidden;
       transition: all 0.3s ease;
+      isolation: isolate;
     }
 
     .modal-overlay.active {
@@ -402,26 +485,65 @@
       visibility: visible;
     }
 
+    .modal-overlay::before {
+      content: '';
+      position: absolute;
+      inset: clamp(16px, 3vw, 36px);
+      border-radius: 32px;
+      background:
+        radial-gradient(circle at 22% 20%, rgba(var(--emma-accent-primary-rgb, 111, 99, 217), 0.25), transparent 55%),
+        radial-gradient(circle at 78% 15%, rgba(var(--emma-accent-secondary-rgb, 208, 111, 168), 0.2), transparent 60%);
+      filter: blur(65px);
+      opacity: 0.65;
+      pointer-events: none;
+      transition: opacity 0.3s ease;
+      z-index: 0;
+    }
+
     .modal {
-      background: rgba(255, 255, 255, 0.1);
-      backdrop-filter: blur(30px);
-      -webkit-backdrop-filter: blur(30px);
-      border: 1px solid rgba(255, 255, 255, 0.2);
-      border-radius: 20px;
-      padding: 24px;
-      width: 90%;
-      max-width: 420px;
+      position: relative;
+      width: min(480px, 92vw);
       max-height: 85vh;
       overflow-y: auto;
+      padding: clamp(24px, 4vw, 36px);
+      border-radius: 26px;
+      border: 1px solid rgba(var(--emma-accent-primary-rgb, 111, 99, 217), 0.2);
+      background: linear-gradient(150deg, rgba(10, 12, 28, 0.8), rgba(5, 6, 18, 0.95)), var(--people-modal-background);
+      background-blend-mode: overlay;
+      box-shadow:
+        0 28px 80px rgba(3, 2, 12, 0.65),
+        0 0 0 1px rgba(255, 255, 255, 0.04);
       transform: scale(0.9) translateY(20px);
       transition: transform 0.3s ease;
-      position: relative;
+      color: var(--emma-text-strong, #ffffff);
+      isolation: isolate;
+      backdrop-filter: blur(32px);
+      -webkit-backdrop-filter: blur(32px);
+      z-index: 1;
     }
 
     .modal-overlay.active .modal {
       transform: scale(1) translateY(0);
     }
 
+    .modal::before {
+      content: '';
+      position: absolute;
+      inset: 12px;
+      border-radius: 22px;
+      background:
+        radial-gradient(circle at 15% 35%, rgba(var(--emma-accent-primary-rgb, 111, 99, 217), 0.3), transparent 55%),
+        radial-gradient(circle at 80% 10%, rgba(var(--emma-accent-secondary-rgb, 208, 111, 168), 0.25), transparent 60%);
+      filter: blur(50px);
+      opacity: 0.65;
+      pointer-events: none;
+    }
+
+    .modal > * {
+      position: relative;
+      z-index: 1;
+    }
+
     .modal-header {
       text-align: center;
       margin-bottom: 24px;
@@ -435,7 +557,7 @@
     }
 
     .modal-subtitle {
-      color: rgba(255, 255, 255, 0.7);
+      color: var(--emma-text-standard);
       font-size: 0.9rem;
     }
 
@@ -443,9 +565,9 @@
       position: absolute;
       top: 16px;
       right: 16px;
-      background: none;
-      border: none;
-      color: rgba(255, 255, 255, 0.6);
+      background: rgba(var(--emma-neutral-rgb), 0.12);
+      border: 1px solid rgba(var(--emma-neutral-rgb), 0.25);
+      color: var(--emma-text-strong, #ffffff);
       font-size: 20px;
       cursor: pointer;
       width: 32px;
@@ -458,8 +580,9 @@
     }
 
     .modal-close:hover {
-      background: rgba(255, 255, 255, 0.1);
-      color: white;
+      background: rgba(var(--emma-neutral-rgb), 0.2);
+      border-color: rgba(var(--emma-neutral-rgb), 0.35);
+      color: var(--emma-text-strong, #ffffff);
     }
 
     /* Form Styles */
@@ -478,8 +601,8 @@
     .form-input, .form-select {
       width: 100%;
       padding: 12px 14px;
-      background: rgba(255, 255, 255, 0.1);
-      border: 1px solid rgba(255, 255, 255, 0.2);
+      background: rgba(var(--emma-neutral-rgb), 0.1);
+      border: 1px solid rgba(var(--emma-neutral-rgb), 0.2);
       border-radius: 10px;
       color: white;
       font-size: 0.95rem;
@@ -488,9 +611,9 @@
 
     .form-input:focus, .form-select:focus {
       outline: none;
-      border-color: rgba(139, 92, 246, 0.6);
-      box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
-      background: rgba(255, 255, 255, 0.15);
+      border-color: rgba(111, 99, 217, 0.6);
+      box-shadow: 0 0 0 3px rgba(111, 99, 217, 0.1);
+      background: rgba(var(--emma-neutral-rgb), 0.15);
     }
 
     .form-input::placeholder {
@@ -514,8 +637,8 @@
       width: 90px;
       height: 90px;
       border-radius: 50%;
-      background: rgba(255, 255, 255, 0.1);
-      border: 2px dashed rgba(255, 255, 255, 0.3);
+      background: rgba(var(--emma-neutral-rgb), 0.1);
+      border: 2px dashed rgba(var(--emma-neutral-rgb), 0.3);
       display: flex;
       align-items: center;
       justify-content: center;
@@ -526,18 +649,18 @@
     }
 
     .avatar-preview:hover {
-      border-color: rgba(139, 92, 246, 0.6);
-      background: rgba(139, 92, 246, 0.1);
+      border-color: rgba(111, 99, 217, 0.6);
+      background: rgba(111, 99, 217, 0.1);
     }
 
     .avatar-placeholder {
       text-align: center;
-      color: rgba(255, 255, 255, 0.6);
+      color: var(--emma-text-muted);
       transition: all 0.3s ease;
     }
 
     .avatar-preview:hover .avatar-placeholder {
-      color: rgba(139, 92, 246, 0.8);
+      color: rgba(111, 99, 217, 0.8);
     }
 
     .avatar-icon {
@@ -559,8 +682,8 @@
 
     .avatar-upload-btn {
       padding: 6px 12px;
-      background: rgba(255, 255, 255, 0.1);
-      border: 1px solid rgba(255, 255, 255, 0.2);
+      background: rgba(var(--emma-neutral-rgb), 0.1);
+      border: 1px solid rgba(var(--emma-neutral-rgb), 0.2);
       border-radius: 6px;
       color: rgba(255, 255, 255, 0.8);
       font-size: 0.8rem;
@@ -569,8 +692,8 @@
     }
 
     .avatar-upload-btn:hover {
-      background: rgba(139, 92, 246, 0.2);
-      border-color: rgba(139, 92, 246, 0.4);
+      background: rgba(111, 99, 217, 0.2);
+      border-color: rgba(111, 99, 217, 0.4);
       color: white;
     }
 
@@ -615,50 +738,78 @@
     }
 
     .btn-primary {
-      background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
+      background: linear-gradient(135deg, #6f63d9 0%, #d06fa8 100%);
       color: white;
     }
 
     .btn-primary:hover {
       transform: translateY(-2px);
-      box-shadow: 0 10px 20px rgba(139, 92, 246, 0.3);
+      box-shadow: 0 10px 20px rgba(111, 99, 217, 0.3);
     }
 
     .btn-secondary {
-      background: rgba(255, 255, 255, 0.1);
+      background: rgba(var(--emma-neutral-rgb), 0.1);
       color: rgba(255, 255, 255, 0.8);
-      border: 1px solid rgba(255, 255, 255, 0.2);
+      border: 1px solid rgba(var(--emma-neutral-rgb), 0.2);
     }
 
     .btn-secondary:hover {
-      background: rgba(255, 255, 255, 0.2);
+      background: rgba(var(--emma-neutral-rgb), 0.2);
       color: white;
     }
 
     /* Home Button */
     .home-button {
       position: fixed;
-      bottom: 30px;
-      left: 30px;
-      width: 60px;
-      height: 60px;
-      background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
-      border: none;
+      bottom: 24px;
+      left: 24px;
+      width: 56px;
+      height: 56px;
       border-radius: 50%;
-      color: white;
-      font-size: 24px;
+      border: 1px solid rgba(111, 99, 217, 0.4);
+      background: linear-gradient(135deg, rgba(111, 99, 217, 0.9), rgba(208, 111, 168, 0.85));
+      color: #fff;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: 0 18px 36px rgba(111, 99, 217, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.18);
+      backdrop-filter: blur(18px);
+      transition: transform 0.25s ease, box-shadow 0.25s ease;
+      z-index: 120;
       cursor: pointer;
-      transition: all 0.3s ease;
-      z-index: 100;
-      box-shadow: 0 10px 20px rgba(139, 92, 246, 0.3);
     }
 
     .home-button:hover {
-      transform: translateY(-3px) scale(1.1);
-      box-shadow: 0 15px 30px rgba(139, 92, 246, 0.4);
+      transform: translateY(-4px);
+      box-shadow: 0 24px 44px rgba(111, 99, 217, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.24);
+    }
+
+    .home-button svg {
+      width: 24px;
+      height: 24px;
+      stroke: currentColor;
+      stroke-width: 1.8;
+    }
+
+    @media (max-width: 720px) {
+      .home-button {
+        width: 52px;
+        height: 52px;
+        bottom: 18px;
+        left: 18px;
+      }
+    }
+
+    @media (max-width: 540px) {
+      .home-button {
+        width: 48px;
+        height: 48px;
+        bottom: calc(env(safe-area-inset-bottom, 0) + 14px);
+        left: 16px;
+      }
     }
 
-    /* Empty State */
+/* Empty State */
     .empty-state {
       text-align: center;
       padding: 80px 20px;
@@ -680,7 +831,7 @@
 
     .empty-state-subtitle {
       font-size: 1rem;
-      color: rgba(255, 255, 255, 0.5);
+      color: var(--emma-text-muted);
     }
 
     /* Person Detail Modal Styles */
@@ -695,14 +846,14 @@
       gap: 20px;
       margin-bottom: 32px;
       padding-bottom: 20px;
-      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+      border-bottom: 1px solid rgba(var(--emma-neutral-rgb), 0.1);
     }
 
     .person-detail-avatar {
       width: 80px;
       height: 80px;
       border-radius: 50%;
-      background: rgba(255, 255, 255, 0.1);
+      background: rgba(var(--emma-neutral-rgb), 0.1);
       display: flex;
       align-items: center;
       justify-content: center;
@@ -730,7 +881,7 @@
 
     .person-detail-relation {
       font-size: 1rem;
-      color: rgba(255, 255, 255, 0.7);
+      color: var(--emma-text-standard);
       margin: 0;
       text-transform: capitalize;
     }
@@ -757,7 +908,7 @@
       content: '';
       width: 3px;
       height: 16px;
-      background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
+      background: linear-gradient(135deg, #6f63d9 0%, #d06fa8 100%);
       border-radius: 2px;
     }
 
@@ -766,7 +917,7 @@
       justify-content: space-between;
       align-items: center;
       padding: 8px 0;
-      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+      border-bottom: 1px solid rgba(var(--emma-neutral-rgb), 0.05);
     }
 
     .detail-item:last-child {
@@ -775,7 +926,7 @@
 
     .detail-label {
       font-size: 0.9rem;
-      color: rgba(255, 255, 255, 0.6);
+      color: var(--emma-text-muted);
       font-weight: 500;
     }
 
@@ -847,14 +998,14 @@
       }
 
       .people-grid {
-        grid-template-columns: repeat(2, 1fr);
+        grid-template-columns: 1fr;
         gap: 20px;
         padding: 0 20px;
-        grid-auto-rows: minmax(350px, 1fr);
+        grid-auto-rows: auto;
       }
 
       .person-card {
-        min-height: 350px;
+        min-height: 280px;
         padding: 32px 24px;
       }
 
@@ -931,14 +1082,14 @@ <h1 class="people-title">emma</h1>
     <div class="people-grid" id="people-grid">
       <!-- Add Person Card -->
       <div class="add-person-card" onclick="openAddPersonModal()">
-        <div class="add-person-icon">✨</div>
+        <div class="add-person-icon">&#x2728;</div>
         <div class="add-person-text">Add Someone Special</div>
         <div class="add-person-subtitle">Expand your network of memories</div>
       </div>
 
       <!-- Empty State (shown when no people) -->
       <div class="empty-state" id="empty-state" style="display: none;">
-        <div class="empty-state-icon">👥</div>
+        <div class="empty-state-icon">&#x1F465;</div>
         <div class="empty-state-text">No connections yet</div>
         <div class="empty-state-subtitle">Start building your network of meaningful relationships</div>
       </div>
@@ -948,7 +1099,7 @@ <h1 class="people-title">emma</h1>
   <!-- Add Person Modal -->
   <div class="modal-overlay" id="modal-overlay">
     <div class="modal">
-      <button class="modal-close" onclick="closeAddPersonModal()">×</button>
+      <button class="modal-close" onclick="closeAddPersonModal()">&times;</button>
 
       <div class="modal-header">
         <h2 class="modal-title">Add New Person</h2>
@@ -960,9 +1111,9 @@ <h2 class="modal-title">Add New Person</h2>
         <div class="form-group">
           <label class="form-label">Profile Picture</label>
           <div class="avatar-upload-container">
-            <div class="avatar-preview" id="avatar-preview">
+            <div class="avatar-preview" id="avatar-preview" role="button" tabindex="0" aria-label="Choose profile photo">
               <div class="avatar-placeholder">
-                <div class="avatar-icon">📷</div>
+                <div class="avatar-icon">&#x1F464;</div>
                 <div class="avatar-text">Add Photo</div>
               </div>
             </div>
@@ -1010,12 +1161,12 @@ <h2 class="modal-title">Add New Person</h2>
   <!-- Person Detail Modal -->
   <div class="modal-overlay" id="person-detail-modal">
     <div class="modal person-detail-modal">
-      <button class="modal-close" onclick="closePersonDetailModal()">×</button>
+      <button class="modal-close" onclick="closePersonDetailModal()">&times;</button>
 
       <div class="person-detail-header">
         <div class="person-detail-avatar" id="person-detail-avatar">
           <div class="avatar-placeholder">
-            <div class="avatar-icon">👤</div>
+            <div class="avatar-icon">&#x1F464;</div>
           </div>
         </div>
         <div class="person-detail-info">
@@ -1048,11 +1199,11 @@ <h3 class="section-title">Memory Connection</h3>
 
       <div class="person-detail-actions">
         <button class="btn btn-secondary" onclick="editPerson()">
-          <span>✏️</span>
+          <span>&#x1F4AC;</span>
           Edit Person
         </button>
         <button class="btn btn-primary" onclick="createMemoryWithPerson()">
-          <span>✨</span>
+          <span>?</span>
           Create Memory
         </button>
       </div>
@@ -1062,7 +1213,7 @@ <h3 class="section-title">Memory Connection</h3>
   <!-- Edit Person Modal -->
   <div class="modal-overlay" id="edit-person-modal">
     <div class="modal">
-      <button class="modal-close" onclick="closeEditPersonModal()">×</button>
+      <button class="modal-close" onclick="closeEditPersonModal()">&times;</button>
 
       <div class="modal-header">
         <h2 class="modal-title">Edit Person</h2>
@@ -1074,9 +1225,9 @@ <h2 class="modal-title">Edit Person</h2>
         <div class="form-group">
           <label class="form-label">Profile Picture</label>
           <div class="avatar-upload-container">
-            <div class="avatar-preview" id="edit-avatar-preview">
+            <div class="avatar-preview" id="edit-avatar-preview" role="button" tabindex="0" aria-label="Change profile photo">
               <div class="avatar-placeholder">
-                <div class="avatar-icon">📷</div>
+                <div class="avatar-icon">&#x1F464;</div>
                 <div class="avatar-text">Change Photo</div>
               </div>
             </div>
@@ -1120,12 +1271,12 @@ <h2 class="modal-title">Edit Person</h2>
 
         <div class="form-actions">
           <button type="button" class="btn btn-danger" onclick="deletePerson()">
-            <span>🗑️</span>
+            <span>&#x1F5D1;</span>
             Delete
           </button>
           <button type="button" class="btn btn-secondary" onclick="closeEditPersonModal()">Cancel</button>
           <button type="submit" class="btn btn-primary">
-            <span>💾</span>
+            <span>&#x1F4AC;</span>
             Save Changes
           </button>
         </div>
@@ -1134,49 +1285,91 @@ <h2 class="modal-title">Edit Person</h2>
   </div>
 
   <!-- Home Button -->
-  <button class="home-button" onclick="window.location.href='../dashboard.html'" title="Back to Dashboard">
-    🏠
+  <button class="home-button" type="button" onclick="window.location.href='../dashboard.html'" aria-label="Back to dashboard">
+    <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M3 10.5 12 3l9 7.5V21a1 1 0 0 1-1 1h-5.5a1 1 0 0 1-1-1v-5.5h-4V21a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
   </button>
 
   <!-- Universal Vault Modal -->
   <!-- Web Vault System Scripts -->
-  <script src="../js/emma-input-modal.js"></script>
-  <script src="../js/clean-password-modal.js"></script>
-  <script src="../js/emma-web-vault.js"></script>
-  <script src="../js/web-vault-status.js"></script>
-  <script src="../js/universal-vault-modal.js"></script>
-  <script src="../js/modal-helpers.js"></script>
-
-  <script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../themes/theme-catalog.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/theme-manager.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/emma-input-modal.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/clean-password-modal.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/emma-web-vault.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/web-vault-status.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/universal-vault-modal.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/modal-helpers.js"></script>
+
+  <script nonce="c3RhdGljLWlubGluZQ==">
+    window.metadataIncludesPerson = window.metadataIncludesPerson || ((peopleList, person) => {
+      if (!Array.isArray(peopleList) || !person) return false;
+
+      const targetId = person.id ? String(person.id).trim() : '';
+      if (!targetId) return false;
+
+      const resolveEntryId = (entry) => {
+        if (!entry) return null;
+        if (typeof entry === 'string' || typeof entry === 'number') {
+          const trimmed = String(entry).trim();
+          return trimmed || null;
+        }
+        if (typeof entry === 'object') {
+          const candidate = entry.id ?? entry.personId ?? entry.personID ?? entry.person_id ?? entry.uuid ?? entry.guid;
+          if (candidate === undefined || candidate === null) return null;
+          const trimmed = String(candidate).trim();
+          return trimmed || null;
+        }
+        return null;
+      };
+
+      return peopleList.some(entry => {
+        const entryId = resolveEntryId(entry);
+        return entryId && entryId === targetId;
+      });
+    });
+
+    window.contentMentionsPerson = window.contentMentionsPerson || ((personName, content) => {
+      if (!personName || !content) return false;
+
+      const escapeRegex = value => value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+      const words = personName.trim().split(/\s+/).filter(Boolean).map(escapeRegex);
+      if (words.length === 0) return false;
+
+      const pattern = `\\b${words.join('\\s+')}\\b(?:'s)?`;
+      const regex = new RegExp(pattern, 'i');
+
+      return regex.test(content);
+    });
+
     // Initialize vault system for people management
     document.addEventListener('DOMContentLoaded', () => {
 
       // FIXED: Create the vault instance like other pages do!
-      console.log('🔧 PEOPLE: Creating vault instance...');
+      console.log('[PEOPLE] Creating vault instance...');
       
       if (!window.emmaWebVault) {
         window.emmaWebVault = new EmmaWebVault();
-        console.log('✅ PEOPLE: Vault instance created successfully');
+        console.log('[PEOPLE] Vault instance created successfully');
       } else {
-        console.log('✅ PEOPLE: Vault instance already exists');
+        console.log('[PEOPLE] Vault instance already exists');
       }
 
       // Try to restore vault state if vault was previously active
       if (sessionStorage.getItem('emmaVaultActive') === 'true') {
-        console.log('👥 PEOPLE: Attempting to restore vault state...');
+        console.log('[PEOPLE] Attempting to restore vault state...');
         window.emmaWebVault.restoreVaultState()
           .then(result => {
             if (result) {
-              console.log('✅ PEOPLE: Vault state restored successfully');
+              console.log('[PEOPLE] Vault state restored successfully');
             } else {
-              console.log('⚠️ PEOPLE: Vault state restore returned false');
+              console.log('[PEOPLE] Vault state restore returned false');
             }
           })
           .catch(error => {
-            console.warn('⚠️ PEOPLE: Could not restore vault state:', error);
+            console.warn('[PEOPLE] Could not restore vault state:', error);
           });
       } else {
-        console.log('👥 PEOPLE: No active vault session found');
+        console.log('[PEOPLE] No active vault session found');
       }
     });
 
@@ -1184,33 +1377,54 @@ <h2 class="modal-title">Edit Person</h2>
     function initNeuralNetwork() {
       const canvas = document.getElementById('neural-canvas');
       const ctx = canvas.getContext('2d');
+      const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+      const isSmallScreen = window.matchMedia('(max-width: 768px)').matches;
+      const nodeCount = prefersReducedMotion ? 6 : (isSmallScreen ? 9 : 15);
+      const frameInterval = prefersReducedMotion ? 1000 / 15 : 1000 / 30; // Cap FPS for mobile
 
       function resize() {
         canvas.width = window.innerWidth;
         canvas.height = window.innerHeight;
       }
 
+      let resizeFrame = null;
+      const handleResize = () => {
+        if (resizeFrame) cancelAnimationFrame(resizeFrame);
+        resizeFrame = requestAnimationFrame(() => {
+          resize();
+          resizeFrame = null;
+        });
+      };
+
       resize();
-      window.addEventListener('resize', resize);
+      window.addEventListener('resize', handleResize);
 
       const nodes = [];
-      const connections = [];
-
-      // Create nodes
-      for (let i = 0; i < 15; i++) {
+      for (let i = 0; i < nodeCount; i++) {
         nodes.push({
           x: Math.random() * canvas.width,
           y: Math.random() * canvas.height,
-          vx: (Math.random() - 0.5) * 0.5,
-          vy: (Math.random() - 0.5) * 0.5,
-          radius: Math.random() * 2 + 1
+          vx: (Math.random() - 0.5) * 0.4,
+          vy: (Math.random() - 0.5) * 0.4,
+          radius: Math.random() * 1.5 + 1
         });
       }
 
-      function animate() {
+      let animationId = null;
+      let lastFrame = performance.now();
+      let active = true;
+
+      function draw(now) {
+        if (!active) return;
+
+        if (now - lastFrame < frameInterval) {
+          animationId = requestAnimationFrame(draw);
+          return;
+        }
+        lastFrame = now;
+
         ctx.clearRect(0, 0, canvas.width, canvas.height);
 
-        // Update nodes
         nodes.forEach(node => {
           node.x += node.vx;
           node.y += node.vy;
@@ -1219,17 +1433,16 @@ <h2 class="modal-title">Edit Person</h2>
           if (node.y < 0 || node.y > canvas.height) node.vy *= -1;
         });
 
-        // Draw connections
-        ctx.strokeStyle = 'rgba(139, 92, 246, 0.1)';
+        ctx.strokeStyle = 'rgba(111, 99, 217, 0.1)';
         ctx.lineWidth = 1;
 
         for (let i = 0; i < nodes.length; i++) {
           for (let j = i + 1; j < nodes.length; j++) {
             const dx = nodes[i].x - nodes[j].x;
             const dy = nodes[i].y - nodes[j].y;
-            const distance = Math.sqrt(dx * dx + dy * dy);
+            const distance = Math.hypot(dx, dy);
 
-            if (distance < 150) {
+            if (distance < 140) {
               ctx.beginPath();
               ctx.moveTo(nodes[i].x, nodes[i].y);
               ctx.lineTo(nodes[j].x, nodes[j].y);
@@ -1238,18 +1451,39 @@ <h2 class="modal-title">Edit Person</h2>
           }
         }
 
-        // Draw nodes
-        ctx.fillStyle = 'rgba(139, 92, 246, 0.6)';
+        ctx.fillStyle = 'rgba(111, 99, 217, 0.55)';
         nodes.forEach(node => {
           ctx.beginPath();
           ctx.arc(node.x, node.y, node.radius, 0, Math.PI * 2);
           ctx.fill();
         });
 
-        requestAnimationFrame(animate);
+        animationId = requestAnimationFrame(draw);
       }
 
-      animate();
+      const start = () => {
+        if (animationId) return;
+        lastFrame = performance.now();
+        animationId = requestAnimationFrame(draw);
+      };
+
+      const stop = () => {
+        if (animationId) {
+          cancelAnimationFrame(animationId);
+          animationId = null;
+        }
+      };
+
+      document.addEventListener('visibilitychange', () => {
+        active = !document.hidden;
+        if (active) {
+          start();
+        } else {
+          stop();
+        }
+      });
+
+      start();
     }
 
     // People management
@@ -1262,13 +1496,23 @@ <h2 class="modal-title">Edit Person</h2>
       const avatarUpload = document.getElementById('avatar-upload');
       const avatarPreview = document.getElementById('avatar-preview');
 
-      // Handle file selection
-      avatarUpload.addEventListener('change', handleAvatarUpload);
+      if (avatarUpload) {
+        avatarUpload.addEventListener('change', handleAvatarUpload);
+      }
 
-      // Handle click on preview to select file
-      avatarPreview.addEventListener('click', () => {
-        avatarUpload.click();
-      });
+      if (avatarUpload && avatarPreview) {
+        const openPicker = () => {
+          avatarUpload.click();
+        };
+
+        avatarPreview.addEventListener('click', openPicker);
+        avatarPreview.addEventListener('keydown', (event) => {
+          if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            openPicker();
+          }
+        });
+      }
     });
 
     async function handleAvatarUpload(event) {
@@ -1277,13 +1521,13 @@ <h2 class="modal-title">Edit Person</h2>
 
       // Validate file type
       if (!file.type.startsWith('image/')) {
-        showToast('❌ Please select an image file', 'error');
+        showToast('Please select an image file', 'error');
         return;
       }
 
       // Validate file size (5MB limit)
       if (file.size > 5 * 1024 * 1024) {
-        showToast('❌ Image must be smaller than 5MB', 'error');
+        showToast('Image must be smaller than 5MB', 'error');
         return;
       }
 
@@ -1302,11 +1546,11 @@ <h2 class="modal-title">Edit Person</h2>
         // Update preview
         updateAvatarPreview(currentAvatarDataUrl);
 
-        showToast('✅ Avatar selected', 'success');
+        showToast('Avatar selected', 'success');
 
       } catch (error) {
-        console.error('📷 AVATAR: Failed to process avatar:', error);
-        showToast('❌ Failed to process avatar', 'error');
+        console.error('[AVATAR] Failed to process avatar:', error);
+        showToast('Failed to process avatar', 'error');
       }
     }
 
@@ -1324,20 +1568,20 @@ <h2 class="modal-title">Edit Person</h2>
         const removeBtn = document.createElement('button');
         removeBtn.type = 'button';
         removeBtn.className = 'avatar-remove-btn';
-        removeBtn.textContent = '×';
+        removeBtn.textContent = '\u00D7';
         removeBtn.title = 'Remove avatar';
         removeBtn.onclick = removeAvatar;
 
         preview.appendChild(img);
         preview.appendChild(removeBtn);
-        preview.style.border = '2px solid rgba(139, 92, 246, 0.6)';
+        preview.style.border = '2px solid rgba(111, 99, 217, 0.6)';
       } else {
         const placeholder = document.createElement('div');
         placeholder.className = 'avatar-placeholder';
 
         const icon = document.createElement('div');
         icon.className = 'avatar-icon';
-        icon.textContent = '📷';
+        icon.textContent = '\u{1F464}';
 
         const text = document.createElement('div');
         text.className = 'avatar-text';
@@ -1346,7 +1590,7 @@ <h2 class="modal-title">Edit Person</h2>
         placeholder.appendChild(icon);
         placeholder.appendChild(text);
         preview.appendChild(placeholder);
-        preview.style.border = '2px dashed rgba(255, 255, 255, 0.3)';
+        preview.style.border = '2px dashed rgba(var(--emma-neutral-rgb), 0.3)';
       }
     }
 
@@ -1360,34 +1604,34 @@ <h2 class="modal-title">Edit Person</h2>
 
     async function loadPeople() {
       try {
-        console.log('👥 PEOPLE: Starting loadPeople...');
-        console.log('👥 PEOPLE: emmaAPI available?', !!window.emmaAPI);
-        console.log('👥 PEOPLE: emmaAPI.people available?', !!window.emmaAPI?.people);
-        console.log('👥 PEOPLE: emmaAPI.people.list available?', !!window.emmaAPI?.people?.list);
+        console.log('[PEOPLE] Starting loadPeople...');
+        console.log('[PEOPLE] emmaAPI available?', !!window.emmaAPI);
+        console.log('[PEOPLE] emmaAPI.people available?', !!window.emmaAPI?.people);
+        console.log('[PEOPLE] emmaAPI.people.list available?', !!window.emmaAPI?.people?.list);
 
         if (!window.emmaAPI || !window.emmaAPI.people || !window.emmaAPI.people.list) {
-          console.error('❌ PEOPLE: emmaAPI.people.list not available');
+          console.error('[PEOPLE] emmaAPI.people.list not available');
           // Show empty state with instructions to unlock vault
           people = [];
           await renderPeople();
           return;
         }
 
-        console.log('👥 PEOPLE: Calling emmaAPI.people.list()...');
+        console.log('[PEOPLE] Calling emmaAPI.people.list()...');
         const response = await window.emmaAPI.people.list();
-        console.log('👥 PEOPLE: Response received:', response);
+        console.log('[PEOPLE] Response received:', response);
 
         if (response && response.success) {
           people = response.items || [];
-          console.log(`👥 PEOPLE: Loaded ${people.length} people from vault`);
+          console.log(`[PEOPLE] Loaded ${people.length} people from vault`);
           await renderPeople();
         } else {
-          console.error('❌ PEOPLE: Failed to load people:', response);
+          console.error('[PEOPLE] Failed to load people:', response);
           people = [];
           await renderPeople();
         }
       } catch (error) {
-        console.error('❌ PEOPLE: Error loading people:', error);
+        console.error('[PEOPLE] Error loading people:', error);
         people = [];
         await renderPeople();
       }
@@ -1450,7 +1694,7 @@ <h2 class="modal-title">Edit Person</h2>
 
         };
         img.onerror = () => {
-          console.error('📷 AVATAR: Failed to display avatarUrl for:', person.name);
+          console.error('[AVATAR] Failed to display avatarUrl for:', person.name);
           // Keep the letter fallback
         };
       // If person has an avatar ID but no avatarUrl, fetch from legacy API as fallback
@@ -1477,17 +1721,17 @@ <h2 class="modal-title">Edit Person</h2>
 
               };
               img.onerror = () => {
-                console.error('📷 AVATAR: Failed to display avatar for:', person.name);
+                console.error('[AVATAR] Failed to display avatar for:', person.name);
                 // Keep the letter fallback
               };
             } else {
-              console.warn('📷 AVATAR: No avatar data found for:', person.name);
+              console.warn('[AVATAR] No avatar data found for:', person.name);
             }
           } else {
-            console.warn('📷 AVATAR: Web vault not available for avatar loading');
+            console.warn('[AVATAR] Web vault not available for avatar loading');
           }
         } catch (error) {
-          console.error('📷 AVATAR: Error loading avatar for:', person.name, error);
+          console.error('[AVATAR] Error loading avatar for:', person.name, error);
         }
       }
 
@@ -1516,9 +1760,11 @@ <h2 class="modal-title">Edit Person</h2>
       });
       
       const delBtn = document.createElement('button');
-      delBtn.textContent = '🗑️';
+      delBtn.type = 'button';
+      delBtn.textContent = '\u{1F5D1}';
       delBtn.title = 'Delete person';
-      delBtn.style.cssText = 'background:rgba(0,0,0,0.7); color:#fff; border:none; border-radius:8px; padding:8px; cursor:pointer; backdrop-filter:blur(10px); transition:all 0.3s ease;';
+      delBtn.setAttribute('aria-label', `Delete ${person.name}`);
+      delBtn.style.cssText = 'background:rgba(0,0,0,0.7); color:#fff; border:none; border-radius:8px; width:36px; height:36px; padding:0; display:flex; align-items:center; justify-content:center; font-size:18px; line-height:1; cursor:pointer; backdrop-filter:blur(10px); transition:all 0.3s ease;';
       delBtn.addEventListener('mouseenter', () => {
         delBtn.style.background = 'rgba(239,68,68,0.8)';
         delBtn.style.transform = 'scale(1.1)';
@@ -1535,15 +1781,15 @@ <h2 class="modal-title">Edit Person</h2>
           if (window.emmaAPI && window.emmaAPI.people && window.emmaAPI.people.delete) {
             const res = await window.emmaAPI.people.delete(person.id);
             if (res && res.success) {
-              showToast('✅ Person deleted', 'success');
+              showToast('Person deleted', 'success');
               await loadPeople();
             } else {
-              showToast('❌ Failed to delete person', 'error');
+              showToast('Failed to delete person', 'error');
             }
           }
         } catch (err) {
           console.error('Delete failed:', err);
-          showToast('❌ Error deleting person', 'error');
+          showToast('Error deleting person', 'error');
         }
       });
       actions.appendChild(delBtn);
@@ -1618,10 +1864,10 @@ <h2 class="modal-title">Edit Person</h2>
               });
 
             } else {
-              console.warn('📷 AVATAR: Extension not available - avatar will not be saved');
+              console.warn('[AVATAR] Extension not available - avatar will not be saved');
             }
           } catch (avatarError) {
-            console.error('📷 AVATAR: Failed to save avatar to vault:', avatarError);
+            console.error('[AVATAR] Failed to save avatar to vault:', avatarError);
             showToast('⚠️ Person will be added but avatar upload failed', 'warning');
           }
         } else {
@@ -1645,7 +1891,7 @@ <h2 class="modal-title">Edit Person</h2>
             }, 500);
 
             // Show success message
-            const message = avatarAttachmentId ? '✨ Person and avatar added successfully!' : '✨ Person added successfully!';
+            const message = avatarAttachmentId ? 'Person and avatar added successfully!' : 'Person added successfully!';
             showToast(message, 'success');
 
             // Reset avatar state
@@ -1655,20 +1901,20 @@ <h2 class="modal-title">Edit Person</h2>
 
           } else {
             console.error('Failed to add person:', response);
-            showToast('❌ Failed to add person: ' + (response.message || response.error), 'error');
+            showToast('Failed to add person: ' + (response.message || response.error), 'error');
           }
         } catch (directSaveError) {
-          console.error('❌ Direct save error adding person:', directSaveError);
+          console.error('Direct save error adding person:', directSaveError);
 
           if (directSaveError.message.includes('Direct save required')) {
-            showToast('⚠️ Please click "Enable direct save" to add people', 'warning');
+            showToast('Please click "Enable direct save" to add people', 'warning');
           } else {
-            showToast('❌ Failed to add person: ' + directSaveError.message, 'error');
+            showToast('Failed to add person: ' + directSaveError.message, 'error');
           }
         }
       } catch (error) {
         console.error('Error adding person:', error);
-        showToast('❌ Error adding person', 'error');
+        showToast('Error adding person', 'error');
       }
     }
 
@@ -1718,9 +1964,9 @@ <h2 class="modal-title">Edit Person</h2>
           transition: all 0.3s ease;
         ">
           <div class="vault-lock-alert" style="
-            background: rgba(255, 255, 255, 0.1);
+            background: rgba(var(--emma-neutral-rgb), 0.1);
             backdrop-filter: blur(30px);
-            border: 1px solid rgba(255, 255, 255, 0.2);
+            border: 1px solid rgba(var(--emma-neutral-rgb), 0.2);
             border-radius: 24px;
             padding: 40px;
             max-width: 400px;
@@ -1731,7 +1977,7 @@ <h2 class="modal-title">Edit Person</h2>
             <div class="vault-lock-icon" style="
               font-size: 48px;
               margin-bottom: 16px;
-            ">🔒</div>
+            ">&#x1F512;</div>
             <h3 class="vault-lock-title" style="
               color: white;
               font-size: 1.5rem;
@@ -1750,8 +1996,8 @@ <h2 class="modal-title">Edit Person</h2>
             ">
               <button class="btn btn-secondary" onclick="closeVaultLockAlert()" style="
                 padding: 12px 24px;
-                border: 1px solid rgba(255, 255, 255, 0.3);
-                background: rgba(255, 255, 255, 0.1);
+                border: 1px solid rgba(var(--emma-neutral-rgb), 0.3);
+                background: rgba(var(--emma-neutral-rgb), 0.1);
                 color: white;
                 border-radius: 12px;
                 cursor: pointer;
@@ -1762,7 +2008,7 @@ <h2 class="modal-title">Edit Person</h2>
               <button class="btn btn-primary" onclick="openVaultUnlock()" style="
                 padding: 12px 24px;
                 border: none;
-                background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
+                background: linear-gradient(135deg, #6f63d9 0%, #d06fa8 100%);
                 color: white;
                 border-radius: 12px;
                 cursor: pointer;
@@ -1771,7 +2017,7 @@ <h2 class="modal-title">Edit Person</h2>
                 align-items: center;
                 gap: 8px;
               ">
-                <span>🔓</span>
+                <span>&#x1F4AC;</span>
                 Unlock Vault
               </button>
             </div>
@@ -1789,8 +2035,8 @@ <h2 class="modal-title">Edit Person</h2>
       content.style.cssText = 'text-align: center;';
 
       const title = document.createElement('h3');
-      title.textContent = '🔒 Vault Locked';
-      title.style.cssText = 'margin-bottom: 10px; color: #f093fb;';
+      title.textContent = '\u{1F512} Vault Locked';
+      title.style.cssText = 'margin-bottom: 10px; color: #deb3e4;';
 
       const messageElement = document.createElement('p');
       messageElement.textContent = 'Your vault has been locked for security. Please unlock to continue.';
@@ -1798,7 +2044,7 @@ <h2 class="modal-title">Edit Person</h2>
 
       const unlockBtn = document.createElement('button');
       unlockBtn.textContent = 'Unlock Vault';
-      unlockBtn.style.cssText = 'background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); color: white; border: none; padding: 10px 20px; border-radius: 8px; cursor: pointer;';
+      unlockBtn.style.cssText = 'background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #deb3e4 100%); color: white; border: none; padding: 10px 20px; border-radius: 8px; cursor: pointer;';
       unlockBtn.onclick = () => window.open('popup.html', '_blank');
 
       content.appendChild(title);
@@ -1834,7 +2080,7 @@ <h2 class="modal-title">Edit Person</h2>
         onSuccess: () => {
           // Refresh the people list after successful unlock
           loadPeople();
-          showToast('✅ Vault unlocked successfully!', 'success');
+          showToast('Vault unlocked successfully!', 'success');
         },
         onCancel: () => {
           // User cancelled - nothing to do
@@ -1855,23 +2101,24 @@ <h2 class="modal-title">Edit Person</h2>
 
       // Update contact info
       const contactInfo = document.getElementById('person-contact-info');
-      if (person.contact) {
-        contactInfo.innerHTML = `
-          <span class="detail-label">Contact:</span>
-          <span class="detail-value">${person.contact}</span>
-        `;
-      } else {
-        contactInfo.innerHTML = `
-          <span class="detail-label">Contact:</span>
-          <span class="detail-value">No contact information</span>
-        `;
+      if (contactInfo) {
+        contactInfo.textContent = '';
+        const contactLabel = document.createElement('span');
+        contactLabel.className = 'detail-label';
+        contactLabel.textContent = 'Contact:';
+        const contactValue = document.createElement('span');
+        contactValue.className = 'detail-value';
+        contactValue.textContent = person.contact ? person.contact : 'No contact information';
+        contactInfo.appendChild(contactLabel);
+        contactInfo.appendChild(contactValue);
       }
 
+
       // Update created date
       const createdDate = person.createdAt ? new Date(person.createdAt).toLocaleDateString() : 'Recently';
       document.getElementById('person-created-date').textContent = createdDate;
 
-      // 🎯 CRITICAL FIX: Load and display connected memories count and list
+      // TODO CRITICAL FIX: Load and display connected memories count and list
       await updatePersonMemoryConnections(person.id);
 
       // Load avatar for detail view - SAME LOGIC AS PERSON CARDS
@@ -1915,7 +2162,7 @@ <h2 class="modal-title">Edit Person</h2>
 
     function editPerson() {
       if (!currentPerson) {
-        console.error('❌ EDIT: No current person selected');
+        console.error('EDIT: No current person selected');
         return;
       }
 
@@ -1938,7 +2185,7 @@ <h2 class="modal-title">Edit Person</h2>
 
     async function openEditPersonModal(person) {
       if (!person) {
-        console.error('❌ EDIT: Cannot open edit modal - no person data provided');
+        console.error('EDIT: Cannot open edit modal - no person data provided');
         return;
       }
 
@@ -1951,7 +2198,7 @@ <h2 class="modal-title">Edit Person</h2>
       const relationField = document.getElementById('edit-person-relation');
 
       if (!nameField || !emailField || !phoneField || !relationField) {
-        console.error('❌ EDIT: Form fields not found');
+        console.error('EDIT: Form fields not found');
         return;
       }
 
@@ -1963,7 +2210,7 @@ <h2 class="modal-title">Edit Person</h2>
       // Load current avatar
       const editPreview = document.getElementById('edit-avatar-preview');
       if (!editPreview) {
-        console.error('❌ EDIT: Avatar preview element not found');
+        console.error('EDIT: Avatar preview element not found');
         return;
       }
 
@@ -1976,40 +2223,40 @@ <h2 class="modal-title">Edit Person</h2>
           if (avatarResult && avatarResult.success && avatarResult.dataUrl) {
             editPreview.innerHTML = `
               <img src="${avatarResult.dataUrl}" alt="${person.name} avatar">
-              <button type="button" class="avatar-remove-btn" onclick="removeEditAvatar()" title="Remove avatar">×</button>
+              <button type="button" class="avatar-remove-btn" onclick="removeEditAvatar()" title="Remove avatar">&times;</button>
             `;
-            editPreview.style.border = '2px solid rgba(139, 92, 246, 0.6)';
+            editPreview.style.border = '2px solid rgba(111, 99, 217, 0.6)';
             editAvatarDataUrl = avatarResult.dataUrl; // Store current avatar
           } else {
             // No avatar data, show placeholder
             editPreview.innerHTML = `
               <div class="avatar-placeholder">
-                <div class="avatar-icon">📷</div>
+                <div class="avatar-icon">&#x1F464;</div>
                 <div class="avatar-text">Change Photo</div>
               </div>
             `;
-            editPreview.style.border = '2px dashed rgba(255, 255, 255, 0.3)';
+            editPreview.style.border = '2px dashed rgba(var(--emma-neutral-rgb), 0.3)';
           }
         } catch (error) {
-          console.error('📷 EDIT: Failed to load avatar for edit:', error);
+          console.error('[EDIT] Failed to load avatar for edit:', error);
           // Show placeholder on error
           editPreview.innerHTML = `
             <div class="avatar-placeholder">
-              <div class="avatar-icon">📷</div>
+              <div class="avatar-icon">&#x1F464;</div>
               <div class="avatar-text">Change Photo</div>
             </div>
           `;
-          editPreview.style.border = '2px dashed rgba(255, 255, 255, 0.3)';
+          editPreview.style.border = '2px dashed rgba(var(--emma-neutral-rgb), 0.3)';
         }
       } else {
         // No avatar, show placeholder
         editPreview.innerHTML = `
           <div class="avatar-placeholder">
-            <div class="avatar-icon">📷</div>
+            <div class="avatar-icon">&#x1F464;</div>
             <div class="avatar-text">Change Photo</div>
           </div>
         `;
-        editPreview.style.border = '2px dashed rgba(255, 255, 255, 0.3)';
+        editPreview.style.border = '2px dashed rgba(var(--emma-neutral-rgb), 0.3)';
       }
 
       // Reset edit state
@@ -2029,7 +2276,7 @@ <h2 class="modal-title">Edit Person</h2>
           }
         }, 200);
       } else {
-        console.error('❌ EDIT: Edit modal element not found');
+        console.error('EDIT: Edit modal element not found');
       }
     }
 
@@ -2055,11 +2302,11 @@ <h2 class="modal-title">Edit Person</h2>
       if (editPreview) {
         editPreview.innerHTML = `
           <div class="avatar-placeholder">
-            <div class="avatar-icon">📷</div>
+            <div class="avatar-icon">&#x1F464;</div>
             <div class="avatar-text">Change Photo</div>
           </div>
         `;
-        editPreview.style.border = '2px dashed rgba(255, 255, 255, 0.3)';
+        editPreview.style.border = '2px dashed rgba(var(--emma-neutral-rgb), 0.3)';
       }
 
       currentPerson = null;
@@ -2083,9 +2330,25 @@ <h2 class="modal-title">Edit Person</h2>
     // Edit avatar upload functionality
     document.addEventListener('DOMContentLoaded', () => {
       const editAvatarUpload = document.getElementById('edit-avatar-upload');
+      const editAvatarPreview = document.getElementById('edit-avatar-preview');
+
       if (editAvatarUpload) {
         editAvatarUpload.addEventListener('change', handleEditAvatarUpload);
       }
+
+      if (editAvatarUpload && editAvatarPreview) {
+        const openEditPicker = () => {
+          editAvatarUpload.click();
+        };
+
+        editAvatarPreview.addEventListener('click', openEditPicker);
+        editAvatarPreview.addEventListener('keydown', (event) => {
+          if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            openEditPicker();
+          }
+        });
+      }
     });
 
     async function handleEditAvatarUpload(event) {
@@ -2094,13 +2357,13 @@ <h2 class="modal-title">Edit Person</h2>
 
       // Validate file type
       if (!file.type.startsWith('image/')) {
-        showToast('❌ Please select an image file', 'error');
+        showToast('Please select an image file', 'error');
         return;
       }
 
       // Validate file size (5MB limit)
       if (file.size > 5 * 1024 * 1024) {
-        showToast('❌ Image must be smaller than 5MB', 'error');
+        showToast('Image must be smaller than 5MB', 'error');
         return;
       }
 
@@ -2122,16 +2385,16 @@ <h2 class="modal-title">Edit Person</h2>
         if (preview && editAvatarDataUrl) {
           preview.innerHTML = `
             <img src="${editAvatarDataUrl}" alt="Avatar preview">
-            <button type="button" class="avatar-remove-btn" onclick="removeEditAvatar()" title="Remove avatar">×</button>
+            <button type="button" class="avatar-remove-btn" onclick="removeEditAvatar()" title="Remove avatar">&times;</button>
           `;
-          preview.style.border = '2px solid rgba(139, 92, 246, 0.6)';
+          preview.style.border = '2px solid rgba(111, 99, 217, 0.6)';
         }
 
-        showToast('✅ New avatar selected', 'success');
+        showToast('New avatar selected', 'success');
 
       } catch (error) {
-        console.error('📷 EDIT AVATAR: Failed to process avatar:', error);
-        showToast('❌ Failed to process avatar', 'error');
+        console.error('[EDIT AVATAR] Failed to process avatar:', error);
+        showToast('Failed to process avatar', 'error');
       }
     }
 
@@ -2141,17 +2404,17 @@ <h2 class="modal-title">Edit Person</h2>
       if (dataUrl) {
         preview.innerHTML = `
           <img src="${dataUrl}" alt="Avatar preview">
-          <button type="button" class="avatar-remove-btn" onclick="removeEditAvatar()" title="Remove avatar">×</button>
+          <button type="button" class="avatar-remove-btn" onclick="removeEditAvatar()" title="Remove avatar">&times;</button>
         `;
-        preview.style.border = '2px solid rgba(139, 92, 246, 0.6)';
+        preview.style.border = '2px solid rgba(111, 99, 217, 0.6)';
       } else {
         preview.innerHTML = `
           <div class="avatar-placeholder">
-            <div class="avatar-icon">📷</div>
+            <div class="avatar-icon">&#x1F464;</div>
             <div class="avatar-text">Change Photo</div>
           </div>
         `;
-        preview.style.border = '2px dashed rgba(255, 255, 255, 0.3)';
+        preview.style.border = '2px dashed rgba(var(--emma-neutral-rgb), 0.3)';
       }
     }
 
@@ -2165,11 +2428,11 @@ <h2 class="modal-title">Edit Person</h2>
       if (preview) {
         preview.innerHTML = `
           <div class="avatar-placeholder">
-            <div class="avatar-icon">📷</div>
+            <div class="avatar-icon">&#x1F464;</div>
             <div class="avatar-text">Change Photo</div>
           </div>
         `;
-        preview.style.border = '2px dashed rgba(255, 255, 255, 0.3)';
+        preview.style.border = '2px dashed rgba(var(--emma-neutral-rgb), 0.3)';
       }
 
       const uploadField = document.getElementById('edit-avatar-upload');
@@ -2191,7 +2454,7 @@ <h2 class="modal-title">Edit Person</h2>
       const relation = document.getElementById('edit-person-relation').value;
 
       if (!name || !relation) {
-        showToast('❌ Please fill in the required fields', 'error');
+        showToast('Please fill in the required fields', 'error');
         return;
       }
 
@@ -2201,15 +2464,7 @@ <h2 class="modal-title">Edit Person</h2>
         let newAvatarId = currentPerson.avatarId; // Keep current by default
 
         if (editAvatarChanged) {
-          // Remove old avatar if it exists
-          if (currentPerson.avatarId) {
-            try {
-              await window.emmaAPI.vault.attachment.remove(currentPerson.avatarId);
-
-            } catch (error) {
-              console.warn('📷 EDIT: Failed to remove old avatar:', error);
-            }
-          }
+          const previousAvatarId = currentPerson.avatarId;
 
           // Upload new avatar if we have one
           if (editAvatarDataUrl && editAvatarFile) {
@@ -2230,17 +2485,34 @@ <h2 class="modal-title">Edit Person</h2>
               if (avatarResult && avatarResult.success && avatarResult.id) {
                 newAvatarId = avatarResult.id;
 
+                if (previousAvatarId) {
+                  try {
+                    await window.emmaAPI.vault.attachment.remove(previousAvatarId);
+
+                  } catch (removeError) {
+                    console.warn('[EDIT] Failed to remove previous avatar:', removeError);
+                  }
+                }
+
               } else {
-                console.error('📷 EDIT: Failed to save new avatar:', avatarResult);
+                console.error('[EDIT] Failed to save new avatar:', avatarResult);
                 showToast('⚠️ Person updated but avatar upload failed', 'warning');
               }
             } catch (error) {
-              console.error('📷 EDIT: Avatar upload error:', error);
+              console.error('[EDIT] Avatar upload error:', error);
               showToast('⚠️ Person updated but avatar upload failed', 'warning');
             }
           } else {
             // No new avatar, remove the old one
             newAvatarId = null;
+            if (previousAvatarId) {
+              try {
+                await window.emmaAPI.vault.attachment.remove(previousAvatarId);
+
+              } catch (error) {
+                console.warn('[EDIT] Failed to remove old avatar:', error);
+              }
+            }
           }
         }
 
@@ -2249,20 +2521,29 @@ <h2 class="modal-title">Edit Person</h2>
           ...currentPerson,
           name,
           contact: email || phone || null,
-          relation,
-          avatarId: newAvatarId,
-          avatarUrl: editAvatarDataUrl // For immediate display
+          relation
         };
 
+        if (editAvatarChanged) {
+          updatedPerson.avatarId = newAvatarId || null;
+          updatedPerson.avatarUrl = editAvatarDataUrl || null;
+        }
+
         // Update in vault using the proper update API
-        const response = await window.emmaAPI.people.update({
+        const updatePayload = {
           id: currentPerson.id,
           name,
           contact: email || phone || null,
-          relation,
-          avatarId: newAvatarId,
-          avatarUrl: editAvatarDataUrl
-        });
+          relation
+        };
+
+        if (editAvatarChanged) {
+          updatePayload.avatarId = newAvatarId || null;
+          updatePayload.avatar = newAvatarId || null;
+          updatePayload.avatarUrl = editAvatarDataUrl || null;
+        }
+
+        const response = await window.emmaAPI.people.update(updatePayload);
 
         if (response.success) {
           closeEditPersonModal();
@@ -2270,7 +2551,7 @@ <h2 class="modal-title">Edit Person</h2>
           setTimeout(async () => {
             await loadPeople(); // Reload to show changes
           }, 500);
-          showToast('✅ Person updated successfully!', 'success');
+          showToast('Person updated successfully!', 'success');
         } else {
           console.error('Failed to update person:', response);
 
@@ -2278,13 +2559,13 @@ <h2 class="modal-title">Edit Person</h2>
           if (response.error === 'vault_locked') {
             showVaultLockAlert(response.userMessage || 'Please unlock your vault to edit people');
           } else {
-            showToast('❌ Failed to update person: ' + (response.message || response.error), 'error');
+            showToast('Failed to update person: ' + (response.message || response.error), 'error');
           }
         }
 
       } catch (error) {
         console.error('Error updating person:', error);
-        showToast('❌ Error updating person', 'error');
+        showToast('Error updating person', 'error');
       }
     }    async function deletePerson() {
       if (!currentPerson) return;
@@ -2301,7 +2582,7 @@ <h2 class="modal-title">Edit Person</h2>
             await window.emmaAPI.vault.attachment.remove(currentPerson.avatarId);
 
           } catch (error) {
-            console.warn('📷 DELETE: Failed to remove avatar:', error);
+            console.warn('[DELETE] Failed to remove avatar:', error);
           }
         }
 
@@ -2311,7 +2592,7 @@ <h2 class="modal-title">Edit Person</h2>
         if (response.success) {
           closeEditPersonModal();
           await loadPeople(); // Reload to remove from display
-          showToast('✅ Person deleted successfully', 'success');
+          showToast('Person deleted successfully', 'success');
         } else {
           console.error('Failed to delete person:', response);
 
@@ -2319,13 +2600,13 @@ <h2 class="modal-title">Edit Person</h2>
           if (response.error === 'vault_locked') {
             showVaultLockAlert(response.userMessage || 'Please unlock your vault to remove people');
           } else {
-            showToast('❌ Failed to delete person: ' + (response.message || response.error), 'error');
+            showToast('Failed to delete person: ' + (response.message || response.error), 'error');
           }
         }
 
       } catch (error) {
         console.error('Error deleting person:', error);
-        showToast('❌ Error deleting person', 'error');
+        showToast('Error deleting person', 'error');
       }
     }
 
@@ -2357,7 +2638,7 @@ <h2 class="modal-title">Edit Person</h2>
         const memories = await loadMemoriesForPerson(person.id);
         
         if (!memories || memories.length === 0) {
-          console.log(`👤 No memories found for ${person.name}`);
+          console.log(`No memories found for ${person.name}`);
           return null;
         }
 
@@ -2378,11 +2659,11 @@ <h2 class="modal-title">Edit Person</h2>
         }
 
         if (photos.length === 0) {
-          console.log(`📷 No photos found in memories for ${person.name}`);
+          console.log(`No photos found in memories for ${person.name}`);
           return null;
         }
 
-        console.log(`🎨 Creating slideshow for ${person.name} with ${photos.length} photos`);
+        console.log(`Creating slideshow for ${person.name} with ${photos.length} photos`);
 
         // Create slideshow container
         const slideshow = document.createElement('div');
@@ -2415,7 +2696,7 @@ <h2 class="modal-title">Edit Person</h2>
               }
             }
           } catch (error) {
-            console.error(`❌ Failed to load photo ${photo.id}:`, error);
+            console.error(`Failed to load photo ${photo.id}:`, error);
           }
         }
 
@@ -2448,7 +2729,7 @@ <h2 class="modal-title">Edit Person</h2>
         return slideshow;
 
       } catch (error) {
-        console.error(`❌ Error creating slideshow for ${person.name}:`, error);
+        console.error(`Error creating slideshow for ${person.name}:`, error);
         return null;
       }
     }
@@ -2457,46 +2738,37 @@ <h2 class="modal-title">Edit Person</h2>
     async function loadMemoriesForPerson(personId) {
       try {
         if (!window.emmaWebVault || !window.emmaWebVault.isOpen) {
-          console.warn('⚠️ Vault not open, cannot load memories');
+          console.warn('[VAULT] not open, cannot load memories');
           return [];
         }
 
         const vaultData = window.emmaWebVault.vaultData;
         if (!vaultData || !vaultData.content || !vaultData.content.memories) {
-          console.warn('⚠️ No memories found in vault data structure');
+          console.warn('No memories found in vault data structure');
           return [];
         }
 
         // Find memories that include this person
         const connectedMemories = [];
-        
+        const personData = vaultData.content.people ? vaultData.content.people[personId] : null;
+        const personForMatching = personData ? { id: personId, name: personData.name } : { id: personId };
+
         for (const [memoryId, memory] of Object.entries(vaultData.content.memories)) {
-          // Check if person is in memory's people metadata
-          if (memory.metadata && memory.metadata.people && 
-              Array.isArray(memory.metadata.people) && 
-              memory.metadata.people.includes(personId)) {
-            connectedMemories.push(memory);
-          }
-          
-          // Also check if person's name is mentioned in content
-          const personData = vaultData.content.people && vaultData.content.people[personId];
-          if (personData && memory.content) {
-            const personName = personData.name.toLowerCase();
-            const memoryContent = memory.content.toLowerCase();
-            if (memoryContent.includes(personName)) {
-              // Avoid duplicates
-              if (!connectedMemories.find(m => m.id === memory.id)) {
-                connectedMemories.push(memory);
-              }
-            }
+          const memoryWithId = memory.id ? memory : { ...memory, id: memoryId };
+
+          if (window.metadataIncludesPerson(memory.metadata?.people, personForMatching)) {
+            connectedMemories.push(memoryWithId);
+            continue;
           }
+
+          // Content-based inference removed to avoid false positive connections
         }
 
-        console.log(`📚 Found ${connectedMemories.length} memories for person ${personId}`);
+        console.log(`Found ${connectedMemories.length} memories for person ${personId}`);
         return connectedMemories;
 
       } catch (error) {
-        console.error('❌ Error loading memories for person:', error);
+        console.error('Error loading memories for person:', error);
         return [];
       }
     }
@@ -2507,7 +2779,7 @@ <h2 class="modal-title">Edit Person</h2>
         const connectedMemories = await loadMemoriesForPerson(personId);
         const memoryCount = connectedMemories.length;
         
-        console.log(`🔗 PEOPLE: Found ${memoryCount} memories for person ${personId}`);
+        console.log(`[PEOPLE] Found ${memoryCount} memories for person ${personId}`);
         
         // Update the memory count display
         const memoryCountElement = document.querySelector('.detail-item:last-child .detail-value');
@@ -2521,7 +2793,7 @@ <h2 class="modal-title">Edit Person</h2>
         }
         
       } catch (error) {
-        console.error('❌ Error updating person memory connections:', error);
+        console.error('Error updating person memory connections:', error);
       }
     }
     
@@ -2544,8 +2816,8 @@ <h2 class="modal-title">Edit Person</h2>
         max-height: 200px;
         overflow-y: auto;
         border-radius: 12px;
-        background: rgba(255, 255, 255, 0.05);
-        border: 1px solid rgba(255, 255, 255, 0.1);
+        background: rgba(var(--emma-neutral-rgb), 0.05);
+        border: 1px solid rgba(var(--emma-neutral-rgb), 0.1);
       `;
       
       const memoriesHtml = memories.map(memory => {
@@ -2556,7 +2828,7 @@ <h2 class="modal-title">Edit Person</h2>
         return `
           <div class="memory-item" style="
             padding: 12px 16px;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+            border-bottom: 1px solid rgba(var(--emma-neutral-rgb), 0.05);
             cursor: pointer;
             transition: all 0.2s ease;
             display: flex;
@@ -2569,12 +2841,12 @@ <h2 class="modal-title">Edit Person</h2>
               width: 40px;
               height: 40px;
               border-radius: 8px;
-              background: linear-gradient(135deg, #8658ff, #f093fb);
+              background: linear-gradient(135deg, var(--emma-accent-primary), #deb3e4);
               display: flex;
               align-items: center;
               justify-content: center;
               font-size: 18px;
-            ">${hasMedia ? '📸' : '💭'}</div>
+            ">${hasMedia ? '🖼️' : '📓'} </div>
             <div style="flex: 1;">
               <div style="
                 color: white;
@@ -2584,14 +2856,14 @@ <h2 class="modal-title">Edit Person</h2>
                 line-height: 1.3;
               ">${title}</div>
               <div style="
-                color: rgba(255, 255, 255, 0.6);
+                color: var(--emma-text-muted);
                 font-size: 12px;
                 display: flex;
                 align-items: center;
                 gap: 8px;
               ">
-                <span>📅 ${date}</span>
-                ${hasMedia ? `<span>📎 ${memory.attachments.length} file${memory.attachments.length > 1 ? 's' : ''}</span>` : ''}
+                <span>&#x1F4C5; ${date}</span>
+                ${hasMedia ? `<span>📦 ${memory.attachments.length} file${memory.attachments.length > 1 ? 's' : ''}</span>` : ''}
               </div>
             </div>
             <div style="
@@ -2608,7 +2880,7 @@ <h2 class="modal-title">Edit Person</h2>
     
     // Open memory from people dialog (navigate to memory view)
     function openMemoryFromPeople(memoryId) {
-      console.log('🔗 PEOPLE: Opening memory:', memoryId);
+      console.log('[PEOPLE] Opening memory:', memoryId);
       
       // Close the people dialog
       closePersonDetailModal();
@@ -2636,21 +2908,21 @@ <h2 class="modal-title">Edit Person</h2>
     async function openPersonFromId(personId) {
       try {
         if (!window.emmaWebVault || !window.emmaWebVault.vaultData?.content?.people) {
-          console.error('❌ PEOPLE: Vault not available or no people data');
+          console.error('[PEOPLE] Vault not available or no people data');
           return;
         }
         
         const person = window.emmaWebVault.vaultData.content.people[personId];
         if (!person) {
-          console.error('❌ PEOPLE: Person not found with ID:', personId);
+          console.error('[PEOPLE] Person not found with ID:', personId);
           return;
         }
         
-        console.log('🔗 PEOPLE: Opening person dialog for:', person.name);
+        console.log('[PEOPLE] Opening person dialog for:', person.name);
         await openPersonDetailModal(person);
         
       } catch (error) {
-        console.error('❌ PEOPLE: Error opening person by ID:', error);
+        console.error('[PEOPLE] Error opening person by ID:', error);
       }
     }
 
@@ -2659,21 +2931,21 @@ <h2 class="modal-title">Edit Person</h2>
       initNeuralNetwork();
 
       // FIXED: Vault should be immediately available now, just load people
-      console.log('👥 PEOPLE: Loading people from vault...');
+      console.log('[PEOPLE] Loading people from vault...');
       setTimeout(() => {
         if (window.emmaWebVault && typeof window.emmaWebVault.listPeople === 'function') {
-          console.log('✅ PEOPLE: Vault confirmed ready, loading people...');
+          console.log('[PEOPLE] Vault confirmed ready, loading people...');
           loadPeople();
           
-          // 🎯 AUTO-OPEN: Check if a specific person should be opened from URL param
+          // TODO AUTO-OPEN: Check if a specific person should be opened from URL param
           const urlParams = new URLSearchParams(window.location.search);
           const personId = urlParams.get('person');
           if (personId) {
-            console.log('🔗 PEOPLE: Auto-opening person from URL:', personId);
+            console.log('[PEOPLE] Auto-opening person from URL:', personId);
             setTimeout(() => openPersonFromId(personId), 300); // Give time for people to load
           }
         } else {
-          console.error('❌ PEOPLE: Vault still not available, showing empty state');
+          console.error('[PEOPLE] Vault still not available, showing empty state');
           renderPeople(); // Show empty state
         }
       }, 500); // Brief delay to ensure vault is fully initialized
@@ -2681,3 +2953,23 @@ <h2 class="modal-title">Edit Person</h2>
   </script>
 </body>
 </html>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/pages/people.html b/pages/people.html
index db10b2b6..df9f93da 100644
--- a/pages/people.html
+++ b/pages/people.html
@@ -2,712 +2,43 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Emma People Management</title>
-  <link rel="stylesheet" href="../css/main.css">
+  <meta http-equiv="refresh" content="0; url=people-emma.html">
+  <title>People Page Moved</title>
   <style>
-    /* People Management Styles */
-    .people-container {
-      max-width: 1200px;
-      margin: 0 auto;
-      padding: 20px;
-      min-height: 100vh;
-      background: var(--emma-bg-gradient);
-    }
-
-    .people-header {
-      display: flex;
-      flex-direction: column;
-      gap: 16px;
-      margin-bottom: 32px;
-    }
-
-    .header-top {
-      display: flex;
-      justify-content: space-between;
-      align-items: flex-start;
-      flex-wrap: wrap;
-      gap: 16px;
-    }
-
-    .header-info h1 {
-      font-size: 2rem;
-      font-weight: 700;
-      color: var(--emma-text);
-      margin: 0 0 8px 0;
-    }
-
-    .header-info p {
-      color: var(--emma-text-secondary);
-      margin: 0;
-    }
-
-    .add-person-btn {
-      display: inline-flex;
-      align-items: center;
-      gap: 8px;
-      padding: 12px 20px;
-      background: var(--emma-purple);
-      color: white;
-      border: none;
-      border-radius: 12px;
-      font-weight: 600;
-      cursor: pointer;
-      transition: all 0.3s ease;
-    }
-
-    .add-person-btn:hover {
-      background: var(--emma-purple-hover);
-      transform: translateY(-2px);
-    }
-
-    .controls-section {
-      display: flex;
-      flex-direction: column;
-      gap: 16px;
-    }
-
-    .search-filter-row {
-      display: flex;
-      gap: 16px;
-      flex-wrap: wrap;
-    }
-
-    .search-container {
-      flex: 1;
-      min-width: 300px;
-      position: relative;
-    }
-
-    .search-input {
-      width: 100%;
-      padding: 12px 16px 12px 44px;
-      background: var(--emma-card-bg);
-      border: 1px solid var(--emma-border);
-      border-radius: 12px;
-      color: var(--emma-text);
-      font-size: 14px;
-      outline: none;
-      transition: all 0.3s ease;
-    }
-
-    .search-input:focus {
-      border-color: var(--emma-purple);
-      box-shadow: 0 0 0 3px rgba(118, 75, 162, 0.1);
-    }
-
-    .search-icon {
-      position: absolute;
-      left: 12px;
-      top: 50%;
-      transform: translateY(-50%);
-      color: var(--emma-text-secondary);
-      width: 20px;
-      height: 20px;
-    }
-
-    .filter-select {
-      padding: 12px 16px;
-      background: var(--emma-card-bg);
-      border: 1px solid var(--emma-border);
-      border-radius: 12px;
-      color: var(--emma-text);
-      font-size: 14px;
-      outline: none;
-      min-width: 180px;
-      transition: all 0.3s ease;
-    }
-
-    .filter-select:focus {
-      border-color: var(--emma-purple);
-      box-shadow: 0 0 0 3px rgba(118, 75, 162, 0.1);
-    }
-
-    /* Stats Grid */
-    .stats-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-      gap: 16px;
-      margin-bottom: 32px;
-    }
-
-    .stat-card {
-      background: var(--emma-card-bg);
-      backdrop-filter: blur(20px);
-      border: 1px solid var(--emma-border);
-      border-radius: 16px;
-      padding: 24px;
-      display: flex;
-      align-items: center;
-      gap: 16px;
-      transition: all 0.3s ease;
-    }
-
-    .stat-card:hover {
-      transform: translateY(-4px);
-      box-shadow: 0 8px 32px rgba(118, 75, 162, 0.15);
-    }
-
-    .stat-icon {
-      width: 48px;
-      height: 48px;
-      border-radius: 12px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 24px;
-    }
-
-    .stat-icon.total { background: rgba(118, 75, 162, 0.1); }
-    .stat-icon.family { background: rgba(239, 68, 68, 0.1); }
-    .stat-icon.colleagues { background: rgba(59, 130, 246, 0.1); }
-
-    .stat-info h3 {
-      font-size: 12px;
-      font-weight: 500;
-      color: var(--emma-text-secondary);
-      margin: 0 0 4px 0;
-      text-transform: uppercase;
-      letter-spacing: 0.5px;
-    }
-
-    .stat-info .stat-value {
-      font-size: 24px;
-      font-weight: 700;
-      color: var(--emma-text);
-      margin: 0;
-    }
-
-    /* People Grid */
-    .people-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-      gap: 20px;
-      margin-bottom: 32px;
-    }
-
-    .person-card {
-      background: var(--emma-card-bg);
-      backdrop-filter: blur(20px);
-      border: 1px solid var(--emma-border);
-      border-radius: 16px;
-      padding: 20px;
-      cursor: pointer;
-      transition: all 0.3s ease;
-      position: relative;
-      overflow: hidden;
-    }
-
-    .person-card::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      height: 3px;
-      background: var(--emma-gradient-1);
-      opacity: 0;
-      transition: opacity 0.3s ease;
-    }
-
-    .person-card:hover {
-      transform: translateY(-4px);
-      box-shadow: 0 12px 32px rgba(118, 75, 162, 0.2);
-      border-color: var(--emma-purple);
-    }
-
-    .person-card:hover::before {
-      opacity: 1;
-    }
-
-    .person-avatar {
-      width: 64px;
-      height: 64px;
-      border-radius: 50%;
-      background: var(--emma-gradient-1);
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
       display: flex;
       align-items: center;
       justify-content: center;
-      font-size: 24px;
-      font-weight: 600;
-      color: white;
-      margin-bottom: 16px;
-    }
-
-    .person-info h3 {
-      font-size: 18px;
-      font-weight: 600;
-      color: var(--emma-text);
-      margin: 0 0 8px 0;
-    }
-
-    .person-relationship {
-      display: inline-flex;
-      align-items: center;
-      gap: 4px;
-      padding: 4px 8px;
-      background: rgba(118, 75, 162, 0.1);
-      color: var(--emma-purple);
-      border-radius: 6px;
-      font-size: 12px;
-      font-weight: 500;
-      margin-bottom: 12px;
-    }
-
-    .person-notes {
-      color: var(--emma-text-secondary);
-      font-size: 14px;
-      line-height: 1.4;
+      min-height: 100vh;
       margin: 0;
-      overflow: hidden;
-      display: -webkit-box;
-      -webkit-line-clamp: 2;
-      -webkit-box-orient: vertical;
+      background: #0f0c29;
+      color: #fff;
     }
-
-    /* Empty State */
-    .empty-state {
+    .notice {
       text-align: center;
-      padding: 60px 20px;
-    }
-
-    .empty-state-icon {
-      width: 80px;
-      height: 80px;
-      margin: 0 auto 24px;
-      color: var(--emma-text-secondary);
-      opacity: 0.5;
-    }
-
-    .empty-state h3 {
-      font-size: 20px;
-      font-weight: 600;
-      color: var(--emma-text);
-      margin: 0 0 12px 0;
-    }
-
-    .empty-state p {
-      color: var(--emma-text-secondary);
-      margin: 0 0 24px 0;
-      max-width: 400px;
-      margin-left: auto;
-      margin-right: auto;
-    }
-
-    /* Loading State */
-    .loading-state {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 60px 20px;
+      max-width: 420px;
+      line-height: 1.6;
     }
-
-    .spinner {
-      width: 40px;
-      height: 40px;
-      border: 3px solid var(--emma-border);
-      border-top-color: var(--emma-purple);
-      border-radius: 50%;
-      animation: spin 1s linear infinite;
-    }
-
-    @keyframes spin {
-      to { transform: rotate(360deg); }
-    }
-
-    /* Back Section */
-    .back-section {
-      display: flex;
-      justify-content: center;
-      padding: 20px;
-      border-top: 1px solid var(--emma-border);
-      margin-top: 32px;
-    }
-
-    /* Modal Overlay */
-    .modal-overlay {
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background: rgba(0, 0, 0, 0.7);
-      backdrop-filter: blur(8px);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      z-index: 1000;
-      opacity: 0;
-      visibility: hidden;
-      transition: all 0.3s ease;
-    }
-
-    .modal-overlay.active {
-      opacity: 1;
-      visibility: visible;
-    }
-
-    .modal {
-      background: rgba(30, 30, 40, 0.98);
-      backdrop-filter: blur(20px);
-      border: 1px solid rgba(134, 88, 255, 0.3);
-      border-radius: 20px;
-      padding: 32px;
-      max-width: 500px;
-      width: 90%;
-      max-height: 80vh;
-      overflow-y: auto;
-      transform: scale(0.9);
-      transition: transform 0.3s ease;
-    }
-
-    .modal-overlay.active .modal {
-      transform: scale(1);
-    }
-
-    .modal-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 24px;
-    }
-
-    .modal-header h2 {
-      font-size: 24px;
-      font-weight: 600;
-      color: #ffffff;
-      margin: 0;
-    }
-
-    .close-btn {
-      width: 32px;
-      height: 32px;
-      border: none;
-      background: none;
-      color: var(--emma-text-secondary);
-      cursor: pointer;
-      border-radius: 50%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      transition: all 0.2s ease;
-    }
-
-    .close-btn:hover {
-      background: var(--emma-border);
-      color: var(--emma-text);
-    }
-
-    /* Form Styles */
-    .form-group {
-      margin-bottom: 20px;
-    }
-
-    .form-label {
-      display: block;
-      font-size: 14px;
-      font-weight: 600;
-      color: #ffffff;
-      margin-bottom: 8px;
-    }
-
-    .form-input {
-      width: 100%;
-      padding: 12px 16px;
-      background: rgba(255, 255, 255, 0.95);
-      border: 1px solid rgba(134, 88, 255, 0.2);
-      border-radius: 12px;
-      color: #333333;
-      font-size: 14px;
-      outline: none;
-      transition: all 0.3s ease;
-    }
-
-    .form-input:focus {
-      border-color: #8658ff;
-      box-shadow: 0 0 0 3px rgba(134, 88, 255, 0.1);
-      background: rgba(255, 255, 255, 1);
-    }
-
-    .form-input option {
-      background: rgba(255, 255, 255, 0.95);
-      color: #333333;
-      padding: 8px 12px;
-    }
-
-    /* Ensure dropdowns are visible */
-    select.form-input {
-      background: rgba(255, 255, 255, 0.95);
-      color: #333333;
-      cursor: pointer;
-    }
-
-    select.form-input option {
-      background: white;
-      color: #333333;
-    }
-
-    .form-textarea {
-      min-height: 80px;
-      resize: vertical;
-    }
-
-    .form-buttons {
-      display: flex;
-      gap: 12px;
-      justify-content: flex-end;
-      margin-top: 32px;
-    }
-
-    .btn {
-      padding: 12px 20px;
-      border: none;
-      border-radius: 12px;
-      font-weight: 600;
-      cursor: pointer;
-      transition: all 0.3s ease;
-    }
-
-    .btn-primary {
-      background: var(--emma-purple);
-      color: white;
-    }
-
-    .btn-primary:hover {
-      background: var(--emma-purple-hover);
-      transform: translateY(-2px);
-    }
-
-    .btn-secondary {
-      background: var(--emma-border);
-      color: var(--emma-text);
-    }
-
-    .btn-secondary:hover {
-      background: var(--emma-text-secondary);
-      color: white;
-    }
-
-    /* Responsive Design */
-    @media (max-width: 768px) {
-      .people-container {
-        padding: 16px;
-      }
-
-      .header-top {
-        flex-direction: column;
-        align-items: stretch;
-      }
-
-      .search-filter-row {
-        flex-direction: column;
-      }
-
-      .search-container {
-        min-width: auto;
-      }
-
-      .people-grid {
-        grid-template-columns: 1fr;
-      }
-
-      .stats-grid {
-        grid-template-columns: 1fr;
-      }
+    a {
+      color: #deb3e4;
     }
   </style>
+  <script>
+    (function redirect() {
+      var target = 'people-emma.html' + window.location.search + window.location.hash;
+      try {
+        window.location.replace(target);
+      } catch (err) {
+        window.location.href = target;
+      }
+    }());
+  </script>
 </head>
 <body>
-  <div class="people-container">
-    <!-- Header -->
-    <div class="people-header">
-      <div class="header-top">
-        <div class="header-info">
-          <h1>People</h1>
-          <p>Manage your family, friends, and connections</p>
-        </div>
-        <button class="add-person-btn" id="addPersonBtn">
-          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
-            <circle cx="8.5" cy="7" r="4"/>
-            <line x1="20" y1="8" x2="20" y2="14"/>
-            <line x1="23" y1="11" x2="17" y2="11"/>
-          </svg>
-          Add Person
-        </button>
-      </div>
-
-      <!-- Search and Filters -->
-      <div class="controls-section">
-        <div class="search-filter-row">
-          <div class="search-container">
-            <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <circle cx="11" cy="11" r="8"/>
-              <path d="M21 21l-4.35-4.35"/>
-            </svg>
-            <input 
-              type="text" 
-              class="search-input" 
-              placeholder="Search people..."
-              id="searchInput"
-
-            >
-          </div>
-          <select class="filter-select" id="relationshipFilter">
-            <option value="all">All People</option>
-            <option value="family">Family</option>
-            <option value="friend">Friends</option>
-            <option value="best_friend">Best Friends</option>
-            <option value="romantic">Romantic</option>
-            <option value="colleague">Colleagues</option>
-          </select>
-        </div>
-      </div>
-    </div>
-
-    <!-- Stats Grid -->
-    <div class="stats-grid" id="statsGrid">
-      <div class="stat-card">
-        <div class="stat-icon total">👥</div>
-        <div class="stat-info">
-          <h3>Total People</h3>
-          <p class="stat-value" id="totalCount">0</p>
-        </div>
-      </div>
-      <div class="stat-card">
-        <div class="stat-icon family">❤️</div>
-        <div class="stat-info">
-          <h3>Family & Close</h3>
-          <p class="stat-value" id="familyCount">0</p>
-        </div>
-      </div>
-      <div class="stat-card">
-        <div class="stat-icon colleagues">💼</div>
-        <div class="stat-info">
-          <h3>Colleagues</h3>
-          <p class="stat-value" id="colleagueCount">0</p>
-        </div>
-      </div>
-    </div>
-
-    <!-- People Grid -->
-    <div class="people-grid" id="peopleGrid">
-      <!-- People cards will be inserted here -->
-    </div>
-
-    <!-- Loading State -->
-    <div class="loading-state" id="loadingState">
-      <div class="spinner"></div>
-    </div>
-
-    <!-- Empty State -->
-    <div class="empty-state" id="emptyState" style="display: none;">
-      <svg class="empty-state-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-        <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
-        <circle cx="9" cy="7" r="4"/>
-        <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
-        <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
-      </svg>
-      <h3>No people found</h3>
-      <p id="emptyStateMessage">Start by adding your first person to begin building your network.</p>
-      <button class="add-person-btn" id="addPersonBtnEmpty">
-        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-          <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
-          <circle cx="8.5" cy="7" r="4"/>
-          <line x1="20" y1="8" x2="20" y2="14"/>
-          <line x1="23" y1="11" x2="17" y2="11"/>
-        </svg>
-        Add Your First Person
-      </button>
-    </div>
-  </div>
-
-  <!-- Universal Navigation -->
-  <div class="back-section">
-    <button type="button" id="people-back-btn" class="btn-secondary">
-      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width: 16px; height: 16px; margin-right: 8px;">
-        <path d="m12 19-7-7 7-7"/>
-        <path d="m19 12H5"/>
-      </svg>
-      Back to Dashboard
-    </button>
-  </div>
-
-  <!-- Add Person Modal -->
-  <div class="modal-overlay" id="addPersonModal">
-    <div class="modal">
-      <div class="modal-header">
-        <h2>Add Person</h2>
-        <button class="close-btn" id="closeModalBtn">×</button>
-      </div>
-      <form id="addPersonForm">
-        <div class="form-group">
-          <label class="form-label" for="personName">Name *</label>
-          <input type="text" class="form-input" id="personName" required>
-        </div>
-        <div class="form-group">
-          <label class="form-label" for="personEmail">Email</label>
-          <input type="email" class="form-input" id="personEmail">
-        </div>
-        <div class="form-group">
-          <label class="form-label" for="personPhone">Phone</label>
-          <input type="tel" class="form-input" id="personPhone">
-        </div>
-        <div class="form-group">
-          <label class="form-label" for="personRelationship">Relationship *</label>
-          <select class="form-input" id="personRelationship" required>
-            <option value="">Select relationship</option>
-            <option value="self">Myself</option>
-            <option value="family">Family</option>
-            <option value="friend">Friend</option>
-            <option value="best_friend">Best Friend</option>
-            <option value="romantic">Romantic Partner</option>
-            <option value="colleague">Colleague</option>
-          </select>
-        </div>
-        <div class="form-group">
-          <label class="form-label" for="personNotes">Notes</label>
-          <textarea class="form-input form-textarea" id="personNotes" placeholder="Additional notes about this person..."></textarea>
-        </div>
-        <div class="form-buttons">
-          <button type="button" class="btn btn-secondary" id="cancelBtn">Cancel</button>
-          <button type="submit" class="btn btn-primary">Add Person</button>
-        </div>
-      </form>
-    </div>
+  <div class="notice">
+    <h1>Redirecting…</h1>
+    <p>We moved the People experience to <a href="people-emma.html">people-emma.html</a>. You should be redirected automatically.</p>
   </div>
-
-  <!-- Emma Orb System -->
-  <script src="../js/emma-orb.js"></script>
-  <script src="../js/settings-service.js"></script> 
-  <script src="../js/orb-experience-manager.js"></script>
-  <script src="../js/experience-popup-base.js"></script>
-  <script src="../js/assistant-experience-popup.js"></script>
-  <script src="../js/dementia-experience-popup.js"></script>
-  <script src="../js/mirror-experience-popup.js"></script>
-  <script src="../js/universal-emma-orb.js"></script>
-  
-  <!-- Initialize Universal Orb for Extension Page -->
-  <script>
-    if (document.readyState === 'loading') {
-      document.addEventListener('DOMContentLoaded', () => {
-        setTimeout(() => {
-          if (window.UniversalEmmaOrb) {
-            window.UniversalEmmaOrb.initialize();
-            console.log('🌍 PEOPLE: Emma orb initialized');
-          }
-        }, 100);
-      });
-    } else {
-      setTimeout(() => {
-        if (window.UniversalEmmaOrb) {
-          window.UniversalEmmaOrb.initialize();
-          console.log('🌍 PEOPLE: Emma orb initialized');
-        }
-      }, 100);
-    }
-  </script>
-
-  <script type="module" src="../js/people-page.js"></script>
 </body>
 </html>
diff --git a/pages/persona.html b/pages/persona.html
index 1058671e..3609375b 100644
--- a/pages/persona.html
+++ b/pages/persona.html
@@ -12,7 +12,7 @@
     .container { max-width: 960px; margin: 0 auto; padding: 24px; }
     .header { display:flex; align-items:center; justify-content:space-between; margin-bottom: 16px; }
     .title { display:flex; align-items:center; gap:12px; }
-    .logo { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%); display:flex; align-items:center; justify-content:center; font-size:20px; }
+    .logo { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #6f63d9 0%, #6d28d9 100%); display:flex; align-items:center; justify-content:center; font-size:20px; }
     .heading { font-weight: 700; font-size: 20px; }
     .actions { display:flex; gap:10px; }
     .btn { background: linear-gradient(135deg, #7c3aed, #6d28d9); border:1px solid var(--border); color:#fff; padding:10px 14px; border-radius:10px; cursor:pointer; font-weight:600; }
@@ -24,16 +24,16 @@
     .chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
     .chip { padding:6px 10px; border-radius:999px; background: rgba(139,69,255,.12); border:1px solid rgba(139,69,255,.25); font-size:12px; color:#ddd; }
   </style>
-  <script defer src="../js/persona.js"></script>
-  <script defer src="../js/emma-orb.js"></script>
-  <script defer src="../js/settings-service.js"></script>
-  <script defer src="../js/base-orb.js"></script>
-  <script defer src="../js/emma-assistant.js"></script>
-  <script defer src="../js/emma-dementia-styles.js"></script>
-  <script defer src="../js/emma-dementia-companion.js"></script>
-  <script defer src="../js/emma-mirror-companion.js"></script>
-  <script defer src="../js/orb-manager.js"></script>
-  <script>
+  <script nonce="c3RhdGljLWlubGluZQ==" defer src="../js/persona.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" defer src="../js/emma-orb.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" defer src="../js/settings-service.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" defer src="../js/base-orb.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" defer src="../js/emma-assistant.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" defer src="../js/emma-dementia-styles.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" defer src="../js/emma-dementia-companion.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" defer src="../js/emma-mirror-companion.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" defer src="../js/orb-manager.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==">
     // Small helper for nav from a normal tab (cannot open popup.html directly)
     function openDashboard() { chrome.tabs.create({ url: chrome.runtime.getURL('memories.html') }); }
     
diff --git a/pages/popup.html b/pages/popup.html
index 9b607719..2f88b132 100644
--- a/pages/popup.html
+++ b/pages/popup.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' data:; style-src 'self' 'unsafe-inline'; script-src 'self'; connect-src 'self' data:;">
+  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' data:; style-src 'self' 'unsafe-inline'; script-src 'self' 'nonce-static-inline'; connect-src 'self' data:;">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Emma Memory</title>
   <link rel="stylesheet" href="../css/popup.css">
@@ -609,17 +609,17 @@ <h4>Family</h4>
   </div>
 
   <!-- Universal Emma Orb System - Direct Loading for Extension Pages -->
-  <script src="../js/emma-orb.js"></script>
-  <script src="../js/settings-service.js"></script> 
-  <script src="../js/orb-experience-manager.js"></script>
-  <script src="../js/experience-popup-base.js"></script>
-  <script src="../js/assistant-experience-popup.js"></script>
-  <script src="../js/dementia-experience-popup.js"></script>
-  <script src="../js/mirror-experience-popup.js"></script>
-  <script src="../js/universal-emma-orb.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/emma-orb.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/settings-service.js"></script> 
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/orb-experience-manager.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/experience-popup-base.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/assistant-experience-popup.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/dementia-experience-popup.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/mirror-experience-popup.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/universal-emma-orb.js"></script>
   
   <!-- Initialize Universal Orb for Extension Page -->
-  <script>
+  <script nonce="c3RhdGljLWlubGluZQ==">
     if (document.readyState === 'loading') {
       document.addEventListener('DOMContentLoaded', () => {
         setTimeout(() => window.UniversalEmmaOrb.initialize(), 100);
@@ -630,8 +630,8 @@ <h4>Family</h4>
   </script>
   
   <!-- WEBAPP-FIRST: Load vault status checker before popup -->
-  <script src="../js/vault-status-checker.js"></script>
-  <script src="../js/popup-vault-integration.js"></script>
-  <script src="../js/popup.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/vault-status-checker.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/popup-vault-integration.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/popup.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/pages/privacy.html b/pages/privacy.html
index 01427a1f..5dfb893c 100644
--- a/pages/privacy.html
+++ b/pages/privacy.html
@@ -4,7 +4,10 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Privacy Policy - Emma</title>
+  <link rel="stylesheet" href="../css/theme-tokens.css">
   <link rel="stylesheet" href="../css/main.css">
+  <script src="../themes/theme-catalog.js"></script>
+  <script src="../js/theme-manager.js"></script>
   <style>
     .privacy-content {
       max-width: 800px;
@@ -218,4 +221,4 @@ <h3>Questions or Concerns?</h3>
     </div>
   </div>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/pages/relationships.html b/pages/relationships.html
index 7a756b97..885d7a14 100644
--- a/pages/relationships.html
+++ b/pages/relationships.html
@@ -4,7 +4,10 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Relationships - Emma</title>
+  <link rel="stylesheet" href="../css/theme-tokens.css">
   <link rel="stylesheet" href="../css/main.css">
+  <script src="../themes/theme-catalog.js"></script>
+  <script src="../js/theme-manager.js"></script>
   <style>
     .relationships-container {
       max-width: 1200px;
@@ -75,8 +78,8 @@
 
     .category-card.family::before { background: linear-gradient(90deg, #ef4444, #f59e0b); }
     .category-card.friends::before { background: linear-gradient(90deg, #10b981, #3b82f6); }
-    .category-card.romantic::before { background: linear-gradient(90deg, #ec4899, #f43f5e); }
-    .category-card.colleagues::before { background: linear-gradient(90deg, #6366f1, #8b5cf6); }
+    .category-card.romantic::before { background: linear-gradient(90deg, #d06fa8, #f43f5e); }
+    .category-card.colleagues::before { background: linear-gradient(90deg, #6366f1, #6f63d9); }
 
     .category-icon {
       font-size: 48px;
@@ -347,7 +350,7 @@ <h2 class="insights-title">
     </div>
   </div>
 
-  <script>
+  <script nonce="c3RhdGljLWlubGluZQ==">
     // Load and display relationship statistics
     document.addEventListener('DOMContentLoaded', function() {
       loadRelationshipStats();
@@ -403,4 +406,4 @@ <h2 class="insights-title">
     }
   </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/pages/reset-vault.html b/pages/reset-vault.html
index a16bfe2b..ec5de892 100644
--- a/pages/reset-vault.html
+++ b/pages/reset-vault.html
@@ -74,7 +74,7 @@ <h2>🔧 Recommended Fix</h2>
     <button onclick="goToWelcome()">🚀 Go to Welcome Page</button>
   </div>
 
-  <script>
+  <script nonce="c3RhdGljLWlubGluZQ==">
     async function checkStatus() {
       try {
         const response = await chrome.runtime.sendMessage({ action: 'vault.getStatus' });
diff --git a/pages/vault-migration.html b/pages/vault-migration.html
index ee2ef2d3..06767844 100644
--- a/pages/vault-migration.html
+++ b/pages/vault-migration.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Emma Vault Migration - Revolutionary Memory Preservation</title>
-    <link rel="stylesheet" href="../css/dashboard-secure.css">
+    <link rel="stylesheet" href="../css/dashboard-base.css">
     <style>
         /* Migration-specific styles with Emma branding */
         .migration-container {
@@ -16,16 +16,16 @@
         .migration-hero {
             text-align: center;
             margin-bottom: 3rem;
-            background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(236, 72, 153, 0.1));
+            background: linear-gradient(135deg, rgba(111, 99, 217, 0.1), rgba(208, 111, 168, 0.1));
             border-radius: 20px;
             padding: 3rem;
             backdrop-filter: blur(10px);
-            border: 1px solid rgba(139, 92, 246, 0.2);
+            border: 1px solid rgba(111, 99, 217, 0.2);
         }
 
         .migration-hero h1 {
             font-size: 2.5rem;
-            background: linear-gradient(135deg, #8b5cf6, #ec4899);
+            background: linear-gradient(135deg, #6f63d9, #d06fa8);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
             margin-bottom: 1rem;
@@ -39,7 +39,7 @@
 
         .revolution-badge {
             display: inline-block;
-            background: linear-gradient(135deg, #8b5cf6, #ec4899);
+            background: linear-gradient(135deg, #6f63d9, #d06fa8);
             color: white;
             padding: 0.5rem 1.5rem;
             border-radius: 25px;
@@ -58,7 +58,7 @@
             background: rgba(15, 23, 42, 0.8);
             border-radius: 16px;
             padding: 2rem;
-            border: 1px solid rgba(139, 92, 246, 0.2);
+            border: 1px solid rgba(111, 99, 217, 0.2);
             backdrop-filter: blur(10px);
         }
 
@@ -71,7 +71,7 @@
         .step-number {
             width: 40px;
             height: 40px;
-            background: linear-gradient(135deg, #8b5cf6, #ec4899);
+            background: linear-gradient(135deg, #6f63d9, #d06fa8);
             border-radius: 50%;
             display: flex;
             align-items: center;
@@ -96,7 +96,7 @@
             background: rgba(15, 23, 42, 0.8);
             border-radius: 16px;
             padding: 2rem;
-            border: 1px solid rgba(139, 92, 246, 0.2);
+            border: 1px solid rgba(111, 99, 217, 0.2);
             margin-bottom: 2rem;
             display: none;
         }
@@ -104,7 +104,7 @@
         .progress-bar {
             width: 100%;
             height: 8px;
-            background: rgba(139, 92, 246, 0.2);
+            background: rgba(111, 99, 217, 0.2);
             border-radius: 4px;
             overflow: hidden;
             margin: 1rem 0;
@@ -112,7 +112,7 @@
 
         .progress-fill {
             height: 100%;
-            background: linear-gradient(90deg, #8b5cf6, #ec4899);
+            background: linear-gradient(90deg, #6f63d9, #d06fa8);
             transition: width 0.3s ease;
             width: 0%;
         }
@@ -133,7 +133,7 @@
             background: rgba(15, 23, 42, 0.8);
             border-radius: 16px;
             padding: 2rem;
-            border: 1px solid rgba(139, 92, 246, 0.2);
+            border: 1px solid rgba(111, 99, 217, 0.2);
             backdrop-filter: blur(10px);
         }
 
@@ -152,7 +152,7 @@
             width: 100%;
             padding: 0.75rem;
             background: rgba(30, 41, 59, 0.8);
-            border: 1px solid rgba(139, 92, 246, 0.3);
+            border: 1px solid rgba(111, 99, 217, 0.3);
             border-radius: 8px;
             color: white;
             font-size: 1rem;
@@ -160,12 +160,12 @@
 
         .form-input:focus {
             outline: none;
-            border-color: #8b5cf6;
-            box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);
+            border-color: #6f63d9;
+            box-shadow: 0 0 0 2px rgba(111, 99, 217, 0.2);
         }
 
         .migration-button {
-            background: linear-gradient(135deg, #8b5cf6, #ec4899);
+            background: linear-gradient(135deg, #6f63d9, #d06fa8);
             color: white;
             border: none;
             padding: 1rem 2rem;
@@ -180,7 +180,7 @@
 
         .migration-button:hover {
             transform: translateY(-2px);
-            box-shadow: 0 10px 30px rgba(139, 92, 246, 0.3);
+            box-shadow: 0 10px 30px rgba(111, 99, 217, 0.3);
         }
 
         .migration-button:disabled {
@@ -232,19 +232,19 @@
             left: 2rem;
             width: 60px;
             height: 60px;
-            background: linear-gradient(135deg, #8b5cf6, #ec4899);
+            background: linear-gradient(135deg, #6f63d9, #d06fa8);
             border: none;
             border-radius: 50%;
             color: white;
             font-size: 1.5rem;
             cursor: pointer;
             transition: all 0.3s ease;
-            box-shadow: 0 4px 20px rgba(139, 92, 246, 0.3);
+            box-shadow: 0 4px 20px rgba(111, 99, 217, 0.3);
         }
 
         .home-button:hover {
             transform: translateY(-2px);
-            box-shadow: 0 8px 30px rgba(139, 92, 246, 0.4);
+            box-shadow: 0 8px 30px rgba(111, 99, 217, 0.4);
         }
 
         .benefits-grid {
@@ -258,7 +258,7 @@
             background: rgba(15, 23, 42, 0.6);
             border-radius: 12px;
             padding: 1.5rem;
-            border: 1px solid rgba(139, 92, 246, 0.2);
+            border: 1px solid rgba(111, 99, 217, 0.2);
             text-align: center;
         }
 
@@ -432,12 +432,12 @@ <h2 style="color: white; margin-bottom: 1.5rem; text-align: center;">
         </div>
     </div>
 
-    <script>
+    <script nonce="c3RhdGljLWlubGluZQ==">
         // Migration management
         let migrationInProgress = false;
 
         function navigateHome() {
-            window.location.href = 'dashboard-new.html';
+            window.location.href = '../dashboard.html';
         }
 
         async function startMigration() {
diff --git a/pages/welcome.html b/pages/welcome.html
index be946790..52e09898 100644
--- a/pages/welcome.html
+++ b/pages/welcome.html
@@ -10,11 +10,11 @@
   <style>
     /* Emma Brand Variables */
     :root {
-      --emma-gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
+      --emma-gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #deb3e4 100%);
       --emma-gradient-2: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #a855f7 100%);
       --emma-bg-gradient: linear-gradient(135deg, #1a1033 0%, #2d1b69 50%, #0f0c29 100%);
       --emma-purple: #764ba2;
-      --emma-pink: #f093fb;
+      --emma-pink: #deb3e4;
       --emma-dark: #1a1033;
       --emma-card-bg: rgba(255, 255, 255, 0.05);
       --emma-border: rgba(255, 255, 255, 0.1);
@@ -50,7 +50,7 @@
       width: 200%;
       height: 200%;
       background: radial-gradient(circle at 20% 20%, rgba(102, 126, 234, 0.3) 0%, transparent 50%),
-                  radial-gradient(circle at 80% 80%, rgba(240, 147, 251, 0.3) 0%, transparent 50%),
+                  radial-gradient(circle at 80% 80%, rgba(222, 179, 228, 0.3) 0%, transparent 50%),
                   radial-gradient(circle at 40% 60%, rgba(118, 75, 162, 0.2) 0%, transparent 50%);
       animation: float 20s ease-in-out infinite;
       z-index: -1;
@@ -136,7 +136,7 @@
       font-size: 48px;
       font-weight: 700;
       letter-spacing: 1px;
-      background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #deb3e4 100%);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
@@ -515,7 +515,7 @@
     }
 
     .feature-card.ai::before { background: linear-gradient(90deg, #4f46e5, #7c3aed); }
-    .feature-card.memory::before { background: linear-gradient(90deg, #f093fb, #764ba2); }
+    .feature-card.memory::before { background: linear-gradient(90deg, #deb3e4, #764ba2); }
     .feature-card.security::before { background: linear-gradient(90deg, #10b981, #059669); }
     .feature-card.mtap::before { background: linear-gradient(90deg, #f59e0b, #d97706); }
 
@@ -577,14 +577,14 @@
       left: 0;
       right: 0;
       height: 4px;
-      background: linear-gradient(90deg, #f093fb, #667eea, #764ba2);
+      background: linear-gradient(90deg, #deb3e4, #667eea, #764ba2);
     }
 
     .hml-title {
       font-size: 28px;
       font-weight: 700;
       margin-bottom: 16px;
-      background: linear-gradient(90deg, #f093fb, #667eea);
+      background: linear-gradient(90deg, #deb3e4, #667eea);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
@@ -905,19 +905,19 @@ <h3>MTAP Protocol</h3>
   </div>
 
   <!-- Emma Orb Script -->
-  <script src="../js/emma-orb.js"></script>
-  <script src="../js/settings-service.js"></script>
-  <script src="../js/base-orb.js"></script>
-  <script src="../js/emma-assistant.js"></script>
-  <script src="../js/emma-dementia-styles.js"></script>
-  <script src="../js/emma-dementia-companion.js"></script>
-  <script src="../js/emma-mirror-companion.js"></script>
-  <script src="../js/orb-manager.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/emma-orb.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/settings-service.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/base-orb.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/emma-assistant.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/emma-dementia-styles.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/emma-dementia-companion.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/emma-mirror-companion.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/orb-manager.js"></script>
   <!-- Welcome Page Script -->
-  <script src="../js/welcome.js"></script>
+  <script nonce="c3RhdGljLWlubGluZQ==" src="../js/welcome.js"></script>
   
   <!-- Initialize Universal Orb System -->
-  <script>
+  <script nonce="c3RhdGljLWlubGluZQ==">
     (function() {
       function initWelcomeOrb() {
         if (window.OrbManager) {
diff --git a/server.js b/server.js
index 3abe7318..c1fcc3e6 100644
--- a/server.js
+++ b/server.js
@@ -13,26 +13,95 @@ const crypto = require('crypto');
 const WebSocket = require('ws');
 const http = require('http');
 const EmmaServerAgent = require('./emma-agent');
+const VaultService = require('./lib/vault-service');
+const { getEmmaAppManifest, APP_NAME, APP_DEFAULT_MODEL } = require('./apps/emma-openai-app');
+
+const DEFAULT_DEV_ORIGINS = ['http://localhost:3000', 'http://localhost:3001', 'http://127.0.0.1:3000'];
+const DEFAULT_PROD_ORIGINS = [
+  'https://emma-lite-optimized.onrender.com',
+  'https://emma-hjjc.onrender.com'
+];
+
+function normalizeOrigin(value) {
+  if (!value || typeof value !== 'string') return null;
+  return value.replace(/\/+$/, '').toLowerCase();
+}
+
+function parseEnvOrigins(raw) {
+  if (!raw || typeof raw !== 'string') return [];
+  return raw
+    .split(',')
+    .map(part => normalizeOrigin(part.trim()))
+    .filter(Boolean);
+}
+
+function resolveAllowedOrigins() {
+  const envOrigins = parseEnvOrigins(process.env.EMMA_ALLOWED_ORIGINS || process.env.ALLOWED_ORIGINS);
+  const renderOrigin = normalizeOrigin(process.env.RENDER_EXTERNAL_URL || process.env.RENDER_EXTERNAL_HOSTNAME);
+  if (renderOrigin) {
+    envOrigins.push(renderOrigin.startsWith('http') ? renderOrigin : `https://${renderOrigin}`);
+  }
+
+  const fallback = process.env.NODE_ENV === 'production'
+    ? DEFAULT_PROD_ORIGINS
+    : DEFAULT_DEV_ORIGINS;
+
+  const origins = [...envOrigins, ...fallback]
+    .map(normalizeOrigin)
+    .filter(Boolean);
+
+  return Array.from(new Set(origins));
+}
+
+const allowedOrigins = resolveAllowedOrigins();
+const allowedOriginSet = new Set(allowedOrigins);
+console.log('Emma Voice Service allowed origins:', allowedOrigins.length ? allowedOrigins.join(', ') : '(none)');
 
 const app = express();
 const PORT = process.env.PORT || 3000;
 
+const vaultService = new VaultService();
+// Security hardening
+app.disable('x-powered-by');
+
+// Build dynamic CSP connectSrc based on allowed origins
+const cspConnectSrc = [
+  "'self'",
+  "wss://api.openai.com",
+  "https://api.openai.com",
+  "https://cdn.jsdelivr.net"
+];
+
+// Add all allowed origins and their WebSocket variants
+allowedOrigins.forEach(origin => {
+  if (origin) {
+    cspConnectSrc.push(origin);
+    // Add WebSocket variant (wss:// for https://, ws:// for http://)
+    if (origin.startsWith('https://')) {
+      cspConnectSrc.push(origin.replace('https://', 'wss://'));
+    } else if (origin.startsWith('http://')) {
+      cspConnectSrc.push(origin.replace('http://', 'ws://'));
+    }
+  }
+});
+
+console.log('Emma CSP connectSrc:', cspConnectSrc.join(', '));
+
 // Security middleware
 app.use(helmet({
   contentSecurityPolicy: {
     directives: {
       defaultSrc: ["'self'"],
-      scriptSrc: ["'self'", "'unsafe-inline'", "blob:", "https://cdn.jsdelivr.net"],
-      scriptSrcAttr: ["'unsafe-inline'"], // Allow inline event handlers for now
+      scriptSrc: ["'self'", "'unsafe-inline'", "blob:", "https://cdn.jsdelivr.net", "https://unpkg.com"],
+      scriptSrcAttr: ["'unsafe-inline'"],
       styleSrc: ["'self'", "'unsafe-inline'"],
       imgSrc: ["'self'", "data:", "blob:"],
-      connectSrc: ["'self'", "wss://api.openai.com", "https://api.openai.com", "https://emma-voice-backend.onrender.com", "https://cdn.jsdelivr.net"],
+      connectSrc: cspConnectSrc,
       mediaSrc: ["'self'", "blob:", "data:"],
       workerSrc: ["'self'", "blob:"],
       fontSrc: ["'self'", "data:"]
     }
   },
-  // Simplified permissions policy to avoid browser warnings
   permissionsPolicy: {
     camera: ["'self'"],
     microphone: ["'self'"],
@@ -41,13 +110,23 @@ app.use(helmet({
 }));
 
 app.use(cors({
-  origin: process.env.NODE_ENV === 'production' 
-    ? ['https://emma-hjc.onrender.com', 'https://emma-voice-backend.onrender.com'] 
-    : ['http://localhost:3000', 'http://localhost:3001', 'http://127.0.0.1:3000'],
+  origin(origin, callback) {
+    if (!origin) {
+      return callback(null, true);
+    }
+
+    const normalized = normalizeOrigin(origin);
+    if (allowedOriginSet.has(normalized)) {
+      return callback(null, true);
+    }
+
+    console.warn('Blocked CORS origin:', origin);
+    return callback(new Error('Not allowed by CORS'));
+  },
   credentials: true
 }));
 
-app.use(express.json({ limit: '1mb' }));
+app.use(express.json({ limit: '10mb' }));
 app.use(express.static('.', { 
   index: 'index.html',
   setHeaders: (res, path) => {
@@ -56,11 +135,36 @@ app.use(express.static('.', {
     }
   }
 }));
+app.use(express.json({ limit: '10mb' }));
+// Serve project assets while keeping tighter cache control for HTML
+app.use('/js', express.static(path.join(__dirname, 'js')));
+app.use('/css', express.static(path.join(__dirname, 'css')));
+app.use('/themes', express.static(path.join(__dirname, 'themes')));
+app.use('/pages', express.static(path.join(__dirname, 'pages')));
+// Serve extension artifacts only if explicitly needed (kept read-only)
+app.use('/emma-vault-extension-fixed', express.static(path.join(__dirname, 'emma-vault-extension-fixed')));
+// Root index and favicon
+app.get('/', (req, res) => res.sendFile(path.join(__dirname, 'index.html')));
+app.get('/favicon.svg', (req, res) => res.sendFile(path.join(__dirname, 'favicon.svg')));
+
+// Explicit routes for root-level dashboards to avoid SPA fallback loop.
+// NOTE: This root-level dashboard.html is the canonical dashboard entry point.
+app.get('/dashboard.html', (req, res) => res.sendFile(path.join(__dirname, 'dashboard.html')));
+app.get('/dashboard', (req, res) => res.sendFile(path.join(__dirname, 'dashboard.html')));
+[
+  'add-person.html',
+  'emma-cloud.html',
+  'chat.html'
+].forEach((file) => {
+  app.get(`/${file}`, (req, res) => res.sendFile(path.join(__dirname, file)));
+});
+
+app.get('/chat', (req, res) => res.sendFile(path.join(__dirname, 'chat.html')));
 
 // Rate limiting for token endpoint
 const tokenLimiter = new RateLimiterMemory({
   keyGenerator: (req) => req.ip,
-  points: 10, // 10 tokens per minute per IP
+  points: 10,
   duration: 60,
 });
 
@@ -70,35 +174,28 @@ const tokenLimiter = new RateLimiterMemory({
  */
 app.get('/token', async (req, res) => {
   try {
-    // Rate limiting
     await tokenLimiter.consume(req.ip);
-    
-    // Environment check
+
     if (!process.env.OPENAI_API_KEY) {
-      console.error('🚨 CRITICAL: OPENAI_API_KEY not configured');
+      console.error('CRITICAL: OPENAI_API_KEY not configured');
       return res.status(500).json({
         error: 'Voice service temporarily unavailable',
         code: 'SERVICE_UNAVAILABLE'
       });
     }
 
-    // Development mode check
     if (process.env.OPENAI_API_KEY === 'test_key' || process.env.OPENAI_API_KEY === 'test_key_placeholder') {
-      console.log('🧪 DEV MODE: Using simulated token for development');
       return res.json({
         value: 'dev_token_' + crypto.randomBytes(8).toString('hex'),
         expires_in: 300
       });
     }
 
-    // OFFICIAL GA PATTERN: Use client_secrets endpoint
     const sessionConfig = {
       session: {
-        type: "realtime",
-        model: "gpt-4o-realtime-preview-2024-12-17",
-        audio: {
-          output: { voice: "alloy" }
-        },
+        type: 'realtime',
+        model: 'gpt-4o-realtime-preview-2024-12-17',
+        audio: { output: { voice: 'alloy' } },
         instructions: `You are Emma, an intelligent memory companion built with love for families dealing with memory challenges, especially dementia.
 
 CRITICAL: Your name is Emma. Always introduce yourself as "Hello! I'm Emma, your personal memory companion."
@@ -118,12 +215,10 @@ YOUR APPROACH:
 - Never correct or challenge memories - validate them
 - Ask caring questions about people, places, and feelings
 
-You are built with infinite love for Debbe and families everywhere. 💜`
+You are built with infinite love for Debbe and families everywhere.`
       }
     };
 
-    console.log('🔑 Calling OpenAI client_secrets endpoint...');
-    
     const response = await fetch('https://api.openai.com/v1/realtime/client_secrets', {
       method: 'POST',
       headers: {
@@ -135,28 +230,21 @@ You are built with infinite love for Debbe and families everywhere. 💜`
 
     if (!response.ok) {
       const errorText = await response.text();
-      console.error('🚨 OpenAI client_secrets error:', response.status, errorText);
-      
-      // Fallback to direct API key
-      console.log('🔄 Falling back to direct API key');
-      return res.json({
-        value: process.env.OPENAI_API_KEY,
-        expires_in: 3600
+      console.error('OpenAI client_secrets error:', response.status, errorText);
+      return res.status(502).json({
+        error: 'Ephemeral token generation failed',
+        code: 'TOKEN_UPSTREAM_ERROR'
       });
     }
 
     const data = await response.json();
-    console.log('✅ Ephemeral token generated via client_secrets');
-    
-    res.json(data);
+    return res.json(data);
 
   } catch (error) {
-    console.error('🚨 TOKEN GENERATION ERROR:', error);
-    
-    // Emergency fallback
-    res.json({
-      value: process.env.OPENAI_API_KEY,
-      expires_in: 3600
+    console.error('TOKEN GENERATION ERROR:', error);
+    return res.status(502).json({
+      error: 'Token service unavailable',
+      code: 'TOKEN_SERVICE_ERROR'
     });
   }
 });
@@ -181,12 +269,45 @@ app.get('/api/health', (req, res) => {
  * SIMPLE TEST ENDPOINT - Debug deployment
  */
 app.get('/test', (req, res) => {
-  res.send('Emma Voice Backend is running! 🎙️💜');
+  res.send('Emma Voice Backend is running!');
+});
+
+const appsRouter = express.Router();
+
+appsRouter.get('/manifest', (req, res) => {
+  const model = typeof req.query.model === 'string' ? req.query.model : APP_DEFAULT_MODEL;
+  const manifest = getEmmaAppManifest({ model, vaultService });
+  res.json({
+    app: APP_NAME,
+    manifest
+  });
 });
 
+appsRouter.post('/tools/:toolName', async (req, res) => {
+  const toolName = req.params.toolName;
+
+  if (!vaultService.canExecute(toolName)) {
+    return res.status(404).json({
+      ok: false,
+      error: `Unsupported tool: ${toolName}`
+    });
+  }
+
+  try {
+    const result = await vaultService.execute(toolName, req.body || {});
+    res.json({ ok: true, result });
+  } catch (error) {
+    res.status(400).json({
+      ok: false,
+      error: error?.message || 'Tool execution failed'
+    });
+  }
+});
+
+app.use('/apps/emma', appsRouter);
+
 /**
  * CTO SECURITY: Block all other API endpoints
- * Emma is local-first - no user data APIs needed
  */
 app.use('/api/*', (req, res) => {
   res.status(404).json({
@@ -195,9 +316,8 @@ app.use('/api/*', (req, res) => {
   });
 });
 
-// Serve static files (existing Emma web app) - MUST be after API routes
+// Fallback for SPA routes (do not expose other filesystem paths)
 app.get('*', (req, res) => {
-  // Don't serve index.html for API routes
   if (req.path.startsWith('/api/') || req.path === '/token') {
     return res.status(404).json({ error: 'API endpoint not found' });
   }
@@ -206,7 +326,7 @@ app.get('*', (req, res) => {
 
 // Error handling
 app.use((err, req, res, next) => {
-  console.error('🚨 SERVER ERROR:', err);
+  console.error('SERVER ERROR:', err);
   res.status(500).json({
     error: 'Internal server error',
     code: 'SERVER_ERROR'
@@ -217,91 +337,127 @@ app.use((err, req, res, next) => {
 const server = http.createServer(app);
 
 // Create WebSocket server for Emma voice
-const wss = new WebSocket.Server({ 
+const wss = new WebSocket.Server({
   server,
   path: '/voice'
 });
 
+// WebSocket security controls
+const ALLOWED_WS_ORIGINS = new Set(allowedOrigins.map(normalizeOrigin));
+const ipConnCount = new Map();
+const MAX_WS_PER_IP = parseInt(process.env.MAX_WS_PER_IP || '5', 10);
+const chatHistories = new Map();
+
 /**
  * Emma Voice WebSocket Server
- * PRODUCTION-READY: Server-side Emma agent with browser client
  */
 wss.on('connection', (browserWs, request) => {
-  console.log('🎙️ New Emma voice session started');
-  
-  // Create Emma agent for this session
-  const emmaAgent = new EmmaServerAgent({
-    voice: 'alloy',
-    speed: 1.0,
-    tone: 'caring',
-    pacing: 2.5,
-    validationMode: true
-  });
-  
+  // Origin check
+  const origin = normalizeOrigin(request.headers.origin);
+  if (origin && !ALLOWED_WS_ORIGINS.has(origin)) {
+    try { browserWs.close(1008, 'Origin not allowed'); } catch (_) {}
+    return;
+  }
+
+  // IP connection limiting
+  const ip = request.socket?.remoteAddress || 'unknown';
+  const curr = ipConnCount.get(ip) || 0;
+  if (curr >= MAX_WS_PER_IP) {
+    try { browserWs.close(1013, 'Too many connections'); } catch (_) {}
+    return;
+  }
+  ipConnCount.set(ip, curr + 1);
+
+  let emmaAgent;
+
   // Handle messages from browser
   browserWs.on('message', async (data) => {
     try {
       const message = JSON.parse(data);
-      console.log('📨 Browser message:', message.type);
-      
       switch (message.type) {
         case 'start_session':
+          const sessionId = message.sessionId || `session_${Date.now()}`;
+          let history = chatHistories.get(sessionId);
+          if (!history) {
+            history = [];
+            chatHistories.set(sessionId, history);
+          }
+
+          emmaAgent = new EmmaServerAgent({
+            voice: 'alloy',
+            speed: 1.0,
+            tone: 'caring',
+            pacing: 2.5,
+            validationMode: true,
+            vaultService,
+            chatHistory: history
+          });
+
           await emmaAgent.startSession(browserWs);
           break;
-          
         case 'user_text':
-          // Forward user text into the agent as a message
           if (emmaAgent && emmaAgent.sendUserText) {
             await emmaAgent.sendUserText(message.text || '');
           }
           break;
 
+        case 'tool_result':
+          if (message.call_id) {
+            const payload = Object.prototype.hasOwnProperty.call(message, 'result')
+              ? message.result
+              : message;
+            emmaAgent.handleToolResult(message.call_id, payload);
+          }
+          break;
+
+        case 'voice_settings':
+          emmaAgent.updateVoiceSettings(message.settings);
+          break;
+
+        case 'stop_session':
+          await emmaAgent.stopSession();
+          break;
+
         case 'user_audio_chunk':
-          // Legacy audio chunks (ignored in current implementation)
+          // Reserved for future streamed audio handling
           break;
-          
         case 'realtime_audio_chunk':
-          // Real-time audio streaming - trigger immediate response when speech detected
           if (emmaAgent && message.chunk) {
             await emmaAgent.handleRealtimeAudio(message.chunk);
           }
           break;
-
-        case 'tool_result':
-          // Handle tool results from browser
-          if (message.call_id && message.result) {
-            emmaAgent.handleToolResult(message.call_id, message.result);
+        case 'set_api_key':
+          if (emmaAgent && typeof emmaAgent.updateApiKey === 'function') {
+            emmaAgent.updateApiKey(message.apiKey || null);
           }
           break;
+        default:
+          console.warn('Unhandled browser message type:', message.type);
+          break;
       }
       
     } catch (error) {
-      console.error('❌ Browser message error:', error);
-      browserWs.send(JSON.stringify({
-        type: 'error',
-        message: 'Failed to process message'
-      }));
+      try {
+        browserWs.send(JSON.stringify({ type: 'error', message: 'Failed to process message' }));
+      } catch (_) {}
     }
   });
-  
+
   // Handle browser disconnect
   browserWs.on('close', () => {
-    console.log('🔇 Browser disconnected');
     if (emmaAgent) {
-      emmaAgent.stopSession();
+      emmaAgent.stopSession().catch((error) => {
+        console.error('Emma session cleanup error:', error);
+      });
     }
+    const ip = request.socket?.remoteAddress || 'unknown';
+    const curr = ipConnCount.get(ip) || 1;
+    ipConnCount.set(ip, Math.max(0, curr - 1));
   });
 });
 
 server.listen(PORT, () => {
-  console.log(`
-🌟 Emma Voice Service Started
-📍 Port: ${PORT}
-🔒 Mode: ${process.env.NODE_ENV || 'development'}
-🎙️ Voice: ${process.env.OPENAI_API_KEY ? 'Enabled' : 'DISABLED - Set OPENAI_API_KEY'}
-🌐 WebSocket: /voice (Emma agent proxy)
-💜 Privacy: Local-first architecture maintained
-  `);
+  console.log(`Emma Voice Service Started on port ${PORT} in ${process.env.NODE_ENV || 'development'} mode`);
 });
 
 module.exports = app;
diff --git a/temp_patch.diff b/temp_patch.diff
new file mode 100644
index 00000000..d5187406
--- /dev/null
+++ b/temp_patch.diff
@@ -0,0 +1,50 @@
+*** Begin Patch
+*** Update File: js/emma-web-vault.js
+@@
+-      const key = await crypto.subtle.deriveKey(
+-        {
+-          name: 'PBKDF2'
+-          salt: salt
+-          iterations: 250000
+-          hash: 'SHA-256'
+-        },
+-        keyMaterial,
+-        { name: 'AES-GCM', length: 256 },
+-        false
+-        ['decrypt']
+-      );
+-
+-      // Decrypt the data (EXACT same as extension)
+-      const decrypted = await crypto.subtle.decrypt(
+-        { name: 'AES-GCM', iv: iv },
+-        key,
+-        encrypted
+-      );
++      const attempt = async (iterations) => {
++        const key = await crypto.subtle.deriveKey(
++          {
++            name: 'PBKDF2',
++            salt: salt,
++            iterations,
++            hash: 'SHA-256'
++          },
++          keyMaterial,
++          { name: 'AES-GCM', length: 256 },
++          false,
++          ['decrypt']
++        );
++        return await crypto.subtle.decrypt(
++          { name: 'AES-GCM', iv: iv },
++          key,
++          encrypted
++        );
++      };
++
++      // Try extension standard first (250k iterations), then fall back to older 100k iteration files
++      let decrypted;
++      try {
++        decrypted = await attempt(250000);
++      } catch (err) {
++        decrypted = await attempt(100000);
++      }
+*** End Patch
diff --git a/themes/theme-catalog.js b/themes/theme-catalog.js
new file mode 100644
index 00000000..94073644
--- /dev/null
+++ b/themes/theme-catalog.js
@@ -0,0 +1,523 @@
+(function createEmmaThemeCatalog() {
+  if (window.EMMA_THEMES) {
+    return;
+  }
+
+  const auroraClassic = {
+    id: 'aurora-classic',
+    name: 'Aurora Classic',
+    description: 'Signature Emma gradient with deep cosmos ambiance.',
+    preview: {
+      primary: '#6f63d9',
+      secondary: '#d06fa8',
+      surface: '#0a0a0f'
+    },
+    cssVars: {
+      '--emma-surface-primary': '#0a0a0f',
+      '--emma-surface-muted': 'rgba(255, 255, 255, 0.04)',
+      '--emma-surface-inverse': 'rgba(255, 255, 255, 0.92)',
+      '--emma-gradient-primary': 'linear-gradient(135deg, #5058b4 0%, #5a3f8f 50%, #a468a5 100%)',
+      '--emma-gradient-secondary': 'linear-gradient(135deg, #3f3f7d 0%, #5a3f8a 50%, #84528f 100%)',
+      '--emma-gradient-aurora': 'linear-gradient(135deg, rgba(80, 88, 180, 0.3) 0%, rgba(90, 63, 143, 0.28) 25%, rgba(164, 104, 165, 0.25) 50%, rgba(67, 132, 187, 0.18) 75%, rgba(80, 88, 180, 0.3) 100%)',
+      '--emma-border-subtle': 'rgba(255, 255, 255, 0.1)',
+      '--emma-border-strong': 'rgba(255, 255, 255, 0.2)',
+      '--emma-text-strong': '#ffffff',
+      '--emma-text-standard': 'rgba(255, 255, 255, 0.85)',
+      '--emma-text-muted': 'rgba(255, 255, 255, 0.6)',
+      '--emma-text-on-accent': '#ffffff',
+      '--emma-neutral-rgb': '255, 255, 255',
+      '--emma-neutral-inverse-rgb': '10, 10, 15',
+      '--emma-accent-primary': '#6f63d9',
+      '--emma-accent-secondary': '#d06fa8',
+      '--emma-accent-primary-rgb': '111, 99, 217',
+      '--emma-accent-secondary-rgb': '208, 111, 168',
+      '--emma-accent-surface': 'rgba(111, 99, 217, 0.14)',
+      '--emma-accent-surface-strong': 'rgba(111, 99, 217, 0.24)',
+      '--emma-accent-border': 'rgba(111, 99, 217, 0.3)',
+      '--emma-success': '#4ade80',
+      '--emma-warning': '#fbbf24',
+      '--emma-danger': '#f87171',
+      '--emma-chat-user-bubble': 'linear-gradient(135deg, #6f63d9, #d06fa8)',
+      '--emma-chat-user-text': '#ffffff',
+      '--emma-chat-emma-bubble': 'rgba(37, 38, 65, 0.85)',
+      '--emma-chat-emma-text': 'rgba(255, 255, 255, 0.92)',
+      '--emma-chat-user-meta': 'rgba(255, 255, 255, 0.7)',
+      '--emma-chat-emma-meta': 'rgba(255, 255, 255, 0.6)',
+      '--emma-chat-surface': 'rgba(255, 255, 255, 0.05)',
+      '--emma-chat-surface-strong': 'rgba(255, 255, 255, 0.1)',
+      '--emma-chat-border': 'rgba(255, 255, 255, 0.2)',
+      '--emma-chat-muted': 'rgba(255, 255, 255, 0.7)',
+      '--emma-chat-strong': 'rgba(255, 255, 255, 0.9)',
+      '--emma-chat-error': '#f87171',
+      '--emma-chat-success': '#10b981',
+      '--emma-nav-highlight': 'rgba(111, 99, 217, 0.16)',
+      '--emma-constellation-node': 'rgba(111, 99, 217, 0.45)',
+      '--emma-constellation-glow': 'rgba(111, 99, 217, 0.6)',
+      '--emma-orb-hue': '265',
+      '--emma-orb-hover-intensity': '0.25',
+      '--emma-glass': 'rgba(255, 255, 255, 0.05)',
+      '--emma-card-bg': 'rgba(255, 255, 255, 0.04)',
+      '--emma-button-secondary-bg': 'rgba(255, 255, 255, 0.1)',
+      '--emma-button-secondary-border': 'rgba(255, 255, 255, 0.2)',
+      '--emma-button-secondary-text': 'rgba(255, 255, 255, 0.85)',
+      '--emma-button-secondary-bg-hover': 'rgba(255, 255, 255, 0.2)',
+      '--emma-bg-gradient': 'linear-gradient(135deg, #0a0a0f 0%, #1a1033 50%, #0f0c29 100%)'
+    },
+    background: {
+      id: 'aurora',
+      name: 'Aurora Field',
+      description: 'Soft cosmic gradients with Emma\'s signature glow.',
+      intensity: 0.35
+    },
+    flags: {
+      highContrast: false,
+      animatedBackground: true
+    }
+  };
+
+  const sunriseGlow = {
+    id: 'sunrise-glow',
+    name: 'Sunrise Glow',
+    description: 'Warm peach and coral palette with soft morning light.',
+    preview: {
+      primary: '#ff8c68',
+      secondary: '#ffd26f',
+      surface: '#fff6eb'
+    },
+    cssVars: {
+      '--emma-surface-primary': '#fff6eb',
+      '--emma-surface-muted': '#ffe9d6',
+      '--emma-surface-inverse': '#1f1a24',
+      '--emma-gradient-primary': 'linear-gradient(135deg, #ff9a8b 0%, #ff6a88 50%, #ff99ac 100%)',
+      '--emma-gradient-secondary': 'linear-gradient(135deg, #ffecd6 0%, #ffcba4 50%, #ff9a8b 100%)',
+      '--emma-gradient-aurora': 'linear-gradient(135deg, rgba(255, 206, 170, 0.4) 0%, rgba(255, 145, 171, 0.4) 50%, rgba(255, 233, 214, 0.4) 100%)',
+      '--emma-border-subtle': 'rgba(31, 26, 36, 0.1)',
+      '--emma-border-strong': 'rgba(31, 26, 36, 0.2)',
+      '--emma-text-strong': '#1f1a24',
+      '--emma-text-standard': 'rgba(31, 26, 36, 0.85)',
+      '--emma-text-muted': 'rgba(31, 26, 36, 0.6)',
+      '--emma-text-on-accent': '#1f1a24',
+      '--emma-neutral-rgb': '31, 26, 36',
+      '--emma-neutral-inverse-rgb': '240, 224, 205',
+      '--emma-accent-primary': '#ff8c68',
+      '--emma-accent-secondary': '#ffb347',
+      '--emma-accent-primary-rgb': '255, 140, 104',
+      '--emma-accent-secondary-rgb': '255, 179, 71',
+      '--emma-accent-surface': 'rgba(255, 176, 124, 0.18)',
+      '--emma-accent-surface-strong': 'rgba(255, 176, 124, 0.3)',
+      '--emma-accent-border': 'rgba(255, 176, 124, 0.35)',
+      '--emma-success': '#3aa76d',
+      '--emma-warning': '#f59e0b',
+      '--emma-danger': '#e4566e',
+      '--emma-chat-user-bubble': 'linear-gradient(135deg, #ffb07c, #ff8c68)',
+      '--emma-chat-user-text': '#1f1a24',
+      '--emma-chat-emma-bubble': 'rgba(255, 233, 214, 0.95)',
+      '--emma-chat-emma-text': '#1f1a24',
+      '--emma-chat-user-meta': 'rgba(31, 26, 36, 0.6)',
+      '--emma-chat-emma-meta': 'rgba(31, 26, 36, 0.5)',
+      '--emma-chat-surface': 'rgba(31, 26, 36, 0.08)',
+      '--emma-chat-surface-strong': 'rgba(31, 26, 36, 0.12)',
+      '--emma-chat-border': 'rgba(31, 26, 36, 0.18)',
+      '--emma-chat-muted': 'rgba(31, 26, 36, 0.6)',
+      '--emma-chat-strong': 'rgba(31, 26, 36, 0.9)',
+      '--emma-chat-error': '#e4566e',
+      '--emma-chat-success': '#3aa76d',
+      '--emma-nav-highlight': 'rgba(255, 176, 124, 0.25)',
+      '--emma-constellation-node': 'rgba(255, 176, 124, 0.7)',
+      '--emma-constellation-glow': 'rgba(255, 176, 124, 0.9)',
+      '--emma-orb-hue': '24',
+      '--emma-orb-hover-intensity': '0.2',
+      '--emma-glass': 'rgba(255, 255, 255, 0.7)',
+      '--emma-card-bg': 'rgba(255, 255, 255, 0.85)',
+      '--emma-button-secondary-bg': 'rgba(31, 26, 36, 0.08)',
+      '--emma-button-secondary-border': 'rgba(31, 26, 36, 0.12)',
+      '--emma-button-secondary-text': 'rgba(31, 26, 36, 0.72)',
+      '--emma-button-secondary-bg-hover': 'rgba(31, 26, 36, 0.14)',
+      '--emma-bg-gradient': 'linear-gradient(135deg, #fff6eb 0%, #ffe3cc 50%, #ffd2b0 100%)'
+    },
+    background: {
+      id: 'sunrise',
+      name: 'Sunrise Veil',
+      description: 'Warm morning light with gentle amber motion.',
+      intensity: 0.2
+    },
+    flags: {
+      highContrast: false,
+      animatedBackground: true
+    }
+  };
+
+  const midnightForest = {
+    id: 'midnight-forest',
+    name: 'Midnight Forest',
+    description: 'Deep greens and teals with luminous accents for focus.',
+    preview: {
+      primary: '#1c3d3a',
+      secondary: '#3ae8b3',
+      surface: '#061b1a'
+    },
+    cssVars: {
+      '--emma-surface-primary': '#061b1a',
+      '--emma-surface-muted': 'rgba(10, 58, 52, 0.55)',
+      '--emma-surface-inverse': '#e9fff9',
+      '--emma-gradient-primary': 'linear-gradient(135deg, #0f4251 0%, #166c54 50%, #3ae8b3 100%)',
+      '--emma-gradient-secondary': 'linear-gradient(135deg, #2d9486 0%, #1f745f 50%, #3ae8b3 100%)',
+      '--emma-gradient-aurora': 'linear-gradient(135deg, rgba(61, 214, 190, 0.2) 0%, rgba(26, 95, 91, 0.35) 50%, rgba(73, 164, 164, 0.2) 100%)',
+      '--emma-border-subtle': 'rgba(58, 149, 138, 0.32)',
+      '--emma-border-strong': 'rgba(58, 149, 138, 0.5)',
+      '--emma-text-strong': '#e9fff9',
+      '--emma-text-standard': 'rgba(233, 255, 249, 0.86)',
+      '--emma-text-muted': 'rgba(233, 255, 249, 0.65)',
+      '--emma-text-on-accent': '#032221',
+      '--emma-neutral-rgb': '233, 255, 249',
+      '--emma-neutral-inverse-rgb': '12, 64, 60',
+      '--emma-accent-primary': '#3ae8b3',
+      '--emma-accent-secondary': '#5adeff',
+      '--emma-accent-primary-rgb': '58, 232, 179',
+      '--emma-accent-secondary-rgb': '90, 222, 255',
+      '--emma-accent-surface': 'rgba(58, 149, 138, 0.18)',
+      '--emma-accent-surface-strong': 'rgba(58, 149, 138, 0.32)',
+      '--emma-accent-border': 'rgba(58, 149, 138, 0.45)',
+      '--emma-success': '#4ade80',
+      '--emma-warning': '#fbbf24',
+      '--emma-danger': '#f87171',
+      '--emma-chat-user-bubble': 'linear-gradient(135deg, #3ae8b3, #5adeff)',
+      '--emma-chat-user-text': '#0b2320',
+      '--emma-chat-emma-bubble': 'rgba(14, 52, 54, 0.88)',
+      '--emma-chat-emma-text': 'rgba(233, 255, 249, 0.92)',
+      '--emma-chat-user-meta': 'rgba(11, 35, 33, 0.6)',
+      '--emma-chat-emma-meta': 'rgba(233, 255, 249, 0.65)',
+      '--emma-chat-surface': 'rgba(12, 64, 60, 0.35)',
+      '--emma-chat-surface-strong': 'rgba(12, 64, 60, 0.5)',
+      '--emma-chat-border': 'rgba(58, 149, 138, 0.45)',
+      '--emma-chat-muted': 'rgba(233, 255, 249, 0.7)',
+      '--emma-chat-strong': 'rgba(233, 255, 249, 0.92)',
+      '--emma-chat-error': '#f87171',
+      '--emma-chat-success': '#3ae8b3',
+      '--emma-nav-highlight': 'rgba(58, 149, 138, 0.3)',
+      '--emma-constellation-node': 'rgba(58, 149, 138, 0.7)',
+      '--emma-constellation-glow': 'rgba(58, 149, 138, 0.95)',
+      '--emma-orb-hue': '160',
+      '--emma-orb-hover-intensity': '0.25',
+      '--emma-glass': 'rgba(8, 43, 43, 0.6)',
+      '--emma-card-bg': 'rgba(8, 43, 43, 0.55)',
+      '--emma-button-secondary-bg': 'rgba(12, 64, 60, 0.6)',
+      '--emma-button-secondary-border': 'rgba(58, 149, 138, 0.45)',
+      '--emma-button-secondary-text': 'rgba(233, 255, 249, 0.88)',
+      '--emma-button-secondary-bg-hover': 'rgba(12, 64, 60, 0.75)',
+      '--emma-bg-gradient': 'linear-gradient(135deg, #031010 0%, #0f2f2b 50%, #041b19 100%)'
+    },
+    background: {
+      id: 'forest',
+      name: 'Forest Night',
+      description: 'Luminous particles drifting through deep forest hues.',
+      intensity: 0.45
+    },
+    flags: {
+      highContrast: true,
+      animatedBackground: false
+    }
+  };
+
+  const lunarTide = {
+    id: 'lunar-tide',
+    name: 'Lunar Tide',
+    description: 'Noctilucent blues with aqua highlights for calm focus.',
+    preview: {
+      primary: '#0f3c68',
+      secondary: '#4dc4ff',
+      surface: '#06131f'
+    },
+    cssVars: {
+      '--emma-surface-primary': '#06131f',
+      '--emma-surface-muted': 'rgba(13, 40, 61, 0.55)',
+      '--emma-surface-inverse': '#f0fbff',
+      '--emma-gradient-primary': 'linear-gradient(135deg, #0f3c68 0%, #0b7895 50%, #4dc4ff 100%)',
+      '--emma-gradient-secondary': 'linear-gradient(135deg, #0b5e7a 0%, #2093a9 50%, #4dc4ff 100%)',
+      '--emma-gradient-aurora': 'linear-gradient(135deg, rgba(77, 196, 255, 0.22) 0%, rgba(20, 130, 155, 0.35) 50%, rgba(11, 60, 96, 0.3) 100%)',
+      '--emma-border-subtle': 'rgba(77, 196, 255, 0.24)',
+      '--emma-border-strong': 'rgba(77, 196, 255, 0.45)',
+      '--emma-text-strong': '#f0fbff',
+      '--emma-text-standard': 'rgba(240, 251, 255, 0.86)',
+      '--emma-text-muted': 'rgba(240, 251, 255, 0.65)',
+      '--emma-text-on-accent': '#03121f',
+      '--emma-neutral-rgb': '240, 251, 255',
+      '--emma-neutral-inverse-rgb': '6, 19, 31',
+      '--emma-accent-primary': '#4dc4ff',
+      '--emma-accent-secondary': '#64f7d5',
+      '--emma-accent-primary-rgb': '77, 196, 255',
+      '--emma-accent-secondary-rgb': '100, 247, 213',
+      '--emma-accent-surface': 'rgba(77, 196, 255, 0.18)',
+      '--emma-accent-surface-strong': 'rgba(77, 196, 255, 0.32)',
+      '--emma-accent-border': 'rgba(77, 196, 255, 0.4)',
+      '--emma-success': '#34d399',
+      '--emma-warning': '#facc15',
+      '--emma-danger': '#f87171',
+      '--emma-chat-user-bubble': 'linear-gradient(135deg, #4dc4ff, #64f7d5)',
+      '--emma-chat-user-text': '#03121f',
+      '--emma-chat-emma-bubble': 'rgba(11, 49, 78, 0.88)',
+      '--emma-chat-emma-text': 'rgba(240, 251, 255, 0.92)',
+      '--emma-chat-user-meta': 'rgba(3, 18, 31, 0.6)',
+      '--emma-chat-emma-meta': 'rgba(240, 251, 255, 0.65)',
+      '--emma-chat-surface': 'rgba(13, 40, 61, 0.45)',
+      '--emma-chat-surface-strong': 'rgba(13, 40, 61, 0.6)',
+      '--emma-chat-border': 'rgba(77, 196, 255, 0.35)',
+      '--emma-chat-muted': 'rgba(240, 251, 255, 0.7)',
+      '--emma-chat-strong': 'rgba(240, 251, 255, 0.92)',
+      '--emma-chat-error': '#f87171',
+      '--emma-chat-success': '#34d399',
+      '--emma-nav-highlight': 'rgba(77, 196, 255, 0.3)',
+      '--emma-constellation-node': 'rgba(77, 196, 255, 0.7)',
+      '--emma-constellation-glow': 'rgba(77, 196, 255, 0.95)',
+      '--emma-orb-hue': '200',
+      '--emma-orb-hover-intensity': '0.28',
+      '--emma-glass': 'rgba(6, 31, 45, 0.6)',
+      '--emma-card-bg': 'rgba(6, 31, 45, 0.55)',
+      '--emma-button-secondary-bg': 'rgba(11, 49, 78, 0.6)',
+      '--emma-button-secondary-border': 'rgba(77, 196, 255, 0.45)',
+      '--emma-button-secondary-text': 'rgba(240, 251, 255, 0.9)',
+      '--emma-button-secondary-bg-hover': 'rgba(11, 49, 78, 0.75)',
+      '--emma-bg-gradient': 'linear-gradient(135deg, #041019 0%, #0d2232 50%, #032236 100%)',
+      '--emma-background-ocean': 'linear-gradient(135deg, rgba(77, 196, 255, 0.18), rgba(14, 84, 120, 0.4))'
+    },
+    background: {
+      id: 'ocean',
+      name: 'Lunar Tide',
+      description: 'Slow aurora bands drifting over deep ocean blues.',
+      intensity: 0.38
+    },
+    flags: {
+      highContrast: true,
+      animatedBackground: true
+    }
+  };
+
+  const emberNoir = {
+    id: 'ember-noir',
+    name: 'Ember Noir',
+    description: 'Sleek charcoal base with ember-lit highlights.',
+    preview: {
+      primary: '#2b1a1f',
+      secondary: '#f97316',
+      surface: '#131015'
+    },
+    cssVars: {
+      '--emma-surface-primary': '#131015',
+      '--emma-surface-muted': 'rgba(55, 30, 43, 0.55)',
+      '--emma-surface-inverse': '#fdf6f0',
+      '--emma-gradient-primary': 'linear-gradient(135deg, #2b1a1f 0%, #50232c 50%, #f97316 100%)',
+      '--emma-gradient-secondary': 'linear-gradient(135deg, #311920 0%, #8b2635 50%, #fb7185 100%)',
+      '--emma-gradient-aurora': 'linear-gradient(135deg, rgba(249, 115, 22, 0.25) 0%, rgba(251, 113, 133, 0.2) 45%, rgba(79, 18, 30, 0.4) 100%)',
+      '--emma-border-subtle': 'rgba(249, 115, 22, 0.24)',
+      '--emma-border-strong': 'rgba(249, 115, 22, 0.45)',
+      '--emma-text-strong': '#fdf6f0',
+      '--emma-text-standard': 'rgba(253, 246, 240, 0.85)',
+      '--emma-text-muted': 'rgba(253, 246, 240, 0.65)',
+      '--emma-text-on-accent': '#220a0a',
+      '--emma-neutral-rgb': '253, 246, 240',
+      '--emma-neutral-inverse-rgb': '19, 16, 21',
+      '--emma-accent-primary': '#f97316',
+      '--emma-accent-secondary': '#fb7185',
+      '--emma-accent-primary-rgb': '249, 115, 22',
+      '--emma-accent-secondary-rgb': '251, 113, 133',
+      '--emma-accent-surface': 'rgba(249, 115, 22, 0.18)',
+      '--emma-accent-surface-strong': 'rgba(249, 115, 22, 0.32)',
+      '--emma-accent-border': 'rgba(249, 115, 22, 0.42)',
+      '--emma-success': '#22c55e',
+      '--emma-warning': '#facc15',
+      '--emma-danger': '#f87171',
+      '--emma-chat-user-bubble': 'linear-gradient(135deg, #f97316, #fb7185)',
+      '--emma-chat-user-text': '#2b0b0b',
+      '--emma-chat-emma-bubble': 'rgba(44, 21, 29, 0.88)',
+      '--emma-chat-emma-text': 'rgba(253, 246, 240, 0.92)',
+      '--emma-chat-user-meta': 'rgba(43, 11, 11, 0.65)',
+      '--emma-chat-emma-meta': 'rgba(253, 246, 240, 0.65)',
+      '--emma-chat-surface': 'rgba(55, 30, 43, 0.5)',
+      '--emma-chat-surface-strong': 'rgba(55, 30, 43, 0.65)',
+      '--emma-chat-border': 'rgba(249, 115, 22, 0.35)',
+      '--emma-chat-muted': 'rgba(253, 246, 240, 0.7)',
+      '--emma-chat-strong': 'rgba(253, 246, 240, 0.92)',
+      '--emma-chat-error': '#f87171',
+      '--emma-chat-success': '#22c55e',
+      '--emma-nav-highlight': 'rgba(249, 115, 22, 0.32)',
+      '--emma-constellation-node': 'rgba(249, 115, 22, 0.66)',
+      '--emma-constellation-glow': 'rgba(249, 115, 22, 0.88)',
+      '--emma-orb-hue': '20',
+      '--emma-orb-hover-intensity': '0.22',
+      '--emma-glass': 'rgba(24, 12, 18, 0.65)',
+      '--emma-card-bg': 'rgba(24, 12, 18, 0.58)',
+      '--emma-button-secondary-bg': 'rgba(45, 23, 31, 0.65)',
+      '--emma-button-secondary-border': 'rgba(249, 115, 22, 0.35)',
+      '--emma-button-secondary-text': 'rgba(253, 246, 240, 0.9)',
+      '--emma-button-secondary-bg-hover': 'rgba(45, 23, 31, 0.8)',
+      '--emma-bg-gradient': 'linear-gradient(135deg, #12090d 0%, #211017 50%, #2f181f 100%)',
+      '--emma-background-ember': 'linear-gradient(135deg, rgba(249, 115, 22, 0.2), rgba(71, 21, 27, 0.45))'
+    },
+    background: {
+      id: 'ember',
+      name: 'Ember Noir',
+      description: 'Amber sparks drifting across a noir twilight.',
+      intensity: 0.34
+    },
+    flags: {
+      highContrast: false,
+      animatedBackground: true
+    }
+  };
+
+  const blossomDream = {
+    id: 'blossom-dream',
+    name: 'Blossom Dream',
+    description: 'Pastel bloom with gentle light for uplifting moments.',
+    preview: {
+      primary: '#fcb3ff',
+      secondary: '#f472b6',
+      surface: '#fef8ff'
+    },
+    cssVars: {
+      '--emma-surface-primary': '#fef8ff',
+      '--emma-surface-muted': 'rgba(247, 220, 255, 0.7)',
+      '--emma-surface-inverse': '#20142a',
+      '--emma-gradient-primary': 'linear-gradient(135deg, #fcb3ff 0%, #a855f7 50%, #6366f1 100%)',
+      '--emma-gradient-secondary': 'linear-gradient(135deg, #ffe3f7 0%, #fcb3ff 50%, #f9a8d4 100%)',
+      '--emma-gradient-aurora': 'linear-gradient(135deg, rgba(252, 179, 255, 0.35) 0%, rgba(249, 168, 212, 0.3) 50%, rgba(99, 102, 241, 0.25) 100%)',
+      '--emma-border-subtle': 'rgba(32, 20, 42, 0.12)',
+      '--emma-border-strong': 'rgba(32, 20, 42, 0.28)',
+      '--emma-text-strong': '#20142a',
+      '--emma-text-standard': 'rgba(32, 20, 42, 0.85)',
+      '--emma-text-muted': 'rgba(32, 20, 42, 0.6)',
+      '--emma-text-on-accent': '#20142a',
+      '--emma-neutral-rgb': '32, 20, 42',
+      '--emma-neutral-inverse-rgb': '254, 248, 255',
+      '--emma-accent-primary': '#a855f7',
+      '--emma-accent-secondary': '#f472b6',
+      '--emma-accent-primary-rgb': '168, 85, 247',
+      '--emma-accent-secondary-rgb': '244, 114, 182',
+      '--emma-accent-surface': 'rgba(244, 114, 182, 0.16)',
+      '--emma-accent-surface-strong': 'rgba(244, 114, 182, 0.28)',
+      '--emma-accent-border': 'rgba(244, 114, 182, 0.32)',
+      '--emma-success': '#22c55e',
+      '--emma-warning': '#f59e0b',
+      '--emma-danger': '#ef4444',
+      '--emma-chat-user-bubble': 'linear-gradient(135deg, #f9a8d4, #a855f7)',
+      '--emma-chat-user-text': '#20142a',
+      '--emma-chat-emma-bubble': 'rgba(255, 236, 250, 0.96)',
+      '--emma-chat-emma-text': '#20142a',
+      '--emma-chat-user-meta': 'rgba(32, 20, 42, 0.6)',
+      '--emma-chat-emma-meta': 'rgba(32, 20, 42, 0.5)',
+      '--emma-chat-surface': 'rgba(32, 20, 42, 0.08)',
+      '--emma-chat-surface-strong': 'rgba(32, 20, 42, 0.12)',
+      '--emma-chat-border': 'rgba(32, 20, 42, 0.16)',
+      '--emma-chat-muted': 'rgba(32, 20, 42, 0.6)',
+      '--emma-chat-strong': 'rgba(32, 20, 42, 0.9)',
+      '--emma-chat-error': '#ef4444',
+      '--emma-chat-success': '#16a34a',
+      '--emma-nav-highlight': 'rgba(244, 114, 182, 0.25)',
+      '--emma-constellation-node': 'rgba(244, 114, 182, 0.7)',
+      '--emma-constellation-glow': 'rgba(244, 114, 182, 0.9)',
+      '--emma-orb-hue': '285',
+      '--emma-orb-hover-intensity': '0.2',
+      '--emma-glass': 'rgba(255, 255, 255, 0.7)',
+      '--emma-card-bg': 'rgba(255, 255, 255, 0.85)',
+      '--emma-button-secondary-bg': 'rgba(32, 20, 42, 0.08)',
+      '--emma-button-secondary-border': 'rgba(32, 20, 42, 0.12)',
+      '--emma-button-secondary-text': 'rgba(32, 20, 42, 0.72)',
+      '--emma-button-secondary-bg-hover': 'rgba(32, 20, 42, 0.14)',
+      '--emma-bg-gradient': 'linear-gradient(135deg, #fef8ff 0%, #ffe9f7 50%, #e8ddff 100%)',
+      '--emma-background-blossom': 'linear-gradient(135deg, rgba(252, 179, 255, 0.22), rgba(241, 179, 239, 0.35))'
+    },
+    background: {
+      id: 'blossom',
+      name: 'Blossom Veil',
+      description: 'Soft petal diffraction floating across gentle light.',
+      intensity: 0.22
+    },
+    flags: {
+      highContrast: false,
+      animatedBackground: true
+    }
+  };
+
+  const zenSlate = {
+    id: 'zen-slate',
+    name: 'Zen Slate',
+    description: 'Modern graphite palette with calm blue-green accents.',
+    preview: {
+      primary: '#1f2937',
+      secondary: '#60a5fa',
+      surface: '#111827'
+    },
+    cssVars: {
+      '--emma-surface-primary': '#111827',
+      '--emma-surface-muted': 'rgba(255, 255, 255, 0.06)',
+      '--emma-surface-inverse': '#f9fafb',
+      '--emma-gradient-primary': 'linear-gradient(135deg, #0f172a 0%, #1f2937 50%, #4b5563 100%)',
+      '--emma-gradient-secondary': 'linear-gradient(135deg, #1f2937 0%, #374151 50%, #6b7280 100%)',
+      '--emma-gradient-aurora': 'linear-gradient(135deg, rgba(79, 70, 229, 0.18) 0%, rgba(15, 118, 110, 0.22) 50%, rgba(30, 64, 175, 0.2) 100%)',
+      '--emma-border-subtle': 'rgba(255, 255, 255, 0.14)',
+      '--emma-border-strong': 'rgba(255, 255, 255, 0.28)',
+      '--emma-text-strong': '#f9fafb',
+      '--emma-text-standard': 'rgba(249, 250, 251, 0.9)',
+      '--emma-text-muted': 'rgba(249, 250, 251, 0.65)',
+      '--emma-text-on-accent': '#0b1120',
+      '--emma-neutral-rgb': '249, 250, 251',
+      '--emma-neutral-inverse-rgb': '17, 24, 39',
+      '--emma-accent-primary': '#60a5fa',
+      '--emma-accent-secondary': '#34d399',
+      '--emma-accent-primary-rgb': '96, 165, 250',
+      '--emma-accent-secondary-rgb': '52, 211, 153',
+      '--emma-accent-surface': 'rgba(96, 165, 250, 0.2)',
+      '--emma-accent-surface-strong': 'rgba(96, 165, 250, 0.32)',
+      '--emma-accent-border': 'rgba(96, 165, 250, 0.34)',
+      '--emma-success': '#34d399',
+      '--emma-warning': '#facc15',
+      '--emma-danger': '#f87171',
+      '--emma-chat-user-bubble': 'linear-gradient(135deg, #60a5fa, #34d399)',
+      '--emma-chat-user-text': '#0b1120',
+      '--emma-chat-emma-bubble': 'rgba(24, 36, 52, 0.9)',
+      '--emma-chat-emma-text': 'rgba(249, 250, 251, 0.92)',
+      '--emma-chat-user-meta': 'rgba(11, 17, 32, 0.65)',
+      '--emma-chat-emma-meta': 'rgba(249, 250, 251, 0.65)',
+      '--emma-chat-surface': 'rgba(31, 41, 55, 0.45)',
+      '--emma-chat-surface-strong': 'rgba(31, 41, 55, 0.6)',
+      '--emma-chat-border': 'rgba(96, 165, 250, 0.32)',
+      '--emma-chat-muted': 'rgba(249, 250, 251, 0.75)',
+      '--emma-chat-strong': 'rgba(249, 250, 251, 0.95)',
+      '--emma-chat-error': '#f87171',
+      '--emma-chat-success': '#34d399',
+      '--emma-nav-highlight': 'rgba(96, 165, 250, 0.26)',
+      '--emma-constellation-node': 'rgba(96, 165, 250, 0.7)',
+      '--emma-constellation-glow': 'rgba(96, 165, 250, 0.95)',
+      '--emma-orb-hue': '215',
+      '--emma-orb-hover-intensity': '0.27',
+      '--emma-glass': 'rgba(15, 23, 42, 0.65)',
+      '--emma-card-bg': 'rgba(17, 24, 39, 0.6)',
+      '--emma-button-secondary-bg': 'rgba(31, 41, 55, 0.55)',
+      '--emma-button-secondary-border': 'rgba(96, 165, 250, 0.32)',
+      '--emma-button-secondary-text': 'rgba(249, 250, 251, 0.9)',
+      '--emma-button-secondary-bg-hover': 'rgba(31, 41, 55, 0.72)',
+      '--emma-bg-gradient': 'linear-gradient(135deg, #0b1120 0%, #111827 50%, #1f2937 100%)',
+      '--emma-background-zen': 'linear-gradient(135deg, rgba(96, 165, 250, 0.22), rgba(17, 94, 89, 0.25))'
+    },
+    background: {
+      id: 'zen',
+      name: 'Zen Slate',
+      description: 'Holographic mist gliding over graphite horizons.',
+      intensity: 0.3
+    },
+    flags: {
+      highContrast: true,
+      animatedBackground: false
+    }
+  };
+
+  window.EMMA_THEMES = [
+    auroraClassic,
+    sunriseGlow,
+    midnightForest,
+    lunarTide,
+    emberNoir,
+    blossomDream,
+    zenSlate
+  ];
+})();
diff --git "a/ting headers\357\200\242" "b/ting headers\357\200\242"
deleted file mode 100644
index eaebbf56..00000000
--- "a/ting headers\357\200\242"	
+++ /dev/null
@@ -1,83 +0,0 @@
-
-                   SSUUMMMMAARRYY OOFF LLEESSSS CCOOMMMMAANNDDSS
-
-      Commands marked with * may be preceded by a number, _N.
-      Notes in parentheses indicate the behavior if _N is given.
-      A key preceded by a caret indicates the Ctrl key; thus ^K is ctrl-K.
-
-  h  H                 Display this help.
-  q  :q  Q  :Q  ZZ     Exit.
- ---------------------------------------------------------------------------
-
-                           MMOOVVIINNGG
-
-  e  ^E  j  ^N  CR  *  Forward  one line   (or _N lines).
-  y  ^Y  k  ^K  ^P  *  Backward one line   (or _N lines).
-  f  ^F  ^V  SPACE  *  Forward  one window (or _N lines).
-  b  ^B  ESC-v      *  Backward one window (or _N lines).
-  z                 *  Forward  one window (and set window to _N).
-  w                 *  Backward one window (and set window to _N).
-  ESC-SPACE         *  Forward  one window, but don't stop at end-of-file.
-  d  ^D             *  Forward  one half-window (and set half-window to _N).
-  u  ^U             *  Backward one half-window (and set half-window to _N).
-  ESC-)  RightArrow *  Right one half screen width (or _N positions).
-  ESC-(  LeftArrow  *  Left  one half screen width (or _N positions).
-  ESC-}  ^RightArrow   Right to last column displayed.
-  ESC-{  ^LeftArrow    Left  to first column.
-  F                    Forward forever; like "tail -f".
-  ESC-F                Like F but stop when search pattern is found.
-  r  ^R  ^L            Repaint screen.
-  R                    Repaint screen, discarding buffered input.
-        ---------------------------------------------------
-        Default "window" is the screen height.
-        Default "half-window" is half of the screen height.
- ---------------------------------------------------------------------------
-
-                          SSEEAARRCCHHIINNGG
-
-  /_p_a_t_t_e_r_n          *  Search forward for (_N-th) matching line.
-  ?_p_a_t_t_e_r_n          *  Search backward for (_N-th) matching line.
-  n                 *  Repeat previous search (for _N-th occurrence).
-  N                 *  Repeat previous search in reverse direction.
-  ESC-n             *  Repeat previous search, spanning files.
-  ESC-N             *  Repeat previous search, reverse dir. & spanning files.
-  ^O^N  ^On         *  Search forward for (_N-th) OSC8 hyperlink.
-  ^O^P  ^Op         *  Search backward for (_N-th) OSC8 hyperlink.
-  ^O^L  ^Ol            Jump to the currently selected OSC8 hyperlink.
-  ESC-u                Undo (toggle) search highlighting.
-  ESC-U                Clear search highlighting.
-  &_p_a_t_t_e_r_n          *  Display only matching lines.
-        ---------------------------------------------------
-        A search pattern may begin with one or more of:
-        ^N or !  Search for NON-matching lines.
-        ^E or *  Search multiple files (pass thru END OF FILE).
-        ^F or @  Start search at FIRST file (for /) or last file (for ?).
-        ^K       Highlight matches, but don't move (KEEP position).
-        ^R       Don't use REGULAR EXPRESSIONS.
-        ^S _n     Search for match in _n-th parenthesized subpattern.
-        ^W       WRAP search if no match found.
-        ^L       Enter next character literally into pattern.
- ---------------------------------------------------------------------------
-
-                           JJUUMMPPIINNGG
-
-  g  <  ESC-<       *  Go to first line in file (or line _N).
-  G  >  ESC->       *  Go to last line in file (or line _N).
-  p  %              *  Go to beginning of file (or _N percent into file).
-  t                 *  Go to the (_N-th) next tag.
-  T                 *  Go to the (_N-th) previous tag.
-  {  (  [           *  Find close bracket } ) ].
-  }  )  ]           *  Find open bracket { ( [.
-  ESC-^F _<_c_1_> _<_c_2_>  *  Find close bracket _<_c_2_>.
-  ESC-^B _<_c_1_> _<_c_2_>  *  Find open bracket _<_c_1_>.
-        ---------------------------------------------------
-        Each "find close bracket" command goes forward to the close bracket 
-          matching the (_N-th) open bracket in the top line.
-        Each "find open bracket" command goes backward to the open bracket 
-          matching the (_N-th) close bracket in the bottom line.
-
-  m_<_l_e_t_t_e_r_>            Mark the current top line with <letter>.
-  M_<_l_e_t_t_e_r_>            Mark the current bottom line with <letter>.
-  '_<_l_e_t_t_e_r_>            Go to a previously marked position.
-  ''                   Go to the previous position.
-  ^X^X                 Same as '.
diff --git a/voice-test-backend.html b/voice-test-backend.html
deleted file mode 100644
index 6f2b30ca..00000000
--- a/voice-test-backend.html
+++ /dev/null
@@ -1,136 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Emma Voice Backend Test</title>
-    <style>
-        body { font-family: monospace; background: #1a1a1a; color: #fff; padding: 20px; }
-        .log { background: #333; padding: 10px; margin: 10px 0; border-radius: 5px; }
-        button { padding: 10px 20px; margin: 5px; border: none; border-radius: 5px; cursor: pointer; }
-        .btn-primary { background: #8a2be2; color: white; }
-        .btn-secondary { background: #666; color: white; }
-    </style>
-</head>
-<body>
-    <h1>🎙️ Emma Voice Backend Test</h1>
-    <p>Testing the server-side Emma agent directly</p>
-    
-    <button class="btn-primary" onclick="testBackend()">Test Backend Connection</button>
-    <button class="btn-secondary" onclick="clearLogs()">Clear Logs</button>
-    
-    <div id="logs"></div>
-
-    <script>
-        // Copy of EmmaVoiceTools for testing
-        class EmmaVoiceTools {
-            constructor() {
-                this.tools = {
-                    get_people: async () => ({ people: [] }),
-                    get_memories: async () => ({ memories: [] }),
-                    create_memory_from_voice: async () => ({ success: true }),
-                    update_person: async () => ({ success: true })
-                };
-            }
-            
-            async execute(toolName, params) {
-                return await this.tools[toolName](params);
-            }
-        }
-
-        // Simple browser client for testing
-        class TestBrowserClient {
-            constructor() {
-                this.websocket = null;
-                this.isConnected = false;
-                this.tools = new EmmaVoiceTools();
-            }
-
-            async startVoiceSession() {
-                try {
-                    log('🔗 Connecting to Emma backend...');
-                    
-                    const wsUrl = 'wss://emma-voice-backend.onrender.com/voice';
-                    this.websocket = new WebSocket(wsUrl);
-                    
-                    this.websocket.onopen = () => {
-                        log('✅ Connected to Emma backend');
-                        this.isConnected = true;
-                        
-                        // Start Emma session
-                        this.websocket.send(JSON.stringify({
-                            type: 'start_session',
-                            config: {
-                                voice: 'alloy',
-                                tone: 'caring',
-                                pacing: 2.5
-                            }
-                        }));
-                    };
-                    
-                    this.websocket.onmessage = (event) => {
-                        const message = JSON.parse(event.data);
-                        log(`📨 Emma: ${message.type} - ${message.message || JSON.stringify(message)}`);
-                        
-                        if (message.type === 'tool_request') {
-                            // Handle tool request
-                            this.handleToolRequest(message);
-                        }
-                    };
-                    
-                    this.websocket.onerror = (error) => {
-                        log(`❌ WebSocket error: ${error}`);
-                    };
-                    
-                    this.websocket.onclose = () => {
-                        log('🔇 Emma connection closed');
-                        this.isConnected = false;
-                    };
-                    
-                } catch (error) {
-                    log(`❌ Connection failed: ${error.message}`);
-                }
-            }
-            
-            async handleToolRequest(message) {
-                try {
-                    const result = await this.tools.execute(message.tool_name, message.parameters);
-                    
-                    this.websocket.send(JSON.stringify({
-                        type: 'tool_result',
-                        call_id: message.call_id,
-                        result: JSON.stringify(result)
-                    }));
-                    
-                    log(`🔧 Tool executed: ${message.tool_name}`);
-                    
-                } catch (error) {
-                    log(`❌ Tool error: ${error.message}`);
-                }
-            }
-        }
-
-        let testClient = new TestBrowserClient();
-
-        function testBackend() {
-            testClient.startVoiceSession();
-        }
-
-        function log(message) {
-            const logs = document.getElementById('logs');
-            const logDiv = document.createElement('div');
-            logDiv.className = 'log';
-            logDiv.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
-            logs.appendChild(logDiv);
-            logs.scrollTop = logs.scrollHeight;
-            console.log(message);
-        }
-
-        function clearLogs() {
-            document.getElementById('logs').innerHTML = '';
-        }
-
-        log('🎙️ Emma Voice Backend Test ready');
-    </script>
-</body>
-</html>
diff --git a/voice-test.html b/voice-test.html
deleted file mode 100644
index 517144aa..00000000
--- a/voice-test.html
+++ /dev/null
@@ -1,329 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Emma Voice Test - Phase 0</title>
-    <style>
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            background: #1a1a1a;
-            color: #ffffff;
-        }
-        
-        .header {
-            text-align: center;
-            margin-bottom: 40px;
-        }
-        
-        .header h1 {
-            color: #8a2be2;
-            margin-bottom: 10px;
-        }
-        
-        .header p {
-            color: #888;
-            font-size: 16px;
-        }
-        
-        .orb-container {
-            width: 200px;
-            height: 200px;
-            margin: 0 auto 30px;
-            position: relative;
-        }
-        
-        .controls {
-            display: flex;
-            gap: 15px;
-            justify-content: center;
-            margin-bottom: 30px;
-        }
-        
-        .btn {
-            padding: 12px 24px;
-            border: none;
-            border-radius: 8px;
-            font-size: 16px;
-            cursor: pointer;
-            transition: all 0.2s;
-        }
-        
-        .btn-primary {
-            background: #8a2be2;
-            color: white;
-        }
-        
-        .btn-primary:hover {
-            background: #7b27d1;
-        }
-        
-        .btn-secondary {
-            background: #333;
-            color: white;
-        }
-        
-        .btn-secondary:hover {
-            background: #444;
-        }
-        
-        .status-container {
-            margin-bottom: 30px;
-        }
-        
-        .emma-voice-status {
-            padding: 12px 20px;
-            background: rgba(138, 43, 226, 0.1);
-            border: 1px solid rgba(138, 43, 226, 0.3);
-            border-radius: 8px;
-            color: #8a2be2;
-            text-align: center;
-            font-size: 14px;
-        }
-        
-        .emma-voice-status.error {
-            background: rgba(220, 53, 69, 0.1);
-            border-color: rgba(220, 53, 69, 0.3);
-            color: #dc3545;
-        }
-        
-        .logs {
-            background: #222;
-            border-radius: 8px;
-            padding: 20px;
-            margin-top: 20px;
-            font-family: 'Monaco', 'Menlo', monospace;
-            font-size: 12px;
-            max-height: 300px;
-            overflow-y: auto;
-        }
-        
-        .log-entry {
-            margin-bottom: 5px;
-            padding: 2px 0;
-        }
-        
-        .log-info { color: #17a2b8; }
-        .log-success { color: #28a745; }
-        .log-warning { color: #ffc107; }
-        .log-error { color: #dc3545; }
-        
-        .cto-notes {
-            background: rgba(255, 193, 7, 0.1);
-            border: 1px solid rgba(255, 193, 7, 0.3);
-            border-radius: 8px;
-            padding: 15px;
-            margin-top: 20px;
-        }
-        
-        .cto-notes h3 {
-            color: #ffc107;
-            margin-top: 0;
-        }
-    </style>
-</head>
-<body>
-    <div class="header">
-        <h1>🎙️ Emma Voice Test</h1>
-        <p>Phase 0: WebRTC + Ephemeral Tokens + Orb Integration</p>
-        <p><strong>Privacy-First Architecture</strong> • Built with love for Debbe 💜</p>
-    </div>
-
-    <div class="orb-container" id="orbContainer">
-        <!-- Emma orb will be rendered here -->
-    </div>
-
-    <div class="controls">
-        <button class="btn btn-primary" id="toggleVoiceBtn">Start Voice Session</button>
-        <button class="btn btn-secondary" id="testTokenBtn">Test Token API</button>
-        <button class="btn btn-secondary" id="testToolsBtn">Test Local Tools</button>
-        <button class="btn btn-secondary" id="clearLogsBtn">Clear Logs</button>
-    </div>
-
-    <div class="status-container" id="statusContainer">
-        <!-- Voice status will appear here -->
-    </div>
-
-    <div class="cto-notes">
-        <h3>🔒 CTO Security Notes</h3>
-        <ul>
-            <li><strong>Privacy-First:</strong> All tools execute locally, no vault data sent to cloud</li>
-            <li><strong>Ephemeral Tokens:</strong> 60-second tokens, no persistent API keys</li>
-            <li><strong>Dementia-Friendly:</strong> Validation therapy tone, gentle error handling</li>
-            <li><strong>Local-First:</strong> Voice enhances but never replaces core functionality</li>
-        </ul>
-    </div>
-
-    <div class="logs" id="logs">
-        <div class="log-entry log-info">🎙️ Emma Voice Test initialized</div>
-    </div>
-
-    <!-- Load Emma's existing orb system -->
-    <script src="js/emma-orb.js"></script>
-    <script src="js/emma-realtime-voice.js"></script>
-    
-    <script>
-        let emmaVoice = null;
-        let isVoiceActive = false;
-
-        // Initialize on page load
-        document.addEventListener('DOMContentLoaded', async () => {
-            // Setup event listeners for buttons (CSP compliant)
-            document.getElementById('toggleVoiceBtn').addEventListener('click', toggleVoice);
-            document.getElementById('testTokenBtn').addEventListener('click', testToken);
-            document.getElementById('testToolsBtn').addEventListener('click', testTools);
-            document.getElementById('clearLogsBtn').addEventListener('click', clearLogs);
-            try {
-                // Initialize Emma voice system
-                emmaVoice = new EmmaRealtimeVoice({
-                    wakeWord: 'Emma',
-                    pacing: 2500,
-                    validationMode: true
-                });
-
-                // Initialize with orb and status containers
-                const orbContainer = document.getElementById('orbContainer');
-                const statusContainer = document.getElementById('statusContainer');
-                
-                const success = await emmaVoice.initialize(orbContainer, statusContainer);
-                
-                if (success) {
-                    addLog('✅ Emma Voice system initialized successfully', 'success');
-                } else {
-                    addLog('❌ Emma Voice initialization failed', 'error');
-                }
-                
-            } catch (error) {
-                addLog(`❌ Initialization error: ${error.message}`, 'error');
-            }
-        });
-
-        // Toggle voice session
-        async function toggleVoice() {
-            const btn = event.target;
-            
-            try {
-                if (!isVoiceActive) {
-                    btn.textContent = 'Starting...';
-                    btn.disabled = true;
-                    
-                    await emmaVoice.startVoiceSession();
-                    
-                    btn.textContent = 'Stop Voice Session';
-                    btn.className = 'btn btn-secondary';
-                    isVoiceActive = true;
-                    
-                    addLog('🎙️ Voice session started', 'success');
-                    
-                } else {
-                    btn.textContent = 'Stopping...';
-                    btn.disabled = true;
-                    
-                    await emmaVoice.stopVoiceSession();
-                    
-                    btn.textContent = 'Start Voice Session';
-                    btn.className = 'btn btn-primary';
-                    isVoiceActive = false;
-                    
-                    addLog('🔇 Voice session stopped', 'info');
-                }
-                
-            } catch (error) {
-                addLog(`❌ Voice toggle error: ${error.message}`, 'error');
-                btn.textContent = 'Start Voice Session';
-                btn.className = 'btn btn-primary';
-                isVoiceActive = false;
-                
-            } finally {
-                btn.disabled = false;
-            }
-        }
-
-        // Test token API
-        async function testToken() {
-            addLog('🔑 Testing ephemeral token API...', 'info');
-            
-            try {
-                const backendUrl = window.location.hostname === 'localhost' 
-                    ? 'http://localhost:3001' 
-                    : 'https://emma-voice-backend.onrender.com';
-                    
-                const response = await fetch(`${backendUrl}/token`);
-
-                if (response.ok) {
-                    const data = await response.json();
-                    addLog(`✅ Token obtained: expires in ${data.expires_in}s`, 'success');
-                    addLog(`📋 Session ID: ${data.session_id}`, 'info');
-                } else {
-                    const error = await response.json();
-                    addLog(`❌ Token error: ${error.error}`, 'error');
-                }
-                
-            } catch (error) {
-                addLog(`❌ Token request failed: ${error.message}`, 'error');
-            }
-        }
-
-        // Test local tools (privacy-first)
-        async function testTools() {
-            addLog('🔧 Testing local privacy-first tools...', 'info');
-            
-            try {
-                if (!emmaVoice || !emmaVoice.tools) {
-                    addLog('❌ Voice tools not initialized', 'error');
-                    return;
-                }
-
-                // Test get_people (local only)
-                const peopleResult = await emmaVoice.tools.execute('get_people', { query: '' });
-                addLog(`👥 People tool: ${peopleResult.people?.length || 0} people found`, 'info');
-                
-                // Test get_memories (local only)
-                const memoriesResult = await emmaVoice.tools.execute('get_memories', { limit: 3 });
-                addLog(`💭 Memories tool: ${memoriesResult.memories?.length || 0} memories found`, 'info');
-                
-                addLog('✅ All tools executed locally (privacy-first)', 'success');
-                
-            } catch (error) {
-                addLog(`❌ Tools test error: ${error.message}`, 'error');
-            }
-        }
-
-        // Clear logs
-        function clearLogs() {
-            const logs = document.getElementById('logs');
-            logs.innerHTML = '<div class="log-entry log-info">🎙️ Logs cleared</div>';
-        }
-
-        // Add log entry
-        function addLog(message, type = 'info') {
-            const logs = document.getElementById('logs');
-            const entry = document.createElement('div');
-            entry.className = `log-entry log-${type}`;
-            entry.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
-            logs.appendChild(entry);
-            logs.scrollTop = logs.scrollHeight;
-            
-            // Also log to console
-            console.log(message);
-        }
-
-        // Test health endpoint
-        const backendUrl = window.location.hostname === 'localhost' 
-            ? 'http://localhost:3001' 
-            : 'https://emma-voice-backend.onrender.com';
-            
-        fetch(`${backendUrl}/api/health`)
-            .then(r => r.json())
-            .then(data => {
-                addLog(`🏥 Backend health: ${data.status} (${data.privacy})`, 'success');
-            })
-            .catch(error => {
-                addLog(`❌ Backend health check failed: ${error.message}`, 'error');
-            });
-    </script>
-</body>
-</html>
diff --git a/working-desktop-dashboard.html b/working-desktop-dashboard.html
deleted file mode 100644
index aa42cee2..00000000
--- a/working-desktop-dashboard.html
+++ /dev/null
@@ -1,6451 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Emma - Your Intelligent Memory Companion</title>
-
-  <!-- Cache busting meta tags -->
-  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-  <meta http-equiv="Pragma" content="no-cache">
-  <meta http-equiv="Expires" content="0">
-
-  <!-- Load Emma Web Vault System -->
-  <script src="js/emma-input-modal.js"></script>
-  <script src="js/clean-password-modal.js"></script>
-  <script src="js/emma-feature-flags.js"></script>
-  <script src="js/emma-vault-primary.js"></script>
-  <script src="js/emma-web-vault.js"></script>
-  <script src="js/web-vault-status.js"></script>
-
-    <!-- Browser Compatibility Layer - PRODUCTION: Removed for clean deployment -->
-  <!-- <script src="emma-browser-compatibility-fix.js"></script> -->
-  
-  <!-- Mobile UI Fixes - PRODUCTION: Removed for clean deployment -->
-  <!-- <script src="emma-mobile-ui-fixes.js"></script> -->
-
-  <!-- VAULT STATE MONITOR: Real-time auto-lock detection -->
-  <script src="emma-vault-extension-fixed/vault-state-monitor.js"></script>
-
-  <style>
-    /* Emma Brand Variables */
-    :root {
-      --emma-gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
-      --emma-gradient-2: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #a855f7 100%);
-      --emma-aurora: linear-gradient(135deg, #667eea20 0%, #764ba240 25%, #f093fb20 50%, #4dabf720 75%, #667eea20 100%);
-      --emma-bg-gradient: linear-gradient(135deg, #0a0a0f 0%, #1a1033 50%, #0f0c29 100%);
-      --emma-purple: #764ba2;
-      --emma-pink: #f093fb;
-      --emma-blue: #667eea;
-      --emma-dark: #0a0a0f;
-      --emma-card-bg: rgba(255, 255, 255, 0.03);
-      --emma-glass: rgba(255, 255, 255, 0.05);
-      --emma-border: rgba(255, 255, 255, 0.1);
-      --emma-text: #ffffff;
-      --emma-text-secondary: rgba(255, 255, 255, 0.8);
-      --emma-text-tertiary: rgba(255, 255, 255, 0.6);
-      --emma-success: #4ade80;
-      --emma-error: #f87171;
-      --emma-warning: #fbbf24;
-      --emma-glow: 0 0 40px rgba(134, 88, 255, 0.6);
-    }
-
-    * {
-      margin: 0;
-      padding: 0;
-      box-sizing: border-box;
-    }
-
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-      background: var(--emma-bg-gradient);
-      color: var(--emma-text);
-      min-height: 100vh;
-      overflow: hidden;
-      position: relative;
-    }
-
-    /* Aurora Background Effect */
-    .aurora-bg {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      opacity: 0.3;
-      z-index: 1;
-      pointer-events: none;
-    }
-
-    .aurora {
-      position: absolute;
-      width: 200%;
-      height: 200%;
-      background: var(--emma-aurora);
-      animation: aurora 20s ease-in-out infinite;
-      filter: blur(60px);
-    }
-
-    @keyframes aurora {
-      0%, 100% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
-      33% { transform: translate(-30%, -60%) rotate(120deg) scale(1.1); }
-      66% { transform: translate(-70%, -40%) rotate(240deg) scale(0.9); }
-    }
-
-    /* Main Container */
-    .dashboard {
-      position: relative;
-      width: 100%;
-      height: 100vh;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      z-index: 2;
-    }
-
-    /* Central Command Orb Container */
-    .command-center {
-      position: relative;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    /* Emma Orb */
-    .emma-orb-container {
-      position: relative;
-      width: 200px;
-      height: 200px;
-      cursor: pointer;
-      transition: transform 0.3s ease;
-    }
-
-    .emma-orb-container:hover {
-      transform: scale(1.05);
-    }
-
-    .emma-orb-webgl {
-      width: 100%;
-      height: 100%;
-      border-radius: 50%;
-      box-shadow: var(--emma-glow), inset 0 0 40px rgba(255, 255, 255, 0.1);
-      position: relative;
-      overflow: hidden;
-    }
-
-    .emma-orb-webgl canvas {
-      border-radius: 50%;
-      width: 100% !important;
-      height: 100% !important;
-    }
-
-    @keyframes orb-pulse {
-      0%, 100% { transform: scale(1); box-shadow: var(--emma-glow), inset 0 0 40px rgba(255, 255, 255, 0.1); }
-      50% { transform: scale(1.02); box-shadow: 0 0 60px rgba(134, 88, 255, 0.8), inset 0 0 40px rgba(255, 255, 255, 0.2); }
-    }
-
-    @keyframes vault-unlock-pulse {
-      0% { transform: scale(1); }
-      30% { transform: scale(1.1); box-shadow: 0 0 80px rgba(16, 185, 129, 0.8); }
-      60% { transform: scale(0.95); }
-      100% { transform: scale(1); }
-    }
-
-    /* Orb status removed - clean WebGL orb only */
-
-    .orb-icon {
-      font-size: 48px;
-      margin-bottom: 8px;
-      filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
-    }
-
-    /* Orb text removed - clean WebGL orb only */
-
-    /* Neural Network Menu */
-    .neural-network {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      pointer-events: none;
-      z-index: 1; /* CRITICAL FIX: Lower z-index so nodes appear above connections */
-    }
-
-    .neural-canvas {
-      width: 100%;
-      height: 100%;
-    }
-
-    .radial-menu {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      top: 0;
-      left: 0;
-      pointer-events: none;
-      opacity: 0;
-      transition: opacity 0.6s ease;
-    }
-
-    .radial-menu.active {
-      opacity: 1;
-      pointer-events: all;
-    }
-
-    .radial-item {
-      position: absolute;
-      width: 90px;
-      height: 90px;
-      background: var(--emma-glass);
-      backdrop-filter: blur(20px);
-      border: 2px solid rgba(134, 88, 255, 0.3);
-      border-radius: 50%;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      cursor: pointer;
-      transition: all 0.3s ease;
-      opacity: 0;
-      transform: scale(0);
-      box-shadow: 0 0 30px rgba(134, 88, 255, 0.2);
-      animation: float 6s ease-in-out infinite;
-      z-index: 10;
-    }
-
-    .radial-menu.active .radial-item {
-      opacity: 1;
-      transform: scale(1);
-    }
-
-    @keyframes float {
-      0%, 100% { transform: translateY(0px) scale(1); }
-      33% { transform: translateY(-10px) scale(1.02); }
-      66% { transform: translateY(5px) scale(0.98); }
-    }
-
-    /* Elegant add node glow animation */
-    @keyframes addNodeGlow {
-      0%, 100% { 
-        box-shadow: 
-          0 0 20px rgba(16, 185, 129, 0.4),
-          0 0 40px rgba(16, 185, 129, 0.2),
-          inset 0 0 20px rgba(16, 185, 129, 0.1);
-      }
-      50% { 
-        box-shadow: 
-          0 0 30px rgba(16, 185, 129, 0.6),
-          0 0 60px rgba(16, 185, 129, 0.3),
-          inset 0 0 30px rgba(16, 185, 129, 0.15);
-      }
-    }
-
-    /* Subtle heartbeat animation for people nodes */
-    @keyframes heartbeat {
-      0%, 100% { 
-        box-shadow: 
-          0 8px 32px rgba(139, 92, 246, 0.4),
-          0 0 20px rgba(239, 68, 68, 0.3),
-          0 0 40px rgba(239, 68, 68, 0.1);
-      }
-      25% { 
-        box-shadow: 
-          0 8px 32px rgba(139, 92, 246, 0.4),
-          0 0 25px rgba(239, 68, 68, 0.4),
-          0 0 50px rgba(239, 68, 68, 0.15);
-      }
-      50% { 
-        box-shadow: 
-          0 8px 32px rgba(139, 92, 246, 0.4),
-          0 0 20px rgba(239, 68, 68, 0.3),
-          0 0 40px rgba(239, 68, 68, 0.1);
-      }
-      75% { 
-        box-shadow: 
-          0 8px 32px rgba(139, 92, 246, 0.4),
-          0 0 25px rgba(239, 68, 68, 0.4),
-          0 0 50px rgba(239, 68, 68, 0.15);
-      }
-    }
-
-    /* Memory Constellation Styles - Star-like nodes */
-    .memory-node {
-      font-size: 12px;
-      color: white;
-      backdrop-filter: blur(15px);
-      box-shadow:
-        0 0 30px rgba(134, 88, 255, 0.4),
-        0 0 60px rgba(134, 88, 255, 0.2),
-        inset 0 0 20px rgba(255, 255, 255, 0.1);
-      border: 1px solid rgba(255, 255, 255, 0.2);
-      position: relative;
-    }
-
-    /* Star-like glow effect */
-    .memory-node::before {
-      content: '';
-      position: absolute;
-      top: -2px;
-      left: -2px;
-      right: -2px;
-      bottom: -2px;
-      border-radius: 50%;
-      background: linear-gradient(45deg, rgba(134, 88, 255, 0.3), rgba(240, 147, 251, 0.3));
-      z-index: -1;
-      opacity: 0.7;
-      animation: star-pulse 3s ease-in-out infinite;
-    }
-
-    @keyframes star-pulse {
-      0%, 100% { transform: scale(1); opacity: 0.7; }
-      50% { transform: scale(1.1); opacity: 1; }
-    }
-
-    .memory-node .memory-thumbnail {
-      font-size: 28px;
-      margin-bottom: 2px;
-      filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5));
-      text-shadow: 0 0 10px rgba(134, 88, 255, 0.8);
-    }
-
-    .memory-node .memory-label {
-      font-size: 11px;
-      opacity: 0;
-      position: absolute;
-      top: 75px;
-      left: 50%;
-      transform: translateX(-50%);
-      background: rgba(17, 17, 27, 0.95);
-      padding: 6px 10px;
-      border-radius: 6px;
-      white-space: nowrap;
-      transition: all 0.3s ease;
-      pointer-events: none;
-      z-index: 1001;
-      border: 1px solid rgba(134, 88, 255, 0.3);
-      backdrop-filter: blur(10px);
-      font-weight: 500;
-    }
-
-    .memory-node:hover .memory-label {
-      opacity: 1;
-      transform: translateX(-50%) translateY(-5px);
-    }
-
-    /* Theme-based colors */
-    .memory-node[data-theme="family"] {
-      box-shadow:
-        0 0 30px rgba(255, 105, 135, 0.4),
-        0 0 60px rgba(255, 105, 135, 0.2);
-    }
-
-    .memory-node[data-theme="travel"] {
-      box-shadow:
-        0 0 30px rgba(52, 211, 153, 0.4),
-        0 0 60px rgba(52, 211, 153, 0.2);
-    }
-
-    .memory-node[data-theme="recent"] {
-      box-shadow:
-        0 0 30px rgba(96, 165, 250, 0.4),
-        0 0 60px rgba(96, 165, 250, 0.2);
-    }
-
-    .memory-node[data-theme="special"] {
-      box-shadow:
-        0 0 30px rgba(251, 191, 36, 0.4),
-        0 0 60px rgba(251, 191, 36, 0.2);
-    }
-
-    .constellation-controls {
-      color: white;
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-    }
-
-    .constellation-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 15px;
-    }
-
-    .constellation-header h3 {
-      margin: 0;
-      font-size: 18px;
-      font-weight: 600;
-    }
-
-    .constellation-close {
-      background: none;
-      border: none;
-      color: white;
-      font-size: 18px;
-      cursor: pointer;
-      padding: 5px;
-      border-radius: 50%;
-      width: 30px;
-      height: 30px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      transition: background 0.3s ease;
-    }
-
-    .constellation-close:hover {
-      background: rgba(255, 255, 255, 0.1);
-    }
-
-    .constellation-themes {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 8px;
-    }
-
-    .theme-filter {
-      background: rgba(134, 88, 255, 0.2);
-      border: 1px solid rgba(134, 88, 255, 0.4);
-      color: white;
-      padding: 8px 12px;
-      border-radius: 20px;
-      cursor: pointer;
-      font-size: 12px;
-      transition: all 0.3s ease;
-    }
-
-    .theme-filter.active {
-      background: rgba(134, 88, 255, 0.4);
-      border-color: rgba(134, 88, 255, 0.6);
-    }
-
-    .theme-filter.disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-
-    .theme-filter:hover:not(.disabled) {
-      background: rgba(134, 88, 255, 0.3);
-      transform: translateY(-2px);
-    }
-
-    /* Memory Dialog Styles */
-    .memory-dialog {
-      background: rgba(17, 17, 27, 0.95);
-      border: 1px solid rgba(134, 88, 255, 0.3);
-      border-radius: 16px;
-      padding: 0;
-      max-width: 800px;
-      width: 90%;
-      max-height: 80vh;
-      overflow: hidden;
-      backdrop-filter: blur(20px);
-      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
-      transform: scale(0.9);
-      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    }
-
-    .memory-dialog-overlay[style*="opacity: 1"] .memory-dialog {
-      transform: scale(1);
-    }
-
-    .memory-dialog-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 24px 32px;
-      border-bottom: 1px solid rgba(134, 88, 255, 0.2);
-      background: linear-gradient(135deg, rgba(134, 88, 255, 0.1), rgba(240, 147, 251, 0.1));
-    }
-
-    .memory-title {
-      margin: 0;
-      font-size: 24px;
-      font-weight: 600;
-      color: white;
-      text-shadow: 0 0 10px rgba(134, 88, 255, 0.5);
-    }
-
-    .memory-close {
-      background: none;
-      border: none;
-      color: white;
-      font-size: 24px;
-      cursor: pointer;
-      padding: 8px;
-      border-radius: 50%;
-      width: 40px;
-      height: 40px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      transition: background 0.3s ease;
-    }
-
-    .memory-close:hover {
-      background: rgba(255, 255, 255, 0.1);
-    }
-
-    .memory-content {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 32px;
-      padding: 32px;
-    }
-
-    .memory-slideshow {
-      display: flex;
-      flex-direction: column;
-      gap: 16px;
-    }
-
-    .slideshow-container {
-      aspect-ratio: 16/9;
-      border-radius: 12px;
-      overflow: hidden;
-      background: rgba(134, 88, 255, 0.1);
-      border: 1px solid rgba(134, 88, 255, 0.2);
-    }
-
-    .memory-slide {
-      width: 100%;
-      height: 100%;
-      display: none;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .memory-slide.active {
-      display: flex;
-    }
-
-    .media-placeholder {
-      text-align: center;
-      color: rgba(255, 255, 255, 0.7);
-    }
-
-    .media-icon {
-      font-size: 48px;
-      display: block;
-      margin-bottom: 16px;
-    }
-
-    .slideshow-controls {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 16px;
-    }
-
-    .slide-btn {
-      background: rgba(134, 88, 255, 0.2);
-      border: 1px solid rgba(134, 88, 255, 0.4);
-      color: white;
-      padding: 8px 12px;
-      border-radius: 8px;
-      cursor: pointer;
-      font-size: 18px;
-      transition: all 0.3s ease;
-    }
-
-    .slide-btn:hover {
-      background: rgba(134, 88, 255, 0.4);
-      transform: scale(1.05);
-    }
-
-    .slide-indicator {
-      color: rgba(255, 255, 255, 0.8);
-      font-size: 14px;
-      font-weight: 500;
-    }
-
-    .memory-details {
-      display: flex;
-      flex-direction: column;
-      gap: 24px;
-    }
-
-    .memory-summary h3 {
-      margin: 0 0 12px 0;
-      font-size: 18px;
-      font-weight: 600;
-      color: white;
-    }
-
-    .memory-summary p {
-      margin: 0;
-      line-height: 1.6;
-      color: rgba(255, 255, 255, 0.8);
-    }
-
-    .memory-metadata {
-      display: flex;
-      flex-direction: column;
-      gap: 12px;
-    }
-
-    .metadata-item {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 8px 0;
-      border-bottom: 1px solid rgba(134, 88, 255, 0.1);
-    }
-
-    .metadata-item .label {
-      font-weight: 500;
-      color: rgba(255, 255, 255, 0.7);
-    }
-
-    .metadata-item .value {
-      font-weight: 600;
-      color: white;
-    }
-
-    .value.theme-family { color: rgba(255, 105, 135, 1); }
-    .value.theme-travel { color: rgba(52, 211, 153, 1); }
-    .value.theme-recent { color: rgba(96, 165, 250, 1); }
-    .value.theme-special { color: rgba(251, 191, 36, 1); }
-
-    .memory-actions {
-      display: flex;
-      justify-content: flex-end;
-      gap: 12px;
-      padding: 24px 32px;
-      border-top: 1px solid rgba(134, 88, 255, 0.2);
-      background: rgba(134, 88, 255, 0.05);
-    }
-
-    .action-btn {
-      padding: 12px 24px;
-      border-radius: 8px;
-      font-weight: 500;
-      cursor: pointer;
-      transition: all 0.3s ease;
-      border: none;
-    }
-
-    .action-btn.secondary {
-      background: rgba(134, 88, 255, 0.2);
-      color: white;
-      border: 1px solid rgba(134, 88, 255, 0.4);
-    }
-
-    .action-btn.secondary:hover {
-      background: rgba(134, 88, 255, 0.3);
-      transform: translateY(-2px);
-    }
-
-    .action-btn.primary {
-      background: linear-gradient(135deg, rgba(134, 88, 255, 1), rgba(240, 147, 251, 0.8));
-      color: white;
-      border: none;
-    }
-
-    .action-btn.primary:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 8px 25px rgba(134, 88, 255, 0.4);
-    }
-
-    .radial-item:nth-child(1) { animation-delay: 0s; }
-    .radial-item:nth-child(2) { animation-delay: 0.5s; }
-    .radial-item:nth-child(3) { animation-delay: 1s; }
-    .radial-item:nth-child(4) { animation-delay: 1.5s; }
-    .radial-item:nth-child(5) { animation-delay: 2s; }
-    .radial-item:nth-child(6) { animation-delay: 2.5s; }
-    .radial-item:nth-child(7) { animation-delay: 3s; }
-    .radial-item:nth-child(8) { animation-delay: 3.5s; }
-
-    .radial-item:hover {
-      background: rgba(134, 88, 255, 0.3);
-      border-color: var(--emma-purple);
-      transform: scale(1.15);
-      box-shadow: 0 0 40px rgba(134, 88, 255, 0.6);
-      animation-play-state: paused;
-    }
-
-    .radial-item.pulsing {
-      animation: pulse 2s ease-in-out infinite;
-    }
-
-    @keyframes pulse {
-      0%, 100% {
-        box-shadow: 0 0 30px rgba(134, 88, 255, 0.2);
-        transform: scale(1);
-      }
-      50% {
-        box-shadow: 0 0 50px rgba(134, 88, 255, 0.5);
-        transform: scale(1.05);
-      }
-    }
-
-    .radial-item-icon {
-      font-size: 32px;
-      margin-bottom: 4px;
-      filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.3));
-    }
-
-    .radial-item-label {
-      font-size: 12px;
-      text-align: center;
-      opacity: 0.9;
-      font-weight: 500;
-    }
-
-    .node-connection {
-      stroke: rgba(134, 88, 255, 0.3);
-      stroke-width: 2;
-      fill: none;
-      stroke-dasharray: 5, 5;
-      animation: dash 20s linear infinite;
-    }
-
-    @keyframes dash {
-      to { stroke-dashoffset: -100; }
-    }
-
-    /* Info Panels */
-    .info-panel {
-      position: fixed;
-      background: var(--emma-glass);
-      backdrop-filter: blur(20px);
-      border: 1px solid var(--emma-border);
-      border-radius: 20px;
-      padding: 24px;
-      min-width: 280px;
-      opacity: 0;
-      transform: translateY(20px);
-      transition: all 0.4s ease;
-      z-index: 10;
-    }
-
-    .info-panel.active {
-      opacity: 1;
-      transform: translateY(0);
-    }
-
-    /* Fade panels and header text when neural menu is active */
-    body.menu-active .info-panel {
-      opacity: 0;
-      transform: translateY(20px) scale(0.9);
-      filter: blur(2px);
-      pointer-events: none;
-    }
-
-    body.menu-active .welcome-text {
-      opacity: 0 !important;
-      transform: translateY(-20px) scale(0.9);
-      filter: blur(3px);
-      pointer-events: none;
-      visibility: hidden;
-    }
-
-    body.menu-active .voice-indicator {
-      opacity: 0;
-      transform: translateX(-50%) translateY(20px) scale(0.9);
-      filter: blur(2px);
-      pointer-events: none;
-    }
-
-    body.menu-active .constellation-canvas {
-      opacity: 0;
-      filter: blur(3px);
-      pointer-events: none;
-    }
-
-    /* Constellation Mode - Hide ALL UI except constellation */
-    body.constellation-active .info-panel,
-    body.constellation-active .welcome-text,
-    body.constellation-active .voice-indicator,
-    body.constellation-active .constellation-canvas,
-    body.constellation-active .quick-stats {
-      opacity: 0 !important;
-      visibility: hidden !important;
-      pointer-events: none !important;
-      transition: all 0.5s ease;
-    }
-
-    /* Keep only constellation controls and radial menu visible */
-    body.constellation-active .constellation-controls,
-    body.constellation-active .radial-menu {
-      opacity: 1 !important;
-      visibility: visible !important;
-      pointer-events: all !important;
-    }
-
-    /* Hide panels in constellation mode */
-    body.constellation-active .info-panel.right-stack,
-    body.constellation-active .utility-icons {
-      opacity: 0 !important;
-      visibility: hidden !important;
-      pointer-events: none !important;
-    }
-
-    /* Bottom Left Utility Icons */
-    /* Clean Icons - No backgrounds */
-    .clean-icons {
-      position: fixed;
-      bottom: 24px;
-      left: 24px;
-      display: flex;
-      gap: 16px;
-      z-index: 1000;
-    }
-
-    .clean-icons > div {
-      cursor: pointer;
-      color: rgba(255, 255, 255, 0.7);
-      transition: all 0.3s ease;
-      padding: 8px;
-    }
-
-    .clean-icons > div:hover {
-      color: white;
-      transform: scale(1.1);
-    }
-
-    /* Hide old utility icons completely */
-    .utility-icons {
-      display: none !important;
-    }
-
-    .utility-item {
-      display: none !important;
-    }
-
-    .utility-icon {
-      display: none !important;
-    }
-
-    .utility-label {
-      display: none !important;
-    }
-
-    /* Burger menu CSS removed for clean interface */
-
-    /* Right side panel stack - hidden by default */
-    .info-panel.right-stack {
-      position: fixed;
-      right: -360px; /* Hidden off-screen */
-      width: 320px;
-      min-width: 320px;
-      max-width: 320px;
-      height: 180px;
-      min-height: 180px;
-      max-height: 180px;
-      transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-      z-index: 999;
-    }
-
-    /* Show panels when menu is active */
-    .panels-visible .info-panel.right-stack {
-      right: 24px;
-    }
-
-    #daily-brief.right-stack {
-      top: 24px;
-    }
-
-    #ai-insights.right-stack {
-      top: calc(24px + 180px + 16px);
-    }
-
-    #quick-actions.right-stack {
-      top: calc(24px + 180px + 16px + 180px + 16px);
-    }
-
-    /* Legacy positioning for any remaining panels */
-    .info-panel.top-left {
-      top: 24px;
-      left: 24px;
-    }
-
-    .info-panel.top-right {
-      top: 24px;
-      right: 24px;
-    }
-
-    .info-panel.bottom-left {
-      bottom: 24px;
-      left: 24px;
-    }
-
-    .info-panel.bottom-right {
-      bottom: 24px;
-      right: 24px;
-    }
-
-    .panel-header {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      margin-bottom: 16px;
-      padding-bottom: 12px;
-      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-    }
-
-    /* Adjust content for right stack panels */
-    .info-panel.right-stack .panel-content {
-      overflow: hidden;
-      height: calc(100% - 70px); /* Account for header height */
-    }
-
-    .info-panel.right-stack .panel-content p {
-      font-size: 14px;
-      line-height: 1.4;
-      margin-bottom: 8px;
-    }
-
-    .panel-icon {
-      font-size: 24px;
-    }
-
-    .panel-title {
-      font-size: 18px;
-      font-weight: 600;
-    }
-
-    .panel-content {
-      font-size: 14px;
-      line-height: 1.6;
-      color: var(--emma-text-secondary);
-    }
-
-    /* Memory Constellation Background */
-    .constellation-canvas {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      z-index: 1;
-      opacity: 0.3;
-      pointer-events: none;
-    }
-
-    /* Voice Activation Indicator */
-    .voice-indicator {
-      position: fixed;
-      bottom: 40px;
-      left: 50%;
-      transform: translateX(-50%);
-      background: var(--emma-glass);
-      backdrop-filter: blur(20px);
-      border: 1px solid var(--emma-border);
-      border-radius: 30px;
-      padding: 12px 24px;
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      opacity: 0;
-      transform: translateX(-50%) translateY(20px);
-      transition: all 0.3s ease;
-      z-index: 10;
-    }
-
-    .voice-indicator.active {
-      opacity: 1;
-      transform: translateX(-50%) translateY(0);
-    }
-
-    .voice-waves {
-      display: flex;
-      gap: 3px;
-      align-items: center;
-    }
-
-    .voice-wave {
-      width: 3px;
-      height: 20px;
-      background: var(--emma-purple);
-      border-radius: 3px;
-      animation: wave 1s ease-in-out infinite;
-    }
-
-    .voice-wave:nth-child(2) { animation-delay: 0.1s; height: 30px; }
-    .voice-wave:nth-child(3) { animation-delay: 0.2s; height: 25px; }
-    .voice-wave:nth-child(4) { animation-delay: 0.3s; height: 35px; }
-    .voice-wave:nth-child(5) { animation-delay: 0.4s; height: 20px; }
-
-    @keyframes wave {
-      0%, 100% { transform: scaleY(0.5); opacity: 0.5; }
-      50% { transform: scaleY(1); opacity: 1; }
-    }
-
-    /* Quick Stats */
-    .quick-stats {
-      position: absolute;
-      bottom: -80px;
-      left: 50%;
-      transform: translateX(-50%);
-      display: flex;
-      gap: 32px;
-      opacity: 0;
-      transition: opacity 0.4s ease;
-    }
-
-    .command-center:hover .quick-stats {
-      opacity: 1;
-    }
-
-    .stat-item {
-      text-align: center;
-      cursor: pointer;
-      transition: transform 0.2s ease;
-    }
-
-    .stat-item:hover {
-      transform: translateY(-4px);
-    }
-
-    .stat-value {
-      font-size: 28px;
-      font-weight: 700;
-      background: var(--emma-gradient-1);
-      background-clip: text;
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-    }
-
-    .stat-label {
-      font-size: 12px;
-      color: var(--emma-text-tertiary);
-      text-transform: uppercase;
-      letter-spacing: 1px;
-      margin-top: 4px;
-    }
-
-    /* Notification Toast */
-    .toast {
-      position: fixed;
-      top: 24px;
-      right: 24px;
-      background: var(--emma-glass);
-      backdrop-filter: blur(20px);
-      border: 1px solid var(--emma-border);
-      border-radius: 12px;
-      padding: 16px 24px;
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      opacity: 0;
-      transform: translateX(400px);
-      transition: all 0.4s ease;
-      z-index: 1000;
-    }
-
-    .toast.show {
-      opacity: 1;
-      transform: translateX(0);
-    }
-
-    .toast.success { border-color: var(--emma-success); }
-    .toast.error { border-color: var(--emma-error); }
-    .toast.info { border-color: var(--emma-blue); }
-
-    /* Loading State */
-    .loading-overlay {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background: rgba(0, 0, 0, 0.8);
-      backdrop-filter: blur(10px);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      z-index: 9999;
-      opacity: 0;
-      pointer-events: none;
-      transition: opacity 0.3s ease;
-    }
-
-    .loading-overlay.active {
-      opacity: 1;
-      pointer-events: all;
-    }
-
-    .loading-content {
-      text-align: center;
-    }
-
-    .loading-orb {
-      width: 80px;
-      height: 80px;
-      margin: 0 auto 20px;
-      position: relative;
-      /* Emma's orb will be rendered here via WebGL */
-    }
-
-    /* Fallback for when WebGL orb isn't available */
-    .loading-orb-fallback {
-      width: 100%;
-      height: 100%;
-      background: radial-gradient(circle at 30% 30%, #8A5EFA, #764ba2, #f093fb);
-      border-radius: 50%;
-      animation: loading-pulse 1.5s ease-in-out infinite;
-      box-shadow: 0 0 30px rgba(138, 94, 250, 0.4);
-    }
-
-    @keyframes loading-pulse {
-      0%, 100% { transform: scale(1); opacity: 0.8; }
-      50% { transform: scale(1.2); opacity: 1; }
-    }
-
-    /* Welcome Text */
-    .welcome-text {
-      position: fixed;
-      top: 40px;
-      left: 50%;
-      transform: translateX(-50%);
-      text-align: center;
-      opacity: 0;
-      animation: fade-in 1s ease-out 0.5s forwards;
-    }
-
-    .welcome-title {
-      font-size: 48px;
-      font-weight: 200;
-      margin-bottom: 8px;
-      background: var(--emma-gradient-1);
-      background-clip: text;
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-    }
-
-    .welcome-subtitle {
-      font-size: 18px;
-      color: var(--emma-text-secondary);
-      font-weight: 400;
-    }
-
-    @keyframes fade-in {
-      to { opacity: 1; }
-    }
-
-    /* Vault Modal Styles */
-    .vault-modal {
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background: rgba(0, 0, 0, 0.8);
-      backdrop-filter: blur(10px);
-      z-index: 10000;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 20px;
-      opacity: 0;
-      transition: opacity 0.3s ease;
-    }
-
-    .vault-modal.show {
-      opacity: 1;
-    }
-
-    .vault-modal-content {
-      background: linear-gradient(135deg, rgba(26, 16, 51, 0.98), rgba(45, 27, 105, 0.98));
-      border: 1px solid rgba(134, 88, 255, 0.3);
-      border-radius: 24px;
-      max-width: 600px;
-      width: 100%;
-      max-height: 90vh;
-      overflow-y: auto;
-      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
-      transform: scale(0.9);
-      transition: transform 0.3s ease;
-    }
-
-    .vault-modal.show .vault-modal-content {
-      transform: scale(1);
-    }
-
-    .vault-modal-header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 32px 32px 24px;
-      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-      background: linear-gradient(135deg, rgba(134, 88, 255, 0.1), rgba(240, 147, 251, 0.1));
-    }
-
-    .vault-header-content {
-      display: flex;
-      align-items: center;
-      gap: 20px;
-    }
-
-    .vault-icon {
-      width: 64px;
-      height: 64px;
-      background: linear-gradient(135deg, #8658ff, #f093fb);
-      border-radius: 16px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 32px;
-    }
-
-    .vault-title h2 {
-      margin: 0 0 4px 0;
-      font-size: 28px;
-      font-weight: 700;
-      color: var(--emma-text);
-    }
-
-    .vault-title p {
-      margin: 0;
-      color: var(--emma-text-secondary);
-      font-size: 16px;
-    }
-
-    .vault-close {
-      width: 48px;
-      height: 48px;
-      border: none;
-      background: rgba(255, 255, 255, 0.1);
-      color: var(--emma-text);
-      border-radius: 12px;
-      font-size: 24px;
-      cursor: pointer;
-      transition: all 0.2s ease;
-    }
-
-    .vault-close:hover {
-      background: rgba(255, 255, 255, 0.2);
-    }
-
-    .vault-modal-body {
-      padding: 32px;
-    }
-
-    .vault-status-section {
-      margin-bottom: 32px;
-    }
-
-    .vault-status-card {
-      display: flex;
-      align-items: center;
-      gap: 20px;
-      padding: 24px;
-      background: rgba(255, 255, 255, 0.05);
-      border: 1px solid rgba(255, 255, 255, 0.1);
-      border-radius: 16px;
-      transition: all 0.3s ease;
-    }
-
-    .vault-status-card.unlocked {
-      border-color: rgba(74, 222, 128, 0.3);
-      background: rgba(74, 222, 128, 0.1);
-    }
-
-    .vault-btn {
-      padding: 12px 24px;
-      border: none;
-      border-radius: 12px;
-      font-size: 16px;
-      font-weight: 600;
-      cursor: pointer;
-      transition: all 0.3s ease;
-      display: inline-flex;
-      align-items: center;
-      gap: 8px;
-    }
-
-    .vault-btn.primary {
-      background: linear-gradient(135deg, #8658ff, #f093fb);
-      color: white;
-    }
-
-    .vault-btn.primary:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 8px 24px rgba(134, 88, 255, 0.4);
-    }
-
-    .vault-btn.secondary {
-      background: rgba(255, 255, 255, 0.1);
-      color: var(--emma-text);
-      border: 1px solid rgba(255, 255, 255, 0.2);
-    }
-
-    .vault-btn.secondary:hover {
-      background: rgba(255, 255, 255, 0.2);
-    }
-
-    .vault-btn.small {
-      padding: 8px 16px;
-      font-size: 14px;
-    }
-
-    .vault-unlock-section {
-      margin-bottom: 32px;
-      padding: 24px;
-      background: rgba(255, 255, 255, 0.03);
-      border-radius: 16px;
-      border: 1px solid rgba(255, 255, 255, 0.1);
-    }
-
-    .unlock-form label {
-      display: block;
-      margin-bottom: 8px;
-      color: var(--emma-text);
-      font-weight: 600;
-    }
-
-    .unlock-form input {
-      width: 100%;
-      padding: 16px 20px;
-      background: rgba(255, 255, 255, 0.1);
-      border: 1px solid rgba(255, 255, 255, 0.2);
-      border-radius: 12px;
-      color: var(--emma-text);
-      font-size: 16px;
-      margin-bottom: 20px;
-      text-align: center;
-      letter-spacing: 2px;
-    }
-
-    .unlock-form input:focus {
-      outline: none;
-      border-color: var(--emma-purple);
-      box-shadow: 0 0 0 3px rgba(134, 88, 255, 0.2);
-    }
-
-    .unlock-actions {
-      display: flex;
-      gap: 12px;
-      justify-content: center;
-    }
-
-    /* Create Vault Section */
-    .vault-create-section {
-      margin-bottom: 32px;
-      padding: 24px;
-      background: rgba(16, 185, 129, 0.1);
-      border-radius: 16px;
-      border: 1px solid rgba(16, 185, 129, 0.3);
-    }
-
-    .create-vault-card {
-      text-align: center;
-    }
-
-    .create-vault-icon {
-      font-size: 48px;
-      margin-bottom: 16px;
-    }
-
-    .create-vault-content h3 {
-      color: var(--emma-text);
-      margin-bottom: 8px;
-      font-size: 20px;
-    }
-
-    .create-vault-content p {
-      color: var(--emma-text-secondary);
-      margin-bottom: 20px;
-      font-size: 16px;
-    }
-
-    .vault-qr-section h3 {
-      margin: 0 0 8px 0;
-      color: var(--emma-text);
-      font-size: 20px;
-    }
-
-    .vault-qr-section p {
-      margin: 0 0 20px 0;
-      color: var(--emma-text-secondary);
-    }
-
-    .qr-option-card {
-      display: flex;
-      align-items: center;
-      gap: 16px;
-      padding: 20px;
-      background: rgba(255, 255, 255, 0.05);
-      border: 1px solid rgba(255, 255, 255, 0.1);
-      border-radius: 12px;
-      transition: all 0.3s ease;
-      cursor: pointer;
-    }
-
-    .qr-option-card:hover {
-      border-color: rgba(134, 88, 255, 0.3);
-      background: rgba(134, 88, 255, 0.1);
-    }
-
-    .qr-option-icon {
-      font-size: 32px;
-      min-width: 32px;
-    }
-
-    .qr-option-content {
-      flex: 1;
-    }
-
-    .qr-option-content h4 {
-      margin: 0 0 4px 0;
-      color: var(--emma-text);
-      font-size: 16px;
-    }
-
-    .qr-option-content p {
-      margin: 0;
-      color: var(--emma-text-secondary);
-      font-size: 14px;
-    }
-
-    .vault-actions-section {
-      border-top: 1px solid rgba(255, 255, 255, 0.1);
-      padding-top: 24px;
-    }
-
-    /* Responsive Design */
-    /* Mobile-First Responsive Design */
-    @media (max-width: 768px) {
-      .radial-menu {
-        width: 100vw;
-        height: 100vh;
-      }
-
-      .radial-item {
-        width: 70px !important;
-        height: 70px !important;
-        font-size: 12px;
-      }
-
-      .radial-item-icon {
-        font-size: 24px;
-      }
-
-      .radial-item-label {
-        font-size: 10px;
-        margin-top: 2px;
-      }
-
-      .emma-orb-container {
-        width: 120px !important;
-        height: 120px !important;
-      }
-
-      .welcome-title {
-        font-size: 2.5rem;
-      }
-
-      .welcome-subtitle {
-        font-size: 0.9rem;
-      }
-
-      /* Mobile constellation filters */
-      .constellation-burger-menu {
-        top: 10px !important;
-        left: 10px !important;
-      }
-
-      .constellation-menu-panel {
-        width: 280px !important;
-        max-height: 70vh !important;
-        overflow-y: auto;
-      }
-
-      .info-panel,
-      .info-panel.right-stack {
-        position: fixed;
-        bottom: 0 !important;
-        left: 0 !important;
-        right: 0 !important;
-        top: auto !important;
-        width: 100% !important;
-        min-width: 100% !important;
-        max-width: 100% !important;
-        height: auto !important;
-        min-height: auto !important;
-        max-height: 50vh !important;
-        border-radius: 20px 20px 0 0;
-        overflow-y: auto;
-      }
-
-      /* Stack panels vertically on mobile */
-      #daily-brief.right-stack { transform: translateY(0); }
-      #ai-insights.right-stack { transform: translateY(0); }
-      #quick-actions.right-stack { transform: translateY(0); }
-    }
-
-    /* Tablet optimizations */
-    @media (max-width: 1024px) and (min-width: 769px) {
-      .radial-item {
-        width: 80px;
-        height: 80px;
-      }
-
-      .emma-orb-container {
-        width: 160px;
-        height: 160px;
-      }
-    }
-
-    /* Import Voice Capture Premium Styles */
-
-    /* Person Summary Modal Styles */
-    .person-summary-modal-overlay {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background: rgba(0, 0, 0, 0.8);
-      backdrop-filter: blur(10px);
-      -webkit-backdrop-filter: blur(10px);
-      z-index: 10000;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      opacity: 0;
-      visibility: hidden;
-      transition: all 0.3s ease;
-    }
-
-    .person-summary-modal-overlay.active {
-      opacity: 1;
-      visibility: visible;
-    }
-
-    .person-summary-modal {
-      background: rgba(255, 255, 255, 0.1);
-      backdrop-filter: blur(30px);
-      -webkit-backdrop-filter: blur(30px);
-      border: 1px solid rgba(255, 255, 255, 0.2);
-      border-radius: 24px;
-      padding: 32px;
-      width: 90%;
-      max-width: 500px;
-      max-height: 80vh;
-      overflow-y: auto;
-      transform: scale(0.9) translateY(20px);
-      transition: transform 0.3s ease;
-      position: relative;
-    }
-
-    .person-summary-modal .modal-close {
-      position: absolute;
-      top: 16px;
-      right: 16px;
-      width: 32px;
-      height: 32px;
-      border-radius: 50%;
-      background: rgba(255, 255, 255, 0.1);
-      border: 1px solid rgba(255, 255, 255, 0.2);
-      color: white;
-      font-size: 18px;
-      font-weight: 300;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      transition: all 0.3s ease;
-      backdrop-filter: blur(10px);
-      -webkit-backdrop-filter: blur(10px);
-    }
-
-    .person-summary-modal .modal-close:hover {
-      background: rgba(255, 255, 255, 0.2);
-      border-color: rgba(255, 255, 255, 0.4);
-      transform: scale(1.1);
-    }
-
-    .person-summary-modal-overlay.active .person-summary-modal {
-      transform: scale(1) translateY(0);
-    }
-
-    .person-summary-header {
-      display: flex;
-      align-items: center;
-      gap: 20px;
-      margin-bottom: 32px;
-      padding-bottom: 20px;
-      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-    }
-
-    .person-summary-avatar {
-      width: 80px;
-      height: 80px;
-      border-radius: 50%;
-      background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: white;
-      font-weight: 700;
-      font-size: 32px;
-      overflow: hidden;
-    }
-
-    .person-summary-info {
-      flex: 1;
-    }
-
-    .person-summary-name {
-      font-size: 1.8rem;
-      font-weight: 600;
-      color: white;
-      margin: 0 0 8px 0;
-    }
-
-    .person-summary-relation {
-      font-size: 1rem;
-      color: rgba(255, 255, 255, 0.7);
-      margin: 0 0 4px 0;
-      text-transform: capitalize;
-    }
-
-    .person-summary-contact {
-      font-size: 0.9rem;
-      color: rgba(255, 255, 255, 0.5);
-      margin: 0;
-    }
-
-    .summary-section-title {
-      font-size: 1.2rem;
-      font-weight: 600;
-      color: white;
-      margin-bottom: 16px;
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
-
-    .summary-section-title::before {
-      content: '';
-      width: 3px;
-      height: 20px;
-      background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
-      border-radius: 2px;
-    }
-
-    .connected-memories {
-      display: flex;
-      flex-direction: column;
-      gap: 12px;
-      margin-bottom: 24px;
-    }
-
-    .connected-memory-item {
-      display: flex;
-      align-items: center;
-      gap: 16px;
-      padding: 16px;
-      background: rgba(255, 255, 255, 0.05);
-      border-radius: 12px;
-      cursor: pointer;
-      transition: all 0.3s ease;
-    }
-
-    .connected-memory-item:hover {
-      background: rgba(255, 255, 255, 0.1);
-      transform: translateY(-2px);
-    }
-
-    .memory-preview {
-      width: 50px;
-      height: 50px;
-      border-radius: 8px;
-      background: rgba(255, 255, 255, 0.1);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      overflow: hidden;
-      font-size: 20px;
-    }
-
-    .memory-preview img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-      border-radius: 8px;
-    }
-
-    .memory-info {
-      flex: 1;
-    }
-
-    .memory-title {
-      font-size: 1rem;
-      font-weight: 500;
-      color: white;
-      margin-bottom: 4px;
-    }
-
-    .memory-date {
-      font-size: 0.85rem;
-      color: rgba(255, 255, 255, 0.6);
-    }
-
-    .no-memories {
-      text-align: center;
-      padding: 40px 20px;
-      color: rgba(255, 255, 255, 0.5);
-      font-style: italic;
-    }
-
-    .person-summary-actions {
-      display: flex;
-      gap: 12px;
-    }
-
-    .person-summary-actions .btn {
-      flex: 1;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 8px;
-      padding: 12px 16px;
-      border: none;
-      border-radius: 12px;
-      font-weight: 600;
-      cursor: pointer;
-      transition: all 0.3s ease;
-    }
-
-    .person-summary-actions .btn-primary {
-      background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
-      color: white;
-    }
-
-    .person-summary-actions .btn-primary:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 10px 20px rgba(139, 92, 246, 0.3);
-    }
-
-    .person-summary-actions .btn-secondary {
-      background: rgba(255, 255, 255, 0.1);
-      color: rgba(255, 255, 255, 0.8);
-      border: 1px solid rgba(255, 255, 255, 0.2);
-    }
-
-    .person-summary-actions .btn-secondary:hover {
-      background: rgba(255, 255, 255, 0.2);
-      color: white;
-    }
-  </style>
-</head>
-<body>
-  <!-- Aurora Background -->
-  <div class="aurora-bg">
-    <div class="aurora"></div>
-  </div>
-
-  <!-- Memory Constellation Canvas -->
-  <canvas id="constellation" class="constellation-canvas"></canvas>
-
-  <!-- Welcome Text -->
-  <div class="welcome-text">
-    <h1 class="welcome-title">emma</h1>
-    <p class="welcome-subtitle">Your Intelligent Memory Companion</p>
-  </div>
-
-  <!-- Neural Network Background -->
-  <div class="neural-network">
-    <canvas id="neural-canvas" class="neural-canvas"></canvas>
-  </div>
-
-  <!-- Main Dashboard -->
-  <div class="dashboard">
-    <div class="command-center">
-      <!-- Central Emma Orb (WebGL) with Elegant Vault Unlock -->
-      <div class="emma-orb-container" id="emma-orb">
-        <div class="emma-orb-webgl" id="webgl-orb-container">
-          <!-- WebGL Emma Orb will be inserted here -->
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <!-- Radial Menu (Clean 4-item layout around Emma orb) -->
-  <div class="radial-menu" id="radial-menu">
-        <div class="radial-item" data-action="memories">
-          <div class="radial-item-icon">
-            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-2.5 2.5M6.5 3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H6.5z"/>
-              <path d="M9 10h6M9 14h4"/>
-            </svg>
-          </div>
-          <div class="radial-item-label">Memories</div>
-        </div>
-        <div class="radial-item" data-action="people">
-          <div class="radial-item-icon">
-            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
-              <circle cx="12" cy="7" r="4"/>
-            </svg>
-          </div>
-          <div class="radial-item-label">People</div>
-        </div>
-        <div class="radial-item" data-action="chat">
-          <div class="radial-item-icon">
-            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
-            </svg>
-          </div>
-          <div class="radial-item-label">Chat</div>
-        </div>
-      </div>
-
-  <!-- Bottom Left Clean Icons -->
-  <div class="clean-icons" style="
-    position: fixed;
-    bottom: 24px;
-    left: 24px;
-    display: flex;
-    gap: 16px;
-    z-index: 1000;
-  ">
-    <!-- Clean Settings Gear Icon -->
-    <div onclick="window.location.href='pages/emma-settings-redesigned.html'" style="
-      cursor: pointer;
-      color: rgba(255, 255, 255, 0.7);
-      transition: all 0.3s ease;
-      padding: 8px;
-    " onmouseover="this.style.color='white'; this.style.transform='scale(1.1)'" onmouseout="this.style.color='rgba(255, 255, 255, 0.7)'; this.style.transform='scale(1)'">
-      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-        <circle cx="12" cy="12" r="3"/>
-        <path d="m12 1 1.09 3.26L16 5.64l-1.64 3.36L17 12l-2.64 2.64L16 18.36l-3.26-1.09L12 23l-1.09-3.26L8 18.36l1.64-3.36L7 12l2.64-2.64L8 5.64l3.26 1.09z"/>
-      </svg>
-    </div>
-  </div>
-
-      <!-- Quick Stats -->
-      <div class="quick-stats">
-        <div class="stat-item" data-stat="memories">
-          <div class="stat-value" id="stat-memories">0</div>
-          <div class="stat-label">Memories</div>
-        </div>
-        <div class="stat-item" data-stat="people">
-          <div class="stat-value" id="stat-people">0</div>
-          <div class="stat-label">People</div>
-        </div>
-
-        <!-- Revolutionary Migration Button -->
-        <div class="stat-item revolution-upgrade" onclick="openMigrationPage()" style="background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(236, 72, 153, 0.2)); border: 2px solid rgba(139, 92, 246, 0.4); cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden;">
-          <div class="stat-value" style="font-size: 1.2rem; color: #8b5cf6;">🌟</div>
-          <div class="stat-label" style="color: #ec4899; font-weight: 600; font-size: 0.8rem;">Upgrade to .emma</div>
-          <div style="position: absolute; top: 4px; right: 4px; background: linear-gradient(135deg, #8b5cf6, #ec4899); color: white; font-size: 0.6rem; padding: 2px 6px; border-radius: 8px; font-weight: 600;">NEW</div>
-        </div>
-        <div class="stat-item" data-stat="today">
-          <div class="stat-value" id="stat-today">0</div>
-          <div class="stat-label">Today</div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <!-- Burger menu removed for clean interface -->
-
-  <!-- Right Side Panel Stack -->
-  <div class="info-panel right-stack" id="daily-brief">
-    <div class="panel-header">
-      <div class="panel-icon">📅</div>
-      <div class="panel-title">Daily Brief</div>
-    </div>
-    <div class="panel-content">
-      <p>Good morning! You have 3 memories from this day last year.</p>
-      <p style="margin-top: 12px; font-size: 13px; opacity: 0.8;">
-        • Meeting with Sarah about the project<br>
-        • Family dinner at Marina Bay<br>
-        • Completed the meditation course
-      </p>
-    </div>
-  </div>
-
-  <div class="info-panel right-stack" id="ai-insights">
-    <div class="panel-header">
-      <div class="panel-icon">💡</div>
-      <div class="panel-title">AI Insights</div>
-    </div>
-    <div class="panel-content">
-      <p>I noticed you've been capturing more creative moments lately. Your photography memories have increased by 40% this month!</p>
-    </div>
-  </div>
-
-  <div class="info-panel right-stack" id="quick-actions">
-    <div class="panel-header">
-      <div class="panel-icon">⚡</div>
-      <div class="panel-title">Quick Actions</div>
-    </div>
-    <div class="panel-content">
-      <p>Press <kbd>Space</kbd> to activate voice capture<br>
-      Press <kbd>Cmd+K</kbd> to search memories<br>
-      Say "Hey Emma" to start</p>
-    </div>
-  </div>
-
-  <!-- Voice Indicator -->
-  <div class="voice-indicator" id="voice-indicator">
-    <div class="voice-waves">
-      <div class="voice-wave"></div>
-      <div class="voice-wave"></div>
-      <div class="voice-wave"></div>
-      <div class="voice-wave"></div>
-      <div class="voice-wave"></div>
-    </div>
-    <span>Listening...</span>
-  </div>
-
-  <!-- Loading Overlay -->
-  <div class="loading-overlay" id="loading">
-    <div class="loading-content">
-      <div class="loading-orb"></div>
-      <p style="color: var(--emma-text-secondary);">Loading Emma...</p>
-    </div>
-  </div>
-
-  <!-- Vault Management Modal -->
-  <div id="vault-modal" class="vault-modal" style="display: none;">
-    <div class="vault-modal-content">
-      <div class="vault-modal-header">
-        <div class="vault-header-content">
-          <div class="vault-icon">🔐</div>
-          <div class="vault-title">
-            <h2>Emma Memory Vault</h2>
-            <p id="vault-subtitle">Secure access to your encrypted memories</p>
-          </div>
-        </div>
-        <button class="vault-close" id="close-vault-modal">×</button>
-      </div>
-
-      <div class="vault-modal-body">
-        <!-- Vault Status Section -->
-        <div class="vault-status-section">
-          <div class="vault-status-card" id="vault-status-card">
-            <div class="status-icon" id="status-icon">🔒</div>
-            <div class="status-info">
-              <h3 id="status-title">Vault Locked</h3>
-              <p id="status-description">Enter your vault code to access your memories</p>
-            </div>
-            <div class="status-action">
-              <button id="vault-action-btn" class="vault-btn primary">Unlock Vault</button>
-            </div>
-          </div>
-        </div>
-
-        <!-- Unlock Form Section -->
-        <div class="vault-unlock-section" id="unlock-section" style="display: none;">
-          <div class="unlock-form">
-            <label for="vault-password">Vault Code</label>
-            <input type="password" id="vault-password" placeholder="Enter your vault code" autocomplete="current-password">
-            <div class="unlock-actions">
-              <button id="unlock-btn" class="vault-btn primary">🔓 Unlock</button>
-              <button id="cancel-unlock-btn" class="vault-btn secondary">Cancel</button>
-            </div>
-          </div>
-        </div>
-
-        <!-- Create New Vault Section -->
-        <div class="vault-create-section" id="create-vault-section" style="display: none;">
-          <div class="create-vault-card">
-            <div class="create-vault-icon">🆕</div>
-            <div class="create-vault-content">
-              <h3>No Vault Found</h3>
-              <p>Create your first Emma memory vault to get started</p>
-              <button id="create-vault-btn" class="vault-btn primary">
-                🔐 Create New Vault
-              </button>
-            </div>
-          </div>
-        </div>
-
-        <!-- QR Sharing Section -->
-        <div class="vault-qr-section" id="qr-section">
-          <h3>📱 Quick Share</h3>
-          <p>Generate QR codes to securely share your vault or memories</p>
-
-          <div class="qr-options">
-            <div class="qr-option-card" id="generate-vault-qr-dashboard">
-              <div class="qr-option-icon">🔐</div>
-              <div class="qr-option-content">
-                <h4>Share Vault</h4>
-                <p>Time-limited access to your vault</p>
-              </div>
-              <div class="qr-option-action">
-                <button class="vault-btn secondary small">Generate QR</button>
-              </div>
-            </div>
-
-            <div class="qr-option-card" id="open-qr-scanner-dashboard">
-              <div class="qr-option-icon">📷</div>
-              <div class="qr-option-content">
-                <h4>Scan QR Code</h4>
-                <p>Access shared memories</p>
-              </div>
-              <div class="qr-option-action">
-                <button class="vault-btn secondary small">Open Scanner</button>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- Quick Actions -->
-        <div class="vault-actions-section">
-          <div class="quick-actions-grid">
-            <button class="quick-action" onclick="window.location.href='pages/gallery.html'">
-              <span>💝</span>
-              <span>Memories</span>
-            </button>
-            <button class="quick-action" onclick="window.location.href='pages/emma-settings-redesigned.html'">
-              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color: rgba(255, 255, 255, 0.8);">
-                <circle cx="12" cy="12" r="3"/>
-                <path d="m12 1 1.09 3.26L16 5.64l-1.64 3.36L17 12l-2.64 2.64L16 18.36l-3.26-1.09L12 23l-1.09-3.26L8 18.36l1.64-3.36L7 12l2.64-2.64L8 5.64l3.26 1.09z"/>
-              </svg>
-              <span>Settings</span>
-            </button>
-            <button class="quick-action" onclick="window.location.href='pages/people-emma.html'">
-              <span>👥</span>
-              <span>People</span>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <!-- Load all your beautiful Emma components! -->
-  <link rel="stylesheet" href="css/voice-capture-minimal.css">
-  <link rel="stylesheet" href="css/emma-chat-clean.css">
-  <link rel="stylesheet" href="css/emma-share.css">
-
-  <script src="js/base-orb.js"></script>
-  <script src="js/emma-orb.js"></script>
-  <script src="js/vault-control-panel.js"></script>
-  <script src="js/experience-popup-base.js"></script>
-  <script src="js/voice-capture-experience.js"></script>
-  <script src="js/emma-voice-transcription.js"></script>
-  <script src="js/emma-chat-experience.js"></script>
-  <script src="js/emma-qr-generator.js"></script>
-  <script src="js/qr-service.js"></script>
-  <script src="js/emma-share-experience.js"></script>
-  <script src="js/assistant-experience-popup.js"></script>
-  <script src="js/universal-vault-modal.js"></script>
-  <script src="js/unified-memory-wizard.js"></script>
-
-  <script>
-    // Extension mode - Skip vault session validation
-
-    // Vault initialization moved to end of page after ALL scripts load
-
-    // Dashboard Controller
-    class EmmaDashboard {
-      constructor() {
-        this.orb = document.getElementById('emma-orb');
-        this.radialMenu = document.getElementById('radial-menu');
-        this.voiceIndicator = document.getElementById('voice-indicator');
-        this.loading = document.getElementById('loading');
-
-        console.log('🔧 Constructor - radial items:', this.radialMenu ? this.radialMenu.querySelectorAll('.radial-item').length : 'NULL');
-        this.panels = {
-          dailyBrief: document.getElementById('daily-brief'),
-          aiInsights: document.getElementById('ai-insights'),
-          quickActions: document.getElementById('quick-actions')
-        };
-
-        // Burger menu removed for clean interface
-        this.panelsVisible = false;
-
-        // Utility icons functionality
-        this.utilityIcons = document.querySelector('.utility-icons');
-        this.setupUtilityIcons();
-
-        this.isMenuOpen = false;
-        this.stats = { memories: 0, people: 0, today: 0 };
-        this.particles = [];
-        this.nodes = [];
-        this.neuralCanvas = document.getElementById('neural-canvas');
-        this.neuralCtx = this.neuralCanvas.getContext('2d');
-
-        // Neural memory network properties
-        this.isConstellationMode = false;
-        this.constellationMemories = [];
-        this.centralNeuron = null;
-
-        // Initialize WebGL Emma Orb
-        this.initEmmaOrb();
-
-        // Listen for vault status changes
-        document.addEventListener('vaultStatusChanged', (event) => {
-
-          this.updateVaultNodeStatus();
-          this.updateAllVaultIndicators();
-        });
-
-        this.init();
-      }
-
-      async init() {
-        // Show loading
-        this.loading.classList.add('active');
-
-        // Initialize Emma's orb in loading screen
-        this.initLoadingOrb();
-
-        // Initialize constellation background
-        this.initConstellation();        // Setup event listeners
-        this.setupEventListeners();
-
-        // Load initial data
-        await this.loadDashboardData();
-
-        // Animate panels based on time of day
-        this.showContextualPanels();
-
-        // Hide loading
-        setTimeout(() => {
-          this.loading.classList.remove('active');
-        }, 1500);
-
-        // Start background animations
-        this.startAnimations();
-      }
-
-      initConstellation() {
-        const canvas = document.getElementById('constellation');
-        const ctx = canvas.getContext('2d');
-
-        // Set canvas size
-        const resize = () => {
-          canvas.width = window.innerWidth;
-          canvas.height = window.innerHeight;
-        };
-        resize();
-        window.addEventListener('resize', resize);
-
-        // Create memory particles
-        const particleCount = 50;
-        for (let i = 0; i < particleCount; i++) {
-          this.particles.push({
-            x: Math.random() * canvas.width,
-            y: Math.random() * canvas.height,
-            vx: (Math.random() - 0.5) * 0.5,
-            vy: (Math.random() - 0.5) * 0.5,
-            radius: Math.random() * 2 + 1,
-            opacity: Math.random() * 0.5 + 0.2
-          });
-        }
-
-        // Animation loop
-        const animate = () => {
-          ctx.clearRect(0, 0, canvas.width, canvas.height);
-
-          // Update and draw particles
-          this.particles.forEach((p, i) => {
-            // Update position
-            p.x += p.vx;
-            p.y += p.vy;
-
-            // Wrap around edges
-            if (p.x < 0) p.x = canvas.width;
-            if (p.x > canvas.width) p.x = 0;
-            if (p.y < 0) p.y = canvas.height;
-            if (p.y > canvas.height) p.y = 0;
-
-            // Draw particle
-            ctx.beginPath();
-            ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
-            ctx.fillStyle = `rgba(134, 88, 255, ${p.opacity})`;
-            ctx.fill();
-
-            // Draw connections
-            this.particles.forEach((p2, j) => {
-              if (i !== j) {
-                const dx = p.x - p2.x;
-                const dy = p.y - p2.y;
-                const dist = Math.sqrt(dx * dx + dy * dy);
-
-                if (dist < 100) {
-                  ctx.beginPath();
-                  ctx.moveTo(p.x, p.y);
-                  ctx.lineTo(p2.x, p2.y);
-                  ctx.strokeStyle = `rgba(134, 88, 255, ${(1 - dist / 100) * 0.2})`;
-                  ctx.stroke();
-                }
-              }
-            });
-          });
-
-          requestAnimationFrame(animate);
-        };
-        animate();
-      }
-
-      setupEventListeners() {
-        // Orb click - exit constellation or toggle menu
-        this.orb.addEventListener('click', (e) => {
-          e.stopPropagation();
-          if (this.isConstellationMode) {
-            // Simple: Exit constellation mode back to main dashboard
-            this.exitMemoryConstellation();
-          } else {
-            this.toggleRadialMenu();
-          }
-        });
-
-        // Radial menu items
-        this.radialMenu.querySelectorAll('.radial-item').forEach(item => {
-          item.addEventListener('click', (e) => {
-            e.stopPropagation();
-            const action = item.dataset.action;
-            this.handleRadialAction(action);
-          });
-        });
-
-        // Track mouse/touch position for neural effects
-        this.mouseX = 0;
-        this.mouseY = 0;
-
-        // Mouse support
-        document.addEventListener('mousemove', (e) => {
-          this.mouseX = e.clientX;
-          this.mouseY = e.clientY;
-          this.updateNodeProximityEffects();
-        });
-
-        // Touch support for mobile
-        document.addEventListener('touchmove', (e) => {
-          if (e.touches.length > 0) {
-            this.mouseX = e.touches[0].clientX;
-            this.mouseY = e.touches[0].clientY;
-            this.updateNodeProximityEffects();
-          }
-        }, { passive: true });
-
-        document.addEventListener('touchstart', (e) => {
-          if (e.touches.length > 0) {
-            this.mouseX = e.touches[0].clientX;
-            this.mouseY = e.touches[0].clientY;
-          }
-        }, { passive: true });
-
-        // Handle window resize for responsive repositioning
-        window.addEventListener('resize', () => {
-          // Debounce resize events
-          clearTimeout(this.resizeTimeout);
-          this.resizeTimeout = setTimeout(() => {
-            if (this.isMenuOpen || this.isConstellationMode) {
-              this.repositionNodesOnResize();
-              
-              // CRITICAL FIX: Resize canvas and redraw connections after repositioning
-              if (this.neuralCanvas) {
-                this.neuralCanvas.width = window.innerWidth;
-                this.neuralCanvas.height = window.innerHeight;
-              }
-              
-              // Force immediate redraw of connections with new positions
-              this.render();
-            }
-          }, 250);
-        });
-      }
-
-      // Extract proximity effects to separate method for reuse
-      updateNodeProximityEffects() {
-        // Add proximity effects to nodes (both menu and constellation modes)
-        if ((this.isMenuOpen || this.isConstellationMode) && this.nodes.length > 0) {
-          this.nodes.forEach(node => {
-            const dist = Math.sqrt(
-              Math.pow(this.mouseX - node.x, 2) +
-              Math.pow(this.mouseY - node.y, 2)
-            );
-
-            if (dist < 120) {
-              // Subtle attraction to mouse with organic feel
-              const force = (120 - dist) / 120;
-              const angle = Math.atan2(this.mouseY - node.y, this.mouseX - node.x);
-
-              // Very gentle attraction with organic damping
-              const attractionStrength = force * 0.08; // Much more subtle
-              node.vx += Math.cos(angle) * attractionStrength;
-              node.vy += Math.sin(angle) * attractionStrength;
-
-              // Add glow effect (stronger for memory nodes)
-              const glowStrength = this.isConstellationMode ? 60 : 40;
-              const baseOpacity = this.isConstellationMode ? 0.8 : 0.6;
-              node.element.style.boxShadow = `0 0 ${glowStrength + force * 30}px rgba(134, 88, 255, ${baseOpacity + force * 0.4})`;
-            } else {
-              // Reset glow when mouse is far
-              node.element.style.boxShadow = '';
-            }
-          });
-        }
-      }
-
-      // Reposition nodes on window resize for responsive behavior
-      repositionNodesOnResize() {
-        if (!this.nodes || this.nodes.length === 0) return;
-
-        const centerX = window.innerWidth / 2;
-        const centerY = window.innerHeight / 2;
-
-        // Recalculate responsive radius
-        const isMobile = window.innerWidth <= 768;
-        const isTablet = window.innerWidth <= 1024 && window.innerWidth > 768;
-        let radius;
-
-        if (isMobile) {
-          radius = Math.min(window.innerWidth, window.innerHeight) * 0.25;
-        } else if (isTablet) {
-          radius = 200;
-        } else {
-          radius = 250;
-        }
-
-        // Reposition each node
-        this.nodes.forEach((node, i) => {
-          if (this.isConstellationMode) {
-            // For constellation mode, maintain relative positions but scale
-            const scaleX = window.innerWidth / (this.lastWindowWidth || window.innerWidth);
-            const scaleY = window.innerHeight / (this.lastWindowHeight || window.innerHeight);
-
-            node.x = centerX + (node.x - centerX) * scaleX;
-            node.y = centerY + (node.y - centerY) * scaleY;
-            node.baseX = node.x;
-            node.baseY = node.y;
-          } else {
-            // For radial menu, recalculate circular positions
-            const angle = (i / this.nodes.length) * Math.PI * 2 - Math.PI / 2;
-            node.x = centerX + Math.cos(angle) * radius;
-            node.y = centerY + Math.sin(angle) * radius;
-            node.baseX = node.x;
-            node.baseY = node.y;
-          }
-
-          // Update DOM position
-          if (node.element) {
-            const elementSize = isMobile ? 35 : 45; // Half of element size for centering
-            node.element.style.left = (node.x - elementSize) + 'px';
-            node.element.style.top = (node.y - elementSize) + 'px';
-          }
-        });
-
-        // Store current window size for next resize
-        this.lastWindowWidth = window.innerWidth;
-        this.lastWindowHeight = window.innerHeight;
-
-      }
-
-      // Keyboard shortcuts
-      setupKeyboardShortcuts() {
-        document.addEventListener('keydown', (e) => {
-          if (e.code === 'Space' && !e.target.matches('input, textarea')) {
-            e.preventDefault();
-            this.startVoiceCapture();
-          } else if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
-            e.preventDefault();
-            this.handleRadialAction('search');
-          } else if (e.key === 'Escape' && this.isMenuOpen) {
-            this.toggleRadialMenu();
-          }
-        });
-
-        // Click outside to close menu
-        document.addEventListener('click', (e) => {
-          if (this.isMenuOpen && !this.orb.contains(e.target) && !this.radialMenu.contains(e.target)) {
-
-            this.toggleRadialMenu();
-          }
-        });
-
-        // Hover effects for orb
-        this.orb.addEventListener('mouseenter', () => {
-          document.querySelectorAll('.quick-stats').forEach(el => {
-            el.style.opacity = '1';
-          });
-        });
-
-        // Initialize keyboard shortcuts
-        this.setupKeyboardShortcuts();
-
-        // CRITICAL FIX: Listen for vault status changes from extension
-        this.setupVaultStatusListener();
-      }
-
-      // Listen for vault status changes and update UI
-      setupVaultStatusListener() {
-        window.addEventListener('vault-status-changed', (event) => {
-
-          // Update global status
-          window.currentVaultStatus = event.detail;
-
-          // Update vault node status in UI
-          this.updateVaultNodeStatus();
-
-          // Update any vault-dependent UI elements
-          this.refreshVaultDependentUI();
-        });
-
-        // Also listen for extension-vault-ready directly
-        window.addEventListener('extension-vault-ready', (event) => {
-
-          // Ensure vault status is updated
-          if (window.webVaultStatus) {
-            window.webVaultStatus.status.isUnlocked = true;
-            window.webVaultStatus.status.hasVault = true;
-            window.webVaultStatus.status.name = event.detail.vaultName;
-            window.currentVaultStatus = window.webVaultStatus.status;
-          }
-
-          // Update UI immediately
-          this.updateVaultNodeStatus();
-        });
-      }
-
-      // Refresh UI elements that depend on vault status
-      refreshVaultDependentUI() {
-        // Update any vault-dependent elements
-        const vaultElements = document.querySelectorAll('[data-vault-dependent]');
-        vaultElements.forEach(element => {
-          if (window.currentVaultStatus && window.currentVaultStatus.isUnlocked) {
-            element.classList.remove('vault-locked');
-            element.classList.add('vault-unlocked');
-          } else {
-            element.classList.remove('vault-unlocked');
-            element.classList.add('vault-locked');
-          }
-        });
-      }
-
-      initNeuralNetwork() {
-        // Initialize neural nodes with responsive positioning
-
-        console.log('🔧 radialMenu innerHTML preview:', this.radialMenu ? this.radialMenu.innerHTML.substring(0, 200) : 'NULL');
-
-        const items = this.radialMenu.querySelectorAll('.radial-item');
-        const centerX = window.innerWidth / 2;
-        const centerY = window.innerHeight / 2;
-
-        // Responsive radius calculation
-        const isMobile = window.innerWidth <= 768;
-        const isTablet = window.innerWidth <= 1024 && window.innerWidth > 768;
-        let radius;
-
-        if (isMobile) {
-          radius = Math.min(window.innerWidth, window.innerHeight) * 0.25; // 25% of smaller dimension
-        } else if (isTablet) {
-          radius = 200;
-        } else {
-          radius = 250;
-        }
-
-        // Debug: Check if items exist but are hidden
-        if (items.length === 0) {
-
-          const allChildren = this.radialMenu.querySelectorAll('*');
-
-          allChildren.forEach((child, i) => {
-
-          });
-        }
-
-        items.forEach((item, i) => {
-          const angle = (i / items.length) * Math.PI * 2 - Math.PI / 2;
-          const x = centerX + Math.cos(angle) * radius;
-          const y = centerY + Math.sin(angle) * radius;
-
-          // CRITICAL: Actually position the DOM element
-          item.style.left = (x - 45) + 'px'; // Center the 90px item
-          item.style.top = (y - 45) + 'px';
-          console.log('🔧 Positioned item', i, 'at', x, y, 'DOM:', (x-45), (y-45));
-
-          this.nodes.push({
-            element: item,
-            x: x,
-            y: y,
-            vx: 0,
-            vy: 0,
-            baseX: x,
-            baseY: y,
-            angle: angle,
-            connections: []
-          });
-        });
-
-        // Create connections between nodes
-        this.nodes.forEach((node, i) => {
-          // Connect to adjacent nodes
-          const next = this.nodes[(i + 1) % this.nodes.length];
-          const prev = this.nodes[(i - 1 + this.nodes.length) % this.nodes.length];
-          node.connections.push(next, prev);
-
-          // Connect to opposite node for cross-connections
-          const opposite = this.nodes[(i + Math.floor(this.nodes.length / 2)) % this.nodes.length];
-          if (opposite !== node) {
-            node.connections.push(opposite);
-          }
-        });
-
-        // Add central orb as a node
-        this.centralNode = {
-          x: centerX,
-          y: centerY,
-          element: this.orb
-        };
-
-        // Connect all nodes to center
-        this.nodes.forEach(node => {
-          node.connections.push(this.centralNode);
-        });
-      }
-
-      // Removed initRadialNeuralNetwork - no longer needed since we exit constellation instead of showing menu overlay
-
-      toggleRadialMenu() {
-        this.isMenuOpen = !this.isMenuOpen;
-
-        if (this.isMenuOpen) {
-          this.radialMenu.classList.add('active');
-          document.body.classList.add('menu-active'); // Fade ALL UI elements
-
-          this.updateVaultNodeStatus(); // Update vault node based on status
-
-          // Initialize neural network (constellation mode now exits instead of showing menu)
-
-          this.initNeuralNetwork();
-
-          this.animateNeuralNetwork();
-
-          // Stagger animations for menu items
-
-          const menuItems = this.radialMenu.querySelectorAll('.radial-item');
-
-          menuItems.forEach((item, i) => {
-            setTimeout(() => {
-
-              // Use !important to override CSS animation
-              item.style.setProperty('transform', 'scale(1)', 'important');
-              item.style.setProperty('opacity', '1', 'important');
-              // Temporarily disable float animation during menu
-              item.style.animationPlayState = 'paused';
-            }, i * 50);
-          });
-        } else {
-          this.radialMenu.classList.remove('active');
-          document.body.classList.remove('menu-active'); // Restore ALL UI elements
-
-          this.radialMenu.querySelectorAll('.radial-item').forEach(item => {
-            item.style.setProperty('transform', 'scale(0)', 'important');
-            item.style.setProperty('opacity', '0', 'important');
-            // Re-enable float animation when menu closes
-            item.style.animationPlayState = 'running';
-          });
-
-          // Clear neural animation
-          if (this.neuralAnimationId) {
-            cancelAnimationFrame(this.neuralAnimationId);
-            this.neuralCtx.clearRect(0, 0, this.neuralCanvas.width, this.neuralCanvas.height);
-          }
-
-          // Reset nodes array (constellation mode exits instead of showing menu overlay)
-          this.nodes = [];
-        }
-      }
-
-      initLoadingOrb() {
-        try {
-          const loadingOrbContainer = document.querySelector('.loading-orb');
-          if (!loadingOrbContainer) {
-            console.warn('🌟 Loading orb container not found');
-            return;
-          }
-
-          if (window.EmmaOrb) {
-            // Create WebGL Emma Orb for loading screen
-            this.loadingOrb = new window.EmmaOrb(loadingOrbContainer, {
-              hue: 270, // Emma's signature purple-pink
-              hoverIntensity: 0.5,
-              rotateOnHover: false,
-              forceHoverState: true // Always show active state during loading
-            });
-
-          } else {
-            console.warn('🌟 EmmaOrb class not available for loading, using fallback');
-            // Fallback to gradient orb if WebGL not available
-            const fallbackDiv = document.createElement('div');
-            fallbackDiv.className = 'loading-orb-fallback';
-            loadingOrbContainer.appendChild(fallbackDiv);
-          }
-        } catch (error) {
-          console.error('🚨 Error initializing Loading Emma Orb:', error);
-          // Fallback on error
-          const loadingOrbContainer = document.querySelector('.loading-orb');
-          if (loadingOrbContainer) {
-            const fallbackDiv = document.createElement('div');
-            fallbackDiv.className = 'loading-orb-fallback';
-            loadingOrbContainer.appendChild(fallbackDiv);
-          }
-        }
-      }
-
-      initEmmaOrb() {
-        try {
-          const orbContainer = document.getElementById('webgl-orb-container');
-          if (!orbContainer) {
-            console.warn('🌟 WebGL orb container not found');
-            return;
-          }          if (window.EmmaOrb) {
-            try {
-              // Create WebGL Emma Orb with Emma's signature purple-pink hue
-              this.webglOrb = new window.EmmaOrb(orbContainer, {
-                hue: 270, // Purple-pink Emma colors
-                hoverIntensity: 0.35,
-                rotateOnHover: true,
-                forceHoverState: false
-              });
-
-            } catch (webglError) {
-              console.error('❌ WebGL orb creation failed:', webglError);
-              // Force fallback
-              window.EmmaOrb = null;
-            }
-          }
-
-          if (!window.EmmaOrb || !this.webglOrb) {
-            console.warn('🌟 EmmaOrb class not available, using fallback');
-            // Fallback to beautiful gradient if EmmaOrb class not loaded
-            orbContainer.style.background = 'radial-gradient(circle at 30% 30%, #8658ff, #4f46e5, #f093fb)';
-            orbContainer.style.borderRadius = '50%';
-            orbContainer.style.width = '100%';
-            orbContainer.style.height = '100%';
-            orbContainer.style.boxShadow = '0 0 40px rgba(134, 88, 255, 0.6), inset 0 0 40px rgba(255, 255, 255, 0.1)';
-            orbContainer.style.animation = 'orb-pulse 3s ease-in-out infinite';
-
-          }
-
-          // Clean Emma orb - no vault unlock needed on dashboard
-        } catch (error) {
-          console.error('🚨 Error initializing Emma Orb:', error);
-          // Ensure fallback is applied
-          const orbContainer = document.getElementById('webgl-orb-container');
-          if (orbContainer) {
-            orbContainer.style.background = 'radial-gradient(circle at 30% 30%, #8658ff, #4f46e5)';
-            orbContainer.style.borderRadius = '50%';
-            orbContainer.style.width = '100%';
-            orbContainer.style.height = '100%';
-          }
-        }
-      }
-
-      updateVaultNodeStatus() {
-        try {
-
-          const vaultNode = document.getElementById('vault-node');
-          if (!vaultNode) {
-            console.warn('⚠️ Vault node not found, skipping status update');
-            // Try alternative selectors
-            const altVaultNode = document.querySelector('[data-action="vault"], .radial-item[onclick*="vault"]');
-            if (altVaultNode) {
-
-              this.updateAlternativeVaultNode(altVaultNode);
-            }
-            return;
-          }
-
-          const vaultIcon = vaultNode.querySelector('.radial-item-icon');
-          if (!vaultIcon) {
-            console.warn('⚠️ Vault icon not found, trying alternative selector');
-            const altIcon = vaultNode.querySelector('span, .icon');
-            if (altIcon) {
-
-              this.updateVaultIcon(altIcon, vaultNode);
-              return;
-            }
-            return;
-          }
-
-          this.updateVaultIcon(vaultIcon, vaultNode);
-        } catch (error) {
-          console.warn('⚠️ Error updating vault node status:', error);
-        }
-      }
-
-      updateVaultIcon(vaultIcon, vaultNode) {
-        if (window.currentVaultStatus && window.currentVaultStatus.isUnlocked) {
-
-          vaultIcon.textContent = '🔓';
-          vaultNode.style.background = 'rgba(74, 222, 128, 0.1)'; // Green tint when unlocked
-          vaultNode.style.borderColor = 'rgba(74, 222, 128, 0.3)';
-          vaultNode.style.boxShadow = '0 0 20px rgba(74, 222, 128, 0.4)';
-        } else {
-
-          vaultIcon.textContent = '🔒';
-          vaultNode.style.background = 'var(--emma-glass)'; // Default when locked
-          vaultNode.style.borderColor = 'rgba(134, 88, 255, 0.3)';
-          vaultNode.style.boxShadow = '0 0 20px rgba(134, 88, 255, 0.2)';
-        }
-      }
-
-      updateAlternativeVaultNode(node) {
-        const icon = node.querySelector('span') || node;
-        if (window.currentVaultStatus && window.currentVaultStatus.isUnlocked) {
-          icon.textContent = '🔓';
-          node.style.background = 'rgba(74, 222, 128, 0.1)';
-        } else {
-          icon.textContent = '🔒';
-          node.style.background = 'var(--emma-glass)';
-        }
-      }
-
-      updateAllVaultIndicators() {
-
-        // Update any vault-related elements
-        const vaultElements = document.querySelectorAll('[data-action="vault"], .vault-indicator, #vault-node');
-        vaultElements.forEach(element => {
-          const icon = element.querySelector('span, .radial-item-icon') || element;
-          if (window.currentVaultStatus && window.currentVaultStatus.isUnlocked) {
-            if (icon.textContent) icon.textContent = '🔓';
-            element.style.background = 'rgba(74, 222, 128, 0.1)';
-            element.style.borderColor = 'rgba(74, 222, 128, 0.3)';
-            element.style.boxShadow = '0 0 20px rgba(74, 222, 128, 0.4)';
-          } else {
-            if (icon.textContent) icon.textContent = '🔒';
-            element.style.background = 'var(--emma-glass)';
-            element.style.borderColor = 'rgba(134, 88, 255, 0.3)';
-            element.style.boxShadow = '0 0 20px rgba(134, 88, 255, 0.2)';
-          }
-        });
-
-      }
-
-      // Check if a line intersects with Emma orb circle
-      lineIntersectsCircle(x1, y1, x2, y2, cx, cy, radius) {
-        // Vector from point1 to point2
-        const dx = x2 - x1;
-        const dy = y2 - y1;
-
-        // Vector from point1 to circle center
-        const fx = x1 - cx;
-        const fy = y1 - cy;
-
-        // Quadratic equation coefficients
-        const a = dx * dx + dy * dy;
-        const b = 2 * (fx * dx + fy * dy);
-        const c = (fx * fx + fy * fy) - radius * radius;
-
-        const discriminant = b * b - 4 * a * c;
-
-        // No intersection if discriminant is negative
-        if (discriminant < 0) return false;
-
-        // Check if intersection points are within the line segment
-        const sqrt_discriminant = Math.sqrt(discriminant);
-        const t1 = (-b - sqrt_discriminant) / (2 * a);
-        const t2 = (-b + sqrt_discriminant) / (2 * a);
-
-        // If either intersection point is within [0,1], line intersects circle
-        return (t1 >= 0 && t1 <= 1) || (t2 >= 0 && t2 <= 1) || (t1 < 0 && t2 > 1);
-      }
-
-      animateNeuralNetwork() {
-        // Resize canvas
-        this.neuralCanvas.width = window.innerWidth;
-        this.neuralCanvas.height = window.innerHeight;
-
-        const animate = () => {
-          if (!this.isMenuOpen && !this.isConstellationMode) return;
-
-          // Clear canvas
-          this.neuralCtx.clearRect(0, 0, this.neuralCanvas.width, this.neuralCanvas.height);
-
-          // Draw subtle grid background when menu is open or in constellation mode
-          if (this.isMenuOpen || this.isConstellationMode) {
-            this.neuralCtx.strokeStyle = 'rgba(134, 88, 255, 0.03)';
-            this.neuralCtx.lineWidth = 1;
-            const gridSize = 50;
-
-            // Draw vertical lines
-            for (let x = 0; x < this.neuralCanvas.width; x += gridSize) {
-              this.neuralCtx.beginPath();
-              this.neuralCtx.moveTo(x, 0);
-              this.neuralCtx.lineTo(x, this.neuralCanvas.height);
-              this.neuralCtx.stroke();
-            }
-
-            // Draw horizontal lines
-            for (let y = 0; y < this.neuralCanvas.height; y += gridSize) {
-              this.neuralCtx.beginPath();
-              this.neuralCtx.moveTo(0, y);
-              this.neuralCtx.lineTo(this.neuralCanvas.width, y);
-              this.neuralCtx.stroke();
-            }
-          }
-
-          // Update node positions with organic movement (only for visible nodes)
-          const time = Date.now() * 0.001;
-          this.nodes.forEach((node, i) => {
-            // CRITICAL FIX: Only animate visible nodes
-            const nodeElement = node.element || document.getElementById(node.id);
-            if (!nodeElement || nodeElement.style.display === 'none') {
-              return; // Skip animation for hidden nodes
-            }
-            // Gentle organic floating movement (petri dish feel)
-            const floatX = Math.sin(time * 0.3 + i) * 12;
-            const floatY = Math.cos(time * 0.2 + i * 0.5) * 8;
-
-            // Gentle elastic force back to base position (petri dish feel)
-            const dx = (node.baseX + floatX) - node.x;
-            const dy = (node.baseY + floatY) - node.y;
-
-            node.vx += dx * 0.005; // Much gentler elastic force
-            node.vy += dy * 0.005;
-
-            // Apply more damping for organic feel
-            node.vx *= 0.98;
-            node.vy *= 0.98;
-
-            // Add repulsion from Emma orb (prevent overlap)
-            if (this.centralNode && this.isConstellationMode) {
-              const orbDx = node.x - this.centralNode.x;
-              const orbDy = node.y - this.centralNode.y;
-              const orbDist = Math.sqrt(orbDx * orbDx + orbDy * orbDy);
-
-              // Repulsion zone around Emma orb
-              const repulsionRadius = 150;
-              if (orbDist < repulsionRadius && orbDist > 0) {
-                const repulsionForce = (repulsionRadius - orbDist) / repulsionRadius;
-                const forceStrength = repulsionForce * 0.3; // Gentle but firm repulsion
-
-                const normalizedDx = orbDx / orbDist;
-                const normalizedDy = orbDy / orbDist;
-
-                node.vx += normalizedDx * forceStrength;
-                node.vy += normalizedDy * forceStrength;
-              }
-            }
-
-            // Add gentle repulsion between memory nodes (prevent overlap)
-            if (this.isConstellationMode) {
-              this.nodes.forEach((otherNode, j) => {
-                if (i !== j) {
-                  // CRITICAL FIX: Only calculate repulsion with visible nodes
-                  const otherElement = otherNode.element || document.getElementById(otherNode.id);
-                  if (!otherElement || otherElement.style.display === 'none') {
-                    return; // Skip repulsion with hidden nodes
-                  }
-                  const nodeDx = node.x - otherNode.x;
-                  const nodeDy = node.y - otherNode.y;
-                  const nodeDist = Math.sqrt(nodeDx * nodeDx + nodeDy * nodeDy);
-
-                  // Minimum distance between nodes
-                  const minNodeDistance = 110;
-                  if (nodeDist < minNodeDistance && nodeDist > 0) {
-                    const repulsionForce = (minNodeDistance - nodeDist) / minNodeDistance;
-                    const forceStrength = repulsionForce * 0.1; // Very gentle node repulsion
-
-                    const normalizedDx = nodeDx / nodeDist;
-                    const normalizedDy = nodeDy / nodeDist;
-
-                    node.vx += normalizedDx * forceStrength;
-                    node.vy += normalizedDy * forceStrength;
-                  }
-                }
-              });
-            }
-
-            // Update position
-            node.x += node.vx;
-            node.y += node.vy;
-
-            // Update DOM element position
-            node.element.style.left = node.x - 45 + 'px';
-            node.element.style.top = node.y - 45 + 'px';
-          });
-
-          // Draw connections with gradients (only between visible nodes)
-          this.nodes.forEach(node => {
-            // CRITICAL FIX: Check if source node is visible before drawing connections
-            const sourceElement = node.element || document.getElementById(node.id);
-            if (!sourceElement || sourceElement.style.display === 'none') {
-              return; // Skip connections from hidden nodes
-            }
-
-            node.connections.forEach(target => {
-              // CRITICAL FIX: Check if target node is visible before drawing connection
-              const targetElement = target.element || document.getElementById(target.id);
-              if (!targetElement || targetElement.style.display === 'none') {
-                return; // Skip connections to hidden nodes
-              }
-
-              // Check if line would pass through Emma orb area - if so, skip drawing
-              const centerX = window.innerWidth / 2;
-              const centerY = window.innerHeight / 2;
-              const orbRadius = 110; // Clean boundary around orb
-
-              if (this.lineIntersectsCircle(node.x, node.y, target.x, target.y, centerX, centerY, orbRadius)) {
-                return; // Skip drawing this connection - it would cross the orb
-              }
-
-              // Calculate distance for opacity
-              const dist = Math.sqrt(
-                Math.pow(node.x - target.x, 2) +
-                Math.pow(node.y - target.y, 2)
-              );
-
-              // Different opacity for main menu vs memory constellation
-              const isMemoryMode = this.isConstellationMode && !this.isMenuOpen;
-              const gradient = this.neuralCtx.createLinearGradient(
-                node.x, node.y, target.x, target.y
-              );
-
-              if (isMemoryMode) {
-                // Visible connections for memory constellation
-                gradient.addColorStop(0, 'rgba(134, 88, 255, 0.2)');
-                gradient.addColorStop(0.5, 'rgba(240, 147, 251, 0.15)');
-                gradient.addColorStop(1, 'rgba(134, 88, 255, 0.2)');
-                this.neuralCtx.lineWidth = 1.2 + Math.sin(time + dist * 0.01) * 0.2;
-              } else {
-                // Subtle connections for main menu (original loved style)
-                gradient.addColorStop(0, 'rgba(134, 88, 255, 0.03)');
-                gradient.addColorStop(0.5, 'rgba(240, 147, 251, 0.02)');
-                gradient.addColorStop(1, 'rgba(134, 88, 255, 0.03)');
-                this.neuralCtx.lineWidth = 0.5 + Math.sin(time + dist * 0.01) * 0.1;
-              }
-
-              this.neuralCtx.strokeStyle = gradient;
-
-              this.neuralCtx.beginPath();
-              this.neuralCtx.moveTo(node.x, node.y);
-
-              // Gentle organic curved connections
-              const midX = (node.x + target.x) / 2;
-              const midY = (node.y + target.y) / 2;
-              const curve1 = Math.sin(time * 0.4 + node.x * 0.005) * 15;
-              const curve2 = Math.cos(time * 0.3 + node.y * 0.005) * 10;
-
-              this.neuralCtx.bezierCurveTo(
-                node.x + curve1,
-                node.y + curve2,
-                target.x - curve2,
-                target.y - curve1,
-                target.x,
-                target.y
-              );
-
-              this.neuralCtx.stroke();
-            });
-          });
-
-          // Remove energy pulses - too aggressive
-
-          this.neuralAnimationId = requestAnimationFrame(animate);
-        };
-
-        animate();
-      }
-
-      async handleRadialAction(action) {
-
-        switch(action) {
-          case 'capture':
-            this.startVoiceCapture();
-            break;
-          case 'memories':
-            await this.enterMemoryConstellation();
-            break;
-          case 'people':
-            window.location.href = 'pages/people-emma.html';
-            break;
-          case 'chat':
-            this.startEmmaChatExperience();
-            break;
-        }
-
-        // Close menu after action
-        if (this.isMenuOpen) {
-          this.toggleRadialMenu();
-        }
-      }
-
-      async startVoiceCapture() {
-
-        // Calculate elegant position relative to Emma orb
-        const orbRect = this.orb.getBoundingClientRect();
-        const viewportWidth = window.innerWidth;
-        const viewportHeight = window.innerHeight;
-
-        // Position the panel optimally
-        let left = orbRect.right + 24;
-        let top = Math.max(40, orbRect.top - 80);
-
-        // Ensure it fits in viewport
-        const panelWidth = 480;
-        const panelHeight = 700;
-
-        if (left + panelWidth > viewportWidth - 40) {
-          left = orbRect.left - panelWidth - 24;
-        }
-
-        if (top + panelHeight > viewportHeight - 40) {
-          top = viewportHeight - panelHeight - 40;
-        }
-
-        const position = {
-          left: Math.max(40, left),
-          top: Math.max(40, top),
-          width: panelWidth,
-          height: panelHeight
-        };
-
-        // Create and show voice capture experience
-        this.voiceCaptureExperience = new VoiceCaptureExperience(position, {
-          voiceEnabled: true,
-          autoStart: false // Let user initiate
-        });
-
-        try {
-          await this.voiceCaptureExperience.show();
-
-        } catch (error) {
-          console.error('🎤 Failed to open voice capture:', error);
-          this.showToast('Failed to open Voice Memory Studio. Please try again.', 'error');
-        }
-      }
-
-      async startEmmaChatExperience() {
-
-        // Center chat in the middle of the page
-        const viewportWidth = window.innerWidth;
-        const viewportHeight = window.innerHeight;
-
-        // Chat panel dimensions
-        const panelWidth = 600; // Wider for comfortable chat
-        const panelHeight = 700;
-
-        // Center position in the middle of the page
-        const position = {
-          left: (viewportWidth - panelWidth) / 2,
-          top: (viewportHeight - panelHeight) / 2,
-          width: panelWidth,
-          height: panelHeight
-        };
-
-        // Create and show Emma chat experience
-        this.emmaChatExperience = new EmmaChatExperience(position, {
-          contextAware: true,
-          memoryIntegration: true
-        });
-
-        try {
-          await this.emmaChatExperience.show();
-
-        } catch (error) {
-          console.error('💬 Failed to open Emma Chat:', error);
-          this.showToast('Failed to open Chat with Emma. Please try again.', 'error');
-        }
-      }
-
-      openVaultModal() {
-        // Check if extension is available first
-        if (window.emmaWebVault && window.emmaWebVault.extensionAvailable) {
-          // Extension is managing vault - dashboard should work automatically
-
-          return; // Don't show vault modal, extension handles everything
-        }
-
-        const modal = document.getElementById('vault-modal');
-        const statusIcon = document.getElementById('status-icon');
-        const statusTitle = document.getElementById('status-title');
-        const statusDescription = document.getElementById('status-description');
-        const actionBtn = document.getElementById('vault-action-btn');
-        const statusCard = document.getElementById('vault-status-card');
-        const unlockSection = document.getElementById('unlock-section');
-        const createVaultSection = document.getElementById('create-vault-section');
-
-        // Check if .emma vault is active (only if extension not available)
-        const vaultActive = sessionStorage.getItem('emmaVaultActive') === 'true';
-        const vaultName = sessionStorage.getItem('emmaVaultName') || 'Unknown Vault';
-        const extensionVaultActive = false; // Extension not available in this branch
-
-        if (extensionVaultActive) {
-          // Extension is managing vault - show connected status
-          statusIcon.textContent = '🔗';
-          statusTitle.textContent = 'Extension Connected';
-          statusDescription.textContent = 'Vault managed by Emma Extension - changes auto-save to local file';
-          actionBtn.textContent = '🔒 Manage via Extension';
-          actionBtn.onclick = () => alert('Click the Emma extension icon 🔒 in your browser toolbar to manage your vault!');
-          actionBtn.style.display = 'block';
-          unlockSection.style.display = 'none';
-          createVaultSection.style.display = 'none';
-          statusCard.classList.add('unlocked'); // Show as unlocked/connected
-        } else if (window.currentVaultStatus && window.currentVaultStatus.isUnlocked) {
-          statusIcon.textContent = '🔓';
-          statusTitle.textContent = `${vaultName} - Unlocked`;
-          statusDescription.textContent = `Your .emma vault file is open and your memories are accessible`;
-          actionBtn.textContent = '🔒 Lock Vault';
-          actionBtn.onclick = () => this.lockVault();
-          actionBtn.style.display = 'block';
-          statusCard.classList.add('unlocked');
-          unlockSection.style.display = 'none';
-          createVaultSection.style.display = 'none';
-        } else {
-          statusIcon.textContent = '🔒';
-          statusTitle.textContent = 'Vault Locked';
-          statusDescription.textContent = 'Enter your vault code to access your memories';
-          actionBtn.textContent = 'Unlock Vault';
-          actionBtn.onclick = () => this.showUnlockForm();
-          actionBtn.style.display = 'block';
-          statusCard.classList.remove('unlocked');
-          unlockSection.style.display = 'none';
-          createVaultSection.style.display = 'none';
-        }
-
-        modal.style.display = 'flex';
-        setTimeout(() => {
-          modal.classList.add('show');
-        }, 10);
-
-        // Store reference for global access
-        window.openVaultModal = () => this.openVaultModal();
-      }
-
-      closeVaultModal() {
-        const modal = document.getElementById('vault-modal');
-        modal.classList.remove('show');
-        setTimeout(() => {
-          modal.style.display = 'none';
-        }, 300);
-      }
-
-      showUnlockForm() {
-        // Use beautiful universal vault modal instead of inline form
-        universalVaultModal.show({
-          title: "Unlock Vault",
-          message: "Enter your vault passphrase to access your secure memories",
-          onSuccess: (result) => {
-
-            // Update vault status using unified manager
-            const vaultName = sessionStorage.getItem('emmaVaultName') || 'Web Vault';
-            window.webVaultStatus.unlock(vaultName);
-
-            // Refresh dashboard data and UI
-            this.loadDashboardData();
-
-            // IMMEDIATE vault icon update
-            const vaultIcon = document.querySelector('#vault-node .radial-item-icon');
-            if (vaultIcon) {
-              vaultIcon.textContent = '🔓';
-
-            }
-
-            // Update vault node with delay to ensure DOM is ready
-            setTimeout(() => {
-              this.updateVaultNodeStatus();
-
-              // Also try to update any other vault indicators
-              this.updateAllVaultIndicators();
-
-              // Force another immediate update
-              const vaultIconAgain = document.querySelector('#vault-node .radial-item-icon');
-              if (vaultIconAgain) {
-                vaultIconAgain.textContent = '🔓';
-
-              }
-            }, 100);
-
-            // Don't reopen modal - let it close naturally
-            // The next time user opens it, it will show correct status
-
-            this.showToast('✅ Vault unlocked successfully!', 'success');
-
-          },
-          onCancel: () => {
-
-          }
-        });
-      }
-
-      hideUnlockForm() {
-        const unlockSection = document.getElementById('unlock-section');
-        const passwordInput = document.getElementById('vault-password');
-        unlockSection.style.display = 'none';
-        passwordInput.value = '';
-      }
-
-      async unlockVault() {
-        const passwordInput = document.getElementById('vault-password');
-        const unlockBtn = document.getElementById('unlock-btn');
-        const password = passwordInput.value.trim();
-
-        if (!password) {
-          passwordInput.focus();
-          return;
-        }
-
-        try {
-          unlockBtn.disabled = true;
-          unlockBtn.textContent = '🔓 Unlocking...';
-
-          if (window.emmaAPI && window.emmaAPI.vault) {
-            const result = await window.emmaAPI.vault.unlock({ passphrase: password });
-
-            if (result && result.success) {
-              // Success - update status and close form
-              window.currentVaultStatus = { isUnlocked: true };
-              await this.loadDashboardData();
-              this.updateVaultNodeStatus(); // Update the floating vault node
-              this.hideUnlockForm();
-              this.openVaultModal(); // Refresh modal with new status
-              this.showToast('✅ Vault unlocked successfully!', 'success');
-            } else {
-              throw new Error(result?.error || 'Unlock failed');
-            }
-          } else {
-            // No API available
-            throw new Error('Vault API not available');
-          }
-        } catch (error) {
-          console.error('🏠 Dashboard: Unlock error:', error);
-          this.showToast('❌ Failed to unlock vault: ' + error.message, 'error');
-        } finally {
-          unlockBtn.disabled = false;
-          unlockBtn.textContent = '🔓 Unlock';
-        }
-      }
-
-      async lockVault() {
-        try {
-          if (window.emmaAPI && window.emmaAPI.vault) {
-            const result = await window.emmaAPI.vault.lock();
-
-            if (result && result.success) {
-              window.currentVaultStatus = { isUnlocked: false };
-              await this.loadDashboardData();
-              this.updateVaultNodeStatus(); // Update the floating vault node
-              this.openVaultModal(); // Refresh modal with new status
-              this.showToast('🔒 Vault locked successfully!', 'success');
-            } else {
-              throw new Error(result?.error || 'Lock failed');
-            }
-          } else {
-            // Demo mode
-            console.warn('🏠 Dashboard: No Emma API - demo lock');
-            window.currentVaultStatus = { isUnlocked: false };
-            await this.loadDashboardData();
-            this.updateVaultNodeStatus(); // Update the floating vault node
-            this.openVaultModal();
-            this.showToast('🎭 Demo vault locked!', 'info');
-          }
-        } catch (error) {
-          console.error('🏠 Dashboard: Lock error:', error);
-          this.showToast('❌ Failed to lock vault: ' + error.message, 'error');
-        }
-      }
-
-      // Clean dashboard - vault unlock handled by index.html
-
-      async showQRShare() {
-
-        // Check if classes are available
-        if (typeof EmmaShareExperience === 'undefined') {
-          console.error('🔗 EmmaShareExperience class not found');
-          this.showToast('Share feature unavailable. Please refresh the page.', 'error');
-          return;
-        }
-
-        if (typeof QRService === 'undefined') {
-          console.warn('🔗 QRService class not found - will use fallback');
-        }
-
-        // Calculate elegant position relative to Emma orb
-        const orbRect = this.orb.getBoundingClientRect();
-        const viewportWidth = window.innerWidth;
-        const viewportHeight = window.innerHeight;        // Position the share panel optimally
-        let left = orbRect.right + 24;
-        let top = Math.max(40, orbRect.top - 120);
-
-        // Share panel dimensions
-        const panelWidth = 650; // Wider for share content
-        const panelHeight = 720;
-
-        // Ensure it fits in viewport
-        if (left + panelWidth > viewportWidth - 40) {
-          left = orbRect.left - panelWidth - 24;
-        }
-
-        if (top + panelHeight > viewportHeight - 40) {
-          top = viewportHeight - panelHeight - 40;
-        }
-
-        const position = {
-          left: Math.max(40, left),
-          top: Math.max(40, top),
-          width: panelWidth,
-          height: panelHeight
-        };
-
-        try {
-          // Create and show Emma share experience
-          this.emmaShareExperience = new EmmaShareExperience(position, {
-            contextAware: true,
-            vaultIntegration: true
-          });
-
-          // Set global reference for share actions
-          window.shareExperience = this.emmaShareExperience;
-
-          await this.emmaShareExperience.show();
-
-        } catch (error) {
-          console.error('🔗 Failed to open Emma Share:', error);
-          this.showToast('Failed to open Share interface: ' + error.message, 'error');
-        }
-      }
-
-      async loadDashboardData() {
-        try {
-          // Use WebVaultStatus instead of old Electron API
-
-          // Don't override vault status - WebVaultStatus manages it
-          // window.currentVaultStatus is set by WebVaultStatus manager
-
-          // Keep central orb neutral - Emma branding only (text removed)
-
-          // Load stats from web vault
-          try {
-            if (window.emmaWebVault && window.webVaultStatus && window.webVaultStatus.isUnlocked()) {
-              const stats = window.emmaWebVault.getStats();
-              this.updateStats({
-                memories: stats.memoryCount || 0,
-                people: stats.peopleCount || 0,
-                today: 0 // TODO: Calculate today's memories
-              });
-            } else {
-              this.updateStats({ memories: 0, people: 0, today: 0 });
-            }
-          } catch (e) {
-            console.warn('⚠️ Web vault stats unavailable:', e.message);
-            this.updateStats({ memories: 0, people: 0, today: 0 });
-          }
-        } catch (error) {
-          console.error('🚨 Dashboard data load error:', error);
-          // Fallback to demo data - but DON'T override vault status!
-          // WebVaultStatus manager handles vault status, not this function
-          this.updateStats({ memories: 0, people: 0, today: 0 });
-        }
-      }
-
-      updateStats(newStats) {
-        Object.assign(this.stats, newStats);
-
-        // Animate number changes
-        Object.keys(newStats).forEach(key => {
-          const element = document.getElementById(`stat-${key}`);
-          if (element) {
-            const start = parseInt(element.textContent) || 0;
-            const end = this.stats[key];
-            const duration = 1000;
-            const startTime = Date.now();
-
-            const animate = () => {
-              const elapsed = Date.now() - startTime;
-              const progress = Math.min(elapsed / duration, 1);
-              const current = Math.floor(start + (end - start) * progress);
-              element.textContent = current;
-
-              if (progress < 1) {
-                requestAnimationFrame(animate);
-              }
-            };
-            animate();
-          }
-        });
-      }
-
-      showContextualPanels() {
-        // Panels are now hidden by default and shown via burger menu
-        // No longer auto-showing panels to reduce visual distraction
-
-      }
-
-      // Burger menu removed for clean interface
-
-      setupUtilityIcons() {
-        if (!this.utilityIcons) {
-          console.warn('🔧 Utility icons not found');
-          return;
-        }
-
-        // Add click handlers to utility items
-        this.utilityIcons.querySelectorAll('.utility-item').forEach(item => {
-          item.addEventListener('click', (e) => {
-            e.stopPropagation();
-            const action = item.dataset.action;
-            this.handleUtilityAction(action);
-          });
-        });
-
-      }
-
-      handleUtilityAction(action) {
-
-        switch(action) {
-          case 'settings':
-            window.location.href = 'pages/emma-settings-redesigned.html';
-            break;
-          default:
-
-        }
-      }
-
-      togglePanels() {
-        this.panelsVisible = !this.panelsVisible;
-
-        // Toggle body class for CSS animations
-        if (this.panelsVisible) {
-          document.body.classList.add('panels-visible');
-          this.burgerMenuBtn.classList.add('active');
-
-          // Also add active class to each panel for visibility
-          if (this.panels.dailyBrief) this.panels.dailyBrief.classList.add('active');
-          if (this.panels.aiInsights) this.panels.aiInsights.classList.add('active');
-          if (this.panels.quickActions) this.panels.quickActions.classList.add('active');
-        } else {
-          document.body.classList.remove('panels-visible');
-          this.burgerMenuBtn.classList.remove('active');
-
-          // Remove active class from panels
-          if (this.panels.dailyBrief) this.panels.dailyBrief.classList.remove('active');
-          if (this.panels.aiInsights) this.panels.aiInsights.classList.remove('active');
-          if (this.panels.quickActions) this.panels.quickActions.classList.remove('active');
-        }
-
-      }
-
-      startAnimations() {
-        // Subtle pulse animation for WebGL orb
-        setInterval(() => {
-          if (window.currentVaultStatus && !window.currentVaultStatus.isUnlocked) {
-            const orbContainer = this.orb.querySelector('.emma-orb-webgl');
-            if (orbContainer) {
-              orbContainer.style.animation = 'orb-pulse 2s ease-in-out';
-            }
-          }
-        }, 5000);
-      }      // Enter memory constellation mode
-      async enterMemoryConstellation() {
-
-        // CRITICAL: Clear any existing memory nodes first (prevents duplicates)
-        this.clearAllMemoryNodesFromDOM();
-
-        this.isConstellationMode = true;
-
-        // PERSISTENCE: Save constellation state for page refresh
-        localStorage.setItem('emmaConstellationActive', 'true');
-
-        // Add constellation-active class to hide all UI
-        document.body.classList.add('constellation-active');
-
-        // Shrink central orb
-        this.shrinkCentralOrb();
-
-        // Load memory data
-        await this.loadMemoriesForConstellation();
-
-        // Fade out current nodes
-        await this.fadeOutMenuNodes();
-
-        // Create memory constellation (await for real memories)
-        await this.createMemoryConstellation();
-
-        // Show constellation UI
-        this.showConstellationUI();
-      }
-
-      // Shrink central Emma orb when memories are visible
-      shrinkCentralOrb() {
-        const orbContainer = this.orb.querySelector('.emma-orb-webgl');
-        if (orbContainer) {
-          orbContainer.style.transition = 'transform 0.8s cubic-bezier(0.4, 0, 0.2, 1)';
-          orbContainer.style.transform = 'scale(0.7)';
-        }
-
-        // Also shrink the entire orb container
-        this.orb.style.transition = 'transform 0.8s cubic-bezier(0.4, 0, 0.2, 1)';
-        this.orb.style.transform = 'scale(0.7)';
-
-        // Add hover effects for memory mode
-        this.addOrbHoverEffects();
-      }
-
-      // Add hover effects to orb in memory mode
-      addOrbHoverEffects() {
-        if (this.orbHoverAdded) return;
-        this.orbHoverAdded = true;
-
-        const orbContainer = this.orb.querySelector('.emma-orb-webgl');
-
-        this.orb.addEventListener('mouseenter', () => {
-          if (this.isConstellationMode) {
-            this.orb.style.transform = 'scale(0.9)';
-            if (orbContainer) {
-              orbContainer.style.transform = 'scale(0.9)';
-            }
-          }
-        });
-
-        this.orb.addEventListener('mouseleave', () => {
-          if (this.isConstellationMode) {
-            this.orb.style.transform = 'scale(0.7)';
-            if (orbContainer) {
-              orbContainer.style.transform = 'scale(0.7)';
-            }
-          }
-        });
-      }
-
-      // Restore central Emma orb size
-      restoreCentralOrb() {
-        const orbContainer = this.orb.querySelector('.emma-orb-webgl');
-        if (orbContainer) {
-          orbContainer.style.transform = 'scale(1)';
-        }
-        this.orb.style.transform = 'scale(1)';
-      }
-
-      // Load memories for constellation
-      async loadMemoriesForConstellation() {
-        try {
-          // Get memories from API
-          let memories = await this.getMemories();
-
-          if (memories.length > 0) {
-
-            console.log('💝 CONSTELLATION DEBUG: Memory titles:', memories.map(m => m.title));
-          }
-
-          // Add debugging info about available APIs
-
-          this.constellationMemories = this.organizeMemoriesByTheme(memories);
-
-          // Count total memories
-          const totalMemories = Object.values(this.constellationMemories).reduce((sum, theme) => sum + theme.length, 0);
-
-          // If no memories, suggest user create some
-          if (totalMemories === 0) {
-
-          }
-
-        } catch (error) {
-
-          this.constellationMemories = {family: [], travel: [], recent: [], special: []};
-        }
-      }
-
-      // Get memories from vault (same API as gallery)
-      async getMemories() {
-        try {
-
-          // Use web app vault data directly (pure web app mode)
-          if (window.emmaWebVault && window.emmaWebVault.isOpen && window.emmaWebVault.vaultData) {
-
-            const vaultMemories = window.emmaWebVault.vaultData.content?.memories || {};
-            const vaultMedia = window.emmaWebVault.vaultData.content?.media || {};
-
-            // Convert vault memories to array format with LIGHTWEIGHT LOADING for constellation
-            const memories = Object.values(vaultMemories).map(memory => {
-              // 🚀 PERFORMANCE FIX: Only create lightweight attachment previews for constellation
-              // Full media will be loaded on-demand when memory is clicked
-              const attachmentPreviews = (memory.attachments || []).map(attachment => {
-                const mediaItem = vaultMedia[attachment.id];
-                return {
-                  id: attachment.id,
-                  type: attachment.type,
-                  name: attachment.name,
-                  size: attachment.size,
-                  // 💡 LAZY LOADING: Store media ID for on-demand loading, don't load data URL yet
-                  mediaId: attachment.id,
-                  hasMedia: !!(mediaItem && mediaItem.data),
-                  isLazyLoaded: true, // Flag to indicate this needs full loading on click
-                  // Only create preview thumbnail for first image attachment
-                  previewUrl: null // Will be set below for first image only
-                };
-              });
-
-              // 🎯 OPTIMIZATION: Only load preview for FIRST image attachment (for constellation thumbnail)
-              if (attachmentPreviews.length > 0) {
-                const firstImageAttachment = attachmentPreviews.find(att => 
-                  att.hasMedia && (att.type?.startsWith('image/') || !att.type?.startsWith('video/'))
-                );
-                
-                if (firstImageAttachment) {
-                  const mediaItem = vaultMedia[firstImageAttachment.id];
-                  if (mediaItem && mediaItem.data) {
-                    // Only load the first image for constellation thumbnail
-                    firstImageAttachment.previewUrl = mediaItem.data.startsWith('data:')
-                      ? mediaItem.data
-                      : `data:${mediaItem.type};base64,${mediaItem.data}`;
-                  }
-                }
-              }
-
-              return {
-                ...memory,
-                attachments: attachmentPreviews, // Lightweight previews only
-                attachmentCount: attachmentPreviews.length,
-                hasMedia: attachmentPreviews.some(att => att.hasMedia),
-                isVaultMemory: true
-              };
-            });
-
-            // FIXED: Add thumbnail from first attachment for constellation display
-            const memoriesWithThumbnails = memories.map(memory => {
-              const attachments = memory.attachments || [];
-              let thumbnail = memory.thumbnail;
-
-              // 🎯 PERFORMANCE: Use previewUrl from first image attachment for thumbnail
-              if (!thumbnail && attachments.length > 0) {
-                const firstImageWithPreview = attachments.find(att => att.previewUrl);
-                if (firstImageWithPreview) {
-                  thumbnail = firstImageWithPreview.previewUrl;
-                }
-              }
-
-              return {
-                ...memory,
-                thumbnail
-              };
-            });
-
-            return memoriesWithThumbnails;
-          } else {
-
-            return [];
-          }
-        } catch (error) {
-          console.error('💝 CONSTELLATION: Error loading memories from vault:', error);
-          return [];
-        }
-      }
-
-      // Helper to detect category from memory content
-      detectCategoryFromContent(memory) {
-        const content = ((memory.title || '') + ' ' + (memory.content || '')).toLowerCase();
-        if (content.includes('family') || content.includes('mom') || content.includes('dad')) return 'family';
-        if (content.includes('travel') || content.includes('trip') || content.includes('vacation')) return 'travel';
-        if (memory.timestamp && new Date() - new Date(memory.timestamp) < 30 * 24 * 60 * 60 * 1000) return 'recent';
-        return 'special';
-      }
-
-      // Generate organic neural network positions (NOT circular)
-      generateNeuralNetworkPositions(nodeCount, centerX, centerY, width, height, minDistance) {
-        const positions = [];
-        const maxAttempts = 100;
-
-        // First position: Create Memory node in top-center area
-        positions.push({
-          x: centerX + (Math.random() - 0.5) * 100,
-          y: centerY - height * 0.25 + (Math.random() - 0.5) * 80
-        });
-
-        // Generate remaining positions with organic scatter
-        for (let i = 1; i < nodeCount; i++) {
-          let placed = false;
-          let attempts = 0;
-
-          while (!placed && attempts < maxAttempts) {
-            // Use clustered random distribution (not uniform)
-            const clusterX = centerX + (Math.random() - 0.5) * width;
-            const clusterY = centerY + (Math.random() - 0.5) * height;
-
-            // Add some organic bias toward clusters
-            const biasStrength = Math.random() * 0.3;
-            const biasAngle = Math.random() * Math.PI * 2;
-            const x = clusterX + Math.cos(biasAngle) * biasStrength * 150;
-            const y = clusterY + Math.sin(biasAngle) * biasStrength * 150;
-
-            // Check minimum distance from all existing nodes AND center orb
-            let validPosition = true;
-
-            // Check distance from center Emma orb (exclusion zone)
-            const distFromCenter = Math.sqrt((x - centerX) ** 2 + (y - centerY) ** 2);
-            if (distFromCenter < 150) { // 150px exclusion zone around Emma orb
-              validPosition = false;
-            }
-
-            // Check distance from other nodes
-            if (validPosition) {
-              for (const pos of positions) {
-                const dist = Math.sqrt((x - pos.x) ** 2 + (y - pos.y) ** 2);
-                if (dist < minDistance) {
-                  validPosition = false;
-                  break;
-                }
-              }
-            }
-
-            // Keep nodes within bounds
-            if (validPosition &&
-                x > centerX - width/2 + 50 && x < centerX + width/2 - 50 &&
-                y > centerY - height/2 + 50 && y < centerY + height/2 - 50) {
-              positions.push({ x, y });
-              placed = true;
-            }
-
-            attempts++;
-          }
-
-          // Fallback if can't place after max attempts
-          if (!placed) {
-            const angle = (i / nodeCount) * Math.PI * 2;
-            const fallbackRadius = 200 + Math.random() * 100;
-            positions.push({
-              x: centerX + Math.cos(angle) * fallbackRadius,
-              y: centerY + Math.sin(angle) * fallbackRadius
-            });
-          }
-        }
-
-        return positions;
-      }      // Generate memory thumbnail based on theme
-      generateMemoryThumbnail(theme) {
-        const themeEmojis = {
-          family: ['👨‍👩‍👧‍👦', '🏠', '❤️', '🍽️', '🎂'],
-          travel: ['✈️', '🗺️', '📸', '🏖️', '🏔️'],
-          recent: ['📱', '☕', '🌅', '🎵', '📚'],
-          special: ['🎉', '💝', '🌟', '🎈', '🎊']
-        };
-        const emojis = themeEmojis[theme] || ['💫'];
-        return emojis[Math.floor(Math.random() * emojis.length)];
-      }
-
-      // Organize memories by theme for constellations
-      organizeMemoriesByTheme(memories) {
-        const organized = {
-          family: [],
-          travel: [],
-          recent: [],
-          special: []
-        };
-
-        memories.forEach(memory => {
-          const theme = memory.theme || this.detectMemoryTheme(memory);
-          if (organized[theme]) {
-            organized[theme].push(memory);
-          } else {
-            organized.special.push(memory);
-          }
-        });
-
-        return organized;
-      }
-
-      // Detect memory theme from content
-      detectMemoryTheme(memory) {
-        // Use category first, then fallback to content analysis
-        if (memory.category) {
-          return memory.category;
-        }
-
-        const content = (memory.title + ' ' + (memory.content || memory.description || '')).toLowerCase();
-        if (content.includes('family') || content.includes('mom') || content.includes('dad')) return 'family';
-        if (content.includes('travel') || content.includes('trip') || content.includes('vacation')) return 'travel';
-        if (memory.date && new Date() - new Date(memory.date) < 30 * 24 * 60 * 60 * 1000) return 'recent';
-        return 'special';
-      }
-
-      // Fade out menu nodes
-      async fadeOutMenuNodes() {
-        return new Promise(resolve => {
-          this.radialMenu.querySelectorAll('.radial-item').forEach((item, i) => {
-            setTimeout(() => {
-              item.style.transition = 'all 0.5s ease';
-              item.style.opacity = '0';
-              item.style.transform = 'scale(0)';
-            }, i * 50);
-          });
-
-          setTimeout(resolve, 500);
-        });
-      }
-
-      // Create memory constellation using EXACT working neural network system
-      async createMemoryConstellation() {
-
-        // CRITICAL: Remove any existing memory nodes from DOM first
-        this.clearAllMemoryNodesFromDOM();
-
-        // Clear existing nodes array
-        this.nodes = [];
-
-        // Don't reload memories - use already loaded ones from enterMemoryConstellation()
-
-        // Get memories for constellation
-        const allMemories = [];
-        Object.keys(this.constellationMemories).forEach(theme => {
-          this.constellationMemories[theme].forEach(memory => {
-            allMemories.push({ ...memory, theme });
-          });
-        });
-
-        // Load people from vault for constellation
-        const allPeople = await this.loadPeopleForConstellation();
-        this.constellationPeople = allPeople; // Store for filtering
-
-        if (allMemories.length === 0 && allPeople.length === 0) {
-          console.warn('💝 No memories or people found in vault - constellation will show only the Create Memory node');
-        }
-
-        // Create memory and people nodes using EXACT same pattern as main menu
-        this.initMemoryNeuralNetwork(allMemories, allPeople);
-
-        // Set up for constellation mode without triggering menu
-        this.isMenuOpen = false; // CRITICAL: Constellation mode starts with menu closed
-        this.radialMenu.classList.remove('active'); // Ensure menu is hidden
-        document.body.classList.remove('menu-active');
-
-        // Start the neural animation (EXACT same as main menu)
-        this.animateNeuralNetwork();
-
-      }
-
-      // Load people from vault for constellation
-      async loadPeopleForConstellation() {
-        try {
-
-          if (window.emmaAPI && window.emmaAPI.people && window.emmaAPI.people.list) {
-            const result = await window.emmaAPI.people.list();
-
-            if (result && result.success && Array.isArray(result.items)) {
-
-              return result.items;
-            }
-          }
-
-          return [];
-
-        } catch (error) {
-          console.error('👥 CONSTELLATION: Error loading people:', error);
-          return [];
-        }
-      }
-
-      // Initialize memory neural network using EXACT same pattern as working main menu
-      initMemoryNeuralNetwork(memories, people = []) {
-
-        const centerX = window.innerWidth / 2;
-        const centerY = window.innerHeight / 2;
-        // Neural network layout parameters
-        const networkWidth = Math.min(window.innerWidth * 0.7, 800);
-        const networkHeight = Math.min(window.innerHeight * 0.7, 600);
-        const minDistance = 120; // Minimum distance between nodes
-
-        // Take up to 12 memories and up to 8 people for balanced constellation
-        const selectedMemories = memories.slice(0, 12);
-        const selectedPeople = people.slice(0, 8);
-        const totalNodes = selectedMemories.length + selectedPeople.length + 1; // +1 for create node
-
-        // Generate organic neural network positions
-        const positions = this.generateNeuralNetworkPositions(totalNodes, centerX, centerY, networkWidth, networkHeight, minDistance);
-
-        // Always add "Create New Memory" node at the first position (top-center area)
-        const createPos = positions[0];
-        const createMemoryElement = this.createCreateMemoryNodeElement(createPos.x, createPos.y);
-        this.nodes.push({
-          element: createMemoryElement,
-          x: createPos.x,
-          y: createPos.y,
-          vx: 0,
-          vy: 0,
-          baseX: createPos.x,
-          baseY: createPos.y,
-          connections: [],
-          isCreateNode: true
-        });
-
-        // Create memory nodes in organic neural pattern
-        selectedMemories.forEach((memory, i) => {
-          const pos = positions[i + 1]; // Skip position 0 (create node)
-
-          // Create memory node element
-          const memoryElement = this.createMemoryNodeElement(memory, pos.x, pos.y);
-
-          this.nodes.push({
-            element: memoryElement,
-            x: pos.x,
-            y: pos.y,
-            vx: 0,
-            vy: 0,
-            baseX: pos.x,
-            baseY: pos.y,
-            connections: [],
-            memory: memory,
-            type: 'memory'
-          });
-        });
-
-        // Create people nodes in remaining positions
-        selectedPeople.forEach((person, i) => {
-          const posIndex = selectedMemories.length + i + 1; // Skip create node and memory nodes
-          const pos = positions[posIndex];
-
-          if (pos) { // Make sure we have a position
-            // Create person node element
-            const personElement = this.createPersonNodeElement(person, pos.x, pos.y);
-
-            this.nodes.push({
-              element: personElement,
-              x: pos.x,
-              y: pos.y,
-              vx: 0,
-              vy: 0,
-              baseX: pos.x,
-              baseY: pos.y,
-              connections: [],
-              person: person,
-              type: 'person'
-            });
-          }
-        });
-
-        // Create intelligent connections between memories and people
-        this.createMemoryPeopleConnections(selectedMemories, selectedPeople);
-
-        // Create organic neural network connections (NOT spoked wheel)
-        this.nodes.forEach((node, i) => {
-          // Connect to 2-4 nearby nodes within a certain distance (organic clustering)
-          this.nodes.forEach((otherNode, j) => {
-            if (i !== j) {
-              const dist = Math.sqrt(
-                Math.pow(node.x - otherNode.x, 2) +
-                Math.pow(node.y - otherNode.y, 2)
-              );
-
-              // Connect to nodes within a reasonable distance (creates natural clusters)
-              if (dist < 250 && node.connections.length < 4) {
-                node.connections.push(otherNode);
-              }
-            }
-          });
-
-          // Ensure each node has at least 2 connections (prevent isolated nodes)
-          if (node.connections.length < 2) {
-            // Find the 2 closest nodes
-            const distances = this.nodes
-              .map((otherNode, j) => ({ node: otherNode, index: j, dist: j === i ? Infinity : Math.sqrt(Math.pow(node.x - otherNode.x, 2) + Math.pow(node.y - otherNode.y, 2)) }))
-              .sort((a, b) => a.dist - b.dist)
-              .slice(0, 2);
-
-            distances.forEach(({ node: closestNode }) => {
-              if (!node.connections.includes(closestNode)) {
-                node.connections.push(closestNode);
-              }
-            });
-          }
-        });
-
-        // Add central orb as a special node (but only some memory nodes connect to it)
-        this.centralNode = {
-          x: centerX,
-          y: centerY,
-          element: this.orb
-        };
-
-        // Only 3-4 random memory nodes connect to center (not all - avoids spoked wheel)
-        const centralConnections = Math.min(4, Math.floor(this.nodes.length / 3));
-        const shuffledNodes = [...this.nodes].sort(() => Math.random() - 0.5);
-        shuffledNodes.slice(0, centralConnections).forEach(node => {
-          node.connections.push(this.centralNode);
-        });
-
-      }
-
-      // Create memory node element that opens memory capsule dialog
-      createMemoryNodeElement(memory, x, y) {
-        const memoryElement = document.createElement('div');
-        memoryElement.className = 'memory-node';
-
-        // Add theme data attribute for styling
-        memoryElement.setAttribute('data-theme', memory.theme);
-
-        // CLEAN CIRCULAR NODE - No text labels, pure image capsule
-        memoryElement.style.cssText = `
-          position: fixed;
-          left: ${x}px;
-          top: ${y}px;
-          width: 80px;
-          height: 80px;
-          border-radius: 50%;
-          border: 3px solid rgba(139, 92, 246, 0.6);
-          cursor: pointer;
-          transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-          opacity: 0;
-          transform: scale(0);
-          box-shadow: 0 8px 32px rgba(139, 92, 246, 0.4);
-          z-index: 1500; /* CRITICAL FIX: Higher z-index to appear above all connections */
-          overflow: hidden;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-        `;
-
-        // APPLY BACKGROUND AFTER BASE STYLING: Memory capsule as single node with image background
-        if (memory.thumbnail) {
-          // Use image as background of the entire node - NO separate elements
-          memoryElement.style.backgroundImage = `url('${memory.thumbnail}')`;
-          memoryElement.style.backgroundSize = 'cover';
-          memoryElement.style.backgroundPosition = 'center';
-
-        } else {
-          // Fallback to gradient with emoji
-          memoryElement.style.background = 'linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%)';
-          const emojiDiv = document.createElement('div');
-          emojiDiv.style.cssText = 'font-size: 24px; color: white;';
-          emojiDiv.textContent = '💝';
-          memoryElement.appendChild(emojiDiv);
-
-        }
-
-        // Add click handler to open memory capsule dialog
-        memoryElement.addEventListener('click', (e) => {
-          e.stopPropagation();
-          this.openMemoryCapsuleDialog(memory);
-        });
-
-        // Add hover effects
-        memoryElement.addEventListener('mouseenter', () => {
-          memoryElement.style.transform = 'scale(1.1)';
-          memoryElement.style.boxShadow = '0 0 40px rgba(139, 92, 246, 0.6), 0 0 80px rgba(139, 92, 246, 0.4)';
-        });
-
-        memoryElement.addEventListener('mouseleave', () => {
-          memoryElement.style.transform = 'scale(1)';
-          memoryElement.style.boxShadow = '0 8px 32px rgba(139, 92, 246, 0.4)';
-        });
-
-        document.body.appendChild(memoryElement);
-
-        // Animate in with random delay for organic feel
-        const delay = Math.random() * 500 + 100;
-        setTimeout(() => {
-          memoryElement.style.transform = 'scale(1)';
-          memoryElement.style.opacity = '1';
-        }, delay);
-
-        return memoryElement;
-      }
-
-      // Create the "Create New Memory" node element with elegant SVG +
-      createCreateMemoryNodeElement(x, y) {
-        const createElement = document.createElement('div');
-        createElement.className = 'memory-node create-memory-node';
-        
-        // Create elegant SVG + icon
-        const svgPlus = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-        svgPlus.setAttribute('width', '24');
-        svgPlus.setAttribute('height', '24');
-        svgPlus.setAttribute('viewBox', '0 0 24 24');
-        svgPlus.style.cssText = `
-          filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.8));
-          transition: all 0.3s ease;
-        `;
-        
-        // Create + lines with elegant styling
-        const horizontalLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
-        horizontalLine.setAttribute('x1', '6');
-        horizontalLine.setAttribute('y1', '12');
-        horizontalLine.setAttribute('x2', '18');
-        horizontalLine.setAttribute('y2', '12');
-        horizontalLine.setAttribute('stroke', 'rgba(16, 185, 129, 1)');
-        horizontalLine.setAttribute('stroke-width', '2');
-        horizontalLine.setAttribute('stroke-linecap', 'round');
-        
-        const verticalLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
-        verticalLine.setAttribute('x1', '12');
-        verticalLine.setAttribute('y1', '6');
-        verticalLine.setAttribute('x2', '12');
-        verticalLine.setAttribute('y2', '18');
-        verticalLine.setAttribute('stroke', 'rgba(16, 185, 129, 1)');
-        verticalLine.setAttribute('stroke-width', '2');
-        verticalLine.setAttribute('stroke-linecap', 'round');
-        
-        svgPlus.appendChild(horizontalLine);
-        svgPlus.appendChild(verticalLine);
-        createElement.appendChild(svgPlus);
-
-        // Smaller, more elegant styling with compelling glow
-        createElement.style.cssText = `
-          position: fixed;
-          left: ${x - 30}px;
-          top: ${y - 30}px;
-          width: 60px;
-          height: 60px;
-          background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(34, 197, 94, 0.15));
-          backdrop-filter: blur(20px);
-          border: 2px solid rgba(16, 185, 129, 0.5);
-          border-radius: 50%;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          cursor: pointer;
-          transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-          opacity: 0;
-          transform: scale(0);
-          box-shadow: 
-            0 0 20px rgba(16, 185, 129, 0.4),
-            0 0 40px rgba(16, 185, 129, 0.2),
-            inset 0 0 20px rgba(16, 185, 129, 0.1);
-          animation: addNodeGlow 3s ease-in-out infinite;
-          z-index: 1500; /* CRITICAL FIX: Higher z-index to appear above all connections */
-        `;
-
-        // Add hover effect with enhanced SVG glow
-        createElement.addEventListener('mouseenter', () => {
-          createElement.style.transform = 'scale(1.15)';
-          createElement.style.boxShadow = `
-            0 0 30px rgba(16, 185, 129, 0.6),
-            0 0 60px rgba(16, 185, 129, 0.4),
-            inset 0 0 30px rgba(16, 185, 129, 0.2)
-          `;
-          svgPlus.style.filter = 'drop-shadow(0 0 12px rgba(16, 185, 129, 1))';
-        });
-
-        createElement.addEventListener('mouseleave', () => {
-          createElement.style.transform = 'scale(1)';
-          createElement.style.boxShadow = `
-            0 0 20px rgba(16, 185, 129, 0.4),
-            0 0 40px rgba(16, 185, 129, 0.2),
-            inset 0 0 20px rgba(16, 185, 129, 0.1)
-          `;
-          svgPlus.style.filter = 'drop-shadow(0 0 8px rgba(16, 185, 129, 0.8))';
-        });
-
-        // Add click handler to open Emma chat for memory creation
-        createElement.addEventListener('click', (e) => {
-          e.stopPropagation();
-
-          // Open Emma chat experience for intelligent memory creation
-          this.startEmmaChatExperience();
-        });
-
-        document.body.appendChild(createElement);
-
-        // Animate in
-        setTimeout(() => {
-          createElement.style.transform = 'scale(1)';
-          createElement.style.opacity = '1';
-        }, 100);
-
-        return createElement;
-      }
-
-      // Open Emma memory creation wizard (proper capture wizard)
-      openEmmaMemoryWizard() {
-
-        // CRITICAL FIX: Debug and ensure AssistantExperience is available
-
-        console.log('🧠 DEBUG: Available window objects:', Object.keys(window).filter(k => k.includes('Assistant') || k.includes('Experience')));
-
-        try {
-          // Wait a moment for scripts to load, then check again
-          setTimeout(() => {
-
-            if (window.AssistantExperience) {
-
-              // Create and show the full assistant experience popup
-              const assistantInstance = new window.AssistantExperience(
-                { x: window.innerWidth / 2, y: window.innerHeight / 2 },
-                { showCloseButton: true }
-              );
-              // Show the full popup - this will open with the voice wizard tab active
-              assistantInstance.show();
-              // Store reference for global access
-              window.assistantInstance = assistantInstance;
-            } else {
-              console.error('🧠 AssistantExperience STILL not available after delay!');
-              console.log('🧠 Available classes:', Object.keys(window).filter(k => k.endsWith('Experience')));
-              this.showToast('❌ Emma Assistant not loaded', 'error');
-            }
-          }, 100);
-
-        } catch (error) {
-          console.error('Failed to open Emma memory wizard:', error);
-          this.showToast('❌ Failed to open memory wizard', 'error');
-        }
-      }
-
-      // Fallback voice memory wizard
-      openVoiceMemoryWizard() {
-        console.log('🧠 Opening voice memory wizard (fallback)');
-
-        // Create a voice memory wizard modal similar to AssistantExperience
-        const modalHTML = `
-          <div class="voice-wizard-modal" style="
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: rgba(0, 0, 0, 0.8);
-            backdrop-filter: blur(12px);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            z-index: 10000;
-          ">
-            <div class="voice-wizard-content" style="
-              background: linear-gradient(135deg, rgba(138, 43, 226, 0.95), rgba(75, 0, 130, 0.95));
-              border-radius: 20px;
-              padding: 40px;
-              width: 90%;
-              max-width: 600px;
-              box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
-              border: 1px solid rgba(255, 255, 255, 0.2);
-              backdrop-filter: blur(20px);
-              color: white;
-              text-align: center;
-            ">
-              <div class="emma-section">
-                <div style="color: rgba(255, 255, 255, 0.8); font-size: 14px; margin-bottom: 8px;">EMMA ASKS</div>
-                <h1 style="margin: 0 0 24px 0; font-size: 28px; font-weight: 700;">
-                  What's your favorite memory with Mom? Take your time, I'm listening.
-                </h1>
-                <div class="suggestions" style="margin-bottom: 32px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;">
-                  <button class="suggestion-chip" style="
-                    padding: 8px 16px;
-                    background: rgba(255, 255, 255, 0.2);
-                    border: 1px solid rgba(255, 255, 255, 0.3);
-                    border-radius: 20px;
-                    color: white;
-                    font-size: 14px;
-                    cursor: pointer;
-                  ">Holiday traditions</button>
-                  <button class="suggestion-chip" style="
-                    padding: 8px 16px;
-                    background: rgba(255, 255, 255, 0.2);
-                    border: 1px solid rgba(255, 255, 255, 0.3);
-                    border-radius: 20px;
-                    color: white;
-                    font-size: 14px;
-                    cursor: pointer;
-                  ">Her wisdom</button>
-                  <button class="suggestion-chip" style="
-                    padding: 8px 16px;
-                    background: rgba(255, 255, 255, 0.2);
-                    border: 1px solid rgba(255, 255, 255, 0.3);
-                    border-radius: 20px;
-                    color: white;
-                    font-size: 14px;
-                    cursor: pointer;
-                  ">Family meals</button>
-                </div>
-              </div>
-
-              <div class="voice-capture" style="margin-bottom: 32px;">
-                <div class="voice-button-container" style="margin-bottom: 16px;">
-                  <button class="voice-button" style="
-                    width: 80px;
-                    height: 80px;
-                    border-radius: 50%;
-                    background: rgba(255, 255, 255, 0.2);
-                    border: 2px solid rgba(255, 255, 255, 0.3);
-                    color: white;
-                    cursor: pointer;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    margin: 0 auto;
-                  ">
-                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                      <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/>
-                      <path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
-                      <line x1="12" x2="12" y1="19" y2="22"/>
-                      <line x1="8" x2="16" y1="22" y2="22"/>
-                    </svg>
-                  </button>
-                </div>
-                <div style="color: rgba(255, 255, 255, 0.8); font-size: 14px;">Tap to start recording</div>
-              </div>
-
-              <div class="transcription" style="margin-bottom: 32px;">
-                <div style="color: rgba(255, 255, 255, 0.8); font-size: 14px; margin-bottom: 8px;">YOUR STORY</div>
-                <div style="
-                  background: rgba(255, 255, 255, 0.1);
-                  border-radius: 12px;
-                  padding: 20px;
-                  min-height: 80px;
-                  font-style: italic;
-                  color: rgba(255, 255, 255, 0.6);
-                ">Your words will appear here as you speak...</div>
-              </div>
-
-              <div style="margin-bottom: 24px;">
-                <div style="color: rgba(255, 255, 255, 0.8); font-size: 14px; margin-bottom: 8px;">1 of 5 questions</div>
-                <div style="
-                  width: 100%;
-                  height: 4px;
-                  background: rgba(255, 255, 255, 0.2);
-                  border-radius: 2px;
-                  overflow: hidden;
-                ">
-                  <div style="
-                    width: 20%;
-                    height: 100%;
-                    background: linear-gradient(90deg, #ffffff, rgba(255, 255, 255, 0.8));
-                    border-radius: 2px;
-                  "></div>
-                </div>
-              </div>
-
-              <div style="display: flex; gap: 12px; justify-content: center;">
-                <button class="skip-btn" style="
-                  padding: 14px 28px;
-                  border: 2px solid rgba(255, 255, 255, 0.3);
-                  background: rgba(255, 255, 255, 0.1);
-                  color: white;
-                  border-radius: 10px;
-                  cursor: pointer;
-                  font-size: 14px;
-                  font-weight: 500;
-                ">Skip</button>
-                <button class="continue-btn" style="
-                  padding: 14px 28px;
-                  border: none;
-                  background: rgba(255, 255, 255, 0.9);
-                  color: #6b46c1;
-                  border-radius: 10px;
-                  cursor: pointer;
-                  font-size: 14px;
-                  font-weight: 600;
-                ">Continue →</button>
-              </div>
-            </div>
-          </div>
-        `;
-
-        // Create and show modal - SECURITY FIX: Use safe DOM creation
-        const modal = document.createElement('div');
-        modal.className = 'modal-overlay';
-        modal.id = 'vault-migration-modal';
-        modal.style.cssText = 'display: flex; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); z-index: 10000; align-items: center; justify-content: center;';
-
-        const modalContent = document.createElement('div');
-        modalContent.className = 'modal-content';
-        modalContent.style.cssText = 'background: linear-gradient(135deg, #1a1033 0%, #2d1b69 50%, #0f0c29 100%); padding: 40px; border-radius: 20px; max-width: 500px; text-align: center; border: 1px solid rgba(139, 92, 246, 0.3);';
-
-        const title = document.createElement('h2');
-        title.textContent = '🔄 Vault Migration Available';
-        title.style.cssText = 'color: white; margin-bottom: 20px; font-size: 24px;';
-
-        const description = document.createElement('p');
-        description.textContent = 'A new vault storage system is available with enhanced security and performance. Would you like to migrate your existing vault?';
-        description.style.cssText = 'color: rgba(255, 255, 255, 0.8); margin-bottom: 30px; line-height: 1.6;';
-
-        const buttonContainer = document.createElement('div');
-        buttonContainer.style.cssText = 'display: flex; gap: 15px; justify-content: center;';
-
-        const skipBtn = document.createElement('button');
-        skipBtn.className = 'skip-btn';
-        skipBtn.textContent = 'Skip for Now';
-        skipBtn.style.cssText = 'padding: 12px 24px; background: rgba(255, 255, 255, 0.1); color: white; border: none; border-radius: 8px; cursor: pointer;';
-
-        const continueBtn = document.createElement('button');
-        continueBtn.className = 'continue-btn';
-        continueBtn.textContent = 'Migrate Vault';
-        continueBtn.style.cssText = 'padding: 12px 24px; background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); color: white; border: none; border-radius: 8px; cursor: pointer;';
-
-        buttonContainer.appendChild(skipBtn);
-        buttonContainer.appendChild(continueBtn);
-        modalContent.appendChild(title);
-        modalContent.appendChild(description);
-        modalContent.appendChild(buttonContainer);
-        modal.appendChild(modalContent);
-        document.body.appendChild(modal);
-
-        // Add event listeners
-        const skipBtnQuery = modal.querySelector('.skip-btn');
-        const continueBtnQuery = modal.querySelector('.continue-btn');
-
-        skipBtnQuery.addEventListener('click', () => modal.remove());
-        continueBtnQuery.addEventListener('click', () => {
-          // For now, just show a message and close
-          this.showToast('🎤 Voice wizard coming soon!', 'info');
-          modal.remove();
-        });
-
-        // Close on outside click
-        modal.addEventListener('click', (e) => {
-          if (e.target === modal) {
-            modal.remove();
-          }
-        });
-      }
-
-      // Open memory capsule dialog (reuses existing memory dialog system)
-      openMemoryCapsuleDialog(memory) {
-
-        this.openMemoryDialog(memory);
-      }
-
-      // Create neural branches from central Emma neuron
-      createNeuralBranches(memories) {
-
-        const centerX = window.innerWidth / 2;
-        const centerY = window.innerHeight / 2;
-
-        // First layer - primary neurons directly connected to Emma
-        const primaryCount = Math.min(8, memories.length); // Max 8 primary branches
-        const primaryAngleStep = (Math.PI * 2) / primaryCount;
-        const primaryRadius = 200;
-
-        // Create primary neurons
-        const primaryNeurons = [];
-        for (let i = 0; i < primaryCount; i++) {
-          const angle = i * primaryAngleStep - Math.PI / 2;
-          const x = centerX + Math.cos(angle) * primaryRadius;
-          const y = centerY + Math.sin(angle) * primaryRadius;
-
-          if (memories[i]) {
-            const neuron = this.createMemoryNode(memories[i], x, y, memories[i].theme);
-            neuron.isPrimary = true;
-            neuron.connections.push(this.centralNeuron);
-            this.centralNeuron.connections.push(neuron);
-            primaryNeurons.push(neuron);
-            this.nodes.push(neuron);
-          }
-        }
-
-        // Create secondary and tertiary neurons branching from primaries
-        let memoryIndex = primaryCount;
-        primaryNeurons.forEach((primaryNeuron, primaryIndex) => {
-          // Calculate how many secondary neurons this primary should have
-          const remainingMemories = memories.length - memoryIndex;
-          const remainingPrimaries = primaryCount - primaryIndex;
-          const secondaryCount = Math.ceil(remainingMemories / remainingPrimaries);
-
-          // Create secondary neurons
-          for (let j = 0; j < secondaryCount && memoryIndex < memories.length; j++) {
-            const memory = memories[memoryIndex++];
-
-            // Position secondary neurons in an arc around the primary
-            const secondaryAngle = primaryIndex * primaryAngleStep +
-              (j - secondaryCount/2) * (Math.PI / 6) / secondaryCount;
-            const secondaryRadius = 120 + Math.random() * 60;
-
-            const x = primaryNeuron.x + Math.cos(secondaryAngle) * secondaryRadius;
-            const y = primaryNeuron.y + Math.sin(secondaryAngle) * secondaryRadius;
-
-            // Ensure within bounds
-            const padding = 100;
-            const finalX = Math.max(padding, Math.min(window.innerWidth - padding, x));
-            const finalY = Math.max(padding, Math.min(window.innerHeight - padding, y));
-
-            const secondaryNeuron = this.createMemoryNode(memory, finalX, finalY, memory.theme);
-            secondaryNeuron.isSecondary = true;
-            secondaryNeuron.connections.push(primaryNeuron);
-            primaryNeuron.connections.push(secondaryNeuron);
-            this.nodes.push(secondaryNeuron);
-          }
-        });
-
-      }
-
-      // Create individual memory node
-      createMemoryNode(memory, x, y, theme) {
-        console.log(`🌟 Creating memory node element for "${memory.title}" at (${x}, ${y})`);
-
-        const memoryElement = document.createElement('div');
-        memoryElement.className = 'memory-node';
-
-        // SECURITY FIX: Use safe DOM creation instead of innerHTML
-        const thumbnail = document.createElement('div');
-        thumbnail.className = 'memory-thumbnail';
-        thumbnail.textContent = memory.thumbnail; // Safe text content
-
-        const label = document.createElement('div');
-        label.className = 'memory-label';
-        label.textContent = memory.title; // Safe text content
-
-        memoryElement.appendChild(thumbnail);
-        memoryElement.appendChild(label);
-
-        // Add theme data attribute for styling
-        memoryElement.setAttribute('data-theme', theme);
-
-        // Style the memory node
-        memoryElement.style.cssText = `
-          position: fixed;
-          left: ${x}px;
-          top: ${y}px;
-          width: 70px;
-          height: 70px;
-          border-radius: 50%;
-          background: radial-gradient(circle, rgba(255, 255, 255, 0.1), rgba(134, 88, 255, 0.2));
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          justify-content: center;
-          cursor: pointer;
-          transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-          transform: scale(0);
-          opacity: 0;
-          z-index: 1000;
-          color: white;
-        `;
-
-        // Add click handler for elegant memory dialog
-        memoryElement.addEventListener('click', (e) => {
-          e.stopPropagation();
-          this.openMemoryDialog(memory);
-        });
-
-        // Add hover effects with theme-based glow
-        memoryElement.addEventListener('mouseenter', () => {
-          const themeColors = {
-            family: 'rgba(255, 105, 135, 0.8)',
-            travel: 'rgba(52, 211, 153, 0.8)',
-            recent: 'rgba(96, 165, 250, 0.8)',
-            special: 'rgba(251, 191, 36, 0.8)'
-          };
-
-          memoryElement.style.transform = 'scale(1.3)';
-          memoryElement.style.boxShadow = `0 0 60px ${themeColors[theme] || 'rgba(134, 88, 255, 0.8)'}, 0 0 100px ${themeColors[theme] || 'rgba(134, 88, 255, 0.4)'}`;
-          memoryElement.style.zIndex = '1600'; /* CRITICAL FIX: Even higher on hover to stay above everything */
-        });
-
-        memoryElement.addEventListener('mouseleave', () => {
-          memoryElement.style.transform = 'scale(1)';
-          memoryElement.style.boxShadow = '';
-          memoryElement.style.zIndex = '1500'; /* CRITICAL FIX: Maintain high z-index even when not hovering */
-        });
-
-        // Append to a container that's below the canvas
-        const container = document.querySelector('.dashboard') || document.body;
-        container.appendChild(memoryElement);
-
-        // Animate in with staggered timing
-        const delay = Math.random() * 500 + 200; // 200-700ms delay
-        setTimeout(() => {
-
-          memoryElement.style.transform = 'scale(1)';
-          memoryElement.style.opacity = '1';
-        }, delay);
-
-        return {
-          element: memoryElement,
-          x: x,
-          y: y,
-          baseX: x,
-          baseY: y,
-          vx: 0,
-          vy: 0,
-          memory: memory,
-          theme: theme,
-          connections: []
-        };
-      }
-
-      // Create person node element for constellation with heartbeat effect
-      createPersonNodeElement(person, x, y) {
-        const personElement = document.createElement('div');
-        personElement.className = 'person-node';
-
-        // Create person avatar with first letter of name
-        const avatar = person.name.charAt(0).toUpperCase();
-        const relationColor = this.getRelationColor(person.relation);
-
-        // Create BIGGER avatar circle with subtle heartbeat glow - NO TEXT LABELS
-        personElement.style.cssText = `
-          position: fixed;
-          left: ${x}px;
-          top: ${y}px;
-          width: 85px;
-          height: 85px;
-          border-radius: 50%;
-          background: ${relationColor.gradient};
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          color: white;
-          font-weight: 700;
-          font-size: 28px;
-          border: 3px solid ${relationColor.border};
-          box-shadow: 
-            0 8px 32px ${relationColor.glow},
-            0 0 20px rgba(239, 68, 68, 0.3),
-            0 0 40px rgba(239, 68, 68, 0.1);
-          overflow: hidden;
-          cursor: pointer;
-          transform: scale(0);
-          opacity: 0;
-          transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-          animation: heartbeat 4s ease-in-out infinite;
-          z-index: 1500; /* CRITICAL FIX: Higher z-index to appear above all connections */
-        `;
-
-        // Start with letter, then try to load avatar image
-        personElement.textContent = avatar;
-
-        // Try to load actual avatar image if person has one
-        if (person.avatarId) {
-          this.loadPersonAvatar(person, personElement, avatar);
-        }
-
-        // Add click handler to open person summary modal
-        personElement.addEventListener('click', (e) => {
-          e.stopPropagation();
-          this.openPersonSummaryModal(person);
-        });
-
-        // Add hover effects with relation-based glow
-        personElement.addEventListener('mouseenter', () => {
-          personElement.style.transform = 'scale(1.2)';
-          personElement.style.boxShadow = `0 0 40px ${relationColor.glow}, 0 0 80px ${relationColor.glow}`;
-          personElement.style.zIndex = '1600'; /* CRITICAL FIX: Even higher on hover to stay above everything */
-        });
-
-        personElement.addEventListener('mouseleave', () => {
-          personElement.style.transform = 'scale(1)';
-          personElement.style.boxShadow = '';
-          personElement.style.zIndex = '1500'; /* CRITICAL FIX: Maintain high z-index even when not hovering */
-        });
-
-        // Append to container
-        const container = document.querySelector('.dashboard') || document.body;
-        container.appendChild(personElement);
-
-        // Animate in with staggered timing
-        const delay = Math.random() * 500 + 300; // 300-800ms delay
-        setTimeout(() => {
-
-          personElement.style.transform = 'scale(1)';
-          personElement.style.opacity = '1';
-        }, delay);
-
-        return personElement;
-      }
-
-      // Load actual avatar image for person node
-      async loadPersonAvatar(person, personElement, fallbackLetter) {
-        try {
-
-          // FIXED: Use avatarUrl directly from extension (already reconstructed)
-          if (person.avatarUrl) {
-            // Create image element
-            const img = document.createElement('img');
-            img.src = person.avatarUrl;
-            img.alt = `${person.name} avatar`;
-            img.style.cssText = `
-              width: 100%;
-              height: 100%;
-              object-fit: cover;
-              border-radius: 50%;
-            `;
-
-            img.onload = () => {
-              // Replace letter with image once loaded
-              personElement.innerHTML = '';
-              personElement.appendChild(img);
-
-            };
-
-            img.onerror = () => {
-              console.error('📷 CONSTELLATION: Failed to display avatar for:', person.name);
-              // Keep the letter fallback
-            };
-          } else {
-            console.warn('📷 CONSTELLATION: No avatar URL for:', person.name);
-          }
-        } catch (error) {
-          console.error('📷 CONSTELLATION: Error loading avatar for:', person.name, error);
-          // Keep the letter fallback
-        }
-      }
-
-      // Open revolutionary migration page
-      openMigrationPage() {
-
-        window.location.href = 'pages/vault-migration.html';
-      }
-
-      // Open person summary modal with connected memories
-      async openPersonSummaryModal(person) {
-
-        // Get all memories from vault to find real connections
-        let allMemories = [];
-        try {
-          if (window.emmaWebVault && window.emmaWebVault.extensionAvailable) {
-            allMemories = await window.emmaWebVault.listMemories(1000);
-
-          }
-        } catch (error) {
-          console.error('👤 SUMMARY: Error loading memories:', error);
-        }
-
-        // Find memories that have this person in their metadata.people array
-        const connectedMemories = allMemories.filter(memory => {
-          const peopleInMemory = memory.metadata?.people || [];
-          const isConnected = peopleInMemory.includes(person.id);
-
-          return isConnected;
-        });
-
-        // Create modal HTML
-        const modalHTML = `
-          <div class="person-summary-modal-overlay" id="person-summary-overlay" onclick="window.memoryConstellation.closePersonSummaryModal()">
-            <div class="person-summary-modal" onclick="event.stopPropagation()">
-              <button class="modal-close" onclick="window.memoryConstellation.closePersonSummaryModal()">×</button>
-
-              <div class="person-summary-header">
-                <div class="person-summary-avatar" id="person-summary-avatar">
-                  ${person.name.charAt(0).toUpperCase()}
-                </div>
-                <div class="person-summary-info">
-                  <h2 class="person-summary-name">${person.name}</h2>
-                  <p class="person-summary-relation">${person.relation || 'other'}</p>
-                  <p class="person-summary-contact">${person.contact || 'No contact info'}</p>
-                </div>
-              </div>
-
-              <div class="person-summary-content">
-                <h3 class="summary-section-title">Connected Memories</h3>
-                <div class="connected-memories">
-                  ${connectedMemories.length > 0 ?
-                    connectedMemories.map(memory => {
-                      // Get thumbnail from attachments or fallback
-                      const thumbnail = memory.thumbnail ||
-                                       (memory.attachments && memory.attachments.length > 0 && memory.attachments[0].url ? memory.attachments[0].url : null);
-                      const memoryTitle = memory.metadata?.title || memory.title || memory.subject || 'Untitled Memory';
-                      const memoryDate = memory.created || memory.date || memory.timestamp;
-
-                      return `
-                        <div class="connected-memory-item" onclick="window.memoryConstellation.openMemoryFromPerson('${memory.id}')">
-                          <div class="memory-preview">
-                            ${thumbnail ? `<img src="${thumbnail}" alt="Memory">` : '💝'}
-                          </div>
-                          <div class="memory-info">
-                            <div class="memory-title">${memoryTitle}</div>
-                            <div class="memory-date">${memoryDate ? new Date(memoryDate).toLocaleDateString() : 'Unknown date'}</div>
-                          </div>
-                        </div>
-                      `;
-                    }).join('') :
-                    '<div class="no-memories">No connected memories yet</div>'
-                  }
-                </div>
-
-                <div class="person-summary-actions">
-                  <button class="btn btn-primary" onclick="window.memoryConstellation.createMemoryWithPersonFromConstellation('${person.id}')">
-                    <span>✨</span>
-                    Create Memory Together
-                  </button>
-                  <button class="btn btn-secondary" onclick="window.location.href='pages/people-emma.html'">
-                    <span>👥</span>
-                    Manage People
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-        `;
-
-        // Add modal to body
-        document.body.insertAdjacentHTML('beforeend', modalHTML);
-
-        // Make constellation functions globally accessible for modal
-        window.memoryConstellation = this;
-
-        // Load avatar if available - CRITICAL for showing person's image
-        if (person.avatarUrl) {
-          this.loadAvatarForSummary(person);
-        } else {
-
-        }
-
-        // Show modal with animation
-        setTimeout(() => {
-          document.getElementById('person-summary-overlay').classList.add('active');
-        }, 10);
-      }
-
-      async loadAvatarForSummary(person) {
-        try {
-
-          // FIXED: Use avatarUrl directly (same as constellation nodes and people page)
-          if (person.avatarUrl) {
-            const avatarElement = document.getElementById('person-summary-avatar');
-            if (avatarElement) {
-
-              avatarElement.innerHTML = `<img src="${person.avatarUrl}" alt="${person.name}" style="
-                width: 100%;
-                height: 100%;
-                object-fit: cover;
-                border-radius: 50%;
-              ">`;
-
-            } else {
-              console.error('📷 SUMMARY: Avatar element not found in DOM');
-            }
-          } else {
-            console.warn('📷 SUMMARY: No avatarUrl available for:', person.name);
-          }
-        } catch (error) {
-          console.error('📷 SUMMARY: Error loading avatar for:', person.name, error);
-        }
-      }
-
-      closePersonSummaryModal() {
-        const overlay = document.getElementById('person-summary-overlay');
-        if (overlay) {
-          overlay.classList.remove('active');
-          setTimeout(() => overlay.remove(), 300);
-        }
-      }
-
-      createMemoryWithPersonFromConstellation(personId) {
-        this.closePersonSummaryModal();
-        window.location.href = `dashboard-new.html?createMemory=true&person=${personId}`;
-      }
-
-      async openMemoryFromPerson(memoryId) {
-
-        this.closePersonSummaryModal();
-
-        // Find the memory in our loaded memories
-        try {
-          let allMemories = [];
-          if (window.emmaWebVault && window.emmaWebVault.extensionAvailable) {
-            allMemories = await window.emmaWebVault.listMemories(1000);
-          }
-
-          const memory = allMemories.find(m => m.id === memoryId);
-          if (memory) {
-            this.openMemoryDialog(memory);
-          } else {
-            console.error('💝 Memory not found:', memoryId);
-            this.showToast('❌ Memory not found', 'error');
-          }
-        } catch (error) {
-          console.error('💝 Error opening memory from person:', error);
-          this.showToast('❌ Error opening memory', 'error');
-        }
-      }
-
-      // Get relation-specific colors for people nodes
-      getRelationColor(relation) {
-        const colors = {
-          family: {
-            gradient: 'linear-gradient(135deg, #ef4444, #f87171)',
-            border: 'rgba(239, 68, 68, 0.6)',
-            glow: 'rgba(239, 68, 68, 0.8)'
-          },
-          friend: {
-            gradient: 'linear-gradient(135deg, #3b82f6, #60a5fa)',
-            border: 'rgba(59, 130, 246, 0.6)',
-            glow: 'rgba(59, 130, 246, 0.8)'
-          },
-          colleague: {
-            gradient: 'linear-gradient(135deg, #10b981, #34d399)',
-            border: 'rgba(16, 185, 129, 0.6)',
-            glow: 'rgba(16, 185, 129, 0.8)'
-          },
-          romantic: {
-            gradient: 'linear-gradient(135deg, #ec4899, #f472b6)',
-            border: 'rgba(236, 72, 153, 0.6)',
-            glow: 'rgba(236, 72, 153, 0.8)'
-          }
-        };
-
-        return colors[relation] || colors.friend; // Default to friend colors
-      }
-
-      // Open person dialog (placeholder)
-      openPersonDialog(person) {
-
-        this.showToast(`👥 ${person.name} (${person.relation})`, 'info');
-      }
-
-      // Create intelligent connections between memory nodes and people nodes
-      createMemoryPeopleConnections(memories, people) {
-
-        const memoryNodes = this.nodes.filter(node => node.type === 'memory');
-        const peopleNodes = this.nodes.filter(node => node.type === 'person');
-
-        // For each memory, connect to people who were involved
-        memoryNodes.forEach(memoryNode => {
-          const memory = memoryNode.memory;
-
-          // Check if memory has people data (from wizard selections, manual input, OR new metadata.people format)
-          let peopleToConnect = [];
-          
-          // NEW FORMAT: Check metadata.people first (preferred)
-          if (memory.metadata && memory.metadata.people && Array.isArray(memory.metadata.people)) {
-            peopleToConnect = memory.metadata.people;
-            console.log('🔗 CONSTELLATION: Using metadata.people format:', peopleToConnect);
-          }
-          // LEGACY FORMAT: Fallback to selectedPeople for backward compatibility
-          else if (memory.selectedPeople && Array.isArray(memory.selectedPeople)) {
-            peopleToConnect = memory.selectedPeople;
-            console.log('🔗 CONSTELLATION: Using legacy selectedPeople format:', peopleToConnect);
-          }
-          
-          // Create connections for all people
-          peopleToConnect.forEach(personId => {
-            const personNode = peopleNodes.find(pNode => pNode.person.id === personId);
-            if (personNode && !memoryNode.connections.includes(personNode)) {
-              memoryNode.connections.push(personNode);
-              personNode.connections.push(memoryNode);
-              console.log(`🔗 CONSTELLATION: Connected memory "${memory.title}" to person "${personNode.person.name}"`);
-            }
-          });
-
-          // Also check if people are mentioned in memory content/responses
-          const memoryText = (memory.content || '').toLowerCase() + ' ' +
-                            (memory.responses || []).join(' ').toLowerCase();
-
-          peopleNodes.forEach(personNode => {
-            const personName = personNode.person.name.toLowerCase();
-
-            // If person's name is mentioned in the memory text, create connection
-            if (memoryText.includes(personName) && !memoryNode.connections.includes(personNode)) {
-              memoryNode.connections.push(personNode);
-              personNode.connections.push(memoryNode);
-              console.log(`🔗 Auto-connected memory "${memory.title}" to person "${personNode.person.name}" (name mentioned)`);
-            }
-          });
-        });
-
-        // Create some random connections for people who aren't connected to anything
-        peopleNodes.forEach(personNode => {
-          if (personNode.connections.length === 0) {
-            // Connect to the closest memory node
-            let closestMemory = null;
-            let closestDistance = Infinity;
-
-            memoryNodes.forEach(memoryNode => {
-              const dx = personNode.x - memoryNode.x;
-              const dy = personNode.y - memoryNode.y;
-              const distance = Math.sqrt(dx * dx + dy * dy);
-
-              if (distance < closestDistance && memoryNode.connections.length < 3) {
-                closestDistance = distance;
-                closestMemory = memoryNode;
-              }
-            });
-
-            if (closestMemory) {
-              personNode.connections.push(closestMemory);
-              closestMemory.connections.push(personNode);
-
-            }
-          }
-        });
-
-      }      // Update neural network node positions with overlap prevention
-      updateConstellationNodes() {
-        const time = Date.now() * 0.001;
-
-        // Update all memory nodes
-        this.nodes.forEach((node, i) => {
-          // Reset forces
-          let forceX = 0;
-          let forceY = 0;
-
-          // Repulsion from other nodes to prevent overlap
-          this.nodes.forEach((otherNode, j) => {
-            if (i !== j) {
-              const dx = node.x - otherNode.x;
-              const dy = node.y - otherNode.y;
-              const distance = Math.sqrt(dx * dx + dy * dy);
-
-              const minDistance = node.isPrimary || otherNode.isPrimary ? 150 : 120;
-              if (distance < minDistance) {
-                const force = (minDistance - distance) / distance * 0.3;
-                forceX += dx * force;
-                forceY += dy * force;
-              }
-            }
-          });
-
-          // Also repel from central neuron
-          if (this.centralNeuron) {
-            const dx = node.x - this.centralNeuron.x;
-            const dy = node.y - this.centralNeuron.y;
-            const distance = Math.sqrt(dx * dx + dy * dy);
-
-            if (distance < 150) {
-              const force = (150 - distance) / distance * 0.4;
-              forceX += dx * force;
-              forceY += dy * force;
-            }
-          }
-
-          // Gentle attraction to base position
-          const baseAttraction = node.isPrimary ? 0.03 : 0.02;
-          forceX += (node.baseX - node.x) * baseAttraction;
-          forceY += (node.baseY - node.y) * baseAttraction;
-
-          // Subtle floating motion - less for primary nodes
-          const floatAmplitude = node.isPrimary ? 1.5 : 2.5;
-          const floatX = Math.sin(time * 0.15 + i * 0.7) * floatAmplitude;
-          const floatY = Math.cos(time * 0.12 + i * 0.5) * floatAmplitude;
-
-          // Apply forces
-          node.vx = (node.vx + forceX) * 0.92; // Damping
-          node.vy = (node.vy + forceY) * 0.92;
-
-          // Update position
-          node.x += node.vx + floatX * 0.4;
-          node.y += node.vy + floatY * 0.4;
-
-          // Keep within bounds
-          const padding = 80;
-          node.x = Math.max(padding, Math.min(window.innerWidth - padding, node.x));
-          node.y = Math.max(padding, Math.min(window.innerHeight - padding, node.y));
-
-          // Update DOM position
-          if (node.element) {
-            node.element.style.left = node.x + 'px';
-            node.element.style.top = node.y + 'px';
-          }
-        });
-
-        // The central neuron (Emma orb) stays fixed at center
-        if (this.centralNeuron) {
-          this.centralNeuron.x = window.innerWidth / 2;
-          this.centralNeuron.y = window.innerHeight / 2;
-        }
-      }
-
-      // Show elegant constellation burger menu
-      showConstellationUI() {
-        // Initialize constellation filters state
-        this.constellationFilters = {
-          memories: true,
-          people: true,
-          family: true,
-          travel: true,
-          recent: true,
-          special: true
-        };
-
-        // Create elegant burger menu
-        const burgerMenu = document.createElement('div');
-        burgerMenu.className = 'constellation-burger-menu';
-        burgerMenu.innerHTML = `
-          <!-- Burger Button -->
-          <button class="constellation-burger-btn" id="constellationBurger">
-            <div class="burger-lines">
-              <span></span>
-              <span></span>
-              <span></span>
-          </div>
-            <div class="burger-label">Filters</div>
-          </button>
-
-          <!-- Expandable Menu Panel -->
-          <div class="constellation-menu-panel" id="constellationPanel">
-            <div class="panel-header">
-              <h3>🌟 Constellation Filters</h3>
-              <button class="panel-close" onclick="dashboard.exitMemoryConstellation()">✕</button>
-            </div>
-
-            <div class="filter-section">
-              <h4>Node Types</h4>
-              <div class="filter-toggles">
-                <label class="filter-toggle">
-                  <input type="checkbox" id="filter-memories" checked>
-                  <span class="toggle-slider"></span>
-                  <span class="toggle-label">💝 Memories</span>
-                  <span class="toggle-count" id="count-memories">0</span>
-                </label>
-
-                <label class="filter-toggle">
-                  <input type="checkbox" id="filter-people" checked>
-                  <span class="toggle-slider"></span>
-                  <span class="toggle-label">👤 People</span>
-                  <span class="toggle-count" id="count-people">0</span>
-                </label>
-              </div>
-            </div>
-
-            <div class="filter-section">
-              <h4>Memory Themes</h4>
-              <div class="filter-toggles">
-                <label class="filter-toggle">
-                  <input type="checkbox" id="filter-family" checked>
-                  <span class="toggle-slider family"></span>
-                  <span class="toggle-label">👨‍👩‍👧‍👦 Family</span>
-                  <span class="toggle-count" id="count-family">0</span>
-                </label>
-
-                <label class="filter-toggle">
-                  <input type="checkbox" id="filter-travel" checked>
-                  <span class="toggle-slider travel"></span>
-                  <span class="toggle-label">✈️ Travel</span>
-                  <span class="toggle-count" id="count-travel">0</span>
-                </label>
-
-                <label class="filter-toggle">
-                  <input type="checkbox" id="filter-recent" checked>
-                  <span class="toggle-slider recent"></span>
-                  <span class="toggle-label">🕒 Recent</span>
-                  <span class="toggle-count" id="count-recent">0</span>
-                </label>
-
-                <label class="filter-toggle">
-                  <input type="checkbox" id="filter-special" checked>
-                  <span class="toggle-slider special"></span>
-                  <span class="toggle-label">⭐ Special</span>
-                  <span class="toggle-count" id="count-special">0</span>
-                </label>
-              </div>
-            </div>
-
-            <div class="filter-actions">
-              <button class="filter-btn secondary" id="reset-filters-btn">
-                Reset All
-              </button>
-              <button class="filter-btn primary" id="apply-filters-btn">
-                Apply Filters
-              </button>
-            </div>
-          </div>
-        `;
-
-        // Add elegant styles
-        const styles = document.createElement('style');
-        styles.textContent = `
-          .constellation-burger-menu {
-          position: fixed;
-          top: 20px;
-          left: 20px;
-            z-index: 2000;
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-          }
-
-          .constellation-burger-btn {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            gap: 4px;
-            background: rgba(17, 17, 27, 0.95);
-            border: 1px solid rgba(134, 88, 255, 0.4);
-            border-radius: 12px;
-            padding: 12px;
-            cursor: pointer;
-            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-            backdrop-filter: blur(15px);
-            box-shadow: 0 8px 32px rgba(134, 88, 255, 0.15);
-          }
-
-          .constellation-burger-btn:hover {
-            background: rgba(134, 88, 255, 0.1);
-            border-color: rgba(134, 88, 255, 0.6);
-            transform: translateY(-2px);
-            box-shadow: 0 12px 40px rgba(134, 88, 255, 0.25);
-          }
-
-          .burger-lines {
-            display: flex;
-            flex-direction: column;
-            gap: 3px;
-          }
-
-          .burger-lines span {
-            width: 18px;
-            height: 2px;
-            background: rgba(134, 88, 255, 0.8);
-            border-radius: 1px;
-            transition: all 0.3s ease;
-          }
-
-          .constellation-burger-btn:hover .burger-lines span {
-            background: rgba(134, 88, 255, 1);
-          }
-
-          .burger-label {
-            font-size: 10px;
-            color: rgba(255, 255, 255, 0.7);
-            font-weight: 500;
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-          }
-
-          .constellation-menu-panel {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 320px;
-            background: rgba(17, 17, 27, 0.98);
-          border: 1px solid rgba(134, 88, 255, 0.3);
-            border-radius: 16px;
-            backdrop-filter: blur(20px);
-            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
-            transform: translateX(-100%) scale(0.95);
-            opacity: 0;
-            visibility: hidden;
-            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-            overflow: hidden;
-          }
-
-          .constellation-menu-panel.active {
-            transform: translateX(0) scale(1);
-            opacity: 1;
-            visibility: visible;
-          }
-
-          .panel-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 20px 24px 16px;
-            border-bottom: 1px solid rgba(134, 88, 255, 0.2);
-          }
-
-          .panel-header h3 {
-            margin: 0;
-            font-size: 16px;
-            font-weight: 600;
-            color: white;
-          }
-
-          .panel-close {
-            background: none;
-            border: none;
-            color: rgba(255, 255, 255, 0.6);
-            font-size: 18px;
-            cursor: pointer;
-            padding: 4px;
-            border-radius: 6px;
-            transition: all 0.2s ease;
-          }
-
-          .panel-close:hover {
-            background: rgba(255, 255, 255, 0.1);
-            color: white;
-          }
-
-          .filter-section {
-            padding: 20px 24px;
-            border-bottom: 1px solid rgba(134, 88, 255, 0.1);
-          }
-
-          .filter-section:last-of-type {
-            border-bottom: none;
-          }
-
-          .filter-section h4 {
-            margin: 0 0 16px 0;
-            font-size: 14px;
-            font-weight: 600;
-            color: rgba(255, 255, 255, 0.8);
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-          }
-
-          .filter-toggles {
-            display: flex;
-            flex-direction: column;
-            gap: 12px;
-          }
-
-          .filter-toggle {
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            cursor: pointer;
-            padding: 8px 0;
-            transition: all 0.2s ease;
-          }
-
-          .filter-toggle:hover {
-            background: rgba(134, 88, 255, 0.05);
-            border-radius: 8px;
-            padding: 8px 8px;
-            margin: 0 -8px;
-          }
-
-          .filter-toggle input[type="checkbox"] {
-            display: none;
-          }
-
-          .toggle-slider {
-            position: relative;
-            width: 40px;
-            height: 20px;
-            background: rgba(255, 255, 255, 0.2);
-            border-radius: 10px;
-            transition: all 0.3s ease;
-            flex-shrink: 0;
-          }
-
-          .toggle-slider:before {
-            content: '';
-            position: absolute;
-            top: 2px;
-            left: 2px;
-            width: 16px;
-            height: 16px;
-            background: white;
-            border-radius: 50%;
-            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-          }
-
-          .filter-toggle input:checked + .toggle-slider {
-            background: rgba(134, 88, 255, 0.8);
-          }
-
-          .filter-toggle input:checked + .toggle-slider:before {
-            transform: translateX(20px);
-            background: white;
-          }
-
-          /* Theme-specific toggle colors */
-          .toggle-slider.family:before { background: rgba(255, 105, 135, 0.1); }
-          .filter-toggle input:checked + .toggle-slider.family { background: rgba(255, 105, 135, 0.8); }
-
-          .toggle-slider.travel:before { background: rgba(52, 211, 153, 0.1); }
-          .filter-toggle input:checked + .toggle-slider.travel { background: rgba(52, 211, 153, 0.8); }
-
-          .toggle-slider.recent:before { background: rgba(96, 165, 250, 0.1); }
-          .filter-toggle input:checked + .toggle-slider.recent { background: rgba(96, 165, 250, 0.8); }
-
-          .toggle-slider.special:before { background: rgba(251, 191, 36, 0.1); }
-          .filter-toggle input:checked + .toggle-slider.special { background: rgba(251, 191, 36, 0.8); }
-
-          .toggle-label {
-            flex: 1;
-            color: rgba(255, 255, 255, 0.9);
-            font-size: 14px;
-            font-weight: 500;
-          }
-
-          .toggle-count {
-            background: rgba(134, 88, 255, 0.2);
-            color: rgba(134, 88, 255, 1);
-            padding: 2px 8px;
-          border-radius: 12px;
-            font-size: 12px;
-            font-weight: 600;
-            min-width: 20px;
-            text-align: center;
-          }
-
-          .filter-actions {
-            padding: 20px 24px;
-            display: flex;
-            gap: 12px;
-          }
-
-          .filter-btn {
-            flex: 1;
-            padding: 12px 16px;
-            border: none;
-            border-radius: 8px;
-            font-size: 14px;
-            font-weight: 600;
-            cursor: pointer;
-            transition: all 0.2s ease;
-          }
-
-          .filter-btn.secondary {
-            background: rgba(255, 255, 255, 0.1);
-            color: rgba(255, 255, 255, 0.8);
-          }
-
-          .filter-btn.secondary:hover {
-            background: rgba(255, 255, 255, 0.15);
-            color: white;
-          }
-
-          .filter-btn.primary {
-            background: rgba(134, 88, 255, 0.8);
-            color: white;
-          }
-
-          .filter-btn.primary:hover {
-            background: rgba(134, 88, 255, 1);
-            transform: translateY(-1px);
-          }
-        `;
-
-        document.head.appendChild(styles);
-        document.body.appendChild(burgerMenu);
-
-        // Set up burger menu interactions
-        this.setupConstellationMenu();
-
-        // Update counts
-        this.updateConstellationCounts();
-
-        this.constellationUI = burgerMenu;
-      }
-
-      // Set up constellation menu interactions
-      setupConstellationMenu() {
-        const burgerBtn = document.getElementById('constellationBurger');
-        const panel = document.getElementById('constellationPanel');
-
-        // Toggle menu on burger click
-        burgerBtn.addEventListener('click', () => {
-          panel.classList.toggle('active');
-        });
-
-        // Close menu when clicking outside
-        document.addEventListener('click', (e) => {
-          if (!burgerBtn.contains(e.target) && !panel.contains(e.target)) {
-            panel.classList.remove('active');
-          }
-        });
-
-        // Set up filter toggle event listeners
-        const filterInputs = panel.querySelectorAll('input[type="checkbox"]');
-        filterInputs.forEach(input => {
-          input.addEventListener('change', (e) => {
-            const filterType = e.target.id.replace('filter-', '');
-            this.toggleConstellationFilter(filterType, e.target.checked);
-          });
-        });
-
-        // Set up action button event listeners
-        document.getElementById('reset-filters-btn').addEventListener('click', () => {
-          this.resetConstellationFilters();
-        });
-
-        document.getElementById('apply-filters-btn').addEventListener('click', () => {
-          this.hideConstellationMenu();
-        });
-      }
-
-      // Toggle constellation filter and update display
-      toggleConstellationFilter(filterType, enabled) {
-        this.constellationFilters[filterType] = enabled;
-
-        // Apply filters with smooth animation
-        this.applyConstellationFilters();
-      }
-
-      // Apply constellation filters with smooth animations
-      applyConstellationFilters() {
-        const nodes = document.querySelectorAll('.memory-node, .person-node');
-
-        nodes.forEach(node => {
-          const nodeType = node.classList.contains('memory-node') ? 'memory' : 'person';
-          const theme = node.dataset.theme || 'recent';
-
-          let shouldShow = false;
-
-          // Check if node type is enabled
-          if (nodeType === 'memory' && this.constellationFilters.memories) {
-            // Check if memory theme is enabled
-            shouldShow = this.constellationFilters[theme];
-          } else if (nodeType === 'person' && this.constellationFilters.people) {
-            shouldShow = true;
-          }
-
-          // Smooth animation for show/hide
-          if (shouldShow && node.style.display === 'none') {
-            // Show with fade in
-            node.style.display = 'block';
-            node.style.opacity = '0';
-            node.style.transform = 'scale(0.8)';
-
-            requestAnimationFrame(() => {
-              node.style.transition = 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)';
-              node.style.opacity = '1';
-              node.style.transform = 'scale(1)';
-            });
-          } else if (!shouldShow && node.style.display !== 'none') {
-            // Hide with fade out
-            node.style.transition = 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)';
-            node.style.opacity = '0';
-            node.style.transform = 'scale(0.8)';
-
-            setTimeout(() => {
-              node.style.display = 'none';
-            }, 300);
-          }
-        });
-
-        // Neural connections now update automatically in animation loop based on node visibility
-      }
-
-      // Neural connections now handled automatically in main animation loop
-
-      // Update constellation counts in the menu
-      updateConstellationCounts() {
-        // Count memories by theme
-        const themeCounts = {
-          family: 0,
-          travel: 0,
-          recent: 0,
-          special: 0
-        };
-
-        Object.keys(this.constellationMemories || {}).forEach(theme => {
-          themeCounts[theme] = (this.constellationMemories[theme] || []).length;
-        });
-
-        // Count people
-        const peopleCount = this.constellationPeople ? this.constellationPeople.length : 0;
-        const totalMemories = Object.values(themeCounts).reduce((sum, count) => sum + count, 0);
-
-        // Update count displays
-        const updateCount = (id, count) => {
-          const element = document.getElementById(id);
-          if (element) element.textContent = count;
-        };
-
-        updateCount('count-memories', totalMemories);
-        updateCount('count-people', peopleCount);
-        updateCount('count-family', themeCounts.family);
-        updateCount('count-travel', themeCounts.travel);
-        updateCount('count-recent', themeCounts.recent);
-        updateCount('count-special', themeCounts.special);
-      }
-
-      // Reset all constellation filters
-      resetConstellationFilters() {
-        // Reset all filters to true
-        this.constellationFilters = {
-          memories: true,
-          people: true,
-          family: true,
-          travel: true,
-          recent: true,
-          special: true
-        };
-
-        // Update checkboxes
-        const checkboxes = document.querySelectorAll('#constellationPanel input[type="checkbox"]');
-        checkboxes.forEach(checkbox => {
-          checkbox.checked = true;
-        });
-
-        // Apply filters
-        this.applyConstellationFilters();
-
-      }
-
-      // Hide constellation menu
-      hideConstellationMenu() {
-        const panel = document.getElementById('constellationPanel');
-        if (panel) {
-          panel.classList.remove('active');
-        }
-      }
-
-      // Removed fadeOutMemoryNodes and fadeInMemoryNodes - no longer needed since constellation mode exits to main dashboard
-
-      // Completely clear all memory nodes from DOM (prevents duplicates)
-      clearAllMemoryNodesFromDOM() {
-
-        // Remove all memory-node, person-node, and create-memory-node elements (including orphaned ones)
-        const existingMemoryNodes = document.querySelectorAll('.memory-node, .create-memory-node, .person-node');
-        existingMemoryNodes.forEach(node => {
-
-          node.remove();
-        });
-
-        // Clear ONLY memory nodes from the nodes array (preserve radial menu items)
-        if (this.nodes) {
-          this.nodes.forEach(node => {
-            if (node.element && node.element.parentNode) {
-              // Only remove if it's a constellation node, NOT a radial menu item
-              if (node.element.classList.contains('memory-node') ||
-                  node.element.classList.contains('create-memory-node') ||
-                  node.element.classList.contains('person-node')) {
-
-                node.element.remove();
-              } else {
-
-              }
-            }
-          });
-          // Filter out only the constellation nodes, keep radial items
-          this.nodes = this.nodes.filter(node =>
-            !node.element.classList.contains('memory-node') &&
-            !node.element.classList.contains('create-memory-node') &&
-            !node.element.classList.contains('person-node')
-          );
-        }
-
-        // Reset central node
-        this.centralNode = null;
-
-      }
-
-      // Exit constellation mode
-      exitMemoryConstellation() {
-
-        this.isConstellationMode = false;
-
-        // PERSISTENCE: Clear constellation state
-        localStorage.removeItem('emmaConstellationActive');
-
-        // Stop neural animation (EXACT same as main menu)
-        this.isMenuOpen = false;
-        if (this.neuralAnimationId) {
-          cancelAnimationFrame(this.neuralAnimationId);
-          this.neuralCtx.clearRect(0, 0, this.neuralCanvas.width, this.neuralCanvas.height);
-        }
-
-        // Remove constellation-active class to restore UI
-        document.body.classList.remove('constellation-active');
-        document.body.classList.remove('menu-active');
-        this.radialMenu.classList.remove('active');
-
-        // Restore central orb size
-        this.restoreCentralOrb();
-
-        // Remove constellation UI
-        if (this.constellationUI) {
-          this.constellationUI.remove();
-          this.constellationUI = null;
-        }
-
-        // CRITICAL: Use thorough DOM cleanup to prevent duplicates
-        this.clearAllMemoryNodesFromDOM();
-
-        // Clear animation
-        if (this.neuralAnimationId) {
-          cancelAnimationFrame(this.neuralAnimationId);
-          this.neuralCtx.clearRect(0, 0, this.neuralCanvas.width, this.neuralCanvas.height);
-        }
-
-        // Reset nodes
-        this.nodes = [];
-
-        // Hide radial menu
-        this.radialMenu.classList.remove('active');
-        this.isMenuOpen = false;
-
-        // Reset radial menu items to default state
-        const radialItems = this.radialMenu.querySelectorAll('.radial-item');
-
-        radialItems.forEach((item, i) => {
-
-          item.style.opacity = '0';
-          item.style.transform = 'scale(0)';
-          // CRITICAL: Reset positioning to default
-          item.style.left = '';
-          item.style.top = '';
-          item.style.animationPlayState = 'running';
-        });
-      }
-
-      // Sanitize title to remove base64 or corrupted data
-      sanitizeTitle(title) {
-        if (!title || typeof title !== 'string') return 'Untitled Memory';
-
-        // Check if it looks like base64 or corrupted data
-        if (title.length > 50 || /^[A-Za-z0-9+\/=]{20,}$/.test(title)) {
-          return 'Memory Capsule';
-        }
-
-        // Remove any non-printable characters and limit length
-        const cleaned = title.replace(/[^\x20-\x7E]/g, '').trim();
-        return cleaned.length > 0 ? cleaned.substring(0, 50) : 'Untitled Memory';
-      }
-
-      // Open elegant memory dialog with media slideshow
-      openMemoryDialog(memory) {
-
-        // Create memory dialog modal
-        const memoryDialog = document.createElement('div');
-        memoryDialog.className = 'memory-dialog-overlay';
-
-        // FIXED: Better date handling for extension data
-        const memoryDate = memory.created || memory.date || memory.timestamp;
-        const formattedDate = memoryDate ? new Date(memoryDate).toLocaleDateString('en-US', {
-          weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'
-        }) : 'Unknown date';
-
-        // FIXED: Better title extraction
-        const memoryTitle = memory.metadata?.title || memory.title || memory.subject || memory.summary || 'Untitled Memory';
-
-        // FIXED: Better content extraction
-        const memoryContent = memory.content || memory.description || memory.details || 'This precious memory is stored in your vault...';
-
-        // FIXED: Handle attachments from extension
-        const mediaItems = memory.attachments || memory.mediaItems || [];
-
-        // FIXED: Better thumbnail handling
-        const thumbnail = memory.thumbnail ||
-                          (mediaItems.length > 0 && mediaItems[0].url ? mediaItems[0].url : null) ||
-                          this.generateMemoryThumbnail(memory.category || memory.theme || 'special');
-
-        // Style the overlay
-        memoryDialog.style.cssText = `
-          position: fixed;
-          top: 0;
-          left: 0;
-          right: 0;
-          bottom: 0;
-          background: rgba(0, 0, 0, 0.8);
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          z-index: 10000;
-          opacity: 0;
-          transition: opacity 0.3s ease;
-        `;
-
-        memoryDialog.innerHTML = `
-          <div class="memory-dialog" style="
-            background: linear-gradient(135deg, rgba(15, 15, 25, 0.98), rgba(25, 25, 35, 0.98));
-            backdrop-filter: blur(30px);
-            border: 1px solid rgba(134, 88, 255, 0.4);
-            border-radius: 24px;
-            max-width: 700px;
-            width: 90%;
-            max-height: 85vh;
-            overflow: hidden;
-            box-shadow:
-              0 32px 80px rgba(0, 0, 0, 0.6),
-              0 0 0 1px rgba(134, 88, 255, 0.2),
-              inset 0 1px 0 rgba(255, 255, 255, 0.1);
-            transform: scale(0.9);
-            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-            position: relative;
-          ">
-            <!-- Emma Branded Header -->
-            <div class="memory-dialog-header" style="
-              padding: 32px 40px 24px 40px;
-              background: linear-gradient(135deg, rgba(134, 88, 255, 0.15), rgba(240, 147, 251, 0.15));
-              border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-              position: relative;
-              overflow: hidden;
-            ">
-              <!-- Clean Background -->
-              <div style="
-                position: absolute;
-                top: 0;
-                left: 0;
-                right: 0;
-                bottom: 0;
-                background: rgba(134, 88, 255, 0.02);
-                opacity: 0.5;
-              "></div>
-
-              <div style="position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-start;">
-                <!-- Left: Title and Info -->
-                <div style="display: flex; align-items: center; gap: 16px; flex: 1;">
-                  <div style="
-                    width: 48px;
-                    height: 48px;
-                    border-radius: 50%;
-                    background: linear-gradient(135deg, rgba(134, 88, 255, 0.3), rgba(240, 147, 251, 0.3));
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    font-size: 20px;
-                    border: 2px solid rgba(134, 88, 255, 0.5);
-                    box-shadow: 0 8px 32px rgba(134, 88, 255, 0.3);
-                  ">💝</div>
-                  <div>
-                    <h2 style="color: white; margin: 0; font-size: 24px; font-weight: 700; text-shadow: 0 2px 8px rgba(0,0,0,0.5);">
-                      ${this.sanitizeTitle(memoryTitle)}
-                    </h2>
-                    <div style="color: rgba(255, 255, 255, 0.7); font-size: 14px; margin-top: 4px;">
-                      <span style="
-                        background: rgba(134, 88, 255, 0.2);
-                        padding: 4px 12px;
-                        border-radius: 16px;
-                        font-size: 12px;
-                        border: 1px solid rgba(134, 88, 255, 0.3);
-                      ">📅 ${formattedDate}</span>
-                      ${memory.category ? ` <span style="
-                        background: rgba(240, 147, 251, 0.2);
-                        padding: 4px 12px;
-                        border-radius: 16px;
-                        font-size: 12px;
-                        border: 1px solid rgba(240, 147, 251, 0.3);
-                        margin-left: 8px;
-                        text-transform: capitalize;
-                      ">✨ ${memory.category}</span>` : ''}
-                    </div>
-                  </div>
-                </div>
-
-                <!-- Right: People Avatars + Close Button -->
-                <div style="display: flex; align-items: flex-start; gap: 12px;">
-                  ${(() => {
-                    const people = memory.metadata?.people || memory.people || [];
-                    if (!people || people.length === 0) return '';
-
-                    // Get people data from vault to resolve IDs to names/avatars
-                    let resolvedPeople = [];
-                    try {
-                      // Try to get people from current vault data
-                      if (window.emmaWebVault && window.emmaWebVault.vaultData) {
-                        const vaultPeople = window.emmaWebVault.vaultData.content?.people || {};
-                        const vaultMedia = window.emmaWebVault.vaultData.content?.media || {};
-
-                        resolvedPeople = people.slice(0, 4).map(personId => { // Limit to 4 people in header
-                          const person = vaultPeople[personId];
-                          if (person) {
-                            // Resolve avatar from media if available
-                            let avatarUrl = person.avatarUrl;
-                            if (!avatarUrl && person.avatarId && vaultMedia[person.avatarId]) {
-                              const mediaItem = vaultMedia[person.avatarId];
-                              avatarUrl = mediaItem.data.startsWith('data:')
-                                ? mediaItem.data
-                                : `data:${mediaItem.type};base64,${mediaItem.data}`;
-                            }
-
-                            return {
-                              id: personId,
-                              name: person.name || 'Unknown Person',
-                              firstName: (person.name || 'Unknown').split(' ')[0],
-                              avatarUrl: avatarUrl
-                            };
-                          }
-                          return null;
-                        }).filter(Boolean);
-                      }
-                    } catch (error) {
-                      console.warn('⚠️ Failed to resolve people data for header:', error);
-                    }
-
-                    if (resolvedPeople.length === 0) return '';
-
-                    return `
-                      <div style="display: flex; align-items: center; gap: 8px; margin-right: 8px;">
-                        ${resolvedPeople.map(person => {
-                          const initials = person.firstName.charAt(0).toUpperCase();
-
-                          return `
-                            <div style="
-                              display: flex;
-                              flex-direction: column;
-                              align-items: center;
-                              gap: 4px;
-                              cursor: pointer;
-                              transition: all 0.3s ease;
-                            " onclick="dashboard.openPersonDialog('${person.id}')" onmouseover="
-                              this.style.transform='translateY(-2px)';
-                            " onmouseout="
-                              this.style.transform='translateY(0)';
-                            ">
-                              <div style="
-                                width: 36px;
-                                height: 36px;
-                                border-radius: 50%;
-                                background: ${person.avatarUrl ? `url('${person.avatarUrl}')` : 'linear-gradient(135deg, rgba(240, 147, 251, 0.5), rgba(134, 88, 255, 0.5))'};
-                                background-size: cover;
-                                background-position: center;
-                                display: flex;
-                                align-items: center;
-                                justify-content: center;
-                                font-size: 14px;
-                                font-weight: 700;
-                                color: white;
-                                border: 2px solid rgba(255, 255, 255, 0.3);
-                                text-shadow: 0 1px 2px rgba(0,0,0,0.5);
-                                box-shadow: 0 4px 16px rgba(240, 147, 251, 0.3);
-                              ">${person.avatarUrl ? '' : initials}</div>
-                              <div style="
-                                color: rgba(255, 255, 255, 0.9);
-                                font-size: 10px;
-                                font-weight: 600;
-                                text-align: center;
-                                max-width: 40px;
-                                overflow: hidden;
-                                text-overflow: ellipsis;
-                                white-space: nowrap;
-                              ">${person.firstName}</div>
-                            </div>
-                          `;
-                        }).join('')}
-                        ${people.length > 4 ? `
-                          <div style="
-                            display: flex;
-                            flex-direction: column;
-                            align-items: center;
-                            gap: 4px;
-                          ">
-                            <div style="
-                              width: 36px;
-                              height: 36px;
-                              border-radius: 50%;
-                              background: rgba(134, 88, 255, 0.2);
-                              border: 2px dashed rgba(134, 88, 255, 0.5);
-                              display: flex;
-                              align-items: center;
-                              justify-content: center;
-                              font-size: 12px;
-                              font-weight: 700;
-                              color: rgba(255, 255, 255, 0.8);
-                            ">+${people.length - 4}</div>
-                            <div style="
-                              color: rgba(255, 255, 255, 0.7);
-                              font-size: 9px;
-                              font-weight: 600;
-                            ">more</div>
-                          </div>
-                        ` : ''}
-                      </div>
-                    `;
-                  })()}
-
-                  <button onclick="dashboard.closeMemoryDialog()" style="
-                    background: rgba(255, 255, 255, 0.1);
-                    border: 1px solid rgba(255, 255, 255, 0.2);
-                    color: rgba(255, 255, 255, 0.8);
-                    font-size: 18px;
-                    cursor: pointer;
-                    padding: 10px;
-                    border-radius: 50%;
-                    width: 40px;
-                    height: 40px;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    transition: all 0.3s ease;
-                    backdrop-filter: blur(10px);
-                  " onmouseover="
-                    this.style.background='rgba(255, 255, 255, 0.15)';
-                    this.style.color='white';
-                    this.style.transform='scale(1.1)';
-                  " onmouseout="
-                    this.style.background='rgba(255, 255, 255, 0.1)';
-                    this.style.color='rgba(255, 255, 255, 0.8)';
-                    this.style.transform='scale(1)';
-                  ">✕</button>
-                </div>
-              </div>
-            </div>
-
-            <!-- Content Area -->
-            <div class="memory-content" style="
-              padding: 32px 40px;
-              overflow-y: auto;
-              max-height: calc(85vh - 140px);
-            ">
-
-              <!-- Single Content Box - Fit to Content -->
-              <div class="memory-description" style="
-                color: rgba(255, 255, 255, 0.95);
-                line-height: 1.6;
-                margin-bottom: 24px;
-                font-size: 15px;
-                background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
-                padding: 20px;
-                border-radius: 12px;
-                border-left: 4px solid rgba(134, 88, 255, 0.6);
-                backdrop-filter: blur(10px);
-                box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
-                display: inline-block;
-                min-width: 100%;
-                box-sizing: border-box;
-              ">
-                ${memoryContent}
-              </div>
-
-              ${(() => {
-                const tags = memory.metadata?.tags || memory.tags || [];
-                return tags && tags.length > 0 ? `
-                  <div class="memory-tags" style="margin-bottom: 32px;">
-                    <div style="
-                      color: rgba(255, 255, 255, 0.7);
-                      font-size: 15px;
-                      margin-bottom: 16px;
-                      font-weight: 600;
-                      display: flex;
-                      align-items: center;
-                      gap: 8px;
-                    ">
-                      <span style="font-size: 18px;">🏷️</span>
-                      Tags
-                    </div>
-                    <div style="display: flex; gap: 12px; flex-wrap: wrap;">
-                      ${tags.map(tag => `
-                        <span style="
-                          background: linear-gradient(135deg, rgba(134, 88, 255, 0.25), rgba(240, 147, 251, 0.25));
-                          color: rgba(255, 255, 255, 0.95);
-                          padding: 8px 16px;
-                          border-radius: 20px;
-                          font-size: 13px;
-                          font-weight: 500;
-                          border: 1px solid rgba(134, 88, 255, 0.4);
-                          backdrop-filter: blur(10px);
-                          box-shadow: 0 4px 16px rgba(134, 88, 255, 0.2);
-                        ">#${tag}</span>
-                      `).join('')}
-                    </div>
-                  </div>
-                ` : '';
-              })()}
-
-              ${mediaItems.length > 0 ? `
-                <div class="memory-media" style="margin-bottom: 24px;">
-                  <div style="
-                    color: rgba(255, 255, 255, 0.7);
-                    font-size: 15px;
-                    margin-bottom: 20px;
-                    font-weight: 600;
-                    display: flex;
-                    align-items: center;
-                    gap: 8px;
-                  ">
-                    <span style="font-size: 18px;">🎬</span>
-                    Media Gallery
-                    <span style="
-                      background: rgba(134, 88, 255, 0.2);
-                      color: rgba(255, 255, 255, 0.8);
-                      padding: 4px 10px;
-                      border-radius: 12px;
-                      font-size: 12px;
-                      font-weight: 500;
-                    ">${mediaItems.length} ${mediaItems.length === 1 ? 'item' : 'items'}</span>
-                  </div>
-
-                  <!-- Emma Branded Media Grid - 2 Columns -->
-                  <div style="
-                    display: grid;
-                    grid-template-columns: 1fr 1fr;
-                    gap: 24px;
-                    padding: 24px;
-                    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
-                    border-radius: 20px;
-                    border: 1px solid rgba(255, 255, 255, 0.1);
-                    backdrop-filter: blur(15px);
-                    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
-                  ">
-                    ${mediaItems.map((item, index) => {
-                      const hasImage = item.dataUrl || item.url;
-                      const imageUrl = item.dataUrl || item.url;
-                      const isImage = (item.type || '').startsWith('image') || hasImage;
-                      const fileName = item.name || `Image ${index + 1}`;
-
-                      return `
-                        <div style="
-                          background: linear-gradient(135deg, rgba(134, 88, 255, 0.12), rgba(240, 147, 251, 0.08));
-                          border: 1px solid rgba(134, 88, 255, 0.25);
-                          border-radius: 20px;
-                          padding: 0;
-                          cursor: pointer;
-                          transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-                          overflow: hidden;
-                          backdrop-filter: blur(20px);
-                          position: relative;
-                          aspect-ratio: 1;
-                          box-shadow: 0 8px 32px rgba(134, 88, 255, 0.15);
-                        "
-                        onmouseover="
-                          this.style.transform='translateY(-6px) scale(1.05)';
-                          this.style.boxShadow='0 24px 64px rgba(134, 88, 255, 0.4), 0 0 0 2px rgba(134, 88, 255, 0.4)';
-                          this.style.borderColor='rgba(134, 88, 255, 0.6)';
-                        "
-                        onmouseout="
-                          this.style.transform='translateY(0) scale(1)';
-                          this.style.boxShadow='0 8px 32px rgba(134, 88, 255, 0.15)';
-                          this.style.borderColor='rgba(134, 88, 255, 0.25)';
-                        "
-                        onclick="window.open('${imageUrl}', '_blank')">
-
-                          ${hasImage ? `
-                            <!-- Image Container -->
-                            <div style="
-                              width: 100%;
-                              height: 100%;
-                              background-image: url('${imageUrl}');
-                              background-size: cover;
-                              background-position: center;
-                              position: relative;
-                              border-radius: 20px;
-                            ">
-                              <!-- Hover Overlay -->
-                              <div style="
-                                position: absolute;
-                                top: 0;
-                                left: 0;
-                                right: 0;
-                                bottom: 0;
-                                background: linear-gradient(135deg, rgba(134, 88, 255, 0.1), rgba(240, 147, 251, 0.1));
-                                opacity: 0;
-                                transition: opacity 0.3s ease;
-                                display: flex;
-                                align-items: center;
-                                justify-content: center;
-                                border-radius: 20px;
-                              " onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='0'">
-                                <div style="
-                                  background: rgba(255, 255, 255, 0.9);
-                                  color: rgba(134, 88, 255, 1);
-                                  padding: 8px 12px;
-                                  border-radius: 12px;
-                                  font-size: 12px;
-                                  font-weight: 600;
-                                  backdrop-filter: blur(10px);
-                                  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
-                                ">🔍 View Full Size</div>
-                              </div>
-
-                            </div>
-                          ` : `
-                            <!-- Non-Image File -->
-                            <div style="
-                              height: 100%;
-                              display: flex;
-                              flex-direction: column;
-                              align-items: center;
-                              justify-content: center;
-                              background: linear-gradient(135deg, rgba(134, 88, 255, 0.15), rgba(240, 147, 251, 0.1));
-                              padding: 24px;
-                              border-radius: 20px;
-                            ">
-                              <div style="
-                                font-size: 48px;
-                                margin-bottom: 16px;
-                                filter: drop-shadow(0 4px 8px rgba(134, 88, 255, 0.3));
-                              ">${isImage ? '🖼️' : '📄'}</div>
-                              <div style="
-                                font-size: 13px;
-                                font-weight: 600;
-                                color: rgba(255, 255, 255, 0.9);
-                                text-align: center;
-                                line-height: 1.4;
-                                margin-bottom: 12px;
-                                overflow: hidden;
-                                text-overflow: ellipsis;
-                                white-space: nowrap;
-                                width: 100%;
-                              ">${fileName}</div>
-                              <div style="
-                                font-size: 11px;
-                                color: rgba(255, 255, 255, 0.6);
-                                background: rgba(0, 0, 0, 0.3);
-                                padding: 6px 12px;
-                                border-radius: 12px;
-                                backdrop-filter: blur(5px);
-                              ">${((item.size || 0) / 1024 / 1024).toFixed(1)} MB</div>
-                            </div>
-                          `}
-                        </div>
-                      `;
-                    }).join('')}
-                  </div>
-                </div>
-              ` : ''}
-
-            </div>
-
-            <!-- Emma Branded Actions -->
-            <div class="memory-actions" style="
-              padding: 24px 40px 32px 40px;
-              border-top: 1px solid rgba(255, 255, 255, 0.1);
-              background: linear-gradient(135deg, rgba(134, 88, 255, 0.05), rgba(240, 147, 251, 0.05));
-              display: flex;
-              gap: 16px;
-              justify-content: center;
-            ">
-              <button onclick="dashboard.shareMemory('${memory.id}')" style="
-                padding: 14px 28px;
-                border: 1px solid rgba(134, 88, 255, 0.4);
-                background: linear-gradient(135deg, rgba(134, 88, 255, 0.1), rgba(240, 147, 251, 0.1));
-                color: rgba(255, 255, 255, 0.9);
-                border-radius: 16px;
-                cursor: pointer;
-                font-size: 14px;
-                font-weight: 600;
-                transition: all 0.3s ease;
-                backdrop-filter: blur(10px);
-                display: flex;
-                align-items: center;
-                gap: 8px;
-              " onmouseover="
-                this.style.background='linear-gradient(135deg, rgba(134, 88, 255, 0.2), rgba(240, 147, 251, 0.2))';
-                this.style.transform='translateY(-2px)';
-                this.style.boxShadow='0 8px 32px rgba(134, 88, 255, 0.3)';
-              " onmouseout="
-                this.style.background='linear-gradient(135deg, rgba(134, 88, 255, 0.1), rgba(240, 147, 251, 0.1))';
-                this.style.transform='translateY(0)';
-                this.style.boxShadow='none';
-              ">
-                <span>📤</span>
-                Share Memory
-              </button>
-
-              <button onclick="window.location.href='pages/gallery.html#${memory.id}'" style="
-                padding: 14px 28px;
-                border: none;
-                background: linear-gradient(135deg, rgba(134, 88, 255, 0.8), rgba(240, 147, 251, 0.8));
-                color: white;
-                border-radius: 16px;
-                cursor: pointer;
-                font-size: 14px;
-                font-weight: 700;
-                transition: all 0.3s ease;
-                backdrop-filter: blur(10px);
-                display: flex;
-                align-items: center;
-                gap: 8px;
-                box-shadow: 0 8px 32px rgba(134, 88, 255, 0.4);
-              " onmouseover="
-                this.style.transform='translateY(-3px) scale(1.02)';
-                this.style.boxShadow='0 16px 48px rgba(134, 88, 255, 0.6)';
-              " onmouseout="
-                this.style.transform='translateY(0) scale(1)';
-                this.style.boxShadow='0 8px 32px rgba(134, 88, 255, 0.4)';
-              ">
-                <span>✏️</span>
-                Edit in Gallery
-              </button>
-            </div>
-          </div>
-        `;
-
-        // Style the dialog
-        memoryDialog.style.cssText = `
-          position: fixed;
-          top: 0;
-          left: 0;
-          right: 0;
-          bottom: 0;
-          background: rgba(0, 0, 0, 0.8);
-          backdrop-filter: blur(10px);
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          z-index: 10000;
-          opacity: 0;
-          transition: opacity 0.3s ease;
-        `;
-
-        document.body.appendChild(memoryDialog);
-        this.currentMemoryDialog = memoryDialog;
-
-        // Animate in
-        requestAnimationFrame(() => {
-          memoryDialog.style.opacity = '1';
-          const dialogEl = memoryDialog.querySelector('.memory-dialog');
-          if (dialogEl) {
-            dialogEl.style.transform = 'scale(1)';
-          }
-        });
-
-        // Close on outside click
-        memoryDialog.addEventListener('click', (e) => {
-          if (e.target === memoryDialog) {
-            this.closeMemoryDialog();
-          }
-        });
-      }
-
-      // Close memory dialog
-      closeMemoryDialog() {
-        if (this.currentMemoryDialog) {
-          this.currentMemoryDialog.style.opacity = '0';
-          setTimeout(() => {
-            if (this.currentMemoryDialog) {
-              this.currentMemoryDialog.remove();
-              this.currentMemoryDialog = null;
-            }
-          }, 300);
-        }
-      }
-
-      // Open person dialog from memory
-      openPersonDialog(personId) {
-
-        // Navigate to people page with person selected
-        window.location.href = `pages/people-emma.html?person=${personId}`;
-      }
-
-      // Memory dialog slideshow controls
-      prevSlide() {
-
-        // Demo functionality - would implement real slideshow
-      }
-
-      nextSlide() {
-
-        // Demo functionality - would implement real slideshow
-      }
-
-      shareMemory(memoryId) {
-
-        this.showToast('📤 Memory shared!', 'success');
-      }
-
-      editMemory(memoryId) {
-
-        this.showToast('✏️ Opening memory editor...', 'info');
-      }
-
-      // Filter constellation by theme
-      filterByTheme(theme) {
-
-        this.nodes.forEach(node => {
-          if (node.theme === theme) {
-            node.element.style.opacity = '1';
-            node.element.style.transform = 'scale(1)';
-          } else {
-            node.element.style.opacity = '0.3';
-            node.element.style.transform = 'scale(0.8)';
-          }
-        });
-      }
-
-      showToast(message, type = 'info') {
-        const toast = document.createElement('div');
-        toast.className = `toast ${type}`;
-        const span = document.createElement('span');
-        span.textContent = message; // Safe - prevents HTML injection
-        toast.appendChild(span);
-        document.body.appendChild(toast);
-
-        setTimeout(() => toast.classList.add('show'), 10);
-
-        setTimeout(() => {
-          toast.classList.remove('show');
-          setTimeout(() => toast.remove(), 400);
-        }, 3000);
-      }
-    }
-
-    // Initialize dashboard
-    document.addEventListener('DOMContentLoaded', () => {
-      window.emmaDashboard = new EmmaDashboard();
-
-      // Setup vault modal event listeners
-      const dashboard = window.emmaDashboard;
-
-      // Close button
-      document.getElementById('close-vault-modal').addEventListener('click', () => {
-        dashboard.closeVaultModal();
-      });
-
-      // Click outside to close
-      document.getElementById('vault-modal').addEventListener('click', (e) => {
-        if (e.target.id === 'vault-modal') {
-          dashboard.closeVaultModal();
-        }
-      });
-
-      // Unlock form handlers
-      document.getElementById('unlock-btn').addEventListener('click', () => {
-        dashboard.unlockVault();
-      });
-
-      document.getElementById('cancel-unlock-btn').addEventListener('click', () => {
-        dashboard.hideUnlockForm();
-      });
-
-      // Create vault button handler
-      document.getElementById('create-vault-btn').addEventListener('click', async () => {
-
-        try {
-          if (window.emmaAPI && window.emmaAPI.vault) {
-            const st = await window.emmaAPI.vault.status();
-            if (st && st.initialized) {
-
-              dashboard.showUnlockForm();
-              return;
-            }
-          }
-        } catch {}
-        // Load welcome page for vault setup
-        window.location.assign('pages/welcome.html');
-      });
-
-      // Password input enter key
-      document.getElementById('vault-password').addEventListener('keypress', (e) => {
-        if (e.key === 'Enter') {
-          dashboard.unlockVault();
-        }
-      });
-
-      // QR Code handlers
-      document.getElementById('generate-vault-qr-dashboard').addEventListener('click', () => {
-        dashboard.showToast('📱 Vault QR generation coming soon!', 'info');
-      });
-
-      document.getElementById('open-qr-scanner-dashboard').addEventListener('click', () => {
-        dashboard.showToast('📷 QR scanner coming soon!', 'info');
-      });
-
-      // Escape key to close vault modal
-      document.addEventListener('keydown', (e) => {
-        if (e.key === 'Escape') {
-          const modal = document.getElementById('vault-modal');
-          if (modal.classList.contains('show')) {
-            dashboard.closeVaultModal();
-          }
-        }
-      });
-
-      // Vault status is managed by WebVaultStatus - don't override here!
-
-        // PERSISTENCE: Check if constellation was active before refresh
-        const constellationWasActive = localStorage.getItem('emmaConstellationActive') === 'true';
-        if (constellationWasActive) {
-
-          setTimeout(() => {
-            if (window.emmaDashboard && window.emmaDashboard.enterMemoryConstellation) {
-              window.emmaDashboard.enterMemoryConstellation();
-            }
-          }, 1000); // Wait for dashboard to fully initialize
-        }
-
-      // CRITICAL: Initialize vault objects AFTER all scripts load
-      setTimeout(() => {
-
-        // Check what's available        // CRITICAL FIX: Don't create new instances - they already exist from script loading!
-        // The global scripts (emma-web-vault.js, web-vault-status.js) already create instances        // Extension mode - Set up extension-aware vault status
-        if (window.emmaWebVault && window.emmaWebVault.extensionAvailable) {
-
-          // Set dashboard as ready - extension handles all vault operations
-          const statusIcon = document.getElementById('status-icon');
-          const statusTitle = document.getElementById('status-title');
-          const statusDescription = document.getElementById('status-description');
-          const actionBtn = document.getElementById('vault-action-btn');
-
-          if (statusIcon) statusIcon.textContent = '🔗';
-          if (statusTitle) statusTitle.textContent = 'Extension Connected';
-          if (statusDescription) statusDescription.textContent = 'Ready to preserve memories! Extension manages your vault automatically.';
-          if (actionBtn) actionBtn.style.display = 'none'; // Hide action button
-
-          // Listen for extension vault ready event
-          window.addEventListener('extension-vault-ready', (event) => {
-
-            // Force update vault icon to unlocked
-            const vaultIcon = document.querySelector('#vault-node .radial-item-icon');
-            if (vaultIcon) {
-              vaultIcon.textContent = '🔓';
-
-            }
-
-            // Update vault node status
-            setTimeout(() => {
-              if (window.dashboard && window.dashboard.updateVaultNodeStatus) {
-                window.dashboard.updateVaultNodeStatus();
-
-              }
-            }, 100);
-          });
-        } else if (sessionStorage.getItem('emmaVaultActive') === 'true' && window.emmaWebVault && !window.emmaWebVault.isOpen) {
-          (async () => {
-            try {
-
-              const result = await window.emmaWebVault.restoreVaultState();
-              if (result) {                // If in fallback mode, show affordance to re-enable direct save
-                try {
-                  if (window.emmaWebVault && window.emmaWebVault.isFallbackMode && window.emmaWebVault.isFallbackMode()) {
-                    window.emmaWebVault.showDirectSaveAffordance && window.emmaWebVault.showDirectSaveAffordance();
-                  }
-                } catch (_) {}
-              }
-            } catch (error) {
-              console.warn('⚠️ DASHBOARD: Could not restore elegant vault state:', error);
-            }
-          })();
-        } else if (window.emmaWebVault && window.emmaWebVault.isOpen) {
-
-        }
-
-      }, 1000); // Wait 1 second for all scripts to load
-    });
-  </script>
-</body>
-</html>