
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes, viewport-fit=cover">
    <meta name="theme-color" content="#6A5ACD">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-title" content="MobeeAI">
    <link rel="manifest" href="/manifest.json">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Roboto:wght@400;500;700&family=Open+Sans:wght@400;600;700&family=Lato:wght@400;700&family=Montserrat:wght@400;600;700&family=Poppins:wght@400;500;600;700&family=Raleway:wght@400;600;700&family=Source+Sans+Pro:wght@400;600;700&family=Nunito:wght@400;600;700&family=Oswald:wght@400;600;700&family=Ubuntu:wght@400;500;700&family=Playfair+Display:wght@400;600;700&family=Merriweather:wght@400;700&family=Figtree:wght@400;500;600;700&family=Syne:wght@600;700;800&display=swap" rel="stylesheet">
    <title>MobeeAI</title>
    <script>
      // Set theme on initial load to prevent flashing
      // Check localStorage first, then system preference, default to dark
      const storedTheme = localStorage.getItem('theme');
      if (storedTheme === 'light') {
        document.documentElement.classList.remove('dark');
      } else if (storedTheme === 'dark') {
        document.documentElement.classList.add('dark');
      } else {
        // Default to dark mode if no preference
        document.documentElement.classList.add('dark');
        localStorage.setItem('theme', 'dark');
      }

      const storedAppearance = localStorage.getItem('appearance');
      const onAuth = /\/(login|signup|forgot-password|accept-invite|join)(\/|$)/.test(location.pathname);
      if (!onAuth && (storedAppearance === 'recolor' || storedAppearance === 'chrome' || storedAppearance === 'atmosphere')) {
        document.documentElement.setAttribute('data-appearance', storedAppearance);
      }
      
      // Initialize accent color from localStorage if available
      const storedAccentColor = localStorage.getItem('accentColor');
      if (storedAccentColor) {
        document.documentElement.style.setProperty('--color-primary', storedAccentColor);
        // Calculate hover color (lighten by ~15%)
        const hex = storedAccentColor.replace('#', '');
        const r = parseInt(hex.substring(0, 2), 16);
        const g = parseInt(hex.substring(2, 4), 16);
        const b = parseInt(hex.substring(4, 6), 16);
        document.documentElement.style.setProperty('--accent-rgb', r + ', ' + g + ', ' + b);
        const newR = Math.min(255, Math.round(r * 1.15));
        const newG = Math.min(255, Math.round(g * 1.15));
        const newB = Math.min(255, Math.round(b * 1.15));
        const hoverColor = `#${newR.toString(16).padStart(2, '0')}${newG.toString(16).padStart(2, '0')}${newB.toString(16).padStart(2, '0')}`;
        document.documentElement.style.setProperty('--color-primary-hover', hoverColor);
      }
    </script>
    <style>
        /* Toolbar scrollbar styling - hidden but still scrollable */
        .toolbar-scroll {
            scrollbar-width: none; /* Firefox */
            -ms-overflow-style: none; /* IE and Edge */
        }
        
        .toolbar-scroll::-webkit-scrollbar {
            display: none; /* Chrome, Safari, Opera */
        }
    </style>

<script type="importmap">
{
  "imports": {
    "react-dom/": "https://aistudiocdn.com/react-dom@^19.2.0/",
    "react": "https://aistudiocdn.com/react@^19.2.0",
    "react/": "https://aistudiocdn.com/react@^19.2.0/"
  }
}
</script>
  <script type="module" crossorigin src="/assets/index-BFUQJE4t.js"></script>
  <link rel="modulepreload" crossorigin href="/assets/vendor-csv-ByFIq1Wb.js">
  <link rel="modulepreload" crossorigin href="/assets/vendor-react-Bju3OTS9.js">
  <link rel="modulepreload" crossorigin href="/assets/vendor-router-A_URLU6S.js">
  <link rel="modulepreload" crossorigin href="/assets/vendor-firebase-core-D1eYV2Gw.js">
  <link rel="modulepreload" crossorigin href="/assets/vendor-firebase-auth-DD4d2r3G.js">
  <link rel="modulepreload" crossorigin href="/assets/vendor-firebase-firestore-Dm8WMfth.js">
  <link rel="modulepreload" crossorigin href="/assets/vendor-firebase-storage-CD-onBbO.js">
  <link rel="modulepreload" crossorigin href="/assets/vendor-syntax-DcA9WkBP.js">
  <link rel="modulepreload" crossorigin href="/assets/vendor-tiptap-BtUzKTfz.js">
  <link rel="modulepreload" crossorigin href="/assets/vendor-firebase-messaging-Cyw5ODJU.js">
  <link rel="stylesheet" crossorigin href="/assets/vendor-syntax-BEHUn5zE.css">
  <link rel="stylesheet" crossorigin href="/assets/index-ssGwpDom.css">
