script.js

/* ============================================================
   CMAF / fMP4 Inspector — ISO BMFF Box Parser
   Pure JavaScript, zero dependencies
   ============================================================ */

(() => {
  'use strict';

  // ── DOM Refs ──
  const $ = id => document.getElementById(id);
  const dropZone       = $('dropZone');
  const fileInput      = $('fileInput');
  const fileUrlInput   = $('fileUrl');
  const loadUrlBtn     = $('loadUrlBtn');
  const loadingEl      = $('loading');
  const errorBox       = $('errorBox');
  const resultsEl      = document.querySelector('.results');
  const fileSummaryEl  = $('fileSummary');
  const boxTreeContent = $('boxTreeContent');
  const expandAllBtn   = $('expandAllBtn');
  const collapseAllBtn = $('collapseAllBtn');
  const copyResultsBtn = $('copyResultsBtn');
  const exportJsonBtn  = $('exportJsonBtn');
  const themeToggle    = $('themeToggle');

  let parsedData = null; // last parse result

  // ── URL History ──
  const URL_HISTORY_KEY = 'cmaf-url-history';
  const MAX_URL_HISTORY = 15;

  function getUrlHistory() {
    try { return JSON.parse(localStorage.getItem(URL_HISTORY_KEY) || '[]'); }
    catch { return []; }
  }

  function addUrlToHistory(url) {
    try {
      let history = getUrlHistory();
      history = history.filter(h => h !== url);
      history.unshift(url);
      if (history.length > MAX_URL_HISTORY) history = history.slice(0, MAX_URL_HISTORY);
      localStorage.setItem(URL_HISTORY_KEY, JSON.stringify(history));
      refreshUrlDatalist();
    } catch {}
  }

  function refreshUrlDatalist() {
    const dl = $('urlHistory');
    if (!dl) return;
    dl.innerHTML = '';
    getUrlHistory().forEach(url => {
      const opt = document.createElement('option');
      opt.value = url;
      opt.label = url.length > 60 ? '...' + url.slice(-57) : url;
      dl.appendChild(opt);
    });
  }

  // Show datalist dropdown on focus (workaround for some browsers)
  fileUrlInput.addEventListener('focus', () => {
    if (!fileUrlInput.value && getUrlHistory().length) {
      fileUrlInput.value = ' ';
      fileUrlInput.value = '';
    }
  });
  $('manifestUrl').addEventListener('focus', () => {
    const el = $('manifestUrl');
    if (!el.value && getUrlHistory().length) {
      el.value = ' ';
      el.value = '';
    }
  });

  refreshUrlDatalist();

  // ── Theme ──
  const savedTheme = localStorage.getItem('cmaf-theme') || 'dark';
  document.documentElement.setAttribute('data-theme', savedTheme);
  themeToggle.textContent = savedTheme === 'dark' ? '🌙' : '☀️';

  themeToggle.addEventListener('click', () => {
    const current = document.documentElement.getAttribute('data-theme');
    const next = current === 'dark' ? 'light' : 'dark';
    document.documentElement.setAttribute('data-theme', next);
    themeToggle.textContent = next === 'dark' ? '🌙' : '☀️';
    localStorage.setItem('cmaf-theme', next);
  });

  // ── Helpers ──
  function formatBytes(n) {
    if (n === 0) return '0 B';
    const k = 1024, units = ['B', 'KB', 'MB', 'GB', 'TB'];
    const i = Math.floor(Math.log(n) / Math.log(k));
    return parseFloat((n / Math.pow(k, i)).toFixed(2)) + ' ' + units[i];
  }

  function showError(msg) {
    errorBox.textContent = msg;
    errorBox.style.display = 'block';
    loadingEl.style.display = 'none';
  }

  function clearError() {
    errorBox.style.display = 'none';
    errorBox.textContent = '';
  }

  function showLoading() {
    loadingEl.style.display = 'flex';
    resultsEl.style.display = 'none';
    clearError();
  }

  function hideLoading() {
    loadingEl.style.display = 'none';
  }

  // ── Drag & Drop ──
  dropZone.addEventListener('dragover', e => { e.preventDefault(); dropZone.classList.add('drag-over'); });
  dropZone.addEventListener('dragleave', () => dropZone.classList.remove('drag-over'));
  dropZone.addEventListener('drop', e => {
    e.preventDefault();
    dropZone.classList.remove('drag-over');
    const file = e.dataTransfer.files[0];
    if (file) handleFile(file);
  });

  fileInput.addEventListener('change', e => {
    const file = e.target.files[0];
    if (file) handleFile(file);
  });

  // ── URL Load ──
  loadUrlBtn.addEventListener('click', () => {
    const url = fileUrlInput.value.trim();
    if (!url) return;
    handleUrl(url);
  });

  fileUrlInput.addEventListener('keydown', e => {
    if (e.key === 'Enter') {
      const url = fileUrlInput.value.trim();
      if (url) handleUrl(url);
    }
  });

  async function handleUrl(url) {
    // Clear manifest scanner state
    $('manifestUrl').value = '';
    $('manifestResults').innerHTML = '';
    $('manifestError').style.display = 'none';
    $('manifestLoading').style.display = 'none';
    showLoading();
    try {
      // Validate URL format
      let parsedUrl;
      try {
        parsedUrl = new URL(url);
      } catch {
        throw new Error('Invalid URL format. Please enter a valid HTTP/HTTPS URL.');
      }

      if (!['http:', 'https:'].includes(parsedUrl.protocol)) {
        throw new Error('Only HTTP and HTTPS URLs are supported.');
      }

      const resp = await fetch(url, { mode: 'cors' });

      if (!resp.ok) {
        throw new Error(`HTTP ${resp.status} ${resp.statusText}\nURL: ${url}\n\nPossible causes:\n• The URL may be incorrect or expired\n• The server may be down\n• Network connectivity issues`);
      }

      const contentType = resp.headers.get('content-type') || '';
      const buffer = await resp.arrayBuffer();

      if (buffer.byteLength === 0) {
        throw new Error('Empty response received from server.');
      }

      const fileName = url.split('/').pop().split('?')[0] || 'remote-file';
      addUrlToHistory(url);
      processBuffer(buffer, fileName, buffer.byteLength);
    } catch (err) {
      hideLoading();
      if (err.name === 'TypeError' && err.message === 'Failed to fetch') {
        showError(
          `Failed to fetch the URL.\n\n` +
          `URL: ${url}\n\n` +
          `Possible causes:\n` +
          `• CORS: The server doesn't allow cross-origin requests\n` +
          `• The server is not reachable (internal/VPN-only network)\n` +
          `• SSL/TLS certificate issues\n` +
          `• Network connectivity problems\n\n` +
          `Workaround: Download the file manually and drag it into the drop zone.`
        );
      } else {
        showError(err.message);
      }
    }
  }

  // ── File Handler ──
  function handleFile(file) {
    // Clear manifest scanner state
    $('manifestUrl').value = '';
    $('manifestResults').innerHTML = '';
    $('manifestError').style.display = 'none';
    $('manifestLoading').style.display = 'none';
    showLoading();
    const reader = new FileReader();
    reader.onload = () => {
      processBuffer(reader.result, file.name, file.size);
    };
    reader.onerror = () => {
      hideLoading();
      showError('Failed to read the file.');
    };
    reader.readAsArrayBuffer(file);
  }

  // ── Core Processing ──
  function processBuffer(buffer, fileName, fileSize, sourceUrl) {
    try {
      const data = new DataView(buffer);
      const boxes = parseBoxes(data, 0, buffer.byteLength, buffer);

      if (boxes.length === 0) {
        throw new Error(
          'No valid ISO BMFF boxes found in this file.\n\n' +
          'This tool supports ISO BMFF / CMAF / fMP4 container formats.\n' +
          'Supported extensions: .mp4, .m4s, .m4a, .m4v, .cmaf, .fmp4\n\n' +
          'Common non-ISO-BMFF formats: .mp3, .ts, .avi, .mkv, .webm'
        );
      }

      parsedData = { fileName, fileSize, boxes, buffer, sourceUrl };
      renderResults(parsedData);
      hideLoading();
      resultsEl.style.display = '';
      copyResultsBtn.style.display = '';
      exportJsonBtn.style.display = '';
    } catch (err) {
      hideLoading();
      showError(err.message);
    }
  }

  // ======================================================================
  //  ISO BMFF BOX PARSER
  // ======================================================================

  const BOX_DESCRIPTIONS = {
    ftyp: 'File Type Box',
    styp: 'Segment Type Box',
    moov: 'Movie Box',
    mvhd: 'Movie Header Box',
    trak: 'Track Box',
    tkhd: 'Track Header Box',
    edts: 'Edit List Container Box',
    elst: 'Edit List Box',
    mdia: 'Media Box',
    mdhd: 'Media Header Box',
    hdlr: 'Handler Reference Box',
    minf: 'Media Information Box',
    vmhd: 'Video Media Header Box',
    smhd: 'Sound Media Header Box',
    hmhd: 'Hint Media Header Box',
    nmhd: 'Null Media Header Box',
    sthd: 'Subtitle Media Header Box',
    dinf: 'Data Information Box',
    dref: 'Data Reference Box',
    stbl: 'Sample Table Box',
    stsd: 'Sample Description Box',
    stts: 'Time-to-Sample Box',
    ctts: 'Composition Offset Box',
    stsc: 'Sample-to-Chunk Box',
    stsz: 'Sample Size Box',
    stz2: 'Compact Sample Size Box',
    stco: 'Chunk Offset Box',
    co64: 'Chunk Offset Box (64-bit)',
    stss: 'Sync Sample Box',
    sdtp: 'Sample Dependency Box',
    sgpd: 'Sample Group Description Box',
    sbgp: 'Sample-to-Group Box',
    cslg: 'Composition Shift Least Greatest Box',
    mvex: 'Movie Extends Box',
    trex: 'Track Extends Box',
    mehd: 'Movie Extends Header Box',
    moof: 'Movie Fragment Box',
    mfhd: 'Movie Fragment Header Box',
    traf: 'Track Fragment Box',
    tfhd: 'Track Fragment Header Box',
    tfdt: 'Track Fragment Decode Time Box',
    trun: 'Track Fragment Run Box',
    mdat: 'Media Data Box',
    free: 'Free Space Box',
    skip: 'Free Space Box (skip)',
    udta: 'User Data Box',
    meta: 'Metadata Box',
    ilst: 'Item List Box',
    sidx: 'Segment Index Box',
    ssix: 'Subsegment Index Box',
    mfra: 'Movie Fragment Random Access Box',
    mfro: 'Movie Fragment Random Access Offset Box',
    tfra: 'Track Fragment Random Access Box',
    pssh: 'Protection System Specific Header Box',
    sinf: 'Protection Scheme Information Box',
    frma: 'Original Format Box',
    schm: 'Scheme Type Box',
    schi: 'Scheme Information Box',
    tenc: 'Track Encryption Box',
    saiz: 'Sample Auxiliary Information Sizes Box',
    saio: 'Sample Auxiliary Information Offsets Box',
    senc: 'Sample Encryption Box',
    emsg: 'Event Message Box',
    prft: 'Producer Reference Time Box',
    leva: 'Level Assignment Box',
    pdin: 'Progressive Download Information Box',
    bloc: 'Base Location Box',
    avc1: 'AVC Video Sample Entry Box',
    avc3: 'AVC Video Sample Entry Box',
    hev1: 'HEVC Video Sample Entry Box',
    hvc1: 'HEVC Video Sample Entry Box',
    vp08: 'VP8 Video Sample Entry Box',
    vp09: 'VP9 Video Sample Entry Box',
    av01: 'AV1 Video Sample Entry Box',
    mp4a: 'MPEG-4 Audio Sample Entry Box',
    mp4v: 'MPEG-4 Video Sample Entry Box',
    ec_3: 'E-AC-3 Audio Sample Entry Box',
    'ec-3': 'E-AC-3 Audio Sample Entry Box',
    ac_3: 'AC-3 Audio Sample Entry Box',
    'ac-3': 'AC-3 Audio Sample Entry Box',
    ac_4: 'AC-4 Audio Sample Entry Box',
    'ac-4': 'AC-4 Audio Sample Entry Box',
    Opus: 'Opus Audio Sample Entry Box',
    fLaC: 'FLAC Audio Sample Entry Box',
    dtsl: 'DTS Lossless Audio Box',
    dtsh: 'DTS-HD Audio Box',
    dtse: 'DTS Express Audio Box',
    dtsx: 'DTS:X Audio Box',
    avcC: 'AVC Decoder Configuration Record Box',
    hvcC: 'HEVC Decoder Configuration Record Box',
    av1C: 'AV1 Codec Configuration Record Box',
    vpcC: 'VP Codec Configuration Box',
    esds: 'ES Descriptor Box',
    dac3: 'AC-3 Specific Box',
    dec3: 'E-AC-3 Specific Box',
    dac4: 'AC-4 Specific Box',
    dOps: 'Opus Specific Box',
    dfLa: 'FLAC Specific Box',
    btrt: 'Bit Rate Box',
    pasp: 'Pixel Aspect Ratio Box',
    colr: 'Colour Information Box',
    clap: 'Clean Aperture Box',
    ccst: 'Coding Constraints Box',
    stpp: 'Subtitle Sample Entry Box (TTML)',
    wvtt: 'WebVTT Sample Entry Box',
    tx3g: 'Timed Text Sample Entry Box',
    vttC: 'WebVTT Configuration Box',
    'vlab': 'WebVTT Label Box',
    mime: 'MIME Type Box',
    // Container boxes missing descriptions
    ipro: 'Item Protection Box',
    rinf: 'Restricted Scheme Information Box',
    strk: 'Sub-Track Box',
    meco: 'Additional Metadata Container Box',
    mere: 'Metabox Relation Box',
    // HEIF / AVIF (ISO 14496-12 + ISO 23008-12)
    iloc: 'Item Location Box',
    iinf: 'Item Information Box',
    infe: 'Item Information Entry Box',
    pitm: 'Primary Item Box',
    ipma: 'Item Property Association Box',
    iprp: 'Item Properties Box',
    ispe: 'Image Spatial Extents Box',
    pixi: 'Pixel Information Box',
    auxC: 'Auxiliary Type Property Box',
    grpl: 'Group List Box',
    // Sub-sample / Degradation
    subs: 'Sub-Sample Information Box',
    stdp: 'Degradation Priority Box',
    padb: 'Padding Bits Box',
    csgp: 'Compact Sample-to-Group Box',
    // User Metadata
    cprt: 'Copyright Box',
    kind: 'Kind Box',
    // 3GPP Metadata
    loci: 'Location Information Box',
    titl: 'Title Box',
    dscp: 'Description Box',
    albm: 'Album Title Box',
    yrrc: 'Recording Year Box',
    gnre: 'Genre Box',
    perf: 'Performer Box',
    auth: 'Author Box',
  };

  // ISO/IEC specification reference for each box type
  const BOX_SPECS = {
    // ISO 14496-12:2026 (ISO Base Media File Format / ISOBMFF — 8th Edition)
    ftyp: 'ISO 14496-12:2026 §4.3', styp: 'ISO 14496-12:2026 §8.16.2',
    moov: 'ISO 14496-12:2026 §8.2.1', mvhd: 'ISO 14496-12:2026 §8.2.2',
    trak: 'ISO 14496-12:2026 §8.3.1', tkhd: 'ISO 14496-12:2026 §8.3.2',
    edts: 'ISO 14496-12:2026 §8.6.4', elst: 'ISO 14496-12:2026 §8.6.6',
    mdia: 'ISO 14496-12:2026 §8.4.1', mdhd: 'ISO 14496-12:2026 §8.4.2',
    hdlr: 'ISO 14496-12:2026 §8.4.3', minf: 'ISO 14496-12:2026 §8.4.4',
    vmhd: 'ISO 14496-12:2026 §12.1.2', smhd: 'ISO 14496-12:2026 §12.2.2',
    hmhd: 'ISO 14496-12:2026 §12.4.2', nmhd: 'ISO 14496-12:2026 §12.1.2',
    sthd: 'ISO 14496-12:2026 §12.6.2',
    dinf: 'ISO 14496-12:2026 §8.7.1', dref: 'ISO 14496-12:2026 §8.7.2',
    stbl: 'ISO 14496-12:2026 §8.5.1', stsd: 'ISO 14496-12:2026 §8.5.2',
    stts: 'ISO 14496-12:2026 §8.6.1.2', ctts: 'ISO 14496-12:2026 §8.6.1.3',
    stsc: 'ISO 14496-12:2026 §8.7.4', stsz: 'ISO 14496-12:2026 §8.7.3',
    stz2: 'ISO 14496-12:2026 §8.7.3.3', stco: 'ISO 14496-12:2026 §8.7.5',
    co64: 'ISO 14496-12:2026 §8.7.5', stss: 'ISO 14496-12:2026 §8.6.2',
    sdtp: 'ISO 14496-12:2026 §8.6.4.2', sgpd: 'ISO 14496-12:2026 §8.9.3',
    sbgp: 'ISO 14496-12:2026 §8.9.2', csgp: 'ISO 14496-12:2026 §8.9.4',
    cslg: 'ISO 14496-12:2026 §8.6.1.4',
    subs: 'ISO 14496-12:2026 §8.7.7', stdp: 'ISO 14496-12:2026 §8.7.6',
    padb: 'ISO 14496-12:2026 §8.7.6.2',
    mvex: 'ISO 14496-12:2026 §8.8.1', trex: 'ISO 14496-12:2026 §8.8.3',
    mehd: 'ISO 14496-12:2026 §8.8.2',
    moof: 'ISO 14496-12:2026 §8.8.4', mfhd: 'ISO 14496-12:2026 §8.8.5',
    traf: 'ISO 14496-12:2026 §8.8.6', tfhd: 'ISO 14496-12:2026 §8.8.7',
    tfdt: 'ISO 14496-12:2026 §8.8.12', trun: 'ISO 14496-12:2026 §8.8.8',
    mdat: 'ISO 14496-12:2026 §8.1.1', free: 'ISO 14496-12:2026 §8.1.2',
    skip: 'ISO 14496-12:2026 §8.1.2',
    udta: 'ISO 14496-12:2026 §8.10.1', cprt: 'ISO 14496-12:2026 §8.10.2',
    kind: 'ISO 14496-12:2026 §8.10.3',
    meta: 'ISO 14496-12:2026 §8.11.1', ilst: 'ISO 14496-12:2026 §8.11.1.2',
    sidx: 'ISO 14496-12:2026 §8.16.3', ssix: 'ISO 14496-12:2026 §8.16.4',
    mfra: 'ISO 14496-12:2026 §8.8.9', mfro: 'ISO 14496-12:2026 §8.8.11',
    tfra: 'ISO 14496-12:2026 §8.8.10',
    leva: 'ISO 14496-12:2026 §8.13.2', pdin: 'ISO 14496-12:2026 §8.1.3',
    emsg: 'ISO 14496-12:2026 §8.16.5', prft: 'ISO 14496-12:2026 §8.16.6',
    btrt: 'ISO 14496-12:2026 §8.5.2.2', pasp: 'ISO 14496-12:2026 §12.1.4',
    colr: 'ISO 14496-12:2026 §12.1.5', clap: 'ISO 14496-12:2026 §12.1.4.2',
    ccst: 'ISO 14496-12:2026 §12.1.3',
    // Common Encryption (CENC) — ISO 23001-7:2023
    pssh: 'ISO 23001-7:2023 §8.1', sinf: 'ISO 14496-12:2026 §8.12.1',
    frma: 'ISO 14496-12:2026 §8.12.2', schm: 'ISO 14496-12:2026 §8.12.5',
    schi: 'ISO 14496-12:2026 §8.12.6', tenc: 'ISO 23001-7:2023 §8.2',
    saiz: 'ISO 14496-12:2026 §8.7.8', saio: 'ISO 14496-12:2026 §8.7.9',
    senc: 'ISO 23001-7:2023 §7.2',
    // ISO 14496-14:2020 (MP4 File Format)
    esds: 'ISO 14496-14:2020 §5.6.1',
    mp4a: 'ISO 14496-14:2020 §5.6.1', mp4v: 'ISO 14496-14:2020 §5.6.1',
    // ISO 14496-15:2022 (AVC/HEVC/VVC in ISOBMFF)
    avc1: 'ISO 14496-15:2022 §5.3.4', avc3: 'ISO 14496-15:2022 §5.3.4',
    avcC: 'ISO 14496-15:2022 §5.3.3.1',
    hev1: 'ISO 14496-15:2022 §8.4.1', hvc1: 'ISO 14496-15:2022 §8.4.1',
    hvcC: 'ISO 14496-15:2022 §8.3.3.1',
    // AV1 Codec ISO Media File Format Binding (AV1-ISOBMFF)
    av01: 'AV1-ISOBMFF v1.2.0 §2.1', av1C: 'AV1-ISOBMFF v1.2.0 §2.3.1',
    // VP Codec ISO Media File Format Binding
    vp08: 'VP Codec ISO Media §4.1', vp09: 'VP Codec ISO Media §4.1',
    vpcC: 'VP Codec ISO Media §4.2',
    // ETSI TS 102 366 (AC-3, E-AC-3)
    ac_3: 'ETSI TS 102 366 §F.3', 'ac-3': 'ETSI TS 102 366 §F.3',
    dac3: 'ETSI TS 102 366 §F.4', ec_3: 'ETSI TS 102 366 §F.5',
    'ec-3': 'ETSI TS 102 366 §F.5', dec3: 'ETSI TS 102 366 §F.6',
    ac_4: 'ETSI TS 103 190-2 §E.5', 'ac-4': 'ETSI TS 103 190-2 §E.5',
    dac4: 'ETSI TS 103 190-2 §E.6',
    // RFC 7845 (Opus in ISOBMFF)
    Opus: 'RFC 7845 / Opus-in-ISOBMFF §3.1', dOps: 'RFC 7845 / Opus-in-ISOBMFF §3.2',
    // FLAC in ISOBMFF
    fLaC: 'FLAC-in-ISOBMFF §3.3.1', dfLa: 'FLAC-in-ISOBMFF §3.3.2',
    // DTS (ETSI TS 102 114)
    dtsl: 'ETSI TS 102 114', dtsh: 'ETSI TS 102 114',
    dtse: 'ETSI TS 102 114', dtsx: 'ETSI TS 102 114',
    // ISO 14496-30:2018 (Timed Text / WebVTT / TTML)
    stpp: 'ISO 14496-30:2018 §4.4', wvtt: 'ISO 14496-30:2018 §6.2',
    tx3g: 'ISO 14496-17:2006 §4.1', vttC: 'ISO 14496-30:2018 §6.3',
    'vlab': 'ISO 14496-30:2018 §6.4', mime: 'ISO 14496-12:2026 §8.4.1',
    // HEIF / AVIF (ISO 23008-12:2022)
    iloc: 'ISO 23008-12:2022 §8.3', iinf: 'ISO 23008-12:2022 §8.6',
    infe: 'ISO 23008-12:2022 §8.6.2', pitm: 'ISO 23008-12:2022 §8.4',
    ipma: 'ISO 23008-12:2022 §9.3.2', iprp: 'ISO 23008-12:2022 §9.3.1',
    ispe: 'ISO 23008-12:2022 §6.5.3.2', pixi: 'ISO 23008-12:2022 §6.5.6',
    auxC: 'ISO 23008-12:2022 §6.5.8', grpl: 'ISO 23008-12:2022 §10.1',
    // CMAF (ISO 23000-19:2024)
    bloc: 'ISO 23000-19:2024 §7.3.2',
    // 3GPP TS 26.244 (3GPP file format)
    loci: '3GPP TS 26.244 §5.5', titl: '3GPP TS 26.244 §5.5',
    dscp: '3GPP TS 26.244 §5.5', albm: '3GPP TS 26.244 §5.5',
    yrrc: '3GPP TS 26.244 §5.5', gnre: '3GPP TS 26.244 §5.5',
    perf: '3GPP TS 26.244 §5.5', auth: '3GPP TS 26.244 §5.5',
    // Containers (ISOBMFF base spec)
    ipro: 'ISO 14496-12:2026 §8.12.4', rinf: 'ISO 14496-12:2026 §8.12.7',
    strk: 'ISO 14496-12:2026 §8.14.3', meco: 'ISO 14496-12:2026 §8.11.2',
    mere: 'ISO 14496-12:2026 §8.11.3',
  };

  const CONTAINER_BOXES = new Set([
    'moov', 'trak', 'edts', 'mdia', 'minf', 'dinf', 'stbl', 'mvex',
    'moof', 'traf', 'udta', 'sinf', 'schi', 'mfra', 'ilst', 'ipro',
    'rinf', 'strk', 'meco', 'mere',
  ]);

  // Boxes that are full boxes (version + flags) but also containers
  const FULL_CONTAINER_BOXES = new Set(['meta', 'stsd']);

  function getBoxCategory(type) {
    // File type
    if (['ftyp', 'styp'].includes(type)) return 'filetype';
    // Fragment boxes (checked before container to avoid shadowing)
    if (['tfhd', 'tfdt', 'trun', 'trex', 'mfhd'].includes(type)) return 'fragment';
    // DRM / Protection (checked before container to avoid shadowing sinf/schi)
    if (['pssh', 'sinf', 'frma', 'schm', 'schi', 'tenc', 'saiz', 'saio', 'senc',
         'subs'].includes(type)) return 'drm';
    // Index boxes (checked before container to avoid shadowing mfra)
    if (['sidx', 'ssix', 'mfra', 'mfro', 'tfra', 'pdin', 'leva'].includes(type)) return 'index';
    // Fragment containers
    if (['moof', 'traf'].includes(type)) return 'fragment';
    // Containers
    if (['moov', 'trak', 'mdia', 'minf', 'dinf', 'stbl', 'mvex',
         'edts', 'udta', 'ilst', 'meco', 'meta', 'iprp', 'grpl',
         'ipro', 'rinf', 'strk', 'mere'].includes(type)) return 'container';
    // Headers
    if (['mvhd', 'tkhd', 'mdhd', 'hdlr', 'vmhd', 'smhd', 'hmhd', 'nmhd', 'sthd',
         'mehd', 'elst'].includes(type)) return 'header';
    // Sample / codec / media description
    if (['stsd', 'stts', 'ctts', 'stsc', 'stsz', 'stz2', 'stco', 'co64', 'stss',
         'sdtp', 'sgpd', 'sbgp', 'cslg', 'csgp', 'stdp', 'padb',
         'avc1', 'avc3', 'hev1', 'hvc1', 'mp4a', 'mp4v', 'vp08', 'vp09', 'av01',
         'ec_3', 'ec-3', 'ac_3', 'ac-3', 'ac_4', 'ac-4', 'Opus', 'fLaC',
         'dtsl', 'dtsh', 'dtse', 'dtsx',
         'avcC', 'hvcC', 'av1C', 'vpcC', 'esds', 'dac3', 'dec3', 'dac4', 'dOps', 'dfLa',
         'btrt', 'pasp', 'colr', 'clap', 'ccst',
         'stpp', 'wvtt', 'tx3g', 'vttC', 'vlab', 'mime',
         'iloc', 'iinf', 'infe', 'pitm', 'ipma', 'ispe', 'pixi', 'auxC'
        ].includes(type)) return 'sample';
    // Events
    if (['emsg', 'prft'].includes(type)) return 'event';
    // Data
    if (['mdat', 'free', 'skip'].includes(type)) return 'data';
    // Metadata
    if (['cprt', 'kind', 'loci', 'titl', 'dscp', 'albm', 'yrrc', 'gnre', 'perf', 'auth',
         'bloc'].includes(type)) return 'event';
    return 'unknown';
  }

  // Read 4-byte ASCII type at offset
  function readType(data, offset) {
    let s = '';
    for (let i = 0; i < 4; i++) {
      const c = data.getUint8(offset + i);
      if (c >= 0x20 && c <= 0x7e) {
        s += String.fromCharCode(c);
      } else {
        s += '.';
      }
    }
    return s;
  }

  // Read null-terminated string
  function readString(data, offset, maxLen) {
    let s = '';
    for (let i = 0; i < maxLen; i++) {
      const c = data.getUint8(offset + i);
      if (c === 0) break;
      s += String.fromCharCode(c);
    }
    return s;
  }

  // Read 64-bit unsigned
  function readUint64(data, offset) {
    const hi = data.getUint32(offset);
    const lo = data.getUint32(offset + 4);
    return hi * 0x100000000 + lo;
  }

  // Read fixed-point 16.16
  function readFixed32(data, offset) {
    const raw = data.getInt32(offset);
    return raw / 65536;
  }

  // Read fixed-point 8.8
  function readFixed16(data, offset) {
    const raw = data.getInt16(offset);
    return raw / 256;
  }

  // ── Main recursive box parser ──
  function parseBoxes(data, start, end, buffer) {
    const boxes = [];
    let offset = start;

    while (offset < end - 7) {
      const boxStart = offset;
      let size = data.getUint32(offset);
      const type = readType(data, offset + 4);
      let headerSize = 8;
      let realSize = size;

      // Extended size
      if (size === 1) {
        if (offset + 16 > end) break;
        realSize = readUint64(data, offset + 8);
        headerSize = 16;
      } else if (size === 0) {
        // Box extends to end of file
        realSize = end - offset;
      }

      // Validate
      if (realSize < headerSize || boxStart + realSize > end) break;
      // Sanity: if type is all dots, probably garbage
      if (type === '....') break;

      const box = {
        type,
        offset: boxStart,
        size: realSize,
        headerSize,
        description: BOX_DESCRIPTIONS[type] || '',
        children: [],
        details: {},
      };

      const payloadStart = boxStart + headerSize;
      const payloadEnd = boxStart + realSize;

      // Parse known boxes
      try {
        if (type === 'ftyp' || type === 'styp') {
          parseFtyp(data, payloadStart, payloadEnd, box);
        } else if (FULL_CONTAINER_BOXES.has(type)) {
          // Read version+flags then parse children
          if (payloadEnd - payloadStart >= 4) {
            box.details.version = data.getUint8(payloadStart);
            box.details.flags = (data.getUint8(payloadStart + 1) << 16) |
                                (data.getUint8(payloadStart + 2) << 8) |
                                 data.getUint8(payloadStart + 3);
            let childStart = payloadStart + 4;
            if (type === 'stsd') {
              if (payloadEnd - childStart >= 4) {
                box.details.entryCount = data.getUint32(childStart);
                childStart += 4;
              }
            }
            box.children = parseBoxes(data, childStart, payloadEnd, buffer);
          }
        } else if (CONTAINER_BOXES.has(type)) {
          box.children = parseBoxes(data, payloadStart, payloadEnd, buffer);
        } else if (type === 'mvhd') {
          parseMvhd(data, payloadStart, payloadEnd, box);
        } else if (type === 'tkhd') {
          parseTkhd(data, payloadStart, payloadEnd, box);
        } else if (type === 'mdhd') {
          parseMdhd(data, payloadStart, payloadEnd, box);
        } else if (type === 'hdlr') {
          parseHdlr(data, payloadStart, payloadEnd, box);
        } else if (type === 'elst') {
          parseElst(data, payloadStart, payloadEnd, box);
        } else if (type === 'vmhd') {
          parseVmhd(data, payloadStart, payloadEnd, box);
        } else if (type === 'smhd') {
          parseSmhd(data, payloadStart, payloadEnd, box);
        } else if (type === 'dref') {
          parseDref(data, payloadStart, payloadEnd, box, buffer);
        } else if (type === 'stts') {
          parseStts(data, payloadStart, payloadEnd, box);
        } else if (type === 'ctts') {
          parseCtts(data, payloadStart, payloadEnd, box);
        } else if (type === 'stsc') {
          parseStsc(data, payloadStart, payloadEnd, box);
        } else if (type === 'stsz') {
          parseStsz(data, payloadStart, payloadEnd, box);
        } else if (type === 'stco' || type === 'co64') {
          parseStco(data, payloadStart, payloadEnd, box, type === 'co64');
        } else if (type === 'stss') {
          parseStss(data, payloadStart, payloadEnd, box);
        } else if (type === 'trex') {
          parseTrex(data, payloadStart, payloadEnd, box);
        } else if (type === 'mehd') {
          parseMehd(data, payloadStart, payloadEnd, box);
        } else if (type === 'mfhd') {
          parseMfhd(data, payloadStart, payloadEnd, box);
        } else if (type === 'tfhd') {
          parseTfhd(data, payloadStart, payloadEnd, box);
        } else if (type === 'tfdt') {
          parseTfdt(data, payloadStart, payloadEnd, box);
        } else if (type === 'trun') {
          parseTrun(data, payloadStart, payloadEnd, box);
        } else if (type === 'sidx') {
          parseSidx(data, payloadStart, payloadEnd, box);
        } else if (type === 'pssh') {
          parsePssh(data, payloadStart, payloadEnd, box, buffer);
        } else if (type === 'tenc') {
          parseTenc(data, payloadStart, payloadEnd, box);
        } else if (type === 'schm') {
          parseSchm(data, payloadStart, payloadEnd, box);
        } else if (type === 'frma') {
          parseFrma(data, payloadStart, payloadEnd, box);
        } else if (type === 'saiz') {
          parseSaiz(data, payloadStart, payloadEnd, box);
        } else if (type === 'saio') {
          parseSaio(data, payloadStart, payloadEnd, box);
        } else if (type === 'emsg') {
          parseEmsg(data, payloadStart, payloadEnd, box);
        } else if (type === 'prft') {
          parsePrft(data, payloadStart, payloadEnd, box);
        } else if (type === 'btrt') {
          parseBtrt(data, payloadStart, payloadEnd, box);
        } else if (type === 'pasp') {
          parsePasp(data, payloadStart, payloadEnd, box);
        } else if (type === 'colr') {
          parseColr(data, payloadStart, payloadEnd, box);
        } else if (type === 'esds') {
          parseEsds(data, payloadStart, payloadEnd, box);
        } else if (type === 'avcC') {
          parseAvcC(data, payloadStart, payloadEnd, box);
        } else if (type === 'hvcC') {
          parseHvcC(data, payloadStart, payloadEnd, box);
        } else if (type === 'mdat') {
          box.details.dataSize = payloadEnd - payloadStart;
        } else if (type === 'free' || type === 'skip') {
          box.details.paddingSize = payloadEnd - payloadStart;
        } else if (['avc1', 'avc3', 'hev1', 'hvc1', 'vp08', 'vp09', 'av01', 'mp4v'].includes(type)) {
          parseVisualSampleEntry(data, payloadStart, payloadEnd, box, buffer);
        } else if (['mp4a', 'ec_3', 'ec-3', 'ac_3', 'ac-3', 'ac_4', 'ac-4',
                     'Opus', 'fLaC', 'dtsl', 'dtsh', 'dtse', 'dtsx'].includes(type)) {
          parseAudioSampleEntry(data, payloadStart, payloadEnd, box, buffer);
        } else if (['stpp', 'wvtt', 'tx3g'].includes(type)) {
          parseSubtitleSampleEntry(data, payloadStart, payloadEnd, box, buffer);
        } else if (type === 'senc') {
          parseSenc(data, payloadStart, payloadEnd, box);
        } else if (type === 'subs') {
          parseSubs(data, payloadStart, payloadEnd, box);
        }
      } catch (e) {
        box.details._parseError = e.message;
      }

      // Store raw bytes reference for hex viewer
      box._bufferOffset = boxStart;
      box._bufferLength = realSize;

      boxes.push(box);
      offset = boxStart + realSize;
    }

    return boxes;
  }

  // ── Box Parsers ──

  function parseFtyp(data, start, end, box) {
    if (end - start < 8) return;
    box.details.majorBrand = readType(data, start);
    box.details.minorVersion = data.getUint32(start + 4);
    const brands = [];
    for (let i = start + 8; i + 4 <= end; i += 4) {
      brands.push(readType(data, i));
    }
    box.details.compatibleBrands = brands;
  }

  function parseMvhd(data, start, end, box) {
    if (end - start < 4) return;
    const v = data.getUint8(start);
    box.details.version = v;
    box.details.flags = (data.getUint8(start + 1) << 16) | (data.getUint8(start + 2) << 8) | data.getUint8(start + 3);
    let o = start + 4;
    if (v === 1) {
      box.details.creationTime = readUint64(data, o); o += 8;
      box.details.modificationTime = readUint64(data, o); o += 8;
      box.details.timescale = data.getUint32(o); o += 4;
      box.details.duration = readUint64(data, o); o += 8;
    } else {
      box.details.creationTime = data.getUint32(o); o += 4;
      box.details.modificationTime = data.getUint32(o); o += 4;
      box.details.timescale = data.getUint32(o); o += 4;
      box.details.duration = data.getUint32(o); o += 4;
    }
    if (box.details.timescale > 0) {
      box.details.durationSec = (box.details.duration / box.details.timescale).toFixed(3) + 's';
    }
    box.details.rate = readFixed32(data, o); o += 4;
    box.details.volume = readFixed16(data, o); o += 2;
    o += 10; // reserved
    o += 36; // matrix
    o += 24; // pre-defined
    if (o + 4 <= end) {
      box.details.nextTrackID = data.getUint32(o);
    }
  }

  function parseTkhd(data, start, end, box) {
    if (end - start < 4) return;
    const v = data.getUint8(start);
    box.details.version = v;
    box.details.flags = (data.getUint8(start + 1) << 16) | (data.getUint8(start + 2) << 8) | data.getUint8(start + 3);
    const flagBits = box.details.flags;
    const flagNames = [];
    if (flagBits & 0x1) flagNames.push('enabled');
    if (flagBits & 0x2) flagNames.push('in_movie');
    if (flagBits & 0x4) flagNames.push('in_preview');
    if (flagBits & 0x8) flagNames.push('size_is_aspect_ratio');
    box.details.flagNames = flagNames.join(', ');

    let o = start + 4;
    if (v === 1) {
      box.details.creationTime = readUint64(data, o); o += 8;
      box.details.modificationTime = readUint64(data, o); o += 8;
      box.details.trackID = data.getUint32(o); o += 4;
      o += 4; // reserved
      box.details.duration = readUint64(data, o); o += 8;
    } else {
      box.details.creationTime = data.getUint32(o); o += 4;
      box.details.modificationTime = data.getUint32(o); o += 4;
      box.details.trackID = data.getUint32(o); o += 4;
      o += 4; // reserved
      box.details.duration = data.getUint32(o); o += 4;
    }
    o += 8; // reserved
    box.details.layer = data.getInt16(o); o += 2;
    box.details.alternateGroup = data.getInt16(o); o += 2;
    box.details.volume = readFixed16(data, o); o += 2;
    o += 2; // reserved
    o += 36; // matrix
    if (o + 8 <= end) {
      box.details.width = readFixed32(data, o); o += 4;
      box.details.height = readFixed32(data, o); o += 4;
      if (box.details.width > 0 && box.details.height > 0) {
        box.details.resolution = `${Math.round(box.details.width)}x${Math.round(box.details.height)}`;
      }
    }
  }

  function parseMdhd(data, start, end, box) {
    if (end - start < 4) return;
    const v = data.getUint8(start);
    box.details.version = v;
    box.details.flags = (data.getUint8(start + 1) << 16) | (data.getUint8(start + 2) << 8) | data.getUint8(start + 3);
    let o = start + 4;
    if (v === 1) {
      box.details.creationTime = readUint64(data, o); o += 8;
      box.details.modificationTime = readUint64(data, o); o += 8;
      box.details.timescale = data.getUint32(o); o += 4;
      box.details.duration = readUint64(data, o); o += 8;
    } else {
      box.details.creationTime = data.getUint32(o); o += 4;
      box.details.modificationTime = data.getUint32(o); o += 4;
      box.details.timescale = data.getUint32(o); o += 4;
      box.details.duration = data.getUint32(o); o += 4;
    }
    if (box.details.timescale > 0) {
      box.details.durationSec = (box.details.duration / box.details.timescale).toFixed(3) + 's';
    }
    if (o + 2 <= end) {
      const langBits = data.getUint16(o);
      const c1 = ((langBits >> 10) & 0x1f) + 0x60;
      const c2 = ((langBits >> 5) & 0x1f) + 0x60;
      const c3 = (langBits & 0x1f) + 0x60;
      box.details.language = String.fromCharCode(c1, c2, c3);
    }
  }

  function parseHdlr(data, start, end, box) {
    if (end - start < 12) return;
    box.details.version = data.getUint8(start);
    box.details.flags = (data.getUint8(start + 1) << 16) | (data.getUint8(start + 2) << 8) | data.getUint8(start + 3);
    // pre-defined
    box.details.handlerType = readType(data, start + 8);
    const handlerMap = { vide: 'Video', soun: 'Audio', hint: 'Hint', text: 'Text', subt: 'Subtitle', meta: 'Metadata', clcp: 'Closed Caption' };
    box.details.handlerName = handlerMap[box.details.handlerType] || box.details.handlerType;
    // Name string
    if (start + 24 < end) {
      box.details.name = readString(data, start + 24, end - start - 24);
    }
  }

  function parseElst(data, start, end, box) {
    if (end - start < 8) return;
    const v = data.getUint8(start);
    box.details.version = v;
    box.details.flags = (data.getUint8(start + 1) << 16) | (data.getUint8(start + 2) << 8) | data.getUint8(start + 3);
    const count = data.getUint32(start + 4);
    box.details.entryCount = count;
    const entries = [];
    let o = start + 8;
    const maxEntries = Math.min(count, 100);
    for (let i = 0; i < maxEntries && o < end; i++) {
      const entry = {};
      if (v === 1) {
        entry.segmentDuration = readUint64(data, o); o += 8;
        entry.mediaTime = readUint64(data, o); o += 8;
      } else {
        entry.segmentDuration = data.getUint32(o); o += 4;
        entry.mediaTime = data.getInt32(o); o += 4;
      }
      entry.mediaRateInteger = data.getInt16(o); o += 2;
      entry.mediaRateFraction = data.getInt16(o); o += 2;
      entries.push(entry);
    }
    box.details.entries = entries;
  }

  function parseVmhd(data, start, end, box) {
    if (end - start < 12) return;
    box.details.version = data.getUint8(start);
    box.details.flags = (data.getUint8(start + 1) << 16) | (data.getUint8(start + 2) << 8) | data.getUint8(start + 3);
    box.details.graphicsMode = data.getUint16(start + 4);
    box.details.opcolor = [data.getUint16(start + 6), data.getUint16(start + 8), data.getUint16(start + 10)];
  }

  function parseSmhd(data, start, end, box) {
    if (end - start < 8) return;
    box.details.version = data.getUint8(start);
    box.details.flags = (data.getUint8(start + 1) << 16) | (data.getUint8(start + 2) << 8) | data.getUint8(start + 3);
    box.details.balance = readFixed16(data, start + 4);
  }

  function parseDref(data, start, end, box, buffer) {
    if (end - start < 8) return;
    box.details.version = data.getUint8(start);
    box.details.flags = (data.getUint8(start + 1) << 16) | (data.getUint8(start + 2) << 8) | data.getUint8(start + 3);
    box.details.entryCount = data.getUint32(start + 4);
    box.children = parseBoxes(data, start + 8, end, buffer);
  }

  function parseStts(data, start, end, box) {
    if (end - start < 8) return;
    box.details.version = data.getUint8(start);
    box.details.flags = (data.getUint8(start + 1) << 16) | (data.getUint8(start + 2) << 8) | data.getUint8(start + 3);
    const count = data.getUint32(start + 4);
    box.details.entryCount = count;
    const entries = [];
    let o = start + 8;
    const maxEntries = Math.min(count, 200);
    for (let i = 0; i < maxEntries && o + 8 <= end; i++) {
      entries.push({ sampleCount: data.getUint32(o), sampleDelta: data.getUint32(o + 4) });
      o += 8;
    }
    box.details.entries = entries;
    if (count > maxEntries) box.details._truncated = count;
  }

  function parseCtts(data, start, end, box) {
    if (end - start < 8) return;
    box.details.version = data.getUint8(start);
    box.details.flags = (data.getUint8(start + 1) << 16) | (data.getUint8(start + 2) << 8) | data.getUint8(start + 3);
    const count = data.getUint32(start + 4);
    box.details.entryCount = count;
    const entries = [];
    let o = start + 8;
    const maxEntries = Math.min(count, 200);
    for (let i = 0; i < maxEntries && o + 8 <= end; i++) {
      entries.push({ sampleCount: data.getUint32(o), sampleOffset: box.details.version === 0 ? data.getUint32(o + 4) : data.getInt32(o + 4) });
      o += 8;
    }
    box.details.entries = entries;
    if (count > maxEntries) box.details._truncated = count;
  }

  function parseStsc(data, start, end, box) {
    if (end - start < 8) return;
    box.details.version = data.getUint8(start);
    box.details.flags = (data.getUint8(start + 1) << 16) | (data.getUint8(start + 2) << 8) | data.getUint8(start + 3);
    const count = data.getUint32(start + 4);
    box.details.entryCount = count;
    const entries = [];
    let o = start + 8;
    const maxEntries = Math.min(count, 200);
    for (let i = 0; i < maxEntries && o + 12 <= end; i++) {
      entries.push({ firstChunk: data.getUint32(o), samplesPerChunk: data.getUint32(o + 4), sampleDescIndex: data.getUint32(o + 8) });
      o += 12;
    }
    box.details.entries = entries;
    if (count > maxEntries) box.details._truncated = count;
  }

  function parseStsz(data, start, end, box) {
    if (end - start < 12) return;
    box.details.version = data.getUint8(start);
    box.details.flags = (data.getUint8(start + 1) << 16) | (data.getUint8(start + 2) << 8) | data.getUint8(start + 3);
    box.details.sampleSize = data.getUint32(start + 4);
    box.details.sampleCount = data.getUint32(start + 8);
    if (box.details.sampleSize === 0) {
      const sizes = [];
      let o = start + 12;
      const max = Math.min(box.details.sampleCount, 200);
      for (let i = 0; i < max && o + 4 <= end; i++) {
        sizes.push(data.getUint32(o));
        o += 4;
      }
      box.details.entries = sizes;
      if (box.details.sampleCount > max) box.details._truncated = box.details.sampleCount;
    }
  }

  function parseStco(data, start, end, box, is64) {
    if (end - start < 8) return;
    box.details.version = data.getUint8(start);
    box.details.flags = (data.getUint8(start + 1) << 16) | (data.getUint8(start + 2) << 8) | data.getUint8(start + 3);
    const count = data.getUint32(start + 4);
    box.details.entryCount = count;
    const offsets = [];
    let o = start + 8;
    const max = Math.min(count, 200);
    for (let i = 0; i < max && o < end; i++) {
      if (is64) {
        offsets.push(readUint64(data, o)); o += 8;
      } else {
        offsets.push(data.getUint32(o)); o += 4;
      }
    }
    box.details.entries = offsets;
    if (count > max) box.details._truncated = count;
  }

  function parseStss(data, start, end, box) {
    if (end - start < 8) return;
    box.details.version = data.getUint8(start);
    box.details.flags = (data.getUint8(start + 1) << 16) | (data.getUint8(start + 2) << 8) | data.getUint8(start + 3);
    const count = data.getUint32(start + 4);
    box.details.entryCount = count;
    const entries = [];
    let o = start + 8;
    const max = Math.min(count, 200);
    for (let i = 0; i < max && o + 4 <= end; i++) {
      entries.push(data.getUint32(o));
      o += 4;
    }
    box.details.entries = entries;
    if (count > max) box.details._truncated = count;
  }

  function parseTrex(data, start, end, box) {
    if (end - start < 24) return;
    box.details.version = data.getUint8(start);
    box.details.flags = (data.getUint8(start + 1) << 16) | (data.getUint8(start + 2) << 8) | data.getUint8(start + 3);
    box.details.trackID = data.getUint32(start + 4);
    box.details.defaultSampleDescIndex = data.getUint32(start + 8);
    box.details.defaultSampleDuration = data.getUint32(start + 12);
    box.details.defaultSampleSize = data.getUint32(start + 16);
    box.details.defaultSampleFlags = '0x' + data.getUint32(start + 20).toString(16).padStart(8, '0');
  }

  function parseMehd(data, start, end, box) {
    if (end - start < 4) return;
    const v = data.getUint8(start);
    box.details.version = v;
    box.details.flags = (data.getUint8(start + 1) << 16) | (data.getUint8(start + 2) << 8) | data.getUint8(start + 3);
    if (v === 1) {
      box.details.fragmentDuration = readUint64(data, start + 4);
    } else {
      box.details.fragmentDuration = data.getUint32(start + 4);
    }
  }

  function parseMfhd(data, start, end, box) {
    if (end - start < 8) return;
    box.details.version = data.getUint8(start);
    box.details.flags = (data.getUint8(start + 1) << 16) | (data.getUint8(start + 2) << 8) | data.getUint8(start + 3);
    box.details.sequenceNumber = data.getUint32(start + 4);
  }

  function parseTfhd(data, start, end, box) {
    if (end - start < 8) return;
    box.details.version = data.getUint8(start);
    const flags = (data.getUint8(start + 1) << 16) | (data.getUint8(start + 2) << 8) | data.getUint8(start + 3);
    box.details.flags = '0x' + flags.toString(16).padStart(6, '0');
    box.details.trackID = data.getUint32(start + 4);
    let o = start + 8;
    const flagNames = [];
    if (flags & 0x1) { box.details.baseDataOffset = readUint64(data, o); o += 8; flagNames.push('base-data-offset'); }
    if (flags & 0x2) { box.details.sampleDescIndex = data.getUint32(o); o += 4; flagNames.push('sample-desc-index'); }
    if (flags & 0x8) { box.details.defaultSampleDuration = data.getUint32(o); o += 4; flagNames.push('default-sample-duration'); }
    if (flags & 0x10) { box.details.defaultSampleSize = data.getUint32(o); o += 4; flagNames.push('default-sample-size'); }
    if (flags & 0x20) { box.details.defaultSampleFlags = '0x' + data.getUint32(o).toString(16).padStart(8, '0'); o += 4; flagNames.push('default-sample-flags'); }
    if (flags & 0x10000) flagNames.push('duration-is-empty');
    if (flags & 0x20000) flagNames.push('default-base-is-moof');
    box.details.flagNames = flagNames.join(', ');
  }

  function parseTfdt(data, start, end, box) {
    if (end - start < 4) return;
    const v = data.getUint8(start);
    box.details.version = v;
    box.details.flags = (data.getUint8(start + 1) << 16) | (data.getUint8(start + 2) << 8) | data.getUint8(start + 3);
    if (v === 1) {
      box.details.baseMediaDecodeTime = readUint64(data, start + 4);
    } else {
      box.details.baseMediaDecodeTime = data.getUint32(start + 4);
    }
  }

  function parseTrun(data, start, end, box) {
    if (end - start < 8) return;
    box.details.version = data.getUint8(start);
    const flags = (data.getUint8(start + 1) << 16) | (data.getUint8(start + 2) << 8) | data.getUint8(start + 3);
    box.details.flags = '0x' + flags.toString(16).padStart(6, '0');
    box.details.sampleCount = data.getUint32(start + 4);
    let o = start + 8;
    const flagNames = [];
    if (flags & 0x1) { box.details.dataOffset = data.getInt32(o); o += 4; flagNames.push('data-offset'); }
    if (flags & 0x4) { box.details.firstSampleFlags = '0x' + data.getUint32(o).toString(16).padStart(8, '0'); o += 4; flagNames.push('first-sample-flags'); }
    box.details.flagNames = flagNames.join(', ');

    const hasDuration   = !!(flags & 0x100);
    const hasSize       = !!(flags & 0x200);
    const hasFlags      = !!(flags & 0x400);
    const hasCTO        = !!(flags & 0x800);

    if (hasDuration) flagNames.push('sample-duration');
    if (hasSize) flagNames.push('sample-size');
    if (hasFlags) flagNames.push('sample-flags');
    if (hasCTO) flagNames.push('sample-cts-offset');
    box.details.flagNames = flagNames.join(', ');

    const samples = [];
    const max = Math.min(box.details.sampleCount, 200);
    for (let i = 0; i < max && o < end; i++) {
      const s = {};
      if (hasDuration) { s.duration = data.getUint32(o); o += 4; }
      if (hasSize) { s.size = data.getUint32(o); o += 4; }
      if (hasFlags) { s.flags = '0x' + data.getUint32(o).toString(16).padStart(8, '0'); o += 4; }
      if (hasCTO) { s.compositionTimeOffset = box.details.version === 0 ? data.getUint32(o) : data.getInt32(o); o += 4; }
      samples.push(s);
    }
    box.details.samples = samples;
    if (box.details.sampleCount > max) box.details._truncated = box.details.sampleCount;
  }

  function parseSidx(data, start, end, box) {
    if (end - start < 4) return;
    const v = data.getUint8(start);
    box.details.version = v;
    box.details.flags = (data.getUint8(start + 1) << 16) | (data.getUint8(start + 2) << 8) | data.getUint8(start + 3);
    let o = start + 4;
    box.details.referenceID = data.getUint32(o); o += 4;
    box.details.timescale = data.getUint32(o); o += 4;
    if (v === 0) {
      box.details.earliestPresentationTime = data.getUint32(o); o += 4;
      box.details.firstOffset = data.getUint32(o); o += 4;
    } else {
      box.details.earliestPresentationTime = readUint64(data, o); o += 8;
      box.details.firstOffset = readUint64(data, o); o += 8;
    }
    o += 2; // reserved
    const refCount = data.getUint16(o); o += 2;
    box.details.referenceCount = refCount;
    const refs = [];
    const max = Math.min(refCount, 200);
    for (let i = 0; i < max && o + 12 <= end; i++) {
      const w1 = data.getUint32(o); o += 4;
      const ref = {
        referenceType: (w1 >> 31) ? 'sidx' : 'media',
        referencedSize: w1 & 0x7FFFFFFF,
        subsegmentDuration: data.getUint32(o),
      };
      o += 4;
      const w3 = data.getUint32(o); o += 4;
      ref.startsWithSAP = !!(w3 >> 31);
      ref.SAPType = (w3 >> 28) & 0x7;
      ref.SAPDeltaTime = w3 & 0x0FFFFFFF;
      refs.push(ref);
    }
    box.details.references = refs;
  }

  function parsePssh(data, start, end, box, buffer) {
    if (end - start < 8) return;
    box.details.version = data.getUint8(start);
    box.details.flags = (data.getUint8(start + 1) << 16) | (data.getUint8(start + 2) << 8) | data.getUint8(start + 3);
    let o = start + 4;
    // SystemID (16 bytes)
    const sysId = [];
    for (let i = 0; i < 16; i++) sysId.push(data.getUint8(o + i).toString(16).padStart(2, '0'));
    o += 16;
    const sysIdStr = sysId.join('');
    box.details.systemID = formatUUID(sysIdStr);

    // Known DRM systems
    const DRM_SYSTEMS = {
      'edef8ba979d64acea3c827dcd51d21ed': 'Widevine',
      '9a04f07998404286ab92e65be0885f95': 'PlayReady',
      '1077efecc0b24d02ace33c1e52e2fb4b': 'W3C Common / ClearKey',
      'e2719d58a985b3c9781ab030af78d30e': 'ClearKey (dashif)',
      'f239e769efa348509c16a903c6932efb': 'PrimeTime',
      'adb41c242dbf4a6d958b4457c0d27b95': 'Nagra',
      '69f908af4816466891e7399f5b888bbe': 'Marlin',
      '94ce86fb07ff4f43adb893d2fa968ca2': 'Apple FairPlay',
    };
    box.details.drmSystem = DRM_SYSTEMS[sysIdStr.toLowerCase()] || 'Unknown';

    if (box.details.version > 0) {
      const kidCount = data.getUint32(o); o += 4;
      box.details.kidCount = kidCount;
      const kids = [];
      for (let i = 0; i < kidCount && o + 16 <= end; i++) {
        const kid = [];
        for (let j = 0; j < 16; j++) kid.push(data.getUint8(o + j).toString(16).padStart(2, '0'));
        kids.push(formatUUID(kid.join('')));
        o += 16;
      }
      box.details.keyIDs = kids;
    }

    if (o + 4 <= end) {
      const dataSize = data.getUint32(o); o += 4;
      box.details.dataSize = dataSize;
      if (dataSize > 0 && o + dataSize <= end) {
        const psshData = new Uint8Array(buffer, o, dataSize);
        box.details.dataHex = Array.from(psshData.slice(0, 256)).map(b => b.toString(16).padStart(2, '0')).join(' ');

        // Decode Widevine init data
        if (sysIdStr.toLowerCase() === 'edef8ba979d64acea3c827dcd51d21ed') {
          box.details.widevineDecoded = decodeWidevineInitData(psshData);
        }
        // Decode PlayReady
        if (sysIdStr.toLowerCase() === '9a04f07998404286ab92e65be0885f95') {
          box.details.playReadyDecoded = decodePlayReadyObject(psshData);
        }
      }
    }
  }

  function formatUUID(hex) {
    if (hex.length !== 32) return hex;
    return `${hex.slice(0, 8)}-${hex.slice(8, 12)}-${hex.slice(12, 16)}-${hex.slice(16, 20)}-${hex.slice(20)}`;
  }

  // ── DRM Decoders ──

  function decodeWidevineInitData(bytes) {
    const result = {};
    try {
      let i = 0;
      while (i < bytes.length) {
        const tag = bytes[i++];
        const fieldNum = tag >> 3;
        const wireType = tag & 0x7;
        if (wireType === 0) {
          let val = 0, shift = 0;
          while (i < bytes.length) {
            const b = bytes[i++];
            val |= (b & 0x7f) << shift;
            if (!(b & 0x80)) break;
            shift += 7;
          }
          if (fieldNum === 3) result.algorithm = val === 1 ? 'AESCTR' : `Unknown(${val})`;
        } else if (wireType === 2) {
          let len = 0, shift = 0;
          while (i < bytes.length) {
            const b = bytes[i++];
            len |= (b & 0x7f) << shift;
            if (!(b & 0x80)) break;
            shift += 7;
          }
          if (i + len > bytes.length) break;
          const field = bytes.slice(i, i + len);
          i += len;
          if (fieldNum === 1) {
            const kid = Array.from(field).map(b => b.toString(16).padStart(2, '0')).join('');
            if (!result.keyIDs) result.keyIDs = [];
            result.keyIDs.push(formatUUID(kid));
          } else if (fieldNum === 2) {
            result.provider = new TextDecoder().decode(field);
          } else if (fieldNum === 4) {
            result.contentId = new TextDecoder().decode(field);
          } else if (fieldNum === 7) {
            result.policy = new TextDecoder().decode(field);
          }
        } else {
          break;
        }
      }
    } catch (e) {
      result._error = e.message;
    }
    return result;
  }

  function decodePlayReadyObject(bytes) {
    const result = {};
    try {
      if (bytes.length < 6) return result;
      const dv = new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength);
      const totalLen = dv.getUint32(0, true);
      const recordCount = dv.getUint16(4, true);
      result.totalLength = totalLen;
      result.recordCount = recordCount;
      let offset = 6;
      const records = [];
      for (let i = 0; i < recordCount && offset + 4 <= bytes.length; i++) {
        const recType = dv.getUint16(offset, true); offset += 2;
        const recLen = dv.getUint16(offset, true); offset += 2;
        if (offset + recLen > bytes.length) break;
        const recData = bytes.slice(offset, offset + recLen);
        offset += recLen;
        const typeNames = { 1: 'Rights Management Header', 2: 'Reserved', 3: 'Embedded License Store' };
        const rec = { type: typeNames[recType] || `Type ${recType}`, length: recLen };
        if (recType === 1) {
          try {
            const xmlStr = new TextDecoder('utf-16le').decode(recData);
            rec.xml = xmlStr;
            // Extract LA_URL
            const laMatch = xmlStr.match(/<LA_URL>(.*?)<\/LA_URL>/);
            if (laMatch) rec.licenseUrl = laMatch[1];
            // Extract KID
            const kidMatch = xmlStr.match(/<KID>(.*?)<\/KID>/);
            if (kidMatch) rec.keyID = kidMatch[1];
          } catch (e) { /* ignore */ }
        }
        records.push(rec);
      }
      result.records = records;
    } catch (e) {
      result._error = e.message;
    }
    return result;
  }

  function parseTenc(data, start, end, box) {
    if (end - start < 24) return;
    box.details.version = data.getUint8(start);
    box.details.flags = (data.getUint8(start + 1) << 16) | (data.getUint8(start + 2) << 8) | data.getUint8(start + 3);
    // reserved + isProtected
    box.details.isProtected = data.getUint8(start + 6);
    box.details.perSampleIVSize = data.getUint8(start + 7);
    const kid = [];
    for (let i = 0; i < 16; i++) kid.push(data.getUint8(start + 8 + i).toString(16).padStart(2, '0'));
    box.details.defaultKID = formatUUID(kid.join(''));
    if (box.details.isProtected && box.details.perSampleIVSize === 0 && start + 25 <= end) {
      const constIVSize = data.getUint8(start + 24);
      box.details.constantIVSize = constIVSize;
      const iv = [];
      for (let i = 0; i < constIVSize && start + 25 + i < end; i++) {
        iv.push(data.getUint8(start + 25 + i).toString(16).padStart(2, '0'));
      }
      box.details.constantIV = iv.join('');
    }
  }

  function parseSchm(data, start, end, box) {
    if (end - start < 12) return;
    box.details.version = data.getUint8(start);
    box.details.flags = (data.getUint8(start + 1) << 16) | (data.getUint8(start + 2) << 8) | data.getUint8(start + 3);
    box.details.schemeType = readType(data, start + 4);
    box.details.schemeVersion = data.getUint32(start + 8);
    const schemeMap = { cenc: 'AES-CTR (Common Encryption)', cbc1: 'AES-CBC', cens: 'AES-CTR subsample', cbcs: 'AES-CBC subsample (CBCS)' };
    box.details.schemeName = schemeMap[box.details.schemeType] || box.details.schemeType;
  }

  function parseFrma(data, start, end, box) {
    if (end - start < 4) return;
    box.details.dataFormat = readType(data, start);
  }

  function parseSaiz(data, start, end, box) {
    if (end - start < 9) return;
    box.details.version = data.getUint8(start);
    const flags = (data.getUint8(start + 1) << 16) | (data.getUint8(start + 2) << 8) | data.getUint8(start + 3);
    box.details.flags = flags;
    let o = start + 4;
    if (flags & 1) {
      box.details.auxInfoType = readType(data, o); o += 4;
      box.details.auxInfoTypeParameter = data.getUint32(o); o += 4;
    }
    box.details.defaultSampleInfoSize = data.getUint8(o); o += 1;
    box.details.sampleCount = data.getUint32(o); o += 4;
  }

  function parseSaio(data, start, end, box) {
    if (end - start < 8) return;
    const v = data.getUint8(start);
    box.details.version = v;
    const flags = (data.getUint8(start + 1) << 16) | (data.getUint8(start + 2) << 8) | data.getUint8(start + 3);
    box.details.flags = flags;
    let o = start + 4;
    if (flags & 1) {
      box.details.auxInfoType = readType(data, o); o += 4;
      box.details.auxInfoTypeParameter = data.getUint32(o); o += 4;
    }
    const count = data.getUint32(o); o += 4;
    box.details.entryCount = count;
    const offsets = [];
    const max = Math.min(count, 50);
    for (let i = 0; i < max && o < end; i++) {
      if (v === 0) { offsets.push(data.getUint32(o)); o += 4; }
      else { offsets.push(readUint64(data, o)); o += 8; }
    }
    box.details.offsets = offsets;
  }

  function parseSenc(data, start, end, box) {
    if (end - start < 8) return;
    box.details.version = data.getUint8(start);
    const flags = (data.getUint8(start + 1) << 16) | (data.getUint8(start + 2) << 8) | data.getUint8(start + 3);
    box.details.flags = '0x' + flags.toString(16).padStart(6, '0');
    const useSubsamples = !!(flags & 0x2);
    box.details.useSubSampleEncryption = useSubsamples;
    let o = start + 4;
    const sampleCount = data.getUint32(o); o += 4;
    box.details.sampleCount = sampleCount;

    // We need IV size from tenc to properly parse, but we can show what we have
    // Try to detect IV size from data layout (common: 8 or 16 bytes)
    const remaining = end - o;
    if (sampleCount > 0 && remaining > 0) {
      // Heuristic: if remaining / sampleCount gives 8 or 16 cleanly, that's the IV size
      let ivSize = 8;
      if (!useSubsamples) {
        const perSample = remaining / sampleCount;
        if (perSample === 16) ivSize = 16;
        else if (perSample === 8) ivSize = 8;
      }

      const samples = [];
      const max = Math.min(sampleCount, 100);
      for (let i = 0; i < max && o + ivSize <= end; i++) {
        const iv = [];
        for (let j = 0; j < ivSize; j++) iv.push(data.getUint8(o + j).toString(16).padStart(2, '0'));
        o += ivSize;
        const sample = { iv: iv.join('') };

        if (useSubsamples && o + 2 <= end) {
          const subCount = data.getUint16(o); o += 2;
          sample.subSampleCount = subCount;
          const subs = [];
          const maxSubs = Math.min(subCount, 50);
          for (let j = 0; j < maxSubs && o + 6 <= end; j++) {
            subs.push({
              bytesOfClearData: data.getUint16(o),
              bytesOfProtectedData: data.getUint32(o + 2),
            });
            o += 6;
          }
          sample.subSamples = subs;
        }
        samples.push(sample);
      }
      box.details.samples = samples;
      if (sampleCount > max) box.details._truncated = sampleCount;
    }
  }

  function parseSubs(data, start, end, box) {
    if (end - start < 8) return;
    box.details.version = data.getUint8(start);
    box.details.flags = (data.getUint8(start + 1) << 16) | (data.getUint8(start + 2) << 8) | data.getUint8(start + 3);
    let o = start + 4;
    const entryCount = data.getUint32(o); o += 4;
    box.details.entryCount = entryCount;
    const entries = [];
    const max = Math.min(entryCount, 100);
    for (let i = 0; i < max && o + 6 <= end; i++) {
      const sampleDelta = data.getUint32(o); o += 4;
      const subSampleCount = data.getUint16(o); o += 2;
      const subs = [];
      for (let j = 0; j < subSampleCount && o < end; j++) {
        const sub = {};
        if (box.details.version === 1) {
          sub.subSampleSize = data.getUint32(o); o += 4;
        } else {
          sub.subSampleSize = data.getUint16(o); o += 2;
        }
        sub.subSamplePriority = data.getUint8(o); o += 1;
        sub.discardable = data.getUint8(o); o += 1;
        sub.codecSpecificParameters = data.getUint32(o); o += 4;
        subs.push(sub);
      }
      entries.push({ sampleDelta, subSampleCount, subSamples: subs });
    }
    box.details.entries = entries;
    if (entryCount > max) box.details._truncated = entryCount;
  }

  function parseEmsg(data, start, end, box) {
    if (end - start < 4) return;
    const v = data.getUint8(start);
    box.details.version = v;
    box.details.flags = (data.getUint8(start + 1) << 16) | (data.getUint8(start + 2) << 8) | data.getUint8(start + 3);
    let o = start + 4;
    if (v === 0) {
      box.details.schemeIdUri = readString(data, o, end - o);
      o += box.details.schemeIdUri.length + 1;
      box.details.value = readString(data, o, end - o);
      o += box.details.value.length + 1;
      box.details.timescale = data.getUint32(o); o += 4;
      box.details.presentationTimeDelta = data.getUint32(o); o += 4;
      box.details.eventDuration = data.getUint32(o); o += 4;
      box.details.id = data.getUint32(o); o += 4;
    } else {
      box.details.timescale = data.getUint32(o); o += 4;
      box.details.presentationTime = readUint64(data, o); o += 8;
      box.details.eventDuration = data.getUint32(o); o += 4;
      box.details.id = data.getUint32(o); o += 4;
      box.details.schemeIdUri = readString(data, o, end - o);
      o += box.details.schemeIdUri.length + 1;
      box.details.value = readString(data, o, end - o);
      o += box.details.value.length + 1;
    }
    if (o < end) {
      const msgLen = end - o;
      box.details.messageDataSize = msgLen;
    }
  }

  function parsePrft(data, start, end, box) {
    if (end - start < 4) return;
    const v = data.getUint8(start);
    box.details.version = v;
    box.details.flags = (data.getUint8(start + 1) << 16) | (data.getUint8(start + 2) << 8) | data.getUint8(start + 3);
    let o = start + 4;
    box.details.referenceTrackID = data.getUint32(o); o += 4;
    box.details.ntpTimestamp = readUint64(data, o); o += 8;
    if (v === 0) {
      box.details.mediaTime = data.getUint32(o); o += 4;
    } else {
      box.details.mediaTime = readUint64(data, o); o += 8;
    }
  }

  function parseBtrt(data, start, end, box) {
    if (end - start < 12) return;
    box.details.bufferSizeDB = data.getUint32(start);
    box.details.maxBitrate = data.getUint32(start + 4);
    box.details.avgBitrate = data.getUint32(start + 8);
    box.details.maxBitrateFormatted = formatBitrate(box.details.maxBitrate);
    box.details.avgBitrateFormatted = formatBitrate(box.details.avgBitrate);
  }

  function formatBitrate(bps) {
    if (bps >= 1000000) return (bps / 1000000).toFixed(2) + ' Mbps';
    if (bps >= 1000) return (bps / 1000).toFixed(1) + ' Kbps';
    return bps + ' bps';
  }

  function parsePasp(data, start, end, box) {
    if (end - start < 8) return;
    box.details.hSpacing = data.getUint32(start);
    box.details.vSpacing = data.getUint32(start + 4);
    box.details.ratio = `${box.details.hSpacing}:${box.details.vSpacing}`;
  }

  function parseColr(data, start, end, box) {
    if (end - start < 4) return;
    box.details.colourType = readType(data, start);
    if (box.details.colourType === 'nclx' && end - start >= 7) {
      box.details.colourPrimaries = data.getUint16(start + 4);
      box.details.transferCharacteristics = data.getUint16(start + 6);
      if (end - start >= 11) {
        box.details.matrixCoefficients = data.getUint16(start + 8);
        box.details.fullRangeFlag = data.getUint8(start + 10) >> 7;
      }
    }
  }

  function parseEsds(data, start, end, box) {
    if (end - start < 4) return;
    box.details.version = data.getUint8(start);
    box.details.flags = (data.getUint8(start + 1) << 16) | (data.getUint8(start + 2) << 8) | data.getUint8(start + 3);
    // ES_Descriptor parsing (simplified)
    let o = start + 4;
    if (o < end && data.getUint8(o) === 0x03) {
      o++;
      let esLen = readDescriptorLength(data, o); o += esLen.bytesRead;
      box.details.esID = data.getUint16(o); o += 2;
      const streamPriority = data.getUint8(o); o += 1;
      // DecoderConfigDescriptor
      if (o < end && data.getUint8(o) === 0x04) {
        o++;
        let dcLen = readDescriptorLength(data, o); o += dcLen.bytesRead;
        box.details.objectTypeIndication = '0x' + data.getUint8(o).toString(16).padStart(2, '0'); o++;
        const oti = data.getUint8(o - 1);
        const codecNames = { 0x40: 'AAC', 0x6B: 'MP3', 0x69: 'MP3', 0x20: 'MPEG-4 Visual', 0x60: 'MPEG-2 Visual', 0x61: 'MPEG-2 Visual' };
        box.details.codecName = codecNames[oti] || 'Unknown';
        const streamInfo = data.getUint8(o); o++;
        box.details.streamType = (streamInfo >> 2) & 0x3F;
        box.details.upStream = (streamInfo >> 1) & 1;
        o += 3; // bufferSizeDB
        box.details.maxBitrate = data.getUint32(o); o += 4;
        box.details.avgBitrate = data.getUint32(o); o += 4;
        // DecoderSpecificInfo
        if (o < end && data.getUint8(o) === 0x05) {
          o++;
          let dsiLen = readDescriptorLength(data, o); o += dsiLen.bytesRead;
          const dsi = [];
          for (let i = 0; i < dsiLen.length && o + i < end; i++) {
            dsi.push(data.getUint8(o + i).toString(16).padStart(2, '0'));
          }
          box.details.decoderSpecificInfo = dsi.join(' ');
          // Parse AAC AudioSpecificConfig
          if (oti === 0x40 && dsiLen.length >= 2) {
            const b0 = data.getUint8(o), b1 = data.getUint8(o + 1);
            const audioObjectType = (b0 >> 3) & 0x1f;
            const freqIdx = ((b0 & 0x7) << 1) | ((b1 >> 7) & 1);
            const channelConfig = (b1 >> 3) & 0xf;
            const aotNames = { 1: 'AAC-LC', 2: 'AAC-LC', 5: 'SBR (HE-AAC)', 29: 'PS (HE-AACv2)', 23: 'ER AAC-LD', 39: 'ER AAC-ELD' };
            box.details.audioObjectType = aotNames[audioObjectType] || `AOT ${audioObjectType}`;
            const freqs = [96000, 88200, 64000, 48000, 44100, 32000, 24000, 22050, 16000, 12000, 11025, 8000, 7350];
            box.details.samplingFrequency = freqs[freqIdx] || 'custom';
            box.details.channelConfiguration = channelConfig;
          }
        }
      }
    }
  }

  function readDescriptorLength(data, offset) {
    let length = 0;
    let bytesRead = 0;
    for (let i = 0; i < 4; i++) {
      const b = data.getUint8(offset + i);
      bytesRead++;
      length = (length << 7) | (b & 0x7f);
      if (!(b & 0x80)) break;
    }
    return { length, bytesRead };
  }

  function parseAvcC(data, start, end, box) {
    if (end - start < 7) return;
    box.details.configVersion = data.getUint8(start);
    box.details.avcProfileIndication = data.getUint8(start + 1);
    box.details.profileCompatibility = data.getUint8(start + 2);
    box.details.avcLevelIndication = data.getUint8(start + 3);
    box.details.lengthSizeMinusOne = data.getUint8(start + 4) & 0x3;
    const profileNames = { 66: 'Baseline', 77: 'Main', 88: 'Extended', 100: 'High', 110: 'High 10', 122: 'High 4:2:2', 244: 'High 4:4:4 Predictive' };
    box.details.profileName = profileNames[box.details.avcProfileIndication] || 'Unknown';
    box.details.level = (box.details.avcLevelIndication / 10).toFixed(1);
    // SPS count
    const numSPS = data.getUint8(start + 5) & 0x1f;
    box.details.spsCount = numSPS;
  }

  function parseHvcC(data, start, end, box) {
    if (end - start < 23) return;
    box.details.configVersion = data.getUint8(start);
    const b1 = data.getUint8(start + 1);
    box.details.generalProfileSpace = (b1 >> 6) & 0x3;
    box.details.generalTierFlag = (b1 >> 5) & 0x1;
    box.details.generalProfileIDC = b1 & 0x1f;
    box.details.generalLevelIDC = data.getUint8(start + 12);
    box.details.level = (box.details.generalLevelIDC / 30).toFixed(1);
    const profileNames = { 1: 'Main', 2: 'Main 10', 3: 'Main Still Picture', 4: 'Range Extensions' };
    box.details.profileName = profileNames[box.details.generalProfileIDC] || `Profile ${box.details.generalProfileIDC}`;
    box.details.chromaFormatIDC = data.getUint8(start + 13) & 0x3;
    box.details.bitDepthLumaMinus8 = data.getUint8(start + 14) & 0x7;
    box.details.bitDepthChromaMinus8 = data.getUint8(start + 15) & 0x7;
    box.details.lengthSizeMinusOne = data.getUint8(start + 21) & 0x3;
    box.details.numOfArrays = data.getUint8(start + 22);
  }

  function parseVisualSampleEntry(data, start, end, box, buffer) {
    // 6 reserved, 2 data_ref_index, 16 pre-defined, 2 width, 2 height, 4 hRes, 4 vRes, 4 reserved, 2 frameCount, 32 compressorName, 2 depth, 2 pre-defined
    if (end - start < 78) return;
    let o = start;
    o += 6; // reserved
    box.details.dataReferenceIndex = data.getUint16(o); o += 2;
    o += 16; // pre-defined + reserved
    box.details.width = data.getUint16(o); o += 2;
    box.details.height = data.getUint16(o); o += 2;
    box.details.resolution = `${box.details.width}x${box.details.height}`;
    box.details.hResolution = readFixed32(data, o); o += 4;
    box.details.vResolution = readFixed32(data, o); o += 4;
    o += 4; // reserved
    box.details.frameCount = data.getUint16(o); o += 2;
    const compLen = data.getUint8(o);
    box.details.compressorName = readString(data, o + 1, Math.min(compLen, 31));
    o += 32;
    box.details.depth = data.getUint16(o); o += 2;
    o += 2; // pre-defined
    // Parse child boxes (codec configs like avcC, hvcC, etc.)
    if (o < end) {
      box.children = parseBoxes(data, o, end, buffer);
    }
  }

  function parseAudioSampleEntry(data, start, end, box, buffer) {
    if (end - start < 28) return;
    let o = start;
    o += 6; // reserved
    box.details.dataReferenceIndex = data.getUint16(o); o += 2;
    o += 8; // reserved
    box.details.channelCount = data.getUint16(o); o += 2;
    box.details.sampleSize = data.getUint16(o); o += 2;
    o += 2; // pre-defined
    o += 2; // reserved
    box.details.sampleRate = data.getUint32(o) / 65536; o += 4;
    // Parse child boxes (esds, dac3, etc.)
    if (o < end) {
      box.children = parseBoxes(data, o, end, buffer);
    }
  }

  function parseSubtitleSampleEntry(data, start, end, box, buffer) {
    if (end - start < 8) return;
    let o = start;
    o += 6; // reserved
    box.details.dataReferenceIndex = data.getUint16(o); o += 2;
    if (box.type === 'stpp') {
      box.details.namespace = readString(data, o, end - o);
      o += box.details.namespace.length + 1;
      if (o < end) {
        box.details.schemaLocation = readString(data, o, end - o);
        o += box.details.schemaLocation.length + 1;
      }
    }
    if (o < end) {
      box.children = parseBoxes(data, o, end, buffer);
    }
  }

  // ======================================================================
  //  RENDERING
  // ======================================================================

  function renderResults(data) {
    renderFileSummary(data);
    renderBoxTree(data.boxes, data.buffer);
  }

  function renderFileSummary(data) {
    const { fileName, fileSize, boxes } = data;

    // Gather info from boxes
    const info = {
      fileName,
      fileSize: formatBytes(fileSize),
      fileSizeRaw: fileSize,
      boxCount: countBoxes(boxes),
      topLevelBoxes: boxes.map(b => b.type).join(', '),
    };

    // ftyp/styp brands
    const ftyp = findBox(boxes, 'ftyp') || findBox(boxes, 'styp');
    if (ftyp) {
      info.majorBrand = ftyp.details.majorBrand;
      info.compatibleBrands = ftyp.details.compatibleBrands?.join(', ');
    }

    // Detect type badges
    const badges = [];
    const hasMoof = !!findBox(boxes, 'moof');
    const hasMoov = !!findBox(boxes, 'moov');
    const hasSidx = !!findBox(boxes, 'sidx');
    const hasPssh = !!findBox(boxes, 'pssh');
    const hasStyp = !!findBox(boxes, 'styp');

    if (hasMoof) badges.push({ text: 'Fragmented', cls: 'badge-fragmented' });
    if (hasMoov && !hasMoof) badges.push({ text: 'Init Segment', cls: 'badge-init' });
    if (hasMoof && !hasMoov) badges.push({ text: 'Media Segment', cls: 'badge-segment' });
    if (hasMoov && hasMoof) badges.push({ text: 'Self-Init', cls: 'badge-init' });
    if (hasPssh) badges.push({ text: 'DRM Protected', cls: 'badge-drm' });
    if (hasSidx) badges.push({ text: 'Indexed', cls: 'badge-fragmented' });

    // Tracks
    const tracks = findAllBoxes(boxes, 'trak');
    if (tracks.length > 0) {
      info.trackCount = tracks.length;
      info.tracks = tracks.map(trak => {
        const hdlr = findBox(trak.children, 'hdlr');
        const tkhd = findBox(trak.children, 'tkhd');
        const mdhd = findBox(trak.children, 'mdhd');
        const stsd = findBox(trak.children, 'stsd');
        const t = {};
        t.type = hdlr?.details?.handlerName || 'Unknown';
        t.trackID = tkhd?.details?.trackID;
        if (tkhd?.details?.resolution) t.resolution = tkhd.details.resolution;
        if (mdhd?.details?.timescale) t.timescale = mdhd.details.timescale;
        if (mdhd?.details?.durationSec) t.duration = mdhd.details.durationSec;
        if (mdhd?.details?.language) t.language = mdhd.details.language;
        // Codec from stsd children
        if (stsd?.children?.length > 0) {
          t.codec = stsd.children[0].type;
          if (stsd.children[0].details?.resolution) t.resolution = stsd.children[0].details.resolution;
          if (stsd.children[0].details?.channelCount) t.channels = stsd.children[0].details.channelCount;
          if (stsd.children[0].details?.sampleRate) t.sampleRate = stsd.children[0].details.sampleRate;
        }
        return t;
      });
    }

    // Duration from mvhd
    const mvhd = findBox(boxes, 'mvhd');
    if (mvhd?.details?.durationSec) info.duration = mvhd.details.durationSec;

    // Build HTML
    let html = `<div class="summary-title">${escHtml(fileName)}`;
    badges.forEach(b => { html += ` <span class="badge ${b.cls}">${b.text}</span>`; });
    html += `</div>`;
    if (data.sourceUrl) {
      html += `<div class="summary-source-url"><span class="source-url-label">Source URL:</span> <code class="source-url-value" title="${escHtml(data.sourceUrl)}">${escHtml(data.sourceUrl)}</code><button class="copy-url-inline-btn" data-url="${escHtml(data.sourceUrl)}">📋</button></div>`;
    }
    html += `<div class="summary-grid">`;
    html += summaryItem('File Size', info.fileSize);
    html += summaryItem('Total Boxes', info.boxCount);
    if (info.majorBrand) html += summaryItem('Major Brand', info.majorBrand);
    if (info.compatibleBrands) html += summaryItem('Compatible Brands', info.compatibleBrands);
    if (info.duration) html += summaryItem('Duration', info.duration);
    if (info.trackCount) html += summaryItem('Tracks', info.trackCount);
    html += summaryItem('Top-Level Boxes', info.topLevelBoxes);
    html += `</div>`;

    if (info.tracks) {
      html += `<div style="margin-top:16px;"><strong style="font-size:13px;color:var(--text-secondary)">TRACKS</strong></div>`;
      html += `<div class="summary-grid" style="margin-top:8px;">`;
      info.tracks.forEach((t, i) => {
        let desc = `Track ${t.trackID || (i + 1)} · ${t.type}`;
        if (t.codec) desc += ` · ${t.codec}`;
        if (t.resolution) desc += ` · ${t.resolution}`;
        if (t.channels) desc += ` · ${t.channels}ch`;
        if (t.sampleRate) desc += ` · ${t.sampleRate}Hz`;
        if (t.language) desc += ` · ${t.language}`;
        if (t.duration) desc += ` · ${t.duration}`;
        html += summaryItem(`Track ${i + 1}`, desc);
      });
      html += `</div>`;
    }

    fileSummaryEl.innerHTML = html;

    // Bind copy button for source URL
    const copyUrlBtn = fileSummaryEl.querySelector('.copy-url-inline-btn');
    if (copyUrlBtn) {
      copyUrlBtn.addEventListener('click', () => {
        navigator.clipboard.writeText(copyUrlBtn.dataset.url).then(() => {
          copyUrlBtn.textContent = '✓';
          setTimeout(() => { copyUrlBtn.textContent = '📋'; }, 1500);
        });
      });
    }
  }

  function summaryItem(label, value) {
    return `<div class="summary-item"><div class="summary-label">${escHtml(label)}</div><div class="summary-value">${escHtml(String(value))}</div></div>`;
  }

  function countBoxes(boxes) {
    let count = 0;
    for (const b of boxes) {
      count++;
      if (b.children) count += countBoxes(b.children);
    }
    return count;
  }

  function findBox(boxes, type) {
    for (const b of boxes) {
      if (b.type === type) return b;
      if (b.children) {
        const found = findBox(b.children, type);
        if (found) return found;
      }
    }
    return null;
  }

  function findAllBoxes(boxes, type) {
    const result = [];
    for (const b of boxes) {
      if (b.type === type) result.push(b);
      if (b.children) result.push(...findAllBoxes(b.children, type));
    }
    return result;
  }

  // ── Box Tree Rendering ──

  const BOX_ICONS = {
    container: '📦',
    header: '📋',
    sample: '🎬',
    fragment: '🧩',
    drm: '🔒',
    data: '💾',
    index: '📑',
    event: '⚡',
    filetype: '🏷️',
    unknown: '❓',
  };

  function renderBoxTree(boxes, buffer) {
    boxTreeContent.innerHTML = '';

    // Add search bar
    const searchWrap = document.createElement('div');
    searchWrap.className = 'box-tree-search';
    searchWrap.innerHTML = `<span class="box-tree-search-icon">🔍</span><input type="text" placeholder="Filter boxes (e.g. moov, pssh, trun...)" /><span class="box-tree-search-count"></span>`;
    boxTreeContent.appendChild(searchWrap);

    const searchInput = searchWrap.querySelector('input');
    const searchCount = searchWrap.querySelector('.box-tree-search-count');

    // Calculate total file size for proportional bars
    const totalSize = boxes.reduce((sum, b) => sum + b.size, 0);

    // Render tree nodes
    const treeWrap = document.createElement('div');
    treeWrap.className = 'box-tree-nodes';
    boxes.forEach(box => {
      treeWrap.appendChild(createBoxNode(box, buffer, 0, totalSize));
    });
    boxTreeContent.appendChild(treeWrap);

    // Search/filter logic
    searchInput.addEventListener('input', () => {
      const query = searchInput.value.trim().toLowerCase();

      // Re-query all nodes each time (to include lazily-rendered children)
      const allNodes = treeWrap.querySelectorAll('.box-node');

      if (!query) {
        allNodes.forEach(n => {
          n.classList.remove('search-hidden', 'search-match');
        });
        searchCount.textContent = '';
        return;
      }

      let matchCount = 0;

      // First pass: expand all nodes to ensure lazy children are rendered
      allNodes.forEach(n => {
        const childrenWrap = n.querySelector(':scope > .box-children');
        const arrow = n.querySelector(':scope > .box-header > .box-arrow');
        if (childrenWrap && !childrenWrap.classList.contains('open') && arrow && arrow.textContent) {
          const header = n.querySelector(':scope > .box-header');
          if (header) header.click();
        }
      });

      // Re-query after expansion to include newly rendered nodes
      const expandedNodes = treeWrap.querySelectorAll('.box-node');

      // Second pass: mark matches
      expandedNodes.forEach(n => {
        const type = n.dataset.boxType || '';
        const desc = n.dataset.boxDesc || '';
        const isMatch = type.includes(query) || desc.includes(query);
        n.classList.toggle('search-match', isMatch);
        if (isMatch) matchCount++;
      });

      // Third pass: hide non-matches that have no matching descendants
      expandedNodes.forEach(n => {
        const hasMatchInside = n.querySelector('.search-match');
        const isSelfMatch = n.classList.contains('search-match');
        n.classList.toggle('search-hidden', !isSelfMatch && !hasMatchInside);
      });

      searchCount.textContent = `${matchCount} match${matchCount !== 1 ? 'es' : ''}`;
    });
  }

  function createBoxNode(box, buffer, depth, totalSize) {
    const node = document.createElement('div');
    node.className = 'box-node';
    node.dataset.depth = depth;
    node.dataset.boxType = box.type.toLowerCase();
    node.dataset.boxDesc = (box.description || '').toLowerCase();

    const hasChildren = box.children && box.children.length > 0;
    const hasDetails = Object.keys(box.details).length > 0;
    const expandable = hasChildren || hasDetails;
    const cat = getBoxCategory(box.type);
    const icon = BOX_ICONS[cat] || BOX_ICONS.unknown;

    // Size bar width (proportional)
    const sizePercent = totalSize > 0 ? Math.max(2, Math.round((box.size / totalSize) * 60)) : 2;

    // Header
    const header = document.createElement('div');
    header.className = 'box-header';
    header.innerHTML = `
      <span class="box-arrow${expandable ? '' : ' box-arrow-empty'}">${expandable ? '▶' : ''}</span>
      <span class="box-icon">${icon}</span>
      <span class="box-type-badge box-cat-${cat}">${escHtml(box.type)}</span>
      <span class="box-desc">${escHtml(box.description)}</span>
      ${getBoxSummaryTag(box)}
      <span class="box-size-bar" style="width:${sizePercent}px;" title="${formatBytes(box.size)}"></span>
      <span class="box-size">${formatBytes(box.size)} @ 0x${box.offset.toString(16).toUpperCase()}</span>
    `;

    const childrenWrap = document.createElement('div');
    childrenWrap.className = 'box-children';

    if (expandable) {
      header.addEventListener('click', () => {
        const arrow = header.querySelector('.box-arrow');
        const isOpen = childrenWrap.classList.contains('open');
        if (isOpen) {
          childrenWrap.classList.remove('open');
          arrow.classList.remove('expanded');
        } else {
          childrenWrap.classList.add('open');
          arrow.classList.add('expanded');
          // Lazy render
          if (!childrenWrap.dataset.rendered) {
            childrenWrap.dataset.rendered = '1';
            if (hasDetails) {
              childrenWrap.appendChild(createDetailPanel(box, buffer));
            }
            if (hasChildren) {
              box.children.forEach(child => {
                childrenWrap.appendChild(createBoxNode(child, buffer, depth + 1, totalSize));
              });
            }
          }
        }
      });
    }

    node.appendChild(header);
    node.appendChild(childrenWrap);
    return node;
  }

  function getBoxSummaryTag(box) {
    const d = box.details;
    let s = '';
    if (box.type === 'ftyp' || box.type === 'styp') s = d.majorBrand || '';
    else if (box.type === 'hdlr') s = d.handlerName || '';
    else if (box.type === 'tkhd') s = `Track ${d.trackID || '?'}${d.resolution ? ' · ' + d.resolution : ''}`;
    else if (box.type === 'mdhd') s = d.durationSec ? `${d.durationSec} · ts=${d.timescale}` : '';
    else if (box.type === 'mvhd') s = d.durationSec ? `${d.durationSec} · ts=${d.timescale}` : '';
    else if (box.type === 'tfhd') s = `Track ${d.trackID || '?'}`;
    else if (box.type === 'tfdt') s = `time=${d.baseMediaDecodeTime}`;
    else if (box.type === 'trun') s = `${d.sampleCount || 0} samples`;
    else if (box.type === 'mfhd') s = `seq=${d.sequenceNumber}`;
    else if (box.type === 'sidx') s = `${d.referenceCount || 0} refs · ts=${d.timescale}`;
    else if (box.type === 'pssh') s = d.drmSystem || '';
    else if (box.type === 'mdat') s = formatBytes(d.dataSize || 0);
    else if (box.type === 'emsg') s = d.schemeIdUri || '';
    else if (box.type === 'schm') s = d.schemeName || '';
    else if (box.type === 'tenc') s = d.defaultKID ? `KID: ${d.defaultKID.slice(0, 13)}…` : '';
    else if (box.type === 'frma') s = d.dataFormat || '';
    else if (box.type === 'btrt') s = d.avgBitrateFormatted || '';
    else if (box.type === 'stsd') s = d.entryCount ? `${d.entryCount} entries` : '';
    else if (box.type === 'esds') s = d.codecName || '';
    else if (box.type === 'avcC') s = d.profileName ? `${d.profileName} L${d.level}` : '';
    else if (box.type === 'hvcC') s = d.profileName ? `${d.profileName} L${d.level}` : '';
    else if (['avc1', 'avc3', 'hev1', 'hvc1', 'vp08', 'vp09', 'av01', 'mp4v'].includes(box.type)) s = d.resolution || '';
    else if (['mp4a', 'ec_3', 'ec-3', 'ac_3', 'ac-3', 'ac_4', 'ac-4', 'Opus', 'fLaC',
              'dtsl', 'dtsh', 'dtse', 'dtsx'].includes(box.type)) s = d.sampleRate ? `${d.sampleRate}Hz · ${d.channelCount}ch` : '';
    else if (box.type === 'senc') s = d.sampleCount ? `${d.sampleCount} samples` : '';
    else if (box.type === 'subs') s = d.entryCount ? `${d.entryCount} entries` : '';
    if (!s) return '';
    return `<span class="box-summary">${escHtml(s)}</span>`;
  }

  // ── Detail Panel ──

  function createDetailPanel(box, buffer) {
    const panel = document.createElement('div');
    panel.className = 'box-detail';

    const d = box.details;
    const rows = [];

    // Spec reference
    const spec = BOX_SPECS[box.type];
    let html = '';
    if (spec) {
      html += `<div class="box-spec-ref">📐 <strong>Spec:</strong> ${escHtml(spec)}</div>`;
    }

    // Generic details
    for (const [key, val] of Object.entries(d)) {
      if (key.startsWith('_')) continue;
      if (key === 'entries' || key === 'samples' || key === 'references' || key === 'records' ||
          key === 'keyIDs' || key === 'widevineDecoded' || key === 'playReadyDecoded') continue;

      let displayVal = val;
      if (Array.isArray(val)) displayVal = val.join(', ');
      else if (typeof val === 'object') displayVal = JSON.stringify(val);
      rows.push([formatDetailKey(key), String(displayVal)]);
    }

    if (rows.length > 0) {
      html += `<table class="detail-table">`;
      rows.forEach(([k, v]) => {
        html += `<tr><td>${escHtml(k)}</td><td>${escHtml(v)}</td></tr>`;
      });
      html += `</table>`;
    }

    // Key IDs
    if (d.keyIDs?.length) {
      html += `<div style="margin-top:8px;"><strong style="font-size:11px;color:var(--text-muted);">KEY IDs</strong></div>`;
      d.keyIDs.forEach(kid => {
        html += `<div style="font-family:'JetBrains Mono',monospace;font-size:12px;padding:2px 0;">${escHtml(kid)}</div>`;
      });
    }

    // Widevine decoded
    if (d.widevineDecoded) {
      html += `<div style="margin-top:8px;"><strong style="font-size:11px;color:var(--text-muted);">WIDEVINE DECODED</strong></div>`;
      html += `<table class="detail-table">`;
      for (const [k, v] of Object.entries(d.widevineDecoded)) {
        if (k === 'keyIDs') {
          html += `<tr><td>Key IDs</td><td>${escHtml(v.join(', '))}</td></tr>`;
        } else {
          html += `<tr><td>${escHtml(formatDetailKey(k))}</td><td>${escHtml(String(v))}</td></tr>`;
        }
      }
      html += `</table>`;
    }

    // PlayReady decoded
    if (d.playReadyDecoded) {
      const pr = d.playReadyDecoded;
      html += `<div style="margin-top:8px;"><strong style="font-size:11px;color:var(--text-muted);">PLAYREADY DECODED</strong></div>`;
      html += `<table class="detail-table">`;
      if (pr.totalLength) html += `<tr><td>Total Length</td><td>${pr.totalLength}</td></tr>`;
      if (pr.recordCount) html += `<tr><td>Record Count</td><td>${pr.recordCount}</td></tr>`;
      html += `</table>`;
      if (pr.records) {
        pr.records.forEach((rec, i) => {
          html += `<div style="margin-top:6px;font-size:11px;"><strong>Record ${i + 1}: ${escHtml(rec.type)}</strong> (${rec.length} bytes)</div>`;
          if (rec.licenseUrl) html += `<div style="font-size:12px;padding:2px 0;"><strong style="color:var(--text-muted)">LA_URL:</strong> <span style="font-family:'JetBrains Mono',monospace">${escHtml(rec.licenseUrl)}</span></div>`;
          if (rec.keyID) html += `<div style="font-size:12px;padding:2px 0;"><strong style="color:var(--text-muted)">KID:</strong> <span style="font-family:'JetBrains Mono',monospace">${escHtml(rec.keyID)}</span></div>`;
          if (rec.xml) {
            html += `<details style="margin-top:4px;"><summary style="cursor:pointer;font-size:11px;color:var(--accent-text);">Show XML</summary><pre style="font-size:11px;padding:8px;background:var(--bg);border-radius:6px;overflow-x:auto;white-space:pre-wrap;margin-top:4px;border:1px solid var(--border-color);">${escHtml(rec.xml)}</pre></details>`;
          }
        });
      }
    }

    // Entries table (stts, ctts, stsc, trun samples, etc.)
    if (d.entries && Array.isArray(d.entries)) {
      if (typeof d.entries[0] === 'object') {
        const cols = Object.keys(d.entries[0]);
        html += `<div class="sample-table-wrap"><table class="sample-table"><thead><tr><th>#</th>`;
        cols.forEach(c => html += `<th>${escHtml(formatDetailKey(c))}</th>`);
        html += `</tr></thead><tbody>`;
        d.entries.forEach((entry, i) => {
          html += `<tr><td>${i + 1}</td>`;
          cols.forEach(c => html += `<td>${escHtml(String(entry[c] ?? ''))}</td>`);
          html += `</tr>`;
        });
        html += `</tbody></table></div>`;
      } else {
        // Simple array (stsz sizes, stco offsets, stss samples)
        html += `<div class="sample-table-wrap"><table class="sample-table"><thead><tr><th>#</th><th>Value</th></tr></thead><tbody>`;
        d.entries.forEach((v, i) => {
          html += `<tr><td>${i + 1}</td><td>${typeof v === 'number' ? v.toLocaleString() : escHtml(String(v))}</td></tr>`;
        });
        html += `</tbody></table></div>`;
      }
      if (d._truncated) {
        html += `<div class="truncated-note">Showing first ${d.entries.length} of ${d._truncated.toLocaleString()} entries</div>`;
      }
    }

    // trun samples
    if (d.samples && Array.isArray(d.samples) && d.samples.length > 0) {
      const cols = Object.keys(d.samples[0]);
      html += `<div style="margin-top:8px;"><strong style="font-size:11px;color:var(--text-muted);">SAMPLES</strong></div>`;
      html += `<div class="sample-table-wrap"><table class="sample-table"><thead><tr><th>#</th>`;
      cols.forEach(c => html += `<th>${escHtml(formatDetailKey(c))}</th>`);
      html += `</tr></thead><tbody>`;
      d.samples.forEach((s, i) => {
        html += `<tr><td>${i + 1}</td>`;
        cols.forEach(c => html += `<td>${escHtml(String(s[c] ?? ''))}</td>`);
        html += `</tr>`;
      });
      html += `</tbody></table></div>`;
      if (d._truncated) {
        html += `<div class="truncated-note">Showing first ${d.samples.length} of ${d._truncated.toLocaleString()} samples</div>`;
      }
    }

    // sidx references
    if (d.references && Array.isArray(d.references) && d.references.length > 0) {
      const cols = Object.keys(d.references[0]);
      html += `<div style="margin-top:8px;"><strong style="font-size:11px;color:var(--text-muted);">REFERENCES</strong></div>`;
      html += `<div class="sample-table-wrap"><table class="sample-table"><thead><tr><th>#</th>`;
      cols.forEach(c => html += `<th>${escHtml(formatDetailKey(c))}</th>`);
      html += `</tr></thead><tbody>`;
      d.references.forEach((r, i) => {
        html += `<tr><td>${i + 1}</td>`;
        cols.forEach(c => html += `<td>${escHtml(String(r[c] ?? ''))}</td>`);
        html += `</tr>`;
      });
      html += `</tbody></table></div>`;
    }

    // Hex/Binary viewer
    if (box._bufferLength && box._bufferLength <= 1024 * 1024) {
      const viewerWrap = document.createElement('div');
      viewerWrap.className = 'hex-viewer-wrap';

      const btnRow = document.createElement('div');
      btnRow.className = 'hex-btn-row';

      const hexBtn = document.createElement('button');
      hexBtn.className = 'hex-toggle-btn active';
      hexBtn.textContent = '0x Hex';

      const binBtn = document.createElement('button');
      binBtn.className = 'hex-toggle-btn';
      binBtn.textContent = '01 Binary';

      const hideBtn = document.createElement('button');
      hideBtn.className = 'hex-toggle-btn';
      hideBtn.textContent = '✕ Hide';

      btnRow.appendChild(hexBtn);
      btnRow.appendChild(binBtn);
      btnRow.appendChild(hideBtn);

      const hexDiv = document.createElement('div');
      hexDiv.className = 'hex-viewer';

      const renderLen = Math.min(box._bufferLength, 512);

      hexBtn.addEventListener('click', () => {
        hexBtn.classList.add('active');
        binBtn.classList.remove('active');
        hexDiv.innerHTML = renderHex(buffer, box._bufferOffset, renderLen, box._bufferLength);
        hexDiv.style.display = 'block';
      });

      binBtn.addEventListener('click', () => {
        binBtn.classList.add('active');
        hexBtn.classList.remove('active');
        hexDiv.innerHTML = renderBinary(buffer, box._bufferOffset, renderLen, box._bufferLength);
        hexDiv.style.display = 'block';
      });

      hideBtn.addEventListener('click', () => {
        hexDiv.style.display = 'none';
        hexBtn.classList.remove('active');
        binBtn.classList.remove('active');
      });

      viewerWrap.appendChild(btnRow);
      viewerWrap.appendChild(hexDiv);

      html += '';
      panel.innerHTML = html;
      panel.appendChild(viewerWrap);
      return panel;
    }

    panel.innerHTML = html;
    return panel;
  }

  function formatDetailKey(key) {
    return key.replace(/([A-Z])/g, ' $1').replace(/^./, s => s.toUpperCase()).replace(/_/g, ' ');
  }

  function renderHex(buffer, offset, length, boxLength) {
    const bytes = new Uint8Array(buffer, offset, Math.min(length, buffer.byteLength - offset));
    let html = '<div class="hex-column-headers"><span class="hex-offset">OFFSET</span><span class="hex-bytes">HEX BYTES</span><span class="hex-separator"> </span><span class="hex-ascii">ASCII</span></div>';
    for (let i = 0; i < bytes.length; i += 16) {
      const lineOffset = (offset + i).toString(16).toUpperCase().padStart(8, '0');
      let hexPart = '';
      let asciiPart = '';
      for (let j = 0; j < 16; j++) {
        if (i + j < bytes.length) {
          const b = bytes[i + j];
          hexPart += b.toString(16).toUpperCase().padStart(2, '0') + ' ';
          asciiPart += (b >= 0x20 && b <= 0x7e) ? String.fromCharCode(b) : '.';
        } else {
          hexPart += '   ';
          asciiPart += ' ';
        }
        if (j === 7) hexPart += ' ';
      }
      html += `<div class="hex-row"><span class="hex-offset">${lineOffset}</span><span class="hex-bytes">${hexPart}</span><span class="hex-separator">│</span><span class="hex-ascii">${asciiPart}</span></div>`;
    }
    if (length < boxLength) {
      html += `<div style="color:var(--text-muted);font-style:italic;margin-top:4px;">Showing first ${formatBytes(length)} of ${formatBytes(boxLength)}</div>`;
    }
    return html;
  }

  function renderBinary(buffer, offset, length, boxLength) {
    const bytes = new Uint8Array(buffer, offset, Math.min(length, buffer.byteLength - offset));
    let html = '<div class="hex-column-headers"><span class="hex-offset">OFFSET</span><span class="bin-bytes">BINARY BYTES</span><span class="hex-separator"> </span><span class="bin-hex">HEX</span><span class="hex-separator"> </span><span class="hex-ascii">ASCII</span></div>';
    // 8 bytes per row for binary (wider format)
    for (let i = 0; i < bytes.length; i += 8) {
      const lineOffset = (offset + i).toString(16).toUpperCase().padStart(8, '0');
      let binPart = '';
      let hexPart = '';
      let asciiPart = '';
      for (let j = 0; j < 8; j++) {
        if (i + j < bytes.length) {
          const b = bytes[i + j];
          binPart += b.toString(2).padStart(8, '0') + ' ';
          hexPart += b.toString(16).toUpperCase().padStart(2, '0') + ' ';
          asciiPart += (b >= 0x20 && b <= 0x7e) ? String.fromCharCode(b) : '.';
        } else {
          binPart += '         ';
          hexPart += '   ';
          asciiPart += ' ';
        }
        if (j === 3) binPart += ' ';
      }
      html += `<div class="hex-row"><span class="hex-offset">${lineOffset}</span><span class="bin-bytes">${binPart}</span><span class="hex-separator">│</span><span class="bin-hex">${hexPart}</span><span class="hex-separator">│</span><span class="hex-ascii">${asciiPart}</span></div>`;
    }
    if (length < boxLength) {
      html += `<div style="color:var(--text-muted);font-style:italic;margin-top:4px;">Showing first ${formatBytes(length)} of ${formatBytes(boxLength)}</div>`;
    }
    return html;
  }

  function escHtml(str) {
    const div = document.createElement('div');
    div.textContent = str;
    return div.innerHTML;
  }

  // ── Expand / Collapse All ──

  expandAllBtn.addEventListener('click', () => {
    const expandRecursive = (container) => {
      container.querySelectorAll(':scope > .box-node > .box-header').forEach(h => {
        const children = h.nextElementSibling;
        const arrow = h.querySelector('.box-arrow');
        if (children && !children.classList.contains('open') && arrow && arrow.textContent) {
          h.click();
        }
      });
      // Expand children recursively
      container.querySelectorAll(':scope > .box-node > .box-children.open').forEach(c => {
        expandRecursive(c);
      });
    };
    const treeNodes = boxTreeContent.querySelector('.box-tree-nodes');
    if (treeNodes) expandRecursive(treeNodes);
  });

  collapseAllBtn.addEventListener('click', () => {
    boxTreeContent.querySelectorAll('.box-children.open').forEach(c => {
      c.classList.remove('open');
      const arrow = c.previousElementSibling?.querySelector('.box-arrow');
      if (arrow) arrow.classList.remove('expanded');
    });
  });

  // ── Copy / Export ──

  copyResultsBtn.addEventListener('click', () => {
    if (!parsedData) return;
    const text = boxesToText(parsedData.boxes, 0);
    navigator.clipboard.writeText(text).then(() => {
      copyResultsBtn.textContent = '✅';
      setTimeout(() => copyResultsBtn.textContent = '📋', 1500);
    });
  });

  exportJsonBtn.addEventListener('click', () => {
    if (!parsedData) return;
    const clean = cleanForExport(parsedData.boxes);
    const json = JSON.stringify({ fileName: parsedData.fileName, fileSize: parsedData.fileSize, boxes: clean }, null, 2);
    const blob = new Blob([json], { type: 'application/json' });
    const a = document.createElement('a');
    a.href = URL.createObjectURL(blob);
    a.download = parsedData.fileName.replace(/\.[^.]+$/, '') + '_analysis.json';
    a.click();
    setTimeout(() => URL.revokeObjectURL(a.href), 1500);
  });

  function boxesToText(boxes, indent) {
    let text = '';
    const pad = '  '.repeat(indent);
    boxes.forEach(b => {
      text += `${pad}[${b.type}] ${b.description} (${formatBytes(b.size)} @ 0x${b.offset.toString(16)})\n`;
      for (const [k, v] of Object.entries(b.details)) {
        if (k.startsWith('_')) continue;
        if (typeof v === 'object') continue;
        text += `${pad}  ${k}: ${v}\n`;
      }
      if (b.children?.length) text += boxesToText(b.children, indent + 1);
    });
    return text;
  }

  function cleanForExport(boxes) {
    return boxes.map(b => {
      const obj = {
        type: b.type,
        offset: b.offset,
        size: b.size,
        description: b.description,
        details: { ...b.details },
      };
      delete obj.details._parseError;
      delete obj.details._truncated;
      if (b.children?.length) obj.children = cleanForExport(b.children);
      return obj;
    });
  }

  // ======================================================================
  //  MANIFEST SCANNER
  // ======================================================================

  const manifestUrlInput = $('manifestUrl');
  const loadManifestBtn = $('loadManifestBtn');
  const manifestError = $('manifestError');
  const manifestLoading = $('manifestLoading');
  const manifestResults = $('manifestResults');
  const manifestCorsToggle = $('manifestCorsToggle');

  const CORS_PROXIES = [
    url => 'https://api.allorigins.win/raw?url=' + encodeURIComponent(url),
    url => 'https://corsproxy.io/?' + encodeURIComponent(url)
  ];

  function showManifestError(msg) {
    manifestError.textContent = msg;
    manifestError.style.display = 'block';
  }

  function clearManifestError() {
    manifestError.style.display = 'none';
  }

  async function fetchWithCors(url) {
    const useCors = manifestCorsToggle?.checked;

    // Try direct first
    try {
      const resp = await fetch(url, { mode: 'cors' });
      if (resp.ok) return await resp.text();
    } catch {}

    if (!useCors) throw new Error('Direct fetch failed. Enable CORS proxy or download the file manually.');

    // Try CORS proxies
    for (const proxyFn of CORS_PROXIES) {
      try {
        const resp = await fetch(proxyFn(url));
        if (resp.ok) return await resp.text();
      } catch {}
    }

    throw new Error('Fetch failed through all proxies. Check the URL or try downloading the manifest manually.');
  }

  async function fetchBinaryWithCors(url) {
    const useCors = manifestCorsToggle?.checked;

    try {
      const resp = await fetch(url, { mode: 'cors' });
      if (resp.ok) return await resp.arrayBuffer();
    } catch {}

    if (!useCors) throw new Error('Direct fetch failed. Enable CORS proxy.');

    for (const proxyFn of CORS_PROXIES) {
      try {
        const resp = await fetch(proxyFn(url));
        if (resp.ok) return await resp.arrayBuffer();
      } catch {}
    }

    throw new Error('Fetch failed through all proxies.');
  }

  function resolveUrl(base, relative) {
    if (!relative) return null;
    if (/^https?:\/\//i.test(relative)) return relative;
    try {
      return new URL(relative, base).href;
    } catch {
      // Manual resolution
      const baseDir = base.substring(0, base.lastIndexOf('/') + 1);
      return baseDir + relative;
    }
  }

  function detectManifestType(text, url) {
    const trimmed = text.trim();
    if (trimmed.startsWith('#EXTM3U')) return 'hls';
    if (trimmed.startsWith('<?xml') || trimmed.includes('<MPD')) return 'dash';
    if (url && /\.m3u8/i.test(url)) return 'hls';
    if (url && /\.mpd/i.test(url)) return 'dash';
    return null;
  }

  // ── HLS Parser ──

  function parseHLSMaster(text, baseUrl) {
    const lines = text.split(/\r?\n/);
    const tracks = [];
    let isMaster = false;

    for (let i = 0; i < lines.length; i++) {
      const line = lines[i].trim();

      // Detect master playlist indicators
      if (line.startsWith('#EXT-X-STREAM-INF:')) {
        isMaster = true;
        const attrs = parseHLSAttributes(line.substring('#EXT-X-STREAM-INF:'.length));
        const uri = lines[i + 1]?.trim();
        if (uri && !uri.startsWith('#')) {
          tracks.push({
            type: 'video',
            label: buildVideoLabel(attrs),
            bandwidth: attrs.BANDWIDTH || '',
            resolution: attrs.RESOLUTION || '',
            codecs: attrs.CODECS || '',
            uri: resolveUrl(baseUrl, uri),
            isVariant: true
          });
        }
      }

      if (line.startsWith('#EXT-X-MEDIA:')) {
        isMaster = true;
        const attrs = parseHLSAttributes(line.substring('#EXT-X-MEDIA:'.length));
        const mediaType = (attrs.TYPE || '').toLowerCase();
        const uri = attrs.URI;
        if (uri) {
          tracks.push({
            type: mediaType || 'unknown',
            label: attrs.NAME || attrs['GROUP-ID'] || mediaType,
            language: attrs.LANGUAGE || '',
            codecs: attrs.CODECS || '',
            uri: resolveUrl(baseUrl, uri),
            isVariant: true,
            groupId: attrs['GROUP-ID'] || ''
          });
        }
      }

      if (line.startsWith('#EXT-X-I-FRAME-STREAM-INF:')) {
        isMaster = true;
        const attrs = parseHLSAttributes(line.substring('#EXT-X-I-FRAME-STREAM-INF:'.length));
        if (attrs.URI) {
          tracks.push({
            type: 'iframe',
            label: 'I-Frame ' + (attrs.RESOLUTION || attrs.BANDWIDTH || ''),
            bandwidth: attrs.BANDWIDTH || '',
            resolution: attrs.RESOLUTION || '',
            codecs: attrs.CODECS || '',
            uri: resolveUrl(baseUrl, attrs.URI),
            isVariant: true
          });
        }
      }
    }

    return { isMaster, tracks };
  }

  function parseHLSMediaPlaylist(text, baseUrl) {
    const lines = text.split(/\r?\n/);
    let initUri = null;
    let mapByteRange = null;

    for (const line of lines) {
      const trimmed = line.trim();
      if (trimmed.startsWith('#EXT-X-MAP:')) {
        const attrs = parseHLSAttributes(trimmed.substring('#EXT-X-MAP:'.length));
        initUri = resolveUrl(baseUrl, attrs.URI);
        mapByteRange = attrs.BYTERANGE || null;
        break;
      }
    }

    return { initUri, mapByteRange };
  }

  function parseHLSAttributes(str) {
    const attrs = {};
    const regex = /([A-Z0-9-]+)=(?:"([^"]*)"|([^,]*))/g;
    let m;
    while ((m = regex.exec(str)) !== null) {
      attrs[m[1]] = m[2] !== undefined ? m[2] : m[3];
    }
    return attrs;
  }

  function buildVideoLabel(attrs) {
    const parts = [];
    if (attrs.RESOLUTION) parts.push(attrs.RESOLUTION);
    if (attrs.BANDWIDTH) parts.push(Math.round(parseInt(attrs.BANDWIDTH) / 1000) + ' kbps');
    if (attrs['FRAME-RATE']) parts.push(attrs['FRAME-RATE'] + ' fps');
    return parts.length ? parts.join(' · ') : 'Video variant';
  }

  // ── DASH Parser ──

  function parseDASHManifest(text, baseUrl) {
    const parser = new DOMParser();
    const doc = parser.parseFromString(text, 'text/xml');
    const err = doc.querySelector('parsererror');
    if (err) throw new Error('Invalid MPD XML: ' + err.textContent.substring(0, 100));

    const tracks = [];
    const periods = doc.querySelectorAll('Period');

    periods.forEach((period, pi) => {
      const periodBaseUrl = getBaseUrl(period, baseUrl);
      const adaptationSets = period.querySelectorAll('AdaptationSet');

      adaptationSets.forEach(as => {
        const asBaseUrl = getBaseUrl(as, periodBaseUrl);
        const contentType = as.getAttribute('contentType') || '';
        const mimeType = as.getAttribute('mimeType') || '';
        const lang = as.getAttribute('lang') || '';
        const codecs = as.getAttribute('codecs') || '';
        const segTemplate = as.querySelector(':scope > SegmentTemplate');

        let trackType = contentType || mimeType.split('/')[0] || 'unknown';
        if (trackType === 'text') trackType = 'subtitles';

        const reps = as.querySelectorAll('Representation');
        reps.forEach(rep => {
          const repBaseUrl = getBaseUrl(rep, asBaseUrl);
          const repId = rep.getAttribute('id') || '';
          const repBandwidth = rep.getAttribute('bandwidth') || '';
          const repWidth = rep.getAttribute('width') || as.getAttribute('width') || '';
          const repHeight = rep.getAttribute('height') || as.getAttribute('height') || '';
          const repCodecs = rep.getAttribute('codecs') || codecs;
          const repMimeType = rep.getAttribute('mimeType') || mimeType;

          // Find init URL
          let initUrl = null;
          const repSegTemplate = rep.querySelector(':scope > SegmentTemplate') || segTemplate;
          if (repSegTemplate) {
            const initAttr = repSegTemplate.getAttribute('initialization');
            if (initAttr) {
              const resolved = initAttr
                .replace(/\$RepresentationID\$/g, repId)
                .replace(/\$Bandwidth\$/g, repBandwidth)
                .replace(/\$Number\$/g, '1');
              initUrl = resolveUrl(repBaseUrl, resolved);
            }
          }

          // Check SegmentBase
          const segBase = rep.querySelector('SegmentBase') || as.querySelector('SegmentBase');
          if (!initUrl && segBase) {
            const initEl = segBase.querySelector('Initialization');
            if (initEl) {
              const range = initEl.getAttribute('range');
              const sourceURL = initEl.getAttribute('sourceURL');
              if (sourceURL) {
                initUrl = resolveUrl(repBaseUrl, sourceURL);
              } else if (range) {
                initUrl = repBaseUrl;
              }
            }
          }

          // Check SegmentList
          const segList = rep.querySelector('SegmentList') || as.querySelector('SegmentList');
          if (!initUrl && segList) {
            const initEl = segList.querySelector('Initialization');
            if (initEl) {
              const sourceURL = initEl.getAttribute('sourceURL');
              if (sourceURL) initUrl = resolveUrl(repBaseUrl, sourceURL);
            }
          }

          const label = buildDASHLabel(trackType, repWidth, repHeight, repBandwidth, repCodecs, lang, repId);

          tracks.push({
            type: trackType,
            label,
            bandwidth: repBandwidth,
            resolution: repWidth && repHeight ? repWidth + 'x' + repHeight : '',
            codecs: repCodecs,
            mimeType: repMimeType,
            language: lang,
            initUrl,
            repId,
            period: periods.length > 1 ? 'Period ' + (pi + 1) : ''
          });
        });
      });
    });

    return tracks;
  }

  function getBaseUrl(element, parentBase) {
    const baseUrlEl = element.querySelector(':scope > BaseURL');
    if (baseUrlEl && baseUrlEl.textContent.trim()) {
      const val = baseUrlEl.textContent.trim();
      if (/^https?:\/\//i.test(val)) return val;
      return resolveUrl(parentBase, val);
    }
    return parentBase;
  }

  function buildDASHLabel(type, w, h, bw, codecs, lang, repId) {
    const parts = [];
    if (w && h) parts.push(w + 'x' + h);
    if (bw) parts.push(Math.round(parseInt(bw) / 1000) + ' kbps');
    if (codecs) parts.push(codecs);
    if (lang) parts.push(lang);
    if (!parts.length && repId) parts.push('Rep ' + repId);
    return parts.join(' · ') || type;
  }

  // ── Manifest Scanner Entry ──

  if (loadManifestBtn) {
    loadManifestBtn.addEventListener('click', scanManifest);
    manifestUrlInput.addEventListener('keydown', e => {
      if (e.key === 'Enter') scanManifest();
    });
  }

  async function scanManifest() {
    // Clear init URL / file results state
    fileUrlInput.value = '';
    resultsEl.style.display = 'none';
    clearError();
    clearManifestError();
    manifestResults.innerHTML = '';
    manifestLoading.style.display = 'flex';

    const url = manifestUrlInput.value.trim();
    if (!url) {
      manifestLoading.style.display = 'none';
      showManifestError('Please enter a manifest URL.');
      return;
    }

    try {
      new URL(url);
    } catch {
      manifestLoading.style.display = 'none';
      showManifestError('Invalid URL format.');
      return;
    }

    try {
      const text = await fetchWithCors(url);
      addUrlToHistory(url);
      const type = detectManifestType(text, url);

      if (!type) {
        throw new Error('Could not detect manifest type. Expected HLS (#EXTM3U) or DASH (<MPD>).');
      }

      let tracks = [];

      if (type === 'hls') {
        const { isMaster, tracks: masterTracks } = parseHLSMaster(text, url);

        if (isMaster && masterTracks.length > 0) {
          // For each variant, fetch the media playlist to find init segments
          const fetchPromises = masterTracks.map(async (track) => {
            if (!track.isVariant || !track.uri) return track;
            try {
              const playlistText = await fetchWithCors(track.uri);
              const { initUri } = parseHLSMediaPlaylist(playlistText, track.uri);
              track.initUrl = initUri;
            } catch {
              track.initUrl = null;
              track.fetchError = 'Failed to fetch variant playlist';
            }
            return track;
          });

          tracks = await Promise.all(fetchPromises);
        } else {
          // It's a media playlist directly
          const { initUri } = parseHLSMediaPlaylist(text, url);
          if (initUri) {
            tracks.push({
              type: 'media',
              label: 'Media Playlist',
              initUrl: initUri,
              uri: url
            });
          } else {
            throw new Error('No #EXT-X-MAP found in this media playlist. Cannot identify init segment.');
          }
        }
      } else {
        // DASH
        tracks = parseDASHManifest(text, url);
      }

      manifestLoading.style.display = 'none';
      renderManifestTracks(tracks, type);

    } catch (err) {
      manifestLoading.style.display = 'none';
      showManifestError(err.message);
    }
  }

  // ── Render Manifest Results ──

  function renderManifestTracks(tracks, manifestType) {
    manifestResults.innerHTML = '';

    if (tracks.length === 0) {
      manifestResults.innerHTML = '<div class="manifest-empty">No tracks found in this manifest.</div>';
      return;
    }

    // Summary
    const summary = document.createElement('div');
    summary.className = 'manifest-summary';
    const typeCounts = {};
    tracks.forEach(t => { typeCounts[t.type] = (typeCounts[t.type] || 0) + 1; });
    const badges = Object.entries(typeCounts).map(([type, count]) =>
      `<span class="manifest-type-badge manifest-type-${type}">${type} (${count})</span>`
    ).join(' ');
    summary.innerHTML = `<span class="manifest-format-badge">${manifestType.toUpperCase()}</span> ${badges} <span class="manifest-total">${tracks.length} track${tracks.length !== 1 ? 's' : ''}</span>`;
    manifestResults.appendChild(summary);

    // Track list
    const list = document.createElement('div');
    list.className = 'manifest-track-list';

    tracks.forEach((track, idx) => {
      const card = document.createElement('div');
      card.className = 'manifest-track-card';

      const typeIcon = getTrackIcon(track.type);
      const header = document.createElement('div');
      header.className = 'manifest-track-header';
      header.innerHTML = `
        <span class="manifest-track-icon">${typeIcon}</span>
        <span class="manifest-track-type manifest-type-${track.type}">${track.type}</span>
        <span class="manifest-track-label">${escHtml(track.label)}</span>
      `;
      card.appendChild(header);

      // Details row
      const details = document.createElement('div');
      details.className = 'manifest-track-details';
      const detailParts = [];
      if (track.codecs) detailParts.push(`<span class="manifest-detail-item">Codecs: <code>${escHtml(track.codecs)}</code></span>`);
      if (track.language) detailParts.push(`<span class="manifest-detail-item">Lang: ${escHtml(track.language)}</span>`);
      if (track.period) detailParts.push(`<span class="manifest-detail-item">${escHtml(track.period)}</span>`);
      if (track.fetchError) detailParts.push(`<span class="manifest-detail-item manifest-detail-error">⚠ ${escHtml(track.fetchError)}</span>`);
      if (detailParts.length) {
        details.innerHTML = detailParts.join('');
        card.appendChild(details);
      }

      // Action button
      const actions = document.createElement('div');
      actions.className = 'manifest-track-actions';

      if (track.initUrl) {
        const inspectBtn = document.createElement('button');
        inspectBtn.className = 'action-btn small-btn';
        inspectBtn.textContent = '🔍 Inspect Init Segment';
        inspectBtn.addEventListener('click', () => loadInitSegment(track, inspectBtn));
        actions.appendChild(inspectBtn);

        const copyUrlBtn = document.createElement('button');
        copyUrlBtn.className = 'action-btn small-btn';
        copyUrlBtn.textContent = '📋 Copy URL';
        copyUrlBtn.addEventListener('click', () => {
          navigator.clipboard.writeText(track.initUrl).then(() => {
            copyUrlBtn.textContent = '✓ Copied';
            setTimeout(() => { copyUrlBtn.textContent = '📋 Copy URL'; }, 1500);
          });
        });
        actions.appendChild(copyUrlBtn);

        const urlSpan = document.createElement('code');
        urlSpan.className = 'manifest-init-url';
        urlSpan.textContent = track.initUrl.length > 80 ? '...' + track.initUrl.slice(-77) : track.initUrl;
        urlSpan.title = track.initUrl;
        actions.appendChild(urlSpan);
      } else {
        const noInit = document.createElement('span');
        noInit.className = 'manifest-no-init';
        noInit.textContent = 'No init segment found';
        actions.appendChild(noInit);
      }

      card.appendChild(actions);
      list.appendChild(card);
    });

    manifestResults.appendChild(list);
  }

  function getTrackIcon(type) {
    switch (type) {
      case 'video': return '🎬';
      case 'audio': return '🔊';
      case 'subtitles': case 'text': return '📝';
      case 'iframe': return '🖼️';
      default: return '📦';
    }
  }

  async function loadInitSegment(track, btn) {
    const origText = btn.textContent;
    btn.textContent = '⏳ Loading...';
    btn.disabled = true;

    try {
      const buffer = await fetchBinaryWithCors(track.initUrl);

      if (buffer.byteLength === 0) throw new Error('Empty response');

      // Use the existing processBuffer to parse and render
      const fileName = track.initUrl.split('/').pop().split('?')[0] || 'init.mp4';
      addUrlToHistory(track.initUrl);
      processBuffer(buffer, `[${track.type}] ${fileName}`, buffer.byteLength, track.initUrl);

      // Scroll to results
      resultsEl.scrollIntoView({ behavior: 'smooth', block: 'start' });
      btn.textContent = '✓ Loaded';
      btn.disabled = false;
      setTimeout(() => { btn.textContent = origText; }, 2000);
    } catch (err) {
      btn.textContent = '✗ Failed';
      btn.disabled = false;
      setTimeout(() => { btn.textContent = origText; }, 2000);
      showManifestError('Failed to load init segment: ' + err.message);
    }
  }

})();