<!-- Session 62 cleanup: removed inline notification bell/panel/CSS/JS. The
     shared partial in lumiveil-nav.js v1.11+ now serves the bell + panel
     sitewide with better mobile behavior, so explore's inline copy is
     redundant tech debt. Removed:
       - CSS (.notif-* selectors, ~35 lines + 1 mobile media query)
       - HTML (#notif-panel and #notif-bell nodes in .nav-r)
       - JS (toggleNotifPanel, closeNotifPanel, loadNotifications,
             loadNotifCount, renderNotifications, markAllRead + state vars)
       - initNav call to loadNotifCount()
     Kept: escHtml() and relativeTime() — used by other card/vault rendering
     code in explore, not just notifications. -->
<!-- Session 61 accessibility hotfix: prefers-reduced-motion media query respects OS-level "Reduce Motion" setting. Disables continuous starfield/glow animations that were flagged as a migraine trigger by a user DM. --><!-- Session 60: (a) Vault panel "Sign out" button renamed to "Account" and linked to /settings. Matches chat.html Session 60 change. (b) Lumi sprite popup's "Settings" link now navigates to /settings instead of opening the in-page settings modal. The in-page settings modal (#settings-modal + openSettings()/saveSettings()/changePassword()) is now orphaned dead code — kept for now since the Lumi sprite is planned for other pages and the modal infrastructure may be reused. Notification prefs migrated to /settings using the same localStorage key (lumi_settings). --><!-- Session 57: gender filter added to explore. Single-select chip row in filter popup (Female/Male/Nonbinary/Other) above the multi-select Tags row. Sends ?gender= param to /api/characters. Backend enforces allowlist. Filter badge counts gender as +1 if active. -->
<!-- lumiveil-explore.html | v1.54 | Session 65 (a11y): aria-labels on icon-only buttons — sidebar-collapse toggle, and the like/bookmark glyph buttons (♡/◈) in both the detail modal and the JS-rendered character cards. Card buttons also get aria-pressed reflecting liked/bookmarked state. -->
<!-- lumiveil-explore.html | v1.53 | Session 56 (explore mobile audit) -->
<!-- v1.53 changes:
     - Removed the redundant Create button next to the filter — the "/create"
       nav pill already covers this and the extra button crowded the search row.
     - Character tagline now always visible on mobile. It was hover-only via
       max-height:0 + opacity:0, so touch users couldn't see it. Same class
       of bug fixed on chat sidebar tags earlier in Session 56.
     - Filter popup made mobile-safe: was width:300px positioned right:0,
       could clip against the left edge at 375px. Now stretches within the
       viewport with 16px margin.
     - Discover bar (All/Popular/Newest/Trending/Featured/Following) became
       a horizontal scroll strip on mobile instead of wrapping to 3 rows —
       character.ai pattern, saves vertical space.
     Deferred (post-launch feature ticket): replace "All" with a gender
     filter. Currently blocked because the characters table has no gender
     column — create.html sends `gender` but INSERT drops it. Real feature:
     schema migration + controller INSERT/PATCH + list-endpoint filter
     param + UI. Not audit-scope. -->
<!-- lumiveil-explore.html | v1.52 | Session 56 -->
<!-- Lumiveil explore.html — v1.52 (Session 56 revision): mobile grid
     changed from 4/3 columns to a flat 2 columns (character.ai / tipsy.chat
     standard). Overlay text sizing reverted to defaults since cards are
     large enough at 2-col. Logo SVGs (nav + vault-logo) synced with landing
     (added missing blue dashed ring + teal satellite). -->
<!-- Lumiveil explore.html — v1.51 (Session 56): mobile card grid tightened
     — 4 columns at ≤768px, 3 at ≤400px. Superseded by v1.52. -->
<!-- lumiveil-explore.html | v1.50 | Session 55 -->
<!-- Lumiveil explore.html — v1.50 (Session 55): footer legal links now point
     to HTML routes (/terms, /privacy) and added /guidelines. -->
<!-- Lumiveil explore.html — v1.49 (Session 55): SEO meta pass — description,
     canonical, Open Graph, Twitter card, robots=index, favicon link. -->
<!-- Lumiveil explore.html — v1.48 (Session 54): Following filter wired to
     real backend (?following=true). Backend also filters blocked users'
     characters from every response, so no client-side changes needed for
     that side of the block system.
     - v1.47 (Session 48 nav standardization) -->
<!DOCTYPE html>
<!-- lumiveil-explore.html v1.56 · Session 66. Vault sidebar sticky fix: body was `overflow-x: hidden` which forces `overflow-y: auto` and makes body a scroll container — that broke `position: sticky` on `.sidebar` so it scrolled with the page. Switched to `overflow-x: clip`, which prevents horizontal scroll WITHOUT creating a scroll container. Sticky sidebar now works. -->
<!-- lumiveil-explore.html v1.55 · Session 66. Creators strip: single search input now fetches both characters (existing) and matching creators, rendered as a horizontal pill row above the grid (hidden when query is empty or no match). Backend: GET /api/auth/users/search. -->
<!-- Lumiveil explore.html — v1.46 (Session 49 admin follow-up): Featured pill now uses the real ?featured=true API param (was a fake sort-by-trending); added ID-based dedupe on loadChars so the same character never appears twice on the grid even under a race condition) -->
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  <title>Lumiveil — Explore</title>

  <!-- ── SEO / social meta (Session 55) ─────────────────────────────────── -->
  <meta name="description" content="Browse the Lumiveil catalog — SFW AI characters made by writers and roleplayers. Fantasy, sci-fi, slice-of-life, and more. New characters daily." />
  <meta name="robots" content="index, follow" />
  <link rel="canonical" href="https://lumiveil.net/explore" />
  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />

  <meta property="og:type" content="website" />
  <meta property="og:site_name" content="Lumiveil" />
  <meta property="og:title" content="Explore Lumiveil — SFW AI characters, made by writers" />
  <meta property="og:description" content="A growing catalog of story-first AI characters. Fantasy, sci-fi, slice-of-life, and more." />
  <meta property="og:url" content="https://lumiveil.net/explore" />
  <meta property="og:image" content="https://lumiveil.net/favicon.svg" />

  <meta name="twitter:card" content="summary" />
  <meta name="twitter:title" content="Explore Lumiveil — SFW AI characters, made by writers" />
  <meta name="twitter:description" content="A growing catalog of story-first AI characters." />
  <meta name="twitter:image" content="https://lumiveil.net/favicon.svg" />
  <!-- ────────────────────────────────────────────────────────────────────── -->
  <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Syne:wght@400;500;600;700;800&family=Space+Mono:ital@0;1&display=swap" rel="stylesheet"/>
  <style>
    /* Session 61 reduce-motion inline v2 — handles JS-created .star elements
       (chat/wellness/profile/vault use document.createElement + inline var(--o)
       for random opacity). Original v1 forced animation-duration to 0.01ms
       but the animation resolved to the 100% keyframe opacity:var(--o) which
       is 0.04-0.14 (nearly invisible), causing a visible "pop then fade" on
       page load. v2 disables the animation on .star entirely and forces a
       fixed opacity so stars are static AND visible. Belt-and-suspenders with
       nav.js sitewide injection. */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
      .shooting-star { display: none !important; }
      /* JS-created twinkling stars: disable animation + force fixed opacity */
      .star {
        animation: none !important;
        opacity: 0.5 !important;
      }
    }

    :root{
      --void:#04030d; --nebula-dark:#0d0b24; --nebula-mid:#13103a;
      --aurora-violet:#8b5cf6; --aurora-pink:#e879f9; --aurora-teal:#22d3ee; --aurora-blue:#4f7bff;
      --starlight:#e8e3ff; --moon:#f0ebff; --comet:#a89ece; --dim:#6b6390;
      --gold:#f0c060; --danger:#ff4f6e; --success:#34d399; --warn:#f59e0b;
    }
    *{margin:0;padding:0;box-sizing:border-box;}
    /* overflow-x:clip (not hidden) — `hidden` forces overflow-y to auto,
       which turns body into a scroll container and breaks the sticky vault
       sidebar (Session 66 fix). `clip` prevents horizontal scroll without
       creating a scroll container, so position:sticky keeps working. */
    body{background:var(--void);color:var(--starlight);font-family:'Syne',sans-serif;overflow-x:clip;}

    /* Session 61 accessibility hotfix: respect OS-level "Reduce Motion".
       Applies to all animated elements via wildcard. Continuous background
       animations (stars, glows, drifts) were flagged as a migraine trigger
       via user DM. Users who have "Reduce Motion" enabled in their OS
       accessibility settings now get a static site. */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
    }
    #starfield{position:fixed;inset:0;z-index:0;pointer-events:none;}
    .star{position:absolute;border-radius:50%;background:white;animation:twinkle var(--dur) ease-in-out infinite;animation-delay:var(--delay);}
    @keyframes twinkle{0%,100%{opacity:var(--min-op);}50%{opacity:1;}}
    .nebula{position:fixed;border-radius:50%;filter:blur(100px);pointer-events:none;z-index:0;}
    .n1{width:700px;height:700px;background:radial-gradient(circle,rgba(139,92,246,0.1) 0%,transparent 70%);top:-200px;left:-150px;}
    .n2{width:500px;height:500px;background:radial-gradient(circle,rgba(232,121,249,0.07) 0%,transparent 70%);bottom:0;right:-100px;}

    /* ===== LAYOUT ===== */
    .app{position:relative;z-index:1;display:grid;grid-template-columns:240px 1fr;grid-template-rows:auto 1fr;min-height:100vh;transition:grid-template-columns 0.28s cubic-bezier(0.4,0,0.2,1);}
    .app.sidebar-collapsed{grid-template-columns:36px 1fr;}

    /* ===== NAV — matches chat page exactly ===== */
    nav{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;padding:0 28px;height:64px;border-bottom:1px solid rgba(139,92,246,0.12);backdrop-filter:blur(16px);background:rgba(4,3,13,0.75);position:sticky;top:0;z-index:100;}
    .logo{display:flex;align-items:center;gap:10px;text-decoration:none;}
    .logo-text{font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-weight:600;background:linear-gradient(135deg,#e8e3ff,#8b5cf6,#e879f9);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
    .nav-r{display:flex;align-items:center;gap:10px;}
    .nav-center{display:flex;gap:6px;align-items:center;}
    .nav-link-pill.active{background:rgba(139,92,246,0.15);color:#e8e3ff;border-color:rgba(139,92,246,0.3);}
    .lumen-pill{display:flex;align-items:center;gap:6px;padding:5px 13px;border-radius:100px;background:rgba(240,192,96,0.08);border:1px solid rgba(240,192,96,0.2);font-family:'Space Mono',monospace;font-size:0.72rem;color:#f0c060;text-decoration:none;}
    .lumen-dot{width:7px;height:7px;border-radius:50%;background:radial-gradient(circle,#f0c060,#c49a3c);flex-shrink:0;}
    .nova-pill{display:flex;align-items:center;gap:6px;padding:5px 13px;border-radius:100px;background:rgba(139,92,246,0.08);border:1px solid rgba(139,92,246,0.2);font-family:'Space Mono',monospace;font-size:0.72rem;color:#8b5cf6;text-decoration:none;}
    .nova-dot{width:7px;height:7px;border-radius:50%;background:radial-gradient(circle,#8b5cf6,#6d4fc7);flex-shrink:0;}
    /* Session 62: .notif-btn-nav / .notif-badge / .notif-panel / .notif-* styles
       are now injected by lumiveil-nav.js v1.11+'s shared partial. Removed from
       here to eliminate duplicated CSS. */
    .nav-link-pill{padding:6px 14px;border-radius:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);color:rgba(232,227,255,0.6);font-size:0.75rem;font-weight:600;text-decoration:none;transition:all 0.2s;font-family:'Syne',sans-serif;}
    .nav-link-pill:hover{background:rgba(139,92,246,0.1);color:#e8e3ff;border-color:rgba(139,92,246,0.25);}
    .nav-avatar{width:34px;height:34px;border-radius:50%;border:1.5px solid rgba(139,92,246,0.4);background:var(--nebula-mid);display:flex;align-items:center;justify-content:center;font-family:'Cormorant Garamond',serif;font-size:0.95rem;font-weight:600;color:var(--aurora-violet);text-decoration:none;cursor:pointer;overflow:hidden;transition:border-color 0.2s;flex-shrink:0;}
    .nav-avatar:hover{border-color:rgba(139,92,246,0.8);}
    .nav-avatar img{width:100%;height:100%;object-fit:cover;}

    /* ===== SIDEBAR — matches Space Vault from chat page exactly ===== */
    .sidebar{background:rgba(6,4,20,0.92);border-right:1px solid rgba(139,92,246,0.1);height:calc(100vh - 64px);position:sticky;top:64px;overflow:hidden;display:flex;flex-direction:column;align-self:start;}
    .sidebar-collapse-btn{position:absolute;top:14px;right:-1px;z-index:10;width:22px;height:36px;background:rgba(20,14,48,0.98);border:1px solid rgba(139,92,246,0.35);border-left:none;border-radius:0 8px 8px 0;cursor:pointer;display:flex;align-items:center;justify-content:center;color:rgba(139,92,246,0.7);transition:color 0.2s,background 0.2s;box-shadow:2px 0 8px rgba(139,92,246,0.12);}
    .sidebar-collapse-btn:hover{color:var(--starlight);background:rgba(139,92,246,0.2);}
    .sidebar-collapse-btn svg{transition:transform 0.28s;}
    .app.sidebar-collapsed .sidebar-collapse-btn svg{transform:rotate(180deg);}
    .sidebar-collapsed-label{display:none;writing-mode:vertical-lr;font-size:0.55rem;font-weight:800;letter-spacing:0.2em;text-transform:uppercase;color:var(--dim);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);white-space:nowrap;pointer-events:none;}
    .app.sidebar-collapsed .sidebar-collapsed-label{display:block;}
    .sidebar-inner{display:flex;flex-direction:column;flex:1;overflow:hidden;transition:opacity 0.15s;}
    .app.sidebar-collapsed .sidebar-inner{opacity:0;pointer-events:none;}

    /* Vault header (inside sidebar, matches chat page) */
    .vault-header{padding:16px;border-bottom:1px solid rgba(139,92,246,0.1);flex-shrink:0;}
    .vault-logo{display:flex;align-items:center;gap:8px;text-decoration:none;margin-bottom:12px;}
    .vault-logo-text{font-family:'Cormorant Garamond',serif;font-size:1.2rem;font-weight:600;background:linear-gradient(135deg,#e8e3ff,#8b5cf6,#e879f9);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
    .vault-search{position:relative;}
    .vault-search-input{width:100%;background:rgba(255,255,255,0.04);border:1px solid rgba(139,92,246,0.15);border-radius:8px;padding:8px 10px 8px 32px;color:var(--starlight);font-family:'Syne',sans-serif;font-size:0.75rem;outline:none;transition:border-color 0.2s;}
    .vault-search-input:focus{border-color:rgba(139,92,246,0.4);}
    .vault-search-input::placeholder{color:var(--dim);}
    .vault-search-ico{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--dim);}
    .vault-section-label{font-size:0.58rem;font-weight:800;letter-spacing:0.2em;text-transform:uppercase;color:var(--dim);padding:12px 16px 6px;}
    .vault-list{flex:1;overflow-y:auto;padding:4px 8px;}
    .vault-list::-webkit-scrollbar{width:3px;}
    .vault-list::-webkit-scrollbar-thumb{background:rgba(139,92,246,0.2);border-radius:2px;}
    .vault-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;cursor:pointer;transition:background 0.15s;}
    .vault-item:hover{background:rgba(139,92,246,0.07);}
    .vault-avatar{width:38px;height:38px;border-radius:10px;overflow:hidden;flex-shrink:0;background:var(--nebula-mid);border:1px solid rgba(139,92,246,0.15);}
    .vault-avatar img{width:100%;height:100%;object-fit:cover;}
    .va-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:'Cormorant Garamond',serif;font-size:1.1rem;font-weight:600;color:var(--aurora-violet);}
    .vault-info{flex:1;min-width:0;}
    .vault-name{font-size:0.8rem;font-weight:700;color:var(--starlight);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .vault-preview{font-size:0.65rem;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:'Space Mono',monospace;margin-top:2px;}
    .vault-time{font-size:0.58rem;color:var(--dim);flex-shrink:0;font-family:'Space Mono',monospace;}
    /* Sidebar footer */
    .vault-footer{padding:12px;border-top:1px solid rgba(139,92,246,0.08);flex-shrink:0;}
    .vault-nav-row{display:flex;gap:6px;}
    .vnav-btn{flex:1;text-align:center;padding:7px 4px;border-radius:8px;font-size:0.68rem;font-weight:600;font-family:'Syne',sans-serif;cursor:pointer;transition:all 0.2s;text-decoration:none;display:block;border:none;}
    .vnav-explore{background:rgba(139,92,246,0.1);border:1px solid rgba(139,92,246,0.2) !important;color:rgba(232,227,255,0.7);}
    .vnav-explore:hover{color:var(--starlight);}
    .vnav-signout{background:transparent;border:1px solid rgba(255,255,255,0.06) !important;color:rgba(232,227,255,0.3);}
    .vnav-signout:hover{color:#f87171;border-color:rgba(248,113,113,0.25) !important;}

    /* ===== MAIN ===== */
    main{padding:28px 32px;overflow-y:auto;}
    .page-header{margin-bottom:24px;}
    .page-title{font-family:'Cormorant Garamond',serif;font-size:1.8rem;font-weight:300;color:var(--moon);margin-bottom:4px;}
    .page-sub{font-size:0.78rem;color:var(--dim);font-family:'Space Mono',monospace;}

    /* ===== SEARCH ROW ===== */
    .search-row{display:flex;gap:10px;margin-bottom:12px;flex-wrap:wrap;align-items:center;}
    .search-wrap{flex:1;min-width:200px;position:relative;}
    .search-input{width:100%;background:rgba(255,255,255,0.03);border:1px solid rgba(139,92,246,0.18);border-radius:10px;padding:10px 14px 10px 38px;color:var(--starlight);font-family:'Syne',sans-serif;font-size:0.82rem;outline:none;transition:all 0.2s;}
    .search-input:focus{border-color:rgba(139,92,246,0.45);background:rgba(139,92,246,0.03);}
    .search-input::placeholder{color:var(--dim);}
    .search-ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--dim);font-size:0.85rem;}

    /* ===== DISCOVER BAR — rectangular pills below search ===== */
    .disc-bar{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap;}
    /* Rectangular (not pill-shaped) discover pills */
    .disc-pill{padding:5px 14px;border-radius:8px;font-size:0.72rem;font-weight:600;cursor:pointer;border:1px solid rgba(139,92,246,0.18);color:var(--dim);background:transparent;transition:all 0.2s;font-family:'Syne',sans-serif;white-space:nowrap;}
    .disc-pill:hover{border-color:rgba(139,92,246,0.4);color:var(--comet);}
    .disc-pill.active{background:rgba(139,92,246,0.14);border-color:rgba(139,92,246,0.5);color:var(--starlight);}

    /* ===== FILTER BUTTON + POPUP (category only) ===== */
    .filter-row{display:flex;align-items:center;gap:10px;margin-bottom:18px;flex-wrap:wrap;}
    .result-count{font-size:0.72rem;color:var(--dim);font-family:'Space Mono',monospace;flex:1;}
    .filter-btn-wrap{position:relative;}
    .filter-btn{display:flex;align-items:center;gap:7px;padding:7px 14px;border-radius:8px;font-family:'Syne',sans-serif;font-size:0.78rem;font-weight:600;cursor:pointer;background:rgba(255,255,255,0.03);border:1px solid rgba(139,92,246,0.18);color:var(--comet);transition:all 0.2s;}
    .filter-btn:hover,.filter-btn.active{background:rgba(139,92,246,0.08);border-color:rgba(139,92,246,0.35);color:var(--starlight);}
    .filter-count-badge{min-width:18px;height:18px;padding:0 5px;border-radius:100px;background:var(--aurora-violet);color:white;font-size:0.58rem;font-weight:800;display:none;align-items:center;justify-content:center;}
    .filter-count-badge.visible{display:flex;}
    .filter-popup{position:absolute;top:calc(100% + 8px);right:0;z-index:60;background:var(--nebula-dark);border:1px solid rgba(139,92,246,0.22);border-radius:16px;padding:18px;width:300px;box-shadow:0 16px 50px rgba(0,0,0,0.65);display:none;}
    .filter-popup.open{display:block;animation:popIn 0.16s ease;}
    .filter-section-label{font-size:0.58rem;font-weight:800;letter-spacing:0.18em;text-transform:uppercase;color:var(--dim);margin-bottom:10px;}
    .cat-row{display:flex;flex-wrap:wrap;gap:6px;}
    .cat-chip{padding:5px 12px;border-radius:8px;font-size:0.72rem;font-weight:600;cursor:pointer;border:1px solid rgba(139,92,246,0.15);color:var(--dim);background:transparent;transition:all 0.2s;font-family:'Syne',sans-serif;}
    .cat-chip:hover{border-color:rgba(139,92,246,0.4);color:var(--comet);}
    .cat-chip.active.cat-fantasy{background:rgba(139,92,246,0.14);border-color:rgba(139,92,246,0.5);color:var(--aurora-violet);}
    .cat-chip.active.cat-sci-fi{background:rgba(79,123,255,0.14);border-color:rgba(79,123,255,0.45);color:var(--aurora-blue);}
    .cat-chip.active.cat-anime{background:rgba(232,121,249,0.12);border-color:rgba(232,121,249,0.4);color:var(--aurora-pink);}
    .cat-chip.active.cat-original{background:rgba(52,211,153,0.1);border-color:rgba(52,211,153,0.4);color:var(--success);}
    .cat-chip.active.cat-romance{background:rgba(255,79,110,0.1);border-color:rgba(255,79,110,0.4);color:#ff6b85;}
    .cat-chip.active.cat-horror{background:rgba(120,20,20,0.18);border-color:rgba(180,50,50,0.4);color:#ff8080;}
    .filter-popup-footer{display:flex;justify-content:space-between;align-items:center;padding-top:14px;margin-top:14px;border-top:1px solid rgba(139,92,246,0.1);}
    .filter-clear-btn{font-size:0.72rem;color:var(--dim);cursor:pointer;background:none;border:none;font-family:'Syne',sans-serif;font-weight:600;transition:color 0.15s;}
    .filter-clear-btn:hover{color:var(--danger);}

    /* ===== CHARACTER GRID — overlay card design ===== */
    .char-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;}
    .char-card{border-radius:16px;overflow:hidden;cursor:pointer;position:relative;border:1px solid rgba(139,92,246,0.1);transition:border-color 0.25s,transform 0.25s,box-shadow 0.25s;background:var(--nebula-mid);}
    .char-card:hover{border-color:rgba(139,92,246,0.35);transform:translateY(-3px);box-shadow:0 8px 32px rgba(139,92,246,0.14);}
    .char-card:hover .card-actions{opacity:1;}
    .char-card:hover .char-overlay-tagline{max-height:52px;opacity:1;margin-bottom:4px;}

    /* Full-height image fills the card */
    .char-img{width:100%;aspect-ratio:9/16;overflow:hidden;position:relative;}
    .char-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.35s;display:block;}
    .char-card:hover .char-img img{transform:scale(1.05);}
    .char-img-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:'Cormorant Garamond',serif;font-size:2.5rem;font-weight:300;color:rgba(139,92,246,0.35);}

    /* Like/bookmark buttons — top right, fade in on hover */
    .card-actions{position:absolute;top:8px;right:8px;display:flex;flex-direction:column;gap:5px;opacity:0;transition:opacity 0.2s;z-index:2;}
    .action-btn{width:30px;height:30px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(8px);background:rgba(4,3,13,0.7);border:1px solid rgba(255,255,255,0.1);color:var(--comet);font-size:0.9rem;transition:all 0.15s;}
    .action-btn:hover{transform:scale(1.1);}
    .like-btn:hover,.like-btn.active{background:rgba(255,79,110,0.25);border-color:rgba(255,79,110,0.4);color:#ff6b85;}
    .bookmark-btn:hover,.bookmark-btn.active{background:rgba(240,192,96,0.2);border-color:rgba(240,192,96,0.35);color:var(--gold);}

    /* Text overlay sitting on top of the image at the bottom */
    .char-overlay{position:absolute;bottom:0;left:0;right:0;padding:12px 12px 14px;background:linear-gradient(to top,rgba(4,3,13,0.97) 0%,rgba(4,3,13,0.8) 55%,transparent 100%);z-index:1;}
    .char-overlay-name{font-size:0.88rem;font-weight:700;color:white;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px;}
    /* Tagline: hidden by default, slides in on card hover */
    .char-overlay-tagline{font-size:0.67rem;color:rgba(232,227,255,0.65);line-height:1.45;font-family:'Space Mono',monospace;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-height:0;opacity:0;transition:max-height 0.3s ease,opacity 0.3s ease,margin-bottom 0.3s ease;}
    /* Stats row: likes, bookmarks, interaction count */
    .char-overlay-stats{display:flex;align-items:center;gap:10px;margin-top:6px;font-size:0.8rem;color:rgba(232,227,255,0.75);font-family:'Space Mono',monospace;}
    .char-stat{display:flex;align-items:center;gap:4px;}
    .char-stat.active-like{color:#ff6b85;}
    /* Creator avatar inline in stats row */
    .char-creator-avatar{width:20px;height:20px;border-radius:50%;border:1.5px solid rgba(255,255,255,0.2);overflow:hidden;background:var(--nebula-mid);cursor:pointer;flex-shrink:0;transition:border-color 0.2s;display:inline-flex;align-items:center;justify-content:center;}
    .char-creator-avatar:hover{border-color:rgba(139,92,246,0.8);}
    .char-creator-avatar img{width:100%;height:100%;object-fit:cover;}
    .char-creator-initial{font-family:'Cormorant Garamond',serif;font-size:0.65rem;font-weight:600;color:var(--aurora-violet);}
    /* NSFW-related card states */
    .nsfw-badge{position:absolute;top:8px;left:8px;background:rgba(245,158,11,0.88);color:white;font-size:0.55rem;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;padding:3px 7px;border-radius:4px;z-index:2;backdrop-filter:blur(4px);}
    .nsfw-blur .char-img img{filter:blur(18px);transform:scale(1.08);}
    .nsfw-blur .char-img .char-img-placeholder{filter:blur(8px);}
    .nsfw-hidden{display:none !important;}

    /* Category badge (small pill bottom-right of stats) */
    .char-cat-badge{font-size:0.55rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;padding:2px 7px;border-radius:4px;margin-left:auto;}
    .cat-fantasy{background:rgba(139,92,246,0.2);color:var(--aurora-violet);}
    .cat-sci-fi{background:rgba(79,123,255,0.2);color:var(--aurora-blue);}
    .cat-anime{background:rgba(232,121,249,0.2);color:var(--aurora-pink);}
    .cat-original{background:rgba(52,211,153,0.15);color:var(--success);}
    .cat-romance{background:rgba(255,79,110,0.15);color:#ff6b85;}
    .cat-horror{background:rgba(120,20,20,0.25);color:#ff8080;}

    /* ===== BUTTONS ===== */
    .btn{padding:9px 20px;border-radius:100px;font-family:'Syne',sans-serif;font-size:0.82rem;font-weight:700;cursor:pointer;border:none;transition:all 0.2s;display:inline-flex;align-items:center;gap:7px;letter-spacing:0.02em;}
    .btn-primary{background:linear-gradient(135deg,#5b21b6 0%,#8b5cf6 45%,#e879f9 100%);color:white;box-shadow:0 0 16px rgba(139,92,246,0.28);}
    .btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 24px rgba(139,92,246,0.45);}
    .btn-ghost{background:transparent;color:var(--comet);border:1px solid rgba(139,92,246,0.22);}
    .btn-ghost:hover{border-color:rgba(139,92,246,0.5);color:var(--starlight);}
    .btn-sm{padding:7px 16px;font-size:0.75rem;}
    .btn-gold{background:linear-gradient(135deg,#c49a3c,#f0c060);color:#1a1200;font-weight:800;}
    .btn-gold:hover{transform:translateY(-1px);box-shadow:0 4px 24px rgba(240,192,96,0.35);}

    /* ===== SUBSCRIPTION MODAL ===== */
    .modal-overlay{position:fixed;inset:0;background:rgba(4,3,13,0.88);z-index:200;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(10px);animation:fadeIn 0.2s ease;}
    .sub-modal{background:var(--nebula-dark);border:1px solid rgba(139,92,246,0.22);border-radius:24px;width:95%;max-width:1020px;max-height:90vh;overflow-y:auto;padding:36px;box-shadow:0 24px 80px rgba(0,0,0,0.7);}
    .sub-header{text-align:center;margin-bottom:36px;}
    .sub-title{font-family:'Cormorant Garamond',serif;font-size:2.2rem;font-weight:300;color:var(--moon);margin-bottom:8px;}
    .sub-sub{font-size:0.8rem;color:var(--dim);font-family:'Space Mono',monospace;}
    .tiers-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;}
    @media(max-width:900px){.tiers-grid{grid-template-columns:repeat(2,1fr);}.tiers-grid .tier-card:first-child{grid-column:1/-1;}}
    .tier-card{border-radius:18px;padding:24px 18px;border:1px solid rgba(139,92,246,0.15);background:rgba(255,255,255,0.02);position:relative;transition:all 0.25s;cursor:pointer;}
    .tier-card:hover{border-color:rgba(139,92,246,0.4);transform:translateY(-4px);}
    .tier-card.highlighted{border-color:rgba(240,192,96,0.45);background:rgba(240,192,96,0.04);}
    .tier-card.highlighted::before{content:'Most Popular';position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#c49a3c,#f0c060);color:#1a1200;font-size:0.62rem;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;padding:3px 12px;border-radius:100px;white-space:nowrap;}
    .tier-name{font-size:0.62rem;font-weight:800;letter-spacing:0.2em;text-transform:uppercase;margin-bottom:12px;}
    .tier-price{font-family:'Cormorant Garamond',serif;font-size:2.2rem;font-weight:300;color:var(--moon);line-height:1;}
    .tier-price span{font-size:0.9rem;color:var(--dim);}
    .tier-divider{height:1px;background:rgba(139,92,246,0.1);margin-bottom:14px;}
    .tier-features{display:flex;flex-direction:column;gap:8px;margin-bottom:20px;}
    .tier-feat{font-size:0.72rem;color:var(--comet);display:flex;align-items:flex-start;gap:8px;line-height:1.5;}
    .tier-feat::before{content:'—';color:rgba(139,92,246,0.5);flex-shrink:0;margin-top:1px;}
    .tier-btn{width:100%;padding:10px;border-radius:100px;font-family:'Syne',sans-serif;font-size:0.75rem;font-weight:700;cursor:pointer;border:none;transition:all 0.2s;letter-spacing:0.04em;}

    /* ===== SETTINGS MODAL ===== */
    .settings-modal{background:var(--nebula-dark);border:1px solid rgba(139,92,246,0.22);border-radius:24px;width:95%;max-width:480px;box-shadow:0 24px 80px rgba(0,0,0,0.7);overflow:hidden;}
    .settings-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(139,92,246,0.1);}
    .settings-title{font-family:'Cormorant Garamond',serif;font-size:1.3rem;font-weight:400;color:var(--moon);}
    .settings-body{padding:20px 24px;max-height:70vh;overflow-y:auto;}
    .settings-section{margin-bottom:24px;}
    .settings-section:last-child{margin-bottom:0;}
    .settings-section-label{font-size:0.58rem;font-weight:800;letter-spacing:0.18em;text-transform:uppercase;color:var(--aurora-violet);margin-bottom:12px;display:block;}
    .settings-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid rgba(255,255,255,0.04);}
    .settings-row:last-child{border-bottom:none;}
    .settings-row-label{font-size:0.82rem;color:var(--comet);font-weight:500;}
    .settings-row-hint{font-size:0.65rem;color:var(--dim);font-family:'Space Mono',monospace;margin-top:2px;}
    .settings-toggle{width:36px;height:20px;border-radius:100px;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.12);position:relative;cursor:pointer;transition:background 0.2s;flex-shrink:0;}
    .settings-toggle.on{background:rgba(139,92,246,0.5);border-color:rgba(139,92,246,0.6);}
    .settings-toggle-knob{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:white;transition:left 0.2s;}
    .settings-toggle.on .settings-toggle-knob{left:18px;}
    .settings-footer{padding:14px 24px;border-top:1px solid rgba(139,92,246,0.1);display:flex;gap:8px;justify-content:flex-end;}
    /* Security section fields */
    .sett-pass-form{display:flex;flex-direction:column;gap:8px;}
    .sett-input{width:100%;background:rgba(255,255,255,0.03);border:1px solid rgba(139,92,246,0.18);border-radius:10px;padding:9px 13px;color:var(--starlight);font-family:'Syne',sans-serif;font-size:0.82rem;outline:none;transition:all 0.2s;}
    .sett-input:focus{border-color:rgba(139,92,246,0.5);background:rgba(139,92,246,0.03);}
    .sett-input::placeholder{color:var(--dim);}
    .sett-feedback{font-size:0.68rem;font-family:'Space Mono',monospace;margin-top:4px;padding:6px 10px;border-radius:6px;display:none;}
    .sett-feedback.ok{background:rgba(52,211,153,0.1);color:var(--success);display:block;}
    .sett-feedback.err{background:rgba(255,79,110,0.1);color:var(--danger);display:block;}
    /* Locked toggle style */
    .settings-toggle.locked{opacity:0.45;cursor:not-allowed;}

    /* ===== CHARACTER DETAIL MODAL ===== */
    .detail-modal{width:95%;max-width:580px;max-height:90vh;overflow-y:auto;background:var(--nebula-dark);border:1px solid rgba(139,92,246,0.22);border-radius:24px;box-shadow:0 24px 80px rgba(0,0,0,0.7);}
    .detail-img{width:100%;aspect-ratio:9/16;overflow:hidden;background:var(--nebula-mid);position:relative;}
    .detail-img img{width:100%;height:100%;object-fit:cover;}
    .detail-img-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:'Cormorant Garamond',serif;font-size:4rem;color:rgba(139,92,246,0.3);}
    .detail-inner{padding:24px;}
    .detail-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px;}
    .detail-name-wrap .detail-name{font-family:'Cormorant Garamond',serif;font-size:1.8rem;font-weight:300;color:var(--moon);}
    .detail-name-wrap .detail-tagline{font-size:0.78rem;color:var(--comet);font-style:italic;margin-top:3px;}
    .detail-acts{display:flex;gap:7px;flex-shrink:0;}
    .detail-stats{display:flex;gap:18px;margin-bottom:14px;padding:12px 0;border-top:1px solid rgba(139,92,246,0.08);border-bottom:1px solid rgba(139,92,246,0.08);}
    .dstat{font-size:0.72rem;color:var(--dim);font-family:'Space Mono',monospace;}
    .dstat strong{color:var(--starlight);display:block;font-size:0.85rem;margin-bottom:2px;}
    .detail-desc{font-size:0.8rem;color:var(--comet);line-height:1.9;font-family:'Space Mono',monospace;margin-bottom:16px;}
    .detail-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px;}
    .detail-bottom{display:flex;gap:10px;}
    .tag-chip{display:flex;align-items:center;gap:4px;padding:3px 9px;background:rgba(139,92,246,0.12);border-radius:100px;font-size:0.68rem;font-weight:600;color:var(--aurora-violet);}

    /* ===== CHARACTER CREATOR MODAL ===== */
    .creator-modal{background:var(--nebula-dark);border:1px solid rgba(139,92,246,0.22);border-radius:24px;width:95%;max-width:900px;max-height:92vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 24px 80px rgba(0,0,0,0.7);}
    .modal-header{display:flex;align-items:center;justify-content:space-between;padding:22px 28px;border-bottom:1px solid rgba(139,92,246,0.1);}
    .modal-title-text{font-family:'Cormorant Garamond',serif;font-size:1.4rem;font-weight:400;color:var(--moon);}
    .close-btn{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,0.04);border:none;color:var(--dim);cursor:pointer;font-size:1rem;transition:all 0.15s;display:flex;align-items:center;justify-content:center;}
    .close-btn:hover{background:rgba(255,79,110,0.12);color:var(--danger);}
    .modal-body{flex:1;overflow-y:auto;padding:24px 28px;display:grid;grid-template-columns:1fr 1fr;gap:20px;}
    .modal-footer{padding:18px 28px;border-top:1px solid rgba(139,92,246,0.1);display:flex;gap:10px;justify-content:flex-end;align-items:center;}

    /* Creator fields */
    .field{margin-bottom:14px;}
    .field-label{display:flex;align-items:center;justify-content:space-between;font-size:0.65rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--comet);margin-bottom:7px;}
    .field-hint{font-size:0.65rem;color:var(--dim);font-family:'Space Mono',monospace;margin-top:5px;line-height:1.5;}
    .field-input,.field-textarea{width:100%;background:rgba(255,255,255,0.03);border:1px solid rgba(139,92,246,0.18);border-radius:10px;padding:10px 13px;color:var(--starlight);font-family:'Syne',sans-serif;font-size:0.82rem;outline:none;transition:all 0.2s;}
    .field-input:focus,.field-textarea:focus{border-color:rgba(139,92,246,0.5);background:rgba(139,92,246,0.03);}
    .field-textarea{resize:vertical;min-height:80px;font-family:'Space Mono',monospace;font-size:0.78rem;line-height:1.6;}
    /* Character counter on field labels */
    .char-count{font-size:0.6rem;font-family:'Space Mono',monospace;color:var(--dim);font-weight:400;letter-spacing:normal;text-transform:none;}
    .char-count.warn{color:var(--warn);}
    .char-count.error{color:var(--danger);}

    /* Clickable choice buttons (gender, rating, visibility) */
    .choice-row{display:flex;gap:8px;flex-wrap:wrap;}
    .choice-btn{padding:7px 16px;border-radius:8px;background:rgba(255,255,255,0.02);border:1px solid rgba(139,92,246,0.18);color:var(--dim);font-family:'Syne',sans-serif;font-size:0.78rem;font-weight:600;cursor:pointer;transition:all 0.18s;}
    .choice-btn:hover{border-color:rgba(139,92,246,0.4);color:var(--comet);}
    .choice-btn.active{background:rgba(139,92,246,0.15);border-color:rgba(139,92,246,0.5);color:var(--starlight);}
    .choice-btn.warn-btn.active{background:rgba(245,158,11,0.12);border-color:rgba(245,158,11,0.4);color:var(--warn);}

    /* Preset tag buttons */
    .preset-tags-wrap{background:rgba(255,255,255,0.02);border:1px solid rgba(139,92,246,0.12);border-radius:10px;padding:12px;margin-bottom:4px;}
    .preset-group{margin-bottom:10px;}
    .preset-group:last-child{margin-bottom:0;}
    .preset-group-label{font-size:0.58rem;font-weight:800;letter-spacing:0.15em;text-transform:uppercase;color:var(--dim);margin-bottom:7px;}
    .preset-tag-row{display:flex;flex-wrap:wrap;gap:6px;}
    .preset-tag{padding:4px 12px;border-radius:6px;background:transparent;border:1px solid rgba(139,92,246,0.15);color:var(--dim);font-family:'Syne',sans-serif;font-size:0.7rem;font-weight:600;cursor:pointer;transition:all 0.15s;}
    .preset-tag:hover:not(.disabled){border-color:rgba(139,92,246,0.35);color:var(--comet);}
    .preset-tag.active{background:rgba(139,92,246,0.14);border-color:rgba(139,92,246,0.45);color:var(--aurora-violet);}
    .preset-tag.disabled{opacity:0.35;cursor:not-allowed;}

    /* Image upload zone */
    .upload-zone{border:2px dashed rgba(139,92,246,0.2);border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px;cursor:pointer;transition:all 0.2s;text-align:center;position:relative;overflow:hidden;background:rgba(255,255,255,0.01);width:100%;height:180px;}
    .upload-zone:hover{border-color:rgba(139,92,246,0.45);background:rgba(139,92,246,0.03);}
    .upload-zone.has-image{border-color:rgba(139,92,246,0.35);padding:0;}
    .upload-preview{width:100%;height:100%;object-fit:cover;display:block;border-radius:10px;}
    .upload-icon-wrap{width:40px;height:40px;border-radius:10px;background:rgba(139,92,246,0.1);display:flex;align-items:center;justify-content:center;margin-bottom:10px;}
    .upload-text{font-size:0.78rem;color:var(--comet);font-weight:600;margin-bottom:4px;}
    .upload-hint{font-size:0.63rem;color:var(--dim);font-family:'Space Mono',monospace;line-height:1.6;}
    .upload-change-btn{position:absolute;bottom:8px;right:8px;background:rgba(4,3,13,0.8);border:1px solid rgba(139,92,246,0.3);border-radius:8px;padding:4px 9px;font-size:0.63rem;font-weight:700;color:var(--aurora-violet);cursor:pointer;backdrop-filter:blur(8px);}
    .mod-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:100px;font-size:0.65rem;font-weight:700;margin-top:8px;}
    .mod-pending{background:rgba(245,158,11,0.12);color:var(--warn);border:1px solid rgba(245,158,11,0.25);}
    .mod-pass{background:rgba(52,211,153,0.1);color:var(--success);border:1px solid rgba(52,211,153,0.25);}
    .mod-fail{background:rgba(255,79,110,0.1);color:var(--danger);border:1px solid rgba(255,79,110,0.25);}
    .mod-adult{background:rgba(245,158,11,0.1);color:var(--warn);border:1px solid rgba(245,158,11,0.25);}

    /* AI portrait generator */
    .gen-section{border:1px solid rgba(139,92,246,0.15);border-radius:10px;overflow:hidden;margin-top:4px;}
    .gen-section summary{padding:10px 14px;font-size:0.65rem;font-weight:800;letter-spacing:0.12em;text-transform:uppercase;color:var(--aurora-violet);cursor:pointer;background:rgba(139,92,246,0.04);list-style:none;}
    .gen-section summary::-webkit-details-marker{display:none;}
    .gen-section summary::before{content:'+ ';opacity:0.6;}
    .gen-section[open] summary::before{content:'− ';}
    .gen-inner{padding:14px;}
    .gen-preview{width:100%;border-radius:10px;overflow:hidden;position:relative;background:var(--nebula-mid);min-height:120px;display:flex;align-items:center;justify-content:center;margin-bottom:10px;}
    .gen-preview img{width:100%;display:block;border-radius:10px;}
    .gen-preview-empty{text-align:center;padding:20px;}
    .gen-prompt-input{width:100%;background:rgba(255,255,255,0.03);border:1px solid rgba(139,92,246,0.18);border-radius:10px;padding:9px 12px;color:var(--starlight);font-family:'Space Mono',monospace;font-size:0.75rem;outline:none;resize:none;min-height:64px;line-height:1.6;transition:border-color 0.2s;margin-bottom:8px;}
    .gen-prompt-input:focus{border-color:rgba(139,92,246,0.45);}
    .gen-prompt-input::placeholder{color:var(--dim);}
    .gen-style-row{display:flex;gap:6px;margin-bottom:8px;}
    .gen-style-btn{padding:5px 12px;border-radius:100px;font-family:'Syne',sans-serif;font-size:0.68rem;font-weight:700;cursor:pointer;border:1px solid rgba(139,92,246,0.2);background:transparent;color:var(--dim);transition:all 0.15s;}
    .gen-style-btn.active{background:rgba(139,92,246,0.12);border-color:rgba(139,92,246,0.4);color:var(--starlight);}
    .gen-actions{display:flex;gap:8px;}
    .watermark-note{font-size:0.62rem;color:var(--dim);font-family:'Space Mono',monospace;margin-top:6px;line-height:1.5;}


    /* ===== TOAST ===== */
    .toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(70px);background:rgba(10,8,28,0.96);border:1px solid rgba(139,92,246,0.3);border-radius:10px;padding:10px 18px;font-size:0.8rem;color:var(--starlight);box-shadow:0 8px 28px rgba(0,0,0,0.5);backdrop-filter:blur(12px);z-index:400;transition:transform 0.25s ease;white-space:nowrap;}
    .toast.show{transform:translateX(-50%) translateY(0);}

    /* ===== LUMI GUIDE ===== */
    /* PERMANENT — do not change the Lumi sprite or its dimensions */
    #lumi-guide{position:fixed;bottom:24px;right:24px;z-index:300;}
    .lumi-sprite{width:60px;height:60px;cursor:pointer;animation:float 3.5s ease-in-out infinite;filter:drop-shadow(0 0 12px rgba(139,92,246,0.6));transition:transform 0.2s;}
    .lumi-sprite:hover{transform:scale(1.1);filter:drop-shadow(0 0 20px rgba(139,92,246,0.9));}
    @keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}
    .lumi-pop{position:absolute;bottom:70px;right:0;width:200px;background:rgba(10,8,28,0.96);border:1px solid rgba(139,92,246,0.35);border-radius:14px 14px 4px 14px;padding:14px;backdrop-filter:blur(16px);display:none;box-shadow:0 8px 32px rgba(0,0,0,0.5);}
    .lumi-pop.open{display:block;animation:popIn 0.18s ease;}
    .lumi-pop-label{font-size:0.6rem;font-weight:800;letter-spacing:0.15em;text-transform:uppercase;color:var(--aurora-violet);margin-bottom:10px;}
    .lumi-link{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:8px;color:var(--comet);font-size:0.78rem;font-weight:500;cursor:pointer;transition:all 0.14s;text-decoration:none;}
    .lumi-link:hover{background:rgba(139,92,246,0.1);color:var(--starlight);}
    .lumi-link-icon{width:16px;text-align:center;flex-shrink:0;}

    @keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
    @keyframes popIn{from{opacity:0;transform:scale(0.92) translateY(6px);}to{opacity:1;transform:scale(1) translateY(0);}}

    /* ===== RESPONSIVE ===== */
    @media(max-width:768px){
      .app{grid-template-columns:1fr;}
      .sidebar{display:none;}
      .modal-body{grid-template-columns:1fr;}
      main{padding:20px 16px;}
      .char-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
      .card-actions{opacity:1;top:6px;right:6px;}
      .action-btn{width:28px;height:28px;font-size:0.82rem;}

      /* Tagline reveals on hover on desktop, but touch devices have no hover.
         Show it always on mobile so the tagline is actually discoverable.
         Font tightened a hair to fit under the name in a 2-col grid. */
      .char-overlay-tagline{
        max-height:52px !important;
        opacity:1 !important;
        margin-bottom:4px !important;
        font-size:0.62rem !important;
        -webkit-line-clamp:2;
      }
      /* Slight name shrink so the two-line tagline doesn't push the stats
         row off the bottom of the card at 375px. */
      .char-overlay-name{font-size:0.8rem;}
      .char-overlay{padding:10px 10px 12px;}

      /* Filter popup → BOTTOM SHEET on mobile (Character.AI / Tipsy.chat
         pattern). Session 57: the position:absolute approach kept the
         popup constrained to the button-wrap's width because parent
         stacking context wouldn't let left:16px/right:16px stretch it.
         Result: chips had no horizontal room and stacked vertically.
         Fixed positioning to the viewport bottom guarantees full width. */
      .filter-popup{
        position:fixed !important;
        top:auto !important;
        bottom:0 !important;
        left:0 !important;
        right:0 !important;
        width:100% !important;
        max-width:100vw !important;
        max-height:75vh;
        border-radius:20px 20px 0 0 !important;
        padding:22px 20px 28px !important;
        overflow-y:auto;
        -webkit-overflow-scrolling:touch;
        box-shadow:0 -12px 40px rgba(0,0,0,0.7) !important;
      }
      .filter-popup::-webkit-scrollbar{width:4px;}
      .filter-popup::-webkit-scrollbar-thumb{background:rgba(139,92,246,0.3);border-radius:2px;}
      /* Grab-handle at top of sheet (visual affordance for "you can dismiss this") */
      .filter-popup::before{
        content:'';
        display:block;
        width:40px;
        height:4px;
        background:rgba(255,255,255,0.15);
        border-radius:2px;
        margin:0 auto 16px;
      }

      /* Chip touch targets — Apple HIG suggests min 44x44, we go 36px min-height
         since chips are compact by design (industry standard for filter chips). */
      .cat-row{gap:8px !important;}
      .cat-chip{
        padding:8px 14px !important;
        font-size:0.78rem !important;
      }

      /* Discover bar becomes a horizontal scroll strip (character.ai
         pattern). Was wrapping to 3 rows on 375px, eating vertical space.
         Scroll strip keeps everything on one line, users swipe to see more. */
      .disc-bar{
        flex-wrap:nowrap !important;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
        margin-left:-16px;
        margin-right:-16px;
        padding-left:16px;
        padding-right:16px;
      }
      .disc-bar::-webkit-scrollbar{display:none;}
      .disc-pill{flex-shrink:0;}
    }
  </style>
</head>
<body>
<div id="starfield"></div>
<div class="nebula n1"></div>
<div class="nebula n2"></div>
<div class="toast" id="toast"></div>

<!-- ===== LUMI GUIDE =====
     PERMANENT: This is the real Lumi character sprite. Do not replace with the abstract orbital SVG.
     The real Lumi has a body, head, pink eyes, gold forehead star, purple wings, and orbiting constellation dots.
-->
<div id="lumi-guide">
  <div class="lumi-pop" id="lumi-pop">
    <div class="lumi-pop-label">Lumi</div>
    <a href="/lumiveil-lumens-page.html" class="lumi-link">Daily Check-In</a>
    <a href="/lumiveil-subscriptions.html" class="lumi-link">Subscriptions</a>
    <a href="/settings" class="lumi-link" onclick="toggleLumi()">Settings</a>
    <a href="/terms" class="lumi-link">Terms of Service</a>
    <a href="/privacy" class="lumi-link">Privacy Policy</a>
    <a href="/guidelines" class="lumi-link">Community Guidelines</a>
  </div>
  <svg class="lumi-sprite" id="lumi-sprite" viewBox="0 0 100 100" onclick="toggleLumi()" xmlns="http://www.w3.org/2000/svg">
    <ellipse cx="50" cy="58" rx="22" ry="26" fill="#1e1a52" stroke="#8b5cf6" stroke-width="2"/>
    <ellipse cx="50" cy="55" rx="14" ry="16" fill="url(#bodyGlow)"/>
    <circle cx="50" cy="32" r="18" fill="#1e1a52" stroke="#8b5cf6" stroke-width="2"/>
    <circle cx="50" cy="32" r="12" fill="url(#faceGlow)" opacity="0.6"/>
    <ellipse cx="43" cy="30" rx="4" ry="5" fill="#e879f9"/>
    <ellipse cx="57" cy="30" rx="4" ry="5" fill="#e879f9"/>
    <ellipse cx="43" cy="30" rx="2" ry="2.5" fill="white" opacity="0.9"/>
    <ellipse cx="57" cy="30" rx="2" ry="2.5" fill="white" opacity="0.9"/>
    <text x="50" y="22" text-anchor="middle" font-size="8" fill="#f0c060">✦</text>
    <ellipse cx="24" cy="60" rx="10" ry="6" fill="#8b5cf6" opacity="0.5" transform="rotate(-20 24 60)"/>
    <ellipse cx="76" cy="60" rx="10" ry="6" fill="#8b5cf6" opacity="0.5" transform="rotate(20 76 60)"/>
    <circle cx="20" cy="40" r="2" fill="#22d3ee" opacity="0.8">
      <animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="6s" repeatCount="indefinite"/>
    </circle>
    <circle cx="80" cy="50" r="1.5" fill="#f0c060" opacity="0.9">
      <animateTransform attributeName="transform" type="rotate" from="180 50 50" to="540 50 50" dur="4s" repeatCount="indefinite"/>
    </circle>
    <circle cx="50" cy="15" r="1.5" fill="#e879f9" opacity="0.8">
      <animateTransform attributeName="transform" type="rotate" from="90 50 50" to="450 50 50" dur="8s" repeatCount="indefinite"/>
    </circle>
    <ellipse cx="50" cy="82" rx="8" ry="5" fill="#8b5cf6" opacity="0.4"/>
    <defs>
      <radialGradient id="bodyGlow" cx="50%" cy="50%">
        <stop offset="0%" stop-color="#8b5cf6" stop-opacity="0.4"/>
        <stop offset="100%" stop-color="#8b5cf6" stop-opacity="0"/>
      </radialGradient>
      <radialGradient id="faceGlow" cx="50%" cy="50%">
        <stop offset="0%" stop-color="#e879f9" stop-opacity="0.3"/>
        <stop offset="100%" stop-color="#e879f9" stop-opacity="0"/>
      </radialGradient>
    </defs>
  </svg>
</div>

<!-- Session 62: inline notification panel removed. The shared partial in
     lumiveil-nav.js v1.11+ appends its own #notif-panel to <body>. -->

<div class="app" id="app">

  <!-- TOP NAV -->
  <nav>
    <a href="/" class="logo">
      <svg width="26" height="26" viewBox="0 0 40 40"><circle cx="20" cy="20" r="18" fill="none" stroke="url(#nlg)" stroke-width="1.5"/><circle cx="20" cy="20" r="4" fill="#e879f9"/><circle cx="20" cy="20" r="8" fill="none" stroke="#8b5cf6" stroke-width="0.8" stroke-dasharray="2 3"/><circle cx="20" cy="20" r="13" fill="none" stroke="#4f7bff" stroke-width="0.5" stroke-dasharray="1 4"/><circle cx="31" cy="14" r="2" fill="#f0c060"/><circle cx="10" cy="28" r="1.5" fill="#22d3ee"/><defs><linearGradient id="nlg" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#8b5cf6"/><stop offset="100%" stop-color="#e879f9"/></linearGradient></defs></svg>
      <span class="logo-text">Lumiveil</span>
    </a>
    <div class="nav-center">
      <a href="/explore" class="nav-link-pill active">Explore</a>
      <a href="/create" class="nav-link-pill">Create</a>
      <a href="/wellness" class="nav-link-pill">Wellness</a>
      <a href="/vault" class="nav-link-pill">Vault</a>
    </div>
    <div class="nav-r">
      <a href="/lumens" class="lumen-pill">
        <span class="lumen-dot"></span><span id="nav-lumens">0</span>
      </a>
      <a href="/subscriptions" class="nova-pill">
        <span class="nova-dot"></span><span id="nav-nova">0</span>
      </a>
      <!-- Session 62: notification bell removed. lumiveil-nav.js v1.11+ shared
           partial injects it here automatically (idempotent — no double bell). -->
      <a href="/profile" class="nav-avatar" id="nav-avatar" title="Profile"></a>
    </div>
  </nav>

  <!-- SIDEBAR — Space Vault panel matching chat page exactly -->
  <aside class="sidebar">
    <button class="sidebar-collapse-btn" onclick="toggleSidebar()" title="Toggle sidebar" aria-label="Toggle sidebar">
      <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="15 18 9 12 15 6"/></svg>
    </button>
    <span class="sidebar-collapsed-label">Vault</span>

    <div class="sidebar-inner">
      <!-- Space Vault header with logo and search -->
      <div class="vault-header">
        <a class="vault-logo" href="/vault">
          <svg width="22" height="22" viewBox="0 0 40 40"><circle cx="20" cy="20" r="18" fill="none" stroke="url(#vlg)" stroke-width="1.5"/><circle cx="20" cy="20" r="4" fill="#e879f9"/><circle cx="20" cy="20" r="8" fill="none" stroke="#8b5cf6" stroke-width="0.8" stroke-dasharray="2 3"/><circle cx="20" cy="20" r="13" fill="none" stroke="#4f7bff" stroke-width="0.5" stroke-dasharray="1 4"/><circle cx="31" cy="14" r="2" fill="#f0c060"/><circle cx="10" cy="28" r="1.5" fill="#22d3ee"/><defs><linearGradient id="vlg" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#8b5cf6"/><stop offset="100%" stop-color="#e879f9"/></linearGradient></defs></svg>
          <span class="vault-logo-text">Space Vault</span>
        </a>
        <div class="vault-search">
          <svg class="vault-search-ico" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
          <input class="vault-search-input" id="sidebar-vault-search" placeholder="Search chats..." oninput="filterSidebarVault(this.value)"/>
        </div>
      </div>

      <!-- Recent conversations -->
      <div class="vault-section-label">Recent</div>
      <div class="vault-list" id="sidebar-vault-list">
        <div style="padding:10px 10px;font-size:0.7rem;color:var(--dim);font-family:'Space Mono',monospace;">Loading chats...</div>
      </div>

      <!-- Footer — Session 48 audit: removed +Create (redundant with top nav) -->
      <div class="vault-footer">
        <div class="vault-nav-row">
          <a href="/vault" class="vnav-btn vnav-explore">Full Vault</a>
          <a href="/settings" class="vnav-btn vnav-signout">Account</a>
        </div>
      </div>
    </div>
  </aside>

  <!-- MAIN CONTENT -->
  <main>
    <div class="page-header">
      <h1 class="page-title">Explore Characters</h1>
      <p class="page-sub">Discover characters from across the cosmos or create your own</p>
    </div>

    <!-- Search bar row -->
    <div class="search-row">
      <div class="search-wrap">
        <span class="search-ico">◎</span>
        <!-- Search is name/tagline only — no tag search -->
        <input class="search-input" placeholder="Search by name or tagline..." id="search-input" oninput="onSearch()"/>
      </div>
      <div class="filter-btn-wrap">
        <button class="filter-btn" id="filter-btn" onclick="toggleFilterPopup()">
          <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><line x1="4" y1="6" x2="20" y2="6"/><line x1="8" y1="12" x2="16" y2="12"/><line x1="11" y1="18" x2="13" y2="18"/></svg>
          Tags
          <span class="filter-count-badge" id="filter-count-badge"></span>
        </button>
        <!-- Filter popup — tags (same presets as character creator) -->
        <div class="filter-popup" id="filter-popup">
          <!-- Gender filter (Session 57) — single-select, above Tags -->
          <div style="margin-bottom:14px;">
            <div class="filter-section-label">Gender — pick one</div>
            <div class="cat-row" id="gender-row">
              <button class="cat-chip cat-original" data-gender="female"    onclick="setGender('female',this)">Female</button>
              <button class="cat-chip cat-original" data-gender="male"      onclick="setGender('male',this)">Male</button>
              <button class="cat-chip cat-original" data-gender="nonbinary" onclick="setGender('nonbinary',this)">Nonbinary</button>
              <button class="cat-chip cat-original" data-gender="other"     onclick="setGender('other',this)">Other</button>
            </div>
          </div>
          <div style="margin-bottom:14px;">
            <div class="filter-section-label">Tags — select multiple</div>
            <div class="cat-row" id="cat-row">
              <button class="cat-chip cat-fantasy"  data-cat="fantasy"     onclick="toggleCategory('fantasy',this)">Fantasy</button>
              <button class="cat-chip cat-sci-fi"   data-cat="sci-fi"      onclick="toggleCategory('sci-fi',this)">Sci-Fi</button>
              <button class="cat-chip cat-anime"    data-cat="anime"       onclick="toggleCategory('anime',this)">Anime</button>
              <button class="cat-chip cat-romance"  data-cat="romance"     onclick="toggleCategory('romance',this)">Romance</button>
              <button class="cat-chip cat-horror"   data-cat="horror"      onclick="toggleCategory('horror',this)">Horror</button>
              <button class="cat-chip cat-original" data-cat="historical"  onclick="toggleCategory('historical',this)">Historical</button>
              <button class="cat-chip cat-original" data-cat="modern"      onclick="toggleCategory('modern',this)">Modern</button>
              <button class="cat-chip cat-fantasy"  data-cat="mythological" onclick="toggleCategory('mythological',this)">Mythological</button>
              <button class="cat-chip cat-original" data-cat="original"    onclick="toggleCategory('original',this)">Original</button>
              <button class="cat-chip cat-original" data-cat="warrior"     onclick="toggleCategory('warrior',this)">Warrior</button>
              <button class="cat-chip cat-horror"   data-cat="villain"     onclick="toggleCategory('villain',this)">Villain</button>
              <button class="cat-chip cat-original" data-cat="mentor"      onclick="toggleCategory('mentor',this)">Mentor</button>
              <button class="cat-chip cat-original" data-cat="scholar"     onclick="toggleCategory('scholar',this)">Scholar</button>
              <button class="cat-chip cat-romance"  data-cat="tsundere"    onclick="toggleCategory('tsundere',this)">Tsundere</button>
              <button class="cat-chip cat-original" data-cat="mysterious"  onclick="toggleCategory('mysterious',this)">Mysterious</button>
              <button class="cat-chip cat-original" data-cat="stoic"       onclick="toggleCategory('stoic',this)">Stoic</button>
              <button class="cat-chip cat-original" data-cat="playful"     onclick="toggleCategory('playful',this)">Playful</button>
              <button class="cat-chip cat-horror"   data-cat="dark"        onclick="toggleCategory('dark',this)">Dark</button>
              <button class="cat-chip cat-original" data-cat="protective"  onclick="toggleCategory('protective',this)">Protective</button>
              <button class="cat-chip cat-horror"   data-cat="chaotic"     onclick="toggleCategory('chaotic',this)">Chaotic</button>
              <button class="cat-chip cat-original" data-cat="tragic"      onclick="toggleCategory('tragic',this)">Tragic</button>
              <button class="cat-chip cat-fantasy"  data-cat="ancient"     onclick="toggleCategory('ancient',this)">Ancient</button>
              <button class="cat-chip cat-romance"  data-cat="hopeful"     onclick="toggleCategory('hopeful',this)">Hopeful</button>
              <button class="cat-chip cat-original" data-cat="wise"        onclick="toggleCategory('wise',this)">Wise</button>
              <button class="cat-chip cat-original" data-cat="cheerful"    onclick="toggleCategory('cheerful',this)">Cheerful</button>
            </div>
          </div>
          <div class="filter-popup-footer">
            <button class="filter-clear-btn" onclick="clearFilters()">Clear all</button>
            <button class="btn btn-primary btn-sm" onclick="closeFilterPopup()">Done</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Discover bar — rectangular pills below the search bar -->
    <div class="disc-bar" id="disc-bar">
      <button class="disc-pill active" data-disc="all"       onclick="setDiscovery('all',this)">All</button>
      <button class="disc-pill"        data-disc="popular"   onclick="setDiscovery('popular',this)">Popular</button>
      <button class="disc-pill"        data-disc="new"       onclick="setDiscovery('new',this)">Newest</button>
      <button class="disc-pill"        data-disc="trending"  onclick="setDiscovery('trending',this)">Trending</button>
      <button class="disc-pill"        data-disc="featured"  onclick="setDiscovery('featured',this)">Featured</button>
      <button class="disc-pill"        data-disc="following" onclick="setDiscovery('following',this)">Following</button>
    </div>

    <!-- Creators strip — shown only when the search input has a query and
         we find at least one matching user. Hidden otherwise. -->
    <div id="creators-strip" style="display:none;margin-bottom:18px;">
      <div style="font-family:'Space Mono',monospace;font-size:0.68rem;color:var(--dim);letter-spacing:0.08em;text-transform:uppercase;margin-bottom:8px;">Creators</div>
      <div id="creators-row" style="display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin;"></div>
    </div>

    <div class="char-grid" id="char-grid"></div>
    <div id="load-more-wrap" style="text-align:center;padding:28px 0;display:none;">
      <button class="btn btn-ghost" onclick="loadChars(false)">Load more</button>
    </div>
  </main>
</div>

<!-- ===== SUBSCRIPTION MODAL ===== -->
<div class="modal-overlay" id="sub-modal" style="display:none;" onclick="if(event.target===this)this.style.display='none'">
  <div class="sub-modal" onclick="event.stopPropagation()">
    <div style="display:flex;justify-content:flex-end;margin-bottom:-10px;">
      <button class="close-btn" onclick="document.getElementById('sub-modal').style.display='none'">✕</button>
    </div>
    <div class="sub-header">
      <div class="sub-title">Choose your orbit</div>
      <div class="sub-sub">Nova refreshes monthly — unused Nova expires at billing cycle end</div>
    </div>
    <div class="tiers-grid" id="tiers-grid"></div>
  </div>
</div>

<!-- ===== CHARACTER DETAIL MODAL ===== -->
<div class="modal-overlay" id="detail-modal" style="display:none;" onclick="if(event.target===this)this.style.display='none'">
  <div class="detail-modal" onclick="event.stopPropagation()">
    <div class="detail-img" id="d-img">
      <div class="detail-img-placeholder" id="d-placeholder">L</div>
    </div>
    <div class="detail-inner">
      <div class="detail-top">
        <div class="detail-name-wrap">
          <div class="detail-name" id="d-name"></div>
          <div class="detail-tagline" id="d-tagline"></div>
        </div>
        <div class="detail-acts">
          <button class="action-btn like-btn" id="d-like-btn" onclick="toggleDetailLike()" aria-label="Like this character">♡</button>
          <button class="action-btn bookmark-btn" id="d-bk-btn" onclick="toggleDetailBk()" aria-label="Bookmark this character">◈</button>
        </div>
      </div>
      <div class="detail-stats">
        <div class="dstat"><strong id="d-likes">0</strong>Likes</div>
        <!-- Interactions = total messages sent across all users for this character -->
        <div class="dstat"><strong id="d-chats">0</strong>Interactions</div>
      </div>
      <div class="detail-desc" id="d-desc"></div>
      <div class="detail-tags" id="d-tags"></div>
      <div class="detail-bottom">
        <button class="btn btn-primary" onclick="startChat(currentCharId)">Start Chat</button>
        <button class="btn btn-ghost" onclick="document.getElementById('detail-modal').style.display='none'">Close</button>
      </div>
    </div>
  </div>
</div>

<!-- ===== CHARACTER CREATOR MODAL ===== -->
<div class="modal-overlay" id="creator-modal" style="display:none;" onclick="if(event.target===this)this.style.display='none'">
  <div class="creator-modal" onclick="event.stopPropagation()">
    <div class="modal-header">
      <div class="modal-title-text">Create a Character</div>
      <button class="close-btn" onclick="closeCreator()">✕</button>
    </div>
    <div class="modal-body">

      <!-- LEFT COLUMN -->
      <div>
        <!-- Avatar image -->
        <div class="field">
          <label class="field-label">Avatar Image *</label>
          <div class="upload-zone" id="upload-zone" onclick="triggerUpload()">
            <div class="upload-icon-wrap">
              <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" style="color:var(--aurora-violet)"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
            </div>
            <div class="upload-text">Upload character image</div>
            <div class="upload-hint">PNG, JPG, WEBP · Max 5MB<br/>No nudity · No real people</div>
          </div>
          <div id="mod-status" style="display:none;" class="mod-badge mod-pending">Checking...</div>
        </div>

        <!-- Name -->
        <div class="field">
          <label class="field-label">Name *<span class="char-count" id="cnt-name">0/100</span></label>
          <input class="field-input" id="c-name" placeholder="e.g. Lyra Stardust" maxlength="100" oninput="updateCount(this,'cnt-name',100)"/>
        </div>

        <!-- Tagline -->
        <div class="field">
          <label class="field-label">Tagline *<span class="char-count" id="cnt-tagline">0/200</span></label>
          <input class="field-input" id="c-tagline" placeholder="A short, captivating one-liner" maxlength="200" oninput="updateCount(this,'cnt-tagline',200)"/>
        </div>

        <!-- Gender — clickable buttons only -->
        <div class="field">
          <label class="field-label">Gender</label>
          <div class="choice-row" id="gender-row">
            <button class="choice-btn" data-val="male"      onclick="selectChoice('gender','male',this)">Male</button>
            <button class="choice-btn" data-val="female"    onclick="selectChoice('gender','female',this)">Female</button>
            <button class="choice-btn" data-val="nonbinary" onclick="selectChoice('gender','nonbinary',this)">Nonbinary</button>
          </div>
        </div>

        <!-- AI Portrait Generator (collapsed by default) -->
        <details class="gen-section" id="gen-section">
          <summary>Generate Portrait with AI</summary>
          <div class="gen-inner">
            <div class="gen-preview" id="gen-preview">
              <div class="gen-preview-empty">
                <svg width="24" height="24" fill="none" stroke="rgba(139,92,246,0.35)" stroke-width="1.5" viewBox="0 0 24 24" style="margin:0 auto 6px;display:block;"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
                <div style="font-size:0.65rem;color:var(--dim);font-family:'Space Mono',monospace;">Generated image appears here</div>
              </div>
            </div>
            <div id="gen-mod-status" style="display:none;margin:6px 0;" class="mod-badge mod-pending"></div>
            <textarea class="gen-prompt-input" id="gen-prompt" placeholder="Describe appearance — e.g. elven warrior, silver hair, glowing violet eyes, celestial armor"></textarea>
            <div class="gen-style-row">
              <button class="gen-style-btn active" id="style-standard" onclick="setGenStyle('standard',this)">Standard — 15 Lumens</button>
              <button class="gen-style-btn" id="style-hd" onclick="setGenStyle('hd',this)">High-Res — 25 Lumens</button>
            </div>
            <div class="gen-actions">
              <button class="btn btn-ghost btn-sm" style="flex:1;justify-content:center;" id="gen-btn" onclick="generateImage()">Generate</button>
              <button class="btn btn-ghost btn-sm" id="regen-btn" onclick="regenerateImage()" style="display:none;">Regenerate</button>
              <button class="btn btn-primary btn-sm" id="use-gen-btn" onclick="useGeneratedImage()" style="display:none;">Use This</button>
            </div>
            <div class="watermark-note" id="watermark-note">Wanderer &amp; Stargazer: images include a Lumiveil watermark. Voyager+ gets clean images.</div>
          </div>
        </details>
      </div>

      <!-- RIGHT COLUMN -->
      <div>
        <!-- Background (AI personality / system prompt) -->
        <div class="field">
          <label class="field-label">Background *<span class="char-count" id="cnt-personality">0/2000</span></label>
          <textarea class="field-textarea" id="c-personality" placeholder="Describe who this character is — their personality, how they speak, quirks, backstory, appearance. This becomes the AI's core instruction." maxlength="2000" oninput="updateCount(this,'cnt-personality',2000)" style="min-height:120px;"></textarea>
          <div class="field-hint">The more vivid and specific, the better the AI will play this character.</div>
        </div>

        <!-- Opening message -->
        <div class="field">
          <label class="field-label">Opening *<span class="char-count" id="cnt-greeting">0/800</span></label>
          <textarea class="field-textarea" id="c-greeting" placeholder="The first message users see when they start a chat. Make it memorable and in-character." maxlength="800" oninput="updateCount(this,'cnt-greeting',800)" style="min-height:80px;"></textarea>
        </div>

        <!-- Dialogue Examples -->
        <div class="field">
          <label class="field-label">Example Dialogue<span class="char-count" id="cnt-dialogue">0/500</span></label>
          <textarea class="field-textarea" id="c-dialogue" placeholder={'User: "Are you okay?"\nCharacter: "I\'m fine. Don\'t ask again."'} maxlength="500" oninput="updateCount(this,'cnt-dialogue',500)" style="min-height:72px;"></textarea>
          <div class="field-hint">Optional sample exchanges that help the AI understand the character's voice.</div>
        </div>

      </div>

      <!-- FULL-WIDTH ROW — Tags, Rating, Visibility -->
      <div style="grid-column:1/-1;">
        <div style="height:1px;background:rgba(139,92,246,0.08);margin-bottom:18px;"></div>

        <!-- Preset Tags — replaces both Category and free-text Tags -->
        <div class="field">
          <label class="field-label">Tags — click to select, up to 8<span class="char-count" id="cnt-tags" style="text-transform:none;letter-spacing:normal;">0/8</span></label>
          <div class="preset-tags-wrap">
            <div class="preset-group">
              <div class="preset-group-label">World</div>
              <div class="preset-tag-row">
                <button class="preset-tag" data-tag="fantasy"      onclick="togglePresetTag('fantasy',this)">Fantasy</button>
                <button class="preset-tag" data-tag="sci-fi"       onclick="togglePresetTag('sci-fi',this)">Sci-Fi</button>
                <button class="preset-tag" data-tag="anime"        onclick="togglePresetTag('anime',this)">Anime</button>
                <button class="preset-tag" data-tag="romance"      onclick="togglePresetTag('romance',this)">Romance</button>
                <button class="preset-tag" data-tag="horror"       onclick="togglePresetTag('horror',this)">Horror</button>
                <button class="preset-tag" data-tag="historical"   onclick="togglePresetTag('historical',this)">Historical</button>
                <button class="preset-tag" data-tag="modern"       onclick="togglePresetTag('modern',this)">Modern</button>
                <button class="preset-tag" data-tag="mythological" onclick="togglePresetTag('mythological',this)">Mythological</button>
                <button class="preset-tag" data-tag="original"     onclick="togglePresetTag('original',this)">Original</button>
              </div>
            </div>
            <div class="preset-group">
              <div class="preset-group-label">Character</div>
              <div class="preset-tag-row">
                <button class="preset-tag" data-tag="warrior"    onclick="togglePresetTag('warrior',this)">Warrior</button>
                <button class="preset-tag" data-tag="villain"    onclick="togglePresetTag('villain',this)">Villain</button>
                <button class="preset-tag" data-tag="mentor"     onclick="togglePresetTag('mentor',this)">Mentor</button>
                <button class="preset-tag" data-tag="scholar"    onclick="togglePresetTag('scholar',this)">Scholar</button>
                <button class="preset-tag" data-tag="tsundere"   onclick="togglePresetTag('tsundere',this)">Tsundere</button>
                <button class="preset-tag" data-tag="mysterious" onclick="togglePresetTag('mysterious',this)">Mysterious</button>
                <button class="preset-tag" data-tag="stoic"      onclick="togglePresetTag('stoic',this)">Stoic</button>
                <button class="preset-tag" data-tag="playful"    onclick="togglePresetTag('playful',this)">Playful</button>
                <button class="preset-tag" data-tag="dark"       onclick="togglePresetTag('dark',this)">Dark</button>
                <button class="preset-tag" data-tag="protective" onclick="togglePresetTag('protective',this)">Protective</button>
                <button class="preset-tag" data-tag="chaotic"    onclick="togglePresetTag('chaotic',this)">Chaotic</button>
                <button class="preset-tag" data-tag="tragic"     onclick="togglePresetTag('tragic',this)">Tragic</button>
                <button class="preset-tag" data-tag="ancient"    onclick="togglePresetTag('ancient',this)">Ancient</button>
                <button class="preset-tag" data-tag="hopeful"    onclick="togglePresetTag('hopeful',this)">Hopeful</button>
                <button class="preset-tag" data-tag="wise"       onclick="togglePresetTag('wise',this)">Wise</button>
                <button class="preset-tag" data-tag="cheerful"   onclick="togglePresetTag('cheerful',this)">Cheerful</button>
              </div>
            </div>
          </div>
        </div>

        <!-- Rating + Visibility side by side -->
        <div style="display:flex;gap:28px;flex-wrap:wrap;">
          <!-- Rating -->
          <div class="field" style="flex:1;min-width:150px;">
            <label class="field-label">Rating</label>
            <div class="choice-row" id="rating-row">
              <button class="choice-btn active" data-val="sfw"  onclick="selectChoice('rating','sfw',this)">SFW</button>
            </div>
            <div class="field-hint" id="rating-hint">Safe for all users.</div>
          </div>
          <!-- Visibility -->
          <div class="field" style="flex:1;min-width:150px;">
            <label class="field-label">Visibility</label>
            <div class="choice-row" id="visibility-row">
              <button class="choice-btn active" data-val="public"  onclick="selectChoice('visibility','public',this)">Public</button>
              <button class="choice-btn"        data-val="private" onclick="selectChoice('visibility','private',this)">Private</button>
            </div>
            <div class="field-hint" id="visibility-hint">Public characters are reviewed before going live.</div>
          </div>
        </div>
      </div>

    </div><!-- /modal-body -->
    <div class="modal-footer">
      <span style="font-size:0.68rem;color:var(--dim);font-family:'Space Mono',monospace;" id="creator-footer-note">Public characters are reviewed before appearing on Explore.</span>
      <button class="btn btn-ghost" onclick="closeCreator()">Cancel</button>
      <button class="btn btn-primary" onclick="saveChar()">Publish Character</button>
    </div>
  </div>
</div>

<!-- ===== SETTINGS MODAL ===== -->
<div class="modal-overlay" id="settings-modal" style="display:none;" onclick="if(event.target===this)this.style.display='none'">
  <div class="settings-modal" onclick="event.stopPropagation()">
    <div class="settings-header">
      <div class="settings-title">Settings</div>
      <button class="close-btn" onclick="document.getElementById('settings-modal').style.display='none'">✕</button>
    </div>
    <div class="settings-body">

      <!-- Notifications — likes/favs toggleable; approvals/system mandatory -->
      <div class="settings-section">
        <span class="settings-section-label">Notifications</span>
        <div class="settings-row">
          <div>
            <div class="settings-row-label">Character Likes</div>
            <div class="settings-row-hint">When someone likes your characters.</div>
          </div>
          <div class="settings-toggle on" id="sett-notif-likes" onclick="toggleSetting('notifLikes',this)">
            <div class="settings-toggle-knob" style="left:18px;"></div>
          </div>
        </div>
        <div class="settings-row">
          <div>
            <div class="settings-row-label">Character Favorites</div>
            <div class="settings-row-hint">When someone bookmarks your characters.</div>
          </div>
          <div class="settings-toggle on" id="sett-notif-favs" onclick="toggleSetting('notifFavs',this)">
            <div class="settings-toggle-knob" style="left:18px;"></div>
          </div>
        </div>
        <!-- Mandatory — cannot be toggled -->
        <div class="settings-row">
          <div>
            <div class="settings-row-label">Character Approvals</div>
            <div class="settings-row-hint">Approval and rejection results — required.</div>
          </div>
          <div class="settings-toggle on locked" title="This notification is required">
            <div class="settings-toggle-knob" style="left:18px;"></div>
          </div>
        </div>
        <div class="settings-row">
          <div>
            <div class="settings-row-label">System Updates</div>
            <div class="settings-row-hint">Platform announcements — required.</div>
          </div>
          <div class="settings-toggle on locked" title="This notification is required">
            <div class="settings-toggle-knob" style="left:18px;"></div>
          </div>
        </div>
      </div>

      <!-- Security — change password -->
      <div class="settings-section">
        <span class="settings-section-label">Security</span>
        <div class="sett-pass-form">
          <input type="password" class="sett-input" id="sett-current-pass" placeholder="Current password" autocomplete="current-password"/>
          <input type="password" class="sett-input" id="sett-new-pass" placeholder="New password (min. 8 characters)" autocomplete="new-password"/>
          <input type="password" class="sett-input" id="sett-confirm-pass" placeholder="Confirm new password" autocomplete="new-password"/>
          <button class="btn btn-ghost btn-sm" onclick="changePassword()" style="width:100%;justify-content:center;margin-top:4px;">Update Password</button>
          <div class="sett-feedback" id="pass-feedback"></div>
        </div>
      </div>

    </div>
    <div class="settings-footer">
      <button class="btn btn-ghost btn-sm" onclick="document.getElementById('settings-modal').style.display='none'">Close</button>
      <button class="btn btn-primary btn-sm" onclick="saveSettings()">Save</button>
    </div>
  </div>
</div>

<script>
// ── Stars ──────────────────────────────────────────────────────────────────────
const sf = document.getElementById('starfield');
for (let i = 0; i < 140; i++) {
  const s = document.createElement('div'); s.className = 'star';
  const sz = Math.random() * 2 + 0.4;
  s.style.cssText = `width:${sz}px;height:${sz}px;left:${Math.random()*100}%;top:${Math.random()*100}%;--dur:${Math.random()*4+2}s;--delay:${Math.random()*5}s;--min-op:${Math.random()*0.12+0.04}`;
  sf.appendChild(s);
}

// ── State ─────────────────────────────────────────────────────────────────────
let accessToken   = null;
let currentUser   = null; // { id, username, lumens, nova, tier, is_age_verified, avatarUrl }
let chars         = [];
let totalChars    = 0;
let currentOffset = 0;
const PAGE_LIMIT  = 24;

let activeDiscovery   = 'all';
let activeCategories  = new Set();
let activeGender      = null; // Session 57 — single-select gender filter
let currentCharId     = null;

// Creator modal state
let currentTags        = [];   // selected preset tags
let selectedGender     = null;
let selectedRating     = 'sfw';
let selectedVisibility = 'public';
let uploadedImageUrl   = null;
let editingCharId      = null; // null = create mode; set to char ID = edit mode

// Which category tags map to the category field (sent to backend)
const CATEGORY_TAG_MAP = {
  'fantasy': 'fantasy', 'sci-fi': 'sci-fi', 'anime': 'anime',
  'romance': 'romance', 'horror': 'horror', 'historical': 'original',
  'modern': 'original', 'mythological': 'fantasy', 'original': 'original'
};

// Subscription tier data for the modal
const tiers = [
  { name:"Wanderer", color:"var(--dim)", price:0, nova:0,
    features:["10 Lumens/day via check-in","Ember & Wisp models (free)","Spark memory — 4k context","1 persona slot","Unlimited characters & chats","Image gen with watermark"],
    btn:"Current Plan", btnClass:"btn-ghost" },
  { name:"Stargazer", color:"#60a5fa", price:5.99, nova:300,
    features:["300 Nova/month","15 Lumens/day check-in","Nebula & Comet models","Tide memory — 16k context","3 persona slots","Priority image queue"],
    btn:"Start Free Trial", btnClass:"btn-ghost", btnStyle:"border-color:rgba(96,165,250,0.4);color:#60a5fa;" },
  { name:"Voyager", color:"var(--aurora-violet)", price:11.99, nova:700,
    features:["700 Nova/month","15 Lumens/day check-in","Veil model unlocked","Flow memory — 32k context","5 persona slots","Pinned memory 2k chars","Skip image queue · Clean images"],
    btn:"Get Voyager", btnClass:"btn-primary", highlighted:true },
  { name:"Luminary", color:"var(--gold)", price:19.99, nova:1500,
    features:["1,500 Nova/month","20 Lumens/day check-in","Zenith model unlocked","Void memory — 128k context","Unlimited personas","Pinned memory 5k chars","Luminary badge"],
    btn:"Get Luminary", btnClass:"btn-gold" },
  { name:"Celestial", color:"var(--aurora-pink)", price:32.99, nova:4000,
    features:["4,000 Nova/month","30 Lumens/day check-in","All Luminary features","Pinned memory 8k chars","Early access — first priority","Celestial badge"],
    btn:"Get Celestial", btnClass:"btn-primary", btnStyle:"background:linear-gradient(135deg,#a855f7,#e879f9);" },
];

// ── Initialisation ────────────────────────────────────────────────────────────
// 1. Refresh access token from httpOnly cookie
// 2. Load user profile (balance, tier, avatar)
// 3. Load character grid
// 4. Load sidebar vault conversations
// 5. Load notification badge
// 6. Apply saved display settings
async function initPage() {
  try {
    const res = await fetch('/api/auth/refresh', { method: 'POST', credentials: 'include' });
    if (res.ok) { const d = await res.json(); accessToken = d.accessToken; }
  } catch { /* not logged in */ }

  if (accessToken) {
    // Load balance for pills
    try {
      const sr = await fetch('/api/checkin/status', {
        headers: { 'Authorization': `Bearer ${accessToken}` }, credentials: 'include'
      });
      if (sr.ok) {
        const s = await sr.json();
        currentUser = {
          lumens: s.lumens || 0, nova: s.nova || 0,
          tier: 'wanderer', username: '',
          is_age_verified: false
        };
        const le = document.getElementById('nav-lumens');
        const ne = document.getElementById('nav-nova');
        if (le)  le.textContent  = (currentUser.lumens || 0).toLocaleString();
        if (ne)  ne.textContent  = (currentUser.nova   || 0).toLocaleString();
      }
    } catch { /* non-critical */ }

    // Load full profile — /api/auth/me returns the middleware-adjusted tier,
    // is_age_verified, and isAdmin (admins get is_age_verified=true automatically).
    // This is where NSFW access is determined — NOT from checkin status.
    try {
      const pr = await fetch('/api/auth/me', {
        headers: { 'Authorization': `Bearer ${accessToken}` }, credentials: 'include'
      });
      if (pr.ok) {
        const pd = await pr.json();
        const user = pd.user || {};
        if (currentUser) {
          currentUser.avatarUrl = user.avatarUrl;
          currentUser.username  = user.username || '';
          currentUser.tier      = user.tier || 'wanderer';
          // isAgeVerified comes from middleware — true for Voyager+ AND admins
          currentUser.is_age_verified = user.isAgeVerified || false;
        }
        const avatarEl = document.getElementById('nav-avatar');
        if (avatarEl) {
          if (user.avatarUrl) {
            avatarEl.innerHTML = `<img src="${user.avatarUrl}" alt="Profile"/>`;
          } else if (user.username) {
            avatarEl.textContent = user.username[0].toUpperCase();
          }
        }
        // (Session 48 SFW pivot: removed NSFW settings row + rating button reveal — NSFW deferred to v2)
      }
    } catch { /* non-critical */ }

    loadSidebarVault();
    // Session 62: loadNotifCount() removed — the shared partial in
    // lumiveil-nav.js calls window.lumiNotif.loadCount() from initNav.
  } else {
    // Not logged in — show a placeholder initial
    const avatarEl = document.getElementById('nav-avatar');
    if (avatarEl) avatarEl.textContent = '?';
  }

  applySettings();
  await loadChars();

  // Handle ?edit=charId — pre-fill and open the creator modal for editing
  const editId = new URLSearchParams(window.location.search).get('edit');
  if (editId && accessToken) {
    await openEditModal(editId);
  }
}

// ── Character grid ─────────────────────────────────────────────────────────────
async function loadChars(reset = true) {
  if (reset) { currentOffset = 0; chars = []; }

  const params = new URLSearchParams({ limit: PAGE_LIMIT, offset: currentOffset });

  // Session 54: Following filter — hits the backend with ?following=true.
  // Backend restricts to characters whose creators the viewer follows.
  // If viewer isn't authenticated OR follows nobody, backend returns [] and
  // the empty-state renders naturally.
  if (activeDiscovery === 'following') {
    if (!accessToken) {
      chars = []; totalChars = 0;
      document.getElementById('load-more-wrap').style.display = 'none';
      document.getElementById('char-grid').innerHTML = `
        <div style="grid-column:1/-1;text-align:center;color:var(--dim);padding:60px 20px;">
          <div style="font-size:0.85rem;color:var(--comet);margin-bottom:6px;">Sign in to see characters from creators you follow.</div>
        </div>`;
      return;
    }
    params.set('following', 'true');
  }

  // Discovery filter drives the sort/filter API params
  switch (activeDiscovery) {
    case 'popular':   params.set('sort', 'popular');   break;
    case 'new':       params.set('sort', 'newest');    break;
    case 'featured':
      // Real featured: server checks characters.is_featured (added Session 49).
      // Admin toggles this flag per-character in the admin dashboard.
      params.set('featured', 'true');
      break;
    case 'suggested': params.set('sort', 'suggested'); break;
    case 'trending':  params.set('sort', 'trending');  break;
    case 'following':                                  break; // handled above
    default:          params.set('sort', 'popular');   // 'all' — default to popular
  }

  if (activeCategories.size > 0) params.set('tags', Array.from(activeCategories).join(','));
  if (activeGender) params.set('gender', activeGender); // Session 57

  const searchQ = document.getElementById('search-input')?.value || '';
  if (searchQ.trim()) params.set('search', searchQ.trim());

  const headers = {};
  if (accessToken) headers['Authorization'] = `Bearer ${accessToken}`;
  const grid = document.getElementById('char-grid');
  if (reset) grid.innerHTML = '<div style="grid-column:1/-1;text-align:center;color:var(--dim);padding:40px;font-family:\'Space Mono\',monospace;font-size:0.75rem;">Loading...</div>';

  try {
    const res = await fetch(`/api/characters?${params}`, { headers, credentials: 'include' });
    if (!res.ok) throw new Error('Load failed');
    const data = await res.json();
    chars          = reset ? data.characters : [...chars, ...data.characters];
    // Defense-in-depth: dedupe by id. Race conditions (fast filter switches),
    // pagination edge cases (offset changes between fetches), or backend JOIN
    // quirks could all cause the same character to appear twice on the grid.
    // We enforce uniqueness client-side as a safety net regardless of cause.
    const seen = new Set();
    chars = chars.filter(c => {
      if (seen.has(c.id)) return false;
      seen.add(c.id);
      return true;
    });
    totalChars     = data.total || chars.length;
    currentOffset += data.characters.length;
    renderGrid();
  } catch (err) {
    console.error('Load characters error:', err);
    grid.innerHTML = '<div style="grid-column:1/-1;text-align:center;color:var(--dim);padding:40px;">Could not load characters. Please refresh.</div>';
  }
}

// Render the character grid with overlay card design
function renderGrid() {
  const grid = document.getElementById('char-grid');
  document.getElementById('load-more-wrap').style.display =
    chars.length < totalChars ? 'block' : 'none';

  if (chars.length === 0) {
    grid.innerHTML = '<div style="grid-column:1/-1;text-align:center;color:var(--dim);padding:60px 20px;">No characters found. Try different filters.</div>';
    return;
  }

  const settings = getSavedSettings();
  const hideNsfw = true; // Session 48 SFW pivot — no NSFW characters shown platform-wide (v2 will restore tier-based unlock)

  grid.innerHTML = chars.map(c => {
    if (c.is_nsfw && hideNsfw) return '';

    const imgHtml = c.avatar_url
      ? `<img src="${escHtml(c.avatar_url)}" alt="${escHtml(c.name)}" loading="lazy"/>`
      : `<div class="char-img-placeholder" style="background:${categoryGrad(c.category)};">${escHtml(c.name[0])}</div>`;

    const likeCount = fmt(c.like_count);
    const chatCount = fmt(c.chat_count);

    return `<div class="char-card${c.is_nsfw ? ' nsfw-card' : ''}" onclick="startChat('${c.id}')">
      ${c.is_nsfw ? '<div class="nsfw-badge">18+</div>' : ''}
      <div class="char-img">${imgHtml}</div>
      <!-- Like + bookmark appear on hover, top-right, stop propagation so they don't start a chat -->
      <div class="card-actions" onclick="event.stopPropagation()">
        <button class="action-btn like-btn ${c.liked ? 'active' : ''}" onclick="toggleLike('${c.id}')" aria-label="${c.liked ? 'Unlike' : 'Like'} character" aria-pressed="${c.liked ? 'true' : 'false'}">${c.liked ? '♥' : '♡'}</button>
        <button class="action-btn bookmark-btn ${c.bookmarked ? 'active' : ''}" onclick="toggleBookmark('${c.id}')" aria-label="${c.bookmarked ? 'Remove bookmark from' : 'Bookmark'} character" aria-pressed="${c.bookmarked ? 'true' : 'false'}">◈</button>
      </div>
      <!-- Text overlay — expands tagline on hover -->
      <div class="char-overlay">
        <div class="char-overlay-name">${escHtml(c.name)}</div>
        <div class="char-overlay-tagline">${escHtml(c.tagline || '')}</div>
        <div class="char-overlay-stats">
          ${c.creator?.id ? `<div class="char-creator-avatar" onclick="event.stopPropagation();window.location.href='/lumiveil-profile.html?user=${escHtml(c.creator.id)}';" title="${escHtml(c.creator?.username || 'Creator')}">${c.creator?.avatar_url ? `<img src="${escHtml(c.creator.avatar_url)}" alt=""/>` : `<div class="char-creator-initial">${escHtml((c.creator?.username || '?')[0].toUpperCase())}</div>`}</div>` : ''}
          <span class="char-stat ${c.liked ? 'active-like' : ''}">${c.liked ? '♥' : '♡'} ${likeCount}</span>
          <span class="char-stat"><svg width="11" height="11" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" style="opacity:0.6;flex-shrink:0;"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg> ${chatCount}</span>
        </div>
      </div>
    </div>`;
  }).join('');
}

// Format large numbers: 1234 → 1.2k
function fmt(n) {
  n = n || 0;
  return n >= 1000 ? (n / 1000).toFixed(1) + 'k' : String(n);
}

function categoryGrad(cat) {
  return {
    fantasy: 'linear-gradient(135deg,#1e1a52,#4f3d99)',
    'sci-fi': 'linear-gradient(135deg,#0d2a4a,#1a5280)',
    anime: 'linear-gradient(135deg,#2a0d3a,#6b1a7a)',
    original: 'linear-gradient(135deg,#0d3a2a,#1a7a55)',
    romance: 'linear-gradient(135deg,#3a0d1a,#7a1a4a)',
    horror: 'linear-gradient(135deg,#1a0505,#4a0f0f)',
  }[cat] || 'linear-gradient(135deg,#1e1a52,#4f3d99)';
}

function escHtml(s) {
  return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;').replace(/'/g,'&#39;');
}

// Search — 350ms debounce. Kicks off BOTH the character search (existing) and
// a creators search (Session 66). The creators strip renders above the grid
// when the query returns matches; otherwise it hides itself.
let searchDebounce;
function onSearch() {
  clearTimeout(searchDebounce);
  searchDebounce = setTimeout(() => {
    loadChars(true);
    loadCreatorsForSearch();
  }, 350);
}

// Fetch matching creators for the current search query and render the strip.
// Silent-fail on any error — the character grid is the primary result and
// should never be blocked by a creators-strip hiccup.
async function loadCreatorsForSearch() {
  const strip = document.getElementById('creators-strip');
  const row   = document.getElementById('creators-row');
  const q     = (document.getElementById('search-input')?.value || '').trim();

  // Empty query or too short → hide strip. Backend also enforces minLen=2.
  if (q.length < 2) { strip.style.display = 'none'; row.innerHTML = ''; return; }

  try {
    const headers = {};
    if (accessToken) headers['Authorization'] = `Bearer ${accessToken}`;
    const res = await fetch(`/api/auth/users/search?q=${encodeURIComponent(q)}&limit=8`, {
      headers, credentials: 'include'
    });
    if (!res.ok) throw new Error('creators search failed');
    const data = await res.json();
    const users = data.users || [];

    if (users.length === 0) {
      strip.style.display = 'none';
      row.innerHTML = '';
      return;
    }

    row.innerHTML = users.map(u => {
      const idSafe  = escHtml(u.id);
      const nameSafe = escHtml(u.displayName || u.username);
      const handleSafe = escHtml(u.username);
      const avatar = u.avatarUrl
        ? `<img src="${escHtml(u.avatarUrl)}" alt="" style="width:100%;height:100%;object-fit:cover;">`
        : `<div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1e1a52,#4f3d99);color:#e8e3ff;font-size:0.9rem;font-family:'Cormorant Garamond',serif;">${escHtml((u.displayName || u.username).charAt(0).toUpperCase())}</div>`;
      return `
        <a href="/profile?user=${idSafe}" style="flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;background:rgba(255,255,255,0.03);border:1px solid rgba(139,92,246,0.18);border-radius:999px;text-decoration:none;color:var(--starlight);transition:all 0.18s;" onmouseover="this.style.background='rgba(139,92,246,0.08)';this.style.borderColor='rgba(139,92,246,0.4)'" onmouseout="this.style.background='rgba(255,255,255,0.03)';this.style.borderColor='rgba(139,92,246,0.18)'">
          <div style="width:32px;height:32px;border-radius:50%;overflow:hidden;flex-shrink:0;">${avatar}</div>
          <div style="display:flex;flex-direction:column;line-height:1.15;min-width:0;">
            <span style="font-size:0.78rem;color:var(--moon);white-space:nowrap;">${nameSafe}</span>
            <span style="font-size:0.62rem;color:var(--dim);font-family:'Space Mono',monospace;white-space:nowrap;">@${handleSafe}</span>
          </div>
        </a>`;
    }).join('');
    strip.style.display = 'block';
  } catch (err) {
    console.warn('Creators search failed:', err);
    strip.style.display = 'none';
    row.innerHTML = '';
  }
}

// ── Filter / Discover ─────────────────────────────────────────────────────────
function toggleFilterPopup() {
  const popup = document.getElementById('filter-popup');
  const btn   = document.getElementById('filter-btn');
  popup.classList.toggle('open');
  btn.classList.toggle('active', popup.classList.contains('open'));
}
function closeFilterPopup() {
  document.getElementById('filter-popup').classList.remove('open');
  document.getElementById('filter-btn').classList.remove('active');
}

// Discover pills — single-select row below the search bar
function setDiscovery(disc, el) {
  activeDiscovery = disc;
  document.querySelectorAll('.disc-pill').forEach(p => p.classList.remove('active'));
  el.classList.add('active');
  loadChars(true);
}

// Category chips — multi-select, inside filter popup
function toggleCategory(cat, el) {
  if (activeCategories.has(cat)) { activeCategories.delete(cat); el.classList.remove('active'); }
  else { activeCategories.add(cat); el.classList.add('active'); }
  updateFilterBadge();
  loadChars(true);
}

// Gender chip — single-select. Clicking an active chip clears it. (Session 57)
function setGender(gender, el) {
  if (activeGender === gender) {
    activeGender = null;
    el.classList.remove('active');
  } else {
    activeGender = gender;
    document.querySelectorAll('#gender-row .cat-chip').forEach(c => c.classList.remove('active'));
    el.classList.add('active');
  }
  updateFilterBadge();
  loadChars(true);
}

function clearFilters() {
  activeDiscovery = 'all';
  activeCategories.clear();
  activeGender = null; // Session 57
  document.querySelectorAll('.disc-pill').forEach(p => p.classList.remove('active'));
  document.querySelector('[data-disc="all"]')?.classList.add('active');
  document.querySelectorAll('.cat-chip').forEach(c => c.classList.remove('active'));
  updateFilterBadge();
  loadChars(true);
}

function updateFilterBadge() {
  const badge = document.getElementById('filter-count-badge');
  // Session 57: gender counts as 1 filter if selected
  const count = activeCategories.size + (activeGender ? 1 : 0);
  badge.textContent = count;
  badge.classList.toggle('visible', count > 0);
}

// Close filter popup on outside click
document.addEventListener('click', e => {
  const popup = document.getElementById('filter-popup');
  const btn   = document.getElementById('filter-btn');
  if (popup?.classList.contains('open') && !popup.contains(e.target) && !btn?.contains(e.target)) closeFilterPopup();
  if (!document.getElementById('lumi-guide').contains(e.target)) document.getElementById('lumi-pop').classList.remove('open');
  // Session 62: notif outside-click handling removed — lumiveil-nav.js
  // registers its own on the shared panel.
});

// ── Like / Bookmark ───────────────────────────────────────────────────────────
async function toggleLike(id) {
  if (!accessToken) { window.location.href = '/lumiveil-auth.html?mode=login'; return; }
  const c = chars.find(x => x.id === id);
  if (!c) return;
  try {
    const res = await fetch(`/api/characters/${id}/like`, {
      method: 'POST', headers: { 'Authorization': `Bearer ${accessToken}` }, credentials: 'include'
    });
    const data = await res.json();
    if (res.ok) {
      c.liked = data.liked; c.like_count = data.like_count;
      renderGrid();
      if (currentCharId === id) {
        document.getElementById('d-like-btn').textContent = c.liked ? '♥' : '♡';
        document.getElementById('d-like-btn').className = 'action-btn like-btn' + (c.liked ? ' active' : '');
        document.getElementById('d-likes').textContent = c.like_count.toLocaleString();
      }
    }
  } catch { showToast('Could not update like. Please try again.'); }
}

async function toggleBookmark(id) {
  if (!accessToken) { window.location.href = '/lumiveil-auth.html?mode=login'; return; }
  const c = chars.find(x => x.id === id);
  if (!c) return;
  try {
    const res = await fetch(`/api/characters/${id}/bookmark`, {
      method: 'POST', headers: { 'Authorization': `Bearer ${accessToken}` }, credentials: 'include'
    });
    const data = await res.json();
    if (res.ok) { c.bookmarked = data.bookmarked; renderGrid(); }
  } catch { showToast('Could not update bookmark. Please try again.'); }
}

// ── Detail modal ──────────────────────────────────────────────────────────────
async function openDetail(id) {
  currentCharId = id;
  const local = chars.find(x => x.id === id);
  if (local) populateDetailModal(local);
  document.getElementById('detail-modal').style.display = 'flex';
  try {
    const headers = accessToken ? { 'Authorization': `Bearer ${accessToken}` } : {};
    const res = await fetch(`/api/characters/${id}`, { headers, credentials: 'include' });
    if (res.ok) {
      const data = await res.json();
      const idx = chars.findIndex(x => x.id === id);
      if (idx >= 0) chars[idx] = { ...chars[idx], ...data };
      populateDetailModal(data);
    }
  } catch { /* keep local data */ }
}

function populateDetailModal(c) {
  const hasImg = !!c.avatar_url;
  document.getElementById('d-img').style.background = hasImg ? '' : categoryGrad(c.category);
  document.getElementById('d-placeholder').innerHTML = hasImg
    ? `<img src="${c.avatar_url}" alt="${escHtml(c.name)}" style="width:100%;height:100%;object-fit:cover;"/>`
    : escHtml(c.name[0]);
  document.getElementById('d-name').textContent    = c.name;
  document.getElementById('d-tagline').textContent  = c.tagline || '';
  document.getElementById('d-likes').textContent    = (c.like_count || 0).toLocaleString();
  // chat_count = total interactions across all users
  document.getElementById('d-chats').textContent    = fmt(c.chat_count);
  document.getElementById('d-desc').innerHTML       = c.description ? mdParse(c.description) : '<em style="color:var(--dim)">No description provided.</em>';
  document.getElementById('d-tags').innerHTML       = (c.tags || []).map(t => `<span class="tag-chip">${escHtml(t)}</span>`).join('');
  document.getElementById('d-like-btn').textContent = c.liked ? '♥' : '♡';
  document.getElementById('d-like-btn').className   = 'action-btn like-btn' + (c.liked ? ' active' : '');
  document.getElementById('d-bk-btn').className     = 'action-btn bookmark-btn' + (c.bookmarked ? ' active' : '');
}

function toggleDetailLike() { if (currentCharId) toggleLike(currentCharId); }
function toggleDetailBk()   { if (currentCharId) toggleBookmark(currentCharId); }
function startChat(charId)  { window.location.href = `/lumiveil-chat.html?char=${charId}`; }

function mdParse(t) {
  if (!t) return '';
  // Session 64 XSS audit: escape HTML before applying markdown regexes.
  // description is already stripTags()'d server-side, so this was not
  // exploitable today, but that made it a single point of failure with no
  // client-side backup — chat.html's mdParse() already escapes first.
  return escHtml(t)
    .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
    .replace(/\*(.+?)\*/g, '<em>$1</em>')
    .replace(/^## (.+)$/gm, '<strong style="font-size:0.85rem;color:var(--moon);display:block;margin:6px 0 3px">$1</strong>')
    .replace(/^# (.+)$/gm, '<strong style="font-size:0.9rem;color:var(--moon);display:block;margin:8px 0 4px">$1</strong>')
    .replace(/\n/g, '<br>');
}

// ── Sidebar ───────────────────────────────────────────────────────────────────
let sidebarCollapsed = false;
function toggleSidebar() {
  sidebarCollapsed = !sidebarCollapsed;
  document.getElementById('app').classList.toggle('sidebar-collapsed', sidebarCollapsed);
}

// Load real conversations into the sidebar vault list
let sidebarConvs = []; // full list for filtering
async function loadSidebarVault() {
  if (!accessToken) return;
  const list = document.getElementById('sidebar-vault-list');
  try {
    const res = await fetch('/api/chat/conversations?limit=6', {
      headers: { 'Authorization': `Bearer ${accessToken}` }, credentials: 'include'
    });
    if (!res.ok) { list.innerHTML = ''; return; }
    const data = await res.json();
    sidebarConvs = data.conversations || [];
    renderSidebarVault(sidebarConvs);
  } catch { list.innerHTML = ''; }
}

function renderSidebarVault(convs) {
  const list = document.getElementById('sidebar-vault-list');
  if (!convs.length) {
    list.innerHTML = '<div style="padding:10px;font-size:0.7rem;color:var(--dim);font-family:\'Space Mono\',monospace;">No chats yet — explore some characters!</div>';
    return;
  }
  list.innerHTML = convs.map(c => {
    const name    = c.characters?.name || c.title || 'Unknown';
    const preview = c.last_message ? c.last_message.substring(0, 44) + '…' : 'No messages yet';
    const timeStr = c.last_message_at ? relativeTime(c.last_message_at) : '';
    const imgHtml = c.characters?.avatar_url
      ? `<img src="${escHtml(c.characters.avatar_url)}" alt="${escHtml(name)}">`
      : `<div class="va-placeholder">${name[0].toUpperCase()}</div>`;
    return `<div class="vault-item" onclick="window.location.href='/lumiveil-chat.html?conv=${c.id}'">
      <div class="vault-avatar">${imgHtml}</div>
      <div class="vault-info">
        <div class="vault-name">${escHtml(name)}</div>
        <div class="vault-preview">${escHtml(preview)}</div>
      </div>
      <div class="vault-time">${timeStr}</div>
    </div>`;
  }).join('');
}

function filterSidebarVault(q) {
  const filtered = q.trim()
    ? sidebarConvs.filter(c => (c.characters?.name || c.title || '').toLowerCase().includes(q.toLowerCase()))
    : sidebarConvs;
  renderSidebarVault(filtered);
}

function relativeTime(iso) {
  const m = Math.floor((Date.now() - new Date(iso).getTime()) / 60000);
  if (m < 1) return 'Now'; if (m < 60) return m + 'm';
  const h = Math.floor(m / 60);
  if (h < 24) return h + 'h';
  return Math.floor(h / 24) + 'd';
}

function logout() {
  fetch('/api/auth/logout', { method: 'POST', credentials: 'include' }).catch(() => {});
  localStorage.removeItem('lumi_token');
  localStorage.removeItem('lumi_user');
  window.location.href = '/';
}

// ── Notifications (Session 62) ─────────────────────────────────────────────────
// All notification JS moved to the shared partial in lumiveil-nav.js v1.11+.
// window.lumiNotif.{toggle, close, load, loadCount, render, markAllRead} is
// available from every page that loads nav.js — no per-page copy needed.

// ── Settings modal ────────────────────────────────────────────────────────────
function openSettings() {
  const s = getSavedSettings();
  setToggleState('sett-nsfw',          s.nsfw);
  setToggleState('sett-notif-likes',   s.notifLikes !== false);
  setToggleState('sett-notif-favs',    s.notifFavs  !== false);
  // Clear password fields on open
  ['sett-current-pass','sett-new-pass','sett-confirm-pass'].forEach(id => {
    const el = document.getElementById(id); if (el) el.value = '';
  });
  const fb = document.getElementById('pass-feedback');
  if (fb) { fb.className = 'sett-feedback'; fb.textContent = ''; }
  document.getElementById('settings-modal').style.display = 'flex';
}

function getSavedSettings() {
  try { return JSON.parse(localStorage.getItem('lumi_settings') || '{}'); } catch { return {}; }
}

// applySettings — called on load and after Save. Hides NSFW cards if toggle is off.
function applySettings() {
  // renderGrid() reads getSavedSettings() live, so just re-render if chars are loaded
  if (chars.length > 0) renderGrid();
}

function saveSettings() {
  const s = {
    nsfw:         getToggleState('sett-nsfw'),
    notifLikes:   getToggleState('sett-notif-likes'),
    notifFavs:    getToggleState('sett-notif-favs'),
  };
  localStorage.setItem('lumi_settings', JSON.stringify(s));
  document.getElementById('settings-modal').style.display = 'none';
  showToast('Settings saved');
  applySettings();
}

function setToggleState(id, on) {
  const el = document.getElementById(id); if (!el) return;
  el.classList.toggle('on', !!on);
  const k = el.querySelector('.settings-toggle-knob');
  if (k) k.style.left = on ? '18px' : '2px';
}
function getToggleState(id) { return document.getElementById(id)?.classList.contains('on') || false; }
function toggleSetting(key, el) {
  const isOn = el.classList.toggle('on');
  const k = el.querySelector('.settings-toggle-knob');
  if (k) k.style.left = isOn ? '18px' : '2px';
}

// Change password — calls PATCH /api/auth/password
async function changePassword() {
  const cur  = document.getElementById('sett-current-pass')?.value || '';
  const nw   = document.getElementById('sett-new-pass')?.value || '';
  const conf = document.getElementById('sett-confirm-pass')?.value || '';
  const fb   = document.getElementById('pass-feedback');

  const show = (msg, ok) => {
    fb.textContent = msg;
    fb.className = 'sett-feedback ' + (ok ? 'ok' : 'err');
  };

  if (!cur || !nw || !conf) return show('Please fill in all three fields.', false);
  if (nw.length < 8) return show('New password must be at least 8 characters.', false);
  if (nw !== conf) return show('New passwords do not match.', false);
  if (!accessToken) return show('You are not signed in.', false);

  try {
    const res = await fetch('/api/auth/password', {
      method: 'PATCH',
      headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${accessToken}` },
      credentials: 'include',
      body: JSON.stringify({ currentPassword: cur, newPassword: nw })
    });
    const data = await res.json();
    if (res.ok) {
      show('Password updated successfully.', true);
      ['sett-current-pass','sett-new-pass','sett-confirm-pass'].forEach(id => {
        const el = document.getElementById(id); if (el) el.value = '';
      });
    } else {
      show(data.error || 'Could not update password.', false);
    }
  } catch {
    show('Could not update password. Please try again.', false);
  }
}

// ── Subscriptions ─────────────────────────────────────────────────────────────
// Redirects to the full subscriptions page (modal removed per session 39 polish)
function openSubs() {
  document.getElementById('lumi-pop').classList.remove('open');
  window.location.href = '/lumiveil-subscriptions.html';
}

// ── Creator modal ─────────────────────────────────────────────────────────────
function openCreator() {
  if (!accessToken) { window.location.href = '/lumiveil-auth.html?mode=login'; return; }
  document.getElementById('lumi-pop').classList.remove('open');
  document.getElementById('creator-modal').style.display = 'flex';
}

function closeCreator() {
  document.getElementById('creator-modal').style.display = 'none';
  resetCreator();
}

function resetCreator() {
  currentTags = []; selectedGender = null; selectedRating = 'sfw'; selectedVisibility = 'public';
  uploadedImageUrl = null; editingCharId = null;
  // Update modal title and button back to Create mode
  const titleEl = document.querySelector('.modal-title-text');
  if (titleEl) titleEl.textContent = 'Create a Character';
  const publishBtn = document.querySelector('.modal-footer .btn-primary');
  if (publishBtn) publishBtn.textContent = 'Publish Character';
  ['c-name','c-tagline','c-personality','c-greeting','c-dialogue'].forEach(id => {
    const el = document.getElementById(id); if (el) el.value = '';
  });
  // Reset counters
  [['cnt-name',100],['cnt-tagline',200],['cnt-personality',2000],['cnt-greeting',800],['cnt-dialogue',500]].forEach(([id,max]) => {
    const el = document.getElementById(id); if (el) { el.textContent = `0/${max}`; el.className = 'char-count'; }
  });
  document.getElementById('cnt-tags').textContent = '0/8';
  // Reset choice buttons
  document.querySelectorAll('#gender-row .choice-btn').forEach(b => b.classList.remove('active'));
  document.querySelectorAll('#rating-row .choice-btn').forEach(b => b.classList.remove('active'));
  document.querySelector('#rating-row [data-val="sfw"]')?.classList.add('active');
  document.querySelectorAll('#visibility-row .choice-btn').forEach(b => b.classList.remove('active'));
  document.querySelector('#visibility-row [data-val="public"]')?.classList.add('active');
  // Reset preset tags
  document.querySelectorAll('.preset-tag').forEach(b => b.classList.remove('active','disabled'));
  // Reset upload zone
  const zone = document.getElementById('upload-zone');
  zone.classList.remove('has-image');
  zone.innerHTML = `<div class="upload-icon-wrap"><svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" style="color:var(--aurora-violet)"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg></div><div class="upload-text">Upload character image</div><div class="upload-hint">PNG, JPG, WEBP · Max 5MB<br/>No nudity · No real people</div>`;
  zone.onclick = triggerUpload;
  document.getElementById('mod-status').style.display = 'none';
  // Clear ?edit= from URL without reloading
  if (window.history.replaceState) {
    const url = new URL(window.location.href);
    url.searchParams.delete('edit');
    window.history.replaceState({}, '', url.toString());
  }
}

// Open the creator modal in EDIT mode — fetches full character data and pre-fills the form
async function openEditModal(charId) {
  if (!accessToken) { window.location.href = '/lumiveil-auth.html?mode=login'; return; }
  try {
    const res = await fetch(`/api/characters/${charId}/edit`, {
      headers: { 'Authorization': `Bearer ${accessToken}` }, credentials: 'include'
    });
    if (!res.ok) { showToast('Could not load character for editing.'); return; }
    const c = await res.json();

    editingCharId = charId;

    // Update modal title and button to Edit mode
    const titleEl = document.querySelector('.modal-title-text');
    if (titleEl) titleEl.textContent = 'Edit Character';
    const publishBtn = document.querySelector('.modal-footer .btn-primary');
    if (publishBtn) publishBtn.textContent = 'Save Changes';

    // Fill text fields
    const fill = (id, val) => { const el = document.getElementById(id); if (el) { el.value = val || ''; updateCount(el, 'cnt-' + id.replace('c-',''), parseInt(el.maxLength) || 2000); } };
    fill('c-name',        c.name);
    fill('c-tagline',     c.tagline);
    fill('c-personality', c.personality);
    fill('c-greeting',    c.greeting);
    fill('c-dialogue',    c.dialogue_examples || '');

    // Pre-fill avatar
    if (c.avatar_url) {
      uploadedImageUrl = c.avatar_url;
      const zone = document.getElementById('upload-zone');
      zone.innerHTML = `<img src="${c.avatar_url}" class="upload-preview" alt="Current image"/><div class="upload-change-btn">Change</div>`;
      zone.classList.add('has-image'); zone.onclick = triggerUpload;
    }

    // Pre-select tags
    currentTags = c.tags || [];
    currentTags.forEach(tag => {
      document.querySelector(`.preset-tag[data-tag="${tag}"]`)?.classList.add('active');
    });
    document.getElementById('cnt-tags').textContent = `${currentTags.length}/8`;

    // Pre-select rating
    selectedRating = c.is_nsfw ? 'nsfw' : 'sfw';
    document.querySelectorAll('#rating-row .choice-btn').forEach(b => b.classList.remove('active'));
    document.querySelector(`#rating-row [data-val="${selectedRating}"]`)?.classList.add('active');

    // Pre-select visibility
    selectedVisibility = c.is_public ? 'public' : 'private';
    document.querySelectorAll('#visibility-row .choice-btn').forEach(b => b.classList.remove('active'));
    document.querySelector(`#visibility-row [data-val="${selectedVisibility}"]`)?.classList.add('active');

    document.getElementById('creator-modal').style.display = 'flex';
  } catch {
    showToast('Could not load character for editing.');
  }
}

// Clickable choice handler for gender / rating / visibility
function selectChoice(type, val, el) {
  const rowMap = { gender:'gender-row', rating:'rating-row', visibility:'visibility-row' };
  document.querySelectorAll(`#${rowMap[type]} .choice-btn`).forEach(b => b.classList.remove('active'));
  if (el) el.classList.add('active');
  if (type === 'gender')     selectedGender = val;
  if (type === 'rating') {
    selectedRating = val;
    document.getElementById('rating-hint').textContent =
      val === 'nsfw' ? 'Only visible to Voyager+ subscribers with explicit content enabled.' : 'Safe for all users.';
  }
  if (type === 'visibility') {
    selectedVisibility = val;
    document.getElementById('visibility-hint').textContent =
      val === 'public' ? 'Public characters are reviewed before going live.' : 'Only visible to you.';
  }
}

// Preset tag toggle
function togglePresetTag(tag, el) {
  if (currentTags.includes(tag)) {
    currentTags = currentTags.filter(t => t !== tag);
    el.classList.remove('active');
  } else {
    if (currentTags.length >= 8) { showToast('Maximum 8 tags — remove one first'); return; }
    currentTags.push(tag);
    el.classList.add('active');
  }
  document.getElementById('cnt-tags').textContent = `${currentTags.length}/8`;
  // Dim non-selected tags at max
  document.querySelectorAll('.preset-tag').forEach(b => {
    if (!b.classList.contains('active')) b.classList.toggle('disabled', currentTags.length >= 8);
  });
}

// Character counter for textarea/input fields
function updateCount(el, counterId, max) {
  const len = el.value.length;
  const cEl = document.getElementById(counterId); if (!cEl) return;
  cEl.textContent = `${len}/${max}`;
  cEl.className = 'char-count' + (len >= max ? ' error' : len >= max * 0.85 ? ' warn' : '');
}

// Image upload
function triggerUpload() {
  const inp = document.createElement('input');
  inp.type = 'file'; inp.accept = 'image/*';
  inp.onchange = async e => {
    const f = e.target.files[0]; if (!f) return;
    if (f.size > 5 * 1024 * 1024) { showToast('Image must be under 5MB'); return; }
    const reader = new FileReader();
    reader.onload = ev => {
      const zone = document.getElementById('upload-zone');
      zone.innerHTML = `<img src="${ev.target.result}" class="upload-preview" alt="Preview"/><div class="upload-change-btn">Change</div>`;
      zone.classList.add('has-image'); zone.onclick = triggerUpload;
    };
    reader.readAsDataURL(f);
    setModStatus('upload', 'pending', 'Scanning image...');
    const form = new FormData(); form.append('image', f);
    try {
      const res = await fetch('/api/images/upload', { method:'POST', headers:{'Authorization':`Bearer ${accessToken}`}, credentials:'include', body:form });
      const data = await res.json();
      if (!res.ok) { setModStatus('upload','fail', data.error || 'Image failed moderation.'); uploadedImageUrl = null; }
      else { uploadedImageUrl = data.url; setModStatus('upload', data.isNsfw ? 'adult' : 'pass', data.isNsfw ? 'Suggestive — classified Adult' : 'Image passed moderation'); }
    } catch { setModStatus('upload','fail','Upload failed. Please try again.'); uploadedImageUrl = null; }
  };
  inp.click();
}

function setModStatus(target, state, msg) {
  const el = document.getElementById(target === 'upload' ? 'mod-status' : 'gen-mod-status');
  if (!el) return;
  el.style.display = 'inline-flex'; el.className = 'mod-badge mod-' + state;
  const icons = { pending:'◌', pass:'✓', fail:'✕', adult:'⚠' };
  el.textContent = (icons[state] || '') + ' ' + msg;
}

// AI portrait generation
let genStyle = 'standard';
function setGenStyle(style, el) {
  genStyle = style;
  document.querySelectorAll('.gen-style-btn').forEach(b => b.classList.remove('active'));
  el.classList.add('active');
}

async function generateImage() {
  const prompt = document.getElementById('gen-prompt')?.value || '';
  if (prompt.trim().length < 10) { showToast('Please describe your character in more detail'); return; }
  const genBtn = document.getElementById('gen-btn');
  genBtn.disabled = true; genBtn.textContent = 'Generating...';
  setModStatus('gen','pending','Generating portrait — a few seconds...');
  try {
    const res = await fetch('/api/images/generate', {
      method:'POST', headers:{'Content-Type':'application/json','Authorization':`Bearer ${accessToken}`}, credentials:'include',
      body: JSON.stringify({ prompt, style: genStyle, characterName: document.getElementById('c-name')?.value || '' })
    });
    const data = await res.json();
    if (res.ok) {
      document.getElementById('gen-preview').innerHTML = `<img src="${data.url}" style="width:100%;border-radius:10px;" alt="Generated portrait"/>`;
      uploadedImageUrl = data.url;
      setModStatus('gen','pass',`Done — ${genStyle === 'hd' ? 25 : 15} Lumens used`);
      document.getElementById('regen-btn').style.display = '';
      document.getElementById('use-gen-btn').style.display = '';
    } else { setModStatus('gen','fail', data.error || 'Generation failed.'); }
  } catch { setModStatus('gen','fail','Generation failed. Please try again.'); }
  genBtn.disabled = false; genBtn.textContent = 'Generate';
}

function useGeneratedImage() {
  if (!uploadedImageUrl) { showToast('Generate an image first'); return; }
  const img = document.getElementById('gen-preview').querySelector('img');
  if (img) {
    const zone = document.getElementById('upload-zone');
    zone.innerHTML = `<img src="${img.src}" class="upload-preview" alt="Preview"/><div class="upload-change-btn">Change</div>`;
    zone.classList.add('has-image'); zone.onclick = triggerUpload;
    setModStatus('upload','pass','Using generated image');
    showToast('Generated image set as avatar');
  }
}

function regenerateImage() { generateImage(); }

// Save/update character — handles both create and edit modes
async function saveChar() {
  const name     = document.getElementById('c-name').value.trim();
  const tagline  = document.getElementById('c-tagline').value.trim();
  const pers     = document.getElementById('c-personality').value.trim();
  const greet    = document.getElementById('c-greeting').value.trim();
  const dialogue = document.getElementById('c-dialogue').value.trim();

  if (!name || !tagline || !pers || !greet) { showToast('Please fill in all required fields (marked *)'); return; }

  const catMap = { fantasy:'fantasy','sci-fi':'sci-fi',anime:'anime',romance:'romance',horror:'horror',mythological:'fantasy',historical:'original',modern:'original',original:'original' };
  const category = currentTags.find(t => catMap[t]) ? catMap[currentTags.find(t => catMap[t])] : 'original';
  const isNsfw   = selectedRating === 'nsfw' && (currentUser?.is_age_verified || false);
  const isPublic = selectedVisibility === 'public';

  const payload = {
    name, tagline, description: pers, personality: pers, greeting: greet,
    category, tags: currentTags, avatar_url: uploadedImageUrl,
    credits_per_msg: 1, is_public: isPublic, is_nsfw: isNsfw,
    gender: selectedGender, dialogue_examples: dialogue
  };

  try {
    // EDIT mode: PATCH the existing character
    if (editingCharId) {
      const res = await fetch(`/api/characters/${editingCharId}`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${accessToken}` },
        credentials: 'include',
        body: JSON.stringify(payload)
      });
      const data = await res.json();
      if (res.ok) {
        closeCreator();
        showToast(data.message || 'Character updated.');
        loadChars(true);
      } else { showToast(data.error || 'Could not update character.'); }
      return;
    }

    // CREATE mode: POST a new character
    const res = await fetch('/api/characters', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${accessToken}` },
      credentials: 'include',
      body: JSON.stringify(payload)
    });
    const data = await res.json();
    if (res.ok) {
      closeCreator();
      showToast(isPublic ? 'Character submitted for review — appears on Explore once approved.' : (data.message || 'Character saved!'));
      if (!isPublic) loadChars(true);
    } else { showToast(data.error || 'Could not create character.'); }
  } catch { showToast('Could not save character. Please try again.'); }
}

// ── Lumi Guide ────────────────────────────────────────────────────────────────
function toggleLumi() { document.getElementById('lumi-pop').classList.toggle('open'); }

// ── Toast ─────────────────────────────────────────────────────────────────────
let toastTimer;
function showToast(m) {
  const t = document.getElementById('toast');
  t.textContent = m; t.classList.add('show');
  clearTimeout(toastTimer);
  toastTimer = setTimeout(() => t.classList.remove('show'), 2800);
}

// ── Boot ──────────────────────────────────────────────────────────────────────
initPage();
</script>
<!-- nav.js updates #nav-lumens and #nav-nova from the API -->
<script src="/lumiveil-nav.js"></script>
</body>
</html>