// Normalize percent-encoded characters in the URL bar that are safe to show decoded.
// Runs immediately so the address bar is clean before any other JS runs.
(function () {
  try {
    const p = window.location.pathname;
    // Decode colon and space; leave %2F (/), %3F (?), %23 (#), %26 (&) encoded.
    const clean = p.replace(/%3A/gi, ':').replace(/%20/gi, ' ');
    if (clean !== p) {
      history.replaceState(null, '', clean + window.location.search + window.location.hash);
    }
  } catch (_) {}
})();

if (typeof window.f0ckDebug !== 'function') {
  window.f0ckDebug = (...args) => {
    if (window.f0ckSession?.development) console.log(...args);
  };
}

window.getCsrfToken = () => {
  return (window.f0ckSession && window.f0ckSession.csrf_token) ||
         document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') ||
         document.querySelector('input[name="csrf_token"]')?.value ||
         '';
};

window.requestAnimFrame = (function () {

  return window.requestAnimationFrame
    || window.webkitRequestAnimationFrame
    || window.mozRequestAnimationFrame
    || function (callback) { window.setTimeout(callback, 1000 / 60); };
})();

window.cancelAnimFrame = (function () {
  return window.cancelAnimationFrame
    || window.webkitCancelAnimationFrame
    || window.mozCancelAnimationFrame
    || function (id) { window.clearTimeout(id); };
})();


(() => {
  var i18n = window.f0ckI18n || {};
  window.escHTML = (str) => {
    if (!str) return '';
    const div = document.createElement('div');
    div.textContent = str;
    return div.innerHTML;
  };

  window.getCurrentItemId = () => {
    // 1. If Onara modal is open or mounted, strictly search within #onara-item-mount
    const isOnaraOpen = document.body.classList.contains('onara-modal-open');
    if (isOnaraOpen) {
      const mount = document.getElementById('onara-item-mount');
      if (mount) {
        const idEl = mount.querySelector('.item-layout-container[data-item-id], a.id-link[data-item-id], #comments-container[data-item-id], .rating-tag[data-item-id], #tags[data-item-id]');
        if (idEl?.dataset?.itemId) {
          const parsed = parseInt(idEl.dataset.itemId, 10);
          if (!isNaN(parsed) && parsed > 0) return String(parsed);
        }
        const idLink = mount.querySelector('a.id-link');
        if (idLink && idLink.innerText) {
          const parsed = parseInt(idLink.innerText.trim(), 10);
          if (!isNaN(parsed) && parsed > 0) return String(parsed);
        }
      }
      const activeThumb = document.querySelector('.posts > a.thumb.onara-active[data-item-id]');
      if (activeThumb?.dataset?.itemId) {
        const parsed = parseInt(activeThumb.dataset.itemId, 10);
        if (!isNaN(parsed) && parsed > 0) return String(parsed);
      }
    }

    // 2. If viewing an item in main content (regular full-page view or PJAX)
    const itemContainer = document.querySelector('.item-layout-container, #main.item-view, #main > .container.item-view');
    if (itemContainer) {
      const idEl = itemContainer.querySelector('.item-layout-container[data-item-id], a.id-link[data-item-id], #comments-container[data-item-id], .rating-tag[data-item-id], #tags[data-item-id]');
      if (idEl?.dataset?.itemId) {
        const parsed = parseInt(idEl.dataset.itemId, 10);
        if (!isNaN(parsed) && parsed > 0) return String(parsed);
      }
      if (itemContainer.dataset?.itemId) {
        const parsed = parseInt(itemContainer.dataset.itemId, 10);
        if (!isNaN(parsed) && parsed > 0) return String(parsed);
      }
      const idLink = itemContainer.querySelector('a.id-link');
      if (idLink && idLink.innerText) {
        const parsed = parseInt(idLink.innerText.trim(), 10);
        if (!isNaN(parsed) && parsed > 0) return String(parsed);
      }
    }

    // 3. Fallback to URL pathname if on an item page
    const path = window.location.pathname;
    if (path.includes('/admin/') || path.includes('/mod/') || path.includes('/settings') || path.includes('/user/')) return null;
    const match = path.match(/\/(\d+)\/?$/);
    if (match) return match[1];

    // NOTE: NEVER use document.querySelector('[data-item-id]') globally here,
    // as it erroneously matches feed/grid thumbnails!
    return null;
  };

  // Get current item's slug from the URL (for pool-based random exclusion)
  window.getCurrentItemSlug = () => {
    const path = window.location.pathname;
    const match = path.match(/\/([^/]+)\/?$/);
    if (match && match[1] !== 'random' && match[1] !== 'favs') return match[1];
    return null;
  };
  // ── Random Pool Manager (Fisher-Yates) ────────────────────────────
  // Preloads all candidate item IDs for the current context (tag/hall/user).
  // Items are shuffled once; a cursor walks through sequentially → zero duplicates
  // until every item has been seen, then re-shuffles automatically.
  window._randomPool = null;
  window._randomPoolContext = null;
  window._randomPoolCursor = 0;
  window._randomPoolNsfpVersion = null;
  window._randomPoolFetchedAt = 0;
  const RANDOM_POOL_TTL_MS = 5 * 60 * 1000; // 5 minutes

  // Fisher-Yates (Durstenfeld) in-place shuffle
  const _shuffleArray = (arr) => {
    for (let i = arr.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [arr[i], arr[j]] = [arr[j], arr[i]];
    }
    return arr;
  };

  // Pick next item from the shuffled pool, skipping current
  window.pickFromPool = (currentSlug, currentId) => {
    const pool = window._randomPool;
    if (!pool || !pool.items || pool.items.length < 2) return null;

    // Walk forward from cursor, skipping current item
    const len = pool.items.length;
    for (let attempts = 0; attempts < len; attempts++) {
      const pick = pool.items[window._randomPoolCursor];
      window._randomPoolCursor++;

      // Exhausted — re-shuffle and reset
      if (window._randomPoolCursor >= len) {
        _shuffleArray(pool.items);
        window._randomPoolCursor = 0;
      }

      if (pick !== currentSlug && pick !== currentId) return pick;
    }
    // Fallback (pool has only 1 unique item)
    return pool.items[0];
  };

  window.fetchRandomPool = (forceRefresh = false) => {
    const params = new URLSearchParams();
    const loc = window.location.href;

    const tagMatch = loc.match(/\/tag\/([^/]+)/);
    if (tagMatch) params.append('tag', decodeURIComponent(tagMatch[1]));

    const hallMatch = loc.match(/\/h\/([^/]+)/);
    if (hallMatch) params.append('hall', decodeURIComponent(hallMatch[1]));

    const userHallMatch = loc.match(/\/user\/([^/]+)\/hall\/([^/]+)/);
    if (userHallMatch) {
      params.append('userHall', decodeURIComponent(userHallMatch[2]));
      params.append('userHallOwner', decodeURIComponent(userHallMatch[1]));
    } else {
      const userMatch = loc.match(/\/user\/([^/]+)/);
      if (userMatch) {
        params.append('user', decodeURIComponent(userMatch[1]));
        if (loc.match(/\/favs(\/|$|\?)/)) params.append('fav', 'true');
      }
    }

    const urlParams = new URLSearchParams(window.location.search);
    const qMime = urlParams.get('mime');
    const cookieMimeMatch = document.cookie.match(/(?:^|;\s*)mime=([^;]*)/);
    const cookieMime = cookieMimeMatch ? decodeURIComponent(cookieMimeMatch[1]).trim() : null;
    if (qMime) params.append('mime', qMime);
    else if (cookieMime) params.append('mime', cookieMime);
    else {
      const mimeMatch = loc.match(/\/((?:video|audio|image|,)+)(\/|$|\?)/);
      if (mimeMatch) params.append('mime', mimeMatch[1]);
    }

    const isStrict = window.f0ckSession?.strict_mode || window.location.search.includes('strict=1') || (localStorage.getItem('search_strict') === 'true');
    if (isStrict) params.append('strict', '1');

    const contextKey = params.toString() + '|mode=' + (window.activeMode ?? 0);
    const now = Date.now();
    const isStale = (now - window._randomPoolFetchedAt) > RANDOM_POOL_TTL_MS;
    if (!forceRefresh && window._randomPoolContext === contextKey && window._randomPool && !isStale) return;

    const url = '/api/v2/random-pool' + ([...params].length > 0 ? '?' + params.toString() : '');
    fetch(url, { credentials: 'include' })
      .then(r => r.json())
      .then(data => {
        if (data && Array.isArray(data.items)) {
          // Detect nsfp list changes — if version differs, reset cursor to avoid serving stale items
          const newNsfpVersion = data.nsfp_version ?? null;
          const nsfpChanged = newNsfpVersion !== null && newNsfpVersion !== window._randomPoolNsfpVersion;
          if (nsfpChanged) {
            console.log(`[RANDOM-POOL] nsfp_version changed (${window._randomPoolNsfpVersion} → ${newNsfpVersion}), invalidating pool`);
          }
          _shuffleArray(data.items);
          window._randomPool = { items: data.items, total: data.total, sampled: data.sampled };
          window._randomPoolContext = contextKey;
          window._randomPoolCursor = 0;
          window._randomPoolNsfpVersion = newNsfpVersion;
          window._randomPoolFetchedAt = Date.now();
          console.log(`[RANDOM-POOL] Cached ${data.items.length} items (shuffled) for context: ${contextKey}`);
        }
      })
      .catch(err => console.warn('[RANDOM-POOL] Failed to fetch:', err));
  };

  // Invalidate pool on mode change
  document.addEventListener('f0ck:modeChanged', () => {
    window._randomPool = null;
    window._randomPoolContext = null;
    window._randomPoolFetchedAt = 0;
    setTimeout(() => window.fetchRandomPool(true), 200);
  });

  // Fetch pool on AJAX navigation (context may change e.g. /tag/babymetal → /tag/music)
  document.addEventListener('f0ck:contentLoaded', () => {
    // Slight delay so URL has updated via pushState before we parse it
    setTimeout(() => window.fetchRandomPool(), 50);
  });

  // Initial pool fetch on page load (non-blocking)
  setTimeout(() => window.fetchRandomPool(), 300);

  // <guest-favs> - disabled for clean guest mode
  const f0ckGuestFavs = {
    get: () => [],
    has: () => false,
    toggle: () => false,
    clear: () => {
      try {
        localStorage.removeItem('f0ck_guest_favs');
        localStorage.removeItem('guest_favs');
      } catch (e) {}
    },
    count: () => 0
  };
  window.f0ckGuestFavs = f0ckGuestFavs;
  const syncGuestFavoIcon = () => {};
  window.syncGuestFavoIcon = syncGuestFavoIcon;

  document.addEventListener('click', e => {
    const target = e.target.nodeType === 3 ? e.target.parentElement : e.target;
    const favoBtn = target.closest('#a_favo');
    if (!favoBtn) return;
    if (window.f0ckSession?.is_anon && window.f0ckSession?.anon_permissions && window.f0ckSession.anon_permissions.favorite === false) {
      e.preventDefault();
      e.stopPropagation();
      e.stopImmediatePropagation();
      if (typeof window.flashMessage === 'function') {
        window.flashMessage('Anonymous favoriting is disabled.', 3000, 'error');
      }
      return;
    }
    if (window.f0ckSession && window.f0ckSession.user) return;
    e.preventDefault();
    e.stopPropagation();
    if (typeof window.flashMessage === 'function') {
      window.flashMessage('Login to favorite posts', 3000, 'warning');
    }
  });

  const checkGuestFavsImportBanner = () => {
    if (!window.f0ckSession || !window.f0ckSession.user) return;
    const isUserFavs = window.location.pathname.match(/\/user\/([^/]+)\/favs/);
    if (!isUserFavs) return;
    const currentUser = window.f0ckSession.user.toLowerCase();
    if (decodeURIComponent(isUserFavs[1]).toLowerCase() !== currentUser) return;

    const count = window.f0ckGuestFavs ? window.f0ckGuestFavs.count() : 0;
    if (count <= 0) {
      const existing = document.getElementById('guest-favs-import-banner');
      if (existing) existing.remove();
      return;
    }

    if (document.getElementById('guest-favs-import-banner')) return;

    const postsContainer = document.querySelector('.posts');
    if (!postsContainer || !postsContainer.parentElement) return;

    const banner = document.createElement('div');
    banner.id = 'guest-favs-import-banner';
    banner.className = 'guest-favs-banner';
    banner.style.cssText = 'background: rgba(255, 107, 157, 0.12); border: 1px solid rgba(255, 107, 157, 0.35); border-radius: 8px; padding: 12px 18px; margin: 15px auto; max-width: 900px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 0.95em; color: var(--text-color, #fff);';

    const textSpan = document.createElement('span');
    const msg = (window.f0ckI18n && window.f0ckI18n.guest_favs_saved) || 'You have {count} guest favorites saved on this device.';
    textSpan.innerHTML = `<i class="fa-solid fa-heart" style="color: #ff6b9d; margin-right: 8px;"></i> ${msg.replace('{count}', `<strong>${count}</strong>`)}`;

    const actionsDiv = document.createElement('div');
    actionsDiv.style.cssText = 'display: flex; gap: 8px; align-items: center; flex-shrink: 0;';

    const importBtn = document.createElement('button');
    importBtn.id = 'btn-import-guest-favs';
    importBtn.className = 'btn btn-sm';
    importBtn.style.cssText = 'background: #ff6b9d; border: none; border-radius: 4px; padding: 6px 14px; color: white; cursor: pointer; font-weight: 600; font-size: 0.85em; transition: background 0.15s;';
    importBtn.textContent = (window.f0ckI18n && window.f0ckI18n.sync_guest_favs) || 'Import to Account';

    const dismissBtn = document.createElement('button');
    dismissBtn.id = 'btn-dismiss-guest-favs';
    dismissBtn.className = 'btn btn-sm';
    dismissBtn.style.cssText = 'background: transparent; border: 1px solid rgba(255,255,255,0.2); border-radius: 4px; padding: 6px 10px; color: #ccc; cursor: pointer; font-size: 0.85em;';
    dismissBtn.textContent = (window.f0ckI18n && window.f0ckI18n.dismiss) || 'Dismiss';

    importBtn.onclick = async () => {
      importBtn.disabled = true;
      importBtn.textContent = '...';
      try {
        const ids = window.f0ckGuestFavs.get();
        const res = await fetch('/api/v2/favorites/import', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'X-CSRF-Token': window.f0ckSession?.csrf_token || ''
          },
          body: JSON.stringify({ ids })
        }).then(r => r.json());

        if (res.success) {
          window.f0ckGuestFavs.clear();
          banner.remove();
          if (window.flashMessage) {
            const succMsg = (window.f0ckI18n && window.f0ckI18n.guest_favs_imported) || 'Imported favorites to your account!';
            window.flashMessage(succMsg);
          }
          if (typeof window.loadPageAjax === 'function') {
            window.loadPageAjax(window.location.pathname, true, { bypassCache: true });
          } else {
            window.location.reload();
          }
        } else {
          importBtn.disabled = false;
          importBtn.textContent = (window.f0ckI18n && window.f0ckI18n.sync_guest_favs) || 'Import to Account';
        }
      } catch (err) {
        importBtn.disabled = false;
        importBtn.textContent = (window.f0ckI18n && window.f0ckI18n.sync_guest_favs) || 'Import to Account';
      }
    };

    dismissBtn.onclick = () => {
      window.f0ckGuestFavs.clear();
      banner.remove();
    };

    actionsDiv.appendChild(importBtn);
    actionsDiv.appendChild(dismissBtn);
    banner.appendChild(textSpan);
    banner.appendChild(actionsDiv);

    postsContainer.parentElement.insertBefore(banner, postsContainer);
  };
  window.checkGuestFavsImportBanner = checkGuestFavsImportBanner;
  // </guest-favs>

  // OS and Browser detection for CSS targeting
  const ua = navigator.userAgent;
  const htmlEl = document.documentElement;
  if (ua.includes('Linux')) htmlEl.classList.add('is-linux');
  if (ua.includes('Windows')) htmlEl.classList.add('is-windows');
  if (ua.includes('Firefox')) htmlEl.classList.add('is-firefox');
  if (ua.includes('Chrome')) htmlEl.classList.add('is-chrome');
  if (ua.includes('Safari') && !ua.includes('Chrome')) htmlEl.classList.add('is-safari');

  // DPR / zoom-level detection — works in Firefox (which ignores zoom in CSS dppx queries)
  const _updateDprTier = () => {
    const dpr = window.devicePixelRatio || 1;
    // Tiers mirror the CSS resolution media-query breakpoints
    let tier = 'dpr-1x';                         // 1.0 – 1.04
    if      (dpr >= 1.55) tier = 'dpr-high';      // ≥ 155% zoom
    else if (dpr >= 1.39) tier = 'dpr-150';       // ~140–154% zoom
    else if (dpr >= 1.26) tier = 'dpr-130';       // ~126–138%
    else if (dpr >= 1.20) tier = 'dpr-120';       // ~120–125%
    else if (dpr >= 1.05) tier = 'dpr-110';       // ~105–115%
    htmlEl.setAttribute('data-dpr', tier);
  };
  _updateDprTier();
  // Re-evaluate when the user changes zoom (fires on every DPR change)
  if (window.matchMedia) {
    let _dprMql = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
    const _onDprChange = () => {
      _updateDprTier();
      // Re-bind to the NEW dpr value so we catch the next change too
      _dprMql.removeEventListener('change', _onDprChange);
      _dprMql = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
      _dprMql.addEventListener('change', _onDprChange);
    };
    _dprMql.addEventListener('change', _onDprChange);
  }

  if (localStorage.getItem('blurNsfw') === 'true') htmlEl.classList.add('blur-nsfw-active');
  if (localStorage.getItem('blurNsfl') === 'true') htmlEl.classList.add('blur-nsfl-active');
  if (localStorage.getItem('blurSfw') === 'true') htmlEl.classList.add('blur-sfw-active');
  if (localStorage.getItem('blurUntagged') === 'true') htmlEl.classList.add('blur-untagged-active');
  if (localStorage.getItem('blurDetail') !== 'false') htmlEl.classList.add('blur-detail-active');
  if (localStorage.getItem('imageExpandOnClick') !== 'false') htmlEl.classList.add('image-expand-active');
  if (localStorage.getItem('hideItemRatings') === 'true') htmlEl.classList.add('hide-item-ratings-active');

  window.updateVisitIndicators = () => {
      try {
          // View indicators and counters have been permanently removed as requested.
          // This function is now a no-op to prevent injection into items.
      } catch (e) { console.error('Visit tracking error:', e); }
  };

  window.trackVisit = (id) => {
      try {
          const visits = JSON.parse(localStorage.getItem('visited_videos') || '{}');
          visits[id] = (visits[id] || 0) + 1;
          localStorage.setItem('visited_videos', JSON.stringify(visits));
          // Delay update slightly to ensure DOM is ready? No, update immediately is fine.
          updateVisitIndicators();
      } catch(e) { console.error('Visit tracking error:', e); }
  };

  const ensureLayoutClass = () => {
    const isLegacy = window.f0ckSession ? !window.f0ckSession.use_new_layout : (window.f0ckDefaultLayout === 'legacy');
    document.body.classList.remove('legacy-view', 'layout-modern', 'layout-legacy');
    if (isLegacy) {
      document.body.classList.add('layout-legacy');
    } else {
      document.body.classList.add('layout-modern');
    }
  };
  window.ensureLayoutClass = ensureLayoutClass;
  ensureLayoutClass();

  window.applyThumbCacheBust = (bgUrlStr) => {
      if (!bgUrlStr) return bgUrlStr;
      try {
          const bustedStr = localStorage.getItem('bustedThumbs');
          if (!bustedStr) return bgUrlStr;
          const busted = JSON.parse(bustedStr);
          const match = bgUrlStr.match(/\/t\/(\d+)(?:_blur)?\.webp/);
          if (match) {
              const id = match[1];
              if (busted[id]) {
                  const url = new URL(bgUrlStr, window.location.origin);
                  url.searchParams.set('t', busted[id]);
                  return url.pathname + url.search;
              }
          }
      } catch(e) {}
      return bgUrlStr;
  };

  /**
   * Forcefully refreshes all thumbnail occurrences for a specific item in the DOM.
   * Handles grid items (data-bg), images (src), and the background canvas.
   */
  window.refreshItemThumbnails = (itemId, timestamp = Date.now(), hasCoverart = undefined) => {
      if (!itemId) return;
      const idStr = String(itemId);
      
      // Update localStorage so future navigations use the new timestamp
      try {
          const bustedStr = localStorage.getItem('bustedThumbs');
          const busted = bustedStr ? JSON.parse(bustedStr) : {};
          busted[idStr] = timestamp;
          const keys = Object.keys(busted);
          if (keys.length > 50) delete busted[keys[0]];
          localStorage.setItem('bustedThumbs', JSON.stringify(busted));
      } catch(e) {}

      // Clear grid cache to force fresh render on next navigation
      if (typeof gridCacheMap !== 'undefined') gridCacheMap.clear();

      document.querySelectorAll(`[data-bg*="/t/${idStr}.webp"], [data-bg*="/t/${idStr}_blur.webp"]`).forEach(el => {
          if (el.dataset.bg) {
              el.dataset.bg = window.applyThumbCacheBust(el.dataset.bg);
          }
          // Update the --thumb-bg CSS custom property used by the ::after pseudo-element
          const currentBg = el.style.getPropertyValue('--thumb-bg');
          if (currentBg && (currentBg.includes(`/t/${idStr}.webp`) || currentBg.includes(`/t/${idStr}_blur.webp`))) {
              const newUrl = currentBg.replace(/url\(['"](.*?)['"]\)/, (_, p1) => `url('${window.applyThumbCacheBust(p1)}')`);
              el.style.setProperty('--thumb-bg', newUrl);
          }
      });

      // Update actual img tags
      document.querySelectorAll(`img[src*="/t/${idStr}.webp"], img[src*="/t/${idStr}_blur.webp"]`).forEach(el => {
          try {
              const url = new URL(el.src, window.location.origin);
              url.searchParams.set('t', timestamp);
              el.src = url.pathname + url.search;
          } catch(e) {}
      });

      const currentId = typeof window.getCurrentItemId === 'function' ? window.getCurrentItemId() : null;

      // Update audio cover in player if viewing this audio item
      const audioCover = document.getElementById('f0ck-audio-cover');
      if (audioCover && currentId === idStr) {
          const parent = audioCover.parentElement;
          const audioEl = document.querySelector('audio#my-video');
          let ph = parent ? parent.querySelector(':scope > .sidebar-media-placeholder.audio') : null;
          if (parent && !ph) {
              ph = document.createElement('div');
              ph.className = 'sidebar-media-placeholder audio';
              ph.innerHTML = '<i class="fa-solid fa-music"></i>';
              parent.prepend(ph);
          }
          let coverCircle = ph ? ph.querySelector('.audio-cover-circle') : null;
          if (hasCoverart === true || (hasCoverart === undefined && audioCover.src && audioCover.src.includes('/ca/'))) {
              const coverUrl = `/ca/${idStr}.webp?t=${timestamp}`;
              audioCover.src = coverUrl;
              if (parent) {
                  parent.style.background = 'none';
                  if (ph) {
                      if (!coverCircle) {
                          coverCircle = document.createElement('div');
                          coverCircle.className = 'audio-cover-circle';
                          coverCircle.innerHTML = '<i class="fa-solid fa-music"></i>';
                          ph.insertBefore(coverCircle, ph.firstChild);
                      } else {
                          if (!coverCircle.querySelector('i')) {
                              const existingI = ph.querySelector(':scope > i');
                              if (existingI) coverCircle.appendChild(existingI);
                              else coverCircle.insertAdjacentHTML('beforeend', '<i class="fa-solid fa-music"></i>');
                          }
                      }
                      coverCircle._origBgImage = `url('${coverUrl}')`;
                      coverCircle.style.backgroundImage = `url('${coverUrl}')`;
                      ph.classList.add('has-cover');
                      ph.style.display = '';
                  }
              }
              if (audioEl) {
                  audioEl.setAttribute('poster', coverUrl);
              }
          } else if (hasCoverart === false) {
              audioCover.removeAttribute('src');
              if (parent) {
                  parent.style.background = '#000000';
                  if (ph) {
                      if (!coverCircle) {
                          coverCircle = document.createElement('div');
                          coverCircle.className = 'audio-cover-circle';
                          coverCircle.innerHTML = '<i class="fa-solid fa-music"></i>';
                          ph.insertBefore(coverCircle, ph.firstChild);
                      } else {
                          if (!coverCircle.querySelector('i')) {
                              const existingI = ph.querySelector(':scope > i');
                              if (existingI) coverCircle.appendChild(existingI);
                              else coverCircle.insertAdjacentHTML('beforeend', '<i class="fa-solid fa-music"></i>');
                          }
                          coverCircle._origBgImage = null;
                          coverCircle.style.backgroundImage = 'none';
                          coverCircle.style.backgroundColor = '#000000';
                      }
                      ph.classList.remove('has-cover');
                      ph.style.backgroundColor = '#000000';
                      ph.style.display = '';
                  }
              }
              if (audioEl) {
                  audioEl.removeAttribute('poster');
              }
          }
      }

      // Refresh background canvas if it matches the current item
      if (currentId === idStr && window.initBackground) {
          window.initBackground();
      }
  };

  window.loadedThumbs = window.loadedThumbs || new Set();

  let lazyObserver;
  window.initLazyLoading = () => {
    const getFinalBg = (thumb) => {
        let bg = thumb.dataset.bg;
        if (!bg) return null;
        const mode = thumb.getAttribute('data-mode');
        const blurNsfw = localStorage.getItem('blurNsfw') === 'true';
        const blurNsfl = localStorage.getItem('blurNsfl') === 'true';
        const blurSfw = localStorage.getItem('blurSfw') === 'true';
        const blurUntagged = localStorage.getItem('blurUntagged') === 'true';
        
        let shouldBlurThis = false;
        if (mode === 'nsfw') shouldBlurThis = blurNsfw;
        else if (mode === 'nsfl') shouldBlurThis = blurNsfl;
        else if (mode === 'sfw') shouldBlurThis = blurSfw;
        else if (mode === 'null' || !mode) shouldBlurThis = blurUntagged;
        
        if (shouldBlurThis && !thumb.classList.contains('revealed')) {
            bg = bg.replace('.webp', '_blur.webp');
        }
        return window.applyThumbCacheBust(bg);
    };

    // Helper: apply thumb image via CSS custom property — picked up by the loaded CSS rule
    const applyThumb = (thumb, finalBg) => {
        thumb.style.setProperty('--thumb-bg', `url('${finalBg}')`);
        thumb.classList.add('loaded');
        thumb.classList.remove('lazy-thumb');
        window.loadedThumbs.add(finalBg);
    };

    // Synchronously resolve any already-loaded thumbnails (cached from previous navigation)
    document.querySelectorAll('.lazy-thumb').forEach(thumb => {
        const finalBg = getFinalBg(thumb);
        if (finalBg && window.loadedThumbs.has(finalBg)) {
            applyThumb(thumb, finalBg);
        }
    });

    if (!('IntersectionObserver' in window)) {
        document.querySelectorAll('.lazy-thumb').forEach(thumb => {
             const finalBg = getFinalBg(thumb);
             if (finalBg) applyThumb(thumb, finalBg);
        });
        return;
    }

    // ── Synchronous first pass: load all thumbs currently visible in the viewport ──
    // IntersectionObserver fires asynchronously — visible items would show skeleton
    // for a brief frame. This eliminates that by loading them in the same JS tick.
    //
    // IMPORTANT: batch all getBoundingClientRect() reads before any writes.
    // Chromium invalidates its layout cache on every DOM write, so interleaving
    // reads (getBoundingClientRect) and writes (classList.add, style.setProperty)
    // inside one loop causes one full layout recalculation per thumbnail — O(n) thrash.
    // Separating into a read pass then a write pass means a single layout flush.
    const vw = window.innerWidth;
    const vh = window.innerHeight;
    const unloadedThumbs = Array.from(document.querySelectorAll('.lazy-thumb'))
        .filter(t => !t.classList.contains('loaded'));
    // ── Read phase: one layout flush for all rects ──
    const thumbRects = unloadedThumbs.map(t => t.getBoundingClientRect());
    // ── Write phase: no layout reads ──
    unloadedThumbs.forEach((thumb, i) => {
        const r = thumbRects[i];
        if (r.bottom > 0 && r.top < vh && r.right > 0 && r.left < vw) {
            const finalBg = getFinalBg(thumb);
            if (finalBg) {
                const img = new Image();
                img.src = finalBg;
                if (img.complete && img.naturalWidth > 0) {
                    applyThumb(thumb, finalBg);
                } else {
                    img.onload = () => applyThumb(thumb, finalBg);
                    img.onerror = () => {
                        const mime = thumb.dataset.mime || '';
                        if (mime.startsWith('audio/')) {
                            if (!thumb.querySelector('.sidebar-media-placeholder.audio')) {
                                const ph = document.createElement('div');
                                ph.className = 'sidebar-media-placeholder audio';
                                ph.innerHTML = '<i class="fa-solid fa-music"></i>';
                                thumb.prepend(ph);
                            }
                            thumb.classList.add('thumb-fallback');
                        }
                        thumb.classList.remove('lazy-thumb');
                    };
                }
                thumb.dataset.lazyObserved = 'true';
            }
        }
    });

    if (!lazyObserver) {
        lazyObserver = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const thumb = entry.target;
                    if (thumb.dataset.bg && !thumb.classList.contains('loaded')) {
                        const finalBg = getFinalBg(thumb);
                        if (finalBg) {
                            const img = new Image();
                            img.src = finalBg;
                            if (img.complete && img.naturalWidth > 0) {
                                applyThumb(thumb, finalBg);
                            } else {
                                img.onload = () => applyThumb(thumb, finalBg);
                                img.onerror = () => {
                                    const retries = parseInt(thumb.dataset.retries || '0');
                                    if (retries < 3) {
                                        thumb.dataset.retries = retries + 1;
                                        setTimeout(() => { img.src = finalBg + '?r=' + Date.now(); }, 1000);
                                    } else {
                                        const mime = thumb.dataset.mime || '';
                                        if (mime.startsWith('audio/')) {
                                            if (!thumb.querySelector('.sidebar-media-placeholder.audio')) {
                                                const ph = document.createElement('div');
                                                ph.className = 'sidebar-media-placeholder audio';
                                                ph.innerHTML = '<i class="fa-solid fa-music"></i>';
                                                thumb.prepend(ph);
                                            }
                                            thumb.classList.add('thumb-fallback');
                                        }
                                        thumb.classList.remove('lazy-thumb');
                                    }
                                };
                            }
                        }
                    }
                    lazyObserver.unobserve(thumb);
                }
            });
        }, { rootMargin: '200px 0px', threshold: 0.01 });
    }

    // Nudge lazy loading on tab switch to prevent stuck skeletons in inactive tabs
    if (!window._lazyVisibilityBound) {
        window._lazyVisibilityBound = true;
        document.addEventListener('visibilitychange', () => {
            if (!document.hidden && typeof window.initLazyLoading === 'function') {
                document.querySelectorAll('.lazy-thumb:not(.loaded)').forEach(t => {
                    delete t.dataset.lazyObserved;
                });
                window.initLazyLoading();
            }
        });
    }

    // Observe only off-screen thumbs — visible ones were already handled above
    document.querySelectorAll('.lazy-thumb').forEach(thumb => {
        if (!thumb.dataset.lazyObserved) {
            thumb.dataset.lazyObserved = 'true';
            lazyObserver.observe(thumb);
        }
    });
  };

  window.showMediaOverlay = (show = true) => {
    const overlay = document.querySelector('.v0ck_overlay');
    if (overlay) overlay.classList[show ? 'remove' : 'add']('v0ck_hidden');
  };

  window.flashMessage = (text, duration = 2000, type = 'info') => {
    // Ensure the stacking container exists
    const fsEl = document.fullscreenElement;
    const targetParent = fsEl || document.body;
    let container = document.getElementById('f0ck-flash-container');
    if (!container) {
      container = document.createElement('div');
      container.id = 'f0ck-flash-container';
      container.style.cssText = 'position:fixed;bottom:20px;left:20px;z-index:100200;display:flex;flex-direction:column-reverse;gap:8px;pointer-events:none;';
      targetParent.appendChild(container);
    } else {
      container.style.zIndex = '100200';
      if (container.parentElement !== targetParent) {
        targetParent.appendChild(container);
      }
    }

    const flash = document.createElement('div');
    if (typeof text === 'string' && text.includes('<a ')) {
      flash.innerHTML = text;
    } else {
      flash.textContent = text;
    }

    let baseStyle = 'color:#fff;padding:10px 18px;border-radius:6px;font-size:13px;opacity:0;transition:opacity 0.3s,transform 0.3s;box-shadow:0 4px 12px rgba(0,0,0,0.4);border:1px solid rgba(255,255,255,0.1);transform:translateY(6px);pointer-events:auto;';
    if (type === 'error') {
      baseStyle += 'background:rgba(200,30,30,0.95);';
    } else if (type === 'success') {
      baseStyle += 'background:rgba(30,130,60,0.95);';
    } else if (type === 'warning') {
      baseStyle += 'background:rgba(220,180,0,0.95);color:#000;';
    } else {
      baseStyle += 'background:rgba(30,30,30,0.95);';
    }

    flash.style.cssText = baseStyle;
    container.appendChild(flash);

    requestAnimationFrame(() => {
      flash.style.opacity = '1';
      flash.style.transform = 'translateY(0)';
    });

    setTimeout(() => {
      flash.style.opacity = '0';
      flash.style.transform = 'translateY(6px)';
      setTimeout(() => flash.remove(), 300);
    }, duration);
  };



  let video;
  let isNavigating = false;
  const main = document.getElementById('main');
  let posts = document.querySelector('.posts');
  const navbar = document.querySelector("nav.navbar");
  const gridCacheMap = new Map(); // Cache for detached grid nodes (URL -> {node, scroll})
  const itemCacheMap = new Map(); // Stale-while-revalidate cache for item AJAX HTML (cacheKey -> {html, ts})
  const ITEM_CACHE_MAX = 30; // Max entries; evict oldest on overflow
  window.activeMode = 0; // Default
  let audioCtx = null;
  let visualizerRafId = null;
  let audioSource = null;

  const isAnonUser = () => !(window.f0ckSession && window.f0ckSession.user && !window.f0ckSession.is_anon);
  window.isAnonUser = isAnonUser;

  const isGuestUser = () => {
    if (!window.f0ckSession) return true;
    if (window.f0ckSession.user && !window.f0ckSession.is_anon) return false;
    if (window.f0ckSession.is_anon && (window.f0ckSession.logged_in || window.f0ckSession.user)) return false;
    if (window.f0ckAnonSSH && (window.f0ckAnonSSH.isSessionReady || window.f0ckAnonSSH.pubkey)) return false;
    if (typeof localStorage !== 'undefined' && localStorage.getItem('f0ck_anon_ssh_pub')) return false;
    return !window.f0ckSession.logged_in;
  };
  window.isGuestUser = isGuestUser;

  const getRatingsCookie = () => {
    const raw = document.cookie.split('; ').find(r => r.startsWith('ratings='));
    if (!raw) return [];
    const val = raw.split('=').slice(1).join('=');
    const decoded = decodeURIComponent(val);
    const parts = decoded.includes('|') ? decoded.split('|') : decoded.split(',');
    return parts.filter(r => ['sfw','nsfw','nsfl','untagged'].includes(r));
  };
  window.getRatingsCookie = getRatingsCookie;

  const setRatingsCookie = (ratings) => {
    const val = ratings.join('|');
    document.cookie = `ratings=${val}; Path=/; Max-Age=31536000; SameSite=Lax`;
  };
  window.setRatingsCookie = setRatingsCookie;

  const clearRatingsCookie = () => {
    document.cookie = 'ratings=; Path=/; Max-Age=0; SameSite=Lax';
  };
  window.clearRatingsCookie = clearRatingsCookie;

  const reconcileAnonFilterPermissions = () => {
    if (isGuestUser()) {
      let changed = false;
      if (window.activeMode !== 0) {
        window.activeMode = 0;
        document.cookie = 'mode=0; Path=/; Max-Age=31536000; SameSite=Lax';
        changed = true;
      }
      const curRatings = getRatingsCookie();
      if (curRatings.length !== 1 || curRatings[0] !== 'sfw') {
        setRatingsCookie(['sfw']);
        changed = true;
      }
      return changed;
    }

    if (!isAnonUser()) return false;

    const perms = window.f0ckSession?.anon_permissions;
    if (!perms) return false;

    let changed = false;
    const canFilter = perms.filter !== false;
    const allowedModes = Array.isArray(perms.allowed_modes) ? perms.allowed_modes.map(m => String(m).toLowerCase()) : ['sfw', 'nsfw', 'untagged', 'all', 'nsfl'];
    const allowedMimes = Array.isArray(perms.allowed_mimes) ? perms.allowed_mimes.map(m => String(m).toLowerCase()) : ['image', 'video', 'audio', 'flash', 'pdf'];
    const modeNames = ['sfw', 'nsfw', 'untagged', 'all', 'nsfl'];

    // 1. Check locked rating from permissions (single allowed mode only)
    const isSingleAllowedMode = allowedModes.length === 1 && !allowedModes.includes('all');
    const lockedRating = isSingleAllowedMode ? allowedModes[0] : null;

    if (lockedRating) {
      const targetMode = modeNames.indexOf(lockedRating);
      if (targetMode >= 0 && window.activeMode !== targetMode) {
        window.activeMode = targetMode;
        document.cookie = `mode=${targetMode}; Path=/; Max-Age=31536000; SameSite=Lax`;
        changed = true;
      }
      const raw = getRatingsCookie();
      if (raw.length !== 1 || raw[0] !== lockedRating) {
        setRatingsCookie([lockedRating]);
        changed = true;
      }
    } else {
      // Validate activeMode
      const curModeName = modeNames[window.activeMode] || 'sfw';
      if (!canFilter || !allowedModes.includes(curModeName)) {
        const fallbackName = allowedModes.find(m => modeNames.includes(m)) || 'sfw';
        const fallbackIdx = modeNames.indexOf(fallbackName);
        window.activeMode = fallbackIdx >= 0 ? fallbackIdx : 0;
        document.cookie = `mode=${window.activeMode}; Path=/; Max-Age=31536000; SameSite=Lax`;
        changed = true;
      }

      // Validate ratings cookie
      const curRatings = getRatingsCookie();
      if (curRatings.length > 0) {
        if (!canFilter) {
          clearRatingsCookie();
          changed = true;
        } else {
          const filtered = curRatings.filter(r => allowedModes.includes(r));
          if (filtered.length !== curRatings.length) {
            changed = true;
            if (filtered.length > 0) {
              setRatingsCookie(filtered);
            } else {
              if (allowedModes.length === 1 && !allowedModes.includes('all')) {
                setRatingsCookie([allowedModes[0]]);
              } else {
                clearRatingsCookie();
              }
            }
          }
        }
      }
    }

    // 2. Validate MIME cookie
    const cookieMimeRaw = document.cookie.split('; ').find(row => row.startsWith('mime='));
    const isSingleMime = Array.isArray(allowedMimes) && allowedMimes.length === 1;
    const singleMime = isSingleMime ? allowedMimes[0] : null;

    if (isSingleMime) {
      const curVal = cookieMimeRaw ? cookieMimeRaw.split('=')[1] : null;
      if (curVal !== singleMime) {
        document.cookie = `mime=${singleMime}; path=/; max-age=31536000; SameSite=Lax`;
        changed = true;
      }
    } else if (cookieMimeRaw) {
      const curVal = cookieMimeRaw.split('=')[1] || '';
      const curParts = curVal ? curVal.split(',').filter(m => ['video', 'audio', 'image', 'flash', 'pdf'].includes(m)) : [];
      if (!canFilter) {
        if (curVal !== '') {
          document.cookie = 'mime=; path=/; max-age=0; SameSite=Lax';
          changed = true;
        }
      } else {
        const filteredParts = curParts.filter(m => allowedMimes.includes(m));
        if (filteredParts.length !== curParts.length) {
          changed = true;
          if (filteredParts.length > 0) {
            document.cookie = `mime=${filteredParts.join(',')}; path=/; max-age=31536000; SameSite=Lax`;
          } else {
            document.cookie = 'mime=; path=/; max-age=0; SameSite=Lax';
          }
        }
      }
    }

    return changed;
  };
  window.reconcileAnonFilterPermissions = reconcileAnonFilterPermissions;

  const updateMimeLabel = () => {
    reconcileAnonFilterPermissions();
    const isAnon = isAnonUser();
    const allowedMimes = window.f0ckSession?.anon_permissions?.allowed_mimes;
    const isSingleMime = isAnon && Array.isArray(allowedMimes) && allowedMimes.length === 1;
    const singleMime = isSingleMime ? allowedMimes[0] : null;

    let selected = [];
    if (isSingleMime) {
      selected = [singleMime];
      const cookieMime = document.cookie.split('; ').find(row => row.startsWith('mime='));
      const val = cookieMime ? cookieMime.split('=')[1] : null;
      if (val !== singleMime) {
        document.cookie = `mime=${singleMime}; path=/; max-age=31536000; SameSite=Lax`;
      }
    } else {
      let mimeStr = null;
      const cookieMime = document.cookie.split('; ').find(row => row.startsWith('mime='));
      if (cookieMime) {
        mimeStr = cookieMime.split('=')[1];
      }
      selected = mimeStr ? mimeStr.split(',').filter(m => ['video', 'audio', 'image', 'flash'].includes(m)) : [];
      if (isAnon && Array.isArray(allowedMimes) && allowedMimes.length > 0) {
        const filtered = selected.filter(m => allowedMimes.includes(m));
        if (filtered.length !== selected.length) {
          selected = filtered;
          if (selected.length > 0) {
            document.cookie = `mime=${selected.join(',')}; path=/; max-age=31536000; SameSite=Lax`;
          } else {
            document.cookie = `mime=; path=/; max-age=0; SameSite=Lax`;
          }
        }
      }
    }
    
    document.querySelectorAll('.nav-mime-btn').forEach(btn => {
      let label = 'ALL';
      if (selected.length > 0) {
        label = selected.map(s => s.charAt(0).toUpperCase()).sort().join(',');
      }
      btn.innerHTML = `${label} ▾`;
      if (isSingleMime) {
        btn.classList.add('locked');
      }
    });

    document.querySelectorAll('.nav-mime-menu').forEach(menu => {
      menu.querySelectorAll('input[type="checkbox"]').forEach(cb => {
        if (isSingleMime) {
          cb.checked = (cb.value === singleMime);
          cb.disabled = true;
          const label = cb.closest('label') || cb.parentElement;
          if (label) {
            label.classList.add('locked');
            label.style.cursor = 'not-allowed';
            label.title = 'Locked by site permissions';
          }
        } else {
          cb.checked = selected.includes(cb.value);
        }
      });
    });

    if (window.updateFilterBadge) window.updateFilterBadge();
  };
  window.updateMimeLabel = updateMimeLabel;

  const updateFilterBadge = () => {
    reconcileAnonFilterPermissions();
    const badge = document.getElementById('nav-filter-badge');
    if (!badge) return;

    let activeMode = 0;
    if (window.activeMode !== undefined) {
      activeMode = window.activeMode;
    } else {
      const cookieMode = document.cookie.split('; ').find(row => row.startsWith('mode='));
      if (cookieMode) {
        activeMode = +cookieMode.split('=')[1];
      } else if (window.f0ckSession && window.f0ckSession.mode !== undefined) {
        activeMode = window.f0ckSession.mode;
      }
    }

    // Check multi-rating cookie
    const ratingsRaw = document.cookie.split('; ').find(row => row.startsWith('ratings='));
    const activeRatings = window.getRatingsCookie ? window.getRatingsCookie() : (() => {
      if (!ratingsRaw) return [];
      const val = ratingsRaw.split('=').slice(1).join('=');
      const decoded = decodeURIComponent(val);
      const parts = decoded.includes('|') ? decoded.split('|') : decoded.split(',');
      return parts.filter(r => ['sfw','nsfw','nsfl','untagged'].includes(r));
    })();

    let hasMimeFilter = false;
    let mimeStr = '';
    const cookieMime = document.cookie.split('; ').find(row => row.startsWith('mime='));
    if (cookieMime) {
      mimeStr = cookieMime.split('=')[1] || '';
    }
    const selectedMimes = mimeStr ? mimeStr.split(',').filter(m => ['video', 'audio', 'image', 'flash'].includes(m)) : [];
    if (selectedMimes.length > 0) {
      hasMimeFilter = true;
    }

    let badgeText = '';
    let badgeClass = 'filter-badge';

    if (activeRatings.length > 0) {
      // If every available rating is selected, treat as ALL
      const nsflEnabled = !!(window.f0ckSession?.enable_nsfl ?? true); // default true if unknown
      const allRatings = nsflEnabled
        ? ['sfw', 'nsfw', 'nsfl', 'untagged']
        : ['sfw', 'nsfw', 'untagged'];
      const isAll = allRatings.every(r => activeRatings.includes(r));

      if (isAll) {
        badgeText = 'ALL';
        badgeClass += ' filter-badge-all';
      } else if (activeRatings.length === 1) {
        // Single rating — keep existing single-color badge style
        const single = activeRatings[0];
        const abbr = { sfw: 'SFW', nsfw: 'NSFW', nsfl: 'NSFL', untagged: 'UNT' };
        badgeText = abbr[single] || single.toUpperCase();
        if (single === 'nsfw') badgeClass += ' filter-badge-nsfw';
        else if (single === 'nsfl') badgeClass += ' filter-badge-nsfl';
        else if (single === 'sfw') badgeClass += ' filter-badge-sfw';
        else badgeClass += ' filter-badge-unt';
      } else {
        // Multi-rating: render individual colored letter chips, neutral container
        const letterMap = { sfw: 'S', nsfw: 'N', nsfl: 'N', untagged: 'U' };
        const colorMap = { sfw: 'filter-letter-sfw', nsfw: 'filter-letter-nsfw', nsfl: 'filter-letter-nsfl', untagged: 'filter-letter-unt' };
        badgeText = activeRatings.map(r =>
          `<span class="filter-letter ${colorMap[r] || ''}" title="${r.toUpperCase()}">${letterMap[r] || r[0].toUpperCase()}</span>`
        ).join('');
        badgeClass += ' filter-badge-multi';
      }
    } else {
      switch (activeMode) {
        case 0:
          badgeText = 'SFW';
          badgeClass += ' filter-badge-sfw';
          break;
        case 1:
          badgeText = 'NSFW';
          badgeClass += ' filter-badge-nsfw';
          break;
        case 4:
          badgeText = 'NSFL';
          badgeClass += ' filter-badge-nsfl';
          break;
        case 2:
          badgeText = 'UNT';
          badgeClass += ' filter-badge-unt';
          break;
        case 3:
          badgeText = 'ALL';
          badgeClass += ' filter-badge-all';
          break;
        default:
          badgeText = 'SFW';
          badgeClass += ' filter-badge-sfw';
      }
    }

    const isRandom = document.cookie.includes('random_mode=1');
    let zomgHtml = '';
    if (isRandom) {
      zomgHtml = ' <span class="zomg-z" title="ZOMG Mode Active (Shuffle!)">Z</span>';
    }

    badge.className = badgeClass;
    // Always wrap rating text in a row container so mime icons can sit on the next row cleanly
    badge.innerHTML = `<span class="filter-rating-row">${badgeText}${zomgHtml}</span>`;

    if (hasMimeFilter) {
      const iconsContainer = document.createElement('span');
      iconsContainer.className = 'filter-mime-icons';
      selectedMimes.forEach(mime => {
        const icon = document.createElement('i');
        let iconClass = 'mime-icon ';
        if (mime === 'audio') iconClass += 'fa-solid fa-music mime-icon-audio';
        else if (mime === 'image') iconClass += 'fa-solid fa-image mime-icon-image';
        else if (mime === 'video') iconClass += 'fa-solid fa-film mime-icon-video';
        else if (mime === 'flash') iconClass += 'fa-solid fa-bolt mime-icon-flash';
        
        icon.className = iconClass;
        icon.title = mime.charAt(0).toUpperCase() + mime.slice(1);
        iconsContainer.appendChild(icon);
      });
      badge.appendChild(iconsContainer);
    }

    badge.style.display = 'inline-flex';
  };
  window.updateFilterBadge = updateFilterBadge;

  document.addEventListener('f0ck:modeChanged', () => {
    updateFilterBadge();
  });
  window.randomizeLogo = () => {
    const logoArr = window.f0ckBrandImages;
    if (!logoArr || !logoArr.length) return;
    const img = document.getElementById('navbar-logo');
    if (!img) return;
    // Avoid picking the same image if there's more than one
    let randomImg;
    do {
      randomImg = logoArr[Math.floor(Math.random() * logoArr.length)];
    } while (logoArr.length > 1 && randomImg === img.getAttribute('src'));
    img.src = randomImg;
  };

  // Initialize active mode.
  // For logged-in users, the server's f0ckSession.mode (sourced from user_options DB) is the
  // authoritative cross-device truth. A stale local `mode` cookie from a previous session on
  // this device could disagree (e.g. PC had ALL, mobile set SFW — PC cookie still says 3).
  // Fix: prefer f0ckSession.mode when logged in and reconcile the local cookie to match.
  // For guests: fall back to cookie (no session = cookie is the only persistence).
  if (window.f0ckSession && window.f0ckSession.logged_in && !window.f0ckSession.is_anon && window.f0ckSession.mode !== undefined) {
    window.activeMode = +window.f0ckSession.mode;
    // Reconcile the local mode cookie so future reads are consistent on this device
    document.cookie = `mode=${window.activeMode}; Path=/; Max-Age=31536000`;
    // If the authoritative mode is ALL (3), also clear any stale ratings cookie.
    // Otherwise a ratings=sfw cookie left from a previous device's filter would make
    // the badge and button UI show the wrong state (even though the server ignores
    // the ratings cookie when mode=3).
    if (window.activeMode === 3) {
      document.cookie = 'ratings=; Path=/; Max-Age=0';
    }
  } else {
    const _modeCookieRaw = document.cookie.split('; ').find(r => r.startsWith('mode='));
    if (_modeCookieRaw) {
      window.activeMode = +_modeCookieRaw.split('=')[1];
    } else if (window.f0ckSession && window.f0ckSession.mode !== undefined) {
      window.activeMode = +window.f0ckSession.mode;
    } else {
      // Legacy fallback: read from old .mode-btn.active if present
      const activeModeBtn = document.querySelector('.mode-btn.active');
      if (activeModeBtn && activeModeBtn.href) {
        const modeMatch = activeModeBtn.href.match(/\/mode\/(\d)/);
        if (modeMatch) window.activeMode = +modeMatch[1];
      }
    }
    const filterReconciled = reconcileAnonFilterPermissions();
    if (filterReconciled) {
      const postsEl = document.querySelector('.posts, .tags-grid');
      if (postsEl && postsEl.children.length === 0 && window.loadPageAjax) {
        window.loadPageAjax(window.location.href, { skipPush: true, skipCache: true });
      }
    }
  }

  // Track active mode on <html> for notification thumbnail blur.
  // data-notif-filter is set to the current mode string and also
  // drives src-swapping to pre-blurred thumbnails (/t/{id}_blur.webp).
  const _notifBlurShouldBlur = (itemMode, activeMode) => {
    if (activeMode === 3) return false; // ALL mode: never blur
    if (activeMode === 0) return itemMode === 'nsfw' || itemMode === 'nsfl'; // SFW filter
    if (activeMode === 1) return itemMode === 'nsfl';                         // NSFW filter
    if (activeMode === 4) return itemMode === 'sfw' || itemMode === 'nsfw';   // NSFL filter
    return false;
  };

  window.applyNotifThumbBlur = (container) => {
    const root = container || document;
    const mode = window.activeMode ?? 3;
    root.querySelectorAll('.notif-thumb[data-mode]').forEach(thumb => {
      const img = thumb.querySelector('img');
      if (!img) return;
      const itemMode = thumb.dataset.mode;
      if (!itemMode || thumb.classList.contains('revealed')) return;

      if (_notifBlurShouldBlur(itemMode, mode)) {
        if (!thumb.classList.contains('notif-thumb-blurred')) {
          const htmlOrigSrc = img.getAttribute('data-orig-src');
          const idMatch = img.src.match(/\/t\/(\d+)(?:_blur)?\.webp/);
          if (idMatch) {
            // Ensure JS dataset has origSrc (server may have set it via HTML attribute)
            if (!img.dataset.origSrc) {
              img.dataset.origSrc = htmlOrigSrc || `/t/${idMatch[1]}.webp`;
            }
            // Only swap src if not already the blur version
            if (!img.src.includes('_blur.webp')) {
              img.src = `/t/${idMatch[1]}_blur.webp`;
            }
            thumb.classList.add('notif-thumb-blurred');
          }
        }
      } else {
        // Restore original thumbnail
        const origSrc = img.dataset.origSrc || img.getAttribute('data-orig-src');
        if (origSrc) {
          img.src = origSrc;
          delete img.dataset.origSrc;
          thumb.classList.remove('notif-thumb-blurred');
        }
      }
    });
  };



  const _updateNotifFilterClass = (mode) => {
    const modeNames = { 0: 'sfw', 1: 'nsfw', 2: 'untagged', 3: 'all', 4: 'nsfl' };
    htmlEl.setAttribute('data-notif-filter', modeNames[mode] || 'all');
    if (mode === 3) htmlEl.classList.add('mode-all');
    else htmlEl.classList.remove('mode-all');
    // Re-apply blur src swaps whenever mode changes
    window.applyNotifThumbBlur();
  };
  _updateNotifFilterClass(window.activeMode ?? 3);
  document.addEventListener('f0ck:modeChanged', (e) => {
    _updateNotifFilterClass(e.detail?.mode ?? 3);
  });
  // Apply on hard load (F5) and on every AJAX navigation (f0ck:contentLoaded)
  const _applyNotifBlurOnNav = () => window.applyNotifThumbBlur();
  document.addEventListener('DOMContentLoaded', _applyNotifBlurOnNav);
  document.addEventListener('f0ck:contentLoaded', _applyNotifBlurOnNav);

  // ---- Multi-select Rating Toggles ----
  const syncRatingButtonUI = () => {
    reconcileAnonFilterPermissions();
    let activeRatings = getRatingsCookie();
    if (activeRatings.length === 0) {
      if (window.activeMode === 0) activeRatings = ['sfw'];
      else if (window.activeMode === 1) activeRatings = ['nsfw'];
      else if (window.activeMode === 4) activeRatings = ['nsfl'];
      else if (window.activeMode === 2) activeRatings = ['untagged'];
    }
    const selector = document.getElementById('rating-selector');
    if (!selector) return;
    const isGuest = isGuestUser();
    if (isGuest) {
      selector.classList.add('locked');
      selector.dataset.guestLocked = 'true';
      selector.dataset.lockedRating = 'sfw';
      selector.querySelectorAll('.rating-toggle-btn').forEach(btn => {
        if (btn.dataset.rating === 'sfw') {
          btn.classList.add('active', 'locked');
          btn.disabled = true;
          btn.style.cursor = 'default';
          btn.style.opacity = '1';
          btn.style.display = '';
          if (!btn.querySelector('.fa-lock')) {
            const lockIcon = document.createElement('i');
            lockIcon.className = 'fa-solid fa-lock';
            lockIcon.style.marginLeft = '5px';
            lockIcon.style.fontSize = '0.75em';
            lockIcon.style.opacity = '0.7';
            btn.appendChild(lockIcon);
          }
        } else {
          btn.classList.remove('active');
          btn.classList.add('locked');
          btn.disabled = true;
          btn.style.cursor = 'not-allowed';
          btn.style.opacity = '0.45';
          btn.style.display = '';
          btn.title = (window.f0ckI18n && window.f0ckI18n.members_only) || 'Only available for members';
          if (!btn.querySelector('.fa-lock')) {
            const lockIcon = document.createElement('i');
            lockIcon.className = 'fa-solid fa-lock';
            lockIcon.style.marginLeft = '5px';
            lockIcon.style.fontSize = '0.75em';
            lockIcon.style.opacity = '0.7';
            btn.appendChild(lockIcon);
          }
        }
      });
      return;
    }

    // User is NOT a guest (anonymous user or registered member)
    delete selector.dataset.guestLocked;
    selector.removeAttribute('data-guest-locked');

    // Check single allowed mode restrictions
    const anonPerms = window.f0ckSession?.anon_permissions;
    const allowedModes = Array.isArray(anonPerms?.allowed_modes)
      ? anonPerms.allowed_modes.map(m => String(m).toLowerCase())
      : ['sfw', 'nsfw', 'untagged', 'all', 'nsfl'];
    const isSingleAllowedMode = isAnonUser() && allowedModes.length === 1 && !allowedModes.includes('all');
    const singleLockedMode = isSingleAllowedMode ? allowedModes[0] : null;

    if (singleLockedMode) {
      selector.classList.add('locked');
      selector.dataset.lockedRating = singleLockedMode;
      selector.querySelectorAll('.rating-toggle-btn').forEach(btn => {
        if (btn.dataset.rating === singleLockedMode) {
          btn.classList.add('active', 'locked');
          btn.disabled = true;
          btn.style.cursor = 'not-allowed';
          btn.style.opacity = '0.85';
          if (!btn.querySelector('.fa-lock')) {
            const lockIcon = document.createElement('i');
            lockIcon.className = 'fa-solid fa-lock';
            lockIcon.style.marginLeft = '5px';
            lockIcon.style.fontSize = '0.75em';
            lockIcon.style.opacity = '0.7';
            btn.appendChild(lockIcon);
          }
        } else {
          btn.classList.remove('active');
          btn.disabled = true;
          btn.style.display = 'none';
        }
      });
      return;
    }

    // User is NOT locked into a single mode: unlock container and buttons
    selector.classList.remove('locked');
    delete selector.dataset.lockedRating;
    selector.removeAttribute('data-locked-rating');

    selector.querySelectorAll('.rating-toggle-btn').forEach(btn => {
      const r = btn.dataset.rating;
      btn.classList.remove('locked');
      btn.disabled = false;
      btn.style.cursor = '';
      btn.style.opacity = '';
      btn.style.display = '';
      btn.querySelectorAll('.fa-lock').forEach(icon => icon.remove());
      if (r) {
        btn.classList.toggle('active', activeRatings.includes(r));
        if (btn.title === 'Only available for members' || (window.f0ckI18n && btn.title === window.f0ckI18n.members_only)) {
          btn.title = r.toUpperCase();
        }
      }
    });

    // ALL button: active when ratings cookie is empty/absent (server mode is the authority)
    const allBtn = document.getElementById('rating-btn-all');
    if (allBtn) {
      allBtn.classList.remove('locked');
      allBtn.disabled = false;
      allBtn.style.cursor = '';
      allBtn.style.opacity = '';
      allBtn.querySelectorAll('.fa-lock').forEach(icon => icon.remove());
      allBtn.classList.toggle('active', (getRatingsCookie().length === 0 && window.activeMode === 3) || activeRatings.length === 0);
      if (allBtn.title === 'Only available for members' || (window.f0ckI18n && allBtn.title === window.f0ckI18n.members_only)) {
        allBtn.title = 'Show All Ratings';
      }
    }
  };

  // Wire up rating toggle buttons
  document.addEventListener('click', (e) => {
    const btn = e.target.closest('.rating-toggle-btn');
    if (!btn) return;
    if (isGuestUser() || btn.disabled || btn.classList.contains('locked') || btn.closest('#rating-selector[data-locked-rating]') || btn.closest('#rating-selector[data-guest-locked]') || btn.closest('#rating-selector.locked')) {
      e.preventDefault();
      e.stopPropagation();
      return;
    }
    e.preventDefault();
    e.stopPropagation();

    const isAllBtn = btn.classList.contains('rating-toggle-all');
    const fromFilterModal = !!btn.closest('#excluded-tags-overlay');

    if (isAllBtn) {
      // ALL: clear ratings cookie, set mode=3 on server
      // Must set activeMode BEFORE syncRatingButtonUI so the ALL button
      // active-state check (activeRatings.length === 0 && window.activeMode === 3) passes.
      clearRatingsCookie();
      window.activeMode = 3;
      document.cookie = `mode=3; Path=/; Max-Age=31536000`;
      syncRatingButtonUI();
      if (fromFilterModal) window._keepFilterModal = true;
      document.dispatchEvent(new CustomEvent('f0ck:modeChanged', { detail: { mode: 3 } }));
      fetch('/mode/3', { headers: { 'X-Requested-With': 'XMLHttpRequest' }, credentials: 'include' })
        .then(r => r.json())
        .then(data => {
          if (data.success) {
            window.flashMessage('ALL MODE ACTIVATED');
            gridCacheMap.clear();
            const isOnaraOpen = document.body.classList.contains('onara-modal-open');
            const isGridView = document.querySelector('.posts, .tags-grid');
            const isItemView = document.getElementById('prev') || document.getElementById('next') || /^\/\d+/.test(window.location.pathname);
            let reloadPromise = null;
            if (isOnaraOpen) {
              const bgUrl = window._onaraReturnUrl || getOnaraBaseUrl();
              const urlObj = new URL(bgUrl, window.location.origin);
              urlObj.searchParams.delete('mode');
              reloadPromise = window.loadPageAjax ? window.loadPageAjax(urlObj.toString(), true, { skipCache: true, skipPush: true }) : null;
            } else if (isGridView) {
              const currentUrl = new URL(window.location.href);
              currentUrl.searchParams.delete('mode');
              reloadPromise = window.loadPageAjax ? window.loadPageAjax(currentUrl.toString(), true, { skipCache: true }) : null;
            } else if (isItemView) {
              reloadPromise = window.loadItemAjax ? window.loadItemAjax(window.location.href, true, { skipCache: true }) : null;
            }
            if (fromFilterModal) Promise.resolve(reloadPromise).finally(() => { window._keepFilterModal = false; });
          }
        })
        .catch(() => { if (fromFilterModal) window._keepFilterModal = false; });
      return;
    }

    const rating = btn.dataset.rating;
    if (!rating) return;

    // Toggle rating in cookie
    const activeRatings = getRatingsCookie();
    const idx = activeRatings.indexOf(rating);
    if (idx === -1) {
      activeRatings.push(rating);
    } else {
      activeRatings.splice(idx, 1);
    }

    if (activeRatings.length === 0) {
      // Nothing selected: treat as ALL (no filter = show everything)
      clearRatingsCookie();
      window.activeMode = 3;
      document.cookie = `mode=3; Path=/; Max-Age=31536000`;
    } else {
      setRatingsCookie(activeRatings);
      // Use mode=3 (ALL) on server when multi-select; single-select maps to native mode
      const singleModeMap = { sfw: 0, nsfw: 1, nsfl: 4, untagged: 2 };
      const serverMode = activeRatings.length === 1 ? (singleModeMap[activeRatings[0]] ?? 3) : 3;
      window.activeMode = serverMode;
      document.cookie = `mode=${serverMode}; Path=/; Max-Age=31536000`;
    }

    syncRatingButtonUI();
    document.dispatchEvent(new CustomEvent('f0ck:modeChanged', { detail: { mode: window.activeMode } }));

    if (fromFilterModal) window._keepFilterModal = true;

    // Sync server mode and reload content
    fetch(`/mode/${window.activeMode}`, { headers: { 'X-Requested-With': 'XMLHttpRequest' }, credentials: 'include' })
      .then(r => r.json())
      .then(data => {
        if (data.success) {
          const label = activeRatings.length > 0
            ? activeRatings.map(r => r.toUpperCase()).join('+') + ' ACTIVE'
            : 'ALL MODE ACTIVATED';
          window.flashMessage(label);
          gridCacheMap.clear();
          const isOnaraOpen = document.body.classList.contains('onara-modal-open');
          const isGridView = document.querySelector('.posts, .tags-grid');
          const isItemView = document.getElementById('prev') || document.getElementById('next') || /^\/\d+/.test(window.location.pathname);
          let reloadPromise = null;
          if (isOnaraOpen) {
            const bgUrl = window._onaraReturnUrl || getOnaraBaseUrl();
            const urlObj = new URL(bgUrl, window.location.origin);
            urlObj.searchParams.delete('mode');
            reloadPromise = window.loadPageAjax ? window.loadPageAjax(urlObj.toString(), true, { skipCache: true, skipPush: true }) : null;
          } else if (isGridView) {
            const currentUrl = new URL(window.location.href);
            currentUrl.searchParams.delete('mode');
            reloadPromise = window.loadPageAjax ? window.loadPageAjax(currentUrl.toString(), true, { skipCache: true }) : null;
          } else if (isItemView) {
            updateNavForMode(window.activeMode);
            reloadPromise = window.loadItemAjax ? window.loadItemAjax(window.location.href, true, { skipCache: true }) : null;
          }
          if (fromFilterModal) Promise.resolve(reloadPromise).finally(() => { window._keepFilterModal = false; });
        } else {
          if (fromFilterModal) window._keepFilterModal = false;
        }
      })
      .catch(() => { if (fromFilterModal) window._keepFilterModal = false; });
  });

  // Initialize rating toggle UI on page load
  window.syncRatingButtonUI = syncRatingButtonUI;

  // Migrate old URL-encoded ratings cookie to new pipe-separated format
  (function migrateRatingsCookie() {
    const raw = document.cookie.split('; ').find(r => r.startsWith('ratings='));
    if (!raw) return;
    const val = raw.split('=').slice(1).join('=');
    if (val.includes('%')) {
      // Cookie is URL-encoded — rewrite it with new format
      const decoded = decodeURIComponent(val);
      const cleaned = decoded.replace(/,/g, '|');
      document.cookie = `ratings=${cleaned}; Path=/; Max-Age=31536000; SameSite=Lax`;
    }
  })();

  syncRatingButtonUI();

  window.addEventListener('f0ck:anon_session_ready', (e) => {
    if (window.f0ckSession) {
      window.f0ckSession.user = 'anonymous';
      window.f0ckSession.is_anon = true;
      window.f0ckSession.logged_in = true;
      if (e.detail?.userId) {
        window.f0ckSession.id = e.detail.userId;
        window.f0ckSession.user_id = e.detail.userId;
      }
    }
    syncRatingButtonUI();
  });

  // Cleanup strict param from URL bar on initial load if present (legacy or external link)
  if (window.location.search.includes('strict=1')) {
    const cleanUrl = window.location.pathname + window.location.search.replace(/[?&]strict=1/, '').replace(/[?&]$/, '') + window.location.hash;
    history.replaceState({}, '', cleanUrl);
  }

  // User & Visitor dropdown toggle
  const userToggle = document.getElementById('nav-user-toggle');
  const userMenu = document.getElementById('nav-user-menu');
  const visitorToggle = document.getElementById('nav-visitor-toggle');
  const visitorMenu = document.getElementById('nav-visitor-menu');
  const hallsToggle = document.getElementById('nav-halls-toggle');
  const hallsMenu = document.getElementById('nav-halls-menu');
  const vHallsToggle = document.getElementById('nav-visitor-halls-toggle');
  const vHallsMenu = document.getElementById('nav-visitor-halls-menu');

  if (userToggle && userMenu) {
    userToggle.addEventListener('click', (e) => {
      e.stopPropagation();
      if (e.target.closest('.nav-avatar-img, .nav-avatar-icon')) {
        const username = window.f0ckSession?.is_anon ? (window.f0ckSession?.login || window.f0ckSession?.user) : window.f0ckSession?.user;
        if (username) {
          const url = `/user/${username.toLowerCase()}`;
          if (typeof window.loadPageAjax === 'function') {
            window.loadPageAjax(url, true);
          } else {
            window.location.href = url;
          }
          return;
        }
      }
      const opening = !userMenu.classList.contains('show');
      userMenu.classList.toggle('show');
      userToggle.classList.toggle('is-active', opening);
    });

    userMenu.querySelectorAll('a').forEach(link => {
      link.addEventListener('click', () => {
        userMenu.classList.remove('show');
        userMenu.classList.remove('show-mobile');
        userToggle.classList.remove('is-active');
      });
    });
  }

  if (visitorToggle && visitorMenu) {
    visitorToggle.addEventListener('click', (e) => {
      e.stopPropagation();
      visitorMenu.classList.toggle('show');
    });

    visitorMenu.querySelectorAll('a').forEach(link => {
      link.addEventListener('click', () => {
        visitorMenu.classList.remove('show');
        visitorMenu.classList.remove('show-mobile');
      });
    });
  }

  const setupHallsToggle = (toggle, menu) => {
    if (toggle && menu) {
      toggle.addEventListener('click', (e) => {
        e.preventDefault();
        e.stopPropagation();
        menu.classList.toggle('show');
      });
      menu.querySelectorAll('a').forEach(link => {
        link.addEventListener('click', () => menu.classList.remove('show'));
      });
    }
  };

  setupHallsToggle(hallsToggle, hallsMenu);
  setupHallsToggle(vHallsToggle, vHallsMenu);

  document.addEventListener('click', (e) => {
    if (userMenu && !userMenu.contains(e.target) && userToggle && !userToggle.contains(e.target)) {
      userMenu.classList.remove('show');
      userToggle.classList.remove('is-active');
    }
    if (visitorMenu && !visitorMenu.contains(e.target) && visitorToggle && !visitorToggle.contains(e.target)) {
      visitorMenu.classList.remove('show');
    }
    if (hallsMenu && !hallsMenu.contains(e.target) && hallsToggle && !hallsToggle.contains(e.target)) {
      hallsMenu.classList.remove('show');
    }
    if (vHallsMenu && !vHallsMenu.contains(e.target) && vHallsToggle && !vHallsToggle.contains(e.target)) {
      vHallsMenu.classList.remove('show');
    }
  });

  // Randomize logo on click
  document.addEventListener('click', (e) => {
    if (e.target.closest('.navbar-brand') || e.target.id === 'navbar-logo') {
      window.randomizeLogo();
    }
  });

  const fallbackCopy = (text, msg) => {
    const textarea = document.createElement("textarea");
    textarea.value = text;
    textarea.style.position = "fixed";
    textarea.style.left = "-9999px";
    textarea.style.top = "0";
    document.body.appendChild(textarea);
    textarea.focus();
    textarea.select();
    try {
      document.execCommand("copy");
      if (typeof window.flashMessage === 'function') {
        window.flashMessage(msg);
      }
    } catch (err) {
      console.error("Fallback copy failed:", err);
    }
    document.body.removeChild(textarea);
  };

  const copyCurrentUrl = () => {
    const url = window.location.href;
    const msg = (window.f0ckI18n && window.f0ckI18n.copied) || 'URL copied to clipboard';
    if (navigator.clipboard && navigator.clipboard.writeText) {
      navigator.clipboard.writeText(url).then(() => {
        if (typeof window.flashMessage === 'function') {
          window.flashMessage(msg);
        }
      }).catch(() => {
        fallbackCopy(url, msg);
      });
    } else {
      fallbackCopy(url, msg);
    }
  };
  window.copyCurrentUrl = copyCurrentUrl;

  // Left-click on timestamp copies the current URL to clipboard and shows toast (same as pressing "y")
  document.addEventListener('click', (e) => {
    const tsTarget = e.target.closest('.timestamp-link, time.timeago');
    if (tsTarget) {
      if (e.button === 0) {
        e.preventDefault();
        e.stopPropagation();
        e.stopImmediatePropagation();
        copyCurrentUrl();
      }
    }
  }, true);

  // Modal Logic (Login, Forgot, Reset, Register)
  const loginBtn = document.getElementById('nav-login-btn');
  const loginModal = document.getElementById('login-modal');
  const loginClose = document.getElementById('login-modal-close');
  const registerBtn = document.getElementById('nav-register-btn');
  const registerModal = document.getElementById('register-modal');
  const registerClose = document.getElementById('register-modal-close');

  const switchModalView = (view) => {
    if (!loginModal) return;
    const views = ['login', 'forgot', 'reset'];
    views.forEach(v => {
      const el = document.getElementById(`modal-${v}-view`);
      if (el) el.style.display = (v === view) ? 'block' : 'none';
    });
  };

  const openModal = (modal, view = 'login') => {
    if (!modal) return;
    if (modal === loginModal) switchModalView(view);
    modal.style.display = 'flex';
    document.body.classList.add('modal-open');
    if (visitorMenu) visitorMenu.classList.remove('show');
  };

  const closeModal = (modal) => {
    if (modal) {
      modal.style.display = 'none';
      document.body.classList.remove('modal-open');
    }
  };

  /**
   * Surgical cleanup of scroll-lock state and modal visibility.
   * Used during AJAX navigation to ensure the UI remains interactive.
   */
  window.resetGlobalScrollState = () => {
    document.body.classList.remove('modal-open');
    document.documentElement.classList.remove('modal-open');
    document.body.style.overflow = '';
    document.body.style.height = '';
    document.documentElement.style.overflow = '';
    document.documentElement.style.height = '';
    const pw = document.querySelector('.pagewrapper');
    if (pw) {
      pw.style.overflow = '';
      pw.style.height = '';
    }
  };

  window.hideAllModals = () => {
    const modalIds = [
      'login-modal', 'register-modal', 'forgot-modal', 'reset-modal',
      'report-modal', 'halls-modal', 'metadata-modal', 'warning-modal',
      'shortcuts-modal', 'upload-drag-modal', 'excluded-tags-overlay',
      'content-warning-modal', 'gchat-img-modal', 'image-modal', 'info-modal', 'visibility-modal'
    ];
    modalIds.forEach(id => {
      // Don't close the filter modal during a background mime-filter reload
      if (id === 'excluded-tags-overlay' && window._keepFilterModal) return;
      const el = document.getElementById(id);
      if (el) {
        el.classList.remove('show', 'visible');
        // If the modal uses CSS classes for visibility, we must clear the inline display
        // to allow those classes to work later. For others, we force display: none.
        if (['upload-drag-modal', 'image-modal', 'gchat-img-modal', 'excluded-tags-overlay'].includes(id)) {
           el.style.display = '';
        } else {
           el.style.display = 'none';
        }
      }
    });
    // Also handle class-based modals if any
    document.querySelectorAll('.modal-overlay, .modal-backdrop').forEach(el => {
      el.classList.remove('show', 'visible');
      // Do NOT set display: none here as it might override CSS-based visibility
      // for modals that use the classes we just removed.
    });
  };

  // ── Onara Alternative Flavor: Fullscreen Modal Wrapper ─────────────────────
  const isOnaraActive = () => {
    const stored = (() => { try { return localStorage.getItem('f0ck_onara_enabled'); } catch { return null; } })();
    if (stored !== null) {
      const active = stored === 'true';
      try {
        const cookieVal = active ? '1' : '0';
        if (!document.cookie.includes(`f0ck_onara=${cookieVal}`)) {
          document.cookie = `f0ck_onara=${cookieVal}; path=/; max-age=31536000; SameSite=Lax`;
        }
      } catch {}
      return active;
    }
    return !!(window.f0ckSession?.onara || window.onara);
  };

  const isCurrentlyInOnara = () => {
    return document.body.classList.contains('onara-modal-open') ||
      (typeof isOnaraActive === 'function' && isOnaraActive() && !!document.querySelector('#onara-item-mount > *:not(.onara-mount-loading)'));
  };
  window.isCurrentlyInOnara = isCurrentlyInOnara;

  const getOrCreateOnaraModal = () => {
    let modal = document.getElementById('onara-modal');
    if (!modal) {
      modal = document.createElement('div');
      modal.id = 'onara-modal';
      modal.className = 'onara-modal-wrapper';
      modal.style.display = 'none';
      modal.setAttribute('aria-hidden', 'true');
      modal.innerHTML = `
        <div class="onara-backdrop" id="onara-backdrop"></div>
        <div class="onara-modal-content" id="onara-modal-content">
          <div id="onara-item-mount" class="item-view"></div>
        </div>
      `;
      document.body.appendChild(modal);
    }
    return modal;
  };

  const openOnaraModal = () => {
    const modal = getOrCreateOnaraModal();
    if (modal._closeTimeout) {
      clearTimeout(modal._closeTimeout);
      modal._closeTimeout = null;
    }
    modal._isClosing = false;
    const wasAlreadyOpen = document.body.classList.contains('onara-modal-open');
    document.body.classList.remove('onara-modal-closing');
    document.body.classList.add('onara-modal-open');
    if (typeof window.applyBackgroundOpacitySettings === 'function') {
      window.applyBackgroundOpacitySettings(window.onaraTuning || null, true);
    }
    window._bgModeAutoSwitch = true;
    const onaraModeBtn = document.querySelector('#bg-mode-btn-onara');
    if (onaraModeBtn) onaraModeBtn.click();
    window._bgModeAutoSwitch = false;
    if (document.querySelector('.index-container') && window.scrollY !== 0) {
      window.scrollTo(0, 0);
    }

    // If mount is currently empty, show subtle loading indicator until content arrives
    const mount = document.getElementById('onara-item-mount');
    if (mount && !mount.hasChildNodes()) {
      mount.innerHTML = '<div class="onara-mount-loading"><i class="fa-solid fa-circle-notch fa-spin"></i></div>';
    }

    modal.style.display = 'flex';
    modal.setAttribute('aria-hidden', 'false');
    modal.classList.remove('onara-fade-out');
    void modal.offsetWidth; // Force reflow so keyframe / transition starts reliably
    modal.classList.add('onara-fade-in');

    const canvas = document.getElementById('bg');
    if (canvas) {
      canvas._bgFadingOut = false;
      canvas.classList.remove('fader-out', 'fast-fade');
      canvas.classList.add('fader-in');
      canvas.style.transition = 'none';
      // opacity driven by --bg-canvas-opacity CSS var (set by applyBackgroundOpacitySettings) + .fader-in
      canvas.style.removeProperty('opacity');
    }
    if (!wasAlreadyOpen && typeof window.paintImmediateBgThumb === 'function') {
      window.paintImmediateBgThumb();
    }

    return modal;
  };
  window.openOnaraModal = openOnaraModal;

  const scrollOnaraThumbIntoView = (thumb, forceCenter = false) => {
    if (!thumb) return;
    const container = thumb.closest('.index-container');
    if (container) {
      const cRect = container.getBoundingClientRect();
      const tRect = thumb.getBoundingClientRect();
      const navbarH = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--navbar-h')) || 50;
      const vh = window.innerHeight || document.documentElement.clientHeight;
      const isVisible = tRect.bottom > navbarH && tRect.top < vh;
      if (!isVisible || forceCenter) {
        const targetScrollTop = container.scrollTop + (tRect.top - cRect.top) - (container.clientHeight / 2) + (tRect.height / 2);
        container.scrollTop = Math.max(0, targetScrollTop);
      }
    } else {
      thumb.scrollIntoView({ block: 'center', inline: 'nearest', behavior: 'instant' });
    }
    if (document.querySelector('.index-container') && window.scrollY !== 0) {
      window.scrollTo(0, 0);
    }
  };

  const updateOnaraActiveItem = (itemid, url, forceScroll = false, slug = null) => {
    if (!isOnaraActive()) return null;
    // Clear onara-active from any and all elements to guarantee only 1 item is selected
    document.querySelectorAll('.onara-active').forEach(el => el.classList.remove('onara-active'));

    let targetThumb = null;
    if (url) {
      try {
        const parsedPath = new URL(url, window.location.origin).pathname;
        targetThumb = document.querySelector(`.posts > a.thumb[href="${parsedPath}"], .posts > a.thumb[href="${url}"]`);
      } catch {}
    }
    if (!targetThumb && slug) {
      targetThumb = document.querySelector(`.posts > a.thumb[href$="/${slug}"], .posts > a.thumb[href*="/${slug}#"]`);
    }
    if (!targetThumb && itemid) {
      targetThumb = document.querySelector(`.posts > a.thumb[data-item-id="${itemid}"], .posts > a.thumb[href$="/${itemid}"], .posts > a.thumb[href*="/${itemid}#"], .posts > a.thumb[data-bg*="/${itemid}."]`);
    }

    // Blur any other active element so browser native focus cannot highlight a second thumbnail
    if (document.activeElement && document.activeElement !== targetThumb && typeof document.activeElement.blur === 'function') {
      document.activeElement.blur();
    }

    if (targetThumb) {
      targetThumb.classList.add('onara-active');
      scrollOnaraThumbIntoView(targetThumb, forceScroll);
    }
    return targetThumb;
  };
  window.updateOnaraActiveItem = updateOnaraActiveItem;

  let _onaraSyncSeq = 0;
  const syncOnaraBackgroundGrid = async (itemid, url, knownPage = null, slug = null) => {
    if (!isOnaraActive()) return;

    // Fast path: if target item is already in current background DOM (and not a temporary placeholder), just highlight and ensure visibility
    const existingThumb = updateOnaraActiveItem(itemid, url, false, slug);
    if (existingThumb && !existingThumb.classList.contains('onara-synth-thumb')) {
      return;
    }
    if (existingThumb && existingThumb.classList.contains('onara-synth-thumb')) {
      existingThumb.remove();
    }

    const currentSeq = ++_onaraSyncSeq;
    const urlObj = new URL(url || window.location.href, window.location.origin);
    const feedBasePath = urlObj.pathname.replace(/\/+$/, '').replace(/\/(?:\d+|[a-zA-Z0-9_-]{11})$/, '') || '/';

    let targetPage = (typeof knownPage === 'number' && knownPage >= 1) ? knownPage : null;

    if (!targetPage) {
      try {
        const pageParams = new URLSearchParams();
        pageParams.set('id', itemid);
        if (feedBasePath.startsWith('/tag/')) {
          pageParams.set('tag', decodeURIComponent(feedBasePath.replace(/^\/tag\//, '')));
        } else if (feedBasePath.startsWith('/h/')) {
          pageParams.set('hall', decodeURIComponent(feedBasePath.replace(/^\/h\//, '')));
        } else if (feedBasePath.match(/^\/user\/([^/]+)\/hall\/([^/]+)/)) {
          const m = feedBasePath.match(/^\/user\/([^/]+)\/hall\/([^/]+)/);
          pageParams.set('userHallOwner', decodeURIComponent(m[1]));
          pageParams.set('userHall', decodeURIComponent(m[2]));
        } else if (feedBasePath.match(/^\/user\/([^/]+)\/favs/)) {
          const m = feedBasePath.match(/^\/user\/([^/]+)\/favs/);
          pageParams.set('user', decodeURIComponent(m[1]));
          pageParams.set('fav', 'true');
        } else if (feedBasePath.match(/^\/user\/([^/]+)/)) {
          const m = feedBasePath.match(/^\/user\/([^/]+)/);
          pageParams.set('user', decodeURIComponent(m[1]));
        } else if (feedBasePath === '/favs') {
          pageParams.set('fav', 'true');
        }
        if (urlObj.searchParams.get('mime')) {
          pageParams.set('mime', urlObj.searchParams.get('mime'));
        }
        if (urlObj.searchParams.get('tagger')) {
          pageParams.set('tagger', urlObj.searchParams.get('tagger'));
        }
        if (typeof window.activeMode !== 'undefined') {
          pageParams.set('mode', window.activeMode);
        }
        const isStrict = window.f0ckSession?.strict_mode || (localStorage.getItem('search_strict') === 'true') || urlObj.searchParams.get('strict') === '1';
        if (isStrict) {
          pageParams.set('strict', '1');
        }
        const resp = await fetch(`/api/v2/item-page?${pageParams.toString()}`);
        if (resp.ok) {
          const pageData = await resp.json();
          if (pageData && pageData.success && pageData.page) {
            targetPage = pageData.page;
          }
        }
      } catch (e) {
        console.warn('[ONARA] Failed to fetch item-page:', e);
      }
    }

    if (currentSeq !== _onaraSyncSeq) return;
    if (!targetPage || targetPage < 1) targetPage = 1;

    const pagePath = targetPage === 1 ? feedBasePath : (feedBasePath === '/' ? `/p/${targetPage}` : `${feedBasePath}/p/${targetPage}`);
    const searchParams = new URLSearchParams(urlObj.search);
    const searchStr = searchParams.toString() ? `?${searchParams.toString()}` : '';
    const pageUrl = pagePath + searchStr;

    try {
      const pageRes = await fetch(pageUrl, {
        headers: { 'X-Requested-With': 'XMLHttpRequest' }
      });
      if (currentSeq !== _onaraSyncSeq) return;
      if (!pageRes.ok) return;

      const html = await pageRes.text();
      if (currentSeq !== _onaraSyncSeq) return;

      const doc = new DOMParser().parseFromString(html, 'text/html');
      const newPosts = doc.querySelector('.posts');
      const oldPosts = document.querySelector('.posts');

      if (newPosts && oldPosts) {
        oldPosts.querySelectorAll('.onara-synth-thumb').forEach(el => el.remove());
        oldPosts.innerHTML = newPosts.innerHTML;
        oldPosts.dataset.currentPage = targetPage;
        if (newPosts.dataset.hasMore) {
          oldPosts.dataset.hasMore = newPosts.dataset.hasMore;
        }
        if (typeof window.initLazyLoading === 'function') {
          window.initLazyLoading();
        }
        if (typeof window.initThumbnailHover === 'function') {
          window.initThumbnailHover();
        }
      } else if (newPosts && !oldPosts) {
        const main = document.getElementById('main');
        if (main) {
          const gridContent = doc.querySelector('#main') || doc.body;
          if (gridContent) {
            main.className = '';
            main.innerHTML = gridContent.innerHTML;
            if (typeof window.initLazyLoading === 'function') window.initLazyLoading();
            if (typeof window.initThumbnailHover === 'function') window.initThumbnailHover();
          }
        }
      }

      const newPag = doc.querySelector('.pagination-wrapper');
      const oldPag = document.querySelector('.pagination-wrapper');
      if (newPag && oldPag) {
        oldPag.innerHTML = newPag.innerHTML;
      }

      const newTitle = doc.querySelector('.page-title-wrap, .page-title, .user-profile-header, .hall-header');
      const oldTitle = document.querySelector('.page-title-wrap, .page-title, .user-profile-header, .hall-header');
      if (newTitle && oldTitle) {
        oldTitle.replaceWith(newTitle);
      }

      window._onaraCurrentGridUrl = pageUrl;
      const originWasGrid = window._onaraReturnUrl && (
        window._onaraReturnUrl.match(/\/p\/\d+/) || 
        new URL(window._onaraReturnUrl, window.location.origin).pathname === '/' || 
        window._onaraReturnUrl.includes('/tag/') || 
        window._onaraReturnUrl.includes('/h/') ||
        window._onaraReturnUrl.includes('/user/')
      );
      if (originWasGrid || !window._onaraReturnUrl) {
        window._onaraReturnUrl = pageUrl;
        if (doc.title) {
          window._onaraReturnTitle = doc.title;
        }
      }

      const thumb = updateOnaraActiveItem(itemid, url, true, slug);
      const currentPosts = document.querySelector('.posts');
      if (!thumb && currentPosts) {
        const synthThumb = document.createElement('a');
        synthThumb.href = url;
        synthThumb.className = 'thumb lazy-thumb onara-active onara-synth-thumb';
        synthThumb.dataset.bg = `/t/${itemid}.webp`;
        synthThumb.dataset.size = '1';
        synthThumb.innerHTML = '<div class="thumb-indicators"></div><p></p>';
        currentPosts.prepend(synthThumb);
        if (typeof window.initLazyLoading === 'function') window.initLazyLoading();
        scrollOnaraThumbIntoView(synthThumb, true);
      }
    } catch (err) {
      console.error('[ONARA] Failed to sync background grid:', err);
    }
  };
  window.syncOnaraBackgroundGrid = syncOnaraBackgroundGrid;

  const isItemPath = (pathOrUrl) => {
    try {
      const p = new URL(pathOrUrl, window.location.origin).pathname;
      const parts = p.split('/').filter(Boolean);
      return !p.match(/\/p\//) && (
        /^\/\d+/.test(p) || 
        /^\/[a-zA-Z0-9_-]{11}(?:[?#]|$)/.test(p) ||
        (parts.length >= 3 && (parts[0] === 'tag' || parts[0] === 'user' || parts[0] === 'h') && (/^\d+$/.test(parts[parts.length - 1]) || /^[a-zA-Z0-9_-]{11}$/.test(parts[parts.length - 1])))
      );
    } catch {
      return false;
    }
  };
  window.isItemPath = isItemPath;

  const getOnaraBaseUrl = (itemUrl = window.location.href) => {
    try {
      const urlObj = new URL(itemUrl, window.location.origin);
      let path = urlObj.pathname.replace(/\/+$/, '');
      path = path.replace(/\/(?:\d+|[a-zA-Z0-9_-]{11})$/, '');

      // Check current grid URL if available and matching base path
      if (window._onaraCurrentGridUrl) {
        try {
          const gridObj = new URL(window._onaraCurrentGridUrl, window.location.origin);
          const gridBasePath = gridObj.pathname.replace(/\/p\/\d+/, '').replace(/\/+$/, '');
          if (gridBasePath === path) {
            const safeGridHash = (gridObj.hash && !gridObj.hash.match(/^#[a-zA-Z0-9_-]{1,60}$/)) ? gridObj.hash : '';
            return gridObj.pathname + (gridObj.search || '') + safeGridHash;
          }
        } catch {}
      }

      const postsEl = document.querySelector('.posts');
      const activePagSpan = document.querySelector('.pagination span.btn.disabled, .pagination span.disabled');
      const pagPage = activePagSpan ? parseInt(activePagSpan.textContent.trim(), 10) : 0;
      const currentPage = (postsEl && postsEl.dataset.currentPage) 
        ? parseInt(postsEl.dataset.currentPage, 10) 
        : (pagPage || postsEl?._infiniteState?.currentPage || postsEl?._infiniteState?.visiblePage || 1);

      if (currentPage > 1 && !path.includes('/p/')) {
        path = (path ? path : '') + '/p/' + currentPage;
      }
      if (!path) path = '/';
      const safeHash = (urlObj.hash && !urlObj.hash.match(/^#[a-zA-Z0-9_-]{1,60}$/)) ? urlObj.hash : '';
      return path + (urlObj.search || '') + safeHash;
    } catch {
      return '/';
    }
  };
  window.getOnaraBaseUrl = getOnaraBaseUrl;

  const promoteOnaraModals = () => {
    const mount = document.getElementById('onara-item-mount');
    if (!mount) return;
    const modals = mount.querySelectorAll('#info-modal, #visibility-modal, .modal-overlay');
    modals.forEach(m => {
      const existing = document.body.querySelector(`:scope > #${m.id}`);
      if (existing && existing !== m) {
        existing.remove();
      }
      document.body.appendChild(m);
    });
  };
  window.promoteOnaraModals = promoteOnaraModals;

  const closeOnaraModal = (options = {}) => {
    const modal = document.getElementById('onara-modal');
    if (!modal || modal.style.display === 'none' || modal._isClosing) return;

    modal._isClosing = true;

    // Close any auxiliary modals that may be open
    const infoModal = document.getElementById('info-modal');
    if (infoModal) infoModal.style.display = 'none';
    const visModal = document.getElementById('visibility-modal');
    if (visModal) visModal.style.display = 'none';
    const reportModal = document.getElementById('report-modal');
    if (reportModal) reportModal.style.display = 'none';
    const hallsModal = document.getElementById('halls-modal');
    if (hallsModal) hallsModal.style.display = 'none';
    if (typeof window.closeImageModal === 'function') window.closeImageModal();
    document.body.classList.remove('modal-open');

    // Pause any playing media immediately so audio/video stops cleanly without popping
    modal.querySelectorAll('video, audio').forEach(el => { try { el.pause(); } catch {} });

    // Smooth fade out: immediately trigger background canvas fast fade-out
    modal.classList.remove('onara-fade-in');
    modal.classList.add('onara-fade-out');
    document.body.classList.add('onara-modal-closing');

    const bgCanvas = document.getElementById('bg');
    if (bgCanvas) {
      bgCanvas._bgFadingOut = true;
      bgCanvas.classList.remove('fader-in');
      bgCanvas.classList.add('fader-out', 'fast-fade');
      bgCanvas.style.setProperty('transition', 'opacity 0.2s cubic-bezier(0.25, 0, 0.4, 1)', 'important');
      bgCanvas.style.setProperty('opacity', '0', 'important');
    }

    if (!options.skipHistory) {
      const returnUrl = window._onaraReturnUrl || getOnaraBaseUrl();
      const returnTitle = window._onaraReturnTitle || window.f0ckDomain || '';
      const resolvedReturn = new URL(returnUrl, window.location.origin).href;
      if (window.location.href !== resolvedReturn) {
        history.pushState({ onaraGrid: true }, '', returnUrl);
      }
      if (returnTitle) {
        document.title = returnTitle;
      }
      const returnPath = new URL(returnUrl, window.location.origin).pathname;
      const isStaticReturn = returnPath.match(/^\/(about|rules|terms|upload|subscriptions|stats|docs|settings|admin|mod|ranking|messages|meme|memes)/);
      if (isStaticReturn && typeof window.loadPageAjax === 'function') {
        window.loadPageAjax(returnUrl, true, { skipPush: true });
      }
    }
    window._onaraReturnUrl = null;
    window._onaraReturnTitle = null;

    // Maintain focus on active item so user TAB navigation seamlessly resumes from current progress
    const activeThumb = document.querySelector('.posts > a.thumb.onara-active');
    if (activeThumb) {
      try {
        activeThumb.focus({ preventScroll: true });
      } catch {}
    }

    if (modal._closeTimeout) clearTimeout(modal._closeTimeout);
    if (options.immediate) {
      if (bgCanvas) {
        bgCanvas.style.setProperty('transition', 'none', 'important');
        bgCanvas.style.setProperty('opacity', '0', 'important');
      }
      stopMedia();
      const mount = document.getElementById('onara-item-mount');
      if (mount) mount.innerHTML = '';
      modal.style.display = 'none';
      modal.setAttribute('aria-hidden', 'true');
      modal.classList.remove('onara-fade-out', 'onara-fade-in');
      document.body.classList.remove('onara-modal-open', 'onara-modal-closing');
      document.querySelectorAll('.onara-active').forEach(el => el.classList.remove('onara-active'));
      if (typeof window.applyBackgroundOpacitySettings === 'function') {
        window.applyBackgroundOpacitySettings(null, false);
      }
      window._bgModeAutoSwitch = true;
      const targetModeBtn = document.querySelector((typeof isCurrentItemAudio === 'function' && isCurrentItemAudio()) ? '#bg-mode-btn-audio' : '#bg-mode-btn-standard');
      if (targetModeBtn) targetModeBtn.click();
      window._bgModeAutoSwitch = false;
      if (window.destroyBackgroundInstance) {
        window.destroyBackgroundInstance();
      }
      document.querySelectorAll('.pagination-container-fluid').forEach(el => {
        const pagWrapper = el.querySelector('.pagination-wrapper');
        if (!pagWrapper || pagWrapper.innerHTML.trim().length > 0) {
          el.style.display = '';
        }
      });
      modal._isClosing = false;
      modal._closeTimeout = null;
      return;
    }

    modal._closeTimeout = setTimeout(() => {
      if (!modal._isClosing) return;
      stopMedia();
      const mount = document.getElementById('onara-item-mount');
      if (mount) mount.innerHTML = '';
      modal.style.display = 'none';
      modal.setAttribute('aria-hidden', 'true');
      modal.classList.remove('onara-fade-out');

      // Now that modal is completely invisible, smoothly restore background state
      document.body.classList.remove('onara-modal-open', 'onara-modal-closing');
      document.querySelectorAll('.onara-active').forEach(el => el.classList.remove('onara-active'));
      if (typeof window.applyBackgroundOpacitySettings === 'function') {
        window.applyBackgroundOpacitySettings(null, false);
      }
      window._bgModeAutoSwitch = true;
      const targetModeBtn = document.querySelector((typeof isCurrentItemAudio === 'function' && isCurrentItemAudio()) ? '#bg-mode-btn-audio' : '#bg-mode-btn-standard');
      if (targetModeBtn) targetModeBtn.click();
      window._bgModeAutoSwitch = false;
      if (window.destroyBackgroundInstance) {
        window.destroyBackgroundInstance();
      }
      document.querySelectorAll('.pagination-container-fluid').forEach(el => {
        const pagWrapper = el.querySelector('.pagination-wrapper');
        if (!pagWrapper || pagWrapper.innerHTML.trim().length > 0) {
          el.style.display = '';
        }
      });
      modal._isClosing = false;
      modal._closeTimeout = null;
    }, 220);
  };
  window.closeOnaraModal = closeOnaraModal;
  window.isOnaraActive = isOnaraActive;

  // Content selector for protected elements inside onara modal
  const _onaraContentSelector = [
    '.media-object',
    '.previous-post',
    '.next-post',
    '.arrow-prev',
    '.arrow-next',
    '#prev',
    '#next',
    '.nav-prev',
    '.nav-next',
    '#random',
    '.steuerung',
    '.location',
    '.item_title',
    '.blahlol',
    '#comments-container',
    '.tag-controls',
    '.sidebar-tags-container',
    '#tags',
    '.rating-tag',
    '.rating-label',
    '.item-sidebar-left',
    '.xd-score-wrapper',
    '.user-infobox-block',
    'a',
    'button',
    'input',
    'textarea',
    'select',
    'label',
    'form',
    'video',
    'audio',
    'img',
    'canvas',
    'iframe',
    '.iconset',
    '.badge',
    '.btn',
    'time',
    '[role="button"]',
    'i[class*="fa-"]'
  ].join(', ');

  let _onaraMouseDownInside = false;

  document.addEventListener('mousedown', (e) => {
    if (!document.body.classList.contains('onara-modal-open')) return;
    if (e.target.closest('.modal-overlay:not(#onara-modal), .modal-content, .swal2-container, .tippy-box, #comments-container .emoji-picker, .dropdown-menu, .custom-confirm-overlay') ||
        e.target.closest('.global-sidebar-right, nav.navbar, #sidebar-drag-zone') ||
        e.target.closest(_onaraContentSelector)) {
      _onaraMouseDownInside = true;
    } else {
      _onaraMouseDownInside = false;
    }
  }, { passive: true });

  // Onara modal close click delegation: clicking on empty/free space closes the modal
  document.addEventListener('click', (e) => {
    if (!document.body.classList.contains('onara-modal-open')) return;

    // If mouse press originated on a protected element or if text is currently selected, do not close
    if (_onaraMouseDownInside) {
      _onaraMouseDownInside = false;
      return;
    }
    const sel = window.getSelection();
    if (sel && sel.toString().trim().length > 0) {
      return;
    }

    // Do not close if clicking auxiliary modals, dropdowns, tooltips, or emoji pickers
    if (e.target.closest('.modal-overlay:not(#onara-modal), .modal-content, .swal2-container, .tippy-box, #comments-container .emoji-picker, .dropdown-menu, .custom-confirm-overlay')) return;

    // Do not close if clicking the global sidebar right or navbar
    if (e.target.closest('.global-sidebar-right, nav.navbar, #sidebar-drag-zone')) return;

    // Do not close if clicking interactive content elements or actual item components
    if (e.target.closest(_onaraContentSelector)) return;

    // Any click on free space (backdrop, modal wrapper, container background, empty space in item-main-content) closes
    if (e.target.closest('#onara-modal') || e.target.id === 'onara-backdrop' || e.target.id === 'bg') {
      e.preventDefault();
      closeOnaraModal();
    }
  });

  if (loginModal) {
    if (loginBtn) {
      loginBtn.addEventListener('click', (e) => {
        e.preventDefault();
        openModal(loginModal, 'login');
      });
    }

    if (loginClose) loginClose.addEventListener('click', () => closeModal(loginModal));

    loginModal.addEventListener('click', (e) => {
      if (e.target === loginModal) closeModal(loginModal);
    });

    // Forgot Password link
    const modalForgotBtn = document.getElementById('modal-forgot-btn');
    if (modalForgotBtn) {
      modalForgotBtn.addEventListener('click', (e) => {
        e.preventDefault();
        switchModalView('forgot');
      });
    }

    const forgotToLogin = document.getElementById('forgot-to-login');
    if (forgotToLogin) {
      forgotToLogin.addEventListener('click', (e) => {
        e.preventDefault();
        switchModalView('login');
      });
    }

    // Check for reset token or login flag in URL
    const urlParams = new URLSearchParams(window.location.search);
    const resetToken = urlParams.get('token');
    if (resetToken) {
      const tokenInput = document.getElementById('reset-token');
      if (tokenInput) {
        tokenInput.value = resetToken;
        openModal(loginModal, 'reset');
        
        // Clean URL
        const cleanUrl = window.location.pathname + window.location.search.replace(/[?&]token=[^&]+/, '').replace(/[?&]$/, '') + window.location.hash;
        window.history.replaceState({}, '', cleanUrl);
      }
    } else if (urlParams.get('login') === '1') {
      openModal(loginModal, 'login');
      // Clean URL
      const cleanUrl = window.location.pathname + window.location.search.replace(/[?&]login=1/, '').replace(/[?&]$/, '') + window.location.hash;
      window.history.replaceState({}, '', cleanUrl);
    } else if (urlParams.get('already_logged_in') === '1') {
      // Clean URL first, then show flash (deferred so window.showFlash is defined)
      const cleanUrl = window.location.pathname + window.location.search.replace(/[?&]already_logged_in=1/, '').replace(/[?&]$/, '') + window.location.hash;
      window.history.replaceState({}, '', cleanUrl);
      setTimeout(() => {
          window.showFlash(i18n.already_logged_in || 'Already logged in lol', 'error');
      }, 0);
    }

    const loginForm = loginModal.querySelector('.login-form');
    if (loginForm && loginForm.id !== 'forgot-password-form' && loginForm.id !== 'reset-password-form') {
      loginForm.addEventListener('submit', async (e) => {
        e.preventDefault();
        const formData = new FormData(loginForm);
        const params = new URLSearchParams(formData);

        if (!formData.get('password')) {
          let errDiv = loginForm.querySelector('.flash-error');
          if (!errDiv) {
            errDiv = document.createElement('div');
            errDiv.className = 'flash-error';
            loginForm.insertBefore(errDiv, loginForm.firstChild);
          }
          errDiv.textContent = 'Invalid username or password.';
          return;
        }

        try {
          const res = await fetch('/login', {
            method: 'POST',
            headers: {
              'X-Requested-With': 'XMLHttpRequest',
              'Accept': 'application/json',
              'Content-Type': 'application/x-www-form-urlencoded'
            },
            body: params
          });

          if (res.redirected) {
            window.location.href = res.url;
            return;
          }

          const json = await res.json();
          if (json && json.banned) {
            if (loginModal) closeModal(loginModal);
            window.location.href = json.redirect || '/banned';
            return;
          }
          if (json && json.success === false) {
            let errDiv = loginForm.querySelector('.flash-error');
            if (!errDiv) {
              errDiv = document.createElement('div');
              errDiv.className = 'flash-error';
              loginForm.insertBefore(errDiv, loginForm.firstChild);
            }
            errDiv.textContent = json.msg;
          }
        } catch (err) {
          console.error('Login error:', err);
        }
      });
    }

    // Forgot Password Submit
    const forgotForm = document.getElementById('forgot-password-form');
    if (forgotForm) {
      forgotForm.addEventListener('submit', async (e) => {
        e.preventDefault();
        const email = document.getElementById('forgot-email').value;
        const status = document.getElementById('forgot-status');
        const btn = forgotForm.querySelector('button');

        btn.disabled = true;
        btn.textContent = i18n.sending || 'Sending...';
        status.textContent = '';
        status.className = '';

        try {
          const res = await fetch('/forgot-password', {
            method: 'POST',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'Accept': 'application/json' },
            body: new URLSearchParams({ email })
          });
          const data = await res.json();
          if (data.success) {
            status.textContent = data.msg || 'Success! Check your email.';
            status.className = 'flash-success';
            forgotForm.reset();
          } else {
            status.textContent = data.msg || 'Error sending link.';
            status.className = 'flash-error';
          }
        } catch (err) {
          status.textContent = 'Network error.';
          status.className = 'flash-error';
        } finally {
          btn.disabled = false;
          btn.textContent = 'Send Reset Link';
        }
      });
    }

    // Reset Password Submit
    const resetForm = document.getElementById('reset-password-form');
    if (resetForm) {
      const resetToLogin = document.getElementById('reset-to-login');
      resetForm.addEventListener('submit', async (e) => {
        e.preventDefault();
        const token = document.getElementById('reset-token').value;
        const password = document.getElementById('reset-password').value;
        const password_confirm = document.getElementById('reset-password-confirm').value;
        const status = document.getElementById('reset-status');
        const btn = resetForm.querySelector('button');

        if (password !== password_confirm) {
          status.className = 'flash-error';
          return;
        }

        if (password.length < 20) {
          status.textContent = 'Password is too short (minimum 20 characters).';
          status.className = 'flash-error';
          return;
        }

        btn.disabled = true;
        btn.textContent = i18n.updating || 'Updating...';
        status.textContent = '';
        status.className = '';

        try {
          const res = await fetch('/reset-password', {
            method: 'POST',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'Accept': 'application/json' },
            body: new URLSearchParams({ token, password, password_confirm })
          });
          const data = await res.json();
          if (data.success) {
            status.textContent = data.msg || 'Password updated successfully!';
            status.className = 'flash-success';
            resetForm.reset();
            btn.style.display = 'none';
            if (resetToLogin) resetToLogin.style.display = 'inline-block';
          } else {
            status.textContent = data.msg || 'Error resetting password.';
            status.className = 'flash-error';
          }
        } catch (err) {
          status.textContent = 'Network error.';
          status.className = 'flash-error';
        } finally {
          btn.disabled = false;
          btn.textContent = 'Update Password';
        }
      });

      if (resetToLogin) {
        resetToLogin.addEventListener('click', (e) => {
          e.preventDefault();
          switchModalView('login');
          resetToLogin.style.display = 'none';
          resetForm.querySelector('button').style.display = 'inline-block';
        });
      }
    }
  }



  if (registerBtn && registerModal) {
    registerBtn.addEventListener('click', (e) => {
      e.preventDefault();
      openModal(registerModal);
    });

    if (registerClose) registerClose.addEventListener('click', () => closeModal(registerModal));

    registerModal.addEventListener('click', (e) => {
      if (e.target === registerModal) closeModal(registerModal);
    });

    // Register Form AJAX
    const registerForm = document.getElementById('modal-register-form');
    if (registerForm) {
      registerForm.addEventListener('submit', async (e) => {
        e.preventDefault();
        const formData = new FormData(registerForm);
        const params = new URLSearchParams(formData);
        const status = document.getElementById('register-status');
        const btn = registerForm.querySelector('button');

        const password = formData.get('password');
        const password_confirm = formData.get('password_confirm');

        if (password && password.length < 20) {
          if (status) {
            status.textContent = 'Password is too short (minimum 20 characters).';
            status.className = 'flash-error';
          }
          return;
        }

        if (password !== password_confirm) {
          if (status) {
            status.textContent = 'Passwords do not match.';
            status.className = 'flash-error';
          }
          return;
        }

        btn.disabled = true;
        btn.textContent = i18n.registering || 'Registering...';
        if (status) {
          status.textContent = '';
          status.className = '';
        }

        try {
          const res = await fetch('/register', {
            method: 'POST',
            headers: {
              'X-Requested-With': 'XMLHttpRequest',
              'Accept': 'application/json',
              'Content-Type': 'application/x-www-form-urlencoded'
            },
            body: params
          });

          const json = await res.json();
          if (json.success) {
            if (status) {
              status.textContent = json.msg || 'Registration successful! You can now login.';
              status.className = 'flash-success';
            }
            registerForm.reset();
            setTimeout(() => {
              const loginToRegister = document.getElementById('login-to-register');
              if (loginToRegister) {
                // If we are in register modal, we might want to close it and open login?
                // But registration modal is separate in HTML. 
                closeModal(registerModal);
                openModal(loginModal, 'login');
              }
            }, 3000);
          } else {
            if (status) {
              status.textContent = json.msg || 'Registration failed.';
              status.className = 'flash-error';
            }
          }
        } catch (err) {
          console.error('Registration error:', err);
          if (status) {
            status.textContent = 'Network error.';
            status.className = 'flash-error';
          }
        } finally {
          btn.disabled = false;
          btn.textContent = 'Create Account';
        }
      });
    }
    
    // Switch to register from login
    
    // Switch to register from login
    const loginToRegister = document.getElementById('login-to-register');
    if (loginToRegister) {
      loginToRegister.addEventListener('click', (e) => {
        e.preventDefault();
        closeModal(loginModal);
        openModal(registerModal);
      });
    }

    // Switch to login from register
    const registerToLogin = document.getElementById('register-to-login');
    if (registerToLogin) {
      registerToLogin.addEventListener('click', (e) => {
        e.preventDefault();
        closeModal(registerModal);
        openModal(loginModal, 'login');
      });
    }
  }

  // Shortcuts Modal Logic
  const shortcutsModal = document.getElementById('shortcuts-modal');
  const shortcutsClose = document.getElementById('shortcuts-modal-close');
  
  if (shortcutsModal) {
    if (shortcutsClose) {
      shortcutsClose.addEventListener('click', () => closeModal(shortcutsModal));
    }
    shortcutsModal.addEventListener('click', (e) => {
      if (e.target === shortcutsModal) closeModal(shortcutsModal);
    });

    // Delegate help button click (since it's in a partial)
    document.addEventListener('click', (e) => {
      if (e.target.id === 'help-button') {
        openModal(shortcutsModal);
      }
    });
  }

  // Handle ESC key to close any modal
  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') {
      closeModal(loginModal);
      closeModal(registerModal);
      closeModal(shortcutsModal);
      const imageModal = document.getElementById('image-modal');
      if (imageModal && (imageModal.classList.contains('visible') || imageModal.style.display === 'flex' || imageModal.style.display === 'block')) {
        if (typeof window.closeImageModal === 'function') window.closeImageModal();
        else {
          imageModal.classList.remove('visible');
          imageModal.style.display = 'none';
          document.body.classList.remove('modal-open');
        }
        return;
      }
      const infoModal = document.getElementById('info-modal');
      if (infoModal && infoModal.style.display !== 'none') {
        infoModal.style.display = 'none';
        document.body.classList.remove('modal-open');
        return;
      }
      const visModal = document.getElementById('visibility-modal');
      if (visModal && visModal.style.display !== 'none') {
        visModal.style.display = 'none';
        document.body.classList.remove('modal-open');
        return;
      }
      const reportModal = document.getElementById('report-modal');
      if (reportModal && reportModal.style.display !== 'none') {
        reportModal.style.display = 'none';
        document.body.classList.remove('modal-open');
        return;
      }
      const hallsModal = document.getElementById('halls-modal');
      if (hallsModal && hallsModal.style.display !== 'none') {
        hallsModal.style.display = 'none';
        document.body.classList.remove('modal-open');
        return;
      }
      const anyOtherModal = document.querySelector('.modal-overlay:not(#onara-modal):not([style*="display: none"]), .modal.show, .swal2-container');
      if (anyOtherModal && window.getComputedStyle(anyOtherModal).display !== 'none') {
        anyOtherModal.style.display = 'none';
        document.body.classList.remove('modal-open');
        return;
      }
      const tagAcWrapper = document.querySelector('.tag-ac-wrapper');
      if (tagAcWrapper || (window.TagAutocomplete && typeof window.TagAutocomplete.isOpen === 'function' && window.TagAutocomplete.isOpen())) {
        if (window.TagAutocomplete && typeof window.TagAutocomplete.destroy === 'function') {
          window.TagAutocomplete.destroy();
        } else if (tagAcWrapper) {
          tagAcWrapper.remove();
        }
        return;
      }
      const searchOverlay = document.getElementById('search-overlay');
      if (searchOverlay && searchOverlay.classList.contains('visible')) {
        const closeBtn = document.getElementById('search-close');
        if (closeBtn) closeBtn.click();
        return;
      }
      const excludedTagsOverlay = document.getElementById('excluded-tags-overlay');
      if (excludedTagsOverlay && excludedTagsOverlay.classList.contains('visible')) {
        const closeBtn = document.getElementById('excluded-tags-close');
        if (closeBtn) closeBtn.click();
        return;
      }
      if (document.body.classList.contains('onara-modal-open')) {
        closeOnaraModal();
      }
    }
  });

  var background = (window.f0ckSession && window.f0ckSession.show_background !== undefined) 
                   ? window.f0ckSession.show_background 
                   : (localStorage.getItem('background') !== 'false');
  window.background = background;

  window.toggleBackground = async () => {
    background = !background;
    window.background = background;
    localStorage.setItem('background', background ? 'true' : 'false');
    window.initBackground();
    
    // Update videoplayer toggle buttons if they exist
    document.querySelectorAll("#togglebg").forEach(el => {
        el.classList.toggle('active', background);
    });

    // Update session preference and persist if logged in
    if (window.f0ckSession) {
        window.f0ckSession.show_background = background;
        try {
            await fetch('/api/v2/settings/background', {
                method: 'PUT',
                headers: { 
                    'Content-Type': 'application/json',
                    'X-CSRF-Token': window.f0ckSession.csrf_token 
                },
                body: JSON.stringify({ show_background: background })
            });
        } catch (err) {
            console.error('Failed to sync background preference:', err);
        }
    }
  };
  
  // Initialize autoplay preference
  if (localStorage.getItem('autoplay') == undefined) {
    localStorage.setItem('autoplay', 'false');
  }
  var autoplay = localStorage.getItem('autoplay') === 'true';

  window.toggleAutoplay = () => {
    autoplay = !autoplay;
    localStorage.setItem('autoplay', autoplay.toString());
    
    // Update videoplayer toggle buttons if they exist
    document.querySelectorAll("#toggleautoplay").forEach(el => {
        el.classList.toggle('active', autoplay);
    });
  };
  let bgRafId = null;
  let lastBgElem = null;

  // ── Central Background State ────────────────────────────────────────────────
  // Single source of truth for all background-canvas state.
  // bgRafId / lastBgElem remain as direct references for backward-compat with the
  // existing code inside initBackground() — they are kept in sync via the setters.
  const BgState = {
    // ── Readable state ────────────────────────────────────────────────────────
    get enabled()  { return background; },
    get rafId()    { return bgRafId; },
    get elem()     { return lastBgElem; },

    // ── Setters (keep legacy vars in sync) ─────────────────────────────────
    set rafId(v)  { bgRafId = v; },
    set elem(v)   { lastBgElem = v; },

    // ── Tuning cache (moved from module-level _bgTuningCache/_bgTuningFrame) ─
    _cache: null,
    _cacheFrame: -1,

    // Compute effective tuning for the current context.
    // forceMode: undefined = auto-detect | 'audio' | 'onara' | true (= onara)
    getTuning(forceMode) {
      const defAudio = (typeof DEFAULT_AUDIO_TUNING !== 'undefined' ? DEFAULT_AUDIO_TUNING : (window.DEFAULT_AUDIO_TUNING || {}));
      const defOnara = (typeof DEFAULT_ONARA_TUNING !== 'undefined' ? DEFAULT_ONARA_TUNING : (window.DEFAULT_ONARA_TUNING || {}));
      const defAudioBg = (typeof DEFAULT_AUDIO_BG_TUNING !== 'undefined' ? DEFAULT_AUDIO_BG_TUNING : (window.DEFAULT_AUDIO_BG_TUNING || {}));
      if (forceMode === undefined) {
        const frameId = window._rafFrameId || 0;
        if (this._cache && this._cacheFrame === frameId) return this._cache;
        const isAudio  = (typeof isCurrentItemAudio === 'function') ? isCurrentItemAudio() : false;
        const useOnara = (typeof isCurrentlyInOnara === 'function') ? isCurrentlyInOnara() : false;
        let base = Object.assign({}, defAudio, window.audioVisualizerTuning || {});
        if (isAudio && !useOnara) {
          Object.assign(base, defAudioBg, window.audioBgTuning || {});
        }
        if (useOnara) {
          Object.assign(base, defOnara, window.onaraTuning || {});
        }
        this._cache = base;
        this._cacheFrame = frameId;
        return base;
      }
      // Explicit forceMode — not cached (called from tuner UI only, never RAF)
      const isAudio  = (forceMode === 'audio');
      const useOnara = (forceMode === 'onara' || forceMode === true);
      let base = Object.assign({}, defAudio, window.audioVisualizerTuning || {});
      if (isAudio && !useOnara) {
        Object.assign(base, defAudioBg, window.audioBgTuning || {});
      }
      if (useOnara) {
        Object.assign(base, defOnara, window.onaraTuning || {});
      }
      return base;
    },

    // Invalidate the tuning cache (call after any tuning override changes)
    invalidateTuning() {
      this._cache = null;
      this._cacheFrame = -1;
    },

    // Cancel the running rAF loop, if any
    stopRaf() {
      if (bgRafId) { window.cancelAnimFrame(bgRafId); bgRafId = null; }
    },

    // Set the active media element; cancels the loop if the element changed
    setElem(el) {
      if (lastBgElem !== el) { this.stopRaf(); lastBgElem = el; }
    },
  };

  window.BgState = BgState;


  // Apply initial visual state
  var initialCanvas = document.getElementById('bg');
  if (initialCanvas) {
    // No background on SWF pages
    if (document.getElementById('ruffle-container')) {
      initialCanvas.classList.add('fader-out');
      initialCanvas.classList.remove('fader-in');
    } else if (background) {
      initialCanvas.classList.add('fader-in');
      initialCanvas.classList.remove('fader-out');
    } else {
      initialCanvas.classList.add('fader-out');
      initialCanvas.classList.remove('fader-in');
    }

    // Live-sync #bg canvas backing store dimensions and redraw when free space changes (sidebar toggle, resize, etc.)
    if (window.ResizeObserver) {
      let _bgResizeTimer = null;
      let _lastBgW = 0;
      let _lastBgH = 0;
      const _bgObserver = new ResizeObserver((entries) => {
        const entry = entries && entries[0];
        const cr = entry ? entry.contentRect : initialCanvas.getBoundingClientRect();
        const curW = Math.round(cr.width);
        const curH = Math.round(cr.height);
        if (Math.abs(curW - _lastBgW) <= 2 && Math.abs(curH - _lastBgH) <= 2) return;
        _lastBgW = curW;
        _lastBgH = curH;

        if (_bgResizeTimer) clearTimeout(_bgResizeTimer);
        _bgResizeTimer = setTimeout(() => {
          if (typeof window.redrawBgCanvas === 'function') {
            window.redrawBgCanvas();
          } else if (typeof window.initBackground === 'function') {
            window.initBackground();
          }
        }, 50);
      });
      _bgObserver.observe(initialCanvas);
    } else {
      window.addEventListener('resize', () => {
        if (typeof window.redrawBgCanvas === 'function') {
          window.redrawBgCanvas();
        }
      }, { passive: true });
    }
  }


  const _preloadedMediaUrls = new Set();
  let _prefetchAbortController = null;
  let _prefetchDebounceTimer = null;

  const cancelPrefetch = () => {
    if (_prefetchDebounceTimer) {
      clearTimeout(_prefetchDebounceTimer);
      _prefetchDebounceTimer = null;
    }
    if (_prefetchAbortController) {
      try {
        _prefetchAbortController.abort();
      } catch (_) {}
      _prefetchAbortController = null;
    }
  };

  const preloadMediaFromHtml = (html) => {
    if (!html) return;
    try {
      const parser = new DOMParser();
      const doc = parser.parseFromString(html, 'text/html');

      // 1. Preload Image only (standard image pipeline, non-blocking)
      const img = doc.querySelector('#f0ck-image, .embed-responsive-image img, .media-object img');
      if (img) {
        const src = img.getAttribute('src');
        if (src && !_preloadedMediaUrls.has(src)) {
          _preloadedMediaUrls.add(src);
          const preloadImg = new Image();
          preloadImg.decoding = 'async';
          preloadImg.src = src;
          window.f0ckDebug('[prefetch] Preloaded image asset:', src);
        }
      }

      // 2. Preload Audio Cover Art
      const cover = doc.querySelector('#f0ck-audio-cover');
      if (cover) {
        const coverSrc = cover.getAttribute('src');
        if (coverSrc && coverSrc !== '/s/img/200.gif' && !_preloadedMediaUrls.has(coverSrc)) {
          _preloadedMediaUrls.add(coverSrc);
          const preloadCover = new Image();
          preloadCover.src = coverSrc;
        }
      }

      // Note: Video & Audio binary streams are deliberately NOT fetched via fetch() in JS.
      // HTML5 media elements stream natively upon mounting. Fetching multi-megabyte chunks
      // in the background exhausts the browser's 6-connection HTTP pool, stalling navigation.

      if (_preloadedMediaUrls.size > 150) {
        _preloadedMediaUrls.clear();
      }
    } catch (e) {
      console.error('[prefetch] Error preloading media from html:', e);
    }
  };

  const prefetchNextPrevItems = () => {
    // Abort prior in-flight prefetch requests
    if (_prefetchAbortController) {
      try { _prefetchAbortController.abort(); } catch (_) {}
    }
    _prefetchAbortController = new AbortController();
    const signal = _prefetchAbortController.signal;

    // Prioritize next item (most frequent user journey), then prev
    const nextBtn = document.getElementById('next');
    const prevBtn = document.getElementById('prev');
    
    [nextBtn, prevBtn].forEach(btn => {
      if (!btn || !btn.href || btn.href.endsWith('#')) return;
      if (signal.aborted) return;
      
      const pathSegments = new URL(btn.href, window.location.origin).pathname.split('/');
      const keySegments = pathSegments.filter(s => /^\d+$/.test(s) || /^[a-zA-Z0-9_-]{11}$/.test(s));
      if (keySegments.length === 0) return;
      const itemId = keySegments.pop();
      
      let ajaxUrl = `/ajax/item/${itemId}`;
      const params = new URLSearchParams();
      params.append('mode', window.activeMode);
      
      const tagMatch = btn.href.match(/\/tag\/([^/?]+)/);
      if (tagMatch) params.append('tag', decodeURIComponent(tagMatch[1]));
      
      const userHallMatch = btn.href.match(/\/user\/([^/]+)\/hall\/([^/]+)/);
      if (userHallMatch) {
        params.append('userHall', decodeURIComponent(userHallMatch[2]));
        params.append('userHallOwner', decodeURIComponent(userHallMatch[1]));
      } else {
        const userMatch = btn.href.match(/\/user\/([^/]+)/);
        if (userMatch) {
          params.append('user', decodeURIComponent(userMatch[1]));
          if (btn.href.match(/\/user\/[^/]+\/favs(\/|$|\?)/)) params.append('fav', 'true');
        }
      }
      
      const hallMatch = btn.href.match(/\/h\/([^/?]+)/);
      if (hallMatch) params.append('hall', decodeURIComponent(hallMatch[1]));
      
      const isStrict = window.f0ckSession?.strict_mode || (localStorage.getItem('search_strict') === 'true');
      if (isStrict) params.append('strict', '1');
      
      if (params.toString() !== '') {
        ajaxUrl += (ajaxUrl.includes('?') ? '&' : '?') + params.toString();
      }
      
      if (itemCacheMap.has(ajaxUrl)) {
        const cached = itemCacheMap.get(ajaxUrl);
        if (cached && cached.html) preloadMediaFromHtml(cached.html);
        return;
      }
      
      fetch(ajaxUrl, { credentials: 'include', priority: 'low', signal })
        .then(r => r.ok ? r.text() : null)
        .then(rawText => {
          if (!rawText || signal.aborted) return;
          let html = rawText;
          try {
            const data = JSON.parse(rawText);
            if (data && typeof data.html === 'string') html = data.html;
          } catch (_) {}
          
          if (html && !signal.aborted) {
            itemCacheMap.set(ajaxUrl, { html, ts: Date.now() });
            if (itemCacheMap.size > ITEM_CACHE_MAX) {
              itemCacheMap.delete(itemCacheMap.keys().next().value);
            }
            window.f0ckDebug('[prefetch] Cached AJAX template for item', itemId);
            preloadMediaFromHtml(html);
          }
        })
        .catch(err => {
          if (err.name !== 'AbortError') {
            window.f0ckDebug('[prefetch] Prefetch error or cancelled:', err.message);
          }
        });
    });
  };

  const schedulePrefetch = (delay = 600) => {
    cancelPrefetch();
    _prefetchDebounceTimer = setTimeout(() => {
      _prefetchDebounceTimer = null;
      if (typeof requestIdleCallback === 'function') {
        requestIdleCallback(() => prefetchNextPrevItems(), { timeout: 1500 });
      } else {
        prefetchNextPrevItems();
      }
    }, delay);
  };

  const initAlbumGallery = () => {
    const container = document.querySelector('.album-gallery-container');
    if (!container) {
      window._currentActiveAlbumGallery = null;
      return;
    }

    const getHashSubf0ckId = () => {
      return (window.location.hash || '').replace(/^#/, '').trim();
    };

    if (container._f0ckAlbumInit) {
      const initialHash = getHashSubf0ckId() || container.getAttribute('data-requested-subf0ck') || '';
      if (initialHash && window._currentActiveAlbumGallery && typeof window._currentActiveAlbumGallery.showBySlug === 'function') {
        window._currentActiveAlbumGallery.showBySlug(initialHash);
      }
      return;
    }
    container._f0ckAlbumInit = true;

    let albumData = null;
    const jsonScript = container.querySelector('.album-data-json, #album-data-json');
    if (jsonScript && jsonScript.textContent) {
      try {
        albumData = JSON.parse(jsonScript.textContent);
      } catch (e) {
        console.warn('[ALBUM] Could not parse album script tag:', e);
      }
    }

    if (!albumData) {
      try {
        let raw = container.getAttribute('data-album');
        if (raw) {
          if (raw.includes('&quot;') || raw.includes('&#123;') || raw.includes('&amp;')) {
            const txt = document.createElement('textarea');
            txt.innerHTML = raw;
            raw = txt.value;
            if (raw.includes('&quot;') || raw.includes('&#123;')) {
              txt.innerHTML = raw;
              raw = txt.value;
            }
          }
          albumData = JSON.parse(raw);
        }
      } catch (e) {
        // Fallback to DOM elements below
      }
    }

    // Fallback: build albumData directly from rendered thumbnail buttons
    if (!Array.isArray(albumData) || albumData.length === 0) {
      const thumbs = container.querySelectorAll('.album-thumb-item');
      if (thumbs.length > 1) {
        albumData = Array.from(thumbs).map((thumb, i) => {
          const idx = parseInt(thumb.getAttribute('data-index'), 10);
          const src = thumb.getAttribute('data-src') || thumb.querySelector('img')?.src || '';
          const subSlug = thumb.getAttribute('data-subf0ck-slug') || thumb.getAttribute('data-subf0ck-id') || '';
          const mime = (thumb.getAttribute('data-mime') || '').toLowerCase();
          const isAudio = mime.startsWith('audio/') || !!thumb.querySelector('.sidebar-media-placeholder.audio');
          return {
            order_index: isNaN(idx) ? i : idx,
            display_index: (isNaN(idx) ? i : idx) + 1,
            src: src,
            dest: src,
            slug: subSlug,
            subf0ck_id: subSlug,
            id: subSlug,
            mime: mime || (isAudio ? 'audio/mpeg' : ''),
            is_audio: isAudio,
            is_video: mime.startsWith('video/')
          };
        });
      }
    }

    if (!Array.isArray(albumData) || albumData.length <= 1) return;

    let currentIndex = 0;

    const initialHash = getHashSubf0ckId() || container.getAttribute('data-requested-subf0ck') || '';
    if (initialHash) {
      if (!getHashSubf0ckId()) {
        history.replaceState(null, '', window.location.pathname + window.location.search + '#' + initialHash);
      }
      const locEl = document.querySelector('.location');
      if (locEl && !locEl.textContent.includes('#')) {
        locEl.textContent = locEl.textContent.replace(/#.*$/, '') + '#' + initialHash;
      }
      const foundIdx = albumData.findIndex(item =>
        String(item.slug || '') === initialHash ||
        String(item.subf0ck_id || '') === initialHash ||
        String(item.id) === initialHash ||
        String(item.order_index + 1) === initialHash
      );
      if (foundIdx !== -1) {
        currentIndex = foundIdx;
      }
    }

    const imgEl = container.querySelector('#f0ck-image');
    const videoEl = container.querySelector('#f0ck-album-video');
    const videoWrapper = container.querySelector('#f0ck-album-video-wrapper');
    const audioWrapper = container.querySelector('#f0ck-album-audio-wrapper') || container.querySelector('#f0ck-album-audio-container');
    const audioEl = container.querySelector('#f0ck-album-audio');
    const linkEl = container.querySelector('#elfe, .album-stage-link');
    const prevBtn = container.querySelector('.album-btn-prev');
    const nextBtn = container.querySelector('.album-btn-next');
    const currentIdxEl = container.querySelector('.album-current-idx');
    const totalCountEl = container.querySelector('.album-total-count');
    const thumbItems = container.querySelectorAll('.album-thumb-item');
    const stripEl = container.querySelector('.album-thumbnails-strip');

    let stripTimeout = null;
    function showStripPeek(duration = 3000) {
      if (stripTimeout) clearTimeout(stripTimeout);
      container.classList.add('strip-peek');
      if (stripEl) stripEl.classList.add('strip-peek');
      stripTimeout = setTimeout(() => {
        container.classList.remove('strip-peek');
        if (stripEl) stripEl.classList.remove('strip-peek');
      }, duration);
    }

    if (totalCountEl) totalCountEl.textContent = albumData.length;

    let albumVideoV0ck = null;
    const initAlbumVideoV0ck = () => {
      if (albumVideoV0ck) return albumVideoV0ck;
      if (videoEl && typeof v0ck === 'function') {
        try {
          albumVideoV0ck = new v0ck(videoEl);
        } catch (e) {
          console.warn('[ALBUM] Could not init v0ck for album video:', e);
        }
      }
      return albumVideoV0ck;
    };

    let albumAudioV0ck = null;
    const initAlbumAudioV0ck = () => {
      if (albumAudioV0ck) return albumAudioV0ck;
      if (audioEl && typeof v0ck === 'function') {
        try {
          albumAudioV0ck = new v0ck(audioEl);
        } catch (e) {
          console.warn('[ALBUM] Could not init v0ck for album audio:', e);
        }
      }
      return albumAudioV0ck;
    };

    const preloadedImages = new Set();
    const preload = (idx) => {
      if (idx < 0 || idx >= albumData.length) return;
      const sub = albumData[idx];
      if (!sub) return;
      const src = sub.src || sub.dest;
      const mime = (sub.mime || '').toLowerCase();
      if (src && !mime.startsWith('video/') && !mime.startsWith('audio/') && !preloadedImages.has(src)) {
        const i = new Image();
        i.src = src;
        preloadedImages.add(src);
      }
    };

    preload(1);
    if (albumData.length > 2) preload(albumData.length - 1);

    const isBlurred = () => {
      const mediaObj = container.closest('.media-object') || document.querySelector('.media-object');
      if (mediaObj && localStorage.getItem('blurDetail') !== 'false') {
        const mode = mediaObj.getAttribute('data-mode');
        const blurNsfw = localStorage.getItem('blurNsfw') === 'true';
        const blurNsfl = localStorage.getItem('blurNsfl') === 'true';
        const blurSfw = localStorage.getItem('blurSfw') === 'true';
        const blurUntagged = localStorage.getItem('blurUntagged') === 'true';
        let shouldBlurThis = false;
        if (mode === 'nsfw') shouldBlurThis = blurNsfw;
        else if (mode === 'nsfl') shouldBlurThis = blurNsfl;
        else if (mode === 'sfw') shouldBlurThis = blurSfw;
        else if (mode === 'untagged') shouldBlurThis = blurUntagged;
        if (shouldBlurThis && !mediaObj.classList.contains('revealed')) {
          return true;
        }
      }
      return false;
    };

    const isAutoplayAllowed = () => {
      return !isBlurred() && window.f0ckSession?.disable_autoplay !== true;
    };

    const showImage = (index, direction = 'none', updateHash = true) => {
      if (index < 0) index = albumData.length - 1;
      if (index >= albumData.length) index = 0;
      currentIndex = index;

      const item = albumData[currentIndex];
      if (!item) return;

      const newSrc = item.src || item.dest;
      const mime = (item.mime || '').toLowerCase();

      // Update URL hash with subf0ck slug (or id fallback) so links are shareable directly to this subf0ck
      const subKey = item.slug || item.subf0ck_id || item.id;
      if (updateHash && subKey) {
        history.replaceState(null, '', window.location.pathname + window.location.search + '#' + subKey);
      }
      const locEl = document.querySelector('.location');
      if (locEl && subKey) {
        locEl.textContent = locEl.textContent.replace(/#.*$/, '') + '#' + subKey;
      }

      // Pause any playing audio or video
      if (videoEl && !videoEl.paused) {
        try { videoEl.pause(); } catch {}
      }
      if (audioEl && !audioEl.paused) {
        try { audioEl.pause(); } catch {}
      }

      if (mime === 'video/youtube') {
        container.classList.add('is-video-active', 'is-youtube-active');
        container.classList.remove('is-audio-active');
        if (imgEl) imgEl.style.display = 'none';
        if (linkEl) linkEl.style.display = 'none';
        if (audioWrapper) audioWrapper.style.display = 'none';
        if (videoEl) { try { videoEl.pause(); } catch {} videoEl.style.display = 'none'; }
        if (videoWrapper) videoWrapper.style.display = 'block';

        // Reuse or create an iframe for YouTube
        let ytIframe = videoWrapper.querySelector('.album-yt-iframe');
        if (!ytIframe) {
          ytIframe = document.createElement('iframe');
          ytIframe.className = 'album-yt-iframe embed-responsive-item';
          ytIframe.setAttribute('frameborder', '0');
          ytIframe.setAttribute('allow', 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share');
          ytIframe.setAttribute('allowfullscreen', '');
          ytIframe.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;border:none;';
          videoWrapper.appendChild(ytIframe);
        }
        // Extract video ID from dest (yt:VIDEO_ID) or src URL
        const ytDest = item.filename || item.dest || '';
        const ytId = ytDest.startsWith('yt:') ? ytDest.replace('yt:', '') : (ytDest.match(/(?:youtu\.be\/|v=)([A-Za-z0-9_-]{11})/)?.[1] || '');
        const newYtSrc = ytId ? `https://www.youtube.com/embed/${ytId}?enablejsapi=1` : newSrc;
        if (ytIframe.src !== newYtSrc) ytIframe.src = newYtSrc;
        ytIframe.style.display = 'block';
      } else if (mime.startsWith('video/')) {
        container.classList.remove('is-youtube-active');
        container.classList.add('is-video-active');
        container.classList.remove('is-audio-active');
        const badge = container.querySelector('.audio-track-info-badge');
        if (badge) badge.classList.remove('is-visible');
        if (imgEl) imgEl.style.display = 'none';
        if (linkEl) linkEl.style.display = 'none';
        if (audioWrapper) audioWrapper.style.display = 'none';
        // Hide any YouTube iframe that may be present from a previous sub-item
        const prevYtIframe = videoWrapper?.querySelector('.album-yt-iframe');
        if (prevYtIframe) { prevYtIframe.src = ''; prevYtIframe.style.display = 'none'; }

        if (videoWrapper) videoWrapper.style.display = 'block';
        if (videoEl) {
          videoEl.style.display = 'block';

          if (videoEl.src !== newSrc && !videoEl.src.endsWith(newSrc)) {
            videoEl.src = newSrc;
            videoEl.load();
          }

          initAlbumVideoV0ck();
          video = videoEl;

          if (window.initBackground) window.initBackground();

          if (item.size && videoWrapper) {
            const dlBtn = videoWrapper.querySelector('#v0ck_download');
            if (dlBtn) dlBtn.textContent = `Download (${item.size})`;
          }

          const playerWrap = videoWrapper.querySelector('.v0ck') || videoWrapper;
          if (isAutoplayAllowed()) {
            const playPromise = videoEl.play();
            if (playPromise !== undefined) {
              playPromise.catch(() => {
                playerWrap.classList.add('v0ck_initial');
              });
            }
          } else {
            try { videoEl.pause(); } catch {}
            playerWrap.classList.add('v0ck_initial');
          }
        }
      } else if (mime.startsWith('audio/')) {
        container.classList.remove('is-video-active');
        container.classList.add('is-audio-active');
        if (videoEl) {
          try { videoEl.pause(); } catch {}
        }
        if (videoWrapper) videoWrapper.style.display = 'none';
        if (imgEl) imgEl.style.display = 'none';
        if (linkEl) linkEl.style.display = 'none';

        if (audioWrapper) {
          audioWrapper.style.display = 'block';
          const hasCover = item.has_coverart && item.coverart && !item.coverart.includes('audio.webp');
          const coverUrl = hasCover ? (item.coverart || item.thumb) : null;
          let ph = audioWrapper.querySelector(':scope > .sidebar-media-placeholder.audio');
          if (!ph) {
            ph = document.createElement('div');
            ph.className = 'sidebar-media-placeholder audio';
            ph.innerHTML = '<div class="audio-cover-circle"><i class="fa-solid fa-music"></i></div>';
            audioWrapper.prepend(ph);
          }
          let coverCircle = ph.querySelector('.audio-cover-circle');
          if (!coverCircle) {
            coverCircle = document.createElement('div');
            coverCircle.className = 'audio-cover-circle';
            coverCircle.innerHTML = '<i class="fa-solid fa-music"></i>';
            ph.insertBefore(coverCircle, ph.firstChild);
          } else {
            if (!coverCircle.querySelector('i')) {
              const existingI = ph.querySelector(':scope > i');
              if (existingI) coverCircle.appendChild(existingI);
              else coverCircle.insertAdjacentHTML('beforeend', '<i class="fa-solid fa-music"></i>');
            }
          }
          audioWrapper.style.backgroundImage = 'none';
          audioWrapper.style.backgroundColor = '#000000';
          if (coverUrl) {
            coverCircle._origBgImage = `url('${coverUrl}')`;
            coverCircle.style.backgroundImage = `url('${coverUrl}')`;
            ph.classList.add('has-cover');
          } else {
            coverCircle._origBgImage = null;
            coverCircle.style.backgroundImage = 'none';
            coverCircle.style.backgroundColor = '#000000';
            ph.classList.remove('has-cover');
            ph.style.backgroundColor = '#000000';
          }
          ph.style.display = '';
        }

        if (audioEl) {
          audioEl.style.display = 'block';
          audioEl.crossOrigin = 'anonymous';
          const hasCover = item.has_coverart && item.coverart && !item.coverart.includes('audio.webp');
          const coverUrl = hasCover ? (item.coverart || item.thumb) : null;
          if (coverUrl) {
            audioEl.setAttribute('poster', coverUrl);
          } else {
            audioEl.removeAttribute('poster');
          }

          if (audioEl.src !== newSrc && !audioEl.src.endsWith(newSrc)) {
            audioEl.src = newSrc;
            audioEl.setAttribute('src', newSrc);
            audioEl.load();
          }

          initAlbumAudioV0ck();
          video = audioEl;

          if (window.initVisualizer) window.initVisualizer(audioEl);
          if (window.initBackground) window.initBackground();
          if (window.updateAudioTrackBadge) window.updateAudioTrackBadge(audioEl, item.id || item.slug, newSrc);

          audioEl.addEventListener('play', () => audioWrapper?.classList.add('is-playing'));
          audioEl.addEventListener('pause', () => audioWrapper?.classList.remove('is-playing'));
          audioEl.addEventListener('ended', () => audioWrapper?.classList.remove('is-playing'));

          if (item.size && audioWrapper) {
            const dlBtn = audioWrapper.querySelector('#v0ck_download');
            if (dlBtn) dlBtn.textContent = `Download (${item.size})`;
          }

          const playerWrap = audioWrapper.querySelector('.v0ck') || audioWrapper;
          if (isAutoplayAllowed()) {
            const playPromise = audioEl.play();
            if (playPromise !== undefined) {
              playPromise.catch(() => {
                playerWrap.classList.add('v0ck_initial');
              });
            }
          } else {
            try { audioEl.pause(); } catch {}
            playerWrap.classList.add('v0ck_initial');
          }
        }
      } else {
        // Image
        container.classList.remove('is-video-active', 'is-audio-active');
        const badge = container.querySelector('.audio-track-info-badge');
        if (badge) badge.classList.remove('is-visible');
        if (videoEl) {
          try { videoEl.pause(); } catch {}
        }
        if (audioEl) {
          try { audioEl.pause(); } catch {}
        }
        if (videoWrapper) videoWrapper.style.display = 'none';
        if (audioWrapper) audioWrapper.style.display = 'none';
        if (linkEl) {
          linkEl.style.display = '';
          linkEl.href = newSrc;
        }
        if (imgEl) {
          imgEl.style.display = 'block';
          imgEl.classList.remove('album-img-fade');
          void imgEl.offsetWidth; // trigger reflow
          imgEl.src = newSrc;
          imgEl.classList.add('album-img-fade');
        }
        video = null;
      }

      if (linkEl && !mime.startsWith('video/')) {
        linkEl.href = newSrc;
      }

      if (currentIdxEl) {
        currentIdxEl.textContent = currentIndex + 1;
      }

      thumbItems.forEach((btn, idx) => {
        const isActive = idx === currentIndex;
        btn.classList.toggle('active', isActive);
        if (isActive && stripEl && stripEl.clientWidth > 0) {
          const stripRect = stripEl.getBoundingClientRect();
          const btnRect = btn.getBoundingClientRect();
          const offsetWithinStrip = (btnRect.left - stripRect.left) + stripEl.scrollLeft;
          const targetLeft = offsetWithinStrip - (stripEl.clientWidth - btn.clientWidth) / 2;
          stripEl.scrollTo({
            left: Math.max(0, targetLeft),
            behavior: 'smooth'
          });
        }
      });

      if (window.scrollX > 0) {
        window.scrollTo(0, window.scrollY);
      }

      showStripPeek(3000);

      updateInfoModal();
      updateAlbumTags();

      preload(currentIndex + 1);
      preload(currentIndex - 1);
    };

    // Helper that returns the parent album's rating as a minimal tag object array.
    // The authoritative value is stored in #tags[data-parent-rating] and initialised
    // from the server-rendered DOM on first load, then kept in sync by handleTagsUpdate.
    const getParentRatingTags = () => {
      const tagsContainer = document.querySelector('#tags');
      if (!tagsContainer) return [];
      const r = tagsContainer.dataset.parentRating || '';
      if (!['sfw', 'nsfw', 'nsfl'].includes(r)) return [];
      const tagMap = {
        sfw:  { id: 1, tag: 'sfw',  normalized: 'sfw',  badge: 'badge badge-success' },
        nsfw: { id: 2, tag: 'nsfw', normalized: 'nsfw', badge: 'badge badge-danger' },
        nsfl: { id: window.f0ckSession?.nsfl_tag_id || 3, tag: 'nsfl', normalized: 'nsfl', badge: 'badge badge-nsfl' }
      };
      return tagMap[r] ? [tagMap[r]] : [];
    };

    // Seed data-parent-rating from the server-rendered rating badge
    (() => {
      const tagsContainer = document.querySelector('#tags');
      if (!tagsContainer) return;
      const inner = tagsContainer.querySelector('.tags-inner') || tagsContainer;
      const ratingEl = inner.querySelector('.rating-tag[data-rating]');
      if (!ratingEl) return;
      const r = ratingEl.dataset.rating;
      if (['sfw', 'nsfw', 'nsfl'].includes(r)) {
        tagsContainer.dataset.parentRating = r;
      }
    })();

    const updateAlbumTags = () => {
      const sub = albumData[currentIndex];
      if (!sub) return;

      const tagsContainer = document.querySelector('#tags');
      if (!tagsContainer) return;

      const subSlug = sub.slug || sub.subf0ck_id || sub.id;
      tagsContainer.dataset.subf0ckId = String(sub.id);
      tagsContainer.dataset.subf0ckSlug = String(subSlug);
      tagsContainer.dataset.subf0ckIndex = String(currentIndex);

      let tagScopeEl = document.querySelector('#subf0ck-tag-scope');
      if (!tagScopeEl) {
        const sidebarCont = document.querySelector('.sidebar-tags-container');
        if (sidebarCont) {
          tagScopeEl = document.createElement('div');
          tagScopeEl.id = 'subf0ck-tag-scope';
          tagScopeEl.className = 'subf0ck-tag-scope';
          sidebarCont.insertBefore(tagScopeEl, tagsContainer);
        }
      }
      if (tagScopeEl) {
        tagScopeEl.innerHTML = `<i class="fa-solid fa-layer-group"></i> Subf0ck <code>${subSlug}</code> (${currentIndex + 1}/${albumData.length}):`;
      }

      let subTags = Array.isArray(sub.tags) ? sub.tags : [];

      // If this sub-item has no rating tag, inherit the parent album's rating
      const RATING_NORMS = ['sfw', 'nsfw', 'nsfl'];
      const subHasRating = subTags.some(t => RATING_NORMS.includes(t.normalized));
      if (!subHasRating) {
        const parentRating = getParentRatingTags();
        if (parentRating.length > 0) subTags = [...parentRating, ...subTags];
      }

      if (typeof window.renderTags === 'function') {
        window.renderTags(subTags);
      }
    };

    const updateInfoModal = () => {
      const modal = document.getElementById('info-modal');
      if (!modal) return;
      const sub = albumData[currentIndex];
      if (!sub) return;

      const subHeading = modal.querySelector('#info-modal-subheading');
      if (subHeading) {
        const parentId = subHeading.getAttribute('data-item-id') || container.getAttribute('data-album-id') || '';
        const parentSlug = subHeading.getAttribute('data-item-slug') || '';
        const subSlug = sub.slug || sub.subf0ck_id || sub.id;
        const total = albumData.length;
        const idx = currentIndex + 1;
        subHeading.innerHTML = `Post ID: <code>${parentId}</code>${parentSlug ? ` <span class="text-muted">(${parentSlug})</span>` : ''} &bull; Subf0ck: <code>${subSlug}</code> <span class="text-muted">(${idx}/${total})</span>`;
      }

      const specsTitle = modal.querySelector('#info-specs-header-title');
      if (specsTitle) {
        specsTitle.textContent = `Technical Specifications (Subf0ck ${currentIndex + 1}/${albumData.length})`;
      }

      const fileSizeEl = modal.querySelector('#info-file-size');
      if (fileSizeEl) {
        let displaySize = sub.size || '';
        if (displaySize === 'NaN B' || displaySize === 'NaN') displaySize = '';
        if (displaySize && !isNaN(displaySize)) {
          const num = Number(displaySize);
          if (num > 0) {
            const i = Math.min(4, Math.max(0, ~~(Math.log(num) / Math.log(1024))));
            displaySize = (num / Math.pow(1024, i)).toFixed(2) * 1 + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i];
          }
        }
        fileSizeEl.textContent = displaySize;
      }

      const dimsCard = modal.querySelector('#info-card-dimensions');
      const dimsEl = modal.querySelector('#info-file-dimensions');
      if (dimsCard && dimsEl) {
        if (sub.width && sub.height) {
          dimsEl.textContent = `${sub.width} × ${sub.height} px`;
          dimsCard.style.display = '';
        } else {
          dimsCard.style.display = 'none';
        }
      }

      const mimeEl = modal.querySelector('#info-file-mime');
      if (mimeEl) {
        mimeEl.textContent = sub.mime || '';
      }

      const directLink = modal.querySelector('#info-file-direct-link');
      if (directLink) {
        directLink.href = sub.dest || sub.src || '#';
      }

      const sourceCard = modal.querySelector('#info-card-source');
      if (sourceCard) {
        sourceCard.style.display = 'none';
      }

      const hashCard = modal.querySelector('#info-card-hash');
      const hashEl = modal.querySelector('#info-file-hash');
      const copyHashBtn = modal.querySelector('#info-copy-hash-btn');
      if (hashCard) {
        const cleanHash = sub.checksum ? String(sub.checksum).split('_bypass_')[0] : '';
        if (cleanHash) {
          if (hashEl) hashEl.textContent = cleanHash;
          if (copyHashBtn) copyHashBtn.setAttribute('data-hash', cleanHash);
          hashCard.style.display = '';
        } else {
          hashCard.style.display = 'none';
        }
      }
    };

    if (imgEl) {
      imgEl.addEventListener('load', () => {
        const sub = albumData[currentIndex];
        if (sub && (!sub.width || !sub.height) && imgEl.naturalWidth) {
          sub.width = imgEl.naturalWidth;
          sub.height = imgEl.naturalHeight;
          updateInfoModal();
        }
      });
    }
    if (videoEl) {
      videoEl.addEventListener('loadedmetadata', () => {
        const sub = albumData[currentIndex];
        if (sub && (!sub.width || !sub.height) && videoEl.videoWidth) {
          sub.width = videoEl.videoWidth;
          sub.height = videoEl.videoHeight;
          updateInfoModal();
        }
      });
    }

    // Ensure proper initial media display (especially if initial item is video or subf0ck hash was requested)
    showImage(currentIndex, 'none', !!initialHash);

    if (prevBtn) {
      prevBtn.addEventListener('click', (e) => {
        e.preventDefault();
        e.stopPropagation();
        showImage(currentIndex - 1, 'prev');
      });
    }

    if (nextBtn) {
      nextBtn.addEventListener('click', (e) => {
        e.preventDefault();
        e.stopPropagation();
        showImage(currentIndex + 1, 'next');
      });
    }

    let hasDraggedStrip = false;
    if (stripEl && !stripEl._dragInitialized) {
      stripEl._dragInitialized = true;
      let isDown = false;
      let startX = 0;
      let startScrollLeft = 0;
      let momentumID = null;
      let velX = 0;
      let lastX = 0;
      let lastTime = 0;

      stripEl.addEventListener('mousedown', (e) => {
        if (e.button !== 0) return;
        isDown = true;
        hasDraggedStrip = false;
        startX = e.pageX;
        startScrollLeft = stripEl.scrollLeft;
        lastX = e.pageX;
        lastTime = performance.now();
        velX = 0;
        cancelAnimationFrame(momentumID);
      });

      window.addEventListener('mousemove', (e) => {
        if (!isDown) return;
        const now = performance.now();
        const walk = e.pageX - startX;
        if (Math.abs(walk) > 6) {
          hasDraggedStrip = true;
          stripEl.classList.add('is-dragging');
          e.preventDefault();
          stripEl.scrollLeft = startScrollLeft - walk;

          const dt = Math.max(1, now - lastTime);
          velX = (e.pageX - lastX) / dt;
          lastX = e.pageX;
          lastTime = now;
        }
      });

      window.addEventListener('mouseup', () => {
        if (!isDown) return;
        isDown = false;
        stripEl.classList.remove('is-dragging');
        showStripPeek(6000);

        if (hasDraggedStrip && Math.abs(velX) > 0.15) {
          let currentVel = velX * 18;
          const glide = () => {
            if (Math.abs(currentVel) > 0.5) {
              stripEl.scrollLeft -= currentVel;
              currentVel *= 0.93;
              momentumID = requestAnimationFrame(glide);
            }
          };
          momentumID = requestAnimationFrame(glide);
        }

        setTimeout(() => {
          hasDraggedStrip = false;
        }, 100);
      });

      // Touch drag / swipe support for mobile
      let touchStartX = 0;
      let touchStartScrollLeft = 0;
      let isTouchingStrip = false;

      stripEl.addEventListener('touchstart', (e) => {
        if (e.touches.length === 1) {
          e.stopPropagation();
          if (stripTimeout) clearTimeout(stripTimeout);
          container.classList.add('strip-peek');
          stripEl.classList.add('strip-peek');
          isTouchingStrip = true;
          hasDraggedStrip = false;
          touchStartX = e.touches[0].clientX;
          touchStartScrollLeft = stripEl.scrollLeft;
          lastX = e.touches[0].clientX;
          lastTime = performance.now();
          velX = 0;
          cancelAnimationFrame(momentumID);
        }
      }, { passive: true });

      stripEl.addEventListener('touchmove', (e) => {
        if (!isTouchingStrip || e.touches.length !== 1) return;
        e.stopPropagation();
        const currentX = e.touches[0].clientX;
        const walk = currentX - touchStartX;
        if (Math.abs(walk) > 3) {
          hasDraggedStrip = true;
          stripEl.classList.add('is-dragging');
          stripEl.scrollLeft = touchStartScrollLeft - walk;
          const now = performance.now();
          const dt = Math.max(1, now - lastTime);
          velX = (currentX - lastX) / dt;
          lastX = currentX;
          lastTime = now;
        }
      }, { passive: true });

      stripEl.addEventListener('touchend', (e) => {
        if (!isTouchingStrip) return;
        e.stopPropagation();
        isTouchingStrip = false;
        stripEl.classList.remove('is-dragging');
        showStripPeek(6000);
        if (hasDraggedStrip) {
          if (Math.abs(velX) > 0.05) {
            let currentVel = velX * 24;
            const glide = () => {
              if (Math.abs(currentVel) > 0.5) {
                stripEl.scrollLeft -= currentVel;
                currentVel *= 0.93;
                momentumID = requestAnimationFrame(glide);
              }
            };
            momentumID = requestAnimationFrame(glide);
          }
          setTimeout(() => {
            hasDraggedStrip = false;
          }, 150);
        }
      }, { passive: true });

      stripEl.addEventListener('touchcancel', (e) => {
        e.stopPropagation();
        isTouchingStrip = false;
        stripEl.classList.remove('is-dragging');
        showStripPeek(6000);
        setTimeout(() => {
          hasDraggedStrip = false;
        }, 100);
      }, { passive: true });

      stripEl.addEventListener('wheel', (e) => {
        if (e.deltaY !== 0) {
          e.preventDefault();
          stripEl.scrollLeft += e.deltaY;
        }
      }, { passive: false });
    }

    thumbItems.forEach((btn) => {
      btn.addEventListener('click', (e) => {
        if (hasDraggedStrip) {
          e.preventDefault();
          e.stopPropagation();
          return;
        }
        e.preventDefault();
        e.stopPropagation();
        const targetIdx = parseInt(btn.getAttribute('data-index'), 10);
        if (!isNaN(targetIdx)) {
          showImage(targetIdx);
        }
      });
    });

    // Touch tap on container reveals thumbnail strip briefly on touch devices
    container.addEventListener('click', (e) => {
      if (!e.target.closest('.v0ck_settings_menu, .v0ck_hud, .album-btn')) {
        showStripPeek(3000);
      }
    });

    // Handle touch swipe for mobile gallery navigation
    let touchStartX = null;
    let touchStartY = null;
    let touchIgnored = false;
    container.addEventListener('touchstart', (e) => {
      if (e.touches.length === 1) {
        touchIgnored = !!e.target.closest('.album-thumbnails-strip, .v0ck_player_controls, .v0ck_settings_menu, .v0ck_hud, .album-btn');
        touchStartX = e.touches[0].clientX;
        touchStartY = e.touches[0].clientY;
      }
    }, { passive: true });

    container.addEventListener('touchend', (e) => {
      if (touchStartX === null || touchStartY === null || touchIgnored) {
        touchStartX = null;
        touchStartY = null;
        touchIgnored = false;
        return;
      }
      const touchEndX = e.changedTouches[0].clientX;
      const touchEndY = e.changedTouches[0].clientY;
      const diffX = touchEndX - touchStartX;
      const diffY = touchEndY - touchStartY;

      // Minimum swipe distance of 50px and predominantly horizontal
      if (Math.abs(diffX) > 50 && Math.abs(diffX) > Math.abs(diffY) * 1.5) {
        if (diffX < 0) {
          showImage(currentIndex + 1, 'next');
        } else {
          showImage(currentIndex - 1, 'prev');
        }
      }
      touchStartX = null;
      touchStartY = null;
      touchIgnored = false;
    }, { passive: true });

    // Handle hash change if user navigates back/forward to another subf0ck
    window.addEventListener('hashchange', () => {
      const newHash = getHashSubf0ckId();
      if (!newHash) return;
      const foundIdx = albumData.findIndex((item) =>
        String(item.slug || '') === newHash ||
        String(item.subf0ck_id || '') === newHash ||
        String(item.id) === newHash ||
        String(item.order_index + 1) === newHash
      );
      if (foundIdx !== -1 && foundIdx !== currentIndex) {
        showImage(foundIdx, 'none', false);
      }
    });

    window._currentActiveAlbumGallery = {
      prev: () => showImage(currentIndex - 1, 'prev'),
      next: () => showImage(currentIndex + 1, 'next'),
      showBySlug: (subKey) => {
        if (!subKey || !Array.isArray(albumData)) return false;
        const foundIdx = albumData.findIndex((item) =>
          String(item.slug || '') === String(subKey) ||
          String(item.subf0ck_id || '') === String(subKey) ||
          String(item.id) === String(subKey) ||
          String(item.order_index + 1) === String(subKey)
        );
        if (foundIdx !== -1) {
          showImage(foundIdx, 'none', true);
          return true;
        }
        return false;
      },
      updateInfoModal: updateInfoModal,
      updateAlbumTags: updateAlbumTags,
      getCurrentSubf0ck: () => albumData[currentIndex],
      isHovered: false
    };
    window.albumGallery = window._currentActiveAlbumGallery;

    container.addEventListener('mouseenter', () => {
      if (window._currentActiveAlbumGallery) window._currentActiveAlbumGallery.isHovered = true;
    });
    container.addEventListener('mouseleave', () => {
      if (window._currentActiveAlbumGallery) window._currentActiveAlbumGallery.isHovered = false;
    });
  };

  const syncLocationSubf0ck = () => {
    const layout = document.querySelector('.item-layout-container');
    const reqSub = layout ? (layout.getAttribute('data-requested-subf0ck') || '') : '';
    const hash = (window.location.hash || '').replace(/^#/, '').trim();
    const targetSub = hash || reqSub;
    if (targetSub) {
      if (!hash && reqSub) {
        history.replaceState(null, '', window.location.pathname + window.location.search + '#' + reqSub);
      }
      const locEl = document.querySelector('.location');
      if (locEl && !locEl.textContent.includes('#')) {
        locEl.textContent = locEl.textContent.replace(/#.*$/, '') + '#' + targetSub;
      }
    }
  };

  const setupMedia = () => {
    window._currentActiveAlbumGallery = null;
    window.albumGallery = null;
    const elem = document.querySelector("#my-video") || document.querySelector("audio#my-video");
    if (elem) {
      video = new v0ck(elem);
    } else {
      video = null;
    }
    initAlbumGallery();
    syncLocationSubf0ck();
  };
  document.addEventListener('f0ck:contentLoaded', () => {
    initAlbumGallery();
    syncLocationSubf0ck();
  });

  const transformStandaloneItemToOnara = async () => {
    const main = document.getElementById('main');
    if (!main) return;

    // Find the item content inside #main
    const itemContainer = main.querySelector('.item-layout-container') || main.querySelector('.container') || main.firstElementChild;
    if (!itemContainer) return;

    // Ensure Onara modal exists in DOM
    const modal = getOrCreateOnaraModal();
    const mount = document.getElementById('onara-item-mount');
    if (mount) {
      mount.innerHTML = '';
      mount.appendChild(itemContainer);
    }

    // Open Onara modal immediately
    openOnaraModal();

    const returnUrl = getOnaraBaseUrl() || '/';
    window._onaraReturnUrl = returnUrl;
    window._onaraReturnTitle = window.f0ckDomain || 'f0ck';
    window._onaraCurrentGridUrl = returnUrl;

    const pathSegments = window.location.pathname.split('/');
    const keySegments = pathSegments.filter(s => /^\d+$/.test(s) || /^[a-zA-Z0-9_-]{11}$/.test(s));
    const activeKey = keySegments.length ? keySegments[keySegments.length - 1] : null;

    try {
      const resp = await fetch(returnUrl, {
        headers: { 'X-Requested-With': 'XMLHttpRequest' }
      });
      if (resp.ok) {
        const html = await resp.text();
        const doc = new DOMParser().parseFromString(html, 'text/html');
        const gridContent = doc.querySelector('#main') || doc.body;
        if (gridContent) {
          main.className = '';
          main.innerHTML = gridContent.innerHTML;
          if (typeof window.initLazyLoading === 'function') {
            window.initLazyLoading();
          }
          if (typeof window.initThumbnailHover === 'function') {
            window.initThumbnailHover();
          }
        }
      }
    } catch (err) {
      console.warn('[ONARA] Failed to load background grid for direct item:', err);
    }

    if (activeKey) {
      updateOnaraActiveItem(activeKey, window.location.href);
      if (typeof window.trackVisit === 'function') {
        window.trackVisit(activeKey);
      }
    }
  };

  const initOnaraInitialState = () => {
    if (!isOnaraActive()) return;
    promoteOnaraModals();
    if (document.body.classList.contains('onara-modal-open')) {
      const modal = openOnaraModal();
      if (!window._onaraReturnUrl) {
        window._onaraReturnUrl = getOnaraBaseUrl();
        window._onaraReturnTitle = window.f0ckDomain || 'f0ck';
      }
      window._onaraCurrentGridUrl = window._onaraReturnUrl;
      const pathSegments = window.location.pathname.split('/');
      const keySegments = pathSegments.filter(s => /^\d+$/.test(s) || /^[a-zA-Z0-9_-]{11}$/.test(s));
      const activeKey = keySegments.length ? keySegments[keySegments.length - 1] : null;
      if (activeKey) {
        updateOnaraActiveItem(activeKey, window.location.href);
        if (typeof window.trackVisit === 'function') {
          window.trackVisit(activeKey);
        }
      }
    } else {
      // Check if this is a direct item visit rendered as standalone item view (e.g. before cookie reached server)
      const isDirectStandaloneItem = !document.getElementById('posts') &&
        (document.querySelector('.item-container, .media-object, #main.item-view') !== null);
      if (isDirectStandaloneItem) {
        transformStandaloneItemToOnara();
        return;
      }
      window._onaraCurrentGridUrl = window.location.pathname + window.location.search;
    }
  };

  // Initial Load
  document.addEventListener('DOMContentLoaded', () => {
    setupMedia();
    initOnaraInitialState();
    schedulePrefetch(800);
  });
  initOnaraInitialState();

  // Dynamic YouTube ambient color timeline manager
  let ytAmbientState = {
    rafId: null,
    videoId: null,
    colors: null,
    duration: 0,
    currentTime: 0,
    isPlaying: false,
    lastTimeUpdate: 0,
    currentColor: [0, 0, 0],
    targetColor: [0, 0, 0],
    cleanup: null
  };

  const stopYoutubeAmbient = () => {
    if (ytAmbientState.rafId) {
      window.cancelAnimFrame(ytAmbientState.rafId);
      ytAmbientState.rafId = null;
    }
    if (ytAmbientState.cleanup) {
      ytAmbientState.cleanup();
      ytAmbientState.cleanup = null;
    }
    ytAmbientState.videoId = null;
    ytAmbientState.colors = null;
    ytAmbientState.isPlaying = false;
  };

  const initYoutubeAmbient = (ytEmbed, canvas, backgroundEnabled) => {
    stopYoutubeAmbient();
    if (!ytEmbed || !canvas || !backgroundEnabled) return;

    const videoId = ytEmbed.dataset.ytId || (ytEmbed.src && (ytEmbed.src.match(/embed\/([a-zA-Z0-9_-]+)/) || [])[1]);
    if (!videoId) return;

    ytAmbientState.videoId = videoId;
    const context = canvas.getContext('2d');
    const _SCALE = 0.5;
    const updateCanvasSize = () => {
      const cw = Math.max(1, (canvas.clientWidth * _SCALE) | 0);
      const ch = Math.max(1, (canvas.clientHeight * _SCALE) | 0);
      if (canvas.width !== cw || canvas.height !== ch) {
        canvas.width = cw;
        canvas.height = ch;
      }
      return { cw: canvas.width, ch: canvas.height };
    };
    const { cw, ch } = updateCanvasSize();
    const blurPx = Math.round(80 * _SCALE) || 1;

    // 1. Draw static thumbnail immediately for instant background (with robust fallback)
    const itemId = window.getCurrentItemId();
    const tryDrawThumb = (url, fallbackUrl) => {
      const img = new Image();
      img.crossOrigin = 'anonymous';
      img.onload = () => {
        try {
          context.filter = `blur(${blurPx}px) brightness(1.2)`;
          const sw = img.naturalWidth || img.width;
          const sh = img.naturalHeight || img.height;
          if (sw > 0 && sh > 0) {
            const scale = Math.max(canvas.width / sw, canvas.height / sh);
            const dw = sw * scale;
            const dh = sh * scale;
            context.drawImage(img, (canvas.width - dw) / 2, (canvas.height - dh) / 2, dw, dh);
          } else {
            context.drawImage(img, 0, 0, canvas.width, canvas.height);
          }
          context.filter = 'none';
        } catch (e) {}
        canvas.classList.remove('fader-out', 'fast-fade');
        canvas.classList.add('fader-in');
      };
      img.onerror = () => {
        if (fallbackUrl && url !== fallbackUrl) {
          tryDrawThumb(fallbackUrl, null);
        } else {
          canvas.classList.remove('fader-out', 'fast-fade');
          canvas.classList.add('fader-in');
        }
      };
      img.src = url;
    };
    const localThumb = itemId ? `/t/${itemId}.webp` : null;
    const remoteThumb = `https://img.youtube.com/vi/${videoId}/hqdefault.jpg`;
    tryDrawThumb(localThumb || remoteThumb, remoteThumb);

    // 2. Fetch storyboard ambient colors
    fetch(`/api/v2/ambient/yt/${videoId}`)
      .then(res => res.ok ? res.json() : null)
      .then(data => {
        if (!data || !Array.isArray(data.colors) || !data.colors.length || ytAmbientState.videoId !== videoId) return;
        ytAmbientState.colors = data.colors;
        ytAmbientState.duration = Number(data.duration) || 0;
        if (ytAmbientState.colors.length > 0) {
          ytAmbientState.currentColor = [...ytAmbientState.colors[0]];
          ytAmbientState.targetColor = [...ytAmbientState.colors[0]];
          // Immediately paint the first frame color as ambient glow!
          renderAmbientFrame();
          canvas.classList.remove('fader-out', 'fast-fade');
          canvas.classList.add('fader-in');
        }
        if (ytAmbientState.isPlaying) {
          startAmbientLoop();
        }
      })
      .catch(() => {});

    // 3. Render function for ambient lighting
    const renderAmbientFrame = () => {
      if (!ytAmbientState.colors || !ytAmbientState.colors.length || !ytAmbientState.duration) return;
      const { cw: curW, ch: curH } = updateCanvasSize();

      let t = ytAmbientState.currentTime;
      if (ytAmbientState.isPlaying && ytAmbientState.lastTimeUpdate > 0) {
        const dt = (performance.now() - ytAmbientState.lastTimeUpdate) / 1000;
        t = Math.min(ytAmbientState.duration, t + dt);
      }

      const norm = Math.max(0, Math.min(1, t / ytAmbientState.duration));
      const pos = norm * (ytAmbientState.colors.length - 1);
      const idx = Math.floor(pos);
      const next = Math.min(ytAmbientState.colors.length - 1, idx + 1);
      const frac = pos - idx;

      const c1 = ytAmbientState.colors[idx];
      const c2 = ytAmbientState.colors[next];

      ytAmbientState.targetColor = [
        c1[0] + (c2[0] - c1[0]) * frac,
        c1[1] + (c2[1] - c1[1]) * frac,
        c1[2] + (c2[2] - c1[2]) * frac
      ];

      // Smooth lerp
      ytAmbientState.currentColor[0] += (ytAmbientState.targetColor[0] - ytAmbientState.currentColor[0]) * 0.15;
      ytAmbientState.currentColor[1] += (ytAmbientState.targetColor[1] - ytAmbientState.currentColor[1]) * 0.15;
      ytAmbientState.currentColor[2] += (ytAmbientState.targetColor[2] - ytAmbientState.currentColor[2]) * 0.15;

      const r = Math.min(255, Math.max(0, Math.round(ytAmbientState.currentColor[0])));
      const g = Math.min(255, Math.max(0, Math.round(ytAmbientState.currentColor[1])));
      const b = Math.min(255, Math.max(0, Math.round(ytAmbientState.currentColor[2])));

      const ctx = canvas.getContext('2d');
      if (!ctx) return;

      // Render radial ambient wash over canvas
      ctx.save();
      const cx = curW / 2;
      const cy = curH / 2;
      const maxR = Math.max(curW, curH) * 0.85;
      const grad = ctx.createRadialGradient(cx, cy, 0, cx, cy, maxR);
      grad.addColorStop(0, `rgba(${r}, ${g}, ${b}, 0.95)`);
      grad.addColorStop(0.4, `rgba(${Math.round(r * 0.75)}, ${Math.round(g * 0.75)}, ${Math.round(b * 0.75)}, 0.7)`);
      grad.addColorStop(0.8, `rgba(${Math.round(r * 0.3)}, ${Math.round(g * 0.3)}, ${Math.round(b * 0.3)}, 0.4)`);
      grad.addColorStop(1, 'rgba(5, 5, 10, 0.95)');

      ctx.fillStyle = grad;
      ctx.fillRect(0, 0, curW, curH);
      ctx.restore();
    };

    const startAmbientLoop = () => {
      if (ytAmbientState.rafId) return;
      const loop = () => {
        if (!ytAmbientState.isPlaying || ytAmbientState.videoId !== videoId) {
          ytAmbientState.rafId = null;
          return;
        }
        renderAmbientFrame();
        ytAmbientState.rafId = window.requestAnimFrame(loop);
      };
      ytAmbientState.rafId = window.requestAnimFrame(loop);
    };

    // 4. Connect to YouTube player via official API and postMessage
    const sendPostMsg = (msg) => {
      if (!ytEmbed.contentWindow) return;
      try {
        ytEmbed.contentWindow.postMessage(typeof msg === 'string' ? msg : JSON.stringify(msg), '*');
      } catch (e) {}
    };

    const registerListeners = () => {
      // YouTube postMessage handshake
      sendPostMsg({ event: 'listening', id: ytEmbed.id || 1 });
      sendPostMsg({ event: 'command', func: 'addEventListener', args: ['onStateChange'] });
    };

    ytEmbed.addEventListener('load', registerListeners);
    registerListeners();
    setTimeout(registerListeners, 500);
    setTimeout(registerListeners, 1500);

    // Also attach YouTube IFrame API if available
    const tryAttachYTPlayer = () => {
      if (window.YT && window.YT.Player) {
        try {
          new window.YT.Player(ytEmbed, {
            events: {
              onStateChange: (event) => {
                if (event.data === 1) { // PLAYING
                  ytAmbientState.isPlaying = true;
                  startAmbientLoop();
                } else if (event.data === 2 || event.data === 0) {
                  ytAmbientState.isPlaying = false;
                }
              }
            }
          });
        } catch (e) {}
      }
    };

    if (window.YT && window.YT.Player) {
      tryAttachYTPlayer();
    } else if (!document.querySelector('script[src*="youtube.com/iframe_api"]')) {
      const tag = document.createElement('script');
      tag.src = "https://www.youtube.com/iframe_api";
      tag.onload = () => setTimeout(tryAttachYTPlayer, 200);
      document.head.appendChild(tag);
    } else {
      setTimeout(tryAttachYTPlayer, 1000);
    }

    const onMessage = (event) => {
      if (typeof event.origin !== 'string' || !event.origin.includes('youtube.com')) return;
      let data;
      try {
        data = typeof event.data === 'string' ? JSON.parse(event.data) : event.data;
      } catch (e) {
        return;
      }
      if (!data) return;

      let state = undefined;
      if (data.event === 'onStateChange') {
        state = data.info;
      } else if (data.event === 'infoDelivery' && data.info && data.info.playerState !== undefined) {
        state = data.info.playerState;
      }

      if (state === 1) { // PLAYING
        ytAmbientState.isPlaying = true;
        startAmbientLoop();
      } else if (state === 2 || state === 0) { // PAUSED or ENDED
        ytAmbientState.isPlaying = false;
      }

      if (data.event === 'infoDelivery' && data.info && typeof data.info.currentTime === 'number') {
        ytAmbientState.currentTime = data.info.currentTime;
        ytAmbientState.lastTimeUpdate = performance.now();
        if (!ytAmbientState.isPlaying) {
          renderAmbientFrame();
        }
      }
    };

    window.addEventListener('message', onMessage);

    ytAmbientState.cleanup = () => {
      window.removeEventListener('message', onMessage);
      ytEmbed.removeEventListener('load', registerListeners);
    };
  };

  // Destroy / stop background canvas instance and animation loops
  window.destroyBackgroundInstance = () => {
    if (bgRafId) {
      window.cancelAnimFrame(bgRafId);
      bgRafId = null;
    }
    if (visualizerRafId) {
      window.cancelAnimFrame(visualizerRafId);
      visualizerRafId = null;
    }
    stopYoutubeAmbient();
    const canvas = document.getElementById('bg');
    if (canvas) {
      canvas._bgFadingOut = false;
      canvas.classList.remove('fader-in');
      canvas.classList.add('fader-out');
      canvas.style.removeProperty('opacity');
      canvas.style.removeProperty('transition');
      const ctx = canvas.getContext('2d');
      if (ctx) {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
      }
    }
  };

  let mediaAmbientSampleCanvas = null;
  let mediaAmbientSampleCtx = null;

  const sampleMediaSpatialColors = (source) => {
    if (!source) return null;
    const w = source.videoWidth || source.naturalWidth || source.width || 0;
    const h = source.videoHeight || source.naturalHeight || source.height || 0;
    if (w <= 0 || h <= 0) return null;

    if (!mediaAmbientSampleCanvas) {
      mediaAmbientSampleCanvas = document.createElement('canvas');
      mediaAmbientSampleCanvas.width = 4;
      mediaAmbientSampleCanvas.height = 4;
      mediaAmbientSampleCtx = mediaAmbientSampleCanvas.getContext('2d', { willReadFrequently: true });
    }
    if (!mediaAmbientSampleCtx) return null;

    try {
      mediaAmbientSampleCtx.clearRect(0, 0, 4, 4);
      mediaAmbientSampleCtx.drawImage(source, 0, 0, 4, 4);
      const data = mediaAmbientSampleCtx.getImageData(0, 0, 4, 4).data;

      // Sample top half (rows 0, 1) and bottom half (rows 2, 3)
      let rTop = 0, gTop = 0, bTop = 0, countTop = 0;
      let rBot = 0, gBot = 0, bBot = 0, countBot = 0;

      for (let y = 0; y < 4; y++) {
        for (let x = 0; x < 4; x++) {
          const idx = (y * 4 + x) * 4;
          const a = data[idx + 3];
          if (a > 20) {
            if (y < 2) {
              rTop += data[idx];
              gTop += data[idx + 1];
              bTop += data[idx + 2];
              countTop++;
            } else {
              rBot += data[idx];
              gBot += data[idx + 1];
              bBot += data[idx + 2];
              countBot++;
            }
          }
        }
      }

      const bot = countBot > 0
        ? [Math.round(rBot / countBot), Math.round(gBot / countBot), Math.round(bBot / countBot)]
        : (countTop > 0 ? [Math.round(rTop / countTop), Math.round(gTop / countTop), Math.round(bTop / countTop)] : [25, 25, 35]);
      const top = countTop > 0
        ? [Math.round(rTop / countTop), Math.round(gTop / countTop), Math.round(bTop / countTop)]
        : (countBot > 0 ? [...bot] : [25, 25, 35]);

      return { top, bottom: bot };
    } catch (e) {
      return null;
    }
  };

  const parseCssColorToRgb = (str) => {
    if (!str) return [153, 255, 0];
    if (str.startsWith('#')) {
      let hex = str.slice(1);
      if (hex.length === 3) hex = hex.split('').map(c => c + c).join('');
      const num = parseInt(hex, 16);
      return [(num >> 16) & 255, (num >> 8) & 255, num & 255];
    }
    const m = str.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
    if (m) return [Number(m[1]), Number(m[2]), Number(m[3])];
    const hm = str.match(/hsl\(\s*([\d.]+)\s*,\s*([\d.]+)%?\s*,\s*([\d.]+)%?\s*\)/);
    if (hm) {
      const h = Number(hm[1]) / 360, s = Number(hm[2]) / 100, l = Number(hm[3]) / 100;
      let r, g, b;
      if (s === 0) { r = g = b = l; } else {
        const hue2rgb = (p, q, t) => {
          if (t < 0) t += 1; if (t > 1) t -= 1;
          if (t < 1/6) return p + (q - p) * 6 * t;
          if (t < 1/2) return q;
          if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
          return p;
        };
        const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
        const p = 2 * l - q;
        r = hue2rgb(p, q, h + 1/3);
        g = hue2rgb(p, q, h);
        b = hue2rgb(p, q, h - 1/3);
      }
      return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
    }
    return [153, 255, 0];
  };

  const boostColorSaturation = (rgb, boost = 1.35) => {
    if (!rgb || !Array.isArray(rgb) || rgb.length < 3) return [30, 30, 40];
    const [r, g, b] = rgb;
    const lum = 0.299 * r + 0.587 * g + 0.114 * b;
    return [
      Math.min(255, Math.max(0, Math.round(lum + (r - lum) * boost))),
      Math.min(255, Math.max(0, Math.round(lum + (g - lum) * boost))),
      Math.min(255, Math.max(0, Math.round(lum + (b - lum) * boost)))
    ];
  };

  const mediaAmbientState = {
    top: [25, 25, 35],
    targetTop: [25, 25, 35],
    bottom: [25, 25, 35],
    targetBottom: [25, 25, 35],
    hasSampled: false
  };

  const setAmbientTargetColors = (colors) => {
    if (!colors) return;
    if (colors.top) mediaAmbientState.targetTop = [...colors.top];
    if (colors.bottom) mediaAmbientState.targetBottom = [...colors.bottom];
  };

  const updateAmbientLerp = (smoothingFactor) => {
    const cfg = (typeof window.getEffectiveBackgroundTuning === 'function' ? window.getEffectiveBackgroundTuning() : null) || window.audioVisualizerTuning || DEFAULT_AUDIO_TUNING;
    const factor = smoothingFactor !== undefined
      ? smoothingFactor
      : (cfg.bgAmbientSmoothness !== undefined ? Number(cfg.bgAmbientSmoothness) : 0.05);
    const s = mediaAmbientState;
    for (let i = 0; i < 3; i++) {
      s.top[i] += (s.targetTop[i] - s.top[i]) * factor;
      s.bottom[i] += (s.targetBottom[i] - s.bottom[i]) * factor;
    }
    return {
      top: s.top.map(v => Math.min(255, Math.max(0, Math.round(v)))),
      bottom: s.bottom.map(v => Math.min(255, Math.max(0, Math.round(v))))
    };
  };

  const renderAmbientLightingWash = (ctx, targetW, targetH, colors, alpha = 1.0, reactiveOpts = null) => {
    if (!ctx || !colors) return;
    const cfg = (typeof window.getEffectiveBackgroundTuning === 'function' ? window.getEffectiveBackgroundTuning() : null) || window.audioVisualizerTuning || DEFAULT_AUDIO_TUNING;
    const satBoost = cfg.bgAmbientSaturation !== undefined ? Number(cfg.bgAmbientSaturation) : 1.35;
    let intensity = cfg.bgAmbientIntensity !== undefined ? Number(cfg.bgAmbientIntensity) : 1.0;
    let spread = cfg.bgAmbientSpread !== undefined ? Number(cfg.bgAmbientSpread) : 0.85;

    if (reactiveOpts) {
      if (reactiveOpts.intensityMult !== undefined) intensity *= reactiveOpts.intensityMult;
      if (reactiveOpts.spreadMult !== undefined) spread *= reactiveOpts.spreadMult;
    }

    const rawTop = colors.top || colors;
    const rawBot = colors.bottom || colors.top || colors;
    const top = boostColorSaturation(rawTop, satBoost);
    const bot = boostColorSaturation(rawBot, satBoost);

    ctx.save();
    if (alpha < 1.0) ctx.globalAlpha = alpha;

    const cx = targetW / 2;
    const cyTop = targetH * 0.28;
    const cyBot = targetH * 0.72;
    const maxR = Math.max(targetW, targetH) * spread;

    // 1. Dark background base
    ctx.fillStyle = '#06060c';
    ctx.fillRect(0, 0, targetW, targetH);

    const a0 = Math.min(1.0, Math.max(0.0, 0.90 * intensity)).toFixed(3);
    const a1 = Math.min(1.0, Math.max(0.0, 0.55 * intensity)).toFixed(3);
    const a2 = Math.min(1.0, Math.max(0.0, 0.18 * intensity)).toFixed(3);

    // 2. Top ambient lobe
    const [rt, gt, bt] = top;
    const gradTop = ctx.createRadialGradient(cx, cyTop, 0, cx, cyTop, maxR);
    gradTop.addColorStop(0, `rgba(${rt}, ${gt}, ${bt}, ${a0})`);
    gradTop.addColorStop(0.35, `rgba(${Math.round(rt * 0.75)}, ${Math.round(gt * 0.75)}, ${Math.round(bt * 0.75)}, ${a1})`);
    gradTop.addColorStop(0.70, `rgba(${Math.round(rt * 0.35)}, ${Math.round(gt * 0.35)}, ${Math.round(bt * 0.35)}, ${a2})`);
    gradTop.addColorStop(1.0, 'rgba(6, 6, 12, 0.0)');

    ctx.fillStyle = gradTop;
    ctx.fillRect(0, 0, targetW, targetH);

    // 3. Bottom ambient lobe
    const [rb, gb, bb] = bot;
    const gradBot = ctx.createRadialGradient(cx, cyBot, 0, cx, cyBot, maxR);
    gradBot.addColorStop(0, `rgba(${rb}, ${gb}, ${bb}, ${a0})`);
    gradBot.addColorStop(0.35, `rgba(${Math.round(rb * 0.75)}, ${Math.round(gb * 0.75)}, ${Math.round(bb * 0.75)}, ${a1})`);
    gradBot.addColorStop(0.70, `rgba(${Math.round(rb * 0.35)}, ${Math.round(gb * 0.35)}, ${Math.round(bb * 0.35)}, ${a2})`);
    gradBot.addColorStop(1.0, 'rgba(6, 6, 12, 0.0)');

    ctx.fillStyle = gradBot;
    ctx.fillRect(0, 0, targetW, targetH);

    // 4. Reactive Center Beat Bloom (Dynamic Audio Pulse)
    if (reactiveOpts && reactiveOpts.pulse > 0.03) {
      const p = Math.min(1.0, reactiveOpts.pulse);
      const coreR = maxR * (0.30 + p * 0.45);
      const rc = reactiveOpts.coreColor ? reactiveOpts.coreColor[0] : Math.round((rt + rb) / 2);
      const gc = reactiveOpts.coreColor ? reactiveOpts.coreColor[1] : Math.round((gt + gb) / 2);
      const bc = reactiveOpts.coreColor ? reactiveOpts.coreColor[2] : Math.round((bt + bb) / 2);
      const pAlpha = Math.min(1.0, Math.max(0.0, p * 0.75 * intensity)).toFixed(3);
      const pAlphaHalf = (pAlpha * 0.45).toFixed(3);

      const gradCore = ctx.createRadialGradient(cx, targetH * 0.50, 0, cx, targetH * 0.50, coreR);
      gradCore.addColorStop(0, `rgba(${rc}, ${gc}, ${bc}, ${pAlpha})`);
      gradCore.addColorStop(0.45, `rgba(${rc}, ${gc}, ${bc}, ${pAlphaHalf})`);
      gradCore.addColorStop(1.0, 'rgba(6, 6, 12, 0.0)');

      ctx.fillStyle = gradCore;
      ctx.fillRect(0, 0, targetW, targetH);
    }

    ctx.restore();
  };

  let ambientTransitionRaf = null;
  const transitionAmbientToColors = (colors, onComplete) => {
    setAmbientTargetColors(colors);
    if (ambientTransitionRaf) window.cancelAnimFrame(ambientTransitionRaf);
    const canvas = document.getElementById('bg');
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    if (!ctx) return;

    let frames = 0;
    const maxFrames = 30; // ~500ms smooth cinematic color melt

    const step = () => {
      const current = updateAmbientLerp(0.10);
      const w = canvas.width;
      const h = canvas.height;
      ctx.clearRect(0, 0, w, h);
      renderAmbientLightingWash(ctx, w, h, current, 1.0);
      if (typeof window.applyBgColorOverlay === 'function') {
        window.applyBgColorOverlay(ctx, w, h);
      }

      frames++;
      const distTop = Math.abs(mediaAmbientState.top[0] - mediaAmbientState.targetTop[0]) +
                      Math.abs(mediaAmbientState.top[1] - mediaAmbientState.targetTop[1]) +
                      Math.abs(mediaAmbientState.top[2] - mediaAmbientState.targetTop[2]);
      const distBot = Math.abs(mediaAmbientState.bottom[0] - mediaAmbientState.targetBottom[0]) +
                      Math.abs(mediaAmbientState.bottom[1] - mediaAmbientState.targetBottom[1]) +
                      Math.abs(mediaAmbientState.bottom[2] - mediaAmbientState.targetBottom[2]);

      if (frames < maxFrames && (distTop > 2 || distBot > 2)) {
        ambientTransitionRaf = window.requestAnimFrame(step);
      } else {
        ambientTransitionRaf = null;
        if (onComplete) onComplete();
      }
    };
    ambientTransitionRaf = window.requestAnimFrame(step);
  };

  // ── Background canvas filter string — stateless, module-level ──────────────
  // Method 0 = Canvas 2D blur (applied via ctx.filter before drawImage)
  // Method 1 = GPU CSS only  (canvas drawn sharp; CSS --bg-canvas-filter blurs the element)
  // Method 2 = Hybrid        (CSS blur + canvas sat/contrast, no canvas-level blur)
  const _computeBgCanvasFilter = (scale) => {
    const cfg = (typeof window.getEffectiveBackgroundTuning === 'function'
      ? window.getEffectiveBackgroundTuning() : null)
      || window.audioVisualizerTuning
      || DEFAULT_AUDIO_TUNING;
    const method   = Number(cfg.bgBlurMethod      ?? 0);
    const bSetting = Number(cfg.bgCanvasBlur       ?? 31);
    const bPx      = (method === 1 || method === 2) ? 0 : Math.round(bSetting * (scale ?? 0.5));
    const bVal     = Number(cfg.bgCanvasBrightness ?? 0.6);
    const sat      = Number(cfg.bgCanvasSaturate   ?? 1.85);
    const con      = Number(cfg.bgCanvasContrast   ?? 1.15);
    const parts    = [];
    if (bPx  > 0) parts.push(`blur(${bPx}px)`);
    if (bVal !== 1) parts.push(`brightness(${bVal})`);
    if (sat  !== 1) parts.push(`saturate(${sat})`);
    if (con  !== 1) parts.push(`contrast(${con})`);
    return parts.length > 0 ? parts.join(' ') : 'none';
  };

  // Paint background canvas immediately from thumbnail without network or animation delay
  window.paintImmediateBgThumb = (thumbOrElem) => {
    if (typeof background !== 'undefined' && !background) return;
    const canvas = document.getElementById('bg');
    if (!canvas) return;

    let img = null;
    if (thumbOrElem instanceof HTMLImageElement) {
      img = thumbOrElem;
    } else if (thumbOrElem && typeof thumbOrElem.querySelector === 'function') {
      img = thumbOrElem.querySelector('img');
    }
    if (!img) {
      const activeEl = document.querySelector('.posts > a.thumb.onara-active img, .posts > a.thumb:focus img');
      if (activeEl) img = activeEl;
    }
    if (!img || !img.complete || (img.naturalWidth === 0 && img.width === 0)) return;

    const SCALE = 0.5;
    const cw = Math.max(1, (canvas.clientWidth * SCALE) | 0);
    const ch = Math.max(1, (canvas.clientHeight * SCALE) | 0);
    if (canvas.width !== cw || canvas.height !== ch) {
      canvas.width = cw;
      canvas.height = ch;
    }

    canvas._bgFadingOut = false;
    canvas.classList.remove('fader-out', 'fast-fade');
    canvas.classList.add('fader-in');
    canvas.style.transition = 'none';
    // opacity driven by --bg-canvas-opacity CSS var (set by applyBackgroundOpacitySettings) + .fader-in
    canvas.style.removeProperty('opacity');

    const ctx = canvas.getContext('2d');
    if (!ctx) return;

    const cfg = (typeof window.getEffectiveBackgroundTuning === 'function' ? window.getEffectiveBackgroundTuning(true) : null) || (typeof window.audioVisualizerTuning !== 'undefined' && window.audioVisualizerTuning) || (typeof DEFAULT_AUDIO_TUNING !== 'undefined' ? DEFAULT_AUDIO_TUNING : {});
    const method = cfg.bgBlurMethod !== undefined ? Number(cfg.bgBlurMethod) : 0;
    const bSetting = cfg.bgCanvasBlur !== undefined ? Number(cfg.bgCanvasBlur) : 31;
    const bPx = (method === 1 || method === 2) ? 0 : Math.round(bSetting * SCALE);
    const bVal = cfg.bgCanvasBrightness !== undefined ? Number(cfg.bgCanvasBrightness) : 0.6;
    const sat = cfg.bgCanvasSaturate !== undefined ? Number(cfg.bgCanvasSaturate) : 1.85;
    const con = cfg.bgCanvasContrast !== undefined ? Number(cfg.bgCanvasContrast) : 1.15;
    const parts = [];
    if (bPx > 0) parts.push(`blur(${bPx}px)`);
    if (bVal !== 1) parts.push(`brightness(${bVal})`);
    if (sat !== 1) parts.push(`saturate(${sat})`);
    if (con !== 1) parts.push(`contrast(${con})`);
    const filterStr = parts.length > 0 ? parts.join(' ') : 'none';

    const useAmbient = Number(cfg.bgAmbientLighting) === 1;
    if (useAmbient) {
      ctx.clearRect(0, 0, cw, ch);
      const sampled = sampleMediaSpatialColors(img) || { top: [30, 30, 45], bottom: [30, 30, 45] };
      setAmbientTargetColors(sampled);
      mediaAmbientState.top = [...mediaAmbientState.targetTop];
      mediaAmbientState.bottom = [...mediaAmbientState.targetBottom];
      renderAmbientLightingWash(ctx, cw, ch, sampled, 1.0);
    } else {
      ctx.clearRect(0, 0, cw, ch);
      ctx.save();
      ctx.filter = filterStr;

      let sw = img.naturalWidth || img.width;
      let sh = img.naturalHeight || img.height;
      if (sw > 0 && sw > 0) {
        const scale = Math.max(cw / sw, ch / sh);
        const dw = sw * scale;
        const dh = sh * scale;
        const dx = (cw - dw) / 2;
        const dy = (ch - dh) / 2;
        ctx.drawImage(img, dx, dy, dw, dh);
      } else {
        ctx.drawImage(img, 0, 0, cw, ch);
      }
      ctx.restore();
    }

    // Color overlay tint if configured
    const colOp = cfg.bgCanvasColorOpacity !== undefined ? Math.min(1, Math.max(0, Number(cfg.bgCanvasColorOpacity))) : 0;
    if (colOp > 0.001) {
      const col = cfg.bgCanvasColor || '#000000';
      ctx.save();
      ctx.fillStyle = colOp >= 0.999 ? col : `color-mix(in srgb, ${col} ${Math.round(colOp * 100)}%, transparent)`;
      ctx.fillRect(0, 0, cw, ch);
      ctx.restore();
    }
  };

  // Export init function for dynamic calls
  window.initBackground = () => {
    // Media selection priority
    let elem = null;
    if (document.body.classList.contains('onara-modal-open')) {
      const mount = document.getElementById('onara-item-mount');
      if (mount) {
        // For albums: prioritize visible video/audio over the always-present <img>
        const albumVidWrap = mount.querySelector('#f0ck-album-video-wrapper');
        const albumAudWrap = mount.querySelector('#f0ck-album-audio-wrapper, #f0ck-album-audio-container');
        if (albumVidWrap && albumVidWrap.style.display !== 'none') {
          elem = mount.querySelector('#f0ck-album-video');
        } else if (albumAudWrap && albumAudWrap.style.display !== 'none') {
          elem = mount.querySelector('#f0ck-album-audio');
        }
        if (!elem) {
          elem = mount.querySelector("#my-video, video, audio, img, ruffle-player");
        }
      }
    }
    if (!elem) {
      elem = document.querySelector("#my-video");
    }
    if (!elem) {
      // Album items use different IDs for video/audio
      const albumVideo = document.getElementById('f0ck-album-video');
      const albumVideoWrapper = document.getElementById('f0ck-album-video-wrapper');
      if (albumVideo && albumVideo.src && albumVideoWrapper && albumVideoWrapper.style.display !== 'none') {
        elem = albumVideo;
      }
      if (!elem) {
        const albumAudio = document.getElementById('f0ck-album-audio');
        if (albumAudio && albumAudio.src) {
          elem = albumAudio;
        }
      }
    }
    if (!elem) {
        const rp = document.querySelector('ruffle-player');
        if (rp) {
            elem = rp.shadowRoot ? rp.shadowRoot.querySelector('canvas') : null;
            if (!elem) {
                // If we have a player but no canvas yet, it's likely still initializing.
                // Re-init background in a moment.
                setTimeout(window.initBackground, 200);
                return;
            }
        }
    }
    // Audio items: don't swap to cover art — the visualizer handles #bg directly
    if (!elem) {
        elem = document.querySelector("#f0ck-image");
    }

    const canvas = document.getElementById('bg');

    if (elem) {
      if (canvas) {
        // Restore visual state on re-init
        const bgCfg = (typeof window.getEffectiveBackgroundTuning === 'function' ? window.getEffectiveBackgroundTuning() : null) || window.audioVisualizerTuning || DEFAULT_AUDIO_TUNING;
        const feedAudio = Number(bgCfg.feedAudioToBg !== undefined ? bgCfg.feedAudioToBg : 1) === 1;

        // Auto-switch background settings profile + update the mode bar button highlight
        // Use a flag to suppress the toast notification on auto-switches (not user-initiated)
        window._bgModeAutoSwitch = true;
        const inOnara = (typeof isCurrentlyInOnara === 'function') ? isCurrentlyInOnara() : document.body.classList.contains('onara-modal-open');
        if (inOnara) {
          const btn = document.querySelector('#bg-mode-btn-onara');
          if (btn) btn.click();
          else if (typeof window.applyBackgroundOpacitySettings === 'function') {
            window.applyBackgroundOpacitySettings(window.onaraTuning, true);
          }
        } else if (elem.tagName === 'AUDIO') {
          const btn = document.querySelector('#bg-mode-btn-audio');
          if (btn) btn.click();
          else if (typeof window.applyBackgroundOpacitySettings === 'function') {
            window.applyBackgroundOpacitySettings(window.audioBgTuning, 'audio');
          }
        } else {
          // Reset stale cover-art ambient colors so they don't bleed through on the next item
          mediaAmbientState.top = [25, 25, 35];
          mediaAmbientState.targetTop = [25, 25, 35];
          mediaAmbientState.bottom = [25, 25, 35];
          mediaAmbientState.targetBottom = [25, 25, 35];
          mediaAmbientState.hasSampled = false;
          const btn = document.querySelector('#bg-mode-btn-standard');
          if (btn) btn.click();
          else if (typeof window.applyBackgroundOpacitySettings === 'function') {
            window.applyBackgroundOpacitySettings(window.audioVisualizerTuning, false);
          }
        }
        window._bgModeAutoSwitch = false;

        if (background && (elem.tagName !== 'AUDIO' || feedAudio)) {
          canvas._bgFadingOut = false;
          canvas.classList.add('fader-in');
          canvas.classList.remove('fader-out', 'fast-fade');
          if (document.body.classList.contains('onara-modal-open')) {
            canvas.style.transition = 'none';
            // opacity driven by --bg-canvas-opacity CSS var (applyBackgroundOpacitySettings already called above)
            canvas.style.removeProperty('opacity');
          }
        } else {
          // Don't clear the canvas here — let the existing content fade out.
          canvas._bgFadingOut = true;
          canvas.classList.add('fader-out');
          canvas.classList.remove('fader-in', 'fast-fade');
          const stopOnFadeEnd = (ev) => {
            if (ev.propertyName === 'opacity') {
              canvas._bgFadingOut = false;
              canvas.removeEventListener('transitionend', stopOnFadeEnd);
            }
          };
          canvas.addEventListener('transitionend', stopOnFadeEnd);
          return; // nothing more to do — let CSS do the fade
        }

        const SCALE = 0.5;
        const syncCanvasDimensions = () => {
          const curCw = Math.max(1, (canvas.clientWidth * SCALE) | 0);
          const curCh = Math.max(1, (canvas.clientHeight * SCALE) | 0);
          if (canvas.width !== curCw || canvas.height !== curCh) {
            canvas.width = curCw;
            canvas.height = curCh;
          }
          return { w: canvas.width, h: canvas.height };
        };

        const { w: cw, h: ch } = syncCanvasDimensions();

        // Capture previous canvas snapshot for buttery-smooth crossfade transition.
        // IMPORTANT: Skip snapshot when the canvas was previously driven by the audio visualizer
        // (feedAudioToBg). In that state the canvas contains transient visualizer output
        // (accent-coloured bars / waveforms) — using it as a crossfade source causes a
        // green (or otherwise accent-coloured) full-page flash while the new thumbnail loads.
        // canvas._wasVisualizerSource is set to true each time the visualizer feeds to #bg,
        // and cleared when the non-visualizer (image/video) background path takes over.
        const isVisualizerDriven = !!canvas._wasVisualizerSource;
        let prevSnapshot = null;
        if (!isVisualizerDriven && canvas.width > 0 && canvas.height > 0) {
          try {
            prevSnapshot = document.createElement('canvas');
            prevSnapshot.width = canvas.width;
            prevSnapshot.height = canvas.height;
            const pCtx = prevSnapshot.getContext('2d');
            pCtx.drawImage(canvas, 0, 0);
          } catch (e) {
            prevSnapshot = null;
          }
        }
        // Track whether the canvas is now going to be visualizer-driven
        canvas._wasVisualizerSource = (elem.tagName === 'AUDIO' && feedAudio);
        // Reset the thumbnail reference for the ambient sampler — will be repopulated when drawOnce() loads the new thumb
        canvas._bgThumbImg = null;
        // Clear the canvas immediately so no stale visualizer frame bleeds through
        if (isVisualizerDriven) {
          const ctx0 = canvas.getContext('2d');
          if (ctx0) ctx0.clearRect(0, 0, canvas.width, canvas.height);
        }

        const context = canvas.getContext('2d');
        const cfgCurrent = (typeof window.getEffectiveBackgroundTuning === 'function' ? window.getEffectiveBackgroundTuning() : null) || window.audioVisualizerTuning || DEFAULT_AUDIO_TUNING;
        const blurSetting = cfgCurrent.bgCanvasBlur !== undefined ? Number(cfgCurrent.bgCanvasBlur) : 31;
        const methodSetting = cfgCurrent.bgBlurMethod !== undefined ? Number(cfgCurrent.bgBlurMethod) : 0;
        const blurPx = (methodSetting === 1 || methodSetting === 2) ? 0 : Math.round(blurSetting * SCALE);
        const brightnessVal = cfgCurrent.bgCanvasBrightness !== undefined ? Number(cfgCurrent.bgCanvasBrightness) : 0.6;

        // Thin wrapper — passes the current SCALE from this initBackground() call
        const getCanvasFilter = () => _computeBgCanvasFilter(SCALE);

        const drawCoverImage = (ctx, source) => {
          if (!source) return;
          const targetCw = (ctx && ctx.canvas) ? ctx.canvas.width : canvas.width;
          const targetCh = (ctx && ctx.canvas) ? ctx.canvas.height : canvas.height;
          let sw = 0, sh = 0;
          if (source.videoWidth && source.videoHeight) {
            sw = source.videoWidth;
            sh = source.videoHeight;
          } else if (source.naturalWidth && source.naturalHeight) {
            sw = source.naturalWidth;
            sh = source.naturalHeight;
          } else if (source.width && source.height) {
            sw = source.width;
            sh = source.height;
          } else if (source.clientWidth && source.clientHeight) {
            sw = source.clientWidth;
            sh = source.clientHeight;
          }

          if (sw > 0 && sh > 0) {
            const scale = Math.max(targetCw / sw, targetCh / sh);
            const dw = sw * scale;
            const dh = sh * scale;
            const dx = (targetCw - dw) / 2;
            const dy = (targetCh - dh) / 2;
            ctx.drawImage(source, dx, dy, dw, dh);
          } else {
            ctx.drawImage(source, 0, 0, targetCw, targetCh);
          }
        };

        const applyBgColorOverlay = (ctx, w, h) => {
          const cfg = (typeof window.getEffectiveBackgroundTuning === 'function' ? window.getEffectiveBackgroundTuning() : null) || window.audioVisualizerTuning || DEFAULT_AUDIO_TUNING;
          const colOp = cfg.bgCanvasColorOpacity !== undefined ? Math.min(1, Math.max(0, Number(cfg.bgCanvasColorOpacity))) : 0;
          if (colOp > 0.001) {
            const col = cfg.bgCanvasColor || '#000000';
            ctx.save();
            ctx.fillStyle = colOp >= 0.999 ? col : `color-mix(in srgb, ${col} ${Math.round(colOp * 100)}%, transparent)`;
            ctx.fillRect(0, 0, w, h);
            ctx.restore();
          }
        };

        let crossfadeRafId = null;
        const crossfadeToSource = (sourceImg, onComplete) => {
          if (crossfadeRafId) window.cancelAnimFrame(crossfadeRafId);
          syncCanvasDimensions();
          const targetW = canvas.width;
          const targetH = canvas.height;
          const useAmbient = Number(getEffectiveBackgroundTuning().bgAmbientLighting) === 1;

          if (useAmbient) {
            const sampled = sampleMediaSpatialColors(sourceImg) || { top: [30, 30, 45], bottom: [30, 30, 45] };
            transitionAmbientToColors(sampled, onComplete);
            return;
          }

          if (!prevSnapshot) {
            context.clearRect(0, 0, targetW, targetH);
            context.save();
            context.filter = getCanvasFilter();
            drawCoverImage(context, sourceImg);
            context.restore();
            applyBgColorOverlay(context, targetW, targetH);
            if (onComplete) onComplete();
            return;
          }

          const startTime = performance.now();
          const duration = 350; // ms

          const step = (now) => {
            const elapsed = now - startTime;
            const progress = Math.min(1.0, elapsed / duration);
            const ease = progress < 0.5 ? 2 * progress * progress : -1 + (4 - 2 * progress) * progress;

            syncCanvasDimensions();
            const w = canvas.width;
            const h = canvas.height;
            context.clearRect(0, 0, w, h);

            // 1. Base: keep previous background at full opacity underneath (prevents transparent dip)
            if (prevSnapshot) {
              context.drawImage(prevSnapshot, 0, 0, w, h);
            }

            // 2. Fade in new background smoothly over previous
            context.save();
            context.globalAlpha = ease;
            context.filter = getCanvasFilter();
            try {
              drawCoverImage(context, sourceImg);
            } catch (e) {}
            context.restore();

            // 3. Color overlay tint if configured
            applyBgColorOverlay(context, w, h);

            if (progress < 1.0) {
              crossfadeRafId = window.requestAnimFrame(step);
            } else {
              crossfadeRafId = null;
              prevSnapshot = null;
              if (onComplete) onComplete();
            }
          };
          crossfadeRafId = window.requestAnimFrame(step);
        };

        const drawOnce = () => {
            if (!background || !context) return;
            syncCanvasDimensions();
            const itemId = window.getCurrentItemId();
            const isDrawable = elem && elem.tagName === 'IMG';

            if (itemId) {
                if (document.body.classList.contains('onara-modal-open')) {
                  const onaraThumbImg = document.querySelector('.posts > a.thumb.onara-active img, .posts > a.thumb:focus img');
                  if (isDrawable && elem.complete && elem.naturalWidth > 0) {
                    crossfadeToSource(elem);
                    return;
                  }
                  if (onaraThumbImg && onaraThumbImg.complete && onaraThumbImg.naturalWidth > 0) {
                    crossfadeToSource(onaraThumbImg);
                    return;
                  }
                }

                let resolved = false;
                const onLoaded = (src) => {
                  if (resolved) return;
                  resolved = true;
                  crossfadeToSource(src);
                };

                if (isDrawable) {
                  if (elem.complete && elem.naturalWidth > 0) {
                    onLoaded(elem);
                    return;
                  }
                  elem.onload = () => onLoaded(elem);
                }

                const thumb = new Image();
                thumb.onload = () => { canvas._bgThumbImg = thumb; onLoaded(thumb); };
                thumb.onerror = () => {
                  if (isDrawable && elem.complete && elem.naturalWidth > 0) {
                    onLoaded(elem);
                  }
                };
                let newSrc = `/t/${itemId}.webp`;
                if (window.applyThumbCacheBust) newSrc = window.applyThumbCacheBust(newSrc);
                thumb.src = newSrc;
            } else if (isDrawable) {
                if (elem.complete && elem.naturalWidth > 0) {
                    crossfadeToSource(elem);
                } else {
                    elem.onload = () => crossfadeToSource(elem);
                }
            }
        };
        window.redrawBgCanvas = drawOnce;

        let videoFadeStartTime = prevSnapshot ? performance.now() : 0;
        let _bgLastTs = 0;
        const animationLoop = (ts) => {
          // Increment the per-frame ID so getEffectiveBackgroundTuning() cache invalidates correctly
          window._rafFrameId = ((window._rafFrameId || 0) + 1) & 0xFFFFFF;

          if (!elem || elem.tagName === 'AUDIO' || elem.paused || elem.ended || (!background && !canvas._bgFadingOut)) {
            bgRafId = null;
            return;
          }

          // Read tuning live every frame so slider changes apply immediately.
          const cfgLive = getEffectiveBackgroundTuning();
          // Throttle non-ambient bg to user-configured fps (default 30).
          // Ambient mode stays at full fps because the colour lerp must be buttery-smooth.
          const _useAmbientThrottle = Number(cfgLive.bgAmbientLighting) === 1;
          const _bgFps = Number(cfgLive.bgCanvasFps ?? 30);
          const _bgFrameMs = _bgFps > 0 ? 1000 / _bgFps : 0;
          if (!_useAmbientThrottle && !prevSnapshot && _bgFrameMs > 0 && ts - _bgLastTs < _bgFrameMs) {
            bgRafId = window.requestAnimFrame(animationLoop);
            return;
          }
          _bgLastTs = ts;
          try {
              syncCanvasDimensions();
              const curCw = canvas.width;
              const curCh = canvas.height;
              context.clearRect(0, 0, curCw, curCh);

              const useAmbient = Number(cfgLive.bgAmbientLighting) === 1;
              if (useAmbient) {
                if (!elem._ambientFrameCount) elem._ambientFrameCount = 0;
                elem._ambientFrameCount++;
                if (elem._ambientFrameCount % 3 === 0 || !mediaAmbientState.hasSampled) {
                  const sampled = sampleMediaSpatialColors(elem);
                  if (sampled) {
                    setAmbientTargetColors(sampled);
                    mediaAmbientState.hasSampled = true;
                  }
                }

                // Smooth exponential lerp on every single RAF frame (0.05 per frame = buttery smooth)
                const current = updateAmbientLerp(0.05);

                if (prevSnapshot) {
                  const elapsed = performance.now() - videoFadeStartTime;
                  const progress = Math.min(1.0, elapsed / 350);
                  const ease = progress < 0.5 ? 2 * progress * progress : -1 + (4 - 2 * progress) * progress;

                  context.drawImage(prevSnapshot, 0, 0, curCw, curCh);
                  renderAmbientLightingWash(context, curCw, curCh, current, ease);

                  if (progress >= 1.0) {
                    prevSnapshot = null;
                  }
                } else {
                  renderAmbientLightingWash(context, curCw, curCh, current, 1.0);
                }
              } else {
                if (prevSnapshot) {
                  const elapsed = performance.now() - videoFadeStartTime;
                  const progress = Math.min(1.0, elapsed / 350);
                  const ease = progress < 0.5 ? 2 * progress * progress : -1 + (4 - 2 * progress) * progress;

                  // Base: previous frame drawn underneath at full opacity
                  context.drawImage(prevSnapshot, 0, 0, curCw, curCh);

                  // Video dissolves smoothly on top
                  context.save();
                  context.globalAlpha = ease;
                  context.filter = getCanvasFilter();
                  try {
                    drawCoverImage(context, elem);
                  } catch (e) {}
                  context.restore();

                  if (progress >= 1.0) {
                    prevSnapshot = null;
                  }
                } else {
                  // Video already loaded or resumed from pause: render directly at 100% opacity without fading from black
                  context.save();
                  context.filter = getCanvasFilter();
                  try {
                    drawCoverImage(context, elem);
                  } catch (e) {}
                  context.restore();
                }
              }

              // Color overlay tint if configured
              applyBgColorOverlay(context, curCw, curCh);
          } catch (e) {
              bgRafId = null;
              return;
          }
          bgRafId = window.requestAnimFrame(animationLoop);
        };

        // Singleton: Ensure only one listener and one loop per element
        // BgState.setElem() cancels any running rAF if the element changed.
        const isAlbumVideo = elem.id === 'f0ck-album-video';
        if (lastBgElem !== elem || isAlbumVideo) {
          BgState.setElem(elem); // cancels bgRafId + sets lastBgElem
          if (prevSnapshot) videoFadeStartTime = performance.now();

          if (elem.tagName === 'VIDEO') {
              if (background) {
                if (!elem.paused) {
                  if (bgRafId) window.cancelAnimFrame(bgRafId);
                  animationLoop();
                }
                // For album videos that haven't started yet, or Onara videos pending play, drawOnce with the thumbnail
                else if (isAlbumVideo || document.body.classList.contains('onara-modal-open')) {
                  drawOnce();
                }
              }

              const startVideoLoop = () => {
                if (crossfadeRafId) window.cancelAnimFrame(crossfadeRafId);
                if (bgRafId) window.cancelAnimFrame(bgRafId);
                // Only reset fade start time if a previous snapshot is actively waiting to be crossfaded
                if (prevSnapshot) videoFadeStartTime = performance.now();
                if (background) animationLoop();
              };
              if (isAlbumVideo) {
                // Clean up previous listeners via stored reference
                if (elem._bgPlayHandler) elem.removeEventListener('play', elem._bgPlayHandler);
                if (elem._bgCanplayHandler) elem.removeEventListener('canplay', elem._bgCanplayHandler);
                elem._bgPlayHandler = startVideoLoop;
                elem._bgCanplayHandler = startVideoLoop;
                elem.addEventListener('play', startVideoLoop);
                elem.addEventListener('canplay', startVideoLoop);
              } else {
                elem.addEventListener('play', startVideoLoop);
              }
          } else if (elem.tagName === 'CANVAS') {
              // Ruffle canvas: start loop immediately
              if (bgRafId) window.cancelAnimFrame(bgRafId);
              if (prevSnapshot) videoFadeStartTime = performance.now();
              if (background) animationLoop();
          } else if (elem.tagName === 'AUDIO') {
              elem.addEventListener('play', () => {
                 if (background) {
                   canvas.classList.remove('fader-out', 'fast-fade');
                   canvas.classList.add('fader-in');
                 }
                 if (window.initVisualizer) window.initVisualizer(elem);
              });
              elem.addEventListener('playing', () => {
                 if (background) {
                   canvas.classList.remove('fader-out', 'fast-fade');
                   canvas.classList.add('fader-in');
                 }
                 if (window.initVisualizer) window.initVisualizer(elem);
              });
          }
        }

        if (elem.tagName === 'VIDEO') {
            if (background) {
              if (!elem.paused) {
                if (bgRafId) window.cancelAnimFrame(bgRafId);
                animationLoop();
              }
              // For album videos that haven't started yet, or Onara videos pending play, drawOnce with the thumbnail
              else if (isAlbumVideo || document.body.classList.contains('onara-modal-open')) {
                drawOnce();
              }
            }
        } else if (elem.tagName === 'CANVAS') {
            if (background) {
              if (bgRafId) window.cancelAnimFrame(bgRafId);
              animationLoop();
            }
        } else if (elem.tagName === 'IMG') {
            // IMG: draw from thumbnail.
            drawOnce();
        } else if (elem.tagName === 'AUDIO') {
            const bgCfg = (typeof window.getEffectiveBackgroundTuning === 'function' ? window.getEffectiveBackgroundTuning() : null) || window.audioVisualizerTuning || DEFAULT_AUDIO_TUNING;
            const feedAudio = Number(bgCfg.feedAudioToBg !== undefined ? bgCfg.feedAudioToBg : 1) === 1;

            if (feedAudio) {
              if (background && canvas) {
                canvas._bgFadingOut = false;
                canvas.classList.remove('fader-out', 'fast-fade');
                canvas.classList.add('fader-in');
              }
              const coverEl = document.querySelector("#f0ck-audio-cover");
              if (coverEl && coverEl.src && !coverEl.src.endsWith('#') && !coverEl.src.includes('audio.webp') && !coverEl.src.includes('200.gif')) {
                if (coverEl.complete && coverEl.naturalWidth > 0) {
                  crossfadeToSource(coverEl);
                } else {
                  coverEl.onload = () => crossfadeToSource(coverEl);
                }
              } else {
                drawOnce();
              }
            } else if (canvas) {
              canvas.classList.add('fader-out');
              canvas.classList.remove('fader-in', 'fast-fade');
              const clearOnFade = (ev) => {
                if (ev.propertyName === 'opacity') {
                  const ctx = canvas.getContext('2d');
                  if (ctx) ctx.clearRect(0, 0, canvas.width, canvas.height);
                  canvas.removeEventListener('transitionend', clearOnFade);
                }
              };
              canvas.addEventListener('transitionend', clearOnFade);
            }
            if (window.initVisualizer) {
              window.initVisualizer(elem);
            }
        }

      }
    } else if (canvas) {
      const mount = document.getElementById('onara-item-mount');
      const ytEmbed = (mount && mount.querySelector('#yt-embed')) || document.getElementById('yt-embed');
      if (ytEmbed) {
        if (background) {
          canvas._bgFadingOut = false;
          initYoutubeAmbient(ytEmbed, canvas, true);
        } else {
          stopYoutubeAmbient();
          canvas._bgFadingOut = true;
          canvas.classList.add('fader-out');
          canvas.classList.remove('fader-in', 'fast-fade');
        }
      } else {
        stopYoutubeAmbient();
        // No drawable element (e.g. generic file) — still handle canvas fade toggle
        if (background) {
          canvas._bgFadingOut = false;
          // Draw the item thumbnail if we have an item ID in the URL
          const itemId = window.getCurrentItemId();
          if (itemId) {
            const context = canvas.getContext('2d');
            const _SCALE = 0.25;
            const cw = canvas.width  = Math.max(1, (canvas.clientWidth  * _SCALE) | 0);
            const ch = canvas.height = Math.max(1, (canvas.clientHeight * _SCALE) | 0);
            const blurPx = Math.round(100 * _SCALE) || 1;
            const thumb = new Image();
            thumb.onload = () => {
              try {
                context.filter = `blur(${blurPx}px)`;
                const sw = thumb.naturalWidth || thumb.width;
                const sh = thumb.naturalHeight || thumb.height;
                if (sw > 0 && sh > 0) {
                  const scale = Math.max(cw / sw, ch / sh);
                  const dw = sw * scale;
                  const dh = sh * scale;
                  context.drawImage(thumb, (cw - dw) / 2, (ch - dh) / 2, dw, dh);
                } else {
                  context.drawImage(thumb, 0, 0, cw, ch);
                }
                context.filter = 'none';
              } catch (e) {}
              canvas.classList.remove('fader-out', 'fast-fade');
              canvas.classList.add('fader-in');
            };
            thumb.src = `/t/${itemId}.webp`;
          } else {
            canvas.classList.remove('fader-out', 'fast-fade');
            canvas.classList.add('fader-in');
          }
        } else {
          canvas._bgFadingOut = true;
          canvas.classList.add('fader-out');
          canvas.classList.remove('fader-in', 'fast-fade');
          const stopOnFadeEnd = (ev) => {
            if (ev.propertyName === 'opacity') {
              canvas._bgFadingOut = false;
              canvas.removeEventListener('transitionend', stopOnFadeEnd);
            }
          };
          canvas.addEventListener('transitionend', stopOnFadeEnd);
        }
      }
    }
  };


  const getAudioCoverUrl = (coverCircle, audioElement) => {
    if (coverCircle) {
      if (coverCircle._origBgImage && coverCircle._origBgImage !== 'none') {
        const m = coverCircle._origBgImage.match(/url\(["']?([^"')]+)["']?\)/);
        if (m && m[1] && !m[1].includes('200.gif') && !m[1].includes('audio.webp')) return m[1];
      }
      if (coverCircle.style && coverCircle.style.backgroundImage && coverCircle.style.backgroundImage !== 'none') {
        const m = coverCircle.style.backgroundImage.match(/url\(["']?([^"')]+)["']?\)/);
        if (m && m[1] && !m[1].includes('200.gif') && !m[1].includes('audio.webp')) return m[1];
      }
    }
    const coverEl = audioElement?.closest('.v0ck, .album-audio-wrapper, .embed-responsive, #onara-item-mount, .item-view')?.querySelector("#f0ck-audio-cover")
      || document.querySelector("#onara-item-mount #f0ck-audio-cover, .item-view #f0ck-audio-cover, #f0ck-audio-cover");
    if (coverEl && coverEl.src && !coverEl.src.endsWith('#') && !coverEl.src.includes('200.gif') && !coverEl.src.includes('audio.webp')) {
      return coverEl.src;
    }
    if (audioElement && audioElement.getAttribute) {
      const poster = audioElement.getAttribute('poster');
      if (poster && !poster.includes('200.gif') && !poster.includes('audio.webp')) return poster;
    }
    const ph = coverCircle ? coverCircle.closest('.sidebar-media-placeholder.audio') : null;
    const parent = ph ? ph.parentElement : null;
    const imgEl = parent ? parent.querySelector('#f0ck-audio-cover, img[src*="/ca/"], img[src*="cover"]') : null;
    if (imgEl && imgEl.src && !imgEl.src.includes('200.gif') && !imgEl.src.includes('audio.webp')) {
      return imgEl.src;
    }
    return null;
  };
  window.getAudioCoverUrl = getAudioCoverUrl;

  // Audio Visualizer Reactivity Tuner
  const DEFAULT_AUDIO_TUNING = {
    useCustomColor: 0,
    visualizerColor: "#241f31",
    enableBeatHue: 0,
    beatHueThreshold: 0.3,
    beatHueStep: 45,
    beatHueSmooth: 0.65,
    beatHueIdleDrift: 0.2,
    beatHueCooldown: 150,
    coverSize: 110,
    glowIntensity: 500,
    coverGlowBase: 128,
    glowBrightness: 2.05,
    glowSensitivity: 1,
    glowDynamism: 0.85,
    glowSmoothness: 0.95,
    showCoverInEye: 0,
    showCoverInBg: 0,
    showCoverArt: 0,
    solidCover: 1,
    coverPosX: 0,
    coverPosY: 0,
    coverImageScale: 100,
    coverImagePosX: 0,
    coverImagePosY: 0,
    bgCoverOpacity: 0.45,
    bgCoverBlur: 0,
    bgCoverScale: 100,
    bgCoverPosX: 50,
    bgCoverPosY: 50,
    coverColor: "#000000",
    coverOpacity: 0,
    bassGain: 0.5,
    bassPower: 0.3,
    scaleBounce: 0.85,
    bounceBoost: 1,
    attackSpeed: 1,
    releaseSpeed: 0.6,
    enableBars: 0,
    enableInnerBars: 1,
    useCustomInnerColor: 0,
    innerBarColor: "#ff0000",
    innerBarsMode: 4,
    innerRadius: 152,
    innerPupilRadius: 42,
    innerPupilRingOpacity: 0.99,
    innerPupilColor: "#000000",
    enableVoidTunnel: 0,
    voidTunnelRings: 10,
    voidTunnelSpeed: 0.6,
    voidTunnelReactivity: 3.0,
    voidTunnelFadeWidth: 0.35,
    voidTunnelUseAccent: 1,
    voidTunnelColor: "#ffffff",
    voidTunnelZone: 0,
    voidTunnelRingWidth: 2.5,
    voidTunnelEdgeFade: 0.35,
    voidTunnelOpacity: 1.0,
    voidTunnelDepth: 0.65,
    voidTunnelZoomSpeed: 0.5,
    // Square Corridor Tunnel
    enableSquareTunnel: 0,
    squareTunnelSpeed: 0.4,
    squareTunnelReactivity: 1.5,
    squareTunnelLevels: 6,
    squareTunnelOpacity: 1.0,
    squareTunnelGridWidth: 1.5,
    squareTunnelWallFillAlpha: 1,
    squareTunnelFog: 0.75,
    squareTunnelGlow: 12,
    squareTunnelWarp: 2.0,
    squareTunnelUseAccent: 1,
    squareTunnelGridColor: '#ffffff',
    squareTunnelRoomScale: 1.5,
    squareTunnelFOV: 0.55,
    squareTunnelHideHUD: 0,
    squareTunnelWallMode: 0,
    squareTunnelWallColor: '#1a1a2e',
    squareTunnelWallColor2: '#000000',
    squareTunnelBackdropColor: '#000000',
    squareTunnelBackdropBrightness: 0.55,
    squareTunnelPatternScale: 40,
    squareTunnelPatTileAlpha: 1,
    squareTunnelMaze: 0,
    squareTunnelTurnStrength: 0.6,
    squareTunnelTurnSpeed: 0.04,
    squareTunnelStraightBias: 0.6,
    squareTunnelDriftFreq: 1.0,
    squareTunnelReactDrift: 0.0,
    squareTunnelReactScale: 0.18,
    squareTunnelReactBright: 0.4,
    innerBarCount: 21,
    innerBarWidth: 12,
    innerBarHeight: 0.85,
    innerBarOpacity: 0.36,
    outerRingOpacity: 0,
    eyeDisableGlow: 0,
    eyeDisableShadow: 0,
    eyeFOV: 600,
    eyeZPos: 0,
    innerHighBoost: 0.34,
    innerRadialRotation: 90,
    innerBarGlow: 0,
    innerHideNote: 1,
    barHeight: 0.8,
    barWidth: 6,
    barGap: 3,
    barRadius: 3,
    barOpacity: 0.85,
    barGlow: 8,
    smoothing: 0.86,
    followMouse: 1,
    followSpeed: 0.02,
    followRadius: 10,
    tiltEffect: 1,
    glowAttack: 1,
    glowDecay: 0.5,
    enableBgGradient: 1,
    bgGradientStyle: 1,
    bgGradientOpacity: 0.4,
    bgGradientReactivity: 1.2,
    bgGradientSpread: 75,
    useCustomBgColor: 0,
    bgGradientColor: "#3a1c71",
    enableBlink: 0,
    blinkInterval: 12,
    beatHueSpeed: 0.1,
    onaraBgOpacity: 0.4,
    onaraBackdropBlur: 5,
    bgCanvasColor: "#000000",
    bgCanvasColorOpacity: 1,
    bgCanvasOpacity: 0.4,
    bgBlurMethod: 0,
    bgCanvasBlur: 30,
    bgCanvasBrightness: 0.75,
    bgCanvasSaturate: 1.9,
    bgCanvasContrast: 1.15,
    bgCanvasZoom: 1.38,
    bgCanvasScale: 2.15,
    onaraGridDim: 0.38,
    feedAudioToBg: 1,
    bgAmbientLighting: 0,
    bgAmbientIntensity: 1.8,
    bgAmbientSpread: 0.85,
    bgAmbientSaturation: 2.1,
    bgAmbientSmoothness: 0.11,
    bgBlurMethod: 1,
    bgCanvasFps: 60,
    bgCanvasBlur: 60,
    bgCanvasBrightness: 0.6,
    bgCanvasSaturate: 1.9,
    bgCanvasContrast: 1.15,
    bgCanvasZoom: 1,
    bgCanvasScale: 2.15,
    bgCanvasColor: "#000000",
    bgCanvasColorOpacity: 0.15,
    bgCanvasOpacity: 0.43,
    onaraGridDim: 0.38,
    feedAudioToBg: 0,
    bgAudioReactivity: 1.5,
    onaraBgOpacity: 0.4,
    onaraBackdropBlur: 5
  };

  const TUNING_CONFIG_VERSION = '2026-09-17_tuner_v17';

  const DEFAULT_ONARA_TUNING = {
    bgCanvasOpacity: 0,
    bgCanvasBlur: 0,
    bgCanvasBrightness: 0.1,
    bgCanvasFps: 0,
    feedAudioToBg: 0,
    bgCanvasColor: "#000000",
    bgCanvasColorOpacity: 0,
    bgAmbientLighting: 0,
    bgAmbientIntensity: 0.1,
    bgAmbientSpread: 0.75,
    bgAmbientSaturation: 0.9,
    bgAmbientSmoothness: 0.05,
    bgBlurMethod: 2,
    bgCanvasSaturate: 1.85,
    bgCanvasContrast: 1.15,
    bgCanvasZoom: 1.38,
    bgCanvasScale: 2.15,
    bgAudioReactivity: 0,
    onaraBgOpacity: 0.6,
    onaraBackdropBlur: 5,
    onaraGridDim: 0
  };

  const ONARA_TUNING_CONFIG_VERSION = '2026-09-17_onara_v5';
  let savedOnaraTuning = null;
  try {
    const appliedOnaraVer = localStorage.getItem('f0ck_onara_tuning_ver');
    if (appliedOnaraVer !== ONARA_TUNING_CONFIG_VERSION) {
      localStorage.setItem('f0ck_onara_tuning', JSON.stringify(DEFAULT_ONARA_TUNING));
      localStorage.setItem('f0ck_onara_tuning_ver', ONARA_TUNING_CONFIG_VERSION);
      savedOnaraTuning = Object.assign({}, DEFAULT_ONARA_TUNING);
    } else {
      const raw = localStorage.getItem('f0ck_onara_tuning');
      if (raw) savedOnaraTuning = JSON.parse(raw);
    }
  } catch (e) {}

  window.DEFAULT_ONARA_TUNING = DEFAULT_ONARA_TUNING;
  window.onaraTuning = Object.assign({}, DEFAULT_ONARA_TUNING, savedOnaraTuning || {});

  const DEFAULT_AUDIO_BG_TUNING = {
    bgCanvasColor: "#000000",
    bgCanvasColorOpacity: 0.15,
    bgCanvasOpacity: 0.43,
    bgBlurMethod: 0,
    bgCanvasFps: 30,
    bgCanvasBlur: 60,
    bgCanvasBrightness: 0.6,
    bgCanvasSaturate: 1.9,
    bgCanvasContrast: 1.15,
    bgCanvasZoom: 1,
    bgCanvasScale: 2.15,
    feedAudioToBg: 1,
    bgAmbientLighting: 0,
    bgAmbientIntensity: 0.1,
    bgAmbientSpread: 0.3,
    bgAmbientSaturation: 0.5,
    bgAmbientSmoothness: 0.01,
    bgAudioReactivity: 1.50,
    onaraBgOpacity: 0.4,
    onaraBackdropBlur: 5,
    onaraGridDim: 0.38
  };

  const AUDIO_BG_TUNING_CONFIG_VERSION = '2026-09-16_audio_bg_v2';
  let savedAudioBgTuning = null;
  try {
    const appliedAudioBgVer = localStorage.getItem('f0ck_audio_bg_tuning_ver');
    if (appliedAudioBgVer !== AUDIO_BG_TUNING_CONFIG_VERSION) {
      localStorage.setItem('f0ck_audio_bg_tuning', JSON.stringify(DEFAULT_AUDIO_BG_TUNING));
      localStorage.setItem('f0ck_audio_bg_tuning_ver', AUDIO_BG_TUNING_CONFIG_VERSION);
      savedAudioBgTuning = Object.assign({}, DEFAULT_AUDIO_BG_TUNING);
    } else {
      const raw = localStorage.getItem('f0ck_audio_bg_tuning');
      if (raw) savedAudioBgTuning = JSON.parse(raw);
    }
  } catch (e) {}

  window.DEFAULT_AUDIO_BG_TUNING = DEFAULT_AUDIO_BG_TUNING;
  window.audioBgTuning = Object.assign({}, DEFAULT_AUDIO_BG_TUNING, savedAudioBgTuning || {});

  window.isCurrentlyInOnara = isCurrentlyInOnara;

  let _isAudioItemCache = { result: false, ts: 0 };
  const isCurrentItemAudio = () => {
    const now = Date.now();
    if (now - _isAudioItemCache.ts < 250) return _isAudioItemCache.result;
    const mount = document.getElementById('onara-item-mount');
    if (mount) {
      const a = mount.querySelector('#f0ck-album-audio, audio#my-video, audio');
      if (a && a.isConnected) { _isAudioItemCache = { result: true, ts: now }; return true; }
    }
    const aud = document.querySelector('#f0ck-album-audio, audio#my-video, audio');
    let result = false;
    if (aud && aud.isConnected) {
      const albumAudioWrap = document.getElementById('f0ck-album-audio-wrapper');
      if (albumAudioWrap && albumAudioWrap.style.display !== 'none') result = true;
      if (aud.tagName === 'AUDIO') result = true;
    }
    _isAudioItemCache = { result, ts: now };
    return result;
  };
  window.isCurrentItemAudio = isCurrentItemAudio;

  // getEffectiveBackgroundTuning — thin wrapper around BgState.getTuning()
  // Cache lives in BgState; _bgTuningCache/_bgTuningFrame kept only for any external accesses.
  const getEffectiveBackgroundTuning = (forceMode) => BgState.getTuning(forceMode);
  window.getEffectiveBackgroundTuning = getEffectiveBackgroundTuning;

  const getCustomDefaultTuning = () => {
    try {
      const stored = localStorage.getItem('f0ck_audio_default_custom');
      if (stored) {
        const parsed = JSON.parse(stored);
        if (parsed && typeof parsed === 'object') return parsed;
      }
    } catch (e) {}
    if (window.f0ckServerAudioTuner && typeof window.f0ckServerAudioTuner === 'object') {
      return window.f0ckServerAudioTuner;
    }
    return null;
  };

  const getEffectiveDefaultTuning = () => {
    const custom = getCustomDefaultTuning();
    return Object.assign({}, DEFAULT_AUDIO_TUNING, custom || {});
  };

  window.DEFAULT_AUDIO_TUNING = DEFAULT_AUDIO_TUNING;
  window.getEffectiveDefaultTuning = getEffectiveDefaultTuning;

  let savedTuning = null;
  try {
    const appliedVer = localStorage.getItem('f0ck_audio_tuning_ver');
    if (appliedVer !== TUNING_CONFIG_VERSION) {
      const eff = getEffectiveDefaultTuning();
      localStorage.setItem('f0ck_audio_tuning', JSON.stringify(eff));
      localStorage.setItem('f0ck_audio_tuning_ver', TUNING_CONFIG_VERSION);
      savedTuning = Object.assign({}, eff);
    } else {
      const raw = localStorage.getItem('f0ck_audio_tuning');
      if (raw) savedTuning = JSON.parse(raw);
    }
  } catch (e) {}

  window.audioVisualizerTuning = Object.assign({}, getEffectiveDefaultTuning(), savedTuning || {});
  if (window.audioVisualizerTuning.showCoverArt === undefined) {
    window.audioVisualizerTuning.showCoverArt = (window.audioVisualizerTuning.solidCover !== undefined && Number(window.audioVisualizerTuning.solidCover) === 0) ? 1 : 0;
  }
  if (window.audioVisualizerTuning.showCoverInEye === undefined) {
    window.audioVisualizerTuning.showCoverInEye = Number(window.audioVisualizerTuning.showCoverArt) === 1 ? 1 : 0;
  }
  if (window.audioVisualizerTuning.showCoverInBg === undefined) {
    window.audioVisualizerTuning.showCoverInBg = 0;
  }
  if (window.audioVisualizerTuning.solidCover === undefined) {
    window.audioVisualizerTuning.solidCover = (Number(window.audioVisualizerTuning.showCoverInEye) === 1 || Number(window.audioVisualizerTuning.showCoverInBg) === 1) ? 0 : 1;
  }

  const applyBackgroundOpacitySettings = (cfg, forceMode) => {
    const inOnara = forceMode !== undefined ? (forceMode === 'onara' || forceMode === true) : isCurrentlyInOnara();
    const isAudio = forceMode !== undefined ? (forceMode === 'audio') : (!inOnara && isCurrentItemAudio());
    const c = cfg || getEffectiveBackgroundTuning(forceMode !== undefined ? forceMode : (inOnara ? 'onara' : (isAudio ? 'audio' : 'standard')));
    const onaraOp = c.onaraBgOpacity !== undefined ? Math.min(1, Math.max(0, Number(c.onaraBgOpacity))) : (inOnara ? 0.6 : 0.40);
    const bgOp = c.bgCanvasOpacity !== undefined ? Math.min(1, Math.max(0, Number(c.bgCanvasOpacity))) : (inOnara ? 0.0 : (isAudio ? 0.90 : 0.81));
    const gridThumbOp = c.onaraGridDim !== undefined ? (1 - Math.min(1, Math.max(0, Number(c.onaraGridDim)))) : 1.0;
    const onaraBlur = c.onaraBackdropBlur !== undefined ? Math.max(0, Number(c.onaraBackdropBlur)) : (inOnara ? 5 : 5);
    const bgBlur = c.bgCanvasBlur !== undefined ? Math.max(0, Number(c.bgCanvasBlur)) : (inOnara ? 0 : (isAudio ? 60 : 151));
    const method = c.bgBlurMethod !== undefined ? Number(c.bgBlurMethod) : (inOnara ? 2 : 0);
    const zoom = c.bgCanvasZoom !== undefined ? Math.max(1.0, Number(c.bgCanvasZoom)) : 1.38;
    const bgColor = c.bgCanvasColor || '#000000';
    const bgColOp = c.bgCanvasColorOpacity !== undefined ? Math.min(1, Math.max(0, Number(c.bgCanvasColorOpacity))) : (inOnara ? 0.0 : (isAudio ? 0.15 : 0.09));
    const computedBgCol = bgColOp <= 0.001 ? 'transparent' : (bgColOp >= 0.999 ? bgColor : `color-mix(in srgb, ${bgColor} ${Math.round(bgColOp * 100)}%, transparent)`);

    document.documentElement.style.setProperty('--onara-bg-opacity', onaraOp.toFixed(3));
    document.documentElement.style.setProperty('--bg-canvas-opacity', bgOp.toFixed(3));
    document.documentElement.style.setProperty('--onara-grid-dim-opacity', gridThumbOp.toFixed(3));
    document.documentElement.style.setProperty('--onara-backdrop-blur', `${onaraBlur}px`);
    document.documentElement.style.setProperty('--bg-canvas-blur', `${bgBlur}px`);
    document.documentElement.style.setProperty('--bg-canvas-zoom', zoom.toFixed(3));
    document.documentElement.style.setProperty('--bg-canvas-color', computedBgCol);
    document.documentElement.style.setProperty('--bg-canvas-color-opacity', bgColOp.toFixed(3));

    // Ambient lighting mode: when enabled, soft GPU diffusion blur makes it look identical to YouTube's ambient mode
    const useAmbient = Number(c.bgAmbientLighting) === 1;
    if (useAmbient) {
      const ambientBlur = Math.max(30, Math.min(100, Number(c.bgCanvasBlur) || 48));
      document.documentElement.style.setProperty('--bg-canvas-filter', `blur(${ambientBlur}px)`);
    } else if (method === 1 || method === 2) {
      document.documentElement.style.setProperty('--bg-canvas-filter', `blur(${bgBlur}px)`);
    } else {
      document.documentElement.style.setProperty('--bg-canvas-filter', 'none');
    }

    const bgEl = document.getElementById('bg');
    if (bgEl) {
      bgEl.style.removeProperty('opacity');
    }

    // Don't call redrawBgCanvas for audio items where the visualizer loop owns #bg
    const feedAudioActive = isAudio && Number((c.feedAudioToBg !== undefined ? c.feedAudioToBg : 1)) === 1;
    if (!feedAudioActive && typeof window.redrawBgCanvas === 'function') {
      window.redrawBgCanvas();
    }
  };
  window.applyBackgroundOpacitySettings = applyBackgroundOpacitySettings;
  applyBackgroundOpacitySettings(null);

  // Eye Cursor Follower & 3D Tracking
  const mousePos = { x: null, y: null, active: false };
  let isEyeActive = false;
  let eyeInactivityTimer = null;

  const isCursorNearV0ck = (e) => {
    const margin = 10;
    const players = document.querySelectorAll('.v0ck, .album-audio-wrapper, .embed-responsive:has(.sidebar-media-placeholder.audio), #onara-item-mount .sidebar-media-placeholder.audio');
    for (const p of players) {
      const r = p.getBoundingClientRect();
      if (r.width > 0 && r.height > 0 &&
          e.clientX >= r.left - margin && e.clientX <= r.right + margin &&
          e.clientY >= r.top - margin && e.clientY <= r.bottom + margin) {
        return true;
      }
    }
    return false;
  };

  const handlePointerMove = (e) => {
    mousePos.x = e.clientX;
    mousePos.y = e.clientY;

    const nearPlayer = isCursorNearV0ck(e);
    if (nearPlayer) {
      isEyeActive = true;
      mousePos.active = true;
      clearTimeout(eyeInactivityTimer);
      eyeInactivityTimer = setTimeout(() => {
        isEyeActive = false;
        mousePos.active = false;
      }, 2500);
    } else {
      // More than 10px outside of player: stop following and return to center
      isEyeActive = false;
      mousePos.active = false;
      clearTimeout(eyeInactivityTimer);
    }
  };

  window.addEventListener('pointermove', handlePointerMove, { passive: true });
  window.addEventListener('pointerdown', (e) => {
    if (isCursorNearV0ck(e)) handlePointerMove(e);
  }, { passive: true });

  document.addEventListener('mouseleave', () => {
    isEyeActive = false;
    mousePos.active = false;
    clearTimeout(eyeInactivityTimer);
  });

  window.addEventListener('pointerup', () => {
    if (window.matchMedia && window.matchMedia('(hover: none)').matches) {
      isEyeActive = false;
      mousePos.active = false;
      clearTimeout(eyeInactivityTimer);
    }
  }, { passive: true });

  const updateEyeTracking = () => {
    const cfg = window.audioVisualizerTuning || DEFAULT_AUDIO_TUNING;
    const isEnabled = cfg.followMouse !== undefined ? cfg.followMouse === 1 : true;
    const speed = cfg.followSpeed !== undefined ? cfg.followSpeed : 0.04;
    const allowTilt = cfg.tiltEffect !== undefined ? cfg.tiltEffect === 1 : true;

    const circles = document.querySelectorAll('.sidebar-media-placeholder.audio .audio-cover-circle');
    circles.forEach(circle => {
      const ph = circle.closest('.sidebar-media-placeholder.audio');
      if (!ph) return;
      const rect = ph.getBoundingClientRect();
      if (rect.width === 0 || rect.height === 0) return;

      const v0ckPlayer = ph.closest('.v0ck') || ph;
      const pRect = v0ckPlayer.getBoundingClientRect();
      const margin = 10;

      const isNearThisPlayer = (
        mousePos.x !== null && mousePos.y !== null &&
        mousePos.x >= pRect.left - margin && mousePos.x <= pRect.right + margin &&
        mousePos.y >= pRect.top - margin && mousePos.y <= pRect.bottom + margin
      );

      let isCursorHiddenOnPlayer = false;
      if (v0ckPlayer && !v0ckPlayer.classList.contains('v0ck_hover')) {
        if (mousePos.active && mousePos.x >= pRect.left && mousePos.x <= pRect.right &&
            mousePos.y >= pRect.top && mousePos.y <= pRect.bottom) {
          isCursorHiddenOnPlayer = true;
        }
      }

      let targetX = 0;
      let targetY = 0;
      let tiltX = 0;
      let tiltY = 0;

      if (isEnabled && isEyeActive && mousePos.active && isNearThisPlayer && !isCursorHiddenOnPlayer) {
        const centerX = rect.left + rect.width / 2;
        const centerY = rect.top + rect.height / 2;
        const dx = mousePos.x - centerX;
        const dy = mousePos.y - centerY;

        const maxRadius = cfg.followRadius !== undefined ? cfg.followRadius : 20;
        const dist = Math.hypot(dx, dy);

        if (dist > 0) {
          const clampedDist = Math.min(dist, maxRadius);
          targetX = (dx / dist) * clampedDist;
          targetY = (dy / dist) * clampedDist;
        }

        if (allowTilt) {
          tiltX = -(targetY / (maxRadius || 1)) * 20;
          tiltY = (targetX / (maxRadius || 1)) * 20;
        }
      }

      circle._eyeX = circle._eyeX || 0;
      circle._eyeY = circle._eyeY || 0;
      circle._eyeTiltX = circle._eyeTiltX || 0;
      circle._eyeTiltY = circle._eyeTiltY || 0;

      circle._eyeX += (targetX - circle._eyeX) * speed;
      circle._eyeY += (targetY - circle._eyeY) * speed;
      circle._eyeTiltX += (tiltX - circle._eyeTiltX) * speed;
      circle._eyeTiltY += (tiltY - circle._eyeTiltY) * speed;

      // If audio visualizer is NOT actively driving the transform this frame, update it here
      if (!circle._visualizerDriving) {
        const cfg = window.audioVisualizerTuning || DEFAULT_AUDIO_TUNING;
        const offX = Number(cfg.coverPosX || 0);
        const offY = Number(cfg.coverPosY || 0);
        const curX = ((circle._eyeX || 0) + offX).toFixed(1);
        const curY = ((circle._eyeY || 0) + offY).toFixed(1);
        const curTiltX = (circle._eyeTiltX || 0).toFixed(1);
        const curTiltY = (circle._eyeTiltY || 0).toFixed(1);
        circle.style.transform = `translate(calc(-50% + ${curX}px), calc(-50% + ${curY}px)) perspective(600px) rotateX(${curTiltX}deg) rotateY(${curTiltY}deg) scale(1)`;
      }
    });

    requestAnimationFrame(updateEyeTracking);
  };

  requestAnimationFrame(updateEyeTracking);

  const initAudioTunerUI = () => {
    if (document.getElementById('f0ck-audio-tuner-panel')) return;

    const sidebarContainer = document.getElementById('sidebar-tuner-container');
    const panel = document.createElement('div');
    panel.id = 'f0ck-audio-tuner-panel';
    panel.className = sidebarContainer ? 'f0ck-audio-tuner-panel in-sidebar' : 'f0ck-audio-tuner-panel hidden';

    const audioSliders = [
      // Visualizer Color Section
      { section: 'Visualizer Color & Theme', key: 'useCustomColor', label: 'Use Custom Color (1=Custom, 0=Site Accent)', min: 0, max: 1, step: 1, unit: '' },
      { section: 'Visualizer Color & Theme', key: 'visualizerColor', label: 'Custom Visualizer Color', type: 'color' },
      { section: 'Visualizer Color & Theme', key: 'enableBeatHue', label: 'Beat-Reactive Hue Color (1=On, 0=Off)', min: 0, max: 1, step: 1, unit: '' },
      { section: 'Visualizer Color & Theme', key: 'beatHueThreshold', label: 'Beat Trigger Threshold', min: 0.00, max: 1.00, step: 0.01, unit: '' },
      { section: 'Visualizer Color & Theme', key: 'beatHueStep', label: 'Color Shift Angle per Beat', min: 1, max: 180, step: 1, unit: '°' },
      { section: 'Visualizer Color & Theme', key: 'beatHueSmooth', label: 'Color Morph Smoothness (0=Snap, 1=Glide)', min: 0.00, max: 1.00, step: 0.01, unit: '' },
      { section: 'Visualizer Color & Theme', key: 'beatHueIdleDrift', label: 'Idle Ambient Hue Drift', min: 0.00, max: 2.00, step: 0.01, unit: 'x' },
      { section: 'Visualizer Color & Theme', key: 'beatHueCooldown', label: 'Min Time Between Jumps', min: 50, max: 800, step: 25, unit: 'ms' },

      // Cover Art & Glow Section
      { section: 'Cover Art & Glow Reactivity', key: 'showCoverInEye', label: 'Show Cover in Eye / Disc (1=On, 0=Off)', min: 0, max: 1, step: 1, unit: '' },
      { section: 'Cover Art & Glow Reactivity', key: 'showCoverInBg', label: 'Show Cover in Background (1=On, 0=Off)', min: 0, max: 1, step: 1, unit: '' },
      { section: 'Cover Art & Glow Reactivity', key: 'coverSize', label: 'Eye / Disc Diameter', min: 40, max: 600, step: 5, unit: 'px' },
      { section: 'Cover Art & Glow Reactivity', key: 'coverPosX', label: 'Eye Position Offset X', min: -400, max: 400, step: 5, unit: 'px' },
      { section: 'Cover Art & Glow Reactivity', key: 'coverPosY', label: 'Eye Position Offset Y', min: -300, max: 300, step: 5, unit: 'px' },
      { section: 'Cover Art & Glow Reactivity', key: 'coverImageScale', label: 'Eye Cover Zoom / Scale', min: 50, max: 250, step: 5, unit: '%' },
      { section: 'Cover Art & Glow Reactivity', key: 'coverImagePosX', label: 'Eye Cover Pan X', min: -100, max: 100, step: 2, unit: '%' },
      { section: 'Cover Art & Glow Reactivity', key: 'coverImagePosY', label: 'Eye Cover Pan Y', min: -100, max: 100, step: 2, unit: '%' },
      { section: 'Cover Art & Glow Reactivity', key: 'bgCoverOpacity', label: 'Background Cover Opacity', min: 0.00, max: 1.00, step: 0.02, unit: '' },
      { section: 'Cover Art & Glow Reactivity', key: 'bgCoverBlur', label: 'Background Cover Blur', min: 0, max: 60, step: 1, unit: 'px' },
      { section: 'Cover Art & Glow Reactivity', key: 'bgCoverScale', label: 'Background Cover Scale', min: 20, max: 300, step: 5, unit: '%' },
      { section: 'Cover Art & Glow Reactivity', key: 'bgCoverPosX', label: 'Background Cover Position X', min: 0, max: 100, step: 1, unit: '%' },
      { section: 'Cover Art & Glow Reactivity', key: 'bgCoverPosY', label: 'Background Cover Position Y', min: 0, max: 100, step: 1, unit: '%' },
      { section: 'Cover Art & Glow Reactivity', key: 'coverColor', label: 'Solid Cover Color', type: 'color' },
      { section: 'Cover Art & Glow Reactivity', key: 'coverOpacity', label: 'Cover / Disc Opacity', min: 0.00, max: 1.00, step: 0.01, unit: '' },
      { section: 'Cover Art & Glow Reactivity', key: 'glowIntensity', label: 'Cover Art Glow Size (Dynamic)', min: 0, max: 500, step: 5, unit: 'px' },
      { section: 'Cover Art & Glow Reactivity', key: 'coverGlowBase', label: 'Cover Art Base Glow (Ambient)', min: 0, max: 150, step: 2, unit: 'px' },
      { section: 'Cover Art & Glow Reactivity', key: 'glowBrightness', label: 'Cover Art Glow Brightness', min: 0.0, max: 3.0, step: 0.05, unit: 'x' },
      { section: 'Cover Art & Glow Reactivity', key: 'glowSensitivity', label: 'Glow Beat Reactivity / Sensitivity', min: 0.10, max: 5.00, step: 0.05, unit: 'x' },
      { section: 'Cover Art & Glow Reactivity', key: 'glowDynamism', label: 'Glow Dynamism (Dynamic Punch)', min: 0.00, max: 3.00, step: 0.05, unit: 'x' },
      { section: 'Cover Art & Glow Reactivity', key: 'glowSmoothness', label: 'Glow Smoothness (Liquid Glow)', min: 0.00, max: 1.00, step: 0.01, unit: '' },
      { section: 'Cover Art & Glow Reactivity', key: 'scaleBounce', label: 'Disc Bounce (Scale)', min: 0.00, max: 5.00, step: 0.05, unit: 'x' },
      { section: 'Cover Art & Glow Reactivity', key: 'bounceBoost', label: 'Bounce Reactivity Boost', min: 1.0, max: 100.0, step: 0.5, unit: 'x' },
      { section: 'Cover Art & Glow Reactivity', key: 'bassGain', label: 'Bass Gain (Multiplier)', min: 0.5, max: 6.0, step: 0.1, unit: 'x' },
      { section: 'Cover Art & Glow Reactivity', key: 'bassPower', label: 'Sensitivity Curve (Power)', min: 0.10, max: 2.00, step: 0.01, unit: '' },
      { section: 'Cover Art & Glow Reactivity', key: 'attackSpeed', label: 'Attack Speed (Snap)', min: 0.05, max: 1.00, step: 0.01, unit: '' },
      { section: 'Cover Art & Glow Reactivity', key: 'releaseSpeed', label: 'Release Speed (Decay)', min: 0.01, max: 1.00, step: 0.01, unit: '' },
      { section: 'Cover Art & Glow Reactivity', key: 'glowAttack', label: 'Glow Attack Speed (Swell)', min: 0.01, max: 1.00, step: 0.01, unit: '' },
      { section: 'Cover Art & Glow Reactivity', key: 'glowDecay', label: 'Glow Decay Speed (Dissipate)', min: 0.01, max: 1.00, step: 0.01, unit: '' },

      // Reactive Background Gradient Section
      { section: 'Reactive Background Gradient', key: 'enableBgGradient', label: 'Background Gradient (1=On, 0=Off)', min: 0, max: 1, step: 1, unit: '' },
      { section: 'Reactive Background Gradient', key: 'bgGradientStyle', label: 'Gradient Style (1=Radial Aura, 2=Dual Fog, 3=Conic Vortex, 4=Horizon Flare)', min: 1, max: 4, step: 1, unit: '' },
      { section: 'Reactive Background Gradient', key: 'bgGradientOpacity', label: 'Gradient Base Opacity', min: 0.00, max: 1.00, step: 0.01, unit: '' },
      { section: 'Reactive Background Gradient', key: 'bgGradientReactivity', label: 'Beat Reactivity (Pulse Strength)', min: 0.00, max: 3.00, step: 0.05, unit: 'x' },
      { section: 'Reactive Background Gradient', key: 'bgGradientSpread', label: 'Gradient Radius / Spread', min: 10, max: 200, step: 2, unit: '%' },
      { section: 'Reactive Background Gradient', key: 'useCustomBgColor', label: 'Custom Gradient Color (1=On, 0=Accent)', min: 0, max: 1, step: 1, unit: '' },
      { section: 'Reactive Background Gradient', key: 'bgGradientColor', label: 'Custom Gradient Color', type: 'color' },

      // Inner Eye Visualizer Section
      { section: 'Inner Eye Visualizer (Pupil HUD)', key: 'enableInnerBars', label: 'Inner Visualizer (1=On, 0=Off)', min: 0, max: 1, step: 1, unit: '' },
      { section: 'Inner Eye Visualizer (Pupil HUD)', key: 'innerBarsMode', label: 'Inner Style (1=Center, 2=Outward Iris, 3=Arc, 4=Inverted Iris, 5=Inverted Rev, 6=Dual Stargate, 7=360° Radar)', min: 1, max: 7, step: 1, unit: '' },
      { section: 'Inner Eye Visualizer (Pupil HUD)', key: 'innerRadius', label: 'Inner Visualizer Size (Outer Radius)', min: 30, max: 800, step: 2, unit: 'px' },
      { section: 'Inner Eye Visualizer (Pupil HUD)', key: 'innerPupilRadius', label: 'Center Pupil Gap (Inner Radius)', min: 0, max: 600, step: 2, unit: 'px' },
      { section: 'Inner Eye Visualizer (Pupil HUD)', key: 'useCustomInnerColor', label: 'Solid Custom Inner Color (1=On, 0=Off)', min: 0, max: 1, step: 1, unit: '' },
      { section: 'Inner Eye Visualizer (Pupil HUD)', key: 'innerBarColor', label: 'Solid Inner Bar Color', type: 'color' },
      { section: 'Inner Eye Visualizer (Pupil HUD)', key: 'innerBarCount', label: 'Spectrum Density (Note Count)', min: 2, max: 512, step: 1, unit: '' },
      { section: 'Inner Eye Visualizer (Pupil HUD)', key: 'innerHighBoost', label: 'Melody & Treble Sensitivity', min: 0.000, max: 2.000, step: 0.001, unit: 'x' },
      { section: 'Inner Eye Visualizer (Pupil HUD)', key: 'innerBarHeight', label: 'Inner Bar Height / Scale', min: 0.05, max: 100.00, step: 0.05, unit: 'x' },
      { section: 'Inner Eye Visualizer (Pupil HUD)', key: 'innerBarWidth', label: 'Inner Bar Width', min: 1, max: 250, step: 1, unit: 'px' },
      { section: 'Inner Eye Visualizer (Pupil HUD)', key: 'innerBarOpacity', label: 'Inner Bar Opacity', min: 0.00, max: 1.00, step: 0.01, unit: '' },
      { section: 'Inner Eye Visualizer (Pupil HUD)', key: 'outerRingOpacity', label: 'Outer Ring Opacity', min: 0.00, max: 1.00, step: 0.01, unit: '' },
      { section: 'Inner Eye Visualizer (Pupil HUD)', key: 'eyeDisableGlow', label: 'Disable Accent Glow (1=Off)', min: 0, max: 1, step: 1, unit: '' },
      { section: 'Inner Eye Visualizer (Pupil HUD)', key: 'eyeDisableShadow', label: 'Disable Drop Shadow (1=Off)', min: 0, max: 1, step: 1, unit: '' },
      { section: 'Inner Eye Visualizer (Pupil HUD)', key: 'eyeFOV', label: 'Eye Perspective / FOV (lower=wider 3D tilt)', min: 100, max: 2000, step: 10, unit: 'px' },
      { section: 'Inner Eye Visualizer (Pupil HUD)', key: 'eyeZPos', label: 'Eye Camera Distance — Z (positive=closer)', min: -200, max: 500, step: 5, unit: 'px' },
      { section: 'Inner Eye Visualizer (Pupil HUD)', key: 'innerPupilRingOpacity', label: 'Center Pupil Fill Opacity', min: 0.00, max: 1.00, step: 0.01, unit: '' },
      { section: 'Inner Eye Visualizer (Pupil HUD)', key: 'innerPupilColor', label: 'Center Pupil Fill Color', type: 'color' },
      { section: 'Inner Eye Visualizer (Pupil HUD)', key: 'enableVoidTunnel', label: 'Infinite Void Tunnel (1=On, 0=Off)', min: 0, max: 1, step: 1, unit: '' },
      { section: 'Inner Eye Visualizer (Pupil HUD)', key: 'voidTunnelRings', label: 'Void Tunnel Ring Count', min: 2, max: 30, step: 1, unit: '' },
      { section: 'Inner Eye Visualizer (Pupil HUD)', key: 'voidTunnelSpeed', label: 'Void Tunnel Base Speed', min: 0.0, max: 5.0, step: 0.05, unit: '' },
      { section: 'Inner Eye Visualizer (Pupil HUD)', key: 'voidTunnelReactivity', label: 'Void Tunnel Audio Reactivity', min: 0.0, max: 10.0, step: 0.1, unit: '' },
      { section: 'Inner Eye Visualizer (Pupil HUD)', key: 'voidTunnelFadeWidth', label: 'Void Tunnel Inner Fade Zone', min: 0.0, max: 1.0, step: 0.05, unit: '' },
      { section: 'Inner Eye Visualizer (Pupil HUD)', key: 'voidTunnelUseAccent', label: 'Void Tunnel Use Accent Color (1=Yes, 0=Custom)', min: 0, max: 1, step: 1, unit: '' },
      { section: 'Inner Eye Visualizer (Pupil HUD)', key: 'voidTunnelColor', label: 'Void Tunnel Custom Color', type: 'color' },
      { section: 'Inner Eye Visualizer (Pupil HUD)', key: 'voidTunnelZone', label: 'Void Tunnel Zone (0=Inner Pupil, 1=Outer Iris, 2=Outer Shadow)', min: 0, max: 2, step: 1, unit: '' },
      { section: 'Inner Eye Visualizer (Pupil HUD)', key: 'voidTunnelRingWidth', label: 'Void Tunnel Ring Width', min: 0.1, max: 12.0, step: 0.1, unit: 'px' },
      { section: 'Inner Eye Visualizer (Pupil HUD)', key: 'voidTunnelEdgeFade', label: 'Void Tunnel Edge Fade', min: 0.0, max: 0.9, step: 0.05, unit: '' },
      { section: 'Inner Eye Visualizer (Pupil HUD)', key: 'voidTunnelOpacity', label: 'Void Tunnel Max Opacity', min: 0.0, max: 1.0, step: 0.01, unit: '' },
      { section: 'Inner Eye Visualizer (Pupil HUD)', key: 'voidTunnelDepth', label: 'Void Tunnel Depth (glow + fog + warp)', min: 0.0, max: 1.0, step: 0.05, unit: '' },
      { section: 'Inner Eye Visualizer (Pupil HUD)', key: 'voidTunnelZoomSpeed', label: 'Void Tunnel Zoom Speed (Zone 2)', min: 0.0, max: 5.0, step: 0.05, unit: '' },
      // Square Corridor Tunnel
      { section: 'Square Corridor Tunnel', key: 'enableSquareTunnel', label: 'Enable Square Tunnel (1=On)', min: 0, max: 1, step: 1, unit: '' },
      { section: 'Square Corridor Tunnel', key: 'squareTunnelSpeed', label: 'Fly Speed (rooms/sec)', min: 0.0, max: 12.0, step: 0.1, unit: '' },
      { section: 'Square Corridor Tunnel', key: 'squareTunnelReactivity', label: 'Beat Speed Boost', min: 0.0, max: 20.0, step: 0.5, unit: '' },
      { section: 'Square Corridor Tunnel', key: 'squareTunnelLevels', label: 'Rooms Visible Ahead', min: 2, max: 30, step: 1, unit: '' },
      { section: 'Square Corridor Tunnel', key: 'squareTunnelRoomScale', label: 'Room Width (world units)', min: 0.3, max: 4.0, step: 0.05, unit: '' },
      { section: 'Square Corridor Tunnel', key: 'squareTunnelFOV', label: 'Focal Length (FOV)', min: 0.05, max: 3.0, step: 0.05, unit: '' },
      { section: 'Square Corridor Tunnel', key: 'squareTunnelOpacity', label: 'Opacity', min: 0.0, max: 1.0, step: 0.01, unit: '' },
      { section: 'Square Corridor Tunnel', key: 'squareTunnelGridWidth', label: 'Grid Line Width', min: 0.0, max: 20.0, step: 0.5, unit: 'px' },
      { section: 'Square Corridor Tunnel', key: 'squareTunnelGlow', label: 'Grid Glow', min: 0, max: 120, step: 2, unit: 'px' },
      { section: 'Square Corridor Tunnel', key: 'squareTunnelUseAccent', label: 'Use Accent Color for Grid (1=On)', min: 0, max: 1, step: 1, unit: '' },
      { section: 'Square Corridor Tunnel', key: 'squareTunnelGridColor', label: 'Grid Color (when Accent off)', type: 'color' },
      { section: 'Square Corridor Tunnel', key: 'squareTunnelFog', label: 'Depth Fog', min: 0.0, max: 1.0, step: 0.05, unit: '' },
      { section: 'Square Corridor Tunnel', key: 'squareTunnelWallFillAlpha', label: 'Inner Corridor Darkness', min: 0, max: 1, step: 0.01, unit: '' },
      { section: 'Square Corridor Tunnel', key: 'squareTunnelHideHUD', label: 'Hide Eye / Cover Circle HUD (1=On)', min: 0, max: 1, step: 1, unit: '' },
      { section: 'Square Corridor Tunnel', key: 'squareTunnelWallMode', label: 'Wall Mode (0=Art, 1=Solid, 2=Checker, 3=V-Stripes, 4=Depth-Stripes)', min: 0, max: 4, step: 1, unit: '' },
      { section: 'Square Corridor Tunnel', key: 'squareTunnelWallColor', label: 'Wall Color (Primary)', type: 'color' },
      { section: 'Square Corridor Tunnel', key: 'squareTunnelWallColor2', label: 'Wall Color (Secondary / Pattern)', type: 'color' },
      { section: 'Square Corridor Tunnel', key: 'squareTunnelBackdropColor', label: 'Backdrop / Inner Color', type: 'color' },
      { section: 'Square Corridor Tunnel', key: 'squareTunnelBackdropBrightness', label: 'Backdrop Art Brightness', min: 0.0, max: 1.5, step: 0.05, unit: '' },
      { section: 'Square Corridor Tunnel', key: 'squareTunnelPatternScale', label: 'Pattern Tile Size', min: 8, max: 120, step: 4, unit: 'px' },
      { section: 'Square Corridor Tunnel', key: 'squareTunnelPatTileAlpha', label: 'Pattern Tile Opacity', min: 0, max: 1, step: 0.01, unit: '' },
      { section: 'Square Corridor Tunnel', key: 'squareTunnelReactScale', label: 'Beat Room Scale Boost', min: 0.0, max: 2.0, step: 0.02, unit: '' },
      { section: 'Square Corridor Tunnel', key: 'squareTunnelReactBright', label: 'Beat Brightness Flash', min: 0.0, max: 3.0, step: 0.05, unit: '' },
      { section: 'Square Corridor Tunnel', key: 'squareTunnelMaze', label: 'Enable Spirit Drift (1=On)', min: 0, max: 1, step: 1, unit: '' },
      { section: 'Square Corridor Tunnel', key: 'squareTunnelTurnStrength', label: 'Drift Intensity', min: 0.0, max: 1.2, step: 0.05, unit: '' },
      { section: 'Square Corridor Tunnel', key: 'squareTunnelTurnSpeed', label: 'Drift Tracking Speed', min: 0.01, max: 0.3, step: 0.01, unit: '' },
      { section: 'Square Corridor Tunnel', key: 'squareTunnelDriftFreq', label: 'Drift Wobble Frequency', min: 0.1, max: 5.0, step: 0.1, unit: '' },
      { section: 'Square Corridor Tunnel', key: 'squareTunnelReactDrift', label: 'Beat Drift Kick', min: 0.0, max: 2.0, step: 0.05, unit: '' },
      { section: 'Square Corridor Tunnel', key: 'squareTunnelStraightBias', label: 'Straight-Ahead Probability', min: 0.0, max: 0.9, step: 0.05, unit: '' },
      { section: 'Inner Eye Visualizer (Pupil HUD)', key: 'innerRadialRotation', label: 'Radial Iris Rotation Angle', min: 0, max: 360, step: 5, unit: '°' },
      { section: 'Inner Eye Visualizer (Pupil HUD)', key: 'innerBarGlow', label: 'Inner Bar Glow', min: 0, max: 30, step: 1, unit: 'px' },
      { section: 'Inner Eye Visualizer (Pupil HUD)', key: 'innerHideNote', label: 'Hide Music Note Icon (1=On, 0=Off)', min: 0, max: 1, step: 1, unit: '' },

      // Visualizer Bars Section
      { section: 'Bottom Visualizer Bars', key: 'enableBars', label: 'Show Visualizer Bars (1=On, 0=Off)', min: 0, max: 1, step: 1, unit: '' },
      { section: 'Bottom Visualizer Bars', key: 'barHeight', label: 'Visualizer Bar Height', min: 0.05, max: 2.50, step: 0.05, unit: 'x' },
      { section: 'Bottom Visualizer Bars', key: 'barWidth', label: 'Bar Width', min: 1, max: 35, step: 1, unit: 'px' },
      { section: 'Bottom Visualizer Bars', key: 'barGap', label: 'Bar Spacing (Gap)', min: 0, max: 15, step: 1, unit: 'px' },
      { section: 'Bottom Visualizer Bars', key: 'barRadius', label: 'Bar Top Rounding', min: 0, max: 12, step: 1, unit: 'px' },
      { section: 'Bottom Visualizer Bars', key: 'barOpacity', label: 'Bar Opacity', min: 0.00, max: 1.00, step: 0.01, unit: '' },
      { section: 'Bottom Visualizer Bars', key: 'barGlow', label: 'Bar Glow Aura', min: 0, max: 30, step: 1, unit: 'px' },
      { section: 'Bottom Visualizer Bars', key: 'smoothing', label: 'Visualizer Bar Smoothing', min: 0.00, max: 1.00, step: 0.01, unit: '' },

      // Mouse Follow & Tilt Simulation Section
      { section: 'Eye Simulation & Mouse Follow', key: 'followMouse', label: 'Follow Mouse Cursor (1=On, 0=Off)', min: 0, max: 1, step: 1, unit: '' },
      { section: 'Eye Simulation & Mouse Follow', key: 'followSpeed', label: 'Eye Follow Speed', min: 0.01, max: 0.40, step: 0.01, unit: '' },
      { section: 'Eye Simulation & Mouse Follow', key: 'followRadius', label: 'Eye Follow Range (Radius)', min: 5, max: 100, step: 1, unit: 'px' },
      { section: 'Eye Simulation & Mouse Follow', key: 'tiltEffect', label: '3D Eye Tilt (1=On, 0=Off)', min: 0, max: 1, step: 1, unit: '' }
    ];

    const backgroundSliders = [
      // Video & Ambient Background Canvas Section
      { section: 'Video & Ambient Background Canvas', key: 'bgCanvasOpacity',    label: 'Background Opacity',   min: 0.00, max: 1.00, step: 0.01, unit: '',    basic: true },
      { section: 'Video & Ambient Background Canvas', key: 'bgCanvasBlur',       label: 'Blur Radius',          min: 0,    max: 300,  step: 1,    unit: 'px',  basic: true },
      { section: 'Video & Ambient Background Canvas', key: 'bgCanvasBrightness', label: 'Brightness',           min: 0.10, max: 3.00, step: 0.05, unit: 'x',   basic: true },
      { section: 'Video & Ambient Background Canvas', key: 'bgCanvasFps',        label: 'Background FPS (0=uncapped)', min: 0, max: 60, step: 1, unit: 'fps', basic: true },
      { section: 'Video & Ambient Background Canvas', key: 'feedAudioToBg',      label: 'Show Visualizer in Background (1=On)', min: 0, max: 1, step: 1, unit: '', basic: true },
      { section: 'Video & Ambient Background Canvas', key: 'bgCanvasColor', label: 'Background Color', type: 'color' },
      { section: 'Video & Ambient Background Canvas', key: 'bgCanvasColorOpacity', label: 'Background Color Opacity', min: 0.00, max: 1.00, step: 0.01, unit: '' },
      { section: 'Video & Ambient Background Canvas', key: 'bgAmbientLighting', label: 'Ambient Lighting (1=YouTube Glow, 0=Filter)', min: 0, max: 1, step: 1, unit: '' },
      { section: 'Video & Ambient Background Canvas', key: 'bgAmbientIntensity', label: 'Ambient Glow Brightness', min: 0.10, max: 2.50, step: 0.05, unit: 'x' },
      { section: 'Video & Ambient Background Canvas', key: 'bgAmbientSpread', label: 'Ambient Glow Spread / Size', min: 0.30, max: 2.00, step: 0.05, unit: 'x' },
      { section: 'Video & Ambient Background Canvas', key: 'bgAmbientSaturation', label: 'Ambient Glow Saturation', min: 0.50, max: 3.50, step: 0.05, unit: 'x' },
      { section: 'Video & Ambient Background Canvas', key: 'bgAmbientSmoothness', label: 'Ambient Video Transition Speed', min: 0.01, max: 0.25, step: 0.01, unit: '' },
      { section: 'Video & Ambient Background Canvas', key: 'bgBlurMethod', label: 'Blur Engine (0=Canvas 2D, 1=GPU CSS, 2=Hybrid)', min: 0, max: 2, step: 1, unit: '' },
      { section: 'Video & Ambient Background Canvas', key: 'bgCanvasSaturate', label: 'Color Saturation', min: 0.50, max: 4.00, step: 0.05, unit: 'x' },
      { section: 'Video & Ambient Background Canvas', key: 'bgCanvasContrast', label: 'Contrast Depth', min: 0.50, max: 3.00, step: 0.05, unit: 'x' },
      { section: 'Video & Ambient Background Canvas', key: 'bgCanvasZoom', label: 'Edge Overscan Zoom', min: 1.00, max: 1.80, step: 0.01, unit: 'x' },
      { section: 'Video & Ambient Background Canvas', key: 'bgCanvasScale', label: 'Visualizer Bar Scale', min: 0.20, max: 4.00, step: 0.05, unit: 'x' },
      { section: 'Video & Ambient Background Canvas', key: 'feedAudioToBg', label: 'Feed Visualizer to Background Canvas (1=On, 0=Off)', min: 0, max: 1, step: 1, unit: '' },
      { section: 'Video & Ambient Background Canvas', key: 'bgAudioReactivity', label: 'Audio Beat Reactivity (Pulse Strength)', min: 0.00, max: 4.00, step: 0.05, unit: 'x' },

      // Onara Mode Background Section
      { section: 'Onara Mode Background', key: 'onaraBgOpacity', label: 'Onara Modal Backdrop Darkness', min: 0.00, max: 1.00, step: 0.01, unit: '' },
      { section: 'Onara Mode Background', key: 'onaraBackdropBlur', label: 'Onara Modal Backdrop Blur', min: 0, max: 50, step: 1, unit: 'px' },
      { section: 'Onara Mode Background', key: 'onaraGridDim', label: 'Onara Background Grid Dimming (0=None, 1=Hidden)', min: 0.00, max: 1.00, step: 0.01, unit: '' }
    ];

    const danmakuSliders = [
      // Typography & Appearance
      { section: 'Typography & Appearance', key: 'fontSize', label: 'Font Size', min: 14, max: 72, step: 1, unit: 'px' },
      { section: 'Typography & Appearance', key: 'opacity', label: 'Danmaku Opacity', min: 0.10, max: 1.00, step: 0.05, unit: '' },
      { section: 'Typography & Appearance', key: 'fontWeight', label: 'Font Weight', min: 400, max: 900, step: 100, unit: '' },
      { section: 'Typography & Appearance', key: 'outlineStyle', label: 'Outline / Glow Style (0=None, 1=Subtle, 2=Outline, 3=Neon)', min: 0, max: 3, step: 1, unit: '' },
      { section: 'Typography & Appearance', key: 'pillBackground', label: 'Pill Background (0=None, 1=Dark Glass, 2=Capsule)', min: 0, max: 2, step: 1, unit: '' },
      { section: 'Typography & Appearance', key: 'useCustomColor', label: 'Custom Text Color (1=On, 0=White)', min: 0, max: 1, step: 1, unit: '' },
      { section: 'Typography & Appearance', key: 'customColor', label: 'Custom Text Color', type: 'color' },

      // Flight Dynamics & Lanes
      { section: 'Flight Dynamics & Lanes', key: 'speedMultiplier', label: 'Flight Speed Multiplier', min: 0.25, max: 3.00, step: 0.05, unit: 'x' },
      { section: 'Flight Dynamics & Lanes', key: 'laneCount', label: 'Vertical Lane Slots', min: 3, max: 25, step: 1, unit: '' },
      { section: 'Flight Dynamics & Lanes', key: 'laneCoverage', label: 'Screen Coverage Height', min: 20, max: 100, step: 5, unit: '%' },
      { section: 'Flight Dynamics & Lanes', key: 'densityLimit', label: 'Max On-Screen Comments', min: 5, max: 80, step: 5, unit: '' },

      // Content & Media Controls
      { section: 'Content & Media Controls', key: 'allowMediaEmbeds', label: 'Allow Inline Media Attachments (1=On, 0=Off)', min: 0, max: 1, step: 1, unit: '' },
      { section: 'Content & Media Controls', key: 'mediaMaxHeight', label: 'Inline Media Max Height', min: 30, max: 160, step: 5, unit: 'px' },
      { section: 'Content & Media Controls', key: 'showGreentext', label: 'Greentext Quotes (1=On, 0=Off)', min: 0, max: 1, step: 1, unit: '' },
      { section: 'Content & Media Controls', key: 'flashInterval', label: 'Flash/Ruffle Spawn Interval', min: 0.5, max: 8.0, step: 0.5, unit: 's' }
    ];

    const updateCoverArtSolidMode = () => {
      const cfg = window.audioVisualizerTuning || DEFAULT_AUDIO_TUNING;
      const showEye = cfg.showCoverInEye !== undefined 
        ? Number(cfg.showCoverInEye) === 1 
        : (cfg.showCoverArt !== undefined ? Number(cfg.showCoverArt) === 1 : Number(cfg.solidCover) === 0);
      const showBg = Number(cfg.showCoverInBg) === 1;

      const color = cfg.coverColor || '#000000';
      const coverOp = cfg.coverOpacity !== undefined ? Math.min(1, Math.max(0, Number(cfg.coverOpacity))) : 1.0;
      const bgCol = coverOp <= 0.001 ? 'transparent' : (coverOp >= 0.999 ? color : `color-mix(in srgb, ${color} ${Math.round(coverOp * 100)}%, transparent)`);

      const imgScale = cfg.coverImageScale !== undefined ? Number(cfg.coverImageScale) : 100;
      const imgPanX = cfg.coverImagePosX !== undefined ? Number(cfg.coverImagePosX) : 0;
      const imgPanY = cfg.coverImagePosY !== undefined ? Number(cfg.coverImagePosY) : 0;

      const bgOpacity = cfg.bgCoverOpacity !== undefined ? Math.min(1, Math.max(0, Number(cfg.bgCoverOpacity))) : 0.45;
      const bgBlur = cfg.bgCoverBlur !== undefined ? Math.max(0, Number(cfg.bgCoverBlur)) : 0;
      const bgScale = cfg.bgCoverScale !== undefined ? Number(cfg.bgCoverScale) : 100;
      const bgPosX = cfg.bgCoverPosX !== undefined ? Number(cfg.bgCoverPosX) : 50;
      const bgPosY = cfg.bgCoverPosY !== undefined ? Number(cfg.bgCoverPosY) : 50;

      // Clean up any stray backdrops or reactive backgrounds on thumbnail/preview placeholders
      document.querySelectorAll('.thumb .audio-cover-backdrop, .album-thumb-item .audio-cover-backdrop, .item-preview .audio-cover-backdrop, .sidebar-activity-item .audio-cover-backdrop, .recent-comment-media .audio-cover-backdrop, .posts .audio-cover-backdrop, .thumb .audio-reactive-bg, .album-thumb-item .audio-reactive-bg, .item-preview .audio-reactive-bg, .sidebar-activity-item .audio-reactive-bg, .recent-comment-media .audio-reactive-bg, .posts .audio-reactive-bg').forEach(el => el.remove());

      // Only operate on active audio player placeholders, strictly ignoring thumbnails and preview grids
      const playerPlaceholders = Array.from(document.querySelectorAll('.sidebar-media-placeholder.audio')).filter(ph => {
        return !ph.closest('.thumb, .album-thumb-item, .item-preview, .sidebar-activity-item, .recent-comment-media, .recent-comment-item, .posts, .user-posts-container, .media-container-cards');
      });

      playerPlaceholders.forEach(ph => {
        let backdrop = ph.querySelector('.audio-cover-backdrop');
        const c = ph.querySelector('.audio-cover-circle');
        const note = c ? c.querySelector('i') : ph.querySelector(':scope > i');
        const audioEl = ph.closest('.v0ck, .album-audio-wrapper, .album-gallery-container, .embed-responsive, #onara-item-mount, .item-view')?.querySelector('audio')
          || document.querySelector('#onara-item-mount audio, .item-view audio, audio#my-video');

        const rawUrl = getAudioCoverUrl(c, audioEl);
        const targetCoverCss = rawUrl ? `url("${rawUrl}")` : null;

        if (c && targetCoverCss && !c._origBgImage) {
          c._origBgImage = targetCoverCss;
        }

        // Background Cover Art
        if (showBg && targetCoverCss) {
          if (!backdrop) {
            backdrop = document.createElement('div');
            backdrop.className = 'audio-cover-backdrop';
            ph.insertBefore(backdrop, ph.firstChild);
          }
          backdrop.style.backgroundImage = targetCoverCss;
          backdrop.style.opacity = String(bgOpacity);
          backdrop.style.filter = bgBlur > 0 ? `blur(${bgBlur}px)` : 'none';
          backdrop.style.backgroundSize = bgScale === 100 ? 'cover' : `${bgScale}%`;
          backdrop.style.backgroundPosition = `${bgPosX}% ${bgPosY}%`;
          backdrop.style.display = 'block';
        } else if (backdrop) {
          backdrop.style.backgroundImage = 'none';
          backdrop.style.opacity = '0';
          backdrop.style.display = 'none';
        }

        // Clean up any lingering trail ghosts
        ph.querySelectorAll('.eye-trail-ghost').forEach(g => g.remove());

        // Eye / Disc Cover Art
        if (c) {
          if (cfg.coverSize) {
            c.style.width = cfg.coverSize + 'px';
            c.style.height = cfg.coverSize + 'px';
            if (note) note.style.fontSize = Math.round(cfg.coverSize * 0.35) + 'px';
          }

          if (showEye && targetCoverCss) {
            c.style.backgroundImage = targetCoverCss;
            c.style.backgroundColor = bgCol;
            c.style.backgroundSize = imgScale === 100 ? 'cover' : `${imgScale}%`;
            c.style.backgroundPosition = `calc(50% + ${imgPanX}%) calc(50% + ${imgPanY}%)`;
            ph.classList.add('has-cover');
            if (note) note.style.display = 'none';
          } else {
            if (c.style.backgroundImage && c.style.backgroundImage !== 'none' && !c._origBgImage) {
              c._origBgImage = c.style.backgroundImage;
            }
            c.style.backgroundImage = 'none';
            c.style.backgroundColor = bgCol;
            c.style.backgroundSize = 'cover';
            c.style.backgroundPosition = 'center';
            if (!showBg) {
              ph.classList.remove('has-cover');
            } else {
              ph.classList.add('has-cover');
            }
            if (note) {
              note.style.display = Number(cfg.innerHideNote) === 1 ? 'none' : '';
            }
          }
        }
      });
    };
    window.updateCoverArtSolidMode = updateCoverArtSolidMode;

    let audioRowsHtml = '';
    let currentAudioSection = '';
    audioSliders.forEach(s => {
      if (s.section && s.section !== currentAudioSection) {
        currentAudioSection = s.section;
        audioRowsHtml += `<div class="f0ck-tuner-section-title">${currentAudioSection}</div>`;
      }
      const val = window.audioVisualizerTuning[s.key] !== undefined ? window.audioVisualizerTuning[s.key] : DEFAULT_AUDIO_TUNING[s.key];
      if (s.type === 'color') {
        audioRowsHtml += `
          <div class="f0ck-tuner-row" data-key="${s.key}">
            <div class="f0ck-tuner-row-label">
              <span>${s.label}</span>
              <span id="val-${s.key}">${val}</span>
            </div>
            <input type="color" id="input-${s.key}" value="${val}" style="width: 100%; height: 32px; padding: 2px 4px; border: 1px solid rgba(255,255,255,0.2); border-radius: 6px; background: rgba(0,0,0,0.3); cursor: pointer;" />
          </div>
        `;
      } else {
        audioRowsHtml += `
          <div class="f0ck-tuner-row" data-key="${s.key}">
            <div class="f0ck-tuner-row-label">
              <span>${s.label}</span>
              <span id="val-${s.key}">${val}${s.unit || ''}</span>
            </div>
            <input type="range" id="input-${s.key}" min="${s.min}" max="${s.max}" step="${s.step}" value="${val}" />
          </div>
        `;
      }
    });

    let bgRowsHtml = '';
    let bgRowsAdvancedHtml = '';
    let currentBgSection = '';
    backgroundSliders.forEach(s => {
      const val = window.audioVisualizerTuning[s.key] !== undefined ? window.audioVisualizerTuning[s.key] : DEFAULT_AUDIO_TUNING[s.key];
      // Basic rows use prefix 'bgb-', advanced rows use 'bga-' to avoid duplicate IDs
      const mkRow = (pfx) => {
        if (s.type === 'color') {
          return `
            <div class="f0ck-tuner-row" data-key="${s.key}">
              <div class="f0ck-tuner-row-label">
                <span>${s.label}</span>
                <span id="val-${pfx}${s.key}">${val}</span>
              </div>
              <input type="color" id="input-${pfx}${s.key}" value="${val}" style="width: 100%; height: 32px; padding: 2px 4px; border: 1px solid rgba(255,255,255,0.2); border-radius: 6px; background: rgba(0,0,0,0.3); cursor: pointer;" />
            </div>`;
        }
        return `
          <div class="f0ck-tuner-row" data-key="${s.key}">
            <div class="f0ck-tuner-row-label">
              <span>${s.label}</span>
              <span id="val-${pfx}${s.key}">${val}${s.unit || ''}</span>
            </div>
            <input type="range" id="input-${pfx}${s.key}" min="${s.min}" max="${s.max}" step="${s.step}" value="${val}" />
          </div>`;
      };
      if (s.section && s.section !== currentBgSection) currentBgSection = s.section;
      if (s.basic) bgRowsHtml += mkRow('bgb-');
      else bgRowsAdvancedHtml += mkRow('bga-');
    });

    const danmakuCfg = window.danmakuTuning || (window.DEFAULT_DANMAKU_TUNING || {});
    let danmakuRowsHtml = '';
    let currentDanmakuSection = '';
    danmakuSliders.forEach(s => {
      if (s.section && s.section !== currentDanmakuSection) {
        currentDanmakuSection = s.section;
        danmakuRowsHtml += `<div class="f0ck-tuner-section-title">${currentDanmakuSection}</div>`;
      }
      const val = danmakuCfg[s.key] !== undefined ? danmakuCfg[s.key] : (window.DEFAULT_DANMAKU_TUNING ? window.DEFAULT_DANMAKU_TUNING[s.key] : 0);
      if (s.type === 'color') {
        danmakuRowsHtml += `
          <div class="f0ck-tuner-row" data-key="${s.key}">
            <div class="f0ck-tuner-row-label">
              <span>${s.label}</span>
              <span id="val-danmaku-${s.key}">${val}</span>
            </div>
            <input type="color" id="input-danmaku-${s.key}" value="${val}" style="width: 100%; height: 32px; padding: 2px 4px; border: 1px solid rgba(255,255,255,0.2); border-radius: 6px; background: rgba(0,0,0,0.3); cursor: pointer;" />
          </div>
        `;
      } else {
        danmakuRowsHtml += `
          <div class="f0ck-tuner-row" data-key="${s.key}">
            <div class="f0ck-tuner-row-label">
              <span>${s.label}</span>
              <span id="val-danmaku-${s.key}">${val}${s.unit || ''}</span>
            </div>
            <input type="range" id="input-danmaku-${s.key}" min="${s.min}" max="${s.max}" step="${s.step}" value="${val}" />
          </div>
        `;
      }
    });

    panel.innerHTML = `
      <div class="f0ck-tuner-header">
        <div class="f0ck-tuner-subtabs-nav">
          <button type="button" class="f0ck-tuner-subtab-btn active" data-subtab="audio" title="Audio Reactivity Visualizer Tuner">
            <i class="fa-solid fa-sliders"></i> Audio Tuner
          </button>
          <button type="button" class="f0ck-tuner-subtab-btn" data-subtab="danmaku" title="Danmaku Flying Comments Tuner & Debug">
            <i class="fa-solid fa-bolt"></i> Danmaku Tuner
          </button>
          <button type="button" class="f0ck-tuner-subtab-btn" data-subtab="background" title="Onara & Video Background Settings">
            <i class="fa-solid fa-film"></i> Background
          </button>
        </div>
        <button type="button" class="f0ck-tuner-close" id="f0ck-tuner-close" title="Close">✕</button>
      </div>

      <!-- Pane 1: Audio Reactivity Visualizer Tuner -->
      <div id="f0ck-tuner-pane-audio" class="f0ck-tuner-subtab-pane active">
        <div class="f0ck-tuner-body">
          <div class="f0ck-tuner-presets-bar">
            <div class="f0ck-tuner-presets-select-wrap">
              <select id="f0ck-tuner-preset-select" class="f0ck-tuner-preset-select" title="Choose a visualizer preset"></select>
              <button type="button" id="f0ck-tuner-preset-delete" class="f0ck-tuner-btn-icon" title="Delete selected user preset" disabled><i class="fa-solid fa-trash-can"></i></button>
            </div>
            <div class="f0ck-tuner-presets-actions">
              <input type="text" id="f0ck-tuner-preset-name" class="f0ck-tuner-preset-input" placeholder="New preset name..." maxlength="30" />
              <button type="button" id="f0ck-tuner-preset-save" class="f0ck-tuner-btn-save-preset" title="Save current settings as preset"><i class="fa-solid fa-floppy-disk"></i> Save</button>
              <button type="button" id="f0ck-tuner-preset-save-default" class="f0ck-tuner-btn-save-default" title="Save current settings as your Default Preset"><i class="fa-solid fa-star"></i> Set as Default</button>
              <button type="button" id="f0ck-tuner-preset-import" class="f0ck-tuner-btn-import-preset" title="Paste & load JSON configuration"><i class="fa-solid fa-file-import"></i> Import</button>
            </div>
          </div>
          ${audioRowsHtml}
        </div>
        <div class="f0ck-tuner-footer">
          <button type="button" id="f0ck-tuner-copy" class="f0ck-tuner-btn-copy" title="Copy configuration as JSON"><i class="fa-solid fa-copy"></i> Copy JSON</button>
          <button type="button" id="f0ck-tuner-copy-code" class="f0ck-tuner-btn-copy" title="Copy DEFAULT_AUDIO_TUNING JavaScript code"><i class="fa-solid fa-code"></i> Copy Code</button>
          <button type="button" id="f0ck-tuner-reset" class="f0ck-tuner-btn-reset" title="Reset to current default preset"><i class="fa-solid fa-rotate-left"></i> Reset</button>
          <button type="button" id="f0ck-tuner-factory-reset" class="f0ck-tuner-btn-factory-reset" title="Restore original built-in factory defaults" style="display: none;"><i class="fa-solid fa-industry"></i> Factory Default</button>
        </div>
      </div>

      <!-- Pane 2: Danmaku Tuner & Debug Settings -->
      <div id="f0ck-tuner-pane-danmaku" class="f0ck-tuner-subtab-pane" style="display: none;">
        <div class="f0ck-tuner-body">
          <div class="f0ck-tuner-presets-bar">
            <div class="f0ck-tuner-presets-select-wrap">
              <select id="danmaku-preset-select" class="f0ck-tuner-preset-select" title="Choose a danmaku preset"></select>
              <button type="button" id="danmaku-preset-delete" class="f0ck-tuner-btn-icon" title="Delete selected user preset" disabled><i class="fa-solid fa-trash-can"></i></button>
            </div>
            <div class="f0ck-tuner-presets-actions">
              <input type="text" id="danmaku-preset-name" class="f0ck-tuner-preset-input" placeholder="New preset name..." maxlength="30" />
              <button type="button" id="danmaku-preset-save" class="f0ck-tuner-btn-save-preset" title="Save current danmaku settings as preset"><i class="fa-solid fa-floppy-disk"></i> Save</button>
              <button type="button" id="danmaku-preset-import" class="f0ck-tuner-btn-import-preset" title="Paste & load JSON configuration"><i class="fa-solid fa-file-import"></i> Import</button>
            </div>
          </div>

          <!-- Interactive Comment Spawner & Debug Tools -->
          <div class="f0ck-tuner-section-title"><i class="fa-solid fa-vial"></i> Live Comment Spawner & Debug</div>
          <div class="f0ck-danmaku-debug-card">
            <div class="f0ck-danmaku-spawner-row">
              <input type="text" id="danmaku-debug-text" class="f0ck-tuner-preset-input" placeholder="Comment text (:emoji:, >quote, [spoiler]...)" value="Hello Danmaku! :dance_fart:" />
            </div>
            <div class="f0ck-danmaku-spawner-meta">
              <input type="text" id="danmaku-debug-user" class="f0ck-tuner-preset-input" style="flex: 2;" placeholder="Username" value="Tester" />
              <input type="color" id="danmaku-debug-color" value="#00ffcc" title="Username color" style="width: 45px; height: 28px; border: 1px solid rgba(255,255,255,0.2); border-radius: 6px; background: rgba(0,0,0,0.3); cursor: pointer;" />
              <button type="button" id="danmaku-btn-fire" class="f0ck-danmaku-debug-btn btn-primary" style="flex: 2;" title="Fire custom comment immediately"><i class="fa-solid fa-paper-plane"></i> Fire</button>
            </div>
            <div class="f0ck-danmaku-debug-grid">
              <button type="button" id="danmaku-btn-loop" class="f0ck-danmaku-debug-btn" title="Toggle continuous looping of comments"><i class="fa-solid fa-repeat"></i> Loop: <span id="danmaku-loop-status">OFF</span></button>
              <button type="button" id="danmaku-btn-burst" class="f0ck-danmaku-debug-btn" title="Fire 10 rapid comments"><i class="fa-solid fa-burst"></i> Burst (10x)</button>
            </div>
            <div class="f0ck-danmaku-debug-grid">
              <button type="button" id="danmaku-btn-flood" class="f0ck-danmaku-debug-btn btn-warning" title="Stress test with 30 comments"><i class="fa-solid fa-cloud-bolt"></i> Flood (30x)</button>
              <button type="button" id="danmaku-btn-greentext" class="f0ck-danmaku-debug-btn" title="Fire sample greentext quote"><i class="fa-solid fa-quote-left"></i> Greentext</button>
            </div>
            <div class="f0ck-danmaku-debug-grid">
              <button type="button" id="danmaku-btn-spoilers" class="f0ck-danmaku-debug-btn" title="Fire spoiler & blur comments"><i class="fa-solid fa-eye-slash"></i> Spoiler/Blur</button>
              <button type="button" id="danmaku-btn-reset-timeline" class="f0ck-danmaku-debug-btn" title="Reset timeline fired status"><i class="fa-solid fa-rotate-left"></i> Reset Timeline</button>
            </div>
            <div class="f0ck-danmaku-debug-grid" style="margin-bottom: 0;">
              <button type="button" id="danmaku-btn-clear" class="f0ck-danmaku-debug-btn btn-danger" style="grid-column: span 2;" title="Clear all active flying pills"><i class="fa-solid fa-broom"></i> Clear Active Pills</button>
            </div>
          </div>

          <!-- Visual Overlays & Diagnostics Section -->
          <div class="f0ck-tuner-section-title"><i class="fa-solid fa-layer-group"></i> Visual Overlays & Diagnostics</div>
          <div class="f0ck-tuner-row">
            <div class="f0ck-tuner-row-label">
              <span>Show Lane Grid Guides</span>
              <span id="val-danmaku-showLaneGuides">${danmakuCfg.showLaneGuides ? '1' : '0'}</span>
            </div>
            <input type="range" id="input-danmaku-showLaneGuides" min="0" max="1" step="1" value="${danmakuCfg.showLaneGuides ? '1' : '0'}" />
          </div>
          <div class="f0ck-tuner-row">
            <div class="f0ck-tuner-row-label">
              <span>Show Live Diagnostic HUD</span>
              <span id="val-danmaku-showDebugHUD">${danmakuCfg.showDebugHUD ? '1' : '0'}</span>
            </div>
            <input type="range" id="input-danmaku-showDebugHUD" min="0" max="1" step="1" value="${danmakuCfg.showDebugHUD ? '1' : '0'}" />
          </div>

          ${danmakuRowsHtml}
        </div>
        <div class="f0ck-tuner-footer">
          <button type="button" id="danmaku-tuner-copy" class="f0ck-tuner-btn-copy"><i class="fa-solid fa-copy"></i> Copy Settings</button>
          <button type="button" id="danmaku-tuner-reset" class="f0ck-tuner-btn-reset"><i class="fa-solid fa-rotate-left"></i> Reset</button>
        </div>
      </div>

      <!-- Pane 3: Onara & Video Background Settings -->
      <div id="f0ck-tuner-pane-background" class="f0ck-tuner-subtab-pane" style="display: none;">
        <div class="f0ck-tuner-body">
          <div class="f0ck-tuner-presets-bar">
            <div style="font-size: 11px; opacity: 0.85; font-weight: 700; display: flex; align-items: center; gap: 6px;">
              <i class="fa-solid fa-film"></i> Background Settings
            </div>
            <div class="f0ck-tuner-presets-actions">
              <button type="button" id="bg-tuner-copy" class="f0ck-tuner-btn-save-preset" title="Copy background settings as JSON"><i class="fa-solid fa-copy"></i> Copy Settings</button>
              <button type="button" id="bg-tuner-reset" class="f0ck-tuner-btn-factory-reset" title="Reset background settings to defaults"><i class="fa-solid fa-rotate-left"></i> Reset</button>
            </div>
          </div>
          <div class="f0ck-tuner-mode-bar" style="display: flex; gap: 6px; padding: 6px 12px; background: rgba(255,255,255,0.04); border-bottom: 1px solid rgba(255,255,255,0.08);">
            <button type="button" id="bg-mode-btn-standard" class="f0ck-tuner-mode-btn active" style="flex: 1; padding: 6px 10px; font-size: 11px; text-align: center;">Standard View</button>
            <button type="button" id="bg-mode-btn-onara" class="f0ck-tuner-mode-btn" style="flex: 1; padding: 6px 10px; font-size: 11px; text-align: center;"><i class="fa-solid fa-expand"></i> Onara Mode Only</button>
            <button type="button" id="bg-mode-btn-audio" class="f0ck-tuner-mode-btn" style="flex: 1; padding: 6px 10px; font-size: 11px; text-align: center;"><i class="fa-solid fa-music"></i> Audio</button>
          </div>
          <!-- Simple / Advanced toggle -->
          <div style="display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 6px 12px; border-bottom: 1px solid rgba(255,255,255,0.06);">
            <span style="font-size: 11px; opacity: 0.6;">Ansicht:</span>
            <button type="button" id="bg-view-basic" class="f0ck-tuner-mode-btn active" style="padding: 4px 12px; font-size: 11px;"><i class="fa-solid fa-sliders"></i> Einfach</button>
            <button type="button" id="bg-view-advanced" class="f0ck-tuner-mode-btn" style="padding: 4px 12px; font-size: 11px;"><i class="fa-solid fa-gear"></i> Erweitert</button>
          </div>
          <div id="f0ck-bg-basic-rows">${bgRowsHtml}</div>
          <div id="f0ck-bg-advanced-rows" style="display:none;">${bgRowsAdvancedHtml}</div>
        </div>
      </div>
    `;

    // ── Sub-Tab Switching Logic ─────────────────────────────────────────────
    const subtabButtons = panel.querySelectorAll('.f0ck-tuner-subtabs-nav .f0ck-tuner-subtab-btn');
    const switchSubtab = (targetTab) => {
      if (!targetTab) return;
      subtabButtons.forEach(btn => {
        btn.classList.toggle('active', btn.dataset.subtab === targetTab);
      });
      panel.querySelectorAll('.f0ck-tuner-subtab-pane').forEach(p => {
        const isActive = p.id === `f0ck-tuner-pane-${targetTab}`;
        p.classList.toggle('active', isActive);
        p.style.display = isActive ? 'block' : 'none';
      });
      try {
        localStorage.setItem('f0ck_tuner_active_subtab', targetTab);
      } catch (e) {}
    };

    subtabButtons.forEach(btn => {
      btn.addEventListener('click', () => {
        if (btn.dataset.subtab) switchSubtab(btn.dataset.subtab);
      });
    });

    const savedSubtab = localStorage.getItem('f0ck_tuner_active_subtab');
    if (savedSubtab && (savedSubtab === 'audio' || savedSubtab === 'danmaku' || savedSubtab === 'background')) {
      switchSubtab(savedSubtab);
    }

    // ── Einfach / Erweitert Toggle (Background Tab) ────────────────────────
    const bgBasicRows    = panel.querySelector('#f0ck-bg-basic-rows');
    const bgAdvancedRows = panel.querySelector('#f0ck-bg-advanced-rows');
    const bgViewBasicBtn = panel.querySelector('#bg-view-basic');
    const bgViewAdvBtn   = panel.querySelector('#bg-view-advanced');
    const switchBgView = (mode) => {
      const isAdv = mode === 'advanced';
      if (bgBasicRows)    bgBasicRows.style.display    = isAdv ? 'none'  : '';
      if (bgAdvancedRows) bgAdvancedRows.style.display  = isAdv ? ''     : 'none';
      if (bgViewBasicBtn) bgViewBasicBtn.classList.toggle('active', !isAdv);
      if (bgViewAdvBtn)   bgViewAdvBtn.classList.toggle('active',    isAdv);
      try { localStorage.setItem('f0ck_bg_view_mode', mode); } catch (e) {}
    };
    bgViewBasicBtn && bgViewBasicBtn.addEventListener('click', () => switchBgView('basic'));
    bgViewAdvBtn   && bgViewAdvBtn.addEventListener('click',   () => switchBgView('advanced'));
    // Restore last chosen view
    const savedBgView = localStorage.getItem('f0ck_bg_view_mode');
    if (savedBgView === 'advanced') switchBgView('advanced');

    // ── Audio Presets & Events ──────────────────────────────────────────────
    const BUILTIN_PRESETS = {
      'Default': getEffectiveDefaultTuning(),
      'Onara': Object.assign({}, DEFAULT_AUDIO_TUNING, DEFAULT_ONARA_TUNING),
      'Reactor': {
        useCustomColor: 0,
        visualizerColor: "#241f31",
        enableBeatHue: 1,
        beatHueThreshold: 1,
        beatHueStep: 1,
        beatHueSmooth: 1,
        beatHueIdleDrift: 0.21,
        beatHueCooldown: 800,
        coverSize: 180,
        glowIntensity: 500,
        coverGlowBase: 150,
        glowBrightness: 1.05,
        glowSensitivity: 1.8,
        glowDynamism: 0.85,
        glowSmoothness: 0.95,
        showCoverArt: 0,
        solidCover: 1,
        coverColor: "#000000",
        coverOpacity: 1,
        bassGain: 0.5,
        bassPower: 2,
        scaleBounce: 0.85,
        bounceBoost: 3.5,
        attackSpeed: 1,
        releaseSpeed: 1,
        enableBars: 0,
        enableInnerBars: 1,
        useCustomInnerColor: 0,
        innerBarColor: "#ff0000",
        innerBarsMode: 4,
        innerRadius: 156,
        innerPupilRadius: 0,
        innerPupilRingOpacity: 0,
        innerBarCount: 512,
        innerBarWidth: 15,
        innerBarHeight: 5.4,
        innerBarOpacity: 0.02,
        outerRingOpacity: 0,
        innerHighBoost: 0.066,
        innerRadialRotation: 270,
        innerBarGlow: 0,
        innerHideNote: 1,
        barHeight: 0.9,
        barWidth: 34,
        barGap: 9,
        barRadius: 12,
        barOpacity: 0.1,
        barGlow: 0,
        smoothing: 0.86,
        followMouse: 1,
        followSpeed: 0.1,
        followRadius: 15,
        tiltEffect: 1,
        glowAttack: 1,
        glowDecay: 0.73,
        enableBlink: 0,
        blinkInterval: 12,
        beatHueSpeed: 0.1
      },
      'Butterfly': {
        useCustomColor: 0,
        visualizerColor: "#241f31",
        enableBeatHue: 1,
        beatHueThreshold: 1,
        beatHueStep: 1,
        beatHueSmooth: 1,
        beatHueIdleDrift: 0.21,
        beatHueCooldown: 800,
        coverSize: 205,
        glowIntensity: 500,
        coverGlowBase: 150,
        glowBrightness: 0,
        glowSensitivity: 0.1,
        glowDynamism: 0,
        glowSmoothness: 1,
        showCoverArt: 0,
        solidCover: 1,
        coverColor: "#000000",
        coverOpacity: 0,
        bassGain: 0.7,
        bassPower: 1.51,
        scaleBounce: 0.4,
        bounceBoost: 3,
        attackSpeed: 1,
        releaseSpeed: 1,
        enableBars: 0,
        enableInnerBars: 1,
        useCustomInnerColor: 0,
        innerBarColor: "#ff0000",
        innerBarsMode: 6,
        innerRadius: 158,
        innerPupilRadius: 0,
        innerPupilRingOpacity: 0,
        innerBarCount: 512,
        innerBarWidth: 2,
        innerBarHeight: 5.4,
        innerBarOpacity: 0.94,
        outerRingOpacity: 0,
        innerHighBoost: 0.066,
        innerRadialRotation: 270,
        innerBarGlow: 0,
        innerHideNote: 1,
        barHeight: 0.9,
        barWidth: 34,
        barGap: 9,
        barRadius: 12,
        barOpacity: 0.1,
        barGlow: 0,
        smoothing: 0.86,
        followMouse: 1,
        followSpeed: 0.1,
        followRadius: 15,
        tiltEffect: 1,
        glowAttack: 1,
        glowDecay: 0.73,
        enableBgGradient: 1,
        bgGradientStyle: 1,
        bgGradientOpacity: 1,
        bgGradientReactivity: 0,
        bgGradientSpread: 158,
        useCustomBgColor: 0,
        bgGradientColor: "#3a1c71",
        enableBlink: 0,
        blinkInterval: 12,
        beatHueSpeed: 0.1
      },
      'Hyper Laser 512': {
        useCustomColor: 0,
        visualizerColor: '#241f31',
        enableBeatHue: 0,
        coverSize: 105,
        glowIntensity: 500,
        coverGlowBase: 35,
        glowBrightness: 2.2,
        glowSensitivity: 1.2,
        glowDynamism: 2.2,
        glowSmoothness: 0.65,
        showCoverArt: 0,
        solidCover: 1,
        coverColor: '#000000',
        coverOpacity: 1,
        bassGain: 1.4,
        bassPower: 1.1,
        scaleBounce: 0,
        bounceBoost: 24.5,
        attackSpeed: 1,
        releaseSpeed: 0.57,
        enableBars: 0,
        enableInnerBars: 1,
        useCustomInnerColor: 0,
        innerBarColor: '#000000',
        innerBarsMode: 5,
        innerRadius: 318,
        innerPupilRadius: 292,
        innerPupilRingOpacity: 0,
        innerBarCount: 512,
        innerBarWidth: 1,
        innerBarHeight: 5,
        innerBarOpacity: 0.85,
        outerRingOpacity: 0,
        innerHighBoost: 0.365,
        innerRadialRotation: 90,
        innerBarGlow: 0,
        innerHideNote: 1,
        smoothing: 0.34,
        followMouse: 1,
        followSpeed: 0.02,
        followRadius: 20,
        tiltEffect: 1,
        glowAttack: 0.85,
        glowDecay: 0.35,
        enableBlink: 0,
        blinkInterval: 12
      },
      'Deep Bass Pulse': {
        useCustomColor: 0,
        coverSize: 110,
        glowIntensity: 450,
        coverGlowBase: 30,
        glowBrightness: 2.5,
        glowSensitivity: 1.5,
        glowDynamism: 2.4,
        glowSmoothness: 0.75,
        showCoverArt: 0,
        solidCover: 1,
        coverColor: '#000000',
        coverOpacity: 1,
        bassGain: 1.6,
        bassPower: 1.2,
        scaleBounce: 0.85,
        bounceBoost: 2.0,
        attackSpeed: 1,
        releaseSpeed: 0.25,
        enableBars: 1,
        enableInnerBars: 1,
        innerBarsMode: 4,
        innerRadius: 180,
        innerPupilRadius: 0,
        innerPupilRingOpacity: 0,
        innerBarCount: 180,
        innerBarWidth: 2,
        innerBarHeight: 2.2,
        innerBarOpacity: 0.8,
        outerRingOpacity: 0.3,
        innerHighBoost: 0.2,
        innerRadialRotation: 90,
        innerBarGlow: 8,
        innerHideNote: 1,
        barHeight: 0.8,
        barWidth: 24,
        barGap: 8,
        barRadius: 8,
        barOpacity: 0.7,
        barGlow: 15,
        smoothing: 0.80
      },
      'Stargate Strobe': {
        useCustomColor: 0,
        coverSize: 115,
        glowIntensity: 400,
        coverGlowBase: 40,
        glowBrightness: 2.0,
        glowSensitivity: 1.3,
        glowDynamism: 2.0,
        glowSmoothness: 0.50,
        showCoverArt: 0,
        solidCover: 1,
        coverColor: '#000000',
        coverOpacity: 1,
        bassGain: 1.3,
        bassPower: 1.0,
        scaleBounce: 0.40,
        bounceBoost: 1.5,
        enableBars: 0,
        enableInnerBars: 1,
        innerBarsMode: 6,
        innerRadius: 240,
        innerPupilRadius: 70,
        innerPupilRingOpacity: 0.5,
        innerBarCount: 256,
        innerBarWidth: 2,
        innerBarHeight: 2.8,
        innerBarOpacity: 0.9,
        outerRingOpacity: 0.5,
        innerHighBoost: 0.25,
        innerRadialRotation: 90,
        innerBarGlow: 12,
        innerHideNote: 1,
        smoothing: 0.70
      },
      'Minimal Bars': {
        useCustomColor: 0,
        coverSize: 100,
        glowIntensity: 200,
        coverGlowBase: 25,
        glowBrightness: 1.2,
        glowSensitivity: 1.0,
        glowDynamism: 1.5,
        showCoverArt: 1,
        solidCover: 0,
        coverOpacity: 1,
        scaleBounce: 0.50,
        bounceBoost: 1.2,
        enableBars: 1,
        enableInnerBars: 0,
        barHeight: 0.65,
        barWidth: 28,
        barGap: 8,
        barRadius: 10,
        barOpacity: 0.85,
        barGlow: 10,
        smoothing: 0.80
      }
    };

    const loadUserPresets = () => {
      try {
        const raw = localStorage.getItem('f0ck_audio_presets');
        return raw ? JSON.parse(raw) : {};
      } catch (e) {
        return {};
      }
    };

    const saveUserPresets = (p) => {
      try {
        localStorage.setItem('f0ck_audio_presets', JSON.stringify(p));
      } catch (e) {}
    };

    const presetSelect = panel.querySelector('#f0ck-tuner-preset-select');
    const deleteBtn = panel.querySelector('#f0ck-tuner-preset-delete');
    const saveBtn = panel.querySelector('#f0ck-tuner-preset-save');
    const saveDefaultBtn = panel.querySelector('#f0ck-tuner-preset-save-default');
    const factoryResetBtn = panel.querySelector('#f0ck-tuner-factory-reset');
    const importBtn = panel.querySelector('#f0ck-tuner-preset-import');
    const nameInput = panel.querySelector('#f0ck-tuner-preset-name');

    const renderPresetsDropdown = (selectedVal = '') => {
      const userPresets = loadUserPresets();
      const hasCustomDefault = !!getCustomDefaultTuning();
      let html = `<option value="" disabled ${!selectedVal ? 'selected' : ''}>-- Choose a Preset --</option>`;

      html += `<optgroup label="Built-in Presets">`;
      Object.keys(BUILTIN_PRESETS).forEach(name => {
        const optVal = 'builtin:' + name;
        const displayName = (name === 'Default' && hasCustomDefault) ? 'Default (Customized ★)' : name;
        html += `<option value="${optVal}" ${selectedVal === optVal ? 'selected' : ''}>${displayName}</option>`;
      });
      html += `</optgroup>`;

      const userKeys = Object.keys(userPresets);
      if (userKeys.length > 0) {
        html += `<optgroup label="My Saved Presets">`;
        userKeys.forEach(name => {
          const optVal = 'user:' + name;
          html += `<option value="${optVal}" ${selectedVal === optVal ? 'selected' : ''}>${name}</option>`;
        });
        html += `</optgroup>`;
      }

      presetSelect.innerHTML = html;
      deleteBtn.disabled = !selectedVal || !selectedVal.startsWith('user:');
      if (factoryResetBtn) {
        factoryResetBtn.style.display = hasCustomDefault ? 'inline-flex' : 'none';
      }
    };

    const applyTuningConfig = (newCfg, presetName) => {
      Object.assign(window.audioVisualizerTuning, newCfg);
      if (newCfg.showCoverArt === undefined && newCfg.solidCover !== undefined) {
        window.audioVisualizerTuning.showCoverArt = Number(newCfg.solidCover) === 0 ? 1 : 0;
      }
      if (newCfg.solidCover === undefined && newCfg.showCoverArt !== undefined) {
        window.audioVisualizerTuning.solidCover = Number(newCfg.showCoverArt) === 1 ? 0 : 1;
      }
      if (newCfg.showCoverInEye === undefined) {
        window.audioVisualizerTuning.showCoverInEye = Number(window.audioVisualizerTuning.showCoverArt) === 1 ? 1 : 0;
      }
      if (newCfg.showCoverInBg === undefined) {
        window.audioVisualizerTuning.showCoverInBg = 0;
      }
      try {
        localStorage.setItem('f0ck_audio_tuning', JSON.stringify(window.audioVisualizerTuning));
      } catch (e) {}

      audioSliders.forEach(s => {
        const input = panel.querySelector(`#input-${s.key}`);
        const valEl = panel.querySelector(`#val-${s.key}`);
        if (!input || !valEl) return;
        const val = window.audioVisualizerTuning[s.key] !== undefined ? window.audioVisualizerTuning[s.key] : DEFAULT_AUDIO_TUNING[s.key];
        input.value = val;
        if (s.type === 'color') {
          valEl.textContent = val;
        } else {
          const num = Number(val);
          const displayVal = Number.isInteger(num) ? num : parseFloat(num.toFixed(3));
          valEl.textContent = `${displayVal}${s.unit || ''}`;
        }
      });

      backgroundSliders.forEach(s => {
        const pfx = s.basic ? 'bgb-' : 'bga-';
        const input = panel.querySelector(`#input-${pfx}${s.key}`);
        const valEl = panel.querySelector(`#val-${pfx}${s.key}`);
        if (!input || !valEl) return;
        const val = window.audioVisualizerTuning[s.key] !== undefined ? window.audioVisualizerTuning[s.key] : DEFAULT_AUDIO_TUNING[s.key];
        input.value = val;
        if (s.type === 'color') {
          valEl.textContent = val;
        } else {
          const num = Number(val);
          const displayVal = Number.isInteger(num) ? num : parseFloat(num.toFixed(3));
          valEl.textContent = `${displayVal}${s.unit || ''}`;
        }
      });

      const cfg = window.audioVisualizerTuning;
      const isCustom = Number(cfg.useCustomColor) === 1;
      const activeColor = isCustom ? (cfg.visualizerColor || '#99ff00') : '';
      document.querySelectorAll('.audio-cover-circle i').forEach(note => {
        note.style.color = activeColor;
        note.style.textShadow = activeColor ? `0 0 16px color-mix(in srgb, ${activeColor} 75%, transparent), 0 0 35px color-mix(in srgb, ${activeColor} 40%, transparent)` : '';
        note.style.display = Number(cfg.innerHideNote) === 1 ? 'none' : '';
      });
      document.querySelectorAll('.audio-cover-circle').forEach(c => {
        if (cfg.coverSize) {
          c.style.width = cfg.coverSize + 'px';
          c.style.height = cfg.coverSize + 'px';
        }
        const note = c.querySelector('i');
        if (note && cfg.coverSize) note.style.fontSize = Math.round(cfg.coverSize * 0.35) + 'px';
        if (!c._visualizerDriving) {
          const offX = Number(cfg.coverPosX || 0);
          const offY = Number(cfg.coverPosY || 0);
          const curX = ((c._eyeX || 0) + offX).toFixed(1);
          const curY = ((c._eyeY || 0) + offY).toFixed(1);
          const curTiltX = (c._eyeTiltX || 0).toFixed(1);
          const curTiltY = (c._eyeTiltY || 0).toFixed(1);
          c.style.transform = `translate(calc(-50% + ${curX}px), calc(-50% + ${curY}px)) perspective(600px) rotateX(${curTiltX}deg) rotateY(${curTiltY}deg) scale(1)`;
        }
      });
      updateCoverArtSolidMode();
      applyBackgroundOpacitySettings(window.audioVisualizerTuning);

      if (presetName && typeof window.flashMessage === 'function') {
        window.flashMessage(`Loaded preset: "${presetName}"`, 2200, 'info');
      }
    };

    renderPresetsDropdown();

    presetSelect.addEventListener('change', () => {
      const val = presetSelect.value;
      if (!val) return;
      if (val.startsWith('builtin:')) {
        const name = val.replace('builtin:', '');
        if (BUILTIN_PRESETS[name]) {
          applyTuningConfig(BUILTIN_PRESETS[name], name);
        }
        deleteBtn.disabled = true;
      } else if (val.startsWith('user:')) {
        const name = val.replace('user:', '');
        const userPresets = loadUserPresets();
        if (userPresets[name]) {
          applyTuningConfig(userPresets[name], name);
        }
        deleteBtn.disabled = false;
      }
    });

    const handleSaveDefault = () => {
      const current = Object.assign({}, window.audioVisualizerTuning);
      try {
        localStorage.setItem('f0ck_audio_default_custom', JSON.stringify(current));
      } catch (e) {}
      BUILTIN_PRESETS['Default'] = getEffectiveDefaultTuning();
      renderPresetsDropdown('builtin:Default');
      if (typeof window.flashMessage === 'function') {
        window.flashMessage('Saved current visualizer look as Default preset!', 3000, 'success');
      }
    };

    if (saveDefaultBtn) {
      saveDefaultBtn.addEventListener('click', handleSaveDefault);
    }

    if (factoryResetBtn) {
      factoryResetBtn.addEventListener('click', () => {
        if (!confirm('Revert the Default preset back to the pristine factory built-in settings?')) return;
        try {
          localStorage.removeItem('f0ck_audio_default_custom');
        } catch (e) {}
        BUILTIN_PRESETS['Default'] = getEffectiveDefaultTuning();
        applyTuningConfig(DEFAULT_AUDIO_TUNING, 'Default (Factory)');
        renderPresetsDropdown('builtin:Default');
        if (typeof window.flashMessage === 'function') {
          window.flashMessage('Restored factory default visualizer preset', 2500, 'info');
        }
      });
    }

    const handleSavePreset = () => {
      let name = (nameInput.value || '').trim();
      if (!name && presetSelect.value && presetSelect.value.startsWith('user:')) {
        name = presetSelect.value.replace('user:', '');
      }
      if (!name && presetSelect.value === 'builtin:Default') {
        handleSaveDefault();
        return;
      }
      if (!name) {
        name = prompt('Enter a name for this preset:');
        if (!name) return;
        name = name.trim();
      }
      if (!name) return;

      const userPresets = loadUserPresets();
      userPresets[name] = Object.assign({}, window.audioVisualizerTuning);
      saveUserPresets(userPresets);

      nameInput.value = '';
      renderPresetsDropdown('user:' + name);

      if (typeof window.flashMessage === 'function') {
        window.flashMessage(`Preset "${name}" saved!`, 2500, 'success');
      }
    };

    saveBtn.addEventListener('click', handleSavePreset);
    nameInput.addEventListener('keydown', (e) => {
      if (e.key === 'Enter') {
        e.preventDefault();
        handleSavePreset();
      }
    });

    deleteBtn.addEventListener('click', () => {
      const val = presetSelect.value;
      if (!val || !val.startsWith('user:')) return;
      const name = val.replace('user:', '');
      if (!confirm(`Delete preset "${name}"?`)) return;

      const userPresets = loadUserPresets();
      delete userPresets[name];
      saveUserPresets(userPresets);

      renderPresetsDropdown('');
      if (typeof window.flashMessage === 'function') {
        window.flashMessage(`Preset "${name}" deleted`, 2200, 'info');
      }
    });

    importBtn.addEventListener('click', () => {
      const raw = prompt('Paste your visualizer preset JSON:');
      if (!raw) return;
      try {
        const parsed = JSON.parse(raw.trim());
        if (typeof parsed !== 'object' || parsed === null) {
          throw new Error('Not an object');
        }
        const defaultName = 'Preset ' + new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
        let name = prompt('Save preset as:', defaultName);
        name = name ? name.trim() : defaultName;

        const userPresets = loadUserPresets();
        userPresets[name] = Object.assign({}, DEFAULT_AUDIO_TUNING, parsed);
        saveUserPresets(userPresets);

        applyTuningConfig(userPresets[name], name);
        renderPresetsDropdown('user:' + name);

        if (typeof window.flashMessage === 'function') {
          window.flashMessage(`Imported and loaded "${name}"!`, 3000, 'success');
        }
      } catch (err) {
        alert('Invalid JSON! Please paste valid preset settings.');
      }
    });

    audioSliders.forEach(s => {
      const input = panel.querySelector(`#input-${s.key}`);
      const valEl = panel.querySelector(`#val-${s.key}`);
      if (!input || !valEl) return;
      input.addEventListener('input', () => {
        if (s.type === 'color') {
          window.audioVisualizerTuning[s.key] = input.value;
          valEl.textContent = input.value;
        } else {
          const parsed = parseFloat(input.value);
          window.audioVisualizerTuning[s.key] = parsed;
          const displayVal = Number.isInteger(parsed) ? parsed : parseFloat(parsed.toFixed(3));
          valEl.textContent = `${displayVal}${s.unit || ''}`;
        }

        if (s.key === 'useCustomColor' || s.key === 'visualizerColor') {
          const cfg = window.audioVisualizerTuning;
          const isCustom = Number(cfg.useCustomColor) === 1;
          const activeColor = isCustom ? (cfg.visualizerColor || '#99ff00') : '';
          document.querySelectorAll('.audio-cover-circle i').forEach(note => {
            note.style.color = activeColor;
            note.style.textShadow = activeColor ? `0 0 16px color-mix(in srgb, ${activeColor} 75%, transparent), 0 0 35px color-mix(in srgb, ${activeColor} 40%, transparent)` : '';
          });
        } else if (s.key === 'showCoverInEye') {
          const isShow = Number(input.value) === 1;
          window.audioVisualizerTuning.showCoverInEye = isShow ? 1 : 0;
          window.audioVisualizerTuning.showCoverArt = (isShow || Number(window.audioVisualizerTuning.showCoverInBg) === 1) ? 1 : 0;
          window.audioVisualizerTuning.solidCover = (window.audioVisualizerTuning.showCoverArt === 1) ? 0 : 1;
          updateCoverArtSolidMode();
        } else if (s.key === 'showCoverInBg') {
          const isShow = Number(input.value) === 1;
          window.audioVisualizerTuning.showCoverInBg = isShow ? 1 : 0;
          window.audioVisualizerTuning.showCoverArt = (isShow || Number(window.audioVisualizerTuning.showCoverInEye) === 1) ? 1 : 0;
          window.audioVisualizerTuning.solidCover = (window.audioVisualizerTuning.showCoverArt === 1) ? 0 : 1;
          updateCoverArtSolidMode();
        } else if (s.key === 'showCoverArt') {
          const isShow = Number(input.value) === 1;
          window.audioVisualizerTuning.showCoverArt = isShow ? 1 : 0;
          window.audioVisualizerTuning.solidCover = isShow ? 0 : 1;
          window.audioVisualizerTuning.showCoverInEye = isShow ? 1 : 0;
          updateCoverArtSolidMode();
        } else if (s.key === 'solidCover') {
          const isSolid = Number(input.value) === 1;
          window.audioVisualizerTuning.solidCover = isSolid ? 1 : 0;
          window.audioVisualizerTuning.showCoverArt = isSolid ? 0 : 1;
          window.audioVisualizerTuning.showCoverInEye = isSolid ? 0 : 1;
          updateCoverArtSolidMode();
        } else if (s.key.startsWith('cover') || s.key.startsWith('bgCover')) {
          updateCoverArtSolidMode();
          if (s.key === 'coverPosX' || s.key === 'coverPosY') {
            document.querySelectorAll('.audio-cover-circle').forEach(circle => {
              if (!circle._visualizerDriving) {
                const offX = Number(window.audioVisualizerTuning.coverPosX || 0);
                const offY = Number(window.audioVisualizerTuning.coverPosY || 0);
                const curX = ((circle._eyeX || 0) + offX).toFixed(1);
                const curY = ((circle._eyeY || 0) + offY).toFixed(1);
                const curTiltX = (circle._eyeTiltX || 0).toFixed(1);
                const curTiltY = (circle._eyeTiltY || 0).toFixed(1);
                circle.style.transform = `translate(calc(-50% + ${curX}px), calc(-50% + ${curY}px)) perspective(600px) rotateX(${curTiltX}deg) rotateY(${curTiltY}deg) scale(1)`;
              }
            });
          }
        } else if (s.key === 'enableBars') {
          if (Number(input.value) === 0) {
            document.querySelectorAll('.v0ck-audio-visualizer-canvas, .audio-visualizer-canvas').forEach(c => {
              const cCtx = c.getContext('2d');
              if (cCtx) cCtx.clearRect(0, 0, c.width, c.height);
            });
          }
        } else if (s.key === 'enableInnerBars') {
          if (Number(input.value) === 0) {
            document.querySelectorAll('.audio-eye-inner-canvas').forEach(c => {
              const inCtx = c.getContext('2d');
              if (inCtx) inCtx.clearRect(0, 0, c.width, c.height);
            });
          }
        } else if (s.key === 'innerHideNote') {
          const hide = Number(input.value) === 1;
          document.querySelectorAll('.audio-cover-circle i').forEach(note => {
            note.style.display = hide ? 'none' : '';
          });
        } else if (s.key === 'coverSize') {
          const parsed = parseFloat(input.value);
          document.querySelectorAll('.audio-cover-circle').forEach(c => {
            c.style.width = parsed + 'px';
            c.style.height = parsed + 'px';
            const note = c.querySelector('i');
            if (note) note.style.fontSize = Math.round(parsed * 0.35) + 'px';
          });
        } else if (s.key === 'coverGlowBase' || s.key === 'glowBrightness') {
          const cfg = window.audioVisualizerTuning;
          const baseGlow = cfg.coverGlowBase !== undefined ? cfg.coverGlowBase : 35;
          const glowMult = cfg.glowBrightness !== undefined ? cfg.glowBrightness : 1.0;
          document.querySelectorAll('.audio-cover-circle').forEach(c => {
            if (!c._visualizerDriving) {
              if (glowMult <= 0) {
                c.style.boxShadow = `0 12px 40px rgba(0, 0, 0, 0.88)`;
              } else {
                c.style.boxShadow = `0 12px 40px rgba(0, 0, 0, 0.88), 0 0 ${baseGlow}px color-mix(in srgb, var(--accent, #99ff00) ${Math.round(28 * Math.min(1.5, glowMult))}%, transparent)`;
              }
            }
          });
        }

        try {
          localStorage.setItem('f0ck_audio_tuning', JSON.stringify(window.audioVisualizerTuning));
        } catch (e) {}
      });
    });

    // ── Background Sliders Event Listeners (Standard vs Onara vs Audio mode) ────────
    let activeBgTunerMode = isCurrentlyInOnara() ? 'onara' : (isCurrentItemAudio() ? 'audio' : 'standard');

    const syncBgSlidersDisplay = () => {
      const mode = activeBgTunerMode;
      let sourceObj, defaultObj;
      if (mode === 'audio') {
        sourceObj = window.audioBgTuning || DEFAULT_AUDIO_BG_TUNING;
        defaultObj = DEFAULT_AUDIO_BG_TUNING;
      } else if (mode === 'onara') {
        sourceObj = window.onaraTuning || DEFAULT_ONARA_TUNING;
        defaultObj = DEFAULT_ONARA_TUNING;
      } else {
        sourceObj = window.audioVisualizerTuning || DEFAULT_AUDIO_TUNING;
        defaultObj = DEFAULT_AUDIO_TUNING;
      }

      const stdBtn = panel.querySelector('#bg-mode-btn-standard');
      const onaraBtn = panel.querySelector('#bg-mode-btn-onara');
      const audioBtn = panel.querySelector('#bg-mode-btn-audio');
      if (stdBtn) stdBtn.classList.toggle('active', mode === 'standard');
      if (onaraBtn) onaraBtn.classList.toggle('active', mode === 'onara');
      if (audioBtn) audioBtn.classList.toggle('active', mode === 'audio');

      backgroundSliders.forEach(s => {
        // Update both basic (bgb-) and advanced (bga-) DOM elements
        const pfxs = s.basic ? ['bgb-'] : ['bga-'];
        pfxs.forEach(pfx => {
          const input = panel.querySelector(`#input-${pfx}${s.key}`);
          const valEl = panel.querySelector(`#val-${pfx}${s.key}`);
          if (!input || !valEl) return;
          const val = sourceObj[s.key] !== undefined ? sourceObj[s.key] : defaultObj[s.key];
          input.value = val;
          if (s.type === 'color') {
            valEl.textContent = val;
          } else {
            const num = Number(val);
            const displayVal = Number.isInteger(num) ? num : parseFloat(num.toFixed(3));
            valEl.textContent = `${displayVal}${s.unit || ''}`;
          }
        });
      });
    };

    panel.querySelector('#bg-mode-btn-standard')?.addEventListener('click', () => {
      activeBgTunerMode = 'standard';
      syncBgSlidersDisplay();
      applyBackgroundOpacitySettings(window.audioVisualizerTuning, false);
      if (!window._bgModeAutoSwitch && typeof window.flashMessage === 'function') {
        window.flashMessage('Tuning Standard Background', 1500, 'info');
      }
    });

    panel.querySelector('#bg-mode-btn-onara')?.addEventListener('click', () => {
      activeBgTunerMode = 'onara';
      syncBgSlidersDisplay();
      applyBackgroundOpacitySettings(window.onaraTuning, true);
      if (!window._bgModeAutoSwitch && typeof window.flashMessage === 'function') {
        window.flashMessage('Tuning Onara Mode Background', 1500, 'info');
      }
    });

    panel.querySelector('#bg-mode-btn-audio')?.addEventListener('click', () => {
      activeBgTunerMode = 'audio';
      syncBgSlidersDisplay();
      applyBackgroundOpacitySettings(window.audioBgTuning, 'audio');
      if (!window._bgModeAutoSwitch && typeof window.flashMessage === 'function') {
        window.flashMessage('Tuning Audio Background', 1500, 'info');
      }
    });

    backgroundSliders.forEach(s => {
      // Bind event to whichever prefix this slider lives in
      const pfx = s.basic ? 'bgb-' : 'bga-';
      const input = panel.querySelector(`#input-${pfx}${s.key}`);
      const valEl = panel.querySelector(`#val-${pfx}${s.key}`);
      if (!input || !valEl) return;
      input.addEventListener('input', () => {
        const mode = activeBgTunerMode;
        let targetObj, storageKey;
        if (mode === 'audio') {
          targetObj = window.audioBgTuning;
          storageKey = 'f0ck_audio_bg_tuning';
        } else if (mode === 'onara') {
          targetObj = window.onaraTuning;
          storageKey = 'f0ck_onara_tuning';
        } else {
          targetObj = window.audioVisualizerTuning;
          storageKey = 'f0ck_audio_tuning';
        }

        if (s.type === 'color') {
          targetObj[s.key] = input.value;
          valEl.textContent = input.value;
        } else {
          const parsed = parseFloat(input.value);
          targetObj[s.key] = parsed;
          const displayVal = Number.isInteger(parsed) ? parsed : parseFloat(parsed.toFixed(3));
          valEl.textContent = `${displayVal}${s.unit || ''}`;
        }

        BgState.invalidateTuning();
        applyBackgroundOpacitySettings(targetObj, mode === 'audio' ? 'audio' : (mode === 'onara'));

        try {
          localStorage.setItem(storageKey, JSON.stringify(targetObj));
        } catch (e) {}
      });
    });

    panel.querySelector('#bg-tuner-reset')?.addEventListener('click', () => {
      const mode = activeBgTunerMode;
      if (mode === 'audio') {
        window.audioBgTuning = Object.assign({}, DEFAULT_AUDIO_BG_TUNING);
        try {
          localStorage.setItem('f0ck_audio_bg_tuning', JSON.stringify(window.audioBgTuning));
        } catch (e) {}
        syncBgSlidersDisplay();
        applyBackgroundOpacitySettings(window.audioBgTuning, 'audio');
        if (typeof window.flashMessage === 'function') {
          window.flashMessage('Audio background settings reset to defaults', 2000, 'info');
        }
      } else if (mode === 'onara') {
        window.onaraTuning = Object.assign({}, DEFAULT_ONARA_TUNING);
        try {
          localStorage.setItem('f0ck_onara_tuning', JSON.stringify(window.onaraTuning));
        } catch (e) {}
        syncBgSlidersDisplay();
        applyBackgroundOpacitySettings(window.onaraTuning, true);
        if (typeof window.flashMessage === 'function') {
          window.flashMessage('Onara background settings reset to defaults', 2000, 'info');
        }
      } else {
        const defaults = DEFAULT_AUDIO_TUNING;
        backgroundSliders.forEach(s => {
          window.audioVisualizerTuning[s.key] = defaults[s.key];
        });
        syncBgSlidersDisplay();
        applyBackgroundOpacitySettings(window.audioVisualizerTuning, false);
        try {
          localStorage.setItem('f0ck_audio_tuning', JSON.stringify(window.audioVisualizerTuning));
        } catch (e) {}
        if (typeof window.flashMessage === 'function') {
          window.flashMessage('Standard background settings reset to default', 2000, 'info');
        }
      }
    });

    panel.querySelector('#bg-tuner-copy')?.addEventListener('click', () => {
      const mode = activeBgTunerMode;
      const targetObj = mode === 'audio' ? window.audioBgTuning : (mode === 'onara' ? window.onaraTuning : window.audioVisualizerTuning);
      const bgCfg = {};
      backgroundSliders.forEach(s => {
        bgCfg[s.key] = targetObj[s.key];
      });
      navigator.clipboard.writeText(JSON.stringify(bgCfg, null, 2)).then(() => {
        if (typeof window.flashMessage === 'function') {
          window.flashMessage(`${mode === 'audio' ? 'Audio' : (mode === 'onara' ? 'Onara' : 'Standard')} background settings copied to clipboard!`, 2500, 'success');
        }
      });
    });

    // Initialize initial slider state in tuner
    syncBgSlidersDisplay();

    panel.querySelector('#f0ck-tuner-copy')?.addEventListener('click', () => {
      const copyBtn = panel.querySelector('#f0ck-tuner-copy');
      const text = JSON.stringify(window.audioVisualizerTuning, null, 2);
      navigator.clipboard.writeText(text).then(() => {
        copyBtn.innerHTML = '<i class="fa-solid fa-check"></i> Copied!';
        if (typeof window.flashMessage === 'function') {
          window.flashMessage('Audio visualizer settings copied to clipboard!', 3500, 'success');
        }
        setTimeout(() => {
          copyBtn.innerHTML = '<i class="fa-solid fa-copy"></i> Copy JSON';
        }, 2000);
      });
    });

    panel.querySelector('#f0ck-tuner-copy-code')?.addEventListener('click', () => {
      const codeBtn = panel.querySelector('#f0ck-tuner-copy-code');
      const text = `const DEFAULT_AUDIO_TUNING = ${JSON.stringify(window.audioVisualizerTuning, null, 2)};`;
      navigator.clipboard.writeText(text).then(() => {
        codeBtn.innerHTML = '<i class="fa-solid fa-check"></i> Copied!';
        if (typeof window.flashMessage === 'function') {
          window.flashMessage('Copied DEFAULT_AUDIO_TUNING JS code to clipboard!', 3500, 'success');
        }
        setTimeout(() => {
          codeBtn.innerHTML = '<i class="fa-solid fa-code"></i> Copy Code';
        }, 2000);
      });
    });

    panel.querySelector('#f0ck-tuner-reset')?.addEventListener('click', () => {
      applyTuningConfig(getEffectiveDefaultTuning(), 'Default');
      renderPresetsDropdown('builtin:Default');
      if (typeof window.flashMessage === 'function') {
        window.flashMessage('Audio tuner reset to default preset', 2000, 'info');
      }
    });

    // ── Danmaku Presets, Debug & Events ─────────────────────────────────────
    const BUILTIN_DANMAKU_PRESETS = {
      'Default Nico': {
        fontSize: 35,
        opacity: 1.0,
        speedMultiplier: 1.0,
        laneCount: 10,
        laneCoverage: 100,
        fontWeight: 700,
        outlineStyle: 2,
        useCustomColor: 0,
        customColor: '#ffffff',
        pillBackground: 0,
        allowMediaEmbeds: 1,
        mediaMaxHeight: 80,
        showGreentext: 1,
        densityLimit: 35,
        flashInterval: 2.5
      },
      'Dense & Fast': {
        fontSize: 28,
        opacity: 0.90,
        speedMultiplier: 1.6,
        laneCount: 16,
        laneCoverage: 100,
        fontWeight: 700,
        outlineStyle: 2,
        useCustomColor: 0,
        customColor: '#ffffff',
        pillBackground: 0,
        allowMediaEmbeds: 1,
        mediaMaxHeight: 60,
        showGreentext: 1,
        densityLimit: 60,
        flashInterval: 1.2
      },
      'Subtitles Clear (Top 50%)': {
        fontSize: 32,
        opacity: 0.95,
        speedMultiplier: 1.0,
        laneCount: 6,
        laneCoverage: 50,
        fontWeight: 700,
        outlineStyle: 2,
        useCustomColor: 0,
        customColor: '#ffffff',
        pillBackground: 0,
        allowMediaEmbeds: 1,
        mediaMaxHeight: 70,
        showGreentext: 1,
        densityLimit: 25,
        flashInterval: 2.5
      },
      'Neon Cyber Glow': {
        fontSize: 36,
        opacity: 1.0,
        speedMultiplier: 1.15,
        laneCount: 10,
        laneCoverage: 100,
        fontWeight: 900,
        outlineStyle: 3,
        useCustomColor: 1,
        customColor: '#00ffcc',
        pillBackground: 1,
        allowMediaEmbeds: 1,
        mediaMaxHeight: 90,
        showGreentext: 1,
        densityLimit: 40,
        flashInterval: 2.0
      },
      'Clean Capsule HUD': {
        fontSize: 24,
        opacity: 0.90,
        speedMultiplier: 0.85,
        laneCount: 12,
        laneCoverage: 80,
        fontWeight: 600,
        outlineStyle: 1,
        useCustomColor: 0,
        customColor: '#ffffff',
        pillBackground: 2,
        allowMediaEmbeds: 1,
        mediaMaxHeight: 50,
        showGreentext: 1,
        densityLimit: 30,
        flashInterval: 3.0
      }
    };

    const loadUserDanmakuPresets = () => {
      try {
        const raw = localStorage.getItem('f0ck_danmaku_presets');
        return raw ? JSON.parse(raw) : {};
      } catch (e) {
        return {};
      }
    };

    const saveUserDanmakuPresets = (p) => {
      try {
        localStorage.setItem('f0ck_danmaku_presets', JSON.stringify(p));
      } catch (e) {}
    };

    const danmakuPresetSelect = panel.querySelector('#danmaku-preset-select');
    const danmakuDeleteBtn = panel.querySelector('#danmaku-preset-delete');
    const danmakuSaveBtn = panel.querySelector('#danmaku-preset-save');
    const danmakuImportBtn = panel.querySelector('#danmaku-preset-import');
    const danmakuNameInput = panel.querySelector('#danmaku-preset-name');

    const renderDanmakuPresetsDropdown = (selectedVal = '') => {
      const userPresets = loadUserDanmakuPresets();
      let html = `<option value="" disabled ${!selectedVal ? 'selected' : ''}>-- Choose a Danmaku Preset --</option>`;

      html += `<optgroup label="Built-in Danmaku Presets">`;
      Object.keys(BUILTIN_DANMAKU_PRESETS).forEach(name => {
        const optVal = 'builtin:' + name;
        html += `<option value="${optVal}" ${selectedVal === optVal ? 'selected' : ''}>${name}</option>`;
      });
      html += `</optgroup>`;

      const userKeys = Object.keys(userPresets);
      if (userKeys.length > 0) {
        html += `<optgroup label="My Saved Danmaku Presets">`;
        userKeys.forEach(name => {
          const optVal = 'user:' + name;
          html += `<option value="${optVal}" ${selectedVal === optVal ? 'selected' : ''}>${name}</option>`;
        });
        html += `</optgroup>`;
      }

      danmakuPresetSelect.innerHTML = html;
      danmakuDeleteBtn.disabled = !selectedVal || !selectedVal.startsWith('user:');
    };

    const applyDanmakuTuningConfig = (newCfg, presetName) => {
      if (!window.danmakuTuning) window.danmakuTuning = {};
      Object.assign(window.danmakuTuning, newCfg);
      try {
        localStorage.setItem('f0ck_danmaku_tuning', JSON.stringify(window.danmakuTuning));
      } catch (e) {}

      danmakuSliders.forEach(s => {
        const input = panel.querySelector(`#input-danmaku-${s.key}`);
        const valEl = panel.querySelector(`#val-danmaku-${s.key}`);
        if (!input || !valEl) return;
        const val = window.danmakuTuning[s.key] !== undefined ? window.danmakuTuning[s.key] : (window.DEFAULT_DANMAKU_TUNING ? window.DEFAULT_DANMAKU_TUNING[s.key] : 0);
        input.value = val;
        if (s.type === 'color') {
          valEl.textContent = val;
        } else {
          const num = Number(val);
          const displayVal = Number.isInteger(num) ? num : parseFloat(num.toFixed(2));
          valEl.textContent = `${displayVal}${s.unit || ''}`;
        }
      });

      if (typeof Danmaku !== 'undefined' && typeof Danmaku.applyGlobalTuning === 'function') {
        Danmaku.applyGlobalTuning(window.danmakuTuning);
      } else if (window.danmakuInstance && typeof window.danmakuInstance._applyTuning === 'function') {
        window.danmakuInstance._applyTuning();
      }

      if (presetName && typeof window.flashMessage === 'function') {
        window.flashMessage(`Loaded danmaku preset: "${presetName}"`, 2200, 'info');
      }
    };

    renderDanmakuPresetsDropdown();

    danmakuPresetSelect.addEventListener('change', () => {
      const val = danmakuPresetSelect.value;
      if (!val) return;
      if (val.startsWith('builtin:')) {
        const name = val.replace('builtin:', '');
        if (BUILTIN_DANMAKU_PRESETS[name]) {
          applyDanmakuTuningConfig(BUILTIN_DANMAKU_PRESETS[name], name);
        }
        danmakuDeleteBtn.disabled = true;
      } else if (val.startsWith('user:')) {
        const name = val.replace('user:', '');
        const userPresets = loadUserDanmakuPresets();
        if (userPresets[name]) {
          applyDanmakuTuningConfig(userPresets[name], name);
        }
        danmakuDeleteBtn.disabled = false;
      }
    });

    const handleSaveDanmakuPreset = () => {
      let name = (danmakuNameInput.value || '').trim();
      if (!name) {
        name = prompt('Enter a name for this danmaku preset:');
        if (!name) return;
        name = name.trim();
      }
      if (!name) return;

      const userPresets = loadUserDanmakuPresets();
      userPresets[name] = Object.assign({}, window.danmakuTuning || {});
      saveUserDanmakuPresets(userPresets);

      danmakuNameInput.value = '';
      renderDanmakuPresetsDropdown('user:' + name);

      if (typeof window.flashMessage === 'function') {
        window.flashMessage(`Danmaku preset "${name}" saved!`, 2500, 'success');
      }
    };

    danmakuSaveBtn.addEventListener('click', handleSaveDanmakuPreset);
    danmakuNameInput.addEventListener('keydown', (e) => {
      if (e.key === 'Enter') {
        e.preventDefault();
        handleSaveDanmakuPreset();
      }
    });

    danmakuDeleteBtn.addEventListener('click', () => {
      const val = danmakuPresetSelect.value;
      if (!val || !val.startsWith('user:')) return;
      const name = val.replace('user:', '');
      if (!confirm(`Delete danmaku preset "${name}"?`)) return;

      const userPresets = loadUserDanmakuPresets();
      delete userPresets[name];
      saveUserDanmakuPresets(userPresets);

      renderDanmakuPresetsDropdown('');
      if (typeof window.flashMessage === 'function') {
        window.flashMessage(`Danmaku preset "${name}" deleted`, 2200, 'info');
      }
    });

    danmakuImportBtn.addEventListener('click', () => {
      const raw = prompt('Paste your danmaku preset JSON:');
      if (!raw) return;
      try {
        const parsed = JSON.parse(raw.trim());
        if (typeof parsed !== 'object' || parsed === null) {
          throw new Error('Not an object');
        }
        const defaultName = 'Danmaku Preset ' + new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
        let name = prompt('Save danmaku preset as:', defaultName);
        name = name ? name.trim() : defaultName;

        const userPresets = loadUserDanmakuPresets();
        userPresets[name] = Object.assign({}, window.DEFAULT_DANMAKU_TUNING || {}, parsed);
        saveUserDanmakuPresets(userPresets);

        applyDanmakuTuningConfig(userPresets[name], name);
        renderDanmakuPresetsDropdown('user:' + name);

        if (typeof window.flashMessage === 'function') {
          window.flashMessage(`Imported and loaded "${name}"!`, 3000, 'success');
        }
      } catch (err) {
        alert('Invalid JSON! Please paste valid danmaku preset settings.');
      }
    });

    danmakuSliders.forEach(s => {
      const input = panel.querySelector(`#input-danmaku-${s.key}`);
      const valEl = panel.querySelector(`#val-danmaku-${s.key}`);
      if (!input || !valEl) return;
      input.addEventListener('input', () => {
        if (!window.danmakuTuning) window.danmakuTuning = {};
        if (s.type === 'color') {
          window.danmakuTuning[s.key] = input.value;
          valEl.textContent = input.value;
        } else {
          const parsed = parseFloat(input.value);
          window.danmakuTuning[s.key] = parsed;
          const displayVal = Number.isInteger(parsed) ? parsed : parseFloat(parsed.toFixed(2));
          valEl.textContent = `${displayVal}${s.unit || ''}`;
        }

        try {
          localStorage.setItem('f0ck_danmaku_tuning', JSON.stringify(window.danmakuTuning));
        } catch (e) {}

        if (typeof Danmaku !== 'undefined' && typeof Danmaku.applyGlobalTuning === 'function') {
          Danmaku.applyGlobalTuning(window.danmakuTuning);
        } else if (window.danmakuInstance && typeof window.danmakuInstance._applyTuning === 'function') {
          window.danmakuInstance._applyTuning();
        }
      });
    });

    // Visual Overlays toggles (Lane Guides & Debug HUD)
    ['showLaneGuides', 'showDebugHUD'].forEach(k => {
      const input = panel.querySelector(`#input-danmaku-${k}`);
      const valEl = panel.querySelector(`#val-danmaku-${k}`);
      if (!input || !valEl) return;
      input.addEventListener('input', () => {
        if (!window.danmakuTuning) window.danmakuTuning = {};
        const enabled = Number(input.value) === 1;
        window.danmakuTuning[k] = enabled ? 1 : 0;
        valEl.textContent = enabled ? '1' : '0';

        try {
          localStorage.setItem('f0ck_danmaku_tuning', JSON.stringify(window.danmakuTuning));
        } catch (e) {}

        if (typeof Danmaku !== 'undefined' && typeof Danmaku.applyGlobalTuning === 'function') {
          Danmaku.applyGlobalTuning(window.danmakuTuning);
        } else if (window.danmakuInstance && typeof window.danmakuInstance._applyTuning === 'function') {
          window.danmakuInstance._applyTuning();
        }
      });
    });

    // Interactive Comment Spawner & Debug Tools Action Handlers
    const debugTextInput = panel.querySelector('#danmaku-debug-text');
    const debugUserInput = panel.querySelector('#danmaku-debug-user');
    const debugColorInput = panel.querySelector('#danmaku-debug-color');

    panel.querySelector('#danmaku-btn-fire')?.addEventListener('click', () => {
      const text = (debugTextInput.value || '').trim() || 'Danmaku Test! :dance_fart:';
      const user = (debugUserInput.value || '').trim() || 'Tester';
      const col = debugColorInput.value || '#00ffcc';

      if (window.danmakuInstance) {
        if (typeof window.danmakuInstance.isLooping === 'function' && window.danmakuInstance.isLooping()) {
          window.danmakuInstance.fireBurst(1, { text, username: user, color: col });
          if (typeof window.flashMessage === 'function') {
            window.flashMessage('Looping custom comment continuously (Loop is ON)!', 2200, 'success');
          }
        } else {
          window.danmakuInstance.fire(text, user, col);
          if (typeof window.flashMessage === 'function') {
            window.flashMessage('Fired comment to active player!', 1500, 'info');
          }
        }
      } else {
        if (typeof window.flashMessage === 'function') {
          window.flashMessage('No active video/audio/ruffle player on page!', 2500, 'warning');
        }
      }
    });

    const loopBtn = panel.querySelector('#danmaku-btn-loop');
    const loopStatusSpan = panel.querySelector('#danmaku-loop-status');
    loopBtn?.addEventListener('click', () => {
      if (window.danmakuInstance && typeof window.danmakuInstance.toggleLoop === 'function') {
        const isLooping = window.danmakuInstance.toggleLoop();
        loopBtn.classList.toggle('btn-primary', isLooping);
        if (loopStatusSpan) loopStatusSpan.textContent = isLooping ? 'ON' : 'OFF';
        if (typeof window.flashMessage === 'function') {
          window.flashMessage(`Danmaku continuous loop: ${isLooping ? 'ON (Endless)' : 'OFF'}`, 1800, isLooping ? 'success' : 'info');
        }
      } else {
        if (typeof window.flashMessage === 'function') {
          window.flashMessage('No active video/audio player found to loop!', 2500, 'warning');
        }
      }
    });

    panel.querySelector('#danmaku-btn-burst')?.addEventListener('click', () => {
      if (window.danmakuInstance && typeof window.danmakuInstance.fireBurst === 'function') {
        const isLooping = typeof window.danmakuInstance.isLooping === 'function' && window.danmakuInstance.isLooping();
        window.danmakuInstance.fireBurst(10);
        if (typeof window.flashMessage === 'function') {
          window.flashMessage(isLooping ? 'Continuous Burst running indefinitely (Loop is ON)!' : 'Fired 10 burst comments!', 2000, isLooping ? 'success' : 'info');
        }
      } else {
        if (typeof window.flashMessage === 'function') {
          window.flashMessage('No active video/audio player found!', 2500, 'warning');
        }
      }
    });

    panel.querySelector('#danmaku-btn-flood')?.addEventListener('click', () => {
      if (window.danmakuInstance && typeof window.danmakuInstance.fireBurst === 'function') {
        const isLooping = typeof window.danmakuInstance.isLooping === 'function' && window.danmakuInstance.isLooping();
        window.danmakuInstance.fireBurst(30);
        if (typeof window.flashMessage === 'function') {
          window.flashMessage(isLooping ? 'Continuous Flood running indefinitely (Loop is ON)!' : 'Stress testing with 30 comments (Turn on Loop for endless flood)!', 2200, isLooping ? 'success' : 'info');
        }
      } else {
        if (typeof window.flashMessage === 'function') {
          window.flashMessage('No active video/audio player found!', 2500, 'warning');
        }
      }
    });

    panel.querySelector('#danmaku-btn-greentext')?.addEventListener('click', () => {
      if (window.danmakuInstance) {
        const isLooping = typeof window.danmakuInstance.isLooping === 'function' && window.danmakuInstance.isLooping();
        if (isLooping) {
          window.danmakuInstance.fireBurst(1, { text: '>be me\n>browsing f0ck\n>feels good man', username: 'Anon', color: '#78b87a' });
        } else {
          window.danmakuInstance.fire('>be me\n>browsing f0ck\n>feels good man', 'Anon', '#78b87a');
        }
      } else {
        if (typeof window.flashMessage === 'function') {
          window.flashMessage('No active video/audio player found!', 2500, 'warning');
        }
      }
    });

    panel.querySelector('#danmaku-btn-spoilers')?.addEventListener('click', () => {
      if (window.danmakuInstance) {
        const isLooping = typeof window.danmakuInstance.isLooping === 'function' && window.danmakuInstance.isLooping();
        if (isLooping) {
          window.danmakuInstance.fireBurst(1, { text: '[spoiler]This is a spoiler[/spoiler] & [blur]Blurry text[/blur]', username: 'SecretAgent', color: '#ff5577' });
        } else {
          window.danmakuInstance.fire('[spoiler]This is a spoiler[/spoiler] & [blur]Blurry text[/blur]', 'SecretAgent', '#ff5577');
        }
      } else {
        if (typeof window.flashMessage === 'function') {
          window.flashMessage('No active video/audio player found!', 2500, 'warning');
        }
      }
    });

    panel.querySelector('#danmaku-btn-clear')?.addEventListener('click', () => {
      if (window.danmakuInstance && typeof window.danmakuInstance.clearActivePills === 'function') {
        window.danmakuInstance.clearActivePills();
        if (typeof window.flashMessage === 'function') {
          window.flashMessage('Cleared all active danmaku pills', 1800, 'info');
        }
      } else {
        document.querySelectorAll('.danmaku-pill').forEach(p => p.remove());
      }
    });

    panel.querySelector('#danmaku-btn-reset-timeline')?.addEventListener('click', () => {
      if (window.danmakuInstance && typeof window.danmakuInstance.resetTimeline === 'function') {
        window.danmakuInstance.resetTimeline();
        if (typeof window.flashMessage === 'function') {
          window.flashMessage('Timeline fired state reset', 1800, 'info');
        }
      }
    });

    panel.querySelector('#danmaku-tuner-copy')?.addEventListener('click', () => {
      const copyBtn = panel.querySelector('#danmaku-tuner-copy');
      const text = JSON.stringify(window.danmakuTuning || {}, null, 2);
      navigator.clipboard.writeText(text).then(() => {
        copyBtn.innerHTML = '<i class="fa-solid fa-check"></i> Copied!';
        if (typeof window.flashMessage === 'function') {
          window.flashMessage('Danmaku settings copied to clipboard!', 3500, 'success');
        }
        setTimeout(() => {
          copyBtn.innerHTML = '<i class="fa-solid fa-copy"></i> Copy Settings';
        }, 2000);
      });
    });

    panel.querySelector('#danmaku-tuner-reset')?.addEventListener('click', () => {
      applyDanmakuTuningConfig(window.DEFAULT_DANMAKU_TUNING || BUILTIN_DANMAKU_PRESETS['Default Nico'], 'Default Nico');
      renderDanmakuPresetsDropdown('builtin:Default Nico');
      if (typeof window.flashMessage === 'function') {
        window.flashMessage('Danmaku tuner reset to defaults', 2000, 'info');
      }
    });

    if (sidebarContainer) {
      sidebarContainer.appendChild(panel);
    } else {
      const toggleBtn = document.createElement('button');
      toggleBtn.id = 'f0ck-tuner-toggle';
      toggleBtn.type = 'button';
      toggleBtn.className = 'f0ck-tuner-toggle';
      toggleBtn.innerHTML = '<i class="fa-solid fa-sliders"></i> Tuner';
      toggleBtn.title = 'Open Live Tuner';

      document.body.appendChild(panel);
      document.body.appendChild(toggleBtn);

      toggleBtn.addEventListener('click', () => {
        panel.classList.toggle('hidden');
      });
    }

    const closeBtn = panel.querySelector('#f0ck-tuner-close');
    if (closeBtn) {
      closeBtn.addEventListener('click', () => {
        if (sidebarContainer && typeof window.switchSidebarTab === 'function') {
          window.switchSidebarTab('comments');
        } else {
          panel.classList.add('hidden');
        }
      });
    }

    updateCoverArtSolidMode();
  };

  document.addEventListener('click', (e) => {
    const tunerTab = e.target.closest('#sidebar-tab-tuner, [data-tab="tuner"]');
    if (tunerTab) {
      initAudioTunerUI();
      const inOnara = (typeof isCurrentlyInOnara === 'function') ? isCurrentlyInOnara() : document.body.classList.contains('onara-modal-open');
      const expectedBtnId = inOnara
        ? '#bg-mode-btn-onara'
        : ((typeof isCurrentItemAudio === 'function' && isCurrentItemAudio()) ? '#bg-mode-btn-audio' : '#bg-mode-btn-standard');
      const btn = document.querySelector(expectedBtnId);
      if (btn && !btn.classList.contains('active')) {
        window._bgModeAutoSwitch = true;
        btn.click();
        window._bgModeAutoSwitch = false;
      }
    }
  });

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

  const audioMetaMemoryCache = new Map();

    // Fast client-side binary tag parser (FLAC Vorbis Comment & ID3v2)
    const parseAudioTagsFromBuffer = (buffer) => {
    const bytes = new Uint8Array(buffer);
    const result = { artist: '', title: '', album: '' };

    // 1. Check FLAC: "fLaC" (0x66, 0x4C, 0x61, 0x63)
    if (bytes.length > 4 && bytes[0] === 0x66 && bytes[1] === 0x4C && bytes[2] === 0x61 && bytes[3] === 0x63) {
      let offset = 4;
      const view = new DataView(buffer);
      while (offset + 4 < bytes.length) {
        const header = bytes[offset];
        const isLast = (header & 0x80) !== 0;
        const type = header & 0x7F;
        const length = (bytes[offset + 1] << 16) | (bytes[offset + 2] << 8) | bytes[offset + 3];
        offset += 4;
        if (type === 4 && offset + length <= bytes.length) { // VORBIS_COMMENT
          let p = offset;
          const vendorLen = view.getUint32(p, true); p += 4 + vendorLen;
          if (p + 4 <= offset + length) {
            const commentCount = view.getUint32(p, true); p += 4;
            const decoder = new TextDecoder('utf-8');
            for (let i = 0; i < commentCount && p + 4 <= offset + length; i++) {
              const cLen = view.getUint32(p, true); p += 4;
              if (p + cLen <= offset + length) {
                const commentStr = decoder.decode(bytes.subarray(p, p + cLen));
                p += cLen;
                const eqIdx = commentStr.indexOf('=');
                if (eqIdx > 0) {
                  const key = commentStr.slice(0, eqIdx).toUpperCase().replace(/[-_\s]/g, '');
                  const val = commentStr.slice(eqIdx + 1).trim();
                  if (key === 'TITLE' && !result.title) result.title = val;
                  else if ((key === 'ARTIST' || key === 'ALBUMARTIST' || key === 'PERFORMER' || key === 'AUTHOR') && !result.artist) result.artist = val;
                  else if (key === 'ALBUM' && !result.album) result.album = val;
                }
              }
            }
          }
          break;
        }
        offset += length;
        if (isLast) break;
      }
    }

    // 2. Check ID3v2: "ID3" (73, 68, 51)
    if (bytes.length > 10 && bytes[0] === 0x49 && bytes[1] === 0x44 && bytes[2] === 0x33) {
      const version = bytes[3];
      const tagSize = ((bytes[6] & 0x7F) << 21) | ((bytes[7] & 0x7F) << 14) | ((bytes[8] & 0x7F) << 7) | (bytes[9] & 0x7F);
      let offset = 10;
      const end = Math.min(bytes.length, 10 + tagSize);

      while (offset + 10 <= end) {
        let frameId = '';
        let frameSize = 0;

        if (version >= 3) {
          frameId = String.fromCharCode(bytes[offset], bytes[offset + 1], bytes[offset + 2], bytes[offset + 3]);
          if (version === 4) {
            frameSize = ((bytes[offset + 4] & 0x7F) << 21) | ((bytes[offset + 5] & 0x7F) << 14) | ((bytes[offset + 6] & 0x7F) << 7) | (bytes[offset + 7] & 0x7F);
          } else {
            frameSize = (bytes[offset + 4] << 24) | (bytes[offset + 5] << 16) | (bytes[offset + 6] << 8) | bytes[offset + 7];
          }
          offset += 10;
        } else if (version === 2) {
          frameId = String.fromCharCode(bytes[offset], bytes[offset + 1], bytes[offset + 2]);
          frameSize = (bytes[offset + 3] << 16) | (bytes[offset + 4] << 8) | bytes[offset + 5];
          offset += 6;
        }

        if (!frameId || frameId.charCodeAt(0) === 0 || frameSize <= 0 || offset + frameSize > end) break;

        if (frameId === 'TIT2' || frameId === 'TT2' || frameId === 'TPE1' || frameId === 'TP1' || frameId === 'TPE2' || frameId === 'TALB') {
          const encoding = bytes[offset];
          const frameData = bytes.subarray(offset + 1, offset + frameSize);
          let text = '';
          try {
            if (encoding === 1 || encoding === 2) {
              text = new TextDecoder('utf-16').decode(frameData);
            } else {
              text = new TextDecoder('utf-8').decode(frameData);
            }
            text = text.replace(/\0+$/, '').trim();
          } catch (_) {}

          if ((frameId === 'TIT2' || frameId === 'TT2') && !result.title) result.title = text;
          else if ((frameId === 'TPE1' || frameId === 'TP1') && !result.artist) result.artist = text;
          else if (frameId === 'TPE2' && !result.artist) result.artist = text;
          else if (frameId === 'TALB' && !result.album) result.album = text;
        }

        offset += frameSize;
      }
    }

    return result;
  };

  let badgeUpdateSeq = 0;
  window.updateAudioTrackBadge = async (audioElement, itemId, explicitSrc) => {
    if (!audioElement) return;
    const playerWrap = audioElement.closest('.album-gallery-container, .album-audio-wrapper, .v0ck, .embed-responsive') || audioElement.parentElement;
    if (!playerWrap) return;

    let badge = playerWrap.querySelector('.album-audio-wrapper .audio-track-info-badge, .sidebar-media-placeholder.audio > .audio-track-info-badge, .audio-track-info-badge');
    if (!badge) {
      const ph = playerWrap.querySelector('.album-audio-wrapper .sidebar-media-placeholder.audio, .sidebar-media-placeholder.audio') || playerWrap;
      ph.insertAdjacentHTML('afterbegin', `
        <div class="audio-track-info-badge">
          <div class="audio-track-info-details">
            <span class="audio-track-artist"></span>
            <span class="audio-track-title"></span>
          </div>
        </div>
      `);
      badge = playerWrap.querySelector('.audio-track-info-badge');
    }
    if (!badge) return;

    badge.classList.remove('is-playing');
    if (audioElement._badgePlayStateListener) {
      audioElement.removeEventListener('play', audioElement._badgePlayStateListener);
      audioElement.removeEventListener('pause', audioElement._badgePlayStateListener);
      audioElement.removeEventListener('ended', audioElement._badgePlayStateListener);
      audioElement._badgePlayStateListener = null;
    }

    const artistEl = badge.querySelector('.audio-track-artist');
    const titleEl = badge.querySelector('.audio-track-title');

    const src = explicitSrc ||
      (audioElement.getAttribute ? audioElement.getAttribute('src') : null) ||
      audioElement.src ||
      audioElement.currentSrc ||
      '';
    if (!src || src === window.location.href || src.endsWith('#')) {
      badge.classList.remove('is-visible');
      return;
    }

    const cleanFilename = src.split('?')[0].split('/').pop();
    const cacheKey = cleanFilename || `item_${itemId || ''}`;

    const thisReqId = ++badgeUpdateSeq;
    badge._lastReqId = thisReqId;

    let meta = audioMetaMemoryCache.get(cacheKey);

    const renderMeta = (m) => {
      if (badge._lastReqId !== thisReqId) return;
      if (!m || (!m.artist && !m.title)) {
        badge.classList.remove('is-visible');
        return;
      }
      if (artistEl) {
        artistEl.textContent = m.artist || '';
        artistEl.style.display = m.artist ? '' : 'none';
      }
      if (titleEl) {
        titleEl.textContent = m.title || '';
        titleEl.style.display = m.title ? '' : 'none';
      }
      const fullTooltip = `${m.artist ? m.artist + ' – ' : ''}${m.title || ''}${m.album ? ' (' + m.album + ')' : ''}`;
      badge.setAttribute('title', fullTooltip);
      badge.classList.add('is-visible');

      if ('mediaSession' in navigator && window.MediaMetadata) {
        try {
          navigator.mediaSession.metadata = new MediaMetadata({
            title: m.title || '',
            artist: m.artist || '',
            album: m.album || ''
          });
        } catch (_) {}
      }
    };

    if (meta) {
      renderMeta(meta);
      return;
    }

    // Immediately clear previous track text while fetching new track metadata
    if (artistEl) artistEl.textContent = '';
    if (titleEl) titleEl.textContent = '';
    badge.classList.remove('is-visible');

    // 1. Fetch from server endpoint /api/v2/audio-metadata (ffprobe format tags + DB fallback)
    try {
      const q = new URLSearchParams();
      if (cleanFilename) q.set('src', cleanFilename);
      if (itemId) q.set('id', itemId);
      const apiResp = await fetch(`/api/v2/audio-metadata?${q.toString()}`);
      if (badge._lastReqId !== thisReqId) return;
      if (apiResp.ok) {
        const data = await apiResp.json();
        if (badge._lastReqId !== thisReqId) return;
        if (data.success && (data.artist || data.title)) {
          meta = { artist: data.artist, title: data.title, album: data.album };
          audioMetaMemoryCache.set(cacheKey, meta);
          renderMeta(meta);
          return;
        }
      }
    } catch (_) {}

    // 2. Client-side range fetch fallback (first 64KB)
    try {
      if (badge._lastReqId !== thisReqId) return;
      const resp = await fetch(src, {
        headers: { Range: 'bytes=0-65535' }
      });
      if (badge._lastReqId !== thisReqId) return;
      if (resp.ok || resp.status === 206) {
        const buf = await resp.arrayBuffer();
        if (badge._lastReqId !== thisReqId) return;
        const parsed = parseAudioTagsFromBuffer(buf);
        if (parsed.artist || parsed.title) {
          meta = parsed;
          audioMetaMemoryCache.set(cacheKey, meta);
          renderMeta(meta);
          return;
        }
      }
    } catch (_) {}

    // 3. Fallback: parse from filename if "Artist - Title" pattern
    if (badge._lastReqId !== thisReqId) return;
    const rawName = decodeURIComponent(cleanFilename.replace(/\.[^/.]+$/, ''));
    const match = rawName.match(/^(.+?)\s*[-–—_]\s*(.+)$/);
    if (match && !rawName.startsWith('subf0ck')) {
      meta = {
        artist: match[1].replace(/^[0-9]+[\s._-]+/, '').trim(),
        title: match[2].trim(),
        album: ''
      };
      audioMetaMemoryCache.set(cacheKey, meta);
      renderMeta(meta);
    } else {
      badge.classList.remove('is-visible');
    }
  };

  window.initVisualizer = (targetAudio) => {
    let audioElement = targetAudio;
    if (!audioElement || !audioElement.isConnected) {
      if (document.body.classList.contains('onara-modal-open')) {
        const onaraMount = document.getElementById('onara-item-mount');
        if (onaraMount) {
          audioElement = onaraMount.querySelector('audio');
        }
      }
      if (!audioElement || !audioElement.isConnected) {
        const albumAudio = document.querySelector(".album-gallery-container.is-audio-active audio, #f0ck-album-audio-wrapper audio, audio#f0ck-album-audio");
        const standaloneAudio = document.querySelector("audio#my-video");
        const container = document.querySelector(".album-gallery-container");
        if (container && container.classList.contains('is-audio-active') && albumAudio) {
          audioElement = albumAudio;
        } else if (standaloneAudio && standaloneAudio.isConnected) {
          audioElement = standaloneAudio;
        } else {
          audioElement = albumAudio || standaloneAudio || document.querySelector("audio");
        }
      }
    }
    if (audioElement) {
      if (!audioElement.crossOrigin) {
        audioElement.crossOrigin = 'anonymous';
      }
      // Ensure Tuner UI is mounted
      initAudioTunerUI();
      if (window.updateAudioTrackBadge) {
        window.updateAudioTrackBadge(audioElement, null, audioElement.getAttribute('src') || audioElement.src);
      }

      // Cleanup existing visualizer
      if (visualizerRafId) { window.cancelAnimFrame(visualizerRafId); visualizerRafId = null; }
      document.querySelectorAll("canvas.audio-visualizer").forEach(c => c.remove());

      const canvas = document.createElement("canvas");
      canvas.className = "audio-visualizer";
      const ctx = canvas.getContext("2d");
      canvas.width = 1920;
      canvas.height = 1080;

      const attachCanvas = () => {
        const v0ckContainer = audioElement.closest('.v0ck, .album-audio-wrapper, .embed-responsive') || audioElement.parentElement;
        if (v0ckContainer && !v0ckContainer.contains(canvas)) {
          const controls = v0ckContainer.querySelector('.v0ck_player_controls');
          if (controls) {
            v0ckContainer.insertBefore(canvas, controls);
          } else {
            v0ckContainer.appendChild(canvas);
          }
        }
      };

      attachCanvas();
      setTimeout(attachCanvas, 50);
      setTimeout(attachCanvas, 250);
      setTimeout(attachCanvas, 600);

      if (!audioCtx) {
        audioCtx = new (window.AudioContext || window.webkitAudioContext)();
      }

      let source = audioElement._mediaElementSource;
      let analyser = audioElement._audioAnalyser;

      const setupAudioSource = () => {
        const currentSrc = audioElement.getAttribute('src') || audioElement.src || audioElement.currentSrc;
        if (!currentSrc || currentSrc === window.location.href || currentSrc.endsWith('#')) {
          return false;
        }
        if (!source) {
          try {
            source = audioCtx.createMediaElementSource(audioElement);
            audioElement._mediaElementSource = source;
          } catch (e) {
            console.warn("Visualizer Source creation failed:", e);
          }
        }
        if (source && analyser) {
          try {
            if (source._connectedAnalyser !== analyser) {
              source.connect(analyser);
              source._connectedAnalyser = analyser;
            }
            if (!source._connectedToDest) {
              source.connect(audioCtx.destination);
              source._connectedToDest = true;
            }
          } catch (e) {
            console.warn("Visualizer connect failed:", e);
          }
        }
        return !!source;
      };

      const cfgInit = window.audioVisualizerTuning || DEFAULT_AUDIO_TUNING;
      if (!analyser) {
        analyser = audioCtx.createAnalyser();
        analyser.fftSize = 2048;
        analyser.smoothingTimeConstant = Math.min(0.99, Math.max(0, cfgInit.smoothing !== undefined ? Number(cfgInit.smoothing) : 0.80));
        audioElement._audioAnalyser = analyser;
      } else {
        analyser.fftSize = 2048;
        analyser.smoothingTimeConstant = Math.min(0.99, Math.max(0, cfgInit.smoothing !== undefined ? Number(cfgInit.smoothing) : 0.80));
      }

      setupAudioSource();

      let audioCoverImg = null;
      const setupCoverImage = () => {
        const v0ckContainer = audioElement ? (audioElement.closest('.v0ck, .album-audio-wrapper, .embed-responsive') || audioElement.parentElement) : null;
        const currentCircle = v0ckContainer ? v0ckContainer.querySelector('.audio-cover-circle') : document.querySelector('.audio-cover-circle');
        const coverUrl = getAudioCoverUrl(currentCircle, audioElement);
        if (coverUrl) {
          audioCoverImg = new Image();
          audioCoverImg.crossOrigin = 'anonymous';
          audioCoverImg.src = coverUrl;
        } else {
          audioCoverImg = null;
        }
      };
      setupCoverImage();

      let data = new Uint8Array(analyser.frequencyBinCount);
      
      let noteIcon = null;
      let smoothScale = 1;
      let smoothGlow = 0;
      let currentBeatHue = 0;
      let targetBeatHue = 0;
      let lastBeatJumpTime = 0;
      
      const draw = (data) => {
        window._rafFrameId = (window._rafFrameId || 0) + 1;
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        const count = analyser.frequencyBinCount;
        const cfg = (typeof window.getEffectiveBackgroundTuning === 'function' ? window.getEffectiveBackgroundTuning() : null) || window.audioVisualizerTuning || DEFAULT_AUDIO_TUNING;

        if (!audioElement.paused && Number(cfg.enableBeatHue) === 1) {
          const now = performance.now();
          const threshold = cfg.beatHueThreshold !== undefined ? Number(cfg.beatHueThreshold) : 0.30;
          const stepAngle = cfg.beatHueStep !== undefined ? Math.max(1, Number(cfg.beatHueStep)) : 45;
          const idleDrift = cfg.beatHueIdleDrift !== undefined ? Number(cfg.beatHueIdleDrift) : 0.20;
          const cooldown = cfg.beatHueCooldown !== undefined ? Number(cfg.beatHueCooldown) : 150;
          const morphSmooth = cfg.beatHueSmooth !== undefined ? Math.min(0.98, Math.max(0, Number(cfg.beatHueSmooth))) : 0.65;

          let bMax = 0, bSum = 0;
          const kBins = Math.min(10, count);
          for (let b = 1; b <= kBins; b++) {
            const v = data[b] || 0;
            if (v > bMax) bMax = v;
            bSum += v;
          }
          const bPeak = bMax / 255;
          const bAvg = bSum / (kBins * 255);
          const kEnergy = Math.min(1, (bPeak * 0.75 + bAvg * 0.25) * (cfg.bassGain || 0.5));
          const pwr = Math.pow(kEnergy, (cfg.bassPower !== undefined ? cfg.bassPower : 0.3));

          // Continuous subtle ambient drift
          targetBeatHue = (targetBeatHue + idleDrift * 0.4) % 360;

          // Beat threshold & cooldown check
          if (pwr >= threshold && (now - lastBeatJumpTime) >= cooldown) {
            const excess = (pwr - threshold) / Math.max(0.1, 1 - threshold);
            const jump = stepAngle * (1 + excess * 0.35);
            targetBeatHue = (targetBeatHue + jump) % 360;
            lastBeatJumpTime = now;
          }

          // Interpolate currentBeatHue towards targetBeatHue
          if (morphSmooth <= 0.02) {
            currentBeatHue = targetBeatHue;
          } else {
            let diff = (targetBeatHue - currentBeatHue) % 360;
            if (diff < -180) diff += 360;
            if (diff > 180) diff -= 360;
            currentBeatHue = (currentBeatHue + diff * (1 - morphSmooth)) % 360;
            if (currentBeatHue < 0) currentBeatHue += 360;
          }
        }

        let accent = getComputedStyle(document.body).getPropertyValue("--accent")?.trim() || "#99ff00";
        if (Number(cfg.enableBeatHue) === 1) {
          accent = `hsl(${Math.round(currentBeatHue)}, 100%, 55%)`;
        } else if (Number(cfg.useCustomColor) === 1 && cfg.visualizerColor) {
          accent = cfg.visualizerColor;
        }
        const barMult = cfg.barHeight !== undefined ? cfg.barHeight : 0.40;
        const bWidth = Math.max(1, cfg.barWidth !== undefined ? cfg.barWidth : 4);
        const bGap = Math.max(0, cfg.barGap !== undefined ? cfg.barGap : 2);
        const bRadius = Math.max(0, cfg.barRadius !== undefined ? cfg.barRadius : 2);
        const bOpacity = Math.min(1, Math.max(0, cfg.barOpacity !== undefined ? Number(cfg.barOpacity) : 0.85));
        const bGlow = Math.max(0, cfg.barGlow !== undefined ? cfg.barGlow : 8);

        const feedToBg = Number(cfg.feedAudioToBg !== undefined ? cfg.feedAudioToBg : 1) === 1;
        const showBarsOnPlayer = cfg.enableBars !== undefined ? Number(cfg.enableBars) === 1 : true;
        const showBars = showBarsOnPlayer || feedToBg;
        canvas.style.opacity = showBarsOnPlayer ? '1' : '0';
        if (showBars) {
          const totalBarStep = bWidth + bGap;
          const numBars = Math.max(8, Math.floor((canvas.width + bGap) / totalBarStep));
          const totalUsedWidth = numBars * totalBarStep - bGap;
          const startX = Math.max(0, (canvas.width - totalUsedWidth) / 2);

          if (bGlow > 0) {
            ctx.shadowBlur = bGlow;
            ctx.shadowColor = accent;
          } else {
            ctx.shadowBlur = 0;
          }

          ctx.fillStyle = `color-mix(in srgb, ${accent} ${Math.round(bOpacity * 100)}%, transparent)`;

          for (let i = 0; i < numBars; i++) {
            const normIdx = i / numBars;
            const nextNormIdx = (i + 1) / numBars;
            const startBin = Math.floor(Math.pow(normIdx, 1.7) * (count * 0.78));
            const endBin = Math.min(count - 1, Math.max(startBin, Math.floor(Math.pow(nextNormIdx, 1.7) * (count * 0.78))));

            let valMax = 0;
            let valSum = 0;
            let valCount = 0;
            for (let b = startBin; b <= endBin; b++) {
              const v = data[b] || 0;
              if (v > valMax) valMax = v;
              valSum += v;
              valCount++;
            }
            const val = valCount > 0 ? (valMax * 0.7 + (valSum / valCount) * 0.3) : (data[startBin] || 0);

            if (val > 0) {
              const height = Math.max(3, canvas.height * (val / 255) * barMult);
              const x = startX + i * totalBarStep;
              const y = canvas.height - height;
              if (bRadius > 0 && typeof ctx.roundRect === 'function') {
                ctx.beginPath();
                ctx.roundRect(x, y, bWidth, height, [bRadius, bRadius, 0, 0]);
                ctx.fill();
              } else {
                ctx.fillRect(x, y, bWidth, height);
              }
            }
          }
          ctx.shadowBlur = 0;
        }

        if (cfg.smoothing !== undefined && analyser.smoothingTimeConstant !== cfg.smoothing) {
          analyser.smoothingTimeConstant = cfg.smoothing;
        }

        // Animate the music note and/or cover art circle to react dynamically to the music
        const v0ckContainer = audioElement.closest('.v0ck, .album-audio-wrapper, .embed-responsive') || audioElement.parentElement;
        let ph = v0ckContainer 
          ? v0ckContainer.querySelector(':scope > .sidebar-media-placeholder.audio, .sidebar-media-placeholder.audio') 
          : document.querySelector('.album-gallery-container.is-audio-active .sidebar-media-placeholder.audio, #onara-item-mount .sidebar-media-placeholder.audio, .item-view .sidebar-media-placeholder.audio, .v0ck .sidebar-media-placeholder.audio');
        if (ph && ph.closest('.thumb, .album-thumb-item, .item-preview, .sidebar-activity-item, .recent-comment-media, .recent-comment-item, .posts, .user-posts-container')) {
          ph = null;
        }
        if (!noteIcon || !noteIcon.isConnected) {
          noteIcon = ph ? ph.querySelector('i') : null;
        }
        const coverCircle = ph ? ph.querySelector('.audio-cover-circle') : null;
        let bgEl = ph ? ph.querySelector('.audio-reactive-bg') : null;
        if (ph && !bgEl) {
          bgEl = document.createElement('div');
          bgEl.className = 'audio-reactive-bg';
          ph.insertBefore(bgEl, ph.firstChild);
        }

        if (coverCircle) {
          if (cfg.coverSize) {
            coverCircle.style.width = cfg.coverSize + 'px';
            coverCircle.style.height = cfg.coverSize + 'px';
            if (noteIcon && coverCircle.contains(noteIcon)) {
              noteIcon.style.fontSize = Math.round(cfg.coverSize * 0.35) + 'px';
            }
          }
          const coverOp = cfg.coverOpacity !== undefined ? Math.min(1, Math.max(0, Number(cfg.coverOpacity))) : 1.0;
          const solidCol = cfg.coverColor || '#000000';
          const bgCol = coverOp <= 0.001 ? 'transparent' : (coverOp >= 0.999 ? solidCol : `color-mix(in srgb, ${solidCol} ${Math.round(coverOp * 100)}%, transparent)`);

          const showEye = cfg.showCoverInEye !== undefined
            ? Number(cfg.showCoverInEye) === 1
            : (cfg.showCoverArt !== undefined ? Number(cfg.showCoverArt) === 1 : Number(cfg.solidCover) === 0);
          const showBg = Number(cfg.showCoverInBg) === 1;

          let targetCoverUrl = null;
          if (coverCircle._origBgImage && coverCircle._origBgImage !== 'none') {
            targetCoverUrl = coverCircle._origBgImage;
          } else {
            const url = getAudioCoverUrl(coverCircle, audioElement);
            if (url) {
              targetCoverUrl = `url("${url}")`;
              coverCircle._origBgImage = targetCoverUrl;
            }
          }

          // Background Cover Art
          let backdrop = ph ? ph.querySelector('.audio-cover-backdrop') : null;
          if (showBg && targetCoverUrl) {
            if (ph && !backdrop) {
              backdrop = document.createElement('div');
              backdrop.className = 'audio-cover-backdrop';
              ph.insertBefore(backdrop, ph.firstChild);
            }
            if (backdrop) {
              if (backdrop.style.backgroundImage !== targetCoverUrl) {
                backdrop.style.backgroundImage = targetCoverUrl;
              }
              const bgOp = cfg.bgCoverOpacity !== undefined ? Math.min(1, Math.max(0, Number(cfg.bgCoverOpacity))) : 0.45;
              const bgBlur = cfg.bgCoverBlur !== undefined ? Math.max(0, Number(cfg.bgCoverBlur)) : 0;
              const bgScale = cfg.bgCoverScale !== undefined ? Number(cfg.bgCoverScale) : 100;
              const bgPosX = cfg.bgCoverPosX !== undefined ? Number(cfg.bgCoverPosX) : 50;
              const bgPosY = cfg.bgCoverPosY !== undefined ? Number(cfg.bgCoverPosY) : 50;

              backdrop.style.opacity = String(bgOp);
              backdrop.style.filter = bgBlur > 0 ? `blur(${bgBlur}px)` : 'none';
              backdrop.style.backgroundSize = bgScale === 100 ? 'cover' : `${bgScale}%`;
              backdrop.style.backgroundPosition = `${bgPosX}% ${bgPosY}%`;
              backdrop.style.display = 'block';
            }
          } else if (backdrop && backdrop.style.display !== 'none') {
            backdrop.style.backgroundImage = 'none';
            backdrop.style.opacity = '0';
            backdrop.style.display = 'none';
          }

          // Eye / Disc Cover Art
          const imgScale = cfg.coverImageScale !== undefined ? Number(cfg.coverImageScale) : 100;
          const imgPanX = cfg.coverImagePosX !== undefined ? Number(cfg.coverImagePosX) : 0;
          const imgPanY = cfg.coverImagePosY !== undefined ? Number(cfg.coverImagePosY) : 0;

          if (showEye && targetCoverUrl) {
            if (coverCircle.style.backgroundImage !== targetCoverUrl) {
              coverCircle.style.backgroundImage = targetCoverUrl;
            }
            coverCircle.style.backgroundColor = bgCol;
            coverCircle.style.backgroundSize = imgScale === 100 ? 'cover' : `${imgScale}%`;
            coverCircle.style.backgroundPosition = `calc(50% + ${imgPanX}%) calc(50% + ${imgPanY}%)`;
            if (ph && !ph.classList.contains('has-cover')) ph.classList.add('has-cover');
            if (noteIcon && noteIcon.style.display !== 'none') noteIcon.style.display = 'none';
          } else {
            if (coverCircle.style.backgroundImage && coverCircle.style.backgroundImage !== 'none' && !coverCircle._origBgImage) {
              coverCircle._origBgImage = coverCircle.style.backgroundImage;
            }
            if (coverCircle.style.backgroundImage !== 'none') {
              coverCircle.style.backgroundImage = 'none';
            }
            coverCircle.style.backgroundColor = bgCol;
            coverCircle.style.backgroundSize = 'cover';
            coverCircle.style.backgroundPosition = 'center';
            if (ph && !showBg && ph.classList.contains('has-cover')) ph.classList.remove('has-cover');
            if (noteIcon) {
              noteIcon.style.display = Number(cfg.innerHideNote) === 1 ? 'none' : '';
            }
          }

          let innerCanvas = coverCircle.querySelector('.audio-eye-inner-canvas');
          if (!innerCanvas) {
            innerCanvas = document.createElement('canvas');
            innerCanvas.className = 'audio-eye-inner-canvas';
            innerCanvas.width = 300;
            innerCanvas.height = 300;
            coverCircle.insertBefore(innerCanvas, coverCircle.firstChild);
          }

          // Outer shadow canvas — inside coverCircle (overflow:visible) so it extends beyond
          // the circle boundary without being clipped by ph's overflow:hidden
          if (!coverCircle.querySelector('.audio-void-outer-canvas')) {
            const outerVoidCanvas = document.createElement('canvas');
            outerVoidCanvas.className = 'audio-void-outer-canvas';
            outerVoidCanvas.style.cssText = 'position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:3;border-radius:0;display:none;';
            coverCircle.appendChild(outerVoidCanvas);
          }

          if (noteIcon) {
            noteIcon.style.display = Number(cfg.innerHideNote) === 1 ? 'none' : '';
          }
        }

        if (noteIcon || coverCircle) {
          if (!audioElement.paused) {
            if (audioCtx && audioCtx.state !== 'running') {
              audioCtx.resume().catch(() => {});
            }
            // Bass energy from kick/sub-bass bins (1 to 10): peak transient + body
            let bassMax = 0;
            let bassSum = 0;
            const bassBins = Math.min(10, count);
            for (let b = 1; b <= bassBins; b++) {
              const val = data[b];
              if (val > bassMax) bassMax = val;
              bassSum += val;
            }
            const bassPeak = bassMax / 255;
            const bassAvg = bassSum / (bassBins * 255);
            // Kick-driven punch: transient peak dominant for instant beat response
            const kickEnergy = Math.min(1, (bassPeak * 0.75 + bassAvg * 0.25) * (cfg.bassGain || 3.0));

            // Midrange melodic energy
            let midMax = 0;
            let midSum = 0;
            const midStart = 11;
            const midEnd = Math.min(32, count);
            for (let m = midStart; m < midEnd; m++) {
              const val = data[m];
              if (val > midMax) midMax = val;
              midSum += val;
            }
            const midEnergy = Math.min(1, ((midMax / 255) * 0.65 + (midSum / ((midEnd - midStart) * 255)) * 0.35) * 2.2);

            // High-frequency snap (snares, hi-hats, percs)
            let highMax = 0;
            const highStart = 33;
            const highEnd = Math.min(70, count);
            for (let h = highStart; h < highEnd; h++) {
              if (data[h] > highMax) highMax = data[h];
            }
            const highEnergy = Math.min(1, (highMax / 255) * 2.0);

            // Dynamic punch with power curve
            const punch = Math.pow(kickEnergy, (cfg.bassPower !== undefined ? cfg.bassPower : 1.5));
            const bounceMultiplier = cfg.bounceBoost !== undefined ? cfg.bounceBoost : 1.5;
            // Target scale jumps based on slider and bounce boost
            const targetScale = 1 + (punch * (cfg.scaleBounce !== undefined ? cfg.scaleBounce : 0.50) * bounceMultiplier) + (midEnergy * 0.05);
            // Normalized composite glow energy:
            // Combines strong kick/bass transient impact (70%) with melodic bloom (20%) and high sparkle (10%)
            const dynamism = cfg.glowDynamism !== undefined ? cfg.glowDynamism : 1.50;
            const glowSens = cfg.glowSensitivity !== undefined ? Number(cfg.glowSensitivity) : 1.0;
            const rawGlowEnergy = Math.min(1.0, (punch * 0.70 + midEnergy * 0.20 + highEnergy * 0.10) * glowSens);
            const targetGlowNorm = Math.pow(rawGlowEnergy, Math.max(0.4, dynamism));

            // Scale smoothing (instant snap & decay for speaker thump)
            const cfgAttack = cfg.attackSpeed !== undefined ? cfg.attackSpeed : 0.85;
            const cfgRelease = cfg.releaseSpeed !== undefined ? cfg.releaseSpeed : 0.16;
            const attackSpeed = targetScale > smoothScale ? cfgAttack : cfgRelease;
            smoothScale += (targetScale - smoothScale) * attackSpeed;

            // Dedicated glow smoothing (butter-smooth swell & organic dissipation)
            const smoothFactor = cfg.glowSmoothness !== undefined ? Number(cfg.glowSmoothness) : 0.70;
            const speedScale = Math.max(0.08, 1.0 - smoothFactor * 0.70);
            const glowAttack = (cfg.glowAttack !== undefined ? Number(cfg.glowAttack) : 0.85) * speedScale;
            const glowRelease = (cfg.glowDecay !== undefined ? Number(cfg.glowDecay) : (cfg.glowRelease !== undefined ? Number(cfg.glowRelease) : 0.35)) * speedScale;
            const glowSpeed = targetGlowNorm > smoothGlow ? glowAttack : glowRelease;
            smoothGlow += (targetGlowNorm - smoothGlow) * Math.min(1.0, Math.max(0.01, glowSpeed));

            // Rhythmic tilt based on balance
            const tilt = (midEnergy - kickEnergy * 0.6) * 18;

            if (noteIcon) {
              const notePct = Math.min(100, Math.round((0.55 + (smoothScale - 1) * 1.5) * 100));
              if (Number(cfg.enableBeatHue) === 1) {
                noteIcon.style.color = accent;
              }
              if (coverCircle && coverCircle.contains(noteIcon)) {
                // Note is inside the eye circle; inherits scale from circle, add tilt & glow
                noteIcon.style.transform = `rotate(${tilt.toFixed(2)}deg)`;
                noteIcon.style.filter = `drop-shadow(0 0 ${Math.round(12 + smoothGlow * 20)}px color-mix(in srgb, ${accent} ${notePct}%, transparent))`;
              } else {
                noteIcon.style.transform = `scale(${smoothScale.toFixed(3)}) rotate(${tilt.toFixed(2)}deg)`;
                noteIcon.style.filter = `drop-shadow(0 0 ${Math.round(14 + smoothGlow * 25)}px color-mix(in srgb, ${accent} ${notePct}%, transparent))`;
              }
            }

            if (coverCircle) {
              // HUD hide: when square tunnel is active and squareTunnelHideHUD=1, fade out cover circle
              const sqHideHUD = Number(cfg.enableSquareTunnel) === 1 && Number(cfg.squareTunnelHideHUD) === 1;
              if (sqHideHUD) {
                coverCircle.style.opacity = '0';
                coverCircle.style.pointerEvents = 'none';
                coverCircle.style.boxShadow = 'none'; // suppress accent glow bleedthrough
                if (noteIcon) { noteIcon.style.opacity = '0'; noteIcon.style.pointerEvents = 'none'; }
                // Hide any lingering trail ghosts
                if (coverCircle._ghosts) coverCircle._ghosts.forEach(g => { if (g) g.style.opacity = '0'; });
              } else {
                if (coverCircle.style.opacity === '0' && coverCircle._sqHiddenByTunnel) {
                  coverCircle.style.opacity = '';
                  coverCircle.style.pointerEvents = '';
                  coverCircle.style.boxShadow = ''; // restore dynamic glow
                }
                if (noteIcon && noteIcon.style.opacity === '0' && noteIcon._sqHiddenByTunnel) {
                  noteIcon.style.opacity = '';
                  noteIcon.style.pointerEvents = '';
                }
              }
              coverCircle._sqHiddenByTunnel = sqHideHUD;
              if (noteIcon) noteIcon._sqHiddenByTunnel = sqHideHUD;

              // ─── Square Corridor Tunnel (Infinity Zoom with Cover Art) ──────────
              const enableSqTunnel = Number(cfg.enableSquareTunnel !== undefined ? cfg.enableSquareTunnel : 0) === 1;
              let sqCanvas = ph ? ph.querySelector('.audio-sq-tunnel') : null;
              if (!enableSqTunnel) {
                if (sqCanvas) {
                  sqCanvas.getContext('2d').clearRect(0, 0, sqCanvas.width || 1, sqCanvas.height || 1);
                  sqCanvas.style.display = 'none';
                }
                if (ph) ph.style.background = ''; // restore CSS default
              } else {
                if (ph && !sqCanvas) {
                  sqCanvas = document.createElement('canvas');
                  sqCanvas.className = 'audio-sq-tunnel';
                  sqCanvas.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;display:block;';
                  ph.insertBefore(sqCanvas, ph.firstChild);
                }
                if (sqCanvas) {
                  sqCanvas.style.display = '';
                  const sqW = ph.offsetWidth;
                  const sqH = ph.offsetHeight;
                  if (sqCanvas.width !== sqW) sqCanvas.width = sqW;
                  if (sqCanvas.height !== sqH) sqCanvas.height = sqH;
                  const sc = sqCanvas.getContext('2d');
                  sc.clearRect(0, 0, sqW, sqH);

                  // Config
                  const sqSpeedBase = cfg.squareTunnelSpeed !== undefined ? Number(cfg.squareTunnelSpeed) : 0.4;
                  const sqReact    = cfg.squareTunnelReactivity !== undefined ? Number(cfg.squareTunnelReactivity) : 1.5;
                  const sqN        = Math.max(3, Math.min(20, cfg.squareTunnelLevels !== undefined ? Number(cfg.squareTunnelLevels) : 10));
                  const sqOpacity  = cfg.squareTunnelOpacity !== undefined ? Math.min(1, Math.max(0, Number(cfg.squareTunnelOpacity))) : 1.0;
                  const sqGridW    = cfg.squareTunnelGridWidth !== undefined ? Number(cfg.squareTunnelGridWidth) : 1.5;
                  const sqFillAlpha = cfg.squareTunnelWallFillAlpha !== undefined ? Math.max(0, Math.min(1, Number(cfg.squareTunnelWallFillAlpha))) : 1;
                  const sqFog      = cfg.squareTunnelFog !== undefined ? Math.max(0, Math.min(1, Number(cfg.squareTunnelFog))) : 0.75;
                  const sqGlow     = cfg.squareTunnelGlow !== undefined ? Number(cfg.squareTunnelGlow) : 12;
                  const sqWarpExp  = cfg.squareTunnelWarp !== undefined ? Number(cfg.squareTunnelWarp) : 2.0;
                  const sqUseAcc   = cfg.squareTunnelUseAccent !== undefined ? Number(cfg.squareTunnelUseAccent) === 1 : true;
                  const sqGridColor = sqUseAcc ? accent : (cfg.squareTunnelGridColor || '#ffffff');

                  // Phase & timing
                  const sqNow = performance.now();
                  if (!sqCanvas._t) sqCanvas._t = sqNow;
                  const sqDt = Math.min(0.1, (sqNow - sqCanvas._t) / 1000);
                  sqCanvas._t = sqNow;
                  // Camera advances along world Z; each integer unit = one cube room
                  sqCanvas._cameraZ = (sqCanvas._cameraZ || 0) + sqDt * (sqSpeedBase + kickEnergy * sqReact);
                  const sqCamZ = sqCanvas._cameraZ;

                  // Room geometry
                  const sqRoomScale   = cfg.squareTunnelRoomScale !== undefined ? Number(cfg.squareTunnelRoomScale) : 1.5;
                  const sqFocal       = Math.min(sqW, sqH) * (cfg.squareTunnelFOV !== undefined ? Number(cfg.squareTunnelFOV) : 0.55);

                  // Music reactivity
                  const sqReactScale  = cfg.squareTunnelReactScale  !== undefined ? Number(cfg.squareTunnelReactScale)  : 0.18;
                  const sqReactBright = cfg.squareTunnelReactBright !== undefined ? Number(cfg.squareTunnelReactBright) : 0.4;
                  const sqReactDrift  = cfg.squareTunnelReactDrift  !== undefined ? Number(cfg.squareTunnelReactDrift)  : 0.0;
                  const sqEffScale    = sqRoomScale + kickEnergy * sqReactScale;
                  const sqBrightMult  = 1.0 + kickEnergy * sqReactBright;

                  // Maze turn config
                  const sqMaze         = Number(cfg.squareTunnelMaze          !== undefined ? cfg.squareTunnelMaze          : 0)    === 1;
                  const sqTurnStrength = cfg.squareTunnelTurnStrength !== undefined ? Number(cfg.squareTunnelTurnStrength) : 0.5;
                  const sqTurnSmooth   = cfg.squareTunnelTurnSpeed    !== undefined ? Number(cfg.squareTunnelTurnSpeed)    : 0.12;
                  const sqDriftFreq    = cfg.squareTunnelDriftFreq    !== undefined ? Math.max(0.1, Number(cfg.squareTunnelDriftFreq)) : 1.0;
                  const sqBackdropBrightness = cfg.squareTunnelBackdropBrightness !== undefined ? Number(cfg.squareTunnelBackdropBrightness) : 0.55;
                  const sqStraightBias = cfg.squareTunnelStraightBias !== undefined ? Number(cfg.squareTunnelStraightBias) : 0.35;

                  // Wall appearance
                  const sqWallMode  = cfg.squareTunnelWallMode  !== undefined ? Math.round(Number(cfg.squareTunnelWallMode))  : 0;
                  const sqWallC1    = cfg.squareTunnelWallColor  || '#1a1a2e';
                  const sqWallC2    = cfg.squareTunnelWallColor2 || '#000000';
                  const sqBackdropColor = cfg.squareTunnelBackdropColor || '#000000';
                  const sqPatScale  = Math.max(8, Math.round(Number(cfg.squareTunnelPatternScale !== undefined ? cfg.squareTunnelPatternScale : 40)));
                  const sqPatTileAlpha = cfg.squareTunnelPatTileAlpha !== undefined ? Math.max(0, Math.min(1, Number(cfg.squareTunnelPatTileAlpha))) : 1;

                  // Build / cache wall pattern (modes 2-4). Invalidate on any param change.
                  const patKey = `${sqWallMode}|${sqWallC1}|${sqWallC2}|${sqPatScale}`;
                  if (sqWallMode >= 2 && sqCanvas._wallPatKey !== patKey) {
                    sqCanvas._wallPatKey = patKey;
                    const ps = sqPatScale;
                    const pc = document.createElement('canvas');
                    pc.width  = ps * 2;
                    pc.height = ps * 2;
                    const px  = pc.getContext('2d');
                    px.fillStyle = sqWallC1;
                    px.fillRect(0, 0, ps * 2, ps * 2);
                    px.fillStyle = sqWallC2;
                    if (sqWallMode === 2) {                     // Checkerboard
                      px.fillRect(0,  0,  ps, ps);
                      px.fillRect(ps, ps, ps, ps);
                    } else if (sqWallMode === 3) {              // Vertical stripes
                      px.fillRect(0, 0, ps, ps * 2);
                    } else if (sqWallMode === 4) {              // 45° diagonal stripes
                      px.beginPath();
                      px.moveTo(0, 0);  px.lineTo(ps, 0);  px.lineTo(0, ps);  px.closePath();  px.fill();
                      px.beginPath();
                      px.moveTo(ps, ps * 2); px.lineTo(ps * 2, ps); px.lineTo(ps * 2, ps * 2); px.closePath(); px.fill();
                    }
                    sqCanvas._wallPattern = sc.createPattern(pc, 'repeat');
                  } else if (sqWallMode < 2) {
                    sqCanvas._wallPattern = null;
                  }
                  const sqWallPattern = sqCanvas._wallPattern || null;

                  // Resolve the wall fill for a given context (returns style string or pattern)
                  const sqWallFill = () => {
                    if (sqWallMode === 0) return null; // cover art handled separately
                    if (sqWallMode === 1) return sqWallC1;
                    return sqWallPattern || sqWallC1;
                  };

                  // Cover art image: try coverCircle background-image, then ph img tags
                  let sqImg = sqCanvas._sqImg;
                  let sqImgSrc = '';
                  if (coverCircle) {
                    const bi = coverCircle.style.backgroundImage || coverCircle._origBgImage || '';
                    const bm = bi.match(/url\(["']?([^"')]+)["']?\)/);
                    if (bm) sqImgSrc = bm[1];
                  }
                  if (!sqImgSrc) {
                    sqImgSrc = getAudioCoverUrl(coverCircle, audioElement) || '';
                  }
                  if (sqImgSrc && sqCanvas._sqImgSrc !== sqImgSrc) {
                    const ni = new Image();
                    ni.crossOrigin = 'anonymous';
                    ni.src = sqImgSrc;
                    sqCanvas._sqImg = ni;
                    sqCanvas._sqImgSrc = sqImgSrc;
                    sqImg = ni;
                  }
                  const imgOk = sqImg && sqImg.complete && sqImg.naturalWidth > 0;

                  const cx = sqW / 2, cy = sqH / 2;
                  const projH = (depth) => sqFocal * sqEffScale / Math.max(0.001, depth);
                  const sqCurRoom  = Math.floor(sqCamZ);
                  const sqFrac     = sqCamZ - sqCurRoom;
                  const sqMaxHalf  = Math.max(sqW, sqH) * 2.5;

                  // ── Spirit Drift: continuous noise-driven vanishing-point wander ──────────
                  // Instead of per-room binary turn/straight decisions the VP glides along
                  // two independent sine waves at irrational frequency ratios (so the pattern
                  // never repeats) layered over a slow random-walk bias. Result: organic,
                  // unpredictable motion that feels like a spirit drifting through space.
                  if (!sqCanvas._drift) {
                    sqCanvas._drift = {
                      t: Math.random() * 1000,   // global time (seconds)
                      bx: 0, by: 0,              // slow random-walk bias
                      bvx: 0, bvy: 0,            // bias velocity
                      lastBeat: 0,               // last beat kick time
                    };
                  }
                  const drift = sqCanvas._drift;
                  const dt = 1 / 60; // assume ~60fps; visual-only so exact value unimportant
                  drift.t += dt;

                  if (sqMaze) {
                    // --- Slow random-walk bias (drifts gradually in a random direction) ---
                    // Occasionally nudge the bias velocity
                    if (Math.random() < 0.004) {  // ~once every 4 seconds at 60fps
                      drift.bvx += (Math.random() - 0.5) * 0.6;
                      drift.bvy += (Math.random() - 0.5) * 0.6;
                    }
                    // Drag the bias velocity toward zero so it doesn't diverge
                    drift.bvx *= 0.985;
                    drift.bvy *= 0.985;
                    // Integrate bias position, clamped so it doesn't dominate
                    drift.bx = Math.max(-1, Math.min(1, drift.bx + drift.bvx * dt));
                    drift.by = Math.max(-1, Math.min(1, drift.by + drift.bvy * dt));

                    // --- Two-layer sine noise (incommensurable periods → never repeats) ---
                    // Layer A: slow wide sweep — base period ~18s/23s scaled by sqDriftFreq
                    const wA = sqDriftFreq / 18, hA = sqDriftFreq / 23;
                    const sinAxRaw = Math.sin(drift.t * wA * Math.PI * 2);
                    const sinAyRaw = Math.sin(drift.t * hA * Math.PI * 2);
                    // Layer B: faster subtle wobble (period ~7s x, ~11s y)
                    const wB = sqDriftFreq / 7,  hB = sqDriftFreq / 11;
                    const sinBxRaw = Math.sin(drift.t * wB * Math.PI * 2) * 0.35;
                    const sinByRaw = Math.sin(drift.t * hB * Math.PI * 2) * 0.35;
                    // Combine layers + bias, keep in [-1, 1]
                    const noiseX = Math.max(-1, Math.min(1, sinAxRaw + sinBxRaw + drift.bx * 0.4));
                    const noiseY = Math.max(-1, Math.min(1, sinAyRaw + sinByRaw + drift.by * 0.4));

                    // Beat impulse: edge-detect kick spikes and inject a directional lurch into
                    // the random-walk so each bass hit pushes the drift in its current direction.
                    const prevKick = drift.prevKick || 0;
                    const kickRise = kickEnergy - prevKick;
                    if (kickRise > 0.28 && kickEnergy > 0.45) {
                      // Push bias in the current noise direction — gives a sharp spatial "lurch"
                      drift.bvx += noiseX * kickRise * sqReactDrift * 2.2;
                      drift.bvy += noiseY * kickRise * sqReactDrift * 2.2;
                    }
                    drift.prevKick = kickEnergy;

                    // VP target: drift noise (beat impulse above already baked into bx/by)
                    const sqTurnPx = sqTurnStrength * Math.min(sqW, sqH) * 0.38;
                    const tVpX = noiseX * sqTurnPx;
                    const tVpY = noiseY * sqTurnPx;

                    // Store previous VP for velocity/banking calculation
                    sqCanvas._prevVpX = sqCanvas._vpX || 0;
                    sqCanvas._prevVpY = sqCanvas._vpY || 0;

                    // Smooth lerp toward target (sqTurnSmooth controls how fast we track)
                    sqCanvas._vpX = ((sqCanvas._vpX || 0)) * (1 - sqTurnSmooth) + tVpX * sqTurnSmooth;
                    sqCanvas._vpY = ((sqCanvas._vpY || 0)) * (1 - sqTurnSmooth) + tVpY * sqTurnSmooth;
                  } else {
                    // Maze off: drift VP slowly back to centre
                    sqCanvas._vpX = ((sqCanvas._vpX || 0)) * 0.95;
                    sqCanvas._vpY = ((sqCanvas._vpY || 0)) * 0.95;
                    sqCanvas._drift = null; // reset so next enable gets a fresh seed
                  }

                  const sqVpX = sqCanvas._vpX || 0;
                  const sqVpY = sqCanvas._vpY || 0;
                  const turnDepth = Math.max(1, sqN * 0.55);

                  // Backdrop fill: opacity tracks sqOpacity so the whole tunnel (backdrop +
                  // walls + grid) fades as one when the Opacity slider is used.
                  // sqFillAlpha (Inner Corridor Darkness) controls room wall faces only.
                  sc.globalAlpha = sqOpacity;
                  sc.fillStyle = sqBackdropColor;
                  sc.fillRect(0, 0, sqW, sqH);
                  sc.globalAlpha = 1;



                  // Draw rooms far→near (painter's algorithm)
                  for (let ri = sqN; ri >= 0; ri--) {
                    const roomIdx = sqCurRoom + ri;
                    const dBack   = (roomIdx + 1) - sqCamZ;
                    const dFront  = roomIdx - sqCamZ;

                    if (dBack <= 0.001) continue;

                    const hBack  = Math.min(projH(dBack), sqMaxHalf);
                    const hFront = dFront > 0.001 ? Math.min(projH(dFront), sqMaxHalf) : sqMaxHalf;

                    // Depth weights: 0 = camera position (no offset), 1 = full VP offset
                    const wBack  = Math.min(1, dBack  / turnDepth);
                    const wFront = dFront > 0.001 ? Math.min(1, dFront / turnDepth) : 0;

                    // Per-room screen centers for back wall and front opening
                    const bvx = cx + sqVpX * wBack;
                    const bvy = cy + sqVpY * wBack;
                    const fvx = cx + sqVpX * wFront;
                    const fvy = cy + sqVpY * wFront;

                    const fogMult = 1.0 - sqFog * Math.min(1.0, dBack / (sqN + 1));
                    const wallA   = Math.min(1, sqOpacity * fogMult * sqBrightMult);

                    // Back wall: solid dark for pattern modes (pattern lives on corridor walls, not end-cap)
                    if (hBack > 0.5) {
                      sc.save();
                      if (sqWallMode >= 2) {
                        sc.globalAlpha = wallA * 0.9 * sqFillAlpha;
                        sc.fillStyle = sqWallC2;
                        sc.fillRect(bvx - hBack, bvy - hBack, 2 * hBack, 2 * hBack);
                      } else if (sqWallMode === 1) {
                        sc.globalAlpha = wallA * 0.9 * sqFillAlpha;
                        sc.fillStyle = sqWallC1;
                        sc.fillRect(bvx - hBack, bvy - hBack, 2 * hBack, 2 * hBack);
                      } else if (imgOk) {
                        sc.globalAlpha = wallA * 0.9 * sqFillAlpha;
                        sc.drawImage(sqImg, bvx - hBack, bvy - hBack, 2 * hBack, 2 * hBack);
                      } else {
                        sc.globalAlpha = wallA * 0.9 * sqFillAlpha;
                        sc.fillStyle = '#0a0a0a';
                        sc.fillRect(bvx - hBack, bvy - hBack, 2 * hBack, 2 * hBack);
                      }
                      sc.restore();
                    }

                    // Wall ring: draw the annular region between the front opening and the back wall
                    // using the evenodd fill rule. Outer path (CW) = front square,
                    // inner path (CCW) = back square → punches a hole, leaving only the wall area.
                    // This eliminates black-triangle artifacts that occur when shifted centers
                    // cause trapezoid quads to self-intersect.
                    if (hBack > 0.5 && hFront > hBack) {
                      const s0 = hBack, s1 = hFront;

                      if (sqWallMode >= 2) {
                        // PERSPECTIVE-CORRECT wall pattern rendering.
                        // Each depth band covers equal PHYSICAL depth (physTile world-units).
                        // Screen positions are computed via the projection formula so bands
                        // compress correctly toward the vanishing point (true 1/z foreshortening).
                        // The x tile boundaries also scale with depth, converging to the VP.
                        const focalEff = sqFocal * sqEffScale;
                        const physTile = sqPatScale / focalEff; // physical tile size
                        const d0 = Math.max(dFront, 0.001);
                        const d1 = dBack;
                        // Number of tile columns across the full corridor width
                        const numAcross = Math.min(28, Math.max(2,
                          Math.round(2 * sqEffScale * focalEff / sqPatScale)));
                        const firstID = Math.floor(d0 / physTile);
                        const lastID  = Math.ceil(d1  / physTile);

                        // 4 faces: [axis (0=h, 1=v), sign (-1=top/left, +1=bottom/right)]
                        for (const [axis, sign] of [[0,-1],[0,1],[1,-1],[1,1]]) {
                          sc.save();
                          // Clip to face trapezoid
                          sc.beginPath();
                          if (axis === 0) { // top / bottom
                            sc.moveTo(fvx - s1, fvy + sign * s1);
                            sc.lineTo(fvx + s1, fvy + sign * s1);
                            sc.lineTo(bvx + s0, bvy + sign * s0);
                            sc.lineTo(bvx - s0, bvy + sign * s0);
                          } else { // left / right
                            sc.moveTo(fvx + sign * s1, fvy - s1);
                            sc.lineTo(fvx + sign * s1, fvy + s1);
                            sc.lineTo(bvx + sign * s0, bvy + s0);
                            sc.lineTo(bvx + sign * s0, bvy - s0);
                          }
                          sc.closePath();
                          sc.clip();
                          // Base fill with C1 at wall opacity × fill alpha
                          sc.globalAlpha = wallA * sqFillAlpha;
                          sc.fillStyle = sqWallC1;
                          sc.fillRect(0, 0, sqW, sqH);
                          // C2 tiles drawn at wallA × sqPatTileAlpha
                          sc.globalAlpha = wallA * sqPatTileAlpha;
                          sc.fillStyle = sqWallC2;
                          // Draw depth strips
                          for (let id = firstID; id <= lastID; id++) {
                            const da = Math.max(id * physTile, d0);
                            const db = Math.min((id + 1) * physTile, d1);
                            if (da >= db) continue;
                            const ha = Math.min(focalEff / da, s1 * 2);
                            const hb = Math.min(focalEff / db, s1 * 2);
                            const ta = (da - d0) / (d1 - d0);
                            const tb = (db - d0) / (d1 - d0);
                            // VP position at each depth (linear interp between front and back VP)
                            const vpxa = fvx + (bvx - fvx) * ta;
                            const vpya = fvy + (bvy - fvy) * ta;
                            const vpxb = fvx + (bvx - fvx) * tb;
                            const vpyb = fvy + (bvy - fvy) * tb;
                            for (let ia = 0; ia < numAcross; ia++) {
                              // Decide whether this cell is C2
                              const drawC2 = sqWallMode === 2
                                ? (id + ia) % 2 === 1          // checkerboard
                                : sqWallMode === 3
                                  ? ia % 2 === 1               // width stripes
                                  : id % 2 === 1;              // depth stripes
                              if (!drawC2) continue;
                              const fa = ia / numAcross, fb = (ia + 1) / numAcross;
                              let x0a, y0a, x1a, y1a, x0b, y0b, x1b, y1b;
                              if (axis === 0) {
                                // Horizontal face: face plane at y = vpy + sign*h
                                y0a = y1a = vpya + sign * ha;
                                y0b = y1b = vpyb + sign * hb;
                                x0a = vpxa + (2 * fa - 1) * ha;
                                x1a = vpxa + (2 * fb - 1) * ha;
                                x0b = vpxb + (2 * fa - 1) * hb;
                                x1b = vpxb + (2 * fb - 1) * hb;
                              } else {
                                // Vertical face: face plane at x = vpx + sign*h
                                x0a = x1a = vpxa + sign * ha;
                                x0b = x1b = vpxb + sign * hb;
                                y0a = vpya + (2 * fa - 1) * ha;
                                y1a = vpya + (2 * fb - 1) * ha;
                                y0b = vpyb + (2 * fa - 1) * hb;
                                y1b = vpyb + (2 * fb - 1) * hb;
                              }
                              sc.beginPath();
                              sc.moveTo(x0a, y0a);
                              sc.lineTo(x1a, y1a);
                              sc.lineTo(x1b, y1b);
                              sc.lineTo(x0b, y0b);
                              sc.closePath();
                              sc.fill();
                            }
                          }
                          sc.restore();
                        }
                      } else {
                        // Solid / cover art: fast evenodd ring (no per-face work needed)
                        sc.save();
                        sc.globalAlpha = wallA * sqFillAlpha;
                        sc.beginPath();
                        sc.moveTo(fvx - s1, fvy - s1);
                        sc.lineTo(fvx + s1, fvy - s1);
                        sc.lineTo(fvx + s1, fvy + s1);
                        sc.lineTo(fvx - s1, fvy + s1);
                        sc.closePath();
                        sc.moveTo(bvx - s0, bvy - s0);
                        sc.lineTo(bvx - s0, bvy + s0);
                        sc.lineTo(bvx + s0, bvy + s0);
                        sc.lineTo(bvx + s0, bvy - s0);
                        sc.closePath();
                        sc.clip('evenodd');
                        if (sqWallMode === 1) {
                          sc.fillStyle = sqWallC1;
                          sc.fillRect(0, 0, sqW, sqH);
                        } else if (imgOk) {
                          sc.drawImage(sqImg, fvx - s1, fvy - s1, 2 * s1, 2 * s1);
                        } else {
                          sc.fillStyle = '#111';
                          sc.fillRect(0, 0, sqW, sqH);
                        }
                        sc.restore();
                      }
                    }

                    // Grid frame on back wall
                    if (sqGridW > 0 && hBack > 0.5) {
                      sc.save();
                      sc.strokeStyle = sqGridColor;
                      sc.lineWidth   = sqGridW;
                      if (sqGlow > 0) { sc.shadowBlur = sqGlow; sc.shadowColor = sqGridColor; }
                      sc.globalAlpha = Math.min(1, wallA);
                      sc.beginPath();
                      sc.rect(bvx - hBack, bvy - hBack, 2 * hBack, 2 * hBack);
                      sc.stroke();
                      sc.shadowBlur = 0;
                      sc.restore();
                    }
                  }
                  sc.globalAlpha = 1.0;
                }
              }
              if (!sqHideHUD) {
              coverCircle._visualizerDriving = true;
              const circleScale = smoothScale;
              const baseGlow = cfg.coverGlowBase !== undefined ? cfg.coverGlowBase : 35;
              const glowReach = cfg.glowIntensity !== undefined ? cfg.glowIntensity : 250;
              const glowMult = cfg.glowBrightness !== undefined ? cfg.glowBrightness : 1.0;

              // Dynamic glow spread: smoothGlow expands outward from resting base to dynamic reach
              const dynSpread = smoothGlow * glowReach;
              const glow1 = Math.round(baseGlow * 0.20 + dynSpread * 0.18);
              const glow2 = Math.round(baseGlow * 0.50 + dynSpread * 0.50);
              const glow3 = Math.round(baseGlow * 1.00 + dynSpread * 0.95);
              const glow4 = Math.round(baseGlow * 1.60 + dynSpread * 1.55);

              // Continuous breathing opacities with high dynamic contrast
              const bMult = Math.min(1.4, Math.max(0.2, glowMult * 0.35));
              const pct1 = Math.min(100, Math.max(0, Math.round((0.36 + smoothGlow * 0.64) * bMult * 100)));
              const pct2 = Math.min(100, Math.max(0, Math.round((0.22 + smoothGlow * 0.72) * bMult * 100)));
              const pct3 = Math.min(100, Math.max(0, Math.round((0.10 + smoothGlow * 0.68) * bMult * 100)));
              const pct4 = Math.min(100, Math.max(0, Math.round((0.03 + smoothGlow * 0.55) * bMult * 100)));
              const ringOp = cfg.outerRingOpacity !== undefined ? Math.min(1, Math.max(0, Number(cfg.outerRingOpacity))) : 1.0;
              const borderPct = Math.min(100, Math.max(0, Math.round((0.35 + smoothGlow * 0.65) * 100 * ringOp)));

              const curEyeX = coverCircle._eyeX || 0;
              const curEyeY = coverCircle._eyeY || 0;
              // Spirit drift: shift eye with the tunnel camera VP so they move as one
              const driftOffX = (sqCanvas && sqCanvas._vpX) ? sqCanvas._vpX * 0.5 : 0;
              const driftOffY = (sqCanvas && sqCanvas._vpY) ? sqCanvas._vpY * 0.5 : 0;

              // ── Flying feel ──────────────────────────────────────────────────────────
              // 1. Bank: tilt into horizontal turns using VP velocity (rate of change per frame)
              const vpVelX    = (sqCanvas ? ((sqCanvas._vpX || 0) - (sqCanvas._prevVpX || 0)) : 0);
              const bankDeg   = Math.max(-18, Math.min(18, vpVelX * 0.55));
              // 2. Bob: slow sinusoidal vertical drift independent of the main wander
              const drift2    = sqCanvas && sqCanvas._drift;
              const bobY      = drift2 ? Math.sin(drift2.t * 0.97 * Math.PI * 2) * 4.5 : 0;
              // 3. Kick lunge: quick scale burst that decays each frame (stored on coverCircle)
              if (!coverCircle._kickLunge) coverCircle._kickLunge = 0;
              coverCircle._kickLunge += kickEnergy * 0.18;         // spike on beat
              coverCircle._kickLunge *= 0.78;                      // fast decay
              const lungeBurst = Math.min(0.12, coverCircle._kickLunge);

              const offX = Number(cfg.coverPosX || 0);
              const offY = Number(cfg.coverPosY || 0);
              const curX = (curEyeX + driftOffX + offX).toFixed(1);
              const curY = (curEyeY + driftOffY + bobY + offY).toFixed(1);
              const curTiltX = (coverCircle._eyeTiltX || 0).toFixed(1);
              const curTiltY = (coverCircle._eyeTiltY || 0).toFixed(1);
              const eyeFov  = Math.round(cfg.eyeFOV  !== undefined ? cfg.eyeFOV  : 600);
              const eyeZPos = cfg.eyeZPos !== undefined ? Number(cfg.eyeZPos) : 0;
              const eyeTransform = `translate(calc(-50% + ${curX}px), calc(-50% + ${curY}px)) perspective(${eyeFov}px) translateZ(${eyeZPos}px) rotateX(${curTiltX}deg) rotateY(${curTiltY}deg) rotateZ(${bankDeg.toFixed(2)}deg) scale(${(circleScale + lungeBurst).toFixed(3)})`;
              coverCircle.style.transform = eyeTransform;

              // Ensure no cover art is projected into the surrounding glow/halo
              if (coverCircle._ghosts && coverCircle._ghosts.length) {
                coverCircle._ghosts.forEach(g => { if (g) g.remove(); });
                coverCircle._ghosts = [];
              }
              if (ph) {
                const oldGhosts = ph.querySelectorAll('.eye-trail-ghost');
                if (oldGhosts.length) oldGhosts.forEach(g => g.remove());
              }

              const eyeNoGlow   = Number(cfg.eyeDisableGlow   !== undefined ? cfg.eyeDisableGlow   : 0) === 1;
              const eyeNoShadow = Number(cfg.eyeDisableShadow !== undefined ? cfg.eyeDisableShadow : 0) === 1;
              if (!coverCircle._sqHiddenByTunnel) {
                if (eyeNoShadow) {
                  coverCircle.style.boxShadow = 'none';
                } else if (glowMult <= 0 || eyeNoGlow) {
                  coverCircle.style.boxShadow = `0 14px 45px rgba(0, 0, 0, 0.9)`;
                } else {
                  coverCircle.style.boxShadow = `0 14px 45px rgba(0, 0, 0, 0.9), 0 0 ${glow1}px color-mix(in srgb, ${accent} ${pct1}%, transparent), 0 0 ${glow2}px color-mix(in srgb, ${accent} ${pct2}%, transparent), 0 0 ${glow3}px color-mix(in srgb, ${accent} ${pct3}%, transparent), 0 0 ${glow4}px color-mix(in srgb, ${accent} ${pct4}%, transparent)`;
                }
              }
              if (ringOp <= 0.001) {
                coverCircle.style.borderColor = 'transparent';
              } else {
                coverCircle.style.borderColor = `color-mix(in srgb, ${accent} ${borderPct}%, transparent)`;
              }

              // Dynamic Background Gradient Layer Rendering
              if (bgEl) {
                const enableBg = Number(cfg.enableBgGradient !== undefined ? cfg.enableBgGradient : 1) === 1;
                if (!enableBg || audioElement.paused) {
                  bgEl.style.opacity = '0';
                } else {
                  const baseOp = cfg.bgGradientOpacity !== undefined ? Number(cfg.bgGradientOpacity) : 0.40;
                  const reactMult = cfg.bgGradientReactivity !== undefined ? Number(cfg.bgGradientReactivity) : 1.20;
                  const spreadPct = cfg.bgGradientSpread !== undefined ? Number(cfg.bgGradientSpread) : 75;
                  const styleMode = cfg.bgGradientStyle !== undefined ? Number(cfg.bgGradientStyle) : 1;
                  const bgCol = (Number(cfg.useCustomBgColor) === 1 && cfg.bgGradientColor) ? cfg.bgGradientColor : accent;

                  const pulse = Math.min(1.0, (smoothGlow * 0.70 + kickEnergy * 0.30) * reactMult);
                  const dynamicOp = Math.min(1.0, Math.max(0.0, baseOp + pulse * (1.0 - baseOp * 0.4)));
                  bgEl.style.opacity = dynamicOp.toFixed(3);

                  const offX = Number(cfg.coverPosX || 0);
                  const offY = Number(cfg.coverPosY || 0);
                  const cX = (coverCircle && coverCircle._eyeX ? Number(coverCircle._eyeX) : 0) + offX;
                  const cY = (coverCircle && coverCircle._eyeY ? Number(coverCircle._eyeY) : 0) + offY;
                  // Spirit drift: shift gradient focal point with the tunnel VP
                  const bgDriftX = (sqCanvas && sqCanvas._vpX) ? sqCanvas._vpX * 0.5 : 0;
                  const bgDriftY = (sqCanvas && sqCanvas._vpY) ? sqCanvas._vpY * 0.5 : 0;
                  const focalX = `calc(50% + ${(cX * 0.5 + bgDriftX).toFixed(1)}px)`;
                  const focalY = `calc(50% + ${(cY * 0.5 + bgDriftY).toFixed(1)}px)`;
                  const dynamicSpread = Math.round(spreadPct * (1.0 + pulse * 0.45));

                  if (styleMode === 1) {
                    // Style 1: Radial Beat Aura (breathing spherical bloom from behind disc)
                    const corePct = Math.min(100, Math.round(25 + pulse * 45));
                    const midPct = Math.min(100, Math.round(10 + pulse * 30));
                    bgEl.style.background = `radial-gradient(circle at ${focalX} ${focalY}, color-mix(in srgb, ${bgCol} ${corePct}%, transparent) 0%, color-mix(in srgb, ${bgCol} ${midPct}%, transparent) ${Math.round(dynamicSpread * 0.5)}%, transparent ${dynamicSpread}%)`;
                  } else if (styleMode === 2) {
                    // Style 2: Dual Atmospheric Fog (cosmic corners with reactive dark center)
                    const edgePct = Math.min(100, Math.round(15 + pulse * 50));
                    bgEl.style.background = `radial-gradient(ellipse at 50% 120%, color-mix(in srgb, ${bgCol} ${edgePct}%, transparent) 0%, transparent 65%), radial-gradient(ellipse at 50% -20%, color-mix(in srgb, ${bgCol} ${Math.round(edgePct * 0.7)}%, transparent) 0%, transparent 60%)`;
                  } else if (styleMode === 3) {
                    // Style 3: Conic Sweep / Stargate Vortex
                    const rotAngle = Math.round(((performance.now() * 0.04) % 360));
                    const corePct = Math.min(100, Math.round(18 + pulse * 42));
                    bgEl.style.background = `conic-gradient(from ${rotAngle}deg at ${focalX} ${focalY}, transparent 0deg, color-mix(in srgb, ${bgCol} ${corePct}%, transparent) 90deg, transparent 180deg, color-mix(in srgb, ${bgCol} ${corePct}%, transparent) 270deg, transparent 360deg)`;
                  } else if (styleMode === 4) {
                    // Style 4: Horizontal Horizon Flare (cinematic anamorphic flare beam)
                    const beamHeight = Math.max(8, Math.round(18 + pulse * 35));
                    const beamPct = Math.min(100, Math.round(25 + pulse * 55));
                    bgEl.style.background = `radial-gradient(ellipse 90% ${beamHeight}% at ${focalX} ${focalY}, color-mix(in srgb, ${bgCol} ${beamPct}%, transparent) 0%, color-mix(in srgb, ${bgCol} ${Math.round(beamPct * 0.35)}%, transparent) 55%, transparent 85%)`;
                  }
                }
              }

              // Inner Eye Visualizer Rendering
              const innerCanvas = coverCircle.querySelector('.audio-eye-inner-canvas');
              if (innerCanvas) {
                const rMax = Math.max(30, Math.min(800, cfg.innerRadius !== undefined ? Number(cfg.innerRadius) : (cfg.innerSize !== undefined ? Number(cfg.innerSize) : 150)));
                const rMin = Math.max(0, Math.min(rMax - 6, cfg.innerPupilRadius !== undefined ? Number(cfg.innerPupilRadius) : 0));

                const targetDim = Math.max(300, Math.round(rMax * 2 + 20));
                if (innerCanvas.width !== targetDim || innerCanvas.height !== targetDim) {
                  innerCanvas.width = targetDim;
                  innerCanvas.height = targetDim;
                }

                const currentCoverSize = Math.max(40, cfg.coverSize || 110);
                const canvasDisplaySize = Math.round(currentCoverSize * (rMax / 150));
                const displayPx = canvasDisplaySize + 'px';
                if (innerCanvas.style.width !== displayPx) {
                  innerCanvas.style.width = displayPx;
                  innerCanvas.style.height = displayPx;
                }

                const inCtx = innerCanvas.getContext('2d');
                inCtx.clearRect(0, 0, innerCanvas.width, innerCanvas.height);

                const showInner = cfg.enableInnerBars !== undefined ? Number(cfg.enableInnerBars) === 1 : true;
                if (showInner && !audioElement.paused) {
                  const mode = cfg.innerBarsMode !== undefined ? Number(cfg.innerBarsMode) : 1;
                  const iGlow = cfg.innerBarGlow !== undefined ? cfg.innerBarGlow : 12;
                  const iHMult = cfg.innerBarHeight !== undefined ? cfg.innerBarHeight : 1.0;
                  const iBW = Math.max(1, cfg.innerBarWidth !== undefined ? cfg.innerBarWidth : 6);
                  const cw = innerCanvas.width;
                  const ch = innerCanvas.height;
                  const cx = cw / 2;
                  const cy = ch / 2;

                  const innerAccent = (Number(cfg.useCustomInnerColor) === 1 && cfg.innerBarColor) ? cfg.innerBarColor : accent;
                  if (iGlow > 0) {
                    inCtx.shadowBlur = iGlow;
                    inCtx.shadowColor = innerAccent;
                  } else {
                    inCtx.shadowBlur = 0;
                  }
                  inCtx.fillStyle = innerAccent;
                  inCtx.strokeStyle = innerAccent;
                  const inOpacity = cfg.innerBarOpacity !== undefined ? Math.min(1, Math.max(0, Number(cfg.innerBarOpacity))) : 1.0;
                  inCtx.globalAlpha = inOpacity;
                  const pupilRingOp = cfg.innerPupilRingOpacity !== undefined ? Math.min(1, Math.max(0, Number(cfg.innerPupilRingOpacity))) : (cfg.outerRingOpacity !== undefined ? Number(cfg.outerRingOpacity) : 0);
                  const pupilFillColor = cfg.innerPupilColor || '#000000';

                  const numInnerBars = Math.max(2, Math.min(512, cfg.innerBarCount !== undefined ? Number(cfg.innerBarCount) : 32));
                  const hBoost = cfg.innerHighBoost !== undefined ? Number(cfg.innerHighBoost) : 0.1;
                  const sRate = (audioCtx && audioCtx.sampleRate) || 44100;
                  const binHz = sRate / 2048; // ~21.5 Hz per FFT bin
                  const fMin = 28; // Deep Sub-Bass
                  const fMax = 15000; // Crisp Air & Sizzle

                  const maxLen = (rMax - rMin) * iHMult;
                  const rotDeg = cfg.innerRadialRotation !== undefined ? Number(cfg.innerRadialRotation) : 90;
                  const rotRad = (rotDeg * Math.PI) / 180;

                  if (mode === 1) {
                    // Mode 1: Mirrored Full-Spectrum Horizon Equalizer across eye disc
                    const spanW = Math.max(40, Math.round(rMax * 1.74));
                    const barGap = Math.max(2, Math.floor((spanW - numInnerBars * iBW) / Math.max(1, numInnerBars - 1)));
                    const totalW = numInnerBars * iBW + (numInnerBars - 1) * barGap;
                    const startX = (cw - totalW) / 2;

                    for (let i = 0; i < numInnerBars; i++) {
                      const normIdx = i / Math.max(1, numInnerBars - 1);
                      // Logarithmic musical semitone / 1/3-octave band sampling
                      const f1 = fMin * Math.pow(fMax / fMin, i / numInnerBars);
                      const f2 = fMin * Math.pow(fMax / fMin, (i + 1) / numInnerBars);
                      const sBin = Math.max(1, Math.min(count - 1, Math.floor(f1 / binHz)));
                      const eBin = Math.max(sBin, Math.min(count - 1, Math.ceil(f2 / binHz)));

                      let bMax = 0;
                      let bSum = 0;
                      let bCnt = 0;
                      for (let b = sBin; b <= eBin; b++) {
                        const val = data[b] || 0;
                        if (val > bMax) bMax = val;
                        bSum += val;
                        bCnt++;
                      }
                      const rawVal = bCnt > 0 ? (bMax * 0.70 + (bSum / bCnt) * 0.30) : (data[sBin] || 0);

                      // Equal-energy pink noise compensation (allows melody, keys, vocals, and hi-hats to dance)
                      const tilt = Math.max(0.05, Math.min(1.0, hBoost) + Math.pow(normIdx, 0.72) * (hBoost * 3.5));
                      const bVal = Math.min(255, rawVal * tilt);
                      const bPct = bVal / 255;

                      const x = startX + i * (iBW + barGap);
                      const barCenterX = x + iBW / 2;
                      const distX = Math.abs(barCenterX - cx);
                      const maxInsideCircle = distX < (rMax - 2) ? Math.sqrt(Math.max(0, (rMax - 2) * (rMax - 2) - distX * distX)) * 2 - 12 : 24;
                      const maxH = Math.min(maxInsideCircle, (rMax - 5) * iHMult);
                      const barH = Math.max(4, bPct * maxH);
                      const y = cy - barH / 2;
                      const radius = Math.min(iBW / 2, barH / 2);

                      inCtx.beginPath();
                      if (typeof inCtx.roundRect === 'function') {
                        inCtx.roundRect(x, y, iBW, barH, [radius, radius, radius, radius]);
                      } else {
                        inCtx.rect(x, y, iBW, barH);
                      }
                      inCtx.fill();
                    }
                  } else if (mode === 2) {
                    // Mode 2: 360° Full-Spectrum Outward Radial Iris
                    const numSpokes = Math.max(4, Math.min(1024, numInnerBars * 2));

                    for (let i = 0; i < numSpokes; i++) {
                      const angle = (i / numSpokes) * Math.PI * 2 + rotRad;
                      // Symmetrical musical octave distribution around iris circle
                      const sym = 1 - Math.abs((i / numSpokes) * 2 - 1);
                      const f1 = fMin * Math.pow(fMax / fMin, sym);
                      const f2 = fMin * Math.pow(fMax / fMin, Math.min(1.0, sym + 1.25 / numSpokes));
                      const sBin = Math.max(1, Math.min(count - 1, Math.floor(f1 / binHz)));
                      const eBin = Math.max(sBin, Math.min(count - 1, Math.ceil(f2 / binHz)));

                      let bMax = 0;
                      let bSum = 0;
                      let bCnt = 0;
                      for (let b = sBin; b <= eBin; b++) {
                        const val = data[b] || 0;
                        if (val > bMax) bMax = val;
                        bSum += val;
                        bCnt++;
                      }
                      const rawVal = bCnt > 0 ? (bMax * 0.70 + (bSum / bCnt) * 0.30) : (data[sBin] || 0);
                      const tilt = Math.max(0.05, Math.min(1.0, hBoost) + Math.pow(sym, 0.72) * (hBoost * 3.5));
                      const bVal = Math.min(255, rawVal * tilt);
                      const len = Math.max(3, (bVal / 255) * maxLen);

                      const x1 = cx + Math.cos(angle) * rMin;
                      const y1 = cy + Math.sin(angle) * rMin;
                      const x2 = cx + Math.cos(angle) * (rMin + len);
                      const y2 = cy + Math.sin(angle) * (rMin + len);

                      inCtx.beginPath();
                      inCtx.lineWidth = Math.max(1, iBW);
                      inCtx.lineCap = 'round';
                      inCtx.moveTo(x1, y1);
                      inCtx.lineTo(x2, y2);
                      inCtx.stroke();
                    }

                    if (pupilRingOp > 0.001 && rMin > 3) {
                      inCtx.save();
                      inCtx.globalAlpha = inOpacity * pupilRingOp;
                      inCtx.beginPath();
                      inCtx.arc(cx, cy, rMin - 2, 0, Math.PI * 2);
                      inCtx.fillStyle = pupilFillColor;
                      inCtx.fill();
                      inCtx.strokeStyle = inCtx.strokeStyle; // preserve existing stroke color
                      inCtx.lineWidth = 1.5;
                      inCtx.stroke();
                      inCtx.restore();
                    }
                  } else if (mode === 3) {
                    // Mode 3: Bottom Arc Full-Spectrum Equalizer
                    const spanW = Math.max(40, Math.round(rMax * 1.74));
                    const barGap = Math.max(2, Math.floor((spanW - numInnerBars * iBW) / Math.max(1, numInnerBars - 1)));
                    const totalW = numInnerBars * iBW + (numInnerBars - 1) * barGap;
                    const startX = (cw - totalW) / 2;
                    const baseY = cy + rMax * 0.75;

                    for (let i = 0; i < numInnerBars; i++) {
                      const normIdx = i / Math.max(1, numInnerBars - 1);
                      const f1 = fMin * Math.pow(fMax / fMin, i / numInnerBars);
                      const f2 = fMin * Math.pow(fMax / fMin, (i + 1) / numInnerBars);
                      const sBin = Math.max(1, Math.min(count - 1, Math.floor(f1 / binHz)));
                      const eBin = Math.max(sBin, Math.min(count - 1, Math.ceil(f2 / binHz)));

                      let bMax = 0;
                      let bSum = 0;
                      let bCnt = 0;
                      for (let b = sBin; b <= eBin; b++) {
                        const val = data[b] || 0;
                        if (val > bMax) bMax = val;
                        bSum += val;
                        bCnt++;
                      }
                      const rawVal = bCnt > 0 ? (bMax * 0.70 + (bSum / bCnt) * 0.30) : (data[sBin] || 0);
                      const tilt = Math.max(0.05, Math.min(1.0, hBoost) + Math.pow(normIdx, 0.72) * (hBoost * 3.5));
                      const bVal = Math.min(255, rawVal * tilt);
                      const bPct = bVal / 255;

                      const x = startX + i * (iBW + barGap);
                      const barCenterX = x + iBW / 2;
                      const distX = Math.abs(barCenterX - cx);
                      const maxInside = distX < (rMax - 5) ? Math.sqrt(Math.max(0, (rMax - 5) * (rMax - 5) - distX * distX)) : 20;
                      const maxH = Math.min(maxInside + 25, rMax * iHMult);
                      const barH = Math.max(4, bPct * maxH);
                      const y = baseY - barH;
                      const radius = Math.min(iBW / 2, barH / 2);

                      inCtx.beginPath();
                      if (typeof inCtx.roundRect === 'function') {
                        inCtx.roundRect(x, y, iBW, barH, [radius, radius, 0, 0]);
                      } else {
                        inCtx.rect(x, y, iBW, barH);
                      }
                      inCtx.fill();
                    }
                  } else if (mode === 4) {
                    // Mode 4: 360° Inverted Inward Radial Iris (spikes fire inward from outer rim)
                    const numSpokes = Math.max(4, Math.min(1024, numInnerBars * 2));

                    for (let i = 0; i < numSpokes; i++) {
                      const angle = (i / numSpokes) * Math.PI * 2 + rotRad;
                      const sym = 1 - Math.abs((i / numSpokes) * 2 - 1);
                      const f1 = fMin * Math.pow(fMax / fMin, sym);
                      const f2 = fMin * Math.pow(fMax / fMin, Math.min(1.0, sym + 1.25 / numSpokes));
                      const sBin = Math.max(1, Math.min(count - 1, Math.floor(f1 / binHz)));
                      const eBin = Math.max(sBin, Math.min(count - 1, Math.ceil(f2 / binHz)));

                      let bMax = 0, bSum = 0, bCnt = 0;
                      for (let b = sBin; b <= eBin; b++) {
                        const val = data[b] || 0;
                        if (val > bMax) bMax = val;
                        bSum += val;
                        bCnt++;
                      }
                      const rawVal = bCnt > 0 ? (bMax * 0.70 + (bSum / bCnt) * 0.30) : (data[sBin] || 0);
                      const tilt = Math.max(0.05, Math.min(1.0, hBoost) + Math.pow(sym, 0.72) * (hBoost * 3.5));
                      const bVal = Math.min(255, rawVal * tilt);
                      const len = Math.max(3, (bVal / 255) * maxLen);

                      const x1 = cx + Math.cos(angle) * rMax;
                      const y1 = cy + Math.sin(angle) * rMax;
                      const x2 = cx + Math.cos(angle) * (rMax - len);
                      const y2 = cy + Math.sin(angle) * (rMax - len);

                      inCtx.beginPath();
                      inCtx.lineWidth = Math.max(1, iBW);
                      inCtx.lineCap = 'round';
                      inCtx.moveTo(x1, y1);
                      inCtx.lineTo(x2, y2);
                      inCtx.stroke();
                    }

                    // Outer glowing rim ring
                    if (ringOp > 0.001) {
                      inCtx.save();
                      inCtx.globalAlpha = inOpacity * ringOp;
                      inCtx.beginPath();
                      inCtx.arc(cx, cy, rMax, 0, Math.PI * 2);
                      inCtx.lineWidth = 1.5;
                      inCtx.stroke();
                      inCtx.restore();
                    }

                    if (pupilRingOp > 0.001 && rMin > 3) {
                      inCtx.save();
                      inCtx.globalAlpha = inOpacity * pupilRingOp;
                      inCtx.beginPath();
                      inCtx.arc(cx, cy, rMin - 2, 0, Math.PI * 2);
                      inCtx.fillStyle = pupilFillColor;
                      inCtx.fill();
                      inCtx.lineWidth = 1.5;
                      inCtx.stroke();
                      inCtx.restore();
                    }
                  } else if (mode === 5) {
                    // Mode 5: Reversed Inverted Radial Iris (inward spikes + reversed frequency order)
                    const numSpokes = Math.max(4, Math.min(1024, numInnerBars * 2));

                    for (let i = 0; i < numSpokes; i++) {
                      const angle = (i / numSpokes) * Math.PI * 2 + rotRad;
                      // Inverted / reversed frequency symmetry
                      const sym = Math.abs((i / numSpokes) * 2 - 1);
                      const f1 = fMin * Math.pow(fMax / fMin, sym);
                      const f2 = fMin * Math.pow(fMax / fMin, Math.min(1.0, sym + 1.25 / numSpokes));
                      const sBin = Math.max(1, Math.min(count - 1, Math.floor(f1 / binHz)));
                      const eBin = Math.max(sBin, Math.min(count - 1, Math.ceil(f2 / binHz)));

                      let bMax = 0, bSum = 0, bCnt = 0;
                      for (let b = sBin; b <= eBin; b++) {
                        const val = data[b] || 0;
                        if (val > bMax) bMax = val;
                        bSum += val;
                        bCnt++;
                      }
                      const rawVal = bCnt > 0 ? (bMax * 0.70 + (bSum / bCnt) * 0.30) : (data[sBin] || 0);
                      const tilt = Math.max(0.05, Math.min(1.0, hBoost) + Math.pow(sym, 0.72) * (hBoost * 3.5));
                      const bVal = Math.min(255, rawVal * tilt);
                      const len = Math.max(3, (bVal / 255) * maxLen);

                      const x1 = cx + Math.cos(angle) * rMax;
                      const y1 = cy + Math.sin(angle) * rMax;
                      const x2 = cx + Math.cos(angle) * (rMax - len);
                      const y2 = cy + Math.sin(angle) * (rMax - len);

                      inCtx.beginPath();
                      inCtx.lineWidth = Math.max(1, iBW);
                      inCtx.lineCap = 'round';
                      inCtx.moveTo(x1, y1);
                      inCtx.lineTo(x2, y2);
                      inCtx.stroke();
                    }

                    // Outer glowing rim ring & inner pupil ring
                    if (ringOp > 0.001) {
                      inCtx.save();
                      inCtx.globalAlpha = inOpacity * ringOp;
                      inCtx.beginPath();
                      inCtx.arc(cx, cy, rMax, 0, Math.PI * 2);
                      inCtx.lineWidth = 1.5;
                      inCtx.stroke();
                      inCtx.restore();
                    }

                    if (pupilRingOp > 0.001 && rMin > 3) {
                      inCtx.save();
                      inCtx.globalAlpha = inOpacity * pupilRingOp;
                      inCtx.beginPath();
                      inCtx.arc(cx, cy, rMin - 2, 0, Math.PI * 2);
                      inCtx.fillStyle = pupilFillColor;
                      inCtx.fill();
                      inCtx.lineWidth = 1.5;
                      inCtx.stroke();
                      inCtx.restore();
                    }
                  } else if (mode === 6) {
                    // Mode 6: Dual Bi-Directional Stargate Iris (spikes pulse inward from rim AND outward from pupil!)
                    const numSpokes = Math.max(4, Math.min(1024, numInnerBars * 2));
                    const halfLen = maxLen * 0.52;

                    for (let i = 0; i < numSpokes; i++) {
                      const angle = (i / numSpokes) * Math.PI * 2 + rotRad;
                      const sym = 1 - Math.abs((i / numSpokes) * 2 - 1);
                      const f1 = fMin * Math.pow(fMax / fMin, sym);
                      const f2 = fMin * Math.pow(fMax / fMin, Math.min(1.0, sym + 1.25 / numSpokes));
                      const sBin = Math.max(1, Math.min(count - 1, Math.floor(f1 / binHz)));
                      const eBin = Math.max(sBin, Math.min(count - 1, Math.ceil(f2 / binHz)));

                      let bMax = 0, bSum = 0, bCnt = 0;
                      for (let b = sBin; b <= eBin; b++) {
                        const val = data[b] || 0;
                        if (val > bMax) bMax = val;
                        bSum += val;
                        bCnt++;
                      }
                      const rawVal = bCnt > 0 ? (bMax * 0.70 + (bSum / bCnt) * 0.30) : (data[sBin] || 0);
                      const tilt = Math.max(0.05, Math.min(1.0, hBoost) + Math.pow(sym, 0.72) * (hBoost * 3.5));
                      const bVal = Math.min(255, rawVal * tilt);
                      const len = Math.max(3, (bVal / 255) * halfLen);

                      inCtx.beginPath();
                      inCtx.lineWidth = Math.max(1, iBW);
                      inCtx.lineCap = 'round';
                      // Outward spike from pupil
                      inCtx.moveTo(cx + Math.cos(angle) * rMin, cy + Math.sin(angle) * rMin);
                      inCtx.lineTo(cx + Math.cos(angle) * (rMin + len), cy + Math.sin(angle) * (rMin + len));
                      // Inward spike from outer rim
                      inCtx.moveTo(cx + Math.cos(angle) * rMax, cy + Math.sin(angle) * rMax);
                      inCtx.lineTo(cx + Math.cos(angle) * (rMax - len), cy + Math.sin(angle) * (rMax - len));
                      inCtx.stroke();
                    }

                    if (pupilRingOp > 0.001 && rMin > 3) {
                      inCtx.save();
                      inCtx.globalAlpha = inOpacity * pupilRingOp;
                      inCtx.beginPath();
                      inCtx.arc(cx, cy, rMin - 2, 0, Math.PI * 2);
                      inCtx.fillStyle = pupilFillColor;
                      inCtx.fill();
                      inCtx.lineWidth = 1.5;
                      inCtx.stroke();
                      inCtx.restore();
                    }

                    if (ringOp > 0.001) {
                      inCtx.save();
                      inCtx.globalAlpha = inOpacity * ringOp;
                      inCtx.beginPath();
                      inCtx.arc(cx, cy, rMax, 0, Math.PI * 2);
                      inCtx.lineWidth = 1.5;
                      inCtx.stroke();
                      inCtx.restore();
                    }
                  } else if (mode === 7) {
                    // Mode 7: 360° Continuous Radar Iris (seamless full-circle chromatic spectrum)
                    const numSpokes = Math.max(4, Math.min(1024, numInnerBars * 2));

                    for (let i = 0; i < numSpokes; i++) {
                      const angle = (i / numSpokes) * Math.PI * 2 + rotRad;
                      const sym = i / numSpokes;
                      const f1 = fMin * Math.pow(fMax / fMin, sym);
                      const f2 = fMin * Math.pow(fMax / fMin, Math.min(1.0, sym + 1.25 / numSpokes));
                      const sBin = Math.max(1, Math.min(count - 1, Math.floor(f1 / binHz)));
                      const eBin = Math.max(sBin, Math.min(count - 1, Math.ceil(f2 / binHz)));

                      let bMax = 0, bSum = 0, bCnt = 0;
                      for (let b = sBin; b <= eBin; b++) {
                        const val = data[b] || 0;
                        if (val > bMax) bMax = val;
                        bSum += val;
                        bCnt++;
                      }
                      const rawVal = bCnt > 0 ? (bMax * 0.70 + (bSum / bCnt) * 0.30) : (data[sBin] || 0);
                      const tilt = Math.max(0.05, Math.min(1.0, hBoost) + Math.pow(sym, 0.72) * (hBoost * 3.5));
                      const bVal = Math.min(255, rawVal * tilt);
                      const len = Math.max(3, (bVal / 255) * maxLen);

                      const x1 = cx + Math.cos(angle) * rMin;
                      const y1 = cy + Math.sin(angle) * rMin;
                      const x2 = cx + Math.cos(angle) * (rMin + len);
                      const y2 = cy + Math.sin(angle) * (rMin + len);

                      inCtx.beginPath();
                      inCtx.lineWidth = Math.max(1, iBW);
                      inCtx.lineCap = 'round';
                      inCtx.moveTo(x1, y1);
                      inCtx.lineTo(x2, y2);
                      inCtx.stroke();
                    }

                    if (pupilRingOp > 0.001 && rMin > 3) {
                      inCtx.save();
                      inCtx.globalAlpha = inOpacity * pupilRingOp;
                      inCtx.beginPath();
                      inCtx.arc(cx, cy, rMin - 2, 0, Math.PI * 2);
                      inCtx.fillStyle = pupilFillColor;
                      inCtx.fill();
                      inCtx.lineWidth = 1.5;
                      inCtx.stroke();
                      inCtx.restore();
                    }
                  }
                  // ─── Infinite Void Tunnel ───────────────────────────────────
                  const enableVoid = Number(cfg.enableVoidTunnel !== undefined ? cfg.enableVoidTunnel : 0) === 1;
                  const vZone = cfg.voidTunnelZone !== undefined ? Number(cfg.voidTunnelZone) : 0;

                  // Manage outer shadow canvas visibility
                  const outerVoidCanvas = ph ? ph.querySelector('.audio-void-outer-canvas') : null;
                  if (outerVoidCanvas) {
                    if (!enableVoid || vZone !== 2) {
                      // Clear and hide when not in use
                      if (outerVoidCanvas.width > 0) {
                        const oc = outerVoidCanvas.getContext('2d');
                        oc.clearRect(0, 0, outerVoidCanvas.width, outerVoidCanvas.height);
                      }
                      outerVoidCanvas.style.display = 'none';
                    }
                  }

                  if (enableVoid) {
                    const vN = Math.max(2, Math.min(30, cfg.voidTunnelRings !== undefined ? Number(cfg.voidTunnelRings) : 10));
                    const vBaseSpeed = cfg.voidTunnelSpeed !== undefined ? Number(cfg.voidTunnelSpeed) : 0.6;
                    const vReact = cfg.voidTunnelReactivity !== undefined ? Number(cfg.voidTunnelReactivity) : 3.0;
                    const vFade = Math.max(0, Math.min(0.99, cfg.voidTunnelFadeWidth !== undefined ? Number(cfg.voidTunnelFadeWidth) : 0.35));
                    const vUseAccent = cfg.voidTunnelUseAccent !== undefined ? Number(cfg.voidTunnelUseAccent) === 1 : true;
                    const vColor = vUseAccent ? innerAccent : (cfg.voidTunnelColor || '#ffffff');
                    const vRingW = cfg.voidTunnelRingWidth !== undefined ? Number(cfg.voidTunnelRingWidth) : 2.5;
                    const vEdgeFade = cfg.voidTunnelEdgeFade !== undefined ? Math.max(0, Math.min(0.99, Number(cfg.voidTunnelEdgeFade))) : 0.35;
                    const vOpacity = cfg.voidTunnelOpacity !== undefined ? Math.min(1, Math.max(0, Number(cfg.voidTunnelOpacity))) : 1.0;
                    const vDepth = cfg.voidTunnelDepth !== undefined ? Math.max(0, Math.min(1, Number(cfg.voidTunnelDepth))) : 0.65;
                    // Higher warp exponent = stronger perspective compression near vanishing point
                    const vWarpExp = 1.8 + vDepth * 1.0;

                    if (vZone === 2 && outerVoidCanvas) {
                      // ── Zone 2: Full Soak ──────────────────────────────────────
                      // Strategy: unified t→radius, clip-based partitioning.
                      //   Inner canvas: full disc clip ≤ rMax → covers pupil + iris
                      //   Outer canvas: annular clip rMaxDisp→edge → covers shadow/halo
                      // Both draw ALL rings; clipping decides which part is visible.

                      // Shared geometry
                      const phW = ph ? ph.offsetWidth  : (coverCircle.offsetWidth * 3);
                      const phH = ph ? ph.offsetHeight : phW;
                      const outerHalfPx = Math.sqrt(phW * phW + phH * phH) / 2;
                      const coverDispPx   = coverCircle.offsetWidth || 125;
                      const innerPxPerDisp = (innerCanvas.width || 300) / coverDispPx;
                      const rMaxDisp = rMax / innerPxPerDisp; // rMax in display-px

                      // Phase & timing
                      const vNow2 = performance.now();
                      if (!outerVoidCanvas._voidLastTime) outerVoidCanvas._voidLastTime = vNow2;
                      const vDt2 = Math.min(0.1, (vNow2 - outerVoidCanvas._voidLastTime) / 1000);
                      outerVoidCanvas._voidLastTime = vNow2;
                      const vSpeed2 = vBaseSpeed + kickEnergy * vReact;
                      outerVoidCanvas._voidPhase = ((outerVoidCanvas._voidPhase || 0) + vDt2 * vSpeed2) % 1.0;
                      const vPhase2 = outerVoidCanvas._voidPhase;

                      // Infinite zoom scale: K cycles 1→2 (at K=2 each ring matches the next → seamless)
                      const vZoomSpeed = cfg.voidTunnelZoomSpeed !== undefined ? Number(cfg.voidTunnelZoomSpeed) : 0.5;
                      if (!outerVoidCanvas._zoomK) outerVoidCanvas._zoomK = 1.0;
                      outerVoidCanvas._zoomK *= Math.exp((vZoomSpeed + kickEnergy * vReact * 0.1) * vDt2);
                      if (outerVoidCanvas._zoomK >= 2.0) outerVoidCanvas._zoomK /= 2.0;
                      const vZoomK = outerVoidCanvas._zoomK;

                      // ── Part A: inner canvas — glow pass (no clip, shadows bleed freely) ──
                      if (vDepth > 0.01) {
                        inCtx.save();
                        inCtx.translate(cx, cy);
                        inCtx.scale(vZoomK, vZoomK);
                        inCtx.translate(-cx, -cy);
                        inCtx.strokeStyle = vColor;
                        for (let vi = 0; vi < vN; vi++) {
                          const t = ((vi / vN) + vPhase2) % 1.0;
                          const tWarped = Math.pow(t, vWarpExp);
                          const ringR = tWarped * (rMax - 1);
                          if (ringR < 0.5) continue;
                          const fadeIn = t < vFade ? (t / vFade) : 1.0;
                          const edgeStart = 1.0 - vEdgeFade;
                          const fadeOut = t > edgeStart ? ((1.0 - t) / vEdgeFade) : 1.0;
                          const depthFog = 1.0 - vDepth * 0.65 * (1.0 - t);
                          const ringAlpha = vOpacity * fadeIn * fadeOut * depthFog;
                          const lineW = Math.max(0.4, tWarped * vRingW);
                          const glowA = ringAlpha * vDepth * 0.55;
                          if (glowA > 0.01) {
                            inCtx.globalAlpha = Math.min(1, glowA);
                            inCtx.lineWidth = lineW * 3.5;
                            inCtx.shadowBlur = vDepth * 28 * tWarped;
                            inCtx.shadowColor = vColor;
                            inCtx.beginPath();
                            inCtx.arc(cx, cy, ringR, 0, Math.PI * 2);
                            inCtx.stroke();
                          }
                        }
                        inCtx.shadowBlur = 0;
                        inCtx.restore();
                      }

                      // ── Part A: inner canvas — core pass (clipped to rMax) ────
                      inCtx.save();
                      inCtx.beginPath();
                      inCtx.arc(cx, cy, rMax - 1, 0, Math.PI * 2, false);
                      inCtx.clip();
                      inCtx.translate(cx, cy);
                      inCtx.scale(vZoomK, vZoomK);
                      inCtx.translate(-cx, -cy);
                      inCtx.strokeStyle = vColor;
                      inCtx.shadowBlur = 0;
                      for (let vi = 0; vi < vN; vi++) {
                        const t = ((vi / vN) + vPhase2) % 1.0;
                        const tWarped = Math.pow(t, vWarpExp);
                        const ringR = tWarped * (rMax - 1);
                        if (ringR < 0.5) continue;
                        const fadeIn = t < vFade ? (t / vFade) : 1.0;
                        const edgeStart = 1.0 - vEdgeFade;
                        const fadeOut = t > edgeStart ? ((1.0 - t) / vEdgeFade) : 1.0;
                        const depthFog = 1.0 - vDepth * 0.65 * (1.0 - t);
                        const ringAlpha = vOpacity * fadeIn * fadeOut * depthFog;
                        const lineW = Math.max(0.4, tWarped * vRingW);
                        inCtx.globalAlpha = Math.min(1, ringAlpha);
                        inCtx.lineWidth = lineW;
                        inCtx.beginPath();
                        inCtx.arc(cx, cy, ringR, 0, Math.PI * 2);
                        inCtx.stroke();
                      }
                      inCtx.restore();

                      // ── Part B: outer canvas — annular clip rMaxDisp→edge ─────
                      const rMaxOuter = rMaxDisp; // display-px == outer-canvas-px (1:1 mapping)
                      outerVoidCanvas.style.transform = `translate(-50%,-50%) scale(${vZoomK})`;
                      const outerSize = Math.round(Math.sqrt(phW * phW + phH * phH));
                      if (outerVoidCanvas.width !== outerSize || outerVoidCanvas.height !== outerSize) {
                        outerVoidCanvas.width  = outerSize;
                        outerVoidCanvas.height = outerSize;
                        outerVoidCanvas.style.width  = outerSize + 'px';
                        outerVoidCanvas.style.height = outerSize + 'px';
                      }
                      outerVoidCanvas.style.display = '';

                      const oc  = outerVoidCanvas.getContext('2d');
                      const ocx = outerSize / 2;
                      const ocy = outerSize / 2;
                      oc.clearRect(0, 0, outerSize, outerSize);

                      // ── Part B: outer canvas — glow pass (no clip) ───────────
                      if (vDepth > 0.01) {
                        oc.save();
                        oc.strokeStyle = vColor;
                        for (let vi = 0; vi < vN; vi++) {
                          const t = ((vi / vN) + vPhase2) % 1.0;
                          const tWarped = Math.pow(t, vWarpExp);
                          const ringR = tWarped * outerHalfPx;
                          if (ringR < rMaxOuter - 1) continue; // skip rings inside the inner canvas region
                          if (ringR < 0.5) continue;
                          const fadeIn = t < vFade ? (t / vFade) : 1.0;
                          const edgeStart = 1.0 - vEdgeFade;
                          const fadeOut = t > edgeStart ? ((1.0 - t) / vEdgeFade) : 1.0;
                          const depthFog = 1.0 - vDepth * 0.65 * (1.0 - t);
                          const ringAlpha = vOpacity * fadeIn * fadeOut * depthFog;
                          const lineW = Math.max(0.4, tWarped * vRingW);
                          const glowA = ringAlpha * vDepth * 0.55;
                          if (glowA > 0.01) {
                            oc.globalAlpha = Math.min(1, glowA);
                            oc.lineWidth = lineW * 3.5;
                            oc.shadowBlur = vDepth * 28 * tWarped;
                            oc.shadowColor = vColor;
                            oc.beginPath();
                            oc.arc(ocx, ocy, ringR, 0, Math.PI * 2);
                            oc.stroke();
                          }
                        }
                        oc.shadowBlur = 0;
                        oc.restore();
                      }

                      // ── Part B: outer canvas — core pass (annular clip) ──────
                      oc.save();
                      oc.beginPath();
                      oc.arc(ocx, ocy, outerSize, 0, Math.PI * 2, false);
                      oc.arc(ocx, ocy, rMaxOuter, 0, Math.PI * 2, true);
                      oc.clip('evenodd');
                      oc.strokeStyle = vColor;
                      oc.shadowBlur = 0;
                      for (let vi = 0; vi < vN; vi++) {
                        const t = ((vi / vN) + vPhase2) % 1.0;
                        const tWarped = Math.pow(t, vWarpExp);
                        const ringR = tWarped * outerHalfPx;
                        if (ringR < 0.5) continue;
                        const fadeIn = t < vFade ? (t / vFade) : 1.0;
                        const edgeStart = 1.0 - vEdgeFade;
                        const fadeOut = t > edgeStart ? ((1.0 - t) / vEdgeFade) : 1.0;
                        const depthFog = 1.0 - vDepth * 0.65 * (1.0 - t);
                        const ringAlpha = vOpacity * fadeIn * fadeOut * depthFog;
                        const lineW = Math.max(0.4, tWarped * vRingW);
                        oc.globalAlpha = Math.min(1, ringAlpha);
                        oc.lineWidth = lineW;
                        oc.beginPath();
                        oc.arc(ocx, ocy, ringR, 0, Math.PI * 2);
                        oc.stroke();
                      }
                      oc.restore();
                      oc.globalAlpha = 1.0;

                    } else {
                      // ── Zone 0 / 1: draw on inner canvas (inCtx) ──
                      const vClipOuterR = vZone === 0 ? rMin - 2 : rMax - 1;
                      const vSpan = vClipOuterR;

                      if (vSpan > 4) {
                        const vNow = performance.now();
                        if (!innerCanvas._voidLastTime) innerCanvas._voidLastTime = vNow;
                        const vDt = Math.min(0.1, (vNow - innerCanvas._voidLastTime) / 1000);
                        innerCanvas._voidLastTime = vNow;
                        const vSpeed = vBaseSpeed + kickEnergy * vReact;
                        innerCanvas._voidPhase = ((innerCanvas._voidPhase || 0) + vDt * vSpeed) % 1.0;
                        const vPhase = innerCanvas._voidPhase;

                        // Glow pass — separate unclipped save block so shadowBlur isn't truncated
                        if (vDepth > 0.01) {
                          inCtx.save();
                          inCtx.strokeStyle = vColor;
                          for (let vi = 0; vi < vN; vi++) {
                            const t = ((vi / vN) + vPhase) % 1.0;
                            const tWarped = Math.pow(t, vWarpExp);
                            const ringR = tWarped * vSpan;
                            if (ringR < 0.5) continue;
                            const fadeIn = t < vFade ? (t / vFade) : 1.0;
                            const edgeStart = 1.0 - vEdgeFade;
                            const fadeOut = t > edgeStart ? ((1.0 - t) / vEdgeFade) : 1.0;
                            const depthFog = 1.0 - vDepth * 0.65 * (1.0 - t);
                            const ringAlpha = vOpacity * fadeIn * fadeOut * depthFog;
                            const lineW = Math.max(0.4, tWarped * vRingW);
                            const glowA = ringAlpha * vDepth * 0.55;
                            if (glowA > 0.01) {
                              inCtx.globalAlpha = Math.min(1, glowA);
                              inCtx.lineWidth = lineW * 3.5;
                              inCtx.shadowBlur = vDepth * 28 * tWarped;
                              inCtx.shadowColor = vColor;
                              inCtx.beginPath();
                              inCtx.arc(cx, cy, ringR, 0, Math.PI * 2);
                              inCtx.stroke();
                            }
                          }
                          inCtx.shadowBlur = 0;
                          inCtx.restore();
                        }

                        // Core pass — clipped
                        inCtx.save();
                        inCtx.shadowBlur = 0;
                        inCtx.beginPath();
                        inCtx.arc(cx, cy, vClipOuterR, 0, Math.PI * 2, false);
                        inCtx.clip();
                        inCtx.strokeStyle = vColor;
                        for (let vi = 0; vi < vN; vi++) {
                          const t = ((vi / vN) + vPhase) % 1.0;
                          const tWarped = Math.pow(t, vWarpExp);
                          const ringR = tWarped * vSpan;
                          if (ringR < 0.5) continue;
                          const fadeIn = t < vFade ? (t / vFade) : 1.0;
                          const edgeStart = 1.0 - vEdgeFade;
                          const fadeOut = t > edgeStart ? ((1.0 - t) / vEdgeFade) : 1.0;
                          const depthFog = 1.0 - vDepth * 0.65 * (1.0 - t);
                          const ringAlpha = vOpacity * fadeIn * fadeOut * depthFog;
                          const lineW = Math.max(0.4, tWarped * vRingW);
                          inCtx.globalAlpha = Math.min(1, ringAlpha);
                          inCtx.lineWidth = lineW;
                          inCtx.beginPath();
                          inCtx.arc(cx, cy, ringR, 0, Math.PI * 2);
                          inCtx.stroke();
                        }
                        inCtx.restore();
                      }
                    }
                  }
                  // ────────────────────────────────────────────────────────────

                  inCtx.shadowBlur = 0;
                  inCtx.globalAlpha = 1.0;
                }
              }
              // ────────────────────────────────────────────────────────────────────
              } // end if (!sqHideHUD)
            }
          } else {
            // Decay smoothly back to neutral state when paused or idle
            if (bgEl) {
              bgEl.style.opacity = '0';
            }
            if (coverCircle) {
              // Restore HUD if it was hidden by the tunnel
              if (coverCircle._sqHiddenByTunnel) {
                coverCircle.style.opacity = '';
                coverCircle.style.pointerEvents = '';
                coverCircle._sqHiddenByTunnel = false;
              }
              const inC = coverCircle.querySelector('.audio-eye-inner-canvas');
              if (inC) {
                const inCtx = inC.getContext('2d');
                if (inCtx) inCtx.clearRect(0, 0, inC.width, inC.height);
              }
              if (noteIcon && noteIcon._sqHiddenByTunnel) {
                noteIcon.style.opacity = '';
                noteIcon.style.pointerEvents = '';
                noteIcon._sqHiddenByTunnel = false;
              }
            }
            if (smoothScale > 1.002 || smoothGlow > 0.005) {
              smoothScale += (1 - smoothScale) * 0.16;
              smoothGlow += (0 - smoothGlow) * 0.09;
              if (noteIcon) {
                if (coverCircle && coverCircle.contains(noteIcon)) {
                  noteIcon.style.transform = '';
                  noteIcon.style.filter = '';
                } else {
                  noteIcon.style.transform = `scale(${smoothScale.toFixed(3)})`;
                  noteIcon.style.filter = '';
                }
              }
              if (coverCircle) {
                const curEyeX2 = coverCircle._eyeX || 0;
                const curEyeY2 = coverCircle._eyeY || 0;
                // Spirit drift: shift eye with the tunnel camera VP so they move as one
                const _sqCv2 = ph && ph.querySelector('.audio-sq-tunnel');
                const driftOffX2 = (_sqCv2 && _sqCv2._vpX) ? _sqCv2._vpX * 0.5 : 0;
                const driftOffY2 = (_sqCv2 && _sqCv2._vpY) ? _sqCv2._vpY * 0.5 : 0;
                const offX = Number(cfg.coverPosX || 0);
                const offY = Number(cfg.coverPosY || 0);
                const curX = (curEyeX2 + driftOffX2 + offX).toFixed(1);
                const curY = (curEyeY2 + driftOffY2 + offY).toFixed(1);
                const curTiltX = (coverCircle._eyeTiltX || 0).toFixed(1);
                const curTiltY = (coverCircle._eyeTiltY || 0).toFixed(1);
                const eyeFov2  = Math.round(cfg.eyeFOV  !== undefined ? cfg.eyeFOV  : 600);
                const eyeZPos2 = cfg.eyeZPos !== undefined ? Number(cfg.eyeZPos) : 0;
                coverCircle.style.transform = `translate(calc(-50% + ${curX}px), calc(-50% + ${curY}px)) perspective(${eyeFov2}px) translateZ(${eyeZPos2}px) rotateX(${curTiltX}deg) rotateY(${curTiltY}deg) scale(${smoothScale.toFixed(3)})`;
                const baseGlow = cfg.coverGlowBase !== undefined ? cfg.coverGlowBase : 35;
                const glowReach = cfg.glowIntensity !== undefined ? cfg.glowIntensity : 250;
                const glowMult = cfg.glowBrightness !== undefined ? cfg.glowBrightness : 1.0;
                const dynSpread = smoothGlow * glowReach;
                const glow1 = Math.round(baseGlow * 0.20 + dynSpread * 0.18);
                const glow2 = Math.round(baseGlow * 0.50 + dynSpread * 0.50);
                const glow3 = Math.round(baseGlow * 1.00 + dynSpread * 0.95);
                const bMult = Math.min(1.4, Math.max(0.2, glowMult * 0.35));
                const pct1 = Math.min(100, Math.max(0, Math.round((0.36 + smoothGlow * 0.64) * bMult * 100)));
                const pct2 = Math.min(100, Math.max(0, Math.round((0.22 + smoothGlow * 0.72) * bMult * 100)));
                const pct3 = Math.min(100, Math.max(0, Math.round((0.10 + smoothGlow * 0.68) * bMult * 100)));
                const eyeNoGlowB   = Number(cfg.eyeDisableGlow   !== undefined ? cfg.eyeDisableGlow   : 0) === 1;
                const eyeNoShadowB = Number(cfg.eyeDisableShadow !== undefined ? cfg.eyeDisableShadow : 0) === 1;
                if (!coverCircle._sqHiddenByTunnel) {
                  if (eyeNoShadowB) {
                    coverCircle.style.boxShadow = 'none';
                  } else if (glowMult <= 0 || eyeNoGlowB) {
                    coverCircle.style.boxShadow = `0 14px 45px rgba(0, 0, 0, 0.9)`;
                  } else {
                    coverCircle.style.boxShadow = `0 14px 45px rgba(0, 0, 0, 0.9), 0 0 ${glow1}px color-mix(in srgb, ${accent} ${pct1}%, transparent), 0 0 ${glow2}px color-mix(in srgb, ${accent} ${pct2}%, transparent), 0 0 ${glow3}px color-mix(in srgb, ${accent} ${pct3}%, transparent)`;
                  }
                }
              }
            } else if (smoothScale !== 1 || smoothGlow !== 0) {
              smoothScale = 1;
              smoothGlow = 0;
              if (noteIcon) {
                noteIcon.style.transform = '';
                noteIcon.style.filter = '';
              }
              if (coverCircle) {
                coverCircle._visualizerDriving = false;
                const baseGlow = cfg.coverGlowBase !== undefined ? cfg.coverGlowBase : 35;
                const glowMult = cfg.glowBrightness !== undefined ? cfg.glowBrightness : 1.0;
                const eyeNoGlowC   = Number(cfg.eyeDisableGlow   !== undefined ? cfg.eyeDisableGlow   : 0) === 1;
                const eyeNoShadowC = Number(cfg.eyeDisableShadow !== undefined ? cfg.eyeDisableShadow : 0) === 1;
                if (!coverCircle._sqHiddenByTunnel) {
                  if (eyeNoShadowC) {
                    coverCircle.style.boxShadow = 'none';
                  } else if (glowMult <= 0 || eyeNoGlowC) {
                    coverCircle.style.boxShadow = `0 12px 40px rgba(0, 0, 0, 0.88)`;
                  } else {
                    coverCircle.style.boxShadow = `0 12px 40px rgba(0, 0, 0, 0.88), 0 0 ${baseGlow}px color-mix(in srgb, ${accent} ${Math.round(28 * Math.min(1.5, glowMult))}%, transparent)`;
                  }
                }
                const ringOp = cfg.outerRingOpacity !== undefined ? Math.min(1, Math.max(0, Number(cfg.outerRingOpacity))) : 1.0;
                if (ringOp <= 0.001) {
                  coverCircle.style.borderColor = 'transparent';
                } else {
                  coverCircle.style.borderColor = `color-mix(in srgb, ${accent} ${Math.round(40 * ringOp)}%, transparent)`;
                }
              }
            } else if (coverCircle) {
              coverCircle._visualizerDriving = false;
            }
          }
        }

        // Feed visualizer canvas (.audio-visualizer) or inner eye canvas as background (#bg)
        const bgCanvas = document.getElementById('bg');
        const innerEyeCanvas = document.querySelector('.audio-eye-inner-canvas');
        const sourceCanvas = (innerEyeCanvas && innerEyeCanvas.width > 0 && innerEyeCanvas.height > 0)
          ? innerEyeCanvas
          : (canvas && canvas.width > 0 && canvas.height > 0 ? canvas : null);
        const bgEnabled = window.background;
        if (bgCanvas) {
          if (!bgEnabled) {
            // Global background toggled off — fade out
            if (!bgCanvas.classList.contains('fader-out')) {
              bgCanvas.classList.remove('fader-in');
              bgCanvas.classList.add('fader-out');
            }
          } else if (feedToBg && sourceCanvas && sourceCanvas.width > 0 && sourceCanvas.height > 0) {
          const bgCtx = bgCanvas.getContext('2d');
          if (bgCtx) {
            const SCALE = 0.5;
            const targetW = Math.max(1, (bgCanvas.clientWidth || window.innerWidth || 1920) * SCALE | 0);
            const targetH = Math.max(1, (bgCanvas.clientHeight || window.innerHeight || 1080) * SCALE | 0);
            if (bgCanvas.width !== targetW || bgCanvas.height !== targetH) {
              bgCanvas.width = targetW;
              bgCanvas.height = targetH;
            }
            const bw = bgCanvas.width;
            const bh = bgCanvas.height;

            if (bw > 0 && bh > 0) {
              // Ensure the bg canvas is visible
              if (bgCanvas.classList.contains('fader-out')) {
                bgCanvas.classList.remove('fader-out', 'fast-fade');
                bgCanvas.classList.add('fader-in');
              }

              bgCtx.clearRect(0, 0, bw, bh);

              // Compute real-time audio dynamics from frequency spectrum
              const reactMult = cfg.bgAudioReactivity !== undefined ? Number(cfg.bgAudioReactivity) : 1.50;
              const reactScale = reactMult / 1.50;

              let dynBassMax = 0, dynBassSum = 0;
              const dynBassBins = Math.min(10, count);
              for (let b = 1; b <= dynBassBins; b++) {
                const v = data[b] || 0;
                if (v > dynBassMax) dynBassMax = v;
                dynBassSum += v;
              }
              const dynBassPeak = dynBassMax / 255;
              const dynBassAvg = dynBassSum / (dynBassBins * 255);
              const dynKick = Math.min(1.0, (dynBassPeak * 0.70 + dynBassAvg * 0.30) * 1.85 * reactScale);

              let dynMidMax = 0, dynMidSum = 0;
              const dynMidStart = 11, dynMidEnd = Math.min(36, count);
              for (let m = dynMidStart; m < dynMidEnd; m++) {
                const v = data[m] || 0;
                if (v > dynMidMax) dynMidMax = v;
                dynMidSum += v;
              }
              const dynMid = Math.min(1.0, ((dynMidMax / 255) * 0.6 + (dynMidSum / ((dynMidEnd - dynMidStart) * 255)) * 0.4) * 1.85 * reactScale);

              let dynHighMax = 0;
              const dynHighStart = 37, dynHighEnd = Math.min(80, count);
              for (let h = dynHighStart; h < dynHighEnd; h++) {
                if ((data[h] || 0) > dynHighMax) dynHighMax = data[h];
              }
              const dynHigh = Math.min(1.0, (dynHighMax / 255) * 1.6 * reactScale);

              if (!bgCanvas._audioEnvelope) {
                bgCanvas._audioEnvelope = { kick: 0, mid: 0, high: 0, pulse: 0 };
              }
              const aEnv = bgCanvas._audioEnvelope;
              const isPaused = audioElement.paused;
              if (isPaused) {
                aEnv.kick *= 0.85;
                aEnv.mid *= 0.85;
                aEnv.high *= 0.85;
                aEnv.pulse *= 0.85;
              } else {
                aEnv.kick += (dynKick - aEnv.kick) * (dynKick > aEnv.kick ? 0.65 : 0.12);
                aEnv.mid += (dynMid - aEnv.mid) * (dynMid > aEnv.mid ? 0.55 : 0.10);
                aEnv.high += (dynHigh - aEnv.high) * (dynHigh > aEnv.high ? 0.70 : 0.14);
                const rawPulse = Math.min(1.0, aEnv.kick * 0.70 + aEnv.mid * 0.30);
                aEnv.pulse += (rawPulse - aEnv.pulse) * (rawPulse > aEnv.pulse ? 0.60 : 0.10);
              }

              // Check ambient lighting mode
              const useAudioAmbient = Number(cfg.bgAmbientLighting) === 1;

              if (useAudioAmbient) {
                // Reactive YouTube Glow mode: sample colors + modulate dynamically with frequencies & beats
                const pulseVal = Math.min(1.0, aEnv.pulse * reactScale);
                const reactiveOpts = {
                  pulse: isPaused ? 0 : pulseVal,
                  intensityMult: isPaused ? 0.40 : Math.min(1.4, 0.75 + (aEnv.pulse * 0.85 + aEnv.kick * 0.55) * reactScale),
                  spreadMult: isPaused ? 0.75 : (0.85 + aEnv.pulse * 0.45 * reactScale),
                  coreColor: null
                };

                if (!bgCanvas._audioAmbientCount) bgCanvas._audioAmbientCount = 0;
                bgCanvas._audioAmbientCount++;
                if (bgCanvas._audioAmbientCount % 2 === 0 || !mediaAmbientState.hasSampled) {
                  // Use cover art if available; otherwise fall back to accent color to match the visualizer.
                  let sampled = null;
                  const allowBgCoverSampling = Number(cfg.showCoverInBg) === 1;
                  if (allowBgCoverSampling && audioCoverImg && audioCoverImg.complete && audioCoverImg.naturalWidth > 0) {
                    sampled = sampleMediaSpatialColors(audioCoverImg);
                  }
                  if (!sampled) {
                    const accentRgb = parseCssColorToRgb(accent);
                    if (accentRgb) sampled = { top: accentRgb, bottom: accentRgb };
                  }
                  if (sampled) {
                    // Modulate sampled colors dynamically with real-time frequency energy
                    const modTop = [
                      Math.min(255, Math.max(0, Math.round(sampled.top[0] * (1.0 + (aEnv.mid + aEnv.high) * 0.50 * reactScale)))),
                      Math.min(255, Math.max(0, Math.round(sampled.top[1] * (1.0 + (aEnv.mid + aEnv.high) * 0.50 * reactScale)))),
                      Math.min(255, Math.max(0, Math.round(sampled.top[2] * (1.0 + (aEnv.mid + aEnv.high) * 0.50 * reactScale))))
                    ];
                    const modBot = [
                      Math.min(255, Math.max(0, Math.round(sampled.bottom[0] * (1.0 + aEnv.kick * 0.65 * reactScale)))),
                      Math.min(255, Math.max(0, Math.round(sampled.bottom[1] * (1.0 + aEnv.kick * 0.65 * reactScale)))),
                      Math.min(255, Math.max(0, Math.round(sampled.bottom[2] * (1.0 + aEnv.kick * 0.65 * reactScale))))
                    ];
                    setAmbientTargetColors({ top: modTop, bottom: modBot });
                    mediaAmbientState.hasSampled = true;
                  }
                  // If sampled is null or too dark, canvas stays dark — no green flash.
                }

                const current = updateAmbientLerp(0.08);
                renderAmbientLightingWash(bgCtx, bw, bh, current, 1.0, reactiveOpts);
                bgCanvas.style.filter = '';
              } else {
                // Filter mode: copy visualizer canvas to bg with reactive blur/brightness & pulse scale
                try {
                  const srcW = sourceCanvas.width;
                  const srcH = sourceCanvas.height;
                  const baseBgScale = cfg.bgCanvasScale !== undefined ? Number(cfg.bgCanvasScale) : 2.15;
                  const bgScale = baseBgScale * (1.0 + (isPaused ? 0 : aEnv.pulse * 0.15 * reactScale));
                  const contentW = bw;
                  const fitScale = Math.min(contentW / srcW, bh / srcH);
                  const dw = srcW * fitScale * bgScale;
                  const dh = srcH * fitScale * bgScale;
                  const dx = (contentW - dw) / 2;
                  const dy = (bh - dh) / 2;

                  const blurPx = cfg.bgCanvasBlur !== undefined ? Number(cfg.bgCanvasBlur) : 31;
                  const baseBright = cfg.bgCanvasBrightness !== undefined ? Number(cfg.bgCanvasBrightness) : 0.6;
                  const brightVal = Math.min(2.0, baseBright * (1.0 + (isPaused ? 0 : aEnv.kick * 0.45 * reactScale)));
                  const filterParts = [];
                  if (blurPx > 0) filterParts.push(`blur(${blurPx}px)`);
                  if (brightVal !== 1) filterParts.push(`brightness(${brightVal.toFixed(2)})`);
                  bgCanvas.style.filter = filterParts.length > 0 ? filterParts.join(' ') : '';

                  bgCtx.drawImage(sourceCanvas, dx, dy, dw, dh);
                } catch (e) {}
              }
            }
          }
          }
        }
      };

      const loopingFunction = () => {
        visualizerRafId = requestAnimationFrame(loopingFunction);
        if (audioCtx && audioCtx.state === 'suspended' && !audioElement.paused) {
          audioCtx.resume().catch(() => {});
        }
        if (!source || !source._connectedAnalyser) {
          setupAudioSource();
        }
        analyser.getByteFrequencyData(data);
        draw(data);
      };

      visualizerRafId = requestAnimationFrame(loopingFunction);

      const resumeAudio = () => {
        setupAudioSource();
        if (audioCtx && audioCtx.state !== 'running') {
          audioCtx.resume().catch(() => {});
        }
      };

      audioElement.addEventListener('play', resumeAudio);
      audioElement.addEventListener('playing', resumeAudio);
      audioElement.addEventListener('timeupdate', resumeAudio);
      const playerWrap = audioElement.closest('.v0ck, .album-audio-wrapper, .embed-responsive') || audioElement.parentElement;
      if (playerWrap) {
        playerWrap.addEventListener('click', resumeAudio, { passive: true });
        playerWrap.addEventListener('pointerdown', resumeAudio, { passive: true });
      }
      ['click', 'pointerdown', 'keydown', 'touchstart'].forEach(evt => {
        window.addEventListener(evt, resumeAudio, { passive: true });
      });
    }
  };


  // Content Warning Logic
  const cwModal = document.getElementById('content-warning-modal');
  if (cwModal) {
    if (!localStorage.getItem('content_warning_accepted')) {
      cwModal.style.display = 'flex';
      document.body.classList.add('modal-open');
    }

    const acceptBtn = document.getElementById('cw-accept');
    const declineBtn = document.getElementById('cw-decline');

    if (acceptBtn) {
      acceptBtn.addEventListener('click', () => {
        localStorage.setItem('content_warning_accepted', 'true');
        cwModal.style.display = 'none';
        document.body.classList.remove('modal-open');
      });
    }

    if (declineBtn) {
      declineBtn.addEventListener('click', () => {
        window.location.href = 'https://duckduckgo.com';
      });
    }
  }

  // Initial call
  window.initBackground();
  window.initVisualizer();

  // Ruffle / SWF support — only register when the site has SWF enabled.
  // The static ruffle.js <script> tag is injected by the server only on SWF item pages.
  // This listener handles AJAX navigation TO a SWF item from any other page.
  if (window.f0ckSession?.enable_swf) {
    // Global Ruffle configuration
    window.RufflePlayer = window.RufflePlayer || {};
    window.RuffleConfig = window.RuffleConfig || {};
    window.RufflePlayer.config = window.RuffleConfig = {
        "pageVisibility": window.f0ckSession?.ruffle_background === false,
        "backgroundExecution": "Unthrottled",
        "autoplay": "on",
        "unmuteOverlay": "hidden",
        "letterbox": "on",
        "warnOnUnsupportedContent": false,
        "contextMenu": "on",
        "splashScreen": true
      };

    let ruffleKeepAliveApplied = false;
    let activeRuffleGesture = null;

    // Window-level listeners for desktop mouse gestures (singleton)
    window.addEventListener('mousemove', e => {
        if (activeRuffleGesture) {
            activeRuffleGesture.handleMove(e.clientX, e.clientY, e);
        }
    });
    window.addEventListener('mouseup', e => {
        if (activeRuffleGesture) {
            activeRuffleGesture.handleEnd();
            activeRuffleGesture = null;
        }
    });

    const applyRuffleKeepAlive = () => {
      if (ruffleKeepAliveApplied) return;
      
      window.f0ckDebug("[Ruffle] Registering background keep-alive patches (Browser Level)...");
      
      try {
        const docProto = Object.getPrototypeOf(document);
        const visProp = Object.getOwnPropertyDescriptor(docProto, 'visibilityState') || Object.getOwnPropertyDescriptor(document, 'visibilityState');
        const hiddenProp = Object.getOwnPropertyDescriptor(docProto, 'hidden') || Object.getOwnPropertyDescriptor(document, 'hidden');

        if (visProp && visProp.get) {
          const originalVisGet = visProp.get;
          Object.defineProperty(document, 'visibilityState', {
            get: () => {
              if (window.f0ckSession?.ruffle_background !== false && document.getElementById('ruffle-container')) {
                return 'visible';
              }
              return originalVisGet.call(document);
            },
            configurable: true
          });
        }

        if (hiddenProp && hiddenProp.get) {
          const originalHiddenGet = hiddenProp.get;
          Object.defineProperty(document, 'hidden', {
            get: () => {
              if (window.f0ckSession?.ruffle_background !== false && document.getElementById('ruffle-container')) {
                return false;
              }
              return originalHiddenGet.call(document);
            },
            configurable: true
          });
        }

        document.addEventListener('visibilitychange', (e) => {
          if (window.f0ckSession?.ruffle_background !== false && document.getElementById('ruffle-container')) {
            e.stopImmediatePropagation();
          }
        }, true);

        window.addEventListener('blur', (e) => {
          if (window.f0ckSession?.ruffle_background !== false && document.getElementById('ruffle-container')) {
            e.stopImmediatePropagation();
          }
        }, true);

      } catch (e) {
        console.error("[Ruffle] Failed to apply keep-alive patches:", e);
      }

      ruffleKeepAliveApplied = true;
    };

    function initRuffle() {
      const container = document.getElementById('ruffle-container');
      if (!container || container.querySelector('ruffle-player') || container.querySelector('ruffle-object')) return;

      // Ensure v0ck.css is loaded for HUD styles
      if (!document.querySelector('link[href^="/s/css/v0ck.css"]')) {
          document.head.insertAdjacentHTML("beforeend", `<link rel="stylesheet" href="/s/css/v0ck.css">`);
      }

      applyRuffleKeepAlive();

      // Detect whether the item is currently behind a blur overlay.
      // If so, load the SWF with autoplay:"off" so it stays paused until the user reveals it.
      const mediaObj = container.closest('.media-object');
      let blurActive = false;
      if (mediaObj && !mediaObj.classList.contains('revealed') && localStorage.getItem('blurDetail') !== 'false') {
        const blurNsfw    = localStorage.getItem('blurNsfw')    === 'true';
        const blurNsfl    = localStorage.getItem('blurNsfl')    === 'true';
        const blurSfw     = localStorage.getItem('blurSfw')     === 'true';
        const blurUntagged = localStorage.getItem('blurUntagged') === 'true';
        const mode = mediaObj.getAttribute('data-mode');
        blurActive =
          (mode === 'nsfw'     && blurNsfw)    ||
          (mode === 'nsfl'     && blurNsfl)    ||
          (mode === 'sfw'      && blurSfw)     ||
          (mode === 'untagged' && blurUntagged);
      }

      // Update config with latest session preferences just before creation
      if (window.RufflePlayer) {
        window.RufflePlayer.config = window.RuffleConfig = {
          ...window.RuffleConfig,
          "autoplay": blurActive ? "off" : "on",
          "pageVisibility": window.f0ckSession?.ruffle_background === false,
          "backgroundExecution": window.f0ckSession?.ruffle_background === false ? undefined : "Unthrottled",
          "splashScreen": true
        };
      }

      // Patch WebGL getContext to force preserveDrawingBuffer:true so canvas
      // frames can be captured after Ruffle renders (WebGL clears buffers by default)
      const _origGetCtx = HTMLCanvasElement.prototype.getContext;
      HTMLCanvasElement.prototype.getContext = function(type, attrs) {
        if (type === 'webgl' || type === 'webgl2' || type === 'experimental-webgl') {
          attrs = Object.assign({}, attrs, { preserveDrawingBuffer: true });
        }
        return _origGetCtx.call(this, type, attrs);
      };
      // Restore after Ruffle has created its context
      setTimeout(() => { HTMLCanvasElement.prototype.getContext = _origGetCtx; }, 8000);

      function createPlayer() {
        if (!window.RufflePlayer) return;
        if (typeof window.RufflePlayer.newest !== 'function') return; // WASM still initializing
        const ruffle = window.RufflePlayer.newest();
        if (!ruffle) return;
        const player = ruffle.createPlayer();
        player.style.width = '100%';
        player.style.height = '100%';

        container.appendChild(player);
        window.initBackground();

        // Apply volume after the SWF has loaded to prevent it from being overwritten
        player.addEventListener('loadedmetadata', () => {
            const sessionVolume = window.f0ckSession?.ruffle_volume;
            const savedVolume = localStorage.getItem('volume');
            
            if (sessionVolume !== undefined && sessionVolume !== null) {
                player.volume = parseFloat(sessionVolume);
            } else if (savedVolume !== null) {
                player.volume = parseFloat(savedVolume);
            } else {
                player.volume = 0.5;
            }
        });

        player.load(container.dataset.swf).catch(err => {
          console.error('[Ruffle] Failed to load SWF:', err);
          container.innerHTML = '<div style="color:#e040fb;text-align:center;padding:2em;">⚡ SWF playback failed</div>';
        });

        // --- Gesture Support (Mobile & Desktop) ---
        // Inject HUD, Overlay, and Danmaku toggle
        const existingHUD = container.querySelector('.v0ck_hud');
        if (!existingHUD) {
            // Determine initial danmaku state
            const dmConfigDefault = (window.f0ckSession && window.f0ckSession.enable_danmaku !== undefined)
                ? !!window.f0ckSession.enable_danmaku : true;
            const dmSaved = localStorage.getItem('danmaku');
            const dmOn = (dmSaved !== null) ? (dmSaved !== 'false') : dmConfigDefault;

            container.insertAdjacentHTML('beforeend', `
                <div class="v0ck_hud v0ck_hidden" style="z-index: 10000;">
                    <svg viewBox="0 0 24 24">
                        <use class="v0ck_hud_icon v0ck_hud_volume_full" href="/s/img/v0ck.svg#volume_full"></use>
                        <use class="v0ck_hud_icon v0ck_hud_volume_mid v0ck_hidden" href="/s/img/v0ck.svg#volume_mid"></use>
                        <use class="v0ck_hud_icon v0ck_hud_volume_mute v0ck_hidden" href="/s/img/v0ck.svg#volume_mute"></use>
                    </svg>
                    <div class="v0ck_hud_bar_container">
                        <div class="v0ck_hud_bar"></div>
                    </div>
                </div>
                <div class="ruffle-gesture-overlay"></div>
                <button class="ruffle-danmaku-toggle${dmOn ? ' active' : ''}" title="Toggle Danmaku">
                    <i class="fa-solid fa-bars-staggered"></i>
                </button>
                <button class="ruffle-fullscreen-toggle" title="Toggle Fullscreen">
                    <i class="fa-solid fa-expand"></i>
                </button>
            `);

            // Wire up fullscreen toggle
            const fsBtn = container.querySelector('.ruffle-fullscreen-toggle');
            if (fsBtn) {
                fsBtn.addEventListener('click', (e) => {
                    e.stopPropagation();
                    if (!document.fullscreenElement) {
                        container.requestFullscreen().catch(err => console.error(err));
                    } else {
                        document.exitFullscreen();
                    }
                });
                
                document.addEventListener('fullscreenchange', () => {
                    if (document.fullscreenElement === container) {
                        fsBtn.innerHTML = '<i class="fa-solid fa-compress"></i>';
                    } else {
                        fsBtn.innerHTML = '<i class="fa-solid fa-expand"></i>';
                    }
                });
            }

            // Wire up danmaku toggle
            const dmBtn = container.querySelector('.ruffle-danmaku-toggle');
            if (dmBtn) {
                dmBtn.addEventListener('click', (e) => {
                    e.stopPropagation();
                    if (window.danmakuInstance) {
                        window.danmakuInstance.toggle();
                        const on = window.danmakuInstance.isEnabled();
                        dmBtn.classList.toggle('active', on);
                        localStorage.setItem('danmaku', on ? 'true' : 'false');
                        if (window.flashMessage) window.flashMessage(on ? 'Danmaku ON' : 'Danmaku OFF', 1800);
                    } else {
                        dmBtn.classList.toggle('active');
                        const newVal = dmBtn.classList.contains('active');
                        localStorage.setItem('danmaku', newVal ? 'true' : 'false');
                        if (window.flashMessage) window.flashMessage(newVal ? 'Danmaku ON' : 'Danmaku OFF', 1800);
                    }
                });

                // Mobile: show button briefly on tap, then auto-hide
                const isMobileDevice = /Mobi/i.test(navigator.userAgent) || ('ontouchstart' in window);
                if (isMobileDevice) {
                    let dmHideTimer = null;
                    const showDmBtn = () => {
                        dmBtn.style.opacity = '1';
                        dmBtn.style.pointerEvents = 'auto';
                        if (fsBtn) {
                            fsBtn.style.opacity = '1';
                            fsBtn.style.pointerEvents = 'auto';
                        }
                        clearTimeout(dmHideTimer);
                        dmHideTimer = setTimeout(() => {
                            dmBtn.style.opacity = '';
                            dmBtn.style.pointerEvents = '';
                            if (fsBtn) {
                                fsBtn.style.opacity = '';
                                fsBtn.style.pointerEvents = '';
                            }
                        }, 3000);
                    };
                    container.addEventListener('touchstart', showDmBtn, { passive: true });
                    // Keep visible while interacting with the button itself
                    dmBtn.addEventListener('touchstart', (e) => {
                        e.stopPropagation();
                        showDmBtn();
                    }, { passive: true });
                    if (fsBtn) {
                        fsBtn.addEventListener('touchstart', (e) => {
                            e.stopPropagation();
                            showDmBtn();
                        }, { passive: true });
                    }
                }
            }
        }

        const hud = container.querySelector('.v0ck_hud');
        const hudBar = hud.querySelector('.v0ck_hud_bar');
        const hudIcon = hud.querySelector('.v0ck_hud_icon');
        let startX, startY, startVol, isRightSide, gestureType;
        let hudTimer;
        let isDragging = false;

        const showHUD = (vol) => {
            if (!hud) return;
            hud.classList.remove('v0ck_hidden');
            hudBar.style.width = `${vol * 100}%`;
            
            const hudSymbols = hud.querySelectorAll('.v0ck_hud_icon');
            hudSymbols.forEach(s => s.classList.add('v0ck_hidden'));
            
            let targetClass = 'v0ck_hud_volume_full';
            if (vol === 0) {
                targetClass = 'v0ck_hud_volume_mute';
            } else if (vol <= 0.5) {
                targetClass = 'v0ck_hud_volume_mid';
            }
            
            const activeSymbol = [...hudSymbols].find(s => s.classList.contains(targetClass));
            if (activeSymbol) {
                activeSymbol.classList.remove('v0ck_hidden');
            }
            
            clearTimeout(hudTimer);
            hudTimer = setTimeout(() => hud && hud.classList.add('v0ck_hidden'), 1000);
        };

        const handleStart = (clientX, clientY) => {
            const rect = container.getBoundingClientRect();
            const x = clientX - rect.left;
            isRightSide = x > rect.width / 2;
            gestureType = 'none';
            if (isRightSide) {
                startX = clientX;
                startY = clientY;
                startVol = player.volume;
                isDragging = true;
                return true;
            }
            return false;
        };

        const handleMove = (clientX, clientY, e) => {
            if (!isDragging || !isRightSide || gestureType === 'other') return;
            const dx = Math.abs(clientX - startX);
            const dy = Math.abs(clientY - startY);

            if (gestureType === 'none') {
                if (dy > dx && dy > 5) {
                    gestureType = 'volume';
                } else if (dx > dy && dx > 5) {
                    gestureType = 'other';
                    return;
                } else {
                    return;
                }
            }

            if (gestureType === 'volume' && player) {
                const deltaY = startY - clientY;
                const sensitivity = 200;
                let newVol = startVol + (deltaY / sensitivity);
                newVol = Math.max(0, Math.min(1, newVol));
                player.volume = newVol;
                localStorage.setItem('volume', newVol);
                if (window.f0ckSession) window.f0ckSession.ruffle_volume = newVol;
                showHUD(newVol);
                if (e && e.cancelable) e.preventDefault();
            }
        };

        const handleEnd = () => {
            isDragging = false;
        };

        // Touch listeners (attached to container for mobile)
        container.addEventListener('touchstart', e => handleStart(e.touches[0].clientX, e.touches[0].clientY), { passive: false });
        container.addEventListener('touchmove', e => handleMove(e.touches[0].clientX, e.touches[0].clientY, e), { passive: false });
        container.addEventListener('touchend', handleEnd, { passive: true });
 
        // Mouse gesture listeners attached to overlay to bypass Ruffle capture on desktop
        const overlay = container.querySelector('.ruffle-gesture-overlay');
        if (overlay) {
            overlay.addEventListener('mousedown', e => {
                if (e.button !== 0) return;
                if (handleStart(e.clientX, e.clientY)) {
                    e.preventDefault(); 
                    activeRuffleGesture = { handleMove, handleEnd };
                }
            });
        }
      }

      const tryCreatePlayer = () => {
        // createPlayer() has its own internal checks (RufflePlayer exists, newest() is a function, returns value)
        createPlayer();
        return !!container.querySelector('ruffle-player, ruffle-object');
      };

      const pollForPlayer = () => {
        const wait = setInterval(() => {
          if (tryCreatePlayer()) {
            clearInterval(wait);
          }
        }, 100);
        setTimeout(() => clearInterval(wait), 10000);
      };

      // Check if ruffle.js has actually been loaded (not just our pre-config stub)
      const ruffleScriptLoaded = !!document.querySelector('script[src="/s/ruffle/ruffle.js"]');

      if (ruffleScriptLoaded) {
        // Script is in the DOM — WASM may still be initializing, poll for player
        if (!tryCreatePlayer()) {
          pollForPlayer();
        }
      } else {
        // Inject ruffle.js dynamically (AJAX navigation from a non-flash page)
        const s = document.createElement('script');
        s.src = '/s/ruffle/ruffle.js';
        s.onload = () => pollForPlayer();
        document.head.appendChild(s);
      }

    }
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', initRuffle, { once: true });
    } else {
      initRuffle();
    }
    document.addEventListener('f0ck:contentLoaded', initRuffle);

    // Synchronize volume across tabs (e.g. if changed in a v0ck player elsewhere)
    window.addEventListener('storage', (e) => {
      if (e.key === 'volume' && e.newValue !== null) {
        const player = document.querySelector('ruffle-player');
        if (player) {
          player.volume = parseFloat(e.newValue);
        }
      }
    });

    window.addEventListener('blur', (e) => {
      if (document.getElementById('ruffle-container')) {
        e.stopImmediatePropagation();
      }
    }, true);
  }

  window.syncNavbarHeight = () => {
    const nav = document.querySelector('.navbar');
    if (nav) document.documentElement.style.setProperty('--navbar-h', nav.offsetHeight + 'px');
  };
  window.syncNavbarHeight();
  window.addEventListener('resize', window.syncNavbarHeight);
  const _navEl = document.querySelector('.navbar');
  if (_navEl && window.ResizeObserver) {
    new ResizeObserver(window.syncNavbarHeight).observe(_navEl);
  }

  // Sidebar state init — apply persisted hidden/visible state on load
  window.initSidebarRightToggle = () => {
    // One-time migration: clear the old mobile-default-hidden value so existing
    // users see the sidebar again now that it defaults to visible everywhere
    if (!localStorage.getItem('sidebarRightMigrated')) {
      localStorage.removeItem('sidebarRightHidden');
      localStorage.setItem('sidebarRightMigrated', '1');
    }

    let hiddenValue = localStorage.getItem('sidebarRightHidden');
    let hidden;
    if (hiddenValue === null) {
      hidden = (window.f0ckSession && window.f0ckSession.hide_sidebar_default) ? true : false; // Default based on config
      localStorage.setItem('sidebarRightHidden', hidden);
    } else {
      hidden = hiddenValue === 'true';
    }
    document.body.classList.toggle('sidebar-right-hidden', hidden);

    // Always force-hide on very small screens regardless of saved preference
    if (window.innerWidth <= 599) {
      document.body.classList.add('sidebar-right-hidden');
    }
  };
  window.initSidebarRightToggle();

  // Auto-hide sidebar on very small screens (≤599px), restore on wider
  (() => {
    const mq = window.matchMedia('(max-width: 599px)');
    const applyBreakpoint = (e) => {
      // Freeze transitions so the class change is instant (no sliding during resize)
      const sidebar = document.querySelector('.global-sidebar-right, .item-sidebar-right, .index-sidebar-right');
      const wrappers = document.querySelectorAll('.index-layout-wrapper, .item-layout-container, .pagination-container-fluid, .pagewrapper');
      if (sidebar) sidebar.style.setProperty('transition', 'none', 'important');
      wrappers.forEach(w => w.style.setProperty('transition', 'none', 'important'));

      if (e.matches) {
        // Entering narrow: force-hide without touching localStorage
        document.body.classList.add('sidebar-right-hidden');
      } else {
        // Leaving narrow: restore from saved preference
        const saved = localStorage.getItem('sidebarRightHidden');
        const hidden = saved === 'true';
        document.body.classList.toggle('sidebar-right-hidden', hidden);
      }

      // Force reflow then restore transitions
      if (sidebar) void sidebar.offsetWidth;
      requestAnimationFrame(() => {
        if (sidebar) sidebar.style.removeProperty('transition');
        wrappers.forEach(w => {
          w.style.removeProperty('transition');
          w.style.removeProperty('padding-right');
          w.style.removeProperty('right');
        });
        if (typeof window.redrawBgCanvas === 'function') {
          window.redrawBgCanvas();
        }
      });
    };
    mq.addEventListener('change', applyBreakpoint);
    applyBreakpoint(mq); // run once on init
  })();

  const loadPageAjax = async (url, replace = true, options = {}) => {
    if (isNavigating) return;

    const shouldReplaceHistory = options.replaceHistory ?? false;

    // Immediately restore scrollability and hide modals
    if (window.resetGlobalScrollState) window.resetGlobalScrollState();
    if (window.hideAllModals) window.hideAllModals();
    if (window.closeOnaraModal) window.closeOnaraModal({ skipHistory: true });

    isNavigating = true;

    // ── Scroller-active cleanup ──────────────────────────────────────────────
    // When leaving the abyss scroller page, undo ALL the inline style overrides
    // that were applied so the main-site layout is fully restored.
    if (document.body.classList.contains('scroller-active')) {
      document.head.querySelectorAll('[data-pjax-abyss]').forEach(el => el.remove());
      document.body.classList.remove('scroller-active', 'gallery-open');

      // Restore body
      ['overflow', 'background', 'height'].forEach(p => document.body.style.removeProperty(p));

      // Restore navbar
      const _nav = document.querySelector('nav.navbar');
      if (_nav) _nav.style.removeProperty('display');

      // Restore sidebar
      const _sb = document.querySelector('.global-sidebar-right');
      if (_sb) _sb.style.removeProperty('display');

      // Restore sidebar drag zones (desktop edge hints)
      const _dz = document.getElementById('sidebar-drag-zone');
      if (_dz) _dz.style.removeProperty('display');
      const _ldz = document.getElementById('sidebar-left-drag-zone');
      if (_ldz) _ldz.style.removeProperty('display');

      // Restore pagewrapper
      const _pw = document.querySelector('.pagewrapper');
      if (_pw) ['height', 'padding', 'margin', 'overflow'].forEach(p => _pw.style.removeProperty(p));

      // Restore #main (element persists across PJAX, its inline styles must be cleared)
      const _m = document.getElementById('main');
      if (_m) ['height', 'overflow'].forEach(p => _m.style.removeProperty(p));

      // Stop all media
      document.querySelectorAll('video, audio').forEach(el => { try { el.pause(); el.removeAttribute('src'); el.load(); } catch {} });
      document.querySelectorAll('ruffle-player').forEach(el => { try { el.remove(); } catch {} });
    }

    // Immediately close image modal on any navigation
    if (window.closeImageModal) window.closeImageModal();

    // Auto-clear notification highlight if opening an item
    const itemIdMatch = url.match(/\/(\d+)(\?.*|#.*)?$/);
    if (itemIdMatch) {
      const itemId = itemIdMatch[1];
      document.querySelectorAll(`a.thumb.has-notif[href$="/${itemId}"]`).forEach(el => {
        el.classList.remove('has-notif');
      });
    }

    window.dispatchEvent(new Event('pjax:start'));

    const currentContainer = document.querySelector('.index-container');
    const currentScroll = currentContainer ? currentContainer.scrollTop : window.scrollY;

    // Save scroll position for the current page before we leave it (only for new navigations)
    if (!options.skipPush && !shouldReplaceHistory) {
       const currentState = history.state || {};
       history.replaceState({ ...currentState, scroll: currentScroll }, document.title, window.location.href);
    }

    posts = document.querySelector('.posts');


    // Unified state management
    const urlObj = new URL(url, window.location.origin);
    const pathname = urlObj.pathname;

    const isUserHall = pathname.match(/\/user\/[^/?]+\/hall\/([^/?]+)/);
    const isUserHalls = pathname.match(/\/user\/[^/?]+\/halls\/?(?:$|\?)/);
    const isProfile = !isUserHall && !isUserHalls && pathname.match(/\/user\/([^/?]+)(?:$|\?|$)/) && !pathname.match(/\/user\/[^/]+\/(f0cks|favs|comments|hall|halls)/);
    const isUserF0cks = pathname.match(/\/user\/([^/?]+)\/f0cks/);
    const isUserFavs = pathname.match(/\/user\/([^/?]+)\/favs/);
    const isGuestFavs = pathname.match(/^\/favs(?:\/|$|\?)/);
    const isTags = pathname.match(/\/tags\/?(?:$|\?)/);
    const isComments = pathname.match(/\/user\/([^/?]+)\/comments\/?(?:$|\?)/);
    const isNotifs = pathname.match(/\/notifications\/?(?:$|\?)/);
    const isHall = pathname.match(/\/h\/([^/?]+)(?:$|\?)/);
    const isHalls = pathname.match(/\/halls\/?(?:$|\?)/);
    const isAdmin = !!pathname.match(/^\/admin/);
    const isMod = !!pathname.match(/^\/mod/);
    const isSettings = pathname.match(/\/settings\/?(?:$|\?)/);
    const isStatic = pathname.match(/\/(about|rules|terms|upload|subscriptions|stats|docs|discord|ranking|meme|memes)($|\/|\?)/);
    const isUpload = pathname.match(/\/upload\/?(?:$|\?)/);
    const parts = pathname.split('/').filter(Boolean);
    const isItem = !pathname.match(/\/p\//) && (
      pathname.match(/^\/\d+/) || pathname.match(/^\/[a-zA-Z0-9_-]{11}(?:[?#]|$)/) ||
      (parts.length >= 3 && (parts[0] === 'tag' || parts[0] === 'user' || parts[0] === 'h') && (/^\d+$/.test(parts[parts.length - 1]) || /^[a-zA-Z0-9_-]{11}$/.test(parts[parts.length - 1]))) ||
      (parts.length >= 2 && parts[0] === 'favs' && (/^\d+$/.test(parts[parts.length - 1]) || /^[a-zA-Z0-9_-]{11}$/.test(parts[parts.length - 1])))
    );
    const isMessages = !!pathname.match(/^\/messages(\/|$)/);
    const isAbyss    = !!pathname.match(/^\/abyss(\/|$|\?|#)/) || pathname === '/abyss';
    const isGrid = !isProfile && !isUserHall && !isUserHalls && !isHall && !isHalls && !isTags && !isComments && !isNotifs && !isItem && !isAdmin && !isMod && !isSettings && !isStatic && !isUpload && !isMessages && !isAbyss;

    if (isItem) {
       isNavigating = false;
       return loadItemAjax(url, replace, options);
    }


    // Check for cached grid — fires on ANY navigation to a grid URL (not just browser back/forward).
    // The fade-out of main must NOT happen before this check: doing so causes the
    // IntersectionObserver to fire for every cached thumbnail at once when they re-enter
    // the viewport, loading them all simultaneously instead of progressively.
    if (isGrid) {
       const targetCacheKey = urlObj.pathname + urlObj.search;
       if (options.bypassCache) {
          gridCacheMap.delete(targetCacheKey);
       }
       if (gridCacheMap.has(targetCacheKey) && !options.bypassCache) {
          const cache = gridCacheMap.get(targetCacheKey);
          // Keep cache alive — cleared on mode/filter changes via gridCacheMap.clear()

          if (navbar) navbar.classList.add('pbwork');
          if (!document.body.classList.contains('onara-modal-open')) stopMedia();

          // Fade out background canvas (item view blur)
          const canvas = document.getElementById('bg');
          if (canvas) {
            canvas.style.transition = 'none';
            canvas.style.opacity = '0';
            canvas.classList.remove('fader-in');
            canvas.classList.add('fader-out');
            requestAnimationFrame(() => {
               setTimeout(() => { canvas.style.transition = ''; canvas.style.opacity = ''; }, 50);
            });
          }

          // Restore DOM
          if (main) {
             main.innerHTML = '';
             main.appendChild(cache.node);
             cache.node.style.display = '';
             cache.node.classList.remove('cached-grid');
             main.className = '';
             document.body.classList.remove('legacy-view');
             ensureLayoutClass();
             if (!document.body.classList.contains('onara-modal-open')) {
               document.body.style.overflow = '';
               document.body.style.height = '';
             }
             const paginationWrapper = document.querySelector('.pagination-wrapper');
             if (paginationWrapper && cache.pagination) paginationWrapper.innerHTML = cache.pagination;
             const restoredPosts = cache.node.querySelector('.posts');
             if (restoredPosts && restoredPosts._scrollHandler) {
                 const sc = restoredPosts.closest('.index-container') || window;
                 restoredPosts._scrollContainer = sc;
                 sc.addEventListener('scroll', restoredPosts._scrollHandler, { passive: true });
                 if (restoredPosts._infiniteState) restoredPosts._infiniteState.loading = false;
             }
          }

          // Update URL bar (only for explicit clicks, not browser back/forward which already did it)
          if (!options.skipPush && !document.body.classList.contains('onara-modal-open')) {
            if (shouldReplaceHistory) {
              history.replaceState({}, '', url);
            } else {
              history.pushState({}, '', url);
            }
          }

          // Restore scroll position
          requestAnimationFrame(() => {
            const ic = document.querySelector('.index-container');
            if (ic && cache.scroll !== undefined) {
              ic.scrollTo(0, cache.scroll);
            } else {
              window.scrollTo(0, cache.scroll || 0);
            }
          });

          // Update title
          const urlParamsC = new URLSearchParams(urlObj.search);
          const pageC = urlParamsC.get('p') || urlParamsC.get('page');
          document.title = `${window.f0ckDomain}${pageC ? ` - page ${pageC}` : ''}`;

          document.querySelectorAll('.pagination-container-fluid').forEach(el => el.style.display = '');
          if (navbar) navbar.classList.remove('pbwork');
          window.updateVisitIndicators();
          window.initLazyLoading();
          if (window.initSidebarRightToggle) window.initSidebarRightToggle();
          if (window.syncNavbarHeight) window.syncNavbarHeight();
          window.NotificationSystemInstance?.pollDebounced?.();
          window._onaraCurrentGridUrl = urlObj.pathname + urlObj.search;
          isNavigating = false;
          return; // SKIP FETCH
       }
    }

    // Cache miss — full fetch path. Fade out now (safe: no cached thumbnails in DOM).
    if (main) {
        main.classList.add('grid-transition');
        main.classList.remove('show');
    }


    // Handle transition from Item View or User Profile back to Grid View
    const isOnProfilePage = main && main.querySelector('.profile_head');
    const isOnItemView = main && main.querySelector('.container .content');
    const isOnTagsPage = main && main.querySelector('.tags-grid');
    const isOnSettingsPage = main && main.querySelector('.settings');
    const isOnNotifPage = main && main.querySelector('.notif-history-container');
    const isOnUploadPage = main && main.querySelector('.upload-container');

    const isListView = isGrid || isUserHall || isUserHalls || isHall || isHalls || isNotifs || isProfile || isTags || isComments || isUserF0cks || isUserFavs || isAdmin || isMod || isSettings || isStatic || isUpload;
    const isOnStructuralPage = main && (main.querySelector('.pagewrapper') || main.closest('.pagewrapper'));
    const isOnAdminPage = main && (main.querySelector('.container h1')?.innerText.match(/APPROVAL QUEUE/) || main.querySelector('.admin-container') || main.querySelector('.mod-container'));
    const isOnStaticPage = main && (main.querySelector('.static-page') || main.querySelector('.about-container'));

    if (isListView && (!posts || isOnProfilePage || isOnTagsPage || isOnSettingsPage || isOnNotifPage || isOnItemView || isOnAdminPage || isOnStaticPage || isOnUploadPage || isOnStructuralPage) && main) {



      main.className = ''; // Reset class

      // Clear legacy-view state (layout-lock) now that we are swapping to a list view
      document.body.classList.remove('legacy-view');
      ensureLayoutClass();
      if (!document.body.classList.contains('onara-modal-open')) {
        document.body.style.overflow = '';
        document.body.style.height = '';
        stopMedia(); // Ensure media stops when leaving item view
      }

      // Fade out background canvas for smooth transition to black
      const canvas = document.getElementById('bg');
      if (canvas) {
        canvas.classList.add('fast-fade');
        canvas.classList.remove('fader-in');
        canvas.classList.add('fader-out');
      }

      // Rescue existing pagination container before wiping main, so it never disappears from the DOM
      const existingPagContainer = main.querySelector('.pagination-container-fluid');

      // Clear entire main content and create fresh grid structure (with sidebar for index)
      const indexWrapper = document.createElement('div');
      indexWrapper.className = 'index-layout-wrapper';
      indexWrapper.innerHTML = '<div class="index-container"><div class="posts grid-transition"></div></div>';

      main.innerHTML = '';
      main.appendChild(indexWrapper);

      // Re-attach rescued pagination (preserves visibility state) or create a fresh hidden one
      if (existingPagContainer) {
        indexWrapper.appendChild(existingPagContainer);
      } else {
        indexWrapper.insertAdjacentHTML('beforeend',
          '<div class="pagination-container-fluid" style="display: none;">'
          + '<div class="pagination-wrapper bottom-pagination fixed-pagination"></div>'
          + '</div>');
      }

      posts = main.querySelector('.posts');
      replace = true; // Force replacement
    }

    const hash = new URL(url, window.location.origin).hash;

    // Show loading indicator
    if (navbar) navbar.classList.add("pbwork");

    if (replace && posts) {
      posts.classList.add('grid-transition');
      posts.classList.remove('show');
    }



    try {
      // ... same parameter extraction logic ...
      let page = 1;
      const pMatch = url.match(/\/p\/(\d+)/);
      if (pMatch) page = pMatch[1];

      let tag = null, user = null, mime = null, hall = null;
      const tagMatch = url.match(/\/tag\/([^/?]+)/);
      if (tagMatch) tag = decodeURIComponent(tagMatch[1]);

      const hallMatch = url.match(/\/h\/([^/?]+)/);
      if (hallMatch) hall = decodeURIComponent(hallMatch[1]);

      const userMatch = url.match(/\/user\/([^/]+)/);
      // Don't treat user-hall browse URLs as user filter — they have their own server-side route
      if (userMatch && !url.match(/\/user\/[^/]+\/(favs|f0cks|comments|hall|halls)/) && !isUserHall && !isUserHalls) {
        user = decodeURIComponent(userMatch[1]);
      }

      const favMatch = url.match(/\/user\/([^/]+)\/favs/);
      const guestFavMatch = url.match(/^\/favs(?:\/|$|\?)/);
      const f0cksMatch = url.match(/\/user\/([^/]+)\/f0cks/);

      let isFav = false;
      let isGuestFavMode = false;
      if (favMatch) {
        user = decodeURIComponent(favMatch[1]);
        isFav = true;
      } else if (guestFavMatch && (!window.f0ckSession || !window.f0ckSession.user)) {
        isFav = true;
        isGuestFavMode = true;
      } else if (f0cksMatch) {
        user = decodeURIComponent(f0cksMatch[1]);
      }

      const mimeMatch = url.match(/\/(image|audio|video)/);
      if (mimeMatch) mime = mimeMatch[1];

      let ajaxUrl = `/ajax/items/?page=${page}&mode=${window.activeMode}`;
      if (tag) ajaxUrl += `&tag=${encodeURIComponent(tag)}`;
      if (hall) ajaxUrl += `&hall=${encodeURIComponent(hall)}`;
      if (isGuestFavMode) {
        const guestFavIds = f0ckGuestFavs.get();
        if (guestFavIds.length === 0) {
          if (replace && posts) {
            posts.innerHTML = `<div class="private-favs-msg" style="padding: 50px 20px; text-align: center; color: var(--text-muted); font-size: 1.1em;"><i class="fa-regular fa-heart" style="font-size: 2.5em; margin-bottom: 15px; display: block; opacity: 0.5;"></i>${(window.f0ckI18n && window.f0ckI18n.no_favs) || 'No favorites yet'}</div>`;
            posts.classList.add('show');
          }
          const existingPagContainer = document.querySelector('.pagination-container-fluid');
          if (existingPagContainer) existingPagContainer.style.display = 'none';
          if (navbar) navbar.classList.remove('pbwork');
          isNavigating = false;
          return;
        }
        const eps = 24;
        const pageNum = parseInt(page, 10) || 1;
        const sliceIds = guestFavIds.slice((pageNum - 1) * eps, pageNum * eps);
        ajaxUrl = `/ajax/items/?fav=true&ids=${encodeURIComponent(sliceIds.join(','))}&page=${pageNum}&total=${guestFavIds.length}&mode=${window.activeMode}`;
      } else {
        if (user) ajaxUrl += `&user=${encodeURIComponent(user)}`;
        if (isFav) ajaxUrl += `&fav=true`;
      }
      if (mime) ajaxUrl += `&mime=${encodeURIComponent(mime)}`;

      // Preserve tagger filter from URL query string
      const taggerMatch = urlObj.searchParams.get('tagger');
      if (taggerMatch) ajaxUrl += `&tagger=${encodeURIComponent(taggerMatch)}`;

      const isRandom = document.cookie.includes('random_mode=1') || url.includes('random=1') || window.location.search.includes('random=1');
      if (isRandom) ajaxUrl += `&random=1`;
      const isStrict = window.f0ckSession?.strict_mode || (localStorage.getItem('search_strict') === 'true');
      if (isStrict || url.includes('strict=1') || window.location.search.includes('strict=1')) {
        ajaxUrl += (ajaxUrl.includes('?') ? '&' : '?') + 'strict=1';
      }

      const needsFullHtmlFetch = isProfile || isUserHall || isUserHalls || isTags || isHall || isHalls || isComments || isNotifs || isAdmin || isMod || isSettings || isStatic || isMessages || isAbyss;

      const fetchHeaders = { 'Credentials': 'include' };
      if (!needsFullHtmlFetch) {
        fetchHeaders['X-Requested-With'] = 'XMLHttpRequest';
      }

      if (window.randomizeLogo) window.randomizeLogo();

      const response = await fetch(needsFullHtmlFetch ? url : ajaxUrl, {
        credentials: 'include',
        headers: fetchHeaders,
        cache: 'no-cache'
      });

      if (needsFullHtmlFetch) {
        if (!main) {
          window.location.href = url;
          return;
        }

        // Fade out blurred background (set during item view) so it doesn't bleed into other pages
        const bgCanvas = document.getElementById('bg');
        if (bgCanvas) {
          bgCanvas.classList.add('fast-fade');
          bgCanvas.classList.remove('fader-in');
          bgCanvas.classList.add('fader-out');
        }

        const html = await response.text();
        const parser = new DOMParser();
        const doc = parser.parseFromString(html, 'text/html');
        const incomingMain = doc.getElementById('main');

        // Detect if the response is a full page (with <html> and <body>) or a partial snippet
        const isFullPage = html.toLowerCase().includes('<body') || html.toLowerCase().includes('<html');

        if (incomingMain || !isFullPage) {
          // Sync HTML and Body state
          if (isFullPage && doc.documentElement) {
              // Full page: Sync attributes (CRITICAL for fullscreen and theme state)
              ['theme', 'res'].forEach(attr => {
                  const val = doc.documentElement.getAttribute(attr);
                  if (attr === 'theme') {
                      if (val && val.trim()) {
                          document.documentElement.setAttribute('theme', val.trim());
                      } else if (!document.documentElement.getAttribute('theme')) {
                          const cookieTheme = document.cookie.match(/(?:^|; )theme=([^;]*)/)?.[1];
                          const fallback = (cookieTheme && decodeURIComponent(cookieTheme)) || window.f0ckDefaultTheme || 'amoled';
                          document.documentElement.setAttribute('theme', fallback);
                      }
                  } else {
                      if (val !== null) document.documentElement.setAttribute(attr, val);
                      else document.documentElement.removeAttribute(attr);
                  }
              });

              // Sync body classes (CRITICAL for layout triggers)
              const persistClasses = ['sidebar-right-hidden', 'bg-active', 'sidebar-left-hidden', 'comments-hidden'];
              const currentlyActive = persistClasses.filter(c => document.body.classList.contains(c));
              
              document.body.className = doc.body.className;
              currentlyActive.forEach(c => document.body.classList.add(c));
          } else {
              // Partial: Reset to default shell state to prevent leakage
              document.documentElement.removeAttribute('res'); // Kill fullscreen
              
              // Ensure we keep a layout class but reset others
              document.body.classList.remove('item-layout-active', 'meme-layout-active'); // Kill known breakers
              ensureLayoutClass();
          }

          // Reset navbar to clean state
          const navbar = document.querySelector('nav.navbar');
          if (navbar) {
              navbar.classList.remove('scrolled', 'pbwork');
          }

          if (!document.body.classList.contains('onara-modal-open')) {
            document.body.style.overflow = '';
            document.body.style.height = '';
            document.body.style.minHeight = '';
          }

          window.f0ckDebug("[loadPageAjax] State synced for " + (isFullPage ? "full page" : "partial"));
          if (window.updateMimeLabel) window.updateMimeLabel();
        }

        if (incomingMain) {
          // Sync #main container class if it exists in response
          main.className = incomingMain.className || '';

          // Ensure main is ready for new content
          if (!main.classList.contains('grid-transition')) {
              main.classList.add('grid-transition');
              main.classList.remove('show');
          }

          // Sync classes carefully — preserve transition classes!
          const preserveClasses = ['grid-transition', 'show'];
          const currentPreserved = preserveClasses.filter(c => main.classList.contains(c));
          
          main.innerHTML = '';
          main.className = incomingMain.className || '';
          currentPreserved.forEach(c => main.classList.add(c));

          const loadedLinks = [];
          const head = document.head;

          // Collect hrefs of <link> tags that the incoming page needs so we can
          // remove previously-injected sheets that are NO LONGER needed.
          const incomingLinkHrefs = new Set();
          incomingMain.querySelectorAll('link[rel="stylesheet"]').forEach(l => {
              const href = l.getAttribute('href');
              if (href) incomingLinkHrefs.add(href.split('?')[0]); // ignore ?v= cache busters
          });
          // Also check direct children of the incoming main
          Array.from(incomingMain.children).forEach(child => {
              if (child.tagName === 'LINK' && child.rel === 'stylesheet') {
                  const href = child.getAttribute('href');
                  if (href) incomingLinkHrefs.add(href.split('?')[0]);
              }
          });

          // Remove any previously page-injected stylesheets not needed by the new page
          head.querySelectorAll('link[data-pjax-injected]').forEach(existing => {
              const bare = (existing.getAttribute('href') || '').split('?')[0];
              if (!incomingLinkHrefs.has(bare)) {
                  existing.remove();
              }
          });

          const waitLink = (link) => {
            return new Promise((resolve) => {
              link.onload = () => resolve();
              link.onerror = () => resolve(); // Resolve on error too to not block forever
              // Fallback for browsers that don't support onload on link
              setTimeout(resolve, 2000); 
            });
          };

          // Move children from incomingMain to main
          // IMPORTANT: Scripts moved from DOMParser are inert. We must clone them to execute.
          while (incomingMain.firstChild) {
            const child = incomingMain.firstChild;

            // SPECIAL CASE: Handle <link> tags specifically to prevent FOUC
            if (child.tagName === 'LINK' && child.rel === 'stylesheet') {
                const href = child.getAttribute('href');
                // Only inject if not already in head
                if (!head.querySelector(`link[href="${href}"]`)) {
                    const newLink = document.createElement('link');
                    Array.from(child.attributes).forEach(attr => newLink.setAttribute(attr.name, attr.value));
                    newLink.setAttribute('data-pjax-injected', '1'); // Mark for cleanup on future navigations
                    head.appendChild(newLink);
                    loadedLinks.push(waitLink(newLink));
                }
                child.remove(); // Don't add to #main
                continue;
            }

            main.appendChild(child);

            // Execute scripts
            if (child.tagName === 'SCRIPT') {
              const newScript = document.createElement('script');
              Array.from(child.attributes).forEach(attr => newScript.setAttribute(attr.name, attr.value));
              newScript.appendChild(document.createTextNode(child.innerHTML));
              child.parentNode.replaceChild(newScript, child);
            } else if (child.tagName === 'STYLE') {
              const newStyle = document.createElement('style');
              Array.from(child.attributes).forEach(attr => newStyle.setAttribute(attr.name, attr.value));
              newStyle.appendChild(document.createTextNode(child.innerHTML));
              child.parentNode.replaceChild(newStyle, child);
            } else if (child.querySelectorAll) {
              // Execute scripts inside child
              child.querySelectorAll('script').forEach(oldScript => {
                const newScript = document.createElement('script');
                Array.from(oldScript.attributes).forEach(attr => newScript.setAttribute(attr.name, attr.value));
                newScript.appendChild(document.createTextNode(oldScript.innerHTML));
                oldScript.parentNode.replaceChild(newScript, oldScript);
              });
              // Execute styles inside child
              child.querySelectorAll('style').forEach(oldStyle => {
                const newStyle = document.createElement('style');
                Array.from(oldStyle.attributes).forEach(attr => newStyle.setAttribute(attr.name, attr.value));
                newStyle.appendChild(document.createTextNode(oldStyle.innerHTML));
                oldStyle.parentNode.replaceChild(newStyle, oldStyle);
              });
              // Collect nested links too (though discouraged)
              child.querySelectorAll('link[rel="stylesheet"]').forEach(oldLink => {
                const href = oldLink.getAttribute('href');
                if (!head.querySelector(`link[href="${href}"]`)) {
                    const newLink = document.createElement('link');
                    Array.from(oldLink.attributes).forEach(attr => newLink.setAttribute(attr.name, attr.value));
                    head.appendChild(newLink);
                    loadedLinks.push(waitLink(newLink));
                }
                oldLink.remove();
              });
            }
          }

          // Wait for all CSS to be ready before showing content
          if (loadedLinks.length > 0) {
              await Promise.all(loadedLinks);
          }

          // Small delay to ensure browser parsed the CSS and applied it
          requestAnimationFrame(() => {
              main.classList.add('grid-transition'); // Ensure it's there
              main.classList.add('show');
          });

          // ── Abyss PJAX: direct style takeover ──────────────────────────
          // Using injected CSS stylesheets loses to existing f0ckm.css rules due
          // to specificity, and height:100% on #main fails because .pagewrapper
          // has height:auto. Directly forcing inline styles is more reliable.
          if (isAbyss) {
            // Still inject scroller head styles (theming, snap, etc.)
            document.head.querySelectorAll('[data-pjax-abyss]').forEach(el => el.remove());
            doc.head.querySelectorAll('style').forEach(style => {
              const s = document.createElement('style');
              s.setAttribute('data-pjax-abyss', '1');
              s.textContent = style.textContent;
              document.head.appendChild(s);
            });
            document.body.classList.add('scroller-active');
            document.title = doc.title || document.title;

            // Direct element overrides—these win over any stylesheet, no specificity battles.
            document.body.style.overflow   = 'hidden';
            document.body.style.background = '#000';
            document.body.style.height     = '100dvh';

            const _nav = document.querySelector('nav.navbar');
            if (_nav) _nav.style.display = 'none';

            const _sb = document.querySelector('.global-sidebar-right');
            if (_sb) _sb.style.display = 'none';

            const _dz = document.getElementById('sidebar-drag-zone');
            if (_dz) _dz.style.display = 'none';

            const _pw = document.querySelector('.pagewrapper');
            if (_pw) {
              _pw.style.height   = '100dvh';
              _pw.style.padding  = '0';
              _pw.style.margin   = '0';
              _pw.style.overflow = 'hidden';
            }

            // #main must be full-screen so #scroller-feed { height:100% } resolves
            main.style.height   = '100dvh';
            main.style.overflow = 'hidden';
          }
        } else {
          console.warn("[loadPageAjax] DOMParser failed to find #main, falling back to window.location.refresh check");
          // Fallback if no #main found
          if (!replace) {
            window.location.href = url;
            return;
          }
          main.innerHTML = html;
        }

        // Sync pagination visibility and content across all layouts
        const incomingPagWrapper = doc.querySelector('.pagination-wrapper');
        
        if (incomingPagWrapper && incomingPagWrapper.innerHTML.trim().length > 10) {
            document.querySelectorAll('.pagination-wrapper').forEach(el => {
                el.innerHTML = incomingPagWrapper.innerHTML;
            });
            document.querySelectorAll('.pagination-container-fluid').forEach(el => {
                el.style.display = 'flex'; // Use flex explicitly
            });
        } else {
            // Hide pagination if not present in the incoming page
            document.querySelectorAll('.pagination-container-fluid').forEach(el => {
                el.style.display = 'none';
            });
        }

        // UPDATE HISTORY BEFORE INITIALIZING SCRIPTS
        if (!options.skipPush && !document.body.classList.contains('onara-modal-open')) {
          if (shouldReplaceHistory) {
            history.replaceState({}, '', url);
          } else {
            history.pushState({}, '', url);
          }
        }

        // Sync sidebar and comments-list layout (Legacy View Only)
        if (document.body.classList.contains('legacy-view')) {
        }

        // Re-init infinite scroll if we just loaded a grid or profile or tags
        if (typeof reinitAllInfiniteScroll === 'function') {
          reinitAllInfiniteScroll();
        } else {
          main.querySelectorAll('.posts, .tags-grid, .subs-grid').forEach(p => initInfiniteScroll(p));
        }

        // Re-init user comments if applicable
        if (isComments) {
          const tryInit = (retries = 0) => {
            if (typeof window.initUserComments === 'function') {
              window.initUserComments();
            } else if (retries < 20) {
              setTimeout(() => tryInit(retries + 1), 50); // Wait 50ms * 20 = 1s max
            }
          };
          tryInit();
        }

        // SCROLL TO TOP ON EVERY NEW NAVIGATION
        if (!options.skipScroll) {
          window.scrollTo(0, 0);
        }

        // Re-init activity feed if applicable
        if (document.getElementById('activity-container')) {
          const tryInitActivity = (retries = 0) => {
            if (typeof window.initActivity === 'function') {
              window.initActivity();
            } else if (retries < 20) {
              setTimeout(() => tryInitActivity(retries + 1), 50);
            }
          };
          tryInitActivity();
        }

        // Re-init upload forms if applicable
        if (main.querySelector('.upload-form') && typeof window.autoInitUploadForms === 'function') {
          window.autoInitUploadForms();
        }

        // Re-init messages pages (inbox or conversation) after AJAX navigation
        if (document.getElementById('dm-inbox-list') || document.getElementById('dm-thread')) {
          const tryInitMessages = (retries = 0) => {
            if (typeof window.initMessagesPage === 'function') {
              window.initMessagesPage();
            } else if (retries < 20) {
              setTimeout(() => tryInitMessages(retries + 1), 50);
            }
          };
          tryInitMessages();
        }

        // Re-bind profile DM button after AJAX navigation to a user page
        if (document.getElementById('send-dm-btn') && window.DMSystem?.setupProfileDmBtn) {
          window.DMSystem.setupProfileDmBtn();
        }

        if (pathname.match(/\/notifications\/?(?:$|\?)/)) {
          document.title = `${window.f0ckDomain} - notifications`;

          // Highlight a specific notification if hash is present (#notif-123)
          const targetHash = urlObj.hash || window.location.hash;
          if (targetHash && targetHash.startsWith('#notif-')) {
            const notifId = targetHash.replace('#notif-', '');
            setTimeout(() => {
              const el = document.querySelector(`.notif-item[data-id="${notifId}"]`);
              if (el) {
                el.scrollIntoView({ behavior: 'smooth', block: 'center' });
                el.classList.add('notif-highlight');
                setTimeout(() => el.classList.remove('notif-highlight'), 2500);
              }
            }, 200);
          }
        }

        // Initial visibility set to none for special pages handled in finally block

        // Extract and populate pagination from loaded HTML if it contains pagination
        const loadedPagination = main.querySelector('.pagination');
        if (loadedPagination) {
          document.querySelectorAll('.pagination-wrapper').forEach(el => {
            el.innerHTML = loadedPagination.outerHTML;
          });
        }

        // Update Title from fetched document if available
        if (doc && doc.title) {
          document.title = doc.title;
        } else if (isProfile) {
          let username = isProfile[1];
          document.title = `${window.f0ckDomain} - user: ${username}`;
        } else if (isUserF0cks) {
          let username = isUserF0cks[1];
          document.title = `${window.f0ckDomain} - ${username}'s f0cks`;
        } else if (isUserFavs) {
          let username = isUserFavs[1];
          document.title = `${window.f0ckDomain} - ${username}'s favorites`;
        } else if (isTags) {
          document.title = `${window.f0ckDomain} - tags`;
        } else if (isGrid) {
          // Reconstruct title for standard grid
          let titleSuffix = '';
          if (tag) titleSuffix = ` - tag: ${tag}`;
          else if (user) titleSuffix = ` - user: ${user}`;
          else if (isHall) titleSuffix = ` - hall: ${isHall[1]}`;
          else if (mime) titleSuffix = ` - ${mime}s`;
          document.title = `${window.f0ckDomain}${titleSuffix}`;
        } else if (isStatic || isUpload) {
          // Fallback for static pages if doc.title failed
          const page = pathname.split('/').filter(Boolean).pop();
          document.title = `${window.f0ckDomain} - ${page}`;
        }

        window.updateVisitIndicators();
        window.initLazyLoading();

        // Notify extensions and re-init systems (e.g. CommentSystem)
        document.dispatchEvent(new Event('f0ck:contentLoaded'));
        if (window.initSidebarRightToggle) window.initSidebarRightToggle();

        // Instant jump to hash (e.g. #c123)
        if (hash) {
          setTimeout(() => {
            const target = document.querySelector(hash);
            if (target) {
              target.scrollIntoView({ behavior: 'smooth', block: 'center' });
              if (hash.startsWith('#c')) target.classList.add('new-item-fade');
            }
          }, 500);
        }

        window._onaraCurrentGridUrl = urlObj.pathname + urlObj.search;
        return;
      }

      const data = await response.json();

      if (data.success) {
    if (replace) {
          // Atomic replacement to prevent "jumping"
          posts.innerHTML = data.html;
          window.updateVisitIndicators();
          window.initLazyLoading();

          // Handle Scroll Position (Restore or Reset)
          if (options.skipPush && history.state && history.state.scroll !== undefined) {
             // Back/Forward Navigation: Restore saved scroll position
             requestAnimationFrame(() => {
               const ic = document.querySelector('.index-container');
               if (ic) ic.scrollTo(0, history.state.scroll);
               else window.scrollTo(0, history.state.scroll);
             });
          } else if (replace) {
             // New Navigation: Reset to top
             const ic = document.querySelector('.index-container');
             if (ic) ic.scrollTo(0, 0);
             else window.scrollTo(0, 0);
          }

          // Trigger fade-in
          requestAnimationFrame(() => {
            posts.classList.add('show');
          });

          // Update header (h2) for tags/users
          const container = document.querySelector('.index-container');
          if (container && data.titleHtml !== undefined) {
            const oldH2 = container.querySelector('h2');
            if (oldH2) oldH2.remove();
            if (data.titleHtml) {
              posts.insertAdjacentHTML('beforebegin', data.titleHtml);
            }
          }

          // UPDATE STATE BEFORE INITIALIZING SCROLL
          // Update Document Title
          let titleSuffix = '';
          if (tag) titleSuffix = ` - tag: ${tag}`;
          else if (isFav && user) titleSuffix = ` - ${user}'s favorites`;
          else if (f0cksMatch && user) titleSuffix = ` - ${user}'s f0cks`;
          else if (user) titleSuffix = ` - user: ${user}`;
          else if (mime) titleSuffix = ` - ${mime}s`;
          document.title = `${window.f0ckDomain}${titleSuffix}`;

          // Update History
          if (!options.skipPush) {
            let pushUrl = url.replace(/[?&]strict=1/, '').replace(/[?&]$/, '');
            
            // If server returned a different page (clamped), sync URL
            if (data.currentPage !== undefined) {
              const hasP = pushUrl.match(/\/p\/\d+/);
              if (hasP) {
                pushUrl = pushUrl.replace(/\/p\/\d+/, `/p/${data.currentPage}`);
              } else if (data.currentPage > 1) {
                // Ensure we don't double slash if URL ends with /
                pushUrl = pushUrl.replace(/\/?$/, `/p/${data.currentPage}`);
              }
            }
            
            if (shouldReplaceHistory) {
              history.replaceState({}, '', pushUrl);
            } else {
              history.pushState({}, '', pushUrl);
            }
          }

          // Update pagination (CRITICAL: Do this BEFORE initializing scroll so it captures fresh HTML)
          if (data.pagination) {
            document.querySelectorAll('.pagination-wrapper').forEach(el => el.innerHTML = data.pagination);
            document.querySelectorAll('.pagination-container-fluid').forEach(el => el.style.display = 'flex');
          } else {
            document.querySelectorAll('.pagination-wrapper').forEach(el => el.innerHTML = '');
            document.querySelectorAll('.pagination-container-fluid').forEach(el => el.style.display = 'none');
          }

          // Pass state to posts container for initInfiniteScroll
          if (data.hasMore !== undefined) {
            posts.dataset.hasMore = data.hasMore ? 'true' : 'false';
          }
          if (data.currentPage !== undefined) {
            posts.dataset.currentPage = data.currentPage;
          }

          // Initialize / Reset infinite scroll for the new content (Now with correct URL and Pagination)
          // Note: initInfiniteScroll handles cleanup of old state and scroll listeners
          if (typeof initInfiniteScroll === 'function') {
            initInfiniteScroll(posts);
          }
        } else {
          posts.insertAdjacentHTML('beforeend', data.html);
          if (data.pagination) {
            document.querySelectorAll('.pagination-wrapper').forEach(el => el.innerHTML = data.pagination);
          }
        }

        // Notify extensions and re-init systems (e.g. CommentSystem)
        document.dispatchEvent(new Event('f0ck:contentLoaded'));
        if (window.initSidebarRightToggle) window.initSidebarRightToggle();
        // Sync has-notif highlights after grid loads — handles PWA where visibilitychange doesn't fire
        window.NotificationSystemInstance?.pollDebounced?.();
        window._onaraCurrentGridUrl = urlObj.pathname + urlObj.search;
        checkGuestFavsImportBanner();

        // Instant jump to hash (e.g. #c123)
        if (hash) {
          setTimeout(() => {
            const target = document.querySelector(hash);
            if (target) {
              target.scrollIntoView({ behavior: 'smooth', block: 'center' });
              if (hash.startsWith('#c')) target.classList.add('new-item-fade');
            }
          }, 500);
        }
      } else {
        // Handle failure (e.g. no items found)
        if (replace && posts) {
          posts.innerHTML = '<div class="no-results">No f0cks found :(</div>';
          posts.classList.add('show');
          document.querySelectorAll('.pagination-wrapper').forEach(el => el.innerHTML = '');
        }
      }

    } catch (err) {
      console.error(err);
      window.location.href = url; // Fallback
    } finally {
      isNavigating = false;
      if (replace && document.activeElement && document.activeElement !== document.body) {
          document.activeElement.blur();
      }
      if (navbar) navbar.classList.remove("pbwork");
      if (window.updateStrictLinks && window.f0ckSession) window.updateStrictLinks(window.f0ckSession.strict_mode);
    }
  };

  let tt = false;
  const stimeout = 500;

  // Navbar scroll effect - make background black when scrolling
  if (navbar) {
    document.addEventListener('scroll', () => {
      const ic = document.querySelector('.index-container');
      const isScrolled = (ic ? ic.scrollTop : window.scrollY) > 10;
      navbar.classList.toggle('scrolled', isScrolled);
    }, { passive: true, capture: true });
  }

  // Helper to immediately abort media downloads
  const stopMedia = () => {
    if (bgRafId) window.cancelAnimFrame(bgRafId);
    if (visualizerRafId) window.cancelAnimFrame(visualizerRafId);


    const media = [...document.querySelectorAll('video:not(#gchat-messages video), audio:not(#gchat-messages audio)')]
        .filter(m => !m.classList.contains('emoji') || !m.closest('.sidebar-activity'));

    media.forEach(m => {
      try {
        m.pause();
        m.removeAttribute('src');
        m.load(); // Correctly aborts media resource selection and frees network sockets
        m.preload = 'none'; // Prevent further buffering
        window.f0ckDebug("Media aborted:", m);
      } catch (e) { console.error("Error stopping media:", e); }
    });
  };

  /**
   * updateNavForMode(mode)
   * Re-fetches the current item with the new mode and directly patches
   * the href on #prev and #next elements. No DOM surgery — just href updates.
   */
  const updateNavForMode = async (mode) => {
    const pathSegments = window.location.pathname.split('/');
    const keySegments = pathSegments.filter(s => /^\d+$/.test(s) || /^[a-zA-Z0-9_-]{11}$/.test(s));
    if (keySegments.length === 0) return;
    const itemid = keySegments[keySegments.length - 1];

    const params = new URLSearchParams();
    params.set('mode', mode);
    params.set('_t', Date.now());

    try {
      const fetchUrl = `/ajax/item/${itemid}?${params.toString()}`;
      window.f0ckDebug(`[updateNavForMode] mode=${mode} itemid=${itemid} → ${fetchUrl}`);
      const resp = await fetch(fetchUrl, { credentials: 'include' });
      if (!resp.ok) { console.warn('[updateNavForMode] bad response:', resp.status); return; }
      const data = await resp.json();
      if (!data?.html) { console.warn('[updateNavForMode] no html in response'); return; }

      const doc = new DOMParser().parseFromString(data.html, 'text/html');

      // Directly patch href on existing #prev / #next — most reliable approach
      const newPrev = doc.getElementById('prev');
      const newNext = doc.getElementById('next');
      const livePrev = document.getElementById('prev');
      const liveNext = document.getElementById('next');

      if (livePrev && newPrev) {
        const h = newPrev.getAttribute('href');
        livePrev.setAttribute('href', h);
        window.f0ckDebug(`[updateNavForMode] #prev → ${h}`);
      } else {
        console.warn(`[updateNavForMode] #prev missing: live=${!!livePrev} new=${!!newPrev}`);
      }
      if (liveNext && newNext) {
        const h = newNext.getAttribute('href');
        liveNext.setAttribute('href', h);
        window.f0ckDebug(`[updateNavForMode] #next → ${h}`);
      } else {
        console.warn(`[updateNavForMode] #next missing: live=${!!liveNext} new=${!!newNext}`);
      }

      // Also patch steuerung nav prev/next links by position
      const newSteuerung = doc.querySelector('.steuerung');
      const liveSteuerung = document.querySelector('.steuerung');
      if (newSteuerung && liveSteuerung) {
        liveSteuerung.replaceWith(newSteuerung.cloneNode(true));
      }
    } catch (e) {
      console.error('[updateNavForMode] error:', e);
    }
  };


  const loadItemAjax = async (url, inheritContext = true, options = {}) => {

    if (isNavigating) return;
    cancelPrefetch();

    // Immediately restore scrollability and hide modals
    if (window.resetGlobalScrollState) window.resetGlobalScrollState();
    if (window.hideAllModals) window.hideAllModals();

    isNavigating = true;

    const isGridPage = !!document.querySelector('.index-layout-wrapper, .index-container, .posts');
    const isModalOpen = document.body.classList.contains('onara-modal-open');
    const useOnara = isOnaraActive();

    if (useOnara && !isModalOpen) {
      if (options.skipPush || isItemPath(window.location.href)) {
        window._onaraReturnUrl = getOnaraBaseUrl(url);
      } else {
        window._onaraReturnUrl = window.location.href;
      }
      window._onaraReturnTitle = document.title;
    }

    // ── Scroller-active cleanup (same as loadPageAjax) ───────────────────
    if (document.body.classList.contains('scroller-active')) {
      document.head.querySelectorAll('[data-pjax-abyss]').forEach(el => el.remove());
      document.body.classList.remove('scroller-active', 'gallery-open');
      ['overflow', 'background', 'height'].forEach(p => document.body.style.removeProperty(p));
      const _nav = document.querySelector('nav.navbar');
      if (_nav) _nav.style.removeProperty('display');
      const _sb = document.querySelector('.global-sidebar-right');
      if (_sb) _sb.style.removeProperty('display');
      const _dz = document.getElementById('sidebar-drag-zone');
      if (_dz) _dz.style.removeProperty('display');
      const _ldz = document.getElementById('sidebar-left-drag-zone');
      if (_ldz) _ldz.style.removeProperty('display');
      const _pw = document.querySelector('.pagewrapper');
      if (_pw) ['height', 'padding', 'margin', 'overflow'].forEach(p => _pw.style.removeProperty(p));
      const _m = document.getElementById('main');
      if (_m) ['height', 'overflow'].forEach(p => _m.style.removeProperty(p));
      // Stop all media
      if (options.direction) {
        document.querySelectorAll('video:not(#gchat-messages video), audio:not(#gchat-messages audio)').forEach(el => { try { el.pause(); } catch {} });
      } else {
        document.querySelectorAll('video:not(#gchat-messages video), audio:not(#gchat-messages audio)').forEach(el => { try { el.pause(); el.removeAttribute('src'); el.load(); } catch {} });
        document.querySelectorAll('ruffle-player').forEach(el => { try { el.remove(); } catch {} });
      }
    }

    // Dispatch pjax:start so navigation-aware listeners (e.g. metadata modal, image modal) can react
    if (!options.keepMedia) {
      window.dispatchEvent(new Event('pjax:start'));
    }

    const currentContainer = document.querySelector('.index-container');
    const currentScroll = currentContainer ? currentContainer.scrollTop : window.scrollY;

    // Save scroll position for current page (only for new navigations)
    if (!options.skipPush && !options.keepMedia && !useOnara) {
       const currentState = history.state || {};
       history.replaceState({ ...currentState, scroll: currentScroll }, document.title, window.location.href);
    }

    // Record current URL for session history before navigating away
    // Reverted to native-only

    if (!options.keepMedia) {
      if (!options.direction) {
        stopMedia(); // Abort previous media immediately if not sliding out
      } else {
        document.querySelectorAll('video:not(#gchat-messages video), audio:not(#gchat-messages audio)').forEach(el => { try { el.pause(); } catch {} });
      }

      // Fade out background canvas for smooth transition (non-Onara only)
      const canvas = document.getElementById('bg');
      if (canvas) {
        if (useOnara) {
          canvas._bgFadingOut = false;
          canvas.classList.remove('fader-out', 'fast-fade');
          canvas.classList.add('fader-in');
          canvas.style.transition = 'none';
          canvas.style.opacity = 'var(--bg-canvas-opacity, 0.95)';
        } else {
          canvas.classList.add('fast-fade');
          canvas.classList.remove('fader-in');
          canvas.classList.add('fader-out');
        }
      }
    }

    // Show loading indicator
    if (navbar && !options.keepMedia) navbar.classList.add("pbwork");


    // Fix: Remove error overlay if present (from previous 404/error state)
    const errorWrapper = document.querySelector('._error_wrapper');
    if (errorWrapper) errorWrapper.remove();

    // Extract item ID from URL. Use the last numeric segment to avoid matching context IDs (like tag/1/...)
    // Split path, filter numeric, pop last.
    const pathSegments = new URL(url, window.location.origin).pathname.split('/');
    const keySegments = pathSegments.filter(s => /^\d+$/.test(s) || /^[a-zA-Z0-9_-]{11}$/.test(s));

    // Clear and Hide navbar pagination for Item View (Never show grid pagination on item view)
    // document.querySelectorAll('.pagination-wrapper').forEach(el => el.innerHTML = ''); // Don't destroy content (cached grid needs it)
    if (!useOnara) {
      document.querySelectorAll('.pagination-container-fluid').forEach(el => el.style.display = 'none');
    } else {
      document.querySelectorAll('.pagination-container-fluid').forEach(el => {
        const pagWrapper = el.querySelector('.pagination-wrapper');
        if (!pagWrapper || pagWrapper.innerHTML.trim().length > 0) {
          el.style.display = '';
        }
      });
    }

    if (keySegments.length === 0) {
      console.warn("loadItemAjax: No ID or slug match found in URL", url);
      // fallback for weird/external links
      window.location.href = url;
      return;
    }
    const itemid = keySegments.pop();

    // Extract context from Target URL first
    let tag = null, user = null, isFavs = false, mime = null, hall = null, userHall = null, userHallOwner = null, tagger = null;
    const tagMatch = url.match(/\/tag\/([^/?]+)/);
    if (tagMatch) tag = decodeURIComponent(tagMatch[1]);

    // Tagger filter from query string
    const taggerUrlObj = new URL(url, window.location.origin);
    const taggerParam = taggerUrlObj.searchParams.get('tagger');
    if (taggerParam) tagger = decodeURIComponent(taggerParam);

    // User hall: /user/:owner/hall/:slug/:id
    const userHallMatch = url.match(/\/user\/([^/]+)\/hall\/([^/]+)/);
    if (userHallMatch) {
      userHallOwner = decodeURIComponent(userHallMatch[1]);
      userHall = decodeURIComponent(userHallMatch[2]);
    }

    const userMatch = url.match(/\/user\/([^/]+)/);
    if (userMatch && !userHall) {
      user = decodeURIComponent(userMatch[1]);
      if (url.match(/\/user\/[^/]+\/favs(\/|$|\?)/)) isFavs = true;
    } else if (url.match(/^\/favs(\/|$|\?)/)) {
      isFavs = true;
    }
    
    const hallMatch = url.match(/\/h\/([^/?]+)/);
    if (hallMatch) hall = decodeURIComponent(hallMatch[1]);

    const mimeMatch = url.match(/\/((?:video|audio|image|,)+)(\/|$|\?)/);
    if (mimeMatch) mime = mimeMatch[1];
    
    // Check query params in the provided url too
    if (!mime && url.includes('mime=')) {
        const qMatch = url.match(/[?&]mime=([^&#]+)/);
        if (qMatch) mime = decodeURIComponent(qMatch[1]);
    }

    // If missing and inheritContext is true, check Window Location
    // IMPORTANT: Skip inheritance when target is a bare item URL like /1234 with no context
    // prefix (/h/, /tag/, /user/). Such URLs come from comment/notification sidebar links and
    // are explicitly context-free — they must not steal the current page's tag/hall/user.
    // Prev/next arrows in item view always use explicit /h/foo/<id> or /tag/foo/<id> hrefs
    // (via link.main), so they are unaffected by this guard.
    // Note: Notification links call loadItemAjax(href, false) to skip inheritance directly.
    if (inheritContext) {
      if (!tag) {
        const wTagMatch = window.location.href.match(/\/tag\/([^/?]+)/);
        if (wTagMatch) tag = decodeURIComponent(wTagMatch[1]);
      }
      if (!tagger) {
        const wTaggerParam = new URL(window.location.href).searchParams.get('tagger');
        if (wTaggerParam) tagger = decodeURIComponent(wTaggerParam);
      }
      if (!user && !userHall) {
        const wUserMatch = window.location.href.match(/\/user\/([^/?]+)/);
        if (wUserMatch && !window.location.href.match(/\/user\/[^/]+\/hall\//) ) {
          user = decodeURIComponent(wUserMatch[1]);
          if (window.location.href.match(/\/user\/[^/]+\/favs(\/|$|\?)/)) isFavs = true;
        } else if (window.location.href.match(/\/favs(\/|$|\?)/)) {
          isFavs = true;
        }
      }
      if (!userHall) {
        const wUserHallMatch = window.location.href.match(/\/user\/([^/]+)\/hall\/([^/]+)/);
        if (wUserHallMatch) {
          userHallOwner = decodeURIComponent(wUserHallMatch[1]);
          userHall = decodeURIComponent(wUserHallMatch[2]);
        }
      }
      if (!hall) {
        const wHallMatch = window.location.href.match(/\/h\/([^/?]+)/);
        if (wHallMatch) hall = decodeURIComponent(wHallMatch[1]);
      }
    }
    // </context-preservation>

    try {
      // Construct AJAX URL
      let ajaxUrl = `/ajax/item/${itemid}`;

      const params = new URLSearchParams();
      params.append('mode', window.activeMode);
      const targetHash = new URL(url, window.location.origin).hash.replace(/^#/, '').trim();
      if (targetHash && !targetHash.startsWith('c')) params.append('subf0ck', targetHash);
      if (tag) params.append('tag', tag);
      if (hall) params.append('hall', hall);
      if (userHall && userHallOwner) {
        params.append('userHall', userHall);
        params.append('userHallOwner', userHallOwner);
      } else if (user) {
        params.append('user', user);
      }
      if (tagger) params.append('tagger', tagger);
      if (isFavs) {
        params.append('fav', 'true');
        if (!user && window.f0ckGuestFavs) {
          const guestIds = window.f0ckGuestFavs.get();
          if (guestIds.length > 0) {
            params.append('ids', guestIds.slice(0, 100).join(','));
          }
        }
      }

      const isStrict = window.f0ckSession?.strict_mode || (localStorage.getItem('search_strict') === 'true');

      if (isStrict || url.includes('strict=1') || window.location.search.includes('strict=1')) {
        params.append('strict', '1');
      }
      
      // Note: mime is no longer appended to params, server reads from cookie automatically
      // _t cache-buster removed — stable URL enables both HTTP and in-memory caching.

      const isRandom = document.cookie.includes('random_mode=1') || url.includes('random=1') || window.location.search.includes('random=1');
      if (isRandom) {
        params.append('random', '1');
      }

      // Explicit overrides for context (used for immediate mode switches)
      if (options.forceParams) {
        Object.keys(options.forceParams).forEach(key => {
          params.set(key, options.forceParams[key]);
        });
      }

      if (useOnara) {
        params.append('onara', '1');
      }

      if (params.toString() !== '') {
        ajaxUrl += (ajaxUrl.includes('?') ? '&' : '?') + params.toString();
      }

      // ── Stale-while-revalidate item cache ──────────────────────────────────
      // cacheKey is the stable ajaxUrl (no _t), scoped to mode+context.
      const _itemCacheKey = ajaxUrl;
      const _cachedItem = !options.skipCache ? itemCacheMap.get(_itemCacheKey) : null;

      // Allow slide-out or fade-out animation to visibly start before content swap
      if ((options.direction || options.transition === 'fade-zoom') && document.querySelector('.content')) {
        await new Promise(r => setTimeout(r, 180));
      }

      // ── CACHE HIT: render immediately, revalidate in background ────────────
      if (_cachedItem) {
        window.f0ckDebug("[itemCache] HIT for", _itemCacheKey);

        // ── Render cached HTML (same DOM setup as the normal path below) ──
        const _html = _cachedItem.html;
        let _container;

        if (useOnara) {
          const onaraModal = openOnaraModal();
          const onaraMount = document.getElementById('onara-item-mount');
          if (!options.keepMedia) {
            stopMedia();
            onaraMount.innerHTML = '';
          }
          _container = onaraMount;
          updateOnaraActiveItem(itemid, url, false, _cachedItem.slug);
          syncOnaraBackgroundGrid(itemid, url, _cachedItem.page, _cachedItem.slug);
        } else {
          _container = document.querySelector('#main .container') || (document.getElementById('main')?.classList.contains('item-view') ? document.getElementById('main') : null);
          const _isStructuralPage = !!document.querySelector('.pagewrapper');
          const _isModeratorPage  = !!document.querySelector('.approval-grid, .audit-log-container, .mod-reports-page');
          const _isNotificationsPage = !!document.querySelector('.notifications-page, .notif-history-container');
          const _isIndexPage  = !!document.querySelector('.index-container, .posts');
          const _isStaticPage = !!document.querySelector('.static-page, .about-container, .upload-container');

          if (!options.keepMedia && (!_container || _isModeratorPage || _isNotificationsPage || _isIndexPage || _isStaticPage || _isStructuralPage)) {
            if (main) {
              const _iw = main.querySelector('.index-layout-wrapper');
              const _ic = main.querySelector('.index-container');
              const _ntc = _iw || _ic;
              if (_ntc && _isIndexPage) {
                const _ck = window.location.pathname + window.location.search;
                const _pw = document.querySelector('.pagination-wrapper');
                gridCacheMap.set(_ck, { node: _ntc, scroll: currentScroll, pagination: _pw ? _pw.innerHTML : '' });
                _ntc.remove();
              }
              main.className = 'item-view';
              ensureLayoutClass();
              if (window.syncNavbarHeight) window.syncNavbarHeight();
              stopMedia();
              main.innerHTML = '';
              _container = main;
            }
          } else if (_container && !options.keepMedia) {
            stopMedia();
            _container.innerHTML = '';
            _container.removeAttribute('style');
            if (main) main.className = 'item-view';
          }
        }

        if (options.keepMedia) {
          const _parser = new DOMParser();
          const _doc = _parser.parseFromString(_html, 'text/html');
          ['.previous-post','.next-post','.steuerung','.sidebar-tags-container','.blahlol','.location','.gapRight','.tag-controls'].forEach(sel => {
            const _o = _container.querySelector(sel);
            const _n = _doc.querySelector(sel);
            if (_o && _n) _o.replaceWith(_n.cloneNode(true));
          });
        } else {
          const isCommentsHidden = localStorage.getItem('comments_hidden') === 'true';
          if (isCommentsHidden) {
            document.body.classList.add('sidebar-left-hidden', 'comments-hidden');
          } else {
            document.body.classList.remove('sidebar-left-hidden', 'comments-hidden');
          }
          _container.insertAdjacentHTML('beforeend', _html);
          if (isCommentsHidden) {
            const _newLayout = _container.querySelector('.item-layout-container');
            if (_newLayout) _newLayout.classList.add('sidebar-hidden');
            const _newComments = _container.querySelector('#comments-container');
            if (_newComments) {
              _newComments.classList.add('faded-out', 'is-hidden');
              _newComments.style.setProperty('display', 'none', 'important');
            }
            const _newLeftSb = _container.querySelector('.item-sidebar-left');
            if (_newLeftSb) {
              _newLeftSb.classList.add('is-hidden');
              _newLeftSb.style.setProperty('display', 'none', 'important');
            }
          }
          if (options.direction) {
            const _newEls = _container.querySelectorAll('.content, ._204863, .item_title');
            _newEls.forEach(el => {
              el.classList.remove('slide-next', 'slide-prev', 'slide-out-left', 'slide-out-right', 'fade-out-zoom', 'fade-in-zoom');
              if (useOnara) {
                el.classList.add('fade-in-zoom');
              } else {
                el.classList.add(options.direction === 'next' ? 'slide-next' : 'slide-prev');
              }
            });
          } else if (options.transition === 'fade-zoom' || useOnara) {
            const _newEls = _container.querySelectorAll('.content, ._204863, .item_title');
            _newEls.forEach(el => {
              el.classList.remove('slide-next', 'slide-prev', 'slide-out-left', 'slide-out-right', 'fade-out-zoom', 'fade-in-zoom');
              el.classList.add('fade-in-zoom');
            });
          }
        }

        if (useOnara) {
          promoteOnaraModals();
          const onaraModal = document.getElementById('onara-modal');
          if (onaraModal) onaraModal.scrollTo(0, 0);
        } else if (options.skipPush && history.state?.scroll !== undefined) {
          requestAnimationFrame(() => window.scrollTo(0, history.state.scroll));
        } else if (!options.keepMedia) {
          window.scrollTo(0, 0);
        }

        const _hash = new URL(url, window.location.origin).hash;
        const itemKey = (window.f0ckSession?.enable_item_slugs !== false && _cachedItem.slug) ? _cachedItem.slug : (_cachedItem.slug || itemid);
        let _pushUrl = `/${itemKey}`;
        if (userHall && userHallOwner)  _pushUrl = `/user/${encodeURIComponent(userHallOwner)}/hall/${encodeURIComponent(userHall)}/${itemKey}`;
        else if (user)  { _pushUrl = `/user/${encodeURIComponent(user)}/${itemKey}`; if (isFavs) _pushUrl = `/user/${encodeURIComponent(user)}/favs/${itemKey}`; }
        else if (isFavs) _pushUrl = `/favs/${itemKey}`;
        else if (tag)   _pushUrl = `/tag/${encodeURIComponent(tag).replace(/%2C/g,',').replace(/%20/g,' ')}/${itemKey}`;
        else if (hall)  _pushUrl = `/h/${encodeURIComponent(hall).replace(/%20/g,' ')}/${itemKey}`;
        if (tagger && tag) _pushUrl += `?tagger=${encodeURIComponent(tagger)}`;
        if (mime) _pushUrl = _pushUrl.replace(new RegExp(`/${itemKey}$`), `/${mime}/${itemKey}`);
        if (_hash) _pushUrl += _hash;

        if (!options.keepMedia && !options.skipPush) history.pushState({ onara: useOnara }, '', _pushUrl);

        document.title = `${window.f0ckDomain} - ${itemKey}`;
        if (navbar) navbar.classList.remove('pbwork');

        if (!options.keepMedia) {
          setupMedia();
          const _canvas = document.getElementById('bg');
          if (_canvas) {
            _canvas.classList.remove('fader-out', 'fast-fade');
            _canvas.classList.add('fader-in');
            if (useOnara) {
              _canvas.style.transition = 'none';
              _canvas.style.opacity = 'var(--bg-canvas-opacity, 0.95)';
            }
          }
          if (window.initBackground) window.initBackground();
          if (window.initVisualizer) window.initVisualizer();
        }

        document.dispatchEvent(new Event('f0ck:contentLoaded'));
        if (window.initSidebarRightToggle) window.initSidebarRightToggle();
        if (window.updateMimeLabel) window.updateMimeLabel();
        try { if (window.updateStrictLinks && window.f0ckSession) window.updateStrictLinks(window.f0ckSession.strict_mode); } catch(_) {}

        isNavigating = false;
        window.trackVisit(itemid);
        window.f0ckDebug('[itemCache] Cache hit render complete, revalidating in background...');

        // ── Background revalidation — silently refresh cache for next visit ──
        fetch(ajaxUrl, { credentials: 'include' })
          .then(r => r.ok ? r.text() : null)
          .then(freshText => {
            if (!freshText) return;
            let freshHtml = freshText;
            let freshSlug = null;
            let freshPage = null;
            try {
              const d = JSON.parse(freshText);
              if (d && typeof d.html === 'string') freshHtml = d.html;
              if (d && (d.slug || d.item?.slug)) freshSlug = d.slug || d.item?.slug;
              if (d && d.page) freshPage = d.page;
            } catch(_) {}
            itemCacheMap.set(_itemCacheKey, { html: freshHtml, slug: freshSlug, page: freshPage, ts: Date.now() });
            window.f0ckDebug('[itemCache] Background revalidation complete for', _itemCacheKey);
          })
          .catch(() => {});

        schedulePrefetch(600);

        return; // Done — served from cache
      }
      // ── END CACHE HIT ───────────────────────────────────────────────────────

      window.f0ckDebug("[itemCache] MISS — fetching:", ajaxUrl);
      const tStart = performance.now();

      let html, paginationHtml, responseSlug = null, responsePage = null;

      // ── Pre-fetched data path (merged random + item load) ──────────────
      if (options.prefetchedData) {
        const data = options.prefetchedData;
        if (data && data.success === false) {
          console.warn("loadItemAjax: Pre-fetched data returned failure:", data.message);
          window.location.href = url;
          return;
        }
        if (data && typeof data.html === 'string') {
          html = data.html;
          paginationHtml = data.pagination;
          responseSlug = data.slug || data.item?.slug || null;
          responsePage = data.page || null;
        }
        window.f0ckDebug(`[CLIENT_DEBUG] Using pre-fetched data (skipped network fetch)`);
      } else {
        // ── Normal fetch path ────────────────────────────────────────────
        const response = await fetch(ajaxUrl, { credentials: 'include' });
        const tHeaders = performance.now();

        if (!response.ok) throw new Error(`Network response was not ok: ${response.status}`);

        const rawText = await response.text();
        const tBody = performance.now();

        window.f0ckDebug(`[CLIENT_DEBUG] Fetch timing for ${ajaxUrl}:
      - TTFB (Headers): ${(tHeaders - tStart).toFixed(2)}ms
      - Content Download: ${(tBody - tHeaders).toFixed(2)}ms
      - Total Network: ${(tBody - tStart).toFixed(2)}ms
      - Content Size: ${(rawText.length / 1024).toFixed(2)} KB`);

        try {
          // Optimistically try to parse as JSON first
          const data = JSON.parse(rawText);
          if (data && data.success === false) {
            console.warn("loadItemAjax: Server returned failure:", data.message);
            window.location.href = url; // Fallback to full page load
            return;
          }
          if (data && typeof data.html === 'string') {
            html = data.html;
            paginationHtml = data.pagination;
            responseSlug = data.slug || data.item?.slug || null;
            responsePage = data.page || null;
          } else {
            html = rawText;
          }
        } catch (e) {
          // If JSON parse fails, assume it's HTML text
          html = rawText;
        }
      }

      // ── Store in item cache (stale-while-revalidate) ───────────────────────
      if (html && !options.noCacheStore) {
        itemCacheMap.set(_itemCacheKey, { html, slug: responseSlug, page: responsePage, ts: Date.now() });
        if (itemCacheMap.size > ITEM_CACHE_MAX) {
          // Evict oldest entry
          itemCacheMap.delete(itemCacheMap.keys().next().value);
        }
      }

      // Track visit for guests
      window.trackVisit(itemid);

      let container;

      if (useOnara) {
        const onaraModal = openOnaraModal();
        const onaraMount = document.getElementById('onara-item-mount');
        if (!options.keepMedia) {
          stopMedia();
          onaraMount.innerHTML = '';
        }
        container = onaraMount;
        updateOnaraActiveItem(itemid, url, false, responseSlug);
        syncOnaraBackgroundGrid(itemid, url, responsePage, responseSlug);
      } else {
        container = document.querySelector('#main .container') || (document.getElementById('main') && document.getElementById('main').classList.contains('item-view') ? document.getElementById('main') : null);
        const isStructuralPage = !!document.querySelector('.pagewrapper');
        const isModeratorPage = !!document.querySelector('.approval-grid, .audit-log-container, .mod-reports-page');
        const isNotificationsPage = !!document.querySelector('.notifications-page, .notif-history-container');
        const isIndexPage = !!document.querySelector('.index-container, .posts');
        const isStaticPage = !!document.querySelector('.static-page, .about-container, .upload-container');

        if (!options.keepMedia && (!container || isModeratorPage || isNotificationsPage || isIndexPage || isStaticPage || isStructuralPage)) {
          // Transition to Item View
          if (main) {
            // Check if we can cache the existing grid (Index Page only)
            const indexWrapper = main.querySelector('.index-layout-wrapper');
            const indexContainer = main.querySelector('.index-container');
            const nodeToCache = indexWrapper || indexContainer;

            if (nodeToCache && isIndexPage) {
               const cacheKey = window.location.pathname + window.location.search;
               const paginationWrapper = document.querySelector('.pagination-wrapper');
               gridCacheMap.set(cacheKey, {
                  node: nodeToCache,
                  scroll: currentScroll,
                  pagination: paginationWrapper ? paginationWrapper.innerHTML : '' 
               });
               nodeToCache.remove();
            }
            
            main.className = 'item-view';

            // Correctly handle body classes for the current layout mode
            ensureLayoutClass();
            if (window.syncNavbarHeight) window.syncNavbarHeight();

            // Toggle button lives permanently in body via header.html — no creation needed

            // HTML goes directly into #main without outdated .container wrapper for New Layout
            stopMedia();
            main.innerHTML = '';
            container = main; // HTML goes directly into #main
          }
        } else if (container && !options.keepMedia) {
          // Already in some kind of item view or compatible layout, just clear it
          stopMedia();
          container.innerHTML = '';
          container.removeAttribute('style'); // Ensure no carry-over styles
          if (main) main.className = 'item-view';
        }
      }

      if (options.keepMedia) {
        const parser = new DOMParser();
        const doc = parser.parseFromString(html, 'text/html');
        
        // Surgically update only navigation and metadata, leaving the media container untouched
        const selectors = [
          '.previous-post', 
          '.next-post', 
          '.steuerung', 
          '.sidebar-tags-container', 
          '.blahlol', 
          '.location', 
          '.gapRight', 
          '.tag-controls'
        ];
        
        selectors.forEach(sel => {
          const oldEl = container.querySelector(sel);
          const newEl = doc.querySelector(sel);
          if (oldEl && newEl) {
            oldEl.replaceWith(newEl.cloneNode(true));
          }
        });
      } else {
        const isCommentsHidden = localStorage.getItem('comments_hidden') === 'true';
        if (isCommentsHidden) {
          document.body.classList.add('sidebar-left-hidden', 'comments-hidden');
        } else {
          document.body.classList.remove('sidebar-left-hidden', 'comments-hidden');
        }
        container.insertAdjacentHTML('beforeend', html);
        if (isCommentsHidden) {
          const newLayout = container.querySelector('.item-layout-container');
          if (newLayout) newLayout.classList.add('sidebar-hidden');
          const newComments = container.querySelector('#comments-container');
          if (newComments) {
            newComments.classList.add('faded-out', 'is-hidden');
            newComments.style.setProperty('display', 'none', 'important');
          }
          const newLeftSb = container.querySelector('.item-sidebar-left');
          if (newLeftSb) {
            newLeftSb.classList.add('is-hidden');
            newLeftSb.style.setProperty('display', 'none', 'important');
          }
        }
        if (options.direction) {
          const newEls = container.querySelectorAll('.content, ._204863, .item_title');
          newEls.forEach(el => {
            el.classList.remove('slide-next', 'slide-prev', 'slide-out-left', 'slide-out-right', 'fade-out-zoom', 'fade-in-zoom');
            if (useOnara) {
              el.classList.add('fade-in-zoom');
            } else {
              el.classList.add(options.direction === 'next' ? 'slide-next' : 'slide-prev');
            }
          });
        } else if (options.transition === 'fade-zoom' || useOnara) {
          const newEls = container.querySelectorAll('.content, ._204863, .item_title');
          newEls.forEach(el => {
            el.classList.remove('slide-next', 'slide-prev', 'slide-out-left', 'slide-out-right', 'fade-out-zoom', 'fade-in-zoom');
            el.classList.add('fade-in-zoom');
          });
        }

        // Note: Prefetching video src immediately after DOM injection has been removed
        // because concurrent media requests to the same URL in Chromium-based browsers
        // trigger the single-writer HTTP cache lock, causing playback to stall.

      }


      // Handle Scroll Position (Restore or Reset)
      if (useOnara) {
        promoteOnaraModals();
        const onaraModal = document.getElementById('onara-modal');
        if (onaraModal) onaraModal.scrollTo(0, 0);
      } else if (options.skipPush && history.state && history.state.scroll !== undefined) {
         requestAnimationFrame(() => window.scrollTo(0, history.state.scroll));
      } else if (!options.keepMedia) {
         window.scrollTo(0, 0);
      }

      // NO PAGINATION UPDATE FOR ITEM VIEW (Fixes 30k flicker)
      // On Item view, we use .previous-post / .next-post in content only.

      // Construct proper History URL (Context Aware)
      // If we inherited context, we should reflect it in the URL
      const hash = new URL(url, window.location.origin).hash;
      const itemKey = (window.f0ckSession?.enable_item_slugs !== false && responseSlug) ? responseSlug : (responseSlug || itemid);
      let pushUrl = `/${itemKey}`;
      // Logic from ajax.mjs context reconstruction:
      if (userHall && userHallOwner) {
        pushUrl = `/user/${encodeURIComponent(userHallOwner)}/hall/${encodeURIComponent(userHall)}/${itemKey}`;
      } else if (user) {
        pushUrl = `/user/${encodeURIComponent(user)}/${itemKey}`;
        if (isFavs) pushUrl = `/user/${encodeURIComponent(user)}/favs/${itemKey}`;
      } else if (isFavs) {
        pushUrl = `/favs/${itemKey}`;
      }
      else if (tag) pushUrl = `/tag/${encodeURIComponent(tag).replace(/%2C/g, ',').replace(/%20/g, ' ')}/${itemKey}`;
      else if (hall) pushUrl = `/h/${encodeURIComponent(hall).replace(/%20/g, ' ')}/${itemKey}`;
      // Append tagger filter so item nav stays in tagger context
      if (tagger && tag) pushUrl += `?tagger=${encodeURIComponent(tagger)}`;
      
      if (mime) {
          // If it already has itemKey at the end, insert mime before it
          pushUrl = pushUrl.replace(new RegExp(`/${itemKey}$`), `/${mime}/${itemKey}`);
      }

      // Re-append hash if present
      if (hash) pushUrl += hash;

      if (!options.keepMedia && !options.skipPush) {
        // We overwrite proper URL even if the link clicked was "naked"
        history.pushState({ onara: useOnara }, '', pushUrl);
      }

      if (!options.keepMedia) {
        setupMedia();
        // Remove fader-out and fast-fade to ensure canvas shows up if enabled
        const canvas = document.getElementById('bg');
        if (canvas) {
          canvas.classList.remove('fader-out', 'fast-fade');
          canvas.classList.add('fader-in');
          if (useOnara) {
            canvas.style.transition = 'none';
            canvas.style.opacity = 'var(--bg-canvas-opacity, 0.95)';
          }
        }
        if (window.initBackground) window.initBackground();
        if (window.initVisualizer) window.initVisualizer();
      }
      // Try to extract ID from response if possible or just use itemid
      document.title = `${window.f0ckDomain} - ${itemKey}`;
      window.f0ckDebug("AJAX load complete");

      // Notify extensions — also triggers CommentSystem init which renders comments
      document.dispatchEvent(new Event('f0ck:contentLoaded'));
      if (window.initSidebarRightToggle) window.initSidebarRightToggle();
      if (window.updateMimeLabel) window.updateMimeLabel();
      try {
        if (window.updateStrictLinks && window.f0ckSession) {
          window.updateStrictLinks(window.f0ckSession.strict_mode);
        }
      } catch (err) {
        console.error("updateStrictLinks error:", err);
      }

      schedulePrefetch(600);

      // After comments have rendered (f0ck:contentLoaded above triggers synchronous render),
      // constrain the comments-list height via direct measurement (flex chain unreliable in AJAX).

      // Instant jump to hash (e.g. #c123) is now handled exclusively by CommentSystem
      // which has robust retry and timing logic. Redirecting to CommentSystem
      // by simply ensuring f0ck:contentLoaded is fired (already done above).

    } catch (err) {
      console.error("AJAX load failed:", err);
    } finally {
      isNavigating = false;
      if (navbar) navbar.classList.remove("pbwork");
    }
  };

  const changePage = (e, pbwork = true) => {
    if (pbwork) {
      const nav = document.querySelector("nav.navbar");
      if (nav) nav.classList.add("pbwork");
    }
    // Trigger native click for navigation
    e.click();
  };

  // Intercept clicks
  document.addEventListener('click', (e) => {
    const target = e.target.nodeType === 3 ? e.target.parentElement : e.target;

    // Intercept rating cycling immediately before any link/navigation handler can catch it
    const ratingTag = target.closest('.rating-tag') || target.closest('button#a_toggle');
    if (ratingTag && !e.ctrlKey && !e.shiftKey && !e.altKey && !e.metaKey && e.button === 0) {
      e.preventDefault();
      e.stopPropagation();
      e.stopImmediatePropagation();

      const canCycle = ratingTag.classList.contains('can-cycle') || ratingTag.id === 'a_toggle' || !!document.querySelector('#tags[data-can-manage="true"]');
      if (canCycle && window.cycleRating) {
        window.cycleRating(ratingTag);
      }
      return false;
    }

    // Check for mode selection (only applies to <a href="/mode/..."> links, not plain buttons)
    const modeBtn = target.closest('.mode-btn');
    if (modeBtn && modeBtn.href && modeBtn.href.includes('/mode/') && !e.ctrlKey && !e.shiftKey && !e.altKey && !e.metaKey) {
      e.preventDefault();
      // Update UI immediately for better UX
      const parent = modeBtn.parentElement;
      if (parent) {
        parent.querySelectorAll('.mode-btn').forEach(btn => btn.classList.remove('active'));
      }
      modeBtn.classList.add('active');
      const modeMatch = modeBtn.href.match(/\/mode\/(\d)/);
      if (modeMatch) {
          window.activeMode = +modeMatch[1];
          document.dispatchEvent(new CustomEvent('f0ck:modeChanged', { detail: { mode: window.activeMode } }));
      }

      // Sync state immediately via cookie to avoid race conditions
      document.cookie = `mode=${window.activeMode}; Path=/; Max-Age=31536000`;

      // Keep filter modal open if the click came from inside it
      const fromFilterModal = !!modeBtn.closest('#excluded-tags-overlay');
      if (fromFilterModal) window._keepFilterModal = true;

      // Update mode via AJAX
      fetch(modeBtn.href, {
        headers: { 'X-Requested-With': 'XMLHttpRequest' },
        credentials: 'include'
      })
        .then(r => r.json())
        .then(data => {
          if (data.success) {
            const modeName = modeBtn.textContent.trim().toUpperCase();
            window.flashMessage(`${modeName} MODE ACTIVATED`);

            // Invalidate all grid caches on mode change to ensure consistency
            gridCacheMap.clear();

            // Refresh content
            const isOnaraOpen = document.body.classList.contains('onara-modal-open');
            const isGridView = document.querySelector('.posts, .tags-grid');
            const isItemView = document.getElementById('prev') || document.getElementById('next');

            let reloadPromise = null;
            if (isOnaraOpen) {
              const bgUrl = window._onaraReturnUrl || getOnaraBaseUrl();
              const urlObj = new URL(bgUrl, window.location.origin);
              urlObj.searchParams.delete('mode');
              reloadPromise = loadPageAjax(urlObj.toString(), true, { skipCache: true, skipPush: true });
            } else if (isGridView) {
              // Reload current page without ?mode= in the URL — server picks up mode from session/cookie
              const currentUrl = new URL(window.location.href);
              currentUrl.searchParams.delete('mode');
              reloadPromise = loadPageAjax(currentUrl.toString(), true, { skipCache: true });
            } else if (isItemView) {
              // Directly update nav links for the new mode without keepMedia complexity
              updateNavForMode(window.activeMode);
            }

            if (fromFilterModal) {
              Promise.resolve(reloadPromise).finally(() => { window._keepFilterModal = false; });
            }
          } else {
            if (fromFilterModal) window._keepFilterModal = false;
            // Fallback
            window.location.href = modeBtn.href;
          }
        })
        .catch(err => {
          if (fromFilterModal) window._keepFilterModal = false;
          console.error("Mode update failed:", err);
          window.location.href = modeBtn.href;
        });
      return;
    }

    // Check for thumbnail links on index page
    const thumbnail = target.closest('.posts > a:not(.notif-item)');
    if (thumbnail && !e.ctrlKey && !e.shiftKey && !e.altKey && !e.metaKey) {
      e.preventDefault();
      if (isOnaraActive()) {
        const wasOpen = document.body.classList.contains('onara-modal-open');
        document.querySelectorAll('.onara-active').forEach(el => el.classList.remove('onara-active'));
        thumbnail.classList.add('onara-active');
        if (document.activeElement && document.activeElement !== thumbnail && typeof document.activeElement.blur === 'function') {
          document.activeElement.blur();
        }
        openOnaraModal();
        if (!wasOpen && typeof window.paintImmediateBgThumb === 'function') {
          window.paintImmediateBgThumb(thumbnail);
        }
      }
      // Thumbnails inherit context (e.g. from Tag Index)
      loadItemAjax(thumbnail.href, true);
      return;
    }

    const link = target.closest('#next, #prev, #back, #random, #nav-random, .id-link, .nav-next, .nav-prev');
    if (link && link.href && link.hostname === window.location.hostname && !e.ctrlKey && !e.shiftKey && !e.altKey && !e.metaKey) {
      // Special check for random
      if (link.id === 'random' || link.id === 'nav-random') {
        e.preventDefault();
        document.dispatchEvent(new CustomEvent('f0ck:randomTriggered'));

        const outEls = document.querySelectorAll('.content, ._204863, .item_title');
        outEls.forEach(el => {
          el.classList.remove('slide-out-left', 'slide-out-right', 'slide-next', 'slide-prev', 'fade-out-zoom', 'fade-in-zoom');
          el.classList.add('fade-out-zoom');
        });

        // Pause media without stripping src so it doesn't flash black before fetch returns
        document.querySelectorAll('video, audio').forEach(m => { try { m.pause(); } catch (e) {} });

        // Fade out background canvas for smooth transition
        const canvas = document.getElementById('bg');
        if (canvas) {
          canvas.classList.add('fast-fade');
          canvas.classList.remove('fader-in');
          canvas.classList.add('fader-out');
        }

        const nav = document.querySelector("nav.navbar");
        if (nav) nav.classList.add("pbwork");

        // ── Client-side random pool: pick locally, load normally ──────
        const wTagMatch = window.location.href.match(/\/tag\/([^/]+)/);
        const wHallMatch = window.location.href.match(/\/h\/([^/]+)/);
        let wUserHall = null, wUserHallOwner = null;
        const wUserHallMatch = window.location.href.match(/\/user\/([^/]+)\/hall\/([^/]+)/);
        if (wUserHallMatch) {
          wUserHallOwner = decodeURIComponent(wUserHallMatch[1]);
          wUserHall = decodeURIComponent(wUserHallMatch[2]);
        }
        let wFavsUser = null;
        if (!wUserHall) {
          const wUserM = window.location.href.match(/\/user\/([^/]+)/);
          if (wUserM && window.location.href.match(/\/favs(\/|$|\?)/)) {
            wFavsUser = decodeURIComponent(wUserM[1]);
          } else if (window.location.href.match(/\/favs(\/|$|\?)/)) {
            const guestIds = window.f0ckGuestFavs ? window.f0ckGuestFavs.get() : [];
            if (guestIds.length > 0) {
              const currentId = window.getCurrentItemId();
              const candidates = guestIds.filter(id => id !== parseInt(currentId, 10));
              const chosen = candidates.length > 0 ? candidates[Math.floor(Math.random() * candidates.length)] : guestIds[0];
              loadItemAjax(`/favs/${chosen}`, true, { transition: 'fade-zoom' });
              return;
            }
          }
        }

        // Try pool-based random (instant pick from cached IDs)
        const pool = window._randomPool;
        const currentSlug = window.getCurrentItemSlug ? window.getCurrentItemSlug() : null;
        const currentId = window.getCurrentItemId ? String(window.getCurrentItemId()) : null;

        // Pool loaded but empty — no items match current filters
        if (pool && pool.items && pool.items.length === 0) {
          if (nav) nav.classList.remove("pbwork");
          outEls.forEach(el => {
            el.classList.remove('fade-out-zoom');
            el.classList.add('fade-in-zoom');
          });
          if (canvas) {
            canvas.classList.remove('fader-out', 'fast-fade');
            canvas.classList.add('fader-in');
          }
          if (window.flashMessage) window.flashMessage('No items found for this filter');
          return;
        }

        if (pool && pool.items && pool.items.length > 1) {
          // Pick next from shuffled pool — zero duplicates until all seen
          const pick = window.pickFromPool(currentSlug, currentId);
          if (!pick) { // shouldn't happen, but safety
            if (window.flashMessage) window.flashMessage('No items found for this filter');
            return;
          }
          // Flag for sidebar: skip tag feed re-centering on random nav
          window._isPoolRandomNav = true;

          // Build URL preserving context
          let targetUrl;
          if (wUserHall && wUserHallOwner) {
            targetUrl = `/user/${encodeURIComponent(wUserHallOwner)}/hall/${encodeURIComponent(wUserHall)}/${pick}`;
          } else if (wFavsUser) {
            targetUrl = `/user/${encodeURIComponent(wFavsUser)}/favs/${pick}`;
          } else if (wTagMatch) {
            const wTag = decodeURIComponent(wTagMatch[1]);
            targetUrl = `/tag/${encodeURIComponent(wTag).replace(/%2C/g, ',').replace(/%20/g, ' ')}/${pick}`;
          } else if (wHallMatch) {
            const wHall = decodeURIComponent(wHallMatch[1]);
            targetUrl = `/h/${encodeURIComponent(wHall).replace(/%20/g, ' ')}/${pick}`;
          } else {
            targetUrl = `/${pick}`;
          }

          loadItemAjax(targetUrl, true, { transition: 'fade-zoom' });

          // Background grid sync: pass targetUrl and null so actual page is looked up and synced
          if (isOnaraActive()) {
            syncOnaraBackgroundGrid(pick, targetUrl, null, pick);
          }
          return;
        }

        // Fallback: pool not ready — use server-side random
        let randomUrl = '/ajax/item/random';
        const params = new URLSearchParams();
        params.append('mode', window.activeMode);

        if (wTagMatch) params.append('tag', decodeURIComponent(wTagMatch[1]));

        if (wUserHallMatch) {
          params.append('userHall', wUserHall);
          params.append('userHallOwner', wUserHallOwner);
        } else {
          const wUserMatch = window.location.href.match(/\/user\/([^/]+)/);
          if (wUserMatch) {
            params.append('user', decodeURIComponent(wUserMatch[1]));
            if (window.location.href.match(/\/favs(\/|$|\?)/)) {
              params.append('fav', 'true');
            }
          }
        }

        if (wHallMatch) params.append('hall', decodeURIComponent(wHallMatch[1]));

        const urlParams = new URLSearchParams(window.location.search);
        const qMime = urlParams.get('mime');
        const cookieMimeMatch = document.cookie.match(/(?:^|;\s*)mime=([^;]*)/);
        const cookieMime = cookieMimeMatch ? decodeURIComponent(cookieMimeMatch[1]).trim() : null;

        if (qMime !== null && qMime !== '') {
          params.append('mime', qMime);
        } else if (cookieMime !== null && cookieMime !== '') {
          params.append('mime', cookieMime);
        } else {
          const wMimeMatch = window.location.href.match(/\/((?:video|audio|image|,)+)(\/|$|\?)/);
          if (wMimeMatch) params.append('mime', wMimeMatch[1]);
        }

        const isStrict = window.f0ckSession?.strict_mode || window.location.search.includes('strict=1') || (localStorage.getItem('search_strict') === 'true');
        if (isStrict) {
          params.append('strict', '1');
        }

        if ([...params].length > 0) {
          randomUrl += '?' + params.toString();
        }

        fetch(randomUrl, { credentials: 'include' })
          .then(r => r.json())
          .then(data => {
            if (data && typeof data.html === 'string' && !data.error) {
              const targetKey = data.slug || data.id;
              let targetUrl;
              if (wUserHall && wUserHallOwner) {
                targetUrl = `/user/${encodeURIComponent(wUserHallOwner)}/hall/${encodeURIComponent(wUserHall)}/${targetKey}`;
              } else if (wFavsUser) {
                targetUrl = `/user/${encodeURIComponent(wFavsUser)}/favs/${targetKey}`;
              } else if (wTagMatch) {
                const wTag = decodeURIComponent(wTagMatch[1]);
                targetUrl = `/tag/${encodeURIComponent(wTag).replace(/%2C/g, ',').replace(/%20/g, ' ')}/${targetKey}`;
              } else if (wHallMatch) {
                const wHall = decodeURIComponent(wHallMatch[1]);
                targetUrl = `/h/${encodeURIComponent(wHall).replace(/%20/g, ' ')}/${targetKey}`;
              } else {
                targetUrl = `/${targetKey}`;
              }
              loadItemAjax(targetUrl, true, { transition: 'fade-zoom', prefetchedData: data });
              if (isOnaraActive() && data.id) {
                syncOnaraBackgroundGrid(data.id, targetUrl, data.page || null, targetKey);
              }
            } else {
              // No items found — restore UI, don't redirect
              if (nav) nav.classList.remove("pbwork");
              outEls.forEach(el => { el.classList.remove('fade-out-zoom'); el.classList.add('fade-in-zoom'); });
              if (canvas) { canvas.classList.remove('fader-out', 'fast-fade'); canvas.classList.add('fader-in'); }
              if (window.flashMessage) window.flashMessage('No items found for this filter');
            }
          })
          .catch((err) => {
            console.error("Random fetch failed:", err);
            if (nav) nav.classList.remove("pbwork");
            outEls.forEach(el => { el.classList.remove('fade-out-zoom'); el.classList.add('fade-in-zoom'); });
            if (canvas) { canvas.classList.remove('fader-out', 'fast-fade'); canvas.classList.add('fader-in'); }
          });
        return;
      }


      // Standard item links
      e.preventDefault();
      const isNext = link.id === 'next' || link.classList.contains('nav-next');
      const isPrev = link.id === 'prev' || link.classList.contains('nav-prev');
      const direction = isNext ? 'next' : (isPrev ? 'prev' : null);

      const isModalOpen = document.body.classList.contains('onara-modal-open');
      const isGridPage = !!document.querySelector('.index-layout-wrapper, .index-container, .posts');
      const useOnara = isOnaraActive();

      if (direction) {
        const outEls = document.querySelectorAll('.content, ._204863, .item_title');
        outEls.forEach(el => {
          el.classList.remove('slide-out-left', 'slide-out-right', 'slide-next', 'slide-prev', 'fade-out-zoom', 'fade-in-zoom');
          if (useOnara) {
            el.classList.add('fade-out-zoom');
          } else {
            el.classList.add(direction === 'next' ? 'slide-out-left' : 'slide-out-right');
          }
        });
      }

      if (link.href.match(/\/p\/\d+/) || link.href.match(/[?&]page=\d+/)) {
        loadPageAjax(link.href);
      } else {
        loadItemAjax(link.href, true, { direction, transition: useOnara ? 'fade-zoom' : null });
      }
      return;
    }

    // Intercept tag, user, and home links for AJAX Grid View transitions
    const anyLink = target.closest('a');
    if (anyLink && anyLink.hostname === window.location.hostname && !e.ctrlKey && !e.shiftKey && !e.altKey && !e.metaKey && anyLink.target !== '_blank') {
      const pathname = anyLink.pathname;
      const isSpecialLink = anyLink.classList.contains('removetag') || anyLink.classList.contains('admin-deltag') || anyLink.classList.contains('mode-btn') || anyLink.classList.contains('btn-approve-async') || anyLink.classList.contains('btn-deny-async') || anyLink.getAttribute('href') === '#' || !!anyLink.closest('.rating-tag');

      const targetUrl = anyLink.href;
      const currentUrl = window.location.href.split('#')[0];
      const targetUrlBase = targetUrl.split('#')[0];
      const hash = anyLink.hash;

      // Check if it's a same-item / same-page hash link
      const isCurrentItem = isItemPath(window.location.href);
      const isTargetItem = isItemPath(targetUrl);
      const getItemKey = (u) => {
        try {
          const p = new URL(u, window.location.origin).pathname;
          const parts = p.split('/').filter(Boolean);
          const keys = parts.filter(s => /^\d+$/.test(s) || /^[a-zA-Z0-9_-]{11}$/.test(s));
          return keys.length ? keys[keys.length - 1] : null;
        } catch {
          return null;
        }
      };
      const currentItemKey = isCurrentItem ? getItemKey(window.location.href) : null;
      const targetItemKey = isTargetItem ? getItemKey(targetUrl) : null;
      const isSameItem = isCurrentItem && isTargetItem && currentItemKey && currentItemKey === targetItemKey;
      const isSamePageHash = (targetUrlBase === currentUrl) || isSameItem;

      // If it's a same-page hash link, just jump / switch subf0ck and don't AJAX reload
      if (isSamePageHash && hash) {
        e.preventDefault();
        
        let handled = false;
        // If it's a comment link, use the robust CommentSystem logic
        if (hash.startsWith('#c') && window.commentSystem) {
          const id = hash.substring(2);
          window.commentSystem.scrollToComment(id);
          handled = true;
        } else {
          // If it's an album / subf0ck link
          const subKey = hash.replace(/^#/, '').trim();
          if (window._currentActiveAlbumGallery && typeof window._currentActiveAlbumGallery.showBySlug === 'function') {
            handled = window._currentActiveAlbumGallery.showBySlug(subKey);
            if (handled) {
              const mediaContainer = document.querySelector('.content, .album-container, .v0ck, #my-video, .main-image');
              if (mediaContainer) {
                mediaContainer.scrollIntoView({ behavior: 'smooth', block: 'center' });
              }
            }
          }
          
          if (!handled) {
            try {
              const targetEl = document.querySelector(hash);
              if (targetEl) {
                targetEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
                // Clear any previous highlight, then permanently mark this element
                document.querySelectorAll('.anchor-target').forEach(el => el.classList.remove('anchor-target'));
                targetEl.classList.add('anchor-target');
                handled = true;
              }
            } catch (err) {
              // Ignore invalid querySelector for non-CSS selectors
            }
          }
        }
        
        if (handled || targetUrlBase === currentUrl) {
          // Update URL without reload
          history.replaceState(null, null, targetUrl);
          window.dispatchEvent(new Event('hashchange'));
          return;
        }
      }

      // Intercept /register and /login — handle entirely client-side
      if (!isSpecialLink && (pathname === '/register' || pathname === '/login')) {
        e.preventDefault();
        e.stopImmediatePropagation();
        if (window.f0ckSession && window.f0ckSession.logged_in) {
          window.showFlash('Already logged in lol', 'error');
        } else {
          if (pathname === '/login') openModal(loginModal, 'login');
          else openModal(registerModal);
        }

        return false;
      }

      if (!isSpecialLink && (pathname === '/' || pathname.startsWith('/halls') || pathname.startsWith('/h/') || pathname.startsWith('/notifications') || pathname.startsWith('/tag') || pathname.startsWith('/user/') || pathname.match(/^\/(image|video|audio)/) || pathname.match(/\/p\/\d+/) || pathname.match(/^\/\d+/) || pathname.match(/^\/[a-zA-Z0-9_-]{11}(?:[?#]|$)/) || pathname.match(/^\/(about|rules|terms|upload|subscriptions|stats|docs|settings|admin|mod|ranking|messages|meme|memes)/) || pathname.startsWith('/abyss'))) {
        e.preventDefault();
        e.stopImmediatePropagation();

        let targetUrl = anyLink.href;
        // Strip strict param if present to rely on session and keep URL clean
        if (targetUrl.includes('strict=1')) {
          targetUrl = targetUrl.replace(/[?&]strict=1/, '').replace(/[?&]$/, '');
        }

        const parts = pathname.split('/').filter(Boolean);
        const isItemLink = isItemPath(pathname);
        if (isItemLink) {
          // Links inside comment bodies, MOTD, or sidebar suggestions/recommendations should not inherit tag/hall/user context
          const _skipInherit = anyLink.dataset.inheritContext === 'false' || anyLink.closest(".comment, .comment-content, .comment-body, .motd-content, .sidebar-video-card, .sidebar-recommendations-list, #sidebar-recommendations-container");
          loadItemAjax(targetUrl, !_skipInherit);
        } else {
          const isBrand = anyLink.classList.contains('navbar-brand');
          loadPageAjax(targetUrl, true, { bypassCache: isBrand });
        }
        return false;
      }
    }

    if (target.closest('#togglebg')) {
      e.preventDefault();
      window.toggleBackground();
    } else if (target.closest('#toggleautoplay')) {
      e.preventDefault();
      window.toggleAutoplay();
    } else if (target.closest('#a_oc')) {
      e.preventDefault();
      const ocBtn = target.closest('#a_oc');
      const id = ocBtn.dataset.itemId;

      fetch('/api/v2/toggle-oc', {
          method: 'POST',
          headers: { 
            'Content-Type': 'application/x-www-form-urlencoded',
            'X-CSRF-Token': window.f0ckSession?.csrf_token
          },
          body: new URLSearchParams({ postid: id })
      })
      .then(r => r.json())
      .then(data => {
          if (data.success) {
              if (window.invalidateItemCache) window.invalidateItemCache(id);
              const newOc = data.is_oc;
              ocBtn.dataset.isOc = newOc;
              ocBtn.setAttribute('title', newOc ? 'Remove OC status' : 'Mark as OC');
              // FA icon: toggle fa-solid / fa-regular
              ocBtn.classList.toggle('fa-solid', newOc);
              ocBtn.classList.toggle('fa-regular', !newOc);

              const container = document.getElementById('oc-badge-container');
              if (container) {
                  if (newOc) {
                      container.innerHTML = ' — <span class="oc-badge" tooltip="Original Content">OC</span>';
                  } else {
                      container.innerHTML = '';
                  }
              }

              const containerInfobox = document.getElementById('oc-badge-container-infobox');
              if (containerInfobox) {
                  if (newOc) {
                      containerInfobox.innerHTML = '<span class="oc-badge" tooltip="Original Content">OC</span>';
                  } else {
                      containerInfobox.innerHTML = '';
                  }
              }

              window.flashMessage((window.f0ckI18n && (newOc ? window.f0ckI18n.oc_marked : window.f0ckI18n.oc_removed)) || (newOc ? 'MARKED AS ORIGINAL CONTENT' : 'OC STATUS REMOVED'));
          } else {
              window.flashError(data.msg || 'Error toggling OC status');
          }
      })
      .catch(console.error);

    } else if (target.closest('#a_visibility') || target.closest('#info-visibility-edit-btn')) {
      e.preventDefault();
      const visTrigger = target.closest('#a_visibility') || target.closest('#info-visibility-edit-btn');
      const id = visTrigger.dataset.itemId || document.getElementById('visibility-item-id')?.value;
      const visBtnMain = document.getElementById('a_visibility');
      const rawVis = visTrigger.dataset.visibility ?? visBtnMain?.dataset.visibility ?? '0';
      const currentVis = parseInt(rawVis, 10);
      const modal = document.getElementById('visibility-modal');
      if (modal) {
        const inputId = document.getElementById('visibility-item-id');
        if (inputId && id) inputId.value = id;
        const radios = modal.querySelectorAll('input[name="visibility"]');
        radios.forEach(r => {
          r.checked = (parseInt(r.value, 10) === currentVis);
        });
        modal.style.display = 'flex';
        document.body.classList.add('modal-open');
      }

    } else if (target.closest('#a_rethumb')) {
        e.preventDefault();
        const reBtn = target.closest('#a_rethumb');
        const itemId = reBtn.dataset.itemId;

        // Helper: POST a blob as thumbnail
        const submitRethumb = (blob, currentItemId) => {
            const fd = new FormData();
            fd.append('file', blob, 'thumbnail.jpg');
            window.flashMessage(i18n.uploading || 'Uploading...');
            fetch(`/api/v2/items/${currentItemId}/thumbnail`, {
                method: 'POST',
                headers: { 'X-CSRF-Token': window.f0ckSession?.csrf_token },
                body: fd
            })
            .then(r => r.json())
            .then(data => {
                if (data.success) {
                    window.flashMessage(data.msg);
                    if (window.refreshItemThumbnails) window.refreshItemThumbnails(currentItemId);
                } else {
                    window.flashError(data.msg || 'Upload failed');
                }
            })
            .catch(err => { window.flashError('Upload error'); console.error(err); });
        };

        // For Flash items: show a capture modal instead of a file picker
        const rufflePlayer = document.querySelector('#ruffle-container ruffle-player');
        if (rufflePlayer) {

            const tryFindCanvas = (root) => {
                if (!root) return null;
                const c = root.querySelector('canvas');
                if (c) return c;
                for (const el of root.querySelectorAll('*')) {
                    if (el.shadowRoot) { const found = tryFindCanvas(el.shadowRoot); if (found) return found; }
                }
                return null;
            };

            // POST blob to thumbnail API and close modal
            const submitRethumb = (blob) => {
                const fd = new FormData();
                fd.append('file', blob, 'thumbnail.jpg');
                window.flashMessage(i18n.uploading || 'Uploading...');
                fetch(`/api/v2/items/${itemId}/thumbnail`, {
                    method: 'POST',
                    headers: { 'X-CSRF-Token': window.f0ckSession?.csrf_token },
                    body: fd
                })
                .then(r => r.json())
                .then(data => {
                    if (data.success) {
                        window.flashMessage(data.msg);
                        if (window.refreshItemThumbnails) window.refreshItemThumbnails(itemId);
                    } else {
                        window.flashError(data.msg || 'Upload failed');
                    }
                })
                .catch(err => { window.flashError('Upload error'); console.error(err); });
            };

            // Capture current Ruffle frame → return blob via callback
            const captureFrame = (cb) => {
                const canvas = tryFindCanvas(rufflePlayer.shadowRoot || rufflePlayer) || tryFindCanvas(rufflePlayer);
                if (!canvas || canvas.width === 0 || canvas.height === 0) {
                    cb(null);
                    return;
                }
                const out = document.createElement('canvas');
                const MAX = 640;
                const w = canvas.width, h = canvas.height;
                if (w > MAX || h > MAX) {
                    const ratio = Math.min(MAX / w, MAX / h);
                    out.width = Math.round(w * ratio);
                    out.height = Math.round(h * ratio);
                } else {
                    out.width = w || 320;
                    out.height = h || 240;
                }
                out.getContext('2d').drawImage(canvas, 0, 0, out.width, out.height);
                out.toBlob(cb, 'image/jpeg', 0.92);
            };

            // Build & show modal using site CSS classes
            const showCaptureModal = (initialBlob) => {
                document.getElementById('rethumb-capture-modal')?.remove();

                let currentBlob = initialBlob;

                const overlay = document.createElement('div');
                overlay.id = 'rethumb-capture-modal';
                overlay.className = 'modal-overlay';
                overlay.style.zIndex = '99999';

                const box = document.createElement('div');
                box.className = 'modal-content';
                box.style.cssText = 'max-width:480px;width:90%;text-align:left;position:relative;';

                const title = document.createElement('h3');
                title.textContent = 'Thumbnail Preview';
                title.style.marginTop = '0';

                const img = document.createElement('img');
                img.src = URL.createObjectURL(initialBlob);
                img.style.cssText = 'width:100%;height:auto;display:block;border-radius:0;margin-bottom:4px;';

                const actions = document.createElement('div');
                actions.className = 'modal-actions';

                const btnUse = document.createElement('button');
                btnUse.textContent = 'Use as Thumbnail';
                btnUse.className = 'btn-danger';

                const btnRecapture = document.createElement('button');
                btnRecapture.textContent = 'Capture Again';
                btnRecapture.className = 'btn-secondary';

                const btnCancel = document.createElement('button');
                btnCancel.textContent = 'Cancel';
                btnCancel.className = 'btn-secondary';

                const close = () => overlay.remove();

                btnUse.onclick = () => { submitRethumb(currentBlob); close(); };
                btnRecapture.onclick = () => {
                    captureFrame((blob) => {
                        if (!blob) { window.flashError('Ruffle not ready'); return; }
                        URL.revokeObjectURL(img.src);
                        currentBlob = blob;
                        img.src = URL.createObjectURL(blob);
                    });
                };
                btnCancel.onclick = close;
                overlay.onclick = (ev) => { if (ev.target === overlay) close(); };

                actions.append(btnUse, btnRecapture, btnCancel);
                box.append(title, img, actions);
                overlay.appendChild(box);
                document.body.appendChild(overlay);
            };

            captureFrame((blob) => {
                if (blob) {
                    showCaptureModal(blob);
                } else {
                    window.flashError('Ruffle not ready — play the Flash first');
                }
            });

            return; // never open file picker for Flash items
        }


        // Non-Flash items: use the file picker as before
        let fileInput = document.getElementById('rethumb-file-input');
        if (!fileInput) {
            fileInput = document.createElement('input');
            fileInput.type = 'file';
            fileInput.id = 'rethumb-file-input';
            fileInput.accept = 'image/png, image/jpeg, image/gif, image/webp';
            fileInput.style.display = 'none';
            document.body.appendChild(fileInput);

            fileInput.addEventListener('change', function(evt) {
                const file = evt.target.files[0];
                if (!file) return;
                if (file.size > 5 * 1024 * 1024) {
                    window.flashError('File is too large (max 5MB)');
                    fileInput.value = '';
                    return;
                }
                const currentItemId = fileInput.dataset.itemId;
                submitRethumb(file, currentItemId);
                fileInput.value = '';
            });
        }

        fileInput.dataset.itemId = itemId;
        fileInput.click();
    }
  });

  window._activeRatingCycleRequestsCount = 0;

  window.cycleRating = function(targetEl, explicitPostId) {
    const ratingEl = targetEl ? (targetEl.closest('.rating-tag') || targetEl.closest('button#a_toggle') || targetEl) : document.querySelector('.rating-tag.can-cycle, button#a_toggle');
    if (!ratingEl) return;

    const containerEl = ratingEl.closest('.item-layout-container, #tags, #onara-item-mount, .item-view');
    const containerId = containerEl?.dataset?.itemId 
      || containerEl?.querySelector('a.id-link[data-item-id], #comments-container[data-item-id]')?.dataset?.itemId;
    const itemIdStr = explicitPostId || ratingEl.dataset.itemId || containerId || window.getCurrentItemId();
    if (!itemIdStr) return;
    const postid = parseInt(itemIdStr, 10);
    if (isNaN(postid)) return;

    // Determine current rating
    let currentRating = ratingEl.dataset.rating || '';
    if (!currentRating) {
      if (ratingEl.classList.contains('is-sfw') || ratingEl.classList.contains('badge-success')) currentRating = 'sfw';
      else if (ratingEl.classList.contains('is-nsfw') || ratingEl.classList.contains('badge-danger')) currentRating = 'nsfw';
      else if (ratingEl.classList.contains('is-nsfl') || ratingEl.classList.contains('badge-nsfl')) currentRating = 'nsfl';
      else if (ratingEl.classList.contains('is-untagged') || ratingEl.classList.contains('badge-untagged')) currentRating = 'untagged';
      else {
        const txt = ratingEl.innerText.trim().toLowerCase();
        if (txt === 'sfw') currentRating = 'sfw';
        else if (txt === 'nsfw') currentRating = 'nsfw';
        else if (txt === 'nsfl') currentRating = 'nsfl';
        else currentRating = 'untagged';
      }
    }

    // Cycle: SFW -> NSFW -> NSFL (if enabled) -> SFW; untagged -> SFW
    let nextRating = 'sfw';
    if (currentRating === 'sfw') {
      nextRating = 'nsfw';
    } else if (currentRating === 'nsfw') {
      nextRating = (window.f0ckSession && window.f0ckSession.enable_nsfl !== false) ? 'nsfl' : 'sfw';
    } else if (currentRating === 'nsfl') {
      nextRating = 'sfw';
    }

    const mapping = {
      sfw: { label: 'SFW', text: 'sfw', badgeCls: 'badge-success', isCls: 'is-sfw', toast: '🛡 SFW' },
      nsfw: { label: 'NSFW', text: 'nsfw', badgeCls: 'badge-danger', isCls: 'is-nsfw', toast: '🔥 NSFW' },
      nsfl: { label: 'NSFL', text: 'nsfl', badgeCls: 'badge-nsfl', isCls: 'is-nsfl', toast: '💀 NSFL' },
      untagged: { label: '?', text: 'untagged', badgeCls: 'badge-untagged', isCls: 'is-untagged', toast: '❓ Unrated' }
    };
    const info = mapping[nextRating];
    const nextLabel = info.label;

    // Backup current state
    const oldClasses = [...ratingEl.classList];
    const oldInnerHTML = ratingEl.innerHTML;
    const oldDatasetRating = ratingEl.dataset.rating;

    // Track active request ID to ignore out-of-order race conditions on rapid keypresses
    const reqId = (ratingEl._lastCycleReqId || 0) + 1;
    ratingEl._lastCycleReqId = reqId;

    // Increment active requests count to block incoming live SSE tag updates during cycle
    window._activeRatingCycleRequestsCount = (window._activeRatingCycleRequestsCount || 0) + 1;
    ratingEl._activeRequestsCount = (ratingEl._activeRequestsCount || 0) + 1;

    // Optimistically apply new state to rating tag in-place (no full-DOM recreation)
    ratingEl.className = `badge ${info.badgeCls} rating-tag ${info.isCls} can-cycle`;
    ratingEl.dataset.rating = nextRating;
    ratingEl.dataset.itemId = String(postid);
    ratingEl.removeAttribute('title');
    ratingEl.removeAttribute('tooltip');
    ratingEl.removeAttribute('flow');

    const labelEl = ratingEl.querySelector('.rating-label') || ratingEl;
    labelEl.textContent = info.text;

    // Immediately remove any duplicate rating tags from #tags container
    const tagsContainer = document.querySelector("#tags");
    if (tagsContainer) {
      const allRatingBadges = tagsContainer.querySelectorAll('.rating-tag, .badge-success, .badge-danger, .badge-nsfl, .badge-untagged, [data-rating]');
      allRatingBadges.forEach(b => {
        if (b !== ratingEl) b.remove();
      });
    }

    // Also update any legacy a_toggle if present
    const toggleBtn = document.querySelector('button#a_toggle');
    if (toggleBtn && toggleBtn !== ratingEl) {
      toggleBtn.classList.remove('is-sfw', 'is-nsfw', 'is-nsfl', 'is-untagged');
      toggleBtn.classList.add(`is-${nextRating}`);
    }

    // Optimistically update media-object data-mode for instant visual blur reaction
    const mediaObj = document.querySelector('.media-object');
    if (mediaObj) {
      mediaObj.dataset.mode = nextRating;
    }

    // Optimistically update grid thumbnail(s) data-mode so div.posts > a > p::before updates immediately
    const modeAttr = (nextRating === 'untagged' || !nextRating) ? 'null' : nextRating;
    const findMatchingThumbs = () => {
      const thumbs = new Set();
      document.querySelectorAll(`.posts > a.thumb[data-item-id="${postid}"], .posts a[data-item-id="${postid}"], .posts a[href$="/${postid}"]`).forEach(t => thumbs.add(t));
      if (document.body.classList.contains('onara-modal-open')) {
        const onaraThumb = document.querySelector('.posts > a.thumb.onara-active');
        if (onaraThumb) thumbs.add(onaraThumb);
      }
      return Array.from(thumbs);
    };
    const targetThumbs = findMatchingThumbs();
    const oldThumbModes = targetThumbs.map(t => ({ el: t, mode: t.getAttribute('data-mode') }));
    targetThumbs.forEach(t => t.setAttribute('data-mode', modeAttr));

    const flashMsg = (window.f0ckI18n && window.f0ckI18n.mode_activated && window.f0ckI18n.mode_activated.replace('{mode}', nextLabel)) || ('RATING UPDATED: ' + nextLabel);
    window.flashMessage(flashMsg);

    // Debounce the network request by 250ms so rapid clicks only dispatch the final state to the server
    window._ratingDebounceTimers = window._ratingDebounceTimers || {};
    if (window._ratingDebounceTimers[postid]) {
      clearTimeout(window._ratingDebounceTimers[postid]);
    }
    window._activeRatingCycleRequestsCount = 1;
    ratingEl._activeRequestsCount = 1;

    window._ratingDebounceTimers[postid] = setTimeout(() => {
      delete window._ratingDebounceTimers[postid];
      const targetRating = ratingEl.dataset.rating || nextRating;

      const csrf = (typeof window.getCsrfToken === 'function')
        ? window.getCsrfToken()
        : ((window.f0ckSession && window.f0ckSession.csrf_token) || document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '');

      const currentSub = (window.albumGallery && typeof window.albumGallery.getCurrentSubf0ck === 'function')
        ? window.albumGallery.getCurrentSubf0ck()
        : null;
      const subf0ck_id = currentSub ? (currentSub.slug || currentSub.id) : (ratingEl.dataset.subf0ckSlug || ratingEl.dataset.subf0ckId || document.querySelector('#tags')?.dataset?.subf0ckSlug || null);

      fetch(`/api/v2/item/${postid}/rating`, {
        method: 'POST',
        headers: { 
          "Content-Type": "application/json",
          "X-CSRF-Token": csrf 
        },
        body: JSON.stringify({ rating: targetRating, subf0ck_id, csrf_token: csrf })
      })
      .then(r => r.json())
      .then(res => {
        if (!window._ratingDebounceTimers || !window._ratingDebounceTimers[postid]) {
          window._activeRatingCycleRequestsCount = 0;
          ratingEl._activeRequestsCount = 0;
        }

        if (res && res.success && window.invalidateItemCache) {
          window.invalidateItemCache(postid);
        }

        const currentIdStr = window.getCurrentItemId();
        const currentPostId = currentIdStr ? parseInt(currentIdStr, 10) : null;
        if (currentPostId !== postid) return;

        if (ratingEl._lastCycleReqId !== reqId) return; // ignore stale responses
        if (res.success) {
          if (res.tags && currentSub) {
            currentSub.tags = res.tags;
          }
          if (res.tags && window.renderTags) {
            window.renderTags(res.tags);
          }
          const curMedia = document.querySelector('.media-object');
          if (curMedia && res.rating) {
            curMedia.dataset.mode = res.rating;
          }
          const confirmedMode = (res.rating === 'untagged' || !res.rating) ? 'null' : res.rating;
          findMatchingThumbs().forEach(t => t.setAttribute('data-mode', confirmedMode));
        } else {
          revert();
          window.flashMessage('Error: ' + (res.msg || 'Failed to update rating'), 3000, 'error');
        }
      })
      .catch(err => {
        window._activeRatingCycleRequestsCount = Math.max(0, (window._activeRatingCycleRequestsCount || 1) - 1);
        ratingEl._activeRequestsCount = Math.max(0, (ratingEl._activeRequestsCount || 1) - 1);

        const currentIdStr = window.getCurrentItemId();
        const currentPostId = currentIdStr ? parseInt(currentIdStr, 10) : null;
        if (currentPostId !== postid) return;

        if (ratingEl._lastCycleReqId !== reqId) return;
        console.error('[RATING_TOGGLE_ERROR]', err);
        revert();
        window.flashMessage('Failed to toggle rating', 3000, 'error');
      });
    }, 200);

    function revert() {
      ratingEl.className = '';
      oldClasses.forEach(cls => ratingEl.classList.add(cls));
      ratingEl.innerHTML = oldInnerHTML;
      if (oldDatasetRating !== undefined) ratingEl.dataset.rating = oldDatasetRating;
      oldThumbModes.forEach(({ el, mode }) => {
        if (mode !== null) el.setAttribute('data-mode', mode);
        else el.removeAttribute('data-mode');
      });
    }
  };

  window.addEventListener('popstate', (e) => {
    const url = window.location.href;
    const p = window.location.pathname;

    // ── Abyss handling ───────────────────────────────────────────────────
    const wasOnAbyss = document.body.classList.contains('scroller-active');

    if (p.startsWith('/abyss')) {
      if (wasOnAbyss) {
        // Within-abyss back/forward — let the scroller's own popstate handler manage it
        return;
      }
      // Coming BACK to abyss from a different page — full reload to reinitialize
      window.location.reload();
      return;
    }

    // Leaving abyss — stop all media
    if (wasOnAbyss) {
      document.querySelectorAll('video, audio').forEach(el => { try { el.pause(); el.removeAttribute('src'); el.load(); } catch {} });
      document.querySelectorAll('ruffle-player').forEach(el => { try { el.remove(); } catch {} });
    }

    // Item detection logic MUST match loadPageAjax/loadItemAjax analysis
    // Priorities: Item first, then Special/Grid
    const isItem = isItemPath(p);
    const isSpecial = p.startsWith('/notifications') || p.startsWith('/tags') || p.startsWith('/user/') || p.startsWith('/subscriptions') || p.startsWith('/ranking');
    const isGridLike = url.match(/\/p\/\d+/) || url.match(/[?&]page=\d+/) || p === '/';

    window.f0ckDebug("[popstate] Navigation to:", url, { isItem, isSpecial, isGridLike });

    const isOnaraModalCurrentlyOpen = document.body.classList.contains('onara-modal-open') || 
      (document.getElementById('onara-modal') && document.getElementById('onara-modal').style.display !== 'none');

    if (isOnaraModalCurrentlyOpen && !isItem) {
      closeOnaraModal({ skipHistory: true });
      if (isOnaraActive()) {
        const currentGrid = window._onaraCurrentGridUrl || (document.querySelector('.posts') ? (document.querySelector('.posts').dataset.currentUrl || '/') : '/');
        const targetPath = new URL(url, window.location.origin).pathname;
        const currentPath = new URL(currentGrid, window.location.origin).pathname;
        if (currentPath !== targetPath) {
          window._onaraCurrentGridUrl = url;
          loadPageAjax(url, true, { skipPush: true });
        } else {
          document.title = window._onaraReturnTitle || window.f0ckDomain || 'f0ck';
        }
      }
      return;
    }

    if (isItem) {
      if (isOnaraActive()) {
        const expectedBaseUrl = getOnaraBaseUrl(url);
        const currentGrid = window._onaraCurrentGridUrl || (document.querySelector('.posts') ? (document.querySelector('.posts').dataset.currentUrl || '/') : '/');
        const expectedPath = new URL(expectedBaseUrl, window.location.origin).pathname;
        const currentPath = new URL(currentGrid, window.location.origin).pathname;
        if (currentPath !== expectedPath) {
          window._onaraCurrentGridUrl = expectedBaseUrl;
          loadPageAjax(expectedBaseUrl, true, { skipPush: true });
        }
      }
      loadItemAjax(url, true, { skipPush: true });
    } else if (isSpecial || isGridLike) {
      if (isOnaraActive()) {
        window._onaraCurrentGridUrl = url;
      }
      loadPageAjax(url, true, { skipPush: true });
    } else {
      // Fallback
      if (isOnaraActive()) {
        window._onaraCurrentGridUrl = url;
      }
      loadPageAjax(url, true, { skipPush: true });
    }
  });

  // <keybindings>
  const clickOnElementBinding = selector => () => (elem = document.querySelector(selector)) ? elem.click() : null;
  const clickOnNavBinding = (directionOrSelector) => () => {
    if (window._currentActiveAlbumGallery && window._currentActiveAlbumGallery.isHovered) {
      if (directionOrSelector === 'prev' || directionOrSelector === '#prev') {
        window._currentActiveAlbumGallery.prev();
        return;
      } else if (directionOrSelector === 'next' || directionOrSelector === '#next') {
        window._currentActiveAlbumGallery.next();
        return;
      }
    }
    let el;
    if (directionOrSelector === 'prev' || directionOrSelector === '#prev') {
      el = document.querySelector(".steuerung .nav-prev:not([href='#']), .nav-prev:not([href='#']), #prev:not([href='#'])") || document.querySelector('.nav-prev') || document.getElementById('prev');
    } else if (directionOrSelector === 'next' || directionOrSelector === '#next') {
      el = document.querySelector(".steuerung .nav-next:not([href='#']), .nav-next:not([href='#']), #next:not([href='#'])") || document.querySelector('.nav-next') || document.getElementById('next');
    } else {
      el = document.querySelector(directionOrSelector);
    }
    if (el && el.href && !el.href.endsWith('#')) {
      if (typeof window.triggerSteuerungFeedback === 'function') {
        const steuerungBtn = document.querySelector(directionOrSelector === 'prev' || directionOrSelector === '#prev' ? '.steuerung .nav-prev' : '.steuerung .nav-next') || el;
        window.triggerSteuerungFeedback(steuerungBtn);
      }
      el.click();
    }
  };
  const seekToPercentage = fraction => {
    const mediaElement = document.querySelector('#my-video') || document.querySelector('audio#my-video');
    if (mediaElement && isFinite(mediaElement.duration)) {
      mediaElement.currentTime = mediaElement.duration * fraction;
    }
  };
  const keybindings = {
    "0": () => seekToPercentage(0),
    "1": () => seekToPercentage(0.1),
    "2": () => seekToPercentage(0.2),
    "3": () => seekToPercentage(0.3),
    "4": () => seekToPercentage(0.4),
    "5": () => seekToPercentage(0.5),
    "6": () => seekToPercentage(0.6),
    "7": () => seekToPercentage(0.7),
    "8": () => seekToPercentage(0.8),
    "9": () => seekToPercentage(0.9),
    "[": () => window._currentActiveAlbumGallery?.prev(),
    "]": () => window._currentActiveAlbumGallery?.next(),
    "ArrowLeft": clickOnNavBinding("prev"),
    "a": clickOnNavBinding("prev"),
    "ArrowRight": clickOnNavBinding("next"),
    "d": clickOnNavBinding("next"),
    "r": () => {
      const el = document.querySelector(".steuerung #random, #random, #nav-random");
      if (el) {
        if (typeof window.triggerSteuerungFeedback === 'function') {
          window.triggerSteuerungFeedback(el);
        }
        el.click();
      }
    },
    "p": (e) => {
      if (e && e.preventDefault) e.preventDefault();
      const ratingEl = document.querySelector('.rating-tag.can-cycle, button#a_toggle');
      if (ratingEl && window.cycleRating) {
        window.cycleRating(ratingEl);
      }
    },
    "f": () => {
      if (localStorage.getItem('fForFullscreen') === 'true') {
        const fsBtn = document.querySelector('.v0ck_fs_btn');
        const imgBtn = document.querySelector('.image-modal-btn');
        if (fsBtn) {
          fsBtn.click();
        } else if (imgBtn) {
          imgBtn.click();
        } else {
          clickOnElementBinding("#a_favo")();
        }
      } else {
        clickOnElementBinding("#a_favo")();
      }
    },
    "i": clickOnElementBinding("a#a_addtag"),
    "l": () => window.toggleBackground(),
    "y": () => {
      copyCurrentUrl();
    },
    " ": () => {
      if (video && typeof video.play === 'function') { // Check if video wrapper exists/is valid
        video[video.paused ? 'play' : 'pause']();
        const overlay = document.querySelector('.v0ck_overlay');
        if (overlay) overlay.classList[video.paused ? 'remove' : 'add']('v0ck_hidden');
      } else {
        const img = document.querySelector("#f0ck-image");
        if (img) img.click();
      }
    },
     "m": () => {
        window.randomizeLogo();
        const cookieMime = document.cookie.split('; ').find(row => row.startsWith('mime='));
        const mime = cookieMime ? cookieMime.split('=')[1] : null;
        loadPageAjax(mime ? `/${mime}` : '/');
      },
    "h": () => {
      if (typeof window.toggleSidebarRight === 'function') {
        window.toggleSidebarRight();
      }
    },
    "?": () => {
      const modal = document.getElementById('shortcuts-modal');
      if (modal) {
        if (modal.style.display === 'none') {
          openModal(modal);
        } else {
          closeModal(modal);
        }
      }
    },
    "ß": () => {
      const modal = document.getElementById('shortcuts-modal');
      if (modal) {
        if (modal.style.display === 'none') {
          openModal(modal);
        } else {
          closeModal(modal);
        }
      }
    },
    "q": () => {
      const modal = document.getElementById('metadata-modal');
      if (modal && modal.style.display !== 'none') {
        // Modal is open — close it
        modal.style.display = 'none';
        document.dispatchEvent(new Event('metadata-modal-close'));
      } else {
        const btn = document.getElementById('a_metadata');
        if (btn) btn.click();
      }
    },
    "z": () => {
      const btn = document.querySelector('.shuffle-btn');
      if (btn) btn.click();
    }
  };
  // Track whether the user has clicked inside the Ruffle player.
  // Ruffle renders in a shadow root / iframe so document.activeElement won't reflect it.
  let ruffleHasFocus = false;
  document.addEventListener('click', (e) => {
    const rc = document.getElementById('ruffle-container');
    ruffleHasFocus = !!(rc && rc.contains(e.target));
  }, true); // capture phase so it runs before anything else

  document.addEventListener("keydown", e => {
    // Block interaction if content warning is visible
    const cwModal = document.getElementById('content-warning-modal');
    if (cwModal && cwModal.style.display !== 'none') return;

    // Yield all keys to Ruffle when user has clicked inside the player
    if (ruffleHasFocus) return;

    // Don't fire global shortcuts on the scroller/abyss page — it has its own handler
    if (document.body && document.body.classList.contains('scroller-active')) return;

    // Shift+F: shortcut for favorite when "F is for Fullscreen" is active
    if ((e.key === 'F' || (e.key === 'f' && e.shiftKey)) && e.shiftKey && !e.ctrlKey && !e.metaKey && !e.altKey && e.target.tagName !== "INPUT" && e.target.tagName !== "TEXTAREA" && !e.target.isContentEditable) {
      if (localStorage.getItem('fForFullscreen') === 'true') {
        if (e.repeat) return;
        e.preventDefault();
        clickOnElementBinding("#a_favo")();
        return;
      }
    }

    if (e.key in keybindings && e.target.tagName !== "INPUT" && e.target.tagName !== "TEXTAREA") {
      const isHelpKey = e.key === '?' || e.key === 'ß';
      if (e.repeat || (e.shiftKey && e.key !== '?') || e.ctrlKey || e.metaKey || e.altKey)
        return;
      e.preventDefault();
      keybindings[e.key]();
    }
  });
  // </keybindings>

  // <wheeler>
  let lastNavWheelTime = 0;
  const wheelEventListener = function (event) {
    // Block interaction if content warning is visible
    const cwModal = document.getElementById('content-warning-modal');
    if (cwModal && cwModal.style.display !== 'none') return;

    // Block if image modal / lightbox is open
    const imageModal = document.getElementById('image-modal');
    if (imageModal && imageModal.classList.contains('visible')) return;

    // Yield if scroller/abyss page is active
    if (document.body && document.body.classList.contains('scroller-active')) return;

    // Don't hijack if user is inside an input, textarea, or contenteditable element
    if (event.target && (event.target.tagName === 'INPUT' || event.target.tagName === 'TEXTAREA' || event.target.isContentEditable)) {
      return;
    }

    const isShiftWheel = event.shiftKey && !event.ctrlKey && !event.altKey && !event.metaKey;
    const navBtn = event.target.closest('.nav-next, .nav-prev');
    const isNavHover = !!navBtn;
    const isMediaHover = !isNavHover && !isShiftWheel && !!event.target.closest('.media-object') && !event.target.closest('#favs');

    // Trigger conditions:
    // 1. Shift + scrollwheel shortcut anywhere on post view
    // 2. Hovering over .nav-next / .nav-prev
    // 3. Hovering over media-object when 'wheelNavEnabled' preference is true
    if (!isShiftWheel && !isNavHover && (!isMediaHover || localStorage.getItem('wheelNavEnabled') !== 'true')) {
      return;
    }

    // Only intercept if item navigation buttons exist on the page
    const hasNav = !!document.querySelector("#next:not([href='#']), .nav-next:not([href='#']), #prev:not([href='#']), .nav-prev:not([href='#'])");
    if (!hasNav) return;

    // Always prevent default page scroll when shortcut or target is matched
    event.preventDefault();

    // Prevent rapid multi-firing while navigating or during throttle cooldown
    const now = Date.now();
    if (isNavigating || now - lastNavWheelTime < 250) return;

    const delta = Math.abs(event.deltaY) >= Math.abs(event.deltaX) ? event.deltaY : event.deltaX;
    if (delta === 0) return;

    if (delta < 0) {
      const el = document.querySelector("#prev:not([href='#']), .nav-prev:not([href='#'])") || document.getElementById('prev') || document.querySelector('.nav-prev');
      if (el && el.href && !el.href.endsWith('#')) {
        lastNavWheelTime = now;
        el.click();
      }
    } else if (delta > 0) {
      const el = document.querySelector("#next:not([href='#']), .nav-next:not([href='#'])") || document.getElementById('next') || document.querySelector('.nav-next');
      if (el && el.href && !el.href.endsWith('#')) {
        lastNavWheelTime = now;
        el.click();
      }
    }
  };

  window.addEventListener('wheel', wheelEventListener, { capture: true, passive: false });
  // </wheeler>

  // <infinite-scroll>
  const initInfiniteScroll = (postsContainer) => {
    if (!postsContainer || postsContainer.classList.contains('no-infinite-scroll')) return;
    
    const scrollContainer = postsContainer.closest('.index-container') || window;
    const isElementScroll = scrollContainer !== window;

    const getScrollTop = () => isElementScroll ? scrollContainer.scrollTop : window.scrollY;
    const getViewportHeight = () => isElementScroll ? scrollContainer.clientHeight : window.innerHeight;
    const getScrollHeight = () => isElementScroll ? scrollContainer.scrollHeight : (document.documentElement.scrollHeight || document.body.scrollHeight);
    const scrollToPos = (top) => isElementScroll ? scrollContainer.scrollTo(0, top) : window.scrollTo(0, top);

    // If already initialized, clean up the old scroll listener first
    if (postsContainer._infiniteState) {
      if (postsContainer._scrollHandler) {
        const sc = postsContainer._scrollContainer || scrollContainer;
        sc.removeEventListener('scroll', postsContainer._scrollHandler);
        delete postsContainer._scrollHandler;
        delete postsContainer._scrollContainer;
      }
      delete postsContainer._infiniteState;
    }

    // Infinite scroll state
    postsContainer._infiniteState = {
      loading: false,
      loadingUp: false,
      hasMore: true,
      hasPrev: false,
      currentPage: 1,
      firstPage: 1,
      lastScrollY: getScrollTop(),
      navigationGracePeriod: Date.now() + 500, // No URL updates for 500ms after load
      loadedPages: new Set()
    };
    const infiniteState = postsContainer._infiniteState;

    // Extract context (tag/user/mime) from URL
    const getContext = () => {
      const ctx = {};
      const tagMatch = window.location.pathname.match(/\/tag\/([^/]+)/);
      if (tagMatch && !window.location.pathname.startsWith('/tags')) ctx.singleTag = decodeURIComponent(tagMatch[1]);

      const userMatch = window.location.pathname.match(/\/user\/([^/]+)/);
      if (userMatch) {
        ctx.user = decodeURIComponent(userMatch[1]);
        if (window.location.pathname.includes('/favs')) ctx.fav = true;
        if (window.location.pathname.includes('/f0cks')) ctx.f0cks = true;
        if (window.location.pathname.includes('/tags')) ctx.userTags = true;
      }
      if (window.location.pathname.startsWith('/favs')) {
        ctx.fav = true;
        if (!window.f0ckSession || !window.f0ckSession.user) ctx.guestFavs = true;
      }

      const mimeMatch = window.location.pathname.match(/\/(image|audio|video)(?:\/|$)/);
      if (mimeMatch) ctx.mime = mimeMatch[1];

      const hallMatch = window.location.pathname.match(/\/h\/([^/]+)/);
      if (hallMatch) ctx.hall = decodeURIComponent(hallMatch[1]);
      const isNotif = window.location.pathname.startsWith('/notifications');
      if (isNotif) ctx.notif = true;
      const isTags = window.location.pathname.startsWith('/tags');
      if (isTags) ctx.tags = true;
      const isSubs = window.location.pathname.startsWith('/subscriptions');
      if (isSubs) ctx.subs = true;
      return ctx;
    };

    // Build URL path for history
    const buildUrl = (page) => {
      const ctx = getContext();
      if (ctx.notif) return page > 1 ? `/notifications?page=${page}` : '/notifications';
      if (ctx.tags) return page > 1 ? `/tags?page=${page}` : '/tags';
      if (ctx.subs) return page > 1 ? `/subscriptions?page=${page}` : '/subscriptions';
      let path = '/';
      if (ctx.singleTag) path += `tag/${ctx.singleTag}/`;
      if (ctx.hall) path += `h/${ctx.hall}/`;
      if (ctx.user) {
        path += `user/${ctx.user}/`;
        if (ctx.fav) path += `favs/`;
        else if (ctx.f0cks) path += `f0cks/`;
        else if (ctx.userTags) path += `tags/`;
      }
      if (ctx.mime) path += `${ctx.mime}/`;
      if (page > 1) path += `p/${page}`;
      const resPath = path.replace(/\/$/, '') || '/';
      const isStrict = !window.f0ckSession && (localStorage.getItem('search_strict') === 'true');
      return isStrict ? `${resPath}?strict=1` : resPath;
    };

    // Extract current page from URL
    const pageMatch = window.location.pathname.match(/\/p\/(\d+)/);
    if (pageMatch) {
      const p = parseInt(pageMatch[1]);
      infiniteState.currentPage = p;
      infiniteState.firstPage = p;
    }

    // Check for pre-set state from AJAX page load (or initial server render)
    if (postsContainer.dataset.hasMore !== undefined) {
      infiniteState.hasMore = postsContainer.dataset.hasMore === 'true';
      delete postsContainer.dataset.hasMore; // Clear after reading
    }
    if (postsContainer.dataset.currentPage !== undefined) {
      const p = parseInt(postsContainer.dataset.currentPage);
      
      // If the server-provided page differs from the URL, synchronize the URL immediately
      if (infiniteState.currentPage !== p) {
        infiniteState.currentPage = p;
        infiniteState.firstPage = p;
        if (!document.body.classList.contains('onara-modal-open')) {
          history.replaceState({}, '', buildUrl(p));
        }
      }

      postsContainer.dataset.currentPage = p;
    }

    // Track initially loaded page
    infiniteState.loadedPages.add(infiniteState.currentPage);

    // Check if we can scroll up (are we on page > 1?)
    infiniteState.hasPrev = infiniteState.firstPage > 1;

    // Track currently visible page for URL updates
    infiniteState.visiblePage = infiniteState.currentPage;

    // Helper to find the active page marker
    const updateUrlAndPagination = () => {
      const markers = [...document.querySelectorAll('[data-page-start]')];
      if (!markers.length) return;

      const triggerPoint = window.innerHeight / 3;
      let activeMarker = markers[0];

      // Find the marker that is currently most visible/active
      let maxVisibleHeight = 0;

      const viewportHeight = getViewportHeight();
      const scrollTop = getScrollTop();
      const scrollHeight = getScrollHeight();

      // Special case: if we are close to the bottom of the entire document/container, 
      // give priority to the last marker that is at least partially visible.
      // Increasing threshold to 150px for better resilience on high-res monitors.
      const isNearBottom = (viewportHeight + scrollTop) >= (scrollHeight - 150);
      const containerTop = isElementScroll ? scrollContainer.getBoundingClientRect().top : 0;

      // Heuristic: iterate markers and calculate how much vertical space each "page section" occupies in the viewport
      for (let i = 0; i < markers.length; i++) {
        const marker = markers[i];
        const rect = marker.getBoundingClientRect();
        const nextMarker = markers[i + 1];

        // Start of this section (relative to viewport/container top)
        const start = rect.top - containerTop;
        // End of this section (relative to viewport/container top). If no next marker, assume bottom of document/container
        // rect.top of next marker, or very large number
        const nextRect = nextMarker ? nextMarker.getBoundingClientRect() : null;
        const end = nextRect ? (nextRect.top - containerTop) : 99999;

        // Intersection with viewport [0, viewportHeight]
        const visibleStart = Math.max(0, start);
        const visibleEnd = Math.min(viewportHeight, end);

        const visibleHeight = Math.max(0, visibleEnd - visibleStart);

        // Heuristic: If a page *starts* in the top 20% of the viewport, it's the active page
        // This fixes the "p55 -> p56" jump on load for short pages.
        // HOWEVER: If we are near the bottom of the document, we skip this early break 
        // to ensure the LAST visible marker (the actual last page) can be picked.
        if (!isNearBottom && start >= -50 && start < viewportHeight * 0.2) {
          activeMarker = marker;
          break; // Stop looking, we found the top-most page
        }

        if (isNearBottom && visibleHeight > 0) {
          activeMarker = marker; // Keep picking the last visible one as we loop
        } else if (visibleHeight > maxVisibleHeight) {
          maxVisibleHeight = visibleHeight;
          activeMarker = marker;
        }
      }

      const newPage = parseInt(activeMarker.dataset.pageStart);
      if (newPage !== infiniteState.visiblePage) {
        // Skip URL update if we are within the navigation grace period
        if (Date.now() < (infiniteState.navigationGracePeriod || 0)) {
           return;
        }

        // Never overwrite item URL with /p/N when Onara modal is open!
        if (document.body.classList.contains('onara-modal-open')) {
           return;
        }

        // Update URL
        infiniteState.visiblePage = newPage;
        if (postsContainer) postsContainer.dataset.currentPage = newPage;
        history.replaceState({}, '', buildUrl(newPage));

        // Update Pagination
        const paginationHtml = activeMarker.dataset.paginationHtml;
        if (paginationHtml) {
          document.querySelectorAll('.pagination-wrapper').forEach(el => el.innerHTML = paginationHtml);
        }
      }
    };

    // Initialize marker for the first page
    const initFirstPageMarker = () => {
      const firstItem = postsContainer.querySelector('a');
      const pag = document.querySelector('.pagination-wrapper');
      if (firstItem && !firstItem.dataset.pageStart) {
        firstItem.dataset.pageStart = infiniteState.currentPage;
        if (pag) firstItem.dataset.paginationHtml = pag.innerHTML;
      }
    };
    initFirstPageMarker();

    // Fetch and append more items
    const loadMoreItems = async () => {
      if (infiniteState.loading || !infiniteState.hasMore) return;
      if (isNavigating) return; // Don't load more while switching contexts

      const nextPage = infiniteState.currentPage + 1;
      // Check if we already loaded this page (prevent duplicates)
      if (infiniteState.loadedPages.has(nextPage)) {
        return;
      }



      infiniteState.loading = true;
      const foot = document.querySelector("div#footbar");
      if (foot) {
        foot.innerHTML = '<span class="loading-spinner"></span>';
        foot.style.color = 'var(--footbar-color)';
      }

      // nextPage already calculated above
      const ctx = getContext();

      const params = new URLSearchParams();
      params.append('page', nextPage);
      if (ctx.singleTag) params.append('tag', ctx.singleTag);
      if (ctx.hall) params.append('hall', ctx.hall);
      if (ctx.user) params.append('user', ctx.user);
      if (ctx.fav) params.append('fav', 'true');
      if (ctx.guestFavs && window.f0ckGuestFavs) {
        const guestFavIds = window.f0ckGuestFavs.get();
        const eps = 24;
        const sliceIds = guestFavIds.slice((nextPage - 1) * eps, nextPage * eps);
        if (sliceIds.length === 0) {
          infiniteState.hasMore = false;
          return;
        }
        params.append('ids', sliceIds.join(','));
        params.append('total', guestFavIds.length);
      }
      if (ctx.mime) params.append('mime', ctx.mime);

      const isStrict = window.f0ckSession?.strict_mode || (localStorage.getItem('search_strict') === 'true');
      if (document.cookie.includes('random_mode=1') || window.location.search.includes('random=1')) params.append('random', '1');
      if (isStrict) {
        params.append('strict', '1');
      }

      if (ctx.notif) {
        const notifTab = document.getElementById('notifications-container')?.dataset?.tab;
        if (notifTab) params.append('tab', notifTab);
      }

      const fetchUrl = ctx.notif ? `/ajax/notifications?${params.toString()}` :
        ctx.tags ? `/api/tags?ajax=true&${params.toString()}` :
          ctx.userTags ? `/api/user/${encodeURIComponent(ctx.user)}/tags?ajax=true&${params.toString()}` :
            ctx.subs ? `/ajax/subscriptions?${params.toString()}` :
              `/ajax/items?${params.toString()}`;

      try {
        const response = await fetch(fetchUrl);
        const data = await response.json();

        if (data.success && data.html) {
          const currentPosts = postsContainer;
          if (currentPosts) {
            // Create elements from HTML string
            const temp = document.createElement('div');
            temp.innerHTML = data.html;
            const newItems = [...temp.children];

            if (newItems.length > 0) {
              // Mark the first item of the new page for URL updating
              const firstItem = newItems[0];
              if (firstItem) {
                firstItem.dataset.pageStart = data.currentPage;
                firstItem.dataset.paginationHtml = data.pagination;
              }


              // Append all new items
              newItems.forEach(item => currentPosts.appendChild(item));

              // Apply blur to any notif thumbs in the new batch
              if (ctx.notif && window.applyNotifThumbBlur) window.applyNotifThumbBlur(currentPosts);

              // Track loaded page
              infiniteState.loadedPages.add(data.currentPage);
              window.updateVisitIndicators();
              window.initLazyLoading();
            }
          }

          // Update state (last loaded page)
          infiniteState.currentPage = data.currentPage;
          infiniteState.hasMore = data.hasMore;


        } else {
          infiniteState.hasMore = false;
        }
      } catch (err) {
        console.error('Infinite scroll fetch error:', err);
      } finally {
        infiniteState.loading = false;
        if (foot) {
          if (infiniteState.hasMore) {
            foot.innerHTML = '&#9660;';
            foot.style.color = 'transparent';
          } else {
            const endMsg = foot.dataset.endMsg || '&#8212;';
            foot.innerHTML = endMsg;
            foot.style.color = 'var(--footbar-color, #888)';
          }
        }
      }
    };



    // Fetch and prepend previous items
    const loadPreviousItems = async () => {
      if (infiniteState.loadingUp || !infiniteState.hasPrev) return;
      if (isNavigating) return;

      const prevPage = infiniteState.firstPage - 1;
      // Check if we already loaded this page (prevent duplicates)
      if (infiniteState.loadedPages.has(prevPage)) {
        return;
      }



      infiniteState.loadingUp = true;
      const ctx = getContext();

      const params = new URLSearchParams();
      params.append('page', prevPage);
      if (ctx.singleTag) params.append('tag', ctx.singleTag);
      if (ctx.user) params.append('user', ctx.user);
      if (ctx.fav) params.append('fav', 'true');
      if (ctx.mime) params.append('mime', ctx.mime);

      const isStrict = window.f0ckSession?.strict_mode || (localStorage.getItem('search_strict') === 'true');
      if (document.cookie.includes('random_mode=1') || window.location.search.includes('random=1')) params.append('random', '1');
      if (isStrict) {
        params.append('strict', '1');
      }

      if (ctx.notif) {
        const notifTab = document.getElementById('notifications-container')?.dataset?.tab;
        if (notifTab) params.append('tab', notifTab);
      }

      const fetchUrl = ctx.notif ? `/ajax/notifications?${params.toString()}` :
        ctx.tags ? `/api/tags?ajax=true&${params.toString()}` :
          ctx.userTags ? `/api/user/${encodeURIComponent(ctx.user)}/tags?ajax=true&${params.toString()}` :
            ctx.subs ? `/ajax/subscriptions?${params.toString()}` :
              `/ajax/items?${params.toString()}`;

      try {
        const response = await fetch(fetchUrl);
        const data = await response.json();

        // Capture height/scroll RIGHT BEFORE insertion to account for any user scrolling during fetch
        const oldHeight = postsContainer.scrollHeight;
        const oldScrollTop = getScrollTop();

        if (data.success && data.html) {
          const temp = document.createElement('div');
          temp.innerHTML = data.html;
          const newItems = [...temp.children];

          if (newItems.length > 0) {
            // Prepend items using DocumentFragment
            const fragment = document.createDocumentFragment();
            newItems.forEach(item => fragment.appendChild(item));

            // Mark the first item of the prepended page
            const firstItem = newItems[0];
            if (firstItem) {
              firstItem.dataset.pageStart = prevPage;
              firstItem.dataset.paginationHtml = data.pagination;
            }

            postsContainer.insertBefore(fragment, postsContainer.firstChild);

            // Apply blur to any notif thumbs in the new batch
            if (ctx.notif && window.applyNotifThumbBlur) window.applyNotifThumbBlur(postsContainer);

            // Track loaded page
            infiniteState.loadedPages.add(prevPage);
            window.updateVisitIndicators();
            window.initLazyLoading();

            // Restore scroll position
            const newHeight = postsContainer.scrollHeight;
            scrollToPos(oldScrollTop + (newHeight - oldHeight));

            infiniteState.firstPage = prevPage;
            infiniteState.hasPrev = prevPage > 1;

          }
        } else {
          infiniteState.hasPrev = false;
        }
      } catch (err) {
        console.error('Infinite scroll (up) fetch error:', err);
      } finally {
        infiniteState.loadingUp = false;
      }
    };

    // Scroll detection - preload before reaching bottom
    const PRELOAD_OFFSET = 500; // pixels before bottom to trigger load

    // RAF throttle: getBoundingClientRect and offsetHeight force synchronous layout
    // reflows. Without throttling, Chromium recalculates layout on every scroll
    // event (potentially hundreds/sec), blocking the compositor and causing freezes.
    let _scrollTicking = false;
    const onScroll = () => {
      if (_scrollTicking) return;
      _scrollTicking = true;
      requestAnimationFrame(() => {
        _scrollTicking = false;

        if (document.body.classList.contains('onara-modal-open')) return;

        const currentContainer = postsContainer;
        // Only run if THIS container is the active one and still in DOM
        if (!currentContainer || !document.body.contains(currentContainer)) {
          scrollContainer.removeEventListener('scroll', onScroll);
          return;
        }
        if (currentContainer.classList.contains('no-infinite-scroll')) return;
        if (!main) return;

        updateUrlAndPagination();

        const scrollTop = getScrollTop();
        const vHeight = getViewportHeight();
        const sHeight = getScrollHeight();
        const distanceFromBottom = sHeight - (vHeight + scrollTop);

        // Load more when within PRELOAD_OFFSET pixels of bottom
        if (distanceFromBottom < PRELOAD_OFFSET && infiniteState.hasMore && !infiniteState.loading) {
          loadMoreItems();
        }

        // Load previous when within PRELOAD_OFFSET pixels of top
        if (scrollTop < PRELOAD_OFFSET && infiniteState.hasPrev && !infiniteState.loadingUp) {
          loadPreviousItems();
        }

        infiniteState.lastScrollY = scrollTop;
      });
    };

    // Store scroll handler and container reference for cleanup
    postsContainer._scrollHandler = onScroll;
    postsContainer._scrollContainer = scrollContainer;
    scrollContainer.addEventListener('scroll', onScroll, { passive: true });

    // Initial check (in case we loaded at top/bottom)
    setTimeout(onScroll, 100);
  };

  // Initial call on page load
  // Re-init logic
  const reinitAllInfiniteScroll = () => {
    document.querySelectorAll('div.posts, div.tags-grid, div.subs-grid').forEach(p => initInfiniteScroll(p));
  };

  reinitAllInfiniteScroll();
  // </infinite-scroll>
  // </infinite-scroll>



  // </visualizer> removed and moved to window.initVisualizer

  // <mediakeys>
  if (elem = document.querySelector("#my-video") && "mediaSession" in navigator) {
    const playpauseEvent = () => {
      video[video.paused ? 'play' : 'pause']();
      document.querySelector('.v0ck_overlay').classList[video.paused ? 'remove' : 'add']('v0ck_hidden');
    };
    navigator.mediaSession.setActionHandler('play', playpauseEvent);
    navigator.mediaSession.setActionHandler('pause', playpauseEvent);
    navigator.mediaSession.setActionHandler('stop', playpauseEvent);
    navigator.mediaSession.setActionHandler('previoustrack', () => {
      if (link = document.querySelector(".pagination > .prev:not(.disabled)"))
        changePage(link);
    });
    navigator.mediaSession.setActionHandler('nexttrack', () => {
      if (link = document.querySelector(".pagination > .next:not(.disabled)"))
        changePage(link);
    });
  }
  // </mediakeys>

  // <scroller>

  // <search-overlay>
  const initSearch = () => {
    if (!document.getElementById('search-overlay')) {
      const i18n = window.f0ckI18n || {};
      const overlay = document.createElement('div');
      overlay.id = 'search-overlay';
      overlay.innerHTML = `
             <div id="search-close">&times;</div>
             <div class="search-container" style="width: 100%; display: flex; flex-direction: column; align-items: center;">
                <div style="width: 100%; max-width: 800px; position: relative;">
                    <input type="text" id="search-input" placeholder="${i18n.search_placeholder || 'Search Tags'}" autocomplete="off" enterkeyhint="search">
                    <div id="search-suggestions" class="tag-suggestions" style="display: none; top: 100% !important; bottom: auto !important; left: 0 !important; right: 0 !important; min-width: unset !important; max-width: none !important; z-index: 10001 !important;"></div>
                </div>
                <label class="strict-toggle" style="margin-top: 20px;">
                    <input type="checkbox" id="search-strict"> ${i18n.search_strict_mode || 'Strict Mode'}
                </label>
             </div>
         `;
      document.body.appendChild(overlay);

      const input = document.getElementById('search-input');
      const close = document.getElementById('search-close');
      const strict = document.getElementById('search-strict');
      const suggestions = document.getElementById('search-suggestions');
      const btns = document.querySelectorAll('#nav-search-btn');

      let debounceTimer = null;
      let highlightIdx = -1;

      const doSearch = () => {
        let val = input.value.trim();
        // Remove trailing commas and extra whitespace
        val = val.replace(/,+$/, '').trim();
        if (val) {
          if (window.f0ckInterestEngine?.recordTagSearch) {
            window.f0ckInterestEngine.recordTagSearch(val);
          }
          toggleSearch(false);
          let targetUrl = `/tag/${encodeURIComponent(val).replace(/%2C/g, ',').replace(/%20/g, ' ')}`;
          // Use AJAX for faster transition and clean URL
          if (typeof loadPageAjax === 'function') {
            loadPageAjax(targetUrl, true);
          } else {
            window.location.href = targetUrl;
          }
        }
      };

      const renderSuggestions = (tagItems, titleItems) => {
        suggestions.innerHTML = '';
        highlightIdx = -1;
        const totalItems = (tagItems || []).length + (titleItems || []).length;
        if (!totalItems) {
          suggestions.style.display = 'none';
          return;
        }

        const addSectionHeader = (label) => {
          const hdr = document.createElement('div');
          hdr.className = 'tag-suggestion-header';
          hdr.textContent = label;
          suggestions.appendChild(hdr);
        };

        // --- Tag results ---
        if (tagItems && tagItems.length) {
          if (titleItems && titleItems.length) addSectionHeader('Tags');
          tagItems.forEach(s => {
            const div = document.createElement('div');
            div.className = 'tag-suggestion-item';
            div.dataset.type = 'tag';
            div.dataset.value = s.tag;

            const name = document.createElement('span');
            name.className = 'tag-suggestion-name';
            name.textContent = s.tag;

            const meta = document.createElement('span');
            meta.className = 'tag-suggestion-meta';
            meta.textContent = `${s.tagged}× · ${s.score.toFixed(2)}`;

            div.appendChild(name);
            div.appendChild(meta);

            div.addEventListener('mousedown', (e) => {
              e.preventDefault();
              if (window.f0ckInterestEngine?.recordTagSearch) {
                window.f0ckInterestEngine.recordTagSearch(s.tag);
              }
              const isStrict = strict && strict.checked;
              if (isStrict) {
                const parts = input.value.split(',');
                parts[parts.length - 1] = s.tag;
                input.value = parts.join(',') + ',';
              } else {
                input.value = s.tag;
              }
              suggestions.style.display = 'none';
              highlightIdx = -1;
              input.focus();
            });
            suggestions.appendChild(div);
          });
        }

        // --- Title results ---
        if (titleItems && titleItems.length) {
          if (tagItems && tagItems.length) addSectionHeader('Titles');
          titleItems.forEach(s => {
            const div = document.createElement('div');
            div.className = 'tag-suggestion-item tag-suggestion-item--title';
            div.dataset.type = 'title';
            div.dataset.id = s.id;
            div.dataset.title = s.title;

            const icon = document.createElement('span');
            icon.className = 'tag-suggestion-icon';
            icon.innerHTML = '<i class="fa-regular fa-file" aria-hidden="true"></i>';

            const name = document.createElement('span');
            name.className = 'tag-suggestion-name';
            name.textContent = s.title.length > 60 ? s.title.substring(0, 60) + '…' : s.title;

            const meta = document.createElement('span');
            meta.className = 'tag-suggestion-meta';
            meta.textContent = `#${s.id}`;

            div.appendChild(icon);
            div.appendChild(name);
            div.appendChild(meta);

            div.addEventListener('mousedown', (e) => {
              e.preventDefault();
              suggestions.style.display = 'none';
              highlightIdx = -1;
              toggleSearch(false);
              const target = `/tag/title:${encodeURIComponent(s.title)}/`;
              if (typeof loadPageAjax === 'function') {
                loadPageAjax(target, true);
              } else {
                window.location.href = target;
              }
            });
            suggestions.appendChild(div);
          });
        }

        suggestions.style.display = 'block';
      };

      input.addEventListener('input', () => {
        const isStrict = strict && strict.checked;
        const q = isStrict ? input.value.split(',').pop().trim() : input.value.trim();
        highlightIdx = -1;
        if (q.length < 1) {
          suggestions.style.display = 'none';
          return;
        }
        if (debounceTimer) clearTimeout(debounceTimer);
        debounceTimer = setTimeout(async () => {
          try {
            const [tagRes, titleRes] = await Promise.all([
              fetch(`/api/v2/tags/suggest?q=${encodeURIComponent(q)}`).then(r => r.json()).catch(() => ({ success: false })),
              fetch(`/api/v2/items/suggest?q=${encodeURIComponent(q)}`).then(r => r.json()).catch(() => ({ success: false }))
            ]);
            const tagSuggestions = (tagRes.success && tagRes.suggestions) ? tagRes.suggestions.slice(0, 6) : [];
            const titleSuggestions = (titleRes.success && titleRes.suggestions) ? titleRes.suggestions.slice(0, 4) : [];
            if (tagSuggestions.length || titleSuggestions.length) {
              renderSuggestions(tagSuggestions, titleSuggestions);
            } else {
              suggestions.style.display = 'none';
            }
          } catch (e) {
            suggestions.style.display = 'none';
          }
        }, 300);
      });

      input.addEventListener('keydown', e => {
        const items = suggestions.querySelectorAll('.tag-suggestion-item');
        if (!items.length || suggestions.style.display === 'none') return;

        if (e.key === 'ArrowDown') {
          e.preventDefault();
          if (highlightIdx >= 0 && highlightIdx < items.length) items[highlightIdx].classList.remove('active');
          highlightIdx = highlightIdx < items.length - 1 ? highlightIdx + 1 : 0;
          items[highlightIdx].classList.add('active');
          items[highlightIdx].scrollIntoView({ block: 'nearest' });
        } else if (e.key === 'ArrowUp') {
          e.preventDefault();
          if (highlightIdx >= 0 && highlightIdx < items.length) items[highlightIdx].classList.remove('active');
          highlightIdx = highlightIdx > 0 ? highlightIdx - 1 : items.length - 1;
          items[highlightIdx].classList.add('active');
          items[highlightIdx].scrollIntoView({ block: 'nearest' });
        } else if (e.key === 'Escape') {
          suggestions.style.display = 'none';
          highlightIdx = -1;
          e.stopPropagation();
        }
      });

      input.addEventListener('blur', () => {
        setTimeout(() => { suggestions.style.display = 'none'; }, 150);
      });

      // Load strict preference
      const savedStrict = localStorage.getItem('search_strict') === 'true';
      if (strict) strict.checked = savedStrict;

      const toggleSearch = (show) => {
        if (show) {
          overlay.style.display = 'flex';
          // Force reflow
          overlay.offsetHeight;
          overlay.classList.add('visible');
          if (window.innerWidth > 768) input.focus();
        } else {
          overlay.classList.remove('visible');
          suggestions.style.display = 'none';
          setTimeout(() => {
            overlay.style.display = 'none';
          }, 200);
        }
      };

      btns.forEach(btn => btn.addEventListener('click', (e) => {
        e.preventDefault();
        toggleSearch(true);
      }));

      close.addEventListener('click', () => toggleSearch(false));

      if (strict) {
        // Init state from server if available, else localStorage
        if (window.f0ckSession && window.f0ckSession.logged_in && typeof window.f0ckSession.strict_mode !== 'undefined') {
          strict.checked = window.f0ckSession.strict_mode;
          localStorage.setItem('search_strict', strict.checked); // Sync local
        } else {
          strict.checked = localStorage.getItem('search_strict') === 'true';
        }

        // Helper to visualy toggle strict parameter on tag links
        window.updateStrictLinks = (isStrict) => {
          document.querySelectorAll('a[href*="/tag/"]').forEach(a => {
            let href = a.getAttribute('href');
            if (href && (href.startsWith('/tag/') || href.includes(window.location.origin + '/tag/'))) {
              if (isStrict) {
                if (!href.includes('strict=1')) {
                  href += (href.includes('?') ? '&' : '?') + 'strict=1';
                }
              } else {
                if (href.includes('strict=1')) {
                  href = href.replace(/[?&]strict=1/, '').replace(/[?&]$/, '');
                }
              }
              a.setAttribute('href', href);
            }
          });
        };

        // Init placeholder and links
        if (strict.checked) {
          input.placeholder = "tag1, tag2...";
          window.updateStrictLinks(true);
        }

        strict.addEventListener('change', () => {
          localStorage.setItem('search_strict', strict.checked);
          if (window.f0ckSession) window.f0ckSession.strict_mode = strict.checked;

          window.updateStrictLinks(strict.checked);
          document.dispatchEvent(new CustomEvent('f0ck:strictChanged', { detail: { strict: strict.checked } }));

          // Sync with server
          fetch('/strict/' + (strict.checked ? 1 : 0));

          if (strict.checked) {
            input.placeholder = "tag1, tag2...";
          } else {
            input.placeholder = "Search Tags...";
          }
        });
      }

      // Close on click outside (background)
      overlay.addEventListener('click', (e) => {
        if (e.target === overlay) toggleSearch(false);
      });

      // ESC to close
      document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape' && overlay.classList.contains('visible')) {
          toggleSearch(false);
        }
        // "k" to open
        if (e.key === 'k' && e.target.tagName !== 'INPUT' && e.target.tagName !== 'TEXTAREA' && !overlay.classList.contains('visible')) {
          e.preventDefault();
          toggleSearch(true);
        }
        // Shift + S to toggle strict mode globally
        if (e.shiftKey && (e.key === 'S' || e.key === 's') && e.target.tagName !== 'INPUT' && e.target.tagName !== 'TEXTAREA') {
          e.preventDefault();
          if (strict) strict.click();
        }
      });

      input.addEventListener('keydown', (e) => {
        if (e.key === 'Enter') {
          // If a suggestion is highlighted, use it
          if (highlightIdx >= 0) {
            const items = suggestions.querySelectorAll('.tag-suggestion-item');
            if (items[highlightIdx]) {
              const el = items[highlightIdx];
              // Title results: go to the search page showing all items with this title
              if (el.dataset.type === 'title') {
                suggestions.style.display = 'none';
                highlightIdx = -1;
                toggleSearch(false);
                const target = `/tag/title:${encodeURIComponent(el.dataset.title)}/`;
                if (typeof loadPageAjax === 'function') {
                  loadPageAjax(target, true);
                } else {
                  window.location.href = target;
                }
                return;
              }
              // Tag results: fill input
              const selectedTag = el.querySelector('.tag-suggestion-name').textContent;
              const isStrict = strict && strict.checked;
              if (isStrict) {
                const parts = input.value.split(',');
                parts[parts.length - 1] = selectedTag;
                input.value = parts.join(',') + ',';
              } else {
                input.value = selectedTag;
              }
              highlightIdx = -1;
              suggestions.style.display = 'none';
              return;
            }
          }
          // Snapshot before hiding — if there are only title matches and no tag matches,
          // go to the title search page instead of a futile tag search.
          const tagItems   = suggestions.querySelectorAll('.tag-suggestion-item[data-type="tag"]');
          const titleItems = suggestions.querySelectorAll('.tag-suggestion-item[data-type="title"]');
          suggestions.style.display = 'none';
          if (tagItems.length === 0 && titleItems.length > 0) {
            toggleSearch(false);
            const q = input.value.trim();
            const target = `/tag/title:${encodeURIComponent(q)}/`;
            if (typeof loadPageAjax === 'function') {
              loadPageAjax(target, true);
            } else {
              window.location.href = target;
            }
            return;
          }
          doSearch();
        }
      });
    }
  };
  const initExcludedTagsModal = () => {
    const overlay = document.getElementById('excluded-tags-overlay');
    if (!overlay) return;

    const input = document.getElementById('nav_exclude_tag_input');
    const close = document.getElementById('excluded-tags-close');

    const list = document.getElementById('nav_excluded_tags_list');
    const suggestions = document.getElementById('nav_exclude_suggestions');
    const filterBtn = document.getElementById('nav-filter-btn');

    const canExcludeTags = () => {
      if (!window.f0ckSession) return false;
      if (window.f0ckSession.logged_in && !window.f0ckSession.is_anon) return true;
      if (window.f0ckSession.enable_anonymous_access === false) return false;
      const perms = window.f0ckSession.anon_permissions || {};
      return perms.exclude_tags !== false && perms.filter !== false;
    };

    const ensureSessionForExclude = async () => {
      if (window.f0ckSession?.logged_in) return true;
      if (canExcludeTags() && window.f0ckAnonSSH) {
        try {
          if (!window.f0ckAnonSSH.isSessionReady) {
            if (!window.f0ckAnonSSH.pubkey) {
              await window.f0ckAnonSSH.generateIdentity(true);
            }
            await window.f0ckAnonSSH.ensureSession(true);
          }
          if (window.f0ckSession) {
            window.f0ckSession.logged_in = true;
            window.f0ckSession.is_anon = true;
          }
          return true;
        } catch (e) {
          console.warn('[excluded_tags] Anon auto-session failed:', e);
        }
      }
      return false;
    };

    const toggleModal = (show) => {
      if (show && window.f0ckSession?.is_anon && window.f0ckSession?.anon_permissions?.filter === false) {
        return;
      }
      if (show) {
        overlay.style.display = 'flex';
        overlay.offsetHeight;
        overlay.classList.add('visible');
        document.body.style.overflow = 'hidden';
        if (canExcludeTags()) renderTags();
        if (window.syncRatingButtonUI) window.syncRatingButtonUI();
        if (input && canExcludeTags() && window.innerWidth > 768) input.focus();
      } else {
        overlay.classList.remove('visible');
        document.body.style.overflow = '';
        if (suggestions) suggestions.style.display = 'none';
        setTimeout(() => {
          overlay.style.display = 'none';
        }, 200);
      }
    };

    const countBadge = document.getElementById('nav_excluded_tags_count');

    const syncExcludedTagsUI = (tags = []) => {
      if (!Array.isArray(tags)) tags = [];
      window.f0ckSession = window.f0ckSession || {};
      window.f0ckSession.excluded_tags = tags.map(t => t.id);
      window.f0ckSession.excluded_tag_objects = tags;

      // 1. Update filter modal list
      if (list) {
        list.innerHTML = '';
        if (tags.length === 0) {
          list.innerHTML = `<em class="no-excluded-tags-hint">${(window.f0ckI18n && window.f0ckI18n.no_tags_excluded) || 'No tags excluded yet'}</em>`;
        } else {
          tags.forEach(tag => {
            const span = document.createElement('span');
            span.className = 'excluded-tag-chip';

            const nameSpan = document.createElement('span');
            nameSpan.textContent = tag.tag;

            const removeLink = document.createElement('a');
            removeLink.href = '#';
            removeLink.className = 'remove-excluded-tag';
            removeLink.dataset.tag = tag.normalized;
            removeLink.dataset.tagId = tag.id;
            removeLink.dataset.tagName = tag.tag;
            removeLink.title = 'Remove from excluded tags';
            removeLink.innerHTML = '&times;';

            span.appendChild(nameSpan);
            span.appendChild(removeLink);
            list.appendChild(span);
          });
        }
      }

      // 2. Update count badge in modal
      if (countBadge) {
        if (tags.length > 0) {
          countBadge.textContent = tags.length;
          countBadge.style.display = 'inline-block';
        } else {
          countBadge.style.display = 'none';
        }
      }

      // 3. Update all tag badges on the current page
      const tagBadges = document.querySelectorAll('.tag-badge');
      const excludedIds = new Set(tags.map(t => t.id));
      const excludedNorms = new Set(tags.map(t => t.normalized));

      tagBadges.forEach(badge => {
        const bId = parseInt(badge.getAttribute('data-tag-id'), 10);
        const bNorm = badge.getAttribute('data-tag-normalized') || '';
        const isExcluded = (bId && excludedIds.has(bId)) || (bNorm && excludedNorms.has(bNorm));

        const btn = badge.querySelector('.tag-exclude-btn');
        if (isExcluded) {
          badge.classList.add('tag-is-excluded');
          if (btn) {
            btn.title = (window.f0ckI18n && window.f0ckI18n.unexclude_tag) || 'Excluded (click to unexclude)';
            btn.innerHTML = '<i class="fa-solid fa-circle-check"></i>';
          }
        } else {
          badge.classList.remove('tag-is-excluded');
          if (btn) {
            btn.title = (window.f0ckI18n && window.f0ckI18n.exclude_tag) || 'Exclude tag';
            btn.innerHTML = '<i class="fa-solid fa-ban"></i>';
          }
        }
      });
    };
    window.syncExcludedTagsUI = syncExcludedTagsUI;

    const renderTags = async () => {
      if (!canExcludeTags()) return;
      try {
        const res = await fetch('/api/v2/settings/excluded_tags');
        if (!res.ok) return;
        const data = await res.json();
        if (data.success) {
          syncExcludedTagsUI(data.tags);
        }
      } catch (e) {
        console.error('Failed to load excluded tags', e);
      }
    };

    window.toggleExcludeTag = async ({ tagId, tag, normalized }) => {
      if (!canExcludeTags()) {
        if (!window.f0ckSession || !window.f0ckSession.logged_in) {
          window.flashMessage('Please log in to exclude tags', 3000, 'info');
        } else {
          window.flashMessage('Tag exclusion is disabled by site permissions', 3000, 'error');
        }
        return;
      }

      if (!window.f0ckSession?.logged_in) {
        const authed = await ensureSessionForExclude();
        if (!authed) {
          window.flashMessage('Please log in to exclude tags', 3000, 'info');
          return;
        }
      }

      const currentIds = window.f0ckSession.excluded_tags || [];
      const currentObjs = window.f0ckSession.excluded_tag_objects || [];
      const isCurrentlyExcluded = (tagId && currentIds.includes(tagId)) ||
        currentObjs.some(t => t.id === tagId || t.normalized === normalized) ||
        document.querySelector(`.tag-badge[data-tag-normalized="${normalized}"]`)?.classList.contains('tag-is-excluded');

      const csrf = (typeof window.getCsrfToken === 'function')
        ? window.getCsrfToken()
        : ((window.f0ckSession && window.f0ckSession.csrf_token) || document.querySelector('input[name="csrf_token"]')?.value || '');

      if (isCurrentlyExcluded) {
        try {
          const res = await fetch(`/api/v2/settings/excluded_tags/${encodeURIComponent(normalized || tagId || tag)}`, {
            method: 'DELETE',
            headers: { 'X-CSRF-Token': csrf }
          });
          const data = await res.json();
          if (data.success) {
            syncExcludedTagsUI(data.tags);
            if (typeof gridCacheMap !== 'undefined') gridCacheMap.clear();
            const msgTpl = window.f0ckI18n?.tag_unexcluded_msg || 'Tag "{tag}" removed from excluded tags';
            window.flashMessage(msgTpl.replace('{tag}', tag || normalized), 2500, 'info');
          } else {
            window.flashMessage(data.msg || 'Error removing excluded tag', 3000, 'error');
          }
        } catch (e) {
          console.error(e);
          window.flashMessage('Failed to update excluded tags', 3000, 'error');
        }
      } else {
        try {
          const res = await fetch('/api/v2/settings/excluded_tags', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
              'X-CSRF-Token': csrf
            },
            body: JSON.stringify({
              tagname: normalized || tag,
              tag_id: tagId,
              csrf_token: csrf
            })
          });
          const data = await res.json();
          if (data.success) {
            syncExcludedTagsUI(data.tags);
            if (typeof gridCacheMap !== 'undefined') gridCacheMap.clear();
            const msgTpl = window.f0ckI18n?.tag_excluded_msg || 'Tag "{tag}" added to excluded tags';
            window.flashMessage(msgTpl.replace('{tag}', tag || normalized), 2500, 'info');
          } else {
            window.flashMessage(data.msg || 'Error excluding tag', 3000, 'error');
          }
        } catch (e) {
          console.error(e);
          window.flashMessage('Failed to exclude tag', 3000, 'error');
        }
      }
    };

    // Delegated click listener for hover-to-exclude buttons on tags
    document.addEventListener('click', (e) => {
      const btn = e.target.closest('.tag-exclude-btn');
      if (!btn) return;
      e.preventDefault();
      e.stopPropagation();
      const badge = btn.closest('.tag-badge');
      if (!badge) return;
      const tagId = parseInt(badge.getAttribute('data-tag-id'), 10) || null;
      const tag = badge.getAttribute('data-tag') || badge.querySelector('.tag-name')?.textContent?.trim() || '';
      const normalized = badge.getAttribute('data-tag-normalized') || tag;
      if (typeof window.toggleExcludeTag === 'function') {
        window.toggleExcludeTag({ tagId, tag, normalized });
      }
    });

    document.addEventListener('f0ck:contentLoaded', () => {
      if (typeof window.syncExcludedTagsUI === 'function' && window.f0ckSession?.excluded_tag_objects) {
        window.syncExcludedTagsUI(window.f0ckSession.excluded_tag_objects);
      }
    });

    // Initial background sync for allowed sessions
    if (canExcludeTags()) {
      renderTags();
    }

    if (filterBtn) {
      filterBtn.addEventListener('click', (e) => {
        e.preventDefault();
        toggleModal(true);
      });
    }

    // Delegated handler: [data-action="open-filter-modal"] links (e.g. error page hint)
    document.addEventListener('click', (e) => {
      const trigger = e.target.closest('[data-action="open-filter-modal"]');
      if (!trigger) return;
      e.preventDefault();
      toggleModal(true);
    });

    // Delegated handler: [data-action="see-anyways"] button (allow one item without changing filter)
    document.addEventListener('click', (e) => {
      const trigger = e.target.closest('[data-action="see-anyways"]');
      if (!trigger) return;
      e.preventDefault();

      const itemId = trigger.dataset.itemSlug || trigger.dataset.itemId;
      const targetUrl = (typeof isItemPath === 'function' && isItemPath(window.location.href))
        ? (window.location.pathname + window.location.search + window.location.hash)
        : (itemId ? `/${itemId}` : (window.location.pathname + window.location.search + window.location.hash));

      if (typeof loadItemAjax === 'function') {
        loadItemAjax(targetUrl, true, { forceParams: { bypass: '1' }, skipCache: true });
      } else {
        const u = new URL(window.location.href);
        u.searchParams.set('bypass', '1');
        window.location.href = u.toString();
      }
    });

    close.addEventListener('click', () => toggleModal(false));
    overlay.addEventListener('click', (e) => {
      if (e.target === overlay) toggleModal(false);
    });

    if (input && list) {
      const addTag = async () => {
        const tagname = input.value.trim();
        if (!tagname) return;
        if (suggestions) suggestions.style.display = 'none';

        if (!canExcludeTags()) {
          window.flashMessage('Tag exclusion is disabled by site permissions', 3000, 'error');
          return;
        }

        if (!window.f0ckSession?.logged_in) {
          const authed = await ensureSessionForExclude();
          if (!authed) {
            window.flashMessage('Please log in to exclude tags', 3000, 'info');
            return;
          }
        }

        try {
          const csrf = (typeof window.getCsrfToken === 'function')
            ? window.getCsrfToken()
            : ((window.f0ckSession && window.f0ckSession.csrf_token) || document.querySelector('input[name="csrf_token"]')?.value || '');
          const res = await fetch('/api/v2/settings/excluded_tags', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
              'X-CSRF-Token': csrf
            },
            body: JSON.stringify({ tagname, csrf_token: csrf })
          });
          const data = await res.json();
          if (data.success) {
            syncExcludedTagsUI(data.tags);
            input.value = '';
            if (typeof gridCacheMap !== 'undefined') gridCacheMap.clear();
            const msgTpl = window.f0ckI18n?.tag_excluded_msg || 'Tag {tag} added to excluded tags';
            window.flashMessage(msgTpl.replace('{tag}', tagname), 2500, 'info');
          } else {
            window.flashMessage(data.msg || 'Error adding tag', 3000, 'error');
          }
        } catch (e) {
          console.error(e);
        } finally {
          if (window.innerWidth > 768) input.focus();
        }
      };

      input.addEventListener('keydown', e => {
        if (e.key === 'Enter') {
          e.preventDefault();
          if (highlightIdx >= 0) {
            const items = suggestions.querySelectorAll('.tag-suggestion-item');
            if (items[highlightIdx]) input.value = items[highlightIdx].querySelector('.tag-suggestion-name').textContent;
          }
          suggestions.style.display = 'none';
          addTag();
        }
      });

      list.addEventListener('click', async e => {
        if (e.target.classList.contains('remove-excluded-tag')) {
          e.preventDefault();
          const tag = e.target.getAttribute('data-tag');
          const tagName = e.target.getAttribute('data-tag-name') || tag;

          if (!canExcludeTags()) {
            window.flashMessage('Tag exclusion is disabled by site permissions', 3000, 'error');
            return;
          }

          if (!window.f0ckSession?.logged_in) {
            const authed = await ensureSessionForExclude();
            if (!authed) {
              window.flashMessage('Please log in to exclude tags', 3000, 'info');
              return;
            }
          }

          try {
            const csrf = (typeof window.getCsrfToken === 'function')
              ? window.getCsrfToken()
              : ((window.f0ckSession && window.f0ckSession.csrf_token) || document.querySelector('input[name="csrf_token"]')?.value || '');
            const res = await fetch(`/api/v2/settings/excluded_tags/${encodeURIComponent(tag)}`, {
              method: 'DELETE',
              headers: {
                'X-CSRF-Token': csrf
              }
            });
            const data = await res.json();
            if (data.success) {
              syncExcludedTagsUI(data.tags);
              if (typeof gridCacheMap !== 'undefined') gridCacheMap.clear();
              const msgTpl = window.f0ckI18n?.tag_unexcluded_msg || 'Tag {tag} removed from excluded tags';
              window.flashMessage(msgTpl.replace('{tag}', tagName), 2500, 'info');
            } else {
              window.flashMessage(data.msg || 'Error removing tag', 3000, 'error');
            }
          } catch (e) { console.error(e); }
        }
      });

      // Autocomplete with dropdown suggestions
      let debounceTimer = null;
      let highlightIdx = -1;

      const renderSuggestions = (items) => {
        suggestions.innerHTML = '';
        highlightIdx = -1;
        if (!items.length) { suggestions.style.display = 'none'; return; }
        items.forEach(s => {
          const div = document.createElement('div');
          div.className = 'tag-suggestion-item';
          const name = document.createElement('span'); name.className = 'tag-suggestion-name'; name.textContent = s.tag;
          const meta = document.createElement('span'); meta.className = 'tag-suggestion-meta'; meta.textContent = `${s.tagged}× · ${s.score.toFixed(2)}`;
          div.appendChild(name); div.appendChild(meta);
          div.addEventListener('mousedown', (e) => { e.preventDefault(); input.value = s.tag; suggestions.style.display = 'none'; addTag(); });
          suggestions.appendChild(div);
        });
        suggestions.style.display = 'block';
      };

      input.addEventListener('input', () => {
        const q = input.value.trim();
        highlightIdx = -1;
        if (q.length < 1) { suggestions.style.display = 'none'; return; }
        if (debounceTimer) clearTimeout(debounceTimer);
        debounceTimer = setTimeout(async () => {
          try {
            const res = await fetch(`/api/v2/tags/suggest?q=${encodeURIComponent(q)}`);
            const json = await res.json();
            if (json.success && json.suggestions) renderSuggestions(json.suggestions.slice(0, 8));
            else suggestions.style.display = 'none';
          } catch (e) { suggestions.style.display = 'none'; }
        }, 300);
      });

      input.addEventListener('keydown', e => {
        const items = suggestions.querySelectorAll('.tag-suggestion-item');
        if (!items.length || suggestions.style.display === 'none') return;
        if (e.key === 'ArrowDown') {
          e.preventDefault();
          if (highlightIdx >= 0 && highlightIdx < items.length) items[highlightIdx].classList.remove('active');
          highlightIdx = highlightIdx < items.length - 1 ? highlightIdx + 1 : 0;
          items[highlightIdx].classList.add('active'); items[highlightIdx].scrollIntoView({ block: 'nearest' });
        } else if (e.key === 'ArrowUp') {
          e.preventDefault();
          if (highlightIdx >= 0 && highlightIdx < items.length) items[highlightIdx].classList.remove('active');
          highlightIdx = highlightIdx > 0 ? highlightIdx - 1 : items.length - 1;
          items[highlightIdx].classList.add('active'); items[highlightIdx].scrollIntoView({ block: 'nearest' });
        } else if (e.key === 'Escape') {
          suggestions.style.display = 'none'; highlightIdx = -1;
        }
      });

      input.addEventListener('blur', () => { setTimeout(() => { suggestions.style.display = 'none'; }, 150); });
    } // end isLoggedIn tag block

    // ESC to close, "e" to open
    document.addEventListener('keydown', (e) => {
      if (e.key === 'Escape' && overlay.classList.contains('visible')) {
        toggleModal(false);
      }
      // 'e' opens the filter modal on non-/abyss pages
      if (e.key === 'e' || e.key === 'E') {
        const tag = (e.target.tagName || '').toLowerCase();
        if (tag === 'input' || tag === 'textarea' || e.target.isContentEditable) return;
        if (window.location.pathname.startsWith('/abyss')) return;
        e.preventDefault();
        toggleModal(!overlay.classList.contains('visible'));
      }
    });

    // ── xD Score filter ────────────────────────────────────────────────────
    const navXdInput         = document.getElementById('nav_min_xd_score');
    const navXdSaveBtn        = document.getElementById('nav_xd_save_btn');
    const navXdTier           = document.getElementById('nav_xd_tier_label');
    const navXdStatus         = document.getElementById('nav_xd_status');
    const navXdVal            = document.getElementById('nav_xd_val');
    const navXdSliderContainer = document.getElementById('nav_xd_slider_container');
    let   navXdCustomFill     = null; // set during custom slider init below

    const XD_TIERS_NAV = [null,
      { cls: 'xd-tier-1', label: 'xD' },
      { cls: 'xd-tier-2', label: 'xDD' },
      { cls: 'xd-tier-3', label: 'xDDD' },
      { cls: 'xd-tier-4', label: 'xDDDD' },
      { cls: 'xd-tier-5', label: 'xDDDDD+' },
    ];
    const getNavXdTier = (s) => {
      s = +s;
      if (s < 1)           return 0;
      if (s < 200)         return 1;
      if (s < 1000)        return 2;
      if (s < 100000)      return 3;
      if (s < 200000000)   return 4;
      return 5;
    };
    const XD_TIER_COLORS = ['#888', '#5a9e5a', '#8ac449', '#d4a017', '#e07b2a', '#ff5500'];
    const updateNavXdUI = (score) => {
      score = +score;
      if (navXdVal) navXdVal.textContent = score;
      const tier = getNavXdTier(score);
      const color = XD_TIER_COLORS[tier];
      // Update custom slider fill colour
      if (navXdCustomFill) navXdCustomFill.style.background = color;
      if (navXdVal) navXdVal.style.color = color;
      // Keep hidden native input in sync (save button reads it)
      if (navXdInput) navXdInput.value = score;
      if (!navXdTier) return;
      if (!tier || score <= 0) { navXdTier.style.display = 'none'; return; }
      const t = XD_TIERS_NAV[tier];
      navXdTier.className = `xd-score-badge ${t.cls}`;
      navXdTier.textContent = `≥ ${score} · ${t.label}`;
      navXdTier.style.display = 'inline-flex';
    };

    if (navXdInput) {
      updateNavXdUI(+navXdInput.value);
    }

    // Custom mobile-friendly slider for xD score
    if (navXdInput && navXdSliderContainer) {
      const xdMin = 0, xdMax = +navXdInput.max || 100;
      const xdContainer = navXdSliderContainer;
      xdContainer.style.cssText = 'position:relative;height:28px;flex:1;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:none;';

      const xdTrack = document.createElement('div');
      xdTrack.style.cssText = 'position:absolute;left:8px;right:8px;height:4px;background:#333;border-radius:2px;top:50%;transform:translateY(-50%);';

      const xdFill = document.createElement('div');
      xdFill.style.cssText = 'position:absolute;left:0;height:100%;background:#888;border-radius:2px;pointer-events:none;';
      navXdCustomFill = xdFill;

      const xdThumb = document.createElement('div');
      xdThumb.style.cssText = 'position:absolute;width:18px;height:18px;background:#888;border-radius:50%;top:50%;transform:translate(-50%,-50%);box-shadow:0 0 6px rgba(0,0,0,.6);pointer-events:none;transition:transform .1s;';

      const xdSetRatio = (r) => {
        xdFill.style.width  = (r * 100) + '%';
        xdThumb.style.left  = `calc(8px + ${r} * (100% - 16px))`;
      };
      xdSetRatio((+navXdInput.value - xdMin) / (xdMax - xdMin));

      xdTrack.appendChild(xdFill);
      xdContainer.appendChild(xdTrack);
      xdContainer.appendChild(xdThumb);

      const xdValueFromClientX = (clientX) => {
        const rect = xdTrack.getBoundingClientRect();
        const r    = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
        xdSetRatio(r);
        return Math.round(xdMin + r * (xdMax - xdMin));
      };

      xdContainer.addEventListener('pointerdown', (e) => {
        e.preventDefault();
        xdContainer.setPointerCapture(e.pointerId);
        xdThumb.style.transform = 'translate(-50%,-50%) scale(1.25)';
        updateNavXdUI(xdValueFromClientX(e.clientX));
        // also tint thumb with current tier colour
        xdThumb.style.background = XD_TIER_COLORS[getNavXdTier(+navXdInput.value)];
      }, { passive: false });

      xdContainer.addEventListener('pointermove', (e) => {
        if (!xdContainer.hasPointerCapture(e.pointerId)) return;
        const val = xdValueFromClientX(e.clientX);
        xdThumb.style.background = XD_TIER_COLORS[getNavXdTier(val)];
        updateNavXdUI(val);
      });

      const xdOnEnd = (e) => {
        if (!xdContainer.hasPointerCapture(e.pointerId)) return;
        xdContainer.releasePointerCapture(e.pointerId);
        xdThumb.style.transform = 'translate(-50%,-50%) scale(1)';
      };
      xdContainer.addEventListener('pointerup',     xdOnEnd);
      xdContainer.addEventListener('pointercancel', xdOnEnd);

      // Sync thumb colour on init
      updateNavXdUI(+navXdInput.value);
      xdThumb.style.background = XD_TIER_COLORS[getNavXdTier(+navXdInput.value)];
    }

    if (navXdSaveBtn && navXdInput) {
      navXdSaveBtn.addEventListener('click', async () => {
        const min_xd_score = parseInt(navXdInput.value, 10) || 0;
        navXdSaveBtn.disabled = true;
        navXdSaveBtn.textContent = '...';
        try {
          const res = await fetch('/api/v2/settings/min_xd_score', {
            method: 'PUT',
            headers: {
              'Content-Type': 'application/json',
              'X-CSRF-Token': window.f0ckSession?.csrf_token
            },
            body: JSON.stringify({ min_xd_score })
          });
          const data = await res.json();
          if (data.success) {
            if (window.f0ckSession) window.f0ckSession.min_xd_score = min_xd_score;
            if (navXdStatus) {
              navXdStatus.textContent = min_xd_score > 0 ? `✓ Filter active — xD ≥ ${min_xd_score}` : '✓ Disabled';
              setTimeout(() => { navXdStatus.textContent = ''; }, 3000);
            }
            // Reload grid to apply filter
            toggleModal(false);
            if (typeof loadPageAjax === 'function') loadPageAjax(window.location.pathname);
            else window.location.reload();
          } else {
            window.flashMessage(data.msg || 'Error saving', 3000, 'error');
          }
        } catch (err) {
          window.flashMessage('Failed to save xD filter', 3000, 'error');
        } finally {
          navXdSaveBtn.disabled = false;
          navXdSaveBtn.textContent = 'Save';
        }
      });
    }

    // ── Grid Mode / thumbnail size picker ────────────────────────────────
    const THUMB_SIZE_KEY = 'scroller_thumb_size';
    const THUMB_SIZES    = ['s', 'm', 'l', 'xl'];
    const gridSizeBtns   = overlay.querySelectorAll('.nav-grid-size-btn');

    const applyNavThumbSize = (size, persist = true) => {
      if (!THUMB_SIZES.includes(size)) size = window.f0ckDefaultThumbSize || 'm';
      document.documentElement.dataset.thumbSize = size;
      if (persist) localStorage.setItem(THUMB_SIZE_KEY, size);
      gridSizeBtns.forEach(b => b.classList.toggle('active', b.dataset.thumbSize === size));
    };

    // Sync active state each time the modal opens
    if (filterBtn) {
      filterBtn.addEventListener('click', () => {
        const cur = localStorage.getItem(THUMB_SIZE_KEY) || window.f0ckDefaultThumbSize || 'm';
        gridSizeBtns.forEach(b => b.classList.toggle('active', b.dataset.thumbSize === cur));
      });
    }

    gridSizeBtns.forEach(btn => {
      btn.addEventListener('click', () => applyNavThumbSize(btn.dataset.thumbSize, true));
    });

    // Apply on init — do NOT persist so config default stays effective until user chooses
    applyNavThumbSize(localStorage.getItem(THUMB_SIZE_KEY) || window.f0ckDefaultThumbSize || 'm', false);
  };

  // ── Thumb size init (runs on every page, independently of the filter modal) ──
  const initThumbSize = () => {
    const THUMB_SIZE_KEY = 'scroller_thumb_size';
    const THUMB_SIZES    = ['s', 'm', 'l', 'xl'];
    const size = localStorage.getItem(THUMB_SIZE_KEY) || window.f0ckDefaultThumbSize || 'm';
    document.documentElement.dataset.thumbSize = THUMB_SIZES.includes(size) ? size : (window.f0ckDefaultThumbSize || 'm');
  };

  document.addEventListener('DOMContentLoaded', () => {
    initThumbSize();   // always runs — applies data-thumb-size to <html>
    initSearch();
    initExcludedTagsModal();
    if (window.updateFilterBadge) window.updateFilterBadge();
    if (window.location.pathname.startsWith('/favs') && (!window.f0ckSession || !window.f0ckSession.user)) {
      const postsEl = document.querySelector('.posts');
      if (postsEl && !postsEl.children.length) {
        loadPageAjax(window.location.pathname + window.location.search, true);
      }
    }
  });
  // </search-overlay>

  // <random-mode>
  const updateRandomModeUI = () => {
    const isRandom = document.cookie.includes('random_mode=1');
    document.querySelectorAll('.shuffle-btn').forEach(btn => {
      if (isRandom) {
        btn.classList.add('active');
      } else {
        btn.classList.remove('active');
      }
    });
    if (window.updateFilterBadge) window.updateFilterBadge();
  };

  const handleShuffleBtnClick = (btn) => {
    // Trigger spin animation
    btn.classList.add('is-shuffling');
    setTimeout(() => btn.classList.remove('is-shuffling'), 450);

    const isCurrentlyRandom = document.cookie.includes('random_mode=1');
    
    // Toggle cookie (expires in 30 days)
    if (isCurrentlyRandom) {
        document.cookie = "random_mode=0; path=/; max-age=" + (60 * 60 * 24 * 30);
    } else {
        document.cookie = "random_mode=1; path=/; max-age=" + (60 * 60 * 24 * 30);
    }

    updateRandomModeUI();
    window.flashMessage(isCurrentlyRandom ? ((window.f0ckI18n && window.f0ckI18n.zomg_off) || 'ZOMG Mode deactivated') : ((window.f0ckI18n && window.f0ckI18n.zomg_on) || 'ZOMG Mode activated'));

    // Clear grid cache when switching random mode to prevent showing non-randomized versions
    if (typeof gridCacheMap !== 'undefined') {
        gridCacheMap.clear();
    }

    // Reload content to apply new order
    // If on item view, we just stay here but next/prev links will be random in next fetches
    // If on grid view, we reload the grid
    const postsEl = document.querySelector('.posts');
    if (postsEl) {
        // Grid view: reload current page with random flag
        loadPageAjax(window.location.pathname);
    } else {
        // Item view: reload current item with forced random flag to ensure next/prev update correctly
        const url = new URL(window.location.href);
        if (!isCurrentlyRandom) url.searchParams.set('random', '1');
        else url.searchParams.delete('random');
        loadItemAjax(url.toString(), true, { keepMedia: true });
    }
  };

  document.addEventListener('click', (e) => {
    const btn = e.target.closest('.shuffle-btn');
    if (btn) {
      e.preventDefault();
      const fromFilterModal = !!btn.closest('#excluded-tags-overlay');
      if (fromFilterModal) window._keepFilterModal = true;
      const result = handleShuffleBtnClick(btn);
      if (fromFilterModal) Promise.resolve(result).finally(() => { window._keepFilterModal = false; });
    }
  });

  document.addEventListener('f0ck:contentLoaded', () => {
    updateRandomModeUI();
  });

  // Initialize UI on startup
  updateRandomModeUI();
  // </random-mode>

  // <xd-score-live-update>
  // updateXdBadgeFromScore: called by the SSE handler with the server-authoritative xd_score.
  // Updates:
  //   1. The item-page badge (if the user is currently viewing that item)
  //   2. Any grid thumbnail indicators for that item (on any page)
  const XD_TIER_META = [
    null,
    { cls: 'xd-tier-1', label: 'xD',      min: 1         },
    { cls: 'xd-tier-2', label: 'xDD',     min: 200       },
    { cls: 'xd-tier-3', label: 'xDDD',    min: 1000      },
    { cls: 'xd-tier-4', label: 'xDDDD',   min: 100000    },
    { cls: 'xd-tier-5', label: 'xDDDDD+', min: 200000000 },
  ];

  const getXdTierFromScore = (score) => {
    if (score < 1)           return 0;
    if (score < 200)         return 1;
    if (score < 1000)        return 2;
    if (score < 100000)      return 3;
    if (score < 200000000)   return 4;
    return 5;
  };

  // Update the thumbnail grid indicator for a specific item
  const updateThumbXdIndicator = (itemId, score) => {
    const thumbs = document.querySelectorAll(`a.thumb[href$="/${itemId}"], a.lazy-thumb[href$="/${itemId}"]`);
    thumbs.forEach(thumb => {
      const indicators = thumb.querySelector('.thumb-indicators');
      if (!indicators) return;

      // Remove existing indicator
      indicators.querySelectorAll('.thumb-xd-indicator').forEach(el => el.remove());

      if (score <= 0) return;

      const tier = getXdTierFromScore(score);
      const span = document.createElement('span');
      span.className = `thumb-xd-indicator xd-tier-${tier}`;
      span.title = `xD Score: ${score}`;
      span.textContent = 'xD';
      indicators.appendChild(span);
    });
  };

  // Update the item-view badge (only when viewing that item)
  const updateItemPageXdBadge = (itemId, score) => {
    const container = document.getElementById('comments-container');
    if (!container) return;
    const pageItemId = container.dataset.itemId;
    if (pageItemId && String(pageItemId) !== String(itemId)) return;

    document.querySelectorAll('.xd-score-wrapper').forEach(w => w.remove());

    if (score <= 0) return;

    const tier = getXdTierFromScore(score);
    const meta = XD_TIER_META[tier];
    const newWrapper = document.createElement('div');
    newWrapper.className = 'xd-score-wrapper';
    newWrapper.innerHTML = `<span class="xd-score-badge ${meta.cls}" tooltip="xD Score: ${score} pts" flow="up">${meta.label} <span class="xd-score-num">${score}</span></span>`;

    // Insert inside container, before .comments-list — matching the position
    // that comments.js uses after each render.
    const commentsList = container.querySelector('.comments-list');
    if (commentsList) {
      container.insertBefore(newWrapper, commentsList);
    } else {
      container.parentNode.insertBefore(newWrapper, container);
    }
  };

  window.updateXdBadgeFromScore = (itemId, score) => {
    if (window.f0ckSession && window.f0ckSession.enable_xd_score === false) return;
    updateItemPageXdBadge(itemId, score);
    updateThumbXdIndicator(itemId, score);
  };
  // </xd-score-live-update>

  const swipeRT = {
    xDown: null,
    yDown: null,
    xDiff: null,
    yDiff: null,
    timeDown: null,
    startEl: null,
    isDraggingSidebar: false,
    isSidebarCandidate: false,  // Touch started in sidebar zone but not yet committed
    sidebarWidth: 280,
    sidebarEl: null,
    _steuerungPreventedTarget: null, // iOS Safari: target whose touchstart we preventDefault'd
  };
  const swipeOpt = {
    treshold: 20, // 20px
    timeout: 500  // 500ms
  };

  let edgeZoneTimeout = null;

  document.addEventListener('touchstart', e => {
    if (window.f0ckSession?.disable_swiping) return;
    if (document.body.classList.contains('modal-open')) return;
    
    const touch = e.touches[0];

    // Check if touch is over a video player, controls, or video element
    let isOverVideo = false;
    if (document.fullscreenElement) {
      isOverVideo = true;
    } else {
      const ez = document.getElementById('sidebar-drag-zone');
      if (ez) {
        const originalPointerEvents = ez.style.pointerEvents;
        ez.style.pointerEvents = 'none';
        const elUnder = document.elementFromPoint(touch.clientX, touch.clientY);
        ez.style.pointerEvents = originalPointerEvents;
        if (elUnder && (elUnder.closest('.v0ck') || elUnder.closest('video') || elUnder.closest('.v0ck_player_controls') || elUnder.tagName === 'VIDEO')) {
          isOverVideo = true;
        }
      }
    }

    if (isOverVideo) {
      if (edgeZoneTimeout) clearTimeout(edgeZoneTimeout);
      const ez = document.getElementById('sidebar-drag-zone');
      if (ez) ez.style.pointerEvents = 'none';
      return;
    }
    swipeRT.startEl = e.target;
    swipeRT.timeDown = Date.now();
    swipeRT.xDown = touch.clientX;
    swipeRT.yDown = touch.clientY;
    swipeRT.xDiff = 0;
    swipeRT.yDiff = 0;
    swipeRT.isDraggingSidebar = false;
    swipeRT.startedInSidebarZone = false;
    let inStrip = !!(e.target && e.target.closest('.album-thumbnails-strip'));
    const stripEl = document.querySelector('.album-thumbnails-strip');
    if (!inStrip && stripEl && stripEl.offsetParent !== null) {
      const str = stripEl.getBoundingClientRect();
      const touch0 = e.touches[0];
      if (
        touch0.clientX >= str.left && touch0.clientX <= str.right &&
        touch0.clientY >= str.top  && touch0.clientY <= str.bottom
      ) {
        inStrip = true;
      }
    }
    swipeRT.startedInStrip = inStrip;

    // Coordinate-based steuerung detection — more reliable than e.target.closest() on iOS Safari
    // where e.target can be misreported for touch events on complex DOM hierarchies
    const steuerungEl = document.querySelector('.steuerung');
    if (steuerungEl) {
      const sr = steuerungEl.getBoundingClientRect();
      const touch0 = e.touches[0];
      swipeRT.startedInSteuerung = (
        touch0.clientX >= sr.left && touch0.clientX <= sr.right &&
        touch0.clientY >= sr.top  && touch0.clientY <= sr.bottom
      );
    } else {
      swipeRT.startedInSteuerung = false;
    }

    // Mobile Sidebar Drag Logic
    if (window.innerWidth < 1000) {
      const sidebar = document.querySelector('.global-sidebar-right, .item-sidebar-right, .index-sidebar-right');
      if (sidebar) {
        swipeRT.sidebarEl = sidebar;
        swipeRT.sidebarWidth = sidebar.offsetWidth;
        const isHidden = document.body.classList.contains('sidebar-right-hidden');
        
        // Mark as candidate — direction will be confirmed on first touchmove
        if (isHidden) {
          // Only set sidebar candidate if NOT starting inside .steuerung or .album-thumbnails-strip
          if (touch.clientX > window.innerWidth - 100 && !swipeRT.startedInSteuerung && !swipeRT.startedInStrip) {
            swipeRT.isSidebarCandidate = true;
            swipeRT.startedInSidebarZone = true;
          }
        } else {
          // Sidebar is open: candidate if touch starts inside sidebar bounding box
          // Use coordinates, not e.target — iOS Safari can mis-report target in scrollable containers
          if (!swipeRT.startedInSteuerung && !swipeRT.startedInStrip) {
            const sr = sidebar.getBoundingClientRect();
            if (touch.clientX >= sr.left && touch.clientX <= sr.right &&
                touch.clientY >= sr.top  && touch.clientY <= sr.bottom) {
              swipeRT.isSidebarCandidate = true;
              swipeRT.startedInSidebarZone = true;
            }
          }
        }
      }
    }
  }, { passive: true });

  document.addEventListener('touchmove', e => {
    if (window.f0ckSession?.disable_swiping) return;
    if (document.body.classList.contains('modal-open')) return;
    if (swipeRT.startedInStrip) return;
    if (!swipeRT.xDown || !swipeRT.yDown) return;

    const touch = e.touches[0];
    swipeRT.xDiff = swipeRT.xDown - touch.clientX;
    swipeRT.yDiff = swipeRT.yDown - touch.clientY;

    // Determine sidebar drag direction on first significant movement
    if (swipeRT.isSidebarCandidate && !swipeRT.isDraggingSidebar && swipeRT.sidebarEl) {
      const absX = Math.abs(swipeRT.xDiff);
      const absY = Math.abs(swipeRT.yDiff);

      // iOS Safari: claim the gesture early — the moment horizontal >= vertical,
      // call preventDefault to prevent iOS from locking this as a vertical scroll.
      // With touch-action:pan-y on the sidebar, horizontal touchmoves are cancellable.
      if (absX >= absY && absX > 2 && e.cancelable) {
        e.preventDefault();
      }

      // Require at least 12px horizontal AND horizontal clearly dominates (2.5x more than vertical)
      if (absX >= 12 && absX > absY * 2.5) {
        swipeRT.isDraggingSidebar = true;
        swipeRT.isSidebarCandidate = false;
      } else if (absY > absX * 1.5) {
        // Clearly scrolling vertically — cancel sidebar drag entirely
        swipeRT.isSidebarCandidate = false;
      }
    }

    if (swipeRT.isDraggingSidebar && swipeRT.sidebarEl) {
      if (e.cancelable) e.preventDefault();
      
      const isHidden = document.body.classList.contains('sidebar-right-hidden');
      
      // xDiff > 0: dragging left (opening)
      // xDiff < 0: dragging right (closing)
      let dragX = swipeRT.xDiff;
      
      if (isHidden) {
        // Limit: can only drag left (up to sidebarWidth)
        dragX = Math.max(0, Math.min(swipeRT.sidebarWidth, dragX));
      } else {
        // Limit: can only drag right (down to -sidebarWidth)
        dragX = Math.max(-swipeRT.sidebarWidth, Math.min(0, dragX));
      }
      
      // Apply transform: translateX(-dragX) moves left if positive, right if negative
      const transform = `translateX(${-dragX}px)`;
      swipeRT.sidebarEl.style.transition = 'none';
      swipeRT.sidebarEl.style.transform = transform;
      return;
    }

    // Prevent scrolling if swiping horizontally
    if (Math.abs(swipeRT.xDiff) > Math.abs(swipeRT.yDiff)) {
      if (e.cancelable) e.preventDefault();
    }
  }, { passive: false });

  document.addEventListener('touchend', e => {
    if (window.f0ckSession?.disable_swiping) return;
    if (document.body.classList.contains('modal-open')) return;
    const timeDiff = Date.now() - swipeRT.timeDown;
    let elem;

    if (swipeRT.isDraggingSidebar && swipeRT.sidebarEl) {
      const sidebar = swipeRT.sidebarEl;
      const isHidden = document.body.classList.contains('sidebar-right-hidden');
      const dist = Math.abs(swipeRT.xDiff);
      const threshold = swipeRT.sidebarWidth / 4;
      const quickSwipe = dist > 30 && timeDiff < 250;

      let shouldOpen = !isHidden;
      if (isHidden) {
        if (swipeRT.xDiff > threshold || (swipeRT.xDiff > 30 && quickSwipe)) {
          shouldOpen = true;
        }
      } else {
        if (swipeRT.xDiff < -threshold || (swipeRT.xDiff < -30 && quickSwipe)) {
          shouldOpen = false;
        }
      }

      const stateChanging = shouldOpen !== !isHidden;

      // Target transform positions:
      // When OPEN (right:0): stay=translateX(0), close=translateX(+width)
      // When HIDDEN (right:-width): stay=translateX(0), open=translateX(-width)
      // These match the CSS resting positions once transform is cleared and class is toggled.
      let targetTranslate;
      if (isHidden) {
        targetTranslate = shouldOpen ? -swipeRT.sidebarWidth : 0;
      } else {
        targetTranslate = shouldOpen ? 0 : swipeRT.sidebarWidth;
      }

      // Use !important to override the CSS's own "transition: right 0.3s !important"
      // so that our transform animation actually plays.
      sidebar.style.setProperty('transition', 'transform 0.3s ease-in-out', 'important');
      sidebar.style.transform = `translateX(${targetTranslate}px)`;

      let settled = false;
      const settle = () => {
        if (settled) return;
        settled = true;

        // Freeze sidebar AND wrapper transitions so the class toggle
        // doesn't trigger a second padding-right animation.
        const wrappers = getSidebarWrappers();
        wrappers.forEach(w => w.style.setProperty('transition', 'none', 'important'));
        sidebar.style.setProperty('transition', 'none', 'important');

        if (stateChanging) {
          const toHidden = !shouldOpen;
          document.body.classList.toggle('sidebar-right-hidden', toHidden);
          localStorage.setItem('sidebarRightHidden', toHidden);
        }

        // Force reflow so class change commits with no transition
        void sidebar.offsetWidth;

        // Clear transform — sidebar is now exactly where CSS says it should be
        sidebar.style.transform = '';

        // Restore CSS-controlled transitions on the next frame
        requestAnimationFrame(() => {
          sidebar.style.removeProperty('transition');
          wrappers.forEach(w => {
            w.style.removeProperty('transition');
            w.style.removeProperty('padding-right');
            w.style.removeProperty('right');
          });
          swipeRT.isDraggingSidebar = false;
          if (typeof window.redrawBgCanvas === 'function') {
            window.redrawBgCanvas();
          }
        });
      };

      // Filter by propertyName so we only act on the transform transition,
      // not any other transitioning property (right, visibility, etc.)
      const onTransitionEnd = (e) => {
        if (e.propertyName !== 'transform') return;
        sidebar.removeEventListener('transitionend', onTransitionEnd);
        settle();
      };
      sidebar.addEventListener('transitionend', onTransitionEnd);
      // Fallback in case transitionend doesn't fire (e.g. already at target)
      setTimeout(settle, 350);

      swipeRT.xDown = null;
      swipeRT.yDown = null;
      swipeRT.timeDown = null;
      return;
    }

    if (Math.abs(swipeRT.xDiff) > Math.abs(swipeRT.yDiff)) {
      // Skip navigation if this touch started in the sidebar zone or album thumbnail strip
      if (!swipeRT.startedInSidebarZone && !swipeRT.startedInStrip) {
        // On item pages with .steuerung, only navigate if swipe started inside it
        const steuerung = document.querySelector('.steuerung');
        const allowNav = !steuerung || swipeRT.startedInSteuerung;
        if (allowNav && Math.abs(swipeRT.xDiff) > swipeOpt.treshold && timeDiff < swipeOpt.timeout) {
          if (swipeRT.xDiff > 0) {
            // swipe left -> next
            elem = document.querySelector("#next:not([href='#']), .nav-next:not([href='#'])");
          } else {
            // swipe right -> prev
            elem = document.querySelector("#prev:not([href='#']), .nav-prev:not([href='#'])");
          }
        }
      }
    }

    swipeRT.xDown = null;
    swipeRT.yDown = null;
    swipeRT.timeDown = null;

    // Restore edgeZone pointer events after a short delay to allow clicks to pass through
    const ez = document.getElementById('sidebar-drag-zone');
    if (ez && ez.style.pointerEvents === 'none') {
      if (edgeZoneTimeout) clearTimeout(edgeZoneTimeout);
      edgeZoneTimeout = setTimeout(() => {
        if (typeof syncEdgeZone === 'function') syncEdgeZone();
        else ez.style.pointerEvents = 'all';
      }, 250);
    }

    if (elem) {
      changePage(elem);
    }

    // iOS Safari: re-fire click for taps where we called e.preventDefault() on touchstart
    // (preventDefault blocks native click events as a side-effect)
    if (swipeRT._steuerungPreventedTarget && !elem) {
      const dist = Math.hypot(swipeRT.xDiff || 0, swipeRT.yDiff || 0);
      if (dist < 15 && timeDiff < 400) {
        swipeRT._steuerungPreventedTarget.click();
      }
      swipeRT._steuerungPreventedTarget = null;
    }
  }, { passive: true });

  document.addEventListener('touchcancel', () => {
    const ez = document.getElementById('sidebar-drag-zone');
    if (ez && ez.style.pointerEvents === 'none') {
      if (edgeZoneTimeout) clearTimeout(edgeZoneTimeout);
      edgeZoneTimeout = setTimeout(() => {
        if (typeof syncEdgeZone === 'function') syncEdgeZone();
        else ez.style.pointerEvents = 'all';
      }, 250);
    }
    swipeRT.xDown = null;
    swipeRT.yDown = null;
    swipeRT.timeDown = null;
  });
  // </swipe>

  // iOS Safari: non-passive touchstart on .steuerung to prevent native history-swipe gesture
  // from intercepting our swipe-to-navigate. Since preventDefault() also kills native click
  // events, touchend manually re-dispatches clicks for taps.
  document.addEventListener('touchstart', e => {
    if (window.f0ckSession?.disable_swiping) return;
    if (document.body.classList.contains('modal-open')) return;
    swipeRT._steuerungPreventedTarget = null;
    const steuerungEl = document.querySelector('.steuerung');
    if (!steuerungEl) return;
    const sr = steuerungEl.getBoundingClientRect();
    const t = e.touches[0];
    if (t.clientX >= sr.left && t.clientX <= sr.right &&
        t.clientY >= sr.top  && t.clientY <= sr.bottom) {
      e.preventDefault(); // Block iOS native back/forward gesture
      swipeRT._steuerungPreventedTarget = e.target;
    }
  }, { passive: false });

  // <mouse-sidebar-drag> — desktop mirror of the touch handlers
  // Use pointer:fine to detect actual mouse devices (not touch screens with narrow windows)
  const isMouseDevice = () => window.matchMedia('(pointer: fine)').matches;

  const mouseRT = {
    active: false,
    xDown: 0,
    yDown: 0,
    xDiff: 0,
    yDiff: 0,
    timeDown: 0,
    isDragging: false,
    isCandidate: false,
    sidebarEl: null,
    sidebarWidth: 300,
  };

  document.addEventListener('mousedown', e => {
    if (!isMouseDevice()) return;
    if (document.body.classList.contains('modal-open')) return;
    if (e.button !== 0) return; // Left button only

    const sidebar = document.querySelector('.global-sidebar-right, .item-sidebar-right, .index-sidebar-right');
    if (!sidebar) return;

    const isHidden = document.body.classList.contains('sidebar-right-hidden');
    let candidate = false;

    if (isHidden) {
      // Open zone: 80px from right edge
      if (e.clientX > window.innerWidth - 30) {
        candidate = true;
      }
    } else {
      // Close: only from the left-edge grab strip (first 16px of sidebar) OR the edgeZone overhang
      const dragZone = document.getElementById('sidebar-drag-zone');
      const sidebarLeft = sidebar.getBoundingClientRect().left;
      const inGrabStrip = e.clientX >= sidebarLeft && e.clientX <= sidebarLeft + 16;
      if (inGrabStrip || e.target === dragZone) {
        candidate = true;
      }
    }

    if (!candidate) return;

    mouseRT.active = true;
    mouseRT.isDragging = false;
    mouseRT.isCandidate = true;
    mouseRT.xDown = e.clientX;
    mouseRT.yDown = e.clientY;
    mouseRT.xDiff = 0;
    mouseRT.yDiff = 0;
    mouseRT.timeDown = Date.now();
    mouseRT.sidebarEl = sidebar;
    mouseRT.sidebarWidth = sidebar.offsetWidth;
  });

  document.addEventListener('mousemove', e => {
    if (!mouseRT.active) return;

    mouseRT.xDiff = mouseRT.xDown - e.clientX;
    mouseRT.yDiff = mouseRT.yDown - e.clientY;

    // Direction lock — commit to sidebar drag once clearly horizontal
    if (mouseRT.isCandidate && !mouseRT.isDragging) {
      const absX = Math.abs(mouseRT.xDiff);
      const absY = Math.abs(mouseRT.yDiff);
      if (absX >= 8 && absX > absY * 2) {
        mouseRT.isDragging = true;
        mouseRT.isCandidate = false;
        document.body.style.userSelect = 'none';
        window.getSelection()?.removeAllRanges(); // clear any selection that formed before threshold
      } else if (absY > absX) {
        mouseRT.isCandidate = false; // Scrolling — bail
        mouseRT.active = false;
        return;
      }
    }

    if (!mouseRT.isDragging || !mouseRT.sidebarEl) return;

    const isHidden = document.body.classList.contains('sidebar-right-hidden');
    let dragX = mouseRT.xDiff;
    if (isHidden) {
      dragX = Math.max(0, Math.min(mouseRT.sidebarWidth, dragX));
    } else {
      dragX = Math.max(-mouseRT.sidebarWidth, Math.min(0, dragX));
    }

    mouseRT.sidebarEl.style.setProperty('transition', 'none', 'important');
    mouseRT.sidebarEl.style.transform = `translateX(${-dragX}px)`;
    document.body.style.cursor = 'grabbing';
  });

  document.addEventListener('mouseup', e => {
    if (!mouseRT.active) return;
    mouseRT.active = false;
    document.body.style.userSelect = '';
    document.body.style.cursor = '';

    const wasDragging = mouseRT.isDragging;

    if (!mouseRT.isDragging || !mouseRT.sidebarEl) {
      mouseRT.isDragging = false;
      return;
    }

    const sidebar = mouseRT.sidebarEl;
    sidebar.style.cursor = '';
    mouseRT.isDragging = false;

    const isHidden = document.body.classList.contains('sidebar-right-hidden');
    const dist = Math.abs(mouseRT.xDiff);
    const timeDiff = Date.now() - mouseRT.timeDown;
    const threshold = mouseRT.sidebarWidth / 4;
    const quickSwipe = dist > 30 && timeDiff < 300;

    let shouldOpen = !isHidden;
    if (isHidden) {
      if (mouseRT.xDiff > threshold || (mouseRT.xDiff > 30 && quickSwipe)) shouldOpen = true;
    } else {
      if (mouseRT.xDiff < -threshold || (mouseRT.xDiff < -30 && quickSwipe)) shouldOpen = false;
    }

    const stateChanging = shouldOpen !== !isHidden;
    const targetTranslate = isHidden
      ? (shouldOpen ? -mouseRT.sidebarWidth : 0)
      : (shouldOpen ? 0 : mouseRT.sidebarWidth);

    sidebar.style.setProperty('transition', 'transform 0.3s ease-in-out', 'important');
    sidebar.style.transform = `translateX(${targetTranslate}px)`;

    let settled = false;
    const settle = () => {
      if (settled) return;
      settled = true;
      // Freeze sidebar AND wrapper transitions so the class toggle
      // doesn't trigger a second padding-right animation.
      const wrappers = getSidebarWrappers();
      wrappers.forEach(w => w.style.setProperty('transition', 'none', 'important'));
      sidebar.style.setProperty('transition', 'none', 'important');

      if (stateChanging) {
        const toHidden = !shouldOpen;
        document.body.classList.toggle('sidebar-right-hidden', toHidden);
        localStorage.setItem('sidebarRightHidden', toHidden);
      }

      void sidebar.offsetWidth;
      sidebar.style.transform = '';
      requestAnimationFrame(() => {
        sidebar.style.removeProperty('transition');
        wrappers.forEach(w => {
          w.style.removeProperty('transition');
          w.style.removeProperty('padding-right');
          w.style.removeProperty('right');
        });
        if (typeof window.redrawBgCanvas === 'function') {
          window.redrawBgCanvas();
        }
      });
    };

    const onEnd = ev => {
      if (ev.propertyName !== 'transform') return;
      sidebar.removeEventListener('transitionend', onEnd);
      settle();
    };
    sidebar.addEventListener('transitionend', onEnd);
    setTimeout(settle, 350);

    // Swallow the click event the browser fires after mouseup on the element
    // under the cursor — prevents links from activating after a drag.
    if (wasDragging) {
      document.addEventListener('click', e => e.stopPropagation() || e.preventDefault(), {
        capture: true, once: true
      });
    }
  });
  // Prevent native browser image-drag from hijacking our mouse drag
  document.addEventListener('dragstart', e => {
    if (mouseRT.active) e.preventDefault();
  });

  // Right-edge drag-zone cursor indicator — desktop only
  // A thin invisible overlay on the right edge that shows a grab cursor
  // when the sidebar is hidden, hinting that it can be dragged open.
  const edgeZone = document.createElement('div');
  edgeZone.id = 'sidebar-drag-zone';
  edgeZone.style.cssText = [
    'position: fixed',
    'top: 0',
    'right: 0',
    'bottom: 0',
    'width: 80px',
    'z-index: 899',
    'cursor: pointer',
    'pointer-events: none',
  ].join(';');
  document.body.appendChild(edgeZone);

  const syncEdgeZone = () => {
    const hidden = document.body.classList.contains('sidebar-right-hidden');
    if (hidden) {
      // Sidebar hidden: show 30px zone at the right edge for open gesture (all devices)
      edgeZone.style.pointerEvents = 'all';
      edgeZone.style.right = '0';
      edgeZone.style.width = '30px';
    } else {
      // Sidebar open: show 25px overhang just to the left of the sidebar on ALL devices
      // Touch devices tap it to close; mouse devices drag or click to close
      const s = document.querySelector('.global-sidebar-right, .item-sidebar-right, .index-sidebar-right');
      const sw = s ? s.offsetWidth : 300;
      edgeZone.style.right = sw + 'px';
      edgeZone.style.width = '25px';
      edgeZone.style.pointerEvents = 'all';
    }
  };

  syncEdgeZone();

  // Keep in sync when sidebar state changes
  new MutationObserver(syncEdgeZone).observe(document.body, {
    attributes: true, attributeFilter: ['class']
  });
  window.addEventListener('resize', syncEdgeZone, { passive: true });

  // Returns true if (clientX, clientY) is within the pill's hit area.
  // The pill is #sidebar-drag-zone::after — 4×40px, centered on pointer:fine,
  // right-aligned with padding-right:6px on pointer:coarse.
  const isWithinPillArea = (clientX, clientY) => {
    const rect = edgeZone.getBoundingClientRect();
    const pillH = 40;
    const hitPad = 12; // generous padding so it's easy to hit
    // Vertical: pill is always centered in the drag zone
    const pillCenterY = rect.top + rect.height / 2;
    if (clientY < pillCenterY - pillH / 2 - hitPad || clientY > pillCenterY + pillH / 2 + hitPad) return false;
    // Horizontal: right-aligned on touch, centered on mouse
    const isCoarse = window.matchMedia('(pointer: coarse)').matches;
    const pillCenterX = isCoarse ? rect.right - 6 - 2 : rect.left + rect.width / 2;
    return clientX >= pillCenterX - 2 - hitPad && clientX <= pillCenterX + 2 + hitPad;
  };

  // Touchend: tap on the pill toggles sidebar; rest of drag zone only responds to swipe
  edgeZone.addEventListener('touchend', e => {
    if (Math.abs(swipeRT.xDiff || 0) < 15 && Math.abs(swipeRT.yDiff || 0) < 15) {
      e.preventDefault(); // always prevent 300ms synthetic click
      const touch = e.changedTouches[0];
      if (touch && isWithinPillArea(touch.clientX, touch.clientY)) {
        window.toggleSidebarRight();
      }
    }
  }, { passive: false });

  // Helper: all layout wrappers that have padding-right animated by sidebar state
  const getSidebarWrappers = () => {
    // At ≤999px: sidebar is a pure overlay — only pagination tracks it.
    if (window.innerWidth <= 599) {
      return document.querySelectorAll('.pagination-container-fluid');
    }
    // At ≥600px: exclude pagewrapper when a dedicated layout wrapper is present.
    // CSS already zeroes pagewrapper.padding-right via :has on those pages,
    // so including it here causes double-padding (pagewrapper + index-layout-wrapper both
    // get 300px snapped, making the grid 600px too narrow, then jumping back on settle).
    const hasDedicatedWrapper = !!(
      document.querySelector('.index-layout-wrapper') ||
      document.querySelector('.item-layout-container') ||
      document.querySelector('.meme-layout-wrapper') ||
      document.querySelector('.messages-convo-page')
    );
    const sel = hasDedicatedWrapper
      ? '.index-layout-wrapper, .meme-layout-wrapper, .messages-convo-page, .pagination-container-fluid, .admin-bar'
      : '.pagination-container-fluid, .pagewrapper, .admin-bar';
    return document.querySelectorAll(sel);
  };

  // Smoothly toggle sidebar open/closed
  window.toggleSidebarRight = () => {
    const sidebar = document.querySelector('.global-sidebar-right, .item-sidebar-right, .index-sidebar-right');
    if (!sidebar) return;

    const isHidden = document.body.classList.contains('sidebar-right-hidden');
    const sidebarWidth = sidebar.offsetWidth || 300;
    const targetTranslate = isHidden ? -sidebarWidth : sidebarWidth;

    // At ≤599px the sidebar is a pure overlay — never animate wrapper padding
    const animateWrappers = window.innerWidth > 599;

    // All wrappers animate in sync with the sidebar so content and sidebar
    // expand/collapse together rather than staggering.
    const wrappers = getSidebarWrappers();
    if (animateWrappers) {
      wrappers.forEach(w => {
        const isRightEdge = w.classList.contains('pagination-container-fluid') || w.classList.contains('admin-bar');
        const isMessages = w.classList.contains('messages-convo-page');

        const prop = (isRightEdge || isMessages) ? 'right' : 'padding-right';
        const targetVal = isHidden ? sidebarWidth + 'px' : '0px';

        w.style.setProperty('transition', `${prop} 0.3s ease-in-out`, 'important');
        w.style.setProperty(prop, targetVal, 'important');
      });
      void sidebar.offsetWidth; // settle layout before sidebar transform begins
    }

    // Animate the drag-zone pill in sync with the sidebar so it stays
    // glued to the sidebar's left edge throughout the transition.
    edgeZone.style.setProperty('transition', 'right 0.3s ease-in-out', 'important');
    if (isHidden) {
      // Opening: pill moves from right-edge → left of sidebar
      edgeZone.style.right = sidebarWidth + 'px';
      edgeZone.style.width = '25px';
      edgeZone.style.pointerEvents = 'all';
    } else {
      // Closing: pill moves toward right-edge
      edgeZone.style.right = '0px';
      edgeZone.style.width = '30px';
      edgeZone.style.pointerEvents = 'all';
    }

    // Animate the Onara modal wrapper's right edge in sync with the sidebar
    // so the modal resizes at the same time instead of waiting for settle.
    const onaraModal = document.getElementById('onara-modal');
    if (onaraModal && animateWrappers) {
      const targetModalRight = isHidden ? sidebarWidth + 'px' : '0px';
      onaraModal.style.setProperty('transition',
        'opacity 0.28s cubic-bezier(0.16,1,0.3,1), transform 0.28s cubic-bezier(0.16,1,0.3,1), right 0.3s ease-in-out',
        'important');
      onaraModal.style.setProperty('right', targetModalRight, 'important');
    }

    // Animate #bg canvas width in sync with sidebar so background stays centered
    const bgCanvas = document.getElementById('bg');
    if (bgCanvas && animateWrappers) {
      const targetBgWidth = isHidden ? `calc(100vw - ${sidebarWidth}px)` : '100vw';
      bgCanvas.style.setProperty('transition', 'width 0.3s ease-in-out', 'important');
      bgCanvas.style.setProperty('width', targetBgWidth, 'important');
    }

    sidebar.style.setProperty('transition', 'transform 0.3s ease-in-out', 'important');
    sidebar.style.transform = `translateX(${targetTranslate}px)`;

    let settled = false;
    const settle = () => {
      if (settled) return;
      settled = true;
      // Freeze wrapper and edgeZone transitions so the class commit doesn't re-trigger them
      wrappers.forEach(w => w.style.setProperty('transition', 'none', 'important'));
      sidebar.style.setProperty('transition', 'none', 'important');
      edgeZone.style.setProperty('transition', 'none', 'important');
      if (onaraModal) onaraModal.style.setProperty('transition', 'none', 'important');
      if (bgCanvas) bgCanvas.style.setProperty('transition', 'none', 'important');
      const toHidden = !isHidden;
      document.body.classList.toggle('sidebar-right-hidden', toHidden);
      localStorage.setItem('sidebarRightHidden', toHidden);
      void sidebar.offsetWidth;
      sidebar.style.transform = '';
      requestAnimationFrame(() => {
        sidebar.style.removeProperty('transition');
        edgeZone.style.removeProperty('transition');
        if (onaraModal) {
          onaraModal.style.removeProperty('transition');
          onaraModal.style.removeProperty('right');
        }
        if (bgCanvas) {
          bgCanvas.style.removeProperty('transition');
          bgCanvas.style.removeProperty('width');
        }
        wrappers.forEach(w => {
          w.style.removeProperty('transition');
          w.style.removeProperty('padding-right');
          w.style.removeProperty('right');
        });
        if (typeof window.redrawBgCanvas === 'function') {
          window.redrawBgCanvas();
        }
      });
    };

    const onEnd = ev => {
      if (ev.propertyName !== 'transform') return;
      sidebar.removeEventListener('transitionend', onEnd);
      settle();
    };
    sidebar.addEventListener('transitionend', onEnd);
    setTimeout(settle, 350);
  };

  // Click on edgeZone: only toggle when the click lands on the pill
  edgeZone.addEventListener('click', (e) => {
    if (isWithinPillArea(e.clientX, e.clientY)) {
      window.toggleSidebarRight();
    }
  });
  // </mouse-sidebar-drag>

  // <left-sidebar-drag-zone>
  // Full drag-to-open/close for the modern layout's item-sidebar-left.
  // During drag the sidebar is promoted to position:fixed so translateX works cleanly
  // independent of the CSS grid. On settle the class toggle collapses/expands the grid.
  (() => {
    const leftEdgeZone = document.createElement('div');
    leftEdgeZone.id = 'sidebar-left-drag-zone';
    leftEdgeZone.style.cssText = 'position:fixed;top:0;bottom:0;width:25px;z-index:899;cursor:pointer;pointer-events:none';
    document.body.appendChild(leftEdgeZone);

    const getLS = () => ({
      sb: document.querySelector('.item-sidebar-left'),
      layout: document.querySelector('.item-layout-container'),
    });

    const isLSActive = () =>
      document.body.classList.contains('layout-modern') &&
      !!document.querySelector('.item-sidebar-left') &&
      window.innerWidth >= 1000;

    // Prepare sidebar for drag — keeps it in the CSS grid so overflow:hidden clips translateX.
    // OPEN: removes sidebar-hidden/display:none, places sidebar at translateX(-sw), reflows twice.
    // CLOSE: sidebar is already visible; sets translateX(0), reflows so transition has a start state.
    const prepareDrag = (sb, layout, isHidden, sw) => {
      sb.style.setProperty('transition', 'none', 'important');
      if (isHidden) {
        layout.classList.remove('sidebar-hidden');
        document.body.classList.remove('sidebar-left-hidden', 'comments-hidden');
        sb.style.removeProperty('display');
        sb.style.display = '';
        sb.classList.remove('is-hidden');
        sb.querySelectorAll('.faded-out, .is-hidden').forEach(el => {
          el.classList.remove('faded-out', 'is-hidden');
          el.style.removeProperty('display');
        });
        const c = sb.querySelector('#comments-container');
        if (c) {
          c.classList.remove('faded-out', 'is-hidden');
          c.style.removeProperty('display');
          c.style.display = '';
        }
        void sb.offsetWidth; // commit display + class change before setting transform
        sb.style.transform = `translateX(${-sw}px)`;
      } else {
        sb.style.transform = 'translateX(0px)';
      }
      void sb.offsetWidth; // paint initial transform so transition has a clear start
    };

    // Animate to final position then commit persistent state.
    const settleLeft = (sb, layout, shouldOpen, sw) => {
      sb.style.setProperty('transition', 'transform 0.3s ease-in-out', 'important');
      void sb.offsetWidth;
      sb.style.transform = `translateX(${shouldOpen ? 0 : -sw}px)`;

      let done = false;
      const finish = () => {
        if (done) return; done = true;
        sb.style.removeProperty('transition');
        if (shouldOpen) {
          sb.style.removeProperty('transform');
          sb.style.removeProperty('display');
          localStorage.setItem('comments_hidden', 'false');
          document.body.classList.remove('sidebar-left-hidden', 'comments-hidden');
        } else {
          // Hide BEFORE removing transform to prevent snap-back flash
          sb.style.setProperty('display', 'none', 'important');
          layout.classList.add('sidebar-hidden');
          localStorage.setItem('comments_hidden', 'true');
          document.body.classList.add('sidebar-left-hidden', 'comments-hidden');
          sb.style.removeProperty('transform');
        }
        requestAnimationFrame(() => syncLeftEdgeZone());
      };
      const onEnd = ev => {
        if (ev.propertyName !== 'transform') return;
        sb.removeEventListener('transitionend', onEnd);
        finish();
      };
      sb.addEventListener('transitionend', onEnd);
      setTimeout(finish, 350);
    };

    // ── Mouse drag ──────────────────────────────────────────────────────────
    const mL = {
      active: false, isDragging: false, isCandidate: false,
      xDown: 0, yDown: 0, xDiff: 0, yDiff: 0, timeDown: 0,
      sb: null, layout: null, sw: 0, wasHidden: false,
    };

    document.addEventListener('mousedown', e => {
      if (!isMouseDevice() || !isLSActive()) return;
      if (document.body.classList.contains('modal-open')) return;
      if (e.button !== 0) return;

      const { sb, layout } = getLS();
      if (!sb || !layout) return;

      const isHidden = layout.classList.contains('sidebar-hidden');
      let candidate = false;

      if (isHidden) {
        if (e.clientX < 30) candidate = true;
      } else {
        const rect = sb.getBoundingClientRect();
        const inStrip = e.clientX >= rect.right - 16 && e.clientX <= rect.right + 13;
        if (inStrip || e.target === leftEdgeZone) candidate = true;
      }

      if (!candidate) return;
      mL.active = true; mL.isDragging = false; mL.isCandidate = true;
      mL.xDown = e.clientX; mL.yDown = e.clientY; mL.xDiff = 0; mL.yDiff = 0;
      mL.timeDown = Date.now(); mL.sb = sb; mL.layout = layout;
      mL.sw = isHidden ? Math.round(Math.min(400, window.innerWidth * 0.30)) : sb.offsetWidth;
      mL.wasHidden = isHidden;
    });

    document.addEventListener('mousemove', e => {
      if (!mL.active) return;
      mL.xDiff = mL.xDown - e.clientX;
      mL.yDiff = mL.yDown - e.clientY;

      if (mL.isCandidate && !mL.isDragging) {
        const ax = Math.abs(mL.xDiff), ay = Math.abs(mL.yDiff);
        if (ax >= 8 && ax > ay * 2) {
          mL.isDragging = true; mL.isCandidate = false;
          document.body.style.userSelect = 'none';
          window.getSelection()?.removeAllRanges();
          prepareDrag(mL.sb, mL.layout, mL.wasHidden, mL.sw);
        } else if (ay > ax) {
          mL.isCandidate = false; mL.active = false; return;
        }
      }

      if (!mL.isDragging || !mL.sb) return;

      // xDiff < 0 = dragged right (opening); xDiff > 0 = dragged left (closing)
      const delta = -mL.xDiff; // positive = rightward
      let tx;
      if (mL.wasHidden) {
        tx = -mL.sw + Math.max(0, Math.min(mL.sw, delta));
      } else {
        tx = Math.max(-mL.sw, Math.min(0, delta));
      }
      mL.sb.style.setProperty('transition', 'none', 'important');
      mL.sb.style.transform = `translateX(${tx}px)`;
      document.body.style.cursor = 'grabbing';
    });

    document.addEventListener('mouseup', () => {
      if (!mL.active) return;
      mL.active = false;
      document.body.style.userSelect = '';
      document.body.style.cursor = '';
      const wasDragging = mL.isDragging;
      mL.isDragging = false;
      if (!wasDragging || !mL.sb) return;

      const dist = Math.abs(mL.xDiff), timeDiff = Date.now() - mL.timeDown;
      const threshold = mL.sw / 4, quickSwipe = dist > 30 && timeDiff < 300;
      let shouldOpen = !mL.wasHidden;
      if (mL.wasHidden) {
        if (mL.xDiff < -threshold || (mL.xDiff < -30 && quickSwipe)) shouldOpen = true;
      } else {
        if (mL.xDiff > threshold || (mL.xDiff > 30 && quickSwipe)) shouldOpen = false;
      }

      settleLeft(mL.sb, mL.layout, shouldOpen, mL.sw);
      if (wasDragging) {
        document.addEventListener('click', ev => ev.stopPropagation() || ev.preventDefault(), { capture: true, once: true });
      }
    });

    // ── Touch drag ──────────────────────────────────────────────────────────
    // Piggyback on swipeRT: add left-sidebar fields and new listeners.
    swipeRT.isDraggingLeftSidebar = false;
    swipeRT.isLeftSidebarCandidate = false;
    swipeRT.leftSB = null; swipeRT.leftLayout = null;
    swipeRT.leftSW = 0; swipeRT.leftWasHidden = false;

    document.addEventListener('touchstart', e => {
      if (window.f0ckSession?.disable_swiping) return;
      if (document.body.classList.contains('modal-open')) return;
      if (!isLSActive()) return;

      const { sb, layout } = getLS();
      if (!sb || !layout) return;

      const touch = e.touches[0];
      const isHidden = layout.classList.contains('sidebar-hidden');
      swipeRT.isDraggingLeftSidebar = false;
      swipeRT.isLeftSidebarCandidate = false;

      if (isHidden) {
        if (touch.clientX < 60) {
          swipeRT.isLeftSidebarCandidate = true;
          swipeRT.leftSB = sb; swipeRT.leftLayout = layout;
          swipeRT.leftSW = Math.round(Math.min(400, window.innerWidth * 0.30));
          swipeRT.leftWasHidden = true;
        }
      } else {
        const rect = sb.getBoundingClientRect();
        if (touch.clientX >= rect.right - 30 && touch.clientX <= rect.right + 13) {
          swipeRT.isLeftSidebarCandidate = true;
          swipeRT.leftSB = sb; swipeRT.leftLayout = layout;
          swipeRT.leftSW = sb.offsetWidth; swipeRT.leftWasHidden = false;
        }
      }
    }, { passive: true });

    document.addEventListener('touchmove', e => {
      if (window.f0ckSession?.disable_swiping) return;
      if (document.body.classList.contains('modal-open')) return;
      if (!swipeRT.xDown) return;

      if (swipeRT.isLeftSidebarCandidate && !swipeRT.isDraggingLeftSidebar && swipeRT.leftSB) {
        const ax = Math.abs(swipeRT.xDiff), ay = Math.abs(swipeRT.yDiff);
        if (ax >= ay && ax > 2 && e.cancelable) e.preventDefault();
        if (ax >= 12 && ax > ay * 2.5) {
          swipeRT.isDraggingLeftSidebar = true;
          swipeRT.isLeftSidebarCandidate = false;
          prepareDrag(swipeRT.leftSB, swipeRT.leftLayout, swipeRT.leftWasHidden, swipeRT.leftSW);
        } else if (ay > ax * 1.5) {
          swipeRT.isLeftSidebarCandidate = false;
        }
      }

      if (swipeRT.isDraggingLeftSidebar && swipeRT.leftSB) {
        if (e.cancelable) e.preventDefault();
        const sw = swipeRT.leftSW;
        const delta = -swipeRT.xDiff;
        let tx;
        if (swipeRT.leftWasHidden) {
          tx = -sw + Math.max(0, Math.min(sw, delta));
        } else {
          tx = Math.max(-sw, Math.min(0, delta));
        }
        swipeRT.leftSB.style.setProperty('transition', 'none', 'important');
        swipeRT.leftSB.style.transform = `translateX(${tx}px)`;
      }
    }, { passive: false });

    document.addEventListener('touchend', e => {
      if (!swipeRT.isDraggingLeftSidebar || !swipeRT.leftSB) return;

      const sw = swipeRT.leftSW, dist = Math.abs(swipeRT.xDiff);
      const timeDiff = Date.now() - (swipeRT.timeDown || Date.now());
      const threshold = sw / 4, quickSwipe = dist > 30 && timeDiff < 250;
      const isHidden = swipeRT.leftWasHidden;
      let shouldOpen = !isHidden;
      if (isHidden) {
        if (swipeRT.xDiff < -threshold || (swipeRT.xDiff < -30 && quickSwipe)) shouldOpen = true;
      } else {
        if (swipeRT.xDiff > threshold || (swipeRT.xDiff > 30 && quickSwipe)) shouldOpen = false;
      }

      settleLeft(swipeRT.leftSB, swipeRT.leftLayout, shouldOpen, sw);
      swipeRT.isDraggingLeftSidebar = false;
      swipeRT.leftSB = null; swipeRT.leftLayout = null;
    }, { passive: true });

    // ── Edge zone & sync ────────────────────────────────────────────────────
    const syncLeftEdgeZone = () => {
      const { sb, layout } = getLS();
      // The left drag zone only applies to the 3-column desktop grid (≥1000px).
      // On mobile the sidebar becomes in-flow, so hide the zone to avoid it
      // landing next to the right-sidebar drag zone on narrow screens.
      if (!sb || !layout || !document.body.classList.contains('layout-modern') || window.innerWidth < 1000) {
        leftEdgeZone.style.display = 'none';
        leftEdgeZone.style.pointerEvents = 'none';
        return;
      }
      leftEdgeZone.style.display = '';
      const isHidden = layout.classList.contains('sidebar-hidden');
      if (isHidden) {
        leftEdgeZone.style.left = '0';
        leftEdgeZone.style.width = '30px';
        leftEdgeZone.style.pointerEvents = 'all';
      } else {
        const sw = sb.offsetWidth;
        leftEdgeZone.style.left = sw + 'px';
        leftEdgeZone.style.width = '25px';
        leftEdgeZone.style.pointerEvents = 'all';
      }
    };

    window.toggleSidebarLeft = () => {
      if (window.innerWidth < 1000) return;
      const { sb, layout } = getLS();
      if (!sb || !layout) return;
      const isHidden = layout.classList.contains('sidebar-hidden') ||
                       document.body.classList.contains('sidebar-left-hidden') ||
                       document.body.classList.contains('comments-hidden') ||
                       localStorage.getItem('comments_hidden') === 'true';
      localStorage.setItem('comments_hidden', isHidden ? 'false' : 'true');
      const sw = isHidden ? Math.round(Math.min(400, window.innerWidth * 0.30)) : sb.offsetWidth;
      prepareDrag(sb, layout, isHidden, sw);
      // rAF ensures the initial transform state is painted before the transition starts
      requestAnimationFrame(() => settleLeft(sb, layout, isHidden, sw));
    };

    syncLeftEdgeZone();

    new MutationObserver(syncLeftEdgeZone).observe(document.body, { attributes: true, attributeFilter: ['class'] });
    const lc0 = document.querySelector('.item-layout-container');
    if (lc0) new MutationObserver(syncLeftEdgeZone).observe(lc0, { attributes: true, attributeFilter: ['class'] });
    window.addEventListener('resize', syncLeftEdgeZone, { passive: true });

    leftEdgeZone.addEventListener('touchend', e => {
      if (Math.abs(swipeRT.xDiff || 0) < 15 && Math.abs(swipeRT.yDiff || 0) < 15) {
        e.preventDefault();
        window.toggleSidebarLeft();
      }
    }, { passive: false });

    leftEdgeZone.addEventListener('click', () => window.toggleSidebarLeft());

    window.addEventListener('f0ck:contentLoaded', () => {
      syncLeftEdgeZone();
      const lc = document.querySelector('.item-layout-container');
      if (lc) new MutationObserver(syncLeftEdgeZone).observe(lc, { attributes: true, attributeFilter: ['class'] });
    });
  })();
  // </left-sidebar-drag-zone>


  // Export loaders for external systems (like NotificationSystem)
  window.loadPageAjax = loadPageAjax;
  window.loadItemAjax = loadItemAjax;

  // Invalidate all itemCacheMap entries that match a given item ID or slug.
  // Call this after mutating an item (e.g. rating, favorite, tags, OC) so the next
  // AJAX navigation fetches fresh HTML instead of serving stale cache.
  window.invalidateItemCache = (itemId) => {
    if (itemId === undefined || itemId === null || itemId === '') return;
    const strId = String(itemId).trim();
    for (const [key, val] of itemCacheMap.entries()) {
      const urlPath = key.split('?')[0];
      const segments = urlPath.split('/').filter(Boolean);
      const lastSegment = segments[segments.length - 1];
      if (lastSegment === strId) {
        itemCacheMap.delete(key);
        continue;
      }
      if (val && typeof val.html === 'string' && val.html.includes(`data-item-id="${strId}"`)) {
        itemCacheMap.delete(key);
      }
    }
  };
  // Continued...

const sbtForm = document.getElementById('sbtForm');
if (sbtForm) {
  sbtForm.addEventListener('submit', (e) => {
    e.preventDefault();
    const input = document.getElementById('sbtInput').value.trim();
    if (input) {
      window.location.href = `/tag/${encodeURIComponent(input)}`;

    }
  });
}

// Notification System
class NotificationSystem {
  // Notification type categorization
  static USER_TYPES = ['comment_reply', 'subscription', 'mention', 'upload_comment'];
  static SYSTEM_TYPES = ['approve', 'deny', 'item_deleted', 'upload_success', 'upload_error', 'admin_pending', 'report', 'warning'];

  constructor() {
    this.bell = document.getElementById('nav-notif-btn');
    this.dropdown = document.getElementById('notif-dropdown');
    this.countBadge = this.bell ? this.bell.querySelector('.notif-count') : null;
    this.list = this.dropdown ? this.dropdown.querySelector('.notif-list') : null;
    this.markAllBtn = document.getElementById('mark-all-read');
    this.customEmojis = {};
    this.retryCount = 0;
    this.maxRetries = 20; // Increased retries
    this.pendingNotifIds = new Set(); // item IDs notified before thumbnail was in the grid
    this.activeTab = 'user'; // 'user' or 'system'
    this._cachedUser = [];
    this._cachedSystem = [];

    // Generate/retrieve unique tab ID
    this.tabId = sessionStorage.getItem('f0ck_tab_id');
    if (!this.tabId) {
        this.tabId = Math.random().toString(36).slice(2);
        sessionStorage.setItem('f0ck_tab_id', this.tabId);
    }

    // Initialize even if bell is missing (for guests MOTD)
    this.init();
  }

  debounce(func, wait) {
    let timeout;
    return (...args) => {
      clearTimeout(timeout);
      timeout = setTimeout(() => func.apply(this, args), wait);
    };
  }

  async loadEmojis() {
    try {
      const res = await fetch('/api/v2/emojis');
      const data = await res.json();
      if (data.success) {
        data.emojis.forEach(e => {
          this.customEmojis[e.name] = e.url;
        });
      }
    } catch (e) {
      console.error("Failed to load emojis in NotificationSystem", e);
    }
  }

  init() {
    if (this._initialized) return;
    this._initialized = true;

    if (this.bell && this.dropdown && this.list) {
      // Emojis are only needed for rendering notification text — defer fetch until dropdown first opens
      this._emojisLoaded = false;
      this.bindEvents();
      this.poll();
      this.pollDebounced = this.debounce(() => this.poll(), 500);
    }
    this.initSSE();

    // Signal server that this tab is active
    const signalActive = () => {
        if (document.hidden) return;
        fetch(`/api/notifications/active?tabId=${this.tabId}`).catch(() => {});
        // If SSE is closed, reconnect
        if (!this.es || this.es.readyState === 2) {
            window.f0ckDebug("[NotificationSystem] SSE was closed, reconnecting as active tab...");
            this.initSSE();
        }
    };

    // When a tab with a #c<id> URL hash regains focus, browsers natively jump
    // to the anchor element. scrollTo() cannot override this because the native
    // scroll fires after JS event handlers at the rendering-engine level.
    //
    // Solution: on tab show, immediately strip the hash via history.replaceState
    // so the browser has no anchor to jump to. We then restore the saved scroll
    // position and re-apply the comment highlight manually — no visible change.
    let _savedScrollYOnHide = null;
    let _savedHashOnHide = null;
    document.addEventListener('visibilitychange', () => {
      if (document.hidden) {
        // Snapshot both scroll position and the current hash before hiding.
        if (window.location.hash && window.location.hash.startsWith('#c')) {
          _savedScrollYOnHide = window.scrollY;
          _savedHashOnHide = window.location.hash;
        } else {
          _savedScrollYOnHide = null;
          _savedHashOnHide = null;
        }
        return;
      }

      // Tab just became visible.
      if (_savedScrollYOnHide !== null && _savedHashOnHide) {
        const snapY = _savedScrollYOnHide;
        const snapHash = _savedHashOnHide;
        _savedScrollYOnHide = null;
        _savedHashOnHide = null;

        // 1. Strip the hash NOW — this is the key step.
        //    history.replaceState does NOT trigger scrolling, and with no hash
        //    the browser has nothing to anchor-jump to.
        history.replaceState(null, '', window.location.pathname + window.location.search);

        // 2. Restore scroll position immediately.
        window.scrollTo({ top: snapY, behavior: 'instant' });

        // 3. Silently put the hash back and re-highlight (no scroll side-effects).
        requestAnimationFrame(() => {
          window.scrollTo({ top: snapY, behavior: 'instant' });
          history.replaceState(null, '', window.location.pathname + window.location.search + snapHash);
          const hashId = snapHash.substring(2); // strip '#c'
          const el = document.getElementById('c' + hashId);
          if (el) el.classList.add('comment-highlighted');
        });
      }

      window.f0ckDebug("[NotificationSystem] Tab visible, signaling active...");
      // If SSE died while hidden, restart it now
      if (!this.es) {
        window.f0ckDebug("[NotificationSystem] SSE was dead, restarting on tab visible.");
        this.retryCount = 0;
        this.initSSE();
      }
      if (this.pollDebounced) this.pollDebounced();
      if (this.checkForNewItems) this.checkForNewItems();
      // Note: emojis_updated dispatch was removed from here — it caused emoji cache flush +
      // async re-fetch + re-render that could fight the scroll-position restoration.
      // Emojis rarely change while a tab is hidden; SSE will deliver a targeted emojis_updated
      // event if they actually changed.
      signalActive();
      // Sync display name in case it was changed while this tab was inactive
      if (window.f0ckSession?.logged_in) this.syncDisplayName();
      // Refresh comments on item pages to catch up on any SSE events missed while hidden.
      // Guard: only refresh if the container is still attached to the live DOM —
      // avoids writing into a detached node left behind by a previous PJAX navigation.
      // Skip if the user is actively typing to avoid clobbering their draft.
      if (window.commentSystem && typeof window.commentSystem.loadComments === 'function') {
        const container = window.commentSystem.container;
        const isAttached = container && document.contains(container);
        const userTyping = isAttached && container.querySelector('textarea:focus, input:focus');
        // Also skip if a file upload is in progress (e.g. mobile: file picker dismisses
        // keyboard so textarea loses focus, but _pendingUploads is still set).
        const hasPendingUpload = isAttached && Array.from(
          container.querySelectorAll('.comment-input')
        ).some(wrap => (wrap._pendingUploads || 0) > 0 || wrap._attachPending === true);
        if (isAttached && !userTyping && !hasPendingUpload) {
          // Kill the stabilization ResizeObserver SYNCHRONOUSLY before anything else.
          // If it's still alive from the initial anchor-load, it will fire when the
          // browser repaints the tab and re-scroll to the comment — that's the bug.
          window.commentSystem.stopStabilization();
          // Lock preservingScroll NOW (before the async fetch) so any scroll guards
          // in render/reconcile/emoji-load paths see the flag immediately.
          window.commentSystem.preservingScroll = true;
          // preserveScroll=true: prevent jump-to-top when re-focusing tab while scrolled down
          window.commentSystem.loadComments(null, true);
        }
      }
    });

    window.addEventListener('focus', () => {
        signalActive();
    });
  }

  initSSE() {
    if (this.es) {
      this.es.close();
    }

    let sseUrl = `/api/notifications/stream?tabId=${this.tabId}`;
    try {
      const fp = localStorage.getItem('f0ck_anon_ssh_fp');
      if (fp) sseUrl += `&fp=${encodeURIComponent(fp)}`;
      const hw = localStorage.getItem('f0ck_anon_hw_fp') || window.f0ckAnonSSH?.hwFingerprint;
      if (hw) sseUrl += `&hw=${encodeURIComponent(hw)}`;
    } catch (e) {}

    window.f0ckDebug(`[NotificationSystem] Initializing SSE connection (tabId: ${this.tabId})...`);
    this.es = new EventSource(sseUrl);

    this.es.onopen = () => {
      window.f0ckDebug("[NotificationSystem] SSE connection established");
      this.retryCount = 0;
      document.documentElement.dataset.sseReady = '1';
      document.dispatchEvent(new CustomEvent('f0ck:sse_ready'));
    };

    this.es.onmessage = (e) => {
      try {
        const data = JSON.parse(e.data);
        window.f0ckDebug(`[SSE] Received message:`, data.type);
        if (data.type === 'banned') {
          window.f0ckDebug(`[SSE] Live ban event received:`, data.data);
          if (window.f0ckAnonSSH && typeof window.f0ckAnonSSH.setTombstone === 'function') {
            window.f0ckAnonSSH.setTombstone({
              banned: true,
              reason: data.data?.reason || 'Violation of community guidelines',
              expires: data.data?.expires || null
            });
            window.f0ckAnonSSH.clearStoredIdentity();
          }
          try {
            const tombstoneData = { banned: true, reason: data.data?.reason, expires: data.data?.expires };
            document.cookie = `f0ck_banned=${encodeURIComponent(JSON.stringify(tombstoneData))}; Path=/; Max-Age=31536000; SameSite=Lax`;
          } catch (err) {}
          window.location.href = data.data?.redirect || '/banned';
          return;
        }
        if (data.type === 'notify') {
          this.pollDebounced();
          const dnd = window.f0ckSession?.do_not_disturb === true;
          // Haptic feedback on mobile (supported: Chrome for Android, not iOS)
          if (!dnd && navigator.vibrate) navigator.vibrate([200, 80, 200]);
          // Live Grid Highlight
          if (data.data && data.data.item_id) {
            const itemId = data.data.item_id;
            const notifType = data.data.type;
            window.f0ckDebug(`[SSE] Live notification for item ${itemId} (type: ${notifType})`);

            // System notifications (deletion, deny, reports) require explicit acknowledgment —
            // never auto-mark them as read just because the user is viewing that item.
            const isSystemNotif = ['item_deleted', 'deny', 'admin_pending', 'report', 'warning'].includes(notifType);

            // If the user is currently viewing this item, mark comment-type notifications as read immediately
            // (they are live on the thread, so no need to show a badge/highlight)
            const currentPath = window.location.pathname;
            if (!isSystemNotif && (currentPath === `/${itemId}` || currentPath === `/${itemId}/`)) {
              window.f0ckDebug(`[SSE] Notification for current item ${itemId} — auto-marking as read`);
              fetch(`/api/notifications/item/${itemId}/read`, {
                method: 'POST',
                keepalive: true
              }).catch(err => console.error('[SSE] Failed to auto-mark notification as read', err));
              // Still refresh the badge count in the dropdown
              // (pollDebounced above will update the count)
            } else {
              const thumbs = document.querySelectorAll(`a.thumb[href$="/${itemId}"]`);
              if (thumbs.length > 0) {
                thumbs.forEach(el => el.classList.add('has-notif'));
              } else {
                // Thumb not in grid yet (new_item SSE may arrive after notify)
                // Store pending so handleNewItem can apply it when the thumb is created
                this.pendingNotifIds.add(String(itemId));
              }
            }
          }
        } else if (data.type === 'activity') {
          // Trigger Navbar Glow
          const btn = document.getElementById('nav-activity-btn') || document.getElementById('nav-activity-btn-guest');
          if (btn) {
            const svg = btn.querySelector('svg');
            if (svg) {
              svg.classList.remove('activity-glowing');
              void svg.offsetWidth;
              svg.classList.add('activity-glowing');
              setTimeout(() => {
                svg.classList.remove('activity-glowing');
              }, 1000); // Remove after animation duration (1s)
            }
          }
          this.handleActivity(data.data);
        } else if (data.type === 'tags') {
          window.f0ckDebug(`[SSE] Tag update received for item ${data.data?.item_id}`);
          this.handleTagsUpdate(data.data);
        } else if (data.type === 'favorites') {
          window.f0ckDebug(`[SSE] Favorite update received for item ${data.data?.item_id}`);
          this.handleFavoritesUpdate(data.data);
        } else if (data.type === 'comments') {
          window.f0ckDebug(`[SSE] Comment update received:`, data.data);
          if (data.data.type === 'comment') {
            if (window.commentSystem && typeof window.commentSystem.handleLiveComment === 'function') {
              window.commentSystem.handleLiveComment(data.data);
            }
            // New comment posted — update xD badge from server-authoritative score
            if (typeof data.data.xd_score === 'number') {
              updateXdBadgeFromScore(data.data.item_id, data.data.xd_score);
            }
          } else if (data.data.type === 'delete') {
            if (window.commentSystem && typeof window.commentSystem.handleLiveDeletion === 'function') {
              window.commentSystem.handleLiveDeletion(data.data);
            }
            // Also handle activity feed removal (find all instances of this comment ID)
            document.querySelectorAll('#c' + data.data.comment_id).forEach(el => {
              if (el.closest('#activity-container')) {
                el.classList.add('deleted');
                const contentEl = el.querySelector('.comment-content');
                if (contentEl) contentEl.innerHTML = '<span class="deleted-msg">[deleted]</span>';
              }
            });
            // Also vanish from sidebar
            const sidebarEl = document.getElementById('sc' + data.data.comment_id);
            if (sidebarEl) {
              sidebarEl.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
              sidebarEl.style.opacity = '0';
              sidebarEl.style.transform = 'scale(0.95)';
              setTimeout(() => sidebarEl.remove(), 300);
            }
            if (window._sidebarActivityCache) {
              window._sidebarActivityCache = window._sidebarActivityCache.filter(c => String(c.id) !== String(data.data.comment_id));
            }
          } else if (data.data.type === 'edit') {
            if (window.commentSystem && typeof window.commentSystem.handleLiveEdit === 'function') {
              window.commentSystem.handleLiveEdit(data.data);
            }
            // Dispatch event for other potential listeners (like Activity Feed)
            window.dispatchEvent(new CustomEvent('f0ck:comment_edited', { detail: data.data }));
          }
        } else if (data.type === 'emojis_updated') {
          window.f0ckDebug("[SSE] Emojis updated, refreshing caches...");
          // If dropdown was never opened, just reset the flag so next open fetches fresh data.
          // If it was already opened (emojis in use), re-fetch immediately.
          if (this._emojisLoaded) {
            this.loadEmojis();
          } else {
            this._emojisLoaded = false; // ensure re-fetch on next open
          }
          window.dispatchEvent(new CustomEvent('f0ck:emojis_updated'));
        } else if (data.type === 'motd') {
          window.f0ckDebug(`[SSE] MOTD update received:`, data.data.motd);
          if (typeof window.updateMotdUI === 'function') {
            window.updateMotdUI(data.data.motd);
          }
        } else if (data.type === 'rethumb') {
          window.f0ckDebug(`[SSE] Rethumb update received for item ${data.data?.item_id}`);
          if (data.data && data.data.item_id && window.refreshItemThumbnails) {
            window.refreshItemThumbnails(data.data.item_id, Date.now(), data.data.has_coverart);
          }
        } else if (data.type === 'new_item') {
          window.f0ckDebug(`[SSE] New item received:`, data.data);
          this.handleNewItem(data.data);
        } else if (data.type === 'delete_item') {
          const delId = data.data?.id;
          if (!delId) return;
          window.f0ckDebug(`[SSE] Item deleted: ${delId}`);

          // Remove from main grid — a.thumb is the anchor, li is its parent card
          const thumb = document.querySelector(`a.thumb[href$="/${delId}"], a.lazy-thumb[href$="/${delId}"]`);
          if (thumb) {
            const card = thumb.closest('li') || thumb;
            card.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
            card.style.opacity = '0';
            card.style.transform = 'scale(0.95)';
            setTimeout(() => card.remove(), 300);
          }

          // If currently viewing this item, navigate to next item using soft AJAX nav
          const currentItemId = (typeof window.getCurrentItemId === 'function' ? window.getCurrentItemId() : null) || window.currentItemId;
          if (currentItemId && +currentItemId === delId) {
            // Skip navigation if the current user is the admin/mod who deleted this item
            // (admin.js sets this flag immediately on delete, and shows a "deleted" placeholder)
            const weDeletedIt = window._adminJustDeletedItem === delId;
            const mediaObj = document.querySelector('.media-object');
            const alreadyShowingPlaceholder = mediaObj && mediaObj.querySelector('h1') && mediaObj.querySelector('h1').textContent.includes('Deleted');
            if (!weDeletedIt && !alreadyShowingPlaceholder) {
              const next = document.querySelector('[data-next-id]')?.dataset?.nextId
                         || document.querySelector('.nav-next')?.href?.match(/\/(\d+)/)?.[1];
              if (next) {
                if (typeof window.loadItemAjax === 'function') {
                  window.loadItemAjax(`/${next}`, true);
                } else {
                  window.location.href = `/${next}`;
                }
              }
            }
          }

          // Remove from sidebar activity if present
          document.querySelectorAll(`#sidebar-activity-container [data-item="${delId}"]`).forEach(el => el.remove());
        } else if (data.type === 'emojis_updated') {
          window.f0ckDebug(`[SSE] Emoji update event received`);
          if (window.commentSystem && typeof window.commentSystem.loadEmojis === 'function') {
            window.commentSystem.loadEmojis(true); // force=true: admin updated emojis
          }
          // Global dispatch for other listeners (e.g. Admin Dashboard)
          document.dispatchEvent(new Event('f0ck:emojis_updated'));
        } else if (data.type === 'warning') {
          window.f0ckDebug(`[SSE] Warning received:`, data.data);
          const warningModal = document.getElementById('warning-modal');
          if (warningModal) {
              document.getElementById('warning-reason').textContent = data.data.reason;
              document.getElementById('warning-id').value = data.data.warning_id;
              warningModal.style.display = 'flex';
              document.body.classList.add('modal-open');
          }
        } else if (data.type === 'private_message') {
          window.f0ckDebug(`[SSE] Private message received from user ${data.data?.sender_id}`);
          // Haptic feedback for DMs (distinct double-pulse pattern)
          if (navigator.vibrate) navigator.vibrate([120, 60, 120]);
          // Dispatch event for messages.js thread live-update
          window.dispatchEvent(new CustomEvent('dm:incoming', { detail: data.data }));
          if (window.DMSystem) {
            // If the user is already viewing this exact DM thread, messages.js will mark
            // the message as read and refresh the badge itself. Don't increment here or
            // the badge flashes 0→1→0 before settling back at 0.
            const dmThread = document.getElementById('dm-thread');
            const threadOtherId = dmThread ? parseInt(dmThread.dataset.otherId, 10) : null;
            const senderId = data.data?.sender_id;
            const isViewingThread = dmThread && threadOtherId && Number(senderId) === threadOtherId && !document.hidden;

            if (!isViewingThread) {
              // Not viewing this thread — show the badge immediately
              if (typeof window.DMSystem.incrementDmBadge === 'function') {
                window.DMSystem.incrementDmBadge();
              }
            }
            // Always sync exact count from server in background
            if (typeof window.DMSystem.refreshDmBadge === 'function') {
              window.DMSystem.refreshDmBadge();
            }
          }
        } else if (data.type === 'profile_update') {
          const { display_name, user, banner_file, banner_position, banner_size, avatar_file, username_color, description } = data.data;
          if (display_name !== undefined) this.applyDisplayNameUpdate(display_name, user);
          if (banner_file !== undefined || banner_position !== undefined || banner_size !== undefined) {
            this.applyBannerUpdate(banner_file, banner_position, banner_size, user);
          }
          if (avatar_file !== undefined) {
            this.applyAvatarUpdate(avatar_file, user);
          }
          if (username_color !== undefined) {
            this.applyUsernameColorUpdate(username_color, user);
          }
          if (description !== undefined) {
            this.applyDescriptionUpdate(description, user);
          }
          // Sync preferences to global session object for client-side gating (like DND)
          if (window.f0ckSession && data.data.user_id === window.f0ckSession.id) {
            for (const key in data.data) {
              if (key !== 'user_id') window.f0ckSession[key] = data.data[key];
            }
          }
        } else if (data.type === 'global_chat') {
          document.dispatchEvent(new CustomEvent('f0ck:global_chat', { detail: data.data }));
        } else if (data.type === 'global_chat_clear') {
          document.dispatchEvent(new CustomEvent('f0ck:global_chat_clear'));
        } else if (data.type === 'global_chat_delete') {
          document.dispatchEvent(new CustomEvent('f0ck:global_chat_delete', { detail: data.data }));
        } else if (data.type === 'global_chat_background') {
          document.dispatchEvent(new CustomEvent('f0ck:global_chat_background', { detail: data.data }));
        } else if (data.type === 'global_chat_topic') {
          document.dispatchEvent(new CustomEvent('f0ck:global_chat_topic', { detail: data.data }));
        } else if (data.type === 'global_chat_presence') {
          document.dispatchEvent(new CustomEvent('f0ck:global_chat_presence', { detail: data.data }));
        }
      } catch (err) {
        console.error('SSE data parse error', err);
      }
    };

    // Helper: apply a display name change to all relevant DOM nodes
    this.applyDisplayNameUpdate = (display_name, user) => {
      const isSelf = !user || (window.f0ckSession?.user && user.toLowerCase() === window.f0ckSession.user.toLowerCase());

      // Capture old value before overwriting — needed for thumb matching below
      const oldDisplayName = isSelf ? (window.f0ckSession?.display_name || null) : null;
      if (isSelf && window.f0ckSession) {
        window.f0ckSession.display_name = display_name || null;
      }
      
      const userName = user || window.f0ckSession?.user;

      // Update navbar display name only if this update is for the logged-in user
      if (isSelf) {
        document.querySelectorAll('#nav-display-name').forEach(nameSpan => {
          for (let i = nameSpan.childNodes.length - 1; i >= 0; i--) {
            let node = nameSpan.childNodes[i];
            if (node.nodeType === Node.TEXT_NODE && node.nodeValue.trim().length > 0) {
              const match = node.nodeValue.match(new RegExp('^(\\s*)(.*)'));
              node.nodeValue = (match ? match[1] : '') + (display_name || userName || '');
              break;
            }
          }
        });
      }

      // Update profile header display name if currently viewing this user's profile
      const profileBox = document.getElementById('live-profile-preview-box');
      if (profileBox && profileBox.dataset.bannerUser && userName && profileBox.dataset.bannerUser.toLowerCase() === userName.toLowerCase()) {
        const profileNameSpan = document.getElementById('profile-display-name');
        if (profileNameSpan) {
          for (let i = profileNameSpan.childNodes.length - 1; i >= 0; i--) {
            let node = profileNameSpan.childNodes[i];
            if (node.nodeType === Node.TEXT_NODE && node.nodeValue.trim().length > 0) {
              const match = node.nodeValue.match(new RegExp('^(\\s*)(.*)'));
              node.nodeValue = (match ? match[1] : '') + (display_name || userName || '');
              break;
            }
          }
        }
        const bracket = document.getElementById('username-bracket');
        if (bracket) {
          bracket.style.display = display_name ? 'inline' : 'none';
        }
      }

      if (userName) {
        const lowerHref = `/user/${userName.toLowerCase()}`;
        const exactHref = `/user/${userName}`;
        // Sidebar / thread comment author links
        document.querySelectorAll(`.comment-author[href="${lowerHref}"], .comment-author[href="${exactHref}"]`).forEach(el => {
          el.textContent = display_name || userName;
        });
        // Item view: the [username] link next to the item ID
        const aUsername = document.getElementById('a_username');
        if (aUsername && (aUsername.getAttribute('href') === lowerHref || aUsername.getAttribute('href') === exactHref)) {
          aUsername.textContent = display_name || userName;
        }
        // Grid thumbnails: update data-user attribute (shown as CSS content on hover)
        if (!(window.f0ckSession?.is_anonymized ?? window.f0ckSession?.guest_anonymize)) {
          document.querySelectorAll('.thumb[data-user]').forEach(el => {
            const cur = el.getAttribute('data-user');
            if (cur === userName || (oldDisplayName && cur === oldDisplayName)) {
              el.setAttribute('data-user', display_name || userName);
            }
          });
        }
      }
    };

    // Helper: apply a username color change to relevant DOM nodes
    this.applyUsernameColorUpdate = (username_color, user) => {
      const isSelf = !user || (window.f0ckSession?.user && user.toLowerCase() === window.f0ckSession.user.toLowerCase());
      const userName = user || window.f0ckSession?.user;
      if (!userName) return;

      const userHref = `/user/${userName}`;
      document.querySelectorAll(`a.comment-author[href="${userHref}"]`).forEach(el => {
        if (username_color) {
          el.style.color = username_color;
        } else {
          el.style.removeProperty('color');
        }
      });
      
      // Handle the item view username link
      const aUsername = document.getElementById('a_username');
      if (aUsername && aUsername.getAttribute('href') === userHref) {
        if (username_color) {
          aUsername.style.color = username_color;
        } else {
          aUsername.style.removeProperty('color');
        }
      }

      // Handle favs avatar border color
      document.querySelectorAll('#favs img').forEach(img => {
        const link = img.closest('a');
        if (link && (link.href.includes(`/user/${userName.toLowerCase()}`) || link.href.includes(`/user/${userName}`))) {
          if (username_color) {
            img.style.borderColor = username_color;
          } else {
            img.style.removeProperty('border-color');
          }
        }
      });

      // Update the infobox block variables for color accents
      const safeUserName = userName.replace(/"/g, '\\"');
      document.querySelectorAll(`.user-infobox-block[data-banner-user="${safeUserName}"]`).forEach(block => {
        if (username_color) {
          block.style.setProperty('--author-accent', username_color);
          block.style.setProperty('--author-border', username_color);
        } else {
          block.style.setProperty('--author-accent', 'var(--accent)');
          block.style.setProperty('--author-border', 'var(--accent)');
        }
      });

      // Profile header display name color (if currently viewing this user's profile)
      const profileBox = document.getElementById('live-profile-preview-box');
      if (profileBox && profileBox.dataset.bannerUser && profileBox.dataset.bannerUser.toLowerCase() === userName.toLowerCase()) {
        const profileNameSpan = document.getElementById('profile-display-name');
        if (profileNameSpan) {
          if (username_color) {
            profileNameSpan.style.color = username_color;
          } else {
            profileNameSpan.style.removeProperty('color');
          }
        }
      }

      // Navbar display name color (only for current user)
      if (isSelf) {
        document.querySelectorAll('#nav-display-name').forEach(el => {
          if (username_color) {
            el.style.color = username_color;
          } else {
            el.style.removeProperty('color');
          }
        });
      }
    };

    // Helper: apply an avatar update to relevant DOM nodes
    this.applyAvatarUpdate = (avatar_file, user) => {
      const isSelf = !user || (window.f0ckSession?.user && user.toLowerCase() === window.f0ckSession.user.toLowerCase());
      const userName = user || window.f0ckSession?.user;
      if (!userName) return;

      const newSrc = avatar_file ? `/a/${avatar_file}?t=${Date.now()}` : '/a/default.png';

      // Update Nav Avatar only for current user
      if (isSelf) {
        document.querySelectorAll('.nav-avatar-img').forEach(img => img.src = newSrc);
      }

      // Update profile header avatar if currently viewing this user's profile
      const profileBox = document.getElementById('live-profile-preview-box');
      if (profileBox && profileBox.dataset.bannerUser && profileBox.dataset.bannerUser.toLowerCase() === userName.toLowerCase()) {
        document.querySelectorAll('.profile_head_avatar img').forEach(img => img.src = newSrc);
      }

      // Update globally (comments, sidebar, polls, rank, infoboxes, favs)
      // We broadly target a[href^="/user/"] img to catch basically any avatar linked to the profile
      const lowerHref = `/user/${userName.toLowerCase()}`;
      const exactHref = `/user/${userName}`;

      document.querySelectorAll('.comment-avatar img, .sidebar-avatar, .poll-voter-avatar, .rank-avatar, .user-infobox-avatar img, #favs img, a[href^="/user/"] img').forEach(img => {
        const link = img.closest('a');
        if (link && (link.href.includes(lowerHref) || link.href.includes(exactHref))) {
          img.src = newSrc;
        }
      });
    };

    // Helper: apply banner update to relevant DOM nodes
    this.applyBannerUpdate = (banner_file, banner_position, banner_size, user) => {
      const userName = user || window.f0ckSession?.user;
      if (!userName) return;

      // Store last known state so we can re-apply after PJAX navigation or bfcache restore
      if (window.f0ckSession && userName === window.f0ckSession.user) {
        this._lastKnownBanner = { banner_file, banner_position, banner_size };
      }

      const setBannerStyle = (el) => {
        if (banner_file) {
          el.style.setProperty('--author-banner', `url('/a/${banner_file}?t=${Date.now()}')`);
          el.style.setProperty('--author-banner-position', banner_position || 'center');
          el.style.setProperty('--author-banner-size', banner_size || 'cover');
        } else {
          el.style.removeProperty('--author-banner');
          el.style.removeProperty('--author-banner-position');
          el.style.removeProperty('--author-banner-size');
        }
      };

      document.querySelectorAll(`.profile_head[data-banner-user="${userName}"], .user-infobox-block[data-banner-user="${userName}"]`).forEach(el => {
        setBannerStyle(el);
      });

      // Special case for settings page preview block
      if (window.f0ckSession && userName === window.f0ckSession.user) {
        const previewBlock = document.getElementById('live-profile-preview-box');
        if (previewBlock) setBannerStyle(previewBlock);
      }
    };

    // Helper: apply description update to relevant DOM nodes
    this.applyDescriptionUpdate = (description, user) => {
      const userName = user || window.f0ckSession?.user;
      console.log('[SSE] applyDescriptionUpdate called for user:', userName, 'description:', description);
      if (!userName) return;

      // Escape quotes for selector
      const safeUserName = userName.replace(/"/g, '\\"');
      // Find the profile header for this user
      const profileHead = document.querySelector(`.profile_head[data-banner-user="${safeUserName}"]`);
      console.log('[SSE] applyDescriptionUpdate profileHead found?', !!profileHead);
      
      if (profileHead) {
        const descDisplay = profileHead.querySelector('#profile-desc-display .desc-text');
        console.log('[SSE] applyDescriptionUpdate descDisplay found?', !!descDisplay);
        
        if (descDisplay) {
          if (!description || description.trim() === '') {
            descDisplay.innerHTML = '<em style="color:var(--text-muted);">No description</em>';
          } else {
            const tempDiv = document.createElement('div');
            tempDiv.textContent = description;
            descDisplay.innerHTML = tempDiv.innerHTML.replace(/\n/g, '<br>');
          }
        }
        // Also update the edit input if it exists (for the logged in user)
        if (window.f0ckSession && userName === window.f0ckSession.user) {
           const input = profileHead.querySelector('#inline-desc-input');
           if (input) {
               input.value = description || '';
               console.log('[SSE] applyDescriptionUpdate input updated');
           }
        }
      }

      // Update any item page infoboxes
      document.querySelectorAll(`.user-infobox-block[data-banner-user="${safeUserName}"]`).forEach(block => {
        const infoboxDesc = block.querySelector('.user-infobox-description');
        if (infoboxDesc) {
            if (!description || description.trim() === '') {
              infoboxDesc.innerHTML = '';
            } else {
              const tempDiv = document.createElement('div');
              tempDiv.textContent = description;
              infoboxDesc.innerHTML = tempDiv.innerHTML.replace(/\n/g, '<br>');
            }
        }
      });

      // Special case for settings page preview block
      if (window.f0ckSession && userName === window.f0ckSession.user) {
        const previewBlock = document.getElementById('live-profile-preview-box');
        if (previewBlock) {
          const previewDesc = previewBlock.querySelector('.user-infobox-description');
          if (previewDesc) {
            if (!description || description.trim() === '') {
              previewDesc.innerHTML = 'Welcome to my profile! This is a live preview.';
            } else {
              const tempDiv = document.createElement('div');
              tempDiv.textContent = description;
              previewDesc.innerHTML = tempDiv.innerHTML.replace(/\n/g, '<br>');
            }
          }
        }
      }
    };

    // Re-apply own banner after every PJAX navigation and bfcache restore.
    // Fixes the case where SSE fired on the settings page before the item page DOM was loaded.
    const reapplyOwnBanner = () => {
      if (!window.f0ckSession?.user || !this._lastKnownBanner) return;
      const { banner_file, banner_position, banner_size } = this._lastKnownBanner;
      const userName = window.f0ckSession.user;
      const setBannerStyle = (el) => {
        if (banner_file) {
          el.style.setProperty('--author-banner', `url('/a/${banner_file}?t=${Date.now()}')`);
          el.style.setProperty('--author-banner-position', banner_position || 'center');
          el.style.setProperty('--author-banner-size', banner_size || 'cover');
        } else {
          el.style.removeProperty('--author-banner');
          el.style.removeProperty('--author-banner-position');
          el.style.removeProperty('--author-banner-size');
        }
      };
      document.querySelectorAll(
        `.profile_head[data-banner-user="${userName}"], .user-infobox-block[data-banner-user="${userName}"]`
      ).forEach(el => setBannerStyle(el));
    };

    document.addEventListener('f0ck:contentLoaded', reapplyOwnBanner);
    window.addEventListener('pageshow', (e) => { if (e.persisted) reapplyOwnBanner(); });

    // Poll fresh display_name from DB — used on tab focus to catch missed SSE events
    this.syncDisplayName = async () => {
      try {
        const res = await fetch('/api/v2/settings/me', { credentials: 'same-origin' });
        if (!res.ok) return;
        const data = await res.json();
        if (!data.success) return;
        // Always apply — the helper handles session + all DOM surfaces
        this.applyDisplayNameUpdate(data.display_name, data.user);
      } catch (e) { /* silent — best-effort background sync */ }
    };

    this.es.onerror = (err) => {
      console.warn('Notification SSE connection lost', err);
      if (this.es) {
          this.es.close();
          this.es = null;
      }

      // If tab is hidden, don't retry now — visibilitychange will restart SSE when visible again
      if (document.hidden) {
          window.f0ckDebug("[NotificationSystem] Tab hidden, deferring SSE retry until visible.");
          return;
      }

      // Exponential backoff, capped at 30s
      const delay = Math.min(Math.pow(2, this.retryCount) * 1000, 30000);
      if (this.retryCount < this.maxRetries) {
        window.f0ckDebug(`[NotificationSystem] Retrying SSE in ${delay}ms... (attempt ${this.retryCount + 1}/${this.maxRetries})`);
        setTimeout(() => this.initSSE(), delay);
        this.retryCount++;
      } else {
        // Past max retries — keep trying every 30s indefinitely, reset counter so backoff starts fresh
        console.warn("[NotificationSystem] Max SSE retries reached, falling back to 30s polling.");
        this.retryCount = 0;
        setTimeout(() => this.initSSE(), 30000);
      }
    };
  }

  get isOpen() {
    return this.dropdown.classList.contains('visible');
  }

  toggle() {
    if (this.isOpen) {
      this.close();
    } else {
      this.open();
    }
  }

  _positionDropdown() {
    if (window.innerWidth <= 768) {
      const bellRect = this.bell.getBoundingClientRect();
      this.dropdown.style.top   = (bellRect.bottom + 6) + 'px';
      this.dropdown.style.right = '0';
      this.dropdown.style.left  = 'auto';
    } else {
      this.dropdown.style.top   = '';
      this.dropdown.style.right = '';
      this.dropdown.style.left  = '';
    }
  }

  open() {
    this._positionDropdown();
    this.dropdown.classList.add('visible');
    this.bell.classList.add('is-active');

    // Live-track position while open (handles resize + layout shifts)
    if (!this._resizeHandler) {
      this._resizeHandler = () => {
        if (this.isOpen) {
          if (this._rafId) cancelAnimationFrame(this._rafId);
          this._rafId = requestAnimationFrame(() => this._positionDropdown());
        }
      };
      window.addEventListener('resize', this._resizeHandler, { passive: true });
    }
  }

  close() {
    this.dropdown.classList.remove('visible');
    this.bell.classList.remove('is-active');
  }

  bindEvents() {
    // Open/Close
    this.bell.addEventListener('click', (e) => {
      e.preventDefault();
      e.stopPropagation();
      // Lazy-load emojis on first open — no need to fetch them on every page load
      if (!this._emojisLoaded) {
        this._emojisLoaded = true;
        this.loadEmojis();
      }
      this.toggle();
    });

    // Close on outside click
    document.addEventListener('click', (e) => {
      if (this.isOpen && !this.dropdown.contains(e.target) && !this.bell.contains(e.target)) {
        this.close();
      }
    });

    // Mark all as read
    if (this.markAllBtn) {
      this.markAllBtn.addEventListener('click', () => this.markAllRead());
    }

    // Tab switching in dropdown
    if (this.dropdown) {
      this.dropdown.querySelectorAll('.notif-tab').forEach(tab => {
        tab.addEventListener('click', (e) => {
          e.preventDefault();
          e.stopPropagation();
          const tabName = tab.dataset.tab;
          if (tabName === this.activeTab) return;
          this.activeTab = tabName;
          // Update active class
          this.dropdown.querySelectorAll('.notif-tab').forEach(t => t.classList.remove('active'));
          tab.classList.add('active');
          if (this.list) this.list.dataset.activeTab = tabName;
          // Re-render with cached data
          this._renderActiveTab();
        });
      });
    }

    // Single Notification Click Handler (Delegated)
    // Handles both Dropdown and History Page
    const handleNotificationClick = (e) => {
      // Blur-reveal intercept: if the tap/click landed on (or inside) a blurred
      // notif-thumb that hasn't been revealed yet, reveal it and stop navigation.
      // Blur is mode-based: SFW mode blurs NSFW/NSFL, NSFW mode blurs NSFL, ALL = no blur.
      const tappedThumb = e.target.closest('.notif-thumb[data-mode]');
      if (tappedThumb && !tappedThumb.classList.contains('revealed') && window.activeMode !== 3) {
        const itemMode = tappedThumb.dataset.mode;
        const isBlurred =
          (window.activeMode === 0 && (itemMode === 'nsfw' || itemMode === 'nsfl')) ||
          (window.activeMode === 1 && itemMode === 'nsfl') ||
          (window.activeMode === 4 && (itemMode === 'sfw' || itemMode === 'nsfw'));
        if (isBlurred) {
          e.preventDefault();
          e.stopPropagation();
          tappedThumb.classList.add('revealed');
          tappedThumb.classList.remove('notif-thumb-blurred');
          const img = tappedThumb.querySelector('img');
          if (img && img.dataset.origSrc) {
            img.src = img.dataset.origSrc;
            delete img.dataset.origSrc;
          }
          return;
        }
      }

      const link = e.target.closest('.notif-item');
      if (!link) return;


      // Handle "Mark as Read"
      if (link.dataset.id && link.classList.contains('unread')) {
        window.f0ckDebug(`[NotificationSystem] Marking ${link.dataset.id} as read...`);
        // Fire and forget (keepalive ensures it survives navigation)
        fetch(`/api/notifications/${link.dataset.id}/read`, {
          method: 'POST',
          keepalive: true
        }).catch(err => console.error("Failed to mark read", err));

        // Decrement badge count
        if (this.countBadge) {
          let count = parseInt(this.countBadge.textContent) || 0;
          if (count > 0) {
            count--;
            this.countBadge.textContent = count;
            if (count === 0) {
              this.countBadge.style.display = 'none';
            }
          }
        }

        // Optimistically mark as read in UI
        link.classList.remove('unread');
      }

      // On the full history page: just mark as read + navigate — don't remove from list
      const isHistoryPage = !!link.closest('.notifications-list-full');

      if (!isHistoryPage) {
        // Dropdown: fade out and remove the item
        link.classList.add('notif-fade-out');
        setTimeout(() => {
          const list = link.closest('.notif-list');
          link.remove();
          if (list && list.children.length === 0) {
            list.innerHTML = `<div class="notif-empty">${window.f0ckI18n?.no_notifications || 'No new notifications'}</div>`;
          }
        }, 300);

        // Close the dropdown
        this.close();
      }

      // Handle Navigation (SPA)
      const href = link.getAttribute('href');
      if (href && href !== '#') {
        e.preventDefault();

        // Immediately restore scrollability and hide modals for better UX
        if (window.resetGlobalScrollState) window.resetGlobalScrollState();
        if (window.hideAllModals) window.hideAllModals();

        // Close dropdown
        if (this.isOpen) this.close();

        // Check if we are already on the target page
        // href format: /123 or /123#c456
        const [targetPath, targetHash] = href.split('#');
        const isAdmin = !!targetPath.match(/^\/admin/);
        const isMod = !!targetPath.match(/^\/mod/);

        if (targetPath === window.location.pathname && !isAdmin && !isMod) {
          if (targetHash) {
            const commentId = targetHash.startsWith('c') ? targetHash.substring(1) : (targetHash.startsWith('#c') ? targetHash.substring(2) : null);
            if (commentId && window.commentSystem) {
              window.commentSystem.scrollToComment(commentId);
              
              // scrollToComment handles scrolling + comment-highlighted
              // No need to re-apply new-item-fade here (would restart the animation)

              // Update URL hash without reload
              history.pushState(null, null, href);
              return; // Skip AJAX load
            }
          }
        }

        if (typeof window.loadItemAjax === 'function' && (href.match(/^\/\d+/) || href.match(/^\/[a-zA-Z0-9_-]{11}(?:[?#]|$)/) || href.match(/\/(?:user|tag|h)\/.*?\/(?:\d+|[a-zA-Z0-9_-]{11})/))) {
          window.loadItemAjax(href, false);
        } else if (typeof window.loadPageAjax === 'function') {
          window.loadPageAjax(href, true);
        } else {
          window.location.href = href;
        }
      } else {
        e.preventDefault();
      }
    };

    // Attach to dropdown list
    if (this.list) {
      this.list.addEventListener('click', handleNotificationClick);
    }

    // Attach to global document (for History Page items)
    // We filter for .notif-item inside the handler
    // Note: We avoid double-handling if clicking inside dropdown (stopPropagation wouldn't help if we attach to doc)
    // So we check container.
    document.addEventListener('click', (e) => {
      const item = e.target.closest('.notif-item');
      if (item) {
        // If it's inside dropdown, we already handled it via this.list listener? 
        // Actually, let's just use ONE document listener for complexity reduction.
        // BUT this.list listener is scoped to the class instance (good).

        // Let's just catch .notifications-list-full clicks here
        if (item.closest('.notifications-list-full')) {
          handleNotificationClick(e);
        }
      }
    });

    // Hover src-swap: show sharp thumbnail on hover, restore blur on mouseout
    const _notifThumbHoverIn = (e) => {
      const thumb = e.target.closest('.notif-thumb.notif-thumb-blurred');
      if (!thumb || thumb.classList.contains('revealed')) return;
      const img = thumb.querySelector('img');
      if (img && img.dataset.origSrc) img.src = img.dataset.origSrc;
    };
    const _notifThumbHoverOut = (e) => {
      const thumb = e.target.closest('.notif-thumb.notif-thumb-blurred');
      if (!thumb || thumb.classList.contains('revealed')) return;
      const img = thumb.querySelector('img');
      if (img && img.dataset.origSrc) {
        const idMatch = img.dataset.origSrc.match(/\/t\/(\d+)\.webp/);
        if (idMatch) img.src = `/t/${idMatch[1]}_blur.webp`;
      }
    };
    document.addEventListener('mouseover', _notifThumbHoverIn);
    document.addEventListener('mouseout', _notifThumbHoverOut);

    // Close on clicking 'View all' or 'Manage subscriptions'
    this.dropdown.querySelectorAll('a').forEach(link => {
      link.addEventListener('click', () => {
        this.dropdown.classList.remove('visible');
      });
    });
  }

  async poll() {
    if (document.hidden) return; // Do not poll if tab is backgrounded
    try {
      const res = await fetch('/api/notifications');
      const data = await res.json();
      if (data.success) {
        this.updateUI(data.notifications);
      }
    } catch (e) {
      // Silently ignore JSON parse errors during poll (often happens if server is restarting or returning HTML error)
      if (!(e instanceof SyntaxError)) {
        console.error('Notification poll error', e);
      }
    }
  }

  async checkForNewItems() {
    // Only check if we are on a grid page
    const grid = document.querySelector('.posts');
    if (!grid) return;

    // Skip for random mode as 'newest' doesn't apply
    if (document.cookie.includes('random_mode=1') || window.location.search.includes('random=1')) return;

    // Get max ID in the current grid
    const thumbs = Array.from(grid.querySelectorAll('a.thumb, a.lazy-thumb'));
    if (thumbs.length === 0) return;

    const ids = thumbs.map(t => {
      const match = t.getAttribute('href').match(/\/(\d+)$/);
      return match ? parseInt(match[1]) : 0;
    }).filter(id => id > 0);

    if (ids.length === 0) return;
    const maxId = Math.max(...ids);

    window.f0ckDebug(`[NotificationSystem] Checking for items newer than ${maxId}...`);

    try {
      // Build filters from URL
      const url = window.location.pathname;
      let tag = null, user = null, mime = null, hall = null;
      let userHall = null, userHallOwner = null;
      let isFav = false;

      const tagMatch = url.match(/\/tag\/([^/?]+)/);
      if (tagMatch) tag = decodeURIComponent(tagMatch[1]);
      const hallMatch = url.match(/\/h\/([^/?]+)/);
      if (hallMatch) hall = decodeURIComponent(hallMatch[1]);

      // Detect user-hall pages: /user/<owner>/hall/<slug>
      // Must be checked BEFORE the generic user match so we don't pollute `user`
      const userHallMatch = url.match(/\/user\/([^/]+)\/hall\/([^/?]+)/);
      if (userHallMatch) {
        userHallOwner = decodeURIComponent(userHallMatch[1]);
        userHall = decodeURIComponent(userHallMatch[2]);
      } else {
        const userMatch = url.match(/\/user\/([^/]+)/);
        if (userMatch && !url.match(/\/user\/[^/]+\/(favs|f0cks|comments|halls?)/)) user = decodeURIComponent(userMatch[1]);
        const favMatch = url.match(/\/user\/([^/]+)\/favs/);
        const f0cksMatch = url.match(/\/user\/([^/]+)\/f0cks/);
        if (favMatch) {
          user = decodeURIComponent(favMatch[1]);
          isFav = true;
        } else if (f0cksMatch) {
          user = decodeURIComponent(f0cksMatch[1]);
        }
      }
      const mimeMatch = url.match(/\/(image|audio|video)/);
      if (mimeMatch) mime = mimeMatch[1];

      let ajaxUrl = `/ajax/items/?newer=${maxId}&mode=${window.activeMode}`;
      if (tag) ajaxUrl += `&tag=${encodeURIComponent(tag)}`;
      if (hall) ajaxUrl += `&hall=${encodeURIComponent(hall)}`;
      if (userHall) ajaxUrl += `&userHall=${encodeURIComponent(userHall)}&userHallOwner=${encodeURIComponent(userHallOwner)}`;
      if (user) ajaxUrl += `&user=${encodeURIComponent(user)}`;
      if (isFav) ajaxUrl += `&fav=true`;
      if (mime) ajaxUrl += `&mime=${encodeURIComponent(mime)}`;

      const isStrict = window.f0ckSession?.strict_mode || (localStorage.getItem('search_strict') === 'true') || window.location.search.includes('strict=1');
      if (isStrict) ajaxUrl += `&strict=1`;
      ajaxUrl += `&_t=${Date.now()}`;

      const res = await fetch(ajaxUrl, { headers: { 'X-Requested-With': 'XMLHttpRequest' } });
      const data = await res.json();

      if (data.success && data.html) {
        window.f0ckDebug(`[NotificationSystem] Loaded new items for grid.`);
        const temp = document.createElement('div');
        temp.innerHTML = Sanitizer.clean(data.html);
        
        // Items are returned in desc order, so we reverse them to prepend one by one?
        // Actually, if we prepend the whole block, the block itself should be descending.
        // If block is [3, 2] and grid is [1], prepending block results in [3, 2, 1]. Correct.
        
        // We should skip items that are already in the grid (duplicates)
        const entries = Array.from(temp.querySelectorAll('a.thumb, a.lazy-thumb'));
        entries.reverse().forEach(entry => {
          const idMatch = entry.href.match(/\/(\d+)$/);
          if (idMatch && !grid.querySelector(`a[href$="/${idMatch[1]}"]`)) {
             const pinnedItems = grid.querySelectorAll('.is-pinned');
             if (pinnedItems.length > 0) {
               pinnedItems[pinnedItems.length - 1].after(entry);
             } else {
               grid.prepend(entry);
             }
             // Animate in
             entry.style.opacity = '0';
             entry.style.transform = 'scale(0.9)';
             requestAnimationFrame(() => {
               entry.style.transition = 'opacity 0.4s ease, transform 0.4s ease';
               entry.style.opacity = '1';
               entry.style.transform = 'scale(1)';
             });
          }
        });

        if (window.initLazyLoading) window.initLazyLoading();
      }
    } catch (e) {
      console.error('[NotificationSystem] Failed to check for new items', e);
    }
  }

  updateUI(notifications) {
    if (!this.countBadge || !this.list) return;

    // Split into user and system categories
    this._cachedUser = notifications.filter(n => NotificationSystem.USER_TYPES.includes(n.type));
    this._cachedSystem = notifications.filter(n => NotificationSystem.SYSTEM_TYPES.includes(n.type));

    const userUnread = this._cachedUser.filter(n => !n.is_read).length;
    const systemUnread = this._cachedSystem.filter(n => !n.is_read).length;
    const totalUnread = userUnread + systemUnread;

    // Update main bell badge (total unread)
    if (totalUnread > 0) {
      this.countBadge.textContent = totalUnread;
      this.countBadge.style.display = 'block';
    } else {
      this.countBadge.style.display = 'none';
    }

    // Update per-tab badges
    const userBadge = document.getElementById('notif-tab-badge-user');
    const systemBadge = document.getElementById('notif-tab-badge-system');
    if (userBadge) {
      userBadge.textContent = userUnread;
      userBadge.style.display = userUnread > 0 ? '' : 'none';
    }
    if (systemBadge) {
      systemBadge.textContent = systemUnread;
      systemBadge.style.display = systemUnread > 0 ? '' : 'none';
    }

    // Forward count to Abyss scroller notification badge if active
    if (typeof window._scrollerNotifHook === 'function') {
      window._scrollerNotifHook(totalUnread);
    }

    // Sync .has-notif highlights on main grid thumbnails for all unread notifications.
    const currentPath = window.location.pathname;
    const unreadItemIds = new Set();
    notifications.forEach(n => {
      if (!n.is_read && n.item_id) {
        unreadItemIds.add(String(n.item_id));
        if (currentPath === `/${n.item_id}` || currentPath === `/${n.item_id}/`) return;
        document.querySelectorAll(`a.thumb[href$="/${n.item_id}"], a.lazy-thumb[href$="/${n.item_id}"]`).forEach(el => {
          el.classList.add('has-notif');
        });
      }
    });

    // Remove .has-notif from any thumb whose item is no longer in the unread set.
    document.querySelectorAll('a.thumb.has-notif, a.lazy-thumb.has-notif').forEach(el => {
      const match = el.getAttribute('href')?.match(/\/(\d+)$/);
      if (match && !unreadItemIds.has(match[1])) {
        el.classList.remove('has-notif');
      }
    });

    // Render the active tab
    this._renderActiveTab();

    // Notify URL upload tracker widget about completed/failed background uploads
    const bgUploads = notifications.filter(n => n.type === 'upload_success' || n.type === 'upload_error');
    if (bgUploads.length > 0) {
      document.dispatchEvent(new CustomEvent('f0ck:upload_bg_update', { detail: bgUploads }));
    }

    // Live update for History Page
    const historyContainer = document.querySelector('.notifications-list-full');
    if (historyContainer) {
      const historyTab = historyContainer.dataset.tab || 'user';
      const tabNotifs = historyTab === 'system' ? this._cachedSystem : this._cachedUser;
      tabNotifs.forEach(n => {
        const existing = historyContainer.querySelector(`.notif-item[data-id="${n.id}"]`);
        if (!existing) {
          window.f0ckDebug("[NotificationSystem] Adding new item to history:", n.id);
          const html = this.renderHistoryItem(n);
          const temp = document.createElement('div');
          temp.innerHTML = Sanitizer.clean(html);
          const node = temp.firstElementChild;
          node.classList.add('new-item-fade');
          historyContainer.prepend(node);
        } else {
          window.f0ckDebug("[NotificationSystem] Item already exists:", n.id);
        }
      });
    }
  }

  _renderActiveTab() {
    if (!this.list) return;
    const items = this.activeTab === 'system' ? this._cachedSystem : this._cachedUser;
    if (items.length === 0) {
      this.list.innerHTML = `<div class="notif-empty">${window.f0ckI18n?.no_notifications || 'No new notifications'}</div>`;
      return;
    }
    this.list.innerHTML = Sanitizer.clean(items.map(n => this.renderItem(n)).join(''));
    if (window.applyNotifThumbBlur) window.applyNotifThumbBlur(this.list);
  }

  renderHistoryItem(n) {
    const itemKey = n.item_slug || n.slug || n.item_id;
    let link = `/${itemKey}`;
    let msg = '';
    let user = n.from_display_name || n.from_user || 'System';

    if (n.type === 'deny' || n.type === 'item_deleted') {
      const i18n = window.f0ckI18n || {};
      const isDeleted = n.type === 'item_deleted';
      const label = isDeleted ? (i18n.notif_upload_deleted || 'A moderator deleted your upload') : (i18n.notif_upload_denied || 'Your Upload was denied');
      const userLabel = isDeleted ? (i18n.notif_moderation || 'Moderation') : (i18n.notif_system || 'System');
      const itemLink = `/${itemKey}`;
      return `
        <a href="${itemLink}" class="notif-item ${n.is_read ? '' : 'unread'} notif-with-thumb" data-id="${n.id}">
            <div class="notif-thumb"${n.item_mode ? ` data-mode="${n.item_mode}"` : ''}><img src="/mod/deleted/t/${n.item_id}.webp" alt="thumb" onerror="this.onerror=null;this.src='/t/${n.item_id}.webp';this.onerror=function(){this.style.display='none';}"></div>
            <div class="notif-content">
                <div class="notif-user"><strong>${userLabel}</strong></div>
                <div class="notif-msg">
                    <strong>${label} #${itemKey}</strong>
                    <div class="notif-reason">${i18n.notif_reason_label || 'Reason:'} ${n.reason || (i18n.notif_no_reason || 'No reason provided')}</div>
                </div>
                <div class="notif-time">${new Date(n.created_at).toLocaleString()}</div>
            </div>
        </a>
      `;
    }

    if (n.type === 'approve') {
      msg = (window.f0ckI18n && window.f0ckI18n.notif_upload_approved) || 'Your Upload has been approved';
      user = (window.f0ckI18n && window.f0ckI18n.notif_system) || 'System';
    } else if (n.type === 'upload_success') {
      msg = (window.f0ckI18n && window.f0ckI18n.notif_upload_success) || 'Your background upload is finished!';
      user = (window.f0ckI18n && window.f0ckI18n.notif_system) || 'System';
    } else if (n.type === 'upload_error') {
      msg = (window.f0ckI18n && window.f0ckI18n.notif_upload_error) || 'Your background upload failed.';
      if (n.data?.msg) msg += ` <br><span style="color: #ff6060; font-size: 0.9em;">${n.data.msg}</span>`;
      if (n.data?.url) msg += ` <br><small style="opacity: 0.6; word-break: break-all;">${n.data.url}</small>`;
      user = (window.f0ckI18n && window.f0ckI18n.notif_system) || 'System';
      link = n.item_id ? `/${itemKey}` : '#';
    } else if (n.type === 'admin_pending') {
      link = '/mod/approve';
      user = (window.f0ckI18n && window.f0ckI18n.notif_admin) || 'Admin';
      msg = (window.f0ckI18n && window.f0ckI18n.notif_upload_pending) || 'A new upload needs approval';
    } else if (n.type === 'report') {
      link = '/mod/reports';
      user = (window.f0ckI18n && window.f0ckI18n.notif_moderation) || 'Moderator';
      msg = (window.f0ckI18n && window.f0ckI18n.notif_new_report) || 'A new user report has been submitted';
    } else if (n.type === 'warning') {
      link = `/notifications?tab=system#notif-${n.id}`;
      user = (window.f0ckI18n && window.f0ckI18n.notif_system) || 'System';
      msg = (window.f0ckI18n && window.f0ckI18n.account_warning && window.f0ckI18n.account_warning.title) || 'Account Warning';
      if (n.reason) msg += `<br><div class="notif-reason" style="font-size: 0.85em; color: #ffb8b8; margin-top: 3px;">${n.reason}</div>`;
    } else {
      // Comment notification
      link = `/${itemKey}#c${n.comment_id || n.reference_id}`;
      if (n.type === 'comment_reply') msg = (window.f0ckI18n && window.f0ckI18n.notif_replied) || 'replied to you';
      else if (n.type === 'subscription') msg = (window.f0ckI18n && window.f0ckI18n.notif_subscribed) || 'commented in a thread you follow';
      else if (n.type === 'mention') msg = (window.f0ckI18n && window.f0ckI18n.notif_mentioned) || 'highlighted you';
      else msg = (window.f0ckI18n && window.f0ckI18n.notif_commented) || 'commented';
    }

    // For admin_pending the thumbnail lives in /mod/pending/t/ until approved
    let thumbSrc, thumbOnerror;
    if (n.type === 'warning') {
      return `
        <div class="notif-item ${n.is_read ? '' : 'unread'} notif-with-thumb" data-id="${n.id}">
            <div class="notif-thumb" style="display:flex;align-items:center;justify-content:center;background:var(--bg-lighter);color:var(--danger);font-size:1.5em;"><i class="fa-solid fa-triangle-exclamation"></i></div>
            <div class="notif-content">
              <div class="notif-user"><strong ${n.username_color ? `style="color: ${n.username_color}"` : ''}>${user}</strong></div>
              <div class="notif-msg">${msg}</div>
              <div class="notif-time">${new Date(n.created_at).toLocaleString()}</div>
            </div>
        </div>
      `;
    } else if (n.type === 'admin_pending') {
      thumbSrc = `/mod/pending/t/${n.item_id}.webp`;
      thumbOnerror = `this.onerror=null;this.src='/t/${n.item_id}.webp';this.onerror=function(){this.style.display='none';}`;
    } else {
      thumbSrc = `/t/${n.item_id}.webp`;
      thumbOnerror = `this.onerror=null;this.src='/mod/pending/t/${n.item_id}.webp';this.onerror=function(){this.onerror=null;this.src='/mod/deleted/t/${n.item_id}.webp';this.onerror=function(){this.style.display='none';};}`;
    }
    const thumb = n.item_id ? `<div class="notif-thumb"${n.item_mode ? ` data-mode="${n.item_mode}"` : ''}><img src="${thumbSrc}" alt="thumb" onerror="${thumbOnerror}"></div>` : '';
    return `
      <a href="${link}" class="notif-item ${n.is_read ? '' : 'unread'} notif-with-thumb" data-id="${n.id}">
          ${thumb}
          <div class="notif-content">
            <div class="notif-user"><strong ${n.username_color ? `style="color: ${n.username_color}"` : ''}>${user}</strong></div>
            <div class="notif-msg">${msg}</div>
            <div class="notif-time">${new Date(n.created_at).toLocaleString()}</div>
          </div>
      </a>
    `;
  }

  renderItem(n) {
    const itemKey = n.item_slug || n.slug || n.item_id;
    if (n.type === 'approve') {
      const link = `/${itemKey}`;
      return `
            <a href="${link}" class="notif-item ${n.is_read ? '' : 'unread'} notif-with-thumb" data-id="${n.id}">
                <div class="notif-thumb"${n.item_mode ? ` data-mode="${n.item_mode}"` : ''}><img src="/t/${n.item_id}.webp" alt="thumb" onerror="this.onerror=null;this.src='/mod/pending/t/${n.item_id}.webp';this.onerror=function(){this.onerror=null;this.src='/mod/deleted/t/${n.item_id}.webp';this.onerror=function(){this.style.display='none';};}"></div>
                <div class="notif-content">
                    <div>
                    <strong>${(window.f0ckI18n && window.f0ckI18n.notif_upload_approved) || 'Your Upload has been approved'}</strong>
                    </div>
                    <small class="notif-time">${new Date(n.created_at).toLocaleString()}</small>
                </div>
            </a>
        `;
    }

    if (n.type === 'upload_success') {
        const link = `/${itemKey}`;
        return `
            <a href="${link}" class="notif-item ${n.is_read ? '' : 'unread'} notif-with-thumb" data-id="${n.id}">
                <div class="notif-thumb"${n.item_mode ? ` data-mode="${n.item_mode}"` : ''}><img src="/t/${n.item_id}.webp" alt="thumb" onerror="this.style.display='none';"></div>
                <div class="notif-content">
                    <div>
                    <strong>${(window.f0ckI18n && window.f0ckI18n.notif_upload_success) || 'Your background upload is finished!'}</strong>
                    </div>
                    <small class="notif-time">${new Date(n.created_at).toLocaleString()}</small>
                </div>
            </a>
        `;
    }

    if (n.type === 'upload_error') {
        const url = n.data?.url || '';
        const errMsg = n.data?.msg || '';
        const errDisplay = errMsg ? `<div style="color: #ffbaba; font-size: 0.85em; margin-top: 2px;">${errMsg}</div>` : '';
        const urlDisplay = url ? `<div style="font-size: 0.8em; opacity: 0.7; margin-top: 4px; word-break: break-all; max-height: 3.2em; overflow: hidden;">${url}</div>` : '';
        const link = n.item_id ? `/${itemKey}` : '#';
        return `
            <a href="${link}" class="notif-item ${n.is_read ? '' : 'unread'}" data-id="${n.id}">
                <div class="notif-content">
                    <div>
                    <strong>${(window.f0ckI18n && window.f0ckI18n.notif_upload_error) || 'Your background upload failed.'}</strong>
                    ${errDisplay}
                    ${urlDisplay}
                    </div>
                    <small class="notif-time">${new Date(n.created_at).toLocaleString()}</small>
                </div>
            </a>
        `;
    }

    if (n.type === 'deny' || n.type === 'item_deleted') {
      const isDeleted = n.type === 'item_deleted';
      const label = isDeleted ? ((window.f0ckI18n && window.f0ckI18n.notif_upload_deleted) || 'A moderator deleted your upload') : ((window.f0ckI18n && window.f0ckI18n.notif_upload_denied) || 'Your upload was denied');
      const link = `/notifications#notif-${n.id}`;
      return `
            <a href="${link}" class="notif-item ${n.is_read ? '' : 'unread'} notif-with-thumb" data-id="${n.id}" data-notif-nav="true">
                <div class="notif-thumb"${n.item_mode ? ` data-mode="${n.item_mode}"` : ''}><img src="/mod/deleted/t/${n.item_id}.webp" alt="thumb" onerror="this.onerror=null;this.src='/t/${n.item_id}.webp';this.onerror=function(){this.style.display='none';}"></div>
                <div class="notif-content">
                    <div>
                        <strong>${label} #${itemKey}</strong>
                        <div style="font-size: 0.85em; color: #ffb8b8; margin-top: 3px;">${(window.f0ckI18n && window.f0ckI18n.notif_click_reason) || 'Click to see reason'}</div>
                    </div>
                    <small class="notif-time">${new Date(n.created_at).toLocaleString()}</small>
                </div>
            </a>
        `;
    }

    if (n.type === 'admin_pending') {
      const link = '/mod/approve';
      return `
            <a href="${link}" class="notif-item ${n.is_read ? '' : 'unread'} notif-with-thumb" data-id="${n.id}">
                <div class="notif-thumb"${n.item_mode ? ` data-mode="${n.item_mode}"` : ''}><img src="/mod/pending/t/${n.item_id}.webp" alt="thumb" onerror="this.onerror=null;this.src='/t/${n.item_id}.webp';this.onerror=function(){this.style.display='none';}"></div>
                <div class="notif-content">
                    <div>
                        <strong>${(window.f0ckI18n && window.f0ckI18n.notif_upload_pending) || 'A new upload needs approval'}</strong>
                    </div>
                    <small class="notif-time">${new Date(n.created_at).toLocaleString()}</small>
                </div>
            </a>
        `;
    }

    if (n.type === 'report') {
      const link = '/mod/reports';
      return `
            <a href="${link}" class="notif-item ${n.is_read ? '' : 'unread'} notif-with-thumb" data-id="${n.id}">
                <div class="notif-thumb"${n.item_mode ? ` data-mode="${n.item_mode}"` : ''}><img src="/t/${n.item_id}.webp" alt="thumb" onerror="this.onerror=null;this.src='/mod/pending/t/${n.item_id}.webp';this.onerror=function(){this.onerror=null;this.src='/mod/deleted/t/${n.item_id}.webp';this.onerror=function(){this.style.display='none';};}"></div>
                <div class="notif-content">
                    <div>
                        <strong>${(window.f0ckI18n && window.f0ckI18n.notif_new_report) || 'A new user report has been submitted'}</strong>
                    </div>
                    <small class="notif-time">${new Date(n.created_at).toLocaleString()}</small>
                </div>
            </a>
        `;
    }

    if (n.type === 'warning') {
      const link = `/notifications?tab=system#notif-${n.id}`;
      return `
            <a href="${link}" class="notif-item ${n.is_read ? '' : 'unread'} notif-with-thumb" data-id="${n.id}" data-notif-nav="true">
                <div class="notif-thumb" style="display:flex;align-items:center;justify-content:center;background:var(--bg-lighter);color:var(--danger);font-size:1.5em;"><i class="fa-solid fa-triangle-exclamation"></i></div>
                <div class="notif-content">
                    <div>
                        <strong>${(window.f0ckI18n && window.f0ckI18n.account_warning && window.f0ckI18n.account_warning.title) || 'Account Warning'}</strong>
                        <div style="font-size: 0.85em; color: #ffb8b8; margin-top: 3px;">${n.reason || 'No reason provided'}</div>
                    </div>
                    <small class="notif-time">${new Date(n.created_at).toLocaleString()}</small>
                </div>
            </a>
        `;
    }

    let typeText = 'Start';
    if (n.type === 'comment_reply') typeText = (window.f0ckI18n && window.f0ckI18n.notif_replied) || 'replied to you';
    else if (n.type === 'subscription') typeText = (window.f0ckI18n && window.f0ckI18n.notif_subscribed) || 'commented in a thread you follow';
    else if (n.type === 'mention') typeText = (window.f0ckI18n && window.f0ckI18n.notif_mentioned) || 'highlighted you';
    else if (n.type === 'upload_comment') typeText = `${(window.f0ckI18n && window.f0ckI18n.notif_commented) || 'commented on your upload'} #${itemKey}`;

    const cid = n.comment_id || n.reference_id;
    const link = `/${itemKey}#c${cid}`;

      const thumb = n.item_id ? `<div class="notif-thumb"${n.item_mode ? ` data-mode="${n.item_mode}"` : ''}><img src="/t/${n.item_id}.webp" alt="thumb" onerror="this.style.display='none'"></div>` : '';
      return `
            <a href="${link}" class="notif-item ${n.is_read ? '' : 'unread'} notif-with-thumb" data-id="${n.id}">
                ${thumb}
                <div class="notif-content">
                    <div>
                        <strong ${n.username_color ? `style="color: ${n.username_color}"` : ''}>${escHTML(n.from_display_name || n.from_user)}</strong> ${typeText}
                    </div>
                    <small class="notif-time">${new Date(n.created_at).toLocaleString()}</small>
                </div>
            </a>
        `;
  }


  async markAllRead() {
    try {
      const res = await fetch('/api/notifications/read', { 
        method: 'POST',
        headers: { 'X-CSRF-Token': window.f0ckSession?.csrf_token }
      });
      const data = await res.json();
      if (data.success) {
        this.markAllReadUI();
      }
    } catch (e) {
      console.error('Failed to mark all read', e);
    }
  }

  markAllReadUI() {
    this.countBadge.style.display = 'none';
    // Clear per-tab badges
    const userBadge = document.getElementById('notif-tab-badge-user');
    const systemBadge = document.getElementById('notif-tab-badge-system');
    if (userBadge) userBadge.style.display = 'none';
    if (systemBadge) systemBadge.style.display = 'none';
    // Clear cached data
    this._cachedUser = [];
    this._cachedSystem = [];
    if (this.list) {
      this.list.innerHTML = `<div class="notif-empty">${window.f0ckI18n?.no_notifications || 'No new notifications'}</div>`;
    }
    // Also update History page items if present
    document.querySelectorAll('.notifications-list-full .notif-item.unread').forEach(el => el.classList.remove('unread'));
  }

  handleTagsUpdate(data) {
    if (!data || !data.item_id) {
      console.warn("[NotificationSystem] Malformed tag update data:", data);
      return;
    }

    if (window.invalidateItemCache) {
      window.invalidateItemCache(data.item_id);
    }

    // Check if we are currently viewing this item
    const currentIdStr = window.getCurrentItemId();
    const currentId = currentIdStr ? parseInt(currentIdStr, 10) : null;

    window.f0ckDebug(`[NotificationSystem] Processing tag update for #${data.item_id}. Current view is #${currentId}`);

    if (currentId !== parseInt(data.item_id)) {
      window.f0ckDebug("[NotificationSystem] Item ID mismatch, ignoring update.");
      return;
    }

    // Ignore incoming live SSE tag updates if an optimistic rating cycle is currently active on the page
    const toggleBtn = document.querySelector('button#a_toggle, .rating-tag');
    const hasPendingDebounce = !!(window._ratingDebounceTimers && window._ratingDebounceTimers[data.item_id]);
    if (hasPendingDebounce || (window._activeRatingCycleRequestsCount > 0) || (toggleBtn && toggleBtn._activeRequestsCount > 0)) {
      window.f0ckDebug("[NotificationSystem] Live Tag Update ignored - Optimistic rating cycle in progress.");
      return;
    }

    const tagsContainer = document.querySelector('#tags');
    if (!tagsContainer) {
      console.warn("[NotificationSystem] #tags container not found!");
      return;
    }

    // DO NOT re-render if the user is currently typing a new tag (has an active input)
    if (tagsContainer.querySelector('input')) {
      window.f0ckDebug("[NotificationSystem] Live Tag Update deferred - User is currently typing.");
      return;
    }

    window.f0ckDebug("[NotificationSystem] Re-rendering tags for item:", data.item_id);

    const inner = tagsContainer.querySelector('.tags-inner') || tagsContainer;

    // Filter out existing badges to replace with new ones
    // We keep the "add tag" and "toggle" links which are usually at the end
    const badges = inner.querySelectorAll('.badge');
    badges.forEach(b => {
      // Don't remove the container for addtag, nor the rating switch toggles
      if (!b.querySelector('#a_addtag') && !b.querySelector('#a_toggle') && !b.id && !b.classList.contains('tag-ac-wrapper')) {
        b.remove();
      }
    });

    // Generate new tags HTML
    if (Array.isArray(data.tags)) {
      // Cast to boolean to handle potentially numeric truthy values (1/0)
      const isAnonymized = !!(window.f0ckSession?.is_anonymized ?? (window.f0ckSession?.guest_anonymize && !window.f0ckSession?.logged_in) ?? window.f0ckSession?.is_anon);
      const isAdminBySession = !isAnonymized && !!(window.f0ckSession?.is_admin || window.f0ckSession?.is_moderator);
      const hasSession = !isAnonymized && !!(window.f0ckSession && window.f0ckSession.logged_in && !window.f0ckSession.is_anon);
      const canManageItem = !!(
        document.querySelector('#tags[data-can-manage="true"]') ||
        isAdminBySession ||
        (!isAnonymized && window.f0ckSession && window.f0ckSession.user && document.querySelector('#a_username[data-username]')?.dataset?.username?.toLowerCase() === window.f0ckSession.user.toLowerCase())
      );

      // Deduplicate rating tags: guarantee at most one rating tag is kept
      const ratingTags = data.tags.filter(t => ['sfw', 'nsfw', 'nsfl'].includes(t.normalized));
      const lastRatingTag = ratingTags.length ? ratingTags[ratingTags.length - 1] : null;
      const cleanTags = data.tags.filter(t => !['sfw', 'nsfw', 'nsfl'].includes(t.normalized) || t === lastRatingTag);

      window.f0ckDebug(`[NotificationSystem] Rendering ${cleanTags.length} tags. isAdmin: ${isAdminBySession}, hasSession: ${hasSession}`);

      const fragment = document.createDocumentFragment();

      const hasRatingTag = !!lastRatingTag;
      if (!hasRatingTag) {
        const untaggedSpan = document.createElement('span');
        untaggedSpan.className = `badge badge-untagged rating-tag is-untagged${canManageItem ? ' can-cycle' : ''}`;
        untaggedSpan.dataset.rating = 'untagged';
        const lbl = document.createElement('span');
        lbl.className = 'rating-label';
        lbl.textContent = 'unrated';
        untaggedSpan.appendChild(lbl);
        fragment.appendChild(untaggedSpan);
      }

      cleanTags.forEach(tag => {
        const span = document.createElement('span');
        span.className = `badge ${tag.badge}`;
        const isRating = ['sfw', 'nsfw', 'nsfl'].includes(tag.normalized);
        if (isRating) {
          span.classList.add('rating-tag', `is-${tag.normalized}`);
          span.dataset.rating = tag.normalized;
          if (canManageItem) {
            span.classList.add('can-cycle');
          }
        } else if (hasSession && (tag.display_name || tag.user)) {
          span.setAttribute('tooltip', tag.display_name || tag.user);
        }

        let contentEl;
        if (isRating) {
          contentEl = document.createElement('span');
          contentEl.className = 'rating-label';
          contentEl.textContent = tag.tag;
          span.appendChild(contentEl);
        } else {
          span.classList.add('tag-badge');
          span.setAttribute('data-tag-id', tag.id);
          span.setAttribute('data-tag', tag.tag);
          span.setAttribute('data-tag-normalized', tag.normalized);
          const isExcl = Array.isArray(window.f0ckSession?.excluded_tags) && window.f0ckSession.excluded_tags.includes(tag.id);
          if (isExcl) span.classList.add('tag-is-excluded');

          contentEl = document.createElement('a');
          contentEl.href = `/tag/${tag.normalized}`;
          contentEl.className = 'tag-name';
          contentEl.textContent = tag.tag;
          span.appendChild(contentEl);

          const exclBtn = document.createElement('button');
          exclBtn.type = 'button';
          exclBtn.className = 'tag-exclude-btn';
          exclBtn.title = isExcl ? ((window.f0ckI18n && window.f0ckI18n.unexclude_tag) || 'Excluded (click to unexclude)') : ((window.f0ckI18n && window.f0ckI18n.exclude_tag) || 'Exclude tag');
          exclBtn.setAttribute('aria-label', 'Exclude tag');
          exclBtn.innerHTML = `<i class="fa-solid ${isExcl ? 'fa-circle-check' : 'fa-ban'}"></i>`;
          span.appendChild(exclBtn);
        }

        if (isAdminBySession && !isRating) {
          // Match template exactly: &nbsp;<a class="removetag admin-deltag" href="#"><i class="fa-solid fa-xmark"></i></a>
          span.insertAdjacentHTML('beforeend', '&nbsp;<a class="removetag admin-deltag" href="#"><i class="fa-solid fa-xmark"></i></a>');
        }
        fragment.appendChild(span);
      });
      
      // Insert before the first control button if it exists, or just append to inner
      const controls = inner.querySelector('.tag-controls, #a_addtag, .tag-btn');
      if (controls) {
          inner.insertBefore(fragment, controls);
      } else {
          inner.appendChild(fragment);
      }

      // Safeguard against duplicate rating tags in DOM
      const allRatingBadges = inner.querySelectorAll('.rating-tag, .badge-success, .badge-danger, .badge-nsfl, .badge-untagged, [data-rating]');
      if (allRatingBadges.length > 1) {
        for (let i = 1; i < allRatingBadges.length; i++) {
          allRatingBadges[i].remove();
        }
      }

      // Also update data-mode on grid thumbnail(s) so div.posts > a > p::before updates live
      const rTag = cleanTags.find(t => ['sfw', 'nsfw', 'nsfl'].includes(t.normalized));
      const sseMode = rTag ? rTag.normalized : 'null';
      document.querySelectorAll(`.posts > a.thumb[data-item-id="${data.item_id}"], .posts a[data-item-id="${data.item_id}"], .posts a[href$="/${data.item_id}"]`).forEach(th => {
        th.setAttribute('data-mode', sseMode);
      });
      if (document.body.classList.contains('onara-modal-open')) {
        const onaraThumb = document.querySelector('.posts > a.thumb.onara-active');
        if (onaraThumb && (onaraThumb.dataset.itemId === String(data.item_id) || onaraThumb.getAttribute('href')?.endsWith(`/${data.item_id}`))) {
          onaraThumb.setAttribute('data-mode', sseMode);
        }
      }

      // If this is a parent-level tags update (no subf0ck_id), persist the rating
      // into data-parent-rating so the album gallery can inherit it for unrated sub-items.
      if (!data.subf0ck_id && tagsContainer && rTag) {
        tagsContainer.dataset.parentRating = rTag.normalized;
      } else if (!data.subf0ck_id && tagsContainer) {
        delete tagsContainer.dataset.parentRating;
      }
    }
  }

  handleFavoritesUpdate(data) {
    if (!data || !data.item_id) return;

    if (window.invalidateItemCache) {
      window.invalidateItemCache(data.item_id);
    }

    // Check if we are currently viewing this item
    const currentIdStr = window.getCurrentItemId();
    if (!currentIdStr || parseInt(currentIdStr, 10) !== parseInt(data.item_id, 10)) return;

    const favsContainer = document.querySelector('#favs');
    if (!favsContainer) return;

    window.f0ckDebug("[NotificationSystem] Live Favorite Update for item:", data.item_id);

    // Sync the heart icon for the current user
    const currentUser = window.f0ckSession?.user?.toLowerCase();
    const currentLogin = (window.f0ckSession?.login || window.f0ckSession?.anon_login || '')?.toLowerCase();
    const currentUserId = window.f0ckSession?.id ? Number(window.f0ckSession.id) : null;
    const favoBtns = document.querySelectorAll('#a_favo');
    if (favoBtns.length && (currentUserId || currentUser)) {
      const isNowFav = Array.isArray(data.favs) && data.favs.some(f => {
        if (currentUserId && f.user_id && Number(f.user_id) === currentUserId) return true;
        const fUser = (f.user || '').toLowerCase();
        const fLogin = (f.login || '').toLowerCase();
        if (currentUser && currentUser !== 'anonymous' && (fUser === currentUser || fLogin === currentUser)) return true;
        if (currentLogin && (fUser === currentLogin || fLogin === currentLogin)) return true;
        return false;
      });
      favoBtns.forEach(favoBtn => {
        favoBtn.classList.toggle('fa-solid', isNowFav);
        favoBtn.classList.toggle('fa-regular', !isNowFav);
      });
    }

    if (!Array.isArray(data.favs) || data.favs.length === 0) {
      favsContainer.innerHTML = '';
      favsContainer.hidden = true;
      return;
    }

    // Build DOM nodes imperatively (avoids Sanitizer stripping inline border-color)
    const isAnonymized = !!(window.f0ckSession?.is_anonymized ?? (window.f0ckSession?.guest_anonymize && !window.f0ckSession?.logged_in) ?? (window.f0ckSession?.is_anon && window.f0ckSession?.anon_anonymize));
    const fragment = document.createDocumentFragment();
    data.favs.forEach(fav => {
      const isSelf = window.f0ckSession && (
        (window.f0ckSession.id && fav.user_id && Number(window.f0ckSession.id) === Number(fav.user_id)) ||
        (window.f0ckSession.user && fav.user && window.f0ckSession.user.toLowerCase() === fav.user.toLowerCase()) ||
        (window.f0ckSession.login && fav.login && window.f0ckSession.login.toLowerCase() === fav.login.toLowerCase())
      );
      const isFavAnon = fav.is_anon || fav.user === 'anonymous' || (typeof fav.user === 'string' && fav.user.startsWith('anon_'));

      if (fav.hide_fav_badge && !isSelf) {
        const a = document.createElement('a');
        a.className = 'ghost-fav';
        a.setAttribute('tooltip', '?');
        a.setAttribute('flow', 'up');
        a.style.cursor = 'default';

        const img = document.createElement('img');
        img.src = '/s/img/ghost_fav.svg';
        img.style.height = '32px';
        img.style.width = '32px';

        a.appendChild(img);
        fragment.appendChild(a);
      } else if (isAnonymized || isFavAnon) {
        const a = document.createElement('a');
        a.className = 'ghost-fav';
        a.setAttribute('tooltip', 'anonymous');
        a.setAttribute('flow', 'up');
        a.style.cursor = 'default';

        const img = document.createElement('img');
        img.src = '/a/default.png';
        img.style.height = '32px';
        img.style.width = '32px';

        a.appendChild(img);
        fragment.appendChild(a);
      } else {
        const avatarUrl = fav.avatar_file
          ? `/a/${fav.avatar_file}`
          : (fav.avatar ? `/t/${fav.avatar}.webp` : '/a/default.png');

        const a = document.createElement('a');
        a.href = `/user/${(fav.user || '').toLowerCase()}`;
        a.setAttribute('tooltip', fav.display_name || fav.user || 'anonymous');
        a.setAttribute('flow', 'up');

        const img = document.createElement('img');
        img.src = avatarUrl;
        img.style.height = '32px';
        img.style.width = '32px';
        if (fav.username_color) img.style.borderColor = fav.username_color;

        a.appendChild(img);
        fragment.appendChild(a);
      }
    });

    favsContainer.innerHTML = '';
    favsContainer.appendChild(fragment);
    favsContainer.hidden = false;
  }

  handleNewItem(data) {
    // Invalidate client-side caches so next/prev navigation knows about the new item
    if (typeof itemCacheMap !== 'undefined') itemCacheMap.clear();
    if (typeof gridCacheMap !== 'undefined') gridCacheMap.clear();

    const isFilteredView = window.location.pathname.includes('/tag/') || 
                           window.location.pathname.includes('/h/') || 
                           window.location.pathname.includes('/user/');

    // UPDATE ITEM VIEW NAVIGATION DYNAMICALLY
    const prevBtn = document.getElementById('prev');
    const nextBtn = document.getElementById('next');
    const isItemView = !!prevBtn || !!nextBtn;

    // #prev points to newer items (pagination.next). If it's disabled, we are at the newest item.
    if (isItemView && !isFilteredView && prevBtn && (prevBtn.getAttribute('href') === '#' || prevBtn.getAttribute('href') === '')) {
        let filtered = false;
        if (typeof window.activeMode !== 'undefined' && window.activeMode !== 3) {
            const nsflId = window.f0ckSession?.nsfl_tag_id || 3;
            if (window.activeMode === 0 && data.tag_id !== 1) filtered = true;
            else if (window.activeMode === 1 && data.tag_id !== 2) filtered = true;
            else if (window.activeMode === 4 && data.tag_id != nsflId) filtered = true;
            else if (window.activeMode === 2) filtered = true;
        }
        
        if (!filtered) {
            let nextUrl = `/${data.id}`;
            const path = window.location.pathname;
            const contextMatch = path.match(/^(.*\/)\d+\/?$/);
            if (contextMatch && contextMatch[1] !== '/') {
                nextUrl = `${contextMatch[1]}${data.id}`;
            }

            // Update main #prev arrow
            prevBtn.setAttribute('href', nextUrl);
            prevBtn.style.color = ''; // Remove #ccc

            // Update .nav-prev text links and icons
            document.querySelectorAll('.nav-prev').forEach(btn => {
                btn.setAttribute('href', nextUrl);
                btn.style.visibility = 'visible';
            });

            if (typeof schedulePrefetch === 'function') {
                schedulePrefetch(800);
            }
        }
    }

    // Only prepend to the grid on the main/index page
    const grid = document.querySelector('.posts');
    if (!grid) return;

    // Don't live-update on filtered views (tags, halls, users)
    if (isFilteredView) return;

    // Respect mode filter — but if this is the current user's own upload,
    // show a blurred "ghost" thumbnail so they know it was uploaded successfully
    // even though the active filter hides it from the grid.
    if (typeof window.activeMode !== 'undefined' && window.activeMode !== 3) { // 3 is ALL
      let filtered = false;
      let filterReason = '';
      if (window.activeMode === 0 && data.tag_id !== 1) { filtered = true; filterReason = 'SFW'; }       // SFW mode, item is not SFW
      else if (window.activeMode === 1 && data.tag_id !== 2) { filtered = true; filterReason = 'NSFW'; } // NSFW mode, item is not NSFW
      else if (window.activeMode === 4 && data.tag_id != window.f0ckSession?.nsfl_tag_id) { filtered = true; filterReason = 'NSFL'; } // NSFL mode
      else if (window.activeMode === 2) { filtered = true; filterReason = 'untagged'; }

      if (filtered) {
        // Check if this is the current user's own upload
        const sessionUser = (window.f0ckSession?.user || '').toLowerCase();
        const itemUser = (data.username || '').toLowerCase();
        const isOwnUpload = sessionUser && itemUser && sessionUser === itemUser;

        if (!isOwnUpload) return; // Silently drop as before for other users' uploads

        const itemKey = data.slug || data.id;

        // Don't add duplicates
        if (grid.querySelector(`a[href$="/${itemKey}"]`) || grid.querySelector(`a[href$="/${data.id}"]`)) return;

        // Determine the link prefix from existing items
        const firstThumb = grid.querySelector('a.thumb, a.lazy-thumb');
        const linkBase = firstThumb ? firstThumb.getAttribute('href').replace(/(\d+|[a-zA-Z0-9_-]{11})$/, '') : '/';

        // Build filter-reason label
        const i18n = window.f0ckI18n || {};
        const filterLabel = filterReason === 'SFW'    ? (i18n.filter_mode_sfw    || 'SFW filter active')
                          : filterReason === 'NSFW'   ? (i18n.filter_mode_nsfw   || 'NSFW filter active')
                          : filterReason === 'NSFL'   ? (i18n.filter_mode_nsfl   || 'NSFL filter active')
                          : (i18n.filter_mode_other   || 'Filter active');
        const ghostTitle = i18n.filtered_upload_title || 'Your upload';
        const ghostHint  = i18n.filtered_upload_hint  || 'Hidden by filter · click to view';

        const nsflId = window.f0ckSession?.nsfl_tag_id || 3;
        const mode = data.tag_id ? (data.tag_id === 1 ? 'sfw' : (data.tag_id === 2 ? 'nsfw' : (data.tag_id == nsflId ? 'nsfl' : 'null'))) : 'null';

        const ghost = document.createElement('a');
        ghost.href = `${linkBase}${itemKey}`;
        ghost.className = 'thumb lazy-thumb filtered-upload-ghost loaded';
        ghost.dataset.file = data.dest;
        ghost.dataset.mime = data.mime;
        ghost.dataset.user = data.display_name || data.username;
        ghost.dataset.mode = mode;
        ghost.style.setProperty('--thumb-bg', `url('/t/${data.id}.webp')`);
        ghost.style.opacity = '0';
        ghost.style.transform = 'scale(0.9)';
        ghost.innerHTML = `
          <div class="filtered-upload-ghost-label">
            <i class="fa-solid fa-eye-slash"></i>
          </div>`;

        const pinnedItems = grid.querySelectorAll('.is-pinned');
        if (pinnedItems.length > 0) {
          pinnedItems[pinnedItems.length - 1].after(ghost);
        } else {
          grid.prepend(ghost);
        }

        requestAnimationFrame(() => {
          ghost.style.transition = 'opacity 0.4s ease, transform 0.4s ease';
          ghost.style.opacity = '1';
          ghost.style.transform = 'scale(1)';
        });

        return; // Ghost injected — done
      }
    }

    const itemKey = data.slug || data.id;

    // Don't add duplicates
    if (grid.querySelector(`a[href$="/${itemKey}"]`) || grid.querySelector(`a[href$="/${data.id}"]`)) return;

    // Determine the link prefix from existing items
    const firstThumb = grid.querySelector('a.thumb, a.lazy-thumb');
    const linkBase = firstThumb ? firstThumb.getAttribute('href').replace(/(\d+|[a-zA-Z0-9_-]{11})$/, '') : '/';

    // Respect mode filter
    const nsflId = window.f0ckSession?.nsfl_tag_id || 3;
    const mode = data.tag_id ? (data.tag_id === 1 ? 'sfw' : (data.tag_id === 2 ? 'nsfw' : (data.tag_id == nsflId ? 'nsfl' : 'null'))) : 'null';

    const thumb = document.createElement('a');
    thumb.href = `${linkBase}${itemKey}`;
    thumb.className = 'thumb lazy-thumb';
    thumb.dataset.file = data.dest;
    thumb.dataset.mime = data.mime;
    thumb.dataset.user = data.display_name || data.username;
    thumb.dataset.ext = data.mime.split('/')[1].replace('youtube', 'yt').toUpperCase();
    thumb.dataset.mode = mode;
    thumb.dataset.bg = `/t/${data.id}.webp`;
    thumb.dataset.size = '1'; // New items start with no contributions → tier 1
    thumb.style.setProperty('--thumb-bg', `url('/t/${data.id}.webp')`);
    thumb.classList.add('loaded');
    thumb.style.transform = 'scale(0.9)';

    // Build thumb-indicators (matches server-rendered template structure)
    let indicatorsHtml = '';
    if (data.is_oc) indicatorsHtml += '<span class="oc-indicator anim">OC</span>';
    if (data.is_album && (data.album_count || 0) > 1) {
      indicatorsHtml += `<span class="album-indicator" title="Album: ${data.album_count} images"><i class="fa-solid fa-images"></i> ${data.album_count}</span>`;
    }
    thumb.innerHTML = `<div class="thumb-indicators">${indicatorsHtml}</div><div class="thumb-select-check"><i class="fa-solid fa-check"></i></div><p></p>`;

    // Apply pending notification highlight if notify SSE arrived before new_item
    if (this.pendingNotifIds.has(String(data.id))) {
      thumb.classList.add('has-notif');
      this.pendingNotifIds.delete(String(data.id));
    }

    const pinnedItems = grid.querySelectorAll('.is-pinned');
    if (pinnedItems.length > 0) {
      pinnedItems[pinnedItems.length - 1].after(thumb);
    } else {
      grid.prepend(thumb);
    }

    // Animate in
    requestAnimationFrame(() => {
      thumb.style.transition = 'opacity 0.4s ease, transform 0.4s ease';
      thumb.style.opacity = '1';
      thumb.style.transform = 'scale(1)';
    });

    // Refresh lazy loading for the newly added item
    if (typeof window.initLazyLoading === 'function') {
        window.initLazyLoading();
    }
  }

  handleActivity(data) {
    // Respect mode filter
    if (typeof window.activeMode !== 'undefined' && window.activeMode !== 3) { // 3 is ALL
      if (window.activeMode === 0 && data.tag_id !== 1) return; // SFW mode, item is not SFW
      if (window.activeMode === 1 && data.tag_id !== 2) return; // NSFW mode, item is not NSFW
      if (window.activeMode === 4 && data.tag_id != window.f0ckSession?.nsfl_tag_id) return;   // NSFL mode, item is not NSFL
      if (window.activeMode === 2) return; // Unrated mode, new uploads are never unrated
    }

    // 2. Dispatch for external listeners (e.g. sidebar-activity)
    document.dispatchEvent(new CustomEvent('f0ck:activityReceived', { detail: data }));

    // 3. Handle Activity Feed
    const activityContainer = document.getElementById('activity-container');
    if (activityContainer) {
      window.f0ckDebug("[NotificationSystem] New Activity:", data);
      const html = this.renderActivityItem(data);
      const temp = document.createElement('div');
      temp.innerHTML = Sanitizer.clean(html);
      const node = temp.firstElementChild;
      node.classList.add('new-item-fade');
      activityContainer.prepend(node);

      // Optional: Remove last item to keep list from growing forever if needed
    }
  }

  renderActivityItem(c) {
    const avatar = c.avatar_file ? `/a/${c.avatar_file}` : (c.avatar && c.avatar > 0 ? `/t/${c.avatar}.webp` : '/a/default.png');

    let content = c.body || '';

    if (typeof marked !== 'undefined') {
      try {
        // Pre-process (greentext, html escape) similar to comments.js
        let safe = content
          .replace(/&/g, "&amp;")
          .replace(/</g, "&lt;")
          .replace(/"/g, "&quot;")
          .replace(/'/g, "&#039;");

        const renderer = new marked.Renderer();
        renderer.blockquote = function (quote) {
          let text = (typeof quote === 'string') ? quote : (quote.text || '');
          text = text.replace(/<p>|<\/p>/g, '');
          return text.split('\n').map(line => {
            if (!line.trim()) return '';
            return `<span class="greentext">&gt;${line}</span><br>`;
          }).join('');
        };

        const siteOrigin = window.location.origin;
        renderer.link = function (href, title, text) {
          if (typeof href === 'object' && href !== null) {
            title = href.title; text = href.text || text; href = href.href;
          }
          if (!href) return text || '';
          const isExternal = href.startsWith('http://') || href.startsWith('https://');
          const isSameSite = href.startsWith(siteOrigin);
          const titleAttr = title ? ` title="${title}"` : '';

          let displayText = text;
          if (isSameSite && (text === href || text === href.replace(/^https?:\/\//, '') || text === href.replace(siteOrigin, ''))) {
            try {
              const url = new URL(href.startsWith('http') ? href : siteOrigin + (href.startsWith('/') ? '' : '/') + href);
              displayText = url.pathname + url.search + url.hash;
            } catch (e) {}
          }

          if (isExternal && !isSameSite) {
            return `<a href="${href}"${titleAttr} target="_blank" rel="noopener noreferrer">${displayText}</a>`;
          }
          return `<a href="${href}"${titleAttr}>${displayText}</a>`;
        };

        // Pre-process mentions before marked (skip greentext lines)
        const mentionStore = [];
        const mentionRegex = /(?<!\[)@([a-zA-Z0-9_\-\.]+)(?!\])|\[@([^\]]+)\]\(\/user\/([^)]+)\)|\[@([^\]]+)\]/g;

        safe = safe.split('\n').map(line => {
          if (line.trimStart().startsWith('>')) return line;
          return line.replace(mentionRegex, (match, g1, g2, g3, g4) => {
            const user = g1 || g2 || g4;
            const html = `<a href="/user/${encodeURIComponent(user)}" class="mention">@${user}</a>`;
            const idx = mentionStore.length;
            mentionStore.push(html);
            return `\x02MNT${idx}\x03`;
          });
        }).join('\n');

        content = marked.parse(safe, {
          gfm: true,
          breaks: true,
          renderer: renderer
        });

        // Restore mention placeholders
        content = content.replace(/\x02MNT(\d+)\x03/g, (_, i) => mentionStore[+i]);
      } catch (e) {
        console.error('Marked error:', e);
        // Fallback
        content = content.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
        content = content.replace(/^&gt;(.*)/gm, '<span class="greentext">&gt;$1</span>');
      }
    } else {
      // Fallback if marked not loaded
      content = content.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
      content = content.replace(/^&gt;(.*)/gm, '<span class="greentext">&gt;$1</span>');
    }

    // Emoji replacement
    content = content.replace(/:([a-z0-9_]+):/g, (match, name) => {
      if (this.customEmojis[name]) {
        return `<img src="${this.customEmojis[name]}" style="height:24px;vertical-align:middle;" alt="${name}" title=":${name}:">`;
      }
      return match;
    });

    let itemPreview = '';
    // If we have item mime (which we now send from backend), we can show the preview
    if (c.mime) {
      let mediaHtml = '';
      if (c.mime.startsWith('image')) {
        mediaHtml = `<img src="/t/${c.item_id}.webp" style="width: 48px; height: 48px; object-fit: cover; border-radius: 2px;" />`;
      } else if (c.mime.startsWith('video')) {
        mediaHtml = `
                <div style="position: relative; display: block; width: 48px; height: 48px; background: #000; border-radius: 2px; overflow: hidden;">
                    <img src="/t/${c.item_id}.webp" style="width: 100%; height: 100%; object-fit: cover; opacity: 0.6;" />
                    <svg style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 20px; height: 20px; color: #fff;" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
                </div>`;
      } else if (c.mime.startsWith('audio')) {
        if (c.has_coverart) {
          mediaHtml = `<img src="/t/${c.item_id}.webp" style="width: 48px; height: 48px; object-fit: cover; border-radius: 2px;" />`;
        } else {
          mediaHtml = `
                <div class="sidebar-media-placeholder audio" style="position: relative; width: 48px; height: 48px; border-radius: 2px; font-size: 1.25rem;">
                     <i class="fa-solid fa-music"></i>
                </div>`;
        }
      } else {
        mediaHtml = `
                <div style="display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: #333; border-radius: 2px;">
                     <svg style="width: 24px; height: 24px; color: #666;" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14.5v-9l6 4.5-6 4.5z"/></svg>
                </div>`;
      }

      const itemKey = c.item_slug || c.slug || c.item_id;
      itemPreview = `
            <div class="item-preview" style="margin-top: 10px; display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,0.2); padding: 5px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.05);">
                <a href="/${itemKey}">${mediaHtml}</a>
                <a href="/${itemKey}#c${c.id}" style="font-size: 0.8em; color: var(--accent); text-decoration: none;">View Context &raquo;</a>
            </div>`;
    }

    return `
        <div class="comment" id="c${c.id}" style="margin-bottom: 20px; border-bottom: 1px solid #333; padding-bottom: 20px;">
            <div class="comment-avatar">
                <a href="/user/${c.username.toLowerCase()}">
                    <img src="${avatar}">
                </a>
            </div>
            <div class="comment-body">
                <div class="comment-meta">
                    <a href="/user/${c.username.toLowerCase()}" class="comment-author" tooltip="ID: ${c.user_id}">${escHTML(c.display_name || c.username)}</a>
                    <span class="comment-time">Just now</span>
                </div>
                <div class="comment-content" style="white-space: pre-wrap;">${content}</div>
                ${itemPreview}
            </div>
        </div>`;
  }
}

// <pagination-ajax>
document.addEventListener('click', (e) => {
  // Only intercept clicks on pagination links
  const link = e.target.closest('a');
  if (link && link.closest('.pagination') && !link.classList.contains('disabled')) {
    const href = link.getAttribute('href');

    // Ensure it's not a modifier click
    if (e.ctrlKey || e.metaKey || e.shiftKey || e.button !== 0) return;

    // Ensure it's an internal link
    if (href && (href.startsWith('/') || href.startsWith(window.location.origin)) && !href.startsWith('#')) {
      e.preventDefault();
      loadPageAjax(href);
    }
  }
});
// </pagination-ajax>

// Tag Show More/Less Logic
document.addEventListener('click', (e) => {
  if (e.target.classList.contains('show-tags-toggle')) {
    e.preventDefault();
    const container = e.target.closest('#tags');
    if (!container) return;
    const isExpanded = container.classList.toggle('tags-expanded');
    const count = e.target.dataset.count;
    e.target.textContent = isExpanded ? 'show less' : `show ${count} more`;
  }
});

// Init Notifications
window.addEventListener('load', () => {
  window.NotificationSystemInstance = new NotificationSystem();
});

// Navbar & MOTD Logic
document.addEventListener("DOMContentLoaded", function () {
  // Toggle logic for dropdowns on mobile
  function setupToggle(btnId, menuId) {
    var btn = document.getElementById(btnId);
    var menu = document.getElementById(menuId);
    if (btn && menu) {
      btn.addEventListener('click', function (e) {
        if (e.target.closest('.nav-avatar-img')) {
          const username = window.f0ckSession?.user;
          if (username) {
            const url = `/user/${username.toLowerCase()}`;
            if (typeof window.loadPageAjax === 'function') {
              window.loadPageAjax(url, true);
            } else {
              window.location.href = url;
            }
            return;
          }
        }
        if (window.innerWidth <= 700) {
          e.preventDefault();
          menu.classList.toggle('show-mobile');
        }
      });
    }
  }
  setupToggle('nav-user-toggle', 'nav-user-menu');
  setupToggle('nav-visitor-toggle', 'nav-visitor-menu');
  setupToggle('nav-mime-toggle', 'nav-mime-menu');
  setupToggle('nav-visitor-mime-toggle', 'nav-visitor-mime-menu');

  if (window.updateMimeLabel) window.updateMimeLabel();

  // Multi-Select MIME Logic
  const handleMimeChange = (menu) => {
    const isAnon = isAnonUser();
    const allowedMimes = window.f0ckSession?.anon_permissions?.allowed_mimes;
    const isSingleMime = isAnon && Array.isArray(allowedMimes) && allowedMimes.length === 1;
    if (isSingleMime) {
      if (window.updateMimeLabel) window.updateMimeLabel();
      return;
    }
    const checked = Array.from(menu.querySelectorAll('input[type="checkbox"]:checked')).map(cb => cb.value);
    
    // Construct new state
    let newMime = checked.join(',');
    
    // Briefly force the menu to stay open to prevent flickering/closing during the AJAX load
    const dropdown = menu.closest('.nav-mime-dropdown');
    if (dropdown) {
        dropdown.classList.add('stay-open');
        setTimeout(() => dropdown.classList.remove('stay-open'), 1000);
    }
    
    // Persist via cookie
    document.cookie = `mime=${newMime}; path=/; max-age=31536000; SameSite=Lax`;

    // Strip mime from URL immediately for a clean address bar
    const url = new URL(window.location.href);
    url.searchParams.delete('mime');
    // Also clean up path-based MIME if any (backward compatibility)
    let newPath = url.pathname.replace(/\/((?:video|audio|image|,)+)/, '').replace(/\/+/g, '/');
    if (newPath === '') newPath = '/';
    url.pathname = newPath;
    
    const isOnaraOpen = document.body.classList.contains('onara-modal-open');

    // Update the browser URL without reloading (only when not in onara modal)
    if (!isOnaraOpen) {
      history.replaceState({}, '', url.toString());
    }

    // Sync UI immediately (Before AJAX)
    if (window.updateMimeLabel) window.updateMimeLabel();

    document.dispatchEvent(new CustomEvent('f0ck:mimeChanged', { detail: { mime: newMime } }));

    // Trigger reload context-aware
    const fromModal = !!menu.closest('#excluded-tags-overlay');
    const postsEl = document.querySelector('.posts, .tags-grid');
    let reloadPromise = null;

    // Set flag so hideAllModals (called inside loadPageAjax) skips the filter overlay
    if (fromModal) window._keepFilterModal = true;

    if (isOnaraOpen) {
        const bgUrl = window._onaraReturnUrl || getOnaraBaseUrl();
        reloadPromise = window.loadPageAjax ? window.loadPageAjax(bgUrl, { skipPush: true, skipCache: true }) : null;
    } else if (postsEl) {
        reloadPromise = window.loadPageAjax ? window.loadPageAjax(url.toString(), { skipPush: true }) : null;
    } else if (document.getElementById('main')?.classList.contains('item-view') || document.querySelector('.item-layout-container, .item-main-content')) {
        // On item view, refresh the context but KEEP media playing
        reloadPromise = window.loadItemAjax ? window.loadItemAjax(url.toString(), true, { keepMedia: true }) : null;
    } else {
        // Fallback for non-AJAX pages
        if (!fromModal) window.location.reload();
    }

    // Clear the flag once the reload finishes (or immediately if no promise)
    if (fromModal) {
        Promise.resolve(reloadPromise).finally(() => {
            window._keepFilterModal = false;
        });
    }
  };

  document.querySelectorAll('.nav-mime-menu').forEach(menu => {
    menu.addEventListener('change', (e) => {
      const isAnon = isAnonUser();
      const allowedMimes = window.f0ckSession?.anon_permissions?.allowed_mimes;
      const isSingleMime = isAnon && Array.isArray(allowedMimes) && allowedMimes.length === 1;
      if (isSingleMime) {
        e.preventDefault();
        e.stopPropagation();
        if (window.updateMimeLabel) window.updateMimeLabel();
        return;
      }
      if (e.target.type === 'checkbox') {
        handleMimeChange(menu);
      }
    });

    // Prevent menu closure on click inside
    menu.addEventListener('click', (e) => {
      const isAnon = isAnonUser();
      const allowedMimes = window.f0ckSession?.anon_permissions?.allowed_mimes;
      const isSingleMime = isAnon && Array.isArray(allowedMimes) && allowedMimes.length === 1;
      if (isSingleMime) {
        const item = e.target.closest('.nav-mime-item, input[type="checkbox"]');
        if (item) {
          e.preventDefault();
          e.stopPropagation();
          return;
        }
      }
      e.stopPropagation();
    });
  });

  document.querySelectorAll('.nav-mime-clear').forEach(btn => {
      btn.addEventListener('click', (e) => {
          const isAnon = isAnonUser();
          const allowedMimes = window.f0ckSession?.anon_permissions?.allowed_mimes;
          const isSingleMime = isAnon && Array.isArray(allowedMimes) && allowedMimes.length === 1;
          if (isSingleMime) {
              e.preventDefault();
              e.stopPropagation();
              return;
          }
          const menu = btn.closest('.nav-mime-menu');
          menu.querySelectorAll('input[type="checkbox"]').forEach(cb => cb.checked = false);
          handleMimeChange(menu);
      });
  });

  // Close nav-collapse when clicking anywhere outside the navbar
  var navContent = document.getElementById('navbarContent');
  var navToggler = document.getElementById('nav-toggler');
  if (navContent) {
    document.addEventListener('click', function (e) {
      if (!navContent.classList.contains('show')) return;
      // If click is inside the navContent or on the toggler button, do nothing
      if (navContent.contains(e.target) || (navToggler && navToggler.contains(e.target))) return;
      // Close
      navContent.classList.remove('show');
      if (navToggler) navToggler.classList.remove('is-open');
    });

    // Auto-close when clicking any link inside the menu
    var contentLinks = navContent.querySelectorAll('a');
    contentLinks.forEach(function (link) {
      link.addEventListener('click', function (e) {
        if (window.innerWidth <= 768) {
          if (this.id === 'nav-notif-btn') {
            e.preventDefault();
            e.stopPropagation();
            return; // Do not close menu for notification bell
          }
          navContent.classList.remove('show');
          if (navToggler) navToggler.classList.remove('is-open');

          // Also collapse any sub-menus (dropdowns)
          var menus = navContent.querySelectorAll('.nav-user-menu');
          menus.forEach(function (m) {
            m.classList.remove('show-mobile');
          });
        }
      });
    });
  }

  // SSE for MOTD live updates
  window.updateMotdUI = function (motd) {
    const containers = [document.getElementById('motd-container')];
    const displays = [document.getElementById('motd-display')];
    const dataStores = [document.getElementById('motd-data')];
    const userPrefEl = document.getElementById('user-pref-show-motd');

    // Check visibility preference
    let showPref = true;
    if (userPrefEl) {
      showPref = userPrefEl.innerText.trim() === 'true';
    }

    // Local session override (hidden via 'X' button)
    // Reset dismissal if a NEW non-empty MOTD comes in
    const currentData = (dataStores[0] || dataStores[1])?.innerText || '';
    if (motd && motd !== currentData) {
      window['motd_dismissed'] = false;
    }

    if (userPrefEl && window['motd_dismissed']) showPref = false;

    if (typeof marked !== 'undefined') {
      let mdSafe = escHTML(motd || '');
      const bs = String.fromCharCode(92);
      // Fix the shruggie specifically since markdown eats it
      // Match ¯\_(ツ)_/¯ or ¯_(ツ)_/¯
      const pattern = new RegExp('¯' + bs + bs + '?_\\(ツ\\)_/¯', 'g');
      mdSafe = mdSafe.replace(pattern, '¯' + bs + bs + bs + '_(ツ)' + bs + '_/¯');
      const rendered = marked.parseInline(mdSafe);
      displays.forEach((display, i) => {
        if (display) {
          if (dataStores[i]) dataStores[i].innerText = motd;
          display.innerHTML = Sanitizer.clean(rendered);
          if (containers[i]) {
            const shouldShow = showPref && motd && motd.trim() !== '';
            containers[i].style.display = shouldShow ? 'block' : 'none';
          }
        }
      });
    }
  };

  // Handle "X" button dismiss site-wide
  document.addEventListener('click', async (e) => {
    if (e.target.classList.contains('motd-close')) {
      window['motd_dismissed'] = true;

      // Hide immediately
      const container = document.getElementById('motd-container');
      if (container) container.style.display = 'none';

      // Persist preference
      const userPrefEl = document.getElementById('user-pref-show-motd');
      if (userPrefEl) {
        // User: Update DB
        userPrefEl.innerText = 'false';
        try {
          await fetch('/api/v2/settings/motd', {
            method: 'PUT',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ show: false })
          });
        } catch (err) { console.error('Failed to save MOTD pref:', err); }
      }
    }
  });

  // Initial render from hidden data
  const initialMotdEl = document.getElementById('motd-data');
  if (initialMotdEl) {
    updateMotdUI(initialMotdEl.innerText);
  }
});

// Mod Action Modal
class ModAction {
  static confirm(title, promptHtml, callback, options = {}) {
    const modal = document.getElementById('mod-action-modal');
    if (!modal) return window.flashMessage('Error: Mod modal not found', 3000, 'error');
    const titleEl = document.getElementById('mod-action-title');
    const contentEl = document.getElementById('mod-action-content');
    const reasonEl = document.getElementById('mod-reason');
    const confirmBtn = document.getElementById('mod-action-confirm');
    const cancelBtn = document.getElementById('mod-action-cancel');
    const errorEl = document.getElementById('mod-action-error');

    const singleLine = options.singleLine || false;
    const hideReason = options.hideReason || false;
    const allowEmpty = options.allowEmpty || false;
    const i18n = window.f0ckI18n || {};

    titleEl.innerText = title;
    if (options.unsafeContent) {
      contentEl.innerHTML = promptHtml; // Trusted admin-only content — skip sanitizer
    } else {
      contentEl.innerHTML = Sanitizer.clean(promptHtml);
    }

    reasonEl.value = '';
    errorEl.style.display = 'none';
    modal.style.display = 'flex';

    // Apply single-line mode: style the textarea to look and act like a text input
    if (singleLine) {
      reasonEl.rows = 1;
      reasonEl.style.resize = 'none';
      reasonEl.style.overflow = 'hidden';
      reasonEl.style.height = 'auto';
    } else {
      reasonEl.rows = 3;
      reasonEl.style.resize = '';
      reasonEl.style.overflow = '';
      reasonEl.style.height = '';
    }

    if (hideReason) {
      reasonEl.style.display = 'none';
    } else {
      reasonEl.style.display = 'block';
      reasonEl.placeholder = options.placeholder ||
        (allowEmpty ? (i18n.reason_optional || 'Reason (optional)') : (i18n.reason_required_label || 'Reason (required)'));
      reasonEl.focus();
    }

    confirmBtn.innerText = options.confirmText || (hideReason ? (i18n.confirm_yes || 'Yes') : (i18n.confirm_btn || 'Confirm'));
    cancelBtn.innerText = options.cancelText || (hideReason ? (i18n.confirm_no || 'No') : (i18n.cancel_btn || 'Cancel'));

    const close = () => {
      modal.style.display = 'none';
      cleanup();
    };

    const onConfirm = async () => {
      const reason = reasonEl.value.trim();
      if (!hideReason && !allowEmpty && !reason) {
        errorEl.innerText = (window.f0ckI18n && window.f0ckI18n.reason_required) || 'Reason is required.';
        errorEl.style.display = 'block';
        return;
      }
      errorEl.style.display = 'none';
      confirmBtn.disabled = true;
      confirmBtn.innerText = (window.f0ckI18n && window.f0ckI18n.processing) || 'Processing...';

      try {
        await callback(hideReason ? null : reason);
        close();
      } catch (e) {
        errorEl.innerText = e.message || 'Error occurred';
        errorEl.style.display = 'block';
        confirmBtn.disabled = false;
        confirmBtn.innerText = options.confirmText || (hideReason ? (i18n.confirm_yes || 'Yes') : (i18n.confirm_btn || 'Confirm'));
      }
    };

    // Block Enter from inserting newlines in single-line mode; instead submit
    const enterHandler = singleLine ? (e) => {
      if (e.key === 'Enter') { e.preventDefault(); onConfirm(); }
    } : null;
    if (enterHandler) reasonEl.addEventListener('keydown', enterHandler);

    const cleanup = () => {
      confirmBtn.onclick = null;
      cancelBtn.onclick = null;
      if (enterHandler) reasonEl.removeEventListener('keydown', enterHandler);
      confirmBtn.disabled = false;
    };

    confirmBtn.onclick = onConfirm;
    cancelBtn.onclick = close;

    modal.onclick = (e) => {
      if (e.target === modal) close();
    };
  }
}
window.ModAction = ModAction;

// Hover Video Preview
document.addEventListener('DOMContentLoaded', () => {
    window.updateVisitIndicators();
    window.initLazyLoading();
    const itemMatch = window.location.pathname.match(/^\/(\d+)\/?$/);
    if (itemMatch) window.trackVisit(itemMatch[1]);

    let hoverTimeout;
    let activeThumb = null;
    let activeVideo = null; // Store active video separately to clear immediately

    const clearPreview = () => {
        if (hoverTimeout) clearTimeout(hoverTimeout);
        if (activeVideo) {
            activeVideo.pause();
            activeVideo.removeAttribute('src'); 
            activeVideo.load();                
            activeVideo.remove();
            activeVideo = null;
        }
        if (activeThumb) {
            activeThumb.classList.remove('previewing');
            activeThumb.classList.remove('touch-active');
            const card = activeThumb.closest('.sidebar-video-card');
            if (card) card.classList.remove('previewing');
            activeThumb = null;
        }
    };
    window.clearHoverPreview = clearPreview;

    // Use mouseover/mouseout bubbling on document for dynamic elements
    const startPreview = (thumb, delay = 150) => {
         // Clear any existing preview
         clearPreview();
         
         // If this thumbnail is currently set to be blurred and is not revealed yet, do not preview it!
         const mode = thumb.getAttribute('data-mode');
         const blurNsfw = localStorage.getItem('blurNsfw') === 'true';
         const blurNsfl = localStorage.getItem('blurNsfl') === 'true';
         const blurSfw = localStorage.getItem('blurSfw') === 'true';
         const blurUntagged = localStorage.getItem('blurUntagged') === 'true';
         
         let shouldBlurThis = false;
         if (mode === 'nsfw') shouldBlurThis = blurNsfw;
         else if (mode === 'nsfl') shouldBlurThis = blurNsfl;
         else if (mode === 'sfw') shouldBlurThis = blurSfw;
         else if (mode === 'null' || mode === 'untagged' || !mode) shouldBlurThis = blurUntagged;
         
         if (shouldBlurThis && !thumb.classList.contains('revealed')) {
             return;
         }
         
         activeThumb = thumb;
         activeThumb.classList.add('touch-active'); // Visual feedback (box-shadow)

         const file = thumb.dataset.file;
         const mime = thumb.dataset.mime;
         const ext = thumb.dataset.ext;
         
         // Only preview videos (not gifs — fetching a GIF causes main-thread freeze on click)
         if (!file || !mime || !mime.startsWith('video/') || mime === 'video/youtube' || (ext && ext.toLowerCase() === 'gif')) return;

         // Helper to actually start video — only called AFTER the hover delay
         // so we don't start a network fetch during the 150ms grace period.
         const run = () => {
            if (!document.body.contains(thumb)) return;
            if (thumb !== activeThumb) return;

            activeThumb.classList.add('previewing');
            const card = activeThumb.closest('.sidebar-video-card');
            if (card) card.classList.add('previewing');

            const video = document.createElement('video');
            video.src = `/b/${file}`;
            video.muted = true;
            video.loop = true;
            video.className = 'preview-video';
            video.playsInline = true;
            // 'metadata' fetches only the file header (a few KB for duration/dimensions).
            // 'auto' fetches the entire file immediately — catastrophic for large GIFs.
            video.preload = 'metadata';

            video.oncanplay = () => {
                video.play().catch(() => {});
                video.classList.add('playing');
            };

            const container = thumb.classList.contains('sidebar-video-thumb-wrap')
                ? thumb
                : (thumb.querySelector('.sidebar-video-thumb-wrap') || thumb);
            container.appendChild(video);
            activeVideo = video;
         };

         if (delay === 0) {
             run();
         } else {
             hoverTimeout = setTimeout(run, delay);
         }
    };
    window.startHoverPreview = startPreview;

    const handleEnter = (e) => {
        let thumb = e.target.closest('.thumb');
        if (!thumb) {
            // The playback can ONLY start when exactly hovering class="sidebar-video-thumb"
            const imgThumb = e.target.closest('.sidebar-video-thumb');
            if (imgThumb) {
                thumb = imgThumb.closest('.sidebar-video-thumb-wrap');
            }
        }
        if (thumb && thumb !== activeThumb) {
             startPreview(thumb, 150);
        }
    };
    document.addEventListener('mouseover', handleEnter);
    document.addEventListener('focusin', handleEnter);

    const handleLeave = (e) => {
        const thumb = e.target.closest('.thumb, .sidebar-video-thumb-wrap');
        if (thumb) {
            if (e.type === 'mouseout' && e.relatedTarget && thumb.contains(e.relatedTarget)) return;
            clearPreview();
        }
    };
    document.addEventListener('mouseout', handleLeave);
    document.addEventListener('focusout', handleLeave);

    // Touch handling to support "tap to activate" behavior
    // 1. First tap: Activate (visuals + preview) AND prevent navigation
    // 2. Second tap (on active): Navigate
    
    let touchBlockClick = false;
    
    document.addEventListener('touchstart', (e) => {
        let thumb = e.target.closest('.thumb');
        if (!thumb) {
            const imgThumb = e.target.closest('.sidebar-video-thumb');
            if (imgThumb) {
                thumb = imgThumb.closest('.sidebar-video-thumb-wrap');
            }
        }
        
        if (thumb) {
             // Only apply logic for items we want to preview
             // If it's a non-previewable item (e.g. just image), do we still want "tap to hover"?
             // User asked for "video/webm type" and "box shadow"
             // Box shadow applies to all .thumb via CSS
             
             if (thumb !== activeThumb) {
                 // First tap on this item: Activate
                 touchBlockClick = true;
                 startPreview(thumb, 0); // Instant start
             } else {
                 // Already active: Allow normal click propagation (navigation)
                 touchBlockClick = false;
             }
        } else {
             // Tapped background or something else -> Clear preview
             clearPreview();
        }
    }, { passive: true });

    // Capture phase click listener to stop navigation if we just activated
    document.addEventListener('click', (e) => {
        if (touchBlockClick) {
            const thumb = e.target.closest('.thumb, .sidebar-video-thumb-wrap');
            if (thumb && thumb === activeThumb) {
                e.preventDefault();
                e.stopImmediatePropagation();
                touchBlockClick = false; // Reset for next interaction
            }
        }
    }, true);

    // Global Timeago — uses Intl.RelativeTimeFormat for native, correctly-localized output
    const timeAgo = (date) => {
        const i18n = window.f0ckI18n || {};
        const lang = i18n.lang || navigator.language || 'en';
        const seconds = Math.floor((new Date() - new Date(date)) / 1000);

        if (seconds < 5) return i18n.timeago_just_now || 'just now';

        const intervals = [
            { unit: 'year',   seconds: 31536000 },
            { unit: 'month',  seconds: 2592000  },
            { unit: 'week',   seconds: 604800   },
            { unit: 'day',    seconds: 86400    },
            { unit: 'hour',   seconds: 3600     },
            { unit: 'minute', seconds: 60       },
            { unit: 'second', seconds: 1        }
        ];

        for (const interval of intervals) {
            const count = Math.floor(seconds / interval.seconds);
            if (count >= 1) {
                try {
                    // Force fallback for custom/unrecognized locales like 'zange'
                    if (lang === 'zange') throw new Error('Force fallback');
                    const rtf = new Intl.RelativeTimeFormat(lang, { numeric: 'auto' });
                    return rtf.format(-count, interval.unit);
                } catch (e) {
                    // Intl not available — fall back to i18n strings
                    const key = count === 1 ? `timeago_${interval.unit}` : `timeago_${interval.unit}s`;
                    const tpl = i18n[key] || `{n} ${interval.unit}${count !== 1 ? 's' : ''}`;
                    const timeStr = tpl.replace('{n}', count).replace('{s}', count !== 1 ? 's' : '');
                    const agoTpl = i18n.timeago_ago || '{t} ago';
                    return agoTpl.replace('{t}', timeStr);
                }
            }
        }
        return i18n.timeago_just_now || 'just now';
    };

    // Expose globally so comments.js, user_comments.js, messages.js etc. can use the same i18n-aware implementation
    window.f0ckTimeAgo = timeAgo;

    // Format an ISO date string as DD.MM.YYYY - HH:MM:SS in local time
    const formatDateFull = (dateStr) => {
        const d = new Date(dateStr);
        if (isNaN(d.getTime())) return dateStr;
        const pad = n => String(n).padStart(2, '0');
        return `${pad(d.getDate())}.${pad(d.getMonth() + 1)}.${d.getFullYear()} - ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
    };
    window.f0ckFormatDateFull = formatDateFull;

    const updateGlobalTimestamps = () => {
        document.querySelectorAll('.timeago').forEach(el => {
            // On first run, seed data-iso from the server-rendered tooltip (raw ISO string)
            // so we always have a reliable source for time calculations even after the
            // tooltip is rewritten to the human-readable DD.MM.YYYY format.
            if (!el.dataset.iso && el.hasAttribute('tooltip')) {
                el.dataset.iso = el.getAttribute('tooltip');
            }

            // Use data-iso (seeded above) → data-ts (sidebar) → tooltip as fallback
            const isoStr = el.dataset.iso || el.getAttribute('data-ts');
            if (isoStr) {
                const newTime = timeAgo(isoStr);
                if (el.textContent !== newTime) {
                    el.textContent = newTime;
                }
                // Update tooltip to show nicely formatted local date instead of raw ISO string
                if (el.hasAttribute('tooltip')) {
                    const niceFull = formatDateFull(isoStr);
                    if (el.getAttribute('tooltip') !== niceFull) {
                        el.setAttribute('tooltip', niceFull);
                    }
                }
            }
        });

        // Also reformat tooltip on static date elements (e.g. .stat-joined on profiles)
        // that carry a data-iso attribute but are NOT .timeago (text content not updated).
        document.querySelectorAll('[data-iso][tooltip]:not(.timeago)').forEach(el => {
            const isoStr = el.dataset.iso;
            if (isoStr) {
                const niceFull = formatDateFull(isoStr);
                if (el.getAttribute('tooltip') !== niceFull) {
                    el.setAttribute('tooltip', niceFull);
                }
            }
        });
    };
    // Expose globally so AJAX content hooks can re-stamp immediately after injection
    window.updateGlobalTimestamps = updateGlobalTimestamps;

    // Start global timer
    // Global Flash Message Helper
    window.showFlash = (message, type = 'success') => {
        const container = document.getElementById('flash-container');
        if (!container) return;

        const flash = document.createElement('div');
        flash.className = `flash-message flash-${type}`;
        if (typeof message === 'string' && message.includes('<a ')) {
            flash.innerHTML = message;
        } else {
            flash.textContent = message;
        }
        
        // Add close behavior on click
        flash.onclick = (e) => {
            if (e.target.tagName.toLowerCase() !== 'a') {
                flash.remove();
            }
        };

        container.appendChild(flash);

        // Auto-remove after 8 seconds
        setTimeout(() => {
            if (flash.parentElement) {
                flash.style.opacity = '0';
                flash.style.transform = 'translateY(-20px)';
                setTimeout(() => flash.remove(), 300);
            }
        }, 8000);
    };

    // Selection-edit popover: shows an editable bubble near anchorEl pre-filled with selectedText.
    // onConfirm(trimmedValue) is called when the user submits.
    window._showSelTagPopover = (selectedText, anchorEl, onConfirm) => {
        // Remove any existing popover
        document.querySelector('.sel-tag-popover')?.remove();

        const pop = document.createElement('div');
        pop.className = 'sel-tag-popover';
        pop.innerHTML = `<input type="text" autocomplete="off" spellcheck="false"><button class="sel-tag-popover-confirm">${(window.f0ckI18n && window.f0ckI18n.add_tag) || 'Add tag'}</button>`;
        document.body.appendChild(pop);

        const input = pop.querySelector('input');
        const btn   = pop.querySelector('.sel-tag-popover-confirm');

        input.value = selectedText;

        // Position below anchor using fixed viewport coords
        const rect = anchorEl.getBoundingClientRect();
        const spaceBelow = window.innerHeight - rect.bottom;
        if (spaceBelow < 60) {
            // Not enough room below — show above
            pop.style.bottom = `${window.innerHeight - rect.top + 6}px`;
            pop.style.top = 'auto';
        } else {
            pop.style.top = `${rect.bottom + 6}px`;
        }
        pop.style.left = `${Math.min(rect.left, window.innerWidth - 280)}px`;

        // Auto-size input to its content
        const sizer = document.createElement('span');
        sizer.style.cssText = 'visibility:hidden;position:absolute;white-space:pre;font-size:0.85em;font-family:monospace;';
        document.body.appendChild(sizer);
        const resize = () => {
            sizer.textContent = input.value || ' ';
            input.style.width = `${Math.min(220, Math.max(60, sizer.offsetWidth + 10))}px`;
        };
        input.addEventListener('input', resize);
        resize();

        input.focus();
        input.select();

        const close = () => {
            pop.remove();
            sizer.remove();
            document.removeEventListener('mousedown', onOutside);
        };

        const submit = () => {
            const val = input.value.trim();
            if (val) onConfirm(val);
            close();
        };

        btn.addEventListener('click', submit);
        input.addEventListener('keydown', (e) => {
            if (e.key === 'Enter') { e.preventDefault(); submit(); }
            if (e.key === 'Escape') { close(); }
        });

        const onOutside = (e) => {
            if (!pop.contains(e.target)) close();
        };
        setTimeout(() => document.addEventListener('mousedown', onOutside), 0);
    };

    // Auto-open registration modal or show flash based on hash
    const handleHash = () => {
        const hash = window.location.hash;
        if (hash.startsWith('#register')) {
            const parts = hash.split(':');
            if (parts.length > 1) {
                if (parts[1] === 'error' && parts[2]) {
                    showFlash(decodeURIComponent(parts[2]), 'error');
                } else if (parts[1] === 'success' && parts[2]) {
                    showFlash(decodeURIComponent(parts[2]), 'success');
                } else if (parts[1] !== 'error' && parts[1] !== 'success') {
                    // Handle #register:TOKEN - Open modal
                    const modal = document.getElementById('register-modal');
                    if (modal) {
                        modal.style.display = 'flex';
                        const tokenInput = modal.querySelector('input[name="token"]');
                        if (tokenInput) tokenInput.value = parts[1];
                    }
                }
            } else {
                // Handle #register - Open modal
                const modal = document.getElementById('register-modal');
                if (modal) modal.style.display = 'flex';
            }
            // Clean up the URL hash so it doesn't look ugly
            history.replaceState(null, null, window.location.pathname + window.location.search);
        }

        // Sync sidebar and comments-list layout on initial page load (Legacy View Only)
        if (document.body.classList.contains('legacy-view')) {
        }
    };

    // Breakout Tooltips (prevents clipping globally)
    let breakoutTooltip = null;
    let currentTooltipTarget = null;

    const updateBreakoutPos = () => {
        if (!breakoutTooltip || !currentTooltipTarget) return;
        const rect = currentTooltipTarget.getBoundingClientRect();
        const flow = currentTooltipTarget.getAttribute('flow') || 'up';
        
        breakoutTooltip.setAttribute('data-flow', flow);

        const bRect = breakoutTooltip.getBoundingClientRect();
        let top = 0;
        let left = 0;

        if (flow === 'up' || flow === 'up-left') {
            top = rect.top - bRect.height - 4;
            if (flow === 'up-left') {
                left = rect.left + (rect.width / 2) - 15;
            } else {
                left = rect.left + (rect.width / 2) - (bRect.width / 2);
            }
        } else if (flow === 'down') {
            top = rect.bottom + 4;
            left = rect.left + (rect.width / 2) - (bRect.width / 2);
        } else if (flow === 'left') {
            top = rect.top + (rect.height / 2) - (bRect.height / 2);
            left = rect.left - bRect.width - 2;
        } else if (flow === 'right') {
            top = rect.top + (rect.height / 2) - (bRect.height / 2);
            left = rect.right + 4;
        }

        // Final clamp to screen
        const clampedTop  = Math.max(5, Math.min(top,  window.innerHeight - bRect.height - 5));
        const clampedLeft = Math.max(5, Math.min(left, window.innerWidth  - bRect.width  - 5));
        breakoutTooltip.style.top  = clampedTop  + 'px';
        breakoutTooltip.style.left = clampedLeft + 'px';

        // Point the arrow at the actual target center regardless of clamping
        if (flow === 'up' || flow === 'up-left' || flow === 'down') {
            const targetCenterX = rect.left + rect.width / 2;
            const arrowLeft = Math.round(targetCenterX - clampedLeft);
            // Keep the arrow within the tooltip bounds (with a small margin)
            const arrowClamped = Math.max(8, Math.min(arrowLeft, bRect.width - 8));
            breakoutTooltip.style.setProperty('--arrow-left', arrowClamped + 'px');
        }
    };

    const showTooltipFor = (target) => {
        const text = target.getAttribute('tooltip');
        if (!text) return;

        if (!breakoutTooltip) {
            breakoutTooltip = document.createElement('div');
            breakoutTooltip.id = 'f0ck-breakout-tooltip';
            document.body.appendChild(breakoutTooltip);
        }

        breakoutTooltip.textContent = text;
        currentTooltipTarget = target;
        // Position first (while invisible), then fade in on next frame
        breakoutTooltip.classList.remove('is-visible');
        updateBreakoutPos();
        requestAnimationFrame(() => {
            if (currentTooltipTarget === target) {
                breakoutTooltip.classList.add('is-visible');
            }
        });
        
        // Handle any scrolling parents
        let parent = target.parentElement;
        while (parent && parent !== document.body) {
            const style = window.getComputedStyle(parent);
            if (style.overflowY === 'auto' || style.overflowY === 'scroll') {
                parent.addEventListener('scroll', updateBreakoutPos, { passive: true });
                target._scrollParent = parent;
                break;
            }
            parent = parent.parentElement;
        }
    };

    const hideTooltip = () => {
        if (breakoutTooltip) {
            breakoutTooltip.classList.remove('is-visible');
        }
        if (currentTooltipTarget && currentTooltipTarget._scrollParent) {
            currentTooltipTarget._scrollParent.removeEventListener('scroll', updateBreakoutPos);
            currentTooltipTarget._scrollParent = null;
        }
        currentTooltipTarget = null;
    };

    document.addEventListener('mouseover', (e) => {
        const target = e.target.closest('[tooltip]');
        if (target) {
            showTooltipFor(target);
        } else if (currentTooltipTarget) {
            hideTooltip();
        }
    });

    // Touch handling for mobile tooltips
    let tooltipTouchBlock = false;
    document.addEventListener('touchstart', (e) => {
        const target = e.target.closest('[tooltip]');
        if (target) {
            if (target !== currentTooltipTarget) {
                // First tap: Show tooltip and block navigation
                showTooltipFor(target);
                tooltipTouchBlock = true;
            } else {
                // Second tap: Allow navigation
                tooltipTouchBlock = false;
            }
        } else {
            // Tapped away: Hide
            hideTooltip();
        }
    }, { passive: true });

    // Capture phase listener to stop the very first tap from navigating
    document.addEventListener('click', (e) => {
        if (tooltipTouchBlock) {
            const target = e.target.closest('[tooltip]');
            if (target && target === currentTooltipTarget) {
                e.preventDefault();
                e.stopImmediatePropagation();
                tooltipTouchBlock = false; // Reset for next tap
            }
        }
    }, true);

    // Dismiss tooltips on scroll — use capture phase so it fires for ANY
    // scrollable container (e.g. comments list), not just the window.
    document.addEventListener('scroll', () => {
        if (currentTooltipTarget) {
            hideTooltip();
            tooltipTouchBlock = false;
        }
    }, { passive: true, capture: true });

    window.addEventListener('resize', hideTooltip);
    window.addEventListener('blur', hideTooltip);
    document.addEventListener('mouseleave', hideTooltip);


    handleHash();
    window.addEventListener('hashchange', handleHash);

    // Safety fallback: Hide tooltips on any subsequent navigation
    window.addEventListener('pjax:start', () => {
        hideTooltip();
    });

    // Start global timer
    setInterval(updateGlobalTimestamps, 30000);
    // Re-run immediately after any AJAX content injection (loadItemAjax / loadPageAjax)
    document.addEventListener('f0ck:contentLoaded', updateGlobalTimestamps);
    // Initial run
    updateGlobalTimestamps();
});

// Report System Logic
document.addEventListener('DOMContentLoaded', () => {
    const reportModal = document.getElementById('report-modal');
    if (!reportModal) return;
    
    const reportItemInput = document.getElementById('report-item-id');
    const reportCommentInput = document.getElementById('report-comment-id');
    const reportUserInput = document.getElementById('report-user-id');
    const reportReason = document.getElementById('report-reason');
    const reportError = document.getElementById('report-error');
    let _reportRcWidgetId = null;

    const showReportError = (msg, targetEl) => {
        if (!reportError) return;
        reportError.innerHTML = '';
        const icon = document.createElement('i');
        icon.className = 'fa fa-circle-exclamation';
        icon.style.marginRight = '6px';
        reportError.appendChild(icon);
        reportError.appendChild(document.createTextNode(' ' + msg));
        reportError.style.display = 'block';

        if (targetEl) {
            targetEl.classList.remove('field-error');
            void targetEl.offsetWidth; // Force reflow to re-trigger CSS shake animation
            targetEl.classList.add('field-error');
            if (typeof targetEl.focus === 'function') {
                try { targetEl.focus(); } catch (e) {}
            }
        }
    };

    const clearReportError = () => {
        if (reportError) {
            reportError.innerHTML = '';
            reportError.style.display = 'none';
        }
        if (reportReason) reportReason.classList.remove('field-error');
        const rcEl = document.getElementById('modal-report-recaptcha');
        if (rcEl) rcEl.classList.remove('field-error');
    };

    if (reportReason) {
        reportReason.addEventListener('input', () => {
            if (reportReason.value.trim()) {
                reportReason.classList.remove('field-error');
                const rcEl = document.getElementById('modal-report-recaptcha');
                if (!rcEl || !rcEl.classList.contains('field-error')) {
                    clearReportError();
                }
            }
        });
        reportReason.addEventListener('keydown', (e) => {
            if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
                e.preventDefault();
                const submitBtn = document.getElementById('report-submit');
                if (submitBtn && !submitBtn.disabled) submitBtn.click();
            }
        });
    }

    window.renderReportRecaptcha = function() {
        const rcEl = document.getElementById('modal-report-recaptcha');
        if (!rcEl || !window.grecaptcha || typeof grecaptcha.render !== 'function') return;
        if (_reportRcWidgetId !== null) {
            try { grecaptcha.reset(_reportRcWidgetId); } catch(e) {}
        } else {
            const sitekey = rcEl.dataset.sitekey || (window.f0ckConfig && window.f0ckConfig.recaptcha_site_key);
            if (sitekey) {
                try {
                    _reportRcWidgetId = grecaptcha.render(rcEl, {
                        sitekey: sitekey,
                        theme: 'dark',
                        callback: function() {
                            rcEl.classList.remove('field-error');
                            if (!reportReason || !reportReason.classList.contains('field-error')) {
                                clearReportError();
                            }
                        }
                    });
                } catch(e) {
                    console.warn('[REPORT] Failed to render recaptcha:', e);
                }
            }
        }
    };

    // Open item report
    document.addEventListener('click', (e) => {
        const itemBtn = e.target.closest('.report-item-btn');
        if (itemBtn) {
            e.preventDefault();
            reportItemInput.value = itemBtn.dataset.itemId;
            reportCommentInput.value = '';
            reportUserInput.value = '';
            reportReason.value = '';
            clearReportError();
            reportModal.style.display = 'flex';
            document.body.classList.add('modal-open');
            setTimeout(() => { try { reportReason.focus(); } catch(err){} }, 50);
            if (window.renderReportRecaptcha) window.renderReportRecaptcha();
        }

        const commentBtn = e.target.closest('.report-comment-btn');
        if (commentBtn) {
            e.preventDefault();
            reportItemInput.value = '';
            reportCommentInput.value = commentBtn.dataset.id;
            reportUserInput.value = '';
            reportReason.value = '';
            clearReportError();
            reportModal.style.display = 'flex';
            document.body.classList.add('modal-open');
            setTimeout(() => { try { reportReason.focus(); } catch(err){} }, 50);
            if (window.renderReportRecaptcha) window.renderReportRecaptcha();
        }

        const userBtn = e.target.closest('.report-user-btn'); // for future
        if (userBtn) {
            e.preventDefault();
            reportItemInput.value = '';
            reportCommentInput.value = '';
            reportUserInput.value = userBtn.dataset.userId;
            reportReason.value = '';
            clearReportError();
            reportModal.style.display = 'flex';
            document.body.classList.add('modal-open');
            setTimeout(() => { try { reportReason.focus(); } catch(err){} }, 50);
            if (window.renderReportRecaptcha) window.renderReportRecaptcha();
        }

        // Close logic
        if (e.target.matches('#report-cancel') || e.target.id === 'report-modal') {
            reportModal.style.display = 'none';
            document.body.classList.remove('modal-open');
            clearReportError();
            if (_reportRcWidgetId !== null && window.grecaptcha) {
                try { grecaptcha.reset(_reportRcWidgetId); } catch(e) {}
            }
        }

        // Submit logic
        if (e.target.matches('#report-submit')) {
            clearReportError();
            const reason = reportReason.value.trim();
            if (!reason) {
                showReportError((window.f0ckI18n && window.f0ckI18n.reason_required) || 'Please provide a reason.', reportReason);
                return;
            }

            const rcEl = document.getElementById('modal-report-recaptcha');
            let rcToken = '';
            if (rcEl) {
                if (_reportRcWidgetId === null || !window.grecaptcha) {
                    showReportError((window.f0ckI18n && window.f0ckI18n.captcha_loading) || 'CAPTCHA is still loading. Please wait a moment.', rcEl);
                    return;
                }
                rcToken = grecaptcha.getResponse(_reportRcWidgetId);
                if (!rcToken) {
                    showReportError((window.f0ckI18n && window.f0ckI18n.captcha_required) || 'Please complete the CAPTCHA.', rcEl);
                    return;
                }
            }

            const payload = new URLSearchParams();
            if (reportItemInput.value) payload.append('item_id', reportItemInput.value);
            if (reportCommentInput.value) payload.append('comment_id', reportCommentInput.value);
            if (reportUserInput.value) payload.append('reported_user_id', reportUserInput.value);
            payload.append('reason', reason);
            if (rcToken) payload.append('g-recaptcha-response', rcToken);

            const submitBtn = e.target;
            const originalBtnText = submitBtn.innerHTML;
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<i class="fa fa-spinner fa-spin" style="margin-right: 5px;"></i>' + ((window.f0ckI18n && window.f0ckI18n.processing) || 'Processing...');

            fetch('/api/v2/report', {
                method: 'POST',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                body: payload
            })
            .then(res => res.json())
            .then(data => {
                if (data.success) {
                    reportModal.style.display = 'none';
                    document.body.classList.remove('modal-open');
                    clearReportError();
                    if (window.showFlash) window.showFlash((window.f0ckI18n && window.f0ckI18n.report_success) || 'Report submitted successfully.', 'success');
                    // Reset fields for future reports
                    reportReason.value = '';
                } else {
                    const errMsg = data.msg || (window.f0ckI18n && window.f0ckI18n.report_error) || 'An error occurred.';
                    showReportError(errMsg);
                    if (window.showFlash) window.showFlash(errMsg, 'error');
                }
            })
            .catch(err => {
                const errMsg = (window.f0ckI18n && window.f0ckI18n.network_error) || 'Network error.';
                showReportError(errMsg);
                if (window.showFlash) window.showFlash(errMsg, 'error');
            })
            .finally(() => {
                submitBtn.disabled = false;
                submitBtn.innerHTML = originalBtnText;
                if (_reportRcWidgetId !== null && window.grecaptcha) {
                    try { grecaptcha.reset(_reportRcWidgetId); } catch(e) {}
                }
            });
        }
    });

    // Initial check for warnings
    if (window.f0ckSession && window.f0ckSession.logged_in) {
        const checkWarnings = async () => {
            try {
                const res = await fetch('/api/v2/user/warnings');
                const data = await res.json();
                if (data.success && data.warnings.length > 0) {
                    // Show the first warning
                    const warning = data.warnings[0];
                    const warningModal = document.getElementById('warning-modal');
                    if (warningModal) {
                        document.getElementById('warning-reason').textContent = warning.reason;
                        document.getElementById('warning-id').value = warning.id;
                        warningModal.style.display = 'flex';
                        document.body.classList.add('modal-open');
                    }
                }
            } catch (e) { console.error('Error fetching warnings', e); }
        };
        // Small delay to ensure session is fully initialized if needed
        // checkWarnings is now delivered via SSE on connection to avoid redundant polling.
        // setTimeout(checkWarnings, 1000);
        
        // Acknowledge warning
        const ackBtn = document.getElementById('warning-acknowledge');
        if (ackBtn) {
            ackBtn.addEventListener('click', async () => {
                const id = document.getElementById('warning-id').value;
                ackBtn.disabled = true;
                try {
                    const res = await fetch(`/api/v2/user/warnings/${id}/acknowledge`, { 
                        method: 'POST',
                        headers: { 'X-CSRF-Token': window.f0ckSession?.csrf_token }
                    });
                    const data = await res.json();
                    if (data.success) {
                        document.getElementById('warning-modal').style.display = 'none';
                        document.body.classList.remove('modal-open');
                        // Check for more warnings
                        checkWarnings();
                    } else {
                        window.flashMessage(data.msg || 'Error acknowledging warning', 3000, 'error');
                    }
                } catch (e) {
                    console.error('Network Error', e);
                } finally {
                    ackBtn.disabled = false;
                }
            });
        }
    }
});

  // <image-modal>
  const initImageModal = () => {
    const modal = document.getElementById('image-modal');
    const modalImg = document.getElementById('image-modal-img');
    const closeBtn = modal ? modal.querySelector('.image-modal-close') : null;

    if (!modal || !modalImg) return;

    let scale = 1;
    let posX = 0;
    let posY = 0;
    let isDragging = false;
    let startX = 0;
    let startY = 0;

    const applyTransform = () => {
      modalImg.style.transform = `translate(${posX}px, ${posY}px) scale(${scale})`;
    };

    const resetTransform = () => {
      scale = 1;
      posX = 0;
      posY = 0;
      applyTransform();
    };

    const openImageModal = (src) => {
      // Calculate scrollbar width to prevent layout shift
      const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
      document.body.style.setProperty('--scrollbar-width', `${scrollbarWidth}px`);
      
      modalImg.src = src;
      resetTransform();
      modal.classList.add('visible');
      document.body.classList.add('modal-open');
    };

    const closeImageModal = () => {
      if (modal) modal.classList.remove('visible');
      document.body.classList.remove('modal-open');
      if (modalImg) modalImg.src = '';
      resetTransform();
    };

    // Expose globally for guaranteed navigation cleanup and spoiler integration
    window.closeImageModal = closeImageModal;
    window.openImageModal = openImageModal;

    // Zoom Logic
    const handleWheel = (e) => {
      if (!modal.classList.contains('visible')) return;
      e.preventDefault();
      const delta = e.deltaY > 0 ? -0.1 : 0.1;
      const newScale = Math.min(Math.max(0.1, scale + delta), 10);
      scale = newScale;
      applyTransform();
    };

    modal.addEventListener('wheel', handleWheel, { passive: false });

    // Pan Logic
    modalImg.draggable = false; // Disable native browser drag
    modalImg.addEventListener('mousedown', (e) => {
      if (e.button !== 0) return; // Left click only
      e.preventDefault(); // Prevent native drag ghosting (Note: this stops CSS :active)
      isDragging = true;
      startX = e.clientX - posX;
      startY = e.clientY - posY;
      modalImg.style.transition = 'none'; // Disable transition during drag for snappiness
      
      // Apply grabbing cursor directly on the image (overrides the CSS grab !important rules)
      // and also set body class for full-page cursor coverage while dragging:
      modalImg.style.setProperty('cursor', 'grabbing', 'important');
      document.body.classList.add('modal-is-grabbing');
    });

    window.addEventListener('mousemove', (e) => {
      if (!isDragging) return;
      posX = e.clientX - startX;
      posY = e.clientY - startY;
      applyTransform();
    });

    window.addEventListener('mouseup', () => {
      if (!isDragging) return;
      isDragging = false;
      modalImg.style.transition = 'transform 0.05s ease-out';
      
      // Restore grab cursor and remove body class
      modalImg.style.setProperty('cursor', 'grab', 'important');
      document.body.classList.remove('modal-is-grabbing');
    });

    // Double-click the image to close the modal
    modalImg.addEventListener('dblclick', (e) => {
      e.stopPropagation();
      closeImageModal();
    });

    // Mobile Touch Logic (Pan & Pinch-to-Zoom)
    let initialTouchDist = null;
    let initialTouchScale = 1;

    modalImg.addEventListener('touchstart', (e) => {
      if (e.touches.length === 1) {
        isDragging = true;
        startX = e.touches[0].clientX - posX;
        startY = e.touches[0].clientY - posY;
        modalImg.style.transition = 'none';
      } else if (e.touches.length === 2) {
        isDragging = false; // Disable pan while zooming
        const dx = e.touches[0].clientX - e.touches[1].clientX;
        const dy = e.touches[0].clientY - e.touches[1].clientY;
        initialTouchDist = Math.sqrt(dx * dx + dy * dy);
        initialTouchScale = scale;
        modalImg.style.transition = 'none';
      }
    }, { passive: false });

    window.addEventListener('touchmove', (e) => {
      if (!modal.classList.contains('visible')) return;
      e.preventDefault(); // Stop native elastic scrolling while open

      const isMobile = window.innerWidth <= 768;

      if (e.touches.length === 1 && isDragging) {
        // Prevent swiping/panning on mobile unless we're actually zoomed in
        if (!isMobile || scale > 1) {
          posX = e.touches[0].clientX - startX;
          posY = e.touches[0].clientY - startY;
          applyTransform();
        }
      } else if (e.touches.length === 2 && initialTouchDist) {
        const dx = e.touches[0].clientX - e.touches[1].clientX;
        const dy = e.touches[0].clientY - e.touches[1].clientY;
        const dist = Math.sqrt(dx * dx + dy * dy);
        const newScale = Math.min(Math.max(0.1, initialTouchScale * (dist / initialTouchDist)), 10);
        scale = newScale;
        
        // Re-center automatically if zooming out to 1x or less on mobile
        if (isMobile && scale <= 1) {
          posX = 0;
          posY = 0;
        }
        applyTransform();
      }
    }, { passive: false });

    window.addEventListener('touchend', (e) => {
      if (e.touches.length < 2) {
        initialTouchDist = null;
      }
      if (e.touches.length === 0) {
        isDragging = false;
        if (modalImg) modalImg.style.transition = 'transform 0.05s ease-out';
      }
    });

    // Close instantly on ESC or navigation hotkeys BEFORE PJAX fires
    document.addEventListener('keydown', (e) => {
      if (modal.classList.contains('visible')) {
        const key = e.key.toLowerCase();
        if (key === 'escape' || e.key.startsWith('Arrow') || ['a', 'd', 'r'].includes(key)) {
          closeImageModal();
        }
      }
    });

    // Safety fallback: Close on any subsequent navigation
    window.addEventListener('pjax:start', () => {
      if (modal.classList.contains('visible')) {
        closeImageModal();
      }
    });


    // Close on background click (anything NOT the image)
    modal.addEventListener('click', (e) => {
      if (e.target !== modalImg) {
        closeImageModal();
      }
    });

    // Global intercept for image item clicks
    document.addEventListener('click', (e) => {
      const modalBtn = e.target.closest('.image-modal-btn');
      if (modalBtn) {
        e.preventDefault();
        e.stopPropagation();
        const wrapper = modalBtn.closest('.embed-responsive');
        const img = wrapper ? wrapper.querySelector('img#f0ck-image') : null;
        if (img) {
          openImageModal(img.src);
        }
        return;
      }

      const elfe = e.target.closest('#elfe');
      if (elfe) {
        e.preventDefault();
        const expandOnClick = localStorage.getItem('imageExpandOnClick') !== 'false';
        if (expandOnClick) {
            const wrapper = elfe.closest('.embed-responsive');
            if (wrapper) {
                // If already expanded, always allow collapsing
                if (wrapper.classList.contains('is-expanded')) {
                    wrapper.classList.remove('is-expanded');
                    return;
                }
                // Only expand if the image is actually being clipped (not fully visible).
                const img = wrapper.querySelector('img#f0ck-image');
                if (img && img.complete && img.naturalHeight > 0 && img.naturalWidth > 0) {
                    const rendered = img.getBoundingClientRect();
                    
                    // Calculate the max height the image can take given the container width
                    const expandedHeight = rendered.width * (img.naturalHeight / img.naturalWidth);
                    
                    if (rendered.height + 2 >= img.naturalHeight) {
                        // Image is unscaled or upscaled. No detail to gain by expanding.
                        return;
                    }
                    
                    if (rendered.height + 2 >= expandedHeight) {
                        // Expanding inline will not increase display size because it is width-constrained.
                        openImageModal(elfe.href);
                        return;
                    }
                }
                wrapper.classList.add('is-expanded');
            }
        } else {
            openImageModal(elfe.href);
        }
        return;
      }

      // Comment embedded images → open in image modal (skip emoji images, skip unrevealed spoilers)
      const commentImg = e.target.closest('.comment-content img, .comment-attachments img');
      if (commentImg && !commentImg.classList.contains('emoji')) {
        // If this image is inside an unrevealed spoiler, let the spoiler handler deal with it
        const parentSpoiler = commentImg.closest('.spoiler');
        if (parentSpoiler && !parentSpoiler.classList.contains('revealed')) return;
        e.preventDefault();
        e.stopPropagation();
        openImageModal(commentImg.src);
      }
    });
  };

  initImageModal();
  // </image-modal>

  // Halls Management (Admin Only / My Halls for all logged-in users)
  const escapeHtml = (str) => String(str ?? '')
      .replace(/&/g, '&amp;')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;')
      .replace(/'/g, '&#39;');

  const updateHallBadgeInDom = (hallSlug, hallName, action = 'add', isUserHall = false) => {
      if (!hallSlug) return;
      const liveHallBtn = document.getElementById('a_hall');
      const isModern = document.body.classList.contains('layout-modern') || !document.body.classList.contains('layout-legacy');

      // 1. Update dataset on live #a_hall button
      if (liveHallBtn) {
          const datasetKey = isUserHall ? 'userHalls' : 'halls';
          const existing = (liveHallBtn.dataset[datasetKey] || '').split(',').filter(Boolean);
          if (action === 'add') {
              if (!existing.includes(hallSlug)) existing.push(hallSlug);
              if (isUserHall) liveHallBtn.dataset.currentUserHall = hallSlug;
              else liveHallBtn.dataset.currentHall = hallSlug;
          } else if (action === 'remove') {
              const idx = existing.indexOf(hallSlug);
              if (idx !== -1) existing.splice(idx, 1);
              if (isUserHall && liveHallBtn.dataset.currentUserHall === hallSlug) {
                  liveHallBtn.dataset.currentUserHall = existing[0] || '';
              } else if (!isUserHall && liveHallBtn.dataset.currentHall === hallSlug) {
                  liveHallBtn.dataset.currentHall = existing[0] || '';
              }
          }
          liveHallBtn.dataset[datasetKey] = existing.join(',');
      }

      // 2. Main item header badge reflects site halls
      if (isUserHall) return;

      let container = document.getElementById('hall-badge-container');
      if (!container) {
          // Check for existing .hall-badge-wrap without wrapper
          const existingWrap = document.querySelector('.hall-badge-wrap');
          if (existingWrap) {
              if (action === 'remove') {
                  existingWrap.remove();
                  return;
              }
              existingWrap.outerHTML = `<span class="badge hall-badge-wrap"><a href="/h/${escapeHtml(hallSlug)}" class="hall-badge-primary"><i class="fa-solid fa-layer-group"></i> ${escapeHtml(hallName || hallSlug)}</a></span>`;
              return;
          }
          // Dynamically create container and insert at the appropriate place
          container = document.createElement('span');
          container.id = 'hall-badge-container';
          if (isModern) {
              const tsLink = document.querySelector('.blahlol .timestamp-link');
              const tsBadge = tsLink ? tsLink.closest('.badge') : null;
              if (tsBadge && tsBadge.parentNode) {
                  tsBadge.parentNode.insertBefore(container, tsBadge);
              } else {
                  const blahlol = document.querySelector('.blahlol');
                  if (blahlol) blahlol.appendChild(container);
              }
          } else {
              const gapRight = document.querySelector('.blahlol .gapRight');
              if (gapRight && gapRight.parentNode) {
                  gapRight.parentNode.insertBefore(container, gapRight);
              } else {
                  const blahlol = document.querySelector('.blahlol');
                  if (blahlol) blahlol.appendChild(container);
              }
          }
      }

      if (action === 'add') {
          const badgeHtml = `<span class="badge hall-badge-wrap"><a href="/h/${escapeHtml(hallSlug)}" class="hall-badge-primary"><i class="fa-solid fa-layer-group"></i> ${escapeHtml(hallName || hallSlug)}</a></span>`;
          container.innerHTML = badgeHtml;
      } else if (action === 'remove') {
          const remaining = liveHallBtn ? (liveHallBtn.dataset.halls || '').split(',').filter(Boolean) : [];
          if (remaining.length > 0) {
              const nextSlug = remaining[0];
              const badgeHtml = `<span class="badge hall-badge-wrap"><a href="/h/${escapeHtml(nextSlug)}" class="hall-badge-primary"><i class="fa-solid fa-layer-group"></i> ${escapeHtml(nextSlug)}</a></span>`;
              container.innerHTML = badgeHtml;
          } else {
              container.innerHTML = '';
          }
      }
  };

  document.addEventListener('click', async (e) => {
    // Add to Hall
    const hallBtn = e.target.closest('#a_hall');
    if (hallBtn) {
        e.preventDefault();
        const itemid = hallBtn.dataset.itemId;
        const modal = document.getElementById('halls-modal');
        const select = document.getElementById('hall-select');
        const error = document.getElementById('halls-modal-error');
        const confirmBtn = document.getElementById('halls-modal-confirm');
        const siteHallRemoveBtn = document.getElementById('halls-modal-remove');
        const cancelBtn = document.getElementById('halls-modal-cancel');

        if (!modal) return window.flashMessage('Error: Halls modal not found', 3000, 'error');

        // Reset — admin-only elements need null guards for regular users
        if (select) select.innerHTML = '<option value="">-- Choose a Hall --</option>';
        if (error) error.style.display = 'none';
        if (confirmBtn) confirmBtn.style.display = 'block';
        if (siteHallRemoveBtn) siteHallRemoveBtn.style.display = 'none';
        modal.style.display = 'flex';

        // --- My Halls section ---
        const myHallsSection = document.getElementById('my-halls-section');
        const myHallsSelect = document.getElementById('my-hall-select');
        const myHallsConfirmBtn = document.getElementById('my-halls-modal-confirm');
        const myHallsCreate = document.getElementById('my-hall-create-wrap');
        const myHallsNewName = document.getElementById('my-hall-new-name');
        const myHallsError = document.getElementById('my-halls-modal-error');

        const isLoggedIn = window.f0ckSession && window.f0ckSession.logged_in;
        const getCsrf = () => (window.f0ckSession && window.f0ckSession.csrf_token) || '';
        const csrf = getCsrf();

        if (myHallsSection) {
            myHallsSection.style.display = isLoggedIn ? '' : 'none';
        }
        if (myHallsError) myHallsError.style.display = 'none';

        // Load mod/admin site halls (only if the select element exists)
        if (select) {
          try {
              const resp = await fetch('/ajax/halls');
              const allHalls = await resp.json();
              allHalls.forEach(h => {
                  const opt = document.createElement('option');
                  opt.value = h.slug;
                  opt.textContent = h.name;
                  select.appendChild(opt);
              });
              // Pre-select current hall
              const _currentHallSlug = hallBtn.dataset.currentHall
                  || (window.location.pathname.match(/^\/h\/([^\/]+)/) ? decodeURIComponent(window.location.pathname.match(/^\/h\/([^\/]+)/)[1]) : null)
                  || (hallBtn.dataset.halls ? hallBtn.dataset.halls.split(",").filter(Boolean)[0] : null);
              if (_currentHallSlug) select.value = _currentHallSlug;

              // Show Remove button if the selected hall is one the item already belongs to
              const siteHallsOnItem = (hallBtn.dataset.halls || '').split(',').filter(Boolean);
              const syncSiteRemoveBtn = () => {
                  if (!siteHallRemoveBtn) return;
                  const slug = select.value;
                  siteHallRemoveBtn.style.display = (slug && siteHallsOnItem.includes(slug)) ? '' : 'none';
              };
              syncSiteRemoveBtn();
              select.addEventListener('change', syncSiteRemoveBtn);
          } catch (err) {
              console.error('Failed to fetch halls:', err);
          }
        }

        // Load user's own halls
        const myHallsRemoveBtn = document.getElementById('my-halls-modal-remove');


        // Determine current user hall context via multiple sources:
        // 1. data-current-user-hall attribute (set by server when item loaded in hall context, or patched after add)
        // 2. URL parsing (/user/:owner/hall/:slug/...)
        // 3. data-user-halls fallback (item already in halls — pick first)
        let currentUserHall = hallBtn.dataset.currentUserHall || null;
        let currentUserHallOwner = hallBtn.dataset.currentUserHallOwner || null;
        if (!currentUserHall) {
            const urlHallMatch = window.location.pathname.match(/\/user\/([^/]+)\/hall\/([^/]+)/);
            if (urlHallMatch) {
                currentUserHallOwner = decodeURIComponent(urlHallMatch[1]);
                currentUserHall = decodeURIComponent(urlHallMatch[2]);
            }
        }
        const userHallsOnItem = (hallBtn.dataset.userHalls || '').split(',').filter(Boolean);
        // Fallback: if item is already in user halls but we have no context, pre-select the first one
        if (!currentUserHall && userHallsOnItem.length > 0) {
            currentUserHall = userHallsOnItem[0];
        }

        if (isLoggedIn && myHallsSelect) {
            myHallsSelect.innerHTML = `<option value="">${window.f0ckI18n?.hall_my_placeholder || '-- My Hall --'}</option>`;
            try {
                const resp = await fetch('/api/v2/me/halls');
                const data = await resp.json();
                if (data.success && data.halls.length) {
                    data.halls.forEach(h => {
                        const opt = document.createElement('option');
                        opt.value = h.slug;
                        opt.textContent = h.name + (h.is_private ? ' 🔒' : '');
                        myHallsSelect.appendChild(opt);
                    });
                    // Pre-select
                    if (currentUserHall) {
                        myHallsSelect.value = currentUserHall;
                    }
                } else if (data.success) {
                    const opt = document.createElement('option');
                    opt.value = '';
                    opt.textContent = window.f0ckI18n?.hall_no_halls || 'No halls yet — create one!';
                    opt.disabled = true;
                    myHallsSelect.appendChild(opt);
                }
            } catch (err) {
                console.error('Failed to fetch user halls:', err);
            }

            // Show Remove when the selected hall is one the item is already in
            function syncRemoveBtn() {
                if (!myHallsRemoveBtn) return;
                const slug = myHallsSelect.value;
                myHallsRemoveBtn.style.display = (slug && userHallsOnItem.includes(slug)) ? '' : 'none';
            }
            syncRemoveBtn();
            myHallsSelect.addEventListener('change', syncRemoveBtn);
        }

        const close = () => {
            modal.style.display = 'none';
            if (confirmBtn) { confirmBtn.disabled = false; confirmBtn.textContent = window.f0ckI18n?.hall_add_btn || 'Add to Hall'; confirmBtn.onclick = null; }
            if (siteHallRemoveBtn) { siteHallRemoveBtn.disabled = false; siteHallRemoveBtn.textContent = window.f0ckI18n?.hall_remove_btn || 'Remove from Hall'; siteHallRemoveBtn.style.display = 'none'; siteHallRemoveBtn.onclick = null; }
            if (cancelBtn) cancelBtn.onclick = null;
            if (select) select.onchange = null;
            if (myHallsConfirmBtn) { myHallsConfirmBtn.disabled = false; myHallsConfirmBtn.textContent = window.f0ckI18n?.hall_add_btn || 'Add'; myHallsConfirmBtn.onclick = null; }
            modal.onclick = null;
            if (myHallsRemoveBtn) myHallsRemoveBtn.onclick = null;
        };

        // Site hall confirm (mod/admin)
        const onConfirm = async () => {
            const hallSlug = select.value;
            if (!hallSlug) {
                error.textContent = window.f0ckI18n?.hall_select_a_hall || 'Please select a hall.';
                error.style.display = 'block';
                return;
            }

            confirmBtn.disabled = true;
            confirmBtn.textContent = window.f0ckI18n?.hall_adding || 'Adding...';

            const token = getCsrf();
            try {
                const resp = await fetch('/mod/halls/add', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                        'X-CSRF-Token': token
                    },
                    body: `id=${itemid}&hall=${encodeURIComponent(hallSlug)}&csrf_token=${encodeURIComponent(token)}`
                });
                const data = await resp.json();
                if (data.success) {
                    const hallName = (select.selectedOptions && select.selectedOptions[0]) ? select.selectedOptions[0].textContent : hallSlug;
                    updateHallBadgeInDom(hallSlug, hallName, 'add', false);
                    if (window.invalidateItemCache) window.invalidateItemCache(itemid);
                    if (window.flashMessage) window.flashMessage((window.f0ckI18n && window.f0ckI18n.hall_added) || 'Added to hall!');
                    if (window.loadItemAjax) window.loadItemAjax(window.location.href, true, { keepMedia: true, skipCache: true });
                    close();
                } else {
                    throw new Error(data.msg || 'Failed to add to hall');
                }
            } catch (err) {
                error.textContent = err.message;
                error.style.display = 'block';
                confirmBtn.disabled = false;
                confirmBtn.textContent = window.f0ckI18n?.hall_add_btn || 'Add to Hall';
            }
        };

        // My Hall confirm
        const onMyHallConfirm = async () => {
            if (!myHallsSelect || !myHallsConfirmBtn || !myHallsError) return;
            let hallSlug = myHallsSelect.value;
            const token = getCsrf();

            // Create new hall inline if requested
            if (!hallSlug && myHallsNewName && myHallsNewName.value.trim()) {
                const newName = myHallsNewName.value.trim();
                const newSlug = newName.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '');
                try {
                    myHallsConfirmBtn.disabled = true;
                    myHallsConfirmBtn.textContent = window.f0ckI18n?.hall_creating || 'Creating…';
                    const r = await fetch('/api/v2/me/halls', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': token },
                        body: JSON.stringify({ name: newName, slug: newSlug, csrf_token: token })
                    });
                    const d = await r.json();
                    if (!d.success) throw new Error(d.message || d.msg || 'Failed to create');
                    hallSlug = newSlug;
                } catch (err) {
                    myHallsError.textContent = err.message;
                    myHallsError.style.display = 'block';
                    myHallsConfirmBtn.disabled = false;
                    myHallsConfirmBtn.textContent = window.f0ckI18n?.hall_add_btn || 'Add';
                    return;
                }
            }

            if (!hallSlug) {
                myHallsError.textContent = window.f0ckI18n?.hall_choose_or_create || 'Choose a hall or enter a new name.';
                myHallsError.style.display = 'block';
                return;
            }

            myHallsConfirmBtn.disabled = true;
            myHallsConfirmBtn.textContent = window.f0ckI18n?.hall_adding || 'Adding…';
            try {
                const resp = await fetch(`/api/v2/me/halls/${encodeURIComponent(hallSlug)}/items`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': token },
                    body: JSON.stringify({ item_id: itemid, csrf_token: token })
                });
                const data = await resp.json();
                if (data.success) {
                    myHallsConfirmBtn.disabled = false;
                    myHallsConfirmBtn.textContent = window.f0ckI18n?.hall_add_btn || 'Add';
                    const hallName = (myHallsSelect && myHallsSelect.selectedOptions && myHallsSelect.selectedOptions[0])
                        ? myHallsSelect.selectedOptions[0].textContent.replace(/\s*🔒\s*$/, '')
                        : hallSlug;
                    updateHallBadgeInDom(hallSlug, hallName, 'add', true);
                    if (window.invalidateItemCache) window.invalidateItemCache(itemid);
                    if (window.flashMessage) window.flashMessage((window.f0ckI18n && window.f0ckI18n.hall_added) || 'Added to hall!');
                    if (window.loadItemAjax) window.loadItemAjax(window.location.href, true, { keepMedia: true, skipCache: true });
                    close();
                } else {
                    throw new Error(data.message || data.msg || 'Failed to add');
                }
            } catch (err) {
                myHallsError.textContent = err.message;
                myHallsError.style.display = 'block';
                myHallsConfirmBtn.disabled = false;
                myHallsConfirmBtn.textContent = window.f0ckI18n?.hall_add_btn || 'Add';
            }
        };

        if (confirmBtn) confirmBtn.onclick = onConfirm;
        if (siteHallRemoveBtn) {
            siteHallRemoveBtn.onclick = async () => {
                const hallSlug = select ? select.value : '';
                if (!hallSlug) return;
                if (!confirm(`Remove from hall "${hallSlug}"?`)) return;
                siteHallRemoveBtn.disabled = true;
                siteHallRemoveBtn.textContent = window.f0ckI18n?.hall_removing || 'Removing…';
                const token = getCsrf();
                try {
                    const resp = await fetch('/mod/halls/remove', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded',
                            'X-CSRF-Token': token
                        },
                        body: `id=${itemid}&hall=${encodeURIComponent(hallSlug)}&csrf_token=${encodeURIComponent(token)}`
                    });
                    const data = await resp.json();
                    if (data.success) {
                        updateHallBadgeInDom(hallSlug, '', 'remove', false);
                        if (window.invalidateItemCache) window.invalidateItemCache(itemid);
                        if (window.flashMessage) window.flashMessage((window.f0ckI18n && window.f0ckI18n.hall_removed) || 'Removed from hall!');
                        if (window.loadItemAjax) window.loadItemAjax(window.location.href, true, { keepMedia: true, skipCache: true });
                        close();
                    } else {
                        throw new Error(data.msg || 'Failed to remove from hall');
                    }
                } catch (err) {
                    if (error) { error.textContent = err.message; error.style.display = 'block'; }
                    siteHallRemoveBtn.disabled = false;
                    siteHallRemoveBtn.textContent = 'Remove from Hall';
                }
            };
        }
        if (cancelBtn) cancelBtn.onclick = close;
        if (myHallsConfirmBtn) myHallsConfirmBtn.onclick = onMyHallConfirm;
        if (myHallsRemoveBtn) {
            myHallsRemoveBtn.onclick = async () => {
                const slug = myHallsSelect ? myHallsSelect.value : '';
                if (!slug) return;
                myHallsRemoveBtn.disabled = true;
                myHallsRemoveBtn.textContent = 'Removing…';
                const token = getCsrf();
                try {
                    const resp = await fetch(`/api/v2/me/halls/${encodeURIComponent(slug)}/items/${itemid}`, {
                        method: 'DELETE',
                        headers: { 'X-CSRF-Token': token }
                    });
                    const data = await resp.json();
                    if (data.success) {
                        myHallsRemoveBtn.disabled = false;
                        myHallsRemoveBtn.textContent = 'Remove';
                        updateHallBadgeInDom(slug, '', 'remove', true);
                        if (window.invalidateItemCache) window.invalidateItemCache(itemid);
                        window.flashMessage((window.f0ckI18n && window.f0ckI18n.hall_removed) || 'Removed from hall!');
                        if (window.loadItemAjax) window.loadItemAjax(window.location.href, true, { keepMedia: true, skipCache: true });
                        close();
                    } else {
                        throw new Error(data.message || data.msg || 'Failed to remove');
                    }
                } catch (err) {
                    if (myHallsError) { myHallsError.textContent = err.message; myHallsError.style.display = 'block'; }
                    myHallsRemoveBtn.disabled = false;
                    myHallsRemoveBtn.textContent = 'Remove';
                }
            };
        }
        modal.onclick = (ev) => { if (ev.target === modal) close(); };
    }


    // Remove from Hall
    const removeBtn = e.target.closest('.remove-from-hall');
    if (removeBtn) {
        e.preventDefault();
        if (!confirm('Remove from this hall?')) return;

        const container = document.getElementById('comments-container');
        const itemid = container ? container.dataset.itemId : (document.querySelector('.id-link')?.dataset.itemId || null);
        const hallSlug = removeBtn.dataset.hall;

        if (!itemid || !hallSlug) return window.flashMessage('Error: Missing itemid or hallSlug', 3000, 'error');

        const token = (window.f0ckSession && window.f0ckSession.csrf_token) || '';
        const resp = await fetch('/mod/halls/remove', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                'X-CSRF-Token': token
            },
            body: `id=${itemid}&hall=${encodeURIComponent(hallSlug)}&csrf_token=${encodeURIComponent(token)}`
        });
        const data = await resp.json();
        if (data.success) {
            updateHallBadgeInDom(hallSlug, '', 'remove', false);
            if (window.invalidateItemCache) window.invalidateItemCache(itemid);
            if (window.loadItemAjax) window.loadItemAjax(window.location.href, true, { keepMedia: true, skipCache: true });
        } else {
            window.flashMessage(data.msg || 'Failed to remove from hall', 3000, 'error');
        }
    }
  });

  // Forced Password Change Logic
  const forcePasswordForm = document.getElementById('force-password-form');
  if (forcePasswordForm) {
      forcePasswordForm.addEventListener('submit', async (e) => {
          e.preventDefault();
          const new_password = document.getElementById('force_new_password').value;
          const new_password_confirm = document.getElementById('force_new_password_confirm').value;
          const status = document.getElementById('force-password-status');
          const btn = forcePasswordForm.querySelector('button');

          if (new_password !== new_password_confirm) {
              status.textContent = 'Passwords do not match.';
              status.style.display = 'block';
              status.style.background = 'rgba(217, 83, 79, 0.2)';
              status.style.color = '#d9534f';
              return;
          }

          if (new_password.length < 20) {
              status.textContent = 'Password must be at least 20 characters long.';
              status.style.display = 'block';
              status.style.background = 'rgba(217, 83, 79, 0.2)';
              status.style.color = '#d9534f';
              return;
          }

          btn.disabled = true;
          btn.textContent = 'Updating...';
          status.style.display = 'none';

          try {
              const res = await fetch('/api/v2/settings/password', {
                  method: 'PUT',
                  headers: { 
                      'Content-Type': 'application/json',
                      'X-CSRF-Token': window.f0ckSession?.csrf_token
                  },
                  body: JSON.stringify({ new_password, new_password_confirm })
              });

              const json = await res.json();
              if (json.success) {
                  status.textContent = 'Password updated! Redirecting...';
                  status.style.display = 'block';
                  status.style.background = 'rgba(92, 184, 92, 0.2)';
                  status.style.color = '#5cb85c';
                  setTimeout(() => {
                      window.location.reload();
                  }, 1500);
              } else {
                  status.textContent = json.msg || 'Error updating password.';
                  status.style.display = 'block';
                  status.style.background = 'rgba(217, 83, 79, 0.2)';
                  status.style.color = '#d9534f';
                  btn.disabled = false;
                  btn.textContent = 'Update Password';
              }
          } catch (err) {
              status.textContent = 'Network error.';
              status.style.display = 'block';
              status.style.background = 'rgba(217, 83, 79, 0.2)';
              status.style.color = '#d9534f';
              btn.disabled = false;
              btn.textContent = 'Update Password';
          }
      });
  }

})();

// ── Steuerung haptic & sound feedback ─────────────────────────────────────────
(function() {
  let _audioCtx = null;
  let _clickBuffer = null;

  function getAudioContext() {
    if (_audioCtx && _audioCtx.state !== 'closed') return _audioCtx;
    const AudioCtx = window.AudioContext || window.webkitAudioContext;
    if (!AudioCtx) return null;
    try {
      _audioCtx = new AudioCtx();
    } catch (e) {
      return null;
    }
    return _audioCtx;
  }

  // Pre-synthesize the mechanical tactile click into an AudioBuffer
  // so rapid clicks never drop due to oscillator scheduling or ramp cutoff
  function createClickBuffer(ctx) {
    try {
      const sampleRate = ctx.sampleRate || 44100;
      const duration = 0.035;
      const length = Math.ceil(sampleRate * duration);
      const buf = ctx.createBuffer(1, length, sampleRate);
      const data = buf.getChannelData(0);

      let oscPhase = 0;
      let snapPhase = 0;
      for (let i = 0; i < length; i++) {
        const t = i / sampleRate;
        // Warm body oscillator: 420Hz sweeping down to 110Hz exponentially over 24ms
        const oscFreq = t < 0.024 ? 420 * Math.pow(110 / 420, t / 0.024) : 110;
        oscPhase += (2 * Math.PI * oscFreq) / sampleRate;
        let oscGain = 0;
        if (t <= 0.0015) {
          oscGain = t / 0.0015;
        } else if (t <= 0.024) {
          oscGain = Math.pow(0.0001, (t - 0.0015) / 0.0225);
        }
        const oscVal = Math.sin(oscPhase) * oscGain;

        // Subtle transient snap layer: 1200Hz down to 320Hz triangle wave over 8ms
        const snapFreq = t < 0.008 ? 1200 * Math.pow(320 / 1200, t / 0.008) : 320;
        snapPhase += snapFreq / sampleRate;
        const normSnapPhase = snapPhase - Math.floor(snapPhase);
        const snapTri = 4 * Math.abs(normSnapPhase - 0.5) - 1;
        let snapGain = 0;
        if (t <= 0.001) {
          snapGain = (t / 0.001) * 0.3;
        } else if (t <= 0.009) {
          snapGain = 0.3 * Math.pow(0.0001 / 0.3, (t - 0.001) / 0.008);
        }
        const snapVal = snapTri * snapGain;

        data[i] = (oscVal + snapVal) * 0.15;
      }
      return buf;
    } catch (e) {
      return null;
    }
  }

  function playSteuerungClickSound() {
    try {
      const ctx = getAudioContext();
      if (!ctx) return;
      if (ctx.state === 'suspended') {
        ctx.resume().catch(() => {});
      }
      if (!_clickBuffer || _clickBuffer.sampleRate !== ctx.sampleRate) {
        _clickBuffer = createClickBuffer(ctx);
      }

      if (_clickBuffer) {
        const source = ctx.createBufferSource();
        source.buffer = _clickBuffer;
        source.connect(ctx.destination);
        source.start(0);
        return;
      }

      // Live oscillator fallback with safe lookahead if buffer creation is unavailable
      const t = Math.max(ctx.currentTime, 0) + 0.005;
      const master = ctx.createGain();
      master.gain.setValueAtTime(0.15, t);
      master.connect(ctx.destination);

      const osc = ctx.createOscillator();
      const oscGain = ctx.createGain();
      osc.type = 'sine';
      osc.frequency.setValueAtTime(420, t);
      osc.frequency.exponentialRampToValueAtTime(110, t + 0.024);

      oscGain.gain.setValueAtTime(0.0001, t);
      oscGain.gain.linearRampToValueAtTime(1.0, t + 0.002);
      oscGain.gain.exponentialRampToValueAtTime(0.0001, t + 0.024);

      osc.connect(oscGain);
      oscGain.connect(master);

      const snap = ctx.createOscillator();
      const snapGain = ctx.createGain();
      snap.type = 'triangle';
      snap.frequency.setValueAtTime(1200, t);
      snap.frequency.exponentialRampToValueAtTime(320, t + 0.008);

      snapGain.gain.setValueAtTime(0.0001, t);
      snapGain.gain.linearRampToValueAtTime(0.3, t + 0.0015);
      snapGain.gain.exponentialRampToValueAtTime(0.0001, t + 0.009);

      snap.connect(snapGain);
      snapGain.connect(master);

      osc.start(t);
      snap.start(t);
      osc.stop(t + 0.035);
      snap.stop(t + 0.015);
    } catch (e) {
      // AudioContext blocked or unsupported
    }
  }

  window.playSteuerungClickSound = playSteuerungClickSound;

  let lastSoundTime = 0;
  let lastPointerDownTime = 0;

  function resolveSteuerungTarget(el) {
    if (!el) return null;
    const steuerungEl = el.closest && el.closest('.steuerung a, .steuerung button, .steuerung [role="button"]');
    if (steuerungEl) return steuerungEl;
    if (el.id === 'prev' || (el.classList && el.classList.contains('nav-prev')) || (el.closest && el.closest('.arrow-prev, .previous-post'))) {
      return document.querySelector('.steuerung .nav-prev') || el;
    }
    if (el.id === 'next' || (el.classList && el.classList.contains('nav-next')) || (el.closest && el.closest('.arrow-next, .next-post'))) {
      return document.querySelector('.steuerung .nav-next') || el;
    }
    if (el.id === 'random' || el.id === 'nav-random' || (el.getAttribute && el.getAttribute('href') === '/random')) {
      return document.querySelector('.steuerung #random, .steuerung a[href="/random"]') || el;
    }
    return null;
  }

  function triggerSteuerungFeedback(target) {
    if (!target) return;
    const steuerungTarget = resolveSteuerungTarget(target) || target;
    if (!steuerungTarget) return;
    if (steuerungTarget.style && steuerungTarget.style.visibility === 'hidden') return;
    if (steuerungTarget.getAttribute && steuerungTarget.getAttribute('href') === '#') return;
    try {
      const comp = window.getComputedStyle(steuerungTarget);
      if (comp.visibility === 'hidden' || comp.display === 'none') return;
    } catch (e) {}

    const now = performance.now();
    // 15ms minimum gap to prevent accidental double-execution on the exact same gesture frame
    if (now - lastSoundTime < 15) return;
    lastSoundTime = now;
    lastPointerDownTime = now;

    if (navigator.vibrate) {
      try { navigator.vibrate(25); } catch (e) {}
    }

    if (steuerungTarget.classList) {
      steuerungTarget.classList.remove('is-clicked');
      void steuerungTarget.offsetWidth; // Force reflow to immediately restart CSS click animation
      steuerungTarget.classList.add('is-clicked');
      clearTimeout(steuerungTarget._clickTimer);
      steuerungTarget._clickTimer = setTimeout(() => {
        steuerungTarget.classList.remove('is-clicked');
      }, 150);
    }

    playSteuerungClickSound();
  }

  window.triggerSteuerungFeedback = triggerSteuerungFeedback;

  // Pointerdown fires immediately on finger/mouse press for instant 0ms latency tactile audio
  document.addEventListener('pointerdown', (e) => {
    if (e.button !== undefined && e.button !== 0) return;
    const target = resolveSteuerungTarget(e.target);
    if (target) {
      lastPointerDownTime = performance.now();
      triggerSteuerungFeedback(target);
    }
  }, { capture: true, passive: true });

  // Click handler serves as fallback for keyboard navigation, programmatic .click(), and touch devices
  // where pointerdown didn't fire or was prevented.
  document.addEventListener('click', (e) => {
    if (e.button !== undefined && e.button !== 0) return;
    const target = resolveSteuerungTarget(e.target);
    if (target) {
      const now = performance.now();
      // If pointerdown already triggered sound for this user interaction, don't duplicate on click release
      if (now - lastPointerDownTime < 350) return;
      triggerSteuerungFeedback(target);
    }
  }, { capture: true });
})();

// ── Steuerung icon style: #scrolltobottom smooth scroll ───────────────────────
// The alternative icon nav replaces the Zufall link with a down-chevron that
// scrolls the page to the bottom (comments / tag section).
document.addEventListener('click', (e) => {
  const link = e.target.closest('.steuerung-scroll-down');
  if (!link) return;
  e.preventDefault();
  const onaraModal = e.target.closest('#onara-modal') || (document.body.classList.contains('onara-modal-open') && document.getElementById('onara-modal'));
  if (onaraModal) {
    onaraModal.scrollTo({ top: onaraModal.scrollHeight, behavior: 'smooth' });
  } else {
    const ic = document.querySelector('.index-container');
    if (ic) {
      ic.scrollTo({ top: ic.scrollHeight, behavior: 'smooth' });
    } else {
      window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
    }
  }
});

// ── Mobile scroll-to-top button ───────────────────────────────────────────────
// Visible only on mobile (≤999px), appears below #comments-container so users
// can easily get back to the top after reading comments.
document.addEventListener('click', (e) => {
  if (!e.target.closest('.mobile-scroll-to-top')) return;
  e.preventDefault();
  const onaraModal = e.target.closest('#onara-modal') || (document.body.classList.contains('onara-modal-open') && document.getElementById('onara-modal'));
  if (onaraModal) {
    onaraModal.scrollTo({ top: 0, behavior: 'smooth' });
  } else {
    const ic = document.querySelector('.index-container');
    if (ic) {
      ic.scrollTo({ top: 0, behavior: 'smooth' });
    } else {
      window.scrollTo({ top: 0, behavior: 'smooth' });
    }
  }
  if (navigator.vibrate) navigator.vibrate(20);
});

// ── Spoiler Tags Event Delegation ─────────────────────────────────────────────
(function() {
    const isHidden = (el) => el && el.classList && (el.classList.contains('spoiler') || el.classList.contains('blur-text'));

    const reveal = (target) => {
        const path = target.composedPath ? target.composedPath() : [];
        const hiddenEl = path.find(isHidden) || target.closest('.spoiler, .blur-text');
        if (hiddenEl && !hiddenEl.classList.contains('revealed')) {
            hiddenEl.classList.add('revealed');
            hiddenEl.querySelectorAll('video, audio, img, iframe').forEach(m => m.classList.add('revealed'));
            return true;
        }
        return false;
    };

    // Capture clicks and pointer events (pointerdown is faster and catches native controls better)
    document.addEventListener('pointerdown', (e) => {
        const path = e.composedPath();
        const hiddenEl = path.find(isHidden);
        if (!hiddenEl) return;

        if (!hiddenEl.classList.contains('revealed')) {
            hiddenEl.classList.add('revealed');
            hiddenEl.querySelectorAll('video, audio, img, iframe, .video-embed-wrap, .yt-embed-wrap, .audio-embed-wrap').forEach(m => m.classList.add('revealed'));
            return;
        }

        // Spoiler is already revealed — check if the click is on an image
        const clickedImg = path.find(el => el.tagName === 'IMG' && !el.classList.contains('emoji'));
        if (clickedImg && typeof window.openImageModal === 'function') {
            // Let the click event through; the image modal handler will pick it up.
            // We just need to make sure we don't re-hide the spoiler.
            return;
        }

        // Only handle re-hiding on the container itself or non-interactive parts
        const interactive = path.find(el => 
            el.tagName === 'A' || el.tagName === 'VIDEO' || el.tagName === 'AUDIO' || 
            el.tagName === 'IFRAME' || el.tagName === 'BUTTON' || el.tagName === 'INPUT' ||
            (el.classList && (el.classList.contains('video-embed-wrap') || el.classList.contains('yt-embed-wrap') || el.classList.contains('audio-embed-wrap') || el.classList.contains('sidebar-video-link')))
        );

        if (interactive) {
            // Ensure clicked/interactive media also gets revealed class
            hiddenEl.querySelectorAll('video, audio, img, iframe, .video-embed-wrap, .yt-embed-wrap, .audio-embed-wrap').forEach(m => {
                if (m === interactive || m.contains(e.target) || interactive.contains(m)) {
                    m.classList.add('revealed');
                }
            });
            return;
        }

        hiddenEl.classList.remove('revealed');
        hiddenEl.querySelectorAll('video, audio, img, iframe, .video-embed-wrap, .yt-embed-wrap, .audio-embed-wrap').forEach(m => m.classList.remove('revealed'));
    }, { capture: true, passive: true });

    // Catch focus shifts to iframes (YouTube) which don't bubble click events
    window.addEventListener('blur', () => {
        // Use a short delay to ensure document.activeElement has updated
        setTimeout(() => {
            const active = document.activeElement;
            if (active && active.tagName === 'IFRAME') {
                const hiddenEl = active.closest('.spoiler, .blur-text');
                if (hiddenEl && !hiddenEl.classList.contains('revealed')) {
                    hiddenEl.classList.add('revealed');
                    active.classList.add('revealed');
                    const wrap = active.closest('.yt-embed-wrap, .video-embed-wrap, .audio-embed-wrap');
                    if (wrap) wrap.classList.add('revealed');
                }
            }
        }, 100);
    });

    // Catch the 'play' event which fires when the video starts, even if UI swallows the click
    document.addEventListener('play', (e) => {
        const hiddenEl = e.target.closest('.spoiler, .blur-text');
        if (hiddenEl) {
            hiddenEl.classList.add('revealed');
            e.target.classList.add('revealed');
            const wrap = e.target.closest('.video-embed-wrap, .yt-embed-wrap, .audio-embed-wrap');
            if (wrap) wrap.classList.add('revealed');
        }
    }, true);
  
    // YouTube client-side oEmbed: fetch directly from the browser (avoids Tor consent walls),
    // then push to server cache so sidebar/other users benefit.
    const _tryYtOembed = async (ytUrl) => {
        try {
            const r = await fetch(`https://www.youtube.com/oembed?url=${encodeURIComponent(ytUrl)}&format=json`);
            if (!r.ok) return null;
            const d = await r.json();
            if (!d.title) return null;
            const meta = { title: d.title, site_name: 'youtube.com', author: d.author_name || 'Unknown' };
            // Fire-and-forget push to server cache
            try {
                const csrf = window.f0ckSession?.csrf_token;
                fetch('/api/v2/meta/cache', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json', ...(csrf ? { 'X-CSRF-Token': csrf } : {}) },
                    body: JSON.stringify({ url: ytUrl, meta })
                }).catch(() => {});
            } catch (_) {}
            return { success: true, fields: [meta.title, meta.author].filter(Boolean) };
        } catch (_) { return null; }
    };

    // Retroactive Metadata Extraction Logic
    document.addEventListener('click', async (e) => {
        const metaBtn = e.target.closest('#a_metadata');
        if (metaBtn) {
            e.preventDefault();
            const itemid = metaBtn.dataset.itemId;
            const ytSrc  = metaBtn.dataset.src || null; // Set for YouTube items
            const modal = document.getElementById('metadata-modal');
            if (!modal) return;

            const list = document.getElementById('metadata-suggestion-list');
            const loading = document.getElementById('metadata-loading');
            const resultsCont = document.getElementById('metadata-results');
            const error = document.getElementById('metadata-error');
            const noResults = document.getElementById('metadata-no-results');

            modal.style.display = 'flex';
            document.body.classList.add('modal-open');
            loading.style.display = 'block';
            resultsCont.style.display = 'none';
            error.style.display = 'none';
            noResults.style.display = 'none';
            list.innerHTML = '';

            const close = () => { 
                modal.style.display = 'none';
                document.body.classList.remove('modal-open');
                document.removeEventListener('keydown', onEsc);
                window.removeEventListener('pjax:start', onNav);
                document.removeEventListener('f0ck:contentLoaded', onContentLoaded);
            };
            const onEsc = (ev) => { if (ev.key === 'Escape') close(); };

            // When navigation starts while modal is open: show loading spinner and wait for new content
            const onNav = () => {
                // Reset modal to loading state for the incoming item
                loading.style.display = 'block';
                resultsCont.style.display = 'none';
                error.style.display = 'none';
                noResults.style.display = 'none';
                list.innerHTML = '';
                // Listen for content to finish loading, then reload with new item's metadata
                document.addEventListener('f0ck:contentLoaded', onContentLoaded, { once: true });
                window.removeEventListener('pjax:start', onNav);
            };

            const onContentLoaded = async () => {
                // Find the new item's metadata button
                const newMetaBtn = document.getElementById('a_metadata');
                if (!newMetaBtn) {
                    // New item doesn't support metadata extraction (Flash, etc.)
                    // Keep modal open but show a friendly message instead of closing
                    loading.style.display = 'none';
                    resultsCont.style.display = 'none';
                    error.textContent = 'Cannot extract metadata for this type of content.';
                    error.style.display = 'block';
                    // Re-attach nav listener so user can still navigate away
                    window.addEventListener('pjax:start', onNav);
                    return;
                }
                const newItemId  = newMetaBtn.dataset.itemId;
                const newYtSrc   = newMetaBtn.dataset.src || null;
                // Re-attach nav listener for subsequent navigations
                window.addEventListener('pjax:start', onNav);
                // Fetch metadata for the new item (YouTube → oEmbed URL fetch, others → file extract)
                try {
                    let resp, data;
                    if (newYtSrc) {
                        // Try client-side oEmbed first (avoids Tor consent walls)
                        data = await _tryYtOembed(newYtSrc);
                        if (!data) {
                            resp = await fetch(`/api/v2/meta/fetch?url=${encodeURIComponent(newYtSrc)}`);
                            const raw = await resp.json();
                            data = raw.success
                                ? { success: true, fields: [raw.meta.title, raw.meta.author].filter(Boolean) }
                                : raw;
                        }
                    } else {
                        resp = await fetch(`/api/v2/meta/extract/item/${newItemId}`);
                        data = await resp.json();
                    }
                    loading.style.display = 'none';
                    if (data.success && data.fields && data.fields.length > 0) {
                        resultsCont.style.display = 'block';
                        const tagsDiv = document.querySelector('#tags');
                        const currentTags = tagsDiv ? Array.from(tagsDiv.querySelectorAll('.badge a')).map(a => a.textContent.trim().toLowerCase()) : [];
                        list.innerHTML = '';
                        data.fields.forEach(field => {
                            const pill = document.createElement('div');
                            pill.className = 'meta-suggestion';
                            const isSelected = currentTags.includes(field.toLowerCase());
                            if (isSelected) pill.classList.add('selected');
                            pill.innerHTML = `<i class="fa-solid ${isSelected ? 'fa-check-circle' : 'fa-plus-circle'}" style="user-select:none"></i> <span></span>`;
                            pill.querySelector('span').textContent = field;

                            pill.addEventListener('mouseup', (ev) => {
                                const sel = window.getSelection?.()?.toString().trim();
                                if (!sel) return;
                                pill.addEventListener('click', (e) => e.stopImmediatePropagation(), { once: true, capture: true });
                                ev.stopPropagation();
                                window._showSelTagPopover?.(sel, pill, async (confirmed) => {
                                    window.getSelection?.()?.removeAllRanges();
                                    try {
                                        const addResp = await fetch(`/api/v2/tags/${newItemId}`, {
                                            method: 'POST',
                                            headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': window.f0ckSession?.csrf_token },
                                            body: JSON.stringify({ tagname: confirmed })
                                        });
                                        const addData = await addResp.json();
                                        if (addData.success) {
                                            if (window.renderTags) window.renderTags(addData.tags, confirmed);
                                            if (window.showFlash) window.showFlash(`Tag "${confirmed}" added!`);
                                        } else {
                                            if (window.showFlash) window.showFlash(addData.msg || 'Error adding tag', 'error');
                                        }
                                    } catch (_) {
                                        if (window.showFlash) window.showFlash('Network error', 'error');
                                    }
                                });
                            });

                            pill.onclick = async (ev) => {
                                ev.stopPropagation();
                                if (pill.classList.contains('selected')) return;
                                pill.style.opacity = '0.5';
                                pill.style.pointerEvents = 'none';
                                try {
                                    const addResp = await fetch(`/api/v2/tags/${newItemId}`, {
                                        method: 'POST',
                                        headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': window.f0ckSession?.csrf_token },
                                        body: JSON.stringify({ tagname: field })
                                    });
                                    const addData = await addResp.json();
                                    if (addData.success) {
                                        pill.classList.add('selected');
                                        pill.querySelector('i').className = 'fa-solid fa-check-circle';
                                        if (window.renderTags) window.renderTags(addData.tags, field);
                                        if (window.showFlash) window.showFlash(`Tag "${field}" added!`);
                                    } else {
                                        if (window.showFlash) window.showFlash(addData.msg || 'Error adding tag', 'error');
                                    }
                                } catch (_) {
                                    if (window.showFlash) window.showFlash('Network error', 'error');
                                } finally {
                                    pill.style.opacity = '';
                                    pill.style.pointerEvents = '';
                                }
                            };
                            list.appendChild(pill);
                        });
                    } else if (data.success) {
                        resultsCont.style.display = 'block';
                        noResults.style.display = 'block';
                    } else {
                        error.textContent = data.msg || 'Extraction failed';
                        error.style.display = 'block';
                    }
                } catch (err) {
                    loading.style.display = 'none';
                    error.textContent = 'Network error';
                    error.style.display = 'block';
                }
            };

            document.addEventListener('keydown', onEsc);
            window.addEventListener('pjax:start', onNav);

            document.getElementById('metadata-modal-close')?.addEventListener('click', close);
            document.getElementById('metadata-modal-cancel')?.addEventListener('click', close);
            modal.onclick = (ev) => { if (ev.target === modal) close(); };
            document.addEventListener('metadata-modal-close', close, { once: true });

            try {
                let resp, data;
                if (ytSrc) {
                    // Try client-side oEmbed first (avoids Tor consent walls)
                    data = await _tryYtOembed(ytSrc);
                    if (!data) {
                        resp = await fetch(`/api/v2/meta/fetch?url=${encodeURIComponent(ytSrc)}`);
                        const raw = await resp.json();
                        data = raw.success
                            ? { success: true, fields: [raw.meta.title, raw.meta.author].filter(Boolean) }
                            : raw;
                    }
                } else {
                    resp = await fetch(`/api/v2/meta/extract/item/${itemid}`);
                    data = await resp.json();
                }
                loading.style.display = 'none';

                if (data.success && data.fields && data.fields.length > 0) {
                    resultsCont.style.display = 'block';
                    
                    // Get current tags to determine selected state
                    const tagsDiv = document.querySelector('#tags');
                    const currentTags = Array.from(tagsDiv.querySelectorAll('.badge a')).map(a => a.textContent.trim().toLowerCase());

                    data.fields.forEach(field => {
                        const pill = document.createElement('div');
                        pill.className = 'meta-suggestion';
                        const isSelected = currentTags.includes(field.toLowerCase());
                        if (isSelected) pill.classList.add('selected');
                        
                        pill.innerHTML = `<i class="fa-solid ${isSelected ? 'fa-check-circle' : 'fa-plus-circle'}" style="user-select:none"></i> <span></span>`;
                        pill.querySelector('span').textContent = field;
                        
                        // mouseup fires after a drag-select; click only fires for plain clicks
                        pill.addEventListener('mouseup', (ev) => {
                            const sel = window.getSelection?.()?.toString().trim();
                            if (!sel) return;
                            // Block the click that would follow this mouseup
                            pill.addEventListener('click', (e) => e.stopImmediatePropagation(), { once: true, capture: true });
                            ev.stopPropagation();
                            window._showSelTagPopover?.(sel, pill, async (confirmed) => {
                                window.getSelection?.()?.removeAllRanges();
                                try {
                                    const addResp = await fetch(`/api/v2/tags/${itemid}`, {
                                        method: 'POST',
                                        headers: {
                                            'Content-Type': 'application/json',
                                            'X-CSRF-Token': window.f0ckSession?.csrf_token
                                        },
                                        body: JSON.stringify({ tagname: confirmed })
                                    });
                                    const addData = await addResp.json();
                                    if (addData.success) {
                                        if (window.renderTags) window.renderTags(addData.tags, confirmed);
                                        if (window.showFlash) window.showFlash(`Tag "${confirmed}" added!`);
                                    } else {
                                        if (window.showFlash) window.showFlash(addData.msg || 'Error adding tag', 'error');
                                    }
                                } catch (_) {
                                    if (window.showFlash) window.showFlash('Network error', 'error');
                                }
                            });
                        });

                        pill.onclick = async (ev) => {
                            ev.stopPropagation();
                            if (pill.classList.contains('selected')) return;
                            pill.style.opacity = '0.5';
                            pill.style.pointerEvents = 'none';
                            try {
                                const addResp = await fetch(`/api/v2/tags/${itemid}`, {
                                    method: 'POST',
                                    headers: {
                                        'Content-Type': 'application/json',
                                        'X-CSRF-Token': window.f0ckSession?.csrf_token
                                    },
                                    body: JSON.stringify({ tagname: field })
                                });
                                const addData = await addResp.json();
                                if (addData.success) {
                                    pill.classList.add('selected');
                                    pill.querySelector('i').className = 'fa-solid fa-check-circle';
                                    if (window.renderTags) window.renderTags(addData.tags, field);
                                    if (window.showFlash) window.showFlash(`Tag "${field}" added!`);
                                } else {
                                    if (window.showFlash) window.showFlash(addData.msg || 'Error adding tag', 'error');
                                }
                            } catch (_) {
                                if (window.showFlash) window.showFlash('Network error', 'error');
                            } finally {
                                pill.style.opacity = '';
                                pill.style.pointerEvents = '';
                            }
                        };
                        list.appendChild(pill);
                    });
                } else if (data.success) {
                    resultsCont.style.display = 'block';
                    noResults.style.display = 'block';
                } else {
                    error.textContent = data.msg || 'Extraction failed';
                    error.style.display = 'block';
                }
            } catch (err) {
                loading.style.display = 'none';
                error.textContent = 'Network error';
                error.style.display = 'block';
            }
        }
    });

  // Title Status Notification Management
  let titleStatusTimeout = null;
  function setTitleStatus(statusEl, text, isError = false) {
    if (!statusEl) return;
    if (titleStatusTimeout) {
      clearTimeout(titleStatusTimeout);
      titleStatusTimeout = null;
    }
    if (!text) {
      statusEl.style.display = 'none';
      statusEl.textContent = '';
      return;
    }
    statusEl.textContent = text;
    statusEl.style.color = isError ? '#e84040' : '';
    statusEl.style.display = 'inline';
    titleStatusTimeout = setTimeout(() => {
      statusEl.style.display = 'none';
      statusEl.textContent = '';
      titleStatusTimeout = null;
    }, 4000);
  }

  function clearTitleStatus(statusEl) {
    if (!statusEl) return;
    if (titleStatusTimeout) {
      clearTimeout(titleStatusTimeout);
      titleStatusTimeout = null;
    }
    statusEl.style.display = 'none';
    statusEl.textContent = '';
  }

  // Post & File Info Modal Logic
  document.addEventListener('click', (e) => {
    const infoBtn = e.target.closest('#a_info');
    if (infoBtn) {
      e.preventDefault();
      if (window._currentActiveAlbumGallery && typeof window._currentActiveAlbumGallery.updateInfoModal === 'function') {
        window._currentActiveAlbumGallery.updateInfoModal();
      }
      const modal = document.getElementById('info-modal');
      if (modal) {
        modal.style.display = 'flex';
        document.body.classList.add('modal-open');
      }
      return;
    }

    const closeBtn = e.target.closest('#info-modal-close, #info-modal-close-icon');
    if (closeBtn || e.target.id === 'info-modal') {
      e.preventDefault();
      const modal = document.getElementById('info-modal');
      if (modal) {
        modal.style.display = 'none';
        document.body.classList.remove('modal-open');
      }
      return;
    }

    const copyHashBtn = e.target.closest('#info-copy-hash-btn');
    if (copyHashBtn) {
      e.preventDefault();
      const hash = copyHashBtn.dataset.hash;
      if (hash && navigator.clipboard) {
        navigator.clipboard.writeText(hash).then(() => {
          const origText = copyHashBtn.innerHTML;
          copyHashBtn.innerHTML = '<i class="fa-solid fa-check"></i> Copied!';
          setTimeout(() => { copyHashBtn.innerHTML = origText; }, 2000);
        }).catch(err => console.error('Copy failed', err));
      }
      return;
    }


    const visCancelBtn = e.target.closest('#visibility-modal-cancel');
    if (visCancelBtn || e.target.id === 'visibility-modal') {
      const modal = document.getElementById('visibility-modal');
      if (modal) {
        modal.style.display = 'none';
        document.body.classList.remove('modal-open');
      }
      return;
    }

    const visSaveBtn = e.target.closest('#visibility-modal-save');
    if (visSaveBtn) {
      e.preventDefault();
      const modal = document.getElementById('visibility-modal');
      const inputId = document.getElementById('visibility-item-id');
      const selectedRadio = modal ? modal.querySelector('input[name="visibility"]:checked') : null;
      if (!inputId || !selectedRadio) return;

      const id = inputId.value;
      const nextVis = parseInt(selectedRadio.value, 10);

      visSaveBtn.disabled = true;
      const origText = visSaveBtn.textContent;
      visSaveBtn.textContent = 'Saving...';

      fetch('/api/v2/item/visibility', {
          method: 'POST',
          headers: { 
            'Content-Type': 'application/x-www-form-urlencoded',
            'X-CSRF-Token': window.f0ckSession?.csrf_token
          },
          body: new URLSearchParams({ postid: id, id: id, visibility: nextVis })
      })
      .then(r => r.json())
      .then(data => {
          visSaveBtn.disabled = false;
          visSaveBtn.textContent = origText;
          if (data.success) {
              const visVal = parseInt(data.visibility, 10);
              const titles = ['Public', 'Unlisted', 'Private', 'Unavailable'];
              const icons = ['fa-globe', 'fa-link', 'fa-lock', 'fa-ban'];
              const colors = ['var(--color-success, #00C851)', 'var(--color-warning, #ffbb33)', 'var(--color-danger, #ff4444)', 'var(--color-danger, #ff4444)'];

              const visBtn = document.getElementById('a_visibility');
              if (visBtn) {
                  visBtn.dataset.visibility = visVal;
                  visBtn.setAttribute('title', `Visibility: ${titles[visVal]} (Click to change)`);
              }

              const unavBtn = document.getElementById('a_unavailable');
              if (unavBtn) {
                  unavBtn.dataset.visibility = visVal;
                  unavBtn.classList.toggle('active', visVal === 3);
                  unavBtn.style.color = visVal === 3 ? 'var(--danger, #ff4444)' : '';
                  unavBtn.setAttribute('title', visVal === 3 ? 'Make Available (Public)' : 'Make Unavailable (451)');
              }

              const infoVisBtn = document.getElementById('info-visibility-edit-btn');
              if (infoVisBtn) {
                  infoVisBtn.dataset.visibility = visVal;
              }

              const infoVisLabel = document.getElementById('info-visibility-label');
              if (infoVisLabel) {
                  infoVisLabel.innerHTML = `<i class="fa-solid ${icons[visVal]}" style="color: ${colors[visVal]};"></i> ${titles[visVal]}`;
              }

              if (modal) {
                  modal.style.display = 'none';
                  document.body.classList.remove('modal-open');
              }
              if (window.flashMessage) window.flashMessage(`VISIBILITY SET TO ${titles[visVal].toUpperCase()}`);
          } else {
              if (window.flashError) window.flashError(data.msg || 'Failed to update visibility');
          }
      })
      .catch(err => {
          visSaveBtn.disabled = false;
          visSaveBtn.textContent = origText;
          console.error('Error changing visibility:', err);
          if (window.flashError) window.flashError('Network error');
      });
      return;
    }
    // Title text click to edit
    const titleText = e.target.closest('.item_title_text');
    if (titleText && !document.body.classList.contains('preview-as-user')) {
      const container = titleText.closest('.item_title');
      if (container) {
        const editWrap = container.querySelector('.info-title-edit-wrap');
        const input = container.querySelector('#info-title-input');
        const status = container.querySelector('#info-title-status') || document.getElementById('info-title-status');
        clearTitleStatus(status);
        if (editWrap && input) {
          e.preventDefault();
          titleText.style.display = 'none';
          editWrap.style.display = 'flex';
          input.dataset.origVal = input.value;
          input.focus();
          if (input.value) {
            input.select();
          }
          return;
        }
      }
    }

    // Close title editor when clicking outside .item_title
    const openTitleWrap = document.querySelector('.item_title .info-title-edit-wrap');
    if (openTitleWrap && openTitleWrap.style.display !== 'none' && !e.target.closest('.item_title')) {
      const container = openTitleWrap.closest('.item_title');
      const textEl = container?.querySelector('.item_title_text');
      const input = container?.querySelector('#info-title-input');
      const status = container?.querySelector('#info-title-status') || document.getElementById('info-title-status');
      clearTitleStatus(status);
      openTitleWrap.style.display = 'none';
      if (textEl) textEl.style.display = '';
      if (input && input.dataset.origVal !== undefined) {
        input.value = input.dataset.origVal;
      }
    }

    // Title save button
    const saveBtn = e.target.closest('#info-title-save');
    if (saveBtn) {
      e.preventDefault();
      const container = saveBtn.closest('.item_title') || document;
      const input = container.querySelector('#info-title-input') || document.getElementById('info-title-input');
      const status = container.querySelector('#info-title-status') || document.getElementById('info-title-status');
      if (!input) return;

      const itemId = input.dataset.itemId;
      const newTitle = input.value.trim();
      const csrf = window.f0ckSession?.csrf_token;

      saveBtn.disabled = true;
      const origIcon = saveBtn.innerHTML;
      saveBtn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i>';

      fetch(`/api/v2/items/${itemId}/title`, {
        method: 'PATCH',
        headers: {
          'Content-Type': 'application/json',
          'X-CSRF-Token': csrf
        },
        body: JSON.stringify({ title: newTitle })
      })
        .then(r => r.json())
        .then(data => {
          saveBtn.disabled = false;
          saveBtn.innerHTML = origIcon;
          if (data.success) {
            const savedTitle = (data.title || '').trim();
            input.value = savedTitle;
            input.dataset.origVal = savedTitle;

            // Update any plain-text title display element
            const textEl = container.querySelector('.item_title_text') || document.querySelector('.item_title_text');
            if (textEl) {
              if (savedTitle) {
                textEl.textContent = savedTitle;
                textEl.classList.remove('no-title');
              } else {
                textEl.innerHTML = '<em>Add a title</em>';
                textEl.classList.add('no-title');
              }
              textEl.style.display = '';
            }

            const editWrap = container.querySelector('.info-title-edit-wrap');
            if (editWrap) {
              editWrap.style.display = 'none';
            }

            // Invalidate cache so navigating next/prev fetches fresh HTML from server
            if (window.invalidateItemCache) {
              window.invalidateItemCache(itemId);
            }

            clearTitleStatus(status);

            if (window.flashMessage) {
              window.flashMessage('Title saved', 2000, 'success');
            }
          } else {
            setTitleStatus(status, data.msg || 'Error saving title', true);
            if (window.flashMessage) {
              window.flashMessage('Error while saving Title', 3000, 'error');
            }
          }
        })
        .catch(() => {
          saveBtn.disabled = false;
          saveBtn.innerHTML = origIcon;
          setTitleStatus(status, 'Network error', true);
          if (window.flashMessage) {
            window.flashMessage('Error while saving Title', 3000, 'error');
          }
        });
      return;
    }

    // Info Modal: Regenerate Thumbnail button
    const rethumbBtn = e.target.closest('#info-rethumb-btn');
    if (rethumbBtn) {
      e.preventDefault();
      const itemId = rethumbBtn.dataset.itemId || document.getElementById('info-title-input')?.dataset.itemId;
      if (!itemId) return;

      rethumbBtn.disabled = true;
      const origText = rethumbBtn.innerHTML;
      rethumbBtn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Regenerating...';

      const csrf = window.f0ckSession?.csrf_token;
      fetch(`/api/v2/items/${itemId}/rethumb`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-CSRF-Token': csrf
        }
      })
        .then(r => r.json())
        .then(data => {
          rethumbBtn.disabled = false;
          rethumbBtn.innerHTML = origText;
          if (data.success) {
            if (window.flashMessage) window.flashMessage('THUMBNAIL REGENERATED');
            else if (window.showFlash) window.showFlash('Thumbnail regenerated');
            // Cache-bust thumbnails and player media on page
            const timestamp = Date.now();
            if (typeof window.refreshItemThumbnails === 'function') {
              window.refreshItemThumbnails(itemId, timestamp, data.has_coverart);
            } else {
              document.querySelectorAll(`img[src*="/t/${itemId}.webp"]`).forEach(img => {
                const url = new URL(img.src, window.location.origin);
                url.searchParams.set('t', timestamp);
                img.src = url.toString();
              });
              document.querySelectorAll(`.thumb[data-bg*="/t/${itemId}.webp"]`).forEach(thumb => {
                const bg = thumb.dataset.bg;
                if (bg) {
                  const url = new URL(bg, window.location.origin);
                  url.searchParams.set('t', timestamp);
                  thumb.style.setProperty('--thumb-bg', `url('${url.toString()}')`);
                }
              });
            }
          } else {
            if (window.flashError) window.flashError(data.msg || 'Regeneration failed');
            else alert(data.msg || 'Regeneration failed');
          }
        })
        .catch(err => {
          rethumbBtn.disabled = false;
          rethumbBtn.innerHTML = origText;
          console.error('Error regenerating thumbnail:', err);
          if (window.flashError) window.flashError('Network error');
        });
      return;
    }

    // Info Modal: Set Expiry button
    const setExpiryBtn = e.target.closest('#info-set-expiry-btn');
    if (setExpiryBtn) {
      e.preventDefault();
      const select = document.getElementById('info-expiry-select');
      const itemId = setExpiryBtn.dataset.itemId || select?.dataset.itemId || document.getElementById('info-title-input')?.dataset.itemId;
      if (!itemId || !select) return;

      const selectedExpiry = select.value;

      setExpiryBtn.disabled = true;
      select.disabled = true;
      const origText = setExpiryBtn.innerHTML;
      setExpiryBtn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i>';

      const csrf = window.f0ckSession?.csrf_token;
      fetch(`/api/v2/items/${itemId}/expiry`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-CSRF-Token': csrf
        },
        body: JSON.stringify({ expiry: selectedExpiry })
      })
        .then(r => r.json())
        .then(data => {
          setExpiryBtn.disabled = false;
          select.disabled = false;
          setExpiryBtn.innerHTML = origText;
          if (data.success) {
            const label = document.getElementById('info-expiry-label');
            if (label) {
              if (data.expires_at) {
                label.innerHTML = `<i class="fa-solid fa-clock"></i> ${data.expires_in || ('in ' + new Date(data.expires_at * 1000).toLocaleString())}`;
                label.setAttribute('title', new Date(data.expires_at * 1000).toLocaleString());
                label.style.color = '#ffaa00';
              } else {
                label.innerHTML = '<i class="fa-solid fa-clock-slash" style="color: var(--text-muted, #888);"></i> Never';
                label.removeAttribute('title');
                label.style.color = '';
              }
            }
            if (data.purged) {
              if (window.flashMessage) window.flashMessage('ITEM EXPIRED AND PURGED');
              setTimeout(() => {
                window.location.href = '/';
              }, 1200);
            } else {
              if (window.flashMessage) window.flashMessage('EXPIRATION UPDATED');
            }
          } else {
            if (window.flashError) window.flashError(data.msg || 'Failed to update expiry');
          }
        })
        .catch(err => {
          setExpiryBtn.disabled = false;
          select.disabled = false;
          setExpiryBtn.innerHTML = origText;
          console.error('Error setting expiry:', err);
          if (window.flashError) window.flashError('Network error');
        });
      return;
    }

    // Close when clicking outside modal content
    const infoModal = document.getElementById('info-modal');
    if (infoModal && e.target === infoModal) {
      infoModal.style.display = 'none';
      document.body.classList.remove('modal-open');
    }
  });

  // Handle Enter and Escape key on title input
  document.addEventListener('keydown', (e) => {
    if (e.target && e.target.id === 'info-title-input') {
      if (e.key === 'Enter') {
        e.preventDefault();
        const container = e.target.closest('.item_title') || document;
        const saveBtn = container.querySelector('#info-title-save') || document.getElementById('info-title-save');
        if (saveBtn) saveBtn.click();
      } else if (e.key === 'Escape') {
        e.preventDefault();
        const container = e.target.closest('.item_title') || document;
        const editWrap = container.querySelector('.info-title-edit-wrap');
        const textEl = container.querySelector('.item_title_text');
        const status = container.querySelector('#info-title-status') || document.getElementById('info-title-status');
        clearTitleStatus(status);
        const input = e.target;
        if (editWrap) editWrap.style.display = 'none';
        if (textEl) textEl.style.display = '';
        if (input && input.dataset.origVal !== undefined) {
          input.value = input.dataset.origVal;
        }
      }
    }
  });

  // Clear title error/status as soon as user types into title input
  document.addEventListener('input', (e) => {
    if (e.target && e.target.id === 'info-title-input') {
      const container = e.target.closest('.item_title') || document;
      const status = container.querySelector('#info-title-status') || document.getElementById('info-title-status');
      clearTitleStatus(status);
    }
  });

  // Ensure any navigation event restores the scroll state
  window.addEventListener('pjax:start', () => {
    if (window.resetGlobalScrollState) window.resetGlobalScrollState();
    if (window.hideAllModals) window.hideAllModals();
  });

  // Global click interceptor for dynamically blurred thumbnails (NSFW, NSFL, SFW, Unrated)
  document.addEventListener('click', (e) => {
    // If no blur options are active, skip entirely
    const blurNsfw = localStorage.getItem('blurNsfw') === 'true';
    const blurNsfl = localStorage.getItem('blurNsfl') === 'true';
    const blurSfw = localStorage.getItem('blurSfw') === 'true';
    const blurUntagged = localStorage.getItem('blurUntagged') === 'true';
    if (!blurNsfw && !blurNsfl && !blurSfw && !blurUntagged) return;
    
    // Check if they clicked a blurred media-object container on the detail page
    const mediaObj = e.target.closest('.media-object');
    if (mediaObj && localStorage.getItem('blurDetail') !== 'false') {
      const mode = mediaObj.getAttribute('data-mode');
      let shouldBlurThis = false;
      if (mode === 'nsfw') shouldBlurThis = blurNsfw;
      else if (mode === 'nsfl') shouldBlurThis = blurNsfl;
      else if (mode === 'sfw') shouldBlurThis = blurSfw;
      else if (mode === 'untagged') shouldBlurThis = blurUntagged;
      
      if (shouldBlurThis && !mediaObj.classList.contains('revealed')) {
        e.preventDefault();
        e.stopPropagation();
        mediaObj.classList.add('revealed');

        // Start audio/video playback cleanly on reveal
        const videoElem = mediaObj.querySelector('video') || mediaObj.querySelector('audio');
        if (videoElem) {
          videoElem.play().catch(() => {});
        }

        // Start Ruffle playback if this is a Flash item — it was loaded with autoplay:"off"
        const rufflePlayer = mediaObj.querySelector('ruffle-player');
        if (rufflePlayer) {
          try { rufflePlayer.play(); } catch(err) {}
        }
        return;
      }
    }

    // Check if they clicked the elegant hide-again button in the corner
    const hideBtn = e.target.closest('.hide-thumb-btn');
    if (hideBtn) {
      e.preventDefault();
      e.stopPropagation();
      const thumb = hideBtn.closest('a.thumb');
      if (thumb) {
        // Stop any active hover video preview immediately
        if (typeof window.clearHoverPreview === 'function') {
          window.clearHoverPreview();
        }
        
        thumb.classList.remove('revealed');
        hideBtn.remove();
        
        // Put the pre-blurred background image back if applicable
        const baseBg = thumb.dataset.bg;
        const mode = thumb.getAttribute('data-mode');
        let shouldBlurThis = false;
        if (mode === 'nsfw') shouldBlurThis = blurNsfw;
        else if (mode === 'nsfl') shouldBlurThis = blurNsfl;
        else if (mode === 'sfw') shouldBlurThis = blurSfw;
        else if (mode === 'null' || !mode) shouldBlurThis = blurUntagged;
        
        if (baseBg && shouldBlurThis) {
          const finalBg = window.applyThumbCacheBust(baseBg.replace('.webp', '_blur.webp'));
          thumb.style.setProperty('--thumb-bg', `url('${finalBg}')`);
        }
      }
      return;
    }
    
    const thumb = e.target.closest('a.thumb');
    if (!thumb) return;
    
    // Determine if this thumbnail rating is set to be blurred
    const mode = thumb.getAttribute('data-mode'); // 'nsfw', 'nsfl', 'sfw', or 'null' (untagged)
    let shouldBlurThis = false;
    if (mode === 'nsfw') shouldBlurThis = blurNsfw;
    else if (mode === 'nsfl') shouldBlurThis = blurNsfl;
    else if (mode === 'sfw') shouldBlurThis = blurSfw;
    else if (mode === 'null' || !mode) shouldBlurThis = blurUntagged;
    
    if (shouldBlurThis) {
      if (!thumb.classList.contains('revealed')) {
        e.preventDefault();
        e.stopPropagation();
        thumb.classList.add('revealed');
        
        // Dynamically load the standard unblurred background image
        const baseBg = thumb.dataset.bg;
        if (baseBg && shouldBlurThis) {
          const finalBg = window.applyThumbCacheBust(baseBg);
          thumb.style.setProperty('--thumb-bg', `url('${finalBg}')`);
        }
        
        // Dynamically inject the hide-again eye-slash button inside <p>
        const p = thumb.querySelector('p');
        if (p && !p.querySelector('.hide-thumb-btn')) {
          const btn = document.createElement('button');
          btn.className = 'hide-thumb-btn';
          btn.innerHTML = '<i class="fa-solid fa-eye-slash"></i>';
          btn.title = 'Hide thumbnail again';
          p.appendChild(btn);
        }

        // Automatically start the hover video preview immediately on reveal since mouse is already over the item
        if (typeof window.startHoverPreview === 'function') {
          window.startHoverPreview(thumb, 0);
        }
      }
    }
  }, true);
})();

// --- Grid Keyboard Accessibility ---
document.addEventListener('keydown', (e) => {
  const isTab = e.key === 'Tab';
  const isArrow = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key);
  if (!isTab && !isArrow) return;

  const thumbs = Array.from(document.querySelectorAll('.posts .thumb'));
  if (thumbs.length === 0) return;

  if (isTab && document.activeElement === document.body) {
    e.preventDefault();
    thumbs[0].focus();
    return;
  }

  const active = document.activeElement;
  if (isArrow && active && active.classList.contains('thumb')) {
    const activeRect = active.getBoundingClientRect();
    const activeCenter = {
      x: activeRect.left + activeRect.width / 2,
      y: activeRect.top + activeRect.height / 2
    };

    let bestMatch = null;
    let minDistance = Infinity;

    thumbs.forEach(thumb => {
      if (thumb === active) return;
      
      const rect = thumb.getBoundingClientRect();
      if (rect.width === 0 && rect.height === 0) return;

      const center = {
        x: rect.left + rect.width / 2,
        y: rect.top + rect.height / 2
      };

      const dxCenter = center.x - activeCenter.x;
      const dyCenter = center.y - activeCenter.y;
      const absDx = Math.abs(dxCenter);
      const absDy = Math.abs(dyCenter);

      let isCandidate = false;
      let primaryDist = 0;
      let secondaryGap = 0;

      if (e.key === 'ArrowRight') {
        // Must be to the right, and within a 60 degree cone
        isCandidate = dxCenter > 0 && absDx >= absDy * 0.5;
        primaryDist = absDx;
        // Gap on the Y axis. If they overlap, gap is 0
        secondaryGap = Math.max(0, Math.max(activeRect.top, rect.top) - Math.min(activeRect.bottom, rect.bottom));
      } else if (e.key === 'ArrowLeft') {
        isCandidate = dxCenter < 0 && absDx >= absDy * 0.5;
        primaryDist = absDx;
        secondaryGap = Math.max(0, Math.max(activeRect.top, rect.top) - Math.min(activeRect.bottom, rect.bottom));
      } else if (e.key === 'ArrowDown') {
        isCandidate = dyCenter > 0 && absDy >= absDx * 0.5;
        primaryDist = absDy;
        secondaryGap = Math.max(0, Math.max(activeRect.left, rect.left) - Math.min(activeRect.right, rect.right));
      } else if (e.key === 'ArrowUp') {
        isCandidate = dyCenter < 0 && absDy >= absDx * 0.5;
        primaryDist = absDy;
        secondaryGap = Math.max(0, Math.max(activeRect.left, rect.left) - Math.min(activeRect.right, rect.right));
      }

      if (isCandidate) {
        // Massive penalty for gap to force it to pick overlapping items (same row/col)
        // Tiny penalty for center misalignment so ties are broken cleanly
        const centerMisalignment = (e.key === 'ArrowLeft' || e.key === 'ArrowRight') ? absDy : absDx;
        const distance = primaryDist + (secondaryGap * 15) + (centerMisalignment * 0.1);
        
        if (distance < minDistance) {
          minDistance = distance;
          bestMatch = thumb;
        }
      }
    });

    if (bestMatch) {
      e.preventDefault();
      bestMatch.focus();
      bestMatch.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    }
  }
});

// ── User Interest & Behavioral Recommendation Engine (Client Tracking) ──
(function() {
  const STORAGE_TAGS = 'f0ck_guest_tag_affinity';
  const STORAGE_CREATORS = 'f0ck_guest_creator_affinity';

  let currentTrackingItem = null;

  const loadStoredMap = (key) => {
    try {
      const data = localStorage.getItem(key);
      return data ? JSON.parse(data) : {};
    } catch (_) {
      return {};
    }
  };

  const saveStoredMap = (key, map) => {
    try {
      localStorage.setItem(key, JSON.stringify(map));
    } catch (_) {}
  };

  const updateLocalAffinity = (key, name, delta) => {
    if (!name || typeof name !== 'string') return;
    const cleanName = name.trim().toLowerCase();
    if (!cleanName) return;

    const map = loadStoredMap(key);
    const existing = map[cleanName] || { score: 0, count: 0, ts: Date.now() };
    existing.score = Math.max(-10, Math.min(500, (existing.score || 0) + delta));
    existing.count = (existing.count || 0) + 1;
    existing.ts = Date.now();
    map[cleanName] = existing;

    // Prune to top 60 to prevent storage bloat
    const entries = Object.entries(map);
    if (entries.length > 60) {
      entries.sort((a, b) => b[1].score - a[1].score);
      const pruned = Object.fromEntries(entries.slice(0, 50));
      saveStoredMap(key, pruned);
    } else {
      saveStoredMap(key, map);
    }
  };

  const f0ckInterestEngine = {
    getTopAffinities: () => {
      const tagsMap = loadStoredMap(STORAGE_TAGS);
      const creatorsMap = loadStoredMap(STORAGE_CREATORS);

      const topTags = Object.entries(tagsMap)
        .filter(([, v]) => v.score > 0)
        .sort((a, b) => b[1].score - a[1].score)
        .slice(0, 15)
        .map(([k]) => k);

      const topCreators = Object.entries(creatorsMap)
        .filter(([, v]) => v.score > 0)
        .sort((a, b) => b[1].score - a[1].score)
        .slice(0, 10)
        .map(([k]) => k);

      return { topTags, topCreators };
    },

    recordInteraction: ({ itemId, tags = [], creator = '', duration = 0, percent = 0, type = 'dwell' }) => {
      if (!itemId) return;

      // Behavioral weighting: time spent is a primary signal
      let delta = 1.0;
      if (type === 'skip' || (duration < 2.5 && percent < 15)) {
        delta = -1.5;
      } else if (type === 'click_suggestion') {
        delta = 2.5;
      } else if (type === 'finish' || percent >= 75 || duration >= 20) {
        delta = 3.0;
      } else if (duration >= 8 || percent >= 35) {
        delta = 1.5;
      }

      // Update local storage (for persistent guest learning across browser restarts)
      if (Array.isArray(tags)) {
        tags.forEach(t => updateLocalAffinity(STORAGE_TAGS, t, delta));
      }
      if (creator) {
        updateLocalAffinity(STORAGE_CREATORS, creator, delta);
      }

      // Send beacon to backend
      const payload = {
        item_id: itemId,
        duration: Math.round(duration * 10) / 10,
        percent: Math.round(percent),
        type
      };

      try {
        if (navigator.sendBeacon) {
          const blob = new Blob([JSON.stringify(payload)], { type: 'application/json' });
          navigator.sendBeacon('/api/v2/track/interaction', blob);
        } else {
          fetch('/api/v2/track/interaction', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(payload),
            keepalive: true
          }).catch(() => {});
        }
      } catch (_) {}
    },

    recordSuggestionClick: (itemId, tags = [], creator = '') => {
      if (!itemId) return;
      f0ckInterestEngine.recordInteraction({ itemId, tags, creator, type: 'click_suggestion' });
    },

    recordTagSearch: (rawTag) => {
      if (!rawTag || typeof rawTag !== 'string') return;
      const tags = rawTag.split(',')
        .map(t => t.trim().toLowerCase())
        .filter(t => t && !t.startsWith('title:') && !t.startsWith('src:'));

      if (!tags.length) return;

      // Update local storage (for immediate in-session recommendations & guest learning)
      tags.forEach(t => updateLocalAffinity(STORAGE_TAGS, t, 2.0));

      // Dispatch tracking to backend
      const payload = { tag: tags.join(',') };
      try {
        if (navigator.sendBeacon) {
          const blob = new Blob([JSON.stringify(payload)], { type: 'application/json' });
          navigator.sendBeacon('/api/v2/track/search', blob);
        } else {
          fetch('/api/v2/track/search', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(payload),
            keepalive: true
          }).catch(() => {});
        }
      } catch (_) {}
    },

    flushCurrentTracking: () => {
      if (!currentTrackingItem) return;
      const { itemId, startTime, maxPercent, tags, creator } = currentTrackingItem;
      currentTrackingItem = null;

      const duration = (Date.now() - startTime) / 1000;
      let type = 'dwell';
      if (duration < 2.5 && maxPercent < 15) {
        type = 'skip';
      } else if (maxPercent >= 75 || duration >= 20) {
        type = 'finish';
      }

      f0ckInterestEngine.recordInteraction({
        itemId,
        tags,
        creator,
        duration,
        percent: maxPercent,
        type
      });
    },

    startTrackingItem: () => {
      f0ckInterestEngine.flushCurrentTracking();

      // Only track if on an item page
      const currentIdStr = typeof window.getCurrentItemId === 'function' ? window.getCurrentItemId() : null;
      const itemId = currentIdStr ? parseInt(currentIdStr, 10) : null;
      if (!itemId) return;

      const tags = Array.from(document.querySelectorAll('#tags .tag-text, #tags .tag-badge, .tag-link'))
        .map(el => el.textContent.trim().replace(/^#/, ''))
        .filter(Boolean);

      const creatorEl = document.querySelector('#a_username, [data-username]');
      const creator = creatorEl ? (creatorEl.dataset.username || creatorEl.textContent.trim()) : '';

      currentTrackingItem = {
        itemId,
        startTime: Date.now(),
        maxPercent: 0,
        tags,
        creator
      };

      // Attach media playback listeners
      const media = document.querySelector('video, audio');
      if (media) {
        const updatePercent = () => {
          if (!currentTrackingItem || !media.duration) return;
          const p = (media.currentTime / media.duration) * 100;
          if (p > currentTrackingItem.maxPercent) {
            currentTrackingItem.maxPercent = p;
          }
        };

        media.addEventListener('timeupdate', updatePercent, { passive: true });
        media.addEventListener('ended', () => {
          if (currentTrackingItem) currentTrackingItem.maxPercent = 100;
        }, { once: true });
      }
    }
  };

  window.f0ckInterestEngine = f0ckInterestEngine;

  // Listen to item content loads and page teardown
  document.addEventListener('f0ck:contentLoaded', f0ckInterestEngine.startTrackingItem);
  window.addEventListener('beforeunload', f0ckInterestEngine.flushCurrentTracking);
  window.addEventListener('pagehide', f0ckInterestEngine.flushCurrentTracking);

  // Initial check on load
  if (document.readyState === 'complete' || document.readyState === 'interactive') {
    setTimeout(f0ckInterestEngine.startTrackingItem, 200);
  } else {
    document.addEventListener('DOMContentLoaded', () => setTimeout(f0ckInterestEngine.startTrackingItem, 200));
  }
})();

// ==========================================================================
// BulkSelection: Multi-item selection via Mouse Long-Press, Touch Long-Press,
// and Shift+Click with Bulk Actions Toolbar & Tagging Modal
// ==========================================================================
window.BulkSelection = (() => {
  const selectedIds = new Set();
  let isSelectionMode = false;
  let lastSelectedThumb = null;
  let suppressNextClick = false;
  let currentModalAction = 'add'; // 'add' or 'remove'
  let activeTagChips = [];

  function getCsrfToken() {
    return window.f0ckSession?.csrf_token ||
           document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') ||
           document.querySelector('meta[name="csrf"]')?.getAttribute('content') || '';
  }

  function getItemId(thumb) {
    if (!thumb) return null;
    const idStr = thumb.dataset.itemId || thumb.getAttribute('data-item-id') ||
                  (thumb.dataset.bg && thumb.dataset.bg.match(/\/t\/(\d+)/)?.[1]) ||
                  (thumb.href && thumb.href.match(/\/(\d+)(?:[/?#]|$)/)?.[1]);
    const id = idStr ? parseInt(idStr, 10) : null;
    return (id && !isNaN(id)) ? id : null;
  }

  function flash(msg, type = 'info') {
    if (typeof window.flashMessage === 'function') {
      window.flashMessage(msg);
    } else if (typeof window.showFlash === 'function') {
      window.showFlash(msg, type);
    } else {
      console.log(`[BULK] ${msg}`);
    }
  }

  function isModOrAdmin() {
    return !!(
      window.f0ckSession?.is_admin ||
      window.f0ckSession?.is_moderator ||
      window.f0ckSession?.admin
    );
  }

  // --- UI Injections ---
  function ensureDOMElements() {
    if (!isModOrAdmin()) return;
    if (document.getElementById('bulk-action-bar')) return;

    // 1. Floating Action Bar
    const bar = document.createElement('div');
    bar.id = 'bulk-action-bar';
    bar.innerHTML = `
      <div class="bulk-count-box">
        <i class="fa-solid fa-check-double" style="color: var(--accent);"></i>
        <span class="bulk-count-num">0</span>
        <span class="bulk-count-label">selected</span>
      </div>
      <div class="bulk-actions-group">
        <button type="button" class="bulk-btn bulk-btn-primary" id="bulk-btn-add-tags" title="Add tags in bulk">
          <i class="fa-solid fa-tag"></i>
          <span>Add Tag<span class="btn-text-full">s</span></span>
        </button>
        <button type="button" class="bulk-btn" id="bulk-btn-remove-tags" title="Remove tags in bulk">
          <i class="fa-solid fa-tags"></i>
          <span>Remove Tag<span class="btn-text-full">s</span></span>
        </button>
        <div class="bulk-dropdown-wrap">
          <button type="button" class="bulk-btn" id="bulk-btn-rate" title="Change rating in bulk">
            <i class="fa-solid fa-shield-halved"></i>
            <span>Rating</span>
            <i class="fa-solid fa-chevron-up" style="font-size: 10px; margin-left: 2px;"></i>
          </button>
          <div class="bulk-dropdown-menu" id="bulk-rating-menu">
            <button type="button" class="bulk-menu-item rating-sfw" data-rating="sfw">
              <i class="fa-solid fa-circle-check"></i> SFW
            </button>
            <button type="button" class="bulk-menu-item rating-nsfw" data-rating="nsfw">
              <i class="fa-solid fa-triangle-exclamation"></i> NSFW
            </button>
            <button type="button" class="bulk-menu-item rating-nsfl" data-rating="nsfl">
              <i class="fa-solid fa-skull-crossbones"></i> NSFL
            </button>
          </div>
        </div>
        <button type="button" class="bulk-btn" id="bulk-btn-select-all" title="Select all loaded items">
          <i class="fa-regular fa-square-check"></i>
          <span class="btn-text-full">Select All</span>
        </button>
        <button type="button" class="bulk-btn bulk-btn-close" id="bulk-btn-close" title="Cancel selection (Esc)">
          <i class="fa-solid fa-xmark"></i>
        </button>
      </div>
    `;
    document.body.appendChild(bar);

    // 2. Bulk Tags Modal
    const modal = document.createElement('div');
    modal.id = 'bulk-tag-modal';
    modal.className = 'bulk-modal-overlay';
    modal.innerHTML = `
      <div class="bulk-modal-card">
        <div class="bulk-modal-header">
          <h3 id="bulk-modal-title"><i class="fa-solid fa-tags"></i> Bulk Tagging</h3>
          <button type="button" class="bulk-modal-close" id="bulk-modal-close-btn"><i class="fa-solid fa-xmark"></i></button>
        </div>
        <p class="bulk-modal-desc" id="bulk-modal-desc">Add tags to selected items</p>
        
        <div class="bulk-tag-chips-wrap" id="bulk-tag-chips"></div>

        <div class="bulk-input-container">
          <input type="text" class="bulk-text-input" id="bulk-tag-input" placeholder="Type tag name and press Enter or comma..." autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" />
          <div class="bulk-tag-suggestions" id="bulk-tag-suggestions"></div>
        </div>

        <div class="bulk-modal-actions">
          <button type="button" class="bulk-modal-btn" id="bulk-modal-cancel-btn">Cancel</button>
          <button type="button" class="bulk-modal-btn bulk-modal-btn-submit" id="bulk-modal-submit-btn">Apply to Items</button>
        </div>
      </div>
    `;
    document.body.appendChild(modal);

    // Wire up Action Bar events
    document.getElementById('bulk-btn-add-tags')?.addEventListener('click', () => openTagModal('add'));
    document.getElementById('bulk-btn-remove-tags')?.addEventListener('click', () => openTagModal('remove'));
    
    // Rating menu toggle
    const rateBtn = document.getElementById('bulk-btn-rate');
    const rateMenu = document.getElementById('bulk-rating-menu');
    rateBtn?.addEventListener('click', (e) => {
      e.stopPropagation();
      rateMenu?.classList.toggle('show');
    });

    // Rating items click
    rateMenu?.querySelectorAll('.bulk-menu-item').forEach(btn => {
      btn.addEventListener('click', async (e) => {
        e.stopPropagation();
        const rating = btn.dataset.rating;
        rateMenu.classList.remove('show');
        if (rating) await executeBulkRating(rating);
      });
    });

    document.getElementById('bulk-btn-select-all')?.addEventListener('click', () => selectAllLoaded());
    document.getElementById('bulk-btn-close')?.addEventListener('click', () => exitSelectionMode());

    // Wire up Modal events
    document.getElementById('bulk-modal-close-btn')?.addEventListener('click', () => closeTagModal());
    document.getElementById('bulk-modal-cancel-btn')?.addEventListener('click', () => closeTagModal());
    document.getElementById('bulk-modal-submit-btn')?.addEventListener('click', () => submitBulkTags());
    modal.addEventListener('click', (e) => {
      if (e.target === modal) closeTagModal();
    });

    setupTagInputAutocomplete();
  }

  // --- Selection Mode Lifecycle ---
  function enterSelectionMode() {
    if (!isModOrAdmin()) return;
    isSelectionMode = true;
    document.documentElement.classList.add('bulk-selection-active');
    ensureDOMElements();
    const bar = document.getElementById('bulk-action-bar');
    if (bar) {
      bar.classList.add('visible');
    }
  }

  function exitSelectionMode() {
    isSelectionMode = false;
    document.documentElement.classList.remove('bulk-selection-active');
    document.querySelectorAll('.posts > a.thumb.bulk-selected, .posts a.bulk-selected').forEach(th => th.classList.remove('bulk-selected'));
    selectedIds.clear();
    lastSelectedThumb = null;
    const bar = document.getElementById('bulk-action-bar');
    if (bar) {
      bar.classList.remove('visible');
    }
    document.getElementById('bulk-rating-menu')?.classList.remove('show');
    closeTagModal();
  }

  function updateToolbar() {
    const count = selectedIds.size;
    const countNum = document.querySelector('#bulk-action-bar .bulk-count-num');
    const countLabel = document.querySelector('#bulk-action-bar .bulk-count-label');
    if (countNum) countNum.textContent = count;
    if (countLabel) countLabel.textContent = count === 1 ? 'item' : 'items';

    if (count > 0 && !isSelectionMode) {
      enterSelectionMode();
    } else if (count === 0 && isSelectionMode) {
      exitSelectionMode();
    }
  }

  function toggleThumb(thumb, forceState = null) {
    if (!thumb) return;
    const itemId = getItemId(thumb);
    if (!itemId) return;

    const currentlySelected = selectedIds.has(itemId);
    const shouldSelect = forceState !== null ? forceState : !currentlySelected;

    if (shouldSelect) {
      selectedIds.add(itemId);
      thumb.classList.add('bulk-selected');
    } else {
      selectedIds.delete(itemId);
      thumb.classList.remove('bulk-selected');
    }

    lastSelectedThumb = thumb;
    updateToolbar();
  }

  function rangeSelect(fromThumb, toThumb) {
    const allThumbs = Array.from(document.querySelectorAll('.posts > a.thumb, .posts > a.lazy-thumb'));
    const idx1 = allThumbs.indexOf(fromThumb);
    const idx2 = allThumbs.indexOf(toThumb);
    if (idx1 === -1 || idx2 === -1) {
      toggleThumb(toThumb);
      return;
    }
    const start = Math.min(idx1, idx2);
    const end = Math.max(idx1, idx2);
    for (let i = start; i <= end; i++) {
      const th = allThumbs[i];
      const id = getItemId(th);
      if (id) {
        selectedIds.add(id);
        th.classList.add('bulk-selected');
      }
    }
    lastSelectedThumb = toThumb;
    updateToolbar();
  }

  function selectAllLoaded() {
    const allThumbs = Array.from(document.querySelectorAll('.posts > a.thumb, .posts > a.lazy-thumb'));
    allThumbs.forEach(th => {
      const id = getItemId(th);
      if (id) {
        selectedIds.add(id);
        th.classList.add('bulk-selected');
      }
    });
    if (!isSelectionMode && selectedIds.size > 0) enterSelectionMode();
    updateToolbar();
  }

  // --- Tag Modal & Autocomplete ---
  function openTagModal(action = 'add') {
    if (selectedIds.size === 0) return;
    currentModalAction = action;
    activeTagChips = [];
    ensureDOMElements();

    const modal = document.getElementById('bulk-tag-modal');
    const title = document.getElementById('bulk-modal-title');
    const desc = document.getElementById('bulk-modal-desc');
    const submitBtn = document.getElementById('bulk-modal-submit-btn');
    const input = document.getElementById('bulk-tag-input');
    const count = selectedIds.size;

    if (action === 'add') {
      title.innerHTML = '<i class="fa-solid fa-tag"></i> Add Tags in Bulk';
      desc.textContent = `Add tags to all ${count} selected item${count === 1 ? '' : 's'}. Type a tag name and hit Enter.`;
      submitBtn.textContent = `Add Tags to ${count} Item${count === 1 ? '' : 's'}`;
    } else {
      title.innerHTML = '<i class="fa-solid fa-tags"></i> Remove Tags in Bulk';
      desc.textContent = `Remove tags from all ${count} selected item${count === 1 ? '' : 's'}.`;
      submitBtn.textContent = `Remove Tags from ${count} Item${count === 1 ? '' : 's'}`;
    }

    renderTagChips();
    if (input) input.value = '';
    document.getElementById('bulk-rating-menu')?.classList.remove('show');

    modal?.classList.add('visible');
    setTimeout(() => input?.focus(), 80);
  }

  function closeTagModal() {
    const modal = document.getElementById('bulk-tag-modal');
    modal?.classList.remove('visible');
    const suggestions = document.getElementById('bulk-tag-suggestions');
    if (suggestions) suggestions.style.display = 'none';
  }

  function renderTagChips() {
    const wrap = document.getElementById('bulk-tag-chips');
    if (!wrap) return;
    wrap.innerHTML = '';
    activeTagChips.forEach((tag, idx) => {
      const chip = document.createElement('span');
      chip.className = 'bulk-tag-chip';
      chip.innerHTML = `${escapeHtml(tag)} <i class="fa-solid fa-xmark remove-chip-btn" data-idx="${idx}"></i>`;
      wrap.appendChild(chip);
    });

    wrap.querySelectorAll('.remove-chip-btn').forEach(btn => {
      btn.addEventListener('click', () => {
        const idx = +btn.dataset.idx;
        activeTagChips.splice(idx, 1);
        renderTagChips();
      });
    });
  }

  function addChip(raw) {
    const tag = (raw || '').trim().replace(/^#/, '');
    if (!tag) return;
    const protectedTags = ['sfw', 'nsfw', 'nsfl'];
    if (protectedTags.includes(tag.toLowerCase())) {
      flash(`"${tag}" is reserved for rating modes`, 'error');
      return;
    }
    if (!activeTagChips.map(t => t.toLowerCase()).includes(tag.toLowerCase())) {
      activeTagChips.push(tag);
      renderTagChips();
    }
    const input = document.getElementById('bulk-tag-input');
    if (input) input.value = '';
    const suggestions = document.getElementById('bulk-tag-suggestions');
    if (suggestions) suggestions.style.display = 'none';
  }

  function escapeHtml(str) {
    return (str || '').replace(/[&<>"']/g, m => ({
      '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#039;'
    })[m]);
  }

  function setupTagInputAutocomplete() {
    const input = document.getElementById('bulk-tag-input');
    const suggestions = document.getElementById('bulk-tag-suggestions');
    if (!input || !suggestions) return;

    let debounceTimer = null;
    let highlightedIndex = -1;
    let currentSuggestions = [];

    const fetchSuggestions = (query) => {
      if (!query || query.length < 1) {
        suggestions.style.display = 'none';
        return;
      }
      fetch(`/api/v2/tags/suggest?q=${encodeURIComponent(query)}`)
        .then(r => r.json())
        .then(items => {
          if (!Array.isArray(items) || items.length === 0) {
            suggestions.style.display = 'none';
            currentSuggestions = [];
            return;
          }
          currentSuggestions = items;
          highlightedIndex = -1;
          suggestions.innerHTML = '';
          items.slice(0, 10).forEach((item, idx) => {
            const div = document.createElement('div');
            div.className = 'bulk-suggestion-item';
            div.innerHTML = `<span>#${escapeHtml(item.tag)}</span> <span class="bulk-suggestion-count">${item.count || ''}</span>`;
            div.addEventListener('mousedown', (e) => {
              e.preventDefault();
              addChip(item.tag);
              input.focus();
            });
            suggestions.appendChild(div);
          });
          suggestions.style.display = 'block';
        })
        .catch(() => { suggestions.style.display = 'none'; });
    };

    input.addEventListener('input', () => {
      clearTimeout(debounceTimer);
      const val = input.value;
      if (val.includes(',') || val.includes('\n')) {
        const parts = val.split(/[,\n]+/);
        parts.forEach(p => addChip(p));
        input.value = '';
        suggestions.style.display = 'none';
        return;
      }
      debounceTimer = setTimeout(() => fetchSuggestions(val.trim()), 200);
    });

    input.addEventListener('keydown', (e) => {
      const items = suggestions.querySelectorAll('.bulk-suggestion-item');
      if (e.key === 'ArrowDown') {
        e.preventDefault();
        if (items.length > 0) {
          highlightedIndex = (highlightedIndex + 1) % items.length;
          items.forEach((it, i) => it.classList.toggle('highlighted', i === highlightedIndex));
        }
      } else if (e.key === 'ArrowUp') {
        e.preventDefault();
        if (items.length > 0) {
          highlightedIndex = (highlightedIndex - 1 + items.length) % items.length;
          items.forEach((it, i) => it.classList.toggle('highlighted', i === highlightedIndex));
        }
      } else if (e.key === 'Enter') {
        e.preventDefault();
        if (highlightedIndex >= 0 && items[highlightedIndex] && currentSuggestions[highlightedIndex]) {
          addChip(currentSuggestions[highlightedIndex].tag);
        } else if (input.value.trim().length > 0) {
          addChip(input.value.trim());
        } else if (activeTagChips.length > 0) {
          submitBulkTags();
        }
      } else if (e.key === 'Backspace' && input.value === '' && activeTagChips.length > 0) {
        activeTagChips.pop();
        renderTagChips();
      } else if (e.key === 'Escape') {
        closeTagModal();
      }
    });

    input.addEventListener('blur', () => {
      setTimeout(() => { suggestions.style.display = 'none'; }, 200);
    });
  }

  // --- API Execution ---
  async function submitBulkTags() {
    const input = document.getElementById('bulk-tag-input');
    if (input && input.value.trim()) {
      addChip(input.value.trim());
    }

    if (activeTagChips.length === 0) {
      flash('Please enter at least one tag', 'error');
      return;
    }

    const itemIds = Array.from(selectedIds);
    if (itemIds.length === 0) {
      flash('No items selected', 'error');
      return;
    }

    const submitBtn = document.getElementById('bulk-modal-submit-btn');
    if (submitBtn) {
      submitBtn.disabled = true;
      submitBtn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Applying...';
    }

    try {
      const res = await fetch('/api/v2/tags/bulk', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-CSRF-Token': getCsrfToken()
        },
        body: JSON.stringify({
          action: currentModalAction,
          item_ids: itemIds,
          tags: activeTagChips
        })
      });
      const data = await res.json();
      if (data.success) {
        flash(data.msg || `Applied tags to ${itemIds.length} items!`);
        closeTagModal();
        exitSelectionMode();
      } else {
        flash(data.msg || 'Failed to apply tags', 'error');
      }
    } catch (err) {
      console.error('[BULK_TAG_SUBMIT_ERROR]', err);
      flash('Failed to communicate with server', 'error');
    } finally {
      if (submitBtn) {
        submitBtn.disabled = false;
        submitBtn.innerHTML = 'Apply to Items';
      }
    }
  }

  async function executeBulkRating(rating) {
    const itemIds = Array.from(selectedIds);
    if (itemIds.length === 0) return;

    try {
      const res = await fetch('/api/v2/tags/bulk', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-CSRF-Token': getCsrfToken()
        },
        body: JSON.stringify({
          action: 'set_rating',
          item_ids: itemIds,
          rating: rating
        })
      });
      const data = await res.json();
      if (data.success) {
        // Update DOM data-mode attribute on selected thumbs immediately
        itemIds.forEach(id => {
          const thumb = document.querySelector(`.posts > a.thumb[data-item-id="${id}"], .posts a[href$="/${id}"]`);
          if (thumb) {
            thumb.setAttribute('data-mode', rating);
          }
        });
        flash(data.msg || `Updated rating to ${rating.toUpperCase()}!`);
        exitSelectionMode();
      } else {
        flash(data.msg || 'Failed to update rating', 'error');
      }
    } catch (err) {
      console.error('[BULK_RATING_ERROR]', err);
      flash('Failed to communicate with server', 'error');
    }
  }

  // --- Event Listeners Initialization ---
  function init() {
    ensureDOMElements();

    // 1. Mouse Long-Press (Left Button Hold for ~600ms)
    let mouseHoldTimer = null;
    let holdThumb = null;
    let startX = 0, startY = 0;

    document.addEventListener('mousedown', (e) => {
      if (!isModOrAdmin()) return;
      if (e.button !== 0) return;
      const thumb = e.target.closest('.posts > a.thumb, .posts > a.lazy-thumb');
      if (!thumb) return;
      if (e.target.closest('.hide-thumb-btn, .thumb-select-check, button, input')) return;

      holdThumb = thumb;
      startX = e.clientX;
      startY = e.clientY;
      thumb.classList.add('thumb-longpressing');

      if (mouseHoldTimer) clearTimeout(mouseHoldTimer);
      mouseHoldTimer = setTimeout(() => {
        mouseHoldTimer = null;
        if (holdThumb) {
          holdThumb.classList.remove('thumb-longpressing');
          suppressNextClick = true;
          if (typeof window.clearHoverPreview === 'function') {
            window.clearHoverPreview();
          }
          if (navigator.vibrate) try { navigator.vibrate(45); } catch {}
          if (!isSelectionMode) enterSelectionMode();
          toggleThumb(holdThumb);
          holdThumb = null;
        }
      }, 600);
    });

    const cancelMouseHold = (e) => {
      if (!mouseHoldTimer && !holdThumb) return;
      if (e.type === 'mousemove' && mouseHoldTimer) {
        if (Math.hypot(e.clientX - startX, e.clientY - startY) <= 8) return;
      }
      if (mouseHoldTimer) {
        clearTimeout(mouseHoldTimer);
        mouseHoldTimer = null;
      }
      if (holdThumb) {
        holdThumb.classList.remove('thumb-longpressing');
        holdThumb = null;
      }
    };
    document.addEventListener('mousemove', cancelMouseHold);
    document.addEventListener('mouseup', cancelMouseHold);

    // 2. Touch Long-Press (Phone / Mobile Hold for ~600ms)
    let touchHoldTimer = null;
    let touchHoldThumb = null;
    let touchStartX = 0, touchStartY = 0;

    document.addEventListener('touchstart', (e) => {
      if (!isModOrAdmin()) return;
      if (e.touches.length !== 1) return;
      const thumb = e.target.closest('.posts > a.thumb, .posts > a.lazy-thumb');
      if (!thumb) return;
      if (e.target.closest('.hide-thumb-btn, .thumb-select-check, button, input')) return;

      touchHoldThumb = thumb;
      touchStartX = e.touches[0].clientX;
      touchStartY = e.touches[0].clientY;
      thumb.classList.add('thumb-longpressing');

      if (touchHoldTimer) clearTimeout(touchHoldTimer);
      touchHoldTimer = setTimeout(() => {
        touchHoldTimer = null;
        if (touchHoldThumb) {
          touchHoldThumb.classList.remove('thumb-longpressing');
          suppressNextClick = true;
          if (typeof window.clearHoverPreview === 'function') {
            window.clearHoverPreview();
          }
          if (navigator.vibrate) try { navigator.vibrate(50); } catch {}
          if (!isSelectionMode) enterSelectionMode();
          toggleThumb(touchHoldThumb);
          touchHoldThumb = null;
        }
      }, 600);
    }, { passive: true });

    const cancelTouchHold = (e) => {
      if (!touchHoldTimer && !touchHoldThumb) return;
      if (e.type === 'touchmove' && touchHoldTimer && e.touches.length === 1) {
        if (Math.hypot(e.touches[0].clientX - touchStartX, e.touches[0].clientY - touchStartY) <= 10) return;
      }
      if (touchHoldTimer) {
        clearTimeout(touchHoldTimer);
        touchHoldTimer = null;
      }
      if (touchHoldThumb) {
        touchHoldThumb.classList.remove('thumb-longpressing');
        touchHoldThumb = null;
      }
    };
    document.addEventListener('touchmove', cancelTouchHold, { passive: true });
    document.addEventListener('touchend', cancelTouchHold, { passive: true });
    document.addEventListener('touchcancel', cancelTouchHold, { passive: true });

    // Prevent context menu from interrupting selection or after long press
    document.addEventListener('contextmenu', (e) => {
      if (!isModOrAdmin()) return;
      if (e.target.closest('.posts > a.thumb, .posts > a.lazy-thumb')) {
        if (suppressNextClick || isSelectionMode) {
          e.preventDefault();
        }
      }
    });

    // 3. Click Interception (Shift+Click, Long-press trailing click, Selection Mode tap)
    document.addEventListener('click', (e) => {
      if (!isModOrAdmin()) return;

      // Long-press trailing click prevention
      if (suppressNextClick) {
        e.preventDefault();
        e.stopPropagation();
        e.stopImmediatePropagation();
        suppressNextClick = false;
        return;
      }

      // Close dropdown if clicking outside
      if (!e.target.closest('.bulk-dropdown-wrap')) {
        document.getElementById('bulk-rating-menu')?.classList.remove('show');
      }

      const thumb = e.target.closest('.posts > a.thumb, .posts > a.lazy-thumb');
      if (!thumb) return;
      if (e.target.closest('.hide-thumb-btn')) return;

      // SHIFT + LEFT CLICK -> Quick Marking & Range Selection
      if (e.shiftKey && e.button === 0) {
        e.preventDefault();
        e.stopPropagation();
        e.stopImmediatePropagation();

        if (!isSelectionMode) enterSelectionMode();
        if (lastSelectedThumb && document.body.contains(lastSelectedThumb) && lastSelectedThumb !== thumb) {
          rangeSelect(lastSelectedThumb, thumb);
        } else {
          toggleThumb(thumb);
        }
        return;
      }

      // SELECTION MODE ACTIVE -> Tap / Click toggles selection instead of navigating
      if (isSelectionMode && e.button === 0 && !e.ctrlKey && !e.altKey && !e.metaKey) {
        e.preventDefault();
        e.stopPropagation();
        e.stopImmediatePropagation();
        toggleThumb(thumb);
        return;
      }
    }, true); // Capture phase ensures it runs before any item navigation handlers

    // 4. Keyboard Shortcuts
    document.addEventListener('keydown', (e) => {
      if (!isModOrAdmin()) return;

      if (e.key === 'Escape') {
        const modal = document.getElementById('bulk-tag-modal');
        if (modal && modal.classList.contains('visible')) {
          closeTagModal();
        } else if (isSelectionMode) {
          exitSelectionMode();
        }
      }
      // Ctrl+A / Cmd+A when in selection mode selects all visible thumbnails
      if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'a' && isSelectionMode) {
        if (!['INPUT', 'TEXTAREA'].includes(document.activeElement?.tagName)) {
          e.preventDefault();
          selectAllLoaded();
        }
      }
    });
  }

  // Initialize once DOM is ready
  if (document.readyState === 'complete' || document.readyState === 'interactive') {
    init();
  } else {
    document.addEventListener('DOMContentLoaded', init);
  }

  return {
    enterSelectionMode,
    exitSelectionMode,
    toggleThumb,
    openTagModal,
    closeTagModal,
    executeBulkRating,
    selectAllLoaded,
    getSelectedIds: () => Array.from(selectedIds)
  };
})();