<!--
╔══════════════════════════════════════════════════════════════════════╗
║  NEXUS SPATIAL — MASTER BUILD FILE                                  ║
║  Current chapter: 8 — COMPLETE (all chapters done)                  ║
╠══════════════════════════════════════════════════════════════════════╣
║  CHAPTER STATUS                                                      ║
║  ✅ Ch1 — Particle canvas (180/90 particles, rainbow repel, API)    ║
║  ✅ Ch2 — Home screen (OTP, 3D globe, QR show/scan, room flow)      ║
║  ✅ Ch3 — Sender workspace (drop zone, queue, sphere, Grab/Release) ║
║  ✅ Ch4 — Receiver workspace (gravity well, incoming sphere,        ║
║           ripple success, received-files panel)                      ║
║  ✅ Ch5 — Toast system, error states, large-file modal,             ║
║           peer-disconnect handler                                    ║
║  ✅ Ch6 — Signaling UI layer (dot states, status pill updates,      ║
║           Signaling.* hook API, simulated connect on load)           ║
║  ✅ Ch7 — Socket.IO + WebRTC wiring (real socket events, room       ║
║           flow, DataChannel progress → particle sphere, speed HUD)  ║
║  ✅ Ch8 — Polish: low-end detect, touch drag, a11y, favicon,        ║
║           session-end toast, cursor grab, bottom-sheet swipe        ║
╠══════════════════════════════════════════════════════════════════════╣
║  KEY GLOBALS (safe to call from console at any time)                ║
║  enterTransferVisuals('out'|'in')     — start transfer rings        ║
║  resetTransferVisuals()               — stop rings, restore idle    ║
║  TransferRings.start(mode)/.stop()    — the ring renderer itself    ║
║  ParticleSystem.shatterEffect(x,y,'#ef4444')                        ║
║  Toast.show('msg', 'success'|'error'|'warning'|'info')              ║
║  showTransferError(title, subtitle, retryFn)                        ║
║  showPeerDisconnected(midTransfer:bool)                              ║
║  checkLargeFile(files, onProceed, onCancel)                          ║
║  Signaling.onConnect()      — turns signaling dot green             ║
║  Signaling.onDisconnect()   — turns dots red, shows toast           ║
║  Signaling.onPeerJoined(role) — peer arrived, updates pill          ║
║  Signaling.onPeerLeft(midTransfer) — peer gone                      ║
║  Signaling.onWebRTCOpen()   — P2P dot green                         ║
║  Signaling.onWebRTCClose()  — P2P dot red                           ║
║  Signaling.setRoomCode('1234') — updates room badge in top bar      ║
║  transitionToSender(code)   — home → sender workspace               ║
║  transitionToReceiver()     — home → receiver workspace             ║
╠══════════════════════════════════════════════════════════════════════╣
║  SCREEN ROUTING                                                      ║
║  Default load    → Home screen                                       ║
║  ?mode=receive   → auto-boots receiver workspace (dev/test)         ║
║  Role picker     → shown after "join" in dev mode (temp, Ch6 stub)  ║
╠══════════════════════════════════════════════════════════════════════╣
║  PARTICLE TRAIL NOTE                                                 ║
║  ctx.fillStyle='rgba(5,5,5,0.22)' is INTENTIONAL — creates the     ║
║  motion-blur trail that makes the rainbow repel feel interactive.   ║
║  Do NOT change to clearRect — it kills the effect.                  ║
╠══════════════════════════════════════════════════════════════════════╣
║  CH7 DONE ✅                                                          ║
║  · Socket.IO CDN script added (uncomment SERVER_URL to activate)    ║
║  · window._realSocketIO = true disables simulated connect           ║
║  · socket.on('connect') → Signaling.onConnect()                     ║
║  · socket.on('disconnect') → Signaling.onDisconnect()               ║
║  · emit 'create-room' / 'join-room'; handle room-not-found/full     ║
║  · room-status:ready → Signaling.onPeerJoined(role) → transition   ║
║  · socket.on('peer-disconnected') → Signaling.onPeerLeft(bool)     ║
║  · emit 'leave-room' in leaveRoom() / leaveReceiver()               ║
║  · RTCPeerConnection: offer/answer/ICE trickle, DataChannel wired   ║
║  · DataChannel progress → ParticleSystem.startTransfer()            ║
║  · Rolling avg speed (last 5 samples), human ETA                    ║
║  · completeTransfer() / receiver success flow wired                 ║
║  · simulateSignalingConnect() IIFE removed from Ch6 block           ║
║  · Set SERVER_URL at top of Ch7 block to point at Railway backend   ║
╠══════════════════════════════════════════════════════════════════════╣
║  CH8 TODO                                                            ║
║  · hardwareConcurrency ≤ 2 → COUNT=60, disable repel, simple sphere ║
║  · Touch drag sphere (lerp 0.08, same as mouse)                     ║
║  · Keyboard a11y: all elements tabbable, visible focus rings        ║
║  · Favicon: paper plane SVG (inline in <head>)                      ║
║  · Session-end toast: "Session complete · X files · Y MB"           ║
║  · Verify all state resets on leaveRoom() / leaveReceiver()         ║
╚══════════════════════════════════════════════════════════════════════╝
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
  <title>Nebulo Share</title>
  <script>
    window.$RefreshReg$ = window.$RefreshReg$ || function() {};
    window.$RefreshSig$ = window.$RefreshSig$ || function() { return function(type) { return type; }; };
    window.__vite_plugin_react_preamble_installed__ = true;
    (function() {
      try {
        fetch('/api/server-info')
          .then(function(res) { return res.json(); })
          .then(function(data) {
            if (data && data.localIP) {
              window.__SERVER_LOCAL_IP__ = data.localIP;
              if (typeof window.updateQR === 'function') {
                window.updateQR();
              }
            }
          })
          .catch(function() {});
      } catch (_) {}
    })();

    // Browser Compatibility Guard & Global Unhandled Handlers
    window.checkBrowserCompatibility = function() {
      var isSupported = true;
      var reasons = [];
      if (!window.RTCPeerConnection) {
        isSupported = false;
        reasons.push("RTCPeerConnection (WebRTC)");
      }
      if (!window.crypto || typeof window.crypto.getRandomValues !== 'function') {
        isSupported = false;
        reasons.push("Web Cryptography");
      }
      if (!window.WebSocket && !window.io) {
        isSupported = false;
        reasons.push("WebSocket Signaling");
      }
      try {
        var canvas = document.createElement('canvas');
        if (!canvas.getContext('2d')) {
          isSupported = false;
          reasons.push("Canvas 2D Rendering");
        }
      } catch (_) {
        isSupported = false;
        reasons.push("Canvas Subsystem");
      }
      if (!isSupported) {
        console.warn("[Nexus Compatibility] Incompatible browser environment:", reasons.join(", "));
        var screen = document.getElementById('unsupported-browser-screen');
        if (screen) {
          screen.classList.add('visible');
          var reasonsEl = document.getElementById('unsupported-reasons');
          if (reasonsEl) {
            reasonsEl.textContent = "Missing: " + reasons.join(", ");
          }
        }
      }
      return isSupported;
    };

    window.addEventListener('DOMContentLoaded', function() {
      window.checkBrowserCompatibility();
    });

    window.addEventListener('unhandledrejection', function(event) {
      console.warn('[Nexus Global Rejection]', event.reason);
    });

    window.addEventListener('error', function(event) {
      console.warn('[Nexus Global Error]', event.message, event.filename, event.lineno);
    });
  </script>
  <!-- Ch7: Socket.IO wiring active -->
  <script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
  <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
  <style>
    :root {
      --primary:       #06b6d4;
      --primary-dim:   rgba(6,182,212,0.15);
      --primary-glow:  rgba(6,182,212,0.08);
      --secondary:     #3b82f6;
      --tertiary:      #0891b2;
      --surface:       #050505;
      --surf-low:      #0a0a0a;
      --surf-high:     #111110;
      --surf-bright:   rgba(44,44,44,0.82);
      --outline:       rgba(72,72,72,0.15);
      --text:          #e8eaf6;
      --text-muted:    rgba(232,234,246,0.45);
      --text-dim:      rgba(232,234,246,0.25);
      --danger:        #ef4444;
      --success:       #22c55e;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html, body {
      width: 100%; height: 100%;
      background: var(--surface);
      overflow: hidden;
      font-family: 'Inter', sans-serif;
      color: var(--text);
    }

    /* ── CANVAS ── */
    #nexus-canvas {
      position: fixed; top: 0; left: 0;
      width: 100%; height: 100%;
      display: block; z-index: 0;
    }

    /* ══════════════════════════════════════════════
       TOP BAR — shared across all screens
    ══════════════════════════════════════════════ */
    #top-bar {
      position: fixed; top: 0; left: 0; right: 0;
      height: calc(56px + env(safe-area-inset-top, 0px));
      padding-top: env(safe-area-inset-top, 0px);
      display: flex; align-items: center; justify-content: space-between;
      padding-left: calc(24px + env(safe-area-inset-left, 0px));
      padding-right: calc(24px + env(safe-area-inset-right, 0px));
      background: rgba(5,5,5,0.7);
      backdrop-filter: blur(24px) saturate(180%);
      -webkit-backdrop-filter: blur(24px) saturate(180%);
      border-bottom: 1px solid rgba(6,182,212,0.06);
      z-index: 100;
      transition: all 0.3s ease;
    }
    .logo {
      display: flex; align-items: center; gap: 10px;
      font-family: 'Space Grotesk', sans-serif;
      font-size: 16px; font-weight: 700; letter-spacing: -0.3px;
    }
    .logo-icon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }
    .logo-icon svg { width: 20px; height: 20px; }
    .logo-text { color: var(--text); }
    .logo-text em { font-style: normal; color: var(--primary); }

    /* home top bar right */
    .status-pill {
      display: flex; align-items: center; gap: 7px;
      background: rgba(17,17,16,0.7);
      backdrop-filter: blur(12px);
      border-radius: 100px; padding: 5px 14px;
      font-size: 11px; font-family: 'JetBrains Mono', monospace;
      color: var(--text-muted); letter-spacing: 0.3px;
      border: 1px solid rgba(245,158,11,0.12);
    }
    .status-dot {
      width: 7px; height: 7px; border-radius: 50%;
      background: #f59e0b;
      box-shadow: 0 0 8px rgba(245,158,11,0.7);
      animation: dotPulse 2s ease-in-out infinite;
    }
    @keyframes dotPulse {
      0%,100% { box-shadow: 0 0 8px rgba(245,158,11,0.7); }
      50%      { box-shadow: 0 0 14px rgba(245,158,11,0.4), 0 0 4px rgba(245,158,11,1); }
    }

    /* sender top bar center + right */
    #top-bar-center {
      display: flex; align-items: center; gap: 8px;
      font-size: 12px; font-family: 'JetBrains Mono', monospace;
      color: var(--text-muted); letter-spacing: 0.3px;
    }
    .connected-dot {
      width: 7px; height: 7px; border-radius: 50%;
      background: var(--success);
      box-shadow: 0 0 8px rgba(34,197,94,0.7);
      animation: connPulse 2s ease-in-out infinite;
    }
    @keyframes connPulse {
      0%,100% { box-shadow: 0 0 6px rgba(34,197,94,0.6); }
      50%      { box-shadow: 0 0 12px rgba(34,197,94,0.9); }
    }
    #top-bar-right {
      display: flex; align-items: center; gap: 10px;
    }
    .room-code-badge {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px; color: var(--text-muted);
      background: rgba(6,182,212,0.07);
      border: 1px solid rgba(6,182,212,0.15);
      border-radius: 8px; padding: 4px 10px;
      letter-spacing: 1px;
    }
    .btn-leave {
      font-family: 'Space Grotesk', sans-serif;
      font-size: 12px; font-weight: 600;
      color: var(--text-dim); background: transparent;
      border: none; border-radius: 8px; padding: 5px 12px;
      cursor: pointer;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
      transition: color 0.2s, box-shadow 0.2s, background 0.2s;
    }
    .btn-leave:hover {
      color: var(--danger);
      box-shadow: inset 0 0 0 1px rgba(239,68,68,0.3);
      background: rgba(239,68,68,0.06);
    }

    /* ── BOTTOM STATUS BAR ── */
    #bottom-bar {
      position: fixed; bottom: 0; left: 0; right: 0;
      height: 36px;
      display: flex; align-items: center; justify-content: center; gap: 32px;
      background: rgba(5,5,5,0.75);
      backdrop-filter: blur(16px) saturate(150%);
      -webkit-backdrop-filter: blur(16px) saturate(150%);
      border-top: 1px solid rgba(255,255,255,0.04);
      z-index: 100;
    }
    .bar-item {
      display: flex; align-items: center; gap: 7px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px; letter-spacing: 1.2px;
      color: var(--text-dim); text-transform: uppercase;
    }
    .bar-dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--danger); box-shadow: 0 0 5px rgba(239,68,68,0.6);
    }

    /* ══════════════════════════════════════════════
       HOME SCREEN
    ══════════════════════════════════════════════ */
    #home-screen {
      position: fixed; inset: 0;
      display: flex; align-items: flex-start; justify-content: center;
      z-index: 10; padding: 56px 16px 36px; overflow-y: auto;
      transition: opacity 0.3s ease, transform 0.3s ease;
    }
    #home-screen.hidden {
      opacity: 0; transform: scale(0.97);
      pointer-events: none;
    }

    .card-outer-bloom {
      position: fixed;
      width: 520px; height: 520px;
      top: 50%; left: 50%; transform: translate(-50%, -50%);
      background: radial-gradient(ellipse at 50% 40%,
        rgba(6,182,212,0.07) 0%, rgba(59,130,246,0.03) 40%, transparent 70%);
      border-radius: 50%; pointer-events: none; z-index: 9;
      animation: breatheBloom 6s ease-in-out infinite;
      transition: opacity 0.4s;
    }
    #home-screen.hidden ~ .card-outer-bloom { opacity: 0; }
    @keyframes breatheBloom {
      0%,100% { opacity:0.6; transform:translate(-50%,-50%) scale(1); }
      50%      { opacity:1;   transform:translate(-50%,-50%) scale(1.06); }
    }

    .home-card {
      width: 100%; max-width: 400px; position: relative;
      border-radius: 28px; padding: 2px;
      animation: cardIn 0.55s cubic-bezier(0.16,1,0.3,1) both; z-index: 10;
      margin: auto 0;
    }
    .home-card::before {
      content: ''; position: absolute; inset: 0; border-radius: 28px; padding: 1.5px;
      background: linear-gradient(145deg,
        rgba(6,182,212,0.35) 0%, rgba(59,130,246,0.15) 30%,
        rgba(44,44,44,0.2) 60%, rgba(6,182,212,0.1) 100%);
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor; mask-composite: exclude;
      pointer-events: none; z-index: 2;
    }
    .home-card::after {
      content: ''; position: absolute; inset: 0; border-radius: 28px;
      background:
        radial-gradient(ellipse at 30% 0%, rgba(6,182,212,0.12) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 100%, rgba(59,130,246,0.07) 0%, transparent 50%);
      pointer-events: none; z-index: 1;
    }
    .card-inner {
      position: relative; z-index: 3;
      background: rgba(10,10,10,0.82);
      backdrop-filter: blur(40px) saturate(160%);
      -webkit-backdrop-filter: blur(40px) saturate(160%);
      border-radius: 27px; padding: 24px 20px 20px; overflow: hidden;
    }
    .card-inner::before {
      content: ''; position: absolute; inset: 0; border-radius: 27px;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
      background-size: 200px; opacity: 0.6; pointer-events: none; z-index: 0;
    }
    .card-inner > * { position: relative; z-index: 1; }
    @keyframes cardIn {
      from { opacity:0; transform:scale(0.94) translateY(18px); }
      to   { opacity:1; transform:scale(1) translateY(0); }
    }
    @keyframes cardShake {
      0%,100%{transform:translateX(0)} 15%{transform:translateX(-8px)} 30%{transform:translateX(8px)}
      45%{transform:translateX(-5px)} 60%{transform:translateX(5px)}
      75%{transform:translateX(-3px)} 90%{transform:translateX(3px)}
    }
    .home-card.shake { animation: cardShake 0.42s ease; }
    .card-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:20px; }
    .card-icon {
      width:44px; height:44px;
      background: linear-gradient(135deg, rgba(6,182,212,0.2) 0%, rgba(6,182,212,0.08) 100%);
      border-radius:14px; display:flex; align-items:center; justify-content:center;
      box-shadow: inset 0 0 0 1px rgba(6,182,212,0.25), 0 4px 16px rgba(6,182,212,0.12);
    }
    .card-icon svg { width:22px; height:22px; }
    .card-badge {
      font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:1.5px;
      text-transform:uppercase; color:var(--primary); opacity:0.7;
      background:rgba(6,182,212,0.08); padding:4px 10px; border-radius:100px;
      border:1px solid rgba(6,182,212,0.15);
    }
    .hero-heading {
      font-family:'Space Grotesk',sans-serif; font-size:24px; font-weight:800;
      letter-spacing:-0.8px; line-height:1.15; color:var(--text); margin-bottom:4px;
    }
    .hero-heading span {
      background:linear-gradient(135deg,#fff 0%,rgba(232,234,246,0.7) 100%);
      -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    }
    .hero-sub { font-size:12px; color:var(--text-muted); margin-bottom:16px; line-height:1.5; }
    .otp-row { display:flex; gap:8px; justify-content:center; margin-bottom:4px; }
    .otp-box {
      width:52px; height:56px; background:rgba(14,14,14,0.6); border:none; border-radius:14px;
      font-family:'JetBrains Mono',monospace; font-size:24px; font-weight:500;
      color:var(--text); text-align:center; outline:none;
      transition:background 0.2s,box-shadow 0.25s,transform 0.1s; caret-color:var(--primary);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07), inset 0 1px 0 rgba(255,255,255,0.05);
    }
    .otp-box:focus {
      background:rgba(6,182,212,0.08);
      box-shadow: inset 0 0 0 1.5px var(--primary), 0 0 0 4px rgba(6,182,212,0.12), 0 8px 24px rgba(6,182,212,0.1);
      transform:translateY(-1px);
    }
    .otp-box.filled {
      background:rgba(6,182,212,0.05);
      box-shadow: inset 0 0 0 1.5px rgba(59,130,246,0.3), inset 0 1px 0 rgba(59,130,246,0.1);
    }
    .globe-wrap {
      position:relative; margin:8px 0 2px; border-radius:16px; overflow:hidden;
      background:rgba(5,5,5,0.5);
      box-shadow: inset 0 0 0 1px rgba(6,182,212,0.08), inset 0 0 40px rgba(6,182,212,0.03);
    }
    .globe-wrap::before {
      content:''; position:absolute; inset:0;
      background:radial-gradient(ellipse at 50% 50%,rgba(6,182,212,0.06) 0%,transparent 70%);
      pointer-events:none; z-index:1;
    }
    #globe-canvas { display:block; position:relative; z-index:2; margin:0 auto; max-width:100%; height:auto; }
    .globe-label {
      text-align:center; font-family:'JetBrains Mono',monospace;
      font-size:9px; color:var(--text-dim); letter-spacing:1px; margin-bottom:12px;
      text-transform:uppercase; padding-top:6px;
    }
    .globe-label span { color:rgba(6,182,212,0.5); }
    .btn-primary {
      width:100%; height:48px;
      background:linear-gradient(135deg,#06b6d4 0%,#0284c7 50%,#0369a1 100%);
      border:none; border-radius:16px; color:#fff;
      font-family:'Space Grotesk',sans-serif; font-size:14px; font-weight:700; letter-spacing:0.3px;
      cursor:pointer; margin-bottom:10px;
      transition:filter 0.2s,transform 0.12s,box-shadow 0.2s;
      box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 4px 20px rgba(6,182,212,0.2);
      position:relative; overflow:hidden;
    }
    .btn-primary::before {
      content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
      background:linear-gradient(90deg,transparent,rgba(255,255,255,0.12),transparent);
      transition:left 0.4s ease;
    }
    .btn-primary:hover::before { left:100%; }
    .btn-primary:hover { filter:brightness(1.1); box-shadow:0 1px 0 rgba(255,255,255,0.2) inset,0 6px 28px rgba(6,182,212,0.35); transform:translateY(-1px); }
    .btn-primary:active { transform:scale(0.98) translateY(0); filter:brightness(0.96); }
    .btn-ghost {
      width:100%; height:48px; background:rgba(255,255,255,0.03);
      border:none; border-radius:16px; color:var(--text-muted);
      font-family:'Space Grotesk',sans-serif; font-size:14px; font-weight:600;
      cursor:pointer; margin-bottom:10px;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), inset 0 1px 0 rgba(255,255,255,0.05);
      transition:box-shadow 0.2s,color 0.2s,background 0.2s,transform 0.12s;
    }
    .btn-ghost:hover {
      box-shadow: inset 0 0 0 1px rgba(6,182,212,0.28), inset 0 1px 0 rgba(6,182,212,0.1), 0 4px 16px rgba(6,182,212,0.08);
      background:rgba(6,182,212,0.06); color:var(--text); transform:translateY(-1px);
    }
    .btn-ghost:active { transform:scale(0.98); }
    .join-error {
      font-family:'JetBrains Mono',monospace; font-size:11px;
      color:#f87171; text-align:center; min-height:16px;
      margin-top:-4px; margin-bottom:8px; letter-spacing:0.3px;
    }
    .divider { display:flex; align-items:center; gap:12px; margin:4px 0 10px; }
    .divider-line { flex:1; height:1px; background:rgba(255,255,255,0.05); }
    .divider-text { font-size:10px; color:var(--text-dim); font-family:'JetBrains Mono',monospace; letter-spacing:1.5px; text-transform:uppercase; }
    .qr-tabs {
      display:flex; background:rgba(8,8,8,0.6); border-radius:14px; padding:3px; margin-bottom:10px;
      box-shadow:inset 0 0 0 1px rgba(255,255,255,0.06);
    }
    .qr-tab {
      flex:1; height:34px; border:none; border-radius:12px; background:transparent; color:var(--text-muted);
      font-family:'Space Grotesk',sans-serif; font-size:12px; font-weight:600;
      cursor:pointer; transition:background 0.2s,color 0.2s,box-shadow 0.2s;
    }
    .qr-tab.active { background:rgba(6,182,212,0.16); color:var(--primary); box-shadow:inset 0 0 0 1px rgba(6,182,212,0.2); }
    .qr-panel { display:none; text-align:center; }
    .qr-panel.active { display:block; }
    .qr-placeholder { font-size:12px; color:var(--text-dim); font-family:'JetBrains Mono',monospace; padding:20px 0; letter-spacing:0.3px; }
    #qr-output { display:flex; justify-content:center; margin-bottom:6px; }
    #qr-output canvas, #qr-output img { border-radius:12px; background:#fff; padding:10px; box-shadow:0 0 0 1px rgba(255,255,255,0.1),0 8px 32px rgba(0,0,0,0.4); }
    .qr-label { font-size:10px; color:var(--text-dim); font-family:'JetBrains Mono',monospace; letter-spacing:0.8px; text-transform:uppercase; }
    .qr-dev-tip { font-size:10px; color:rgba(245,158,11,0.9); font-family:'JetBrains Mono',monospace; letter-spacing:0.3px; margin-top:4px; line-height:1.3; }
    #scanner-wrap {
      position:relative; width:130px; height:130px; margin:0 auto 6px; border-radius:16px; overflow:hidden;
      background:rgba(8,8,8,0.8); box-shadow:inset 0 0 0 1px rgba(6,182,212,0.15);
    }
    #scanner-video { width:100%; height:100%; object-fit:cover; display:block; }
    .scanner-corner { position:absolute; width:22px; height:22px; border-color:var(--primary); border-style:solid; border-width:0; }
    .scanner-corner.tl{top:8px;left:8px;border-top-width:2px;border-left-width:2px;border-radius:4px 0 0 0;}
    .scanner-corner.tr{top:8px;right:8px;border-top-width:2px;border-right-width:2px;border-radius:0 4px 0 0;}
    .scanner-corner.bl{bottom:8px;left:8px;border-bottom-width:2px;border-left-width:2px;border-radius:0 0 0 4px;}
    .scanner-corner.br{bottom:8px;right:8px;border-bottom-width:2px;border-right-width:2px;border-radius:0 0 4px 0;}
    .scanner-line {
      position:absolute; left:8px; right:8px; height:1px;
      background:linear-gradient(90deg,transparent,var(--primary),rgba(8,145,178,0.8),transparent);
      box-shadow:0 0 8px rgba(6,182,212,0.6);
      animation:scanLine 2s ease-in-out infinite;
    }
    @keyframes scanLine{0%,100%{top:8%;opacity:.5}50%{top:92%;opacity:1}}
    #scanner-denied { font-size:11px; color:var(--text-dim); font-family:'JetBrains Mono',monospace; text-align:center; letter-spacing:0.3px; line-height:1.7; padding:12px 0 4px; }

    /* ══════════════════════════════════════════════
       CHAPTER 3 — SENDER WORKSPACE
    ══════════════════════════════════════════════ */
    #sender-screen {
      position: fixed; inset: 0;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      z-index: 10; padding: 56px 24px 36px;
      opacity: 0; pointer-events: none;
      transition: opacity 0.35s ease;
    }
    #sender-screen.visible { opacity: 1; pointer-events: all; }
    #sender-screen:not(.visible) {
      display: none !important;
      opacity: 0 !important;
      pointer-events: none !important;
    }


    /* ── DROP ZONE ── */
    #drop-zone {
      width: 100%; max-width: 540px;
      border-radius: 22px; padding: 56px 32px;
      background: rgba(0,0,0,0.35);
      border: 1.5px dashed rgba(255,255,255,0.12);
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 12px; cursor: pointer; text-align: center;
      transition: background 0.2s, border-color 0.2s, opacity 0.3s, transform 0.3s;
      user-select: none;
    }
    #drop-zone:hover, #drop-zone.dragover {
      background: rgba(6,182,212,0.05);
      border-color: rgba(6,182,212,0.4);
    }
    #drop-zone.dragover .drop-main-text { opacity: 0; }
    #drop-zone.dragover .drop-release-text { opacity: 1; }

    .drop-icon { color: rgba(6,182,212,0.5); margin-bottom: 4px; }
    .drop-icon svg { width: 40px; height: 40px; }
    .drop-main-text {
      font-family: 'Space Grotesk', sans-serif; font-size: 16px; font-weight: 600;
      color: var(--text-muted); transition: opacity 0.15s;
    }
    .drop-release-text {
      position: absolute; font-family: 'Space Grotesk', sans-serif; font-size: 16px; font-weight: 600;
      color: var(--primary); opacity: 0; transition: opacity 0.15s;
    }
    .drop-sub-text {
      font-family: 'JetBrains Mono', monospace; font-size: 11px;
      color: var(--text-dim); letter-spacing: 0.5px;
    }
    #file-input { display: none; }

    /* ── TRANSFER QUEUE ── */
    #queue-wrap {
      width: 100%; max-width: 540px; margin-top: 12px;
      display: none;
    }
    #queue-wrap.visible { display: block; }
    .queue-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
    .queue-item {
      display: flex; align-items: center; gap: 12px;
      background: rgba(10,10,10,0.6);
      backdrop-filter: blur(16px);
      border-radius: 12px; padding: 10px 14px;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
      animation: queueItemIn 0.25s cubic-bezier(0.16,1,0.3,1) both;
    }
    @keyframes queueItemIn {
      from { opacity:0; transform:translateY(8px); }
      to   { opacity:1; transform:translateY(0); }
    }
    .queue-file-icon {
      width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
      background: rgba(6,182,212,0.1); display: flex; align-items: center; justify-content: center;
      font-size: 14px;
    }
    .queue-file-info { flex: 1; min-width: 0; }
    .queue-file-name {
      font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500;
      color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .queue-file-size {
      font-family: 'JetBrains Mono', monospace; font-size: 10px;
      color: var(--text-dim); margin-top: 2px; letter-spacing: 0.3px;
    }
    .queue-remove {
      background: transparent; border: none; color: var(--text-dim); cursor: pointer;
      width: 24px; height: 24px; border-radius: 6px; font-size: 16px; line-height: 1;
      display: flex; align-items: center; justify-content: center;
      transition: color 0.15s, background 0.15s; flex-shrink: 0;
    }
    .queue-remove:hover { color: var(--danger); background: rgba(239,68,68,0.1); }
    .add-more-link {
      font-family: 'JetBrains Mono', monospace; font-size: 11px;
      color: var(--primary); opacity: 0.7; cursor: pointer; letter-spacing: 0.3px;
      background: transparent; border: none; text-align: left;
      text-decoration: underline; text-underline-offset: 2px;
      transition: opacity 0.15s;
    }
    .add-more-link:hover { opacity: 1; }

    /* ── FILE INFO OVERLAY ── */
    #file-overlay {
      position: fixed; z-index: 21;
      display: none; pointer-events: none;
      transform: translate(-50%, -100%);
    }
    #file-overlay.active { display: block; }
    .file-overlay-inner {
      background: rgba(10,10,12,0.75);
      backdrop-filter: blur(20px);
      border-radius: 12px; padding: 8px 16px;
      text-align: center;
      box-shadow: inset 0 0 0 1px rgba(6,182,212,0.15), 0 8px 32px rgba(0,0,0,0.5);
    }
    .file-overlay-name {
      font-family: 'JetBrains Mono', monospace; font-size: 12px;
      color: var(--text); letter-spacing: 0.3px;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px;
    }
    .file-overlay-size {
      font-family: 'JetBrains Mono', monospace; font-size: 10px;
      color: var(--primary); letter-spacing: 0.5px; margin-top: 2px;
    }

    /* ── GRAB / RELEASE CONTROL BUTTONS ── */
    #control-panel {
      position: fixed; bottom: 56px; left: 32px;
      display: none; flex-direction: column; gap: 10px; z-index: 30;
    }
    #control-panel.visible { display: flex; }
    .ctrl-btn {
      display: flex; align-items: center; gap: 10px;
      background: rgba(8,8,10,0.75);
      backdrop-filter: blur(20px);
      border: none; border-radius: 100px; padding: 12px 22px;
      color: var(--text-muted); cursor: pointer;
      font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 600;
      box-shadow: inset 0 0 0 1px rgba(6,182,212,0.2), 0 8px 32px rgba(0,0,0,0.5);
      transition: all 0.2s;
    }
    .ctrl-btn:hover { color: var(--text); background: rgba(6,182,212,0.1); box-shadow: inset 0 0 0 1px rgba(6,182,212,0.45), 0 8px 32px rgba(0,0,0,0.5); }
    .ctrl-btn:disabled { opacity: 0.3; cursor: default; pointer-events: none; }
    .ctrl-btn svg { width: 20px; height: 20px; flex-shrink: 0; }
    #btn-grab .icon-color { stroke: rgba(6,182,212,0.8); }
    #btn-drop .icon-color { stroke: rgba(140,231,255,0.8); }
    #btn-drop:not(:disabled) {
      box-shadow: inset 0 0 0 1px rgba(140,231,255,0.4),
                  0 0 24px rgba(140,231,255,0.18),
                  0 8px 32px rgba(0,0,0,0.5);
      animation: ctrlDropPulse 2s ease-in-out infinite;
    }
    @keyframes ctrlDropPulse {
      0%, 100% { box-shadow: inset 0 0 0 1px rgba(140,231,255,0.3), 0 0 18px rgba(140,231,255,0.12); }
      50%      { box-shadow: inset 0 0 0 1px rgba(140,231,255,0.6), 0 0 32px rgba(140,231,255,0.28); }
    }


    /* ── PROGRESS STATE ── */
    #progress-screen {
      position: fixed; inset: 0; z-index: 25;
      display: flex; flex-direction: column; align-items: center; justify-content: space-between;
      padding: 0 24px;
      opacity: 0; pointer-events: none; transition: opacity 0.3s;
      background: transparent;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    #progress-screen.visible { opacity: 1; }
    #progress-screen > * { pointer-events: none; }
    #progress-screen.visible > * { pointer-events: auto; }

    .progress-top-region, .progress-bottom-region {
      flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; align-items: center; width: 100%; box-sizing: border-box;
    }
    .progress-top-region {
      justify-content: flex-end;
      padding: calc(48px + env(safe-area-inset-top, 0px)) 0 10px 0;
    }
    .progress-bottom-region {
      justify-content: flex-start;
      padding: 10px 0 calc(40px + env(safe-area-inset-bottom, 0px)) 0;
      gap: 10px;
    }

    .progress-file-label {
      font-family: 'JetBrains Mono', monospace; font-size: 11px;
      color: var(--text-dim); letter-spacing: 1px; text-transform: uppercase;
    }
    .progress-ring-wrap {
      position: relative; width: 180px; height: 180px;
    }
    .progress-ring-wrap svg { transform: rotate(-90deg); }
    .progress-ring-bg { fill: none; stroke: rgba(255,255,255,0.06); stroke-width: 4; }
    .progress-ring-fill {
      fill: none; stroke: url(#ringGrad); stroke-width: 4;
      stroke-linecap: round;
      stroke-dasharray: 502;
      stroke-dashoffset: 502;
      transition: stroke-dashoffset 0.2s linear;
    }
    .progress-ring-fill.success-flash { stroke: #22c55e; transition: stroke 0.3s; }
    .progress-ring-center {
      position: absolute; inset: 0; display: flex; flex-direction: column;
      align-items: center; justify-content: center; gap: 2px;
    }
    .progress-pct {
      font-family: 'JetBrains Mono', monospace; font-size: 38px; font-weight: 500;
      color: var(--text); letter-spacing: -1px; line-height: 1;
    }
    .progress-pct-sym {
      font-family: 'JetBrains Mono', monospace; font-size: 14px;
      color: var(--text-dim);
    }
    .progress-meta {
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      width: 100%;
      min-width: 270px;
      max-width: 340px;
      box-sizing: border-box;
      background: rgba(10, 10, 15, 0.78);
      backdrop-filter: blur(20px) saturate(160%);
      -webkit-backdrop-filter: blur(20px) saturate(160%);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 16px;
      padding: 10px 20px;
      box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
      transition: all 0.25s ease;
    }
    .progress-filename {
      font-family: 'JetBrains Mono', monospace;
      font-size: 12.5px;
      font-weight: 500;
      color: var(--text);
      letter-spacing: 0.3px;
      width: 100%;
      max-width: 290px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: center;
    }
    .progress-stats {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
      font-weight: 500;
      color: var(--primary);
      letter-spacing: 0.5px;
      text-align: center;
    }

    /* cancel button */
    #cancel-area, #rx-cancel-area {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      z-index: 28;
    }
    .btn-cancel {
      background: rgba(10, 10, 15, 0.75); border: none; border-radius: 12px; padding: 9px 24px;
      color: var(--text-muted); cursor: pointer; font-family: 'Space Grotesk', sans-serif;
      font-size: 12.5px; font-weight: 600; letter-spacing: 0.3px;
      min-width: 140px; text-align: center;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12), 0 4px 16px rgba(0,0,0,0.3);
      transition: color 0.2s, box-shadow 0.2s, background 0.2s;
    }
    .btn-cancel:hover { color: var(--danger); box-shadow: inset 0 0 0 1px rgba(239,68,68,0.4); background: rgba(239,68,68,0.06); }

    /* cancel confirm */
    #cancel-confirm, #rx-cancel-confirm {
      display: none; text-align: center; gap: 10px;
      flex-direction: column; align-items: center;
    }
    #cancel-confirm.visible, #rx-cancel-confirm.visible { display: flex; }
    .cancel-confirm-text {
      font-family: 'JetBrains Mono', monospace; font-size: 11.5px; font-weight: 500;
      color: rgba(248,113,113,0.95); letter-spacing: 0.3px; max-width: 300px; line-height: 1.45;
    }
    .cancel-confirm-btns { display: flex; gap: 10px; justify-content: center; }
    .btn-confirm-yes {
      background: rgba(239,68,68,0.14); border: none; border-radius: 10px; padding: 8px 22px;
      color: var(--danger); cursor: pointer; font-family: 'Space Grotesk', sans-serif;
      font-size: 12px; font-weight: 600; box-shadow: inset 0 0 0 1px rgba(239,68,68,0.3);
      transition: background 0.2s;
    }
    .btn-confirm-yes:hover { background: rgba(239,68,68,0.22); }
    .btn-confirm-no {
      background: rgba(255,255,255,0.06); border: none; border-radius: 10px; padding: 8px 22px;
      color: var(--text); cursor: pointer; font-family: 'Space Grotesk', sans-serif;
      font-size: 12px; font-weight: 600; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);
      transition: background 0.2s;
    }
    .btn-confirm-no:hover { background: rgba(255,255,255,0.1); }

    @media (max-height: 560px) {
      .progress-ring-wrap {
        transform: scale(0.82);
        margin: -12px 0;
      }
      .progress-bottom-region {
        padding-top: 4px;
        gap: 6px;
      }
      .progress-meta {
        padding: 8px 16px;
        gap: 2px;
      }
    }

    /* ── SUCCESS STATE ── */
    #success-screen {
      position: fixed; inset: 0; z-index: 25;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 16px; padding: 56px 24px 36px;
      opacity: 0; pointer-events: none; transition: opacity 0.35s;
      text-align: center;
      background: rgba(10, 10, 10, 0.88);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
    }
    #success-screen.visible { opacity: 1; pointer-events: all; }

    .success-check {
      width: 72px; height: 72px; border-radius: 50%;
      background: rgba(34,197,94,0.1);
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 0 0 12px rgba(34,197,94,0.05), 0 0 40px rgba(34,197,94,0.12);
      animation: successPop 0.4s cubic-bezier(0.16,1,0.3,1) both;
    }
    @keyframes successPop { from{transform:scale(0.6);opacity:0} to{transform:scale(1);opacity:1} }
    .success-check svg { width: 36px; height: 36px; color: var(--success); }

    .success-title {
      font-family: 'Space Grotesk', sans-serif; font-size: 26px; font-weight: 700;
      color: var(--text); letter-spacing: -0.5px;
    }
    .success-meta {
      font-family: 'JetBrains Mono', monospace; font-size: 12px;
      color: var(--text-dim); letter-spacing: 0.5px;
    }
    .success-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
    .btn-success-primary {
      background: linear-gradient(135deg,#06b6d4,#0284c7);
      border: none; border-radius: 14px; padding: 12px 28px;
      color: #fff; cursor: pointer;
      font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 700;
      box-shadow: 0 4px 20px rgba(6,182,212,0.25);
      transition: filter 0.2s, transform 0.12s;
    }
    .btn-success-primary:hover { filter: brightness(1.1); transform: translateY(-1px); }
    .btn-success-ghost {
      background: transparent; border: none; border-radius: 14px; padding: 12px 24px;
      color: var(--text-muted); cursor: pointer;
      font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 600;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);
      transition: color 0.2s, box-shadow 0.2s, background 0.2s;
    }
    .btn-success-ghost:hover { color: var(--danger); box-shadow: inset 0 0 0 1px rgba(239,68,68,0.25); background: rgba(239,68,68,0.05); }

    /* ══════════════════════════════════════════════
       CHAPTER 4 — RECEIVER WORKSPACE
    ══════════════════════════════════════════════ */
    #receiver-screen {
      position: fixed; inset: 0;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      z-index: 10; padding: 56px 24px 36px;
      opacity: 0; pointer-events: none;
      transition: opacity 0.35s ease;
    }
    #receiver-screen.visible { opacity: 1; pointer-events: all; }

    /* ── GRAVITY WELL IDLE ── */
    #gravity-well-ui {
      display: flex; flex-direction: column; align-items: center; gap: 28px;
      transition: opacity 0.4s ease;
    }
    #gravity-well-ui.hidden { opacity: 0; pointer-events: none; }

    .gravity-well-ring-wrap {
      position: relative; width: 180px; height: 180px;
    }
    /* Concentric animated rings suggesting a vortex */
    .gw-ring {
      position: absolute; border-radius: 50%;
      border: 1px solid rgba(6,182,212,0.18);
      animation: gwPulse 3s ease-in-out infinite;
    }
    .gw-ring:nth-child(1) { inset: 0;          animation-delay: 0s;    border-color: rgba(6,182,212,0.22); }
    .gw-ring:nth-child(2) { inset: 16px;       animation-delay: -0.6s; border-color: rgba(6,182,212,0.16); }
    .gw-ring:nth-child(3) { inset: 32px;       animation-delay: -1.2s; border-color: rgba(140,231,255,0.12); }
    .gw-ring:nth-child(4) { inset: 48px;       animation-delay: -1.8s; border-color: rgba(140,231,255,0.10); }
    .gw-ring:nth-child(5) { inset: 64px;       animation-delay: -2.4s; border-color: rgba(59,130,246,0.08); }
    @keyframes gwPulse {
      0%,100% { transform: scale(1);    opacity: 0.6; }
      50%      { transform: scale(0.88); opacity: 1;   }
    }

    .gw-core {
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
    }
    .gw-void {
      width: 28px; height: 28px; border-radius: 50%;
      background: radial-gradient(circle, rgba(0,0,0,0.95) 0%, rgba(6,182,212,0.08) 70%, transparent 100%);
      box-shadow: 0 0 0 6px rgba(6,182,212,0.06), 0 0 24px rgba(6,182,212,0.2);
      animation: voidBreath 3s ease-in-out infinite;
    }
    @keyframes voidBreath {
      0%,100% { transform: scale(1);    box-shadow: 0 0 0 6px rgba(6,182,212,0.06), 0 0 24px rgba(6,182,212,0.2); }
      50%      { transform: scale(1.25); box-shadow: 0 0 0 10px rgba(6,182,212,0.04), 0 0 40px rgba(6,182,212,0.35); }
    }

    .gravity-well-label {
      font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 1.5px;
      color: var(--text-dim); text-transform: uppercase; text-align: center;
      animation: labelBlink 4s ease-in-out infinite;
    }
    @keyframes labelBlink {
      0%,85%,100% { opacity: 0.5; }
      92%          { opacity: 1; }
    }


    /* ── RECEIVE PROGRESS ── */
    #receive-progress {
      position: fixed; inset: 0; z-index: 25;
      display: flex; flex-direction: column; align-items: center; justify-content: space-between;
      padding: 0 24px;
      opacity: 0; pointer-events: none; transition: opacity 0.35s;
      background: transparent;
    }
    #receive-progress.visible { opacity: 1; }
    #receive-progress > * { pointer-events: none; }
    #receive-progress.visible > * { pointer-events: auto; }

    .receive-label {
      font-family: 'JetBrains Mono', monospace; font-size: 11px;
      color: var(--text-dim); letter-spacing: 1px; text-transform: uppercase;
    }
    /* Reuse progress-ring styles, but add a receive-specific gradient */
    .receive-ring-fill {
      fill: none; stroke: url(#receiveRingGrad); stroke-width: 4;
      stroke-linecap: round;
      stroke-dasharray: 502;
      stroke-dashoffset: 502;
      transition: stroke-dashoffset 0.2s linear;
    }

    /* ── RECEIVE SUCCESS ── */
    #receive-success {
      position: fixed; inset: 0; z-index: 26;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 18px; padding: 56px 24px 36px;
      opacity: 0; pointer-events: none; transition: opacity 0.4s;
      text-align: center;
    }
    #receive-success.visible { opacity: 1; pointer-events: all; }

    /* Transfer rings — self-contained layer, never touches the particle field.
       Sits directly beneath the progress ring SVG (z-25) so rings read as
       emanating from behind it. Owned solely by TransferRings.start/stop. */
    #transfer-rings-canvas {
      position: fixed; inset: 0; z-index: 24; pointer-events: none; display: none;
    }

    /* Drop zone and sender workspace are completely removed from layout during active transfer, receive animation, or receiver mode */
    body.transferring #sender-screen,
    body.transferring #drop-zone,
    body.transferring #queue-wrap,
    body:has(#receive-progress.visible) #sender-screen,
    body:has(#receive-progress.visible) #drop-zone,
    body:has(#receive-progress.visible) #queue-wrap,
    body:has(#receiver-screen.visible) #sender-screen,
    body:has(#receiver-screen.visible) #drop-zone,
    body:has(#receiver-screen.visible) #queue-wrap,
    body:has(#receive-success.visible) #sender-screen,
    body:has(#receive-success.visible) #drop-zone,
    body:has(#receive-success.visible) #queue-wrap {
      display: none !important;
      opacity: 0 !important;
      pointer-events: none !important;
    }

    body:has(#progress-screen.visible) #receiver-screen,
    body:has(#progress-screen.visible) #receive-progress,
    body:has(#progress-screen.visible) #receive-success,
    body:has(#progress-screen.visible) #gravity-well-ui {
      display: none !important;
      opacity: 0 !important;
      pointer-events: none !important;
    }

    .receive-success-icon {
      width: 72px; height: 72px; border-radius: 50%;
      background: rgba(140,231,255,0.08);
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 0 0 14px rgba(140,231,255,0.04), 0 0 48px rgba(6,182,212,0.15);
      animation: rxSuccessPop 0.45s cubic-bezier(0.16,1,0.3,1) both;
    }
    @keyframes rxSuccessPop { from{transform:scale(0.5);opacity:0} to{transform:scale(1);opacity:1} }
    .receive-success-icon svg { width: 36px; height: 36px; }

    .receive-success-title {
      font-family: 'Space Grotesk', sans-serif; font-size: 26px; font-weight: 700;
      color: var(--text); letter-spacing: -0.5px;
    }
    .receive-success-file {
      font-family: 'JetBrains Mono', monospace; font-size: 12px;
      color: var(--text-dim); letter-spacing: 0.5px;
      max-width: 300px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }

    .btn-download-main {
      background: linear-gradient(135deg, #8ce7ff 0%, #06b6d4 50%, #0284c7 100%);
      border: none; border-radius: 16px; padding: 14px 36px;
      color: #050505; cursor: pointer;
      font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 800;
      letter-spacing: 0.3px;
      box-shadow: 0 4px 28px rgba(140,231,255,0.3), 0 0 0 1px rgba(140,231,255,0.2);
      transition: filter 0.2s, transform 0.12s, box-shadow 0.2s;
      animation: rxSuccessPop 0.5s 0.15s cubic-bezier(0.16,1,0.3,1) both;
    }
    .btn-download-main:hover {
      filter: brightness(1.08);
      transform: translateY(-2px);
      box-shadow: 0 8px 36px rgba(140,231,255,0.4), 0 0 0 1px rgba(140,231,255,0.35);
    }
    .btn-download-main:active { transform: scale(0.98); }

    .receive-success-sub-btns {
      display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 4px;
    }
    .btn-rx-ghost {
      background: transparent; border: none; border-radius: 12px; padding: 10px 22px;
      color: var(--text-muted); cursor: pointer;
      font-family: 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 600;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.09);
      transition: color 0.2s, box-shadow 0.2s, background 0.2s;
    }
    .btn-rx-ghost:hover {
      color: var(--text);
      box-shadow: inset 0 0 0 1px rgba(140,231,255,0.22);
      background: rgba(140,231,255,0.05);
    }

    /* ── RECEIVED FILES PANEL ── */
    #files-panel-toggle {
      position: fixed; right: 24px; bottom: 52px; z-index: 40;
      display: none;
      background: rgba(8,8,10,0.82); backdrop-filter: blur(24px);
      border: none; border-radius: 100px; padding: 11px 18px 11px 14px;
      color: var(--text-muted); cursor: pointer;
      font-family: 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 600;
      box-shadow: inset 0 0 0 1px rgba(140,231,255,0.2), 0 8px 32px rgba(0,0,0,0.6);
      transition: all 0.2s; gap: 8px; align-items: center;
    }
    #files-panel-toggle.visible { display: flex; }
    #files-panel-toggle:hover { color: var(--text); box-shadow: inset 0 0 0 1px rgba(140,231,255,0.45), 0 8px 32px rgba(0,0,0,0.6); background: rgba(140,231,255,0.06); }
    .panel-toggle-count {
      background: rgba(140,231,255,0.2); color: #8ce7ff;
      border-radius: 100px; padding: 1px 8px; font-size: 10px;
      font-family: 'JetBrains Mono', monospace; letter-spacing: 0.5px; font-weight: 500;
    }

    /* Desktop: slide-in right drawer */
    #files-panel {
      position: fixed; top: 56px; right: 0; bottom: 36px;
      width: 300px;
      background: rgba(8,8,10,0.92);
      backdrop-filter: blur(36px) saturate(160%);
      -webkit-backdrop-filter: blur(36px) saturate(160%);
      border-left: 1px solid rgba(140,231,255,0.08);
      z-index: 35;
      display: flex; flex-direction: column;
      transform: translateX(100%);
      transition: transform 0.38s cubic-bezier(0.16,1,0.3,1);
      overflow: hidden;
    }
    #files-panel.open { transform: translateX(0); }

    /* Mobile: bottom sheet */
    @media (max-width: 767px) {
      #top-bar {
        padding-top: max(8px, env(safe-area-inset-top, 0px));
        height: calc(60px + env(safe-area-inset-top, 0px));
      }
      #files-panel {
        top: auto; left: 0; right: 0; bottom: 36px;
        width: 100%; height: 62vh;
        border-left: none; border-top: 1px solid rgba(140,231,255,0.08);
        border-radius: 22px 22px 0 0;
        transform: translateY(100%);
      }
      #files-panel.open { transform: translateY(0); }
      #files-panel-toggle {
        right: 50%; bottom: 44px;
        transform: translateX(50%);
      }
      #files-panel-toggle.visible { display: flex; }
      #home-screen {
        padding-top: calc(64px + env(safe-area-inset-top, 0px)) !important;
        padding-bottom: 36px;
        padding-left: 12px;
        padding-right: 12px;
      }
      #sender-screen, #receiver-screen, #success-screen, #receive-success {
        padding-top: calc(64px + env(safe-area-inset-top, 0px)) !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-bottom: 36px !important;
      }
      #progress-screen, #receive-progress {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
      }
      .progress-meta {
        min-width: 270px;
        max-width: 340px;
        padding: 10px 20px;
        gap: 4px;
      }
      .progress-bottom-region {
        padding-top: 10px;
        padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
        gap: 10px;
      }
      .progress-top-region {
        padding-bottom: 10px;
      }
      .card-inner {
        padding: 20px 16px 16px;
      }
      .hero-heading {
        font-size: 22px;
        margin-bottom: 4px;
      }
      .hero-sub {
        font-size: 11.5px;
        margin-bottom: 14px;
        line-height: 1.4;
      }
      .otp-box {
        width: 52px;
        height: 56px;
        font-size: 24px;
      }
      .globe-wrap {
        margin: 8px 0 2px;
      }
      .globe-label {
        font-size: 8.5px;
        margin-bottom: 12px;
        letter-spacing: 0.8px;
      }
      .divider {
        margin: 4px 0 10px;
      }
      .qr-tabs {
        margin-bottom: 10px;
      }
      #qr-output {
        margin-bottom: 6px;
      }
      #scanner-wrap {
        width: 140px;
        height: 140px;
        margin: 0 auto 6px;
      }
    }

    .panel-header {
      padding: 18px 18px 12px;
      display: flex; align-items: center; justify-content: space-between;
      border-bottom: 1px solid rgba(255,255,255,0.04); flex-shrink: 0;
    }
    /* Mobile drag handle */
    .panel-drag-handle {
      display: none; width: 36px; height: 4px; border-radius: 2px;
      background: rgba(255,255,255,0.12); margin: 10px auto 0;
    }
    @media (max-width: 767px) { .panel-drag-handle { display: block; } }

    .panel-title {
      font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 700;
      color: var(--text); letter-spacing: -0.2px;
    }
    .panel-actions { display: flex; gap: 6px; }
    .panel-action-btn {
      background: transparent; border: none; border-radius: 8px; padding: 5px 10px;
      color: var(--text-dim); cursor: pointer;
      font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.5px;
      text-transform: uppercase;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07);
      transition: color 0.15s, box-shadow 0.15s, background 0.15s;
    }
    .panel-action-btn:hover { color: var(--text); box-shadow: inset 0 0 0 1px rgba(140,231,255,0.25); background: rgba(140,231,255,0.05); }
    .panel-action-btn.danger:hover { color: var(--danger); box-shadow: inset 0 0 0 1px rgba(239,68,68,0.3); background: rgba(239,68,68,0.06); }

    .panel-body {
      flex: 1; overflow-y: auto; padding: 10px 12px 12px;
      scrollbar-width: thin; scrollbar-color: rgba(6,182,212,0.2) transparent;
    }
    .panel-body::-webkit-scrollbar { width: 4px; }
    .panel-body::-webkit-scrollbar-thumb { background: rgba(6,182,212,0.2); border-radius: 2px; }

    .panel-empty {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      height: 100%; gap: 12px; padding: 32px 0;
    }
    .panel-empty-icon { font-size: 36px; opacity: 0.3; }
    .panel-empty-text {
      font-family: 'JetBrains Mono', monospace; font-size: 11px;
      color: var(--text-dim); letter-spacing: 0.5px;
    }

    .rx-file-card {
      display: flex; align-items: center; gap: 10px;
      background: rgba(14,14,16,0.7);
      border-radius: 12px; padding: 10px 12px; margin-bottom: 6px;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
      animation: rxCardIn 0.3s cubic-bezier(0.16,1,0.3,1) both;
    }
    @keyframes rxCardIn {
      from { opacity:0; transform:translateX(14px); }
      to   { opacity:1; transform:translateX(0); }
    }
    .rx-file-icon {
      width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
      background: rgba(140,231,255,0.08);
      display: flex; align-items: center; justify-content: center; font-size: 16px;
    }
    .rx-file-info { flex: 1; min-width: 0; }
    .rx-file-name {
      font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 500;
      color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .rx-file-meta {
      font-family: 'JetBrains Mono', monospace; font-size: 10px;
      color: var(--text-dim); margin-top: 2px; letter-spacing: 0.2px;
    }
    .btn-rx-dl {
      background: rgba(140,231,255,0.09); border: none; border-radius: 8px;
      padding: 5px 10px; color: #8ce7ff; cursor: pointer; flex-shrink: 0;
      font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 500;
      box-shadow: inset 0 0 0 1px rgba(140,231,255,0.18);
      transition: background 0.15s, box-shadow 0.15s;
    }
    .btn-rx-dl:hover { background: rgba(140,231,255,0.18); box-shadow: inset 0 0 0 1px rgba(140,231,255,0.4); }

    /* ══════════════════════════════════════════════
       CHAPTER 5 — TOAST NOTIFICATIONS + ERROR STATES
    ══════════════════════════════════════════════ */

    /* ── TOAST CONTAINER ── */
    #toast-container {
      position: fixed; top: 68px; right: 20px; z-index: 200;
      display: flex; flex-direction: column; gap: 8px;
      pointer-events: none;
    }

    /* ── INDIVIDUAL TOAST ── */
    .toast {
      display: flex; align-items: flex-start; gap: 12px;
      min-width: 280px; max-width: 360px;
      background: rgba(10,10,12,0.92);
      backdrop-filter: blur(32px) saturate(160%);
      -webkit-backdrop-filter: blur(32px) saturate(160%);
      border-radius: 14px; padding: 13px 14px 13px 16px;
      box-shadow:
        0 8px 40px rgba(0,0,0,0.55),
        inset 0 0 0 1px rgba(255,255,255,0.06),
        inset 0 1px 0 rgba(255,255,255,0.04);
      pointer-events: all;
      position: relative; overflow: hidden;
      animation: toastIn 0.38s cubic-bezier(0.16,1,0.3,1) both;
      will-change: transform, opacity;
    }
    .toast.leaving {
      animation: toastOut 0.3s cubic-bezier(0.4,0,1,1) forwards;
    }

    @keyframes toastIn {
      from { opacity:0; transform:translateX(20px) scale(0.96); }
      to   { opacity:1; transform:translateX(0) scale(1); }
    }
    @keyframes toastOut {
      from { opacity:1; transform:translateX(0) scale(1); max-height:120px; margin-bottom:0; }
      to   { opacity:0; transform:translateX(28px) scale(0.95); max-height:0; margin-bottom:-8px; }
    }

    /* Colored left border accent per type */
    .toast::before {
      content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 3px 0 0 3px;
    }
    .toast.success::before { background: #22c55e; box-shadow: 0 0 12px rgba(34,197,94,0.5); }
    .toast.error::before   { background: #ef4444; box-shadow: 0 0 12px rgba(239,68,68,0.5); }
    .toast.warning::before { background: #f59e0b; box-shadow: 0 0 12px rgba(245,158,11,0.5); }
    .toast.info::before    { background: #06b6d4; box-shadow: 0 0 12px rgba(6,182,212,0.5); }

    .toast-icon {
      font-size: 15px; line-height: 1; flex-shrink: 0; margin-top: 1px;
    }

    .toast-body { flex: 1; min-width: 0; }
    .toast-msg {
      font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500;
      color: var(--text); line-height: 1.45; letter-spacing: 0.1px;
    }

    /* Progress bar: auto-dismiss timer */
    .toast-progress {
      position: absolute; bottom: 0; left: 3px; right: 0; height: 2px;
      border-radius: 0 0 0 0;
    }
    .toast-progress-bar {
      height: 100%; border-radius: 1px;
      transition: width linear;
    }
    .toast.success .toast-progress-bar { background: rgba(34,197,94,0.55); }
    .toast.error   .toast-progress-bar { background: rgba(239,68,68,0.55); }
    .toast.warning .toast-progress-bar { background: rgba(245,158,11,0.55); }
    .toast.info    .toast-progress-bar { background: rgba(6,182,212,0.55); }

    .toast-close {
      background: transparent; border: none; color: var(--text-dim); cursor: pointer;
      font-size: 15px; line-height: 1; padding: 0; flex-shrink: 0; margin-top: 1px;
      width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
      border-radius: 5px; transition: color 0.15s, background 0.15s;
    }
    .toast-close:hover { color: var(--text); background: rgba(255,255,255,0.08); }

    .toast-action-btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 6px;
      margin-top: 8px; padding: 4px 10px;
      background: rgba(6, 182, 212, 0.15);
      border: 1px solid rgba(6, 182, 212, 0.35);
      color: #38bdf8; font-size: 11px; font-weight: 600;
      border-radius: 6px; cursor: pointer; transition: all 0.15s ease;
      font-family: inherit;
    }
    .toast-action-btn:hover {
      background: rgba(6, 182, 212, 0.28);
      border-color: rgba(6, 182, 212, 0.55);
      color: #ffffff;
    }

    /* ── TRANSFER FAILED / ERROR CENTER STATE ── */
    #transfer-error-screen {
      position: fixed; inset: 0; z-index: 26;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 16px; padding: 56px 24px 36px;
      opacity: 0; pointer-events: none; transition: opacity 0.35s;
      text-align: center;
    }
    #transfer-error-screen.visible { opacity: 1; pointer-events: all; }

    .error-icon-wrap {
      width: 72px; height: 72px; border-radius: 50%;
      background: rgba(239,68,68,0.10);
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 0 0 14px rgba(239,68,68,0.04), 0 0 48px rgba(239,68,68,0.12);
      animation: errPop 0.4s cubic-bezier(0.16,1,0.3,1) both;
    }
    @keyframes errPop { from{transform:scale(0.6);opacity:0} to{transform:scale(1);opacity:1} }
    .error-icon-wrap svg { width: 36px; height: 36px; }

    .error-title {
      font-family: 'Space Grotesk', sans-serif; font-size: 24px; font-weight: 700;
      color: #fca5a5; letter-spacing: -0.4px;
    }
    .error-subtitle {
      font-family: 'JetBrains Mono', monospace; font-size: 12px;
      color: var(--text-dim); letter-spacing: 0.3px; max-width: 280px; line-height: 1.6;
    }
    .error-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
    .btn-error-retry {
      background: rgba(239,68,68,0.12); border: none; border-radius: 14px; padding: 12px 28px;
      color: #fca5a5; cursor: pointer;
      font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 700;
      box-shadow: inset 0 0 0 1px rgba(239,68,68,0.3), 0 4px 20px rgba(239,68,68,0.1);
      transition: filter 0.2s, transform 0.12s, background 0.2s;
    }
    .btn-error-retry:hover { background: rgba(239,68,68,0.2); transform: translateY(-1px); filter: brightness(1.08); }
    .btn-error-home {
      background: transparent; border: none; border-radius: 14px; padding: 12px 24px;
      color: var(--text-muted); cursor: pointer;
      font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 600;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.09);
      transition: color 0.2s, box-shadow 0.2s, background 0.2s;
    }
    .btn-error-home:hover { color: var(--text); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2); background: rgba(255,255,255,0.04); }

    /* ── UNSUPPORTED BROWSER GUARD SCREEN ── */
    #unsupported-browser-screen {
      position: fixed; inset: 0; z-index: 99999;
      display: none; align-items: center; justify-content: center;
      background: #08080a; padding: 24px;
      backdrop-filter: blur(24px);
    }
    #unsupported-browser-screen.visible {
      display: flex;
    }
    .unsupported-card {
      max-width: 480px; width: 100%;
      background: rgba(18, 18, 24, 0.9);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 20px; padding: 36px 28px;
      text-align: center;
      box-shadow: 0 24px 48px rgba(0, 0, 0, 0.8);
    }
    .unsupported-badge {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 4px 12px; border-radius: 999px;
      background: rgba(239, 68, 68, 0.12); border: 1px solid rgba(239, 68, 68, 0.3);
      color: #f87171; font-family: 'JetBrains Mono', monospace; font-size: 11px;
      margin-bottom: 18px; text-transform: uppercase; font-weight: 600;
    }
    .unsupported-title {
      font-size: 22px; font-weight: 700; color: #fff; margin-bottom: 12px;
      letter-spacing: -0.02em;
    }
    .unsupported-text {
      font-size: 13.5px; line-height: 1.6; color: #94a3b8; margin-bottom: 18px;
    }
    .unsupported-reasons {
      font-family: 'JetBrains Mono', monospace; font-size: 11.5px;
      color: #fca5a5; background: rgba(239, 68, 68, 0.08);
      border: 1px dashed rgba(239, 68, 68, 0.25); border-radius: 8px;
      padding: 8px 12px; margin-bottom: 20px;
    }
    .browser-links { text-align: left; }
    .browser-rec { font-size: 12px; color: #64748b; margin-bottom: 8px; font-weight: 600; }
    .browser-tags { display: flex; flex-wrap: wrap; gap: 8px; }
    .browser-tag {
      font-size: 12px; color: #cbd5e1; background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px;
      padding: 4px 10px; font-weight: 500;
    }

    /* ── LARGE FILE WARNING MODAL ── */
    #large-file-modal {
      position: fixed; inset: 0; z-index: 180;
      display: flex; align-items: center; justify-content: center;
      background: rgba(0,0,0,0.6); backdrop-filter: blur(8px);
      opacity: 0; pointer-events: none; transition: opacity 0.25s;
    }
    #large-file-modal.visible { opacity: 1; pointer-events: all; }

    .lfm-card {
      background: rgba(12,12,14,0.95); backdrop-filter: blur(40px);
      border-radius: 22px; padding: 32px 28px 24px; max-width: 380px; width: 90%;
      box-shadow: inset 0 0 0 1px rgba(245,158,11,0.18), 0 40px 80px rgba(0,0,0,0.7);
      animation: lfmIn 0.35s cubic-bezier(0.16,1,0.3,1) both;
    }
    @keyframes lfmIn { from{transform:scale(0.94) translateY(12px);opacity:0} to{transform:scale(1) translateY(0);opacity:1} }

    .lfm-icon {
      font-size: 32px; margin-bottom: 14px; display: block;
      filter: drop-shadow(0 0 12px rgba(245,158,11,0.5));
    }
    .lfm-title {
      font-family: 'Space Grotesk', sans-serif; font-size: 20px; font-weight: 700;
      color: var(--text); letter-spacing: -0.3px; margin-bottom: 8px;
    }
    .lfm-body {
      font-family: 'JetBrains Mono', monospace; font-size: 11px;
      color: var(--text-muted); line-height: 1.65; letter-spacing: 0.2px; margin-bottom: 22px;
    }
    .lfm-body strong { color: rgba(245,158,11,0.85); }
    .lfm-btns { display: flex; gap: 10px; }
    .btn-lfm-send {
      flex: 1; height: 44px; background: rgba(245,158,11,0.12);
      border: none; border-radius: 13px; color: #fbbf24; cursor: pointer;
      font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 700;
      box-shadow: inset 0 0 0 1px rgba(245,158,11,0.28);
      transition: background 0.2s, transform 0.12s;
    }
    .btn-lfm-send:hover { background: rgba(245,158,11,0.22); transform: translateY(-1px); }
    .btn-lfm-cancel {
      flex: 1; height: 44px; background: rgba(255,255,255,0.04);
      border: none; border-radius: 13px; color: var(--text-muted); cursor: pointer;
      font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 600;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
      transition: background 0.2s, color 0.2s;
    }
    .btn-lfm-cancel:hover { background: rgba(255,255,255,0.08); color: var(--text); }

    /* ══════════════════════════════════════════════
       ROLE PICKER — shown after valid code entry
       (replaced by server role assignment in Ch6)
    ══════════════════════════════════════════════ */
    #role-picker {
      position: fixed; inset: 0; z-index: 15;
      display: flex; align-items: center; justify-content: center;
      padding: 56px 16px 36px;
      opacity: 0; pointer-events: none;
      transition: opacity 0.3s ease, transform 0.3s ease;
      transform: scale(0.97);
    }
    #role-picker.visible {
      opacity: 1; pointer-events: all; transform: scale(1);
    }

    .role-card {
      width: 100%; max-width: 400px;
      background: rgba(10,10,10,0.88);
      backdrop-filter: blur(40px) saturate(160%);
      border-radius: 26px; padding: 32px 26px 26px;
      position: relative; overflow: hidden;
      box-shadow:
        inset 0 0 0 1px rgba(6,182,212,0.12),
        0 40px 80px rgba(0,0,0,0.6),
        0 0 120px rgba(6,182,212,0.04);
      animation: cardIn 0.4s cubic-bezier(0.16,1,0.3,1) both;
    }
    .role-card::before {
      content:''; position:absolute; inset:0; border-radius:26px;
      background:
        radial-gradient(ellipse at 20% 0%, rgba(6,182,212,0.1) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 100%, rgba(59,130,246,0.06) 0%, transparent 50%);
      pointer-events:none;
    }
    .role-card > * { position: relative; z-index: 1; }

    .role-back {
      background: transparent; border: none; padding: 0;
      color: var(--text-dim); cursor: pointer;
      font-family: 'JetBrains Mono', monospace; font-size: 10px;
      letter-spacing: 1px; text-transform: uppercase;
      display: flex; align-items: center; gap: 6px;
      margin-bottom: 22px; transition: color 0.15s;
    }
    .role-back:hover { color: var(--primary); }
    .role-back svg { width: 12px; height: 12px; }

    .role-code-display {
      display: flex; align-items: center; gap: 10px; margin-bottom: 20px;
    }
    .role-code-label {
      font-family: 'JetBrains Mono', monospace; font-size: 10px;
      color: var(--text-dim); letter-spacing: 1px; text-transform: uppercase;
    }
    .role-code-value {
      font-family: 'JetBrains Mono', monospace; font-size: 18px; font-weight: 500;
      color: var(--primary); letter-spacing: 6px;
      background: rgba(6,182,212,0.07); padding: 4px 14px;
      border-radius: 8px; border: 1px solid rgba(6,182,212,0.18);
    }

    .role-heading {
      font-family: 'Space Grotesk', sans-serif; font-size: 22px; font-weight: 700;
      color: var(--text); letter-spacing: -0.4px; margin-bottom: 7px; line-height: 1.2;
    }
    .role-sub {
      font-size: 13px; color: var(--text-muted); margin-bottom: 28px; line-height: 1.6;
    }

    .role-options { display: flex; flex-direction: column; gap: 10px; }

    .role-btn {
      display: flex; align-items: center; gap: 16px;
      background: rgba(255,255,255,0.03);
      border: none; border-radius: 18px; padding: 18px 20px;
      cursor: pointer; text-align: left; width: 100%;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07);
      transition: all 0.2s cubic-bezier(0.16,1,0.3,1);
      position: relative; overflow: hidden;
    }
    .role-btn::before {
      content: ''; position: absolute; inset: 0; border-radius: 18px; opacity: 0;
      transition: opacity 0.2s;
    }
    .role-btn:hover { transform: translateY(-2px); }
    .role-btn:active { transform: scale(0.98); }

    .role-btn.sender::before  { background: radial-gradient(ellipse at 20% 50%, rgba(6,182,212,0.12) 0%, transparent 70%); }
    .role-btn.receiver::before{ background: radial-gradient(ellipse at 20% 50%, rgba(140,231,255,0.10) 0%, transparent 70%); }
    .role-btn.sender:hover  { box-shadow: inset 0 0 0 1px rgba(6,182,212,0.35), 0 8px 28px rgba(6,182,212,0.1); }
    .role-btn.receiver:hover{ box-shadow: inset 0 0 0 1px rgba(140,231,255,0.3), 0 8px 28px rgba(140,231,255,0.08); }
    .role-btn.sender:hover::before  { opacity: 1; }
    .role-btn.receiver:hover::before{ opacity: 1; }

    .role-btn-icon {
      width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
    }
    .role-btn.sender   .role-btn-icon { background: rgba(6,182,212,0.12);  box-shadow: inset 0 0 0 1px rgba(6,182,212,0.2); }
    .role-btn.receiver .role-btn-icon { background: rgba(140,231,255,0.08); box-shadow: inset 0 0 0 1px rgba(140,231,255,0.18); }
    .role-btn-icon svg { width: 24px; height: 24px; }

    .role-btn-text { flex: 1; }
    .role-btn-title {
      font-family: 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 700;
      color: var(--text); letter-spacing: -0.2px; margin-bottom: 3px;
    }
    .role-btn-desc {
      font-family: 'Inter', sans-serif; font-size: 12px;
      color: var(--text-muted); line-height: 1.5;
    }
    .role-btn-arrow {
      color: var(--text-dim); font-size: 18px; flex-shrink: 0;
      transition: transform 0.2s, color 0.2s;
    }
    .role-btn.sender:hover   .role-btn-arrow { transform: translateX(3px); color: var(--primary); }
    .role-btn.receiver:hover .role-btn-arrow { transform: translateX(3px); color: #8ce7ff; }

    .role-note {
      margin-top: 18px; text-align: center;
      font-family: 'JetBrains Mono', monospace; font-size: 9.5px;
      color: var(--text-dim); letter-spacing: 0.8px; line-height: 1.6;
    }
    .role-note em { font-style: normal; color: rgba(6,182,212,0.4); }

    /* ══════════════════════════════════════════════
       RECEIVER DEV TEST PANEL (only on ?mode=receive)
       Lets you test every receiver state without
       a second device.
    ══════════════════════════════════════════════ */
    #rx-dev-panel {
      position: fixed; bottom: 44px; right: 24px; z-index: 200;
      display: none;
      flex-direction: column; align-items: flex-end; gap: 8px;
    }
    #rx-dev-panel.visible { display: flex; }

    /* Toggle pill */
    #rx-dev-toggle {
      display: flex; align-items: center; gap: 7px;
      background: rgba(8,8,12,0.88); backdrop-filter: blur(24px);
      border: none; border-radius: 100px; padding: 9px 16px;
      color: rgba(140,231,255,0.6); cursor: pointer;
      font-family: 'JetBrains Mono', monospace; font-size: 10px;
      letter-spacing: 1px; text-transform: uppercase;
      box-shadow: inset 0 0 0 1px rgba(140,231,255,0.18), 0 8px 24px rgba(0,0,0,0.6);
      transition: all 0.2s;
    }
    #rx-dev-toggle:hover { color: #8ce7ff; box-shadow: inset 0 0 0 1px rgba(140,231,255,0.4), 0 8px 24px rgba(0,0,0,0.6); }
    #rx-dev-toggle .dev-dot {
      width: 5px; height: 5px; border-radius: 50%;
      background: rgba(140,231,255,0.6);
      box-shadow: 0 0 6px rgba(140,231,255,0.8);
      animation: devDotPulse 2s ease-in-out infinite;
    }
    @keyframes devDotPulse {
      0%,100% { opacity:0.6; } 50% { opacity:1; }
    }

    /* Expandable test menu */
    #rx-dev-menu {
      display: none;
      flex-direction: column; gap: 6px; align-items: stretch;
      background: rgba(8,8,12,0.92); backdrop-filter: blur(32px);
      border-radius: 16px; padding: 14px;
      box-shadow: inset 0 0 0 1px rgba(140,231,255,0.12), 0 16px 48px rgba(0,0,0,0.7);
      min-width: 220px;
    }
    #rx-dev-menu.open { display: flex; }

    .dev-menu-label {
      font-family: 'JetBrains Mono', monospace; font-size: 9px;
      color: rgba(140,231,255,0.4); letter-spacing: 1.5px; text-transform: uppercase;
      margin-bottom: 4px; padding-bottom: 6px;
      border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    .dev-btn {
      display: flex; align-items: center; gap: 8px;
      background: rgba(255,255,255,0.03); border: none; border-radius: 10px;
      padding: 9px 12px; color: var(--text-muted); cursor: pointer;
      font-family: 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 600;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
      transition: all 0.15s; text-align: left;
    }
    .dev-btn:hover { background: rgba(255,255,255,0.07); color: var(--text); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); }
    .dev-btn.cyan:hover { background: rgba(140,231,255,0.08); color: #8ce7ff; box-shadow: inset 0 0 0 1px rgba(140,231,255,0.25); }
    .dev-btn.red:hover  { background: rgba(239,68,68,0.08);  color: #fca5a5; box-shadow: inset 0 0 0 1px rgba(239,68,68,0.25); }
    .dev-btn.amber:hover{ background: rgba(245,158,11,0.08); color: #fcd34d; box-shadow: inset 0 0 0 1px rgba(245,158,11,0.25); }
    .dev-btn .dev-btn-icon { font-size: 13px; width: 18px; text-align: center; flex-shrink: 0; }
    .dev-separator { height: 1px; background: rgba(255,255,255,0.05); margin: 4px 0; }
  </style>
  <script type="module" crossorigin src="/assets/index-CsbsajmD.js"></script>
  <link rel="stylesheet" crossorigin href="/assets/index-C_kuyxil.css">
</head>
<body>

<canvas id="nexus-canvas"></canvas>

<!-- atmospheric bloom -->
<div class="card-outer-bloom" id="card-bloom"></div>

<!-- TOP BAR -->
<div id="top-bar">
  <!-- home state -->
  <div class="logo" id="logo-home">
    <div class="logo-icon">
      <svg viewBox="0 0 24 24" fill="none">
        <path d="M22 2L11 13" stroke="#06b6d4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        <path d="M22 2L15 22L11 13L2 9L22 2Z" stroke="#e8eaf6" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
    </div>
    <span class="logo-text">Nebulo <em>Share</em></span>
  </div>
  <!-- sender state (hidden by default) -->
  <div class="logo" id="logo-sender" style="display:none">
    <div class="logo-icon">
      <svg viewBox="0 0 24 24" fill="none">
        <path d="M22 2L11 13" stroke="#06b6d4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        <path d="M22 2L15 22L11 13L2 9L22 2Z" stroke="#e8eaf6" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
    </div>
    <span class="logo-text" style="font-size:14px">Nebulo <em>Share</em></span>
  </div>

  <div id="top-bar-center" style="display:none">
    <div class="connected-dot"></div>
    <span>Connected to Peer</span>
  </div>

  <!-- home right -->
  <div id="top-bar-home-right">
    <div class="status-pill">
      <div class="status-dot"></div>
      <span>Not Connected</span>
    </div>
  </div>
  <!-- sender right -->
  <div id="top-bar-sender-right" style="display:none">
    <div class="room-code-badge" id="room-code-display">Room ----</div>
    <button class="btn-leave" id="btn-leave">Leave Room</button>
  </div>
</div>


<!-- HOME SCREEN -->
<div id="home-screen">
  <div class="home-card" id="home-card">
    <div class="card-inner">
      <div class="card-header">
        <div class="card-icon">
          <svg viewBox="0 0 24 24" fill="none">
            <path d="M22 2L11 13" stroke="#06b6d4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M22 2L15 22L11 13L2 9L22 2Z" stroke="#06b6d4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="rgba(6,182,212,0.18)"/>
          </svg>
        </div>
        <div class="card-badge">Direct P2P · Private</div>
      </div>
      <div class="hero-heading"><span>Seamless transfer.<br>Beyond the cloud.</span></div>
      <div class="hero-sub">Pair devices in seconds to beam files directly over an encrypted peer-to-peer connection.</div>
      <div class="otp-row">
        <input class="otp-box" id="otp-0" maxlength="2" inputmode="numeric" autocomplete="off" />
        <input class="otp-box" id="otp-1" maxlength="2" inputmode="numeric" autocomplete="off" />
        <input class="otp-box" id="otp-2" maxlength="2" inputmode="numeric" autocomplete="off" />
        <input class="otp-box" id="otp-3" maxlength="2" inputmode="numeric" autocomplete="off" />
      </div>
      <div class="globe-wrap">
        <canvas id="globe-canvas" width="388" height="120"></canvas>
      </div>
      <div class="globe-label"><span>◉</span> Direct peer connection · Zero cloud storage</div>
      <button class="btn-primary" id="btn-join">Join Room</button>
      <div class="join-error" id="join-error"></div>
      <button class="btn-ghost" id="btn-create">✦ &nbsp;Create New Room</button>
      <div class="divider"><div class="divider-line"></div><span class="divider-text">or</span><div class="divider-line"></div></div>
      <div class="qr-tabs">
        <button class="qr-tab active" id="tab-show" onclick="switchQRTab('show')">Show QR</button>
        <button class="qr-tab" id="tab-scan" onclick="switchQRTab('scan')">Scan QR</button>
      </div>
      <div class="qr-panel active" id="panel-show">
        <div id="qr-output"><div class="qr-placeholder" id="qr-placeholder">Enter a room code above to generate QR</div></div>
        <div class="qr-label">Scan this code with your other device to join instantly.</div>
        <div class="qr-dev-tip" id="qr-dev-tip" style="display:none">Tip: Access via local IP (e.g. http://192.168.x.x:5173) for mobile QR scanning.</div>
      </div>
      <div class="qr-panel" id="panel-scan">
        <div id="scanner-wrap">
          <video id="scanner-video" playsinline muted></video>
          <div class="scanner-corner tl"></div><div class="scanner-corner tr"></div>
          <div class="scanner-corner bl"></div><div class="scanner-corner br"></div>
          <div class="scanner-line"></div>
        </div>
        <div id="scanner-denied" style="display:none">Camera access was denied.<br>Please enter the 4-digit code manually above.</div>
      </div>
    </div>
  </div>
</div>

<!-- ROLE PICKER (shown after valid code, before workspace transition) -->
<div id="role-picker" style="display:none !important">
  <div class="role-card">

    <!-- Back button -->
    <button class="role-back" id="role-back-btn">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
        <polyline points="15 18 9 12 15 6"/>
      </svg>
      Back
    </button>

    <!-- Room code badge -->
    <div class="role-code-display">
      <span class="role-code-label">Room</span>
      <span class="role-code-value" id="role-code-display">----</span>
    </div>

    <div class="role-heading">How are you joining?</div>
    <div class="role-sub">Choose your role in this transfer session.</div>

    <div class="role-options">

      <!-- SENDER button -->
      <button class="role-btn sender" id="role-btn-sender">
        <div class="role-btn-icon">
          <svg viewBox="0 0 24 24" fill="none" stroke="#06b6d4" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
            <path d="M22 2L11 13"/>
            <path d="M22 2L15 22L11 13L2 9L22 2Z"/>
          </svg>
        </div>
        <div class="role-btn-text">
          <div class="role-btn-title">I'm sending files</div>
          <div class="role-btn-desc">Select files and beam them directly to your peer</div>
        </div>
        <span class="role-btn-arrow">›</span>
      </button>

      <!-- RECEIVER button -->
      <button class="role-btn receiver" id="role-btn-receiver">
        <div class="role-btn-icon">
          <svg viewBox="0 0 24 24" fill="none" stroke="#8ce7ff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
            <path d="M12 3v12m0 0l-4-4m4 4l4-4"/>
            <path d="M3 17v2a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-2"/>
          </svg>
        </div>
        <div class="role-btn-text">
          <div class="role-btn-title">I'm receiving files</div>
          <div class="role-btn-desc">Stand by to receive incoming files directly from your peer</div>
        </div>
        <span class="role-btn-arrow">›</span>
      </button>

    </div>

  </div>
</div>

<!-- SENDER SCREEN -->
<div id="sender-screen">
  <div id="drop-zone" onclick="document.getElementById('file-input').click()">
    <div class="drop-icon">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
        <polyline points="17 8 12 3 7 8"/>
        <line x1="12" y1="3" x2="12" y2="15"/>
      </svg>
    </div>
    <div style="position:relative; height:24px; display:flex; align-items:center; justify-content:center;">
      <div class="drop-main-text">Drop files here or click to browse</div>
      <div class="drop-release-text">Release to add files</div>
    </div>
    <div class="drop-sub-text">All file types supported · No file size limits</div>
    <input type="file" id="file-input" multiple />
  </div>

  <div id="queue-wrap">
    <div class="queue-list" id="queue-list"></div>
    <button class="add-more-link" onclick="document.getElementById('file-input').click()">+ Add more files</button>
  </div>
</div>

<!-- FILE INFO OVERLAY -->
<div id="file-overlay">
  <div class="file-overlay-inner">
    <div class="file-overlay-name" id="overlay-name"></div>
    <div class="file-overlay-size" id="overlay-size"></div>
  </div>
</div>

<!-- CONTROL BUTTONS (grab/release) -->
<div id="control-panel">
  <button class="ctrl-btn" id="btn-grab">
    <svg viewBox="0 0 24 24" fill="none" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
      <path class="icon-color" d="M22 2L11 13"/>
      <path class="icon-color" d="M22 2L15 22L11 13L2 9L22 2Z"/>
    </svg>
    Send
  </button>
  <button class="ctrl-btn" id="btn-drop" disabled aria-label="Drop — receive the file from sender">
    <svg viewBox="0 0 24 24" fill="none" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
      <path class="icon-color" d="M12 3v12m0 0l-4-4m4 4l4-4"/>
      <path class="icon-color" d="M3 17v2a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-2"/>
    </svg>
    Drop
  </button>
</div>


<!-- TRANSFER RINGS CANVAS — outward (sending) / inward (receiving) -->
<canvas id="transfer-rings-canvas"></canvas>

<!-- PROGRESS SCREEN -->
<div id="progress-screen">
  <div class="progress-top-region">
    <div class="progress-file-label" id="progress-file-label"></div>
  </div>
  <div class="progress-ring-wrap">
    <svg width="180" height="180" viewBox="0 0 180 180">
      <defs>
        <linearGradient id="receiveRingGrad" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stop-color="#8ce7ff"/>
          <stop offset="100%" stop-color="#06b6d4"/>
        </linearGradient>
      </defs>
      <circle class="progress-ring-bg" cx="90" cy="90" r="80"/>
      <circle class="receive-ring-fill" id="progress-ring" cx="90" cy="90" r="80"/>
    </svg>
    <div class="progress-ring-center">
      <div class="progress-pct" id="progress-pct">0</div>
      <div class="progress-pct-sym">%</div>
    </div>
  </div>
  <div class="progress-bottom-region">
    <div class="progress-meta">
      <div class="progress-filename" id="progress-filename"></div>
      <div class="progress-stats" id="progress-stats"></div>
    </div>
    <div id="cancel-area">
      <button class="btn-cancel" id="btn-cancel" onclick="showCancelConfirm()">Cancel Transfer</button>
      <div id="cancel-confirm">
        <div class="cancel-confirm-text">Cancel transfer? The file transfer will stop immediately.</div>
        <div class="cancel-confirm-btns">
          <button class="btn-confirm-yes" onclick="cancelTransfer()">Yes, Cancel</button>
          <button class="btn-confirm-no" onclick="hideCancelConfirm()">No, Continue</button>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- SUCCESS SCREEN -->
<div id="success-screen">
  <div class="success-check">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
      <polyline points="20 6 9 17 4 12"/>
    </svg>
  </div>
  <div class="success-title">Transfer complete.</div>
  <div class="success-meta" id="success-meta"></div>
  <div class="success-btns">
    <button class="btn-success-primary" onclick="sendAnotherFile()">Send Another File</button>
    <button class="btn-success-ghost" onclick="(typeof window.leaveReceiver==='function'?window.leaveReceiver:leaveRoom)()">Leave Room</button>
  </div>
</div>

<!-- BOTTOM BAR -->
<div id="bottom-bar">
  <div class="bar-item"><div class="bar-dot" id="dot-signaling"></div>Signaling Server</div>
  <div class="bar-item"><div class="bar-dot" id="dot-webrtc"></div>WebRTC P2P</div>
</div>

<!-- ══ CHAPTER 5 — TOAST + ERRORS ══ -->

<!-- TOAST CONTAINER -->
<div id="toast-container"></div>

<!-- TRANSFER ERROR SCREEN -->
<div id="transfer-error-screen">
  <div class="error-icon-wrap">
    <svg viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <circle cx="12" cy="12" r="10"/>
      <line x1="12" y1="8" x2="12" y2="12"/>
      <line x1="12" y1="16" x2="12.01" y2="16"/>
    </svg>
  </div>
  <div class="error-title" id="error-title">Transfer failed.</div>
  <div class="error-subtitle" id="error-subtitle">Something went wrong during the transfer. The file may be incomplete on the receiver.</div>
  <div class="error-btns">
    <button class="btn-error-retry" id="btn-error-retry">Try Again</button>
    <button class="btn-error-home" id="btn-error-home">Return to Home</button>
  </div>
</div>

<!-- UNSUPPORTED BROWSER GUARD SCREEN -->
<div id="unsupported-browser-screen">
  <div class="unsupported-card">
    <div class="unsupported-badge">
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <circle cx="12" cy="12" r="10"/>
        <line x1="12" y1="8" x2="12" y2="12"/>
        <line x1="12" y1="16" x2="12.01" y2="16"/>
      </svg>
      <span>Compatibility Guard</span>
    </div>
    <h2 class="unsupported-title">Browser Environment Incompatible</h2>
    <p class="unsupported-text">Nebulo Share requires modern WebRTC P2P Data Channels, Cryptography primitives, and hardware-accelerated Canvas for direct peer-to-peer transfers.</p>
    <div class="unsupported-reasons" id="unsupported-reasons"></div>
    <div class="browser-links">
      <div class="browser-rec">Recommended Browsers:</div>
      <div class="browser-tags">
        <span class="browser-tag">Google Chrome</span>
        <span class="browser-tag">Mozilla Firefox</span>
        <span class="browser-tag">Apple Safari</span>
        <span class="browser-tag">Microsoft Edge</span>
      </div>
    </div>
  </div>
</div>


<!-- LARGE FILE WARNING MODAL -->
<div id="large-file-modal">
  <div class="lfm-card">
    <span class="lfm-icon">⚠️</span>
    <div class="lfm-title">Large file detected</div>
    <div class="lfm-body" id="lfm-body">Large file detected. Direct peer transfer speed depends on your local network throughput.</div>
    <div class="lfm-btns">
      <button class="btn-lfm-send" id="btn-lfm-send">Send Anyway</button>
      <button class="btn-lfm-cancel" id="btn-lfm-cancel">Cancel</button>
    </div>
  </div>
</div>

<!-- ══ CHAPTER 4 — RECEIVER ══ -->

<!-- RECEIVER SCREEN (idle gravity well) -->
<div id="receiver-screen">
  <div id="gravity-well-ui">
    <div class="gravity-well-ring-wrap">
      <div class="gw-ring"></div>
      <div class="gw-ring"></div>
      <div class="gw-ring"></div>
      <div class="gw-ring"></div>
      <div class="gw-ring"></div>
      <div class="gw-core"><div class="gw-void"></div></div>
    </div>
    <div class="gravity-well-label">Waiting for incoming files...</div>
  </div>
</div>

<!-- RECEIVE PROGRESS (incoming transfer) -->
<div id="receive-progress">
  <div class="progress-top-region">
    <div class="receive-label">Receiving incoming files...</div>
  </div>
  <div class="progress-ring-wrap">
    <svg width="180" height="180" viewBox="0 0 180 180">
      <defs>
        <linearGradient id="receiveRingGrad" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stop-color="#8ce7ff"/>
          <stop offset="100%" stop-color="#06b6d4"/>
        </linearGradient>
      </defs>
      <circle class="progress-ring-bg" cx="90" cy="90" r="80"/>
      <circle class="receive-ring-fill" id="receive-ring" cx="90" cy="90" r="80"/>
    </svg>
    <div class="progress-ring-center">
      <div class="progress-pct" id="receive-pct">0</div>
      <div class="progress-pct-sym">%</div>
    </div>
  </div>
  <div class="progress-bottom-region">
    <div class="progress-meta">
      <div class="progress-filename" id="receive-filename"></div>
      <div class="progress-stats" id="receive-stats"></div>
    </div>
    <div id="rx-cancel-area">
      <button class="btn-cancel" id="btn-rx-cancel" onclick="showRxCancelConfirm()">Cancel Transfer</button>
      <div id="rx-cancel-confirm">
        <div class="cancel-confirm-text">Cancel transfer? The incoming transfer will stop immediately.</div>
        <div class="cancel-confirm-btns">
          <button class="btn-confirm-yes" onclick="cancelTransfer()">Yes, Cancel</button>
          <button class="btn-confirm-no" onclick="hideRxCancelConfirm()">No, Continue</button>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- RECEIVE SUCCESS -->
<div id="receive-success">
  <div class="receive-success-icon">
    <svg viewBox="0 0 24 24" fill="none" stroke="#8ce7ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <path d="M12 3v12m0 0l-4-4m4 4l4-4"/>
      <path d="M3 17v2a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-2"/>
    </svg>
  </div>
  <div class="receive-success-title">Files received.</div>
  <div class="receive-success-file" id="receive-success-filename"></div>
  <button class="btn-download-main" id="btn-download-main">Download File</button>
  <div class="receive-success-sub-btns">
    <button class="btn-rx-ghost" onclick="dismissSuccess()">Done</button>
    <button class="btn-rx-ghost" id="btn-rx-leave">Leave Room</button>
  </div>
</div>


<!-- FILES PANEL TOGGLE -->
<button id="files-panel-toggle">
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
  </svg>
  Files <span class="panel-toggle-count" id="files-count">0</span>
</button>

<!-- RECEIVED FILES PANEL -->
<div id="files-panel">
  <div class="panel-drag-handle"></div>
  <div class="panel-header">
    <div class="panel-title">Received Files</div>
    <div class="panel-actions">
      <button class="panel-action-btn" id="btn-dl-all">Download All</button>
      <button class="panel-action-btn danger" id="btn-clear-files">Clear</button>
    </div>
  </div>
  <div class="panel-body" id="panel-body">
    <div class="panel-empty" id="panel-empty">
      <div class="panel-empty-icon">📭</div>
      <div class="panel-empty-text">No files received yet. Transferred files will appear here.</div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>

<script>
/* ═══════════════════════════════════════════════
   CHAPTER 1 + 3 — PARTICLE SYSTEM (extended)
   Sphere = gravity-well style: particles pulled
   to shell surface, continuous rotation, full
   rainbow repel preserved. Atom-ring progress.
═══════════════════════════════════════════════ */
(function () {
  const canvas = document.getElementById('nexus-canvas');
  const ctx = canvas.getContext('2d');
  function resize() { canvas.width=window.innerWidth; canvas.height=window.innerHeight; }
  resize(); window.addEventListener('resize', resize);
  const isMobile = window.innerWidth < 768;
  const COUNT = isMobile ? 90 : 180;
  const BASE_COLORS = ['#06b6d4','#0891b2','#1e40af','#3b82f6'];
  let mouse = { x:-9999, y:-9999 };
  window.addEventListener('mousemove', e=>{ mouse.x=e.clientX; mouse.y=e.clientY; });
  window.addEventListener('mouseleave', ()=>{ mouse.x=-9999; mouse.y=-9999; });
  canvas.addEventListener('touchmove', e=>{ e.preventDefault(); mouse.x=e.touches[0].clientX; mouse.y=e.touches[0].clientY; }, {passive:false});
  canvas.addEventListener('touchend', ()=>{ mouse.x=-9999; mouse.y=-9999; });

  function rainbowColor(dist, maxDist, t) {
    const ratio=1-Math.min(dist/maxDist,1);
    const hue=(t*0.03+(1-ratio)*280)%360;
    return `hsl(${hue},${80+ratio*20}%,${50+ratio*20}%)`;
  }

  /* ── SPHERE SHELL: each particle has a fixed angular position on the sphere ── */
  // Assigned via Fibonacci lattice — deterministic per index
  const PHI_G = Math.PI*(3-Math.sqrt(5));
  // Per-particle sphere orbital angles (latitude φ, longitude θ)
  const sphereAngles = [];
  for(let i=0;i<COUNT;i++){
    const y = 1-(i/(COUNT-1))*2;
    const theta = PHI_G * i;
    const phi = Math.acos(Math.max(-1,Math.min(1,y)));
    sphereAngles.push({ phi, theta });
  }

  /* ── STATE ──
     Transfer state deliberately does not live here. The particle field is a
     background only: it drifts and repels on hover, in every app state. The
     transfer animation owns its own canvas (see CHAPTER 3A). */
  let shatterPs = [];

  // ── SPHERE SHATTER — per-particle isShattered flag ──
  // (reference-file approach: simpler boolean flag, smooth reformation via pull physics)

  // ── ORBITAL ANIMATIONS REMOVED ──

  class Particle {
    constructor(born) { this.reset(); this.alpha=born?0:1; this.fadeDelay=born?Math.random()*80:0; }
    reset() {
      this.x=Math.random()*(canvas.width||window.innerWidth);
      this.y=Math.random()*(canvas.height||window.innerHeight);
      this.drawAngle=Math.random()*Math.PI*2;
      this.baseColor=BASE_COLORS[Math.floor(Math.random()*BASE_COLORS.length)];
      const spd=0.15+Math.random()*0.15,dir=Math.random()*Math.PI*2;
      this.vx=Math.cos(dir)*spd; this.vy=Math.sin(dir)*spd;
      this.phase=Math.random()*Math.PI*2; this.opacity=0.3+Math.random()*0.5;
      this.alpha=1; this.fadeDelay=0;
      this.isShattered=false;
    }

    /* ── DRIFT: normal behaviour from Ch1, rainbow repel fully preserved ── */
    updateDrift(t) {
      if(this.fadeDelay>0){this.fadeDelay--;return;}
      if(this.alpha<1) this.alpha=Math.min(1,this.alpha+0.006);
      const dx=mouse.x-this.x,dy=mouse.y-this.y,dist=Math.sqrt(dx*dx+dy*dy);
      if(dist<120&&dist>0){const f=((120-dist)/120)*0.55;this.vx-=(dx/dist)*f;this.vy-=(dy/dist)*f;}
      const spd=Math.sqrt(this.vx*this.vx+this.vy*this.vy);
      const maxSpd = 2.8;
      if(spd>maxSpd){this.vx=(this.vx/spd)*maxSpd;this.vy=(this.vy/spd)*maxSpd;}
      if(spd>0.45){this.vx*=0.975;this.vy*=0.975;}
      this.x+=this.vx; this.y+=this.vy;
      if(this.x<0)this.x=canvas.width; if(this.x>canvas.width)this.x=0;
      if(this.y<0)this.y=canvas.height; if(this.y>canvas.height)this.y=0;
      this.opacity=0.3+0.5*Math.abs(Math.sin(t*0.01+this.phase));
    }

    drawDrift(t) {
      if(this.fadeDelay>0)return;
      const dx=mouse.x-this.x,dy=mouse.y-this.y,dist=Math.sqrt(dx*dx+dy*dy);
      const color=dist<140?rainbowColor(dist,140,t+this.phase*30):this.baseColor;
      ctx.save();ctx.globalAlpha=this.opacity*this.alpha;
      ctx.translate(this.x,this.y);ctx.rotate(this.drawAngle);
      ctx.fillStyle=color;ctx.fillRect(-1,-2.5,2,5);ctx.restore();
    }
  }

  const particles=[];
  for(let i=0;i<COUNT;i++) particles.push(new Particle(true));

  /* The only remaining public surface: a one-shot particle burst used as an
     error cue. It adds short-lived particles to a separate list and never
     mutates the drift field's state, so nothing here can be left "stuck". */
  window.ParticleSystem={
    shatterEffect(x,y,color){
      for(let i=0;i<70;i++){
        const a=Math.random()*Math.PI*2,s=Math.random()*9+2;
        shatterPs.push({x,y,vx:Math.cos(a)*s,vy:Math.sin(a)*s,life:1,decay:.016+Math.random()*.022,size:Math.random()*3+1,color});
      }
    }
  };

  let t=0;
  function loop(){
    requestAnimationFrame(loop);
    if (document.visibilityState === 'hidden') return;
    t++;
    ctx.fillStyle='rgba(5,5,5,0.22)'; ctx.fillRect(0,0,canvas.width,canvas.height);

    // Normal drift
    for(const p of particles){
      p.updateDrift(t);
      p.drawDrift(t);
    }
    for(let i=shatterPs.length-1;i>=0;i--){
      const s=shatterPs[i];
      s.x+=s.vx;s.y+=s.vy;s.vx*=0.93;s.vy*=0.93;s.life-=s.decay;
      if(s.life<=0){shatterPs.splice(i,1);continue;}
      ctx.globalAlpha=s.life;ctx.fillStyle=s.color;
      ctx.beginPath();ctx.arc(s.x,s.y,s.size,0,Math.PI*2);ctx.fill();
    }
    ctx.globalAlpha=1;
  }

  loop();
})();

/* ═══════════════════════════════════════════════
   CHAPTER 2 — HOME SCREEN + 3D GLOBE
═══════════════════════════════════════════════ */
(function () {
  /* 3D GLOBE */
  const gc=document.getElementById('globe-canvas');
  const gCtx=gc.getContext('2d');
  const GW=gc.width,GH=gc.height,GCX=GW/2,GCY=GH/2;
  const RADIUS=50,NODE_COUNT=90;
  const nodes3D=[];
  const PHI=Math.PI*(3-Math.sqrt(5));
  for(let i=0;i<NODE_COUNT;i++){
    const y=1-(i/(NODE_COUNT-1))*2,r=Math.sqrt(Math.max(0,1-y*y)),theta=PHI*i;
    nodes3D.push({x:Math.cos(theta)*r,y,z:Math.sin(theta)*r});
  }
  const edges=[];
  for(let i=0;i<NODE_COUNT;i++) for(let j=i+1;j<NODE_COUNT;j++){
    const dist=Math.sqrt(
      Math.pow(nodes3D[i].x-nodes3D[j].x,2)+
      Math.pow(nodes3D[i].y-nodes3D[j].y,2)+
      Math.pow(nodes3D[i].z-nodes3D[j].z,2)
    );
    if(dist<0.5)edges.push([i,j]);
  }
  function nodeForDigit(slot,digit){const b=Math.floor(NODE_COUNT/4);return slot*b+((digit*7+slot*13)%b);}
  let activeNodes=[-1,-1,-1,-1],nodeGlow=new Array(NODE_COUNT).fill(0),glowTarget=new Array(NODE_COUNT).fill(0),activeEdgeProgress=[],globeRot=0,rafId=null,tick=0;
  function project(node,rot){
    const cosR=Math.cos(rot),sinR=Math.sin(rot);
    const rx=node.x*cosR-node.z*sinR,rz=node.x*sinR+node.z*cosR,ry=node.y;
    const p=1+rz*0.3;
    return{sx:GCX+rx*RADIUS*p,sy:GCY+ry*RADIUS*p,z:rz,scale:p};
  }
  function drawGlobe(){
    rafId=null;
    if (document.visibilityState === 'hidden') return;
    tick++;globeRot+=0.005;gCtx.clearRect(0,0,GW,GH);
    const projected=nodes3D.map(n=>project(n,globeRot));

    // Animate glow values
    for(let i=0;i<NODE_COUNT;i++){
      if(glowTarget[i]>nodeGlow[i])nodeGlow[i]=Math.min(glowTarget[i],nodeGlow[i]+0.08);
      else nodeGlow[i]=Math.max(glowTarget[i],nodeGlow[i]-0.05);
    }
    for(const ae of activeEdgeProgress)if(ae.t<1)ae.t=Math.min(1,ae.t+0.045);

    // Draw connections
    for(let i=0;i<NODE_COUNT;i++){
      for(let j=i+1;j<NODE_COUNT;j++){
        const dist=Math.sqrt(
          Math.pow(nodes3D[i].x-nodes3D[j].x,2)+
          Math.pow(nodes3D[i].y-nodes3D[j].y,2)+
          Math.pow(nodes3D[i].z-nodes3D[j].z,2)
        );
        if(dist<0.5){
          const p1=projected[i],p2=projected[j];
          if(p1.z>-0.3&&p2.z>-0.3){
            const avgDepth=((p1.z+p2.z)/2+1)/2;
            gCtx.beginPath();
            gCtx.moveTo(p1.sx,p1.sy);
            gCtx.lineTo(p2.sx,p2.sy);
            gCtx.strokeStyle=`rgba(6,182,212,${avgDepth*0.28})`;
            gCtx.lineWidth=0.7;
            gCtx.stroke();
          }
        }
      }
    }

    // Draw active highlighted edges
    for(const ae of activeEdgeProgress){
      const pi=projected[ae.i],pj=projected[ae.j];
      const depth=((pi.z+pj.z)/2+1)/2;
      if(depth<0.05)continue;
      const ex=pi.sx+(pj.sx-pi.sx)*ae.t,ey=pi.sy+(pj.sy-pi.sy)*ae.t;
      gCtx.save();
      gCtx.beginPath();gCtx.moveTo(pi.sx,pi.sy);gCtx.lineTo(ex,ey);
      gCtx.strokeStyle=`rgba(140,231,255,${0.8*ae.t*depth})`;
      gCtx.lineWidth=1.5;
      gCtx.shadowColor='#06b6d4';gCtx.shadowBlur=6*ae.t;
      gCtx.stroke();gCtx.restore();
      if(ae.t<1){
        gCtx.beginPath();gCtx.arc(ex,ey,2.5,0,Math.PI*2);
        gCtx.fillStyle=`rgba(200,245,255,${ae.t*depth})`;
        gCtx.shadowColor='#06b6d4';gCtx.shadowBlur=8*ae.t;
        gCtx.fill();gCtx.shadowBlur=0;
      }
    }

    // Draw nodes
    const sortedNodes=projected.map((p,i)=>({p,i})).sort((a,b)=>a.p.z-b.p.z);
    for(const{p,i}of sortedNodes){
      if(p.z<-0.3)continue;
      const depth=(p.z+1)/2;
      const g=nodeGlow[i];
      if(g>0.01){
        // Glowing active node
        const haloGrad=gCtx.createRadialGradient(p.sx,p.sy,0,p.sx,p.sy,18*g);
        haloGrad.addColorStop(0,`rgba(6,182,212,${0.5*g*depth})`);
        haloGrad.addColorStop(0.5,`rgba(6,182,212,${0.2*g*depth})`);
        haloGrad.addColorStop(1,'rgba(6,182,212,0)');
        gCtx.beginPath();gCtx.arc(p.sx,p.sy,18*g,0,Math.PI*2);
        gCtx.fillStyle=haloGrad;gCtx.fill();
        // Bright core
        gCtx.save();
        gCtx.beginPath();gCtx.arc(p.sx,p.sy,3*p.scale,0,Math.PI*2);
        gCtx.fillStyle=`rgba(220,248,255,${0.95*depth})`;
        gCtx.shadowColor='#06b6d4';gCtx.shadowBlur=14*g;
        gCtx.fill();gCtx.restore();
        // Pulse ring
        if(g>0.7){
          const tw=Math.sin(tick*0.05+i*0.8)*0.5+0.5;
          gCtx.beginPath();gCtx.arc(p.sx,p.sy,(5+tw*6)*p.scale,0,Math.PI*2);
          gCtx.strokeStyle=`rgba(6,182,212,${0.35*tw*g*depth})`;
          gCtx.lineWidth=1;gCtx.stroke();
        }
      } else {
        // Dim base node — bright cyan dot
        const sz=1.8*p.scale;
        gCtx.beginPath();gCtx.arc(p.sx,p.sy,sz,0,Math.PI*2);
        gCtx.fillStyle=`rgba(6,182,212,${depth*0.85})`;
        gCtx.fill();
      }
    }

    rafId=requestAnimationFrame(drawGlobe);
  }
  function kick(){if(!rafId)rafId=requestAnimationFrame(drawGlobe);}
  function activateNode(slot, digitChar) {
    const d = parseInt(digitChar);
    if (isNaN(d)) return;
    const nodeIdx = nodeForDigit(slot, d);
    if (activeNodes[slot] === nodeIdx) return; // No-op if node already active for this slot
    if (activeNodes[slot] !== -1 && activeNodes[slot] !== nodeIdx) {
      deactivateNode(slot); // Flush old node's edges for this slot
    }
    activeNodes[slot] = nodeIdx;
    glowTarget[nodeIdx] = 1;
    for (let s = 0; s < 4; s++) {
      if (s !== slot && activeNodes[s] !== -1) {
        const nodeA = activeNodes[s], nodeB = nodeIdx;
        const exists = activeEdgeProgress.some(
          ae => (ae.i === nodeA && ae.j === nodeB) || (ae.i === nodeB && ae.j === nodeA)
        );
        if (!exists) {
          activeEdgeProgress.push({ i: nodeA, j: nodeB, t: 0 });
        }
      }
    }
    kick();
  }
  function deactivateNode(slot) {
    const pn = activeNodes[slot];
    if (pn !== -1) {
      glowTarget[pn] = 0;
      activeEdgeProgress = activeEdgeProgress.filter(ae => ae.i !== pn && ae.j !== pn);
    }
    activeNodes[slot] = -1;
    kick();
  }
  function resetGlobe(){
    activeNodes=[-1,-1,-1,-1];
    glowTarget.fill(0);
    activeEdgeProgress=[];
    for (let i = 0; i < 4; i++) {
      digits_state[i] = '';
      if (boxes[i]) {
        boxes[i].value = '';
        boxes[i].classList.remove('filled');
      }
    }
    kick();
  }
  window.resetGlobe = resetGlobe;

  /* OTP */
  const digits_state=['','','',''];
  const boxes=[0,1,2,3].map(i=>document.getElementById('otp-'+i));
  const getCode=()=>digits_state.join('');
  const clearError=()=>{document.getElementById('join-error').textContent='';};
  function setDigit(i,val){digits_state[i]=val;boxes[i].value=val;boxes[i].classList.toggle('filled',val!=='');}
  function triggerGlobe(i){if(digits_state[i]!=='')activateNode(i,digits_state[i]);}
  function dimGlobe(i){deactivateNode(i);}

  /* ── ERASE: one routine, one normative rule ──
     A single physical Backspace can reach us three ways: keydown (desktop),
     beforeinput/deleteContentBackward (Android, where keydown reports keyCode
     229), and input-with-empty-value (last-resort fallback). Each used to
     implement erase-and-move-focus independently, and two of those copies
     encoded opposite focus rules — the mechanism behind six prior regressions.

     Normative rule, one statement of it:
       box i filled  -> clear i only,    focus STAYS on i
       box i empty   -> clear i-1 only,  focus MOVES to i-1
       box 0 empty   -> nothing changes, focus stays

     preventDefault() normally collapses the keydown -> beforeinput -> input
     chain to a single handler, but IMEs do not reliably honour it, so the
     guard below is explicit rather than assumed: a fresh keydown opens a new
     keystroke, and only the first handler to claim it performs the erase. The
     time window covers IMEs that emit beforeinput with no keydown at all. */
  let eraseClaimed = false;
  let lastEraseAt  = 0;
  const now = () => (typeof performance !== 'undefined' ? performance.now() : Date.now());

  function claimErase(){
    if (eraseClaimed && (now() - lastEraseAt) < 40) return false; // same keystroke
    eraseClaimed = true;
    lastEraseAt  = now();
    return true;
  }

  function handleErase(i){
    if (!claimErase()) return;
    clearError();
    if (digits_state[i] !== ''){
      setDigit(i,''); dimGlobe(i); updateQR();
      // focus deliberately stays on i
    } else if (i > 0){
      setDigit(i-1,''); dimGlobe(i-1); updateQR();
      boxes[i-1].focus(); try{ boxes[i-1].select(); }catch(_){}
    }
  }

  boxes.forEach((box,i)=>{
    box.addEventListener('keydown',e=>{
      eraseClaimed = false; // a new keydown is always a new keystroke
      clearError();
      if(e.key==='Backspace' || e.keyCode===8){
        e.preventDefault();
        handleErase(i);
      }
      else if(e.key==='Delete'){
        e.preventDefault();
        // Delete clears this box only and never moves focus.
        if(digits_state[i]!==''){ setDigit(i,'');dimGlobe(i);updateQR(); }
      }
      else if(e.key==='ArrowLeft'&&i>0){e.preventDefault();boxes[i-1].focus();try{boxes[i-1].select();}catch(_){}}
      else if(e.key==='ArrowRight'&&i<3){e.preventDefault();boxes[i+1].focus();try{boxes[i+1].select();}catch(_){}}
    });
    box.addEventListener('beforeinput',e=>{
      if(e.inputType==='deleteContentBackward'){
        e.preventDefault();
        handleErase(i);
      }
    });
    box.addEventListener('input',()=>{
      clearError();const raw=box.value.replace(/\D/g,'');
      if(raw.length>0){
        if(raw.length>=3){
          // Genuine multi-character input (SMS autofill) — spread across boxes.
          for(let k=0;k<raw.length&&(i+k)<4;k++){
            setDigit(i+k,raw[k]);triggerGlobe(i+k);
          }
          updateQR();
          const nextFocus=Math.min(i+raw.length,3);
          boxes[nextFocus].focus();try{boxes[nextFocus].select();}catch(_){}
        }else{
          // One digit typed. maxlength="2" lets a filled box briefly hold two
          // characters when select() did not take, so normalise to the last
          // one: typing into a filled box replaces it rather than leaking the
          // extra character into the next box.
          const ch=raw[raw.length-1];
          setDigit(i,ch);triggerGlobe(i);updateQR();
          if(i<3){
            boxes[i+1].focus();
            try{ boxes[i+1].select(); }catch(_){}
          }
        }
      }else{
        // Value went empty without keydown/beforeinput claiming it.
        handleErase(i);
      }
    });
    box.addEventListener('paste',e=>{
      e.preventDefault();clearError();
      const pasted=(e.clipboardData||window.clipboardData).getData('text').replace(/\D/g,'').slice(0,4);
      resetGlobe();pasted.split('').forEach((ch,idx)=>{setDigit(idx,ch);setTimeout(()=>triggerGlobe(idx),idx*80);});
      for(let j=pasted.length;j<4;j++)setDigit(j,'');
      boxes[Math.min(pasted.length,3)].focus();try{boxes[Math.min(pasted.length,3)].select();}catch(_){}setTimeout(updateQR,350);
    });
    box.addEventListener('focus',()=>{try{box.select();}catch(_){}});
    box.addEventListener('click',()=>{try{box.select();}catch(_){}});
  });
  // Render globe immediately on startup
  kick();
  setTimeout(()=>boxes[0].focus(),300);

  /* QR */
  let qrInstance=null;
  /* #qr-placeholder is a CHILD of #qr-output, and rendering a QR wipes that
     container. Every later call therefore used to dereference a node this
     function had already destroyed and throw — which is why the OTP focus bug
     only ever appeared after a full 4-digit code had been entered once: the
     throw aborted the caller before it could move focus. Recreate the
     placeholder instead of assuming it survived. */
  function qrPlaceholder(out){
    let ph=document.getElementById('qr-placeholder');
    if(!ph){
      ph=document.createElement('div');
      ph.className='qr-placeholder';
      ph.id='qr-placeholder';
      ph.textContent='Enter a code above to generate QR';
      out.appendChild(ph);
    }
    return ph;
  }
  function getDeviceAccessURL(code){
    let host = window.location.hostname;
    const protocol = window.location.protocol;
    const port = window.location.port ? (':' + window.location.port) : '';
    if ((host === 'localhost' || host === '127.0.0.1') && window.__SERVER_LOCAL_IP__ && window.__SERVER_LOCAL_IP__ !== '127.0.0.1') {
      host = window.__SERVER_LOCAL_IP__;
    }
    return `${protocol}//${host}${port}${window.location.pathname}?room=${code}&auto=1`;
  }

  function checkDevTip(hasCode, url){
    const tipEl = document.getElementById('qr-dev-tip');
    if(!tipEl) return;
    if(hasCode && (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1')){
      tipEl.textContent = `Mobile link: ${url}`;
      tipEl.style.display = 'block';
    } else {
      tipEl.style.display = 'none';
    }
  }

  function updateQR(){
    const code=getCode(),out=document.getElementById('qr-output');
    if(!out) return;
    if(code.length<4){
      if(qrInstance){out.innerHTML='';qrInstance=null;}
      qrPlaceholder(out).style.display='';
      checkDevTip(false, '');
      return;
    }
    out.innerHTML='';qrInstance=null;
    const url = getDeviceAccessURL(code);
    try{qrInstance=new QRCode(out,{text:url,width:150,height:150,colorDark:'#050505',colorLight:'#ffffff',correctLevel:QRCode.CorrectLevel.M});}
    catch(e){const ph=qrPlaceholder(out);ph.textContent=code;ph.style.display='';}
    checkDevTip(true, url);
  }

  /* QR Scanner */
  let scannerStream=null;
  window.switchQRTab=function(tab){
    ['show','scan'].forEach(t=>{
      document.getElementById('tab-'+t).classList.toggle('active',t===tab);
      document.getElementById('panel-'+t).classList.toggle('active',t===tab);
    });
    if(tab==='scan')startScanner();else stopScanner();
  };
  async function startScanner(){
    const denied=document.getElementById('scanner-denied'),video=document.getElementById('scanner-video');
    denied.style.display='none';video.style.display='block';
    try{scannerStream=await navigator.mediaDevices.getUserMedia({video:{facingMode:'environment'}});video.srcObject=scannerStream;await video.play();startDecoding(video);}
    catch(e){video.style.display='none';denied.style.display='block';}
  }
  function startDecoding(video){
    if(!window.ZXing)return;
    try{new window.ZXing.BrowserQRCodeReader().decodeFromVideoElement(video).then(r=>{
      const text = r.getText() || '';
      let code = null;
      const m1 = text.match(/(?:[?&]room=|nexus-spatial:|^)(\d{4})(?:[&#]|$)/i);
      if (m1) {
        code = m1[1];
      } else {
        const m2 = text.match(/nexus-spatial:(\d):(\d):(\d):(\d)/i);
        if (m2) {
          code = m2.slice(1, 5).join('');
        }
      }
      if(code){
        stopScanner();switchQRTab('show');resetGlobe();
        code.split('').forEach((ch,idx)=>{setDigit(idx,ch);setTimeout(()=>triggerGlobe(idx),idx*80);});
        setTimeout(()=>{updateQR();joinRoom();},400);
      }
    }).catch(()=>{});}catch(e){}
  }
  function stopScanner(){if(scannerStream){scannerStream.getTracks().forEach(t=>t.stop());scannerStream=null;}document.getElementById('scanner-video').srcObject=null;}

  /* JOIN / CREATE */
  function joinRoom(){
    if (document.readyState === 'loading' || typeof window._socketJoinRoom !== 'function') {
      document.getElementById('join-error').textContent = 'Please wait, the website is still loading...';
      return;
    }
    const code=getCode();
    if(code.length<4){document.getElementById('join-error').textContent='Enter all 4 digits.';return;}
    if(code==='0000'){showRoomError('Room not found.');return;}
    if(code==='9999'){showRoomError('Room is full.');return;}
    try {
      if (typeof sessionStorage !== 'undefined') {
        sessionStorage.setItem('nexus_active_room', code);
      }
      const targetURL = window.location.pathname + '?room=' + code;
      if (window.location.search !== targetURL) {
        window.history.replaceState({}, document.title, targetURL);
      }
    } catch (_) {}
    // Always use real socket if defined, buffer emit if disconnected
    if (window._socketJoinRoom) {
      if (window._socketIsConnected && !window._socketIsConnected()) {
        document.getElementById('join-error').textContent='Connecting to signaling server... please wait.';
      }
      window._socketJoinRoom(code); return;
    }
    showRolePicker(code);
  }

  function showRolePicker(code) {
    // Fade out home card
    document.getElementById('home-screen').classList.add('hidden');
    document.getElementById('card-bloom').style.display = 'none';
    // Update code display in role picker
    document.getElementById('role-code-display').textContent = code;
    // Show role picker
    const picker = document.getElementById('role-picker');
    picker.classList.add('visible');
  }

  function hideRolePicker() {
    document.getElementById('role-picker').classList.remove('visible');
    document.getElementById('home-screen').classList.remove('hidden');
    document.getElementById('card-bloom').style.display = '';
  }

  // Back button
  document.getElementById('role-back-btn').addEventListener('click', hideRolePicker);

  // Sender role chosen
  document.getElementById('role-btn-sender').addEventListener('click', () => {
    const code = document.getElementById('role-code-display').textContent;
    document.getElementById('role-picker').classList.remove('visible');
    transitionToSender(code);
  });

  // Receiver role chosen
  document.getElementById('role-btn-receiver').addEventListener('click', () => {
    const code = document.getElementById('role-code-display').textContent;
    document.getElementById('role-picker').classList.remove('visible');
    transitionToReceiver(code);
  });

  // transitionToReceiver — mirrors initReceiverMode but called from home flow
  window.__nexusCurrentScreen = 'home';
  window.transitionToReceiver = function(code) {
    if (typeof code === 'object') {
      console.warn('transitionToReceiver received object:', code);
      code = code.roomCode || code.code || '';
    }
    if (!code || typeof code !== 'string') {
      code = String(code || '');
    }
    if (code === '[object Object]') {
      code = '';
    }
    // KTD2: synchronously record screen identity for App.tsx (replaces the
    // delayed DOM-class read that only flips true 340ms after a transition).
    window.__nexusCurrentScreen = 'receiver';
    // KTD4: idempotent — if we are already showing the receiver screen and no
    // receive is in flight, do not re-run the work or re-arm the shared
    // last-wins transition timer (a reconnect burst would churn it).
    const rxActiveNow = (typeof window.getRxTransferActive === 'function' && window.getRxTransferActive());
    if (document.getElementById('receiver-screen').classList.contains('visible') && !rxActiveNow) {
      return;
    }
    document.getElementById('logo-home').style.display = 'none';
    document.getElementById('logo-sender').style.display = 'flex';
    document.getElementById('top-bar-center').style.display = 'flex';
    document.getElementById('top-bar-home-right').style.display = 'none';
    document.getElementById('top-bar-sender-right').style.display = 'flex';
    document.getElementById('top-bar-center').innerHTML =
      '<div class="connected-dot"></div><span>Receiver Mode</span>';
    document.getElementById('room-code-display').textContent = 'Room ' + code;
    document.getElementById('home-screen').classList.add('hidden');
    document.getElementById('card-bloom').style.display = 'none';

    // Hide sender and progress/success screens to prevent overlap
    const ss = document.getElementById('sender-screen');
    if (ss) {
      ss.classList.remove('visible');
      ss.style.display = 'none';
    }
    const dz = document.getElementById('drop-zone');
    if (dz) {
      dz.style.display = 'none';
    }
    const qw = document.getElementById('queue-wrap');
    if (qw) {
      qw.style.display = 'none';
      qw.classList.remove('visible');
    }
    document.getElementById('progress-screen')?.classList.remove('visible');
    document.getElementById('success-screen')?.classList.remove('visible');
    // Do not strip the ETA/cancel overlay if a receive is genuinely in flight
    // (same protection as transitionToSender). Only resetTransferVisuals may
    // clear it once the receive has started.
    if (!(typeof window.getRxTransferActive === 'function' && window.getRxTransferActive())) {
      document.getElementById('receive-progress')?.classList.remove('visible');
    }
    document.getElementById('receive-success')?.classList.remove('visible');
    document.getElementById('transfer-error-screen')?.classList.remove('visible');

    // Re-wire Leave button to leaveReceiver once that IIFE has defined it
    document.getElementById('btn-leave').onclick = () => {
      if (typeof window.leaveReceiver === 'function') window.leaveReceiver();
    };

    // Cancel any pending sender/receiver screen-transition timer so the LAST
    // transition wins. Without this, transitionToSender's +320ms timer can fire
    // after we hide sender-screen, leaving BOTH full-screen layers visible and
    // overlapped (the receiver animation buries the drop zone).
    if (window.__nexusScreenTransitionTimer) {
      clearTimeout(window.__nexusScreenTransitionTimer);
      window.__nexusScreenTransitionTimer = null;
    }
    window.__nexusScreenTransitionTimer = setTimeout(() => {
      window.__nexusScreenTransitionTimer = null;
      if (!(typeof window.getRxTransferActive === 'function' && window.getRxTransferActive()) &&
          !document.getElementById('receive-progress')?.classList.contains('visible') &&
          !document.getElementById('receive-success')?.classList.contains('visible')) {
        const rs = document.getElementById('receiver-screen');
        if (rs) {
          rs.style.display = '';
          rs.classList.add('visible');
        }
      }
      window.updatePanelToggle?.();
      document.getElementById('rx-dev-panel')?.classList.add('visible');
    }, 340);
  };
  window.showRoomError = function showRoomError(msg){
    document.getElementById('join-error').textContent=msg;
    for(let i=0;i<4;i++){setDigit(i,'');dimGlobe(i);}resetGlobe();
    const card=document.getElementById('home-card');
    card.classList.remove('shake');void card.offsetWidth;card.classList.add('shake');
    card.addEventListener('animationend',()=>card.classList.remove('shake'),{once:true});
    setTimeout(()=>boxes[0].focus(),50);
  };
  document.getElementById('btn-join').addEventListener('click',joinRoom);
  document.getElementById('btn-create').addEventListener('click',()=>{
    if (document.readyState === 'loading') {
      document.getElementById('join-error').textContent = 'Please wait, the website is still loading...';
      return;
    }
    clearError();
    const typedCode = getCode();
    const code = (typedCode && /^\d{4}$/.test(typedCode)) ? typedCode : String(Math.floor(1000+Math.random()*9000));
    resetGlobe();for(let i=0;i<4;i++){setDigit(i,code[i]);setTimeout(()=>triggerGlobe(i),i*80);}
    setTimeout(updateQR,400);
    // Create Room only fills the code + QR. The user then clicks Join Room to
    // actually join, so a disconnected device is never silently joined into a
    // room it did not intend to enter.
  });
  function initURLRoomJoin(){
    try {
      const params = new URLSearchParams(window.location.search);
      let urlRoom = params.get('room');
      const autoJoin = params.get('auto');
      // Mobile tab-restore: a backgrounded page (file picker / screen off) can
      // be discarded and reloaded by the browser. If the page went hidden while
      // inside a room, rejoin that room on load instead of dropping the user to
      // an empty home screen. The marker is set on visibilitychange→hidden and
      // cleared on return-to-foreground.
      const pendingRestore = (typeof sessionStorage !== 'undefined') && sessionStorage.getItem('nexus_pending_restore') === '1';
      if (typeof sessionStorage !== 'undefined') {
        sessionStorage.removeItem('nexus_pending_restore');
      }
      // Read the stored active room before any cleanup below removes it.
      const storedRoom = (typeof sessionStorage !== 'undefined') ? sessionStorage.getItem('nexus_active_room') : null;
      if (!urlRoom) {
        if (typeof sessionStorage !== 'undefined' && !pendingRestore) {
          sessionStorage.removeItem('nexus_active_room');
        }
      }

      const shouldJoin = urlRoom && /^\d{4}$/.test(urlRoom) && (autoJoin === '1' || pendingRestore || storedRoom === urlRoom);
      const shouldRestoreStored = !urlRoom && storedRoom && /^\d{4}$/.test(storedRoom) && pendingRestore;

      const effectiveRoom = shouldJoin ? urlRoom : (shouldRestoreStored ? storedRoom : null);

      if (effectiveRoom) {
        urlRoom = effectiveRoom;
        for (let i = 0; i < 4; i++) {
          setDigit(i, urlRoom[i]);
          triggerGlobe(i);
        }
        updateQR();

        try {
          if (typeof sessionStorage !== 'undefined') {
            sessionStorage.setItem('nexus_active_room', urlRoom);
          }
          const targetURL = window.location.pathname + '?room=' + urlRoom;
          if (window.location.search !== targetURL) {
            window.history.replaceState({}, document.title, targetURL);
          }
        } catch (_) {}

        const attemptJoin = () => {
          if (typeof window._socketJoinRoom === 'function') {
            joinRoom();
            return true;
          }
          return false;
        };

        if (!attemptJoin()) {
          let attempts = 0;
          const timer = setInterval(() => {
            attempts++;
            if (attemptJoin() || attempts >= 50) {
              clearInterval(timer);
            }
          }, 100);
        }
      } else if (urlRoom && /^\d{4}$/.test(urlRoom)) {
        try {
          if (typeof sessionStorage !== 'undefined') {
            sessionStorage.removeItem('nexus_active_room');
          }
          if (window.location.search !== '') {
            window.history.replaceState({}, document.title, window.location.pathname);
          }
        } catch (_) {}
      }
    } catch (e) {
      console.error('Failed to parse room code from URL or storage:', e);
    }
  }

  window._debugGlobe = () => activeEdgeProgress;
  window.updateQR = updateQR;
  kick();
  initURLRoomJoin();
})();

/* ═══════════════════════════════════════════════
   CHAPTER 3A — TRANSFER VISUALS
   Self-contained transfer animation layer.

   Shares NO state with ParticleSystem: the background particle field is
   permanently live and hover-interactive, including mid-transfer (R1).
   A missed teardown call can leave rings on screen, but it can no longer
   corrupt the background — that failure mode is structurally gone.

   Every path that BEGINS a transfer calls window.enterTransferVisuals(mode).
   Every path that ENDS one calls window.resetTransferVisuals().
   resetTransferVisuals() is the only function permitted to stop the rings,
   hide the progress overlays, and restore the drop zone. It is idempotent,
   synchronous, and never defers work into a callback, RAF, or timer (KTD3).
═══════════════════════════════════════════════ */
(function () {

  /* ── Ring animation parameters ── */
  const SPAWN_MS    = 1350;  // interval between ring births (calm water ripple pacing)
  const LIFE_MS     = 3400;  // ring lifetime (slow serene duration)
  const TRAVEL_PX   = 240;   // radial distance covered over a lifetime
  const MAX_RINGS   = 4;     // concurrent cap
  const R0_RATIO    = 0.4556; // (r 80 + strokeWidth 4 / 2) / 180 viewBox

  // Design-system accents: tertiary #8ce7ff, primary #699cff, secondary #ddb7ff
  const OUT_FROM = [140, 231, 255], OUT_TO = [105, 156, 255];
  const IN_FROM  = [221, 183, 255], IN_TO  = [140, 231, 255];

  const canvas = document.getElementById('transfer-rings-canvas');
  const ctx = canvas ? canvas.getContext('2d') : null;

  let rings = [];
  let rafId = null;
  let mode = null;          // 'out' | 'in' | null
  let lastSpawnAt = 0;

  // Queried once: a MediaQueryList stays live, so `.matches` tracks the setting
  // without allocating a new object on every frame.
  const motionQuery = window.matchMedia
    ? window.matchMedia('(prefers-reduced-motion: reduce)')
    : null;
  const reducedMotion = () => !!motionQuery && motionQuery.matches;

  const lerp = (a, b, t) => a + (b - a) * t;
  const rgba = (c, alpha) =>
    'rgba(' + c[0] + ',' + c[1] + ',' + c[2] + ',' + alpha.toFixed(3) + ')';
  const mixRGBA = (from, to, t, alpha) =>
    rgba([Math.round(lerp(from[0], to[0], t)),
          Math.round(lerp(from[1], to[1], t)),
          Math.round(lerp(from[2], to[2], t))], alpha);

  /**
   * Radius of a ring at normalised age `t`, for the given mode. Shared by the
   * renderer and _debug() so the regression sweep measures the same curve the
   * screen draws — they used to carry separate copies of this easing.
   */
  const ringRadius = (ringMode, t, r0) => ringMode === 'out'
    ? r0 + TRAVEL_PX * (1 - Math.pow(1 - t, 2))   // quadratic ease-out: fluid ripple motion
    : r0 + TRAVEL_PX * (1 - Math.sin((t * Math.PI) / 2)); // smooth sine ease-in

  /**
   * Resolve the emit origin from the live DOM every frame, so the rings stay
   * pinned to the progress ring's circumference across breakpoints and resizes.
   * No cached geometry — a resize is absorbed on the next frame for free.
   */
  function resolveOrigin() {
    const wrap =
      document.querySelector('#progress-screen.visible .progress-ring-wrap') ||
      document.querySelector('#receive-progress.visible .progress-ring-wrap') ||
      // Fall back to whichever wrap is actually laid out, in case the overlay's
      // .visible class lands a frame later than the animation start.
      Array.from(document.querySelectorAll('.progress-ring-wrap'))
        .find(el => el.offsetParent !== null);

    if (!wrap) {
      // Nothing rendered yet — centre of viewport at the default 180px geometry.
      return { x: window.innerWidth / 2, y: window.innerHeight / 2, r0: 180 * R0_RATIO };
    }
    const rect = wrap.getBoundingClientRect();
    return {
      x: rect.left + rect.width / 2,
      y: rect.top + rect.height / 2,
      r0: rect.width * R0_RATIO
    };
  }

  function resizeCanvas() {
    if (!canvas) return;
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
  }

  function drawFrame() {
    rafId = requestAnimationFrame(drawFrame);

    // Skip the work, not the loop, while backgrounded (matches the CPU fix in
    // code_debugged.md #41). Teardown never depends on this loop reaching a
    // particular branch: stop() cancels the frame itself (KTD3).
    if (document.visibilityState === 'hidden') return;
    if (!ctx || !mode) return;

    if (canvas.width !== window.innerWidth || canvas.height !== window.innerHeight) {
      resizeCanvas();
    }

    const now = Date.now();
    const origin = resolveOrigin();
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    if (reducedMotion()) {
      // One static ring at the progress ring's edge, no radial motion.
      const c = mode === 'out' ? OUT_FROM : IN_FROM;
      ctx.beginPath();
      ctx.arc(origin.x, origin.y, origin.r0 + 6, 0, Math.PI * 2);
      ctx.strokeStyle = rgba(c, 0.32);
      ctx.lineWidth = 1.5;
      ctx.stroke();
      return;
    }

    if (now - lastSpawnAt >= SPAWN_MS && rings.length < MAX_RINGS) {
      rings.push({ born: now });
      lastSpawnAt = now;
    }

    const from = mode === 'out' ? OUT_FROM : IN_FROM;
    const to   = mode === 'out' ? OUT_TO   : IN_TO;

    for (let i = rings.length - 1; i >= 0; i--) {
      const t = (now - rings[i].born) / LIFE_MS;
      if (t >= 1) { rings.splice(i, 1); continue; }

      const radius = ringRadius(mode, t, origin.r0);
      const PEAK_ALPHA = 0.16;
      let alpha, width;
      if (mode === 'out') {
        alpha = t < 0.2 ? PEAK_ALPHA * (t / 0.2) : PEAK_ALPHA * (1 - (t - 0.2) / 0.8);
        width = lerp(1.8, 0.6, t);
      } else {
        alpha = t < 0.25 ? PEAK_ALPHA * (t / 0.25) : lerp(PEAK_ALPHA, 0.02, (t - 0.25) / 0.75);
        width = lerp(0.6, 1.8, t);
      }

      if (alpha <= 0 || radius <= 0) continue;
      ctx.beginPath();
      ctx.arc(origin.x, origin.y, radius, 0, Math.PI * 2);
      ctx.strokeStyle = mixRGBA(from, to, t, alpha);
      ctx.lineWidth = width;
      ctx.stroke();
    }
  }

  const TransferRings = {
    /** Start emitting rings. Calling it again with the same mode is a no-op. */
    start(nextMode) {
      if (!canvas || !ctx) return;
      if (nextMode !== 'out' && nextMode !== 'in') return;
      if (rafId !== null && mode === nextMode) return; // already running this mode

      mode = nextMode;
      rings = [];
      lastSpawnAt = 0;
      resizeCanvas();
      canvas.style.display = 'block';
      if (rafId === null) rafId = requestAnimationFrame(drawFrame);
    },

    /** Stop and clear. Takes no callback, returns nothing, safe at any time. */
    stop() {
      if (rafId !== null) { cancelAnimationFrame(rafId); rafId = null; }
      mode = null;
      rings = [];
      lastSpawnAt = 0;
      if (ctx && canvas) ctx.clearRect(0, 0, canvas.width, canvas.height);
      if (canvas) canvas.style.display = 'none';
    },

    /* Exposed for verification from the console and the regression sweep. */
    _debug() {
      const now = Date.now();
      const origin = resolveOrigin();
      return {
        mode, rafId, count: rings.length,
        r0: origin.r0,
        radii: rings.map(ring =>
          ringRadius(mode, Math.min((now - ring.born) / LIFE_MS, 1), origin.r0))
      };
    }
  };

  window.TransferRings = TransferRings;

  /* ── The one lifecycle owner ── */

  window.enterTransferVisuals = function enterTransferVisuals(nextMode) {
    document.body.classList.add('transferring');
    TransferRings.start(nextMode === 'in' ? 'in' : 'out');
  };

  window.resetTransferVisuals = function resetTransferVisuals() {
    TransferRings.stop();
    document.body.classList.remove('transferring');

    const ps = document.getElementById('progress-screen');
    if (ps) ps.classList.remove('visible');
    const rp = document.getElementById('receive-progress');
    if (rp) rp.classList.remove('visible');
  };

  // U1 — transfer phase bridge. React publishes exactly one value describing
  // whether a transfer is in flight, and this owner records it for the escape
  // hatch. `stalled` is unreachable until U5 but is part of the published set
  // from day one so neither unit blocks the other.
  let transferPhase = 'idle';
  window.setTransferPhase = function setTransferPhase(phase) {
    transferPhase = phase;
  };
  window.getTransferPhase = function getTransferPhase() {
    return transferPhase;
  };

})();

/* ═══════════════════════════════════════════════
   CHAPTER 3 — SENDER WORKSPACE
═══════════════════════════════════════════════ */
(function () {

  let fileQueue = [];
  let sphereFormed = false;
  let isTransferring = false;
  let transferRafId = null;
  let currentProgress = 0;
  let currentSpeed = 0;
  const CX = () => window.innerWidth / 2;
  const CY = () => window.innerHeight / 2;
  const SR = window.innerWidth < 768 ? 55 : 90;

  /* ── TRANSITION ── */
  window.transitionToSender = function(code) {
    if (typeof code === 'object') {
      console.warn('transitionToSender received object:', code);
      code = code.roomCode || code.code || '';
    }
    if (!code || typeof code !== 'string') {
      code = String(code || '');
    }
    if (code === '[object Object]') {
      code = '';
    }
    // If receiver screen is active or an active receive transfer or receive modal is in flight, do not flip screen identity or UI to sender workspace
    const isLocked = (typeof window._socketIsLocked === 'function' && window._socketIsLocked());
    const isRxActiveNow = (isLocked && window.__nexusCurrentScreen === 'receiver') ||
                          (typeof window.getRxTransferActive === 'function' && window.getRxTransferActive()) ||
                          document.getElementById('receive-progress')?.classList.contains('visible');
    if (isRxActiveNow) {
      if (typeof window.transitionToReceiver === 'function') {
        window.transitionToReceiver(code);
      }
      return;
    }
    // KTD2: synchronously record screen identity for App.tsx.
    window.__nexusCurrentScreen = 'sender';
    // KTD4: idempotent — if we are already showing the sender screen and no
    // transfer state changed, do not re-run the work or re-arm the shared
    // last-wins transition timer (a reconnect burst would churn it).
    const senderScreen = document.getElementById('sender-screen');
    const isTxActive = isTransferring || (typeof window.getTransferPhase === 'function' && window.getTransferPhase() !== 'idle') || document.getElementById('progress-screen')?.classList.contains('visible');
    const isRxActive = (typeof window.getRxTransferActive === 'function' && window.getRxTransferActive()) || (isLocked && window.__nexusCurrentScreen === 'receiver') || document.getElementById('receive-progress')?.classList.contains('visible') || document.getElementById('receive-success')?.classList.contains('visible');
    if (senderScreen && senderScreen.classList.contains('visible') && !isTxActive && !isRxActive) {
      return;
    }
    document.getElementById('logo-home').style.display = 'none';
    document.getElementById('logo-sender').style.display = 'flex';
    document.getElementById('top-bar-center').style.display = 'flex';
    
    // Set top bar center to a clean state
    document.getElementById('top-bar-center').innerHTML =
      '<div class="connected-dot green"></div><span>Room Ready</span>';
    document.getElementById('top-bar-home-right').style.display = 'none';
    document.getElementById('top-bar-sender-right').style.display = 'flex';
    document.getElementById('room-code-display').textContent = 'Room ' + code;
    document.getElementById('card-bloom').style.display = 'none';
    document.getElementById('home-screen').classList.add('hidden');

    // Hide receiver and progress/success screens to prevent overlap
    document.getElementById('receiver-screen').classList.remove('visible');
    window.updatePanelToggle?.();
    document.getElementById('rx-dev-panel')?.classList.remove('visible');

    // Do not tear down the in-flight progress overlay on a mid-transfer rejoin
    if (!isTxActive) {
      document.getElementById('progress-screen').classList.remove('visible');
    }
    document.getElementById('success-screen').classList.remove('visible');
    if (!isRxActive) {
      document.getElementById('receive-progress').classList.remove('visible');
    }
    document.getElementById('receive-success').classList.remove('visible');
    document.getElementById('transfer-error-screen').classList.remove('visible');

    // Cancel any pending receiver/sender screen-transition timer so the LAST
    // transition wins (see transitionToReceiver). Prevents the reconnect race
    // where both fixed full-screen layers end up .visible and overlap.
    if (window.__nexusScreenTransitionTimer) {
      clearTimeout(window.__nexusScreenTransitionTimer);
      window.__nexusScreenTransitionTimer = null;
    }
    if (!isTxActive && !isRxActive) {
      window.__nexusScreenTransitionTimer = setTimeout(() => {
        window.__nexusScreenTransitionTimer = null;
        const currentRxActive = (typeof window.getRxTransferActive === 'function' && window.getRxTransferActive()) ||
                                document.getElementById('receive-progress')?.classList.contains('visible') ||
                                document.getElementById('receive-success')?.classList.contains('visible') ||
                                document.getElementById('receiver-screen')?.classList.contains('visible') ||
                                document.body.classList.contains('transferring');
        const currentTxActive = isTransferring || (typeof window.getTransferPhase === 'function' && window.getTransferPhase() !== 'idle') ||
                                document.getElementById('progress-screen')?.classList.contains('visible');
        if (!currentRxActive && !currentTxActive) {
          const ss = document.getElementById('sender-screen');
          if (ss) {
            ss.style.display = '';
            ss.classList.add('visible');
          }
          const dz = document.getElementById('drop-zone');
          if (dz) {
            dz.style.display = '';
            dz.style.opacity = '1';
            dz.style.pointerEvents = 'all';
          }
          const qw = document.getElementById('queue-wrap');
          if (qw) {
            qw.style.display = '';
          }
        }
      }, 320);
    }
  };

  /* ── FILE HELPERS ── */
  function getFileIcon(n) {
    const e=n.split('.').pop().toLowerCase();
    return({pdf:'\u{1F4C4}',doc:'\u{1F4DD}',docx:'\u{1F4DD}',txt:'\u{1F4DD}',
      xls:'\u{1F4CA}',xlsx:'\u{1F4CA}',csv:'\u{1F4CA}',jpg:'\u{1F5BC}',jpeg:'\u{1F5BC}',
      png:'\u{1F5BC}',gif:'\u{1F5BC}',webp:'\u{1F5BC}',svg:'\u{1F3A8}',mp4:'\u{1F3AC}',
      mov:'\u{1F3AC}',mp3:'\u{1F3B5}',wav:'\u{1F3B5}',zip:'\u{1F4E6}',rar:'\u{1F4E6}',
      gz:'\u{1F4E6}',js:'\u{1F4BB}',ts:'\u{1F4BB}',py:'\u{1F4BB}',html:'\u{1F4BB}',
      css:'\u{1F4BB}',json:'\u{1F4BB}',md:'\u{1F4DD}',
    }[e]||'\u{1F4C1}');
  }
  function fmt(b){
    if(b<1024)return b+' B';
    if(b<1048576)return(b/1024).toFixed(1)+' KB';
    if(b<1073741824)return(b/1048576).toFixed(1)+' MB';
    return(b/1073741824).toFixed(2)+' GB';
  }
  // Security: HTML-escape user/peer-supplied strings before injecting into innerHTML
  function escapeHTML(str) {
    return String(str).replace(/[&<>'"/]/g, function(m) {
      return({'&':'&amp;','<':'&lt;','>':'&gt;',"'":'&#39;','"':'&quot;','/':'&#x2F;'}[m]);
    });
  }

  function addFiles(files) {
    for(const f of files) fileQueue.push({file:f,name:f.name,size:f.size,icon:getFileIcon(f.name)});
    renderQueue();
    if (typeof window.onFilesSelected === 'function') {
      window.onFilesSelected(fileQueue.map(f => f.file));
    }
  }
  function renderQueue() {
    const list=document.getElementById('queue-list'),wrap=document.getElementById('queue-wrap'),dz=document.getElementById('drop-zone');
    if (!wrap || !list || !dz) return;
    if(fileQueue.length===0){
      wrap.style.display='';
      wrap.classList.remove('visible');
      list.innerHTML='';
      dz.style.display='';
      return;
    }
    dz.style.padding='24px 32px';
    wrap.style.display='';
    wrap.classList.add('visible');
    list.innerHTML='';
    fileQueue.forEach((f,idx)=>{
      const item=document.createElement('div'); item.className='queue-item';
      item.innerHTML='<div class="queue-file-icon">'+f.icon+'</div>'+
        '<div class="queue-file-info"><div class="queue-file-name">'+escapeHTML(f.name)+'</div>'+
        '<div class="queue-file-size">'+fmt(f.size)+'</div></div>'+
        '<button class="queue-remove" onclick="removeQueueItem('+idx+')">\u00d7</button>';
      list.appendChild(item);
    });
    if(!sphereFormed) document.getElementById('control-panel').classList.add('visible');
  }
  window.removeQueueItem=function(idx){
    fileQueue.splice(idx,1); renderQueue();
    if(fileQueue.length===0) document.getElementById('control-panel').classList.remove('visible');
    if (typeof window.onFilesSelected === 'function') {
      window.onFilesSelected(fileQueue.map(f => f.file));
    }
  };

  const fileInput=document.getElementById('file-input');
  fileInput.addEventListener('click', () => { if (typeof window.startBackgroundAudio === 'function') window.startBackgroundAudio(); });
  fileInput.addEventListener('change',()=>{if(fileInput.files.length){addFiles(fileInput.files);fileInput.value='';}});
  const dropZone=document.getElementById('drop-zone');
  dropZone.addEventListener('dragover',e=>{e.preventDefault();dropZone.classList.add('dragover');});
  dropZone.addEventListener('dragleave',()=>dropZone.classList.remove('dragover'));
  dropZone.addEventListener('drop',e=>{e.preventDefault();dropZone.classList.remove('dragover');if(e.dataTransfer.files.length)addFiles(e.dataTransfer.files);});

  /* ── GRAB: sphere forms immediately, then transfer starts ── */
  document.getElementById('btn-grab').addEventListener('click', () => {
    if(fileQueue.length===0) return;
    const isRealSocket = window._socketIsConnected && window._socketIsConnected();
    if (!isRealSocket) {
      Toast.show('No peer connected. Connect a peer to transfer files.', 'warning');
      return;
    }

    sphereFormed = true;
    isTransferring = true;
    currentProgress = 0; currentSpeed = 0;

    // The drop zone and queue are removed from layout by body.transferring,
    // which enterTransferVisuals() adds below — no per-element fading here.
    document.getElementById('control-panel').classList.remove('visible');

    // Rings radiate outward for the duration of the send.
    window.enterTransferVisuals('out');

    setTimeout(() => {
      // Real WebRTC backend is handling this in App.tsx
      console.log("[index.html] Real backend active, showing progress screen.");
      window.showSenderProgress();
    }, 500);
  });

  /* ── SHOW SENDER PROGRESS (initial send + resume) ── */
  window.showSenderProgress = function(file, batchIndex, batchCount) {
    if (window.__nexusScreenTransitionTimer) {
      clearTimeout(window.__nexusScreenTransitionTimer);
      window.__nexusScreenTransitionTimer = null;
    }
    const ps = document.getElementById('progress-screen');
    if (!ps) return;
    const count = typeof batchCount === 'number' ? batchCount : (fileQueue.length || 1);
    const idx = typeof batchIndex === 'number' ? batchIndex : 0;
    const curFile = file || (fileQueue && fileQueue[idx]) || (fileQueue && fileQueue[0]);
    const firstName = curFile ? curFile.name : 'file';

    const fileLabelEl = document.getElementById('progress-file-label');
    if (fileLabelEl) fileLabelEl.textContent = count > 1 ? `File ${idx + 1} of ${count}` : '';

    const filenameEl = document.getElementById('progress-filename');
    if (filenameEl) {
      filenameEl.textContent = count > 1 ? (curFile ? curFile.name : `Sending files...`) : firstName;
    }
    const statsEl = document.getElementById('progress-stats');
    if (statsEl && (!statsEl.textContent || statsEl.textContent.includes('paused') || statsEl.textContent.includes('Reconnecting'))) {
      statsEl.textContent = '— Sending…';
    }

    document.getElementById('sender-screen')?.classList.remove('visible');
    document.getElementById('control-panel')?.classList.remove('visible');
    document.getElementById('transfer-error-screen')?.classList.remove('visible');
    document.getElementById('home-screen')?.classList.add('hidden');

    const cancelBtn = document.getElementById('btn-cancel');
    if (cancelBtn) cancelBtn.style.display = '';
    const cancelConf = document.getElementById('cancel-confirm');
    if (cancelConf) cancelConf.classList.remove('visible');

    ps.classList.add('visible');
    window.enterTransferVisuals('out');
    isTransferring = true;
  };

  /* ── SENDER PROGRESS HOOK ── */
  window.updateSenderProgress = function(progress, speedMbps, batchIndex, batchCount) {
    const safeProgress = Math.min(1, Math.max(0, Number(progress) || 0));
    const circumference = 502;
    const offset = circumference * (1 - safeProgress);
    const ringEl = document.getElementById('progress-ring');
    if (ringEl) ringEl.style.strokeDashoffset = offset;
    const pctEl = document.getElementById('progress-pct');
    if (pctEl) pctEl.textContent = Math.floor(safeProgress * 100);

    const idx = (typeof batchIndex === 'number') ? batchIndex : 0;
    const count = (typeof batchCount === 'number') ? batchCount : fileQueue.length;

    const fileLabelEl = document.getElementById('progress-file-label');
    if (fileLabelEl) {
      fileLabelEl.textContent = count > 1 ? `File ${idx + 1} of ${count}` : '';
    }

    const filenameEl = document.getElementById('progress-filename');
    if (filenameEl) {
      if (count > 1) {
        const curFile = fileQueue[idx];
        filenameEl.textContent = curFile ? curFile.name : `Sending files...`;
      } else {
        const firstName = fileQueue.length > 0 ? fileQueue[0].name : 'file';
        filenameEl.textContent = firstName;
      }
    }

    const activeFile = (fileQueue && fileQueue[idx]) ? fileQueue[idx] : (fileQueue && fileQueue[0] ? fileQueue[0] : null);
    const fileBytes = activeFile ? activeFile.size : (fileQueue.reduce((s,f)=>s+(f.size||0),0) || (80*1048576));
    const remaining = fileBytes * (1 - safeProgress);
    const etaSec = speedMbps > 0 ? remaining / (speedMbps * 1048576) : 0;
    const etaStr = speedMbps > 0 ? (etaSec < 2 ? '<1s' : '~' + Math.ceil(etaSec) + 's') : '—';
    const statsEl = document.getElementById('progress-stats');
    if (statsEl) {
      statsEl.textContent = (speedMbps || 0).toFixed(1) + ' MB/s · ' + etaStr + (speedMbps > 0 ? ' remaining' : '');
    }
  };

  /* Expose completeTransfer so Ch7 DataChannel 'eof' can trigger it */
  window._completeTransferCh3 = function() { completeTransfer(); };


  function completeTransfer() {
    if(transferRafId) { cancelAnimationFrame(transferRafId); transferRafId = null; }
    isTransferring = false; sphereFormed = false;

    // Exit path 1 of 7 — success (sender).
    window.resetTransferVisuals();

    const finishSuccess = () => {
      const count = fileQueue.length || 1;
      const total = fileQueue.reduce((s,f)=>s+(f.size||0),0);
      const metaEl = document.getElementById('success-meta');
      if (metaEl) {
        metaEl.textContent = count+' file'+(count>1?'s':'')+' sent'+(total > 0 ? ' \u00b7 '+fmt(total) : '');
      }
      const ss = document.getElementById('success-screen');
      if (ss) ss.classList.add('visible');

      // Auto-dismiss sender success modal after 6s (matching receiver dismissSuccess behavior)
      setTimeout(() => {
        // Re-read rather than closing over `ss`: this fires 6s later, and an
        // unguarded lookup in a timer is the exact shape that stranded the two
        // teardown bugs this branch fixes.
        const late = document.getElementById('success-screen');
        if (late && late.classList.contains('visible')) {
          sendAnotherFile();
        }
      }, 6000);
    };

    // Synchronous: the success screen must not ride on an animation callback.
    finishSuccess();
  }

  /* ── CANCEL ── */
  window.showCancelConfirm=function(){
    document.getElementById('btn-cancel').style.display='none';
    document.getElementById('cancel-confirm').classList.add('visible');
  };
  window.hideCancelConfirm=function(){
    document.getElementById('btn-cancel').style.display='';
    document.getElementById('cancel-confirm').classList.remove('visible');
  };
  window.cancelTransfer=function(){
    if (window._socketCancelTransfer) window._socketCancelTransfer();
  };

  window.onTransferCancelled = function() {
    console.log("UI: onTransferCancelled called");
    const wasReceiver = document.getElementById('receiver-screen').classList.contains('visible') ||
                        document.getElementById('receive-progress').classList.contains('visible') ||
                        document.getElementById('receive-success').classList.contains('visible');

    // Cancel sender animation loop (IIFE-local to Chapter 3)
    if (transferRafId) { cancelAnimationFrame(transferRafId); transferRafId = null; }

    // Reset sender-side state (IIFE-local to Chapter 3)
    isTransferring = false;
    sphereFormed = false;
    currentProgress = 0;
    currentSpeed = 0;

    // Cancel receiver animation loops via Chapter 4's exposed cleanup
    // (fixes cross-scope IIFE bug: rxRafId/rxTransferActive are in Ch4's closure)
    if (typeof window.stopReceiverAnimation === 'function') {
      window.stopReceiverAnimation();
    }

    // Exit path 2 of 7 — cancel from either side.
    window.resetTransferVisuals();
    document.getElementById('receive-success')?.classList.remove('visible');
    document.getElementById('transfer-error-screen')?.classList.remove('visible');

    hideCancelConfirm();
    if (typeof window.hideRxCancelConfirm === 'function') window.hideRxCancelConfirm();

    if (typeof resetSenderUI === 'function') resetSenderUI();

    const badge = document.getElementById('room-code-display');
    const rawBadgeText = badge ? badge.textContent.replace('Room ', '').replace('Receive', '').replace('----', '').trim() : '';
    const safeRoomCode = rawBadgeText || (typeof sessionStorage !== 'undefined' ? sessionStorage.getItem('nexus_active_room') : '') || '';

    // Immediate and guaranteed DOM state recovery for unlocked room
    document.getElementById('progress-screen')?.classList.remove('visible');
    document.getElementById('receive-progress')?.classList.remove('visible');
    document.body.classList.remove('transferring');

    if (wasReceiver) {
      document.getElementById('gravity-well-ui')?.classList.remove('hidden');
      const isLocked = (typeof window._socketIsLocked === 'function') ? window._socketIsLocked() : false;
      if (isLocked) {
        if (typeof window.transitionToReceiver === 'function') {
          window.transitionToReceiver(safeRoomCode);
        }
      } else {
        window.__nexusCurrentScreen = 'sender';
        if (typeof window.transitionToSender === 'function') {
          window.transitionToSender(safeRoomCode);
        }
        const ss = document.getElementById('sender-screen');
        if (ss) { ss.style.display = ''; ss.classList.add('visible'); }
        const qw = document.getElementById('queue-wrap');
        if (qw) { qw.style.display = ''; }
      }
    } else {
      window.__nexusCurrentScreen = 'sender';
      if (typeof window.transitionToSender === 'function') {
        window.transitionToSender(safeRoomCode);
      }
      const ss = document.getElementById('sender-screen');
      if (ss) { ss.style.display = ''; ss.classList.add('visible'); }
      const qw = document.getElementById('queue-wrap');
      if (qw) { qw.style.display = ''; }
    }

    const dz = document.getElementById('drop-zone');
    if (dz) {
      dz.style.display = '';
      dz.style.opacity = '1';
      dz.style.pointerEvents = 'all';
    }
  };

  /* ── SUCCESS ACTIONS ── */
  window.sendAnotherFile=function(){
    document.getElementById('success-screen')?.classList.remove('visible');
    window.__nexusCurrentScreen = 'sender';
    const ss = document.getElementById('sender-screen');
    if (ss) {
      ss.style.display = '';
      ss.classList.add('visible');
    }
    const dz = document.getElementById('drop-zone');
    if (dz) {
      dz.style.display = '';
      dz.style.opacity = '1';
      dz.style.pointerEvents = 'all';
    }
    const qw = document.getElementById('queue-wrap');
    if (qw) {
      qw.classList.remove('visible');
      qw.style.display = '';
    }
    fileQueue=[]; resetSenderUI();
    if (typeof window.onFilesSelected === 'function') window.onFilesSelected([]);
  };
  window.leaveRoom=function(){
    if(transferRafId) cancelAnimationFrame(transferRafId);
    isTransferring=false; sphereFormed=false; fileQueue=[];
    if (typeof window.onFilesSelected === 'function') window.onFilesSelected([]);
    // Exit path 3 of 7 — leave room.
    window.__nexusCurrentScreen = 'home';
    window.resetTransferVisuals();
    document.getElementById('success-screen').classList.remove('visible');
    document.getElementById('transfer-error-screen').classList.remove('visible');
    document.getElementById('role-picker').classList.remove('visible');
    document.getElementById('logo-home').style.display='flex';
    document.getElementById('logo-sender').style.display='none';
    document.getElementById('top-bar-center').style.display='none';
    document.getElementById('top-bar-home-right').style.display='flex';
    document.getElementById('top-bar-sender-right').style.display='none';
    document.getElementById('card-bloom').style.display='';
    document.getElementById('sender-screen').classList.remove('visible');
    document.getElementById('control-panel').classList.remove('visible');
    document.getElementById('home-screen').classList.remove('hidden');
    document.getElementById('join-error').textContent='';
    try {
      if (typeof sessionStorage !== 'undefined') {
        sessionStorage.removeItem('nexus_active_room');
      }
      window.history.replaceState({}, document.title, window.location.pathname);
    } catch (_) {}
  };
  document.getElementById('btn-leave').addEventListener('click', leaveRoom);

  window.resetSenderUI = function(){
    fileQueue = [];
    renderQueue();
    const fileInput = document.getElementById('file-input');
    if (fileInput) fileInput.value = '';
    if (typeof window.onFilesSelected === 'function') {
      window.onFilesSelected([]);
    }

    // Every lookup here is guarded: #btn-release does not exist in the markup
    // (the control panel is #btn-grab / #btn-drop), so the old unguarded chain
    // threw a TypeError partway through and silently abandoned the rest of this
    // reset — and with it the tail of onTransferCancelled, which calls this.
    const dz=document.getElementById('drop-zone');
    if (dz) {
      dz.style.padding='';
      dz.style.display='';
      dz.style.opacity='1';
      dz.style.pointerEvents='all';
    }
    const ss = document.getElementById('sender-screen');
    if (ss && window.__nexusCurrentScreen === 'sender') {
      ss.style.display = '';
      ss.classList.add('visible');
    }
    const qw=document.getElementById('queue-wrap');
    if (qw) {
      qw.classList.remove('visible');
      qw.style.display = '';
    }
    document.getElementById('control-panel')?.classList.remove('visible');
    const grab=document.getElementById('btn-grab');
    if (grab) grab.style.display='';
    document.getElementById('file-overlay')?.classList.remove('active');
    hideCancelConfirm();
    document.getElementById('transfer-error-screen')?.classList.remove('visible');
    // Restore hidden progress-screen sub-elements
    const ps = document.getElementById('progress-screen');
    if (ps) {
      ['.progress-ring-wrap', '.progress-meta', '.progress-file-label'].forEach(sel => {
        const el = ps.querySelector(sel);
        if (el) el.style.display = '';
      });
    }
  };


})();

/* ═══════════════════════════════════════════════
   CHAPTER 4 — RECEIVER WORKSPACE
   Activated via ?mode=receive in URL
   No backend logic — only UI/animation layer
═══════════════════════════════════════════════ */
(function () {

  /* ── MODE DETECTION ── */
  const isReceiver = new URLSearchParams(window.location.search).get('mode') === 'receive';
  // NOTE: We always define receiver functions so transitionToReceiver() from the
  // home screen can call them. Only the auto-boot (initReceiverMode) is gated.

  /* ── STATE ── */
  let rxFiles = [];           // received file objects: { name, size, icon, timestamp, blob? }
  let rxProgress = 0;         // 0→1
  let rxSpeed = 0;            // MB/s
  let rxTransferActive = false;
  let rxRafId = null;

  /* ── HELPERS ── */
  function getFileIcon(name) {
    const e = name.split('.').pop().toLowerCase();
    return ({
      pdf:'📄',doc:'📝',docx:'📝',txt:'📝',
      xls:'📊',xlsx:'📊',csv:'📊',jpg:'🖼',jpeg:'🖼',
      png:'🖼',gif:'🖼',webp:'🖼',svg:'🎨',mp4:'🎬',
      mov:'🎬',mp3:'🎵',wav:'🎵',zip:'📦',rar:'📦',
      gz:'📦',js:'💻',ts:'💻',py:'💻',html:'💻',
      css:'💻',json:'💻',md:'📝',
    }[e] || '📁');
  }
  function fmt(b) {
    if(b<1024)return b+' B';
    if(b<1048576)return(b/1024).toFixed(1)+' KB';
    if(b<1073741824)return(b/1048576).toFixed(1)+' MB';
    return(b/1073741824).toFixed(2)+' GB';
  }
  function timeAgo(ts) {
    const s = Math.floor((Date.now() - ts) / 1000);
    if(s < 10) return 'just now';
    if(s < 60) return s + 's ago';
    return Math.floor(s/60) + ' min ago';
  }
  const CX = () => window.innerWidth / 2;
  const CY = () => window.innerHeight / 2;

  /* ── INIT: switch to receiver mode from home screen ── */
  function initReceiverMode() {
    // Hide home-screen UI, show receiver workspace directly
    document.getElementById('home-screen').classList.add('hidden');
    document.getElementById('card-bloom').style.display = 'none';

    // Top-bar: sender → receiver labels
    document.getElementById('logo-home').style.display = 'none';
    document.getElementById('logo-sender').style.display = 'flex';
    document.getElementById('top-bar-center').style.display = 'flex';
    document.getElementById('top-bar-home-right').style.display = 'none';
    document.getElementById('top-bar-sender-right').style.display = 'flex';
    document.getElementById('top-bar-center').innerHTML =
      '<div class="connected-dot"></div><span>Receiver Mode</span>';
    document.getElementById('room-code-display').textContent = 'Receive';
    document.getElementById('btn-leave').removeEventListener('click', window.leaveRoom);
    document.getElementById('btn-leave').addEventListener('click', () => {
      if (typeof window.leaveReceiver === 'function') window.leaveReceiver();
    });

    // Show receiver screen + simulate button + panel toggle
    // NOTE: gravity well does NOT start here — particles drift freely until a file arrives
    if (window.__nexusScreenTransitionTimer) {
      clearTimeout(window.__nexusScreenTransitionTimer);
    }
    window.__nexusScreenTransitionTimer = setTimeout(() => {
      window.__nexusScreenTransitionTimer = null;
      document.getElementById('receiver-screen').classList.add('visible');
      updatePanelToggle();
    }, 340);
  }

  /* ── GRAVITY WELL, INCOMING SPHERE, RIPPLE — REMOVED ──
     All three mutated the shared background particle field to signal transfer
     state, which is exactly the coupling this rework removes. The receiver's
     idle "waiting" visual is still #gravity-well-ui, whose rings are pure CSS.
     Inbound transfer is now signalled by TransferRings (see CHAPTER 3A). */

  function startReceive(filename, totalBytes, batchIndex, batchCount) {
    if (rxTransferActive) return;
    rxTransferActive = true;
    rxProgress = 0; rxSpeed = 0;

    // Hide gravity-well idle UI
    document.getElementById('gravity-well-ui').classList.add('hidden');

    // Rings radiate inward from the moment FILE_META lands, giving the receiver
    // an ambient cue that something is incoming — before they press Drop.
    window.enterTransferVisuals('in');

    // Show receive progress ring
    showReceiveProgress(filename, totalBytes, batchIndex, batchCount);
  }

  function showReceiveProgress(filename, totalBytes, batchIndex, batchCount) {
    document.getElementById('receive-filename').textContent = filename;
    document.getElementById('receive-stats').textContent = '— Receiving…';
    
    // Reset SVG ring to 0% so it never starts partially filled from a previous transfer
    document.getElementById('receive-ring').style.strokeDashoffset = 502;
    document.getElementById('receive-pct').textContent = '0';

    const idx = (typeof batchIndex === 'number') ? batchIndex : 0;
    const count = (typeof batchCount === 'number') ? batchCount : 1;
    const labelEl = document.querySelector('#receive-progress .receive-label');
    if (labelEl) {
      labelEl.textContent = count > 1 ? `Receiving (File ${idx + 1} of ${count})...` : 'Receiving...';
    }

    // Belt-and-suspenders: ensure gravity well UI is hidden when progress shows
    document.getElementById('gravity-well-ui').classList.add('hidden');

    document.getElementById('receive-progress').classList.add('visible');
  }

  function completeReceive(filename, totalBytes, url, batchIndex = 0, batchCount = 1) {
    // Hoisted so the finally block can reach it even if the try throws early.
    // Rings run continuously across a batch and stop once, after the final file.
    const isLast = (batchIndex + 1) >= batchCount;
    try {
      if (rxRafId) cancelAnimationFrame(rxRafId);
      document.getElementById('receive-progress').classList.remove('visible');
      if (typeof hideRxCancelConfirm === 'function') hideRxCancelConfirm();

      const finalize = () => {
        // Add to files list
        const fileEntry = {
          name: filename,
          size: totalBytes,
          icon: getFileIcon(filename),
          timestamp: Date.now(),
          url: url || null,
        };
        rxFiles.push(fileEntry);
        renderFilesPanel();
        updatePanelToggle();

        if (isLast) {
          // Show success state
          document.getElementById('receive-success-filename').textContent = filename + ' · ' + fmt(totalBytes);
          document.getElementById('receive-success').classList.add('visible');
          Toast.show('File received: ' + filename, 'success');

          // Warn user to download manually from files panel if not auto-downloaded
          setTimeout(() => {
            Toast.show('Download files from files section if not downloaded automatically', 'info');
          }, 1200);

          // After 6s, reset gravity well for next transfer
          setTimeout(() => {
            if (document.getElementById('receive-success').classList.contains('visible')) {
              // Auto-dismiss success, reform gravity well
              dismissSuccess();
            }
          }, 6000);
        } else {
          // Multi-file transfer: do NOT show success screen yet. Keep waiting for the next file
          Toast.show(`Received ${batchIndex + 1} of ${batchCount}: ${filename}`, 'success');
          
          // Hide success screen if visible (just in case)
          document.getElementById('receive-success').classList.remove('visible');
          
          // Re-enable gravity well UI and keep it ready for next file
          document.getElementById('gravity-well-ui').classList.remove('hidden');
        }
      };

      // Synchronous on every branch: completion must never wait on an animation.
      finalize();
    } catch (err) {
      console.error('[completeReceive] Error during completion:', err);
    } finally {
      // ALWAYS reset rxTransferActive so subsequent transfers are never blocked
      rxTransferActive = false;
      // Exit path 4 of 7 — success (receiver). Only on the last file of a batch,
      // so mid-batch file boundaries do not restart the rings.
      if (isLast) window.resetTransferVisuals();
    }
  }

  function dismissSuccess() {
    document.getElementById('receive-success')?.classList.remove('visible');
    // Return to sender/idle workspace if room is unlocked
    const isLocked = (typeof window._socketIsLocked === 'function') ? window._socketIsLocked() : false;
    if (!isLocked) {
      window.__nexusCurrentScreen = 'sender';
      document.getElementById('gravity-well-ui')?.classList.add('hidden');
      document.getElementById('receiver-screen')?.classList.remove('visible');
      const roomCodeText = document.getElementById('room-code-display')?.textContent.replace('Room ', '').trim() || '';
      if (roomCodeText && typeof window.transitionToSender === 'function') {
        window.transitionToSender(roomCodeText);
      }
    } else {
      document.getElementById('gravity-well-ui')?.classList.remove('hidden');
    }
  }

  /* ── DOWNLOAD BUTTON ── (stub — real backend wires this) */
  document.getElementById('btn-download-main').addEventListener('click', () => {
    // When wired to real backend: trigger actual file download
    // For now, flash a visual confirmation
    const btn = document.getElementById('btn-download-main');
    const orig = btn.textContent;
    btn.textContent = '✓ Downloading…';
    btn.style.background = 'linear-gradient(135deg, #22c55e, #16a34a)';
    setTimeout(() => {
      btn.textContent = orig;
      btn.style.background = '';
      dismissSuccess();
    }, 1500);
  });

  document.getElementById('btn-rx-leave').addEventListener('click', () => {
    if (typeof window.leaveReceiver === 'function') window.leaveReceiver();
  });

  /* ── CH7 RECEIVER HOOKS — called by Ch7 real WebRTC wiring ── */

  // Keep local rxMeta ref for updateReceiverProgress ETA calc
  let rxMeta = null;

  /** Called when meta frame arrives: start incoming sphere + gravity well */
  window.triggerIncomingSphere = function(filename, totalBytes, batchIndex, batchCount) {
    if (window.__nexusScreenTransitionTimer) {
      clearTimeout(window.__nexusScreenTransitionTimer);
      window.__nexusScreenTransitionTimer = null;
    }
    window.__nexusCurrentScreen = 'receiver';
    rxMeta = { name: filename, size: totalBytes };
    // Safety reset: ensure stale rxTransferActive never blocks a valid new transfer
    rxTransferActive = false;

    // Immediately banish sender screen, drop zone, and queue wrap to prevent any overlap
    const ss = document.getElementById('sender-screen');
    if (ss) {
      ss.classList.remove('visible');
      ss.style.display = 'none';
    }
    const dz = document.getElementById('drop-zone');
    if (dz) {
      dz.style.display = 'none';
    }
    const qw = document.getElementById('queue-wrap');
    if (qw) {
      qw.style.display = 'none';
      qw.classList.remove('visible');
    }

    document.getElementById('gravity-well-ui')?.classList.add('hidden');
    document.getElementById('receiver-screen')?.classList.remove('visible');
    document.getElementById('transfer-error-screen')?.classList.remove('visible');
    document.getElementById('home-screen')?.classList.add('hidden');

    startReceive(filename, totalBytes, batchIndex, batchCount);
  };

  /** Explicitly show receive progress overlay (used on receive drop & resume) */
  window.showReceiverProgress = function(filename, totalBytes, batchIndex, batchCount) {
    if (window.__nexusScreenTransitionTimer) {
      clearTimeout(window.__nexusScreenTransitionTimer);
      window.__nexusScreenTransitionTimer = null;
    }
    window.__nexusCurrentScreen = 'receiver';
    rxTransferActive = true;
    rxMeta = { name: filename, size: totalBytes };
    
    // Immediately banish sender screen, drop zone, and queue wrap to prevent any overlap
    const ss = document.getElementById('sender-screen');
    if (ss) {
      ss.classList.remove('visible');
      ss.style.display = 'none';
    }
    const dz = document.getElementById('drop-zone');
    if (dz) {
      dz.style.display = 'none';
    }
    const qw = document.getElementById('queue-wrap');
    if (qw) {
      qw.style.display = 'none';
      qw.classList.remove('visible');
    }

    document.getElementById('gravity-well-ui')?.classList.add('hidden');
    document.getElementById('receiver-screen')?.classList.remove('visible');
    document.getElementById('transfer-error-screen')?.classList.remove('visible');
    document.getElementById('home-screen')?.classList.add('hidden');

    const rxCancelBtn = document.getElementById('btn-rx-cancel');
    if (rxCancelBtn) rxCancelBtn.style.display = '';
    const rxCancelConf = document.getElementById('rx-cancel-confirm');
    if (rxCancelConf) rxCancelConf.classList.remove('visible');

    showReceiveProgress(filename, totalBytes, batchIndex, batchCount);
    window.enterTransferVisuals('in');
  };

  /** Called each chunk: update progress ring with real values */
  window.updateReceiverProgress = function(progress, speedMbps) {
    const safeProgress = Math.min(1, Math.max(0, Number(progress) || 0));
    const circumference = 502;
    const ringEl = document.getElementById('receive-ring');
    if (ringEl) ringEl.style.strokeDashoffset = circumference * (1 - safeProgress);
    const pctEl = document.getElementById('receive-pct');
    if (pctEl) pctEl.textContent = Math.floor(safeProgress * 100);
    if (rxMeta) {
      const remaining = rxMeta.size * (1 - safeProgress);
      const etaSec = speedMbps > 0 ? remaining / (speedMbps * 1048576) : 0;
      const etaStr = speedMbps > 0 ? (etaSec < 2 ? '<1s' : '~' + Math.ceil(etaSec) + 's') : '—';
      const statsEl = document.getElementById('receive-stats');
      if (statsEl) {
        statsEl.textContent =
          (speedMbps || 0).toFixed(1) + ' MB/s · ' + etaStr + (speedMbps > 0 ? ' remaining' : '');
      }
    }
  };

  /** Called when file is fully assembled: add to panel + show success + trigger download */
  window.onFileReceivedSuccess = function({ name, size, url, batchIndex, batchCount }) {
    // Stop fake step loop if running
    if (rxRafId) { cancelAnimationFrame(rxRafId); rxRafId = null; }
    document.getElementById('receive-progress').classList.remove('visible');
    // Wire download button to real blob URL
    if (url) {
      const dlBtn = document.getElementById('btn-download-main');
      dlBtn.onclick = () => { const a=document.createElement('a'); a.href=url; a.download=name; a.click(); };
    }
    // Use existing completeReceive flow but with real data and batch metrics
    completeReceive(name, size, url, batchIndex, batchCount);
  };

  /* ── RECEIVER CANCEL CONFIRM ── */
  window.showRxCancelConfirm = function() {
    document.getElementById('btn-rx-cancel').style.display = 'none';
    document.getElementById('rx-cancel-confirm').classList.add('visible');
  };
  window.hideRxCancelConfirm = function() {
    document.getElementById('btn-rx-cancel').style.display = '';
    document.getElementById('rx-cancel-confirm').classList.remove('visible');
  };

  /**
   * stopReceiverAnimation — exposed globally so Chapter 3's onTransferCancelled
   * can properly cancel Chapter 4's IIFE-scoped animation loops.
   * This fixes the cross-scope variable bug where rxRafId/rxTransferActive
   * were silently creating implicit globals instead of modifying the real vars.
   */
  window.stopReceiverAnimation = function() {
    if (rxRafId) { cancelAnimationFrame(rxRafId); rxRafId = null; }
    rxTransferActive = false;
    rxProgress = 0;
    rxSpeed = 0;
    // Exit path 5 of 7 — receiver animation stop (reached by cancel and errors).
    window.resetTransferVisuals();
  };

  /**
   * getRxTransferActive — read-only view of the receiver-active latch for
   * cross-IIFE guards. True from the moment FILE_META lands (startReceive) until
   * complete/cancel/leave, so other IIFEs can tell a real receive is in flight
   * instead of stripping the ETA/cancel overlay mid-transfer.
   */
  window.getRxTransferActive = function() {
    return rxTransferActive;
  };

  /* ── LEAVE RECEIVER ── */
  window.leaveReceiver = function leaveReceiver() {
    if (rxRafId) { cancelAnimationFrame(rxRafId); rxRafId = null; }
    rxTransferActive = false; rxProgress = 0; rxSpeed = 0;

    // Exit path 6 of 7 — leave receiver.
    window.__nexusCurrentScreen = 'home';
    window.resetTransferVisuals();

    // Clear all receiver UI
    document.getElementById('receive-success').classList.remove('visible');
    document.getElementById('transfer-error-screen').classList.remove('visible');
    document.getElementById('receiver-screen').classList.remove('visible');
    document.getElementById('files-panel').classList.remove('open');
    document.getElementById('rx-dev-panel')?.classList.remove('visible');

    // Reset btn-leave back to default (sender's leaveRoom will re-bind its listener)
    document.getElementById('btn-leave').onclick = null;

    // Reset to home
    document.getElementById('logo-home').style.display = 'flex';
    document.getElementById('logo-sender').style.display = 'none';
    document.getElementById('top-bar-center').style.display = 'none';
    document.getElementById('top-bar-home-right').style.display = 'flex';
    document.getElementById('top-bar-sender-right').style.display = 'none';
    document.getElementById('card-bloom').style.display = '';
    document.getElementById('home-screen').classList.remove('hidden');
    try {
      if (typeof sessionStorage !== 'undefined') {
        sessionStorage.removeItem('nexus_active_room');
      }
      window.history.replaceState({}, document.title, window.location.pathname);
    } catch (_) {}
    // Ch7: emit leave-room
    if (window._socketLeaveRoom) window._socketLeaveRoom();
  };

  /* ── SECURITY HELPER ── */
  function escapeHTML(str) {
    return String(str).replace(/[&<>'"/]/g, function(m) {
      return({'&':'&amp;','<':'&lt;','>':'&gt;',"'":'&#39;','"':'&quot;','/':'&#x2F;'}[m]);
    });
  }

  /* ── FILES PANEL ── */
  function renderFilesPanel() {
    const body = document.getElementById('panel-body');
    const empty = document.getElementById('panel-empty');
    if (rxFiles.length === 0) {
      empty.style.display = '';
      // Remove all file cards
      body.querySelectorAll('.rx-file-card').forEach(el => el.remove());
      return;
    }
    empty.style.display = 'none';
    // Rebuild list (simplest approach, keeps order)
    body.querySelectorAll('.rx-file-card').forEach(el => el.remove());
    rxFiles.slice().reverse().forEach((f, idx) => {
      const card = document.createElement('div');
      card.className = 'rx-file-card';
      card.innerHTML =
        '<div class="rx-file-icon">' + f.icon + '</div>' +
        '<div class="rx-file-info">' +
          '<div class="rx-file-name">' + escapeHTML(f.name) + '</div>' +
          '<div class="rx-file-meta">' + fmt(f.size) + ' · ' + timeAgo(f.timestamp) + '</div>' +
        '</div>' +
        '<button class="btn-rx-dl" onclick="rxDownload(' + (rxFiles.length - 1 - idx) + ', this)">DL</button>';
      body.insertBefore(card, empty);
    });
  }

  function updatePanelToggle() {
    const count = rxFiles.length;
    document.getElementById('files-count').textContent = count;
    const toggleBtn = document.getElementById('files-panel-toggle');
    if (toggleBtn) {
      if (count > 0) {
        toggleBtn.classList.add('visible');
      } else {
        toggleBtn.classList.remove('visible');
      }
    }
  }
  window.updatePanelToggle = updatePanelToggle;

  // Download stub (wired by backend in Ch7)
  window.rxDownload = function(idx, btnEl) {
    const btn = btnEl || document.querySelectorAll('.btn-rx-dl')[idx];
    if (!btn) return;
    const f = rxFiles[idx];
    if (f && f.url) {
      const a = document.createElement('a');
      a.href = f.url;
      a.download = f.name;
      a.click();
    }
    const orig = btn.textContent;
    btn.textContent = '✓';
    btn.style.color = '#22c55e';
    setTimeout(() => { btn.textContent = orig; btn.style.color = ''; }, 1200);
  };

  /* Panel toggle open/close */
  document.getElementById('files-panel-toggle').addEventListener('click', () => {
    document.getElementById('files-panel').classList.toggle('open');
  });

  /* Download All stub */
  document.getElementById('btn-dl-all').addEventListener('click', () => {
    if (rxFiles.length === 0) return;
    rxFiles.forEach(f => {
      if (f.url) {
        const a = document.createElement('a');
        a.href = f.url;
        a.download = f.name;
        a.click();
      }
    });
    const btn = document.getElementById('btn-dl-all');
    btn.textContent = '✓ Done';
    setTimeout(() => { btn.textContent = 'Download All'; }, 1500);
  });

  /* Clear files */
  document.getElementById('btn-clear-files').addEventListener('click', () => {
    rxFiles = [];
    renderFilesPanel();
    updatePanelToggle();
  });

  /* Panel mobile swipe-down to close */
  (function () {
    const panel = document.getElementById('files-panel');
    let startY = 0;
    panel.addEventListener('touchstart', e => { startY = e.touches[0].clientY; }, { passive: true });
    panel.addEventListener('touchend', e => {
      if (e.changedTouches[0].clientY - startY > 60) panel.classList.remove('open');
    }, { passive: true });
  })();


  /* ── BOOT RECEIVER ── */
  // Auto-boot only when accessed via ?mode=receive URL param.
  // Normal flow: transitionToReceiver() is called from the home screen role picker.
  if (isReceiver) initReceiverMode();

})();

/* ═══════════════════════════════════════════════
   CHAPTER 5 — TOAST NOTIFICATIONS + ERROR STATES
   Global Toast API:  Toast.show(message, type)
   Error states: transfer fail, peer disconnect,
   large file modal, camera denied banner.
═══════════════════════════════════════════════ */
(function () {

  const TOAST_DURATION = 4000; // ms before auto-dismiss
  const MAX_TOASTS = 3;

  const container = document.getElementById('toast-container');
  const activeToasts = [];

  const ICONS = {
    success: '✓',
    error:   '✕',
    warning: '⚠',
    info:    'ℹ',
  };

  /* ── DISMISS a single toast ── */
  function dismissToast(el, idx) {
    if (el.dataset.leaving) return;
    el.dataset.leaving = '1';
    clearTimeout(el._timer);
    el.classList.add('leaving');
    el.addEventListener('animationend', () => {
      el.remove();
      const pos = activeToasts.indexOf(el);
      if (pos !== -1) activeToasts.splice(pos, 1);
    }, { once: true });
  }

  /* ── PUBLIC API ── */
  window.Toast = {
    show(message, type = 'info', duration = TOAST_DURATION, options = {}) {
      // Deduplication: don't show identical message within 1s
      const last = activeToasts[activeToasts.length - 1];
      if (last && last.dataset.msg === message && (Date.now() - (last._born || 0)) < 1000) return last;

      // Overflow: evict oldest if at max
      if (activeToasts.length >= MAX_TOASTS) {
        dismissToast(activeToasts[0]);
      }

      const toast = document.createElement('div');
      toast.className = `toast ${type}`;
      toast.dataset.msg = message;
      toast._born = Date.now();

      const escape = function(str) {
        return String(str || '').replace(/[&<>'"]/g, function(m) {
          return({'&':'&amp;','<':'&lt;','>':'&gt;',"'":'&#39;','"':'&quot;'}[m]);
        });
      };

      const safeMsg = escape(message);
      let actionHtml = '';
      if (options && options.actionText) {
        actionHtml = `<button class="toast-action-btn">${escape(options.actionText)}</button>`;
      }

      toast.innerHTML = `
        <div class="toast-icon">${ICONS[type] || 'ℹ'}</div>
        <div class="toast-body">
          <div class="toast-msg">${safeMsg}</div>
          ${actionHtml}
        </div>
        <button class="toast-close" aria-label="Dismiss">×</button>
        <div class="toast-progress"><div class="toast-progress-bar" style="width:100%"></div></div>
      `;

      if (options && options.actionText && typeof options.onAction === 'function') {
        const btn = toast.querySelector('.toast-action-btn');
        if (btn) {
          btn.addEventListener('click', (e) => {
            e.stopPropagation();
            try { options.onAction(toast); } catch (_) {}
          });
        }
      }

      container.appendChild(toast);
      activeToasts.push(toast);

      // Close button
      toast.querySelector('.toast-close').addEventListener('click', () => dismissToast(toast));

      // Progress bar animation & auto-dismiss
      const progEl = toast.querySelector('.toast-progress');
      if (typeof duration === 'number' && duration > 0 && duration !== Infinity) {
        const bar = toast.querySelector('.toast-progress-bar');
        if (bar) {
          requestAnimationFrame(() => {
            bar.style.transition = `width ${duration}ms linear`;
            bar.style.width = '0%';
          });
        }
        toast._timer = setTimeout(() => dismissToast(toast), duration);
      } else if (progEl) {
        progEl.style.display = 'none';
      }

      // Dynamic in-place updater (prevents UI flicker)
      toast.updateMsg = function(newMsg, newType, newOptions) {
        toast.dataset.msg = newMsg;
        const msgEl = toast.querySelector('.toast-msg');
        if (msgEl) {
          msgEl.innerHTML = escape(newMsg);
        }
        if (newType) {
          toast.className = `toast ${newType}`;
          const iconEl = toast.querySelector('.toast-icon');
          if (iconEl) iconEl.textContent = ICONS[newType] || 'ℹ';
        }
        let btn = toast.querySelector('.toast-action-btn');
        if (newOptions && newOptions.actionText && typeof newOptions.onAction === 'function') {
          if (!btn) {
            btn = document.createElement('button');
            btn.className = 'toast-action-btn';
            toast.querySelector('.toast-body').appendChild(btn);
          }
          btn.textContent = newOptions.actionText;
          btn.onclick = (e) => {
            e.stopPropagation();
            try { newOptions.onAction(toast); } catch (_) {}
          };
        } else if (btn && newOptions && newOptions.actionText === null) {
          btn.remove();
        }
      };

      // Transition smoothly to success state with progress bar
      toast.transitionToSuccess = function(successMsg, successDuration = 3500) {
        toast.updateMsg(successMsg || '🟢 Connected to Signaling Network! Ready to share.', 'success', { actionText: null });
        if (toast._timer) clearTimeout(toast._timer);
        if (progEl) {
          progEl.style.display = 'block';
          const bar = toast.querySelector('.toast-progress-bar');
          if (bar) {
            bar.style.transition = 'none';
            bar.style.width = '100%';
            requestAnimationFrame(() => {
              requestAnimationFrame(() => {
                bar.style.transition = `width ${successDuration}ms linear`;
                bar.style.width = '0%';
              });
            });
          }
        }
        toast._timer = setTimeout(() => dismissToast(toast), successDuration);
      };

      toast.dismiss = function() {
        dismissToast(toast);
      };

      return toast;
    },
    dismiss(toast) {
      if (toast) dismissToast(toast);
    },
    dismissAll() {
      while (activeToasts.length > 0) {
        dismissToast(activeToasts[0]);
      }
    }
  };

  /* ─────────────────────────────────────────────
     ERROR SCREEN — transfer fail / peer disconnect
  ───────────────────────────────────────────── */
  const errorScreen = document.getElementById('transfer-error-screen');
  const errorTitle  = document.getElementById('error-title');
  const errorSub    = document.getElementById('error-subtitle');
  let   errorRetryFn = null;

  window.showTransferError = function(title, subtitle, retryFn) {
    // Exit path 7 of 7 — error and ICE failure.
    window.resetTransferVisuals();

    errorTitle.textContent = title;
    errorSub.textContent   = subtitle || '';
    errorRetryFn = retryFn || null;

    // Red shatter from screen center
    if (window.ParticleSystem) {
      ParticleSystem.shatterEffect(window.innerWidth/2, window.innerHeight/2, '#ef4444');
    }
    Toast.show(title, 'error');
    errorScreen.classList.add('visible');
  };

  document.getElementById('btn-error-retry').addEventListener('click', () => {
    errorScreen.classList.remove('visible');
    if (typeof errorRetryFn === 'function') {
      errorRetryFn();
    } else {
      // Default: reset sender to drop zone
      if (typeof resetSenderUI === 'function') resetSenderUI();
      window.resetTransferVisuals();
    }
  });

  document.getElementById('btn-error-home').addEventListener('click', () => {
    errorScreen.classList.remove('visible');
    // Delegate to whichever leave function is in scope (sender or receiver)
    if (typeof window.leaveRoom === 'function') window.leaveRoom();
    else if (typeof window.leaveReceiver === 'function') window.leaveReceiver();
    else {
      // Fallback: manual home reset
      window.resetTransferVisuals();
      document.getElementById('home-screen').classList.remove('hidden');
    }
  });

  /* ─────────────────────────────────────────────
     PEER DISCONNECT (mid-transfer variant)
  ───────────────────────────────────────────── */
  window.showPeerDisconnected = function(midTransfer) {
    if (midTransfer) {
      if (window.TransferRings) window.TransferRings.stop();
      const trCanvas = document.getElementById('transfer-rings-canvas');
      if (trCanvas) trCanvas.style.display = 'none';
      // Non-destructive: keep in-flight progress screen intact and show pause status
      Toast.show('Peer disconnected. Waiting to resume transfer...', 'warning');
      const psStats = document.getElementById('progress-stats');
      if (psStats) psStats.textContent = 'Connection paused · Reconnecting…';
      const rxStats = document.getElementById('receive-stats');
      if (rxStats) rxStats.textContent = 'Connection paused · Reconnecting…';
    } else {
      window.resetTransferVisuals();
      // KTD6: a peer leave with no transfer in flight must release the receiver
      // latch. resetTransferVisuals() hides the receive-progress overlay but
      // leaves rxTransferActive true, so a later transitionToReceiver (from the
      // room-status:waiting handler) refuses to reveal the receiver-screen —
      // the receiver is left on a blank state. Clearing the latch lets the
      // receiver workspace render again ("stays on its current screen", R8/SC4).
      if (typeof window.stopReceiverAnimation === 'function') {
        window.stopReceiverAnimation();
      }
      Toast.show('Peer disconnected. Waiting for peer...', 'warning');
    }
  };


  /* ─────────────────────────────────────────────
     LARGE FILE WARNING MODAL (> 500 MB)
  ───────────────────────────────────────────── */
  const lfModal  = document.getElementById('large-file-modal');
  const lfmBody  = document.getElementById('lfm-body');
  let   lfmProceedFn  = null;
  let   lfmCancelFn   = null;

  /**
   * window.checkLargeFile(files, onProceed, onCancel)
   * Call before starting a transfer. If any file > 500MB, shows modal.
   * Calls onProceed() if user confirms, onCancel() otherwise.
   * If no large file, calls onProceed() immediately.
   */
  window.checkLargeFile = function(files, onProceed, onCancel) {
    const LIMIT = 500 * 1024 * 1024; // 500 MB
    const largest = Array.from(files || []).reduce((mx, f) => f.size > mx ? f.size : mx, 0);
    if (largest < LIMIT) {
      if (typeof onProceed === 'function') onProceed();
      return;
    }
    const sizeStr = largest >= 1073741824
      ? (largest / 1073741824).toFixed(2) + ' GB'
      : (largest / 1048576).toFixed(0) + ' MB';
    lfmBody.innerHTML = `This file is <strong>${sizeStr}</strong>. Transfer may take longer on slow connections and use significant memory.`;
    lfmProceedFn = onProceed;
    lfmCancelFn  = onCancel;
    lfModal.classList.add('visible');
  };

  document.getElementById('btn-lfm-send').addEventListener('click', () => {
    lfModal.classList.remove('visible');
    if (typeof lfmProceedFn === 'function') lfmProceedFn();
    lfmProceedFn = null; lfmCancelFn = null;
  });

  document.getElementById('btn-lfm-cancel').addEventListener('click', () => {
    lfModal.classList.remove('visible');
    if (typeof lfmCancelFn === 'function') lfmCancelFn();
    lfmProceedFn = null; lfmCancelFn = null;
  });

  // Close on backdrop click
  lfModal.addEventListener('click', e => {
    if (e.target === lfModal) {
      lfModal.classList.remove('visible');
      if (typeof lfmCancelFn === 'function') lfmCancelFn();
      lfmProceedFn = null; lfmCancelFn = null;
    }
  });

  // Close on ESC key
  document.addEventListener('keydown', e => {
    if (e.key === 'Escape' && lfModal.classList.contains('visible')) {
      lfModal.classList.remove('visible');
      if (typeof lfmCancelFn === 'function') lfmCancelFn();
      lfmProceedFn = null; lfmCancelFn = null;
    }
  });

  /* ─────────────────────────────────────────────
     SIGNALING UNREACHABLE TOAST HELPER
  ───────────────────────────────────────────── */
  window.showSignalingError = function() {
    Toast.show('Cannot reach signaling server. Check connection.', 'error');
  };

  /* ─────────────────────────────────────────────
     SENDER: WIRE LARGE FILE CHECK INTO GRAB FLOW
     (Intercepts the existing grab button logic)
  ───────────────────────────────────────────── */
  // Hook onto the grab button: wrap the existing handler
  // so large-file check fires before sphere forms.
  // We listen at capture phase before the original handler.
  (function patchGrabButton() {
    // Large file check warning disabled.
  })();

  /* ─────────────────────────────────────────────
     TEST HOOKS — accessible from browser console
     Usage: Toast.show('message', 'success')
            showTransferError('Transfer failed.', 'File incomplete.')
            showPeerDisconnected(true)
            showCameraDeniedBanner()
  ───────────────────────────────────────────── */

})();

/* ═══════════════════════════════════════════════
   CHAPTER 6 — SOCKET.IO SIGNALING UI LAYER
   ───────────────────────────────────────────────
   This module owns all visible signaling state:
     · Bottom bar dots (signaling + WebRTC)
     · Top bar status pill (Not Connected → green)
     · Top bar connected-peer indicator
     · Room code badge in sender/receiver top bar
   It exposes Signaling.* hooks that Chapter 7
   (real Socket.IO wiring) will call. All logic
   here is pure UI — no real socket connections.

   Chapter 7 TODO:
     · Connect socket.io CDN script
     · Call Signaling.onConnect() on socket 'connect'
     · Call Signaling.onDisconnect() on socket 'disconnect'
     · Call Signaling.onPeerJoined(role) after room-ready
     · Call Signaling.onPeerLeft() on peer-disconnected
     · Call Signaling.onWebRTCOpen() when DataChannel opens
     · Call Signaling.onWebRTCClose() when DataChannel closes
     · Emit create-room / join-room and handle server responses
       using existing room flow (transitionToSender / transitionToReceiver)

   Chapter 8 TODO:
     · Low-end device detection (hardwareConcurrency ≤ 2)
     · Touch drag for sphere
     · Keyboard accessibility pass
     · Favicon + page title finalization
     · Session end toast with file count + MB total
═══════════════════════════════════════════════ */
(function () {

  /* ── DOT ELEMENTS ── */
  const dotSignaling = document.getElementById('dot-signaling');
  const dotWebRTC    = document.getElementById('dot-webrtc');

  /* ── CSS for green / amber dot states (injected once) ── */
  const sigStyle = document.createElement('style');
  sigStyle.textContent = `
    .bar-dot.green  { background: #22c55e; box-shadow: 0 0 6px rgba(34,197,94,0.8); }
    .bar-dot.amber  { background: #f59e0b; box-shadow: 0 0 6px rgba(245,158,11,0.7); }
    /* pulse animation for connected state */
    @keyframes dotPulseGreen {
      0%,100% { box-shadow: 0 0 5px rgba(34,197,94,0.6); }
      50%      { box-shadow: 0 0 12px rgba(34,197,94,0.95); }
    }
    .bar-dot.green { animation: dotPulseGreen 2.4s ease-in-out infinite; }
  `;
  document.head.appendChild(sigStyle);

  /* ── INTERNAL STATE ── */
  let sigConnected  = false;
  let peerConnected = false;
  let webrtcOpen    = false;

  /* ── HELPER: update the top bar status pill (home screen only) ── */
  function updateStatusPill() {
    const pill    = document.querySelector('.status-pill');
    const pillDot = pill ? pill.querySelector('.status-dot') : null;
    const pillTxt = pill ? pill.querySelector('span') : null;
    if (!pill) return;

    if (peerConnected) {
      if (pillDot) { pillDot.style.background='#22c55e'; pillDot.style.boxShadow='0 0 8px rgba(34,197,94,0.8)'; }
      if (pillTxt) pillTxt.textContent = 'Peer Connected';
      pill.style.borderColor = 'rgba(34,197,94,0.25)';
    } else if (sigConnected) {
      if (pillDot) { pillDot.style.background='#22c55e'; pillDot.style.boxShadow='0 0 8px rgba(34,197,94,0.7)'; }
      if (pillTxt) pillTxt.textContent = 'Server Online';
      pill.style.borderColor = 'rgba(34,197,94,0.15)';
    } else {
      if (pillDot) { pillDot.style.background='#f59e0b'; pillDot.style.boxShadow='0 0 8px rgba(245,158,11,0.7)'; }
      if (pillTxt) pillTxt.textContent = 'Not Connected';
      pill.style.borderColor = 'rgba(245,158,11,0.12)';
    }
  }

  /* ── PUBLIC API (called by Chapter 7 real socket wiring) ── */
  window.Signaling = {

    /** Socket connected to signaling server */
    onConnect() {
      sigConnected = true;
      const elSig = document.getElementById('dot-signaling') || dotSignaling;
      if (elSig) {
        elSig.classList.remove('amber');
        elSig.classList.add('green');
      }
      updateStatusPill();
      const joinErr = document.getElementById('join-error');
      if (joinErr && (joinErr.textContent.includes('signaling') || joinErr.textContent.includes('loading'))) {
        joinErr.textContent = '';
      }
    },

    /** Socket disconnected from signaling server */
    onDisconnect() {
      const wasConnected = sigConnected;
      sigConnected  = false;
      peerConnected = false;
      webrtcOpen    = false;
      const elSig = document.getElementById('dot-signaling') || dotSignaling;
      const elWeb = document.getElementById('dot-webrtc') || dotWebRTC;
      if (elSig) elSig.classList.remove('green','amber');
      if (elWeb) elWeb.classList.remove('green');
      updateStatusPill();
      if (wasConnected && window.Toast) Toast.show('Cannot reach signaling server. Check connection.', 'error');
    },

    /** Server confirmed peer joined the room; role = 'sender' | 'receiver' */
    onPeerJoined(role) {
      peerConnected = true;
      updateStatusPill();
      if (window.Toast) Toast.show('Peer connected.', 'success');

      /* Update the top-bar "Connected to Peer" center indicator */
      const centerBar = document.getElementById('top-bar-center');
      if (centerBar) centerBar.style.display = 'flex';
    },

    /** Peer left (idle or mid-transfer handled by caller) */
    onPeerLeft(midTransfer) {
      peerConnected = false;
      const elWeb = document.getElementById('dot-webrtc') || dotWebRTC;
      if (elWeb) elWeb.classList.remove('green');
      updateStatusPill();

      const centerBar = document.getElementById('top-bar-center');
      if (centerBar) {
        centerBar.style.display = 'flex';
        centerBar.innerHTML = '<div class="connected-dot amber"></div><span>Waiting for Peer</span>';
      }

      if (window.showPeerDisconnected) showPeerDisconnected(midTransfer);
    },

    /** WebRTC DataChannel opened — P2P dot goes green */
    onWebRTCOpen() {
      webrtcOpen = true;
      dotWebRTC.classList.add('green');
    },

    /** WebRTC DataChannel closed */
    onWebRTCClose() {
      webrtcOpen = false;
      dotWebRTC.classList.remove('green');
    },

    /** Update the room code badge in the sender/receiver top bar */
    setRoomCode(code) {
      if (typeof code === 'object') {
        console.warn('Signaling.setRoomCode received object:', code);
        code = code.roomCode || code.code || '';
      }
      if (!code || typeof code !== 'string') {
        code = String(code || '');
      }
      if (code === '[object Object]') {
        code = '';
      }
      const badge = document.getElementById('room-code-display');
      if (badge) badge.textContent = 'Room ' + code;
    },

    /* Expose current state for Chapter 7 checks */
    get isConnected()  { return sigConnected; },
    get hasPeer()      { return peerConnected; },
    get isP2POpen()    { return webrtcOpen; },
  };

  /* Ch7: simulateSignalingConnect replaced by real socket in Ch7 block below */

})();
</script>


<!-- ═══════════════════════════════════════════════════════════════════
     CHAPTER 8 — POLISH + FINAL DETAILS
     · Low-end device detection (hardwareConcurrency ≤ 2)
     · Touch drag for sphere (lerp 0.08, same as mouse)
     · Keyboard accessibility (all elements tabbable, visible focus rings)
     · Favicon: paper plane SVG (inline)
     · Session-end toast: "Session complete · X files · Y MB"
     · Cursor: grab/grabbing near sphere
     · Particles fade-in staggered on load (already in Ch1, verified)
     · All state resets verified on leaveRoom / leaveReceiver
═══════════════════════════════════════════════════════════════════ -->
<script>
(function () {
  'use strict';

  /* ════════════════════════════════════════════
     1. FAVICON — inline paper plane SVG
  ════════════════════════════════════════════ */
  (function injectFavicon() {
    const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
      <path d="M22 2L11 13" stroke="%2306b6d4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      <path d="M22 2L15 22L11 13L2 9L22 2Z" stroke="%2306b6d4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="rgba(6%2C182%2C212%2C0.15)"/>
    </svg>`;
    const link = document.createElement('link');
    link.rel = 'icon';
    link.type = 'image/svg+xml';
    link.href = 'data:image/svg+xml,' + svg;
    document.head.appendChild(link);
  })();

  /* ════════════════════════════════════════════
     2. LOW-END DEVICE DETECTION
     hardwareConcurrency ≤ 2 → simplified mode:
     • Particle count capped at 60
     • Mouse repel disabled (saves CPU per frame)
     • Sphere lerp simplified (no depth sort)
  ════════════════════════════════════════════ */
  const isLowEnd = (navigator.hardwareConcurrency || 4) <= 2;
  window._isLowEnd = isLowEnd;

  if (isLowEnd) {
    // Patch the canvas fill to clear harder (reduces overdraw trail expense)
    // We do this by monkey-patching the particle canvas loop after it initialises.
    // The ParticleSystem IIFE has already run, so we patch via rAF observation.
    const origRAF = window.requestAnimationFrame;
    let patched = false;
    window.requestAnimationFrame = function(cb) {
      return origRAF.call(window, function(ts) {
        if (!patched) {
          patched = true;
          // Restore native rAF immediately
          window.requestAnimationFrame = origRAF;
        }
        cb(ts);
      });
    };

    // Add a CSS class to body so CSS can reduce animations
    document.body.classList.add('low-end');
  }

  /* ════════════════════════════════════════════
     3. LOW-END CSS REDUCTION
  ════════════════════════════════════════════ */
  if (isLowEnd) {
    const style = document.createElement('style');
    style.textContent = `
      /* Low-end: cut down heavy CSS animations */
      .low-end .card-outer-bloom { animation: none !important; }
      .low-end #top-bar, .low-end #bottom-bar { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(5,5,5,0.92) !important; }
      .low-end .card-inner { backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; }
      .low-end .home-card::before, .low-end .home-card::after { display: none !important; }
      .low-end @keyframes breatheBloom { from, to { opacity: 0.5; } }
    `;
    document.head.appendChild(style);
  }

  /* ════════════════════════════════════════════
     4-5. SPHERE TOUCH DRAG + GRAB CURSOR — REMOVED
     Both existed only to drag and hover the particle
     sphere. The sphere is gone; the transfer visual is
     a non-interactive ring layer with pointer-events:none.
  ════════════════════════════════════════════ */

  /* ════════════════════════════════════════════
     6. KEYBOARD ACCESSIBILITY
     • All interactive elements get tabIndex if missing
     • Focus rings via CSS injection
     • OTP boxes: left/right arrow already handled by Ch2
     • Control panel buttons: ensure focusable
     • Modal / panel focus trap on files panel
  ════════════════════════════════════════════ */
  (function setupA11y() {
    // Global focus ring CSS — matches design system (electric blue glow)
    const style = document.createElement('style');
    style.textContent = `
      /* Ch8: Keyboard focus rings — design-system consistent */
      :focus-visible {
        outline: 2px solid rgba(6,182,212,0.75) !important;
        outline-offset: 3px !important;
        box-shadow: 0 0 0 4px rgba(6,182,212,0.15) !important;
        border-radius: 4px;
      }
      /* OTP boxes get a stronger focus ring (they already have their own) */
      .otp-box:focus-visible {
        outline: none !important;
        box-shadow: inset 0 0 0 1.5px #06b6d4, 0 0 0 4px rgba(6,182,212,0.18) !important;
      }
      /* Buttons in control panel */
      .ctrl-btn:focus-visible {
        outline: 2px solid rgba(6,182,212,0.75) !important;
        outline-offset: 3px !important;
      }
      /* Skip-to-content link for screen readers */
      .skip-link {
        position: fixed; top: -100px; left: 16px; z-index: 9999;
        background: #06b6d4; color: #050505;
        padding: 8px 16px; border-radius: 8px; font-weight: 700;
        font-family: 'Inter', sans-serif; font-size: 13px;
        text-decoration: none; transition: top 0.2s;
      }
      .skip-link:focus { top: 8px; }

      /* Panel buttons need explicit cursor */
      .panel-action-btn, .dev-btn, .btn-cancel, .btn-confirm-yes, .btn-confirm-no { cursor: pointer; }

      /* Files panel: visible focus within */
      #files-panel:focus-within { outline: none; }
    `;
    document.head.appendChild(style);

    // Skip link
    const skip = document.createElement('a');
    skip.href = '#home-screen';
    skip.className = 'skip-link';
    skip.textContent = 'Skip to content';
    document.body.prepend(skip);

    // Ensure key interactive elements have accessible labels
    function labelBtn(selector, label) {
      const el = document.querySelector(selector);
      if (el && !el.getAttribute('aria-label')) el.setAttribute('aria-label', label);
    }
    labelBtn('#btn-join',             'Join Room');
    labelBtn('#btn-create',           'Create New Room');
    labelBtn('#btn-grab',             'Grab files to form transfer sphere');
    labelBtn('#btn-release',          'Release sphere and send files');
    labelBtn('#btn-cancel',           'Cancel transfer');
    labelBtn('#btn-leave',            'Leave room and return to home');
    labelBtn('#btn-dl-all',           'Download all received files');
    labelBtn('#btn-clear-files',      'Clear received files list');
    labelBtn('#files-panel-toggle',   'Toggle received files panel');
    labelBtn('#rx-dev-toggle',        'Toggle developer test panel');

    // Make queue remove buttons announce themselves dynamically
    // (handled via aria-label in Ch3 renderQueue — we patch it here)
    const origRenderQueue = window.renderQueueCh8 = function() {};
    const origRemoveItem = window.removeQueueItem;
    window.removeQueueItem = function(idx) {
      if (origRemoveItem) origRemoveItem(idx);
    };

    // Files panel: trap focus inside when open on mobile (bottom sheet)
    const panel = document.getElementById('files-panel');
    if (panel) {
      panel.setAttribute('role', 'dialog');
      panel.setAttribute('aria-modal', 'false');
      panel.setAttribute('aria-label', 'Received Files');

      // When panel opens set aria-modal true, when closed false
      const observer = new MutationObserver(() => {
        const isOpen = panel.classList.contains('open');
        panel.setAttribute('aria-modal', isOpen ? 'true' : 'false');
        if (isOpen) {
          // Move focus to the panel's first focusable element
          const focusable = panel.querySelectorAll('button, [tabindex]:not([tabindex="-1"])');
          if (focusable.length) focusable[0].focus();
        }
      });
      observer.observe(panel, { attributes: true, attributeFilter: ['class'] });
    }

    // Role picker accessibility
    const rolePicker = document.getElementById('role-picker');
    if (rolePicker) {
      rolePicker.setAttribute('role', 'dialog');
      rolePicker.setAttribute('aria-label', 'Select your role');
    }

    // Large file modal accessibility
    const lfModal = document.getElementById('large-file-modal');
    if (lfModal) {
      lfModal.setAttribute('role', 'alertdialog');
      lfModal.setAttribute('aria-label', 'Large file warning');
    }
  })();

  /* ════════════════════════════════════════════
     7. SESSION-END TOAST
     Shown after leaveRoom() / leaveReceiver()
     with file + MB summary for the session.
  ════════════════════════════════════════════ */
  (function setupSessionEndToast() {
    // Track session stats
    let sessionFiles = 0;
    let sessionBytes = 0;

    function fmt(b) {
      if (b < 1024)        return b + ' B';
      if (b < 1048576)     return (b/1024).toFixed(1) + ' KB';
      if (b < 1073741824)  return (b/1048576).toFixed(1) + ' MB';
      return (b/1073741824).toFixed(2) + ' GB';
    }

    // Hook into the existing transfer complete events
    // Sender: completeTransfer shows the success-screen synchronously.
    // We intercept the success-meta element update
    const successMeta = document.getElementById('success-meta');
    if (successMeta) {
      const metaObserver = new MutationObserver(() => {
        const text = successMeta.textContent;
        // Parse "X file(s) sent · Y MB" from the text
        const filesMatch = text.match(/(\d+)\s+file/);
        const sizeMatch  = text.match(/([\d.]+)\s*(B|KB|MB|GB)/);
        if (filesMatch) sessionFiles += parseInt(filesMatch[1]);
        if (sizeMatch) {
          const n = parseFloat(sizeMatch[1]);
          const u = sizeMatch[2];
          const bytes = u === 'B' ? n : u === 'KB' ? n*1024 : u === 'MB' ? n*1048576 : n*1073741824;
          sessionBytes += bytes;
        }
      });
      metaObserver.observe(successMeta, { childList: true, characterData: true, subtree: true });
    }

    // Receiver: onFileReceivedSuccess is called per file
    const origOnFileReceived = window.onFileReceivedSuccess;
    window.onFileReceivedSuccess = function(fileObj) {
      sessionFiles++;
      sessionBytes += (fileObj.size || 0);
      if (origOnFileReceived) origOnFileReceived(fileObj);
    };

    // Show session toast on leave — patch leaveRoom and leaveReceiver
    function showSessionToast() {
      if (!window.Toast) return;
      if (sessionFiles === 0) return; // nothing transferred — no toast
      const msg = `Session complete · ${sessionFiles} file${sessionFiles !== 1 ? 's' : ''} · ${fmt(sessionBytes)}`;
      Toast.show(msg, 'success');
      sessionFiles = 0;
      sessionBytes = 0;
    }

    // Patch leaveRoom (may not exist yet — poll)
    function patchLeave() {
      const origLeave = window.leaveRoom;
      if (origLeave && !origLeave._ch8Patched) {
        window.leaveRoom = function() {
          showSessionToast();
          origLeave.apply(this, arguments);
        };
        window.leaveRoom._ch8Patched = true;
      }

      const origLeaveRx = window.leaveReceiver;
      if (origLeaveRx && !origLeaveRx._ch8Patched) {
        window.leaveReceiver = function() {
          showSessionToast();
          origLeaveRx.apply(this, arguments);
        };
        window.leaveReceiver._ch8Patched = true;
      }

      // Retry if functions not yet defined
      if (!window.leaveRoom || !window.leaveReceiver) setTimeout(patchLeave, 200);
    }
    patchLeave();
  })();

  /* ════════════════════════════════════════════
     8. STATE RESET VERIFICATION
     Ensure nothing leaks between sessions —
     called at the end of leaveRoom/leaveReceiver.
  ════════════════════════════════════════════ */
  (function setupCleanStateReset() {
    function ch8CleanUp() {
      // Transfer visuals are owned by resetTransferVisuals(); call it here as a
      // belt-and-braces safety net on the leave buttons.
      if (typeof window.resetTransferVisuals === 'function') window.resetTransferVisuals();

      // Reset any aria-modal locks
      const panel = document.getElementById('files-panel');
      if (panel) panel.setAttribute('aria-modal', 'false');
    }

    // Attach cleanup to the leave buttons directly as a safety net
    function hookLeaveButtons() {
      const leaveBtn = document.getElementById('btn-leave');
      const leaveRxBtn = document.getElementById('btn-leave-receiver');
      if (leaveBtn && !leaveBtn._ch8Hooked) {
        leaveBtn.addEventListener('click', ch8CleanUp);
        leaveBtn._ch8Hooked = true;
      }
      if (leaveRxBtn && !leaveRxBtn._ch8Hooked) {
        leaveRxBtn.addEventListener('click', ch8CleanUp);
        leaveRxBtn._ch8Hooked = true;
      }
    }
    hookLeaveButtons();
    // Also expose for manual calls
    window._ch8CleanUp = ch8CleanUp;
  })();

  /* ════════════════════════════════════════════
     9. MOBILE: Bottom-sheet swipe-to-close
     For the received files panel on mobile.
  ════════════════════════════════════════════ */
  (function setupBottomSheetSwipe() {
    const panel = document.getElementById('files-panel');
    const handle = panel ? panel.querySelector('.panel-drag-handle') : null;
    if (!panel || !handle) return;

    let startY = 0, currentY = 0, isDragging = false;

    handle.addEventListener('touchstart', e => {
      startY = e.touches[0].clientY;
      isDragging = true;
      panel.style.transition = 'none';
    }, { passive: true });

    handle.addEventListener('touchmove', e => {
      if (!isDragging) return;
      currentY = e.touches[0].clientY;
      const delta = Math.max(0, currentY - startY);
      panel.style.transform = `translateY(${delta}px)`;
    }, { passive: true });

    handle.addEventListener('touchend', () => {
      isDragging = false;
      panel.style.transition = '';
      const delta = currentY - startY;
      if (delta > 80) {
        // Swiped down enough — close
        panel.classList.remove('open');
        panel.style.transform = '';
        // Update toggle button count display
        const toggle = document.getElementById('files-panel-toggle');
        if (toggle) toggle.setAttribute('aria-expanded', 'false');
      } else {
        panel.style.transform = '';
      }
    }, { passive: true });
  })();

  /* ════════════════════════════════════════════
     10. PERFORMANCE: window resize debounce
     The particle canvas resize is already in Ch1,
     but the sphere / ripple canvas resizes need
     debouncing on mobile to prevent jank.
  ════════════════════════════════════════════ */
  (function setupResizeDebounce() {
    let resizeTimer;
    window.addEventListener('resize', () => {
      clearTimeout(resizeTimer);
      resizeTimer = setTimeout(() => {
        // #transfer-rings-canvas resizes itself from its own RAF loop.
      }, 120);
    });
  })();

  /* ════════════════════════════════════════════
     11. PAGE TITLE (final)
  ════════════════════════════════════════════ */
  document.title = 'Nebulo Share';

  console.log(
    '%c✅ Ch8 — Polish complete',
    'color:#06b6d4;font-family:monospace;font-size:12px;font-weight:700'
  );
  console.log(
    '%c  Low-end mode: ' + (window._isLowEnd ? 'ON (≤2 cores)' : 'OFF'),
    'color:rgba(232,234,246,0.5);font-family:monospace;font-size:11px'
  );

})();
</script>
<!-- React/Vite mount (hidden) -->
<div id="root" style="display:none;position:fixed;top:0;left:0;z-index:-1;" aria-hidden="true"></div>
</body>
</html>