<!-- Project: Encryption Hub | Version: 1.0.4 -->
<!--
===============================================================================
Encryption Hub – Secure Message, File, and Steganography Application
===============================================================================
Project: Encryption Hub
Version: 1.0.4
Author: MD AZEEM
Website: https://github.com/Azeem117
Release Date: 2025
Modules: Encryption 1.0 → 5.0 (Text, Steganography, File, PDF, Strong Password Generation)
License: GNU General Public License v3.0 (GPL-3.0)
Full License: https://www.gnu.org/licenses/gpl-3.0.en.html
Third-Party Components: pdfmake, PDF.js, Tailwind CSS, Inter Font, Web Crypto API, Custom LSB Steganography
All encryption and steganography operations occur client-side. No data is transmitted to any server.
Report security issues: adwardcollin365@gmail.com
===============================================================================
Used for: Hiding encrypted messages in images

==============================================================================
Feature Highlights
==============================================================================

- AES-GCM encryption with PBKDF2 key derivation
- LSB steganography in PNG/JPG images
- File encryption for text, images, audio, video, and documents
- Password-protected PDF generation with embedded encrypted payloads
- Weak-to-strong password generation (PBKDF2, up to 10,000,000 iterations)
- Responsive, modern UI with progress feedback and error handling

==============================================================================
License & Compliance Notes
==============================================================================

- MIT Components (Tailwind CSS, pdfmake): Include copyright notices and preserve license text.
- Apache 2.0 Components (PDF.js): Preserve copyright, include license, document changes, provide attribution.
- SIL Open Font License (Inter Font): Preserve license and copyright; font name not used for derivatives.
- GPL-3.0 Components (This Project): Source code availability, document changes, maintain same license, preserve copyright.

==============================================================================
Security Notice
==============================================================================

All encryption and steganography operations occur **client-side**.
No data is transmitted to any server. Processing uses standard Web APIs
in the browser to ensure maximum privacy.

Report security issues: adwardcollin365@gmail.com
==============================================================================

==============================================================================
Encryption Hub – Secure Steganography, File Encryption, and Utility Web App
==============================================================================

Project: Encryption Hub
Author: MD AZEEM
Website: https://github.com/Azeem117
License: GNU General Public License v3.0 (GPL-3.0)
Release Date: 2025

==============================================================================
Version History
==============================================================================

- v7.0 (2025): Image Steganography (Stego Core v2, XChaCha20-Poly1305, PBKDF2, PNG only, robust scatter)
- v6.0 (2025): Text to Morse Code Converter (simple, fast, no encryption)
- v5.0 (2024): File Encryption (AES-GCM, PBKDF2, multi-format)
- v4.0 (2024): PDF Encryption (Password-protected PDFs, pdfmake)
- v3.0 (2023): LSB Steganography (JPG/PNG, basic, custom crypto)
- v2.0 (2023): Text Encryption (AES-GCM, PBKDF2)
- v1.0 (2022): Strong Password Generator

==============================================================================
Modules (All Versions)
==============================================================================

- Image Steganography (v3.0, v7.0)
- Text/File Encryption (v2.0, v5.0)
- PDF Encryption (v4.0)
- Text to Morse Code Converter (v6.0)
- Password Generation (v1.0)

==============================================================================
Third-Party Components
==============================================================================

1. Cryptography:
  - libsodium.js: https://github.com/jedisct1/libsodium.js (ISC License)
    Used for: XChaCha20-Poly1305 AEAD, XChaCha20 stream, secure random
  - Web Crypto API: Native browser cryptography
    Used for: PBKDF2 password hashing (KDF)

2. Styling & UI:
  - Tailwind CSS: https://tailwindcss.com/ (MIT License)
  - Inter Font: https://fonts.google.com/specimen/Inter (SIL Open Font License 1.1)

3. PDF & File Handling (other modules):
  - pdfmake, PDF.js (MIT/Apache 2.0)

==============================================================================
Feature Highlights (v7.0)
==============================================================================

- Multi-layered security: Text→Binary→Hex→Base64→Noise→XOR→XChaCha20
- PBKDF2 KDF (100K iterations) for fast password-based key derivation
- Random salt generation for each encryption operation
- XChaCha20-Poly1305 AEAD (libsodium) for encryption & authentication
- LSB steganography in PNG (lossless only, robust scatter)
- Deterministic header scrambling, unbiased permutation
- All crypto and stego operations are 100% client-side
- Modern, responsive UI with progress and error feedback

==============================================================================
Security Notice
==============================================================================

All encryption and steganography operations occur **client-side**.
No data is transmitted to any server. Processing uses only browser APIs and
audited cryptographic libraries for maximum privacy and security.