</head>
<body class="bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-300 antialiased">
<script>
  // Stale bundle error recovery
  // Detects when old JS bundles return HTML (after deployment) and auto-refreshes
  window.addEventListener('error', function(event) {
    var msg = event.message || '';
    // Detect HTML-as-JS parsing errors (happens when server returns HTML for missing JS files)
    if (msg.indexOf("expected expression") > -1 ||
        msg.indexOf("Unexpected token '<'") > -1 ||
        msg.indexOf("Unexpected token 'const'") > -1) {

      // Prevent infinite refresh loop - only refresh once per 10 seconds
      var lastRefresh = sessionStorage.getItem('bundleErrorRefresh');
      var now = Date.now();
      if (!lastRefresh || (now - parseInt(lastRefresh, 10)) > 10000) {
        sessionStorage.setItem('bundleErrorRefresh', now.toString());
        // Clear all caches and hard refresh
        if (window.caches) {
          caches.keys().then(function(keys) {
            Promise.all(keys.map(function(k) { return caches.delete(k); })).then(function() {
              window.location.href = window.location.pathname + '?v=' + now;
            });
          });
        } else {
          window.location.href = window.location.pathname + '?v=' + now;
        }
      }
    }
  });
</script>
    <div id="root"></div>
<script>
  // Update notification function
  function showUpdateNotification() {
    // Check if notification already shown (avoid spam)
    const dismissedUpdate = localStorage.getItem('updateNotificationDismissed');
    if (dismissedUpdate) {
      const dismissedTime = parseInt(dismissedUpdate, 10);
      const now = Date.now();
      // Clear flag after 24 hours (86400000 ms)
      if (now - dismissedTime < 86400000) {
        return;
      } else {
        localStorage.removeItem('updateNotificationDismissed');
      }
    }
    
    // Create notification banner
    const banner = document.createElement('div');
    banner.id = 'update-notification';
    banner.style.cssText = `
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      background: #6A5ACD;
      color: white;
      padding: 12px 20px;
      text-align: center;
      z-index: 10000;
      box-shadow: 0 2px 8px rgba(0,0,0,0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    `;
    
    banner.innerHTML = `
      <span>✨ A new version is available!</span>
      <button onclick="localStorage.setItem('updateNotificationDismissed', Date.now().toString()); window.location.href = window.location.pathname + '?v=' + Date.now();" style="
        background: white;
        color: #6A5ACD;
        border: none;
        padding: 6px 16px;
        border-radius: 4px;
        cursor: pointer;
        font-weight: bold;
        font-size: 14px;
      ">Refresh Now</button>
      <button onclick="this.parentElement.remove(); localStorage.setItem('updateNotificationDismissed', Date.now().toString());" style="
        background: transparent;
        color: white;
        border: 1px solid white;
        padding: 6px 12px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 14px;
      ">Later</button>
    `;
    
    document.body.insertBefore(banner, document.body.firstChild);
    
    // Auto-dismiss after 30 seconds
    setTimeout(() => {
      if (banner.parentElement) {
        banner.remove();
      }
    }, 30000);
  }

  // Register service worker for PWA (only in production)
  if ('serviceWorker' in navigator && !window.location.hostname.includes('localhost') && window.location.protocol === 'https:') {
    window.addEventListener('load', () => {
      navigator.serviceWorker.register('/sw.js')
        .then((registration) => {
          console.log('SW registered: ', registration);
          
          // Listen for messages from service worker
          navigator.serviceWorker.addEventListener('message', (event) => {
            if (event.data && event.data.type === 'UPDATE_AVAILABLE') {
              showUpdateNotification();
            }
          });
          
          // Check for updates periodically (every 5 minutes)
          setInterval(() => {
            registration.update();
          }, 5 * 60 * 1000);
          
          // Check for updates when page becomes visible
          document.addEventListener('visibilitychange', () => {
            if (!document.hidden) {
              registration.update();
            }
          });
          
          // Listen for new service worker installation
          registration.addEventListener('updatefound', () => {
            const newWorker = registration.installing;
            if (newWorker) {
              newWorker.addEventListener('statechange', () => {
                if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
                  // New service worker ready - show notification
                  showUpdateNotification();
                }
              });
            }
          });
        })
        .catch((registrationError) => {
          console.log('SW registration failed: ', registrationError);
        });
    });
  } else if ('serviceWorker' in navigator && window.location.hostname.includes('localhost')) {
    // Unregister service worker in development
    window.addEventListener('load', () => {
      navigator.serviceWorker.getRegistrations().then((registrations) => {
        registrations.forEach((registration) => {
          registration.unregister();
        });
      });
    });
  }
</script>
</body>
</html>