(function () {
  function byId(id) {
    return document.getElementById(id);
  }

  /* ========================================================================
     Theme Toggle (localStorage)
     ======================================================================== */
  function applyTheme(theme) {
    var isLight = theme === "light";
    document.body.classList.add("theme-transitioning");
    window.setTimeout(function () {
      document.body.classList.remove("theme-transitioning");
    }, 400);
    if (theme === "light") {
      document.body.classList.add("light-mode");
    } else {
      document.body.classList.remove("light-mode");
    }
    document.documentElement.style.colorScheme = isLight ? "light" : "dark";
    var themeColor = document.querySelector('meta[name="theme-color"]');
    if (themeColor) {
      themeColor.setAttribute("content", isLight ? "#fff8f1" : "#000000");
    }
    var btn = byId("theme-toggle");
    if (btn) {
      btn.textContent = theme === "light" ? "\u263E" : "\u2600";
      btn.setAttribute("title",
        theme === "light"
          ? "Switch to dark theme"
          : "Switch to light theme"
      );
      btn.setAttribute("aria-label",
        theme === "light"
          ? "Switch to dark theme"
          : "Switch to light theme"
      );
    }
    // Sync guestbook iframes
    ["guestbook-form-iframe", "guestbook-comments-iframe"].forEach(function (id) {
      var frame = byId(id);
      if (!frame) return;
      var src = frame.getAttribute("src") || "";
      var base = src.split("?")[0];
      var next = theme === "light" ? base + "?theme=light" : base;
      if (src !== next) frame.setAttribute("src", next);
    });
  }

  var stored = localStorage.getItem("siteTheme");
  var prefersLight = window.matchMedia && window.matchMedia("(prefers-color-scheme: light)").matches;
  var savedTheme = stored || (prefersLight ? "light" : "dark");
  applyTheme(savedTheme);

  if (window.matchMedia) {
    window.matchMedia("(prefers-color-scheme: light)").addEventListener("change", function (e) {
      if (!localStorage.getItem("siteTheme")) {
        applyTheme(e.matches ? "light" : "dark");
      }
    });
  }

  function syncHeaderOffset() {
    var header = document.querySelector("header.site-header");
    if (!header) return;
    document.documentElement.style.setProperty(
      "--site-header-height",
      Math.ceil(header.getBoundingClientRect().height) + "px"
    );
  }

  window.addEventListener("load", syncHeaderOffset);
  window.addEventListener("resize", syncHeaderOffset);
  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", syncHeaderOffset);
  } else {
    syncHeaderOffset();
  }

  var themeBtn = byId("theme-toggle");
  if (themeBtn) {
    themeBtn.addEventListener("click", function () {
      var next = document.body.classList.contains("light-mode") ? "dark" : "light";
      localStorage.setItem("siteTheme", next);
      applyTheme(next);
    });
  }

  /* ========================================================================
     Comfort spacing toggle (localStorage, site-wide)
     ======================================================================== */
  (function initComfortSpacing() {
    if ((location.pathname || "").indexOf("/startpage") !== -1) return;
    var KEY = "siteComfortSpacing_v1";
    var btn = byId("comfort-toggle");
    if (!btn) return;

    function applyComfort(on) {
      document.body.classList.toggle("comfort-spacing", on);
      btn.setAttribute("aria-pressed", on ? "true" : "false");
      btn.setAttribute("title", on ? "Comfort spacing: ON" : "Comfort spacing: OFF");
      btn.setAttribute("aria-label", on ? "Comfort spacing on" : "Comfort spacing off");
    }

    applyComfort(localStorage.getItem(KEY) === "1");

    btn.addEventListener("click", function () {
      var next = !document.body.classList.contains("comfort-spacing");
      localStorage.setItem(KEY, next ? "1" : "0");
      applyComfort(next);
    });
  })();

  /* ========================================================================
     Menu & Language Dropdowns
     ======================================================================== */
  const menuBtn = byId("menu-toggle");
  const nav = byId("site-nav");

  const langToggle = byId("lang-toggle");
  const langMenu = byId("lang-options");
  const currentLang = byId("current-lang");

  let openDropdown = null;

  function closeMenu() {
    if (!menuBtn || !nav) return;
    menuBtn.classList.remove("active");
    menuBtn.setAttribute("aria-expanded", "false");
    nav.hidden = true;
    if (openDropdown === "menu") openDropdown = null;
  }

  function closeLang() {
    if (!langToggle || !langMenu) return;
    langToggle.setAttribute("aria-expanded", "false");
    langMenu.hidden = true;
    if (openDropdown === "lang") openDropdown = null;
  }

  function toggleMenu(e) {
    if (!menuBtn || !nav) return;
    e.stopPropagation();

    if (openDropdown === "lang") closeLang();

    const open = menuBtn.getAttribute("aria-expanded") === "true";
    if (open) {
      closeMenu();
      return;
    }

    menuBtn.classList.add("active");
    menuBtn.setAttribute("aria-expanded", "true");
    nav.hidden = false;
    openDropdown = "menu";
  }

  function toggleLang(e) {
    if (!langToggle || !langMenu) return;
    e.stopPropagation();

    if (openDropdown === "menu") closeMenu();

    const open = langToggle.getAttribute("aria-expanded") === "true";
    if (open) {
      closeLang();
      return;
    }

    langToggle.setAttribute("aria-expanded", "true");
    langMenu.hidden = false;
    openDropdown = "lang";
  }

  if (nav) nav.hidden = true;
  if (langMenu) langMenu.hidden = true;

  if (menuBtn && nav) {
    menuBtn.addEventListener("click", toggleMenu);
    nav.addEventListener("click", (e) => e.stopPropagation());
  }

  if (langToggle && langMenu) {
    langToggle.addEventListener("click", toggleLang);
    langMenu.addEventListener("click", (e) => e.stopPropagation());
  }

  if ((menuBtn && nav) || (langToggle && langMenu)) {
    document.addEventListener("click", function (e) {
      if (
        menuBtn && nav &&
        (menuBtn.contains(e.target) || nav.contains(e.target))
      ) {
        return;
      }
      if (
        langToggle && langMenu &&
        (langToggle.contains(e.target) || langMenu.contains(e.target))
      ) {
        return;
      }
      closeMenu();
      closeLang();
    });

    document.addEventListener("keydown", function (e) {
      if (e.key === "Escape") {
        closeMenu();
        closeLang();
      }
    });
  }

  if (currentLang) {
    const docLang = (document.documentElement.lang || "en").toLowerCase();
    currentLang.textContent = docLang === "zh" ? "ZH" : docLang === "ja" ? "JP" : "EN";
  }

  if (langMenu) {
    langMenu.querySelectorAll("a[data-lang]").forEach((a) => {
      a.addEventListener("click", function () {
        localStorage.setItem("preferredLang", this.getAttribute("data-lang") || "en");
      });
    });
  }

  // Language menu hrefs: convert current page to *_zh.php / *_jp.php.
  function updateLangMenuHrefs() {
    const links = document.querySelectorAll("a[data-lang-href][data-lang]");
    if (!links.length) return;

    let path = window.location.pathname || "/";
    if (!path.startsWith("/")) path = "/" + path;

    const isDir = path.endsWith("/");
    const file = isDir ? "index.php" : (path.split("/").pop() || "index.php");
    const base = isDir ? path : path.slice(0, -file.length);

    const baseName = file.replace(/_(zh|jp)\.php$/i, ".php");
    const map = {
      en: baseName,
      zh: baseName.replace(/(_(zh|jp))?\.php$/i, "_zh.php"),
      jp: baseName.replace(/(_(zh|jp))?\.php$/i, "_jp.php"),
    };

    links.forEach((a) => {
      const lang = (a.getAttribute("data-lang") || "en").toLowerCase();
      const targetFile = map[lang] || map.en;
      a.href = base + targetFile;
    });
  }

  function updateAriaCurrent() {
    const path = window.location.pathname || "/";
    const normalized = path.startsWith("/") ? path : "/" + path;
    const isDir = normalized.endsWith("/");
    const file = isDir ? "index.php" : (normalized.split("/").pop() || "index.php");
    const base = isDir ? normalized : normalized.slice(0, -file.length);
    const indexPath = base + "index.php";
    const dirPath = base || "/";
    const candidates = new Set([normalized, indexPath, dirPath, dirPath.replace(/\/$/, "")]);

    document.querySelectorAll("#site-nav a[href]").forEach((a) => {
      const href = a.getAttribute("href") || "";
      const hrefUrl = new URL(href, window.location.origin);
      if (hrefUrl.origin !== window.location.origin) {
        a.removeAttribute("aria-current");
        return;
      }
      const hrefPath = hrefUrl.pathname;
      if (candidates.has(hrefPath)) {
        a.setAttribute("aria-current", "page");
      } else {
        a.removeAttribute("aria-current");
      }
    });

    const docLang = (document.documentElement.lang || "en").toLowerCase();
    // "ja" is valid BCP-47 for Japanese but we label it "jp" in data-lang
    const normalizedDocLang = docLang === "ja" ? "jp" : docLang;
    document.querySelectorAll("#lang-options a[data-lang]").forEach((a) => {
      const lang = (a.getAttribute("data-lang") || "en").toLowerCase();
      if (lang === normalizedDocLang) {
        a.setAttribute("aria-current", "page");
      } else {
        a.removeAttribute("aria-current");
      }
    });
  }

  // Run once now...
  updateLangMenuHrefs();
  updateAriaCurrent();
  // ...and again after layout/injection settles.
  setTimeout(updateLangMenuHrefs, 0);
  setTimeout(updateAriaCurrent, 0);

  /* ========================================================================
     Skeleton Screens — replace static "Loading…" text
     ======================================================================== */
  function injectSkeleton(container) {
    if (!container) return;
    container.innerHTML =
      '<div class="skeleton-line"></div>' +
      '<div class="skeleton-line"></div>' +
      '<div class="skeleton-line"></div>' +
      '<div class="skeleton-line"></div>';
  }

  /* ========================================================================
     Home page: Blog list (optional)
     ======================================================================== */
  const blogList = byId("blog-list");
  if (blogList) {
    injectSkeleton(blogList);

    const blogHost = "https://blog.sillylaird.ca";
    const ctrl = new AbortController();
    const timeout = setTimeout(() => ctrl.abort(), 3500);

    fetch(blogHost + "/api/posts.php", { signal: ctrl.signal })
      .then((r) => r.json())
      .then((posts) => {
        blogList.textContent = "";

        const top = document.createElement("div");

        const strong = document.createElement("strong");
        strong.textContent = "Posts";
        top.appendChild(strong);

        top.appendChild(document.createTextNode(" ("));
        const allLink = document.createElement("a");
        allLink.href = blogHost;
        allLink.textContent = "all";
        top.appendChild(allLink);
        top.appendChild(document.createTextNode(")"));

        blogList.appendChild(top);

        const list = document.createElement("ol");
        (posts || []).forEach((post) => {
          const li = document.createElement("li");

          const a = document.createElement("a");
          a.href = blogHost + "/" + String(post.path || "").replace(/^\/+/, "");
          a.textContent = String(post.title || "Untitled");

          const date = document.createElement("div");
          date.className = "muted";

          const y = String(post.year || "");
          const m = String(post.month || "").padStart(2, "0");
          const d = String(post.day || "").padStart(2, "0");
          const iso = y && m && d ? `${y}-${m}-${d}` : "";

          const time = document.createElement("time");
          if (iso) time.setAttribute("datetime", iso);
          time.textContent = iso || "";

          li.appendChild(a);
          li.appendChild(document.createElement("br"));
          date.appendChild(time);
          li.appendChild(date);

          list.appendChild(li);
        });

        blogList.appendChild(list);

        if (!list.children.length) {
          const empty = document.createElement("div");
          empty.className = "muted";
          empty.textContent = "No posts yet.";
          blogList.appendChild(empty);
        }
      })
      .catch((err) => {
        blogList.textContent = err && err.name === "AbortError"
          ? "Blog list timed out."
          : "Cannot load posts right now.";
      })
      .finally(() => clearTimeout(timeout));
  }

  /* ========================================================================
     Home page: Changelog list (optional)
     ======================================================================== */
  const changelogList = byId("changelog-list");
  if (changelogList) {
    injectSkeleton(changelogList);

    const changelogPage = "https://www.sillylaird.ca/changelog/latest.php";
    const ctrl = new AbortController();
    const timeout = setTimeout(() => ctrl.abort(), 3500);

    fetch(changelogPage, { signal: ctrl.signal })
      .then((r) => r.text())
      .then((html) => {
        changelogList.textContent = "";
        const doc = new DOMParser().parseFromString(html, "text/html");
        const entries = Array.from(doc.querySelectorAll(".changelog-entry"));

        const top = document.createElement("div");

        const strong = document.createElement("strong");
        strong.textContent = "Entries";
        top.appendChild(strong);

        top.appendChild(document.createTextNode(" ("));
        const allLink = document.createElement("a");
        allLink.href = "https://www.sillylaird.ca/changelog/";
        allLink.textContent = "all";
        top.appendChild(allLink);
        top.appendChild(document.createTextNode(")"));

        changelogList.appendChild(top);

        const list = document.createElement("ol");
        entries.forEach((entry) => {
          const li = document.createElement("li");

          const titleText = (entry.querySelector("strong, b")?.textContent || "").trim();
          const timeEl = entry.querySelector("time");
          const dateText = (timeEl?.textContent || "").trim();
          const dateIso = (timeEl?.getAttribute("datetime") || "").trim();
          const bodyEl = entry.querySelector(".text");
          const bodyText = (bodyEl?.textContent || "").trim();

          const title = document.createElement("strong");
          if (titleText) {
            title.textContent = titleText;
            li.appendChild(title);

            if (dateText) {
              const date = document.createElement("div");
              date.className = "muted";
              const time = document.createElement("time");
              if (dateIso) time.setAttribute("datetime", dateIso);
              time.textContent = dateText;
              date.appendChild(time);
              li.appendChild(date);
            }
          } else if (dateText) {
            title.textContent = dateText;
            li.appendChild(title);
          }

          if (bodyText) {
            const body = document.createElement("div");
            body.className = "changelog-body";
            body.textContent = bodyText;
            li.appendChild(body);
          }

          list.appendChild(li);
        });

        changelogList.appendChild(list);

        const filesSection = doc.querySelector(".changelog-files-section");
        if (filesSection) {
          changelogList.appendChild(document.importNode(filesSection, true));
        }

        if (!list.children.length) {
          const empty = document.createElement("div");
          empty.className = "muted";
          empty.textContent = "No updates yet.";
          changelogList.appendChild(empty);
        }
      })
      .catch((err) => {
        changelogList.textContent = err && err.name === "AbortError"
          ? "Changelog list timed out."
          : "Cannot load changelog right now.";
      })
      .finally(() => clearTimeout(timeout));
  }

  /* ========================================================================
     Guestbook helpers
     ======================================================================== */
  const formRefreshBtn = byId("guestbook-form-refresh");
  if (formRefreshBtn) {
    formRefreshBtn.addEventListener("click", () => {
      const frame = byId("guestbook-form-iframe");
      if (!frame) return;
      setIframeLoading(frame);
      resetIframe(frame);
    });
  }

  function setIframeLoading(frame) {
    if (!frame) return;
    const clip = frame.closest(".iframe-clip");
    if (!clip) return;
    clip.classList.add("is-loading");
    const onLoad = () => {
      clip.classList.remove("is-loading");
    };
    frame.addEventListener("load", onLoad, { once: true });
  }

  function resetIframe(frame) {
    if (!frame) return;
    const src = frame.getAttribute("src") || frame.src;
    if (src) {
      frame.setAttribute("src", src);
      return;
    }
    if (frame.contentWindow) frame.contentWindow.location.reload();
  }

  function loadGuestbookComments() {
    var box = byId("guestbook-comments-inline");
    if (!box) return;
    box.innerHTML = '<div class="retro-loading">Loading recent comments...</div>';
    fetch("/api/guestbook-recent.php?limit=6")
      .then(function (r) { return r.ok ? r.json() : Promise.reject(r.status); })
      .then(function (data) {
        var entries = data && data.entries ? data.entries : [];
        box.textContent = "";
        if (!entries.length) {
          var empty = document.createElement("p");
          empty.className = "muted";
          empty.textContent = "No comments yet — be the first to sign!";
          box.appendChild(empty);
          return;
        }
        entries.forEach(function (row) {
          var art = document.createElement("article");
          art.className = "guestbook-entry";
          var strong = document.createElement("strong");
          strong.textContent = row.name || "Anonymous";
          art.appendChild(strong);
          if (row.created_at) {
            var time = document.createElement("time");
            time.textContent = row.created_at;
            time.setAttribute("datetime", row.created_at);
            art.appendChild(time);
          }
          var p = document.createElement("p");
          p.textContent = row.message || "";
          art.appendChild(p);
          box.appendChild(art);
        });
      })
      .catch(function () {
        box.innerHTML = '<p class="muted">Could not load comments. <a href="/guestbook.php">Open guestbook</a></p>';
      });
  }

  var gbReload = byId("guestbook-comments-reload");
  if (gbReload) {
    gbReload.addEventListener("click", loadGuestbookComments);
    loadGuestbookComments();
  }

  document.querySelectorAll(".iframe-clip iframe, .vibe-embed iframe").forEach(function (frame) {
    var clip = frame.closest(".iframe-clip") || frame.closest(".vibe-embed");
    if (!clip) return;
    clip.classList.add("is-loading");
    frame.addEventListener("load", function () {
      clip.classList.remove("is-loading");
    }, { once: true });
  });

  /* ========================================================================
     Home page: Last.fm live refresh (The "Pro" Way)
     ======================================================================== */
  const lastfmList = byId("lastfm-list");
  const lastfmNow = byId("lastfm-now");
  if (lastfmList || lastfmNow) {
    let lastDataStr = "";

    function renderNowPlaying(tracks) {
      if (!lastfmNow) return;
      lastfmNow.textContent = "";
      var current = null;
      if (Array.isArray(tracks)) {
        for (var i = 0; i < tracks.length; i++) {
          if (tracks[i].nowplaying) { current = tracks[i]; break; }
        }
        if (!current && tracks[0]) current = tracks[0];
      }
      if (!current) {
        var fallback = document.createElement("p");
        fallback.className = "muted";
        fallback.innerHTML = 'Nothing scrobbling — <a href="https://www.last.fm/user/SillyLaird" target="_blank" rel="noopener noreferrer">Last.fm profile</a>';
        lastfmNow.appendChild(fallback);
        return;
      }
      var card = document.createElement("a");
      card.className = "lastfm-track lastfm-track--featured";
      card.href = current.url || "https://www.last.fm/user/SillyLaird";
      card.target = "_blank";
      card.rel = "noopener noreferrer";
      if (current.image) {
        var wrap = document.createElement("span");
        wrap.className = "lastfm-image-wrap";
        var img = document.createElement("img");
        img.src = current.image;
        img.alt = (current.artist || "") + " — " + (current.name || "track");
        img.loading = "lazy";
        img.decoding = "async";
        wrap.appendChild(img);
        card.appendChild(wrap);
      }
      var info = document.createElement("span");
      info.className = "lastfm-info";
      var status = document.createElement("span");
      status.className = "lastfm-status" + (current.nowplaying ? " is-playing" : "");
      status.textContent = current.nowplaying ? "Now playing" : "Last scrobbled";
      var title = document.createElement("span");
      title.className = "lastfm-title";
      title.textContent = current.name || "Unknown track";
      var artist = document.createElement("span");
      artist.className = "lastfm-artist";
      artist.textContent = current.artist || "";
      info.appendChild(status);
      info.appendChild(title);
      info.appendChild(artist);
      card.appendChild(info);
      lastfmNow.appendChild(card);
    }

    function updateLastFM() {
      fetch("/api/lastfm.php")
        .then(res => {
          if (!res.ok) throw new Error("API error: " + res.status);
          return res.json();
        })
        .then(tracks => {
          if (tracks.error) throw new Error(tracks.message || "Unknown proxy error");
          
          // Only update DOM if the data has changed
          const currentDataStr = JSON.stringify(tracks);
          if (currentDataStr === lastDataStr) return;
          lastDataStr = currentDataStr;

          renderNowPlaying(tracks);

          if (!lastfmList) return;
          var ul = document.createElement("ul");
          ul.className = "lastfm-text-list";
          if (Array.isArray(tracks) && tracks.length > 0) {
            tracks.forEach(function (track) {
              var li = document.createElement("li");
              if (track.nowplaying) {
                var strong = document.createElement("strong");
                strong.textContent = "\u25B6 Now playing: ";
                li.appendChild(strong);
              }
              var a = document.createElement("a");
              a.href = track.url;
              a.target = "_blank";
              a.rel = "noopener noreferrer";
              a.textContent = track.name;
              li.appendChild(a);
              li.appendChild(document.createTextNode(" \u2014 " + track.artist));
              ul.appendChild(li);
            });
          } else {
            var empty = document.createElement("li");
            empty.className = "muted";
            empty.textContent = "No tracks found.";
            ul.appendChild(empty);
          }
          lastfmList.textContent = "";
          lastfmList.appendChild(ul);
          lastfmList.dataset.loaded = "1";
          if (lastfmNow) lastfmNow.dataset.loaded = "1";
        })
        .catch(err => {
          console.error("Last.fm Widget Error:", err);
          if (lastfmNow && !lastfmNow.dataset.loaded) {
            lastfmNow.dataset.loaded = "1";
            lastfmNow.innerHTML = '<p class="muted"><a href="https://www.last.fm/user/SillyLaird" target="_blank" rel="noopener noreferrer">Last.fm profile</a></p>';
          }
          if (lastfmList && !lastfmList.dataset.loaded) {
            lastfmList.dataset.loaded = "1";
            lastfmList.innerHTML = '<p class="muted"><a href="https://www.last.fm/user/SillyLaird" target="_blank" rel="noopener noreferrer">View recent tracks on Last.fm ↗</a></p>';
          }
        });
    }

    // Defer the first fetch until the widget scrolls into view (saves a
    // third-party request on initial paint — matters on slow/Tor connections).
    let refreshTimer = null;
    function startLastFM() {
      if (refreshTimer) return;
      updateLastFM();
      refreshTimer = setInterval(updateLastFM, 30000);
    }
    if ("IntersectionObserver" in window) {
      const io = new IntersectionObserver(function (entries) {
        if (entries.some(function (e) { return e.isIntersecting; })) {
          io.disconnect();
          startLastFM();
        }
      }, { rootMargin: "200px" });
      io.observe(lastfmList || lastfmNow);
    } else {
      startLastFM();
    }

    // Manual refresh button
    const refreshBtn = byId("lastfm-refresh");
    if (refreshBtn) {
      refreshBtn.addEventListener("click", () => {
        refreshBtn.textContent = "Updating...";
        refreshBtn.disabled = true;
        updateLastFM();
        setTimeout(() => {
          refreshBtn.textContent = "Refresh";
          refreshBtn.disabled = false;
        }, 500);
      });
    }
  }

  /* ========================================================================
     Footer helpers
     ======================================================================== */
  // Footer year: local time only.
  (function () {
    const el = byId("copyright-year");
    if (!el) return;

    el.textContent = String(new Date().getFullYear());
  })();

  // Footer last-updated: based on document.lastModified.
  (function () {
    const el = byId("last-updated");
    if (!el) return;

    const raw = document.lastModified;
    const date = raw ? new Date(raw) : null;
    if (!date || Number.isNaN(date.getTime())) return;

    const iso = date.toISOString().slice(0, 10);
    el.setAttribute("datetime", iso);
    el.textContent = iso;
  })();

  /* ========================================================================
     Force red text in same-origin iframes
     ======================================================================== */
  var _gbFrameIds = new Set(["guestbook-form-iframe", "guestbook-comments-iframe"]);

  function forceIframeColors(frame) {
    if (_gbFrameIds.has(frame.id)) return;
    try {
      var doc = frame.contentDocument || frame.contentWindow.document;
      if (!doc) return;
      if (doc.getElementById('forced-colors-style')) return;

      var style = doc.createElement('style');
      style.id = 'forced-colors-style';
      style.textContent =
        ':root { --ink: #8b0000; --bg: #000000; }' +
        '* { color: #8b0000 !important; }' +
        'a { color: #8b0000 !important; text-decoration: underline; }' +
        'body { background-color: var(--bg, #000) !important; color: #8b0000 !important; }';
      doc.head.appendChild(style);
    } catch (e) {
      // Cross-domain frames cannot be styled
    }
  }

  function attachIframeColorForcing() {
    document.querySelectorAll('iframe').forEach(function (frame) {
      if (frame._colorForced) return;
      frame._colorForced = true;
      frame.addEventListener('load', function () { forceIframeColors(frame); });
      // Also try immediately in case already loaded
      forceIframeColors(frame);
    });
  }

  window.addEventListener('load', attachIframeColorForcing);
  document.addEventListener('DOMContentLoaded', attachIframeColorForcing);

  /* ========================================================================
     Global Header Search (unified search w/ engine picker)
     Mirrors /startpage/ behavior; uses gh-* IDs to avoid collisions.
     ======================================================================== */
  var GH_SEARCH_ENGINES = [
    { key: 'site',       label: '⌂', title: 'This site',         placeholder: 'Search pages on sillylaird.ca…', action: '#', param: 'q', local: true },
    { key: 'google',     label: 'G',  title: 'Google Search',     placeholder: 'Search Google...',     action: 'https://www.google.ca/search',        param: 'q' },
    { key: 'youtube',    label: 'YT', title: 'YouTube Search',    placeholder: 'Search YouTube...',    action: 'https://www.youtube.com/results',     param: 'search_query' },
    { key: 'sillylaird', label: 'SL', title: 'SillyLaird Search', placeholder: 'Search SillyLaird...', action: 'https://search.sillylaird.ca/search', param: 'q' },
    { key: '4get',       label: '4G', title: '4get Search',       placeholder: 'Search 4get...',       action: 'https://4get.sillylaird.ca/web',      param: 's' },
    { key: 'gemini',     label: 'GM', title: 'Gemini Search',     placeholder: 'Ask Gemini...',        action: '/gemini-search.php',                  param: 'q' }
  ];
  var GH_SEARCH_KEY = 'siteHeaderSearchEngine_v1';

  function initGlobalHeaderSearch() {
    var form = byId('gh-search-form');
    var input = byId('gh-search-input');
    var toggle = byId('gh-search-engine-toggle');
    var menu = byId('gh-search-engine-menu');
    if (!form || !input || !toggle || !menu) return;
    if (toggle._ghInit) return;
    toggle._ghInit = true;

    var saved = null;
    try { saved = localStorage.getItem(GH_SEARCH_KEY); } catch (_) {}
    var idx = GH_SEARCH_ENGINES.findIndex(function (e) { return e.key === saved; });
    if (idx < 0) idx = GH_SEARCH_ENGINES.findIndex(function (e) { return e.key === 'google'; });
    if (idx < 0) idx = 0;

    GH_SEARCH_ENGINES.forEach(function (e, i) {
      var li = document.createElement('li');
      li.setAttribute('role', 'option');
      li.dataset.index = String(i);
      var icon = document.createElement('span');
      icon.className = 'engine-icon';
      icon.textContent = e.label;
      var name = document.createElement('span');
      name.className = 'engine-name';
      name.textContent = e.title;
      li.appendChild(icon);
      li.appendChild(name);
      li.addEventListener('click', function () {
        idx = i;
        apply(idx);
        closeMenu();
        input.focus();
      });
      menu.appendChild(li);
    });

    function apply(i) {
      var e = GH_SEARCH_ENGINES[i];
      form.setAttribute('action', e.local ? '#' : e.action);
      if (e.local) {
        form.removeAttribute('target');
      } else {
        form.setAttribute('target', '_blank');
        form.setAttribute('rel', 'noopener noreferrer');
      }
      input.setAttribute('name', e.local ? 'site-q' : e.param);
      input.setAttribute('placeholder', e.placeholder);
      toggle.textContent = '';
      toggle.appendChild(document.createTextNode(e.label + ' '));
      var caret = document.createElement('span');
      caret.className = 'search-engine-caret';
      caret.textContent = '▾';
      toggle.appendChild(caret);
      toggle.setAttribute('title', 'Search engine: ' + e.title);
      Array.prototype.forEach.call(menu.children, function (li, li_i) {
        li.setAttribute('aria-selected', li_i === i ? 'true' : 'false');
      });
      try { localStorage.setItem(GH_SEARCH_KEY, e.key); } catch (_) {}
    }

    function openMenu() {
      menu.hidden = false;
      toggle.setAttribute('aria-expanded', 'true');
    }
    function closeMenu() {
      menu.hidden = true;
      toggle.setAttribute('aria-expanded', 'false');
    }

    toggle.addEventListener('click', function (ev) {
      ev.stopPropagation();
      if (menu.hidden) openMenu(); else closeMenu();
    });

    document.addEventListener('click', function (ev) {
      if (menu.hidden) return;
      if (ev.target === toggle || toggle.contains(ev.target)) return;
      if (menu.contains(ev.target)) return;
      closeMenu();
    });

    document.addEventListener('keydown', function (ev) {
      if (ev.key === 'Escape' && !menu.hidden) closeMenu();
    });

    var siteHits = byId('site-search-hits');
    var siteIndex = null;

    function loadSiteIndex() {
      if (siteIndex) return Promise.resolve(siteIndex);
      return fetch('/assets/data/site-index.json')
        .then(function (r) { return r.json(); })
        .then(function (j) { siteIndex = Array.isArray(j) ? j : []; return siteIndex; })
        .catch(function () { siteIndex = []; return siteIndex; });
    }

    function renderSiteHits(q) {
      if (!siteHits) return;
      var query = (q || '').trim().toLowerCase();
      if (!query) { siteHits.hidden = true; siteHits.textContent = ''; return; }
      loadSiteIndex().then(function (pages) {
        var hits = pages.filter(function (p) {
          var hay = (p.title + ' ' + p.url + ' ' + (p.tags || '')).toLowerCase();
          return hay.indexOf(query) !== -1;
        }).slice(0, 8);
        siteHits.textContent = '';
        if (!hits.length) { siteHits.hidden = true; return; }
        hits.forEach(function (p) {
          var li = document.createElement('li');
          var a = document.createElement('a');
          a.href = p.url;
          if (/^https?:\/\//.test(p.url)) {
            a.target = '_blank';
            a.rel = 'noopener noreferrer';
          }
          a.textContent = p.title;
          li.appendChild(a);
          siteHits.appendChild(li);
        });
        siteHits.hidden = false;
      });
    }

    input.addEventListener('input', function () {
      if (GH_SEARCH_ENGINES[idx] && GH_SEARCH_ENGINES[idx].local) {
        renderSiteHits(input.value);
      } else if (siteHits) {
        siteHits.hidden = true;
      }
    });

    form.addEventListener('submit', function (ev) {
      if (GH_SEARCH_ENGINES[idx] && GH_SEARCH_ENGINES[idx].local) {
        ev.preventDefault();
        var first = siteHits && siteHits.querySelector('a');
        if (first) first.click();
        else renderSiteHits(input.value);
      }
    });

    apply(idx);
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initGlobalHeaderSearch);
  } else {
    initGlobalHeaderSearch();
  }

  (function initRadioWidget() {
    var box = byId('radio-widget');
    if (!box) return;
    function render(title) {
      box.textContent = '';
      var p = document.createElement('p');
      if (title) {
        p.className = 'radio-now-line';
        var strong = document.createElement('strong');
        strong.textContent = 'Radio: ';
        p.appendChild(strong);
        var span = document.createElement('span');
        span.id = 'radio-nowplaying-title';
        span.textContent = title;
        p.appendChild(span);
        p.appendChild(document.createTextNode(' — '));
        var a = document.createElement('a');
        a.href = 'https://radio.sillylaird.ca/';
        a.target = '_blank';
        a.rel = 'noopener noreferrer';
        a.textContent = 'Listen live';
        p.appendChild(a);
      } else {
        p.className = 'muted';
        p.textContent = 'Radio offline — ';
        var link = document.createElement('a');
        link.href = 'https://radio.sillylaird.ca/';
        link.target = '_blank';
        link.rel = 'noopener noreferrer';
        link.textContent = 'radio.sillylaird.ca';
        p.appendChild(link);
      }
      box.appendChild(p);
    }
    function poll() {
      fetch('/api/nowplaying.php', { cache: 'no-store' })
        .then(function (r) { return r.ok ? r.json() : Promise.reject(); })
        .then(function (j) {
          var title = j && j.title ? String(j.title).trim() : '';
          render(title);
        })
        .catch(function () { render(''); });
    }
    poll();
    setInterval(poll, 30000);
  })();

  (function initLainEgg() {
    var btn = byId('lain-avatar-btn');
    if (!btn) return;
    var secrets = [
      btn.getAttribute('data-secret-1'),
      btn.getAttribute('data-secret-2'),
      btn.getAttribute('data-secret-3'),
    ].filter(Boolean);
    var i = 0;
    btn.addEventListener('click', function () {
      var msg = secrets[i % secrets.length] || "Let's all love Lain.";
      i += 1;
      btn.classList.add('is-lain-pulse');
      window.setTimeout(function () { btn.classList.remove('is-lain-pulse'); }, 600);
      var toast = document.createElement('div');
      toast.className = 'lain-toast';
      toast.setAttribute('role', 'status');
      toast.textContent = msg;
      document.body.appendChild(toast);
      window.setTimeout(function () { toast.classList.add('is-visible'); }, 10);
      window.setTimeout(function () {
        toast.classList.remove('is-visible');
        window.setTimeout(function () { toast.remove(); }, 350);
      }, 2800);
    });
  })();

  // Per-page visit counter: canonical implementation is visit-counter.js
  // (nginx injects it network-wide). Fall back here if that script is absent.
  (function initVisitCounter() {
    if (window.__slVisitCounterInit) return;
    if (document.querySelector('script[src*="visit-counter.js"]')) return;
    var s = document.createElement('script');
    // Always load from www so sibling hosts (blog/radio/…) resolve correctly
    // even when this file itself was loaded cross-origin via nav.js.
    s.src = 'https://www.sillylaird.ca/assets/js/visit-counter.js?v=2026080403';
    s.defer = true;
    document.head.appendChild(s);
  })();

  // Scroll-to-top: canonical implementation is scroll-to-top.js (nginx injects
  // it network-wide alongside the visit counter). Fall back if absent.
  (function initScrollToTop() {
    if (window.__slScrollTopInit) return;
    if (document.querySelector('script[src*="scroll-to-top.js"]')) return;
    var s = document.createElement('script');
    s.src = 'https://www.sillylaird.ca/assets/js/scroll-to-top.js?v=20260821b';
    s.defer = true;
    document.head.appendChild(s);
  })();

  (function initSectionDraw() {
    var titles = document.querySelectorAll('.section-accent-title, .network-subtitle');
    var sections = document.querySelectorAll('.home-content > section');
    var targets = [];
    titles.forEach(function (el) { targets.push(el); });
    sections.forEach(function (el) { targets.push(el); });
    if (!targets.length) return;

    function markDrawn(el) {
      el.classList.add('is-drawn');
    }

    if (!('IntersectionObserver' in window) ||
        window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
      targets.forEach(markDrawn);
      return;
    }

    var io = new IntersectionObserver(function (entries) {
      entries.forEach(function (entry) {
        if (!entry.isIntersecting) return;
        markDrawn(entry.target);
        io.unobserve(entry.target);
      });
    }, { threshold: 0.35, rootMargin: '0px 0px -8% 0px' });

    targets.forEach(function (el) { io.observe(el); });
  })();

  (function initNetworkAccordion() {
    var items = document.querySelectorAll('.network-collapsible');
    if (!items.length) return;
    var mq = window.matchMedia('(max-width: 600px)');

    function sync() {
      var mobile = mq.matches;
      items.forEach(function (el, i) {
        el.open = mobile ? i === 0 : true;
      });
    }

    sync();
    if (typeof mq.addEventListener === 'function') {
      mq.addEventListener('change', sync);
    } else if (typeof mq.addListener === 'function') {
      mq.addListener(sync);
    }
  })();

  /* ========================================================================
     Vibe facade: click-to-load embeds (no provider request until clicked)

     The player iframe is created synchronously inside the click handler so
     Chrome allows autoplay (gesture-driven). State is read straight from each
     provider's postMessage protocol, so when the viewer pauses we show a
     "paused" overlay that mirrors the load facade but with a pause glyph.

     One provider entry per supported site. `state(data, iframe)` maps a raw
     message to 'paused' | 'playing' | null. Bilibili exposes no cross-origin
     pause event, so it has no entry and falls back to a plain autoplay iframe.
     ======================================================================== */

  function vibePost(iframe, msg, origin) {
    try {
      iframe.contentWindow.postMessage(typeof msg === 'string' ? msg : JSON.stringify(msg), origin || '*');
    } catch (_) {}
  }

  function withParam(url, extra) {
    return url + (url.indexOf('?') > -1 ? '&' : '?') + extra;
  }

  // Pause overlay — same menu as the load facade. Mode 'paused' shows a pause
  // glyph + resume copy; mode 'ended' shows a replay glyph + replay copy.
  function setOverlayMode(overlay, mode) {
    if (mode === 'ended') {
      overlay.classList.add('vibe-facade-ended');
      overlay.setAttribute('aria-label', 'Replay the video');
      overlay.innerHTML =
        '<span class="vibe-facade-play" aria-hidden="true">↻</span>' +
        '<span class="vibe-facade-text">Replay<br><small>Click to watch again</small></span>';
    } else {
      overlay.classList.remove('vibe-facade-ended');
      overlay.setAttribute('aria-label', 'Resume the video');
      overlay.innerHTML =
        '<span class="vibe-facade-play" aria-hidden="true">⏸</span>' +
        '<span class="vibe-facade-text">Paused<br><small>Click to resume</small></span>';
    }
  }

  function makePauseOverlay() {
    var overlay = document.createElement('button');
    overlay.type = 'button';
    overlay.className = 'vibe-facade vibe-facade-paused';
    overlay.hidden = true;
    setOverlayMode(overlay, 'paused');
    return overlay;
  }

  var VIBE_PROVIDERS = {
    youtube: {
      match: /youtube(-nocookie)?\.com\/embed\//,
      origin: /^https?:\/\/(www\.)?youtube(-nocookie)?\.com$/,
      // youtube.com (not -nocookie): the postMessage API replies from
      // youtube.com. Privacy is already moot once the user has clicked.
      src: function (e) { return withParam(e.replace('youtube-nocookie.com', 'youtube.com'), 'autoplay=1&enablejsapi=1'); },
      subscribe: function (f) {
        vibePost(f, { event: 'listening', id: 1, channel: 'widget' });
        vibePost(f, { event: 'command', func: 'addEventListener', args: ['onStateChange'] });
      },
      play: function (f) { vibePost(f, { event: 'command', func: 'playVideo', args: [] }); },
      state: function (d) {
        var s = null;
        if (d.event === 'onStateChange') s = d.info;
        else if (d.event === 'infoDelivery' && d.info && typeof d.info.playerState === 'number') s = d.info.playerState;
        if (s === 0) return 'ended';              // 0 = ended → show replay button
        if (s === 2) return 'paused';            // 2 = paused
        if (s === 1 || s === 3) return 'playing'; // 1 = playing, 3 = buffering
        return null;
      }
    },

    vimeo: {
      match: /player\.vimeo\.com\/video\//,
      origin: /^https?:\/\/player\.vimeo\.com$/,
      src: function (e) { return withParam(e, 'autoplay=1'); },
      subscribe: function (f) {
        vibePost(f, { method: 'addEventListener', value: 'play' }, 'https://player.vimeo.com');
        vibePost(f, { method: 'addEventListener', value: 'pause' }, 'https://player.vimeo.com');
      },
      play: function (f) { vibePost(f, { method: 'play' }, 'https://player.vimeo.com'); },
      state: function (d, f) {
        if (d.event === 'ready') { this.subscribe(f); return null; } // (re)subscribe once ready
        if (d.event === 'pause') return 'paused';
        if (d.event === 'play' || d.event === 'playing') return 'playing';
        return null;
      }
    },

    dailymotion: {
      match: /dailymotion\.com\/player/,
      origin: /^https?:\/\/(geo\.)?dailymotion\.com$/,
      src: function (e) { return withParam(e, 'autoplay=1'); },
      play: function (f) {
        vibePost(f, { command: 'play', parameters: [] });
        vibePost(f, { method: 'play' });
      },
      state: function (d) {
        var ev = d.event;
        if (ev === 'pause' || ev === 'video_pause') return 'paused';
        if (ev === 'play' || ev === 'playing' || ev === 'video_start') return 'playing';
        return null;
      }
    },

    niconico: {
      match: /embed\.nicovideo\.jp\/watch\//,
      origin: /^https?:\/\/embed\.nicovideo\.jp$/,
      // jsapi=1&playerId=1 turns on Niconico's postMessage control API.
      src: function (e) { return withParam(e, 'jsapi=1&playerId=1&autoplay=1'); },
      play: function (f) {
        vibePost(f, { sourceConnectorType: 1, playerId: f._vibeNicoId || '1', eventName: 'play' }, 'https://embed.nicovideo.jp');
      },
      state: function (d, f) {
        if (d.playerId != null) f._vibeNicoId = d.playerId; // captured for play()
        if (d.eventName === 'statusChange' || d.eventName === 'playerStatusChange') {
          var ps = d.data && d.data.playerStatus;
          if (ps === 3) return 'paused';  // 3 = pause
          if (ps === 2) return 'playing'; // 2 = play
        }
        return null;
      }
    }
  };

  function vibeProviderFor(embed) {
    for (var k in VIBE_PROVIDERS) {
      if (VIBE_PROVIDERS.hasOwnProperty(k) && VIBE_PROVIDERS[k].match.test(embed)) return VIBE_PROVIDERS[k];
    }
    return null;
  }

  function loadProviderWithOverlay(wrap, facadeBtn, embed, prov) {
    var f = document.createElement('iframe');
    f.src = prov.src(embed);
    f.title = 'Current vibe — video';
    f.setAttribute('referrerpolicy', 'strict-origin-when-cross-origin');
    f.setAttribute('allow', 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share; fullscreen');
    f.setAttribute('allowfullscreen', '');
    facadeBtn.replaceWith(f);

    var overlay = makePauseOverlay();
    wrap.appendChild(overlay);

    overlay.addEventListener('click', function () {
      overlay.hidden = true;
      prov.play(f);
    });

    f.addEventListener('load', function () { if (prov.subscribe) prov.subscribe(f); });

    window.addEventListener('message', function (ev) {
      if (prov.origin && !prov.origin.test(ev.origin)) return;
      var data = ev.data;
      if (typeof data === 'string') {
        try {
          data = JSON.parse(data);
        } catch (_) {
          if (data.indexOf('=') === -1) return; // some players send querystring strings
          var o = {};
          data.split('&').forEach(function (kv) {
            var p = kv.split('=');
            o[decodeURIComponent(p[0])] = decodeURIComponent(p[1] || '');
          });
          data = o;
        }
      }
      if (!data || typeof data !== 'object') return;
      var st = prov.state(data, f);
      if (st === 'ended') { setOverlayMode(overlay, 'ended'); overlay.hidden = false; }
      else if (st === 'paused') { setOverlayMode(overlay, 'paused'); overlay.hidden = false; }
      else if (st === 'playing') overlay.hidden = true;
    });
  }

  // Direct linked media: native <video>/<audio> get the same pause overlay,
  // driven by the element's own play/pause events (no postMessage). Audio has
  // no video surface, so it gets a compact (icon + "Paused") variant.
  function attachNativePauseOverlay(media, compact) {
    var wrap;
    if (compact) {
      // Audio has no positioned container — wrap it so the overlay can sit on top.
      wrap = media.parentNode;
      if (!wrap || !wrap.classList.contains('vibe-audio-wrap')) {
        wrap = document.createElement('div');
        wrap.className = 'vibe-audio-wrap';
        media.parentNode.insertBefore(wrap, media);
        wrap.appendChild(media);
      }
    } else {
      wrap = media.parentNode; // .vibe-embed (position:relative)
    }
    if (!wrap || wrap._vibePauseDone) return;
    wrap._vibePauseDone = true;

    var overlay = makePauseOverlay();
    if (compact) overlay.classList.add('vibe-facade-compact');
    wrap.appendChild(overlay);

    overlay.addEventListener('click', function () {
      overlay.hidden = true;
      var p = media.play();
      if (p && p.catch) p.catch(function () {});
    });
    // Only after playback has begun — don't cover the not-yet-started media.
    media.addEventListener('pause', function () { if (!media.ended) { setOverlayMode(overlay, 'paused'); overlay.hidden = false; } });
    media.addEventListener('play', function () { overlay.hidden = true; });
    media.addEventListener('ended', function () { setOverlayMode(overlay, 'ended'); overlay.hidden = false; });
  }

  function scanNativeVibeMedia() {
    var vids = document.querySelectorAll('.vibe-embed > video');
    for (var i = 0; i < vids.length; i++) attachNativePauseOverlay(vids[i], false);
    var auds = document.querySelectorAll('.vibe-media-audio');
    for (var j = 0; j < auds.length; j++) attachNativePauseOverlay(auds[j], true);
  }
  scanNativeVibeMedia();
  document.addEventListener('DOMContentLoaded', scanNativeVibeMedia);

  document.addEventListener('click', function (ev) {
    var b = ev.target.closest ? ev.target.closest('.vibe-facade') : null;
    if (!b || !b.dataset.embed) return;
    var embed = b.dataset.embed;
    var wrap = b.parentNode; // .vibe-embed (position:relative)

    // Supported provider → load with pause overlay.
    var prov = wrap ? vibeProviderFor(embed) : null;
    if (prov) {
      loadProviderWithOverlay(wrap, b, embed, prov);
      return;
    }

    // Bilibili / anything else → plain autoplay iframe.
    var src = withParam(embed, 'autoplay=1');
    var f = document.createElement('iframe');
    f.src = src;
    f.title = 'Current vibe — video';
    f.setAttribute('referrerpolicy', 'strict-origin-when-cross-origin');
    f.setAttribute('allow', 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share; fullscreen');
    f.setAttribute('allowfullscreen', '');
    b.replaceWith(f);
  });

})();