For security issues, contact: adwardcollin365@gmail.com
==============================================================================
-->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- CSP: Allow cdn.jsdelivr.net for script/connect (WASM) -->
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'self' blob: https://cdn.jsdelivr.net; script-src 'self' 'unsafe-inline' https://cdn.tailwindcss.com https://cdn.jsdelivr.net; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src https://fonts.gstatic.com; img-src 'self' blob: data:; worker-src 'self' blob:;"
    />
    <title>Encryption 7.0</title>
    <link rel="icon" type="image/png" sizes="32x32" href="logo/icon.png" />
    <link rel="icon" type="image/png" sizes="48x48" href="logo/icon.png" />
    <link rel="apple-touch-icon" sizes="180x180" href="logo/icon.png" />
    <link rel="manifest" href="manifest.json" />
    <meta name="theme-color" content="#15151F" />
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
      @import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Inter:wght@400;500;600;700&display=swap");
      
      /* Global Header Styles (Moved from outside HTML structure) */
      .site-header { position: sticky; top:0; z-index:50; width:100%; backdrop-filter: saturate(180%) blur(8px); background-color: rgba(2, 6, 23, 0.7); border-bottom: 1px solid rgba(217,119,6,0.25); }
      .site-header .inner { max-width: 1100px; margin: 0 auto; display:flex; align-items:center; gap:16px; padding:12px 20px; }
      .site-header a { color:#fde68a; text-decoration:none; }
      .site-header a:hover { color:#fef3c7; }
      .brand { display:flex; align-items:center; gap:10px; font-weight:800; }
      .brand img { width:28px; height:28px; border-radius:6px; }
      .nav-links { margin-left:auto; display:flex; gap:16px; }

      /* Existing Body Styles */
      body {
        font-family: "Inter", sans-serif;
        background-color: #020617;
        color: #f8fafc;
      }
      .mono {
        font-family: "JetBrains Mono", monospace;
      }

      .glass-panel {
        background: rgba(10, 10, 12, 0.85);
        backdrop-filter: blur(20px);
        border: 1px solid rgba(168, 85, 247, 0.15);
        box-shadow: 0 0 40px -10px rgba(0, 0, 0, 0.8);
      }
      .input-secure {
        background-color: #0f172a;
        border: 1px solid #1e293b;
        color: #f1f5f9;
        transition: all 0.2s ease;
      }
      .input-secure:focus {
        border-color: #a855f7;
        box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.2);
        outline: none;
      }
      .btn-action {
        background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
        position: relative;
        overflow: hidden;
      }
      .btn-action:disabled {
        filter: grayscale(1) brightness(0.7);
        opacity: 0.5;
        cursor: not-allowed;
      }

      @keyframes scan {
        0% {
          background-position: 0 0;
        }
        100% {
          background-position: 0 20px;
        }
      }
      .scanlines {
        background: repeating-linear-gradient(
          0deg,
          rgba(0, 0, 0, 0) 0px,
          rgba(0, 0, 0, 0) 1px,
          rgba(168, 85, 247, 0.03) 2px,
          rgba(168, 85, 247, 0.03) 3px
        );
        background-size: 100% 4px;
        animation: scan 10s linear infinite;
        pointer-events: none;
      }

      /* Removed strength meter styles as per request */
    </style>
  </head>
  <body
    class="min-h-screen bg-slate-950 relative"
  >
    <!-- Navigation Header -->
    <header class="site-header">
      <div class="inner">
        <a class="brand" href="index.html"><img src="logo/icon.png" alt="Logo"> <span>Encryption Hub</span></a>
        <nav class="nav-links">
          <a href="index.html">Home</a>
          <a href="index.html#modules">Modules</a>
          <a href="README.html">Docs</a>
        </nav>
      </div>
    </header>

    <div class="fixed inset-0 scanlines z-0"></div>

    <!-- Main Content Wrapper to handle centering and padding below the sticky header -->
    <div class="p-4 flex flex-col items-center justify-center min-h-[calc(100vh-60px)] pt-12">
        <div
            class="glass-panel w-full max-w-4xl rounded-2xl p-6 md:p-8 relative z-10"
        >
            <!-- Header -->
            <div
                class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 border-b border-gray-800 pb-6 gap-4"
            >
                <div>
                    <h1
                        class="text-2xl font-bold text-white tracking-tight flex items-center gap-3"
                    >
                        <svg
                            class="w-6 h-6 text-purple-400"
                            fill="none"
                            viewBox="0 0 24 24"
                            stroke="currentColor"
                        >
                            <path
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                stroke-width="2"
                                d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
                            />
                        </svg>
                        Encryption 7.0
                        <span
                            class="text-xs font-mono text-purple-400 border border-purple-900 bg-purple-950/30 px-1.5 py-0.5 rounded"
                            >v9.1</span
                        >
                    </h1>
                    <p class="text-xs text-slate-400 mt-1 font-mono">
                        PBKDF2 (100K) • XChaCha20 • RGB Steganography
                    </p>
                </div>
                <div class="flex gap-4 text-[10px] font-mono text-slate-500">
                    <div id="systemStatus" class="flex items-center gap-1.5">
                        <div
                            class="w-1.5 h-1.5 rounded-full bg-yellow-500 animate-pulse"
                        ></div>
                        INITIALIZING...
                    </div>
                </div>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                <!-- LEFT: Input -->
                <div class="space-y-6">
                    <div class="space-y-2">
                        <label
                            class="text-xs font-bold text-slate-400 uppercase tracking-wider flex justify-between"
                        >
                            <span>Carrier Image</span>
                            <span
                                id="formatBadge"
                                class="hidden text-[10px] bg-slate-800 px-1.5 py-0.5 rounded text-white"
                                >PNG</span
                            >
                        </label>
                        <div class="relative group">
                            <input
                                type="file"
                                id="imageInput"
                                accept="image/png"
                                class="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10"
                                onchange="UI.handleFile(this)"
                            />
                            <div
                                class="input-secure rounded-xl p-4 flex items-center gap-4 group-hover:bg-[#162032] cursor-pointer transition-colors"
                            >
                                <div
                                    class="w-12 h-12 rounded-lg bg-purple-900/20 text-purple-400 flex items-center justify-center border border-purple-500/20 shrink-0 overflow-hidden"
                                >
                                    <img
                                        id="filePreview"
                                        class="w-full h-full object-cover hidden opacity-80"
                                    />
                                    <svg
                                        id="fileIcon"
                                        class="w-6 h-6"
                                        fill="none"
                                        stroke="currentColor"
                                        viewBox="0 0 24 24"
                                    >
                                        <path
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                            stroke-width="2"
                                            d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
                                        ></path>
                                    </svg>
                                </div>
                                <div class="flex-1 min-w-0">
                                    <div
                                        id="fileName"
                                        class="text-sm font-medium truncate text-white"
                                    >
                                        Select Image...
                                    </div>
                                    <div
                                        id="fileInfo"
                                        class="text-[10px] text-slate-500 truncate mono"
                                    >
                                        Supports PNG (lossless only)
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="space-y-2">
                        <div class="flex justify-between items-end">
                            <label
                                class="text-xs font-bold text-slate-400 uppercase tracking-wider"
                                >Payload</label
                            >
                            <span
                                id="payloadStats"
                                class="text-[10px] text-slate-500 font-mono"
                                >0 chars</span
                            >
                        </div>
                        <textarea
                            id="messageInput"
                            rows="6"
                            class="input-secure w-full rounded-xl p-4 text-sm mono resize-none placeholder-slate-600 focus:text-white"
                            placeholder="Enter sensitive data..."
                            oninput="UI.updateStats()"
                        ></textarea>
                    </div>

                    <!-- Removed Pixel Density Dialog Box -->

                </div>

                <!-- RIGHT: Controls -->
                <div class="space-y-6 flex flex-col">
                    <div
                        class="bg-slate-900/30 rounded-xl p-5 border border-slate-800 space-y-4"
                    >
                        <label
                            class="text-xs font-bold text-slate-400 uppercase tracking-wider"
                            >Access Credentials</label
                        >
                        <div class="space-y-2">
                            <div class="relative">
                                <input
                                    type="password"
                                    id="passwordInput"
                                    class="input-secure w-full rounded-lg p-3 pr-10 text-sm"
                                    placeholder="Passphrase"
                                    
                                />
                                <button
                                    onclick="UI.togglePass()"
                                    class="absolute right-3 top-3 text-slate-500 hover:text-white transition-colors"
                                >
                                    <svg
                                        class="w-4 h-4"
                                        fill="none"
                                        viewBox="0 0 24 24"
                                        stroke="currentColor"
                                    >
                                        <path
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                            stroke-width="2"
                                            d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
                                        />
                                        <path
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                            stroke-width="2"
                                            d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
                                        />
                                    </svg>
                                </button>
                            </div>
                            <!-- Removed strength meter div (#strengthMeter) -->
                        </div>
                    </div>

                    <div class="flex-1"></div>

                    <div
                        id="statusArea"
                        class="hidden rounded-lg bg-black border border-slate-800 p-4 font-mono text-xs shadow-inner"
                    >
                        <div class="flex items-center justify-between mb-2">
                            <span id="statusTitle" class="font-bold text-white">IDLE</span>
                            <span id="statusTimer" class="text-slate-600">0ms</span>
                        </div>
                        <p id="statusMsg" class="text-slate-400 mb-3 whitespace-pre-wrap">
                            System ready.
                        </p>
                        <div
                            id="progressContainer"
                            class="hidden w-full h-1 bg-slate-800 rounded-full overflow-hidden mb-2"
                        >
                            <div class="h-full bg-purple-500 w-full animate-pulse"></div>
                        </div>
                        <div
                            id="resultActions"
                            class="hidden flex gap-2 pt-2 border-t border-slate-800"
                        >
                            <button
                                onclick="UI.downloadResult()"
                                class="flex-1 bg-emerald-900/30 border border-emerald-500/30 text-emerald-400 hover:bg-emerald-900/50 py-2 rounded transition font-bold uppercase text-[10px]"
                            >
                                Download PNG
                            </button>
                            <button
                                onclick="UI.copyResult()"
                                class="flex-1 bg-slate-800 border border-slate-700 text-slate-300 hover:bg-slate-700 py-2 rounded transition font-bold uppercase text-[10px]"
                            >
                                Copy Text
                            </button>
                        </div>
                    </div>

                    <div class="grid grid-cols-2 gap-4">
                        <button
                            id="btnEncrypt"
                            onclick="Engine.request('encrypt')"
                            class="btn-action text-white py-4 rounded-xl font-bold text-sm shadow-lg shadow-purple-900/20"
                            disabled
                        >
                            ENCRYPT
                        </button>
                        <button
                            id="btnDecrypt"
                            onclick="Engine.request('decrypt')"
                            class="bg-slate-800 border border-slate-700 hover:bg-slate-700 text-white py-4 rounded-xl font-bold text-sm transition-all"
                            disabled
                        >
                            DECRYPT
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Fixed Footer -->
        <footer class="mt-8 text-center text-xs text-slate-500 py-4 w-full max-w-4xl z-10">
            <p>
                Encryption Hub v1.0.4 (7.0 Stego Core) -
                <a
                  href="https://www.gnu.org/licenses/gpl-3.0.html"
                  class="text-purple-400 hover:underline"
                  >GPLv3 Licensed</a
                >
            </p>
            <p class="text-slate-600 mt-1">Copyright © 2025 Azeem117. All rights reserved.</p>
        </footer>
    </div>

    <!-- WORKER CODE (PBKDF2 with 100K iterations for fast performance) -->
    <script id="worker-code" type="javascript/worker">
      // Hardened worker: audited crypto (libsodium) + PBKDF2 KDF + unbiased scattering.
      // Use libsodium-wrappers-sumo to ensure crypto_stream_xchacha20 is available.
      // Load the official libsodium.js sumo module build (has crypto_stream_xchacha20)
      importScripts('https://cdn.jsdelivr.net/gh/jedisct1/libsodium.js@0.7.11/dist/modules-sumo/libsodium-wrappers.js');

      let sodiumReady = false;
      let sodium;
      (async () => {
        try {
          // libsodium exposes a global `sodium` in workers; wait until it’s ready
          sodium = (typeof self !== 'undefined' && self.sodium) ? self.sodium : (typeof sodium !== 'undefined' ? sodium : undefined);
          if (!sodium) throw new Error('libsodium global not found');
          await sodium.ready;
          sodiumReady = true;
        } catch (e) {
          // Surface a clear error back to the UI if initialization fails
          try { self.postMessage({ status: 'error', msg: 'Failed to initialize crypto: ' + (e && e.message ? e.message : e) }); } catch(_) {}
        }
      })();

      const MAGIC = 0x494D4758; // 'IMGX'
      const VER = 2; // bumped version
      const HEADER_LEN = 96; // Keep legacy length; last 32 bytes are random filler.
      const PBKDF2_ITERATIONS = 100000; // 100K iterations (OWASP recommended, fast and secure)

      self.onmessage = async (e) => {
          const { op, pixels, pass, text } = e.data;
          try {
              await ensureReady();
              if (op === 'encrypt') await encrypt(pixels, pass, text);
              else if (op === 'decrypt') await decrypt(pixels, pass);
          } catch(err) {
              self.postMessage({ status:'error', msg: err.message + "\n" + (err.stack||'') });
          }
      };

      async function ensureReady(){ if(!sodiumReady) { for(let i=0;i<50 && !sodiumReady;i++){ await new Promise(r=>setTimeout(r,100)); } if(!sodiumReady) throw new Error('Crypto init timeout'); } }

      async function deriveKeys(pass, salt){
          try {
              // PBKDF2 with 100K iterations (OWASP recommended - fast and secure)
              const encoder = new TextEncoder();
              const passwordBuffer = encoder.encode(pass);
              
              // Import password as key material
              const keyMaterial = await crypto.subtle.importKey(
                  'raw',
                  passwordBuffer,
                  'PBKDF2',
                  false,
                  ['deriveBits']
              );
              
              // Derive 96 bytes (768 bits) using PBKDF2
              const derivedBits = await crypto.subtle.deriveBits(
                  {
                      name: 'PBKDF2',
                      salt: salt,
                      iterations: PBKDF2_ITERATIONS,
                      hash: 'SHA-256'
                  },
                  keyMaterial,
                  768 // 96 bytes * 8 bits/byte = 768 bits
              );
              
              const keyRaw = new Uint8Array(derivedBits);
              // Split: enc(32) | mask(32) | scatter(32)
              return { enc: keyRaw.slice(0,32), mask: keyRaw.slice(32,64), scat: keyRaw.slice(64,96) };
          } catch (error) {
              throw new Error('Key derivation failed: ' + error.message + '. Ensure you are using a secure context (HTTPS).');
          }
      }

      function buildHeader(salt, nonce, meta, encLen){
          const h = new Uint8Array(HEADER_LEN); const dv = new DataView(h.buffer);
          dv.setUint32(0, MAGIC, true); h.set(salt, 4); h.set(nonce, 20); h.set(meta, 44); dv.setBigUint64(56, encLen, true);
          // Fill remaining (64..95) with random bytes for legacy size / obfuscation
          h.set(crypto.getRandomValues(new Uint8Array(HEADER_LEN - 64)), 64);
          return h;
      }

      function scrambleHeader(header, maskKey){
          // Leave magic (0..3) and salt (4..19) intact for quick presence check.
          const zeroNonce = new Uint8Array(24); // deterministic
          const stream = sodium.crypto_stream_xchacha20(HEADER_LEN, zeroNonce, maskKey);
          for(let i=20;i<HEADER_LEN;i++) header[i] ^= stream[i];
          return header;
      }

      // Multi-layered security preprocessing functions
      function textToBinary(text) {
          return Array.from(new TextEncoder().encode(text))
              .map(byte => byte.toString(2).padStart(8, '0'))
              .join('');
      }

      function binaryToText(binary) {
          const bytes = [];
          for (let i = 0; i < binary.length; i += 8) {
              bytes.push(parseInt(binary.slice(i, i + 8), 2));
          }
          return new TextDecoder().decode(new Uint8Array(bytes));
      }

      function binaryToHex(binary) {
          let hex = '';
          for (let i = 0; i < binary.length; i += 4) {
              hex += parseInt(binary.slice(i, i + 4), 2).toString(16);
          }
          return hex;
      }

      function hexToBinary(hex) {
          return hex.split('').map(h => parseInt(h, 16).toString(2).padStart(4, '0')).join('');
      }

      function base64EncodeCustom(hex) {
          // Convert hex to bytes, then to base64
          const bytes = [];
          for (let i = 0; i < hex.length; i += 2) {
              bytes.push(parseInt(hex.slice(i, i + 2), 16));
          }
          return btoa(String.fromCharCode.apply(null, bytes));
      }

      function base64DecodeCustom(base64) {
          // Decode base64 to hex
          const binary = atob(base64);
          let hex = '';
          for (let i = 0; i < binary.length; i++) {
              hex += binary.charCodeAt(i).toString(16).padStart(2, '0');
          }
          return hex;
      }

      function addNoiseChunk(data, seed) {
          // Add deterministic noise based on seed for obfuscation
          const noise = new Uint8Array(16); // 16 bytes of noise
          const seedView = new DataView(new ArrayBuffer(8));
          seedView.setBigUint64(0, BigInt(seed));
          for (let i = 0; i < 16; i++) {
              noise[i] = (seedView.getUint8(i % 8) ^ (i * 17 + 42)) & 0xFF;
          }
          // Convert noise to hex string for safe concatenation
          const noiseHex = Array.from(noise).map(b => b.toString(16).padStart(2, '0')).join('');
          return noiseHex + '|' + data;
      }

      function removeNoiseChunk(dataWithNoise) {
          // Remove noise chunk (32 hex chars + delimiter)
          const parts = dataWithNoise.split('|');
          if (parts.length !== 2) throw new Error('Invalid noise format');
          return parts[1];
      }

      function applyXOR(data, key) {
          // Apply XOR with key derived from password
          let result = '';
          for (let i = 0; i < data.length; i++) {
              const charCode = data.charCodeAt(i) ^ key.charCodeAt(i % key.length);
              result += String.fromCharCode(charCode);
          }
          return result;
      }

      async function encrypt(pixels, pass, text){
          self.postMessage({status:'progress', msg:'Preprocessing text...'});
          
          // ENHANCED SECURITY LAYERS (in order as requested)
          // 1. Text to Binary
          const binary = textToBinary(text);
          
          // 2. Binary to Hexadecimal
          const hex = binaryToHex(binary);
          
          // 3. Add Base64 encoding
          const base64 = base64EncodeCustom(hex);
          
          // 4. Add noise chunk with timestamp as seed
          const timestamp = Date.now();
          const withNoise = addNoiseChunk(base64, timestamp);
          
          // 5. Apply XOR gate with password-derived key
          const xorKey = pass.repeat(Math.ceil(withNoise.length / pass.length)).slice(0, withNoise.length);
          const xored = applyXOR(withNoise, xorKey);
          
          // 6. Now apply the existing XChaCha20-Poly1305 encryption
          self.postMessage({status:'progress', msg:'Deriving key...'});
          const payload = new TextEncoder().encode(xored);
          
          // Generate random salt for each encryption (enhanced security)
          const salt = crypto.getRandomValues(new Uint8Array(16));
          const nonce = crypto.getRandomValues(new Uint8Array(sodium.crypto_aead_xchacha20poly1305_ietf_NPUBBYTES));
          const keys = await deriveKeys(pass, salt);
          
          // Store timestamp in metadata for noise removal during decryption
          const meta = new Uint8Array(12); 
          const mv = new DataView(meta.buffer); 
          mv.setUint16(0, VER); 
          mv.setUint16(2, 0); 
          mv.setBigUint64(4, BigInt(timestamp), true);
          
          const ciphertext = sodium.crypto_aead_xchacha20poly1305_ietf_encrypt(payload, meta, null, nonce, keys.enc);
          const encLen = BigInt(ciphertext.length);
          const header = buildHeader(salt, nonce, meta, encLen);
          scrambleHeader(header, keys.mask);

          const totalBits = (HEADER_LEN + ciphertext.length) * 8;
          const availableBits = (pixels.length / 4) * 3;
          if (totalBits > availableBits) throw new Error('Image too small for payload');
          self.postMessage({status:'progress', msg:'Scattering bits...'});
          const indices = createPermutation(availableBits, totalBits, keys.scat);
          const dataStream = new Uint8Array(HEADER_LEN + ciphertext.length); dataStream.set(header,0); dataStream.set(ciphertext, HEADER_LEN);
          embedBitsLSB(pixels, dataStream, indices);
          self.postMessage({status:'complete', result:pixels}, [pixels.buffer]);
      }

      async function decrypt(pixels, pass){
          self.postMessage({status:'progress', msg:'Extracting header...'});
          const rawHeader = extractBits(pixels, HEADER_LEN);
          const dv = new DataView(rawHeader.buffer);
          if(dv.getUint32(0,true) !== MAGIC) throw new Error('No container found');
          const salt = rawHeader.slice(4,20);
          const keys = await deriveKeys(pass, salt);
          // Unscramble
          const header = new Uint8Array(rawHeader); scrambleHeader(header, keys.mask); // scrambleHeader is XOR; applying again restores
          const meta = header.slice(44,56);
          const encLen = new DataView(header.buffer).getBigUint64(56,true);
          const totalBits = (HEADER_LEN + Number(encLen)) * 8;
          const availableBits = (pixels.length/4)*3; if(totalBits>availableBits) throw new Error('Corrupt length');
          self.postMessage({status:'progress', msg:'Recovering payload...'});
          const indices = createPermutation(availableBits, totalBits, keys.scat);
          const payloadBytes = extractPayload(pixels, indices.slice(HEADER_LEN*8), Number(encLen));
          const nonce = header.slice(20, 44);
          let plaintext;
          try {
              plaintext = sodium.crypto_aead_xchacha20poly1305_ietf_decrypt(null, payloadBytes, meta, nonce, keys.enc);
          } catch(e){ throw new Error('AEAD failure (auth)'); }
          
          // Get timestamp from metadata for noise removal
          const timestamp = Number(new DataView(meta.buffer).getBigUint64(4,true));
          
          // REVERSE THE SECURITY LAYERS (in reverse order)
          self.postMessage({status:'progress', msg:'Decoding layers...'});
          
          // 1. Decode from XChaCha20 encryption (already done above)
          const xored = new TextDecoder().decode(plaintext);
          
          // 2. Reverse XOR gate
          const xorKey = pass.repeat(Math.ceil(xored.length / pass.length)).slice(0, xored.length);
          const withNoise = applyXOR(xored, xorKey);
          
          // 3. Remove noise chunk
          const base64 = removeNoiseChunk(withNoise);
          
          // 4. Decode Base64
          const hex = base64DecodeCustom(base64);
          
          // 5. Hexadecimal to Binary
          const binary = hexToBinary(hex);
          
          // 6. Binary to Text
          const txt = binaryToText(binary);
          
          self.postMessage({status:'complete', result:txt, meta:{date:new Date(timestamp).toISOString()}, type:'text'});
      }

      function embedBitsLSB(pixels, bytes, indices){
          for(let i=0;i<bytes.length;i++){
              const b=bytes[i];
              for(let bit=0;bit<8;bit++){
                  const val=(b>>bit)&1; const logicalIdx=indices[i*8+bit]; const pixelIdx=Math.floor(logicalIdx/3); const channel=logicalIdx%3; const byteIdx=pixelIdx*4+channel; pixels[byteIdx]=(pixels[byteIdx]&0xFE)|val;
              }
          }
      }

      function extractBits(pixels, headerLen){
          const out=new Uint8Array(headerLen); for(let i=0;i<headerLen*8;i++){ const pixelIdx=Math.floor(i/3); const channel=i%3; const byteIdx=pixelIdx*4+channel; const bit=pixels[byteIdx]&1; out[Math.floor(i/8)]|=(bit<<(i%8)); } return out;
      }

      function extractPayload(pixels, indices, length){
          const out=new Uint8Array(length); for(let i=0;i<length;i++){ let byte=0; for(let bit=0;bit<8;bit++){ const logicalIdx=indices[i*8+bit]; const pixelIdx=Math.floor(logicalIdx/3); const channel=logicalIdx%3; const byteIdx=pixelIdx*4+channel; const val=pixels[byteIdx]&1; byte|=(val<<bit);} out[i]=byte;} return out;
      }

      function createPermutation(size, needed, scatKey){
          const headerBits = HEADER_LEN * 8; const payloadBits = needed - headerBits; const availablePayloadPositions = size - headerBits;
          // Deterministic random stream using crypto_stream
          const zeroNonce = new Uint8Array(24); const stream = sodium.crypto_stream_xchacha20(payloadBits*4, zeroNonce, scatKey);
          const dv = new DataView(stream.buffer); const positions = new Uint32Array(payloadBits); for(let i=0;i<payloadBits;i++) positions[i]=i;
          for(let i=payloadBits-1;i>0;i--){ const rnd = dv.getUint32(i*4,true); const j = rnd % (i+1); const tmp=positions[i]; positions[i]=positions[j]; positions[j]=tmp; }
          const result = new Int32Array(needed); for(let i=0;i<headerBits;i++) result[i]=i; for(let i=0;i<payloadBits;i++){ const mapped = headerBits + positions[i]; if(mapped >= (headerBits + availablePayloadPositions)) throw new Error('Permutation overflow'); result[headerBits+i]=mapped; }
          return result;
      }
    </script>

    <script>
      const workerCode = document.getElementById("worker-code").textContent;
      const blob = new Blob([workerCode], { type: "text/javascript" });
      const worker = new Worker(URL.createObjectURL(blob));

      let storedResult = null;
      let originalFileName = "image";

      const Engine = {
        busy: false,
        pixels: null,
        // Removed capacity
        width: 0,
        height: 0,

        request: (op) => {
          if (Engine.busy) return UI.setStatus("Operation already in progress", true);
          const pass = document.getElementById("passwordInput").value;
          if (!pass || !Engine.pixels)
            return UI.setStatus("Missing Credentials or Image", true);
          Engine.busy = true;
          UI.startProcess();
          const bufCopy = new Uint8Array(Engine.pixels);
          worker.postMessage(
            {
              op,
              pixels: bufCopy,
              pass,
              text: document.getElementById("messageInput").value,
            },
            [bufCopy.buffer]
          );
        },
      };

      const UI = {
        handleFile: (input) => {
          const file = input.files[0];
          if (!file) return;
          originalFileName = file.name.split(".")[0];
          document.getElementById("fileName").innerText = file.name;

          const reader = new FileReader();
          reader.onload = (e) => {
            const img = new Image();
            img.onload = () => {
              const canvas = document.createElement("canvas");
              canvas.width = img.width;
              canvas.height = img.height;
              Engine.width = img.width;
              Engine.height = img.height;
              const ctx = canvas.getContext("2d");
              ctx.drawImage(img, 0, 0);
              const imageData = ctx.getImageData(0, 0, img.width, img.height);
              Engine.pixels = imageData.data;
              const capBytes = (img.width * img.height * 3) / 8; // Still calculated for debug/info, but not stored as Engine.capacity
              
              document.getElementById("filePreview").src = e.target.result;
              document.getElementById("filePreview").classList.remove("hidden");
              document.getElementById("fileIcon").classList.add("hidden");
              document.getElementById("fileInfo").innerText = `${img.width}x${
                img.height
              } • Est. Cap: ${(capBytes / 1024).toFixed(1)} KB`;
              
              document.getElementById("btnEncrypt").disabled = false;
              document.getElementById("btnDecrypt").disabled = false;
              UI.updateStats();
            };
            img.src = e.target.result;
          };
          reader.readAsDataURL(file);
        },

        updateStats: () => {
          const txt = document.getElementById("messageInput").value;
          const len = new TextEncoder().encode(txt).length;
          document.getElementById("payloadStats").innerText = `${len} bytes`;
          // Removed all capacity bar related updates
        },

        // Removed checkStrength function

        startProcess: () => {
          document.getElementById("statusArea").classList.remove("hidden");
          document
            .getElementById("progressContainer")
            .classList.remove("hidden");
          document.getElementById("resultActions").classList.add("hidden");
          document.getElementById("statusMsg").innerText = "Processing...";
        },

        endProcess: (ok, msg) => {
          Engine.busy = false;
          document.getElementById("progressContainer").classList.add("hidden");
          document.getElementById("statusMsg").innerText = msg;
          document.getElementById("statusTitle").innerText = ok
            ? "COMPLETE"
            : "ERROR";
          document.getElementById("statusTitle").className = ok
            ? "font-bold text-emerald-400"
            : "font-bold text-red-400";
          if (ok)
            document.getElementById("resultActions").classList.remove("hidden");
        },

        setStatus: (msg, err) => {
          document.getElementById("statusArea").classList.remove("hidden");
          document.getElementById("statusMsg").innerText = msg;
          if (err) document.getElementById("statusTitle").innerText = "ALERT";
        },

        togglePass: () => {
          const x = document.getElementById("passwordInput");
          x.type = x.type === "password" ? "text" : "password";
        },

        downloadResult: () => {
          if (!storedResult) return;
          const u = URL.createObjectURL(storedResult);
          const a = document.createElement("a");
          a.href = u;
          a.download = `${originalFileName}_secure.png`;
          a.click();
        },

        copyResult: () => {
          if (storedResult && typeof storedResult === "string")
            navigator.clipboard.writeText(storedResult);
        },
      };

      worker.onmessage = (e) => {
        const { status, msg, result, meta, type } = e.data;
        if (status === "progress")
          document.getElementById("statusMsg").innerText = msg;
        else if (status === "complete") {
          if (type === "text") {
            // Display decrypted message in the message textarea
            storedResult = result;
            document.getElementById("messageInput").value = result;
            UI.endProcess(
              true,
              `Decrypted.\nTimestamp: ${meta ? meta.date : "N/A"}`
            );
          } else {
            try {
              const canvas = document.createElement("canvas");
              canvas.width = Engine.width;
              canvas.height = Engine.height;
              const ctx = canvas.getContext("2d");
              const imageData = ctx.createImageData(Engine.width, Engine.height);
              imageData.data.set(result);
              ctx.putImageData(imageData, 0, 0);
              
              // Add timeout fallback in case toBlob hangs
              const BLOB_TIMEOUT_MS = 10000; // 10 second timeout
              let processEnded = false;
              const timeout = setTimeout(() => {
                if (!processEnded) {
                  processEnded = true;
                  UI.endProcess(false, "Timeout generating image blob.");
                }
              }, BLOB_TIMEOUT_MS);
              
              canvas.toBlob((blob) => {
                if (processEnded) return; // Timeout already fired
                processEnded = true;
                clearTimeout(timeout);
                if (blob) {
                  storedResult = blob;
                  UI.endProcess(true, "Encryption Complete. Download your encrypted image.");
                  // Automatically trigger download after encryption
                  UI.downloadResult();
                } else {
                  UI.endProcess(false, "Failed to generate image blob.");
                }
              }, "image/png");
            } catch (error) {
              UI.endProcess(false, "Error creating encrypted image: " + error.message);
            }
          }
        } else {
          UI.endProcess(false, msg);
        }
      };

      worker.onerror = (e) => {
        console.error("Worker error:", e);
        if (Engine.busy) {
          UI.endProcess(false, "Crypto Worker Crashed. Check connection and try again.");
        } else {
          UI.setStatus("Crypto Worker Failed to Initialize. Check connection.", true);
        }
      };

      // Init
      document.getElementById("systemStatus").innerHTML =
        '<div class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></div>SYSTEM ONLINE';
    </script>
    <script>
      if ("serviceWorker" in navigator) {
        window.addEventListener("load", () => {
          // Use relative paths so it works on localhost and GitHub Pages subdirectory.
          // From Encryption-7.0.html (in repo root), `sw.js` resolves to:
          // - localhost: http://localhost:PORT/sw.js
          // - GitHub Pages: https://<user>.github.io/EncryptionHub.github.io/sw.js
          const swUrl = "sw.js";
          const scope = "./"; // current directory as scope

          navigator.serviceWorker
            .register(swUrl, { scope })
            .then((registration) => {
              console.log(
                "Service Worker registered with scope:",
                registration.scope
              );
            })
            .catch((error) => {
              console.error("Service Worker registration failed:", error);
            });
        });
      }
    </script>
  </body>
</html>