hd-wallet-ui 1.0.0 → 1.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hd-wallet-ui",
-  "version": "1.0.0",
+  "version": "1.1.2",
   "description": "HD Wallet modal UI — login, keys, identity, trust map, and security bond. Attach to any button in your app.",
   "type": "module",
   "main": "src/app.js",
@@ -34,7 +34,7 @@
     "bip39": "^3.1.0",
     "buffer": "^6.0.3",
     "flatbuffers": "^25.9.23",
-    "hd-wallet-wasm": "file:../wasm",
+    "hd-wallet-wasm": "^1.1.2",
     "qrcode": "^1.5.3",
     "vcard-cryptoperson": "^1.1.10"
   },
@@ -55,5 +55,13 @@
     "ethereum",
     "solana"
   ],
-  "license": "Apache-2.0"
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/DigitalArsenal/hd-wallet-wasm.git"
+  },
+  "bugs": {
+    "url": "https://github.com/DigitalArsenal/hd-wallet-wasm/issues"
+  },
+  "homepage": "https://digitalarsenal.github.io/hd-wallet-wasm/"
 }

package/src/app.js

@@ -19,6 +19,10 @@ import QRCode from 'qrcode';
 import { Buffer } from 'buffer';
 import { createV3 } from 'vcard-cryptoperson';
 
+// SpaceDataStandards EME (Encrypted Message Envelope)
+import { EME, EMET } from '@sds/lib/js/ts/EME/EME.js';
+import * as flatbuffers from 'flatbuffers';
+
 // Make Buffer available globally for various crypto libraries
 window.Buffer = Buffer;
 
