<!-- client/index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="/assets/Subtract-Cjrii1fl.svg" />
    <!-- Prevent browser zoom on touch devices - we handle zoom ourselves -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover" />

    <!-- Force a dark background & loading placeholder -->
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        background-color: #000000;
        color: #ffffff;
        overflow: hidden;
        /* Prevent ALL default touch behaviors - we handle everything */
        touch-action: none;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        /* Prevent iOS overscroll */
        overscroll-behavior: none;
        -webkit-overflow-scrolling: touch;
      }
      
      /* Prevent zoom on double-tap */
      * {
        touch-action: manipulation;
      }
      
      /* Override for canvas area - completely disable touch actions */
      #root {
        touch-action: none;
      }
      
      #loading-root {
        width: 100vw;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #0b0b0d;
      }
      #loading-root span {
        color: #888;
        font-family: sans-serif;
        font-size: 1.1rem;
      }
    </style>
    <!-- Prevent ALL browser zoom gestures - Canva-like canvas handling -->
    <script>
      (function() {
        // Prevent Safari/iOS gesture events (pinch-to-zoom)
        document.addEventListener('gesturestart', function(e) { e.preventDefault(); }, { passive: false, capture: true });
        document.addEventListener('gesturechange', function(e) { e.preventDefault(); }, { passive: false, capture: true });
        document.addEventListener('gestureend', function(e) { e.preventDefault(); }, { passive: false, capture: true });
        
        // Prevent double-tap zoom
        var lastTap = 0;
        document.addEventListener('touchend', function(e) {
          var now = Date.now();
          if (now - lastTap < 300) { e.preventDefault(); }
          lastTap = now;
        }, { passive: false, capture: true });
        
        // Prevent ctrl+wheel and pinch wheel zoom
        document.addEventListener('wheel', function(e) {
          if (e.ctrlKey || e.metaKey) { e.preventDefault(); }
        }, { passive: false, capture: true });
        
        // Add visual viewport resize listener to detect and reset accidental zooms
        if (window.visualViewport) {
          window.visualViewport.addEventListener('resize', function() {
            if (window.visualViewport.scale !== 1) {
              // Browser zoomed - we don't want this, but can't directly reset
              console.log('Browser zoom detected:', window.visualViewport.scale);
            }
          });
        }
      })();
    </script>
    <title>Geniffy – AI SaaS Platform</title>
    <script type="module" crossorigin src="/assets/index-C8hs9GP7.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/vendor-C8w-UNLI.js">
    <link rel="modulepreload" crossorigin href="/assets/router-DwYIOojB.js">
    <link rel="modulepreload" crossorigin href="/assets/animations-v_Hzqm36.js">
    <link rel="stylesheet" crossorigin href="/assets/index-BV_gUzYG.css">
  </head>
  <body>
    <div id="root">
      <div id="loading-root">
        <span>Loading…</span>
      </div>
    </div>    
    <!-- Portal root for floating UI elements (chat, tools, content cards) -->
    <div id="floating-root"></div>
    <!-- 
      Vite will replace this “/src/main.tsx” reference with a hashed file
      like “/assets/index-ABC123.js” when you run `npm run build`.
      Do NOT change this line manually.
    -->
  </body>
</html>
