<!DOCTYPE html>
<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, viewport-fit=cover">
    <meta name="referrer" content="no-referrer">
    <title>Lunarhaven 🌙</title>

    <link rel="manifest" href="manifest.json">
    <meta name="theme-color" content="#0a090c">
    <meta name="description" content="A cozy, ad-free corner of the internet for indie artists, writers, and creators.">
    <meta property="og:title" content="Lunarhaven 🌙">
    <meta property="og:description" content="A cozy, ad-free corner of the internet for indie artists, writers, and creators.">
    <meta property="og:image" content="logo.png">
    <meta property="og:type" content="website">
    <meta name="twitter:card" content="summary">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <link rel="apple-touch-icon" href="logo.png">
    <link rel="icon" type="image/png" href="logo-rounded.png">
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <script src="https://unpkg.com/lucide@latest"></script>
    <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
    <script src="https://cdn.jsdelivr.net/npm/browser-image-compression@2.0.2/dist/browser-image-compression.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.0.6/purify.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/fuse.js@6.6.2"></script>
    <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.3/dist/confetti.browser.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>

    <link rel="apple-touch-startup-image" media="screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="splash_screens/4__iPhone_SE__iPod_touch_5th_generation_and_later_portrait.png">
    <link rel="apple-touch-startup-image" media="screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="splash_screens/iPhone_13_mini__iPhone_12_mini__iPhone_11_Pro__iPhone_XS__iPhone_X_portrait.png">
    <link rel="apple-touch-startup-image" media="screen and (device-width: 1032px) and (device-height: 1376px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="splash_screens/13__iPad_Pro_M4_portrait.png">
    <link rel="apple-touch-startup-image" media="screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="splash_screens/4__iPhone_SE__iPod_touch_5th_generation_and_later_landscape.png">
    <link rel="apple-touch-startup-image" media="screen and (device-width: 402px) and (device-height: 874px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="splash_screens/iPhone_17_Pro__iPhone_17__iPhone_16_Pro_portrait.png">
    <link rel="apple-touch-startup-image" media="screen and (device-width: 834px) and (device-height: 1210px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="splash_screens/11__iPad_Pro_M4_portrait.png">
    <link rel="apple-touch-startup-image" media="screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="splash_screens/9.7__iPad_Pro__7.9__iPad_mini__9.7__iPad_Air__9.7__iPad_portrait.png">
    <link rel="apple-touch-startup-image" media="screen and (device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="splash_screens/10.2__iPad_landscape.png">
    <link rel="apple-touch-startup-image" media="screen and (device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="splash_screens/iPhone_17e__iPhone_16e__iPhone_14__iPhone_13_Pro__iPhone_13__iPhone_12_Pro__iPhone_12_portrait.png">
    <link rel="apple-touch-startup-image" media="screen and (device-width: 744px) and (device-height: 1133px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="splash_screens/8.3__iPad_Mini_portrait.png">
    <link rel="apple-touch-startup-image" media="screen and (device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="splash_screens/10.2__iPad_portrait.png">
    <link rel="apple-touch-startup-image" media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="splash_screens/iPhone_11_Pro_Max__iPhone_XS_Max_landscape.png">
    <link rel="apple-touch-startup-image" media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="splash_screens/iPhone_11__iPhone_XR_portrait.png">
    <link rel="apple-touch-startup-image" media="screen and (device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="splash_screens/10.5__iPad_Air_portrait.png">
    <link rel="apple-touch-startup-image" media="screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="splash_screens/9.7__iPad_Pro__7.9__iPad_mini__9.7__iPad_Air__9.7__iPad_landscape.png">
    <link rel="apple-touch-startup-image" media="screen and (device-width: 820px) and (device-height: 1180px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="splash_screens/10.9__iPad_Air_portrait.png">
    <link rel="apple-touch-startup-image" media="screen and (device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="splash_screens/11__iPad_Pro__10.5__iPad_Pro_landscape.png">
    <link rel="apple-touch-startup-image" media="screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="splash_screens/iPhone_8_Plus__iPhone_7_Plus__iPhone_6s_Plus__iPhone_6_Plus_landscape.png">
    <link rel="apple-touch-startup-image" media="screen and (device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="splash_screens/iPhone_16_Plus__iPhone_15_Pro_Max__iPhone_15_Plus__iPhone_14_Pro_Max_portrait.png">
    <link rel="apple-touch-startup-image" media="screen and (device-width: 820px) and (device-height: 1180px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="splash_screens/10.9__iPad_Air_landscape.png">
    <link rel="apple-touch-startup-image" media="screen and (device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="splash_screens/12.9__iPad_Pro_portrait.png">
    <link rel="apple-touch-startup-image" media="screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="splash_screens/iPhone_8__iPhone_7__iPhone_6s__iPhone_6__4.7__iPhone_SE_landscape.png">
    <link rel="apple-touch-startup-image" media="screen and (device-width: 420px) and (device-height: 912px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="splash_screens/iPhone_Air_landscape.png">
    <link rel="apple-touch-startup-image" media="screen and (device-width: 834px) and (device-height: 1210px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="splash_screens/11__iPad_Pro_M4_landscape.png">
    <link rel="apple-touch-startup-image" media="screen and (device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="splash_screens/iPhone_17e__iPhone_16e__iPhone_14__iPhone_13_Pro__iPhone_13__iPhone_12_Pro__iPhone_12_landscape.png">
    <link rel="apple-touch-startup-image" media="screen and (device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="splash_screens/iPhone_16__iPhone_15_Pro__iPhone_15__iPhone_14_Pro_portrait.png">
    <link rel="apple-touch-startup-image" media="screen and (device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="splash_screens/iPhone_14_Plus__iPhone_13_Pro_Max__iPhone_12_Pro_Max_portrait.png">
    <link rel="apple-touch-startup-image" media="screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="splash_screens/iPhone_13_mini__iPhone_12_mini__iPhone_11_Pro__iPhone_XS__iPhone_X_landscape.png">
    <link rel="apple-touch-startup-image" media="screen and (device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="splash_screens/iPhone_16__iPhone_15_Pro__iPhone_15__iPhone_14_Pro_landscape.png">
    <link rel="apple-touch-startup-image" media="screen and (device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="splash_screens/11__iPad_Pro__10.5__iPad_Pro_portrait.png">
    <link rel="apple-touch-startup-image" media="screen and (device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="splash_screens/iPhone_16_Plus__iPhone_15_Pro_Max__iPhone_15_Plus__iPhone_14_Pro_Max_landscape.png">
    <link rel="apple-touch-startup-image" media="screen and (device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="splash_screens/10.5__iPad_Air_landscape.png">
    <link rel="apple-touch-startup-image" media="screen and (device-width: 440px) and (device-height: 956px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="splash_screens/iPhone_17_Pro_Max__iPhone_16_Pro_Max_portrait.png">
    <link rel="apple-touch-startup-image" media="screen and (device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="splash_screens/12.9__iPad_Pro_landscape.png">
    <link rel="apple-touch-startup-image" media="screen and (device-width: 420px) and (device-height: 912px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="splash_screens/iPhone_Air_portrait.png">
    <link rel="apple-touch-startup-image" media="screen and (device-width: 440px) and (device-height: 956px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="splash_screens/iPhone_17_Pro_Max__iPhone_16_Pro_Max_landscape.png">
    <link rel="apple-touch-startup-image" media="screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="splash_screens/iPhone_8_Plus__iPhone_7_Plus__iPhone_6s_Plus__iPhone_6_Plus_portrait.png">
    <link rel="apple-touch-startup-image" media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="splash_screens/iPhone_11_Pro_Max__iPhone_XS_Max_portrait.png">
    <link rel="apple-touch-startup-image" media="screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="splash_screens/iPhone_8__iPhone_7__iPhone_6s__iPhone_6__4.7__iPhone_SE_portrait.png">
    <link rel="apple-touch-startup-image" media="screen and (device-width: 1032px) and (device-height: 1376px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="splash_screens/13__iPad_Pro_M4_landscape.png">
    <link rel="apple-touch-startup-image" media="screen and (device-width: 744px) and (device-height: 1133px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="splash_screens/8.3__iPad_Mini_landscape.png">
    <link rel="apple-touch-startup-image" media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="splash_screens/iPhone_11__iPhone_XR_landscape.png">
    <link rel="apple-touch-startup-image" media="screen and (device-width: 402px) and (device-height: 874px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="splash_screens/iPhone_17_Pro__iPhone_17__iPhone_16_Pro_landscape.png">
    <link rel="apple-touch-startup-image" media="screen and (device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="splash_screens/iPhone_14_Plus__iPhone_13_Pro_Max__iPhone_12_Pro_Max_landscape.png">
</head>
<body class="dark-theme">
    <div id="pull-to-refresh-indicator">
        <div class="ptr-inner">
            <div class="ptr-icon">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M21.5 2v6h-6"/>
                    <path d="M21.34 15.57a10 10 0 1 1-.57-8.38"/>
                </svg>
            </div>
            <span class="ptr-label">Pull to refresh</span>
        </div>
    </div>

    <header class="top-bar">
        <div class="logo-area">
            <img src="logo.png" alt="Lunarhaven" class="logo-img">
            <h1 class="brand-name">Lunarhaven</h1>
        </div>
        <div style="display: flex; gap: 12px; align-items: center;">
            <button id="mobile-mod-btn" class="icon-btn" style="display: none;" onclick="location.href='moderation.html'">
                <i data-lucide="shield-check"></i>
            </button>
            <button id="mobile-feed-tune" class="icon-btn">
                <i data-lucide="sliders-horizontal"></i>
            </button>
            <button class="icon-btn search-trigger" data-target="explore">
                <i data-lucide="compass"></i>
            </button>
        </div>
    </header>

    <div class="app-container">
        <nav class="sidebar">
            <div class="sidebar-logo">
                <img src="logo.png" alt="Logo">
                <span>Lunarhaven</span>
            </div>

            <div class="sidebar-search-anchor" id="sidebar-search-trigger">
                <i data-lucide="search"></i>
                <span>Search</span>
            </div>

            <ul class="nav-links">
                <li class="active" data-target="home">
                    <i data-lucide="home"></i>
                    <span>Feed</span>
                </li>
                <li data-target="explore">
                    <i data-lucide="compass"></i>
                    <span>Explore</span>
                </li>
                <li data-target="havens">
                    <i data-lucide="tent-tree"></i>
                    <span>Havens</span>
                </li>
                <li data-target="create" class="create-special">
                    <i data-lucide="plus-circle"></i>
                    <span>Create</span>
                </li>
                <li data-target="inbox">
                    <i data-lucide="mail"></i>
                    <span>Inbox</span>
                    <div id="notif-badge-sidebar" class="notif-badge" style="display: none; margin-left: auto;"></div>
                </li>
                <li data-target="profile">
                    <i data-lucide="user"></i>
                    <span>Profile</span>
                </li>
                <li id="sb-settings-link">
                    <i data-lucide="settings"></i>
                    <span>Settings</span>
                </li>
                <li id="nav-moderation" style="display: none;" onclick="location.href='moderation.html'">
                    <i data-lucide="shield-check"></i>
                    <span>Moderation</span>
                </li>
            </ul>
        </nav>

        <main class="content">
            <section id="home" class="page active"></section>
            <section id="explore" class="page">
                <div class="explore-header" style="margin-bottom: 20px;">
                    <div class="input-group" style="margin-bottom: 0; padding: 0;">
                        <div id="explore-search-wrap" style="display:flex; align-items:center; gap:12px; background:rgba(255,255,255,0.05); border:1px solid var(--border); border-radius:14px; padding:10px 16px;">
                            <i data-lucide="search" style="width:18px; color:var(--text-dim); flex-shrink: 0;"></i>
                            <input type="text" id="explore-search-input" placeholder="Search people, havens, and posts..." autocomplete="off">
                            <button id="explore-search-btn" style="background:none;border:none;cursor:pointer;color:var(--text-dim);display:flex;align-items:center;padding:0;flex-shrink:0;transition:color 0.2s ease;" title="Search">
                                <i data-lucide="arrow-right" style="width:18px;height:18px;"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <div class="feed-switcher" id="explore-tabs" style="display: none; margin-bottom: 20px;">
                    <div class="feed-tab active" data-explore-tab="posts">
                        <i data-lucide="message-circle"></i>
                        <span>Posts</span>
                    </div>
                    <div class="feed-tab" data-explore-tab="people">
                        <i data-lucide="users"></i>
                        <span>People</span>
                    </div>
                    <div class="feed-tab" data-explore-tab="havens">
                        <i data-lucide="tent-tree"></i>
                        <span>Havens</span>
                    </div>
                </div>

                <div id="explore-results-container">
                    <div id="explore-top-matches" style="margin-bottom: 30px; display: none;"></div>

                    <div id="explore-main-results" class="feed-container" style="margin-top: 0;">
                        <div style="padding: 10px 5px 20px;">
                            <h3 style="font-size: 1.1rem; font-weight: 800; display: flex; align-items: center; gap: 8px;">
                                <i data-lucide="trending-up" style="color: var(--accent); width: 20px;"></i>

                                                    Trending Creators
                                                
                            </h3>
                        </div>
                        <div id="trending-creators-list">
                            <div class="shimmer-card" style="height: 70px; margin-bottom: 10px;"></div>
                            <div class="shimmer-card" style="height: 70px; margin-bottom: 10px;"></div>
                            <div class="shimmer-card" style="height: 70px; margin-bottom: 10px;"></div>
                        </div>
                    </div>
                </div>
            </section>
            <section id="havens" class="page">
                <div style="margin-bottom: 30px; display: grid; gap: 16px;">
                    <div style="display: flex; justify-content: space-between; align-items: center;">
                        <h2 style="font-size: 1.8rem; font-weight: 800;">Havens</h2>
                        <button id="btn-open-create-haven" class="primary-btn" style="width: auto; padding: 10px 20px; font-size: 0.9rem; border-radius: 12px; gap: 8px;">
                            <i data-lucide="plus-circle" style="width: 18px;"></i>
                            <span>Create Haven</span>
                        </button>
                    </div>
                    <div class="input-group" style="margin-bottom: 0; padding: 0;">
                        <div id="haven-main-search-wrap" style="display:flex; align-items:center; gap:12px; background:rgba(255,255,255,0.05); border:1px solid var(--border); border-radius:14px; padding:10px 16px;">
                            <i data-lucide="search" style="width:18px; color:var(--text-dim); flex-shrink: 0;"></i>
                            <input type="text" id="haven-main-search" placeholder="Search for Havens..." autocomplete="off">
                        </div>
                    </div>
                </div>

                <div id="havens-standard-view">
                    <div id="section-your-havens" style="display: none; margin-bottom: 40px;">
                        <h3 style="font-size: 0.8rem; font-weight: 800; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 16px; padding-left: 5px;">Your Havens</h3>
                        <div id="your-havens-list" class="havens-grid"></div>
                    </div>

                    <h3 style="font-size: 0.8rem; font-weight: 800; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 16px; padding-left: 5px;">Discover Havens</h3>
                    <div id="discover-havens-list" class="havens-grid">
                        <div class="shimmer-card" style="height: 120px;"></div>
                        <div class="shimmer-card" style="height: 120px;"></div>
                    </div>
                </div>

                <div id="havens-search-view" style="display: none;">
                    <h3 id="search-results-label" style="font-size: 0.8rem; font-weight: 800; color: var(--accent); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 16px; padding-left: 5px;">Search Results</h3>
                    <div id="search-havens-list" class="havens-grid"></div>
                </div>
            </section>
            <section id="create" class="page">
                <h2>Share your Light</h2>
            </section>
            <section id="inbox" class="page">
                <div class="inbox-header">
                    <h2 style="font-size: 1.8rem; font-weight: 800;">Inbox</h2>
                    <button id="btn-mark-all-read" class="text-link-btn" style="display: none; font-size: 0.85rem;">
                                Mark all read
                            </button>
                </div>

                <div id="push-invite-banner" style="display:none; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; background:rgba(var(--accent-rgb),0.08); border:1px solid rgba(var(--accent-rgb),0.2); border-radius:14px; margin-bottom:16px;">
                    <div style="display:flex; align-items:center; gap:10px;">
                        <div style="width:34px; height:34px; border-radius:10px; background:rgba(var(--accent-rgb),0.15); display:flex; align-items:center; justify-content:center; color:var(--accent); flex-shrink:0;">
                            <i data-lucide="bell-ring" style="width:16px;height:16px;"></i>
                        </div>
                        <div>
                            <div style="font-size:0.85rem; font-weight:700;">Never miss a moment</div>
                            <div style="font-size:0.74rem; color:var(--text-dim);">Turn on push notifications for likes, follows &amp; chats</div>
                        </div>
                    </div>
                    <div style="display:flex; align-items:center; gap:6px; flex-shrink:0;">
                        <button id="push-invite-dismiss-btn" class="icon-btn" style="width:30px; height:30px;" title="Not now">
                            <i data-lucide="x" style="width:14px;height:14px;"></i>
                        </button>
                        <button id="push-invite-enable-btn" style="background:var(--accent); color:white; border:none; padding:8px 14px; border-radius:10px; font-size:0.78rem; font-weight:700; cursor:pointer; white-space:nowrap;">Enable</button>
                    </div>
                </div>

                <div id="inbox-chats-strip">
                    <div class="inbox-chats-strip-header">
                        <span class="inbox-chats-strip-label">
                            <i data-lucide="message-circle" style="width:14px;height:14px;"></i>

                                            Chats
                                            
                            <span id="inbox-chat-unread-dot" class="inbox-section-dot" style="display:none;"></span>
                        </span>
                        <button id="btn-inbox-see-all-chats" class="inbox-see-all-btn">

                                            See all 
                            <i data-lucide="arrow-right" style="width:13px;height:13px;"></i>
                        </button>
                    </div>
                    <div id="inbox-chats-preview" class="inbox-chats-preview-list"></div>
                </div>

                <div id="inbox-notifications-panel">
                    <div class="inbox-notifs-header">
                        <span class="inbox-notifs-label">
                            <i data-lucide="bell" style="width:14px;height:14px;"></i>

                                            Notifications
                                            
                            <span id="inbox-notif-unread-dot" class="inbox-section-dot" style="display:none;"></span>
                        </span>
                        <div class="inbox-tabs">
                            <button class="inbox-tab active" data-inbox-tab="all">All</button>
                            <button class="inbox-tab" data-inbox-tab="unread">Unread</button>
                            <button class="inbox-tab" data-inbox-tab="mentions">Mentions</button>
                        </div>
                    </div>
                    <div id="inbox-content" class="feed-container" style="margin-top: 0;"></div>
                    <button id="inbox-load-more" style="display:none;">Load more</button>
                </div>

<div id="inbox-chats-panel" style="display:none;">
    <div class="inbox-chats-panel-header">
        <button class="icon-btn" id="btn-back-from-chats">
            <i data-lucide="chevron-left"></i>
        </button>
        <span style="font-size:1rem; font-weight:800;">All Chats</span>
    </div>

    <div id="inbox-chats-list" class="feed-container" style="margin-top:0; padding-top:12px;"></div>
