// ==UserScript==
// @name         VKvideo 实时双语字幕
// @version      1.0.3
// @description  使用google翻译API，支持俄网VK video 实时双语字幕播放，下载，字幕视频定位
// @author       zzzdawei
// @match        *://vk.com/*
// @match        *://*.vk.com/*
// @match        *://vk.ru/*
// @match        *://*.vk.ru/*
// @match        *://vkvideo.ru/*
// @match        *://*.vkvideo.ru/*
// @grant        GM.xmlHttpRequest
// @grant        GM_addStyle
// @grant        unsafeWindow
// @connect      *
// @connect      okcdn.ru
// @connect      vkuser.net
// @connect      vk-cdn.net
// @run-at       document-start
// ==/UserScript==

(function () {
  "use strict";

  // ── Logging ──────────────────────────────────────────────────────────
  const log = (...args) => console.log("[VK Subs]", ...args);
  const warn = (...args) => console.warn("[VK Subs]", ...args);

  // ── Translation config ───────────────────────────────────────────────
  var TRANSLATE_TO = "zh";         // target language: zh/en/ja/ko/de/fr/es...
  var TRANSLATE_ENABLED = true;    // set to false to disable translation

  // ── Encoding detection ────────────────────────────────────────────────
  //
  // WHY: VK's auto-generated subtitle VTT files from okcdn.ru are sometimes
  // Windows‑1251 encoded (Russian), NOT UTF‑8.  A naive .text() produces
  // mojibake.  We download raw bytes (responseType:"arraybuffer") and try
  // multiple encodings.  See docs/decisions.md §3.
  //
  // Heuristic: U+FFFD replacement‑character density >3% = wrong encoding.
  // When Windows‑1251 Russian is decoded as UTF‑8, almost every byte in the
  // 0xC0‑0xFF range becomes an invalid UTF‑8 sequence → massive U+FFFD output.
  const ENCODINGS = ["utf-8", "windows-1251", "koi8-r", "iso-8859-5"];

  const VTT_HEADER_RE = /^WEBVTT/mu;
  const VTT_TIMING_ARROW = "-->";

  function decodeBuffer(buffer, encoding) {
    try {
      return new TextDecoder(encoding, { fatal: false }).decode(buffer);
    } catch {
      return null;
    }
  }

  /**
   * Detect whether a decoded string is likely mojibake (wrong encoding).
   *
   * When Windows-1251 Russian text is decoded as UTF-8, almost every byte
   * in the 0xC0-0xFF range (which covers all Cyrillic codepoints in cp1251)
   * becomes an invalid UTF-8 sequence, producing U+FFFD replacement chars.
   *
   * A correct decoding should have near-zero replacement characters.
   */
  function isLikelyMojibake(text) {
    var replacementCount = 0;
    for (var i = 0; i < text.length; i++) {
      if (text.charCodeAt(i) === 0xfffd) replacementCount++;
    }
    // If >3% of characters are replacement chars, the encoding is likely wrong.
    return replacementCount > text.length * 0.03;
  }

  function looksLikeVttContent(text) {
    return VTT_HEADER_RE.test(text) || text.indexOf("-->") !== -1;
  }

  function decodeTextFromBuffer(buffer) {
    let bestFallback = "";

    for (const encoding of ENCODINGS) {
      const decoded = decodeBuffer(buffer, encoding);
      if (!decoded) continue;

      if (looksLikeVttContent(decoded) && !isLikelyMojibake(decoded)) {
        log("decoded VTT with encoding:", encoding, `(${decoded.length} chars)`);
        return decoded;
      }

      // Keep the first candidate in case no encoding passes the heuristic.
      // We still prefer a mojibake‑free result later in the list over an
      // earlier mojibake result.
      if (!bestFallback && looksLikeVttContent(decoded)) {
        bestFallback = decoded;
      }
    }

    if (bestFallback) {
      warn("all encodings produced mojibake; using best-effort fallback");
      return bestFallback;
    }

    // Last resort: first encoding without any heuristic
    return decodeBuffer(buffer, ENCODINGS[0]) || "";
  }

  // ── VTT Parser ────────────────────────────────────────────────────────
  // VOT‑style VTT parser.  Handles the common VTT dialect served by VK.
  const VTT_TIMING_RE =
    /^(?<start>(?:\d{2}:)?\d{2}:\d{2}\.\d{3})\s+-->\s+(?<end>(?:\d{2}:)?\d{2}:\d{2}\.\d{3})/u;

  function parseClockTime(value) {
    const parts = value.trim().split(":");
    if (parts.length === 3) {
      const h = parseInt(parts[0], 10);
      const m = parseInt(parts[1], 10);
      const s = parseFloat(parts[2]);
      return (h * 3600 + m * 60 + s) * 1000;
    }
    if (parts.length === 2) {
      const m = parseInt(parts[0], 10);
      const s = parseFloat(parts[1]);
      return (m * 60 + s) * 1000;
    }
    return NaN;
  }

  function parseVtt(text) {
    const normalized = text.replace(/\r/g, "").replace(/^/, "");
    const lines = normalized.split("\n");
    if (!lines[0] || !lines[0].startsWith("WEBVTT")) {
      return [];
    }

    const cues = [];
    let i = 1;
    while (i < lines.length) {
      // skip empty lines and non-timing block headers (NOTE, STYLE, REGION)
      while (i < lines.length && lines[i].trim() === "") i++;
      if (i >= lines.length) break;
      if (/^(NOTE|STYLE|REGION)\b/i.test(lines[i])) {
        i++;
        while (i < lines.length && lines[i].trim() !== "") i++;
        continue;
      }

      // optional cue id
      if (!VTT_TIMING_RE.test(lines[i])) {
        i++;
        continue;
      }

      const timingMatch = VTT_TIMING_RE.exec(lines[i]);
      if (!timingMatch) { i++; continue; }

      const startMs = parseClockTime(timingMatch.groups.start);
      const endMs = parseClockTime(timingMatch.groups.end);
      i++;

      const textLines = [];
      while (i < lines.length && lines[i].trim() !== "") {
        let line = lines[i];
        // strip HTML-like tags and entities
        line = line
          .replace(/<[^>]+>/g, "")
          .replace(/&nbsp;/gi, " ")
          .replace(/&amp;/gi, "&")
          .replace(/&lt;/gi, "<")
          .replace(/&gt;/gi, ">")
          .replace(/&quot;/gi, '"')
          .replace(/&#39;/g, "'");
        textLines.push(line);
        i++;
      }

      const cueText = textLines.join("\n").trim();
      if (!isNaN(startMs) && !isNaN(endMs) && cueText) {
        cues.push({ start: startMs / 1000, end: endMs / 1000, text: cueText });
      }
    }

    // sort by start time
    cues.sort((a, b) => a.start - b.start);
    return cues;
  }

  // ── Overlay UI ────────────────────────────────────────────────────────
  //
  // WHY: VK's video lives inside <vk-video-player>'s Shadow DOM.  A
  // fixed‑position overlay in the light DOM gets occluded by the player's
  // stacking context — the user cannot see it.  We mount INTO the shadow root
  // (same technique as VOT's resolveOverlayMountTargets).
  // See docs/decisions.md §7.

  var OVERLAY_ID = "vot-vk-sub-overlay";
  var overlay = null;
  var overlayMountRoot = null; // shadow root or document.body

  /**
   * Find the best mount point for the overlay.  Prefers the shadow root
   * of <vk-video-player> because that's where the video lives.
   */
  function resolveOverlayMount() {
    // Try VK's player shadow root first
    var player = document.querySelector("vk-video-player");
    if (player && player.shadowRoot) {
      return player.shadowRoot;
    }
    // Fallback: any shadow root that contains a video
    var allEls = document.querySelectorAll("*");
    for (var i = 0; i < allEls.length; i++) {
      var sr = allEls[i].shadowRoot;
      if (sr && sr.querySelector("video")) {
        return sr;
      }
    }
    // Last resort: document body
    return document.body;
  }

  // ── Overlay vertical-drag state ────────────────────────────────────
  var _dragY = null;       // { startY, startBottom }
  var _userBottom = 64;    // persisted px from bottom edge (default 64)

  /** Get the container height (px) for drag clamping. */
  function getContainerHeight(el) {
    var p = el.parentNode;
    if (!p) return 720;
    if (p.host && p.host.getBoundingClientRect) {
      return p.host.getBoundingClientRect().height || 720;
    }
    if (p.getBoundingClientRect instanceof Function) {
      return p.getBoundingClientRect().height || 720;
    }
    return 720;
  }

  function createOverlay(mountRoot) {
    var el = document.createElement("div");
    el.id = OVERLAY_ID;
    // Subtitle box itself
    el.style.cssText =
      "position:absolute;bottom:" + _userBottom + "px;left:50%;transform:translateX(-50%);" +
      "z-index:999999;max-width:88%;display:none;" +
      "padding:8px 16px;" +
      "background:rgba(0,0,0,0.75);color:#fff;font-size:18px;" +
      "line-height:1.3;text-align:center;border-radius:8px;" +
      "backdrop-filter:blur(8px);" +
      "font-family:Arial,Helvetica,sans-serif;" +
      "box-shadow:0 2px 16px rgba(0,0,0,0.4);";

    // Original subtitle text span (selectable)
    var textSpan = document.createElement("span");
    textSpan.style.cssText =
      "display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" +
      "cursor:text;user-select:text;font-size:18px;line-height:1.3;";
    el.appendChild(textSpan);

    // Translation text span (hidden until translation arrives)
    var transSpan = document.createElement("span");
    transSpan.className = "vot-trans";
    transSpan.style.cssText =
      "display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" +
      "color:#aaa;font-size:13px;font-style:italic;line-height:1.2;margin-top:2px;";
    el.appendChild(transSpan);

    // ── Drag handle on TOP of the box ────────────────────────────────
    // WHY: We tried a side handle (flex column) but it overlapped with
    // long text.  A top‑mounted bar completely separates the drag zone
    // from the text area.  See docs/decisions.md §8.
    var handle = document.createElement("div");
    handle.style.cssText =
      "position:absolute;top:-14px;left:50%;transform:translateX(-50%);" +
      "width:60px;height:14px;" +
      "cursor:ns-resize;" +
      "border-radius:7px 7px 0 0;" +
      "background:rgba(60,60,60,0.9);" +
      "border:1px solid rgba(255,255,255,0.1);" +
      "border-bottom:none;" +
      "box-shadow:0 -2px 10px rgba(0,0,0,0.4);" +
      "transition:width 0.15s,background 0.15s;";
    handle.innerHTML =
      '<span style="display:flex;justify-content:center;align-items:center;gap:5px;height:100%;pointer-events:none;">' +
      '<span style="display:block;width:4px;height:4px;border-radius:50%;background:#fff;"></span>' +
      '<span style="display:block;width:4px;height:4px;border-radius:50%;background:#fff;"></span>' +
      '<span style="display:block;width:4px;height:4px;border-radius:50%;background:#fff;"></span>' +
      '</span>';
    handle.addEventListener("mouseenter", function () {
      handle.style.width = "84px";
      handle.style.background = "rgba(255,255,255,0.25)";
    });
    handle.addEventListener("mouseleave", function () {
      handle.style.width = "60px";
      handle.style.background = "rgba(60,60,60,0.9)";
    });
    el.appendChild(handle);

    // ── Drag handlers — only on the handle ─────────────────────────
    handle.addEventListener("pointerdown", function (e) {
      if (e.button !== undefined && e.button !== 0) return;
      e.preventDefault();
      e.stopPropagation();
      handle.setPointerCapture(e.pointerId);
      handle.style.background = "rgba(255,255,255,0.30)";
      _dragY = { startY: e.clientY, startBottom: _userBottom };
    });

    handle.addEventListener("pointermove", function (e) {
      if (!_dragY) return;
      var dy = _dragY.startY - e.clientY;
      var newBottom = _dragY.startBottom + dy;
      var parentH = getContainerHeight(el);
      var maxBottom = Math.max(8, parentH - 56);
      _userBottom = Math.max(8, Math.min(maxBottom, newBottom));
      el.style.bottom = _userBottom + "px";
    });

    var endDrag = function (e) {
      if (!_dragY) return;
      handle.style.background = "rgba(255,255,255,0.10)";
      handle.releasePointerCapture(e.pointerId);
      _dragY = null;
    };
    handle.addEventListener("pointerup", endDrag);
    handle.addEventListener("pointercancel", endDrag);

    // Double‑click handle to reset position
    handle.addEventListener("dblclick", function () {
      _userBottom = 64;
      el.style.bottom = "64px";
    });

    if (mountRoot) {
      mountRoot.appendChild(el);
    }
    return el;
  }

  function ensureOverlayInDOM() {
    var mount = resolveOverlayMount();
    if (!mount) return;

    // If mount point changed, recreate overlay in new location
    if (mount !== overlayMountRoot) {
      if (overlay && overlay.parentNode) {
        overlay.parentNode.removeChild(overlay);
      }
      overlay = null;
      overlayMountRoot = null;
    }

    if (!overlay) {
      overlay = document.getElementById(OVERLAY_ID);
      // The existing overlay might be in a different root
      if (!overlay || !overlay.parentNode) {
        overlay = createOverlay(mount);
      }
      overlayMountRoot = mount;
    }

    // Safety: if overlay is orphaned, re-append to current mount
    if (!overlay.parentNode && mount) {
      overlay = createOverlay(mount);
      overlayMountRoot = mount;
    }
  }

  //
  // WHY: We skip re-rendering when the text is unchanged to prevent the
  // translation module from re-firing for the same sentence on every
  // timeupdate tick (60×/sec).  Without this guard the translation would
  // appear to "flicker" as it gets re-applied each frame.
  //
  function showOverlay(text) {
    ensureOverlayInDOM();
    if (!overlay) return;
    if (!text || !text.trim()) {
      overlay.style.display = "none";
      return;
    }
    var displayText = text.replace(/[\r\n]+/g, " ").replace(/\s{2,}/g, " ").trim();

    if (overlay.firstChild.textContent === displayText && overlay.style.display === "block") {
      return;
    }

    overlay.firstChild.textContent = displayText;
    overlay.style.display = "block";

    // Notify translation module
    if (TRANSLATE_ENABLED) {
      try {
        overlay.dispatchEvent(new CustomEvent("vot-subtitle-change", {
          detail: { text: displayText },
          bubbles: true,
          composed: true
        }));
      } catch (e) {}
    }
  }

  function showStatus(msg) {
    var el = document.getElementById("vot-vk-sub-status");
    if (!el) {
      el = document.createElement("div");
      el.id = "vot-vk-sub-status";
      el.style.cssText =
        "position:fixed;top:8px;right:8px;z-index:2147483647;" +
        "padding:4px 10px;background:rgba(0,0,0,0.6);color:#aaa;" +
        "font-size:11px;border-radius:4px;pointer-events:none;" +
        "font-family:monospace;";
      if (document.body) document.body.appendChild(el);
    }
    if (!el.parentNode && document.body) {
      document.body.appendChild(el);
    }
    el.textContent = msg;
    el.style.display = "block";
    setTimeout(function () { el.style.display = "none"; }, 5000);
  }

  // ═══════════════════════════════════════════════════════════════════════
  // ── Translation module ──────────────────────────────────────────────
  // ═══════════════════════════════════════════════════════════════════════
  //
  // WHY: We pre‑translate all cues in the background (starting from the
  // current playback position) so that when showOverlay fires, the
  // translation is already cached → zero‑latency display.
  //
  // Architecture: buildTranslationQueue → pumpTranslationQueue (250ms
  // interval to avoid rate‑limiting) → showTranslation on cache hit.
  // Live cache‑miss fallback via onSubtitleChange → translateViaApi.
  // To disable: TRANSLATE_ENABLED = false at top of script.
  // To change API: edit translateViaApi().
  // See docs/decisions.md §4 and §5.

  var _transCache = {};         // { "source text": "translated text" }
  var _transCacheSize = 0;
  var _transCacheMax = 2000;
  var _transQueue = [];         // texts still to translate (ordered by priority)
  var _transTimer = null;       // setTimeout id for next batch
  var _transDone = 0;
  var _transTotal = 0;
  var _transRunning = false;
  var _liveTransPending = null;
  var _lastVideoTime = 0;          // for seek detection

  /** Call the translation API (same as before, replace body to switch). */
  function translateViaApi(text, targetLang) {
    return new Promise(function (resolve, reject) {
      var url = "https://translate.googleapis.com/translate_a/single" +
        "?client=gtx&sl=auto&tl=" + encodeURIComponent(targetLang) +
        "&dt=t&q=" + encodeURIComponent(text);
      GM.xmlHttpRequest({
        method: "GET", url: url, timeout: 5000,
        onload: function (resp) {
          try {
            var data = JSON.parse(resp.responseText);
            var translated = (data[0] || []).map(function (seg) {
              return (seg || [])[0] || "";
            }).join("");
            if (translated) resolve(translated);
            else reject(new Error("Empty translation"));
          } catch (e) { reject(e); }
        },
        onerror: function () { reject(new Error("API error")); },
        ontimeout: function () { reject(new Error("Timeout")); },
      });
    });
  }

  /** Process next item in the translation queue. */
  function pumpTranslationQueue() {
    if (!TRANSLATE_ENABLED || !_transRunning) return;
    if (_transQueue.length === 0) {
      _transRunning = false;
      _transTimer = null;
      updateTransProgress();
      return;
    }
    var text = _transQueue.shift();
    translateViaApi(text, TRANSLATE_TO).then(function (result) {
      _transCache[text] = result;
      _transCacheSize++;
      if (_transCacheSize > _transCacheMax) {
        var firstKey = Object.keys(_transCache)[0];
        if (firstKey) { delete _transCache[firstKey]; _transCacheSize--; }
      }
      _transDone++;
      updateTransProgress();
      // Continue after a short delay to avoid rate-limiting
      _transTimer = setTimeout(pumpTranslationQueue, 250);
    }).catch(function (err) {
      warn("Translation worker error:", err && err.message);
      _transQueue.push(text);
      _transTimer = setTimeout(pumpTranslationQueue, 1000);
    });
  }

  /**
   * Build a priority‑sorted translation queue.
   * WHY: Sorting from the current playback position means the sentences
   * the user will see next are translated FIRST.  Pre‑translation covers
   * the most time‑critical content before the background worker finishes
   * the rest.  See docs/decisions.md §5.
   */
  function buildTranslationQueue() {
    if (!TRANSLATE_ENABLED) return;
    var cues = _dedupedCues;
    if (!cues.length) return;

    // Collect unique texts to translate
    var seen = {};
    var items = [];
    for (var i = 0; i < cues.length; i++) {
      var text = cues[i].text;
      if (!text || !text.trim() || seen[text] || _transCache[text] !== undefined) continue;
      seen[text] = true;
      items.push({ text: text, index: i });
    }
    if (!items.length) { _transTotal = 0; _transDone = 0; updateTransProgress(); return; }

    // Find current playback index
    var curTime = videoElement ? videoElement.currentTime : 0;
    var curIdx = 0;
    for (var j = 0; j < cues.length; j++) {
      if (curTime >= cues[j].start && curTime < cues[j].end) { curIdx = j; break; }
    }

    // Sort: items closest to current position first
    items.sort(function (a, b) {
      var da = Math.abs(a.index - curIdx);
      var db = Math.abs(b.index - curIdx);
      return da - db;
    });

    _transQueue = [];
    for (var k = 0; k < items.length; k++) _transQueue.push(items[k].text);
    _transTotal = _transQueue.length;
    _transDone = 0;
    updateTransProgress();
  }

  /** Start (or restart) the translation worker. */
  function startTranslationWorker() {
    if (!TRANSLATE_ENABLED) return;
    buildTranslationQueue();
    if (_transRunning) return;
    _transRunning = true;
    pumpTranslationQueue();
  }

  /** Update the panel header with translation progress. */
  function updateTransProgress() {
    var titleEl = document.querySelector("#vot-vk-sub-panel [data-trans-title]");
    if (!titleEl) return;
    if (_transTotal === 0) { titleEl.textContent = "Subtitles"; return; }
    if (_transDone >= _transTotal) { titleEl.textContent = "Subtitles ✓"; return; }
    titleEl.textContent = "Subtitles (" + _transDone + "/" + _transTotal + ")";
  }

  /** Show translation in overlay with full opacity. */
  function showTranslation(translatedText) {
    if (!overlay || !overlay.parentNode) return;
    var transEl = overlay.querySelector(".vot-trans");
    if (!transEl) return;
    transEl.textContent = translatedText || "";
  }

  /** Called when overlay text changes (only fires on actual change). */
  function onSubtitleChange(e) {
    if (!TRANSLATE_ENABLED) return;
    var text = (e.detail && e.detail.text) || "";
    if (!text || !text.trim()) return;

    // Cache hit → instant (pre-translated by worker)
    var cached = _transCache[text];
    if (cached !== undefined) {
      showTranslation(cached);
      return;
    }

    // Cache miss → live translate (rare after pre-translation)
    if (_liveTransPending === text) return; // already fetching
    _liveTransPending = text;
    translateViaApi(text, TRANSLATE_TO).then(function (result) {
      _transCache[text] = result;
      _transCacheSize++;
      if (overlay && overlay.firstChild.textContent === text) {
        showTranslation(result);
      }
      _liveTransPending = null;
    }).catch(function () {
      _liveTransPending = null;
    });
  }

  function initTranslationModule() {
    document.addEventListener("vot-subtitle-change", onSubtitleChange);
  }

  // ── Subtitle download ──────────────────────────────────────────────────
  /**
   * Convert activeCues back to a valid VTT file for download.
   * Used when the original VTT text isn't available (textTracks / page state).
   */
  function serializeCuesToVtt(cues) {
    var lines = ["WEBVTT", ""];
    for (var i = 0; i < cues.length; i++) {
      var c = cues[i];
      var startSec = c.start;
      var endSec = c.end;
      var sh = Math.floor(startSec / 3600);
      var sm = Math.floor((startSec % 3600) / 60);
      var ss = Math.floor(startSec % 60);
      var sms = Math.floor((startSec % 1) * 1000);
      var eh = Math.floor(endSec / 3600);
      var em = Math.floor((endSec % 3600) / 60);
      var es = Math.floor(endSec % 60);
      var ems = Math.floor((endSec % 1) * 1000);
      var startStr = (sh > 0 ? (sh < 10 ? "0" : "") + sh + ":" : "") +
        (sm < 10 ? "0" : "") + sm + ":" + (ss < 10 ? "0" : "") + ss + "." +
        (sms < 100 ? (sms < 10 ? "00" : "0") : "") + sms;
      var endStr = (eh > 0 ? (eh < 10 ? "0" : "") + eh + ":" : "") +
        (em < 10 ? "0" : "") + em + ":" + (es < 10 ? "0" : "") + es + "." +
        (ems < 100 ? (ems < 10 ? "00" : "0") : "") + ems;
      lines.push(startStr + " --> " + endStr);
      lines.push(c.text);
      lines.push("");
    }
    return lines.join("\n");
  }

  function downloadSubtitles() {
    var vttData = _rawVttText || serializeCuesToVtt(activeCues);
    if (!vttData) {
      warn("No subtitle data to download");
      return;
    }
    try {
      var blob = new Blob([vttData], { type: "text/vtt;charset=utf-8" });
      var url = URL.createObjectURL(blob);
      var a = document.createElement("a");
      a.href = url;
      a.download = "vk-subtitles-" + (_loadedVideoId || "video") + ".vtt";
      a.style.display = "none";
      document.body.appendChild(a);
      a.click();
      setTimeout(function () {
        document.body.removeChild(a);
        URL.revokeObjectURL(url);
      }, 100);
      log("Download triggered: " + a.download);
    } catch (e) {
      warn("Download failed:", e);
    }
  }

  // ── Subtitle list panel ───────────────────────────────────────────────
  var _panelEl = null;
  var _panelListEl = null;
  var _panelBaseX = null;       // initial left px
  var _panelBaseY = 80;         // initial top px
  var _panelOffX = 0;           // drag offset X
  var _panelOffY = 0;           // drag offset Y
  var _panelCollapsed = false;
  var _panelScrollLock = false;
  var _panelScrollTimer = null;
  var _highlightInterval = null;
  var _cueRows = [];
  var _dedupedCues = [];  // cues after dedup, matching _cueRows order
  var _highlightedIdx = -1;

  function formatTime(seconds) {
    var m = Math.floor(seconds / 60);
    var s = Math.floor(seconds % 60);
    return (m < 10 ? "0" : "") + m + ":" + (s < 10 ? "0" : "") + s;
  }

  function createSubtitlePanel() {
    if (_panelEl) return;

    if (_panelBaseX == null) _panelBaseX = window.innerWidth - 360;

    var panel = document.createElement("div");
    panel.id = "vot-vk-sub-panel";
    // WHY: Panel uses position:fixed in light DOM (not shadow root) so it
    // can be freely dragged anywhere on screen.  will-change:transform hints
    // the browser to GPU‑accelerate the drag.  backdrop-filter removed
    // because it caused jank during drag (forced repaint on every frame).
    panel.style.cssText =
      "position:fixed;top:" + _panelBaseY + "px;left:" + _panelBaseX + "px;" +
      "z-index:2147483646;width:340px;" +
      "background:rgba(0,0,0,0.88);color:#fff;border-radius:8px;" +
      "font-family:Arial,Helvetica,sans-serif;font-size:13px;" +
      "box-shadow:0 2px 20px rgba(0,0,0,0.5);will-change:transform;" +
      "display:flex;flex-direction:column;overflow:hidden;";
    applyPanelTransform();

    // ── Header bar ──────────────────────────────────────────────────
    var header = document.createElement("div");
    header.style.cssText =
      "display:flex;align-items:center;gap:6px;padding:4px 8px;" +
      "cursor:move;user-select:none;flex-shrink:0;" +
      "border-bottom:1px solid rgba(255,255,255,0.08);" +
      "background:rgba(255,255,255,0.06);";

    // Title (also shows translation progress)
    var title = document.createElement("span");
    title.setAttribute("data-trans-title", "1");
    title.textContent = "Subtitles";
    title.style.cssText = "flex:1;font-size:12px;color:#aaa;";
    header.appendChild(title);

    // Download button
    var dlBtn = document.createElement("button");
    dlBtn.textContent = "⬇";
    dlBtn.title = "Download VTT";
    dlBtn.style.cssText =
      "background:rgba(255,255,255,0.1);border:none;color:#fff;" +
      "cursor:pointer;border-radius:4px;width:28px;height:22px;" +
      "font-size:13px;line-height:1;padding:0;flex-shrink:0;";
    // WHY: stopPropagation on pointerdown prevents the header's drag handler
    // from capturing the pointer before the button's click event fires.
    // See docs/decisions.md §11.
    dlBtn.addEventListener("pointerdown", function (e) { e.stopPropagation(); });
    dlBtn.addEventListener("click", function (e) { e.stopPropagation(); downloadSubtitles(); });
    dlBtn.addEventListener("mouseenter", function () { dlBtn.style.background = "rgba(255,255,255,0.25)"; });
    dlBtn.addEventListener("mouseleave", function () { dlBtn.style.background = "rgba(255,255,255,0.1)"; });
    header.appendChild(dlBtn);

    // Scroll-to-current button
    var scBtn = document.createElement("button");
    scBtn.textContent = "⊙";
    scBtn.title = "Scroll to current";
    scBtn.style.cssText =
      "background:rgba(255,255,255,0.1);border:none;color:#fff;" +
      "cursor:pointer;border-radius:4px;width:22px;height:22px;" +
      "font-size:12px;line-height:1;padding:0;flex-shrink:0;";
    scBtn.addEventListener("pointerdown", function (e) { e.stopPropagation(); });
    scBtn.addEventListener("click", function (e) {
      e.stopPropagation();
      _panelScrollLock = false;
      updatePanelHighlight();
    });
    scBtn.addEventListener("mouseenter", function () { scBtn.style.background = "rgba(255,255,255,0.25)"; });
    scBtn.addEventListener("mouseleave", function () { scBtn.style.background = "rgba(255,255,255,0.1)"; });
    header.appendChild(scBtn);

    // Collapse button
    var colBtn = document.createElement("button");
    colBtn.textContent = "−";
    colBtn.title = "Collapse";
    colBtn.style.cssText =
      "background:rgba(255,255,255,0.1);border:none;color:#fff;" +
      "cursor:pointer;border-radius:4px;width:22px;height:22px;" +
      "font-size:14px;line-height:1;padding:0;flex-shrink:0;";
    colBtn.addEventListener("pointerdown", function (e) { e.stopPropagation(); });
    colBtn.addEventListener("click", function (e) {
      e.stopPropagation();
      _panelCollapsed = !_panelCollapsed;
      colBtn.textContent = _panelCollapsed ? "+" : "−";
      listContainer.style.display = _panelCollapsed ? "none" : "";
    });
    colBtn.addEventListener("mouseenter", function () { colBtn.style.background = "rgba(255,255,255,0.25)"; });
    colBtn.addEventListener("mouseleave", function () { colBtn.style.background = "rgba(255,255,255,0.1)"; });
    header.appendChild(colBtn);

    panel.appendChild(header);

    // ── Drag: GPU-accelerated via transform ─────────────────────────
    var _panelDrag = null;
    header.addEventListener("pointerdown", function (e) {
      if (e.button !== undefined && e.button !== 0) return;
      e.preventDefault();
      header.setPointerCapture(e.pointerId);
      _panelDrag = { startX: e.clientX, startY: e.clientY, offX: _panelOffX, offY: _panelOffY };
    });
    header.addEventListener("pointermove", function (e) {
      if (!_panelDrag) return;
      _panelOffX = _panelDrag.offX + (e.clientX - _panelDrag.startX);
      _panelOffY = _panelDrag.offY + (e.clientY - _panelDrag.startY);
      applyPanelTransform();
    });
    var endPanelDrag = function () {
      _panelDrag = null;
      try { header.releasePointerCapture(1); } catch (e) {}
    };
    header.addEventListener("pointerup", endPanelDrag);
    header.addEventListener("pointercancel", endPanelDrag);

    // ── Scrollable cue list ─────────────────────────────────────────
    var listContainer = document.createElement("div");
    listContainer.style.cssText =
      "overflow-y:auto;overflow-x:hidden;max-height:60vh;" +
      "scroll-behavior:smooth;display:block;";
    listContainer.addEventListener("wheel", function () {
      _panelScrollLock = true;
      clearTimeout(_panelScrollTimer);
      _panelScrollTimer = setTimeout(function () { _panelScrollLock = false; }, 3000);
    });
    panel.appendChild(listContainer);
    _panelListEl = listContainer;

    document.body.appendChild(panel);
    _panelEl = panel;

    renderCueList();
    startHighlightTimer();

    log("Subtitle panel created");
  }

  function applyPanelTransform() {
    if (!_panelEl) return;
    _panelEl.style.transform = "translate(" + _panelOffX + "px, " + _panelOffY + "px)";
  }

  /**
   * Deduplicate cues that share the same start time or have substantial
   * overlap.  VK's auto-generated VTT often emits a short partial phrase
   * followed immediately by the full sentence at the same timestamp.
   * We keep only the best (longest text, latest start) version.
   */
  //
  // WHY: VK's auto‑generated VTT contains short→long corrections at the
  // same timestamp (differing by ~0.01s).  Without dedup the panel shows
  // duplicate entries.  Tolerance 0.05s catches these.  Overlap >50% of
  // the shorter cue keeps the later (corrected) version.
  // See docs/decisions.md §6.
  //
  function dedupCues(cues) {
    if (!cues.length) return [];
    var result = [cues[0]];
    for (var i = 1; i < cues.length; i++) {
      var prev = result[result.length - 1];
      var cur = cues[i];
      if (Math.abs(cur.start - prev.start) < 0.05) {
        if (cur.text.length >= prev.text.length) {
          result[result.length - 1] = cur;
        }
        continue;
      }
      // Overlap > 50% of the shorter cue → keep the later one (correction)
      var overlap = Math.min(prev.end, cur.end) - Math.max(prev.start, cur.start);
      var shorter = Math.min(prev.end - prev.start, cur.end - cur.start);
      if (overlap > 0 && shorter > 0 && overlap / shorter > 0.5) {
        result[result.length - 1] = cur;
        continue;
      }
      result.push(cur);
    }
    return result;
  }

  function renderCueList() {
    if (!_panelListEl) return;
    _panelListEl.innerHTML = "";
    _cueRows = [];

    if (!activeCues.length) {
      var emptyMsg = document.createElement("div");
      emptyMsg.textContent = "No subtitles loaded";
      emptyMsg.style.cssText = "padding:16px;color:#666;text-align:center;";
      _panelListEl.appendChild(emptyMsg);
      return;
    }

    var cues = dedupCues(activeCues);
    _dedupedCues = cues;

    // Kick off background translation from current playback position
    startTranslationWorker();

    for (var i = 0; i < cues.length; i++) {
      var cue = cues[i];
      var row = document.createElement("div");
      row.style.cssText =
        "display:flex;gap:8px;padding:4px 10px;cursor:pointer;" +
        "border-bottom:1px solid rgba(255,255,255,0.03);" +
        "transition:background 0.1s;";
      row.setAttribute("data-cue-idx", String(i));

      // Time column
      var timeSpan = document.createElement("span");
      timeSpan.textContent = formatTime(cue.start);
      timeSpan.style.cssText =
        "flex-shrink:0;width:42px;color:#888;font-size:11px;" +
        "font-family:monospace;text-align:right;padding-top:2px;";
      row.appendChild(timeSpan);

      // Text column — allow wrapping for long sentences
      var textSpan = document.createElement("span");
      textSpan.textContent = cue.text;
      textSpan.style.cssText =
        "flex:1;font-size:12px;line-height:1.4;" +
        "white-space:pre-wrap;word-break:break-word;min-width:0;";
      row.appendChild(textSpan);

      // Click to seek
      row.addEventListener("click", function (cue) {
        return function () {
          if (videoElement && typeof videoElement.currentTime === "number") {
            videoElement.currentTime = cue.start;
          }
        };
      }(cue));

      _panelListEl.appendChild(row);
      _cueRows.push(row);
    }
  }

  function updatePanelHighlight() {
    if (!videoElement || !_cueRows.length) return;
    var time = videoElement.currentTime;
    var idx = -1;
    var cues = _dedupedCues;
    if (cues.length) {
      var lo = 0, hi = cues.length - 1;
      while (lo <= hi) {
        var mid = (lo + hi) >>> 1;
        var cue = cues[mid];
        if (time >= cue.start && time < cue.end) { idx = mid; break; }
        if (time < cue.start) hi = mid - 1;
        else lo = mid + 1;
      }
    }

    if (idx === _highlightedIdx) return; // no change
    _highlightedIdx = idx;

    // Update row styles
    for (var i = 0; i < _cueRows.length; i++) {
      var spans = _cueRows[i].querySelectorAll("span");
      if (i === idx) {
        _cueRows[i].style.background = "rgba(255,255,255,0.15)";
        for (var s = 0; s < spans.length; s++) spans[s].style.color = "#fff";
        if (!_panelScrollLock && _panelListEl) {
          _cueRows[i].scrollIntoView({ block: "center", behavior: "smooth" });
        }
      } else {
        _cueRows[i].style.background = "";
        if (spans.length) spans[0].style.color = "#888";
        if (spans.length > 1) spans[1].style.color = "";
      }
    }
  }

  function startHighlightTimer() {
    if (_highlightInterval) return;
    _highlightInterval = setInterval(updatePanelHighlight, 500);
  }

  // Keep panel on-screen on window resize
  window.addEventListener("resize", function () {
    if (!_panelEl) return;
    var curX = _panelBaseX + _panelOffX;
    var curY = _panelBaseY + _panelOffY;
    if (curX + 340 > window.innerWidth) _panelOffX = window.innerWidth - 350 - _panelBaseX;
    if (curY > window.innerHeight - 100) _panelOffY = window.innerHeight - 200 - _panelBaseY;
    applyPanelTransform();
  });

  // ── VK player API ─────────────────────────────────────────────────────
  /**
   * With @grant in Tampermonkey, page globals like Videoview are only
   * accessible via unsafeWindow.
   */
  function getPageWindow() {
    return (typeof unsafeWindow !== "undefined" ? unsafeWindow : globalThis);
  }

  function getSubtitleUrlsFromPlayer() {
    try {
      var pageWin = getPageWindow();
      // VK's global video player API (same one VOT uses via VKHelper)
      if (typeof pageWin.Videoview === "undefined") return null;
      var player = pageWin.Videoview.getPlayerObject && pageWin.Videoview.getPlayerObject();
      if (!player || !player.vars || !player.vars.subs) return null;

      var subs = player.vars.subs;
      var urls = [];
      var subsArray = Array.isArray(subs) ? subs : [subs];
      for (var i = 0; i < subsArray.length; i++) {
        var sub = subsArray[i];
        if (sub.url) {
          urls.push({
            url: sub.url,
            lang: sub.lang || "unknown",
            isAuto: !!sub.is_auto,
          });
        }
      }
      return urls.length > 0 ? urls : null;
    } catch (e) {
      warn("Failed to get subtitle URLs from VK player:", e);
      return null;
    }
  }

  // ── Subtitle fetching via GM.xmlHttpRequest ───────────────────────────
  function fetchSubtitlesViaGM(url) {
    return new Promise((resolve, reject) => {
      log("Fetching subtitles via GM:", url.substring(0, 80) + "...");
      const req = GM.xmlHttpRequest({
        method: "GET",
        url: url,
        responseType: "arraybuffer",
        timeout: 10000,
        onload: function (resp) {
          if (resp.status < 200 || resp.status >= 400) {
            reject(new Error(`HTTP ${resp.status}`));
            return;
          }
          if (!resp.response || resp.response.byteLength === 0) {
            reject(new Error("Empty response"));
            return;
          }
          // resp.response is an ArrayBuffer when responseType is "arraybuffer"
          const buffer = resp.response;
          const text = decodeTextFromBuffer(buffer);
          if (!text) {
            reject(new Error("Failed to decode subtitle text"));
            return;
          }
          resolve(text);
        },
        onerror: function (err) {
          var msg = (err && err.error) || (err && err.statusText) || "GM XHR error";
          reject(new Error(msg));
        },
        ontimeout: function () {
          reject(new Error("Timeout"));
        },
      });

      // Store for potential abort
      return req;
    });
  }

  // ── Core state ────────────────────────────────────────────────────────
  let activeCues = [];
  let videoElement = null;
  let timeUpdateHandler = null;
  let loadedDataHandler = null;
  var _timeUpdateCount = 0;
  var _cueHitCount = 0;
  var _loadingSubtitles = false; // prevents concurrent VTT downloads
  var _rawVttText = null;        // decoded VTT text for download
  var _loadedVideoId = null;     // for download filename

  //
  // WHY: VK's VTT often has multiple overlapping cues at the same timestamp
  // (short partial phrase → long full sentence correction).  A naive binary
  // search may return different cues on consecutive timeupdate calls, causing
  // subtitle/translation flicker.  We scan ±0.05s neighbors and return the
  // one with the longest text.  See docs/decisions.md §6.
  //
  function findCurrentCue(time) {
    if (!activeCues.length) return null;
    var lo = 0, hi = activeCues.length - 1;
    var best = null;
    while (lo <= hi) {
      var mid = (lo + hi) >>> 1;
      var cue = activeCues[mid];
      if (time >= cue.start && time < cue.end) {
        best = cue;
        // Check neighbors: VK emits multiple cues at the same timestamp
        // (short → long correction).  Prefer the one with the longest text.
        var left = mid - 1;
        while (left >= 0 && Math.abs(activeCues[left].start - cue.start) < 0.05) {
          if (time >= activeCues[left].start && time < activeCues[left].end &&
              activeCues[left].text.length > best.text.length) {
            best = activeCues[left];
          }
          left--;
        }
        var right = mid + 1;
        while (right < activeCues.length && Math.abs(activeCues[right].start - cue.start) < 0.05) {
          if (time >= activeCues[right].start && time < activeCues[right].end &&
              activeCues[right].text.length > best.text.length) {
            best = activeCues[right];
          }
          right++;
        }
        return best;
      }
      if (time < cue.start) hi = mid - 1;
      else lo = mid + 1;
    }
    return null;
  }

  var _lastLoadAttempt = 0;

  function onTimeUpdate() {
    if (!videoElement) return;
    _timeUpdateCount++;

    // WHY: After a seek, the pre‑translation worker's priority queue is
    // ordered for the old position.  A >2s jump triggers a queue rebuild
    // so upcoming sentences are translated first again.
    var curTime = videoElement.currentTime;
    if (Math.abs(curTime - _lastVideoTime) > 2 && _dedupedCues.length) {
      log("Seek detected, rebuilding translation queue from " + curTime.toFixed(1));
      startTranslationWorker();
    }
    _lastVideoTime = curTime;

    // If we don't have subtitles yet, try loading every 2 seconds.
    var now = Date.now();
    if (!activeCues.length && (now - _lastLoadAttempt) > 2000) {
      _lastLoadAttempt = now;
      loadSubtitlesForCurrentVideo();
    }

    // First event + every 60th: log status for debugging
    if (_timeUpdateCount === 1 || _timeUpdateCount % 60 === 0) {
      log("timeupdate #" + _timeUpdateCount + " time=" + curTime.toFixed(1) +
          " cues=" + activeCues.length + " hits=" + _cueHitCount);
    }
    const time = curTime;
    const cue = findCurrentCue(time);
    if (cue) {
      _cueHitCount++;
      showOverlay(cue.text);
    } else {
      showOverlay("");
    }
  }

  function detachVideo() {
    if (!videoElement) return;
    if (timeUpdateHandler) {
      videoElement.removeEventListener("timeupdate", timeUpdateHandler);
      timeUpdateHandler = null;
    }
    if (loadedDataHandler) {
      videoElement.removeEventListener("loadeddata", loadedDataHandler);
      loadedDataHandler = null;
    }
    videoElement = null;
    activeCues = [];
    showOverlay("");
    log("Detached from video");
  }

  async function attachToVideo(video) {
    if (!video) return;
    if (videoElement === video) {
      log("Already attached to this video");
      return;
    }

    detachVideo();
    videoElement = video;
    activeCues = [];
    showOverlay("");
    log("Attached to video element:", video);

    // Try to get subtitles from VK player API
    await loadSubtitlesForCurrentVideo();

    // Setup event listeners
    timeUpdateHandler = () => {
      if (videoElement) onTimeUpdate();
    };
    loadedDataHandler = async () => {
      log("loadeddata event, re-checking subtitles");
      await loadSubtitlesForCurrentVideo();
    };

    videoElement.addEventListener("timeupdate", timeUpdateHandler);
    videoElement.addEventListener("loadeddata", loadedDataHandler);
    log("Event listeners bound");
  }

  async function loadSubtitlesForCurrentVideo() {
    if (!videoElement) return;
    if (_loadingSubtitles) return;
    _loadingSubtitles = true;

    try {
      // First try VK player API
      const urls = getSubtitleUrlsFromPlayer();
      if (urls && urls.length > 0) {
        const autoSub = urls.find((s) => s.isAuto);
        const target = autoSub || urls[0];
        log("Found subtitle URL from player API:", target.lang, "auto:", target.isAuto);
        try {
          var vttText2 = await fetchSubtitlesViaGM(target.url);
          var cues2 = parseVtt(vttText2);
          if (cues2.length > 0) {
            activeCues = cues2;
            _rawVttText = vttText2;
            _loadedVideoId = target.url.match(/id=(\d+)/);
            _loadedVideoId = _loadedVideoId ? _loadedVideoId[1] : "unknown";
            renderCueList();
            log("Loaded " + cues2.length + " cues from VK player API");
            showStatus("Subtitles: " + cues2.length + " cues (" + target.lang + ")");
            return;
          }
        } catch (e) {
          warn("Failed to load subtitles from player API URL:", e.message);
        }
      } else {
        log("No subtitles in player.vars, trying track elements...");
      }

      // Fallback: try <track> elements
      const tracks = videoElement.querySelectorAll("track");
      for (var ti = 0; ti < tracks.length; ti++) {
        var track = tracks[ti];
        if (!track.src) continue;
        log("Found track element:", track.src.substring(0, 80), track.srclang);
        try {
          var vttText = await fetchSubtitlesViaGM(track.src);
          var cues = parseVtt(vttText);
          if (cues.length > 0) {
            activeCues = cues;
            _rawVttText = vttText;          // save for download
            _loadedVideoId = track.src.match(/id=(\d+)/);
            _loadedVideoId = _loadedVideoId ? _loadedVideoId[1] : "unknown";
            renderCueList();                 // rebuild panel list
            log("Loaded " + cues.length + " cues from track element");
            showStatus("Subtitles: " + cues.length + " cues (via track)");
            return;
          }
        } catch (e) {
          warn("Failed to load track:", e.message);
        }
      }

      // Last resort: textTracks API
      var textTracks = Array.from(videoElement.textTracks || []);
      for (var tti = 0; tti < textTracks.length; tti++) {
        var tt = textTracks[tti];
        if (!["subtitles", "captions", ""].includes(tt.kind)) continue;
        tt.mode = "hidden";
        if (tt.cues && tt.cues.length > 0) {
          activeCues = Array.from(tt.cues).map(function (cue) {
            return {
              start: cue.startTime,
              end: cue.endTime,
              text: cue.text.replace(/<[^>]+>/g, "").trim(),
            };
          });
          activeCues.sort(function (a, b) { return a.start - b.start; });
          _rawVttText = serializeCuesToVtt(activeCues); // generate VTT for download
          renderCueList();
          log("Loaded " + activeCues.length + " cues from textTracks API");
          showStatus("Subtitles: " + activeCues.length + " cues (textTracks)");
          return;
        }
      }

      if (scanPageStateForSubtitles()) {
        _rawVttText = serializeCuesToVtt(activeCues);
        renderCueList();
        showStatus("Subtitles: " + activeCues.length + " cues (page state)");
        return;
      }

      log("No subtitles found for current video");
    } finally {
      _loadingSubtitles = false;
    }
  }

  // ── Page state scanning (fallback) ───────────────────────────────────
  function normalizeCue(item) {
    if (!item || typeof item !== "object") return null;
    var text = item.text || item.subtitle || item.caption || item.title || null;
    if (!text || !text.trim()) return null;
    var start = parseFloat(item.start != null ? item.start : (item.begin != null ? item.begin : (item.from != null ? item.from : item.ts)));
    var end = parseFloat(item.end != null ? item.end : (item.to != null ? item.to : (item.finish != null ? item.finish : item.stop)));
    if (isNaN(start) || isNaN(end) || end <= start) return null;
    return { start: start, end: end, text: text.trim() };
  }

  function extractCues(obj, results, depth) {
    if (depth > 6 || !obj || typeof obj !== "object") return;
    if (Array.isArray(obj)) {
      const possible = obj.filter((i) => normalizeCue(i));
      if (possible.length === obj.length && obj.length > 0) {
        for (const i of obj) {
          const cue = normalizeCue(i);
          if (cue) results.push(cue);
        }
        return;
      }
      for (const i of obj) extractCues(i, results, depth + 1);
      return;
    }
    for (const key of Object.keys(obj)) {
      if (/subtitles?|captions?|tracks?|events?|segments?/i.test(key)) {
        extractCues(obj[key], results, depth + 1);
      }
    }
    const cue = normalizeCue(obj);
    if (cue) { results.push(cue); return; }
    for (const key of Object.keys(obj)) extractCues(obj[key], results, depth + 1);
  }

  function scanPageStateForSubtitles() {
    // In sandboxed context, page globals are on unsafeWindow
    var pageWin = getPageWindow();
    var knownKeys = [
      "__INITIAL_STATE__", "__PRELOADED_STATE__",
      "__NEXT_DATA__", "__PAGE_DATA__",
      "initialState", "pageData", "appState", "windowData",
      "data", "state",
    ];
    for (var k = 0; k < knownKeys.length; k++) {
      try {
        var value = pageWin[knownKeys[k]];
        if (!value) continue;
        var results = [];
        extractCues(value, results, 0);
        if (results.length > 0) {
          results.sort(function (a, b) { return a.start - b.start; });
          activeCues = results;
          log("Found " + results.length + " cues in page state: " + knownKeys[k]);
          return true;
        }
      } catch (e) {}
    }
    return false;
  }

  // ── Video discovery ───────────────────────────────────────────────────
  //
  // vkvideo.ru uses <vk-video-player>, a custom element with Shadow DOM.
  // document.querySelectorAll("video") cannot see videos inside shadow roots,
  // so we must search recursively and hook attachShadow to catch late‑created
  // shadow trees (same technique used by VOT's VideoObserver).

  /**
   * Collect all <video> elements by scanning the document plus every known
   * shadow root (including closed ones captured by our attachShadow hook).
   */
  /**
   * Search for videos in a shadow root.  Tolerates the sandbox wrapper
   * possibly stripping .shadowRoot — tries knownShadowRoots as fallback.
   */
  function collectShadowVideos(hostElement, results) {
    // Direct .shadowRoot access (works for open shadow roots)
    var sr = hostElement.shadowRoot;
    if (sr && sr.querySelectorAll) {
      var vids = sr.querySelectorAll("video");
      for (var i = 0; i < vids.length; i++) results.push(vids[i]);
      return;
    }

    // Fallback: knownShadowRoots (captured by our attachShadow hook living
    // in a different sandbox — this array may be empty in re-injections)
    for (var s = 0; s < knownShadowRoots.length; s++) {
      var csr = knownShadowRoots[s];
      if (!csr.querySelectorAll) continue;
      // check if this shadow root belongs to hostElement
      if (csr.host === hostElement || !csr.host) {
        var vids2 = csr.querySelectorAll("video");
        for (var j = 0; j < vids2.length; j++) results.push(vids2[j]);
      }
    }
  }

  function queryAllVideosOnPage() {
    var results = [];

    // Light DOM
    var lightVideos = document.querySelectorAll("video");
    for (var i = 0; i < lightVideos.length; i++) results.push(lightVideos[i]);

    // Specifically target VK's player element (most reliable across sandboxes)
    var vkPlayer = document.querySelector("vk-video-player");
    if (vkPlayer) collectShadowVideos(vkPlayer, results);

    // Also scan all elements for shadow roots (catches other players)
    var allElements = document.querySelectorAll("*");
    for (var j = 0; j < allElements.length; j++) {
      if (allElements[j] === vkPlayer) continue; // already scanned
      if (allElements[j].shadowRoot) {
        collectShadowVideos(allElements[j], results);
      }
    }

    // Fallback: videos captured by attachShadow hook (closed shadow roots)
    for (var s = 0; s < knownShadowRoots.length; s++) {
      var csr = knownShadowRoots[s];
      if (!csr.querySelectorAll) continue;
      var closedVideos = csr.querySelectorAll("video");
      for (var c = 0; c < closedVideos.length; c++) {
        if (results.indexOf(closedVideos[c]) === -1) results.push(closedVideos[c]);
      }
    }

    return results;
  }

  var _lastVideoCount = -1;

  /**
   * Scan the entire page (document + all shadow roots) for video elements.
   * Returns the BEST video (the one with class "player-media" inside a
   * VK player container) and ignores auxiliary/background videos.
   */
  function findBestVideo() {
    var allVideos = queryAllVideosOnPage();

    if (allVideos.length !== _lastVideoCount) {
      _lastVideoCount = allVideos.length;
      log("Video count changed: " + allVideos.length + " total on page");
    }

    if (allVideos.length > 0) {
      // Prefer the MAIN player video — it has class "player-media" and
      // sits inside vk-video-player.  VK's shadow DOM also contains a
      // bare <video style="width:100%"> that serves as an auxiliary
      // element (PiP / background).  We must ignore that one.
      var best = null;
      for (var i = 0; i < allVideos.length; i++) {
        var v = allVideos[i];
        // Main player video: has "player-media" class AND is inside vk-video-player
        if (v.classList && v.classList.contains("player-media")) {
          best = v;
          break;
        }
      }
      // Fallback: any video inside VK player container
      if (!best) {
        for (var j = 0; j < allVideos.length; j++) {
          if (allVideos[j].closest && allVideos[j].closest("vk-video-player, .videoplayer_media, [data-video]")) {
            best = allVideos[j];
            break;
          }
        }
      }
      return best || allVideos[0];
    }

    // check iframes (VK embeds)
    var iframes = document.querySelectorAll("iframe");
    for (var f = 0; f < iframes.length; f++) {
      try {
        var doc = iframes[f].contentDocument || (iframes[f].contentWindow && iframes[f].contentWindow.document);
        if (!doc) continue;
        var iframeVideos = doc.querySelectorAll("video");
        if (iframeVideos.length > 0) return iframeVideos[0];
      } catch (e) { /* cross-origin iframe */ }
    }
    return null;
  }

  function waitForVideo(timeoutMs) {
    if (timeoutMs === undefined) timeoutMs = 15000;
    return new Promise(function (resolve) {
      var start = Date.now();
      var check = function () {
        var video = findBestVideo();
        if (video) { resolve(video); return; }
        if (Date.now() - start > timeoutMs) { resolve(null); return; }
        setTimeout(check, 300);
      };
      check();
    });
  }

  // ── Video observer (detects dynamically added videos) ─────────────────
  var currentVideo = null;

  /**
   * Registry of all shadow roots created on the page, including closed ones
   * that would otherwise be inaccessible via element.shadowRoot.
   */
  var knownShadowRoots = [];

  /**
   * Hook attachShadow to intercept every shadow root creation.
   * WHY: vkvideo.ru uses <vk-video-player> custom elements with Shadow DOM —
   * the <video> is invisible to document.querySelectorAll.  This hook
   * captures shadow roots as they are created (including closed ones).
   * Part of a 3‑layer detection strategy: attachShadow hook + play() hook
   * + MutationObserver.  See docs/decisions.md §2.
   */
  function hookAttachShadow() {
    // Check the wrapper currently on the prototype (works across sandboxes
    // because the wrapper function object is shared).
    if (Element.prototype.attachShadow.__votHooked) return;

    var original = Element.prototype.attachShadow;
    var wrapper = function (init) {
      var shadowRoot = original.call(this, init);
      var mode = (init && init.mode) || "open";
      log("Shadow root created (" + mode + ") by", this.tagName || "unknown");

      knownShadowRoots.push(shadowRoot);

      var shadowDebounceTimer = null;
      var shadowObserver = new MutationObserver(function () {
        if (shadowDebounceTimer) return;
        shadowDebounceTimer = setTimeout(function () {
          shadowDebounceTimer = null;
          var video = findBestVideo();
          if (video && video !== currentVideo) {
            currentVideo = video;
            log("Video changed (shadow mutation)");
            attachToVideo(video);
          }
        }, 250);
      });
      shadowObserver.observe(shadowRoot, { childList: true, subtree: true });

      setTimeout(function () {
        var video = findBestVideo();
        if (video && video !== currentVideo) {
          currentVideo = video;
          log("Video found in newly created shadow root (" + mode + ")");
          attachToVideo(video);
        }
      }, 50);

      return shadowRoot;
    };
    wrapper.__votHooked = true; // mark the wrapper itself
    Element.prototype.attachShadow = wrapper;
  }

/**
   * Hook HTMLVideoElement.prototype.play to catch videos that start playing,
   * even if they are hidden inside closed shadow roots or iframes we cannot
   * traverse.  This is the most reliable detection mechanism because every
   * video player must call play() at some point.
   */
  var _playDebounceTimer = null;

  function hookVideoPlay() {
    // Check the wrapper currently installed on the prototype.
    // __votPlayHooked is set on the WRAPPER after installation, so the
    // next sandbox that inspects the prototype sees the flag.
    if (HTMLVideoElement.prototype.play.__votPlayHooked) return;

    var originalPlay = HTMLVideoElement.prototype.play;
    var wrapper = function () {
      var video = this;
      if (video !== currentVideo &&
          video.nodeType === 1 &&
          video.classList &&
          video.classList.contains("player-media")) {
        if (_playDebounceTimer) return;
        _playDebounceTimer = setTimeout(function () {
          _playDebounceTimer = null;
        }, 500);
        log("Video.play() intercepted (player-media):", video);
        currentVideo = video;
        attachToVideo(video);
      }
      return originalPlay.apply(this, arguments);
    };
    wrapper.__votPlayHooked = true; // mark the wrapper itself
    HTMLVideoElement.prototype.play = wrapper;
    log("HTMLVideoElement.prototype.play hooked");
  }

  // ── Main ──────────────────────────────────────────────────────────────
  /**
   * Tampermonkey creates a fresh JS context for each SPA re‑injection.
   * DOM prototypes are per‑context copies — hooks from a previous injection
   * are NOT visible.  We install hooks EVERY time (overwrites stale wrappers,
   * re‑establishes observers).  See docs/decisions.md §10.
   */
  function main() {
    var isReboot = !!document.documentElement.getAttribute("data-vot-reboot");
    if (!isReboot) {
      log("Starting VK Subtitle Extractor (VOT-based) [document-start]");
    }
    // Always set the marker so subsequent re-injections are silent
    document.documentElement.setAttribute("data-vot-reboot", "1");

    // Install prototype hooks (always — overwrites previous sandbox's wrappers)
    hookAttachShadow();
    hookVideoPlay();

    startBodyReady();
  }

  function startBodyReady() {
    function onBodyReady() {
      // Overlay is created lazily by showOverlay()

      // Observe light DOM for video elements
      var domDebounceTimer = null;
      var observer = new MutationObserver(function () {
        if (domDebounceTimer) return;
        domDebounceTimer = setTimeout(function () {
          domDebounceTimer = null;
          var video = findBestVideo();
          if (video && video !== currentVideo) {
            currentVideo = video;
            log("Video changed (DOM mutation)");
            attachToVideo(video);
          }
        }, 250);
      });
      observer.observe(document.documentElement, {
        childList: true,
        subtree: true,
      });
      log("Video observer set up (with Shadow DOM + play() hook)");

      // Create subtitle list panel (in light DOM)
      createSubtitlePanel();

      // Start translation module (listens for overlay text changes)
      initTranslationModule();

      // Find initial video
      waitForVideo().then(function (video) {
        if (video) {
          currentVideo = video;
          attachToVideo(video);
        } else {
          log("No video found after timeout, waiting for observer");
        }
      }).catch(function (e) {
        warn("waitForVideo error:", e);
      });
    }

    if (document.body) {
      onBodyReady();
    } else {
      var bodyObserver = new MutationObserver(function () {
        if (document.body) {
          bodyObserver.disconnect();
          onBodyReady();
        }
      });
      bodyObserver.observe(document.documentElement, { childList: true, subtree: true });
    }
  }

  // ── Start immediately (document-start) ────────────────────────────────
  // At document-start, document.documentElement exists but body may not.
  // The main() function installs prototype hooks synchronously and defers
  // DOM-dependent work until body is available.
  try {
    main();
  } catch (e) {
    warn("init error:", e);
  }
})();