@@ -34,6 +38,7 @@ import {
   coinTypeToConfig,
   buildSigningPath,
   buildEncryptionPath,
+  PKI_STORAGE_KEY,
 } from './constants.js';
 
 import {
@@ -1626,7 +1631,7 @@ async function updateAdversarialSecurity() {
   // Update account header total value
   const accountTotalEl = $('account-total-value');
   if (accountTotalEl) {
-    accountTotalEl.textContent = 'Security Level: ' + formatCurrencyValue(totalConverted, currency);
+    accountTotalEl.textContent = 'Bond: ' + formatCurrencyValue(totalConverted, currency);
   }
 
   // Update account address dropdown values
@@ -2772,14 +2777,17 @@ function setupMainAppHandlers() {
   $('hd-coin')?.addEventListener('change', () => {
     updatePathDisplay();
     deriveAndDisplayAddress();
+    updateEncryptionTab();
   });
   $('hd-account')?.addEventListener('input', () => {
     updatePathDisplay();
     deriveAndDisplayAddress();
+    updateEncryptionTab();
   });
   $('hd-index')?.addEventListener('input', () => {
     updatePathDisplay();
     deriveAndDisplayAddress();
+    updateEncryptionTab();
   });
 
   // PKI clear keys
@@ -3129,6 +3137,287 @@ function setupTrustHandlers() {
   // Expose start/stop for login/logout
   state._startTrustScanning = startTrustScanning;
   state._stopTrustScanning = stopTrustScanning;
+
+  // =========================================================================
+  // Encryption Tab Handlers (ECIES: ECDH + HKDF + AES-256-GCM)
+  // =========================================================================
+
+  function updateEncryptionTab() {
+    if (!state.hdRoot || !state.hdWalletModule) return;
+    const coin = $('hd-coin')?.value || '0';
+    const account = $('hd-account')?.value || '0';
+    const index = $('hd-index')?.value || '0';
+    const encPath = buildEncryptionPath(coin, account, index);
+    const encKey = deriveHDKey(encPath);
+    const pubKey = encKey.publicKey();
+    const pubHex = toHexCompact(pubKey);
+
+    const senderPubEl = $('encrypt-sender-pubkey');
+    const senderPathEl = $('encrypt-sender-path');
+    if (senderPubEl) senderPubEl.textContent = pubHex;
+    if (senderPathEl) senderPathEl.textContent = encPath;
+
+    const encryptBtn = $('encrypt-btn');
+    if (encryptBtn) encryptBtn.disabled = false;
+  }
+
+  // Update encryption tab when it becomes active or HD controls change
+  $qa('.modal-tab[data-modal-tab="encrypt-tab-content"]').forEach(tab => {
+    tab.addEventListener('click', () => {
+      if (state.hdRoot) updateEncryptionTab();
+    });
+  });
+
+  // "Self" button - fill recipient with own public key for testing
+  $('encrypt-use-self')?.addEventListener('click', () => {
+    const senderPub = $('encrypt-sender-pubkey')?.textContent;
+    if (senderPub && senderPub !== '--') {
+      $('encrypt-recipient-pubkey').value = senderPub;
+    }
+  });
+
+  // ---- EME state for current encryption result ----
+  let currentEME = null;   // EMET instance
+  let currentFormat = 'json';
+
+  function emeToJSON(eme) {
+    return JSON.stringify({
+      ENCRYPTED_BLOB: eme.ENCRYPTED_BLOB,
+      EPHEMERAL_PUBLIC_KEY: eme.EPHEMERAL_PUBLIC_KEY,
+      MAC: eme.MAC,
+      NONCE: eme.NONCE,
+      TAG: eme.TAG,
+      IV: eme.IV,
+      SALT: eme.SALT,
+      PUBLIC_KEY_IDENTIFIER: eme.PUBLIC_KEY_IDENTIFIER,
+      CIPHER_SUITE: eme.CIPHER_SUITE,
+      KDF_PARAMETERS: eme.KDF_PARAMETERS,
+      ENCRYPTION_ALGORITHM_PARAMETERS: eme.ENCRYPTION_ALGORITHM_PARAMETERS,
+    }, null, 2);
+  }
+
+  function emeToFlatBuffer(eme) {
+    const builder = new flatbuffers.Builder(1);
+    const packed = eme.pack(builder);
+    builder.finishSizePrefixed(packed, '$EME');
+    return builder.asUint8Array();
+  }
+
+  function emeToFlatBufferBase64(eme) {
+    return Buffer.from(emeToFlatBuffer(eme)).toString('base64');
+  }
+
+  function updateBundleDisplay() {
+    if (!currentEME) return;
+    const textarea = $('encrypt-bundle');
+    if (!textarea) return;
+    if (currentFormat === 'json') {
+      textarea.value = emeToJSON(currentEME);
+    } else {
+      textarea.value = emeToFlatBufferBase64(currentEME);
+    }
+  }
+
+  // Format toggle buttons
+  $qa('.encrypt-fmt-btn').forEach(btn => {
+    btn.addEventListener('click', () => {
+      $qa('.encrypt-fmt-btn').forEach(b => b.classList.remove('active'));
+      btn.classList.add('active');
+      currentFormat = btn.dataset.format;
+      const label = $('encrypt-format-label');
+      if (label) label.textContent = currentFormat === 'json'
+        ? 'EME (Encrypted Message Envelope) — SpaceDataStandards.org'
+        : 'EME FlatBuffer binary (base64-encoded)';
+      updateBundleDisplay();
+    });
+  });
+
+  // Encrypt button
+  $('encrypt-btn')?.addEventListener('click', () => {
+    const w = state.hdWalletModule;
+    if (!w || !state.hdRoot) return;
+
+    const recipientHex = $('encrypt-recipient-pubkey')?.value?.trim();
+    const plainStr = $('encrypt-plaintext')?.value;
+    if (!recipientHex || !plainStr) {
+      alert('Please enter both a recipient public key and a message.');
+      return;
+    }
+
+    try {
+      const coin = $('hd-coin')?.value || '0';
+      const account = $('hd-account')?.value || '0';
+      const index = $('hd-index')?.value || '0';
+      const encPath = buildEncryptionPath(coin, account, index);
+      const senderKey = deriveHDKey(encPath);
+      const senderPriv = senderKey.privateKey();
+      const senderPub = senderKey.publicKey();
+
+      // Parse recipient public key from hex
+      const recipientPub = new Uint8Array(recipientHex.match(/.{1,2}/g).map(b => parseInt(b, 16)));
+
+      // 1. ECDH shared secret
+      const shared = w.curves.secp256k1.ecdh(senderPriv, recipientPub);
+
+      // 2. HKDF: derive 32-byte AES key from shared secret
+      const salt = w.utils.getRandomBytes(32);
+      const info = new TextEncoder().encode('ecies-secp256k1-aes256gcm');
+      const aesKey = w.utils.hkdf(shared, salt, info, 32);
+
+      // 3. AES-256-GCM encrypt
+      const iv = w.utils.generateIv();
+      const plaintext = new TextEncoder().encode(plainStr);
+      const { ciphertext, tag } = w.utils.aesGcm.encrypt(aesKey, plaintext, iv);
+
+      // Display field-level results
+      $('encrypt-out-ciphertext').textContent = toHexCompact(ciphertext);
+      $('encrypt-out-tag').textContent = toHexCompact(tag);
+      $('encrypt-out-iv').textContent = toHexCompact(iv);
+      $('encrypt-out-salt').textContent = toHexCompact(salt);
+      $('encrypt-out-sender-pub').textContent = toHexCompact(senderPub);
+      // Build EME (Encrypted Message Envelope) standard object
+      currentEME = new EMET(
+        Array.from(ciphertext),             // ENCRYPTED_BLOB
+        toHexCompact(senderPub),            // EPHEMERAL_PUBLIC_KEY
+        null,                               // MAC (not used, tag covers it)
+        null,                               // NONCE (we use IV field instead)
+        toHexCompact(tag),                  // TAG
+        toHexCompact(iv),                   // IV
+        toHexCompact(salt),                 // SALT
+        null,                               // PUBLIC_KEY_IDENTIFIER
+        'aes-256-gcm',                      // CIPHER_SUITE
+        'hkdf-sha256',                      // KDF_PARAMETERS
+        'secp256k1',                        // ENCRYPTION_ALGORITHM_PARAMETERS
+      );
+
+      updateBundleDisplay();
+
+      // Switch to result step
+      $('encrypt-step-compose').style.display = 'none';
+      $('encrypt-step-result').style.display = 'block';
+    } catch (err) {
+      console.error('Encryption failed:', err);
+      alert('Encryption failed: ' + err.message);
+    }
+  });
+
+  // Copy bundle
+  $('encrypt-copy-bundle')?.addEventListener('click', () => {
+    const bundle = $('encrypt-bundle')?.value;
+    if (bundle) {
+      navigator.clipboard.writeText(bundle).catch(() => {});
+    }
+  });
+
+  // Download bundle
+  $('encrypt-download-bundle')?.addEventListener('click', () => {
+    if (!currentEME) return;
+    let blob, filename;
+    if (currentFormat === 'json') {
+      blob = new Blob([emeToJSON(currentEME)], { type: 'application/json' });
+      filename = 'message.eme.json';
+    } else {
+      const buf = emeToFlatBuffer(currentEME);
+      blob = new Blob([buf], { type: 'application/octet-stream' });
+      filename = 'message.eme.fbs';
+    }
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = filename;
+    a.click();
+    URL.revokeObjectURL(url);
+  });
+
+  // Parse EME from input (JSON or base64 FlatBuffer)
+  function parseEMEPayload(input) {
+    const trimmed = input.trim();
+    // Try JSON first
+    if (trimmed.startsWith('{')) {
+      return JSON.parse(trimmed);
+    }
+    // Try base64 FlatBuffer (size-prefixed)
+    const buf = new Uint8Array(Buffer.from(trimmed, 'base64'));
+    const bb = new flatbuffers.ByteBuffer(buf);
+    const root = EME.getSizePrefixedRootAsEME(bb);
+    const eme = root.unpack();
+    return eme;
+  }
+
+  // Decrypt button
+  $('decrypt-btn')?.addEventListener('click', () => {
+    const w = state.hdWalletModule;
+    if (!w || !state.hdRoot) return;
+
+    const payloadStr = $('decrypt-payload')?.value?.trim();
+    if (!payloadStr) {
+      alert('Paste an EME payload to decrypt.');
+      return;
+    }
+
+    try {
+      const payload = parseEMEPayload(payloadStr);
+      const fromHex = (h) => new Uint8Array(h.match(/.{1,2}/g).map(b => parseInt(b, 16)));
+
+      const senderPub = fromHex(payload.EPHEMERAL_PUBLIC_KEY);
+      const tag = fromHex(payload.TAG);
+      const iv = fromHex(payload.IV);
+      const salt = fromHex(payload.SALT);
+
+      // ENCRYPTED_BLOB can be a number array (from EMET) or hex string
+      let ciphertext;
+      if (Array.isArray(payload.ENCRYPTED_BLOB)) {
+        ciphertext = new Uint8Array(payload.ENCRYPTED_BLOB);
+      } else {
+        ciphertext = fromHex(payload.ENCRYPTED_BLOB);
+      }
+
+      const coin = $('hd-coin')?.value || '0';
+      const account = $('hd-account')?.value || '0';
+      const index = $('hd-index')?.value || '0';
+      const encPath = buildEncryptionPath(coin, account, index);
+      const recipientKey = deriveHDKey(encPath);
+      const recipientPriv = recipientKey.privateKey();
+
+      // 1. ECDH shared secret (using sender's public key)
+      const shared = w.curves.secp256k1.ecdh(recipientPriv, senderPub);
+
+      // 2. HKDF: derive same AES key
+      const info = new TextEncoder().encode('ecies-secp256k1-aes256gcm');
+      const aesKey = w.utils.hkdf(shared, salt, info, 32);
+
+      // 3. AES-256-GCM decrypt
+      const decrypted = w.utils.aesGcm.decrypt(aesKey, ciphertext, tag, iv);
+      const decStr = new TextDecoder().decode(decrypted);
+
+      $('decrypt-result-value').textContent = decStr;
+
+      // Switch to result step
+      $('decrypt-step-input').style.display = 'none';
+      $('decrypt-step-result').style.display = 'block';
+    } catch (err) {
+      console.error('Decryption failed:', err);
+      alert('Decryption failed: ' + err.message);
+    }
+  });
+
+  // Enable decrypt button when payload is pasted
+  $('decrypt-payload')?.addEventListener('input', () => {
+    const btn = $('decrypt-btn');
+    if (btn) btn.disabled = !$('decrypt-payload')?.value?.trim();
+  });
+
+  // Back button: encrypt result -> compose
+  $('encrypt-back-btn')?.addEventListener('click', () => {
+    $('encrypt-step-result').style.display = 'none';
+    $('encrypt-step-compose').style.display = 'block';
+  });
+
+  // Back button: decrypt result -> input
+  $('decrypt-back-btn')?.addEventListener('click', () => {
+    $('decrypt-step-result').style.display = 'none';
+    $('decrypt-step-input').style.display = 'block';
+  });
 }
 
 // =============================================================================

package/src/template.js

@@ -4,13 +4,15 @@ export function getModalHTML() {
   <div id="keys-modal" class="modal">
   <div class="modal-glass modal-wide">
       <div class="modal-header"><div class="account-header-info"><div class="account-header-top"><h3>Account</h3><h3 class="account-total-value" id="account-total-value"></h3></div><div class="account-address-row"><select id="account-address-select" class="glass-select compact account-address-select"><option value="xpub">xpub</option></select><code class="account-address-display" id="account-address-display"></code><button class="account-address-copy" id="account-address-copy" title="Copy address"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button><span class="account-address-value" id="account-address-value"></span></div></div><button class="modal-close">&times;</button></div>
+      <div class="modal-tabs">
+        <button class="modal-tab active" data-modal-tab="vcard-tab-content">Identity</button>
+        <button class="modal-tab" data-modal-tab="keys-tab-content">Keys</button>
+        <button class="modal-tab" data-modal-tab="trust-tab-content">Trust Map</button>
+        <button class="modal-tab" data-modal-tab="bond-tab-content">Bond</button>
+        <button class="modal-tab" data-modal-tab="encrypt-tab-content">Encrypt</button>
+        <button class="modal-tab" data-modal-tab="decrypt-tab-content">Decrypt</button>
+      </div>
       <div class="modal-body">
-        <div class="modal-tabs">
-          <button class="modal-tab active" data-modal-tab="vcard-tab-content">Identity</button>
-          <button class="modal-tab" data-modal-tab="keys-tab-content">Keys</button>
-          <button class="modal-tab" data-modal-tab="trust-tab-content">Trust Map</button>
-          <button class="modal-tab" data-modal-tab="bond-tab-content">Security Bond</button>
-        </div>
         <div id="keys-tab-content" class="modal-tab-content">
           <div id="memory-info-box" class="memory-info-box" style="display:none"><div class="memory-info-content"><p><strong>Your keys never leave your device.</strong></p></div><button class="wallet-info-close" id="memory-info-close" title="Close">&times;</button></div>
           <div class="xpub-section">
@@ -271,6 +273,115 @@ export function getModalHTML() {
           </div>
         </div>
 
+        <!-- Encrypt Tab -->
+        <div id="encrypt-tab-content" class="modal-tab-content">
+          <!-- Step 1: Compose -->
+          <div id="encrypt-step-compose" class="encrypt-step">
+            <div class="encrypt-tab-intro">
+              <h4 class="section-label">Encrypt a Message</h4>
+              <p>ECDH key agreement + HKDF + AES-256-GCM (ECIES)</p>
+            </div>
+
+            <div class="encrypt-keys-section">
+              <div class="encrypt-key-row">
+                <div class="encrypt-key-card glass-card">
+                  <div class="encrypt-key-header">
+                    <span class="encrypt-role-badge sender">Sender (You)</span>
+                  </div>
+                  <div class="encrypt-key-detail">
+                    <label>Encryption Public Key</label>
+                    <code id="encrypt-sender-pubkey" class="truncate">--</code>
+                  </div>
+                  <div class="encrypt-key-detail">
+                    <label>Derivation Path</label>
+                    <code id="encrypt-sender-path">--</code>
+                  </div>
+                </div>
+                <div class="encrypt-key-card glass-card">
+                  <div class="encrypt-key-header">
+                    <span class="encrypt-role-badge recipient">Recipient</span>
+                  </div>
+                  <div class="encrypt-key-detail">
+                    <label>Recipient Public Key (hex)</label>
+                    <div class="encrypt-recipient-input-row">
+                      <input type="text" id="encrypt-recipient-pubkey" class="glass-input compact" placeholder="Paste recipient's secp256k1 public key (hex)">
+                      <button id="encrypt-use-self" class="glass-btn small" title="Use your own key (for testing)">Self</button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="encrypt-message-section">
+              <div class="encrypt-input-group">
+                <label class="section-label">Message</label>
+                <textarea id="encrypt-plaintext" class="glass-input glass-textarea" rows="3" placeholder="Enter a message to encrypt..."></textarea>
+              </div>
+              <div class="encrypt-actions">
+                <button id="encrypt-btn" class="glass-btn primary" disabled>Encrypt</button>
+              </div>
+            </div>
+          </div>
+
+          <!-- Step 2: Result (replaces compose) -->
+          <div id="encrypt-step-result" class="encrypt-step" style="display:none;">
+            <div class="encrypt-step-header">
+              <button id="encrypt-back-btn" class="glass-btn small encrypt-back-btn"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 12H5M12 19l-7-7 7-7"/></svg> Back</button>
+              <h4 class="section-label">Encrypted Payload</h4>
+            </div>
+            <div class="encrypt-output-fields">
+              <div class="encrypt-field"><label>Ciphertext</label><code id="encrypt-out-ciphertext" class="encrypt-out-value truncate"></code><button class="copy-btn" data-copy="encrypt-out-ciphertext" title="Copy"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg></button></div>
+              <div class="encrypt-field"><label>Auth Tag</label><code id="encrypt-out-tag" class="encrypt-out-value truncate"></code></div>
+              <div class="encrypt-field"><label>IV (nonce)</label><code id="encrypt-out-iv" class="encrypt-out-value truncate"></code></div>
+              <div class="encrypt-field"><label>HKDF Salt</label><code id="encrypt-out-salt" class="encrypt-out-value truncate"></code></div>
+              <div class="encrypt-field"><label>Sender Public Key</label><code id="encrypt-out-sender-pub" class="encrypt-out-value truncate"></code></div>
+            </div>
+            <div class="encrypt-bundle-group">
+              <div class="encrypt-format-toggle">
+                <label class="section-label">Payload Bundle</label>
+                <div class="encrypt-format-btns">
+                  <button class="glass-btn small encrypt-fmt-btn active" data-format="json">JSON</button>
+                  <button class="glass-btn small encrypt-fmt-btn" data-format="flatbuffer">FlatBuffer</button>
+                </div>
+              </div>
+              <div class="encrypt-format-info">
+                <span id="encrypt-format-label" class="encrypt-format-label">EME (Encrypted Message Envelope) — SpaceDataStandards.org</span>
+              </div>
+              <textarea id="encrypt-bundle" class="glass-input glass-textarea" rows="4" readonly></textarea>
+              <div class="encrypt-bundle-actions">
+                <button class="glass-btn small" id="encrypt-copy-bundle">Copy</button>
+                <button class="glass-btn small" id="encrypt-download-bundle">Download</button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Decrypt Tab -->
+        <div id="decrypt-tab-content" class="modal-tab-content">
+          <!-- Step 1: Input -->
+          <div id="decrypt-step-input" class="encrypt-step">
+            <div class="encrypt-tab-intro">
+              <h4 class="section-label">Decrypt a Message</h4>
+              <p>Paste an EME payload (JSON or base64 FlatBuffer) to decrypt with your key.</p>
+            </div>
+            <textarea id="decrypt-payload" class="glass-input glass-textarea" rows="6" placeholder='Paste EME JSON or base64 FlatBuffer here...'></textarea>
+            <div class="encrypt-actions">
+              <button id="decrypt-btn" class="glass-btn primary" disabled>Decrypt</button>
+            </div>
+          </div>
+
+          <!-- Step 2: Result (replaces input) -->
+          <div id="decrypt-step-result" class="encrypt-step" style="display:none;">
+            <div class="encrypt-step-header">
+              <button id="decrypt-back-btn" class="glass-btn small encrypt-back-btn"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 12H5M12 19l-7-7 7-7"/></svg> Back</button>
+              <h4 class="section-label">Decrypted Message</h4>
+            </div>
+            <div class="decrypt-result">
+              <div class="decrypt-result-value" id="decrypt-result-value"></div>
+            </div>
+          </div>
+        </div>
+
       </div>
     </div>
   </div>

package/styles/main.css

@@ -616,39 +616,42 @@ body:has(.modal.active) .nav-bar {
   display: block;
 }
 
-/* Modal Tabs (Account modal - Keys / vCard) */
+/* Modal Tabs (Account modal - Keys / vCard) - Bootstrap-style nav tabs */
 .modal-tabs {
   display: flex;
-  align-items: center;
-  gap: 4px;
-  margin-bottom: 20px;
-  padding: 4px;
-  background: var(--white-05);
-  border-radius: var(--radius-sm);
+  gap: 0;
+  margin: 0;
+  padding: 0 24px;
+  background: transparent;
+  border-bottom: 2px solid var(--white-10, rgba(255,255,255,0.1));
 }
 
 .modal-tab {
-  flex: 1;
-  padding: 8px 4px;
+  padding: 10px 16px;
   background: transparent;
   border: none;
-  border-radius: 10px;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -2px;
   color: var(--white-60);
   font-family: var(--font-sans);
   font-size: 13px;
   font-weight: 500;
   line-height: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
   cursor: pointer;
-  transition: all 0.2s;
+  transition: color 0.2s, border-color 0.2s;
   text-align: center;
+  white-space: nowrap;
+}
+
+.modal-tab:hover {
+  color: var(--white, #fff);
+  border-bottom-color: var(--white-30, rgba(255,255,255,0.3));
 }
 
 .modal-tab.active {
-  background: var(--glass-hover);
-  color: var(--white);
+  color: var(--white, #fff);
+  border-bottom-color: var(--accent, #00dc82);
+  background: transparent;
 }
 
 .modal-tab-content {
@@ -3991,46 +3994,35 @@ body:has(.modal.active) .nav-bar {
   min-width: 0;
 }
 
-.modal-tabs {
-  flex-shrink: 0;
-  position: sticky;
-  top: 0;
-  z-index: 10;
-  background: var(--glass-bg);
-  backdrop-filter: var(--glass-blur);
-  border-bottom: 1px solid var(--glass-border);
-  margin: -24px -24px 0 -24px;
-  padding: 12px 24px;
-}
 
-.modal-tab-content {
+.modal-wide .modal-tab-content {
   flex: 1;
   overflow-y: auto;
   overflow-x: hidden;
-  
+
   scrollbar-width: thin;
   scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
 }
 
-.modal-tab-content::-webkit-scrollbar {
+.modal-wide .modal-tab-content::-webkit-scrollbar {
   width: 3px;
 }
 
-.modal-tab-content::-webkit-scrollbar-track {
+.modal-wide .modal-tab-content::-webkit-scrollbar-track {
   background: transparent;
 }
 
-.modal-tab-content::-webkit-scrollbar-thumb {
+.modal-wide .modal-tab-content::-webkit-scrollbar-thumb {
   background: rgba(255, 255, 255, 0.2);
   border-radius: 3px;
 }
 
-.modal-tab-content::-webkit-scrollbar-thumb:hover {
+.modal-wide .modal-tab-content::-webkit-scrollbar-thumb:hover {
   background: rgba(255, 255, 255, 0.3);
 }
 
 /* Ensure content doesn't get cut off */
-.modal-tab-content.active {
+.modal-wide .modal-tab-content.active {
   display: block;
 }
 
@@ -4142,6 +4134,7 @@ body:has(.modal.active) .nav-bar {
   padding: 80px 24px;
   position: relative;
   z-index: 1;
+  overflow: hidden;
 }
 
 .page-section {
@@ -4163,6 +4156,7 @@ html {
 .section-container {
   max-width: 1100px;
   margin: 0 auto;
+  width: 100%;
 }
 
 .section-container.section-sm {
@@ -4237,6 +4231,8 @@ html {
   border: 1px solid var(--glass-border);
   border-radius: var(--radius-sm);
   overflow: hidden;
+  width: 100%;
+  min-width: 0;
 }
 
 .code-block-header {
@@ -4277,6 +4273,8 @@ html {
   font-size: 0.8125rem;
   line-height: 1.7;
   color: var(--white-70);
+  width: 100%;
+  min-width: 0;
 }
 
 .chains-grid {
@@ -4288,6 +4286,17 @@ html {
 .chain-card {
   padding: 20px;
   text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-decoration: none;
+  color: inherit;
+  transition: transform 0.15s ease, border-color 0.15s ease;
+}
+
+a.chain-card:hover {
+  transform: translateY(-2px);
+  border-color: var(--white-20);
 }
 
 .chain-card strong {
@@ -4519,3 +4528,238 @@ html {
 .example-code.active {
   display: block;
 }
+
+@media (max-width: 600px) {
+  .code-block pre {
+    padding: 14px;
+    font-size: 0.7rem;
+    line-height: 1.6;
+  }
+  .example-tab {
+    padding: 8px 8px;
+    font-size: 0.75rem;
+  }
+  .section-sm {
+    padding-left: 8px;
+    padding-right: 8px;
+  }
+}
+
+/* =============================================================================
+   Encryption Tab
+   ============================================================================= */
+
+.encrypt-tab-intro {
+  margin-bottom: 20px;
+}
+.encrypt-tab-intro p {
+  font-size: 0.85rem;
+  color: var(--white-60);
+  margin: 4px 0 0;
+}
+
+.encrypt-key-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+  margin-bottom: 20px;
+}
+@media (max-width: 640px) {
+  .encrypt-key-row {
+    grid-template-columns: 1fr;
+  }
+}
+
+.encrypt-key-card {
+  padding: 14px;
+  border-radius: var(--radius-sm);
+}
+.encrypt-key-header {
+  margin-bottom: 10px;
+}
+.encrypt-role-badge {
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  font-weight: 600;
+  padding: 3px 8px;
+  border-radius: 6px;
+}
+.encrypt-role-badge.sender {
+  background: rgba(59, 130, 246, 0.2);
+  color: #60a5fa;
+}
+.encrypt-role-badge.recipient {
+  background: rgba(16, 185, 129, 0.2);
+  color: #34d399;
+}
+.encrypt-key-detail {
+  margin-bottom: 8px;
+}
+.encrypt-key-detail label {
+  display: block;
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--white-40);
+  margin-bottom: 4px;
+}
+.encrypt-key-detail code {
+  font-size: 0.8rem;
+  color: var(--white-70);
+  word-break: break-all;
+}
+.encrypt-recipient-input-row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+.encrypt-recipient-input-row input {
+  flex: 1;
+  min-width: 0;
+}
+
+.encrypt-message-section {
+  margin-bottom: 20px;
+}
+.encrypt-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 10px;
+}
+
+.encrypt-step-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.encrypt-step-header .section-label {
+  margin: 0;
+}
+
+.encrypt-back-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+.encrypt-output-section {
+  margin-bottom: 24px;
+  padding: 16px;
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-sm);
+}
+.encrypt-output-fields {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 16px;
+}
+.encrypt-field {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.encrypt-field label {
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--white-40);
+  white-space: nowrap;
+  min-width: 100px;
+}
+.encrypt-out-value {
+  font-size: 0.8rem;
+  color: var(--white-70);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  min-width: 0;
+}
+.encrypt-field .copy-btn {
+  background: none;
+  border: none;
+  padding: 4px;
+  cursor: pointer;
+  color: var(--white-30);
+  flex-shrink: 0;
+  transition: color 0.2s;
+}
+.encrypt-field .copy-btn:hover {
+  color: var(--white);
+}
+.encrypt-bundle-group {
+  margin-top: 12px;
+}
+.encrypt-format-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 6px;
+}
+.encrypt-format-btns {
+  display: flex;
+  gap: 4px;
+}
+.encrypt-fmt-btn {
+  font-size: 0.72rem !important;
+  padding: 4px 10px !important;
+  opacity: 0.5;
+  transition: opacity 0.2s;
+}
+.encrypt-fmt-btn.active {
+  opacity: 1;
+  border-color: var(--accent, #00dc82);
+  color: var(--accent, #00dc82);
+}
+.encrypt-format-info {
+  margin-bottom: 8px;
+}
+.encrypt-format-label {
+  font-size: 0.72rem;
+  color: var(--white-40);
+  font-style: italic;
+}
+.encrypt-bundle-group textarea {
+  font-size: 0.78rem;
+  font-family: 'SF Mono', monospace;
+}
+.encrypt-bundle-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.encrypt-decrypt-section {
+  margin-bottom: 16px;
+}
+.encrypt-decrypt-info {
+  font-size: 0.85rem;
+  color: var(--white-60);
+  margin: 4px 0 10px;
+}
+.decrypt-result {
+  margin-top: 12px;
+  padding: 12px;
+  background: rgba(16, 185, 129, 0.1);
+  border: 1px solid rgba(16, 185, 129, 0.25);
+  border-radius: var(--radius-sm);
+}
+.decrypt-result label {
+  display: block;
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: #34d399;
+  margin-bottom: 6px;
+}
+.decrypt-result-value {
+  font-size: 0.95rem;
+  color: var(--white);
+  word-break: break-word;
+}