</div>
</section>

            <section id="haven-chat-page" class="page">

                <aside id="chat-sidebar">
                    <div class="chat-sidebar-header">
                        <div id="chat-sidebar-haven-icon" class="chat-sidebar-haven-icon"></div>
                        <div class="chat-sidebar-haven-info">
                            <div id="chat-sidebar-name" class="chat-sidebar-name"></div>
                            <div id="chat-sidebar-sub" class="chat-sidebar-sub"></div>
                        </div>
                    </div>
                    <div class="chat-sidebar-members-label">Members</div>
                    <div id="chat-sidebar-members" class="chat-sidebar-members"></div>
                </aside>

                <div id="chat-main">

                    <div id="chat-topbar">
                        <div class="chat-topbar-left">
                            <button class="icon-btn chat-back-btn" id="btn-back-from-chat">
                                <i data-lucide="chevron-left"></i>
                            </button>
                            <div id="chat-nav-icon" class="chat-nav-icon"></div>
                            <div class="chat-topbar-info">
                                <div class="chat-topbar-name" id="chat-nav-name">Haven</div>
                                <div class="chat-topbar-sub" id="chat-nav-sub"></div>
                            </div>
                        </div>
                        <div class="chat-topbar-right">
                            <button class="icon-btn" id="btn-chat-notif-prefs" title="Notifications">
                                <i data-lucide="bell"></i>
                            </button>
                        </div>
                    </div>

                    <div id="chat-messages-wrap">
                        <div id="chat-load-top-sentinel"></div>
                        <div id="chat-messages-list"></div>
                    </div>

                    <div id="chat-new-msg-pill" style="display:none;">
                        <i data-lucide="arrow-down" style="width:13px;height:13px;"></i>
                        <span id="chat-new-msg-count">New messages</span>
                    </div>

                    <div id="chat-mention-dropdown" class="mention-dropdown" style="display:none; position:fixed; z-index:99999;"></div>
                    <div id="chat-input-bar">
                        <div id="chat-reply-preview" style="display:none;">
                            <div class="chat-reply-preview-inner">
                                <div class="chat-reply-bar"></div>
                                <div class="chat-reply-preview-text">
                                    <span id="chat-reply-name" class="chat-reply-to-name"></span>
                                    <span id="chat-reply-text" class="chat-reply-to-text"></span>
                                </div>
                            </div>
                            <button id="btn-cancel-reply" class="icon-btn" style="width:28px;height:28px;">
                                <i data-lucide="x" style="width:14px;height:14px;"></i>
                            </button>
                        </div>
                        <div class="chat-input-row">
                            <button id="chat-emoji-btn" class="icon-btn chat-toolbar-btn" title="Emoji">
                                <i data-lucide="smile"></i>
                            </button>
                            <textarea id="chat-input" placeholder="Message..." maxlength="2000" rows="1"></textarea>
                            <button id="btn-send-chat" class="chat-send-btn" disabled>
                                <i data-lucide="send"></i>
                            </button>
                        </div>
                    </div>

                </div>

                <div id="chat-notif-sheet" class="bottom-sheet" style="display:none;">
                    <div class="bottom-sheet-inner">
                        <div class="bottom-sheet-handle"></div>
                        <h3 style="font-size:1rem; font-weight:800; margin-bottom:4px;">Notifications</h3>
                        <p style="font-size:0.8rem; color:var(--text-dim); margin-bottom:18px;">Choose what you're notified about in this chat</p>
                        <div class="notif-pref-options">
                            <label class="notif-pref-row" data-level="all">
                                <div class="notif-pref-left">
                                    <div class="notif-pref-icon" style="background:rgba(0,180,255,0.12); color:#00b4ff;">
                                        <i data-lucide="bell-ring" style="width:16px;height:16px;"></i>
                                    </div>
                                    <div>
                                        <div style="font-weight:700; font-size:0.88rem;">Every message</div>
                                        <div style="font-size:0.75rem; color:var(--text-dim);">Get notified for every new message</div>
                                    </div>
                                </div>
                                <input type="radio" name="notif-pref" value="all">
                            </label>
                            <label class="notif-pref-row" data-level="mentions">
                                <div class="notif-pref-left">
                                    <div class="notif-pref-icon" style="background:rgba(121,94,170,0.12); color:var(--accent);">
                                        <i data-lucide="at-sign" style="width:16px;height:16px;"></i>
                                    </div>
                                    <div>
                                        <div style="font-weight:700; font-size:0.88rem;">
                                            @Mentions only 
                                            <span style="font-size:0.68rem; background:rgba(var(--accent-rgb),0.12); color:var(--accent); padding:2px 7px; border-radius:20px; font-weight:700; margin-left:5px;">Default</span>
                                        </div>
                                        <div style="font-size:0.75rem; color:var(--text-dim);">Only when someone @mentions you</div>
                                    </div>
                                </div>
                                <input type="radio" name="notif-pref" value="mentions">
                            </label>
                            <label class="notif-pref-row" data-level="none">
                                <div class="notif-pref-left">
                                    <div class="notif-pref-icon" style="background:rgba(255,255,255,0.06); color:var(--text-dim);">
                                        <i data-lucide="bell-off" style="width:16px;height:16px;"></i>
                                    </div>
                                    <div>
                                        <div style="font-weight:700; font-size:0.88rem;">None</div>
                                        <div style="font-size:0.75rem; color:var(--text-dim);">Mute this chat completely</div>
                                    </div>
                                </div>
                                <input type="radio" name="notif-pref" value="none">
                            </label>
                        </div>
                    </div>
                </div>
            </section>
            <section id="dm-chat-page" class="page">
    <div id="dm-chat-topbar">
        <div class="dm-chat-topbar-left">
            <button class="icon-btn" id="btn-back-from-dm">
                <i data-lucide="chevron-left"></i>
            </button>
            <img id="dm-chat-avatar" src="user.png" class="dm-chat-avatar">
            <div class="dm-chat-topbar-info">
                <div class="dm-chat-topbar-name" id="dm-chat-name">User</div>
                <div class="dm-chat-topbar-status" id="dm-chat-status">Online</div>
            </div>
        </div>
        <div class="dm-chat-topbar-right">
            <button class="icon-btn" id="btn-dm-menu">
                <i data-lucide="more-horizontal"></i>
            </button>
        </div>
    </div>

    <div id="dm-messages-wrap">
        <div id="dm-messages-list"></div>
    </div>

    <div id="dm-input-bar">
        <div id="dm-reply-preview" style="display:none;">
            <div class="dm-reply-preview-inner">
                <div class="dm-reply-bar"></div>
                <div class="dm-reply-preview-text">
                    <span id="dm-reply-name" class="dm-reply-to-name"></span>
                    <span id="dm-reply-text" class="dm-reply-to-text"></span>
                </div>
            </div>
            <button id="btn-cancel-dm-reply" class="icon-btn">
                <i data-lucide="x" style="width:14px;height:14px;"></i>
            </button>
        </div>
        <div class="dm-input-row">
            <button id="dm-emoji-btn" class="icon-btn dm-toolbar-btn" title="Emoji">
                <i data-lucide="smile"></i>
            </button>
            <textarea id="dm-input" placeholder="Message..." maxlength="2000" rows="1"></textarea>
            <button id="btn-send-dm" class="dm-send-btn" disabled>
                <i data-lucide="send"></i>
            </button>
        </div>
    </div>
</section>
            <section id="profile" class="page">
                <div id="profile-content" class="profile-container"></div>
            </section>
            <section id="settings" class="page">
                <div class="profile-nav-header">
                    <button class="icon-btn back-btn" id="btn-back-from-settings">
                        <i data-lucide="chevron-left"></i>
                    </button>
                    <span class="nav-user-name">Settings</span>
                </div>
                <div id="settings-content" style="padding-bottom: 60px;">

                    <p class="settings-section-label">Account</p>
                    <div class="settings-group">
                        <div class="settings-row" id="settings-row-edit-profile">
                            <div class="settings-row-left">
                                <div class="settings-row-icon">
                                    <i data-lucide="user-pen"></i>
                                </div>
                                <span>Edit profile</span>
                            </div>
                            <i data-lucide="chevron-right" class="settings-chevron"></i>
                        </div>
                        <div class="settings-row" id="settings-row-share">
                            <div class="settings-row-left">
                                <div class="settings-row-icon">
                                    <i data-lucide="share-2"></i>
                                </div>
                                <span>Share profile</span>
                            </div>
                            <i data-lucide="chevron-right" class="settings-chevron"></i>
                        </div>
                        <div class="settings-row" id="settings-row-interests">
                            <div class="settings-row-left">
                                <div class="settings-row-icon">
                                    <i data-lucide="sparkles"></i>
                                </div>
                                <span>My interests</span>
                            </div>
                            <i data-lucide="chevron-right" class="settings-chevron"></i>
                        </div>
                        <div class="settings-row" id="settings-row-theme">
                            <div class="settings-row-left">
                                <div class="settings-row-icon">
                                    <i data-lucide="palette"></i>
                                </div>
                                <span>Customise your theme</span>
                            </div>
                            <i data-lucide="chevron-right" class="settings-chevron"></i>
                        </div>
                        <div class="settings-row" id="settings-row-blocked">
                            <div class="settings-row-left">
                                <div class="settings-row-icon">
                                    <i data-lucide="ban"></i>
                                </div>
                                <span>Blocked accounts</span>
                            </div>
                            <i data-lucide="chevron-right" class="settings-chevron"></i>
                        </div>
                    </div>

                    <div id="settings-group-notifications">
                        <p class="settings-section-label">Notifications</p>
                        <div class="settings-group">
                            <div class="settings-row" id="settings-row-push">
                                <div class="settings-row-left">
                                    <div class="settings-row-icon">
                                        <i data-lucide="bell-ring"></i>
                                    </div>
                                    <span>Push notifications</span>
                                </div>
                                <label class="toggle-switch">
                                    <input type="checkbox" id="push-notif-toggle">
                                    <span class="toggle-slider"></span>
                                </label>
                            </div>
                        </div>
                    </div>

                    <div id="settings-group-app" style="display: none;">
                        <p class="settings-section-label">App</p>
                        <div class="settings-group">
                            <div class="settings-row" id="settings-row-install">
                                <div class="settings-row-left">
                                    <div class="settings-row-icon">
                                        <i data-lucide="download"></i>
                                    </div>
                                    <span>Install app</span>
                                </div>
                                <i data-lucide="chevron-right" class="settings-chevron"></i>
                            </div>
                        </div>
                    </div>

                    <div id="settings-group-mod" style="display:none;">
                        <p class="settings-section-label">Moderation</p>
                        <div class="settings-group">
                            <div class="settings-row" id="settings-row-mod-panel" onclick="location.href='moderation.html'">
                                <div class="settings-row-left">
                                    <div class="settings-row-icon">
                                        <i data-lucide="shield-check"></i>
                                    </div>
                                    <span>Moderation panel</span>
                                </div>
                                <i data-lucide="chevron-right" class="settings-chevron"></i>
                            </div>
                        </div>
                    </div>

                    <p class="settings-section-label">Community</p>
                    <div class="settings-group">
                        <a href="https://tiktok.com/@join.lunarhaven" target="_blank" class="settings-row">
                            <div class="settings-row-left">
                                <div class="settings-row-icon" style="background:#000; color:white; padding:10px;">
                                    <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="fill:currentColor; width:100%; height:100%;">
                                        <path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/>
                                    </svg>
                                </div>
                                <span>TikTok</span>
                            </div>
                            <i data-lucide="external-link" class="settings-chevron"></i>
                        </a>
                        <a href="https://reddit.com/r/lunarhaven" target="_blank" class="settings-row">
                            <div class="settings-row-left">
                                <div class="settings-row-icon" style="background:#FF4500; color:white; padding:10px;">
                                    <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="fill:currentColor; width:100%; height:100%;">
                                        <path d="M12 0C5.373 0 0 5.373 0 12c0 3.314 1.343 6.314 3.515 8.485l-2.286 2.286C.775 23.225 1.097 24 1.738 24H12c6.627 0 12-5.373 12-12S18.627 0 12 0Zm4.388 3.199c1.104 0 1.999.895 1.999 1.999 0 1.105-.895 2-1.999 2-.946 0-1.739-.657-1.947-1.539v.002c-1.147.162-2.032 1.15-2.032 2.341v.007c1.776.067 3.4.567 4.686 1.363.473-.363 1.064-.58 1.707-.58 1.547 0 2.802 1.254 2.802 2.802 0 1.117-.655 2.081-1.601 2.531-.088 3.256-3.637 5.876-7.997 5.876-4.361 0-7.905-2.617-7.998-5.87-.954-.447-1.614-1.415-1.614-2.538 0-1.548 1.255-2.802 2.803-2.802.645 0 1.239.218 1.712.585 1.275-.79 2.881-1.291 4.64-1.365v-.01c0-1.663 1.263-3.034 2.88-3.207.188-.911.993-1.595 1.959-1.595Zm-8.085 8.376c-.784 0-1.459.78-1.506 1.797-.047 1.016.64 1.429 1.426 1.429.786 0 1.371-.369 1.418-1.385.047-1.017-.553-1.841-1.338-1.841Zm7.406 0c-.786 0-1.385.824-1.338 1.841.047 1.017.634 1.385 1.418 1.385.785 0 1.473-.413 1.426-1.429-.046-1.017-.721-1.797-1.506-1.797Zm-3.703 4.013c-.974 0-1.907.048-2.77.135-.147.015-.241.168-.183.305.483 1.154 1.622 1.964 2.953 1.964 1.33 0 2.47-.81 2.953-1.964.057-.137-.037-.29-.184-.305-.863-.087-1.795-.135-2.769-.135Z"/>
                                    </svg>
                                </div>
                                <span>Reddit</span>
                            </div>
                            <i data-lucide="external-link" class="settings-chevron"></i>
                        </a>
                    </div>

                    <p class="settings-section-label">About</p>
                    <div class="settings-group">
                        <a href="policies.html" class="settings-row">
                            <div class="settings-row-left">
                                <div class="settings-row-icon">
                                    <i data-lucide="file-text"></i>
                                </div>
                                <span>Policies</span>
                            </div>
                            <i data-lucide="chevron-right" class="settings-chevron"></i>
                        </a>
                        <a href="/cdn-cgi/l/email-protection#0b677e656a79636a7d6e6525686465656e687f4b7b79647f646525666e" class="settings-row">
                            <div class="settings-row-left">
                                <div class="settings-row-icon">
                                    <i data-lucide="mail"></i>
                                </div>
                                <span>Contact</span>
                            </div>
                            <i data-lucide="chevron-right" class="settings-chevron"></i>
                        </a>
                    </div>

                    <p class="settings-section-label">Account actions</p>
                    <div class="settings-group">
                        <div class="settings-row" id="settings-row-logout">
                            <div class="settings-row-left">
                                <div class="settings-row-icon">
                                    <i data-lucide="log-out"></i>
                                </div>
                                <span>Sign out</span>
                            </div>
                        </div>
                        <div class="settings-row danger-row" id="settings-row-delete-account">
                            <div class="settings-row-left">
                                <div class="settings-row-icon" style="background: rgba(255,70,70,0.1); color: #ff5f5f;">
                                    <i data-lucide="user-x"></i>
                                </div>
                                <span style="color: #ff5f5f;">Delete account</span>
                            </div>
                        </div>
                    </div>

                    <p style="text-align:center; font-size:0.72rem; color:var(--text-dim); margin-top:24px; opacity:0.5;">Lunarhaven · Built for the quiet hours. 🌙</p>
                </div>
            </section>
            <section id="post-detail" class="page">
                <div class="profile-nav-header" style="justify-content: space-between;">
                    <div style="display: flex; align-items: center; gap: 15px;">
                        <button class="icon-btn back-btn" id="btn-back-from-post">
                            <i data-lucide="chevron-left"></i>
                        </button>
                        <span class="nav-user-name">Post</span>
                    </div>
                    <button class="icon-btn" id="btn-post-detail-share" style="margin-right: 10px;">
                        <i data-lucide="share-2"></i>
                    </button>
                </div>
                <div id="post-detail-content" class="profile-container" style="padding-bottom: 80px;"></div>
            </section>
            <section id="user-profile" class="page">
                <div class="profile-nav-header" style="justify-content: space-between;">
                    <div style="display: flex; align-items: center; gap: 15px;">
                        <button class="icon-btn back-btn" id="btn-back-from-profile">
                            <i data-lucide="chevron-left"></i>
                        </button>
                        <span class="nav-user-name" id="profile-nav-name">Profile</span>
                    </div>
                    <button class="icon-btn" id="btn-profile-menu" style="margin-right: 10px; display: none;">
                        <i data-lucide="more-horizontal"></i>
                    </button>
                </div>
                <div id="user-profile-content" class="profile-container"></div>
            </section>

            <section id="haven-page" class="page">
                <div class="profile-nav-header" style="justify-content: space-between;">
                    <div style="display: flex; align-items: center; gap: 15px;">
                        <button class="icon-btn back-btn" id="btn-back-from-haven">
                            <i data-lucide="chevron-left"></i>
                        </button>
                        <span class="nav-user-name" id="haven-nav-name">Haven</span>
                    </div>
                    <div style="display:flex; align-items:center; gap:6px; margin-right:10px;">
                        <button class="icon-btn" id="btn-haven-menu">
                            <i data-lucide="more-horizontal"></i>
                        </button>
                    </div>
                </div>
                <div id="haven-page-content" class="profile-container"></div>
            </section>

            <div id="delete-haven-modal" class="modal-overlay">
                <div class="modal-content auth-card" style="max-width: 440px;">
                    <div style="display:flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:18px; background:rgba(255,70,70,0.1); border:1px solid rgba(255,70,70,0.3); margin: 0 auto 20px;">
                        <i data-lucide="trash-2" style="color:#ff4646; width:26px; height:26px;"></i>
                    </div>
                    <h2 class="modal-title" style="color: #ff4646;">Delete Haven?</h2>
                    <p class="modal-subtitle" style="text-align: left; line-height: 1.6;">

                                                This action cannot be undone. The Haven and its settings will be permanently removed.
                        <br>
                        <br>
                        <b>Note:</b>
                         Posts made in this Haven will not be deleted, but they will no longer be associated with this Haven.
                                            
                    </p>
                    <div style="display:flex; gap:12px; margin-top:28px;">
                        <button id="btn-cancel-haven-delete" class="primary-btn" style="background:rgba(255,255,255,0.05); border:1px solid var(--border); color:var(--text-main); flex:1;">Cancel</button>
                        <button id="btn-confirm-haven-delete" class="primary-btn" style="background:rgba(255,70,70,0.15); border:1px solid rgba(255,70,70,0.4); color:#ff4646; flex:1;">Delete Haven</button>
                    </div>
                </div>
            </div>

            <section id="edit-profile-page" class="page">
                <div class="profile-nav-header">
                    <button class="icon-btn back-btn" id="btn-close-edit">
                        <i data-lucide="chevron-left"></i>
                    </button>
                    <span class="nav-user-name">Edit Profile</span>
                </div>
                <div style="padding: 0 16px 40px;">
                    <div class="profile-upload-zone" style="margin-top: 16px;">
                        <div class="banner-preview" id="edit-banner-preview">
                            <input type="file" id="edit-banner-upload" accept="image/*" hidden>
                            <button class="upload-btn banner-btn" id="btn-edit-banner-action">
                                <i data-lucide="image" id="icon-edit-banner"></i>
                            </button>
                        </div>
                        <div class="avatar-wrapper">
                            <div class="avatar-preview">
                                <img src="user.png" id="edit-avatar-img">
                            </div>
                            <input type="file" id="edit-avatar-upload" accept="image/*" hidden>
                            <button class="upload-btn avatar-btn" id="btn-edit-avatar-action">
                                <i data-lucide="camera" id="icon-edit-avatar"></i>
                            </button>
                        </div>
                    </div>

                    <div class="input-group" style="margin-top: 24px;">
                        <label>
                            <i data-lucide="at-sign" style="width:14px"></i>
                             Handle (Required)
                        </label>
                        <input type="text" id="edit-handle" placeholder="username" autocomplete="off" maxlength="24">
                        <p id="edit-handle-msg" style="display:none; text-align:left; margin: -10px 0 15px 4px; font-size: 0.75rem; font-weight: 500;"></p>

                        <label>
                            <i data-lucide="user" style="width:14px"></i>
                             Display Name
                        </label>
                        <input type="text" id="edit-display-name" placeholder="Name">

                        <label>
                            <i data-lucide="notebook-pen" style="width:14px"></i>
                             Bio
                        </label>
                        <textarea id="edit-bio" placeholder="Tell us about yourself..." maxlength="500"></textarea>

                        <label style="margin-top:8px;">
                            <i data-lucide="link" style="width:14px"></i>
                             Website / Link
                        </label>
                        <input type="url" id="edit-profile-link" placeholder="https://yoursite.com" maxlength="200" autocomplete="off">
                    </div>

                    <div class="input-group" style="margin-top: 20px;">
                        <label style="margin-bottom:10px;">
                            <i data-lucide="music" style="width:14px"></i>
                             Profile Song
                        </label>
                        <div id="edit-song-preview" style="display:none; margin-bottom:12px;"></div>
                        <div style="display:flex; gap:10px; align-items:stretch;">
                            <button type="button" id="btn-pick-profile-song" class="primary-btn" style="flex:1; background:rgba(var(--accent-rgb),0.1); border:1px solid rgba(var(--accent-rgb),0.3); color:var(--accent); gap:8px;">
                                <i data-lucide="music" style="width:15px;height:15px;flex-shrink:0;"></i>
                                 Pick a song
                                                            
                            </button>
                            <button type="button" id="btn-remove-profile-song" class="primary-btn" style="display:none; flex-shrink:0; width:auto; padding:0 18px; height:52px; background:rgba(255,70,70,0.08); border:1px solid rgba(255,70,70,0.25); color:#ff5f5f; gap:6px; border-radius:14px; line-height:1;">
                                                        Remove
                                                        </button>
                        </div>
                    </div>

                    
                    <div class="input-group" style="margin-top: 20px; border-top: 1px solid var(--border); padding-top: 20px;">
                        <label style="margin-bottom:10px;">
                            <i data-lucide="layout" style="width:14px"></i>
                             Profile Widgets
                        </label>
                        <div id="edit-widgets-list" style="display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px;"></div>


                        <div style="position:relative; margin-top:12px;">
                            <button type="button" id="btn-add-widget-dropdown-trigger" class="primary-btn" style="background:rgba(var(--accent-rgb),0.1); border:1px solid rgba(var(--accent-rgb),0.3); color:var(--accent); gap:8px; font-size:0.9rem; padding:12px; border-radius:12px; width:100%;">
                                <i data-lucide="plus-circle" style="width:16px;height:16px;"></i> Add Profile Widget
                            </button>
                            <div id="add-widget-dropdown-menu" style="display:none; position:absolute; bottom:calc(100% + 6px); left:0; right:0; background:#16141a; border:1px solid var(--border); border-radius:14px; padding:6px; z-index:100; box-shadow:0 8px 32px rgba(0,0,0,0.5);">
                                <button type="button" class="dropdown-item add-widget-select-btn" data-type="markdown"><i data-lucide="file-text" style="width:14px;height:14px;color:var(--accent);margin-right:8px;"></i> Markdown Text</button>
                                <button type="button" class="dropdown-item add-widget-select-btn" data-type="gallery"><i data-lucide="image" style="width:14px;height:14px;color:var(--accent);margin-right:8px;"></i> Image Gallery</button>
                                <button type="button" class="dropdown-item add-widget-select-btn" data-type="links"><i data-lucide="link" style="width:14px;height:14px;color:var(--accent);margin-right:8px;"></i> Social Links</button>
                                <button type="button" class="dropdown-item add-widget-select-btn" data-type="quote"><i data-lucide="quote" style="width:14px;height:14px;color:var(--accent);margin-right:8px;"></i> Highlight Quote</button>
                                <button type="button" class="dropdown-item add-widget-select-btn" data-type="progress"><i data-lucide="sliders" style="width:14px;height:14px;color:var(--accent);margin-right:8px;"></i> Progress Bar</button>
                                <button type="button" class="dropdown-item add-widget-select-btn" data-type="youtube"><i data-lucide="video" style="width:14px;height:14px;color:var(--accent);margin-right:8px;"></i> YouTube Player</button>
                            </div>
                        </div>

                    <div style="display: flex; flex-direction: column; gap: 12px; margin-top: 20px;">
                        <button id="btn-save-edit" class="primary-btn">Save Changes</button>
                        <button id="btn-open-profile-theme" class="primary-btn" style="background:rgba(var(--accent-rgb),0.1); border:1px solid rgba(var(--accent-rgb),0.3); color:var(--accent); gap:8px;">
                            <i data-lucide="wand-sparkles" style="width:16px; height:16px; flex-shrink:0;"></i>
                             Customise profile theme
                                            
                        </button>
                    </div>
                </div>
            </section>
            <section id="blocked-accounts-page" class="page">
                <div class="profile-nav-header">
                    <button class="icon-btn back-btn" id="btn-back-from-blocked">
                        <i data-lucide="chevron-left"></i>
                    </button>
                    <span class="nav-user-name">Blocked Accounts</span>
                </div>

                <div style="padding: 0 5px 20px;">
                    <div id="blocked-search-wrap" style="display:flex; align-items:center; gap:12px; background:rgba(255,255,255,0.05); border:1px solid var(--border); border-radius:14px; padding:10px 16px;">
                        <i data-lucide="search" style="width:18px; color:var(--text-dim); flex-shrink: 0;"></i>
                        <input type="text" id="blocked-search-input" placeholder="Search blocked users..." autocomplete="off" style="background:transparent; border:none; color:white; outline:none; width:100%; font-family:inherit; font-size:0.95rem; height: auto; margin: 0; padding: 0;">
                    </div>
                </div>

                <div id="blocked-accounts-list" class="feed-container" style="margin-top: 0;"></div>
            </section>
        </main>
    </div>

    <nav class="bottom-nav">
        <div class="nav-item active" data-target="home">
            <i data-lucide="home"></i>
        </div>
        <div class="nav-item" data-target="havens">
            <i data-lucide="tent-tree"></i>
        </div>
        <div class="nav-item create-fab" data-target="create">
            <i data-lucide="plus"></i>
        </div>
        <div class="nav-item" data-target="inbox" style="position: relative;">
            <i data-lucide="mail"></i>
            <div id="notif-badge-bottom" class="notif-badge" style="display: none;"></div>
        </div>
        <div class="nav-item" data-target="profile">
            <i data-lucide="user"></i>
        </div>
    </nav>

