<!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>

    <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 onclick="location.href='games.html'" id="sb-games-link">
                    <i data-lucide="gamepad-2"></i>
                    <span>Games</span>
                </li>
                <li id="nav-moderation" style="display: none;" onclick="location.href='moderation.html'">
                    <i data-lucide="shield-check"></i>
                    <span>Moderation</span>
                </li>
                <li onclick="window.open('https://lite.lunarhaven.app','_blank')" id="sb-lite-link" style="margin-top: auto;">
                    <i data-lucide="zap"></i>
                    <span>Lite</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 class="explore-games-section" id="explore-games-section">
                        <div class="explore-games-header">
                            <h3 class="explore-games-title">
                                <i data-lucide="gamepad-2"></i>

                                                    Lunarhaven Games
                                                
                            </h3>
                            <a href="games.html" class="explore-games-all-btn">

                                                    Play more 
                                <i data-lucide="arrow-right"></i>
                            </a>
                        </div>
                        <p class="explore-games-sub">Classic Flash games, right in your browser 👾</p>
                        <div class="explore-games-scroll" id="explore-games-scroll">
                            <div class="explore-game-card-shimmer"></div>
                            <div class="explore-game-card-shimmer"></div>
                            <div class="explore-game-card-shimmer"></div>
                            <div class="explore-game-card-shimmer"></div>
                        </div>
                    </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="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-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 settings-lite-section">Lunarhaven Lite</p>
                    <div class="settings-group settings-lite-group">
                        <a href="https://lite.lunarhaven.app" target="_blank" rel="noopener" class="settings-row">
                            <div class="settings-row-left">
                                <div class="settings-row-icon">
                                    <i data-lucide="zap"></i>
                                </div>
                                <div style="display:flex; flex-direction:column; gap:2px;">
                                    <span>Open Lite</span>
                                    <span style="font-size:0.72rem; color:var(--text-dim); font-weight:400;">Faster & lighter, for slow connections</span>
                                </div>
                            </div>
                            <i data-lucide="external-link" class="settings-chevron"></i>
                        </a>
                    </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 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 home screen for the full experience.</p>
            </div>

            <div style="background: rgba(255,255,255,0.03); 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);">

                                        This works as a 
                    <b>PWA (Progressive Web App)</b>
                    , which is like a mini browser that only runs Lunarhaven. It hides browser UI like address bars and tabs, giving you an app-like experience and quicker access. 🌙
                                    
                </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 isn't currently on the App Store/Play Store right now. This workaround is optional—the website works perfectly on its own. You can remove the app anytime, and it doesn't give us extra access to your device.
                        </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>
                    <!-- Password field (hidden by default, appears only for playdemo@lunarhaven.app) -->
                    <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 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>

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

        <!-- Progress Bar -->
        <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>

        <!-- STEP 1: Profile Setup -->
        <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>

        <!-- STEP 2: Pick Your Vibe -->
        <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>

        <!-- STEP 3: Find Your People -->
        <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>

        <!-- STEP 4: Welcome -->
        <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>
                </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;">
                            <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>
                        </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">
                            <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;">
                </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>
                </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:'Space Grotesk',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>
