/**
 * extension/content/content.js — PassKeeper content script.
 *
 * 1. Detects login forms → notifies background (badge count).
 * 2. Injects a PassKeeper icon button OUTSIDE the DOM (position:fixed, tracked
 *    to the field via scroll/resize) into username AND password fields.
 *    This avoids breaking site layouts (flex/grid parents, React-controlled inputs).
 * 3. Clicking the icon OR focusing a decorated field shows a suggestion dropdown.
 * 4. "More options…" shows a second panel with vault/generator actions.
 * 5. Listens for DO_AUTOFILL from the popup → fills fields.
 * 6. Watches form submissions → shows save-credentials banner.
 */
(() => {
  "use strict";

  const PK_ATTR = "data-pk-decorated";
  const PK_BTN_CLASS = "__pk_btn__";
  const PK_DROPDOWN_ID = "__pk_dropdown__";
  const VAULT_URL = "https://pwkeeper.ngodanguyen.tech/vault";

  // Never inject on the PassKeeper vault itself — our own inputs would get decorated.
  const OWN_ORIGINS = ["pwkeeper.ngodanguyen.tech"];
  if (OWN_ORIGINS.includes(location.hostname)) return;

  let _bannerEl = null;
  let _hasNotifiedForm = false;
  let _formObserver = null;
  let _matchingItems = [];
  // Map from field element → its fixed-position icon button element
  const _fieldBtnMap = new WeakMap();

  // ── Helpers ──────────────────────────────────────────────────────────────────

  function escHtml(str) {
    // " and ' are both required: templates in this file use a mix
    // of double- and single-quoted attributes, and an unescaped quote of
    // either kind lets injected text break out of an attribute.
    // This copy previously escaped neither, while injecting attacker-influenced
    // values (site hostname, stored item names) into attributes.
    return String(str ?? "")
      .replace(/&/g, "&")
      .replace(/</g, "&lt;")
      .replace(/>/g, "&gt;")
      .replace(/"/g, "&quot;")
      .replace(/'/g, "&#39;");
  }

  /**
   * More robust visibility check than offsetParent (which fails for
   * position:fixed elements and some modern layouts).
   */
  function isVisible(el) {
    if (!el || !el.getBoundingClientRect) return false;
    if (el.disabled) return false;
    const rect = el.getBoundingClientRect();
    if (rect.width === 0 && rect.height === 0) return false;
    const style = window.getComputedStyle(el);
    if (
      style.display === "none" ||
      style.visibility === "hidden" ||
      style.opacity === "0"
    )
      return false;
    return true;
  }

  /**
   * Returns a debounced version of `fn` that waits `ms` milliseconds after
   * the last call before firing. Used to avoid re-rendering the dropdown on
   * every keystroke.
   */
  function _debounce(fn, ms) {
    var timer;
    return function () {
      var args = arguments;
      var ctx = this;
      clearTimeout(timer);
      timer = setTimeout(function () {
        fn.apply(ctx, args);
      }, ms);
    };
  }

  /**
   * True when this page is safe enough to put a stored credential into.
   *
   * The extension holds http://*\/* permission on purpose: a great many devices
   * that genuinely need a password manager — routers, NAS boxes, printers,
   * self-hosted admin panels — are only reachable over plain HTTP on the local
   * network, and dropping the permission would make PassKeeper useless exactly
   * where people reuse weak passwords most.
   *
   * What is NOT acceptable is filling a credential into a plaintext page on the
   * public internet, where anyone on the path can read it. Loopback and RFC1918
   * / RFC4193 / link-local addresses and .local names are treated as acceptable;
   * every other http:// origin gets a warning in the dropdown before the user
   * chooses an item.
   */
  function _isTrustworthyOrigin() {
    if (location.protocol === "https:" || location.protocol === "file:") return true;
    var h = (location.hostname || "").toLowerCase().replace(/^\[|\]$/g, "");

    if (h === "localhost" || h.endsWith(".localhost")) return true;
    // Reserved TLDs that cannot be registered publicly.
    if (/\.(local|lan|home|internal)$/.test(h)) return true;
    // RFC4193 unique-local / RFC4291 link-local IPv6.
    if (h === "::1") return true;
    if (/^f[cd][0-9a-f]{2}:/i.test(h) || /^fe80:/i.test(h)) return true;

    // IPv4 must match in FULL. Prefix checks like h.startsWith("127.") also
    // accept attacker-registrable names such as "127.0.0.1.evil.com", which
    // would silently suppress the insecure-page warning on a hostile site.
    var m = h.match(/^(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})$/);
    if (!m) return false;
    var o = m.slice(1).map(Number);
    if (o.some(function (n) { return n > 255; })) return false;
    if (o[0] === 127) return true;                              // loopback
    if (o[0] === 10) return true;                               // RFC1918
    if (o[0] === 192 && o[1] === 168) return true;              // RFC1918
    if (o[0] === 172 && o[1] >= 16 && o[1] <= 31) return true;  // RFC1918
    if (o[0] === 169 && o[1] === 254) return true;              // link-local
    return false;
  }

  /**
   * Prepend an unmissable warning to the dropdown on plaintext public pages.
   * Deliberately a warning and not a block: filling is always user-initiated,
   * and silently offering nothing would look like a broken extension.
   */
  function _insecureWarningRow() {
    if (_isTrustworthyOrigin()) return null;
    var row = document.createElement("div");
    Object.assign(row.style, {
      padding: "8px 12px",
      background: "#fdecea",
      color: "#b71c1c",
      borderBottom: "1px solid #f5c6cb",
      fontSize: "12px",
      lineHeight: "1.35",
    });
    row.textContent =
      "⚠ This page is not encrypted (http://). A credential filled here " +
      "can be read by anyone on the network.";
    return row;
  }

  function visiblePasswordFields() {
    return Array.from(
      document.querySelectorAll('input[type="password"]'),
    ).filter((el) => isVisible(el) && !el.disabled);
  }

  /**
   * Returns true only if the input field carries signals suggesting it
   * collects a credential (username / email / phone) — not a generic
   * text field such as a search box, full-name field, or address field.
   *
   * Scoring precedence:
   *  1. autocomplete="username"|"email"|"tel"  → definite YES
   *  2. Non-credential autocomplete value      → definite NO
   *  3. name / id / placeholder / aria-label contain a credential keyword → YES
   *  4. Otherwise                              → NO (do not decorate)
   */
  function _isLikelyUsernameField(el) {
    const CRED_HINTS = /user|email|mail|login|phone|tel|mobile|account/i;
    const ac = (el.getAttribute("autocomplete") || "").toLowerCase().trim();

    // Strongest positive signal.
    if (["username", "email", "tel"].includes(ac)) return true;

    // Definite negative signals (Chrome's autocomplete token set).
    //
    // "off" is deliberately NOT in this list. It says nothing about whether a
    // field holds a credential — routers, banks and admin panels set it on
    // login inputs precisely to discourage password managers, and every major
    // password manager (and Chrome itself, for password fields) ignores it.
    // Treating it as a negative signal meant a field as obvious as
    //   <input type="text" id="login_username" placeholder="Username"
    //          autocomplete="off">
    // was rejected before the keyword check below ever ran.
    //
    // Letting "off" fall through is safe: the field still has to carry a
    // credential keyword AND sit near a password input (_hasPasswordSibling)
    // before it is decorated.
    const NON_CRED_AC =
      /^(name|given-name|family-name|additional-name|honorific-prefix|honorific-suffix|organization|street-address|address-line[123]|address-level[1234]|country|country-name|postal-code|cc-|transaction-|language|bday|sex|url|photo|search|new-password|current-password|one-time-code)$/i;
    if (ac && NON_CRED_AC.test(ac)) return false;

    // Check name, id, placeholder, and aria-label for credential keywords.
    const attrs = [
      el.getAttribute("name") || "",
      el.getAttribute("id") || "",
      el.getAttribute("placeholder") || "",
      el.getAttribute("aria-label") || "",
    ].join(" ");

    if (!CRED_HINTS.test(attrs)) return false;

    // Final gate: require a password field to be nearby (same form, or within
    // 5 ancestor levels) — this prevents hooking standalone search / filter
    // inputs that happen to carry a name like "user" or "email".
    return _hasPasswordSibling(el);
  }

  /**
   * Returns true when `el` shares a form (or close ancestor) with at least one
   * visible password input. This is the key signal that we are on a login form,
   * not a generic site-search or profile page.
   */
  function _hasPasswordSibling(el) {
    // 1. Prefer the explicit <form> ancestor.
    const form =
      el.closest("form") || el.closest('[role="form"]');
    if (form) {
      return !!form.querySelector(
        'input[type="password"]:not([disabled])',
      );
    }
    // 2. No <form>? Walk up to 5 ancestor elements looking for a password input
    //    in any subtree (covers React/Vue apps that render outside <form>).
    let node = el.parentElement;
    for (let i = 0; i < 5 && node; i++, node = node.parentElement) {
      if (node.querySelector('input[type="password"]:not([disabled])')) {
        return true;
      }
    }
    // 3. Last resort: any visible password field on the entire page.
    //    Only accept this if there is exactly one password field — avoids
    //    false-positives on complex pages (account settings, checkout, etc.).
    const pwFields = visiblePasswordFields();
    return pwFields.length === 1;
  }

  function findUsernameField(pwField) {
    // Helper: accept email/tel inputs unconditionally; text inputs only when
    // they look like a genuine credential field.
    function isCredentialType(el) {
      if (el.type === "email" || el.type === "tel") return true;
      if (el.type === "text") return _isLikelyUsernameField(el);
      return false;
    }

    // 1. Walk backwards through all inputs in DOM order.
    const all = Array.from(document.querySelectorAll("input"));
    const idx = all.indexOf(pwField);
    for (let i = idx - 1; i >= 0; i--) {
      const el = all[i];
      if (!isVisible(el) || el.disabled) continue;
      if (isCredentialType(el)) return el;
    }

    // 2. Fallback: search within the same form / ancestor container.
    //    Prefer email inputs first, then scored text/tel inputs.
    const container =
      pwField.closest("form") ||
      pwField.closest('[role="form"]') ||
      pwField.parentElement;
    if (container) {
      const emailCandidate = container.querySelector(
        'input[type="email"]:not([disabled])',
      );
      if (emailCandidate && isVisible(emailCandidate)) return emailCandidate;

      const textTelInputs = Array.from(
        container.querySelectorAll(
          'input[type="text"]:not([disabled]), input[type="tel"]:not([disabled])',
        ),
      );
      const scored = textTelInputs.filter(
        (el) => isVisible(el) && _isLikelyUsernameField(el),
      );
      if (scored.length) return scored[0];
    }

    return null;
  }

  // ── Framework-compatible fill ─────────────────────────────────────────────────

  function fillField(el, value) {
    const nativeSet = Object.getOwnPropertyDescriptor(
      HTMLInputElement.prototype,
      "value",
    )?.set;
    if (nativeSet) nativeSet.call(el, value);
    else el.value = value;
    el.dispatchEvent(new Event("input", { bubbles: true }));
    el.dispatchEvent(new Event("change", { bubbles: true }));
  }

  function doAutofill(username, password, autologin) {
    const pwFields = visiblePasswordFields();
    if (!pwFields.length) return;
    const pwField = pwFields[0];
    const usernameField = findUsernameField(pwField);
    if (usernameField && username) fillField(usernameField, username);
    if (password) fillField(pwField, password);
    [usernameField, pwField].filter(Boolean).forEach((el) => {
      el.style.outline = "2px solid #c0392b";
      setTimeout(() => {
        el.style.outline = "";
      }, 1500);
    });
    // Autologin: submit automatically after filling.
    if (autologin) {
      setTimeout(function () {
        var form = pwField.closest("form");
        // Prefer clicking a real control so site-specific handlers (React, Vue,
        // inline onclick) fire — form.submit() bypasses them entirely.
        var control = _findSubmitControl(pwField);
        if (control) {
          control.click();
        } else if (form) {
          form.submit();
        }
      }, 400);
    }
  }

  // Controls that look like submits but would discard the login instead.
  var _NEGATIVE_CONTROL = /cancel|reset|back|close|forgot|register|sign\s*up|create/i;

  /**
   * Find the control that submits the login containing `pwField`.
   *
   * Autologin previously required a <form> and did nothing without one, so it
   * silently never worked on the many login UIs built from plain divs (the ASUS
   * router admin page submits with
   * <div class="button" onclick="preLogin();">Sign In</div>).
   *
   * Returns null when nothing convincing is found — better to leave the filled
   * form for the user than to click the wrong thing.
   */
  function _findSubmitControl(pwField) {
    var scope = pwField.closest("form") || pwField.closest('[role="form"]');
    if (scope) {
      var explicit = scope.querySelector('[type="submit"]:not([disabled])');
      if (explicit && isVisible(explicit)) return explicit;
    }

    // No form (or no explicit submit in it): search progressively wider
    // ancestors so the nearest plausible control wins.
    var node = scope || pwField.parentElement;
    for (var depth = 0; depth < 5 && node; depth++, node = node.parentElement) {
      var candidates = node.querySelectorAll(
        'button, [role="button"], [onclick], input[type="submit"], ' +
          'input[type="button"], div, a',
      );
      for (var i = 0; i < candidates.length; i++) {
        var el = candidates[i];
        if (el === pwField || el.disabled) continue;
        if (!_looksLikeSubmitControl(el)) continue;
        if (!isVisible(el)) continue;
        // Only leaf-ish controls — a wrapping div can carry a button class.
        if (el.querySelector("input, button")) continue;
        var label = (el.textContent || el.value || "").trim();
        if (label.length > 40) continue;
        if (_NEGATIVE_CONTROL.test(label)) continue;
        return el;
      }
    }
    return null;
  }

  // ── Icon button (fixed-position, outside the DOM tree of the field) ───────────

  /**
   * Position the icon button over the right edge of `field` using fixed coords.
   * This never touches the field's parent, so it can't break any layout.
   */
  function positionBtn(btn, field) {
    const rect = field.getBoundingClientRect();
    if (rect.width === 0) {
      btn.style.display = "none";
      return;
    }
    btn.style.display = "flex";
    btn.style.top = rect.top + rect.height / 2 - 13 + "px";
    btn.style.left = rect.right - 30 + "px";
  }

  // createIconBtn is defined in the Field decoration section below.

  // ── Suggestion dropdown ───────────────────────────────────────────────────────

  function removeDropdown() {
    const el = document.getElementById(PK_DROPDOWN_ID);
    if (el) el.remove();
  }

  /**
   * Build the dropdown anchored below `anchorField`.
   * Uses _matchingItems which is kept fresh via storage.onChanged listener.
   * `panel` is either 'credentials' (main list) or 'more' (options menu).
   */
  async function showDropdown(anchorField, pwField, filterText, panel) {
    removeDropdown();

    // Use module-level _matchingItems (kept fresh by storage.onChanged).
    // If still empty, try a direct storage read as last resort.
    var freshItems = _matchingItems;
    if (!freshItems.length) {
      try {
        var result = await chrome.storage.session.get("vault_items_cs");
        var all = (result && result.vault_items_cs) || [];
        freshItems = _filterForHost(all);
        if (freshItems.length) _matchingItems = freshItems;
      } catch (e) {}
    }

    const rect = anchorField.getBoundingClientRect();
    const dropWidth = Math.max(260, rect.width);

    const dropdown = document.createElement("div");
    dropdown.id = PK_DROPDOWN_ID;
    Object.assign(dropdown.style, {
      position: "fixed",
      top: rect.bottom + 4 + "px",
      left: rect.left + "px",
      width: dropWidth + "px",
      background: "#fff",
      border: "1px solid #dadce0",
      borderRadius: "10px",
      boxShadow: "0 6px 24px rgba(0,0,0,0.18)",
      zIndex: "2147483647",
      fontFamily:
        "-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif",
      fontSize: "13px",
      overflow: "hidden",
    });

    var warning = _insecureWarningRow();
    if (warning) dropdown.appendChild(warning);

    if (panel === "more") {
      buildMorePanel(dropdown, anchorField, pwField, freshItems, filterText);
    } else {
      buildCredentialsPanel(
        dropdown,
        anchorField,
        pwField,
        freshItems,
        filterText,
      );
    }

    document.body.appendChild(dropdown);

    // Reposition on scroll/resize so it stays under the field.
    function reposition() {
      const r = anchorField.getBoundingClientRect();
      dropdown.style.top = r.bottom + 4 + "px";
      dropdown.style.left = r.left + "px";
    }
    window.addEventListener("scroll", reposition, {
      passive: true,
      capture: true,
    });
    window.addEventListener("resize", reposition, { passive: true });

    // Close on outside mousedown or keyboard navigation.
    function onOutside(e) {
      const btn = _fieldBtnMap.get(anchorField);
      if (
        dropdown.contains(e.target) ||
        e.target === anchorField ||
        (btn && btn.contains(e.target))
      )
        return;
      removeDropdown();
      document.removeEventListener("mousedown", onOutside, true);
      document.removeEventListener("keydown", onKeydown, true);
    }

    // Keyboard navigation: Arrow keys move focus between rows; Enter selects; Escape closes.
    function onKeydown(e) {
      if (e.key === "Escape") {
        removeDropdown();
        document.removeEventListener("mousedown", onOutside, true);
        document.removeEventListener("keydown", onKeydown, true);
        return;
      }
      if (e.key !== "ArrowDown" && e.key !== "ArrowUp" && e.key !== "Enter")
        return;

      // Only navigate credential rows (divs with data-pk-row attribute).
      var rows = Array.from(dropdown.querySelectorAll("[data-pk-row]"));
      if (!rows.length) return;

      e.preventDefault(); // prevent the field from scrolling the page

      if (e.key === "Enter") {
        var focused = dropdown.querySelector("[data-pk-row].pk-row-focused");
        if (focused && focused._pkFill) focused._pkFill();
        return;
      }

      var currentIdx = rows.findIndex(function (r) {
        return r.classList.contains("pk-row-focused");
      });
      var nextIdx;
      if (e.key === "ArrowDown") {
        nextIdx = currentIdx < rows.length - 1 ? currentIdx + 1 : 0;
      } else {
        nextIdx = currentIdx > 0 ? currentIdx - 1 : rows.length - 1;
      }

      rows.forEach(function (r) {
        r.classList.remove("pk-row-focused");
        r.style.background = "";
      });
      rows[nextIdx].classList.add("pk-row-focused");
      rows[nextIdx].style.background = "#e8f0fe";
      rows[nextIdx].scrollIntoView({ block: "nearest" });
    }

    setTimeout(function () {
      document.addEventListener("mousedown", onOutside, true);
      document.addEventListener("keydown", onKeydown, true);
    }, 0);
  }

  // ── Credentials panel (main list) ────────────────────────────────────────────

  function buildCredentialsPanel(
    dropdown,
    anchorField,
    pwField,
    items,
    filterText,
  ) {
    const q = (filterText || "").trim().toLowerCase();
    const filtered = q
      ? items.filter(function (item) {
          return (
            ((item.plain && item.plain.username) || "")
              .toLowerCase()
              .includes(q) || item.name.toLowerCase().includes(q)
          );
        })
      : items;

    const usernameField =
      anchorField.type === "password"
        ? findUsernameField(anchorField)
        : anchorField;

    if (filtered.length === 0) {
      // No saved passwords — show a minimal "no items" row + More options.
      const empty = document.createElement("div");
      Object.assign(empty.style, {
        padding: "12px 14px",
        color: "#5f6368",
        fontSize: "12px",
      });
      empty.textContent = q
        ? "No matches found."
        : "No saved passwords for this site.";
      dropdown.appendChild(empty);
    } else {
      filtered.forEach(function (item) {
        const row = document.createElement("div");
        row.setAttribute("data-pk-row", "1"); // enables keyboard navigation
        Object.assign(row.style, {
          display: "flex",
          alignItems: "center",
          gap: "10px",
          padding: "10px 14px",
          cursor: "pointer",
          transition: "background 0.1s",
        });
        row.onmouseenter = function () {
          if (!row.classList.contains("pk-row-focused"))
            row.style.background = "#f1f3f4";
        };
        row.onmouseleave = function () {
          if (!row.classList.contains("pk-row-focused"))
            row.style.background = "";
        };

        // Derive display hostname.
        var siteHost = item.name;
        if (item.plain && item.plain.url) {
          try {
            siteHost = new URL(item.plain.url).hostname.replace(/^www\./, "");
          } catch (e) {}
        }

        var username = escHtml((item.plain && item.plain.username) || "");
        var site = escHtml(siteHost);

        // Lock icon avatar — filled dark circle like the screenshot.
        var avatar = document.createElement("div");
        Object.assign(avatar.style, {
          width: "34px",
          height: "34px",
          borderRadius: "50%",
          background: "#1a1a2e",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          flexShrink: "0",
        });
        avatar.innerHTML =
          '<svg width="16" height="16" viewBox="0 0 24 24" fill="none">' +
          '<rect x="3" y="10" width="18" height="12" rx="2" fill="#fff"/>' +
          '<path d="M8 10V7a4 4 0 018 0v3" stroke="#fff" stroke-width="2" stroke-linecap="round" fill="none"/>' +
          "</svg>";

        // Text.
        var text = document.createElement("div");
        text.style.cssText = "flex:1;min-width:0;";
        text.innerHTML =
          '<div style="font-size:13px;color:#202124;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">' +
          site +
          "</div>" +
          (username
            ? '<div style="font-size:11px;color:#5f6368;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;">' +
              username +
              "</div>"
            : "");

        // Edit pencil.
        var editBtn = document.createElement("button");
        Object.assign(editBtn.style, {
          background: "none",
          border: "none",
          cursor: "pointer",
          padding: "5px",
          color: "#1a73e8",
          display: "flex",
          alignItems: "center",
          flexShrink: "0",
          borderRadius: "4px",
        });
        editBtn.title = "Edit in PassKeeper";
        editBtn.innerHTML =
          '<svg width="16" height="16" viewBox="0 0 24 24" fill="none">' +
          '<path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7" stroke="#1a73e8" stroke-width="1.8" stroke-linecap="round"/>' +
          '<path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z" stroke="#1a73e8" stroke-width="1.8" stroke-linejoin="round"/>' +
          "</svg>";
        editBtn.addEventListener("mousedown", function (e) {
          e.preventDefault();
          e.stopPropagation();
          chrome.runtime
            .sendMessage({ type: "OPEN_VAULT" })
            .catch(function () {});
          removeDropdown();
        });

        row.appendChild(avatar);
        row.appendChild(text);
        row.appendChild(editBtn);

        // Shared fill action — used by both mousedown and keyboard Enter.
        function doFill() {
          if (usernameField && item.plain && item.plain.username)
            fillField(usernameField, item.plain.username);
          if (pwField && item.plain && item.plain.password)
            fillField(pwField, item.plain.password);

          // ✓ Filled flash: replace row content briefly before closing.
          row.innerHTML =
            '<div style="display:flex;align-items:center;gap:8px;color:#16a34a;font-size:13px;font-weight:600;padding:0 4px;">' +
            '<svg width="16" height="16" viewBox="0 0 24 24" fill="none">' +
            '<path d="M5 13l4 4L19 7" stroke="#16a34a" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>' +
            "</svg>Filled</div>";
          row.style.background = "#f0fdf4";

          setTimeout(function () {
            removeDropdown();
            if (pwField && anchorField !== pwField) pwField.focus();
          }, 600);
        }

        row.addEventListener("mousedown", function (e) {
          if (e.target === editBtn || editBtn.contains(e.target)) return;
          e.preventDefault();
          doFill();
        });

        // Expose doFill for the keyboard Enter handler via a custom property.
        row._pkFill = doFill;

        dropdown.appendChild(row);
      });
    }

    // Divider + "More options…" footer — always shown.
    var divider = document.createElement("div");
    divider.style.cssText = "height:1px;background:#e8eaed;";
    dropdown.appendChild(divider);

    var more = document.createElement("div");
    Object.assign(more.style, {
      display: "flex",
      alignItems: "center",
      gap: "10px",
      padding: "10px 14px",
      cursor: "pointer",
      color: "#202124",
      fontSize: "13px",
      transition: "background 0.1s",
    });
    more.onmouseenter = function () {
      more.style.background = "#f1f3f4";
    };
    more.onmouseleave = function () {
      more.style.background = "";
    };
    more.innerHTML =
      '<svg width="16" height="16" viewBox="0 0 24 24" fill="none">' +
      '<circle cx="5"  cy="12" r="1.8" fill="#5f6368"/>' +
      '<circle cx="12" cy="12" r="1.8" fill="#5f6368"/>' +
      '<circle cx="19" cy="12" r="1.8" fill="#5f6368"/>' +
      "</svg>" +
      '<span style="flex:1;">More options\u2026</span>';
    more.addEventListener("mousedown", function (e) {
      e.preventDefault();
      showDropdown(anchorField, pwField, filterText, "more");
    });
    dropdown.appendChild(more);
  }

  // ── More options panel ────────────────────────────────────────────────────────

  function buildMorePanel(dropdown, anchorField, pwField, items, filterText) {
    // Back header.
    var backRow = document.createElement("div");
    Object.assign(backRow.style, {
      display: "flex",
      alignItems: "center",
      gap: "6px",
      padding: "10px 14px",
      cursor: "pointer",
      color: "#1a73e8",
      fontSize: "13px",
      fontWeight: "600",
      borderBottom: "1px solid #e8eaed",
      transition: "background 0.1s",
    });
    backRow.onmouseenter = function () {
      backRow.style.background = "#f1f3f4";
    };
    backRow.onmouseleave = function () {
      backRow.style.background = "";
    };
    backRow.innerHTML =
      '<svg width="16" height="16" viewBox="0 0 24 24" fill="none">' +
      '<path d="M15 18l-6-6 6-6" stroke="#1a73e8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>' +
      "</svg> Back";
    backRow.addEventListener("mousedown", function (e) {
      e.preventDefault();
      showDropdown(anchorField, pwField, filterText, "credentials");
    });
    dropdown.appendChild(backRow);

    // Menu items matching the screenshot.
    var menuItems = [
      {
        icon: '<path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" stroke="#5f6368" stroke-width="1.8" fill="none"/><line x1="12" y1="9" x2="12" y2="13" stroke="#5f6368" stroke-width="1.8" stroke-linecap="round"/><line x1="12" y1="17" x2="12.01" y2="17" stroke="#5f6368" stroke-width="2" stroke-linecap="round"/>',
        label: "Report a problem",
        action: function () {
          chrome.runtime
            .sendMessage({ type: "OPEN_VAULT" })
            .catch(function () {});
          removeDropdown();
        },
      },
      {
        icon: '<rect x="3" y="9" width="18" height="12" rx="2" stroke="#5f6368" stroke-width="1.8" fill="none"/><path d="M8 9V6a4 4 0 018 0v3" stroke="#5f6368" stroke-width="1.8" stroke-linecap="round" fill="none"/><circle cx="12" cy="15" r="1.5" fill="#5f6368"/>',
        label: "Generate a password",
        chevron: true,
        action: function () {
          chrome.runtime
            .sendMessage({ type: "OPEN_GENERATOR" })
            .catch(function () {});
          removeDropdown();
        },
      },
      {
        icon: '<rect x="2" y="3" width="20" height="14" rx="2" stroke="#5f6368" stroke-width="1.8" fill="none"/><path d="M8 21h8M12 17v4" stroke="#5f6368" stroke-width="1.8" stroke-linecap="round"/>',
        label: "Open my vault",
        action: function () {
          chrome.runtime
            .sendMessage({ type: "OPEN_VAULT" })
            .catch(function () {});
          removeDropdown();
        },
      },
    ];

    menuItems.forEach(function (item) {
      var row = document.createElement("div");
      Object.assign(row.style, {
        display: "flex",
        alignItems: "center",
        gap: "12px",
        padding: "11px 14px",
        cursor: "pointer",
        color: "#202124",
        fontSize: "13px",
        transition: "background 0.1s",
        borderBottom: "1px solid #f3f4f6",
      });
      row.onmouseenter = function () {
        row.style.background = "#f1f3f4";
      };
      row.onmouseleave = function () {
        row.style.background = "";
      };

      var iconWrap = document.createElement("div");
      iconWrap.style.cssText =
        "width:18px;height:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0;";
      iconWrap.innerHTML =
        '<svg width="18" height="18" viewBox="0 0 24 24">' +
        item.icon +
        "</svg>";

      var label = document.createElement("span");
      label.style.cssText = "flex:1;";
      label.textContent = item.label;

      row.appendChild(iconWrap);
      row.appendChild(label);

      if (item.chevron) {
        var chev = document.createElement("div");
        chev.innerHTML =
          '<svg width="14" height="14" viewBox="0 0 24 24" fill="none">' +
          '<path d="M9 18l6-6-6-6" stroke="#5f6368" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>' +
          "</svg>";
        row.appendChild(chev);
      } else {
        var extIcon = document.createElement("div");
        extIcon.innerHTML =
          '<svg width="14" height="14" viewBox="0 0 24 24" fill="none">' +
          '<path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6" stroke="#5f6368" stroke-width="1.8" stroke-linecap="round"/>' +
          '<path d="M15 3h6v6M10 14L21 3" stroke="#5f6368" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>' +
          "</svg>";
        row.appendChild(extIcon);
      }

      row.addEventListener("mousedown", function (e) {
        e.preventDefault();
        item.action();
      });

      dropdown.appendChild(row);
    });
  }

  // ── Field decoration ──────────────────────────────────────────────────────────

  // Map from field element → AbortController so we can cancel its listeners on re-decoration.
  const _fieldAbortMap = new WeakMap();

  function decorateField(field, pwField) {
    if (field.getAttribute(PK_ATTR)) return;
    field.setAttribute(PK_ATTR, "1");

    // Cancel any previous listeners on this field.
    const prevAC = _fieldAbortMap.get(field);
    if (prevAC) prevAC.abort();
    const ac = new AbortController();
    _fieldAbortMap.set(field, ac);
    const sig = ac.signal;

    createIconBtn(field, pwField, sig);
  }

  function createIconBtn(field, pwField, abortSignal) {
    const btn = document.createElement("button");
    btn.type = "button";
    btn.className = PK_BTN_CLASS;
    btn.title = "PassKeeper autofill";
    btn.setAttribute("aria-label", "Autofill with PassKeeper");
    btn.style.cssText = [
      "position:fixed",
      "width:26px",
      "height:26px",
      "background:#c0392b",
      "border:none",
      "border-radius:5px",
      "cursor:pointer",
      "display:flex",
      "align-items:center",
      "justify-content:center",
      "z-index:2147483646",
      "padding:0",
      "box-shadow:0 1px 4px rgba(0,0,0,0.3)",
      "transition:background 0.15s",
    ].join(";");

    btn.innerHTML =
      '<svg width="14" height="14" viewBox="0 0 24 24" fill="none">' +
      '<rect x="3" y="9" width="18" height="12" rx="2" stroke="#fff" stroke-width="2"/>' +
      '<path d="M8 9V6a4 4 0 018 0v3" stroke="#fff" stroke-width="2" stroke-linecap="round"/>' +
      '<circle cx="12" cy="15" r="1.5" fill="#fff"/>' +
      "</svg>";

    btn.addEventListener("mouseenter", function () {
      btn.style.background = "#a93226";
    });
    btn.addEventListener("mouseleave", function () {
      btn.style.background = "#c0392b";
    });

    positionBtn(btn, field);
    document.body.appendChild(btn);
    _fieldBtnMap.set(field, btn);

    // Remove the button when the AbortController fires (re-decoration).
    abortSignal.addEventListener("abort", function () {
      btn.remove();
      _fieldBtnMap.delete(field);
    });

    // Keep button tracked as page scrolls/resizes.
    function reposition() {
      if (document.body.contains(btn)) positionBtn(btn, field);
    }
    window.addEventListener("scroll", reposition, {
      passive: true,
      signal: abortSignal,
    });
    window.addEventListener("resize", reposition, {
      passive: true,
      signal: abortSignal,
    });

    // ── All event handlers read _matchingItems at call time, never from closure ──

    // Show dropdown on focus — reads vault_items fresh from storage each time.
    field.addEventListener(
      "focus",
      function () {
        showDropdown(field, pwField, field.value, "credentials");
      },
      { signal: abortSignal },
    );

    // Re-filter as user types — debounced to avoid rebuilding the dropdown
    // on every single keystroke (noticeable on large vaults or slow machines).
    var _debouncedShow = _debounce(function () {
      showDropdown(field, pwField, field.value, "credentials");
    }, 150);
    field.addEventListener("input", _debouncedShow, { signal: abortSignal });

    // Dim button when field loses focus and no dropdown is open.
    field.addEventListener(
      "blur",
      function () {
        setTimeout(function () {
          if (!document.getElementById(PK_DROPDOWN_ID))
            btn.style.opacity = "0.4";
        }, 150);
      },
      { signal: abortSignal },
    );

    field.addEventListener(
      "focus",
      function () {
        btn.style.opacity = "1";
      },
      { signal: abortSignal },
    );

    // Icon click: toggle dropdown.
    btn.addEventListener("mousedown", function (e) {
      e.preventDefault();
      e.stopPropagation();
      if (document.getElementById(PK_DROPDOWN_ID)) {
        removeDropdown();
      } else {
        showDropdown(field, pwField, field.value, "credentials");
      }
    });

    return btn;
  }

  /**
   * Decorate all visible password (and paired username) fields with the PassKeeper
   * icon button.
   *
   * @param {Array|null} knownItems  When the caller already holds the correct
   *   filtered item list (e.g. from a storage.onChanged newValue or a VAULT_UPDATED
   *   message payload), pass it here to skip the redundant storage read.
   *   Pass nothing/undefined to let this function read storage itself.
   */
  async function decorateFields(knownItems) {
    // Fast-path: if there are no password fields anywhere on the page, there is
    // nothing to decorate. This prevents false-positive hooks on pages with
    // standalone text inputs (search bars, filter fields, etc.).
    if (!visiblePasswordFields().length) return;

    if (knownItems != null) {
      // Caller supplied pre-filtered items — trust them, skip the storage read.
      _matchingItems = knownItems;
      console.log(
        "[PassKeeper] decorateFields (inline): host=" +
          location.hostname.replace(/^www\./, "") +
          ", matched=" +
          _matchingItems.length,
      );
    } else {
      // Read from chrome.storage.session — memory-only, cleared on browser close.
      // Decrypted vault data must never be written to persistent (local) storage.
      var all = [];
      try {
        var result = await chrome.storage.session.get("vault_items_cs");
        all = (result && result.vault_items_cs) || [];
      } catch (e) {}
      _matchingItems = _filterForHost(all);
      console.log(
        "[PassKeeper] decorateFields (storage): host=" +
          location.hostname.replace(/^www\./, "") +
          ", matched=" +
          _matchingItems.length +
          " of " +
          all.length +
          " items",
      );
    }

    // Decorate every visible password field and its paired username field.
    visiblePasswordFields().forEach(function (pwField) {
      var usernameField = findUsernameField(pwField);
      if (usernameField) decorateField(usernameField, pwField);
      decorateField(pwField, pwField);
    });
  }

  // ── Vault item helpers ────────────────────────────────────────────────────────

  /**
   * Normalise a stored URL string so it is always parseable by `new URL()`.
   * Handles bare domains ("github.com"), protocol-relative ("//github.com"),
   * and fully-formed URLs ("https://github.com") identically.
   */
  function _normaliseUrl(raw) {
    if (!raw) return null;
    var s = raw.trim();
    if (/^https?:\/\//i.test(s)) return s; // already has a scheme
    if (s.startsWith("//")) return "https:" + s; // protocol-relative
    return "https://" + s; // bare domain or path
  }

  /**
   * Select the stored items whose URL belongs to the page we are on.
   *
   * Matching is by registrable domain (PkPsl.isSameSite), NOT by suffix
   * comparison. The previous test was:
   *
   *     h === host || h.endsWith("." + host) || host.endsWith("." + h)
   *
   * which had no notion of a public suffix, so a credential saved for
   * victim.github.io was offered on evil.github.io, and one saved for a bare
   * TLD was offered everywhere under it. Surfacing a match on an attacker's
   * neighbouring subdomain defeats the phishing resistance that is most of the
   * point of a password manager.
   *
   * If psl.js somehow failed to load we fall back to exact hostname equality —
   * strict, so a load failure loses matches rather than leaking credentials.
   */
  function _filterForHost(items) {
    var host = location.hostname;
    var sameSite =
      typeof PkPsl !== "undefined" && PkPsl && PkPsl.isSameSite
        ? PkPsl.isSameSite
        : function (a, b) {
            return String(a).toLowerCase() === String(b).toLowerCase();
          };

    return (items || []).filter(function (item) {
      if (item.item_type !== "password" || !(item.plain && item.plain.url))
        return false;
      try {
        var normalised = _normaliseUrl(item.plain.url);
        if (!normalised) return false;
        return sameSite(new URL(normalised).hostname, host);
      } catch (e) {
        console.warn(
          "[PassKeeper] _filterForHost: could not parse URL:",
          item.plain.url,
          e.message,
        );
        return false;
      }
    });
  }

  // ── Form detection ────────────────────────────────────────────────────────────

  function notifyFormDetected() {
    if (_hasNotifiedForm) return;
    if (!visiblePasswordFields().length) return;
    _hasNotifiedForm = true;
    chrome.runtime
      .sendMessage({ type: "FORMS_DETECTED" })
      .catch(function () {});
  }

  // ── Duplicate detection ───────────────────────────────────────────────────────

  async function classifyCredentials(username, password) {
    var all = [];
    try {
      var result = await chrome.storage.session.get("vault_items_cs");
      all = (result && result.vault_items_cs) || [];
    } catch (e) {
      return "new";
    }
    if (!all.length) return "new";

    var siteItems = _filterForHost(all);
    if (!siteItems.length) return "new";
    var exactMatch = siteItems.some(function (item) {
      return (
        item.plain &&
        item.plain.username === username &&
        item.plain.password === password
      );
    });
    return exactMatch ? "same" : "updated";
  }

  // ── Save blocklist ────────────────────────────────────────────────────────────

  const BLOCKLIST_KEY = "save_blocklist";

  async function isBlocked(hostname) {
    try {
      var result = await chrome.storage.local.get(BLOCKLIST_KEY);
      var list = (result && result[BLOCKLIST_KEY]) || [];
      return list.indexOf(hostname) !== -1;
    } catch (e) {
      return false;
    }
  }

  async function addToBlocklist(hostname) {
    try {
      var result = await chrome.storage.local.get(BLOCKLIST_KEY);
      var list = (result && result[BLOCKLIST_KEY]) || [];
      if (list.indexOf(hostname) === -1) {
        list.push(hostname);
        await chrome.storage.local.set({ [BLOCKLIST_KEY]: list });
        console.log("[PassKeeper] Added to save blocklist:", hostname);
      }
    } catch (e) {}
  }

  // ── Auto-save banner ──────────────────────────────────────────────────────────

  function showSaveBanner(username, password, credentialState) {
    if (_bannerEl) _bannerEl.remove();

    var banner = document.createElement("div");
    banner.id = "__pk_save_banner__";
    Object.assign(banner.style, {
      position: "fixed",
      top: "12px",
      right: "12px",
      zIndex: "2147483647",
      background: "#ffffff",
      border: "1px solid #e2e8f0",
      borderRadius: "10px",
      boxShadow: "0 8px 30px rgba(0,0,0,0.15)",
      padding: "14px 16px 12px",
      fontFamily:
        "-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif",
      fontSize: "13px",
      color: "#1a1a2e",
      maxWidth: "300px",
      minWidth: "240px",
    });

    var site = escHtml(location.hostname);
    var user = escHtml(username);
    var title =
      credentialState === "updated"
        ? "Update in PassKeeper?"
        : "Save to PassKeeper?";
    // Default site name: prefer page title (trimmed to 60 chars), fall back to hostname.
    var defaultSiteName =
      (document.title || "").trim().slice(0, 60) || location.hostname;

    banner.innerHTML =
      '<div style="display:flex;align-items:center;gap:8px;margin-bottom:10px;">' +
      '<svg width="18" height="18" viewBox="0 0 24 24" fill="none"><rect x="3" y="9" width="18" height="12" rx="2" stroke="#c0392b" stroke-width="1.8"/><path d="M8 9V6a4 4 0 018 0v3" stroke="#c0392b" stroke-width="1.8" stroke-linecap="round"/></svg>' +
      '<strong style="flex:1;font-size:13px;color:#111827;">' +
      escHtml(title) +
      "</strong>" +
      '<button id="__pk_close__" style="background:none;border:none;cursor:pointer;font-size:18px;color:#9ca3af;line-height:1;padding:0;">\xd7</button>' +
      "</div>" +
      '<div style="margin-bottom:8px;">' +
      '<label style="display:block;font-size:11px;color:#6b7280;margin-bottom:3px;">Site name</label>' +
      '<input id="__pk_site_name__" type="text" value="' +
      escHtml(defaultSiteName) +
      '"' +
      ' style="width:100%;box-sizing:border-box;padding:5px 8px;border:1px solid #d1d5db;border-radius:6px;font-size:12px;color:#111827;outline:none;">' +
      "</div>" +
      '<p style="color:#6b7280;font-size:12px;margin-bottom:10px;">' +
      '<strong style="color:#111827;">' +
      user +
      '</strong> on <strong style="color:#111827;">' +
      site +
      "</strong>" +
      "</p>" +
      '<div style="display:flex;gap:8px;margin-bottom:8px;">' +
      '<button id="__pk_save__" style="flex:1;padding:7px 0;background:#c0392b;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:12px;font-weight:600;">Save</button>' +
      '<button id="__pk_skip__" style="flex:1;padding:7px 0;background:transparent;color:#374151;border:1px solid #d1d5db;border-radius:6px;cursor:pointer;font-size:12px;">Not now</button>' +
      "</div>" +
      '<button id="__pk_never__" style="width:100%;padding:5px 0;background:transparent;color:#9ca3af;border:none;cursor:pointer;font-size:11px;text-align:center;">Never ask for ' +
      site +
      "</button>";

    document.body.appendChild(banner);
    _bannerEl = banner;

    var dismiss = function () {
      if (_bannerEl === banner) {
        banner.remove();
        _bannerEl = null;
      }
    };
    banner.querySelector("#__pk_close__").addEventListener("click", dismiss);
    banner.querySelector("#__pk_skip__").addEventListener("click", dismiss);
    banner.querySelector("#__pk_save__").addEventListener("click", function () {
      var siteName =
        (banner.querySelector("#__pk_site_name__").value || "").trim() ||
        location.hostname;
      console.log(
        "[PassKeeper] User chose to save credentials for",
        location.hostname,
        "— site name:",
        siteName,
      );
      chrome.runtime
        .sendMessage({
          type: "SAVE_CREDENTIALS",
          data: {
            url: location.href,
            siteName: siteName,
            username: username,
            password: password,
          },
        })
        .catch(function () {});
      dismiss();
    });
    banner
      .querySelector("#__pk_never__")
      .addEventListener("click", function () {
        addToBlocklist(location.hostname);
        dismiss();
      });
  }

  // ── Credential capture / save prompt ─────────────────────────────

  // Guards against two triggers firing for the same login (e.g. a click handler
  // that also submits a form). Cleared after a short window.
  var _captureCooldown = false;

  /**
   * Collect the credentials currently entered within `scope` and offer to save
   * them. `scope` is the <form> for a real submit, or the document for the
   * fallback triggers below.
   */
  async function maybeCaptureCredentials(scope) {
    if (_captureCooldown) return;

    var root = scope || document;
    var pwField = Array.prototype.find.call(
      root.querySelectorAll('input[type="password"]:not([disabled])'),
      function (el) {
        return isVisible(el) && el.value;
      },
    );
    if (!pwField) return;

    var userField =
      findUsernameField(pwField) ||
      root.querySelector('input[type="email"]:not([disabled])') ||
      root.querySelector('input[type="text"]:not([disabled])');

    var username =
      (userField && userField.value && userField.value.trim()) || "";
    var password = pwField.value;
    if (!username || !password) return;

    _captureCooldown = true;
    setTimeout(function () {
      _captureCooldown = false;
    }, 2000);

    removeDropdown();

    // Check blocklist before doing anything else.
    if (await isBlocked(location.hostname)) {
      console.log(
        "[PassKeeper] Site is blocklisted, skipping save banner:",
        location.hostname,
      );
      return;
    }

    var credentialState = await classifyCredentials(username, password);
    console.log(
      "[PassKeeper] Credential state for",
      location.hostname,
      "→",
      credentialState,
    );
    if (credentialState === "same") return;

    setTimeout(function () {
      showSaveBanner(username, password, credentialState);
    }, 500);
  }

  /**
   * Does this element look like the control that submits a login?
   *
   * Needed because many login UIs never use a <form> at all — the ASUS router
   * admin page, for example, submits with
   *   <div class="button" onclick="preLogin();">Sign In</div>
   * so no "submit" event is ever dispatched and the save prompt never appeared.
   */
  function _looksLikeSubmitControl(el) {
    if (!el || !el.tagName) return false;
    var tag = el.tagName.toUpperCase();
    if (tag === "BUTTON") return true;
    if (tag === "INPUT" && /^(submit|button|image)$/i.test(el.type)) return true;
    if (el.getAttribute("role") === "button") return true;
    // Non-semantic controls: an inline click handler, or a button-ish class.
    if (el.hasAttribute("onclick")) return true;
    var cls = (el.getAttribute("class") || "").toLowerCase();
    return /(^|[\s_-])(btn|button|submit|login|signin|sign-in)([\s_-]|$)/.test(cls);
  }

  function watchSubmissions() {
    // 1. Real form submits.
    document.addEventListener(
      "submit",
      function (e) {
        maybeCaptureCredentials(e.target);
      },
      true,
    );

    // 2. Clicks on anything that looks like a submit control. Required for the
    //    common case of a login UI built without a <form>, where no submit
    //    event fires and the save prompt would otherwise never appear.
    document.addEventListener(
      "click",
      function (e) {
        var node = e.target;
        for (var i = 0; i < 5 && node && node !== document; i++) {
          if (_looksLikeSubmitControl(node)) {
            // Let the page's own handler run first.
            setTimeout(function () {
              maybeCaptureCredentials(document);
            }, 0);
            return;
          }
          node = node.parentElement;
        }
      },
      true,
    );

    // 3. Enter pressed inside a credential field — the other way such forms
    //    get submitted without a <form>.
    document.addEventListener(
      "keydown",
      function (e) {
        if (e.key !== "Enter") return;
        var el = e.target;
        if (!el || el.tagName !== "INPUT") return;
        if (el.type !== "password" && !_isLikelyUsernameField(el)) return;
        setTimeout(function () {
          maybeCaptureCredentials(document);
        }, 0);
      },
      true,
    );
  }

  // ── Message listener ──────────────────────────────────────────────────────────

  chrome.runtime.onMessage.addListener(function (msg, _sender, sendResponse) {
    if (msg.type === "DO_AUTOFILL") {
      doAutofill(msg.username, msg.password, !!msg.autologin);
      sendResponse({ ok: true });
    }
    if (msg.type === "VAULT_UPDATED") {
      // Items arrive in the message payload. The source of truth is
      // chrome.storage.session (vault_items_cs), which was already written by
      // the popup before this message was sent.
      var allItems = msg.vault_items || [];
      var matched = allItems.length ? _filterForHost(allItems) : null;
      if (matched !== null) {
        _matchingItems = matched;
        console.log(
          "[PassKeeper] VAULT_UPDATED (message): matched=" +
            _matchingItems.length +
            " of " +
            allItems.length,
        );
      }
      // Re-decorate, passing pre-filtered items so decorateFields skips the
      // storage read when the message payload was non-empty.
      document.querySelectorAll("[" + PK_ATTR + "]").forEach(function (el) {
        var ac = _fieldAbortMap.get(el);
        if (ac) ac.abort();
        el.removeAttribute(PK_ATTR);
      });
      document.querySelectorAll("." + PK_BTN_CLASS).forEach(function (el) {
        el.remove();
      });
      removeDropdown();
      decorateFields(matched);
    }
    return false;
  });

  // ── Init ──────────────────────────────────────────────────────────────────────

  function init() {
    notifyFormDetected();
    decorateFields();
    watchSubmissions();

    // React instantly when the popup writes fresh vault data to session storage.
    // This fires in the same tick as the write — no message delivery required.
    chrome.storage.onChanged.addListener(function (changes, area) {
      if (area === "session" && changes.vault_items_cs) {
        var allItems = changes.vault_items_cs.newValue || [];
        var matched = _filterForHost(allItems);
        _matchingItems = matched;
        console.log(
          "[PassKeeper] storage.onChanged: matched=" +
            matched.length +
            " of " +
            allItems.length +
            " items",
        );
        // Re-decorate, passing the already-filtered list so decorateFields
        // skips a redundant storage.session.get() call.
        document.querySelectorAll("[" + PK_ATTR + "]").forEach(function (el) {
          var ac = _fieldAbortMap.get(el);
          if (ac) ac.abort();
          el.removeAttribute(PK_ATTR);
        });
        document.querySelectorAll("." + PK_BTN_CLASS).forEach(function (el) {
          el.remove();
        });
        removeDropdown();
        decorateFields(matched);
      }
    });

    // Debounce + narrow the MutationObserver: only re-scan when something that
    // looks like a form input or a whole subtree with inputs was added/removed.
    // This prevents constant re-scanning on SPA re-renders (tooltip shows,
    // React state updates, etc.) that don't touch login form elements.
    var _mutationTimer = null;
    _formObserver = new MutationObserver(function (mutations) {
      // Ignore mutations caused by the extension's own injected elements.
      var hasRelevantChange = mutations.some(function (m) {
        // addedNodes contains an <input>, <form>, or a subtree with either.
        return Array.from(m.addedNodes).some(function (node) {
          if (!node || node.nodeType !== 1) return false;
          // Skip our own injected nodes.
          var cls = node.className || "";
          var id = node.id || "";
          if (cls.indexOf("__pk") !== -1 || id.indexOf("__pk") !== -1)
            return false;
          // A new <input> or <form> element, or a container with one inside.
          var tag = node.tagName;
          if (tag === "INPUT" || tag === "FORM") return true;
          if (
            node.querySelector &&
            (node.querySelector('input[type="password"]') ||
              node.querySelector("input") ||
              node.querySelector("form"))
          )
            return true;
          return false;
        });
      });
      if (!hasRelevantChange) return;

      // Debounce: wait 300 ms after the last relevant mutation before scanning.
      clearTimeout(_mutationTimer);
      _mutationTimer = setTimeout(function () {
        _hasNotifiedForm = false;
        notifyFormDetected();
        decorateFields();
      }, 300);
    });
    _formObserver.observe(document.body, { childList: true, subtree: true });
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", init);
  } else {
    init();
  }
})();