// ==UserScript==
// @name         Letterboxd Quick Preview
// @namespace    https://github.com/Dashetty/LetterboxdQuickPreview
// @version      4.5.4
// @description  Press Shift+Z while hovering a film poster to see an editorial, cinematic preview card with rating, synopsis, and details.
// @author       Dashetty
// @match        https://letterboxd.com/*
// @grant        GM_xmlhttpRequest
// @grant        GM_addStyle
// @connect      letterboxd.com
// @updateURL    https://raw.githubusercontent.com/Dashetty/LetterboxdQuickPreview/master/letterboxd-preview.user.js
// @downloadURL  https://raw.githubusercontent.com/Dashetty/LetterboxdQuickPreview/master/letterboxd-preview.user.js
// @supportURL   https://github.com/Dashetty/LetterboxdQuickPreview/issues
// @homepageURL  https://github.com/Dashetty/LetterboxdQuickPreview
// ==/UserScript==

(function () {
  "use strict";

  const CACHE_TTL_MS = 1000 * 60 * 60 * 24; // 24 hours
  const CACHE_KEY = "lbxd_preview_cache_v4_5_4";
  const PREVIEW_KEY = "z";
  const FETCH_TIMEOUT = 8000;
  const CARD_AUTO_CLOSE_MS = 30000;
  const MAX_CACHE_ENTRIES = 500;

  let hoveredFilm = null;
  let activeCard = null;
  let cache = new Map();
  let autoCloseTimer = null;
  let currentRequest = null;
  let fetchId = 0;
  let colorCache = new Map();

  function loadCache() {
    try {
      const raw = localStorage.getItem(CACHE_KEY);
      if (raw) {
        const parsed = JSON.parse(raw);
        const now = Date.now();
        for (const [key, entry] of Object.entries(parsed)) {
          if (now - entry.timestamp < CACHE_TTL_MS) {
            cache.set(key, { data: entry.data, timestamp: entry.timestamp });
          }
        }
      }
    } catch (e) {
      console.warn("[LBXD Preview] Cache load failed:", e);
    }
  }

  function saveCache() {
    try {
      const obj = {};
      for (const [key, entry] of cache) {
        obj[key] = { data: entry.data, timestamp: entry.timestamp };
      }
      const keys = Object.keys(obj);
      if (keys.length > MAX_CACHE_ENTRIES) {
        const sorted = keys
          .map((k) => ({ key: k, ts: obj[k].timestamp }))
          .sort((a, b) => a.ts - b.ts);
        const toRemove = sorted.length - MAX_CACHE_ENTRIES;
        for (let i = 0; i < toRemove; i++) {
          cache.delete(sorted[i].key);
          delete obj[sorted[i].key];
        }
      }
      localStorage.setItem(CACHE_KEY, JSON.stringify(obj));
    } catch (e) {
      console.warn("[LBXD Preview] Cache save failed:", e);
    }
  }

  function cleanupStuckCards() {
    document.querySelectorAll(".lbxd-card").forEach((c) => c.remove());
  }

  GM_addStyle(`
        :root {
            --canvas:    #0c0c0e;
            --surface:   #1b1613;
            --surface-2: #221b17;
            --raised:    #2a221c;
            --inner:     #2e2621;
            --skeleton:  #3a3129;
            --amber:     #e8a84a;
            --amber-2:   #f0c876;
            --amber-dim: rgba(232, 168, 74, 0.14);
            --title:     #f7f2ea;
            --body:      #cdc6ba;
            --muted:     #948d80;
            --faint:     #5a5248;
            --edge:      rgba(255, 245, 230, 0.08);
            --edge-warm: rgba(232, 168, 74, 0.35);
            --serif:     Georgia, "Times New Roman", Times, serif;
            --sans:      -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
            --sp-xs: 4px; --sp-sm: 8px; --sp-md: 12px; --sp-lg: 16px; --sp-xl: 20px; --sp-2xl: 28px;
            --rd: 14px; --rd-sm: 7px;
        }

        .lbxd-card {
            position: fixed;
            z-index: 9999;
            width: 400px;
            max-width: 94vw;
            background: var(--card-body, var(--surface));
            border: 1px solid var(--edge);
            border-radius: var(--rd);
            box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55), 0 8px 24px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,0,0,0.4);
            overflow: hidden;
            animation: card-in 0.25s cubic-bezier(0.16, 1, 0.3, 1);
            touch-action: manipulation;
            -webkit-tap-highlight-color: rgba(232, 168, 74, 0.2);
            overscroll-behavior: contain;
        }
        @keyframes card-in {
            from { opacity: 0; transform: translateY(12px) scale(0.96); }
            to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
        }
        @keyframes card-out {
            from { opacity: 1; transform: scale(1); }
            to   { opacity: 0; transform: scale(0.97); }
        }
        .lbxd-card.closing {
            animation: card-out 0.12s ease forwards;
        }

        .lbxd-hero {
            position: relative;
            height: 168px;
            background: linear-gradient(135deg, var(--surface-2), var(--surface));
        }
        .lbxd-hero-bg {
            position: absolute;
            inset: -8px;
            z-index: 1;
            background-image: var(--poster-img, none);
            background-size: cover;
            background-position: center 20%;
            filter: blur(4px) brightness(0.85) saturate(110%);
            box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
        }

        .lbxd-hero-overlay {
            position: absolute;
            inset: 0;
            z-index: 2;
        }
        .lbxd-hero-overlay .layer-atmosphere {
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg,
                rgba(12,10,9,0.05) 0%,
                rgba(12,10,9,0.15) 60px,
                rgba(12,10,9,0.35) 120px,
                rgba(12,10,9,0.55) 168px
            );
        }
        .lbxd-hero-overlay .layer-readability {
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse 80% 45% at 50% 88%, rgba(0,0,0,0.55) 0%, transparent 70%);
        }
        .lbxd-hero-overlay .layer-bottom {
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg,
                transparent 0%,
                transparent 55%,
                rgba(12,10,9,0.4) 85%,
                var(--card-body, var(--surface)) 100%
            );
        }

        .lbxd-hero-extension {
            position: relative;
            height: 32px;
            margin-top: -32px;
            z-index: 2;
            background-image: var(--poster-img, none);
            background-size: cover;
            background-position: center 85%;
            filter: blur(6px) brightness(0.75) saturate(90%);
            -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, transparent 100%);
            mask-image: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, transparent 100%);
            pointer-events: none;
        }

        .lbxd-frame {
            position: absolute;
            left: var(--sp-lg);
            right: var(--sp-lg);
            bottom: var(--sp-lg);
            z-index: 3;
            padding: var(--sp-md) var(--sp-lg);
            border: 1px solid rgba(232, 168, 74, 0.5);
            border-radius: var(--rd-sm);
        }

        .lbxd-frame-row {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 16px;
        }
        .lbxd-meta {
            min-width: 0;
            flex: 1;
            padding-right: 8px;
        }
        .lbxd-title {
            font-family: var(--serif);
            font-size: 19px;
            font-weight: 700;
            line-height: 1.15;
            letter-spacing: -0.02em;
            color: var(--title);
            margin: 0;
            font-style: italic;
            text-shadow: 0 1px 10px rgba(0,0,0,0.5);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .lbxd-title {
            text-decoration: none;
        }
        .lbxd-title:hover {
            text-decoration: underline;
            text-decoration-color: var(--amber);
            text-underline-offset: 2px;
        }
        .lbxd-title-underline {
            width: 32px;
            height: 2px;
            background: linear-gradient(90deg, var(--amber), transparent);
            margin-top: var(--sp-xs);
            border-radius: 1px;
        }
        .lbxd-meta-line {
            display: flex;
            align-items: center;
            gap: var(--sp-sm);
            margin-top: var(--sp-xs);
            font-family: var(--sans);
        }
        .lbxd-year {
            font-size: 12px;
            font-weight: 500;
            line-height: 16px;
            color: var(--muted);
            letter-spacing: 0.02em;
        }
        .lbxd-runtime {
            font-size: 12px;
            font-weight: 400;
            line-height: 16px;
            color: var(--muted);
        }
        .lbxd-runtime::before {
            content: '\u00B7';
            margin-right: var(--sp-sm);
            color: var(--faint);
        }

        /* ─── Compact text-only rating ──────────────────────── */
        .lbxd-rating-compact {
            display: inline-flex;
            align-items: baseline;
            gap: 6px;
            flex-shrink: 0;
            margin-left: auto;
            padding-left: 4px;
            font-family: var(--sans);
            font-variant-numeric: tabular-nums;
            white-space: nowrap;
        }
        .lbxd-rating-score {
            font-size: 15px;
            font-weight: 700;
            line-height: 1;
            color: var(--amber-2);
        }
        .lbxd-rating-slash {
            font-size: 12px;
            font-weight: 400;
            color: var(--faint);
            line-height: 1;
        }
        .lbxd-rating-max {
            font-size: 12px;
            font-weight: 600;
            color: var(--muted);
            line-height: 1;
        }
        .lbxd-rating-count {
            font-size: 10px;
            font-weight: 500;
            color: var(--muted);
            line-height: 1;
        }
        .lbxd-rating-count::before {
            content: '\u00B7';
            margin-right: 4px;
            color: var(--faint);
        }

        .lbxd-zone {
            height: 1px;
            background: linear-gradient(90deg, transparent 0%, var(--edge) 20%, var(--edge) 80%, transparent 100%);
            margin: 0;
            position: relative;
            z-index: 6;
        }

        .lbxd-details {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: var(--sp-sm);
            padding: var(--sp-lg) var(--sp-xl) var(--sp-sm);
            position: relative;
            z-index: 6;
            font-family: var(--sans);
        }
        .lbxd-director {
            font-size: 14px;
            font-weight: 400;
            line-height: 20px;
            color: var(--body);
        }
        .lbxd-director-label {
            color: var(--amber);
            font-weight: 700;
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            margin-right: var(--sp-sm);
            font-family: var(--sans);
        }
        .lbxd-genres {
            display: flex;
            flex-wrap: wrap;
            gap: var(--sp-xs);
            width: 100%;
            margin-top: 2px;
        }
        .lbxd-genre {
            font-family: var(--sans);
            font-size: 10px;
            font-weight: 600;
            line-height: 12px;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            padding: 4px 10px;
            border-radius: var(--rd-sm);
            border: 1px solid var(--edge-warm);
            background: var(--amber-dim);
            color: var(--amber-2);
            transition: background 0.15s ease, border-color 0.15s ease;
            cursor: default;
        }
        .lbxd-genre:hover {
            background: rgba(232, 168, 74, 0.2);
            border-color: var(--amber);
        }

        .lbxd-synopsis {
            padding: var(--sp-md) var(--sp-xl) var(--sp-2xl);
            font-family: var(--sans);
            font-size: 14px;
            font-weight: 400;
            line-height: 22px;
            color: var(--body);
            max-height: 140px;
            overflow-y: auto;
            position: relative;
            z-index: 6;
            overscroll-behavior: contain;
        }
        .lbxd-synopsis::-webkit-scrollbar {
            width: 3px;
        }
        .lbxd-synopsis::-webkit-scrollbar-track {
            background: transparent;
        }
        .lbxd-synopsis::-webkit-scrollbar-thumb {
            background: var(--edge);
            border-radius: 2px;
        }
        .lbxd-synopsis-mask {
            mask-image: linear-gradient(to bottom, transparent 0, #000 8px, #000 calc(100% - 8px), transparent 100%);
            -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 8px, #000 calc(100% - 8px), transparent 100%);
        }

        .lbxd-close {
            position: absolute;
            top: var(--sp-md);
            right: var(--sp-md);
            width: 28px;
            height: 28px;
            background: rgba(255,255,255,0.06);
            border: 1.5px solid var(--muted);
            border-radius: 50%;
            color: var(--muted);
            font-size: 14px;
            line-height: 1;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.15s ease, color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
            z-index: 20;
            font-family: var(--sans);
        }
        .lbxd-close::after {
            content: '';
            position: absolute;
            inset: -8px;
            border-radius: 50%;
        }
        .lbxd-close:focus-visible {
            outline: 2px solid var(--amber);
            outline-offset: 2px;
            background: var(--inner);
            border-color: var(--amber);
        }
        .lbxd-close:hover {
            color: var(--title);
            background: var(--inner);
            border-color: var(--edge-warm);
            transform: rotate(90deg);
        }

        .lbxd-skeleton-hero {
            height: 168px;
            background: linear-gradient(100deg, var(--surface-2) 30%, var(--skeleton) 50%, var(--surface-2) 70%);
            background-size: 200% 100%;
            animation: skel-shimmer 1.6s ease-in-out infinite;
        }
        .lbxd-skeleton-body {
            padding: var(--sp-lg) var(--sp-xl);
            display: flex;
            flex-direction: column;
            gap: var(--sp-sm);
        }
        .lbxd-skeleton-line {
            height: 14px;
            border-radius: 3px;
            background: linear-gradient(100deg, var(--inner) 30%, var(--skeleton) 50%, var(--inner) 70%);
            background-size: 200% 100%;
            border: 1px solid var(--edge);
            animation: skel-shimmer 1.6s ease-in-out infinite;
        }
        .lbxd-skeleton-line:nth-child(1) { width: 60%; }
        .lbxd-skeleton-line:nth-child(2) { width: 90%; }
        .lbxd-skeleton-line:nth-child(3) { width: 75%; }
        @keyframes skel-shimmer {
            0%   { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }

        @media (prefers-reduced-motion: reduce) {
            .lbxd-card {
                animation: none;
            }
            .lbxd-card.closing {
                animation: fade-out 0.08s ease forwards;
            }
            .lbxd-skeleton-hero,
            .lbxd-skeleton-line {
                animation: none;
            }
        }
        @keyframes fade-out {
            from { opacity: 1; }
            to { opacity: 0; }
        }

        .lbxd-error {
            padding: var(--sp-2xl);
            text-align: center;
            position: relative;
            z-index: 6;
            font-family: var(--sans);
        }
        .lbxd-error-icon {
            font-size: 22px;
            margin-bottom: var(--sp-sm);
            display: block;
            color: var(--amber);
        }
        .lbxd-error-text {
            font-size: 14px;
            font-weight: 400;
            line-height: 20px;
            color: var(--muted);
        }

        .lbxd-hint {
            position: absolute;
            bottom: 6px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--surface);
            color: var(--muted);
            font-family: var(--sans);
            font-size: 9px;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            padding: 3px 8px;
            border-radius: var(--rd-sm);
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.2s ease, transform 0.2s ease;
            z-index: 9998;
            white-space: nowrap;
            border: 1px solid var(--edge);
        }
        .lbxd-target:hover .lbxd-hint,
        .lbxd-target.active .lbxd-hint {
            opacity: 1;
            transform: translateX(-50%) translateY(-2px);
        }
        .lbxd-target {
            position: relative;
        }
        .lbxd-target.active {
            outline: 2px solid var(--amber);
            outline-offset: 3px;
            border-radius: 2px;
        }
    `);

  function getFilmInfo(el) {
    const link =
      el.closest('a[href^="/film/"]') || el.querySelector('a[href^="/film/"]');
    if (link) {
      const m = link.getAttribute("href").match(/\/film\/([^\/]+)/);
      if (m) {
        const ta = link.getAttribute("data-original-title") || "";
        const tm = ta.match(/^(.+?)\s*\((\d{4})\)/);
        return {
          slug: m[1],
          name: tm
            ? tm[1].trim()
            : link
                .querySelector(".frame-title")
                ?.textContent?.replace(/\(\d{4}\)/, "")
                .trim() || m[1],
          year: tm ? tm[2] : null,
          link: link.getAttribute("href"),
        };
      }
    }
    if (el.tagName === "A" && el.getAttribute("href")?.startsWith("/film/")) {
      const m = el.getAttribute("href").match(/\/film\/([^\/]+)/);
      if (m) {
        const ta = el.getAttribute("data-original-title") || "";
        const tm = ta.match(/^(.+?)\s*\((\d{4})\)/);
        return {
          slug: m[1],
          name: tm
            ? tm[1].trim()
            : el
                .querySelector(".frame-title")
                ?.textContent?.replace(/\(\d{4}\)/, "")
                .trim() || m[1],
          year: tm ? tm[2] : null,
          link: el.getAttribute("href"),
        };
      }
    }
    return null;
  }

  function filmUrl(slug) {
    return `https://letterboxd.com/film/${slug}/`;
  }

  function findPosters() {
    const sels = ["div.poster.film-poster", 'a.frame.has-menu[href^="/film/"]'];
    const found = new Set();
    sels.forEach((s) =>
      document.querySelectorAll(s).forEach((e) => found.add(e)),
    );
    return Array.from(found);
  }

  function attachHint(el) {
    if (el.querySelector(".lbxd-hint")) return;
    el.classList.add("lbxd-target");
    const h = document.createElement("div");
    h.className = "lbxd-hint";
    h.textContent = "Shift+Z";
    el.style.position = "relative";
    el.appendChild(h);
  }

  function onDelegatedMouseEnter(e) {
    const el = e.target.closest(
      'div.poster.film-poster, a.frame.has-menu[href^="/film/"]',
    );
    if (!el) return;
    const info = getFilmInfo(el);
    if (!info) return;
    hoveredFilm = {
      el: el,
      slug: info.slug,
      url: info.link
        ? `https://letterboxd.com${info.link}`
        : filmUrl(info.slug),
      name: info.name,
      year: info.year,
    };
    el.classList.add("active");
  }

  function onDelegatedMouseLeave(e) {
    const el = e.target.closest(
      'div.poster.film-poster, a.frame.has-menu[href^="/film/"]',
    );
    if (!el) return;
    el.classList.remove("active");
    setTimeout(() => {
      if (
        hoveredFilm &&
        hoveredFilm.el === el &&
        !activeCard?.matches(":hover")
      ) {
        hoveredFilm = null;
      }
    }, 100);
  }

  function parsePage(html) {
    const d = {
      title: null,
      year: null,
      rating: null,
      ratingCount: null,
      synopsis: null,
      runtime: null,
      director: null,
      genres: [],
      posterUrl: null,
    };
    const jm = html.match(
      /<script type="application\/ld\+json">\s*\/\*\s*<!\[CDATA\[\s*\*\/\s*(\{[\s\S]*?\})\s*\/\*\s*\]\]>\s*\*\/\s*<\/script>/,
    );
    if (jm) {
      try {
        const ld = JSON.parse(jm[1]);
        d.title = ld.name || null;
        d.year = ld.releasedEvent?.[0]?.startDate || null;
        d.director = ld.director?.map((x) => x.name).join(", ") || null;
        d.posterUrl = ld.image || null;
      } catch (e) {}
    }
    if (!d.title) {
      const tm = html.match(/<meta property="og:title" content="([^"]+)"/);
      if (tm) {
        const p = tm[1].split(" (");
        d.title = p[0];
        if (p[1]) d.year = p[1].replace(")", "");
      }
    }
    if (!d.synopsis) {
      const dm = html.match(
        /<meta property="og:description" content="([^"]+)"/,
      );
      if (dm) d.synopsis = decodeEntities(dm[1]);
    }
    for (const pat of [
      /"ratingValue"\s*:\s*"?([\d.]+)"?/,
      /class="[^"]*rating[^"]*"[^>]*>([\d.]+)</,
      />([\d.]+)\s*<span[^>]*>\s*out of\s*5/i,
    ]) {
      const m = html.match(pat);
      if (m) {
        d.rating = parseFloat(m[1]);
        break;
      }
    }
    const cm = html.match(/([\d,]+)\s*ratings/i);
    if (cm) d.ratingCount = cm[1];
    const rm = html.match(/(\d+)\s*mins/i);
    if (rm) d.runtime = parseInt(rm[1]);
    const gm = html.match(/<meta[^>]*name="keywords"[^>]*content="([^"]*)"/i);
    if (gm)
      d.genres = gm[1]
        .split(",")
        .map((g) => g.trim())
        .filter((g) => g);
    if (!d.director) {
      const dm = html.match(/Directed by\s+([^<\n]+)/i);
      if (dm) d.director = dm[1].trim();
    }
    return d;
  }

  function fetchData(url) {
    return new Promise((resolve, reject) => {
      if (cache.has(url)) {
        resolve(cache.get(url).data);
        return;
      }
      const request = GM_xmlhttpRequest({
        method: "GET",
        url,
        timeout: FETCH_TIMEOUT,
        onload(r) {
          if (r.status === 200) {
            const d = parsePage(r.responseText);
            cache.set(url, { data: d, timestamp: Date.now() });
            saveCache();
            resolve(d);
          } else reject(new Error(`HTTP ${r.status}`));
        },
        onerror: () => reject(new Error("Network error")),
        ontimeout: () => reject(new Error("Request timeout")),
        onabort: () => reject(new Error("Request aborted")),
      });
      currentRequest = request;
    });
  }

  function esc(t) {
    const d = document.createElement("div");
    d.textContent = t;
    return d.innerHTML;
  }

  function decodeEntities(str) {
    const d = document.createElement("div");
    d.innerHTML = str;
    return d.textContent || d.innerText || "";
  }

  function formatCount(count) {
    const n = parseInt(String(count).replace(/,/g, ""), 10);
    if (isNaN(n)) return String(count);
    if (n >= 1000000) return (n / 1000000).toFixed(1).replace(/\.0$/, "") + "M";
    if (n >= 1000) return (n / 1000).toFixed(1).replace(/\.0$/, "") + "K";
    return String(count);
  }

  function samplePosterColor(imageUrl) {
    if (colorCache.has(imageUrl)) {
      return Promise.resolve(colorCache.get(imageUrl));
    }
    return new Promise((resolve) => {
      const img = new Image();
      img.crossOrigin = "anonymous";
      img.onload = () => {
        try {
          const canvas = document.createElement("canvas");
          const ctx = canvas.getContext("2d");
          canvas.width = 50;
          canvas.height = 50;
          ctx.drawImage(
            img,
            0,
            img.height * 0.7,
            img.width,
            img.height * 0.3,
            0,
            0,
            50,
            50,
          );
          const data = ctx.getImageData(0, 25, 50, 25).data;
          let r = 0,
            g = 0,
            b = 0,
            count = 0;
          for (let i = 0; i < data.length; i += 4) {
            r += data[i];
            g += data[i + 1];
            b += data[i + 2];
            count++;
          }
          r = Math.round(r / count);
          g = Math.round(g / count);
          b = Math.round(b / count);
          const darken = 0.75;
          const gray = (r + g + b) / 3;
          const desat = 0.85;
          r = Math.round((r * desat + gray * (1 - desat)) * darken);
          g = Math.round((g * desat + gray * (1 - desat)) * darken);
          b = Math.round((b * desat + gray * (1 - desat)) * darken);
          const color = `rgb(${r}, ${g}, ${b})`;
          colorCache.set(imageUrl, color);
          resolve(color);
        } catch (e) {
          resolve("var(--surface)");
        }
      };
      img.onerror = () => resolve("var(--surface)");
      img.src = imageUrl;
    });
  }

  function createCard() {
    const c = document.createElement("div");
    c.className = "lbxd-card";
    c.setAttribute("role", "dialog");
    c.setAttribute("aria-label", "Film preview");
    c.setAttribute("aria-live", "polite");
    c.innerHTML = `
            <button class="lbxd-close" aria-label="Close preview" title="Close (Esc)">\u00D7</button>
            <div class="lbxd-skeleton-hero"></div>
            <div class="lbxd-skeleton-body">
                <div class="lbxd-skeleton-line"></div>
                <div class="lbxd-skeleton-line"></div>
                <div class="lbxd-skeleton-line"></div>
            </div>`;
    c.querySelector(".lbxd-close").addEventListener("click", closeCard);
    return c;
  }

  function applySynopsisMask(el) {
    if (el.scrollHeight > el.clientHeight) {
      el.classList.add("lbxd-synopsis-mask");
    }
  }

  function renderCard(card, d, filmUrl) {
    const hasR = d.rating !== null && !isNaN(d.rating);
    const ratingCountHtml = d.ratingCount
      ? `<span class="lbxd-rating-count">${formatCount(d.ratingCount)}</span>`
      : "";

    /* ─── Text-only rating format ─────────────────────────── */
    const ratingHtml = hasR
      ? `<span class="lbxd-rating-compact"><span class="lbxd-rating-score">${d.rating.toFixed(2)}</span><span class="lbxd-rating-slash">/</span><span class="lbxd-rating-max">5</span>${ratingCountHtml}</span>`
      : "";

    const metaParts = [];
    if (d.year) metaParts.push(`<span class="lbxd-year">${d.year}</span>`);
    if (d.runtime)
      metaParts.push(`<span class="lbxd-runtime">${d.runtime} min</span>`);
    const metaHtml = metaParts.join("");

    const dirHtml = d.director
      ? `<span class="lbxd-director-label">Director</span>${esc(d.director)}`
      : "";
    const genHtml = d.genres.length
      ? `<div class="lbxd-genres">${d.genres
          .slice(0, 4)
          .map((g) => `<span class="lbxd-genre">${esc(g)}</span>`)
          .join("")}</div>`
      : "";
    const hasDetails = dirHtml || genHtml;
    const detHtml = hasDetails
      ? `<div class="lbxd-details">${dirHtml ? `<span class="lbxd-director">${dirHtml}</span>` : ""}${genHtml}</div>`
      : "";

    const titleUrl = filmUrl || "#";
    const titleIsLong = d.title && d.title.length > 20;
    const titleStyle = titleIsLong ? ' style="font-style:normal;"' : "";
    card.setAttribute("aria-label", `Preview: ${d.title || "Film"}`);

    const isHttpUrl =
      typeof d.posterUrl === "string" && /^https?:\/\//i.test(d.posterUrl);
    card.style.setProperty("--card-body", "var(--surface)");

    card.innerHTML = `
            <button class="lbxd-close" aria-label="Close preview" title="Close (Esc)">\u00D7</button>
            <div class="lbxd-hero-bg"></div>
            <div class="lbxd-hero-overlay">
                <div class="layer-atmosphere"></div>
                <div class="layer-readability"></div>
                <div class="layer-bottom"></div>
            </div>
            <div class="lbxd-hero">
                <div class="lbxd-frame">
                    <div class="lbxd-frame-row">
                        <div class="lbxd-meta">
                            <a href="${esc(titleUrl)}" class="lbxd-title" target="_blank" rel="noopener noreferrer"${titleStyle}>${esc(d.title || "Unknown")}</a>
                            <div class="lbxd-title-underline"></div>
                            <div class="lbxd-meta-line">${metaHtml}</div>
                        </div>
                        ${ratingHtml}
                    </div>
                </div>
            </div>
            <div class="lbxd-hero-extension"></div>
            ${detHtml ? `<div class="lbxd-zone"></div>${detHtml}` : ""}
            <div class="lbxd-zone"></div>
            <div class="lbxd-synopsis">${esc(d.synopsis || "No synopsis available.")}</div>`;

    const heroBg = card.querySelector(".lbxd-hero-bg");
    heroBg.style.setProperty(
      "--poster-img",
      isHttpUrl ? `url(${JSON.stringify(d.posterUrl)})` : "none",
    );

    const heroExt = card.querySelector(".lbxd-hero-extension");
    if (heroExt) {
      heroExt.style.setProperty(
        "--poster-img",
        isHttpUrl ? `url(${JSON.stringify(d.posterUrl)})` : "none",
      );
    }

    // Sample poster color asynchronously — card appears immediately with fallback
    if (isHttpUrl) {
      samplePosterColor(d.posterUrl).then((color) => {
        if (card.parentNode) {
          card.style.setProperty("--card-body", color);
        }
      });
    }

    const synopsisEl = card.querySelector(".lbxd-synopsis");
    if (synopsisEl) requestAnimationFrame(() => applySynopsisMask(synopsisEl));

    card.querySelector(".lbxd-close").addEventListener("click", closeCard);
  }

  function renderError(card, msg) {
    card.innerHTML = `
            <button class="lbxd-close" aria-label="Close preview" title="Close (Esc)">\u00D7</button>
            <div class="lbxd-error">
                <span class="lbxd-error-icon">\u26A0</span>
                <div class="lbxd-error-text">${esc(msg)}</div>
            </div>`;
    card.querySelector(".lbxd-close").addEventListener("click", closeCard);
  }

  function posCard(card, target) {
    const r = target.getBoundingClientRect();
    const cw = 400,
      ch = Math.min(card.scrollHeight || 360, 500);
    let left = r.right + 16,
      top = r.top - 24;
    if (left + cw > window.innerWidth - 16) left = r.left - cw - 16;
    if (left < 12) left = 12;
    if (top + ch > window.innerHeight - 16) top = window.innerHeight - ch - 16;
    if (top < 12) top = 12;
    card.style.left = `${left}px`;
    card.style.top = `${top}px`;
  }

  function showCard(target, url) {
    // Always allow new card — abort any in-flight request
    if (currentRequest && typeof currentRequest.abort === "function") {
      currentRequest.abort();
    }
    closeCard();
    activeCard = createCard();
    document.body.appendChild(activeCard);
    posCard(activeCard, target);
    if (autoCloseTimer) clearTimeout(autoCloseTimer);
    autoCloseTimer = setTimeout(() => closeCard(), CARD_AUTO_CLOSE_MS);
    const id = ++fetchId;
    fetchData(url)
      .then((d) => {
        if (id !== fetchId) return;
        renderCard(activeCard, d, url);
        posCard(activeCard, target);
      })
      .catch((e) => {
        if (id !== fetchId) return;
        renderError(activeCard, e.message || "Failed to load");
      })
      .finally(() => {
        if (id === fetchId) currentRequest = null;
      });
  }

  function closeCard() {
    if (!activeCard) return;
    const cardToRemove = activeCard;
    activeCard = null;
    if (autoCloseTimer) {
      clearTimeout(autoCloseTimer);
      autoCloseTimer = null;
    }
    cardToRemove.classList.add("closing");
    setTimeout(() => {
      if (cardToRemove.parentNode) cardToRemove.remove();
    }, 150);
    if (hoveredFilm && hoveredFilm.el)
      hoveredFilm.el.classList.remove("active");
  }

  function onKey(e) {
    if (e.key.toLowerCase() !== PREVIEW_KEY || !e.shiftKey || !hoveredFilm)
      return;
    e.preventDefault();
    showCard(hoveredFilm.el, hoveredFilm.url);
  }
  function onEsc(e) {
    if (e.key === "Escape") closeCard();
  }
  function onClick(e) {
    if (activeCard && !activeCard.contains(e.target)) closeCard();
  }

  function init() {
    cleanupStuckCards();
    loadCache();
    const posters = findPosters();
    console.log("[LBXD Preview] Found", posters.length, "posters");
    posters.forEach((el) => attachHint(el));

    document.body.addEventListener("mouseenter", onDelegatedMouseEnter, true);
    document.body.addEventListener("mouseleave", onDelegatedMouseLeave, true);

    new MutationObserver((muts) => {
      for (const m of muts) {
        for (const n of m.addedNodes) {
          if (n.nodeType !== 1) continue;
          const arr = n.matches?.(
            'div.poster.film-poster, a.frame.has-menu[href^="/film/"]',
          )
            ? [n]
            : n.querySelectorAll?.(
                'div.poster.film-poster, a.frame.has-menu[href^="/film/"]',
              ) || [];
          for (const el of arr) attachHint(el);
        }
      }
    }).observe(document.body, { childList: true, subtree: true });

    document.addEventListener("keydown", onKey);
    document.addEventListener("keydown", onEsc);
    document.addEventListener("click", onClick);

    console.log("[LBXD Preview] v4.5.4 initialized.");
  }

  document.readyState === "loading"
    ? document.addEventListener("DOMContentLoaded", init)
    : init();
})();