<div id="install-modal" class="modal-overlay">
        <div class="modal-content onboarding-card" style="max-width: 500px; text-align: left;">
            <button class="close-modal" id="btn-close-install">
                <i data-lucide="x"></i>
            </button>

            <div class="step-header" style="text-align: left; margin-bottom: 20px;">
                <div class="step-icon-wrapper" style="margin: 0 0 16px 0;">
                    <i data-lucide="smartphone"></i>
                </div>
                <h2 class="modal-title">Install Lunarhaven</h2>
                <p class="modal-subtitle">Add the app to your device for the full experience.</p>
            </div>

            <div style="margin-bottom: 24px; padding: 16px; background: rgba(var(--accent-rgb), 0.08); border: 1px solid rgba(var(--accent-rgb), 0.2); border-radius: 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; box-sizing: border-box;">
                <div style="display: flex; align-items: center; gap: 12px; min-width: 0;">
                    <div style="width: 40px; height: 40px; border-radius: 12px; background: rgba(0,0,0,0.20); display: flex; align-items: center; justify-content: center; color: var(--accent); flex-shrink: 0;">
                        <i data-lucide="square-arrow-out-up-right" style="width: 20px; height: 20px;"></i>
                    </div>
                    <div style="min-width: 0;">
                        <div style="font-size: 0.88rem; font-weight: 700; color: var(--text-main);">Android App</div>
                        <div style="font-size: 0.75rem; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">Now available on the Play Store</div>
                    </div>
                </div>
                <a href="https://play.google.com/store/apps/details?id=app.lunarhaven" target="_blank" rel="noopener noreferrer" class="primary-btn" style="width: auto; padding: 8px 16px; font-size: 0.8rem; border-radius: 10px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; flex-shrink: 0;">
                    Get App <i data-lucide="chevron-right" style="width:14px; height:14px;"></i>
                </a>
            </div>

            <div style="display:flex; align-items:center; gap:12px; margin-bottom:20px;">
                <div style="flex:1; height:1px; background:var(--border);"></div>
                <span style="font-size:0.75rem; color:var(--text-dim); font-weight:700; text-transform:uppercase; letter-spacing:0.04em;">Or Install Web App (PWA)</span>
                <div style="flex:1; height:1px; background:var(--border);"></div>
            </div>

            <div style="background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: 20px; padding: 20px; margin-bottom: 24px;">
                <p style="font-size: 0.85rem; line-height: 1.6; color: var(--text-dim);">
                    The Progressive Web App (PWA) hides browser UI elements like address bars and tabs, giving you an app-like experience and quick access directly from your home screen. 🌙
                </p>
            </div>

            <div style="margin-bottom: 24px;">
                <p style="font-size: 0.75rem; font-weight: 800; text-transform: uppercase; color: var(--accent); margin-bottom: 12px;">Safari (iOS)</p>
                <div style="display: grid; gap: 16px;">
                    <div style="display: flex; gap: 12px; align-items: flex-start; font-size: 0.88rem; line-height: 1.4;">
                        <div style="width: 32px; height: 32px; border-radius: 8px; background: var(--glass); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px;">
                            <i data-lucide="more-horizontal" style="width: 16px;"></i>
                        </div>
                        <span>
                            <b>iOS 26+:</b>
                            <br>
                            Tap 
                            <b>three dots</b>
                             at the bottom → 
                            <b>Share</b>
                             → 
                            <b>Add to Home Screen</b>
                        </span>
                    </div>
                    <div style="display: flex; gap: 12px; align-items: flex-start; font-size: 0.88rem; line-height: 1.4;">
                        <div style="width: 32px; height: 32px; border-radius: 8px; background: var(--glass); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px;">
                            <i data-lucide="share" style="width: 16px;"></i>
                        </div>
                        <span>
                            <b>Older versions/other layouts:</b>
                            <br>
                            Tap the 
                            <b>Share icon</b>
                             (square with arrow) → 
                            <b>Add to Home Screen</b>
                        </span>
                    </div>
                </div>
            </div>

            <div style="margin-bottom: 30px;">
                <p style="font-size: 0.75rem; font-weight: 800; text-transform: uppercase; color: var(--accent); margin-bottom: 12px;">Chrome (Android / Desktop)</p>
                <div style="display: flex; gap: 12px; align-items: flex-start; font-size: 0.88rem; line-height: 1.4;">
                    <div style="width: 32px; height: 32px; border-radius: 8px; background: var(--glass); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px;">
                        <i data-lucide="more-vertical" style="width: 16px;"></i>
                    </div>
                    <span>
                        Tap 
                        <b>three dots</b>
                         near the address bar → Select 
                        <b>Install app</b>
                         or 
                        <b>Add to home screen</b>
                    </span>
                </div>
            </div>

            <p style="font-size: 0.75rem; line-height: 1.6; color: var(--text-dim); opacity: 0.8;">
                Lunarhaven is not on the Apple App Store for iOS right now. These options are entirely optional—the website runs smoothly on its own in any browser. You can uninstall at any time.
            </p>
        </div>
    </div>
    
    <div id="auth-modal" class="modal-overlay">
        <div class="modal-content auth-card">
            <button class="close-modal">
                <i data-lucide="x"></i>
            </button>
            <div id="auth-step-email">
                <h2 class="modal-title">Welcome to Lunarhaven</h2>
                <p class="modal-subtitle" id="auth-modal-subtitle">Sign in or create an account to join the haven and access more features.</p>

                <div id="email-disabled-notice" style="display:none; background:rgba(255,160,50,0.1); border:1px solid rgba(255,160,50,0.3); border-radius:12px; padding:12px; margin-bottom:16px; text-align:left; gap:10px; align-items:center;">
                    <i data-lucide="info" style="color:#ffa032; width:20px; flex-shrink:0;"></i>
                    <p style="font-size:0.8rem; color:#ffa032; margin:0; line-height:1.4;">
                        Direct email login is currently unavailable. You can still use 
                        <b>Google</b>
                         to sign in.
                    </p>
                </div>

                <button id="btn-google-auth" style="
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 10px;
                    padding: 12px;
                    background: white;
                    color: #1a1a1a;
                    border: 1px solid rgba(0,0,0,0.15);
                    border-radius: 14px;
                    font-family: var(--ts-font);
                    font-size: 0.92rem;
                    font-weight: 600;
                    cursor: pointer;
                    transition: box-shadow 0.2s ease, transform 0.2s ease;
                    margin-bottom: 16px;
                " onmouseover="this.style.boxShadow='0 4px 16px rgba(0,0,0,0.12)';this.style.transform='translateY(-1px)'" onmouseout="this.style.boxShadow='none';this.style.transform='translateY(0)'">
                    <svg width="20" height="20" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
                        <path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"/>
                        <path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"/>
                        <path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"/>
                        <path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.18 1.48-4.97 2.31-8.16 2.31-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"/>
                        <path fill="none" d="M0 0h48v48H0z"/>
                    </svg>

                        Continue with Google
                </button>

                <div style="display:flex;align-items:center;gap:12px;margin-bottom:16px;">
                    <div style="flex:1;height:1px;background:var(--border);"></div>
                    <span style="font-size:0.78rem;color:var(--text-dim);font-weight:600;">or continue with email</span>
                    <div style="flex:1;height:1px;background:var(--border);"></div>
                </div>
                <div class="input-group">
                    <input type="email" id="auth-email" placeholder="Your email" autocomplete="off" required>
                    
                    <div id="password-group" style="display: none; margin-top: 8px;">
                        <div class="input-group">
                            <input type="password" id="auth-password" placeholder="Password" autocomplete="off">
                        </div>
                    </div>
                </div>
                <p class="legal-text">
                    Your email is used for login, identity, and occasional updates. By continuing, you confirm you are at least 13 years of age and agree to our 
                    <a href="policies.html" style="color:var(--accent); text-decoration:none; font-weight:600;">Policies</a>. Your email is private and we won't spam you 💜
                </p>
                <button id="btn-send-otp" class="primary-btn" disabled>Continue</button>
            </div>

            <div id="auth-step-code" style="display: none;">
                <h2 class="modal-title">Check your inbox</h2>
                <p class="modal-subtitle">
                    We sent a 6-digit code to 
                    <span id="display-email" style="color: var(--accent);"></span>
                    .
                </p>
                <div class="input-group">
                    <input type="text" id="auth-code" placeholder="000000" maxlength="6" inputmode="numeric">
                </div>
                <p id="auth-error" class="error-text" style="display: none;"></p>
                <button id="btn-verify-otp" class="primary-btn">Verify & Enter</button>
                <div class="resend-container">
                    <p>Didn't get it? Check your spam folder.</p>
                    <button id="btn-resend" class="text-link-btn" disabled>Resend in 60s</button>
                </div>
            </div>
        </div>
    </div>


<div id="onboarding-modal" class="modal-overlay">
    <div class="modal-content onboarding-card">

        
        <div class="ob-progress" id="ob-progress">
<div class="ob-progress-dot active" data-step="1">1</div>
<div class="ob-progress-dot" data-step="2">2</div>
<div class="ob-progress-dot" data-step="3">3</div>
<div class="ob-progress-dot" data-step="4">4</div>
        </div>

        
        <div id="onboarding-step-1" class="onboarding-step">
            <div class="step-header">
                <div class="step-icon-wrapper">
                    <i data-lucide="sparkles"></i>
                </div>
                <h2 class="modal-title">Create your profile</h2>
                <p class="modal-subtitle">How should the haven see you? 🌙</p>
            </div>

            <div class="profile-upload-zone">
                <div class="banner-preview" id="banner-preview">
                    <input type="file" id="banner-upload" accept="image/*" hidden>
                    <button class="upload-btn banner-btn" id="btn-banner-action">
                        <i data-lucide="image" id="icon-banner"></i>
                    </button>
                </div>
                <div class="avatar-wrapper">
                    <div class="avatar-preview">
                        <img src="user.png" id="avatar-img">
                    </div>
                    <input type="file" id="avatar-upload" accept="image/*" hidden>
                    <button class="upload-btn avatar-btn" id="btn-avatar-action">
                        <i data-lucide="camera" id="icon-avatar"></i>
                    </button>
                </div>
            </div>

            <div class="input-group">
<label>
    <i data-lucide="at-sign" style="width:13px"></i>
    Handle <span style="color:var(--accent);margin-left:2px;">*</span>
</label>
<div class="input-with-status">
    <input type="text" id="ob-handle" placeholder="your_username" autocomplete="off" maxlength="24" spellcheck="false" style="flex:1; min-width:0; width:100%;">
    <span class="input-status" id="ob-handle-status"></span>
</div>
<p id="ob-handle-msg"></p>
                <label>
                    <i data-lucide="user" style="width:13px"></i>
                    Display Name
                </label>
                <input type="text" id="ob-display-name" autocomplete="off" placeholder="How we should call you">

                <label>
                    <i data-lucide="notebook-pen" style="width:13px"></i>
                    Bio
                </label>
                <textarea id="ob-bio" autocomplete="off" placeholder="A little about your universe..." maxlength="500" rows="3"></textarea>
            </div>

            <div class="onboarding-actions">
                <button id="btn-save-profile" class="primary-btn" disabled>Continue →</button>
                <div style="text-align: center; margin-top: 12px;">
                    <button id="btn-onboarding-logout" class="text-link-btn" style="font-size: 0.8rem; opacity: 0.6; gap: 6px; display: inline-flex; align-items: center;">
                        <i data-lucide="log-out" style="width: 14px; height: 14px;"></i>
                        Use a different account
                    </button>
                </div>
            </div>
        </div>

        
        <div id="onboarding-step-2" class="onboarding-step" style="display: none;">
            <div class="step-header">
                <div class="step-icon-wrapper">
                    <i data-lucide="compass"></i>
                </div>
                <h2 class="modal-title">Pick your vibe</h2>
                <p class="modal-subtitle">Choose topics you care about. Your feed shapes around you.</p>
            </div>

            <div class="topic-grid-container">
                <div class="topic-grid" id="topic-grid"></div>
            </div>

            <div class="onboarding-actions">
                <button id="btn-save-topics" class="primary-btn">Continue ✨</button>
                <button id="btn-skip-topics" class="text-link-btn" style="font-size:0.8rem; opacity:0.5;">Skip for now</button>
            </div>
        </div>

        
        <div id="onboarding-step-3" class="onboarding-step" style="display: none;">
            <div class="step-header">
                <div class="step-icon-wrapper">
                    <i data-lucide="users"></i>
                </div>
                <h2 class="modal-title">Find your people</h2>
                <p class="modal-subtitle">Follow 3+ creators to fill your feed with posts you'll love 🫶</p>
            </div>

            <div class="people-suggestions-container" id="people-suggestions-container">
                <div class="people-suggestions-grid" id="people-suggestions-grid"></div>
            </div>

<div class="onboarding-footer-stats" style="display:flex; align-items:center; justify-content:space-between; padding-top:16px; border-top:1px solid var(--border); flex-wrap:wrap; gap:12px;">
    <span class="follow-progress" id="follow-progress" style="font-size:0.85rem; font-weight:600; color:var(--text-dim);">
        Followed: <span class="highlight" style="color:var(--accent); font-weight:700;">0</span> / <span style="font-weight:700;">3</span>
    </span>
    <div style="display:flex; align-items:center; gap:12px;">
        <button id="btn-skip-people" class="text-link-btn" style="font-size:0.82rem; color:var(--text-dim); opacity:0.6; padding:6px 12px;">
            Skip
        </button>
        <button id="btn-continue-people" class="primary-btn" disabled style="padding:10px 28px; font-size:0.88rem; min-width:120px;">
            Continue →
        </button>
    </div>
</div>
        </div>

        
        <div id="onboarding-step-4" class="onboarding-step" style="display: none;">
            <div class="step-header" style="margin-top: 12px;">
                <div class="step-icon-wrapper" style="width:72px;height:72px;border-radius:24px;">
                    <i data-lucide="moon" style="fill:var(--accent);color:var(--accent);width:32px;height:32px;"></i>
                </div>
                <h2 class="modal-title" style="font-size:1.5rem;">Welcome to Lunarhaven</h2>
                <p class="modal-subtitle" style="max-width:320px;margin:0 auto;">Your cozy corner of the internet is ready 💜</p>
            </div>

            <div class="welcome-tour-cards">
                <div class="welcome-tour-card">
                    <div class="welcome-tour-icon">📱</div>
                    <div class="welcome-tour-content">
                        <div class="welcome-tour-title">Your Feed</div>
                        <div class="welcome-tour-desc">Scroll through posts from people you follow</div>
                    </div>
                </div>
                <div class="welcome-tour-card">
                    <div class="welcome-tour-icon">🔍</div>
                    <div class="welcome-tour-content">
                        <div class="welcome-tour-title">Explore</div>
                        <div class="welcome-tour-desc">Find more people, Havens, and content</div>
                    </div>
                </div>
                <div class="welcome-tour-card">
                    <div class="welcome-tour-icon">🎨</div>
                    <div class="welcome-tour-content">
                        <div class="welcome-tour-title">Customize</div>
                        <div class="welcome-tour-desc">Themes, profile, and settings — make it yours</div>
                    </div>
                </div>
            </div>

            <button id="btn-enter-app" class="primary-btn" style="margin-top: 16px;">✨ Start Exploring</button>
        </div>

    </div>
</div>

    <div id="theme-modal" class="modal-overlay">
        <div class="modal-content onboarding-card ts-modal-shell" style="max-width:500px; padding:0; display:flex; flex-direction:column; max-height:90vh; overflow:hidden;">

            <div class="ts-modal-header">
                <div style="display:flex; align-items:center; gap:10px;">
                    <div class="step-icon-wrapper" style="width:36px;height:36px;flex-shrink:0;">
                        <i data-lucide="palette"></i>
                    </div>
                    <div>
                        <h2 class="modal-title" style="margin:0; font-size:1.1rem;">Theme Studio</h2>
                        <p class="modal-subtitle" style="margin:0; font-size:0.75rem;">Make Lunarhaven entirely yours 🌙</p>
                    </div>
                </div>
                <button class="icon-btn" id="btn-close-theme">
                    <i data-lucide="x"></i>
                </button>
            </div>

            <div class="ts-modal-body">
                <div class="step-header" style="display:none;"></div>

                <div class="ts-label">✨ Presets</div>
                <div id="ts-presets" class="ts-presets-grid"></div>

                <div class="ts-label">🌗 Colour Mode</div>
                <div class="ts-pills" id="ts-mode">
                    <button class="ts-pill" data-val="dark">🌑 Dark</button>
                    <button class="ts-pill" data-val="light">☀️ Light</button>
                    <button class="ts-pill" data-val="system">📱 System</button>
                    <button class="ts-pill" data-val="tinted">🎨 Tinted</button>
                    <button class="ts-pill" data-val="midnight">🌌 Midnight</button>
                    <button class="ts-pill" data-val="dim">🌙 Dim</button>
                    <button class="ts-pill" data-val="solarized">🌤️ Solarized</button>
                    <button class="ts-pill" data-val="high-contrast">⬛ High Contrast</button>
                </div>

                <div class="ts-label">🎨 Accent Colour</div>
                <div id="ts-accent-palette" class="ts-accent-palette"></div>
                <div style="display:flex;align-items:center;gap:12px;margin-top:12px;">
                    <label style="font-size:0.8rem;color:var(--text-dim);display:flex;align-items:center;gap:6px;">
                        <i data-lucide="pipette" style="width:14px;"></i>
                         Custom
                                    
                    </label>
                    <input type="color" id="ts-custom-color" value="#795eaa" style="width:40px;height:32px;border:none;border-radius:8px;cursor:pointer;background:none;">
                </div>

                <div class="ts-label">🏛️ UI Style</div>
                <div id="ts-style" class="ts-style-grid"></div>

                <div class="ts-label">🔤 Font</div>
                <div class="ts-pills" id="ts-font">
                    <button class="ts-pill" data-val="space-grotesk">Space Grotesk</button>
                    <button class="ts-pill" data-val="inter">Inter</button>
                    <button class="ts-pill" data-val="sora">Sora</button>
                    <button class="ts-pill" data-val="outfit">Outfit</button>
                    <button class="ts-pill" data-val="dm-sans">DM Sans</button>
                    <button class="ts-pill" data-val="playfair">Playfair Display</button>
                    <button class="ts-pill" data-val="jetbrains">JetBrains Mono</button>
                    <button class="ts-pill" data-val="georgia">Georgia</button>
                    <button class="ts-pill" data-val="comic">Comic Neue</button>
                    <button class="ts-pill" data-val="lexend">Lexend</button>
                    <button class="ts-pill" data-val="montserrat">Montserrat</button>
                </div>

                <div class="ts-label">🃏 Card Style</div>
                <div class="ts-pills" id="ts-card">
                    <button class="ts-pill" data-val="default">Default</button>
                    <button class="ts-pill" data-val="ghost">Ghost</button>
                    <button class="ts-pill" data-val="bordered">Bordered</button>
                    <button class="ts-pill" data-val="floating">Floating</button>
                    <button class="ts-pill" data-val="flat">Flat</button>
                    <button class="ts-pill" data-val="neon">Neon Glow</button>
                    <button class="ts-pill" data-val="glass">Glassmorphism</button>
                    <button class="ts-pill" data-val="paper">Paper</button>
                    <button class="ts-pill" data-val="retro">Retro</button>
                </div>

                <div class="ts-label">📐 Layout Density</div>
                <div class="ts-pills" id="ts-density">
                    <button class="ts-pill" data-val="compact">Compact</button>
                    <button class="ts-pill" data-val="normal">Normal</button>
                    <button class="ts-pill" data-val="cozy">Cozy</button>
                    <button class="ts-pill" data-val="spacious">Spacious</button>
                </div>

                <div class="ts-label">⬜ Corner Style</div>
                <div class="ts-pills" id="ts-radius">
                    <button class="ts-pill" data-val="sharp">Sharp</button>
                    <button class="ts-pill" data-val="soft">Soft</button>
                    <button class="ts-pill" data-val="round">Round</button>
                    <button class="ts-pill" data-val="pill">Pill</button>
                    <button class="ts-pill" data-val="blobby">Blobby</button>
                </div>

                <div class="ts-label">🗂️ Sidebar Style</div>
                <div class="ts-pills" id="ts-sidebar">
                    <button class="ts-pill" data-val="default">Default</button>
                    <button class="ts-pill" data-val="minimal">Minimal</button>
                    <button class="ts-pill" data-val="accent">Accent Fill</button>
                    <button class="ts-pill" data-val="frosted">Frosted</button>
                    <button class="ts-pill" data-val="superdark">Super Dark</button>
                </div>

                <div class="ts-label">🔮 Screen Filter</div>
                <div class="ts-pills" id="ts-filter">
                    <button class="ts-pill" data-val="none">None</button>
                    <button class="ts-pill" data-val="warm">Warm ☕</button>
                    <button class="ts-pill" data-val="cool">Cool 🧊</button>
                    <button class="ts-pill" data-val="sepia">Sepia 📜</button>
                    <button class="ts-pill" data-val="grayscale">Greyscale 🖤</button>
                    <button class="ts-pill" data-val="nightvision">Night Vision 🟢</button>
                    <button class="ts-pill" data-val="cinematic">Cinematic 🎬</button>
                    <button class="ts-pill" data-val="dreamy">Dreamy 🌸</button>
                    <button class="ts-pill" data-val="redshift">Red Shift 🔴</button>
                </div>

                <div class="ts-label">🎇 Ambient Effect</div>
                <div class="ts-pills" id="ts-anim">
                    <button class="ts-pill" data-val="none">None</button>
                    <button class="ts-pill" data-val="bubbles">🫧 Bubbles</button>
                    <button class="ts-pill" data-val="snow">❄️ Snow</button>
                    <button class="ts-pill" data-val="rain">🌧️ Rain</button>
                    <button class="ts-pill" data-val="hearts">💜 Hearts</button>
                    <button class="ts-pill" data-val="sparkles">✨ Sparkles</button>
                    <button class="ts-pill" data-val="fireflies">🪲 Fireflies</button>
                    <button class="ts-pill" data-val="stars">🌟 Stars</button>
                    <button class="ts-pill" data-val="petals">🌸 Petals</button>
                    <button class="ts-pill" data-val="matrix">💚 Matrix</button>
                </div>

                <div class="ts-label">🧱 Background Texture</div>
                <div class="ts-pills" id="ts-texture">
                    <button class="ts-pill" data-val="none">None</button>
                    <button class="ts-pill" data-val="grid">Grid</button>
                    <button class="ts-pill" data-val="dots">Dots</button>
                    <button class="ts-pill" data-val="lines">Lines</button>
                    <button class="ts-pill" data-val="topography">Topography</button>
                    <button class="ts-pill" data-val="paper">Paper</button>
                    <button class="ts-pill" data-val="carbon">Carbon Fibre</button>
                    <button class="ts-pill" data-val="circuit">Circuit Board</button>
                </div>

                <div class="ts-label">📜 Scrollbar Style</div>
                <div class="ts-pills" id="ts-scrollbar">
                    <button class="ts-pill" data-val="default">Default</button>
                    <button class="ts-pill" data-val="thin">Thin</button>
                    <button class="ts-pill" data-val="hidden">Hidden</button>
                    <button class="ts-pill" data-val="accent">Accent</button>
                    <button class="ts-pill" data-val="rainbow">Rainbow 🌈</button>
                </div>

                <div class="ts-label">⚙️ Extra Options</div>
                <div class="ts-toggles">
                    <div class="ts-toggle-row">
                        <div>
                            <div class="ts-toggle-title">Reduce Motion</div>
                            <div class="ts-toggle-sub">Minimise animations app-wide</div>
                        </div>
                        <label class="switch">
                            <input type="checkbox" id="ts-reduce-motion">
                            <span class="slider round"></span>
                        </label>
                    </div>
                    <div class="ts-toggle-row">
                        <div>
                            <div class="ts-toggle-title">Glowing Accent</div>
                            <div class="ts-toggle-sub">Soft glow on buttons & active elements</div>
                        </div>
                        <label class="switch">
                            <input type="checkbox" id="ts-glow">
                            <span class="slider round"></span>
                        </label>
                    </div>
                    <div class="ts-toggle-row">
                        <div>
                            <div class="ts-toggle-title">Post Hover Lift</div>
                            <div class="ts-toggle-sub">Cards float up when you hover</div>
                        </div>
                        <label class="switch">
                            <input type="checkbox" id="ts-hover-lift">
                            <span class="slider round"></span>
                        </label>
                    </div>
                    <div class="ts-toggle-row">
                        <div>
                            <div class="ts-toggle-title">Rainbow Mode</div>
                            <div class="ts-toggle-sub">Accent slowly cycles all colours 🌈</div>
                        </div>
                        <label class="switch">
                            <input type="checkbox" id="ts-rainbow">
                            <span class="slider round"></span>
                        </label>
                    </div>
                    <div class="ts-toggle-row">
                        <div>
                            <div class="ts-toggle-title">Compact Avatars</div>
                            <div class="ts-toggle-sub">Smaller profile pics in the feed</div>
                        </div>
                        <label class="switch">
                            <input type="checkbox" id="ts-compact-avatars">
                            <span class="slider round"></span>
                        </label>
                    </div>
                    <div class="ts-toggle-row">
                        <div>
                            <div class="ts-toggle-title">Frosted Modals</div>
                            <div class="ts-toggle-sub">Blur-behind effect on popups</div>
                        </div>
                        <label class="switch">
                            <input type="checkbox" id="ts-blur-bg">
                            <span class="slider round"></span>
                        </label>
                    </div>
                    <div class="ts-toggle-row">
                        <div>
                            <div class="ts-toggle-title">Hide Like Counts</div>
                            <div class="ts-toggle-sub">A healthier browsing experience</div>
                        </div>
                        <label class="switch">
                            <input type="checkbox" id="ts-hide-likes">
                            <span class="slider round"></span>
                        </label>
                    </div>
                </div>

                <button id="btn-reset-theme" class="primary-btn" style="margin-top:28px;background:rgba(255,255,255,0.04);border:1px solid var(--border);color:var(--text-main);">
                            ↩️ Reset to Default
                        </button>
                <p style="text-align:center;font-size:0.72rem;color:var(--text-dim);margin-top:14px;opacity:0.5;">Changes save instantly · only you see them 🌙</p>
            </div>
        </div>
    </div>

    <div id="ts-particles" style="position:fixed;inset:0;pointer-events:none;z-index:1;width:100%;height:100%;"></div>
    <div id="ts-filter-overlay" style="position:fixed;inset:0;pointer-events:none;z-index:2;transition:all 0.5s;"></div>

    <div id="composer-modal" class="modal-overlay composer-overlay">
        <div class="composer-card">
            <button class="icon-btn close-composer-btn" id="btn-close-composer">
                <i data-lucide="x"></i>
            </button>

            <div class="composer-body">
                <div class="composer-user-area">
                    <img src="user.png" id="composer-pfp" class="composer-avatar">
                    <div class="composer-input-wrapper">
                        <div id="haven-selector-container" style="margin-bottom: 12px; display: flex; align-items: center; gap: 8px;">
                            <button class="haven-target-btn" onclick="openHavenPicker()">
                                <i data-lucide="globe" style="width: 14px;"></i>
                                <span id="current-haven-name">Everyone</span>
                                <i data-lucide="chevron-down" style="width: 14px; opacity: 0.5;"></i>
                            </button>
                            <button id="btn-remove-selected-haven" class="icon-btn" onclick="removeSelectedHaven()" title="Clear haven" style="display:none; width:32px; height:32px; flex-shrink:0; background:rgba(255,255,255,0.05); border:1px solid var(--border); border-radius:50%; color:var(--text-dim); align-items:center; justify-content:center;">
                                <i data-lucide="x" style="width: 14px; height: 14px;"></i>
                            </button>
                        </div>
                        <textarea id="post-content" placeholder="What's on your mind?" maxlength="1500"></textarea>
                        <div id="mention-dropdown" class="mention-dropdown" style="display:none;"></div>
                        <div class="composer-actions"f>
                            <label class="composer-action-btn" style="cursor: pointer;" title="Add photo">
                                <i data-lucide="image"></i>
                                <input type="file" id="post-image-input" accept="image/*" multiple hidden>
                            </label>
                            <button class="composer-action-btn" id="music-picker-btn" title="Add song" onclick="openMusicModal()">
                                <i data-lucide="music"></i>
                            </button>
                            <button class="composer-action-btn" id="poll-toggle-btn" title="Add poll" onclick="togglePollBuilder()">
                                <i data-lucide="bar-chart-2"></i>
                            </button>
                            <button class="composer-action-btn" id="emoji-picker-btn" title="Add emoji">
                                <i data-lucide="smile"></i>
                            </button>
                        </div>

                        <div id="poll-builder" style="display:none; margin-top:14px; padding:14px; background:rgba(255,255,255,0.03); border:1px solid var(--border); border-radius:18px;">
                            <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;">
                                <span style="font-size:0.82rem; font-weight:700; color:var(--accent); display:flex; align-items:center; gap:6px;">
                                    <i data-lucide="bar-chart-2" style="width:14px;height:14px;"></i>
                                     Poll
                                </span>
                                <button onclick="togglePollBuilder()" style="background:none;border:none;color:var(--text-dim);cursor:pointer;padding:2px;display:flex;align-items:center;">
                                    <i data-lucide="x" style="width:14px;height:14px;"></i>
                                </button>
                            </div>
                            <div id="poll-options-list" style="display:flex; flex-direction:column; gap:8px;">
                                <input class="poll-option-input" type="text" placeholder="Option 1" maxlength="80" style="background:rgba(255,255,255,0.05);border:1px solid var(--border);border-radius:12px;padding:10px 14px;color:var(--text-main);font-family:var(--ts-font);font-size:0.88rem;outline:none;width:100%;box-sizing:border-box;">
                                <input class="poll-option-input" type="text" placeholder="Option 2" maxlength="80" style="background:rgba(255,255,255,0.05);border:1px solid var(--border);border-radius:12px;padding:10px 14px;color:var(--text-main);font-family:var(--ts-font);font-size:0.88rem;outline:none;width:100%;box-sizing:border-box;">
                            </div>
                            <button id="poll-add-option-btn" onclick="addPollOption()" style="margin-top:8px;background:none;border:1px dashed var(--border);border-radius:12px;color:var(--text-dim);font-family:var(--ts-font);font-size:0.82rem;padding:8px 14px;cursor:pointer;width:100%;display:flex;align-items:center;justify-content:center;gap:6px;">
                                <i data-lucide="plus" style="width:13px;height:13px;"></i>
                                 Add option
                                                            
                            </button>
                            <div style="display:flex; align-items:center; justify-content:space-between; margin-top:12px; flex-wrap:wrap; gap:10px;">
                                <div style="display:flex; align-items:center; gap:8px;">
                                    <label style="font-size:0.78rem;color:var(--text-dim);display:flex;align-items:center;gap:6px;cursor:pointer;">
                                        <input type="checkbox" id="poll-multiple-toggle" style="accent-color:var(--accent);">

                                                                                Multiple choice
                                                                            
                                    </label>
                                </div>
                                <select id="poll-duration-select" style="background:rgba(255,255,255,0.05);border:1px solid var(--border);border-radius:10px;color:var(--text-main);font-family:var(--ts-font);font-size:0.78rem;padding:6px 10px;outline:none;cursor:pointer;">
                                    <option value="">No end date</option>
                                    <option value="1">Ends in 1 hour</option>
                                    <option value="6">Ends in 6 hours</option>
                                    <option value="24">Ends in 1 day</option>
                                    <option value="72">Ends in 3 days</option>
                                    <option value="168">Ends in 7 days</option>
                                </select>
                            </div>
                        </div>

                        <div id="selected-haven-display" style="display: none; align-items: center; gap: 8px; margin-top: 10px; padding: 6px 12px; background: rgba(121, 94, 170, 0.1); border: 1px solid rgba(121, 94, 170, 0.3); border-radius: 50px; width: fit-content;">
                            <div id="sel-haven-icon" style="width: 20px; height: 20px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 10px;"></div>
                            <span id="sel-haven-name" style="font-size: 0.8rem; font-weight: 600; color: var(--accent);"></span>
                            <button class="icon-btn" onclick="removeSelectedHaven()" style="color: var(--text-dim); margin-left: 4px;">
                                <i data-lucide="x" style="width: 14px;"></i>
                            </button>
                        </div>

                        <div id="composer-song-preview" style="display:none; align-items:center; gap:12px; margin-top:10px; padding:10px 12px; background:rgba(121,94,170,0.1); border:1px solid rgba(121,94,170,0.3); border-radius:14px;">
                            <img id="composer-song-cover" src="" style="width:42px; height:42px; border-radius:8px; object-fit:cover; flex-shrink:0;">
                            <div style="flex:1; overflow:hidden;">
                                <div style="font-size:0.72rem; color:var(--accent); font-weight:600; margin-bottom:1px;">🎵 Now playing in your post</div>
                                <div id="composer-song-title" style="font-weight:700; font-size:0.88rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;"></div>
                                <div id="composer-song-artist" style="font-size:0.75rem; color:var(--text-dim);"></div>
                            </div>
                            <button class="icon-btn" onclick="removeAttachedSong()" style="background:rgba(255,60,60,0.15); color:#ff5f5f; border-radius:50%; width:28px; height:28px; flex-shrink:0;">
                                <i data-lucide="x" style="width:13px; height:13px;"></i>
                            </button>
                        </div>
                        <div id="image-preview-container" style="display: none; position: relative; margin-top: 12px;"></div>
                    </div>
                </div>
            </div>

            <div class="composer-footer">
                <div class="composer-tools">
                    <label class="ai-toggle">
                        <input type="checkbox" id="ai-generated-check">
                        <span class="ai-label">
                            <i data-lucide="sparkles"></i>
                             AI Content
                        </span>
                    </label>
                    <span class="char-counter" id="char-count">0/1500</span>
                </div>
                <button class="primary-btn" id="btn-publish-post">
                    <span>Post</span>
                    <i data-lucide="send"></i>
                </button>
            </div>
        </div>
    </div>

    <div id="haven-picker-modal" class="modal-overlay">
        <div class="modal-content onboarding-card" style="max-width: 480px; height: 80vh; display: flex; flex-direction: column;">
            <button class="close-modal" id="btn-close-haven-picker">
                <i data-lucide="x"></i>
            </button>
            <div class="step-header" style="margin-bottom: 20px;">
                <h2 class="modal-title">Select a Haven</h2>
            </div>

<div class="input-group" style="margin-bottom: 20px;">
                <div style="display:flex; align-items:center; gap:10px; background:rgba(255,255,255,0.05); border:1px solid var(--border); border-radius:14px; padding:10px 14px;">
                    <i data-lucide="search" style="width:18px; color:var(--text-dim);"></i>
                    <input type="text" id="haven-search-input" placeholder="Search Havens..." style="flex:1; background:transparent; border:none; color:white; outline:none;">
                    <button id="btn-clear-haven-search" style="display:none; background:none; border:none; padding:2px; color:var(--text-dim); cursor:pointer; flex-shrink:0;">
                        <i data-lucide="x-circle" style="width:16px; height:16px;"></i>
                    </button>
                </div>
            </div>

            <div id="haven-picker-results" style="flex: 1; overflow-y: auto; padding-right: 5px;"></div>
        </div>
    </div>

    <div id="delete-confirm-modal" class="modal-overlay">
        <div class="modal-content auth-card" style="max-width: 400px;">
            <div style="display:flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:16px; background:rgba(255,70,70,0.1); border:1px solid rgba(255,70,70,0.3); margin: 0 auto 20px;">
                <i data-lucide="trash-2" style="color:#ff4646; width:22px; height:22px;"></i>
            </div>
            <h2 class="modal-title">Delete Post?</h2>
            <p class="modal-subtitle">This can't be undone. Your post will be gone from the haven forever.</p>
            <div style="display:flex; gap:12px; margin-top:28px;">
                <button id="btn-cancel-delete" class="primary-btn" style="background:rgba(255,255,255,0.05); border:1px solid var(--border); color:var(--text-main); flex:1;">Cancel</button>
                <button id="btn-confirm-delete" class="primary-btn" style="background:rgba(255,70,70,0.15); border:1px solid rgba(255,70,70,0.4); color:#ff4646; flex:1;">Delete</button>
            </div>
        </div>
    </div>

    <div id="block-confirm-modal" class="modal-overlay" style="display:none;">
        <div class="modal-content auth-card" style="max-width:400px;">
            <div style="display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:16px;background:rgba(255,70,70,0.1);border:1px solid rgba(255,70,70,0.3);margin:0 auto 20px;">
                <i data-lucide="ban" style="color:#ff4646;width:22px;height:22px;"></i>
            </div>
            <h2 class="modal-title">Block this person?</h2>
            <p class="modal-subtitle">
                When you block 
                <strong id="block-confirm-name"></strong>
                :
            </p>
            <ul style="color:var(--text-dim);font-size:0.85rem;line-height:1.8;margin:16px 0 24px;padding-left:20px;text-align:left;">
                <li>They'll be removed as a follower and you'll unfollow them</li>
                <li>Their posts and comments will be hidden from you</li>
                <li>Your profile and posts will be hidden from them</li>
                <li>They won't know they've been blocked</li>
            </ul>
            <div style="display:flex;gap:12px;margin-top:8px;">
                <button id="btn-cancel-block" class="primary-btn" style="background:rgba(255,255,255,0.05);border:1px solid var(--border);color:var(--text-main);flex:1;">Cancel</button>
                <button id="btn-confirm-block" class="primary-btn" style="background:rgba(255,70,70,0.15);border:1px solid rgba(255,70,70,0.4);color:#ff4646;flex:1;">Block</button>
            </div>
        </div>
    </div>

    <div id="report-modal" class="modal-overlay" style="display:none;">
        <div class="modal-content auth-card" style="max-width:440px; max-height:90vh; overflow-y:auto;">
            <button class="close-modal" id="btn-close-report">
                <i data-lucide="x"></i>
            </button>
            <div style="display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:16px;background:rgba(255,160,50,0.1);border:1px solid rgba(255,160,50,0.3);margin:0 auto 20px;">
                <i data-lucide="flag" style="color:#ffa032;width:22px;height:22px;"></i>
            </div>
            <h2 class="modal-title">Report Content</h2>
            <p class="modal-subtitle" style="color:var(--text-dim);font-size:0.88rem;line-height:1.6;margin-bottom:24px;">
                        Your report goes straight to our moderation team. We review every report — your safety matters to us. 🛡️
                    </p>

            <p style="font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-dim);margin-bottom:12px;">What's the issue?</p>
            <div id="report-reason-chips" style="display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;"></div>

            <p style="font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-dim);margin-bottom:8px;">
                Add details 
                <span style="font-weight:400;text-transform:none;">(optional)</span>
            </p>
            <textarea id="report-details-input" placeholder="Tell us more about what's happening..." style="width:100%;background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:16px;padding:12px 16px;color:var(--text-main);font-family:inherit;font-size:0.88rem;line-height:1.6;resize:none;height:90px;outline:none;box-sizing:border-box;" maxlength="500"></textarea>
            <p id="report-details-count" style="font-size:0.72rem;color:var(--text-dim);text-align:right;margin-top:4px;margin-bottom:20px;">0 / 500</p>

            <button id="btn-submit-report" class="primary-btn" style="width:100%;opacity:0.4;pointer-events:none;">Submit</button>
        </div>
    </div>

    <div id="report-confirm-modal" class="modal-overlay" style="display:none;">
        <div class="modal-content auth-card" style="max-width:420px;">
            <button class="close-modal" onclick="document.getElementById('report-confirm-modal').classList.remove('active'); setTimeout(() => document.getElementById('report-confirm-modal').style.display='none', 400);">
                <i data-lucide="x"></i>
            </button>

            <div style="display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:20px;background:rgba(100,220,140,0.1);border:1px solid rgba(100,220,140,0.3);margin:0 auto 20px;">
                <i data-lucide="shield-check" style="color:#64dc8c;width:28px;height:28px;"></i>
            </div>
            <h2 class="modal-title">Report Received</h2>
            <p style="color:var(--text-dim);font-size:0.88rem;line-height:1.7;margin-bottom:24px;text-align:center;">

                            Your report has been sent to our team. We review every report carefully — if this content violates our 
                            
                <a href="policies.html" style="color:var(--accent);text-decoration:none;">Community Guidelines</a>
                , 
                            we'll take action. 🌙
                        
            </p>

            <div style="background:rgba(255,255,255,0.03);border:1px solid var(--border);border-radius:20px;padding:16px 20px;margin-bottom:24px;text-align:left;">
                <p style="font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-dim);margin-bottom:12px;">What you can do next</p>
                <div id="report-confirm-block-action" style="display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);cursor:pointer;">
                    <div style="width:36px;height:36px;border-radius:10px;background:rgba(255,70,70,0.1);border:1px solid rgba(255,70,70,0.2);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                        <i data-lucide="ban" style="color:#ff4646;width:16px;height:16px;"></i>
                    </div>
                    <div>
                        <p style="font-size:0.88rem;font-weight:600;margin:0 0 2px;">Block this user</p>
                        <p style="font-size:0.78rem;color:var(--text-dim);margin:0;">Stop seeing their content entirely</p>
                    </div>
                    <i data-lucide="chevron-right" style="color:var(--text-dim);width:16px;margin-left:auto;flex-shrink:0;"></i>
                </div>
                <a href="policies.html" style="display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);text-decoration:none;color:inherit;">
                    <div style="width:36px;height:36px;border-radius:10px;background:rgba(121,94,170,0.1);border:1px solid rgba(121,94,170,0.2);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                        <i data-lucide="book-open" style="color:var(--accent);width:16px;height:16px;"></i>
                    </div>
                    <div>
                        <p style="font-size:0.88rem;font-weight:600;margin:0 0 2px;">Read our Policies</p>
                        <p style="font-size:0.78rem;color:var(--text-dim);margin:0;">Learn what keeps Lunarhaven safe</p>
                    </div>
                    <i data-lucide="chevron-right" style="color:var(--text-dim);width:16px;margin-left:auto;flex-shrink:0;"></i>
                </a>
                <div style="display:flex;align-items:center;gap:12px;padding:10px 0;cursor:pointer;" id="report-confirm-browse">
                    <div style="width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,0.05);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                        <i data-lucide="moon-star" style="color:var(--text-dim);width:16px;height:16px;"></i>
                    </div>
                    <div>
                        <p style="font-size:0.88rem;font-weight:600;margin:0 0 2px;">Keep browsing</p>
                        <p style="font-size:0.78rem;color:var(--text-dim);margin:0;">Return to your Lunarhaven feed</p>
                    </div>
                    <i data-lucide="chevron-right" style="color:var(--text-dim);width:16px;margin-left:auto;flex-shrink:0;"></i>
                </div>
            </div>
        </div>
    </div>

    <div id="ai-info-modal" class="modal-overlay">
        <div class="modal-content auth-card" style="max-width: 420px;">
            <button class="close-modal" id="btn-close-ai-info">
                <i data-lucide="x"></i>
            </button>
            <div style="display:flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:16px; background:var(--accent-glow); border:1px solid var(--accent); margin: 0 auto 20px;">
                <i data-lucide="sparkles" style="color:var(--accent); width:22px; height:22px;"></i>
            </div>
            <h2 class="modal-title">AI Label</h2>
            <p class="modal-subtitle" style="line-height:1.7; text-align:left; color:var(--text-dim);">

                            Content or media in this post may have been 
                <strong style="color:var(--text-main);">created or edited using AI</strong>
                 (Artificial Intelligence).
                <br>
                <br>

                            Labels can be added by the creator themselves, or by the Lunarhaven team if they detect possible AI-generated content.
                <br>
                <br>

                            We require AI labelling to uphold 
                <strong style="color:var(--text-main);">authenticity and transparency</strong>
                 across the haven, and to help you control how much AI content you see.
                        
            </p>
        </div>
    </div>

    <div id="comments-drawer" class="drawer-overlay">
        <div class="drawer-content">
            <div class="drawer-header" style="flex-direction: column; align-items: stretch; gap: 12px; padding: 18px 20px 14px;">
                <div style="display: flex; justify-content: space-between; align-items: center;">
                    <h3 id="drawer-title" style="display: flex; align-items: center; gap: 8px;">

                                        Comments 
                                        
                        <span id="comment-count-header" style="font-size: 0.9rem; color: var(--text-dim); font-weight: 400;"></span>
                    </h3>
                    <button class="icon-btn" onclick="closeComments()">
                        <i data-lucide="x"></i>
                    </button>
                </div>
                <div class="sort-container" style="display: flex; gap: 8px; margin-top: 4px;">
                    <button class="genre-chip active" id="sort-top" onclick="setCommentSort('top')" style="display: flex; align-items: center; gap: 6px;">
                        <i data-lucide="sparkles" style="width: 14px; height: 14px;"></i>
                         Top
                                    
                    </button>
                    <button class="genre-chip" id="sort-latest" onclick="setCommentSort('latest')" style="display: flex; align-items: center; gap: 6px;">
                        <i data-lucide="clock" style="width: 14px; height: 14px;"></i>
                         Latest
                                    
                    </button>
                </div>
            </div>

            <div id="comments-list" class="comments-list" style="display: flex; flex-direction: column;">
                <div id="comments-footer-note" style="display: none; padding: 20px 0 40px 48px; text-align: left; opacity: 0.6; order: 9999;">
                    <p style="font-size: 0.72rem; color: var(--text-dim); line-height: 1.5; max-width: 280px;">
                                    Top is selected, so you'll see featured comments. Some comments, such as potential spam, may be hidden.
                                </p>
                </div>
            </div>
            <div id="reply-indicator" style="display:none; align-items:center; justify-content:space-between; padding:8px 16px; background:rgba(121,94,170,0.1); border-top:1px solid var(--border); font-size:0.8rem;">
                <span style="color:var(--text-dim);">
                    Replying to 
                    <span id="reply-target-handle" style="color:var(--accent); font-weight:600;">@user</span>
                </span>
                <button class="icon-btn" onclick="cancelReplyMode()" style="color:var(--text-dim);">
                    <i data-lucide="x" style="width:14px;"></i>
                </button>
            </div>

            <div id="edit-indicator" style="display:none; align-items:center; justify-content:space-between; padding:8px 16px; background:rgba(100,220,140,0.1); border-top:1px solid var(--border); font-size:0.8rem;">
                <span style="color:var(--text-dim);">
                    <i data-lucide="pencil" style="width:12px; margin-right:4px; vertical-align:middle;"></i>
                     Editing comment
                </span>
                <button class="icon-btn" onclick="cancelCommentEditMode()" style="color:var(--text-dim);">
                    <i data-lucide="x" style="width:14px;"></i>
                </button>
            </div>

            <div id="comment-signin-prompt" style="display:none; align-items:center; justify-content:center; gap:12px; padding:16px 20px; border-top:1px solid var(--border); background: var(--bg-dark);">
                <p style="font-size:0.88rem; color:var(--text-dim); margin:0;">Sign in to join the conversation</p>
                <button class="primary-btn" style="padding:8px 18px; font-size:0.85rem; max-width:140px;" onclick="closeComments(); authModal.style.display='flex'; setTimeout(()=>authModal.classList.add('active'),10);">Sign in</button>
            </div>

            <div class="comment-input-area" style="flex-direction:column; gap:0; position:relative;">
                <div id="comment-mention-dropdown" class="mention-dropdown" style="display:none; position:fixed; z-index:99999;"></div>
                <div id="comment-image-preview-wrap" style="display:none; width:100%;">
                    <img id="comment-image-preview" src="" style="max-height:120px; max-width:100%; border-radius:12px; border:1px solid var(--border); object-fit:cover; display:block;">
                    <button id="comment-image-remove-btn" onclick="removeCommentImage()" title="Remove photo" style="position:absolute;top:4px;right:8px;width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,0.65);border:none;color:white;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;">
                        <i data-lucide="x" style="width:13px;height:13px;"></i>
                    </button>
                </div>
                <div style="display:flex; align-items:flex-end; gap:8px; width:100%;">
                    <img id="comment-input-pfp" src="user.png" class="composer-avatar" style="width:34px;height:34px;flex-shrink:0;align-self:flex-end;margin-bottom:2px;">
                    <textarea id="comment-textarea" class="comment-box" placeholder="Add a comment..." rows="1" maxlength="500" style="flex:1;"></textarea>
                    <div style="display:flex; align-items:center; gap:8px; align-self:flex-end; margin-bottom:2px;">
                        <label id="comment-photo-btn" class="icon-btn" title="Add photo" style="color:var(--text-dim); cursor:pointer; display:flex; align-items:center; justify-content:center;">
                            <i data-lucide="image" style="width:20px; height:20px;"></i>
                            <input type="file" id="comment-image-input" accept="image/*" hidden>
                        </label>
                        <button class="icon-btn" id="comment-emoji-btn" title="Add emoji" style="color:var(--text-dim); cursor:pointer;">
                            <i data-lucide="smile" style="width:20px; height:20px;"></i>
                        </button>
                        <button id="send-comment-btn" class="comment-send-btn">
                            <i data-lucide="send" style="width:16px;height:16px;"></i>
                        </button>
                    </div>
                </div>
            </div>
            <div id="comment-mention-dropdown" class="mention-dropdown" style="display:none; position:fixed; z-index:99999;"></div>
        </div>
    </div>

    <div id="music-modal" style="display:none; position:fixed; inset:0; z-index:5000; background:rgba(0,0,0,0.88); backdrop-filter:blur(16px); justify-content:center; align-items:center; padding:16px; opacity:0; transition:opacity 0.25s ease;">
        <div id="music-modal-card" style="background:var(--card-dark); border:1px solid var(--border); border-radius:26px; width:100%; max-width:460px; display:flex; flex-direction:column; overflow:hidden; transform:scale(0.94) translateY(12px); transition:transform 0.35s cubic-bezier(0.34,1.56,0.64,1); max-height:82vh;">

            <div style="padding:18px 18px 14px; border-bottom:1px solid var(--border); flex-shrink:0;">
                <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;">
                    <span style="font-weight:700; font-size:1rem; display:flex; align-items:center; gap:8px;">
                        <i data-lucide="music-2" style="width:18px; color:var(--accent);"></i>
                         Add a Track
                    </span>
                    <button class="icon-btn" onclick="closeMusicModal()">
                        <i data-lucide="x"></i>
                    </button>
                </div>
                <div style="display:flex; align-items:center; gap:10px; background:rgba(255,255,255,0.05); border:1px solid var(--border); border-radius:12px; padding:10px 14px;">
                    <i data-lucide="search" style="width:16px; color:var(--text-dim); flex-shrink:0;"></i>
                    <input type="text" id="music-search-input" placeholder="Search songs and artists..." autocomplete="off" style="flex:1; background:transparent; border:none; color:var(--text-main); font-size:0.95rem; outline:none; font-family:inherit;">
                    <button id="music-search-clear" onclick="clearMusicSearch()" style="display:none; background:none; border:none; color:var(--text-dim); cursor:pointer; padding:0;">
                        <i data-lucide="x" style="width:14px;"></i>
                    </button>
                </div>
                <div id="music-genre-chips" style="display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; margin-top:10px; padding-bottom:2px;">
                    <button class="genre-chip active" data-genre="chart">🔥 Trending</button>
                    <button class="genre-chip" data-genre="pop">🎤 Pop</button>
                    <button class="genre-chip" data-genre="hiphop">🎧 Hip-Hop</button>
                    <button class="genre-chip" data-genre="rnb">✨ R&B</button>
                    <button class="genre-chip" data-genre="electronic">⚡ Electronic</button>
                    <button class="genre-chip" data-genre="rock">🎸 Rock</button>
                    <button class="genre-chip" data-genre="jazz">🎷 Jazz</button>
                </div>
            </div>

            <div id="music-now-playing" style="display:none; align-items:center; gap:10px; padding:10px 16px; background:rgba(121,94,170,0.12); border-bottom:1px solid var(--border); flex-shrink:0;">
                <img id="np-cover" src="" style="width:34px; height:34px; border-radius:6px; object-fit:cover;">
                <div style="flex:1; overflow:hidden;">
                    <div id="np-title" style="font-size:0.8rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;"></div>
                    <div id="np-artist" style="font-size:0.72rem; color:var(--text-dim);"></div>
                </div>
                <div style="display:flex; align-items:center; gap:6px;">
                    <button id="np-playpause" onclick="toggleNowPlaying()" style="background:var(--accent); border:none; color:white; border-radius:50%; width:28px; height:28px; display:flex; align-items:center; justify-content:center; cursor:pointer;">
                        <i data-lucide="pause" style="width:13px;"></i>
                    </button>
                    <button onclick="attachCurrentSong()" style="background:rgba(255,255,255,0.08); border:none; color:var(--text-main); border-radius:8px; padding:5px 10px; font-size:0.75rem; cursor:pointer; font-family:inherit;">Add ＋</button>
                </div>
            </div>

            <div id="music-results-container" style="flex:1; overflow-y:auto; padding:10px; display:flex; flex-direction:column; gap:4px;"></div>
            <div style="display:flex; align-items:center; justify-content:center; padding:10px 16px; border-top:1px solid var(--border); flex-shrink:0;">
                <a href="https://www.deezer.com" target="_blank" rel="noopener noreferrer" style="display:flex; align-items:center; gap:6px; text-decoration:none; opacity:0.7; transition:opacity 0.2s ease;" onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='0.7'">
                    <span style="font-size:0.68rem; color:var(--text-dim); font-weight:500; letter-spacing:0.02em;">Powered by</span>
                    <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="width:14px; height:14px; fill:#A238FF; flex-shrink:0;">
                        <path d="M.693 10.024c.381 0 .693-1.256.693-2.807 0-1.55-.312-2.807-.693-2.807C.312 4.41 0 5.666 0 7.217s.312 2.808.693 2.808ZM21.038 1.56c-.364 0-.684.805-.91 2.096C19.765 1.446 19.184 0 18.526 0c-.78 0-1.464 2.036-1.784 5-.312-2.158-.788-3.536-1.325-3.536-.745 0-1.386 2.704-1.62 6.472-.442-1.932-1.083-3.145-1.793-3.145s-1.35 1.213-1.793 3.145c-.242-3.76-.874-6.463-1.628-6.463-.537 0-1.013 1.378-1.325 3.535C6.938 2.036 6.262 0 5.474 0c-.658 0-1.247 1.447-1.602 3.665-.217-1.291-.546-2.105-.91-2.105-.675 0-1.221 2.807-1.221 6.272 0 3.466.546 6.273 1.221 6.273.277 0 .537-.476.736-1.273.32 2.928.996 4.938 1.776 4.938.606 0 1.143-1.204 1.507-3.11.251 3.622.875 6.195 1.602 6.195.46 0 .875-1.023 1.187-2.677C10.142 21.6 11 24 12.004 24c1.005 0 1.863-2.4 2.235-5.822.312 1.654.727 2.677 1.186 2.677.728 0 1.352-2.573 1.603-6.195.364 1.906.9 3.11 1.507 3.11.78 0 1.455-2.01 1.775-4.938.208.797.46 1.273.737 1.273.675 0 1.22-2.807 1.22-6.273-.008-3.457-.553-6.272-1.23-6.272ZM23.307 10.024c.381 0 .693-1.256.693-2.807 0-1.55-.312-2.807-.693-2.807-.381 0-.693 1.256-.693 2.807s.312 2.808.693 2.808Z"/>
                    </svg>
                    <span style="font-size:0.75rem; font-weight:800; color:#A238FF; letter-spacing:0.01em;">Deezer</span>
                </a>
            </div>
        </div>
    </div>

    <div id="image-lightbox" style="display:none; position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,0.85); backdrop-filter:blur(12px); align-items:center; justify-content:center; cursor:zoom-out;">
        <button id="lightbox-close" style="position:absolute; top:18px; right:18px; width:38px; height:38px; border-radius:50%; border:none; background:rgba(255,255,255,0.12); color:white; cursor:pointer; display:flex; align-items:center; justify-content:center;">
            <i data-lucide="x"></i>
        </button>
        <img id="lightbox-img" src="" style="max-width:92vw; max-height:92vh; border-radius:18px; object-fit:contain; box-shadow:0 30px 80px rgba(0,0,0,0.6);">
    </div>

    <div id="tune-modal" class="modal-overlay">
        <div class="modal-content onboarding-card" style="max-width: 460px;">
            <button class="close-modal" id="btn-close-tune">
                <i data-lucide="x"></i>
            </button>
            <div class="step-header">
                <div class="step-icon-wrapper">
                    <i data-lucide="sliders-horizontal"></i>
                </div>
                <h2 class="modal-title">Tune your feed</h2>
            </div>

            <div style="background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 20px; padding: 20px; margin-bottom: 24px; display: flex; align-items: center; justify-content: space-between;">
                <div>
                    <h4 style="margin-bottom: 4px;">Snooze AI Content</h4>
                    <p style="font-size: 0.75rem; color: var(--text-dim);">Hide all AI-generated posts across the haven.</p>
                </div>
                <label class="switch">
                    <input type="checkbox" id="toggle-snooze-ai">
                    <span class="slider round"></span>
                </label>
            </div>

            <h4 style="margin-bottom: 12px; padding-left: 5px;">Your Interests</h4>
            <p style="font-size: 0.75rem; color: var(--accent); margin-bottom: 16px; padding-left: 5px;">You'll see posts in these categories more frequently on For You.</p>
            <div id="tune-topic-grid" class="topic-grid"></div>
        </div>
    </div>

    <div id="repost-compose-modal">
        <div class="repost-compose-box">
            <div class="repost-compose-header">
                <div class="repost-compose-title">
                    <i data-lucide="repeat"></i>
                    <span id="repost-compose-mode-label">Repost</span>
                </div>
                <button class="icon-btn" id="btn-close-repost-compose" aria-label="Close">
                    <i data-lucide="x"></i>
                </button>
            </div>
            <div class="repost-compose-preview" id="repost-compose-preview-text"></div>
            <div class="repost-compose-textarea-wrap" id="repost-textarea-wrap">
                <img class="repost-compose-pfp" id="repost-compose-pfp" src="user.png" alt="">
                <textarea id="repost-comment-textarea" maxlength="500" placeholder="Add a thought… (optional)"></textarea>
            </div>
            <div class="repost-compose-footer">
                <span class="repost-char-count" id="repost-char-count"></span>
                <div class="repost-compose-actions">
                    <button class="btn-cancel-repost" id="btn-cancel-repost-compose">Cancel</button>
                    <button class="btn-confirm-repost" id="btn-confirm-repost-compose">
                        <i data-lucide="repeat" style="width:14px;height:14px;"></i>
                        <span id="repost-confirm-label">Repost</span>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div id="repost-modal" class="drawer-overlay">
        <div class="drawer-content">
            <div class="drawer-header">
                <h3 style="display:flex;align-items:center;gap:8px;">
                    <i data-lucide="repeat" style="width:18px;height:18px;color:#4ade80;"></i>

                            Reposts
                            
                    <span id="repost-modal-title-text" style="font-size:0.9rem;color:var(--text-dim);font-weight:400;"></span>
                </h3>
                <button class="icon-btn" id="btn-close-repost-modal" aria-label="Close">
                    <i data-lucide="x"></i>
                </button>
            </div>
            <div id="repost-modal-list" class="comments-list" style="display:flex;flex-direction:column;"></div>
        </div>
    </div>

    <div id="share-modal" class="modal-overlay">
        <div class="modal-content auth-card" style="max-width: 420px; padding: 30px 20px;">
            <button class="close-modal" id="btn-close-share">
                <i data-lucide="x"></i>
            </button>
            <h2 class="modal-title" id="share-modal-title" style="font-size: 1.3rem; margin-bottom: 25px; text-align: left; padding-left: 10px;">Share</h2>

            <div class="share-options-grid">
                <button class="share-option-btn" id="share-native">
                    <div class="share-icon-circle" style="background: #2f2e37;">
                        <i data-lucide="share"></i>
                    </div>
                    <span>Share to...</span>
                </button>
                <button class="share-option-btn" id="share-copy">
                    <div class="share-icon-circle" style="background: #2f2e37;">
                        <i data-lucide="link"></i>
                    </div>
                    <span>Copy link</span>
                </button>
                <button class="share-option-btn" id="share-x">
                    <div class="share-icon-circle" style="background: #000;">
                        <svg viewBox="0 0 24 24" fill="currentColor" width="20">
                            <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.045 4.126H5.078z"/>
                        </svg>
                    </div>
                    <span>X</span>
                </button>
                <button class="share-option-btn" id="share-threads">
                    <div class="share-icon-circle" style="background: #000;">
                        <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="22">
                            <path d="M12.186 24h-.007c-3.581-.024-6.334-1.205-8.184-3.509C2.35 18.44 1.5 15.586 1.472 12.01v-.017c.03-3.579.879-6.43 2.525-8.482C5.845 1.205 8.6.024 12.18 0h.014c2.746.02 5.043.725 6.826 2.098 1.677 1.29 2.858 3.13 3.509 5.467l-2.04.569c-1.104-3.96-3.898-5.984-8.304-6.015-2.91.022-5.11.936-6.54 2.717C4.307 6.504 3.616 8.914 3.589 12c.027 3.086.718 5.496 2.057 7.164 1.43 1.783 3.631 2.698 6.54 2.717 2.623-.02 4.358-.631 5.8-2.045 1.647-1.613 1.618-3.593 1.09-4.798-.31-.71-.873-1.3-1.634-1.75-.192 1.352-.622 2.446-1.284 3.272-.886 1.102-2.14 1.704-3.73 1.79-1.202.065-2.361-.218-3.259-.801-1.063-.689-1.685-1.74-1.752-2.964-.065-1.19.408-2.285 1.33-3.082.88-.76 2.119-1.207 3.583-1.291a13.853 13.853 0 0 1 3.02.142c-.126-.742-.375-1.332-.75-1.757-.513-.586-1.308-.883-2.359-.89h-.029c-.844 0-1.992.232-2.721 1.32L7.734 7.847c.98-1.454 2.568-2.256 4.478-2.256h.044c3.194.02 5.097 1.975 5.287 5.388.108.046.216.094.321.142 1.49.7 2.58 1.761 3.154 3.07.797 1.82.871 4.79-1.548 7.158-1.85 1.81-4.094 2.628-7.277 2.65Zm1.003-11.69c-.242 0-.487.007-.739.021-1.836.103-2.98.946-2.916 2.143.067 1.256 1.452 1.839 2.784 1.767 1.224-.065 2.818-.543 3.086-3.71a10.5 10.5 0 0 0-2.215-.221z"/>
                        </svg>
                    </div>
                    <span>Threads</span>
                </button>
                <button class="share-option-btn" id="share-whatsapp">
                    <div class="share-icon-circle" style="background: #25D366;">
                        <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="22">
                            <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/>
                        </svg>
                    </div>
                    <span>WhatsApp</span>
                </button>
                <button class="share-option-btn" id="share-telegram">
                    <div class="share-icon-circle" style="background: #0088cc;">
                        <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="22">
                            <path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/>
                        </svg>
                    </div>
                    <span>Telegram</span>
                </button>
                <button class="share-option-btn" id="share-bluesky">
                    <div class="share-icon-circle" style="background: #0085ff;">
                        <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="22">
                            <path d="M5.202 2.857C7.954 4.922 10.913 9.11 12 11.358c1.087-2.247 4.046-6.436 6.798-8.501C20.783 1.366 24 .213 24 3.883c0 .732-.42 6.156-.667 7.037-.856 3.061-3.978 3.842-6.755 3.37 4.854.826 6.089 3.562 3.422 6.299-5.065 5.196-7.28-1.304-7.847-2.97-.104-.305-.152-.448-.153-.327 0-.121-.05.022-.153.327-.568 1.666-2.782 8.166-7.847 2.97-2.667-2.737-1.432-5.473 3.422-6.3-2.777.473-5.899-.308-6.755-3.369C.42 10.04 0 4.615 0 3.883c0-3.67 3.217-2.517 5.202-1.026"/>
                        </svg>
                    </div>
                    <span>Bluesky</span>
                </button>
                <button class="share-option-btn" id="share-reddit">
                    <div class="share-icon-circle" style="background: #ff4500;">
                        <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="22">
                            <path d="M12 0C5.373 0 0 5.373 0 12c0 3.314 1.343 6.314 3.515 8.485l-2.286 2.286C.775 23.225 1.097 24 1.738 24H12c6.627 0 12-5.373 12-12S18.627 0 12 0Zm4.388 3.199c1.104 0 1.999.895 1.999 1.999 0 1.105-.895 2-1.999 2-.946 0-1.739-.657-1.947-1.539v.002c-1.147.162-2.032 1.15-2.032 2.341v.007c1.776.067 3.4.567 4.686 1.363.473-.363 1.064-.58 1.707-.58 1.547 0 2.802 1.254 2.802 2.802 0 1.117-.655 2.081-1.601 2.531-.088 3.256-3.637 5.876-7.997 5.876-4.361 0-7.905-2.617-7.998-5.87-.954-.447-1.614-1.415-1.614-2.538 0-1.548 1.255-2.802 2.803-2.802.645 0 1.239.218 1.712.585 1.275-.79 2.881-1.291 4.64-1.365v-.01c0-1.663 1.263-3.034 2.88-3.207.188-.911.993-1.595 1.959-1.595Zm-8.085 8.376c-.784 0-1.459.78-1.506 1.797-.047 1.016.64 1.429 1.426 1.429.786 0 1.371-.369 1.418-1.385.047-1.017-.553-1.841-1.338-1.841Zm7.406 0c-.786 0-1.385.824-1.338 1.841.047 1.017.634 1.385 1.418 1.385.785 0 1.473-.413 1.426-1.429-.046-1.017-.721-1.797-1.506-1.797Zm-3.703 4.013c-.974 0-1.907.048-2.77.135-.147.015-.241.168-.183.305.483 1.154 1.622 1.964 2.953 1.964 1.33 0 2.47-.81 2.953-1.964.057-.137-.037-.29-.184-.305-.863-.087-1.795-.135-2.769-.135Z"/>
                        </svg>
                    </div>
                    <span>Reddit</span>
                </button>
                <button class="share-option-btn" id="share-facebook">
                    <div class="share-icon-circle" style="background: #1877F2;">
                        <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="20">
                            <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
                        </svg>
                    </div>
                    <span>Facebook</span>
                </button>
                <button class="share-option-btn" id="share-pinterest">
                    <div class="share-icon-circle" style="background: #bd081c;">
                        <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="20">
                            <path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.965 1.406-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738.098.119.112.224.083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.259 7.929-7.259 4.164 0 7.399 2.965 7.399 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.631-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146 1.124.347 2.317.535 3.554.535 6.607 0 11.985-5.365 11.985-11.987C23.97 5.39 18.592 0 12.017 0z"/>
                        </svg>
                    </div>
                    <span>Pinterest</span>
                </button>
                <button class="share-option-btn" id="share-sms">
                    <div class="share-icon-circle" style="background: #34C759;">
                        <i data-lucide="message-circle"></i>
                    </div>
                    <span>Messages</span>
                </button>
                <button class="share-option-btn" id="share-email">
                    <div class="share-icon-circle" style="background: #555555;">
                        <i data-lucide="mail"></i>
                    </div>
                    <span>Email</span>
                </button>
            </div>
        </div>
    </div>

    <div id="create-haven-modal" class="modal-overlay">
        <div class="modal-content onboarding-card" style="max-width: 550px;">
            <button class="close-modal" id="btn-close-haven-modal">
                <i data-lucide="x"></i>
            </button>
            <div class="step-header">
                <div class="step-icon-wrapper">
                    <i data-lucide="tent-tree"></i>
                </div>
                <h2 class="modal-title">Start a Haven</h2>
                <p class="modal-subtitle">Create a space for your community to orbit.</p>
            </div>

            <div class="input-group">
                <label>
                    <i data-lucide="at-sign" style="width:14px"></i>
                     Haven Handle (Required)
                </label>
                <input type="text" id="haven-handle" placeholder="art_collective" autocomplete="off" maxlength="24">
                <p id="haven-handle-msg" style="display:none; text-align:left; margin: -10px 0 15px 4px; font-size: 0.75rem; font-weight: 500;"></p>

                <label>
                    <i data-lucide="type" style="width:14px"></i>
                     Community Name
                </label>
                <input type="text" id="haven-name" placeholder="The Art Collective" maxlength="50">

                <label>
                    <i data-lucide="notebook-pen" style="width:14px"></i>
                     Description
                </label>
                <textarea id="haven-bio" placeholder="What is this space for?" maxlength="1000" style="min-height: 100px;"></textarea>

                <label>
                    <i data-lucide="palette" style="width:14px"></i>
                     Haven Banner (Optional)
                </label>
                <div class="banner-preview" id="haven-banner-preview" style="height: 100px; margin-bottom: 20px;">
                    <input type="file" id="haven-banner-upload" accept="image/*" hidden>
                    <button class="upload-btn banner-btn" id="btn-haven-banner-action">
                        <i data-lucide="image" id="icon-haven-banner"></i>
                    </button>
                </div>

                <label>
                    <i data-lucide="image" style="width:14px"></i>
                     Haven Icon
                </label>
                <div class="haven-icon-picker-box">
                    <div style="display: flex; gap: 16px; align-items: center;">
                        <div id="haven-icon-preview" style="width: 64px; height: 64px; border-radius: 16px; background: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 2px solid var(--border); overflow: hidden;">
                            <i id="preview-icon-glyph" data-lucide="tent-tree" style="width: 32px; height: 32px; color: white;"></i>
                            <img id="preview-icon-img" style="display: none; width: 100%; height: 100%; object-fit: cover;">
                        </div>
                        <div style="display: flex; gap: 8px; flex-wrap: wrap;">
                            <button class="edit-btn" id="btn-haven-icon-upload" style="padding: 6px 12px; font-size: 0.8rem;">Upload Image</button>
                            <button class="edit-btn" id="btn-haven-icon-pick" style="padding: 6px 12px; font-size: 0.8rem;">Pick Icon</button>
                        </div>
                    </div>
                    <input type="file" id="haven-icon-upload" accept="image/*" hidden>
                    <div id="glyph-selector" style="display: none;">
                        <div id="glyph-grid" style="display: grid; grid-template-columns: repeat(auto-fill, 42px); justify-content: space-between; gap: 8px; max-height: 180px; overflow-y: auto; padding-right: 5px; margin-bottom: 14px;"></div>
                        <div id="haven-color-presets" style="display: flex; flex-wrap: wrap; gap: 8px; padding: 5px; justify-content: flex-start;"></div>
                    </div>
                </div>
            </div>

            <button id="btn-save-haven" class="primary-btn" disabled style="margin-top: 30px;">Create Community</button>
        </div>
    </div>

    <div id="edit-haven-modal" class="modal-overlay">
        <div class="modal-content onboarding-card" style="max-width: 550px;">
            <button class="close-modal" id="btn-close-edit-haven">
                <i data-lucide="x"></i>
            </button>
            <div class="step-header">
                <div class="step-icon-wrapper">
                    <i data-lucide="edit-3"></i>
                </div>
                <h2 class="modal-title">Edit Haven</h2>
                <p class="modal-subtitle">Update your community's presence.</p>
            </div>

            <div class="input-group">
                <label>
                    <i data-lucide="at-sign" style="width:14px"></i>
                     Haven Handle (Required)
                </label>
                <input type="text" id="edit-haven-handle" placeholder="art_collective" autocomplete="off" maxlength="24">
                <p id="edit-haven-handle-msg" style="display:none; text-align:left; margin: -10px 0 15px 4px; font-size: 0.75rem; font-weight: 500;"></p>

                <label>
                    <i data-lucide="type" style="width:14px"></i>
                     Community Name
                </label>
                <input type="text" id="edit-haven-name" placeholder="Name">

                <label>
                    <i data-lucide="notebook-pen" style="width:14px"></i>
                     Description
                </label>
                <textarea id="edit-haven-bio" placeholder="Description" maxlength="1000" style="min-height: 100px;"></textarea>

                <div class="input-group" style="margin-top: 16px; padding: 14px 16px; background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 14px;">
                    <div style="display:flex; align-items:center; justify-content:space-between;">
                        <div style="display:flex; align-items:center; gap:10px;">
                            <div style="width:32px; height:32px; border-radius:10px; background:rgba(var(--accent-rgb),0.1); border:1px solid rgba(var(--accent-rgb),0.2); display:flex; align-items:center; justify-content:center; color:var(--accent); flex-shrink:0;">
                                <i data-lucide="message-circle" style="width:15px;height:15px;"></i>
                            </div>
                            <div>
                                <div style="font-size:0.88rem; font-weight:700;">Haven Chat</div>
                                <div style="font-size:0.74rem; color:var(--text-dim);">Let members chat in real time</div>
                            </div>
                        </div>
                        <label class="toggle-switch">
                            <input type="checkbox" id="edit-haven-chat-enabled">
                            <span class="toggle-slider"></span>
                        </label>
                    </div>
                </div>

                <label>
                    <i data-lucide="palette" style="width:14px"></i>
                     Haven Banner
                </label>
                <div class="banner-preview" id="edit-haven-banner-preview" style="height: 100px; margin-bottom: 20px;">
                    <input type="file" id="edit-haven-banner-upload" accept="image/*" hidden>
                    <button class="upload-btn banner-btn" id="btn-edit-haven-banner-action">
                        <i data-lucide="image" id="icon-edit-haven-banner"></i>
                    </button>
                </div>

                <label>
                    <i data-lucide="image" style="width:14px"></i>
                     Haven Icon
                </label>
                <div style="display: flex; flex-direction: column; gap: 12px; background: var(--glass); padding: 15px; border-radius: 20px; border: 1px solid var(--border);">
                    <div style="display: flex; gap: 16px; align-items: center;">
                        <div id="edit-haven-icon-preview" style="width: 64px; height: 64px; border-radius: 16px; background: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 2px solid var(--border); overflow: hidden;">
                            <i id="edit-preview-icon-glyph" data-lucide="tent-tree" style="width: 32px; height: 32px; color: white;"></i>
                            <img id="edit-preview-icon-img" style="display: none; width: 100%; height: 100%; object-fit: cover;">
                        </div>
                        <div style="display: flex; gap: 8px; flex-wrap: wrap;">
                            <button class="edit-btn" id="btn-edit-haven-icon-upload" style="padding: 6px 12px; font-size: 0.8rem;">Upload Image</button>
                            <button class="edit-btn" id="btn-edit-haven-icon-pick" style="padding: 6px 12px; font-size: 0.8rem;">Pick Icon</button>
                        </div>
                    </div>
                    <input type="file" id="edit-haven-icon-upload" accept="image/*" hidden>
                    <div id="edit-glyph-selector" style="display: none;">
                        <div id="edit-glyph-grid" style="display: grid; grid-template-columns: repeat(auto-fill, 42px); justify-content: space-between; gap: 8px; max-height: 180px; overflow-y: auto; padding-right: 5px; margin-bottom: 14px;"></div>
                        <div id="edit-haven-color-presets" style="display: flex; flex-wrap: wrap; gap: 8px; padding: 5px; justify-content: flex-start;"></div>
                    </div>
                </div>
            </div>

            <button id="btn-save-edit-haven" class="primary-btn" style="margin-top: 30px;">Save Changes</button>
        </div>
    </div>
    <div id="delete-account-modal" class="modal-overlay">
        <div class="modal-content auth-card" style="max-width: 440px;">
            <div style="display:flex; align-items:center; justify-content:center; width:64px; height:64px; border-radius:20px; background:rgba(255,70,70,0.1); border:1px solid rgba(255,70,70,0.3); margin: 0 auto 20px;">
                <i data-lucide="alert-triangle" style="color:#ff4646; width:32px; height:32px;"></i>
            </div>
            <h2 class="modal-title" style="color: #ff4646;">Delete account?</h2>
            <p class="modal-subtitle" style="text-align: left; line-height: 1.6; margin-bottom: 20px;">

                                This will permanently delete your account and all your data, including your posts, comments, profile, and Havens. 
                                
                <br>
                <br>
                <strong style="color:var(--text-main);">This action cannot be undone.</strong>
                 Your presence will be completely removed from the haven.
                            
            </p>

            <div class="input-group">
                <label style="font-size: 0.75rem; text-transform: uppercase; font-weight: 700; letter-spacing: 0.05em;">
                    Type 
                    <b>DELETE</b>
                     to confirm
                </label>
                <input type="text" id="delete-confirm-input" placeholder="DELETE" autocomplete="off" style="text-align: center; border-color: rgba(255,70,70,0.2);">
            </div>

            <div style="display:flex; gap:12px; margin-top:10px;">
                <button id="btn-cancel-account-delete" class="primary-btn" style="background:rgba(255,255,255,0.05); border:1px solid var(--border); color:var(--text-main); flex:1;">Cancel</button>
                <button id="btn-confirm-account-delete" class="primary-btn" disabled style="background:#ff4646; color:white; flex:1; opacity: 0.3;">Delete Forever</button>
            </div>
        </div>
    </div>
    <div id="profile-theme-modal" class="modal-overlay">
        <div class="modal-content onboarding-card ts-modal-shell" style="max-width:500px; padding:0; display:flex; flex-direction:column; max-height:90vh; overflow:hidden;">
            <div class="ts-modal-header">
                <div style="display:flex; align-items:center; gap:10px;">
                    <div class="step-icon-wrapper" style="width:36px;height:36px;flex-shrink:0;">
                        <i data-lucide="wand-sparkles"></i>
                    </div>
                    <div>
                        <h2 class="modal-title" style="margin:0; font-size:1.1rem;">Profile Theme</h2>
                        <p class="modal-subtitle" style="margin:0; font-size:0.75rem;">Visitors see this when they view your profile 🌙</p>
                    </div>
                </div>
                <button class="icon-btn" id="btn-close-profile-theme">
                    <i data-lucide="x"></i>
                </button>
            </div>

            <div class="ts-modal-body" id="pt-modal-body">

                <div style="display:flex; gap:8px; align-items:center; padding:10px 14px; background:rgba(var(--accent-rgb),0.07); border:1px solid rgba(var(--accent-rgb),0.18); border-radius:12px; margin-bottom:18px; font-size:0.8rem; color:var(--text-dim); line-height:1.45;">
                    <i data-lucide="info" style="width:16px;flex-shrink:0;color:var(--accent);"></i>
                    <span>
                        These settings affect what 
                        <b style="color:var(--text-main);">visitors see</b>
                         when they open your profile — not your own app theme. 
                        <span style="color:var(--accent); cursor:pointer;" id="pt-link-to-ts">Theme Studio</span>
                         controls your personal look.
                    </span>
                </div>

                <button id="btn-pt-match-my-theme" style="width:100%;margin-bottom:20px;padding:10px 16px;background:rgba(var(--accent-rgb),0.1);border:1px solid rgba(var(--accent-rgb),0.25);border-radius:12px;color:var(--accent);font-family:inherit;font-size:0.83rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all 0.2s ease;">
                    <i data-lucide="copy" style="width:15px;"></i>
                     Copy from my current Theme Studio
                                
                </button>

                <div class="ts-label">✨ Presets</div>
                <div id="pt-presets" class="ts-presets-grid"></div>

                <div class="ts-label">🌗 Colour Mode</div>
                <div class="ts-pills" id="pt-mode">
                    <button class="ts-pill" data-val="__default__">✨ Visitor's theme</button>
                    <button class="ts-pill" data-val="dark">🌑 Dark</button>
                    <button class="ts-pill" data-val="light">☀️ Light</button>
                    <button class="ts-pill" data-val="tinted">🎨 Tinted</button>
                    <button class="ts-pill" data-val="midnight">🌌 Midnight</button>
                    <button class="ts-pill" data-val="dim">🌙 Dim</button>
                </div>

                <div class="ts-label">🎨 Accent Colour</div>
                <div style="display:flex;align-items:center;gap:8px;margin-bottom:10px;">
                    <button class="ts-pill active" id="pt-accent-default-btn" data-val="__default__" style="white-space:nowrap;">✨ Visitor's theme</button>
                </div>
                <div id="pt-accent-palette" class="ts-accent-palette"></div>
                <div style="display:flex;align-items:center;gap:12px;margin-top:12px;">
                    <label style="font-size:0.8rem;color:var(--text-dim);display:flex;align-items:center;gap:6px;">
                        <i data-lucide="pipette" style="width:14px;"></i>
                         Custom
                                        
                    </label>
                    <input type="color" id="pt-custom-color" value="#795eaa" style="width:40px;height:32px;border:none;border-radius:8px;cursor:pointer;background:none;">
                </div>

                <div class="ts-label">🏛️ UI Style</div>
                <div class="ts-pills" id="pt-style">
                    <button class="ts-pill" data-val="__default__">✨ Visitor's theme</button>
                </div>
                <div id="pt-style-grid" class="ts-style-grid" style="margin-top:8px;"></div>

                <div class="ts-label">🔤 Font</div>
                <div class="ts-pills" id="pt-font">
                    <button class="ts-pill" data-val="__default__">✨ Visitor's theme</button>
                    <button class="ts-pill" data-val="space-grotesk">Space Grotesk</button>
                    <button class="ts-pill" data-val="inter">Inter</button>
                    <button class="ts-pill" data-val="sora">Sora</button>
                    <button class="ts-pill" data-val="outfit">Outfit</button>
                    <button class="ts-pill" data-val="dm-sans">DM Sans</button>
                    <button class="ts-pill" data-val="playfair">Playfair Display</button>
                    <button class="ts-pill" data-val="jetbrains">JetBrains Mono</button>
                    <button class="ts-pill" data-val="georgia">Georgia</button>
                    <button class="ts-pill" data-val="comic">Comic Neue</button>
                    <button class="ts-pill" data-val="lexend">Lexend</button>
                    <button class="ts-pill" data-val="montserrat">Montserrat</button>
                </div>

                <div class="ts-label">🃏 Card Style</div>
                <div class="ts-pills" id="pt-card">
                    <button class="ts-pill" data-val="__default__">✨ Visitor's theme</button>
                    <button class="ts-pill" data-val="default">Default</button>
                    <button class="ts-pill" data-val="ghost">Ghost</button>
                    <button class="ts-pill" data-val="bordered">Bordered</button>
                    <button class="ts-pill" data-val="floating">Floating</button>
                    <button class="ts-pill" data-val="flat">Flat</button>
                    <button class="ts-pill" data-val="neon">Neon</button>
                    <button class="ts-pill" data-val="glass">Glass</button>
                </div>

                <div class="ts-label">🌀 Background Animation</div>
                <div class="ts-pills" id="pt-anim">
                    <button class="ts-pill" data-val="__default__">✨ Visitor's theme</button>
                    <button class="ts-pill" data-val="none">None</button>
                    <button class="ts-pill" data-val="stars">✨ Stars</button>
                    <button class="ts-pill" data-val="rain">🌧️ Rain</button>
                    <button class="ts-pill" data-val="snow">❄️ Snow</button>
                    <button class="ts-pill" data-val="petals">🌸 Petals</button>
                    <button class="ts-pill" data-val="fireflies">🌿 Fireflies</button>
                    <button class="ts-pill" data-val="sparkles">✨ Sparkles</button>
                    <button class="ts-pill" data-val="confetti">🎉 Confetti</button>
                </div>

                <div class="ts-label">🖼️ Background Texture</div>
                <div class="ts-pills" id="pt-texture">
                    <button class="ts-pill" data-val="__default__">✨ Visitor's theme</button>
                    <button class="ts-pill" data-val="none">None</button>
                    <button class="ts-pill" data-val="grid">Grid</button>
                    <button class="ts-pill" data-val="dots">Dots</button>
                    <button class="ts-pill" data-val="lines">Lines</button>
                    <button class="ts-pill" data-val="topography">Topography</button>
                    <button class="ts-pill" data-val="noise">Noise</button>
                    <button class="ts-pill" data-val="paper">Paper</button>
                </div>

                <div class="ts-label">⚙️ Extras</div>
                <div class="ts-toggles">
                    <div class="ts-toggle-row">
                        <div>
                            <div class="ts-toggle-title">Glowing Accent</div>
                            <div class="ts-toggle-sub">Soft glow on buttons & active elements</div>
                        </div>
                        <label class="switch">
                            <input type="checkbox" id="pt-glow">
                            <span class="slider round"></span>
                        </label>
                    </div>
                    <div class="ts-toggle-row">
                        <div>
                            <div class="ts-toggle-title">Rainbow Mode</div>
                            <div class="ts-toggle-sub">Accent slowly cycles all colours 🌈</div>
                        </div>
                        <label class="switch">
                            <input type="checkbox" id="pt-rainbow">
                            <span class="slider round"></span>
                        </label>
                    </div>
                </div>

                <div style="display:flex;gap:10px;margin-top:28px;align-items:center;justify-content:space-between;">
                    <p style="font-size:0.72rem;color:var(--text-dim);opacity:0.6;margin:0;display:flex;align-items:center;gap:6px;">
                        <i data-lucide="check-circle" style="width:13px;color:var(--accent);"></i>
                        <span id="pt-save-status">Changes save automatically</span>
                    </p>
                    <button id="btn-clear-profile-theme" style="display:flex;align-items:center;gap:7px;padding:9px 16px;background:rgba(255,70,70,0.08);border:1px solid rgba(255,70,70,0.25);border-radius:10px;color:#ff6b6b;font-family:inherit;font-size:0.82rem;font-weight:600;cursor:pointer;transition:all 0.2s ease;">
                        <i data-lucide="trash-2" style="width:14px;height:14px;"></i>
                         Remove theme
                                        
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div id="welfare-modal" style="display:none;" class="modal-overlay">
        <div class="modal-box welfare-modal-box" style="max-width:520px; max-height:88vh; overflow-y:auto; padding:0; border-radius:28px;">

            <div style="background: linear-gradient(135deg, rgba(121,94,170,0.35) 0%, rgba(255,105,135,0.25) 100%); padding: 32px 28px 24px; border-radius: 28px 28px 0 0; text-align:center; position:relative;">
                <button onclick="closeWelfareModal()" style="position:absolute;top:16px;right:16px;background:rgba(255,255,255,0.08);border:none;border-radius:50%;width:32px;height:32px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-dim);">
                    <i data-lucide="x" style="width:15px;height:15px;"></i>
                </button>
                <div style="width:64px;height:64px;background:rgba(255,255,255,0.1);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;border:1px solid rgba(255,255,255,0.15);">
                    <i data-lucide="heart" style="width:28px;height:28px;color:#ff6b8a;"></i>
                </div>
                <h2 style="font-size:1.3rem;font-weight:800;margin-bottom:8px;">We're thinking of you 💜</h2>
                <p style="color:var(--text-dim);font-size:0.9rem;line-height:1.6;max-width:360px;margin:0 auto;">
                                Someone on the Lunarhaven team reached out because they genuinely care. You don't have to be going through anything — but if you are, we want you to know you're not alone.
                            </p>
            </div>

            <div style="padding:24px 28px 28px;">

                <div style="background:linear-gradient(135deg,rgba(121,94,170,0.15),rgba(255,105,135,0.1));border:1px solid rgba(121,94,170,0.25);border-radius:16px;padding:16px 18px;margin-bottom:24px;text-align:center;">
                    <p style="font-size:0.95rem;font-weight:700;margin:0 0 6px;">You are allowed to not be okay.</p>
                    <p style="font-size:0.85rem;color:var(--text-dim);margin:0;line-height:1.6;">Struggling doesn't make you weak. Asking for help is one of the bravest things a person can do. This community is glad you're here.</p>
                </div>

                <div style="margin-bottom:24px;">
                    <h3 style="font-size:0.85rem;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:14px;">Things that can help right now</h3>
                    <div style="display:grid;gap:10px;">
                        <div style="background:var(--glass);border:1px solid var(--border);border-radius:14px;padding:14px 16px;display:flex;gap:12px;align-items:flex-start;">
                            <span style="font-size:1.2rem;">🌬️</span>
                            <div>
                                <b style="font-size:0.9rem;">Box breathing</b>
                                <p style="color:var(--text-dim);font-size:0.85rem;margin:4px 0 0;line-height:1.5;">Breathe in for 4 seconds, hold for 4, out for 4, hold for 4. Repeat 4 times. It genuinely slows your nervous system down.</p>
                            </div>
                        </div>
                        <div style="background:var(--glass);border:1px solid var(--border);border-radius:14px;padding:14px 16px;display:flex;gap:12px;align-items:flex-start;">
                            <span style="font-size:1.2rem;">📱</span>
                            <div>
                                <b style="font-size:0.9rem;">Reach out to one person</b>
                                <p style="color:var(--text-dim);font-size:0.85rem;margin:4px 0 0;line-height:1.5;">Text or call someone you trust. You don't have to explain everything — even "hey, can we talk?" is enough.</p>
                            </div>
                        </div>
                        <div style="background:var(--glass);border:1px solid var(--border);border-radius:14px;padding:14px 16px;display:flex;gap:12px;align-items:flex-start;">
                            <span style="font-size:1.2rem;">🪴</span>
                            <div>
                                <b style="font-size:0.9rem;">Ground yourself</b>
                                <p style="color:var(--text-dim);font-size:0.85rem;margin:4px 0 0;line-height:1.5;">Name 5 things you can see, 4 you can touch, 3 you can hear, 2 you can smell, 1 you can taste. It pulls your mind back to the present moment.</p>
                            </div>
                        </div>
                        <div style="background:var(--glass);border:1px solid var(--border);border-radius:14px;padding:14px 16px;display:flex;gap:12px;align-items:flex-start;">
                            <span style="font-size:1.2rem;">🚶</span>
                            <div>
                                <b style="font-size:0.9rem;">Move your body</b>
                                <p style="color:var(--text-dim);font-size:0.85rem;margin:4px 0 0;line-height:1.5;">A 10 minute walk — even around your home — can shift a spiral. No pressure to be productive, just move.</p>
                            </div>
                        </div>
                        <div style="background:var(--glass);border:1px solid var(--border);border-radius:14px;padding:14px 16px;display:flex;gap:12px;align-items:flex-start;">
                            <span style="font-size:1.2rem;">✍️</span>
                            <div>
                                <b style="font-size:0.9rem;">Write it out</b>
                                <p style="color:var(--text-dim);font-size:0.85rem;margin:4px 0 0;line-height:1.5;">You don't need to write well. Just open notes and dump whatever is in your head. Getting it out of your mind and onto a page can take real weight off.</p>
                            </div>
                        </div>
                        <div style="background:var(--glass);border:1px solid var(--border);border-radius:14px;padding:14px 16px;display:flex;gap:12px;align-items:flex-start;">
                            <span style="font-size:1.2rem;">💧</span>
                            <div>
                                <b style="font-size:0.9rem;">Basic care first</b>
                                <p style="color:var(--text-dim);font-size:0.85rem;margin:4px 0 0;line-height:1.5;">Drink some water. Eat something small. When did you last sleep properly? Your body and mind are connected — small physical acts of care matter more than they sound.</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div style="margin-bottom:24px;">
                    <h3 style="font-size:0.85rem;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:14px;">Prefer to chat online? 💬</h3>
                    <div style="display:grid;gap:8px;">
                        <a href="https://www.crisistextline.org" target="_blank" rel="noopener" style="background:var(--glass);border:1px solid var(--border);border-radius:12px;padding:13px 16px;display:flex;align-items:center;justify-content:space-between;text-decoration:none;color:var(--text-main);">
                            <div>
                                <div style="font-size:0.88rem;font-weight:700;">Crisis Text Line</div>
                                <div style="font-size:0.78rem;color:var(--text-dim);margin-top:2px;">Text-based crisis support — US, UK, CA, IE</div>
                            </div>
                            <span style="font-size:0.78rem;color:var(--accent);font-weight:600;">Open →</span>
                        </a>
                        <a href="https://www.7cups.com" target="_blank" rel="noopener" style="background:var(--glass);border:1px solid var(--border);border-radius:12px;padding:13px 16px;display:flex;align-items:center;justify-content:space-between;text-decoration:none;color:var(--text-main);">
                            <div>
                                <div style="font-size:0.88rem;font-weight:700;">7 Cups</div>
                                <div style="font-size:0.78rem;color:var(--text-dim);margin-top:2px;">Free anonymous chat with trained listeners, worldwide</div>
                            </div>
                            <span style="font-size:0.78rem;color:var(--accent);font-weight:600;">Open →</span>
                        </a>
                        <a href="https://www.befrienders.org" target="_blank" rel="noopener" style="background:var(--glass);border:1px solid var(--border);border-radius:12px;padding:13px 16px;display:flex;align-items:center;justify-content:space-between;text-decoration:none;color:var(--text-main);">
                            <div>
                                <div style="font-size:0.88rem;font-weight:700;">Befrienders Worldwide</div>
                                <div style="font-size:0.78rem;color:var(--text-dim);margin-top:2px;">Emotional support in 32+ countries</div>
                            </div>
                            <span style="font-size:0.78rem;color:var(--accent);font-weight:600;">Open →</span>
                        </a>
                        <a href="https://www.talklife.com" target="_blank" rel="noopener" style="background:var(--glass);border:1px solid var(--border);border-radius:12px;padding:13px 16px;display:flex;align-items:center;justify-content:space-between;text-decoration:none;color:var(--text-main);">
                            <div>
                                <div style="font-size:0.88rem;font-weight:700;">TalkLife</div>
                                <div style="font-size:0.78rem;color:var(--text-dim);margin-top:2px;">Peer support community for mental health, global</div>
                            </div>
                            <span style="font-size:0.78rem;color:var(--accent);font-weight:600;">Open →</span>
                        </a>
                    </div>
                </div>

                <div>
                    <h3 style="font-size:0.85rem;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:14px;">Crisis lines &amp; resources</h3>
                    <div style="display:grid;gap:8px;">

                        <div style="background:rgba(121,94,170,0.08);border:1px solid rgba(121,94,170,0.2);border-radius:12px;padding:12px 14px;">
                            <div style="font-size:0.75rem;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:8px;">🌍 Worldwide</div>
                            <a href="https://findahelpline.com" target="_blank" rel="noopener" style="display:flex;align-items:center;justify-content:space-between;color:var(--text-main);text-decoration:none;padding:6px 0;border-bottom:1px solid var(--border);">
                                <span style="font-size:0.88rem;font-weight:600;">findahelpline.com</span>
                                <span style="font-size:0.78rem;color:var(--text-dim);">Find your local line →</span>
                            </a>
                            <a href="https://www.iasp.info/resources/Crisis_Centres/" target="_blank" rel="noopener" style="display:flex;align-items:center;justify-content:space-between;color:var(--text-main);text-decoration:none;padding:6px 0;">
                                <span style="font-size:0.88rem;font-weight:600;">IASP Crisis Centres</span>
                                <span style="font-size:0.78rem;color:var(--text-dim);">Global directory →</span>
                            </a>
                        </div>

                        <div style="background:var(--glass);border:1px solid var(--border);border-radius:12px;padding:12px 14px;">
                            <div style="font-size:0.75rem;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:8px;">🇺🇸 United States</div>
                            <div style="display:flex;align-items:center;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--border);">
                                <span style="font-size:0.88rem;font-weight:600;">988 Suicide &amp; Crisis Lifeline</span>
                                <a href="tel:988" style="font-size:0.85rem;font-weight:700;color:var(--accent);text-decoration:none;">Call 988</a>
                            </div>
                            <div style="display:flex;align-items:center;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--border);">
                                <span style="font-size:0.88rem;font-weight:600;">Crisis Text Line</span>
                                <span style="font-size:0.82rem;color:var(--text-dim);">Text HOME to 741741</span>
                            </div>
                            <div style="display:flex;align-items:center;justify-content:space-between;padding:5px 0;">
                                <span style="font-size:0.88rem;font-weight:600;">NAMI Helpline</span>
                                <a href="tel:18009506264" style="font-size:0.85rem;font-weight:700;color:var(--accent);text-decoration:none;">1-800-950-6264</a>
                            </div>
                        </div>

                        <div style="background:var(--glass);border:1px solid var(--border);border-radius:12px;padding:12px 14px;">
                            <div style="font-size:0.75rem;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:8px;">🇬🇧 United Kingdom</div>
                            <div style="display:flex;align-items:center;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--border);">
                                <span style="font-size:0.88rem;font-weight:600;">Samaritans</span>
                                <a href="tel:116123" style="font-size:0.85rem;font-weight:700;color:var(--accent);text-decoration:none;">116 123</a>
                            </div>
                            <div style="display:flex;align-items:center;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--border);">
                                <span style="font-size:0.88rem;font-weight:600;">PAPYRUS (under 35)</span>
                                <a href="tel:08000684141" style="font-size:0.85rem;font-weight:700;color:var(--accent);text-decoration:none;">0800 068 4141</a>
                            </div>
                            <div style="display:flex;align-items:center;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--border);">
                                <span style="font-size:0.88rem;font-weight:600;">Mind Infoline</span>
                                <a href="tel:03001233393" style="font-size:0.85rem;font-weight:700;color:var(--accent);text-decoration:none;">0300 123 3393</a>
                            </div>
                            <div style="display:flex;align-items:center;justify-content:space-between;padding:5px 0;">
                                <span style="font-size:0.88rem;font-weight:600;">Shout (text)</span>
                                <span style="font-size:0.82rem;color:var(--text-dim);">Text SHOUT to 85258</span>
                            </div>
                        </div>

                        <div style="background:var(--glass);border:1px solid var(--border);border-radius:12px;padding:12px 14px;">
                            <div style="font-size:0.75rem;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:8px;">🇦🇺 Australia</div>
                            <div style="display:flex;align-items:center;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--border);">
                                <span style="font-size:0.88rem;font-weight:600;">Lifeline</span>
                                <a href="tel:131114" style="font-size:0.85rem;font-weight:700;color:var(--accent);text-decoration:none;">13 11 14</a>
                            </div>
                            <div style="display:flex;align-items:center;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--border);">
                                <span style="font-size:0.88rem;font-weight:600;">Beyond Blue</span>
                                <a href="tel:1300224636" style="font-size:0.85rem;font-weight:700;color:var(--accent);text-decoration:none;">1300 22 4636</a>
                            </div>
                            <div style="display:flex;align-items:center;justify-content:space-between;padding:5px 0;">
                                <span style="font-size:0.88rem;font-weight:600;">Kids Helpline (up to 25)</span>
                                <a href="tel:1800551800" style="font-size:0.85rem;font-weight:700;color:var(--accent);text-decoration:none;">1800 55 1800</a>
                            </div>
                        </div>

                        <div style="background:var(--glass);border:1px solid var(--border);border-radius:12px;padding:12px 14px;">
                            <div style="font-size:0.75rem;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:8px;">🇨🇦 Canada</div>
                            <div style="display:flex;align-items:center;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--border);">
                                <span style="font-size:0.88rem;font-weight:600;">Talk Suicide Canada</span>
                                <a href="tel:18334564566" style="font-size:0.85rem;font-weight:700;color:var(--accent);text-decoration:none;">1-833-456-4566</a>
                            </div>
                            <div style="display:flex;align-items:center;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--border);">
                                <span style="font-size:0.88rem;font-weight:600;">Crisis Text Line CA</span>
                                <span style="font-size:0.82rem;color:var(--text-dim);">Text HOME to 686868</span>
                            </div>
                            <div style="display:flex;align-items:center;justify-content:space-between;padding:5px 0;">
                                <span style="font-size:0.88rem;font-weight:600;">Kids Help Phone</span>
                                <a href="tel:18006686868" style="font-size:0.85rem;font-weight:700;color:var(--accent);text-decoration:none;">1-800-668-6868</a>
                            </div>
                        </div>

                        <div style="background:var(--glass);border:1px solid var(--border);border-radius:12px;padding:12px 14px;">
                            <div style="font-size:0.75rem;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:8px;">🇮🇳 India</div>
                            <div style="display:flex;align-items:center;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--border);">
                                <span style="font-size:0.88rem;font-weight:600;">iCall</span>
                                <a href="tel:09152987821" style="font-size:0.85rem;font-weight:700;color:var(--accent);text-decoration:none;">9152987821</a>
                            </div>
                            <div style="display:flex;align-items:center;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--border);">
                                <span style="font-size:0.88rem;font-weight:600;">Vandrevala Foundation</span>
                                <a href="tel:18602662345" style="font-size:0.85rem;font-weight:700;color:var(--accent);text-decoration:none;">1860-2662-345</a>
                            </div>
                            <div style="display:flex;align-items:center;justify-content:space-between;padding:5px 0;">
                                <span style="font-size:0.88rem;font-weight:600;">Snehi</span>
                                <a href="tel:914424640050" style="font-size:0.85rem;font-weight:700;color:var(--accent);text-decoration:none;">044-24640050</a>
                            </div>
                        </div>

                        <div style="background:var(--glass);border:1px solid var(--border);border-radius:12px;padding:12px 14px;">
                            <div style="font-size:0.75rem;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:8px;">🇩🇪 Germany</div>
                            <div style="display:flex;align-items:center;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--border);">
                                <span style="font-size:0.88rem;font-weight:600;">Telefonseelsorge</span>
                                <a href="tel:08001110111" style="font-size:0.85rem;font-weight:700;color:var(--accent);text-decoration:none;">0800 111 0 111</a>
                            </div>
                            <div style="display:flex;align-items:center;justify-content:space-between;padding:5px 0;">
                                <span style="font-size:0.88rem;font-weight:600;">Telefonseelsorge (alt)</span>
                                <a href="tel:08001110222" style="font-size:0.85rem;font-weight:700;color:var(--accent);text-decoration:none;">0800 111 0 222</a>
                            </div>
                        </div>

                        <div style="background:var(--glass);border:1px solid var(--border);border-radius:12px;padding:12px 14px;">
                            <div style="font-size:0.75rem;font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:8px;">🇳🇿 New Zealand</div>
                            <div style="display:flex;align-items:center;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--border);">
                                <span style="font-size:0.88rem;font-weight:600;">Lifeline NZ</span>
                                <a href="tel:0800543354" style="font-size:0.85rem;font-weight:700;color:var(--accent);text-decoration:none;">0800 543 354</a>
                            </div>
                            <div style="display:flex;align-items:center;justify-content:space-between;padding:5px 0;">
                                <span style="font-size:0.88rem;font-weight:600;">Need to Talk?</span>
                                <a href="tel:1737" style="font-size:0.85rem;font-weight:700;color:var(--accent);text-decoration:none;">Call or text 1737</a>
                            </div>
                        </div>

                    </div>

                    <p style="font-size:0.8rem;color:var(--text-dim);text-align:center;margin-top:16px;line-height:1.5;">

                                            Not listed here? 
                        <a href="https://findahelpline.com" target="_blank" rel="noopener" style="color:var(--accent);">findahelpline.com</a>
                         covers 100+ countries. You deserve support wherever you are. 💜
                                        
                    </p>
                </div>

                <button onclick="closeWelfareModal()" style="width:100%;margin-top:20px;padding:14px;background:var(--glass);border:1px solid var(--border);border-radius:14px;color:var(--text-main);font-family:var(--ts-font),sans-serif;font-size:0.9rem;font-weight:600;cursor:pointer;">
                                I've read this, thank you 💜
                            </button>
            </div>
        </div>
    </div>
    <div id="dm-request-modal" class="modal-overlay">
    <div class="modal-content auth-card" style="max-width:420px;">
        <button class="close-modal" id="btn-close-dm-request">
            <i data-lucide="x"></i>
        </button>
        <div style="display:flex; align-items:center; gap:14px; margin-bottom:16px;">
            <img id="dm-request-avatar" src="user.png" style="width:56px; height:56px; border-radius:50%; object-fit:cover; border:2px solid var(--border);">
            <div>
                <h3 id="dm-request-name" style="font-size:1.1rem; font-weight:700;">User</h3>
                <p id="dm-request-handle" style="color:var(--text-dim); font-size:0.85rem;">@user</p>
            </div>
        </div>
        <div style="background:rgba(255,255,255,0.04); border-radius:16px; padding:16px; margin-bottom:20px;">
            <p style="font-size:0.75rem; color:var(--text-dim); text-transform:uppercase; font-weight:700; letter-spacing:0.05em; margin-bottom:4px;">Message</p>
            <p id="dm-request-message" style="font-size:0.95rem; line-height:1.5;">Hey, I saw your post...</p>
        </div>
        <div style="display:flex; gap:10px;">
            <button id="btn-accept-request" class="primary-btn" style="flex:1;">Accept</button>
            <button id="btn-decline-request" class="primary-btn" style="flex:1; background:rgba(255,70,70,0.1); border:1px solid rgba(255,70,70,0.3); color:#ff4646;">Decline</button>
        </div>
        <button id="btn-block-request" style="margin-top:12px; background:none; border:none; color:var(--text-dim); font-size:0.8rem; cursor:pointer; font-family:inherit; opacity:0.6; transition:0.2s;" onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='0.6'">
            <i data-lucide="ban" style="width:14px; vertical-align:middle;"></i> Block sender
        </button>
    </div>
</div>
    <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>
    <script type="module">
    import { Picker, init } from 'https://cdn.jsdelivr.net/npm/emoji-mart@5/dist/module.js';

    // ── Custom Emojis ──────────────────────────────────────────────
    const CUSTOM_EMOJIS = [
    {
        id: 'lunarhaven_custom',
        name: 'Lunarhaven',

        emojis: [
        {
            id: 'lunarhaven',
            name: 'Lunarhaven',
            keywords: ['lunarhaven', 'logo', 'moon'],
            skins: [{
                src: 'logo-rounded.png'
            }]
        },
        {
            id: 'meepangel',
            name: 'Meep Angel',
            keywords: ['meep', 'angel'],
            skins: [{
                src: 'emojis/meepangel.png'
            }]
        },
        {
            id: 'meepannoy',
            name: 'Meep Annoy',
            keywords: ['meep', 'annoy'],
            skins: [{
                src: 'emojis/meepannoy.png'
            }]
        },
        {
            id: 'meepbleh',
            name: 'Meep Bleh',
            keywords: ['meep', 'bleh'],
            skins: [{
                src: 'emojis/meepbleh.png'
            }]
        },
        {
            id: 'meepblush',
            name: 'Meep Blush',
            keywords: ['meep', 'blush'],
            skins: [{
                src: 'emojis/meepblush.png'
            }]
        },
        {
            id: 'meepcool',
            name: 'Meep Cool',
            keywords: ['meep', 'cool'],
            skins: [{
                src: 'emojis/meepcool.png'
            }]
        },
        {
            id: 'meepdazzle',
            name: 'Meep Dazzle',
            keywords: ['meep', 'dazzle', 'sparkle', 'stars'],
            skins: [{
                src: 'emojis/meepdazzle.png'
            }]
        },
        {
            id: 'meepdizzy',
            name: 'Meep Dizzy',
            keywords: ['meep', 'dizzy'],
            skins: [{
                src: 'emojis/meepdizzy.png'
            }]
        },
        {
            id: 'meepdown',
            name: 'Meep Down',
            keywords: ['meep', 'down'],
            skins: [{
                src: 'emojis/meepdown.png'
            }]
        },
        {
            id: 'meepeyeroll',
            name: 'Meep Eyeroll',
            keywords: ['meep', 'eyeroll'],
            skins: [{
                src: 'emojis/meepeyeroll.png'
            }]
        },
        {
            id: 'meepgrin',
            name: 'Meep Grin',
            keywords: ['meep', 'grin'],
            skins: [{
                src: 'emojis/meepgrin.png'
            }]
        },
        {
            id: 'meephappy',
            name: 'Meep Happy',
            keywords: ['meep', 'happy'],
            skins: [{
                src: 'emojis/meephappy.png'
            }]
        },
        {
            id: 'meephide',
            name: 'Meep Hide',
            keywords: ['meep', 'hide'],
            skins: [{
                src: 'emojis/meephide.png'
            }]
        },
        {
            id: 'meepjoy',
            name: 'Meep Joy',
            keywords: ['meep', 'joy'],
            skins: [{
                src: 'emojis/meepjoy.png'
            }]
        },
        {
            id: 'meepkiss',
            name: 'Meep Kiss',
            keywords: ['meep', 'kiss'],
            skins: [{
                src: 'emojis/meepkiss.png'
            }]
        },
        {
            id: 'meeplawl',
            name: 'Meep Lawl',
            keywords: ['meep', 'lawl', 'lol'],
            skins: [{
                src: 'emojis/meeplawl.png'
            }]
        },
        {
            id: 'meeplove',
            name: 'Meep Love',
            keywords: ['meep', 'love'],
            skins: [{
                src: 'emojis/meeplove.png'
            }]
        },
        {
            id: 'meepnerd',
            name: 'Meep Nerd',
            keywords: ['meep', 'nerd'],
            skins: [{
                src: 'emojis/meepnerd.png'
            }]
        },
        {
            id: 'meepsad',
            name: 'Meep Sad',
            keywords: ['meep', 'sad'],
            skins: [{
                src: 'emojis/meepsad.png'
            }]
        },
        {
            id: 'meepscared',
            name: 'Meep Scared',
            keywords: ['meep', 'scared'],
            skins: [{
                src: 'emojis/meepscared.png'
            }]
        },
        {
            id: 'meepsilly',
            name: 'Meep Silly',
            keywords: ['meep', 'silly'],
            skins: [{
                src: 'emojis/meepsilly.png'
            }]
        },
        {
            id: 'meepsmile',
            name: 'Meep Smile',
            keywords: ['meep', 'smile'],
            skins: [{
                src: 'emojis/meepsmile.png'
            }]
        },
        {
            id: 'meepsob',
            name: 'Meep Sob',
            keywords: ['meep', 'sob', 'cry'],
            skins: [{
                src: 'emojis/meepsob.png'
            }]
        },
        {
            id: 'meepsorry',
            name: 'Meep Sorry',
            keywords: ['meep', 'sorry'],
            skins: [{
                src: 'emojis/meepsorry.png'
            }]
        },
        {
            id: 'meepstarstruck',
            name: 'Meep Starstruck',
            keywords: ['meep', 'starstruck'],
            skins: [{
                src: 'emojis/meepstarstruck.png'
            }]
        },
        {
            id: 'meepsurprised',
            name: 'Meep Surprised',
            keywords: ['meep', 'surprised'],
            skins: [{
                src: 'emojis/meepsurprised.png'
            }]
        },
        {
            id: 'meepunamused',
            name: 'Meep Unamused',
            keywords: ['meep', 'unamused'],
            skins: [{
                src: 'emojis/meepunamused.png'
            }]
        },
        {
            id: 'meepvomit',
            name: 'Meep Vomit',
            keywords: ['meep', 'vomit'],
            skins: [{
                src: 'emojis/meepvomit.png'
            }]
        },
        {
            id: 'meepwink',
            name: 'Meep Wink',
            keywords: ['meep', 'wink'],
            skins: [{
                src: 'emojis/meepwink.png'
            }]
        },
        {
            id: 'meepwoops',
            name: 'Meep Woops',
            keywords: ['meep', 'woops', 'oops'],
            skins: [{
                src: 'emojis/meepwoops.png'
            }]
        },
        {
            id: 'meepworried',
            name: 'Meep Worried',
            keywords: ['meep', 'worried'],
            skins: [{
                src: 'emojis/meepworried.png'
            }]
        },
        {
            id: 'meepzombie',
            name: 'Meep Zombie',
            keywords: ['meep', 'zombie'],
            skins: [{
                src: 'emojis/meepzombie.png'
            }]
        },
        // Blobs - Happy / Positive
        {
            id: 'blobsmile',
            name: 'Blob Smile',
            keywords: ['blob', 'smile', 'happy'],
            skins: [{
                src: 'emojis/smiling-face-with-open-mouth-and-smiling-eyes-3.png'
            }]
        },
        {
            id: 'bloblaugh',
            name: 'Blob Laugh',
            keywords: ['blob', 'laugh', 'lol', 'haha'],
            skins: [{
                src: 'emojis/smiling-face-with-open-mouth-and-tightly-closed-eyes-5.png'
            }]
        },
        {
            id: 'blobsweatysmile',
            name: 'Blob Sweaty Smile',
            keywords: ['blob', 'sweat', 'smile', 'nervous'],
            skins: [{
                src: 'emojis/smiling-face-with-open-mouth-and-cold-sweat-6.png'
            }]
        },
        {
            id: 'blobslightsmile',
            name: 'Blob Slight Smile',
            keywords: ['blob', 'smile', 'slightly'],
            skins: [{
                src: 'emojis/slightly-smiling-face-9.png'
            }]
        },
        {
            id: 'blobwink',
            name: 'Blob Wink',
            keywords: ['blob', 'wink', 'playful'],
            skins: [{
                src: 'emojis/winking-face-11.png'
            }]
        },
        {
            id: 'blobhappy',
            name: 'Blob Happy',
            keywords: ['blob', 'happy', 'grin'],
            skins: [{
                src: 'emojis/smiling-face-with-smiling-eyes-12.png'
            }]
        },
        {
            id: 'blobangel',
            name: 'Blob Angel',
            keywords: ['blob', 'angel', 'halo', 'innocent'],
            skins: [{
                src: 'emojis/smiling-face-with-halo-13.png'
            }]
        },
        // Blobs - Love / Affection
        {
            id: 'blobhearteyes',
            name: 'Blob Heart Eyes',
            keywords: ['blob', 'love', 'heart', 'eyes'],
            skins: [{
                src: 'emojis/smiling-face-with-heart-shaped-eyes-14.png'
            }]
        },
        {
            id: 'blobkiss',
            name: 'Blob Kiss',
            keywords: ['blob', 'kiss', 'love'],
            skins: [{
                src: 'emojis/face-throwing-a-kiss-15.png'
            }]
        },
        {
            id: 'blobkissclosed',
            name: 'Blob Kiss Closed Eyes',
            keywords: ['blob', 'kiss', 'closed', 'eyes'],
            skins: [{
                src: 'emojis/kissing-face-with-closed-eyes-18.png'
            }]
        },
        {
            id: 'blobhug',
            name: 'Blob Hug',
            keywords: ['blob', 'hug', 'warm'],
            skins: [{
                src: 'emojis/hugging-face-25.png'
            }]
        },
        // Blobs - Playful / Eating
        {
            id: 'blobyum',
            name: 'Blob Yum',
            keywords: ['blob', 'yum', 'delicious', 'food', 'tongue'],
            skins: [{
                src: 'emojis/face-savouring-delicious-food-20.png'
            }]
        },
        {
            id: 'blobmoney',
            name: 'Blob Money',
            keywords: ['blob', 'money', 'rich', 'cash'],
            skins: [{
                src: 'emojis/money-mouth-face-24.png'
            }]
        },
        // Blobs - Neutral / Thinking / Skeptical
        {
            id: 'blobthink',
            name: 'Blob Think',
            keywords: ['blob', 'think', 'hmm'],
            skins: [{
                src: 'emojis/thinking-face-26.png'
            }]
        },
        {
            id: 'blobzipper',
            name: 'Blob Zipper',
            keywords: ['blob', 'zipper', 'quiet', 'shh'],
            skins: [{
                src: 'emojis/zipper-mouth-face-27.png'
            }]
        },
        {
            id: 'blobexpressionless',
            name: 'Blob Expressionless',
            keywords: ['blob', 'expressionless', 'flat', 'meh'],
            skins: [{
                src: 'emojis/expressionless-face-29.png'
            }]
        },
        {
            id: 'blobnomouth',
            name: 'Blob No Mouth',
            keywords: ['blob', 'no', 'mouth', 'silent'],
            skins: [{
                src: 'emojis/face-without-mouth-30.png'
            }]
        },
        {
            id: 'blobunamused',
            name: 'Blob Unamused',
            keywords: ['blob', 'unamused', 'bored', 'meh'],
            skins: [{
                src: 'emojis/unamused-face-32.png'
            }]
        },
        {
            id: 'blobeyeroll',
            name: 'Blob Eyeroll',
            keywords: ['blob', 'eyeroll', 'roll', 'eyes'],
            skins: [{
                src: 'emojis/face-with-rolling-eyes-33.png'
            }]
        },
        {
            id: 'blobcool',
            name: 'Blob Cool',
            keywords: ['blob', 'cool', 'sunglasses', 'swag'],
            skins: [{
                src: 'emojis/smiling-face-with-sunglasses-48.png'
            }]
        },
        // Blobs - Worried / Surprised / Fear
        {
            id: 'blobgrimace',
            name: 'Blob Grimace',
            keywords: ['blob', 'grimace', 'awkward', 'eek'],
            skins: [{
                src: 'emojis/grimacing-face-34.png'
            }]
        },
        {
            id: 'blobsurprised',
            name: 'Blob Surprised',
            keywords: ['blob', 'surprised', 'wow', 'open', 'mouth'],
            skins: [{
                src: 'emojis/face-with-open-mouth-54.png'
            }]
        },
        {
            id: 'blobblush',
            name: 'Blob Blush',
            keywords: ['blob', 'blush', 'flushed', 'embarrassed'],
            skins: [{
                src: 'emojis/flushed-face-57.png'
            }]
        },
        {
            id: 'blobscared',
            name: 'Blob Scared',
            keywords: ['blob', 'scared', 'fear', 'scream'],
            skins: [{
                src: 'emojis/face-screaming-in-fear-65.png'
            }]
        },
        {
            id: 'blobcoldsweat',
            name: 'Blob Cold Sweat',
            keywords: ['blob', 'sweat', 'cold', 'nervous'],
            skins: [{
                src: 'emojis/face-with-cold-sweat-69.png'
            }]
        },
        // Blobs - Sad / Angry
        {
            id: 'blobfrown',
            name: 'Blob Frown',
            keywords: ['blob', 'frown', 'sad'],
            skins: [{
                src: 'emojis/slightly-frowning-face-52.png'
            }]
        },
        {
            id: 'blobtired',
            name: 'Blob Tired',
            keywords: ['blob', 'tired', 'sleepy', 'exhausted'],
            skins: [{
                src: 'emojis/tired-face-71.png'
            }]
        },
        {
            id: 'blobtriumph',
            name: 'Blob Triumph',
            keywords: ['blob', 'triumph', 'proud', 'angry'],
            skins: [{
                src: 'emojis/face-with-look-of-triumph-72.png'
            }]
        },
        {
            id: 'blobangry',
            name: 'Blob Angry',
            keywords: ['blob', 'angry', 'pout', 'mad'],
            skins: [{
                src: 'emojis/pouting-face-73.png'
            }]
        },
        {
            id: 'blobcry',
            name: 'Blob Cry',
            keywords: ['blob', 'cry', 'sad', 'sob'],
            skins: [{
                src: 'emojis/loudly-crying-face-64.png'
            }]
        },
        // Blobs - Sick / Injured
        {
            id: 'blobmask',
            name: 'Blob Mask',
            keywords: ['blob', 'mask', 'sick', 'doctor'],
            skins: [{
                src: 'emojis/face-with-medical-mask-41.png'
            }]
        },
        {
            id: 'blobsick',
            name: 'Blob Sick',
            keywords: ['blob', 'sick', 'thermometer', 'fever'],
            skins: [{
                src: 'emojis/face-with-thermometer-42.png'
            }]
        },
        {
            id: 'blobnausea',
            name: 'Blob Nausea',
            keywords: ['blob', 'nausea', 'vomit', 'green', 'sick'],
            skins: [{
                src: 'emojis/nauseated-face-44.png'
            }]
        }
        ]
    }
    ];

    // Filter custom emojis to exclude Facebook Meeps on Android Standalone
    const IS_ANDROID_APP = window.matchMedia('(display-mode: standalone)').matches && /android/i.test(navigator.userAgent);
    if (IS_ANDROID_APP) {
        CUSTOM_EMOJIS[0].emojis = CUSTOM_EMOJIS[0].emojis.filter(e => !e.id.startsWith('meep'));
        document.body.classList.add('is-android-app');
    }

    // Init emoji-mart with custom data so shortcodes resolve
    init({
        custom: CUSTOM_EMOJIS
    });

    // Expose custom emoji list so script.js can use it
    window.LH_CUSTOM_EMOJIS = CUSTOM_EMOJIS[0].emojis;

    // ── Picker state ───────────────────────────────────────────────
    let picker = null;
    let pickerEl = null;
    let activeTarget = null;
    // Track what the picker was built with so we only rebuild on real changes
    let _lastPickerSet = null;
    let _lastPickerTheme = null;
    // Minimum height the picker is allowed to shrink to (posts only)
    const PICKER_MIN_HEIGHT = 280;
    const PICKER_IDEAL_HEIGHT = 435;
    const PICKER_WIDTH = 352;
    const PICKER_PAD = 10;

    const EMOJI_SET_MAP = {
        system: 'native',
        twemoji: 'twitter',
        fluent: 'twitter',
        noto: 'google',
        openmoji: 'openmoji',
        retro: 'apple',
    };

    function getEmojiSet() {
        try {
            const t = JSON.parse(localStorage.getItem('lh_theme') || '{}');
            return EMOJI_SET_MAP[t.emoji] || 'native';
        } catch {
            return 'native';
        }
    }

    function getPickerTheme() {
        return document.body.classList.contains('ts-mode-light') ? 'light' : 'dark';
    }

    // ── createPicker: build ONCE, never destroy ─────────────────────
    function createPicker(set='native') {
        if (!pickerEl) {
            pickerEl = document.createElement('div');
            pickerEl.id = 'emoji-picker-floating';
            document.body.appendChild(pickerEl);
        }
        // If a picker already exists in this container, do NOT wipe it.
        // Only build if the container is genuinely empty.
        if (pickerEl.children.length > 0)
            return;

        const theme = getPickerTheme();
        _lastPickerSet = set;
        _lastPickerTheme = theme;

        picker = new Picker({
            parent: pickerEl,
            theme,
            set,
            custom: CUSTOM_EMOJIS,
            categories: ['frequent', 'lunarhaven_custom', 'people', 'nature', 'foods', 'activity', 'travel', 'places', 'objects', 'symbols', 'flags'],
            onEmojiSelect: (emoji) => {
                // Reaction mode — dispatch to chat reaction handler
                if (window._reactionPickerTarget) {
                    const insert = emoji.src ? `:${emoji.id}:` : (emoji.native || emoji.shortcodes || '');
                    document.dispatchEvent(new CustomEvent('lh-reaction-emoji', {
                        detail: {
                            msgId: window._reactionPickerTarget,
                            emoji: insert
                        }
                    }));
                    hidePicker();
                    return;
                }
                // Re-resolve activeTarget in case DOM was re-rendered
                const target = activeTarget && document.contains(activeTarget)
                ? activeTarget
                : (activeTarget?.id ? document.getElementById(activeTarget.id) : null);
                if (!target)
                    return;
                activeTarget = target;
                const insert = emoji.src
                ? `:${emoji.id}:`
                : (emoji.native || emoji.shortcodes || '');
                const start = target.selectionStart;
                const end = target.selectionEnd;
                const val = target.value;
                target.value = val.substring(0, start) + insert + val.substring(end);
                target.selectionStart = target.selectionEnd = start + insert.length;
                target.dispatchEvent(new Event('input'));
                target.focus();
            },
        });
    }

    // Called from theme settings when emoji set changes — destroys and rebuilds properly
    window.recreateEmojiPicker = () => {
        if (pickerEl) {
            pickerEl.innerHTML = '';
            picker = null;
        }
        createPicker(getEmojiSet());
    };

    function positionPicker(button, forceAbove=false) {
        if (!pickerEl)
            return;

        const rect = button.getBoundingClientRect();
        const spaceBelow = window.innerHeight - rect.bottom - PICKER_PAD;
        const spaceAbove = rect.top - PICKER_PAD;

        let top,
            pickerH;

        if (forceAbove) {
            // Comments: ALWAYS above the input row, using fixed viewport coords
            pickerH = PICKER_IDEAL_HEIGHT;
            // Clamp so we don't go off the top of the screen
            const idealTop = rect.top - pickerH - 6;
            top = Math.max(PICKER_PAD, idealTop);
            pickerEl.style.height = pickerH + 'px';
            pickerEl.style.position = 'fixed';
            pickerEl.style.top = top + 'px';
        } else {
            // Posts composer: prefer below, allow height reduction to fit
            pickerEl.style.position = 'fixed';
            if (spaceBelow >= PICKER_IDEAL_HEIGHT) {
                // Plenty of room below — ideal size
                pickerH = PICKER_IDEAL_HEIGHT;
                top = rect.bottom + 6;
            } else if (spaceBelow >= PICKER_MIN_HEIGHT) {
                // Fits below but tight — shrink to available space
                pickerH = spaceBelow - PICKER_PAD;
                top = rect.bottom + 6;
            } else if (spaceAbove >= PICKER_MIN_HEIGHT) {
                // Go above instead
                pickerH = Math.min(PICKER_IDEAL_HEIGHT, spaceAbove - PICKER_PAD);
                top = rect.top - pickerH - 6;
            } else {
                // Last resort: below at minimum height
                pickerH = PICKER_MIN_HEIGHT;
                top = rect.bottom + 6;
            }
            pickerEl.style.height = pickerH + 'px';
            pickerEl.style.top = top + 'px';
        }

        // Constrain horizontally
        let left = rect.left;
        const maxLeft = Math.max(PICKER_PAD, window.innerWidth - PICKER_WIDTH - PICKER_PAD);
        left = Math.min(left, maxLeft);
        left = Math.max(PICKER_PAD, left);
        pickerEl.style.left = left + 'px';
    }

    function togglePicker(button, textarea, forceAbove=false) {
        if (!textarea || !button)
            return;

        // Same button tap again → close
        if (pickerEl && pickerEl.style.display !== 'none' && activeTarget === textarea) {
            hidePicker();
            return;
        }

        activeTarget = textarea;

        const currentSet = getEmojiSet();
        const currentTheme = getPickerTheme();
        const needsRebuild = !picker
        || !pickerEl
        || !document.contains(pickerEl)
        || _lastPickerSet !== currentSet
        || _lastPickerTheme !== currentTheme;

        if (needsRebuild) {
            // Theme/set changed — rebuild cleanly via recreateEmojiPicker
            if (_lastPickerSet !== currentSet || _lastPickerTheme !== currentTheme) {
                window.recreateEmojiPicker();
            } else {
                createPicker(currentSet);
            }
            // Small delay for the web component to mount
            setTimeout(() => {
                if (pickerEl) {
                    pickerEl.style.display = 'block';
                    positionPicker(button, forceAbove);
                }
            }, 60);
            return;
        }

        pickerEl.style.display = 'block';
        positionPicker(button, forceAbove);
    }

    function hidePicker() {
        if (pickerEl) {
            pickerEl.style.display = 'none';
            activeTarget = null;
        }
    }

    // Single delegated listener — no duplicate direct listener on the button
    document.addEventListener('click', (e) => {
        const composerBtn = e.target.closest('#emoji-picker-btn');
        const commentBtn = e.target.closest('#comment-emoji-btn');

        if (composerBtn) {
            e.stopPropagation();
            e.preventDefault();
            togglePicker(composerBtn, document.getElementById('post-content'), false);
            return;
        }

        if (commentBtn) {
            e.stopPropagation();
            e.preventDefault();
            togglePicker(commentBtn, document.getElementById('comment-textarea'), true);
            return;
        }

        // Close if clicking outside
        if (pickerEl && pickerEl.style.display !== 'none') {
            const clickedInsidePicker = e.target.closest('#emoji-picker-floating');
            const clickedButton = e.target.closest('#emoji-picker-btn, #comment-emoji-btn');
            if (!clickedInsidePicker && !clickedButton) {
                hidePicker();
            }
        }
    });

    // Build the picker eagerly on first load so first tap is instant
    setTimeout(() => createPicker(getEmojiSet()), 300);

    window.hideEmojiPicker = hidePicker;
    window.toggleEmojiPicker = togglePicker;
    </script>
    <script src="script.js"></script>
<!-- Cloudflare Pages Analytics --><script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "2478a6a554f048009b783b2853ec948f"}'></script><!-- Cloudflare Pages Analytics --></body>
</html>
